@mrshmllw/smores-react 6.0.0 → 6.0.2

package/dist/src/Snackbar/SnackbarContainer.js

@@ -0,0 +1,45 @@
+import React, { createContext, useState, useCallback, useContext, } from 'react';
+import styled from 'styled-components';
+import { SnackbarItem } from './SnackbarItem';
+export const SnackbarContext = createContext({
+    addSnackbar: () => {
+        throw new Error('Please add the SnackbarContainer to your application');
+    },
+});
+export const useSnackbarContext = () => useContext(SnackbarContext);
+export const SnackbarContainer = ({ children, }) => {
+    let snackbarId = 0;
+    const [snackbars, setSnackbars] = useState([]);
+    // create snackbar unique ID
+    const newSnackId = useCallback(() => {
+        const newId = `MM_SNACKBAR_${snackbarId}`;
+        snackbarId++;
+        return newId;
+    }, [snackbarId]);
+    const addSnackbar = (snackbar) => {
+        const newSnack = {
+            ...snackbar,
+            id: newSnackId(),
+        };
+        setSnackbars([...snackbars, newSnack]);
+    };
+    const deleteSnackbar = (id) => {
+        setSnackbars(snackbars.filter((snackbar) => snackbar.id !== id));
+    };
+    return (React.createElement(SnackbarContext.Provider, { value: {
+            addSnackbar,
+        } },
+        children,
+        React.createElement(SnackbarWrapper, null, snackbars.map((snackbar) => (React.createElement(SnackbarItem, { key: snackbar.id, ...snackbar, deleteSnack: deleteSnackbar }))))));
+};
+const SnackbarWrapper = styled.div `
+  position: fixed;
+  bottom: 35px;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+  width: 90%;
+  max-width: 875px;
+  z-index: 1000;
+`;
+//# sourceMappingURL=SnackbarContainer.js.map

package/dist/src/Snackbar/SnackbarContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SnackbarContainer.js","sourceRoot":"","sources":["../../../src/Snackbar/SnackbarContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,aAAa,EAEb,QAAQ,EACR,WAAW,EAEX,UAAU,GACX,MAAM,OAAO,CAAA;AACd,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAG7C,MAAM,CAAC,MAAM,eAAe,GAAG,aAAa,CAAsB;IAChE,WAAW,EAAE,GAAG,EAAE;QAChB,MAAM,IAAI,KAAK,CAAC,sDAAsD,CAAC,CAAA;IACzE,CAAC;CACF,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,EAAE,CAAC,UAAU,CAAC,eAAe,CAAC,CAAA;AAEnE,MAAM,CAAC,MAAM,iBAAiB,GAAiC,CAAC,EAC9D,QAAQ,GACT,EAAE,EAAE;IACH,IAAI,UAAU,GAAG,CAAC,CAAA;IAClB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAa,EAAE,CAAC,CAAA;IAE1D,4BAA4B;IAC5B,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE;QAClC,MAAM,KAAK,GAAG,eAAe,UAAU,EAAE,CAAA;QACzC,UAAU,EAAE,CAAA;QACZ,OAAO,KAAK,CAAA;IACd,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAA;IAEhB,MAAM,WAAW,GAAG,CAAC,QAAqB,EAAE,EAAE;QAC5C,MAAM,QAAQ,GAAG;YACf,GAAG,QAAQ;YACX,EAAE,EAAE,UAAU,EAAE;SACjB,CAAA;QACD,YAAY,CAAC,CAAC,GAAG,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAA;IACxC,CAAC,CAAA;IAED,MAAM,cAAc,GAAG,CAAC,EAAU,EAAE,EAAE;QACpC,YAAY,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAA;IAClE,CAAC,CAAA;IAED,OAAO,CACL,oBAAC,eAAe,CAAC,QAAQ,IACvB,KAAK,EAAE;YACL,WAAW;SACZ;QAEA,QAAQ;QACT,oBAAC,eAAe,QACb,SAAS,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CAC3B,oBAAC,YAAY,IACX,GAAG,EAAE,QAAQ,CAAC,EAAE,KACZ,QAAQ,EACZ,WAAW,EAAE,cAAc,GAC3B,CACH,CAAC,CACc,CACO,CAC5B,CAAA;AACH,CAAC,CAAA;AAED,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;CASjC,CAAA"}

