@nulogy/components 16.0.0 → 16.0.1

package/dist/src/DateRange/DateRange.story.js

@@ -1,15 +1,16 @@
-import React, { useRef } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
 import { action } from "@storybook/addon-actions";
 import { Button, Box, Flex, PrimaryButton } from "..";
 import DateRange from "./DateRange";
 export default {
     title: "Components/DateRange",
 };
-export const Default = () => (React.createElement(DateRange, { p: "x3", onRangeChange: action("range changed"), onStartDateChange: action("start date changed"), onEndDateChange: action("end date changed") }));
-export const DefaultStartAndEndDate = () => (React.createElement(DateRange, { defaultStartDate: new Date("2019-01-01T05:00:00.000Z"), defaultEndDate: new Date("2019-01-05T05:00:00.000Z"), onRangeChange: action("range changed"), onStartDateChange: action("start date changed"), onEndDateChange: action("end date changed") }));
-export const DisabledRangeValidation = () => (React.createElement(DateRange, { disableRangeValidation: true, defaultEndDate: new Date("2019-07-05T05:00:00.000Z"), defaultStartDate: new Date("2019-09-10T05:00:00.000Z"), onRangeChange: action("range changed"), onStartDateChange: action("start date changed"), onEndDateChange: action("end date changed") }));
-export const WithCustomError = () => (React.createElement(DateRange, { errorMessage: "This range conflicts with another range", defaultStartDate: new Date("2019-07-05T05:00:00.000Z"), defaultEndDate: new Date("2019-09-10T05:00:00.000Z"), onRangeChange: action("range changed"), onStartDateChange: action("start date changed"), onEndDateChange: action("end date changed") }));
-export const CustomizingInputProps = () => (React.createElement(DateRange, { startDateInputProps: {
+export const Default = () => (_jsx(DateRange, { p: "x3", onRangeChange: action("range changed"), onStartDateChange: action("start date changed"), onEndDateChange: action("end date changed") }));
+export const DefaultStartAndEndDate = () => (_jsx(DateRange, { defaultStartDate: new Date("2019-01-01T05:00:00.000Z"), defaultEndDate: new Date("2019-01-05T05:00:00.000Z"), onRangeChange: action("range changed"), onStartDateChange: action("start date changed"), onEndDateChange: action("end date changed") }));
+export const DisabledRangeValidation = () => (_jsx(DateRange, { disableRangeValidation: true, defaultEndDate: new Date("2019-07-05T05:00:00.000Z"), defaultStartDate: new Date("2019-09-10T05:00:00.000Z"), onRangeChange: action("range changed"), onStartDateChange: action("start date changed"), onEndDateChange: action("end date changed") }));
+export const WithCustomError = () => (_jsx(DateRange, { errorMessage: "This range conflicts with another range", defaultStartDate: new Date("2019-07-05T05:00:00.000Z"), defaultEndDate: new Date("2019-09-10T05:00:00.000Z"), onRangeChange: action("range changed"), onStartDateChange: action("start date changed"), onEndDateChange: action("end date changed") }));
+export const CustomizingInputProps = () => (_jsx(DateRange, { startDateInputProps: {
         placeholder: "From (Mon YYYY)",
         inputWidth: "280px",
         labelText: "From",
@@ -21,7 +22,7 @@ export const CustomizingInputProps = () => (React.createElement(DateRange, { sta
     }, labelProps: { labelText: "" }, onRangeChange: action("range changed"), onStartDateChange: action("start date changed"), onEndDateChange: action("end date changed"), errorMessage: "Start date is required." }));
 export const Disabled = () => {
     const NON_BREAKING_SPACE = "\u00A0";
-    return (React.createElement(DateRange, { startDateInputProps: {
+    return (_jsx(DateRange, { startDateInputProps: {
             placeholder: "From (Mon YYYY)",
             labelText: "From",
             disabled: true,
@@ -37,11 +38,11 @@ export const Disabled = () => {
             disabled: true,
         } }));
 };
-export const IndividualInputError = () => (React.createElement(DateRange, { errorMessage: "Start date is required", startDateInputProps: { required: true }, defaultEndDate: new Date("2019-09-10T05:00:00.000Z"), onRangeChange: action("range changed"), onStartDateChange: action("start date changed"), onEndDateChange: action("end date changed") }));
-export const WithTimes = () => (React.createElement(DateRange, { defaultStartDate: new Date("2019-01-01T05:00:00.000Z"), defaultEndDate: new Date("2019-01-05T05:00:00.000Z"), onRangeChange: action("range changed"), onStartDateChange: action("start date changed"), onEndDateChange: action("end date changed"), showTimes: true }));
-export const CustomizingInputPropsWithTimes = () => (React.createElement(DateRange, { startDateInputProps: { placeholder: "From", inputWidth: "280px" }, endDateInputProps: { placeholder: "To", inputWidth: "280px" }, onRangeChange: action("range changed"), onStartDateChange: action("start date changed"), onEndDateChange: action("end date changed"), showTimes: true }));
-export const WithDefaultStartAndEndTimes = () => (React.createElement(DateRange, { onRangeChange: action("range changed"), onStartDateChange: action("start date changed"), onEndDateChange: action("end date changed"), defaultStartDate: new Date("2019-07-05T05:00:00.000Z"), defaultEndDate: new Date("2019-09-10T05:00:00.000Z"), showTimes: true, defaultStartTime: "03:30", defaultEndTime: "13:30" }));
-export const WithTimeError = () => (React.createElement(DateRange, { onRangeChange: action("range changed"), onStartDateChange: action("start date changed"), onEndDateChange: action("end date changed"), defaultStartDate: new Date("2019-07-05T05:00:00.000Z"), defaultEndDate: new Date("2019-07-05T05:00:00.000Z"), showTimes: true, defaultStartTime: "13:30", defaultEndTime: "10:30" }));
+export const IndividualInputError = () => (_jsx(DateRange, { errorMessage: "Start date is required", startDateInputProps: { required: true }, defaultEndDate: new Date("2019-09-10T05:00:00.000Z"), onRangeChange: action("range changed"), onStartDateChange: action("start date changed"), onEndDateChange: action("end date changed") }));
+export const WithTimes = () => (_jsx(DateRange, { defaultStartDate: new Date("2019-01-01T05:00:00.000Z"), defaultEndDate: new Date("2019-01-05T05:00:00.000Z"), onRangeChange: action("range changed"), onStartDateChange: action("start date changed"), onEndDateChange: action("end date changed"), showTimes: true }));
+export const CustomizingInputPropsWithTimes = () => (_jsx(DateRange, { startDateInputProps: { placeholder: "From", inputWidth: "280px" }, endDateInputProps: { placeholder: "To", inputWidth: "280px" }, onRangeChange: action("range changed"), onStartDateChange: action("start date changed"), onEndDateChange: action("end date changed"), showTimes: true }));
+export const WithDefaultStartAndEndTimes = () => (_jsx(DateRange, { onRangeChange: action("range changed"), onStartDateChange: action("start date changed"), onEndDateChange: action("end date changed"), defaultStartDate: new Date("2019-07-05T05:00:00.000Z"), defaultEndDate: new Date("2019-09-10T05:00:00.000Z"), showTimes: true, defaultStartTime: "03:30", defaultEndTime: "13:30" }));
+export const WithTimeError = () => (_jsx(DateRange, { onRangeChange: action("range changed"), onStartDateChange: action("start date changed"), onEndDateChange: action("end date changed"), defaultStartDate: new Date("2019-07-05T05:00:00.000Z"), defaultEndDate: new Date("2019-07-05T05:00:00.000Z"), showTimes: true, defaultStartTime: "13:30", defaultEndTime: "10:30" }));
 export const UsingRefToControlFocus = () => {
     const ref = useRef(null);
     const focusStartDate = () => {
@@ -56,12 +57,5 @@ export const UsingRefToControlFocus = () => {
     const focusEndTime = () => {
         ref.current.timeRef2.focus();
     };
-    return (React.createElement(Flex, { flexDirection: "column" },
-        React.createElement(Box, null,
-            React.createElement(DateRange, { onRangeChange: action("range changed"), onStartDateChange: action("start date changed"), onEndDateChange: action("end date changed"), defaultStartDate: new Date("2019-07-05T05:00:00.000Z"), defaultEndDate: new Date("2019-09-10T05:00:00.000Z"), showTimes: true, defaultStartTime: "03:30", defaultEndTime: "13:30", ref: ref })),
-        React.createElement(Flex, null,
-            React.createElement(Button, { onClick: focusStartDate }, "Focus Start Date"),
-            React.createElement(PrimaryButton, { onClick: focusStartTime, ml: "x2" }, "Focus Start Time"),
-            React.createElement(Button, { onClick: focusEndTime, ml: "x2" }, "Focus End Time"),
-            React.createElement(PrimaryButton, { onClick: focusEndDate, ml: "x2" }, "Focus End Date"))));
+    return (_jsxs(Flex, { flexDirection: "column", children: [_jsx(Box, { children: _jsx(DateRange, { onRangeChange: action("range changed"), onStartDateChange: action("start date changed"), onEndDateChange: action("end date changed"), defaultStartDate: new Date("2019-07-05T05:00:00.000Z"), defaultEndDate: new Date("2019-09-10T05:00:00.000Z"), showTimes: true, defaultStartTime: "03:30", defaultEndTime: "13:30", ref: ref }) }), _jsxs(Flex, { children: [_jsx(Button, { onClick: focusStartDate, children: "Focus Start Date" }), _jsx(PrimaryButton, { onClick: focusStartTime, ml: "x2", children: "Focus Start Time" }), _jsx(Button, { onClick: focusEndTime, ml: "x2", children: "Focus End Time" }), _jsx(PrimaryButton, { onClick: focusEndDate, ml: "x2", children: "Focus End Date" })] })] }));
 };

package/dist/src/Decorations/index.d.ts

@@ -1,3 +1,2 @@
-import React from "react";
 import { BoxProps } from "../Box";
-export default function BackgroundTriangles(props: BoxProps): React.JSX.Element;
+export default function BackgroundTriangles(props: BoxProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/Decorations/index.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTheme } from "styled-components";
 import { styled } from "styled-components";
 import { Box } from "../Box";
@@ -11,7 +11,5 @@ const RightAngleTriangle = styled(Box) `
 `;
 export default function BackgroundTriangles(props) {
     const theme = useTheme();
-    return (React.createElement(Box, { "aria-hidden": "true", transition: "max-width 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955)", position: "absolute", bottom: 0, right: 0, height: "100%", maxWidth: { extraSmall: "320px", small: "768px", medium: "1024px", large: "1280px" }, width: "90%", ...props },
-        React.createElement(RightAngleTriangle, { "aria-hidden": "true", height: "44.85%", opacity: "0.5", background: "linear-gradient(178.25deg, rgba(192, 200, 209, 0.5) 62.98%, rgba(225, 235, 250, 0.25) 98.52%)" }),
-        React.createElement(RightAngleTriangle, { "aria-hidden": "true", height: "19.85%", opacity: "0.25", background: `linear-gradient(196.88deg, ${theme.colors.grey} 11.92%, rgba(0, 67, 143, 0) 88.36%)` })));
+    return (_jsxs(Box, { "aria-hidden": "true", transition: "max-width 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955)", position: "absolute", bottom: 0, right: 0, height: "100%", maxWidth: { extraSmall: "320px", small: "768px", medium: "1024px", large: "1280px" }, width: "90%", ...props, children: [_jsx(RightAngleTriangle, { "aria-hidden": "true", height: "44.85%", opacity: "0.5", background: "linear-gradient(178.25deg, rgba(192, 200, 209, 0.5) 62.98%, rgba(225, 235, 250, 0.25) 98.52%)" }), _jsx(RightAngleTriangle, { "aria-hidden": "true", height: "19.85%", opacity: "0.25", background: `linear-gradient(196.88deg, ${theme.colors.grey} 11.92%, rgba(0, 67, 143, 0) 88.36%)` })] }));
 }

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

@@ -1,3 +1,2 @@
-import React from "react";
 import { DescriptionListProps } from "./lib/types";
-export default function DescriptionList({ descriptionTermMaxWidth, layout, autoLayoutBreakpoint, showDivider, density, fontSize, lineHeight, children, ...props }: DescriptionListProps): React.JSX.Element;
+export default function DescriptionList({ descriptionTermMaxWidth, layout, autoLayoutBreakpoint, showDivider, density, fontSize, lineHeight, children, ...props }: DescriptionListProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/DescriptionList/DescriptionList.js

@@ -1,10 +1,8 @@
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { DescriptionListProvider } from "./DescriptionListContext";
 import { validateAndExtractGridProps } from "./lib/utils";
 import { DescriptionList as Dl, DescriptionListContainer } from "./DescriptionList.parts";
 export default function DescriptionList({ descriptionTermMaxWidth = "320px", layout = "stacked", autoLayoutBreakpoint = "640px", showDivider = false, density = "medium", fontSize = "medium", lineHeight = "base", children, ...props }) {
     const { columns, groupMinWidth } = validateAndExtractGridProps(props);
-    return (React.createElement(DescriptionListProvider, { descriptionTermMaxWidth: descriptionTermMaxWidth, layout: layout, autoLayoutBreakpoint: autoLayoutBreakpoint, showDivider: showDivider, density: density, fontSize: fontSize, lineHeight: lineHeight, columns: columns, groupMinWidth: groupMinWidth },
-        React.createElement(DescriptionListContainer, null,
-            React.createElement(Dl, null, children))));
+    return (_jsx(DescriptionListProvider, { descriptionTermMaxWidth: descriptionTermMaxWidth, layout: layout, autoLayoutBreakpoint: autoLayoutBreakpoint, showDivider: showDivider, density: density, fontSize: fontSize, lineHeight: lineHeight, columns: columns, groupMinWidth: groupMinWidth, children: _jsx(DescriptionListContainer, { children: _jsx(Dl, { children: children }) }) }));
 }

package/dist/src/DescriptionList/DescriptionListContext.d.ts

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren } from "react";
+import { PropsWithChildren } from "react";
 import { Breakpoints } from "../theme/theme.type";
 import { DefaultNDSThemeType } from "../theme";
 import { Density } from "./lib/types";
@@ -14,6 +14,6 @@ interface DescriptionListContextProps {
     columns?: number | Partial<Record<keyof Breakpoints, number>>;
     groupMinWidth?: string;
 }
-export declare const DescriptionListProvider: ({ children, ...contextProps }: PropsWithChildren<DescriptionListContextProps>) => React.JSX.Element;
+export declare const DescriptionListProvider: ({ children, ...contextProps }: PropsWithChildren<DescriptionListContextProps>) => import("react/jsx-runtime").JSX.Element;
 export declare const useDescriptionListContext: () => DescriptionListContextProps;
 export {};

package/dist/src/DescriptionList/DescriptionListContext.js

@@ -1,6 +1,7 @@
-import React, { createContext, useContext } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
 const DescriptionListContext = createContext(undefined);
-export const DescriptionListProvider = ({ children, ...contextProps }) => (React.createElement(DescriptionListContext.Provider, { value: contextProps }, children));
+export const DescriptionListProvider = ({ children, ...contextProps }) => (_jsx(DescriptionListContext.Provider, { value: contextProps, children: children }));
 export const useDescriptionListContext = () => {
     const context = useContext(DescriptionListContext);
     if (!context) {

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

@@ -1,14 +1,13 @@
-import React from "react";
 import DescriptionList from "../DescriptionList";
 declare const _default: {
     title: string;
     component: typeof DescriptionList;
 };
 export default _default;
-export declare const TwoColumns: () => React.JSX.Element;
-export declare const ThreeColumns: () => React.JSX.Element;
+export declare const TwoColumns: () => import("react/jsx-runtime").JSX.Element;
+export declare const ThreeColumns: () => import("react/jsx-runtime").JSX.Element;
 export declare const ResponsiveColumns: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     parameters: {
         chromatic: {
             viewports: number[];

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

@@ -1,4 +1,5 @@
-import React, { useState } from "react";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
 import { Checkbox } from "../../Checkbox";
 import { Flex } from "../../Flex";
 import { Heading1, Text } from "../../Type";
@@ -16,32 +17,12 @@ export default {
 };
 const ColumnDemo = ({ resizable = false, columns, title, description, info, }) => {
     const [outlined, setOutlined] = useState(true);
-    const DescriptionListElement = (React.createElement(DescriptionList, { columns: columns }, [1, 2, 3, 4, 5, 6].map((i) => (React.createElement(DescriptionGroup, { key: i },
-        React.createElement(OutlinedDt, { "$outlined": outlined },
-            "Key ",
-            i),
-        React.createElement(OutlinedDd, { "$outlined": outlined },
-            "Value ",
-            i))))));
-    return (React.createElement(Flex, { flexDirection: "column", gap: "x4" },
-        React.createElement(Flex, { flexDirection: "column", gap: "x1" },
-            React.createElement(Flex, { flexDirection: "row", alignItems: "baseline", gap: "half" },
-                React.createElement(Heading1, { compact: true }, title),
-                React.createElement(VerticalDivider, null),
-                React.createElement(Checkbox, { labelText: "Show group outline", checked: outlined, onChange: () => setOutlined(!outlined) })),
-            description && React.createElement(Text, { fontSize: "sm" }, description),
-            info && (React.createElement(Flex, { alignItems: "center", gap: "half" },
-                React.createElement(Icon, { icon: "info", color: "midGrey" }),
-                typeof info === "string" ? (React.createElement(Text, { fontSize: "sm", color: "darkGrey" }, info)) : (info)))),
-        resizable ? (React.createElement(Resizable, { containerWidth: "100%", showContainerOutline: true }, DescriptionListElement)) : (DescriptionListElement)));
+    const DescriptionListElement = (_jsx(DescriptionList, { columns: columns, children: [1, 2, 3, 4, 5, 6].map((i) => (_jsxs(DescriptionGroup, { children: [_jsxs(OutlinedDt, { "$outlined": outlined, children: ["Key ", i] }), _jsxs(OutlinedDd, { "$outlined": outlined, children: ["Value ", i] })] }, i))) }));
+    return (_jsxs(Flex, { flexDirection: "column", gap: "x4", children: [_jsxs(Flex, { flexDirection: "column", gap: "x1", children: [_jsxs(Flex, { flexDirection: "row", alignItems: "baseline", gap: "half", children: [_jsx(Heading1, { compact: true, children: title }), _jsx(VerticalDivider, {}), _jsx(Checkbox, { labelText: "Show group outline", checked: outlined, onChange: () => setOutlined(!outlined) })] }), description && _jsx(Text, { fontSize: "sm", children: description }), info && (_jsxs(Flex, { alignItems: "center", gap: "half", children: [_jsx(Icon, { icon: "info", color: "midGrey" }), typeof info === "string" ? (_jsx(Text, { fontSize: "sm", color: "darkGrey", children: info })) : (info)] }))] }), resizable ? (_jsx(Resizable, { containerWidth: "100%", showContainerOutline: true, children: DescriptionListElement })) : (DescriptionListElement)] }));
 };
-export const TwoColumns = () => React.createElement(ColumnDemo, { title: "Two Columns", columns: 2 });
-export const ThreeColumns = () => React.createElement(ColumnDemo, { title: "Three Columns", columns: 3 });
-export const ResponsiveColumns = () => (React.createElement(ColumnDemo, { resizable: true, title: "Responsive Columns", columns: { small: 1, medium: 3, large: 6 }, description: "Small: 1 column, Medium: 3 columns, Large: 6 columns", info: React.createElement(Text, { fontSize: "sm", color: "darkGrey" },
-        "The breakpoint is based on the container width, not the viewport width. See component",
-        " ",
-        React.createElement(Link, { href: "https://github.com/nulogy/design-system/blob/main/src/DescriptionList/README.md" }, "documentation"),
-        ".") }));
+export const TwoColumns = () => _jsx(ColumnDemo, { title: "Two Columns", columns: 2 });
+export const ThreeColumns = () => _jsx(ColumnDemo, { title: "Three Columns", columns: 3 });
+export const ResponsiveColumns = () => (_jsx(ColumnDemo, { resizable: true, title: "Responsive Columns", columns: { small: 1, medium: 3, large: 6 }, description: "Small: 1 column, Medium: 3 columns, Large: 6 columns", info: _jsxs(Text, { fontSize: "sm", color: "darkGrey", children: ["The breakpoint is based on the container width, not the viewport width. See component", " ", _jsx(Link, { href: "https://github.com/nulogy/design-system/blob/main/src/DescriptionList/README.md", children: "documentation" }), "."] }) }));
 ResponsiveColumns.parameters = {
     chromatic: {
         viewports: [

package/dist/src/DescriptionList/stories/DescriptionList.group-min-width.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 { legacy } from "../../theme/theme";
 import { Heading1, Text } from "../../Type";
@@ -9,13 +9,7 @@ export default {
     title: "Components/DescriptionList/GroupMinWidth",
 };
 export const GroupMinWidth = {
-    render: () => (React.createElement(Flex, { flexDirection: "column", gap: "x4" },
-        React.createElement(Flex, { flexDirection: "column", gap: "x2" },
-            React.createElement(Heading1, { compact: true }, "Group Min Width"),
-            React.createElement(Text, { fontSize: "sm", mb: "x4" }, "In this example the groupMinWidth is set to 200px, each group is given a minimum width of 200px with the remaining space distributed evenly between the groups."),
-            React.createElement(Resizable, { containerWidth: "100%", showContainerOutline: true },
-                React.createElement(DescriptionList, { groupMinWidth: "200px" },
-                    React.createElement(SampleContent, null)))))),
+    render: () => (_jsx(Flex, { flexDirection: "column", gap: "x4", children: _jsxs(Flex, { flexDirection: "column", gap: "x2", children: [_jsx(Heading1, { compact: true, children: "Group Min Width" }), _jsx(Text, { fontSize: "sm", mb: "x4", children: "In this example the groupMinWidth is set to 200px, each group is given a minimum width of 200px with the remaining space distributed evenly between the groups." }), _jsx(Resizable, { containerWidth: "100%", showContainerOutline: true, children: _jsx(DescriptionList, { groupMinWidth: "200px", children: _jsx(SampleContent, {}) }) })] }) })),
     parameters: {
         chromatic: {
             viewports: [

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

@@ -1,14 +1,13 @@
-import React from "react";
 import DescriptionList from "../DescriptionList";
 declare const _default: {
     title: string;
     component: typeof DescriptionList;
 };
 export default _default;
-export declare const Inline: () => React.JSX.Element;
-export declare const Stacked: () => React.JSX.Element;
+export declare const Inline: () => import("react/jsx-runtime").JSX.Element;
+export declare const Stacked: () => import("react/jsx-runtime").JSX.Element;
 export declare const Auto: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     parameters: {
         chromatic: {
             viewports: number[];

package/dist/src/DescriptionList/stories/DescriptionList.layout.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";
@@ -13,39 +13,13 @@ export default {
     component: DescriptionList,
 };
 export const Inline = () => {
-    return (React.createElement(Flex, { flexDirection: "column", gap: "x2" },
-        React.createElement(Heading1, { compact: true }, "Inline Layout"),
-        React.createElement(DescriptionList, { layout: "inline" },
-            React.createElement(SampleContent, null))));
+    return (_jsxs(Flex, { flexDirection: "column", gap: "x2", children: [_jsx(Heading1, { compact: true, children: "Inline Layout" }), _jsx(DescriptionList, { layout: "inline", children: _jsx(SampleContent, {}) })] }));
 };
 export const Stacked = () => {
-    return (React.createElement(Flex, { flexDirection: "column", gap: "x2" },
-        React.createElement(Heading1, { compact: true }, "Stacked Layout"),
-        React.createElement(DescriptionList, { layout: "stacked" },
-            React.createElement(SampleContent, null))));
+    return (_jsxs(Flex, { flexDirection: "column", gap: "x2", children: [_jsx(Heading1, { compact: true, children: "Stacked Layout" }), _jsx(DescriptionList, { layout: "stacked", children: _jsx(SampleContent, {}) })] }));
 };
 export const Auto = () => {
-    return (React.createElement(Flex, { flexDirection: "column", gap: "x2" },
-        React.createElement(Flex, { flexDirection: "column", gap: "x1" },
-            React.createElement(Heading1, { compact: true }, "Auto Layout"),
-            React.createElement(Text, { fontSize: "sm" },
-                "Automatically switches between ",
-                React.createElement(Code, null, "stacked"),
-                " and ",
-                React.createElement(Code, null, "inline"),
-                " layouts based on the specified container width. Default breakpoint is set to ",
-                React.createElement(Code, null, "640px"),
-                "."),
-            React.createElement(Flex, { alignItems: "center", gap: "half", mb: "x2" },
-                React.createElement(Icon, { icon: "info", color: "midGrey" }),
-                React.createElement(Text, { fontSize: "sm", color: "darkGrey" },
-                    "The breakpoint is based on the container width, not the viewport width. See component",
-                    " ",
-                    React.createElement(Link, { href: "https://github.com/nulogy/design-system/blob/main/src/DescriptionList/README.md" }, "documentation"),
-                    "."))),
-        React.createElement(Resizable, { containerWidth: "100%", showContainerOutline: true },
-            React.createElement(DescriptionList, { layout: "auto", autoLayoutBreakpoint: "640px" },
-                React.createElement(SampleContent, null)))));
+    return (_jsxs(Flex, { flexDirection: "column", gap: "x2", children: [_jsxs(Flex, { flexDirection: "column", gap: "x1", children: [_jsx(Heading1, { compact: true, children: "Auto Layout" }), _jsxs(Text, { fontSize: "sm", children: ["Automatically switches between ", _jsx(Code, { children: "stacked" }), " and ", _jsx(Code, { children: "inline" }), " layouts based on the specified container width. Default breakpoint is set to ", _jsx(Code, { children: "640px" }), "."] }), _jsxs(Flex, { alignItems: "center", gap: "half", mb: "x2", children: [_jsx(Icon, { icon: "info", color: "midGrey" }), _jsxs(Text, { fontSize: "sm", color: "darkGrey", children: ["The breakpoint is based on the container width, not the viewport width. See component", " ", _jsx(Link, { href: "https://github.com/nulogy/design-system/blob/main/src/DescriptionList/README.md", children: "documentation" }), "."] })] })] }), _jsx(Resizable, { containerWidth: "100%", showContainerOutline: true, children: _jsx(DescriptionList, { layout: "auto", autoLayoutBreakpoint: "640px", children: _jsx(SampleContent, {}) }) })] }));
 };
 Auto.parameters = {
     chromatic: {

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 },