@webiny/admin-ui 6.4.0-beta.3 → 6.4.0-beta.4

package/Accordion/Accordion.stories.d.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import { Accordion } from "./Accordion.js";
 declare const meta: Meta<typeof Accordion>;
 export default meta;

package/Accordion/Accordion.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion/Accordion.stories.js","sources":["../../src/Accordion/Accordion.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { Accordion, type AccordionItemProps as BaseAccordionItemProps } from \"./Accordion.js\";\n\nimport { ReactComponent as WarningIcon } from \"@webiny/icons/insert_chart.svg\";\nimport { ReactComponent as ArrowUp } from \"@webiny/icons/arrow_upward.svg\";\nimport { ReactComponent as ArrowDown } from \"@webiny/icons/arrow_downward.svg\";\nimport { ReactComponent as EditIcon } from \"@webiny/icons/edit.svg\";\nimport { ReactComponent as TrashIcon } from \"@webiny/icons/delete.svg\";\nimport { Button } from \"~/Button/index.js\";\n\nconst meta: Meta<typeof Accordion> = {\n    title: \"Components/Accordion\",\n    component: Accordion,\n    render: args => {\n        return <Accordion {...args} />;\n    }\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Accordion>;\n\n// Reusable decorators\nconst LightGreyBackground = (Story: React.ComponentType) => (\n    <div className=\"w-[750px] p-[50px] min-h-[500px] bg-[#f6f7f8]\">\n        <Story />\n    </div>\n);\n\nconst WhiteBackground = (Story: React.ComponentType) => (\n    <div className=\"w-[750px] p-[50px] min-h-[500px] bg-white\">\n        <Story />\n    </div>\n);\n\nconst NoBackground = (Story: React.ComponentType) => (\n    <div className=\"w-[750px] p-[50px] min-h-[500px]\">\n        <Story />\n    </div>\n);\n\ninterface AccordionItemProps extends Omit<BaseAccordionItemProps, \"value\" | \"title\" | \"children\"> {\n    index: number;\n}\n\nconst AccordionItem = (props: AccordionItemProps) => {\n    return (\n        <Accordion.Item title={`Accordion item ${props.index}`} {...props}>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet\n            convallis nec, consequat non nulla. Nunc sit amet sagittis tellus. Etiam venenatis, odio\n            sed consectetur consectetur, quam quam blandit ante, semper maximus lorem est vel dolor.\n            Praesent ac neque rutrum, elementum turpis et, vulputate enim. In ex lorem,\n        </Accordion.Item>\n    );\n};\n\nexport const Default: Story = {\n    args: {\n        children: (\n            <>\n                <AccordionItem index={1} />\n                <AccordionItem index={2} />\n                <AccordionItem index={3} />\n            </>\n        )\n    },\n    decorators: [LightGreyBackground]\n};\n\nexport const UnderlineVariant: Story = {\n    ...Default,\n    args: {\n        variant: \"underline\",\n        children: (\n            <>\n                <AccordionItem\n                    index={1}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    icon={<Accordion.Item.Icon icon={<WarningIcon />} label={\"Warning icon\"} />}\n                />\n                <AccordionItem\n                    index={2}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    icon={<Accordion.Item.Icon icon={<WarningIcon />} label={\"Warning icon\"} />}\n                />\n            </>\n        )\n    }\n};\n\nexport const ContainerVariant: Story = {\n    ...Default,\n    args: {\n        variant: \"container\",\n        children: (\n            <>\n                <AccordionItem\n                    index={1}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    icon={<Accordion.Item.Icon icon={<WarningIcon />} label={\"Warning icon\"} />}\n                />\n                <AccordionItem\n                    index={2}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    icon={<Accordion.Item.Icon icon={<WarningIcon />} label={\"Warning icon\"} />}\n                />\n            </>\n        )\n    }\n};\n\nexport const ContainerVariantWithAccentBorder: Story = {\n    ...Default,\n    args: {\n        variant: \"container\",\n        border: \"accent\",\n        children: (\n            <>\n                <AccordionItem\n                    index={1}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    icon={<Accordion.Item.Icon icon={<WarningIcon />} label={\"Warning icon\"} />}\n                />\n                <AccordionItem\n                    index={2}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    icon={<Accordion.Item.Icon icon={<WarningIcon />} label={\"Warning icon\"} />}\n                />\n            </>\n        )\n    }\n};\n\nexport const ContainerVariantWithBaseBackground: Story = {\n    decorators: [WhiteBackground],\n    args: {\n        variant: \"container\",\n        background: \"base\",\n        children: (\n            <>\n                <AccordionItem\n                    index={1}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    icon={<Accordion.Item.Icon icon={<WarningIcon />} label={\"Warning icon\"} />}\n                />\n                <AccordionItem\n                    index={2}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    icon={<Accordion.Item.Icon icon={<WarningIcon />} label={\"Warning icon\"} />}\n                />\n            </>\n        )\n    }\n};\n\nexport const LightBackground: Story = {\n    ...Default,\n    args: {\n        background: \"light\",\n        children: (\n            <>\n                <AccordionItem\n                    index={1}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    icon={<Accordion.Item.Icon icon={<WarningIcon />} label={\"Warning icon\"} />}\n                />\n                <AccordionItem\n                    index={2}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    icon={<Accordion.Item.Icon icon={<WarningIcon />} label={\"Warning icon\"} />}\n                />\n            </>\n        )\n    }\n};\n\nexport const BaseBackground: Story = {\n    ...Default,\n    decorators: [NoBackground],\n    args: {\n        background: \"base\",\n        children: (\n            <>\n                <AccordionItem\n                    index={1}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    icon={<Accordion.Item.Icon icon={<WarningIcon />} label={\"Warning icon\"} />}\n                />\n                <AccordionItem\n                    index={2}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    icon={<Accordion.Item.Icon icon={<WarningIcon />} label={\"Warning icon\"} />}\n                />\n            </>\n        )\n    }\n};\nexport const WithDescriptions: Story = {\n    ...Default,\n    args: {\n        children: (\n            <>\n                <AccordionItem\n                    index={1}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                />\n                <AccordionItem\n                    index={2}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                />\n                <AccordionItem\n                    index={3}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                />\n            </>\n        )\n    },\n    argTypes: {}\n};\nexport const WithSubtitles: Story = {\n    ...Default,\n    args: {\n        children: (\n            <>\n                <AccordionItem index={1} subtitle=\"(Lorem ipsum dolor sit amet...)\" />\n                <AccordionItem index={2} subtitle=\"(Lorem ipsum dolor sit amet...)\" />\n                <AccordionItem index={3} subtitle=\"(Lorem ipsum dolor sit amet...)\" />\n            </>\n        )\n    },\n    argTypes: {}\n};\n\nexport const WithIcon: Story = {\n    ...Default,\n    args: {\n        children: (\n            <>\n                <AccordionItem\n                    index={1}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    icon={<Accordion.Item.Icon icon={<WarningIcon />} label={\"Warning icon\"} />}\n                />\n                <AccordionItem\n                    index={2}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    icon={<Accordion.Item.Icon icon={<WarningIcon />} label={\"Warning icon\"} />}\n                />\n            </>\n        )\n    }\n};\n\nexport const WithActionsIcon: Story = {\n    ...Default,\n    args: {\n        children: (\n            <>\n                <AccordionItem\n                    index={1}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    icon={<Accordion.Item.Icon icon={<WarningIcon />} label={\"Warning icon\"} />}\n                    actions={\n                        <>\n                            <Accordion.Item.Action icon={<ArrowUp />} />\n                            <Accordion.Item.Action icon={<ArrowDown />} />\n                            <Accordion.Item.Action.Separator />\n                            <Accordion.Item.Action icon={<EditIcon />} />\n                            <Accordion.Item.Action icon={<TrashIcon />} />\n                        </>\n                    }\n                />\n                <AccordionItem\n                    index={2}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    icon={<Accordion.Item.Icon icon={<WarningIcon />} label={\"Warning icon\"} />}\n                    actions={\n                        <>\n                            <Accordion.Item.Action icon={<ArrowUp />} />\n                            <Accordion.Item.Action icon={<ArrowDown />} />\n                            <Accordion.Item.Action.Separator />\n                            <Accordion.Item.Action icon={<EditIcon />} />\n                            <Accordion.Item.Action icon={<TrashIcon />} />\n                        </>\n                    }\n                />\n            </>\n        )\n    }\n};\n\nexport const WithDraggableItem: Story = {\n    ...Default,\n    args: {\n        children: (\n            <>\n                <AccordionItem\n                    index={1}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    icon={<Accordion.Item.Icon icon={<WarningIcon />} label={\"Warning icon\"} />}\n                    draggable={true}\n                />\n                <AccordionItem\n                    index={2}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    draggable={true}\n                />\n                <AccordionItem\n                    index={3}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                />\n            </>\n        )\n    }\n};\n\nexport const WithNotInteractiveItem: Story = {\n    ...Default,\n    args: {\n        children: (\n            <>\n                <AccordionItem index={1} description=\"Not interactive item.\" interactive={false} />\n                <AccordionItem index={2} />\n                <AccordionItem index={3} />\n            </>\n        )\n    }\n};\n\nexport const WithDefaultOpenedItem: Story = {\n    ...Default,\n    args: {\n        children: (\n            <>\n                <AccordionItem\n                    index={1}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                />\n                <AccordionItem\n                    index={2}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    defaultOpen={true}\n                />\n            </>\n        )\n    }\n};\n\nexport const WithDisabledItem: Story = {\n    ...Default,\n    args: {\n        children: (\n            <>\n                <AccordionItem\n                    index={1}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                />\n                <AccordionItem\n                    index={2}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    disabled={true}\n                />\n                <AccordionItem\n                    index={3}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    defaultOpen={true}\n                    disabled={true}\n                />\n            </>\n        )\n    }\n};\n\nexport const WithControlledOpenedItem: Story = {\n    ...Default,\n    render: args => {\n        const [openFirstItem, setOpenFirstItem] = useState<boolean>();\n        const [openSecondItem, setOpenSecondItem] = useState<boolean>();\n        const [openThirdItem, setOpenThirdItem] = useState<boolean>();\n\n        return (\n            <>\n                <Accordion {...args}>\n                    <AccordionItem\n                        index={1}\n                        description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                        open={openFirstItem}\n                        onOpenChange={open => setOpenFirstItem(open)}\n                    />\n                    <AccordionItem\n                        index={2}\n                        description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                        open={openSecondItem}\n                        onOpenChange={open => setOpenSecondItem(open)}\n                    />\n                    <AccordionItem\n                        index={3}\n                        description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                        open={openThirdItem}\n                        onOpenChange={open => setOpenThirdItem(open)}\n                    />\n                </Accordion>\n                <div className={\"flex justify-center mt-lg gap-md\"}>\n                    <Button\n                        onClick={() => setOpenFirstItem(!openFirstItem)}\n                        text={\"Toggle First Item\"}\n                    />\n                    <Button\n                        onClick={() => setOpenSecondItem(!openSecondItem)}\n                        text={\"Toggle Second Item\"}\n                    />\n                    <Button\n                        onClick={() => setOpenThirdItem(!openThirdItem)}\n                        text={\"Toggle Third Item\"}\n                    />\n                </div>\n            </>\n        );\n    }\n};\n\nexport const NestedAccordions: Story = {\n    decorators: [WhiteBackground],\n    name: \"Nested Accordions (Base Background)\",\n    args: {\n        background: \"base\",\n        children: (\n            <>\n                <Accordion.Item\n                    title=\"Level 1\"\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    icon={<Accordion.Item.Icon icon={<WarningIcon />} label={\"Warning icon\"} />}\n                    actions={\n                        <>\n                            <Accordion.Item.Action icon={<ArrowUp />} />\n                            <Accordion.Item.Action icon={<ArrowDown />} />\n                            <Accordion.Item.Action.Separator />\n                            <Accordion.Item.Action icon={<EditIcon />} />\n                            <Accordion.Item.Action icon={<TrashIcon />} />\n                        </>\n                    }\n                >\n                    <Accordion>\n                        <Accordion.Item\n                            title=\"Level 2\"\n                            description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                            icon={\n                                <Accordion.Item.Icon\n                                    icon={<WarningIcon />}\n                                    label={\"Warning icon\"}\n                                />\n                            }\n                            actions={\n                                <>\n                                    <Accordion.Item.Action icon={<ArrowUp />} />\n                                    <Accordion.Item.Action icon={<ArrowDown />} />\n                                    <Accordion.Item.Action.Separator />\n                                    <Accordion.Item.Action icon={<EditIcon />} />\n                                    <Accordion.Item.Action icon={<TrashIcon />} />\n                                </>\n                            }\n                        >\n                            <Accordion>\n                                <Accordion.Item\n                                    title=\"Level 3\"\n                                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                                    icon={\n                                        <Accordion.Item.Icon\n                                            icon={<WarningIcon />}\n                                            label={\"Warning icon\"}\n                                        />\n                                    }\n                                    actions={\n                                        <>\n                                            <Accordion.Item.Action icon={<ArrowUp />} />\n                                            <Accordion.Item.Action icon={<ArrowDown />} />\n                                            <Accordion.Item.Action.Separator />\n                                            <Accordion.Item.Action icon={<EditIcon />} />\n                                            <Accordion.Item.Action icon={<TrashIcon />} />\n                                        </>\n                                    }\n                                >\n                                    <Accordion>\n                                        <Accordion.Item title=\"Level 4\">\n                                            <Accordion>\n                                                <Accordion.Item title=\"Level 5\">\n                                                    Content\n                                                </Accordion.Item>\n                                            </Accordion>\n                                            <Accordion>\n                                                <Accordion.Item title=\"Level 5\">\n                                                    Content\n                                                </Accordion.Item>\n                                            </Accordion>\n                                            <Accordion>\n                                                <Accordion.Item title=\"Level 5\">\n                                                    Content\n                                                </Accordion.Item>\n                                            </Accordion>\n                                        </Accordion.Item>\n                                    </Accordion>\n                                </Accordion.Item>\n                            </Accordion>\n                            <Accordion>\n                                <Accordion.Item title=\"Level 3\">Content</Accordion.Item>\n                            </Accordion>\n                            <Accordion>\n                                <Accordion.Item title=\"Level 3\">Content</Accordion.Item>\n                            </Accordion>\n                        </Accordion.Item>\n                    </Accordion>\n                </Accordion.Item>\n                <Accordion.Item title=\"Level 1\">\n                    <Accordion>\n                        <Accordion.Item\n                            title=\"Level 2\"\n                            description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                            icon={\n                                <Accordion.Item.Icon\n                                    icon={<WarningIcon />}\n                                    label={\"Warning icon\"}\n                                />\n                            }\n                            actions={\n                                <>\n                                    <Accordion.Item.Action icon={<ArrowUp />} />\n                                    <Accordion.Item.Action icon={<ArrowDown />} />\n                                    <Accordion.Item.Action.Separator />\n                                    <Accordion.Item.Action icon={<EditIcon />} />\n                                    <Accordion.Item.Action icon={<TrashIcon />} />\n                                </>\n                            }\n                        >\n                            <Accordion>\n                                <Accordion.Item title=\"Level 3\">\n                                    <Accordion>\n                                        <Accordion.Item title=\"Level 4\">\n                                            <Accordion>\n                                                <Accordion.Item title=\"Level 5\">\n                                                    Test\n                                                </Accordion.Item>\n                                            </Accordion>\n                                            <Accordion>\n                                                <Accordion.Item title=\"Level 5\">\n                                                    Test\n                                                </Accordion.Item>\n                                            </Accordion>\n                                            <Accordion>\n                                                <Accordion.Item title=\"Level 5\">\n                                                    Test\n                                                </Accordion.Item>\n                                            </Accordion>\n                                        </Accordion.Item>\n                                    </Accordion>\n                                </Accordion.Item>\n                            </Accordion>\n                            <Accordion>\n                                <Accordion.Item title=\"Level 3\">Content</Accordion.Item>\n                            </Accordion>\n                            <Accordion>\n                                <Accordion.Item title=\"Level 3\">Content</Accordion.Item>\n                            </Accordion>\n                        </Accordion.Item>\n                    </Accordion>\n                </Accordion.Item>\n            </>\n        )\n    }\n};\n\nexport const NestedAccordionsLight: Story = {\n    ...Default,\n    name: \"Nested Accordions (Light Background)\",\n    args: {\n        background: \"light\",\n        children: (\n            <>\n                <Accordion.Item\n                    title=\"Level 1\"\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    icon={<Accordion.Item.Icon icon={<WarningIcon />} label={\"Warning icon\"} />}\n                    actions={\n                        <>\n                            <Accordion.Item.Action icon={<ArrowUp />} />\n                            <Accordion.Item.Action icon={<ArrowDown />} />\n                            <Accordion.Item.Action.Separator />\n                            <Accordion.Item.Action icon={<EditIcon />} />\n                            <Accordion.Item.Action icon={<TrashIcon />} />\n                        </>\n                    }\n                >\n                    <Accordion>\n                        <Accordion.Item\n                            title=\"Level 2\"\n                            description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                            icon={\n                                <Accordion.Item.Icon\n                                    icon={<WarningIcon />}\n                                    label={\"Warning icon\"}\n                                />\n                            }\n                            actions={\n                                <>\n                                    <Accordion.Item.Action icon={<ArrowUp />} />\n                                    <Accordion.Item.Action icon={<ArrowDown />} />\n                                    <Accordion.Item.Action.Separator />\n                                    <Accordion.Item.Action icon={<EditIcon />} />\n                                    <Accordion.Item.Action icon={<TrashIcon />} />\n                                </>\n                            }\n                        >\n                            <Accordion>\n                                <Accordion.Item\n                                    title=\"Level 3\"\n                                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                                    icon={\n                                        <Accordion.Item.Icon\n                                            icon={<WarningIcon />}\n                                            label={\"Warning icon\"}\n                                        />\n                                    }\n                                    actions={\n                                        <>\n                                            <Accordion.Item.Action icon={<ArrowUp />} />\n                                            <Accordion.Item.Action icon={<ArrowDown />} />\n                                            <Accordion.Item.Action.Separator />\n                                            <Accordion.Item.Action icon={<EditIcon />} />\n                                            <Accordion.Item.Action icon={<TrashIcon />} />\n                                        </>\n                                    }\n                                >\n                                    <Accordion>\n                                        <Accordion.Item title=\"Level 4\">\n                                            <Accordion>\n                                                <Accordion.Item title=\"Level 5\">\n                                                    Content\n                                                </Accordion.Item>\n                                            </Accordion>\n                                            <Accordion>\n                                                <Accordion.Item title=\"Level 5\">\n                                                    Content\n                                                </Accordion.Item>\n                                            </Accordion>\n                                            <Accordion>\n                                                <Accordion.Item title=\"Level 5\">\n                                                    Content\n                                                </Accordion.Item>\n                                            </Accordion>\n                                        </Accordion.Item>\n                                    </Accordion>\n                                </Accordion.Item>\n                            </Accordion>\n                            <Accordion>\n                                <Accordion.Item title=\"Level 3\">Content</Accordion.Item>\n                            </Accordion>\n                            <Accordion>\n                                <Accordion.Item title=\"Level 3\">Content</Accordion.Item>\n                            </Accordion>\n                        </Accordion.Item>\n                    </Accordion>\n                </Accordion.Item>\n                <Accordion.Item title=\"Level 1\">\n                    <Accordion>\n                        <Accordion.Item\n                            title=\"Level 2\"\n                            description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                            icon={\n                                <Accordion.Item.Icon\n                                    icon={<WarningIcon />}\n                                    label={\"Warning icon\"}\n                                />\n                            }\n                            actions={\n                                <>\n                                    <Accordion.Item.Action icon={<ArrowUp />} />\n                                    <Accordion.Item.Action icon={<ArrowDown />} />\n                                    <Accordion.Item.Action.Separator />\n                                    <Accordion.Item.Action icon={<EditIcon />} />\n                                    <Accordion.Item.Action icon={<TrashIcon />} />\n                                </>\n                            }\n                        >\n                            <Accordion>\n                                <Accordion.Item title=\"Level 3\">\n                                    <Accordion>\n                                        <Accordion.Item title=\"Level 4\">\n                                            <Accordion>\n                                                <Accordion.Item title=\"Level 5\">\n                                                    Test\n                                                </Accordion.Item>\n                                            </Accordion>\n                                            <Accordion>\n                                                <Accordion.Item title=\"Level 5\">\n                                                    Test\n                                                </Accordion.Item>\n                                            </Accordion>\n                                            <Accordion>\n                                                <Accordion.Item title=\"Level 5\">\n                                                    Test\n                                                </Accordion.Item>\n                                            </Accordion>\n                                        </Accordion.Item>\n                                    </Accordion>\n                                </Accordion.Item>\n                            </Accordion>\n                            <Accordion>\n                                <Accordion.Item title=\"Level 3\">Content</Accordion.Item>\n                            </Accordion>\n                            <Accordion>\n                                <Accordion.Item title=\"Level 3\">Content</Accordion.Item>\n                            </Accordion>\n                        </Accordion.Item>\n                    </Accordion>\n                </Accordion.Item>\n            </>\n        )\n    }\n};\n\nexport const WithColorMark: Story = {\n    ...Default,\n    args: {\n        children: (\n            <>\n                <AccordionItem\n                    colorMark={\"#ff6584\"}\n                    index={1}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    icon={<Accordion.Item.Icon icon={<WarningIcon />} label={\"Warning icon\"} />}\n                />\n            </>\n        )\n    }\n};\n\nexport const Locked: Story = {\n    ...Default,\n    args: {\n        children: (\n            <>\n                <AccordionItem\n                    index={1}\n                    locked={true}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    icon={<Accordion.Item.Icon icon={<WarningIcon />} label={\"Warning icon\"} />}\n                />\n            </>\n        )\n    }\n};\n\nexport const IndicatorPositionLeft: Story = {\n    decorators: [LightGreyBackground],\n    args: {\n        variant: \"underline\",\n        openClosedIndicatorPosition: \"right\",\n        children: (\n            <>\n                <AccordionItem\n                    index={1}\n                    description=\"When indicator is on the left, it replaces the icon position.\"\n                />\n                <AccordionItem\n                    index={2}\n                    description=\"Icons are not shown when indicator is on the left.\"\n                />\n                <AccordionItem\n                    index={3}\n                    description=\"Actions are still shown on the right side.\"\n                    actions={\n                        <Accordion.Item.Action\n                            icon={<TrashIcon />}\n                            onClick={() => alert(\"Delete clicked\")}\n                        />\n                    }\n                />\n            </>\n        )\n    }\n};\n\nexport const IndicatorPositionRight: Story = {\n    decorators: [LightGreyBackground],\n    args: {\n        variant: \"underline\",\n        openClosedIndicatorPosition: \"right\",\n        children: (\n            <>\n                <AccordionItem\n                    index={1}\n                    description=\"Default behavior with indicator on the right.\"\n                    icon={<Accordion.Item.Icon icon={<WarningIcon />} label={\"Warning icon\"} />}\n                />\n                <AccordionItem\n                    index={2}\n                    description=\"Icons can be shown when indicator is on the right.\"\n                    icon={<Accordion.Item.Icon icon={<WarningIcon />} label={\"Warning icon\"} />}\n                />\n            </>\n        )\n    }\n};\n\n// Add a Documentation story\nexport const Documentation: Story = {\n    render: args => {\n        return <Accordion {...args} />;\n    },\n    args: {\n        variant: \"underline\",\n        children: (\n            <>\n                <Accordion.Item\n                    title=\"Accordion Item 1\"\n                    description=\"This is a description for the first item\"\n                    icon={<Accordion.Item.Icon icon={<WarningIcon />} label={\"Warning icon\"} />}\n                    actions={\n                        <>\n                            <Accordion.Item.Action icon={<EditIcon />} />\n                            <Accordion.Item.Action icon={<TrashIcon />} />\n                        </>\n                    }\n                >\n                    This is the content for the first accordion item. It can contain any React\n                    elements.\n                </Accordion.Item>\n\n                <Accordion.Item\n                    title=\"Accordion Item 2\"\n                    description=\"This is a description for the second item\"\n                    defaultOpen={true}\n                >\n                    This is the content for the second accordion item. It&apos;s open by default.\n                </Accordion.Item>\n\n                <Accordion.Item\n                    title=\"Disabled Item\"\n                    description=\"This item cannot be interacted with\"\n                    disabled={true}\n                >\n                    This content won&apos;t be visible because the item is disabled.\n                </Accordion.Item>\n            </>\n        )\n    },\n    argTypes: {\n        variant: {\n            control: \"select\",\n            options: [\"underline\", \"container\"],\n            description: \"The visual style of the accordion\"\n        },\n        background: {\n            control: \"select\",\n            options: [\"base\", \"light\", \"transparent\"],\n            description: \"The background color of the accordion\"\n        },\n        children: {\n            description:\n                \"The content of the accordion. Please refer to the example code for details.\"\n        }\n    }\n};\n"],"names":["meta","Accordion","args","LightGreyBackground","Story","WhiteBackground","NoBackground","AccordionItem","props","Default","UnderlineVariant","WarningIcon","ContainerVariant","ContainerVariantWithAccentBorder","ContainerVariantWithBaseBackground","LightBackground","BaseBackground","WithDescriptions","WithSubtitles","WithIcon","WithActionsIcon","ArrowUp","ArrowDown","EditIcon","TrashIcon","WithDraggableItem","WithNotInteractiveItem","WithDefaultOpenedItem","WithDisabledItem","WithControlledOpenedItem","openFirstItem","setOpenFirstItem","useState","openSecondItem","setOpenSecondItem","openThirdItem","setOpenThirdItem","open","Button","NestedAccordions","NestedAccordionsLight","WithColorMark","Locked","IndicatorPositionLeft","alert","IndicatorPositionRight","Documentation"],"mappings":"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"}
+{"version":3,"file":"Accordion/Accordion.stories.js","sources":["../../src/Accordion/Accordion.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { Accordion, type AccordionItemProps as BaseAccordionItemProps } from \"./Accordion.js\";\n\nimport { ReactComponent as WarningIcon } from \"@webiny/icons/insert_chart.svg\";\nimport { ReactComponent as ArrowUp } from \"@webiny/icons/arrow_upward.svg\";\nimport { ReactComponent as ArrowDown } from \"@webiny/icons/arrow_downward.svg\";\nimport { ReactComponent as EditIcon } from \"@webiny/icons/edit.svg\";\nimport { ReactComponent as TrashIcon } from \"@webiny/icons/delete.svg\";\nimport { Button } from \"~/Button/index.js\";\n\nconst meta: Meta<typeof Accordion> = {\n    title: \"Components/Accordion\",\n    component: Accordion,\n    render: args => {\n        return <Accordion {...args} />;\n    }\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Accordion>;\n\n// Reusable decorators\nconst LightGreyBackground = (Story: React.ComponentType) => (\n    <div className=\"w-[750px] p-[50px] min-h-[500px] bg-[#f6f7f8]\">\n        <Story />\n    </div>\n);\n\nconst WhiteBackground = (Story: React.ComponentType) => (\n    <div className=\"w-[750px] p-[50px] min-h-[500px] bg-white\">\n        <Story />\n    </div>\n);\n\nconst NoBackground = (Story: React.ComponentType) => (\n    <div className=\"w-[750px] p-[50px] min-h-[500px]\">\n        <Story />\n    </div>\n);\n\ninterface AccordionItemProps extends Omit<BaseAccordionItemProps, \"value\" | \"title\" | \"children\"> {\n    index: number;\n}\n\nconst AccordionItem = (props: AccordionItemProps) => {\n    return (\n        <Accordion.Item title={`Accordion item ${props.index}`} {...props}>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet\n            convallis nec, consequat non nulla. Nunc sit amet sagittis tellus. Etiam venenatis, odio\n            sed consectetur consectetur, quam quam blandit ante, semper maximus lorem est vel dolor.\n            Praesent ac neque rutrum, elementum turpis et, vulputate enim. In ex lorem,\n        </Accordion.Item>\n    );\n};\n\nexport const Default: Story = {\n    args: {\n        children: (\n            <>\n                <AccordionItem index={1} />\n                <AccordionItem index={2} />\n                <AccordionItem index={3} />\n            </>\n        )\n    },\n    decorators: [LightGreyBackground]\n};\n\nexport const UnderlineVariant: Story = {\n    ...Default,\n    args: {\n        variant: \"underline\",\n        children: (\n            <>\n                <AccordionItem\n                    index={1}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    icon={<Accordion.Item.Icon icon={<WarningIcon />} label={\"Warning icon\"} />}\n                />\n                <AccordionItem\n                    index={2}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    icon={<Accordion.Item.Icon icon={<WarningIcon />} label={\"Warning icon\"} />}\n                />\n            </>\n        )\n    }\n};\n\nexport const ContainerVariant: Story = {\n    ...Default,\n    args: {\n        variant: \"container\",\n        children: (\n            <>\n                <AccordionItem\n                    index={1}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    icon={<Accordion.Item.Icon icon={<WarningIcon />} label={\"Warning icon\"} />}\n                />\n                <AccordionItem\n                    index={2}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    icon={<Accordion.Item.Icon icon={<WarningIcon />} label={\"Warning icon\"} />}\n                />\n            </>\n        )\n    }\n};\n\nexport const ContainerVariantWithAccentBorder: Story = {\n    ...Default,\n    args: {\n        variant: \"container\",\n        border: \"accent\",\n        children: (\n            <>\n                <AccordionItem\n                    index={1}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    icon={<Accordion.Item.Icon icon={<WarningIcon />} label={\"Warning icon\"} />}\n                />\n                <AccordionItem\n                    index={2}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    icon={<Accordion.Item.Icon icon={<WarningIcon />} label={\"Warning icon\"} />}\n                />\n            </>\n        )\n    }\n};\n\nexport const ContainerVariantWithBaseBackground: Story = {\n    decorators: [WhiteBackground],\n    args: {\n        variant: \"container\",\n        background: \"base\",\n        children: (\n            <>\n                <AccordionItem\n                    index={1}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    icon={<Accordion.Item.Icon icon={<WarningIcon />} label={\"Warning icon\"} />}\n                />\n                <AccordionItem\n                    index={2}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    icon={<Accordion.Item.Icon icon={<WarningIcon />} label={\"Warning icon\"} />}\n                />\n            </>\n        )\n    }\n};\n\nexport const LightBackground: Story = {\n    ...Default,\n    args: {\n        background: \"light\",\n        children: (\n            <>\n                <AccordionItem\n                    index={1}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    icon={<Accordion.Item.Icon icon={<WarningIcon />} label={\"Warning icon\"} />}\n                />\n                <AccordionItem\n                    index={2}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    icon={<Accordion.Item.Icon icon={<WarningIcon />} label={\"Warning icon\"} />}\n                />\n            </>\n        )\n    }\n};\n\nexport const BaseBackground: Story = {\n    ...Default,\n    decorators: [NoBackground],\n    args: {\n        background: \"base\",\n        children: (\n            <>\n                <AccordionItem\n                    index={1}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    icon={<Accordion.Item.Icon icon={<WarningIcon />} label={\"Warning icon\"} />}\n                />\n                <AccordionItem\n                    index={2}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    icon={<Accordion.Item.Icon icon={<WarningIcon />} label={\"Warning icon\"} />}\n                />\n            </>\n        )\n    }\n};\nexport const WithDescriptions: Story = {\n    ...Default,\n    args: {\n        children: (\n            <>\n                <AccordionItem\n                    index={1}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                />\n                <AccordionItem\n                    index={2}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                />\n                <AccordionItem\n                    index={3}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                />\n            </>\n        )\n    },\n    argTypes: {}\n};\nexport const WithSubtitles: Story = {\n    ...Default,\n    args: {\n        children: (\n            <>\n                <AccordionItem index={1} subtitle=\"(Lorem ipsum dolor sit amet...)\" />\n                <AccordionItem index={2} subtitle=\"(Lorem ipsum dolor sit amet...)\" />\n                <AccordionItem index={3} subtitle=\"(Lorem ipsum dolor sit amet...)\" />\n            </>\n        )\n    },\n    argTypes: {}\n};\n\nexport const WithIcon: Story = {\n    ...Default,\n    args: {\n        children: (\n            <>\n                <AccordionItem\n                    index={1}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    icon={<Accordion.Item.Icon icon={<WarningIcon />} label={\"Warning icon\"} />}\n                />\n                <AccordionItem\n                    index={2}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    icon={<Accordion.Item.Icon icon={<WarningIcon />} label={\"Warning icon\"} />}\n                />\n            </>\n        )\n    }\n};\n\nexport const WithActionsIcon: Story = {\n    ...Default,\n    args: {\n        children: (\n            <>\n                <AccordionItem\n                    index={1}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    icon={<Accordion.Item.Icon icon={<WarningIcon />} label={\"Warning icon\"} />}\n                    actions={\n                        <>\n                            <Accordion.Item.Action icon={<ArrowUp />} />\n                            <Accordion.Item.Action icon={<ArrowDown />} />\n                            <Accordion.Item.Action.Separator />\n                            <Accordion.Item.Action icon={<EditIcon />} />\n                            <Accordion.Item.Action icon={<TrashIcon />} />\n                        </>\n                    }\n                />\n                <AccordionItem\n                    index={2}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    icon={<Accordion.Item.Icon icon={<WarningIcon />} label={\"Warning icon\"} />}\n                    actions={\n                        <>\n                            <Accordion.Item.Action icon={<ArrowUp />} />\n                            <Accordion.Item.Action icon={<ArrowDown />} />\n                            <Accordion.Item.Action.Separator />\n                            <Accordion.Item.Action icon={<EditIcon />} />\n                            <Accordion.Item.Action icon={<TrashIcon />} />\n                        </>\n                    }\n                />\n            </>\n        )\n    }\n};\n\nexport const WithDraggableItem: Story = {\n    ...Default,\n    args: {\n        children: (\n            <>\n                <AccordionItem\n                    index={1}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    icon={<Accordion.Item.Icon icon={<WarningIcon />} label={\"Warning icon\"} />}\n                    draggable={true}\n                />\n                <AccordionItem\n                    index={2}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    draggable={true}\n                />\n                <AccordionItem\n                    index={3}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                />\n            </>\n        )\n    }\n};\n\nexport const WithNotInteractiveItem: Story = {\n    ...Default,\n    args: {\n        children: (\n            <>\n                <AccordionItem index={1} description=\"Not interactive item.\" interactive={false} />\n                <AccordionItem index={2} />\n                <AccordionItem index={3} />\n            </>\n        )\n    }\n};\n\nexport const WithDefaultOpenedItem: Story = {\n    ...Default,\n    args: {\n        children: (\n            <>\n                <AccordionItem\n                    index={1}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                />\n                <AccordionItem\n                    index={2}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    defaultOpen={true}\n                />\n            </>\n        )\n    }\n};\n\nexport const WithDisabledItem: Story = {\n    ...Default,\n    args: {\n        children: (\n            <>\n                <AccordionItem\n                    index={1}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                />\n                <AccordionItem\n                    index={2}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    disabled={true}\n                />\n                <AccordionItem\n                    index={3}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    defaultOpen={true}\n                    disabled={true}\n                />\n            </>\n        )\n    }\n};\n\nexport const WithControlledOpenedItem: Story = {\n    ...Default,\n    render: args => {\n        const [openFirstItem, setOpenFirstItem] = useState<boolean>();\n        const [openSecondItem, setOpenSecondItem] = useState<boolean>();\n        const [openThirdItem, setOpenThirdItem] = useState<boolean>();\n\n        return (\n            <>\n                <Accordion {...args}>\n                    <AccordionItem\n                        index={1}\n                        description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                        open={openFirstItem}\n                        onOpenChange={open => setOpenFirstItem(open)}\n                    />\n                    <AccordionItem\n                        index={2}\n                        description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                        open={openSecondItem}\n                        onOpenChange={open => setOpenSecondItem(open)}\n                    />\n                    <AccordionItem\n                        index={3}\n                        description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                        open={openThirdItem}\n                        onOpenChange={open => setOpenThirdItem(open)}\n                    />\n                </Accordion>\n                <div className={\"flex justify-center mt-lg gap-md\"}>\n                    <Button\n                        onClick={() => setOpenFirstItem(!openFirstItem)}\n                        text={\"Toggle First Item\"}\n                    />\n                    <Button\n                        onClick={() => setOpenSecondItem(!openSecondItem)}\n                        text={\"Toggle Second Item\"}\n                    />\n                    <Button\n                        onClick={() => setOpenThirdItem(!openThirdItem)}\n                        text={\"Toggle Third Item\"}\n                    />\n                </div>\n            </>\n        );\n    }\n};\n\nexport const NestedAccordions: Story = {\n    decorators: [WhiteBackground],\n    name: \"Nested Accordions (Base Background)\",\n    args: {\n        background: \"base\",\n        children: (\n            <>\n                <Accordion.Item\n                    title=\"Level 1\"\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    icon={<Accordion.Item.Icon icon={<WarningIcon />} label={\"Warning icon\"} />}\n                    actions={\n                        <>\n                            <Accordion.Item.Action icon={<ArrowUp />} />\n                            <Accordion.Item.Action icon={<ArrowDown />} />\n                            <Accordion.Item.Action.Separator />\n                            <Accordion.Item.Action icon={<EditIcon />} />\n                            <Accordion.Item.Action icon={<TrashIcon />} />\n                        </>\n                    }\n                >\n                    <Accordion>\n                        <Accordion.Item\n                            title=\"Level 2\"\n                            description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                            icon={\n                                <Accordion.Item.Icon\n                                    icon={<WarningIcon />}\n                                    label={\"Warning icon\"}\n                                />\n                            }\n                            actions={\n                                <>\n                                    <Accordion.Item.Action icon={<ArrowUp />} />\n                                    <Accordion.Item.Action icon={<ArrowDown />} />\n                                    <Accordion.Item.Action.Separator />\n                                    <Accordion.Item.Action icon={<EditIcon />} />\n                                    <Accordion.Item.Action icon={<TrashIcon />} />\n                                </>\n                            }\n                        >\n                            <Accordion>\n                                <Accordion.Item\n                                    title=\"Level 3\"\n                                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                                    icon={\n                                        <Accordion.Item.Icon\n                                            icon={<WarningIcon />}\n                                            label={\"Warning icon\"}\n                                        />\n                                    }\n                                    actions={\n                                        <>\n                                            <Accordion.Item.Action icon={<ArrowUp />} />\n                                            <Accordion.Item.Action icon={<ArrowDown />} />\n                                            <Accordion.Item.Action.Separator />\n                                            <Accordion.Item.Action icon={<EditIcon />} />\n                                            <Accordion.Item.Action icon={<TrashIcon />} />\n                                        </>\n                                    }\n                                >\n                                    <Accordion>\n                                        <Accordion.Item title=\"Level 4\">\n                                            <Accordion>\n                                                <Accordion.Item title=\"Level 5\">\n                                                    Content\n                                                </Accordion.Item>\n                                            </Accordion>\n                                            <Accordion>\n                                                <Accordion.Item title=\"Level 5\">\n                                                    Content\n                                                </Accordion.Item>\n                                            </Accordion>\n                                            <Accordion>\n                                                <Accordion.Item title=\"Level 5\">\n                                                    Content\n                                                </Accordion.Item>\n                                            </Accordion>\n                                        </Accordion.Item>\n                                    </Accordion>\n                                </Accordion.Item>\n                            </Accordion>\n                            <Accordion>\n                                <Accordion.Item title=\"Level 3\">Content</Accordion.Item>\n                            </Accordion>\n                            <Accordion>\n                                <Accordion.Item title=\"Level 3\">Content</Accordion.Item>\n                            </Accordion>\n                        </Accordion.Item>\n                    </Accordion>\n                </Accordion.Item>\n                <Accordion.Item title=\"Level 1\">\n                    <Accordion>\n                        <Accordion.Item\n                            title=\"Level 2\"\n                            description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                            icon={\n                                <Accordion.Item.Icon\n                                    icon={<WarningIcon />}\n                                    label={\"Warning icon\"}\n                                />\n                            }\n                            actions={\n                                <>\n                                    <Accordion.Item.Action icon={<ArrowUp />} />\n                                    <Accordion.Item.Action icon={<ArrowDown />} />\n                                    <Accordion.Item.Action.Separator />\n                                    <Accordion.Item.Action icon={<EditIcon />} />\n                                    <Accordion.Item.Action icon={<TrashIcon />} />\n                                </>\n                            }\n                        >\n                            <Accordion>\n                                <Accordion.Item title=\"Level 3\">\n                                    <Accordion>\n                                        <Accordion.Item title=\"Level 4\">\n                                            <Accordion>\n                                                <Accordion.Item title=\"Level 5\">\n                                                    Test\n                                                </Accordion.Item>\n                                            </Accordion>\n                                            <Accordion>\n                                                <Accordion.Item title=\"Level 5\">\n                                                    Test\n                                                </Accordion.Item>\n                                            </Accordion>\n                                            <Accordion>\n                                                <Accordion.Item title=\"Level 5\">\n                                                    Test\n                                                </Accordion.Item>\n                                            </Accordion>\n                                        </Accordion.Item>\n                                    </Accordion>\n                                </Accordion.Item>\n                            </Accordion>\n                            <Accordion>\n                                <Accordion.Item title=\"Level 3\">Content</Accordion.Item>\n                            </Accordion>\n                            <Accordion>\n                                <Accordion.Item title=\"Level 3\">Content</Accordion.Item>\n                            </Accordion>\n                        </Accordion.Item>\n                    </Accordion>\n                </Accordion.Item>\n            </>\n        )\n    }\n};\n\nexport const NestedAccordionsLight: Story = {\n    ...Default,\n    name: \"Nested Accordions (Light Background)\",\n    args: {\n        background: \"light\",\n        children: (\n            <>\n                <Accordion.Item\n                    title=\"Level 1\"\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    icon={<Accordion.Item.Icon icon={<WarningIcon />} label={\"Warning icon\"} />}\n                    actions={\n                        <>\n                            <Accordion.Item.Action icon={<ArrowUp />} />\n                            <Accordion.Item.Action icon={<ArrowDown />} />\n                            <Accordion.Item.Action.Separator />\n                            <Accordion.Item.Action icon={<EditIcon />} />\n                            <Accordion.Item.Action icon={<TrashIcon />} />\n                        </>\n                    }\n                >\n                    <Accordion>\n                        <Accordion.Item\n                            title=\"Level 2\"\n                            description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                            icon={\n                                <Accordion.Item.Icon\n                                    icon={<WarningIcon />}\n                                    label={\"Warning icon\"}\n                                />\n                            }\n                            actions={\n                                <>\n                                    <Accordion.Item.Action icon={<ArrowUp />} />\n                                    <Accordion.Item.Action icon={<ArrowDown />} />\n                                    <Accordion.Item.Action.Separator />\n                                    <Accordion.Item.Action icon={<EditIcon />} />\n                                    <Accordion.Item.Action icon={<TrashIcon />} />\n                                </>\n                            }\n                        >\n                            <Accordion>\n                                <Accordion.Item\n                                    title=\"Level 3\"\n                                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                                    icon={\n                                        <Accordion.Item.Icon\n                                            icon={<WarningIcon />}\n                                            label={\"Warning icon\"}\n                                        />\n                                    }\n                                    actions={\n                                        <>\n                                            <Accordion.Item.Action icon={<ArrowUp />} />\n                                            <Accordion.Item.Action icon={<ArrowDown />} />\n                                            <Accordion.Item.Action.Separator />\n                                            <Accordion.Item.Action icon={<EditIcon />} />\n                                            <Accordion.Item.Action icon={<TrashIcon />} />\n                                        </>\n                                    }\n                                >\n                                    <Accordion>\n                                        <Accordion.Item title=\"Level 4\">\n                                            <Accordion>\n                                                <Accordion.Item title=\"Level 5\">\n                                                    Content\n                                                </Accordion.Item>\n                                            </Accordion>\n                                            <Accordion>\n                                                <Accordion.Item title=\"Level 5\">\n                                                    Content\n                                                </Accordion.Item>\n                                            </Accordion>\n                                            <Accordion>\n                                                <Accordion.Item title=\"Level 5\">\n                                                    Content\n                                                </Accordion.Item>\n                                            </Accordion>\n                                        </Accordion.Item>\n                                    </Accordion>\n                                </Accordion.Item>\n                            </Accordion>\n                            <Accordion>\n                                <Accordion.Item title=\"Level 3\">Content</Accordion.Item>\n                            </Accordion>\n                            <Accordion>\n                                <Accordion.Item title=\"Level 3\">Content</Accordion.Item>\n                            </Accordion>\n                        </Accordion.Item>\n                    </Accordion>\n                </Accordion.Item>\n                <Accordion.Item title=\"Level 1\">\n                    <Accordion>\n                        <Accordion.Item\n                            title=\"Level 2\"\n                            description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                            icon={\n                                <Accordion.Item.Icon\n                                    icon={<WarningIcon />}\n                                    label={\"Warning icon\"}\n                                />\n                            }\n                            actions={\n                                <>\n                                    <Accordion.Item.Action icon={<ArrowUp />} />\n                                    <Accordion.Item.Action icon={<ArrowDown />} />\n                                    <Accordion.Item.Action.Separator />\n                                    <Accordion.Item.Action icon={<EditIcon />} />\n                                    <Accordion.Item.Action icon={<TrashIcon />} />\n                                </>\n                            }\n                        >\n                            <Accordion>\n                                <Accordion.Item title=\"Level 3\">\n                                    <Accordion>\n                                        <Accordion.Item title=\"Level 4\">\n                                            <Accordion>\n                                                <Accordion.Item title=\"Level 5\">\n                                                    Test\n                                                </Accordion.Item>\n                                            </Accordion>\n                                            <Accordion>\n                                                <Accordion.Item title=\"Level 5\">\n                                                    Test\n                                                </Accordion.Item>\n                                            </Accordion>\n                                            <Accordion>\n                                                <Accordion.Item title=\"Level 5\">\n                                                    Test\n                                                </Accordion.Item>\n                                            </Accordion>\n                                        </Accordion.Item>\n                                    </Accordion>\n                                </Accordion.Item>\n                            </Accordion>\n                            <Accordion>\n                                <Accordion.Item title=\"Level 3\">Content</Accordion.Item>\n                            </Accordion>\n                            <Accordion>\n                                <Accordion.Item title=\"Level 3\">Content</Accordion.Item>\n                            </Accordion>\n                        </Accordion.Item>\n                    </Accordion>\n                </Accordion.Item>\n            </>\n        )\n    }\n};\n\nexport const WithColorMark: Story = {\n    ...Default,\n    args: {\n        children: (\n            <>\n                <AccordionItem\n                    colorMark={\"#ff6584\"}\n                    index={1}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    icon={<Accordion.Item.Icon icon={<WarningIcon />} label={\"Warning icon\"} />}\n                />\n            </>\n        )\n    }\n};\n\nexport const Locked: Story = {\n    ...Default,\n    args: {\n        children: (\n            <>\n                <AccordionItem\n                    index={1}\n                    locked={true}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    icon={<Accordion.Item.Icon icon={<WarningIcon />} label={\"Warning icon\"} />}\n                />\n            </>\n        )\n    }\n};\n\nexport const IndicatorPositionLeft: Story = {\n    decorators: [LightGreyBackground],\n    args: {\n        variant: \"underline\",\n        openClosedIndicatorPosition: \"right\",\n        children: (\n            <>\n                <AccordionItem\n                    index={1}\n                    description=\"When indicator is on the left, it replaces the icon position.\"\n                />\n                <AccordionItem\n                    index={2}\n                    description=\"Icons are not shown when indicator is on the left.\"\n                />\n                <AccordionItem\n                    index={3}\n                    description=\"Actions are still shown on the right side.\"\n                    actions={\n                        <Accordion.Item.Action\n                            icon={<TrashIcon />}\n                            onClick={() => alert(\"Delete clicked\")}\n                        />\n                    }\n                />\n            </>\n        )\n    }\n};\n\nexport const IndicatorPositionRight: Story = {\n    decorators: [LightGreyBackground],\n    args: {\n        variant: \"underline\",\n        openClosedIndicatorPosition: \"right\",\n        children: (\n            <>\n                <AccordionItem\n                    index={1}\n                    description=\"Default behavior with indicator on the right.\"\n                    icon={<Accordion.Item.Icon icon={<WarningIcon />} label={\"Warning icon\"} />}\n                />\n                <AccordionItem\n                    index={2}\n                    description=\"Icons can be shown when indicator is on the right.\"\n                    icon={<Accordion.Item.Icon icon={<WarningIcon />} label={\"Warning icon\"} />}\n                />\n            </>\n        )\n    }\n};\n\n// Add a Documentation story\nexport const Documentation: Story = {\n    render: args => {\n        return <Accordion {...args} />;\n    },\n    args: {\n        variant: \"underline\",\n        children: (\n            <>\n                <Accordion.Item\n                    title=\"Accordion Item 1\"\n                    description=\"This is a description for the first item\"\n                    icon={<Accordion.Item.Icon icon={<WarningIcon />} label={\"Warning icon\"} />}\n                    actions={\n                        <>\n                            <Accordion.Item.Action icon={<EditIcon />} />\n                            <Accordion.Item.Action icon={<TrashIcon />} />\n                        </>\n                    }\n                >\n                    This is the content for the first accordion item. It can contain any React\n                    elements.\n                </Accordion.Item>\n\n                <Accordion.Item\n                    title=\"Accordion Item 2\"\n                    description=\"This is a description for the second item\"\n                    defaultOpen={true}\n                >\n                    This is the content for the second accordion item. It&apos;s open by default.\n                </Accordion.Item>\n\n                <Accordion.Item\n                    title=\"Disabled Item\"\n                    description=\"This item cannot be interacted with\"\n                    disabled={true}\n                >\n                    This content won&apos;t be visible because the item is disabled.\n                </Accordion.Item>\n            </>\n        )\n    },\n    argTypes: {\n        variant: {\n            control: \"select\",\n            options: [\"underline\", \"container\"],\n            description: \"The visual style of the accordion\"\n        },\n        background: {\n            control: \"select\",\n            options: [\"base\", \"light\", \"transparent\"],\n            description: \"The background color of the accordion\"\n        },\n        children: {\n            description:\n                \"The content of the accordion. Please refer to the example code for details.\"\n        }\n    }\n};\n"],"names":["meta","Accordion","args","LightGreyBackground","Story","WhiteBackground","NoBackground","AccordionItem","props","Default","UnderlineVariant","WarningIcon","ContainerVariant","ContainerVariantWithAccentBorder","ContainerVariantWithBaseBackground","LightBackground","BaseBackground","WithDescriptions","WithSubtitles","WithIcon","WithActionsIcon","ArrowUp","ArrowDown","EditIcon","TrashIcon","WithDraggableItem","WithNotInteractiveItem","WithDefaultOpenedItem","WithDisabledItem","WithControlledOpenedItem","openFirstItem","setOpenFirstItem","useState","openSecondItem","setOpenSecondItem","openThirdItem","setOpenThirdItem","open","Button","NestedAccordions","NestedAccordionsLight","WithColorMark","Locked","IndicatorPositionLeft","alert","IndicatorPositionRight","Documentation"],"mappings":";;;;;;;;AAWA,MAAMA,OAA+B;IACjC,OAAO;IACP,WAAWC;IACX,QAAQC,CAAAA,OACG,WAAP,GAAO,oBAACD,WAAcC;AAE9B;AAEA,0BAAeF;AAKf,MAAMG,sBAAsB,CAACC,QAAAA,WAAAA,GACzB,oBAAC;QAAI,WAAU;qBACX,oBAACA,OAAAA;AAIT,MAAMC,kBAAkB,CAACD,QAAAA,WAAAA,GACrB,oBAAC;QAAI,WAAU;qBACX,oBAACA,OAAAA;AAIT,MAAME,eAAe,CAACF,QAAAA,WAAAA,GAClB,oBAAC;QAAI,WAAU;qBACX,oBAACA,OAAAA;AAQT,MAAMG,gBAAgB,CAACC,QACZ,WAAP,GACI,oBAACP,UAAU,IAAI;QAAC,OAAO,CAAC,eAAe,EAAEO,MAAM,KAAK,EAAE;QAAG,GAAGA,KAAK;OAAE;AASpE,MAAMC,UAAiB;IAC1B,MAAM;QACF,UAAU,WAAV,GACI,wDACI,oBAACF,eAAaA;YAAC,OAAO;0BACtB,oBAACA,eAAaA;YAAC,OAAO;0BACtB,oBAACA,eAAaA;YAAC,OAAO;;IAGlC;IACA,YAAY;QAACJ;KAAoB;AACrC;AAEO,MAAMO,mBAA0B;IACnC,GAAGD,OAAO;IACV,MAAM;QACF,SAAS;QACT,UAAU,WAAV,GACI,wDACI,oBAACF,eAAaA;YACV,OAAO;YACP,aAAY;YACZ,oBAAM,oBAACN,UAAU,IAAI,CAAC,IAAI;gBAAC,oBAAM,oBAACU,gBAAWA;gBAAK,OAAO;;0BAE7D,oBAACJ,eAAaA;YACV,OAAO;YACP,aAAY;YACZ,oBAAM,oBAACN,UAAU,IAAI,CAAC,IAAI;gBAAC,oBAAM,oBAACU,gBAAWA;gBAAK,OAAO;;;IAIzE;AACJ;AAEO,MAAMC,mBAA0B;IACnC,GAAGH,OAAO;IACV,MAAM;QACF,SAAS;QACT,UAAU,WAAV,GACI,wDACI,oBAACF,eAAaA;YACV,OAAO;YACP,aAAY;YACZ,oBAAM,oBAACN,UAAU,IAAI,CAAC,IAAI;gBAAC,oBAAM,oBAACU,gBAAWA;gBAAK,OAAO;;0BAE7D,oBAACJ,eAAaA;YACV,OAAO;YACP,aAAY;YACZ,oBAAM,oBAACN,UAAU,IAAI,CAAC,IAAI;gBAAC,oBAAM,oBAACU,gBAAWA;gBAAK,OAAO;;;IAIzE;AACJ;AAEO,MAAME,mCAA0C;IACnD,GAAGJ,OAAO;IACV,MAAM;QACF,SAAS;QACT,QAAQ;QACR,UAAU,WAAV,GACI,wDACI,oBAACF,eAAaA;YACV,OAAO;YACP,aAAY;YACZ,oBAAM,oBAACN,UAAU,IAAI,CAAC,IAAI;gBAAC,oBAAM,oBAACU,gBAAWA;gBAAK,OAAO;;0BAE7D,oBAACJ,eAAaA;YACV,OAAO;YACP,aAAY;YACZ,oBAAM,oBAACN,UAAU,IAAI,CAAC,IAAI;gBAAC,oBAAM,oBAACU,gBAAWA;gBAAK,OAAO;;;IAIzE;AACJ;AAEO,MAAMG,qCAA4C;IACrD,YAAY;QAACT;KAAgB;IAC7B,MAAM;QACF,SAAS;QACT,YAAY;QACZ,UAAU,WAAV,GACI,wDACI,oBAACE,eAAaA;YACV,OAAO;YACP,aAAY;YACZ,oBAAM,oBAACN,UAAU,IAAI,CAAC,IAAI;gBAAC,oBAAM,oBAACU,gBAAWA;gBAAK,OAAO;;0BAE7D,oBAACJ,eAAaA;YACV,OAAO;YACP,aAAY;YACZ,oBAAM,oBAACN,UAAU,IAAI,CAAC,IAAI;gBAAC,oBAAM,oBAACU,gBAAWA;gBAAK,OAAO;;;IAIzE;AACJ;AAEO,MAAMI,kBAAyB;IAClC,GAAGN,OAAO;IACV,MAAM;QACF,YAAY;QACZ,UAAU,WAAV,GACI,wDACI,oBAACF,eAAaA;YACV,OAAO;YACP,aAAY;YACZ,oBAAM,oBAACN,UAAU,IAAI,CAAC,IAAI;gBAAC,oBAAM,oBAACU,gBAAWA;gBAAK,OAAO;;0BAE7D,oBAACJ,eAAaA;YACV,OAAO;YACP,aAAY;YACZ,oBAAM,oBAACN,UAAU,IAAI,CAAC,IAAI;gBAAC,oBAAM,oBAACU,gBAAWA;gBAAK,OAAO;;;IAIzE;AACJ;AAEO,MAAMK,iBAAwB;IACjC,GAAGP,OAAO;IACV,YAAY;QAACH;KAAa;IAC1B,MAAM;QACF,YAAY;QACZ,UAAU,WAAV,GACI,wDACI,oBAACC,eAAaA;YACV,OAAO;YACP,aAAY;YACZ,oBAAM,oBAACN,UAAU,IAAI,CAAC,IAAI;gBAAC,oBAAM,oBAACU,gBAAWA;gBAAK,OAAO;;0BAE7D,oBAACJ,eAAaA;YACV,OAAO;YACP,aAAY;YACZ,oBAAM,oBAACN,UAAU,IAAI,CAAC,IAAI;gBAAC,oBAAM,oBAACU,gBAAWA;gBAAK,OAAO;;;IAIzE;AACJ;AACO,MAAMM,mBAA0B;IACnC,GAAGR,OAAO;IACV,MAAM;QACF,UAAU,WAAV,GACI,wDACI,oBAACF,eAAaA;YACV,OAAO;YACP,aAAY;0BAEhB,oBAACA,eAAaA;YACV,OAAO;YACP,aAAY;0BAEhB,oBAACA,eAAaA;YACV,OAAO;YACP,aAAY;;IAI5B;IACA,UAAU,CAAC;AACf;AACO,MAAMW,gBAAuB;IAChC,GAAGT,OAAO;IACV,MAAM;QACF,UAAU,WAAV,GACI,wDACI,oBAACF,eAAaA;YAAC,OAAO;YAAG,UAAS;0BAClC,oBAACA,eAAaA;YAAC,OAAO;YAAG,UAAS;0BAClC,oBAACA,eAAaA;YAAC,OAAO;YAAG,UAAS;;IAG9C;IACA,UAAU,CAAC;AACf;AAEO,MAAMY,WAAkB;IAC3B,GAAGV,OAAO;IACV,MAAM;QACF,UAAU,WAAV,GACI,wDACI,oBAACF,eAAaA;YACV,OAAO;YACP,aAAY;YACZ,oBAAM,oBAACN,UAAU,IAAI,CAAC,IAAI;gBAAC,oBAAM,oBAACU,gBAAWA;gBAAK,OAAO;;0BAE7D,oBAACJ,eAAaA;YACV,OAAO;YACP,aAAY;YACZ,oBAAM,oBAACN,UAAU,IAAI,CAAC,IAAI;gBAAC,oBAAM,oBAACU,gBAAWA;gBAAK,OAAO;;;IAIzE;AACJ;AAEO,MAAMS,kBAAyB;IAClC,GAAGX,OAAO;IACV,MAAM;QACF,UAAU,WAAV,GACI,wDACI,oBAACF,eAAaA;YACV,OAAO;YACP,aAAY;YACZ,oBAAM,oBAACN,UAAU,IAAI,CAAC,IAAI;gBAAC,oBAAM,oBAACU,gBAAWA;gBAAK,OAAO;;YACzD,uBACI,wDACI,oBAACV,UAAU,IAAI,CAAC,MAAM;gBAAC,oBAAM,oBAACoB,iCAAOA;8BACrC,oBAACpB,UAAU,IAAI,CAAC,MAAM;gBAAC,oBAAM,oBAACqB,mCAASA;8BACvC,oBAACrB,UAAU,IAAI,CAAC,MAAM,CAAC,SAAS,uBAChC,oBAACA,UAAU,IAAI,CAAC,MAAM;gBAAC,oBAAM,oBAACsB,yBAAQA;8BACtC,oBAACtB,UAAU,IAAI,CAAC,MAAM;gBAAC,oBAAM,oBAACuB,2BAASA;;0BAInD,oBAACjB,eAAaA;YACV,OAAO;YACP,aAAY;YACZ,oBAAM,oBAACN,UAAU,IAAI,CAAC,IAAI;gBAAC,oBAAM,oBAACU,gBAAWA;gBAAK,OAAO;;YACzD,uBACI,wDACI,oBAACV,UAAU,IAAI,CAAC,MAAM;gBAAC,oBAAM,oBAACoB,iCAAOA;8BACrC,oBAACpB,UAAU,IAAI,CAAC,MAAM;gBAAC,oBAAM,oBAACqB,mCAASA;8BACvC,oBAACrB,UAAU,IAAI,CAAC,MAAM,CAAC,SAAS,uBAChC,oBAACA,UAAU,IAAI,CAAC,MAAM;gBAAC,oBAAM,oBAACsB,yBAAQA;8BACtC,oBAACtB,UAAU,IAAI,CAAC,MAAM;gBAAC,oBAAM,oBAACuB,2BAASA;;;IAM/D;AACJ;AAEO,MAAMC,oBAA2B;IACpC,GAAGhB,OAAO;IACV,MAAM;QACF,UAAU,WAAV,GACI,wDACI,oBAACF,eAAaA;YACV,OAAO;YACP,aAAY;YACZ,oBAAM,oBAACN,UAAU,IAAI,CAAC,IAAI;gBAAC,oBAAM,oBAACU,gBAAWA;gBAAK,OAAO;;YACzD,WAAW;0BAEf,oBAACJ,eAAaA;YACV,OAAO;YACP,aAAY;YACZ,WAAW;0BAEf,oBAACA,eAAaA;YACV,OAAO;YACP,aAAY;;IAI5B;AACJ;AAEO,MAAMmB,yBAAgC;IACzC,GAAGjB,OAAO;IACV,MAAM;QACF,UAAU,WAAV,GACI,wDACI,oBAACF,eAAaA;YAAC,OAAO;YAAG,aAAY;YAAwB,aAAa;0BAC1E,oBAACA,eAAaA;YAAC,OAAO;0BACtB,oBAACA,eAAaA;YAAC,OAAO;;IAGlC;AACJ;AAEO,MAAMoB,wBAA+B;IACxC,GAAGlB,OAAO;IACV,MAAM;QACF,UAAU,WAAV,GACI,wDACI,oBAACF,eAAaA;YACV,OAAO;YACP,aAAY;0BAEhB,oBAACA,eAAaA;YACV,OAAO;YACP,aAAY;YACZ,aAAa;;IAI7B;AACJ;AAEO,MAAMqB,mBAA0B;IACnC,GAAGnB,OAAO;IACV,MAAM;QACF,UAAU,WAAV,GACI,wDACI,oBAACF,eAAaA;YACV,OAAO;YACP,aAAY;0BAEhB,oBAACA,eAAaA;YACV,OAAO;YACP,aAAY;YACZ,UAAU;0BAEd,oBAACA,eAAaA;YACV,OAAO;YACP,aAAY;YACZ,aAAa;YACb,UAAU;;IAI1B;AACJ;AAEO,MAAMsB,2BAAkC;IAC3C,GAAGpB,OAAO;IACV,QAAQP,CAAAA;QACJ,MAAM,CAAC4B,eAAeC,iBAAiB,GAAGC;QAC1C,MAAM,CAACC,gBAAgBC,kBAAkB,GAAGF;QAC5C,MAAM,CAACG,eAAeC,iBAAiB,GAAGJ;QAE1C,OAAO,WAAP,GACI,wDACI,oBAAC/B,WAAcC,MAAAA,WAAAA,GACX,oBAACK,eAAaA;YACV,OAAO;YACP,aAAY;YACZ,MAAMuB;YACN,cAAcO,CAAAA,OAAQN,iBAAiBM;0BAE3C,oBAAC9B,eAAaA;YACV,OAAO;YACP,aAAY;YACZ,MAAM0B;YACN,cAAcI,CAAAA,OAAQH,kBAAkBG;0BAE5C,oBAAC9B,eAAaA;YACV,OAAO;YACP,aAAY;YACZ,MAAM4B;YACN,cAAcE,CAAAA,OAAQD,iBAAiBC;2BAG/C,oBAAC;YAAI,WAAW;yBACZ,oBAACC,QAAMA;YACH,SAAS,IAAMP,iBAAiB,CAACD;YACjC,MAAM;0BAEV,oBAACQ,QAAMA;YACH,SAAS,IAAMJ,kBAAkB,CAACD;YAClC,MAAM;0BAEV,oBAACK,QAAMA;YACH,SAAS,IAAMF,iBAAiB,CAACD;YACjC,MAAM;;IAK1B;AACJ;AAEO,MAAMI,mBAA0B;IACnC,YAAY;QAAClC;KAAgB;IAC7B,MAAM;IACN,MAAM;QACF,YAAY;QACZ,UAAU,WAAV,GACI,wDACI,oBAACJ,UAAU,IAAI;YACX,OAAM;YACN,aAAY;YACZ,oBAAM,oBAACA,UAAU,IAAI,CAAC,IAAI;gBAAC,oBAAM,oBAACU,gBAAWA;gBAAK,OAAO;;YACzD,uBACI,wDACI,oBAACV,UAAU,IAAI,CAAC,MAAM;gBAAC,oBAAM,oBAACoB,iCAAOA;8BACrC,oBAACpB,UAAU,IAAI,CAAC,MAAM;gBAAC,oBAAM,oBAACqB,mCAASA;8BACvC,oBAACrB,UAAU,IAAI,CAAC,MAAM,CAAC,SAAS,uBAChC,oBAACA,UAAU,IAAI,CAAC,MAAM;gBAAC,oBAAM,oBAACsB,yBAAQA;8BACtC,oBAACtB,UAAU,IAAI,CAAC,MAAM;gBAAC,oBAAM,oBAACuB,2BAASA;;yBAI/C,oBAACvB,WAASA,MAAAA,WAAAA,GACN,oBAACA,UAAU,IAAI;YACX,OAAM;YACN,aAAY;YACZ,oBACI,oBAACA,UAAU,IAAI,CAAC,IAAI;gBAChB,oBAAM,oBAACU,gBAAWA;gBAClB,OAAO;;YAGf,uBACI,wDACI,oBAACV,UAAU,IAAI,CAAC,MAAM;gBAAC,oBAAM,oBAACoB,iCAAOA;8BACrC,oBAACpB,UAAU,IAAI,CAAC,MAAM;gBAAC,oBAAM,oBAACqB,mCAASA;8BACvC,oBAACrB,UAAU,IAAI,CAAC,MAAM,CAAC,SAAS,uBAChC,oBAACA,UAAU,IAAI,CAAC,MAAM;gBAAC,oBAAM,oBAACsB,yBAAQA;8BACtC,oBAACtB,UAAU,IAAI,CAAC,MAAM;gBAAC,oBAAM,oBAACuB,2BAASA;;yBAI/C,oBAACvB,WAASA,MAAAA,WAAAA,GACN,oBAACA,UAAU,IAAI;YACX,OAAM;YACN,aAAY;YACZ,oBACI,oBAACA,UAAU,IAAI,CAAC,IAAI;gBAChB,oBAAM,oBAACU,gBAAWA;gBAClB,OAAO;;YAGf,uBACI,wDACI,oBAACV,UAAU,IAAI,CAAC,MAAM;gBAAC,oBAAM,oBAACoB,iCAAOA;8BACrC,oBAACpB,UAAU,IAAI,CAAC,MAAM;gBAAC,oBAAM,oBAACqB,mCAASA;8BACvC,oBAACrB,UAAU,IAAI,CAAC,MAAM,CAAC,SAAS,uBAChC,oBAACA,UAAU,IAAI,CAAC,MAAM;gBAAC,oBAAM,oBAACsB,yBAAQA;8BACtC,oBAACtB,UAAU,IAAI,CAAC,MAAM;gBAAC,oBAAM,oBAACuB,2BAASA;;yBAI/C,oBAACvB,WAASA,MAAAA,WAAAA,GACN,oBAACA,UAAU,IAAI;YAAC,OAAM;yBAClB,oBAACA,WAASA,MAAAA,WAAAA,GACN,oBAACA,UAAU,IAAI;YAAC,OAAM;WAAU,2BAIpC,oBAACA,WAASA,MAAAA,WAAAA,GACN,oBAACA,UAAU,IAAI;YAAC,OAAM;WAAU,2BAIpC,oBAACA,WAASA,MAAAA,WAAAA,GACN,oBAACA,UAAU,IAAI;YAAC,OAAM;WAAU,+BAQpD,oBAACA,WAASA,MAAAA,WAAAA,GACN,oBAACA,UAAU,IAAI;YAAC,OAAM;WAAU,2BAEpC,oBAACA,WAASA,MAAAA,WAAAA,GACN,oBAACA,UAAU,IAAI;YAAC,OAAM;WAAU,8BAKhD,oBAACA,UAAU,IAAI;YAAC,OAAM;yBAClB,oBAACA,WAASA,MAAAA,WAAAA,GACN,oBAACA,UAAU,IAAI;YACX,OAAM;YACN,aAAY;YACZ,oBACI,oBAACA,UAAU,IAAI,CAAC,IAAI;gBAChB,oBAAM,oBAACU,gBAAWA;gBAClB,OAAO;;YAGf,uBACI,wDACI,oBAACV,UAAU,IAAI,CAAC,MAAM;gBAAC,oBAAM,oBAACoB,iCAAOA;8BACrC,oBAACpB,UAAU,IAAI,CAAC,MAAM;gBAAC,oBAAM,oBAACqB,mCAASA;8BACvC,oBAACrB,UAAU,IAAI,CAAC,MAAM,CAAC,SAAS,uBAChC,oBAACA,UAAU,IAAI,CAAC,MAAM;gBAAC,oBAAM,oBAACsB,yBAAQA;8BACtC,oBAACtB,UAAU,IAAI,CAAC,MAAM;gBAAC,oBAAM,oBAACuB,2BAASA;;yBAI/C,oBAACvB,WAASA,MAAAA,WAAAA,GACN,oBAACA,UAAU,IAAI;YAAC,OAAM;yBAClB,oBAACA,WAASA,MAAAA,WAAAA,GACN,oBAACA,UAAU,IAAI;YAAC,OAAM;yBAClB,oBAACA,WAASA,MAAAA,WAAAA,GACN,oBAACA,UAAU,IAAI;YAAC,OAAM;WAAU,wBAIpC,oBAACA,WAASA,MAAAA,WAAAA,GACN,oBAACA,UAAU,IAAI;YAAC,OAAM;WAAU,wBAIpC,oBAACA,WAASA,MAAAA,WAAAA,GACN,oBAACA,UAAU,IAAI;YAAC,OAAM;WAAU,4BAQpD,oBAACA,WAASA,MAAAA,WAAAA,GACN,oBAACA,UAAU,IAAI;YAAC,OAAM;WAAU,2BAEpC,oBAACA,WAASA,MAAAA,WAAAA,GACN,oBAACA,UAAU,IAAI;YAAC,OAAM;WAAU;IAO5D;AACJ;AAEO,MAAMuC,wBAA+B;IACxC,GAAG/B,OAAO;IACV,MAAM;IACN,MAAM;QACF,YAAY;QACZ,UAAU,WAAV,GACI,wDACI,oBAACR,UAAU,IAAI;YACX,OAAM;YACN,aAAY;YACZ,oBAAM,oBAACA,UAAU,IAAI,CAAC,IAAI;gBAAC,oBAAM,oBAACU,gBAAWA;gBAAK,OAAO;;YACzD,uBACI,wDACI,oBAACV,UAAU,IAAI,CAAC,MAAM;gBAAC,oBAAM,oBAACoB,iCAAOA;8BACrC,oBAACpB,UAAU,IAAI,CAAC,MAAM;gBAAC,oBAAM,oBAACqB,mCAASA;8BACvC,oBAACrB,UAAU,IAAI,CAAC,MAAM,CAAC,SAAS,uBAChC,oBAACA,UAAU,IAAI,CAAC,MAAM;gBAAC,oBAAM,oBAACsB,yBAAQA;8BACtC,oBAACtB,UAAU,IAAI,CAAC,MAAM;gBAAC,oBAAM,oBAACuB,2BAASA;;yBAI/C,oBAACvB,WAASA,MAAAA,WAAAA,GACN,oBAACA,UAAU,IAAI;YACX,OAAM;YACN,aAAY;YACZ,oBACI,oBAACA,UAAU,IAAI,CAAC,IAAI;gBAChB,oBAAM,oBAACU,gBAAWA;gBAClB,OAAO;;YAGf,uBACI,wDACI,oBAACV,UAAU,IAAI,CAAC,MAAM;gBAAC,oBAAM,oBAACoB,iCAAOA;8BACrC,oBAACpB,UAAU,IAAI,CAAC,MAAM;gBAAC,oBAAM,oBAACqB,mCAASA;8BACvC,oBAACrB,UAAU,IAAI,CAAC,MAAM,CAAC,SAAS,uBAChC,oBAACA,UAAU,IAAI,CAAC,MAAM;gBAAC,oBAAM,oBAACsB,yBAAQA;8BACtC,oBAACtB,UAAU,IAAI,CAAC,MAAM;gBAAC,oBAAM,oBAACuB,2BAASA;;yBAI/C,oBAACvB,WAASA,MAAAA,WAAAA,GACN,oBAACA,UAAU,IAAI;YACX,OAAM;YACN,aAAY;YACZ,oBACI,oBAACA,UAAU,IAAI,CAAC,IAAI;gBAChB,oBAAM,oBAACU,gBAAWA;gBAClB,OAAO;;YAGf,uBACI,wDACI,oBAACV,UAAU,IAAI,CAAC,MAAM;gBAAC,oBAAM,oBAACoB,iCAAOA;8BACrC,oBAACpB,UAAU,IAAI,CAAC,MAAM;gBAAC,oBAAM,oBAACqB,mCAASA;8BACvC,oBAACrB,UAAU,IAAI,CAAC,MAAM,CAAC,SAAS,uBAChC,oBAACA,UAAU,IAAI,CAAC,MAAM;gBAAC,oBAAM,oBAACsB,yBAAQA;8BACtC,oBAACtB,UAAU,IAAI,CAAC,MAAM;gBAAC,oBAAM,oBAACuB,2BAASA;;yBAI/C,oBAACvB,WAASA,MAAAA,WAAAA,GACN,oBAACA,UAAU,IAAI;YAAC,OAAM;yBAClB,oBAACA,WAASA,MAAAA,WAAAA,GACN,oBAACA,UAAU,IAAI;YAAC,OAAM;WAAU,2BAIpC,oBAACA,WAASA,MAAAA,WAAAA,GACN,oBAACA,UAAU,IAAI;YAAC,OAAM;WAAU,2BAIpC,oBAACA,WAASA,MAAAA,WAAAA,GACN,oBAACA,UAAU,IAAI;YAAC,OAAM;WAAU,+BAQpD,oBAACA,WAASA,MAAAA,WAAAA,GACN,oBAACA,UAAU,IAAI;YAAC,OAAM;WAAU,2BAEpC,oBAACA,WAASA,MAAAA,WAAAA,GACN,oBAACA,UAAU,IAAI;YAAC,OAAM;WAAU,8BAKhD,oBAACA,UAAU,IAAI;YAAC,OAAM;yBAClB,oBAACA,WAASA,MAAAA,WAAAA,GACN,oBAACA,UAAU,IAAI;YACX,OAAM;YACN,aAAY;YACZ,oBACI,oBAACA,UAAU,IAAI,CAAC,IAAI;gBAChB,oBAAM,oBAACU,gBAAWA;gBAClB,OAAO;;YAGf,uBACI,wDACI,oBAACV,UAAU,IAAI,CAAC,MAAM;gBAAC,oBAAM,oBAACoB,iCAAOA;8BACrC,oBAACpB,UAAU,IAAI,CAAC,MAAM;gBAAC,oBAAM,oBAACqB,mCAASA;8BACvC,oBAACrB,UAAU,IAAI,CAAC,MAAM,CAAC,SAAS,uBAChC,oBAACA,UAAU,IAAI,CAAC,MAAM;gBAAC,oBAAM,oBAACsB,yBAAQA;8BACtC,oBAACtB,UAAU,IAAI,CAAC,MAAM;gBAAC,oBAAM,oBAACuB,2BAASA;;yBAI/C,oBAACvB,WAASA,MAAAA,WAAAA,GACN,oBAACA,UAAU,IAAI;YAAC,OAAM;yBAClB,oBAACA,WAASA,MAAAA,WAAAA,GACN,oBAACA,UAAU,IAAI;YAAC,OAAM;yBAClB,oBAACA,WAASA,MAAAA,WAAAA,GACN,oBAACA,UAAU,IAAI;YAAC,OAAM;WAAU,wBAIpC,oBAACA,WAASA,MAAAA,WAAAA,GACN,oBAACA,UAAU,IAAI;YAAC,OAAM;WAAU,wBAIpC,oBAACA,WAASA,MAAAA,WAAAA,GACN,oBAACA,UAAU,IAAI;YAAC,OAAM;WAAU,4BAQpD,oBAACA,WAASA,MAAAA,WAAAA,GACN,oBAACA,UAAU,IAAI;YAAC,OAAM;WAAU,2BAEpC,oBAACA,WAASA,MAAAA,WAAAA,GACN,oBAACA,UAAU,IAAI;YAAC,OAAM;WAAU;IAO5D;AACJ;AAEO,MAAMwC,gBAAuB;IAChC,GAAGhC,OAAO;IACV,MAAM;QACF,UAAU,WAAV,GACI,wDACI,oBAACF,eAAaA;YACV,WAAW;YACX,OAAO;YACP,aAAY;YACZ,oBAAM,oBAACN,UAAU,IAAI,CAAC,IAAI;gBAAC,oBAAM,oBAACU,gBAAWA;gBAAK,OAAO;;;IAIzE;AACJ;AAEO,MAAM+B,SAAgB;IACzB,GAAGjC,OAAO;IACV,MAAM;QACF,UAAU,WAAV,GACI,wDACI,oBAACF,eAAaA;YACV,OAAO;YACP,QAAQ;YACR,aAAY;YACZ,oBAAM,oBAACN,UAAU,IAAI,CAAC,IAAI;gBAAC,oBAAM,oBAACU,gBAAWA;gBAAK,OAAO;;;IAIzE;AACJ;AAEO,MAAMgC,wBAA+B;IACxC,YAAY;QAACxC;KAAoB;IACjC,MAAM;QACF,SAAS;QACT,6BAA6B;QAC7B,UAAU,WAAV,GACI,wDACI,oBAACI,eAAaA;YACV,OAAO;YACP,aAAY;0BAEhB,oBAACA,eAAaA;YACV,OAAO;YACP,aAAY;0BAEhB,oBAACA,eAAaA;YACV,OAAO;YACP,aAAY;YACZ,uBACI,oBAACN,UAAU,IAAI,CAAC,MAAM;gBAClB,oBAAM,oBAACuB,2BAASA;gBAChB,SAAS,IAAMoB,MAAM;;;IAM7C;AACJ;AAEO,MAAMC,yBAAgC;IACzC,YAAY;QAAC1C;KAAoB;IACjC,MAAM;QACF,SAAS;QACT,6BAA6B;QAC7B,UAAU,WAAV,GACI,wDACI,oBAACI,eAAaA;YACV,OAAO;YACP,aAAY;YACZ,oBAAM,oBAACN,UAAU,IAAI,CAAC,IAAI;gBAAC,oBAAM,oBAACU,gBAAWA;gBAAK,OAAO;;0BAE7D,oBAACJ,eAAaA;YACV,OAAO;YACP,aAAY;YACZ,oBAAM,oBAACN,UAAU,IAAI,CAAC,IAAI;gBAAC,oBAAM,oBAACU,gBAAWA;gBAAK,OAAO;;;IAIzE;AACJ;AAGO,MAAMmC,gBAAuB;IAChC,QAAQ5C,CAAAA,OACG,WAAP,GAAO,oBAACD,WAAcC;IAE1B,MAAM;QACF,SAAS;QACT,UAAU,WAAV,GACI,wDACI,oBAACD,UAAU,IAAI;YACX,OAAM;YACN,aAAY;YACZ,oBAAM,oBAACA,UAAU,IAAI,CAAC,IAAI;gBAAC,oBAAM,oBAACU,gBAAWA;gBAAK,OAAO;;YACzD,uBACI,wDACI,oBAACV,UAAU,IAAI,CAAC,MAAM;gBAAC,oBAAM,oBAACsB,yBAAQA;8BACtC,oBAACtB,UAAU,IAAI,CAAC,MAAM;gBAAC,oBAAM,oBAACuB,2BAASA;;WAGlD,uGAKD,oBAACvB,UAAU,IAAI;YACX,OAAM;YACN,aAAY;YACZ,aAAa;WAChB,2FAID,oBAACA,UAAU,IAAI;YACX,OAAM;YACN,aAAY;YACZ,UAAU;WACb;IAKb;IACA,UAAU;QACN,SAAS;YACL,SAAS;YACT,SAAS;gBAAC;gBAAa;aAAY;YACnC,aAAa;QACjB;QACA,YAAY;YACR,SAAS;YACT,SAAS;gBAAC;gBAAQ;gBAAS;aAAc;YACzC,aAAa;QACjB;QACA,UAAU;YACN,aACI;QACR;IACJ;AACJ"}

