@heymantle/litho 0.0.3 → 0.0.5

package/dist/esm/stories/Stack.stories.js

@@ -0,0 +1,1338 @@
+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 Stack from "../components/Stack.js";
+import Box from "../components/Box.js";
+import Text from "../components/Text.js";
+import Card from "../components/Card.js";
+import Button from "../components/Button.js";
+import Badge from "../components/Badge.js";
+import Icon from "../components/Icon.js";
+import { HomeMinor, ProductsMinor, CustomersMinor } from "@shopify/polaris-icons";
+export default {
+    title: 'Litho/Stack',
+    component: Stack,
+    parameters: {
+        layout: 'padded',
+        docs: {
+            description: {
+                component: "A flexible Stack component for creating vertical or horizontal layouts with customizable spacing and alignment. By default, creates a vertical stack with medium gap spacing. Use the `horizontal` prop to switch to a horizontal layout."
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    },
+    args: {
+        gap: 'md',
+        align: 'start',
+        horizontal: false,
+        wrap: false
+    },
+    tags: [
+        'autodocs'
+    ],
+    argTypes: {
+        horizontal: {
+            control: 'boolean',
+            description: 'If true, renders a horizontal stack (flex-row). Defaults to vertical (flex-col).'
+        },
+        gap: {
+            control: 'select',
+            options: [
+                'none',
+                'xs',
+                'sm',
+                'md',
+                'lg',
+                '0',
+                'px',
+                '0.5',
+                '1',
+                '2',
+                '3',
+                '4',
+                '5',
+                '6',
+                '8',
+                '10'
+            ],
+            description: 'Spacing between children. Semantic: none (0), xs (1), sm (2), md (4), lg (8). Numeric: 0, px, 0.5, 1, 2, 3, 4, 5, 6, 8, 10'
+        },
+        align: {
+            control: 'select',
+            options: [
+                'start',
+                'center',
+                'end',
+                'space-between',
+                'space-evenly',
+                'space-around',
+                'spaceBetween'
+            ],
+            description: 'Main axis alignment (horizontal for horizontal stacks, vertical for vertical stacks)'
+        },
+        blockAlign: {
+            control: 'select',
+            options: [
+                'start',
+                'center',
+                'end',
+                'stretch'
+            ],
+            description: 'Cross-axis alignment for horizontal stacks (vertical alignment)'
+        },
+        inlineAlign: {
+            control: 'select',
+            options: [
+                'start',
+                'center',
+                'end',
+                'stretch'
+            ],
+            description: 'Cross-axis alignment for vertical stacks (horizontal alignment)'
+        },
+        wrap: {
+            control: 'boolean',
+            description: 'Whether children should wrap to next line'
+        },
+        as: {
+            control: 'text',
+            description: 'HTML element to render'
+        }
+    }
+};
+export var Default = {
+    render: function(args) {
+        return /*#__PURE__*/ _jsxs(Stack, _object_spread_props(_object_spread({}, args), {
+            children: [
+                /*#__PURE__*/ _jsx(Box, {
+                    padding: "4",
+                    background: "primary-subdued",
+                    borderRadius: "default",
+                    children: /*#__PURE__*/ _jsx(Text, {
+                        children: "Item 1"
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Box, {
+                    padding: "4",
+                    background: "subdued",
+                    borderRadius: "default",
+                    children: /*#__PURE__*/ _jsx(Text, {
+                        children: "Item 2"
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Box, {
+                    padding: "4",
+                    background: "success-subdued",
+                    borderRadius: "default",
+                    children: /*#__PURE__*/ _jsx(Text, {
+                        children: "Item 3"
+                    })
+                })
+            ]
+        }));
+    }
+};
+export var Horizontal = {
+    render: function(args) {
+        return /*#__PURE__*/ _jsxs(Stack, _object_spread_props(_object_spread({
+            horizontal: true
+        }, args), {
+            children: [
+                /*#__PURE__*/ _jsx(Box, {
+                    padding: "4",
+                    background: "primary-subdued",
+                    borderRadius: "default",
+                    children: /*#__PURE__*/ _jsx(Text, {
+                        children: "Item 1"
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Box, {
+                    padding: "4",
+                    background: "subdued",
+                    borderRadius: "default",
+                    children: /*#__PURE__*/ _jsx(Text, {
+                        children: "Item 2"
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Box, {
+                    padding: "4",
+                    background: "success-subdued",
+                    borderRadius: "default",
+                    children: /*#__PURE__*/ _jsx(Text, {
+                        children: "Item 3"
+                    })
+                })
+            ]
+        }));
+    },
+    args: {
+        horizontal: true
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Horizontal stack layout using the `horizontal` prop.'
+            }
+        }
+    }
+};
+export var GapSizes = {
+    render: function() {
+        return /*#__PURE__*/ _jsxs(Stack, {
+            gap: "lg",
+            children: [
+                /*#__PURE__*/ _jsxs(Stack, {
+                    gap: "sm",
+                    children: [
+                        /*#__PURE__*/ _jsx(Text, {
+                            variant: "headingSm",
+                            children: "None Gap (0)"
+                        }),
+                        /*#__PURE__*/ _jsxs(Stack, {
+                            horizontal: true,
+                            gap: "none",
+                            children: [
+                                /*#__PURE__*/ _jsx(Button, {
+                                    children: "Button 1"
+                                }),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    children: "Button 2"
+                                }),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    children: "Button 3"
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(Stack, {
+                    gap: "sm",
+                    children: [
+                        /*#__PURE__*/ _jsx(Text, {
+                            variant: "headingSm",
+                            children: "Extra Small Gap (xs = 1)"
+                        }),
+                        /*#__PURE__*/ _jsxs(Stack, {
+                            horizontal: true,
+                            gap: "xs",
+                            children: [
+                                /*#__PURE__*/ _jsx(Button, {
+                                    children: "Button 1"
+                                }),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    children: "Button 2"
+                                }),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    children: "Button 3"
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(Stack, {
+                    gap: "sm",
+                    children: [
+                        /*#__PURE__*/ _jsx(Text, {
+                            variant: "headingSm",
+                            children: "Small Gap (sm = 2)"
+                        }),
+                        /*#__PURE__*/ _jsxs(Stack, {
+                            horizontal: true,
+                            gap: "sm",
+                            children: [
+                                /*#__PURE__*/ _jsx(Button, {
+                                    children: "Button 1"
+                                }),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    children: "Button 2"
+                                }),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    children: "Button 3"
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(Stack, {
+                    gap: "sm",
+                    children: [
+                        /*#__PURE__*/ _jsx(Text, {
+                            variant: "headingSm",
+                            children: "Medium Gap (md = 4, default)"
+                        }),
+                        /*#__PURE__*/ _jsxs(Stack, {
+                            horizontal: true,
+                            gap: "md",
+                            children: [
+                                /*#__PURE__*/ _jsx(Button, {
+                                    children: "Button 1"
+                                }),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    children: "Button 2"
+                                }),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    children: "Button 3"
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(Stack, {
+                    gap: "sm",
+                    children: [
+                        /*#__PURE__*/ _jsx(Text, {
+                            variant: "headingSm",
+                            children: "Large Gap (lg = 8)"
+                        }),
+                        /*#__PURE__*/ _jsxs(Stack, {
+                            horizontal: true,
+                            gap: "lg",
+                            children: [
+                                /*#__PURE__*/ _jsx(Button, {
+                                    children: "Button 1"
+                                }),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    children: "Button 2"
+                                }),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    children: "Button 3"
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Different gap sizes available: none (0), xs (1), sm (2), md (4), lg (8). Medium is the default.'
+            }
+        }
+    }
+};
+export var VerticalAlignment = {
+    render: function() {
+        return /*#__PURE__*/ _jsxs(Stack, {
+            gap: "lg",
+            children: [
+                /*#__PURE__*/ _jsxs(Stack, {
+                    gap: "sm",
+                    children: [
+                        /*#__PURE__*/ _jsx(Text, {
+                            variant: "headingSm",
+                            children: "Vertical - Start Aligned (default)"
+                        }),
+                        /*#__PURE__*/ _jsx(Box, {
+                            border: "dashed",
+                            padding: "4",
+                            children: /*#__PURE__*/ _jsxs(Stack, {
+                                align: "start",
+                                gap: "sm",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Box, {
+                                        padding: "4",
+                                        background: "primary-subdued",
+                                        borderRadius: "default",
+                                        children: /*#__PURE__*/ _jsx(Text, {
+                                            children: "Item 1"
+                                        })
+                                    }),
+                                    /*#__PURE__*/ _jsx(Box, {
+                                        padding: "4",
+                                        background: "subdued",
+                                        borderRadius: "default",
+                                        children: /*#__PURE__*/ _jsx(Text, {
+                                            children: "Item 2"
+                                        })
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(Stack, {
+                    gap: "sm",
+                    children: [
+                        /*#__PURE__*/ _jsx(Text, {
+                            variant: "headingSm",
+                            children: "Vertical - Center Aligned"
+                        }),
+                        /*#__PURE__*/ _jsx(Box, {
+                            border: "dashed",
+                            padding: "4",
+                            children: /*#__PURE__*/ _jsxs(Stack, {
+                                align: "center",
+                                gap: "sm",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Box, {
+                                        padding: "4",
+                                        background: "primary-subdued",
+                                        borderRadius: "default",
+                                        children: /*#__PURE__*/ _jsx(Text, {
+                                            children: "Item 1"
+                                        })
+                                    }),
+                                    /*#__PURE__*/ _jsx(Box, {
+                                        padding: "4",
+                                        background: "subdued",
+                                        borderRadius: "default",
+                                        children: /*#__PURE__*/ _jsx(Text, {
+                                            children: "Item 2"
+                                        })
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(Stack, {
+                    gap: "sm",
+                    children: [
+                        /*#__PURE__*/ _jsx(Text, {
+                            variant: "headingSm",
+                            children: "Vertical - End Aligned"
+                        }),
+                        /*#__PURE__*/ _jsx(Box, {
+                            border: "dashed",
+                            padding: "4",
+                            children: /*#__PURE__*/ _jsxs(Stack, {
+                                align: "end",
+                                gap: "sm",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Box, {
+                                        padding: "4",
+                                        background: "primary-subdued",
+                                        borderRadius: "default",
+                                        children: /*#__PURE__*/ _jsx(Text, {
+                                            children: "Item 1"
+                                        })
+                                    }),
+                                    /*#__PURE__*/ _jsx(Box, {
+                                        padding: "4",
+                                        background: "subdued",
+                                        borderRadius: "default",
+                                        children: /*#__PURE__*/ _jsx(Text, {
+                                            children: "Item 2"
+                                        })
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(Stack, {
+                    gap: "sm",
+                    children: [
+                        /*#__PURE__*/ _jsx(Text, {
+                            variant: "headingSm",
+                            children: "Vertical - Space Between"
+                        }),
+                        /*#__PURE__*/ _jsx(Box, {
+                            border: "dashed",
+                            padding: "4",
+                            minHeight: "200px",
+                            children: /*#__PURE__*/ _jsxs(Stack, {
+                                align: "space-between",
+                                gap: "sm",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Box, {
+                                        padding: "4",
+                                        background: "primary-subdued",
+                                        borderRadius: "default",
+                                        children: /*#__PURE__*/ _jsx(Text, {
+                                            children: "Item 1"
+                                        })
+                                    }),
+                                    /*#__PURE__*/ _jsx(Box, {
+                                        padding: "4",
+                                        background: "subdued",
+                                        borderRadius: "default",
+                                        children: /*#__PURE__*/ _jsx(Text, {
+                                            children: "Item 2"
+                                        })
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Vertical alignment options for vertical stacks using the `align` prop.'
+            }
+        }
+    }
+};
+export var HorizontalAlignment = {
+    render: function() {
+        return /*#__PURE__*/ _jsxs(Stack, {
+            gap: "lg",
+            children: [
+                /*#__PURE__*/ _jsxs(Stack, {
+                    gap: "sm",
+                    children: [
+                        /*#__PURE__*/ _jsx(Text, {
+                            variant: "headingSm",
+                            children: "Horizontal - Start Aligned (default)"
+                        }),
+                        /*#__PURE__*/ _jsx(Box, {
+                            border: "dashed",
+                            padding: "4",
+                            children: /*#__PURE__*/ _jsxs(Stack, {
+                                horizontal: true,
+                                align: "start",
+                                gap: "sm",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        children: "Button 1"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        children: "Button 2"
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(Stack, {
+                    gap: "sm",
+                    children: [
+                        /*#__PURE__*/ _jsx(Text, {
+                            variant: "headingSm",
+                            children: "Horizontal - Center Aligned"
+                        }),
+                        /*#__PURE__*/ _jsx(Box, {
+                            border: "dashed",
+                            padding: "4",
+                            children: /*#__PURE__*/ _jsxs(Stack, {
+                                horizontal: true,
+                                align: "center",
+                                gap: "sm",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        children: "Button 1"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        children: "Button 2"
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(Stack, {
+                    gap: "sm",
+                    children: [
+                        /*#__PURE__*/ _jsx(Text, {
+                            variant: "headingSm",
+                            children: "Horizontal - End Aligned"
+                        }),
+                        /*#__PURE__*/ _jsx(Box, {
+                            border: "dashed",
+                            padding: "4",
+                            children: /*#__PURE__*/ _jsxs(Stack, {
+                                horizontal: true,
+                                align: "end",
+                                gap: "sm",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        children: "Button 1"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        children: "Button 2"
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(Stack, {
+                    gap: "sm",
+                    children: [
+                        /*#__PURE__*/ _jsx(Text, {
+                            variant: "headingSm",
+                            children: "Horizontal - Space Between"
+                        }),
+                        /*#__PURE__*/ _jsx(Box, {
+                            border: "dashed",
+                            padding: "4",
+                            children: /*#__PURE__*/ _jsxs(Stack, {
+                                horizontal: true,
+                                align: "space-between",
+                                gap: "sm",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        children: "Button 1"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        children: "Button 2"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        children: "Button 3"
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Horizontal alignment options for horizontal stacks using the `align` prop.'
+            }
+        }
+    }
+};
+export var CrossAxisAlignment = {
+    render: function() {
+        return /*#__PURE__*/ _jsxs(Stack, {
+            gap: "lg",
+            children: [
+                /*#__PURE__*/ _jsxs(Stack, {
+                    gap: "sm",
+                    children: [
+                        /*#__PURE__*/ _jsx(Text, {
+                            variant: "headingSm",
+                            children: "Vertical Stack - Inline Align Start"
+                        }),
+                        /*#__PURE__*/ _jsx(Box, {
+                            border: "dashed",
+                            padding: "4",
+                            children: /*#__PURE__*/ _jsxs(Stack, {
+                                inlineAlign: "start",
+                                gap: "sm",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Box, {
+                                        padding: "4",
+                                        background: "primary-subdued",
+                                        borderRadius: "default",
+                                        width: "fit",
+                                        children: /*#__PURE__*/ _jsx(Text, {
+                                            children: "Item 1"
+                                        })
+                                    }),
+                                    /*#__PURE__*/ _jsx(Box, {
+                                        padding: "4",
+                                        background: "subdued",
+                                        borderRadius: "default",
+                                        width: "fit",
+                                        children: /*#__PURE__*/ _jsx(Text, {
+                                            children: "Item 2"
+                                        })
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(Stack, {
+                    gap: "sm",
+                    children: [
+                        /*#__PURE__*/ _jsx(Text, {
+                            variant: "headingSm",
+                            children: "Vertical Stack - Inline Align Center"
+                        }),
+                        /*#__PURE__*/ _jsx(Box, {
+                            border: "dashed",
+                            padding: "4",
+                            children: /*#__PURE__*/ _jsxs(Stack, {
+                                inlineAlign: "center",
+                                gap: "sm",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Box, {
+                                        padding: "4",
+                                        background: "primary-subdued",
+                                        borderRadius: "default",
+                                        width: "fit",
+                                        children: /*#__PURE__*/ _jsx(Text, {
+                                            children: "Item 1"
+                                        })
+                                    }),
+                                    /*#__PURE__*/ _jsx(Box, {
+                                        padding: "4",
+                                        background: "subdued",
+                                        borderRadius: "default",
+                                        width: "fit",
+                                        children: /*#__PURE__*/ _jsx(Text, {
+                                            children: "Item 2"
+                                        })
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(Stack, {
+                    gap: "sm",
+                    children: [
+                        /*#__PURE__*/ _jsx(Text, {
+                            variant: "headingSm",
+                            children: "Horizontal Stack - Block Align Center"
+                        }),
+                        /*#__PURE__*/ _jsx(Box, {
+                            border: "dashed",
+                            padding: "4",
+                            minHeight: "100px",
+                            children: /*#__PURE__*/ _jsxs(Stack, {
+                                horizontal: true,
+                                blockAlign: "center",
+                                gap: "sm",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        children: "Short"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Box, {
+                                        padding: "8 4",
+                                        background: "subdued",
+                                        borderRadius: "default",
+                                        children: /*#__PURE__*/ _jsx(Text, {
+                                            children: "Tall Item"
+                                        })
+                                    }),
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        children: "Short"
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(Stack, {
+                    gap: "sm",
+                    children: [
+                        /*#__PURE__*/ _jsx(Text, {
+                            variant: "headingSm",
+                            children: "Horizontal Stack - Block Align Stretch"
+                        }),
+                        /*#__PURE__*/ _jsx(Box, {
+                            border: "dashed",
+                            padding: "4",
+                            minHeight: "100px",
+                            children: /*#__PURE__*/ _jsxs(Stack, {
+                                horizontal: true,
+                                blockAlign: "stretch",
+                                gap: "sm",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Box, {
+                                        padding: "4",
+                                        background: "primary-subdued",
+                                        borderRadius: "default",
+                                        children: /*#__PURE__*/ _jsx(Text, {
+                                            children: "Item 1"
+                                        })
+                                    }),
+                                    /*#__PURE__*/ _jsx(Box, {
+                                        padding: "4",
+                                        background: "subdued",
+                                        borderRadius: "default",
+                                        children: /*#__PURE__*/ _jsx(Text, {
+                                            children: "Item 2"
+                                        })
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Cross-axis alignment: use `inlineAlign` for vertical stacks (horizontal alignment) and `blockAlign` for horizontal stacks (vertical alignment).'
+            }
+        }
+    }
+};
+export var Wrapping = {
+    render: function() {
+        return /*#__PURE__*/ _jsxs(Stack, {
+            gap: "lg",
+            children: [
+                /*#__PURE__*/ _jsxs(Stack, {
+                    gap: "sm",
+                    children: [
+                        /*#__PURE__*/ _jsx(Text, {
+                            variant: "headingSm",
+                            children: "With Wrapping"
+                        }),
+                        /*#__PURE__*/ _jsx(Box, {
+                            border: "dashed",
+                            padding: "4",
+                            maxWidth: "300px",
+                            children: /*#__PURE__*/ _jsxs(Stack, {
+                                horizontal: true,
+                                wrap: true,
+                                gap: "sm",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        children: "Button 1"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        children: "Button 2"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        children: "Button 3"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        children: "Button 4"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        children: "Button 5"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        children: "Button 6"
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(Stack, {
+                    gap: "sm",
+                    children: [
+                        /*#__PURE__*/ _jsx(Text, {
+                            variant: "headingSm",
+                            children: "Without Wrapping"
+                        }),
+                        /*#__PURE__*/ _jsx(Box, {
+                            border: "dashed",
+                            padding: "4",
+                            maxWidth: "300px",
+                            overflowX: "auto",
+                            children: /*#__PURE__*/ _jsxs(Stack, {
+                                horizontal: true,
+                                wrap: false,
+                                gap: "sm",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        children: "Button 1"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        children: "Button 2"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        children: "Button 3"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        children: "Button 4"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        children: "Button 5"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        children: "Button 6"
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Comparison of wrapping vs non-wrapping behavior for horizontal stacks.'
+            }
+        }
+    }
+};
+export var ActionBar = {
+    render: function() {
+        return /*#__PURE__*/ _jsx(Card, {
+            title: "Document Actions",
+            padded: true,
+            children: /*#__PURE__*/ _jsxs(Stack, {
+                horizontal: true,
+                align: "space-between",
+                blockAlign: "center",
+                children: [
+                    /*#__PURE__*/ _jsxs(Stack, {
+                        horizontal: true,
+                        gap: "sm",
+                        blockAlign: "center",
+                        children: [
+                            /*#__PURE__*/ _jsx(Text, {
+                                variant: "headingSm",
+                                children: "Document.pdf"
+                            }),
+                            /*#__PURE__*/ _jsx(Badge, {
+                                children: "Draft"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs(Stack, {
+                        horizontal: true,
+                        gap: "sm",
+                        children: [
+                            /*#__PURE__*/ _jsx(Button, {
+                                children: "Edit"
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                children: "Share"
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                primary: true,
+                                children: "Publish"
+                            })
+                        ]
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Action bar layout with space-between alignment using horizontal Stack.'
+            }
+        }
+    }
+};
+export var NavigationMenu = {
+    render: function() {
+        return /*#__PURE__*/ _jsx(Card, {
+            children: /*#__PURE__*/ _jsx(Box, {
+                padding: "4",
+                borderBlockEnd: "divider",
+                children: /*#__PURE__*/ _jsxs(Stack, {
+                    horizontal: true,
+                    align: "space-between",
+                    blockAlign: "center",
+                    children: [
+                        /*#__PURE__*/ _jsxs(Stack, {
+                            horizontal: true,
+                            gap: "md",
+                            blockAlign: "center",
+                            children: [
+                                /*#__PURE__*/ _jsx(Text, {
+                                    variant: "headingMd",
+                                    children: "Brand"
+                                }),
+                                /*#__PURE__*/ _jsxs(Stack, {
+                                    horizontal: true,
+                                    gap: "sm",
+                                    as: "nav",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Button, {
+                                            plain: true,
+                                            children: "Home"
+                                        }),
+                                        /*#__PURE__*/ _jsx(Button, {
+                                            plain: true,
+                                            children: "Products"
+                                        }),
+                                        /*#__PURE__*/ _jsx(Button, {
+                                            plain: true,
+                                            children: "About"
+                                        }),
+                                        /*#__PURE__*/ _jsx(Button, {
+                                            plain: true,
+                                            children: "Contact"
+                                        })
+                                    ]
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsxs(Stack, {
+                            horizontal: true,
+                            gap: "sm",
+                            children: [
+                                /*#__PURE__*/ _jsx(Button, {
+                                    children: "Sign In"
+                                }),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    primary: true,
+                                    children: "Sign Up"
+                                })
+                            ]
+                        })
+                    ]
+                })
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Navigation menu layout with brand and actions using nested horizontal Stacks.'
+            }
+        }
+    }
+};
+export var IconAndText = {
+    render: function() {
+        return /*#__PURE__*/ _jsxs(Stack, {
+            gap: "sm",
+            children: [
+                /*#__PURE__*/ _jsxs(Stack, {
+                    horizontal: true,
+                    gap: "sm",
+                    blockAlign: "center",
+                    children: [
+                        /*#__PURE__*/ _jsx(Icon, {
+                            source: HomeMinor,
+                            size: "sm"
+                        }),
+                        /*#__PURE__*/ _jsx(Text, {
+                            children: "Dashboard"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(Stack, {
+                    horizontal: true,
+                    gap: "sm",
+                    blockAlign: "center",
+                    children: [
+                        /*#__PURE__*/ _jsx(Icon, {
+                            source: ProductsMinor,
+                            size: "sm"
+                        }),
+                        /*#__PURE__*/ _jsx(Text, {
+                            children: "Products"
+                        }),
+                        /*#__PURE__*/ _jsx(Badge, {
+                            children: "42"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(Stack, {
+                    horizontal: true,
+                    gap: "sm",
+                    blockAlign: "center",
+                    children: [
+                        /*#__PURE__*/ _jsx(Icon, {
+                            source: CustomersMinor,
+                            size: "sm"
+                        }),
+                        /*#__PURE__*/ _jsx(Text, {
+                            children: "Customers"
+                        }),
+                        /*#__PURE__*/ _jsx(Badge, {
+                            status: "warning",
+                            children: "New"
+                        })
+                    ]
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Icons combined with text and badges using center alignment with horizontal Stacks.'
+            }
+        }
+    }
+};
+export var FormLayout = {
+    render: function() {
+        return /*#__PURE__*/ _jsx(Card, {
+            title: "User Profile",
+            padded: true,
+            children: /*#__PURE__*/ _jsxs(Stack, {
+                gap: "md",
+                children: [
+                    /*#__PURE__*/ _jsx("input", {
+                        placeholder: "Full Name",
+                        style: {
+                            padding: '0.75rem',
+                            border: '1px solid #ccc',
+                            borderRadius: '4px',
+                            width: '100%'
+                        }
+                    }),
+                    /*#__PURE__*/ _jsx("input", {
+                        placeholder: "Email Address",
+                        style: {
+                            padding: '0.75rem',
+                            border: '1px solid #ccc',
+                            borderRadius: '4px',
+                            width: '100%'
+                        }
+                    }),
+                    /*#__PURE__*/ _jsx("textarea", {
+                        placeholder: "Bio",
+                        rows: 4,
+                        style: {
+                            padding: '0.75rem',
+                            border: '1px solid #ccc',
+                            borderRadius: '4px',
+                            width: '100%',
+                            fontFamily: 'inherit'
+                        }
+                    }),
+                    /*#__PURE__*/ _jsxs(Stack, {
+                        horizontal: true,
+                        align: "end",
+                        gap: "sm",
+                        children: [
+                            /*#__PURE__*/ _jsx(Button, {
+                                children: "Cancel"
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                primary: true,
+                                children: "Save Changes"
+                            })
+                        ]
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Form layout with vertical Stack for form fields and horizontal Stack for actions.'
+            }
+        }
+    }
+};
+export var StatusDashboard = {
+    render: function() {
+        return /*#__PURE__*/ _jsx(Card, {
+            title: "System Status",
+            padded: true,
+            children: /*#__PURE__*/ _jsxs(Stack, {
+                gap: "sm",
+                children: [
+                    /*#__PURE__*/ _jsxs(Stack, {
+                        horizontal: true,
+                        align: "space-between",
+                        blockAlign: "center",
+                        children: [
+                            /*#__PURE__*/ _jsx(Text, {
+                                children: "Database Connection"
+                            }),
+                            /*#__PURE__*/ _jsxs(Stack, {
+                                horizontal: true,
+                                gap: "xs",
+                                blockAlign: "center",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Box, {
+                                        width: "8px",
+                                        height: "8px",
+                                        borderRadius: "full",
+                                        background: "success"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Text, {
+                                        color: "subdued",
+                                        children: "Online"
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs(Stack, {
+                        horizontal: true,
+                        align: "space-between",
+                        blockAlign: "center",
+                        children: [
+                            /*#__PURE__*/ _jsx(Text, {
+                                children: "API Service"
+                            }),
+                            /*#__PURE__*/ _jsxs(Stack, {
+                                horizontal: true,
+                                gap: "xs",
+                                blockAlign: "center",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Box, {
+                                        width: "8px",
+                                        height: "8px",
+                                        borderRadius: "full",
+                                        background: "warning"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Text, {
+                                        color: "subdued",
+                                        children: "Warning"
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs(Stack, {
+                        horizontal: true,
+                        align: "space-between",
+                        blockAlign: "center",
+                        children: [
+                            /*#__PURE__*/ _jsx(Text, {
+                                children: "Cache System"
+                            }),
+                            /*#__PURE__*/ _jsxs(Stack, {
+                                horizontal: true,
+                                gap: "xs",
+                                blockAlign: "center",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Box, {
+                                        width: "8px",
+                                        height: "8px",
+                                        borderRadius: "full",
+                                        background: "critical"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Text, {
+                                        color: "subdued",
+                                        children: "Offline"
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Status dashboard with aligned labels and status indicators using a mix of vertical and horizontal Stacks.'
+            }
+        }
+    }
+};
+export var ProductCard = {
+    render: function() {
+        return /*#__PURE__*/ _jsx(Card, {
+            title: "Product Details",
+            padded: true,
+            children: /*#__PURE__*/ _jsxs(Stack, {
+                horizontal: true,
+                gap: "md",
+                blockAlign: "start",
+                wrap: true,
+                children: [
+                    /*#__PURE__*/ _jsx(Box, {
+                        width: "200px",
+                        height: "200px",
+                        background: "subdued",
+                        borderRadius: "lg",
+                        flexShrink: 0
+                    }),
+                    /*#__PURE__*/ _jsx(Box, {
+                        flex: "1",
+                        minWidth: "250px",
+                        children: /*#__PURE__*/ _jsxs(Stack, {
+                            gap: "sm",
+                            children: [
+                                /*#__PURE__*/ _jsxs(Stack, {
+                                    gap: "xs",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Text, {
+                                            variant: "headingLg",
+                                            children: "Premium Widget"
+                                        }),
+                                        /*#__PURE__*/ _jsx(Text, {
+                                            color: "subdued",
+                                            children: "SKU: WIDGET-001"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsx(Text, {
+                                    children: "A high-quality widget designed for professional use. Features advanced functionality and premium materials for lasting performance."
+                                }),
+                                /*#__PURE__*/ _jsxs(Stack, {
+                                    horizontal: true,
+                                    gap: "sm",
+                                    align: "space-between",
+                                    blockAlign: "center",
+                                    wrap: true,
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Text, {
+                                            variant: "headingMd",
+                                            color: "primary",
+                                            children: "$149.99"
+                                        }),
+                                        /*#__PURE__*/ _jsxs(Stack, {
+                                            horizontal: true,
+                                            gap: "sm",
+                                            children: [
+                                                /*#__PURE__*/ _jsx(Button, {
+                                                    children: "Add to Cart"
+                                                }),
+                                                /*#__PURE__*/ _jsx(Button, {
+                                                    primary: true,
+                                                    children: "Buy Now"
+                                                })
+                                            ]
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Responsive product card layout using nested vertical and horizontal Stacks.'
+            }
+        }
+    }
+};