package/dist/src/Snackbar/SnackbarItem.js

@@ -0,0 +1,26 @@
+import { Box } from '../Box';
+import React from 'react';
+import styled from 'styled-components';
+import { Icon } from '../Icon';
+import { theme } from '../theme';
+import { Text } from '../Text';
+import { useTimeout } from '../hooks';
+export const SnackbarItem = ({ autoCloseTime = 4, id, message, leadingIcon, canManuallyClose, showCloseIcon, deleteSnack, }) => {
+    useTimeout(() => deleteSnack(id), autoCloseTime * 1000);
+    return (React.createElement(SnackItem, { p: "16px", key: id, mt: "16px", flex: true, justifyContent: "space-between" },
+        React.createElement(Box, { flex: true, alignItems: "center" },
+            leadingIcon && (React.createElement(Icon, { mr: "12px", render: leadingIcon, size: 24, color: "mascarpone" })),
+            React.createElement(Text, { typo: "desc-small", color: "mascarpone" }, message)),
+        canManuallyClose && (React.createElement(CloseButton, { onClick: () => deleteSnack(id), "aria-label": `close snackbar ${message}` }, showCloseIcon ? (React.createElement(Icon, { render: "cross", size: 16, color: "mascarpone" })) : (React.createElement(UnderlinedText, { tag: "span", typo: "desc-medium", color: "mascarpone" }, "Dismiss"))))));
+};
+const SnackItem = styled(Box) `
+  border-radius: 16px;
+  background-color: ${theme.colors.liquorice};
+`;
+const CloseButton = styled.button `
+  cursor: pointer;
+`;
+const UnderlinedText = styled(Text) `
+  text-decoration: underline;
+`;
+//# sourceMappingURL=SnackbarItem.js.map

package/dist/src/Snackbar/SnackbarItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SnackbarItem.js","sourceRoot":"","sources":["../../../src/Snackbar/SnackbarItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAE9B,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAMrC,MAAM,CAAC,MAAM,YAAY,GAAc,CAAC,EACtC,aAAa,GAAG,CAAC,EACjB,EAAE,EACF,OAAO,EACP,WAAW,EACX,gBAAgB,EAChB,aAAa,EACb,WAAW,GACZ,EAAE,EAAE;IACH,UAAU,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,EAAE,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC,CAAA;IAEvD,OAAO,CACL,oBAAC,SAAS,IAAC,CAAC,EAAC,MAAM,EAAC,GAAG,EAAE,EAAE,EAAE,EAAE,EAAC,MAAM,EAAC,IAAI,QAAC,cAAc,EAAC,eAAe;QACxE,oBAAC,GAAG,IAAC,IAAI,QAAC,UAAU,EAAC,QAAQ;YAC1B,WAAW,IAAI,CACd,oBAAC,IAAI,IAAC,EAAE,EAAC,MAAM,EAAC,MAAM,EAAE,WAAW,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAC,YAAY,GAAG,CACrE;YACD,oBAAC,IAAI,IAAC,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,YAAY,IACvC,OAAO,CACH,CACH;QACL,gBAAgB,IAAI,CACnB,oBAAC,WAAW,IACV,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,EAAE,CAAC,gBAClB,kBAAkB,OAAO,EAAE,IAEtC,aAAa,CAAC,CAAC,CAAC,CACf,oBAAC,IAAI,IAAC,MAAM,EAAC,OAAO,EAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAC,YAAY,GAAG,CACrD,CAAC,CAAC,CAAC,CACF,oBAAC,cAAc,IAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAC,aAAa,EAAC,KAAK,EAAC,YAAY,cAE/C,CAClB,CACW,CACf,CACS,CACb,CAAA;AACH,CAAC,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;sBAEP,KAAK,CAAC,MAAM,CAAC,SAAS;CAC3C,CAAA;AAED,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CAAA;;CAEhC,CAAA;AAED,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;CAElC,CAAA"}

