@webiny/admin-ui 0.0.0-unstable.a4637c5ce6 → 0.0.0-unstable.a4f3e4ea8b

package/Accordion/Accordion.stories.js

@@ -1,331 +1,695 @@
-import React, { useState } from "react";
-import { Accordion } from "./Accordion";
-import { ReactComponent as WarningIcon } from "@webiny/icons/insert_chart.svg";
-import { ReactComponent as ArrowUp } from "@webiny/icons/arrow_upward.svg";
-import { ReactComponent as ArrowDown } from "@webiny/icons/arrow_downward.svg";
-import { ReactComponent as EditIcon } from "@webiny/icons/edit.svg";
-import { ReactComponent as TrashIcon } from "@webiny/icons/delete.svg";
-import { Button } from "../Button";
+import react, { useState } from "react";
+import { Accordion } from "./Accordion.js";
+import { ReactComponent } from "@webiny/icons/insert_chart.svg";
+import { ReactComponent as arrow_upward_svg_ReactComponent } from "@webiny/icons/arrow_upward.svg";
+import { ReactComponent as arrow_downward_svg_ReactComponent } from "@webiny/icons/arrow_downward.svg";
+import { ReactComponent as edit_svg_ReactComponent } from "@webiny/icons/edit.svg";
+import { ReactComponent as delete_svg_ReactComponent } from "@webiny/icons/delete.svg";
+import { Button } from "../Button/index.js";
 const meta = {
-  title: "Components/Accordion",
-  component: Accordion,
-  argTypes: {},
-  decorators: [Story => /*#__PURE__*/React.createElement("div", {
-    className: "wby-w-[750px] wby-p-[50px] wby-min-h-[500px] wby-bg-[#f6f7f8]"
-  }, /*#__PURE__*/React.createElement(Story, null))],
-  render: args => {
-    return /*#__PURE__*/React.createElement(Accordion, args);
-  }
+    title: "Components/Accordion",
+    component: Accordion,
+    render: (args)=>/*#__PURE__*/ react.createElement(Accordion, args)
 };
-export default meta;
-const AccordionItem = props => {
-  return /*#__PURE__*/React.createElement(Accordion.Item, Object.assign({
-    title: `Accordion item ${props.index}`
-  }, props), "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet convallis nec, consequat non nulla. Nunc sit amet sagittis tellus. Etiam venenatis, odio sed consectetur consectetur, quam quam blandit ante, semper maximus lorem est vel dolor. Praesent ac neque rutrum, elementum turpis et, vulputate enim. In ex lorem,");
+const Accordion_stories = meta;
+const LightGreyBackground = (Story)=>/*#__PURE__*/ react.createElement("div", {
+        className: "w-[750px] p-[50px] min-h-[500px] bg-[#f6f7f8]"
+    }, /*#__PURE__*/ react.createElement(Story, null));
+const WhiteBackground = (Story)=>/*#__PURE__*/ react.createElement("div", {
+        className: "w-[750px] p-[50px] min-h-[500px] bg-white"
+    }, /*#__PURE__*/ react.createElement(Story, null));
+const NoBackground = (Story)=>/*#__PURE__*/ react.createElement("div", {
+        className: "w-[750px] p-[50px] min-h-[500px]"
+    }, /*#__PURE__*/ react.createElement(Story, null));
+const AccordionItem = (props)=>/*#__PURE__*/ react.createElement(Accordion.Item, {
+        title: `Accordion item ${props.index}`,
+        ...props
+    }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet convallis nec, consequat non nulla. Nunc sit amet sagittis tellus. Etiam venenatis, odio sed consectetur consectetur, quam quam blandit ante, semper maximus lorem est vel dolor. Praesent ac neque rutrum, elementum turpis et, vulputate enim. In ex lorem,");
+const Default = {
+    args: {
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(AccordionItem, {
+            index: 1
+        }), /*#__PURE__*/ react.createElement(AccordionItem, {
+            index: 2
+        }), /*#__PURE__*/ react.createElement(AccordionItem, {
+            index: 3
+        }))
+    },
+    decorators: [
+        LightGreyBackground
+    ]
 };
-export const Default = {
-  args: {
-    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AccordionItem, {
-      index: 1
-    }), /*#__PURE__*/React.createElement(AccordionItem, {
-      index: 2
-    }), /*#__PURE__*/React.createElement(AccordionItem, {
-      index: 3
-    }))
-  }
+const UnderlineVariant = {
+    ...Default,
+    args: {
+        variant: "underline",
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(AccordionItem, {
+            index: 1,
+            description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+            icon: /*#__PURE__*/ react.createElement(Accordion.Item.Icon, {
+                icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+                label: "Warning icon"
+            })
+        }), /*#__PURE__*/ react.createElement(AccordionItem, {
+            index: 2,
+            description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+            icon: /*#__PURE__*/ react.createElement(Accordion.Item.Icon, {
+                icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+                label: "Warning icon"
+            })
+        }))
+    }
 };
-export const WithDescriptions = {
-  ...Default,
-  args: {
-    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AccordionItem, {
-      index: 1,
-      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
-    }), /*#__PURE__*/React.createElement(AccordionItem, {
-      index: 2,
-      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
-    }), /*#__PURE__*/React.createElement(AccordionItem, {
-      index: 3,
-      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
-    }))
-  },
-  argTypes: {}
+const ContainerVariant = {
+    ...Default,
+    args: {
+        variant: "container",
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(AccordionItem, {
+            index: 1,
+            description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+            icon: /*#__PURE__*/ react.createElement(Accordion.Item.Icon, {
+                icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+                label: "Warning icon"
+            })
+        }), /*#__PURE__*/ react.createElement(AccordionItem, {
+            index: 2,
+            description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+            icon: /*#__PURE__*/ react.createElement(Accordion.Item.Icon, {
+                icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+                label: "Warning icon"
+            })
+        }))
+    }
 };
-export const WithIcon = {
-  ...Default,
-  args: {
-    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AccordionItem, {
-      index: 1,
-      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-      icon: /*#__PURE__*/React.createElement(Accordion.Item.Icon, {
-        icon: /*#__PURE__*/React.createElement(WarningIcon, null),
-        label: "Warning icon"
-      })
-    }), /*#__PURE__*/React.createElement(AccordionItem, {
-      index: 2,
-      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-      icon: /*#__PURE__*/React.createElement(Accordion.Item.Icon, {
-        icon: /*#__PURE__*/React.createElement(WarningIcon, null),
-        label: "Warning icon"
-      })
-    }))
-  }
+const ContainerVariantWithAccentBorder = {
+    ...Default,
+    args: {
+        variant: "container",
+        border: "accent",
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(AccordionItem, {
+            index: 1,
+            description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+            icon: /*#__PURE__*/ react.createElement(Accordion.Item.Icon, {
+                icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+                label: "Warning icon"
+            })
+        }), /*#__PURE__*/ react.createElement(AccordionItem, {
+            index: 2,
+            description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+            icon: /*#__PURE__*/ react.createElement(Accordion.Item.Icon, {
+                icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+                label: "Warning icon"
+            })
+        }))
+    }
 };
-export const WithActionsIcon = {
-  ...Default,
-  args: {
-    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AccordionItem, {
-      index: 1,
-      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-      icon: /*#__PURE__*/React.createElement(Accordion.Item.Icon, {
-        icon: /*#__PURE__*/React.createElement(WarningIcon, null),
-        label: "Warning icon"
-      }),
-      actions: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Accordion.Item.Action, {
-        icon: /*#__PURE__*/React.createElement(ArrowUp, null)
-      }), /*#__PURE__*/React.createElement(Accordion.Item.Action, {
-        icon: /*#__PURE__*/React.createElement(ArrowDown, null)
-      }), /*#__PURE__*/React.createElement(Accordion.Item.Action.Separator, null), /*#__PURE__*/React.createElement(Accordion.Item.Action, {
-        icon: /*#__PURE__*/React.createElement(EditIcon, null)
-      }), /*#__PURE__*/React.createElement(Accordion.Item.Action, {
-        icon: /*#__PURE__*/React.createElement(TrashIcon, null)
-      }))
-    }), /*#__PURE__*/React.createElement(AccordionItem, {
-      index: 2,
-      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-      icon: /*#__PURE__*/React.createElement(Accordion.Item.Icon, {
-        icon: /*#__PURE__*/React.createElement(WarningIcon, null),
-        label: "Warning icon"
-      }),
-      actions: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Accordion.Item.Action, {
-        icon: /*#__PURE__*/React.createElement(ArrowUp, null)
-      }), /*#__PURE__*/React.createElement(Accordion.Item.Action, {
-        icon: /*#__PURE__*/React.createElement(ArrowDown, null)
-      }), /*#__PURE__*/React.createElement(Accordion.Item.Action.Separator, null), /*#__PURE__*/React.createElement(Accordion.Item.Action, {
-        icon: /*#__PURE__*/React.createElement(EditIcon, null)
-      }), /*#__PURE__*/React.createElement(Accordion.Item.Action, {
-        icon: /*#__PURE__*/React.createElement(TrashIcon, null)
-      }))
-    }))
-  }
+const ContainerVariantWithBaseBackground = {
+    decorators: [
+        WhiteBackground
+    ],
+    args: {
+        variant: "container",
+        background: "base",
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(AccordionItem, {
+            index: 1,
+            description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+            icon: /*#__PURE__*/ react.createElement(Accordion.Item.Icon, {
+                icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+                label: "Warning icon"
+            })
+        }), /*#__PURE__*/ react.createElement(AccordionItem, {
+            index: 2,
+            description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+            icon: /*#__PURE__*/ react.createElement(Accordion.Item.Icon, {
+                icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+                label: "Warning icon"
+            })
+        }))
+    }
 };
-export const WithDraggableItem = {
-  ...Default,
-  args: {
-    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AccordionItem, {
-      index: 1,
-      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-      icon: /*#__PURE__*/React.createElement(Accordion.Item.Icon, {
-        icon: /*#__PURE__*/React.createElement(WarningIcon, null),
-        label: "Warning icon"
-      }),
-      draggable: true
-    }), /*#__PURE__*/React.createElement(AccordionItem, {
-      index: 2,
-      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-      draggable: true
-    }), /*#__PURE__*/React.createElement(AccordionItem, {
-      index: 3,
-      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
-    }))
-  }
+const LightBackground = {
+    ...Default,
+    args: {
+        background: "light",
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(AccordionItem, {
+            index: 1,
+            description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+            icon: /*#__PURE__*/ react.createElement(Accordion.Item.Icon, {
+                icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+                label: "Warning icon"
+            })
+        }), /*#__PURE__*/ react.createElement(AccordionItem, {
+            index: 2,
+            description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+            icon: /*#__PURE__*/ react.createElement(Accordion.Item.Icon, {
+                icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+                label: "Warning icon"
+            })
+        }))
+    }
 };
-export const WithNotInteractiveItem = {
-  ...Default,
-  args: {
-    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AccordionItem, {
-      index: 1,
-      description: "Not interactive item.",
-      interactive: false
-    }), /*#__PURE__*/React.createElement(AccordionItem, {
-      index: 2
-    }), /*#__PURE__*/React.createElement(AccordionItem, {
-      index: 3
-    }))
-  }
+const BaseBackground = {
+    ...Default,
+    decorators: [
+        NoBackground
+    ],
+    args: {
+        background: "base",
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(AccordionItem, {
+            index: 1,
+            description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+            icon: /*#__PURE__*/ react.createElement(Accordion.Item.Icon, {
+                icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+                label: "Warning icon"
+            })
+        }), /*#__PURE__*/ react.createElement(AccordionItem, {
+            index: 2,
+            description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+            icon: /*#__PURE__*/ react.createElement(Accordion.Item.Icon, {
+                icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+                label: "Warning icon"
+            })
+        }))
+    }
 };
-export const WithDefaultOpenedItem = {
-  ...Default,
-  args: {
-    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AccordionItem, {
-      index: 1,
-      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
-    }), /*#__PURE__*/React.createElement(AccordionItem, {
-      index: 2,
-      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-      defaultOpen: true
-    }))
-  }
+const WithDescriptions = {
+    ...Default,
+    args: {
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(AccordionItem, {
+            index: 1,
+            description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+        }), /*#__PURE__*/ react.createElement(AccordionItem, {
+            index: 2,
+            description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+        }), /*#__PURE__*/ react.createElement(AccordionItem, {
+            index: 3,
+            description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+        }))
+    },
+    argTypes: {}
 };
-export const WithDisabledItem = {
-  ...Default,
-  args: {
-    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AccordionItem, {
-      index: 1,
-      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
-    }), /*#__PURE__*/React.createElement(AccordionItem, {
-      index: 2,
-      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-      disabled: true
-    }), /*#__PURE__*/React.createElement(AccordionItem, {
-      index: 3,
-      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-      defaultOpen: true,
-      disabled: true
-    }))
-  }
+const WithSubtitles = {
+    ...Default,
+    args: {
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(AccordionItem, {
+            index: 1,
+            subtitle: "(Lorem ipsum dolor sit amet...)"
+        }), /*#__PURE__*/ react.createElement(AccordionItem, {
+            index: 2,
+            subtitle: "(Lorem ipsum dolor sit amet...)"
+        }), /*#__PURE__*/ react.createElement(AccordionItem, {
+            index: 3,
+            subtitle: "(Lorem ipsum dolor sit amet...)"
+        }))
+    },
+    argTypes: {}
 };
-export const WithControlledOpenedItem = {
-  ...Default,
-  render: args => {
-    const [openFirstItem, setOpenFirstItem] = useState();
-    const [openSecondItem, setOpenSecondItem] = useState();
-    const [openThirdItem, setOpenThirdItem] = useState();
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Accordion, args, /*#__PURE__*/React.createElement(AccordionItem, {
-      index: 1,
-      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-      open: openFirstItem,
-      onOpenChange: open => setOpenFirstItem(open)
-    }), /*#__PURE__*/React.createElement(AccordionItem, {
-      index: 2,
-      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-      open: openSecondItem,
-      onOpenChange: open => setOpenSecondItem(open)
-    }), /*#__PURE__*/React.createElement(AccordionItem, {
-      index: 3,
-      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-      open: openThirdItem,
-      onOpenChange: open => setOpenThirdItem(open)
-    })), /*#__PURE__*/React.createElement("div", {
-      className: "wby-flex wby-justify-center wby-mt-lg wby-gap-md"
-    }, /*#__PURE__*/React.createElement(Button, {
-      onClick: () => setOpenFirstItem(!openFirstItem),
-      text: "Toggle First Item"
-    }), /*#__PURE__*/React.createElement(Button, {
-      onClick: () => setOpenSecondItem(!openSecondItem),
-      text: "Toggle Second Item"
-    }), /*#__PURE__*/React.createElement(Button, {
-      onClick: () => setOpenThirdItem(!openThirdItem),
-      text: "Toggle Third Item"
-    })));
-  }
+const WithIcon = {
+    ...Default,
+    args: {
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(AccordionItem, {
+            index: 1,
+            description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+            icon: /*#__PURE__*/ react.createElement(Accordion.Item.Icon, {
+                icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+                label: "Warning icon"
+            })
+        }), /*#__PURE__*/ react.createElement(AccordionItem, {
+            index: 2,
+            description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+            icon: /*#__PURE__*/ react.createElement(Accordion.Item.Icon, {
+                icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+                label: "Warning icon"
+            })
+        }))
+    }
+};
+const WithActionsIcon = {
+    ...Default,
+    args: {
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(AccordionItem, {
+            index: 1,
+            description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+            icon: /*#__PURE__*/ react.createElement(Accordion.Item.Icon, {
+                icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+                label: "Warning icon"
+            }),
+            actions: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+                icon: /*#__PURE__*/ react.createElement(arrow_upward_svg_ReactComponent, null)
+            }), /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+                icon: /*#__PURE__*/ react.createElement(arrow_downward_svg_ReactComponent, null)
+            }), /*#__PURE__*/ react.createElement(Accordion.Item.Action.Separator, null), /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+                icon: /*#__PURE__*/ react.createElement(edit_svg_ReactComponent, null)
+            }), /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+                icon: /*#__PURE__*/ react.createElement(delete_svg_ReactComponent, null)
+            }))
+        }), /*#__PURE__*/ react.createElement(AccordionItem, {
+            index: 2,
+            description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+            icon: /*#__PURE__*/ react.createElement(Accordion.Item.Icon, {
+                icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+                label: "Warning icon"
+            }),
+            actions: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+                icon: /*#__PURE__*/ react.createElement(arrow_upward_svg_ReactComponent, null)
+            }), /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+                icon: /*#__PURE__*/ react.createElement(arrow_downward_svg_ReactComponent, null)
+            }), /*#__PURE__*/ react.createElement(Accordion.Item.Action.Separator, null), /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+                icon: /*#__PURE__*/ react.createElement(edit_svg_ReactComponent, null)
+            }), /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+                icon: /*#__PURE__*/ react.createElement(delete_svg_ReactComponent, null)
+            }))
+        }))
+    }
 };
-export const ContainerVariant = {
-  ...Default,
-  args: {
-    variant: "container",
-    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AccordionItem, {
-      index: 1,
-      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-      icon: /*#__PURE__*/React.createElement(Accordion.Item.Icon, {
-        icon: /*#__PURE__*/React.createElement(WarningIcon, null),
-        label: "Warning icon"
-      })
-    }), /*#__PURE__*/React.createElement(AccordionItem, {
-      index: 2,
-      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-      icon: /*#__PURE__*/React.createElement(Accordion.Item.Icon, {
-        icon: /*#__PURE__*/React.createElement(WarningIcon, null),
-        label: "Warning icon"
-      })
-    }))
-  }
+const WithDraggableItem = {
+    ...Default,
+    args: {
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(AccordionItem, {
+            index: 1,
+            description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+            icon: /*#__PURE__*/ react.createElement(Accordion.Item.Icon, {
+                icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+                label: "Warning icon"
+            }),
+            draggable: true
+        }), /*#__PURE__*/ react.createElement(AccordionItem, {
+            index: 2,
+            description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+            draggable: true
+        }), /*#__PURE__*/ react.createElement(AccordionItem, {
+            index: 3,
+            description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+        }))
+    }
 };
-export const LightBackground = {
-  ...Default,
-  decorators: [Story => /*#__PURE__*/React.createElement("div", {
-    className: "wby-w-[750px] wby-p-[50px] wby-min-h-[500px]"
-  }, /*#__PURE__*/React.createElement(Story, null))],
-  args: {
-    background: "light",
-    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AccordionItem, {
-      index: 1,
-      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-      icon: /*#__PURE__*/React.createElement(Accordion.Item.Icon, {
-        icon: /*#__PURE__*/React.createElement(WarningIcon, null),
-        label: "Warning icon"
-      })
-    }), /*#__PURE__*/React.createElement(AccordionItem, {
-      index: 2,
-      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-      icon: /*#__PURE__*/React.createElement(Accordion.Item.Icon, {
-        icon: /*#__PURE__*/React.createElement(WarningIcon, null),
-        label: "Warning icon"
-      })
-    }))
-  }
+const WithNotInteractiveItem = {
+    ...Default,
+    args: {
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(AccordionItem, {
+            index: 1,
+            description: "Not interactive item.",
+            interactive: false
+        }), /*#__PURE__*/ react.createElement(AccordionItem, {
+            index: 2
+        }), /*#__PURE__*/ react.createElement(AccordionItem, {
+            index: 3
+        }))
+    }
 };
-export const ContainerVariantWithLightBackground = {
-  ...Default,
-  decorators: [Story => /*#__PURE__*/React.createElement("div", {
-    className: "wby-w-[750px] wby-p-[50px] wby-min-h-[500px]"
-  }, /*#__PURE__*/React.createElement(Story, null))],
-  args: {
-    variant: "container",
-    background: "light",
-    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AccordionItem, {
-      index: 1,
-      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-      icon: /*#__PURE__*/React.createElement(Accordion.Item.Icon, {
-        icon: /*#__PURE__*/React.createElement(WarningIcon, null),
-        label: "Warning icon"
-      })
-    }), /*#__PURE__*/React.createElement(AccordionItem, {
-      index: 2,
-      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-      icon: /*#__PURE__*/React.createElement(Accordion.Item.Icon, {
-        icon: /*#__PURE__*/React.createElement(WarningIcon, null),
-        label: "Warning icon"
-      })
-    }))
-  }
+const WithDefaultOpenedItem = {
+    ...Default,
+    args: {
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(AccordionItem, {
+            index: 1,
+            description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+        }), /*#__PURE__*/ react.createElement(AccordionItem, {
+            index: 2,
+            description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+            defaultOpen: true
+        }))
+    }
 };
