@nulogy/components 16.0.0 → 16.0.2

package/dist/src/StatusIndicator/StatusIndicator.story.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Text, Heading2, Heading3 } from "../Type";
 import { Box } from "../Box";
 import { Flex } from "../Flex";
@@ -6,59 +6,19 @@ import { StatusIndicator } from "./";
 export default {
     title: "Components/StatusIndicator",
 };
-export const All = () => (React.createElement(React.Fragment, null,
-    React.createElement(StatusIndicator, { type: "neutral", mr: "half" }, "Neutral"),
-    React.createElement(StatusIndicator, { type: "dark", mr: "half" }, "Dark"),
-    React.createElement(StatusIndicator, { type: "quiet", mr: "half" }, "Quiet"),
-    React.createElement(StatusIndicator, { type: "informative", mr: "half" }, "Informative"),
-    React.createElement(StatusIndicator, { type: "success", mr: "half" }, "Success"),
-    React.createElement(StatusIndicator, { type: "warning", mr: "half" }, "Warning"),
-    React.createElement(StatusIndicator, { type: "danger", mr: "half" }, "Danger")));
-export const Neutral = () => React.createElement(StatusIndicator, { type: "neutral" }, "Neutral");
-export const Dark = () => React.createElement(StatusIndicator, { type: "dark" }, "Dark");
-export const Quiet = () => React.createElement(StatusIndicator, { type: "quiet" }, "Quiet");
-export const Informative = () => React.createElement(StatusIndicator, { type: "informative" }, "Informative");
-export const Success = () => React.createElement(StatusIndicator, { type: "success" }, "Success");
-export const Warning = () => React.createElement(StatusIndicator, { type: "warning" }, "Warning");
-export const Danger = () => React.createElement(StatusIndicator, { type: "danger" }, "Danger");
-export const FollowingText = () => (React.createElement(React.Fragment, null,
-    React.createElement(Box, { mb: "x3" },
-        React.createElement(Heading2, { inline: true, mr: "x1" }, "Label"),
-        React.createElement(StatusIndicator, null, "Status")),
-    React.createElement(Box, { mb: "x3" },
-        React.createElement(Heading3, { inline: true, mr: "x1" }, "Label"),
-        React.createElement(StatusIndicator, null, "Status")),
-    React.createElement(Box, { mb: "x3" },
-        React.createElement(Text, { inline: true, mr: "x1" }, "Label"),
-        React.createElement(StatusIndicator, null, "Status")),
-    React.createElement(Box, { mb: "x3" },
-        React.createElement(Text, { fontSize: "small", lineHeight: "smallTextBase", inline: true, mr: "x1" }, "Label"),
-        React.createElement(StatusIndicator, null, "Status")),
-    React.createElement(Box, { mb: "x3" },
-        React.createElement(Text, { fontSize: "smaller", lineHeight: "smallerText", inline: true, mr: "x1" }, "Label"),
-        React.createElement(StatusIndicator, null, "Status")),
-    React.createElement(Box, { mb: "x3" },
-        React.createElement(Text, { inline: true, mr: "x1" }, "Long label Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in eleifend metus, in tempus sapien. Morbi eget felis est. Nunc facilisis vel nisi nec ornare. Ut blandit ullamcorper enim sed fringilla. Quisque malesuada pharetra tincidunt. Mauris mauris tortor, maximus vitae tempor ac, tincidunt pharetra augue. In eget suscipit est. Suspendisse feugiat risus urna"),
-        React.createElement(StatusIndicator, null, "Status"))));
+export const All = () => (_jsxs(_Fragment, { children: [_jsx(StatusIndicator, { type: "neutral", mr: "half", children: "Neutral" }), _jsx(StatusIndicator, { type: "dark", mr: "half", children: "Dark" }), _jsx(StatusIndicator, { type: "quiet", mr: "half", children: "Quiet" }), _jsx(StatusIndicator, { type: "informative", mr: "half", children: "Informative" }), _jsx(StatusIndicator, { type: "success", mr: "half", children: "Success" }), _jsx(StatusIndicator, { type: "warning", mr: "half", children: "Warning" }), _jsx(StatusIndicator, { type: "danger", mr: "half", children: "Danger" })] }));
+export const Neutral = () => _jsx(StatusIndicator, { type: "neutral", children: "Neutral" });
+export const Dark = () => _jsx(StatusIndicator, { type: "dark", children: "Dark" });
+export const Quiet = () => _jsx(StatusIndicator, { type: "quiet", children: "Quiet" });
+export const Informative = () => _jsx(StatusIndicator, { type: "informative", children: "Informative" });
+export const Success = () => _jsx(StatusIndicator, { type: "success", children: "Success" });
+export const Warning = () => _jsx(StatusIndicator, { type: "warning", children: "Warning" });
+export const Danger = () => _jsx(StatusIndicator, { type: "danger", children: "Danger" });
+export const FollowingText = () => (_jsxs(_Fragment, { children: [_jsxs(Box, { mb: "x3", children: [_jsx(Heading2, { inline: true, mr: "x1", children: "Label" }), _jsx(StatusIndicator, { children: "Status" })] }), _jsxs(Box, { mb: "x3", children: [_jsx(Heading3, { inline: true, mr: "x1", children: "Label" }), _jsx(StatusIndicator, { children: "Status" })] }), _jsxs(Box, { mb: "x3", children: [_jsx(Text, { inline: true, mr: "x1", children: "Label" }), _jsx(StatusIndicator, { children: "Status" })] }), _jsxs(Box, { mb: "x3", children: [_jsx(Text, { fontSize: "small", lineHeight: "smallTextBase", inline: true, mr: "x1", children: "Label" }), _jsx(StatusIndicator, { children: "Status" })] }), _jsxs(Box, { mb: "x3", children: [_jsx(Text, { fontSize: "smaller", lineHeight: "smallerText", inline: true, mr: "x1", children: "Label" }), _jsx(StatusIndicator, { children: "Status" })] }), _jsxs(Box, { mb: "x3", children: [_jsx(Text, { inline: true, mr: "x1", children: "Long label Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in eleifend metus, in tempus sapien. Morbi eget felis est. Nunc facilisis vel nisi nec ornare. Ut blandit ullamcorper enim sed fringilla. Quisque malesuada pharetra tincidunt. Mauris mauris tortor, maximus vitae tempor ac, tincidunt pharetra augue. In eget suscipit est. Suspendisse feugiat risus urna" }), _jsx(StatusIndicator, { children: "Status" })] })] }));
 FollowingText.story = {
     name: "Following text",
 };
