@mrshmllw/smores-react 13.16.1 → 13.17.0

package/README.md

@@ -1,16 +1,18 @@
 <p align="center">
-    <img src="./smores-logo.svg"
-        height="95">
-</p>
+    <picture>
+  <source media="(prefers-color-scheme: dark)" srcset="assets/smores-logo-dark.png">
+  <source media="(prefers-color-scheme: light)" srcset="assets/smores-logo-light.png">
+  <img alt="Project Logo" src="assets/smores-logo-light.png">
+</picture></p>
 <p align="center">
   <a href="https://www.npmjs.com/package/@mrshmllw/smores-react">
-    <img alt="npm-version-badge" src="https://img.shields.io/npm/v/@mrshmllw/smores-react.svg?style=flat-square" /></a>
+    <img alt="npm-version-badge" src="https://img.shields.io/npm/v/@mrshmllw/smores-react.svg?style=flat-square&logo=nodedotjs" /></a>
   <a href="https://github.com/marshmallow-insurance/smores-react/blob/master/LICENSE">
-    <img alt="licence-badge" src="https://img.shields.io/github/license/marshmallow-insurance/smores-react.svg?style=flat-square" /></a>
-  <a href="https://snyk.io//test/github/marshmallow-insurance/smores-react?targetFile=package.json">
-    <img alt="snyk-badge" src="https://img.shields.io/snyk/vulnerabilities/github/marshmallow-insurance/smores-react?style=flat-square" /></a>
+    <img alt="licence-badge" src="https://img.shields.io/github/license/marshmallow-insurance/smores-react.svg?style=flat-square&logo=ReadMe" /></a>
+  <a href="https://snyk.io/test/github/marshmallow-insurance/smores-react?targetFile=package.json">
+    <img alt="snyk-badge" src="https://snyk.io/test/github/marshmallow-insurance/smores-react/badge.svg?targetFile=package.json&style=flat-square" /></a>
   <a href="https://prettier.io/">
-    <img alt="prettier-badge" src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square" /></a>
+    <img alt="prettier-badge" src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square&logo=prettier" /></a>
 </p>
 
 # Smores React

package/dist/Table/Table.js

@@ -4,6 +4,8 @@ import { TableHeader } from './components/TableHeader';
 import { TableRow } from './components/TableRow';
 import { StyledCell, StyledTable } from './components/commonComponents';
 import { TableFooter } from './components/TableFooter';
+import { useTheme } from 'styled-components';
+import { resolveToThemeColor } from '../ThemeProvider/utils/colourMap';
 /**
  * A table component that displays data with various features such as expandable rows, striped rows, and fixed headers.
  *
@@ -17,12 +19,14 @@ import { TableFooter } from './components/TableFooter';
  * ## Improvements:
  * - It would be nice if we expandable logic inside this component, e.g the presence of certain props would automatically add this
  */
