@heymantle/litho 0.0.3 → 0.0.5

package/dist/cjs/stories/Image.stories.js

@@ -0,0 +1,883 @@
+"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 BannerImages () {
+        return BannerImages;
+    },
+    get BorderRadius () {
+        return BorderRadius;
+    },
+    get Default () {
+        return Default;
+    },
+    get ImageGallery () {
+        return ImageGallery;
+    },
+    get ProductShowcase () {
+        return ProductShowcase;
+    },
+    get ProfileCards () {
+        return ProfileCards;
+    },
+    get ResponsiveImage () {
+        return ResponsiveImage;
+    },
+    get RoundedProp () {
+        return RoundedProp;
+    },
+    get WithLoadCallback () {
+        return WithLoadCallback;
+    },
+    get default () {
+        return _default;
+    }
+});
+var _jsxruntime = require("react/jsx-runtime");
+var _transformers = require("../utilities/transformers.js");
+var _Stack = /*#__PURE__*/ _interop_require_default(require("../components/Stack.js"));
+var _Image = /*#__PURE__*/ _interop_require_default(require("../components/Image.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 _Box = /*#__PURE__*/ _interop_require_default(require("../components/Box.js"));
+var _Grid = /*#__PURE__*/ _interop_require_default(require("../components/Grid.js"));
+var _react = require("react");
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+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 _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+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;
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+var _default = {
+    title: 'Litho/Image',
+    component: _Image.default,
+    parameters: {
+        layout: 'padded',
+        docs: {
+            description: {
+                component: "An Image component that renders images with optional styling and responsive support. Images can be configured with various border radius options and support responsive image sets."
+            },
+            source: {
+                transform: _transformers.transformStorySource
+            }
+        }
+    },
+    args: {
+        source: 'https://picsum.photos/400/300?random=1',
+        alt: 'Sample image'
+    },
+    tags: [
+        'autodocs'
+    ],
+    argTypes: {
+        source: {
+            control: 'text',
+            description: 'URL of the image to display'
+        },
+        alt: {
+            control: 'text',
+            description: 'Alternative text for the image'
+        },
+        sourceSet: {
+            control: 'object',
+            description: 'Array of responsive image sources'
+        },
+        rounded: {
+            control: 'boolean',
+            description: 'Whether to round the image'
+        },
+        borderRadius: {
+            control: 'select',
+            options: [
+                'default',
+                'none',
+                'xs',
+                'sm',
+                'md',
+                'lg',
+                'full',
+                'max'
+            ],
+            description: 'Border radius variant'
+        },
+        crossOrigin: {
+            control: 'select',
+            options: [
+                'anonymous',
+                'use-credentials'
+            ],
+            description: 'Cross-origin attribute'
+        },
+        onLoad: {
+            action: 'imageLoaded',
+            description: 'Callback when image loads'
+        }
+    }
+};
+var Default = {
+    render: function(args) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+            maxInlineSize: "400",
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Image.default, _object_spread({}, args))
+        });
+    }
+};
+var BorderRadius = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Grid.default, {
+            columns: "auto-fit",
+            minItemWidth: "200px",
+            gap: "8",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                    gap: "sm",
+                    inlineAlign: "center",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Image.default, {
+                            source: "https://picsum.photos/200/200?random=2",
+                            alt: "Default radius",
+                            borderRadius: "default",
+                            style: {
+                                width: '150px',
+                                height: '150px',
+                                objectFit: 'cover'
+                            }
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "bodySm",
+                            children: "Default"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                    gap: "sm",
+                    inlineAlign: "center",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Image.default, {
+                            source: "https://picsum.photos/200/200?random=3",
+                            alt: "No radius",
+                            borderRadius: "none",
+                            style: {
+                                width: '150px',
+                                height: '150px',
+                                objectFit: 'cover'
+                            }
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "bodySm",
+                            children: "None"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                    gap: "sm",
+                    inlineAlign: "center",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Image.default, {
+                            source: "https://picsum.photos/200/200?random=4",
+                            alt: "Small radius",
+                            borderRadius: "sm",
+                            style: {
+                                width: '150px',
+                                height: '150px',
+                                objectFit: 'cover'
+                            }
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "bodySm",
+                            children: "Small"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                    gap: "sm",
+                    inlineAlign: "center",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Image.default, {
+                            source: "https://picsum.photos/200/200?random=5",
+                            alt: "Medium radius",
+                            borderRadius: "md",
+                            style: {
+                                width: '150px',
+                                height: '150px',
+                                objectFit: 'cover'
+                            }
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "bodySm",
+                            children: "Medium"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                    gap: "sm",
+                    inlineAlign: "center",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Image.default, {
+                            source: "https://picsum.photos/200/200?random=6",
+                            alt: "Large radius",
+                            borderRadius: "lg",
+                            style: {
+                                width: '150px',
+                                height: '150px',
+                                objectFit: 'cover'
+                            }
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "bodySm",
+                            children: "Large"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                    gap: "sm",
+                    inlineAlign: "center",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Image.default, {
+                            source: "https://picsum.photos/200/200?random=7",
+                            alt: "Full radius",
+                            borderRadius: "full",
+                            style: {
+                                width: '150px',
+                                height: '150px',
+                                objectFit: 'cover'
+                            }
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "bodySm",
+                            children: "Full (Circle)"
+                        })
+                    ]
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Different border radius options for images.'
+            }
+        }
+    }
+};
+var RoundedProp = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+            horizontal: true,
+            gap: "md",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                    gap: "sm",
+                    inlineAlign: "center",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Image.default, {
+                            source: "https://picsum.photos/200/200?random=8",
+                            alt: "Not rounded",
+                            style: {
+                                width: '150px',
+                                height: '150px',
+                                objectFit: 'cover'
+                            }
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "bodySm",
+                            children: "Not Rounded"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                    gap: "sm",
+                    inlineAlign: "center",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Image.default, {
+                            source: "https://picsum.photos/200/200?random=9",
+                            alt: "Rounded",
+                            rounded: true,
+                            style: {
+                                width: '150px',
+                                height: '150px',
+                                objectFit: 'cover'
+                            }
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "bodySm",
+                            children: "Rounded"
+                        })
+                    ]
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Using the rounded prop for medium border radius.'
+            }
+        }
+    }
+};
+var ResponsiveImage = {
+    args: {
+        sourceSet: [
+            {
+                source: 'https://picsum.photos/320/240?random=10',
+                descriptor: '320w'
+            },
+            {
+                source: 'https://picsum.photos/640/480?random=10',
+                descriptor: '640w'
+            },
+            {
+                source: 'https://picsum.photos/800/600?random=10',
+                descriptor: '800w'
+            }
+        ],
+        source: 'https://picsum.photos/400/300?random=10',
+        alt: 'Responsive image'
+    },
+    render: function(args) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+            gap: "sm",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Image.default, _object_spread_props(_object_spread({}, args), {
+                    style: {
+                        width: '100%',
+                        height: 'auto'
+                    }
+                })),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                    variant: "bodyMd",
+                    color: "subdued",
+                    children: "This image uses different sources based on screen size. Resize your browser to see the effect."
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Responsive image with multiple source sizes.'
+            }
+        }
+    }
+};
+var WithLoadCallback = {
+    render: function() {
+        var _useState = _sliced_to_array((0, _react.useState)('Loading...'), 2), loadStatus = _useState[0], setLoadStatus = _useState[1];
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+            gap: "md",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Image.default, {
+                    source: "https://picsum.photos/400/300?random=11",
+                    alt: "Image with load callback",
+                    onLoad: function() {
+                        return setLoadStatus('Image loaded successfully!');
+                    },
+                    style: {
+                        width: '300px',
+                        height: 'auto'
+                    },
+                    borderRadius: "md"
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Text.default, {
+                    variant: "bodyMd",
+                    color: "subdued",
+                    children: [
+                        "Status: ",
+                        loadStatus
+                    ]
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Image with onLoad callback to track loading status.'
+            }
+        }
+    }
+};
+var ProductShowcase = {
+    render: function() {
+        var products = [
+            {
+                id: 1,
+                name: 'Wireless Headphones',
+                price: '$99.99',
+                image: 'https://picsum.photos/300/300?random=12'
+            },
+            {
+                id: 2,
+                name: 'Smart Watch',
+                price: '$199.99',
+                image: 'https://picsum.photos/300/300?random=13'
+            },
+            {
+                id: 3,
+                name: 'Laptop Stand',
+                price: '$49.99',
+                image: 'https://picsum.photos/300/300?random=14'
+            },
+            {
+                id: 4,
+                name: 'Desk Lamp',
+                price: '$79.99',
+                image: 'https://picsum.photos/300/300?random=15'
+            }
+        ];
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+            title: "Product Showcase",
+            padded: true,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Grid.default, {
+                columns: "auto-fit",
+                minItemWidth: "250px",
+                gap: "6",
+                children: products.map(function(product) {
+                    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
+                        padding: "0",
+                        borderWidth: "1",
+                        borderColor: "border",
+                        borderRadius: "2",
+                        style: {
+                            overflow: 'hidden',
+                            transition: 'transform 0.2s ease, box-shadow 0.2s ease',
+                            cursor: 'pointer'
+                        },
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Image.default, {
+                                source: product.image,
+                                alt: product.name,
+                                style: {
+                                    width: '100%',
+                                    height: '200px',
+                                    objectFit: 'cover'
+                                }
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                                padding: "4",
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                                    gap: "sm",
+                                    children: [
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                            variant: "headingSm",
+                                            children: product.name
+                                        }),
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                            variant: "headingMd",
+                                            color: "interactive",
+                                            children: product.price
+                                        })
+                                    ]
+                                })
+                            })
+                        ]
+                    }, product.id);
+                })
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Product showcase using images in a grid layout.'
+            }
+        }
+    }
+};
+var ProfileCards = {
+    render: function() {
+        var team = [
+            {
+                name: 'Sarah Johnson',
+                role: 'Product Designer',
+                image: 'https://picsum.photos/200/200?random=16'
+            },
+            {
+                name: 'Mike Chen',
+                role: 'Frontend Developer',
+                image: 'https://picsum.photos/200/200?random=17'
+            },
+            {
+                name: 'Emily Davis',
+                role: 'UX Researcher',
+                image: 'https://picsum.photos/200/200?random=18'
+            },
+            {
+                name: 'David Wilson',
+                role: 'Backend Developer',
+                image: 'https://picsum.photos/200/200?random=19'
+            }
+        ];
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+            title: "Team Members",
+            padded: true,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Grid.default, {
+                columns: "auto-fit",
+                minItemWidth: "200px",
+                gap: "6",
+                children: team.map(function(member, index) {
+                    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                        gap: "4",
+                        inlineAlign: "center",
+                        as: _Box.default,
+                        padding: "6",
+                        borderWidth: "1",
+                        borderColor: "border",
+                        borderRadius: "3",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Image.default, {
+                                source: member.image,
+                                alt: member.name,
+                                borderRadius: "full",
+                                style: {
+                                    width: '80px',
+                                    height: '80px',
+                                    objectFit: 'cover'
+                                }
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                                gap: "xs",
+                                inlineAlign: "center",
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        variant: "headingSm",
+                                        children: member.name
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        color: "subdued",
+                                        variant: "bodyMd",
+                                        children: member.role
+                                    })
+                                ]
+                            })
+                        ]
+                    }, index);
+                })
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Team member profile cards with circular profile images.'
+            }
+        }
+    }
+};
+var ImageGallery = {
+    render: function() {
+        var _useState = _sliced_to_array((0, _react.useState)(null), 2), selectedImage = _useState[0], setSelectedImage = _useState[1];
+        var images = [
+            'https://picsum.photos/400/300?random=20',
+            'https://picsum.photos/400/300?random=21',
+            'https://picsum.photos/400/300?random=22',
+            'https://picsum.photos/400/300?random=23',
+            'https://picsum.photos/400/300?random=24',
+            'https://picsum.photos/400/300?random=25',
+            'https://picsum.photos/400/300?random=26',
+            'https://picsum.photos/400/300?random=27'
+        ];
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+            title: "Photo Gallery",
+            padded: true,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                gap: "lg",
+                children: [
+                    selectedImage && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                        gap: "4",
+                        inlineAlign: "center",
+                        as: _Box.default,
+                        padding: "8",
+                        background: "surface-neutral-subdued",
+                        borderRadius: "2",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Image.default, {
+                                source: selectedImage,
+                                alt: "Selected image",
+                                borderRadius: "md",
+                                style: {
+                                    maxWidth: '500px',
+                                    width: '100%',
+                                    height: 'auto'
+                                }
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                onClick: function() {
+                                    return setSelectedImage(null);
+                                },
+                                children: "Close Preview"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Grid.default, {
+                        columns: "auto-fit",
+                        minItemWidth: "150px",
+                        gap: "4",
+                        children: images.map(function(src, index) {
+                            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                                style: {
+                                    cursor: 'pointer'
+                                },
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Image.default, {
+                                    source: src,
+                                    alt: "Gallery image ".concat(index + 1),
+                                    borderRadius: "sm",
+                                    style: {
+                                        width: '100%',
+                                        height: '120px',
+                                        objectFit: 'cover',
+                                        transition: 'transform 0.2s ease'
+                                    },
+                                    onClick: function() {
+                                        return setSelectedImage(src);
+                                    }
+                                })
+                            }, index);
+                        })
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Interactive photo gallery with image preview functionality.'
+            }
+        }
+    }
+};
+var BannerImages = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+            gap: "lg",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                    title: "Hero Banner",
+                    padded: true,
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
+                        position: "relative",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Image.default, {
+                                source: "https://picsum.photos/800/300?random=28",
+                                alt: "Hero banner",
+                                borderRadius: "lg",
+                                style: {
+                                    width: '100%',
+                                    height: '250px',
+                                    objectFit: 'cover'
+                                }
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                                position: "absolute",
+                                insetBlockStart: "50%",
+                                insetInlineStart: "50%",
+                                style: {
+                                    transform: 'translate(-50%, -50%)',
+                                    color: 'white',
+                                    textShadow: '2px 2px 4px rgba(0,0,0,0.7)'
+                                },
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                                    gap: "sm",
+                                    inlineAlign: "center",
+                                    children: [
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                            variant: "headingLg",
+                                            color: "text-inverse",
+                                            children: "Welcome to Our Platform"
+                                        }),
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                            color: "text-inverse",
+                                            children: "Discover amazing features and capabilities"
+                                        })
+                                    ]
+                                })
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                    title: "Promotional Section",
+                    padded: true,
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Grid.default, {
+                        columns: 2,
+                        gap: "8",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
+                                position: "relative",
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Image.default, {
+                                        source: "https://picsum.photos/400/200?random=29",
+                                        alt: "Promo 1",
+                                        borderRadius: "md",
+                                        style: {
+                                            width: '100%',
+                                            height: '150px',
+                                            objectFit: 'cover'
+                                        }
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                                        position: "absolute",
+                                        insetBlockEnd: "4",
+                                        insetInlineStart: "4",
+                                        style: {
+                                            color: 'white',
+                                            textShadow: '1px 1px 2px rgba(0,0,0,0.7)'
+                                        },
+                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                            variant: "headingSm",
+                                            color: "text-inverse",
+                                            children: "Special Offer"
+                                        })
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
+                                position: "relative",
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Image.default, {
+                                        source: "https://picsum.photos/400/200?random=30",
+                                        alt: "Promo 2",
+                                        borderRadius: "md",
+                                        style: {
+                                            width: '100%',
+                                            height: '150px',
+                                            objectFit: 'cover'
+                                        }
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                                        position: "absolute",
+                                        insetBlockEnd: "4",
+                                        insetInlineStart: "4",
+                                        style: {
+                                            color: 'white',
+                                            textShadow: '1px 1px 2px rgba(0,0,0,0.7)'
+                                        },
+                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                            variant: "headingSm",
+                                            color: "text-inverse",
+                                            children: "New Features"
+                                        })
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Banner and promotional images with overlay text.'
+            }
+        }
+    }
+};