@mrshmllw/smores-react 10.7.0-crumbs-feature-vite-bundling.1 → 10.7.0

package/dist/SupportMessage/SupportMessage.js

@@ -0,0 +1,86 @@
+import { darken } from 'polished';
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { Box } from '../Box';
+import { Icon } from '../Icon';
+import { Text } from '../Text';
+import { theme } from '../theme';
+import { isReactElement } from '../utils/isReactElement';
+const styles = {
+    info: {
+        iconColor: 'liquorice',
+        backgroundColor: theme.colors.oatmeal,
+        hoverBackgroundColor: darken(0.1, theme.colors.oatmeal),
+        icon: 'info',
+    },
+    fallbackStyle: {
+        iconColor: 'liquorice',
+        backgroundColor: theme.colors.coconut,
+        hoverBackgroundColor: darken(0.1, theme.colors.coconut),
+        icon: 'info',
+    },
+    alert: {
+        iconColor: 'tangerine',
+        backgroundColor: theme.colors.sherbert,
+        hoverBackgroundColor: darken(0.1, theme.colors.sherbert),
+        icon: 'alert',
+    },
+    warning: {
+        iconColor: 'strawberry',
+        backgroundColor: theme.colors.watermelon,
+        hoverBackgroundColor: darken(0.1, theme.colors.watermelon),
+        icon: 'warning',
+    },
+    success: {
+        iconColor: 'apple',
+        backgroundColor: theme.colors.mint,
+        hoverBackgroundColor: darken(0.1, theme.colors.mint),
+        icon: 'circle-tick',
+    },
+};
+export const SupportMessage = ({ className, description, onClick, rightSideComponent, type, title, ...marginProps }) => {
+    return (React.createElement(Wrapper, { className: className, "$type": type, onClick: onClick, ...marginProps },
+        React.createElement(IconWrapper, null,
+            React.createElement(Icon, { size: 20, render: styles[type].icon, color: styles[type].iconColor })),
+        React.createElement(Box, { flex: true, direction: "column", mx: "8px" },
+            title && React.createElement(Title, null, title),
+            isReactElement(description) ? (React.createElement(DescriptionBox, null, description)) : (React.createElement(Description, { tag: "p" }, description))),
+        rightSideComponent,
+        onClick && rightSideComponent === undefined && (React.createElement(Box, { ml: { custom: 'auto' } },
+            React.createElement(Icon, { size: 16, render: "caret", color: "marzipan", rotate: 270 })))));
+};
+const IconWrapper = styled(Box) `
+  align-self: flex-start;
+`;
+const Wrapper = styled(Box)(({ $type, onClick }) => css `
+    align-items: center;
+    background-color: ${styles[$type].backgroundColor};
+    border-radius: 16px;
+    ${onClick && `cursor: pointer`};
+    padding: 12px;
+    display: flex;
+    width: 100%;
+
+    &:hover,
+    &:active {
+      ${onClick && `background-color: ${styles[$type].hoverBackgroundColor};`};
+    }
+  `);
+const Title = styled.p `
+  font-size: 16px;
+  font-weight: ${theme.font.weight.medium};
+  color: ${theme.colors.liquorice};
+  line-height: 20.8px;
+  margin-bottom: 4px;
+`;
+const DescriptionBox = styled(Box) `
+  color: ${theme.colors.liquorice};
+  font-size: 14px;
+  line-height: 20px;
+`;
+const Description = styled(Text) `
+  color: ${theme.colors.liquorice};
+  font-size: 14px;
+  line-height: 20px;
+`;
+//# sourceMappingURL=SupportMessage.js.map

