@nulogy/components 16.0.0 → 16.0.1

package/dist/src/Icon/Icon.js

@@ -1,17 +1,18 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import React from "react";
 import { styled, useTheme } from "styled-components";
 import { position, space } from "styled-system";
 import icons from "@nulogy/icons";
 import LoadingIcon from "./LoadingIcon";
-const getPathElements = (icon) => (React.createElement(React.Fragment, null, icon.path.map((path, index) => (React.createElement("path", { key: index, d: path })))));
+const getPathElements = (icon) => (_jsx(_Fragment, { children: icon.path.map((path, index) => (_jsx("path", { d: path }, index))) }));
 const ICON_SIZE_RATIO = 1.25;
 const Svg = React.forwardRef(({ color: fillColor = "currentColor", className = undefined, title = undefined, size, focusable = false, icon, ...props }, ref) => {
     const theme = useTheme();
     size || (size = theme.sizes.x3);
     if (icon === "loading") {
-        return (React.createElement(LoadingIcon, { ref: ref, "aria-hidden": title == null, width: theme.space[size] || size, height: theme.space[size] || size, fill: theme.colors[fillColor] ? theme.colors[fillColor] : fillColor, focusable: focusable, className: `${className} nds-icon--${icon}`, ...props }));
+        return (_jsx(LoadingIcon, { ref: ref, "aria-hidden": title == null, width: theme.space[size] || size, height: theme.space[size] || size, fill: theme.colors[fillColor] ? theme.colors[fillColor] : fillColor, focusable: focusable, className: `${className} nds-icon--${icon}`, ...props }));
     }
-    return (icons[icon] && (React.createElement("svg", { ref: ref, "aria-hidden": title == null, width: theme.space[size] || size, height: theme.space[size] || size, fill: theme.colors[fillColor] ? theme.colors[fillColor] : fillColor, viewBox: icons[icon].viewBox, focusable: focusable, className: `${className} nds-icon--${icon}`, ...props }, getPathElements(icons[icon]))));
+    return (icons[icon] && (_jsx("svg", { ref: ref, "aria-hidden": title == null, width: theme.space[size] || size, height: theme.space[size] || size, fill: theme.colors[fillColor] ? theme.colors[fillColor] : fillColor, viewBox: icons[icon].viewBox, focusable: focusable, className: `${className} nds-icon--${icon}`, ...props, children: getPathElements(icons[icon]) })));
 });
 const Icon = styled(Svg)(space, ({ theme, color = "currentColor", size }) => ({
     minWidth: theme.sizes[size] ?? size ?? theme.sizes.x3,
@@ -30,8 +31,7 @@ const IconContainer = styled.span(space, {
     width: `${ICON_SIZE_RATIO}em`,
 });
 export const InlineIcon = React.forwardRef((props, ref) => {
-    return (React.createElement(IconContainer, { ref: ref, ...props },
-        React.createElement(CenteredIcon, { size: `${ICON_SIZE_RATIO}em`, ...props })));
+    return (_jsx(IconContainer, { ref: ref, ...props, children: _jsx(CenteredIcon, { size: `${ICON_SIZE_RATIO}em`, ...props }) }));
 });
 export const InputIcon = styled(Icon)(({ theme }) => ({
     position: "absolute",

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

@@ -1,40 +1,39 @@
-import React from "react";
 declare const _default: {
     title: string;
 };
 export default _default;
 export declare const BasicIcon: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const _InlineIcon: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithAColor: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithASize: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithAddedMargin: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithAccessibilityTitle: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };

package/dist/src/Icon/Icon.story.js

@@ -1,66 +1,37 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useTheme } from "styled-components";
 import icons from "@nulogy/icons";
 import { Box, Flex, Icon, InlineIcon } from "../index";
 const iconNames = [...Object.keys(icons), "loading"];
 const iconSubset = [...iconNames.slice(0, 5), "loading"];
-const IconCode = ({ icon }) => (React.createElement("code", null,
-    "<Icon icon=\"",
-    React.createElement("b", null, icon),
-    "\">"));
+const IconCode = ({ icon }) => (_jsxs("code", { children: ["<Icon icon=\"", _jsx("b", { children: icon }), "\">"] }));
 export default {
     title: "Components/Icon",
 };
-export const BasicIcon = () => (React.createElement(React.Fragment, null, iconNames.map((iconName) => (React.createElement(Flex, { my: "x2", key: iconName },
-    React.createElement(Icon, { mr: "20px", icon: iconName }),
-    React.createElement(IconCode, { icon: iconName }))))));
+export const BasicIcon = () => (_jsx(_Fragment, { children: iconNames.map((iconName) => (_jsxs(Flex, { my: "x2", children: [_jsx(Icon, { mr: "20px", icon: iconName }), _jsx(IconCode, { icon: iconName })] }, iconName))) }));
 BasicIcon.story = {
     name: "Icon",
 };
-export const _InlineIcon = () => (React.createElement(React.Fragment, null, [1, 2, 3, 4].map((size) => (React.createElement("p", { style: { fontSize: `${size}em` }, key: size },
-    "@",
-    size,
-    "em: \u00A0",
-    iconSubset.map((iconName) => (React.createElement(InlineIcon, { icon: iconName, key: iconName }))))))));
+export const _InlineIcon = () => (_jsx(_Fragment, { children: [1, 2, 3, 4].map((size) => (_jsxs("p", { style: { fontSize: `${size}em` }, children: ["@", size, "em: \u00A0", iconSubset.map((iconName) => (_jsx(InlineIcon, { icon: iconName }, iconName)))] }, size))) }));
 _InlineIcon.story = {
     name: "InlineIcon",
 };
-export const WithAColor = () => (React.createElement(React.Fragment, null, ["red", "yellow", "green", "blue", "blackBlue"].map((color) => (React.createElement(Box, { key: color }, iconSubset.map((iconName) => (React.createElement(Icon, { icon: iconName, color: color, key: iconName }))))))));
+export const WithAColor = () => (_jsx(_Fragment, { children: ["red", "yellow", "green", "blue", "blackBlue"].map((color) => (_jsx(Box, { children: iconSubset.map((iconName) => (_jsx(Icon, { icon: iconName, color: color }, iconName))) }, color))) }));
 WithAColor.story = {
     name: "With a color",
 };
 export const WithASize = () => {
     const theme = useTheme();
-    return (React.createElement(React.Fragment, null, [theme.space.x1, theme.space.x2, theme.space.x3].map((size) => (React.createElement(Box, { key: size }, iconSubset.map((iconName) => (React.createElement(Icon, { icon: iconName, size: size, key: iconName }))))))));
+    return (_jsx(_Fragment, { children: [theme.space.x1, theme.space.x2, theme.space.x3].map((size) => (_jsx(Box, { children: iconSubset.map((iconName) => (_jsx(Icon, { icon: iconName, size: size }, iconName))) }, size))) }));
 };
 WithASize.story = {
     name: "With a size",
 };
-export const WithAddedMargin = () => (React.createElement(Box, { m: "x3" },
-    React.createElement(Box, { style: { display: "inline-block" }, m: "x3", bg: "lightGrey" },
-        React.createElement(Icon, { m: "x2", icon: "delete" })),
-    React.createElement(Box, { style: { display: "inline-block" }, m: "x3", bg: "lightGrey" },
-        React.createElement(Icon, { mt: "x2", icon: "delete" })),
-    React.createElement(Box, { style: { display: "inline-block" }, m: "x3", bg: "lightGrey" },
-        React.createElement(Icon, { mr: "x2", icon: "delete" })),
-    React.createElement(Box, { style: { display: "inline-block" }, m: "x3", bg: "lightGrey" },
-        React.createElement(Icon, { mb: "x2", icon: "delete" })),
-    React.createElement(Box, { style: { display: "inline-block" }, m: "x3", bg: "lightGrey" },
-        React.createElement(Icon, { ml: "x2", icon: "delete" })),
-    React.createElement(Box, { style: { display: "inline-block" }, m: "x3", bg: "lightGrey" },
-        React.createElement(Icon, { mx: "x2", icon: "delete" })),
-    React.createElement(Box, { style: { display: "inline-block" }, m: "x3", bg: "lightGrey" },
-        React.createElement(Icon, { my: "x2", icon: "delete" }))));
+export const WithAddedMargin = () => (_jsxs(Box, { m: "x3", children: [_jsx(Box, { style: { display: "inline-block" }, m: "x3", bg: "lightGrey", children: _jsx(Icon, { m: "x2", icon: "delete" }) }), _jsx(Box, { style: { display: "inline-block" }, m: "x3", bg: "lightGrey", children: _jsx(Icon, { mt: "x2", icon: "delete" }) }), _jsx(Box, { style: { display: "inline-block" }, m: "x3", bg: "lightGrey", children: _jsx(Icon, { mr: "x2", icon: "delete" }) }), _jsx(Box, { style: { display: "inline-block" }, m: "x3", bg: "lightGrey", children: _jsx(Icon, { mb: "x2", icon: "delete" }) }), _jsx(Box, { style: { display: "inline-block" }, m: "x3", bg: "lightGrey", children: _jsx(Icon, { ml: "x2", icon: "delete" }) }), _jsx(Box, { style: { display: "inline-block" }, m: "x3", bg: "lightGrey", children: _jsx(Icon, { mx: "x2", icon: "delete" }) }), _jsx(Box, { style: { display: "inline-block" }, m: "x3", bg: "lightGrey", children: _jsx(Icon, { my: "x2", icon: "delete" }) })] }));
 WithAddedMargin.story = {
     name: "With added margin",
 };
-export const WithAccessibilityTitle = () => (React.createElement(React.Fragment, null,
-    React.createElement(Flex, { p: "x2" },
-        React.createElement(Icon, { icon: "user", title: "User account" }),
-        " This has a title attribute so it will be read by assistive devices."),
-    React.createElement(Flex, { p: "x2" },
-        React.createElement(Icon, { icon: "user" }),
-        " This doesn't have a title attribute, so it has aria-hidden set true instead.")));
+export const WithAccessibilityTitle = () => (_jsxs(_Fragment, { children: [_jsxs(Flex, { p: "x2", children: [_jsx(Icon, { icon: "user", title: "User account" }), " This has a title attribute so it will be read by assistive devices."] }), _jsxs(Flex, { p: "x2", children: [_jsx(Icon, { icon: "user" }), " This doesn't have a title attribute, so it has aria-hidden set true instead."] })] }));
 WithAccessibilityTitle.story = {
     name: "With accessibility title",
 };

package/dist/src/Icon/LoadingIcon.js

@@ -1,18 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { useTheme } from "styled-components";
 const LoadingIcon = React.forwardRef(({ size, ...props }, ref) => {
     const theme = useTheme();
     size || (size = theme.sizes.x3);
-    return (React.createElement("svg", { ref: ref, viewBox: "0 0 24 24", width: size, height: size, fill: "none", xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "xMidYMid", ...props },
-        React.createElement("g", null,
-            React.createElement("circle", { cx: "3.5", cy: "12", fill: "#C0C8D1", "transform-origin": "3.5 3.5" },
-                React.createElement("animate", { attributeName: "r", values: "3;3;3.5;3", keySplines: "\n                0.1 0.8 0.2 1;\n                0.1 0.8 0.2 1;\n                0.1 0.8 0.2 1;", keyTimes: "0; 0.25;0.4; 1", calcMode: "spline", dur: "0.8s", repeatCount: "indefinite" }),
-                React.createElement("animate", { id: "first", attributeName: "fill", values: "#C0C8D1;#C0C8D1;#434D59;#C0C8D1", keySplines: "\n                0.1 0.8 0.2 1;\n                0.1 0.8 0.2 1;\n                0.1 0.8 0.2 1;", keyTimes: "0; 0.25;0.4; 1", calcMode: "spline", dur: "0.8s", repeatCount: "indefinite" })),
-            React.createElement("circle", { cx: "12", cy: "12", r: "3", fill: "#C0C8D1", "transform-origin": "12 3.5" },
-                React.createElement("animate", { attributeName: "r", begin: "0.2s; first.begin", values: "3;3;3.5;3", keySplines: "\n                0.1 0.8 0.2 1;\n                0.1 0.8 0.2 1;\n                0.1 0.8 0.2 1;", keyTimes: "0; 0.25;0.4; 1", calcMode: "spline", dur: "0.8s", repeatCount: "indefinite" }),
-                React.createElement("animate", { id: "second", attributeName: "fill", begin: "0.2s; first.begin", values: "#C0C8D1;#C0C8D1;#434D59;#C0C8D1", keySplines: "\n                0.1 0.8 0.2 1;\n                0.1 0.8 0.2 1;\n                0.1 0.8 0.2 1;", keyTimes: "0; 0.25;0.4; 1", calcMode: "spline", dur: "0.8s", repeatCount: "indefinite" })),
-            React.createElement("circle", { cx: "20.5", cy: "12", r: "3", fill: "#C0C8D1", "transform-origin": "20.5 3.5" },
-                React.createElement("animate", { attributeName: "r", begin: "0.3s; first.begin", values: "3;3;3.5;3", keySplines: "\n                0.1 0.8 0.2 1;\n                0.1 0.8 0.2 1;\n                0.1 0.8 0.2 1;", keyTimes: "0; 0.25;0.4; 1", calcMode: "spline", dur: "0.8s", repeatCount: "indefinite" }),
-                React.createElement("animate", { id: "third", attributeName: "fill", begin: "0.3s; first.begin", values: "#C0C8D1;#C0C8D1;#434D59;#C0C8D1", keySplines: "\n                .24 .1 .35 .8;\n                .24 .1 .35 .8;\n                0.1 0.8 0.2 1", keyTimes: "0; 0.25;0.4; 1", calcMode: "spline", dur: "0.8s", repeatCount: "indefinite" })))));
+    return (_jsx("svg", { ref: ref, viewBox: "0 0 24 24", width: size, height: size, fill: "none", xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "xMidYMid", ...props, children: _jsxs("g", { children: [_jsxs("circle", { cx: "3.5", cy: "12", fill: "#C0C8D1", "transform-origin": "3.5 3.5", children: [_jsx("animate", { attributeName: "r", values: "3;3;3.5;3", keySplines: "\n                0.1 0.8 0.2 1;\n                0.1 0.8 0.2 1;\n                0.1 0.8 0.2 1;", keyTimes: "0; 0.25;0.4; 1", calcMode: "spline", dur: "0.8s", repeatCount: "indefinite" }), _jsx("animate", { id: "first", attributeName: "fill", values: "#C0C8D1;#C0C8D1;#434D59;#C0C8D1", keySplines: "\n                0.1 0.8 0.2 1;\n                0.1 0.8 0.2 1;\n                0.1 0.8 0.2 1;", keyTimes: "0; 0.25;0.4; 1", calcMode: "spline", dur: "0.8s", repeatCount: "indefinite" })] }), _jsxs("circle", { cx: "12", cy: "12", r: "3", fill: "#C0C8D1", "transform-origin": "12 3.5", children: [_jsx("animate", { attributeName: "r", begin: "0.2s; first.begin", values: "3;3;3.5;3", keySplines: "\n                0.1 0.8 0.2 1;\n                0.1 0.8 0.2 1;\n                0.1 0.8 0.2 1;", keyTimes: "0; 0.25;0.4; 1", calcMode: "spline", dur: "0.8s", repeatCount: "indefinite" }), _jsx("animate", { id: "second", attributeName: "fill", begin: "0.2s; first.begin", values: "#C0C8D1;#C0C8D1;#434D59;#C0C8D1", keySplines: "\n                0.1 0.8 0.2 1;\n                0.1 0.8 0.2 1;\n                0.1 0.8 0.2 1;", keyTimes: "0; 0.25;0.4; 1", calcMode: "spline", dur: "0.8s", repeatCount: "indefinite" })] }), _jsxs("circle", { cx: "20.5", cy: "12", r: "3", fill: "#C0C8D1", "transform-origin": "20.5 3.5", children: [_jsx("animate", { attributeName: "r", begin: "0.3s; first.begin", values: "3;3;3.5;3", keySplines: "\n                0.1 0.8 0.2 1;\n                0.1 0.8 0.2 1;\n                0.1 0.8 0.2 1;", keyTimes: "0; 0.25;0.4; 1", calcMode: "spline", dur: "0.8s", repeatCount: "indefinite" }), _jsx("animate", { id: "third", attributeName: "fill", begin: "0.3s; first.begin", values: "#C0C8D1;#C0C8D1;#434D59;#C0C8D1", keySplines: "\n                .24 .1 .35 .8;\n                .24 .1 .35 .8;\n                0.1 0.8 0.2 1", keyTimes: "0; 0.25;0.4; 1", calcMode: "spline", dur: "0.8s", repeatCount: "indefinite" })] })] }) }));
 });
 export default LoadingIcon;

package/dist/src/Input/Input.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 { getSubset, omitSubset } from "../utils/subset";
 import { Field } from "../Form";
@@ -8,8 +9,6 @@ const Input = forwardRef(({ errorMessage, errorList, className, ...props }, ref)
     const spaceProps = getSubset(props, propTypes.space);
     const layoutProps = getSubset(props, propTypes.space);
     const restProps = omitSubset(props, propTypes.space);
-    return (React.createElement(Field, { className: className, ...spaceProps, ...layoutProps },
-        React.createElement(InputField, { ...restProps, error: !!(errorMessage || errorList), ref: ref }),
-        React.createElement(InlineValidation, { mt: "x1", errorMessage: errorMessage, errorList: errorList })));
+    return (_jsxs(Field, { className: className, ...spaceProps, ...layoutProps, children: [_jsx(InputField, { ...restProps, error: !!(errorMessage || errorList), ref: ref }), _jsx(InlineValidation, { mt: "x1", errorMessage: errorMessage, errorList: errorList })] }));
 });
 export default Input;

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

@@ -1,55 +1,54 @@
-import React from "react";
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const _Input: () => React.JSX.Element;
+export declare const _Input: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithAllProps: {
-    (): 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 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 WithCustomId: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const SetToRequired: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithAAffixPrefixAndSuffix: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
-export declare const WithAnIcon: () => React.JSX.Element;
-export declare const WithIconTooltips: () => React.JSX.Element;
+export declare const WithAnIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithIconTooltips: () => import("react/jsx-runtime").JSX.Element;
 export declare const UsingRefToControlFocus: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };

package/dist/src/Input/Input.story.js

@@ -1,90 +1,59 @@
-import React, { useRef } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef } from "react";
 import { action } from "@storybook/addon-actions";
 import { Input, Form, FormSection, PrimaryButton, Button, Flex, Heading4 } from "../index";
 const errorList = ["Error message 1", "Error message 2"];
 export default {
     title: "Components/Input",
 };
-export const _Input = () => React.createElement(Input, { labelText: "Input", onChange: action("value changed"), onBlur: action("blurred") });
-export const WithAllProps = () => (React.createElement(Input, { placeholder: "Placeholder", p: "x3", labelText: "Input", helpText: "Additional help text", requirementText: "Required", onChange: action("value changed"), onBlur: action("blurred"), required: true }));
+export const _Input = () => _jsx(Input, { labelText: "Input", onChange: action("value changed"), onBlur: action("blurred") });
+export const WithAllProps = () => (_jsx(Input, { placeholder: "Placeholder", p: "x3", labelText: "Input", helpText: "Additional help text", requirementText: "Required", onChange: action("value changed"), onBlur: action("blurred"), required: true }));
 WithAllProps.story = {
     name: "with all props",
 };
-export const SetToDisabled = () => (React.createElement(Input, { labelText: "Set to disabled", disabled: true, onBlur: action("blurred"), value: "Disabled" }));
+export const SetToDisabled = () => (_jsx(Input, { labelText: "Set to disabled", disabled: true, onBlur: action("blurred"), value: "Disabled" }));
 SetToDisabled.story = {
     name: "set to disabled",
 };
-export const WithErrorMessage = () => (React.createElement(Input, { labelText: "Label", errorMessage: "Error message", onChange: action("value changed"), onBlur: action("blurred") }));
+export const WithErrorMessage = () => (_jsx(Input, { labelText: "Label", errorMessage: "Error message", onChange: action("value changed"), onBlur: action("blurred") }));
 WithErrorMessage.story = {
     name: "with error message",
 };
-export const WithErrorList = () => (React.createElement(Input, { labelText: "Label", errorMessage: "Error message", errorList: errorList, onChange: action("value changed"), onBlur: action("blurred") }));
+export const WithErrorList = () => (_jsx(Input, { labelText: "Label", errorMessage: "Error message", errorList: errorList, onChange: action("value changed"), onBlur: action("blurred") }));
 WithErrorList.story = {
     name: "with error list ",
 };
-export const WithCustomId = () => (React.createElement(Input, { id: "my-own-id", labelText: "Label", onChange: action("value changed"), onBlur: action("blurred") }));
+export const WithCustomId = () => (_jsx(Input, { id: "my-own-id", labelText: "Label", onChange: action("value changed"), onBlur: action("blurred") }));
 WithCustomId.story = {
     name: "with custom ID",
 };
-export const SetToRequired = () => (React.createElement(React.Fragment, null,
-    React.createElement(Form, { title: "Required field example" },
-        React.createElement(Input, { required: true, labelText: "Label", onChange: action("value changed"), onBlur: action("blurred") }),
-        React.createElement(PrimaryButton, null, "Send"))));
+export const SetToRequired = () => (_jsx(_Fragment, { children: _jsxs(Form, { title: "Required field example", children: [_jsx(Input, { required: true, labelText: "Label", onChange: action("value changed"), onBlur: action("blurred") }), _jsx(PrimaryButton, { children: "Send" })] }) }));
 SetToRequired.story = {
     name: "set to required",
 };
-export const WithAAffixPrefixAndSuffix = () => (React.createElement(React.Fragment, null,
-    React.createElement(Form, { title: "Suffix", mb: "x6" },
-        React.createElement(FormSection, null,
-            React.createElement(Input, { suffix: "Eaches" }),
-            React.createElement(Input, { suffix: "Pallets and boxes" })),
-        React.createElement(FormSection, { title: "With Custom Width" },
-            React.createElement(Input, { suffix: "Eaches", suffixWidth: "360px", prefixAlignment: "right" }),
-            React.createElement(Input, { suffix: "Pallets and boxes", suffixWidth: "360px" }))),
-    React.createElement(Form, { title: "Prefix", mb: "x6" },
-        React.createElement(FormSection, null,
-            React.createElement(Input, { prefix: "Eaches" }),
-            React.createElement(Input, { prefix: "Pallets and boxes" })),
-        React.createElement(FormSection, { title: "With Custom Width" },
-            React.createElement(Input, { prefix: "Eaches", prefixWidth: "360px" }),
-            React.createElement(Input, { prefix: "Pallets and boxes", prefixWidth: "360px" })),
-        React.createElement(FormSection, { title: "With right alignment" },
-            React.createElement(Input, { prefix: "Eaches", prefixWidth: "360px", prefixAlignment: "right" }),
-            React.createElement(Input, { prefix: "Pallets and boxes", prefixWidth: "360px", prefixAlignment: "right" }))),
-    React.createElement(Form, { title: "Prefix and Suffix", mb: "x6" },
-        React.createElement(Input, { prefix: "Quantity", suffix: "Eaches" }))));
+export const WithAAffixPrefixAndSuffix = () => (_jsxs(_Fragment, { children: [_jsxs(Form, { title: "Suffix", mb: "x6", children: [_jsxs(FormSection, { children: [_jsx(Input, { suffix: "Eaches" }), _jsx(Input, { suffix: "Pallets and boxes" })] }), _jsxs(FormSection, { title: "With Custom Width", children: [_jsx(Input, { suffix: "Eaches", suffixWidth: "360px", prefixAlignment: "right" }), _jsx(Input, { suffix: "Pallets and boxes", suffixWidth: "360px" })] })] }), _jsxs(Form, { title: "Prefix", mb: "x6", children: [_jsxs(FormSection, { children: [_jsx(Input, { prefix: "Eaches" }), _jsx(Input, { prefix: "Pallets and boxes" })] }), _jsxs(FormSection, { title: "With Custom Width", children: [_jsx(Input, { prefix: "Eaches", prefixWidth: "360px" }), _jsx(Input, { prefix: "Pallets and boxes", prefixWidth: "360px" })] }), _jsxs(FormSection, { title: "With right alignment", children: [_jsx(Input, { prefix: "Eaches", prefixWidth: "360px", prefixAlignment: "right" }), _jsx(Input, { prefix: "Pallets and boxes", prefixWidth: "360px", prefixAlignment: "right" })] })] }), _jsx(Form, { title: "Prefix and Suffix", mb: "x6", children: _jsx(Input, { prefix: "Quantity", suffix: "Eaches" }) })] }));
 WithAAffixPrefixAndSuffix.story = {
     name: "with a affix (prefix and suffix)",
 };
-export const WithAnIcon = () => (React.createElement(Flex, { flexDirection: "column", gap: "x2" },
-    React.createElement(Input, { maxWidth: "320px", inputWidth: "320px", iconLeft: "search", placeholder: "Search by SKU", labelText: "Left Icon" }),
-    React.createElement(Input, { maxWidth: "320px", inputWidth: "320px", iconRight: "barcode", placeholder: "Search by SKU", labelText: "Right Icon" }),
-    React.createElement(Input, { maxWidth: "320px", inputWidth: "320px", iconRight: "barcode", iconLeft: "search", placeholder: "Search by SKU", labelText: "Left and right icons" }),
-    React.createElement(Input, { maxWidth: "320px", inputWidth: "320px", iconLeft: "search", iconLeftSize: "x2", placeholder: "Search by SKU", labelText: "Custom icon size" })));
-export const WithIconTooltips = () => (React.createElement(Flex, { flexDirection: "column", gap: "x2" },
-    React.createElement(Heading4, null, "You can use tooltips to provide additional information about the icon. Tooltips can be customized with the same props as the Tooltip component."),
-    React.createElement(Input, { maxWidth: "320px", inputWidth: "320px", iconLeft: "search", iconLeftTooltip: "Search products", iconLeftTooltipProps: {
-            placement: "right",
-            showDelay: "500",
-        }, placeholder: "Search by SKU", labelText: "Hover over the search icon (right placement, 500ms delay)" }),
-    React.createElement(Input, { maxWidth: "320px", inputWidth: "320px", iconRight: "barcode", iconRightTooltip: "Scan barcode", iconRightTooltipProps: {
-            placement: "left",
-        }, placeholder: "Scan product", labelText: "Hover over the barcode icon (left placement, 1s hide delay)" }),
-    React.createElement(Input, { maxWidth: "320px", inputWidth: "320px", iconRight: "info", iconRightTooltip: "Your access number can be found on your access card", iconLeft: "lock", iconLeftTooltip: "Your information is secure", iconRightTooltipProps: {
-            placement: "bottom",
-            maxWidth: "150px",
-        }, iconLeftTooltipProps: {
-            placement: "top",
-            maxWidth: "150px",
-        }, placeholder: "Enter your access number", labelText: "Different placements (top and bottom)" })));
+export const WithAnIcon = () => (_jsxs(Flex, { flexDirection: "column", gap: "x2", children: [_jsx(Input, { maxWidth: "320px", inputWidth: "320px", iconLeft: "search", placeholder: "Search by SKU", labelText: "Left Icon" }), _jsx(Input, { maxWidth: "320px", inputWidth: "320px", iconRight: "barcode", placeholder: "Search by SKU", labelText: "Right Icon" }), _jsx(Input, { maxWidth: "320px", inputWidth: "320px", iconRight: "barcode", iconLeft: "search", placeholder: "Search by SKU", labelText: "Left and right icons" }), _jsx(Input, { maxWidth: "320px", inputWidth: "320px", iconLeft: "search", iconLeftSize: "x2", placeholder: "Search by SKU", labelText: "Custom icon size" })] }));
+export const WithIconTooltips = () => (_jsxs(Flex, { flexDirection: "column", gap: "x2", children: [_jsx(Heading4, { children: "You can use tooltips to provide additional information about the icon. Tooltips can be customized with the same props as the Tooltip component." }), _jsx(Input, { maxWidth: "320px", inputWidth: "320px", iconLeft: "search", iconLeftTooltip: "Search products", iconLeftTooltipProps: {
+                placement: "right",
+                showDelay: "500",
+            }, placeholder: "Search by SKU", labelText: "Hover over the search icon (right placement, 500ms delay)" }), _jsx(Input, { maxWidth: "320px", inputWidth: "320px", iconRight: "barcode", iconRightTooltip: "Scan barcode", iconRightTooltipProps: {
+                placement: "left",
+            }, placeholder: "Scan product", labelText: "Hover over the barcode icon (left placement, 1s hide delay)" }), _jsx(Input, { maxWidth: "320px", inputWidth: "320px", iconRight: "info", iconRightTooltip: "Your access number can be found on your access card", iconLeft: "lock", iconLeftTooltip: "Your information is secure", iconRightTooltipProps: {
+                placement: "bottom",
+                maxWidth: "150px",
+            }, iconLeftTooltipProps: {
+                placement: "top",
+                maxWidth: "150px",
+            }, placeholder: "Enter your access number", labelText: "Different placements (top and bottom)" })] }));
 export const UsingRefToControlFocus = () => {
     const ref = useRef(null);
     const handleClick = () => {
         ref.current.focus();
     };
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Input, { id: "my-own-id", ref: ref, labelText: "Label", onChange: action("value changed"), onBlur: action("blurred") }),
-        React.createElement(Button, { onClick: handleClick }, "Focus the Input")));
+    return (_jsxs(_Fragment, { children: [_jsx(Input, { id: "my-own-id", ref: ref, labelText: "Label", onChange: action("value changed"), onBlur: action("blurred") }), _jsx(Button, { onClick: handleClick, children: "Focus the Input" })] }));
 };
 UsingRefToControlFocus.story = {
     name: "using ref to control focus",

package/dist/src/Input/InputField.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, useTheme } from "styled-components";
 import { space, variant } from "styled-system";
 import { Box } from "../Box";