package/Alert/Alert.stories.d.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import { Alert } from "./Alert.js";
 declare const meta: Meta<typeof Alert>;
 export default meta;

package/Alert/Alert.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Alert/Alert.stories.js","sources":["../../src/Alert/Alert.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { Alert } from \"./Alert.js\";\nimport React from \"react\";\nimport { ReactComponent as LifeBuoyIcon } from \"@webiny/icons/safety_check.svg\";\n\nconst meta: Meta<typeof Alert> = {\n    title: \"Components/Alert\",\n    component: Alert,\n    argTypes: {},\n    decorators: [\n        Story => (\n            <div className=\"w-[700px]\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Alert>;\n\nexport const Default: Story = {\n    args: {\n        children: \"This is an alert. Play around with different properties to see how it looks.\"\n    },\n    argTypes: {\n        type: {\n            control: \"select\",\n            options: [\"info\", \"success\", \"warning\", \"danger\"]\n        },\n        variant: {\n            control: \"select\",\n            options: [\"strong\", \"subtle\"]\n        }\n    }\n};\n\nexport const Info: Story = {\n    args: {\n        ...Default.args,\n        type: \"info\",\n        children: (\n            <>\n                This type of notification is suitable for general usage where there’s no need for\n                accent. And <a href={\"#\"}>this thing here</a> is a short link.\n            </>\n        )\n    }\n};\n\nexport const InfoStrong: Story = {\n    name: \"Info (strong)\",\n    args: {\n        ...Info.args,\n        variant: \"strong\",\n        children: (\n            <>\n                This type of notification is suitable for general usage where there is a need for\n                strong accent. And <a href={\"#\"}>this thing here</a> is a short link.\n            </>\n        )\n    }\n};\n\nexport const Success: Story = {\n    args: {\n        ...Default.args,\n        type: \"success\",\n        children: (\n            <>\n                This is a success alert, used when something occurred successfully. And{\" \"}\n                <a href={\"#\"}>this thing here</a> is a short link.\n            </>\n        )\n    }\n};\n\nexport const SuccessStrong: Story = {\n    name: \"Success (strong)\",\n    args: {\n        ...Success.args,\n        variant: \"strong\",\n        children: (\n            <>\n                This is a success alert, used when something occurred successfully and needs to be\n                prominent. And <a href={\"#\"}>this thing here</a> is a short link.\n            </>\n        )\n    }\n};\n\nexport const Warning: Story = {\n    args: {\n        ...Default.args,\n        children: (\n            <>\n                This is a warning alert, used when something of strong relevance needs to be\n                communicated. And <a href={\"#\"}>this thing here</a> is a short link.\n            </>\n        ),\n        type: \"warning\"\n    }\n};\n\nexport const WarningStrong: Story = {\n    name: \"Warning (strong)\",\n    args: {\n        ...Warning.args,\n        children: (\n            <>\n                This is a warning alert, used when something of strong relevance needs to be\n                prominently communicated. And <a href={\"#\"}>this thing here</a> is a short link.\n            </>\n        ),\n        variant: \"strong\"\n    }\n};\n\nexport const Danger: Story = {\n    args: {\n        ...Default.args,\n        children: (\n            <>\n                This is a danger alert, used when something critical needs to be communicated. And{\" \"}\n                <a href={\"#\"}>this thing here</a> is a short link.\n            </>\n        ),\n        type: \"danger\"\n    }\n};\n\nexport const DangerStrong: Story = {\n    name: \"Danger (strong)\",\n    args: {\n        ...Danger.args,\n        children: (\n            <>\n                This is a danger alert, used when something critical needs to be prominently\n                communicated. And <a href={\"#\"}>this thing here</a> is a short link.\n            </>\n        ),\n        variant: \"strong\"\n    }\n};\n\nexport const WithCustomIcon: Story = {\n    args: {\n        ...Default.args,\n        children: <>An alert that can be closed.</>,\n        icon: <LifeBuoyIcon />\n    }\n};\n\nexport const WithNoIcon: Story = {\n    args: {\n        ...Default.args,\n        children: <>An alert that can be closed.</>,\n        icon: null\n    }\n};\n\nexport const WithCloseButton: Story = {\n    args: {\n        ...Default.args,\n        children: <>An alert that can be closed.</>,\n        showCloseButton: true,\n        onClose: () => alert(\"Close button clicked.\")\n    }\n};\n\nexport const WithAction: Story = {\n    args: {\n        ...WithCloseButton.args,\n        children: <>An alert that can be closed and also has action button.</>,\n        showCloseButton: true,\n        actions: (\n            <Alert.Action text={\"Button\"} onClick={() => alert(\"Custom action button clicked.\")} />\n        )\n    }\n};\n\nexport const WithSwatchColor: Story = {\n    args: {\n        ...WithCloseButton.args,\n        children: <>An alert that can be closed and also has action button.</>,\n        swatchColor: \"#FF708F\",\n        actions: (\n            <>\n                <Alert.Action\n                    text={\"Reject\"}\n                    onClick={() => alert(\"Custom action button clicked.\")}\n                />\n                <Alert.Action\n                    text={\"Approve\"}\n                    onClick={() => alert(\"Custom action button clicked.\")}\n                />\n            </>\n        )\n    }\n};\n\nexport const WithSwatchColorNoIcon: Story = {\n    name: \"With Swatch Color & No Icon\",\n    args: {\n        ...WithCloseButton.args,\n        children: <>An alert that can be closed and also has action button.</>,\n        swatchColor: \"#2AABF6\",\n        icon: null,\n        actions: (\n            <>\n                <Alert.Action\n                    text={\"Reject\"}\n                    onClick={() => alert(\"Custom action button clicked.\")}\n                />\n                <Alert.Action\n                    text={\"Approve\"}\n                    onClick={() => alert(\"Custom action button clicked.\")}\n                />\n            </>\n        )\n    }\n};\nexport const WithSwatchColorNoSwatchIcon: Story = {\n    name: \"With Swatch Color & No Swatch Icon\",\n    args: {\n        ...WithCloseButton.args,\n        children: <>An alert that can be closed and also has action button.</>,\n        swatchColor: \"#BDDE46\",\n        swatchColorIcon: false,\n        actions: (\n            <>\n                <Alert.Action\n                    text={\"Reject\"}\n                    onClick={() => alert(\"Custom action button clicked.\")}\n                />\n                <Alert.Action\n                    text={\"Approve\"}\n                    onClick={() => alert(\"Custom action button clicked.\")}\n                />\n            </>\n        )\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        type: \"info\",\n        variant: \"subtle\",\n        showCloseButton: false,\n        children: (\n            <>\n                This type of notification is suitable for general usage where there’s no need for\n                accent. And <a href={\"#\"}>this thing here</a> is a short link.\n            </>\n        ),\n        onClose: () => {},\n        actions: undefined\n    },\n    argTypes: {\n        type: {\n            description: \"Type\",\n            control: \"select\",\n            options: [\"info\", \"success\", \"warning\", \"danger\"],\n            defaultValue: \"info\"\n        },\n        variant: {\n            description: \"Variant\",\n            control: \"select\",\n            options: [\"subtle\", \"strong\"],\n            defaultValue: \"subtle\"\n        },\n        showCloseButton: {\n            description:\n                \"Show close button, please refer to the 'With Close Button' example below for details.\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        onClose: {\n            description: \"Please refer to the 'With Close Button' example below for details.\"\n        },\n        actions: {\n            description: \"Please refer to the 'With Action' example below for details.\"\n        }\n    }\n};\n"],"names":["meta","Alert","Story","Default","Info","InfoStrong","Success","SuccessStrong","Warning","WarningStrong","Danger","DangerStrong","WithCustomIcon","LifeBuoyIcon","WithNoIcon","WithCloseButton","alert","WithAction","WithSwatchColor","WithSwatchColorNoIcon","WithSwatchColorNoSwatchIcon","Documentation","undefined"],"mappings":";;;AAKA,MAAMA,OAA2B;IAC7B,OAAO;IACP,WAAWC;IACX,UAAU,CAAC;IACX,YAAY;QACRC,CAAAA,QAAAA,WAAAA,GACI,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;AACL;AAEA,sBAAeF;AAIR,MAAMG,UAAiB;IAC1B,MAAM;QACF,UAAU;IACd;IACA,UAAU;QACN,MAAM;YACF,SAAS;YACT,SAAS;gBAAC;gBAAQ;gBAAW;gBAAW;aAAS;QACrD;QACA,SAAS;YACL,SAAS;YACT,SAAS;gBAAC;gBAAU;aAAS;QACjC;IACJ;AACJ;AAEO,MAAMC,OAAc;IACvB,MAAM;QACF,GAAGD,QAAQ,IAAI;QACf,MAAM;QACN,UAAU,WAAV,GACI,0CAAE,gHAEc,oBAAC;YAAE,MAAM;WAAK,oBAAmB;IAGzD;AACJ;AAEO,MAAME,aAAoB;IAC7B,MAAM;IACN,MAAM;QACF,GAAGD,KAAK,IAAI;QACZ,SAAS;QACT,UAAU,WAAV,GACI,0CAAE,uHAEqB,oBAAC;YAAE,MAAM;WAAK,oBAAmB;IAGhE;AACJ;AAEO,MAAME,UAAiB;IAC1B,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,MAAM;QACN,UAAU,WAAV,GACI,0CAAE,2EAC0E,mBACxE,oBAAC;YAAE,MAAM;WAAK,oBAAmB;IAG7C;AACJ;AAEO,MAAMI,gBAAuB;IAChC,MAAM;IACN,MAAM;QACF,GAAGD,QAAQ,IAAI;QACf,SAAS;QACT,UAAU,WAAV,GACI,0CAAE,oHAEiB,oBAAC;YAAE,MAAM;WAAK,oBAAmB;IAG5D;AACJ;AAEO,MAAME,UAAiB;IAC1B,MAAM;QACF,GAAGL,QAAQ,IAAI;QACf,UAAU,WAAV,GACI,0CAAE,iHAEoB,oBAAC;YAAE,MAAM;WAAK,oBAAmB;QAG3D,MAAM;IACV;AACJ;AAEO,MAAMM,gBAAuB;IAChC,MAAM;IACN,MAAM;QACF,GAAGD,QAAQ,IAAI;QACf,UAAU,WAAV,GACI,0CAAE,6HAEgC,oBAAC;YAAE,MAAM;WAAK,oBAAmB;QAGvE,SAAS;IACb;AACJ;AAEO,MAAME,SAAgB;IACzB,MAAM;QACF,GAAGP,QAAQ,IAAI;QACf,UAAU,WAAV,GACI,0CAAE,sFACqF,mBACnF,oBAAC;YAAE,MAAM;WAAK,oBAAmB;QAGzC,MAAM;IACV;AACJ;AAEO,MAAMQ,eAAsB;IAC/B,MAAM;IACN,MAAM;QACF,GAAGD,OAAO,IAAI;QACd,UAAU,WAAV,GACI,0CAAE,iHAEoB,oBAAC;YAAE,MAAM;WAAK,oBAAmB;QAG3D,SAAS;IACb;AACJ;AAEO,MAAME,iBAAwB;IACjC,MAAM;QACF,GAAGT,QAAQ,IAAI;QACf,UAAU,WAAV,GAAU,0CAAE;QACZ,MAAM,WAAN,GAAM,oBAACU,gBAAYA;IACvB;AACJ;AAEO,MAAMC,aAAoB;IAC7B,MAAM;QACF,GAAGX,QAAQ,IAAI;QACf,UAAU,WAAV,GAAU,0CAAE;QACZ,MAAM;IACV;AACJ;AAEO,MAAMY,kBAAyB;IAClC,MAAM;QACF,GAAGZ,QAAQ,IAAI;QACf,UAAU,WAAV,GAAU,0CAAE;QACZ,iBAAiB;QACjB,SAAS,IAAMa,MAAM;IACzB;AACJ;AAEO,MAAMC,aAAoB;IAC7B,MAAM;QACF,GAAGF,gBAAgB,IAAI;QACvB,UAAU,WAAV,GAAU,0CAAE;QACZ,iBAAiB;QACjB,SAAS,WAAT,GACI,oBAACd,MAAM,MAAM;YAAC,MAAM;YAAU,SAAS,IAAMe,MAAM;;IAE3D;AACJ;AAEO,MAAME,kBAAyB;IAClC,MAAM;QACF,GAAGH,gBAAgB,IAAI;QACvB,UAAU,WAAV,GAAU,0CAAE;QACZ,aAAa;QACb,SAAS,WAAT,GACI,wDACI,oBAACd,MAAM,MAAM;YACT,MAAM;YACN,SAAS,IAAMe,MAAM;0BAEzB,oBAACf,MAAM,MAAM;YACT,MAAM;YACN,SAAS,IAAMe,MAAM;;IAIrC;AACJ;AAEO,MAAMG,wBAA+B;IACxC,MAAM;IACN,MAAM;QACF,GAAGJ,gBAAgB,IAAI;QACvB,UAAU,WAAV,GAAU,0CAAE;QACZ,aAAa;QACb,MAAM;QACN,SAAS,WAAT,GACI,wDACI,oBAACd,MAAM,MAAM;YACT,MAAM;YACN,SAAS,IAAMe,MAAM;0BAEzB,oBAACf,MAAM,MAAM;YACT,MAAM;YACN,SAAS,IAAMe,MAAM;;IAIrC;AACJ;AACO,MAAMI,8BAAqC;IAC9C,MAAM;IACN,MAAM;QACF,GAAGL,gBAAgB,IAAI;QACvB,UAAU,WAAV,GAAU,0CAAE;QACZ,aAAa;QACb,iBAAiB;QACjB,SAAS,WAAT,GACI,wDACI,oBAACd,MAAM,MAAM;YACT,MAAM;YACN,SAAS,IAAMe,MAAM;0BAEzB,oBAACf,MAAM,MAAM;YACT,MAAM;YACN,SAAS,IAAMe,MAAM;;IAIrC;AACJ;AAEO,MAAMK,gBAAuB;IAChC,MAAM;QACF,MAAM;QACN,SAAS;QACT,iBAAiB;QACjB,UAAU,WAAV,GACI,0CAAE,gHAEc,oBAAC;YAAE,MAAM;WAAK,oBAAmB;QAGrD,SAAS,KAAO;QAChB,SAASC;IACb;IACA,UAAU;QACN,MAAM;YACF,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAQ;gBAAW;gBAAW;aAAS;YACjD,cAAc;QAClB;QACA,SAAS;YACL,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAU;aAAS;YAC7B,cAAc;QAClB;QACA,iBAAiB;YACb,aACI;YACJ,SAAS;YACT,cAAc;QAClB;QACA,SAAS;YACL,aAAa;QACjB;QACA,SAAS;YACL,aAAa;QACjB;IACJ;AACJ"}
+{"version":3,"file":"Alert/Alert.stories.js","sources":["../../src/Alert/Alert.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport { Alert } from \"./Alert.js\";\nimport React from \"react\";\nimport { ReactComponent as LifeBuoyIcon } from \"@webiny/icons/safety_check.svg\";\n\nconst meta: Meta<typeof Alert> = {\n    title: \"Components/Alert\",\n    component: Alert,\n    argTypes: {},\n    decorators: [\n        Story => (\n            <div className=\"w-[700px]\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Alert>;\n\nexport const Default: Story = {\n    args: {\n        children: \"This is an alert. Play around with different properties to see how it looks.\"\n    },\n    argTypes: {\n        type: {\n            control: \"select\",\n            options: [\"info\", \"success\", \"warning\", \"danger\"]\n        },\n        variant: {\n            control: \"select\",\n            options: [\"strong\", \"subtle\"]\n        }\n    }\n};\n\nexport const Info: Story = {\n    args: {\n        ...Default.args,\n        type: \"info\",\n        children: (\n            <>\n                This type of notification is suitable for general usage where there’s no need for\n                accent. And <a href={\"#\"}>this thing here</a> is a short link.\n            </>\n        )\n    }\n};\n\nexport const InfoStrong: Story = {\n    name: \"Info (strong)\",\n    args: {\n        ...Info.args,\n        variant: \"strong\",\n        children: (\n            <>\n                This type of notification is suitable for general usage where there is a need for\n                strong accent. And <a href={\"#\"}>this thing here</a> is a short link.\n            </>\n        )\n    }\n};\n\nexport const Success: Story = {\n    args: {\n        ...Default.args,\n        type: \"success\",\n        children: (\n            <>\n                This is a success alert, used when something occurred successfully. And{\" \"}\n                <a href={\"#\"}>this thing here</a> is a short link.\n            </>\n        )\n    }\n};\n\nexport const SuccessStrong: Story = {\n    name: \"Success (strong)\",\n    args: {\n        ...Success.args,\n        variant: \"strong\",\n        children: (\n            <>\n                This is a success alert, used when something occurred successfully and needs to be\n                prominent. And <a href={\"#\"}>this thing here</a> is a short link.\n            </>\n        )\n    }\n};\n\nexport const Warning: Story = {\n    args: {\n        ...Default.args,\n        children: (\n            <>\n                This is a warning alert, used when something of strong relevance needs to be\n                communicated. And <a href={\"#\"}>this thing here</a> is a short link.\n            </>\n        ),\n        type: \"warning\"\n    }\n};\n\nexport const WarningStrong: Story = {\n    name: \"Warning (strong)\",\n    args: {\n        ...Warning.args,\n        children: (\n            <>\n                This is a warning alert, used when something of strong relevance needs to be\n                prominently communicated. And <a href={\"#\"}>this thing here</a> is a short link.\n            </>\n        ),\n        variant: \"strong\"\n    }\n};\n\nexport const Danger: Story = {\n    args: {\n        ...Default.args,\n        children: (\n            <>\n                This is a danger alert, used when something critical needs to be communicated. And{\" \"}\n                <a href={\"#\"}>this thing here</a> is a short link.\n            </>\n        ),\n        type: \"danger\"\n    }\n};\n\nexport const DangerStrong: Story = {\n    name: \"Danger (strong)\",\n    args: {\n        ...Danger.args,\n        children: (\n            <>\n                This is a danger alert, used when something critical needs to be prominently\n                communicated. And <a href={\"#\"}>this thing here</a> is a short link.\n            </>\n        ),\n        variant: \"strong\"\n    }\n};\n\nexport const WithCustomIcon: Story = {\n    args: {\n        ...Default.args,\n        children: <>An alert that can be closed.</>,\n        icon: <LifeBuoyIcon />\n    }\n};\n\nexport const WithNoIcon: Story = {\n    args: {\n        ...Default.args,\n        children: <>An alert that can be closed.</>,\n        icon: null\n    }\n};\n\nexport const WithCloseButton: Story = {\n    args: {\n        ...Default.args,\n        children: <>An alert that can be closed.</>,\n        showCloseButton: true,\n        onClose: () => alert(\"Close button clicked.\")\n    }\n};\n\nexport const WithAction: Story = {\n    args: {\n        ...WithCloseButton.args,\n        children: <>An alert that can be closed and also has action button.</>,\n        showCloseButton: true,\n        actions: (\n            <Alert.Action text={\"Button\"} onClick={() => alert(\"Custom action button clicked.\")} />\n        )\n    }\n};\n\nexport const WithSwatchColor: Story = {\n    args: {\n        ...WithCloseButton.args,\n        children: <>An alert that can be closed and also has action button.</>,\n        swatchColor: \"#FF708F\",\n        actions: (\n            <>\n                <Alert.Action\n                    text={\"Reject\"}\n                    onClick={() => alert(\"Custom action button clicked.\")}\n                />\n                <Alert.Action\n                    text={\"Approve\"}\n                    onClick={() => alert(\"Custom action button clicked.\")}\n                />\n            </>\n        )\n    }\n};\n\nexport const WithSwatchColorNoIcon: Story = {\n    name: \"With Swatch Color & No Icon\",\n    args: {\n        ...WithCloseButton.args,\n        children: <>An alert that can be closed and also has action button.</>,\n        swatchColor: \"#2AABF6\",\n        icon: null,\n        actions: (\n            <>\n                <Alert.Action\n                    text={\"Reject\"}\n                    onClick={() => alert(\"Custom action button clicked.\")}\n                />\n                <Alert.Action\n                    text={\"Approve\"}\n                    onClick={() => alert(\"Custom action button clicked.\")}\n                />\n            </>\n        )\n    }\n};\nexport const WithSwatchColorNoSwatchIcon: Story = {\n    name: \"With Swatch Color & No Swatch Icon\",\n    args: {\n        ...WithCloseButton.args,\n        children: <>An alert that can be closed and also has action button.</>,\n        swatchColor: \"#BDDE46\",\n        swatchColorIcon: false,\n        actions: (\n            <>\n                <Alert.Action\n                    text={\"Reject\"}\n                    onClick={() => alert(\"Custom action button clicked.\")}\n                />\n                <Alert.Action\n                    text={\"Approve\"}\n                    onClick={() => alert(\"Custom action button clicked.\")}\n                />\n            </>\n        )\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        type: \"info\",\n        variant: \"subtle\",\n        showCloseButton: false,\n        children: (\n            <>\n                This type of notification is suitable for general usage where there’s no need for\n                accent. And <a href={\"#\"}>this thing here</a> is a short link.\n            </>\n        ),\n        onClose: () => {},\n        actions: undefined\n    },\n    argTypes: {\n        type: {\n            description: \"Type\",\n            control: \"select\",\n            options: [\"info\", \"success\", \"warning\", \"danger\"],\n            defaultValue: \"info\"\n        },\n        variant: {\n            description: \"Variant\",\n            control: \"select\",\n            options: [\"subtle\", \"strong\"],\n            defaultValue: \"subtle\"\n        },\n        showCloseButton: {\n            description:\n                \"Show close button, please refer to the 'With Close Button' example below for details.\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        onClose: {\n            description: \"Please refer to the 'With Close Button' example below for details.\"\n        },\n        actions: {\n            description: \"Please refer to the 'With Action' example below for details.\"\n        }\n    }\n};\n"],"names":["meta","Alert","Story","Default","Info","InfoStrong","Success","SuccessStrong","Warning","WarningStrong","Danger","DangerStrong","WithCustomIcon","LifeBuoyIcon","WithNoIcon","WithCloseButton","alert","WithAction","WithSwatchColor","WithSwatchColorNoIcon","WithSwatchColorNoSwatchIcon","Documentation","undefined"],"mappings":";;;AAKA,MAAMA,OAA2B;IAC7B,OAAO;IACP,WAAWC;IACX,UAAU,CAAC;IACX,YAAY;QACRC,CAAAA,QAAAA,WAAAA,GACI,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;AACL;AAEA,sBAAeF;AAIR,MAAMG,UAAiB;IAC1B,MAAM;QACF,UAAU;IACd;IACA,UAAU;QACN,MAAM;YACF,SAAS;YACT,SAAS;gBAAC;gBAAQ;gBAAW;gBAAW;aAAS;QACrD;QACA,SAAS;YACL,SAAS;YACT,SAAS;gBAAC;gBAAU;aAAS;QACjC;IACJ;AACJ;AAEO,MAAMC,OAAc;IACvB,MAAM;QACF,GAAGD,QAAQ,IAAI;QACf,MAAM;QACN,UAAU,WAAV,GACI,0CAAE,gHAEc,oBAAC;YAAE,MAAM;WAAK,oBAAmB;IAGzD;AACJ;AAEO,MAAME,aAAoB;IAC7B,MAAM;IACN,MAAM;QACF,GAAGD,KAAK,IAAI;QACZ,SAAS;QACT,UAAU,WAAV,GACI,0CAAE,uHAEqB,oBAAC;YAAE,MAAM;WAAK,oBAAmB;IAGhE;AACJ;AAEO,MAAME,UAAiB;IAC1B,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,MAAM;QACN,UAAU,WAAV,GACI,0CAAE,2EAC0E,mBACxE,oBAAC;YAAE,MAAM;WAAK,oBAAmB;IAG7C;AACJ;AAEO,MAAMI,gBAAuB;IAChC,MAAM;IACN,MAAM;QACF,GAAGD,QAAQ,IAAI;QACf,SAAS;QACT,UAAU,WAAV,GACI,0CAAE,oHAEiB,oBAAC;YAAE,MAAM;WAAK,oBAAmB;IAG5D;AACJ;AAEO,MAAME,UAAiB;IAC1B,MAAM;QACF,GAAGL,QAAQ,IAAI;QACf,UAAU,WAAV,GACI,0CAAE,iHAEoB,oBAAC;YAAE,MAAM;WAAK,oBAAmB;QAG3D,MAAM;IACV;AACJ;AAEO,MAAMM,gBAAuB;IAChC,MAAM;IACN,MAAM;QACF,GAAGD,QAAQ,IAAI;QACf,UAAU,WAAV,GACI,0CAAE,6HAEgC,oBAAC;YAAE,MAAM;WAAK,oBAAmB;QAGvE,SAAS;IACb;AACJ;AAEO,MAAME,SAAgB;IACzB,MAAM;QACF,GAAGP,QAAQ,IAAI;QACf,UAAU,WAAV,GACI,0CAAE,sFACqF,mBACnF,oBAAC;YAAE,MAAM;WAAK,oBAAmB;QAGzC,MAAM;IACV;AACJ;AAEO,MAAMQ,eAAsB;IAC/B,MAAM;IACN,MAAM;QACF,GAAGD,OAAO,IAAI;QACd,UAAU,WAAV,GACI,0CAAE,iHAEoB,oBAAC;YAAE,MAAM;WAAK,oBAAmB;QAG3D,SAAS;IACb;AACJ;AAEO,MAAME,iBAAwB;IACjC,MAAM;QACF,GAAGT,QAAQ,IAAI;QACf,UAAU,WAAV,GAAU,0CAAE;QACZ,MAAM,WAAN,GAAM,oBAACU,gBAAYA;IACvB;AACJ;AAEO,MAAMC,aAAoB;IAC7B,MAAM;QACF,GAAGX,QAAQ,IAAI;QACf,UAAU,WAAV,GAAU,0CAAE;QACZ,MAAM;IACV;AACJ;AAEO,MAAMY,kBAAyB;IAClC,MAAM;QACF,GAAGZ,QAAQ,IAAI;QACf,UAAU,WAAV,GAAU,0CAAE;QACZ,iBAAiB;QACjB,SAAS,IAAMa,MAAM;IACzB;AACJ;AAEO,MAAMC,aAAoB;IAC7B,MAAM;QACF,GAAGF,gBAAgB,IAAI;QACvB,UAAU,WAAV,GAAU,0CAAE;QACZ,iBAAiB;QACjB,SAAS,WAAT,GACI,oBAACd,MAAM,MAAM;YAAC,MAAM;YAAU,SAAS,IAAMe,MAAM;;IAE3D;AACJ;AAEO,MAAME,kBAAyB;IAClC,MAAM;QACF,GAAGH,gBAAgB,IAAI;QACvB,UAAU,WAAV,GAAU,0CAAE;QACZ,aAAa;QACb,SAAS,WAAT,GACI,wDACI,oBAACd,MAAM,MAAM;YACT,MAAM;YACN,SAAS,IAAMe,MAAM;0BAEzB,oBAACf,MAAM,MAAM;YACT,MAAM;YACN,SAAS,IAAMe,MAAM;;IAIrC;AACJ;AAEO,MAAMG,wBAA+B;IACxC,MAAM;IACN,MAAM;QACF,GAAGJ,gBAAgB,IAAI;QACvB,UAAU,WAAV,GAAU,0CAAE;QACZ,aAAa;QACb,MAAM;QACN,SAAS,WAAT,GACI,wDACI,oBAACd,MAAM,MAAM;YACT,MAAM;YACN,SAAS,IAAMe,MAAM;0BAEzB,oBAACf,MAAM,MAAM;YACT,MAAM;YACN,SAAS,IAAMe,MAAM;;IAIrC;AACJ;AACO,MAAMI,8BAAqC;IAC9C,MAAM;IACN,MAAM;QACF,GAAGL,gBAAgB,IAAI;QACvB,UAAU,WAAV,GAAU,0CAAE;QACZ,aAAa;QACb,iBAAiB;QACjB,SAAS,WAAT,GACI,wDACI,oBAACd,MAAM,MAAM;YACT,MAAM;YACN,SAAS,IAAMe,MAAM;0BAEzB,oBAACf,MAAM,MAAM;YACT,MAAM;YACN,SAAS,IAAMe,MAAM;;IAIrC;AACJ;AAEO,MAAMK,gBAAuB;IAChC,MAAM;QACF,MAAM;QACN,SAAS;QACT,iBAAiB;QACjB,UAAU,WAAV,GACI,0CAAE,gHAEc,oBAAC;YAAE,MAAM;WAAK,oBAAmB;QAGrD,SAAS,KAAO;QAChB,SAASC;IACb;IACA,UAAU;QACN,MAAM;YACF,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAQ;gBAAW;gBAAW;aAAS;YACjD,cAAc;QAClB;QACA,SAAS;YACL,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAU;aAAS;YAC7B,cAAc;QAClB;QACA,iBAAiB;YACb,aACI;YACJ,SAAS;YACT,cAAc;QAClB;QACA,SAAS;YACL,aAAa;QACjB;QACA,SAAS;YACL,aAAa;QACjB;IACJ;AACJ"}

