@webiny/admin-ui 6.4.0-beta.2 → 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":"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"}

package/AdminUiProvider/AdminUiProvider.d.ts

@@ -1,9 +1,11 @@
 import React from "react";
 import { type LinkComponent } from "../index.js";
+import type { FileUrlFormatter } from "./FileUrlFormatter.js";
 export type CompileMarkdown = (markdown: React.ReactNode) => React.ReactNode;
 export interface AdminUiContextValue {
     linkComponent: LinkComponent;
     compileMarkdown: CompileMarkdown;
+    fileUrlFormatter: FileUrlFormatter;
 }
 export declare const AdminUiContext: React.Context<AdminUiContextValue | undefined>;
 interface MarkdownCompiler {
@@ -12,6 +14,7 @@ interface MarkdownCompiler {
 export interface AdminUiProviderProps {
     linkComponent?: LinkComponent;
     markdownCompiler?: MarkdownCompiler;
+    fileUrlFormatter?: FileUrlFormatter;
     children: React.ReactNode;
 }
 export declare const AdminUiProvider: ({ children, ...props }: AdminUiProviderProps) => React.JSX.Element;

package/AdminUiProvider/AdminUiProvider.js

@@ -1,12 +1,16 @@
-import react, { useCallback, useEffect, useRef } from "react";
+import react, { useCallback, useEffect, useMemo, useRef } from "react";
 import { Toast } from "../Toast/index.js";
 import { Tooltip } from "../Tooltip/index.js";
 import { DefaultLinkComponent } from "../index.js";
 const passthrough = (markdown)=>markdown;
+const passthroughFileUrlFormatter = {
+    format (_url) {}
+};
 const AdminUiContext = /*#__PURE__*/ react.createContext(void 0);
 const AdminUiProvider = ({ children, ...props })=>{
     const linkComponent = props.linkComponent ?? DefaultLinkComponent;
     const markdownCompiler = props.markdownCompiler ?? passthrough;
+    const fileUrlFormatter = props.fileUrlFormatter ?? passthroughFileUrlFormatter;
     const cacheRef = useRef(new Map());
     useEffect(()=>{
         cacheRef.current.clear();
@@ -27,11 +31,17 @@ const AdminUiProvider = ({ children, ...props })=>{
     }, [
         markdownCompiler
     ]);
-    return /*#__PURE__*/ react.createElement(AdminUiContext.Provider, {
-        value: {
+    const contextValue = useMemo(()=>({
             linkComponent,
-            compileMarkdown
-        }
+            compileMarkdown,
+            fileUrlFormatter
+        }), [
+        linkComponent,
+        compileMarkdown,
+        fileUrlFormatter
+    ]);
+    return /*#__PURE__*/ react.createElement(AdminUiContext.Provider, {
+        value: contextValue
     }, /*#__PURE__*/ react.createElement(Tooltip.Provider, null, children), /*#__PURE__*/ react.createElement(Toast.Provider, null));
 };
 const useAdminUi = ()=>{

package/AdminUiProvider/AdminUiProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"AdminUiProvider/AdminUiProvider.js","sources":["../../src/AdminUiProvider/AdminUiProvider.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef } from \"react\";\nimport { Toast } from \"~/Toast/index.js\";\nimport { Tooltip } from \"~/Tooltip/index.js\";\nimport { type LinkComponent, DefaultLinkComponent } from \"~/index.js\";\n\nexport type CompileMarkdown = (markdown: React.ReactNode) => React.ReactNode;\n\nexport interface AdminUiContextValue {\n    linkComponent: LinkComponent;\n    compileMarkdown: CompileMarkdown;\n}\n\nconst passthrough = (markdown: string) => markdown;\n\nexport const AdminUiContext = React.createContext<AdminUiContextValue | undefined>(undefined);\n\ninterface MarkdownCompiler {\n    (markdown: string): React.ReactNode;\n}\n\nexport interface AdminUiProviderProps {\n    linkComponent?: LinkComponent;\n    markdownCompiler?: MarkdownCompiler;\n    children: React.ReactNode;\n}\n\nexport const AdminUiProvider = ({ children, ...props }: AdminUiProviderProps) => {\n    const linkComponent = props.linkComponent ?? DefaultLinkComponent;\n    const markdownCompiler = props.markdownCompiler ?? passthrough;\n\n    // Cache to store compiled markdown results\n    const cacheRef = useRef(new Map<string, React.ReactNode>());\n\n    // Clear cache when markdownCompiler changes\n    useEffect(() => {\n        cacheRef.current.clear();\n    }, [markdownCompiler]);\n\n    const compileMarkdown = useCallback(\n        (markdown: React.ReactNode) => {\n            if (!markdownCompiler) {\n                return markdown;\n            }\n\n            if (React.isValidElement(markdown)) {\n                return markdown;\n            }\n\n            if (typeof markdown === \"string\") {\n                // Check cache first\n                const cached = cacheRef.current.get(markdown);\n                if (cached !== undefined) {\n                    return cached;\n                }\n\n                // Compile and cache\n                const compiled = markdownCompiler(markdown);\n                cacheRef.current.set(markdown, compiled);\n                return compiled;\n            }\n\n            return markdown;\n        },\n        [markdownCompiler]\n    );\n\n    return (\n        <AdminUiContext.Provider value={{ linkComponent, compileMarkdown }}>\n            <Tooltip.Provider>{children}</Tooltip.Provider>\n            <Toast.Provider />\n        </AdminUiContext.Provider>\n    );\n};\n\nexport const useAdminUi = () => {\n    const context = React.useContext(AdminUiContext);\n    if (!context) {\n        throw new Error(\"AdminUiProvider is missing from the component tree.\");\n    }\n    return context;\n};\n"],"names":["passthrough","markdown","AdminUiContext","React","undefined","AdminUiProvider","children","props","linkComponent","DefaultLinkComponent","markdownCompiler","cacheRef","useRef","Map","useEffect","compileMarkdown","useCallback","cached","compiled","Tooltip","Toast","useAdminUi","context","Error"],"mappings":";;;;AAYA,MAAMA,cAAc,CAACC,WAAqBA;AAEnC,MAAMC,iBAAiB,WAAHA,GAAGC,MAAAA,aAAmB,CAAkCC;AAY5E,MAAMC,kBAAkB,CAAC,EAAEC,QAAQ,EAAE,GAAGC,OAA6B;IACxE,MAAMC,gBAAgBD,MAAM,aAAa,IAAIE;IAC7C,MAAMC,mBAAmBH,MAAM,gBAAgB,IAAIP;IAGnD,MAAMW,WAAWC,OAAO,IAAIC;IAG5BC,UAAU;QACNH,SAAS,OAAO,CAAC,KAAK;IAC1B,GAAG;QAACD;KAAiB;IAErB,MAAMK,kBAAkBC,YACpB,CAACf;QACG,IAAI,CAACS,kBACD,OAAOT;QAGX,IAAI,WAAJ,GAAIE,MAAAA,cAAoB,CAACF,WACrB,OAAOA;QAGX,IAAI,AAAoB,YAApB,OAAOA,UAAuB;YAE9B,MAAMgB,SAASN,SAAS,OAAO,CAAC,GAAG,CAACV;YACpC,IAAIgB,AAAWb,WAAXa,QACA,OAAOA;YAIX,MAAMC,WAAWR,iBAAiBT;YAClCU,SAAS,OAAO,CAAC,GAAG,CAACV,UAAUiB;YAC/B,OAAOA;QACX;QAEA,OAAOjB;IACX,GACA;QAACS;KAAiB;IAGtB,OAAO,WAAP,GACI,oBAACR,eAAe,QAAQ;QAAC,OAAO;YAAEM;YAAeO;QAAgB;qBAC7D,oBAACI,QAAQ,QAAQ,QAAEb,WAAAA,WAAAA,GACnB,oBAACc,MAAM,QAAQ;AAG3B;AAEO,MAAMC,aAAa;IACtB,MAAMC,UAAUnB,MAAAA,UAAgB,CAACD;IACjC,IAAI,CAACoB,SACD,MAAM,IAAIC,MAAM;IAEpB,OAAOD;AACX"}
+{"version":3,"file":"AdminUiProvider/AdminUiProvider.js","sources":["../../src/AdminUiProvider/AdminUiProvider.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useRef } from \"react\";\nimport { Toast } from \"~/Toast/index.js\";\nimport { Tooltip } from \"~/Tooltip/index.js\";\nimport { type LinkComponent, DefaultLinkComponent } from \"~/index.js\";\nimport type { FileUrlFormatter } from \"./FileUrlFormatter.js\";\n\nexport type CompileMarkdown = (markdown: React.ReactNode) => React.ReactNode;\n\nexport interface AdminUiContextValue {\n    linkComponent: LinkComponent;\n    compileMarkdown: CompileMarkdown;\n    fileUrlFormatter: FileUrlFormatter;\n}\n\nconst passthrough = (markdown: string) => markdown;\n\nconst passthroughFileUrlFormatter: FileUrlFormatter = {\n    format(_url: URL): void {\n        // passthrough — no-op\n    }\n};\n\nexport const AdminUiContext = React.createContext<AdminUiContextValue | undefined>(undefined);\n\ninterface MarkdownCompiler {\n    (markdown: string): React.ReactNode;\n}\n\nexport interface AdminUiProviderProps {\n    linkComponent?: LinkComponent;\n    markdownCompiler?: MarkdownCompiler;\n    fileUrlFormatter?: FileUrlFormatter;\n    children: React.ReactNode;\n}\n\nexport const AdminUiProvider = ({ children, ...props }: AdminUiProviderProps) => {\n    const linkComponent = props.linkComponent ?? DefaultLinkComponent;\n    const markdownCompiler = props.markdownCompiler ?? passthrough;\n    const fileUrlFormatter = props.fileUrlFormatter ?? passthroughFileUrlFormatter;\n\n    // Cache to store compiled markdown results\n    const cacheRef = useRef(new Map<string, React.ReactNode>());\n\n    // Clear cache when markdownCompiler changes\n    useEffect(() => {\n        cacheRef.current.clear();\n    }, [markdownCompiler]);\n\n    const compileMarkdown = useCallback(\n        (markdown: React.ReactNode) => {\n            if (!markdownCompiler) {\n                return markdown;\n            }\n\n            if (React.isValidElement(markdown)) {\n                return markdown;\n            }\n\n            if (typeof markdown === \"string\") {\n                // Check cache first\n                const cached = cacheRef.current.get(markdown);\n                if (cached !== undefined) {\n                    return cached;\n                }\n\n                // Compile and cache\n                const compiled = markdownCompiler(markdown);\n                cacheRef.current.set(markdown, compiled);\n                return compiled;\n            }\n\n            return markdown;\n        },\n        [markdownCompiler]\n    );\n\n    const contextValue = useMemo(\n        () => ({ linkComponent, compileMarkdown, fileUrlFormatter }),\n        [linkComponent, compileMarkdown, fileUrlFormatter]\n    );\n\n    return (\n        <AdminUiContext.Provider value={contextValue}>\n            <Tooltip.Provider>{children}</Tooltip.Provider>\n            <Toast.Provider />\n        </AdminUiContext.Provider>\n    );\n};\n\nexport const useAdminUi = () => {\n    const context = React.useContext(AdminUiContext);\n    if (!context) {\n        throw new Error(\"AdminUiProvider is missing from the component tree.\");\n    }\n    return context;\n};\n"],"names":["passthrough","markdown","passthroughFileUrlFormatter","_url","AdminUiContext","React","undefined","AdminUiProvider","children","props","linkComponent","DefaultLinkComponent","markdownCompiler","fileUrlFormatter","cacheRef","useRef","Map","useEffect","compileMarkdown","useCallback","cached","compiled","contextValue","useMemo","Tooltip","Toast","useAdminUi","context","Error"],"mappings":";;;;AAcA,MAAMA,cAAc,CAACC,WAAqBA;AAE1C,MAAMC,8BAAgD;IAClD,QAAOC,IAAS,GAEhB;AACJ;AAEO,MAAMC,iBAAiB,WAAHA,GAAGC,MAAAA,aAAmB,CAAkCC;AAa5E,MAAMC,kBAAkB,CAAC,EAAEC,QAAQ,EAAE,GAAGC,OAA6B;IACxE,MAAMC,gBAAgBD,MAAM,aAAa,IAAIE;IAC7C,MAAMC,mBAAmBH,MAAM,gBAAgB,IAAIT;IACnD,MAAMa,mBAAmBJ,MAAM,gBAAgB,IAAIP;IAGnD,MAAMY,WAAWC,OAAO,IAAIC;IAG5BC,UAAU;QACNH,SAAS,OAAO,CAAC,KAAK;IAC1B,GAAG;QAACF;KAAiB;IAErB,MAAMM,kBAAkBC,YACpB,CAAClB;QACG,IAAI,CAACW,kBACD,OAAOX;QAGX,IAAI,WAAJ,GAAII,MAAAA,cAAoB,CAACJ,WACrB,OAAOA;QAGX,IAAI,AAAoB,YAApB,OAAOA,UAAuB;YAE9B,MAAMmB,SAASN,SAAS,OAAO,CAAC,GAAG,CAACb;YACpC,IAAImB,AAAWd,WAAXc,QACA,OAAOA;YAIX,MAAMC,WAAWT,iBAAiBX;YAClCa,SAAS,OAAO,CAAC,GAAG,CAACb,UAAUoB;YAC/B,OAAOA;QACX;QAEA,OAAOpB;IACX,GACA;QAACW;KAAiB;IAGtB,MAAMU,eAAeC,QACjB,IAAO;YAAEb;YAAeQ;YAAiBL;QAAiB,IAC1D;QAACH;QAAeQ;QAAiBL;KAAiB;IAGtD,OAAO,WAAP,GACI,oBAACT,eAAe,QAAQ;QAAC,OAAOkB;qBAC5B,oBAACE,QAAQ,QAAQ,QAAEhB,WAAAA,WAAAA,GACnB,oBAACiB,MAAM,QAAQ;AAG3B;AAEO,MAAMC,aAAa;IACtB,MAAMC,UAAUtB,MAAAA,UAAgB,CAACD;IACjC,IAAI,CAACuB,SACD,MAAM,IAAIC,MAAM;IAEpB,OAAOD;AACX"}

package/AdminUiProvider/FileUrlFormatter.d.ts

@@ -0,0 +1,7 @@
+export interface FileUrlParams {
+    width?: number;
+    [key: string]: unknown;
+}
+export interface FileUrlFormatter {
+    format(url: URL, params?: FileUrlParams): void;
+}

package/AdminUiProvider/index.d.ts

@@ -1 +1,2 @@
 export * from "./AdminUiProvider.js";
+export * from "./FileUrlFormatter.js";

package/AdminUiProvider/index.js

@@ -1 +1,2 @@
 export * from "./AdminUiProvider.js";
+export * from "./FileUrlFormatter.js";

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":"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"}
+{"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;