@nulogy/components 16.0.0 → 16.0.2

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.d.ts

@@ -7,5 +7,5 @@ type TabScrollIndicatorProps = {
     ariaLabelLeft?: string;
     ariaLabelRight?: string;
 };
-declare const TabScrollIndicator: React.FC<React.PropsWithChildren<TabScrollIndicatorProps>>;
+declare function TabScrollIndicator({ side, width, ariaLabelLeft, ariaLabelRight, onClick, ...props }: TabScrollIndicatorProps): import("react/jsx-runtime").JSX.Element;
 export default TabScrollIndicator;

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 }) => ({
@@ -36,14 +36,13 @@ const TabScrollIndicatorButton = styled.button(({ side, width, theme }) => ({
         opacity: ".5",
     },
 }));
-const TabScrollIndicator = ({ side = "left", width = 40, ariaLabelLeft, ariaLabelRight, onClick, ...props }) => {
+function TabScrollIndicator({ side = "left", width = 40, ariaLabelLeft, ariaLabelRight, onClick, ...props }) {
     const { t } = useTranslation();
     const rightArrowLabel = ariaLabelRight || t("next");
     const leftArrowLabel = ariaLabelLeft || t("previous");
     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;

package/dist/src/Tabs/TabScrollIndicators.d.ts

@@ -25,6 +25,6 @@ declare class TabScrollIndicators extends React.Component<TabScrollIndicatorsPro
     conditionallyUpdateState(): void;
     handleIndicatorClick(side: any): void;
     applyScrollLeft(scrollLeft: any): void;
-    render(): React.JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }
 export default TabScrollIndicators;

package/dist/src/Tabs/TabScrollIndicators.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // @ts-nocheck
 import { styled } from "styled-components";
 import React from "react";
@@ -114,14 +115,10 @@ class TabScrollIndicators extends React.Component {
     render() {
         const { tabContainerRef, indicatorWidth, children } = this.props;
         const { contentHiddenLeft, contentHiddenRight } = this.state;
-        return (React.createElement(React.Fragment, null,
-            React.createElement(TabScrollIndicatorContainer, { width: tabContainerRef.current ? tabContainerRef.current.offsetWidth : 0 },
-                contentHiddenLeft && (React.createElement(TabScrollIndicator, { width: indicatorWidth, side: "left", onClick: this.handleIndicatorClick })),
-                contentHiddenRight && (React.createElement(TabScrollIndicator, { width: indicatorWidth, side: "right", onClick: this.handleIndicatorClick }))),
-            children({
-                handleScroll: this.handleScroll,
-                handleResize: this.handleResize,
-            })));
+        return (_jsxs(_Fragment, { children: [_jsxs(TabScrollIndicatorContainer, { width: tabContainerRef.current ? tabContainerRef.current.offsetWidth : 0, children: [contentHiddenLeft && (_jsx(TabScrollIndicator, { width: indicatorWidth, side: "left", onClick: this.handleIndicatorClick })), contentHiddenRight && (_jsx(TabScrollIndicator, { width: indicatorWidth, side: "right", onClick: this.handleIndicatorClick }))] }), children({
+                    handleScroll: this.handleScroll,
+                    handleResize: this.handleResize,
+                })] }));
     }
 }
 TabScrollIndicators.defaultProps = {

package/dist/src/Tabs/Tabs.d.ts

@@ -20,8 +20,8 @@ declare class Tabs extends React.Component<TabsProps, TabsState> {
     constructor(props: any);
     getSelectedIndex(): any;
     getTabs(setFocusToTab: any, focusedIndex: any, handleArrowNavigation: any): React.DetailedReactHTMLElement<any, HTMLElement>[];
-    getTabContent(): React.JSX.Element[];
+    getTabContent(): import("react/jsx-runtime").JSX.Element[];
     handleTabClick(index: any): void;
-    render(): React.JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }
 export default Tabs;

package/dist/src/Tabs/Tabs.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // @ts-nocheck
 import React from "react";
 import propTypes from "@styled-system/prop-types";
@@ -75,7 +76,7 @@ class Tabs extends React.Component {
                 return null;
             }
             else {
-                return (React.createElement("div", { "aria-hidden": !selected, hidden: !selected, selected: selected, key: tab.key || tab.label }, tab?.props?.children));
+                return (_jsx("div", { "aria-hidden": !selected, hidden: !selected, selected: selected, children: tab?.props?.children }, tab.key || tab.label));
             }
         });
         return tabContent;
@@ -88,11 +89,7 @@ class Tabs extends React.Component {
     render() {
         const { className } = this.props;
         const spaceProps = getSubset(this.props, propTypes.space);
-        return (React.createElement(Box, { position: "relative" },
-            React.createElement(FocusManager, { refs: this.tabRefs, defaultFocusedIndex: this.getSelectedIndex() }, ({ focusedIndex, setFocusedIndex, handleArrowNavigation }) => (React.createElement(TabScrollIndicators, { tabRefs: this.tabRefs, tabContainerRef: this.tabContainerRef }, ({ handleScroll, handleResize }) => (React.createElement(TabContainer, { className: className, role: "tablist", onScroll: handleScroll, ref: this.tabContainerRef, ...spaceProps },
-                React.createElement(ReactResizeDetector, { handleWidth: true, onResize: handleResize }),
-                this.getTabs(setFocusedIndex, focusedIndex, handleArrowNavigation)))))),
-            this.getTabContent()));
+        return (_jsxs(Box, { position: "relative", children: [_jsx(FocusManager, { refs: this.tabRefs, defaultFocusedIndex: this.getSelectedIndex(), children: ({ focusedIndex, setFocusedIndex, handleArrowNavigation }) => (_jsx(TabScrollIndicators, { tabRefs: this.tabRefs, tabContainerRef: this.tabContainerRef, children: ({ handleScroll, handleResize }) => (_jsxs(TabContainer, { className: className, role: "tablist", onScroll: handleScroll, ref: this.tabContainerRef, ...spaceProps, children: [_jsx(ReactResizeDetector, { handleWidth: true, onResize: handleResize }), this.getTabs(setFocusedIndex, focusedIndex, handleArrowNavigation)] })) })) }), this.getTabContent()] }));
     }
 }
 Tabs.contextType = ComponentVariantContext;

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

@@ -1,30 +1,29 @@
-import React from "react";
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const _Tabs: () => React.JSX.Element;
+export declare const _Tabs: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithADefaultSelectedIndex: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
-export declare const WithOtherInteractiveElements: () => React.JSX.Element;
+export declare const WithOtherInteractiveElements: () => import("react/jsx-runtime").JSX.Element;
 export declare const SetToFitted: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithAllTabStates: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithScrollingTabs: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
         parameters: {
@@ -35,19 +34,19 @@ export declare const WithScrollingTabs: {
     };
 };
 export declare const Controlled: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithInputs: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithContentLoadedOnSelection: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };

package/dist/src/Tabs/Tabs.story.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from "react";
 import { Button } from "../Button";
 import { Flex } from "../Flex";
@@ -15,90 +16,40 @@ class ControlledTabs extends React.Component {
     }
     render() {
         const { selectedIndex } = this.state;
-        return (React.createElement(React.Fragment, null,
-            React.createElement(Tabs, { onTabClick: this.setSelectedTab, selectedIndex: selectedIndex },
-                React.createElement(Tab, { className: "Tab1", label: "Tab 1" }, "Uncontrolled Content: Tab 1"),
-                React.createElement(Tab, { className: "Tab2", label: "Tab 2" }, "Uncontrolled Content: Tab 2"),
-                React.createElement(Tab, { className: "Tab3", label: "Tab 3" }, "Uncontrolled Content: Tab 3"),
-                React.createElement(Tab, { className: "Tab4", label: "Tab 4" }, "Uncontrolled Content: Tab 4")),
-            React.createElement("div", { className: "ControlledTabContent" },
-                "Controlled Content: Tab ",
-                selectedIndex + 1)));
+        return (_jsxs(_Fragment, { children: [_jsxs(Tabs, { onTabClick: this.setSelectedTab, selectedIndex: selectedIndex, children: [_jsx(Tab, { className: "Tab1", label: "Tab 1", children: "Uncontrolled Content: Tab 1" }), _jsx(Tab, { className: "Tab2", label: "Tab 2", children: "Uncontrolled Content: Tab 2" }), _jsx(Tab, { className: "Tab3", label: "Tab 3", children: "Uncontrolled Content: Tab 3" }), _jsx(Tab, { className: "Tab4", label: "Tab 4", children: "Uncontrolled Content: Tab 4" })] }), _jsxs("div", { className: "ControlledTabContent", children: ["Controlled Content: Tab ", selectedIndex + 1] })] }));
     }
 }
 export default {
     title: "Components/Tabs",
 };
