@nulogy/components 16.0.0 → 16.0.2

package/dist/src/Table/TableHead.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { styled } from "styled-components";
 import StyledTh from "./StyledTh";
 const StyledHeaderRow = styled.tr(({ theme }) => ({
@@ -11,8 +11,7 @@ function renderHeaderCellContent({ headerFormatter = ({ label }) => label, align
         : headerFormatter({ align, label, width, metadata, dataKey });
 }
 function TableHead({ columns, compact, sticky }) {
-    const renderColumns = (allColumns) => allColumns.map((column, index) => (React.createElement(StyledTh, { scope: "col", key: column.dataKey ?? column.key ?? index, width: column.width, compact: compact, "data-testid": "table-head", sticky: sticky }, renderHeaderCellContent(column))));
-    return (React.createElement("thead", null,
-        React.createElement(StyledHeaderRow, null, renderColumns(columns))));
+    const renderColumns = (allColumns) => allColumns.map((column, index) => (_jsx(StyledTh, { scope: "col", width: column.width, compact: compact, "data-testid": "table-head", sticky: sticky, children: renderHeaderCellContent(column) }, column.dataKey ?? column.key ?? index)));
+    return (_jsx("thead", { children: _jsx(StyledHeaderRow, { children: renderColumns(columns) }) }));
 }
 export default TableHead;

package/dist/src/Table/addExpandableControl.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
 import { ControlIcon } from "../Button";
 import { SELECTABLE_COLUMN_DATA_KEY } from "./addSelectableControl";
@@ -8,9 +8,9 @@ const ExpandCell = ({ row, onRowExpansionChange }) => {
     const { t } = useTranslation();
     const collapseLabel = row.collapseAriaLabel || t("collapse row");
     const expandLabel = row.expandAriaLabel || t("expand row");
-    return (React.createElement(React.Fragment, null, row.expandedContent && (React.createElement(ControlIcon, { icon: row[EXPANDABLE_COLUMN_DATA_KEY] ? "upArrow" : "downArrow", label: row[EXPANDABLE_COLUMN_DATA_KEY] ? collapseLabel : expandLabel, onClick: expandRowHandler }))));
+    return (_jsx(_Fragment, { children: row.expandedContent && (_jsx(ControlIcon, { icon: row[EXPANDABLE_COLUMN_DATA_KEY] ? "upArrow" : "downArrow", label: row[EXPANDABLE_COLUMN_DATA_KEY] ? collapseLabel : expandLabel, onClick: expandRowHandler })) }));
 };
-const expandCellRenderer = (onRowExpansionChange) => (props) => (React.createElement(ExpandCell, { onRowExpansionChange: onRowExpansionChange, ...props }));
+const expandCellRenderer = (onRowExpansionChange) => (props) => (_jsx(ExpandCell, { onRowExpansionChange: onRowExpansionChange, ...props }));
 const addExpandableColumn = ({ columns, onRowExpansionChange }) => {
     const expandableColumn = {
         dataKey: EXPANDABLE_COLUMN_DATA_KEY,

package/dist/src/Table/addSelectableControl.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
 import { Checkbox } from "../Checkbox";
 export const SELECTABLE_COLUMN_DATA_KEY = "selected";
@@ -7,7 +7,7 @@ const selectHeaderFormatter = (onSelectHeader, isHeaderSelected, selectAllAriaLa
     const checkedAriaLabel = deselectAllAriaLabel || t("deselect all");
     const uncheckedAriaLabel = selectAllAriaLabel || t("select all");
     const ariaLabel = isHeaderSelected ? checkedAriaLabel : uncheckedAriaLabel;
-    return React.createElement(Checkbox, { checked: isHeaderSelected, onChange: onSelectHeader, "aria-label": ariaLabel });
+    return _jsx(Checkbox, { checked: isHeaderSelected, onChange: onSelectHeader, "aria-label": ariaLabel });
 };
 const SelectCell = ({ row, onSelectRow }) => {
     const selectRowHandler = () => onSelectRow(row);
@@ -16,9 +16,9 @@ const SelectCell = ({ row, onSelectRow }) => {
     const checkedAriaLabel = row.selectAriaLabel || t("select row");
     const uncheckedAriaLabel = row.deselectAriaLabel || t("select row");
     const ariaLabel = checked ? checkedAriaLabel : uncheckedAriaLabel;
-    return React.createElement(Checkbox, { "aria-label": ariaLabel, checked: checked, onChange: selectRowHandler });
+    return _jsx(Checkbox, { "aria-label": ariaLabel, checked: checked, onChange: selectRowHandler });
 };
-const selectCellRenderer = (onSelectRow) => (props) => React.createElement(SelectCell, { onSelectRow: onSelectRow, ...props });
+const selectCellRenderer = (onSelectRow) => (props) => _jsx(SelectCell, { onSelectRow: onSelectRow, ...props });
 export const addSelectableControl = ({ columns, rows, onSelectRow, onSelectHeader, keyField, selectedRows, isHeaderSelected, selectAllAriaLabel, deselectAllAriaLabel, }) => {
     const selectableColumn = {
         dataKey: SELECTABLE_COLUMN_DATA_KEY,

package/dist/src/Table/stories/BaseTable.story.d.ts

@@ -1,4 +1,3 @@
-import React from "react";
 import type { StoryObj } from "@storybook/react";
 import { Table } from "..";
 declare const _default: {
@@ -11,13 +10,13 @@ export declare const WithData: Story;
 export declare const WithNoData: Story;
 export declare const WithStickyHeader: Story;
 export declare const WithLotsOfRowsAndColumns: Story;
-export declare const WithCustomColumnWidths: () => React.JSX.Element;
-export declare const WithACustomCellComponent: () => React.JSX.Element;
-export declare const WithCellAlignment: () => React.JSX.Element;
-export declare const WithACellFormatter: () => React.JSX.Element;
-export declare const WithACustomColumnLabelComponent: () => React.JSX.Element;
-export declare const WithMetadata: () => React.JSX.Element;
-export declare const WithFullWidthSection: () => React.JSX.Element;
+export declare const WithCustomColumnWidths: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithACustomCellComponent: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithCellAlignment: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithACellFormatter: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithACustomColumnLabelComponent: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithMetadata: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithFullWidthSection: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithAFooter: Story;
 export declare const WithRowBorder: Story;
 export declare const WithVerticalAlignment: Story;

package/dist/src/Table/stories/BaseTable.story.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { action } from "@storybook/addon-actions";
 import { Box, DropdownButton, DropdownMenu, Button, Text, Flex } from "../..";
 import { getMockRows, mockColumns } from "../Table.mock-utils";
@@ -6,12 +6,8 @@ import { Table } from "..";
 const dateToString = ({ cellData }) => {
     return new Date(cellData).toUTCString().split(" ").splice(0, 4).join(" ");
 };
-const sectionRow = ({ cellData }) => (React.createElement(Box, { bg: "lightBlue", py: "x1", px: "x2" },
-    React.createElement(Text, { fontWeight: "bold", color: "blackBlue" }, cellData)));
-const dropdownCellRenderer = ({ cellData }) => (React.createElement(Box, { textAlign: "right", pr: "x3" },
-    React.createElement(DropdownMenu, null,
-        React.createElement(DropdownButton, { onClick: action(cellData) }, "Edit"),
-        React.createElement(DropdownButton, { onClick: action(cellData) }, "Delete"))));
+const sectionRow = ({ cellData }) => (_jsx(Box, { bg: "lightBlue", py: "x1", px: "x2", children: _jsx(Text, { fontWeight: "bold", color: "blackBlue", children: cellData }) }));
+const dropdownCellRenderer = ({ cellData }) => (_jsx(Box, { textAlign: "right", pr: "x3", children: _jsxs(DropdownMenu, { children: [_jsx(DropdownButton, { onClick: action(cellData), children: "Edit" }), _jsx(DropdownButton, { onClick: action(cellData), children: "Delete" })] }) }));
 const columns = [
     { label: "Date", dataKey: "date" },
     { label: "Expected Quantity", dataKey: "expectedQuantity" },
@@ -272,8 +268,7 @@ export const WithNoData = {
     },
 };
 export const WithStickyHeader = {
-    render: (args) => (React.createElement(Box, { mt: "x4" },
-        React.createElement(Table, { columns: columns, rows: rowData, rowHovers: args.rowHovers, compact: args.compact, loading: args.loading, className: "Table", stickyHeader: true }))),
+    render: (args) => (_jsx(Box, { mt: "x4", children: _jsx(Table, { columns: columns, rows: rowData, rowHovers: args.rowHovers, compact: args.compact, loading: args.loading, className: "Table", stickyHeader: true }) })),
     args: {
         rowHovers: true,
         compact: false,
@@ -305,21 +300,21 @@ export const WithLotsOfRowsAndColumns = {
         },
     },
 };
-export const WithCustomColumnWidths = () => React.createElement(Table, { columns: columnsWithWidths, rows: rowDataWithWidths });
-export const WithACustomCellComponent = () => (React.createElement(Table, { columns: getColumnsWithCellRenderer(dropdownCellRenderer), rows: rowData }));
-export const WithCellAlignment = () => React.createElement(Table, { columns: columnsWithAlignment, rows: rowData });
-export const WithACellFormatter = () => React.createElement(Table, { columns: columnsWithFormatter, rows: rowData });
-export const WithACustomColumnLabelComponent = () => (React.createElement(Table, { columns: [
+export const WithCustomColumnWidths = () => _jsx(Table, { columns: columnsWithWidths, rows: rowDataWithWidths });
+export const WithACustomCellComponent = () => (_jsx(Table, { columns: getColumnsWithCellRenderer(dropdownCellRenderer), rows: rowData }));
+export const WithCellAlignment = () => _jsx(Table, { columns: columnsWithAlignment, rows: rowData });
+export const WithACellFormatter = () => _jsx(Table, { columns: columnsWithFormatter, rows: rowData });
+export const WithACustomColumnLabelComponent = () => (_jsx(Table, { columns: [
         { label: "Date", dataKey: "date" },
         { label: "Expected Quantity", dataKey: "expectedQuantity" },
         { label: "Actual Quantity", dataKey: "actualQuantity" },
         {
             label: "Add record",
             dataKey: "c4",
-            headerFormatter: ({ label }) => React.createElement(Button, { onClick: action("button clicked") }, label),
+            headerFormatter: ({ label }) => _jsx(Button, { onClick: action("button clicked"), children: label }),
         },
     ], rows: rowData }));
-export const WithMetadata = () => (React.createElement(Table, { columns: [
+export const WithMetadata = () => (_jsx(Table, { columns: [
         { label: "Date", dataKey: "date" },
         { label: "Expected Quantity", dataKey: "expectedQuantity" },
         { label: "Actual Quantity", dataKey: "actualQuantity" },
@@ -327,16 +322,12 @@ export const WithMetadata = () => (React.createElement(Table, { columns: [
             label: "Add record",
             dataKey: "c4",
             metadata: { helpText: "Allows adding a new record" },
-            headerFormatter: ({ label, metadata }) => (React.createElement(Flex, { flexDirection: "column" },
-                React.createElement(Text, null, label),
-                React.createElement(Text, { fontSize: "small", fontWeight: "base", color: "midGrey" }, metadata.helpText))),
+            headerFormatter: ({ label, metadata }) => (_jsxs(Flex, { flexDirection: "column", children: [_jsx(Text, { children: label }), _jsx(Text, { fontSize: "small", fontWeight: "base", color: "midGrey", children: metadata.helpText })] })),
         },
     ], rows: rowData }));
-export const WithFullWidthSection = () => React.createElement(Table, { columns: columns, rows: rowDataWithSections });
+export const WithFullWidthSection = () => _jsx(Table, { columns: columns, rows: rowDataWithSections });
 export const WithAFooter = {
-    render: (args) => (React.createElement(React.Fragment, null,
-        React.createElement(Table, { columns: columns, keyField: "date", rows: rowData, footerRows: footerRowData, loading: args.loading }),
-        React.createElement(Table, { compact: true, columns: columns, keyField: "date", rows: compactRowData, footerRows: footerRowData, loading: args.loading }))),
+    render: (args) => (_jsxs(_Fragment, { children: [_jsx(Table, { columns: columns, keyField: "date", rows: rowData, footerRows: footerRowData, loading: args.loading }), _jsx(Table, { compact: true, columns: columns, keyField: "date", rows: compactRowData, footerRows: footerRowData, loading: args.loading })] })),
     args: {
         loading: false,
     },
@@ -372,7 +363,7 @@ export const WithRowBorder = {
     },
 };
 export const WithVerticalAlignment = {
-    render: (args) => (React.createElement(Table, { rowBorder: args.rowBorder, columns: [
+    render: (args) => (_jsx(Table, { rowBorder: args.rowBorder, columns: [
             { label: "Description", dataKey: "description", width: "50%" },
             { label: "Expected Quantity", dataKey: "expectedQuantity" },
             { label: "Actual Quantity", dataKey: "actualQuantity" },

package/dist/src/Table/stories/CustomContent.story.d.ts

@@ -1,7 +1,6 @@
-import React from "react";
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const Inputs: () => React.JSX.Element;
-export declare const TextVariants: () => React.JSX.Element;
+export declare const Inputs: () => import("react/jsx-runtime").JSX.Element;
+export declare const TextVariants: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/Table/stories/CustomContent.story.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { action } from "@storybook/addon-actions";
 import { Input } from "../../Input";
 import { Table } from "..";
@@ -22,42 +22,39 @@ const columns = [
     {
         dataKey: "colInput",
         label: "Input",
-        cellRenderer: ({ row }) => (React.createElement(Box, { py: "x1", pr: "x2", minWidth: "8em", width: "100%" },
-            React.createElement(Input, { placeholder: row.colInput }))),
+        cellRenderer: ({ row }) => (_jsx(Box, { py: "x1", pr: "x2", minWidth: "8em", width: "100%", children: _jsx(Input, { placeholder: row.colInput }) })),
     },
     {
         dataKey: "colSelect",
         label: "Select",
         width: "100px",
-        cellRenderer: ({ row }) => (React.createElement(Box, { py: "x1", pr: "x2", minWidth: "8em", width: "100%", maxWidth: "16em" },
-            React.createElement(Select, { options: [
+        cellRenderer: ({ row }) => (_jsx(Box, { py: "x1", pr: "x2", minWidth: "8em", width: "100%", maxWidth: "16em", children: _jsx(Select, { options: [
                     { value: "kg", label: "kg" },
                     { value: "lb", label: "lb" },
                     { value: "oz", label: "oz" },
-                ], value: row.colSelect }))),
+                ], value: row.colSelect }) })),
     },
     {
         dataKey: "colCheckbox",
         label: "Checkbox",
-        cellRenderer: ({ row }) => (React.createElement(Box, { py: "x1", pr: "x2", minWidth: "8em" },
-            React.createElement(Checkbox, { id: "checkbox", labelText: row.colCheckbox }))),
+        cellRenderer: ({ row }) => (_jsx(Box, { py: "x1", pr: "x2", minWidth: "8em", children: _jsx(Checkbox, { id: "checkbox", labelText: row.colCheckbox }) })),
     },
     {
         dataKey: "colToggleWithLabel",
         label: "Toggle with label",
-        cellRenderer: () => React.createElement(Toggle, { onChange: action("on change"), onText: "Active", offText: "Inactive", pr: "x2", py: "x1" }),
+        cellRenderer: () => _jsx(Toggle, { onChange: action("on change"), onText: "Active", offText: "Inactive", pr: "x2", py: "x1" }),
     },
     {
         dataKey: "colToggle",
         label: "Toggle",
         width: "48px",
-        cellRenderer: () => React.createElement(Toggle, { onChange: action("on change"), pr: "x2", py: "x1" }),
+        cellRenderer: () => _jsx(Toggle, { onChange: action("on change"), pr: "x2", py: "x1" }),
     },
     {
         dataKey: "colActions",
         label: "",
         width: "40px",
-        cellRenderer: () => React.createElement(IconicButton, { icon: "delete", pr: "x2", py: "x1" }),
+        cellRenderer: () => _jsx(IconicButton, { icon: "delete", pr: "x2", py: "x1" }),
     },
 ];
 const rows = [
@@ -91,14 +88,7 @@ const rows = [
     },
 ];
 export const Inputs = () => {
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Text, { fontSize: "smaller", color: "midGrey" },
-            "This story demonstrates how to use CellRenderer with various input elements. For more details on selectable rows, check out the",
-            " ",
-            React.createElement(Link, { href: "/?path=/story/components-table-with-selectable-rows--with-selectable-rows" }, "Selectable rows"),
-            " ",
-            "story. For the Action column with IconicButtons and Toggles without labels, it is recommended to specify the column width."),
-        React.createElement(Table, { rowHovers: false, columns: columns, rows: rows })));
+    return (_jsxs(_Fragment, { children: [_jsxs(Text, { fontSize: "smaller", color: "midGrey", children: ["This story demonstrates how to use CellRenderer with various input elements. For more details on selectable rows, check out the", " ", _jsx(Link, { href: "/?path=/story/components-table-with-selectable-rows--with-selectable-rows", children: "Selectable rows" }), " ", "story. For the Action column with IconicButtons and Toggles without labels, it is recommended to specify the column width."] }), _jsx(Table, { rowHovers: false, columns: columns, rows: rows })] }));
 };
 const textColumns = [
     {
@@ -119,18 +109,14 @@ const textColumns = [
         dataKey: "colD",
         label: "Multi-line",
         metadata: { helpText: "2 rows" },
-        headerFormatter: ({ label, metadata }) => (React.createElement(Flex, { flexDirection: "column" },
-            React.createElement(Text, null, label),
-            React.createElement(Text, { fontSize: "small", fontWeight: "base", color: "midGrey" }, metadata.helpText))),
-        cellRenderer: ({ row }) => (React.createElement(Flex, { flexDirection: "column", py: "x2", pr: "x2", gap: "x0_25" },
-            React.createElement(Text, null, row.colD),
-            React.createElement(Text, { fontSize: "small", color: "midGrey" }, row.colD))),
+        headerFormatter: ({ label, metadata }) => (_jsxs(Flex, { flexDirection: "column", children: [_jsx(Text, { children: label }), _jsx(Text, { fontSize: "small", fontWeight: "base", color: "midGrey", children: metadata.helpText })] })),
+        cellRenderer: ({ row }) => (_jsxs(Flex, { flexDirection: "column", py: "x2", pr: "x2", gap: "x0_25", children: [_jsx(Text, { children: row.colD }), _jsx(Text, { fontSize: "small", color: "midGrey", children: row.colD })] })),
     },
     {
         dataKey: "colE",
         label: "Truncated text",
         width: "200px",
-        cellRenderer: ({ row }) => (React.createElement(TruncatedText, { fullWidth: true, pr: "x2", py: "x2", maxWidth: "200px" }, row.colE)),
+        cellRenderer: ({ row }) => (_jsx(TruncatedText, { fullWidth: true, pr: "x2", py: "x2", maxWidth: "200px", children: row.colE })),
     },
     {
         dataKey: "colF",
@@ -188,94 +174,81 @@ const textRows = [
         colF: "--",
     },
 ];
-export const TextVariants = () => (React.createElement(React.Fragment, null,
-    React.createElement(Text, { fontSize: "smaller", color: "midGrey" }, "This story demonstrates some of the most useful text variants and column width configurations. To truncate text inside a cell, make sure to match the cell's width with the maxWidth of the truncated text."),
-    React.createElement(Table, { columns: textColumns, rows: textRows })));
+export const TextVariants = () => (_jsxs(_Fragment, { children: [_jsx(Text, { fontSize: "smaller", color: "midGrey", children: "This story demonstrates some of the most useful text variants and column width configurations. To truncate text inside a cell, make sure to match the cell's width with the maxWidth of the truncated text." }), _jsx(Table, { columns: textColumns, rows: textRows })] }));
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-const States = () => (React.createElement(React.Fragment, null,
-    React.createElement(Text, { fontSize: "smaller", color: "midGrey" }, "This story demonstrates how to style cells for particular row states."),
-    React.createElement(Table, { columns: [
-            {
-                dataKey: "label",
-                label: "Label",
-                cellRenderer: ({ row }) => row.state === "disabled" ? (React.createElement(Box, { p: "x2", color: "midGrey" }, row.label)) : row.state === "error" ? (React.createElement(Box, { p: "x2", color: "red" }, row.label)) : (React.createElement(Box, { p: "x2" }, row.label)),
-            },
-            {
-                dataKey: "colInput",
-                label: "Input",
-                cellRenderer: ({ row }) => row.state === "disabled" ? (React.createElement(Box, { py: "x1", pr: "x2", minWidth: "8em", width: "100%" },
-                    React.createElement(Input, { disabled: true, placeholder: row.colInput }))) : row.state === "error" ? (React.createElement(Box, { py: "x1", pr: "x2", minWidth: "8em", width: "100%" },
-                    React.createElement(Input, { errorMessage: "Invalid value, try again.", placeholder: row.colInput }))) : (React.createElement(Box, { py: "x1", pr: "x2", minWidth: "8em", width: "100%" },
-                    React.createElement(Input, { placeholder: row.colInput }))),
-            },
-            {
-                dataKey: "colSelect",
-                label: "Select",
-                width: "100px",
-                cellRenderer: ({ row }) => row.state === "disabled" ? (React.createElement(Box, { py: "x1", pr: "x2", minWidth: "8em", width: "100%", maxWidth: "16em" },
-                    React.createElement(Select, { disabled: true, options: [
-                            { value: "kg", label: "kg" },
-                            { value: "lb", label: "lb" },
-                            { value: "oz", label: "oz" },
-                        ], value: row.colSelect }))) : row.state === "error" ? (React.createElement(Box, { py: "x1", pr: "x2", minWidth: "8em", width: "100%", maxWidth: "16em" },
-                    React.createElement(Select, { errorMessage: "Invalid value", options: [
-                            { value: "kg", label: "kg" },
-                            { value: "lb", label: "lb" },
-                            { value: "oz", label: "oz" },
-                        ], value: row.colSelect }))) : (React.createElement(Box, { py: "x1", pr: "x2", minWidth: "8em", width: "100%", maxWidth: "16em" },
-                    React.createElement(Select, { options: [
-                            { value: "kg", label: "kg" },
-                            { value: "lb", label: "lb" },
-                            { value: "oz", label: "oz" },
-                        ], value: row.colSelect }))),
-            },
-            {
-                dataKey: "colCheckbox",
-                label: "Checkbox",
-                cellRenderer: ({ row }) => row.state === "disabled" ? (React.createElement(Box, { py: "x1", pr: "x2", minWidth: "8em" },
-                    React.createElement(Checkbox, { disabled: true, id: "checkbox", labelText: row.colCheckbox }))) : row.state === "error" ? (React.createElement(Box, { py: "x1", pr: "x2", minWidth: "8em" },
-                    React.createElement(Checkbox, { error: true, id: "checkbox", labelText: row.colCheckbox }))) : (React.createElement(Box, { py: "x1", pr: "x2", minWidth: "8em" },
-                    React.createElement(Checkbox, { id: "checkbox", labelText: row.colCheckbox }))),
-            },
-            {
-                dataKey: "colToggleWithLabel",
-                label: "Toggle with label",
-                cellRenderer: ({ row }) => row.state === "disabled" ? (React.createElement(Toggle, { disabled: true, onChange: action("on change"), onText: "Active", offText: "Inactive", pr: "x2", py: "x1" })) : (React.createElement(Toggle, { onChange: action("on change"), onText: "Active", offText: "Inactive", pr: "x2", py: "x1" })),
-            },
-            {
-                dataKey: "colToggle",
-                label: "Toggle",
-                width: "48px",
-                cellRenderer: ({ row }) => row.state === "disabled" ? (React.createElement(Toggle, { disabled: true, onChange: action("on change"), pr: "x2", py: "x1" })) : (React.createElement(Toggle, { onChange: action("on change"), pr: "x2", py: "x1" })),
-            },
-            {
-                dataKey: "colActions",
-                label: "",
-                width: "40px",
-                cellRenderer: ({ row }) => row.state === "disabled" ? (React.createElement(IconicButton, { disabled: true, icon: "delete", pr: "x2", py: "x1" })) : (React.createElement(IconicButton, { icon: "delete", pr: "x2", py: "x1" })),
-            },
-        ], rows: [
-            {
-                label: "Active (default) state",
-                colInput: "456",
-                colSelect: "kg",
-                colCheckbox: "I agree",
-                colToggleWithLabel: true,
-            },
-            {
-                label: "Inactive (disabled) state",
-                state: "disabled",
-                colInput: "789",
-                colSelect: "kg",
-                colCheckbox: "I acknowledge",
-                colToggleWithLabel: true,
-            },
-            {
-                label: "Error state",
-                state: "error",
-                colInput: "101",
-                colSelect: "oz",
-                colCheckbox: "Ok",
-                colToggleWithLabel: false,
-            },
-        ] })));
+const States = () => (_jsxs(_Fragment, { children: [_jsx(Text, { fontSize: "smaller", color: "midGrey", children: "This story demonstrates how to style cells for particular row states." }), _jsx(Table, { columns: [
+                {
+                    dataKey: "label",
+                    label: "Label",
+                    cellRenderer: ({ row }) => row.state === "disabled" ? (_jsx(Box, { p: "x2", color: "midGrey", children: row.label })) : row.state === "error" ? (_jsx(Box, { p: "x2", color: "red", children: row.label })) : (_jsx(Box, { p: "x2", children: row.label })),
+                },
+                {
+                    dataKey: "colInput",
+                    label: "Input",
+                    cellRenderer: ({ row }) => row.state === "disabled" ? (_jsx(Box, { py: "x1", pr: "x2", minWidth: "8em", width: "100%", children: _jsx(Input, { disabled: true, placeholder: row.colInput }) })) : row.state === "error" ? (_jsx(Box, { py: "x1", pr: "x2", minWidth: "8em", width: "100%", children: _jsx(Input, { errorMessage: "Invalid value, try again.", placeholder: row.colInput }) })) : (_jsx(Box, { py: "x1", pr: "x2", minWidth: "8em", width: "100%", children: _jsx(Input, { placeholder: row.colInput }) })),
+                },
+                {
+                    dataKey: "colSelect",
+                    label: "Select",
+                    width: "100px",
+                    cellRenderer: ({ row }) => row.state === "disabled" ? (_jsx(Box, { py: "x1", pr: "x2", minWidth: "8em", width: "100%", maxWidth: "16em", children: _jsx(Select, { disabled: true, options: [
+                                { value: "kg", label: "kg" },
+                                { value: "lb", label: "lb" },
+                                { value: "oz", label: "oz" },
+                            ], value: row.colSelect }) })) : row.state === "error" ? (_jsx(Box, { py: "x1", pr: "x2", minWidth: "8em", width: "100%", maxWidth: "16em", children: _jsx(Select, { errorMessage: "Invalid value", options: [
+                                { value: "kg", label: "kg" },
+                                { value: "lb", label: "lb" },
+                                { value: "oz", label: "oz" },
+                            ], value: row.colSelect }) })) : (_jsx(Box, { py: "x1", pr: "x2", minWidth: "8em", width: "100%", maxWidth: "16em", children: _jsx(Select, { options: [
+                                { value: "kg", label: "kg" },
+                                { value: "lb", label: "lb" },
+                                { value: "oz", label: "oz" },
+                            ], value: row.colSelect }) })),
+                },
+                {
+                    dataKey: "colCheckbox",
+                    label: "Checkbox",
+                    cellRenderer: ({ row }) => row.state === "disabled" ? (_jsx(Box, { py: "x1", pr: "x2", minWidth: "8em", children: _jsx(Checkbox, { disabled: true, id: "checkbox", labelText: row.colCheckbox }) })) : row.state === "error" ? (_jsx(Box, { py: "x1", pr: "x2", minWidth: "8em", children: _jsx(Checkbox, { error: true, id: "checkbox", labelText: row.colCheckbox }) })) : (_jsx(Box, { py: "x1", pr: "x2", minWidth: "8em", children: _jsx(Checkbox, { id: "checkbox", labelText: row.colCheckbox }) })),
+                },
+                {
+                    dataKey: "colToggleWithLabel",
+                    label: "Toggle with label",
+                    cellRenderer: ({ row }) => row.state === "disabled" ? (_jsx(Toggle, { disabled: true, onChange: action("on change"), onText: "Active", offText: "Inactive", pr: "x2", py: "x1" })) : (_jsx(Toggle, { onChange: action("on change"), onText: "Active", offText: "Inactive", pr: "x2", py: "x1" })),
+                },
+                {
+                    dataKey: "colToggle",
+                    label: "Toggle",
+                    width: "48px",
+                    cellRenderer: ({ row }) => row.state === "disabled" ? (_jsx(Toggle, { disabled: true, onChange: action("on change"), pr: "x2", py: "x1" })) : (_jsx(Toggle, { onChange: action("on change"), pr: "x2", py: "x1" })),
+                },
+                {
+                    dataKey: "colActions",
+                    label: "",
+                    width: "40px",
+                    cellRenderer: ({ row }) => row.state === "disabled" ? (_jsx(IconicButton, { disabled: true, icon: "delete", pr: "x2", py: "x1" })) : (_jsx(IconicButton, { icon: "delete", pr: "x2", py: "x1" })),
+                },
+            ], rows: [
+                {
+                    label: "Active (default) state",
+                    colInput: "456",
+                    colSelect: "kg",
+                    colCheckbox: "I agree",
+                    colToggleWithLabel: true,
+                },
+                {
+                    label: "Inactive (disabled) state",
+                    state: "disabled",
+                    colInput: "789",
+                    colSelect: "kg",
+                    colCheckbox: "I acknowledge",
+                    colToggleWithLabel: true,
+                },
+                {
+                    label: "Error state",
+                    state: "error",
+                    colInput: "101",
+                    colSelect: "oz",
+                    colCheckbox: "Ok",
+                    colToggleWithLabel: false,
+                },
+            ] })] }));

package/dist/src/Table/stories/Density.story.d.ts

@@ -1,16 +1,15 @@
-import React from "react";
 declare const _default: {
     title: string;
 };
 export default _default;
 export declare const Default: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const Compact: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };

package/dist/src/Table/stories/Density.story.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Table } from "..";
 const columns = [
     { label: "Date", dataKey: "date" },
@@ -58,11 +58,11 @@ const rowData = [
 export default {
     title: "Components/Table/Density",
 };
-export const Default = () => React.createElement(Table, { columns: columns, rows: rowData });
+export const Default = () => _jsx(Table, { columns: columns, rows: rowData });
 Default.story = {
     name: "Default",
 };
-export const Compact = () => React.createElement(Table, { columns: columns, rows: rowData, compact: true });
+export const Compact = () => _jsx(Table, { columns: columns, rows: rowData, compact: true });
 Compact.story = {
     name: "Compact",
 };

package/dist/src/Table/stories/Table.story.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { action } from "@storybook/addon-actions";
 import { useState } from "react";
 import { Box, DropdownButton, DropdownMenu, Text } from "../..";
@@ -6,15 +6,10 @@ import { Table } from "..";
 const dateToString = ({ cellData }) => {
     return new Date(cellData).toUTCString().split(" ").splice(0, 4).join(" ");
 };
-const sectionRow = ({ cellData }) => (React.createElement(Box, { bg: "lightBlue", py: "x1", px: "x2" },
-    React.createElement(Text, { fontWeight: "bold", color: "blackBlue" }, cellData)));
-const expandedContent = () => (React.createElement(Box, { bg: "lightBlue", py: "x1", px: "x2" },
-    React.createElement(Text, { fontWeight: "bold", color: "blackBlue" }, "Expands!")));
+const sectionRow = ({ cellData }) => (_jsx(Box, { bg: "lightBlue", py: "x1", px: "x2", children: _jsx(Text, { fontWeight: "bold", color: "blackBlue", children: cellData }) }));
+const expandedContent = () => (_jsx(Box, { bg: "lightBlue", py: "x1", px: "x2", children: _jsx(Text, { fontWeight: "bold", color: "blackBlue", children: "Expands!" }) }));
 const dropdownCellRenderer = ({ cellData }) => {
-    return (React.createElement(Box, { textAlign: "right", pr: "x3" },
-        React.createElement(DropdownMenu, null,
-            React.createElement(DropdownButton, { onClick: action(cellData) }, "Edit"),
-            React.createElement(DropdownButton, { onClick: action(cellData) }, "Delete"))));
+    return (_jsx(Box, { textAlign: "right", pr: "x3", children: _jsxs(DropdownMenu, { children: [_jsx(DropdownButton, { onClick: action(cellData), children: "Edit" }), _jsx(DropdownButton, { onClick: action(cellData), children: "Delete" })] }) }));
 };
 const columns = [
     { label: "Date", dataKey: "date" },
@@ -307,9 +302,7 @@ export const WithOnHoverActions = {
         ];
         const [hoveredRow, setHoveredRow] = useState(null);
         const dropdownCellRendererWithHover = ({ cellData, row }) => {
-            return (React.createElement(Box, { textAlign: "right", pr: "x3", width: "40px" }, row.id === hoveredRow && (React.createElement(DropdownMenu, null,
-                React.createElement(DropdownButton, { onClick: action(cellData) }, "Edit"),
-                React.createElement(DropdownButton, { onClick: action(cellData) }, "Delete")))));
+            return (_jsx(Box, { textAlign: "right", pr: "x3", width: "40px", children: row.id === hoveredRow && (_jsxs(DropdownMenu, { children: [_jsx(DropdownButton, { onClick: action(cellData), children: "Edit" }), _jsx(DropdownButton, { onClick: action(cellData), children: "Delete" })] })) }));
         };
         const columnsWithHovers = [
             {
@@ -334,7 +327,7 @@ export const WithOnHoverActions = {
         const onMouseLeave = () => {
             setHoveredRow(null);
         };
-        return (React.createElement(Table, { columns: columnsWithHovers, rows: rowDataWithHovers, footerRows: footerRowData, hasSelectableRows: args.hasSelectableRows, onRowSelectionChange: action("row selection changed"), className: "Table", onRowMouseEnter: onMouseEnter, onRowMouseLeave: onMouseLeave, onMouseLeave: onMouseLeave }));
+        return (_jsx(Table, { columns: columnsWithHovers, rows: rowDataWithHovers, footerRows: footerRowData, hasSelectableRows: args.hasSelectableRows, onRowSelectionChange: action("row selection changed"), className: "Table", onRowMouseEnter: onMouseEnter, onRowMouseLeave: onMouseLeave, onMouseLeave: onMouseLeave }));
     },
     args: {
         hasSelectableRows: true,

package/dist/src/Table/stories/TableWithCustomSorting.story.d.ts

@@ -1,10 +1,9 @@
-import React from "react";
 declare const _default: {
     title: string;
 };
 export default _default;
 export declare const WithCustomSorting: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };

package/dist/src/Table/stories/TableWithCustomSorting.story.js

@@ -1,4 +1,5 @@
-import React, { useState } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
 import { Table } from "../..";
 const COLUMNS = [
     { label: "Name", dataKey: "name" },
@@ -48,16 +49,16 @@ const TableWithCustomSorting = () => {
         const isAscending = sortState.ascending && column.dataKey === sortState.sortColumn;
         return {
             ...column,
-            headerFormatter: ({ label, dataKey }) => (React.createElement(Table.SortingHeader, { onChange: () => onSortChange(dataKey), label: label, ascending: isAscending, active: dataKey === sortState.sortColumn })),
+            headerFormatter: ({ label, dataKey }) => (_jsx(Table.SortingHeader, { onChange: () => onSortChange(dataKey), label: label, ascending: isAscending, active: dataKey === sortState.sortColumn })),
         };
     };
     const columns = COLUMNS.map((column) => transformColumn(column));
-    return React.createElement(Table, { columns: columns, rows: rows, keyField: KEY_FIELD });
+    return _jsx(Table, { columns: columns, rows: rows, keyField: KEY_FIELD });
 };
 export default {
     title: "Components/Table/with custom sorting",
 };
-export const WithCustomSorting = () => React.createElement(TableWithCustomSorting, null);
+export const WithCustomSorting = () => _jsx(TableWithCustomSorting, {});
 WithCustomSorting.story = {
     name: "with custom sorting",
 };

package/dist/src/Table/stories/TableWithExpandableRows.story.d.ts

@@ -1,16 +1,15 @@
-import React from "react";
 declare const _default: {
     title: string;
 };
 export default _default;
 export declare const WithExpandableRows: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithRowsExpandedByDefault: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };