@nulogy/components 16.0.0 → 16.0.1

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.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,

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

@@ -1,64 +1,63 @@
-import React from "react";
 declare const _default: {
     title: string;
 };
 export default _default;
 export declare const Default: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithCustomTimeFormat: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithCustomTimeInterval: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithCustomPlaceholder: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const disabled: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithErrorState: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithMinAndMaxTime: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithCustomDefault: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithValue: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const UsingRefToControlFocus: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };

package/dist/src/TimePicker/TimePicker.story.js

@@ -1,46 +1,47 @@
-import React, { useState, useRef } from "react";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef } from "react";
 import { action } from "@storybook/addon-actions";
 import { TimePicker, Button } from "../index";
 export default {
     title: "Components/TimePicker",
 };
-export const Default = () => (React.createElement(TimePicker, { p: "x3", onChange: action("time changed"), onInputChange: action("input changed"), labelText: "Start Time" }));
+export const Default = () => (_jsx(TimePicker, { p: "x3", onChange: action("time changed"), onInputChange: action("input changed"), labelText: "Start Time" }));
 Default.story = {
     name: "default",
 };
-export const WithCustomTimeFormat = () => (React.createElement(TimePicker, { defaultValue: "03:30", timeFormat: "HH:mm", onChange: action("time changed"), onInputChange: action("input changed"), labelText: "Duration" }));
+export const WithCustomTimeFormat = () => (_jsx(TimePicker, { defaultValue: "03:30", timeFormat: "HH:mm", onChange: action("time changed"), onInputChange: action("input changed"), labelText: "Duration" }));
 WithCustomTimeFormat.story = {
     name: "with custom time format",
 };
-export const WithCustomTimeInterval = () => (React.createElement(TimePicker, { defaultValue: "03:30", timeFormat: "HH:mm", interval: 30, onChange: action("time changed"), onInputChange: action("input changed"), labelText: "Duration" }));
+export const WithCustomTimeInterval = () => (_jsx(TimePicker, { defaultValue: "03:30", timeFormat: "HH:mm", interval: 30, onChange: action("time changed"), onInputChange: action("input changed"), labelText: "Duration" }));
 WithCustomTimeInterval.story = {
     name: "with custom time interval",
 };
-export const WithCustomPlaceholder = () => (React.createElement(TimePicker, { onChange: action("time changed"), onInputChange: action("input changed"), labelText: "Duration", placeholder: "--:--" }));
+export const WithCustomPlaceholder = () => (_jsx(TimePicker, { onChange: action("time changed"), onInputChange: action("input changed"), labelText: "Duration", placeholder: "--:--" }));
 WithCustomPlaceholder.story = {
     name: "with custom placeholder",
 };
-export const disabled = () => (React.createElement(TimePicker, { onChange: action("time changed"), onInputChange: action("input changed"), labelText: "Duration", placeholder: "--:--", disabled: true }));
+export const disabled = () => (_jsx(TimePicker, { onChange: action("time changed"), onInputChange: action("input changed"), labelText: "Duration", placeholder: "--:--", disabled: true }));
 disabled.story = {
     name: "disabled",
 };
-export const WithErrorState = () => (React.createElement(TimePicker, { onChange: action("time changed"), onInputChange: action("input changed"), labelText: "End Time", errorMessage: "This time is invalid" }));
+export const WithErrorState = () => (_jsx(TimePicker, { onChange: action("time changed"), onInputChange: action("input changed"), labelText: "End Time", errorMessage: "This time is invalid" }));
 WithErrorState.story = {
     name: "with error state",
 };
-export const WithMinAndMaxTime = () => (React.createElement(TimePicker, { onChange: action("time changed"), onInputChange: action("input changed"), labelText: "End Time", minTime: "09:00", maxTime: "21:00" }));
+export const WithMinAndMaxTime = () => (_jsx(TimePicker, { onChange: action("time changed"), onInputChange: action("input changed"), labelText: "End Time", minTime: "09:00", maxTime: "21:00" }));
 WithMinAndMaxTime.story = {
     name: "with min and max time",
 };
