From 8d7419fa6220d9f28afa5e81fe7afda680ceea22 Mon Sep 17 00:00:00 2001
From: Sumitmaithani <sumitmaithani824@gmail.com>
Date: Sat, 27 Jul 2024 17:50:46 +0530
Subject: [PATCH 01/16] feat: [Table] enhancements

---
 .../blade/src/components/Table/TableBody.web.tsx  | 15 +++++++++++++--
 packages/blade/src/components/Table/types.ts      | 11 +++++++++++
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/packages/blade/src/components/Table/TableBody.web.tsx b/packages/blade/src/components/Table/TableBody.web.tsx
index cc253f2ddc2..61315a08019 100644
--- a/packages/blade/src/components/Table/TableBody.web.tsx
+++ b/packages/blade/src/components/Table/TableBody.web.tsx
@@ -164,7 +164,9 @@ export const CellWrapper = styled(BaseBox)<{
   rowDensity: NonNullable<TableProps<unknown>['rowDensity']>;
   showStripedRows?: boolean;
   hasPadding?: boolean;
-}>(({ theme, rowDensity, showStripedRows, hasPadding = true }) => {
+  contentAlign?: TableCellProps['contentAlign'];
+  allowMultiline?: TableCellProps['allowMultiline'];
+}>(({ theme, rowDensity, showStripedRows, hasPadding = true, contentAlign, allowMultiline }) => {
   const rowBackgroundTransition = `background-color ${makeMotionTime(
     getIn(theme.motion, tableRow.backgroundColorMotionDuration),
   )} ${getIn(theme.motion, tableRow.backgroundColorMotionEasing)}`;
@@ -178,6 +180,8 @@ export const CellWrapper = styled(BaseBox)<{
       minHeight: makeSize(getIn(size, tableRow.minHeight[rowDensity])),
       height: '100%',
       width: '100%',
+      justifyContent: contentAlign,
+      whiteSpace: allowMultiline ? 'normal' : 'nowrap',
       ...(!showStripedRows && {
         borderBottomWidth: makeSpace(getIn(theme.border.width, tableRow.borderBottomWidth)),
         borderBottomColor: getIn(theme.colors, tableRow.borderColor),
@@ -187,7 +191,11 @@ export const CellWrapper = styled(BaseBox)<{
   };
 });
 
-const _TableCell = ({ children }: TableCellProps): React.ReactElement => {
+const _TableCell = ({
+  children,
+  allowMultiline,
+  contentAlign,
+}: TableCellProps): React.ReactElement => {
   const isChildrenString = typeof children === 'string';
   const { selectionType, rowDensity, showStripedRows, backgroundColor } = useTableContext();
   const isSelectable = selectionType !== 'none';
@@ -197,6 +205,7 @@ const _TableCell = ({ children }: TableCellProps): React.ReactElement => {
       tabIndex={0}
       role="cell"
       $backgroundColor={backgroundColor}
+      allowMultiline={allowMultiline}
       {...metaAttribute({ name: MetaConstants.TableCell })}
     >
       <BaseBox className="cell-wrapper-base" display="flex" alignItems="center" height="100%">
@@ -207,6 +216,8 @@ const _TableCell = ({ children }: TableCellProps): React.ReactElement => {
           display="flex"
           alignItems="center"
           flex={1}
+          contentAlign={contentAlign}
+          allowMultiline={allowMultiline}
           // when a direct string child is passed we want to disable pointer events
           // for custom cells components, consumers can handle pointer events themselves
           pointerEvents={isChildrenString && isSelectable ? 'none' : 'auto'}
diff --git a/packages/blade/src/components/Table/types.ts b/packages/blade/src/components/Table/types.ts
index c7d06fb6f13..7cbc3a261b6 100644
--- a/packages/blade/src/components/Table/types.ts
+++ b/packages/blade/src/components/Table/types.ts
@@ -252,6 +252,17 @@ type TableCellProps = {
    * </TableCell>
    **/
   children: React.ReactNode;
+  /**
+   * The contentAlign prop determines the content alignment of the table.
+   * The contentAlign prop can be 'left', 'center', or 'right'.
+   * The default value is `left`.
+   **/
+  contentAlign?: 'left' | 'center' | 'right';
+  /**
+   * The allowMultiline prop determines whether the table should allow multiline cells or not.
+   * The default value is `false`.
+   **/
+  allowMultiline?: boolean;
 };
 
 type TableEditableCellProps = Pick<

From 2ef7cd31f8c796cba0aa8e564874e873672787c8 Mon Sep 17 00:00:00 2001
From: Sumitmaithani <sumitmaithani824@gmail.com>
Date: Sat, 27 Jul 2024 17:56:12 +0530
Subject: [PATCH 02/16] fix: minior change

---
 packages/blade/src/components/Table/TableBody.web.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/blade/src/components/Table/TableBody.web.tsx b/packages/blade/src/components/Table/TableBody.web.tsx
index 61315a08019..ecb43decce9 100644
--- a/packages/blade/src/components/Table/TableBody.web.tsx
+++ b/packages/blade/src/components/Table/TableBody.web.tsx
@@ -205,7 +205,6 @@ const _TableCell = ({
       tabIndex={0}
       role="cell"
       $backgroundColor={backgroundColor}
-      allowMultiline={allowMultiline}
       {...metaAttribute({ name: MetaConstants.TableCell })}
     >
       <BaseBox className="cell-wrapper-base" display="flex" alignItems="center" height="100%">

From 1b15ba8b8d37435460418e50708bf113667b9361 Mon Sep 17 00:00:00 2001
From: Sumitmaithani <sumitmaithani824@gmail.com>
Date: Sun, 28 Jul 2024 11:27:27 +0530
Subject: [PATCH 03/16] feat: snapshot update

---
 .../Table/__tests__/__snapshots__/Table.web.test.tsx.snap | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap b/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap
index 553043dc63c..ef5669a522d 100644
--- a/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap
+++ b/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap
@@ -181,6 +181,7 @@ exports[`<Table /> should render table 1`] = `
   min-height: 48px;
   height: 100%;
   width: 100%;
+  white-space: nowrap;
   border-bottom-width: 1px;
   border-bottom-color: hsla(211,20%,52%,0.18);
   border-bottom-style: solid;
@@ -1655,6 +1656,7 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
   min-height: 48px;
   height: 100%;
   width: 100%;
+  white-space: nowrap;
   border-bottom-width: 1px;
   border-bottom-color: hsla(211,20%,52%,0.18);
   border-bottom-style: solid;
@@ -1669,6 +1671,7 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
   min-height: 48px;
   height: 100%;
   width: 100%;
+  white-space: nowrap;
   border-bottom-width: 1px;
   border-bottom-color: hsla(211,20%,52%,0.18);
   border-bottom-style: solid;
@@ -2872,6 +2875,7 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
   min-height: 60px;
   height: 100%;
   width: 100%;
+  white-space: nowrap;
   border-bottom-width: 1px;
   border-bottom-color: hsla(211,20%,52%,0.18);
   border-bottom-style: solid;
@@ -3739,6 +3743,7 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
   min-height: 36px;
   height: 100%;
   width: 100%;
+  white-space: nowrap;
   border-bottom-width: 1px;
   border-bottom-color: hsla(211,20%,52%,0.18);
   border-bottom-style: solid;
@@ -4757,6 +4762,7 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
   min-height: 48px;
   height: 100%;
   width: 100%;
+  white-space: nowrap;
   border-bottom-width: 1px;
   border-bottom-color: hsla(211,20%,52%,0.18);
   border-bottom-style: solid;
@@ -5680,6 +5686,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
   min-height: 48px;
   height: 100%;
   width: 100%;
+  white-space: nowrap;
 }
 
 .c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 {
@@ -6548,6 +6555,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
   min-height: 48px;
   height: 100%;
   width: 100%;
+  white-space: nowrap;
   border-bottom-width: 1px;
   border-bottom-color: hsla(211,20%,52%,0.18);
   border-bottom-style: solid;

From 35d1ec38c85ff3867ee4f61e1e9ab323c406e94e Mon Sep 17 00:00:00 2001
From: Sumitmaithani <sumitmaithani824@gmail.com>
Date: Tue, 27 Aug 2024 13:22:03 +0530
Subject: [PATCH 04/16] fix req change

---
 packages/blade/src/components/Table/TableBody.web.tsx | 10 +++++-----
 packages/blade/src/components/Table/types.ts          |  6 +++---
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/blade/src/components/Table/TableBody.web.tsx b/packages/blade/src/components/Table/TableBody.web.tsx
index ecb43decce9..2982a5c2d39 100644
--- a/packages/blade/src/components/Table/TableBody.web.tsx
+++ b/packages/blade/src/components/Table/TableBody.web.tsx
@@ -164,9 +164,9 @@ export const CellWrapper = styled(BaseBox)<{
   rowDensity: NonNullable<TableProps<unknown>['rowDensity']>;
   showStripedRows?: boolean;
   hasPadding?: boolean;
-  contentAlign?: TableCellProps['contentAlign'];
+  textAlign?: TableCellProps['textAlign'];
   allowMultiline?: TableCellProps['allowMultiline'];
-}>(({ theme, rowDensity, showStripedRows, hasPadding = true, contentAlign, allowMultiline }) => {
+}>(({ theme, rowDensity, showStripedRows, hasPadding = true, textAlign, allowMultiline }) => {
   const rowBackgroundTransition = `background-color ${makeMotionTime(
     getIn(theme.motion, tableRow.backgroundColorMotionDuration),
   )} ${getIn(theme.motion, tableRow.backgroundColorMotionEasing)}`;
@@ -180,7 +180,7 @@ export const CellWrapper = styled(BaseBox)<{
       minHeight: makeSize(getIn(size, tableRow.minHeight[rowDensity])),
       height: '100%',
       width: '100%',
-      justifyContent: contentAlign,
+      justifyContent: textAlign,
       whiteSpace: allowMultiline ? 'normal' : 'nowrap',
       ...(!showStripedRows && {
         borderBottomWidth: makeSpace(getIn(theme.border.width, tableRow.borderBottomWidth)),
@@ -194,7 +194,7 @@ export const CellWrapper = styled(BaseBox)<{
 const _TableCell = ({
   children,
   allowMultiline,
-  contentAlign,
+  textAlign,
 }: TableCellProps): React.ReactElement => {
   const isChildrenString = typeof children === 'string';
   const { selectionType, rowDensity, showStripedRows, backgroundColor } = useTableContext();
@@ -215,7 +215,7 @@ const _TableCell = ({
           display="flex"
           alignItems="center"
           flex={1}
-          contentAlign={contentAlign}
+          textAlign={textAlign}
           allowMultiline={allowMultiline}
           // when a direct string child is passed we want to disable pointer events
           // for custom cells components, consumers can handle pointer events themselves
diff --git a/packages/blade/src/components/Table/types.ts b/packages/blade/src/components/Table/types.ts
index 7cbc3a261b6..2c661e155c4 100644
--- a/packages/blade/src/components/Table/types.ts
+++ b/packages/blade/src/components/Table/types.ts
@@ -253,11 +253,11 @@ type TableCellProps = {
    **/
   children: React.ReactNode;
   /**
-   * The contentAlign prop determines the content alignment of the table.
-   * The contentAlign prop can be 'left', 'center', or 'right'.
+   * The textAlign prop determines the content alignment of the table.
+   * The textAlign prop can be 'left', 'center', or 'right'.
    * The default value is `left`.
    **/
-  contentAlign?: 'left' | 'center' | 'right';
+  textAlign?: 'left' | 'center' | 'right';
   /**
    * The allowMultiline prop determines whether the table should allow multiline cells or not.
    * The default value is `false`.

From 57a5f46f680f19a74e0a000746e35f78b7f23cb8 Mon Sep 17 00:00:00 2001
From: Sumitmaithani <sumitmaithani824@gmail.com>
Date: Wed, 28 Aug 2024 13:03:51 +0530
Subject: [PATCH 05/16] feat: snapshot update

---
 .../__snapshots__/Accordion.web.test.tsx.snap        | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/blade/src/components/Accordion/__tests__/__snapshots__/Accordion.web.test.tsx.snap b/packages/blade/src/components/Accordion/__tests__/__snapshots__/Accordion.web.test.tsx.snap
index 07b0b9fb10d..5f28ec5c02b 100644
--- a/packages/blade/src/components/Accordion/__tests__/__snapshots__/Accordion.web.test.tsx.snap
+++ b/packages/blade/src/components/Accordion/__tests__/__snapshots__/Accordion.web.test.tsx.snap
@@ -1150,7 +1150,7 @@ exports[`Deprecated <Accordion /> should render 1`] = `
               role="heading"
             >
               <button
-                aria-controls="collapsible-body-34"
+                aria-controls="collapsible-body-31"
                 aria-expanded="false"
                 class="c3"
                 data-blade-component="accordion-button"
@@ -1241,7 +1241,7 @@ exports[`Deprecated <Accordion /> should render 1`] = `
               aria-hidden="true"
               class=""
               data-blade-component="collapsible-body"
-              id="collapsible-body-34"
+              id="collapsible-body-31"
               role="region"
             >
               <div
@@ -1298,7 +1298,7 @@ exports[`Deprecated <Accordion /> should render 1`] = `
               role="heading"
             >
               <button
-                aria-controls="collapsible-body-35"
+                aria-controls="collapsible-body-32"
                 aria-expanded="false"
                 class="c3"
                 data-blade-component="accordion-button"
@@ -1389,7 +1389,7 @@ exports[`Deprecated <Accordion /> should render 1`] = `
               aria-hidden="true"
               class=""
               data-blade-component="collapsible-body"
-              id="collapsible-body-35"
+              id="collapsible-body-32"
               role="region"
             >
               <div
@@ -1446,7 +1446,7 @@ exports[`Deprecated <Accordion /> should render 1`] = `
               role="heading"
             >
               <button
-                aria-controls="collapsible-body-36"
+                aria-controls="collapsible-body-33"
                 aria-expanded="false"
                 class="c3"
                 data-blade-component="accordion-button"
@@ -1537,7 +1537,7 @@ exports[`Deprecated <Accordion /> should render 1`] = `
               aria-hidden="true"
               class=""
               data-blade-component="collapsible-body"
-              id="collapsible-body-36"
+              id="collapsible-body-33"
               role="region"
             >
               <div

From 6bdab62b07e830ffd71dc3bea86750891a778ea5 Mon Sep 17 00:00:00 2001
From: tewarig <gaurav.tewari@razorpay.com>
Date: Mon, 6 Jan 2025 14:42:34 +0530
Subject: [PATCH 06/16] chore: remove allowmultiline

---
 packages/blade/src/components/Table/TableBody.web.tsx | 6 +-----
 packages/blade/src/components/Table/types.ts          | 5 -----
 2 files changed, 1 insertion(+), 10 deletions(-)

diff --git a/packages/blade/src/components/Table/TableBody.web.tsx b/packages/blade/src/components/Table/TableBody.web.tsx
index 8aacd29339f..d30eb7d5152 100644
--- a/packages/blade/src/components/Table/TableBody.web.tsx
+++ b/packages/blade/src/components/Table/TableBody.web.tsx
@@ -257,8 +257,7 @@ export const CellWrapper = styled(BaseBox)<{
   showStripedRows?: boolean;
   hasPadding?: boolean;
   textAlign?: TableCellProps['textAlign'];
-  allowMultiline?: TableCellProps['allowMultiline'];
-}>(({ theme, $rowDensity, showStripedRows, hasPadding = true, textAlign, allowMultiline }) => {
+}>(({ theme, $rowDensity, showStripedRows, hasPadding = true, textAlign }) => {
   const rowBackgroundTransition = `background-color ${makeMotionTime(
     getIn(theme.motion, tableRow.backgroundColorMotionDuration),
   )} ${getIn(theme.motion, tableRow.backgroundColorMotionEasing)}`;
@@ -275,7 +274,6 @@ export const CellWrapper = styled(BaseBox)<{
       height: '100%',
       width: '100%',
       justifyContent: textAlign,
-      whiteSpace: allowMultiline ? 'normal' : 'nowrap',
       ...(!showStripedRows && {
         borderBottomWidth: makeSpace(getIn(theme.border.width, tableRow.borderBottomWidth)),
         borderBottomColor: getIn(theme.colors, tableRow.borderColor),
@@ -287,7 +285,6 @@ export const CellWrapper = styled(BaseBox)<{
 
 const _TableCell = ({
   children,
-  allowMultiline,
   textAlign,
   _hasPadding,
   ...rest
@@ -314,7 +311,6 @@ const _TableCell = ({
           hasPadding={_hasPadding}
           flex={1}
           textAlign={textAlign}
-          allowMultiline={allowMultiline}
           // when a direct string child is passed we want to disable pointer events
           // for custom cells components, consumers can handle pointer events themselves
           pointerEvents={isChildrenString && isSelectable ? 'none' : 'auto'}
diff --git a/packages/blade/src/components/Table/types.ts b/packages/blade/src/components/Table/types.ts
index f39a8612ebf..316330676b5 100644
--- a/packages/blade/src/components/Table/types.ts
+++ b/packages/blade/src/components/Table/types.ts
@@ -270,11 +270,6 @@ type TableCellProps = {
    * The default value is `left`.
    **/
   textAlign?: 'left' | 'center' | 'right';
-  /**
-   * The allowMultiline prop determines whether the table should allow multiline cells or not.
-   * The default value is `false`.
-   **/
-  allowMultiline?: boolean;
   /**
    * Removes padding from CellWrapper
    *

From 35d7d9e59103075f3dbf2712bf89f1890f5be75a Mon Sep 17 00:00:00 2001
From: tewarig <gaurav.tewari@razorpay.com>
Date: Mon, 6 Jan 2025 15:33:57 +0530
Subject: [PATCH 07/16] chore: update table header

---
 packages/blade/src/components/Table/TableHeader.web.tsx | 3 ++-
 packages/blade/src/components/Table/types.ts            | 6 ++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/blade/src/components/Table/TableHeader.web.tsx b/packages/blade/src/components/Table/TableHeader.web.tsx
index c7e7611e148..541de599d79 100644
--- a/packages/blade/src/components/Table/TableHeader.web.tsx
+++ b/packages/blade/src/components/Table/TableHeader.web.tsx
@@ -130,6 +130,7 @@ const _TableHeaderCell = ({
   children,
   headerKey,
   _hasPadding = true,
+  textAlign,
   ...rest
 }: TableHeaderCellProps): React.ReactElement => {
   const {
@@ -158,7 +159,7 @@ const _TableHeaderCell = ({
       {...makeAnalyticsAttribute(rest)}
     >
       {isChildrenString ? (
-        <Text size="medium" weight="medium" color="surface.text.gray.normal">
+        <Text size="medium" weight="medium" color="surface.text.gray.normal" textAlign={textAlign}>
           {children}
         </Text>
       ) : (
diff --git a/packages/blade/src/components/Table/types.ts b/packages/blade/src/components/Table/types.ts
index 316330676b5..08887d958c5 100644
--- a/packages/blade/src/components/Table/types.ts
+++ b/packages/blade/src/components/Table/types.ts
@@ -62,6 +62,12 @@ type TableHeaderCellProps = {
    * Sorting is enabled only for columns whose key is present in sortableColumns prop of Table.
    **/
   headerKey?: string;
+  /**
+   * The textAlign prop determines the content alignment of the table.
+   * The textAlign prop can be 'left', 'center', or 'right'.
+   * The default value is `left`.
+   **/
+  textAlign?: 'left' | 'center' | 'right';
 
   _hasPadding?: boolean;
 } & DataAnalyticsAttribute;

From 6ed6749411bd2fb886dbba1b1f49e68eb2011160 Mon Sep 17 00:00:00 2001
From: tewarig <gaurav.tewari@razorpay.com>
Date: Mon, 6 Jan 2025 15:49:32 +0530
Subject: [PATCH 08/16] chore: add text align

---
 packages/blade/src/components/Table/TableHeader.web.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/blade/src/components/Table/TableHeader.web.tsx b/packages/blade/src/components/Table/TableHeader.web.tsx
index 541de599d79..ee66610d0bb 100644
--- a/packages/blade/src/components/Table/TableHeader.web.tsx
+++ b/packages/blade/src/components/Table/TableHeader.web.tsx
@@ -96,7 +96,8 @@ const StyledHeaderCell = styled(HeaderCell)<{
   $backgroundColor: TableBackgroundColors;
   $rowDensity: NonNullable<TableProps<unknown>['rowDensity']>;
   $hasPadding: boolean;
-}>(({ theme, $isSortable, $backgroundColor, $rowDensity, $hasPadding }) => ({
+  $textAlign: 'left' | 'center' | 'right';
+}>(({ theme, $isSortable, $backgroundColor, $rowDensity, $hasPadding, $textAlign }) => ({
   '&&&': {
     height: '100%',
     backgroundColor: getIn(theme.colors, $backgroundColor),
@@ -111,7 +112,7 @@ const StyledHeaderCell = styled(HeaderCell)<{
       backgroundColor: getIn(theme.colors, tableHeader.backgroundColor),
       display: 'flex',
       flexDirection: 'row',
-      justifyContent: 'space-between',
+      justifyContent: $textAlign ? $textAlign : 'space-between',
       alignItems: 'center',
       height: '100%',
       paddingLeft: $hasPadding
@@ -150,6 +151,7 @@ const _TableHeaderCell = ({
       $backgroundColor={backgroundColor}
       $rowDensity={headerRowDensity ?? rowDensity}
       $hasPadding={_hasPadding}
+      $textAlign={textAlign}
       onClick={() => {
         if (isSortable) {
           toggleSort(headerKey);
@@ -159,7 +161,7 @@ const _TableHeaderCell = ({
       {...makeAnalyticsAttribute(rest)}
     >
       {isChildrenString ? (
-        <Text size="medium" weight="medium" color="surface.text.gray.normal" textAlign={textAlign}>
+        <Text size="medium" weight="medium" color="surface.text.gray.normal">
           {children}
         </Text>
       ) : (

From ae56d3592b33bbcda719343a95e824cb2f47db77 Mon Sep 17 00:00:00 2001
From: tewarig <gaurav.tewari@razorpay.com>
Date: Mon, 6 Jan 2025 16:33:20 +0530
Subject: [PATCH 09/16] chore: table header

---
 packages/blade/src/components/Table/TableHeader.web.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/blade/src/components/Table/TableHeader.web.tsx b/packages/blade/src/components/Table/TableHeader.web.tsx
index ee66610d0bb..6bf8cf1e26a 100644
--- a/packages/blade/src/components/Table/TableHeader.web.tsx
+++ b/packages/blade/src/components/Table/TableHeader.web.tsx
@@ -99,6 +99,8 @@ const StyledHeaderCell = styled(HeaderCell)<{
   $textAlign: 'left' | 'center' | 'right';
 }>(({ theme, $isSortable, $backgroundColor, $rowDensity, $hasPadding, $textAlign }) => ({
   '&&&': {
+    display: $textAlign ? 'flex' : 'block',
+    justifyContent: $textAlign ? 'space-between' : 'initial',
     height: '100%',
     backgroundColor: getIn(theme.colors, $backgroundColor),
     borderBottomWidth: makeSpace(getIn(theme.border.width, tableHeader.borderBottomAndTopWidth)),

From e017cf89e3776895cdf77169fd7823f62addf445 Mon Sep 17 00:00:00 2001
From: tewarig <gaurav.tewari@razorpay.com>
Date: Mon, 6 Jan 2025 23:07:26 +0530
Subject: [PATCH 10/16] chore: update snaps

---
 .../__snapshots__/Accordion.web.test.tsx.snap | 12 ++---
 .../__snapshots__/Table.web.test.tsx.snap     | 48 +++++++++++++++----
 2 files changed, 46 insertions(+), 14 deletions(-)

diff --git a/packages/blade/src/components/Accordion/__tests__/__snapshots__/Accordion.web.test.tsx.snap b/packages/blade/src/components/Accordion/__tests__/__snapshots__/Accordion.web.test.tsx.snap
index 08e027cdc94..fdd2daa7339 100644
--- a/packages/blade/src/components/Accordion/__tests__/__snapshots__/Accordion.web.test.tsx.snap
+++ b/packages/blade/src/components/Accordion/__tests__/__snapshots__/Accordion.web.test.tsx.snap
@@ -1152,7 +1152,7 @@ exports[`Deprecated <Accordion /> should render 1`] = `
               role="heading"
             >
               <button
-                aria-controls="collapsible-body-31"
+                aria-controls="collapsible-body-34"
                 aria-expanded="false"
                 class="c3"
                 data-blade-component="accordion-button"
@@ -1243,7 +1243,7 @@ exports[`Deprecated <Accordion /> should render 1`] = `
               aria-hidden="true"
               class=""
               data-blade-component="collapsible-body"
-              id="collapsible-body-31"
+              id="collapsible-body-34"
               role="region"
             >
               <div
@@ -1300,7 +1300,7 @@ exports[`Deprecated <Accordion /> should render 1`] = `
               role="heading"
             >
               <button
-                aria-controls="collapsible-body-32"
+                aria-controls="collapsible-body-35"
                 aria-expanded="false"
                 class="c3"
                 data-blade-component="accordion-button"
@@ -1391,7 +1391,7 @@ exports[`Deprecated <Accordion /> should render 1`] = `
               aria-hidden="true"
               class=""
               data-blade-component="collapsible-body"
-              id="collapsible-body-32"
+              id="collapsible-body-35"
               role="region"
             >
               <div
@@ -1448,7 +1448,7 @@ exports[`Deprecated <Accordion /> should render 1`] = `
               role="heading"
             >
               <button
-                aria-controls="collapsible-body-33"
+                aria-controls="collapsible-body-36"
                 aria-expanded="false"
                 class="c3"
                 data-blade-component="accordion-button"
@@ -1539,7 +1539,7 @@ exports[`Deprecated <Accordion /> should render 1`] = `
               aria-hidden="true"
               class=""
               data-blade-component="collapsible-body"
-              id="collapsible-body-33"
+              id="collapsible-body-36"
               role="region"
             >
               <div
diff --git a/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap b/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap
index f39718314e3..1223148564e 100644
--- a/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap
+++ b/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap
@@ -230,6 +230,11 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
 }
 
 .c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3 {
+  display: block;
+  -webkit-box-pack: initial;
+  -webkit-justify-content: initial;
+  -ms-flex-pack: initial;
+  justify-content: initial;
   height: 100%;
   background-color: hsla(0,0%,100%,1);
   border-bottom-width: 1px;
@@ -1274,7 +1279,6 @@ exports[`<Table /> should render table 1`] = `
   min-height: 48px;
   height: 100%;
   width: 100%;
-  white-space: nowrap;
   border-bottom-width: 1px;
   border-bottom-color: hsla(211,20%,52%,0.18);
   border-bottom-style: solid;
@@ -1346,6 +1350,11 @@ exports[`<Table /> should render table 1`] = `
 }
 
 .c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8 {
+  display: block;
+  -webkit-box-pack: initial;
+  -webkit-justify-content: initial;
+  -ms-flex-pack: initial;
+  justify-content: initial;
   height: 100%;
   background-color: hsla(0,0%,100%,1);
   border-bottom-width: 1px;
@@ -2826,7 +2835,6 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
   min-height: 48px;
   height: 100%;
   width: 100%;
-  white-space: nowrap;
   border-bottom-width: 1px;
   border-bottom-color: hsla(211,20%,52%,0.18);
   border-bottom-style: solid;
@@ -2841,7 +2849,6 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
   min-height: 48px;
   height: 100%;
   width: 100%;
-  white-space: nowrap;
   border-bottom-width: 1px;
   border-bottom-color: hsla(211,20%,52%,0.18);
   border-bottom-style: solid;
@@ -2925,6 +2932,11 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
 }
 
 .c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 {
+  display: block;
+  -webkit-box-pack: initial;
+  -webkit-justify-content: initial;
+  -ms-flex-pack: initial;
+  justify-content: initial;
   height: 100%;
   background-color: hsla(0,0%,100%,1);
   border-bottom-width: 1px;
@@ -4117,7 +4129,6 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
   min-height: 60px;
   height: 100%;
   width: 100%;
-  white-space: nowrap;
   border-bottom-width: 1px;
   border-bottom-color: hsla(211,20%,52%,0.18);
   border-bottom-style: solid;
@@ -4189,6 +4200,11 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
 }
 
 .c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3 {
+  display: block;
+  -webkit-box-pack: initial;
+  -webkit-justify-content: initial;
+  -ms-flex-pack: initial;
+  justify-content: initial;
   height: 100%;
   background-color: hsla(0,0%,100%,1);
   border-bottom-width: 1px;
@@ -5059,7 +5075,6 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
   min-height: 36px;
   height: 100%;
   width: 100%;
-  white-space: nowrap;
   border-bottom-width: 1px;
   border-bottom-color: hsla(211,20%,52%,0.18);
   border-bottom-style: solid;
@@ -5131,6 +5146,11 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
 }
 
 .c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3 {
+  display: block;
+  -webkit-box-pack: initial;
+  -webkit-justify-content: initial;
+  -ms-flex-pack: initial;
+  justify-content: initial;
   height: 100%;
   background-color: hsla(0,0%,100%,1);
   border-bottom-width: 1px;
@@ -6153,7 +6173,6 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
   min-height: 48px;
   height: 100%;
   width: 100%;
-  white-space: nowrap;
   border-bottom-width: 1px;
   border-bottom-color: hsla(211,20%,52%,0.18);
   border-bottom-style: solid;
@@ -6225,6 +6244,11 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
 }
 
 .c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 {
+  display: block;
+  -webkit-box-pack: initial;
+  -webkit-justify-content: initial;
+  -ms-flex-pack: initial;
+  justify-content: initial;
   height: 100%;
   background-color: hsla(0,0%,100%,1);
   border-bottom-width: 1px;
@@ -7151,7 +7175,6 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
   min-height: 48px;
   height: 100%;
   width: 100%;
-  white-space: nowrap;
 }
 
 .c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 {
@@ -7220,6 +7243,11 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
 }
 
 .c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3 {
+  display: block;
+  -webkit-box-pack: initial;
+  -webkit-justify-content: initial;
+  -ms-flex-pack: initial;
+  justify-content: initial;
   height: 100%;
   background-color: hsla(0,0%,100%,1);
   border-bottom-width: 1px;
@@ -8094,7 +8122,6 @@ exports[`<Table /> should render table with sticky header, footer & first column
   min-height: 48px;
   height: 100%;
   width: 100%;
-  white-space: nowrap;
   border-bottom-width: 1px;
   border-bottom-color: hsla(211,20%,52%,0.18);
   border-bottom-style: solid;
@@ -8166,6 +8193,11 @@ exports[`<Table /> should render table with sticky header, footer & first column
 }
 
 .c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4 {
+  display: block;
+  -webkit-box-pack: initial;
+  -webkit-justify-content: initial;
+  -ms-flex-pack: initial;
+  justify-content: initial;
   height: 100%;
   background-color: hsla(0,0%,100%,1);
   border-bottom-width: 1px;

From 642d58977da8c0ef650734c6376cb8a727945ec8 Mon Sep 17 00:00:00 2001
From: tewarig <gaurav.tewari@razorpay.com>
Date: Tue, 7 Jan 2025 00:04:50 +0530
Subject: [PATCH 11/16] chore: update table header icon

---
 .../src/components/Table/TableHeader.web.tsx  |  38 +-
 .../__snapshots__/Table.web.test.tsx.snap     | 808 ++++++++++++------
 2 files changed, 593 insertions(+), 253 deletions(-)

diff --git a/packages/blade/src/components/Table/TableHeader.web.tsx b/packages/blade/src/components/Table/TableHeader.web.tsx
index 6bf8cf1e26a..895d50a0a60 100644
--- a/packages/blade/src/components/Table/TableHeader.web.tsx
+++ b/packages/blade/src/components/Table/TableHeader.web.tsx
@@ -124,6 +124,14 @@ const StyledHeaderCell = styled(HeaderCell)<{
         ? makeSpace(getIn(theme, tableRow.paddingRight[$rowDensity]))
         : undefined,
       minHeight: makeSize(getIn(size, tableRow.minHeight[$rowDensity])),
+      '> .text': {
+        flexGrow: 1,
+        display: 'flex',
+        justifyContent: $textAlign,
+      },
+      '> .sortIcon': {
+        flexShrink: 0,
+      },
     },
     '&:focus-visible': getFocusRingStyles({ theme, negativeOffset: true }),
   },
@@ -162,20 +170,24 @@ const _TableHeaderCell = ({
       {...metaAttribute({ name: MetaConstants.TableHeaderCell })}
       {...makeAnalyticsAttribute(rest)}
     >
-      {isChildrenString ? (
-        <Text size="medium" weight="medium" color="surface.text.gray.normal">
-          {children}
-        </Text>
-      ) : (
-        children
-      )}
+      <div className="text">
+        {isChildrenString ? (
+          <Text size="medium" weight="medium" color="surface.text.gray.normal">
+            {children}
+          </Text>
+        ) : (
+          children
+        )}
+      </div>
       {isSortable && (
-        <BaseBox paddingLeft="spacing.2" backgroundColor="transparent">
-          <SortIcon
-            isSorted={currentSortedState.sortKey === headerKey}
-            isSortReversed={currentSortedState.isSortReversed}
-          />
-        </BaseBox>
+        <div className="sortIcon">
+          <BaseBox paddingLeft="spacing.2" backgroundColor="transparent">
+            <SortIcon
+              isSorted={currentSortedState.sortKey === headerKey}
+              isSortReversed={currentSortedState.isSortReversed}
+            />
+          </BaseBox>
+        </div>
       )}
     </StyledHeaderCell>
   );
diff --git a/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap b/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap
index 1223148564e..a8cbbc2520b 100644
--- a/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap
+++ b/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap
@@ -269,6 +269,23 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
   min-height: 48px;
 }
 
+.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3 > div > .text {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3 > div > .sortIcon {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
 .c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3:focus-visible {
   outline: 4px solid hsla(227,100%,59%,0.18);
   outline-offset: -4px;
@@ -350,12 +367,16 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
             tabindex="0"
           >
             <div>
-              <p
-                class="c4"
-                data-blade-component="text"
+              <div
+                class="text"
               >
-                Payment ID
-              </p>
+                <p
+                  class="c4"
+                  data-blade-component="text"
+                >
+                  Payment ID
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -368,12 +389,16 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
             tabindex="0"
           >
             <div>
-              <p
-                class="c4"
-                data-blade-component="text"
+              <div
+                class="text"
               >
-                Amount
-              </p>
+                <p
+                  class="c4"
+                  data-blade-component="text"
+                >
+                  Amount
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -386,12 +411,16 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
             tabindex="0"
           >
             <div>
-              <p
-                class="c4"
-                data-blade-component="text"
+              <div
+                class="text"
               >
-                Status
-              </p>
+                <p
+                  class="c4"
+                  data-blade-component="text"
+                >
+                  Status
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -404,12 +433,16 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
             tabindex="0"
           >
             <div>
-              <p
-                class="c4"
-                data-blade-component="text"
+              <div
+                class="text"
               >
-                Type
-              </p>
+                <p
+                  class="c4"
+                  data-blade-component="text"
+                >
+                  Type
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -422,12 +455,16 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
             tabindex="0"
           >
             <div>
-              <p
-                class="c4"
-                data-blade-component="text"
+              <div
+                class="text"
               >
-                Method
-              </p>
+                <p
+                  class="c4"
+                  data-blade-component="text"
+                >
+                  Method
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -440,12 +477,16 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
             tabindex="0"
           >
             <div>
-              <p
-                class="c4"
-                data-blade-component="text"
+              <div
+                class="text"
               >
-                Name
-              </p>
+                <p
+                  class="c4"
+                  data-blade-component="text"
+                >
+                  Name
+                </p>
+              </div>
             </div>
           </th>
         </tr>
@@ -1389,6 +1430,23 @@ exports[`<Table /> should render table 1`] = `
   min-height: 48px;
 }
 
+.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8 > div > .text {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8 > div > .sortIcon {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
 .c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8:focus-visible {
   outline: 4px solid hsla(227,100%,59%,0.18);
   outline-offset: -4px;
@@ -1499,12 +1557,16 @@ exports[`<Table /> should render table 1`] = `
             tabindex="0"
           >
             <div>
-              <p
-                class="c9"
-                data-blade-component="text"
+              <div
+                class="text"
               >
-                Payment ID
-              </p>
+                <p
+                  class="c9"
+                  data-blade-component="text"
+                >
+                  Payment ID
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -1517,12 +1579,16 @@ exports[`<Table /> should render table 1`] = `
             tabindex="0"
           >
             <div>
-              <p
-                class="c9"
-                data-blade-component="text"
+              <div
+                class="text"
               >
-                Amount
-              </p>
+                <p
+                  class="c9"
+                  data-blade-component="text"
+                >
+                  Amount
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -1535,12 +1601,16 @@ exports[`<Table /> should render table 1`] = `
             tabindex="0"
           >
             <div>
-              <p
-                class="c9"
-                data-blade-component="text"
+              <div
+                class="text"
               >
-                Status
-              </p>
+                <p
+                  class="c9"
+                  data-blade-component="text"
+                >
+                  Status
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -1553,12 +1623,16 @@ exports[`<Table /> should render table 1`] = `
             tabindex="0"
           >
             <div>
-              <p
-                class="c9"
-                data-blade-component="text"
+              <div
+                class="text"
               >
-                Type
-              </p>
+                <p
+                  class="c9"
+                  data-blade-component="text"
+                >
+                  Type
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -1571,12 +1645,16 @@ exports[`<Table /> should render table 1`] = `
             tabindex="0"
           >
             <div>
-              <p
-                class="c9"
-                data-blade-component="text"
+              <div
+                class="text"
               >
-                Method
-              </p>
+                <p
+                  class="c9"
+                  data-blade-component="text"
+                >
+                  Method
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -1589,12 +1667,16 @@ exports[`<Table /> should render table 1`] = `
             tabindex="0"
           >
             <div>
-              <p
-                class="c9"
-                data-blade-component="text"
+              <div
+                class="text"
               >
-                Name
-              </p>
+                <p
+                  class="c9"
+                  data-blade-component="text"
+                >
+                  Name
+                </p>
+              </div>
             </div>
           </th>
         </tr>
@@ -2971,6 +3053,23 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
   min-height: 48px;
 }
 
+.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 > div > .text {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 > div > .sortIcon {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
 .c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7:focus-visible {
   outline: 4px solid hsla(227,100%,59%,0.18);
   outline-offset: -4px;
@@ -3302,12 +3401,16 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
             tabindex="0"
           >
             <div>
-              <p
-                class="c8"
-                data-blade-component="text"
+              <div
+                class="text"
               >
-                Payment ID
-              </p>
+                <p
+                  class="c8"
+                  data-blade-component="text"
+                >
+                  Payment ID
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -3320,12 +3423,16 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
             tabindex="0"
           >
             <div>
-              <p
-                class="c8"
-                data-blade-component="text"
+              <div
+                class="text"
               >
-                Amount
-              </p>
+                <p
+                  class="c8"
+                  data-blade-component="text"
+                >
+                  Amount
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -3338,12 +3445,16 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
             tabindex="0"
           >
             <div>
-              <p
-                class="c8"
-                data-blade-component="text"
+              <div
+                class="text"
               >
-                Status
-              </p>
+                <p
+                  class="c8"
+                  data-blade-component="text"
+                >
+                  Status
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -3356,12 +3467,16 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
             tabindex="0"
           >
             <div>
-              <p
-                class="c8"
-                data-blade-component="text"
+              <div
+                class="text"
               >
-                Type
-              </p>
+                <p
+                  class="c8"
+                  data-blade-component="text"
+                >
+                  Type
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -3374,12 +3489,16 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
             tabindex="0"
           >
             <div>
-              <p
-                class="c8"
-                data-blade-component="text"
+              <div
+                class="text"
               >
-                Method
-              </p>
+                <p
+                  class="c8"
+                  data-blade-component="text"
+                >
+                  Method
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -3392,12 +3511,16 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
             tabindex="0"
           >
             <div>
-              <p
-                class="c8"
-                data-blade-component="text"
+              <div
+                class="text"
               >
-                Name
-              </p>
+                <p
+                  class="c8"
+                  data-blade-component="text"
+                >
+                  Name
+                </p>
+              </div>
             </div>
           </th>
         </tr>
@@ -4239,6 +4362,23 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
   min-height: 60px;
 }
 
+.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3 > div > .text {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3 > div > .sortIcon {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
 .c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3:focus-visible {
   outline: 4px solid hsla(227,100%,59%,0.18);
   outline-offset: -4px;
@@ -4318,12 +4458,16 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
             tabindex="0"
           >
             <div>
-              <p
-                class="c4"
-                data-blade-component="text"
+              <div
+                class="text"
               >
-                Payment ID
-              </p>
+                <p
+                  class="c4"
+                  data-blade-component="text"
+                >
+                  Payment ID
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -4336,12 +4480,16 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
             tabindex="0"
           >
             <div>
-              <p
-                class="c4"
-                data-blade-component="text"
+              <div
+                class="text"
               >
-                Amount
-              </p>
+                <p
+                  class="c4"
+                  data-blade-component="text"
+                >
+                  Amount
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -4354,12 +4502,16 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
             tabindex="0"
           >
             <div>
-              <p
-                class="c4"
-                data-blade-component="text"
+              <div
+                class="text"
               >
-                Status
-              </p>
+                <p
+                  class="c4"
+                  data-blade-component="text"
+                >
+                  Status
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -4372,12 +4524,16 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
             tabindex="0"
           >
             <div>
-              <p
-                class="c4"
-                data-blade-component="text"
+              <div
+                class="text"
               >
-                Type
-              </p>
+                <p
+                  class="c4"
+                  data-blade-component="text"
+                >
+                  Type
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -4390,12 +4546,16 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
             tabindex="0"
           >
             <div>
-              <p
-                class="c4"
-                data-blade-component="text"
+              <div
+                class="text"
               >
-                Method
-              </p>
+                <p
+                  class="c4"
+                  data-blade-component="text"
+                >
+                  Method
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -4408,12 +4568,16 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
             tabindex="0"
           >
             <div>
-              <p
-                class="c4"
-                data-blade-component="text"
+              <div
+                class="text"
               >
-                Name
-              </p>
+                <p
+                  class="c4"
+                  data-blade-component="text"
+                >
+                  Name
+                </p>
+              </div>
             </div>
           </th>
         </tr>
@@ -5185,6 +5349,23 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
   min-height: 36px;
 }
 
+.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3 > div > .text {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3 > div > .sortIcon {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
 .c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3:focus-visible {
   outline: 4px solid hsla(227,100%,59%,0.18);
   outline-offset: -4px;
@@ -5264,12 +5445,16 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
             tabindex="0"
           >
             <div>
-              <p
-                class="c4"
-                data-blade-component="text"
+              <div
+                class="text"
               >
-                Payment ID
-              </p>
+                <p
+                  class="c4"
+                  data-blade-component="text"
+                >
+                  Payment ID
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -5282,12 +5467,16 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
             tabindex="0"
           >
             <div>
-              <p
-                class="c4"
-                data-blade-component="text"
+              <div
+                class="text"
               >
-                Amount
-              </p>
+                <p
+                  class="c4"
+                  data-blade-component="text"
+                >
+                  Amount
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -5300,12 +5489,16 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
             tabindex="0"
           >
             <div>
-              <p
-                class="c4"
-                data-blade-component="text"
+              <div
+                class="text"
               >
-                Status
-              </p>
+                <p
+                  class="c4"
+                  data-blade-component="text"
+                >
+                  Status
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -5318,12 +5511,16 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
             tabindex="0"
           >
             <div>
-              <p
-                class="c4"
-                data-blade-component="text"
+              <div
+                class="text"
               >
-                Type
-              </p>
+                <p
+                  class="c4"
+                  data-blade-component="text"
+                >
+                  Type
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -5336,12 +5533,16 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
             tabindex="0"
           >
             <div>
-              <p
-                class="c4"
-                data-blade-component="text"
+              <div
+                class="text"
               >
-                Method
-              </p>
+                <p
+                  class="c4"
+                  data-blade-component="text"
+                >
+                  Method
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -5354,12 +5555,16 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
             tabindex="0"
           >
             <div>
-              <p
-                class="c4"
-                data-blade-component="text"
+              <div
+                class="text"
               >
-                Name
-              </p>
+                <p
+                  class="c4"
+                  data-blade-component="text"
+                >
+                  Name
+                </p>
+              </div>
             </div>
           </th>
         </tr>
@@ -6283,6 +6488,23 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
   min-height: 48px;
 }
 
+.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 > div > .text {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 > div > .sortIcon {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
 .c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7:focus-visible {
   outline: 4px solid hsla(227,100%,59%,0.18);
   outline-offset: -4px;
@@ -6410,12 +6632,16 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
             tabindex="0"
           >
             <div>
-              <p
-                class="c8"
-                data-blade-component="text"
+              <div
+                class="text"
               >
-                Payment ID
-              </p>
+                <p
+                  class="c8"
+                  data-blade-component="text"
+                >
+                  Payment ID
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -6428,12 +6654,16 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
             tabindex="0"
           >
             <div>
-              <p
-                class="c8"
-                data-blade-component="text"
+              <div
+                class="text"
               >
-                Amount
-              </p>
+                <p
+                  class="c8"
+                  data-blade-component="text"
+                >
+                  Amount
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -6446,12 +6676,16 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
             tabindex="0"
           >
             <div>
-              <p
-                class="c8"
-                data-blade-component="text"
+              <div
+                class="text"
               >
-                Status
-              </p>
+                <p
+                  class="c8"
+                  data-blade-component="text"
+                >
+                  Status
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -6464,12 +6698,16 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
             tabindex="0"
           >
             <div>
-              <p
-                class="c8"
-                data-blade-component="text"
+              <div
+                class="text"
               >
-                Type
-              </p>
+                <p
+                  class="c8"
+                  data-blade-component="text"
+                >
+                  Type
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -6482,12 +6720,16 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
             tabindex="0"
           >
             <div>
-              <p
-                class="c8"
-                data-blade-component="text"
+              <div
+                class="text"
               >
-                Method
-              </p>
+                <p
+                  class="c8"
+                  data-blade-component="text"
+                >
+                  Method
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -6500,12 +6742,16 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
             tabindex="0"
           >
             <div>
-              <p
-                class="c8"
-                data-blade-component="text"
+              <div
+                class="text"
               >
-                Name
-              </p>
+                <p
+                  class="c8"
+                  data-blade-component="text"
+                >
+                  Name
+                </p>
+              </div>
             </div>
           </th>
         </tr>
@@ -7282,6 +7528,23 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
   min-height: 48px;
 }
 
+.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3 > div > .text {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3 > div > .sortIcon {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
 .c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3:focus-visible {
   outline: 4px solid hsla(227,100%,59%,0.18);
   outline-offset: -4px;
@@ -7361,12 +7624,16 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
             tabindex="0"
           >
             <div>
-              <p
-                class="c4"
-                data-blade-component="text"
+              <div
+                class="text"
               >
-                Payment ID
-              </p>
+                <p
+                  class="c4"
+                  data-blade-component="text"
+                >
+                  Payment ID
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -7379,12 +7646,16 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
             tabindex="0"
           >
             <div>
-              <p
-                class="c4"
-                data-blade-component="text"
+              <div
+                class="text"
               >
-                Amount
-              </p>
+                <p
+                  class="c4"
+                  data-blade-component="text"
+                >
+                  Amount
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -7397,12 +7668,16 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
             tabindex="0"
           >
             <div>
-              <p
-                class="c4"
-                data-blade-component="text"
+              <div
+                class="text"
               >
-                Status
-              </p>
+                <p
+                  class="c4"
+                  data-blade-component="text"
+                >
+                  Status
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -7415,12 +7690,16 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
             tabindex="0"
           >
             <div>
-              <p
-                class="c4"
-                data-blade-component="text"
+              <div
+                class="text"
               >
-                Type
-              </p>
+                <p
+                  class="c4"
+                  data-blade-component="text"
+                >
+                  Type
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -7433,12 +7712,16 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
             tabindex="0"
           >
             <div>
-              <p
-                class="c4"
-                data-blade-component="text"
+              <div
+                class="text"
               >
-                Method
-              </p>
+                <p
+                  class="c4"
+                  data-blade-component="text"
+                >
+                  Method
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -7451,12 +7734,16 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
             tabindex="0"
           >
             <div>
-              <p
-                class="c4"
-                data-blade-component="text"
+              <div
+                class="text"
               >
-                Name
-              </p>
+                <p
+                  class="c4"
+                  data-blade-component="text"
+                >
+                  Name
+                </p>
+              </div>
             </div>
           </th>
         </tr>
@@ -8232,6 +8519,23 @@ exports[`<Table /> should render table with sticky header, footer & first column
   min-height: 48px;
 }
 
+.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4 > div > .text {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4 > div > .sortIcon {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
 .c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4:focus-visible {
   outline: 4px solid hsla(227,100%,59%,0.18);
   outline-offset: -4px;
@@ -8311,12 +8615,16 @@ exports[`<Table /> should render table with sticky header, footer & first column
             tabindex="0"
           >
             <div>
-              <p
-                class="c5"
-                data-blade-component="text"
+              <div
+                class="text"
               >
-                Payment ID
-              </p>
+                <p
+                  class="c5"
+                  data-blade-component="text"
+                >
+                  Payment ID
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -8329,12 +8637,16 @@ exports[`<Table /> should render table with sticky header, footer & first column
             tabindex="0"
           >
             <div>
-              <p
-                class="c5"
-                data-blade-component="text"
+              <div
+                class="text"
               >
-                Amount
-              </p>
+                <p
+                  class="c5"
+                  data-blade-component="text"
+                >
+                  Amount
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -8347,12 +8659,16 @@ exports[`<Table /> should render table with sticky header, footer & first column
             tabindex="0"
           >
             <div>
-              <p
-                class="c5"
-                data-blade-component="text"
+              <div
+                class="text"
               >
-                Status
-              </p>
+                <p
+                  class="c5"
+                  data-blade-component="text"
+                >
+                  Status
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -8365,12 +8681,16 @@ exports[`<Table /> should render table with sticky header, footer & first column
             tabindex="0"
           >
             <div>
-              <p
-                class="c5"
-                data-blade-component="text"
+              <div
+                class="text"
               >
-                Type
-              </p>
+                <p
+                  class="c5"
+                  data-blade-component="text"
+                >
+                  Type
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -8383,12 +8703,16 @@ exports[`<Table /> should render table with sticky header, footer & first column
             tabindex="0"
           >
             <div>
-              <p
-                class="c5"
-                data-blade-component="text"
+              <div
+                class="text"
               >
-                Method
-              </p>
+                <p
+                  class="c5"
+                  data-blade-component="text"
+                >
+                  Method
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -8401,12 +8725,16 @@ exports[`<Table /> should render table with sticky header, footer & first column
             tabindex="0"
           >
             <div>
-              <p
-                class="c5"
-                data-blade-component="text"
+              <div
+                class="text"
               >
-                Name
-              </p>
+                <p
+                  class="c5"
+                  data-blade-component="text"
+                >
+                  Name
+                </p>
+              </div>
             </div>
           </th>
         </tr>

From 02694c9bd6308bc250b3aaf0b154ff7a538da0bf Mon Sep 17 00:00:00 2001
From: tewarig <gaurav.tewari@razorpay.com>
Date: Tue, 7 Jan 2025 17:50:33 +0530
Subject: [PATCH 12/16] feat: add changeset

---
 .changeset/sweet-apes-roll.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/sweet-apes-roll.md

diff --git a/.changeset/sweet-apes-roll.md b/.changeset/sweet-apes-roll.md
new file mode 100644
index 00000000000..c2fc3e2c755
--- /dev/null
+++ b/.changeset/sweet-apes-roll.md
@@ -0,0 +1,5 @@
+---
+'@razorpay/blade': patch
+---
+
+feat: add header alignment

From ec77cfb05dfc497a787a0df9847f26397984ea7c Mon Sep 17 00:00:00 2001
From: tewarig <gaurav.tewari@razorpay.com>
Date: Tue, 7 Jan 2025 17:51:18 +0530
Subject: [PATCH 13/16] chore: update changeset

---
 .changeset/sweet-apes-roll.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/sweet-apes-roll.md b/.changeset/sweet-apes-roll.md
index c2fc3e2c755..c266f953797 100644
--- a/.changeset/sweet-apes-roll.md
+++ b/.changeset/sweet-apes-roll.md
@@ -2,4 +2,4 @@
 '@razorpay/blade': patch
 ---
 
-feat: add header alignment
+feat: ability to align individual table column items 

From e9279ce3e9b28236d365950bb570d8bae405e382 Mon Sep 17 00:00:00 2001
From: tewarig <gaurav.tewari@razorpay.com>
Date: Thu, 16 Jan 2025 14:30:15 +0530
Subject: [PATCH 14/16] chore: review changes & add align in table footer

---
 .../src/components/Table/TableFooter.web.tsx  | 11 ++++++--
 .../src/components/Table/TableHeader.web.tsx  | 26 ++++++-------------
 packages/blade/src/components/Table/types.ts  |  6 +++++
 3 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/packages/blade/src/components/Table/TableFooter.web.tsx b/packages/blade/src/components/Table/TableFooter.web.tsx
index 6c502f640bc..0b66d3cd9f2 100644
--- a/packages/blade/src/components/Table/TableFooter.web.tsx
+++ b/packages/blade/src/components/Table/TableFooter.web.tsx
@@ -79,7 +79,8 @@ const TableFooterRow = assignWithoutSideEffects(_TableFooterRow, {
 const StyledFooterCell = styled(FooterCell)<{
   $backgroundColor: TableBackgroundColors;
   $rowDensity: NonNullable<TableProps<unknown>['rowDensity']>;
-}>(({ theme, $backgroundColor, $rowDensity }) => ({
+  $textAlign?: string;
+}>(({ theme, $backgroundColor, $rowDensity, $textAlign }) => ({
   '&&&': {
     height: '100%',
     backgroundColor: getIn(theme.colors, $backgroundColor),
@@ -98,11 +99,16 @@ const StyledFooterCell = styled(FooterCell)<{
       paddingRight: makeSpace(getIn(theme, tableRow.paddingRight[$rowDensity])),
       minHeight: makeSize(getIn(size, tableRow.minHeight[$rowDensity])),
       alignItems: 'center',
+      justifyContent: $textAlign ? $textAlign : 'left',
     },
   },
 }));
 
-const _TableFooterCell = ({ children, ...rest }: TableFooterCellProps): React.ReactElement => {
+const _TableFooterCell = ({
+  children,
+  textAlign,
+  ...rest
+}: TableFooterCellProps): React.ReactElement => {
   const isChildrenString = typeof children === 'string';
   const { backgroundColor, rowDensity } = useTableContext();
 
@@ -110,6 +116,7 @@ const _TableFooterCell = ({ children, ...rest }: TableFooterCellProps): React.Re
     <StyledFooterCell
       $backgroundColor={backgroundColor}
       $rowDensity={rowDensity}
+      $textAlign={textAlign}
       {...metaAttribute({ name: MetaConstants.TableFooterCell })}
       {...makeAnalyticsAttribute(rest)}
     >
diff --git a/packages/blade/src/components/Table/TableHeader.web.tsx b/packages/blade/src/components/Table/TableHeader.web.tsx
index 895d50a0a60..298ae1a8330 100644
--- a/packages/blade/src/components/Table/TableHeader.web.tsx
+++ b/packages/blade/src/components/Table/TableHeader.web.tsx
@@ -124,14 +124,6 @@ const StyledHeaderCell = styled(HeaderCell)<{
         ? makeSpace(getIn(theme, tableRow.paddingRight[$rowDensity]))
         : undefined,
       minHeight: makeSize(getIn(size, tableRow.minHeight[$rowDensity])),
-      '> .text': {
-        flexGrow: 1,
-        display: 'flex',
-        justifyContent: $textAlign,
-      },
-      '> .sortIcon': {
-        flexShrink: 0,
-      },
     },
     '&:focus-visible': getFocusRingStyles({ theme, negativeOffset: true }),
   },
@@ -170,7 +162,7 @@ const _TableHeaderCell = ({
       {...metaAttribute({ name: MetaConstants.TableHeaderCell })}
       {...makeAnalyticsAttribute(rest)}
     >
-      <div className="text">
+      <BaseBox display="flex" flexGrow={1} justifyContent={textAlign}>
         {isChildrenString ? (
           <Text size="medium" weight="medium" color="surface.text.gray.normal">
             {children}
@@ -178,16 +170,14 @@ const _TableHeaderCell = ({
         ) : (
           children
         )}
-      </div>
+      </BaseBox>
       {isSortable && (
-        <div className="sortIcon">
-          <BaseBox paddingLeft="spacing.2" backgroundColor="transparent">
-            <SortIcon
-              isSorted={currentSortedState.sortKey === headerKey}
-              isSortReversed={currentSortedState.isSortReversed}
-            />
-          </BaseBox>
-        </div>
+        <BaseBox paddingLeft="spacing.2" backgroundColor="transparent" flexShrink={0}>
+          <SortIcon
+            isSorted={currentSortedState.sortKey === headerKey}
+            isSortReversed={currentSortedState.isSortReversed}
+          />
+        </BaseBox>
       )}
     </StyledHeaderCell>
   );
diff --git a/packages/blade/src/components/Table/types.ts b/packages/blade/src/components/Table/types.ts
index 08887d958c5..94c442d16f4 100644
--- a/packages/blade/src/components/Table/types.ts
+++ b/packages/blade/src/components/Table/types.ts
@@ -350,6 +350,12 @@ type TableFooterCellProps = {
    * The children of TableHeaderCell can be a string or a ReactNode.
    **/
   children: string | React.ReactNode;
+  /**
+   * The textAlign prop determines the content alignment of the table.
+   * The textAlign prop can be 'left', 'center', or 'right'.
+   * The default value is `left`.
+   **/
+  textAlign?: 'left' | 'center' | 'right';
 } & DataAnalyticsAttribute;
 
 type TablePaginationCommonProps = {

From 9eeb2ae710948a26a100212af7a2a9063f671eac Mon Sep 17 00:00:00 2001
From: tewarig <gaurav.tewari@razorpay.com>
Date: Thu, 16 Jan 2025 14:36:42 +0530
Subject: [PATCH 15/16] chore: update snap

---
 .../__snapshots__/Table.web.test.tsx.snap     | 2900 +++++++++--------
 1 file changed, 1464 insertions(+), 1436 deletions(-)

diff --git a/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap b/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap
index a8cbbc2520b..3300179c719 100644
--- a/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap
+++ b/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap
@@ -8,7 +8,18 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
   position: relative;
 }
 
-.c8.c8.c8.c8.c8 {
+.c4.c4.c4.c4.c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.c9.c9.c9.c9.c9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -20,7 +31,7 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
   height: 100%;
 }
 
-.c9.c9.c9.c9.c9 {
+.c10.c10.c10.c10.c10 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -37,7 +48,7 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
   pointer-events: auto;
 }
 
-.c4.c4.c4.c4.c4 {
+.c5.c5.c5.c5.c5 {
   color: hsla(212,39%,16%,1);
   font-family: "Inter","Inter Fallback Arial",Arial;
   font-size: 0.875rem;
@@ -54,7 +65,7 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
   padding: 0;
 }
 
-.c11.c11.c11.c11.c11 {
+.c12.c12.c12.c12.c12 {
   color: hsla(212,39%,16%,1);
   font-family: "Inter","Inter Fallback Arial",Arial;
   font-size: 0.875rem;
@@ -77,111 +88,111 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
   overflow-wrap: break-word;
 }
 
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 {
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 {
   border: none;
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 tr:last-child .cell-wrapper {
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 tr:last-child .cell-wrapper {
   border-bottom: none;
 }
 
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected .cell-wrapper-base,
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected .cell-wrapper-base {
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected .cell-wrapper-base,
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected .cell-wrapper-base {
   background-color: hsla(227,100%,59%,0.09);
 }
 
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base,
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base {
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base,
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base {
   background-color: hsla(227,100%,59%,0.18);
 }
 
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions,
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions {
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions,
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions {
   background-color: hsla(0,0%,100%,1);
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2,
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 {
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2,
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 {
   background-color: hsla(0,0%,100%,0);
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3,
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 {
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3,
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 {
   background-color: hsla(227,100%,59%,0.18);
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base,
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base {
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base,
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base {
   background-color: hsla(227,100%,59%,0.09);
 }
 
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions,
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions {
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions,
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions {
   background-color: hsla(0,0%,100%,1);
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2,
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 {
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2,
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 {
   background-color: hsla(0,0%,100%,0);
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3,
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 {
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3,
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 {
   background-color: hsla(227,100%,59%,0.09);
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base,
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base {
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base,
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base {
   background-color: hsla(227,100%,59%,0.18);
 }
 
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions,
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions {
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions,
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions {
   background-color: hsla(0,0%,100%,1);
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2,
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 {
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2,
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 {
   background-color: hsla(211,20%,52%,0.12);
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3,
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 {
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3,
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 {
   background-color: hsla(227,100%,59%,0.18);
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 {
+.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8 {
   height: 100%;
   background-color: hsla(0,0%,100%,1);
 }
 
-.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 > div:first-child {
+.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8 > div:first-child {
   -webkit-align-self: stretch;
   -ms-flex-item-align: stretch;
   align-self: stretch;
 }
 
-.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7:focus-visible {
+.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8:focus-visible {
   outline: 4px solid hsla(227,100%,59%,0.18);
   outline-offset: -4px;
   -webkit-transition-property: outline-width;
@@ -192,7 +203,7 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
   transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
-.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 {
+.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 {
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   background-color: transparent;
@@ -206,15 +217,15 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
   border-bottom-style: solid;
 }
 
-.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 {
+.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 {
   background-color: transparent;
 }
 
-.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 td:last-child .cell-wrapper {
+.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 td:last-child .cell-wrapper {
   border-right: none;
 }
 
-.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6:focus {
+.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7:focus {
   outline: 4px solid hsla(227,100%,59%,0.18);
   outline-offset: -4px;
   -webkit-transition-property: outline-width;
@@ -269,23 +280,6 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
   min-height: 48px;
 }
 
-.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3 > div > .text {
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3 > div > .sortIcon {
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-}
-
 .c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3:focus-visible {
   outline: 4px solid hsla(227,100%,59%,0.18);
   outline-offset: -4px;
@@ -302,31 +296,31 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
 }
 
 @media screen and (min-width:320px) {
-  .c9.c9.c9.c9.c9 {
+  .c10.c10.c10.c10.c10 {
     pointer-events: auto;
   }
 }
 
 @media screen and (min-width:480px) {
-  .c9.c9.c9.c9.c9 {
+  .c10.c10.c10.c10.c10 {
     pointer-events: auto;
   }
 }
 
 @media screen and (min-width:768px) {
-  .c9.c9.c9.c9.c9 {
+  .c10.c10.c10.c10.c10 {
     pointer-events: auto;
   }
 }
 
 @media screen and (min-width:1024px) {
-  .c9.c9.c9.c9.c9 {
+  .c10.c10.c10.c10.c10 {
     pointer-events: auto;
   }
 }
 
 @media screen and (min-width:1200px) {
-  .c9.c9.c9.c9.c9 {
+  .c10.c10.c10.c10.c10 {
     pointer-events: auto;
   }
 }
@@ -368,10 +362,11 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
           >
             <div>
               <div
-                class="text"
+                class="c4"
+                data-blade-component="base-box"
               >
                 <p
-                  class="c4"
+                  class="c5"
                   data-blade-component="text"
                 >
                   Payment ID
@@ -390,10 +385,11 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
           >
             <div>
               <div
-                class="text"
+                class="c4"
+                data-blade-component="base-box"
               >
                 <p
-                  class="c4"
+                  class="c5"
                   data-blade-component="text"
                 >
                   Amount
@@ -412,10 +408,11 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
           >
             <div>
               <div
-                class="text"
+                class="c4"
+                data-blade-component="base-box"
               >
                 <p
-                  class="c4"
+                  class="c5"
                   data-blade-component="text"
                 >
                   Status
@@ -434,10 +431,11 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
           >
             <div>
               <div
-                class="text"
+                class="c4"
+                data-blade-component="base-box"
               >
                 <p
-                  class="c4"
+                  class="c5"
                   data-blade-component="text"
                 >
                   Type
@@ -456,10 +454,11 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
           >
             <div>
               <div
-                class="text"
+                class="c4"
+                data-blade-component="base-box"
               >
                 <p
-                  class="c4"
+                  class="c5"
                   data-blade-component="text"
                 >
                   Method
@@ -478,10 +477,11 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
           >
             <div>
               <div
-                class="text"
+                class="c4"
+                data-blade-component="base-box"
               >
                 <p
-                  class="c4"
+                  class="c5"
                   data-blade-component="text"
                 >
                   Name
@@ -492,21 +492,21 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
         </tr>
       </thead>
       <tbody
-        class="c5 css-8eb0m3-Body"
+        class="c6 css-8eb0m3-Body"
         data-analytics-body="table-body-test"
         data-blade-component="table-body"
         data-table-library_body=""
       >
         <tr
           aria-selected="false"
-          class="tr tr-body c6 clickable css-1rzx1gz-getRowContainerStyle-Row"
+          class="tr tr-body c7 clickable css-1rzx1gz-getRowContainerStyle-Row"
           data-analytics-row="table-row-test"
           data-blade-component="table-row"
           data-table-library_tr-body=""
           role="row"
         >
           <td
-            class="td c7 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c8 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-analytics-cell="table-cell-test"
             data-blade-component="table-cell"
             data-table-library_td=""
@@ -515,16 +515,16 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c9 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c10 c11 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c11"
+                    class="c12"
                     data-blade-component="text"
                   >
                     rzp01
@@ -534,7 +534,7 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
             </div>
           </td>
           <td
-            class="td c7 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c8 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -542,11 +542,11 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c9 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c10 c11 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
@@ -556,7 +556,7 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
             </div>
           </td>
           <td
-            class="td c7 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c8 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -564,16 +564,16 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c9 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c10 c11 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c11"
+                    class="c12"
                     data-blade-component="text"
                   >
                     pending
@@ -583,7 +583,7 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
             </div>
           </td>
           <td
-            class="td c7 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c8 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -591,16 +591,16 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c9 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c10 c11 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c11"
+                    class="c12"
                     data-blade-component="text"
                   >
                     credit
@@ -612,14 +612,14 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
         </tr>
         <tr
           aria-selected="false"
-          class="tr tr-body c6 clickable css-1rzx1gz-getRowContainerStyle-Row"
+          class="tr tr-body c7 clickable css-1rzx1gz-getRowContainerStyle-Row"
           data-analytics-row="table-row-test"
           data-blade-component="table-row"
           data-table-library_tr-body=""
           role="row"
         >
           <td
-            class="td c7 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c8 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-analytics-cell="table-cell-test"
             data-blade-component="table-cell"
             data-table-library_td=""
@@ -628,16 +628,16 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c9 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c10 c11 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c11"
+                    class="c12"
                     data-blade-component="text"
                   >
                     rzp02
@@ -647,7 +647,7 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
             </div>
           </td>
           <td
-            class="td c7 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c8 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -655,11 +655,11 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c9 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c10 c11 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
@@ -669,7 +669,7 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
             </div>
           </td>
           <td
-            class="td c7 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c8 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -677,16 +677,16 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c9 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c10 c11 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c11"
+                    class="c12"
                     data-blade-component="text"
                   >
                     pending
@@ -696,7 +696,7 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
             </div>
           </td>
           <td
-            class="td c7 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c8 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -704,16 +704,16 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c9 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c10 c11 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c11"
+                    class="c12"
                     data-blade-component="text"
                   >
                     credit
@@ -725,14 +725,14 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
         </tr>
         <tr
           aria-selected="false"
-          class="tr tr-body c6 clickable css-1rzx1gz-getRowContainerStyle-Row"
+          class="tr tr-body c7 clickable css-1rzx1gz-getRowContainerStyle-Row"
           data-analytics-row="table-row-test"
           data-blade-component="table-row"
           data-table-library_tr-body=""
           role="row"
         >
           <td
-            class="td c7 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c8 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-analytics-cell="table-cell-test"
             data-blade-component="table-cell"
             data-table-library_td=""
@@ -741,16 +741,16 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c9 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c10 c11 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c11"
+                    class="c12"
                     data-blade-component="text"
                   >
                     rzp03
@@ -760,7 +760,7 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
             </div>
           </td>
           <td
-            class="td c7 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c8 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -768,11 +768,11 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c9 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c10 c11 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
@@ -782,7 +782,7 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
             </div>
           </td>
           <td
-            class="td c7 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c8 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -790,16 +790,16 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c9 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c10 c11 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c11"
+                    class="c12"
                     data-blade-component="text"
                   >
                     failed
@@ -809,7 +809,7 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
             </div>
           </td>
           <td
-            class="td c7 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c8 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -817,16 +817,16 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c9 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c10 c11 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c11"
+                    class="c12"
                     data-blade-component="text"
                   >
                     debit
@@ -838,14 +838,14 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
         </tr>
         <tr
           aria-selected="false"
-          class="tr tr-body c6 clickable css-1rzx1gz-getRowContainerStyle-Row"
+          class="tr tr-body c7 clickable css-1rzx1gz-getRowContainerStyle-Row"
           data-analytics-row="table-row-test"
           data-blade-component="table-row"
           data-table-library_tr-body=""
           role="row"
         >
           <td
-            class="td c7 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c8 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-analytics-cell="table-cell-test"
             data-blade-component="table-cell"
             data-table-library_td=""
@@ -854,16 +854,16 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c9 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c10 c11 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c11"
+                    class="c12"
                     data-blade-component="text"
                   >
                     rzp04
@@ -873,7 +873,7 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
             </div>
           </td>
           <td
-            class="td c7 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c8 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -881,11 +881,11 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c9 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c10 c11 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
@@ -895,7 +895,7 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
             </div>
           </td>
           <td
-            class="td c7 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c8 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -903,16 +903,16 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c9 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c10 c11 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c11"
+                    class="c12"
                     data-blade-component="text"
                   >
                     completed
@@ -922,7 +922,7 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
             </div>
           </td>
           <td
-            class="td c7 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c8 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -930,16 +930,16 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c9 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c10 c11 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c11"
+                    class="c12"
                     data-blade-component="text"
                   >
                     credit
@@ -951,14 +951,14 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
         </tr>
         <tr
           aria-selected="false"
-          class="tr tr-body c6 clickable css-1rzx1gz-getRowContainerStyle-Row"
+          class="tr tr-body c7 clickable css-1rzx1gz-getRowContainerStyle-Row"
           data-analytics-row="table-row-test"
           data-blade-component="table-row"
           data-table-library_tr-body=""
           role="row"
         >
           <td
-            class="td c7 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c8 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-analytics-cell="table-cell-test"
             data-blade-component="table-cell"
             data-table-library_td=""
@@ -967,16 +967,16 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c9 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c10 c11 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c11"
+                    class="c12"
                     data-blade-component="text"
                   >
                     rzp05
@@ -986,7 +986,7 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
             </div>
           </td>
           <td
-            class="td c7 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c8 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -994,11 +994,11 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c9 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c10 c11 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
@@ -1008,7 +1008,7 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
             </div>
           </td>
           <td
-            class="td c7 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c8 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -1016,16 +1016,16 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c9 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c10 c11 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c11"
+                    class="c12"
                     data-blade-component="text"
                   >
                     completed
@@ -1035,7 +1035,7 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
             </div>
           </td>
           <td
-            class="td c7 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c8 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -1043,16 +1043,16 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c9 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c10 c11 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c11"
+                    class="c12"
                     data-blade-component="text"
                   >
                     credit
@@ -1110,7 +1110,18 @@ exports[`<Table /> should render table 1`] = `
   align-items: center;
 }
 
-.c13.c13.c13.c13.c13 {
+.c9.c9.c9.c9.c9 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.c14.c14.c14.c14.c14 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1122,7 +1133,7 @@ exports[`<Table /> should render table 1`] = `
   height: 100%;
 }
 
-.c14.c14.c14.c14.c14 {
+.c15.c15.c15.c15.c15 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1156,7 +1167,7 @@ exports[`<Table /> should render table 1`] = `
   padding: 0;
 }
 
-.c9.c9.c9.c9.c9 {
+.c10.c10.c10.c10.c10 {
   color: hsla(212,39%,16%,1);
   font-family: "Inter","Inter Fallback Arial",Arial;
   font-size: 0.875rem;
@@ -1173,7 +1184,7 @@ exports[`<Table /> should render table 1`] = `
   padding: 0;
 }
 
-.c16.c16.c16.c16.c16 {
+.c17.c17.c17.c17.c17 {
   color: hsla(212,39%,16%,1);
   font-family: "Inter","Inter Fallback Arial",Arial;
   font-size: 0.875rem;
@@ -1196,111 +1207,111 @@ exports[`<Table /> should render table 1`] = `
   overflow-wrap: break-word;
 }
 
-.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 {
+.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 {
   border: none;
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 tr:last-child .cell-wrapper {
+.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 tr:last-child .cell-wrapper {
   border-bottom: none;
 }
 
-.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-single-selected .cell-wrapper-base,
-.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-selected .cell-wrapper-base {
+.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 .row-select-single-selected .cell-wrapper-base,
+.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 .row-select-selected .cell-wrapper-base {
   background-color: hsla(227,100%,59%,0.09);
 }
 
-.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base,
-.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base {
+.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base,
+.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base {
   background-color: hsla(227,100%,59%,0.18);
 }
 
-.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions,
-.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions {
+.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions,
+.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions {
   background-color: hsla(0,0%,100%,1);
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2,
-.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 {
+.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2,
+.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 {
   background-color: hsla(0,0%,100%,0);
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3,
-.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 {
+.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3,
+.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 {
   background-color: hsla(227,100%,59%,0.18);
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base,
-.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base {
+.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base,
+.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base {
   background-color: hsla(227,100%,59%,0.09);
 }
 
-.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions,
-.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions {
+.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions,
+.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions {
   background-color: hsla(0,0%,100%,1);
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2,
-.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 {
+.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2,
+.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 {
   background-color: hsla(0,0%,100%,0);
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3,
-.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 {
+.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3,
+.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 {
   background-color: hsla(227,100%,59%,0.09);
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base,
-.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base {
+.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base,
+.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base {
   background-color: hsla(227,100%,59%,0.18);
 }
 
-.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions,
-.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions {
+.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions,
+.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions {
   background-color: hsla(0,0%,100%,1);
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2,
-.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 {
+.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2,
+.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 {
   background-color: hsla(211,20%,52%,0.12);
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3,
-.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 {
+.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3,
+.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 {
   background-color: hsla(227,100%,59%,0.18);
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12 {
+.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13 {
   height: 100%;
   background-color: hsla(0,0%,100%,1);
 }
 
-.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12 > div:first-child {
+.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13 > div:first-child {
   -webkit-align-self: stretch;
   -ms-flex-item-align: stretch;
   align-self: stretch;
 }
 
-.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12:focus-visible {
+.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13:focus-visible {
   outline: 4px solid hsla(227,100%,59%,0.18);
   outline-offset: -4px;
   -webkit-transition-property: outline-width;
@@ -1311,7 +1322,7 @@ exports[`<Table /> should render table 1`] = `
   transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
-.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15 {
+.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16 {
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   background-color: transparent;
@@ -1325,15 +1336,15 @@ exports[`<Table /> should render table 1`] = `
   border-bottom-style: solid;
 }
 
-.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 {
+.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12 {
   background-color: transparent;
 }
 
-.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 td:last-child .cell-wrapper {
+.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12 td:last-child .cell-wrapper {
   border-right: none;
 }
 
-.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11:focus {
+.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12:focus {
   outline: 4px solid hsla(227,100%,59%,0.18);
   outline-offset: -4px;
   -webkit-transition-property: outline-width;
@@ -1344,19 +1355,19 @@ exports[`<Table /> should render table 1`] = `
   transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
-.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17 {
+.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18 {
   background-color: hsla(211,20%,52%,0.12);
 }
 
-.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17 tr:last-child th {
+.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18 tr:last-child th {
   border-bottom: none;
 }
 
-.c18.c18.c18.c18.c18 th:last-child {
+.c19.c19.c19.c19.c19 th:last-child {
   border-right: none;
 }
 
-.c19.c19.c19.c19.c19.c19.c19.c19.c19.c19.c19.c19.c19.c19.c19 {
+.c20.c20.c20.c20.c20.c20.c20.c20.c20.c20.c20.c20.c20.c20.c20 {
   height: 100%;
   background-color: hsla(0,0%,100%,1);
   border-bottom-width: 1px;
@@ -1367,7 +1378,7 @@ exports[`<Table /> should render table 1`] = `
   border-top-style: solid;
 }
 
-.c19.c19.c19.c19.c19.c19.c19.c19.c19.c19.c19.c19.c19.c19.c19 > div {
+.c20.c20.c20.c20.c20.c20.c20.c20.c20.c20.c20.c20.c20.c20.c20 > div {
   background-color: hsla(211,20%,52%,0.12);
   display: -webkit-box;
   display: -webkit-flex;
@@ -1384,6 +1395,10 @@ exports[`<Table /> should render table 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  -webkit-box-pack: left;
+  -webkit-justify-content: left;
+  -ms-flex-pack: left;
+  justify-content: left;
 }
 
 .c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 tr:first-child th {
@@ -1430,23 +1445,6 @@ exports[`<Table /> should render table 1`] = `
   min-height: 48px;
 }
 
-.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8 > div > .text {
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8 > div > .sortIcon {
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-}
-
 .c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8:focus-visible {
   outline: 4px solid hsla(227,100%,59%,0.18);
   outline-offset: -4px;
@@ -1468,31 +1466,31 @@ exports[`<Table /> should render table 1`] = `
 }
 
 @media screen and (min-width:320px) {
-  .c14.c14.c14.c14.c14 {
+  .c15.c15.c15.c15.c15 {
     pointer-events: auto;
   }
 }
 
 @media screen and (min-width:480px) {
-  .c14.c14.c14.c14.c14 {
+  .c15.c15.c15.c15.c15 {
     pointer-events: auto;
   }
 }
 
 @media screen and (min-width:768px) {
-  .c14.c14.c14.c14.c14 {
+  .c15.c15.c15.c15.c15 {
     pointer-events: auto;
   }
 }
 
 @media screen and (min-width:1024px) {
-  .c14.c14.c14.c14.c14 {
+  .c15.c15.c15.c15.c15 {
     pointer-events: auto;
   }
 }
 
 @media screen and (min-width:1200px) {
-  .c14.c14.c14.c14.c14 {
+  .c15.c15.c15.c15.c15 {
     pointer-events: auto;
   }
 }
@@ -1558,10 +1556,11 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <div
-                class="text"
+                class="c9"
+                data-blade-component="base-box"
               >
                 <p
-                  class="c9"
+                  class="c10"
                   data-blade-component="text"
                 >
                   Payment ID
@@ -1580,10 +1579,11 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <div
-                class="text"
+                class="c9"
+                data-blade-component="base-box"
               >
                 <p
-                  class="c9"
+                  class="c10"
                   data-blade-component="text"
                 >
                   Amount
@@ -1602,10 +1602,11 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <div
-                class="text"
+                class="c9"
+                data-blade-component="base-box"
               >
                 <p
-                  class="c9"
+                  class="c10"
                   data-blade-component="text"
                 >
                   Status
@@ -1624,10 +1625,11 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <div
-                class="text"
+                class="c9"
+                data-blade-component="base-box"
               >
                 <p
-                  class="c9"
+                  class="c10"
                   data-blade-component="text"
                 >
                   Type
@@ -1646,10 +1648,11 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <div
-                class="text"
+                class="c9"
+                data-blade-component="base-box"
               >
                 <p
-                  class="c9"
+                  class="c10"
                   data-blade-component="text"
                 >
                   Method
@@ -1668,10 +1671,11 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <div
-                class="text"
+                class="c9"
+                data-blade-component="base-box"
               >
                 <p
-                  class="c9"
+                  class="c10"
                   data-blade-component="text"
                 >
                   Name
@@ -1682,19 +1686,19 @@ exports[`<Table /> should render table 1`] = `
         </tr>
       </thead>
       <tbody
-        class="c10 css-8eb0m3-Body"
+        class="c11 css-8eb0m3-Body"
         data-blade-component="table-body"
         data-table-library_body=""
       >
         <tr
           aria-selected="false"
-          class="tr tr-body c11 clickable css-1rzx1gz-getRowContainerStyle-Row"
+          class="tr tr-body c12 clickable css-1rzx1gz-getRowContainerStyle-Row"
           data-blade-component="table-row"
           data-table-library_tr-body=""
           role="row"
         >
           <td
-            class="td c12 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c13 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -1702,16 +1706,16 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <div
-                class="c13 cell-wrapper-base"
+                class="c14 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c14 c15 cell-wrapper"
+                  class="c15 c16 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c16"
+                    class="c17"
                     data-blade-component="text"
                   >
                     rzp01
@@ -1721,7 +1725,7 @@ exports[`<Table /> should render table 1`] = `
             </div>
           </td>
           <td
-            class="td c12 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c13 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -1729,11 +1733,11 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <div
-                class="c13 cell-wrapper-base"
+                class="c14 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c14 c15 cell-wrapper"
+                  class="c15 c16 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
@@ -1743,7 +1747,7 @@ exports[`<Table /> should render table 1`] = `
             </div>
           </td>
           <td
-            class="td c12 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c13 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -1751,16 +1755,16 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <div
-                class="c13 cell-wrapper-base"
+                class="c14 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c14 c15 cell-wrapper"
+                  class="c15 c16 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c16"
+                    class="c17"
                     data-blade-component="text"
                   >
                     pending
@@ -1770,7 +1774,7 @@ exports[`<Table /> should render table 1`] = `
             </div>
           </td>
           <td
-            class="td c12 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c13 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -1778,16 +1782,16 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <div
-                class="c13 cell-wrapper-base"
+                class="c14 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c14 c15 cell-wrapper"
+                  class="c15 c16 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c16"
+                    class="c17"
                     data-blade-component="text"
                   >
                     credit
@@ -1797,7 +1801,7 @@ exports[`<Table /> should render table 1`] = `
             </div>
           </td>
           <td
-            class="td c12 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c13 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -1805,16 +1809,16 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <div
-                class="c13 cell-wrapper-base"
+                class="c14 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c14 c15 cell-wrapper"
+                  class="c15 c16 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c16"
+                    class="c17"
                     data-blade-component="text"
                   >
                     Netbanking
@@ -1824,7 +1828,7 @@ exports[`<Table /> should render table 1`] = `
             </div>
           </td>
           <td
-            class="td c12 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c13 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -1832,16 +1836,16 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <div
-                class="c13 cell-wrapper-base"
+                class="c14 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c14 c15 cell-wrapper"
+                  class="c15 c16 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c16"
+                    class="c17"
                     data-blade-component="text"
                   >
                     John Doe
@@ -1853,13 +1857,13 @@ exports[`<Table /> should render table 1`] = `
         </tr>
         <tr
           aria-selected="false"
-          class="tr tr-body c11 clickable css-1rzx1gz-getRowContainerStyle-Row"
+          class="tr tr-body c12 clickable css-1rzx1gz-getRowContainerStyle-Row"
           data-blade-component="table-row"
           data-table-library_tr-body=""
           role="row"
         >
           <td
-            class="td c12 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c13 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -1867,16 +1871,16 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <div
-                class="c13 cell-wrapper-base"
+                class="c14 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c14 c15 cell-wrapper"
+                  class="c15 c16 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c16"
+                    class="c17"
                     data-blade-component="text"
                   >
                     rzp02
@@ -1886,7 +1890,7 @@ exports[`<Table /> should render table 1`] = `
             </div>
           </td>
           <td
-            class="td c12 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c13 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -1894,11 +1898,11 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <div
-                class="c13 cell-wrapper-base"
+                class="c14 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c14 c15 cell-wrapper"
+                  class="c15 c16 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
@@ -1908,7 +1912,7 @@ exports[`<Table /> should render table 1`] = `
             </div>
           </td>
           <td
-            class="td c12 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c13 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -1916,16 +1920,16 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <div
-                class="c13 cell-wrapper-base"
+                class="c14 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c14 c15 cell-wrapper"
+                  class="c15 c16 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c16"
+                    class="c17"
                     data-blade-component="text"
                   >
                     pending
@@ -1935,7 +1939,7 @@ exports[`<Table /> should render table 1`] = `
             </div>
           </td>
           <td
-            class="td c12 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c13 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -1943,16 +1947,16 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <div
-                class="c13 cell-wrapper-base"
+                class="c14 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c14 c15 cell-wrapper"
+                  class="c15 c16 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c16"
+                    class="c17"
                     data-blade-component="text"
                   >
                     credit
@@ -1962,7 +1966,7 @@ exports[`<Table /> should render table 1`] = `
             </div>
           </td>
           <td
-            class="td c12 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c13 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -1970,16 +1974,16 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <div
-                class="c13 cell-wrapper-base"
+                class="c14 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c14 c15 cell-wrapper"
+                  class="c15 c16 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c16"
+                    class="c17"
                     data-blade-component="text"
                   >
                     UPI
@@ -1989,7 +1993,7 @@ exports[`<Table /> should render table 1`] = `
             </div>
           </td>
           <td
-            class="td c12 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c13 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -1997,16 +2001,16 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <div
-                class="c13 cell-wrapper-base"
+                class="c14 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c14 c15 cell-wrapper"
+                  class="c15 c16 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c16"
+                    class="c17"
                     data-blade-component="text"
                   >
                     Jane Doe
@@ -2018,13 +2022,13 @@ exports[`<Table /> should render table 1`] = `
         </tr>
         <tr
           aria-selected="false"
-          class="tr tr-body c11 clickable css-1rzx1gz-getRowContainerStyle-Row"
+          class="tr tr-body c12 clickable css-1rzx1gz-getRowContainerStyle-Row"
           data-blade-component="table-row"
           data-table-library_tr-body=""
           role="row"
         >
           <td
-            class="td c12 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c13 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -2032,16 +2036,16 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <div
-                class="c13 cell-wrapper-base"
+                class="c14 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c14 c15 cell-wrapper"
+                  class="c15 c16 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c16"
+                    class="c17"
                     data-blade-component="text"
                   >
                     rzp03
@@ -2051,7 +2055,7 @@ exports[`<Table /> should render table 1`] = `
             </div>
           </td>
           <td
-            class="td c12 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c13 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -2059,11 +2063,11 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <div
-                class="c13 cell-wrapper-base"
+                class="c14 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c14 c15 cell-wrapper"
+                  class="c15 c16 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
@@ -2073,7 +2077,7 @@ exports[`<Table /> should render table 1`] = `
             </div>
           </td>
           <td
-            class="td c12 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c13 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -2081,16 +2085,16 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <div
-                class="c13 cell-wrapper-base"
+                class="c14 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c14 c15 cell-wrapper"
+                  class="c15 c16 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c16"
+                    class="c17"
                     data-blade-component="text"
                   >
                     failed
@@ -2100,7 +2104,7 @@ exports[`<Table /> should render table 1`] = `
             </div>
           </td>
           <td
-            class="td c12 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c13 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -2108,16 +2112,16 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <div
-                class="c13 cell-wrapper-base"
+                class="c14 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c14 c15 cell-wrapper"
+                  class="c15 c16 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c16"
+                    class="c17"
                     data-blade-component="text"
                   >
                     debit
@@ -2127,7 +2131,7 @@ exports[`<Table /> should render table 1`] = `
             </div>
           </td>
           <td
-            class="td c12 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c13 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -2135,16 +2139,16 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <div
-                class="c13 cell-wrapper-base"
+                class="c14 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c14 c15 cell-wrapper"
+                  class="c15 c16 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c16"
+                    class="c17"
                     data-blade-component="text"
                   >
                     Debit Card
@@ -2154,7 +2158,7 @@ exports[`<Table /> should render table 1`] = `
             </div>
           </td>
           <td
-            class="td c12 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c13 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -2162,16 +2166,16 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <div
-                class="c13 cell-wrapper-base"
+                class="c14 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c14 c15 cell-wrapper"
+                  class="c15 c16 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c16"
+                    class="c17"
                     data-blade-component="text"
                   >
                     Alice Smith
@@ -2183,13 +2187,13 @@ exports[`<Table /> should render table 1`] = `
         </tr>
         <tr
           aria-selected="false"
-          class="tr tr-body c11 clickable css-1rzx1gz-getRowContainerStyle-Row"
+          class="tr tr-body c12 clickable css-1rzx1gz-getRowContainerStyle-Row"
           data-blade-component="table-row"
           data-table-library_tr-body=""
           role="row"
         >
           <td
-            class="td c12 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c13 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -2197,16 +2201,16 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <div
-                class="c13 cell-wrapper-base"
+                class="c14 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c14 c15 cell-wrapper"
+                  class="c15 c16 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c16"
+                    class="c17"
                     data-blade-component="text"
                   >
                     rzp04
@@ -2216,7 +2220,7 @@ exports[`<Table /> should render table 1`] = `
             </div>
           </td>
           <td
-            class="td c12 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c13 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -2224,11 +2228,11 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <div
-                class="c13 cell-wrapper-base"
+                class="c14 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c14 c15 cell-wrapper"
+                  class="c15 c16 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
@@ -2238,7 +2242,7 @@ exports[`<Table /> should render table 1`] = `
             </div>
           </td>
           <td
-            class="td c12 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c13 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -2246,16 +2250,16 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <div
-                class="c13 cell-wrapper-base"
+                class="c14 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c14 c15 cell-wrapper"
+                  class="c15 c16 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c16"
+                    class="c17"
                     data-blade-component="text"
                   >
                     completed
@@ -2265,7 +2269,7 @@ exports[`<Table /> should render table 1`] = `
             </div>
           </td>
           <td
-            class="td c12 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c13 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -2273,16 +2277,16 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <div
-                class="c13 cell-wrapper-base"
+                class="c14 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c14 c15 cell-wrapper"
+                  class="c15 c16 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c16"
+                    class="c17"
                     data-blade-component="text"
                   >
                     credit
@@ -2292,7 +2296,7 @@ exports[`<Table /> should render table 1`] = `
             </div>
           </td>
           <td
-            class="td c12 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c13 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -2300,16 +2304,16 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <div
-                class="c13 cell-wrapper-base"
+                class="c14 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c14 c15 cell-wrapper"
+                  class="c15 c16 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c16"
+                    class="c17"
                     data-blade-component="text"
                   >
                     Credit Card
@@ -2319,7 +2323,7 @@ exports[`<Table /> should render table 1`] = `
             </div>
           </td>
           <td
-            class="td c12 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c13 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -2327,16 +2331,16 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <div
-                class="c13 cell-wrapper-base"
+                class="c14 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c14 c15 cell-wrapper"
+                  class="c15 c16 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c16"
+                    class="c17"
                     data-blade-component="text"
                   >
                     Bob Smith
@@ -2348,13 +2352,13 @@ exports[`<Table /> should render table 1`] = `
         </tr>
         <tr
           aria-selected="false"
-          class="tr tr-body c11 clickable css-1rzx1gz-getRowContainerStyle-Row"
+          class="tr tr-body c12 clickable css-1rzx1gz-getRowContainerStyle-Row"
           data-blade-component="table-row"
           data-table-library_tr-body=""
           role="row"
         >
           <td
-            class="td c12 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c13 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -2362,16 +2366,16 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <div
-                class="c13 cell-wrapper-base"
+                class="c14 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c14 c15 cell-wrapper"
+                  class="c15 c16 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c16"
+                    class="c17"
                     data-blade-component="text"
                   >
                     rzp05
@@ -2381,7 +2385,7 @@ exports[`<Table /> should render table 1`] = `
             </div>
           </td>
           <td
-            class="td c12 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c13 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -2389,11 +2393,11 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <div
-                class="c13 cell-wrapper-base"
+                class="c14 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c14 c15 cell-wrapper"
+                  class="c15 c16 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
@@ -2403,7 +2407,7 @@ exports[`<Table /> should render table 1`] = `
             </div>
           </td>
           <td
-            class="td c12 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c13 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -2411,16 +2415,16 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <div
-                class="c13 cell-wrapper-base"
+                class="c14 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c14 c15 cell-wrapper"
+                  class="c15 c16 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c16"
+                    class="c17"
                     data-blade-component="text"
                   >
                     completed
@@ -2430,7 +2434,7 @@ exports[`<Table /> should render table 1`] = `
             </div>
           </td>
           <td
-            class="td c12 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c13 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -2438,16 +2442,16 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <div
-                class="c13 cell-wrapper-base"
+                class="c14 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c14 c15 cell-wrapper"
+                  class="c15 c16 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c16"
+                    class="c17"
                     data-blade-component="text"
                   >
                     credit
@@ -2457,7 +2461,7 @@ exports[`<Table /> should render table 1`] = `
             </div>
           </td>
           <td
-            class="td c12 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c13 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -2465,16 +2469,16 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <div
-                class="c13 cell-wrapper-base"
+                class="c14 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c14 c15 cell-wrapper"
+                  class="c15 c16 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c16"
+                    class="c17"
                     data-blade-component="text"
                   >
                     Netbanking
@@ -2484,7 +2488,7 @@ exports[`<Table /> should render table 1`] = `
             </div>
           </td>
           <td
-            class="td c12 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c13 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -2492,16 +2496,16 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <div
-                class="c13 cell-wrapper-base"
+                class="c14 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c14 c15 cell-wrapper"
+                  class="c15 c16 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c16"
+                    class="c17"
                     data-blade-component="text"
                   >
                     John Doe
@@ -2513,18 +2517,18 @@ exports[`<Table /> should render table 1`] = `
         </tr>
       </tbody>
       <tfoot
-        class="c17 css-1a28xfp-Header"
+        class="c18 css-1a28xfp-Header"
         data-blade-component="table-footer"
         role="rowgroup"
       >
         <tr
-          class="tr c18 tr-footer css-19bs4cg-getHeaderRowContainerStyle-HeaderRow"
+          class="tr c19 tr-footer css-19bs4cg-getHeaderRowContainerStyle-HeaderRow"
           data-blade-component="table-footer-row"
           data-table-library_tr-header=""
           role="rowfooter"
         >
           <th
-            class="th c19 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            class="th c20 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
             data-blade-component="table-footer-cell"
             data-hide="false"
             data-resize-min-width="75"
@@ -2533,7 +2537,7 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <p
-                class="c9"
+                class="c10"
                 data-blade-component="text"
               >
                 -
@@ -2541,7 +2545,7 @@ exports[`<Table /> should render table 1`] = `
             </div>
           </th>
           <th
-            class="th c19 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            class="th c20 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
             data-blade-component="table-footer-cell"
             data-hide="false"
             data-resize-min-width="75"
@@ -2550,7 +2554,7 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <p
-                class="c9"
+                class="c10"
                 data-blade-component="text"
               >
                 -
@@ -2558,7 +2562,7 @@ exports[`<Table /> should render table 1`] = `
             </div>
           </th>
           <th
-            class="th c19 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            class="th c20 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
             data-blade-component="table-footer-cell"
             data-hide="false"
             data-resize-min-width="75"
@@ -2567,7 +2571,7 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <p
-                class="c9"
+                class="c10"
                 data-blade-component="text"
               >
                 -
@@ -2575,7 +2579,7 @@ exports[`<Table /> should render table 1`] = `
             </div>
           </th>
           <th
-            class="th c19 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            class="th c20 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
             data-blade-component="table-footer-cell"
             data-hide="false"
             data-resize-min-width="75"
@@ -2584,7 +2588,7 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <p
-                class="c9"
+                class="c10"
                 data-blade-component="text"
               >
                 -
@@ -2592,7 +2596,7 @@ exports[`<Table /> should render table 1`] = `
             </div>
           </th>
           <th
-            class="th c19 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            class="th c20 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
             data-blade-component="table-footer-cell"
             data-hide="false"
             data-resize-min-width="75"
@@ -2601,7 +2605,7 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <p
-                class="c9"
+                class="c10"
                 data-blade-component="text"
               >
                 -
@@ -2609,7 +2613,7 @@ exports[`<Table /> should render table 1`] = `
             </div>
           </th>
           <th
-            class="th c19 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            class="th c20 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
             data-blade-component="table-footer-cell"
             data-hide="false"
             data-resize-min-width="75"
@@ -2618,7 +2622,7 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <p
-                class="c9"
+                class="c10"
                 data-blade-component="text"
               >
                 -
@@ -2674,7 +2678,18 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
   align-items: center;
 }
 
-.c12.c12.c12.c12.c12 {
+.c8.c8.c8.c8.c8 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.c13.c13.c13.c13.c13 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2686,7 +2701,7 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
   height: 100%;
 }
 
-.c13.c13.c13.c13.c13 {
+.c14.c14.c14.c14.c14 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2703,7 +2718,7 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
   pointer-events: auto;
 }
 
-.c17.c17.c17.c17.c17 {
+.c18.c18.c18.c18.c18 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2717,12 +2732,12 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
   align-items: center;
 }
 
-.c19.c19.c19.c19.c19 {
+.c20.c20.c20.c20.c20 {
   margin: 4px;
   width: 100%;
 }
 
-.c20.c20.c20.c20.c20 {
+.c21.c21.c21.c21.c21 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2747,7 +2762,7 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
   animation: eoUyJr-450290765 960ms cubic-bezier(0.5,0,0.3,1.5) infinite;
 }
 
-.c8.c8.c8.c8.c8 {
+.c9.c9.c9.c9.c9 {
   color: hsla(212,39%,16%,1);
   font-family: "Inter","Inter Fallback Arial",Arial;
   font-size: 0.875rem;
@@ -2764,7 +2779,7 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
   padding: 0;
 }
 
-.c15.c15.c15.c15.c15 {
+.c16.c16.c16.c16.c16 {
   color: hsla(212,39%,16%,1);
   font-family: "Inter","Inter Fallback Arial",Arial;
   font-size: 0.875rem;
@@ -2793,111 +2808,111 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
   transition: opacity 200ms;
 }
 
-.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 {
+.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 {
   border: none;
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 tr:last-child .cell-wrapper {
+.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 tr:last-child .cell-wrapper {
   border-bottom: none;
 }
 
-.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-single-selected .cell-wrapper-base,
-.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-selected .cell-wrapper-base {
+.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-single-selected .cell-wrapper-base,
+.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-selected .cell-wrapper-base {
   background-color: hsla(227,100%,59%,0.09);
 }
 
-.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base,
-.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base {
+.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base,
+.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base {
   background-color: hsla(227,100%,59%,0.18);
 }
 
-.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions,
-.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions {
+.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions,
+.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions {
   background-color: hsla(0,0%,100%,1);
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2,
-.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 {
+.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2,
+.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 {
   background-color: hsla(0,0%,100%,0);
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3,
-.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 {
+.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3,
+.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 {
   background-color: hsla(227,100%,59%,0.18);
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base,
-.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base {
+.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base,
+.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base {
   background-color: hsla(227,100%,59%,0.09);
 }
 
-.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions,
-.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions {
+.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions,
+.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions {
   background-color: hsla(0,0%,100%,1);
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2,
-.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 {
+.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2,
+.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 {
   background-color: hsla(0,0%,100%,0);
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3,
-.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 {
+.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3,
+.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 {
   background-color: hsla(227,100%,59%,0.09);
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base,
-.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base {
+.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base,
+.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base {
   background-color: hsla(227,100%,59%,0.18);
 }
 
-.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions,
-.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions {
+.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions,
+.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions {
   background-color: hsla(0,0%,100%,1);
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2,
-.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 {
+.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2,
+.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 {
   background-color: hsla(211,20%,52%,0.12);
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3,
-.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 {
+.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3,
+.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 {
   background-color: hsla(227,100%,59%,0.18);
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 {
+.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12 {
   height: 100%;
   background-color: hsla(0,0%,100%,1);
 }
 
-.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 > div:first-child {
+.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12 > div:first-child {
   -webkit-align-self: stretch;
   -ms-flex-item-align: stretch;
   align-self: stretch;
 }
 
-.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11:focus-visible {
+.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12:focus-visible {
   outline: 4px solid hsla(227,100%,59%,0.18);
   outline-offset: -4px;
   -webkit-transition-property: outline-width;
@@ -2908,7 +2923,7 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
   transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
-.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14 {
+.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15 {
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   background-color: transparent;
@@ -2922,7 +2937,7 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
   border-bottom-style: solid;
 }
 
-.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18 {
+.c19.c19.c19.c19.c19.c19.c19.c19.c19.c19.c19.c19.c19.c19.c19 {
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   background-color: transparent;
@@ -2936,21 +2951,21 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
   border-bottom-style: solid;
 }
 
-.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 {
+.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 {
   background-color: transparent;
 }
 
-.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .cell-wrapper {
+.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 .cell-wrapper {
   border-right-width: 1px;
   border-right-style: solid;
   border-right-color: hsla(211,20%,52%,0.18);
 }
 
-.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 td:last-child .cell-wrapper {
+.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 td:last-child .cell-wrapper {
   border-right: none;
 }
 
-.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10:focus {
+.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11:focus {
   outline: 4px solid hsla(227,100%,59%,0.18);
   outline-offset: -4px;
   -webkit-transition-property: outline-width;
@@ -2961,25 +2976,25 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
   transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
-.c24.c24.c24.c24.c24.c24.c24.c24.c24.c24.c24.c24.c24.c24.c24 {
+.c25.c25.c25.c25.c25.c25.c25.c25.c25.c25.c25.c25.c25.c25.c25 {
   background-color: hsla(211,20%,52%,0.12);
 }
 
-.c24.c24.c24.c24.c24.c24.c24.c24.c24.c24.c24.c24.c24.c24.c24 tr:last-child th {
+.c25.c25.c25.c25.c25.c25.c25.c25.c25.c25.c25.c25.c25.c25.c25 tr:last-child th {
   border-bottom: none;
 }
 
-.c25.c25.c25.c25.c25 th {
+.c26.c26.c26.c26.c26 th {
   border-right-width: 1px;
   border-right-color: hsla(211,20%,52%,0.18);
   border-right-style: solid;
 }
 
-.c25.c25.c25.c25.c25 th:last-child {
+.c26.c26.c26.c26.c26 th:last-child {
   border-right: none;
 }
 
-.c26.c26.c26.c26.c26.c26.c26.c26.c26.c26.c26.c26.c26.c26.c26 {
+.c27.c27.c27.c27.c27.c27.c27.c27.c27.c27.c27.c27.c27.c27.c27 {
   height: 100%;
   background-color: hsla(0,0%,100%,1);
   border-bottom-width: 1px;
@@ -2990,7 +3005,7 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
   border-top-style: solid;
 }
 
-.c26.c26.c26.c26.c26.c26.c26.c26.c26.c26.c26.c26.c26.c26.c26 > div {
+.c27.c27.c27.c27.c27.c27.c27.c27.c27.c27.c27.c27.c27.c27.c27 > div {
   background-color: hsla(211,20%,52%,0.12);
   display: -webkit-box;
   display: -webkit-flex;
@@ -3007,6 +3022,10 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  -webkit-box-pack: left;
+  -webkit-justify-content: left;
+  -ms-flex-pack: left;
+  justify-content: left;
 }
 
 .c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 tr:first-child th {
@@ -3053,23 +3072,6 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
   min-height: 48px;
 }
 
-.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 > div > .text {
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 > div > .sortIcon {
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-}
-
 .c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7:focus-visible {
   outline: 4px solid hsla(227,100%,59%,0.18);
   outline-offset: -4px;
@@ -3091,7 +3093,7 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
   border-right: none;
 }
 
-.c23.c23.c23.c23.c23 {
+.c24.c24.c24.c24.c24 {
   color: hsla(211,26%,34%,1);
   font-family: "Inter","Inter Fallback Arial",Arial;
   font-size: 1rem;
@@ -3123,7 +3125,7 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
   cursor: auto;
 }
 
-.c23.c23.c23.c23.c23::-webkit-input-placeholder {
+.c24.c24.c24.c24.c24::-webkit-input-placeholder {
   color: hsla(211,20%,52%,0.32);
   font-family: "Inter","Inter Fallback Arial",Arial;
   font-size: 1rem;
@@ -3140,7 +3142,7 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
   padding: 0;
 }
 
-.c23.c23.c23.c23.c23::-moz-placeholder {
+.c24.c24.c24.c24.c24::-moz-placeholder {
   color: hsla(211,20%,52%,0.32);
   font-family: "Inter","Inter Fallback Arial",Arial;
   font-size: 1rem;
@@ -3157,7 +3159,7 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
   padding: 0;
 }
 
-.c23.c23.c23.c23.c23:-ms-input-placeholder {
+.c24.c24.c24.c24.c24:-ms-input-placeholder {
   color: hsla(211,20%,52%,0.32);
   font-family: "Inter","Inter Fallback Arial",Arial;
   font-size: 1rem;
@@ -3174,7 +3176,7 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
   padding: 0;
 }
 
-.c23.c23.c23.c23.c23::placeholder {
+.c24.c24.c24.c24.c24::placeholder {
   color: hsla(211,20%,52%,0.32);
   font-family: "Inter","Inter Fallback Arial",Arial;
   font-size: 1rem;
@@ -3191,11 +3193,11 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
   padding: 0;
 }
 
-.c23.c23.c23.c23.c23:focus {
+.c24.c24.c24.c24.c24:focus {
   outline: none;
 }
 
-.c22.c22.c22.c22.c22 {
+.c23.c23.c23.c23.c23 {
   background-color: hsla(0,0%,100%,0);
   border-radius: 0px;
   border-style: solid;
@@ -3219,7 +3221,7 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
   transition-easing: cubic-bezier(0.3,0,0.2,1);
 }
 
-.c22.c22.c22.c22.c22:hover {
+.c23.c23.c23.c23.c23:hover {
   background-color: hsla(210,40%,98%,1);
   border-radius: 0px;
   border-style: solid;
@@ -3245,7 +3247,7 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
   transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
-.c22.c22.c22.c22.c22:focus-within {
+.c23.c23.c23.c23.c23:focus-within {
   background-color: hsla(0,0%,100%,0);
   border-radius: 0px;
   border-style: solid;
@@ -3269,16 +3271,16 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
   transition-easing: cubic-bezier(0.3,0,0.2,1);
 }
 
-.c21.c21.c21.c21.c21 {
+.c22.c22.c22.c22.c22 {
   border-radius: 0px;
   width: 100%;
 }
 
-.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16:focus-visible {
+.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17:focus-visible {
   outline: 1px solid;
 }
 
-.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16:focus-within {
+.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17:focus-within {
   outline: 4px solid hsla(227,100%,59%,0.18);
   outline-offset: -4px;
   -webkit-transition-property: outline-width;
@@ -3290,31 +3292,31 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
 }
 
 @media screen and (min-width:320px) {
-  .c13.c13.c13.c13.c13 {
+  .c14.c14.c14.c14.c14 {
     pointer-events: auto;
   }
 }
 
 @media screen and (min-width:480px) {
-  .c13.c13.c13.c13.c13 {
+  .c14.c14.c14.c14.c14 {
     pointer-events: auto;
   }
 }
 
 @media screen and (min-width:768px) {
-  .c13.c13.c13.c13.c13 {
+  .c14.c14.c14.c14.c14 {
     pointer-events: auto;
   }
 }
 
 @media screen and (min-width:1024px) {
-  .c13.c13.c13.c13.c13 {
+  .c14.c14.c14.c14.c14 {
     pointer-events: auto;
   }
 }
 
 @media screen and (min-width:1200px) {
-  .c13.c13.c13.c13.c13 {
+  .c14.c14.c14.c14.c14 {
     pointer-events: auto;
   }
 }
@@ -3402,10 +3404,11 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
           >
             <div>
               <div
-                class="text"
+                class="c8"
+                data-blade-component="base-box"
               >
                 <p
-                  class="c8"
+                  class="c9"
                   data-blade-component="text"
                 >
                   Payment ID
@@ -3424,10 +3427,11 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
           >
             <div>
               <div
-                class="text"
+                class="c8"
+                data-blade-component="base-box"
               >
                 <p
-                  class="c8"
+                  class="c9"
                   data-blade-component="text"
                 >
                   Amount
@@ -3446,10 +3450,11 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
           >
             <div>
               <div
-                class="text"
+                class="c8"
+                data-blade-component="base-box"
               >
                 <p
-                  class="c8"
+                  class="c9"
                   data-blade-component="text"
                 >
                   Status
@@ -3468,10 +3473,11 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
           >
             <div>
               <div
-                class="text"
+                class="c8"
+                data-blade-component="base-box"
               >
                 <p
-                  class="c8"
+                  class="c9"
                   data-blade-component="text"
                 >
                   Type
@@ -3490,10 +3496,11 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
           >
             <div>
               <div
-                class="text"
+                class="c8"
+                data-blade-component="base-box"
               >
                 <p
-                  class="c8"
+                  class="c9"
                   data-blade-component="text"
                 >
                   Method
@@ -3512,10 +3519,11 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
           >
             <div>
               <div
-                class="text"
+                class="c8"
+                data-blade-component="base-box"
               >
                 <p
-                  class="c8"
+                  class="c9"
                   data-blade-component="text"
                 >
                   Name
@@ -3526,19 +3534,19 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
         </tr>
       </thead>
       <tbody
-        class="c9 css-8eb0m3-Body"
+        class="c10 css-8eb0m3-Body"
         data-blade-component="table-body"
         data-table-library_body=""
       >
         <tr
           aria-selected="false"
-          class="tr tr-body c10 clickable css-1rzx1gz-getRowContainerStyle-Row"
+          class="tr tr-body c11 clickable css-1rzx1gz-getRowContainerStyle-Row"
           data-blade-component="table-row"
           data-table-library_tr-body=""
           role="row"
         >
           <td
-            class="td c11 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c12 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -3546,16 +3554,16 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
           >
             <div>
               <div
-                class="c12 cell-wrapper-base"
+                class="c13 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c13 c14 cell-wrapper"
+                  class="c14 c15 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c15"
+                    class="c16"
                     data-blade-component="text"
                   >
                     rzp01
@@ -3565,22 +3573,22 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
             </div>
           </td>
           <td
-            class="td c11 c16 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c12 c17 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
           >
             <div>
               <div
-                class="c12 cell-wrapper-base"
+                class="c13 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c17 c18 cell-wrapper"
+                  class="c18 c19 cell-wrapper"
                   data-blade-component="base-box"
                 >
                   <div
-                    class="c19"
+                    class="c20"
                     data-blade-component="box"
                   >
                     <div
@@ -3588,15 +3596,15 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
                       data-blade-component="base-box"
                     >
                       <div
-                        class="c20"
+                        class="c21"
                         data-blade-component="base-box"
                       >
                         <div
-                          class=" c21"
+                          class=" c22"
                           data-blade-component="base-box"
                         >
                           <div
-                            class="AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  c22"
+                            class="AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  c23"
                             data-blade-component="base-box"
                           >
                             <input
@@ -3605,7 +3613,7 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
                               aria-invalid="false"
                               aria-label="Amount"
                               aria-required="false"
-                              class="c23"
+                              class="c24"
                               data-blade-component="styled-base-input"
                               id="table-editable-cell-input-1-input-2"
                               placeholder="Enter Amount"
@@ -3622,7 +3630,7 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
             </div>
           </td>
           <td
-            class="td c11 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c12 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -3630,16 +3638,16 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
           >
             <div>
               <div
-                class="c12 cell-wrapper-base"
+                class="c13 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c13 c14 cell-wrapper"
+                  class="c14 c15 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c15"
+                    class="c16"
                     data-blade-component="text"
                   >
                     pending
@@ -3649,7 +3657,7 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
             </div>
           </td>
           <td
-            class="td c11 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c12 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -3657,16 +3665,16 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
           >
             <div>
               <div
-                class="c12 cell-wrapper-base"
+                class="c13 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c13 c14 cell-wrapper"
+                  class="c14 c15 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c15"
+                    class="c16"
                     data-blade-component="text"
                   >
                     credit
@@ -3676,7 +3684,7 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
             </div>
           </td>
           <td
-            class="td c11 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c12 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -3684,16 +3692,16 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
           >
             <div>
               <div
-                class="c12 cell-wrapper-base"
+                class="c13 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c13 c14 cell-wrapper"
+                  class="c14 c15 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c15"
+                    class="c16"
                     data-blade-component="text"
                   >
                     Netbanking
@@ -3703,7 +3711,7 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
             </div>
           </td>
           <td
-            class="td c11 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c12 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -3711,16 +3719,16 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
           >
             <div>
               <div
-                class="c12 cell-wrapper-base"
+                class="c13 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c13 c14 cell-wrapper"
+                  class="c14 c15 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c15"
+                    class="c16"
                     data-blade-component="text"
                   >
                     John Doe
@@ -3732,13 +3740,13 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
         </tr>
         <tr
           aria-selected="false"
-          class="tr tr-body c10 clickable css-1rzx1gz-getRowContainerStyle-Row"
+          class="tr tr-body c11 clickable css-1rzx1gz-getRowContainerStyle-Row"
           data-blade-component="table-row"
           data-table-library_tr-body=""
           role="row"
         >
           <td
-            class="td c11 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c12 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -3746,16 +3754,16 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
           >
             <div>
               <div
-                class="c12 cell-wrapper-base"
+                class="c13 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c13 c14 cell-wrapper"
+                  class="c14 c15 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c15"
+                    class="c16"
                     data-blade-component="text"
                   >
                     rzp02
@@ -3765,22 +3773,22 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
             </div>
           </td>
           <td
-            class="td c11 c16 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c12 c17 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
           >
             <div>
               <div
-                class="c12 cell-wrapper-base"
+                class="c13 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c17 c18 cell-wrapper"
+                  class="c18 c19 cell-wrapper"
                   data-blade-component="base-box"
                 >
                   <div
-                    class="c19"
+                    class="c20"
                     data-blade-component="box"
                   >
                     <div
@@ -3788,15 +3796,15 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
                       data-blade-component="base-box"
                     >
                       <div
-                        class="c20"
+                        class="c21"
                         data-blade-component="base-box"
                       >
                         <div
-                          class=" c21"
+                          class=" c22"
                           data-blade-component="base-box"
                         >
                           <div
-                            class="AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  c22"
+                            class="AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  c23"
                             data-blade-component="base-box"
                           >
                             <input
@@ -3805,7 +3813,7 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
                               aria-invalid="false"
                               aria-label="Amount"
                               aria-required="false"
-                              class="c23"
+                              class="c24"
                               data-blade-component="styled-base-input"
                               id="table-editable-cell-input-7-input-8"
                               placeholder="Enter Amount"
@@ -3822,7 +3830,7 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
             </div>
           </td>
           <td
-            class="td c11 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c12 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -3830,16 +3838,16 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
           >
             <div>
               <div
-                class="c12 cell-wrapper-base"
+                class="c13 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c13 c14 cell-wrapper"
+                  class="c14 c15 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c15"
+                    class="c16"
                     data-blade-component="text"
                   >
                     pending
@@ -3849,7 +3857,7 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
             </div>
           </td>
           <td
-            class="td c11 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c12 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -3857,16 +3865,16 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
           >
             <div>
               <div
-                class="c12 cell-wrapper-base"
+                class="c13 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c13 c14 cell-wrapper"
+                  class="c14 c15 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c15"
+                    class="c16"
                     data-blade-component="text"
                   >
                     credit
@@ -3876,7 +3884,7 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
             </div>
           </td>
           <td
-            class="td c11 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c12 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -3884,16 +3892,16 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
           >
             <div>
               <div
-                class="c12 cell-wrapper-base"
+                class="c13 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c13 c14 cell-wrapper"
+                  class="c14 c15 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c15"
+                    class="c16"
                     data-blade-component="text"
                   >
                     UPI
@@ -3903,7 +3911,7 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
             </div>
           </td>
           <td
-            class="td c11 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c12 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -3911,16 +3919,16 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
           >
             <div>
               <div
-                class="c12 cell-wrapper-base"
+                class="c13 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c13 c14 cell-wrapper"
+                  class="c14 c15 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c15"
+                    class="c16"
                     data-blade-component="text"
                   >
                     Jane Doe
@@ -3932,18 +3940,18 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
         </tr>
       </tbody>
       <tfoot
-        class="c24 css-1a28xfp-Header"
+        class="c25 css-1a28xfp-Header"
         data-blade-component="table-footer"
         role="rowgroup"
       >
         <tr
-          class="tr c25 tr-footer css-19bs4cg-getHeaderRowContainerStyle-HeaderRow"
+          class="tr c26 tr-footer css-19bs4cg-getHeaderRowContainerStyle-HeaderRow"
           data-blade-component="table-footer-row"
           data-table-library_tr-header=""
           role="rowfooter"
         >
           <th
-            class="th c26 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            class="th c27 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
             data-blade-component="table-footer-cell"
             data-hide="false"
             data-resize-min-width="75"
@@ -3952,7 +3960,7 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
           >
             <div>
               <p
-                class="c8"
+                class="c9"
                 data-blade-component="text"
               >
                 -
@@ -3960,7 +3968,7 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
             </div>
           </th>
           <th
-            class="th c26 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            class="th c27 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
             data-blade-component="table-footer-cell"
             data-hide="false"
             data-resize-min-width="75"
@@ -3969,7 +3977,7 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
           >
             <div>
               <p
-                class="c8"
+                class="c9"
                 data-blade-component="text"
               >
                 -
@@ -3977,7 +3985,7 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
             </div>
           </th>
           <th
-            class="th c26 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            class="th c27 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
             data-blade-component="table-footer-cell"
             data-hide="false"
             data-resize-min-width="75"
@@ -3986,7 +3994,7 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
           >
             <div>
               <p
-                class="c8"
+                class="c9"
                 data-blade-component="text"
               >
                 -
@@ -3994,7 +4002,7 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
             </div>
           </th>
           <th
-            class="th c26 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            class="th c27 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
             data-blade-component="table-footer-cell"
             data-hide="false"
             data-resize-min-width="75"
@@ -4003,7 +4011,7 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
           >
             <div>
               <p
-                class="c8"
+                class="c9"
                 data-blade-component="text"
               >
                 -
@@ -4011,7 +4019,7 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
             </div>
           </th>
           <th
-            class="th c26 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            class="th c27 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
             data-blade-component="table-footer-cell"
             data-hide="false"
             data-resize-min-width="75"
@@ -4020,7 +4028,7 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
           >
             <div>
               <p
-                class="c8"
+                class="c9"
                 data-blade-component="text"
               >
                 -
@@ -4028,7 +4036,7 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
             </div>
           </th>
           <th
-            class="th c26 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            class="th c27 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
             data-blade-component="table-footer-cell"
             data-hide="false"
             data-resize-min-width="75"
@@ -4037,7 +4045,7 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
           >
             <div>
               <p
-                class="c8"
+                class="c9"
                 data-blade-component="text"
               >
                 -
@@ -4059,7 +4067,18 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
   position: relative;
 }
 
-.c8.c8.c8.c8.c8 {
+.c4.c4.c4.c4.c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.c9.c9.c9.c9.c9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4071,7 +4090,7 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
   height: 100%;
 }
 
-.c9.c9.c9.c9.c9 {
+.c10.c10.c10.c10.c10 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4088,7 +4107,7 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
   pointer-events: auto;
 }
 
-.c4.c4.c4.c4.c4 {
+.c5.c5.c5.c5.c5 {
   color: hsla(212,39%,16%,1);
   font-family: "Inter","Inter Fallback Arial",Arial;
   font-size: 0.875rem;
@@ -4105,7 +4124,7 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
   padding: 0;
 }
 
-.c11.c11.c11.c11.c11 {
+.c12.c12.c12.c12.c12 {
   color: hsla(212,39%,16%,1);
   font-family: "Inter","Inter Fallback Arial",Arial;
   font-size: 0.875rem;
@@ -4128,111 +4147,111 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
   overflow-wrap: break-word;
 }
 
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 {
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 {
   border: none;
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 tr:last-child .cell-wrapper {
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 tr:last-child .cell-wrapper {
   border-bottom: none;
 }
 
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected .cell-wrapper-base,
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected .cell-wrapper-base {
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected .cell-wrapper-base,
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected .cell-wrapper-base {
   background-color: hsla(227,100%,59%,0.09);
 }
 
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base,
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base {
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base,
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base {
   background-color: hsla(227,100%,59%,0.18);
 }
 
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions,
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions {
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions,
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions {
   background-color: hsla(0,0%,100%,1);
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2,
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 {
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2,
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 {
   background-color: hsla(0,0%,100%,0);
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3,
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 {
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3,
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 {
   background-color: hsla(227,100%,59%,0.18);
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base,
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base {
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base,
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base {
   background-color: hsla(227,100%,59%,0.09);
 }
 
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions,
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions {
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions,
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions {
   background-color: hsla(0,0%,100%,1);
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2,
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 {
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2,
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 {
   background-color: hsla(0,0%,100%,0);
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3,
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 {
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3,
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 {
   background-color: hsla(227,100%,59%,0.09);
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base,
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base {
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base,
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base {
   background-color: hsla(227,100%,59%,0.18);
 }
 
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions,
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions {
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions,
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions {
   background-color: hsla(0,0%,100%,1);
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2,
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 {
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2,
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 {
   background-color: hsla(211,20%,52%,0.12);
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3,
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 {
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3,
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 {
   background-color: hsla(227,100%,59%,0.18);
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 {
+.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8 {
   height: 100%;
   background-color: hsla(0,0%,100%,1);
 }
 
-.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 > div:first-child {
+.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8 > div:first-child {
   -webkit-align-self: stretch;
   -ms-flex-item-align: stretch;
   align-self: stretch;
 }
 
-.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7:focus-visible {
+.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8:focus-visible {
   outline: 4px solid hsla(227,100%,59%,0.18);
   outline-offset: -4px;
   -webkit-transition-property: outline-width;
@@ -4243,7 +4262,7 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
   transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
-.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 {
+.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 {
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   background-color: transparent;
@@ -4257,15 +4276,15 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
   border-bottom-style: solid;
 }
 
-.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 {
+.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 {
   background-color: transparent;
 }
 
-.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 td:last-child .cell-wrapper {
+.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 td:last-child .cell-wrapper {
   border-right: none;
 }
 
-.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6:focus {
+.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7:focus {
   outline: 4px solid hsla(227,100%,59%,0.18);
   outline-offset: -4px;
   -webkit-transition-property: outline-width;
@@ -4276,19 +4295,19 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
   transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
-.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12 {
+.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13 {
   background-color: hsla(211,20%,52%,0.12);
 }
 
-.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12 tr:last-child th {
+.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13 tr:last-child th {
   border-bottom: none;
 }
 
-.c13.c13.c13.c13.c13 th:last-child {
+.c14.c14.c14.c14.c14 th:last-child {
   border-right: none;
 }
 
-.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14 {
+.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15 {
   height: 100%;
   background-color: hsla(0,0%,100%,1);
   border-bottom-width: 1px;
@@ -4299,7 +4318,7 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
   border-top-style: solid;
 }
 
-.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14 > div {
+.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15 > div {
   background-color: hsla(211,20%,52%,0.12);
   display: -webkit-box;
   display: -webkit-flex;
@@ -4316,6 +4335,10 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  -webkit-box-pack: left;
+  -webkit-justify-content: left;
+  -ms-flex-pack: left;
+  justify-content: left;
 }
 
 .c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1 tr:first-child th {
@@ -4362,23 +4385,6 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
   min-height: 60px;
 }
 
-.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3 > div > .text {
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3 > div > .sortIcon {
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-}
-
 .c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3:focus-visible {
   outline: 4px solid hsla(227,100%,59%,0.18);
   outline-offset: -4px;
@@ -4395,31 +4401,31 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
 }
 
 @media screen and (min-width:320px) {
-  .c9.c9.c9.c9.c9 {
+  .c10.c10.c10.c10.c10 {
     pointer-events: auto;
   }
 }
 
 @media screen and (min-width:480px) {
-  .c9.c9.c9.c9.c9 {
+  .c10.c10.c10.c10.c10 {
     pointer-events: auto;
   }
 }
 
 @media screen and (min-width:768px) {
-  .c9.c9.c9.c9.c9 {
+  .c10.c10.c10.c10.c10 {
     pointer-events: auto;
   }
 }
 
 @media screen and (min-width:1024px) {
-  .c9.c9.c9.c9.c9 {
+  .c10.c10.c10.c10.c10 {
     pointer-events: auto;
   }
 }
 
 @media screen and (min-width:1200px) {
-  .c9.c9.c9.c9.c9 {
+  .c10.c10.c10.c10.c10 {
     pointer-events: auto;
   }
 }
@@ -4459,10 +4465,11 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
           >
             <div>
               <div
-                class="text"
+                class="c4"
+                data-blade-component="base-box"
               >
                 <p
-                  class="c4"
+                  class="c5"
                   data-blade-component="text"
                 >
                   Payment ID
@@ -4481,10 +4488,11 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
           >
             <div>
               <div
-                class="text"
+                class="c4"
+                data-blade-component="base-box"
               >
                 <p
-                  class="c4"
+                  class="c5"
                   data-blade-component="text"
                 >
                   Amount
@@ -4503,10 +4511,11 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
           >
             <div>
               <div
-                class="text"
+                class="c4"
+                data-blade-component="base-box"
               >
                 <p
-                  class="c4"
+                  class="c5"
                   data-blade-component="text"
                 >
                   Status
@@ -4525,10 +4534,11 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
           >
             <div>
               <div
-                class="text"
+                class="c4"
+                data-blade-component="base-box"
               >
                 <p
-                  class="c4"
+                  class="c5"
                   data-blade-component="text"
                 >
                   Type
@@ -4547,10 +4557,11 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
           >
             <div>
               <div
-                class="text"
+                class="c4"
+                data-blade-component="base-box"
               >
                 <p
-                  class="c4"
+                  class="c5"
                   data-blade-component="text"
                 >
                   Method
@@ -4569,10 +4580,11 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
           >
             <div>
               <div
-                class="text"
+                class="c4"
+                data-blade-component="base-box"
               >
                 <p
-                  class="c4"
+                  class="c5"
                   data-blade-component="text"
                 >
                   Name
@@ -4583,19 +4595,19 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
         </tr>
       </thead>
       <tbody
-        class="c5 css-8eb0m3-Body"
+        class="c6 css-8eb0m3-Body"
         data-blade-component="table-body"
         data-table-library_body=""
       >
         <tr
           aria-selected="false"
-          class="tr tr-body c6 clickable css-1rzx1gz-getRowContainerStyle-Row"
+          class="tr tr-body c7 clickable css-1rzx1gz-getRowContainerStyle-Row"
           data-blade-component="table-row"
           data-table-library_tr-body=""
           role="row"
         >
           <td
-            class="td c7 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c8 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -4603,16 +4615,16 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c9 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c10 c11 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c11"
+                    class="c12"
                     data-blade-component="text"
                   >
                     rzp01
@@ -4622,7 +4634,7 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
             </div>
           </td>
           <td
-            class="td c7 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c8 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -4630,11 +4642,11 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c9 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c10 c11 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
@@ -4644,7 +4656,7 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
             </div>
           </td>
           <td
-            class="td c7 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c8 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -4652,16 +4664,16 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c9 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c10 c11 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c11"
+                    class="c12"
                     data-blade-component="text"
                   >
                     pending
@@ -4671,7 +4683,7 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
             </div>
           </td>
           <td
-            class="td c7 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c8 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -4679,16 +4691,16 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c9 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c10 c11 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c11"
+                    class="c12"
                     data-blade-component="text"
                   >
                     credit
@@ -4698,7 +4710,7 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
             </div>
           </td>
           <td
-            class="td c7 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c8 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -4706,16 +4718,16 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c9 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c10 c11 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c11"
+                    class="c12"
                     data-blade-component="text"
                   >
                     Netbanking
@@ -4725,7 +4737,7 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
             </div>
           </td>
           <td
-            class="td c7 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c8 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -4733,16 +4745,16 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c9 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c10 c11 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c11"
+                    class="c12"
                     data-blade-component="text"
                   >
                     John Doe
@@ -4754,13 +4766,13 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
         </tr>
         <tr
           aria-selected="false"
-          class="tr tr-body c6 clickable css-1rzx1gz-getRowContainerStyle-Row"
+          class="tr tr-body c7 clickable css-1rzx1gz-getRowContainerStyle-Row"
           data-blade-component="table-row"
           data-table-library_tr-body=""
           role="row"
         >
           <td
-            class="td c7 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c8 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -4768,16 +4780,16 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c9 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c10 c11 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c11"
+                    class="c12"
                     data-blade-component="text"
                   >
                     rzp02
@@ -4787,7 +4799,7 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
             </div>
           </td>
           <td
-            class="td c7 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c8 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -4795,11 +4807,11 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c9 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c10 c11 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
@@ -4809,7 +4821,7 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
             </div>
           </td>
           <td
-            class="td c7 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c8 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -4817,16 +4829,16 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c9 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c10 c11 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c11"
+                    class="c12"
                     data-blade-component="text"
                   >
                     pending
@@ -4836,7 +4848,7 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
             </div>
           </td>
           <td
-            class="td c7 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c8 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -4844,16 +4856,16 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c9 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c10 c11 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c11"
+                    class="c12"
                     data-blade-component="text"
                   >
                     credit
@@ -4863,7 +4875,7 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
             </div>
           </td>
           <td
-            class="td c7 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c8 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -4871,16 +4883,16 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c9 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c10 c11 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c11"
+                    class="c12"
                     data-blade-component="text"
                   >
                     UPI
@@ -4890,7 +4902,7 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
             </div>
           </td>
           <td
-            class="td c7 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c8 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -4898,16 +4910,16 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c9 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c10 c11 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c11"
+                    class="c12"
                     data-blade-component="text"
                   >
                     Jane Doe
@@ -4919,18 +4931,18 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
         </tr>
       </tbody>
       <tfoot
-        class="c12 css-1a28xfp-Header"
+        class="c13 css-1a28xfp-Header"
         data-blade-component="table-footer"
         role="rowgroup"
       >
         <tr
-          class="tr c13 tr-footer css-19bs4cg-getHeaderRowContainerStyle-HeaderRow"
+          class="tr c14 tr-footer css-19bs4cg-getHeaderRowContainerStyle-HeaderRow"
           data-blade-component="table-footer-row"
           data-table-library_tr-header=""
           role="rowfooter"
         >
           <th
-            class="th c14 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            class="th c15 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
             data-blade-component="table-footer-cell"
             data-hide="false"
             data-resize-min-width="75"
@@ -4939,7 +4951,7 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
           >
             <div>
               <p
-                class="c4"
+                class="c5"
                 data-blade-component="text"
               >
                 -
@@ -4947,7 +4959,7 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
             </div>
           </th>
           <th
-            class="th c14 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            class="th c15 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
             data-blade-component="table-footer-cell"
             data-hide="false"
             data-resize-min-width="75"
@@ -4956,7 +4968,7 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
           >
             <div>
               <p
-                class="c4"
+                class="c5"
                 data-blade-component="text"
               >
                 -
@@ -4964,7 +4976,7 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
             </div>
           </th>
           <th
-            class="th c14 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            class="th c15 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
             data-blade-component="table-footer-cell"
             data-hide="false"
             data-resize-min-width="75"
@@ -4973,7 +4985,7 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
           >
             <div>
               <p
-                class="c4"
+                class="c5"
                 data-blade-component="text"
               >
                 -
@@ -4981,7 +4993,7 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
             </div>
           </th>
           <th
-            class="th c14 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            class="th c15 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
             data-blade-component="table-footer-cell"
             data-hide="false"
             data-resize-min-width="75"
@@ -4990,7 +5002,7 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
           >
             <div>
               <p
-                class="c4"
+                class="c5"
                 data-blade-component="text"
               >
                 -
@@ -4998,7 +5010,7 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
             </div>
           </th>
           <th
-            class="th c14 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            class="th c15 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
             data-blade-component="table-footer-cell"
             data-hide="false"
             data-resize-min-width="75"
@@ -5007,7 +5019,7 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
           >
             <div>
               <p
-                class="c4"
+                class="c5"
                 data-blade-component="text"
               >
                 -
@@ -5015,7 +5027,7 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
             </div>
           </th>
           <th
-            class="th c14 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            class="th c15 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
             data-blade-component="table-footer-cell"
             data-hide="false"
             data-resize-min-width="75"
@@ -5024,7 +5036,7 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
           >
             <div>
               <p
-                class="c4"
+                class="c5"
                 data-blade-component="text"
               >
                 -
@@ -5046,7 +5058,18 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
   position: relative;
 }
 
-.c8.c8.c8.c8.c8 {
+.c4.c4.c4.c4.c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.c9.c9.c9.c9.c9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5058,7 +5081,7 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
   height: 100%;
 }
 
-.c9.c9.c9.c9.c9 {
+.c10.c10.c10.c10.c10 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5075,7 +5098,7 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
   pointer-events: auto;
 }
 
-.c4.c4.c4.c4.c4 {
+.c5.c5.c5.c5.c5 {
   color: hsla(212,39%,16%,1);
   font-family: "Inter","Inter Fallback Arial",Arial;
   font-size: 0.875rem;
@@ -5092,7 +5115,7 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
   padding: 0;
 }
 
-.c11.c11.c11.c11.c11 {
+.c12.c12.c12.c12.c12 {
   color: hsla(212,39%,16%,1);
   font-family: "Inter","Inter Fallback Arial",Arial;
   font-size: 0.875rem;
@@ -5115,111 +5138,111 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
   overflow-wrap: break-word;
 }
 
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 {
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 {
   border: none;
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 tr:last-child .cell-wrapper {
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 tr:last-child .cell-wrapper {
   border-bottom: none;
 }
 
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected .cell-wrapper-base,
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected .cell-wrapper-base {
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected .cell-wrapper-base,
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected .cell-wrapper-base {
   background-color: hsla(227,100%,59%,0.09);
 }
 
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base,
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base {
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base,
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base {
   background-color: hsla(227,100%,59%,0.18);
 }
 
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions,
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions {
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions,
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions {
   background-color: hsla(0,0%,100%,1);
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2,
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 {
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2,
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 {
   background-color: hsla(0,0%,100%,0);
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3,
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 {
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3,
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 {
   background-color: hsla(227,100%,59%,0.18);
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base,
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base {
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base,
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base {
   background-color: hsla(227,100%,59%,0.09);
 }
 
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions,
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions {
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions,
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions {
   background-color: hsla(0,0%,100%,1);
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2,
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 {
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2,
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 {
   background-color: hsla(0,0%,100%,0);
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3,
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 {
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3,
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 {
   background-color: hsla(227,100%,59%,0.09);
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base,
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base {
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base,
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base {
   background-color: hsla(227,100%,59%,0.18);
 }
 
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions,
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions {
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions,
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions {
   background-color: hsla(0,0%,100%,1);
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2,
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 {
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2,
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 {
   background-color: hsla(211,20%,52%,0.12);
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3,
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 {
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3,
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 {
   background-color: hsla(227,100%,59%,0.18);
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 {
+.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8 {
   height: 100%;
   background-color: hsla(0,0%,100%,1);
 }
 
-.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 > div:first-child {
+.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8 > div:first-child {
   -webkit-align-self: stretch;
   -ms-flex-item-align: stretch;
   align-self: stretch;
 }
 
-.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7:focus-visible {
+.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8:focus-visible {
   outline: 4px solid hsla(227,100%,59%,0.18);
   outline-offset: -4px;
   -webkit-transition-property: outline-width;
@@ -5230,7 +5253,7 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
   transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
-.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 {
+.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 {
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   background-color: transparent;
@@ -5244,15 +5267,15 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
   border-bottom-style: solid;
 }
 
-.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 {
+.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 {
   background-color: transparent;
 }
 
-.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 td:last-child .cell-wrapper {
+.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 td:last-child .cell-wrapper {
   border-right: none;
 }
 
-.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6:focus {
+.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7:focus {
   outline: 4px solid hsla(227,100%,59%,0.18);
   outline-offset: -4px;
   -webkit-transition-property: outline-width;
@@ -5263,19 +5286,19 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
   transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
-.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12 {
+.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13 {
   background-color: hsla(211,20%,52%,0.12);
 }
 
-.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12 tr:last-child th {
+.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13 tr:last-child th {
   border-bottom: none;
 }
 
-.c13.c13.c13.c13.c13 th:last-child {
+.c14.c14.c14.c14.c14 th:last-child {
   border-right: none;
 }
 
-.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14 {
+.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15 {
   height: 100%;
   background-color: hsla(0,0%,100%,1);
   border-bottom-width: 1px;
@@ -5286,7 +5309,7 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
   border-top-style: solid;
 }
 
-.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14 > div {
+.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15 > div {
   background-color: hsla(211,20%,52%,0.12);
   display: -webkit-box;
   display: -webkit-flex;
@@ -5303,6 +5326,10 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  -webkit-box-pack: left;
+  -webkit-justify-content: left;
+  -ms-flex-pack: left;
+  justify-content: left;
 }
 
 .c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1 tr:first-child th {
@@ -5349,23 +5376,6 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
   min-height: 36px;
 }
 
-.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3 > div > .text {
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3 > div > .sortIcon {
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-}
-
 .c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3:focus-visible {
   outline: 4px solid hsla(227,100%,59%,0.18);
   outline-offset: -4px;
@@ -5382,31 +5392,31 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
 }
 
 @media screen and (min-width:320px) {
-  .c9.c9.c9.c9.c9 {
+  .c10.c10.c10.c10.c10 {
     pointer-events: auto;
   }
 }
 
 @media screen and (min-width:480px) {
-  .c9.c9.c9.c9.c9 {
+  .c10.c10.c10.c10.c10 {
     pointer-events: auto;
   }
 }
 
 @media screen and (min-width:768px) {
-  .c9.c9.c9.c9.c9 {
+  .c10.c10.c10.c10.c10 {
     pointer-events: auto;
   }
 }
 
 @media screen and (min-width:1024px) {
-  .c9.c9.c9.c9.c9 {
+  .c10.c10.c10.c10.c10 {
     pointer-events: auto;
   }
 }
 
 @media screen and (min-width:1200px) {
-  .c9.c9.c9.c9.c9 {
+  .c10.c10.c10.c10.c10 {
     pointer-events: auto;
   }
 }
@@ -5446,10 +5456,11 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
           >
             <div>
               <div
-                class="text"
+                class="c4"
+                data-blade-component="base-box"
               >
                 <p
-                  class="c4"
+                  class="c5"
                   data-blade-component="text"
                 >
                   Payment ID
@@ -5468,10 +5479,11 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
           >
             <div>
               <div
-                class="text"
+                class="c4"
+                data-blade-component="base-box"
               >
                 <p
-                  class="c4"
+                  class="c5"
                   data-blade-component="text"
                 >
                   Amount
@@ -5490,10 +5502,11 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
           >
             <div>
               <div
-                class="text"
+                class="c4"
+                data-blade-component="base-box"
               >
                 <p
-                  class="c4"
+                  class="c5"
                   data-blade-component="text"
                 >
                   Status
@@ -5512,10 +5525,11 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
           >
             <div>
               <div
-                class="text"
+                class="c4"
+                data-blade-component="base-box"
               >
                 <p
-                  class="c4"
+                  class="c5"
                   data-blade-component="text"
                 >
                   Type
@@ -5534,10 +5548,11 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
           >
             <div>
               <div
-                class="text"
+                class="c4"
+                data-blade-component="base-box"
               >
                 <p
-                  class="c4"
+                  class="c5"
                   data-blade-component="text"
                 >
                   Method
@@ -5556,10 +5571,11 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
           >
             <div>
               <div
-                class="text"
+                class="c4"
+                data-blade-component="base-box"
               >
                 <p
-                  class="c4"
+                  class="c5"
                   data-blade-component="text"
                 >
                   Name
@@ -5570,19 +5586,19 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
         </tr>
       </thead>
       <tbody
-        class="c5 css-8eb0m3-Body"
+        class="c6 css-8eb0m3-Body"
         data-blade-component="table-body"
         data-table-library_body=""
       >
         <tr
           aria-selected="false"
-          class="tr tr-body c6 clickable css-1rzx1gz-getRowContainerStyle-Row"
+          class="tr tr-body c7 clickable css-1rzx1gz-getRowContainerStyle-Row"
           data-blade-component="table-row"
           data-table-library_tr-body=""
           role="row"
         >
           <td
-            class="td c7 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c8 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -5590,16 +5606,16 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c9 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c10 c11 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c11"
+                    class="c12"
                     data-blade-component="text"
                   >
                     rzp01
@@ -5609,7 +5625,7 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
             </div>
           </td>
           <td
-            class="td c7 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c8 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -5617,11 +5633,11 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c9 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c10 c11 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
@@ -5631,7 +5647,7 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
             </div>
           </td>
           <td
-            class="td c7 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c8 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -5639,16 +5655,16 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c9 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c10 c11 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c11"
+                    class="c12"
                     data-blade-component="text"
                   >
                     pending
@@ -5658,7 +5674,7 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
             </div>
           </td>
           <td
-            class="td c7 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c8 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -5666,16 +5682,16 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c9 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c10 c11 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c11"
+                    class="c12"
                     data-blade-component="text"
                   >
                     credit
@@ -5685,7 +5701,7 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
             </div>
           </td>
           <td
-            class="td c7 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c8 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -5693,16 +5709,16 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c9 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c10 c11 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c11"
+                    class="c12"
                     data-blade-component="text"
                   >
                     Netbanking
@@ -5712,7 +5728,7 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
             </div>
           </td>
           <td
-            class="td c7 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c8 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -5720,16 +5736,16 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c9 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c10 c11 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c11"
+                    class="c12"
                     data-blade-component="text"
                   >
                     John Doe
@@ -5741,13 +5757,13 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
         </tr>
         <tr
           aria-selected="false"
-          class="tr tr-body c6 clickable css-1rzx1gz-getRowContainerStyle-Row"
+          class="tr tr-body c7 clickable css-1rzx1gz-getRowContainerStyle-Row"
           data-blade-component="table-row"
           data-table-library_tr-body=""
           role="row"
         >
           <td
-            class="td c7 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c8 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -5755,16 +5771,16 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c9 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c10 c11 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c11"
+                    class="c12"
                     data-blade-component="text"
                   >
                     rzp02
@@ -5774,7 +5790,7 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
             </div>
           </td>
           <td
-            class="td c7 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c8 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -5782,11 +5798,11 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c9 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c10 c11 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
@@ -5796,7 +5812,7 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
             </div>
           </td>
           <td
-            class="td c7 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c8 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -5804,16 +5820,16 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c9 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c10 c11 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c11"
+                    class="c12"
                     data-blade-component="text"
                   >
                     pending
@@ -5823,7 +5839,7 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
             </div>
           </td>
           <td
-            class="td c7 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c8 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -5831,16 +5847,16 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c9 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c10 c11 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c11"
+                    class="c12"
                     data-blade-component="text"
                   >
                     credit
@@ -5850,7 +5866,7 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
             </div>
           </td>
           <td
-            class="td c7 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c8 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -5858,16 +5874,16 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c9 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c10 c11 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c11"
+                    class="c12"
                     data-blade-component="text"
                   >
                     UPI
@@ -5877,7 +5893,7 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
             </div>
           </td>
           <td
-            class="td c7 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c8 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -5885,16 +5901,16 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c9 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c10 c11 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c11"
+                    class="c12"
                     data-blade-component="text"
                   >
                     Jane Doe
@@ -5906,18 +5922,18 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
         </tr>
       </tbody>
       <tfoot
-        class="c12 css-1a28xfp-Header"
+        class="c13 css-1a28xfp-Header"
         data-blade-component="table-footer"
         role="rowgroup"
       >
         <tr
-          class="tr c13 tr-footer css-19bs4cg-getHeaderRowContainerStyle-HeaderRow"
+          class="tr c14 tr-footer css-19bs4cg-getHeaderRowContainerStyle-HeaderRow"
           data-blade-component="table-footer-row"
           data-table-library_tr-header=""
           role="rowfooter"
         >
           <th
-            class="th c14 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            class="th c15 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
             data-blade-component="table-footer-cell"
             data-hide="false"
             data-resize-min-width="75"
@@ -5926,7 +5942,7 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
           >
             <div>
               <p
-                class="c4"
+                class="c5"
                 data-blade-component="text"
               >
                 -
@@ -5934,7 +5950,7 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
             </div>
           </th>
           <th
-            class="th c14 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            class="th c15 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
             data-blade-component="table-footer-cell"
             data-hide="false"
             data-resize-min-width="75"
@@ -5943,7 +5959,7 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
           >
             <div>
               <p
-                class="c4"
+                class="c5"
                 data-blade-component="text"
               >
                 -
@@ -5951,7 +5967,7 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
             </div>
           </th>
           <th
-            class="th c14 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            class="th c15 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
             data-blade-component="table-footer-cell"
             data-hide="false"
             data-resize-min-width="75"
@@ -5960,7 +5976,7 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
           >
             <div>
               <p
-                class="c4"
+                class="c5"
                 data-blade-component="text"
               >
                 -
@@ -5968,7 +5984,7 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
             </div>
           </th>
           <th
-            class="th c14 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            class="th c15 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
             data-blade-component="table-footer-cell"
             data-hide="false"
             data-resize-min-width="75"
@@ -5977,7 +5993,7 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
           >
             <div>
               <p
-                class="c4"
+                class="c5"
                 data-blade-component="text"
               >
                 -
@@ -5985,7 +6001,7 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
             </div>
           </th>
           <th
-            class="th c14 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            class="th c15 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
             data-blade-component="table-footer-cell"
             data-hide="false"
             data-resize-min-width="75"
@@ -5994,7 +6010,7 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
           >
             <div>
               <p
-                class="c4"
+                class="c5"
                 data-blade-component="text"
               >
                 -
@@ -6002,7 +6018,7 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
             </div>
           </th>
           <th
-            class="th c14 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            class="th c15 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
             data-blade-component="table-footer-cell"
             data-hide="false"
             data-resize-min-width="75"
@@ -6011,7 +6027,7 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
           >
             <div>
               <p
-                class="c4"
+                class="c5"
                 data-blade-component="text"
               >
                 -
@@ -6166,7 +6182,18 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
   align-items: center;
 }
 
-.c12.c12.c12.c12.c12 {
+.c8.c8.c8.c8.c8 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.c13.c13.c13.c13.c13 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6178,7 +6205,7 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
   height: 100%;
 }
 
-.c13.c13.c13.c13.c13 {
+.c14.c14.c14.c14.c14 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6208,7 +6235,7 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
   animation: eoUyJr-450290765 960ms cubic-bezier(0.5,0,0.3,1.5) infinite;
 }
 
-.c8.c8.c8.c8.c8 {
+.c9.c9.c9.c9.c9 {
   color: hsla(212,39%,16%,1);
   font-family: "Inter","Inter Fallback Arial",Arial;
   font-size: 0.875rem;
@@ -6225,7 +6252,7 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
   padding: 0;
 }
 
-.c15.c15.c15.c15.c15 {
+.c16.c16.c16.c16.c16 {
   color: hsla(212,39%,16%,1);
   font-family: "Inter","Inter Fallback Arial",Arial;
   font-size: 0.875rem;
@@ -6254,111 +6281,111 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
   transition: opacity 200ms;
 }
 
-.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 {
+.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 {
   border: none;
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 tr:last-child .cell-wrapper {
+.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 tr:last-child .cell-wrapper {
   border-bottom: none;
 }
 
-.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-single-selected .cell-wrapper-base,
-.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-selected .cell-wrapper-base {
+.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-single-selected .cell-wrapper-base,
+.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-selected .cell-wrapper-base {
   background-color: hsla(227,100%,59%,0.09);
 }
 
-.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base,
-.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base {
+.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base,
+.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base {
   background-color: hsla(227,100%,59%,0.18);
 }
 
-.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions,
-.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions {
+.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions,
+.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions {
   background-color: hsla(0,0%,100%,1);
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2,
-.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 {
+.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2,
+.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 {
   background-color: hsla(0,0%,100%,0);
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3,
-.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 {
+.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3,
+.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 {
   background-color: hsla(227,100%,59%,0.18);
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base,
-.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base {
+.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base,
+.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base {
   background-color: hsla(227,100%,59%,0.09);
 }
 
-.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions,
-.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions {
+.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions,
+.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions {
   background-color: hsla(0,0%,100%,1);
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2,
-.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 {
+.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2,
+.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 {
   background-color: hsla(0,0%,100%,0);
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3,
-.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 {
+.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3,
+.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 {
   background-color: hsla(227,100%,59%,0.09);
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base,
-.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base {
+.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base,
+.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base {
   background-color: hsla(227,100%,59%,0.18);
 }
 
-.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions,
-.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions {
+.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions,
+.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions {
   background-color: hsla(0,0%,100%,1);
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2,
-.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 {
+.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2,
+.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 {
   background-color: hsla(211,20%,52%,0.12);
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3,
-.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 {
+.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3,
+.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 {
   background-color: hsla(227,100%,59%,0.18);
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 {
+.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12 {
   height: 100%;
   background-color: hsla(0,0%,100%,1);
 }
 
-.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 > div:first-child {
+.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12 > div:first-child {
   -webkit-align-self: stretch;
   -ms-flex-item-align: stretch;
   align-self: stretch;
 }
 
-.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11:focus-visible {
+.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12:focus-visible {
   outline: 4px solid hsla(227,100%,59%,0.18);
   outline-offset: -4px;
   -webkit-transition-property: outline-width;
@@ -6369,7 +6396,7 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
   transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
-.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14 {
+.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15 {
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   background-color: transparent;
@@ -6383,15 +6410,15 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
   border-bottom-style: solid;
 }
 
-.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 {
+.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 {
   background-color: transparent;
 }
 
-.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 td:last-child .cell-wrapper {
+.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 td:last-child .cell-wrapper {
   border-right: none;
 }
 
-.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10:focus {
+.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11:focus {
   outline: 4px solid hsla(227,100%,59%,0.18);
   outline-offset: -4px;
   -webkit-transition-property: outline-width;
@@ -6402,19 +6429,19 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
   transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
-.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16 {
+.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17 {
   background-color: hsla(211,20%,52%,0.12);
 }
 
-.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16 tr:last-child th {
+.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17 tr:last-child th {
   border-bottom: none;
 }
 
-.c17.c17.c17.c17.c17 th:last-child {
+.c18.c18.c18.c18.c18 th:last-child {
   border-right: none;
 }
 
-.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18 {
+.c19.c19.c19.c19.c19.c19.c19.c19.c19.c19.c19.c19.c19.c19.c19 {
   height: 100%;
   background-color: hsla(0,0%,100%,1);
   border-bottom-width: 1px;
@@ -6425,7 +6452,7 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
   border-top-style: solid;
 }
 
-.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18.c18 > div {
+.c19.c19.c19.c19.c19.c19.c19.c19.c19.c19.c19.c19.c19.c19.c19 > div {
   background-color: hsla(211,20%,52%,0.12);
   display: -webkit-box;
   display: -webkit-flex;
@@ -6442,6 +6469,10 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  -webkit-box-pack: left;
+  -webkit-justify-content: left;
+  -ms-flex-pack: left;
+  justify-content: left;
 }
 
 .c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 tr:first-child th {
@@ -6488,23 +6519,6 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
   min-height: 48px;
 }
 
-.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 > div > .text {
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 > div > .sortIcon {
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-}
-
 .c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7:focus-visible {
   outline: 4px solid hsla(227,100%,59%,0.18);
   outline-offset: -4px;
@@ -6521,31 +6535,31 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
 }
 
 @media screen and (min-width:320px) {
-  .c13.c13.c13.c13.c13 {
+  .c14.c14.c14.c14.c14 {
     pointer-events: auto;
   }
 }
 
 @media screen and (min-width:480px) {
-  .c13.c13.c13.c13.c13 {
+  .c14.c14.c14.c14.c14 {
     pointer-events: auto;
   }
 }
 
 @media screen and (min-width:768px) {
-  .c13.c13.c13.c13.c13 {
+  .c14.c14.c14.c14.c14 {
     pointer-events: auto;
   }
 }
 
 @media screen and (min-width:1024px) {
-  .c13.c13.c13.c13.c13 {
+  .c14.c14.c14.c14.c14 {
     pointer-events: auto;
   }
 }
 
 @media screen and (min-width:1200px) {
-  .c13.c13.c13.c13.c13 {
+  .c14.c14.c14.c14.c14 {
     pointer-events: auto;
   }
 }
@@ -6633,10 +6647,11 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
           >
             <div>
               <div
-                class="text"
+                class="c8"
+                data-blade-component="base-box"
               >
                 <p
-                  class="c8"
+                  class="c9"
                   data-blade-component="text"
                 >
                   Payment ID
@@ -6655,10 +6670,11 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
           >
             <div>
               <div
-                class="text"
+                class="c8"
+                data-blade-component="base-box"
               >
                 <p
-                  class="c8"
+                  class="c9"
                   data-blade-component="text"
                 >
                   Amount
@@ -6677,10 +6693,11 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
           >
             <div>
               <div
-                class="text"
+                class="c8"
+                data-blade-component="base-box"
               >
                 <p
-                  class="c8"
+                  class="c9"
                   data-blade-component="text"
                 >
                   Status
@@ -6699,10 +6716,11 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
           >
             <div>
               <div
-                class="text"
+                class="c8"
+                data-blade-component="base-box"
               >
                 <p
-                  class="c8"
+                  class="c9"
                   data-blade-component="text"
                 >
                   Type
@@ -6721,10 +6739,11 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
           >
             <div>
               <div
-                class="text"
+                class="c8"
+                data-blade-component="base-box"
               >
                 <p
-                  class="c8"
+                  class="c9"
                   data-blade-component="text"
                 >
                   Method
@@ -6743,10 +6762,11 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
           >
             <div>
               <div
-                class="text"
+                class="c8"
+                data-blade-component="base-box"
               >
                 <p
-                  class="c8"
+                  class="c9"
                   data-blade-component="text"
                 >
                   Name
@@ -6757,19 +6777,19 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
         </tr>
       </thead>
       <tbody
-        class="c9 css-8eb0m3-Body"
+        class="c10 css-8eb0m3-Body"
         data-blade-component="table-body"
         data-table-library_body=""
       >
         <tr
           aria-selected="false"
-          class="tr tr-body c10 clickable css-1rzx1gz-getRowContainerStyle-Row"
+          class="tr tr-body c11 clickable css-1rzx1gz-getRowContainerStyle-Row"
           data-blade-component="table-row"
           data-table-library_tr-body=""
           role="row"
         >
           <td
-            class="td c11 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c12 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -6777,16 +6797,16 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
           >
             <div>
               <div
-                class="c12 cell-wrapper-base"
+                class="c13 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c13 c14 cell-wrapper"
+                  class="c14 c15 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c15"
+                    class="c16"
                     data-blade-component="text"
                   >
                     rzp01
@@ -6796,7 +6816,7 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
             </div>
           </td>
           <td
-            class="td c11 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c12 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -6804,11 +6824,11 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
           >
             <div>
               <div
-                class="c12 cell-wrapper-base"
+                class="c13 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c13 c14 cell-wrapper"
+                  class="c14 c15 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
@@ -6818,7 +6838,7 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
             </div>
           </td>
           <td
-            class="td c11 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c12 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -6826,16 +6846,16 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
           >
             <div>
               <div
-                class="c12 cell-wrapper-base"
+                class="c13 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c13 c14 cell-wrapper"
+                  class="c14 c15 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c15"
+                    class="c16"
                     data-blade-component="text"
                   >
                     pending
@@ -6845,7 +6865,7 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
             </div>
           </td>
           <td
-            class="td c11 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c12 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -6853,16 +6873,16 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
           >
             <div>
               <div
-                class="c12 cell-wrapper-base"
+                class="c13 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c13 c14 cell-wrapper"
+                  class="c14 c15 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c15"
+                    class="c16"
                     data-blade-component="text"
                   >
                     credit
@@ -6872,7 +6892,7 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
             </div>
           </td>
           <td
-            class="td c11 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c12 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -6880,16 +6900,16 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
           >
             <div>
               <div
-                class="c12 cell-wrapper-base"
+                class="c13 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c13 c14 cell-wrapper"
+                  class="c14 c15 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c15"
+                    class="c16"
                     data-blade-component="text"
                   >
                     Netbanking
@@ -6899,7 +6919,7 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
             </div>
           </td>
           <td
-            class="td c11 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c12 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -6907,16 +6927,16 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
           >
             <div>
               <div
-                class="c12 cell-wrapper-base"
+                class="c13 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c13 c14 cell-wrapper"
+                  class="c14 c15 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c15"
+                    class="c16"
                     data-blade-component="text"
                   >
                     John Doe
@@ -6928,13 +6948,13 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
         </tr>
         <tr
           aria-selected="false"
-          class="tr tr-body c10 clickable css-1rzx1gz-getRowContainerStyle-Row"
+          class="tr tr-body c11 clickable css-1rzx1gz-getRowContainerStyle-Row"
           data-blade-component="table-row"
           data-table-library_tr-body=""
           role="row"
         >
           <td
-            class="td c11 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c12 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -6942,16 +6962,16 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
           >
             <div>
               <div
-                class="c12 cell-wrapper-base"
+                class="c13 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c13 c14 cell-wrapper"
+                  class="c14 c15 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c15"
+                    class="c16"
                     data-blade-component="text"
                   >
                     rzp02
@@ -6961,7 +6981,7 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
             </div>
           </td>
           <td
-            class="td c11 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c12 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -6969,11 +6989,11 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
           >
             <div>
               <div
-                class="c12 cell-wrapper-base"
+                class="c13 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c13 c14 cell-wrapper"
+                  class="c14 c15 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
@@ -6983,7 +7003,7 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
             </div>
           </td>
           <td
-            class="td c11 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c12 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -6991,16 +7011,16 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
           >
             <div>
               <div
-                class="c12 cell-wrapper-base"
+                class="c13 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c13 c14 cell-wrapper"
+                  class="c14 c15 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c15"
+                    class="c16"
                     data-blade-component="text"
                   >
                     pending
@@ -7010,7 +7030,7 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
             </div>
           </td>
           <td
-            class="td c11 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c12 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -7018,16 +7038,16 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
           >
             <div>
               <div
-                class="c12 cell-wrapper-base"
+                class="c13 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c13 c14 cell-wrapper"
+                  class="c14 c15 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c15"
+                    class="c16"
                     data-blade-component="text"
                   >
                     credit
@@ -7037,7 +7057,7 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
             </div>
           </td>
           <td
-            class="td c11 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c12 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -7045,16 +7065,16 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
           >
             <div>
               <div
-                class="c12 cell-wrapper-base"
+                class="c13 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c13 c14 cell-wrapper"
+                  class="c14 c15 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c15"
+                    class="c16"
                     data-blade-component="text"
                   >
                     UPI
@@ -7064,7 +7084,7 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
             </div>
           </td>
           <td
-            class="td c11 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c12 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -7072,16 +7092,16 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
           >
             <div>
               <div
-                class="c12 cell-wrapper-base"
+                class="c13 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c13 c14 cell-wrapper"
+                  class="c14 c15 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c15"
+                    class="c16"
                     data-blade-component="text"
                   >
                     Jane Doe
@@ -7093,18 +7113,18 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
         </tr>
       </tbody>
       <tfoot
-        class="c16 css-1a28xfp-Header"
+        class="c17 css-1a28xfp-Header"
         data-blade-component="table-footer"
         role="rowgroup"
       >
         <tr
-          class="tr c17 tr-footer css-19bs4cg-getHeaderRowContainerStyle-HeaderRow"
+          class="tr c18 tr-footer css-19bs4cg-getHeaderRowContainerStyle-HeaderRow"
           data-blade-component="table-footer-row"
           data-table-library_tr-header=""
           role="rowfooter"
         >
           <th
-            class="th c18 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            class="th c19 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
             data-blade-component="table-footer-cell"
             data-hide="false"
             data-resize-min-width="75"
@@ -7113,7 +7133,7 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
           >
             <div>
               <p
-                class="c8"
+                class="c9"
                 data-blade-component="text"
               >
                 -
@@ -7121,7 +7141,7 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
             </div>
           </th>
           <th
-            class="th c18 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            class="th c19 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
             data-blade-component="table-footer-cell"
             data-hide="false"
             data-resize-min-width="75"
@@ -7130,7 +7150,7 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
           >
             <div>
               <p
-                class="c8"
+                class="c9"
                 data-blade-component="text"
               >
                 -
@@ -7138,7 +7158,7 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
             </div>
           </th>
           <th
-            class="th c18 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            class="th c19 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
             data-blade-component="table-footer-cell"
             data-hide="false"
             data-resize-min-width="75"
@@ -7147,7 +7167,7 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
           >
             <div>
               <p
-                class="c8"
+                class="c9"
                 data-blade-component="text"
               >
                 -
@@ -7155,7 +7175,7 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
             </div>
           </th>
           <th
-            class="th c18 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            class="th c19 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
             data-blade-component="table-footer-cell"
             data-hide="false"
             data-resize-min-width="75"
@@ -7164,7 +7184,7 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
           >
             <div>
               <p
-                class="c8"
+                class="c9"
                 data-blade-component="text"
               >
                 -
@@ -7172,7 +7192,7 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
             </div>
           </th>
           <th
-            class="th c18 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            class="th c19 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
             data-blade-component="table-footer-cell"
             data-hide="false"
             data-resize-min-width="75"
@@ -7181,7 +7201,7 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
           >
             <div>
               <p
-                class="c8"
+                class="c9"
                 data-blade-component="text"
               >
                 -
@@ -7189,7 +7209,7 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
             </div>
           </th>
           <th
-            class="th c18 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            class="th c19 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
             data-blade-component="table-footer-cell"
             data-hide="false"
             data-resize-min-width="75"
@@ -7198,7 +7218,7 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
           >
             <div>
               <p
-                class="c8"
+                class="c9"
                 data-blade-component="text"
               >
                 -
@@ -7220,7 +7240,18 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
   position: relative;
 }
 
-.c8.c8.c8.c8.c8 {
+.c4.c4.c4.c4.c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.c9.c9.c9.c9.c9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -7232,7 +7263,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
   height: 100%;
 }
 
-.c9.c9.c9.c9.c9 {
+.c10.c10.c10.c10.c10 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -7249,7 +7280,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
   pointer-events: auto;
 }
 
-.c4.c4.c4.c4.c4 {
+.c5.c5.c5.c5.c5 {
   color: hsla(212,39%,16%,1);
   font-family: "Inter","Inter Fallback Arial",Arial;
   font-size: 0.875rem;
@@ -7266,7 +7297,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
   padding: 0;
 }
 
-.c11.c11.c11.c11.c11 {
+.c12.c12.c12.c12.c12 {
   color: hsla(212,39%,16%,1);
   font-family: "Inter","Inter Fallback Arial",Arial;
   font-size: 0.875rem;
@@ -7289,119 +7320,119 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
   overflow-wrap: break-word;
 }
 
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 {
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 {
   border: none;
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 tr:last-child .cell-wrapper {
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 tr:last-child .cell-wrapper {
   border-bottom: none;
 }
 
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected .cell-wrapper-base,
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected .cell-wrapper-base {
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected .cell-wrapper-base,
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected .cell-wrapper-base {
   background-color: hsla(227,100%,59%,0.09);
 }
 
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base,
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base {
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base,
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base {
   background-color: hsla(227,100%,59%,0.18);
 }
 
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions,
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions {
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions,
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions {
   background-color: hsla(0,0%,100%,1);
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2,
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 {
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2,
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 {
   background-color: hsla(0,0%,100%,0);
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3,
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 {
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3,
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 {
   background-color: hsla(227,100%,59%,0.18);
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base,
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base {
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base,
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base {
   background-color: hsla(227,100%,59%,0.09);
 }
 
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions,
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions {
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions,
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions {
   background-color: hsla(0,0%,100%,1);
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2,
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 {
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2,
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 {
   background-color: hsla(0,0%,100%,0);
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3,
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 {
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3,
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 {
   background-color: hsla(227,100%,59%,0.09);
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base,
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base {
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base,
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base {
   background-color: hsla(227,100%,59%,0.18);
 }
 
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions,
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions {
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions,
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions {
   background-color: hsla(0,0%,100%,1);
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2,
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 {
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2,
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 {
   background-color: hsla(211,20%,52%,0.12);
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3,
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 {
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3,
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 {
   background-color: hsla(227,100%,59%,0.18);
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 tr:nth-child(even) .cell-wrapper {
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 tr:nth-child(even) .cell-wrapper {
   background-color: hsla(211,20%,52%,0.12);
 }
 
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 tr:nth-child(even) .cell-wrapper-base {
+.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 tr:nth-child(even) .cell-wrapper-base {
   background-color: transparent;
 }
 
-.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 {
+.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8 {
   height: 100%;
   background-color: hsla(0,0%,100%,1);
 }
 
-.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 > div:first-child {
+.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8 > div:first-child {
   -webkit-align-self: stretch;
   -ms-flex-item-align: stretch;
   align-self: stretch;
 }
 
-.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7:focus-visible {
+.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8:focus-visible {
   outline: 4px solid hsla(227,100%,59%,0.18);
   outline-offset: -4px;
   -webkit-transition-property: outline-width;
@@ -7412,7 +7443,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
   transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
-.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 {
+.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 {
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   background-color: transparent;
@@ -7423,15 +7454,15 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
   width: 100%;
 }
 
-.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 {
+.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 {
   background-color: transparent;
 }
 
-.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 td:last-child .cell-wrapper {
+.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 td:last-child .cell-wrapper {
   border-right: none;
 }
 
-.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6:focus {
+.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7:focus {
   outline: 4px solid hsla(227,100%,59%,0.18);
   outline-offset: -4px;
   -webkit-transition-property: outline-width;
@@ -7442,19 +7473,19 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
   transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
-.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12 {
+.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13 {
   background-color: hsla(211,20%,52%,0.12);
 }
 
-.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12 tr:last-child th {
+.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13 tr:last-child th {
   border-bottom: none;
 }
 
-.c13.c13.c13.c13.c13 th:last-child {
+.c14.c14.c14.c14.c14 th:last-child {
   border-right: none;
 }
 
-.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14 {
+.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15 {
   height: 100%;
   background-color: hsla(0,0%,100%,1);
   border-bottom-width: 1px;
@@ -7465,7 +7496,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
   border-top-style: solid;
 }
 
-.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14 > div {
+.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15 > div {
   background-color: hsla(211,20%,52%,0.12);
   display: -webkit-box;
   display: -webkit-flex;
@@ -7482,6 +7513,10 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  -webkit-box-pack: left;
+  -webkit-justify-content: left;
+  -ms-flex-pack: left;
+  justify-content: left;
 }
 
 .c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1 tr:first-child th {
@@ -7528,23 +7563,6 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
   min-height: 48px;
 }
 
-.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3 > div > .text {
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3 > div > .sortIcon {
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-}
-
 .c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3:focus-visible {
   outline: 4px solid hsla(227,100%,59%,0.18);
   outline-offset: -4px;
@@ -7561,31 +7579,31 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
 }
 
 @media screen and (min-width:320px) {
-  .c9.c9.c9.c9.c9 {
+  .c10.c10.c10.c10.c10 {
     pointer-events: auto;
   }
 }
 
 @media screen and (min-width:480px) {
-  .c9.c9.c9.c9.c9 {
+  .c10.c10.c10.c10.c10 {
     pointer-events: auto;
   }
 }
 
 @media screen and (min-width:768px) {
-  .c9.c9.c9.c9.c9 {
+  .c10.c10.c10.c10.c10 {
     pointer-events: auto;
   }
 }
 
 @media screen and (min-width:1024px) {
-  .c9.c9.c9.c9.c9 {
+  .c10.c10.c10.c10.c10 {
     pointer-events: auto;
   }
 }
 
 @media screen and (min-width:1200px) {
-  .c9.c9.c9.c9.c9 {
+  .c10.c10.c10.c10.c10 {
     pointer-events: auto;
   }
 }
@@ -7625,10 +7643,11 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
           >
             <div>
               <div
-                class="text"
+                class="c4"
+                data-blade-component="base-box"
               >
                 <p
-                  class="c4"
+                  class="c5"
                   data-blade-component="text"
                 >
                   Payment ID
@@ -7647,10 +7666,11 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
           >
             <div>
               <div
-                class="text"
+                class="c4"
+                data-blade-component="base-box"
               >
                 <p
-                  class="c4"
+                  class="c5"
                   data-blade-component="text"
                 >
                   Amount
@@ -7669,10 +7689,11 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
           >
             <div>
               <div
-                class="text"
+                class="c4"
+                data-blade-component="base-box"
               >
                 <p
-                  class="c4"
+                  class="c5"
                   data-blade-component="text"
                 >
                   Status
@@ -7691,10 +7712,11 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
           >
             <div>
               <div
-                class="text"
+                class="c4"
+                data-blade-component="base-box"
               >
                 <p
-                  class="c4"
+                  class="c5"
                   data-blade-component="text"
                 >
                   Type
@@ -7713,10 +7735,11 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
           >
             <div>
               <div
-                class="text"
+                class="c4"
+                data-blade-component="base-box"
               >
                 <p
-                  class="c4"
+                  class="c5"
                   data-blade-component="text"
                 >
                   Method
@@ -7735,10 +7758,11 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
           >
             <div>
               <div
-                class="text"
+                class="c4"
+                data-blade-component="base-box"
               >
                 <p
-                  class="c4"
+                  class="c5"
                   data-blade-component="text"
                 >
                   Name
@@ -7749,19 +7773,19 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
         </tr>
       </thead>
       <tbody
-        class="c5 css-8eb0m3-Body"
+        class="c6 css-8eb0m3-Body"
         data-blade-component="table-body"
         data-table-library_body=""
       >
         <tr
           aria-selected="false"
-          class="tr tr-body c6 clickable css-1rzx1gz-getRowContainerStyle-Row"
+          class="tr tr-body c7 clickable css-1rzx1gz-getRowContainerStyle-Row"
           data-blade-component="table-row"
           data-table-library_tr-body=""
           role="row"
         >
           <td
-            class="td c7 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c8 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -7769,16 +7793,16 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c9 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c10 c11 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c11"
+                    class="c12"
                     data-blade-component="text"
                   >
                     rzp01
@@ -7788,7 +7812,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
             </div>
           </td>
           <td
-            class="td c7 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c8 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -7796,11 +7820,11 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c9 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c10 c11 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
@@ -7810,7 +7834,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
             </div>
           </td>
           <td
-            class="td c7 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c8 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -7818,16 +7842,16 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c9 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c10 c11 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c11"
+                    class="c12"
                     data-blade-component="text"
                   >
                     pending
@@ -7837,7 +7861,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
             </div>
           </td>
           <td
-            class="td c7 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c8 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -7845,16 +7869,16 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c9 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c10 c11 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c11"
+                    class="c12"
                     data-blade-component="text"
                   >
                     credit
@@ -7864,7 +7888,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
             </div>
           </td>
           <td
-            class="td c7 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c8 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -7872,16 +7896,16 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c9 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c10 c11 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c11"
+                    class="c12"
                     data-blade-component="text"
                   >
                     Netbanking
@@ -7891,7 +7915,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
             </div>
           </td>
           <td
-            class="td c7 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c8 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -7899,16 +7923,16 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c9 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c10 c11 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c11"
+                    class="c12"
                     data-blade-component="text"
                   >
                     John Doe
@@ -7920,13 +7944,13 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
         </tr>
         <tr
           aria-selected="false"
-          class="tr tr-body c6 clickable css-1rzx1gz-getRowContainerStyle-Row"
+          class="tr tr-body c7 clickable css-1rzx1gz-getRowContainerStyle-Row"
           data-blade-component="table-row"
           data-table-library_tr-body=""
           role="row"
         >
           <td
-            class="td c7 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c8 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -7934,16 +7958,16 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c9 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c10 c11 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c11"
+                    class="c12"
                     data-blade-component="text"
                   >
                     rzp02
@@ -7953,7 +7977,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
             </div>
           </td>
           <td
-            class="td c7 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c8 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -7961,11 +7985,11 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c9 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c10 c11 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
@@ -7975,7 +7999,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
             </div>
           </td>
           <td
-            class="td c7 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c8 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -7983,16 +8007,16 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c9 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c10 c11 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c11"
+                    class="c12"
                     data-blade-component="text"
                   >
                     pending
@@ -8002,7 +8026,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
             </div>
           </td>
           <td
-            class="td c7 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c8 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -8010,16 +8034,16 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c9 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c10 c11 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c11"
+                    class="c12"
                     data-blade-component="text"
                   >
                     credit
@@ -8029,7 +8053,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
             </div>
           </td>
           <td
-            class="td c7 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c8 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -8037,16 +8061,16 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c9 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c10 c11 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c11"
+                    class="c12"
                     data-blade-component="text"
                   >
                     UPI
@@ -8056,7 +8080,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
             </div>
           </td>
           <td
-            class="td c7 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c8 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -8064,16 +8088,16 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c9 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c10 c11 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c11"
+                    class="c12"
                     data-blade-component="text"
                   >
                     Jane Doe
@@ -8085,18 +8109,18 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
         </tr>
       </tbody>
       <tfoot
-        class="c12 css-1a28xfp-Header"
+        class="c13 css-1a28xfp-Header"
         data-blade-component="table-footer"
         role="rowgroup"
       >
         <tr
-          class="tr c13 tr-footer css-19bs4cg-getHeaderRowContainerStyle-HeaderRow"
+          class="tr c14 tr-footer css-19bs4cg-getHeaderRowContainerStyle-HeaderRow"
           data-blade-component="table-footer-row"
           data-table-library_tr-header=""
           role="rowfooter"
         >
           <th
-            class="th c14 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            class="th c15 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
             data-blade-component="table-footer-cell"
             data-hide="false"
             data-resize-min-width="75"
@@ -8105,7 +8129,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
           >
             <div>
               <p
-                class="c4"
+                class="c5"
                 data-blade-component="text"
               >
                 -
@@ -8113,7 +8137,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
             </div>
           </th>
           <th
-            class="th c14 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            class="th c15 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
             data-blade-component="table-footer-cell"
             data-hide="false"
             data-resize-min-width="75"
@@ -8122,7 +8146,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
           >
             <div>
               <p
-                class="c4"
+                class="c5"
                 data-blade-component="text"
               >
                 -
@@ -8130,7 +8154,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
             </div>
           </th>
           <th
-            class="th c14 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            class="th c15 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
             data-blade-component="table-footer-cell"
             data-hide="false"
             data-resize-min-width="75"
@@ -8139,7 +8163,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
           >
             <div>
               <p
-                class="c4"
+                class="c5"
                 data-blade-component="text"
               >
                 -
@@ -8147,7 +8171,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
             </div>
           </th>
           <th
-            class="th c14 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            class="th c15 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
             data-blade-component="table-footer-cell"
             data-hide="false"
             data-resize-min-width="75"
@@ -8156,7 +8180,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
           >
             <div>
               <p
-                class="c4"
+                class="c5"
                 data-blade-component="text"
               >
                 -
@@ -8164,7 +8188,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
             </div>
           </th>
           <th
-            class="th c14 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            class="th c15 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
             data-blade-component="table-footer-cell"
             data-hide="false"
             data-resize-min-width="75"
@@ -8173,7 +8197,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
           >
             <div>
               <p
-                class="c4"
+                class="c5"
                 data-blade-component="text"
               >
                 -
@@ -8181,7 +8205,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
             </div>
           </th>
           <th
-            class="th c14 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            class="th c15 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
             data-blade-component="table-footer-cell"
             data-hide="false"
             data-resize-min-width="75"
@@ -8190,7 +8214,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
           >
             <div>
               <p
-                class="c4"
+                class="c5"
                 data-blade-component="text"
               >
                 -
@@ -8212,7 +8236,18 @@ exports[`<Table /> should render table with sticky header, footer & first column
   position: relative;
 }
 
-.c9.c9.c9.c9.c9 {
+.c5.c5.c5.c5.c5 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.c10.c10.c10.c10.c10 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -8224,7 +8259,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
   height: 100%;
 }
 
-.c10.c10.c10.c10.c10 {
+.c11.c11.c11.c11.c11 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -8241,7 +8276,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
   pointer-events: auto;
 }
 
-.c5.c5.c5.c5.c5 {
+.c6.c6.c6.c6.c6 {
   color: hsla(212,39%,16%,1);
   font-family: "Inter","Inter Fallback Arial",Arial;
   font-size: 0.875rem;
@@ -8258,7 +8293,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
   padding: 0;
 }
 
-.c12.c12.c12.c12.c12 {
+.c13.c13.c13.c13.c13 {
   color: hsla(212,39%,16%,1);
   font-family: "Inter","Inter Fallback Arial",Arial;
   font-size: 0.875rem;
@@ -8285,111 +8320,111 @@ exports[`<Table /> should render table with sticky header, footer & first column
   height: 300px;
 }
 
-.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 {
+.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 {
   border: none;
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 tr:last-child .cell-wrapper {
+.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 tr:last-child .cell-wrapper {
   border-bottom: none;
 }
 
-.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected .cell-wrapper-base,
-.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected .cell-wrapper-base {
+.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 .row-select-single-selected .cell-wrapper-base,
+.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 .row-select-selected .cell-wrapper-base {
   background-color: hsla(227,100%,59%,0.09);
 }
 
-.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base,
-.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base {
+.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base,
+.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base {
   background-color: hsla(227,100%,59%,0.18);
 }
 
-.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions,
-.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions {
+.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions,
+.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions {
   background-color: hsla(0,0%,100%,1);
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2,
-.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 {
+.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2,
+.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 {
   background-color: hsla(0,0%,100%,0);
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3,
-.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 {
+.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3,
+.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 {
   background-color: hsla(227,100%,59%,0.18);
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
-
-.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base,
-.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base {
+
+.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base,
+.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base {
   background-color: hsla(227,100%,59%,0.09);
 }
 
-.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions,
-.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions {
+.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions,
+.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions {
   background-color: hsla(0,0%,100%,1);
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2,
-.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 {
+.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2,
+.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 {
   background-color: hsla(0,0%,100%,0);
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3,
-.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 {
+.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3,
+.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 {
   background-color: hsla(227,100%,59%,0.09);
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base,
-.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base {
+.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base,
+.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base {
   background-color: hsla(227,100%,59%,0.18);
 }
 
-.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions,
-.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions {
+.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions,
+.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions {
   background-color: hsla(0,0%,100%,1);
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2,
-.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 {
+.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2,
+.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-2 {
   background-color: hsla(211,20%,52%,0.12);
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3,
-.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 {
+.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3,
+.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base .hover-actions-layer-3 {
   background-color: hsla(227,100%,59%,0.18);
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8 {
+.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 {
   height: 100%;
   background-color: hsla(0,0%,100%,1);
 }
 
-.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8 > div:first-child {
+.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 > div:first-child {
   -webkit-align-self: stretch;
   -ms-flex-item-align: stretch;
   align-self: stretch;
 }
 
-.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8:focus-visible {
+.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9:focus-visible {
   outline: 4px solid hsla(227,100%,59%,0.18);
   outline-offset: -4px;
   -webkit-transition-property: outline-width;
@@ -8400,7 +8435,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
   transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
-.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 {
+.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12 {
   -webkit-transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 160ms cubic-bezier(0.3,0,0.2,1);
   background-color: transparent;
@@ -8414,15 +8449,15 @@ exports[`<Table /> should render table with sticky header, footer & first column
   border-bottom-style: solid;
 }
 
-.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 {
+.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8 {
   background-color: transparent;
 }
 
-.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 td:last-child .cell-wrapper {
+.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8 td:last-child .cell-wrapper {
   border-right: none;
 }
 
-.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7:focus {
+.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8:focus {
   outline: 4px solid hsla(227,100%,59%,0.18);
   outline-offset: -4px;
   -webkit-transition-property: outline-width;
@@ -8433,19 +8468,19 @@ exports[`<Table /> should render table with sticky header, footer & first column
   transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
-.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13 {
+.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14 {
   background-color: hsla(211,20%,52%,0.12);
 }
 
-.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13 tr:last-child th {
+.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14 tr:last-child th {
   border-bottom: none;
 }
 
-.c14.c14.c14.c14.c14 th:last-child {
+.c15.c15.c15.c15.c15 th:last-child {
   border-right: none;
 }
 
-.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15 {
+.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16 {
   height: 100%;
   background-color: hsla(0,0%,100%,1);
   border-bottom-width: 1px;
@@ -8456,7 +8491,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
   border-top-style: solid;
 }
 
-.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15 > div {
+.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16 > div {
   background-color: hsla(211,20%,52%,0.12);
   display: -webkit-box;
   display: -webkit-flex;
@@ -8473,6 +8508,10 @@ exports[`<Table /> should render table with sticky header, footer & first column
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  -webkit-box-pack: left;
+  -webkit-justify-content: left;
+  -ms-flex-pack: left;
+  justify-content: left;
 }
 
 .c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2 tr:first-child th {
@@ -8519,23 +8558,6 @@ exports[`<Table /> should render table with sticky header, footer & first column
   min-height: 48px;
 }
 
-.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4 > div > .text {
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4 > div > .sortIcon {
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-}
-
 .c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4:focus-visible {
   outline: 4px solid hsla(227,100%,59%,0.18);
   outline-offset: -4px;
@@ -8552,31 +8574,31 @@ exports[`<Table /> should render table with sticky header, footer & first column
 }
 
 @media screen and (min-width:320px) {
-  .c10.c10.c10.c10.c10 {
+  .c11.c11.c11.c11.c11 {
     pointer-events: auto;
   }
 }
 
 @media screen and (min-width:480px) {
-  .c10.c10.c10.c10.c10 {
+  .c11.c11.c11.c11.c11 {
     pointer-events: auto;
   }
 }
 
 @media screen and (min-width:768px) {
-  .c10.c10.c10.c10.c10 {
+  .c11.c11.c11.c11.c11 {
     pointer-events: auto;
   }
 }
 
 @media screen and (min-width:1024px) {
-  .c10.c10.c10.c10.c10 {
+  .c11.c11.c11.c11.c11 {
     pointer-events: auto;
   }
 }
 
 @media screen and (min-width:1200px) {
-  .c10.c10.c10.c10.c10 {
+  .c11.c11.c11.c11.c11 {
     pointer-events: auto;
   }
 }
@@ -8616,10 +8638,11 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="text"
+                class="c5"
+                data-blade-component="base-box"
               >
                 <p
-                  class="c5"
+                  class="c6"
                   data-blade-component="text"
                 >
                   Payment ID
@@ -8638,10 +8661,11 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="text"
+                class="c5"
+                data-blade-component="base-box"
               >
                 <p
-                  class="c5"
+                  class="c6"
                   data-blade-component="text"
                 >
                   Amount
@@ -8660,10 +8684,11 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="text"
+                class="c5"
+                data-blade-component="base-box"
               >
                 <p
-                  class="c5"
+                  class="c6"
                   data-blade-component="text"
                 >
                   Status
@@ -8682,10 +8707,11 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="text"
+                class="c5"
+                data-blade-component="base-box"
               >
                 <p
-                  class="c5"
+                  class="c6"
                   data-blade-component="text"
                 >
                   Type
@@ -8704,10 +8730,11 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="text"
+                class="c5"
+                data-blade-component="base-box"
               >
                 <p
-                  class="c5"
+                  class="c6"
                   data-blade-component="text"
                 >
                   Method
@@ -8726,10 +8753,11 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="text"
+                class="c5"
+                data-blade-component="base-box"
               >
                 <p
-                  class="c5"
+                  class="c6"
                   data-blade-component="text"
                 >
                   Name
@@ -8740,19 +8768,19 @@ exports[`<Table /> should render table with sticky header, footer & first column
         </tr>
       </thead>
       <tbody
-        class="c6 css-8eb0m3-Body"
+        class="c7 css-8eb0m3-Body"
         data-blade-component="table-body"
         data-table-library_body=""
       >
         <tr
           aria-selected="false"
-          class="tr tr-body c7 clickable css-1rzx1gz-getRowContainerStyle-Row"
+          class="tr tr-body c8 clickable css-1rzx1gz-getRowContainerStyle-Row"
           data-blade-component="table-row"
           data-table-library_tr-body=""
           role="row"
         >
           <td
-            class="td c8 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
+            class="td c9 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -8760,16 +8788,16 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c9 cell-wrapper-base"
+                class="c10 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c10 c11 cell-wrapper"
+                  class="c11 c12 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c12"
+                    class="c13"
                     data-blade-component="text"
                   >
                     rzp01
@@ -8779,7 +8807,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </td>
           <td
-            class="td c8 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
+            class="td c9 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -8787,11 +8815,11 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c9 cell-wrapper-base"
+                class="c10 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c10 c11 cell-wrapper"
+                  class="c11 c12 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
@@ -8801,7 +8829,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </td>
           <td
-            class="td c8 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
+            class="td c9 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -8809,16 +8837,16 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c9 cell-wrapper-base"
+                class="c10 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c10 c11 cell-wrapper"
+                  class="c11 c12 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c12"
+                    class="c13"
                     data-blade-component="text"
                   >
                     pending
@@ -8828,7 +8856,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </td>
           <td
-            class="td c8 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
+            class="td c9 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -8836,16 +8864,16 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c9 cell-wrapper-base"
+                class="c10 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c10 c11 cell-wrapper"
+                  class="c11 c12 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c12"
+                    class="c13"
                     data-blade-component="text"
                   >
                     credit
@@ -8855,7 +8883,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </td>
           <td
-            class="td c8 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
+            class="td c9 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -8863,16 +8891,16 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c9 cell-wrapper-base"
+                class="c10 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c10 c11 cell-wrapper"
+                  class="c11 c12 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c12"
+                    class="c13"
                     data-blade-component="text"
                   >
                     Netbanking
@@ -8882,7 +8910,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </td>
           <td
-            class="td c8 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
+            class="td c9 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -8890,16 +8918,16 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c9 cell-wrapper-base"
+                class="c10 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c10 c11 cell-wrapper"
+                  class="c11 c12 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c12"
+                    class="c13"
                     data-blade-component="text"
                   >
                     John Doe
@@ -8911,13 +8939,13 @@ exports[`<Table /> should render table with sticky header, footer & first column
         </tr>
         <tr
           aria-selected="false"
-          class="tr tr-body c7 clickable css-1rzx1gz-getRowContainerStyle-Row"
+          class="tr tr-body c8 clickable css-1rzx1gz-getRowContainerStyle-Row"
           data-blade-component="table-row"
           data-table-library_tr-body=""
           role="row"
         >
           <td
-            class="td c8 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
+            class="td c9 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -8925,16 +8953,16 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c9 cell-wrapper-base"
+                class="c10 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c10 c11 cell-wrapper"
+                  class="c11 c12 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c12"
+                    class="c13"
                     data-blade-component="text"
                   >
                     rzp02
@@ -8944,7 +8972,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </td>
           <td
-            class="td c8 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
+            class="td c9 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -8952,11 +8980,11 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c9 cell-wrapper-base"
+                class="c10 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c10 c11 cell-wrapper"
+                  class="c11 c12 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
@@ -8966,7 +8994,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </td>
           <td
-            class="td c8 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
+            class="td c9 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -8974,16 +9002,16 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c9 cell-wrapper-base"
+                class="c10 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c10 c11 cell-wrapper"
+                  class="c11 c12 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c12"
+                    class="c13"
                     data-blade-component="text"
                   >
                     pending
@@ -8993,7 +9021,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </td>
           <td
-            class="td c8 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
+            class="td c9 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -9001,16 +9029,16 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c9 cell-wrapper-base"
+                class="c10 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c10 c11 cell-wrapper"
+                  class="c11 c12 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c12"
+                    class="c13"
                     data-blade-component="text"
                   >
                     credit
@@ -9020,7 +9048,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </td>
           <td
-            class="td c8 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
+            class="td c9 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -9028,16 +9056,16 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c9 cell-wrapper-base"
+                class="c10 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c10 c11 cell-wrapper"
+                  class="c11 c12 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c12"
+                    class="c13"
                     data-blade-component="text"
                   >
                     UPI
@@ -9047,7 +9075,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </td>
           <td
-            class="td c8 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
+            class="td c9 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -9055,16 +9083,16 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c9 cell-wrapper-base"
+                class="c10 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c10 c11 cell-wrapper"
+                  class="c11 c12 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c12"
+                    class="c13"
                     data-blade-component="text"
                   >
                     Jane Doe
@@ -9076,13 +9104,13 @@ exports[`<Table /> should render table with sticky header, footer & first column
         </tr>
         <tr
           aria-selected="false"
-          class="tr tr-body c7 clickable css-1rzx1gz-getRowContainerStyle-Row"
+          class="tr tr-body c8 clickable css-1rzx1gz-getRowContainerStyle-Row"
           data-blade-component="table-row"
           data-table-library_tr-body=""
           role="row"
         >
           <td
-            class="td c8 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
+            class="td c9 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -9090,16 +9118,16 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c9 cell-wrapper-base"
+                class="c10 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c10 c11 cell-wrapper"
+                  class="c11 c12 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c12"
+                    class="c13"
                     data-blade-component="text"
                   >
                     rzp03
@@ -9109,7 +9137,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </td>
           <td
-            class="td c8 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
+            class="td c9 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -9117,11 +9145,11 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c9 cell-wrapper-base"
+                class="c10 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c10 c11 cell-wrapper"
+                  class="c11 c12 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
@@ -9131,7 +9159,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </td>
           <td
-            class="td c8 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
+            class="td c9 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -9139,16 +9167,16 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c9 cell-wrapper-base"
+                class="c10 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c10 c11 cell-wrapper"
+                  class="c11 c12 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c12"
+                    class="c13"
                     data-blade-component="text"
                   >
                     failed
@@ -9158,7 +9186,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </td>
           <td
-            class="td c8 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
+            class="td c9 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -9166,16 +9194,16 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c9 cell-wrapper-base"
+                class="c10 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c10 c11 cell-wrapper"
+                  class="c11 c12 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c12"
+                    class="c13"
                     data-blade-component="text"
                   >
                     debit
@@ -9185,7 +9213,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </td>
           <td
-            class="td c8 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
+            class="td c9 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -9193,16 +9221,16 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c9 cell-wrapper-base"
+                class="c10 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c10 c11 cell-wrapper"
+                  class="c11 c12 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c12"
+                    class="c13"
                     data-blade-component="text"
                   >
                     Debit Card
@@ -9212,7 +9240,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </td>
           <td
-            class="td c8 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
+            class="td c9 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -9220,16 +9248,16 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c9 cell-wrapper-base"
+                class="c10 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c10 c11 cell-wrapper"
+                  class="c11 c12 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c12"
+                    class="c13"
                     data-blade-component="text"
                   >
                     Alice Smith
@@ -9241,13 +9269,13 @@ exports[`<Table /> should render table with sticky header, footer & first column
         </tr>
         <tr
           aria-selected="false"
-          class="tr tr-body c7 clickable css-1rzx1gz-getRowContainerStyle-Row"
+          class="tr tr-body c8 clickable css-1rzx1gz-getRowContainerStyle-Row"
           data-blade-component="table-row"
           data-table-library_tr-body=""
           role="row"
         >
           <td
-            class="td c8 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
+            class="td c9 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -9255,16 +9283,16 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c9 cell-wrapper-base"
+                class="c10 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c10 c11 cell-wrapper"
+                  class="c11 c12 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c12"
+                    class="c13"
                     data-blade-component="text"
                   >
                     rzp04
@@ -9274,7 +9302,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </td>
           <td
-            class="td c8 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
+            class="td c9 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -9282,11 +9310,11 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c9 cell-wrapper-base"
+                class="c10 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c10 c11 cell-wrapper"
+                  class="c11 c12 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
@@ -9296,7 +9324,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </td>
           <td
-            class="td c8 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
+            class="td c9 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -9304,16 +9332,16 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c9 cell-wrapper-base"
+                class="c10 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c10 c11 cell-wrapper"
+                  class="c11 c12 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c12"
+                    class="c13"
                     data-blade-component="text"
                   >
                     completed
@@ -9323,7 +9351,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </td>
           <td
-            class="td c8 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
+            class="td c9 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -9331,16 +9359,16 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c9 cell-wrapper-base"
+                class="c10 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c10 c11 cell-wrapper"
+                  class="c11 c12 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c12"
+                    class="c13"
                     data-blade-component="text"
                   >
                     credit
@@ -9350,7 +9378,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </td>
           <td
-            class="td c8 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
+            class="td c9 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -9358,16 +9386,16 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c9 cell-wrapper-base"
+                class="c10 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c10 c11 cell-wrapper"
+                  class="c11 c12 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c12"
+                    class="c13"
                     data-blade-component="text"
                   >
                     Credit Card
@@ -9377,7 +9405,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </td>
           <td
-            class="td c8 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
+            class="td c9 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -9385,16 +9413,16 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c9 cell-wrapper-base"
+                class="c10 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c10 c11 cell-wrapper"
+                  class="c11 c12 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c12"
+                    class="c13"
                     data-blade-component="text"
                   >
                     Bob Smith
@@ -9406,13 +9434,13 @@ exports[`<Table /> should render table with sticky header, footer & first column
         </tr>
         <tr
           aria-selected="false"
-          class="tr tr-body c7 clickable css-1rzx1gz-getRowContainerStyle-Row"
+          class="tr tr-body c8 clickable css-1rzx1gz-getRowContainerStyle-Row"
           data-blade-component="table-row"
           data-table-library_tr-body=""
           role="row"
         >
           <td
-            class="td c8 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
+            class="td c9 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -9420,16 +9448,16 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c9 cell-wrapper-base"
+                class="c10 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c10 c11 cell-wrapper"
+                  class="c11 c12 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c12"
+                    class="c13"
                     data-blade-component="text"
                   >
                     rzp05
@@ -9439,7 +9467,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </td>
           <td
-            class="td c8 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
+            class="td c9 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -9447,11 +9475,11 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c9 cell-wrapper-base"
+                class="c10 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c10 c11 cell-wrapper"
+                  class="c11 c12 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
@@ -9461,7 +9489,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </td>
           <td
-            class="td c8 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
+            class="td c9 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -9469,16 +9497,16 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c9 cell-wrapper-base"
+                class="c10 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c10 c11 cell-wrapper"
+                  class="c11 c12 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c12"
+                    class="c13"
                     data-blade-component="text"
                   >
                     completed
@@ -9488,7 +9516,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </td>
           <td
-            class="td c8 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
+            class="td c9 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -9496,16 +9524,16 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c9 cell-wrapper-base"
+                class="c10 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c10 c11 cell-wrapper"
+                  class="c11 c12 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c12"
+                    class="c13"
                     data-blade-component="text"
                   >
                     credit
@@ -9515,7 +9543,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </td>
           <td
-            class="td c8 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
+            class="td c9 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -9523,16 +9551,16 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c9 cell-wrapper-base"
+                class="c10 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c10 c11 cell-wrapper"
+                  class="c11 c12 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c12"
+                    class="c13"
                     data-blade-component="text"
                   >
                     Netbanking
@@ -9542,7 +9570,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </td>
           <td
-            class="td c8 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
+            class="td c9 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -9550,16 +9578,16 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c9 cell-wrapper-base"
+                class="c10 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c10 c11 cell-wrapper"
+                  class="c11 c12 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c12"
+                    class="c13"
                     data-blade-component="text"
                   >
                     John Doe
@@ -9571,13 +9599,13 @@ exports[`<Table /> should render table with sticky header, footer & first column
         </tr>
         <tr
           aria-selected="false"
-          class="tr tr-body c7 clickable css-1rzx1gz-getRowContainerStyle-Row"
+          class="tr tr-body c8 clickable css-1rzx1gz-getRowContainerStyle-Row"
           data-blade-component="table-row"
           data-table-library_tr-body=""
           role="row"
         >
           <td
-            class="td c8 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
+            class="td c9 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -9585,16 +9613,16 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c9 cell-wrapper-base"
+                class="c10 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c10 c11 cell-wrapper"
+                  class="c11 c12 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c12"
+                    class="c13"
                     data-blade-component="text"
                   >
                     rzp06
@@ -9604,7 +9632,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </td>
           <td
-            class="td c8 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
+            class="td c9 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -9612,11 +9640,11 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c9 cell-wrapper-base"
+                class="c10 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c10 c11 cell-wrapper"
+                  class="c11 c12 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
@@ -9626,7 +9654,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </td>
           <td
-            class="td c8 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
+            class="td c9 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -9634,16 +9662,16 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c9 cell-wrapper-base"
+                class="c10 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c10 c11 cell-wrapper"
+                  class="c11 c12 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c12"
+                    class="c13"
                     data-blade-component="text"
                   >
                     pending
@@ -9653,7 +9681,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </td>
           <td
-            class="td c8 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
+            class="td c9 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -9661,16 +9689,16 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c9 cell-wrapper-base"
+                class="c10 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c10 c11 cell-wrapper"
+                  class="c11 c12 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c12"
+                    class="c13"
                     data-blade-component="text"
                   >
                     credit
@@ -9680,7 +9708,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </td>
           <td
-            class="td c8 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
+            class="td c9 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -9688,16 +9716,16 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c9 cell-wrapper-base"
+                class="c10 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c10 c11 cell-wrapper"
+                  class="c11 c12 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c12"
+                    class="c13"
                     data-blade-component="text"
                   >
                     UPI
@@ -9707,7 +9735,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </td>
           <td
-            class="td c8 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
+            class="td c9 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -9715,16 +9743,16 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c9 cell-wrapper-base"
+                class="c10 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c10 c11 cell-wrapper"
+                  class="c11 c12 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c12"
+                    class="c13"
                     data-blade-component="text"
                   >
                     Jane Doe
@@ -9736,13 +9764,13 @@ exports[`<Table /> should render table with sticky header, footer & first column
         </tr>
         <tr
           aria-selected="false"
-          class="tr tr-body c7 clickable css-1rzx1gz-getRowContainerStyle-Row"
+          class="tr tr-body c8 clickable css-1rzx1gz-getRowContainerStyle-Row"
           data-blade-component="table-row"
           data-table-library_tr-body=""
           role="row"
         >
           <td
-            class="td c8 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
+            class="td c9 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -9750,16 +9778,16 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c9 cell-wrapper-base"
+                class="c10 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c10 c11 cell-wrapper"
+                  class="c11 c12 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c12"
+                    class="c13"
                     data-blade-component="text"
                   >
                     rzp07
@@ -9769,7 +9797,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </td>
           <td
-            class="td c8 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
+            class="td c9 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -9777,11 +9805,11 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c9 cell-wrapper-base"
+                class="c10 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c10 c11 cell-wrapper"
+                  class="c11 c12 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
@@ -9791,7 +9819,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </td>
           <td
-            class="td c8 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
+            class="td c9 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -9799,16 +9827,16 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c9 cell-wrapper-base"
+                class="c10 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c10 c11 cell-wrapper"
+                  class="c11 c12 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c12"
+                    class="c13"
                     data-blade-component="text"
                   >
                     failed
@@ -9818,7 +9846,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </td>
           <td
-            class="td c8 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
+            class="td c9 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -9826,16 +9854,16 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c9 cell-wrapper-base"
+                class="c10 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c10 c11 cell-wrapper"
+                  class="c11 c12 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c12"
+                    class="c13"
                     data-blade-component="text"
                   >
                     debit
@@ -9845,7 +9873,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </td>
           <td
-            class="td c8 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
+            class="td c9 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -9853,16 +9881,16 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c9 cell-wrapper-base"
+                class="c10 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c10 c11 cell-wrapper"
+                  class="c11 c12 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c12"
+                    class="c13"
                     data-blade-component="text"
                   >
                     Debit Card
@@ -9872,7 +9900,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </td>
           <td
-            class="td c8 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
+            class="td c9 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -9880,16 +9908,16 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c9 cell-wrapper-base"
+                class="c10 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c10 c11 cell-wrapper"
+                  class="c11 c12 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c12"
+                    class="c13"
                     data-blade-component="text"
                   >
                     Alice Smith
@@ -9901,13 +9929,13 @@ exports[`<Table /> should render table with sticky header, footer & first column
         </tr>
         <tr
           aria-selected="false"
-          class="tr tr-body c7 clickable css-1rzx1gz-getRowContainerStyle-Row"
+          class="tr tr-body c8 clickable css-1rzx1gz-getRowContainerStyle-Row"
           data-blade-component="table-row"
           data-table-library_tr-body=""
           role="row"
         >
           <td
-            class="td c8 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
+            class="td c9 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -9915,16 +9943,16 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c9 cell-wrapper-base"
+                class="c10 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c10 c11 cell-wrapper"
+                  class="c11 c12 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c12"
+                    class="c13"
                     data-blade-component="text"
                   >
                     rzp08
@@ -9934,7 +9962,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </td>
           <td
-            class="td c8 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
+            class="td c9 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -9942,11 +9970,11 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c9 cell-wrapper-base"
+                class="c10 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c10 c11 cell-wrapper"
+                  class="c11 c12 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
@@ -9956,7 +9984,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </td>
           <td
-            class="td c8 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
+            class="td c9 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -9964,16 +9992,16 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c9 cell-wrapper-base"
+                class="c10 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c10 c11 cell-wrapper"
+                  class="c11 c12 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c12"
+                    class="c13"
                     data-blade-component="text"
                   >
                     completed
@@ -9983,7 +10011,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </td>
           <td
-            class="td c8 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
+            class="td c9 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -9991,16 +10019,16 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c9 cell-wrapper-base"
+                class="c10 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c10 c11 cell-wrapper"
+                  class="c11 c12 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c12"
+                    class="c13"
                     data-blade-component="text"
                   >
                     credit
@@ -10010,7 +10038,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </td>
           <td
-            class="td c8 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
+            class="td c9 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -10018,16 +10046,16 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c9 cell-wrapper-base"
+                class="c10 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c10 c11 cell-wrapper"
+                  class="c11 c12 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c12"
+                    class="c13"
                     data-blade-component="text"
                   >
                     Credit Card
@@ -10037,7 +10065,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </td>
           <td
-            class="td c8 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
+            class="td c9 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -10045,16 +10073,16 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c9 cell-wrapper-base"
+                class="c10 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c10 c11 cell-wrapper"
+                  class="c11 c12 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c12"
+                    class="c13"
                     data-blade-component="text"
                   >
                     Bob Smith
@@ -10066,13 +10094,13 @@ exports[`<Table /> should render table with sticky header, footer & first column
         </tr>
         <tr
           aria-selected="false"
-          class="tr tr-body c7 clickable css-1rzx1gz-getRowContainerStyle-Row"
+          class="tr tr-body c8 clickable css-1rzx1gz-getRowContainerStyle-Row"
           data-blade-component="table-row"
           data-table-library_tr-body=""
           role="row"
         >
           <td
-            class="td c8 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
+            class="td c9 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -10080,16 +10108,16 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c9 cell-wrapper-base"
+                class="c10 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c10 c11 cell-wrapper"
+                  class="c11 c12 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c12"
+                    class="c13"
                     data-blade-component="text"
                   >
                     rzp09
@@ -10099,7 +10127,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </td>
           <td
-            class="td c8 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
+            class="td c9 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -10107,11 +10135,11 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c9 cell-wrapper-base"
+                class="c10 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c10 c11 cell-wrapper"
+                  class="c11 c12 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
@@ -10121,7 +10149,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </td>
           <td
-            class="td c8 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
+            class="td c9 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -10129,16 +10157,16 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c9 cell-wrapper-base"
+                class="c10 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c10 c11 cell-wrapper"
+                  class="c11 c12 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c12"
+                    class="c13"
                     data-blade-component="text"
                   >
                     completed
@@ -10148,7 +10176,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </td>
           <td
-            class="td c8 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
+            class="td c9 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -10156,16 +10184,16 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c9 cell-wrapper-base"
+                class="c10 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c10 c11 cell-wrapper"
+                  class="c11 c12 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c12"
+                    class="c13"
                     data-blade-component="text"
                   >
                     credit
@@ -10175,7 +10203,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </td>
           <td
-            class="td c8 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
+            class="td c9 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -10183,16 +10211,16 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c9 cell-wrapper-base"
+                class="c10 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c10 c11 cell-wrapper"
+                  class="c11 c12 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c12"
+                    class="c13"
                     data-blade-component="text"
                   >
                     Netbanking
@@ -10202,7 +10230,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </td>
           <td
-            class="td c8 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
+            class="td c9 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -10210,16 +10238,16 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c9 cell-wrapper-base"
+                class="c10 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c10 c11 cell-wrapper"
+                  class="c11 c12 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c12"
+                    class="c13"
                     data-blade-component="text"
                   >
                     John Doe
@@ -10231,13 +10259,13 @@ exports[`<Table /> should render table with sticky header, footer & first column
         </tr>
         <tr
           aria-selected="false"
-          class="tr tr-body c7 clickable css-1rzx1gz-getRowContainerStyle-Row"
+          class="tr tr-body c8 clickable css-1rzx1gz-getRowContainerStyle-Row"
           data-blade-component="table-row"
           data-table-library_tr-body=""
           role="row"
         >
           <td
-            class="td c8 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
+            class="td c9 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -10245,16 +10273,16 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c9 cell-wrapper-base"
+                class="c10 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c10 c11 cell-wrapper"
+                  class="c11 c12 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c12"
+                    class="c13"
                     data-blade-component="text"
                   >
                     rzp10
@@ -10264,7 +10292,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </td>
           <td
-            class="td c8 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
+            class="td c9 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -10272,11 +10300,11 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c9 cell-wrapper-base"
+                class="c10 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c10 c11 cell-wrapper"
+                  class="c11 c12 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
@@ -10286,7 +10314,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </td>
           <td
-            class="td c8 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
+            class="td c9 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -10294,16 +10322,16 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c9 cell-wrapper-base"
+                class="c10 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c10 c11 cell-wrapper"
+                  class="c11 c12 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c12"
+                    class="c13"
                     data-blade-component="text"
                   >
                     pending
@@ -10313,7 +10341,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </td>
           <td
-            class="td c8 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
+            class="td c9 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -10321,16 +10349,16 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c9 cell-wrapper-base"
+                class="c10 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c10 c11 cell-wrapper"
+                  class="c11 c12 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c12"
+                    class="c13"
                     data-blade-component="text"
                   >
                     credit
@@ -10340,7 +10368,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </td>
           <td
-            class="td c8 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
+            class="td c9 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -10348,16 +10376,16 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c9 cell-wrapper-base"
+                class="c10 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c10 c11 cell-wrapper"
+                  class="c11 c12 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c12"
+                    class="c13"
                     data-blade-component="text"
                   >
                     UPI
@@ -10367,7 +10395,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </td>
           <td
-            class="td c8 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
+            class="td c9 css-gbagn9-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -10375,16 +10403,16 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c9 cell-wrapper-base"
+                class="c10 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c10 c11 cell-wrapper"
+                  class="c11 c12 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c12"
+                    class="c13"
                     data-blade-component="text"
                   >
                     Jane Doe
@@ -10396,18 +10424,18 @@ exports[`<Table /> should render table with sticky header, footer & first column
         </tr>
       </tbody>
       <tfoot
-        class="c13 css-1a28xfp-Header"
+        class="c14 css-1a28xfp-Header"
         data-blade-component="table-footer"
         role="rowgroup"
       >
         <tr
-          class="tr c14 tr-footer css-19bs4cg-getHeaderRowContainerStyle-HeaderRow"
+          class="tr c15 tr-footer css-19bs4cg-getHeaderRowContainerStyle-HeaderRow"
           data-blade-component="table-footer-row"
           data-table-library_tr-header=""
           role="rowfooter"
         >
           <th
-            class="th c15 css-c0u6i8-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            class="th c16 css-c0u6i8-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
             data-blade-component="table-footer-cell"
             data-hide="false"
             data-resize-min-width="75"
@@ -10416,7 +10444,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <p
-                class="c5"
+                class="c6"
                 data-blade-component="text"
               >
                 -
@@ -10424,7 +10452,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </th>
           <th
-            class="th c15 css-c0u6i8-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            class="th c16 css-c0u6i8-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
             data-blade-component="table-footer-cell"
             data-hide="false"
             data-resize-min-width="75"
@@ -10433,7 +10461,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <p
-                class="c5"
+                class="c6"
                 data-blade-component="text"
               >
                 -
@@ -10441,7 +10469,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </th>
           <th
-            class="th c15 css-c0u6i8-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            class="th c16 css-c0u6i8-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
             data-blade-component="table-footer-cell"
             data-hide="false"
             data-resize-min-width="75"
@@ -10450,7 +10478,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <p
-                class="c5"
+                class="c6"
                 data-blade-component="text"
               >
                 -
@@ -10458,7 +10486,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </th>
           <th
-            class="th c15 css-c0u6i8-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            class="th c16 css-c0u6i8-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
             data-blade-component="table-footer-cell"
             data-hide="false"
             data-resize-min-width="75"
@@ -10467,7 +10495,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <p
-                class="c5"
+                class="c6"
                 data-blade-component="text"
               >
                 -
@@ -10475,7 +10503,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </th>
           <th
-            class="th c15 css-c0u6i8-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            class="th c16 css-c0u6i8-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
             data-blade-component="table-footer-cell"
             data-hide="false"
             data-resize-min-width="75"
@@ -10484,7 +10512,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <p
-                class="c5"
+                class="c6"
                 data-blade-component="text"
               >
                 -
@@ -10492,7 +10520,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </th>
           <th
-            class="th c15 css-c0u6i8-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            class="th c16 css-c0u6i8-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
             data-blade-component="table-footer-cell"
             data-hide="false"
             data-resize-min-width="75"
@@ -10501,7 +10529,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <p
-                class="c5"
+                class="c6"
                 data-blade-component="text"
               >
                 -

From 1bff88cc88a82312406667985f13448ef5589e85 Mon Sep 17 00:00:00 2001
From: tewarig <gaurav.tewari@razorpay.com>
Date: Tue, 21 Jan 2025 13:51:29 +0530
Subject: [PATCH 16/16] chore: review changes & updated snap

---
 .changeset/sweet-apes-roll.md                 |   2 +-
 .../__snapshots__/Table.web.test.tsx.snap     | 312 +++++++++---------
 2 files changed, 157 insertions(+), 157 deletions(-)

diff --git a/.changeset/sweet-apes-roll.md b/.changeset/sweet-apes-roll.md
index c266f953797..bb034e89bbf 100644
--- a/.changeset/sweet-apes-roll.md
+++ b/.changeset/sweet-apes-roll.md
@@ -1,5 +1,5 @@
 ---
-'@razorpay/blade': patch
+'@razorpay/blade': minor
 ---
 
 feat: ability to align individual table column items 
diff --git a/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap b/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap
index 75d0f2243ea..17d56216b51 100644
--- a/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap
+++ b/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap
@@ -520,7 +520,7 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
               >
                 <div
                   class="c10 c11 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -547,7 +547,7 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
               >
                 <div
                   class="c10 c11 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   100
@@ -569,7 +569,7 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
               >
                 <div
                   class="c10 c11 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -596,7 +596,7 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
               >
                 <div
                   class="c10 c11 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -633,7 +633,7 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
               >
                 <div
                   class="c10 c11 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -660,7 +660,7 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
               >
                 <div
                   class="c10 c11 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   240
@@ -682,7 +682,7 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
               >
                 <div
                   class="c10 c11 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -709,7 +709,7 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
               >
                 <div
                   class="c10 c11 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -746,7 +746,7 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
               >
                 <div
                   class="c10 c11 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -773,7 +773,7 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
               >
                 <div
                   class="c10 c11 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   120
@@ -795,7 +795,7 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
               >
                 <div
                   class="c10 c11 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -822,7 +822,7 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
               >
                 <div
                   class="c10 c11 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -859,7 +859,7 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
               >
                 <div
                   class="c10 c11 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -886,7 +886,7 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
               >
                 <div
                   class="c10 c11 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   300
@@ -908,7 +908,7 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
               >
                 <div
                   class="c10 c11 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -935,7 +935,7 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
               >
                 <div
                   class="c10 c11 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -972,7 +972,7 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
               >
                 <div
                   class="c10 c11 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -999,7 +999,7 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
               >
                 <div
                   class="c10 c11 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   200
@@ -1021,7 +1021,7 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
               >
                 <div
                   class="c10 c11 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -1048,7 +1048,7 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
               >
                 <div
                   class="c10 c11 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -1711,7 +1711,7 @@ exports[`<Table /> should render table 1`] = `
               >
                 <div
                   class="c15 c16 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -1738,7 +1738,7 @@ exports[`<Table /> should render table 1`] = `
               >
                 <div
                   class="c15 c16 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   100
@@ -1760,7 +1760,7 @@ exports[`<Table /> should render table 1`] = `
               >
                 <div
                   class="c15 c16 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -1787,7 +1787,7 @@ exports[`<Table /> should render table 1`] = `
               >
                 <div
                   class="c15 c16 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -1814,7 +1814,7 @@ exports[`<Table /> should render table 1`] = `
               >
                 <div
                   class="c15 c16 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -1841,7 +1841,7 @@ exports[`<Table /> should render table 1`] = `
               >
                 <div
                   class="c15 c16 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -1876,7 +1876,7 @@ exports[`<Table /> should render table 1`] = `
               >
                 <div
                   class="c15 c16 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -1903,7 +1903,7 @@ exports[`<Table /> should render table 1`] = `
               >
                 <div
                   class="c15 c16 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   240
@@ -1925,7 +1925,7 @@ exports[`<Table /> should render table 1`] = `
               >
                 <div
                   class="c15 c16 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -1952,7 +1952,7 @@ exports[`<Table /> should render table 1`] = `
               >
                 <div
                   class="c15 c16 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -1979,7 +1979,7 @@ exports[`<Table /> should render table 1`] = `
               >
                 <div
                   class="c15 c16 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -2006,7 +2006,7 @@ exports[`<Table /> should render table 1`] = `
               >
                 <div
                   class="c15 c16 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -2041,7 +2041,7 @@ exports[`<Table /> should render table 1`] = `
               >
                 <div
                   class="c15 c16 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -2068,7 +2068,7 @@ exports[`<Table /> should render table 1`] = `
               >
                 <div
                   class="c15 c16 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   120
@@ -2090,7 +2090,7 @@ exports[`<Table /> should render table 1`] = `
               >
                 <div
                   class="c15 c16 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -2117,7 +2117,7 @@ exports[`<Table /> should render table 1`] = `
               >
                 <div
                   class="c15 c16 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -2144,7 +2144,7 @@ exports[`<Table /> should render table 1`] = `
               >
                 <div
                   class="c15 c16 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -2171,7 +2171,7 @@ exports[`<Table /> should render table 1`] = `
               >
                 <div
                   class="c15 c16 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -2206,7 +2206,7 @@ exports[`<Table /> should render table 1`] = `
               >
                 <div
                   class="c15 c16 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -2233,7 +2233,7 @@ exports[`<Table /> should render table 1`] = `
               >
                 <div
                   class="c15 c16 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   300
@@ -2255,7 +2255,7 @@ exports[`<Table /> should render table 1`] = `
               >
                 <div
                   class="c15 c16 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -2282,7 +2282,7 @@ exports[`<Table /> should render table 1`] = `
               >
                 <div
                   class="c15 c16 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -2309,7 +2309,7 @@ exports[`<Table /> should render table 1`] = `
               >
                 <div
                   class="c15 c16 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -2336,7 +2336,7 @@ exports[`<Table /> should render table 1`] = `
               >
                 <div
                   class="c15 c16 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -2371,7 +2371,7 @@ exports[`<Table /> should render table 1`] = `
               >
                 <div
                   class="c15 c16 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -2398,7 +2398,7 @@ exports[`<Table /> should render table 1`] = `
               >
                 <div
                   class="c15 c16 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   200
@@ -2420,7 +2420,7 @@ exports[`<Table /> should render table 1`] = `
               >
                 <div
                   class="c15 c16 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -2447,7 +2447,7 @@ exports[`<Table /> should render table 1`] = `
               >
                 <div
                   class="c15 c16 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -2474,7 +2474,7 @@ exports[`<Table /> should render table 1`] = `
               >
                 <div
                   class="c15 c16 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -2501,7 +2501,7 @@ exports[`<Table /> should render table 1`] = `
               >
                 <div
                   class="c15 c16 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -3559,7 +3559,7 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
               >
                 <div
                   class="c14 c15 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -3643,7 +3643,7 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
               >
                 <div
                   class="c14 c15 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -3670,7 +3670,7 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
               >
                 <div
                   class="c14 c15 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -3697,7 +3697,7 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
               >
                 <div
                   class="c14 c15 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -3724,7 +3724,7 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
               >
                 <div
                   class="c14 c15 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -3759,7 +3759,7 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
               >
                 <div
                   class="c14 c15 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -3843,7 +3843,7 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
               >
                 <div
                   class="c14 c15 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -3870,7 +3870,7 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
               >
                 <div
                   class="c14 c15 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -3897,7 +3897,7 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
               >
                 <div
                   class="c14 c15 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -3924,7 +3924,7 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
               >
                 <div
                   class="c14 c15 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -4620,7 +4620,7 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
               >
                 <div
                   class="c10 c11 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -4647,7 +4647,7 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
               >
                 <div
                   class="c10 c11 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   100
@@ -4669,7 +4669,7 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
               >
                 <div
                   class="c10 c11 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -4696,7 +4696,7 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
               >
                 <div
                   class="c10 c11 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -4723,7 +4723,7 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
               >
                 <div
                   class="c10 c11 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -4750,7 +4750,7 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
               >
                 <div
                   class="c10 c11 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -4785,7 +4785,7 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
               >
                 <div
                   class="c10 c11 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -4812,7 +4812,7 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
               >
                 <div
                   class="c10 c11 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   240
@@ -4834,7 +4834,7 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
               >
                 <div
                   class="c10 c11 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -4861,7 +4861,7 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
               >
                 <div
                   class="c10 c11 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -4888,7 +4888,7 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
               >
                 <div
                   class="c10 c11 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -4915,7 +4915,7 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
               >
                 <div
                   class="c10 c11 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -5611,7 +5611,7 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
               >
                 <div
                   class="c10 c11 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -5638,7 +5638,7 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
               >
                 <div
                   class="c10 c11 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   100
@@ -5660,7 +5660,7 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
               >
                 <div
                   class="c10 c11 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -5687,7 +5687,7 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
               >
                 <div
                   class="c10 c11 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -5714,7 +5714,7 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
               >
                 <div
                   class="c10 c11 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -5741,7 +5741,7 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
               >
                 <div
                   class="c10 c11 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -5776,7 +5776,7 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
               >
                 <div
                   class="c10 c11 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -5803,7 +5803,7 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
               >
                 <div
                   class="c10 c11 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   240
@@ -5825,7 +5825,7 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
               >
                 <div
                   class="c10 c11 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -5852,7 +5852,7 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
               >
                 <div
                   class="c10 c11 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -5879,7 +5879,7 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
               >
                 <div
                   class="c10 c11 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -5906,7 +5906,7 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
               >
                 <div
                   class="c10 c11 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -7798,7 +7798,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
               >
                 <div
                   class="c10 c11 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -7825,7 +7825,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
               >
                 <div
                   class="c10 c11 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   100
@@ -7847,7 +7847,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
               >
                 <div
                   class="c10 c11 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -7874,7 +7874,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
               >
                 <div
                   class="c10 c11 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -7901,7 +7901,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
               >
                 <div
                   class="c10 c11 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -7928,7 +7928,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
               >
                 <div
                   class="c10 c11 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -7963,7 +7963,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
               >
                 <div
                   class="c10 c11 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -7990,7 +7990,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
               >
                 <div
                   class="c10 c11 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   240
@@ -8012,7 +8012,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
               >
                 <div
                   class="c10 c11 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -8039,7 +8039,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
               >
                 <div
                   class="c10 c11 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -8066,7 +8066,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
               >
                 <div
                   class="c10 c11 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -8093,7 +8093,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
               >
                 <div
                   class="c10 c11 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -8793,7 +8793,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
               >
                 <div
                   class="c11 c12 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -8820,7 +8820,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
               >
                 <div
                   class="c11 c12 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   100
@@ -8842,7 +8842,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
               >
                 <div
                   class="c11 c12 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -8869,7 +8869,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
               >
                 <div
                   class="c11 c12 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -8896,7 +8896,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
               >
                 <div
                   class="c11 c12 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -8923,7 +8923,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
               >
                 <div
                   class="c11 c12 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -8958,7 +8958,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
               >
                 <div
                   class="c11 c12 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -8985,7 +8985,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
               >
                 <div
                   class="c11 c12 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   240
@@ -9007,7 +9007,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
               >
                 <div
                   class="c11 c12 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -9034,7 +9034,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
               >
                 <div
                   class="c11 c12 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -9061,7 +9061,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
               >
                 <div
                   class="c11 c12 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -9088,7 +9088,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
               >
                 <div
                   class="c11 c12 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -9123,7 +9123,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
               >
                 <div
                   class="c11 c12 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -9150,7 +9150,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
               >
                 <div
                   class="c11 c12 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   120
@@ -9172,7 +9172,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
               >
                 <div
                   class="c11 c12 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -9199,7 +9199,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
               >
                 <div
                   class="c11 c12 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -9226,7 +9226,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
               >
                 <div
                   class="c11 c12 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -9253,7 +9253,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
               >
                 <div
                   class="c11 c12 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -9288,7 +9288,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
               >
                 <div
                   class="c11 c12 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -9315,7 +9315,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
               >
                 <div
                   class="c11 c12 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   300
@@ -9337,7 +9337,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
               >
                 <div
                   class="c11 c12 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -9364,7 +9364,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
               >
                 <div
                   class="c11 c12 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -9391,7 +9391,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
               >
                 <div
                   class="c11 c12 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -9418,7 +9418,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
               >
                 <div
                   class="c11 c12 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -9453,7 +9453,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
               >
                 <div
                   class="c11 c12 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -9480,7 +9480,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
               >
                 <div
                   class="c11 c12 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   200
@@ -9502,7 +9502,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
               >
                 <div
                   class="c11 c12 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -9529,7 +9529,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
               >
                 <div
                   class="c11 c12 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -9556,7 +9556,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
               >
                 <div
                   class="c11 c12 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -9583,7 +9583,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
               >
                 <div
                   class="c11 c12 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -9618,7 +9618,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
               >
                 <div
                   class="c11 c12 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -9645,7 +9645,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
               >
                 <div
                   class="c11 c12 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   240
@@ -9667,7 +9667,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
               >
                 <div
                   class="c11 c12 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -9694,7 +9694,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
               >
                 <div
                   class="c11 c12 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -9721,7 +9721,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
               >
                 <div
                   class="c11 c12 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -9748,7 +9748,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
               >
                 <div
                   class="c11 c12 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -9783,7 +9783,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
               >
                 <div
                   class="c11 c12 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -9810,7 +9810,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
               >
                 <div
                   class="c11 c12 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   120
@@ -9832,7 +9832,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
               >
                 <div
                   class="c11 c12 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -9859,7 +9859,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
               >
                 <div
                   class="c11 c12 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -9886,7 +9886,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
               >
                 <div
                   class="c11 c12 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -9913,7 +9913,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
               >
                 <div
                   class="c11 c12 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -9948,7 +9948,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
               >
                 <div
                   class="c11 c12 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -9975,7 +9975,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
               >
                 <div
                   class="c11 c12 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   300
@@ -9997,7 +9997,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
               >
                 <div
                   class="c11 c12 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -10024,7 +10024,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
               >
                 <div
                   class="c11 c12 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -10051,7 +10051,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
               >
                 <div
                   class="c11 c12 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -10078,7 +10078,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
               >
                 <div
                   class="c11 c12 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -10113,7 +10113,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
               >
                 <div
                   class="c11 c12 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -10140,7 +10140,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
               >
                 <div
                   class="c11 c12 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   200
@@ -10162,7 +10162,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
               >
                 <div
                   class="c11 c12 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -10189,7 +10189,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
               >
                 <div
                   class="c11 c12 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -10216,7 +10216,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
               >
                 <div
                   class="c11 c12 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -10243,7 +10243,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
               >
                 <div
                   class="c11 c12 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -10278,7 +10278,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
               >
                 <div
                   class="c11 c12 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -10305,7 +10305,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
               >
                 <div
                   class="c11 c12 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   240
@@ -10327,7 +10327,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
               >
                 <div
                   class="c11 c12 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -10354,7 +10354,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
               >
                 <div
                   class="c11 c12 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -10381,7 +10381,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
               >
                 <div
                   class="c11 c12 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p
@@ -10408,7 +10408,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
               >
                 <div
                   class="c11 c12 cell-wrapper"
-                  data-blade-component="base-box"
+                  data-blade-component="table-cell-wrapper"
                   pointer-events="auto"
                 >
                   <p