@nulogy/components 16.0.0 → 16.0.1

package/dist/src/Switcher/Switcher.story.d.ts

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

package/dist/src/Switcher/Switcher.story.js

@@ -1,4 +1,5 @@
-import React, { useState } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
 import { Box } from "../Box";
 import { Text } from "../Type";
 import { Button } from "../Button";
@@ -7,25 +8,12 @@ import Switcher from "./Switcher";
 import Switch from "./Switch";
 export const WithSelectedValue = () => {
     const [selected, setSelected] = useState("option_2");
-    return (React.createElement(Switcher, { "aria-label": "storybook-switcher", selected: selected, onChange: setSelected },
-        React.createElement(Switch, { value: "option_1" }, "Option 1"),
-        React.createElement(Switch, { value: "option_2" }, "Option 2")));
+    return (_jsxs(Switcher, { "aria-label": "storybook-switcher", selected: selected, onChange: setSelected, children: [_jsx(Switch, { value: "option_1", children: "Option 1" }), _jsx(Switch, { value: "option_2", children: "Option 2" })] }));
 };
-export const WithOtherInteractiveElements = () => (React.createElement(Flex, { gap: "x1", alignItems: "center" },
-    React.createElement(Button, null, "Click me"),
-    React.createElement(Switcher, { "aria-label": "storybook-switcher", selected: "option_2" },
-        React.createElement(Switch, { value: "option_1" }, "Option 1"),
-        React.createElement(Switch, { value: "option_2" }, "Option 2"))));
+export const WithOtherInteractiveElements = () => (_jsxs(Flex, { gap: "x1", alignItems: "center", children: [_jsx(Button, { children: "Click me" }), _jsxs(Switcher, { "aria-label": "storybook-switcher", selected: "option_2", children: [_jsx(Switch, { value: "option_1", children: "Option 1" }), _jsx(Switch, { value: "option_2", children: "Option 2" })] })] }));
 export const WithContent = () => {
     const [selected, setSelected] = useState("all");
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Switcher, { "aria-label": "storybook-switcher", selected: selected, onChange: setSelected },
-            React.createElement(Switch, { value: "all" }, "All"),
-            React.createElement(Switch, { value: "option_1" }, "Option 1"),
-            React.createElement(Switch, { value: "option_2" }, "Option 2")),
-        React.createElement(Box, { px: "x1", py: "x3" },
-            ["all", "option_1"].includes(selected) && React.createElement(Text, null, "Option 1 Content"),
-            ["all", "option_2"].includes(selected) && React.createElement(Text, null, "Option 2 Content"))));
+    return (_jsxs(_Fragment, { children: [_jsxs(Switcher, { "aria-label": "storybook-switcher", selected: selected, onChange: setSelected, children: [_jsx(Switch, { value: "all", children: "All" }), _jsx(Switch, { value: "option_1", children: "Option 1" }), _jsx(Switch, { value: "option_2", children: "Option 2" })] }), _jsxs(Box, { px: "x1", py: "x3", children: [["all", "option_1"].includes(selected) && _jsx(Text, { children: "Option 1 Content" }), ["all", "option_2"].includes(selected) && _jsx(Text, { children: "Option 2 Content" })] })] }));
 };
 export default {
     title: "Components/Switcher",

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

@@ -1,4 +1,4 @@
-import React, { type ReactNode } from "react";
+import { type ReactNode } from "react";
 import { RowType, Columns, RowBorder } from "./Table.types";
 export type BaseTableProps<ColumnMetaData> = {
     columns: Columns<ColumnMetaData>;
@@ -18,5 +18,5 @@ export type BaseTableProps<ColumnMetaData> = {
     onMouseLeave?: any;
     rowBorder?: RowBorder;
 };
-declare function BaseTable<ColumnMetaData>({ noRowsContent, keyField, loading, footerRows, rowHovers, compact, stickyHeader, onRowMouseEnter, onRowMouseLeave, columns, rows, id, className, rowBorder, ...props }: BaseTableProps<ColumnMetaData>): React.JSX.Element;
+declare function BaseTable<ColumnMetaData>({ noRowsContent, keyField, loading, footerRows, rowHovers, compact, stickyHeader, onRowMouseEnter, onRowMouseLeave, columns, rows, id, className, rowBorder, ...props }: BaseTableProps<ColumnMetaData>): import("react/jsx-runtime").JSX.Element;
 export default BaseTable;

package/dist/src/Table/BaseTable.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { styled } from "styled-components";
 import { space } from "styled-system";
 import TableHead from "./TableHead";
@@ -11,9 +11,6 @@ const StyledTable = styled.table(space, {
     position: "relative",
 });
 function BaseTable({ noRowsContent = "No records have been created for this table.", keyField = "id", loading = false, footerRows = [], rowHovers = true, compact = false, stickyHeader = false, onRowMouseEnter = () => { }, onRowMouseLeave = () => { }, columns, rows, id, className, rowBorder = false, ...props }) {
-    return (React.createElement(StyledTable, { id: id, className: className, ...props },
-        React.createElement(TableHead, { columns: columns, compact: compact, sticky: stickyHeader }),
-        React.createElement(TableBody, { columns: columns, rows: rows, keyField: keyField, noRowsContent: noRowsContent, loading: loading, rowHovers: rowHovers, compact: compact, onRowMouseLeave: onRowMouseLeave, onRowMouseEnter: onRowMouseEnter, rowBorder: rowBorder }),
-        footerRows && (React.createElement(TableFoot, { columns: columns, rows: footerRows, keyField: keyField, loading: loading, compact: compact }))));
+    return (_jsxs(StyledTable, { id: id, className: className, ...props, children: [_jsx(TableHead, { columns: columns, compact: compact, sticky: stickyHeader }), _jsx(TableBody, { columns: columns, rows: rows, keyField: keyField, noRowsContent: noRowsContent, loading: loading, rowHovers: rowHovers, compact: compact, onRowMouseLeave: onRowMouseLeave, onRowMouseEnter: onRowMouseEnter, rowBorder: rowBorder }), footerRows && (_jsx(TableFoot, { columns: columns, rows: footerRows, keyField: keyField, loading: loading, compact: compact }))] }));
 }
 export default BaseTable;

package/dist/src/Table/SortingColumnHeader.d.ts

@@ -6,5 +6,5 @@ interface SortingColumnHeaderProps {
     ascending?: boolean;
     active?: boolean;
 }
-declare function SortingColumnHeader({ onChange, label, ariaLabel, ascending, active, }: SortingColumnHeaderProps): React.JSX.Element;
+declare function SortingColumnHeader({ onChange, label, ariaLabel, ascending, active, }: SortingColumnHeaderProps): import("react/jsx-runtime").JSX.Element;
 export default SortingColumnHeader;

package/dist/src/Table/SortingColumnHeader.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
 import { Text } from "../Type";
 import { Flex } from "../Flex";
@@ -6,8 +6,6 @@ import { ControlIcon } from "../Button";
 function SortingColumnHeader({ onChange, label, ariaLabel, ascending = false, active = false, }) {
     const { t } = useTranslation();
     const defaultAriaLabel = ascending ? t("sort descending") : t("sort ascending");
-    return (React.createElement(Flex, { alignItems: "center" },
-        React.createElement(Text, { mr: "x1" }, label),
-        React.createElement(ControlIcon, { size: "x3", icon: ascending ? "sortDown" : "sortUp", label: ariaLabel || defaultAriaLabel, toggled: active, onClick: onChange })));
+    return (_jsxs(Flex, { alignItems: "center", children: [_jsx(Text, { mr: "x1", children: label }), _jsx(ControlIcon, { size: "x3", icon: ascending ? "sortDown" : "sortUp", label: ariaLabel || defaultAriaLabel, toggled: active, onClick: onChange })] }));
 }
 export default SortingColumnHeader;

package/dist/src/Table/StatefulTable.d.ts

@@ -102,6 +102,6 @@ declare class StatefulTable<ColumnMetaData> extends Component<StatefulTableProps
         onSelectHeader?: (...args: any[]) => any;
         isHeaderSelected?: any;
     };
-    render(): React.JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }
 export default StatefulTable;