-export const WithCustomDefault = () => (React.createElement(TimePicker, { onChange: action("time changed"), onInputChange: action("input changed"), labelText: "End Time", defaultValue: "12:38 PM" }));
+export const WithCustomDefault = () => (_jsx(TimePicker, { onChange: action("time changed"), onInputChange: action("input changed"), labelText: "End Time", defaultValue: "12:38 PM" }));
 WithCustomDefault.story = {
     name: "with custom default",
 };
 const ControlledTimePicker = () => {
     const [value, setValue] = useState("13:43");
-    return React.createElement(TimePicker, { onChange: setValue, onInputChange: setValue, labelText: "End Time", value: value });
+    return _jsx(TimePicker, { onChange: setValue, onInputChange: setValue, labelText: "End Time", value: value });
 };
-export const WithValue = () => React.createElement(ControlledTimePicker, null);
+export const WithValue = () => _jsx(ControlledTimePicker, {});
 WithValue.story = {
     name: "with value",
 };
@@ -49,9 +50,7 @@ export const UsingRefToControlFocus = () => {
     const handleClick = () => {
         ref.current.focus();
     };
-    return (React.createElement(React.Fragment, null,
-        React.createElement(TimePicker, { onChange: action("time changed"), onInputChange: action("input changed"), labelText: "Duration", ref: ref }),
-        React.createElement(Button, { onClick: handleClick }, "Focus the Toggle")));
+    return (_jsxs(_Fragment, { children: [_jsx(TimePicker, { onChange: action("time changed"), onInputChange: action("input changed"), labelText: "Duration", ref: ref }), _jsx(Button, { onClick: handleClick, children: "Focus the Toggle" })] }));
 };
 UsingRefToControlFocus.story = {
     name: "using ref to control focus",

package/dist/src/TimeRange/TimeRange.js

@@ -1,4 +1,5 @@
-import React, { useState, useEffect, forwardRef, useImperativeHandle, useRef } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect, forwardRef, useImperativeHandle, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { TimePicker } from "../TimePicker";
 import { RangeContainer } from "../RangeContainer";
@@ -71,9 +72,9 @@ const TimeRange = forwardRef(({ timeFormat, onRangeChange, onStartTimeChange, on
             });
         }
     };
-    const startInput = (React.createElement(TimePicker, { timeFormat: timeFormat, defaultValue: defaultStartTime, selected: startTime, onChange: changeStartTimeHandler, minTime: minTime, maxTime: endTime || maxTime, interval: interval, "aria-label": startAriaLabel || t("select a start time"), "data-testid": "timerange-start-time", ref: inputRef1, error: rangeError, variant: componentVariant, ...startTimeProps }));
-    const endInput = (React.createElement(TimePicker, { timeFormat: timeFormat, defaultValue: defaultEndTime, selected: endTime, onChange: changeEndTimeHandler, maxTime: maxTime, minTime: startTime || minTime, interval: interval, "aria-label": endAriaLabel || t("select an end time"), "data-testid": "timerange-end-time", ref: inputRef2, error: rangeError, variant: componentVariant, ...endTimeProps }));
-    return (React.createElement(RangeContainer, { labelProps: {
+    const startInput = (_jsx(TimePicker, { timeFormat: timeFormat, defaultValue: defaultStartTime, selected: startTime, onChange: changeStartTimeHandler, minTime: minTime, maxTime: endTime || maxTime, interval: interval, "aria-label": startAriaLabel || t("select a start time"), "data-testid": "timerange-start-time", ref: inputRef1, error: rangeError, variant: componentVariant, ...startTimeProps }));
+    const endInput = (_jsx(TimePicker, { timeFormat: timeFormat, defaultValue: defaultEndTime, selected: endTime, onChange: changeEndTimeHandler, maxTime: maxTime, minTime: startTime || minTime, interval: interval, "aria-label": endAriaLabel || t("select an end time"), "data-testid": "timerange-end-time", ref: inputRef2, error: rangeError, variant: componentVariant, ...endTimeProps }));
+    return (_jsx(RangeContainer, { labelProps: {
             ...labelProps,
             labelText: labelProps.labelText === DEFAULT_LABEL ? t("time range") : labelProps.labelText,
         }, startComponent: startInput, endComponent: endInput, errorMessages: !disableRangeValidation ? [rangeError, errorMessage] : [errorMessage], variant: componentVariant, ...props }));

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

@@ -1,34 +1,33 @@
-import React from "react";
 declare const _default: {
     title: string;
 };
 export default _default;
 export declare const Default: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const DefaultSelections: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithRangeValidation: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithMinAndMaxTimeRange: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const UsingRefToControlFocus: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };