@nulogy/components 16.0.0 → 16.0.2

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;

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

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Breadcrumbs, Button, DropdownButton, DropdownLink, Flex, Link, PrimaryButton, StatusIndicator, Header, Text, Heading1, Icon, } from "..";
 import Summary from "../Summary/Summary";
 import SummaryItem from "../Summary/SummaryItem";
@@ -15,57 +15,17 @@ export default {
         chromatic: { viewports },
     },
 };
-export const Default = () => (React.createElement(Header, { renderBreadcrumbs: () => (React.createElement(Breadcrumbs, null,
-        React.createElement(Link, { href: "/" }, "Home"),
-        React.createElement(Link, { href: "/" }, "Materials"))), title: "Materials Overview" }));
-export const TitleAsReactElement = () => (React.createElement(Header, { renderBreadcrumbs: () => (React.createElement(Breadcrumbs, null,
-        React.createElement(Link, { href: "/" }, "Home"),
-        React.createElement(Link, { href: "/" }, "Materials"))), title: React.createElement(Heading1, { mb: "0" },
-        "Bacon ",
-        React.createElement(Icon, { icon: "info" })) }));
-export const WithActions = () => (React.createElement(Header, { renderBreadcrumbs: () => (React.createElement(Breadcrumbs, null,
-        React.createElement(Link, { href: "/" }, "Home"),
-        React.createElement(Link, { href: "/" }, "Materials"))), title: "Materials Overview", renderActions: () => (React.createElement(Flex, { gap: "x1" },
-        React.createElement(PrimaryButton, { size: "small" }, " Archive"),
-        React.createElement(Button, { size: "small" }, "Delete"),
-        React.createElement(DropdownMenu, { showArrow: false, defaultOpen: false },
-            React.createElement(DropdownLink, { href: "/" }, "Dropdown Link"),
-            React.createElement(DropdownButton, null, "Dropdown Button")))) }));
-export const WithSubTitle = () => (React.createElement(Header, { renderBreadcrumbs: () => (React.createElement(Breadcrumbs, null,
-        React.createElement(Link, { href: "/" }, "Home"),
-        React.createElement(Link, { href: "/" }, "Materials"))), title: "Materials Overview", subtitle: "Materials Overview" }));
-export const WithContent = () => (React.createElement(Header, { renderBreadcrumbs: () => (React.createElement(Breadcrumbs, null,
-        React.createElement(Link, { href: "/" }, "Home"),
-        React.createElement(Link, { href: "/" }, "Materials"),
-        React.createElement(Text, null, "Orders"))), title: "Materials Overview", subtitle: "Materials Overview" },
-    React.createElement(Box, { border: "1px dashed", borderColor: "grey", py: "half", px: "x1", borderRadius: "small" }, "Extra content")));
-export const WithSummary = () => (React.createElement(Header, { breakpoints: {
+export const Default = () => (_jsx(Header, { renderBreadcrumbs: () => (_jsxs(Breadcrumbs, { children: [_jsx(Link, { href: "/", children: "Home" }), _jsx(Link, { href: "/", children: "Materials" })] })), title: "Materials Overview" }));
+export const TitleAsReactElement = () => (_jsx(Header, { renderBreadcrumbs: () => (_jsxs(Breadcrumbs, { children: [_jsx(Link, { href: "/", children: "Home" }), _jsx(Link, { href: "/", children: "Materials" })] })), title: _jsxs(Heading1, { mb: "0", children: ["Bacon ", _jsx(Icon, { icon: "info" })] }) }));
+export const WithActions = () => (_jsx(Header, { renderBreadcrumbs: () => (_jsxs(Breadcrumbs, { children: [_jsx(Link, { href: "/", children: "Home" }), _jsx(Link, { href: "/", children: "Materials" })] })), title: "Materials Overview", renderActions: () => (_jsxs(Flex, { gap: "x1", children: [_jsx(PrimaryButton, { size: "small", children: " Archive" }), _jsx(Button, { size: "small", children: "Delete" }), _jsxs(DropdownMenu, { showArrow: false, defaultOpen: false, children: [_jsx(DropdownLink, { href: "/", children: "Dropdown Link" }), _jsx(DropdownButton, { children: "Dropdown Button" })] })] })) }));
+export const WithSubTitle = () => (_jsx(Header, { renderBreadcrumbs: () => (_jsxs(Breadcrumbs, { children: [_jsx(Link, { href: "/", children: "Home" }), _jsx(Link, { href: "/", children: "Materials" })] })), title: "Materials Overview", subtitle: "Materials Overview" }));
+export const WithContent = () => (_jsx(Header, { renderBreadcrumbs: () => (_jsxs(Breadcrumbs, { children: [_jsx(Link, { href: "/", children: "Home" }), _jsx(Link, { href: "/", children: "Materials" }), _jsx(Text, { children: "Orders" })] })), title: "Materials Overview", subtitle: "Materials Overview", children: _jsx(Box, { border: "1px dashed", borderColor: "grey", py: "half", px: "x1", borderRadius: "small", children: "Extra content" }) }));
+export const WithSummary = () => (_jsx(Header, { breakpoints: {
         medium: 1200,
-    }, renderBreadcrumbs: () => (React.createElement(Breadcrumbs, null,
-        React.createElement(Link, { underline: false, href: "/" }, "Home"),
-        React.createElement(Link, { underline: false, href: "/" }, "Materials"))), title: "Page title", renderSummary: () => (React.createElement(Summary, { breakpoint: 1200 },
-        React.createElement(SummaryItem, { value: 42, status: React.createElement(StatusIndicator, { type: "informative" }, "On Time") }),
-        React.createElement(SummaryItem, { value: 42, status: React.createElement(StatusIndicator, { type: "informative" }, "On Time") }),
-        React.createElement(SummaryItem, { value: 42, status: React.createElement(StatusIndicator, { type: "informative" }, "On Time") }))) }));
-export const WithAnUndecoratedBackground = () => (React.createElement(Header, { undecorated: true, renderBreadcrumbs: () => (React.createElement(Breadcrumbs, null,
-        React.createElement(Link, { href: "/" }, "Home"),
-        React.createElement(Link, { href: "/" }, "Materials"))), title: "Materials Overview" }));
-export const WithCustomBackground = () => (React.createElement(Header, { renderBreadcrumbs: () => (React.createElement(Breadcrumbs, null,
-        React.createElement(Link, { href: "/" }, "Home"),
-        React.createElement(Link, { href: "/" }, "Materials"))), title: "Materials Overview", background: "#98FB98", undecorated: true }));
-export const WithEverything = () => (React.createElement(Header, { breakpoints: {
+    }, renderBreadcrumbs: () => (_jsxs(Breadcrumbs, { children: [_jsx(Link, { underline: false, href: "/", children: "Home" }), _jsx(Link, { underline: false, href: "/", children: "Materials" })] })), title: "Page title", renderSummary: () => (_jsxs(Summary, { breakpoint: 1200, children: [_jsx(SummaryItem, { value: 42, status: _jsx(StatusIndicator, { type: "informative", children: "On Time" }) }), _jsx(SummaryItem, { value: 42, status: _jsx(StatusIndicator, { type: "informative", children: "On Time" }) }), _jsx(SummaryItem, { value: 42, status: _jsx(StatusIndicator, { type: "informative", children: "On Time" }) })] })) }));
+export const WithAnUndecoratedBackground = () => (_jsx(Header, { undecorated: true, renderBreadcrumbs: () => (_jsxs(Breadcrumbs, { children: [_jsx(Link, { href: "/", children: "Home" }), _jsx(Link, { href: "/", children: "Materials" })] })), title: "Materials Overview" }));
+export const WithCustomBackground = () => (_jsx(Header, { renderBreadcrumbs: () => (_jsxs(Breadcrumbs, { children: [_jsx(Link, { href: "/", children: "Home" }), _jsx(Link, { href: "/", children: "Materials" })] })), title: "Materials Overview", background: "#98FB98", undecorated: true }));
+export const WithEverything = () => (_jsx(Header, { breakpoints: {
         small: 768,
         medium: 1200,
-    }, renderBreadcrumbs: () => (React.createElement(Breadcrumbs, null,
-        React.createElement(Link, { underline: false, href: "/" }, "Home"),
-        React.createElement(Link, { underline: false, href: "/" }, "Materials"))), title: "Page title", subtitle: "Alternative page title", renderSummary: () => (React.createElement(Summary, { breakpoint: 1200 },
-        React.createElement(SummaryItem, { value: 42, status: React.createElement(StatusIndicator, { type: "informative" }, "On Time") }),
-        React.createElement(SummaryItem, { value: 42, status: React.createElement(StatusIndicator, { type: "informative" }, "On Time") }),
-        React.createElement(SummaryItem, { value: 42, status: React.createElement(StatusIndicator, { type: "informative" }, "On Time") }),
-        React.createElement(SummaryDivider, null),
-        React.createElement(SummaryItem, { value: 42, status: React.createElement(StatusIndicator, { type: "informative" }, "On Time") }),
-        React.createElement(SummaryItem, { value: 42, status: React.createElement(StatusIndicator, { type: "informative" }, "On Time") }),
-        React.createElement(SummaryItem, { value: 42, status: React.createElement(StatusIndicator, { type: "informative" }, "On Time") }))), renderActions: () => (React.createElement(DropdownMenu, { showArrow: false, defaultOpen: false },
-        React.createElement(DropdownLink, { href: "/" }, "Dropdown Link"),
-        React.createElement(DropdownButton, null, "Dropdown Button"))) },
-    React.createElement(Box, { border: "1px dashed", borderColor: "grey", py: "half", px: "x1", borderRadius: "small" }, "Extra content")));
+    }, renderBreadcrumbs: () => (_jsxs(Breadcrumbs, { children: [_jsx(Link, { underline: false, href: "/", children: "Home" }), _jsx(Link, { underline: false, href: "/", children: "Materials" })] })), title: "Page title", subtitle: "Alternative page title", renderSummary: () => (_jsxs(Summary, { breakpoint: 1200, children: [_jsx(SummaryItem, { value: 42, status: _jsx(StatusIndicator, { type: "informative", children: "On Time" }) }), _jsx(SummaryItem, { value: 42, status: _jsx(StatusIndicator, { type: "informative", children: "On Time" }) }), _jsx(SummaryItem, { value: 42, status: _jsx(StatusIndicator, { type: "informative", children: "On Time" }) }), _jsx(SummaryDivider, {}), _jsx(SummaryItem, { value: 42, status: _jsx(StatusIndicator, { type: "informative", children: "On Time" }) }), _jsx(SummaryItem, { value: 42, status: _jsx(StatusIndicator, { type: "informative", children: "On Time" }) }), _jsx(SummaryItem, { value: 42, status: _jsx(StatusIndicator, { type: "informative", children: "On Time" }) })] })), renderActions: () => (_jsxs(DropdownMenu, { showArrow: false, defaultOpen: false, children: [_jsx(DropdownLink, { href: "/", children: "Dropdown Link" }), _jsx(DropdownButton, { children: "Dropdown Button" })] })), children: _jsx(Box, { border: "1px dashed", borderColor: "grey", py: "half", px: "x1", borderRadius: "small", children: "Extra content" }) }));