-export const _Tabs = () => (React.createElement(Tabs, null,
-    React.createElement(Tab, { className: "Tab1", label: "Tab 1" }, "Tab 1 Content"),
-    React.createElement(Tab, { className: "Tab2", label: "Tab 2" }, "Tab 2 Content"),
-    React.createElement(Tab, { className: "Tab3", label: "Tab 3" }, "Tab 3 Content"),
-    React.createElement(Tab, { className: "Tab4", label: "Tab 4" }, "Tab 4 Content")));
-export const WithADefaultSelectedIndex = () => (React.createElement(Tabs, { defaultSelectedIndex: 1 },
-    React.createElement(Tab, { label: "Tab 1" }, "Tab 1 Content"),
-    React.createElement(Tab, { label: "Tab 2" }, "Tab 2 Content"),
-    React.createElement(Tab, { label: "Tab 3" }, "Tab 3 Content"),
-    React.createElement(Tab, { label: "Tab 4" }, "Tab 4 Content")));
+export const _Tabs = () => (_jsxs(Tabs, { children: [_jsx(Tab, { className: "Tab1", label: "Tab 1", children: "Tab 1 Content" }), _jsx(Tab, { className: "Tab2", label: "Tab 2", children: "Tab 2 Content" }), _jsx(Tab, { className: "Tab3", label: "Tab 3", children: "Tab 3 Content" }), _jsx(Tab, { className: "Tab4", label: "Tab 4", children: "Tab 4 Content" })] }));
+export const WithADefaultSelectedIndex = () => (_jsxs(Tabs, { defaultSelectedIndex: 1, children: [_jsx(Tab, { label: "Tab 1", children: "Tab 1 Content" }), _jsx(Tab, { label: "Tab 2", children: "Tab 2 Content" }), _jsx(Tab, { label: "Tab 3", children: "Tab 3 Content" }), _jsx(Tab, { label: "Tab 4", children: "Tab 4 Content" })] }));
 WithADefaultSelectedIndex.story = {
     name: "with a defaultSelectedIndex",
 };
-export const WithOtherInteractiveElements = () => (React.createElement(Flex, { gap: "x2", alignItems: "flex-start", flexDirection: "column" },
-    React.createElement(Button, null, "Click me"),
-    React.createElement(Tabs, { defaultSelectedIndex: 1 },
-        React.createElement(Tab, { label: "Tab 1" }, "Tab 1 Content"),
-        React.createElement(Tab, { label: "Tab 2" }, "Tab 2 Content"),
-        React.createElement(Tab, { label: "Tab 3" }, "Tab 3 Content"),
-        React.createElement(Tab, { label: "Tab 4" }, "Tab 4 Content"))));
-export const SetToFitted = () => (React.createElement(Tabs, { fitted: true },
-    React.createElement(Tab, { label: "Tab 1" }, "Tab 1 Content"),
-    React.createElement(Tab, { label: "Tab 2" }, "Tab 2 Content"),
-    React.createElement(Tab, { label: "Tab 3" }, "Tab 3 Content"),
-    React.createElement(Tab, { label: "Tab 4" }, "Tab 4 Content")));
+export const WithOtherInteractiveElements = () => (_jsxs(Flex, { gap: "x2", alignItems: "flex-start", flexDirection: "column", children: [_jsx(Button, { children: "Click me" }), _jsxs(Tabs, { defaultSelectedIndex: 1, children: [_jsx(Tab, { label: "Tab 1", children: "Tab 1 Content" }), _jsx(Tab, { label: "Tab 2", children: "Tab 2 Content" }), _jsx(Tab, { label: "Tab 3", children: "Tab 3 Content" }), _jsx(Tab, { label: "Tab 4", children: "Tab 4 Content" })] })] }));
+export const SetToFitted = () => (_jsxs(Tabs, { fitted: true, children: [_jsx(Tab, { label: "Tab 1", children: "Tab 1 Content" }), _jsx(Tab, { label: "Tab 2", children: "Tab 2 Content" }), _jsx(Tab, { label: "Tab 3", children: "Tab 3 Content" }), _jsx(Tab, { label: "Tab 4", children: "Tab 4 Content" })] }));
 SetToFitted.story = {
     name: "set to fitted",
 };
