@mrshmllw/smores-react 16.2.13 → 16.2.15

package/dist/SupportMessage/SupportMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"SupportMessage.js","sourceRoot":"","sources":["../../src/SupportMessage/SupportMessage.tsx"],"names":[],"mappings":"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","sourcesContent":["import { darken } from 'polished'\nimport { FC, MouseEventHandler, ReactElement } from 'react'\nimport styled, { css, useTheme } from 'styled-components'\n\nimport { Box } from '../Box'\n\nimport { Text } from '../Text'\nimport { theme as oldTheme } from '../theme'\nimport { isReactElement } from '../utils/isReactElement'\nimport { MarginProps } from '../utils/space'\nimport { NewColor, resolveToThemeColor } from '../ThemeProvider/utils/colourMap'\nimport { IconDefinition } from '@fortawesome/fontawesome-svg-core'\nimport {\n  faCircleCheck,\n  faCircleExclamation,\n  faCircleInfo,\n  faTriangleExclamation,\n} from '@awesome.me/kit-46ca99185c/icons/classic/regular'\nimport { IconContainer } from '../sharedStyles/shared.styles'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { faChevronRight } from '@awesome.me/kit-46ca99185c/icons/classic/solid'\n\ntype StylesItem = {\n  iconColor: NewColor\n  backgroundColor: NewColor\n  icon: IconDefinition\n}\n\nconst styles: Record<SupportMessageType, StylesItem> = {\n  info: {\n    iconColor: 'color.icon.base',\n    backgroundColor: 'color.illustration.neutral.300',\n    icon: faCircleInfo,\n  },\n  fallbackStyle: {\n    iconColor: 'color.icon.base',\n    backgroundColor: 'color.surface.base.100',\n    icon: faCircleInfo,\n  },\n  alert: {\n    iconColor: 'extended1.100',\n    backgroundColor: 'color.feedback.notice.100',\n    icon: faTriangleExclamation,\n  },\n  warning: {\n    iconColor: 'color.feedback.negative.200',\n    backgroundColor: 'color.feedback.negative.100',\n    icon: faCircleExclamation,\n  },\n  success: {\n    iconColor: 'color.feedback.positive.200',\n    backgroundColor: 'color.feedback.positive.100',\n    icon: faCircleCheck,\n  },\n}\n\ntype SupportMessageType =\n  | 'info'\n  | 'fallbackStyle'\n  | 'alert'\n  | 'warning'\n  | 'success'\n\nexport type SupportMessageProps = {\n  className?: string\n  description: string | ReactElement<any>\n  onClick?: MouseEventHandler\n  /**\n   * Right side content, usually an icon or a button\n   */\n  rightSideComponent?: ReactElement<any>\n  type: SupportMessageType\n  title?: string\n} & MarginProps\n\nexport const SupportMessage: FC<SupportMessageProps> = ({\n  className,\n  description,\n  onClick,\n  rightSideComponent,\n  type,\n  title,\n  ...marginProps\n}) => {\n  const theme = useTheme()\n  const resolveBackgroundColor = resolveToThemeColor(\n    styles[type].backgroundColor,\n    theme,\n  )\n\n  const resolvedIconColor = resolveToThemeColor(styles[type].iconColor, theme)\n\n  return (\n    <Wrapper\n      className={className}\n      $backgroundColor={resolveBackgroundColor}\n      onClick={onClick}\n      {...marginProps}\n    >\n      <IconContainer $size={20} style={{ alignSelf: 'flex-start' }}>\n        <FontAwesomeIcon icon={styles[type].icon} color={resolvedIconColor} />\n      </IconContainer>\n      <Box flex direction=\"column\" mx=\"space.100\">\n        {title && <Title>{title}</Title>}\n        {isReactElement(description) ? (\n          <DescriptionBox>{description}</DescriptionBox>\n        ) : (\n          <Description tag=\"p\">{description}</Description>\n        )}\n      </Box>\n      {rightSideComponent}\n      {onClick && rightSideComponent === undefined && (\n        <Box ml={{ custom: 'auto' }}>\n          <IconContainer $size={16}>\n            <FontAwesomeIcon\n              icon={faChevronRight}\n              color={theme.color.illustration.neutral[400]}\n            />\n          </IconContainer>\n        </Box>\n      )}\n    </Wrapper>\n  )\n}\n\ninterface IWrapper {\n  $backgroundColor: string\n  onClick?: MouseEventHandler\n}\n\nconst Wrapper = styled(Box)<IWrapper>(\n  ({ $backgroundColor, onClick }) => css`\n    align-items: center;\n    background-color: ${$backgroundColor};\n    border-radius: 16px;\n    ${onClick && `cursor: pointer`};\n    padding: ${({ theme }) => theme.space[150]};\n    display: flex;\n    width: 100%;\n\n    &:hover,\n    &:active {\n      ${onClick && `background-color: ${darken(0.1, $backgroundColor)};`};\n    }\n  `,\n)\n\nconst Title = styled.p`\n  font-size: 16px;\n  font-weight: ${oldTheme.font.weight.medium};\n  color: ${({ theme }) => theme.color.text.base};\n  line-height: 20.8px;\n  margin-bottom: ${({ theme }) => theme.space['050']};\n`\n\nconst DescriptionBox = styled(Box)`\n  font-size: 14px;\n  line-height: 20px;\n`\n\nconst Description = styled(Text)`\n  font-size: 14px;\n  line-height: 20px;\n`\n"]}
+{"version":3,"file":"SupportMessage.js","sourceRoot":"","sources":["../../src/SupportMessage/SupportMessage.tsx"],"names":[],"mappings":"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","sourcesContent":["import { darken } from 'polished'\nimport { FC, MouseEventHandler, ReactElement } from 'react'\nimport styled, { css, useTheme } from 'styled-components'\n\nimport { Box } from '../Box'\n\nimport { Text } from '../Text'\nimport { theme as oldTheme } from '../theme'\nimport { isReactElement } from '../utils/isReactElement'\nimport { MarginProps } from '../utils/space'\nimport { NewColor, resolveToThemeColor } from '../ThemeProvider/utils/colourMap'\nimport { IconDefinition } from '@fortawesome/fontawesome-svg-core'\nimport {\n  faCircleCheck,\n  faCircleExclamation,\n  faCircleInfo,\n  faTriangleExclamation,\n} from '@awesome.me/kit-46ca99185c/icons/classic/regular'\nimport { IconContainer } from '../sharedStyles/shared.styles'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { faChevronRight } from '@awesome.me/kit-46ca99185c/icons/classic/solid'\n\ntype StylesItem = {\n  iconColor: NewColor\n  backgroundColor: NewColor\n  icon: IconDefinition\n}\n\nconst styles: Record<SupportMessageType, StylesItem> = {\n  info: {\n    iconColor: 'color.icon.base',\n    backgroundColor: 'color.illustration.neutral.300',\n    icon: faCircleInfo,\n  },\n  fallbackStyle: {\n    iconColor: 'color.icon.base',\n    backgroundColor: 'color.surface.base.100',\n    icon: faCircleInfo,\n  },\n  alert: {\n    iconColor: 'extended1.100',\n    backgroundColor: 'color.feedback.notice.100',\n    icon: faTriangleExclamation,\n  },\n  warning: {\n    iconColor: 'color.feedback.negative.200',\n    backgroundColor: 'color.feedback.negative.100',\n    icon: faCircleExclamation,\n  },\n  success: {\n    iconColor: 'color.feedback.positive.200',\n    backgroundColor: 'color.feedback.positive.100',\n    icon: faCircleCheck,\n  },\n}\n\ntype SupportMessageType =\n  'info' | 'fallbackStyle' | 'alert' | 'warning' | 'success'\n\nexport type SupportMessageProps = {\n  className?: string\n  description: string | ReactElement<any>\n  onClick?: MouseEventHandler\n  /**\n   * Right side content, usually an icon or a button\n   */\n  rightSideComponent?: ReactElement<any>\n  type: SupportMessageType\n  title?: string\n} & MarginProps\n\nexport const SupportMessage: FC<SupportMessageProps> = ({\n  className,\n  description,\n  onClick,\n  rightSideComponent,\n  type,\n  title,\n  ...marginProps\n}) => {\n  const theme = useTheme()\n  const resolveBackgroundColor = resolveToThemeColor(\n    styles[type].backgroundColor,\n    theme,\n  )\n\n  const resolvedIconColor = resolveToThemeColor(styles[type].iconColor, theme)\n\n  return (\n    <Wrapper\n      className={className}\n      $backgroundColor={resolveBackgroundColor}\n      onClick={onClick}\n      {...marginProps}\n    >\n      <IconContainer $size={20} style={{ alignSelf: 'flex-start' }}>\n        <FontAwesomeIcon icon={styles[type].icon} color={resolvedIconColor} />\n      </IconContainer>\n      <Box flex direction=\"column\" mx=\"space.100\">\n        {title && <Title>{title}</Title>}\n        {isReactElement(description) ? (\n          <DescriptionBox>{description}</DescriptionBox>\n        ) : (\n          <Description tag=\"p\">{description}</Description>\n        )}\n      </Box>\n      {rightSideComponent}\n      {onClick && rightSideComponent === undefined && (\n        <Box ml={{ custom: 'auto' }}>\n          <IconContainer $size={16}>\n            <FontAwesomeIcon\n              icon={faChevronRight}\n              color={theme.color.illustration.neutral[400]}\n            />\n          </IconContainer>\n        </Box>\n      )}\n    </Wrapper>\n  )\n}\n\ninterface IWrapper {\n  $backgroundColor: string\n  onClick?: MouseEventHandler\n}\n\nconst Wrapper = styled(Box)<IWrapper>(\n  ({ $backgroundColor, onClick }) => css`\n    align-items: center;\n    background-color: ${$backgroundColor};\n    border-radius: 16px;\n    ${onClick && `cursor: pointer`};\n    padding: ${({ theme }) => theme.space[150]};\n    display: flex;\n    width: 100%;\n\n    &:hover,\n    &:active {\n      ${onClick && `background-color: ${darken(0.1, $backgroundColor)};`};\n    }\n  `,\n)\n\nconst Title = styled.p`\n  font-size: 16px;\n  font-weight: ${oldTheme.font.weight.medium};\n  color: ${({ theme }) => theme.color.text.base};\n  line-height: 20.8px;\n  margin-bottom: ${({ theme }) => theme.space['050']};\n`\n\nconst DescriptionBox = styled(Box)`\n  font-size: 14px;\n  line-height: 20px;\n`\n\nconst Description = styled(Text)`\n  font-size: 14px;\n  line-height: 20px;\n`\n"]}

