@webiny/admin-ui 6.0.0-alpha.4 → 6.0.0-rc.0

package/Accordion/Accordion.d.ts

@@ -1,29 +1,32 @@
 import React from "react";
-import { type VariantProps } from "../utils";
-import type { AccordionRoot } from "./components/AccordionRoot";
-import { type AccordionItemProps } from "./components/AccordionItem";
+import { type VariantProps } from "../utils.js";
+import type { AccordionRoot } from "./components/AccordionRoot.js";
+import { type AccordionItemProps } from "./components/AccordionItem.js";
+import { useAccordionProps } from "./components/AccordionPropsProvider.js";
 declare const accordionVariants: (props?: ({
     variant?: "container" | "underline" | null | undefined;
-    background?: "base" | "transparent" | "light" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/dist/types.js").ClassProp) | undefined) => string;
 type AccordionProps = React.ComponentPropsWithoutRef<typeof AccordionRoot> & VariantProps<typeof accordionVariants> & {
     children: React.ReactNode;
+    background?: "base" | "light" | "transparent";
+    border?: "none" | "accent";
+    openClosedIndicatorPosition?: "left" | "right";
 };
-declare const Accordion: (({ children, variant, background, className, ...props }: AccordionProps) => React.JSX.Element) & {
-    original: ({ children, variant, background, className, ...props }: AccordionProps) => React.JSX.Element;
+export declare const Accordion: ((props: AccordionProps) => React.JSX.Element) & {
+    original: (props: AccordionProps) => React.JSX.Element;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ children, variant, background, className, ...props }: AccordionProps) => React.JSX.Element) & {
-        original: ({ children, variant, background, className, ...props }: AccordionProps) => React.JSX.Element;
+    original: ((props: AccordionProps) => React.JSX.Element) & {
+        original: (props: AccordionProps) => React.JSX.Element;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ children, variant, background, className, ...props }: AccordionProps) => React.JSX.Element) & {
-        original: ({ children, variant, background, className, ...props }: AccordionProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: AccordionProps) => React.JSX.Element) & {
+        original: (props: AccordionProps) => React.JSX.Element;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;
@@ -41,65 +44,65 @@ declare const Accordion: (({ children, variant, background, className, ...props
         originalName: string;
         displayName: string;
     } & {
-        createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: AccordionItemProps) => React.JSX.Element) & {
+        createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: AccordionItemProps) => React.JSX.Element) & {
             original: (props: AccordionItemProps) => React.JSX.Element;
             originalName: string;
             displayName: string;
         }>) => (props: unknown) => React.JSX.Element;
     } & {
-        Icon: ((props: import("../Icon/Icon").IconProps) => React.JSX.Element) & {
-            original: (props: import("../Icon/Icon").IconProps) => React.JSX.Element;
+        Icon: ((props: import("../index.js").IconProps) => React.JSX.Element) & {
+            original: (props: import("../index.js").IconProps) => React.JSX.Element;
             originalName: string;
             displayName: string;
         } & {
-            original: ((props: import("../Icon/Icon").IconProps) => React.JSX.Element) & {
-                original: (props: import("../Icon/Icon").IconProps) => React.JSX.Element;
+            original: ((props: import("../index.js").IconProps) => React.JSX.Element) & {
+                original: (props: import("../index.js").IconProps) => React.JSX.Element;
                 originalName: string;
                 displayName: string;
             };
             originalName: string;
             displayName: string;
         } & {
-            createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: import("../Icon/Icon").IconProps) => React.JSX.Element) & {
-                original: (props: import("../Icon/Icon").IconProps) => React.JSX.Element;
+            createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: import("../index.js").IconProps) => React.JSX.Element) & {
+                original: (props: import("../index.js").IconProps) => React.JSX.Element;
                 originalName: string;
                 displayName: string;
             }>) => (props: unknown) => React.JSX.Element;
         };