package/dist/src/Table/StatefulTable.js

@@ -1,4 +1,5 @@
-import React, { Component } from "react";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Component } from "react";
 import propTypes from "@styled-system/prop-types";
 import { Pagination } from "../Pagination";
 import { pick } from "../utils/subset";
@@ -192,9 +193,7 @@ class StatefulTable extends Component {
         const { paginatedRows, currentPage } = this.state;
         const { rowsPerPage, paginationProps, paginationCss } = this.props;
         const baseTableProps = pick(this.getControlProps(), ...propNames);
-        return (React.createElement(React.Fragment, null,
-            React.createElement(BaseTable, { ...baseTableProps }),
-            rowsPerPage && (React.createElement(Pagination, { pt: "x2", currentPage: currentPage, totalPages: paginatedRows.length || 1, onSelectPage: this.goToPage, onNext: this.goToNextPage, onPrevious: this.goToPrevPage, justifyContent: "flex-end", css: paginationCss, ...paginationProps }))));
+        return (_jsxs(_Fragment, { children: [_jsx(BaseTable, { ...baseTableProps }), rowsPerPage && (_jsx(Pagination, { pt: "x2", currentPage: currentPage, totalPages: paginatedRows.length || 1, onSelectPage: this.goToPage, onNext: this.goToNextPage, onPrevious: this.goToPrevPage, justifyContent: "flex-end", css: paginationCss, ...paginationProps }))] }));
     }
 }
 StatefulTable.defaultProps = {

package/dist/src/Table/Table.d.ts

@@ -1,4 +1,3 @@
-import React from "react";
 import SortingColumnHeader from "./SortingColumnHeader";
 import { StatefulTableProps } from "./StatefulTable";
 import { ColumnType, RowType, CellInfoType } from "./Table.types";
@@ -6,7 +5,7 @@ export type TableProps<ColumnMetadata = unknown> = StatefulTableProps<ColumnMeta
 export type TableColumnType<ColumnMetadata = unknown> = ColumnType<ColumnMetadata>;
 export type TableRowType = RowType;
 export type TableCellInfoType<ColumnMetadata = unknown> = CellInfoType<ColumnMetadata>;
-declare function Table<ColumnMetadata>({ hasSelectableRows, rowsPerPage, hasExpandableRows, selectedRows, onRowSelectionChange, onRowExpansionChange, onPageChange, selectAllAriaLabel, deselectAllAriaLabel, paginationCss, paginationProps, ...props }: TableProps<ColumnMetadata>): React.JSX.Element;
+declare function Table<ColumnMetadata>({ hasSelectableRows, rowsPerPage, hasExpandableRows, selectedRows, onRowSelectionChange, onRowExpansionChange, onPageChange, selectAllAriaLabel, deselectAllAriaLabel, paginationCss, paginationProps, ...props }: TableProps<ColumnMetadata>): import("react/jsx-runtime").JSX.Element;
 declare namespace Table {
     var SortingHeader: typeof SortingColumnHeader;
 }

package/dist/src/Table/Table.js

@@ -1,9 +1,9 @@
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import StatefulTable from "./StatefulTable";
 import BaseTable from "./BaseTable";
 import SortingColumnHeader from "./SortingColumnHeader";
 function Table({ hasSelectableRows, rowsPerPage, hasExpandableRows, selectedRows, onRowSelectionChange, onRowExpansionChange, onPageChange, selectAllAriaLabel, deselectAllAriaLabel, paginationCss, paginationProps, ...props }) {
-    return hasSelectableRows || rowsPerPage || hasExpandableRows ? (React.createElement(StatefulTable, { hasExpandableRows: hasExpandableRows, hasSelectableRows: hasSelectableRows, onRowExpansionChange: onRowExpansionChange, onRowSelectionChange: onRowSelectionChange, selectedRows: selectedRows, rowsPerPage: rowsPerPage, onPageChange: onPageChange, selectAllAriaLabel: selectAllAriaLabel, deselectAllAriaLabel: deselectAllAriaLabel, paginationCss: paginationCss, paginationProps: paginationProps, ...props })) : (React.createElement(BaseTable, { ...props }));
+    return hasSelectableRows || rowsPerPage || hasExpandableRows ? (_jsx(StatefulTable, { hasExpandableRows: hasExpandableRows, hasSelectableRows: hasSelectableRows, onRowExpansionChange: onRowExpansionChange, onRowSelectionChange: onRowSelectionChange, selectedRows: selectedRows, rowsPerPage: rowsPerPage, onPageChange: onPageChange, selectAllAriaLabel: selectAllAriaLabel, deselectAllAriaLabel: deselectAllAriaLabel, paginationCss: paginationCss, paginationProps: paginationProps, ...props })) : (_jsx(BaseTable, { ...props }));
 }
 Table.SortingHeader = SortingColumnHeader;
 export default Table;

package/dist/src/Table/TableBody.d.ts

@@ -1,4 +1,4 @@
-import React, { type ReactNode } from "react";
+import { type ReactNode } from "react";
 import { RowBorder } from "./Table.types";
 interface TableBodyProps {
     rows: any[];
@@ -12,5 +12,5 @@ interface TableBodyProps {
     onRowMouseEnter?: (...args: any[]) => any;
     rowBorder?: RowBorder;
 }
-declare const TableBody: ({ rows, columns, keyField, noRowsContent, loading, rowHovers, compact, onRowMouseLeave, onRowMouseEnter, rowBorder, }: TableBodyProps) => React.JSX.Element;
+declare const TableBody: ({ rows, columns, keyField, noRowsContent, loading, rowHovers, compact, onRowMouseLeave, onRowMouseEnter, rowBorder, }: TableBodyProps) => import("react/jsx-runtime").JSX.Element;
 export default TableBody;

package/dist/src/Table/TableBody.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { styled } from "styled-components";
 import { Box } from "../Box";
 import TableCell from "./TableCell";
@@ -20,18 +20,13 @@ const StyledTr = styled.tr(({ rowHovers, rowBorder, theme }) => ({
 }));
 const renderRows = (rows, columns, keyField, rowHovers, noRowsContent, compact, onRowMouseLeave, onRowMouseEnter, rowBorder) => rows.length > 0 ? (rows.map((row, rowIndex) => {
     const rowKey = row[keyField] !== undefined ? row[keyField] : rowIndex;
-    return (React.createElement(TableBodyRow, { key: rowKey, row: row, columns: columns, keyField: keyField, rowHovers: rowHovers, compact: compact, rowClassName: row.rowClassName, onMouseEnter: (e) => onRowMouseEnter({ row, e }), onMouseLeave: (e) => onRowMouseLeave({ row, e }), rowBorder: rowBorder }));
-})) : (React.createElement(TableMessageContainer, { colSpan: columns.length }, noRowsContent));
+    return (_jsx(TableBodyRow, { row: row, columns: columns, keyField: keyField, rowHovers: rowHovers, compact: compact, rowClassName: row.rowClassName, onMouseEnter: (e) => onRowMouseEnter({ row, e }), onMouseLeave: (e) => onRowMouseLeave({ row, e }), rowBorder: rowBorder }, rowKey));
+})) : (_jsx(TableMessageContainer, { colSpan: columns.length, children: noRowsContent }));
 const TableBodyRow = ({ row, columns, rowHovers, compact, rowClassName, onMouseLeave, onMouseEnter, rowBorder, }) => {
-    const renderAllCells = () => columns.map((column, index) => (React.createElement(TableCell, { key: column.dataKey ?? column.key ?? index, row: row, column: column, cellData: row[column.dataKey], compact: compact })));
-    return (React.createElement(React.Fragment, null,
-        React.createElement(StyledTr, { rowHovers: rowHovers, "data-testid": "table-row", className: rowClassName, onMouseLeave: onMouseLeave, onMouseEnter: onMouseEnter, rowBorder: rowBorder }, row.heading ? (React.createElement(TableCell, { row: row, colSpan: columns.length, cellData: row.heading, compact: compact })) : (renderAllCells())),
-        row.expandedContent && row.expanded && (React.createElement("tr", { "data-testid": "expanded-table-row" },
-            React.createElement("td", { colSpan: columns.length }, row.expandedContent({ row }))))));
+    const renderAllCells = () => columns.map((column, index) => (_jsx(TableCell, { row: row, column: column, cellData: row[column.dataKey], compact: compact }, column.dataKey ?? column.key ?? index)));
+    return (_jsxs(_Fragment, { children: [_jsx(StyledTr, { rowHovers: rowHovers, "data-testid": "table-row", className: rowClassName, onMouseLeave: onMouseLeave, onMouseEnter: onMouseEnter, rowBorder: rowBorder, children: row.heading ? (_jsx(TableCell, { row: row, colSpan: columns.length, cellData: row.heading, compact: compact })) : (renderAllCells()) }), row.expandedContent && row.expanded && (_jsx("tr", { "data-testid": "expanded-table-row", children: _jsx("td", { colSpan: columns.length, children: row.expandedContent({ row }) }) }))] }));
 };
