@nulogy/components 16.0.0 → 16.0.1

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;

package/dist/src/VerticalDivider/VerticalDivider.story.js

@@ -1,15 +1,9 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Text } from "../Type";
 import { VerticalDivider } from ".";
 export default {
     title: "Components/VerticalDivider",
     component: VerticalDivider,
 };
-export const Default = () => (React.createElement("div", null,
-    React.createElement(Text, { display: "inline" }, "Section A"),
-    React.createElement(VerticalDivider, null),
-    React.createElement(Text, { display: "inline" }, "Section B")));
-export const WithCustomColourAndSpacing = () => (React.createElement("div", null,
-    React.createElement(Text, { display: "inline" }, "Section A"),
-    React.createElement(VerticalDivider, { color: "darkBlue", mx: "x3" }),
-    React.createElement(Text, { display: "inline" }, "Section B")));
+export const Default = () => (_jsxs("div", { children: [_jsx(Text, { display: "inline", children: "Section A" }), _jsx(VerticalDivider, {}), _jsx(Text, { display: "inline", children: "Section B" })] }));
+export const WithCustomColourAndSpacing = () => (_jsxs("div", { children: [_jsx(Text, { display: "inline", children: "Section A" }), _jsx(VerticalDivider, { color: "darkBlue", mx: "x3" }), _jsx(Text, { display: "inline", children: "Section B" })] }));

package/dist/src/VisualTests/Select.story.d.ts

@@ -1,40 +1,39 @@
-import React from "react";
 declare const _default: {
     title: string;
 };
 export default _default;
 export declare const WithADefaultValue: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithABlankValue: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithAnOptionSelected: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithWrappingText: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const TestMultiselectOverflow: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithANullValue: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };

package/dist/src/VisualTests/Select.story.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { action } from "@storybook/addon-actions";
 import { Select } from "../index";
 import { Box } from "../Box";
