@nulogy/components 15.2.1 → 15.2.3

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

@@ -16,202 +16,210 @@ import { Link } from "../../Link";
 import { StatusIndicator } from "../../StatusIndicator";
 import { Resizable } from "../../utils/story/resizable";
 import { OutlinedDt, OutlinedDd } from "./fixtures";
-export const Playground = () => {
-    const [hoveredGroupIndex, setHoveredGroupIndex] = useState(null);
-    const [outlined, setOutlined] = useState(false);
-    const [containerOutline, setContainerOutline] = useState(true);
-    const [layout, setLayout] = useState("stacked");
-    const [density, setDensity] = useState("medium");
-    const [descriptionTermMaxWidth, setDescriptionTermMaxWidth] = useState("320px");
-    const [fontSize, setFontSize] = useState("medium");
-    const [lineHeight, setLineHeight] = useState("base");
-    const initialBreakpointColumns = [{ breakpoint: "extraSmall", columns: 1 }];
-    const [columns, setColumns] = useState(1);
-    const [breakpointColumns, setBreakpointColumns] = useState(initialBreakpointColumns);
-    const [groupMinWidth, setGroupMinWidth] = useState(undefined);
-    const [containerWidth, setContainerWidth] = useState("720px");
-    const [showDivider, setShowDivider] = useState(false);
-    const [autoLayoutBreakpoint, setAutoLayoutBreakpoint] = useState("640px");
-    const [rowSpan] = useState(0);
-    const [columnSpan] = useState(0);
-    const [additionalGroups, setAdditionalGroups] = useState([]);
-    const [DtValue] = useState("Key");
-    const [DdValue] = useState("Value");
-    const theme = useTheme();
-    const updateGroup = (index, updates) => {
-        setAdditionalGroups((groups) => groups.map((group, i) => {
-            if (i === index) {
-                return Object.assign(Object.assign({}, group), updates);
-            }
-            return group;
-        }));
-    };
-    const deleteGroup = (index) => {
-        setAdditionalGroups((groups) => groups.filter((_, i) => i !== index));
-    };
-    const addRandomGroup = () => {
-        setAdditionalGroups([
-            ...additionalGroups,
-            {
-                dt: DtValue,
-                dd: DdValue,
-                rowSpan: rowSpan,
-                columnSpan: columnSpan,
-                isExpanded: false,
-            },
-        ]);
-    };
-    const toggleGroupExpansion = (index) => {
-        setAdditionalGroups((groups) => groups.map((group, i) => (i === index ? Object.assign(Object.assign({}, group), { isExpanded: !group.isExpanded }) : group)));
-    };
-    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" }),
+export default {
+    title: "Components/DescriptionList/Playground",
+};
+export const Playground = {
+    render: () => {
+        const [hoveredGroupIndex, setHoveredGroupIndex] = useState(null);
+        const [outlined, setOutlined] = useState(false);
+        const [containerOutline, setContainerOutline] = useState(true);
+        const [layout, setLayout] = useState("stacked");
+        const [density, setDensity] = useState("medium");
+        const [descriptionTermMaxWidth, setDescriptionTermMaxWidth] = useState("320px");
+        const [fontSize, setFontSize] = useState("medium");
+        const [lineHeight, setLineHeight] = useState("base");
+        const initialBreakpointColumns = [{ breakpoint: "extraSmall", columns: 1 }];
+        const [columns, setColumns] = useState(1);
+        const [breakpointColumns, setBreakpointColumns] = useState(initialBreakpointColumns);
+        const [groupMinWidth, setGroupMinWidth] = useState(undefined);
+        const [containerWidth, setContainerWidth] = useState("720px");
+        const [showDivider, setShowDivider] = useState(false);
+        const [autoLayoutBreakpoint, setAutoLayoutBreakpoint] = useState("640px");
+        const [rowSpan] = useState(0);
+        const [columnSpan] = useState(0);
+        const [additionalGroups, setAdditionalGroups] = useState([]);
+        const [DtValue] = useState("Key");
+        const [DdValue] = useState("Value");
+        const theme = useTheme();
+        const updateGroup = (index, updates) => {
+            setAdditionalGroups((groups) => groups.map((group, i) => {
+                if (i === index) {
+                    return { ...group, ...updates };
+                }
+                return group;
+            }));
+        };
+        const deleteGroup = (index) => {
+            setAdditionalGroups((groups) => groups.filter((_, i) => i !== index));
+        };
+        const addRandomGroup = () => {
+            setAdditionalGroups([
+                ...additionalGroups,
+                {
+                    dt: DtValue,
+                    dd: DdValue,
+                    rowSpan: rowSpan,
+                    columnSpan: columnSpan,
+                    isExpanded: false,
+                },
+            ]);
+        };
+        const toggleGroupExpansion = (index) => {
+            setAdditionalGroups((groups) => groups.map((group, i) => (i === index ? { ...group, isExpanded: !group.isExpanded } : group)));
+        };
+        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, { 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] = Object.assign(Object.assign({}, 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] = Object.assign(Object.assign({}, 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 {
+                    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])));
-                                }
-                            } }))))))),
-                React.createElement(Input, { value: groupMinWidth !== null && groupMinWidth !== void 0 ? 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))));
-};
-Playground.parameters = {
-    chromatic: { disable: true },
+                                }, 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))));
+    },
+    parameters: {
+        chromatic: { disable: true },
+    },
 };

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

@@ -12,6 +12,6 @@ export declare const OutlinedDd: import("styled-components/dist/types").IStyledC
     $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;
-}) | (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>>);
+    children?: React.ReactNode | undefined;
+}) | (Omit<Record<string, unknown>, "ref"> & React.RefAttributes<React.Component<Record<string, unknown>, any, any>>), import("styled-components/dist/types").BaseObject>> & (string & (Omit<React.ComponentClass<Record<string, unknown>, any>, keyof React.Component<any, {}, any>> | Omit<React.FunctionComponent<Record<string, unknown>>, keyof React.Component<any, {}, any>>));
 export declare const SampleContent: () => React.JSX.Element;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { StyledProps } from "../StyledProps";
 export interface DividerProps extends StyledProps, React.HTMLAttributes<HTMLHRElement> {
     secondary?: boolean;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type Props = {
     color?: string;
     hoverColor?: string;

package/dist/src/DropdownMenu/DropdownMenu.js

@@ -1,14 +1,3 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import React, { useMemo } from "react";
 import propTypes from "@styled-system/prop-types";
 import { IconicButton } from "../Button";
@@ -19,21 +8,28 @@ import DropdownMenuContainer from "./DropdownMenuContainer";
 const DEFAULT_POPPER_MODIFIERS = {
     preventOverflow: { enabled: true, padding: 8, boundariesElement: "viewport" },
 };
-const transformPropsToModifiers = ({ boundariesElement }) => (Object.assign(Object.assign({}, DEFAULT_POPPER_MODIFIERS), { boundariesElement }));
-const DropdownMenu = React.forwardRef((_a, ref) => {
-    var { trigger = () => React.createElement(IconicButton, { icon: "more" }), children, showArrow = true, variant, disabled, defaultOpen, backgroundColor = "white", placement = "bottom-start", className, id, boundariesElement = "viewport", showDelay = "100", hideDelay = "200", openAriaLabel, closeAriaLabel, openOnHover = false } = _a, props = __rest(_a, ["trigger", "children", "showArrow", "variant", "disabled", "defaultOpen", "backgroundColor", "placement", "className", "id", "boundariesElement", "showDelay", "hideDelay", "openAriaLabel", "closeAriaLabel", "openOnHover"]);
+const transformPropsToModifiers = ({ boundariesElement }) => ({
+    ...DEFAULT_POPPER_MODIFIERS,
+    boundariesElement,
+});
+const DropdownMenu = React.forwardRef(({ trigger = () => React.createElement(IconicButton, { icon: "more" }), children, showArrow = true, variant, disabled, defaultOpen, backgroundColor = "white", placement = "bottom-start", className, id, boundariesElement = "viewport", showDelay = "100", hideDelay = "200", openAriaLabel, closeAriaLabel, openOnHover = false, ...props }, ref) => {
     const spaceProps = getSubset(props, propTypes.space);
     const restProps = omitSubset(props, propTypes.space);
     const modifiers = useMemo(() => {
         return transformPropsToModifiers({ boundariesElement });
     }, [boundariesElement]);
     const componentVariant = useComponentVariant(variant);
-    return (React.createElement(Popper, { trigger: React.cloneElement(trigger(), Object.assign({ type: "button", disabled: disabled ? true : null, "aria-haspopup": true }, spaceProps)), showDelay: showDelay, hideDelay: hideDelay, popperPlacement: placement, defaultOpen: defaultOpen, showArrow: showArrow, openOnClick: !openOnHover, ref: ref, openOnHover: openOnHover, modifiers: modifiers, backgroundColor: backgroundColor, borderColor: backgroundColor, openAriaLabel: openAriaLabel, closeAriaLabel: closeAriaLabel },
-        React.createElement(DropdownMenuContainer, Object.assign({ className: className, id: id, backgroundColor: backgroundColor, showArrow: showArrow }, restProps), typeof children === "function"
+    return (React.createElement(Popper, { trigger: React.cloneElement(trigger(), {
+            type: "button",
+            disabled: disabled ? true : null,
+            "aria-haspopup": true,
+            ...spaceProps,
+        }), showDelay: showDelay, hideDelay: hideDelay, popperPlacement: placement, defaultOpen: defaultOpen, showArrow: showArrow, openOnClick: !openOnHover, ref: ref, openOnHover: openOnHover, modifiers: modifiers, backgroundColor: backgroundColor, borderColor: backgroundColor, openAriaLabel: openAriaLabel, closeAriaLabel: closeAriaLabel },
+        React.createElement(DropdownMenuContainer, { className: className, id: id, backgroundColor: backgroundColor, showArrow: showArrow, ...restProps }, typeof children === "function"
             ? children
             : React.Children.map(children, (child) => {
                 if (React.isValidElement(child)) {
-                    return React.cloneElement(child, Object.assign({ size: componentVariant }, child.props), child.props.children);
+                    return React.cloneElement(child, { size: componentVariant, ...child.props }, child.props.children);
                 }
             }))));
 });

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

@@ -24,8 +24,8 @@ WithCustomTrigger.story = {
     name: "with custom trigger",
 };
 export const WithCustomColors = () => (React.createElement(DropdownMenu, { defaultOpen: true, backgroundColor: "blackBlue", openAriaLabel: "open dropdown", closeAriaLabel: "close dropdown" },
-    React.createElement(DropdownLink, Object.assign({ href: "/never_been" }, customColors), "Dropdown Link"),
-    React.createElement(DropdownButton, Object.assign({ onClick: () => { } }, customColors), "Dropdown Button")));
+    React.createElement(DropdownLink, { href: "/never_been", ...customColors }, "Dropdown Link"),
+    React.createElement(DropdownButton, { onClick: () => { }, ...customColors }, "Dropdown Button")));
 WithCustomColors.story = {
     name: "with custom colors",
 };

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { DefaultNDSThemeType } from "../theme";
 type DropdownMenuContainerProps = {
     id?: string;

package/dist/src/DropdownMenu/DropdownMenuContainer.js

@@ -25,5 +25,14 @@ const getMenuMargin = (placement, showArrow) => {
             };
     }
 };
-const DropdownMenuContainer = styled(Box)(color, ({ dataPlacement, showArrow = true, backgroundColor = "white", theme }) => (Object.assign({ borderRadius: theme.radii.medium, backgroundColor: theme.colors[backgroundColor], borderTop: `1px solid  ${theme.colors[backgroundColor]}`, borderBottom: `1px solid ${theme.colors[backgroundColor]}`, boxShadow: theme.shadows.medium, padding: "7px 0", zIndex: "100" }, getMenuMargin(dataPlacement, showArrow))));
+const DropdownMenuContainer = styled(Box)(color, ({ dataPlacement, showArrow = true, backgroundColor = "white", theme }) => ({
+    borderRadius: theme.radii.medium,
+    backgroundColor: theme.colors[backgroundColor],
+    borderTop: `1px solid  ${theme.colors[backgroundColor]}`,
+    borderBottom: `1px solid ${theme.colors[backgroundColor]}`,
+    boxShadow: theme.shadows.medium,
+    padding: "7px 0",
+    zIndex: "100",
+    ...getMenuMargin(dataPlacement, showArrow),
+}));
 export default DropdownMenuContainer;

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

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

package/dist/src/FieldLabel/FieldLabel.js

@@ -1,14 +1,3 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import React from "react";
 import { Box } from "../Box";
 import { InlineIcon } from "../Icon";
@@ -17,9 +6,8 @@ import HelpText from "./HelpText";
 import Label from "./Label";
 import RequirementText from "./RequirementText";
 import { LabelContent, LabelText } from "./LabelText";
-export default function FieldLabel(_a) {
-    var { labelText, requirementText, helpText, hint, children } = _a, props = __rest(_a, ["labelText", "requirementText", "helpText", "hint", "children"]);
-    return (React.createElement(Label, Object.assign({ display: "block" }, props),
+export default function FieldLabel({ labelText, requirementText, helpText, hint, children, ...props }) {
+    return (React.createElement(Label, { display: "block", ...props },
         React.createElement(Box, { mb: children && "x1", "data-testid": "field-label" },
             React.createElement(LabelContent, { "data-testid": "label-content" },
                 React.createElement(LabelText, { "data-testid": "label-text" }, labelText),