@nulogy/components 16.0.0 → 16.0.2

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

@@ -1,4 +1,5 @@
-import React, { useState } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
 import { useTheme } from "styled-components";
 import { Box } from "../../Box";
 import { IconicButton } from "../../Button";
@@ -71,153 +72,87 @@ export const Playground = {
         const DescriptionListElement = (
         // @ts-expect-error - This is not a valid use of the component, since we're passing both columns and groupMinWidth,
         // but it's needed for this story
-        React.createElement(DescriptionList, { layout: layout, density: density, columns: columns, groupMinWidth: groupMinWidth, showDivider: showDivider, autoLayoutBreakpoint: autoLayoutBreakpoint, descriptionTermMaxWidth: descriptionTermMaxWidth, fontSize: fontSize, lineHeight: lineHeight },
-            React.createElement(DescriptionGroup, null,
-                React.createElement(OutlinedDt, { "$outlined": outlined, "$highlighted": false }, "Customer"),
-                React.createElement(OutlinedDd, { "$outlined": outlined, "$highlighted": false }, "Nulogy")),
-            React.createElement(DescriptionGroup, null,
-                React.createElement(OutlinedDt, { "$outlined": outlined, "$highlighted": false }, "Order number"),
-                React.createElement(OutlinedDd, { "$outlined": outlined, "$highlighted": false },
-                    React.createElement(Link, { href: "/customer-details" }, "P12-90381-2039"))),
-            React.createElement(DescriptionGroup, null,
-                React.createElement(OutlinedDt, { "$outlined": outlined, "$highlighted": false }, "Status"),
-                React.createElement(OutlinedDd, { "$outlined": outlined, "$highlighted": false },
-                    React.createElement(StatusIndicator, { type: "success" }, "Paid"))),
-            React.createElement(DescriptionGroup, null,
-                React.createElement(OutlinedDt, { "$outlined": outlined, "$highlighted": false }, "Amount"),
-                React.createElement(OutlinedDd, { "$outlined": outlined, "$highlighted": false }, "$202.12")),
-            additionalGroups.map((group, index) => (React.createElement(DescriptionGroup, { rowSpan: group.rowSpan, columnSpan: group.columnSpan, key: index },
-                React.createElement(OutlinedDt, { "$outlined": outlined, "$highlighted": hoveredGroupIndex === index }, group.dt),
-                React.createElement(OutlinedDd, { "$outlined": outlined, "$highlighted": hoveredGroupIndex === index }, group.dd))))));
-        return (React.createElement(Flex, null,
-            React.createElement(Sidebar, { height: "100%", width: "450px", hideCloseButton: true, isOpen: true, title: "Controls", overlay: "hide", top: "0px", bottom: "0px" },
-                React.createElement(Flex, { flexDirection: "column", gap: "x2" },
-                    React.createElement(Flex, { gap: "x2", flexDirection: "column" },
-                        React.createElement(Input, { value: descriptionTermMaxWidth, onChange: (e) => setDescriptionTermMaxWidth(e.target.value), labelText: "Description Term Max Width", placeholder: "e.g., 320px" }),
-                        React.createElement(Select, { value: layout, onChange: (value) => setLayout(value), options: [
-                                { value: "stacked", label: "Stacked" },
-                                { value: "inline", label: "Inline" },
-                                { value: "auto", label: "Auto" },
-                            ], labelText: "Layout" }),
-                        React.createElement(Input, { value: autoLayoutBreakpoint, onChange: (e) => setAutoLayoutBreakpoint(e.target.value), labelText: "Auto Layout Breakpoint", placeholder: "e.g., 640px", disabled: layout !== "auto" })),
-                    React.createElement(Select, { value: density, onChange: (value) => setDensity(value), options: [
-                            { value: "compact", label: "Compact" },
-                            { value: "medium", label: "Medium" },
-                            { value: "relaxed", label: "Relaxed" },
-                        ], labelText: "Density" }),
-                    React.createElement(Select, { value: fontSize, onChange: (value) => setFontSize(value), options: Object.keys(theme.fontSizes).map((size) => ({
-                            value: size,
-                            label: size,
-                        })), labelText: "Font Size" }),
-                    React.createElement(Select, { value: lineHeight, onChange: (value) => setLineHeight(value), options: Object.keys(theme.lineHeights).map((height) => ({
-                            value: height,
-                            label: height,
-                        })), labelText: "Line Height" }),
-                    React.createElement(Flex, { flexDirection: "column", gap: "x2" },
-                        React.createElement(Flex, { justifyContent: "space-between", alignItems: "center" },
-                            React.createElement(Text, { fontWeight: "bold" }, "Columns"),
-                            React.createElement(IconicButton, { onClick: () => {
-                                    const currentColumnValue = breakpointColumns[0].columns;
-                                    const availableBreakpoints = Object.keys(theme.breakpoints).filter((breakpoint) => !breakpointColumns.some((col) => col.breakpoint === breakpoint || breakpoint === "map"));
-                                    if (breakpointColumns.length === 1) {
-                                        // First time adding a breakpoint, convert the single column to a breakpoint
-                                        const firstBreakpoint = breakpointColumns[0].breakpoint;
-                                        setBreakpointColumns([
-                                            { breakpoint: firstBreakpoint, columns: currentColumnValue },
-                                            { breakpoint: availableBreakpoints[0], columns: currentColumnValue },
-                                        ]);
-                                        setColumns({
-                                            [firstBreakpoint]: currentColumnValue,
-                                            [availableBreakpoints[0]]: currentColumnValue,
-                                        });
-                                    }
-                                    else {
-                                        // Add another breakpoint
-                                        const nextBreakpoint = availableBreakpoints[0];
-                                        setBreakpointColumns([
-                                            ...breakpointColumns,
-                                            { breakpoint: nextBreakpoint, columns: currentColumnValue },
-                                        ]);
-                                        setColumns(Object.fromEntries([...breakpointColumns, { breakpoint: nextBreakpoint, columns: currentColumnValue }].map(({ breakpoint, columns }) => [breakpoint, columns])));
-                                    }
-                                }, icon: "add", tooltip: "Add column per breakpoint", disabled: breakpointColumns.length >= Object.keys(theme.breakpoints).length - 1 })),
-                        React.createElement(Flex, { flexDirection: "column", gap: "x2" }, breakpointColumns.map((breakpointColumn, index) => (React.createElement(Flex, { key: index, gap: "x2", alignItems: "flex-end" },
-                            breakpointColumns.length > 1 && (React.createElement(Select, { minWidth: "240px", value: breakpointColumn.breakpoint, onChange: (value) => {
-                                    const newBreakpointColumns = [...breakpointColumns];
-                                    newBreakpointColumns[index] = { ...breakpointColumn, breakpoint: value };
-                                    setBreakpointColumns(newBreakpointColumns);
-                                    setColumns(Object.fromEntries(newBreakpointColumns.map(({ breakpoint, columns }) => [breakpoint, columns])));
-                                }, options: Object.keys(theme.breakpoints)
-                                    .filter((breakpoint) => breakpoint === breakpointColumn.breakpoint ||
-                                    !breakpointColumns.some((col) => col.breakpoint === breakpoint || breakpoint === "map"))
-                                    .map((breakpoint) => ({
-                                    value: breakpoint,
-                                    label: `${breakpoint} (${theme.breakpoints[breakpoint]})`,
-                                })), labelText: index === 0 ? "Breakpoint" : undefined })),
-                            React.createElement(Input, { inputWidth: breakpointColumns.length === 1 ? undefined : "95px", type: "number", value: breakpointColumn.columns, onChange: (e) => {
-                                    const newValue = Math.max(1, Number(e.target.value));
-                                    const newBreakpointColumns = [...breakpointColumns];
-                                    newBreakpointColumns[index] = {
-                                        ...breakpointColumn,
-                                        columns: newValue,
-                                    };
-                                    setBreakpointColumns(newBreakpointColumns);
-                                    if (breakpointColumns.length === 1) {
-                                        setColumns(newValue);
-                                    }
-                                    else {
-                                        setColumns(Object.fromEntries(newBreakpointColumns.map(({ breakpoint, columns }) => [breakpoint, columns])));
-                                    }
-                                }, labelText: breakpointColumns.length === 1 ? "Number of columns" : index === 0 ? "Columns" : undefined, placeholder: "Number of columns", min: 1 }),
-                            breakpointColumns.length > 1 && (React.createElement(IconicButton, { icon: "delete", onClick: () => {
-                                    const newBreakpointColumns = breakpointColumns.filter((_, i) => i !== index);
-                                    if (newBreakpointColumns.length === 1) {
-                                        // Convert back to single number when only one breakpoint remains
-                                        setColumns(newBreakpointColumns[0].columns);
-                                        setBreakpointColumns(newBreakpointColumns);
-                                    }
-                                    else {
-                                        setBreakpointColumns(newBreakpointColumns);
-                                        setColumns(Object.fromEntries(newBreakpointColumns.map(({ breakpoint, columns }) => [breakpoint, columns])));
-                                    }
-                                } }))))))),
-                    React.createElement(Input, { value: groupMinWidth ?? "", onChange: (e) => {
-                            const value = e.target.value || undefined;
-                            setGroupMinWidth(value);
-                            if (value)
-                                setColumns(undefined);
-                        }, labelText: "Group Min Width", placeholder: "e.g., 200px", disabled: !!columns }),
-                    React.createElement(Checkbox, { labelText: "Show divider", checked: showDivider, onChange: () => setShowDivider(!showDivider) }),
-                    React.createElement(HorizontalDivider, null),
-                    React.createElement(Text, { fontWeight: "bold" }, "Debugging"),
-                    React.createElement(Checkbox, { labelText: "Show Group outline", checked: outlined, onChange: () => setOutlined(!outlined) }),
-                    React.createElement(Input, { value: containerWidth, onChange: (e) => setContainerWidth(e.target.value), labelText: "Container Width", placeholder: "e.g., 720px" }),
-                    React.createElement(Checkbox, { labelText: "Show container outline", checked: containerOutline, onChange: () => setContainerOutline(!containerOutline) }),
-                    React.createElement(HorizontalDivider, null),
-                    React.createElement(Flex, { justifyContent: "space-between", alignItems: "center" },
-                        React.createElement(Text, { fontWeight: "bold" }, "Additional Groups"),
-                        React.createElement(IconicButton, { onClick: addRandomGroup, icon: "add" })),
-                    React.createElement(Box, null,
-                        additionalGroups.length === 0 && (React.createElement(Text, { fontSize: "sm", color: "midGrey" }, "No additional groups")),
-                        React.createElement(Flex, { flexDirection: "column" }, additionalGroups.map((group, index) => (React.createElement(React.Fragment, null,
-                            index > 0 && React.createElement(HorizontalDivider, null),
-                            React.createElement(Box, { key: index, onMouseEnter: () => setHoveredGroupIndex(index), onMouseLeave: () => setHoveredGroupIndex(null) },
-                                React.createElement(Flex, { justifyContent: "space-between", alignItems: "center", mb: group.isExpanded ? "x2" : "none" },
-                                    React.createElement(Flex, { alignItems: "center", gap: "x2" },
-                                        React.createElement(IconicButton, { icon: group.isExpanded ? "downArrow" : "rightArrow", onClick: () => toggleGroupExpansion(index) }),
-                                        React.createElement(Text, null,
-                                            "Group ",
-                                            index + 1)),
-                                    React.createElement(IconicButton, { onClick: () => deleteGroup(index), icon: "delete" })),
-                                group.isExpanded && (React.createElement(Flex, { flexDirection: "column", gap: "x2" },
-                                    React.createElement(Input, { value: group.dt, onChange: (e) => updateGroup(index, { dt: e.target.value }), labelText: "Description Term" }),
-                                    React.createElement(Textarea, { value: group.dd, onChange: (e) => updateGroup(index, { dd: e.target.value }), labelText: "Description Data" }),
-                                    React.createElement(Flex, { gap: "x2" },
-                                        React.createElement(Input, { type: "number", value: group.rowSpan, onChange: (e) => updateGroup(index, { rowSpan: Number(e.target.value) }), labelText: "Row Span", min: 1 }),
-                                        React.createElement(Input, { type: "number", value: group.columnSpan, onChange: (e) => updateGroup(index, { columnSpan: Number(e.target.value) }), labelText: "Column Span", min: 1 })))))))))))),
-            React.createElement(Box, { flex: 1 },
-                React.createElement(Heading1, { mb: "x3" }, "Playground"),
-                React.createElement(Resizable, { containerWidth: containerWidth, onResize: (width) => setContainerWidth(`${width}px`), showContainerOutline: containerOutline }, DescriptionListElement))));
+        _jsxs(DescriptionList, { layout: layout, density: density, columns: columns, groupMinWidth: groupMinWidth, showDivider: showDivider, autoLayoutBreakpoint: autoLayoutBreakpoint, descriptionTermMaxWidth: descriptionTermMaxWidth, fontSize: fontSize, lineHeight: lineHeight, children: [_jsxs(DescriptionGroup, { children: [_jsx(OutlinedDt, { "$outlined": outlined, "$highlighted": false, children: "Customer" }), _jsx(OutlinedDd, { "$outlined": outlined, "$highlighted": false, children: "Nulogy" })] }), _jsxs(DescriptionGroup, { children: [_jsx(OutlinedDt, { "$outlined": outlined, "$highlighted": false, children: "Order number" }), _jsx(OutlinedDd, { "$outlined": outlined, "$highlighted": false, children: _jsx(Link, { href: "/customer-details", children: "P12-90381-2039" }) })] }), _jsxs(DescriptionGroup, { children: [_jsx(OutlinedDt, { "$outlined": outlined, "$highlighted": false, children: "Status" }), _jsx(OutlinedDd, { "$outlined": outlined, "$highlighted": false, children: _jsx(StatusIndicator, { type: "success", children: "Paid" }) })] }), _jsxs(DescriptionGroup, { children: [_jsx(OutlinedDt, { "$outlined": outlined, "$highlighted": false, children: "Amount" }), _jsx(OutlinedDd, { "$outlined": outlined, "$highlighted": false, children: "$202.12" })] }), additionalGroups.map((group, index) => (_jsxs(DescriptionGroup, { rowSpan: group.rowSpan, columnSpan: group.columnSpan, children: [_jsx(OutlinedDt, { "$outlined": outlined, "$highlighted": hoveredGroupIndex === index, children: group.dt }), _jsx(OutlinedDd, { "$outlined": outlined, "$highlighted": hoveredGroupIndex === index, children: group.dd })] }, index)))] }));
+        return (_jsxs(Flex, { children: [_jsx(Sidebar, { height: "100%", width: "450px", hideCloseButton: true, isOpen: true, title: "Controls", overlay: "hide", top: "0px", bottom: "0px", children: _jsxs(Flex, { flexDirection: "column", gap: "x2", children: [_jsxs(Flex, { gap: "x2", flexDirection: "column", children: [_jsx(Input, { value: descriptionTermMaxWidth, onChange: (e) => setDescriptionTermMaxWidth(e.target.value), labelText: "Description Term Max Width", placeholder: "e.g., 320px" }), _jsx(Select, { value: layout, onChange: (value) => setLayout(value), options: [
+                                            { value: "stacked", label: "Stacked" },
+                                            { value: "inline", label: "Inline" },
+                                            { value: "auto", label: "Auto" },
+                                        ], labelText: "Layout" }), _jsx(Input, { value: autoLayoutBreakpoint, onChange: (e) => setAutoLayoutBreakpoint(e.target.value), labelText: "Auto Layout Breakpoint", placeholder: "e.g., 640px", disabled: layout !== "auto" })] }), _jsx(Select, { value: density, onChange: (value) => setDensity(value), options: [
+                                    { value: "compact", label: "Compact" },
+                                    { value: "medium", label: "Medium" },
+                                    { value: "relaxed", label: "Relaxed" },
+                                ], labelText: "Density" }), _jsx(Select, { value: fontSize, onChange: (value) => setFontSize(value), options: Object.keys(theme.fontSizes).map((size) => ({
+                                    value: size,
+                                    label: size,
+                                })), labelText: "Font Size" }), _jsx(Select, { value: lineHeight, onChange: (value) => setLineHeight(value), options: Object.keys(theme.lineHeights).map((height) => ({
+                                    value: height,
+                                    label: height,
+                                })), labelText: "Line Height" }), _jsxs(Flex, { flexDirection: "column", gap: "x2", children: [_jsxs(Flex, { justifyContent: "space-between", alignItems: "center", children: [_jsx(Text, { fontWeight: "bold", children: "Columns" }), _jsx(IconicButton, { onClick: () => {
+                                                    const currentColumnValue = breakpointColumns[0].columns;
+                                                    const availableBreakpoints = Object.keys(theme.breakpoints).filter((breakpoint) => !breakpointColumns.some((col) => col.breakpoint === breakpoint || breakpoint === "map"));
+                                                    if (breakpointColumns.length === 1) {
+                                                        // First time adding a breakpoint, convert the single column to a breakpoint
+                                                        const firstBreakpoint = breakpointColumns[0].breakpoint;
+                                                        setBreakpointColumns([
+                                                            { breakpoint: firstBreakpoint, columns: currentColumnValue },
+                                                            { breakpoint: availableBreakpoints[0], columns: currentColumnValue },
+                                                        ]);
+                                                        setColumns({
+                                                            [firstBreakpoint]: currentColumnValue,
+                                                            [availableBreakpoints[0]]: currentColumnValue,
+                                                        });
+                                                    }
+                                                    else {
+                                                        // Add another breakpoint
+                                                        const nextBreakpoint = availableBreakpoints[0];
+                                                        setBreakpointColumns([
+                                                            ...breakpointColumns,
+                                                            { breakpoint: nextBreakpoint, columns: currentColumnValue },
+                                                        ]);
+                                                        setColumns(Object.fromEntries([...breakpointColumns, { breakpoint: nextBreakpoint, columns: currentColumnValue }].map(({ breakpoint, columns }) => [breakpoint, columns])));
+                                                    }
+                                                }, icon: "add", tooltip: "Add column per breakpoint", disabled: breakpointColumns.length >= Object.keys(theme.breakpoints).length - 1 })] }), _jsx(Flex, { flexDirection: "column", gap: "x2", children: breakpointColumns.map((breakpointColumn, index) => (_jsxs(Flex, { gap: "x2", alignItems: "flex-end", children: [breakpointColumns.length > 1 && (_jsx(Select, { minWidth: "240px", value: breakpointColumn.breakpoint, onChange: (value) => {
+                                                        const newBreakpointColumns = [...breakpointColumns];
+                                                        newBreakpointColumns[index] = { ...breakpointColumn, breakpoint: value };
+                                                        setBreakpointColumns(newBreakpointColumns);
+                                                        setColumns(Object.fromEntries(newBreakpointColumns.map(({ breakpoint, columns }) => [breakpoint, columns])));
+                                                    }, options: Object.keys(theme.breakpoints)
+                                                        .filter((breakpoint) => breakpoint === breakpointColumn.breakpoint ||
+                                                        !breakpointColumns.some((col) => col.breakpoint === breakpoint || breakpoint === "map"))
+                                                        .map((breakpoint) => ({
+                                                        value: breakpoint,
+                                                        label: `${breakpoint} (${theme.breakpoints[breakpoint]})`,
+                                                    })), labelText: index === 0 ? "Breakpoint" : undefined })), _jsx(Input, { inputWidth: breakpointColumns.length === 1 ? undefined : "95px", type: "number", value: breakpointColumn.columns, onChange: (e) => {
+                                                        const newValue = Math.max(1, Number(e.target.value));
+                                                        const newBreakpointColumns = [...breakpointColumns];
+                                                        newBreakpointColumns[index] = {
+                                                            ...breakpointColumn,
+                                                            columns: newValue,
+                                                        };
+                                                        setBreakpointColumns(newBreakpointColumns);
+                                                        if (breakpointColumns.length === 1) {
+                                                            setColumns(newValue);
+                                                        }
+                                                        else {
+                                                            setColumns(Object.fromEntries(newBreakpointColumns.map(({ breakpoint, columns }) => [breakpoint, columns])));
+                                                        }
+                                                    }, labelText: breakpointColumns.length === 1 ? "Number of columns" : index === 0 ? "Columns" : undefined, placeholder: "Number of columns", min: 1 }), breakpointColumns.length > 1 && (_jsx(IconicButton, { icon: "delete", onClick: () => {
+                                                        const newBreakpointColumns = breakpointColumns.filter((_, i) => i !== index);
+                                                        if (newBreakpointColumns.length === 1) {
+                                                            // Convert back to single number when only one breakpoint remains
+                                                            setColumns(newBreakpointColumns[0].columns);
+                                                            setBreakpointColumns(newBreakpointColumns);
+                                                        }
+                                                        else {
+                                                            setBreakpointColumns(newBreakpointColumns);
+                                                            setColumns(Object.fromEntries(newBreakpointColumns.map(({ breakpoint, columns }) => [breakpoint, columns])));
+                                                        }
+                                                    } }))] }, index))) })] }), _jsx(Input, { value: groupMinWidth ?? "", onChange: (e) => {
+                                    const value = e.target.value || undefined;
+                                    setGroupMinWidth(value);
+                                    if (value)
+                                        setColumns(undefined);
+                                }, labelText: "Group Min Width", placeholder: "e.g., 200px", disabled: !!columns }), _jsx(Checkbox, { labelText: "Show divider", checked: showDivider, onChange: () => setShowDivider(!showDivider) }), _jsx(HorizontalDivider, {}), _jsx(Text, { fontWeight: "bold", children: "Debugging" }), _jsx(Checkbox, { labelText: "Show Group outline", checked: outlined, onChange: () => setOutlined(!outlined) }), _jsx(Input, { value: containerWidth, onChange: (e) => setContainerWidth(e.target.value), labelText: "Container Width", placeholder: "e.g., 720px" }), _jsx(Checkbox, { labelText: "Show container outline", checked: containerOutline, onChange: () => setContainerOutline(!containerOutline) }), _jsx(HorizontalDivider, {}), _jsxs(Flex, { justifyContent: "space-between", alignItems: "center", children: [_jsx(Text, { fontWeight: "bold", children: "Additional Groups" }), _jsx(IconicButton, { onClick: addRandomGroup, icon: "add" })] }), _jsxs(Box, { children: [additionalGroups.length === 0 && (_jsx(Text, { fontSize: "sm", color: "midGrey", children: "No additional groups" })), _jsx(Flex, { flexDirection: "column", children: additionalGroups.map((group, index) => (_jsxs(_Fragment, { children: [index > 0 && _jsx(HorizontalDivider, {}), _jsxs(Box, { onMouseEnter: () => setHoveredGroupIndex(index), onMouseLeave: () => setHoveredGroupIndex(null), children: [_jsxs(Flex, { justifyContent: "space-between", alignItems: "center", mb: group.isExpanded ? "x2" : "none", children: [_jsxs(Flex, { alignItems: "center", gap: "x2", children: [_jsx(IconicButton, { icon: group.isExpanded ? "downArrow" : "rightArrow", onClick: () => toggleGroupExpansion(index) }), _jsxs(Text, { children: ["Group ", index + 1] })] }), _jsx(IconicButton, { onClick: () => deleteGroup(index), icon: "delete" })] }), group.isExpanded && (_jsxs(Flex, { flexDirection: "column", gap: "x2", children: [_jsx(Input, { value: group.dt, onChange: (e) => updateGroup(index, { dt: e.target.value }), labelText: "Description Term" }), _jsx(Textarea, { value: group.dd, onChange: (e) => updateGroup(index, { dd: e.target.value }), labelText: "Description Data" }), _jsxs(Flex, { gap: "x2", children: [_jsx(Input, { type: "number", value: group.rowSpan, onChange: (e) => updateGroup(index, { rowSpan: Number(e.target.value) }), labelText: "Row Span", min: 1 }), _jsx(Input, { type: "number", value: group.columnSpan, onChange: (e) => updateGroup(index, { columnSpan: Number(e.target.value) }), labelText: "Column Span", min: 1 })] })] }))] }, index)] }))) })] })] }) }), _jsxs(Box, { flex: 1, children: [_jsx(Heading1, { mb: "x3", children: "Playground" }), _jsx(Resizable, { containerWidth: containerWidth, onResize: (width) => setContainerWidth(`${width}px`), showContainerOutline: containerOutline, children: DescriptionListElement })] })] }));
     },
     parameters: {
         chromatic: { disable: true },

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

@@ -11,7 +11,7 @@ export declare const OutlinedDd: import("styled-components/dist/types").IStyledC
     $outlined: boolean;
     $highlighted?: boolean;
 }>> & string;
-export declare const DashedBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<(Record<string, unknown> & {
-    children?: React.ReactNode | undefined;
+export declare const DashedBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<(Omit<Record<string, unknown>, "ref"> & {
+    ref?: unknown;
 }) | (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" })] }));