@heymantle/litho 0.0.3 → 0.0.4

package/dist/esm/stories/Collapsible.stories.js

@@ -0,0 +1,867 @@
+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 _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);
+}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import Collapsible from "../components/Collapsible.js";
+import Text from "../components/Text.js";
+import Card from "../components/Card.js";
+import Button from "../components/Button.js";
+import List from "../components/List.js";
+import VerticalStack from "../components/VerticalStack.js";
+import HorizontalStack from "../components/HorizontalStack.js";
+import Box from "../components/Box.js";
+import { transformStorySource } from "../utilities/transformers.js";
+export default {
+    title: 'Litho/Collapsible',
+    component: Collapsible,
+    parameters: {
+        layout: 'padded',
+        docs: {
+            description: {
+                component: "A Collapsible component that allows content to be shown or hidden with smooth animations. Collapsibles are useful for organizing content into expandable sections."
+            }
+        }
+    },
+    args: {
+        open: false,
+        children: 'This is the collapsible content that can be shown or hidden.'
+    },
+    tags: [
+        'autodocs'
+    ],
+    argTypes: {
+        open: {
+            control: 'boolean',
+            description: 'Whether the collapsible content is visible'
+        },
+        children: {
+            control: 'text',
+            description: 'Content to show/hide in the collapsible'
+        },
+        id: {
+            control: 'text',
+            description: 'Unique identifier for the collapsible'
+        }
+    }
+};
+export var Default = {
+    render: function(args) {
+        var _useState = _sliced_to_array(useState(args.open), 2), open = _useState[0], setOpen = _useState[1];
+        return /*#__PURE__*/ _jsxs(VerticalStack, {
+            gap: "4",
+            children: [
+                /*#__PURE__*/ _jsxs(Button, {
+                    onClick: function() {
+                        return setOpen(!open);
+                    },
+                    children: [
+                        open ? 'Hide' : 'Show',
+                        " Content"
+                    ]
+                }),
+                /*#__PURE__*/ _jsx(Collapsible, _object_spread_props(_object_spread({}, args), {
+                    open: open,
+                    children: /*#__PURE__*/ _jsx(Box, {
+                        padding: "4",
+                        background: "subdued",
+                        borderRadius: "default",
+                        children: args.children
+                    })
+                }))
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Collapsible content within a card for organized information display.'
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    }
+};
+export var WithCard = {
+    render: function() {
+        var _useState = _sliced_to_array(useState(false), 2), open = _useState[0], setOpen = _useState[1];
+        return /*#__PURE__*/ _jsxs(Card, {
+            children: [
+                /*#__PURE__*/ _jsx(Box, {
+                    padding: "4",
+                    borderBlockEndWidth: "025",
+                    borderColor: "border",
+                    children: /*#__PURE__*/ _jsxs(HorizontalStack, {
+                        align: "space-between",
+                        blockAlign: "center",
+                        children: [
+                            /*#__PURE__*/ _jsx(Text, {
+                                variant: "headingMd",
+                                children: "Account Settings"
+                            }),
+                            /*#__PURE__*/ _jsxs(Button, {
+                                plain: true,
+                                onClick: function() {
+                                    return setOpen(!open);
+                                },
+                                children: [
+                                    open ? 'Hide' : 'Show',
+                                    " Details"
+                                ]
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Collapsible, {
+                    open: open,
+                    children: /*#__PURE__*/ _jsxs(Box, {
+                        padding: "4",
+                        children: [
+                            /*#__PURE__*/ _jsx(Box, {
+                                paddingBlockEnd: "4",
+                                children: /*#__PURE__*/ _jsx(Text, {
+                                    children: "Manage your account preferences and security settings."
+                                })
+                            }),
+                            /*#__PURE__*/ _jsxs(List, {
+                                children: [
+                                    /*#__PURE__*/ _jsx(List.Item, {
+                                        children: "Change password"
+                                    }),
+                                    /*#__PURE__*/ _jsx(List.Item, {
+                                        children: "Update email address"
+                                    }),
+                                    /*#__PURE__*/ _jsx(List.Item, {
+                                        children: "Manage notifications"
+                                    }),
+                                    /*#__PURE__*/ _jsx(List.Item, {
+                                        children: "Two-factor authentication"
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Collapsible content within a card for organized information display.'
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    }
+};
+export var FAQ = {
+    render: function() {
+        var _useState = _sliced_to_array(useState(new Set()), 2), openItems = _useState[0], setOpenItems = _useState[1];
+        var faqItems = [
+            {
+                id: 'faq1',
+                question: 'How do I reset my password?',
+                answer: 'You can reset your password by clicking the "Forgot Password" link on the login page. Enter your email address and follow the instructions sent to your inbox.'
+            },
+            {
+                id: 'faq2',
+                question: 'Can I change my subscription plan?',
+                answer: 'Yes, you can upgrade or downgrade your subscription plan at any time from your account settings. Changes will be reflected in your next billing cycle.'
+            },
+            {
+                id: 'faq3',
+                question: 'How do I cancel my account?',
+                answer: 'To cancel your account, go to Settings > Account > Cancel Subscription. Your account will remain active until the end of your current billing period.'
+            },
+            {
+                id: 'faq4',
+                question: 'Is my data secure?',
+                answer: 'We take data security seriously. All data is encrypted in transit and at rest. We comply with industry-standard security practices and regulations.'
+            }
+        ];
+        var toggleItem = function(id) {
+            var newOpenItems = new Set(openItems);
+            if (newOpenItems.has(id)) {
+                newOpenItems.delete(id);
+            } else {
+                newOpenItems.add(id);
+            }
+            setOpenItems(newOpenItems);
+        };
+        return /*#__PURE__*/ _jsxs(VerticalStack, {
+            gap: "4",
+            children: [
+                /*#__PURE__*/ _jsx(Box, {
+                    paddingBlockEnd: "4",
+                    children: /*#__PURE__*/ _jsx(Text, {
+                        variant: "headingLg",
+                        children: "Frequently Asked Questions"
+                    })
+                }),
+                faqItems.map(function(item) {
+                    return /*#__PURE__*/ _jsxs(Card, {
+                        children: [
+                            /*#__PURE__*/ _jsx(Box, {
+                                padding: "4",
+                                borderBlockEndWidth: openItems.has(item.id) ? "025" : "0",
+                                borderColor: "border",
+                                children: /*#__PURE__*/ _jsxs(Button, {
+                                    plain: true,
+                                    onClick: function() {
+                                        return toggleItem(item.id);
+                                    },
+                                    style: {
+                                        width: '100%',
+                                        textAlign: 'left',
+                                        display: 'flex',
+                                        justifyContent: 'space-between',
+                                        alignItems: 'center'
+                                    },
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Text, {
+                                            variant: "headingSm",
+                                            children: item.question
+                                        }),
+                                        /*#__PURE__*/ _jsx("span", {
+                                            style: {
+                                                fontSize: '1.2rem'
+                                            },
+                                            children: openItems.has(item.id) ? '−' : '+'
+                                        })
+                                    ]
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx(Collapsible, {
+                                open: openItems.has(item.id),
+                                children: /*#__PURE__*/ _jsx(Box, {
+                                    padding: "4",
+                                    children: /*#__PURE__*/ _jsx(Text, {
+                                        children: item.answer
+                                    })
+                                })
+                            })
+                        ]
+                    }, item.id);
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'FAQ section using multiple collapsibles for question and answer pairs.'
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    }
+};
+export var AccordionGroup = {
+    render: function() {
+        var _useState = _sliced_to_array(useState('overview'), 2), activeSection = _useState[0], setActiveSection = _useState[1];
+        var sections = [
+            {
+                id: 'overview',
+                title: 'Overview',
+                content: 'This section provides a general overview of the product features and capabilities. Learn about the main functionalities and how they can benefit your workflow.'
+            },
+            {
+                id: 'features',
+                title: 'Features',
+                content: 'Explore the comprehensive list of features including advanced analytics, real-time collaboration, automated workflows, and integration capabilities with popular third-party tools.'
+            },
+            {
+                id: 'pricing',
+                title: 'Pricing',
+                content: 'Choose from our flexible pricing plans designed for individuals, teams, and enterprises. All plans include core features with additional benefits for higher tiers.'
+            },
+            {
+                id: 'support',
+                title: 'Support',
+                content: 'Get help when you need it with our comprehensive support options including documentation, tutorials, community forums, and direct customer support.'
+            }
+        ];
+        return /*#__PURE__*/ _jsx(Card, {
+            title: "Product Information",
+            padded: true,
+            children: /*#__PURE__*/ _jsx(VerticalStack, {
+                gap: "2",
+                children: sections.map(function(section) {
+                    return /*#__PURE__*/ _jsxs(Box, {
+                        children: [
+                            /*#__PURE__*/ _jsxs(Button, {
+                                plain: true,
+                                onClick: function() {
+                                    return setActiveSection(activeSection === section.id ? null : section.id);
+                                },
+                                style: {
+                                    width: '100%',
+                                    textAlign: 'left',
+                                    padding: '1rem',
+                                    border: '1px solid #e1e1e1',
+                                    borderRadius: '4px',
+                                    backgroundColor: activeSection === section.id ? '#f0f8ff' : 'white',
+                                    display: 'flex',
+                                    justifyContent: 'space-between',
+                                    alignItems: 'center',
+                                    marginBottom: '0.25rem'
+                                },
+                                children: [
+                                    /*#__PURE__*/ _jsx(Text, {
+                                        variant: "headingSm",
+                                        style: {
+                                            color: activeSection === section.id ? '#2196f3' : 'inherit'
+                                        },
+                                        children: section.title
+                                    }),
+                                    /*#__PURE__*/ _jsx("span", {
+                                        style: {
+                                            fontSize: '1.2rem',
+                                            color: activeSection === section.id ? '#2196f3' : '#999'
+                                        },
+                                        children: activeSection === section.id ? '−' : '+'
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx(Collapsible, {
+                                open: activeSection === section.id,
+                                children: /*#__PURE__*/ _jsx(Box, {
+                                    padding: "4",
+                                    background: "subdued",
+                                    borderRadius: "default",
+                                    paddingBlockEnd: "2",
+                                    children: /*#__PURE__*/ _jsx(Text, {
+                                        children: section.content
+                                    })
+                                })
+                            })
+                        ]
+                    }, section.id);
+                })
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Accordion-style navigation where only one section can be open at a time.'
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    }
+};
+export var NestedCollapsible = {
+    render: function() {
+        var _useState = _sliced_to_array(useState(new Set([
+            'main'
+        ])), 2), openSections = _useState[0], setOpenSections = _useState[1];
+        var toggleSection = function(sectionId) {
+            var newOpenSections = new Set(openSections);
+            if (newOpenSections.has(sectionId)) {
+                newOpenSections.delete(sectionId);
+            } else {
+                newOpenSections.add(sectionId);
+            }
+            setOpenSections(newOpenSections);
+        };
+        return /*#__PURE__*/ _jsx(Card, {
+            title: "Project Structure",
+            padded: true,
+            children: /*#__PURE__*/ _jsxs(Box, {
+                children: [
+                    /*#__PURE__*/ _jsxs(Button, {
+                        plain: true,
+                        onClick: function() {
+                            return toggleSection('main');
+                        },
+                        style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: '0.5rem',
+                            marginBottom: '0.5rem'
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx("span", {
+                                children: openSections.has('main') ? '📂' : '📁'
+                            }),
+                            /*#__PURE__*/ _jsx(Text, {
+                                variant: "headingSm",
+                                children: "src/"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(Collapsible, {
+                        open: openSections.has('main'),
+                        children: /*#__PURE__*/ _jsxs(Box, {
+                            paddingInlineStart: "6",
+                            borderInlineStartWidth: "025",
+                            borderColor: "border",
+                            style: {
+                                borderStyle: 'dashed'
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsxs(Button, {
+                                    plain: true,
+                                    onClick: function() {
+                                        return toggleSection('components');
+                                    },
+                                    style: {
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        gap: '0.5rem',
+                                        marginBottom: '0.5rem'
+                                    },
+                                    children: [
+                                        /*#__PURE__*/ _jsx("span", {
+                                            children: openSections.has('components') ? '📂' : '📁'
+                                        }),
+                                        /*#__PURE__*/ _jsx(Text, {
+                                            children: "components/"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsx(Collapsible, {
+                                    open: openSections.has('components'),
+                                    children: /*#__PURE__*/ _jsxs(Box, {
+                                        paddingInlineStart: "6",
+                                        borderInlineStartWidth: "025",
+                                        borderColor: "border",
+                                        style: {
+                                            borderStyle: 'dashed'
+                                        },
+                                        children: [
+                                            /*#__PURE__*/ _jsxs(HorizontalStack, {
+                                                gap: "2",
+                                                blockAlign: "center",
+                                                paddingBlockEnd: "1",
+                                                children: [
+                                                    /*#__PURE__*/ _jsx("span", {
+                                                        children: "\uD83D\uDCC4"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(Text, {
+                                                        children: "Button.js"
+                                                    })
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ _jsxs(HorizontalStack, {
+                                                gap: "2",
+                                                blockAlign: "center",
+                                                paddingBlockEnd: "1",
+                                                children: [
+                                                    /*#__PURE__*/ _jsx("span", {
+                                                        children: "\uD83D\uDCC4"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(Text, {
+                                                        children: "Card.js"
+                                                    })
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ _jsxs(HorizontalStack, {
+                                                gap: "2",
+                                                blockAlign: "center",
+                                                paddingBlockEnd: "1",
+                                                children: [
+                                                    /*#__PURE__*/ _jsx("span", {
+                                                        children: "\uD83D\uDCC4"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(Text, {
+                                                        children: "Text.js"
+                                                    })
+                                                ]
+                                            })
+                                        ]
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsxs(Button, {
+                                    plain: true,
+                                    onClick: function() {
+                                        return toggleSection('utils');
+                                    },
+                                    style: {
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        gap: '0.5rem',
+                                        marginBottom: '0.5rem'
+                                    },
+                                    children: [
+                                        /*#__PURE__*/ _jsx("span", {
+                                            children: openSections.has('utils') ? '📂' : '📁'
+                                        }),
+                                        /*#__PURE__*/ _jsx(Text, {
+                                            children: "utils/"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsx(Collapsible, {
+                                    open: openSections.has('utils'),
+                                    children: /*#__PURE__*/ _jsxs(Box, {
+                                        paddingInlineStart: "6",
+                                        borderInlineStartWidth: "025",
+                                        borderColor: "border",
+                                        style: {
+                                            borderStyle: 'dashed'
+                                        },
+                                        children: [
+                                            /*#__PURE__*/ _jsxs(HorizontalStack, {
+                                                gap: "2",
+                                                blockAlign: "center",
+                                                paddingBlockEnd: "1",
+                                                children: [
+                                                    /*#__PURE__*/ _jsx("span", {
+                                                        children: "\uD83D\uDCC4"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(Text, {
+                                                        children: "helpers.js"
+                                                    })
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ _jsxs(HorizontalStack, {
+                                                gap: "2",
+                                                blockAlign: "center",
+                                                paddingBlockEnd: "1",
+                                                children: [
+                                                    /*#__PURE__*/ _jsx("span", {
+                                                        children: "\uD83D\uDCC4"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(Text, {
+                                                        children: "constants.js"
+                                                    })
+                                                ]
+                                            })
+                                        ]
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsxs(HorizontalStack, {
+                                    gap: "2",
+                                    blockAlign: "center",
+                                    paddingBlockEnd: "1",
+                                    children: [
+                                        /*#__PURE__*/ _jsx("span", {
+                                            children: "\uD83D\uDCC4"
+                                        }),
+                                        /*#__PURE__*/ _jsx(Text, {
+                                            children: "index.js"
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Nested collapsibles for hierarchical content like file trees.'
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    }
+};
+export var AdvancedSettings = {
+    render: function() {
+        var _useState = _sliced_to_array(useState(false), 2), showAdvanced = _useState[0], setShowAdvanced = _useState[1];
+        var _useState1 = _sliced_to_array(useState({
+            notifications: true,
+            autoSave: true,
+            debugMode: false,
+            apiTimeout: '30',
+            maxRetries: '3'
+        }), 2), settings = _useState1[0], setSettings = _useState1[1];
+        var updateSetting = function(key, value) {
+            setSettings(function(prev) {
+                return _object_spread_props(_object_spread({}, prev), _define_property({}, key, value));
+            });
+        };
+        return /*#__PURE__*/ _jsx(Card, {
+            title: "Application Settings",
+            padded: true,
+            children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                gap: "6",
+                children: [
+                    /*#__PURE__*/ _jsxs(VerticalStack, {
+                        gap: "4",
+                        children: [
+                            /*#__PURE__*/ _jsx(Text, {
+                                variant: "headingSm",
+                                children: "Basic Settings"
+                            }),
+                            /*#__PURE__*/ _jsxs(HorizontalStack, {
+                                gap: "2",
+                                blockAlign: "center",
+                                as: "label",
+                                children: [
+                                    /*#__PURE__*/ _jsx("input", {
+                                        type: "checkbox",
+                                        checked: settings.notifications,
+                                        onChange: function(e) {
+                                            return updateSetting('notifications', e.target.checked);
+                                        }
+                                    }),
+                                    /*#__PURE__*/ _jsx(Text, {
+                                        children: "Enable notifications"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs(HorizontalStack, {
+                                gap: "2",
+                                blockAlign: "center",
+                                as: "label",
+                                children: [
+                                    /*#__PURE__*/ _jsx("input", {
+                                        type: "checkbox",
+                                        checked: settings.autoSave,
+                                        onChange: function(e) {
+                                            return updateSetting('autoSave', e.target.checked);
+                                        }
+                                    }),
+                                    /*#__PURE__*/ _jsx(Text, {
+                                        children: "Auto-save changes"
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs(Box, {
+                        children: [
+                            /*#__PURE__*/ _jsxs(Button, {
+                                plain: true,
+                                onClick: function() {
+                                    return setShowAdvanced(!showAdvanced);
+                                },
+                                style: {
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    gap: '0.5rem',
+                                    marginBottom: '1rem'
+                                },
+                                children: [
+                                    /*#__PURE__*/ _jsx("span", {
+                                        style: {
+                                            fontSize: '0.8rem'
+                                        },
+                                        children: showAdvanced ? '▼' : '▶'
+                                    }),
+                                    /*#__PURE__*/ _jsx(Text, {
+                                        variant: "headingSm",
+                                        children: "Advanced Settings"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx(Collapsible, {
+                                open: showAdvanced,
+                                children: /*#__PURE__*/ _jsx(Box, {
+                                    padding: "4",
+                                    background: "subdued",
+                                    borderRadius: "default",
+                                    children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                                        gap: "4",
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Text, {
+                                                tone: "subdued",
+                                                children: "⚠️ Caution: These settings can affect application performance"
+                                            }),
+                                            /*#__PURE__*/ _jsxs(HorizontalStack, {
+                                                gap: "2",
+                                                blockAlign: "center",
+                                                as: "label",
+                                                children: [
+                                                    /*#__PURE__*/ _jsx("input", {
+                                                        type: "checkbox",
+                                                        checked: settings.debugMode,
+                                                        onChange: function(e) {
+                                                            return updateSetting('debugMode', e.target.checked);
+                                                        }
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(Text, {
+                                                        children: "Enable debug mode"
+                                                    })
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ _jsxs(HorizontalStack, {
+                                                gap: "2",
+                                                blockAlign: "center",
+                                                children: [
+                                                    /*#__PURE__*/ _jsx(Text, {
+                                                        children: "API Timeout (seconds):"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("input", {
+                                                        type: "number",
+                                                        value: settings.apiTimeout,
+                                                        onChange: function(e) {
+                                                            return updateSetting('apiTimeout', e.target.value);
+                                                        },
+                                                        style: {
+                                                            width: '80px',
+                                                            padding: '0.25rem',
+                                                            border: '1px solid #ccc',
+                                                            borderRadius: '4px'
+                                                        }
+                                                    })
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ _jsxs(HorizontalStack, {
+                                                gap: "2",
+                                                blockAlign: "center",
+                                                children: [
+                                                    /*#__PURE__*/ _jsx(Text, {
+                                                        children: "Max Retries:"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("input", {
+                                                        type: "number",
+                                                        value: settings.maxRetries,
+                                                        onChange: function(e) {
+                                                            return updateSetting('maxRetries', e.target.value);
+                                                        },
+                                                        style: {
+                                                            width: '80px',
+                                                            padding: '0.25rem',
+                                                            border: '1px solid #ccc',
+                                                            borderRadius: '4px'
+                                                        }
+                                                    })
+                                                ]
+                                            })
+                                        ]
+                                    })
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(Box, {
+                        paddingBlockStart: "4",
+                        borderBlockStartWidth: "025",
+                        borderColor: "border",
+                        children: /*#__PURE__*/ _jsxs(HorizontalStack, {
+                            gap: "2",
+                            children: [
+                                /*#__PURE__*/ _jsx(Button, {
+                                    primary: true,
+                                    children: "Save Settings"
+                                }),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    children: "Reset to Defaults"
+                                })
+                            ]
+                        })
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Advanced settings panel with collapsible dangerous options.'
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    }
+};