-export const WithAllTabStates = () => (React.createElement("div", null,
-    React.createElement(Tab, { label: "Tab" }),
-    React.createElement(Tab, { label: "Tab", selected: true }),
-    React.createElement(Tab, { label: "Tab", disabled: true }),
-    React.createElement(Tab, { label: "Tab", disabled: true, selected: true })));
+export const WithAllTabStates = () => (_jsxs("div", { children: [_jsx(Tab, { label: "Tab" }), _jsx(Tab, { label: "Tab", selected: true }), _jsx(Tab, { label: "Tab", disabled: true }), _jsx(Tab, { label: "Tab", disabled: true, selected: true })] }));
 WithAllTabStates.story = {
     name: "with all tab states",
 };
-export const WithScrollingTabs = () => (React.createElement(Tabs, { className: "tab-container" },
-    React.createElement(Tab, { label: "Tab 1" }, "Tab 1 Content"),
-    React.createElement(Tab, { label: "Tab 2" }, "Tab 2 Content"),
-    React.createElement(Tab, { label: "Tab 3" }, "Tab 3 Content"),
-    React.createElement(Tab, { label: "Tab 4" }, "Tab 4 Content"),
-    React.createElement(Tab, { label: "Tab 5" }, "Tab 5 Content"),
-    React.createElement(Tab, { label: "Tab 6" }, "Tab 6 Content"),
-    React.createElement(Tab, { label: "Tab 7" }, "Tab 7 Content"),
-    React.createElement(Tab, { label: "Tab 8" }, "Tab 8 Content"),
-    React.createElement(Tab, { label: "Tab 9" }, "Tab 9 Content"),
-    React.createElement(Tab, { label: "Tab 10" }, "Tab 10 Content"),
-    React.createElement(Tab, { label: "Tab 11" }, "Tab 11 Content"),
-    React.createElement(Tab, { label: "Tab 12" }, "Tab 12 Content")));
+export const WithScrollingTabs = () => (_jsxs(Tabs, { className: "tab-container", children: [_jsx(Tab, { label: "Tab 1", children: "Tab 1 Content" }), _jsx(Tab, { label: "Tab 2", children: "Tab 2 Content" }), _jsx(Tab, { label: "Tab 3", children: "Tab 3 Content" }), _jsx(Tab, { label: "Tab 4", children: "Tab 4 Content" }), _jsx(Tab, { label: "Tab 5", children: "Tab 5 Content" }), _jsx(Tab, { label: "Tab 6", children: "Tab 6 Content" }), _jsx(Tab, { label: "Tab 7", children: "Tab 7 Content" }), _jsx(Tab, { label: "Tab 8", children: "Tab 8 Content" }), _jsx(Tab, { label: "Tab 9", children: "Tab 9 Content" }), _jsx(Tab, { label: "Tab 10", children: "Tab 10 Content" }), _jsx(Tab, { label: "Tab 11", children: "Tab 11 Content" }), _jsx(Tab, { label: "Tab 12", children: "Tab 12 Content" })] }));
 WithScrollingTabs.story = {
     name: "with scrolling tabs",
     parameters: { viewport: { defaultViewport: "extraSmall" } },
 };
-export const Controlled = () => React.createElement(ControlledTabs, null);
+export const Controlled = () => _jsx(ControlledTabs, {});
 Controlled.story = {
     name: "controlled",
 };
-export const WithInputs = () => (React.createElement(Tabs, null,
-    React.createElement(Tab, { label: "Tab 1", className: "Tab1" },
-        React.createElement("input", { className: "Input1" })),
-    React.createElement(Tab, { label: "Tab 2", className: "Tab2" },
-        React.createElement("input", { className: "Input2" }))));
+export const WithInputs = () => (_jsxs(Tabs, { children: [_jsx(Tab, { label: "Tab 1", className: "Tab1", children: _jsx("input", { className: "Input1" }) }), _jsx(Tab, { label: "Tab 2", className: "Tab2", children: _jsx("input", { className: "Input2" }) })] }));
 WithInputs.story = {
     name: "with inputs",
 };
