@nulogy/components 16.0.0 → 16.0.1

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;
     };

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

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { action } from "@storybook/addon-actions";
 import { Table } from "..";
 import { Box, Text } from "../..";
@@ -7,8 +7,7 @@ const columns = [
     { label: "Expected Quantity", dataKey: "expectedQuantity" },
     { label: "Actual Quantity", dataKey: "actualQuantity" },
 ];
-const expandedContent = () => (React.createElement(Box, { bg: "lightBlue", py: "x1", px: "x2" },
-    React.createElement(Text, { fontWeight: "bold", color: "blackBlue" }, "Expands!")));
+const expandedContent = () => (_jsx(Box, { bg: "lightBlue", py: "x1", px: "x2", children: _jsx(Text, { fontWeight: "bold", color: "blackBlue", children: "Expands!" }) }));
 const rowDataWithExpandable = [
     {
         date: "2019-10-01",
@@ -65,11 +64,11 @@ const rowDataWithExpandable = [
 export default {
     title: "Components/Table/with expandable rows",
 };
-export const WithExpandableRows = () => (React.createElement(Table, { columns: columns, rows: rowDataWithExpandable, hasExpandableRows: true, onRowExpansionChange: action("toggled expand") }));
+export const WithExpandableRows = () => (_jsx(Table, { columns: columns, rows: rowDataWithExpandable, hasExpandableRows: true, onRowExpansionChange: action("toggled expand") }));
 WithExpandableRows.story = {
     name: "with expandable rows",
 };
-export const WithRowsExpandedByDefault = () => (React.createElement(Table, { columns: columns, rows: rowDataWithExpandable, hasExpandableRows: true, expandedRows: ["2019-10-04", "2019-10-22"], keyField: "date", onRowSelectionChange: action("row selection changed") }));
+export const WithRowsExpandedByDefault = () => (_jsx(Table, { columns: columns, rows: rowDataWithExpandable, hasExpandableRows: true, expandedRows: ["2019-10-04", "2019-10-22"], keyField: "date", onRowSelectionChange: action("row selection changed") }));
 WithRowsExpandedByDefault.story = {
     name: "with rows expanded by default",
 };

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

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

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

@@ -1,4 +1,5 @@
-import React, { useState, useEffect } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
 import { Table } from "../..";
 import { Input } from "../../Input";
 const COLUMNS = [
@@ -19,10 +20,10 @@ const ROWS = [
 const transformColumn = (column, onChange) => {
     return {
         ...column,
-        headerFormatter: ({ label, dataKey }) => (React.createElement(ColumnHeaderWithFilter, { onChange: (e) => onChange(dataKey, e), label: label })),
+        headerFormatter: ({ label, dataKey }) => (_jsx(ColumnHeaderWithFilter, { onChange: (e) => onChange(dataKey, e), label: label })),
     };
 };
-const ColumnHeaderWithFilter = ({ onChange, label }) => (React.createElement(Input, { labelText: `Filter by ${label}`, onChange: onChange, name: label }));
+const ColumnHeaderWithFilter = ({ onChange, label }) => (_jsx(Input, { labelText: `Filter by ${label}`, onChange: onChange, name: label }));
 const TableWithFilters = ({ rowsPerPage }) => {
     const [rows, setRows] = useState(ROWS);
     const [filter, setFilter] = useState({});
@@ -45,16 +46,16 @@ const TableWithFilters = ({ rowsPerPage }) => {
         }));
     };
     const columns = COLUMNS.map((column) => transformColumn(column, onFilterInputChange));
-    return React.createElement(Table, { columns: columns, rows: rows, keyField: "name", rowsPerPage: rowsPerPage });
+    return _jsx(Table, { columns: columns, rows: rows, keyField: "name", rowsPerPage: rowsPerPage });
 };
 export default {
     title: "Components/Table/with filtering",
 };
-export const WithFiltering = () => React.createElement(TableWithFilters, null);
+export const WithFiltering = () => _jsx(TableWithFilters, {});
 WithFiltering.story = {
     name: "with filtering",
 };
-export const WithFilteringAndPagination = () => React.createElement(TableWithFilters, { rowsPerPage: 4 });
+export const WithFilteringAndPagination = () => _jsx(TableWithFilters, { rowsPerPage: 4 });
 WithFilteringAndPagination.story = {
     name: "with filtering and pagination",
 };

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

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

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

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { action } from "@storybook/addon-actions";
 import { Table } from "..";
 const columns = [
@@ -59,11 +59,11 @@ const rowData = [
 export default {
     title: "Components/Table/with selectable rows",
 };
-export const WithSelectableRows = () => (React.createElement(Table, { columns: columns, rows: rowData, hasSelectableRows: true, onRowSelectionChange: action("row selection changed") }));
+export const WithSelectableRows = () => (_jsx(Table, { columns: columns, rows: rowData, hasSelectableRows: true, onRowSelectionChange: action("row selection changed") }));
 WithSelectableRows.story = {
     name: "with selectable rows",
 };
-export const WithPreselectedRows = () => (React.createElement(Table, { columns: columns, rows: rowData, hasSelectableRows: true, selectedRows: ["2019-10-01"], keyField: "date", onRowSelectionChange: action("row selection changed") }));
+export const WithPreselectedRows = () => (_jsx(Table, { columns: columns, rows: rowData, hasSelectableRows: true, selectedRows: ["2019-10-01"], keyField: "date", onRowSelectionChange: action("row selection changed") }));
 WithPreselectedRows.story = {
     name: "with preselected rows",
 };

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

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

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { Table } from "../..";
 import { Pagination } from "../../Pagination";
@@ -48,15 +49,13 @@ class TableWithServerSidePagination extends React.Component {
     }
     render() {
         const { rows, loading, page } = this.state;
-        return (React.createElement(React.Fragment, null,
-            React.createElement(Table, { columns: COLUMNS, rows: rows, loading: loading }),
-            React.createElement(Pagination, { pt: "x3", justifyContent: "flex-end", currentPage: page, totalPages: 5, onNext: this.onSelectNext, onPrevious: this.onSelectPrevious, onSelectPage: this.onSelectPage })));
+        return (_jsxs(_Fragment, { children: [_jsx(Table, { columns: COLUMNS, rows: rows, loading: loading }), _jsx(Pagination, { pt: "x3", justifyContent: "flex-end", currentPage: page, totalPages: 5, onNext: this.onSelectNext, onPrevious: this.onSelectPrevious, onSelectPage: this.onSelectPage })] }));
     }
 }
 export default {
     title: "Components/Table/with server side pagination",
 };
-export const WithServerSidePagination = () => React.createElement(TableWithServerSidePagination, null);
+export const WithServerSidePagination = () => _jsx(TableWithServerSidePagination, {});
 WithServerSidePagination.story = {
     name: "with server-side pagination",
 };

package/dist/src/Tabs/Tab.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import { styled } from "styled-components";
 import { variant } from "styled-system";
@@ -76,5 +77,5 @@ const TabButton = styled.button(({ selected, disabled, fullWidth, theme }) => ({
         },
     },
 }));
-const Tab = React.forwardRef(({ label, ...props }, ref) => (React.createElement(TabButton, { role: "tab", type: "button", ref: ref, ...props }, label)));
+const Tab = React.forwardRef(({ label, ...props }, ref) => (_jsx(TabButton, { role: "tab", type: "button", ref: ref, ...props, children: label })));
 export default Tab;

package/dist/src/Tabs/TabScrollIndicator.js

@@ -1,5 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { styled } from "styled-components";
-import React from "react";
 import { useTranslation } from "react-i18next";
 import { Icon } from "../Icon";
 const TabScrollIndicatorButton = styled.button(({ side, width, theme }) => ({
@@ -43,7 +43,6 @@ const TabScrollIndicator = ({ side = "left", width = 40, ariaLabelLeft, ariaLabe
     function preventFocusMovement(event) {
         event.preventDefault();
     }
-    return (React.createElement(TabScrollIndicatorButton, { ...props, width: width, tabIndex: -1, onClick: onClick, onMouseDown: preventFocusMovement, side: side, "aria-label": side === "right" ? rightArrowLabel : leftArrowLabel },
-        React.createElement(Icon, { icon: side === "right" ? "rightArrow" : "leftArrow" })));
+    return (_jsx(TabScrollIndicatorButton, { ...props, width: width, tabIndex: -1, onClick: onClick, onMouseDown: preventFocusMovement, side: side, "aria-label": side === "right" ? rightArrowLabel : leftArrowLabel, children: _jsx(Icon, { icon: side === "right" ? "rightArrow" : "leftArrow" }) }));
 };
 export default TabScrollIndicator;