-export const InsideFlex = () => (React.createElement(React.Fragment, null,
-    React.createElement(Flex, { mb: "x3" },
-        React.createElement(Heading2, { inline: true, mr: "x1", mb: "0" }, "Label"),
-        React.createElement(StatusIndicator, { className: "my-test-classname" }, "Status")),
-    React.createElement(Flex, { mb: "x3" },
-        React.createElement(Heading3, { inline: true, mr: "x1", mb: "0" }, "Label"),
-        React.createElement(StatusIndicator, null, "Status")),
-    React.createElement(Flex, { mb: "x3" },
-        React.createElement(Text, { inline: true, mr: "x1", mb: "0" }, "Label"),
-        React.createElement(StatusIndicator, null, "Status")),
-    React.createElement(Flex, { mb: "x3" },
-        React.createElement(Text, { fontSize: "small", lineHeight: "smallTextBase", inline: true, mr: "x1", mb: "0" }, "Label"),
-        React.createElement(StatusIndicator, null, "Status")),
-    React.createElement(Flex, { mb: "x3" },
-        React.createElement(Text, { fontSize: "smaller", lineHeight: "smallerText", inline: true, mr: "x1", mb: "0" }, "Label"),
-        React.createElement(StatusIndicator, null, "Status"))));
+export const InsideFlex = () => (_jsxs(_Fragment, { children: [_jsxs(Flex, { mb: "x3", children: [_jsx(Heading2, { inline: true, mr: "x1", mb: "0", children: "Label" }), _jsx(StatusIndicator, { className: "my-test-classname", children: "Status" })] }), _jsxs(Flex, { mb: "x3", children: [_jsx(Heading3, { inline: true, mr: "x1", mb: "0", children: "Label" }), _jsx(StatusIndicator, { children: "Status" })] }), _jsxs(Flex, { mb: "x3", children: [_jsx(Text, { inline: true, mr: "x1", mb: "0", children: "Label" }), _jsx(StatusIndicator, { children: "Status" })] }), _jsxs(Flex, { mb: "x3", children: [_jsx(Text, { fontSize: "small", lineHeight: "smallTextBase", inline: true, mr: "x1", mb: "0", children: "Label" }), _jsx(StatusIndicator, { children: "Status" })] }), _jsxs(Flex, { mb: "x3", children: [_jsx(Text, { fontSize: "smaller", lineHeight: "smallerText", inline: true, mr: "x1", mb: "0", children: "Label" }), _jsx(StatusIndicator, { children: "Status" })] })] }));
 InsideFlex.story = {
     name: "Inside flex",
 };

