@nulogy/components 16.0.0 → 16.0.1

package/dist/src/DescriptionList/stories/DescriptionList.sizing.story.d.ts

@@ -1,10 +1,9 @@
-import React from "react";
 import DescriptionList from "../DescriptionList";
 declare const _default: {
     title: string;
     component: typeof DescriptionList;
 };
 export default _default;
-export declare const Density: () => React.JSX.Element;
-export declare const FontSize: () => React.JSX.Element;
-export declare const LineHeight: () => React.JSX.Element;
+export declare const Density: () => import("react/jsx-runtime").JSX.Element;
+export declare const FontSize: () => import("react/jsx-runtime").JSX.Element;
+export declare const LineHeight: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/DescriptionList/stories/DescriptionList.sizing.story.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Flex } from "../../Flex";
 import { Heading1, Text } from "../../Type";
 import DescriptionList from "../DescriptionList";
@@ -7,46 +7,7 @@ export default {
     title: "Components/DescriptionList/Sizing",
     component: DescriptionList,
 };
-const SizingDemo = ({ title, description, children, }) => (React.createElement(Flex, { flexDirection: "column", gap: "x4" },
-    React.createElement(Flex, { flexDirection: "column", gap: "x1" },
-        React.createElement(Heading1, { compact: true }, title),
-        description && React.createElement(Text, { fontSize: "sm" }, description)),
-    children));
-export const Density = () => (React.createElement(SizingDemo, { title: "Density" },
-    React.createElement(Flex, { gap: "x4" },
-        React.createElement(Flex, { flexDirection: "column", gap: "x2", flex: 1 },
-            React.createElement(Text, { as: "h4", fontWeight: "bold" }, "Compact"),
-            React.createElement(DescriptionList, { layout: "stacked", density: "compact" },
-                React.createElement(SampleContent, null))),
-        React.createElement(Flex, { flexDirection: "column", gap: "x2", flex: 1 },
-            React.createElement(Text, { as: "h4", fontWeight: "bold" }, "Medium"),
-            React.createElement(DescriptionList, { layout: "stacked", density: "medium" },
-                React.createElement(SampleContent, null))),
-        React.createElement(Flex, { flexDirection: "column", gap: "x2", flex: 1 },
-            React.createElement(Text, { as: "h4", fontWeight: "bold" }, "Relaxed"),
-            React.createElement(DescriptionList, { layout: "stacked", density: "relaxed" },
-                React.createElement(SampleContent, null))))));
-export const FontSize = () => (React.createElement(SizingDemo, { title: "Font Size" },
-    React.createElement(Flex, { gap: "x4", flexDirection: { extraSmall: "column", small: "row" } },
-        React.createElement(Flex, { flexDirection: "column", gap: "x2", flex: 1 },
-            React.createElement(Text, { as: "h4", fontWeight: "bold" }, "Small"),
-            React.createElement(DescriptionList, { layout: "stacked", fontSize: "small", lineHeight: "smallTextBase" },
-                React.createElement(SampleContent, null))),
-        React.createElement(Flex, { flexDirection: "column", gap: "x2", flex: 1 },
-            React.createElement(Text, { as: "h4", fontWeight: "bold" }, "Medium (Default)"),
-            React.createElement(DescriptionList, { layout: "stacked" },
-                React.createElement(SampleContent, null))),
-        React.createElement(Flex, { flexDirection: "column", gap: "x2", flex: 1 },
-            React.createElement(Text, { as: "h4", fontWeight: "bold" }, "Large"),
-            React.createElement(DescriptionList, { layout: "stacked", fontSize: "large", lineHeight: "heading3" },
-                React.createElement(SampleContent, null))))));
-export const LineHeight = () => (React.createElement(SizingDemo, { title: "Line Height" },
-    React.createElement(Flex, { gap: "x4", flexDirection: { extraSmall: "column", small: "row" } },
-        React.createElement(Flex, { flexDirection: "column", gap: "x2", flex: 1 },
-            React.createElement(Text, { as: "h4", fontWeight: "bold" }, "Base"),
-            React.createElement(DescriptionList, { layout: "stacked", lineHeight: "base" },
-                React.createElement(SampleContent, null))),
-        React.createElement(Flex, { flexDirection: "column", gap: "x2", flex: 1 },
-            React.createElement(Text, { as: "h4", fontWeight: "bold" }, "Base Relaxed"),
-            React.createElement(DescriptionList, { layout: "stacked", lineHeight: "baseRelaxed" },
-                React.createElement(SampleContent, null))))));
+const SizingDemo = ({ title, description, children, }) => (_jsxs(Flex, { flexDirection: "column", gap: "x4", children: [_jsxs(Flex, { flexDirection: "column", gap: "x1", children: [_jsx(Heading1, { compact: true, children: title }), description && _jsx(Text, { fontSize: "sm", children: description })] }), children] }));
+export const Density = () => (_jsx(SizingDemo, { title: "Density", children: _jsxs(Flex, { gap: "x4", children: [_jsxs(Flex, { flexDirection: "column", gap: "x2", flex: 1, children: [_jsx(Text, { as: "h4", fontWeight: "bold", children: "Compact" }), _jsx(DescriptionList, { layout: "stacked", density: "compact", children: _jsx(SampleContent, {}) })] }), _jsxs(Flex, { flexDirection: "column", gap: "x2", flex: 1, children: [_jsx(Text, { as: "h4", fontWeight: "bold", children: "Medium" }), _jsx(DescriptionList, { layout: "stacked", density: "medium", children: _jsx(SampleContent, {}) })] }), _jsxs(Flex, { flexDirection: "column", gap: "x2", flex: 1, children: [_jsx(Text, { as: "h4", fontWeight: "bold", children: "Relaxed" }), _jsx(DescriptionList, { layout: "stacked", density: "relaxed", children: _jsx(SampleContent, {}) })] })] }) }));
+export const FontSize = () => (_jsx(SizingDemo, { title: "Font Size", children: _jsxs(Flex, { gap: "x4", flexDirection: { extraSmall: "column", small: "row" }, children: [_jsxs(Flex, { flexDirection: "column", gap: "x2", flex: 1, children: [_jsx(Text, { as: "h4", fontWeight: "bold", children: "Small" }), _jsx(DescriptionList, { layout: "stacked", fontSize: "small", lineHeight: "smallTextBase", children: _jsx(SampleContent, {}) })] }), _jsxs(Flex, { flexDirection: "column", gap: "x2", flex: 1, children: [_jsx(Text, { as: "h4", fontWeight: "bold", children: "Medium (Default)" }), _jsx(DescriptionList, { layout: "stacked", children: _jsx(SampleContent, {}) })] }), _jsxs(Flex, { flexDirection: "column", gap: "x2", flex: 1, children: [_jsx(Text, { as: "h4", fontWeight: "bold", children: "Large" }), _jsx(DescriptionList, { layout: "stacked", fontSize: "large", lineHeight: "heading3", children: _jsx(SampleContent, {}) })] })] }) }));
+export const LineHeight = () => (_jsx(SizingDemo, { title: "Line Height", children: _jsxs(Flex, { gap: "x4", flexDirection: { extraSmall: "column", small: "row" }, children: [_jsxs(Flex, { flexDirection: "column", gap: "x2", flex: 1, children: [_jsx(Text, { as: "h4", fontWeight: "bold", children: "Base" }), _jsx(DescriptionList, { layout: "stacked", lineHeight: "base", children: _jsx(SampleContent, {}) })] }), _jsxs(Flex, { flexDirection: "column", gap: "x2", flex: 1, children: [_jsx(Text, { as: "h4", fontWeight: "bold", children: "Base Relaxed" }), _jsx(DescriptionList, { layout: "stacked", lineHeight: "baseRelaxed", children: _jsx(SampleContent, {}) })] })] }) }));

package/dist/src/DescriptionList/stories/DescriptionList.spanning.story.d.ts

@@ -1,10 +1,9 @@
-import React from "react";
 import DescriptionList from "../DescriptionList";
 declare const _default: {
     title: string;
     component: typeof DescriptionList;
 };
 export default _default;
-export declare const ColumnSpanning: () => React.JSX.Element;
-export declare const RowSpanning: () => React.JSX.Element;
-export declare const ColumnAndRowSpanning: () => React.JSX.Element;
+export declare const ColumnSpanning: () => import("react/jsx-runtime").JSX.Element;
+export declare const RowSpanning: () => import("react/jsx-runtime").JSX.Element;
+export declare const ColumnAndRowSpanning: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/DescriptionList/stories/DescriptionList.spanning.story.js

@@ -1,4 +1,5 @@
-import React, { useState } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
 import { Checkbox } from "../../Checkbox";
 import { Flex } from "../../Flex";
 import { Heading1 } from "../../Type";
@@ -12,68 +13,13 @@ export default {
 };
 export const ColumnSpanning = () => {
     const [outlined, setOutlined] = useState(true);
-    return (React.createElement(Flex, { flexDirection: "column", gap: "x4" },
-        React.createElement(Flex, { flexDirection: "row", alignItems: "baseline", gap: "half" },
-            React.createElement(Heading1, { compact: true }, "Column Spanning"),
-            React.createElement(VerticalDivider, null),
-            React.createElement(Checkbox, { labelText: "Show group outline", checked: outlined, onChange: () => setOutlined(!outlined) })),
-        React.createElement(Flex, { flexDirection: "column", gap: "x2" },
-            React.createElement(DescriptionList, { layout: "stacked", columns: 2 },
-                React.createElement(DescriptionGroup, null,
-                    React.createElement(OutlinedDt, { "$outlined": outlined }, "Key 1"),
-                    React.createElement(OutlinedDd, { "$outlined": outlined }, "Value 1")),
-                React.createElement(DescriptionGroup, null,
-                    React.createElement(OutlinedDt, { "$outlined": outlined }, "Key 2"),
-                    React.createElement(OutlinedDd, { "$outlined": outlined }, "Value 2")),
-                React.createElement(DescriptionGroup, { columnSpan: 3 },
-                    React.createElement(OutlinedDt, { "$outlined": outlined }, "Key 3"),
-                    React.createElement(OutlinedDd, { "$outlined": outlined }, "This value is very long and it will span 3 columns"))))));
+    return (_jsxs(Flex, { flexDirection: "column", gap: "x4", children: [_jsxs(Flex, { flexDirection: "row", alignItems: "baseline", gap: "half", children: [_jsx(Heading1, { compact: true, children: "Column Spanning" }), _jsx(VerticalDivider, {}), _jsx(Checkbox, { labelText: "Show group outline", checked: outlined, onChange: () => setOutlined(!outlined) })] }), _jsx(Flex, { flexDirection: "column", gap: "x2", children: _jsxs(DescriptionList, { layout: "stacked", columns: 2, children: [_jsxs(DescriptionGroup, { children: [_jsx(OutlinedDt, { "$outlined": outlined, children: "Key 1" }), _jsx(OutlinedDd, { "$outlined": outlined, children: "Value 1" })] }), _jsxs(DescriptionGroup, { children: [_jsx(OutlinedDt, { "$outlined": outlined, children: "Key 2" }), _jsx(OutlinedDd, { "$outlined": outlined, children: "Value 2" })] }), _jsxs(DescriptionGroup, { columnSpan: 3, children: [_jsx(OutlinedDt, { "$outlined": outlined, children: "Key 3" }), _jsx(OutlinedDd, { "$outlined": outlined, children: "This value is very long and it will span 3 columns" })] })] }) })] }));
 };
 export const RowSpanning = () => {
     const [outlined, setOutlined] = useState(true);
-    return (React.createElement(Flex, { flexDirection: "column", gap: "x2" },
-        React.createElement(Flex, { flexDirection: "row", alignItems: "baseline", gap: "half" },
-            React.createElement(Heading1, { compact: true }, "Row Spanning"),
-            React.createElement(VerticalDivider, null),
-            React.createElement(Checkbox, { labelText: "Show group outline", checked: outlined, onChange: () => setOutlined(!outlined) })),
-        React.createElement(DescriptionList, { layout: "stacked", columns: 3 },
-            React.createElement(DescriptionGroup, null,
-                React.createElement(OutlinedDt, { "$outlined": outlined }, "Key 1"),
-                React.createElement(OutlinedDd, { "$outlined": outlined }, "Value 1")),
-            React.createElement(DescriptionGroup, null,
-                React.createElement(OutlinedDt, { "$outlined": outlined }, "Key 2"),
-                React.createElement(OutlinedDd, { "$outlined": outlined }, "Value 2")),
-            React.createElement(DescriptionGroup, { rowSpan: 3 },
-                React.createElement(OutlinedDt, { "$outlined": outlined }, "Key 3"),
-                React.createElement(OutlinedDd, { "$outlined": outlined }, "This value is very long and it will span 3 rows")),
-            React.createElement(DescriptionGroup, null,
-                React.createElement(OutlinedDt, { "$outlined": outlined }, "Key 4"),
-                React.createElement(OutlinedDd, { "$outlined": outlined }, "Value 4")))));
+    return (_jsxs(Flex, { flexDirection: "column", gap: "x2", children: [_jsxs(Flex, { flexDirection: "row", alignItems: "baseline", gap: "half", children: [_jsx(Heading1, { compact: true, children: "Row Spanning" }), _jsx(VerticalDivider, {}), _jsx(Checkbox, { labelText: "Show group outline", checked: outlined, onChange: () => setOutlined(!outlined) })] }), _jsxs(DescriptionList, { layout: "stacked", columns: 3, children: [_jsxs(DescriptionGroup, { children: [_jsx(OutlinedDt, { "$outlined": outlined, children: "Key 1" }), _jsx(OutlinedDd, { "$outlined": outlined, children: "Value 1" })] }), _jsxs(DescriptionGroup, { children: [_jsx(OutlinedDt, { "$outlined": outlined, children: "Key 2" }), _jsx(OutlinedDd, { "$outlined": outlined, children: "Value 2" })] }), _jsxs(DescriptionGroup, { rowSpan: 3, children: [_jsx(OutlinedDt, { "$outlined": outlined, children: "Key 3" }), _jsx(OutlinedDd, { "$outlined": outlined, children: "This value is very long and it will span 3 rows" })] }), _jsxs(DescriptionGroup, { children: [_jsx(OutlinedDt, { "$outlined": outlined, children: "Key 4" }), _jsx(OutlinedDd, { "$outlined": outlined, children: "Value 4" })] })] })] }));
 };
 export const ColumnAndRowSpanning = () => {
     const [outlined, setOutlined] = useState(true);
-    return (React.createElement(Flex, { flexDirection: "column", gap: "x2" },
-        React.createElement(Flex, { flexDirection: "row", alignItems: "baseline", gap: "half" },
-            React.createElement(Heading1, { compact: true }, "Column and Row Spanning"),
-            React.createElement(VerticalDivider, null),
-            React.createElement(Checkbox, { labelText: "Show group outline", checked: outlined, onChange: () => setOutlined(!outlined) })),
-        React.createElement(DescriptionList, { layout: "stacked", columns: 3 },
-            React.createElement(DescriptionGroup, null,
-                React.createElement(OutlinedDt, { "$outlined": outlined }, "Key 1"),
-                React.createElement(OutlinedDd, { "$outlined": outlined }, "Value 1")),
-            React.createElement(DescriptionGroup, null,
-                React.createElement(OutlinedDt, { "$outlined": outlined }, "Key 2"),
-                React.createElement(OutlinedDd, { "$outlined": outlined }, "Value 2")),
-            React.createElement(DescriptionGroup, null,
-                React.createElement(OutlinedDt, { "$outlined": outlined }, "Key 3"),
-                React.createElement(OutlinedDd, { "$outlined": outlined }, "Value 3")),
-            React.createElement(DescriptionGroup, { rowSpan: 2, columnSpan: 2 },
-                React.createElement(OutlinedDt, { "$outlined": outlined }, "Key 4"),
-                React.createElement(OutlinedDd, { "$outlined": outlined }, "This value spans both rows and columns")),
-            React.createElement(DescriptionGroup, null,
-                React.createElement(OutlinedDt, { "$outlined": outlined }, "Key 5"),
-                React.createElement(OutlinedDd, { "$outlined": outlined }, "Value 5")),
-            React.createElement(DescriptionGroup, null,
-                React.createElement(OutlinedDt, { "$outlined": outlined }, "Key 6"),
-                React.createElement(OutlinedDd, { "$outlined": outlined }, "Value 6")))));
+    return (_jsxs(Flex, { flexDirection: "column", gap: "x2", children: [_jsxs(Flex, { flexDirection: "row", alignItems: "baseline", gap: "half", children: [_jsx(Heading1, { compact: true, children: "Column and Row Spanning" }), _jsx(VerticalDivider, {}), _jsx(Checkbox, { labelText: "Show group outline", checked: outlined, onChange: () => setOutlined(!outlined) })] }), _jsxs(DescriptionList, { layout: "stacked", columns: 3, children: [_jsxs(DescriptionGroup, { children: [_jsx(OutlinedDt, { "$outlined": outlined, children: "Key 1" }), _jsx(OutlinedDd, { "$outlined": outlined, children: "Value 1" })] }), _jsxs(DescriptionGroup, { children: [_jsx(OutlinedDt, { "$outlined": outlined, children: "Key 2" }), _jsx(OutlinedDd, { "$outlined": outlined, children: "Value 2" })] }), _jsxs(DescriptionGroup, { children: [_jsx(OutlinedDt, { "$outlined": outlined, children: "Key 3" }), _jsx(OutlinedDd, { "$outlined": outlined, children: "Value 3" })] }), _jsxs(DescriptionGroup, { rowSpan: 2, columnSpan: 2, children: [_jsx(OutlinedDt, { "$outlined": outlined, children: "Key 4" }), _jsx(OutlinedDd, { "$outlined": outlined, children: "This value spans both rows and columns" })] }), _jsxs(DescriptionGroup, { children: [_jsx(OutlinedDt, { "$outlined": outlined, children: "Key 5" }), _jsx(OutlinedDd, { "$outlined": outlined, children: "Value 5" })] }), _jsxs(DescriptionGroup, { children: [_jsx(OutlinedDt, { "$outlined": outlined, children: "Key 6" }), _jsx(OutlinedDd, { "$outlined": outlined, children: "Value 6" })] })] })] }));
 };