-        Action: (({ onClick, ...props }: import("../Button/IconButton").IconButtonProps) => React.JSX.Element) & {
-            original: ({ onClick, ...props }: import("../Button/IconButton").IconButtonProps) => React.JSX.Element;
+        Action: (({ onClick, ...props }: import("./components/AccordionItemAction.js").AccordionItemActionProps) => React.JSX.Element) & {
+            original: ({ onClick, ...props }: import("./components/AccordionItemAction.js").AccordionItemActionProps) => React.JSX.Element;
             originalName: string;
             displayName: string;
         } & {
-            original: (({ onClick, ...props }: import("../Button/IconButton").IconButtonProps) => React.JSX.Element) & {
-                original: ({ onClick, ...props }: import("../Button/IconButton").IconButtonProps) => React.JSX.Element;
+            original: (({ onClick, ...props }: import("./components/AccordionItemAction.js").AccordionItemActionProps) => React.JSX.Element) & {
+                original: ({ onClick, ...props }: import("./components/AccordionItemAction.js").AccordionItemActionProps) => React.JSX.Element;
                 originalName: string;
                 displayName: string;
             };
             originalName: string;
             displayName: string;
         } & {
-            createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ onClick, ...props }: import("../Button/IconButton").IconButtonProps) => React.JSX.Element) & {
-                original: ({ onClick, ...props }: import("../Button/IconButton").IconButtonProps) => React.JSX.Element;
+            createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ onClick, ...props }: import("./components/AccordionItemAction.js").AccordionItemActionProps) => React.JSX.Element) & {
+                original: ({ onClick, ...props }: import("./components/AccordionItemAction.js").AccordionItemActionProps) => React.JSX.Element;
                 originalName: string;
                 displayName: string;
             }>) => (props: unknown) => React.JSX.Element;
         } & {
-            Separator: ((props: import("../Separator/Separator").SeparatorProps) => React.JSX.Element) & {
-                original: (props: import("../Separator/Separator").SeparatorProps) => React.JSX.Element;
+            Separator: ((props: import("../index.js").SeparatorProps) => React.JSX.Element) & {
+                original: (props: import("../index.js").SeparatorProps) => React.JSX.Element;
                 originalName: string;
                 displayName: string;
             } & {
-                original: ((props: import("../Separator/Separator").SeparatorProps) => React.JSX.Element) & {
-                    original: (props: import("../Separator/Separator").SeparatorProps) => React.JSX.Element;
+                original: ((props: import("../index.js").SeparatorProps) => React.JSX.Element) & {
+                    original: (props: import("../index.js").SeparatorProps) => React.JSX.Element;
                     originalName: string;
                     displayName: string;
                 };
                 originalName: string;
                 displayName: string;
             } & {
-                createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: import("../Separator/Separator").SeparatorProps) => React.JSX.Element) & {
-                    original: (props: import("../Separator/Separator").SeparatorProps) => React.JSX.Element;
+                createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: import("../index.js").SeparatorProps) => React.JSX.Element) & {
+                    original: (props: import("../index.js").SeparatorProps) => React.JSX.Element;
                     originalName: string;
                     displayName: string;
                 }>) => (props: unknown) => React.JSX.Element;
@@ -107,4 +110,5 @@ declare const Accordion: (({ children, variant, background, className, ...props
         };
     };
 };
-export { Accordion, type AccordionProps, type AccordionItemProps };
+export { useAccordionProps };
+export type { AccordionProps, AccordionItemProps };

package/Accordion/Accordion.js

@@ -1,41 +1,42 @@
 import React from "react";