package/dist/src/Summary/Summary.d.ts

@@ -1,7 +1,6 @@
-import React from "react";
 import { BoxProps } from "../Box/Box";
 type SummaryProps = Omit<BoxProps, "as"> & {
     breakpoint?: number | string;
 };
-declare const Summary: React.FC<React.PropsWithChildren<SummaryProps>>;
+declare function Summary({ breakpoint, children, ...rest }: SummaryProps): import("react/jsx-runtime").JSX.Element;
 export default Summary;

package/dist/src/Summary/Summary.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { styled, useTheme } from "styled-components";
 import numberFromDimension from "../utils/numberFromDimension";
 import { Box } from "../Box";
@@ -21,11 +21,10 @@ const SummaryWrapper = styled(Box)(({ theme, breakpoint }) => ({
         rowGap: 0,
     },
 }));
-const Summary = ({ breakpoint, children, ...rest }) => {
+function Summary({ breakpoint, children, ...rest }) {
     const theme = useTheme();
     breakpoint || (breakpoint = theme.breakpoints.medium);
     const breakpointPx = numberFromDimension(breakpoint);
-    return (React.createElement(SummaryContextProvider, { breakpoint: breakpointPx },
-        React.createElement(SummaryWrapper, { breakpoint: breakpointPx, ...rest }, children)));
-};
+    return (_jsx(SummaryContextProvider, { breakpoint: breakpointPx, children: _jsx(SummaryWrapper, { breakpoint: breakpointPx, ...rest, children: children }) }));
+}
 export default Summary;

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

@@ -1,6 +1,5 @@
-import React from "react";
-export declare function Default(): React.JSX.Element;
-export declare function WithMainInfoOnly(): React.JSX.Element;
+export declare function Default(): import("react/jsx-runtime").JSX.Element;
+export declare function WithMainInfoOnly(): import("react/jsx-runtime").JSX.Element;
 declare const _default: {
     title: string;
 };

package/dist/src/Summary/Summary.story.js

