@nulogy/components 16.0.0 → 16.0.2

package/dist/src/DropdownMenu/DropdownMenu.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useMemo } from "react";
 import propTypes from "@styled-system/prop-types";
 import { IconicButton } from "../Button";
@@ -12,25 +13,24 @@ const transformPropsToModifiers = ({ boundariesElement }) => ({
     ...DEFAULT_POPPER_MODIFIERS,
     boundariesElement,
 });
-const DropdownMenu = React.forwardRef(({ trigger = () => React.createElement(IconicButton, { icon: "more" }), children, showArrow = true, variant, disabled, defaultOpen, backgroundColor = "white", placement = "bottom-start", className, id, boundariesElement = "viewport", showDelay = "100", hideDelay = "200", openAriaLabel, closeAriaLabel, openOnHover = false, ...props }, ref) => {
+const DropdownMenu = React.forwardRef(({ trigger = () => _jsx(IconicButton, { icon: "more" }), children, showArrow = true, variant, disabled, defaultOpen, backgroundColor = "white", placement = "bottom-start", className, id, boundariesElement = "viewport", showDelay = "100", hideDelay = "200", openAriaLabel, closeAriaLabel, openOnHover = false, ...props }, ref) => {
     const spaceProps = getSubset(props, propTypes.space);
     const restProps = omitSubset(props, propTypes.space);
     const modifiers = useMemo(() => {
         return transformPropsToModifiers({ boundariesElement });
     }, [boundariesElement]);
     const componentVariant = useComponentVariant(variant);
-    return (React.createElement(Popper, { trigger: React.cloneElement(trigger(), {
+    return (_jsx(Popper, { trigger: React.cloneElement(trigger(), {
             type: "button",
             disabled: disabled ? true : null,
             "aria-haspopup": true,
             ...spaceProps,
-        }), showDelay: showDelay, hideDelay: hideDelay, popperPlacement: placement, defaultOpen: defaultOpen, showArrow: showArrow, openOnClick: !openOnHover, ref: ref, openOnHover: openOnHover, modifiers: modifiers, backgroundColor: backgroundColor, borderColor: backgroundColor, openAriaLabel: openAriaLabel, closeAriaLabel: closeAriaLabel },
-        React.createElement(DropdownMenuContainer, { className: className, id: id, backgroundColor: backgroundColor, showArrow: showArrow, ...restProps }, typeof children === "function"
-            ? children
-            : React.Children.map(children, (child) => {
-                if (React.isValidElement(child)) {
-                    return React.cloneElement(child, { size: componentVariant, ...child.props }, child.props.children);
-                }
-            }))));
+        }), showDelay: showDelay, hideDelay: hideDelay, popperPlacement: placement, defaultOpen: defaultOpen, showArrow: showArrow, openOnClick: !openOnHover, ref: ref, openOnHover: openOnHover, modifiers: modifiers, backgroundColor: backgroundColor, borderColor: backgroundColor, openAriaLabel: openAriaLabel, closeAriaLabel: closeAriaLabel, children: _jsx(DropdownMenuContainer, { className: className, id: id, backgroundColor: backgroundColor, showArrow: showArrow, ...restProps, children: typeof children === "function"
+                ? children
+                : React.Children.map(children, (child) => {
+                    if (React.isValidElement(child)) {
+                        return React.cloneElement(child, { size: componentVariant, ...child.props }, child.props.children);
+                    }
+                }) }) }));
 });
 export default DropdownMenu;

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

@@ -1,4 +1,3 @@
-import React from "react";
 declare const _default: {
     title: string;
     chromatic: {
@@ -7,53 +6,53 @@ declare const _default: {
 };
 export default _default;
 export declare const _DropdownMenu: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithCustomTrigger: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithCustomColors: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithButtonClosingMenu: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
-export declare const WithCustomLink: () => React.JSX.Element;
-export declare const WithCustomText: () => React.JSX.Element;
+export declare const WithCustomLink: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithCustomText: () => import("react/jsx-runtime").JSX.Element;
 export declare const SetToDefaultOpen: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithSubmenu: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
-export declare const WithVisitedLinks: () => React.JSX.Element;
+export declare const WithVisitedLinks: () => import("react/jsx-runtime").JSX.Element;
 export declare const SetToDisabled: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
-export declare const WithConditionallyRenderedMenuItems: () => React.JSX.Element;
+export declare const WithConditionallyRenderedMenuItems: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithRenderProps: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };

package/dist/src/DropdownMenu/DropdownMenu.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 { DropdownMenu, DropdownLink, DropdownButton, DropdownItem, DropdownText, Button, Flex, Text, Icon, } from "../index";
 const customColors = {
     color: "white",
@@ -11,75 +11,43 @@ export default {
         diffThreshold: 0.4,
     },
 };
-export const _DropdownMenu = () => (React.createElement(DropdownMenu, { openAriaLabel: "open dropdown", closeAriaLabel: "close dropdown" },
-    React.createElement(DropdownLink, { href: "/never_been" }, "Dropdown Link"),
-    React.createElement(DropdownButton, { onClick: () => { } }, "Dropdown Button")));
+export const _DropdownMenu = () => (_jsxs(DropdownMenu, { openAriaLabel: "open dropdown", closeAriaLabel: "close dropdown", children: [_jsx(DropdownLink, { href: "/never_been", children: "Dropdown Link" }), _jsx(DropdownButton, { onClick: () => { }, children: "Dropdown Button" })] }));
 _DropdownMenu.story = {
     name: "DropdownMenu",
 };
-export const WithCustomTrigger = () => (React.createElement(DropdownMenu, { openAriaLabel: "open dropdown", closeAriaLabel: "close dropdown", trigger: () => React.createElement(Button, null, "Custom Trigger") },
-    React.createElement(DropdownLink, { href: "/never_been" }, "Dropdown Link"),
-    React.createElement(DropdownButton, { onClick: () => { } }, "Dropdown Button")));
+export const WithCustomTrigger = () => (_jsxs(DropdownMenu, { openAriaLabel: "open dropdown", closeAriaLabel: "close dropdown", trigger: () => _jsx(Button, { children: "Custom Trigger" }), children: [_jsx(DropdownLink, { href: "/never_been", children: "Dropdown Link" }), _jsx(DropdownButton, { onClick: () => { }, children: "Dropdown Button" })] }));
 WithCustomTrigger.story = {
     name: "with custom trigger",
 };
-export const WithCustomColors = () => (React.createElement(DropdownMenu, { defaultOpen: true, backgroundColor: "blackBlue", openAriaLabel: "open dropdown", closeAriaLabel: "close dropdown" },
-    React.createElement(DropdownLink, { href: "/never_been", ...customColors }, "Dropdown Link"),
-    React.createElement(DropdownButton, { onClick: () => { }, ...customColors }, "Dropdown Button")));
+export const WithCustomColors = () => (_jsxs(DropdownMenu, { defaultOpen: true, backgroundColor: "blackBlue", openAriaLabel: "open dropdown", closeAriaLabel: "close dropdown", children: [_jsx(DropdownLink, { href: "/never_been", ...customColors, children: "Dropdown Link" }), _jsx(DropdownButton, { onClick: () => { }, ...customColors, children: "Dropdown Button" })] }));
 WithCustomColors.story = {
     name: "with custom colors",
 };
-export const WithButtonClosingMenu = () => (React.createElement(DropdownMenu, { openAriaLabel: "open dropdown", closeAriaLabel: "close dropdown" }, ({ closeMenu }) => React.createElement(DropdownButton, { onClick: closeMenu }, "Dropdown Button")));
+export const WithButtonClosingMenu = () => (_jsx(DropdownMenu, { openAriaLabel: "open dropdown", closeAriaLabel: "close dropdown", children: ({ closeMenu }) => _jsx(DropdownButton, { onClick: closeMenu, children: "Dropdown Button" }) }));
 WithButtonClosingMenu.story = {
     name: "with button closing menu",
 };
-export const WithCustomLink = () => (React.createElement(DropdownMenu, { defaultOpen: true, openAriaLabel: "open dropdown", closeAriaLabel: "close dropdown" },
-    React.createElement(DropdownItem, null,
-        React.createElement("a", { href: "/never_been" }, "Custom Link Component"))));
-export const WithCustomText = () => (React.createElement(DropdownMenu, { defaultOpen: true },
-    React.createElement(DropdownText, null, "Custom Text")));
-export const SetToDefaultOpen = () => (React.createElement(DropdownMenu, { defaultOpen: true, openAriaLabel: "open dropdown", closeAriaLabel: "close dropdown" },
-    React.createElement(DropdownLink, { href: "/never_been" }, "Dropdown Link"),
-    React.createElement(DropdownButton, { onClick: () => { } }, "Dropdown Button"),
-    React.createElement(DropdownItem, null,
-        React.createElement("a", { href: "/never_been", style: { textDecoration: "none" } }, "Custom Link Component")),
-    React.createElement(DropdownText, null, "Custom Text")));
+export const WithCustomLink = () => (_jsx(DropdownMenu, { defaultOpen: true, openAriaLabel: "open dropdown", closeAriaLabel: "close dropdown", children: _jsx(DropdownItem, { children: _jsx("a", { href: "/never_been", children: "Custom Link Component" }) }) }));
+export const WithCustomText = () => (_jsx(DropdownMenu, { defaultOpen: true, children: _jsx(DropdownText, { children: "Custom Text" }) }));
+export const SetToDefaultOpen = () => (_jsxs(DropdownMenu, { defaultOpen: true, openAriaLabel: "open dropdown", closeAriaLabel: "close dropdown", children: [_jsx(DropdownLink, { href: "/never_been", children: "Dropdown Link" }), _jsx(DropdownButton, { onClick: () => { }, children: "Dropdown Button" }), _jsx(DropdownItem, { children: _jsx("a", { href: "/never_been", style: { textDecoration: "none" }, children: "Custom Link Component" }) }), _jsx(DropdownText, { children: "Custom Text" })] }));
 SetToDefaultOpen.story = {
     name: "set to defaultOpen",
 };
-export const WithSubmenu = () => (React.createElement(DropdownMenu, { openAriaLabel: "open dropdown", closeAriaLabel: "close dropdown" },
-    React.createElement(DropdownLink, { href: "/never_been" }, "Dropdown Link"),
-    React.createElement(DropdownButton, { onClick: () => { } }, "Dropdown Button"),
-    React.createElement(DropdownMenu, { trigger: () => (React.createElement(DropdownButton, null,
-            React.createElement(Flex, { justifyContent: "space-between" },
-                React.createElement(Text, null, "Submenu"),
-                React.createElement(Icon, { icon: "rightArrow", title: "right arrow" })))), placement: "left-start", showArrow: false, openOnHover: true, openAriaLabel: "open sub dropdown", closeAriaLabel: "close sub dropdown" },
-        React.createElement(DropdownButton, { onClick: () => { } }, "Inner Dropdown Button"),
-        React.createElement(DropdownText, null, " Inner Custom Text"))));
+export const WithSubmenu = () => (_jsxs(DropdownMenu, { openAriaLabel: "open dropdown", closeAriaLabel: "close dropdown", children: [_jsx(DropdownLink, { href: "/never_been", children: "Dropdown Link" }), _jsx(DropdownButton, { onClick: () => { }, children: "Dropdown Button" }), _jsxs(DropdownMenu, { trigger: () => (_jsx(DropdownButton, { children: _jsxs(Flex, { justifyContent: "space-between", children: [_jsx(Text, { children: "Submenu" }), _jsx(Icon, { icon: "rightArrow", title: "right arrow" })] }) })), placement: "left-start", showArrow: false, openOnHover: true, openAriaLabel: "open sub dropdown", closeAriaLabel: "close sub dropdown", children: [_jsx(DropdownButton, { onClick: () => { }, children: "Inner Dropdown Button" }), _jsx(DropdownText, { children: " Inner Custom Text" })] })] }));
 WithSubmenu.story = {
     name: "with submenu",
 };
-export const WithVisitedLinks = () => (React.createElement(DropdownMenu, { defaultOpen: true, openAriaLabel: "open dropdown", closeAriaLabel: "close dropdown" },
-    React.createElement(DropdownLink, { href: "/" }, "Dropdown Link"),
-    React.createElement(DropdownItem, null,
-        React.createElement("a", { href: "/", style: { textDecoration: "none" } }, "Custom Link Component"))));
-export const SetToDisabled = () => (React.createElement(DropdownMenu, { disabled: true, openAriaLabel: "open dropdown", closeAriaLabel: "close dropdown" },
-    React.createElement(DropdownLink, { href: "/never_been" }, "Dropdown Link"),
-    React.createElement(DropdownButton, { onClick: () => { } }, "Dropdown Button")));
+export const WithVisitedLinks = () => (_jsxs(DropdownMenu, { defaultOpen: true, openAriaLabel: "open dropdown", closeAriaLabel: "close dropdown", children: [_jsx(DropdownLink, { href: "/", children: "Dropdown Link" }), _jsx(DropdownItem, { children: _jsx("a", { href: "/", style: { textDecoration: "none" }, children: "Custom Link Component" }) })] }));
+export const SetToDisabled = () => (_jsxs(DropdownMenu, { disabled: true, openAriaLabel: "open dropdown", closeAriaLabel: "close dropdown", children: [_jsx(DropdownLink, { href: "/never_been", children: "Dropdown Link" }), _jsx(DropdownButton, { onClick: () => { }, children: "Dropdown Button" })] }));
 SetToDisabled.story = {
     name: "Set to disabled",
 };
 export const WithConditionallyRenderedMenuItems = () => {
     const showItemB = false;
     const showItemC = true;
-    return (React.createElement(DropdownMenu, null,
-        React.createElement(DropdownButton, { onClick: () => { } }, "Item A"),
-        showItemB && React.createElement(DropdownButton, { onClick: () => { } }, "Conditional Item B"),
-        showItemC && React.createElement(DropdownButton, { onClick: () => { } }, "Conditional Item C")));
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownButton, { onClick: () => { }, children: "Item A" }), showItemB && _jsx(DropdownButton, { onClick: () => { }, children: "Conditional Item B" }), showItemC && _jsx(DropdownButton, { onClick: () => { }, children: "Conditional Item C" })] }));
 };