package/dist/src/Layout/Page.applicationFrame.story.d.ts

@@ -1,13 +1,12 @@
 import type { StoryObj } from "@storybook/react";
-import React from "react";
 import { Page } from "..";
 declare const _default: {
     title: string;
-    component: ({ breadcrumbs, title, children, headerContent, fullHeight, renderHeader, ...rest }: import("./Page").PageProps) => React.JSX.Element;
+    component: ({ breadcrumbs, title, children, headerContent, fullHeight, renderHeader, ...rest }: import("./Page").PageProps) => import("react/jsx-runtime").JSX.Element;
     parameters: {
         layout: string;
     };
-    render: (args: import("./Page").PageProps) => React.JSX.Element;
+    render: (args: import("./Page").PageProps) => import("react/jsx-runtime").JSX.Element;
 };
 export default _default;
 type Story = StoryObj<typeof Page>;

package/dist/src/Layout/Page.applicationFrame.story.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Link } from "../Link";
 import { ApplicationFrame, Navigation, Page, Breadcrumbs, Heading2, Text } from "..";
 export default {
@@ -7,32 +7,25 @@ export default {
     parameters: {
         layout: "fullscreen",
     },
-    render: (args) => (React.createElement(ApplicationFrame, { navBar: React.createElement(Navigation, null), height: "100vh" },
-        React.createElement(Page, { ...args }))),
+    render: (args) => (_jsx(ApplicationFrame, { navBar: _jsx(Navigation, {}), height: "100vh", children: _jsx(Page, { ...args }) })),
 };
 export const NoPageTitle = {
     args: {
-        breadcrumbs: (React.createElement(Breadcrumbs, null,
-            React.createElement(Link, { href: "/" }, "Home"),
-            React.createElement(Link, { href: "/" }, "Materials"))),
-        children: (React.createElement(Text, { fontFamily: "mono", fontSize: "small" }, "content")),
+        breadcrumbs: (_jsxs(Breadcrumbs, { children: [_jsx(Link, { href: "/", children: "Home" }), _jsx(Link, { href: "/", children: "Materials" })] })),
+        children: (_jsx(Text, { fontFamily: "mono", fontSize: "small", children: "content" })),
     },
 };
 export const NoBreadcrumbs = {
     args: {
         title: "Materials Overview",
-        children: (React.createElement(React.Fragment, null,
-            React.createElement(Heading2, null, "Overview"),
-            React.createElement(Text, null, "I am main content."))),
+        children: (_jsxs(_Fragment, { children: [_jsx(Heading2, { children: "Overview" }), _jsx(Text, { children: "I am main content." })] })),
     },
 };
 export const WithFullHeight = {
     args: {
         title: "Materials Overview",
         fullHeight: true,
-        breadcrumbs: (React.createElement(Breadcrumbs, null,
-            React.createElement(Link, { href: "/" }, "Home"),
-            React.createElement(Link, { href: "/" }, "Materials"))),
-        children: React.createElement(Text, null, "I am main content."),
+        breadcrumbs: (_jsxs(Breadcrumbs, { children: [_jsx(Link, { href: "/", children: "Home" }), _jsx(Link, { href: "/", children: "Materials" })] })),
+        children: _jsx(Text, { children: "I am main content." }),
     },
 };

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

@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react";
+import { ReactNode } from "react";
 import { FlexProps } from "../Flex/Flex";
 export interface PageProps extends Omit<FlexProps, "title"> {
     breadcrumbs?: ReactNode;
@@ -8,5 +8,5 @@ export interface PageProps extends Omit<FlexProps, "title"> {
     fullHeight?: boolean;
     renderHeader?: () => ReactNode;
 }
-export declare const Page: ({ breadcrumbs, title, children, headerContent, fullHeight, renderHeader, ...rest }: PageProps) => React.JSX.Element;
+export declare const Page: ({ breadcrumbs, title, children, headerContent, fullHeight, renderHeader, ...rest }: PageProps) => import("react/jsx-runtime").JSX.Element;
 export default Page;

package/dist/src/Layout/Page.js

@@ -1,10 +1,8 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from "../Box";
 import { Flex } from "../Flex";
 import Header from "./Header";
-export const Page = ({ breadcrumbs, title, children, headerContent, fullHeight, renderHeader, ...rest }) => (React.createElement(Flex, { flexDirection: "column", flexGrow: fullHeight ? 1 : 0, ...rest },
-    renderHeader
-        ? renderHeader()
-        : (breadcrumbs || title || headerContent) && (React.createElement(Header, { renderBreadcrumbs: () => breadcrumbs, title: title }, headerContent)),
-    React.createElement(Box, { p: "x3" }, children)));
+export const Page = ({ breadcrumbs, title, children, headerContent, fullHeight, renderHeader, ...rest }) => (_jsxs(Flex, { flexDirection: "column", flexGrow: fullHeight ? 1 : 0, ...rest, children: [renderHeader
+            ? renderHeader()
+            : (breadcrumbs || title || headerContent) && (_jsx(Header, { renderBreadcrumbs: () => breadcrumbs, title: title, children: headerContent })), _jsx(Box, { p: "x3", children: children })] }));
 export default Page;