@heymantle/litho 0.0.3 → 0.0.4

package/dist/esm/stories/LayoutSection.stories.js

@@ -0,0 +1,1226 @@
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { transformStorySource } from "../utilities/transformers.js";
+import LayoutSection from "../components/LayoutSection.js";
+import Layout from "../components/Layout.js";
+import Text from "../components/Text.js";
+import Card from "../components/Card.js";
+import Button from "../components/Button.js";
+import Page from "../components/Page.js";
+import VerticalStack from "../components/VerticalStack.js";
+import HorizontalStack from "../components/HorizontalStack.js";
+import Box from "../components/Box.js";
+import Grid from "../components/Grid.js";
+export default {
+    title: 'Litho/LayoutSection',
+    component: LayoutSection,
+    parameters: {
+        layout: 'fullscreen',
+        docs: {
+            description: {
+                component: "A Layout Section component for flexible content grouping within layouts. It supports sidebar configurations, sticky positioning, and responsive behavior. Must be used within a Layout component."
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    },
+    tags: [
+        'autodocs'
+    ],
+    argTypes: {
+        sidebar: {
+            control: 'select',
+            options: [
+                false,
+                true,
+                'slim'
+            ],
+            description: 'Configures the section layout - true for sidebar, "slim" for slim sidebar, false for full width'
+        },
+        sticky: {
+            control: 'boolean',
+            description: 'Whether the section becomes sticky'
+        },
+        children: {
+            control: false,
+            description: 'Content to render inside the section'
+        }
+    }
+};
+export var Default = {
+    render: function(args) {
+        return /*#__PURE__*/ _jsx(Page, {
+            title: "Layout Section Demo",
+            children: /*#__PURE__*/ _jsx(Layout, {
+                children: /*#__PURE__*/ _jsx(LayoutSection, _object_spread_props(_object_spread({}, args), {
+                    children: /*#__PURE__*/ _jsx(Card, {
+                        title: "Main Content",
+                        padded: true,
+                        children: /*#__PURE__*/ _jsx(Text, {
+                            children: "This is the main content area. It will take up the full width unless there's a sidebar section present."
+                        })
+                    })
+                }))
+            })
+        });
+    },
+    args: {
+        sidebar: false,
+        sticky: false
+    }
+};
+export var WithSidebar = {
+    render: function() {
+        return /*#__PURE__*/ _jsx(Page, {
+            title: "Sidebar Layout",
+            children: /*#__PURE__*/ _jsxs(Layout, {
+                children: [
+                    /*#__PURE__*/ _jsx(LayoutSection, {
+                        children: /*#__PURE__*/ _jsx(Card, {
+                            title: "Main Content",
+                            padded: true,
+                            children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                                gap: "4",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Text, {
+                                        children: "This is the main content area. It automatically adjusts its width when a sidebar is present."
+                                    }),
+                                    /*#__PURE__*/ _jsx(Text, {
+                                        children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
+                                    }),
+                                    /*#__PURE__*/ _jsx(Text, {
+                                        children: "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+                                    }),
+                                    /*#__PURE__*/ _jsxs(HorizontalStack, {
+                                        gap: "4",
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Button, {
+                                                primary: true,
+                                                children: "Save Changes"
+                                            }),
+                                            /*#__PURE__*/ _jsx(Button, {
+                                                children: "Cancel"
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(LayoutSection, {
+                        sidebar: true,
+                        children: /*#__PURE__*/ _jsx(Card, {
+                            title: "Sidebar",
+                            padded: true,
+                            children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                                gap: "4",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Text, {
+                                        variant: "headingSm",
+                                        children: "Navigation"
+                                    }),
+                                    /*#__PURE__*/ _jsxs(VerticalStack, {
+                                        gap: "2",
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Button, {
+                                                size: "slim",
+                                                plain: true,
+                                                textAlign: "left",
+                                                children: "Overview"
+                                            }),
+                                            /*#__PURE__*/ _jsx(Button, {
+                                                size: "slim",
+                                                plain: true,
+                                                textAlign: "left",
+                                                children: "Settings"
+                                            }),
+                                            /*#__PURE__*/ _jsx(Button, {
+                                                size: "slim",
+                                                plain: true,
+                                                textAlign: "left",
+                                                children: "Team"
+                                            }),
+                                            /*#__PURE__*/ _jsx(Button, {
+                                                size: "slim",
+                                                plain: true,
+                                                textAlign: "left",
+                                                children: "Billing"
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsx(Box, {
+                                        paddingBlockStart: "4",
+                                        padding: "4",
+                                        background: "bg-surface-neutral-subdued",
+                                        borderRadius: "1",
+                                        children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                                            gap: "2",
+                                            children: [
+                                                /*#__PURE__*/ _jsx(Text, {
+                                                    variant: "headingSm",
+                                                    children: "Quick Stats"
+                                                }),
+                                                /*#__PURE__*/ _jsxs(VerticalStack, {
+                                                    gap: "1",
+                                                    children: [
+                                                        /*#__PURE__*/ _jsx(Text, {
+                                                            variant: "bodySm",
+                                                            children: "Active Users: 1,234"
+                                                        }),
+                                                        /*#__PURE__*/ _jsx(Text, {
+                                                            variant: "bodySm",
+                                                            children: "Revenue: $45,678"
+                                                        }),
+                                                        /*#__PURE__*/ _jsx(Text, {
+                                                            variant: "bodySm",
+                                                            children: "Growth: +12.5%"
+                                                        })
+                                                    ]
+                                                })
+                                            ]
+                                        })
+                                    })
+                                ]
+                            })
+                        })
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Layout with main content and a sidebar section.'
+            }
+        }
+    }
+};
+export var SlimSidebar = {
+    render: function() {
+        return /*#__PURE__*/ _jsx(Page, {
+            title: "Slim Sidebar Layout",
+            children: /*#__PURE__*/ _jsxs(Layout, {
+                children: [
+                    /*#__PURE__*/ _jsx(LayoutSection, {
+                        children: /*#__PURE__*/ _jsx(Card, {
+                            title: "Article Content",
+                            padded: true,
+                            children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                                gap: "6",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Text, {
+                                        variant: "headingLg",
+                                        children: "Understanding Layout Sections"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Text, {
+                                        children: "Layout sections provide a flexible way to organize content within your application. The slim sidebar variant is perfect for navigation or supplementary information that doesn't need as much space as a full sidebar."
+                                    }),
+                                    /*#__PURE__*/ _jsx(Text, {
+                                        children: "This main content area automatically adjusts to accommodate the slim sidebar, ensuring optimal use of screen space while maintaining readability and usability."
+                                    }),
+                                    /*#__PURE__*/ _jsx(Text, {
+                                        children: "The responsive behavior ensures that on smaller screens, the layout adapts appropriately to provide the best user experience across all device sizes."
+                                    }),
+                                    /*#__PURE__*/ _jsx(Box, {
+                                        paddingBlockStart: "8",
+                                        children: /*#__PURE__*/ _jsxs(Grid, {
+                                            columns: {
+                                                xs: 1,
+                                                md: 3
+                                            },
+                                            gap: "4",
+                                            children: [
+                                                /*#__PURE__*/ _jsx(Box, {
+                                                    padding: "4",
+                                                    borderWidth: "1",
+                                                    borderColor: "border",
+                                                    borderRadius: "1",
+                                                    children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                                                        gap: "2",
+                                                        children: [
+                                                            /*#__PURE__*/ _jsx(Text, {
+                                                                variant: "headingSm",
+                                                                children: "Feature 1"
+                                                            }),
+                                                            /*#__PURE__*/ _jsx(Text, {
+                                                                variant: "bodySm",
+                                                                children: "Description of feature"
+                                                            })
+                                                        ]
+                                                    })
+                                                }),
+                                                /*#__PURE__*/ _jsx(Box, {
+                                                    padding: "4",
+                                                    borderWidth: "1",
+                                                    borderColor: "border",
+                                                    borderRadius: "1",
+                                                    children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                                                        gap: "2",
+                                                        children: [
+                                                            /*#__PURE__*/ _jsx(Text, {
+                                                                variant: "headingSm",
+                                                                children: "Feature 2"
+                                                            }),
+                                                            /*#__PURE__*/ _jsx(Text, {
+                                                                variant: "bodySm",
+                                                                children: "Description of feature"
+                                                            })
+                                                        ]
+                                                    })
+                                                }),
+                                                /*#__PURE__*/ _jsx(Box, {
+                                                    padding: "4",
+                                                    borderWidth: "1",
+                                                    borderColor: "border",
+                                                    borderRadius: "1",
+                                                    children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                                                        gap: "2",
+                                                        children: [
+                                                            /*#__PURE__*/ _jsx(Text, {
+                                                                variant: "headingSm",
+                                                                children: "Feature 3"
+                                                            }),
+                                                            /*#__PURE__*/ _jsx(Text, {
+                                                                variant: "bodySm",
+                                                                children: "Description of feature"
+                                                            })
+                                                        ]
+                                                    })
+                                                })
+                                            ]
+                                        })
+                                    })
+                                ]
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(LayoutSection, {
+                        sidebar: "slim",
+                        children: /*#__PURE__*/ _jsx(Card, {
+                            title: "Tools",
+                            padded: true,
+                            children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                                gap: "4",
+                                children: [
+                                    /*#__PURE__*/ _jsx("div", {
+                                        children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                                            gap: "2",
+                                            children: [
+                                                /*#__PURE__*/ _jsx(Text, {
+                                                    variant: "headingSm",
+                                                    children: "Actions"
+                                                }),
+                                                /*#__PURE__*/ _jsxs(VerticalStack, {
+                                                    gap: "2",
+                                                    children: [
+                                                        /*#__PURE__*/ _jsx(Button, {
+                                                            size: "slim",
+                                                            children: "Edit"
+                                                        }),
+                                                        /*#__PURE__*/ _jsx(Button, {
+                                                            size: "slim",
+                                                            children: "Share"
+                                                        }),
+                                                        /*#__PURE__*/ _jsx(Button, {
+                                                            size: "slim",
+                                                            children: "Export"
+                                                        })
+                                                    ]
+                                                })
+                                            ]
+                                        })
+                                    }),
+                                    /*#__PURE__*/ _jsx(Box, {
+                                        borderBlockStartWidth: "1",
+                                        borderColor: "border",
+                                        paddingBlockStart: "4",
+                                        children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                                            gap: "2",
+                                            children: [
+                                                /*#__PURE__*/ _jsx(Text, {
+                                                    variant: "headingSm",
+                                                    children: "Info"
+                                                }),
+                                                /*#__PURE__*/ _jsxs(VerticalStack, {
+                                                    gap: "1",
+                                                    children: [
+                                                        /*#__PURE__*/ _jsx(Text, {
+                                                            variant: "caption",
+                                                            children: "Created: 2 days ago"
+                                                        }),
+                                                        /*#__PURE__*/ _jsx(Text, {
+                                                            variant: "caption",
+                                                            children: "Modified: 1 hour ago"
+                                                        }),
+                                                        /*#__PURE__*/ _jsx(Text, {
+                                                            variant: "caption",
+                                                            children: "Views: 156"
+                                                        })
+                                                    ]
+                                                })
+                                            ]
+                                        })
+                                    })
+                                ]
+                            })
+                        })
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Layout with main content and a slim sidebar for tools and metadata.'
+            }
+        }
+    }
+};
+export var StickySection = {
+    render: function() {
+        return /*#__PURE__*/ _jsx(Page, {
+            title: "Sticky Sidebar Demo",
+            children: /*#__PURE__*/ _jsxs(Layout, {
+                children: [
+                    /*#__PURE__*/ _jsx(LayoutSection, {
+                        children: /*#__PURE__*/ _jsx(Card, {
+                            title: "Long Article",
+                            padded: true,
+                            children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                                gap: "6",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Text, {
+                                        variant: "headingLg",
+                                        children: "Scroll to See Sticky Behavior"
+                                    }),
+                                    Array.from({
+                                        length: 20
+                                    }, function(_, i) {
+                                        return /*#__PURE__*/ _jsxs("div", {
+                                            children: [
+                                                /*#__PURE__*/ _jsx(Box, {
+                                                    paddingBlockEnd: "2",
+                                                    children: /*#__PURE__*/ _jsxs(Text, {
+                                                        variant: "headingSm",
+                                                        children: [
+                                                            "Section ",
+                                                            i + 1
+                                                        ]
+                                                    })
+                                                }),
+                                                /*#__PURE__*/ _jsxs(Text, {
+                                                    children: [
+                                                        "This is paragraph ",
+                                                        i + 1,
+                                                        ". Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."
+                                                    ]
+                                                })
+                                            ]
+                                        }, i);
+                                    })
+                                ]
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(LayoutSection, {
+                        sidebar: true,
+                        sticky: true,
+                        children: /*#__PURE__*/ _jsx(Card, {
+                            title: "Sticky Navigation",
+                            padded: true,
+                            children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                                gap: "4",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Text, {
+                                        variant: "headingSm",
+                                        children: "Table of Contents"
+                                    }),
+                                    /*#__PURE__*/ _jsx(VerticalStack, {
+                                        gap: "2",
+                                        children: Array.from({
+                                            length: 10
+                                        }, function(_, i) {
+                                            return /*#__PURE__*/ _jsxs(Button, {
+                                                size: "slim",
+                                                plain: true,
+                                                textAlign: "left",
+                                                onClick: function() {
+                                                    var element = document.querySelector("h3:nth-of-type(".concat(i + 1, ")"));
+                                                    element === null || element === void 0 ? void 0 : element.scrollIntoView({
+                                                        behavior: 'smooth'
+                                                    });
+                                                },
+                                                children: [
+                                                    "Section ",
+                                                    i + 1
+                                                ]
+                                            }, i);
+                                        })
+                                    }),
+                                    /*#__PURE__*/ _jsx(Box, {
+                                        paddingBlockStart: "4",
+                                        borderBlockStartWidth: "1",
+                                        borderColor: "border",
+                                        children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                                            gap: "2",
+                                            children: [
+                                                /*#__PURE__*/ _jsx(Text, {
+                                                    variant: "headingSm",
+                                                    children: "Reading Progress"
+                                                }),
+                                                /*#__PURE__*/ _jsx(Box, {
+                                                    style: {
+                                                        width: '100%',
+                                                        height: '8px',
+                                                        backgroundColor: '#e1e1e1',
+                                                        borderRadius: '4px',
+                                                        overflow: 'hidden'
+                                                    },
+                                                    children: /*#__PURE__*/ _jsx(Box, {
+                                                        style: {
+                                                            width: '35%',
+                                                            height: '100%',
+                                                            backgroundColor: '#007bff',
+                                                            transition: 'width 0.3s ease'
+                                                        }
+                                                    })
+                                                })
+                                            ]
+                                        })
+                                    })
+                                ]
+                            })
+                        })
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Layout with sticky sidebar that remains in view while scrolling through long content.'
+            }
+        }
+    }
+};
+export var SettingsLayout = {
+    render: function() {
+        return /*#__PURE__*/ _jsx(Page, {
+            title: "Account Settings",
+            children: /*#__PURE__*/ _jsxs(Layout, {
+                children: [
+                    /*#__PURE__*/ _jsx(LayoutSection, {
+                        children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                            gap: "8",
+                            children: [
+                                /*#__PURE__*/ _jsx(Card, {
+                                    title: "Profile Information",
+                                    padded: true,
+                                    children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                                        gap: "4",
+                                        children: [
+                                            /*#__PURE__*/ _jsxs(Grid, {
+                                                columns: 2,
+                                                gap: "4",
+                                                children: [
+                                                    /*#__PURE__*/ _jsxs(VerticalStack, {
+                                                        gap: "2",
+                                                        children: [
+                                                            /*#__PURE__*/ _jsx(Text, {
+                                                                variant: "bodySm",
+                                                                children: "First Name"
+                                                            }),
+                                                            /*#__PURE__*/ _jsx("input", {
+                                                                type: "text",
+                                                                defaultValue: "John",
+                                                                style: {
+                                                                    width: '100%',
+                                                                    padding: '0.5rem',
+                                                                    border: '1px solid #ccc',
+                                                                    borderRadius: '4px'
+                                                                }
+                                                            })
+                                                        ]
+                                                    }),
+                                                    /*#__PURE__*/ _jsxs(VerticalStack, {
+                                                        gap: "2",
+                                                        children: [
+                                                            /*#__PURE__*/ _jsx(Text, {
+                                                                variant: "bodySm",
+                                                                children: "Last Name"
+                                                            }),
+                                                            /*#__PURE__*/ _jsx("input", {
+                                                                type: "text",
+                                                                defaultValue: "Doe",
+                                                                style: {
+                                                                    width: '100%',
+                                                                    padding: '0.5rem',
+                                                                    border: '1px solid #ccc',
+                                                                    borderRadius: '4px'
+                                                                }
+                                                            })
+                                                        ]
+                                                    })
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ _jsxs(VerticalStack, {
+                                                gap: "2",
+                                                children: [
+                                                    /*#__PURE__*/ _jsx(Text, {
+                                                        variant: "bodySm",
+                                                        children: "Email Address"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("input", {
+                                                        type: "email",
+                                                        defaultValue: "john.doe@example.com",
+                                                        style: {
+                                                            width: '100%',
+                                                            padding: '0.5rem',
+                                                            border: '1px solid #ccc',
+                                                            borderRadius: '4px'
+                                                        }
+                                                    })
+                                                ]
+                                            })
+                                        ]
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx(Card, {
+                                    title: "Password & Security",
+                                    padded: true,
+                                    children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                                        gap: "4",
+                                        children: [
+                                            /*#__PURE__*/ _jsxs(VerticalStack, {
+                                                gap: "2",
+                                                children: [
+                                                    /*#__PURE__*/ _jsx(Text, {
+                                                        variant: "bodySm",
+                                                        children: "Current Password"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("input", {
+                                                        type: "password",
+                                                        placeholder: "Enter current password",
+                                                        style: {
+                                                            width: '100%',
+                                                            padding: '0.5rem',
+                                                            border: '1px solid #ccc',
+                                                            borderRadius: '4px'
+                                                        }
+                                                    })
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ _jsxs(Grid, {
+                                                columns: 2,
+                                                gap: "4",
+                                                children: [
+                                                    /*#__PURE__*/ _jsxs(VerticalStack, {
+                                                        gap: "2",
+                                                        children: [
+                                                            /*#__PURE__*/ _jsx(Text, {
+                                                                variant: "bodySm",
+                                                                children: "New Password"
+                                                            }),
+                                                            /*#__PURE__*/ _jsx("input", {
+                                                                type: "password",
+                                                                placeholder: "New password",
+                                                                style: {
+                                                                    width: '100%',
+                                                                    padding: '0.5rem',
+                                                                    border: '1px solid #ccc',
+                                                                    borderRadius: '4px'
+                                                                }
+                                                            })
+                                                        ]
+                                                    }),
+                                                    /*#__PURE__*/ _jsxs(VerticalStack, {
+                                                        gap: "2",
+                                                        children: [
+                                                            /*#__PURE__*/ _jsx(Text, {
+                                                                variant: "bodySm",
+                                                                children: "Confirm Password"
+                                                            }),
+                                                            /*#__PURE__*/ _jsx("input", {
+                                                                type: "password",
+                                                                placeholder: "Confirm password",
+                                                                style: {
+                                                                    width: '100%',
+                                                                    padding: '0.5rem',
+                                                                    border: '1px solid #ccc',
+                                                                    borderRadius: '4px'
+                                                                }
+                                                            })
+                                                        ]
+                                                    })
+                                                ]
+                                            })
+                                        ]
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsxs(HorizontalStack, {
+                                    gap: "4",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Button, {
+                                            primary: true,
+                                            children: "Save Changes"
+                                        }),
+                                        /*#__PURE__*/ _jsx(Button, {
+                                            children: "Cancel"
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(LayoutSection, {
+                        sidebar: true,
+                        children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                            gap: "4",
+                            children: [
+                                /*#__PURE__*/ _jsx(Card, {
+                                    title: "Settings Menu",
+                                    padded: true,
+                                    children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                                        gap: "2",
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Button, {
+                                                size: "slim",
+                                                plain: true,
+                                                textAlign: "left",
+                                                children: "Profile"
+                                            }),
+                                            /*#__PURE__*/ _jsx(Button, {
+                                                size: "slim",
+                                                plain: true,
+                                                textAlign: "left",
+                                                children: "Security"
+                                            }),
+                                            /*#__PURE__*/ _jsx(Button, {
+                                                size: "slim",
+                                                plain: true,
+                                                textAlign: "left",
+                                                children: "Notifications"
+                                            }),
+                                            /*#__PURE__*/ _jsx(Button, {
+                                                size: "slim",
+                                                plain: true,
+                                                textAlign: "left",
+                                                children: "Privacy"
+                                            }),
+                                            /*#__PURE__*/ _jsx(Button, {
+                                                size: "slim",
+                                                plain: true,
+                                                textAlign: "left",
+                                                children: "Billing"
+                                            }),
+                                            /*#__PURE__*/ _jsx(Button, {
+                                                size: "slim",
+                                                plain: true,
+                                                textAlign: "left",
+                                                children: "Team"
+                                            })
+                                        ]
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx(Card, {
+                                    title: "Account Status",
+                                    padded: true,
+                                    children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                                        gap: "2",
+                                        children: [
+                                            /*#__PURE__*/ _jsxs(HorizontalStack, {
+                                                align: "space-between",
+                                                children: [
+                                                    /*#__PURE__*/ _jsx(Text, {
+                                                        variant: "bodySm",
+                                                        children: "Plan:"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(Text, {
+                                                        variant: "bodySm",
+                                                        children: "Pro"
+                                                    })
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ _jsxs(HorizontalStack, {
+                                                align: "space-between",
+                                                children: [
+                                                    /*#__PURE__*/ _jsx(Text, {
+                                                        variant: "bodySm",
+                                                        children: "Status:"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(Text, {
+                                                        variant: "bodySm",
+                                                        style: {
+                                                            color: '#28a745'
+                                                        },
+                                                        children: "Active"
+                                                    })
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ _jsxs(HorizontalStack, {
+                                                align: "space-between",
+                                                children: [
+                                                    /*#__PURE__*/ _jsx(Text, {
+                                                        variant: "bodySm",
+                                                        children: "Renewal:"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(Text, {
+                                                        variant: "bodySm",
+                                                        children: "Dec 15, 2024"
+                                                    })
+                                                ]
+                                            })
+                                        ]
+                                    })
+                                })
+                            ]
+                        })
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Settings page layout with form content and navigation sidebar.'
+            }
+        }
+    }
+};
+export var DashboardLayout = {
+    render: function() {
+        return /*#__PURE__*/ _jsx(Page, {
+            title: "Analytics Dashboard",
+            children: /*#__PURE__*/ _jsxs(Layout, {
+                children: [
+                    /*#__PURE__*/ _jsx(LayoutSection, {
+                        children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                            gap: "8",
+                            children: [
+                                /*#__PURE__*/ _jsxs(Grid, {
+                                    columns: {
+                                        xs: 1,
+                                        md: 3
+                                    },
+                                    gap: "4",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Card, {
+                                            padded: true,
+                                            children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                                                gap: "1",
+                                                inlineAlign: "center",
+                                                children: [
+                                                    /*#__PURE__*/ _jsx(Text, {
+                                                        variant: "headingLg",
+                                                        children: "1,234"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(Text, {
+                                                        variant: "bodySm",
+                                                        color: "subdued",
+                                                        children: "Total Users"
+                                                    })
+                                                ]
+                                            })
+                                        }),
+                                        /*#__PURE__*/ _jsx(Card, {
+                                            padded: true,
+                                            children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                                                gap: "1",
+                                                inlineAlign: "center",
+                                                children: [
+                                                    /*#__PURE__*/ _jsx(Text, {
+                                                        variant: "headingLg",
+                                                        children: "$45.2K"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(Text, {
+                                                        variant: "bodySm",
+                                                        color: "subdued",
+                                                        children: "Revenue"
+                                                    })
+                                                ]
+                                            })
+                                        }),
+                                        /*#__PURE__*/ _jsx(Card, {
+                                            padded: true,
+                                            children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                                                gap: "1",
+                                                inlineAlign: "center",
+                                                children: [
+                                                    /*#__PURE__*/ _jsx(Text, {
+                                                        variant: "headingLg",
+                                                        children: "89.5%"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(Text, {
+                                                        variant: "bodySm",
+                                                        color: "subdued",
+                                                        children: "Conversion"
+                                                    })
+                                                ]
+                                            })
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsx(Card, {
+                                    title: "Performance Over Time",
+                                    padded: true,
+                                    children: /*#__PURE__*/ _jsx(VerticalStack, {
+                                        blockAlign: "center",
+                                        inlineAlign: "center",
+                                        as: Box,
+                                        padding: "12",
+                                        background: "bg-surface-neutral-subdued",
+                                        borderRadius: "1",
+                                        style: {
+                                            height: '300px'
+                                        },
+                                        children: /*#__PURE__*/ _jsx(Text, {
+                                            color: "subdued",
+                                            children: "Chart would be rendered here"
+                                        })
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx(Card, {
+                                    title: "Recent Activity",
+                                    padded: true,
+                                    children: /*#__PURE__*/ _jsx(VerticalStack, {
+                                        gap: "2",
+                                        children: Array.from({
+                                            length: 5
+                                        }, function(_, i) {
+                                            return /*#__PURE__*/ _jsx(Box, {
+                                                padding: "2",
+                                                borderWidth: "1",
+                                                borderColor: "border",
+                                                borderRadius: "1",
+                                                children: /*#__PURE__*/ _jsxs(HorizontalStack, {
+                                                    align: "space-between",
+                                                    children: [
+                                                        /*#__PURE__*/ _jsxs(Text, {
+                                                            children: [
+                                                                "User action ",
+                                                                i + 1
+                                                            ]
+                                                        }),
+                                                        /*#__PURE__*/ _jsx(Text, {
+                                                            variant: "bodySm",
+                                                            color: "subdued",
+                                                            children: "2 hours ago"
+                                                        })
+                                                    ]
+                                                })
+                                            }, i);
+                                        })
+                                    })
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(LayoutSection, {
+                        sidebar: "slim",
+                        sticky: true,
+                        children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                            gap: "4",
+                            children: [
+                                /*#__PURE__*/ _jsx(Card, {
+                                    title: "Filters",
+                                    padded: true,
+                                    children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                                        gap: "2",
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Text, {
+                                                variant: "bodySm",
+                                                children: "Date Range"
+                                            }),
+                                            /*#__PURE__*/ _jsxs("select", {
+                                                style: {
+                                                    padding: '0.5rem',
+                                                    border: '1px solid #ccc',
+                                                    borderRadius: '4px'
+                                                },
+                                                children: [
+                                                    /*#__PURE__*/ _jsx("option", {
+                                                        children: "Last 7 days"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("option", {
+                                                        children: "Last 30 days"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("option", {
+                                                        children: "Last 90 days"
+                                                    })
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ _jsx(Box, {
+                                                paddingBlockStart: "4",
+                                                children: /*#__PURE__*/ _jsx(Text, {
+                                                    variant: "bodySm",
+                                                    children: "Source"
+                                                })
+                                            }),
+                                            /*#__PURE__*/ _jsxs(VerticalStack, {
+                                                gap: "1",
+                                                children: [
+                                                    /*#__PURE__*/ _jsxs(HorizontalStack, {
+                                                        gap: "2",
+                                                        blockAlign: "center",
+                                                        children: [
+                                                            /*#__PURE__*/ _jsx("input", {
+                                                                type: "checkbox",
+                                                                defaultChecked: true
+                                                            }),
+                                                            /*#__PURE__*/ _jsx(Text, {
+                                                                variant: "bodySm",
+                                                                children: "Organic"
+                                                            })
+                                                        ]
+                                                    }),
+                                                    /*#__PURE__*/ _jsxs(HorizontalStack, {
+                                                        gap: "2",
+                                                        blockAlign: "center",
+                                                        children: [
+                                                            /*#__PURE__*/ _jsx("input", {
+                                                                type: "checkbox",
+                                                                defaultChecked: true
+                                                            }),
+                                                            /*#__PURE__*/ _jsx(Text, {
+                                                                variant: "bodySm",
+                                                                children: "Paid"
+                                                            })
+                                                        ]
+                                                    }),
+                                                    /*#__PURE__*/ _jsxs(HorizontalStack, {
+                                                        gap: "2",
+                                                        blockAlign: "center",
+                                                        children: [
+                                                            /*#__PURE__*/ _jsx("input", {
+                                                                type: "checkbox"
+                                                            }),
+                                                            /*#__PURE__*/ _jsx(Text, {
+                                                                variant: "bodySm",
+                                                                children: "Social"
+                                                            })
+                                                        ]
+                                                    })
+                                                ]
+                                            })
+                                        ]
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx(Card, {
+                                    title: "Export",
+                                    padded: true,
+                                    children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                                        gap: "2",
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Button, {
+                                                size: "slim",
+                                                children: "Export PDF"
+                                            }),
+                                            /*#__PURE__*/ _jsx(Button, {
+                                                size: "slim",
+                                                children: "Export CSV"
+                                            }),
+                                            /*#__PURE__*/ _jsx(Button, {
+                                                size: "slim",
+                                                children: "Share Report"
+                                            })
+                                        ]
+                                    })
+                                })
+                            ]
+                        })
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Dashboard layout with main analytics content and sticky filter sidebar.'
+            }
+        }
+    }
+};
+export var ResponsiveBehavior = {
+    render: function() {
+        return /*#__PURE__*/ _jsx(Page, {
+            title: "Responsive Layout Demo",
+            children: /*#__PURE__*/ _jsxs(Layout, {
+                children: [
+                    /*#__PURE__*/ _jsx(LayoutSection, {
+                        children: /*#__PURE__*/ _jsx(Card, {
+                            title: "Main Content Area",
+                            padded: true,
+                            children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                                gap: "4",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Text, {
+                                        children: "This layout demonstrates responsive behavior. On larger screens, you'll see the sidebar alongside this main content. On smaller screens, the layout automatically stacks vertically for better mobile experience."
+                                    }),
+                                    /*#__PURE__*/ _jsx(Text, {
+                                        children: "Resize your browser window to see how the layout adapts to different screen sizes. The sidebar will reposition and resize appropriately."
+                                    }),
+                                    /*#__PURE__*/ _jsx(Box, {
+                                        paddingBlockStart: "4",
+                                        children: /*#__PURE__*/ _jsx(Grid, {
+                                            columns: {
+                                                xs: 1,
+                                                sm: 2,
+                                                md: 3,
+                                                lg: 6
+                                            },
+                                            gap: "4",
+                                            children: Array.from({
+                                                length: 6
+                                            }, function(_, i) {
+                                                return /*#__PURE__*/ _jsx(Box, {
+                                                    padding: "4",
+                                                    background: "bg-surface-info-subdued",
+                                                    borderRadius: "1",
+                                                    children: /*#__PURE__*/ _jsx(VerticalStack, {
+                                                        inlineAlign: "center",
+                                                        children: /*#__PURE__*/ _jsxs(Text, {
+                                                            children: [
+                                                                "Item ",
+                                                                i + 1
+                                                            ]
+                                                        })
+                                                    })
+                                                }, i);
+                                            })
+                                        })
+                                    })
+                                ]
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(LayoutSection, {
+                        sidebar: true,
+                        children: /*#__PURE__*/ _jsx(Card, {
+                            title: "Responsive Sidebar",
+                            padded: true,
+                            children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                                gap: "4",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Text, {
+                                        variant: "headingSm",
+                                        children: "Breakpoint Info"
+                                    }),
+                                    /*#__PURE__*/ _jsxs(VerticalStack, {
+                                        gap: "1",
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Text, {
+                                                variant: "bodySm",
+                                                children: "• Large screens: Sidebar at 1/3 width"
+                                            }),
+                                            /*#__PURE__*/ _jsx(Text, {
+                                                variant: "bodySm",
+                                                children: "• Medium screens: Stacked layout"
+                                            }),
+                                            /*#__PURE__*/ _jsx(Text, {
+                                                variant: "bodySm",
+                                                children: "• Small screens: Full width sections"
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsx(Box, {
+                                        paddingBlockStart: "4",
+                                        children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                                            gap: "2",
+                                            children: [
+                                                /*#__PURE__*/ _jsx(Text, {
+                                                    variant: "headingSm",
+                                                    children: "Test Actions"
+                                                }),
+                                                /*#__PURE__*/ _jsxs(VerticalStack, {
+                                                    gap: "2",
+                                                    children: [
+                                                        /*#__PURE__*/ _jsx(Button, {
+                                                            size: "slim",
+                                                            children: "Resize Window"
+                                                        }),
+                                                        /*#__PURE__*/ _jsx(Button, {
+                                                            size: "slim",
+                                                            children: "View on Mobile"
+                                                        }),
+                                                        /*#__PURE__*/ _jsx(Button, {
+                                                            size: "slim",
+                                                            children: "Test Tablet View"
+                                                        })
+                                                    ]
+                                                })
+                                            ]
+                                        })
+                                    })
+                                ]
+                            })
+                        })
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Demonstrates responsive behavior of layout sections across different screen sizes.'
+            }
+        }
+    }
+};