-
-// Add a Documentation story
-export const Documentation = {
-  render: args => {
-    return /*#__PURE__*/React.createElement(Accordion, args);
-  },
-  args: {
-    variant: "underline",
-    background: "base",
-    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Accordion.Item, {
-      title: "Accordion Item 1",
-      description: "This is a description for the first item",
-      icon: /*#__PURE__*/React.createElement(Accordion.Item.Icon, {
-        icon: /*#__PURE__*/React.createElement(WarningIcon, null),
-        label: "Warning icon"
-      }),
-      actions: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Accordion.Item.Action, {
-        icon: /*#__PURE__*/React.createElement(EditIcon, null)
-      }), /*#__PURE__*/React.createElement(Accordion.Item.Action, {
-        icon: /*#__PURE__*/React.createElement(TrashIcon, null)
-      }))
-    }, "This is the content for the first accordion item. It can contain any React elements."), /*#__PURE__*/React.createElement(Accordion.Item, {
-      title: "Accordion Item 2",
-      description: "This is a description for the second item",
-      defaultOpen: true
-    }, "This is the content for the second accordion item. It's open by default."), /*#__PURE__*/React.createElement(Accordion.Item, {
-      title: "Disabled Item",
-      description: "This item cannot be interacted with",
-      disabled: true
-    }, "This content won't be visible because the item is disabled."))
-  },
-  argTypes: {
-    variant: {
-      control: "select",
-      options: ["underline", "container"],
-      description: "The visual style of the accordion"
-    },
-    background: {
-      control: "select",
-      options: ["base", "light", "transparent"],
-      description: "The background color of the accordion"
+const WithDisabledItem = {
+    ...Default,
+    args: {
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(AccordionItem, {
+            index: 1,
+            description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+        }), /*#__PURE__*/ react.createElement(AccordionItem, {
+            index: 2,
+            description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+            disabled: true
+        }), /*#__PURE__*/ react.createElement(AccordionItem, {
+            index: 3,
+            description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+            defaultOpen: true,
+            disabled: true
+        }))
+    }
+};
+const WithControlledOpenedItem = {
+    ...Default,
+    render: (args)=>{
+        const [openFirstItem, setOpenFirstItem] = useState();
+        const [openSecondItem, setOpenSecondItem] = useState();
+        const [openThirdItem, setOpenThirdItem] = useState();
+        return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Accordion, args, /*#__PURE__*/ react.createElement(AccordionItem, {
+            index: 1,
+            description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+            open: openFirstItem,
+            onOpenChange: (open)=>setOpenFirstItem(open)
+        }), /*#__PURE__*/ react.createElement(AccordionItem, {
+            index: 2,
+            description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+            open: openSecondItem,
+            onOpenChange: (open)=>setOpenSecondItem(open)
+        }), /*#__PURE__*/ react.createElement(AccordionItem, {
+            index: 3,
+            description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+            open: openThirdItem,
+            onOpenChange: (open)=>setOpenThirdItem(open)
+        })), /*#__PURE__*/ react.createElement("div", {
+            className: "flex justify-center mt-lg gap-md"
+        }, /*#__PURE__*/ react.createElement(Button, {
+            onClick: ()=>setOpenFirstItem(!openFirstItem),
+            text: "Toggle First Item"
+        }), /*#__PURE__*/ react.createElement(Button, {
+            onClick: ()=>setOpenSecondItem(!openSecondItem),
+            text: "Toggle Second Item"
+        }), /*#__PURE__*/ react.createElement(Button, {
+            onClick: ()=>setOpenThirdItem(!openThirdItem),
+            text: "Toggle Third Item"
+        })));
+    }
+};
+const NestedAccordions = {
+    decorators: [
+        WhiteBackground
+    ],
+    name: "Nested Accordions (Base Background)",
+    args: {
+        background: "base",
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Accordion.Item, {
+            title: "Level 1",
+            description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+            icon: /*#__PURE__*/ react.createElement(Accordion.Item.Icon, {
+                icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+                label: "Warning icon"
+            }),
+            actions: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+                icon: /*#__PURE__*/ react.createElement(arrow_upward_svg_ReactComponent, null)
+            }), /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+                icon: /*#__PURE__*/ react.createElement(arrow_downward_svg_ReactComponent, null)
+            }), /*#__PURE__*/ react.createElement(Accordion.Item.Action.Separator, null), /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+                icon: /*#__PURE__*/ react.createElement(edit_svg_ReactComponent, null)
+            }), /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+                icon: /*#__PURE__*/ react.createElement(delete_svg_ReactComponent, null)
+            }))
+        }, /*#__PURE__*/ react.createElement(Accordion, null, /*#__PURE__*/ react.createElement(Accordion.Item, {
+            title: "Level 2",
+            description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+            icon: /*#__PURE__*/ react.createElement(Accordion.Item.Icon, {
+                icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+                label: "Warning icon"
+            }),
+            actions: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+                icon: /*#__PURE__*/ react.createElement(arrow_upward_svg_ReactComponent, null)
+            }), /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+                icon: /*#__PURE__*/ react.createElement(arrow_downward_svg_ReactComponent, null)
+            }), /*#__PURE__*/ react.createElement(Accordion.Item.Action.Separator, null), /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+                icon: /*#__PURE__*/ react.createElement(edit_svg_ReactComponent, null)
+            }), /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+                icon: /*#__PURE__*/ react.createElement(delete_svg_ReactComponent, null)
+            }))
+        }, /*#__PURE__*/ react.createElement(Accordion, null, /*#__PURE__*/ react.createElement(Accordion.Item, {
+            title: "Level 3",
+            description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+            icon: /*#__PURE__*/ react.createElement(Accordion.Item.Icon, {
+                icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+                label: "Warning icon"
+            }),
+            actions: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+                icon: /*#__PURE__*/ react.createElement(arrow_upward_svg_ReactComponent, null)
+            }), /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+                icon: /*#__PURE__*/ react.createElement(arrow_downward_svg_ReactComponent, null)
+            }), /*#__PURE__*/ react.createElement(Accordion.Item.Action.Separator, null), /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+                icon: /*#__PURE__*/ react.createElement(edit_svg_ReactComponent, null)
+            }), /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+                icon: /*#__PURE__*/ react.createElement(delete_svg_ReactComponent, null)
+            }))
+        }, /*#__PURE__*/ react.createElement(Accordion, null, /*#__PURE__*/ react.createElement(Accordion.Item, {
+            title: "Level 4"
+        }, /*#__PURE__*/ react.createElement(Accordion, null, /*#__PURE__*/ react.createElement(Accordion.Item, {
+            title: "Level 5"
+        }, "Content")), /*#__PURE__*/ react.createElement(Accordion, null, /*#__PURE__*/ react.createElement(Accordion.Item, {
+            title: "Level 5"
+        }, "Content")), /*#__PURE__*/ react.createElement(Accordion, null, /*#__PURE__*/ react.createElement(Accordion.Item, {
+            title: "Level 5"
+        }, "Content")))))), /*#__PURE__*/ react.createElement(Accordion, null, /*#__PURE__*/ react.createElement(Accordion.Item, {
+            title: "Level 3"
+        }, "Content")), /*#__PURE__*/ react.createElement(Accordion, null, /*#__PURE__*/ react.createElement(Accordion.Item, {
+            title: "Level 3"
+        }, "Content"))))), /*#__PURE__*/ react.createElement(Accordion.Item, {
+            title: "Level 1"
+        }, /*#__PURE__*/ react.createElement(Accordion, null, /*#__PURE__*/ react.createElement(Accordion.Item, {
+            title: "Level 2",
+            description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+            icon: /*#__PURE__*/ react.createElement(Accordion.Item.Icon, {
+                icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+                label: "Warning icon"
+            }),
+            actions: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+                icon: /*#__PURE__*/ react.createElement(arrow_upward_svg_ReactComponent, null)
+            }), /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+                icon: /*#__PURE__*/ react.createElement(arrow_downward_svg_ReactComponent, null)
+            }), /*#__PURE__*/ react.createElement(Accordion.Item.Action.Separator, null), /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+                icon: /*#__PURE__*/ react.createElement(edit_svg_ReactComponent, null)
+            }), /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+                icon: /*#__PURE__*/ react.createElement(delete_svg_ReactComponent, null)
+            }))
+        }, /*#__PURE__*/ react.createElement(Accordion, null, /*#__PURE__*/ react.createElement(Accordion.Item, {
+            title: "Level 3"
+        }, /*#__PURE__*/ react.createElement(Accordion, null, /*#__PURE__*/ react.createElement(Accordion.Item, {
+            title: "Level 4"
+        }, /*#__PURE__*/ react.createElement(Accordion, null, /*#__PURE__*/ react.createElement(Accordion.Item, {
+            title: "Level 5"
+        }, "Test")), /*#__PURE__*/ react.createElement(Accordion, null, /*#__PURE__*/ react.createElement(Accordion.Item, {
+            title: "Level 5"
+        }, "Test")), /*#__PURE__*/ react.createElement(Accordion, null, /*#__PURE__*/ react.createElement(Accordion.Item, {
+            title: "Level 5"
+        }, "Test")))))), /*#__PURE__*/ react.createElement(Accordion, null, /*#__PURE__*/ react.createElement(Accordion.Item, {
+            title: "Level 3"
+        }, "Content")), /*#__PURE__*/ react.createElement(Accordion, null, /*#__PURE__*/ react.createElement(Accordion.Item, {
+            title: "Level 3"
+        }, "Content"))))))
+    }
+};
+const NestedAccordionsLight = {
+    ...Default,
+    name: "Nested Accordions (Light Background)",
+    args: {
+        background: "light",
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Accordion.Item, {
+            title: "Level 1",
+            description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+            icon: /*#__PURE__*/ react.createElement(Accordion.Item.Icon, {
+                icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+                label: "Warning icon"
+            }),
+            actions: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+                icon: /*#__PURE__*/ react.createElement(arrow_upward_svg_ReactComponent, null)
+            }), /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+                icon: /*#__PURE__*/ react.createElement(arrow_downward_svg_ReactComponent, null)
+            }), /*#__PURE__*/ react.createElement(Accordion.Item.Action.Separator, null), /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+                icon: /*#__PURE__*/ react.createElement(edit_svg_ReactComponent, null)
+            }), /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+                icon: /*#__PURE__*/ react.createElement(delete_svg_ReactComponent, null)
+            }))
+        }, /*#__PURE__*/ react.createElement(Accordion, null, /*#__PURE__*/ react.createElement(Accordion.Item, {
+            title: "Level 2",
+            description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+            icon: /*#__PURE__*/ react.createElement(Accordion.Item.Icon, {
+                icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+                label: "Warning icon"
+            }),
+            actions: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+                icon: /*#__PURE__*/ react.createElement(arrow_upward_svg_ReactComponent, null)
+            }), /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+                icon: /*#__PURE__*/ react.createElement(arrow_downward_svg_ReactComponent, null)
+            }), /*#__PURE__*/ react.createElement(Accordion.Item.Action.Separator, null), /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+                icon: /*#__PURE__*/ react.createElement(edit_svg_ReactComponent, null)
+            }), /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+                icon: /*#__PURE__*/ react.createElement(delete_svg_ReactComponent, null)
+            }))
+        }, /*#__PURE__*/ react.createElement(Accordion, null, /*#__PURE__*/ react.createElement(Accordion.Item, {
+            title: "Level 3",
+            description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+            icon: /*#__PURE__*/ react.createElement(Accordion.Item.Icon, {
+                icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+                label: "Warning icon"
+            }),
+            actions: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+                icon: /*#__PURE__*/ react.createElement(arrow_upward_svg_ReactComponent, null)
+            }), /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+                icon: /*#__PURE__*/ react.createElement(arrow_downward_svg_ReactComponent, null)
+            }), /*#__PURE__*/ react.createElement(Accordion.Item.Action.Separator, null), /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+                icon: /*#__PURE__*/ react.createElement(edit_svg_ReactComponent, null)
+            }), /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+                icon: /*#__PURE__*/ react.createElement(delete_svg_ReactComponent, null)
+            }))
+        }, /*#__PURE__*/ react.createElement(Accordion, null, /*#__PURE__*/ react.createElement(Accordion.Item, {
+            title: "Level 4"
+        }, /*#__PURE__*/ react.createElement(Accordion, null, /*#__PURE__*/ react.createElement(Accordion.Item, {
+            title: "Level 5"
+        }, "Content")), /*#__PURE__*/ react.createElement(Accordion, null, /*#__PURE__*/ react.createElement(Accordion.Item, {
+            title: "Level 5"
+        }, "Content")), /*#__PURE__*/ react.createElement(Accordion, null, /*#__PURE__*/ react.createElement(Accordion.Item, {
+            title: "Level 5"
+        }, "Content")))))), /*#__PURE__*/ react.createElement(Accordion, null, /*#__PURE__*/ react.createElement(Accordion.Item, {
+            title: "Level 3"
+        }, "Content")), /*#__PURE__*/ react.createElement(Accordion, null, /*#__PURE__*/ react.createElement(Accordion.Item, {
+            title: "Level 3"
+        }, "Content"))))), /*#__PURE__*/ react.createElement(Accordion.Item, {
+            title: "Level 1"
+        }, /*#__PURE__*/ react.createElement(Accordion, null, /*#__PURE__*/ react.createElement(Accordion.Item, {
+            title: "Level 2",
+            description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+            icon: /*#__PURE__*/ react.createElement(Accordion.Item.Icon, {
+                icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+                label: "Warning icon"
+            }),
+            actions: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+                icon: /*#__PURE__*/ react.createElement(arrow_upward_svg_ReactComponent, null)
+            }), /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+                icon: /*#__PURE__*/ react.createElement(arrow_downward_svg_ReactComponent, null)
+            }), /*#__PURE__*/ react.createElement(Accordion.Item.Action.Separator, null), /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+                icon: /*#__PURE__*/ react.createElement(edit_svg_ReactComponent, null)
+            }), /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+                icon: /*#__PURE__*/ react.createElement(delete_svg_ReactComponent, null)
+            }))
+        }, /*#__PURE__*/ react.createElement(Accordion, null, /*#__PURE__*/ react.createElement(Accordion.Item, {
+            title: "Level 3"
+        }, /*#__PURE__*/ react.createElement(Accordion, null, /*#__PURE__*/ react.createElement(Accordion.Item, {
+            title: "Level 4"
+        }, /*#__PURE__*/ react.createElement(Accordion, null, /*#__PURE__*/ react.createElement(Accordion.Item, {
+            title: "Level 5"
+        }, "Test")), /*#__PURE__*/ react.createElement(Accordion, null, /*#__PURE__*/ react.createElement(Accordion.Item, {
+            title: "Level 5"
+        }, "Test")), /*#__PURE__*/ react.createElement(Accordion, null, /*#__PURE__*/ react.createElement(Accordion.Item, {
+            title: "Level 5"
+        }, "Test")))))), /*#__PURE__*/ react.createElement(Accordion, null, /*#__PURE__*/ react.createElement(Accordion.Item, {
+            title: "Level 3"
+        }, "Content")), /*#__PURE__*/ react.createElement(Accordion, null, /*#__PURE__*/ react.createElement(Accordion.Item, {
+            title: "Level 3"
+        }, "Content"))))))
+    }
+};
+const WithColorMark = {
+    ...Default,
+    args: {
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(AccordionItem, {
+            colorMark: "#ff6584",
+            index: 1,
+            description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+            icon: /*#__PURE__*/ react.createElement(Accordion.Item.Icon, {
+                icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+                label: "Warning icon"
+            })
+        }))
+    }
+};
+const Locked = {
+    ...Default,
+    args: {
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(AccordionItem, {
+            index: 1,
+            locked: true,
+            description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+            icon: /*#__PURE__*/ react.createElement(Accordion.Item.Icon, {
+                icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+                label: "Warning icon"
+            })
+        }))
+    }
+};
+const IndicatorPositionLeft = {
+    decorators: [
+        LightGreyBackground
+    ],
+    args: {
+        variant: "underline",
+        openClosedIndicatorPosition: "right",
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(AccordionItem, {
+            index: 1,
+            description: "When indicator is on the left, it replaces the icon position."
+        }), /*#__PURE__*/ react.createElement(AccordionItem, {
+            index: 2,
+            description: "Icons are not shown when indicator is on the left."
+        }), /*#__PURE__*/ react.createElement(AccordionItem, {
+            index: 3,
+            description: "Actions are still shown on the right side.",
+            actions: /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+                icon: /*#__PURE__*/ react.createElement(delete_svg_ReactComponent, null),
+                onClick: ()=>alert("Delete clicked")
+            })
+        }))
+    }
+};
+const IndicatorPositionRight = {
+    decorators: [
+        LightGreyBackground
+    ],
+    args: {
+        variant: "underline",
+        openClosedIndicatorPosition: "right",
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(AccordionItem, {
+            index: 1,
+            description: "Default behavior with indicator on the right.",
+            icon: /*#__PURE__*/ react.createElement(Accordion.Item.Icon, {
+                icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+                label: "Warning icon"
+            })
+        }), /*#__PURE__*/ react.createElement(AccordionItem, {
+            index: 2,
+            description: "Icons can be shown when indicator is on the right.",
+            icon: /*#__PURE__*/ react.createElement(Accordion.Item.Icon, {
+                icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+                label: "Warning icon"
+            })
+        }))
+    }
+};
+const Documentation = {
+    render: (args)=>/*#__PURE__*/ react.createElement(Accordion, args),
+    args: {
+        variant: "underline",
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Accordion.Item, {
+            title: "Accordion Item 1",
+            description: "This is a description for the first item",
+            icon: /*#__PURE__*/ react.createElement(Accordion.Item.Icon, {
+                icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+                label: "Warning icon"
+            }),
+            actions: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+                icon: /*#__PURE__*/ react.createElement(edit_svg_ReactComponent, null)
+            }), /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+                icon: /*#__PURE__*/ react.createElement(delete_svg_ReactComponent, null)
+            }))
+        }, "This is the content for the first accordion item. It can contain any React elements."), /*#__PURE__*/ react.createElement(Accordion.Item, {
+            title: "Accordion Item 2",
+            description: "This is a description for the second item",
+            defaultOpen: true
+        }, "This is the content for the second accordion item. It's open by default."), /*#__PURE__*/ react.createElement(Accordion.Item, {
+            title: "Disabled Item",
+            description: "This item cannot be interacted with",
+            disabled: true
+        }, "This content won't be visible because the item is disabled."))
     },
-    children: {
-      description: "The content of the accordion. Please refer to the example code for details.",
-      control: "none"
+    argTypes: {
+        variant: {
+            control: "select",
+            options: [
+                "underline",
+                "container"
+            ],
+            description: "The visual style of the accordion"
+        },
+        background: {
+            control: "select",
+            options: [
+                "base",
+                "light",
+                "transparent"
+            ],
+            description: "The background color of the accordion"
+        },
+        children: {
+            description: "The content of the accordion. Please refer to the example code for details."
+        }
     }
-  }
 };
+export default Accordion_stories;
+export { BaseBackground, ContainerVariant, ContainerVariantWithAccentBorder, ContainerVariantWithBaseBackground, Default, Documentation, IndicatorPositionLeft, IndicatorPositionRight, LightBackground, Locked, NestedAccordions, NestedAccordionsLight, UnderlineVariant, WithActionsIcon, WithColorMark, WithControlledOpenedItem, WithDefaultOpenedItem, WithDescriptions, WithDisabledItem, WithDraggableItem, WithIcon, WithNotInteractiveItem, WithSubtitles };
 
 //# sourceMappingURL=Accordion.stories.js.map