package/AutoComplete/AutoComplete.stories.d.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import { AutoComplete } from "./AutoComplete.js";
 declare const meta: Meta<typeof AutoComplete>;
 export default meta;

package/AutoComplete/AutoComplete.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"AutoComplete/AutoComplete.stories.js","sources":["../../src/AutoComplete/AutoComplete.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { AutoComplete } from \"./AutoComplete.js\";\n\nconst meta: Meta<typeof AutoComplete> = {\n    title: \"Components/Form/AutoComplete\",\n    component: AutoComplete,\n    argTypes: {\n        onValueChange: { action: \"onValueChange\" }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return <AutoComplete {...args} value={value} onValueChange={setValue} />;\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof AutoComplete>;\n\nexport const Default: Story = {\n    args: {\n        options: [\n            \"Eastern Standard Time (EST)\",\n            \"Central Standard Time (CST)\",\n            \"Pacific Standard Time (PST)\",\n            \"Greenwich Mean Time (GMT)\",\n            \"Central European Time (CET)\",\n            \"Central Africa Time (CAT)\",\n            \"India Standard Time (IST)\",\n            \"China Standard Time (CST)\",\n            \"Japan Standard Time (JST)\",\n            \"Australian Western Standard Time (AWST)\",\n            \"New Zealand Standard Time (NZST)\",\n            \"Fiji Time (FJT)\",\n            \"Argentina Time (ART)\",\n            \"Bolivia Time (BOT)\",\n            \"Brasilia Time (BRT)\"\n        ]\n    }\n};\n\nexport const WithLabel: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const WithRequiredLabel: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        ...Default.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const WithNotes: Story = {\n    args: {\n        ...Default.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const WithErrors: Story = {\n    args: {\n        ...Default.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const FullExample: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        required: true,\n        description: \"Provide the required information for processing your request.\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const OnValueChange: Story = {\n    args: {\n        options: [\n            \"Eastern Standard Time (EST)\",\n            \"Central Standard Time (CST)\",\n            \"Pacific Standard Time (PST)\",\n            \"Greenwich Mean Time (GMT)\"\n        ],\n        label: \"Time Zone\",\n        onValueChange: value => {\n            console.log(\"User selected Time zone:\", value);\n        }\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        const [value, setValue] = useState(args.value || \"\");\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        // Update value when args.value changes\n        useEffect(() => {\n            setValue(args.value || \"\");\n        }, [args.value]);\n\n        const handleValueChange = (newValue: string) => {\n            setValue(newValue);\n\n            // Simple required validation\n            if (!newValue && args.required) {\n                setValidation({ isValid: false, message: \"This field is required\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        };\n\n        // Validate on required change\n        useEffect(() => {\n            if (args.required && !value) {\n                setValidation({ isValid: false, message: \"This field is required\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        }, [args.required, value]);\n\n        return (\n            <AutoComplete\n                {...args}\n                value={value}\n                onValueChange={handleValueChange}\n                validation={validation}\n            />\n        );\n    },\n    args: {\n        options: [\n            \"Eastern Standard Time (EST)\",\n            \"Central Standard Time (CST)\",\n            \"Pacific Standard Time (PST)\",\n            \"Greenwich Mean Time (GMT)\"\n        ],\n        label: \"Time Zone\",\n        required: true,\n        description: \"Select your timezone from the list\",\n        placeholder: \"Select timezone...\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        },\n        onValueChange: undefined\n    },\n    argTypes: {\n        options: {\n            description:\n                \"AutoComplete Options - Please refer to the example code for details on usage.\"\n        },\n        label: {\n            description: \"Label text for the autocomplete field\",\n            control: \"text\"\n        },\n        required: {\n            description: \"Makes the field required when set to true\",\n            control: \"boolean\"\n        },\n        description: {\n            description: \"Additional description text below the field\",\n            control: \"text\"\n        },\n        placeholder: {\n            description: \"Placeholder text shown when no value is selected\",\n            control: \"text\"\n        },\n        validation: {\n            description: \"Object containing validation state and message\"\n        },\n        onValueChange: {\n            description: \"Function called when the selected value changes\"\n        }\n    }\n};\n"],"names":["meta","AutoComplete","args","value","setValue","useState","Default","WithLabel","WithRequiredLabel","WithDescription","WithNotes","WithErrors","Disabled","FullExample","OnValueChange","console","Documentation","validation","setValidation","useEffect","handleValueChange","newValue","undefined"],"mappings":"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"}
+{"version":3,"file":"AutoComplete/AutoComplete.stories.js","sources":["../../src/AutoComplete/AutoComplete.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { AutoComplete } from \"./AutoComplete.js\";\n\nconst meta: Meta<typeof AutoComplete> = {\n    title: \"Components/Form/AutoComplete\",\n    component: AutoComplete,\n    argTypes: {\n        onValueChange: { action: \"onValueChange\" }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return <AutoComplete {...args} value={value} onValueChange={setValue} />;\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof AutoComplete>;\n\nexport const Default: Story = {\n    args: {\n        options: [\n            \"Eastern Standard Time (EST)\",\n            \"Central Standard Time (CST)\",\n            \"Pacific Standard Time (PST)\",\n            \"Greenwich Mean Time (GMT)\",\n            \"Central European Time (CET)\",\n            \"Central Africa Time (CAT)\",\n            \"India Standard Time (IST)\",\n            \"China Standard Time (CST)\",\n            \"Japan Standard Time (JST)\",\n            \"Australian Western Standard Time (AWST)\",\n            \"New Zealand Standard Time (NZST)\",\n            \"Fiji Time (FJT)\",\n            \"Argentina Time (ART)\",\n            \"Bolivia Time (BOT)\",\n            \"Brasilia Time (BRT)\"\n        ]\n    }\n};\n\nexport const WithLabel: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const WithRequiredLabel: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        ...Default.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const WithNotes: Story = {\n    args: {\n        ...Default.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const WithErrors: Story = {\n    args: {\n        ...Default.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const FullExample: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        required: true,\n        description: \"Provide the required information for processing your request.\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const OnValueChange: Story = {\n    args: {\n        options: [\n            \"Eastern Standard Time (EST)\",\n            \"Central Standard Time (CST)\",\n            \"Pacific Standard Time (PST)\",\n            \"Greenwich Mean Time (GMT)\"\n        ],\n        label: \"Time Zone\",\n        onValueChange: value => {\n            console.log(\"User selected Time zone:\", value);\n        }\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        const [value, setValue] = useState(args.value || \"\");\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        // Update value when args.value changes\n        useEffect(() => {\n            setValue(args.value || \"\");\n        }, [args.value]);\n\n        const handleValueChange = (newValue: string) => {\n            setValue(newValue);\n\n            // Simple required validation\n            if (!newValue && args.required) {\n                setValidation({ isValid: false, message: \"This field is required\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        };\n\n        // Validate on required change\n        useEffect(() => {\n            if (args.required && !value) {\n                setValidation({ isValid: false, message: \"This field is required\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        }, [args.required, value]);\n\n        return (\n            <AutoComplete\n                {...args}\n                value={value}\n                onValueChange={handleValueChange}\n                validation={validation}\n            />\n        );\n    },\n    args: {\n        options: [\n            \"Eastern Standard Time (EST)\",\n            \"Central Standard Time (CST)\",\n            \"Pacific Standard Time (PST)\",\n            \"Greenwich Mean Time (GMT)\"\n        ],\n        label: \"Time Zone\",\n        required: true,\n        description: \"Select your timezone from the list\",\n        placeholder: \"Select timezone...\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        },\n        onValueChange: undefined\n    },\n    argTypes: {\n        options: {\n            description:\n                \"AutoComplete Options - Please refer to the example code for details on usage.\"\n        },\n        label: {\n            description: \"Label text for the autocomplete field\",\n            control: \"text\"\n        },\n        required: {\n            description: \"Makes the field required when set to true\",\n            control: \"boolean\"\n        },\n        description: {\n            description: \"Additional description text below the field\",\n            control: \"text\"\n        },\n        placeholder: {\n            description: \"Placeholder text shown when no value is selected\",\n            control: \"text\"\n        },\n        validation: {\n            description: \"Object containing validation state and message\"\n        },\n        onValueChange: {\n            description: \"Function called when the selected value changes\"\n        }\n    }\n};\n"],"names":["meta","AutoComplete","args","value","setValue","useState","Default","WithLabel","WithRequiredLabel","WithDescription","WithNotes","WithErrors","Disabled","FullExample","OnValueChange","console","Documentation","validation","setValidation","useEffect","handleValueChange","newValue","undefined"],"mappings":"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"}

