@nulogy/components 16.0.0 → 16.0.1

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/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;
     };

package/dist/src/Flex/Flex.story.js

@@ -1,9 +1,9 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Flex as NDSFlex } from "../index";
 import { styled } from "styled-components";
-const Flex = ({ children, ...props }) => (React.createElement(NDSFlex, { padding: "x3", bg: "whiteGrey", minHeight: "400px", style: {
+const Flex = ({ children, ...props }) => (_jsx(NDSFlex, { padding: "x3", bg: "whiteGrey", minHeight: "400px", style: {
         boxSizing: "content-box",
-    }, ...props }, children));
+    }, ...props, children: children }));
 const StyledBox = styled(Box)(({ theme }) => ({
     padding: theme.space.x6,
     background: theme.colors.grey,
@@ -12,175 +12,76 @@ const StyledBox = styled(Box)(({ theme }) => ({
 export default {
     title: "Components/Flex",
 };
-export const _Flex = () => (React.createElement(Flex, { style: {
+export const _Flex = () => (_jsxs(Flex, { style: {
         boxSizing: "content-box",
-    }, padding: "x3", bg: "whiteGrey" },
-    React.createElement(StyledBox, null, "1"),
-    React.createElement(StyledBox, null, "2"),
-    React.createElement(StyledBox, null, "3"),
-    React.createElement(StyledBox, null, "4"),
-    React.createElement(StyledBox, null, "5")));
-export const FlexDirectionSetToRowReverse = () => (React.createElement(Flex, { style: {
+    }, padding: "x3", bg: "whiteGrey", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" })] }));
+export const FlexDirectionSetToRowReverse = () => (_jsxs(Flex, { style: {
         boxSizing: "content-box",
-    }, flexDirection: "row-reverse", padding: "x3", bg: "whiteGrey" },
-    React.createElement(StyledBox, null, "1"),
-    React.createElement(StyledBox, null, "2"),
-    React.createElement(StyledBox, null, "3"),
-    React.createElement(StyledBox, null, "4"),
-    React.createElement(StyledBox, null, "5")));
+    }, flexDirection: "row-reverse", padding: "x3", bg: "whiteGrey", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" })] }));
 FlexDirectionSetToRowReverse.story = {
     name: "flexDirection set to row-reverse",
 };
-export const FlexDirectionSetToColumn = () => (React.createElement(Flex, { flexDirection: "column" },
-    React.createElement(StyledBox, null, "1"),
-    React.createElement(StyledBox, null, "2"),
-    React.createElement(StyledBox, null, "3"),
-    React.createElement(StyledBox, null, "4"),
-    React.createElement(StyledBox, null, "5")));
+export const FlexDirectionSetToColumn = () => (_jsxs(Flex, { flexDirection: "column", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" })] }));
 FlexDirectionSetToColumn.story = {
     name: "flexDirection set to column",
 };
-export const FlexDirectionSetToColumnReverse = () => (React.createElement(Flex, { flexDirection: "column-reverse" },
-    React.createElement(StyledBox, null, "1"),
-    React.createElement(StyledBox, null, "2"),
-    React.createElement(StyledBox, null, "3"),
-    React.createElement(StyledBox, null, "4"),
-    React.createElement(StyledBox, null, "5")));
+export const FlexDirectionSetToColumnReverse = () => (_jsxs(Flex, { flexDirection: "column-reverse", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" })] }));
 FlexDirectionSetToColumnReverse.story = {
     name: "flexDirection set to column-reverse",
 };
-export const FlexWrapSetToNoWrapDefault = () => (React.createElement(Box, { width: 500 },
-    React.createElement(Flex, { flexWrap: "nowrap" },
-        React.createElement(StyledBox, null, "1"),
-        React.createElement(StyledBox, null, "2"),
-        React.createElement(StyledBox, null, "3"),
-        React.createElement(StyledBox, null, "4"),
-        React.createElement(StyledBox, null, "5"),
-        React.createElement(StyledBox, null, "6"),
-        React.createElement(StyledBox, null, "7"))));
+export const FlexWrapSetToNoWrapDefault = () => (_jsx(Box, { width: 500, children: _jsxs(Flex, { flexWrap: "nowrap", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" }), _jsx(StyledBox, { children: "6" }), _jsx(StyledBox, { children: "7" })] }) }));
 FlexWrapSetToNoWrapDefault.story = {
     name: "flexWrap set to no-wrap (default)",
 };
-export const FlexWrapSetToWrap = () => (React.createElement(Box, { width: 500 },
-    React.createElement(Flex, { flexWrap: "wrap" },
-        React.createElement(StyledBox, null, "1"),
-        React.createElement(StyledBox, null, "2"),
-        React.createElement(StyledBox, null, "3"),
-        React.createElement(StyledBox, null, "4"),
-        React.createElement(StyledBox, null, "5"),
-        React.createElement(StyledBox, null, "6"),
-        React.createElement(StyledBox, null, "7"))));
+export const FlexWrapSetToWrap = () => (_jsx(Box, { width: 500, children: _jsxs(Flex, { flexWrap: "wrap", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" }), _jsx(StyledBox, { children: "6" }), _jsx(StyledBox, { children: "7" })] }) }));
 FlexWrapSetToWrap.story = {
     name: "flexWrap set to wrap",
 };
-export const FlexWrapSetToWrapReverse = () => (React.createElement(Box, { width: 500 },
-    React.createElement(Flex, { flexWrap: "wrap-reverse" },
-        React.createElement(StyledBox, null, "1"),
-        React.createElement(StyledBox, null, "2"),
-        React.createElement(StyledBox, null, "3"),
-        React.createElement(StyledBox, null, "4"),
-        React.createElement(StyledBox, null, "5"),
-        React.createElement(StyledBox, null, "6"),
-        React.createElement(StyledBox, null, "7"))));
+export const FlexWrapSetToWrapReverse = () => (_jsx(Box, { width: 500, children: _jsxs(Flex, { flexWrap: "wrap-reverse", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" }), _jsx(StyledBox, { children: "6" }), _jsx(StyledBox, { children: "7" })] }) }));
 FlexWrapSetToWrapReverse.story = {
     name: "flexWrap set to wrap-reverse",
 };
-export const JustifyContentSetToFlexStartDefault = () => (React.createElement(Flex, { justifyContent: "flex-start" },
-    React.createElement(StyledBox, null, "1"),
-    React.createElement(StyledBox, null, "2"),
-    React.createElement(StyledBox, null, "3"),
-    React.createElement(StyledBox, null, "4"),
-    React.createElement(StyledBox, null, "5")));
+export const JustifyContentSetToFlexStartDefault = () => (_jsxs(Flex, { justifyContent: "flex-start", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" })] }));
 JustifyContentSetToFlexStartDefault.story = {
     name: "justifyContent set to flex-start (default)",
 };
-export const JustifyContentSetToFlexEnd = () => (React.createElement(Flex, { justifyContent: "flex-end" },
-    React.createElement(StyledBox, null, "1"),
-    React.createElement(StyledBox, null, "2"),
-    React.createElement(StyledBox, null, "3"),
-    React.createElement(StyledBox, null, "4"),
-    React.createElement(StyledBox, null, "5")));
+export const JustifyContentSetToFlexEnd = () => (_jsxs(Flex, { justifyContent: "flex-end", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" })] }));
 JustifyContentSetToFlexEnd.story = {
     name: "justifyContent set to flex-end",
 };
-export const JustifyContentSetToCenter = () => (React.createElement(Flex, { justifyContent: "center" },
-    React.createElement(StyledBox, null, "1"),
-    React.createElement(StyledBox, null, "2"),
-    React.createElement(StyledBox, null, "3"),
-    React.createElement(StyledBox, null, "4"),
-    React.createElement(StyledBox, null, "5")));
+export const JustifyContentSetToCenter = () => (_jsxs(Flex, { justifyContent: "center", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" })] }));
 JustifyContentSetToCenter.story = {
     name: "justifyContent set to center",
 };
-export const JustifyContentSetToSpaceBetween = () => (React.createElement(Flex, { justifyContent: "space-between" },
-    React.createElement(StyledBox, null, "1"),
-    React.createElement(StyledBox, null, "2"),
-    React.createElement(StyledBox, null, "3"),
-    React.createElement(StyledBox, null, "4"),
-    React.createElement(StyledBox, null, "5")));
+export const JustifyContentSetToSpaceBetween = () => (_jsxs(Flex, { justifyContent: "space-between", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" })] }));
 JustifyContentSetToSpaceBetween.story = {
     name: "justifyContent set to space-between",
 };
-export const JustifyContentSetToSpaceAround = () => (React.createElement(Flex, { justifyContent: "space-around" },
-    React.createElement(StyledBox, null, "1"),
-    React.createElement(StyledBox, null, "2"),
-    React.createElement(StyledBox, null, "3"),
-    React.createElement(StyledBox, null, "4"),
-    React.createElement(StyledBox, null, "5")));
+export const JustifyContentSetToSpaceAround = () => (_jsxs(Flex, { justifyContent: "space-around", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" })] }));
 JustifyContentSetToSpaceAround.story = {
     name: "justifyContent set to space-around",
 };
-export const JustifyContentSetToSpaceEvenly = () => (React.createElement(Flex, { justifyContent: "space-evenly" },
-    React.createElement(StyledBox, null, "1"),
-    React.createElement(StyledBox, null, "2"),
-    React.createElement(StyledBox, null, "3"),
-    React.createElement(StyledBox, null, "4"),
-    React.createElement(StyledBox, null, "5")));
+export const JustifyContentSetToSpaceEvenly = () => (_jsxs(Flex, { justifyContent: "space-evenly", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" })] }));
 JustifyContentSetToSpaceEvenly.story = {
     name: "justifyContent set to space-evenly",
 };
-export const AlignItemsSetToStretchDefault = () => (React.createElement(Flex, { alignItems: "stretch" },
-    React.createElement(StyledBox, null, "1"),
-    React.createElement(StyledBox, null, "2"),
-    React.createElement(StyledBox, null, "3"),
-    React.createElement(StyledBox, null, "4"),
-    React.createElement(StyledBox, null, "5")));
+export const AlignItemsSetToStretchDefault = () => (_jsxs(Flex, { alignItems: "stretch", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" })] }));
 AlignItemsSetToStretchDefault.story = {
     name: "alignItems set to stretch (default)",
 };
-export const AlignItemsSetToFlexStart = () => (React.createElement(Flex, { alignItems: "flex-start" },
-    React.createElement(StyledBox, null, "1"),
-    React.createElement(StyledBox, null, "2"),
-    React.createElement(StyledBox, null, "3"),
-    React.createElement(StyledBox, null, "4"),
-    React.createElement(StyledBox, null, "5")));
+export const AlignItemsSetToFlexStart = () => (_jsxs(Flex, { alignItems: "flex-start", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" })] }));
 AlignItemsSetToFlexStart.story = {
     name: "alignItems set to flex-start",
 };
-export const AlignItemsSetToCenter = () => (React.createElement(Flex, { alignItems: "center" },
-    React.createElement(StyledBox, null, "1"),
-    React.createElement(StyledBox, null, "2"),
-    React.createElement(StyledBox, null, "3"),
-    React.createElement(StyledBox, null, "4"),
-    React.createElement(StyledBox, null, "5")));
+export const AlignItemsSetToCenter = () => (_jsxs(Flex, { alignItems: "center", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" })] }));
 AlignItemsSetToCenter.story = {
     name: "alignItems set to center",
 };
-export const AlignItemsSetToFlexEnd = () => (React.createElement(Flex, { alignItems: "flex-end" },
-    React.createElement(StyledBox, null, "1"),
-    React.createElement(StyledBox, null, "2"),
-    React.createElement(StyledBox, null, "3"),
-    React.createElement(StyledBox, null, "4"),
-    React.createElement(StyledBox, null, "5")));
+export const AlignItemsSetToFlexEnd = () => (_jsxs(Flex, { alignItems: "flex-end", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" })] }));
 AlignItemsSetToFlexEnd.story = {
     name: "alignItems set to flex-end",
 };
-export const WithCustomOrder = () => (React.createElement(Flex, null,
-    React.createElement(StyledBox, { order: 1 }, "1"),
-    React.createElement(StyledBox, { order: 3 }, "2"),
-    React.createElement(StyledBox, { order: 2 }, "3"),
-    React.createElement(StyledBox, { order: 5 }, "4"),
-    React.createElement(StyledBox, { order: 4 }, "5")));
+export const WithCustomOrder = () => (_jsxs(Flex, { children: [_jsx(StyledBox, { order: 1, children: "1" }), _jsx(StyledBox, { order: 3, children: "2" }), _jsx(StyledBox, { order: 2, children: "3" }), _jsx(StyledBox, { order: 5, children: "4" }), _jsx(StyledBox, { order: 4, children: "5" })] }));
 WithCustomOrder.story = {
     name: "With custom order",
 };

package/dist/src/Form/Form.d.ts

@@ -4,5 +4,5 @@ interface FormProps extends SpaceProps, React.HTMLProps<HTMLFormElement> {
 }
 declare const Form: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<FormProps, "ref"> & {
     ref?: React.Ref<HTMLFormElement>;
-}, never>> & string & Omit<({ title, children, ...props }: FormProps) => React.JSX.Element, keyof React.Component<any, {}, any>>;
+}, never>> & string & Omit<({ title, children, ...props }: FormProps) => import("react/jsx-runtime").JSX.Element, keyof React.Component<any, {}, any>>;
 export default Form;

package/dist/src/Form/Form.js

@@ -1,4 +1,4 @@
-import * as React from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { styled } from "styled-components";
 import { space } from "styled-system";
 import { Heading2 } from "../Type";
@@ -27,7 +27,5 @@ const FormStyles = ({ title, theme }) => ({
         },
     },
 });
-const Form = styled(({ title, children, ...props }) => (React.createElement("form", { ...props },
-    title && React.createElement(Heading2, null, title),
-    children)))(space, FormStyles);
+const Form = styled(({ title, children, ...props }) => (_jsxs("form", { ...props, children: [title && _jsx(Heading2, { children: title }), children] })))(space, FormStyles);
 export default Form;

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

@@ -1,31 +1,30 @@
-import React from "react";
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const _Form: () => React.JSX.Element;
+export declare const _Form: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithoutTitle: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithFormSections: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithFormSectionsWithoutTitles: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const DemoForm: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
-export declare const WithAnAction: () => React.JSX.Element;
+export declare const WithAnAction: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/Form/Form.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 { Alert, Input, Form, FormSection, Checkbox, CheckboxGroup, Radio, RadioGroup, Toggle, List, ListItem, Select, Text, Button, } from "../index";
 const options = [
     { value: "planned", label: "Planned" },
@@ -7,71 +7,20 @@ const options = [
 export default {
     title: "Components/Form",
 };
-export const _Form = () => (React.createElement(Form, { title: "New Profile" },
-    React.createElement(Input, { id: "name", labelText: "Name" }),
-    React.createElement(Input, { id: "birthdate", placeholder: "DD-MM-YYYY", labelText: "Date of birth", requirementText: "(Optional)", helpText: "Enter a date below" }),
-    React.createElement(Input, { id: "birthplace", labelText: "Place of birth", requirementText: "(Optional)" })));
-export const WithoutTitle = () => (React.createElement(Form, null,
-    React.createElement(Input, { id: "name", labelText: "Name" }),
-    React.createElement(Input, { id: "birthdate", placeholder: "DD-MM-YYYY", labelText: "Date of birth", requirementText: "(Optional)", helpText: "Enter a date below" }),
-    React.createElement(Input, { id: "birthplace", labelText: "Place of birth", requirementText: "(Optional)" })));
+export const _Form = () => (_jsxs(Form, { title: "New Profile", children: [_jsx(Input, { id: "name", labelText: "Name" }), _jsx(Input, { id: "birthdate", placeholder: "DD-MM-YYYY", labelText: "Date of birth", requirementText: "(Optional)", helpText: "Enter a date below" }), _jsx(Input, { id: "birthplace", labelText: "Place of birth", requirementText: "(Optional)" })] }));
+export const WithoutTitle = () => (_jsxs(Form, { children: [_jsx(Input, { id: "name", labelText: "Name" }), _jsx(Input, { id: "birthdate", placeholder: "DD-MM-YYYY", labelText: "Date of birth", requirementText: "(Optional)", helpText: "Enter a date below" }), _jsx(Input, { id: "birthplace", labelText: "Place of birth", requirementText: "(Optional)" })] }));
 WithoutTitle.story = {
     name: "Without title",
 };
-export const WithFormSections = () => (React.createElement(Form, { title: "New Profile" },
-    React.createElement(FormSection, { title: "Personal Information" },
-        React.createElement(Input, { id: "name", labelText: "Name" }),
-        React.createElement(Input, { id: "birthdate", placeholder: "DD-MM-YYYY", labelText: "Date of birth", requirementText: "(Optional)", helpText: "Enter a date below" }),
-        React.createElement(Input, { id: "birthplace", labelText: "Place of birth", requirementText: "(Optional)" })),
-    React.createElement(FormSection, { title: "General Information" },
-        React.createElement(Input, { id: "gender", labelText: "Gender" }),
-        React.createElement(Input, { id: "occupation", labelText: "Occupation" }))));
+export const WithFormSections = () => (_jsxs(Form, { title: "New Profile", children: [_jsxs(FormSection, { title: "Personal Information", children: [_jsx(Input, { id: "name", labelText: "Name" }), _jsx(Input, { id: "birthdate", placeholder: "DD-MM-YYYY", labelText: "Date of birth", requirementText: "(Optional)", helpText: "Enter a date below" }), _jsx(Input, { id: "birthplace", labelText: "Place of birth", requirementText: "(Optional)" })] }), _jsxs(FormSection, { title: "General Information", children: [_jsx(Input, { id: "gender", labelText: "Gender" }), _jsx(Input, { id: "occupation", labelText: "Occupation" })] })] }));
 WithFormSections.story = {
     name: "With form sections",
 };
-export const WithFormSectionsWithoutTitles = () => (React.createElement(Form, { title: "New Profile" },
-    React.createElement(FormSection, null,
-        React.createElement(Input, { id: "name", labelText: "Name" }),
-        React.createElement(Input, { id: "birthdate", placeholder: "DD-MM-YYYY", labelText: "Date of birth", requirementText: "(Optional)", helpText: "Enter a date below" }),
-        React.createElement(Input, { id: "birthplace", labelText: "Place of birth", requirementText: "(Optional)" })),
-    React.createElement(FormSection, null,
-        React.createElement(Input, { id: "gender", labelText: "Gender" }),
-        React.createElement(Input, { id: "occupation", labelText: "Occupation" }))));
+export const WithFormSectionsWithoutTitles = () => (_jsxs(Form, { title: "New Profile", children: [_jsxs(FormSection, { children: [_jsx(Input, { id: "name", labelText: "Name" }), _jsx(Input, { id: "birthdate", placeholder: "DD-MM-YYYY", labelText: "Date of birth", requirementText: "(Optional)", helpText: "Enter a date below" }), _jsx(Input, { id: "birthplace", labelText: "Place of birth", requirementText: "(Optional)" })] }), _jsxs(FormSection, { children: [_jsx(Input, { id: "gender", labelText: "Gender" }), _jsx(Input, { id: "occupation", labelText: "Occupation" })] })] }));
 WithFormSectionsWithoutTitles.story = {
     name: "With form sections without titles",
 };
-export const DemoForm = () => (React.createElement(React.Fragment, null,
-    React.createElement(Form, { title: "Job 324400" },
-        React.createElement(Alert, { type: "danger", title: "Errors have occured ..." },
-            React.createElement(Text, null, "Instructions and description of errors"),
-            React.createElement(List, { compact: true },
-                React.createElement(ListItem, null, "Affected field"),
-                React.createElement(ListItem, null, "Unmet criteria"),
-                React.createElement(ListItem, null,
-                    React.createElement("a", { href: "https://nulogy.design/" }, "Affected field")))),
-        React.createElement(FormSection, { title: "Job Information" },
-            React.createElement(Input, { id: "project", labelText: "Project", placeholder: "Project 128703" }),
-            React.createElement(Input, { id: "project-description", labelText: "Project description", requirementText: "(Optional)", helpText: "Project description helps identify the project." }),
-            React.createElement(Select, { id: "project-status", labelText: "Project status", options: options }),
-            React.createElement(Input, { id: "item-code", labelText: "Item code", defaultValue: "WS2SB6", errorMessage: "Item WS2SB6 does not exist." }),
-            React.createElement(Input, { id: "eaches-expected", labelText: "Eaches expected on Job", placeholder: "2 000" }),
-            React.createElement(Input, { id: "eaches-remaining", labelText: "Eaches remaining on Project", defaultValue: "18 000", disabled: true }),
-            React.createElement(Input, { id: "scheduled-start", labelText: "Scheduled start", placeholder: "MMM-DD-YYYY" }),
-            React.createElement(Input, { id: "scheduled-end", labelText: "Scheduled end", placeholder: "MMM-DD-YYYY" }),
-            React.createElement(CheckboxGroup, { labelText: "Line Lead", name: "linelead", requirementText: "(Optional)" },
-                React.createElement(Checkbox, { value: "christiaan", labelText: "Christiaan Oostenbrug" }),
-                React.createElement(Checkbox, { value: "matt", labelText: "Matt Dunn" }),
-                React.createElement(Checkbox, { value: "clemens", labelText: "Clemens Park", disabled: true, checked: true }),
-                React.createElement(Checkbox, { value: "nikola", labelText: "Nikola Pejcic", disabled: true })),
-            React.createElement(RadioGroup, { errorMessage: "Only yes can be selected...", labelText: "Reconcile", name: "settingSelection", defaultValue: "yes", id: "reconcile" },
-                React.createElement(Radio, { value: "yes", labelText: "Yes" }),
-                React.createElement(Radio, { value: "no", labelText: "No" }),
-                React.createElement(Radio, { value: "maybe", labelText: "Maybe", disabled: true })),
-            React.createElement(Toggle, { id: "job-visibility", labelText: "Job Visibility", onText: "Visible", offText: "Hidden" })),
-        React.createElement(FormSection, { title: "Rejects" },
-            React.createElement(Input, { defaultValue: "235432", id: "items", labelText: "Item", errorMessage: "Item 235432 is not a valid entry" }),
-            React.createElement(Input, { id: "quantity", labelText: "Quantity" }),
-            React.createElement(Toggle, { id: "reject-visibility", labelText: "Reject visibility", onText: "Visible", offText: "Hidden", disabled: true })))));
+export const DemoForm = () => (_jsx(_Fragment, { children: _jsxs(Form, { title: "Job 324400", children: [_jsxs(Alert, { type: "danger", title: "Errors have occured ...", children: [_jsx(Text, { children: "Instructions and description of errors" }), _jsxs(List, { compact: true, children: [_jsx(ListItem, { children: "Affected field" }), _jsx(ListItem, { children: "Unmet criteria" }), _jsx(ListItem, { children: _jsx("a", { href: "https://nulogy.design/", children: "Affected field" }) })] })] }), _jsxs(FormSection, { title: "Job Information", children: [_jsx(Input, { id: "project", labelText: "Project", placeholder: "Project 128703" }), _jsx(Input, { id: "project-description", labelText: "Project description", requirementText: "(Optional)", helpText: "Project description helps identify the project." }), _jsx(Select, { id: "project-status", labelText: "Project status", options: options }), _jsx(Input, { id: "item-code", labelText: "Item code", defaultValue: "WS2SB6", errorMessage: "Item WS2SB6 does not exist." }), _jsx(Input, { id: "eaches-expected", labelText: "Eaches expected on Job", placeholder: "2 000" }), _jsx(Input, { id: "eaches-remaining", labelText: "Eaches remaining on Project", defaultValue: "18 000", disabled: true }), _jsx(Input, { id: "scheduled-start", labelText: "Scheduled start", placeholder: "MMM-DD-YYYY" }), _jsx(Input, { id: "scheduled-end", labelText: "Scheduled end", placeholder: "MMM-DD-YYYY" }), _jsxs(CheckboxGroup, { labelText: "Line Lead", name: "linelead", requirementText: "(Optional)", children: [_jsx(Checkbox, { value: "christiaan", labelText: "Christiaan Oostenbrug" }), _jsx(Checkbox, { value: "matt", labelText: "Matt Dunn" }), _jsx(Checkbox, { value: "clemens", labelText: "Clemens Park", disabled: true, checked: true }), _jsx(Checkbox, { value: "nikola", labelText: "Nikola Pejcic", disabled: true })] }), _jsxs(RadioGroup, { errorMessage: "Only yes can be selected...", labelText: "Reconcile", name: "settingSelection", defaultValue: "yes", id: "reconcile", children: [_jsx(Radio, { value: "yes", labelText: "Yes" }), _jsx(Radio, { value: "no", labelText: "No" }), _jsx(Radio, { value: "maybe", labelText: "Maybe", disabled: true })] }), _jsx(Toggle, { id: "job-visibility", labelText: "Job Visibility", onText: "Visible", offText: "Hidden" })] }), _jsxs(FormSection, { title: "Rejects", children: [_jsx(Input, { defaultValue: "235432", id: "items", labelText: "Item", errorMessage: "Item 235432 is not a valid entry" }), _jsx(Input, { id: "quantity", labelText: "Quantity" }), _jsx(Toggle, { id: "reject-visibility", labelText: "Reject visibility", onText: "Visible", offText: "Hidden", disabled: true })] })] }) }));
 DemoForm.story = {
     name: "Demo form",
 };
@@ -80,6 +29,5 @@ export const WithAnAction = () => {
         event.preventDefault();
         alert("Hello!");
     }
-    return (React.createElement(Form, { onSubmit: handleSubmit },
-        React.createElement(Button, { type: "submit" }, "Click me")));
+    return (_jsx(Form, { onSubmit: handleSubmit, children: _jsx(Button, { type: "submit", children: "Click me" }) }));
 };

package/dist/src/Form/FormSection.d.ts

@@ -2,5 +2,5 @@ import React from "react";
 interface BaseFormSectionProps extends React.ComponentPropsWithRef<"fieldset"> {
     title?: string;
 }
-declare const FormSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<BaseFormSectionProps, never>> & string & Omit<({ title, children, ...props }: BaseFormSectionProps) => React.JSX.Element, keyof React.Component<any, {}, any>>;
+declare const FormSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<BaseFormSectionProps, never>> & string & Omit<({ title, children, ...props }: BaseFormSectionProps) => import("react/jsx-runtime").JSX.Element, keyof React.Component<any, {}, any>>;
 export default FormSection;

package/dist/src/Form/FormSection.js

@@ -1,11 +1,9 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { styled } from "styled-components";
 import { Heading3 } from "../Type";
 import Field from "./Field";
 import Fieldset from "./Fieldset";
-const BaseFormSection = ({ title, children, ...props }) => (React.createElement("fieldset", { ...props },
-    title != null && React.createElement(FormSectionTitle, null, title),
-    children));
+const BaseFormSection = ({ title, children, ...props }) => (_jsxs("fieldset", { ...props, children: [title != null && _jsx(FormSectionTitle, { children: title }), children] }));
 const FormSectionTitle = styled(Heading3).attrs({
     as: "legend",
 })({});