package/dist/src/DescriptionList/stories/fixtures.d.ts

@@ -14,4 +14,4 @@ export declare const OutlinedDd: import("styled-components/dist/types").IStyledC
 export declare const DashedBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<(Record<string, unknown> & {
     children?: React.ReactNode | undefined;
 }) | (Omit<Record<string, unknown>, "ref"> & React.RefAttributes<React.Component<Record<string, unknown>, any, any>>), import("styled-components/dist/types").BaseObject>> & (string & (Omit<React.ComponentClass<Record<string, unknown>, any>, keyof React.Component<any, {}, any>> | Omit<React.FunctionComponent<Record<string, unknown>>, keyof React.Component<any, {}, any>>));
-export declare const SampleContent: () => React.JSX.Element;
+export declare const SampleContent: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/DescriptionList/stories/fixtures.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { styled } from "styled-components";
 import { transparentize } from "polished";
 import { Box } from "../../Box";
@@ -29,29 +29,4 @@ export const OutlinedDd = styled(DescriptionDetails)(({ $outlined, $highlighted,
     transition: "background-color 0.25s ease-in-out",
 }));
 export const DashedBox = dashed(Box);
-export const SampleContent = () => (React.createElement(React.Fragment, null,
-    React.createElement(DescriptionGroup, null,
-        React.createElement(DescriptionTerm, null, "Customer"),
-        React.createElement(DescriptionDetails, null, "Nulogy")),
-    React.createElement(DescriptionGroup, null,
-        React.createElement(DescriptionTerm, null,
-            React.createElement(Text, { display: "inline-flex", alignItems: "center" },
-                "Order number",
-                React.createElement(Tooltip, { tooltip: "The unique identifier assigned to this order when it was placed by the customer." },
-                    React.createElement(Icon, { icon: "info", size: "x3", paddingLeft: "half" })))),
-        React.createElement(DescriptionDetails, null,
-            React.createElement(Link, { href: "/customer-details" }, "P12-90381-2039"))),
-    React.createElement(DescriptionGroup, null,
-        React.createElement(DescriptionTerm, null, "Status"),
-        React.createElement(DescriptionDetails, null,
-            React.createElement(StatusIndicator, { type: "success" }, "Paid"))),
-    React.createElement(DescriptionGroup, null,
-        React.createElement(DescriptionTerm, null, "Amount"),
-        React.createElement(DescriptionDetails, null, "$202.12")),
-    React.createElement(DescriptionGroup, null,
-        React.createElement(DescriptionTerm, null, "Amount after exchange"),
-        React.createElement(DescriptionDetails, null,
-            React.createElement(Flex, { as: "span", alignItems: "center", gap: "half" },
-                "US $202.12 ",
-                React.createElement(Icon, { icon: "arrowForward", color: "midGrey" }),
-                " CA $287.43")))));
+export const SampleContent = () => (_jsxs(_Fragment, { children: [_jsxs(DescriptionGroup, { children: [_jsx(DescriptionTerm, { children: "Customer" }), _jsx(DescriptionDetails, { children: "Nulogy" })] }), _jsxs(DescriptionGroup, { children: [_jsx(DescriptionTerm, { children: _jsxs(Text, { display: "inline-flex", alignItems: "center", children: ["Order number", _jsx(Tooltip, { tooltip: "The unique identifier assigned to this order when it was placed by the customer.", children: _jsx(Icon, { icon: "info", size: "x3", paddingLeft: "half" }) })] }) }), _jsx(DescriptionDetails, { children: _jsx(Link, { href: "/customer-details", children: "P12-90381-2039" }) })] }), _jsxs(DescriptionGroup, { children: [_jsx(DescriptionTerm, { children: "Status" }), _jsx(DescriptionDetails, { children: _jsx(StatusIndicator, { type: "success", children: "Paid" }) })] }), _jsxs(DescriptionGroup, { children: [_jsx(DescriptionTerm, { children: "Amount" }), _jsx(DescriptionDetails, { children: "$202.12" })] }), _jsxs(DescriptionGroup, { children: [_jsx(DescriptionTerm, { children: "Amount after exchange" }), _jsx(DescriptionDetails, { children: _jsxs(Flex, { as: "span", alignItems: "center", gap: "half", children: ["US $202.12 ", _jsx(Icon, { icon: "arrowForward", color: "midGrey" }), " CA $287.43"] }) })] })] }));

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

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