package/dist/src/Snackbar/hooks.js

@@ -0,0 +1,6 @@
+import { useSnackbarContext } from './SnackbarContainer';
+export const useSnackbar = () => {
+    const { addSnackbar } = useSnackbarContext();
+    return { addSnackbar };
+};
+//# sourceMappingURL=hooks.js.map

package/dist/src/Snackbar/hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.js","sourceRoot":"","sources":["../../../src/Snackbar/hooks.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAA;AAExD,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,EAAE;IAC9B,MAAM,EAAE,WAAW,EAAE,GAAG,kBAAkB,EAAE,CAAA;IAE5C,OAAO,EAAE,WAAW,EAAE,CAAA;AACxB,CAAC,CAAA"}

package/dist/src/Snackbar/index.js

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

package/dist/src/Snackbar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Snackbar/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAA;AACnC,cAAc,SAAS,CAAA"}

package/dist/src/Snackbar/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/src/Snackbar/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/Snackbar/types.ts"],"names":[],"mappings":""}

package/dist/src/SupportMessage/SupportMessage.js

@@ -0,0 +1,85 @@
+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.custard,
+        hoverBackgroundColor: darken(0.1, theme.colors.custard),
+        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: 'included',
+    },
+};
+export const SupportMessage = ({ className, description, onClick, type = 'info', 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))),
+        onClick && (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/src/SupportMessage/SupportMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SupportMessage.js","sourceRoot":"","sources":["../../../src/SupportMessage/SupportMessage.tsx"],"names":[],"mappings":"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"}

package/dist/src/SupportMessage/index.js

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

package/dist/src/SupportMessage/index.js.map

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

package/dist/src/Table/Table.js

@@ -0,0 +1,51 @@
+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
+ * -
+ *
+ * @template T - The type of data the table displays.
+ * @property {T[]} data - Array of data to be displayed in the table.
+ * @property {TableColumn<T>[]} columns - Array of columns to display in the table.
+ * @property {boolean} [fixedHeader=false] - If true, the table header will be fixed/sticky.
+ * @property {string} [headerHeight] - Sets the height of the header.
+ * @property {function(T): boolean} [expandable] - A function to determine if a row is expandable.
+ * @property {Color} [stripedColor] - If present, the table rows will have alternating colors.
+ * @property {Color} [headerColor='mascarpone'] - The color for the table header.
+ * @property {Color} [rowColor='custard'] - The default color for each table row.
+ * @property {Color} [rowBorderColor='oatmeal'] - The default color for each table row border.
+ * @property {ReactElement} [subTable] - A React element to show when a row is expanded.
+ * @property {Object} [subRows] - Settings for sub rows.
+ * @property {function(T): ReactElement} subRows.rows - Function that returns a React element for the sub row.
+ * @property {boolean} [subRows.showOnExpand=false] - If true, the sub rows will only be shown when the row is expanded.
+ * @property {RowAction<T>[]} [rowActions] - Array of actions that can be performed on each row.
+ * @property {function<T>: void} [clickableRow] - Function to apply to a row, to make the entire row clickable, useful for navigation.
+ * @property {string} [rowPadding] - The Y padding for each row.
+ * @property {string} [columnPadding] - The X padding for each row.
+ * @property {string} [noDataContent] - The text to show when there is no available data to map through.
+ */
+export const Table = ({ columns, data, fixedHeader = true, expandable, subTable, subRows, headerHeight, headerColor = 'mascarpone', rowColor = 'custard', stripedColor, rowBorderColor = 'oatmeal', rowActions, clickableRow, rowPadding, columnPadding, noDataContent, }) => {
+    const showActionsCell = expandable || rowActions;
+    const expandSubProp = showActionsCell ? columns.length + 1 : columns.length;
+    return (React.createElement(StyledTable, null,
+        React.createElement("thead", null,
+            React.createElement(TableHeader, { columns: columns, fixedHeader: fixedHeader, headerHeight: headerHeight, subTable: subTable, headerColor: headerColor, rowActions: rowActions, columnPadding: columnPadding, expandable: expandable })),
+        React.createElement("tbody", null,
+            data.length === 0 && (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/src/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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,CAAmB,EACtC,OAAO,EACP,IAAI,EACJ,WAAW,GAAG,IAAI,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,GACC,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;QACV;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,GACtB,CACI;QACR;YACG,IAAI,CAAC,MAAM,KAAK,CAAC,IAAI,CACpB,oBAAC,UAAU,IACT,OAAO,EAAE,aAAa,EACtB,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,IAE3B,aAAa,CAAC,CAAC,CAAC,CACf,aAAa,CACd,CAAC,CAAC,CAAC,CACF,oBAAC,IAAI,IAAC,KAAK,EAAC,QAAQ,wBAAyB,CAC9C,CACU,CACd;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"}

package/dist/src/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 { focusOutlineStyle } from '../../utils/focusOutline';
+import { isReactElement } from '../../utils/isReactElement';
+import { StyledCell } from './commonComponents';
+export const RowActions = ({ rowData, rowActions, expandable, isExpanded, toggleExpansion, }) => {
+    const handleAction = (e, action) => {
+        e.stopPropagation();
+        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 &&
+                rowActions.actions?.map((action, actionIndex) => {
+                    if (!action.showCondition || action.showCondition(rowData)) {
+                        return (React.createElement(Wrapper, { flex: true, key: actionIndex },
+                            isReactElement(action.element) &&
+                                React.cloneElement(action.element, {
+                                    onClick: (e) => {
+                                        handleAction(e, action.onClick);
+                                    },
+                                    tabIndex: 0,
+                                    className: 'reactElementRowAction',
+                                }),
+                            action.genericButton && !isReactElement(action.element) && (React.createElement(Button, { ...action.genericButton, handleClick: (e) => {
+                                    handleAction(e, action.onClick);
+                                } }, action.genericButton.children)),
+                            action.iconButton && (React.createElement(IconStrict, { ...action.iconButton, handleClick: (e) => {
+                                    handleAction(e, action.onClick);
+                                } }))));
+                    }
+                    return null;
+                }),
+            expandable && 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/src/Table/components/RowActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RowActions.js","sourceRoot":"","sources":["../../../../src/Table/components/RowActions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAA;AACxC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAA;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAC7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAA;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAA;AAE3D,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA;AAE/C,MAAM,CAAC,MAAM,UAAU,GAAG,CAAmB,EAC3C,OAAO,EACP,UAAU,EACV,UAAU,EACV,UAAU,EACV,eAAe,GACI,EAAE,EAAE;IACvB,MAAM,YAAY,GAAG,CACnB,CAA4C,EAC5C,MAA4B,EAC5B,EAAE;QACF,CAAC,CAAC,eAAe,EAAE,CAAA;QACnB,MAAM,CAAC,OAAO,CAAC,CAAA;IACjB,CAAC,CAAA;IAED,OAAO,CACL,oBAAC,UAAU,IACT,UAAU,EAAE,OAAO,CAAC,UAAU,CAAC,IAAI,OAAO,CAAC,UAAU,CAAC,EACtD,iBAAiB,EAAE,UAAU,EAAE,OAAO;QAEtC,oBAAC,GAAG,IAAC,IAAI,QAAC,UAAU,EAAC,QAAQ,EAAC,cAAc,EAAC,UAAU;YACpD,UAAU;gBACT,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,MAAM,EAAE,WAAW,EAAE,EAAE;oBAC9C,IAAI,CAAC,MAAM,CAAC,aAAa,IAAI,MAAM,CAAC,aAAa,CAAC,OAAO,CAAC,EAAE,CAAC;wBAC3D,OAAO,CACL,oBAAC,OAAO,IAAC,IAAI,QAAC,GAAG,EAAE,WAAW;4BAC3B,cAAc,CAAC,MAAM,CAAC,OAAO,CAAC;gCAC7B,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,OAAO,EAAE;oCACjC,OAAO,EAAE,CAAC,CAAa,EAAE,EAAE;wCACzB,YAAY,CAAC,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC,CAAA;oCACjC,CAAC;oCACD,QAAQ,EAAE,CAAC;oCACX,SAAS,EAAE,uBAAuB;iCACnC,CAAC;4BACH,MAAM,CAAC,aAAa,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAC1D,oBAAC,MAAM,OACD,MAAM,CAAC,aAAa,EACxB,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE;oCACjB,YAAY,CAAC,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC,CAAA;gCACjC,CAAC,IAEA,MAAM,CAAC,aAAa,CAAC,QAAQ,CACvB,CACV;4BACA,MAAM,CAAC,UAAU,IAAI,CACpB,oBAAC,UAAU,OACL,MAAM,CAAC,UAAU,EACrB,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE;oCACjB,YAAY,CAAC,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC,CAAA;gCACjC,CAAC,GACD,CACH,CACO,CACX,CAAA;oBACH,CAAC;oBACD,OAAO,IAAI,CAAA;gBACb,CAAC,CAAC;YACH,UAAU,IAAI,UAAU,CAAC,OAAO,CAAC,IAAI,CACpC,oBAAC,SAAS,IACR,MAAM,EAAC,OAAO,EACd,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE;oBACjB,CAAC,CAAC,eAAe,EAAE,CAAA;oBACnB,eAAe,EAAE,CAAA;gBACnB,CAAC,EACD,IAAI,EAAE,EAAE,EACR,MAAM,EAAE,UAAU,EAClB,eAAe,EAAC,OAAO,GACvB,CACH,CACG,CACK,CACd,CAAA;AACH,CAAC,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;;;;;;;;;MAUrB,iBAAiB;;CAEtB,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,UAAU,CAAC,CAClC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC;iBACD,MAAM,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,cAAc;;GAEvD,CACF,CAAA"}

package/dist/src/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, }) => {
+    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 }, column.name))),
+        (expandable || rowActions) && (React.createElement(StyledHeaderCell, { fixedHeader: fixedHeader, stickyCell: true, minWidth: rowActions?.minWidth, headerColor: headerColor, columnPadding: columnPadding }, "Actions"))));
+};
+//# sourceMappingURL=TableHeader.js.map

package/dist/src/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,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,EAChB,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,aAAa,IAE3B,MAAM,CAAC,IAAI,CACK,CACpB,CAAC;QACD,CAAC,UAAU,IAAI,UAAU,CAAC,IAAI,CAC7B,oBAAC,gBAAgB,IACf,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,IAAI,EAChB,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAC9B,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,aAAa,cAGX,CACpB,CACS,CACb,CAAA;AACH,CAAC,CAAA"}

package/dist/src/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 && subRows?.showOnExpand(rowData);
+    const showSubTableOnExpand = subTable?.showOnExpand && 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/src/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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"}

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

@@ -0,0 +1,137 @@
+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};
+  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/src/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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"}

package/dist/src/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/src/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,CAAC,GAAY,EAAyB,EAAE;IAC1E,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"}

package/dist/src/Table/index.js

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

package/dist/src/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"}

package/dist/src/Table/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/src/Table/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/Table/types.ts"],"names":[],"mappings":""}