-export const Table = ({ columns, data, fixedHeader = true, hasKeyline = false, expandable, subTable, subRows, headerHeight, headerColor = 'mascarpone', rowColor = 'custard', footer, stripedColor, rowBorderColor = 'oatmeal', rowActions, clickableRow, rowPadding, columnPadding, noDataContent, roundedTable, hideTableHeader = false, }) => {
+export const Table = ({ columns, data, fixedHeader = true, hasKeyline = false, expandable, subTable, subRows, headerHeight, headerColor = 'color.surface.base.200', rowColor = 'color.surface.base.300', footer, stripedColor, rowBorderColor = 'color.illustration.neutral.300', rowActions, clickableRow, rowPadding, columnPadding, noDataContent, roundedTable, hideTableHeader = false, }) => {
+    const theme = useTheme();
+    const resolvedHeaderColor = resolveToThemeColor(headerColor, theme);
     const showActionsCell = expandable ?? rowActions;
     const expandSubProp = showActionsCell ? columns.length + 1 : columns.length;
     return (React.createElement(StyledTable, { "$roundedTable": roundedTable },
         !hideTableHeader && (React.createElement("thead", null,
-            React.createElement(TableHeader, { columns: columns, fixedHeader: fixedHeader, headerHeight: headerHeight, subTable: subTable, headerColor: headerColor, rowActions: rowActions, columnPadding: columnPadding, expandable: expandable, hasKeyline: hasKeyline }))),
+            React.createElement(TableHeader, { columns: columns, fixedHeader: fixedHeader, headerHeight: headerHeight, subTable: subTable, headerColor: resolvedHeaderColor, rowActions: rowActions, columnPadding: columnPadding, expandable: expandable, hasKeyline: hasKeyline }))),
         React.createElement("tbody", null,
             data.length === 0 && (React.createElement("tr", null,
                 React.createElement(StyledCell, { colSpan: expandSubProp, "$rowPadding": rowPadding, "$columnPadding": columnPadding }, noDataContent ?? React.createElement(Text, { align: "center" }, "No available data")))),

package/dist/Table/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../src/Table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAA;AAEvE,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAEtD;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,CAAqC,EACxD,OAAO,EACP,IAAI,EACJ,WAAW,GAAG,IAAI,EAClB,UAAU,GAAG,KAAK,EAClB,UAAU,EACV,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,WAAW,GAAG,YAAY,EAC1B,QAAQ,GAAG,SAAS,EACpB,MAAM,EACN,YAAY,EACZ,cAAc,GAAG,SAAS,EAC1B,UAAU,EACV,YAAY,EACZ,UAAU,EACV,aAAa,EACb,aAAa,EACb,YAAY,EACZ,eAAe,GAAG,KAAK,GACN,EAAE,EAAE;IACrB,MAAM,eAAe,GAAG,UAAU,IAAI,UAAU,CAAA;IAChD,MAAM,aAAa,GAAG,eAAe,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAA;IAC3E,OAAO,CACL,oBAAC,WAAW,qBAAgB,YAAY;QACrC,CAAC,eAAe,IAAI,CACnB;YACE,oBAAC,WAAW,IACV,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,EAC5B,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,GACtB,CACI,CACT;QACD;YACG,IAAI,CAAC,MAAM,KAAK,CAAC,IAAI,CACpB;gBACE,oBAAC,UAAU,IACT,OAAO,EAAE,aAAa,iBACT,UAAU,oBACP,aAAa,IAE5B,aAAa,IAAI,oBAAC,IAAI,IAAC,KAAK,EAAC,QAAQ,wBAAyB,CACpD,CACV,CACN;YACA,IAAI,CAAC,MAAM,KAAK,CAAC,IAAI,CACpB;gBACG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,QAAQ,EAAE,EAAE,CAAC,CAC3B,oBAAC,QAAQ,IACP,GAAG,EAAE,QAAQ,EACb,OAAO,EAAE,GAAG,EACZ,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,EACtB,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,cAAc,EAC9B,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,EAC5B,UAAU,EAAE,UAAU,EACtB,YAAY,EAAE,YAAY,EAC1B,UAAU,EACR,OAAO,CAAC,YAAY,CAAC,IAAI,QAAQ,KAAK,IAAI,CAAC,MAAM,GAAG,CAAC,GAEvD,CACH,CAAC;gBAED,MAAM,IAAI,CACT,oBAAC,WAAW,IAAC,WAAW,EAAE,OAAO,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,GAAI,CAC7D,CACA,CACJ,CACK,CACI,CACf,CAAA;AACH,CAAC,CAAA","sourcesContent":["import React from 'react'\nimport { Text } from '../Text'\nimport { TableHeader } from './components/TableHeader'\nimport { TableRow } from './components/TableRow'\nimport { StyledCell, StyledTable } from './components/commonComponents'\nimport { TableProps } from './types'\nimport { TableFooter } from './components/TableFooter'\n\n/**\n * A table component that displays data with various features such as expandable rows, striped rows, and fixed headers.\n *\n * ## Caveats:\n * - `subRows` should always have the same columns as the Parent table\n * - `stripedColor` wont be applied to `subRows` or `subTables`\n * - `rowActions` will always need an `onClick`, this will be automatically passed onto the `ReactNode` you place & will be selectable\n * - Rows will scale depending on the cell content size\n * - Using `clickableRow` with clickable cells, ensure you use `e.stopPropagation` in your cells `onClick`\n *\n * ## Improvements:\n * - It would be nice if we expandable logic inside this component, e.g the presence of certain props would automatically add this\n */\nexport const Table = <T extends object, K extends object>({\n  columns,\n  data,\n  fixedHeader = true,\n  hasKeyline = false,\n  expandable,\n  subTable,\n  subRows,\n  headerHeight,\n  headerColor = 'mascarpone',\n  rowColor = 'custard',\n  footer,\n  stripedColor,\n  rowBorderColor = 'oatmeal',\n  rowActions,\n  clickableRow,\n  rowPadding,\n  columnPadding,\n  noDataContent,\n  roundedTable,\n  hideTableHeader = false,\n}: TableProps<T, K>) => {\n  const showActionsCell = expandable ?? rowActions\n  const expandSubProp = showActionsCell ? columns.length + 1 : columns.length\n  return (\n    <StyledTable $roundedTable={roundedTable}>\n      {!hideTableHeader && (\n        <thead>\n          <TableHeader\n            columns={columns}\n            fixedHeader={fixedHeader}\n            headerHeight={headerHeight}\n            subTable={subTable}\n            headerColor={headerColor}\n            rowActions={rowActions}\n            columnPadding={columnPadding}\n            expandable={expandable}\n            hasKeyline={hasKeyline}\n          />\n        </thead>\n      )}\n      <tbody>\n        {data.length === 0 && (\n          <tr>\n            <StyledCell\n              colSpan={expandSubProp}\n              $rowPadding={rowPadding}\n              $columnPadding={columnPadding}\n            >\n              {noDataContent ?? <Text align=\"center\">No available data</Text>}\n            </StyledCell>\n          </tr>\n        )}\n        {data.length !== 0 && (\n          <>\n            {data.map((row, rowIndex) => (\n              <TableRow\n                key={rowIndex}\n                rowData={row}\n                rowIndex={rowIndex}\n                columns={columns}\n                rowActions={rowActions}\n                stripedColor={stripedColor}\n                subTable={subTable}\n                subRows={subRows}\n                rowColor={rowColor}\n                rowBorderColor={rowBorderColor}\n                rowPadding={rowPadding}\n                columnPadding={columnPadding}\n                expandable={expandable}\n                clickableRow={clickableRow}\n                hideBorder={\n                  Boolean(roundedTable) && rowIndex === data.length - 1\n                }\n              />\n            ))}\n\n            {footer && (\n              <TableFooter columnCount={columns.length} footer={footer} />\n            )}\n          </>\n        )}\n      </tbody>\n    </StyledTable>\n  )\n}\n"]}
+{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../src/Table/Table.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react'\nimport { Text } from '../Text'\nimport { TableHeader } from './components/TableHeader'\nimport { TableRow } from './components/TableRow'\nimport { StyledCell, StyledTable } from './components/commonComponents'\nimport { TableProps } from './types'\nimport { TableFooter } from './components/TableFooter'\nimport { useTheme } from 'styled-components'\nimport { resolveToThemeColor } from '../ThemeProvider/utils/colourMap'\n\n/**\n * A table component that displays data with various features such as expandable rows, striped rows, and fixed headers.\n *\n * ## Caveats:\n * - `subRows` should always have the same columns as the Parent table\n * - `stripedColor` wont be applied to `subRows` or `subTables`\n * - `rowActions` will always need an `onClick`, this will be automatically passed onto the `ReactNode` you place & will be selectable\n * - Rows will scale depending on the cell content size\n * - Using `clickableRow` with clickable cells, ensure you use `e.stopPropagation` in your cells `onClick`\n *\n * ## Improvements:\n * - It would be nice if we expandable logic inside this component, e.g the presence of certain props would automatically add this\n */\nexport const Table = <T extends object, K extends object>({\n  columns,\n  data,\n  fixedHeader = true,\n  hasKeyline = false,\n  expandable,\n  subTable,\n  subRows,\n  headerHeight,\n  headerColor = 'color.surface.base.200',\n  rowColor = 'color.surface.base.300',\n  footer,\n  stripedColor,\n  rowBorderColor = 'color.illustration.neutral.300',\n  rowActions,\n  clickableRow,\n  rowPadding,\n  columnPadding,\n  noDataContent,\n  roundedTable,\n  hideTableHeader = false,\n}: TableProps<T, K>) => {\n  const theme = useTheme()\n\n  const resolvedHeaderColor = resolveToThemeColor(headerColor, theme)\n\n  const showActionsCell = expandable ?? rowActions\n  const expandSubProp = showActionsCell ? columns.length + 1 : columns.length\n  return (\n    <StyledTable $roundedTable={roundedTable}>\n      {!hideTableHeader && (\n        <thead>\n          <TableHeader\n            columns={columns}\n            fixedHeader={fixedHeader}\n            headerHeight={headerHeight}\n            subTable={subTable}\n            headerColor={resolvedHeaderColor}\n            rowActions={rowActions}\n            columnPadding={columnPadding}\n            expandable={expandable}\n            hasKeyline={hasKeyline}\n          />\n        </thead>\n      )}\n      <tbody>\n        {data.length === 0 && (\n          <tr>\n            <StyledCell\n              colSpan={expandSubProp}\n              $rowPadding={rowPadding}\n              $columnPadding={columnPadding}\n            >\n              {noDataContent ?? <Text align=\"center\">No available data</Text>}\n            </StyledCell>\n          </tr>\n        )}\n        {data.length !== 0 && (\n          <>\n            {data.map((row, rowIndex) => (\n              <TableRow\n                key={rowIndex}\n                rowData={row}\n                rowIndex={rowIndex}\n                columns={columns}\n                rowActions={rowActions}\n                stripedColor={stripedColor}\n                subTable={subTable}\n                subRows={subRows}\n                rowColor={rowColor}\n                rowBorderColor={rowBorderColor}\n                rowPadding={rowPadding}\n                columnPadding={columnPadding}\n                expandable={expandable}\n                clickableRow={clickableRow}\n                hideBorder={\n                  Boolean(roundedTable) && rowIndex === data.length - 1\n                }\n              />\n            ))}\n\n            {footer && (\n              <TableFooter columnCount={columns.length} footer={footer} />\n            )}\n          </>\n        )}\n      </tbody>\n    </StyledTable>\n  )\n}\n"]}

package/dist/Table/components/RowActions.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled, { useTheme } from 'styled-components';
 import { Box } from '../../Box';
 import { Button } from '../../Button';
 import { IconStrict } from '../../IconStrict';
@@ -7,12 +7,17 @@ import { Tooltip } from '../../Tooltip';
 import { focusOutlineStyle } from '../../utils/focusOutline';
 import { isReactElement } from '../../utils/isReactElement';
 import { StyledCell } from './commonComponents';
+import { resolveToThemeColor } from '../../ThemeProvider/utils/colourMap';
 export const RowActions = ({ rowData, rowActions, isExpanded, toggleExpansion, expandable, canExpandRow, }) => {
     const handleAction = async (e, action) => {
         e.stopPropagation();
         await action(rowData);
     };
-    return (React.createElement(StyledCell, { "$stickyCell": Boolean(rowActions) || Boolean(expandable), "$rowActionsBgColor": rowActions?.bgColor },
+    const theme = useTheme();
+    const resolvedRowActionBgColor = rowActions?.bgColor
+        ? resolveToThemeColor(rowActions.bgColor, theme)
+        : undefined;
+    return (React.createElement(StyledCell, { "$stickyCell": Boolean(rowActions) || Boolean(expandable), "$rowActionsBgColor": resolvedRowActionBgColor },
         React.createElement(Box, { flex: true, alignItems: "center", justifyContent: "flex-end" },
             rowActions?.actions?.map((action, actionIndex) => {
                 if (!action.showCondition || action.showCondition(rowData)) {
@@ -37,7 +42,9 @@ export const RowActions = ({ rowData, rowActions, isExpanded, toggleExpansion, e
             canExpandRow && (React.createElement(CaretIcon, { render: "caret", handleClick: (e) => {
                     e.stopPropagation();
                     toggleExpansion();
-                }, size: 24, "$isOpen": isExpanded, iconColor: isExpanded ? 'cream' : 'liquorice', backgroundColor: isExpanded ? 'liquorice' : 'oatmeal' })))));
+                }, size: 24, "$isOpen": isExpanded, iconColor: isExpanded ? 'color.surface.base.000' : 'color.icon.base', backgroundColor: isExpanded
+                    ? 'color.surface.base.900'
+                    : 'color.illustration.neutral.300' })))));
 };
 const Wrapper = styled(Box) `
   white-space: nowrap;

package/dist/Table/components/RowActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"RowActions.js","sourceRoot":"","sources":["../../../src/Table/components/RowActions.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { FormEvent } from 'react'\nimport styled from 'styled-components'\nimport { Box } from '../../Box'\nimport { Button } from '../../Button'\nimport { IconStrict } from '../../IconStrict'\nimport { Tooltip } from '../../Tooltip'\nimport { focusOutlineStyle } from '../../utils/focusOutline'\nimport { isReactElement } from '../../utils/isReactElement'\nimport { RowActionsProps } from '../types'\nimport { StyledCell } from './commonComponents'\n\nexport const RowActions = <T extends object>({\n  rowData,\n  rowActions,\n  isExpanded,\n  toggleExpansion,\n  expandable,\n  canExpandRow,\n}: RowActionsProps<T>) => {\n  const handleAction = async (\n    e: MouseEvent | FormEvent<HTMLButtonElement>,\n    action: (rowData: T) => void | Promise<void>,\n  ) => {\n    e.stopPropagation()\n    await action(rowData)\n  }\n\n  return (\n    <StyledCell\n      $stickyCell={Boolean(rowActions) || Boolean(expandable)}\n      $rowActionsBgColor={rowActions?.bgColor}\n    >\n      <Box flex alignItems=\"center\" justifyContent=\"flex-end\">\n        {rowActions?.actions?.map((action, actionIndex) => {\n          if (!action.showCondition || action.showCondition(rowData)) {\n            return (\n              <Wrapper flex key={actionIndex}>\n                {'element' in action &&\n                  isReactElement(action.element) &&\n                  React.cloneElement(action.element, {\n                    onClick: async (e: MouseEvent) => {\n                      await handleAction(e, action.onClick)\n                    },\n                    tabIndex: 0,\n                    className: 'reactElementRowAction',\n                  })}\n                {!('element' in action) && action.genericButton && (\n                  <Button\n                    {...action.genericButton}\n                    handleClick={(e) => void handleAction(e, action.onClick)}\n                  >\n                    {action.genericButton.children}\n                  </Button>\n                )}\n                {!('element' in action) &&\n                  action.iconButton &&\n                  (action.iconButton?.tooltipText ? (\n                    <Tooltip\n                      content={action.iconButton.tooltipText}\n                      position={'bottom'}\n                      variant=\"bubblegum\"\n                    >\n                      <IconStrict\n                        {...action.iconButton}\n                        handleClick={(e) =>\n                          void handleAction(e, action.onClick)\n                        }\n                      />\n                    </Tooltip>\n                  ) : (\n                    <IconStrict\n                      {...action.iconButton}\n                      handleClick={(e) => void handleAction(e, action.onClick)}\n                    />\n                  ))}\n              </Wrapper>\n            )\n          }\n          return null\n        })}\n        {canExpandRow && (\n          <CaretIcon\n            render=\"caret\"\n            handleClick={(e) => {\n              e.stopPropagation()\n              toggleExpansion()\n            }}\n            size={24}\n            $isOpen={isExpanded}\n            iconColor={isExpanded ? 'cream' : 'liquorice'}\n            backgroundColor={isExpanded ? 'liquorice' : 'oatmeal'}\n          />\n        )}\n      </Box>\n    </StyledCell>\n  )\n}\n\nconst Wrapper = styled(Box)`\n  white-space: nowrap;\n  margin-right: 8px;\n\n  &:last-child {\n    margin-right: 0px;\n  }\n\n  .reactElementRowAction {\n    cursor: pointer;\n    ${focusOutlineStyle}\n  }\n`\n\nconst CaretIcon = styled(IconStrict)<{ $isOpen?: boolean }>(\n  ({ $isOpen }) => `\n    transform: ${$isOpen ? 'rotate(180deg)' : 'rotate(0deg)'};\n    transition: transform 0.3s ease;\n  `,\n)\n"]}
+{"version":3,"file":"RowActions.js","sourceRoot":"","sources":["../../../src/Table/components/RowActions.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { FormEvent } from 'react'\nimport styled, { useTheme } from 'styled-components'\nimport { Box } from '../../Box'\nimport { Button } from '../../Button'\nimport { IconStrict } from '../../IconStrict'\nimport { Tooltip } from '../../Tooltip'\nimport { focusOutlineStyle } from '../../utils/focusOutline'\nimport { isReactElement } from '../../utils/isReactElement'\nimport { RowActionsProps } from '../types'\nimport { StyledCell } from './commonComponents'\nimport { resolveToThemeColor } from '../../ThemeProvider/utils/colourMap'\n\nexport const RowActions = <T extends object>({\n  rowData,\n  rowActions,\n  isExpanded,\n  toggleExpansion,\n  expandable,\n  canExpandRow,\n}: RowActionsProps<T>) => {\n  const handleAction = async (\n    e: MouseEvent | FormEvent<HTMLButtonElement>,\n    action: (rowData: T) => void | Promise<void>,\n  ) => {\n    e.stopPropagation()\n    await action(rowData)\n  }\n\n  const theme = useTheme()\n\n  const resolvedRowActionBgColor = rowActions?.bgColor\n    ? resolveToThemeColor(rowActions.bgColor, theme)\n    : undefined\n\n  return (\n    <StyledCell\n      $stickyCell={Boolean(rowActions) || Boolean(expandable)}\n      $rowActionsBgColor={resolvedRowActionBgColor}\n    >\n      <Box flex alignItems=\"center\" justifyContent=\"flex-end\">\n        {rowActions?.actions?.map((action, actionIndex) => {\n          if (!action.showCondition || action.showCondition(rowData)) {\n            return (\n              <Wrapper flex key={actionIndex}>\n                {'element' in action &&\n                  isReactElement(action.element) &&\n                  React.cloneElement(action.element, {\n                    onClick: async (e: MouseEvent) => {\n                      await handleAction(e, action.onClick)\n                    },\n                    tabIndex: 0,\n                    className: 'reactElementRowAction',\n                  })}\n                {!('element' in action) && action.genericButton && (\n                  <Button\n                    {...action.genericButton}\n                    handleClick={(e) => void handleAction(e, action.onClick)}\n                  >\n                    {action.genericButton.children}\n                  </Button>\n                )}\n                {!('element' in action) &&\n                  action.iconButton &&\n                  (action.iconButton?.tooltipText ? (\n                    <Tooltip\n                      content={action.iconButton.tooltipText}\n                      position={'bottom'}\n                      variant=\"bubblegum\"\n                    >\n                      <IconStrict\n                        {...action.iconButton}\n                        handleClick={(e) =>\n                          void handleAction(e, action.onClick)\n                        }\n                      />\n                    </Tooltip>\n                  ) : (\n                    <IconStrict\n                      {...action.iconButton}\n                      handleClick={(e) => void handleAction(e, action.onClick)}\n                    />\n                  ))}\n              </Wrapper>\n            )\n          }\n          return null\n        })}\n        {canExpandRow && (\n          <CaretIcon\n            render=\"caret\"\n            handleClick={(e) => {\n              e.stopPropagation()\n              toggleExpansion()\n            }}\n            size={24}\n            $isOpen={isExpanded}\n            iconColor={\n              isExpanded ? 'color.surface.base.000' : 'color.icon.base'\n            }\n            backgroundColor={\n              isExpanded\n                ? 'color.surface.base.900'\n                : 'color.illustration.neutral.300'\n            }\n          />\n        )}\n      </Box>\n    </StyledCell>\n  )\n}\n\nconst Wrapper = styled(Box)`\n  white-space: nowrap;\n  margin-right: 8px;\n\n  &:last-child {\n    margin-right: 0px;\n  }\n\n  .reactElementRowAction {\n    cursor: pointer;\n    ${focusOutlineStyle}\n  }\n`\n\nconst CaretIcon = styled(IconStrict)<{ $isOpen?: boolean }>(\n  ({ $isOpen }) => `\n    transform: ${$isOpen ? 'rotate(180deg)' : 'rotate(0deg)'};\n    transition: transform 0.3s ease;\n  `,\n)\n"]}

package/dist/Table/components/TableFooter.js

@@ -4,7 +4,7 @@ export function TableFooter({ footer, columnCount, }) {
     if ('element' in footer) {
         return React.createElement("td", { colSpan: columnCount }, footer.element);
     }
-    const { rowColor = 'custard', data, columns, ...restFooter } = footer;
+    const { rowColor = 'color.surface.base.300', data, columns, ...restFooter } = footer;
     return (React.createElement(TableRow, { key: "footer", rowIndex: columns.length - 1, rowColor: rowColor, rowData: data, columns: columns, ...restFooter }));
 }
 //# sourceMappingURL=TableFooter.js.map

package/dist/Table/components/TableFooter.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableFooter.js","sourceRoot":"","sources":["../../../src/Table/components/TableFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAOrC,MAAM,UAAU,WAAW,CAAmB,EAC5C,MAAM,EACN,WAAW,GACF;IACT,IAAI,SAAS,IAAI,MAAM,EAAE,CAAC;QACxB,OAAO,4BAAI,OAAO,EAAE,WAAW,IAAG,MAAM,CAAC,OAAO,CAAM,CAAA;IACxD,CAAC;IAED,MAAM,EAAE,QAAQ,GAAG,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,UAAU,EAAE,GAAG,MAAM,CAAA;IAErE,OAAO,CACL,oBAAC,QAAQ,IACP,GAAG,EAAC,QAAQ,EACZ,QAAQ,EAAE,OAAO,CAAC,MAAM,GAAG,CAAC,EAC5B,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,IAAI,EACb,OAAO,EAAE,OAAO,KACZ,UAAU,GACd,CACH,CAAA;AACH,CAAC","sourcesContent":["import React from 'react'\nimport type { TableFooter } from '../types'\nimport { TableRow } from './TableRow'\n\ntype Props<K> = {\n  footer: TableFooter<K>\n  columnCount: number\n}\n\nexport function TableFooter<K extends object>({\n  footer,\n  columnCount,\n}: Props<K>) {\n  if ('element' in footer) {\n    return <td colSpan={columnCount}>{footer.element}</td>\n  }\n\n  const { rowColor = 'custard', data, columns, ...restFooter } = footer\n\n  return (\n    <TableRow\n      key=\"footer\"\n      rowIndex={columns.length - 1}\n      rowColor={rowColor}\n      rowData={data}\n      columns={columns}\n      {...restFooter}\n    />\n  )\n}\n"]}
+{"version":3,"file":"TableFooter.js","sourceRoot":"","sources":["../../../src/Table/components/TableFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAOrC,MAAM,UAAU,WAAW,CAAmB,EAC5C,MAAM,EACN,WAAW,GACF;IACT,IAAI,SAAS,IAAI,MAAM,EAAE,CAAC;QACxB,OAAO,4BAAI,OAAO,EAAE,WAAW,IAAG,MAAM,CAAC,OAAO,CAAM,CAAA;IACxD,CAAC;IAED,MAAM,EACJ,QAAQ,GAAG,wBAAwB,EACnC,IAAI,EACJ,OAAO,EACP,GAAG,UAAU,EACd,GAAG,MAAM,CAAA;IAEV,OAAO,CACL,oBAAC,QAAQ,IACP,GAAG,EAAC,QAAQ,EACZ,QAAQ,EAAE,OAAO,CAAC,MAAM,GAAG,CAAC,EAC5B,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,IAAI,EACb,OAAO,EAAE,OAAO,KACZ,UAAU,GACd,CACH,CAAA;AACH,CAAC","sourcesContent":["import React from 'react'\nimport type { TableFooter } from '../types'\nimport { TableRow } from './TableRow'\n\ntype Props<K> = {\n  footer: TableFooter<K>\n  columnCount: number\n}\n\nexport function TableFooter<K extends object>({\n  footer,\n  columnCount,\n}: Props<K>) {\n  if ('element' in footer) {\n    return <td colSpan={columnCount}>{footer.element}</td>\n  }\n\n  const {\n    rowColor = 'color.surface.base.300',\n    data,\n    columns,\n    ...restFooter\n  } = footer\n\n  return (\n    <TableRow\n      key=\"footer\"\n      rowIndex={columns.length - 1}\n      rowColor={rowColor}\n      rowData={data}\n      columns={columns}\n      {...restFooter}\n    />\n  )\n}\n"]}

package/dist/Table/components/TableRow.js

@@ -3,8 +3,20 @@ import { isReactElement } from '../../utils/isReactElement';
 import { isMappedReactElement } from '../helpers';
 import { RowActions } from './RowActions';
 import { StyledCell, StyledRow, StyledSubTableCell } from './commonComponents';
+import { useTheme } from 'styled-components';
+import { resolveToThemeColor } from '../../ThemeProvider/utils/colourMap';
 export const TableRow = ({ rowData, rowIndex, columns, subRows, subTable, stripedColor, rowActions, rowColor, rowBorderColor, rowPadding, columnPadding, showActions, expandable, clickableRow, hideBorder, }) => {
+    const theme = useTheme();
     const [expandedRows, setExpandedRows] = useState([]);
+    const resolvedRowColor = rowColor
+        ? resolveToThemeColor(rowColor, theme)
+        : undefined;
+    const resolvedStripedColor = stripedColor
+        ? resolveToThemeColor(stripedColor, theme)
+        : undefined;
+    const resolvedRowBorderColor = rowBorderColor
+        ? resolveToThemeColor(rowBorderColor, theme)
+        : undefined;
     const toggleRowExpansion = (rowIndex) => {
         setExpandedRows((prevState) => prevState.includes(rowIndex)
             ? prevState.filter((index) => index !== rowIndex)
@@ -16,12 +28,15 @@ export const TableRow = ({ rowData, rowIndex, columns, subRows, subTable, stripe
     const subRowsData = subRows?.rows(rowData);
     const subTableData = subTable?.table(rowData);
     const subPadding = subTable?.padding ?? subRows?.padding;
-    const subBgColor = subTable?.bgColor ?? subRows?.bgColor;
+    const subBgColor = subTable?.bgColor || subRows?.bgColor;
+    const resolvedSubBgColor = subBgColor
+        ? resolveToThemeColor(subBgColor, theme)
+        : undefined;
     const showActionsCell = expandable ?? rowActions;
     const expandSubProp = showActionsCell ? columns.length + 1 : columns.length;
     const isExpandedRow = expandedRows.includes(rowIndex);
     return (React.createElement(React.Fragment, null,
-        React.createElement(StyledRow, { "$stripedColor": stripedColor, "$rowColor": rowColor, "$rowBorderColor": rowBorderColor, "$clickableRow": !!clickableRow, "$noRowBorderColor": isExpandedRow || hideBorder, onClick: () => clickableRow && clickableRow(rowData), tabIndex: clickableRow && 0 },
+        React.createElement(StyledRow, { "$stripedColor": resolvedStripedColor, "$rowColor": resolvedRowColor, "$rowBorderColor": resolvedRowBorderColor, "$clickableRow": !!clickableRow, "$noRowBorderColor": isExpandedRow || hideBorder, onClick: () => clickableRow?.(rowData), tabIndex: clickableRow && 0 },
             columns.map((column, columnIndex) => {
                 let cellContent;
                 if (column.cell) {
@@ -37,6 +52,6 @@ export const TableRow = ({ rowData, rowIndex, columns, subRows, subTable, stripe
             subRowsData &&
                 isMappedReactElement(subRowsData) &&
                 subRowsData.map((row) => cloneElement(row, { rowPadding, showActions: showActionsCell })),
-            subTableData && (React.createElement(StyledSubTableCell, { "$rowBorderColor": rowBorderColor, colSpan: expandSubProp, "$bgColor": subBgColor, "$padding": subPadding }, cloneElement(subTableData, { rowPadding, columnPadding })))))));
+            subTableData && (React.createElement(StyledSubTableCell, { "$rowBorderColor": resolvedRowBorderColor, colSpan: expandSubProp, "$bgColor": resolvedSubBgColor, "$padding": subPadding }, cloneElement(subTableData, { rowPadding, columnPadding })))))));
 };
 //# sourceMappingURL=TableRow.js.map

package/dist/Table/components/TableRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableRow.js","sourceRoot":"","sources":["../../../src/Table/components/TableRow.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { cloneElement, ReactNode, useState } from 'react'\nimport { isReactElement } from '../../utils/isReactElement'\nimport { isMappedReactElement } from '../helpers'\nimport { TableRowProps } from '../types'\nimport { RowActions } from './RowActions'\nimport { StyledCell, StyledRow, StyledSubTableCell } from './commonComponents'\n\nexport const TableRow = <T extends object>({\n  rowData,\n  rowIndex,\n  columns,\n  subRows,\n  subTable,\n  stripedColor,\n  rowActions,\n  rowColor,\n  rowBorderColor,\n  rowPadding,\n  columnPadding,\n  showActions,\n  expandable,\n  clickableRow,\n  hideBorder,\n}: TableRowProps<T>) => {\n  const [expandedRows, setExpandedRows] = useState<number[]>([])\n\n  const toggleRowExpansion = (rowIndex: number) => {\n    setExpandedRows((prevState) =>\n      prevState.includes(rowIndex)\n        ? prevState.filter((index) => index !== rowIndex)\n        : [...prevState, rowIndex],\n    )\n  }\n\n  const canExpandRow =\n    expandable !== undefined\n      ? expandable?.(rowData)\n      : Boolean(subTable?.table ?? subRows?.rows)\n\n  const subRowsData = subRows?.rows(rowData)\n  const subTableData = subTable?.table(rowData)\n\n  const subPadding = subTable?.padding ?? subRows?.padding\n  const subBgColor = subTable?.bgColor ?? subRows?.bgColor\n\n  const showActionsCell = expandable ?? rowActions\n  const expandSubProp = showActionsCell ? columns.length + 1 : columns.length\n\n  const isExpandedRow = expandedRows.includes(rowIndex)\n\n  return (\n    <>\n      <StyledRow\n        $stripedColor={stripedColor}\n        $rowColor={rowColor}\n        $rowBorderColor={rowBorderColor}\n        $clickableRow={!!clickableRow}\n        $noRowBorderColor={isExpandedRow || hideBorder}\n        onClick={() => clickableRow && clickableRow(rowData)}\n        tabIndex={clickableRow && 0}\n      >\n        {columns.map((column, columnIndex) => {\n          let cellContent: ReactNode\n          if (column.cell) {\n            cellContent = column.cell(rowData, rowIndex, column, rowIndex)\n          }\n\n          return (\n            <StyledCell\n              key={columnIndex}\n              $rowPadding={rowPadding}\n              $columnPadding={columnPadding}\n              $minWidth={column.minWidth}\n              $maxWidth={column.maxWidth}\n              $noWrapContent={column.noWrapContent}\n              $truncateContent={column.truncateContent}\n              $hideOverflow={column.hideOverflow}\n            >\n              {cellContent}\n            </StyledCell>\n          )\n        })}\n\n        {(showActionsCell ?? showActions) && (\n          <RowActions\n            canExpandRow={canExpandRow}\n            rowActions={rowActions}\n            rowData={rowData}\n            isExpanded={isExpandedRow}\n            toggleExpansion={() => toggleRowExpansion(rowIndex)}\n          />\n        )}\n      </StyledRow>\n      {/**\n       * Rendering subTable and/or subRows\n       *\n       * This could be extracted out and cleaned up\n       * this section is for expanded rows only\n       * Items rendered here wont show unless expanded\n       */}\n\n      {isExpandedRow && (\n        <>\n          {subRowsData &&\n            isReactElement(subRowsData) &&\n            cloneElement(subRowsData, { rowPadding, columnPadding })}\n\n          {subRowsData &&\n            isMappedReactElement(subRowsData) &&\n            subRowsData.map((row) =>\n              cloneElement(row, { rowPadding, showActions: showActionsCell }),\n            )}\n\n          {subTableData && (\n            <StyledSubTableCell\n              $rowBorderColor={rowBorderColor}\n              colSpan={expandSubProp}\n              $bgColor={subBgColor}\n              $padding={subPadding}\n            >\n              {cloneElement(subTableData, { rowPadding, columnPadding })}\n            </StyledSubTableCell>\n          )}\n        </>\n      )}\n    </>\n  )\n}\n"]}
+{"version":3,"file":"TableRow.js","sourceRoot":"","sources":["../../../src/Table/components/TableRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,YAAY,EAAa,QAAQ,EAAE,MAAM,OAAO,CAAA;AAChE,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAA;AAC3D,OAAO,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAA;AAEjD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAA;AAC9E,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAA;AAEzE,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAmB,EACzC,OAAO,EACP,QAAQ,EACR,OAAO,EACP,OAAO,EACP,QAAQ,EACR,YAAY,EACZ,UAAU,EACV,QAAQ,EACR,cAAc,EACd,UAAU,EACV,aAAa,EACb,WAAW,EACX,UAAU,EACV,YAAY,EACZ,UAAU,GACO,EAAE,EAAE;IACrB,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAW,EAAE,CAAC,CAAA;IAE9D,MAAM,gBAAgB,GAAG,QAAQ;QAC/B,CAAC,CAAC,mBAAmB,CAAC,QAAQ,EAAE,KAAK,CAAC;QACtC,CAAC,CAAC,SAAS,CAAA;IACb,MAAM,oBAAoB,GAAG,YAAY;QACvC,CAAC,CAAC,mBAAmB,CAAC,YAAY,EAAE,KAAK,CAAC;QAC1C,CAAC,CAAC,SAAS,CAAA;IACb,MAAM,sBAAsB,GAAG,cAAc;QAC3C,CAAC,CAAC,mBAAmB,CAAC,cAAc,EAAE,KAAK,CAAC;QAC5C,CAAC,CAAC,SAAS,CAAA;IAEb,MAAM,kBAAkB,GAAG,CAAC,QAAgB,EAAE,EAAE;QAC9C,eAAe,CAAC,CAAC,SAAS,EAAE,EAAE,CAC5B,SAAS,CAAC,QAAQ,CAAC,QAAQ,CAAC;YAC1B,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,KAAK,QAAQ,CAAC;YACjD,CAAC,CAAC,CAAC,GAAG,SAAS,EAAE,QAAQ,CAAC,CAC7B,CAAA;IACH,CAAC,CAAA;IAED,MAAM,YAAY,GAChB,UAAU,KAAK,SAAS;QACtB,CAAC,CAAC,UAAU,EAAE,CAAC,OAAO,CAAC;QACvB,CAAC,CAAC,OAAO,CAAC,QAAQ,EAAE,KAAK,IAAI,OAAO,EAAE,IAAI,CAAC,CAAA;IAE/C,MAAM,WAAW,GAAG,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,CAAA;IAC1C,MAAM,YAAY,GAAG,QAAQ,EAAE,KAAK,CAAC,OAAO,CAAC,CAAA;IAE7C,MAAM,UAAU,GAAG,QAAQ,EAAE,OAAO,IAAI,OAAO,EAAE,OAAO,CAAA;IACxD,MAAM,UAAU,GAAG,QAAQ,EAAE,OAAO,IAAI,OAAO,EAAE,OAAO,CAAA;IACxD,MAAM,kBAAkB,GAAG,UAAU;QACnC,CAAC,CAAC,mBAAmB,CAAC,UAAU,EAAE,KAAK,CAAC;QACxC,CAAC,CAAC,SAAS,CAAA;IAEb,MAAM,eAAe,GAAG,UAAU,IAAI,UAAU,CAAA;IAChD,MAAM,aAAa,GAAG,eAAe,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAA;IAE3E,MAAM,aAAa,GAAG,YAAY,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAA;IAErD,OAAO,CACL;QACE,oBAAC,SAAS,qBACO,oBAAoB,eACxB,gBAAgB,qBACV,sBAAsB,mBACxB,CAAC,CAAC,YAAY,uBACV,aAAa,IAAI,UAAU,EAC9C,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,EAAE,CAAC,OAAO,CAAC,EACtC,QAAQ,EAAE,YAAY,IAAI,CAAC;YAE1B,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,WAAW,EAAE,EAAE;gBACnC,IAAI,WAAsB,CAAA;gBAC1B,IAAI,MAAM,CAAC,IAAI,EAAE,CAAC;oBAChB,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAA;gBAChE,CAAC;gBAED,OAAO,CACL,oBAAC,UAAU,IACT,GAAG,EAAE,WAAW,iBACH,UAAU,oBACP,aAAa,eAClB,MAAM,CAAC,QAAQ,eACf,MAAM,CAAC,QAAQ,oBACV,MAAM,CAAC,aAAa,sBAClB,MAAM,CAAC,eAAe,mBACzB,MAAM,CAAC,YAAY,IAEjC,WAAW,CACD,CACd,CAAA;YACH,CAAC,CAAC;YAED,CAAC,eAAe,IAAI,WAAW,CAAC,IAAI,CACnC,oBAAC,UAAU,IACT,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,aAAa,EACzB,eAAe,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,QAAQ,CAAC,GACnD,CACH,CACS;QASX,aAAa,IAAI,CAChB;YACG,WAAW;gBACV,cAAc,CAAC,WAAW,CAAC;gBAC3B,YAAY,CAAC,WAAW,EAAE,EAAE,UAAU,EAAE,aAAa,EAAE,CAAC;YAEzD,WAAW;gBACV,oBAAoB,CAAC,WAAW,CAAC;gBACjC,WAAW,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CACtB,YAAY,CAAC,GAAG,EAAE,EAAE,UAAU,EAAE,WAAW,EAAE,eAAe,EAAE,CAAC,CAChE;YAEF,YAAY,IAAI,CACf,oBAAC,kBAAkB,uBACA,sBAAsB,EACvC,OAAO,EAAE,aAAa,cACZ,kBAAkB,cAClB,UAAU,IAEnB,YAAY,CAAC,YAAY,EAAE,EAAE,UAAU,EAAE,aAAa,EAAE,CAAC,CACvC,CACtB,CACA,CACJ,CACA,CACJ,CAAA;AACH,CAAC,CAAA","sourcesContent":["import React, { cloneElement, ReactNode, useState } from 'react'\nimport { isReactElement } from '../../utils/isReactElement'\nimport { isMappedReactElement } from '../helpers'\nimport { TableRowProps } from '../types'\nimport { RowActions } from './RowActions'\nimport { StyledCell, StyledRow, StyledSubTableCell } from './commonComponents'\nimport { useTheme } from 'styled-components'\nimport { resolveToThemeColor } from '../../ThemeProvider/utils/colourMap'\n\nexport const TableRow = <T extends object>({\n  rowData,\n  rowIndex,\n  columns,\n  subRows,\n  subTable,\n  stripedColor,\n  rowActions,\n  rowColor,\n  rowBorderColor,\n  rowPadding,\n  columnPadding,\n  showActions,\n  expandable,\n  clickableRow,\n  hideBorder,\n}: TableRowProps<T>) => {\n  const theme = useTheme()\n  const [expandedRows, setExpandedRows] = useState<number[]>([])\n\n  const resolvedRowColor = rowColor\n    ? resolveToThemeColor(rowColor, theme)\n    : undefined\n  const resolvedStripedColor = stripedColor\n    ? resolveToThemeColor(stripedColor, theme)\n    : undefined\n  const resolvedRowBorderColor = rowBorderColor\n    ? resolveToThemeColor(rowBorderColor, theme)\n    : undefined\n\n  const toggleRowExpansion = (rowIndex: number) => {\n    setExpandedRows((prevState) =>\n      prevState.includes(rowIndex)\n        ? prevState.filter((index) => index !== rowIndex)\n        : [...prevState, rowIndex],\n    )\n  }\n\n  const canExpandRow =\n    expandable !== undefined\n      ? expandable?.(rowData)\n      : Boolean(subTable?.table ?? subRows?.rows)\n\n  const subRowsData = subRows?.rows(rowData)\n  const subTableData = subTable?.table(rowData)\n\n  const subPadding = subTable?.padding ?? subRows?.padding\n  const subBgColor = subTable?.bgColor || subRows?.bgColor\n  const resolvedSubBgColor = subBgColor\n    ? resolveToThemeColor(subBgColor, theme)\n    : undefined\n\n  const showActionsCell = expandable ?? rowActions\n  const expandSubProp = showActionsCell ? columns.length + 1 : columns.length\n\n  const isExpandedRow = expandedRows.includes(rowIndex)\n\n  return (\n    <>\n      <StyledRow\n        $stripedColor={resolvedStripedColor}\n        $rowColor={resolvedRowColor}\n        $rowBorderColor={resolvedRowBorderColor}\n        $clickableRow={!!clickableRow}\n        $noRowBorderColor={isExpandedRow || hideBorder}\n        onClick={() => clickableRow?.(rowData)}\n        tabIndex={clickableRow && 0}\n      >\n        {columns.map((column, columnIndex) => {\n          let cellContent: ReactNode\n          if (column.cell) {\n            cellContent = column.cell(rowData, rowIndex, column, rowIndex)\n          }\n\n          return (\n            <StyledCell\n              key={columnIndex}\n              $rowPadding={rowPadding}\n              $columnPadding={columnPadding}\n              $minWidth={column.minWidth}\n              $maxWidth={column.maxWidth}\n              $noWrapContent={column.noWrapContent}\n              $truncateContent={column.truncateContent}\n              $hideOverflow={column.hideOverflow}\n            >\n              {cellContent}\n            </StyledCell>\n          )\n        })}\n\n        {(showActionsCell ?? showActions) && (\n          <RowActions\n            canExpandRow={canExpandRow}\n            rowActions={rowActions}\n            rowData={rowData}\n            isExpanded={isExpandedRow}\n            toggleExpansion={() => toggleRowExpansion(rowIndex)}\n          />\n        )}\n      </StyledRow>\n      {/**\n       * Rendering subTable and/or subRows\n       *\n       * This could be extracted out and cleaned up\n       * this section is for expanded rows only\n       * Items rendered here wont show unless expanded\n       */}\n\n      {isExpandedRow && (\n        <>\n          {subRowsData &&\n            isReactElement(subRowsData) &&\n            cloneElement(subRowsData, { rowPadding, columnPadding })}\n\n          {subRowsData &&\n            isMappedReactElement(subRowsData) &&\n            subRowsData.map((row) =>\n              cloneElement(row, { rowPadding, showActions: showActionsCell }),\n            )}\n\n          {subTableData && (\n            <StyledSubTableCell\n              $rowBorderColor={resolvedRowBorderColor}\n              colSpan={expandSubProp}\n              $bgColor={resolvedSubBgColor}\n              $padding={subPadding}\n            >\n              {cloneElement(subTableData, { rowPadding, columnPadding })}\n            </StyledSubTableCell>\n          )}\n        </>\n      )}\n    </>\n  )\n}\n"]}

package/dist/Table/components/commonComponents.d.ts

@@ -1,5 +1,4 @@
 import { TransientProps } from 'utils/utilTypes';
-import { type Color } from '../../theme';
 import { TableStylesProps, type TableProps } from '../types';
 type StyledTableProps = {
     $roundedTable: TableProps<unknown>['roundedTable'];
@@ -9,9 +8,9 @@ export declare const StyledHeaderCell: import("styled-components/dist/types").IS
 export declare const StyledCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, TransientProps<TableStylesProps>>> & string;
 export declare const StyledRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, TransientProps<TableStylesProps>>> & string;
 type StyledSubTableCellProps = {
-    $bgColor?: Color;
+    $bgColor?: string;
     $padding?: string | undefined;
-    $rowBorderColor?: Color;
+    $rowBorderColor?: string;
 };
 type StyledSubInnerCellProps = {
     $padding?: string | undefined;

package/dist/Table/components/commonComponents.js

@@ -1,7 +1,6 @@
 import { darken } from 'polished';
 import styled, { css } from 'styled-components';
 import { fontStyleMapping } from '../../Text/fontMapping';
-import { theme } from '../../theme';
 import { focusOutlineStyle } from '../../utils/focusOutline';
 const isString = (value) => typeof value === 'string';
 export const StyledTable = styled.table `
@@ -9,7 +8,7 @@ export const StyledTable = styled.table `
   height: 100%;
   border-collapse: collapse;
   overflow: auto;
-  background: ${theme.colors.coconut};
+  background: ${({ theme }) => theme.color.surface.base[100]};
   border-spacing: 30px;
 
   ${({ $roundedTable }) => $roundedTable &&
@@ -19,8 +18,8 @@ export const StyledTable = styled.table `
     `}
 `;
 export const StyledHeaderCell = styled.th `
-  background: ${theme.colors.coconut};
-  border-bottom: ${({ $hasKeyline }) => $hasKeyline ? `1px solid ${theme.colors.liquorice}` : 'none'};
+  background: ${({ theme }) => theme.color.surface.base[100]};
+  border-bottom: ${({ $hasKeyline, theme }) => $hasKeyline ? `1px solid ${theme.color.surface.base[900]}` : 'none'};
   position: ${({ $fixedHeader }) => ($fixedHeader ? 'sticky' : 'auto')};
   top: 0;
   z-index: 2;
@@ -34,7 +33,7 @@ export const StyledHeaderCell = styled.th `
 
   ${({ $headerColor }) => $headerColor &&
     css `
-      background: ${theme.colors[$headerColor]};
+      background: ${$headerColor};
     `}
 
   ${({ $headerHeight }) => $headerHeight &&
@@ -95,39 +94,39 @@ export const StyledCell = styled.td `
 
   ${({ $rowActionsBgColor }) => $rowActionsBgColor &&
     css `
-      background: ${theme.colors[$rowActionsBgColor]};
+      background: ${$rowActionsBgColor};
     `}
 `;
 export const StyledRow = styled.tr `
-  background: ${theme.colors.custard};
+  background: ${({ theme }) => theme.color.surface.base[300]};
 
   ${({ $rowBorderColor, $noRowBorderColor }) => $rowBorderColor &&
     !$noRowBorderColor &&
     css `
-      border-bottom: 1px solid ${theme.colors[$rowBorderColor]};
+      border-bottom: 1px solid ${$rowBorderColor};
     `}
 
   ${({ $rowColor }) => $rowColor &&
     css `
-      background: ${theme.colors[$rowColor]};
+      background: ${$rowColor};
     `}
 
   ${({ $stripedColor }) => $stripedColor &&
     css `
       &:nth-child(even) {
-        background: ${theme.colors[$stripedColor]};
+        background: ${$stripedColor};
       }
     `}
 
-    ${({ $clickableRow, $rowColor }) => $clickableRow &&
+    ${({ $clickableRow, $rowColor, theme }) => $clickableRow &&
     css `
       cursor: pointer;
       &:hover {
-        background: ${darken(0.1, theme.colors[$rowColor ?? 'custard'])};
+        background: ${darken(0.1, $rowColor ?? theme.color.surface.base[300])};
       }
       &:focus-visible {
         ${focusOutlineStyle}
-        background: ${darken(0.1, theme.colors[$rowColor ?? 'custard'])};
+        background: ${darken(0.1, $rowColor ?? theme.color.surface.base[300])};
       }
     `}
 `;
@@ -136,10 +135,10 @@ export const StyledSubTableCell = styled.td `
 
   ${({ $rowBorderColor }) => $rowBorderColor &&
     css `
-      border-bottom: 1px solid ${theme.colors[$rowBorderColor]};
+      border-bottom: 1px solid ${$rowBorderColor};
     `}
 
-  ${({ $bgColor }) => $bgColor && `background-color: ${theme.colors[$bgColor]};`}
+  ${({ $bgColor }) => $bgColor && `background-color: ${$bgColor};`}
 `;
 export const StyledSubInnerCell = styled.div `
   padding: ${({ $padding }) => $padding ?? '12px 0'};

package/dist/Table/components/commonComponents.js.map

@@ -1 +1 @@
-{"version":3,"file":"commonComponents.js","sourceRoot":"","sources":["../../../src/Table/components/commonComponents.tsx"],"names":[],"mappings":"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","sourcesContent":["import { darken } from 'polished'\nimport styled, { css } from 'styled-components'\nimport { TransientProps } from 'utils/utilTypes'\nimport { fontStyleMapping } from '../../Text/fontMapping'\nimport { theme, type Color } from '../../theme'\nimport { focusOutlineStyle } from '../../utils/focusOutline'\nimport { TableStylesProps, type TableProps } from '../types'\n\ntype StyledTableProps = {\n  $roundedTable: TableProps<unknown>['roundedTable']\n}\n\nconst isString = (value: unknown): value is string => typeof value === 'string'\n\nexport const StyledTable = styled.table<StyledTableProps>`\n  width: 100%;\n  height: 100%;\n  border-collapse: collapse;\n  overflow: auto;\n  background: ${theme.colors.coconut};\n  border-spacing: 30px;\n\n  ${({ $roundedTable }) =>\n    $roundedTable &&\n    css`\n      border-radius: ${isString($roundedTable) ? $roundedTable : '16px'};\n      overflow: hidden;\n    `}\n`\n\nexport const StyledHeaderCell = styled.th<TransientProps<TableStylesProps>>`\n  background: ${theme.colors.coconut};\n  border-bottom: ${({ $hasKeyline }) =>\n    $hasKeyline ? `1px solid ${theme.colors.liquorice}` : 'none'};\n  position: ${({ $fixedHeader }) => ($fixedHeader ? 'sticky' : 'auto')};\n  top: 0;\n  z-index: 2;\n  text-align: left;\n  vertical-align: bottom;\n  ${fontStyleMapping.label};\n  padding-left: 8px;\n  padding-right: 8px;\n  padding-top: 8px;\n  padding-bottom: 8px;\n\n  ${({ $headerColor }) =>\n    $headerColor &&\n    css`\n      background: ${theme.colors[$headerColor]};\n    `}\n\n  ${({ $headerHeight }) =>\n    $headerHeight &&\n    css`\n      height: ${$headerHeight};\n    `}\n\n  ${({ $maxWidth }) =>\n    $maxWidth &&\n    css`\n      max-width: ${$maxWidth};\n    `}\n\n  ${({ $minWidth }) =>\n    $minWidth &&\n    css`\n      min-width: ${$minWidth};\n    `}\n    \n  ${({ $columnPadding }) =>\n    $columnPadding &&\n    css`\n      padding-left: ${$columnPadding};\n      padding-right: ${$columnPadding};\n    `};\n`\n\nexport const StyledCell = styled.td<TransientProps<TableStylesProps>>`\n  vertical-align: middle;\n  padding-left: ${({ $columnPadding }) => $columnPadding ?? '8px'};\n  padding-right: ${({ $columnPadding }) => $columnPadding ?? '8px'};\n  padding-top: ${({ $rowPadding }) => $rowPadding ?? '8px'};\n  padding-bottom: ${({ $rowPadding }) => $rowPadding ?? '8px'};\n\n  ${({ $hideOverflow }) =>\n    $hideOverflow &&\n    css`\n      overflow: hidden;\n    `};\n\n  ${({ $noWrapContent }) =>\n    $noWrapContent &&\n    css`\n      white-space: nowrap;\n    `};\n\n  ${({ $truncateContent }) =>\n    $truncateContent &&\n    css`\n      overflow: hidden;\n      white-space: nowrap;\n      text-overflow: ellipsis;\n    `};\n\n  ${({ $stickyCell }) =>\n    $stickyCell &&\n    css`\n      position: sticky;\n      right: 0;\n    `};\n\n  ${({ $maxWidth }) =>\n    $maxWidth &&\n    css`\n      max-width: ${$maxWidth};\n    `}\n\n  ${({ $rowActionsBgColor }) =>\n    $rowActionsBgColor &&\n    css`\n      background: ${theme.colors[$rowActionsBgColor]};\n    `}\n`\n\nexport const StyledRow = styled.tr<TransientProps<TableStylesProps>>`\n  background: ${theme.colors.custard};\n\n  ${({ $rowBorderColor, $noRowBorderColor }) =>\n    $rowBorderColor &&\n    !$noRowBorderColor &&\n    css`\n      border-bottom: 1px solid ${theme.colors[$rowBorderColor]};\n    `}\n\n  ${({ $rowColor }) =>\n    $rowColor &&\n    css`\n      background: ${theme.colors[$rowColor]};\n    `}\n\n  ${({ $stripedColor }) =>\n    $stripedColor &&\n    css`\n      &:nth-child(even) {\n        background: ${theme.colors[$stripedColor]};\n      }\n    `}\n\n    ${({ $clickableRow, $rowColor }) =>\n    $clickableRow &&\n    css`\n      cursor: pointer;\n      &:hover {\n        background: ${darken(0.1, theme.colors[$rowColor ?? 'custard'])};\n      }\n      &:focus-visible {\n        ${focusOutlineStyle}\n        background: ${darken(0.1, theme.colors[$rowColor ?? 'custard'])};\n      }\n    `}\n`\n\ntype StyledSubTableCellProps = {\n  $bgColor?: Color\n  $padding?: string | undefined\n  $rowBorderColor?: Color\n}\n\ntype StyledSubInnerCellProps = {\n  $padding?: string | undefined\n}\n\nexport const StyledSubTableCell = styled.td<StyledSubTableCellProps>`\n  padding: ${({ $padding }) => $padding ?? '12px 0'};\n\n  ${({ $rowBorderColor }) =>\n    $rowBorderColor &&\n    css`\n      border-bottom: 1px solid ${theme.colors[$rowBorderColor]};\n    `}\n\n  ${({ $bgColor }) =>\n    $bgColor && `background-color: ${theme.colors[$bgColor]};`}\n`\n\nexport const StyledSubInnerCell = styled.div<StyledSubInnerCellProps>`\n  padding: ${({ $padding }) => $padding ?? '12px 0'};\n`\n"]}
+{"version":3,"file":"commonComponents.js","sourceRoot":"","sources":["../../../src/Table/components/commonComponents.tsx"],"names":[],"mappings":"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","sourcesContent":["import { darken } from 'polished'\nimport styled, { css } from 'styled-components'\nimport { TransientProps } from 'utils/utilTypes'\nimport { fontStyleMapping } from '../../Text/fontMapping'\nimport { focusOutlineStyle } from '../../utils/focusOutline'\nimport { TableStylesProps, type TableProps } from '../types'\n\ntype StyledTableProps = {\n  $roundedTable: TableProps<unknown>['roundedTable']\n}\n\nconst isString = (value: unknown): value is string => typeof value === 'string'\n\nexport const StyledTable = styled.table<StyledTableProps>`\n  width: 100%;\n  height: 100%;\n  border-collapse: collapse;\n  overflow: auto;\n  background: ${({ theme }) => theme.color.surface.base[100]};\n  border-spacing: 30px;\n\n  ${({ $roundedTable }) =>\n    $roundedTable &&\n    css`\n      border-radius: ${isString($roundedTable) ? $roundedTable : '16px'};\n      overflow: hidden;\n    `}\n`\n\nexport const StyledHeaderCell = styled.th<TransientProps<TableStylesProps>>`\n  background: ${({ theme }) => theme.color.surface.base[100]};\n  border-bottom: ${({ $hasKeyline, theme }) =>\n    $hasKeyline ? `1px solid ${theme.color.surface.base[900]}` : 'none'};\n  position: ${({ $fixedHeader }) => ($fixedHeader ? 'sticky' : 'auto')};\n  top: 0;\n  z-index: 2;\n  text-align: left;\n  vertical-align: bottom;\n  ${fontStyleMapping.label};\n  padding-left: 8px;\n  padding-right: 8px;\n  padding-top: 8px;\n  padding-bottom: 8px;\n\n  ${({ $headerColor }) =>\n    $headerColor &&\n    css`\n      background: ${$headerColor};\n    `}\n\n  ${({ $headerHeight }) =>\n    $headerHeight &&\n    css`\n      height: ${$headerHeight};\n    `}\n\n  ${({ $maxWidth }) =>\n    $maxWidth &&\n    css`\n      max-width: ${$maxWidth};\n    `}\n\n  ${({ $minWidth }) =>\n    $minWidth &&\n    css`\n      min-width: ${$minWidth};\n    `}\n    \n  ${({ $columnPadding }) =>\n    $columnPadding &&\n    css`\n      padding-left: ${$columnPadding};\n      padding-right: ${$columnPadding};\n    `};\n`\n\nexport const StyledCell = styled.td<TransientProps<TableStylesProps>>`\n  vertical-align: middle;\n  padding-left: ${({ $columnPadding }) => $columnPadding ?? '8px'};\n  padding-right: ${({ $columnPadding }) => $columnPadding ?? '8px'};\n  padding-top: ${({ $rowPadding }) => $rowPadding ?? '8px'};\n  padding-bottom: ${({ $rowPadding }) => $rowPadding ?? '8px'};\n\n  ${({ $hideOverflow }) =>\n    $hideOverflow &&\n    css`\n      overflow: hidden;\n    `};\n\n  ${({ $noWrapContent }) =>\n    $noWrapContent &&\n    css`\n      white-space: nowrap;\n    `};\n\n  ${({ $truncateContent }) =>\n    $truncateContent &&\n    css`\n      overflow: hidden;\n      white-space: nowrap;\n      text-overflow: ellipsis;\n    `};\n\n  ${({ $stickyCell }) =>\n    $stickyCell &&\n    css`\n      position: sticky;\n      right: 0;\n    `};\n\n  ${({ $maxWidth }) =>\n    $maxWidth &&\n    css`\n      max-width: ${$maxWidth};\n    `}\n\n  ${({ $rowActionsBgColor }) =>\n    $rowActionsBgColor &&\n    css`\n      background: ${$rowActionsBgColor};\n    `}\n`\n\nexport const StyledRow = styled.tr<TransientProps<TableStylesProps>>`\n  background: ${({ theme }) => theme.color.surface.base[300]};\n\n  ${({ $rowBorderColor, $noRowBorderColor }) =>\n    $rowBorderColor &&\n    !$noRowBorderColor &&\n    css`\n      border-bottom: 1px solid ${$rowBorderColor};\n    `}\n\n  ${({ $rowColor }) =>\n    $rowColor &&\n    css`\n      background: ${$rowColor};\n    `}\n\n  ${({ $stripedColor }) =>\n    $stripedColor &&\n    css`\n      &:nth-child(even) {\n        background: ${$stripedColor};\n      }\n    `}\n\n    ${({ $clickableRow, $rowColor, theme }) =>\n    $clickableRow &&\n    css`\n      cursor: pointer;\n      &:hover {\n        background: ${darken(0.1, $rowColor ?? theme.color.surface.base[300])};\n      }\n      &:focus-visible {\n        ${focusOutlineStyle}\n        background: ${darken(0.1, $rowColor ?? theme.color.surface.base[300])};\n      }\n    `}\n`\n\ntype StyledSubTableCellProps = {\n  $bgColor?: string\n  $padding?: string | undefined\n  $rowBorderColor?: string\n}\n\ntype StyledSubInnerCellProps = {\n  $padding?: string | undefined\n}\n\nexport const StyledSubTableCell = styled.td<StyledSubTableCellProps>`\n  padding: ${({ $padding }) => $padding ?? '12px 0'};\n\n  ${({ $rowBorderColor }) =>\n    $rowBorderColor &&\n    css`\n      border-bottom: 1px solid ${$rowBorderColor};\n    `}\n\n  ${({ $bgColor }) => $bgColor && `background-color: ${$bgColor};`}\n`\n\nexport const StyledSubInnerCell = styled.div<StyledSubInnerCellProps>`\n  padding: ${({ $padding }) => $padding ?? '12px 0'};\n`\n"]}

package/dist/Table/types.d.ts

@@ -1,18 +1,18 @@
 import React, { ReactElement, ReactNode } from 'react';
 import { ButtonProps } from '../Button/Button';
 import { IconStrictProps } from '../IconStrict';
-import { Color } from '../theme';
 import type { BoxSpacing, SingleSpacing } from './helper.types';
+import { ColorTypes } from '../ThemeProvider/utils/colourMap';
 export type TableStylesProps = {
     hasKeyline?: boolean;
     fixedHeader?: boolean;
     headerHeight?: string;
-    stripedColor?: Color;
+    stripedColor?: string;
     stickyCell?: boolean;
-    headerColor?: Color;
-    rowColor?: Color;
-    rowBorderColor?: Color;
-    rowActionsBgColor?: Color;
+    headerColor?: string;
+    rowColor?: string;
+    rowBorderColor?: string;
+    rowActionsBgColor?: string;
     minWidth?: string;
     maxWidth?: string;
     noWrapContent?: boolean;
@@ -41,7 +41,7 @@ export type RowActionElementOverride<T> = {
 export type RowActions<T> = {
     actions: RowAction<T>[];
     minWidth?: string;
-    bgColor?: Color;
+    bgColor?: ColorTypes;
 };
 type RowCellRenderer<T> = (row: T, rowIndex: number, column: TableColumn<T>, id: string | number) => React.ReactNode;
 export interface TableColumn<T> {
@@ -54,12 +54,12 @@ export interface TableColumn<T> {
     cell?: RowCellRenderer<T>;
 }
 type SubElementProps = {
-    bgColor?: Color;
+    bgColor?: ColorTypes;
     padding?: BoxSpacing;
     margin?: BoxSpacing;
 };
 /** @template T - The type of data the table displays. */
-interface CommonTableProps<T> {
+interface CommonTableProps<T, ColorT = ColorTypes> {
     /** Array of columns to display in the table. */
     columns: TableColumn<T>[];
     /** Sets the height of the header. */
@@ -69,15 +69,15 @@ interface CommonTableProps<T> {
     /** If true, the table header will have a key line. */
     hasKeyline?: boolean;
     /** If present, the table rows will have alternating colors. */
-    stripedColor?: Color;
+    stripedColor?: ColorT;
     /** A function to determine if a row is expandable. */
     expandable?: (rowData: T) => boolean;
     /** The color for the table header. */
-    headerColor?: Color;
+    headerColor?: ColorT;
     /** The default color for each table row. */
-    rowColor?: Color;
+    rowColor?: ColorT;
     /** The default color for each table row border. */
-    rowBorderColor?: Color;
+    rowBorderColor?: ColorT;
     /** If true, the table will have rounded corners */
     roundedTable?: true;
     /** A React element to show when a row is expanded. */
@@ -121,7 +121,7 @@ export interface TableRowProps<T> extends CommonTableProps<T> {
     showActions?: boolean;
     hideBorder?: boolean;
 }
-export interface RowActionsProps<T> extends Pick<CommonTableProps<T>, 'expandable' | 'rowActions'> {
+export interface RowActionsProps<T> extends Pick<CommonTableProps<T, string>, 'expandable' | 'rowActions'> {
     rowData: T;
     canExpandRow: boolean;
     toggleExpansion: () => void;
@@ -136,11 +136,11 @@ type TableFooterColumnsProps<K> = {
      *
      * @default 'custard'
      */
-    rowColor?: Color;
+    rowColor?: ColorTypes;
     rowPadding?: SingleSpacing;
     columnPadding?: SingleSpacing;
     columns: TableColumn<K>[];
     data: K;
 };
-export type TableHeaderProps<T> = CommonTableProps<T>;
+export type TableHeaderProps<T> = CommonTableProps<T, string>;
 export {};

package/dist/Table/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/Table/types.ts"],"names":[],"mappings":"","sourcesContent":["import React, { ReactElement, ReactNode } from 'react'\nimport { ButtonProps } from '../Button/Button'\nimport { IconStrictProps } from '../IconStrict'\nimport { Color } from '../theme'\nimport type { BoxSpacing, SingleSpacing } from './helper.types'\n\nexport type TableStylesProps = {\n  hasKeyline?: boolean\n  fixedHeader?: boolean\n  headerHeight?: string\n  stripedColor?: Color\n  stickyCell?: boolean\n  headerColor?: Color\n  rowColor?: Color\n  rowBorderColor?: Color\n  rowActionsBgColor?: Color\n  minWidth?: string\n  maxWidth?: string\n  noWrapContent?: boolean\n  truncateContent?: boolean\n  rowPadding?: string\n  columnPadding?: string\n  hideOverflow?: boolean\n  clickableRow?: boolean\n  noRowBorderColor?: boolean\n}\n\nexport type Primitive = string | number | boolean | bigint\n\nexport type BaseRowAction<T> = {\n  onClick: (rowData: T) => void\n  showCondition?: (rowData: T) => boolean\n}\n\nexport type RowAction<T> =\n  | RowActionButtonDefault<T>\n  | RowActionElementOverride<T>\n\nexport type RowActionButtonDefault<T> = {\n  iconButton?: Pick<\n    IconStrictProps,\n    'size' | 'render' | 'iconColor' | 'backgroundColor' | 'id' | 'title'\n  > & { tooltipText?: string }\n  genericButton?: Pick<\n    ButtonProps,\n    | 'children'\n    | 'loading'\n    | 'disabled'\n    | 'primary'\n    | 'secondary'\n    | 'fallbackStyle'\n    | 'textBtn'\n    | 'smallButton'\n    | 'id'\n  >\n} & BaseRowAction<T>\n\nexport type RowActionElementOverride<T> = {\n  element: ReactElement<any>\n} & BaseRowAction<T>\n\nexport type RowActions<T> = {\n  actions: RowAction<T>[]\n  minWidth?: string\n  bgColor?: Color\n}\n\ntype RowCellRenderer<T> = (\n  row: T,\n  rowIndex: number,\n  column: TableColumn<T>,\n  id: string | number,\n) => React.ReactNode\n\nexport interface TableColumn<T> {\n  name?: string | number | React.ReactNode\n  minWidth?: string\n  maxWidth?: string\n  noWrapContent?: boolean\n  truncateContent?: boolean\n  hideOverflow?: boolean\n  cell?: RowCellRenderer<T>\n}\n\ntype SubElementProps = {\n  bgColor?: Color\n  padding?: BoxSpacing\n  margin?: BoxSpacing\n}\n\n/** @template T - The type of data the table displays. */\ninterface CommonTableProps<T> {\n  /** Array of columns to display in the table. */\n  columns: TableColumn<T>[]\n  /** Sets the height of the header. */\n  headerHeight?: string\n  /** If true, the table header will be fixed/sticky. */\n  fixedHeader?: boolean\n  /** If true, the table header will have a key line. */\n  hasKeyline?: boolean\n  /** If present, the table rows will have alternating colors. */\n  stripedColor?: Color\n  /** A function to determine if a row is expandable. */\n  expandable?: (rowData: T) => boolean\n  /** The color for the table header. */\n  headerColor?: Color\n  /** The default color for each table row. */\n  rowColor?: Color\n  /** The default color for each table row border. */\n  rowBorderColor?: Color\n  /** If true, the table will have rounded corners */\n  roundedTable?: true\n  /** A React element to show when a row is expanded. */\n  subTable?: SubElementProps & {\n    table: (rowData: T) => ReactElement<any>\n  }\n  /** Settings for sub rows. */\n  subRows?: SubElementProps & {\n    /** Function that returns a React element for the sub row. */\n    rows: (rowData: T) => ReactElement<any> | ReactElement<any>[]\n  }\n  /** Function to apply to a row, to make the entire row clickable, useful for navigation. */\n  clickableRow?: (rowData: T) => void\n  /** Array of actions that can be performed on each row. */\n  rowActions?: RowActions<T>\n  /** The Y padding for each row. */\n  rowPadding?: SingleSpacing\n  /** The X padding for each row. */\n  columnPadding?: SingleSpacing\n  /** Hides the table header. Table defaults to always showing the header. */\n  hideTableHeader?: boolean\n}\n\nexport interface TableProps<T, K = undefined> extends CommonTableProps<T> {\n  /** Array of data to be displayed in the table. */\n  data: T[]\n\n  footer?: TableFooter<K>\n\n  /** The text to show when there is no available data to map through. */\n  noDataContent?: ReactNode\n}\n\n/**\n * The type of the footer prop in the Table component.\n * It can either be an array of columns and data, or a React element.\n *\n * For columns, the columns and data will be passed to each column.cell component to generate the footer.\n * For a React element, it will render that as the table footer.\n */\nexport type TableFooter<K> =\n  | TableFooterColumnsProps<K>\n  | TableFooterElementProps<K>\n\nexport interface TableRowProps<T> extends CommonTableProps<T> {\n  rowData: T\n  rowIndex: number\n  showActions?: boolean\n  hideBorder?: boolean\n}\n\nexport interface RowActionsProps<T>\n  extends Pick<CommonTableProps<T>, 'expandable' | 'rowActions'> {\n  rowData: T\n  canExpandRow: boolean\n  toggleExpansion: () => void\n  isExpanded?: boolean\n}\n\ntype TableFooterElementProps<K> = {\n  element: ReactElement<K>\n}\n\ntype TableFooterColumnsProps<K> = {\n  /**\n   * Row color of the footer.\n   *\n   * @default 'custard'\n   */\n  rowColor?: Color\n  rowPadding?: SingleSpacing\n  columnPadding?: SingleSpacing\n  columns: TableColumn<K>[]\n  data: K\n}\n\nexport type TableHeaderProps<T> = CommonTableProps<T>\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/Table/types.ts"],"names":[],"mappings":"","sourcesContent":["import React, { ReactElement, ReactNode } from 'react'\nimport { ButtonProps } from '../Button/Button'\nimport { IconStrictProps } from '../IconStrict'\nimport type { BoxSpacing, SingleSpacing } from './helper.types'\nimport { ColorTypes } from '../ThemeProvider/utils/colourMap'\n\nexport type TableStylesProps = {\n  hasKeyline?: boolean\n  fixedHeader?: boolean\n  headerHeight?: string\n  stripedColor?: string\n  stickyCell?: boolean\n  headerColor?: string\n  rowColor?: string\n  rowBorderColor?: string\n  rowActionsBgColor?: string\n  minWidth?: string\n  maxWidth?: string\n  noWrapContent?: boolean\n  truncateContent?: boolean\n  rowPadding?: string\n  columnPadding?: string\n  hideOverflow?: boolean\n  clickableRow?: boolean\n  noRowBorderColor?: boolean\n}\n\nexport type Primitive = string | number | boolean | bigint\n\nexport type BaseRowAction<T> = {\n  onClick: (rowData: T) => void\n  showCondition?: (rowData: T) => boolean\n}\n\nexport type RowAction<T> =\n  | RowActionButtonDefault<T>\n  | RowActionElementOverride<T>\n\nexport type RowActionButtonDefault<T> = {\n  iconButton?: Pick<\n    IconStrictProps,\n    'size' | 'render' | 'iconColor' | 'backgroundColor' | 'id' | 'title'\n  > & { tooltipText?: string }\n  genericButton?: Pick<\n    ButtonProps,\n    | 'children'\n    | 'loading'\n    | 'disabled'\n    | 'primary'\n    | 'secondary'\n    | 'fallbackStyle'\n    | 'textBtn'\n    | 'smallButton'\n    | 'id'\n  >\n} & BaseRowAction<T>\n\nexport type RowActionElementOverride<T> = {\n  element: ReactElement<any>\n} & BaseRowAction<T>\n\nexport type RowActions<T> = {\n  actions: RowAction<T>[]\n  minWidth?: string\n  bgColor?: ColorTypes\n}\n\ntype RowCellRenderer<T> = (\n  row: T,\n  rowIndex: number,\n  column: TableColumn<T>,\n  id: string | number,\n) => React.ReactNode\n\nexport interface TableColumn<T> {\n  name?: string | number | React.ReactNode\n  minWidth?: string\n  maxWidth?: string\n  noWrapContent?: boolean\n  truncateContent?: boolean\n  hideOverflow?: boolean\n  cell?: RowCellRenderer<T>\n}\n\ntype SubElementProps = {\n  bgColor?: ColorTypes\n  padding?: BoxSpacing\n  margin?: BoxSpacing\n}\n\n/** @template T - The type of data the table displays. */\ninterface CommonTableProps<T, ColorT = ColorTypes> {\n  /** Array of columns to display in the table. */\n  columns: TableColumn<T>[]\n  /** Sets the height of the header. */\n  headerHeight?: string\n  /** If true, the table header will be fixed/sticky. */\n  fixedHeader?: boolean\n  /** If true, the table header will have a key line. */\n  hasKeyline?: boolean\n  /** If present, the table rows will have alternating colors. */\n  stripedColor?: ColorT\n  /** A function to determine if a row is expandable. */\n  expandable?: (rowData: T) => boolean\n  /** The color for the table header. */\n  headerColor?: ColorT\n  /** The default color for each table row. */\n  rowColor?: ColorT\n  /** The default color for each table row border. */\n  rowBorderColor?: ColorT\n  /** If true, the table will have rounded corners */\n  roundedTable?: true\n  /** A React element to show when a row is expanded. */\n  subTable?: SubElementProps & {\n    table: (rowData: T) => ReactElement<any>\n  }\n  /** Settings for sub rows. */\n  subRows?: SubElementProps & {\n    /** Function that returns a React element for the sub row. */\n    rows: (rowData: T) => ReactElement<any> | ReactElement<any>[]\n  }\n  /** Function to apply to a row, to make the entire row clickable, useful for navigation. */\n  clickableRow?: (rowData: T) => void\n  /** Array of actions that can be performed on each row. */\n  rowActions?: RowActions<T>\n  /** The Y padding for each row. */\n  rowPadding?: SingleSpacing\n  /** The X padding for each row. */\n  columnPadding?: SingleSpacing\n  /** Hides the table header. Table defaults to always showing the header. */\n  hideTableHeader?: boolean\n}\n\nexport interface TableProps<T, K = undefined> extends CommonTableProps<T> {\n  /** Array of data to be displayed in the table. */\n  data: T[]\n\n  footer?: TableFooter<K>\n\n  /** The text to show when there is no available data to map through. */\n  noDataContent?: ReactNode\n}\n\n/**\n * The type of the footer prop in the Table component.\n * It can either be an array of columns and data, or a React element.\n *\n * For columns, the columns and data will be passed to each column.cell component to generate the footer.\n * For a React element, it will render that as the table footer.\n */\nexport type TableFooter<K> =\n  | TableFooterColumnsProps<K>\n  | TableFooterElementProps<K>\n\nexport interface TableRowProps<T> extends CommonTableProps<T> {\n  rowData: T\n  rowIndex: number\n  showActions?: boolean\n  hideBorder?: boolean\n}\n\nexport interface RowActionsProps<T>\n  extends Pick<CommonTableProps<T, string>, 'expandable' | 'rowActions'> {\n  rowData: T\n  canExpandRow: boolean\n  toggleExpansion: () => void\n  isExpanded?: boolean\n}\n\ntype TableFooterElementProps<K> = {\n  element: ReactElement<K>\n}\n\ntype TableFooterColumnsProps<K> = {\n  /**\n   * Row color of the footer.\n   *\n   * @default 'custard'\n   */\n  rowColor?: ColorTypes\n  rowPadding?: SingleSpacing\n  columnPadding?: SingleSpacing\n  columns: TableColumn<K>[]\n  data: K\n}\n\nexport type TableHeaderProps<T> = CommonTableProps<T, string>\n"]}

package/dist/ThemeProvider/utils/colourMap.js

@@ -50,7 +50,7 @@ export const legacyColorMap = {
     liquorice: 'color.text.base', // palette.secondary.100
     boba: 'color.text.contrast', // palette.secondary.120
     // Core Tertiary
-    cream: `color.surface.base.000`, // palette.neutral.000
+    cream: 'color.surface.base.000', // palette.neutral.000
     coconut: 'color.surface.base.100', // palette.neutral.010
     mascarpone: 'color.surface.base.200', // palette.neutral.020
     custard: 'color.surface.base.300', // palette.neutral.040

package/dist/ThemeProvider/utils/colourMap.js.map

@@ -1 +1 @@
-{"version":3,"file":"colourMap.js","sourceRoot":"","sources":["../../../src/ThemeProvider/utils/colourMap.ts"],"names":[],"mappings":"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","sourcesContent":["import * as designTokens from '@mrshmllw/smores-foundations/build/web/variables.json'\nimport { Color } from '../../theme'\nimport { Theme } from '../ThemeProvider'\nimport { getFromObject } from '../../utils/getFromObject'\n\ntype Flatten<T, Prefix extends string = ''> = {\n  [K in keyof T & string]: T[K] extends Record<string, any>\n    ? Flatten<T[K], `${Prefix}${K}.`>\n    : `${Prefix}${K}`\n}[keyof T & string]\n\ntype Prettify<T> = {\n  [K in keyof T]: T[K]\n} & {}\n\nexport type NewColor = Prettify<\n  Flatten<Pick<typeof designTokens, 'color' | 'extended1' | 'thirdParty'>>\n>\n\nexport type ColorTypes = Color | NewColor\n\nexport const resolveToThemeColor = (\n  color: ColorTypes,\n  theme: Theme,\n): string => {\n  const colourPath = getColorPath(color)\n  return getFromObject({\n    obj: theme,\n    path: colourPath,\n  })\n}\n\n// a function that returns a flattened dot notation string path to access the color value\nexport const getColorPath = (color: ColorTypes) => {\n  return color in legacyColorMap\n    ? legacyColorMap[color as keyof typeof legacyColorMap]\n    : color\n}\n\n// a function that returns the design token color paths as a comma-separated string\nexport const formatDesignTokenColor = (): string => {\n  const { color, extended1, thirdParty } = designTokens\n  const colors = { color, extended1, thirdParty }\n\n  if (colors === null) {\n    return ''\n  }\n\n  const result: string[] = []\n  const destructureNestedObject = (obj: any, currentPath: string) => {\n    for (const key in obj) {\n      if (Object.prototype.hasOwnProperty.call(obj, key)) {\n        const value = obj[key]\n        const newPath = currentPath ? `${currentPath}.${key}` : key\n        if (typeof value === 'object' && value !== null) {\n          destructureNestedObject(value, newPath)\n        } else {\n          result.push(newPath)\n        }\n      }\n    }\n  }\n  destructureNestedObject(colors, '')\n  return result.join(', ')\n}\n\n// old colour name → new colour path // base token value\nexport const legacyColorMap: Record<Color, NewColor> = {\n  fairyFloss: 'color.surface.brand.100', // palette.primary.040\n  bubblegum: 'color.surface.brand.200', // palette.primary.060\n  marshmallowPink: 'color.surface.brand.300', // palette.primary.100\n  lollipop: 'color.surface.brand.400', // palatte.primary.120\n\n  // Core Secondary\n  chia: 'color.feedback.inactive.100', // palette.secondary.040\n  sesame: 'color.text.subtle', // palette.secondary.060\n  liquorice: 'color.text.base', // palette.secondary.100\n  boba: 'color.text.contrast', // palette.secondary.120\n\n  // Core Tertiary\n  cream: `color.surface.base.000`, // palette.neutral.000\n  coconut: 'color.surface.base.100', // palette.neutral.010\n  mascarpone: 'color.surface.base.200', // palette.neutral.020\n  custard: 'color.surface.base.300', // palette.neutral.040\n\n  // Brand Secondary\n  feijoa: 'color.illustration.accent1.100', // palette.brand1.060\n  spearmint: 'color.illustration.accent1.200', // palette.brand1.100\n  macaroon: 'color.illustration.accent2.100', // palette.brand2.060\n  blueberry: 'color.illustration.accent2.200', // palette.brand2.100\n  pistachio: 'color.illustration.accent3.200', // palette.brand3.100\n  matcha: 'color.illustration.accent3.100', // palette.brand3.060\n  caramel: 'color.illustration.accent4.200', // palette.brand4.100\n  peanut: 'color.illustration.accent4.100', // palette.brand4.060\n  marzipan: 'color.illustration.neutral.400', // palette.neutral.100\n  oatmeal: 'color.illustration.neutral.300', // palette.neutral.060\n  satsuma: 'extended1.20', // extended1.020\n\n  // Traffic light\n  watermelon: 'color.feedback.negative.100', // palette.negative.020\n  strawberry: 'color.feedback.negative.200', // palette.negative.100\n  apple: 'color.feedback.positive.200', // palette.positive.100\n  mint: 'color.feedback.positive.100', // palette.positive.020\n  lemon: 'color.feedback.notice.200', // palette.notice.100\n  sherbert: 'color.feedback.notice.100', // palette.notice.020\n  tangerine: 'extended1.100', // extended1.100\n\n  // Third-party brand colours\n  compareTheMarket: 'thirdParty.compareTheMarket',\n  confused: 'thirdParty.confusedCom',\n  onfido: 'thirdParty.onfido',\n  x: 'thirdParty.twitter', // x rebrand not yet reflected in foundations\n  premfina: 'thirdParty.premfina',\n  checkout: 'thirdParty.checkout',\n  meta: 'thirdParty.facebook', // Meta rebrand not yet reflected in foundations\n  stripe: 'thirdParty.stripe',\n  intercom: 'thirdParty.intercom',\n  ravelin: 'thirdParty.ravelin',\n  rac: 'thirdParty.rac',\n  hometree: 'thirdParty.hometree',\n} as const\n"]}
+{"version":3,"file":"colourMap.js","sourceRoot":"","sources":["../../../src/ThemeProvider/utils/colourMap.ts"],"names":[],"mappings":"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","sourcesContent":["import * as designTokens from '@mrshmllw/smores-foundations/build/web/variables.json'\nimport { Color } from '../../theme'\nimport { Theme } from '../ThemeProvider'\nimport { getFromObject } from '../../utils/getFromObject'\n\ntype Flatten<T, Prefix extends string = ''> = {\n  [K in keyof T & string]: T[K] extends Record<string, any>\n    ? Flatten<T[K], `${Prefix}${K}.`>\n    : `${Prefix}${K}`\n}[keyof T & string]\n\ntype Prettify<T> = {\n  [K in keyof T]: T[K]\n} & {}\n\nexport type NewColor = Prettify<\n  Flatten<Pick<typeof designTokens, 'color' | 'extended1' | 'thirdParty'>>\n>\n\nexport type ColorTypes = Color | NewColor\n\nexport const resolveToThemeColor = (\n  color: ColorTypes,\n  theme: Theme,\n): string => {\n  const colourPath = getColorPath(color)\n  return getFromObject({\n    obj: theme,\n    path: colourPath,\n  })\n}\n\n// a function that returns a flattened dot notation string path to access the color value\nexport const getColorPath = (color: ColorTypes) => {\n  return color in legacyColorMap\n    ? legacyColorMap[color as keyof typeof legacyColorMap]\n    : color\n}\n\n// a function that returns the design token color paths as a comma-separated string\nexport const formatDesignTokenColor = (): string => {\n  const { color, extended1, thirdParty } = designTokens\n  const colors = { color, extended1, thirdParty }\n\n  if (colors === null) {\n    return ''\n  }\n\n  const result: string[] = []\n  const destructureNestedObject = (obj: any, currentPath: string) => {\n    for (const key in obj) {\n      if (Object.prototype.hasOwnProperty.call(obj, key)) {\n        const value = obj[key]\n        const newPath = currentPath ? `${currentPath}.${key}` : key\n        if (typeof value === 'object' && value !== null) {\n          destructureNestedObject(value, newPath)\n        } else {\n          result.push(newPath)\n        }\n      }\n    }\n  }\n  destructureNestedObject(colors, '')\n  return result.join(', ')\n}\n\n// old colour name → new colour path // base token value\nexport const legacyColorMap: Record<Color, NewColor> = {\n  fairyFloss: 'color.surface.brand.100', // palette.primary.040\n  bubblegum: 'color.surface.brand.200', // palette.primary.060\n  marshmallowPink: 'color.surface.brand.300', // palette.primary.100\n  lollipop: 'color.surface.brand.400', // palatte.primary.120\n\n  // Core Secondary\n  chia: 'color.feedback.inactive.100', // palette.secondary.040\n  sesame: 'color.text.subtle', // palette.secondary.060\n  liquorice: 'color.text.base', // palette.secondary.100\n  boba: 'color.text.contrast', // palette.secondary.120\n\n  // Core Tertiary\n  cream: 'color.surface.base.000', // palette.neutral.000\n  coconut: 'color.surface.base.100', // palette.neutral.010\n  mascarpone: 'color.surface.base.200', // palette.neutral.020\n  custard: 'color.surface.base.300', // palette.neutral.040\n\n  // Brand Secondary\n  feijoa: 'color.illustration.accent1.100', // palette.brand1.060\n  spearmint: 'color.illustration.accent1.200', // palette.brand1.100\n  macaroon: 'color.illustration.accent2.100', // palette.brand2.060\n  blueberry: 'color.illustration.accent2.200', // palette.brand2.100\n  pistachio: 'color.illustration.accent3.200', // palette.brand3.100\n  matcha: 'color.illustration.accent3.100', // palette.brand3.060\n  caramel: 'color.illustration.accent4.200', // palette.brand4.100\n  peanut: 'color.illustration.accent4.100', // palette.brand4.060\n  marzipan: 'color.illustration.neutral.400', // palette.neutral.100\n  oatmeal: 'color.illustration.neutral.300', // palette.neutral.060\n  satsuma: 'extended1.20', // extended1.020\n\n  // Traffic light\n  watermelon: 'color.feedback.negative.100', // palette.negative.020\n  strawberry: 'color.feedback.negative.200', // palette.negative.100\n  apple: 'color.feedback.positive.200', // palette.positive.100\n  mint: 'color.feedback.positive.100', // palette.positive.020\n  lemon: 'color.feedback.notice.200', // palette.notice.100\n  sherbert: 'color.feedback.notice.100', // palette.notice.020\n  tangerine: 'extended1.100', // extended1.100\n\n  // Third-party brand colours\n  compareTheMarket: 'thirdParty.compareTheMarket',\n  confused: 'thirdParty.confusedCom',\n  onfido: 'thirdParty.onfido',\n  x: 'thirdParty.twitter', // x rebrand not yet reflected in foundations\n  premfina: 'thirdParty.premfina',\n  checkout: 'thirdParty.checkout',\n  meta: 'thirdParty.facebook', // Meta rebrand not yet reflected in foundations\n  stripe: 'thirdParty.stripe',\n  intercom: 'thirdParty.intercom',\n  ravelin: 'thirdParty.ravelin',\n  rac: 'thirdParty.rac',\n  hometree: 'thirdParty.hometree',\n} as const\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mrshmllw/smores-react",
-  "version": "13.16.1",
+  "version": "13.17.0",
   "main": "./dist/index.js",
   "description": "Collection of React components used by Marshmallow Technology",
   "type": "module",