@@ -1,19 +1,11 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { StatusIndicator } from "../StatusIndicator";
 import { Summary, SummaryDivider, SummaryItem } from "..";
 export function Default() {
-    return (React.createElement(Summary, null,
-        React.createElement(SummaryItem, { value: 2, status: React.createElement(StatusIndicator, { type: "danger" }, "Missed") }),
-        React.createElement(SummaryItem, { value: 42, status: React.createElement(StatusIndicator, { type: "warning" }, "Delayed") }),
-        React.createElement(SummaryItem, { value: 139, status: React.createElement(StatusIndicator, { type: "neutral" }, "On Time") }),
-        React.createElement(SummaryDivider, null),
-        React.createElement(SummaryItem, { value: 12, status: React.createElement(StatusIndicator, { type: "success" }, "Delivered") })));
+    return (_jsxs(Summary, { children: [_jsx(SummaryItem, { value: 2, status: _jsx(StatusIndicator, { type: "danger", children: "Missed" }) }), _jsx(SummaryItem, { value: 42, status: _jsx(StatusIndicator, { type: "warning", children: "Delayed" }) }), _jsx(SummaryItem, { value: 139, status: _jsx(StatusIndicator, { type: "neutral", children: "On Time" }) }), _jsx(SummaryDivider, {}), _jsx(SummaryItem, { value: 12, status: _jsx(StatusIndicator, { type: "success", children: "Delivered" }) })] }));
 }
 export function WithMainInfoOnly() {
-    return (React.createElement(Summary, null,
-        React.createElement(SummaryItem, { value: 42, status: React.createElement(StatusIndicator, { type: "informative" }, "On Time") }),
-        React.createElement(SummaryItem, { value: 42, status: React.createElement(StatusIndicator, { type: "informative" }, "On Time") }),
-        React.createElement(SummaryItem, { value: 42, status: React.createElement(StatusIndicator, { type: "informative" }, "On Time") })));
+    return (_jsxs(Summary, { children: [_jsx(SummaryItem, { value: 42, status: _jsx(StatusIndicator, { type: "informative", children: "On Time" }) }), _jsx(SummaryItem, { value: 42, status: _jsx(StatusIndicator, { type: "informative", children: "On Time" }) }), _jsx(SummaryItem, { value: 42, status: _jsx(StatusIndicator, { type: "informative", children: "On Time" }) })] }));
 }
 export default {
     title: "Components/Summary",

package/dist/src/Summary/SummaryContext.d.ts

@@ -3,5 +3,7 @@ type SummaryContextValue = {
     breakpoint: number;
 };
 export declare function useSummaryContext(): SummaryContextValue;
-export declare const SummaryContextProvider: React.FC<React.PropsWithChildren<SummaryContextValue>>;
+export declare function SummaryContextProvider({ breakpoint, children }: SummaryContextValue & {
+    children?: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/src/Summary/SummaryContext.js

@@ -1,4 +1,5 @@
-import React, { createContext, useContext } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
 const SummaryContext = createContext(undefined);
 export function useSummaryContext() {
     const context = useContext(SummaryContext);
@@ -7,8 +8,8 @@ export function useSummaryContext() {
     }
     return context;
 }
-export const SummaryContextProvider = ({ breakpoint, children, }) => {
-    return (React.createElement(SummaryContext.Provider, { value: {
+export function SummaryContextProvider({ breakpoint, children }) {
+    return (_jsx(SummaryContext.Provider, { value: {
             breakpoint,
-        } }, children));
-};
+        }, children: children }));
+}

package/dist/src/Summary/SummaryDivider.d.ts

@@ -1,3 +1,2 @@
-import React from "react";
-declare const SummaryDivider: (props: any) => React.JSX.Element;
+declare const SummaryDivider: (props: any) => import("react/jsx-runtime").JSX.Element;
 export default SummaryDivider;

package/dist/src/Summary/SummaryDivider.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { styled } from "styled-components";
 import { Box } from "../Box";
 import numberFromDimension from "../utils/numberFromDimension";
@@ -16,6 +16,6 @@ const Divider = styled(Box)(({ theme, breakpoint }) => ({
 }));
 const SummaryDivider = (props) => {
     const { breakpoint } = useSummaryContext();
-    return React.createElement(Divider, { breakpoint: numberFromDimension(breakpoint), ...props });
+    return _jsx(Divider, { breakpoint: numberFromDimension(breakpoint), ...props });
 };
 export default SummaryDivider;

package/dist/src/Summary/SummaryItem.d.ts

@@ -4,5 +4,5 @@ type SummaryItemProps = Omit<FlexProps, "as"> & {
     value: number | string;
     status: React.ReactNode;
 };
-declare const SummaryItem: React.FC<React.PropsWithChildren<SummaryItemProps>>;
+declare function SummaryItem({ value, status, ...rest }: SummaryItemProps): import("react/jsx-runtime").JSX.Element;
 export default SummaryItem;

package/dist/src/Summary/SummaryItem.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 { Flex } from "../Flex";
 import { Text } from "../Type";
@@ -11,12 +11,10 @@ const SummaryItemWrapper = styled(Flex)(({ theme, breakpoint }) => ({
         flexDirection: "row",
     },
 }));
-const SummaryItem = ({ value, status, ...rest }) => {
+function SummaryItem({ value, status, ...rest }) {
     const { breakpoint } = useSummaryContext();
     const matches = useMediaQuery(`(max-width: ${breakpoint}px)`);
     delete rest["children"];
-    return (React.createElement(SummaryItemWrapper, { breakpoint: breakpoint, ...rest },
-        React.createElement(Text, { fontWeight: "medium", fontSize: !matches ? "heading4" : undefined }, value),
-        status));
-};
+    return (_jsxs(SummaryItemWrapper, { breakpoint: breakpoint, ...rest, children: [_jsx(Text, { fontWeight: "medium", fontSize: !matches ? "heading4" : undefined, children: value }), status] }));
+}
 export default SummaryItem;

package/dist/src/Switcher/Switch.js

@@ -1,9 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import { styled } from "styled-components";
 import { variant } from "styled-system";
 import numberFromDimension from "../utils/numberFromDimension";
 const Switch = React.forwardRef(({ children, ...rest }, ref) => {
-    return (React.createElement(SwitchButton, { ...rest, ref: ref }, children));
+    return (_jsx(SwitchButton, { ...rest, ref: ref, children: children }));
 });
 const SwitchButton = styled.button(({ selected, theme }) => ({
     margin: 1,

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

@@ -1,4 +1,4 @@
-import React, { ReactElement } from "react";
+import { ReactElement } from "react";
 import type { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
 import type { SwitchProps } from "./Switch";
 type SwitcherProps = {
@@ -7,5 +7,5 @@ type SwitcherProps = {
     selected?: string;
     onChange?: (value: string) => void;
 };
-declare const Switcher: React.FC<React.PropsWithChildren<SwitcherProps>>;
+declare function Switcher({ variant, selected, onChange, ...rest }: SwitcherProps): import("react/jsx-runtime").JSX.Element;
 export default Switcher;

package/dist/src/Switcher/Switcher.js

@@ -1,8 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import { Box } from "../Box";
 import FocusManager from "../utils/ts/FocusManager";
 import { useComponentVariant } from "../NDSProvider/ComponentVariantContext";
-const Switcher = ({ variant, selected, onChange, ...rest }) => {
+function Switcher({ variant, selected, onChange, ...rest }) {
     const componentVariant = useComponentVariant(variant);
     const optionRefs = [];
     const isSelected = (value, index) => {
@@ -35,7 +36,6 @@ const Switcher = ({ variant, selected, onChange, ...rest }) => {
             });
         });
     };
-    return (React.createElement(Box, { display: "inline-flex", bg: "whiteGrey", borderRadius: "9999px", ...rest },
-        React.createElement(FocusManager, { refs: optionRefs, defaultFocusedIndex: getSelectedIndex() }, ({ focusedIndex, setFocusedIndex, handleArrowNavigation }) => options(focusedIndex, setFocusedIndex, handleArrowNavigation))));
-};
+    return (_jsx(Box, { display: "inline-flex", bg: "whiteGrey", borderRadius: "9999px", ...rest, children: _jsx(FocusManager, { refs: optionRefs, defaultFocusedIndex: getSelectedIndex(), children: ({ focusedIndex, setFocusedIndex, handleArrowNavigation }) => options(focusedIndex, setFocusedIndex, handleArrowNavigation) }) }));
+}
 export default Switcher;

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;