@heymantle/litho 0.0.3 → 0.0.5

package/dist/cjs/stories/ColorField.stories.js

@@ -0,0 +1,887 @@
+"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 CustomZIndex () {
+        return CustomZIndex;
+    },
+    get Default () {
+        return Default;
+    },
+    get DesignSystemColors () {
+        return DesignSystemColors;
+    },
+    get MultipleColorFields () {
+        return MultipleColorFields;
+    },
+    get ProductCustomization () {
+        return ProductCustomization;
+    },
+    get ResponsiveBehavior () {
+        return ResponsiveBehavior;
+    },
+    get WithPresetColors () {
+        return WithPresetColors;
+    },
+    get default () {
+        return _default;
+    }
+});
+var _jsxruntime = require("react/jsx-runtime");
+var _react = require("react");
+var _ColorField = /*#__PURE__*/ _interop_require_default(require("../components/ColorField.js"));
+var _Stack = /*#__PURE__*/ _interop_require_default(require("../components/Stack.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 _transformers = require("../utilities/transformers.js");
+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/ColorField",
+    component: _ColorField.default,
+    parameters: {
+        layout: "padded",
+        docs: {
+            description: {
+                component: "A ColorField component that provides an intuitive color picker interface using SketchPicker. It displays the selected color with a preview swatch and hex value, and opens a color picker when clicked."
+            }
+        }
+    },
+    args: {
+        label: "Primary Color",
+        name: "primary",
+        value: "#3366cc"
+    },
+    tags: [
+        "autodocs"
+    ],
+    argTypes: {
+        label: {
+            control: "text",
+            description: "Label displayed above the color value"
+        },
+        name: {
+            control: "text",
+            description: "Name of the color field, used as a key"
+        },
+        value: {
+            control: "color",
+            description: "Currently selected color value (hex string or CSS variable)"
+        },
+        onChange: {
+            control: false,
+            description: "Callback function called when color changes"
+        },
+        zIndexOverride: {
+            control: "number",
+            description: "Custom z-index for the color picker popover"
+        },
+        presetColors: {
+            control: "object",
+            description: "Array of preset colors shown in the picker"
+        }
+    }
+};
+var Default = {
+    render: function(args) {
+        var _useState = _sliced_to_array((0, _react.useState)(args.value), 2), color = _useState[0], setColor = _useState[1];
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+            title: "Color Selection",
+            padded: true,
+            maxInlineSize: "300",
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ColorField.default, _object_spread_props(_object_spread({}, args), {
+                value: color,
+                onChange: setColor
+            }))
+        });
+    },
+    parameters: {
+        docs: {
+            source: {
+                transform: _transformers.transformStorySource
+            }
+        }
+    }
+};
+var WithPresetColors = {
+    render: function() {
+        var _useState = _sliced_to_array((0, _react.useState)("#e74c3c"), 2), color = _useState[0], setColor = _useState[1];
+        var brandColors = [
+            "#e74c3c",
+            "#3498db",
+            "#2ecc71",
+            "#f39c12",
+            "#9b59b6",
+            "#1abc9c",
+            "#34495e",
+            "#95a5a6"
+        ];
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Card.default, {
+            title: "Brand Color Picker",
+            padded: true,
+            maxInlineSize: "300",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_ColorField.default, {
+                    label: "Brand Color",
+                    name: "brand",
+                    value: color,
+                    onChange: setColor,
+                    presetColors: brandColors
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                    paddingBlockStart: "4",
+                    padding: "2",
+                    background: "subdued",
+                    borderRadius: "default",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Text.default, {
+                        variant: "bodySm",
+                        children: [
+                            "Selected: ",
+                            color
+                        ]
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            source: {
+                transform: _transformers.transformStorySource
+            },
+            description: {
+                story: "Color field with preset brand colors for quick selection."
+            }
+        }
+    }
+};
+var MultipleColorFields = {
+    render: function() {
+        var _useState = _sliced_to_array((0, _react.useState)({
+            primary: "#3498db",
+            secondary: "#2ecc71",
+            accent: "#e74c3c",
+            background: "#ecf0f1"
+        }), 2), colors = _useState[0], setColors = _useState[1];
+        var updateColor = function(name, newColor) {
+            setColors(function(prev) {
+                return _object_spread_props(_object_spread({}, prev), _define_property({}, name, newColor));
+            });
+        };
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Card.default, {
+            title: "Theme Color Configuration",
+            padded: true,
+            maxInlineSize: "400",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                    gap: "md",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_ColorField.default, {
+                            label: "Primary Color",
+                            name: "primary",
+                            value: colors.primary,
+                            onChange: function(color) {
+                                return updateColor("primary", color);
+                            }
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_ColorField.default, {
+                            label: "Secondary Color",
+                            name: "secondary",
+                            value: colors.secondary,
+                            onChange: function(color) {
+                                return updateColor("secondary", color);
+                            }
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_ColorField.default, {
+                            label: "Accent Color",
+                            name: "accent",
+                            value: colors.accent,
+                            onChange: function(color) {
+                                return updateColor("accent", color);
+                            }
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_ColorField.default, {
+                            label: "Background Color",
+                            name: "background",
+                            value: colors.background,
+                            onChange: function(color) {
+                                return updateColor("background", color);
+                            }
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
+                    paddingBlockStart: "8",
+                    padding: "4",
+                    borderWidth: "025",
+                    borderColor: "border",
+                    borderRadius: "default",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "headingSm",
+                            children: "Color Preview"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                            paddingBlockStart: "4",
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Grid.default, {
+                                columns: 2,
+                                gap: "2",
+                                children: Object.entries(colors).map(function(param) {
+                                    var _param = _sliced_to_array(param, 2), name = _param[0], color = _param[1];
+                                    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                                        padding: "2",
+                                        borderRadius: "default",
+                                        style: {
+                                            backgroundColor: color,
+                                            textAlign: "center",
+                                            color: name === "background" ? "#333" : "#fff"
+                                        },
+                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                            variant: "bodySm",
+                                            style: {
+                                                color: name === "background" ? "#333" : "#fff",
+                                                textTransform: "capitalize"
+                                            },
+                                            children: name
+                                        })
+                                    }, name);
+                                })
+                            })
+                        })
+                    ]
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            source: {
+                transform: _transformers.transformStorySource
+            },
+            description: {
+                story: "Multiple color fields for comprehensive theme configuration."
+            }
+        }
+    }
+};
+var DesignSystemColors = {
+    render: function() {
+        var _useState = _sliced_to_array((0, _react.useState)({
+            primary: "#007ace",
+            success: "#28a745",
+            warning: "#ffc107",
+            danger: "#dc3545",
+            info: "#17a2b8"
+        }), 2), designColors = _useState[0], setDesignColors = _useState[1];
+        var updateDesignColor = function(name, newColor) {
+            setDesignColors(function(prev) {
+                return _object_spread_props(_object_spread({}, prev), _define_property({}, name, newColor));
+            });
+        };
+        var resetToDefaults = function() {
+            setDesignColors({
+                primary: "#007ace",
+                success: "#28a745",
+                warning: "#ffc107",
+                danger: "#dc3545",
+                info: "#17a2b8"
+            });
+        };
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+            horizontal: true,
+            gap: "lg",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Card.default, {
+                    title: "Design System Colors",
+                    padded: true,
+                    maxInlineSize: "350",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                            gap: "md",
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_ColorField.default, {
+                                    label: "Primary",
+                                    name: "primary",
+                                    value: designColors.primary,
+                                    onChange: function(color) {
+                                        return updateDesignColor("primary", color);
+                                    }
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_ColorField.default, {
+                                    label: "Success",
+                                    name: "success",
+                                    value: designColors.success,
+                                    onChange: function(color) {
+                                        return updateDesignColor("success", color);
+                                    }
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_ColorField.default, {
+                                    label: "Warning",
+                                    name: "warning",
+                                    value: designColors.warning,
+                                    onChange: function(color) {
+                                        return updateDesignColor("warning", color);
+                                    }
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_ColorField.default, {
+                                    label: "Danger",
+                                    name: "danger",
+                                    value: designColors.danger,
+                                    onChange: function(color) {
+                                        return updateDesignColor("danger", color);
+                                    }
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_ColorField.default, {
+                                    label: "Info",
+                                    name: "info",
+                                    value: designColors.info,
+                                    onChange: function(color) {
+                                        return updateDesignColor("info", color);
+                                    }
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                            paddingBlockStart: "8",
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                onClick: resetToDefaults,
+                                size: "slim",
+                                children: "Reset to Defaults"
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                    title: "Component Preview",
+                    padded: true,
+                    style: {
+                        flex: 1
+                    },
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                        gap: "md",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                                padding: "4",
+                                borderRadius: "default",
+                                style: {
+                                    backgroundColor: designColors.primary,
+                                    textAlign: "center"
+                                },
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                    color: "text-inverse",
+                                    children: "Primary Button"
+                                })
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                                padding: "3",
+                                borderRadius: "default",
+                                style: {
+                                    backgroundColor: designColors.success,
+                                    textAlign: "center"
+                                },
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                    color: "text-inverse",
+                                    children: "Success Message"
+                                })
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                                padding: "3",
+                                borderRadius: "default",
+                                style: {
+                                    backgroundColor: designColors.warning,
+                                    textAlign: "center"
+                                },
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                    style: {
+                                        color: "#333"
+                                    },
+                                    children: "Warning Alert"
+                                })
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                                padding: "3",
+                                borderRadius: "default",
+                                style: {
+                                    backgroundColor: designColors.danger,
+                                    textAlign: "center"
+                                },
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                    color: "text-inverse",
+                                    children: "Error Message"
+                                })
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                                padding: "3",
+                                background: "info",
+                                borderRadius: "default",
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                    color: "text-inverse",
+                                    children: "Info Notification"
+                                })
+                            })
+                        ]
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            source: {
+                transform: _transformers.transformStorySource
+            },
+            description: {
+                story: "Design system color configuration with live component preview."
+            }
+        }
+    }
+};
+var CustomZIndex = {
+    render: function() {
+        var _useState = _sliced_to_array((0, _react.useState)("#9c27b0"), 2), color = _useState[0], setColor = _useState[1];
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Card.default, {
+                    title: "High Z-Index Color Picker",
+                    padded: true,
+                    maxInlineSize: "300",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "bodySm",
+                            children: "This color picker has a custom z-index of 9999 to ensure it appears above other elements."
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_ColorField.default, {
+                            label: "Overlay Color",
+                            name: "overlay",
+                            value: color,
+                            onChange: setColor,
+                            zIndexOverride: 9999
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                    paddingBlockStart: "4",
+                    padding: "4",
+                    background: "subdued",
+                    borderRadius: "default",
+                    style: {
+                        position: "relative",
+                        zIndex: 100
+                    },
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                        children: "This content has z-index: 100, but the color picker above will still appear on top when opened due to its custom z-index override."
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            source: {
+                transform: _transformers.transformStorySource
+            },
+            description: {
+                story: "Color field with custom z-index for complex layering scenarios."
+            }
+        }
+    }
+};
+var ProductCustomization = {
+    render: function() {
+        var _useState = _sliced_to_array((0, _react.useState)({
+            frame: "#2c3e50",
+            lens: "#3498db",
+            temple: "#e74c3c"
+        }), 2), productColors = _useState[0], setProductColors = _useState[1];
+        var updateProductColor = function(part, color) {
+            setProductColors(function(prev) {
+                return _object_spread_props(_object_spread({}, prev), _define_property({}, part, color));
+            });
+        };
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+            horizontal: true,
+            gap: "lg",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Card.default, {
+                    title: "Customize Your Sunglasses",
+                    padded: true,
+                    maxInlineSize: "300",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                            gap: "md",
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_ColorField.default, {
+                                    label: "Frame Color",
+                                    name: "frame",
+                                    value: productColors.frame,
+                                    onChange: function(color) {
+                                        return updateProductColor("frame", color);
+                                    },
+                                    presetColors: [
+                                        "#2c3e50",
+                                        "#34495e",
+                                        "#95a5a6",
+                                        "#ecf0f1"
+                                    ]
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_ColorField.default, {
+                                    label: "Lens Color",
+                                    name: "lens",
+                                    value: productColors.lens,
+                                    onChange: function(color) {
+                                        return updateProductColor("lens", color);
+                                    },
+                                    presetColors: [
+                                        "#3498db",
+                                        "#2ecc71",
+                                        "#f39c12",
+                                        "#9b59b6"
+                                    ]
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_ColorField.default, {
+                                    label: "Temple Color",
+                                    name: "temple",
+                                    value: productColors.temple,
+                                    onChange: function(color) {
+                                        return updateProductColor("temple", color);
+                                    },
+                                    presetColors: [
+                                        "#e74c3c",
+                                        "#e67e22",
+                                        "#f1c40f",
+                                        "#1abc9c"
+                                    ]
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
+                            paddingBlockStart: "8",
+                            padding: "4",
+                            background: "subdued",
+                            borderRadius: "default",
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                    variant: "headingSm",
+                                    children: "Configuration"
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                                    paddingBlockStart: "2",
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                                        gap: "xs",
+                                        children: [
+                                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Text.default, {
+                                                variant: "bodySm",
+                                                children: [
+                                                    "Frame: ",
+                                                    productColors.frame
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Text.default, {
+                                                variant: "bodySm",
+                                                children: [
+                                                    "Lens: ",
+                                                    productColors.lens
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Text.default, {
+                                                variant: "bodySm",
+                                                children: [
+                                                    "Temple: ",
+                                                    productColors.temple
+                                                ]
+                                            })
+                                        ]
+                                    })
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Card.default, {
+                    title: "Product Preview",
+                    padded: true,
+                    style: {
+                        flex: 1
+                    },
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
+                            horizontal: true,
+                            align: "center",
+                            blockAlign: "center",
+                            style: {
+                                minHeight: "200px"
+                            },
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                                style: {
+                                    position: "relative",
+                                    width: "200px",
+                                    height: "80px"
+                                },
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                        style: {
+                                            position: "absolute",
+                                            top: "20px",
+                                            left: "20px",
+                                            width: "60px",
+                                            height: "40px",
+                                            backgroundColor: productColors.lens,
+                                            borderRadius: "50%",
+                                            border: "3px solid ".concat(productColors.frame)
+                                        }
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                        style: {
+                                            position: "absolute",
+                                            top: "20px",
+                                            right: "20px",
+                                            width: "60px",
+                                            height: "40px",
+                                            backgroundColor: productColors.lens,
+                                            borderRadius: "50%",
+                                            border: "3px solid ".concat(productColors.frame)
+                                        }
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                        style: {
+                                            position: "absolute",
+                                            top: "37px",
+                                            left: "83px",
+                                            width: "34px",
+                                            height: "6px",
+                                            backgroundColor: productColors.frame,
+                                            borderRadius: "3px"
+                                        }
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                        style: {
+                                            position: "absolute",
+                                            top: "37px",
+                                            left: "0px",
+                                            width: "20px",
+                                            height: "6px",
+                                            backgroundColor: productColors.temple,
+                                            borderRadius: "3px"
+                                        }
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                        style: {
+                                            position: "absolute",
+                                            top: "37px",
+                                            right: "0px",
+                                            width: "20px",
+                                            height: "6px",
+                                            backgroundColor: productColors.temple,
+                                            borderRadius: "3px"
+                                        }
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                            paddingBlockStart: "4",
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                variant: "bodySm",
+                                alignment: "center",
+                                children: "Live preview updates as you change colors"
+                            })
+                        })
+                    ]
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            source: {
+                transform: _transformers.transformStorySource
+            },
+            description: {
+                story: "Product customization interface with real-time color preview."
+            }
+        }
+    }
+};
+var ResponsiveBehavior = {
+    render: function() {
+        var _useState = _sliced_to_array((0, _react.useState)("#8e44ad"), 2), color = _useState[0], setColor = _useState[1];
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Card.default, {
+            title: "Responsive Color Picker",
+            padded: true,
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                    paddingBlockEnd: "6",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                        children: "The color picker automatically adjusts its position based on available space and screen size."
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Grid.default, {
+                    columns: {
+                        xs: 1,
+                        md: 3
+                    },
+                    gap: "4",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ColorField.default, {
+                                label: "Mobile Optimized",
+                                name: "mobile",
+                                value: color,
+                                onChange: setColor
+                            })
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
+                            horizontal: true,
+                            align: "center",
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ColorField.default, {
+                                label: "Center Positioned",
+                                name: "center",
+                                value: color,
+                                onChange: setColor
+                            })
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
+                            horizontal: true,
+                            align: "end",
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ColorField.default, {
+                                label: "Right Aligned",
+                                name: "right",
+                                value: color,
+                                onChange: setColor
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                    paddingBlockStart: "6",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                        variant: "bodySm",
+                        tone: "subdued",
+                        children: "Try opening the color pickers above on different screen sizes to see how they adapt."
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            source: {
+                transform: _transformers.transformStorySource
+            },
+            description: {
+                story: "Demonstrates responsive behavior across different positions and screen sizes."
+            }
+        }
+    }
+};