@nulogy/components 16.0.0 → 16.0.2

package/dist/src/TruncatedText/components/TruncatedTextFillWidth.js

@@ -1,4 +1,5 @@
-import React, { useState } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
 import { Text } from "../../Type";
 import MaybeTooltip from "../../MaybeTooltip/MaybeTooltip";
 const TruncatedTextFillWidth = ({ element, showTooltip, tooltipProps, children, "data-testid": testId, ...props }) => {
@@ -10,7 +11,6 @@ const TruncatedTextFillWidth = ({ element, showTooltip, tooltipProps, children,
             setHasOverflowText(true);
         }
     };
-    return (React.createElement(MaybeTooltip, { showTooltip: hasTooltip, tooltip: children, defaultOpen: true, ...tooltipProps },
-        React.createElement(Text, { as: element.type, cursor: hasTooltip ? "pointer" : "initial", onMouseEnter: updateOverflow, width: "100%", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", "data-testid": testId, ...element.props, ...props }, children)));
+    return (_jsx(MaybeTooltip, { showTooltip: hasTooltip, tooltip: children, defaultOpen: true, ...tooltipProps, children: _jsx(Text, { as: element.type, cursor: hasTooltip ? "pointer" : "initial", onMouseEnter: updateOverflow, width: "100%", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", "data-testid": testId, ...element.props, ...props, children: children }) }));
 };
 export default TruncatedTextFillWidth;

package/dist/src/TruncatedText/components/TruncatedTextMaxCharacters.d.ts

@@ -1,4 +1,3 @@
-import React from "react";
 import { TruncatedTextProps } from "../types";
-declare const TruncatedTextMaxCharacters: ({ children, element, indicator, maxCharacters, showTooltip, tooltipProps, "data-testid": testId, ...props }: TruncatedTextProps) => React.JSX.Element;
+declare const TruncatedTextMaxCharacters: ({ children, element, indicator, maxCharacters, showTooltip, tooltipProps, "data-testid": testId, ...props }: TruncatedTextProps) => import("react/jsx-runtime").JSX.Element;
 export default TruncatedTextMaxCharacters;

package/dist/src/TruncatedText/components/TruncatedTextMaxCharacters.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Text } from "../../Type";
 import MaybeTooltip from "../../MaybeTooltip/MaybeTooltip";
 const TruncatedTextMaxCharacters = ({ children, element, indicator, maxCharacters, showTooltip, tooltipProps, "data-testid": testId, ...props }) => {
@@ -6,7 +6,6 @@ const TruncatedTextMaxCharacters = ({ children, element, indicator, maxCharacter
     const requiresTruncation = innerText.length > maxCharacters;
     const truncatedText = requiresTruncation ? innerText.slice(0, maxCharacters) + indicator : innerText;
     const hasTooltip = showTooltip && requiresTruncation;
-    return (React.createElement(MaybeTooltip, { showTooltip: hasTooltip, tooltip: innerText, ...tooltipProps },
-        React.createElement(Text, { as: element.type, cursor: hasTooltip ? "pointer" : "initial", width: "fit-content", "data-testid": testId, ...element.props, ...props }, truncatedText)));
+    return (_jsx(MaybeTooltip, { showTooltip: hasTooltip, tooltip: innerText, ...tooltipProps, children: _jsx(Text, { as: element.type, cursor: hasTooltip ? "pointer" : "initial", width: "fit-content", "data-testid": testId, ...element.props, ...props, children: truncatedText }) }));
 };
 export default TruncatedTextMaxCharacters;

package/dist/src/Type/Headings.d.ts

@@ -1,48 +1,48 @@
 import { TextProps } from "./Text";
-export declare const Heading1: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<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> & {
+export declare const Heading1: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<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>;
 }, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
     ref?: import("react").Ref<HTMLHeadingElement>;
 }>, never>, TextProps>> & string;
-export declare const Heading2: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<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> & {
+export declare const Heading2: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<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>;
 }, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
     ref?: import("react").Ref<HTMLHeadingElement>;
 }>, never>, never>> & string;
-export declare const Heading3: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<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> & {
+export declare const Heading3: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<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>;
 }, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
     ref?: import("react").Ref<HTMLHeadingElement>;
 }>, never>, never>> & string;
-export declare const Heading4: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<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> & {
+export declare const Heading4: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<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>;
 }, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
     ref?: import("react").Ref<HTMLHeadingElement>;

package/dist/src/Type/Headings.story.d.ts

@@ -1,8 +1,7 @@
-import React from "react";
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const Headings: () => React.JSX.Element;
-export declare const WithACustomMargin: () => React.JSX.Element;
-export declare const Inline: () => React.JSX.Element;
+export declare const Headings: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithACustomMargin: () => import("react/jsx-runtime").JSX.Element;
+export declare const Inline: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/Type/Headings.story.js

@@ -1,17 +1,9 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Text, Heading1, Heading2, Heading3, Heading4, StatusIndicator } from "../index";
 import { Flex } from "../Flex";
 export default {
     title: "Components/Headings",
 };
-export const Headings = () => (React.createElement(Flex, { flexDirection: "column" },
-    React.createElement(Heading1, null, "Heading 1"),
-    React.createElement(Heading2, null, "Heading 2"),
-    React.createElement(Heading3, null, "Heading 3"),
-    React.createElement(Heading4, null, "Heading 4")));
-export const WithACustomMargin = () => (React.createElement(React.Fragment, null,
-    React.createElement(Heading1, { mb: "x6" }, "Heading1"),
-    React.createElement(Text, null, "Lorem ipsum")));
-export const Inline = () => (React.createElement(React.Fragment, null,
-    React.createElement(Heading1, { inline: true }, "Heading1"),
-    React.createElement(StatusIndicator, { ml: "x2", type: "informative" }, "Status")));
+export const Headings = () => (_jsxs(Flex, { flexDirection: "column", children: [_jsx(Heading1, { children: "Heading 1" }), _jsx(Heading2, { children: "Heading 2" }), _jsx(Heading3, { children: "Heading 3" }), _jsx(Heading4, { children: "Heading 4" })] }));
+export const WithACustomMargin = () => (_jsxs(_Fragment, { children: [_jsx(Heading1, { mb: "x6", children: "Heading1" }), _jsx(Text, { children: "Lorem ipsum" })] }));
+export const Inline = () => (_jsxs(_Fragment, { children: [_jsx(Heading1, { inline: true, children: "Heading1" }), _jsx(StatusIndicator, { ml: "x2", type: "informative", children: "Status" })] }));

package/dist/src/Type/Text.story.d.ts

@@ -1,35 +1,34 @@
-import React from "react";
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const _Text: () => React.JSX.Element;
+export declare const _Text: () => import("react/jsx-runtime").JSX.Element;
 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 WithACustomMargin: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const SetToInline: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const SetToDisabled: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };

package/dist/src/Type/Text.story.js

@@ -1,44 +1,27 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Text } from ".";
 import { Box } from "../Box";
 export default {
     title: "Components/Text",
 };
-export const _Text = () => React.createElement(Text, null, "Default text");
-export const WithAColor = () => React.createElement(Text, { color: "blue" }, "Blue text");
+export const _Text = () => _jsx(Text, { children: "Default text" });
+export const WithAColor = () => _jsx(Text, { color: "blue", children: "Blue text" });
 WithAColor.story = {
     name: "With a color",
 };
-export const WithASize = () => (React.createElement(React.Fragment, null,
-    React.createElement(Box, { bg: "whiteGrey", p: "x2", mb: "x3" },
-        React.createElement(Text, null, "Default (16px/24px)")),
-    React.createElement(Box, { bg: "whiteGrey", p: "x2", mb: "x3" },
-        React.createElement(Text, { fontSize: "small", lineHeight: "smallTextBase" }, "Small (14px/24px)"),
-        React.createElement(Text, { fontSize: "small", lineHeight: "smallTextCompressed" }, "Small Compressed (14px/16px)")),
-    React.createElement(Box, { bg: "whiteGrey", p: "x2", mb: "x3" },
-        React.createElement(Text, { fontSize: "smaller", lineHeight: "smallerText" }, "Smaller (12px/16px)"))));
+export const WithASize = () => (_jsxs(_Fragment, { children: [_jsx(Box, { bg: "whiteGrey", p: "x2", mb: "x3", children: _jsx(Text, { children: "Default (16px/24px)" }) }), _jsxs(Box, { bg: "whiteGrey", p: "x2", mb: "x3", children: [_jsx(Text, { fontSize: "small", lineHeight: "smallTextBase", children: "Small (14px/24px)" }), _jsx(Text, { fontSize: "small", lineHeight: "smallTextCompressed", children: "Small Compressed (14px/16px)" })] }), _jsx(Box, { bg: "whiteGrey", p: "x2", mb: "x3", children: _jsx(Text, { fontSize: "smaller", lineHeight: "smallerText", children: "Smaller (12px/16px)" }) })] }));
 WithASize.story = {
     name: "With a size",
 };
-export const WithACustomMargin = () => (React.createElement(React.Fragment, null,
-    React.createElement(Text, { mb: "x3" }, "Text 24px bottom margin."),
-    React.createElement(Text, null, "Text with default (0px) bottom margin.")));
+export const WithACustomMargin = () => (_jsxs(_Fragment, { children: [_jsx(Text, { mb: "x3", children: "Text 24px bottom margin." }), _jsx(Text, { children: "Text with default (0px) bottom margin." })] }));
 WithACustomMargin.story = {
     name: "With a custom margin",
 };
-export const SetToInline = () => (React.createElement(React.Fragment, null,
-    React.createElement(Text, { inline: true, mr: "x1" }, "Inline text"),
-    React.createElement(Text, { inline: true }, "Inline text")));
+export const SetToInline = () => (_jsxs(_Fragment, { children: [_jsx(Text, { inline: true, mr: "x1", children: "Inline text" }), _jsx(Text, { inline: true, children: "Inline text" })] }));
 SetToInline.story = {
     name: "Set to inline",
 };
-export const SetToDisabled = () => (React.createElement(React.Fragment, null,
-    React.createElement(Box, { bg: "white", p: "x2", m: "x2" },
-        React.createElement(Text, { disabled: true }, "Disabled text")),
-    React.createElement(Box, { bg: "darkBlue", p: "x2", m: "x2" },
-        React.createElement(Text, { color: "white", disabled: true }, "Disabled text")),
-    React.createElement(Box, { bg: "black", p: "x2", m: "x2" },
-        React.createElement(Text, { color: "white", disabled: true }, "Disabled text"))));
+export const SetToDisabled = () => (_jsxs(_Fragment, { children: [_jsx(Box, { bg: "white", p: "x2", m: "x2", children: _jsx(Text, { disabled: true, children: "Disabled text" }) }), _jsx(Box, { bg: "darkBlue", p: "x2", m: "x2", children: _jsx(Text, { color: "white", disabled: true, children: "Disabled text" }) }), _jsx(Box, { bg: "black", p: "x2", m: "x2", children: _jsx(Text, { color: "white", disabled: true, children: "Disabled text" }) })] }));
 SetToDisabled.story = {
     name: "Set to disabled",
 };

package/dist/src/Type/Typography.story.d.ts

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

package/dist/src/Type/Typography.story.js

@@ -1,214 +1,13 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useTheme } from "styled-components";
 import { List, ListItem, Text, Heading1, Heading2, Heading3, Flex, Divider } from "../index";
 export default {
     title: "Components/Typography",
 };
 export const Article = () => {
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Heading1, null, "Nunc vitae nisl vestibulum vitae nisl vestibulum vitae nisl vestibulum"),
-        React.createElement(Heading2, null, "Donec leo felis vitae nisl vestibulum vitae nisl vestibulum vitae nisl vestibulum"),
-        React.createElement(Text, { mb: "x3" }, "Nunc tempor eget mauris id facilisis. Morbi convallis mauris at fermentum gravida. Nunc lacinia a odio eu rutrum. Etiam in libero vestibulum, lobortis mi fermentum, pharetra lacus. Aliquam commodo molestie dolor, vel tristique orci efficitur eu. Nullam eleifend malesuada. Nam luctus blandit dignissim. Mauris eu odio tristique, lorem quis, lobortis nulla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc quis lacus felis. Ut convallis rhoncus orci. Maecenas sit amet leo dui. Integer semper porta dignissim."),
-        React.createElement(Heading3, null, "Long Title that Hopefully wraps. Maybe now? How About Now? Now? Now? Now? Now? Now? Now?"),
-        React.createElement(Text, { mb: "x3" }, "Porttitor urna sit amet, congue nulla. Etiam in posuere nibh. Nam pellentesque, lacus id elementum posuere, neque purus ullamcorper nunc, consequat mi velit eget mi. Duis ipsum augue, pulvinar ullamcorper fringilla in, dignissim congue velit."),
-        React.createElement(Heading2, null, "Donec leo felis"),
-        React.createElement(Heading3, null, "Two pargraphs and moderatly long title"),
-        React.createElement(Text, { mb: "x3" }, "Nunc tempor eget mauris id facilisis. Morbi convallis mauris at fermentum gravida. Nunc lacinia a odio eu rutrum. Etiam in libero vestibulum, lobortis mi fermentum, pharetra lacus. Aliquam commodo molestie dolor, vel tristique orci efficitur eu. Nullam eleifend malesuada. Nam luctus blandit dignissim. Mauris eu odio tristique, lorem quis, lobortis nulla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc quis lacus felis. Ut convallis rhoncus orci. Maecenas sit amet leo dui. Integer semper porta dignissim."),
-        React.createElement(Heading3, null, "Two pargraphs with List"),
-        React.createElement(Text, { mb: "x3" }, "Nunc tempor eget mauris id facilisis. Morbi convallis mauris at fermentum gravida. Nunc lacinia a odio eu rutrum. Etiam in libero vestibulum, lobortis mi fermentum, pharetra lacus. Aliquam commodo molestie dolor, vel tristique orci efficitur eu. Nullam eleifend malesuada. Nam luctus blandit dignissim. Mauris eu odio tristique, lorem quis, lobortis nulla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc quis lacus felis. Ut convallis rhoncus orci. Maecenas sit amet leo dui. Integer semper porta dignissim."),
-        React.createElement(List, null,
-            React.createElement(ListItem, null, "List Item 1"),
-            React.createElement(ListItem, null, "List Item 2 that is really really really really really really really really really long"),
-            React.createElement(ListItem, null, "List Item 3")),
-        React.createElement(Text, { mb: "x3" }, "Nam luctus blandit dignissim. Mauris eu odio tristique, lorem quis, lobortis nulla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc quis lacus felis. Ut convallis rhoncus orci. Maecenas sit amet leo dui. Integer semper porta dignissim."),
-        React.createElement(Text, { mb: "x3" }, "Nunc id arcu sagittis, volutpat sit amet, accumsan diam. Pellentesque luctus, nulla a ornare semper, dui mollis nisi, vel lacinia neque velit eget sapien. Etiam sodales dolor, vel dictum libero cursus ac. Nam vulputate tempor mauris vel. Nam tristique metus et dignissim pretium. Aliquam erat volutpat."),
-        React.createElement(Heading3, null, "This is small text (14px) with medium(default) line height (24px)."),
-        React.createElement(Text, { mb: "x3", fontSize: "small", lineHeight: "smallTextBase" }, "Porttitor urna sit amet, congue nulla. Etiam in posuere nibh. Nam pellentesque, lacus id elementum posuere, neque purus ullamcorper nunc, consequat mi velit eget mi. Duis ipsum augue, pulvinar ullamcorper fringilla in, dignissim congue velit. Nunc id arcu sagittis, volutpat sit amet, accumsan diam. Pellentesque luctus, nulla a ornare semper, dui mollis nisi, vel lacinia neque velit eget sapien. Etiam sodales dolor, vel dictum libero cursus ac. Nam vulputate tempor mauris vel. Nam tristique metus et dignissim pretium. Aliquam erat volutpat."),
-        React.createElement(Heading3, null, "This is small text (14px) with small line height (16px). Reserved for buttons, inputs ..."),
-        React.createElement(Text, { mb: "x3", fontSize: "small", lineHeight: "smallTextCompressed" }, "Porttitor urna sit amet, congue nulla. Etiam in posuere nibh. Nam pellentesque, lacus id elementum posuere, neque purus ullamcorper nunc, consequat mi velit eget mi. Duis ipsum augue, pulvinar ullamcorper fringilla in, dignissim congue velit."),
-        React.createElement(Heading3, null, "This is smaller text (12px) with smaller line height (16px). Reserved for buttons, inputs ..."),
-        React.createElement(Text, { mb: "x3", fontSize: "smaller", lineHeight: "smallerText" }, "Porttitor urna sit amet, congue nulla. Etiam in posuere nibh. Nam pellentesque, lacus id elementum posuere, neque purus ullamcorper nunc, consequat mi velit eget mi. Duis ipsum augue, pulvinar ullamcorper fringilla in, dignissim congue velit.")));
+    return (_jsxs(_Fragment, { children: [_jsx(Heading1, { children: "Nunc vitae nisl vestibulum vitae nisl vestibulum vitae nisl vestibulum" }), _jsx(Heading2, { children: "Donec leo felis vitae nisl vestibulum vitae nisl vestibulum vitae nisl vestibulum" }), _jsx(Text, { mb: "x3", children: "Nunc tempor eget mauris id facilisis. Morbi convallis mauris at fermentum gravida. Nunc lacinia a odio eu rutrum. Etiam in libero vestibulum, lobortis mi fermentum, pharetra lacus. Aliquam commodo molestie dolor, vel tristique orci efficitur eu. Nullam eleifend malesuada. Nam luctus blandit dignissim. Mauris eu odio tristique, lorem quis, lobortis nulla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc quis lacus felis. Ut convallis rhoncus orci. Maecenas sit amet leo dui. Integer semper porta dignissim." }), _jsx(Heading3, { children: "Long Title that Hopefully wraps. Maybe now? How About Now? Now? Now? Now? Now? Now? Now?" }), _jsx(Text, { mb: "x3", children: "Porttitor urna sit amet, congue nulla. Etiam in posuere nibh. Nam pellentesque, lacus id elementum posuere, neque purus ullamcorper nunc, consequat mi velit eget mi. Duis ipsum augue, pulvinar ullamcorper fringilla in, dignissim congue velit." }), _jsx(Heading2, { children: "Donec leo felis" }), _jsx(Heading3, { children: "Two pargraphs and moderatly long title" }), _jsx(Text, { mb: "x3", children: "Nunc tempor eget mauris id facilisis. Morbi convallis mauris at fermentum gravida. Nunc lacinia a odio eu rutrum. Etiam in libero vestibulum, lobortis mi fermentum, pharetra lacus. Aliquam commodo molestie dolor, vel tristique orci efficitur eu. Nullam eleifend malesuada. Nam luctus blandit dignissim. Mauris eu odio tristique, lorem quis, lobortis nulla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc quis lacus felis. Ut convallis rhoncus orci. Maecenas sit amet leo dui. Integer semper porta dignissim." }), _jsx(Heading3, { children: "Two pargraphs with List" }), _jsx(Text, { mb: "x3", children: "Nunc tempor eget mauris id facilisis. Morbi convallis mauris at fermentum gravida. Nunc lacinia a odio eu rutrum. Etiam in libero vestibulum, lobortis mi fermentum, pharetra lacus. Aliquam commodo molestie dolor, vel tristique orci efficitur eu. Nullam eleifend malesuada. Nam luctus blandit dignissim. Mauris eu odio tristique, lorem quis, lobortis nulla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc quis lacus felis. Ut convallis rhoncus orci. Maecenas sit amet leo dui. Integer semper porta dignissim." }), _jsxs(List, { children: [_jsx(ListItem, { children: "List Item 1" }), _jsx(ListItem, { children: "List Item 2 that is really really really really really really really really really long" }), _jsx(ListItem, { children: "List Item 3" })] }), _jsx(Text, { mb: "x3", children: "Nam luctus blandit dignissim. Mauris eu odio tristique, lorem quis, lobortis nulla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc quis lacus felis. Ut convallis rhoncus orci. Maecenas sit amet leo dui. Integer semper porta dignissim." }), _jsx(Text, { mb: "x3", children: "Nunc id arcu sagittis, volutpat sit amet, accumsan diam. Pellentesque luctus, nulla a ornare semper, dui mollis nisi, vel lacinia neque velit eget sapien. Etiam sodales dolor, vel dictum libero cursus ac. Nam vulputate tempor mauris vel. Nam tristique metus et dignissim pretium. Aliquam erat volutpat." }), _jsx(Heading3, { children: "This is small text (14px) with medium(default) line height (24px)." }), _jsx(Text, { mb: "x3", fontSize: "small", lineHeight: "smallTextBase", children: "Porttitor urna sit amet, congue nulla. Etiam in posuere nibh. Nam pellentesque, lacus id elementum posuere, neque purus ullamcorper nunc, consequat mi velit eget mi. Duis ipsum augue, pulvinar ullamcorper fringilla in, dignissim congue velit. Nunc id arcu sagittis, volutpat sit amet, accumsan diam. Pellentesque luctus, nulla a ornare semper, dui mollis nisi, vel lacinia neque velit eget sapien. Etiam sodales dolor, vel dictum libero cursus ac. Nam vulputate tempor mauris vel. Nam tristique metus et dignissim pretium. Aliquam erat volutpat." }), _jsx(Heading3, { children: "This is small text (14px) with small line height (16px). Reserved for buttons, inputs ..." }), _jsx(Text, { mb: "x3", fontSize: "small", lineHeight: "smallTextCompressed", children: "Porttitor urna sit amet, congue nulla. Etiam in posuere nibh. Nam pellentesque, lacus id elementum posuere, neque purus ullamcorper nunc, consequat mi velit eget mi. Duis ipsum augue, pulvinar ullamcorper fringilla in, dignissim congue velit." }), _jsx(Heading3, { children: "This is smaller text (12px) with smaller line height (16px). Reserved for buttons, inputs ..." }), _jsx(Text, { mb: "x3", fontSize: "smaller", lineHeight: "smallerText", children: "Porttitor urna sit amet, congue nulla. Etiam in posuere nibh. Nam pellentesque, lacus id elementum posuere, neque purus ullamcorper nunc, consequat mi velit eget mi. Duis ipsum augue, pulvinar ullamcorper fringilla in, dignissim congue velit." })] }));
 };
 export const AllTypographyValues = () => {
     const theme = useTheme();
-    return (React.createElement(Flex, { flexDirection: "column", gap: "x5" },
-        React.createElement(Flex, { flexDirection: "column" },
-            React.createElement(Heading1, null, "Typography"),
-            React.createElement(Heading2, null, "Interface text (font-size / line-height)"),
-            React.createElement(Text, { fontSize: "smaller", lineHeight: "smallerText" },
-                "smaller (",
-                theme.fontSizes.smaller,
-                ") / smallerText (",
-                theme.lineHeights.smallerText,
-                ")"),
-            React.createElement(Text, { fontSize: "smaller", lineHeight: "smallerRelaxed" },
-                "smaller (",
-                theme.fontSizes.smaller,
-                ") / smallerRelaxed (",
-                theme.lineHeights.smallerRelaxed,
-                ")"),
-            React.createElement(Text, { fontSize: "small", lineHeight: "smallTextBase" },
-                "small (",
-                theme.fontSizes.small,
-                ") / smallTextBase (",
-                theme.lineHeights.smallTextBase,
-                ")"),
-            React.createElement(Text, { fontSize: "small", lineHeight: "smallTextCompressed" },
-                "small (",
-                theme.fontSizes.small,
-                ") / smallTextCompressed (",
-                theme.lineHeights.smallTextCompressed,
-                ")"),
-            React.createElement(Text, { fontSize: "small", lineHeight: "smallRelaxed" },
-                "small (",
-                theme.fontSizes.small,
-                ") / smallRelaxed (",
-                theme.lineHeights.smallRelaxed,
-                ")"),
-            React.createElement(Text, { fontSize: "medium", lineHeight: "base" },
-                "medium (",
-                theme.fontSizes.medium,
-                ") / base (",
-                theme.lineHeights.base,
-                ")"),
-            React.createElement(Text, { fontSize: "medium", lineHeight: "baseRelaxed" },
-                "medium (",
-                theme.fontSizes.medium,
-                ") / baseRelaxed (",
-                theme.lineHeights.baseRelaxed,
-                ")"),
-            React.createElement(Text, { fontSize: "large", lineHeight: "heading3" },
-                "large (",
-                theme.fontSizes.large,
-                ") / heading3 (",
-                theme.lineHeights.heading3,
-                ")"),
-            React.createElement(Text, { fontSize: "larger", lineHeight: "heading2" },
-                "larger (",
-                theme.fontSizes.larger,
-                ") / heading2 (",
-                theme.lineHeights.heading2,
-                ")"),
-            React.createElement(Text, { fontSize: "largest", lineHeight: "heading1" },
-                "largest (",
-                theme.fontSizes.largest,
-                ") / heading1 (",
-                theme.lineHeights.heading1,
-                ")")),
-        React.createElement(Divider, null),
-        React.createElement(Flex, { flexDirection: "column" },
-            React.createElement(Heading2, { compact: true }, "Heading (font-size / line-height)"),
-            React.createElement(Text, { fontSize: "heading1", lineHeight: "heading1" },
-                "heading1 (",
-                theme.fontSizes.heading1,
-                ") / heading1 (",
-                theme.lineHeights.heading1,
-                ")"),
-            React.createElement(Text, { fontSize: "heading2", lineHeight: "heading2" },
-                "heading2 (",
-                theme.fontSizes.heading2,
-                ") / heading2 (",
-                theme.lineHeights.heading2,
-                ")"),
-            React.createElement(Text, { fontSize: "heading3", lineHeight: "heading3" },
-                "heading3 (",
-                theme.fontSizes.heading3,
-                ") / heading3 (",
-                theme.lineHeights.heading3,
-                ")"),
-            React.createElement(Text, { fontSize: "heading4", lineHeight: "heading4" },
-                "heading4 (",
-                theme.fontSizes.heading4,
-                ") / heading4 (",
-                theme.lineHeights.heading4,
-                ")")),
-        React.createElement(Divider, null),
-        React.createElement(Flex, { flexDirection: "column" },
-            React.createElement(Flex, { flexDirection: "column", mb: "x3" },
-                React.createElement(Heading2, { compact: true }, "Experimental interface text (font-size / line-height)"),
-                React.createElement(Text, { fontSize: "smallest" }, "These theme values are experimental and may be modified or removed in future updates.")),
-            React.createElement(Text, { fontSize: "xxs", lineHeight: "base" },
-                "xxs (",
-                theme.fontSizes.xxs,
-                ") / base (",
-                theme.lineHeights.base,
-                ")"),
-            React.createElement(Text, { fontSize: "xxs", lineHeight: "baseRelaxed" },
-                "xxs (",
-                theme.fontSizes.xxs,
-                ") / baseRelaxed (",
-                theme.lineHeights.baseRelaxed,
-                ")"),
-            React.createElement(Text, { fontSize: "xs", lineHeight: "base" },
-                "xs (",
-                theme.fontSizes.xs,
-                ") / base (",
-                theme.lineHeights.base,
-                ")"),
-            React.createElement(Text, { fontSize: "xs", lineHeight: "baseRelaxed" },
-                "xs (",
-                theme.fontSizes.xs,
-                ") / baseRelaxed (",
-                theme.lineHeights.baseRelaxed,
-                ")"),
-            React.createElement(Text, { fontSize: "sm", lineHeight: "base" },
-                "sm (",
-                theme.fontSizes.sm,
-                ") / base (",
-                theme.lineHeights.base,
-                ")"),
-            React.createElement(Text, { fontSize: "sm", lineHeight: "baseRelaxed" },
-                "sm (",
-                theme.fontSizes.sm,
-                ") / baseRelaxed (",
-                theme.lineHeights.baseRelaxed,
-                ")"),
-            React.createElement(Text, { fontSize: "md", lineHeight: "base" },
-                "md (",
-                theme.fontSizes.md,
-                ") / base (",
-                theme.lineHeights.base,
-                ")"),
-            React.createElement(Text, { fontSize: "md", lineHeight: "baseRelaxed" },
-                "md (",
-                theme.fontSizes.md,
-                ") / baseRelaxed (",
-                theme.lineHeights.baseRelaxed,
-                ")"),
-            React.createElement(Text, { fontSize: "lg", lineHeight: "base" },
-                "lg (",
-                theme.fontSizes.lg,
-                ") / base (",
-                theme.lineHeights.base,
-                ")"),
-            React.createElement(Text, { fontSize: "lg", lineHeight: "baseRelaxed" },
-                "lg (",
-                theme.fontSizes.lg,
-                ") / baseRelaxed (",
-                theme.lineHeights.baseRelaxed,
-                ")"),
-            React.createElement(Text, { fontSize: "xl", lineHeight: "base" },
-                "xl (",
-                theme.fontSizes.xl,
-                ") / base (",
-                theme.lineHeights.base,
-                ")"),
-            React.createElement(Text, { fontSize: "xl", lineHeight: "baseRelaxed" },
-                "xl (",
-                theme.fontSizes.xl,
-                ") / baseRelaxed (",
-                theme.lineHeights.baseRelaxed,
-                ")"),
-            React.createElement(Text, { fontSize: "xxl", lineHeight: "base" },
-                "xxl (",
-                theme.fontSizes.xxl,
-                ") / base (",
-                theme.lineHeights.base,
-                ")"),
-            React.createElement(Text, { fontSize: "xxl", lineHeight: "baseRelaxed" },
-                "xxl (",
-                theme.fontSizes.xxl,
-                ") / baseRelaxed (",
-                theme.lineHeights.baseRelaxed,
-                ")"))));
+    return (_jsxs(Flex, { flexDirection: "column", gap: "x5", children: [_jsxs(Flex, { flexDirection: "column", children: [_jsx(Heading1, { children: "Typography" }), _jsx(Heading2, { children: "Interface text (font-size / line-height)" }), _jsxs(Text, { fontSize: "smaller", lineHeight: "smallerText", children: ["smaller (", theme.fontSizes.smaller, ") / smallerText (", theme.lineHeights.smallerText, ")"] }), _jsxs(Text, { fontSize: "smaller", lineHeight: "smallerRelaxed", children: ["smaller (", theme.fontSizes.smaller, ") / smallerRelaxed (", theme.lineHeights.smallerRelaxed, ")"] }), _jsxs(Text, { fontSize: "small", lineHeight: "smallTextBase", children: ["small (", theme.fontSizes.small, ") / smallTextBase (", theme.lineHeights.smallTextBase, ")"] }), _jsxs(Text, { fontSize: "small", lineHeight: "smallTextCompressed", children: ["small (", theme.fontSizes.small, ") / smallTextCompressed (", theme.lineHeights.smallTextCompressed, ")"] }), _jsxs(Text, { fontSize: "small", lineHeight: "smallRelaxed", children: ["small (", theme.fontSizes.small, ") / smallRelaxed (", theme.lineHeights.smallRelaxed, ")"] }), _jsxs(Text, { fontSize: "medium", lineHeight: "base", children: ["medium (", theme.fontSizes.medium, ") / base (", theme.lineHeights.base, ")"] }), _jsxs(Text, { fontSize: "medium", lineHeight: "baseRelaxed", children: ["medium (", theme.fontSizes.medium, ") / baseRelaxed (", theme.lineHeights.baseRelaxed, ")"] }), _jsxs(Text, { fontSize: "large", lineHeight: "heading3", children: ["large (", theme.fontSizes.large, ") / heading3 (", theme.lineHeights.heading3, ")"] }), _jsxs(Text, { fontSize: "larger", lineHeight: "heading2", children: ["larger (", theme.fontSizes.larger, ") / heading2 (", theme.lineHeights.heading2, ")"] }), _jsxs(Text, { fontSize: "largest", lineHeight: "heading1", children: ["largest (", theme.fontSizes.largest, ") / heading1 (", theme.lineHeights.heading1, ")"] })] }), _jsx(Divider, {}), _jsxs(Flex, { flexDirection: "column", children: [_jsx(Heading2, { compact: true, children: "Heading (font-size / line-height)" }), _jsxs(Text, { fontSize: "heading1", lineHeight: "heading1", children: ["heading1 (", theme.fontSizes.heading1, ") / heading1 (", theme.lineHeights.heading1, ")"] }), _jsxs(Text, { fontSize: "heading2", lineHeight: "heading2", children: ["heading2 (", theme.fontSizes.heading2, ") / heading2 (", theme.lineHeights.heading2, ")"] }), _jsxs(Text, { fontSize: "heading3", lineHeight: "heading3", children: ["heading3 (", theme.fontSizes.heading3, ") / heading3 (", theme.lineHeights.heading3, ")"] }), _jsxs(Text, { fontSize: "heading4", lineHeight: "heading4", children: ["heading4 (", theme.fontSizes.heading4, ") / heading4 (", theme.lineHeights.heading4, ")"] })] }), _jsx(Divider, {}), _jsxs(Flex, { flexDirection: "column", children: [_jsxs(Flex, { flexDirection: "column", mb: "x3", children: [_jsx(Heading2, { compact: true, children: "Experimental interface text (font-size / line-height)" }), _jsx(Text, { fontSize: "smallest", children: "These theme values are experimental and may be modified or removed in future updates." })] }), _jsxs(Text, { fontSize: "xxs", lineHeight: "base", children: ["xxs (", theme.fontSizes.xxs, ") / base (", theme.lineHeights.base, ")"] }), _jsxs(Text, { fontSize: "xxs", lineHeight: "baseRelaxed", children: ["xxs (", theme.fontSizes.xxs, ") / baseRelaxed (", theme.lineHeights.baseRelaxed, ")"] }), _jsxs(Text, { fontSize: "xs", lineHeight: "base", children: ["xs (", theme.fontSizes.xs, ") / base (", theme.lineHeights.base, ")"] }), _jsxs(Text, { fontSize: "xs", lineHeight: "baseRelaxed", children: ["xs (", theme.fontSizes.xs, ") / baseRelaxed (", theme.lineHeights.baseRelaxed, ")"] }), _jsxs(Text, { fontSize: "sm", lineHeight: "base", children: ["sm (", theme.fontSizes.sm, ") / base (", theme.lineHeights.base, ")"] }), _jsxs(Text, { fontSize: "sm", lineHeight: "baseRelaxed", children: ["sm (", theme.fontSizes.sm, ") / baseRelaxed (", theme.lineHeights.baseRelaxed, ")"] }), _jsxs(Text, { fontSize: "md", lineHeight: "base", children: ["md (", theme.fontSizes.md, ") / base (", theme.lineHeights.base, ")"] }), _jsxs(Text, { fontSize: "md", lineHeight: "baseRelaxed", children: ["md (", theme.fontSizes.md, ") / baseRelaxed (", theme.lineHeights.baseRelaxed, ")"] }), _jsxs(Text, { fontSize: "lg", lineHeight: "base", children: ["lg (", theme.fontSizes.lg, ") / base (", theme.lineHeights.base, ")"] }), _jsxs(Text, { fontSize: "lg", lineHeight: "baseRelaxed", children: ["lg (", theme.fontSizes.lg, ") / baseRelaxed (", theme.lineHeights.baseRelaxed, ")"] }), _jsxs(Text, { fontSize: "xl", lineHeight: "base", children: ["xl (", theme.fontSizes.xl, ") / base (", theme.lineHeights.base, ")"] }), _jsxs(Text, { fontSize: "xl", lineHeight: "baseRelaxed", children: ["xl (", theme.fontSizes.xl, ") / baseRelaxed (", theme.lineHeights.baseRelaxed, ")"] }), _jsxs(Text, { fontSize: "xxl", lineHeight: "base", children: ["xxl (", theme.fontSizes.xxl, ") / base (", theme.lineHeights.base, ")"] }), _jsxs(Text, { fontSize: "xxl", lineHeight: "baseRelaxed", children: ["xxl (", theme.fontSizes.xxl, ") / baseRelaxed (", theme.lineHeights.baseRelaxed, ")"] })] })] }));
 };

package/dist/src/Validation/InlineValidation.d.ts

@@ -6,5 +6,5 @@ type InlineValidationProps = SpaceProps & {
     errorList?: string[];
     children?: React.ReactNode;
 };
-export default function InlineValidation({ className, errorMessage, errorList, children, ...boxProps }: InlineValidationProps): React.JSX.Element;
+export default function InlineValidation({ className, errorMessage, errorList, children, ...boxProps }: InlineValidationProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/src/Validation/InlineValidation.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { styled } from "styled-components";
 import { Text } from "../Type";
 import { Icon } from "../Icon";
@@ -13,10 +13,5 @@ const Wrapper = styled.div(({ theme }) => ({
     },
 }));
 export default function InlineValidation({ className, errorMessage, errorList, children, ...boxProps }) {
-    return errorMessage || errorList ? (React.createElement(Flex, { className: className, color: "red", ...boxProps },
-        React.createElement(Icon, { icon: "error", mr: "x1" }),
-        React.createElement(Wrapper, null,
-            errorMessage && React.createElement(Text, null, errorMessage),
-            mapErrorsToList(errorList),
-            children))) : null;
+    return errorMessage || errorList ? (_jsxs(Flex, { className: className, color: "red", ...boxProps, children: [_jsx(Icon, { icon: "error", mr: "x1" }), _jsxs(Wrapper, { children: [errorMessage && _jsx(Text, { children: errorMessage }), mapErrorsToList(errorList), children] })] })) : null;
 }

package/dist/src/Validation/InlineValidation.story.d.ts

@@ -1,23 +1,22 @@
-import React from "react";
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const _InlineValidation: () => React.JSX.Element;
+export declare const _InlineValidation: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithListItems: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithOnlyListItems: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithCustomContent: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };

package/dist/src/Validation/InlineValidation.story.js

@@ -1,24 +1,19 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { InlineValidation, List, ListItem, Link } from "../index";
 const errorList = ["Entry must be at least 3 characters long.", "Entry must contain a number."];
 export default {
     title: "Components/Inline Validation",
 };
-export const _InlineValidation = () => React.createElement(InlineValidation, { errorMessage: "Something has gone wrong" });
-export const WithListItems = () => React.createElement(InlineValidation, { errorMessage: "Something has gone wrong", errorList: errorList });
+export const _InlineValidation = () => _jsx(InlineValidation, { errorMessage: "Something has gone wrong" });
+export const WithListItems = () => _jsx(InlineValidation, { errorMessage: "Something has gone wrong", errorList: errorList });
 WithListItems.story = {
     name: "with list items",
 };
-export const WithOnlyListItems = () => React.createElement(InlineValidation, { errorList: errorList });
+export const WithOnlyListItems = () => _jsx(InlineValidation, { errorList: errorList });
 WithOnlyListItems.story = {
     name: "with only list items",
 };