package/dist/SupportMessage/SupportMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SupportMessage.js","sourceRoot":"","sources":["../../src/SupportMessage/SupportMessage.tsx"],"names":[],"mappings":"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","sourcesContent":["import { darken } from 'polished'\nimport React, { FC, MouseEventHandler, ReactElement } from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { Box } from '../Box'\nimport { Icon } from '../Icon'\nimport { Icons } from '../Icon/iconsList'\n\nimport { Text } from '../Text'\nimport { Color, theme } from '../theme'\nimport { isReactElement } from '../utils/isReactElement'\nimport { MarginProps } from '../utils/space'\n\ntype StylesItem = {\n  iconColor: Color\n  backgroundColor: string\n  hoverBackgroundColor: string\n  icon: Icons\n}\n\nconst styles: Record<SupportMessageType, StylesItem> = {\n  info: {\n    iconColor: 'liquorice',\n    backgroundColor: theme.colors.oatmeal,\n    hoverBackgroundColor: darken(0.1, theme.colors.oatmeal),\n    icon: 'info',\n  },\n  fallbackStyle: {\n    iconColor: 'liquorice',\n    backgroundColor: theme.colors.coconut,\n    hoverBackgroundColor: darken(0.1, theme.colors.coconut),\n    icon: 'info',\n  },\n  alert: {\n    iconColor: 'tangerine',\n    backgroundColor: theme.colors.sherbert,\n    hoverBackgroundColor: darken(0.1, theme.colors.sherbert),\n    icon: 'alert',\n  },\n  warning: {\n    iconColor: 'strawberry',\n    backgroundColor: theme.colors.watermelon,\n    hoverBackgroundColor: darken(0.1, theme.colors.watermelon),\n    icon: 'warning',\n  },\n  success: {\n    iconColor: 'apple',\n    backgroundColor: theme.colors.mint,\n    hoverBackgroundColor: darken(0.1, theme.colors.mint),\n    icon: 'circle-tick',\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  return (\n    <Wrapper\n      className={className}\n      $type={type}\n      onClick={onClick}\n      {...marginProps}\n    >\n      <IconWrapper>\n        <Icon\n          size={20}\n          render={styles[type].icon}\n          color={styles[type].iconColor}\n        />\n      </IconWrapper>\n      <Box flex direction=\"column\" mx=\"8px\">\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          <Icon size={16} render=\"caret\" color=\"marzipan\" rotate={270} />\n        </Box>\n      )}\n    </Wrapper>\n  )\n}\n\ninterface IWrapper {\n  $type: SupportMessageType\n  onClick?: MouseEventHandler\n}\n\nconst IconWrapper = styled(Box)`\n  align-self: flex-start;\n`\n\nconst Wrapper = styled(Box)<IWrapper>(\n  ({ $type, onClick }) => css`\n    align-items: center;\n    background-color: ${styles[$type].backgroundColor};\n    border-radius: 16px;\n    ${onClick && `cursor: pointer`};\n    padding: 12px;\n    display: flex;\n    width: 100%;\n\n    &:hover,\n    &:active {\n      ${onClick && `background-color: ${styles[$type].hoverBackgroundColor};`};\n    }\n  `,\n)\n\nconst Title = styled.p`\n  font-size: 16px;\n  font-weight: ${theme.font.weight.medium};\n  color: ${theme.colors.liquorice};\n  line-height: 20.8px;\n  margin-bottom: 4px;\n`\n\nconst DescriptionBox = styled(Box)`\n  color: ${theme.colors.liquorice};\n  font-size: 14px;\n  line-height: 20px;\n`\n\nconst Description = styled(Text)`\n  color: ${theme.colors.liquorice};\n  font-size: 14px;\n  line-height: 20px;\n`\n"]}

package/dist/SupportMessage/index.d.ts

@@ -0,0 +1 @@
+export * from './SupportMessage';

package/dist/SupportMessage/index.js

@@ -0,0 +1,2 @@
+export * from './SupportMessage';
+//# sourceMappingURL=index.js.map

package/dist/SupportMessage/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/SupportMessage/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAA","sourcesContent":["export * from './SupportMessage'\n"]}

package/dist/Table/Table.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { TableProps } from './types';
+/**
+ * A table component that displays data with various features such as expandable rows, striped rows, and fixed headers.
+ *
+ * ## Caveats:
+ * - `subRows` should always have the same columns as the Parent table
+ * - `stripedColor` wont be applied to `subRows` or `subTables`
+ * - `rowActions` will always need an `onClick`, this will be automatically passed onto the `ReactNode` you place & will be selectable
+ * - Rows will scale depending on the cell content size
+ * - Using `clickableRow` with clickable cells, ensure you use `e.stopPropagation` in your cells `onClick`
+ *
+ * ## Improvements:
+ * - It would be nice if we expandable logic inside this component, e.g the presence of certain props would automatically add this
+ */
+export declare const Table: <T extends object>({ columns, data, fixedHeader, hasKeyline, expandable, subTable, subRows, headerHeight, headerColor, rowColor, stripedColor, rowBorderColor, rowActions, clickableRow, rowPadding, columnPadding, noDataContent, hideTableHeader, }: TableProps<T>) => React.JSX.Element;

package/dist/Table/Table.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Text } from '../Text';
+import { TableHeader } from './components/TableHeader';
+import { TableRow } from './components/TableRow';
+import { StyledCell, StyledTable } from './components/commonComponents';
+/**
+ * A table component that displays data with various features such as expandable rows, striped rows, and fixed headers.
+ *
+ * ## Caveats:
+ * - `subRows` should always have the same columns as the Parent table
+ * - `stripedColor` wont be applied to `subRows` or `subTables`
+ * - `rowActions` will always need an `onClick`, this will be automatically passed onto the `ReactNode` you place & will be selectable
+ * - Rows will scale depending on the cell content size
+ * - Using `clickableRow` with clickable cells, ensure you use `e.stopPropagation` in your cells `onClick`
+ *
+ * ## Improvements:
+ * - It would be nice if we expandable logic inside this component, e.g the presence of certain props would automatically add this
+ */
+export const Table = ({ columns, data, fixedHeader = true, hasKeyline = false, expandable, subTable, subRows, headerHeight, headerColor = 'mascarpone', rowColor = 'custard', stripedColor, rowBorderColor = 'oatmeal', rowActions, clickableRow, rowPadding, columnPadding, noDataContent, hideTableHeader = false, }) => {
+    const showActionsCell = expandable || rowActions;
+    const expandSubProp = showActionsCell ? columns.length + 1 : columns.length;
+    return (React.createElement(StyledTable, null,
+        !hideTableHeader && (React.createElement("thead", null,
+            React.createElement(TableHeader, { columns: columns, fixedHeader: fixedHeader, headerHeight: headerHeight, subTable: subTable, headerColor: headerColor, rowActions: rowActions, columnPadding: columnPadding, expandable: expandable, hasKeyline: hasKeyline }))),
+        React.createElement("tbody", null,
+            data.length === 0 && (React.createElement("tr", null,
+                React.createElement(StyledCell, { colSpan: expandSubProp, "$rowPadding": rowPadding, "$columnPadding": columnPadding }, noDataContent ? (noDataContent) : (React.createElement(Text, { align: "center" }, "No available data"))))),
+            data.length !== 0 &&
+                data.map((row, rowIndex) => (React.createElement(TableRow, { key: rowIndex, rowData: row, rowIndex: rowIndex, columns: columns, rowActions: rowActions, stripedColor: stripedColor, subTable: subTable, subRows: subRows, rowColor: rowColor, rowBorderColor: rowBorderColor, rowPadding: rowPadding, columnPadding: columnPadding, expandable: expandable, clickableRow: clickableRow }))))));
+};
+//# sourceMappingURL=Table.js.map