-export const WithContentLoadedOnSelection = () => (React.createElement(Tabs, { renderTabContentOnlyWhenSelected: true },
-    React.createElement(Tab, { label: "Tab 1", className: "Tab1" },
-        React.createElement("input", { className: "Input1" })),
-    React.createElement(Tab, { label: "Tab 2", className: "Tab2" },
-        React.createElement("input", { className: "Input2" }))));
+export const WithContentLoadedOnSelection = () => (_jsxs(Tabs, { renderTabContentOnlyWhenSelected: true, children: [_jsx(Tab, { label: "Tab 1", className: "Tab1", children: _jsx("input", { className: "Input1" }) }), _jsx(Tab, { label: "Tab 2", className: "Tab2", children: _jsx("input", { className: "Input2" }) })] }));
 WithContentLoadedOnSelection.story = {
     name: "with content loaded on selection",
 };

package/dist/src/Textarea/Textarea.js

@@ -1,4 +1,5 @@
-import React, { forwardRef } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
 import propTypes from "@styled-system/prop-types";
 import { Field } from "../Form";
 import { MaybeFieldLabel } from "../FieldLabel";
@@ -10,9 +11,6 @@ const Textarea = forwardRef(({ disabled = false, required = false, rows = 3, err
     const componentVariant = useComponentVariant(variant);
     const spaceProps = getSubset(props, propTypes.space);
     const restProps = omitSubset(props, propTypes.space);
-    return (React.createElement(Field, { className: className, ...spaceProps },
-        React.createElement(MaybeFieldLabel, { labelText: labelText, requirementText: requirementText, helpText: helpText },
-            React.createElement(StyledTextarea, { "aria-invalid": error, "aria-required": required, required: required, id: id, ref: ref, errorMessage: errorMessage, errorList: errorList, error: error, rows: rows, isResizeable: isResizeable, variant: componentVariant, disabled: disabled, ...restProps })),
-        React.createElement(InlineValidation, { mt: "x1", errorMessage: errorMessage, errorList: errorList })));
+    return (_jsxs(Field, { className: className, ...spaceProps, children: [_jsx(MaybeFieldLabel, { labelText: labelText, requirementText: requirementText, helpText: helpText, children: _jsx(StyledTextarea, { "aria-invalid": error, "aria-required": required, required: required, id: id, ref: ref, errorMessage: errorMessage, errorList: errorList, error: error, rows: rows, isResizeable: isResizeable, variant: componentVariant, disabled: disabled, ...restProps }) }), _jsx(InlineValidation, { mt: "x1", errorMessage: errorMessage, errorList: errorList })] }));
 });
 export default Textarea;

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

@@ -1,14 +1,13 @@
-import React from "react";
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const _Textarea: () => React.JSX.Element;
-export declare const TextareaWithAllProps: () => React.JSX.Element;
-export declare const SetToDisabled: () => React.JSX.Element;
-export declare const WithNoResizing: () => React.JSX.Element;
-export declare const WithErrorMessage: () => React.JSX.Element;
-export declare const WithErrorList: () => React.JSX.Element;
-export declare const WithCustomNumberOfRows: () => React.JSX.Element;
-export declare const WithCustomId: () => React.JSX.Element;
-export declare const UsingRefToControlFocus: () => React.JSX.Element;
+export declare const _Textarea: () => import("react/jsx-runtime").JSX.Element;
+export declare const TextareaWithAllProps: () => import("react/jsx-runtime").JSX.Element;
+export declare const SetToDisabled: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithNoResizing: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithErrorMessage: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithErrorList: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithCustomNumberOfRows: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithCustomId: () => import("react/jsx-runtime").JSX.Element;
+export declare const UsingRefToControlFocus: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/Textarea/Textarea.story.js

@@ -1,24 +1,23 @@
-import React, { useRef } from "react";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
 import { action } from "@storybook/addon-actions";
 import { Textarea, Button } from "../index";
 const errorList = ["Error message 1", "Error message 2"];
 export default {
     title: "Components/Textarea",
 };
-export const _Textarea = () => (React.createElement(Textarea, { labelText: "Label", onChange: action("value changed"), onBlur: action("blurred") }));
-export const TextareaWithAllProps = () => (React.createElement(Textarea, { labelText: "Label", placeholder: "Placeholder", helpText: "here's some help...", requirementText: "(Required)", required: true, onChange: action("value changed"), onBlur: action("blurred") }));
-export const SetToDisabled = () => React.createElement(Textarea, { labelText: "Label", disabled: true, value: "Disabled" });
-export const WithNoResizing = () => (React.createElement(Textarea, { labelText: "Label", value: "I shouldn't be able to be resized", isResizeable: false }));
-export const WithErrorMessage = () => (React.createElement(Textarea, { labelText: "Label", errorMessage: "Please fill this out", onChange: action("value changed"), onBlur: action("blurred") }));
-export const WithErrorList = () => (React.createElement(Textarea, { labelText: "Label", errorMessage: "Please fill this out", errorList: errorList, onChange: action("value changed") }));
-export const WithCustomNumberOfRows = () => (React.createElement(Textarea, { labelText: "Label", rows: 7, onChange: action("value changed"), onBlur: action("blurred") }));
-export const WithCustomId = () => (React.createElement(Textarea, { id: "my-custom-id", labelText: "Label", onChange: action("value changed"), onBlur: action("blurred") }));
+export const _Textarea = () => (_jsx(Textarea, { labelText: "Label", onChange: action("value changed"), onBlur: action("blurred") }));
+export const TextareaWithAllProps = () => (_jsx(Textarea, { labelText: "Label", placeholder: "Placeholder", helpText: "here's some help...", requirementText: "(Required)", required: true, onChange: action("value changed"), onBlur: action("blurred") }));
+export const SetToDisabled = () => _jsx(Textarea, { labelText: "Label", disabled: true, value: "Disabled" });
+export const WithNoResizing = () => (_jsx(Textarea, { labelText: "Label", value: "I shouldn't be able to be resized", isResizeable: false }));
+export const WithErrorMessage = () => (_jsx(Textarea, { labelText: "Label", errorMessage: "Please fill this out", onChange: action("value changed"), onBlur: action("blurred") }));
+export const WithErrorList = () => (_jsx(Textarea, { labelText: "Label", errorMessage: "Please fill this out", errorList: errorList, onChange: action("value changed") }));
+export const WithCustomNumberOfRows = () => (_jsx(Textarea, { labelText: "Label", rows: 7, onChange: action("value changed"), onBlur: action("blurred") }));
+export const WithCustomId = () => (_jsx(Textarea, { id: "my-custom-id", labelText: "Label", onChange: action("value changed"), onBlur: action("blurred") }));
 export const UsingRefToControlFocus = () => {
     const ref = useRef(null);
     const handleClick = () => {
         ref.current.focus();
     };
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Textarea, { ref: ref, labelText: "Label", rows: 7, onChange: action("value changed"), onBlur: action("blurred") }),
-        React.createElement(Button, { onClick: handleClick }, "Focus the Input")));
+    return (_jsxs(_Fragment, { children: [_jsx(Textarea, { ref: ref, labelText: "Label", rows: 7, onChange: action("value changed"), onBlur: action("blurred") }), _jsx(Button, { onClick: handleClick, children: "Focus the Input" })] }));
 };

