@webiny/admin-ui 6.3.0-beta.4 → 6.4.0-beta.0

package/Accordion/Accordion.stories.js

@@ -1,682 +1,695 @@
-import React, { useState } from "react";
+import react, { useState } from "react";
 import { Accordion } from "./Accordion.js";
-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 { 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,
-  render: args => {
-    return /*#__PURE__*/React.createElement(Accordion, args);
-  }
+    title: "Components/Accordion",
+    component: Accordion,
+    render: (args)=>/*#__PURE__*/ react.createElement(Accordion, args)
 };
-export default meta;
-// Reusable decorators
-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 => {
-  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,");
-};
-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
-    }))
-  },
-  decorators: [LightGreyBackground]
+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 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(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 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 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 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 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(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 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(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 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 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(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 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 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(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 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 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 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 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: {}
+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 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 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"
+            })
+        }))
+    }
 };
-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 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 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 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 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 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 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 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
+        }))
+    }
 };
-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 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
+        }))
+    }
 };
-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: "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 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"
+        })));
+    }
 };
-export 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(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(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(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(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(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(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(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(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 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"))))))
+    }
 };
-export 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(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(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(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(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(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(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(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(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"))))))
+    }
 };
-export 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(WarningIcon, null),
-        label: "Warning icon"
-      })
-    }))
-  }
+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"
+            })
+        }))
+    }
 };
-export 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(WarningIcon, 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"
+            })
+        }))
+    }
 };
-export 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(TrashIcon, null),
-        onClick: () => alert("Delete clicked")
-      })
-    }))
-  }
+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")
+            })
+        }))
+    }
 };
-export 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(WarningIcon, 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(WarningIcon, null),
-        label: "Warning icon"
-      })
-    }))
-  }
+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"
+            })
+        }))
+    }
 };
-
-// Add a Documentation story
-export const Documentation = {
-  render: args => {
-    return /*#__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(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 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."
+    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