@nulogy/components 16.0.0 → 16.0.2

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",
 })({});

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

@@ -10,7 +10,11 @@ export interface IconProps extends SpaceProps {
     focusable?: boolean;
     style?: React.CSSProperties;
 }
-declare const Icon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<IconProps & React.RefAttributes<SVGSVGElement>, IconProps>> & string & Omit<React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>, keyof React.Component<any, {}, any>>;
+declare const Icon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<IconProps & React.RefAttributes<SVGSVGElement>, "ref"> & {
+    ref?: React.Ref<SVGSVGElement>;
+}, IconProps>> & string & Omit<React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>, keyof React.Component<any, {}, any>>;
 export declare const InlineIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<HTMLSpanElement>>;
-export declare const InputIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<IconProps & React.RefAttributes<SVGSVGElement>, keyof IconProps> & IconProps, PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>>> & string;
+export declare const InputIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<Omit<IconProps & React.RefAttributes<SVGSVGElement>, "ref"> & {
+    ref?: React.Ref<SVGSVGElement>;
+}, keyof IconProps> & IconProps, PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>>> & string;
 export default Icon;

package/dist/src/Icon/Icon.js

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

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

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

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

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

package/dist/src/Icon/LoadingIcon.js

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