-export const WithRenderProps = () => (React.createElement(DropdownMenu, null, ({ closeMenu, openMenu }) => (React.createElement(React.Fragment, null,
-    React.createElement(DropdownButton, { onClick: (e) => closeMenu(e) }, "Close menu"),
-    React.createElement(DropdownButton, { onClick: (e) => openMenu(e) }, "Open menu")))));
+export const WithRenderProps = () => (_jsx(DropdownMenu, { children: ({ closeMenu, openMenu }) => (_jsxs(_Fragment, { children: [_jsx(DropdownButton, { onClick: (e) => closeMenu(e), children: "Close menu" }), _jsx(DropdownButton, { onClick: (e) => openMenu(e), children: "Open menu" })] })) }));
 WithRenderProps.story = {
     name: "With render props",
 };

package/dist/src/DropdownMenu/DropdownMenuContainer.d.ts

@@ -7,5 +7,5 @@ type DropdownMenuContainerProps = {
     dataPlacement?: any;
     theme?: DefaultNDSThemeType;
 };
-declare const DropdownMenuContainer: React.FC<React.PropsWithChildren<DropdownMenuContainerProps>>;
+declare const DropdownMenuContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("../Box").BoxProps> & import("../Box").BoxProps, DropdownMenuContainerProps>> & string;
 export default DropdownMenuContainer;

