@nulogy/components 16.0.0 → 16.0.2

package/dist/src/Pagination/Pagination.story.js

@@ -1,4 +1,5 @@
-import React, { useEffect, useRef, useState } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
 import { styled } from "styled-components";
 import { action } from "@storybook/addon-actions";
 import { Switch, Switcher } from "../Switcher";
@@ -9,23 +10,16 @@ import { Pagination } from ".";
 export default {
     title: "Components/Pagination",
 };
-export const _Pagination = () => (React.createElement(Flex, { gap: "x2", flexDirection: "column" },
-    React.createElement(Pagination, { currentPage: 1, totalPages: 7, onNext: action("next"), onPrevious: action("previous"), onSelectPage: action("selected") }),
-    React.createElement(Pagination, { currentPage: 2, totalPages: 7 }),
-    React.createElement(Pagination, { currentPage: 3, totalPages: 7 }),
-    React.createElement(Pagination, { currentPage: 4, totalPages: 7 }),
-    React.createElement(Pagination, { currentPage: 5, totalPages: 7 }),
-    React.createElement(Pagination, { currentPage: 6, totalPages: 7 }),
-    React.createElement(Pagination, { currentPage: 7, totalPages: 7 })));
-export const OnTheFirstPage = () => React.createElement(Pagination, { currentPage: 1, totalPages: 10 });
+export const _Pagination = () => (_jsxs(Flex, { gap: "x2", flexDirection: "column", children: [_jsx(Pagination, { currentPage: 1, totalPages: 7, onNext: action("next"), onPrevious: action("previous"), onSelectPage: action("selected") }), _jsx(Pagination, { currentPage: 2, totalPages: 7 }), _jsx(Pagination, { currentPage: 3, totalPages: 7 }), _jsx(Pagination, { currentPage: 4, totalPages: 7 }), _jsx(Pagination, { currentPage: 5, totalPages: 7 }), _jsx(Pagination, { currentPage: 6, totalPages: 7 }), _jsx(Pagination, { currentPage: 7, totalPages: 7 })] }));
+export const OnTheFirstPage = () => _jsx(Pagination, { currentPage: 1, totalPages: 10 });
 OnTheFirstPage.story = {
     name: "on the first page",
 };
-export const OnTheLastPage = () => React.createElement(Pagination, { currentPage: 10, totalPages: 10 });
+export const OnTheLastPage = () => _jsx(Pagination, { currentPage: 10, totalPages: 10 });
 OnTheLastPage.story = {
     name: "on the last page",
 };
-export const WithLessThan5Pages = () => React.createElement(Pagination, { currentPage: 3, totalPages: 4 });
+export const WithLessThan5Pages = () => _jsx(Pagination, { currentPage: 3, totalPages: 4 });
 const AccentedRange = styled.input.attrs({ type: "range" }) `
   accent-color: ${({ theme }) => theme.colors.darkBlue};
 `;
@@ -36,24 +30,9 @@ export const CustomMaxVisiblePages = () => {
     useEffect(function () {
         setCurrentPage((page) => Math.min(page, totalPages));
     }, [totalPages]);
-    return (React.createElement(Flex, { flexDirection: "column", gap: "x3" },
-        React.createElement("label", { htmlFor: "totalPages" },
-            "Total pages: ",
-            totalPages),
-        React.createElement(AccentedRange, { name: "totalPages", min: "1", max: "100", value: totalPages, onChange: (e) => setTotalPages(Number(e.target.value)) }),
-        React.createElement("label", { htmlFor: "currentPage" },
-            "Current page: ",
-            currentPage),
-        React.createElement(AccentedRange, { name: "currentPage", min: "1", max: totalPages, value: currentPage, onChange: (e) => setCurrentPage(Number(e.target.value)) }),
-        React.createElement("label", { htmlFor: "maxVisible" },
-            React.createElement(Text, null,
-                "Max visible pages ",
-                maxVisiblePages),
-            React.createElement(Text, { fontSize: "smaller" }, "Value can be between 3 and 12. Values higher or lower will be clamped.")),
-        React.createElement(AccentedRange, { name: "maxVisible", min: "3", max: "12", value: maxVisiblePages, onChange: (e) => setMaxVisiblePages(Number(e.target.value)) }),
-        React.createElement(Pagination, { maxVisiblePages: maxVisiblePages, currentPage: currentPage, totalPages: totalPages, onNext: () => setCurrentPage((p) => p + 1), onPrevious: () => setCurrentPage((p) => p - 1), onSelectPage: (page) => {
-                setCurrentPage(Number(page));
-            } })));
+    return (_jsxs(Flex, { flexDirection: "column", gap: "x3", children: [_jsxs("label", { htmlFor: "totalPages", children: ["Total pages: ", totalPages] }), _jsx(AccentedRange, { name: "totalPages", min: "1", max: "100", value: totalPages, onChange: (e) => setTotalPages(Number(e.target.value)) }), _jsxs("label", { htmlFor: "currentPage", children: ["Current page: ", currentPage] }), _jsx(AccentedRange, { name: "currentPage", min: "1", max: totalPages, value: currentPage, onChange: (e) => setCurrentPage(Number(e.target.value)) }), _jsxs("label", { htmlFor: "maxVisible", children: [_jsxs(Text, { children: ["Max visible pages ", maxVisiblePages] }), _jsx(Text, { fontSize: "smaller", children: "Value can be between 3 and 12. Values higher or lower will be clamped." })] }), _jsx(AccentedRange, { name: "maxVisible", min: "3", max: "12", value: maxVisiblePages, onChange: (e) => setMaxVisiblePages(Number(e.target.value)) }), _jsx(Pagination, { maxVisiblePages: maxVisiblePages, currentPage: currentPage, totalPages: totalPages, onNext: () => setCurrentPage((p) => p + 1), onPrevious: () => setCurrentPage((p) => p - 1), onSelectPage: (page) => {
+                    setCurrentPage(Number(page));
+                } })] }));
 };
 WithLessThan5Pages.story = {
     name: "with less than 5 pages",
@@ -76,18 +55,7 @@ export function ScrollAfterPagination() {
             section: "The page should scroll to the top of this section after pagination.",
         },
     };