@@ -13,18 +14,9 @@ import Suffix from "./Suffix";
 export const InputField = forwardRef(({ iconRight, iconLeft, iconRightSize = "x3", iconLeftSize = "x3", iconLeftTooltip, iconRightTooltip, iconLeftTooltipProps, iconRightTooltipProps, error, required, labelText, requirementText, helpText, prefix, prefixWidth, prefixAlignment, suffix, suffixAlignment, suffixWidth, inputWidth, variant, htmlSize, ...props }, ref) => {
     const componentVariant = useComponentVariant(variant);
     const theme = useTheme();
-    return (React.createElement(MaybeFieldLabel, { labelText: labelText, requirementText: requirementText, helpText: helpText },
-        React.createElement(Flex, { alignItems: "flex-start" },
-            React.createElement(Prefix, { prefix: prefix, prefixWidth: prefixWidth, textAlign: prefixAlignment }),
-            React.createElement(InputWrapper, { maxWidth: inputWidth },
-                iconLeft &&
-                    (iconLeftTooltip ? (React.createElement(Tooltip, { tooltip: iconLeftTooltip, ...iconLeftTooltipProps },
-                        React.createElement(InputIcon, { left: "x1", icon: iconLeft, size: iconLeftSize }))) : (React.createElement(InputIcon, { left: "x1", icon: iconLeft, size: iconLeftSize }))),
-                React.createElement(StyledInput, { paddingLeft: iconLeft ? `calc(${theme.space[iconLeftSize]} + ${theme.space.x1_5})` : theme.space.x1, paddingRight: iconRight ? `calc(${theme.space[iconRightSize]} + ${theme.space.x1_5})` : theme.space.x1, "aria-invalid": error, "aria-required": required, required: required, error: error, ref: ref, size: htmlSize, variant: componentVariant, inputWidth: inputWidth, ...props }),
-                iconRight &&
-                    (iconRightTooltip ? (React.createElement(Tooltip, { tooltip: iconRightTooltip, ...iconRightTooltipProps },
-                        React.createElement(InputIcon, { right: "x1", icon: iconRight, size: iconRightSize }))) : (React.createElement(InputIcon, { right: "x1", icon: iconRight, size: iconRightSize })))),
-            React.createElement(Suffix, { suffix: suffix, suffixWidth: suffixWidth, textAlign: suffixAlignment }))));
+    return (_jsx(MaybeFieldLabel, { labelText: labelText, requirementText: requirementText, helpText: helpText, children: _jsxs(Flex, { alignItems: "flex-start", children: [_jsx(Prefix, { prefix: prefix, prefixWidth: prefixWidth, textAlign: prefixAlignment }), _jsxs(InputWrapper, { maxWidth: inputWidth, children: [iconLeft &&
+                            (iconLeftTooltip ? (_jsx(Tooltip, { tooltip: iconLeftTooltip, ...iconLeftTooltipProps, children: _jsx(InputIcon, { left: "x1", icon: iconLeft, size: iconLeftSize }) })) : (_jsx(InputIcon, { left: "x1", icon: iconLeft, size: iconLeftSize }))), _jsx(StyledInput, { paddingLeft: iconLeft ? `calc(${theme.space[iconLeftSize]} + ${theme.space.x1_5})` : theme.space.x1, paddingRight: iconRight ? `calc(${theme.space[iconRightSize]} + ${theme.space.x1_5})` : theme.space.x1, "aria-invalid": error, "aria-required": required, required: required, error: error, ref: ref, size: htmlSize, variant: componentVariant, inputWidth: inputWidth, ...props }), iconRight &&
+                            (iconRightTooltip ? (_jsx(Tooltip, { tooltip: iconRightTooltip, ...iconRightTooltipProps, children: _jsx(InputIcon, { right: "x1", icon: iconRight, size: iconRightSize }) })) : (_jsx(InputIcon, { right: "x1", icon: iconRight, size: iconRightSize })))] }), _jsx(Suffix, { suffix: suffix, suffixWidth: suffixWidth, textAlign: suffixAlignment })] }) }));
 });
 const InputWrapper = styled(Box)(({ theme }) => ({
     position: "relative",

package/dist/src/Input/Prefix.d.ts

@@ -1,8 +1,7 @@
-import React from "react";
 import { TextProps } from "../Type/Text";
 type PrefixProps = TextProps & {
     prefix?: string;
     prefixWidth?: string;
 };
-declare const Prefix: ({ prefix, prefixWidth, ...props }: PrefixProps) => React.JSX.Element;
+declare const Prefix: ({ prefix, prefixWidth, ...props }: PrefixProps) => import("react/jsx-runtime").JSX.Element;
 export default Prefix;

package/dist/src/Input/Prefix.js

@@ -1,6 +1,5 @@
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from "../Box";
 import { Text } from "../Type";
-const Prefix = ({ prefix, prefixWidth, ...props }) => prefix ? (React.createElement(Box, { width: prefixWidth, pt: "x1", pr: "x1", pb: "x1" },
-    React.createElement(Text, { ...props }, prefix))) : null;
+const Prefix = ({ prefix, prefixWidth, ...props }) => prefix ? (_jsx(Box, { width: prefixWidth, pt: "x1", pr: "x1", pb: "x1", children: _jsx(Text, { ...props, children: prefix }) })) : null;
 export default Prefix;

package/dist/src/Input/Suffix.d.ts

@@ -1,8 +1,7 @@
-import React from "react";
 import { TextProps } from "../Type/Text";
 interface SuffixProps extends TextProps {
     suffix?: string;
     suffixWidth?: string;
 }
-export default function Suffix({ suffix, suffixWidth, ...props }: SuffixProps): React.JSX.Element;
+export default function Suffix({ suffix, suffixWidth, ...props }: SuffixProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/src/Input/Suffix.js

@@ -1,7 +1,6 @@
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from "../Box";
 import { Text } from "../Type";
 export default function Suffix({ suffix, suffixWidth, ...props }) {
-    return suffix ? (React.createElement(Box, { width: suffixWidth, pt: "x1", pb: "x1", pl: "x1" },
-        React.createElement(Text, { ...props }, suffix))) : null;
+    return suffix ? (_jsx(Box, { width: suffixWidth, pt: "x1", pb: "x1", pl: "x1", children: _jsx(Text, { ...props, children: suffix }) })) : null;
 }

package/dist/src/Layout/ApplicationFrame.d.ts

@@ -1,9 +1,9 @@
-import React, { ReactNode } from "react";
+import { ReactNode } from "react";
 import { FlexProps } from "../Flex/Flex";
 interface ApplicationFrameProps extends FlexProps {
     navBar?: ReactNode;
     environment?: string;
     children?: ReactNode;
 }
-declare const ApplicationFrame: ({ navBar, children, environment, ...props }: ApplicationFrameProps) => React.JSX.Element;
+declare const ApplicationFrame: ({ navBar, children, environment, ...props }: ApplicationFrameProps) => import("react/jsx-runtime").JSX.Element;
 export default ApplicationFrame;

package/dist/src/Layout/ApplicationFrame.js

@@ -1,12 +1,8 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Box from "../Box/Box";
 import Flex from "../Flex/Flex";
 import EnvironmentBanner from "../Navigation/components/EnvironmentBanner/EnvironmentBanner";
 const ApplicationFrame = ({ navBar, children, environment, ...props }) => {
-    return (React.createElement(Flex, { flexDirection: "column", minHeight: "100vh", ...props },
-        React.createElement(Box, { position: "sticky", top: "0", zIndex: "navBar" },
-            environment && React.createElement(EnvironmentBanner, null, environment),
-            navBar),
-        React.createElement(Flex, { flexDirection: "column", position: "relative", flexGrow: 1 }, children)));
+    return (_jsxs(Flex, { flexDirection: "column", minHeight: "100vh", ...props, children: [_jsxs(Box, { position: "sticky", top: "0", zIndex: "navBar", children: [environment && _jsx(EnvironmentBanner, { children: environment }), navBar] }), _jsx(Flex, { flexDirection: "column", position: "relative", flexGrow: 1, children: children })] }));
 };
 export default ApplicationFrame;

package/dist/src/Layout/ApplicationFrame.story.d.ts

@@ -1,4 +1,3 @@
-import React from "react";
 declare const _default: {
     title: string;
     parameters: {
@@ -6,4 +5,4 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const _ApplicationFrame: () => React.JSX.Element;
+export declare const _ApplicationFrame: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/Layout/ApplicationFrame.story.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { ApplicationFrame, Navigation } from "..";
 export default {
     title: "Components/ApplicationFrame",
@@ -6,4 +6,4 @@ export default {
         layout: "fullscreen",
     },
 };
-export const _ApplicationFrame = () => React.createElement(ApplicationFrame, { environment: "training", navBar: React.createElement(Navigation, null) });
+export const _ApplicationFrame = () => _jsx(ApplicationFrame, { environment: "training", navBar: _jsx(Navigation, {}) });

package/dist/src/Layout/Header.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react";
+import { ReactNode } from "react";
 import { BoxProps } from "../Box";
 type Breakpoint = string | number;
 export interface HeaderProps extends Omit<BoxProps, "title"> {
@@ -14,5 +14,5 @@ export interface HeaderProps extends Omit<BoxProps, "title"> {
     };
     children?: ReactNode;
 }
-declare const Header: ({ background, renderBreadcrumbs, title, undecorated, children, subtitle, breakpoints, renderActions, renderSummary, ...rest }: HeaderProps) => React.JSX.Element;
+declare const Header: ({ background, renderBreadcrumbs, title, undecorated, children, subtitle, breakpoints, renderActions, renderSummary, ...rest }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
 export default Header;

package/dist/src/Layout/Header.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTheme } from "styled-components";
 import { Flex } from "../Flex";
 import { Heading1, Text } from "../Type";
@@ -12,17 +12,6 @@ const Header = ({ background, renderBreadcrumbs, title, undecorated = false, chi
     const m = useMediaQuery(`(max-width: ${mediumBreakpoint}px)`);
     const sm = useMediaQuery(`(max-width: ${smallBreakpoint}px)`);
     const bg = background ? background : undecorated ? "transparent" : "whiteGrey";
-    return (React.createElement(Flex, { py: "x1", px: "x3", gap: "x2", position: "relative", bg: bg, ...rest },
-        React.createElement(Flex, { flexGrow: 3, justifyContent: "space-between", flexDirection: m || sm ? "column" : "row", zIndex: "content" },
-            React.createElement(Flex, { flexDirection: "column" },
-                renderBreadcrumbs && renderBreadcrumbs(),
-                React.createElement(Flex, { gap: !sm ? "x2" : undefined, flexDirection: !sm ? "row" : "column", alignItems: !sm ? "center" : undefined },
-                    React.createElement(Flex, { alignItems: !sm ? "flex-end" : undefined, gap: !sm ? "x2" : undefined, flexDirection: !sm ? "row" : "column" },
-                        title && typeof title === "string" ? React.createElement(Heading1, { mb: "0" }, title) : title,
-                        subtitle && (React.createElement(Text, { pl: !sm ? "x2" : undefined, borderLeft: !sm ? "1px solid" : "none", my: "half", borderColor: "grey" }, subtitle))),
-                    children && children)),
-            renderSummary && renderSummary()),
-        renderActions && (React.createElement(Flex, { display: "flex", flexGrow: 0, alignItems: "flex-start", zIndex: "content" }, renderActions())),
-        !undecorated && React.createElement(BackgroundTriangles, { zIndex: 1 })));
+    return (_jsxs(Flex, { py: "x1", px: "x3", gap: "x2", position: "relative", bg: bg, ...rest, children: [_jsxs(Flex, { flexGrow: 3, justifyContent: "space-between", flexDirection: m || sm ? "column" : "row", zIndex: "content", children: [_jsxs(Flex, { flexDirection: "column", children: [renderBreadcrumbs && renderBreadcrumbs(), _jsxs(Flex, { gap: !sm ? "x2" : undefined, flexDirection: !sm ? "row" : "column", alignItems: !sm ? "center" : undefined, children: [_jsxs(Flex, { alignItems: !sm ? "flex-end" : undefined, gap: !sm ? "x2" : undefined, flexDirection: !sm ? "row" : "column", children: [title && typeof title === "string" ? _jsx(Heading1, { mb: "0", children: title }) : title, subtitle && (_jsx(Text, { pl: !sm ? "x2" : undefined, borderLeft: !sm ? "1px solid" : "none", my: "half", borderColor: "grey", children: subtitle }))] }), children && children] })] }), renderSummary && renderSummary()] }), renderActions && (_jsx(Flex, { display: "flex", flexGrow: 0, alignItems: "flex-start", zIndex: "content", children: renderActions() })), !undecorated && _jsx(BackgroundTriangles, { zIndex: 1 })] }));
 };
 export default Header;

package/dist/src/Layout/Header.story.d.ts

@@ -1,7 +1,6 @@
-import React from "react";
 declare const _default: {
     title: string;
-    component: ({ background, renderBreadcrumbs, title, undecorated, children, subtitle, breakpoints, renderActions, renderSummary, ...rest }: import("./Header").HeaderProps) => React.JSX.Element;
+    component: ({ background, renderBreadcrumbs, title, undecorated, children, subtitle, breakpoints, renderActions, renderSummary, ...rest }: import("./Header").HeaderProps) => import("react/jsx-runtime").JSX.Element;
     parameters: {
         layout: string;
         chromatic: {
@@ -10,12 +9,12 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const Default: () => React.JSX.Element;
-export declare const TitleAsReactElement: () => React.JSX.Element;
-export declare const WithActions: () => React.JSX.Element;
-export declare const WithSubTitle: () => React.JSX.Element;
-export declare const WithContent: () => React.JSX.Element;
-export declare const WithSummary: () => React.JSX.Element;
-export declare const WithAnUndecoratedBackground: () => React.JSX.Element;
-export declare const WithCustomBackground: () => React.JSX.Element;
-export declare const WithEverything: () => React.JSX.Element;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;
+export declare const TitleAsReactElement: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithActions: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithSubTitle: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithContent: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithSummary: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithAnUndecoratedBackground: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithCustomBackground: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithEverything: () => import("react/jsx-runtime").JSX.Element;