package/dist/src/DropdownMenu/DropdownText.d.ts

@@ -1,12 +1,12 @@
 import type { TextProps } from "../Type";
-declare const DropdownText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "textTransform" | "disabled" | keyof import("react").HTMLAttributes<HTMLParagraphElement> | "inline" | "compact" | keyof import("../StyledProps").StyledProps> & import("react").HTMLAttributes<HTMLParagraphElement> & {
+declare const DropdownText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "textTransform" | keyof import("react").HTMLAttributes<HTMLParagraphElement> | "disabled" | "inline" | "compact" | keyof import("..").StyledProps> & import("react").HTMLAttributes<HTMLParagraphElement> & {
     variant?: import("../NDSProvider/ComponentVariantContext").ComponentVariant;
     inline?: boolean;
     compact?: boolean;
     disabled?: boolean;
     textTransform?: "none" | "inherit" | "initial" | "-moz-initial" | "revert" | "unset" | "capitalize" | "full-size-kana" | "full-width" | "lowercase" | "uppercase" | undefined;
     fontSize?: string;
-} & import("../StyledProps").StyledProps, "ref"> & {
+} & import("..").StyledProps, "ref"> & {
     ref?: import("react").Ref<HTMLParagraphElement>;
 }, TextProps>> & string;
 export default DropdownText;

package/dist/src/FieldLabel/FieldLabel.d.ts

@@ -1,3 +1,2 @@
-import React from "react";
 import { FieldLabelProps } from "./FieldLabel.type";
-export default function FieldLabel({ labelText, requirementText, helpText, hint, children, ...props }: FieldLabelProps): React.JSX.Element;
+export default function FieldLabel({ labelText, requirementText, helpText, hint, children, ...props }: FieldLabelProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/FieldLabel/FieldLabel.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from "../Box";
 import { InlineIcon } from "../Icon";
 import { Tooltip } from "../Tooltip";
@@ -7,13 +7,5 @@ import Label from "./Label";
 import RequirementText from "./RequirementText";
 import { LabelContent, LabelText } from "./LabelText";
 export default function FieldLabel({ labelText, requirementText, helpText, hint, children, ...props }) {
-    return (React.createElement(Label, { display: "block", ...props },
-        React.createElement(Box, { mb: children && "x1", "data-testid": "field-label" },
-            React.createElement(LabelContent, { "data-testid": "label-content" },
-                React.createElement(LabelText, { "data-testid": "label-text" }, labelText),
-                requirementText && (React.createElement(RequirementText, { "data-testid": "requirement-text", ml: "none" }, requirementText)),
-                hint && (React.createElement(Tooltip, { tooltip: hint },
-                    React.createElement(InlineIcon, { color: "darkGrey", size: "x2", icon: "info" })))),
-            helpText && React.createElement(HelpText, { "data-testid": "help-text" }, helpText)),
-        children));
+    return (_jsxs(Label, { display: "block", ...props, children: [_jsxs(Box, { mb: children && "x1", "data-testid": "field-label", children: [_jsxs(LabelContent, { "data-testid": "label-content", children: [_jsx(LabelText, { "data-testid": "label-text", children: labelText }), requirementText && (_jsx(RequirementText, { "data-testid": "requirement-text", ml: "none", children: requirementText })), hint && (_jsx(Tooltip, { tooltip: hint, children: _jsx(InlineIcon, { color: "darkGrey", size: "x2", icon: "info" }) }))] }), helpText && _jsx(HelpText, { "data-testid": "help-text", children: helpText })] }), children] }));
 }

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

@@ -1,17 +1,16 @@
-import React from "react";
 declare const _default: {
     title: string;
 };
 export default _default;
 export declare const _FieldLabel: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
-export declare const WithHelpText: () => React.JSX.Element;
-export declare const WithRequirementText: () => React.JSX.Element;
-export declare const WithAllAdditionalText: () => React.JSX.Element;
-export declare const WithAssociatedCustomInputComponent: () => React.JSX.Element;
-export declare const WithHint: () => React.JSX.Element;
-export declare const WithRangeOfInputComponents: () => React.JSX.Element;
+export declare const WithHelpText: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithRequirementText: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithAllAdditionalText: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithAssociatedCustomInputComponent: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithHint: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithRangeOfInputComponents: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/FieldLabel/FieldLabel.story.js

@@ -1,40 +1,20 @@
-import React from "react";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { FieldLabel, Input, Select, Toggle, RadioGroup, Radio, Flex } from "../index";
 import { Link } from "../Link";
-const helpTextWithLink = (React.createElement(React.Fragment, null,
-    "I am help text. I can be a string or a node that includes a ",
-    React.createElement(Link, { href: "http://nulogy.design" }, "link"),
-    "."));
+const helpTextWithLink = (_jsxs(_Fragment, { children: ["I am help text. I can be a string or a node that includes a ", _jsx(Link, { href: "http://nulogy.design", children: "link" }), "."] }));
 export default {
     title: "Components/FieldLabel",
 };
-export const _FieldLabel = () => React.createElement(FieldLabel, { labelText: "Default label" });
+export const _FieldLabel = () => _jsx(FieldLabel, { labelText: "Default label" });
 _FieldLabel.story = {
     name: "FieldLabel",
 };
-export const WithHelpText = () => React.createElement(FieldLabel, { labelText: "Default label", helpText: helpTextWithLink });
-export const WithRequirementText = () => React.createElement(FieldLabel, { labelText: "Default label", requirementText: "(Required)" });
-export const WithAllAdditionalText = () => (React.createElement(FieldLabel, { labelText: "Default label", helpText: "I am help text. I can give more details on the input below!", requirementText: "(Required)" }));
-export const WithAssociatedCustomInputComponent = () => (React.createElement(FieldLabel, { labelText: "Default label", helpText: "I am help text. I can give more details on the input below!", requirementText: "(Required)", htmlFor: "input-1" },
-    React.createElement(Input, { id: "input-1" })));
-export const WithHint = () => (React.createElement(FieldLabel, { labelText: "Default label", helpText: "I am help text. I can give more details on the input below!", requirementText: "(Required)", hint: "This is a hint for the input field" },
-    React.createElement(Input, null)));
-export const WithRangeOfInputComponents = () => (React.createElement(Flex, { gap: "x3", p: "x3", borderStyle: "dotted", borderWidth: "1px", borderColor: "lime" },
-    React.createElement(FieldLabel, { labelText: "Label with HelpText that is required", helpText: "I am help text. I can give more details on the input below!", requirementText: "(Required)" },
-        React.createElement(Input, null)),
-    React.createElement(FieldLabel, { labelText: "Label with HelpText that is required", helpText: "I am help text. I can give more details on the input below!", hint: "This is a hint for the input field" },
-        React.createElement(Input, null)),
-    React.createElement(FieldLabel, { labelText: "Label with hint", hint: "This is a hint for the input field" },
-        React.createElement(Input, null)),
-    React.createElement(FieldLabel, { labelText: "Label with hint", requirementText: "(Required)" },
-        React.createElement(Select, { options: [
-                { value: 1, label: "This is the first option" },
-                { value: 2, label: "This is 2nd option" },
-            ] })),
-    React.createElement(FieldLabel, { labelText: "Label with hint", hint: "This is a hint for the input field", requirementText: "(Required)" },
-        React.createElement(Toggle, { onText: "on", offText: "off", toggled: true })),
-    React.createElement(FieldLabel, { labelText: "Label with hint", hint: "This is a hint for the input field", requirementText: "(Required)" },
-        React.createElement(RadioGroup, { 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 WithHelpText = () => _jsx(FieldLabel, { labelText: "Default label", helpText: helpTextWithLink });
+export const WithRequirementText = () => _jsx(FieldLabel, { labelText: "Default label", requirementText: "(Required)" });
+export const WithAllAdditionalText = () => (_jsx(FieldLabel, { labelText: "Default label", helpText: "I am help text. I can give more details on the input below!", requirementText: "(Required)" }));
+export const WithAssociatedCustomInputComponent = () => (_jsx(FieldLabel, { labelText: "Default label", helpText: "I am help text. I can give more details on the input below!", requirementText: "(Required)", htmlFor: "input-1", children: _jsx(Input, { id: "input-1" }) }));
+export const WithHint = () => (_jsx(FieldLabel, { labelText: "Default label", helpText: "I am help text. I can give more details on the input below!", requirementText: "(Required)", hint: "This is a hint for the input field", children: _jsx(Input, {}) }));
+export const WithRangeOfInputComponents = () => (_jsxs(Flex, { gap: "x3", p: "x3", borderStyle: "dotted", borderWidth: "1px", borderColor: "lime", children: [_jsx(FieldLabel, { labelText: "Label with HelpText that is required", helpText: "I am help text. I can give more details on the input below!", requirementText: "(Required)", children: _jsx(Input, {}) }), _jsx(FieldLabel, { labelText: "Label with HelpText that is required", helpText: "I am help text. I can give more details on the input below!", hint: "This is a hint for the input field", children: _jsx(Input, {}) }), _jsx(FieldLabel, { labelText: "Label with hint", hint: "This is a hint for the input field", children: _jsx(Input, {}) }), _jsx(FieldLabel, { labelText: "Label with hint", requirementText: "(Required)", children: _jsx(Select, { options: [
+                    { value: 1, label: "This is the first option" },
+                    { value: 2, label: "This is 2nd option" },
+                ] }) }), _jsx(FieldLabel, { labelText: "Label with hint", hint: "This is a hint for the input field", requirementText: "(Required)", children: _jsx(Toggle, { onText: "on", offText: "off", toggled: true }) }), _jsx(FieldLabel, { labelText: "Label with hint", hint: "This is a hint for the input field", requirementText: "(Required)", children: _jsxs(RadioGroup, { name: "settingSelection", 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/FieldLabel/HelpText.d.ts

@@ -1,4 +1,4 @@
-declare const HelpText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "textTransform" | "disabled" | keyof import("react").HTMLAttributes<HTMLParagraphElement> | "inline" | "compact" | keyof import("..").StyledProps> & import("react").HTMLAttributes<HTMLParagraphElement> & {
+declare const HelpText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "textTransform" | keyof import("react").HTMLAttributes<HTMLParagraphElement> | "disabled" | "inline" | "compact" | keyof import("..").StyledProps> & import("react").HTMLAttributes<HTMLParagraphElement> & {
     variant?: import("../NDSProvider/ComponentVariantContext").ComponentVariant;
     inline?: boolean;
     compact?: boolean;

package/dist/src/FieldLabel/MaybeFieldLabel.d.ts

@@ -1,7 +1,6 @@
-import React from "react";
 import type { FieldLabelProps } from "./FieldLabel.type";
 interface Props extends Omit<FieldLabelProps, "id"> {
     labelText: string | undefined;
 }
-declare const MaybeFieldLabel: ({ labelText, children, ...props }: Props) => React.JSX.Element;
+declare const MaybeFieldLabel: ({ labelText, children, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
 export default MaybeFieldLabel;

package/dist/src/FieldLabel/MaybeFieldLabel.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import FieldLabel from "./FieldLabel";
-const MaybeFieldLabel = ({ labelText, children, ...props }) => labelText ? (React.createElement(FieldLabel, { labelText: labelText, ...props }, children)) : (React.createElement(React.Fragment, null, children));
+const MaybeFieldLabel = ({ labelText, children, ...props }) => labelText ? (_jsx(FieldLabel, { labelText: labelText, ...props, children: children })) : (_jsx(_Fragment, { children: children }));
 export default MaybeFieldLabel;

package/dist/src/FieldLabel/RequirementText.d.ts

@@ -1,4 +1,3 @@
-import React from "react";
 import { TextProps } from "../Type/Text";
-declare const RequirementText: (props: TextProps) => React.JSX.Element;
+declare const RequirementText: (props: TextProps) => import("react/jsx-runtime").JSX.Element;
 export default RequirementText;

package/dist/src/FieldLabel/RequirementText.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Text } from "../Type";
-const RequirementText = (props) => React.createElement(Text, { inline: true, ml: "x1", fontSize: "smaller", color: "darkGrey", ...props });
+const RequirementText = (props) => _jsx(Text, { inline: true, ml: "x1", fontSize: "smaller", color: "darkGrey", ...props });
 export default RequirementText;

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

@@ -1,107 +1,106 @@
-import React from "react";
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const _Flex: () => React.JSX.Element;
+export declare const _Flex: () => import("react/jsx-runtime").JSX.Element;
 export declare const FlexDirectionSetToRowReverse: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const FlexDirectionSetToColumn: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const FlexDirectionSetToColumnReverse: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const FlexWrapSetToNoWrapDefault: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const FlexWrapSetToWrap: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const FlexWrapSetToWrapReverse: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const JustifyContentSetToFlexStartDefault: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const JustifyContentSetToFlexEnd: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const JustifyContentSetToCenter: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const JustifyContentSetToSpaceBetween: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const JustifyContentSetToSpaceAround: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const JustifyContentSetToSpaceEvenly: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const AlignItemsSetToStretchDefault: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const AlignItemsSetToFlexStart: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const AlignItemsSetToCenter: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const AlignItemsSetToFlexEnd: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithCustomOrder: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };