@nulogy/components 15.2.0 → 15.2.2

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

@@ -16,202 +16,207 @@ 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 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, { 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] = Object.assign(Object.assign({}, 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] = 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 {
+                                        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))));
+    },
+    parameters: {
+        chromatic: { disable: true },
+    },
 };

package/dist/src/Layout/Header.d.ts

@@ -1,7 +1,7 @@
 import React, { ReactNode } from "react";
 import { BoxProps } from "../Box";
 type Breakpoint = string | number;
-interface HeaderProps extends Omit<BoxProps, "title"> {
+export interface HeaderProps extends Omit<BoxProps, "title"> {
     renderBreadcrumbs?: () => ReactNode;
     title?: ReactNode;
     subtitle?: string;

package/dist/src/Layout/Header.story.d.ts

@@ -1,15 +1,7 @@
 import React from "react";
-export declare const Default: () => React.JSX.Element;
-export declare const TitleAsReactElement: () => React.JSX.Element;
-export declare const WithActions: () => React.JSX.Element;
-export declare const WithSubTitle: () => React.JSX.Element;
-export declare const WithContent: () => React.JSX.Element;
-export declare const WithSummary: () => React.JSX.Element;
-export declare const WithAnUndecoratedBackground: () => React.JSX.Element;
-export declare const WithCustomBackground: () => React.JSX.Element;
-export declare const WithEverything: () => React.JSX.Element;
 declare const _default: {
     title: string;
+    component: ({ background, renderBreadcrumbs, title, undecorated, children, subtitle, breakpoints, renderActions, renderSummary, ...rest }: import("./Header").HeaderProps) => React.JSX.Element;
     parameters: {
         layout: string;
         chromatic: {
@@ -18,3 +10,12 @@ declare const _default: {
     };
 };
 export default _default;
+export declare const Default: () => React.JSX.Element;
+export declare const TitleAsReactElement: () => React.JSX.Element;
+export declare const WithActions: () => React.JSX.Element;
+export declare const WithSubTitle: () => React.JSX.Element;
+export declare const WithContent: () => React.JSX.Element;
+export declare const WithSummary: () => React.JSX.Element;
+export declare const WithAnUndecoratedBackground: () => React.JSX.Element;
+export declare const WithCustomBackground: () => React.JSX.Element;
+export declare const WithEverything: () => React.JSX.Element;

package/dist/src/Layout/Header.story.js

@@ -6,6 +6,15 @@ import SummaryDivider from "../Summary/SummaryDivider";
 import DropdownMenu from "../DropdownMenu/DropdownMenu";
 import numberFromDimension from "../utils/numberFromDimension";
 import { legacy as theme } from "../theme/theme";
+const viewports = [theme.breakpoints.small, theme.breakpoints.medium, theme.breakpoints.large].map(numberFromDimension);
+export default {
+    title: "Components/Header",
+    component: Header,
+    parameters: {
+        layout: "fullscreen",
+        chromatic: { viewports },
+    },
+};
 export const Default = () => (React.createElement(Header, { renderBreadcrumbs: () => (React.createElement(Breadcrumbs, null,
         React.createElement(Link, { href: "/" }, "Home"),
         React.createElement(Link, { href: "/" }, "Materials"))), title: "Materials Overview" }));
@@ -60,11 +69,3 @@ export const WithEverything = () => (React.createElement(Header, { breakpoints:
         React.createElement(DropdownLink, { href: "/" }, "Dropdown Link"),
         React.createElement(DropdownButton, null, "Dropdown Button"))) },
     React.createElement(Box, { border: "1px dashed", borderColor: "grey", py: "half", px: "x1", borderRadius: "small" }, "Extra content")));
-const viewports = [theme.breakpoints.small, theme.breakpoints.medium, theme.breakpoints.large].map(numberFromDimension);
-export default {
-    title: "Components/Header",
-    parameters: {
-        layout: "fullscreen",
-        chromatic: { viewports },
-    },
-};

package/dist/src/Layout/Sidebar.story.d.ts

@@ -1,4 +1,6 @@
+import type { StoryObj } from "@storybook/react";
 import React from "react";
+import { Sidebar } from "..";
 declare const _default: {
     title: string;
     parameters: {
@@ -9,10 +11,11 @@ declare const _default: {
     };
 };
 export default _default;
+type Story = StoryObj<typeof Sidebar>;
 export declare const _Sidebar: () => React.JSX.Element;
 export declare const WithoutOverlay: () => React.JSX.Element;
 export declare const OpenByDefault: () => React.JSX.Element;
-export declare const WithCustomOffset: () => React.JSX.Element;
+export declare const WithCustomOffset: Story;
 export declare const DontCloseOnOutsideClick: () => React.JSX.Element;
 export declare const WithoutCloseButton: () => React.JSX.Element;
 export declare const WithALongTitle: () => React.JSX.Element;

package/dist/src/Layout/Sidebar.story.js

@@ -9,7 +9,6 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { text } from "@storybook/addon-knobs";
 import React, { useState, useRef } from "react";
 import { ApplicationFrame, Breadcrumbs, Link, Page, Sidebar, Select, PrimaryButton, Box, Textarea, Heading3, Navigation, } from "..";
 import { useUrlProps } from "../utils/testing/useUrlProps";
@@ -93,7 +92,7 @@ export const OpenByDefault = () => {
                 React.createElement(Box, { height: "3000px", width: "100%", bg: "lightBlue", mt: "x3", p: "x2" }, "Space for more content")),
             React.createElement(ExampleSidebar, { isOpen: isOpen, onClose: closeSidebar, triggerRef: triggerRef, "aria-controls": "openSidebarTrigger" }))));
 };
-export const WithCustomOffset = () => {
+const WithCustomOffsetComponent = (args) => {
     const [isOpen, setIsOpen] = useState(true);
     const triggerRef = useRef(null);
     const toggleSidebar = () => {
@@ -109,7 +108,15 @@ export const WithCustomOffset = () => {
             React.createElement(Box, { minWidth: "300px" },
                 React.createElement(PrimaryButton, { onClick: toggleSidebar, ref: triggerRef, id: "openSidebarTrigger" }, "Open Sidebar"),
                 React.createElement(Box, { height: "3000px", width: "100%", bg: "lightBlue", mt: "x3", p: "x2" }, "Space for more content")),
-            React.createElement(ExampleSidebar, { isOpen: isOpen, onClose: closeSidebar, triggerRef: triggerRef, "aria-controls": "openSidebarTrigger", offset: text("offset", "400px"), duration: text("duration", "0.5") }))));
+            React.createElement(ExampleSidebar, Object.assign({ isOpen: isOpen, onClose: closeSidebar, triggerRef: triggerRef, "aria-controls": "openSidebarTrigger" }, args)))));
+};
+export const WithCustomOffset = {
+    args: {
+        offset: "400px",
+        duration: 0.5,
+    },
+    name: "With custom offset",
+    render: (args) => React.createElement(WithCustomOffsetComponent, Object.assign({}, args)),
 };
 export const DontCloseOnOutsideClick = () => {
     const [isOpen, setIsOpen] = useState(false);