package/AutoComplete/primitives/AutoCompletePrimitive.stories.d.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import { AutoCompletePrimitive } from "./AutoCompletePrimitive.js";
 declare const meta: Meta<typeof AutoCompletePrimitive>;
 export default meta;

package/AutoComplete/primitives/AutoCompletePrimitive.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"AutoComplete/primitives/AutoCompletePrimitive.stories.js","sources":["../../../src/AutoComplete/primitives/AutoCompletePrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { ReactComponent as SearchIcon } from \"@webiny/icons/search.svg\";\nimport { AutoCompletePrimitive } from \"./AutoCompletePrimitive.js\";\nimport { Button } from \"~/Button/index.js\";\nimport { Icon } from \"~/Icon/index.js\";\n\nconst meta: Meta<typeof AutoCompletePrimitive> = {\n    title: \"Components/Form Primitives/Autocomplete\",\n    component: AutoCompletePrimitive,\n    parameters: {\n        layout: \"padded\"\n    },\n    argTypes: {\n        onValueChange: { action: \"onValueChange\" },\n        onOpenChange: { action: \"onOpenChange\" }\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return (\n            <div className={\"w-full\"}>\n                <AutoCompletePrimitive {...args} value={value} onValueChange={setValue} />\n                <div className={\"mt-4 text-center\"}>\n                    Current selected value: <pre>{value}</pre>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof AutoCompletePrimitive>;\n\nexport const Default: Story = {\n    args: {\n        options: [\n            \"Eastern Standard Time (EST)\",\n            \"Central Standard Time (CST)\",\n            \"Pacific Standard Time (PST)\",\n            \"Greenwich Mean Time (GMT)\",\n            \"Central European Time (CET)\",\n            \"Central Africa Time (CAT)\",\n            \"India Standard Time (IST)\",\n            \"China Standard Time (CST)\",\n            \"Japan Standard Time (JST)\",\n            \"Australian Western Standard Time (AWST)\",\n            \"New Zealand Standard Time (NZST)\",\n            \"Fiji Time (FJT)\",\n            \"Argentina Time (ART)\",\n            \"Bolivia Time (BOT)\",\n            \"Brasilia Time (BRT)\"\n        ]\n    }\n};\n\nexport const MediumSize: Story = {\n    args: {\n        ...Default.args,\n        size: \"md\"\n    }\n};\n\nexport const LargeSize: Story = {\n    args: {\n        ...Default.args,\n        size: \"lg\"\n    }\n};\n\nexport const ExtraLargeSize: Story = {\n    args: {\n        ...Default.args,\n        size: \"xl\"\n    }\n};\n\nexport const WithStartIcon: Story = {\n    args: {\n        ...Default.args,\n        startIcon: <Icon label={\"Search\"} icon={<SearchIcon />} />\n    }\n};\n\nexport const WithLoading: Story = {\n    args: {\n        ...Default.args,\n        loading: true\n    }\n};\n\nexport const WithoutResetAction: Story = {\n    args: {\n        ...Default.args,\n        displayResetAction: false\n    }\n};\n\nexport const PrimaryVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"primary\"\n    }\n};\n\nexport const PrimaryVariantDisabled: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const PrimaryVariantInvalid: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const SecondaryVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"secondary\",\n        placeholder: \"Custom placeholder\"\n    }\n};\n\nexport const SecondaryVariantDisabled: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const SecondaryVariantInvalid: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const GhostVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"ghost\",\n        placeholder: \"Custom placeholder\"\n    }\n};\n\nexport const GhostVariantDisabled: Story = {\n    args: {\n        ...GhostVariant.args,\n        disabled: true\n    }\n};\n\nexport const GhostVariantInvalid: Story = {\n    args: {\n        ...GhostVariant.args,\n        invalid: true\n    }\n};\n\nexport const GhostNegativeVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"ghost-negative\",\n        placeholder: \"Custom placeholder\"\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark text-neutral-light p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const GhostNegativeVariantDisabled: Story = {\n    args: {\n        ...GhostNegativeVariant.args,\n        disabled: true\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark text-neutral-light p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const GhostNegativeVariantInvalid: Story = {\n    args: {\n        ...GhostNegativeVariant.args,\n        invalid: true\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark text-neutral-light p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const WithPredefinedValue: Story = {\n    args: {\n        ...Default.args,\n        value: \"Eastern Standard Time (EST)\"\n    }\n};\n\nexport const WithCustomPlaceholder: Story = {\n    args: {\n        ...Default.args,\n        placeholder: \"Custom placeholder\"\n    }\n};\n\nexport const WithCustomEmptyMessage: Story = {\n    args: {\n        ...Default.args,\n        emptyMessage: \"Custom empty message\"\n    }\n};\n\nexport const WithCustomInitialMessage: Story = {\n    args: {\n        ...Default.args,\n        initialMessage: \"Custom initial message.\",\n        options: []\n    }\n};\n\nexport const WithFormattedOptions: Story = {\n    args: {\n        ...Default.args,\n        options: [\n            { label: \"Eastern Standard Time (EST)\", value: \"est\" },\n            { label: \"Central Standard Time (CST)\", value: \"cst\" },\n            { label: \"Pacific Standard Time (PST)\", value: \"pst\" },\n            { label: \"Greenwich Mean Time (GMT)\", value: \"gmt\" },\n            { label: \"Central European Time (CET)\", value: \"cet\" },\n            { label: \"Central Africa Time (CAT)\", value: \"cat\" },\n            { label: \"India Standard Time (IST)\", value: \"ist\" },\n            { label: \"China Standard Time (CST)\", value: \"cst_china\" },\n            { label: \"Japan Standard Time (JST)\", value: \"jst\" },\n            { label: \"Australian Western Standard Time (AWST)\", value: \"awst\" },\n            { label: \"New Zealand Standard Time (NZST)\", value: \"nzst\" },\n            { label: \"Fiji Time (FJT)\", value: \"fjt\" },\n            { label: \"Argentina Time (ART)\", value: \"art\" },\n            { label: \"Bolivia Time (BOT)\", value: \"bot\" },\n            { label: \"Brasilia Time (BRT)\", value: \"brt\" }\n        ]\n    }\n};\n\nexport const WithCustomOptionRenderer: Story = {\n    args: {\n        ...Default.args,\n        options: [\n            {\n                label: \"Eastern Standard Time (EST)\",\n                value: \"est\",\n                item: {\n                    name: \"Eastern Standard Time (EST)\",\n                    time_difference: \"-5:00\",\n                    flag: \"🇺🇸\"\n                }\n            },\n            {\n                label: \"Central Standard Time (CST)\",\n                value: \"cst\",\n                item: {\n                    name: \"Central Standard Time (CST)\",\n                    time_difference: \"-6:00\",\n                    flag: \"🇺🇸\"\n                }\n            },\n            {\n                label: \"Pacific Standard Time (PST)\",\n                value: \"pst\",\n                item: {\n                    name: \"Pacific Standard Time (PST)\",\n                    time_difference: \"-8:00\",\n                    flag: \"🇺🇸\"\n                }\n            },\n            {\n                label: \"Greenwich Mean Time (GMT)\",\n                value: \"gmt\",\n                item: {\n                    name: \"Greenwich Mean Time (GMT)\",\n                    time_difference: \"±0:00\",\n                    flag: \"🇬🇧\"\n                }\n            },\n            {\n                label: \"Central European Time (CET)\",\n                value: \"cet\",\n                item: {\n                    name: \"Central European Time (CET)\",\n                    time_difference: \"+1:00\",\n                    flag: \"🇪🇺\"\n                }\n            },\n            {\n                label: \"Central Africa Time (CAT)\",\n                value: \"cat\",\n                item: {\n                    name: \"Central Africa Time (CAT)\",\n                    time_difference: \"+2:00\",\n                    flag: \"🇿🇦\"\n                }\n            },\n            {\n                label: \"India Standard Time (IST)\",\n                value: \"ist\",\n                item: {\n                    name: \"India Standard Time (IST)\",\n                    time_difference: \"+5:30\",\n                    flag: \"🇮🇳\"\n                }\n            },\n            {\n                label: \"China Standard Time (CST)\",\n                value: \"cst_china\",\n                item: {\n                    name: \"China Standard Time (CST)\",\n                    time_difference: \"+8:00\",\n                    flag: \"🇨🇳\"\n                }\n            },\n            {\n                label: \"Japan Standard Time (JST)\",\n                value: \"jst\",\n                item: {\n                    name: \"Japan Standard Time (JST)\",\n                    time_difference: \"+9:00\",\n                    flag: \"🇯🇵\"\n                }\n            },\n            {\n                label: \"Australian Western Standard Time (AWST)\",\n                value: \"awst\",\n                item: {\n                    name: \"Australian Western Standard Time (AWST)\",\n                    time_difference: \"+8:00\",\n                    flag: \"🇦🇺\"\n                }\n            },\n            {\n                label: \"New Zealand Standard Time (NZST)\",\n                value: \"nzst\",\n                item: {\n                    name: \"New Zealand Standard Time (NZST)\",\n                    time_difference: \"+12:00\",\n                    flag: \"🇳🇿\"\n                }\n            },\n            {\n                label: \"Fiji Time (FJT)\",\n                value: \"fjt\",\n                item: {\n                    name: \"Fiji Time (FJT)\",\n                    time_difference: \"+12:00\",\n                    flag: \"🇫🇯\"\n                }\n            },\n            {\n                label: \"Argentina Time (ART)\",\n                value: \"art\",\n                item: {\n                    name: \"Argentina Time (ART)\",\n                    time_difference: \"-3:00\",\n                    flag: \"🇦🇷\"\n                }\n            },\n            {\n                label: \"Bolivia Time (BOT)\",\n                value: \"bot\",\n                item: {\n                    name: \"Bolivia Time (BOT)\",\n                    time_difference: \"-4:00\",\n                    flag: \"🇧🇴\"\n                }\n            },\n            {\n                label: \"Brasilia Time (BRT)\",\n                value: \"brt\",\n                item: {\n                    name: \"Brasilia Time (BRT)\",\n                    time_difference: \"-3:00\",\n                    flag: \"🇧🇷\"\n                }\n            }\n        ],\n        optionRenderer: item => {\n            return (\n                <div className={\"w-full flex justify-between align-middle\"}>\n                    <div>\n                        <span className={\"mr-sm\"}>{item.flag}</span>\n                        {item.name}\n                    </div>\n                    <div className={\"text-sm\"}>{item.time_difference}</div>\n                </div>\n            );\n        }\n    }\n};\n\nexport const WithSeparators: Story = {\n    args: {\n        ...Default.args,\n        options: [\n            { label: \"Eastern Standard Time (EST)\", value: \"est\" },\n            { label: \"Central Standard Time (CST)\", value: \"cst\" },\n            { label: \"Pacific Standard Time (PST)\", value: \"pst\", separator: true },\n            { label: \"Greenwich Mean Time (GMT)\", value: \"gmt\" },\n            { label: \"Central European Time (CET)\", value: \"cet\" },\n            { label: \"Central Africa Time (CAT)\", value: \"cat\", separator: true },\n            { label: \"India Standard Time (IST)\", value: \"ist\" },\n            { label: \"China Standard Time (CST)\", value: \"cst_china\" },\n            { label: \"Japan Standard Time (JST)\", value: \"jst\", separator: true },\n            { label: \"Australian Western Standard Time (AWST)\", value: \"awst\" },\n            { label: \"New Zealand Standard Time (NZST)\", value: \"nzst\" },\n            { label: \"Fiji Time (FJT)\", value: \"fjt\", separator: true },\n            { label: \"Argentina Time (ART)\", value: \"art\" },\n            { label: \"Bolivia Time (BOT)\", value: \"bot\" },\n            { label: \"Brasilia Time (BRT)\", value: \"brt\" }\n        ]\n    }\n};\n\nexport const WithDisabledOptions: Story = {\n    args: {\n        options: [\n            { label: \"Eastern Standard Time (EST)\", value: \"est\", disabled: true },\n            { label: \"Central Standard Time (CST)\", value: \"cst\", disabled: true },\n            { label: \"Pacific Standard Time (PST)\", value: \"pst\", disabled: true },\n            { label: \"Greenwich Mean Time (GMT)\", value: \"gmt\" },\n            { label: \"Central European Time (CET)\", value: \"cet\" },\n            { label: \"Central Africa Time (CAT)\", value: \"cat\" },\n            { label: \"India Standard Time (IST)\", value: \"ist\" },\n            { label: \"China Standard Time (CST)\", value: \"cst_china\" },\n            { label: \"Japan Standard Time (JST)\", value: \"jst\" },\n            { label: \"Australian Western Standard Time (AWST)\", value: \"awst\" },\n            { label: \"New Zealand Standard Time (NZST)\", value: \"nzst\" },\n            { label: \"Fiji Time (FJT)\", value: \"fjt\" },\n            { label: \"Argentina Time (ART)\", value: \"art\" },\n            { label: \"Bolivia Time (BOT)\", value: \"bot\" },\n            { label: \"Brasilia Time (BRT)\", value: \"brt\" }\n        ]\n    }\n};\n\nexport const WithExternalValueControl: Story = {\n    args: {\n        ...Default.args,\n        options: [\n            { label: \"Eastern Standard Time (EST)\", value: \"est\" },\n            { label: \"Central Standard Time (CST)\", value: \"cst\" },\n            { label: \"Pacific Standard Time (PST)\", value: \"pst\" },\n            { label: \"Greenwich Mean Time (GMT)\", value: \"gmt\" },\n            { label: \"Central European Time (CET)\", value: \"cet\" },\n            { label: \"Central Africa Time (CAT)\", value: \"cat\" },\n            { label: \"India Standard Time (IST)\", value: \"ist\" },\n            { label: \"China Standard Time (CST)\", value: \"cst_china\" },\n            { label: \"Japan Standard Time (JST)\", value: \"jst\" },\n            { label: \"Australian Western Standard Time (AWST)\", value: \"awst\" },\n            { label: \"New Zealand Standard Time (NZST)\", value: \"nzst\" },\n            { label: \"Fiji Time (FJT)\", value: \"fjt\" },\n            { label: \"Argentina Time (ART)\", value: \"art\" },\n            { label: \"Bolivia Time (BOT)\", value: \"bot\" },\n            { label: \"Brasilia Time (BRT)\", value: \"brt\" }\n        ]\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return (\n            <div className={\"w-full\"}>\n                <div>\n                    <AutoCompletePrimitive\n                        {...args}\n                        value={value}\n                        onValueChange={value => setValue(value)}\n                    />\n                </div>\n                <div className={\"mt-4 text-center\"}>\n                    <Button text={\"Reset\"} onClick={() => setValue(\"\")} />\n                </div>\n                <div className={\"mt-4 text-center\"}>\n                    Current selected value: <pre>{value}</pre>\n                </div>\n            </div>\n        );\n    }\n};\n"],"names":["meta","AutoCompletePrimitive","args","value","setValue","useState","Default","MediumSize","LargeSize","ExtraLargeSize","WithStartIcon","Icon","SearchIcon","WithLoading","WithoutResetAction","PrimaryVariant","PrimaryVariantDisabled","PrimaryVariantInvalid","SecondaryVariant","SecondaryVariantDisabled","SecondaryVariantInvalid","GhostVariant","GhostVariantDisabled","GhostVariantInvalid","GhostNegativeVariant","Story","GhostNegativeVariantDisabled","GhostNegativeVariantInvalid","WithPredefinedValue","WithCustomPlaceholder","WithCustomEmptyMessage","WithCustomInitialMessage","WithFormattedOptions","WithCustomOptionRenderer","item","WithSeparators","WithDisabledOptions","WithExternalValueControl","Button"],"mappings":"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"}
+{"version":3,"file":"AutoComplete/primitives/AutoCompletePrimitive.stories.js","sources":["../../../src/AutoComplete/primitives/AutoCompletePrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { ReactComponent as SearchIcon } from \"@webiny/icons/search.svg\";\nimport { AutoCompletePrimitive } from \"./AutoCompletePrimitive.js\";\nimport { Button } from \"~/Button/index.js\";\nimport { Icon } from \"~/Icon/index.js\";\n\nconst meta: Meta<typeof AutoCompletePrimitive> = {\n    title: \"Components/Form Primitives/Autocomplete\",\n    component: AutoCompletePrimitive,\n    parameters: {\n        layout: \"padded\"\n    },\n    argTypes: {\n        onValueChange: { action: \"onValueChange\" },\n        onOpenChange: { action: \"onOpenChange\" }\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return (\n            <div className={\"w-full\"}>\n                <AutoCompletePrimitive {...args} value={value} onValueChange={setValue} />\n                <div className={\"mt-4 text-center\"}>\n                    Current selected value: <pre>{value}</pre>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof AutoCompletePrimitive>;\n\nexport const Default: Story = {\n    args: {\n        options: [\n            \"Eastern Standard Time (EST)\",\n            \"Central Standard Time (CST)\",\n            \"Pacific Standard Time (PST)\",\n            \"Greenwich Mean Time (GMT)\",\n            \"Central European Time (CET)\",\n            \"Central Africa Time (CAT)\",\n            \"India Standard Time (IST)\",\n            \"China Standard Time (CST)\",\n            \"Japan Standard Time (JST)\",\n            \"Australian Western Standard Time (AWST)\",\n            \"New Zealand Standard Time (NZST)\",\n            \"Fiji Time (FJT)\",\n            \"Argentina Time (ART)\",\n            \"Bolivia Time (BOT)\",\n            \"Brasilia Time (BRT)\"\n        ]\n    }\n};\n\nexport const MediumSize: Story = {\n    args: {\n        ...Default.args,\n        size: \"md\"\n    }\n};\n\nexport const LargeSize: Story = {\n    args: {\n        ...Default.args,\n        size: \"lg\"\n    }\n};\n\nexport const ExtraLargeSize: Story = {\n    args: {\n        ...Default.args,\n        size: \"xl\"\n    }\n};\n\nexport const WithStartIcon: Story = {\n    args: {\n        ...Default.args,\n        startIcon: <Icon label={\"Search\"} icon={<SearchIcon />} />\n    }\n};\n\nexport const WithLoading: Story = {\n    args: {\n        ...Default.args,\n        loading: true\n    }\n};\n\nexport const WithoutResetAction: Story = {\n    args: {\n        ...Default.args,\n        displayResetAction: false\n    }\n};\n\nexport const PrimaryVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"primary\"\n    }\n};\n\nexport const PrimaryVariantDisabled: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const PrimaryVariantInvalid: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const SecondaryVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"secondary\",\n        placeholder: \"Custom placeholder\"\n    }\n};\n\nexport const SecondaryVariantDisabled: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const SecondaryVariantInvalid: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const GhostVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"ghost\",\n        placeholder: \"Custom placeholder\"\n    }\n};\n\nexport const GhostVariantDisabled: Story = {\n    args: {\n        ...GhostVariant.args,\n        disabled: true\n    }\n};\n\nexport const GhostVariantInvalid: Story = {\n    args: {\n        ...GhostVariant.args,\n        invalid: true\n    }\n};\n\nexport const GhostNegativeVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"ghost-negative\",\n        placeholder: \"Custom placeholder\"\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark text-neutral-light p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const GhostNegativeVariantDisabled: Story = {\n    args: {\n        ...GhostNegativeVariant.args,\n        disabled: true\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark text-neutral-light p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const GhostNegativeVariantInvalid: Story = {\n    args: {\n        ...GhostNegativeVariant.args,\n        invalid: true\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark text-neutral-light p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const WithPredefinedValue: Story = {\n    args: {\n        ...Default.args,\n        value: \"Eastern Standard Time (EST)\"\n    }\n};\n\nexport const WithCustomPlaceholder: Story = {\n    args: {\n        ...Default.args,\n        placeholder: \"Custom placeholder\"\n    }\n};\n\nexport const WithCustomEmptyMessage: Story = {\n    args: {\n        ...Default.args,\n        emptyMessage: \"Custom empty message\"\n    }\n};\n\nexport const WithCustomInitialMessage: Story = {\n    args: {\n        ...Default.args,\n        initialMessage: \"Custom initial message.\",\n        options: []\n    }\n};\n\nexport const WithFormattedOptions: Story = {\n    args: {\n        ...Default.args,\n        options: [\n            { label: \"Eastern Standard Time (EST)\", value: \"est\" },\n            { label: \"Central Standard Time (CST)\", value: \"cst\" },\n            { label: \"Pacific Standard Time (PST)\", value: \"pst\" },\n            { label: \"Greenwich Mean Time (GMT)\", value: \"gmt\" },\n            { label: \"Central European Time (CET)\", value: \"cet\" },\n            { label: \"Central Africa Time (CAT)\", value: \"cat\" },\n            { label: \"India Standard Time (IST)\", value: \"ist\" },\n            { label: \"China Standard Time (CST)\", value: \"cst_china\" },\n            { label: \"Japan Standard Time (JST)\", value: \"jst\" },\n            { label: \"Australian Western Standard Time (AWST)\", value: \"awst\" },\n            { label: \"New Zealand Standard Time (NZST)\", value: \"nzst\" },\n            { label: \"Fiji Time (FJT)\", value: \"fjt\" },\n            { label: \"Argentina Time (ART)\", value: \"art\" },\n            { label: \"Bolivia Time (BOT)\", value: \"bot\" },\n            { label: \"Brasilia Time (BRT)\", value: \"brt\" }\n        ]\n    }\n};\n\nexport const WithCustomOptionRenderer: Story = {\n    args: {\n        ...Default.args,\n        options: [\n            {\n                label: \"Eastern Standard Time (EST)\",\n                value: \"est\",\n                item: {\n                    name: \"Eastern Standard Time (EST)\",\n                    time_difference: \"-5:00\",\n                    flag: \"🇺🇸\"\n                }\n            },\n            {\n                label: \"Central Standard Time (CST)\",\n                value: \"cst\",\n                item: {\n                    name: \"Central Standard Time (CST)\",\n                    time_difference: \"-6:00\",\n                    flag: \"🇺🇸\"\n                }\n            },\n            {\n                label: \"Pacific Standard Time (PST)\",\n                value: \"pst\",\n                item: {\n                    name: \"Pacific Standard Time (PST)\",\n                    time_difference: \"-8:00\",\n                    flag: \"🇺🇸\"\n                }\n            },\n            {\n                label: \"Greenwich Mean Time (GMT)\",\n                value: \"gmt\",\n                item: {\n                    name: \"Greenwich Mean Time (GMT)\",\n                    time_difference: \"±0:00\",\n                    flag: \"🇬🇧\"\n                }\n            },\n            {\n                label: \"Central European Time (CET)\",\n                value: \"cet\",\n                item: {\n                    name: \"Central European Time (CET)\",\n                    time_difference: \"+1:00\",\n                    flag: \"🇪🇺\"\n                }\n            },\n            {\n                label: \"Central Africa Time (CAT)\",\n                value: \"cat\",\n                item: {\n                    name: \"Central Africa Time (CAT)\",\n                    time_difference: \"+2:00\",\n                    flag: \"🇿🇦\"\n                }\n            },\n            {\n                label: \"India Standard Time (IST)\",\n                value: \"ist\",\n                item: {\n                    name: \"India Standard Time (IST)\",\n                    time_difference: \"+5:30\",\n                    flag: \"🇮🇳\"\n                }\n            },\n            {\n                label: \"China Standard Time (CST)\",\n                value: \"cst_china\",\n                item: {\n                    name: \"China Standard Time (CST)\",\n                    time_difference: \"+8:00\",\n                    flag: \"🇨🇳\"\n                }\n            },\n            {\n                label: \"Japan Standard Time (JST)\",\n                value: \"jst\",\n                item: {\n                    name: \"Japan Standard Time (JST)\",\n                    time_difference: \"+9:00\",\n                    flag: \"🇯🇵\"\n                }\n            },\n            {\n                label: \"Australian Western Standard Time (AWST)\",\n                value: \"awst\",\n                item: {\n                    name: \"Australian Western Standard Time (AWST)\",\n                    time_difference: \"+8:00\",\n                    flag: \"🇦🇺\"\n                }\n            },\n            {\n                label: \"New Zealand Standard Time (NZST)\",\n                value: \"nzst\",\n                item: {\n                    name: \"New Zealand Standard Time (NZST)\",\n                    time_difference: \"+12:00\",\n                    flag: \"🇳🇿\"\n                }\n            },\n            {\n                label: \"Fiji Time (FJT)\",\n                value: \"fjt\",\n                item: {\n                    name: \"Fiji Time (FJT)\",\n                    time_difference: \"+12:00\",\n                    flag: \"🇫🇯\"\n                }\n            },\n            {\n                label: \"Argentina Time (ART)\",\n                value: \"art\",\n                item: {\n                    name: \"Argentina Time (ART)\",\n                    time_difference: \"-3:00\",\n                    flag: \"🇦🇷\"\n                }\n            },\n            {\n                label: \"Bolivia Time (BOT)\",\n                value: \"bot\",\n                item: {\n                    name: \"Bolivia Time (BOT)\",\n                    time_difference: \"-4:00\",\n                    flag: \"🇧🇴\"\n                }\n            },\n            {\n                label: \"Brasilia Time (BRT)\",\n                value: \"brt\",\n                item: {\n                    name: \"Brasilia Time (BRT)\",\n                    time_difference: \"-3:00\",\n                    flag: \"🇧🇷\"\n                }\n            }\n        ],\n        optionRenderer: item => {\n            return (\n                <div className={\"w-full flex justify-between align-middle\"}>\n                    <div>\n                        <span className={\"mr-sm\"}>{item.flag}</span>\n                        {item.name}\n                    </div>\n                    <div className={\"text-sm\"}>{item.time_difference}</div>\n                </div>\n            );\n        }\n    }\n};\n\nexport const WithSeparators: Story = {\n    args: {\n        ...Default.args,\n        options: [\n            { label: \"Eastern Standard Time (EST)\", value: \"est\" },\n            { label: \"Central Standard Time (CST)\", value: \"cst\" },\n            { label: \"Pacific Standard Time (PST)\", value: \"pst\", separator: true },\n            { label: \"Greenwich Mean Time (GMT)\", value: \"gmt\" },\n            { label: \"Central European Time (CET)\", value: \"cet\" },\n            { label: \"Central Africa Time (CAT)\", value: \"cat\", separator: true },\n            { label: \"India Standard Time (IST)\", value: \"ist\" },\n            { label: \"China Standard Time (CST)\", value: \"cst_china\" },\n            { label: \"Japan Standard Time (JST)\", value: \"jst\", separator: true },\n            { label: \"Australian Western Standard Time (AWST)\", value: \"awst\" },\n            { label: \"New Zealand Standard Time (NZST)\", value: \"nzst\" },\n            { label: \"Fiji Time (FJT)\", value: \"fjt\", separator: true },\n            { label: \"Argentina Time (ART)\", value: \"art\" },\n            { label: \"Bolivia Time (BOT)\", value: \"bot\" },\n            { label: \"Brasilia Time (BRT)\", value: \"brt\" }\n        ]\n    }\n};\n\nexport const WithDisabledOptions: Story = {\n    args: {\n        options: [\n            { label: \"Eastern Standard Time (EST)\", value: \"est\", disabled: true },\n            { label: \"Central Standard Time (CST)\", value: \"cst\", disabled: true },\n            { label: \"Pacific Standard Time (PST)\", value: \"pst\", disabled: true },\n            { label: \"Greenwich Mean Time (GMT)\", value: \"gmt\" },\n            { label: \"Central European Time (CET)\", value: \"cet\" },\n            { label: \"Central Africa Time (CAT)\", value: \"cat\" },\n            { label: \"India Standard Time (IST)\", value: \"ist\" },\n            { label: \"China Standard Time (CST)\", value: \"cst_china\" },\n            { label: \"Japan Standard Time (JST)\", value: \"jst\" },\n            { label: \"Australian Western Standard Time (AWST)\", value: \"awst\" },\n            { label: \"New Zealand Standard Time (NZST)\", value: \"nzst\" },\n            { label: \"Fiji Time (FJT)\", value: \"fjt\" },\n            { label: \"Argentina Time (ART)\", value: \"art\" },\n            { label: \"Bolivia Time (BOT)\", value: \"bot\" },\n            { label: \"Brasilia Time (BRT)\", value: \"brt\" }\n        ]\n    }\n};\n\nexport const WithExternalValueControl: Story = {\n    args: {\n        ...Default.args,\n        options: [\n            { label: \"Eastern Standard Time (EST)\", value: \"est\" },\n            { label: \"Central Standard Time (CST)\", value: \"cst\" },\n            { label: \"Pacific Standard Time (PST)\", value: \"pst\" },\n            { label: \"Greenwich Mean Time (GMT)\", value: \"gmt\" },\n            { label: \"Central European Time (CET)\", value: \"cet\" },\n            { label: \"Central Africa Time (CAT)\", value: \"cat\" },\n            { label: \"India Standard Time (IST)\", value: \"ist\" },\n            { label: \"China Standard Time (CST)\", value: \"cst_china\" },\n            { label: \"Japan Standard Time (JST)\", value: \"jst\" },\n            { label: \"Australian Western Standard Time (AWST)\", value: \"awst\" },\n            { label: \"New Zealand Standard Time (NZST)\", value: \"nzst\" },\n            { label: \"Fiji Time (FJT)\", value: \"fjt\" },\n            { label: \"Argentina Time (ART)\", value: \"art\" },\n            { label: \"Bolivia Time (BOT)\", value: \"bot\" },\n            { label: \"Brasilia Time (BRT)\", value: \"brt\" }\n        ]\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return (\n            <div className={\"w-full\"}>\n                <div>\n                    <AutoCompletePrimitive\n                        {...args}\n                        value={value}\n                        onValueChange={value => setValue(value)}\n                    />\n                </div>\n                <div className={\"mt-4 text-center\"}>\n                    <Button text={\"Reset\"} onClick={() => setValue(\"\")} />\n                </div>\n                <div className={\"mt-4 text-center\"}>\n                    Current selected value: <pre>{value}</pre>\n                </div>\n            </div>\n        );\n    }\n};\n"],"names":["meta","AutoCompletePrimitive","args","value","setValue","useState","Default","MediumSize","LargeSize","ExtraLargeSize","WithStartIcon","Icon","SearchIcon","WithLoading","WithoutResetAction","PrimaryVariant","PrimaryVariantDisabled","PrimaryVariantInvalid","SecondaryVariant","SecondaryVariantDisabled","SecondaryVariantInvalid","GhostVariant","GhostVariantDisabled","GhostVariantInvalid","GhostNegativeVariant","Story","GhostNegativeVariantDisabled","GhostNegativeVariantInvalid","WithPredefinedValue","WithCustomPlaceholder","WithCustomEmptyMessage","WithCustomInitialMessage","WithFormattedOptions","WithCustomOptionRenderer","item","WithSeparators","WithDisabledOptions","WithExternalValueControl","Button"],"mappings":"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"}

