@heymantle/litho 0.0.3 → 0.0.4

package/dist/cjs/stories/Grid.stories.js

@@ -0,0 +1,1199 @@
+"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 Alignment () {
+        return Alignment;
+    },
+    get DashboardLayout () {
+        return DashboardLayout;
+    },
+    get Default () {
+        return Default;
+    },
+    get DifferentColumns () {
+        return DifferentColumns;
+    },
+    get GapSizes () {
+        return GapSizes;
+    },
+    get ImageGallery () {
+        return ImageGallery;
+    },
+    get ProductCatalog () {
+        return ProductCatalog;
+    },
+    get TeamDirectory () {
+        return TeamDirectory;
+    },
+    get WithColumnSpan () {
+        return WithColumnSpan;
+    },
+    get default () {
+        return _default;
+    }
+});
+var _jsxruntime = require("react/jsx-runtime");
+var _Grid = /*#__PURE__*/ _interop_require_default(require("../components/Grid.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 _Box = /*#__PURE__*/ _interop_require_default(require("../components/Box.js"));
+var _VerticalStack = /*#__PURE__*/ _interop_require_default(require("../components/VerticalStack.js"));
+var _HorizontalStack = /*#__PURE__*/ _interop_require_default(require("../components/HorizontalStack.js"));
+var _transformers = require("../utilities/transformers.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/Grid',
+    component: _Grid.default,
+    parameters: {
+        layout: 'padded',
+        docs: {
+            description: {
+                component: "A Grid component that creates flexible grid layouts with customizable columns, gaps, and alignment. It includes a Cell subcomponent for creating grid items with column span control."
+            }
+        }
+    },
+    args: {
+        columns: 3,
+        gap: 4,
+        justify: 'stretch',
+        align: 'stretch'
+    },
+    tags: [
+        'autodocs'
+    ],
+    argTypes: {
+        columns: {
+            control: 'number',
+            description: 'Number of columns in the grid'
+        },
+        gap: {
+            control: 'number',
+            description: 'Gap between grid items'
+        },
+        justify: {
+            control: 'select',
+            options: [
+                'stretch',
+                'start',
+                'end',
+                'center'
+            ],
+            description: 'Horizontal alignment of grid items'
+        },
+        align: {
+            control: 'select',
+            options: [
+                'stretch',
+                'start',
+                'end',
+                'center'
+            ],
+            description: 'Vertical alignment of grid items'
+        }
+    }
+};
+var Default = {
+    render: function(args) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Grid.default, _object_spread_props(_object_spread({}, args), {
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                    padding: "8",
+                    background: "bg-surface-info-subdued",
+                    borderRadius: "1",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_VerticalStack.default, {
+                        inlineAlign: "center",
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            children: "Item 1"
+                        })
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                    padding: "8",
+                    background: "bg-surface-magic-subdued",
+                    borderRadius: "1",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_VerticalStack.default, {
+                        inlineAlign: "center",
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            children: "Item 2"
+                        })
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                    padding: "8",
+                    background: "bg-surface-success-subdued",
+                    borderRadius: "1",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_VerticalStack.default, {
+                        inlineAlign: "center",
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            children: "Item 3"
+                        })
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                    padding: "8",
+                    background: "bg-surface-warning-subdued",
+                    borderRadius: "1",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_VerticalStack.default, {
+                        inlineAlign: "center",
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            children: "Item 4"
+                        })
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                    padding: "8",
+                    background: "bg-surface-critical-subdued",
+                    borderRadius: "1",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_VerticalStack.default, {
+                        inlineAlign: "center",
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            children: "Item 5"
+                        })
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                    padding: "8",
+                    background: "bg-surface-success-subdued",
+                    borderRadius: "1",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_VerticalStack.default, {
+                        inlineAlign: "center",
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            children: "Item 6"
+                        })
+                    })
+                })
+            ]
+        }));
+    },
+    parameters: {
+        docs: {
+            source: {
+                transform: _transformers.transformStorySource
+            }
+        }
+    }
+};
+var DifferentColumns = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+            gap: "8",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                    gap: "4",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "headingSm",
+                            children: "2 Columns"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Grid.default, {
+                            columns: 2,
+                            gap: 4,
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                                    padded: true,
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        children: "Item 1"
+                                    })
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                                    padded: true,
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        children: "Item 2"
+                                    })
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                                    padded: true,
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        children: "Item 3"
+                                    })
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                                    padded: true,
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        children: "Item 4"
+                                    })
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                    gap: "4",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "headingSm",
+                            children: "4 Columns"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Grid.default, {
+                            columns: 4,
+                            gap: 4,
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                                    padded: true,
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        children: "Item 1"
+                                    })
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                                    padded: true,
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        children: "Item 2"
+                                    })
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                                    padded: true,
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        children: "Item 3"
+                                    })
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                                    padded: true,
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        children: "Item 4"
+                                    })
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                    gap: "4",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "headingSm",
+                            children: "6 Columns"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Grid.default, {
+                            columns: 6,
+                            gap: 2,
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                                    padded: true,
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        children: "1"
+                                    })
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                                    padded: true,
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        children: "2"
+                                    })
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                                    padded: true,
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        children: "3"
+                                    })
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                                    padded: true,
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        children: "4"
+                                    })
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                                    padded: true,
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        children: "5"
+                                    })
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                                    padded: true,
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        children: "6"
+                                    })
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Grid layouts with different column counts.'
+            },
+            source: {
+                transform: _transformers.transformStorySource
+            }
+        }
+    }
+};
+var WithColumnSpan = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Grid.default, {
+            columns: 4,
+            gap: 4,
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Grid.default.Cell, {
+                    columnSpan: 2,
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                        padded: true,
+                        background: "bg-surface-info-subdued",
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            children: "Spans 2 columns"
+                        })
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                    padded: true,
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                        children: "Item 2"
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                    padded: true,
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                        children: "Item 3"
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                    padded: true,
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                        children: "Item 4"
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Grid.default.Cell, {
+                    columnSpan: 3,
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                        padded: true,
+                        background: "bg-surface-magic-subdued",
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            children: "Spans 3 columns"
+                        })
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                    padded: true,
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                        children: "Item 6"
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Grid.default.Cell, {
+                    columnSpan: 4,
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                        padded: true,
+                        background: "bg-surface-success-subdued",
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            children: "Spans all 4 columns"
+                        })
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Grid cells with different column spans.'
+            },
+            source: {
+                transform: _transformers.transformStorySource
+            }
+        }
+    }
+};
+var GapSizes = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+            gap: "8",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                    gap: "4",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "headingSm",
+                            children: "No Gap (0)"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Grid.default, {
+                            columns: 3,
+                            gap: 0,
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                                    padded: true,
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        children: "Item 1"
+                                    })
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                                    padded: true,
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        children: "Item 2"
+                                    })
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                                    padded: true,
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        children: "Item 3"
+                                    })
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                    gap: "4",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "headingSm",
+                            children: "Small Gap (2)"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Grid.default, {
+                            columns: 3,
+                            gap: 2,
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                                    padded: true,
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        children: "Item 1"
+                                    })
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                                    padded: true,
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        children: "Item 2"
+                                    })
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                                    padded: true,
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        children: "Item 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.jsxs)(_Grid.default, {
+                            columns: 3,
+                            gap: 8,
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                                    padded: true,
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        children: "Item 1"
+                                    })
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                                    padded: true,
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        children: "Item 2"
+                                    })
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                                    padded: true,
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        children: "Item 3"
+                                    })
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Different gap sizes between grid items.'
+            },
+            source: {
+                transform: _transformers.transformStorySource
+            }
+        }
+    }
+};
+var Alignment = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+            gap: "12",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                    gap: "4",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "headingSm",
+                            children: "Center Justify & Align"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                            padding: "4",
+                            borderWidth: "1",
+                            borderStyle: "dashed",
+                            borderColor: "border-subdued",
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Grid.default, {
+                                columns: 3,
+                                gap: 4,
+                                justify: "center",
+                                align: "center",
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                                        style: {
+                                            width: '80px',
+                                            height: '60px'
+                                        },
+                                        background: "bg-surface-info-subdued",
+                                        borderRadius: "1"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                                        style: {
+                                            width: '80px',
+                                            height: '80px'
+                                        },
+                                        background: "bg-surface-magic-subdued",
+                                        borderRadius: "1"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                                        style: {
+                                            width: '80px',
+                                            height: '40px'
+                                        },
+                                        background: "bg-surface-success-subdued",
+                                        borderRadius: "1"
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                    gap: "4",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "headingSm",
+                            children: "Start Justify & End Align"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                            padding: "4",
+                            borderWidth: "1",
+                            borderStyle: "dashed",
+                            borderColor: "border-subdued",
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Grid.default, {
+                                columns: 3,
+                                gap: 4,
+                                justify: "start",
+                                align: "end",
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                                        style: {
+                                            width: '80px',
+                                            height: '60px'
+                                        },
+                                        background: "bg-surface-info-subdued",
+                                        borderRadius: "1"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                                        style: {
+                                            width: '80px',
+                                            height: '80px'
+                                        },
+                                        background: "bg-surface-magic-subdued",
+                                        borderRadius: "1"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                                        style: {
+                                            width: '80px',
+                                            height: '40px'
+                                        },
+                                        background: "bg-surface-success-subdued",
+                                        borderRadius: "1"
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Different alignment options for grid items.'
+            },
+            source: {
+                transform: _transformers.transformStorySource
+            }
+        }
+    }
+};
+var ProductCatalog = {
+    render: function() {
+        var products = [
+            {
+                name: 'Wireless Headphones',
+                price: '$99.99',
+                badge: 'Popular',
+                image: '🎧'
+            },
+            {
+                name: 'Smart Watch',
+                price: '$199.99',
+                badge: 'New',
+                image: '⌚'
+            },
+            {
+                name: 'Laptop Stand',
+                price: '$49.99',
+                badge: 'Sale',
+                image: '💻'
+            },
+            {
+                name: 'Desk Lamp',
+                price: '$79.99',
+                badge: null,
+                image: '💡'
+            },
+            {
+                name: 'Wireless Mouse',
+                price: '$29.99',
+                badge: 'Bestseller',
+                image: '🖱️'
+            },
+            {
+                name: 'USB-C Hub',
+                price: '$89.99',
+                badge: null,
+                image: '🔌'
+            }
+        ];
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+            title: "Product Catalog",
+            padded: true,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Grid.default, {
+                columns: 3,
+                gap: 4,
+                children: products.map(function(product, index) {
+                    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                        padded: true,
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                            gap: "4",
+                            inlineAlign: "center",
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                    style: {
+                                        fontSize: '3rem'
+                                    },
+                                    children: product.image
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                                    gap: "2",
+                                    inlineAlign: "center",
+                                    children: [
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                            variant: "headingSm",
+                                            children: product.name
+                                        }),
+                                        product.badge && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Badge.default, {
+                                            status: product.badge === 'Sale' ? 'warning' : 'default',
+                                            children: product.badge
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                    variant: "headingMd",
+                                    color: "interactive",
+                                    children: product.price
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                    fullWidth: true,
+                                    children: "Add to Cart"
+                                })
+                            ]
+                        })
+                    }, index);
+                })
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Product catalog using a 3-column grid layout.'
+            },
+            source: {
+                transform: _transformers.transformStorySource
+            }
+        }
+    }
+};
+var DashboardLayout = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+            gap: "8",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Grid.default, {
+                    columns: 4,
+                    gap: 4,
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Card.default, {
+                            padded: true,
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                    variant: "headingSm",
+                                    children: "Total Sales"
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                    variant: "headingLg",
+                                    color: "text-success",
+                                    children: "$24,567"
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                    color: "subdued",
+                                    children: "+12% from last month"
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Card.default, {
+                            padded: true,
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                    variant: "headingSm",
+                                    children: "New Customers"
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                    variant: "headingLg",
+                                    color: "text-interactive",
+                                    children: "1,234"
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                    color: "subdued",
+                                    children: "+8% from last month"
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Card.default, {
+                            padded: true,
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                    variant: "headingSm",
+                                    children: "Orders"
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                    variant: "headingLg",
+                                    color: "text-warning",
+                                    children: "567"
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                    color: "subdued",
+                                    children: "-3% from last month"
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Card.default, {
+                            padded: true,
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                    variant: "headingSm",
+                                    children: "Conversion Rate"
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                    variant: "headingLg",
+                                    color: "text-magic",
+                                    children: "3.2%"
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                    color: "subdued",
+                                    children: "+0.5% from last month"
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Grid.default, {
+                    columns: 3,
+                    gap: 4,
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Grid.default.Cell, {
+                            columnSpan: 2,
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                                title: "Recent Activity",
+                                padded: true,
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                    color: "subdued",
+                                    children: "Chart would go here..."
+                                })
+                            })
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                            title: "Quick Actions",
+                            padded: true,
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                                gap: "4",
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                        fullWidth: true,
+                                        children: "Add Product"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                        fullWidth: true,
+                                        children: "View Orders"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                        fullWidth: true,
+                                        children: "Customer Support"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                        fullWidth: true,
+                                        children: "Analytics"
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Dashboard layout with metrics cards and main content area.'
+            },
+            source: {
+                transform: _transformers.transformStorySource
+            }
+        }
+    }
+};
+var TeamDirectory = {
+    render: function() {
+        var team = [
+            {
+                name: 'Sarah Johnson',
+                role: 'Product Manager',
+                avatar: '👩‍💼'
+            },
+            {
+                name: 'Mike Chen',
+                role: 'Lead Developer',
+                avatar: '👨‍💻'
+            },
+            {
+                name: 'Emily Davis',
+                role: 'UX Designer',
+                avatar: '👩‍🎨'
+            },
+            {
+                name: 'David Wilson',
+                role: 'Backend Developer',
+                avatar: '👨‍💻'
+            },
+            {
+                name: 'Lisa Brown',
+                role: 'QA Engineer',
+                avatar: '👩‍🔬'
+            },
+            {
+                name: 'Tom Anderson',
+                role: 'DevOps Engineer',
+                avatar: '👨‍🔧'
+            },
+            {
+                name: 'Anna Garcia',
+                role: 'Data Analyst',
+                avatar: '👩‍📊'
+            },
+            {
+                name: 'James Taylor',
+                role: 'Marketing Manager',
+                avatar: '👨‍💼'
+            }
+        ];
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+            title: "Team Directory",
+            padded: true,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Grid.default, {
+                columns: 4,
+                gap: 4,
+                children: team.map(function(member, index) {
+                    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                        padded: true,
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                            gap: "4",
+                            inlineAlign: "center",
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                    style: {
+                                        fontSize: '3rem'
+                                    },
+                                    children: member.avatar
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                                    gap: "1",
+                                    inlineAlign: "center",
+                                    children: [
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                            variant: "headingSm",
+                                            children: member.name
+                                        }),
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                            color: "subdued",
+                                            variant: "bodySm",
+                                            children: member.role
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+                                    gap: "2",
+                                    children: [
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                            size: "small",
+                                            fullWidth: true,
+                                            children: "Message"
+                                        }),
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                            size: "small",
+                                            fullWidth: true,
+                                            children: "View Profile"
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    }, index);
+                })
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Team directory with member cards in a responsive grid.'
+            },
+            source: {
+                transform: _transformers.transformStorySource
+            }
+        }
+    }
+};
+var ImageGallery = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+            title: "Photo Gallery",
+            padded: true,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Grid.default, {
+                columns: 4,
+                gap: 3,
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Grid.default.Cell, {
+                        columnSpan: 2,
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                            style: {
+                                height: '200px',
+                                backgroundColor: '#e3f2fd',
+                                borderRadius: '8px'
+                            },
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_VerticalStack.default, {
+                                gap: "0",
+                                blockAlign: "center",
+                                inlineAlign: "center",
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                    children: "Featured Image (2x1)"
+                                })
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                        style: {
+                            height: '95px',
+                            backgroundColor: '#f3e5f5',
+                            borderRadius: '8px'
+                        },
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_VerticalStack.default, {
+                            gap: "0",
+                            blockAlign: "center",
+                            inlineAlign: "center",
+                            style: {
+                                height: '100%'
+                            },
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                variant: "caption",
+                                children: "Image 1"
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                        style: {
+                            height: '95px',
+                            backgroundColor: '#e8f5e8',
+                            borderRadius: '8px'
+                        },
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_VerticalStack.default, {
+                            gap: "0",
+                            blockAlign: "center",
+                            inlineAlign: "center",
+                            style: {
+                                height: '100%'
+                            },
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                variant: "caption",
+                                children: "Image 2"
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                        style: {
+                            height: '95px',
+                            backgroundColor: '#fff3e0',
+                            borderRadius: '8px'
+                        },
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_VerticalStack.default, {
+                            gap: "0",
+                            blockAlign: "center",
+                            inlineAlign: "center",
+                            style: {
+                                height: '100%'
+                            },
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                variant: "caption",
+                                children: "Image 3"
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                        style: {
+                            height: '95px',
+                            backgroundColor: '#fce4ec',
+                            borderRadius: '8px'
+                        },
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_VerticalStack.default, {
+                            gap: "0",
+                            blockAlign: "center",
+                            inlineAlign: "center",
+                            style: {
+                                height: '100%'
+                            },
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                variant: "caption",
+                                children: "Image 4"
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Grid.default.Cell, {
+                        columnSpan: 3,
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                            style: {
+                                height: '120px',
+                                backgroundColor: '#e0f2f1',
+                                borderRadius: '8px'
+                            },
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_VerticalStack.default, {
+                                gap: "0",
+                                blockAlign: "center",
+                                inlineAlign: "center",
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                    children: "Panoramic Image (3x1)"
+                                })
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                        style: {
+                            height: '120px',
+                            backgroundColor: '#f1f8e9',
+                            borderRadius: '8px'
+                        },
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_VerticalStack.default, {
+                            gap: "0",
+                            blockAlign: "center",
+                            inlineAlign: "center",
+                            style: {
+                                height: '100%'
+                            },
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                variant: "caption",
+                                children: "Image 5"
+                            })
+                        })
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Image gallery with varying column spans for different image sizes.'
+            },
+            source: {
+                transform: _transformers.transformStorySource
+            }
+        }
+    }
+};