package/dist/Table/Table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../src/Table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAA;AAGvE;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,CAAmB,EACtC,OAAO,EACP,IAAI,EACJ,WAAW,GAAG,IAAI,EAClB,UAAU,GAAG,KAAK,EAClB,UAAU,EACV,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,WAAW,GAAG,YAAY,EAC1B,QAAQ,GAAG,SAAS,EACpB,YAAY,EACZ,cAAc,GAAG,SAAS,EAC1B,UAAU,EACV,YAAY,EACZ,UAAU,EACV,aAAa,EACb,aAAa,EACb,eAAe,GAAG,KAAK,GACT,EAAE,EAAE;IAClB,MAAM,eAAe,GAAG,UAAU,IAAI,UAAU,CAAA;IAChD,MAAM,aAAa,GAAG,eAAe,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAA;IAC3E,OAAO,CACL,oBAAC,WAAW;QACT,CAAC,eAAe,IAAI,CACnB;YACE,oBAAC,WAAW,IACV,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,EAC5B,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,GACtB,CACI,CACT;QACD;YACG,IAAI,CAAC,MAAM,KAAK,CAAC,IAAI,CACpB;gBACE,oBAAC,UAAU,IACT,OAAO,EAAE,aAAa,iBACT,UAAU,oBACP,aAAa,IAE5B,aAAa,CAAC,CAAC,CAAC,CACf,aAAa,CACd,CAAC,CAAC,CAAC,CACF,oBAAC,IAAI,IAAC,KAAK,EAAC,QAAQ,wBAAyB,CAC9C,CACU,CACV,CACN;YACA,IAAI,CAAC,MAAM,KAAK,CAAC;gBAChB,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,QAAQ,EAAE,EAAE,CAAC,CAC1B,oBAAC,QAAQ,IACP,GAAG,EAAE,QAAQ,EACb,OAAO,EAAE,GAAG,EACZ,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,EACtB,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,cAAc,EAC9B,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,EAC5B,UAAU,EAAE,UAAU,EACtB,YAAY,EAAE,YAAY,GAC1B,CACH,CAAC,CACE,CACI,CACf,CAAA;AACH,CAAC,CAAA","sourcesContent":["import React from 'react'\nimport { Text } from '../Text'\nimport { TableHeader } from './components/TableHeader'\nimport { TableRow } from './components/TableRow'\nimport { StyledCell, StyledTable } from './components/commonComponents'\nimport { TableProps } from './types'\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>({\n  columns,\n  data,\n  fixedHeader = true,\n  hasKeyline = false,\n  expandable,\n  subTable,\n  subRows,\n  headerHeight,\n  headerColor = 'mascarpone',\n  rowColor = 'custard',\n  stripedColor,\n  rowBorderColor = 'oatmeal',\n  rowActions,\n  clickableRow,\n  rowPadding,\n  columnPadding,\n  noDataContent,\n  hideTableHeader = false,\n}: TableProps<T>) => {\n  const showActionsCell = expandable || rowActions\n  const expandSubProp = showActionsCell ? columns.length + 1 : columns.length\n  return (\n    <StyledTable>\n      {!hideTableHeader && (\n        <thead>\n          <TableHeader\n            columns={columns}\n            fixedHeader={fixedHeader}\n            headerHeight={headerHeight}\n            subTable={subTable}\n            headerColor={headerColor}\n            rowActions={rowActions}\n            columnPadding={columnPadding}\n            expandable={expandable}\n            hasKeyline={hasKeyline}\n          />\n        </thead>\n      )}\n      <tbody>\n        {data.length === 0 && (\n          <tr>\n            <StyledCell\n              colSpan={expandSubProp}\n              $rowPadding={rowPadding}\n              $columnPadding={columnPadding}\n            >\n              {noDataContent ? (\n                noDataContent\n              ) : (\n                <Text align=\"center\">No available data</Text>\n              )}\n            </StyledCell>\n          </tr>\n        )}\n        {data.length !== 0 &&\n          data.map((row, rowIndex) => (\n            <TableRow\n              key={rowIndex}\n              rowData={row}\n              rowIndex={rowIndex}\n              columns={columns}\n              rowActions={rowActions}\n              stripedColor={stripedColor}\n              subTable={subTable}\n              subRows={subRows}\n              rowColor={rowColor}\n              rowBorderColor={rowBorderColor}\n              rowPadding={rowPadding}\n              columnPadding={columnPadding}\n              expandable={expandable}\n              clickableRow={clickableRow}\n            />\n          ))}\n      </tbody>\n    </StyledTable>\n  )\n}\n"]}

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { RowActionsProps } from '../types';
+export declare const RowActions: <T extends object>({ rowData, rowActions, expandable, isExpanded, toggleExpansion, }: RowActionsProps<T>) => React.JSX.Element;

package/dist/Table/components/RowActions.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Box } from '../../Box';
+import { Button } from '../../Button';
+import { IconStrict } from '../../IconStrict';
+import { Tooltip } from '../../Tooltip';
+import { focusOutlineStyle } from '../../utils/focusOutline';
+import { isReactElement } from '../../utils/isReactElement';
+import { StyledCell } from './commonComponents';
+export const RowActions = ({ rowData, rowActions, expandable, isExpanded, toggleExpansion, }) => {
+    const handleAction = async (e, action) => {
+        e.stopPropagation();
+        await action(rowData);
+    };
+    return (React.createElement(StyledCell, { "$stickyCell": Boolean(rowActions) || Boolean(expandable), "$rowActionsBgColor": rowActions?.bgColor },
+        React.createElement(Box, { flex: true, alignItems: "center", justifyContent: "flex-end" },
+            rowActions?.actions?.map((action, actionIndex) => {
+                if (!action.showCondition || action.showCondition(rowData)) {
+                    return (React.createElement(Wrapper, { flex: true, key: actionIndex },
+                        'element' in action &&
+                            isReactElement(action.element) &&
+                            React.cloneElement(action.element, {
+                                onClick: async (e) => {
+                                    await handleAction(e, action.onClick);
+                                },
+                                tabIndex: 0,
+                                className: 'reactElementRowAction',
+                            }),
+                        !('element' in action) && action.genericButton && (React.createElement(Button, { ...action.genericButton, handleClick: (e) => void handleAction(e, action.onClick) }, action.genericButton.children)),
+                        !('element' in action) &&
+                            action.iconButton &&
+                            (action.iconButton?.tooltipText ? (React.createElement(Tooltip, { content: action.iconButton.tooltipText, position: 'bottom', variant: "bubblegum" },
+                                React.createElement(IconStrict, { ...action.iconButton, handleClick: (e) => void handleAction(e, action.onClick) }))) : (React.createElement(IconStrict, { ...action.iconButton, handleClick: (e) => void handleAction(e, action.onClick) })))));
+                }
+                return null;
+            }),
+            expandable?.(rowData) && (React.createElement(CaretIcon, { render: "caret", handleClick: (e) => {
+                    e.stopPropagation();
+                    toggleExpansion();
+                }, size: 36, "$isOpen": isExpanded, backgroundColor: "cream" })))));
+};
+const Wrapper = styled(Box) `
+  white-space: nowrap;
+  margin-right: 8px;
+
+  &:last-child {
+    margin-right: 0px;
+  }
+
+  .reactElementRowAction {
+    cursor: pointer;
+    ${focusOutlineStyle}
+  }
+`;
+const CaretIcon = styled(IconStrict)(({ $isOpen }) => `
+    transform: ${$isOpen ? 'rotate(90deg)' : 'rotate(0deg)'};
+    transition: transform 0.3s ease;
+  `);
+//# sourceMappingURL=RowActions.js.map

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

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

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { TableHeaderProps } from '../types';
+export declare const TableHeader: <T extends object>({ columns, fixedHeader, headerColor, rowActions, headerHeight, columnPadding, expandable, hasKeyline, }: TableHeaderProps<T>) => React.JSX.Element;

package/dist/Table/components/TableHeader.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { StyledHeaderCell, StyledRow } from './commonComponents';
+export const TableHeader = ({ columns, fixedHeader, headerColor, rowActions, headerHeight, columnPadding, expandable, hasKeyline, }) => {
+    return (React.createElement(StyledRow, null,
+        columns.map((column, columnIndex) => (React.createElement(StyledHeaderCell, { key: columnIndex, "$fixedHeader": fixedHeader, "$headerHeight": headerHeight, "$minWidth": column.minWidth, "$maxWidth": column.maxWidth, "$headerColor": headerColor, "$columnPadding": columnPadding, "$hasKeyline": hasKeyline }, column.name))),
+        (expandable || rowActions) && (React.createElement(StyledHeaderCell, { "$fixedHeader": fixedHeader, "$stickyCell": true, "$minWidth": rowActions?.minWidth, "$headerColor": headerColor, "$columnPadding": columnPadding, "$hasKeyline": hasKeyline }, "Actions"))));
+};
+//# sourceMappingURL=TableHeader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableHeader.js","sourceRoot":"","sources":["../../../src/Table/components/TableHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,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,OAAO,CACL,oBAAC,SAAS;QACP,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,WAAW,EAAE,EAAE,CAAC,CACpC,oBAAC,gBAAgB,IACf,GAAG,EAAE,WAAW,kBACF,WAAW,mBACV,YAAY,eAChB,MAAM,CAAC,QAAQ,eACf,MAAM,CAAC,QAAQ,kBACZ,WAAW,oBACT,aAAa,iBAChB,UAAU,IAEtB,MAAM,CAAC,IAAI,CACK,CACpB,CAAC;QACD,CAAC,UAAU,IAAI,UAAU,CAAC,IAAI,CAC7B,oBAAC,gBAAgB,oBACD,WAAW,iBACZ,IAAI,eACN,UAAU,EAAE,QAAQ,kBACjB,WAAW,oBACT,aAAa,iBAChB,UAAU,cAGN,CACpB,CACS,CACb,CAAA;AACH,CAAC,CAAA","sourcesContent":["import React from 'react'\nimport { 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  return (\n    <StyledRow>\n      {columns.map((column, columnIndex) => (\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      {(expandable || rowActions) && (\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.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { TableRowProps } from '../types';
+export declare const TableRow: <T extends object>({ rowData, rowIndex, columns, subRows, subTable, stripedColor, rowActions, rowColor, rowBorderColor, rowPadding, columnPadding, showActions, expandable, clickableRow, }: TableRowProps<T>) => React.JSX.Element;

package/dist/Table/components/TableRow.js

@@ -0,0 +1,71 @@
+import React, { useState } from 'react';
+import { isReactElement } from '../../utils/isReactElement';
+import { isMappedReactElement } from '../helpers';
+import { RowActions } from './RowActions';
+import { StyledCell, StyledRow } from './commonComponents';
+export const TableRow = ({ rowData, rowIndex, columns, subRows, subTable, stripedColor, rowActions, rowColor, rowBorderColor, rowPadding, columnPadding, showActions, expandable, clickableRow, }) => {
+    const [expandedRows, setExpandedRows] = useState([]);
+    const toggleRowExpansion = (rowIndex) => {
+        setExpandedRows((prevState) => prevState.includes(rowIndex)
+            ? prevState.filter((index) => index !== rowIndex)
+            : [...prevState, rowIndex]);
+    };
+    const subRowsData = subRows?.rows(rowData);
+    const subTableData = subTable?.table(rowData);
+    const showSubRowsOnExpand = subRows?.showOnExpand?.(rowData);
+    const showSubTableOnExpand = subTable?.showOnExpand?.(rowData);
+    const showActionsCell = expandable || rowActions;
+    const expandSubProp = showActionsCell ? columns.length + 1 : columns.length;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(StyledRow, { "$stripedColor": stripedColor, "$rowColor": rowColor, "$rowBorderColor": rowBorderColor, "$clickableRow": !!clickableRow, onClick: () => clickableRow && clickableRow(rowData), tabIndex: clickableRow && 0 },
+            columns.map((column, columnIndex) => {
+                let cellContent;
+                if (column.cell) {
+                    cellContent = column.cell(rowData, rowIndex, column, rowIndex);
+                }
+                return (React.createElement(StyledCell, { key: columnIndex, "$rowPadding": rowPadding, "$columnPadding": columnPadding, "$minWidth": column.minWidth, "$maxWidth": column.maxWidth, "$noWrapContent": column.noWrapContent, "$truncateContent": column.truncateContent, "$hideOverflow": column.hideOverflow }, cellContent));
+            }),
+            (showActionsCell || showActions) && (React.createElement(RowActions, { expandable: expandable, rowActions: rowActions, rowData: rowData, isExpanded: expandedRows.includes(rowIndex), toggleExpansion: () => toggleRowExpansion(rowIndex) }))),
+        expandedRows.includes(rowIndex) && (React.createElement(React.Fragment, null,
+            subRows &&
+                subRowsData &&
+                showSubRowsOnExpand &&
+                isReactElement(subRowsData) &&
+                React.cloneElement(subRowsData, {
+                    rowPadding: rowPadding,
+                    columnPadding: columnPadding,
+                }),
+            subRows &&
+                subRowsData &&
+                showSubRowsOnExpand &&
+                isMappedReactElement(subRowsData) &&
+                subRowsData.map((row) => React.cloneElement(row, {
+                    rowPadding: rowPadding,
+                    showActions: showActionsCell,
+                })),
+            subTable && showSubTableOnExpand && subTableData && (React.createElement(StyledCell, { colSpan: expandSubProp }, React.cloneElement(subTableData, {
+                rowPadding: rowPadding,
+                columnPadding: columnPadding,
+            }))))),
+        subRows &&
+            subRowsData &&
+            !showSubRowsOnExpand &&
+            isReactElement(subRowsData) &&
+            React.cloneElement(subRowsData, {
+                rowPadding: rowPadding,
+                columnPadding: columnPadding,
+            }),
+        subRows &&
+            subRowsData &&
+            !showSubRowsOnExpand &&
+            isMappedReactElement(subRowsData) &&
+            subRowsData.map((row) => React.cloneElement(row, {
+                rowPadding: rowPadding,
+                columnPadding: columnPadding,
+            })),
+        subTable && subTableData && !showSubTableOnExpand && (React.createElement(StyledCell, { colSpan: expandSubProp }, React.cloneElement(subTableData, {
+            rowPadding: rowPadding,
+            columnPadding: columnPadding,
+        })))));
+};
+//# sourceMappingURL=TableRow.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableRow.js","sourceRoot":"","sources":["../../../src/Table/components/TableRow.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { ReactNode, useState } from 'react'\nimport { isReactElement } from '../../utils/isReactElement'\nimport { isMappedReactElement } from '../helpers'\nimport { TableRowProps } from '../types'\nimport { RowActions } from './RowActions'\nimport { StyledCell, StyledRow } from './commonComponents'\n\nexport const TableRow = <T extends object>({\n  rowData,\n  rowIndex,\n  columns,\n  subRows,\n  subTable,\n  stripedColor,\n  rowActions,\n  rowColor,\n  rowBorderColor,\n  rowPadding,\n  columnPadding,\n  showActions,\n  expandable,\n  clickableRow,\n}: TableRowProps<T>) => {\n  const [expandedRows, setExpandedRows] = useState<number[]>([])\n\n  const toggleRowExpansion = (rowIndex: number) => {\n    setExpandedRows((prevState) =>\n      prevState.includes(rowIndex)\n        ? prevState.filter((index) => index !== rowIndex)\n        : [...prevState, rowIndex],\n    )\n  }\n\n  const subRowsData = subRows?.rows(rowData)\n  const subTableData = subTable?.table(rowData)\n  const showSubRowsOnExpand = subRows?.showOnExpand?.(rowData)\n  const showSubTableOnExpand = subTable?.showOnExpand?.(rowData)\n\n  const showActionsCell = expandable || rowActions\n  const expandSubProp = showActionsCell ? columns.length + 1 : columns.length\n\n  return (\n    <>\n      <StyledRow\n        $stripedColor={stripedColor}\n        $rowColor={rowColor}\n        $rowBorderColor={rowBorderColor}\n        $clickableRow={!!clickableRow}\n        onClick={() => clickableRow && clickableRow(rowData)}\n        tabIndex={clickableRow && 0}\n      >\n        {columns.map((column, columnIndex) => {\n          let cellContent: ReactNode\n          if (column.cell) {\n            cellContent = column.cell(rowData, rowIndex, column, rowIndex)\n          }\n\n          return (\n            <StyledCell\n              key={columnIndex}\n              $rowPadding={rowPadding}\n              $columnPadding={columnPadding}\n              $minWidth={column.minWidth}\n              $maxWidth={column.maxWidth}\n              $noWrapContent={column.noWrapContent}\n              $truncateContent={column.truncateContent}\n              $hideOverflow={column.hideOverflow}\n            >\n              {cellContent}\n            </StyledCell>\n          )\n        })}\n\n        {(showActionsCell || showActions) && (\n          <RowActions\n            expandable={expandable}\n            rowActions={rowActions}\n            rowData={rowData}\n            isExpanded={expandedRows.includes(rowIndex)}\n            toggleExpansion={() => toggleRowExpansion(rowIndex)}\n          />\n        )}\n      </StyledRow>\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      {expandedRows.includes(rowIndex) && (\n        <>\n          {subRows &&\n            subRowsData &&\n            showSubRowsOnExpand &&\n            isReactElement(subRowsData) &&\n            React.cloneElement(subRowsData, {\n              rowPadding: rowPadding,\n              columnPadding: columnPadding,\n            })}\n\n          {subRows &&\n            subRowsData &&\n            showSubRowsOnExpand &&\n            isMappedReactElement(subRowsData) &&\n            subRowsData.map((row) =>\n              React.cloneElement(row, {\n                rowPadding: rowPadding,\n                showActions: showActionsCell,\n              }),\n            )}\n\n          {subTable && showSubTableOnExpand && subTableData && (\n            <StyledCell colSpan={expandSubProp}>\n              {React.cloneElement(subTableData, {\n                rowPadding: rowPadding,\n                columnPadding: columnPadding,\n              })}\n            </StyledCell>\n          )}\n        </>\n      )}\n      {/**\n       * This could be extracted out and cleaned up\n       * this section is for rendering things under a row,\n       * without the need to expand.\n       * Items rendered here wont show when expanded\n       */}\n      {subRows &&\n        subRowsData &&\n        !showSubRowsOnExpand &&\n        isReactElement(subRowsData) &&\n        React.cloneElement(subRowsData, {\n          rowPadding: rowPadding,\n          columnPadding: columnPadding,\n        })}\n      {subRows &&\n        subRowsData &&\n        !showSubRowsOnExpand &&\n        isMappedReactElement(subRowsData) &&\n        subRowsData.map((row) =>\n          React.cloneElement(row, {\n            rowPadding: rowPadding,\n            columnPadding: columnPadding,\n          }),\n        )}\n      {subTable && subTableData && !showSubTableOnExpand && (\n        <StyledCell colSpan={expandSubProp}>\n          {React.cloneElement(subTableData, {\n            rowPadding: rowPadding,\n            columnPadding: columnPadding,\n          })}\n        </StyledCell>\n      )}\n    </>\n  )\n}\n"]}

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

@@ -0,0 +1,6 @@
+import { TransientProps } from 'utils/utilTypes';
+import { TableStylesProps } from '../types';
+export declare const StyledTable: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, never>> & string;
+export declare const StyledHeaderCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, TransientProps<TableStylesProps>>> & string;
+export declare const StyledCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, TransientProps<TableStylesProps>>> & string;
+export declare const StyledRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, TransientProps<TableStylesProps>>> & string;

package/dist/Table/components/commonComponents.js

@@ -0,0 +1,138 @@
+import { darken } from 'polished';
+import styled, { css } from 'styled-components';
+import { fontStyleMapping } from '../../Text/fontMapping';
+import { theme } from '../../theme';
+import { focusOutlineStyle } from '../../utils/focusOutline';
+export const StyledTable = styled.table `
+  width: 100%;
+  height: 100%;
+  border-collapse: collapse;
+  overflow: auto;
+  background: ${theme.colors.coconut};
+  border-spacing: 30px;
+`;
+export const StyledHeaderCell = styled.th `
+  background: ${theme.colors.coconut};
+  border-bottom: ${({ $hasKeyline }) => $hasKeyline ? `1px solid ${theme.colors.liquorice}` : 'none'};
+  position: ${({ $fixedHeader }) => ($fixedHeader ? 'sticky' : 'auto')};
+  top: 0;
+  z-index: 2;
+  text-align: left;
+  vertical-align: bottom;
+  ${fontStyleMapping.label};
+  padding-left: 8px;
+  padding-right: 8px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+
+  ${({ $headerColor }) => $headerColor &&
+    css `
+      background: ${theme.colors[$headerColor]};
+    `}
+
+  ${({ $headerHeight }) => $headerHeight &&
+    css `
+      height: ${$headerHeight};
+    `}
+
+  ${({ $maxWidth }) => $maxWidth &&
+    css `
+      max-width: ${$maxWidth};
+    `}
+
+  ${({ $minWidth }) => $minWidth &&
+    css `
+      min-width: ${$minWidth};
+    `}
+    
+  ${({ $columnPadding }) => $columnPadding &&
+    css `
+      padding-left: ${$columnPadding};
+      padding-right: ${$columnPadding};
+    `};
+`;
+export const StyledCell = styled.td `
+  vertical-align: middle;
+  padding-left: 8px;
+  padding-right: 8px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+
+  ${({ $hideOverflow }) => $hideOverflow &&
+    css `
+      overflow: hidden;
+    `};
+
+  ${({ $noWrapContent }) => $noWrapContent &&
+    css `
+      white-space: nowrap;
+    `};
+
+  ${({ $truncateContent }) => $truncateContent &&
+    css `
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    `};
+
+  ${({ $stickyCell }) => $stickyCell &&
+    css `
+      position: sticky;
+      right: 0;
+    `};
+
+  ${({ $rowPadding }) => $rowPadding &&
+    css `
+      padding-top: ${$rowPadding};
+      padding-bottom: ${$rowPadding};
+    `};
+
+  ${({ $columnPadding }) => $columnPadding &&
+    css `
+      padding-left: ${$columnPadding};
+      padding-right: ${$columnPadding};
+    `};
+
+  ${({ $maxWidth }) => $maxWidth &&
+    css `
+      max-width: ${$maxWidth};
+    `}
+
+  ${({ $rowActionsBgColor }) => $rowActionsBgColor &&
+    css `
+      background: ${theme.colors[$rowActionsBgColor]};
+    `}
+`;
+export const StyledRow = styled.tr `
+  background: ${theme.colors.custard};
+
+  ${({ $rowBorderColor }) => $rowBorderColor &&
+    css `
+      border-bottom: 1px solid ${theme.colors[$rowBorderColor]};
+    `}
+
+  ${({ $rowColor }) => $rowColor &&
+    css `
+      background: ${theme.colors[$rowColor]};
+    `}
+
+  ${({ $stripedColor }) => $stripedColor &&
+    css `
+      &:nth-child(even) {
+        background: ${theme.colors[$stripedColor]};
+      }
+    `}
+
+    ${({ $clickableRow, $rowColor }) => $clickableRow &&
+    css `
+      cursor: pointer;
+      &:hover {
+        background: ${darken(0.1, theme.colors[$rowColor ?? 'custard'])};
+      }
+      &:focus-visible {
+        ${focusOutlineStyle}
+        background: ${darken(0.1, theme.colors[$rowColor ?? 'custard'])};
+      }
+    `}
+`;
+//# sourceMappingURL=commonComponents.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"commonComponents.js","sourceRoot":"","sources":["../../../src/Table/components/commonComponents.tsx"],"names":[],"mappings":"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","sourcesContent":["import { darken } from 'polished'\nimport styled, { css } from 'styled-components'\nimport { TransientProps } from 'utils/utilTypes'\nimport { fontStyleMapping } from '../../Text/fontMapping'\nimport { theme } from '../../theme'\nimport { focusOutlineStyle } from '../../utils/focusOutline'\nimport { TableStylesProps } from '../types'\n\nexport const StyledTable = styled.table`\n  width: 100%;\n  height: 100%;\n  border-collapse: collapse;\n  overflow: auto;\n  background: ${theme.colors.coconut};\n  border-spacing: 30px;\n`\n\nexport const StyledHeaderCell = styled.th<TransientProps<TableStylesProps>>`\n  background: ${theme.colors.coconut};\n  border-bottom: ${({ $hasKeyline }) =>\n    $hasKeyline ? `1px solid ${theme.colors.liquorice}` : 'none'};\n  position: ${({ $fixedHeader }) => ($fixedHeader ? 'sticky' : 'auto')};\n  top: 0;\n  z-index: 2;\n  text-align: left;\n  vertical-align: bottom;\n  ${fontStyleMapping.label};\n  padding-left: 8px;\n  padding-right: 8px;\n  padding-top: 8px;\n  padding-bottom: 8px;\n\n  ${({ $headerColor }) =>\n    $headerColor &&\n    css`\n      background: ${theme.colors[$headerColor]};\n    `}\n\n  ${({ $headerHeight }) =>\n    $headerHeight &&\n    css`\n      height: ${$headerHeight};\n    `}\n\n  ${({ $maxWidth }) =>\n    $maxWidth &&\n    css`\n      max-width: ${$maxWidth};\n    `}\n\n  ${({ $minWidth }) =>\n    $minWidth &&\n    css`\n      min-width: ${$minWidth};\n    `}\n    \n  ${({ $columnPadding }) =>\n    $columnPadding &&\n    css`\n      padding-left: ${$columnPadding};\n      padding-right: ${$columnPadding};\n    `};\n`\n\nexport const StyledCell = styled.td<TransientProps<TableStylesProps>>`\n  vertical-align: middle;\n  padding-left: 8px;\n  padding-right: 8px;\n  padding-top: 8px;\n  padding-bottom: 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  ${({ $rowPadding }) =>\n    $rowPadding &&\n    css`\n      padding-top: ${$rowPadding};\n      padding-bottom: ${$rowPadding};\n    `};\n\n  ${({ $columnPadding }) =>\n    $columnPadding &&\n    css`\n      padding-left: ${$columnPadding};\n      padding-right: ${$columnPadding};\n    `};\n\n  ${({ $maxWidth }) =>\n    $maxWidth &&\n    css`\n      max-width: ${$maxWidth};\n    `}\n\n  ${({ $rowActionsBgColor }) =>\n    $rowActionsBgColor &&\n    css`\n      background: ${theme.colors[$rowActionsBgColor]};\n    `}\n`\n\nexport const StyledRow = styled.tr<TransientProps<TableStylesProps>>`\n  background: ${theme.colors.custard};\n\n  ${({ $rowBorderColor }) =>\n    $rowBorderColor &&\n    css`\n      border-bottom: 1px solid ${theme.colors[$rowBorderColor]};\n    `}\n\n  ${({ $rowColor }) =>\n    $rowColor &&\n    css`\n      background: ${theme.colors[$rowColor]};\n    `}\n\n  ${({ $stripedColor }) =>\n    $stripedColor &&\n    css`\n      &:nth-child(even) {\n        background: ${theme.colors[$stripedColor]};\n      }\n    `}\n\n    ${({ $clickableRow, $rowColor }) =>\n    $clickableRow &&\n    css`\n      cursor: pointer;\n      &:hover {\n        background: ${darken(0.1, theme.colors[$rowColor ?? 'custard'])};\n      }\n      &:focus-visible {\n        ${focusOutlineStyle}\n        background: ${darken(0.1, theme.colors[$rowColor ?? 'custard'])};\n      }\n    `}\n`\n"]}

package/dist/Table/helpers.d.ts

@@ -0,0 +1,2 @@
+import { ReactElement } from 'react';
+export declare const isMappedReactElement: (obj: unknown) => obj is ReactElement<any>[];

package/dist/Table/helpers.js

@@ -0,0 +1,12 @@
+import { isValidElement } from 'react';
+export const isMappedReactElement = (obj) => {
+    if (!Array.isArray(obj))
+        return false;
+    if (!obj[0])
+        return false;
+    if (!isValidElement(obj[0]))
+        return false;
+    const allReactElements = obj.every((val, i, arr) => typeof val === typeof arr[0]);
+    return allReactElements;
+};
+//# sourceMappingURL=helpers.js.map

package/dist/Table/helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../src/Table/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,cAAc,EAAE,MAAM,OAAO,CAAA;AAEpD,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAClC,GAAY,EACgB,EAAE;IAC9B,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;QAAE,OAAO,KAAK,CAAA;IACrC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;QAAE,OAAO,KAAK,CAAA;IACzB,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;QAAE,OAAO,KAAK,CAAA;IACzC,MAAM,gBAAgB,GAAG,GAAG,CAAC,KAAK,CAChC,CAAC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,CAAC,OAAO,GAAG,KAAK,OAAO,GAAG,CAAC,CAAC,CAAC,CAC9C,CAAA;IACD,OAAO,gBAAgB,CAAA;AACzB,CAAC,CAAA","sourcesContent":["import { ReactElement, isValidElement } from 'react'\n\nexport const isMappedReactElement = (\n  obj: unknown,\n): obj is ReactElement<any>[] => {\n  if (!Array.isArray(obj)) return false\n  if (!obj[0]) return false\n  if (!isValidElement(obj[0])) return false\n  const allReactElements = obj.every(\n    (val, i, arr) => typeof val === typeof arr[0],\n  )\n  return allReactElements\n}\n"]}

package/dist/Table/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Table';
+export * from './components/TableRow';

package/dist/Table/index.js

@@ -0,0 +1,3 @@
+export * from './Table';
+export * from './components/TableRow';
+//# sourceMappingURL=index.js.map

package/dist/Table/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Table/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA;AACvB,cAAc,uBAAuB,CAAA","sourcesContent":["export * from './Table'\nexport * from './components/TableRow'\n"]}