-export const WithCustomContent = () => (React.createElement(InlineValidation, { errorMessage: "Something has gone wrong." },
-    React.createElement(List, { compact: true, leftAlign: true },
-        React.createElement(ListItem, null, "Entry must be at least 3 characters long."),
-        React.createElement(ListItem, null, "Entry must contain a number"),
-        React.createElement(ListItem, null,
-            React.createElement(Link, { href: "https://nulogy.design/" }, "Custom Link")))));
+export const WithCustomContent = () => (_jsx(InlineValidation, { errorMessage: "Something has gone wrong.", children: _jsxs(List, { compact: true, leftAlign: true, children: [_jsx(ListItem, { children: "Entry must be at least 3 characters long." }), _jsx(ListItem, { children: "Entry must contain a number" }), _jsx(ListItem, { children: _jsx(Link, { href: "https://nulogy.design/", children: "Custom Link" }) })] }) }));
 WithCustomContent.story = {
     name: "with custom content",
 };

package/dist/src/Validation/mapErrorsToList.d.ts

@@ -1,3 +1,2 @@
-import React from "react";
-declare const mapErrorsToList: (errors: any) => React.JSX.Element;
+declare const mapErrorsToList: (errors: any) => import("react/jsx-runtime").JSX.Element;
 export default mapErrorsToList;

package/dist/src/Validation/mapErrorsToList.js

@@ -1,9 +1,9 @@
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { List, ListItem } from "../List";
 const mapErrorsToList = (errors) => {
     if (!Array.isArray(errors) || !errors.length) {
         return null;
     }
-    return (React.createElement(List, { compact: true, leftAlign: true }, errors.map((error) => (React.createElement(ListItem, { key: error }, error)))));
+    return (_jsx(List, { compact: true, leftAlign: true, children: errors.map((error) => (_jsx(ListItem, { children: error }, error))) }));
 };
 export default mapErrorsToList;

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

@@ -4,5 +4,5 @@ declare const _default: {
     component: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("./VerticalDivider").DividerProps>> & string;
 };
 export default _default;
-export declare const Default: () => React.JSX.Element;
-export declare const WithCustomColourAndSpacing: () => React.JSX.Element;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithCustomColourAndSpacing: () => import("react/jsx-runtime").JSX.Element;