@webiny/admin-ui 0.0.0-unstable.7be00a75a9 → 0.0.0-unstable.7c2def32a7

package/Accordion/Accordion.d.ts

@@ -12,21 +12,22 @@ type AccordionProps = React.ComponentPropsWithoutRef<typeof AccordionRoot> & Var
     border?: "none" | "accent";
     openClosedIndicatorPosition?: "left" | "right";
 };
-export declare const Accordion: ((props: AccordionProps) => React.JSX.Element) & {
-    original: (props: AccordionProps) => React.JSX.Element;
+declare const AccordionBase: (props: AccordionProps) => React.JSX.Element;
+export declare const Accordion: typeof AccordionBase & {
+    original: typeof AccordionBase;
     originalName: string;
     displayName: string;
 } & {
-    original: ((props: AccordionProps) => React.JSX.Element) & {
-        original: (props: AccordionProps) => React.JSX.Element;
+    original: typeof AccordionBase & {
+        original: typeof AccordionBase;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: AccordionProps) => React.JSX.Element) & {
-        original: (props: AccordionProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof AccordionBase & {
+        original: typeof AccordionBase;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

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/Accordion/components/AccordionContent.js

@@ -1,6 +1,7 @@
 import { Collapsible } from "radix-ui";
 import { cn, cva } from "../../utils.js";
 import { useAccordionItemProps } from "./AccordionItem.js";
+import { AccordionItemPropsProvider } from "./AccordionItemPropsProvider.js";
 import * as __rspack_external_react from "react";
 const accordionContentVariants = cva([
     "overflow-hidden text-md pr-xxl",
@@ -39,10 +40,12 @@ const AccordionContent = ({ children, className, ...props })=>{
             withHandle,
             withIcon
         }), className)
+    }, /*#__PURE__*/ __rspack_external_react.createElement(AccordionItemPropsProvider, {
+        props: {}
     }, /*#__PURE__*/ __rspack_external_react.createElement("div", {
         "data-accordion": "content",
         className: "pt-sm pb-lg"
-    }, children));
+    }, children)));
 };
 export { AccordionContent };
 

package/Accordion/components/AccordionContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion/components/AccordionContent.js","sources":["../../../src/Accordion/components/AccordionContent.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Collapsible as CollapsiblePrimitive } from \"radix-ui\";\nimport { cva, cn } from \"~/utils.js\";\nimport { useAccordionItemProps } from \"./AccordionItem.js\";\n\nconst accordionContentVariants = cva(\n    [\n        \"overflow-hidden text-md pr-xxl\",\n        \"transition-all\",\n        \"data-[state=closed]:animate-collapsible-up\",\n        \"data-[state=open]:animate-collapsible-down\"\n    ],\n    {\n        variants: {\n            withIcon: {\n                true: \"pl-xxl\",\n                false: \"pl-md\"\n            },\n            withHandle: {\n                true: \"pl-5\"\n            }\n        },\n        compoundVariants: [\n            {\n                withIcon: true,\n                withHandle: true,\n                className: \"pl-14\"\n            }\n        ],\n        defaultVariants: {\n            withIcon: false,\n            withHandle: false\n        }\n    }\n);\n\nexport interface AccordionContentProps extends React.ComponentPropsWithoutRef<\n    typeof CollapsiblePrimitive.Content\n> {}\n\nexport const AccordionContent = ({ children, className, ...props }: AccordionContentProps) => {\n    const itemProps = useAccordionItemProps();\n    const withIcon = !!itemProps.icon;\n    const withHandle = !!itemProps.handle;\n\n    return (\n        <CollapsiblePrimitive.Content\n            {...props}\n            className={cn(accordionContentVariants({ withHandle, withIcon }), className)}\n        >\n            <div data-accordion={\"content\"} className=\"pt-sm pb-lg\">\n                {children}\n            </div>\n        </CollapsiblePrimitive.Content>\n    );\n};\n"],"names":["accordionContentVariants","cva","AccordionContent","children","className","props","itemProps","useAccordionItemProps","withIcon","withHandle","CollapsiblePrimitive","cn"],"mappings":";;;;AAKA,MAAMA,2BAA2BC,IAC7B;IACI;IACA;IACA;IACA;CACH,EACD;IACI,UAAU;QACN,UAAU;YACN,MAAM;YACN,OAAO;QACX;QACA,YAAY;YACR,MAAM;QACV;IACJ;IACA,kBAAkB;QACd;YACI,UAAU;YACV,YAAY;YACZ,WAAW;QACf;KACH;IACD,iBAAiB;QACb,UAAU;QACV,YAAY;IAChB;AACJ;AAOG,MAAMC,mBAAmB,CAAC,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGC,OAA8B;IACrF,MAAMC,YAAYC;IAClB,MAAMC,WAAW,CAAC,CAACF,UAAU,IAAI;IACjC,MAAMG,aAAa,CAAC,CAACH,UAAU,MAAM;IAErC,OAAO,WAAP,GACI,sCAACI,YAAAA,OAA4B;QACxB,GAAGL,KAAK;QACT,WAAWM,GAAGX,yBAAyB;YAAES;YAAYD;QAAS,IAAIJ;qBAElE,sCAAC;QAAI,kBAAgB;QAAW,WAAU;OACrCD;AAIjB"}
+{"version":3,"file":"Accordion/components/AccordionContent.js","sources":["../../../src/Accordion/components/AccordionContent.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Collapsible as CollapsiblePrimitive } from \"radix-ui\";\nimport { cva, cn } from \"~/utils.js\";\nimport { useAccordionItemProps } from \"./AccordionItem.js\";\nimport { AccordionItemPropsProvider } from \"./AccordionItemPropsProvider.js\";\nimport type { AccordionItemProps } from \"./AccordionItem.js\";\n\nconst accordionContentVariants = cva(\n    [\n        \"overflow-hidden text-md pr-xxl\",\n        \"transition-all\",\n        \"data-[state=closed]:animate-collapsible-up\",\n        \"data-[state=open]:animate-collapsible-down\"\n    ],\n    {\n        variants: {\n            withIcon: {\n                true: \"pl-xxl\",\n                false: \"pl-md\"\n            },\n            withHandle: {\n                true: \"pl-5\"\n            }\n        },\n        compoundVariants: [\n            {\n                withIcon: true,\n                withHandle: true,\n                className: \"pl-14\"\n            }\n        ],\n        defaultVariants: {\n            withIcon: false,\n            withHandle: false\n        }\n    }\n);\n\nexport interface AccordionContentProps extends React.ComponentPropsWithoutRef<\n    typeof CollapsiblePrimitive.Content\n> {}\n\nexport const AccordionContent = ({ children, className, ...props }: AccordionContentProps) => {\n    const itemProps = useAccordionItemProps();\n    const withIcon = !!itemProps.icon;\n    const withHandle = !!itemProps.handle;\n\n    return (\n        <CollapsiblePrimitive.Content\n            {...props}\n            className={cn(accordionContentVariants({ withHandle, withIcon }), className)}\n        >\n            <AccordionItemPropsProvider props={{} as AccordionItemProps}>\n                <div data-accordion={\"content\"} className=\"pt-sm pb-lg\">\n                    {children}\n                </div>\n            </AccordionItemPropsProvider>\n        </CollapsiblePrimitive.Content>\n    );\n};\n"],"names":["accordionContentVariants","cva","AccordionContent","children","className","props","itemProps","useAccordionItemProps","withIcon","withHandle","CollapsiblePrimitive","cn","AccordionItemPropsProvider"],"mappings":";;;;;AAOA,MAAMA,2BAA2BC,IAC7B;IACI;IACA;IACA;IACA;CACH,EACD;IACI,UAAU;QACN,UAAU;YACN,MAAM;YACN,OAAO;QACX;QACA,YAAY;YACR,MAAM;QACV;IACJ;IACA,kBAAkB;QACd;YACI,UAAU;YACV,YAAY;YACZ,WAAW;QACf;KACH;IACD,iBAAiB;QACb,UAAU;QACV,YAAY;IAChB;AACJ;AAOG,MAAMC,mBAAmB,CAAC,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGC,OAA8B;IACrF,MAAMC,YAAYC;IAClB,MAAMC,WAAW,CAAC,CAACF,UAAU,IAAI;IACjC,MAAMG,aAAa,CAAC,CAACH,UAAU,MAAM;IAErC,OAAO,WAAP,GACI,sCAACI,YAAAA,OAA4B;QACxB,GAAGL,KAAK;QACT,WAAWM,GAAGX,yBAAyB;YAAES;YAAYD;QAAS,IAAIJ;qBAElE,sCAACQ,4BAA0BA;QAAC,OAAO,CAAC;qBAChC,sCAAC;QAAI,kBAAgB;QAAW,WAAU;OACrCT;AAKrB"}

package/Accordion/components/AccordionItem.d.ts

@@ -11,24 +11,26 @@ interface AccordionItemProps extends Omit<AccordionRootProps, "title"> {
     interactive?: boolean;
     locked?: boolean;
     draggable?: boolean;
+    dragHandleRef?: (element: HTMLElement | null) => void;
     actions?: React.ReactNode;
     children: React.ReactNode;
 }
-declare const AccordionItem: ((props: AccordionItemProps) => React.JSX.Element) & {
-    original: (props: AccordionItemProps) => React.JSX.Element;
+declare const AccordionItemBase: (props: AccordionItemProps) => React.JSX.Element;
+declare const AccordionItem: typeof AccordionItemBase & {
+    original: typeof AccordionItemBase;
     originalName: string;
     displayName: string;
 } & {
-    original: ((props: AccordionItemProps) => React.JSX.Element) & {
-        original: (props: AccordionItemProps) => React.JSX.Element;
+    original: typeof AccordionItemBase & {
+        original: typeof AccordionItemBase;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: AccordionItemProps) => React.JSX.Element) & {
-        original: (props: AccordionItemProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof AccordionItemBase & {
+        original: typeof AccordionItemBase;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/Accordion/components/AccordionItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion/components/AccordionItem.js","sources":["../../../src/Accordion/components/AccordionItem.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cva, cn, makeDecoratable, withStaticProps } from \"~/utils.js\";\nimport { AccordionTrigger } from \"./AccordionTrigger.js\";\nimport { AccordionContent } from \"./AccordionContent.js\";\nimport { AccordionItemIcon } from \"./AccordionItemIcon.js\";\nimport { AccordionItemAction } from \"./AccordionItemAction.js\";\nimport { AccordionRoot, type AccordionRootProps } from \"~/Accordion/components/AccordionRoot.js\";\nimport { useAccordionBackground } from \"~/Accordion/components/AccordionBackgroundProvider.js\";\nimport { AccordionItemPropsProvider, useAccordionItemProps } from \"./AccordionItemPropsProvider.js\";\nimport { useAccordionProps } from \"../Accordion.js\";\n\ninterface AccordionItemProps extends Omit<AccordionRootProps, \"title\"> {\n    title: React.ReactNode;\n    subtitle?: React.ReactNode;\n    description?: React.ReactNode;\n    colorMark?: string;\n    icon?: React.ReactNode;\n    handle?: React.ReactNode;\n    interactive?: boolean;\n    locked?: boolean;\n    draggable?: boolean;\n    actions?: React.ReactNode;\n    children: React.ReactNode;\n}\n\nconst accordionItemVariants = cva(\"\", {\n    variants: {\n        locked: {\n            true: \"pointer-events-none\"\n        },\n        background: {\n            base: \"bg-neutral-base\",\n            light: \"bg-neutral-light\",\n            transparent: \"bg-transparent\"\n        },\n        variant: {\n            underline: \"border-b-sm border-b-neutral-dimmed\",\n            container: \"rounded-lg\"\n        },\n        border: {\n            none: \"\",\n            accent: \"\"\n        }\n    },\n    compoundVariants: [\n        {\n            variant: \"container\",\n            border: \"accent\",\n            className: \"border-md border-neutral-dimmed-darker rounded-lg\"\n        }\n    ],\n    defaultVariants: {\n        variant: \"underline\"\n    }\n});\n\nconst AccordionItemBase = (props: AccordionItemProps) => {\n    const providedProps = useAccordionItemProps();\n    const mergedProps = { ...providedProps, ...props };\n    const accordionProps = useAccordionProps();\n    const background = useAccordionBackground(\"light\");\n\n    const { className, defaultOpen, disabled, onOpenChange, open, children, locked } = mergedProps;\n\n    return (\n        <AccordionRoot\n            className={cn(\n                \"group-item data-[state=open]:rounded-bl-lg data-[state=open]:rounded-br-lg\",\n                \"group-[.accordion-variant-container]/accordion:rounded-lg\",\n                \"data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n\n                // Designer had a hover effect that was basically an overlay over the original\n                // bg color. We achieve that with a pseudo element. Dirty but it works well.\n                \"relative\",\n                \"before:absolute before:inset-0 before:pointer-events-none before:rounded-[inherit]\",\n                \"before:bg-neutral-dark/0 before:transition-colors\",\n                \"hover:before:bg-neutral-dark/2\",\n\n                // These are useful for nested accordions.\n                background === \"base\" && \"has-[.group-item:hover]:bg-neutral-base\",\n                background === \"light\" && \"has-[.group-item:hover]:bg-neutral-light\",\n                background === \"transparent\" && \"has-[.group-item:hover]:bg-transparent\",\n                accordionItemVariants({\n                    locked,\n                    background,\n                    variant: accordionProps.variant,\n                    border: accordionProps.border\n                }),\n                className\n            )}\n            defaultOpen={defaultOpen}\n            disabled={disabled}\n            onOpenChange={onOpenChange}\n            open={open}\n        >\n            <AccordionItemPropsProvider props={mergedProps}>\n                <AccordionTrigger />\n                <AccordionContent>{children}</AccordionContent>\n            </AccordionItemPropsProvider>\n        </AccordionRoot>\n    );\n};\n\nconst DecoratableAccordionItem = makeDecoratable(\"AccordionItem\", AccordionItemBase);\n\nconst AccordionItem = withStaticProps(DecoratableAccordionItem, {\n    Icon: AccordionItemIcon,\n    Action: AccordionItemAction\n});\n\nexport { AccordionItem, type AccordionItemProps, useAccordionItemProps };\n"],"names":["accordionItemVariants","cva","AccordionItemBase","props","providedProps","useAccordionItemProps","mergedProps","accordionProps","useAccordionProps","background","useAccordionBackground","className","defaultOpen","disabled","onOpenChange","open","children","locked","AccordionRoot","cn","AccordionItemPropsProvider","AccordionTrigger","AccordionContent","DecoratableAccordionItem","makeDecoratable","AccordionItem","withStaticProps","AccordionItemIcon","AccordionItemAction"],"mappings":";;;;;;;;;;AAyBA,MAAMA,wBAAwBC,IAAI,IAAI;IAClC,UAAU;QACN,QAAQ;YACJ,MAAM;QACV;QACA,YAAY;YACR,MAAM;YACN,OAAO;YACP,aAAa;QACjB;QACA,SAAS;YACL,WAAW;YACX,WAAW;QACf;QACA,QAAQ;YACJ,MAAM;YACN,QAAQ;QACZ;IACJ;IACA,kBAAkB;QACd;YACI,SAAS;YACT,QAAQ;YACR,WAAW;QACf;KACH;IACD,iBAAiB;QACb,SAAS;IACb;AACJ;AAEA,MAAMC,oBAAoB,CAACC;IACvB,MAAMC,gBAAgBC;IACtB,MAAMC,cAAc;QAAE,GAAGF,aAAa;QAAE,GAAGD,KAAK;IAAC;IACjD,MAAMI,iBAAiBC;IACvB,MAAMC,aAAaC,uBAAuB;IAE1C,MAAM,EAAEC,SAAS,EAAEC,WAAW,EAAEC,QAAQ,EAAEC,YAAY,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,MAAM,EAAE,GAAGX;IAEnF,OAAO,WAAP,GACI,sCAACY,eAAaA;QACV,WAAWC,GACP,8EACA,6DACA,kEAIA,YACA,sFACA,qDACA,kCAGAV,AAAe,WAAfA,cAAyB,2CACzBA,AAAe,YAAfA,cAA0B,4CAC1BA,AAAe,kBAAfA,cAAgC,0CAChCT,sBAAsB;YAClBiB;YACAR;YACA,SAASF,eAAe,OAAO;YAC/B,QAAQA,eAAe,MAAM;QACjC,IACAI;QAEJ,aAAaC;QACb,UAAUC;QACV,cAAcC;QACd,MAAMC;qBAEN,sCAACK,4BAA0BA;QAAC,OAAOd;qBAC/B,sCAACe,kBAAgBA,OAAAA,WAAAA,GACjB,sCAACC,kBAAgBA,MAAEN;AAInC;AAEA,MAAMO,2BAA2BC,gBAAgB,iBAAiBtB;AAElE,MAAMuB,gBAAgBC,gBAAgBH,0BAA0B;IAC5D,MAAMI;IACN,QAAQC;AACZ"}
+{"version":3,"file":"Accordion/components/AccordionItem.js","sources":["../../../src/Accordion/components/AccordionItem.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cva, cn, makeDecoratable, withStaticProps } from \"~/utils.js\";\nimport { AccordionTrigger } from \"./AccordionTrigger.js\";\nimport { AccordionContent } from \"./AccordionContent.js\";\nimport { AccordionItemIcon } from \"./AccordionItemIcon.js\";\nimport { AccordionItemAction } from \"./AccordionItemAction.js\";\nimport { AccordionRoot, type AccordionRootProps } from \"~/Accordion/components/AccordionRoot.js\";\nimport { useAccordionBackground } from \"~/Accordion/components/AccordionBackgroundProvider.js\";\nimport { AccordionItemPropsProvider, useAccordionItemProps } from \"./AccordionItemPropsProvider.js\";\nimport { useAccordionProps } from \"../Accordion.js\";\n\ninterface AccordionItemProps extends Omit<AccordionRootProps, \"title\"> {\n    title: React.ReactNode;\n    subtitle?: React.ReactNode;\n    description?: React.ReactNode;\n    colorMark?: string;\n    icon?: React.ReactNode;\n    handle?: React.ReactNode;\n    interactive?: boolean;\n    locked?: boolean;\n    draggable?: boolean;\n    dragHandleRef?: (element: HTMLElement | null) => void;\n    actions?: React.ReactNode;\n    children: React.ReactNode;\n}\n\nconst accordionItemVariants = cva(\"\", {\n    variants: {\n        locked: {\n            true: \"pointer-events-none\"\n        },\n        background: {\n            base: \"bg-neutral-base\",\n            light: \"bg-neutral-light\",\n            transparent: \"bg-transparent\"\n        },\n        variant: {\n            underline: \"border-b-sm border-b-neutral-dimmed\",\n            container: \"rounded-lg\"\n        },\n        border: {\n            none: \"\",\n            accent: \"\"\n        }\n    },\n    compoundVariants: [\n        {\n            variant: \"container\",\n            border: \"accent\",\n            className: \"border-md border-neutral-dimmed-darker rounded-lg\"\n        }\n    ],\n    defaultVariants: {\n        variant: \"underline\"\n    }\n});\n\nconst AccordionItemBase = (props: AccordionItemProps) => {\n    const providedProps = useAccordionItemProps();\n    const mergedProps = { ...providedProps, ...props };\n    const accordionProps = useAccordionProps();\n    const background = useAccordionBackground(\"light\");\n\n    const { className, defaultOpen, disabled, onOpenChange, open, children, locked } = mergedProps;\n\n    return (\n        <AccordionRoot\n            className={cn(\n                \"group-item data-[state=open]:rounded-bl-lg data-[state=open]:rounded-br-lg\",\n                \"group-[.accordion-variant-container]/accordion:rounded-lg\",\n                \"data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n\n                // Designer had a hover effect that was basically an overlay over the original\n                // bg color. We achieve that with a pseudo element. Dirty but it works well.\n                \"relative\",\n                \"before:absolute before:inset-0 before:pointer-events-none before:rounded-[inherit]\",\n                \"before:bg-neutral-dark/0 before:transition-colors\",\n                \"hover:before:bg-neutral-dark/2\",\n\n                // These are useful for nested accordions.\n                background === \"base\" && \"has-[.group-item:hover]:bg-neutral-base\",\n                background === \"light\" && \"has-[.group-item:hover]:bg-neutral-light\",\n                background === \"transparent\" && \"has-[.group-item:hover]:bg-transparent\",\n                accordionItemVariants({\n                    locked,\n                    background,\n                    variant: accordionProps.variant,\n                    border: accordionProps.border\n                }),\n                className\n            )}\n            defaultOpen={defaultOpen}\n            disabled={disabled}\n            onOpenChange={onOpenChange}\n            open={open}\n        >\n            <AccordionItemPropsProvider props={mergedProps}>\n                <AccordionTrigger />\n                <AccordionContent>{children}</AccordionContent>\n            </AccordionItemPropsProvider>\n        </AccordionRoot>\n    );\n};\n\nconst DecoratableAccordionItem = makeDecoratable(\"AccordionItem\", AccordionItemBase);\n\nconst AccordionItem = withStaticProps(DecoratableAccordionItem, {\n    Icon: AccordionItemIcon,\n    Action: AccordionItemAction\n});\n\nexport { AccordionItem, type AccordionItemProps, useAccordionItemProps };\n"],"names":["accordionItemVariants","cva","AccordionItemBase","props","providedProps","useAccordionItemProps","mergedProps","accordionProps","useAccordionProps","background","useAccordionBackground","className","defaultOpen","disabled","onOpenChange","open","children","locked","AccordionRoot","cn","AccordionItemPropsProvider","AccordionTrigger","AccordionContent","DecoratableAccordionItem","makeDecoratable","AccordionItem","withStaticProps","AccordionItemIcon","AccordionItemAction"],"mappings":";;;;;;;;;;AA0BA,MAAMA,wBAAwBC,IAAI,IAAI;IAClC,UAAU;QACN,QAAQ;YACJ,MAAM;QACV;QACA,YAAY;YACR,MAAM;YACN,OAAO;YACP,aAAa;QACjB;QACA,SAAS;YACL,WAAW;YACX,WAAW;QACf;QACA,QAAQ;YACJ,MAAM;YACN,QAAQ;QACZ;IACJ;IACA,kBAAkB;QACd;YACI,SAAS;YACT,QAAQ;YACR,WAAW;QACf;KACH;IACD,iBAAiB;QACb,SAAS;IACb;AACJ;AAEA,MAAMC,oBAAoB,CAACC;IACvB,MAAMC,gBAAgBC;IACtB,MAAMC,cAAc;QAAE,GAAGF,aAAa;QAAE,GAAGD,KAAK;IAAC;IACjD,MAAMI,iBAAiBC;IACvB,MAAMC,aAAaC,uBAAuB;IAE1C,MAAM,EAAEC,SAAS,EAAEC,WAAW,EAAEC,QAAQ,EAAEC,YAAY,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,MAAM,EAAE,GAAGX;IAEnF,OAAO,WAAP,GACI,sCAACY,eAAaA;QACV,WAAWC,GACP,8EACA,6DACA,kEAIA,YACA,sFACA,qDACA,kCAGAV,AAAe,WAAfA,cAAyB,2CACzBA,AAAe,YAAfA,cAA0B,4CAC1BA,AAAe,kBAAfA,cAAgC,0CAChCT,sBAAsB;YAClBiB;YACAR;YACA,SAASF,eAAe,OAAO;YAC/B,QAAQA,eAAe,MAAM;QACjC,IACAI;QAEJ,aAAaC;QACb,UAAUC;QACV,cAAcC;QACd,MAAMC;qBAEN,sCAACK,4BAA0BA;QAAC,OAAOd;qBAC/B,sCAACe,kBAAgBA,OAAAA,WAAAA,GACjB,sCAACC,kBAAgBA,MAAEN;AAInC;AAEA,MAAMO,2BAA2BC,gBAAgB,iBAAiBtB;AAElE,MAAMuB,gBAAgBC,gBAAgBH,0BAA0B;IAC5D,MAAMI;IACN,QAAQC;AACZ"}

package/Accordion/components/AccordionItemAction.d.ts

@@ -1,21 +1,22 @@
 import * as React from "react";
 import type { IconButtonProps } from "../../Button/index.js";
 type AccordionItemActionProps = IconButtonProps;
-declare const AccordionItemAction: (({ onClick, ...props }: AccordionItemActionProps) => React.JSX.Element) & {
-    original: ({ onClick, ...props }: AccordionItemActionProps) => React.JSX.Element;
+declare const AccordionItemActionBase: ({ onClick, ...props }: AccordionItemActionProps) => React.JSX.Element;
+declare const AccordionItemAction: typeof AccordionItemActionBase & {
+    original: typeof AccordionItemActionBase;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ onClick, ...props }: AccordionItemActionProps) => React.JSX.Element) & {
-        original: ({ onClick, ...props }: AccordionItemActionProps) => React.JSX.Element;
+    original: typeof AccordionItemActionBase & {
+        original: typeof AccordionItemActionBase;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ onClick, ...props }: AccordionItemActionProps) => React.JSX.Element) & {
-        original: ({ onClick, ...props }: AccordionItemActionProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof AccordionItemActionBase & {
+        original: typeof AccordionItemActionBase;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/Accordion/components/AccordionItemDragHandle.d.ts

@@ -3,6 +3,7 @@ import { type IconButtonProps } from "../../Button/index.js";
 interface AccordionItemDragHandleProps extends Omit<IconButtonProps, "icon"> {
     icon?: React.ReactElement;
     label?: string;
+    dragHandleRef?: (element: HTMLElement | null) => void;
 }
-declare const AccordionItemDragHandle: ({ onClick, className, ...props }: AccordionItemDragHandleProps) => React.JSX.Element;
+declare const AccordionItemDragHandle: ({ onClick, className, dragHandleRef, ...props }: AccordionItemDragHandleProps) => React.JSX.Element;
 export { AccordionItemDragHandle, type AccordionItemDragHandleProps };

package/Accordion/components/AccordionItemDragHandle.js

@@ -3,7 +3,7 @@ import { Icon } from "../../Icon/index.js";
 import { IconButton } from "../../Button/index.js";
 import { cn } from "../../utils.js";
 import * as __rspack_external_react from "react";
-const AccordionItemDragHandle = ({ onClick, className, ...props })=>{
+const AccordionItemDragHandle = ({ onClick, className, dragHandleRef, ...props })=>{
     const onClickCallback = __rspack_external_react.useCallback((e)=>{
         e.stopPropagation();
         if (onClick) onClick(e);
@@ -11,6 +11,7 @@ const AccordionItemDragHandle = ({ onClick, className, ...props })=>{
         onClick
     ]);
     return /*#__PURE__*/ __rspack_external_react.createElement("span", {
+        ref: dragHandleRef,
         className: cn([
             "absolute top-1/2 -left-sm -translate-y-sm",
             "invisible group-hover/trigger:visible"

package/Accordion/components/AccordionItemDragHandle.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion/components/AccordionItemDragHandle.js","sources":["../../../src/Accordion/components/AccordionItemDragHandle.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { ReactComponent as DragHandleIcon } from \"@webiny/icons/drag_indicator.svg\";\nimport { Icon } from \"~/Icon/index.js\";\nimport { IconButton, type IconButtonProps } from \"~/Button/index.js\";\nimport { cn } from \"~/utils.js\";\n\ninterface AccordionItemDragHandleProps extends Omit<IconButtonProps, \"icon\"> {\n    icon?: React.ReactElement;\n    label?: string;\n}\n\nconst AccordionItemDragHandle = ({\n    onClick,\n    className,\n    ...props\n}: AccordionItemDragHandleProps) => {\n    // We need to stop the event propagation to prevent the accordion from opening/closing when the handle is clicked.\n    const onClickCallback = React.useCallback(\n        (e: React.MouseEvent<HTMLButtonElement>) => {\n            e.stopPropagation();\n\n            if (onClick) {\n                onClick(e);\n            }\n        },\n        [onClick]\n    );\n\n    return (\n        <span\n            className={cn(\n                [\n                    \"absolute top-1/2 -left-sm -translate-y-sm\",\n                    \"invisible group-hover/trigger:visible\"\n                ],\n                className\n            )}\n        >\n            <IconButton\n                {...props}\n                onClick={onClickCallback}\n                size={\"xs\"}\n                iconSize={\"default\"}\n                variant={\"secondary\"}\n                className={\"cursor-grab\"}\n                icon={\n                    <Icon\n                        size={\"sm\"}\n                        color={\"neutral-strong\"}\n                        icon={<DragHandleIcon />}\n                        label={\"Drag handle\"}\n                    />\n                }\n            />\n        </span>\n    );\n};\n\nexport { AccordionItemDragHandle, type AccordionItemDragHandleProps };\n"],"names":["AccordionItemDragHandle","onClick","className","props","onClickCallback","React","e","cn","IconButton","Icon","DragHandleIcon"],"mappings":";;;;;AAWA,MAAMA,0BAA0B,CAAC,EAC7BC,OAAO,EACPC,SAAS,EACT,GAAGC,OACwB;IAE3B,MAAMC,kBAAkBC,wBAAAA,WAAiB,CACrC,CAACC;QACGA,EAAE,eAAe;QAEjB,IAAIL,SACAA,QAAQK;IAEhB,GACA;QAACL;KAAQ;IAGb,OAAO,WAAP,GACI,sCAAC;QACG,WAAWM,GACP;YACI;YACA;SACH,EACDL;qBAGJ,sCAACM,YAAUA;QACN,GAAGL,KAAK;QACT,SAASC;QACT,MAAM;QACN,UAAU;QACV,SAAS;QACT,WAAW;QACX,oBACI,sCAACK,MAAIA;YACD,MAAM;YACN,OAAO;YACP,oBAAM,sCAACC,gBAAcA;YACrB,OAAO;;;AAM/B"}
+{"version":3,"file":"Accordion/components/AccordionItemDragHandle.js","sources":["../../../src/Accordion/components/AccordionItemDragHandle.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { ReactComponent as DragHandleIcon } from \"@webiny/icons/drag_indicator.svg\";\nimport { Icon } from \"~/Icon/index.js\";\nimport { IconButton, type IconButtonProps } from \"~/Button/index.js\";\nimport { cn } from \"~/utils.js\";\n\ninterface AccordionItemDragHandleProps extends Omit<IconButtonProps, \"icon\"> {\n    icon?: React.ReactElement;\n    label?: string;\n    dragHandleRef?: (element: HTMLElement | null) => void;\n}\n\nconst AccordionItemDragHandle = ({\n    onClick,\n    className,\n    dragHandleRef,\n    ...props\n}: AccordionItemDragHandleProps) => {\n    // We need to stop the event propagation to prevent the accordion from opening/closing when the handle is clicked.\n    const onClickCallback = React.useCallback(\n        (e: React.MouseEvent<HTMLButtonElement>) => {\n            e.stopPropagation();\n\n            if (onClick) {\n                onClick(e);\n            }\n        },\n        [onClick]\n    );\n\n    return (\n        <span\n            ref={dragHandleRef as React.Ref<HTMLSpanElement>}\n            className={cn(\n                [\n                    \"absolute top-1/2 -left-sm -translate-y-sm\",\n                    \"invisible group-hover/trigger:visible\"\n                ],\n                className\n            )}\n        >\n            <IconButton\n                {...props}\n                onClick={onClickCallback}\n                size={\"xs\"}\n                iconSize={\"default\"}\n                variant={\"secondary\"}\n                className={\"cursor-grab\"}\n                icon={\n                    <Icon\n                        size={\"sm\"}\n                        color={\"neutral-strong\"}\n                        icon={<DragHandleIcon />}\n                        label={\"Drag handle\"}\n                    />\n                }\n            />\n        </span>\n    );\n};\n\nexport { AccordionItemDragHandle, type AccordionItemDragHandleProps };\n"],"names":["AccordionItemDragHandle","onClick","className","dragHandleRef","props","onClickCallback","React","e","cn","IconButton","Icon","DragHandleIcon"],"mappings":";;;;;AAYA,MAAMA,0BAA0B,CAAC,EAC7BC,OAAO,EACPC,SAAS,EACTC,aAAa,EACb,GAAGC,OACwB;IAE3B,MAAMC,kBAAkBC,wBAAAA,WAAiB,CACrC,CAACC;QACGA,EAAE,eAAe;QAEjB,IAAIN,SACAA,QAAQM;IAEhB,GACA;QAACN;KAAQ;IAGb,OAAO,WAAP,GACI,sCAAC;QACG,KAAKE;QACL,WAAWK,GACP;YACI;YACA;SACH,EACDN;qBAGJ,sCAACO,YAAUA;QACN,GAAGL,KAAK;QACT,SAASC;QACT,MAAM;QACN,UAAU;QACV,SAAS;QACT,WAAW;QACX,oBACI,sCAACK,MAAIA;YACD,MAAM;YACN,OAAO;YACP,oBAAM,sCAACC,gBAAcA;YACrB,OAAO;;;AAM/B"}

package/Accordion/components/AccordionItemIcon.d.ts

@@ -1,21 +1,22 @@
 import * as React from "react";
 import type { IconProps as IconComponentProps } from "../../Icon/index.js";
 type AccordionItemIconProps = IconComponentProps;
-export declare const AccordionItemIcon: ((props: AccordionItemIconProps) => React.JSX.Element) & {
-    original: (props: AccordionItemIconProps) => React.JSX.Element;
+declare const AccordionItemIconBase: (props: AccordionItemIconProps) => React.JSX.Element;
+export declare const AccordionItemIcon: typeof AccordionItemIconBase & {
+    original: typeof AccordionItemIconBase;
     originalName: string;
     displayName: string;
 } & {
-    original: ((props: AccordionItemIconProps) => React.JSX.Element) & {
-        original: (props: AccordionItemIconProps) => React.JSX.Element;
+    original: typeof AccordionItemIconBase & {
+        original: typeof AccordionItemIconBase;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<((props: AccordionItemIconProps) => React.JSX.Element) & {
-        original: (props: AccordionItemIconProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<typeof AccordionItemIconBase & {
+        original: typeof AccordionItemIconBase;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/Accordion/components/AccordionItemSeparator.d.ts

@@ -1,21 +1,22 @@
 import * as React from "react";
 import { type SeparatorProps } from "../../Separator/index.js";
 type AccordionItemSeparatorProps = SeparatorProps;
-export declare const AccordionItemSeparator: ((props: AccordionItemSeparatorProps) => React.JSX.Element) & {
-    original: (props: AccordionItemSeparatorProps) => React.JSX.Element;
+declare const AccordionItemSeparatorBase: (props: AccordionItemSeparatorProps) => React.JSX.Element;
+export declare const AccordionItemSeparator: typeof AccordionItemSeparatorBase & {
+    original: typeof AccordionItemSeparatorBase;
     originalName: string;
     displayName: string;
 } & {
-    original: ((props: AccordionItemSeparatorProps) => React.JSX.Element) & {
-        original: (props: AccordionItemSeparatorProps) => React.JSX.Element;
+    original: typeof AccordionItemSeparatorBase & {
+        original: typeof AccordionItemSeparatorBase;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<((props: AccordionItemSeparatorProps) => React.JSX.Element) & {
-        original: (props: AccordionItemSeparatorProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<typeof AccordionItemSeparatorBase & {
+        original: typeof AccordionItemSeparatorBase;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/Accordion/components/AccordionTrigger.js

@@ -17,7 +17,7 @@ const OpenCloseIndicator = ()=>/*#__PURE__*/ __rspack_external_react.createEleme
         icon: /*#__PURE__*/ __rspack_external_react.createElement(ReactComponent, null)
     });
 const AccordionTrigger = ()=>{
-    const { title, subtitle, description, colorMark, actions, icon, interactive = true, locked, draggable } = useAccordionItemProps();
+    const { title, subtitle, description, colorMark, actions, icon, interactive = true, locked, draggable, dragHandleRef } = useAccordionItemProps();
     const accordionProps = useAccordionProps();
     const openClosedIndicatorPosition = accordionProps.openClosedIndicatorPosition || "right";
     const divAsButtonProps = __rspack_external_react.useMemo(()=>({
@@ -38,7 +38,9 @@ const AccordionTrigger = ()=>{
     }, /*#__PURE__*/ __rspack_external_react.createElement("div", {
         ...divAsButtonProps,
         className: cn("group/trigger w-full flex items-center relative min-h-[62px]", "focus-visible:outline-none focus-visible:border-none focus-visible:ring-sm focus-visible:ring-primary-dimmed", "group-[.accordion-variant-container]:rounded-lg", "[&[data-state=open]_[data-role=open-close-indicator]]:rotate-180 border-l-accent", interactive ? "cursor-pointer" : "cursor-default")
-    }, draggable ? /*#__PURE__*/ __rspack_external_react.createElement(AccordionItemDragHandle, null) : null, colorMark && /*#__PURE__*/ __rspack_external_react.createElement("div", {
+    }, draggable ? /*#__PURE__*/ __rspack_external_react.createElement(AccordionItemDragHandle, {
+        dragHandleRef: dragHandleRef
+    }) : null, colorMark && /*#__PURE__*/ __rspack_external_react.createElement("div", {
         style: {
             backgroundColor: colorMark
         },