package/dist/src/Divider/Divider.story.js

@@ -1,23 +1,11 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Text } from "../Type";
 import { Divider } from ".";
 export default {
     title: "Components/Divider",
     component: Divider,
 };
-export const Default = () => (React.createElement("div", null,
-    React.createElement(Text, null, "Section A"),
-    React.createElement(Divider, null),
-    React.createElement(Text, null, "Section B")));
-export const Secondary = () => (React.createElement("div", null,
-    React.createElement(Text, null, "Section A"),
-    React.createElement(Divider, { secondary: true }),
-    React.createElement(Text, null, "Section B")));
-export const WithCustomColourAndSpacing = () => (React.createElement("div", null,
-    React.createElement(Text, null, "Section A"),
-    React.createElement(Divider, { borderColor: "darkBlue", my: "x1" }),
-    React.createElement(Text, null, "Section B")));
-export const WithCustomProperties = () => (React.createElement("div", null,
-    React.createElement(Text, null, "Section A"),
-    React.createElement(Divider, { borderColor: "none", height: "2px", backgroundImage: "linear-gradient(90deg, hsl(292deg 100% 97%) 0%, hsl(329deg 100% 19%) 17%, hsl(343deg 100% 36%) 33%, hsl(0deg 100% 50%) 50%, hsl(345deg 100% 69%) 67%, hsl(325deg 100% 84%) 83%, hsl(292deg 100% 97%) 100%);" }),
-    React.createElement(Text, null, "Section B")));
+export const Default = () => (_jsxs("div", { children: [_jsx(Text, { children: "Section A" }), _jsx(Divider, {}), _jsx(Text, { children: "Section B" })] }));
+export const Secondary = () => (_jsxs("div", { children: [_jsx(Text, { children: "Section A" }), _jsx(Divider, { secondary: true }), _jsx(Text, { children: "Section B" })] }));
+export const WithCustomColourAndSpacing = () => (_jsxs("div", { children: [_jsx(Text, { children: "Section A" }), _jsx(Divider, { borderColor: "darkBlue", my: "x1" }), _jsx(Text, { children: "Section B" })] }));
+export const WithCustomProperties = () => (_jsxs("div", { children: [_jsx(Text, { children: "Section A" }), _jsx(Divider, { borderColor: "none", height: "2px", backgroundImage: "linear-gradient(90deg, hsl(292deg 100% 97%) 0%, hsl(329deg 100% 19%) 17%, hsl(343deg 100% 36%) 33%, hsl(0deg 100% 50%) 50%, hsl(345deg 100% 69%) 67%, hsl(325deg 100% 84%) 83%, hsl(292deg 100% 97%) 100%);" }), _jsx(Text, { children: "Section B" })] }));

package/dist/src/DropdownMenu/DropdownMenu.js

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

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

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

package/dist/src/DropdownMenu/DropdownMenu.story.js

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

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

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

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

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

package/dist/src/FieldLabel/FieldLabel.js

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

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

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