@heymantle/litho 0.0.3 → 0.0.4

package/dist/cjs/stories/VerticalStack.stories.js

@@ -0,0 +1,1287 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get Default () {
+        return Default;
+    },
+    get FormLayout () {
+        return FormLayout;
+    },
+    get GapSizes () {
+        return GapSizes;
+    },
+    get HorizontalAlignment () {
+        return HorizontalAlignment;
+    },
+    get NotificationCenter () {
+        return NotificationCenter;
+    },
+    get PricingCard () {
+        return PricingCard;
+    },
+    get SidebarLayout () {
+        return SidebarLayout;
+    },
+    get StatusList () {
+        return StatusList;
+    },
+    get VerticalAlignment () {
+        return VerticalAlignment;
+    },
+    get default () {
+        return _default;
+    }
+});
+var _jsxruntime = require("react/jsx-runtime");
+var _transformers = require("../utilities/transformers.js");
+var _VerticalStack = /*#__PURE__*/ _interop_require_default(require("../components/VerticalStack.js"));
+var _Text = /*#__PURE__*/ _interop_require_default(require("../components/Text.js"));
+var _Card = /*#__PURE__*/ _interop_require_default(require("../components/Card.js"));
+var _Button = /*#__PURE__*/ _interop_require_default(require("../components/Button.js"));
+var _Badge = /*#__PURE__*/ _interop_require_default(require("../components/Badge.js"));
+var _HorizontalStack = /*#__PURE__*/ _interop_require_default(require("../components/HorizontalStack.js"));
+var _Box = /*#__PURE__*/ _interop_require_default(require("../components/Box.js"));
+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 _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: 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;
+}
+var _default = {
+    title: 'Litho/VerticalStack',
+    component: _VerticalStack.default,
+    parameters: {
+        layout: 'padded',
+        docs: {
+            description: {
+                component: "A VerticalStack component that arranges children vertically with customizable spacing and alignment. It provides flexible layout options for organizing content in columns."
+            },
+            source: {
+                transform: _transformers.transformStorySource
+            }
+        }
+    },
+    args: {
+        gap: '2',
+        align: 'start',
+        inlineAlign: 'start'
+    },
+    tags: [
+        'autodocs'
+    ],
+    argTypes: {
+        gap: {
+            control: 'select',
+            options: [
+                'none',
+                '0',
+                'px',
+                '0.5',
+                '1',
+                '2',
+                '3',
+                '4',
+                '5',
+                '6',
+                '8',
+                '10'
+            ],
+            description: 'Spacing between children'
+        },
+        align: {
+            control: 'select',
+            options: [
+                'start',
+                'end',
+                'center',
+                'spaceBetween'
+            ],
+            description: 'Vertical alignment of children (main axis)'
+        },
+        inlineAlign: {
+            control: 'select',
+            options: [
+                'start',
+                'end',
+                'center',
+                'stretch'
+            ],
+            description: 'Horizontal alignment of children (cross axis)'
+        },
+        as: {
+            control: 'text',
+            description: 'HTML element to render'
+        }
+    }
+};
+var Default = {
+    render: function(args) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, _object_spread_props(_object_spread({}, args), {
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                    padding: "4",
+                    background: "info-subdued",
+                    borderRadius: "default",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                        children: "Item 1"
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                    padding: "4",
+                    background: "magic-subdued",
+                    borderRadius: "default",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                        children: "Item 2"
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                    padding: "4",
+                    background: "success-subdued",
+                    borderRadius: "default",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                        children: "Item 3"
+                    })
+                })
+            ]
+        }));
+    }
+};
+var GapSizes = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+            gap: "6",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                    gap: "4",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "headingSm",
+                            children: "No Gap"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                            padding: "4",
+                            borderWidth: "1",
+                            borderColor: "neutral",
+                            borderStyle: "dashed",
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                                gap: "none",
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                        children: "Button 1"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                        children: "Button 2"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                        children: "Button 3"
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                    gap: "4",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "headingSm",
+                            children: "Small Gap (1)"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                            padding: "4",
+                            borderWidth: "1",
+                            borderColor: "neutral",
+                            borderStyle: "dashed",
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                                gap: "1",
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                        children: "Button 1"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                        children: "Button 2"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                        children: "Button 3"
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                    gap: "4",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "headingSm",
+                            children: "Medium Gap (4)"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                            padding: "4",
+                            borderWidth: "1",
+                            borderColor: "neutral",
+                            borderStyle: "dashed",
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                                gap: "4",
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                        children: "Button 1"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                        children: "Button 2"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                        children: "Button 3"
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                    gap: "4",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "headingSm",
+                            children: "Large Gap (8)"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                            padding: "4",
+                            borderWidth: "1",
+                            borderColor: "neutral",
+                            borderStyle: "dashed",
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                                gap: "8",
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                        children: "Button 1"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                        children: "Button 2"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                        children: "Button 3"
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Different gap sizes between stack items.'
+            }
+        }
+    }
+};
+var VerticalAlignment = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+            gap: "4",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                    gap: "4",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "headingSm",
+                            children: "Start Aligned"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                            padding: "4",
+                            borderWidth: "1",
+                            borderColor: "neutral",
+                            borderStyle: "dashed",
+                            minBlockSize: "200px",
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                                align: "start",
+                                gap: "2",
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                        children: "Button 1"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                        children: "Button 2"
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                    gap: "4",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "headingSm",
+                            children: "Center Aligned"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                            padding: "4",
+                            borderWidth: "1",
+                            borderColor: "neutral",
+                            borderStyle: "dashed",
+                            minBlockSize: "200px",
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                                align: "center",
+                                gap: "2",
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                        children: "Button 1"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                        children: "Button 2"
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                    gap: "4",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "headingSm",
+                            children: "End Aligned"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                            padding: "4",
+                            borderWidth: "1",
+                            borderColor: "neutral",
+                            borderStyle: "dashed",
+                            minBlockSize: "200px",
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                                align: "end",
+                                gap: "2",
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                        children: "Button 1"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                        children: "Button 2"
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                    gap: "4",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "headingSm",
+                            children: "Space Between"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                            padding: "4",
+                            borderWidth: "1",
+                            borderColor: "neutral",
+                            borderStyle: "dashed",
+                            minBlockSize: "200px",
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                                align: "spaceBetween",
+                                gap: "2",
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                        children: "Button 1"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                        children: "Button 2"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                        children: "Button 3"
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Different vertical alignment options.'
+            }
+        }
+    }
+};
+var HorizontalAlignment = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+            gap: "4",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                    gap: "4",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "headingSm",
+                            children: "Start Aligned"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                            padding: "4",
+                            borderWidth: "1",
+                            borderColor: "neutral",
+                            borderStyle: "dashed",
+                            minInlineSize: "200px",
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                                inlineAlign: "start",
+                                gap: "2",
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                        children: "Short"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                        children: "Medium Button"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                        children: "Very Long Button Text"
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                    gap: "4",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "headingSm",
+                            children: "Center Aligned"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                            padding: "4",
+                            borderWidth: "1",
+                            borderColor: "neutral",
+                            borderStyle: "dashed",
+                            minInlineSize: "200px",
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                                inlineAlign: "center",
+                                gap: "2",
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                        children: "Short"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                        children: "Medium Button"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                        children: "Very Long Button Text"
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                    gap: "4",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "headingSm",
+                            children: "End Aligned"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                            padding: "4",
+                            borderWidth: "1",
+                            borderColor: "neutral",
+                            borderStyle: "dashed",
+                            minInlineSize: "200px",
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                                inlineAlign: "end",
+                                gap: "2",
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                        children: "Short"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                        children: "Medium Button"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                        children: "Very Long Button Text"
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                    gap: "4",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "headingSm",
+                            children: "Stretch"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                            padding: "4",
+                            borderWidth: "1",
+                            borderColor: "neutral",
+                            borderStyle: "dashed",
+                            minInlineSize: "200px",
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                                inlineAlign: "stretch",
+                                gap: "2",
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                        children: "Short"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                        children: "Medium Button"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                        children: "Very Long Button Text"
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Different horizontal alignment options for items of varying widths.'
+            }
+        }
+    }
+};
+var SidebarLayout = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+            maxInlineSize: "280px",
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                title: "Application Sidebar",
+                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                    gap: "2",
+                    inlineAlign: "stretch",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                            padding: "4",
+                            background: "subdued",
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                variant: "headingSm",
+                                children: "Navigation"
+                            })
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                            paddingInline: "4",
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                                gap: "1",
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                        plain: true,
+                                        textAlign: "left",
+                                        children: "Dashboard"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                        plain: true,
+                                        textAlign: "left",
+                                        children: "Projects"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                        plain: true,
+                                        textAlign: "left",
+                                        children: "Team"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                        plain: true,
+                                        textAlign: "left",
+                                        children: "Settings"
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                            padding: "4",
+                            background: "subdued",
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                variant: "headingSm",
+                                children: "Recent"
+                            })
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                            paddingInline: "4",
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                                gap: "2",
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+                                        align: "space-between",
+                                        blockAlign: "center",
+                                        children: [
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                                variant: "bodySm",
+                                                children: "Project Alpha"
+                                            }),
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Badge.default, {
+                                                children: "Active"
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+                                        align: "space-between",
+                                        blockAlign: "center",
+                                        children: [
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                                variant: "bodySm",
+                                                children: "Project Beta"
+                                            }),
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Badge.default, {
+                                                status: "warning",
+                                                children: "Review"
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                            padding: "4",
+                            borderBlockStartWidth: "1",
+                            borderColor: "neutral",
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                variant: "caption",
+                                color: "subdued",
+                                children: "\xa9 2024 Company"
+                            })
+                        })
+                    ]
+                })
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Sidebar layout with navigation sections and footer.'
+            }
+        }
+    }
+};
+var FormLayout = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+            title: "Create Account",
+            padded: true,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                gap: "4",
+                inlineAlign: "stretch",
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                        gap: "2",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                variant: "headingSm",
+                                children: "Personal Information"
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                                as: "input",
+                                placeholder: "Full Name",
+                                padding: "3",
+                                borderWidth: "1",
+                                borderColor: "neutral",
+                                borderRadius: "default"
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                                as: "input",
+                                placeholder: "Email Address",
+                                padding: "3",
+                                borderWidth: "1",
+                                borderColor: "neutral",
+                                borderRadius: "default"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                        gap: "2",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                variant: "headingSm",
+                                children: "Security"
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                                as: "input",
+                                type: "password",
+                                placeholder: "Password",
+                                padding: "3",
+                                borderWidth: "1",
+                                borderColor: "neutral",
+                                borderRadius: "default"
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                                as: "input",
+                                type: "password",
+                                placeholder: "Confirm Password",
+                                padding: "3",
+                                borderWidth: "1",
+                                borderColor: "neutral",
+                                borderRadius: "default"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                        gap: "2",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                variant: "headingSm",
+                                children: "Preferences"
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+                                gap: "2",
+                                blockAlign: "center",
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)("input", {
+                                        type: "checkbox"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        children: "Subscribe to newsletter"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+                                gap: "2",
+                                blockAlign: "center",
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)("input", {
+                                        type: "checkbox"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        children: "Receive product updates"
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+                        gap: "2",
+                        align: "end",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                children: "Cancel"
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                primary: true,
+                                children: "Create Account"
+                            })
+                        ]
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Form layout with grouped sections using vertical stacks.'
+            }
+        }
+    }
+};
+var StatusList = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+            title: "System Status",
+            padded: true,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                gap: "3",
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+                        align: "space-between",
+                        blockAlign: "center",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                                gap: "0.5",
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        variant: "headingSm",
+                                        children: "Database"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        color: "subdued",
+                                        variant: "bodySm",
+                                        children: "Primary connection"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Badge.default, {
+                                status: "success",
+                                children: "Online"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+                        align: "space-between",
+                        blockAlign: "center",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                                gap: "0.5",
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        variant: "headingSm",
+                                        children: "API Gateway"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        color: "subdued",
+                                        variant: "bodySm",
+                                        children: "External services"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Badge.default, {
+                                status: "warning",
+                                children: "Degraded"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+                        align: "space-between",
+                        blockAlign: "center",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                                gap: "0.5",
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        variant: "headingSm",
+                                        children: "Cache Layer"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        color: "subdued",
+                                        variant: "bodySm",
+                                        children: "Redis cluster"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Badge.default, {
+                                status: "critical",
+                                children: "Offline"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+                        align: "space-between",
+                        blockAlign: "center",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                                gap: "0.5",
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        variant: "headingSm",
+                                        children: "CDN"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        color: "subdued",
+                                        variant: "bodySm",
+                                        children: "Content delivery"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Badge.default, {
+                                status: "success",
+                                children: "Online"
+                            })
+                        ]
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Status list with service information and status badges.'
+            }
+        }
+    }
+};
+var NotificationCenter = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+            maxInlineSize: "350px",
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                title: "Notifications",
+                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                    gap: "0",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                            padding: "4",
+                            borderBlockEndWidth: "1",
+                            borderColor: "neutral",
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                                gap: "1",
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+                                        align: "space-between",
+                                        blockAlign: "start",
+                                        children: [
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                                variant: "headingSm",
+                                                children: "New Order Received"
+                                            }),
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                                variant: "caption",
+                                                color: "subdued",
+                                                children: "2m ago"
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        variant: "bodySm",
+                                        children: "Order #1234 has been placed by customer John Doe."
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+                                        gap: "2",
+                                        children: [
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                                size: "small",
+                                                children: "View Order"
+                                            }),
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                                size: "small",
+                                                plain: true,
+                                                children: "Dismiss"
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                            padding: "4",
+                            borderBlockEndWidth: "1",
+                            borderColor: "neutral",
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                                gap: "1",
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+                                        align: "space-between",
+                                        blockAlign: "start",
+                                        children: [
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                                variant: "headingSm",
+                                                children: "Payment Processed"
+                                            }),
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                                variant: "caption",
+                                                color: "subdued",
+                                                children: "5m ago"
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        variant: "bodySm",
+                                        children: "Payment of $99.99 has been successfully processed."
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+                                        gap: "2",
+                                        children: [
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                                size: "small",
+                                                children: "View Details"
+                                            }),
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                                size: "small",
+                                                plain: true,
+                                                children: "Dismiss"
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                            padding: "4",
+                            borderBlockEndWidth: "1",
+                            borderColor: "neutral",
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                                gap: "1",
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+                                        align: "space-between",
+                                        blockAlign: "start",
+                                        children: [
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                                variant: "headingSm",
+                                                children: "System Maintenance"
+                                            }),
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                                variant: "caption",
+                                                color: "subdued",
+                                                children: "1h ago"
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        variant: "bodySm",
+                                        children: "Scheduled maintenance will begin at 2:00 AM tomorrow."
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+                                        gap: "2",
+                                        children: [
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                                size: "small",
+                                                children: "Learn More"
+                                            }),
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                                size: "small",
+                                                plain: true,
+                                                children: "Dismiss"
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                            padding: "4",
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_VerticalStack.default, {
+                                inlineAlign: "center",
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                    plain: true,
+                                    children: "View All Notifications"
+                                })
+                            })
+                        })
+                    ]
+                })
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Notification center with stacked notification items.'
+            }
+        }
+    }
+};
+var PricingCard = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+            gap: "4",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                    maxInlineSize: "280px",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                        padded: true,
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                            gap: "4",
+                            inlineAlign: "center",
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                                    gap: "1",
+                                    inlineAlign: "center",
+                                    children: [
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                            variant: "headingLg",
+                                            children: "Basic"
+                                        }),
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                            color: "subdued",
+                                            children: "Perfect for individuals"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                                    gap: "0.5",
+                                    inlineAlign: "center",
+                                    children: [
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                            variant: "heading2xl",
+                                            fontWeight: "bold",
+                                            children: "$9"
+                                        }),
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                            color: "subdued",
+                                            children: "per month"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                                    gap: "2",
+                                    inlineAlign: "stretch",
+                                    children: [
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                            children: "✓ 5 projects"
+                                        }),
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                            children: "✓ 1GB storage"
+                                        }),
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                            children: "✓ Email support"
+                                        }),
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                            color: "subdued",
+                                            children: "✗ Advanced features"
+                                        }),
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                            color: "subdued",
+                                            children: "✗ Priority support"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                                    inlineSize: "100%",
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                        fullWidth: true,
+                                        children: "Choose Plan"
+                                    })
+                                })
+                            ]
+                        })
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                    maxInlineSize: "280px",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                        padded: true,
+                        borderWidth: "2",
+                        borderColor: "highlight",
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                            gap: "4",
+                            inlineAlign: "center",
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                                    gap: "1",
+                                    inlineAlign: "center",
+                                    children: [
+                                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+                                            gap: "2",
+                                            blockAlign: "center",
+                                            children: [
+                                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                                    variant: "headingLg",
+                                                    children: "Pro"
+                                                }),
+                                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Badge.default, {
+                                                    status: "highlight",
+                                                    children: "Popular"
+                                                })
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                            color: "subdued",
+                                            children: "Great for small teams"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                                    gap: "0.5",
+                                    inlineAlign: "center",
+                                    children: [
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                            variant: "heading2xl",
+                                            fontWeight: "bold",
+                                            children: "$29"
+                                        }),
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                            color: "subdued",
+                                            children: "per month"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                                    gap: "2",
+                                    inlineAlign: "stretch",
+                                    children: [
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                            children: "✓ Unlimited projects"
+                                        }),
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                            children: "✓ 100GB storage"
+                                        }),
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                            children: "✓ Priority support"
+                                        }),
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                            children: "✓ Advanced features"
+                                        }),
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                            children: "✓ Team collaboration"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                                    inlineSize: "100%",
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                        primary: true,
+                                        fullWidth: true,
+                                        children: "Choose Plan"
+                                    })
+                                })
+                            ]
+                        })
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Pricing cards using vertical stacks for content organization.'
+            }
+        }
+    }
+};