-    return (React.createElement(Flex, { gap: "x2", flexDirection: "column", alignItems: "flex-end" },
-        React.createElement(Flex, { flexDirection: "column", gap: "x1", alignSelf: "flex-start", mb: "x2" },
-            React.createElement(Text, { fontSize: "small", fontWeight: "bold" }, "Scroll target after pagination"),
-            React.createElement(Switcher, { selected: scrollTarget, onChange: setScrollTarget, "aria-label": "scroll target" },
-                React.createElement(Switch, { value: "none" }, "None"),
-                React.createElement(Switch, { value: "topOfPage" }, "Top of page"),
-                React.createElement(Switch, { value: "topOfSection" }, "Top of section"))),
-        React.createElement(Box, { height: "180px", width: "100%" },
-            React.createElement(Heading1, { "data-testid": "page-heading" }, messages[scrollTarget].page)),
-        React.createElement(Box, { ref: ref, p: "x4", height: "1400px", width: "100%", bg: "lightBlue" },
-            React.createElement(Heading1, { "data-testid": "section-heading" }, messages[scrollTarget].section)),
-        React.createElement(Pagination, { scrollToTopAfterPagination: scrollTarget !== "none", scrollTargetRef: scrollTarget === "topOfSection" ? ref : undefined, currentPage: currentPage, totalPages: 7, onNext: () => setCurrentPage((p) => p + 1), onPrevious: () => setCurrentPage((p) => p - 1), onSelectPage: (page) => {
-                setCurrentPage(Number(page));
-            } })));
+    return (_jsxs(Flex, { gap: "x2", flexDirection: "column", alignItems: "flex-end", children: [_jsxs(Flex, { flexDirection: "column", gap: "x1", alignSelf: "flex-start", mb: "x2", children: [_jsx(Text, { fontSize: "small", fontWeight: "bold", children: "Scroll target after pagination" }), _jsxs(Switcher, { selected: scrollTarget, onChange: setScrollTarget, "aria-label": "scroll target", children: [_jsx(Switch, { value: "none", children: "None" }), _jsx(Switch, { value: "topOfPage", children: "Top of page" }), _jsx(Switch, { value: "topOfSection", children: "Top of section" })] })] }), _jsx(Box, { height: "180px", width: "100%", children: _jsx(Heading1, { "data-testid": "page-heading", children: messages[scrollTarget].page }) }), _jsx(Box, { ref: ref, p: "x4", height: "1400px", width: "100%", bg: "lightBlue", children: _jsx(Heading1, { "data-testid": "section-heading", children: messages[scrollTarget].section }) }), _jsx(Pagination, { scrollToTopAfterPagination: scrollTarget !== "none", scrollTargetRef: scrollTarget === "topOfSection" ? ref : undefined, currentPage: currentPage, totalPages: 7, onNext: () => setCurrentPage((p) => p + 1), onPrevious: () => setCurrentPage((p) => p - 1), onSelectPage: (page) => {
+                    setCurrentPage(Number(page));
+                } })] }));
 }

package/dist/src/Pagination/PaginationCount.d.ts

@@ -1,7 +1,6 @@
-import React from "react";
 type PaginationCountProps = {
     currentPage: number;
     totalPages: number;
 };
-declare const PaginationCount: ({ currentPage, totalPages }: PaginationCountProps) => React.JSX.Element;
+declare const PaginationCount: ({ currentPage, totalPages }: PaginationCountProps) => import("react/jsx-runtime").JSX.Element;
 export default PaginationCount;

package/dist/src/Pagination/PaginationCount.js

@@ -1,8 +1,8 @@
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
 import { Text } from "../Type";
 const PaginationCount = ({ currentPage, totalPages }) => {
     const { t } = useTranslation();
-    return (React.createElement(Text, { fontSize: "small", lineHeight: "smallTextBase", mx: "x2" }, t("current page of total", { currentPage, totalPages })));
+    return (_jsx(Text, { fontSize: "small", lineHeight: "smallTextBase", mx: "x2", children: t("current page of total", { currentPage, totalPages }) }));
 };
 export default PaginationCount;

package/dist/src/Pagination/PreviousButton.d.ts

@@ -6,5 +6,5 @@ type PreviousButtonProps = {
     ariaLabel?: string;
     showIconOnly?: boolean;
 };
-declare const PreviousButton: ({ disabled, onClick, label, ariaLabel, showIconOnly }: PreviousButtonProps) => React.JSX.Element;
+declare const PreviousButton: ({ disabled, onClick, label, ariaLabel, showIconOnly }: PreviousButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default PreviousButton;

package/dist/src/Pagination/PreviousButton.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 { useTheme } from "styled-components";
 import { Icon } from "../Icon";
@@ -6,8 +6,6 @@ import PaginationButton from "./PaginationButton";
 const PreviousButton = ({ disabled = false, onClick = null, label, ariaLabel, showIconOnly }) => {
     const { t } = useTranslation();
     const theme = useTheme();
-    return (React.createElement(PaginationButton, { disabled: disabled, onClick: onClick, "aria-label": ariaLabel || t("go to previous results"), iconOnly: showIconOnly },
-        React.createElement(Icon, { icon: "leftArrow", ml: showIconOnly ? "0" : `-${theme.space.x1}` }),
-        !showIconOnly && (label || t("previous"))));
+    return (_jsxs(PaginationButton, { disabled: disabled, onClick: onClick, "aria-label": ariaLabel || t("go to previous results"), iconOnly: showIconOnly, children: [_jsx(Icon, { icon: "leftArrow", ml: showIconOnly ? "0" : `-${theme.space.x1}` }), !showIconOnly && (label || t("previous"))] }));
 };
 export default PreviousButton;

package/dist/src/Popper/Popper.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 // @ts-nocheck
 import React, { useState, useEffect, useRef } from "react";
 import { Manager, Reference, Popper as ReactPopperPopUp } from "react-popper";
@@ -99,31 +100,29 @@ const Popper = React.forwardRef(({ id, trigger, children, backgroundColor, borde
     const { t } = useTranslation();
     const openLabel = openAriaLabel || t("open");
     const closeLabel = closeAriaLabel || t("close");
-    return (React.createElement(Manager, { ref: popperRef },
-        React.createElement(Reference, null, ({ ref }) => React.cloneElement(trigger, {
-            "aria-haspopup": true,
-            "aria-expanded": isOpen,
-            "aria-describedby": id,
-            "aria-label": isOpen ? closeLabel : openLabel,
-            ...eventHandlers,
-            ref,
-        })),
-        React.createElement(ReactPopperPopUp, { placement: popperPlacement, modifiers: modifiers }, ({ ref, style, placement, arrowProps }) => (React.createElement(React.Fragment, null, isOpen &&
-            React.cloneElement(children, {
-                open: isOpen,
-                ref,
-                id,
-                style: {
-                    position: "absolute",
-                    ...(isOpen ? style : null),
-                    top: isOpen ? 0 : "-9999px",
-                },
-                dataPlacement: placement,
-                className: `${children.props.className || ""} nds-popper-pop-up`,
-                ...eventHandlers,
-            }, [
-                ...renderInnerChildren(),
-                showArrow && (React.createElement(PopperArrow, { key: "popper-arrow", ...arrowProps, placement: placement, ref: arrowProps.ref, backgroundColor: backgroundColor, borderColor: borderColor })),
-            ]))))));
+    return (_jsxs(Manager, { ref: popperRef, children: [_jsx(Reference, { children: ({ ref }) => React.cloneElement(trigger, {
+                    "aria-haspopup": true,
+                    "aria-expanded": isOpen,
+                    "aria-describedby": id,
+                    "aria-label": isOpen ? closeLabel : openLabel,
+                    ...eventHandlers,
+                    ref,
+                }) }), _jsx(ReactPopperPopUp, { placement: popperPlacement, modifiers: modifiers, children: ({ ref, style, placement, arrowProps }) => (_jsx(_Fragment, { children: isOpen &&
+                        React.cloneElement(children, {
+                            open: isOpen,
+                            ref,
+                            id,
+                            style: {
+                                position: "absolute",
+                                ...(isOpen ? style : null),
+                                top: isOpen ? 0 : "-9999px",
+                            },
+                            dataPlacement: placement,
+                            className: `${children.props.className || ""} nds-popper-pop-up`,
+                            ...eventHandlers,
+                        }, [
+                            ...renderInnerChildren(),
+                            showArrow && (_jsx(PopperArrow, { ...arrowProps, placement: placement, ref: arrowProps.ref, backgroundColor: backgroundColor, borderColor: borderColor }, "popper-arrow")),
+                        ]) })) })] }));
 });
 export default Popper;

package/dist/src/Radio/Radio.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 { styled } from "styled-components";
 import propTypes from "@styled-system/prop-types";
 import { Box } from "../Box";
@@ -99,13 +100,6 @@ const Radio = forwardRef(({ disabled = false, error = false, required = false, c
     const componentVariant = useComponentVariant(variant);
     const spaceProps = getSubset(props, propTypes.space);
     const restProps = omitSubset(props, propTypes.space);
-    return (React.createElement(Box, { position: "relative", className: className, px: "0", ...spaceProps },
-        React.createElement(ClickInputLabel, { variant: componentVariant, disabled: disabled },
-            React.createElement(RadioInput, { type: "radio", ref: ref, "aria-checked": checked, checked: checked, disabled: disabled, error: error, ...restProps, required: required, "aria-required": required, "aria-invalid": error }),
-            React.createElement(VisualRadio, { disabled: disabled }),
-            React.createElement(Text, { inline: true, disabled: disabled, fontSize: componentVariant === "touch" ? "md" : undefined, lineHeight: componentVariant === "touch" ? "base" : undefined },
-                " ",
-                labelText,
-                " "))));
+    return (_jsx(Box, { position: "relative", className: className, px: "0", ...spaceProps, children: _jsxs(ClickInputLabel, { variant: componentVariant, disabled: disabled, children: [_jsx(RadioInput, { type: "radio", ref: ref, "aria-checked": checked, checked: checked, disabled: disabled, error: error, ...restProps, required: required, "aria-required": required, "aria-invalid": error }), _jsx(VisualRadio, { disabled: disabled }), _jsxs(Text, { inline: true, disabled: disabled, fontSize: componentVariant === "touch" ? "md" : undefined, lineHeight: componentVariant === "touch" ? "base" : undefined, children: [" ", labelText, " "] })] }) }));
 });
 export default Radio;

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

@@ -4,14 +4,9 @@ import { Radio } from "../index";
 declare const _default: {
     title: string;
     component: React.ForwardRefExoticComponent<Omit<{
-        children?: React.ReactNode | Record<string, unknown>;
+        children?: React.ReactNode;
         value?: string | readonly string[] | number | undefined;
         ref?: React.Ref<HTMLInputElement>;
-        form?: string | undefined;
-        slot?: string | undefined;
-        style?: React.CSSProperties | undefined;
-        title?: string | undefined;
-        pattern?: string | undefined;
         property?: string | undefined;
         color?: string | undefined;
         content?: string | undefined;
@@ -19,6 +14,11 @@ declare const _default: {
         translate?: "yes" | "no" | undefined;
         width?: number | string | undefined;
         hidden?: boolean | undefined;
+        form?: string | undefined;
+        slot?: string | undefined;
+        style?: React.CSSProperties | undefined;
+        title?: string | undefined;
+        pattern?: string | undefined;
         key?: React.Key | null | undefined;
         defaultChecked?: boolean | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
@@ -28,7 +28,7 @@ declare const _default: {
         autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
         autoFocus?: boolean | undefined;
         className?: string | undefined;
-        contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
+        contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
         contextMenu?: string | undefined;
         dir?: string | undefined;
         draggable?: (boolean | "true" | "false") | undefined;
@@ -36,7 +36,6 @@ declare const _default: {
         id?: string | undefined;
         lang?: string | undefined;
         nonce?: string | undefined;
-        placeholder?: string | undefined;
         spellCheck?: (boolean | "true" | "false") | undefined;
         tabIndex?: number | undefined;
         radioGroup?: string | undefined;
@@ -257,9 +256,7 @@ declare const _default: {
         onPointerCancel?: React.PointerEventHandler<HTMLInputElement>;
         onPointerCancelCapture?: React.PointerEventHandler<HTMLInputElement>;
         onPointerEnter?: React.PointerEventHandler<HTMLInputElement>;
-        onPointerEnterCapture?: React.PointerEventHandler<HTMLInputElement>;
         onPointerLeave?: React.PointerEventHandler<HTMLInputElement>;
-        onPointerLeaveCapture?: React.PointerEventHandler<HTMLInputElement>;
         onPointerOver?: React.PointerEventHandler<HTMLInputElement>;
         onPointerOverCapture?: React.PointerEventHandler<HTMLInputElement>;
         onPointerOut?: React.PointerEventHandler<HTMLInputElement>;
@@ -283,23 +280,24 @@ declare const _default: {
         list?: string | undefined;
         name?: string | undefined;
         type?: React.HTMLInputTypeAttribute | undefined;
+        max?: number | string | undefined;
+        min?: number | string | undefined;
         alt?: string | undefined;
         src?: string | undefined;
         disabled?: boolean | undefined;
-        formAction?: string | undefined;
+        formAction?: string | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS] | undefined;
         formEncType?: string | undefined;
         formMethod?: string | undefined;
         formNoValidate?: boolean | undefined;
         formTarget?: string | undefined;
-        autoComplete?: string | undefined;
+        autoComplete?: React.HTMLInputAutoCompleteAttribute | undefined;
         accept?: string | undefined;
         capture?: boolean | "user" | "environment" | undefined;
         checked?: boolean | undefined;
-        max?: number | string | undefined;
         maxLength?: number | undefined;
-        min?: number | string | undefined;
         minLength?: number | undefined;
         multiple?: boolean | undefined;
+        placeholder?: string | undefined;
         readOnly?: boolean | undefined;
         required?: boolean | undefined;
         step?: number | string | undefined;

package/dist/src/Radio/Radio.story.js

@@ -1,4 +1,5 @@
-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 { Radio, Button } from "../index";
 export default {
@@ -22,37 +23,28 @@ export const SetToDefaultChecked = {
     name: "Set to default checked",
 };
 export const SetToDisabled = {
-    render: (args) => (React.createElement(React.Fragment, null,
-        React.createElement(Radio, { ...args, id: "radio-1", disabled: true, labelText: "I am disabled" }),
-        React.createElement(Radio, { ...args, id: "radio-2", checked: true, disabled: true, labelText: "I am disabled" }))),
+    render: (args) => (_jsxs(_Fragment, { children: [_jsx(Radio, { ...args, id: "radio-1", disabled: true, labelText: "I am disabled" }), _jsx(Radio, { ...args, id: "radio-2", checked: true, disabled: true, labelText: "I am disabled" })] })),
     name: "Set to disabled",
 };
 export const SetToError = {
-    render: (args) => (React.createElement(React.Fragment, null,
-        React.createElement(Radio, { ...args, id: "radio", error: true, labelText: "I am error" }),
-        React.createElement(Radio, { ...args, id: "radio", defaultChecked: true, error: true, labelText: "I am error" }))),
+    render: (args) => (_jsxs(_Fragment, { children: [_jsx(Radio, { ...args, id: "radio", error: true, labelText: "I am error" }), _jsx(Radio, { ...args, id: "radio", defaultChecked: true, error: true, labelText: "I am error" })] })),
     name: "Set to error",
 };
 export const SetToRequired = {
-    render: (args) => (React.createElement(React.Fragment, null,
-        React.createElement(Radio, { ...args, id: "radio", labelText: "I am a radio button", required: true }))),
+    render: (args) => (_jsx(_Fragment, { children: _jsx(Radio, { ...args, id: "radio", labelText: "I am a radio button", required: true }) })),
     name: "Set to required",
 };
 export const Controlled = {
-    render: (args) => (React.createElement(React.Fragment, null,
-        React.createElement(Radio, { ...args, id: "radio-1", checked: true, onChange: action("onChange"), labelText: "I am controlled and checked" }),
-        React.createElement(Radio, { ...args, id: "radio-2", checked: false, onChange: action("onChange"), labelText: "I am controlled and unchecked" }))),
+    render: (args) => (_jsxs(_Fragment, { children: [_jsx(Radio, { ...args, id: "radio-1", checked: true, onChange: action("onChange"), labelText: "I am controlled and checked" }), _jsx(Radio, { ...args, id: "radio-2", checked: false, onChange: action("onChange"), labelText: "I am controlled and unchecked" })] })),
 };
 const UsingRefToControlFocusComponent = () => {
     const ref = useRef(null);
     const handleClick = () => {
         ref.current.focus();
     };
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Radio, { ref: ref, checked: true, onChange: action("onChange"), labelText: "I am controlled and checked" }),
-        React.createElement(Button, { onClick: handleClick, "data-testid": "the-button" }, "Focus the Input")));
+    return (_jsxs(_Fragment, { children: [_jsx(Radio, { ref: ref, checked: true, onChange: action("onChange"), labelText: "I am controlled and checked" }), _jsx(Button, { onClick: handleClick, "data-testid": "the-button", children: "Focus the Input" })] }));
 };
 export const UsingRefToControlFocus = {
-    render: (args) => React.createElement(UsingRefToControlFocusComponent, { ...args }),
+    render: (args) => _jsx(UsingRefToControlFocusComponent, { ...args }),
     name: "using ref to control focus",
 };

package/dist/src/Radio/RadioGroup.d.ts

@@ -16,5 +16,5 @@ interface RadioGroupProps {
     default?: boolean;
     onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
-export default function RadioGroup({ className, id, errorMessage, errorList, labelText, helpText, requirementText, ...props }: RadioGroupProps): React.JSX.Element;
+export default function RadioGroup({ className, id, errorMessage, errorList, labelText, helpText, requirementText, ...props }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/src/Radio/RadioGroup.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { useTheme } from "styled-components";
 import { HelpText, RequirementText } from "../FieldLabel";
@@ -7,13 +8,7 @@ import Radio from "./Radio";
 export default function RadioGroup({ className, id, errorMessage, errorList, labelText, helpText, requirementText, ...props }) {
     const otherProps = { ...props, errorMessage, errorList };
     const theme = useTheme();
-    return (React.createElement(Fieldset, { className: className, id: id },
-        React.createElement("legend", { style: { marginBottom: theme.space.x1 } },
-            React.createElement("span", { style: labelTextStyles(theme) }, labelText),
-            requirementText && React.createElement(RequirementText, null, requirementText)),
-        helpText && React.createElement(HelpText, null, helpText),
-        getRadioButtons(otherProps),
-        React.createElement(InlineValidation, { mt: "x1", errorMessage: errorMessage, errorList: errorList })));
+    return (_jsxs(Fieldset, { className: className, id: id, children: [_jsxs("legend", { style: { marginBottom: theme.space.x1 }, children: [_jsx("span", { style: labelTextStyles(theme), children: labelText }), requirementText && _jsx(RequirementText, { children: requirementText })] }), helpText && _jsx(HelpText, { children: helpText }), getRadioButtons(otherProps), _jsx(InlineValidation, { mt: "x1", errorMessage: errorMessage, errorList: errorList })] }));
 }
 const labelTextStyles = (theme) => ({
     fontSize: theme.fontSizes.small,
@@ -23,7 +18,7 @@ const labelTextStyles = (theme) => ({
 const getRadioButtons = (props) => {
     const radioButtons = React.Children.map(props.children, (radio) => {
         const { value, disabled, required, onChange, ...radioProps } = radio.props;
-        return (React.createElement(Radio, { ...radioProps, value: value, disabled: props.disabled || disabled, error: !!(props.errorMessage || props.errorList), required: props.required || required, name: props.name, defaultChecked: value === props.defaultValue ? true : undefined, checked: props.checkedValue && value === props.checkedValue, onChange: props.onChange || onChange }));
+        return (_jsx(Radio, { ...radioProps, value: value, disabled: props.disabled || disabled, error: !!(props.errorMessage || props.errorList), required: props.required || required, name: props.name, defaultChecked: value === props.defaultValue ? true : undefined, checked: props.checkedValue && value === props.checkedValue, onChange: props.onChange || onChange }));
     });
     return radioButtons;
 };

package/dist/src/Radio/RadioGroup.story.d.ts

@@ -1,4 +1,3 @@
-import React from "react";
 declare const _default: {
     title: string;
     parameters: {
@@ -9,13 +8,13 @@ declare const _default: {
 };
 export default _default;
 export declare const _RadioGroup: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const RadioGroupWithAllProps: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
@@ -26,21 +25,21 @@ export declare const RadioGroupWithAllProps: {
     };
 };
 export declare const WithErrorMessage: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithErrorList: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const SetToDisabled: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
-export declare const Controlled: () => React.JSX.Element;
+export declare const Controlled: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/Radio/RadioGroup.story.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Radio, RadioGroup, Icon, Tooltip, Flex } from "../index";
 const errorList = ["Error message 1", "Error message 2"];
 export default {
@@ -7,48 +7,27 @@ export default {
         chromatic: { diffThreshold: 0.3 },
     },
 };
-export const _RadioGroup = () => (React.createElement(RadioGroup, { labelText: "Setting Selection", name: "settingSelection" },
-    React.createElement(Radio, { value: "a", labelText: "Option A" }),
-    React.createElement(Radio, { value: "b", labelText: "Option B" }),
-    React.createElement(Radio, { value: "c", labelText: "Option C" })));
+export const _RadioGroup = () => (_jsxs(RadioGroup, { labelText: "Setting Selection", name: "settingSelection", children: [_jsx(Radio, { value: "a", labelText: "Option A" }), _jsx(Radio, { value: "b", labelText: "Option B" }), _jsx(Radio, { value: "c", labelText: "Option C" })] }));
 _RadioGroup.story = {
     name: "RadioGroup",
 };
-export const RadioGroupWithAllProps = () => (React.createElement(RadioGroup, { labelText: "Setting Selection", name: "settingSelection", helpText: "Select a setting from the menu below:", required: true, requirementText: "(Required)", defaultValue: "a" },
-    React.createElement(Radio, { value: "a", labelText: React.createElement(Flex, { alignItems: "center" },
-            "Option A",
-            React.createElement(Tooltip, { placement: "bottom", tooltip: "Option A is a special option with extra information", defaultOpen: true },
-                React.createElement(Icon, { icon: "help", color: "darkBlue", size: "x2", ml: "x1" }))) }),
-    React.createElement(Radio, { value: "b", labelText: "Option B" }),
-    React.createElement(Radio, { value: "c", labelText: "Option C" })));
+export const RadioGroupWithAllProps = () => (_jsxs(RadioGroup, { labelText: "Setting Selection", name: "settingSelection", helpText: "Select a setting from the menu below:", required: true, requirementText: "(Required)", defaultValue: "a", children: [_jsx(Radio, { value: "a", labelText: _jsxs(Flex, { alignItems: "center", children: ["Option A", _jsx(Tooltip, { placement: "bottom", tooltip: "Option A is a special option with extra information", defaultOpen: true, children: _jsx(Icon, { icon: "help", color: "darkBlue", size: "x2", ml: "x1" }) })] }) }), _jsx(Radio, { value: "b", labelText: "Option B" }), _jsx(Radio, { value: "c", labelText: "Option C" })] }));
 RadioGroupWithAllProps.story = {
     name: "RadioGroup with all props",
 };
 RadioGroupWithAllProps.parameters = {
     chromatic: { diffThreshold: 0.3 },
 };
-export const WithErrorMessage = () => (React.createElement(RadioGroup, { errorMessage: "Please select an option", labelText: "Setting Selection", name: "settingSelection", defaultValue: "a" },
-    React.createElement(Radio, { value: "a", labelText: "Option A" }),
-    React.createElement(Radio, { value: "b", labelText: "Option B" }),
-    React.createElement(Radio, { value: "c", labelText: "Option C" })));
+export const WithErrorMessage = () => (_jsxs(RadioGroup, { errorMessage: "Please select an option", labelText: "Setting Selection", name: "settingSelection", defaultValue: "a", children: [_jsx(Radio, { value: "a", labelText: "Option A" }), _jsx(Radio, { value: "b", labelText: "Option B" }), _jsx(Radio, { value: "c", labelText: "Option C" })] }));
 WithErrorMessage.story = {
     name: "with error message",
 };
-export const WithErrorList = () => (React.createElement(RadioGroup, { errorMessage: "Please select an option", errorList: errorList, labelText: "Setting Selection", name: "settingSelection", defaultValue: "a" },
-    React.createElement(Radio, { value: "a", labelText: "Option A" }),
-    React.createElement(Radio, { value: "b", labelText: "Option B" }),
-    React.createElement(Radio, { value: "c", labelText: "Option C" })));
+export const WithErrorList = () => (_jsxs(RadioGroup, { errorMessage: "Please select an option", errorList: errorList, labelText: "Setting Selection", name: "settingSelection", defaultValue: "a", children: [_jsx(Radio, { value: "a", labelText: "Option A" }), _jsx(Radio, { value: "b", labelText: "Option B" }), _jsx(Radio, { value: "c", labelText: "Option C" })] }));
 WithErrorList.story = {
     name: "with error list",
 };
-export const SetToDisabled = () => (React.createElement(RadioGroup, { disabled: true, labelText: "Setting Selection", name: "settingSelection", defaultValue: "a" },
-    React.createElement(Radio, { value: "a", labelText: "Option A" }),
-    React.createElement(Radio, { value: "b", labelText: "Option B" }),
-    React.createElement(Radio, { value: "c", labelText: "Option C" })));
+export const SetToDisabled = () => (_jsxs(RadioGroup, { disabled: true, labelText: "Setting Selection", name: "settingSelection", defaultValue: "a", children: [_jsx(Radio, { value: "a", labelText: "Option A" }), _jsx(Radio, { value: "b", labelText: "Option B" }), _jsx(Radio, { value: "c", labelText: "Option C" })] }));
 SetToDisabled.story = {
     name: "Set to disabled",
 };
-export const Controlled = () => (React.createElement(RadioGroup, { labelText: "Setting Selection", name: "settingSelection", checkedValue: "a", onChange: () => { } },
-    React.createElement(Radio, { value: "a", labelText: "Option A" }),
-    React.createElement(Radio, { value: "b", labelText: "Option B" }),
-    React.createElement(Radio, { value: "c", labelText: "Option C" })));
+export const Controlled = () => (_jsxs(RadioGroup, { labelText: "Setting Selection", name: "settingSelection", checkedValue: "a", onChange: () => { }, children: [_jsx(Radio, { value: "a", labelText: "Option A" }), _jsx(Radio, { value: "b", labelText: "Option B" }), _jsx(Radio, { value: "c", labelText: "Option C" })] }));

package/dist/src/RangeContainer/RangeContainer.d.ts

@@ -8,5 +8,5 @@ type RangeContainerProps = {
     errorMessages?: (string | undefined)[];
     children?: React.ReactNode;
 };
-declare const RangeContainer: ({ startComponent, endComponent, errorMessages, labelProps, variant, ...props }: RangeContainerProps) => React.JSX.Element;
+declare const RangeContainer: ({ startComponent, endComponent, errorMessages, labelProps, variant, ...props }: RangeContainerProps) => import("react/jsx-runtime").JSX.Element;
 export default RangeContainer;

package/dist/src/RangeContainer/RangeContainer.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import propTypes from "@styled-system/prop-types";
 import { Text } from "../Type";
 import { Flex } from "../Flex";
@@ -12,13 +12,6 @@ const RangeContainer = ({ startComponent, endComponent, errorMessages = [], labe
 }, variant, ...props }) => {
     const spaceProps = getSubset(props, propTypes.space);
     const restProps = omitSubset(props, propTypes.space);
-    return (React.createElement(Flex, { ...spaceProps, flexDirection: "column" },
-        React.createElement(FieldLabel, { ...labelProps, ...restProps }),
-        React.createElement(Flex, { flexWrap: "wrap", mt: "x1", mb: errorMessages.length ? "x1" : "x3" },
-            React.createElement(Flex, null, startComponent),
-            React.createElement(Flex, { px: "half", alignItems: "flex-end", alignSelf: "flex-end" },
-                React.createElement(Text, { lineHeight: variant === "touch" ? "56px" : "38px" }, "-")),
-            React.createElement(Flex, null, endComponent)),
-        errorMessages.map((errorMessage, i) => (React.createElement(InlineValidation, { key: i, errorMessage: errorMessage })))));
+    return (_jsxs(Flex, { ...spaceProps, flexDirection: "column", children: [_jsx(FieldLabel, { ...labelProps, ...restProps }), _jsxs(Flex, { flexWrap: "wrap", mt: "x1", mb: errorMessages.length ? "x1" : "x3", children: [_jsx(Flex, { children: startComponent }), _jsx(Flex, { px: "half", alignItems: "flex-end", alignSelf: "flex-end", children: _jsx(Text, { lineHeight: variant === "touch" ? "56px" : "38px", children: "-" }) }), _jsx(Flex, { children: endComponent })] }), errorMessages.map((errorMessage, i) => (_jsx(InlineValidation, { errorMessage: errorMessage }, i)))] }));
 };
 export default RangeContainer;

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

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

package/dist/src/RangeContainer/RangeContainer.story.js

@@ -1,9 +1,9 @@
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { RangeContainer } from ".";
 export default {
     title: "Components/RangeContainer",
 };
-export const _RangeContainer = () => React.createElement(RangeContainer, null, "Example");
+export const _RangeContainer = () => _jsx(RangeContainer, { children: "Example" });
 _RangeContainer.story = {
     name: "RangeContainer",
 };

package/dist/src/Select/MenuList.d.ts

@@ -1,3 +1,2 @@
-import * as React from "react";
-declare function MenuList(props: any): React.JSX.Element;
+declare function MenuList(props: any): import("react/jsx-runtime").JSX.Element;
 export default MenuList;

package/dist/src/Select/MenuList.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 /*
   Copied as is from: https://github.com/jacobworrel/react-windowed-select/blob/main/src/MenuList.tsx
   MIT License
@@ -94,18 +95,17 @@ function MenuList(props) {
             list.current.scrollToItem(currentIndex);
         }
     }, [currentIndex, children, list]);
-    return (React.createElement(List, { className: classNamePrefix
+    return (_jsx(List, { className: classNamePrefix
             ? `${classNamePrefix}__menu-list${isMulti ? ` ${classNamePrefix}__menu-list--is-multi` : ""}`
-            : "", style: menuListStyle, ref: list, outerRef: innerRef, estimatedItemSize: estimatedItemSize, innerElementType: React.forwardRef(({ style, ...rest }, ref) => (React.createElement("div", { ref: ref, style: {
+            : "", style: menuListStyle, ref: list, outerRef: innerRef, estimatedItemSize: estimatedItemSize, innerElementType: React.forwardRef(({ style, ...rest }, ref) => (_jsx("div", { ref: ref, style: {
                 ...style,
                 height: `${parseFloat(style.height) + paddingBottom + paddingTop}px`,
-            }, ...rest }))), height: menuHeight, width: "100%", itemCount: itemCount, itemData: children, itemSize: (index) => measuredHeights[index] || heights[index] }, ({ data, index, style }) => {
-        return (React.createElement("div", { style: {
-                ...style,
-                top: `${parseFloat(style.top.toString()) + paddingTop}px`,
-            } },
-            React.createElement(MenuItem, { data: data[index], index: index, setMeasuredHeight: setMeasuredHeight })));
-    }));
+            }, ...rest }))), height: menuHeight, width: "100%", itemCount: itemCount, itemData: children, itemSize: (index) => measuredHeights[index] || heights[index], children: ({ data, index, style }) => {
+            return (_jsx("div", { style: {
+                    ...style,
+                    top: `${parseFloat(style.top.toString()) + paddingTop}px`,
+                }, children: _jsx(MenuItem, { data: data[index], index: index, setMeasuredHeight: setMeasuredHeight }) }));
+        } }));
 }
 function MenuItem({ data, index, setMeasuredHeight }) {
     const ref = React.useRef(null);
@@ -116,6 +116,6 @@ function MenuItem({ data, index, setMeasuredHeight }) {
             setMeasuredHeight({ index, measuredHeight });
         }
     }, [ref.current]);
-    return (React.createElement("div", { key: `option-${index}`, ref: ref }, data));
+    return (_jsx("div", { ref: ref, children: data }, `option-${index}`));
 }
 export default MenuList;