package/Avatar/Avatar.stories.d.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import { Avatar } from "./Avatar.js";
 declare const meta: Meta<typeof Avatar>;
 export default meta;

package/Avatar/Avatar.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar/Avatar.stories.js","sources":["../../src/Avatar/Avatar.stories.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { ReactComponent as StormIcon } from \"@webiny/icons/storm.svg\";\nimport { Avatar } from \"./Avatar.js\";\n\nconst meta: Meta<typeof Avatar> = {\n    title: \"Components/Avatar\",\n    component: Avatar,\n    argTypes: {\n        size: {\n            control: \"select\",\n            options: [\"sm\", \"md\", \"lg\", \"xl\"],\n            defaultValue: \"md\"\n        },\n        variant: {\n            control: \"select\",\n            options: [\"strong\", \"subtle\", \"light\", \"quiet\", \"outlined\"],\n            defaultValue: \"strong\"\n        }\n    }\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Avatar>;\n\nexport const Default: Story = {\n    args: {\n        image: <Avatar.Image src=\"https://i.pravatar.cc/300\" alt=\"@webiny\" />,\n        fallback: <Avatar.Fallback delayMs={0}>W</Avatar.Fallback>\n    }\n};\n\nexport const SizeSm: Story = {\n    name: \"Small\",\n    args: {\n        ...Default.args,\n        size: \"sm\"\n    }\n};\nexport const SizeMd: Story = {\n    name: \"Medium\",\n    args: {\n        ...Default.args,\n        size: \"md\"\n    }\n};\n\nexport const SizeLg: Story = {\n    name: \"Large\",\n    args: {\n        ...Default.args,\n        size: \"lg\"\n    }\n};\n\nexport const SizeXl: Story = {\n    name: \"Extra Large\",\n    args: {\n        ...Default.args,\n        size: \"xl\"\n    }\n};\n\nexport const Text: Story = {\n    name: \"Fallback Text\",\n    args: {\n        fallback: <Avatar.Fallback>SH</Avatar.Fallback>\n    }\n};\nexport const Icon: Story = {\n    name: \"Icon\",\n    args: {\n        fallback: (\n            <Avatar.Fallback>\n                <StormIcon />\n            </Avatar.Fallback>\n        )\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        return (\n            <Avatar\n                {...args}\n                image={args.image || <Avatar.Image src=\"https://i.pravatar.cc/300\" alt=\"@webiny\" />}\n                fallback={args.fallback || <Avatar.Fallback delayMs={0}>W</Avatar.Fallback>}\n            />\n        );\n    },\n    args: {\n        size: \"md\",\n        variant: \"strong\",\n        image: undefined,\n        fallback: undefined,\n        className: \"commas, separated, class, name\"\n    },\n    argTypes: {\n        size: {\n            description: \"Controls the size of the avatar\",\n            control: \"select\",\n            options: [\"sm\", \"md\", \"lg\", \"xl\"],\n            defaultValue: \"md\"\n        },\n        variant: {\n            description: \"Controls the visual style of the avatar\",\n            control: \"select\",\n            options: [\"strong\", \"subtle\", \"light\", \"quiet\", \"outlined\"],\n            defaultValue: \"strong\"\n        },\n        image: {\n            description:\n                \"The image element to display. Please refer to the example code for details on usage.\"\n        },\n        fallback: {\n            description:\n                \"The fallback element to display when the image fails to load. Please refer to the example code for details on usage.\"\n        },\n        className: {\n            description:\n                \"Additional CSS class names. You can pass multiple class names, separated by commas.\",\n            placeholder: \"Enter class names, separated by commas.\",\n            control: \"text\"\n        }\n    }\n};\n"],"names":["meta","Avatar","Default","SizeSm","SizeMd","SizeLg","SizeXl","Text","Icon","StormIcon","Documentation","args","undefined"],"mappings":";;;AAKA,MAAMA,OAA4B;IAC9B,OAAO;IACP,WAAWC;IACX,UAAU;QACN,MAAM;YACF,SAAS;YACT,SAAS;gBAAC;gBAAM;gBAAM;gBAAM;aAAK;YACjC,cAAc;QAClB;QACA,SAAS;YACL,SAAS;YACT,SAAS;gBAAC;gBAAU;gBAAU;gBAAS;gBAAS;aAAW;YAC3D,cAAc;QAClB;IACJ;AACJ;AAEA,uBAAeD;AAIR,MAAME,UAAiB;IAC1B,MAAM;QACF,OAAO,WAAP,GAAO,sCAACD,OAAO,KAAK;YAAC,KAAI;YAA4B,KAAI;;QACzD,UAAU,WAAV,GAAU,sCAACA,OAAO,QAAQ;YAAC,SAAS;WAAG;IAC3C;AACJ;AAEO,MAAME,SAAgB;IACzB,MAAM;IACN,MAAM;QACF,GAAGD,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AACO,MAAME,SAAgB;IACzB,MAAM;IACN,MAAM;QACF,GAAGF,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMG,SAAgB;IACzB,MAAM;IACN,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMI,SAAgB;IACzB,MAAM;IACN,MAAM;QACF,GAAGJ,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMK,OAAc;IACvB,MAAM;IACN,MAAM;QACF,UAAU,WAAV,GAAU,sCAACN,OAAO,QAAQ,QAAC;IAC/B;AACJ;AACO,MAAMO,OAAc;IACvB,MAAM;IACN,MAAM;QACF,UAAU,WAAV,GACI,sCAACP,OAAO,QAAQ,sBACZ,sCAACQ,gBAASA;IAGtB;AACJ;AAEO,MAAMC,gBAAuB;IAChC,QAAQC,CAAAA,OACG,WAAP,GACI,sCAACV,QAAMA;YACF,GAAGU,IAAI;YACR,OAAOA,KAAK,KAAK,IAAI,WAAJ,GAAI,sCAACV,OAAO,KAAK;gBAAC,KAAI;gBAA4B,KAAI;;YACvE,UAAUU,KAAK,QAAQ,IAAI,WAAJ,GAAI,sCAACV,OAAO,QAAQ;gBAAC,SAAS;eAAG;;IAIpE,MAAM;QACF,MAAM;QACN,SAAS;QACT,OAAOW;QACP,UAAUA;QACV,WAAW;IACf;IACA,UAAU;QACN,MAAM;YACF,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAM;gBAAM;gBAAM;aAAK;YACjC,cAAc;QAClB;QACA,SAAS;YACL,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAU;gBAAU;gBAAS;gBAAS;aAAW;YAC3D,cAAc;QAClB;QACA,OAAO;YACH,aACI;QACR;QACA,UAAU;YACN,aACI;QACR;QACA,WAAW;YACP,aACI;YACJ,aAAa;YACb,SAAS;QACb;IACJ;AACJ"}
+{"version":3,"file":"Avatar/Avatar.stories.js","sources":["../../src/Avatar/Avatar.stories.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { ReactComponent as StormIcon } from \"@webiny/icons/storm.svg\";\nimport { Avatar } from \"./Avatar.js\";\n\nconst meta: Meta<typeof Avatar> = {\n    title: \"Components/Avatar\",\n    component: Avatar,\n    argTypes: {\n        size: {\n            control: \"select\",\n            options: [\"sm\", \"md\", \"lg\", \"xl\"],\n            defaultValue: \"md\"\n        },\n        variant: {\n            control: \"select\",\n            options: [\"strong\", \"subtle\", \"light\", \"quiet\", \"outlined\"],\n            defaultValue: \"strong\"\n        }\n    }\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Avatar>;\n\nexport const Default: Story = {\n    args: {\n        image: <Avatar.Image src=\"https://i.pravatar.cc/300\" alt=\"@webiny\" />,\n        fallback: <Avatar.Fallback delayMs={0}>W</Avatar.Fallback>\n    }\n};\n\nexport const SizeSm: Story = {\n    name: \"Small\",\n    args: {\n        ...Default.args,\n        size: \"sm\"\n    }\n};\nexport const SizeMd: Story = {\n    name: \"Medium\",\n    args: {\n        ...Default.args,\n        size: \"md\"\n    }\n};\n\nexport const SizeLg: Story = {\n    name: \"Large\",\n    args: {\n        ...Default.args,\n        size: \"lg\"\n    }\n};\n\nexport const SizeXl: Story = {\n    name: \"Extra Large\",\n    args: {\n        ...Default.args,\n        size: \"xl\"\n    }\n};\n\nexport const Text: Story = {\n    name: \"Fallback Text\",\n    args: {\n        fallback: <Avatar.Fallback>SH</Avatar.Fallback>\n    }\n};\nexport const Icon: Story = {\n    name: \"Icon\",\n    args: {\n        fallback: (\n            <Avatar.Fallback>\n                <StormIcon />\n            </Avatar.Fallback>\n        )\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        return (\n            <Avatar\n                {...args}\n                image={args.image || <Avatar.Image src=\"https://i.pravatar.cc/300\" alt=\"@webiny\" />}\n                fallback={args.fallback || <Avatar.Fallback delayMs={0}>W</Avatar.Fallback>}\n            />\n        );\n    },\n    args: {\n        size: \"md\",\n        variant: \"strong\",\n        image: undefined,\n        fallback: undefined,\n        className: \"commas, separated, class, name\"\n    },\n    argTypes: {\n        size: {\n            description: \"Controls the size of the avatar\",\n            control: \"select\",\n            options: [\"sm\", \"md\", \"lg\", \"xl\"],\n            defaultValue: \"md\"\n        },\n        variant: {\n            description: \"Controls the visual style of the avatar\",\n            control: \"select\",\n            options: [\"strong\", \"subtle\", \"light\", \"quiet\", \"outlined\"],\n            defaultValue: \"strong\"\n        },\n        image: {\n            description:\n                \"The image element to display. Please refer to the example code for details on usage.\"\n        },\n        fallback: {\n            description:\n                \"The fallback element to display when the image fails to load. Please refer to the example code for details on usage.\"\n        },\n        className: {\n            description:\n                \"Additional CSS class names. You can pass multiple class names, separated by commas.\",\n            placeholder: \"Enter class names, separated by commas.\",\n            control: \"text\"\n        }\n    }\n};\n"],"names":["meta","Avatar","Default","SizeSm","SizeMd","SizeLg","SizeXl","Text","Icon","StormIcon","Documentation","args","undefined"],"mappings":";;;AAKA,MAAMA,OAA4B;IAC9B,OAAO;IACP,WAAWC;IACX,UAAU;QACN,MAAM;YACF,SAAS;YACT,SAAS;gBAAC;gBAAM;gBAAM;gBAAM;aAAK;YACjC,cAAc;QAClB;QACA,SAAS;YACL,SAAS;YACT,SAAS;gBAAC;gBAAU;gBAAU;gBAAS;gBAAS;aAAW;YAC3D,cAAc;QAClB;IACJ;AACJ;AAEA,uBAAeD;AAIR,MAAME,UAAiB;IAC1B,MAAM;QACF,OAAO,WAAP,GAAO,sCAACD,OAAO,KAAK;YAAC,KAAI;YAA4B,KAAI;;QACzD,UAAU,WAAV,GAAU,sCAACA,OAAO,QAAQ;YAAC,SAAS;WAAG;IAC3C;AACJ;AAEO,MAAME,SAAgB;IACzB,MAAM;IACN,MAAM;QACF,GAAGD,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AACO,MAAME,SAAgB;IACzB,MAAM;IACN,MAAM;QACF,GAAGF,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMG,SAAgB;IACzB,MAAM;IACN,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMI,SAAgB;IACzB,MAAM;IACN,MAAM;QACF,GAAGJ,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMK,OAAc;IACvB,MAAM;IACN,MAAM;QACF,UAAU,WAAV,GAAU,sCAACN,OAAO,QAAQ,QAAC;IAC/B;AACJ;AACO,MAAMO,OAAc;IACvB,MAAM;IACN,MAAM;QACF,UAAU,WAAV,GACI,sCAACP,OAAO,QAAQ,sBACZ,sCAACQ,gBAASA;IAGtB;AACJ;AAEO,MAAMC,gBAAuB;IAChC,QAAQC,CAAAA,OACG,WAAP,GACI,sCAACV,QAAMA;YACF,GAAGU,IAAI;YACR,OAAOA,KAAK,KAAK,IAAI,WAAJ,GAAI,sCAACV,OAAO,KAAK;gBAAC,KAAI;gBAA4B,KAAI;;YACvE,UAAUU,KAAK,QAAQ,IAAI,WAAJ,GAAI,sCAACV,OAAO,QAAQ;gBAAC,SAAS;eAAG;;IAIpE,MAAM;QACF,MAAM;QACN,SAAS;QACT,OAAOW;QACP,UAAUA;QACV,WAAW;IACf;IACA,UAAU;QACN,MAAM;YACF,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAM;gBAAM;gBAAM;aAAK;YACjC,cAAc;QAClB;QACA,SAAS;YACL,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAU;gBAAU;gBAAS;gBAAS;aAAW;YAC3D,cAAc;QAClB;QACA,OAAO;YACH,aACI;QACR;QACA,UAAU;YACN,aACI;QACR;QACA,WAAW;YACP,aACI;YACJ,aAAa;YACb,SAAS;QACb;IACJ;AACJ"}

package/Button/Button.stories.d.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import { Button } from "./Button.js";
 declare const meta: Meta<typeof Button>;
 export default meta;