diff --git a/.changeset/sweet-apes-roll.md b/.changeset/sweet-apes-roll.md
new file mode 100644
index 00000000000..c266f953797
--- /dev/null
+++ b/.changeset/sweet-apes-roll.md
@@ -0,0 +1,5 @@
+---
+'@razorpay/blade': patch
+---
+
+feat: ability to align individual table column items 
diff --git a/packages/blade/src/components/Table/TableBody.web.tsx b/packages/blade/src/components/Table/TableBody.web.tsx
index 717924ebbdb..d30eb7d5152 100644
--- a/packages/blade/src/components/Table/TableBody.web.tsx
+++ b/packages/blade/src/components/Table/TableBody.web.tsx
@@ -256,7 +256,8 @@ export const CellWrapper = styled(BaseBox)<{
   $rowDensity: NonNullable<TableProps<unknown>['rowDensity']>;
   showStripedRows?: boolean;
   hasPadding?: boolean;
-}>(({ theme, $rowDensity, showStripedRows, hasPadding = true }) => {
+  textAlign?: TableCellProps['textAlign'];
+}>(({ theme, $rowDensity, showStripedRows, hasPadding = true, textAlign }) => {
   const rowBackgroundTransition = `background-color ${makeMotionTime(
     getIn(theme.motion, tableRow.backgroundColorMotionDuration),
   )} ${getIn(theme.motion, tableRow.backgroundColorMotionEasing)}`;
@@ -272,6 +273,7 @@ export const CellWrapper = styled(BaseBox)<{
       minHeight: makeSize(getIn(size, tableRow.minHeight[$rowDensity])),
       height: '100%',
       width: '100%',
+      justifyContent: textAlign,
       ...(!showStripedRows && {
         borderBottomWidth: makeSpace(getIn(theme.border.width, tableRow.borderBottomWidth)),
         borderBottomColor: getIn(theme.colors, tableRow.borderColor),
@@ -281,7 +283,12 @@ export const CellWrapper = styled(BaseBox)<{
   };
 });
 
-const _TableCell = ({ children, _hasPadding, ...rest }: TableCellProps): React.ReactElement => {
+const _TableCell = ({
+  children,
+  textAlign,
+  _hasPadding,
+  ...rest
+}: TableCellProps): React.ReactElement => {
   const isChildrenString = typeof children === 'string';
   const { selectionType, rowDensity, showStripedRows, backgroundColor } = useTableContext();
   const isSelectable = selectionType !== 'none';
@@ -303,6 +310,7 @@ const _TableCell = ({ children, _hasPadding, ...rest }: TableCellProps): React.R
           alignItems="center"
           hasPadding={_hasPadding}
           flex={1}
+          textAlign={textAlign}
           // 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/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 c7e7611e148..298ae1a8330 100644
--- a/packages/blade/src/components/Table/TableHeader.web.tsx
+++ b/packages/blade/src/components/Table/TableHeader.web.tsx
@@ -96,8 +96,11 @@ 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 }) => ({
   '&&&': {
+    display: $textAlign ? 'flex' : 'block',
+    justifyContent: $textAlign ? 'space-between' : 'initial',
     height: '100%',
     backgroundColor: getIn(theme.colors, $backgroundColor),
     borderBottomWidth: makeSpace(getIn(theme.border.width, tableHeader.borderBottomAndTopWidth)),
@@ -111,7 +114,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
@@ -130,6 +133,7 @@ const _TableHeaderCell = ({
   children,
   headerKey,
   _hasPadding = true,
+  textAlign,
   ...rest
 }: TableHeaderCellProps): React.ReactElement => {
   const {
@@ -149,6 +153,7 @@ const _TableHeaderCell = ({
       $backgroundColor={backgroundColor}
       $rowDensity={headerRowDensity ?? rowDensity}
       $hasPadding={_hasPadding}
+      $textAlign={textAlign}
       onClick={() => {
         if (isSortable) {
           toggleSort(headerKey);
@@ -157,15 +162,17 @@ const _TableHeaderCell = ({
       {...metaAttribute({ name: MetaConstants.TableHeaderCell })}
       {...makeAnalyticsAttribute(rest)}
     >
-      {isChildrenString ? (
-        <Text size="medium" weight="medium" color="surface.text.gray.normal">
-          {children}
-        </Text>
-      ) : (
-        children
-      )}
+      <BaseBox display="flex" flexGrow={1} justifyContent={textAlign}>
+        {isChildrenString ? (
+          <Text size="medium" weight="medium" color="surface.text.gray.normal">
+            {children}
+          </Text>
+        ) : (
+          children
+        )}
+      </BaseBox>
       {isSortable && (
-        <BaseBox paddingLeft="spacing.2" backgroundColor="transparent">
+        <BaseBox paddingLeft="spacing.2" backgroundColor="transparent" flexShrink={0}>
           <SortIcon
             isSorted={currentSortedState.sortKey === headerKey}
             isSortReversed={currentSortedState.isSortReversed}
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 fbb647ad02d..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;
@@ -230,6 +241,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;
@@ -280,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;
   }
 }
@@ -345,12 +361,17 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
             tabindex="0"
           >
             <div>
-              <p
+              <div
                 class="c4"
-                data-blade-component="text"
+                data-blade-component="base-box"
               >
-                Payment ID
-              </p>
+                <p
+                  class="c5"
+                  data-blade-component="text"
+                >
+                  Payment ID
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -363,12 +384,17 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
             tabindex="0"
           >
             <div>
-              <p
+              <div
                 class="c4"
-                data-blade-component="text"
+                data-blade-component="base-box"
               >
-                Amount
-              </p>
+                <p
+                  class="c5"
+                  data-blade-component="text"
+                >
+                  Amount
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -381,12 +407,17 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
             tabindex="0"
           >
             <div>
-              <p
+              <div
                 class="c4"
-                data-blade-component="text"
+                data-blade-component="base-box"
               >
-                Status
-              </p>
+                <p
+                  class="c5"
+                  data-blade-component="text"
+                >
+                  Status
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -399,12 +430,17 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
             tabindex="0"
           >
             <div>
-              <p
+              <div
                 class="c4"
-                data-blade-component="text"
+                data-blade-component="base-box"
               >
-                Type
-              </p>
+                <p
+                  class="c5"
+                  data-blade-component="text"
+                >
+                  Type
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -417,12 +453,17 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
             tabindex="0"
           >
             <div>
-              <p
+              <div
                 class="c4"
-                data-blade-component="text"
+                data-blade-component="base-box"
               >
-                Method
-              </p>
+                <p
+                  class="c5"
+                  data-blade-component="text"
+                >
+                  Method
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -435,32 +476,37 @@ exports[`<Table /> should accept data-analytics-* props 1`] = `
             tabindex="0"
           >
             <div>
-              <p
+              <div
                 class="c4"
-                data-blade-component="text"
+                data-blade-component="base-box"
               >
-                Name
-              </p>
+                <p
+                  class="c5"
+                  data-blade-component="text"
+                >
+                  Name
+                </p>
+              </div>
             </div>
           </th>
         </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=""
@@ -469,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
@@ -488,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"
@@ -496,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"
                 >
@@ -510,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"
@@ -518,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
@@ -537,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"
@@ -545,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
@@ -566,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=""
@@ -582,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
@@ -601,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"
@@ -609,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"
                 >
@@ -623,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"
@@ -631,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
@@ -650,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"
@@ -658,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
@@ -679,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=""
@@ -695,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
@@ -714,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"
@@ -722,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"
                 >
@@ -736,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"
@@ -744,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
@@ -763,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"
@@ -771,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
@@ -792,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=""
@@ -808,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
@@ -827,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"
@@ -835,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"
                 >
@@ -849,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"
@@ -857,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
@@ -876,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"
@@ -884,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
@@ -905,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=""
@@ -921,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
@@ -940,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"
@@ -948,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"
                 >
@@ -962,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"
@@ -970,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
@@ -989,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"
@@ -997,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
@@ -1064,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;
@@ -1076,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;
@@ -1110,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;
@@ -1127,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;
@@ -1150,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;
@@ -1265,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;
@@ -1279,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;
@@ -1298,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;
@@ -1321,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;
@@ -1338,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 {
@@ -1345,6 +1406,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;
@@ -1400,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;
   }
 }
@@ -1489,12 +1555,17 @@ exports[`<Table /> should render table 1`] = `
             tabindex="0"
           >
             <div>
-              <p
+              <div
                 class="c9"
-                data-blade-component="text"
+                data-blade-component="base-box"
               >
-                Payment ID
-              </p>
+                <p
+                  class="c10"
+                  data-blade-component="text"
+                >
+                  Payment ID
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -1507,12 +1578,17 @@ exports[`<Table /> should render table 1`] = `
             tabindex="0"
           >
             <div>
-              <p
+              <div
                 class="c9"
-                data-blade-component="text"
+                data-blade-component="base-box"
               >
-                Amount
-              </p>
+                <p
+                  class="c10"
+                  data-blade-component="text"
+                >
+                  Amount
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -1525,12 +1601,17 @@ exports[`<Table /> should render table 1`] = `
             tabindex="0"
           >
             <div>
-              <p
+              <div
                 class="c9"
-                data-blade-component="text"
+                data-blade-component="base-box"
               >
-                Status
-              </p>
+                <p
+                  class="c10"
+                  data-blade-component="text"
+                >
+                  Status
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -1543,12 +1624,17 @@ exports[`<Table /> should render table 1`] = `
             tabindex="0"
           >
             <div>
-              <p
+              <div
                 class="c9"
-                data-blade-component="text"
+                data-blade-component="base-box"
               >
-                Type
-              </p>
+                <p
+                  class="c10"
+                  data-blade-component="text"
+                >
+                  Type
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -1561,12 +1647,17 @@ exports[`<Table /> should render table 1`] = `
             tabindex="0"
           >
             <div>
-              <p
+              <div
                 class="c9"
-                data-blade-component="text"
+                data-blade-component="base-box"
               >
-                Method
-              </p>
+                <p
+                  class="c10"
+                  data-blade-component="text"
+                >
+                  Method
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -1579,30 +1670,35 @@ exports[`<Table /> should render table 1`] = `
             tabindex="0"
           >
             <div>
-              <p
+              <div
                 class="c9"
-                data-blade-component="text"
+                data-blade-component="base-box"
               >
-                Name
-              </p>
+                <p
+                  class="c10"
+                  data-blade-component="text"
+                >
+                  Name
+                </p>
+              </div>
             </div>
           </th>
         </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"
@@ -1610,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
@@ -1629,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"
@@ -1637,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"
                 >
@@ -1651,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"
@@ -1659,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
@@ -1678,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"
@@ -1686,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
@@ -1705,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"
@@ -1713,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
@@ -1732,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"
@@ -1740,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
@@ -1761,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"
@@ -1775,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
@@ -1794,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"
@@ -1802,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"
                 >
@@ -1816,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"
@@ -1824,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
@@ -1843,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"
@@ -1851,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
@@ -1870,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"
@@ -1878,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
@@ -1897,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"
@@ -1905,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
@@ -1926,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"
@@ -1940,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
@@ -1959,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"
@@ -1967,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"
                 >
@@ -1981,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"
@@ -1989,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
@@ -2008,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"
@@ -2016,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
@@ -2035,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"
@@ -2043,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
@@ -2062,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"
@@ -2070,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
@@ -2091,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"
@@ -2105,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
@@ -2124,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"
@@ -2132,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"
                 >
@@ -2146,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"
@@ -2154,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
@@ -2173,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"
@@ -2181,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
@@ -2200,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"
@@ -2208,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
@@ -2227,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"
@@ -2235,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
@@ -2256,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"
@@ -2270,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
@@ -2289,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"
@@ -2297,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"
                 >
@@ -2311,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"
@@ -2319,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
@@ -2338,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"
@@ -2346,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
@@ -2365,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"
@@ -2373,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
@@ -2392,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"
@@ -2400,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
@@ -2421,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"
@@ -2441,7 +2537,7 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <p
-                class="c9"
+                class="c10"
                 data-blade-component="text"
               >
                 -
@@ -2449,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"
@@ -2458,7 +2554,7 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <p
-                class="c9"
+                class="c10"
                 data-blade-component="text"
               >
                 -
@@ -2466,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"
@@ -2475,7 +2571,7 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <p
-                class="c9"
+                class="c10"
                 data-blade-component="text"
               >
                 -
@@ -2483,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"
@@ -2492,7 +2588,7 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <p
-                class="c9"
+                class="c10"
                 data-blade-component="text"
               >
                 -
@@ -2500,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"
@@ -2509,7 +2605,7 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <p
-                class="c9"
+                class="c10"
                 data-blade-component="text"
               >
                 -
@@ -2517,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"
@@ -2526,7 +2622,7 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <p
-                class="c9"
+                class="c10"
                 data-blade-component="text"
               >
                 -
@@ -2582,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;
@@ -2594,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;
@@ -2611,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;
@@ -2625,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;
@@ -2655,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;
@@ -2672,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;
@@ -2701,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;
@@ -2816,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;
@@ -2830,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;
@@ -2844,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;
@@ -2869,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;
@@ -2898,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;
@@ -2915,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 {
@@ -2922,6 +3033,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;
@@ -2977,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;
@@ -3009,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;
@@ -3026,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;
@@ -3043,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;
@@ -3060,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;
@@ -3077,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;
@@ -3105,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;
@@ -3131,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;
@@ -3155,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;
@@ -3176,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;
   }
 }
@@ -3287,12 +3403,17 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
             tabindex="0"
           >
             <div>
-              <p
+              <div
                 class="c8"
-                data-blade-component="text"
+                data-blade-component="base-box"
               >
-                Payment ID
-              </p>
+                <p
+                  class="c9"
+                  data-blade-component="text"
+                >
+                  Payment ID
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -3305,12 +3426,17 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
             tabindex="0"
           >
             <div>
-              <p
+              <div
                 class="c8"
-                data-blade-component="text"
+                data-blade-component="base-box"
               >
-                Amount
-              </p>
+                <p
+                  class="c9"
+                  data-blade-component="text"
+                >
+                  Amount
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -3323,12 +3449,17 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
             tabindex="0"
           >
             <div>
-              <p
+              <div
                 class="c8"
-                data-blade-component="text"
+                data-blade-component="base-box"
               >
-                Status
-              </p>
+                <p
+                  class="c9"
+                  data-blade-component="text"
+                >
+                  Status
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -3341,12 +3472,17 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
             tabindex="0"
           >
             <div>
-              <p
+              <div
                 class="c8"
-                data-blade-component="text"
+                data-blade-component="base-box"
               >
-                Type
-              </p>
+                <p
+                  class="c9"
+                  data-blade-component="text"
+                >
+                  Type
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -3359,12 +3495,17 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
             tabindex="0"
           >
             <div>
-              <p
+              <div
                 class="c8"
-                data-blade-component="text"
+                data-blade-component="base-box"
               >
-                Method
-              </p>
+                <p
+                  class="c9"
+                  data-blade-component="text"
+                >
+                  Method
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -3377,30 +3518,35 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
             tabindex="0"
           >
             <div>
-              <p
+              <div
                 class="c8"
-                data-blade-component="text"
+                data-blade-component="base-box"
               >
-                Name
-              </p>
+                <p
+                  class="c9"
+                  data-blade-component="text"
+                >
+                  Name
+                </p>
+              </div>
             </div>
           </th>
         </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"
@@ -3408,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
@@ -3427,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
@@ -3450,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
@@ -3467,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"
@@ -3484,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"
@@ -3492,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
@@ -3511,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"
@@ -3519,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
@@ -3538,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"
@@ -3546,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
@@ -3565,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"
@@ -3573,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
@@ -3594,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"
@@ -3608,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
@@ -3627,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
@@ -3650,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
@@ -3667,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"
@@ -3684,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"
@@ -3692,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
@@ -3711,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"
@@ -3719,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
@@ -3738,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"
@@ -3746,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
@@ -3765,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"
@@ -3773,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
@@ -3794,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"
@@ -3814,7 +3960,7 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
           >
             <div>
               <p
-                class="c8"
+                class="c9"
                 data-blade-component="text"
               >
                 -
@@ -3822,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"
@@ -3831,7 +3977,7 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
           >
             <div>
               <p
-                class="c8"
+                class="c9"
                 data-blade-component="text"
               >
                 -
@@ -3839,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"
@@ -3848,7 +3994,7 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
           >
             <div>
               <p
-                class="c8"
+                class="c9"
                 data-blade-component="text"
               >
                 -
@@ -3856,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"
@@ -3865,7 +4011,7 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
           >
             <div>
               <p
-                class="c8"
+                class="c9"
                 data-blade-component="text"
               >
                 -
@@ -3873,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"
@@ -3882,7 +4028,7 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
           >
             <div>
               <p
-                class="c8"
+                class="c9"
                 data-blade-component="text"
               >
                 -
@@ -3890,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"
@@ -3899,7 +4045,7 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
           >
             <div>
               <p
-                class="c8"
+                class="c9"
                 data-blade-component="text"
               >
                 -
@@ -3921,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;
@@ -3933,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;
@@ -3950,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;
@@ -3967,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;
@@ -3990,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;
@@ -4105,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;
@@ -4119,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;
@@ -4138,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;
@@ -4161,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;
@@ -4178,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 {
@@ -4185,6 +4346,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;
@@ -4235,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;
   }
 }
@@ -4298,12 +4464,17 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
             tabindex="0"
           >
             <div>
-              <p
+              <div
                 class="c4"
-                data-blade-component="text"
+                data-blade-component="base-box"
               >
-                Payment ID
-              </p>
+                <p
+                  class="c5"
+                  data-blade-component="text"
+                >
+                  Payment ID
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -4316,12 +4487,17 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
             tabindex="0"
           >
             <div>
-              <p
+              <div
                 class="c4"
-                data-blade-component="text"
+                data-blade-component="base-box"
               >
-                Amount
-              </p>
+                <p
+                  class="c5"
+                  data-blade-component="text"
+                >
+                  Amount
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -4334,12 +4510,17 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
             tabindex="0"
           >
             <div>
-              <p
+              <div
                 class="c4"
-                data-blade-component="text"
+                data-blade-component="base-box"
               >
-                Status
-              </p>
+                <p
+                  class="c5"
+                  data-blade-component="text"
+                >
+                  Status
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -4352,12 +4533,17 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
             tabindex="0"
           >
             <div>
-              <p
+              <div
                 class="c4"
-                data-blade-component="text"
+                data-blade-component="base-box"
               >
-                Type
-              </p>
+                <p
+                  class="c5"
+                  data-blade-component="text"
+                >
+                  Type
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -4370,12 +4556,17 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
             tabindex="0"
           >
             <div>
-              <p
+              <div
                 class="c4"
-                data-blade-component="text"
+                data-blade-component="base-box"
               >
-                Method
-              </p>
+                <p
+                  class="c5"
+                  data-blade-component="text"
+                >
+                  Method
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -4388,30 +4579,35 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
             tabindex="0"
           >
             <div>
-              <p
+              <div
                 class="c4"
-                data-blade-component="text"
+                data-blade-component="base-box"
               >
-                Name
-              </p>
+                <p
+                  class="c5"
+                  data-blade-component="text"
+                >
+                  Name
+                </p>
+              </div>
             </div>
           </th>
         </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"
@@ -4419,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
@@ -4438,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"
@@ -4446,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"
                 >
@@ -4460,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"
@@ -4468,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
@@ -4487,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"
@@ -4495,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
@@ -4514,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"
@@ -4522,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
@@ -4541,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"
@@ -4549,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
@@ -4570,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"
@@ -4584,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
@@ -4603,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"
@@ -4611,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"
                 >
@@ -4625,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"
@@ -4633,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
@@ -4652,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"
@@ -4660,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
@@ -4679,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"
@@ -4687,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
@@ -4706,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"
@@ -4714,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
@@ -4735,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"
@@ -4755,7 +4951,7 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
           >
             <div>
               <p
-                class="c4"
+                class="c5"
                 data-blade-component="text"
               >
                 -
@@ -4763,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"
@@ -4772,7 +4968,7 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
           >
             <div>
               <p
-                class="c4"
+                class="c5"
                 data-blade-component="text"
               >
                 -
@@ -4780,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"
@@ -4789,7 +4985,7 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
           >
             <div>
               <p
-                class="c4"
+                class="c5"
                 data-blade-component="text"
               >
                 -
@@ -4797,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"
@@ -4806,7 +5002,7 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
           >
             <div>
               <p
-                class="c4"
+                class="c5"
                 data-blade-component="text"
               >
                 -
@@ -4814,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"
@@ -4823,7 +5019,7 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
           >
             <div>
               <p
-                class="c4"
+                class="c5"
                 data-blade-component="text"
               >
                 -
@@ -4831,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"
@@ -4840,7 +5036,7 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
           >
             <div>
               <p
-                class="c4"
+                class="c5"
                 data-blade-component="text"
               >
                 -
@@ -4862,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;
@@ -4874,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;
@@ -4891,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;
@@ -4908,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;
@@ -4931,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 {
-  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,
+.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;
@@ -5046,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;
@@ -5060,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;
@@ -5079,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;
@@ -5102,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;
@@ -5119,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 {
@@ -5126,6 +5337,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;
@@ -5176,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;
   }
 }
@@ -5239,12 +5455,17 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
             tabindex="0"
           >
             <div>
-              <p
+              <div
                 class="c4"
-                data-blade-component="text"
+                data-blade-component="base-box"
               >
-                Payment ID
-              </p>
+                <p
+                  class="c5"
+                  data-blade-component="text"
+                >
+                  Payment ID
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -5257,12 +5478,17 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
             tabindex="0"
           >
             <div>
-              <p
+              <div
                 class="c4"
-                data-blade-component="text"
+                data-blade-component="base-box"
               >
-                Amount
-              </p>
+                <p
+                  class="c5"
+                  data-blade-component="text"
+                >
+                  Amount
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -5275,12 +5501,17 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
             tabindex="0"
           >
             <div>
-              <p
+              <div
                 class="c4"
-                data-blade-component="text"
+                data-blade-component="base-box"
               >
-                Status
-              </p>
+                <p
+                  class="c5"
+                  data-blade-component="text"
+                >
+                  Status
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -5293,12 +5524,17 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
             tabindex="0"
           >
             <div>
-              <p
+              <div
                 class="c4"
-                data-blade-component="text"
+                data-blade-component="base-box"
               >
-                Type
-              </p>
+                <p
+                  class="c5"
+                  data-blade-component="text"
+                >
+                  Type
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -5311,12 +5547,17 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
             tabindex="0"
           >
             <div>
-              <p
+              <div
                 class="c4"
-                data-blade-component="text"
+                data-blade-component="base-box"
               >
-                Method
-              </p>
+                <p
+                  class="c5"
+                  data-blade-component="text"
+                >
+                  Method
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -5329,30 +5570,35 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
             tabindex="0"
           >
             <div>
-              <p
+              <div
                 class="c4"
-                data-blade-component="text"
+                data-blade-component="base-box"
               >
-                Name
-              </p>
+                <p
+                  class="c5"
+                  data-blade-component="text"
+                >
+                  Name
+                </p>
+              </div>
             </div>
           </th>
         </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"
@@ -5360,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
@@ -5379,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"
@@ -5387,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"
                 >
@@ -5401,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"
@@ -5409,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
@@ -5428,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"
@@ -5436,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
@@ -5455,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"
@@ -5463,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
@@ -5482,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"
@@ -5490,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
@@ -5511,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"
@@ -5525,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
@@ -5544,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"
@@ -5552,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"
                 >
@@ -5566,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"
@@ -5574,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
@@ -5593,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"
@@ -5601,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
@@ -5620,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"
@@ -5628,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
@@ -5647,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"
@@ -5655,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
@@ -5676,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"
@@ -5696,7 +5942,7 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
           >
             <div>
               <p
-                class="c4"
+                class="c5"
                 data-blade-component="text"
               >
                 -
@@ -5704,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"
@@ -5713,7 +5959,7 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
           >
             <div>
               <p
-                class="c4"
+                class="c5"
                 data-blade-component="text"
               >
                 -
@@ -5721,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"
@@ -5730,7 +5976,7 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
           >
             <div>
               <p
-                class="c4"
+                class="c5"
                 data-blade-component="text"
               >
                 -
@@ -5738,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"
@@ -5747,7 +5993,7 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
           >
             <div>
               <p
-                class="c4"
+                class="c5"
                 data-blade-component="text"
               >
                 -
@@ -5755,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"
@@ -5764,7 +6010,7 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
           >
             <div>
               <p
-                class="c4"
+                class="c5"
                 data-blade-component="text"
               >
                 -
@@ -5772,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"
@@ -5781,7 +6027,7 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
           >
             <div>
               <p
-                class="c4"
+                class="c5"
                 data-blade-component="text"
               >
                 -
@@ -5936,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;
@@ -5948,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;
@@ -5978,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;
@@ -5995,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;
@@ -6024,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;
@@ -6139,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;
@@ -6153,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;
@@ -6172,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;
@@ -6195,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;
@@ -6212,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 {
@@ -6219,6 +6480,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;
@@ -6269,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;
   }
 }
@@ -6380,12 +6646,17 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
             tabindex="0"
           >
             <div>
-              <p
+              <div
                 class="c8"
-                data-blade-component="text"
+                data-blade-component="base-box"
               >
-                Payment ID
-              </p>
+                <p
+                  class="c9"
+                  data-blade-component="text"
+                >
+                  Payment ID
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -6398,12 +6669,17 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
             tabindex="0"
           >
             <div>
-              <p
+              <div
                 class="c8"
-                data-blade-component="text"
+                data-blade-component="base-box"
               >
-                Amount
-              </p>
+                <p
+                  class="c9"
+                  data-blade-component="text"
+                >
+                  Amount
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -6416,12 +6692,17 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
             tabindex="0"
           >
             <div>
-              <p
+              <div
                 class="c8"
-                data-blade-component="text"
+                data-blade-component="base-box"
               >
-                Status
-              </p>
+                <p
+                  class="c9"
+                  data-blade-component="text"
+                >
+                  Status
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -6434,12 +6715,17 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
             tabindex="0"
           >
             <div>
-              <p
+              <div
                 class="c8"
-                data-blade-component="text"
+                data-blade-component="base-box"
               >
-                Type
-              </p>
+                <p
+                  class="c9"
+                  data-blade-component="text"
+                >
+                  Type
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -6452,12 +6738,17 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
             tabindex="0"
           >
             <div>
-              <p
+              <div
                 class="c8"
-                data-blade-component="text"
+                data-blade-component="base-box"
               >
-                Method
-              </p>
+                <p
+                  class="c9"
+                  data-blade-component="text"
+                >
+                  Method
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -6470,30 +6761,35 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
             tabindex="0"
           >
             <div>
-              <p
+              <div
                 class="c8"
-                data-blade-component="text"
+                data-blade-component="base-box"
               >
-                Name
-              </p>
+                <p
+                  class="c9"
+                  data-blade-component="text"
+                >
+                  Name
+                </p>
+              </div>
             </div>
           </th>
         </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"
@@ -6501,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
@@ -6520,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"
@@ -6528,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"
                 >
@@ -6542,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"
@@ -6550,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
@@ -6569,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"
@@ -6577,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
@@ -6596,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"
@@ -6604,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
@@ -6623,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"
@@ -6631,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
@@ -6652,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"
@@ -6666,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
@@ -6685,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"
@@ -6693,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"
                 >
@@ -6707,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"
@@ -6715,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
@@ -6734,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"
@@ -6742,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
@@ -6761,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"
@@ -6769,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
@@ -6788,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"
@@ -6796,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
@@ -6817,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"
@@ -6837,7 +7133,7 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
           >
             <div>
               <p
-                class="c8"
+                class="c9"
                 data-blade-component="text"
               >
                 -
@@ -6845,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"
@@ -6854,7 +7150,7 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
           >
             <div>
               <p
-                class="c8"
+                class="c9"
                 data-blade-component="text"
               >
                 -
@@ -6862,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"
@@ -6871,7 +7167,7 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
           >
             <div>
               <p
-                class="c8"
+                class="c9"
                 data-blade-component="text"
               >
                 -
@@ -6879,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"
@@ -6888,7 +7184,7 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
           >
             <div>
               <p
-                class="c8"
+                class="c9"
                 data-blade-component="text"
               >
                 -
@@ -6896,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"
@@ -6905,7 +7201,7 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
           >
             <div>
               <p
-                class="c8"
+                class="c9"
                 data-blade-component="text"
               >
                 -
@@ -6913,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"
@@ -6922,7 +7218,7 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
           >
             <div>
               <p
-                class="c8"
+                class="c9"
                 data-blade-component="text"
               >
                 -
@@ -6944,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;
@@ -6956,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;
@@ -6973,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;
@@ -6990,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;
@@ -7013,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;
@@ -7136,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;
@@ -7147,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;
@@ -7166,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;
@@ -7189,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;
@@ -7206,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 {
@@ -7213,6 +7524,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;
@@ -7263,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;
   }
 }
@@ -7326,12 +7642,17 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
             tabindex="0"
           >
             <div>
-              <p
+              <div
                 class="c4"
-                data-blade-component="text"
+                data-blade-component="base-box"
               >
-                Payment ID
-              </p>
+                <p
+                  class="c5"
+                  data-blade-component="text"
+                >
+                  Payment ID
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -7344,12 +7665,17 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
             tabindex="0"
           >
             <div>
-              <p
+              <div
                 class="c4"
-                data-blade-component="text"
+                data-blade-component="base-box"
               >
-                Amount
-              </p>
+                <p
+                  class="c5"
+                  data-blade-component="text"
+                >
+                  Amount
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -7362,12 +7688,17 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
             tabindex="0"
           >
             <div>
-              <p
+              <div
                 class="c4"
-                data-blade-component="text"
+                data-blade-component="base-box"
               >
-                Status
-              </p>
+                <p
+                  class="c5"
+                  data-blade-component="text"
+                >
+                  Status
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -7380,12 +7711,17 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
             tabindex="0"
           >
             <div>
-              <p
+              <div
                 class="c4"
-                data-blade-component="text"
+                data-blade-component="base-box"
               >
-                Type
-              </p>
+                <p
+                  class="c5"
+                  data-blade-component="text"
+                >
+                  Type
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -7398,12 +7734,17 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
             tabindex="0"
           >
             <div>
-              <p
+              <div
                 class="c4"
-                data-blade-component="text"
+                data-blade-component="base-box"
               >
-                Method
-              </p>
+                <p
+                  class="c5"
+                  data-blade-component="text"
+                >
+                  Method
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -7416,30 +7757,35 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
             tabindex="0"
           >
             <div>
-              <p
+              <div
                 class="c4"
-                data-blade-component="text"
+                data-blade-component="base-box"
               >
-                Name
-              </p>
+                <p
+                  class="c5"
+                  data-blade-component="text"
+                >
+                  Name
+                </p>
+              </div>
             </div>
           </th>
         </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"
@@ -7447,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
@@ -7466,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"
@@ -7474,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"
                 >
@@ -7488,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"
@@ -7496,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
@@ -7515,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"
@@ -7523,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
@@ -7542,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"
@@ -7550,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
@@ -7569,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"
@@ -7577,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
@@ -7598,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"
@@ -7612,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
@@ -7631,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"
@@ -7639,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"
                 >
@@ -7653,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"
@@ -7661,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
@@ -7680,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"
@@ -7688,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
@@ -7707,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"
@@ -7715,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
@@ -7734,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"
@@ -7742,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
@@ -7763,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"
@@ -7783,7 +8129,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
           >
             <div>
               <p
-                class="c4"
+                class="c5"
                 data-blade-component="text"
               >
                 -
@@ -7791,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"
@@ -7800,7 +8146,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
           >
             <div>
               <p
-                class="c4"
+                class="c5"
                 data-blade-component="text"
               >
                 -
@@ -7808,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"
@@ -7817,7 +8163,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
           >
             <div>
               <p
-                class="c4"
+                class="c5"
                 data-blade-component="text"
               >
                 -
@@ -7825,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"
@@ -7834,7 +8180,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
           >
             <div>
               <p
-                class="c4"
+                class="c5"
                 data-blade-component="text"
               >
                 -
@@ -7842,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"
@@ -7851,7 +8197,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
           >
             <div>
               <p
-                class="c4"
+                class="c5"
                 data-blade-component="text"
               >
                 -
@@ -7859,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"
@@ -7868,7 +8214,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
           >
             <div>
               <p
-                class="c4"
+                class="c5"
                 data-blade-component="text"
               >
                 -
@@ -7890,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;
@@ -7902,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;
@@ -7919,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;
@@ -7936,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;
@@ -7963,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;
@@ -8078,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;
@@ -8092,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;
@@ -8111,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;
@@ -8134,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;
@@ -8151,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 {
@@ -8158,6 +8519,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;
@@ -8208,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;
   }
 }
@@ -8271,12 +8637,17 @@ exports[`<Table /> should render table with sticky header, footer & first column
             tabindex="0"
           >
             <div>
-              <p
+              <div
                 class="c5"
-                data-blade-component="text"
+                data-blade-component="base-box"
               >
-                Payment ID
-              </p>
+                <p
+                  class="c6"
+                  data-blade-component="text"
+                >
+                  Payment ID
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -8289,12 +8660,17 @@ exports[`<Table /> should render table with sticky header, footer & first column
             tabindex="0"
           >
             <div>
-              <p
+              <div
                 class="c5"
-                data-blade-component="text"
+                data-blade-component="base-box"
               >
-                Amount
-              </p>
+                <p
+                  class="c6"
+                  data-blade-component="text"
+                >
+                  Amount
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -8307,12 +8683,17 @@ exports[`<Table /> should render table with sticky header, footer & first column
             tabindex="0"
           >
             <div>
-              <p
+              <div
                 class="c5"
-                data-blade-component="text"
+                data-blade-component="base-box"
               >
-                Status
-              </p>
+                <p
+                  class="c6"
+                  data-blade-component="text"
+                >
+                  Status
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -8325,12 +8706,17 @@ exports[`<Table /> should render table with sticky header, footer & first column
             tabindex="0"
           >
             <div>
-              <p
+              <div
                 class="c5"
-                data-blade-component="text"
+                data-blade-component="base-box"
               >
-                Type
-              </p>
+                <p
+                  class="c6"
+                  data-blade-component="text"
+                >
+                  Type
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -8343,12 +8729,17 @@ exports[`<Table /> should render table with sticky header, footer & first column
             tabindex="0"
           >
             <div>
-              <p
+              <div
                 class="c5"
-                data-blade-component="text"
+                data-blade-component="base-box"
               >
-                Method
-              </p>
+                <p
+                  class="c6"
+                  data-blade-component="text"
+                >
+                  Method
+                </p>
+              </div>
             </div>
           </th>
           <th
@@ -8361,30 +8752,35 @@ exports[`<Table /> should render table with sticky header, footer & first column
             tabindex="0"
           >
             <div>
-              <p
+              <div
                 class="c5"
-                data-blade-component="text"
+                data-blade-component="base-box"
               >
-                Name
-              </p>
+                <p
+                  class="c6"
+                  data-blade-component="text"
+                >
+                  Name
+                </p>
+              </div>
             </div>
           </th>
         </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"
@@ -8392,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
@@ -8411,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"
@@ -8419,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"
                 >
@@ -8433,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"
@@ -8441,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
@@ -8460,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"
@@ -8468,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
@@ -8487,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"
@@ -8495,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
@@ -8514,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"
@@ -8522,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
@@ -8543,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"
@@ -8557,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
@@ -8576,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"
@@ -8584,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"
                 >
@@ -8598,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"
@@ -8606,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
@@ -8625,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"
@@ -8633,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
@@ -8652,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"
@@ -8660,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
@@ -8679,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"
@@ -8687,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
@@ -8708,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"
@@ -8722,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
@@ -8741,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"
@@ -8749,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"
                 >
@@ -8763,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"
@@ -8771,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
@@ -8790,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"
@@ -8798,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
@@ -8817,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"
@@ -8825,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
@@ -8844,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"
@@ -8852,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
@@ -8873,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"
@@ -8887,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
@@ -8906,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"
@@ -8914,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"
                 >
@@ -8928,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"
@@ -8936,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
@@ -8955,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"
@@ -8963,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
@@ -8982,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"
@@ -8990,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
@@ -9009,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"
@@ -9017,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
@@ -9038,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"
@@ -9052,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
@@ -9071,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"
@@ -9079,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"
                 >
@@ -9093,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"
@@ -9101,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
@@ -9120,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"
@@ -9128,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
@@ -9147,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"
@@ -9155,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
@@ -9174,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"
@@ -9182,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
@@ -9203,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"
@@ -9217,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
@@ -9236,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"
@@ -9244,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"
                 >
@@ -9258,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"
@@ -9266,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
@@ -9285,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"
@@ -9293,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
@@ -9312,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"
@@ -9320,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
@@ -9339,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"
@@ -9347,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
@@ -9368,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"
@@ -9382,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
@@ -9401,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"
@@ -9409,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"
                 >
@@ -9423,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"
@@ -9431,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
@@ -9450,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"
@@ -9458,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
@@ -9477,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"
@@ -9485,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
@@ -9504,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"
@@ -9512,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
@@ -9533,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"
@@ -9547,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
@@ -9566,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"
@@ -9574,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"
                 >
@@ -9588,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"
@@ -9596,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
@@ -9615,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"
@@ -9623,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
@@ -9642,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"
@@ -9650,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
@@ -9669,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"
@@ -9677,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
@@ -9698,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"
@@ -9712,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
@@ -9731,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"
@@ -9739,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"
                 >
@@ -9753,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"
@@ -9761,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
@@ -9780,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"
@@ -9788,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
@@ -9807,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"
@@ -9815,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
@@ -9834,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"
@@ -9842,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
@@ -9863,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"
@@ -9877,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
@@ -9896,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"
@@ -9904,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"
                 >
@@ -9918,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"
@@ -9926,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
@@ -9945,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"
@@ -9953,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
@@ -9972,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"
@@ -9980,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
@@ -9999,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"
@@ -10007,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
@@ -10028,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"
@@ -10048,7 +10444,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <p
-                class="c5"
+                class="c6"
                 data-blade-component="text"
               >
                 -
@@ -10056,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"
@@ -10065,7 +10461,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <p
-                class="c5"
+                class="c6"
                 data-blade-component="text"
               >
                 -
@@ -10073,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"
@@ -10082,7 +10478,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <p
-                class="c5"
+                class="c6"
                 data-blade-component="text"
               >
                 -
@@ -10090,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"
@@ -10099,7 +10495,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <p
-                class="c5"
+                class="c6"
                 data-blade-component="text"
               >
                 -
@@ -10107,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"
@@ -10116,7 +10512,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <p
-                class="c5"
+                class="c6"
                 data-blade-component="text"
               >
                 -
@@ -10124,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"
@@ -10133,7 +10529,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <p
-                class="c5"
+                class="c6"
                 data-blade-component="text"
               >
                 -
diff --git a/packages/blade/src/components/Table/types.ts b/packages/blade/src/components/Table/types.ts
index 771ee7efd17..94c442d16f4 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;
@@ -264,6 +270,12 @@ type TableCellProps = {
    * </TableCell>
    **/
   children: 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';
   /**
    * Removes padding from CellWrapper
    *
@@ -338,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 = {