-import { makeDecoratable, withStaticProps, cva, cn } from "../utils";
-import { AccordionItem } from "./components/AccordionItem";
-const accordionVariants = cva("wby-group wby-w-full", {
+import { makeDecoratable, withStaticProps, cva, cn } from "../utils.js";
+import { AccordionItem } from "./components/AccordionItem.js";
+import { AccordionBackgroundProvider, useAccordionBackground } from "./components/AccordionBackgroundProvider.js";
+import { AccordionPropsProvider, useAccordionProps } from "./components/AccordionPropsProvider.js";
+const accordionVariants = cva("group w-full", {
   variants: {
     variant: {
-      container: "wby-accordion-variant-container wby-gap-xs wby-flex wby-flex-col",
-      underline: "wby-accordion-variant-underline "
-    },
-    background: {
-      base: "wby-accordion-background-base",
-      light: "wby-accordion-background-light",
-      transparent: "wby-accordion-background-transparent"
+      container: "accordion-variant-container gap-xs flex flex-col rounded-lg",
+      underline: "accordion-variant-underline"
     }
   },
   defaultVariants: {
-    variant: "underline",
-    background: "base"
+    variant: "underline"
   }
 });
-const AccordionBase = ({
-  children,
-  variant,
-  background,
-  className,
-  ...props
-}) => {
-  return /*#__PURE__*/React.createElement("div", Object.assign({}, props, {
+const AccordionBase = props => {
+  const {
+    children,
+    variant,
+    background: backgroundProp = "light",
+    className
+  } = props;
+  const background = useAccordionBackground(backgroundProp);
+  return /*#__PURE__*/React.createElement(AccordionBackgroundProvider, {
+    currentBackground: background
+  }, /*#__PURE__*/React.createElement(AccordionPropsProvider, {
+    props: props
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-accordion": "base",
     className: cn(accordionVariants({
-      variant,
-      background
+      variant
     }), className)
-  }), children);
+  }, children)));
 };
 const DecoratableAccordion = makeDecoratable("Accordion", AccordionBase);
-const Accordion = withStaticProps(DecoratableAccordion, {
+export const Accordion = withStaticProps(DecoratableAccordion, {
   Item: AccordionItem
 });
-export { Accordion };
+export { useAccordionProps };
 
 //# sourceMappingURL=Accordion.js.map

package/Accordion/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","makeDecoratable","withStaticProps","cva","cn","AccordionItem","accordionVariants","variants","variant","container","underline","background","base","light","transparent","defaultVariants","AccordionBase","children","className","props","createElement","Object","assign","DecoratableAccordion","Accordion","Item"],"sources":["Accordion.tsx"],"sourcesContent":["import React from \"react\";\nimport { makeDecoratable, withStaticProps, cva, type VariantProps, cn } from \"~/utils\";\nimport type { AccordionRoot } from \"./components/AccordionRoot\";\nimport { AccordionItem, type AccordionItemProps } from \"./components/AccordionItem\";\n\nconst accordionVariants = cva(\"wby-group wby-w-full\", {\n    variants: {\n        variant: {\n            container: \"wby-accordion-variant-container wby-gap-xs wby-flex wby-flex-col\",\n            underline: \"wby-accordion-variant-underline \"\n        },\n        background: {\n            base: \"wby-accordion-background-base\",\n            light: \"wby-accordion-background-light\",\n            transparent: \"wby-accordion-background-transparent\"\n        }\n    },\n    defaultVariants: {\n        variant: \"underline\",\n        background: \"base\"\n    }\n});\n\ntype AccordionProps = React.ComponentPropsWithoutRef<typeof AccordionRoot> &\n    VariantProps<typeof accordionVariants> & {\n        children: React.ReactNode;\n    };\n\nconst AccordionBase = ({ children, variant, background, className, ...props }: AccordionProps) => {\n    return (\n        <div {...props} className={cn(accordionVariants({ variant, background }), className)}>\n            {children}\n        </div>\n    );\n};\n\nconst DecoratableAccordion = makeDecoratable(\"Accordion\", AccordionBase);\n\nconst Accordion = withStaticProps(DecoratableAccordion, {\n    Item: AccordionItem\n});\n\nexport { Accordion, type AccordionProps, type AccordionItemProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,eAAe,EAAEC,eAAe,EAAEC,GAAG,EAAqBC,EAAE;AAErE,SAASC,aAAa;AAEtB,MAAMC,iBAAiB,GAAGH,GAAG,CAAC,sBAAsB,EAAE;EAClDI,QAAQ,EAAE;IACNC,OAAO,EAAE;MACLC,SAAS,EAAE,kEAAkE;MAC7EC,SAAS,EAAE;IACf,CAAC;IACDC,UAAU,EAAE;MACRC,IAAI,EAAE,+BAA+B;MACrCC,KAAK,EAAE,gCAAgC;MACvCC,WAAW,EAAE;IACjB;EACJ,CAAC;EACDC,eAAe,EAAE;IACbP,OAAO,EAAE,WAAW;IACpBG,UAAU,EAAE;EAChB;AACJ,CAAC,CAAC;AAOF,MAAMK,aAAa,GAAGA,CAAC;EAAEC,QAAQ;EAAET,OAAO;EAAEG,UAAU;EAAEO,SAAS;EAAE,GAAGC;AAAsB,CAAC,KAAK;EAC9F,oBACInB,KAAA,CAAAoB,aAAA,QAAAC,MAAA,CAAAC,MAAA,KAASH,KAAK;IAAED,SAAS,EAAEd,EAAE,CAACE,iBAAiB,CAAC;MAAEE,OAAO;MAAEG;IAAW,CAAC,CAAC,EAAEO,SAAS;EAAE,IAChFD,QACA,CAAC;AAEd,CAAC;AAED,MAAMM,oBAAoB,GAAGtB,eAAe,CAAC,WAAW,EAAEe,aAAa,CAAC;AAExE,MAAMQ,SAAS,GAAGtB,eAAe,CAACqB,oBAAoB,EAAE;EACpDE,IAAI,EAAEpB;AACV,CAAC,CAAC;AAEF,SAASmB,SAAS","ignoreList":[]}
+{"version":3,"names":["React","makeDecoratable","withStaticProps","cva","cn","AccordionItem","AccordionBackgroundProvider","useAccordionBackground","AccordionPropsProvider","useAccordionProps","accordionVariants","variants","variant","container","underline","defaultVariants","AccordionBase","props","children","background","backgroundProp","className","createElement","currentBackground","DecoratableAccordion","Accordion","Item"],"sources":["Accordion.tsx"],"sourcesContent":["import React from \"react\";\nimport { makeDecoratable, withStaticProps, cva, type VariantProps, cn } from \"~/utils.js\";\nimport type { AccordionRoot } from \"./components/AccordionRoot.js\";\nimport { AccordionItem, type AccordionItemProps } from \"./components/AccordionItem.js\";\nimport {\n    AccordionBackgroundProvider,\n    useAccordionBackground\n} from \"./components/AccordionBackgroundProvider.js\";\nimport { AccordionPropsProvider, useAccordionProps } from \"./components/AccordionPropsProvider.js\";\n\nconst accordionVariants = cva(\"group w-full\", {\n    variants: {\n        variant: {\n            container: \"accordion-variant-container gap-xs flex flex-col rounded-lg\",\n            underline: \"accordion-variant-underline\"\n        }\n    },\n    defaultVariants: {\n        variant: \"underline\"\n    }\n});\n\ntype AccordionProps = React.ComponentPropsWithoutRef<typeof AccordionRoot> &\n    VariantProps<typeof accordionVariants> & {\n        children: React.ReactNode;\n        background?: \"base\" | \"light\" | \"transparent\";\n        border?: \"none\" | \"accent\";\n        openClosedIndicatorPosition?: \"left\" | \"right\";\n    };\n\nconst AccordionBase = (props: AccordionProps) => {\n    const { children, variant, background: backgroundProp = \"light\", className } = props;\n\n    const background = useAccordionBackground(backgroundProp);\n\n    return (\n        <AccordionBackgroundProvider currentBackground={background}>\n            <AccordionPropsProvider props={props}>\n                <div\n                    data-accordion=\"base\"\n                    className={cn(accordionVariants({ variant }), className)}\n                >\n                    {children}\n                </div>\n            </AccordionPropsProvider>\n        </AccordionBackgroundProvider>\n    );\n};\n\nconst DecoratableAccordion = makeDecoratable(\"Accordion\", AccordionBase);\n\nexport const Accordion = withStaticProps(DecoratableAccordion, {\n    Item: AccordionItem\n});\n\nexport { useAccordionProps };\nexport type { AccordionProps, AccordionItemProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,eAAe,EAAEC,eAAe,EAAEC,GAAG,EAAqBC,EAAE;AAErE,SAASC,aAAa;AACtB,SACIC,2BAA2B,EAC3BC,sBAAsB;AAE1B,SAASC,sBAAsB,EAAEC,iBAAiB;AAElD,MAAMC,iBAAiB,GAAGP,GAAG,CAAC,cAAc,EAAE;EAC1CQ,QAAQ,EAAE;IACNC,OAAO,EAAE;MACLC,SAAS,EAAE,6DAA6D;MACxEC,SAAS,EAAE;IACf;EACJ,CAAC;EACDC,eAAe,EAAE;IACbH,OAAO,EAAE;EACb;AACJ,CAAC,CAAC;AAUF,MAAMI,aAAa,GAAIC,KAAqB,IAAK;EAC7C,MAAM;IAAEC,QAAQ;IAAEN,OAAO;IAAEO,UAAU,EAAEC,cAAc,GAAG,OAAO;IAAEC;EAAU,CAAC,GAAGJ,KAAK;EAEpF,MAAME,UAAU,GAAGZ,sBAAsB,CAACa,cAAc,CAAC;EAEzD,oBACIpB,KAAA,CAAAsB,aAAA,CAAChB,2BAA2B;IAACiB,iBAAiB,EAAEJ;EAAW,gBACvDnB,KAAA,CAAAsB,aAAA,CAACd,sBAAsB;IAACS,KAAK,EAAEA;EAAM,gBACjCjB,KAAA,CAAAsB,aAAA;IACI,kBAAe,MAAM;IACrBD,SAAS,EAAEjB,EAAE,CAACM,iBAAiB,CAAC;MAAEE;IAAQ,CAAC,CAAC,EAAES,SAAS;EAAE,GAExDH,QACA,CACe,CACC,CAAC;AAEtC,CAAC;AAED,MAAMM,oBAAoB,GAAGvB,eAAe,CAAC,WAAW,EAAEe,aAAa,CAAC;AAExE,OAAO,MAAMS,SAAS,GAAGvB,eAAe,CAACsB,oBAAoB,EAAE;EAC3DE,IAAI,EAAErB;AACV,CAAC,CAAC;AAEF,SAASI,iBAAiB","ignoreList":[]}

package/Accordion/Accordion.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Controls } from '@storybook/blocks';
+import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';
 
 import * as AccordionStories from './Accordion.stories';
 
@@ -458,7 +458,7 @@ import { ReactComponent as WarningIcon } from "@webiny/icons/insert_chart.svg";
 
 const LightBackgroundExample = () => {
     return (
-        <Accordion background="light">
+        <Accordion background="base">
             <Accordion.Item
                 title="Accordion item 1"
                 description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
@@ -491,7 +491,7 @@ import { ReactComponent as WarningIcon } from "@webiny/icons/insert_chart.svg";
 
 const ContainerLightExample = () => {
     return (
-        <Accordion variant="container" background="light">
+        <Accordion variant="container" background="base">
             <Accordion.Item
                 title="Accordion item 1"
                 description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
@@ -514,3 +514,157 @@ const ContainerLightExample = () => {
 
 export default ContainerLightExample;
 ` } } />
+
+### Nested Accordions
+
+<Canvas of={AccordionStories.NestedAccordions} source={ { code: `
+import React from "react";
+import { Accordion } from "@webiny/admin-ui";
+import { ReactComponent as WarningIcon } from "@webiny/icons/insert_chart.svg";
+
+const NestedExample = () => {
+    return (
+        <Accordion>
+            <Accordion.Item
+                title="Level 1"
+                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
+                actions={
+                    <>
+                        <Accordion.Item.Action icon={<ArrowUp />} />
+                        <Accordion.Item.Action icon={<ArrowDown />} />
+                        <Accordion.Item.Action.Separator />
+                        <Accordion.Item.Action icon={<EditIcon />} />
+                        <Accordion.Item.Action icon={<TrashIcon />} />
+                    </>
+                }
+            >
+                <Accordion>
+                    <Accordion.Item
+                        title="Level 2"
+                        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                        icon={
+                            <Accordion.Item.Icon
+                                icon={<WarningIcon />}
+                                label={"Warning icon"}
+                            />
+                        }
+                        actions={
+                            <>
+                                <Accordion.Item.Action icon={<ArrowUp />} />
+                                <Accordion.Item.Action icon={<ArrowDown />} />
+                                <Accordion.Item.Action.Separator />
+                                <Accordion.Item.Action icon={<EditIcon />} />
+                                <Accordion.Item.Action icon={<TrashIcon />} />
+                            </>
+                        }
+                    >
+                        <Accordion>
+                            <Accordion.Item
+                                title="Level 3"
+                                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                                icon={
+                                    <Accordion.Item.Icon
+                                        icon={<WarningIcon />}
+                                        label={"Warning icon"}
+                                    />
+                                }
+                                actions={
+                                    <>
+                                        <Accordion.Item.Action icon={<ArrowUp />} />
+                                        <Accordion.Item.Action icon={<ArrowDown />} />
+                                        <Accordion.Item.Action.Separator />
+                                        <Accordion.Item.Action icon={<EditIcon />} />
+                                        <Accordion.Item.Action icon={<TrashIcon />} />
+                                    </>
+                                }
+                            >
+                                <Accordion>
+                                    <Accordion.Item title="Level 4">
+                                        <Accordion>
+                                            <Accordion.Item title="Level 5">
+                                                Content
+                                            </Accordion.Item>
+                                        </Accordion>
+                                        <Accordion>
+                                            <Accordion.Item title="Level 5">
+                                                Content
+                                            </Accordion.Item>
+                                        </Accordion>
+                                        <Accordion>
+                                            <Accordion.Item title="Level 5">
+                                                Content
+                                            </Accordion.Item>
+                                        </Accordion>
+                                    </Accordion.Item>
+                                </Accordion>
+                            </Accordion.Item>
+                        </Accordion>
+                        <Accordion>
+                            <Accordion.Item title="Level 3">Content</Accordion.Item>
+                        </Accordion>
+                        <Accordion>
+                            <Accordion.Item title="Level 3">Content</Accordion.Item>
+                        </Accordion>
+                    </Accordion.Item>
+                </Accordion>
+            </Accordion.Item>
+            <Accordion.Item title="Level 1">
+                <Accordion>
+                    <Accordion.Item
+                        title="Level 2"
+                        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                        icon={
+                            <Accordion.Item.Icon
+                                icon={<WarningIcon />}
+                                label={"Warning icon"}
+                            />
+                        }
+                        actions={
+                            <>
+                                <Accordion.Item.Action icon={<ArrowUp />} />
+                                <Accordion.Item.Action icon={<ArrowDown />} />
+                                <Accordion.Item.Action.Separator />
+                                <Accordion.Item.Action icon={<EditIcon />} />
+                                <Accordion.Item.Action icon={<TrashIcon />} />
+                            </>
+                        }
+                    >
+                        <Accordion>
+                            <Accordion.Item title="Level 3">
+                                <Accordion>
+                                    <Accordion.Item title="Level 4">
+                                        <Accordion>
+                                            <Accordion.Item title="Level 5">
+                                                Test
+                                            </Accordion.Item>
+                                        </Accordion>
+                                        <Accordion>
+                                            <Accordion.Item title="Level 5">
+                                                Test
+                                            </Accordion.Item>
+                                        </Accordion>
+                                        <Accordion>
+                                            <Accordion.Item title="Level 5">
+                                                Test
+                                            </Accordion.Item>
+                                        </Accordion>
+                                    </Accordion.Item>
+                                </Accordion>
+                            </Accordion.Item>
+                        </Accordion>
+                        <Accordion>
+                            <Accordion.Item title="Level 3">Content</Accordion.Item>
+                        </Accordion>
+                        <Accordion>
+                            <Accordion.Item title="Level 3">Content</Accordion.Item>
+                        </Accordion>
+                    </Accordion.Item>
+                </Accordion>
+            </Accordion.Item>
+        </Accordion>
+    );
+};
+
+export default NestedExample;
+` } } />

package/Accordion/Accordion.stories.d.ts

@@ -1,10 +1,17 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Accordion } from "./Accordion";
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import { Accordion } from "./Accordion.js";
 declare const meta: Meta<typeof Accordion>;
 export default meta;
 type Story = StoryObj<typeof Accordion>;
 export declare const Default: Story;
+export declare const UnderlineVariant: Story;
+export declare const ContainerVariant: Story;
+export declare const ContainerVariantWithAccentBorder: Story;
+export declare const ContainerVariantWithBaseBackground: Story;
+export declare const LightBackground: Story;
+export declare const BaseBackground: Story;
 export declare const WithDescriptions: Story;
+export declare const WithSubtitles: Story;
 export declare const WithIcon: Story;
 export declare const WithActionsIcon: Story;
 export declare const WithDraggableItem: Story;
@@ -12,7 +19,10 @@ export declare const WithNotInteractiveItem: Story;
 export declare const WithDefaultOpenedItem: Story;
 export declare const WithDisabledItem: Story;
 export declare const WithControlledOpenedItem: Story;
-export declare const ContainerVariant: Story;
-export declare const LightBackground: Story;
-export declare const ContainerVariantWithLightBackground: Story;
+export declare const NestedAccordions: Story;
+export declare const NestedAccordionsLight: Story;
+export declare const WithColorMark: Story;
+export declare const Locked: Story;
+export declare const IndicatorPositionLeft: Story;
+export declare const IndicatorPositionRight: Story;
 export declare const Documentation: Story;