package/dist/Table/Table.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Text } from '../Text';
 import { TableHeader } from './components/TableHeader';
 import { TableRow } from './components/TableRow';
@@ -27,6 +27,6 @@ export const Table = ({ columns, data, fixedHeader = true, hasKeyline = false, e
     const resolvedHeaderColor = resolveToThemeColor(headerColor, theme);
     const showActionsCell = expandable ?? rowActions;
     const totalColumns = showActionsCell ? columns.length + 1 : columns.length;
-    return (_jsxs(StyledTable, { "$roundedTable": roundedTable, children: [_jsx(TableColumnGroup, { widths: columnWidths, columnCount: totalColumns, setSubTableColumnWidths: setSubTableColumnWidths, shouldAlignSubTableColumns: alignSubTableColumns }), !hideTableHeader && (_jsx("thead", { children: _jsx(TableHeader, { columns: columns, fixedHeader: fixedHeader, headerHeight: headerHeight, headerColor: resolvedHeaderColor, rowActions: rowActions, columnPadding: columnPadding, expandable: expandable, hasKeyline: hasKeyline }) })), _jsxs("tbody", { children: [data.length === 0 && (_jsx("tr", { children: _jsx(StyledCell, { colSpan: totalColumns, "$rowPadding": rowPadding, "$columnPadding": columnPadding, children: noDataContent ?? _jsx(Text, { align: "center", children: "No available data" }) }) })), data.length !== 0 && (_jsxs(_Fragment, { children: [data.map((row, rowIndex) => (_jsx(TableRow, { rowData: row, rowIndex: rowIndex, columns: columns, rowActions: rowActions, stripedColor: stripedColor, subTable: subTable, renderSubTable: renderSubTable, subRows: subRows, rowColor: rowColor, rowBorderColor: rowBorderColor, rowPadding: rowPadding, columnPadding: columnPadding, expandable: expandable, clickableRow: clickableRow, hideBorder: Boolean(roundedTable) && rowIndex === data.length - 1 }, getRowKey ? getRowKey(row, rowIndex) : rowIndex))), footer && (_jsx(TableFooter, { columnCount: columns.length, footer: footer }))] }))] })] }));
+    return (_jsxs(StyledTable, { $roundedTable: roundedTable, children: [_jsx(TableColumnGroup, { widths: columnWidths, columnCount: totalColumns, setSubTableColumnWidths: setSubTableColumnWidths, shouldAlignSubTableColumns: alignSubTableColumns }), !hideTableHeader && (_jsx("thead", { children: _jsx(TableHeader, { columns: columns, fixedHeader: fixedHeader, headerHeight: headerHeight, headerColor: resolvedHeaderColor, rowActions: rowActions, columnPadding: columnPadding, expandable: expandable, hasKeyline: hasKeyline }) })), _jsxs("tbody", { children: [data.length === 0 && (_jsx("tr", { children: _jsx(StyledCell, { colSpan: totalColumns, $rowPadding: rowPadding, $columnPadding: columnPadding, children: noDataContent ?? _jsx(Text, { align: "center", children: "No available data" }) }) })), data.length !== 0 && (_jsxs(_Fragment, { children: [data.map((row, rowIndex) => (_jsx(TableRow, { rowData: row, rowIndex: rowIndex, columns: columns, rowActions: rowActions, stripedColor: stripedColor, subTable: subTable, renderSubTable: renderSubTable, subRows: subRows, rowColor: rowColor, rowBorderColor: rowBorderColor, rowPadding: rowPadding, columnPadding: columnPadding, expandable: expandable, clickableRow: clickableRow, hideBorder: Boolean(roundedTable) && rowIndex === data.length - 1 }, getRowKey ? getRowKey(row, rowIndex) : rowIndex))), footer && (_jsx(TableFooter, { columnCount: columns.length, footer: footer }))] }))] })] }));
 };
 //# sourceMappingURL=Table.js.map

package/dist/Table/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../src/Table/Table.tsx"],"names":[],"mappings":"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","sourcesContent":["import { 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'\nimport { TableColumnGroup } from './components/TableColumnGroup'\nimport { useAlignedSubTableColumns } from './hooks/useAlignedSubTableColumns'\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  alignSubTableColumns = false,\n  columnWidths,\n  hideTableHeader = false,\n  getRowKey,\n}: TableProps<T, K>) => {\n  const theme = useTheme()\n  const { renderSubTable, setSubTableColumnWidths } = useAlignedSubTableColumns(\n    subTable,\n    alignSubTableColumns,\n  )\n\n  const resolvedHeaderColor = resolveToThemeColor(headerColor, theme)\n\n  const showActionsCell = expandable ?? rowActions\n  const totalColumns = showActionsCell ? columns.length + 1 : columns.length\n\n  return (\n    <StyledTable $roundedTable={roundedTable}>\n      <TableColumnGroup\n        widths={columnWidths}\n        columnCount={totalColumns}\n        setSubTableColumnWidths={setSubTableColumnWidths}\n        shouldAlignSubTableColumns={alignSubTableColumns}\n      />\n      {!hideTableHeader && (\n        <thead>\n          <TableHeader\n            columns={columns}\n            fixedHeader={fixedHeader}\n            headerHeight={headerHeight}\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={totalColumns}\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={getRowKey ? getRowKey(row, rowIndex) : rowIndex}\n                rowData={row}\n                rowIndex={rowIndex}\n                columns={columns}\n                rowActions={rowActions}\n                stripedColor={stripedColor}\n                subTable={subTable}\n                renderSubTable={renderSubTable}\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 { 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'\nimport { TableColumnGroup } from './components/TableColumnGroup'\nimport { useAlignedSubTableColumns } from './hooks/useAlignedSubTableColumns'\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  alignSubTableColumns = false,\n  columnWidths,\n  hideTableHeader = false,\n  getRowKey,\n}: TableProps<T, K>) => {\n  const theme = useTheme()\n  const { renderSubTable, setSubTableColumnWidths } = useAlignedSubTableColumns(\n    subTable,\n    alignSubTableColumns,\n  )\n\n  const resolvedHeaderColor = resolveToThemeColor(headerColor, theme)\n\n  const showActionsCell = expandable ?? rowActions\n  const totalColumns = showActionsCell ? columns.length + 1 : columns.length\n\n  return (\n    <StyledTable $roundedTable={roundedTable}>\n      <TableColumnGroup\n        widths={columnWidths}\n        columnCount={totalColumns}\n        setSubTableColumnWidths={setSubTableColumnWidths}\n        shouldAlignSubTableColumns={alignSubTableColumns}\n      />\n      {!hideTableHeader && (\n        <thead>\n          <TableHeader\n            columns={columns}\n            fixedHeader={fixedHeader}\n            headerHeight={headerHeight}\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={totalColumns}\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={getRowKey ? getRowKey(row, rowIndex) : rowIndex}\n                rowData={row}\n                rowIndex={rowIndex}\n                columns={columns}\n                rowActions={rowActions}\n                stripedColor={stripedColor}\n                subTable={subTable}\n                renderSubTable={renderSubTable}\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

@@ -18,7 +18,7 @@ export const RowActions = ({ rowData, rowActions, isExpanded, toggleExpansion, e
     const resolvedRowActionBgColor = rowActions?.bgColor
         ? resolveToThemeColor(rowActions.bgColor, theme)
         : undefined;
-    return (_jsx(StyledCell, { "$stickyCell": Boolean(rowActions) || Boolean(expandable), "$rowActionsBgColor": resolvedRowActionBgColor, "$width": width, children: _jsxs(Box, { flex: true, alignItems: "center", justifyContent: "flex-end", children: [rowActions?.actions?.map((action, actionIndex) => {
+    return (_jsx(StyledCell, { $stickyCell: Boolean(rowActions) || Boolean(expandable), $rowActionsBgColor: resolvedRowActionBgColor, $width: width, children: _jsxs(Box, { flex: true, alignItems: "center", justifyContent: "flex-end", children: [rowActions?.actions?.map((action, actionIndex) => {
                     if (!action.showCondition || action.showCondition(rowData)) {
                         return (_jsxs(Wrapper, { flex: true, children: ['element' in action &&
                                     isReactElement(action.element) &&
@@ -36,7 +36,7 @@ export const RowActions = ({ rowData, rowActions, isExpanded, toggleExpansion, e
                 }), canExpandRow && (_jsx(CaretIcon, { render: "caret", handleClick: (e) => {
                         e.stopPropagation();
                         toggleExpansion();
-                    }, size: 24, "$isOpen": isExpanded, iconColor: isExpanded ? 'color.surface.base.000' : 'color.icon.base', backgroundColor: isExpanded
+                    }, size: 24, $isOpen: isExpanded, iconColor: isExpanded ? 'color.surface.base.000' : 'color.icon.base', backgroundColor: isExpanded
                         ? 'color.surface.base.900'
                         : 'color.illustration.neutral.300' }))] }) }));
 };

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 { cloneElement, 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  width,\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      $width={width}\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                  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: ${({ theme }) => theme.space[100]};\n\n  &:last-child {\n    margin-right: ${({ theme }) => theme.space['000']};\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 { cloneElement, 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  width,\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      $width={width}\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                  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: ${({ theme }) => theme.space[100]};\n\n  &:last-child {\n    margin-right: ${({ theme }) => theme.space['000']};\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/TableHeader.js

@@ -4,7 +4,7 @@ export const TableHeader = ({ columns, fixedHeader, headerColor, rowActions, hea
     // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
     const showActionsCell = expandable || rowActions;
     return (_jsxs(StyledRow, { children: [columns.map((column, columnIndex) => {
-                return (_jsx(StyledHeaderCell, { "$fixedHeader": fixedHeader, "$headerHeight": headerHeight, "$minWidth": column.minWidth, "$maxWidth": column.maxWidth, "$headerColor": headerColor, "$columnPadding": columnPadding, "$hasKeyline": hasKeyline, children: column.name }, columnIndex));
-            }), showActionsCell && (_jsx(StyledHeaderCell, { "$fixedHeader": fixedHeader, "$stickyCell": true, "$minWidth": rowActions?.minWidth, "$headerColor": headerColor, "$columnPadding": columnPadding, "$hasKeyline": hasKeyline, children: "Actions" }))] }));
+                return (_jsx(StyledHeaderCell, { $fixedHeader: fixedHeader, $headerHeight: headerHeight, $minWidth: column.minWidth, $maxWidth: column.maxWidth, $headerColor: headerColor, $columnPadding: columnPadding, $hasKeyline: hasKeyline, children: column.name }, columnIndex));
+            }), showActionsCell && (_jsx(StyledHeaderCell, { $fixedHeader: fixedHeader, $stickyCell: true, $minWidth: rowActions?.minWidth, $headerColor: headerColor, $columnPadding: columnPadding, $hasKeyline: hasKeyline, children: "Actions" }))] }));
 };
 //# sourceMappingURL=TableHeader.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TableHeader.js","sourceRoot":"","sources":["../../../src/Table/components/TableHeader.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,gBAAgB,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAEhE,MAAM,CAAC,MAAM,WAAW,GAAG,CAAmB,EAC5C,OAAO,EACP,WAAW,EACX,WAAW,EACX,UAAU,EACV,YAAY,EACZ,aAAa,EACb,UAAU,EACV,UAAU,GACU,EAAE,EAAE;IACxB,wEAAwE;IACxE,MAAM,eAAe,GAAG,UAAU,IAAI,UAAU,CAAA;IAEhD,OAAO,CACL,MAAC,SAAS,eACP,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,WAAW,EAAE,EAAE;gBACnC,OAAO,CACL,KAAC,gBAAgB,oBAED,WAAW,mBACV,YAAY,eAChB,MAAM,CAAC,QAAQ,eACf,MAAM,CAAC,QAAQ,kBACZ,WAAW,oBACT,aAAa,iBAChB,UAAU,YAEtB,MAAM,CAAC,IAAI,IATP,WAAW,CAUC,CACpB,CAAA;YACH,CAAC,CAAC,EACD,eAAe,IAAI,CAClB,KAAC,gBAAgB,oBACD,WAAW,iBACZ,IAAI,eACN,UAAU,EAAE,QAAQ,kBACjB,WAAW,oBACT,aAAa,iBAChB,UAAU,wBAGN,CACpB,IACS,CACb,CAAA;AACH,CAAC,CAAA","sourcesContent":["import { TableHeaderProps } from '../types'\nimport { StyledHeaderCell, StyledRow } from './commonComponents'\n\nexport const TableHeader = <T extends object>({\n  columns,\n  fixedHeader,\n  headerColor,\n  rowActions,\n  headerHeight,\n  columnPadding,\n  expandable,\n  hasKeyline,\n}: TableHeaderProps<T>) => {\n  // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing\n  const showActionsCell = expandable || rowActions\n\n  return (\n    <StyledRow>\n      {columns.map((column, columnIndex) => {\n        return (\n          <StyledHeaderCell\n            key={columnIndex}\n            $fixedHeader={fixedHeader}\n            $headerHeight={headerHeight}\n            $minWidth={column.minWidth}\n            $maxWidth={column.maxWidth}\n            $headerColor={headerColor}\n            $columnPadding={columnPadding}\n            $hasKeyline={hasKeyline}\n          >\n            {column.name}\n          </StyledHeaderCell>\n        )\n      })}\n      {showActionsCell && (\n        <StyledHeaderCell\n          $fixedHeader={fixedHeader}\n          $stickyCell={true}\n          $minWidth={rowActions?.minWidth}\n          $headerColor={headerColor}\n          $columnPadding={columnPadding}\n          $hasKeyline={hasKeyline}\n        >\n          Actions\n        </StyledHeaderCell>\n      )}\n    </StyledRow>\n  )\n}\n"]}
+{"version":3,"file":"TableHeader.js","sourceRoot":"","sources":["../../../src/Table/components/TableHeader.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,gBAAgB,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAEhE,MAAM,CAAC,MAAM,WAAW,GAAG,CAAmB,EAC5C,OAAO,EACP,WAAW,EACX,WAAW,EACX,UAAU,EACV,YAAY,EACZ,aAAa,EACb,UAAU,EACV,UAAU,GACU,EAAE,EAAE;IACxB,wEAAwE;IACxE,MAAM,eAAe,GAAG,UAAU,IAAI,UAAU,CAAA;IAEhD,OAAO,CACL,MAAC,SAAS,eACP,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,WAAW,EAAE,EAAE;gBACnC,OAAO,CACL,KAAC,gBAAgB,IAEf,YAAY,EAAE,WAAW,EACzB,aAAa,EAAE,YAAY,EAC3B,SAAS,EAAE,MAAM,CAAC,QAAQ,EAC1B,SAAS,EAAE,MAAM,CAAC,QAAQ,EAC1B,YAAY,EAAE,WAAW,EACzB,cAAc,EAAE,aAAa,EAC7B,WAAW,EAAE,UAAU,YAEtB,MAAM,CAAC,IAAI,IATP,WAAW,CAUC,CACpB,CAAA;YACH,CAAC,CAAC,EACD,eAAe,IAAI,CAClB,KAAC,gBAAgB,IACf,YAAY,EAAE,WAAW,EACzB,WAAW,EAAE,IAAI,EACjB,SAAS,EAAE,UAAU,EAAE,QAAQ,EAC/B,YAAY,EAAE,WAAW,EACzB,cAAc,EAAE,aAAa,EAC7B,WAAW,EAAE,UAAU,wBAGN,CACpB,IACS,CACb,CAAA;AACH,CAAC,CAAA","sourcesContent":["import { TableHeaderProps } from '../types'\nimport { StyledHeaderCell, StyledRow } from './commonComponents'\n\nexport const TableHeader = <T extends object>({\n  columns,\n  fixedHeader,\n  headerColor,\n  rowActions,\n  headerHeight,\n  columnPadding,\n  expandable,\n  hasKeyline,\n}: TableHeaderProps<T>) => {\n  // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing\n  const showActionsCell = expandable || rowActions\n\n  return (\n    <StyledRow>\n      {columns.map((column, columnIndex) => {\n        return (\n          <StyledHeaderCell\n            key={columnIndex}\n            $fixedHeader={fixedHeader}\n            $headerHeight={headerHeight}\n            $minWidth={column.minWidth}\n            $maxWidth={column.maxWidth}\n            $headerColor={headerColor}\n            $columnPadding={columnPadding}\n            $hasKeyline={hasKeyline}\n          >\n            {column.name}\n          </StyledHeaderCell>\n        )\n      })}\n      {showActionsCell && (\n        <StyledHeaderCell\n          $fixedHeader={fixedHeader}\n          $stickyCell={true}\n          $minWidth={rowActions?.minWidth}\n          $headerColor={headerColor}\n          $columnPadding={columnPadding}\n          $hasKeyline={hasKeyline}\n        >\n          Actions\n        </StyledHeaderCell>\n      )}\n    </StyledRow>\n  )\n}\n"]}

package/dist/Table/components/TableRow.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cloneElement, useState } from 'react';
 import { isReactElement } from '../../utils/isReactElement';
 import { isMappedReactElement } from '../helpers';
@@ -36,16 +36,16 @@ export const TableRow = ({ rowData, rowIndex, columns, subRows, subTable, stripe
     const showActionsCell = expandable ?? rowActions;
     const expandSubProp = showActionsCell ? columns.length + 1 : columns.length;
     const isExpandedRow = expandedRows.includes(rowIndex);
-    return (_jsxs(_Fragment, { children: [_jsxs(StyledRow, { "$stripedColor": resolvedStripedColor, "$rowColor": resolvedRowColor, "$rowBorderColor": resolvedRowBorderColor, "$clickableRow": !!clickableRow, "$noRowBorderColor": isExpandedRow || hideBorder, onClick: () => clickableRow?.(rowData), tabIndex: clickableRow && 0, children: [columns.map((column, columnIndex) => {
+    return (_jsxs(_Fragment, { children: [_jsxs(StyledRow, { $stripedColor: resolvedStripedColor, $rowColor: resolvedRowColor, $rowBorderColor: resolvedRowBorderColor, $clickableRow: !!clickableRow, $noRowBorderColor: isExpandedRow || hideBorder, onClick: () => clickableRow?.(rowData), tabIndex: clickableRow && 0, children: [columns.map((column, columnIndex) => {
                         let cellContent;
                         if (column.cell) {
                             cellContent = column.cell(rowData, rowIndex, column, rowIndex);
                         }
-                        return (_jsx(StyledCell, { "$rowPadding": rowPadding, "$columnPadding": columnPadding, "$minWidth": column.minWidth, "$maxWidth": column.maxWidth, "$noWrapContent": column.noWrapContent, "$truncateContent": column.truncateContent, "$hideOverflow": column.hideOverflow, children: cellContent }, columnIndex));
+                        return (_jsx(StyledCell, { $rowPadding: rowPadding, $columnPadding: columnPadding, $minWidth: column.minWidth, $maxWidth: column.maxWidth, $noWrapContent: column.noWrapContent, $truncateContent: column.truncateContent, $hideOverflow: column.hideOverflow, children: cellContent }, columnIndex));
                     }), (showActionsCell ?? showActions) && (_jsx(RowActions, { canExpandRow: canExpandRow, rowActions: rowActions, rowData: rowData, isExpanded: isExpandedRow, toggleExpansion: () => toggleRowExpansion(rowIndex) }))] }), isExpandedRow && (_jsxs(_Fragment, { children: [subRowsData &&
                         isReactElement(subRowsData) &&
                         cloneElement(subRowsData, { rowPadding, columnPadding }), subRowsData &&
                         isMappedReactElement(subRowsData) &&
-                        subRowsData.map((row) => cloneElement(row, { rowPadding, showActions: showActionsCell })), subTableData && (_jsx(StyledSubTableCell, { "$rowBorderColor": resolvedRowBorderColor, colSpan: expandSubProp, "$bgColor": resolvedSubBgColor, "$padding": subPadding, children: cloneElement(subTableData, { rowPadding, columnPadding }) }))] }))] }));
+                        subRowsData.map((row) => cloneElement(row, { rowPadding, showActions: showActionsCell })), subTableData && (_jsx(StyledSubTableCell, { $rowBorderColor: resolvedRowBorderColor, colSpan: expandSubProp, $bgColor: resolvedSubBgColor, $padding: subPadding, children: 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 { 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  renderSubTable,\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 = renderSubTable?.(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"]}
+{"version":3,"file":"TableRow.js","sourceRoot":"","sources":["../../../src/Table/components/TableRow.tsx"],"names":[],"mappings":"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","sourcesContent":["import { 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  renderSubTable,\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 = renderSubTable?.(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

@@ -4,9 +4,9 @@ type StyledTableProps = {
     $roundedTable: TableProps<unknown>['roundedTable'];
 };
 export declare const StyledTable: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "$roundedTable"> & StyledTableProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "$roundedTable"> & StyledTableProps, never>>> & string;
-export declare const StyledHeaderCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "$width" | "$maxWidth" | "$minWidth" | "$headerHeight" | "$fixedHeader" | "$hasKeyline" | "$stripedColor" | "$headerColor" | "$rowColor" | "$rowBorderColor" | "$clickableRow" | "$rowPadding" | "$columnPadding" | "$stickyCell" | "$rowActionsBgColor" | "$noWrapContent" | "$truncateContent" | "$hideOverflow" | "$noRowBorderColor"> & TransientProps<TableStylesProps>, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "$width" | "$maxWidth" | "$minWidth" | "$headerHeight" | "$fixedHeader" | "$hasKeyline" | "$stripedColor" | "$headerColor" | "$rowColor" | "$rowBorderColor" | "$clickableRow" | "$rowPadding" | "$columnPadding" | "$stickyCell" | "$rowActionsBgColor" | "$noWrapContent" | "$truncateContent" | "$hideOverflow" | "$noRowBorderColor"> & TransientProps<TableStylesProps>, never>>> & string;
-export declare const StyledCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "$width" | "$maxWidth" | "$minWidth" | "$headerHeight" | "$fixedHeader" | "$hasKeyline" | "$stripedColor" | "$headerColor" | "$rowColor" | "$rowBorderColor" | "$clickableRow" | "$rowPadding" | "$columnPadding" | "$stickyCell" | "$rowActionsBgColor" | "$noWrapContent" | "$truncateContent" | "$hideOverflow" | "$noRowBorderColor"> & TransientProps<TableStylesProps>, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "$width" | "$maxWidth" | "$minWidth" | "$headerHeight" | "$fixedHeader" | "$hasKeyline" | "$stripedColor" | "$headerColor" | "$rowColor" | "$rowBorderColor" | "$clickableRow" | "$rowPadding" | "$columnPadding" | "$stickyCell" | "$rowActionsBgColor" | "$noWrapContent" | "$truncateContent" | "$hideOverflow" | "$noRowBorderColor"> & TransientProps<TableStylesProps>, never>>> & string;
-export declare const StyledRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "$width" | "$maxWidth" | "$minWidth" | "$headerHeight" | "$fixedHeader" | "$hasKeyline" | "$stripedColor" | "$headerColor" | "$rowColor" | "$rowBorderColor" | "$clickableRow" | "$rowPadding" | "$columnPadding" | "$stickyCell" | "$rowActionsBgColor" | "$noWrapContent" | "$truncateContent" | "$hideOverflow" | "$noRowBorderColor"> & TransientProps<TableStylesProps>, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "$width" | "$maxWidth" | "$minWidth" | "$headerHeight" | "$fixedHeader" | "$hasKeyline" | "$stripedColor" | "$headerColor" | "$rowColor" | "$rowBorderColor" | "$clickableRow" | "$rowPadding" | "$columnPadding" | "$stickyCell" | "$rowActionsBgColor" | "$noWrapContent" | "$truncateContent" | "$hideOverflow" | "$noRowBorderColor"> & TransientProps<TableStylesProps>, never>>> & string;
+export declare const StyledHeaderCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "$clickableRow" | "$columnPadding" | "$fixedHeader" | "$hasKeyline" | "$headerColor" | "$headerHeight" | "$hideOverflow" | "$maxWidth" | "$minWidth" | "$noRowBorderColor" | "$noWrapContent" | "$rowActionsBgColor" | "$rowBorderColor" | "$rowColor" | "$rowPadding" | "$stickyCell" | "$stripedColor" | "$truncateContent" | "$width"> & TransientProps<TableStylesProps>, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "$clickableRow" | "$columnPadding" | "$fixedHeader" | "$hasKeyline" | "$headerColor" | "$headerHeight" | "$hideOverflow" | "$maxWidth" | "$minWidth" | "$noRowBorderColor" | "$noWrapContent" | "$rowActionsBgColor" | "$rowBorderColor" | "$rowColor" | "$rowPadding" | "$stickyCell" | "$stripedColor" | "$truncateContent" | "$width"> & TransientProps<TableStylesProps>, never>>> & string;
+export declare const StyledCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "$clickableRow" | "$columnPadding" | "$fixedHeader" | "$hasKeyline" | "$headerColor" | "$headerHeight" | "$hideOverflow" | "$maxWidth" | "$minWidth" | "$noRowBorderColor" | "$noWrapContent" | "$rowActionsBgColor" | "$rowBorderColor" | "$rowColor" | "$rowPadding" | "$stickyCell" | "$stripedColor" | "$truncateContent" | "$width"> & TransientProps<TableStylesProps>, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "$clickableRow" | "$columnPadding" | "$fixedHeader" | "$hasKeyline" | "$headerColor" | "$headerHeight" | "$hideOverflow" | "$maxWidth" | "$minWidth" | "$noRowBorderColor" | "$noWrapContent" | "$rowActionsBgColor" | "$rowBorderColor" | "$rowColor" | "$rowPadding" | "$stickyCell" | "$stripedColor" | "$truncateContent" | "$width"> & TransientProps<TableStylesProps>, never>>> & string;
+export declare const StyledRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "$clickableRow" | "$columnPadding" | "$fixedHeader" | "$hasKeyline" | "$headerColor" | "$headerHeight" | "$hideOverflow" | "$maxWidth" | "$minWidth" | "$noRowBorderColor" | "$noWrapContent" | "$rowActionsBgColor" | "$rowBorderColor" | "$rowColor" | "$rowPadding" | "$stickyCell" | "$stripedColor" | "$truncateContent" | "$width"> & TransientProps<TableStylesProps>, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "$clickableRow" | "$columnPadding" | "$fixedHeader" | "$hasKeyline" | "$headerColor" | "$headerHeight" | "$hideOverflow" | "$maxWidth" | "$minWidth" | "$noRowBorderColor" | "$noWrapContent" | "$rowActionsBgColor" | "$rowBorderColor" | "$rowColor" | "$rowPadding" | "$stickyCell" | "$stripedColor" | "$truncateContent" | "$width"> & TransientProps<TableStylesProps>, never>>> & string;
 type StyledSubTableCellProps = {
     $bgColor?: string;
     $padding?: string | undefined;

package/dist/Table/components/commonComponents.js

@@ -120,15 +120,15 @@ export const StyledRow = styled.tr `
 
     ${({ $clickableRow, $rowColor, theme }) => $clickableRow &&
     css `
-      cursor: pointer;
-      &:hover {
-        background: ${darken(0.1, $rowColor ?? theme.color.surface.base[300])};
-      }
-      &:focus-visible {
-        ${focusOutlineStyle}
-        background: ${darken(0.1, $rowColor ?? theme.color.surface.base[300])};
-      }
-    `}
+        cursor: pointer;
+        &:hover {
+          background: ${darken(0.1, $rowColor ?? theme.color.surface.base[300])};
+        }
+        &:focus-visible {
+          ${focusOutlineStyle}
+          background: ${darken(0.1, $rowColor ?? theme.color.surface.base[300])};
+        }
+      `}
 `;
 export const StyledSubTableCell = styled.td `
   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 { 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: ${({ theme }) => theme.space[100]};\n  padding-right: ${({ theme }) => theme.space[100]};\n  padding-top: ${({ theme }) => theme.space[100]};\n  padding-bottom: ${({ theme }) => theme.space[100]};\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"]}
+{"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: ${({ theme }) => theme.space[100]};\n  padding-right: ${({ theme }) => theme.space[100]};\n  padding-top: ${({ theme }) => theme.space[100]};\n  padding-bottom: ${({ theme }) => theme.space[100]};\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.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/Table/types.ts"],"names":[],"mappings":"","sourcesContent":["import { 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  width?: 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) => ReactNode\n\nexport interface TableColumn<T> {\n  name?: string | number | 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\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\n/**\n * Type for each table row's data object.\n **/\nexport type TableRowData = {\n  /**\n   * Optionally include a unique `rowKey` for stable React keys.\n   * If omitted, row index is used, which may cause issues if rows move.\n   */\n  rowKey?: React.Key\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  /** Callback to derive a stable React key for each row. Falls back to row index if not provided. */\n  getRowKey?: (row: T, index: number) => React.Key\n\n  /** If true, the sub table columns will be aligned with the main table columns, by using the widths of the main table columns. */\n  alignSubTableColumns?: boolean\n\n  /** The widths of the table columns to be set to, usually passed down to a subtable to align to the main table columns.\n   * The array length should match the number of columns in the table.\n   * @example ['100px', '200px', '150px']\n   */\n  columnWidths?: string[]\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  renderSubTable?: (rowData: T) => ReactElement<any>\n}\n\nexport interface RowActionsProps<T> extends Pick<\n  CommonTableProps<T, string>,\n  'expandable' | 'rowActions'\n> {\n  rowData: T\n  width?: string\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"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/Table/types.ts"],"names":[],"mappings":"","sourcesContent":["import { 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  width?: 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> | 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) => ReactNode\n\nexport interface TableColumn<T> {\n  name?: string | number | 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\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\n/**\n * Type for each table row's data object.\n **/\nexport type TableRowData = {\n  /**\n   * Optionally include a unique `rowKey` for stable React keys.\n   * If omitted, row index is used, which may cause issues if rows move.\n   */\n  rowKey?: React.Key\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  /** Callback to derive a stable React key for each row. Falls back to row index if not provided. */\n  getRowKey?: (row: T, index: number) => React.Key\n\n  /** If true, the sub table columns will be aligned with the main table columns, by using the widths of the main table columns. */\n  alignSubTableColumns?: boolean\n\n  /** The widths of the table columns to be set to, usually passed down to a subtable to align to the main table columns.\n   * The array length should match the number of columns in the table.\n   * @example ['100px', '200px', '150px']\n   */\n  columnWidths?: string[]\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> | TableFooterElementProps<K>\n\nexport interface TableRowProps<T> extends CommonTableProps<T> {\n  rowData: T\n  rowIndex: number\n  showActions?: boolean\n  hideBorder?: boolean\n\n  renderSubTable?: (rowData: T) => ReactElement<any>\n}\n\nexport interface RowActionsProps<T> extends Pick<\n  CommonTableProps<T, string>,\n  'expandable' | 'rowActions'\n> {\n  rowData: T\n  width?: string\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/Tag/Tag.js

@@ -9,8 +9,8 @@ export const Tag = ({ label, color, borderColor, bgColor, className, icon, iconC
     const theme = useTheme();
     const resolvedBGColor = resolveToThemeColor(bgColor, theme);
     const resolvedBorderColor = borderColor && resolveToThemeColor(borderColor, theme);
-    const iconToRender = iconComponent ? (_jsx(IconContainer, { "$size": 16, style: { paddingRight: '4px' }, children: iconComponent })) : icon ? (_jsx(TagIcon, { render: icon, color: iconColor, size: 16, "data-testid": `tag-icon-${icon}` })) : null;
-    return (_jsxs(Wrapper, { "$bgColor": resolvedBGColor, className: className, "$borderColor": resolvedBorderColor, ...marginProps, alignContent: "center", justifyContent: "center", onClick: onClick, children: [iconToRender, _jsx(TagText, { tag: "span", typo: "label", color: getColorPath(color), children: label })] }));
+    const iconToRender = iconComponent ? (_jsx(IconContainer, { $size: 16, style: { paddingRight: '4px' }, children: iconComponent })) : icon ? (_jsx(TagIcon, { render: icon, color: iconColor, size: 16, "data-testid": `tag-icon-${icon}` })) : null;
+    return (_jsxs(Wrapper, { $bgColor: resolvedBGColor, className: className, $borderColor: resolvedBorderColor, ...marginProps, alignContent: "center", justifyContent: "center", onClick: onClick, children: [iconToRender, _jsx(TagText, { tag: "span", typo: "label", color: getColorPath(color), children: label })] }));
 };
 const Wrapper = styled(Box) `
   background-color: ${({ $bgColor }) => $bgColor};

package/dist/Tag/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../src/Tag/Tag.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAIpD,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,IAAI,EAAS,MAAM,SAAS,CAAA;AACrC,OAAO,EAEL,YAAY,EACZ,mBAAmB,GACpB,MAAM,kCAAkC,CAAA;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAA;AAc7D,MAAM,CAAC,MAAM,GAAG,GAAiB,CAAC,EAChC,KAAK,EACL,KAAK,EACL,WAAW,EACX,OAAO,EACP,SAAS,EACT,IAAI,EACJ,aAAa,EACb,SAAS,EACT,OAAO,EACP,GAAG,WAAW,EACf,EAAE,EAAE;IACH,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IAExB,MAAM,eAAe,GAAG,mBAAmB,CAAC,OAAO,EAAE,KAAK,CAAC,CAAA;IAC3D,MAAM,mBAAmB,GACvB,WAAW,IAAI,mBAAmB,CAAC,WAAW,EAAE,KAAK,CAAC,CAAA;IAExD,MAAM,YAAY,GAAG,aAAa,CAAC,CAAC,CAAC,CACnC,KAAC,aAAa,aAAQ,EAAE,EAAE,KAAK,EAAE,EAAE,YAAY,EAAE,KAAK,EAAE,YACrD,aAAa,GACA,CACjB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CACT,KAAC,OAAO,IACN,MAAM,EAAE,IAAI,EACZ,KAAK,EAAE,SAAS,EAChB,IAAI,EAAE,EAAE,iBACK,YAAY,IAAI,EAAE,GAC/B,CACH,CAAC,CAAC,CAAC,IAAI,CAAA;IAER,OAAO,CACL,MAAC,OAAO,gBACI,eAAe,EACzB,SAAS,EAAE,SAAS,kBACN,mBAAmB,KAC7B,WAAW,EACf,YAAY,EAAC,QAAQ,EACrB,cAAc,EAAC,QAAQ,EACvB,OAAO,EAAE,OAAO,aAEf,YAAY,EACb,KAAC,OAAO,IAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAE,YAAY,CAAC,KAAK,CAAC,YACxD,KAAK,GACE,IACF,CACX,CAAA;AACH,CAAC,CAAA;AAOD,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,CAAc;sBACnB,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,QAAQ;YACpC,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,IAAI,aAAa,YAAY,EAAE;;;;;;;;;CAS5E,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;;;;;CAO3B,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;mBACT,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC;CACnD,CAAA","sourcesContent":["import { FC, ReactNode } from 'react'\nimport styled, { useTheme } from 'styled-components'\nimport { MarginProps } from '../utils/space'\n\nimport { TransientProps } from '../utils/utilTypes'\nimport { Box } from '../Box'\nimport { Text } from '../Text'\nimport { Icon, Icons } from '../Icon'\nimport {\n  ColorTypes,\n  getColorPath,\n  resolveToThemeColor,\n} from '../ThemeProvider/utils/colourMap'\nimport { IconContainer } from '../sharedStyles/shared.styles'\n\nexport type TagProps = {\n  label: string\n  color: ColorTypes\n  bgColor: ColorTypes\n  borderColor?: ColorTypes\n  className?: string\n  icon?: Icons\n  iconComponent?: ReactNode\n  iconColor?: ColorTypes\n  onClick?: () => void\n} & MarginProps\n\nexport const Tag: FC<TagProps> = ({\n  label,\n  color,\n  borderColor,\n  bgColor,\n  className,\n  icon,\n  iconComponent,\n  iconColor,\n  onClick,\n  ...marginProps\n}) => {\n  const theme = useTheme()\n\n  const resolvedBGColor = resolveToThemeColor(bgColor, theme)\n  const resolvedBorderColor =\n    borderColor && resolveToThemeColor(borderColor, theme)\n\n  const iconToRender = iconComponent ? (\n    <IconContainer $size={16} style={{ paddingRight: '4px' }}>\n      {iconComponent}\n    </IconContainer>\n  ) : icon ? (\n    <TagIcon\n      render={icon}\n      color={iconColor}\n      size={16}\n      data-testid={`tag-icon-${icon}`}\n    />\n  ) : null\n\n  return (\n    <Wrapper\n      $bgColor={resolvedBGColor}\n      className={className}\n      $borderColor={resolvedBorderColor}\n      {...marginProps}\n      alignContent=\"center\"\n      justifyContent=\"center\"\n      onClick={onClick}\n    >\n      {iconToRender}\n      <TagText tag=\"span\" typo=\"label\" color={getColorPath(color)}>\n        {label}\n      </TagText>\n    </Wrapper>\n  )\n}\n\ntype WrapperProps = TransientProps<{\n  bgColor: string\n  borderColor?: string\n}>\n\nconst Wrapper = styled(Box)<WrapperProps>`\n  background-color: ${({ $bgColor }) => $bgColor};\n  border: ${({ $borderColor }) => $borderColor && `1px solid ${$borderColor}`};\n\n  border-radius: 6px;\n  padding: 4px 8px;\n\n  height: 22px;\n\n  box-sizing: border-box;\n  display: inline-flex;\n`\n\nconst TagText = styled(Text)`\n  display: flex;\n  align-items: center;\n  font-size: 10px;\n  font-weight: 500;\n  line-height: 12px;\n  text-transform: uppercase;\n`\n\nconst TagIcon = styled(Icon)`\n  padding-right: ${({ theme }) => theme.space['050']};\n`\n"]}
+{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../src/Tag/Tag.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAIpD,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,IAAI,EAAS,MAAM,SAAS,CAAA;AACrC,OAAO,EAEL,YAAY,EACZ,mBAAmB,GACpB,MAAM,kCAAkC,CAAA;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAA;AAc7D,MAAM,CAAC,MAAM,GAAG,GAAiB,CAAC,EAChC,KAAK,EACL,KAAK,EACL,WAAW,EACX,OAAO,EACP,SAAS,EACT,IAAI,EACJ,aAAa,EACb,SAAS,EACT,OAAO,EACP,GAAG,WAAW,EACf,EAAE,EAAE;IACH,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IAExB,MAAM,eAAe,GAAG,mBAAmB,CAAC,OAAO,EAAE,KAAK,CAAC,CAAA;IAC3D,MAAM,mBAAmB,GACvB,WAAW,IAAI,mBAAmB,CAAC,WAAW,EAAE,KAAK,CAAC,CAAA;IAExD,MAAM,YAAY,GAAG,aAAa,CAAC,CAAC,CAAC,CACnC,KAAC,aAAa,IAAC,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,YAAY,EAAE,KAAK,EAAE,YACrD,aAAa,GACA,CACjB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CACT,KAAC,OAAO,IACN,MAAM,EAAE,IAAI,EACZ,KAAK,EAAE,SAAS,EAChB,IAAI,EAAE,EAAE,iBACK,YAAY,IAAI,EAAE,GAC/B,CACH,CAAC,CAAC,CAAC,IAAI,CAAA;IAER,OAAO,CACL,MAAC,OAAO,IACN,QAAQ,EAAE,eAAe,EACzB,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,mBAAmB,KAC7B,WAAW,EACf,YAAY,EAAC,QAAQ,EACrB,cAAc,EAAC,QAAQ,EACvB,OAAO,EAAE,OAAO,aAEf,YAAY,EACb,KAAC,OAAO,IAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAE,YAAY,CAAC,KAAK,CAAC,YACxD,KAAK,GACE,IACF,CACX,CAAA;AACH,CAAC,CAAA;AAOD,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,CAAc;sBACnB,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,QAAQ;YACpC,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,IAAI,aAAa,YAAY,EAAE;;;;;;;;;CAS5E,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;;;;;CAO3B,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;mBACT,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC;CACnD,CAAA","sourcesContent":["import { FC, ReactNode } from 'react'\nimport styled, { useTheme } from 'styled-components'\nimport { MarginProps } from '../utils/space'\n\nimport { TransientProps } from '../utils/utilTypes'\nimport { Box } from '../Box'\nimport { Text } from '../Text'\nimport { Icon, Icons } from '../Icon'\nimport {\n  ColorTypes,\n  getColorPath,\n  resolveToThemeColor,\n} from '../ThemeProvider/utils/colourMap'\nimport { IconContainer } from '../sharedStyles/shared.styles'\n\nexport type TagProps = {\n  label: string\n  color: ColorTypes\n  bgColor: ColorTypes\n  borderColor?: ColorTypes\n  className?: string\n  icon?: Icons\n  iconComponent?: ReactNode\n  iconColor?: ColorTypes\n  onClick?: () => void\n} & MarginProps\n\nexport const Tag: FC<TagProps> = ({\n  label,\n  color,\n  borderColor,\n  bgColor,\n  className,\n  icon,\n  iconComponent,\n  iconColor,\n  onClick,\n  ...marginProps\n}) => {\n  const theme = useTheme()\n\n  const resolvedBGColor = resolveToThemeColor(bgColor, theme)\n  const resolvedBorderColor =\n    borderColor && resolveToThemeColor(borderColor, theme)\n\n  const iconToRender = iconComponent ? (\n    <IconContainer $size={16} style={{ paddingRight: '4px' }}>\n      {iconComponent}\n    </IconContainer>\n  ) : icon ? (\n    <TagIcon\n      render={icon}\n      color={iconColor}\n      size={16}\n      data-testid={`tag-icon-${icon}`}\n    />\n  ) : null\n\n  return (\n    <Wrapper\n      $bgColor={resolvedBGColor}\n      className={className}\n      $borderColor={resolvedBorderColor}\n      {...marginProps}\n      alignContent=\"center\"\n      justifyContent=\"center\"\n      onClick={onClick}\n    >\n      {iconToRender}\n      <TagText tag=\"span\" typo=\"label\" color={getColorPath(color)}>\n        {label}\n      </TagText>\n    </Wrapper>\n  )\n}\n\ntype WrapperProps = TransientProps<{\n  bgColor: string\n  borderColor?: string\n}>\n\nconst Wrapper = styled(Box)<WrapperProps>`\n  background-color: ${({ $bgColor }) => $bgColor};\n  border: ${({ $borderColor }) => $borderColor && `1px solid ${$borderColor}`};\n\n  border-radius: 6px;\n  padding: 4px 8px;\n\n  height: 22px;\n\n  box-sizing: border-box;\n  display: inline-flex;\n`\n\nconst TagText = styled(Text)`\n  display: flex;\n  align-items: center;\n  font-size: 10px;\n  font-weight: 500;\n  line-height: 12px;\n  text-transform: uppercase;\n`\n\nconst TagIcon = styled(Icon)`\n  padding-right: ${({ theme }) => theme.space['050']};\n`\n"]}

package/dist/Text/Text.js

@@ -8,7 +8,7 @@ import { resolveToThemeColor, } from '../ThemeProvider/utils/colourMap';
 export const Text = forwardRef(({ children, typo = 'body-regular', className = '', tag = 'p', align = 'left', color = 'color.text.base', cursor = 'inherit', title = '', ...props }, ref) => {
     const theme = useTheme();
     const resolvedColor = resolveToThemeColor(color, theme);
-    return (_jsx(Container, { forwardedAs: tag, className: className, "$typo": typo, "$align": align, "$color": resolvedColor, cursor: cursor, title: title, ...props, ref: ref, children: children }));
+    return (_jsx(Container, { forwardedAs: tag, className: className, $typo: typo, $align: align, $color: resolvedColor, cursor: cursor, title: title, ...props, ref: ref, children: children }));
 });
 Text.displayName = 'Text';
 const isTypo = (value) => {

package/dist/Text/Text.js.map

@@ -1 +1 @@
-{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../src/Text/Text.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,UAAU,EAAkC,MAAM,OAAO,CAAA;AACtE,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAEzD,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAA;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAA;AAChD,OAAO,EAEL,mBAAmB,GACpB,MAAM,kCAAkC,CAAA;AAuCzC,MAAM,CAAC,MAAM,IAAI,GAAkB,UAAU,CAC3C,CACE,EACE,QAAQ,EACR,IAAI,GAAG,cAAc,EACrB,SAAS,GAAG,EAAE,EACd,GAAG,GAAG,GAAG,EACT,KAAK,GAAG,MAAM,EACd,KAAK,GAAG,iBAAiB,EACzB,MAAM,GAAG,SAAS,EAClB,KAAK,GAAG,EAAE,EACV,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,MAAM,aAAa,GAAG,mBAAmB,CAAC,KAAK,EAAE,KAAK,CAAC,CAAA;IAEvD,OAAO,CACL,KAAC,SAAS,IACR,WAAW,EAAE,GAAG,EAChB,SAAS,EAAE,SAAS,WACb,IAAI,YACH,KAAK,YACL,aAAa,EACrB,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,KACR,KAAK,EACT,GAAG,EAAE,GAAG,YAEP,QAAQ,GACC,CACb,CAAA;AACH,CAAC,CACF,CAAA;AAED,IAAI,CAAC,WAAW,GAAG,MAAM,CAAA;AAEzB,MAAM,MAAM,GAAG,CAAC,KAAa,EAAiB,EAAE;IAC9C,OAAO,MAAM,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;AACtD,CAAC,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAC3B,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;MAGvC,MAAM,CAAC,KAAK,CAAC,IAAI,gBAAgB,CAAC,KAAK,CAAC;;kBAE5B,MAAM;cACV,OAAO;aACR,MAAM;MACb,iBAAiB,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;GACvC,CACF,CAAA","sourcesContent":["import { FC, forwardRef, LabelHTMLAttributes, ReactNode } from 'react'\nimport styled, { css, useTheme } from 'styled-components'\n\nimport { Box } from '../Box'\nimport { linkStyleOverride } from '../Link/Link'\nimport { MarginProps } from '../utils/space'\nimport { fontStyleMapping } from './fontMapping'\nimport {\n  ColorTypes,\n  resolveToThemeColor,\n} from '../ThemeProvider/utils/colourMap'\ninterface IText {\n  /** typography class name to apply predefined styles */\n  $typo: string\n  /** text-align  */\n  $align: string\n  /** color from the theme  */\n  $color: ColorTypes\n  $cursor: string\n}\n\nexport type Typo =\n  | 'hero-alternate'\n  | 'hero'\n  | 'heading-alternate'\n  | 'heading-large'\n  | 'heading-medium'\n  | 'heading-small'\n  | 'headline-regular'\n  | 'headline-small'\n  | 'body-standfirst'\n  | 'body-regular'\n  | 'body-small'\n  | 'caption'\n  | 'label'\n\ntype Props = {\n  children: ReactNode\n  tag?: any\n  className?: string\n  typo?: Typo\n  align?: string\n  color?: ColorTypes\n  cursor?: string\n  title?: string\n} & MarginProps\n\nexport type TextProps = Props & Omit<LabelHTMLAttributes<HTMLElement>, 'color'>\n\nexport const Text: FC<TextProps> = forwardRef<HTMLElement, TextProps>(\n  (\n    {\n      children,\n      typo = 'body-regular',\n      className = '',\n      tag = 'p',\n      align = 'left',\n      color = 'color.text.base',\n      cursor = 'inherit',\n      title = '',\n      ...props\n    },\n    ref,\n  ) => {\n    const theme = useTheme()\n    const resolvedColor = resolveToThemeColor(color, theme)\n\n    return (\n      <Container\n        forwardedAs={tag}\n        className={className}\n        $typo={typo}\n        $align={align}\n        $color={resolvedColor}\n        cursor={cursor}\n        title={title}\n        {...props}\n        ref={ref}\n      >\n        {children}\n      </Container>\n    )\n  },\n)\n\nText.displayName = 'Text'\n\nconst isTypo = (value: string): value is Typo => {\n  return Object.keys(fontStyleMapping).includes(value)\n}\n\nconst Container = styled(Box)<IText>(\n  ({ $align, $color, $cursor, $typo }) => css`\n    /** TYPOGRAPHY STYLES */\n\n    ${isTypo($typo) && fontStyleMapping[$typo]}\n\n    text-align: ${$align};\n    cursor: ${$cursor};\n    color: ${$color};\n    ${linkStyleOverride({ color: $color })}\n  `,\n)\n"]}
+{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../src/Text/Text.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,UAAU,EAAkC,MAAM,OAAO,CAAA;AACtE,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAEzD,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAA;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAA;AAChD,OAAO,EAEL,mBAAmB,GACpB,MAAM,kCAAkC,CAAA;AAuCzC,MAAM,CAAC,MAAM,IAAI,GAAkB,UAAU,CAC3C,CACE,EACE,QAAQ,EACR,IAAI,GAAG,cAAc,EACrB,SAAS,GAAG,EAAE,EACd,GAAG,GAAG,GAAG,EACT,KAAK,GAAG,MAAM,EACd,KAAK,GAAG,iBAAiB,EACzB,MAAM,GAAG,SAAS,EAClB,KAAK,GAAG,EAAE,EACV,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,MAAM,aAAa,GAAG,mBAAmB,CAAC,KAAK,EAAE,KAAK,CAAC,CAAA;IAEvD,OAAO,CACL,KAAC,SAAS,IACR,WAAW,EAAE,GAAG,EAChB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,IAAI,EACX,MAAM,EAAE,KAAK,EACb,MAAM,EAAE,aAAa,EACrB,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,KACR,KAAK,EACT,GAAG,EAAE,GAAG,YAEP,QAAQ,GACC,CACb,CAAA;AACH,CAAC,CACF,CAAA;AAED,IAAI,CAAC,WAAW,GAAG,MAAM,CAAA;AAEzB,MAAM,MAAM,GAAG,CAAC,KAAa,EAAiB,EAAE;IAC9C,OAAO,MAAM,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;AACtD,CAAC,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAC3B,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;MAGvC,MAAM,CAAC,KAAK,CAAC,IAAI,gBAAgB,CAAC,KAAK,CAAC;;kBAE5B,MAAM;cACV,OAAO;aACR,MAAM;MACb,iBAAiB,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;GACvC,CACF,CAAA","sourcesContent":["import { FC, forwardRef, LabelHTMLAttributes, ReactNode } from 'react'\nimport styled, { css, useTheme } from 'styled-components'\n\nimport { Box } from '../Box'\nimport { linkStyleOverride } from '../Link/Link'\nimport { MarginProps } from '../utils/space'\nimport { fontStyleMapping } from './fontMapping'\nimport {\n  ColorTypes,\n  resolveToThemeColor,\n} from '../ThemeProvider/utils/colourMap'\ninterface IText {\n  /** typography class name to apply predefined styles */\n  $typo: string\n  /** text-align  */\n  $align: string\n  /** color from the theme  */\n  $color: ColorTypes\n  $cursor: string\n}\n\nexport type Typo =\n  | 'hero-alternate'\n  | 'hero'\n  | 'heading-alternate'\n  | 'heading-large'\n  | 'heading-medium'\n  | 'heading-small'\n  | 'headline-regular'\n  | 'headline-small'\n  | 'body-standfirst'\n  | 'body-regular'\n  | 'body-small'\n  | 'caption'\n  | 'label'\n\ntype Props = {\n  children: ReactNode\n  tag?: any\n  className?: string\n  typo?: Typo\n  align?: string\n  color?: ColorTypes\n  cursor?: string\n  title?: string\n} & MarginProps\n\nexport type TextProps = Props & Omit<LabelHTMLAttributes<HTMLElement>, 'color'>\n\nexport const Text: FC<TextProps> = forwardRef<HTMLElement, TextProps>(\n  (\n    {\n      children,\n      typo = 'body-regular',\n      className = '',\n      tag = 'p',\n      align = 'left',\n      color = 'color.text.base',\n      cursor = 'inherit',\n      title = '',\n      ...props\n    },\n    ref,\n  ) => {\n    const theme = useTheme()\n    const resolvedColor = resolveToThemeColor(color, theme)\n\n    return (\n      <Container\n        forwardedAs={tag}\n        className={className}\n        $typo={typo}\n        $align={align}\n        $color={resolvedColor}\n        cursor={cursor}\n        title={title}\n        {...props}\n        ref={ref}\n      >\n        {children}\n      </Container>\n    )\n  },\n)\n\nText.displayName = 'Text'\n\nconst isTypo = (value: string): value is Typo => {\n  return Object.keys(fontStyleMapping).includes(value)\n}\n\nconst Container = styled(Box)<IText>(\n  ({ $align, $color, $cursor, $typo }) => css`\n    /** TYPOGRAPHY STYLES */\n\n    ${isTypo($typo) && fontStyleMapping[$typo]}\n\n    text-align: ${$align};\n    cursor: ${$cursor};\n    color: ${$color};\n    ${linkStyleOverride({ color: $color })}\n  `,\n)\n"]}

package/dist/TextDateOfBirthInput/TextDateOfBirthInput.d.ts

@@ -32,4 +32,4 @@ export declare const TextDateOfBirthInput: import("react").ForwardRefExoticCompo
         message?: string;
     };
     dataTestId?: string;
-} & Pick<FieldsetProps, "label" | "assistiveText"> & import("react").RefAttributes<HTMLInputElement>>;
+} & Pick<FieldsetProps, "assistiveText" | "label"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/TextDateOfBirthInput/TextDateOfBirthInput.js

@@ -52,11 +52,11 @@ export const TextDateOfBirthInput = forwardRef(function TextDateOfBirthInput({ o
             year: numericValue,
         });
     };
-    return (_jsx(Fieldset, { label: label, assistiveText: assistiveText, completed: showCompleted && Boolean(value.day && value.month && value.year), error: Boolean(hookformError), errorMsg: hookformError?.message, "data-testid": dataTestId, children: _jsxs(Box, { flex: true, gap: "space.200", children: [_jsx(SetWidthTextInput, { ref: ref, label: "day", autoCompleteAttr: "bday-day", inputModeAttr: "numeric", "$width": 60, value: value.day || '', placeholder: "", onChange: handleDayChange, error: Boolean(hookformError?.type?.includes('day') ||
+    return (_jsx(Fieldset, { label: label, assistiveText: assistiveText, completed: showCompleted && Boolean(value.day && value.month && value.year), error: Boolean(hookformError), errorMsg: hookformError?.message, "data-testid": dataTestId, children: _jsxs(Box, { flex: true, gap: "space.200", children: [_jsx(SetWidthTextInput, { ref: ref, label: "day", autoCompleteAttr: "bday-day", inputModeAttr: "numeric", $width: 60, value: value.day || '', placeholder: "", onChange: handleDayChange, error: Boolean(hookformError?.type?.includes('day') ||
                         (hookformError?.type &&
-                            inputValidationErrorValues.includes(hookformError.type))) }), _jsx(SetWidthTextInput, { ref: monthRef, label: "month", autoCompleteAttr: "bday-month", inputModeAttr: "numeric", "$width": 60, value: value.month || '', placeholder: "", onChange: handleMonthChange, error: Boolean(hookformError?.type?.includes('month') ||
+                            inputValidationErrorValues.includes(hookformError.type))) }), _jsx(SetWidthTextInput, { ref: monthRef, label: "month", autoCompleteAttr: "bday-month", inputModeAttr: "numeric", $width: 60, value: value.month || '', placeholder: "", onChange: handleMonthChange, error: Boolean(hookformError?.type?.includes('month') ||
                         (hookformError?.type &&
-                            inputValidationErrorValues.includes(hookformError.type))) }), _jsx(SetWidthTextInput, { ref: yearRef, label: "year", autoCompleteAttr: "bday-year", inputModeAttr: "numeric", "$width": 80, value: value.year || '', placeholder: "", onChange: handleYearChange, error: Boolean(hookformError?.type?.includes('year') ||
+                            inputValidationErrorValues.includes(hookformError.type))) }), _jsx(SetWidthTextInput, { ref: yearRef, label: "year", autoCompleteAttr: "bday-year", inputModeAttr: "numeric", $width: 80, value: value.year || '', placeholder: "", onChange: handleYearChange, error: Boolean(hookformError?.type?.includes('year') ||
                         (hookformError?.type &&
                             inputValidationErrorValues.includes(hookformError.type))) })] }) }));
 });

package/dist/TextDateOfBirthInput/TextDateOfBirthInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextDateOfBirthInput.js","sourceRoot":"","sources":["../../src/TextDateOfBirthInput/TextDateOfBirthInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useRef } from 'react'\nimport styled from 'styled-components'\n\nimport { Box } from '../Box'\nimport { Fieldset, FieldsetProps } from '../fields/Fieldset'\nimport { TextInput } from '../TextInput'\nimport { InputValidationError } from '../utils/dateOfBirth/schema'\n\nexport type DateObject = {\n  day?: string | null\n  month?: string | null\n  year?: string | null\n}\n\nexport type TextDateOfBirthInputProps = {\n  value: DateObject\n  onChange: (value: DateObject) => void\n  showCompleted?: boolean\n  hookformError?: {\n    type: string\n    message?: string\n  }\n  dataTestId?: string\n} & Pick<FieldsetProps, 'label' | 'assistiveText'>\n\n/**\n * Renders a set of input fields to collect a date of birth as separate day, month,\n * and year fields.\n *\n * ### Date of birth input validations\n * - All fields are present and correctly formatted.\n * - The age is at least 17 years old.\n * - The year is not before 1900.\n */\nexport const TextDateOfBirthInput = forwardRef<\n  HTMLInputElement,\n  TextDateOfBirthInputProps\n>(function TextDateOfBirthInput(\n  {\n    onChange,\n    value,\n    label,\n    assistiveText,\n    hookformError,\n    showCompleted = false,\n    dataTestId,\n  },\n  ref,\n) {\n  const inputValidationErrorValues = Object.values(InputValidationError)\n  const monthRef = useRef<HTMLInputElement>(null)\n  const yearRef = useRef<HTMLInputElement>(null)\n\n  const filterNonNumeric = (value: string) => value.replace(/[^0-9]/g, '')\n\n  const handleDayChange = (day: string) => {\n    const numericValue = filterNonNumeric(day)\n\n    if (numericValue.length > 2) return\n\n    onChange({\n      ...value,\n      day: numericValue,\n    })\n    if (numericValue.length === 2) {\n      monthRef.current?.focus()\n    }\n  }\n\n  const handleMonthChange = (month: string) => {\n    const numericValue = filterNonNumeric(month)\n\n    if (numericValue.length > 2) return\n\n    onChange({\n      ...value,\n      month: numericValue,\n    })\n    if (numericValue.length === 2) {\n      yearRef.current?.focus()\n    }\n  }\n\n  const handleYearChange = (year: string) => {\n    const numericValue = filterNonNumeric(year)\n\n    if (numericValue.length > 4) return\n\n    onChange({\n      ...value,\n      year: numericValue,\n    })\n  }\n\n  return (\n    <Fieldset\n      label={label}\n      assistiveText={assistiveText}\n      completed={\n        showCompleted && Boolean(value.day && value.month && value.year)\n      }\n      error={Boolean(hookformError)}\n      errorMsg={hookformError?.message}\n      data-testid={dataTestId}\n    >\n      <Box flex gap=\"space.200\">\n        <SetWidthTextInput\n          ref={ref}\n          label=\"day\"\n          autoCompleteAttr=\"bday-day\"\n          inputModeAttr=\"numeric\"\n          $width={60}\n          value={value.day || ''}\n          placeholder=\"\"\n          onChange={handleDayChange}\n          error={Boolean(\n            hookformError?.type?.includes('day') ||\n            (hookformError?.type &&\n              inputValidationErrorValues.includes(\n                hookformError.type as InputValidationError,\n              )),\n          )}\n        />\n        <SetWidthTextInput\n          ref={monthRef}\n          label=\"month\"\n          autoCompleteAttr=\"bday-month\"\n          inputModeAttr=\"numeric\"\n          $width={60}\n          value={value.month || ''}\n          placeholder=\"\"\n          onChange={handleMonthChange}\n          error={Boolean(\n            hookformError?.type?.includes('month') ||\n            (hookformError?.type &&\n              inputValidationErrorValues.includes(\n                hookformError.type as InputValidationError,\n              )),\n          )}\n        />\n        <SetWidthTextInput\n          ref={yearRef}\n          label=\"year\"\n          autoCompleteAttr=\"bday-year\"\n          inputModeAttr=\"numeric\"\n          $width={80}\n          value={value.year || ''}\n          placeholder=\"\"\n          onChange={handleYearChange}\n          error={Boolean(\n            hookformError?.type?.includes('year') ||\n            (hookformError?.type &&\n              inputValidationErrorValues.includes(\n                hookformError.type as InputValidationError,\n              )),\n          )}\n        />\n      </Box>\n    </Fieldset>\n  )\n})\n\nconst SetWidthTextInput = styled(TextInput)<{ $width: number }>`\n  width: ${({ $width }) => `${$width}px`};\n`\n"]}
+{"version":3,"file":"TextDateOfBirthInput.js","sourceRoot":"","sources":["../../src/TextDateOfBirthInput/TextDateOfBirthInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useRef } from 'react'\nimport styled from 'styled-components'\n\nimport { Box } from '../Box'\nimport { Fieldset, FieldsetProps } from '../fields/Fieldset'\nimport { TextInput } from '../TextInput'\nimport { InputValidationError } from '../utils/dateOfBirth/schema'\n\nexport type DateObject = {\n  day?: string | null\n  month?: string | null\n  year?: string | null\n}\n\nexport type TextDateOfBirthInputProps = {\n  value: DateObject\n  onChange: (value: DateObject) => void\n  showCompleted?: boolean\n  hookformError?: {\n    type: string\n    message?: string\n  }\n  dataTestId?: string\n} & Pick<FieldsetProps, 'label' | 'assistiveText'>\n\n/**\n * Renders a set of input fields to collect a date of birth as separate day, month,\n * and year fields.\n *\n * ### Date of birth input validations\n * - All fields are present and correctly formatted.\n * - The age is at least 17 years old.\n * - The year is not before 1900.\n */\nexport const TextDateOfBirthInput = forwardRef<\n  HTMLInputElement,\n  TextDateOfBirthInputProps\n>(function TextDateOfBirthInput(\n  {\n    onChange,\n    value,\n    label,\n    assistiveText,\n    hookformError,\n    showCompleted = false,\n    dataTestId,\n  },\n  ref,\n) {\n  const inputValidationErrorValues = Object.values(InputValidationError)\n  const monthRef = useRef<HTMLInputElement>(null)\n  const yearRef = useRef<HTMLInputElement>(null)\n\n  const filterNonNumeric = (value: string) => value.replace(/[^0-9]/g, '')\n\n  const handleDayChange = (day: string) => {\n    const numericValue = filterNonNumeric(day)\n\n    if (numericValue.length > 2) return\n\n    onChange({\n      ...value,\n      day: numericValue,\n    })\n    if (numericValue.length === 2) {\n      monthRef.current?.focus()\n    }\n  }\n\n  const handleMonthChange = (month: string) => {\n    const numericValue = filterNonNumeric(month)\n\n    if (numericValue.length > 2) return\n\n    onChange({\n      ...value,\n      month: numericValue,\n    })\n    if (numericValue.length === 2) {\n      yearRef.current?.focus()\n    }\n  }\n\n  const handleYearChange = (year: string) => {\n    const numericValue = filterNonNumeric(year)\n\n    if (numericValue.length > 4) return\n\n    onChange({\n      ...value,\n      year: numericValue,\n    })\n  }\n\n  return (\n    <Fieldset\n      label={label}\n      assistiveText={assistiveText}\n      completed={\n        showCompleted && Boolean(value.day && value.month && value.year)\n      }\n      error={Boolean(hookformError)}\n      errorMsg={hookformError?.message}\n      data-testid={dataTestId}\n    >\n      <Box flex gap=\"space.200\">\n        <SetWidthTextInput\n          ref={ref}\n          label=\"day\"\n          autoCompleteAttr=\"bday-day\"\n          inputModeAttr=\"numeric\"\n          $width={60}\n          value={value.day || ''}\n          placeholder=\"\"\n          onChange={handleDayChange}\n          error={Boolean(\n            hookformError?.type?.includes('day') ||\n            (hookformError?.type &&\n              inputValidationErrorValues.includes(\n                hookformError.type as InputValidationError,\n              )),\n          )}\n        />\n        <SetWidthTextInput\n          ref={monthRef}\n          label=\"month\"\n          autoCompleteAttr=\"bday-month\"\n          inputModeAttr=\"numeric\"\n          $width={60}\n          value={value.month || ''}\n          placeholder=\"\"\n          onChange={handleMonthChange}\n          error={Boolean(\n            hookformError?.type?.includes('month') ||\n            (hookformError?.type &&\n              inputValidationErrorValues.includes(\n                hookformError.type as InputValidationError,\n              )),\n          )}\n        />\n        <SetWidthTextInput\n          ref={yearRef}\n          label=\"year\"\n          autoCompleteAttr=\"bday-year\"\n          inputModeAttr=\"numeric\"\n          $width={80}\n          value={value.year || ''}\n          placeholder=\"\"\n          onChange={handleYearChange}\n          error={Boolean(\n            hookformError?.type?.includes('year') ||\n            (hookformError?.type &&\n              inputValidationErrorValues.includes(\n                hookformError.type as InputValidationError,\n              )),\n          )}\n        />\n      </Box>\n    </Fieldset>\n  )\n})\n\nconst SetWidthTextInput = styled(TextInput)<{ $width: number }>`\n  width: ${({ $width }) => `${$width}px`};\n`\n"]}

package/dist/TextInput/TextInput.js

@@ -21,11 +21,11 @@ export const TextInput = forwardRef(function TextInput({ id: idProp, type = 'tex
             onAutoFill();
         }
     };
-    const frontIconToRender = frontIconComponent ? (_jsx(InputLeadingIconContainer, { "$size": 20, "$iconColor": theme.color.text.subtle, children: frontIconComponent })) : frontIcon ? (_jsx(StyledFrontIcon, { "$disabled": disabled, render: frontIcon, color: "color.icon.base" })) : null;
-    const trailingIconToRender = trailingIconComponent ? (_jsx(InputLeadingIconContainer, { "$size": 20, "$iconColor": theme.color.text.subtle, children: trailingIconComponent })) : trailingIcon ? (_jsx(StyledTrailingIcon, { "$disabled": disabled, render: trailingIcon, color: "color.icon.base" })) : null;
-    return (_jsx(Field, { ...fieldProps, htmlFor: id, error: error, children: _jsxs(Box, { flex: true, alignItems: "center", justifyContent: "flex-start", children: [frontIconToRender && frontIconToRender, _jsx(Input, { disabled: disabled, type: type, id: id, name: name, ref: ref, onAnimationEnd: handleAnimationEnd, placeholder: placeholder, value: value, "$error": error, "$frontIcon": Boolean(frontIconToRender), "$fallbackStyle": fallbackStyle, autoComplete: autoCompleteAttr, onChange: (e) => {
+    const frontIconToRender = frontIconComponent ? (_jsx(InputLeadingIconContainer, { $size: 20, $iconColor: theme.color.text.subtle, children: frontIconComponent })) : frontIcon ? (_jsx(StyledFrontIcon, { $disabled: disabled, render: frontIcon, color: "color.icon.base" })) : null;
+    const trailingIconToRender = trailingIconComponent ? (_jsx(InputLeadingIconContainer, { $size: 20, $iconColor: theme.color.text.subtle, children: trailingIconComponent })) : trailingIcon ? (_jsx(StyledTrailingIcon, { $disabled: disabled, render: trailingIcon, color: "color.icon.base" })) : null;
+    return (_jsx(Field, { ...fieldProps, htmlFor: id, error: error, children: _jsxs(Box, { flex: true, alignItems: "center", justifyContent: "flex-start", children: [frontIconToRender, _jsx(Input, { disabled: disabled, type: type, id: id, name: name, ref: ref, onAnimationEnd: handleAnimationEnd, placeholder: placeholder, value: value, $error: error, $frontIcon: Boolean(frontIconToRender), $fallbackStyle: fallbackStyle, autoComplete: autoCompleteAttr, onChange: (e) => {
                         onChange?.(e.currentTarget.value);
                         onInputChange?.(e);
-                    }, onBlur: onBlur, inputMode: inputModeAttr }), trailingIconToRender && trailingIconToRender] }) }));
+                    }, onBlur: onBlur, inputMode: inputModeAttr }), trailingIconToRender] }) }));
 });
 //# sourceMappingURL=TextInput.js.map