-const TableMessageContainer = ({ colSpan, children }) => (React.createElement("tr", { "data-testid": "table-message-container" },
-    React.createElement("td", { colSpan: colSpan },
-        React.createElement(StyledMessageContainer, { className: "nds-table__no-rows-content" }, children))));
-const LoadingContent = ({ colSpan }) => (React.createElement(TableMessageContainer, { colSpan: colSpan }, "Loading..."));
-const TableBody = ({ rows, columns, keyField = "id", noRowsContent = "No records have been created for this table.", loading, rowHovers, compact, onRowMouseLeave, onRowMouseEnter, rowBorder, }) => (React.createElement("tbody", { "data-testid": "table-body" }, !loading ? (renderRows(rows, columns, keyField, rowHovers, noRowsContent, compact, onRowMouseLeave, onRowMouseEnter, rowBorder)) : (React.createElement(LoadingContent, { colSpan: columns.length }))));
+const TableMessageContainer = ({ colSpan, children }) => (_jsx("tr", { "data-testid": "table-message-container", children: _jsx("td", { colSpan: colSpan, children: _jsx(StyledMessageContainer, { className: "nds-table__no-rows-content", children: children }) }) }));
+const LoadingContent = ({ colSpan }) => (_jsx(TableMessageContainer, { colSpan: colSpan, children: "Loading..." }));
+const TableBody = ({ rows, columns, keyField = "id", noRowsContent = "No records have been created for this table.", loading, rowHovers, compact, onRowMouseLeave, onRowMouseEnter, rowBorder, }) => (_jsx("tbody", { "data-testid": "table-body", children: !loading ? (renderRows(rows, columns, keyField, rowHovers, noRowsContent, compact, onRowMouseLeave, onRowMouseEnter, rowBorder)) : (_jsx(LoadingContent, { colSpan: columns.length })) }));
 export default TableBody;