package/dist/src/TimePicker/TimePicker.d.ts

@@ -38,5 +38,5 @@ export declare const getTimeOptions: (interval: any, timeFormat: any, minTime: a
     value: string;
     label: string;
 }[];
-declare const TimePicker: React.FC<React.PropsWithChildren<TimePickerProps>>;
+declare const TimePicker: React.ForwardRefExoticComponent<Omit<TimePickerProps, "ref"> & React.RefAttributes<any>>;
 export default TimePicker;

package/dist/src/TimePicker/TimePicker.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // @ts-nocheck
 import React, { useState, useContext, useEffect, forwardRef, useRef, useCallback } from "react";
 import { setMinutes } from "date-fns";
@@ -183,20 +184,15 @@ const TimePicker = forwardRef(({ timeFormat, interval, className, minTime, maxTi
         }
     };
     const displayValue = value ? value : input || "";
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Box, { className: `nds-time-picker ${className || ""}`, position: "relative", ref: onRefChange, width: componentVariant === "touch" ? "208px" : "130px", "data-testid": "select-container", ...props },
-            React.createElement(TimePickerInput, { labelText: labelText, error: hasError, dropdownIsOpen: dropdownIsOpen, onChange: handleInputChange, onFocus: handleFocus, value: displayValue, placeholder: placeholder, iconRight: "queryBuilder", onClick: handleClickInput, onKeyDown: (e) => handleKeyDown(e), "aria-label": ariaLabel || t("Select a time"), inputWidth: componentVariant === "touch" ? "208px" : "130px", iconRightSize: "x2", "data-testid": "select-input", type: "text", ref: inputRef, disabled: disabled, autoComplete: "off", variant: componentVariant }),
-            React.createElement(TimePickerDropdown, { isOpen: dropdownIsOpen, "aria-expanded": dropdownIsOpen, role: "listbox", "data-testid": "select-dropdown", ref: dropdownRef }, dropdownOptions.map((option, i) => {
-                const isClosest = matchingIndex === i;
-                const isSelected = standardizeTime(option.label) === standardizeTime(input);
-                const closestTestId = isClosest ? "closest-select-option" : "";
-                const selectedTestId = isSelected ? "selected-select-option" : "";
-                return (React.createElement(TimePickerOption, { ref: isClosest ? onCurrentOptionRefChange : undefined, isSelected: isSelected, isClosest: isClosest, key: option.label, "data-name": option.label, "data-value": option.value, onClick: () => {
-                        handleOptionSelection(option);
-                    }, role: "option", "data-testid": `select-option ${closestTestId} ${selectedTestId}`, variant: componentVariant }, option.label));
-            })),
-            React.createElement(InlineValidation, { mt: "x1", errorMessage: errorMessage, errorList: errorList })),
-        React.createElement(DetectOutsideClick, { onClick: handleBlur, clickRef: [ref] })));
+    return (_jsxs(_Fragment, { children: [_jsxs(Box, { className: `nds-time-picker ${className || ""}`, position: "relative", ref: onRefChange, width: componentVariant === "touch" ? "208px" : "130px", "data-testid": "select-container", ...props, children: [_jsx(TimePickerInput, { labelText: labelText, error: hasError, dropdownIsOpen: dropdownIsOpen, onChange: handleInputChange, onFocus: handleFocus, value: displayValue, placeholder: placeholder, iconRight: "queryBuilder", onClick: handleClickInput, onKeyDown: (e) => handleKeyDown(e), "aria-label": ariaLabel || t("Select a time"), inputWidth: componentVariant === "touch" ? "208px" : "130px", iconRightSize: "x2", "data-testid": "select-input", type: "text", ref: inputRef, disabled: disabled, autoComplete: "off", variant: componentVariant }), _jsx(TimePickerDropdown, { isOpen: dropdownIsOpen, "aria-expanded": dropdownIsOpen, role: "listbox", "data-testid": "select-dropdown", ref: dropdownRef, children: dropdownOptions.map((option, i) => {
+                            const isClosest = matchingIndex === i;
+                            const isSelected = standardizeTime(option.label) === standardizeTime(input);
+                            const closestTestId = isClosest ? "closest-select-option" : "";
+                            const selectedTestId = isSelected ? "selected-select-option" : "";
+                            return (_jsx(TimePickerOption, { ref: isClosest ? onCurrentOptionRefChange : undefined, isSelected: isSelected, isClosest: isClosest, "data-name": option.label, "data-value": option.value, onClick: () => {
+                                    handleOptionSelection(option);
+                                }, role: "option", "data-testid": `select-option ${closestTestId} ${selectedTestId}`, variant: componentVariant, children: option.label }, option.label));
+                        }) }), _jsx(InlineValidation, { mt: "x1", errorMessage: errorMessage, errorList: errorList })] }), _jsx(DetectOutsideClick, { onClick: handleBlur, clickRef: [ref] })] }));
 });
 TimePicker.defaultProps = {
     timeFormat: DEFAULT_TIME_FORMAT,