@@ -33,40 +33,32 @@ const wrappingOptions = [
 export default {
     title: "VisualTests/Select",
 };
-export const WithADefaultValue = () => (React.createElement(Select, { defaultValue: options[0].value, placeholder: "Please select inventory status", onChange: action("selection changed"), onBlur: action("blurred"), options: options, labelText: "Inventory status", onInputChange: action("typed input value changed") }));
+export const WithADefaultValue = () => (_jsx(Select, { defaultValue: options[0].value, placeholder: "Please select inventory status", onChange: action("selection changed"), onBlur: action("blurred"), options: options, labelText: "Inventory status", onInputChange: action("typed input value changed") }));
 WithADefaultValue.story = {
     name: "with a defaultValue",
 };
 export const WithABlankValue = () => {
     const optionsWithBlank = [{ value: null, label: "" }, ...options];
-    return (React.createElement(Select, { placeholder: "Please select inventory status", onChange: action("selection changed"), onBlur: action("blurred"), options: optionsWithBlank, labelText: "Inventory status", onInputChange: action("typed input value changed") }));
+    return (_jsx(Select, { placeholder: "Please select inventory status", onChange: action("selection changed"), onBlur: action("blurred"), options: optionsWithBlank, labelText: "Inventory status", onInputChange: action("typed input value changed") }));
 };
 WithABlankValue.story = {
     name: "with a blank value",
 };
-export const WithAnOptionSelected = () => (React.createElement(React.Fragment, null,
-    React.createElement(Select, { value: options[0].value, placeholder: "Please select inventory status", options: options, labelText: "Inventory status", onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") }),
-    React.createElement("br", null),
-    React.createElement(Select, { value: options[0].value, placeholder: "Please select inventory status", options: options, labelText: "Inventory status", initialIsOpen: true, onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") })));
+export const WithAnOptionSelected = () => (_jsxs(_Fragment, { children: [_jsx(Select, { value: options[0].value, placeholder: "Please select inventory status", options: options, labelText: "Inventory status", onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") }), _jsx("br", {}), _jsx(Select, { value: options[0].value, placeholder: "Please select inventory status", options: options, labelText: "Inventory status", initialIsOpen: true, onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") })] }));
 WithAnOptionSelected.story = {
     name: "with an option selected",
 };
-export const WithWrappingText = () => (React.createElement(Select, { initialIsOpen: true, value: options[0].value, placeholder: "Please select inventory status", options: wrappingOptions, labelText: "Inventory status", onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") }));
+export const WithWrappingText = () => (_jsx(Select, { initialIsOpen: true, value: options[0].value, placeholder: "Please select inventory status", options: wrappingOptions, labelText: "Inventory status", onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") }));
 WithWrappingText.story = {
     name: "With wrapping text",
 };
-export const TestMultiselectOverflow = () => (React.createElement(React.Fragment, null,
-    React.createElement(Select, { defaultValue: ["accepted", "assigned"], noOptionsMessage: () => "No options", placeholder: "Please select inventory status", options: options, labelText: "Inventory status", onChange: action("selection changed"), onBlur: action("blurred"), multiselect: true, onInputChange: action("typed input value changed") }),
-    React.createElement(Box, { width: "300px" },
-        React.createElement(Select, { defaultValue: partnerCompanyName.map((item) => item.value), noOptionsMessage: () => "No options", placeholder: "Please select inventory status", options: partnerCompanyName, labelText: "PCN", onChange: action("selection changed"), onBlur: action("blurred"), multiselect: true, onInputChange: action("typed input value changed") })),
-    React.createElement(Box, { width: "400px" },
-        React.createElement(Select, { defaultValue: options.map((item) => item.value), noOptionsMessage: () => "No options", placeholder: "Please select inventory status", options: options, labelText: "Inventory status", onChange: action("selection changed"), onBlur: action("blurred"), multiselect: true, onInputChange: action("typed input value changed") }))));
+export const TestMultiselectOverflow = () => (_jsxs(_Fragment, { children: [_jsx(Select, { defaultValue: ["accepted", "assigned"], noOptionsMessage: () => "No options", placeholder: "Please select inventory status", options: options, labelText: "Inventory status", onChange: action("selection changed"), onBlur: action("blurred"), multiselect: true, onInputChange: action("typed input value changed") }), _jsx(Box, { width: "300px", children: _jsx(Select, { defaultValue: partnerCompanyName.map((item) => item.value), noOptionsMessage: () => "No options", placeholder: "Please select inventory status", options: partnerCompanyName, labelText: "PCN", onChange: action("selection changed"), onBlur: action("blurred"), multiselect: true, onInputChange: action("typed input value changed") }) }), _jsx(Box, { width: "400px", children: _jsx(Select, { defaultValue: options.map((item) => item.value), noOptionsMessage: () => "No options", placeholder: "Please select inventory status", options: options, labelText: "Inventory status", onChange: action("selection changed"), onBlur: action("blurred"), multiselect: true, onInputChange: action("typed input value changed") }) })] }));
 TestMultiselectOverflow.story = {
     name: "test multiselect overflow",
 };
 export const WithANullValue = () => {
     const optionsWithBlank = [{ value: null, label: "Nullable" }, { value: null, label: "Other null" }, ...options];
-    return (React.createElement(Select, { defaultValue: null, placeholder: "Please select inventory status", onChange: action("selection changed"), onBlur: action("blurred"), options: optionsWithBlank, labelText: "Inventory status", onInputChange: action("typed input value changed") }));
+    return (_jsx(Select, { defaultValue: null, placeholder: "Please select inventory status", onChange: action("selection changed"), onBlur: action("blurred"), options: optionsWithBlank, labelText: "Inventory status", onInputChange: action("typed input value changed") }));
 };
 WithANullValue.story = {
     name: "with a null value",

package/dist/src/VisualTests/WithSpace.story.d.ts

@@ -1,23 +1,22 @@
-import React from "react";
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const _Alert: () => React.JSX.Element;
-export declare const _AsyncSelect: () => React.JSX.Element;
-export declare const _Breadcrumbs: () => React.JSX.Element;
-export declare const _PrimaryButton: () => React.JSX.Element;
-export declare const _DatePicker: () => React.JSX.Element;
-export declare const _DropdownMenu: () => React.JSX.Element;
-export declare const _FieldLabel: () => React.JSX.Element;
-export declare const _Form: () => React.JSX.Element;
-export declare const _Link: () => React.JSX.Element;
-export declare const _List: () => React.JSX.Element;
-export declare const _Pagination: () => React.JSX.Element;
-export declare const _Radio: () => React.JSX.Element;
-export declare const _Select: () => React.JSX.Element;
-export declare const _Table: () => React.JSX.Element;
-export declare const _Tabs: () => React.JSX.Element;
-export declare const _TimePicker: () => React.JSX.Element;
-export declare const _TruncatedText: () => React.JSX.Element;
-export declare const _InlineValidation: () => React.JSX.Element;
+export declare const _Alert: () => import("react/jsx-runtime").JSX.Element;
+export declare const _AsyncSelect: () => import("react/jsx-runtime").JSX.Element;
+export declare const _Breadcrumbs: () => import("react/jsx-runtime").JSX.Element;
+export declare const _PrimaryButton: () => import("react/jsx-runtime").JSX.Element;
+export declare const _DatePicker: () => import("react/jsx-runtime").JSX.Element;
+export declare const _DropdownMenu: () => import("react/jsx-runtime").JSX.Element;
+export declare const _FieldLabel: () => import("react/jsx-runtime").JSX.Element;
+export declare const _Form: () => import("react/jsx-runtime").JSX.Element;
+export declare const _Link: () => import("react/jsx-runtime").JSX.Element;
+export declare const _List: () => import("react/jsx-runtime").JSX.Element;
+export declare const _Pagination: () => import("react/jsx-runtime").JSX.Element;
+export declare const _Radio: () => import("react/jsx-runtime").JSX.Element;
+export declare const _Select: () => import("react/jsx-runtime").JSX.Element;
+export declare const _Table: () => import("react/jsx-runtime").JSX.Element;
+export declare const _Tabs: () => import("react/jsx-runtime").JSX.Element;
+export declare const _TimePicker: () => import("react/jsx-runtime").JSX.Element;
+export declare const _TruncatedText: () => import("react/jsx-runtime").JSX.Element;
+export declare const _InlineValidation: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/VisualTests/WithSpace.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, AsyncSelect, Breadcrumbs, Link, Text, PrimaryButton, DatePicker, DropdownMenu, DropdownLink, DropdownButton, DropdownItem, FieldLabel, Form, Input, List, ListItem, Select, Radio, Tab, Tabs, TimePicker, TruncatedText, InlineValidation, Pagination, Table, } from "..";
 export default {
     title: "VisualTests/WithSpace",
@@ -7,35 +7,19 @@ const spaceProps = {
     p: "x1",
     mt: "x5",
 };
-export const _Alert = () => React.createElement(Alert, { ...spaceProps }, "Danger alert");
-export const _AsyncSelect = () => (React.createElement(AsyncSelect, { placeholder: "Filter Countries", className: "Select", classNamePrefix: "SelectTest", labelText: "Country", ...spaceProps }));
-export const _Breadcrumbs = () => (React.createElement(Breadcrumbs, { ...spaceProps },
-    React.createElement(Link, { href: "/" }, "Home"),
-    React.createElement(Link, { href: "/Tenants" }, "Tenants"),
-    React.createElement(Text, null, "Current Tenant")));
-export const _PrimaryButton = () => React.createElement(PrimaryButton, { ...spaceProps }, "Create project");
-export const _DatePicker = () => React.createElement(DatePicker, { ...spaceProps });
-export const _DropdownMenu = () => (React.createElement(DropdownMenu, { defaultOpen: true, openAriaLabel: "open dropdown", closeAriaLabel: "close dropdown", ...spaceProps },
-    React.createElement(DropdownLink, { href: "/" }, "Dropdown Link"),
-    React.createElement(DropdownButton, { onClick: () => { } }, "Dropdown Button"),
-    React.createElement(DropdownItem, null,
-        React.createElement("a", { href: "/", style: { textDecoration: "none" } }, "Custom Link Component"))));
-export const _FieldLabel = () => (React.createElement(FieldLabel, { labelText: "Default label", helpText: "I am help text. I can give more details on the input below!", requirementText: "(Required)", ...spaceProps },
-    React.createElement(Input, { id: "birthplace", labelText: "Place of birth", requirementText: "(Optional)" })));
-export const _Form = () => (React.createElement(Form, { mt: "x2", p: "x1" },
-    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 _Link = () => (React.createElement(Link, { as: "button", mt: "x2", p: "x1" }, "Link"));
-export const _List = () => (React.createElement(List, { leftAlign: true, ...spaceProps },
-    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, { mt: "x1" }, "List Item 3")));
-export const _Pagination = () => React.createElement(Pagination, { currentPage: 3, totalPages: 4, ...spaceProps });
-export const _Radio = () => (React.createElement(React.Fragment, null,
-    React.createElement(Radio, { id: "radio", error: true, labelText: "I am error", ...spaceProps }),
-    React.createElement(Radio, { id: "radio", defaultChecked: true, error: true, labelText: "I am error", ...spaceProps })));
-export const _Select = () => (React.createElement(Select, { defaultValue: 2, placeholder: "Please select inventory status", options: [
+export const _Alert = () => _jsx(Alert, { ...spaceProps, children: "Danger alert" });
+export const _AsyncSelect = () => (_jsx(AsyncSelect, { placeholder: "Filter Countries", className: "Select", classNamePrefix: "SelectTest", labelText: "Country", ...spaceProps }));
+export const _Breadcrumbs = () => (_jsxs(Breadcrumbs, { ...spaceProps, children: [_jsx(Link, { href: "/", children: "Home" }), _jsx(Link, { href: "/Tenants", children: "Tenants" }), _jsx(Text, { children: "Current Tenant" })] }));
+export const _PrimaryButton = () => _jsx(PrimaryButton, { ...spaceProps, children: "Create project" });
+export const _DatePicker = () => _jsx(DatePicker, { ...spaceProps });
+export const _DropdownMenu = () => (_jsxs(DropdownMenu, { defaultOpen: true, openAriaLabel: "open dropdown", closeAriaLabel: "close dropdown", ...spaceProps, children: [_jsx(DropdownLink, { href: "/", children: "Dropdown Link" }), _jsx(DropdownButton, { onClick: () => { }, children: "Dropdown Button" }), _jsx(DropdownItem, { children: _jsx("a", { href: "/", style: { textDecoration: "none" }, children: "Custom Link Component" }) })] }));
+export const _FieldLabel = () => (_jsx(FieldLabel, { labelText: "Default label", helpText: "I am help text. I can give more details on the input below!", requirementText: "(Required)", ...spaceProps, children: _jsx(Input, { id: "birthplace", labelText: "Place of birth", requirementText: "(Optional)" }) }));
+export const _Form = () => (_jsxs(Form, { mt: "x2", p: "x1", 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 _Link = () => (_jsx(Link, { as: "button", mt: "x2", p: "x1", children: "Link" }));
+export const _List = () => (_jsxs(List, { leftAlign: true, ...spaceProps, 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, { mt: "x1", children: "List Item 3" })] }));
+export const _Pagination = () => _jsx(Pagination, { currentPage: 3, totalPages: 4, ...spaceProps });
+export const _Radio = () => (_jsxs(_Fragment, { children: [_jsx(Radio, { id: "radio", error: true, labelText: "I am error", ...spaceProps }), _jsx(Radio, { id: "radio", defaultChecked: true, error: true, labelText: "I am error", ...spaceProps })] }));
+export const _Select = () => (_jsx(Select, { defaultValue: 2, placeholder: "Please select inventory status", options: [
         {
             label: "option 1",
             value: 1,
@@ -104,12 +88,8 @@ const rowData = [
         id: "r9",
     },
 ];
-export const _Table = () => React.createElement(Table, { columns: columns, rows: rowData, ...spaceProps });
-export const _Tabs = () => (React.createElement(Tabs, { ...spaceProps },
-    React.createElement(Tab, { className: "Tab1", label: "Tab 1" }, "Tab 1 Content"),
-    React.createElement(Tab, { className: "Tab2", label: "Tab 2" }, "Tab 2 Content"),
-    React.createElement(Tab, { className: "Tab3", label: "Tab 3" }, "Tab 3 Content"),
-    React.createElement(Tab, { className: "Tab4", label: "Tab 4" }, "Tab 4 Content")));
-export const _TimePicker = () => React.createElement(TimePicker, { labelText: "End Time", defaultValue: "12:38 PM", ...spaceProps });
-export const _TruncatedText = () => (React.createElement(TruncatedText, { ...spaceProps }, "Special instructions are provided for the shipment"));
-export const _InlineValidation = () => React.createElement(InlineValidation, { errorMessage: "Something has gone wrong", ...spaceProps });
+export const _Table = () => _jsx(Table, { columns: columns, rows: rowData, ...spaceProps });
+export const _Tabs = () => (_jsxs(Tabs, { ...spaceProps, children: [_jsx(Tab, { className: "Tab1", label: "Tab 1", children: "Tab 1 Content" }), _jsx(Tab, { className: "Tab2", label: "Tab 2", children: "Tab 2 Content" }), _jsx(Tab, { className: "Tab3", label: "Tab 3", children: "Tab 3 Content" }), _jsx(Tab, { className: "Tab4", label: "Tab 4", children: "Tab 4 Content" })] }));
+export const _TimePicker = () => _jsx(TimePicker, { labelText: "End Time", defaultValue: "12:38 PM", ...spaceProps });
+export const _TruncatedText = () => (_jsx(TruncatedText, { ...spaceProps, children: "Special instructions are provided for the shipment" }));
+export const _InlineValidation = () => _jsx(InlineValidation, { errorMessage: "Something has gone wrong", ...spaceProps });