package/dist/src/Table/TableCell.d.ts

@@ -6,5 +6,5 @@ type TableCellProps = {
     cellData?: Record<string, unknown> | React.ReactNode | boolean;
     compact?: boolean;
 };
-declare const TableCell: ({ column, row, cellData, colSpan, compact }: TableCellProps) => React.JSX.Element;
+declare const TableCell: ({ column, row, cellData, colSpan, compact }: TableCellProps) => import("react/jsx-runtime").JSX.Element;
 export default TableCell;

package/dist/src/Table/TableCell.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { styled } from "styled-components";
 const StyledTableCell = styled.td(({ align, compact, verticalAlign, theme }) => {
     const padding = compact ? theme.space.x1 : theme.space.x2;
@@ -19,8 +19,8 @@ const TableCell = ({ column = {}, row = {}, cellData = "", colSpan = undefined,
     const isCustomCell = Boolean(cellRenderer);
     const cellContent = cellFormatter ? cellFormatter({ cellData, column, row }) : cellData;
     if (isCustomCell) {
-        return React.createElement("td", { colSpan: colSpan }, cellRenderer ? cellRenderer({ cellData, column, row }) : cellData);
+        return _jsx("td", { colSpan: colSpan, children: cellRenderer ? cellRenderer({ cellData, column, row }) : cellData });
     }
-    return (React.createElement(StyledTableCell, { align: column.align, compact: compact, verticalAlign: row.verticalAlign }, cellContent));
+    return (_jsx(StyledTableCell, { align: column.align, compact: compact, verticalAlign: row.verticalAlign, children: cellContent }));
 };
 export default TableCell;

package/dist/src/Table/TableFoot.d.ts

@@ -1,4 +1,3 @@
-import React from "react";
 import { RowType, Columns } from "./Table.types";
 declare function TableFoot<ColumnMetadata>({ columns, rows, keyField, loading, compact, }: {
     columns: Columns<ColumnMetadata>;
@@ -6,5 +5,5 @@ declare function TableFoot<ColumnMetadata>({ columns, rows, keyField, loading, c
     keyField?: string;
     loading?: boolean;
     compact?: boolean;
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 export default TableFoot;

package/dist/src/Table/TableFoot.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { styled } from "styled-components";
 import TableCell from "./TableCell";
 import StyledTh from "./StyledTh";
@@ -7,17 +7,17 @@ const StyledFooterRow = styled.tr(({ theme }) => ({
         borderTop: `1px solid ${theme.colors.lightGrey}`,
     },
 }));
-const renderRows = (rows, columns, keyField, loading, compact) => rows.map((row) => (React.createElement(TableFooterRow, { row: row, columns: columns, key: row[keyField], loading: loading, compact: compact })));
+const renderRows = (rows, columns, keyField, loading, compact) => rows.map((row) => (_jsx(TableFooterRow, { row: row, columns: columns, loading: loading, compact: compact }, row[keyField])));
 const TableFooterRow = ({ row, columns, loading, compact }) => {
     const columnsWithoutControls = columns.filter((column) => column.dataKey !== "selected" && column.dataKey !== "expanded");
     const numberOfControlColumns = columns.length - columnsWithoutControls.length;
-    return (React.createElement(StyledFooterRow, null, columnsWithoutControls.map((column, index) => index === 0 ? (React.createElement(StyledTh, { key: column.dataKey, scope: "row", colSpan: numberOfControlColumns + 1, compact: compact }, row[column.dataKey])) : (!loading && (React.createElement(TableCell, { key: column.dataKey ?? column.key ?? index, row: row, column: {
-            dataKey: column.dataKey,
-            label: column.label,
-            align: column.align,
-        }, cellData: row[column.dataKey], compact: compact }))))));
+    return (_jsx(StyledFooterRow, { children: columnsWithoutControls.map((column, index) => index === 0 ? (_jsx(StyledTh, { scope: "row", colSpan: numberOfControlColumns + 1, compact: compact, children: row[column.dataKey] }, column.dataKey)) : (!loading && (_jsx(TableCell, { row: row, column: {
+                dataKey: column.dataKey,
+                label: column.label,
+                align: column.align,
+            }, cellData: row[column.dataKey], compact: compact }, column.dataKey ?? column.key ?? index)))) }));
 };
 function TableFoot({ columns, rows, keyField = "id", loading = false, compact = false, }) {
-    return React.createElement("tfoot", null, renderRows(rows, columns, keyField, loading, compact));
+    return _jsx("tfoot", { children: renderRows(rows, columns, keyField, loading, compact) });
 }
 export default TableFoot;

package/dist/src/Table/TableHead.d.ts

@@ -1,9 +1,8 @@
-import React from "react";
 import type { Columns } from "./Table.types";
 interface TableHeadProps<ColumnMetadata> {
     columns: Columns<ColumnMetadata>;
     compact?: boolean;
     sticky?: boolean;
 }
-declare function TableHead<ColumnMetadata>({ columns, compact, sticky }: TableHeadProps<ColumnMetadata>): React.JSX.Element;
+declare function TableHead<ColumnMetadata>({ columns, compact, sticky }: TableHeadProps<ColumnMetadata>): import("react/jsx-runtime").JSX.Element;
 export default TableHead;

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;