@webiny/admin-ui 6.4.11 → 6.6.0-alpha.1

package/Accordion/Accordion.d.ts

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

package/Accordion/components/AccordionContent.js

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

package/Accordion/components/AccordionContent.js.map

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

package/Accordion/components/AccordionItem.d.ts

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

package/Accordion/components/AccordionItem.js.map

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

package/Accordion/components/AccordionItemAction.d.ts

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

package/Accordion/components/AccordionItemDragHandle.d.ts

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

package/Accordion/components/AccordionItemDragHandle.js

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

package/Accordion/components/AccordionItemDragHandle.js.map

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

package/Accordion/components/AccordionItemIcon.d.ts

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

package/Accordion/components/AccordionItemSeparator.d.ts

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

package/Accordion/components/AccordionTrigger.js

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

package/Accordion/components/AccordionTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion/components/AccordionTrigger.js","sources":["../../../src/Accordion/components/AccordionTrigger.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { ReactComponent as KeyboardArrowDownIcon } from \"@webiny/icons/keyboard_arrow_down.svg\";\nimport { ReactComponent as LockIcon } from \"@webiny/icons/lock.svg\";\nimport { Collapsible as CollapsiblePrimitive } from \"radix-ui\";\nimport { cn } from \"~/utils.js\";\nimport { useAccordionItemProps } from \"./AccordionItem.js\";\nimport { useAccordionProps } from \"./AccordionPropsProvider.js\";\nimport { AccordionItemAction } from \"./AccordionItemAction.js\";\nimport { Icon } from \"~/Icon/index.js\";\nimport { AccordionItemDragHandle } from \"~/Accordion/components/AccordionItemDragHandle.js\";\n\nconst OpenCloseIndicator = () => {\n    return (\n        <Icon\n            size={\"md\"}\n            className={\"transition\"}\n            color={\"neutral-strong\"}\n            data-role={\"open-close-indicator\"}\n            label={\"Open/close indicator\"}\n            icon={<KeyboardArrowDownIcon />}\n        />\n    );\n};\n\nconst AccordionTrigger = () => {\n    const {\n        title,\n        subtitle,\n        description,\n        colorMark,\n        actions,\n        icon,\n        interactive = true,\n        locked,\n        draggable\n    } = useAccordionItemProps();\n\n    const accordionProps = useAccordionProps();\n    const openClosedIndicatorPosition = accordionProps.openClosedIndicatorPosition || \"right\";\n    // The following three attributes are required for the trigger to act as a button.\n    // We can't use the default button element here because the content of the trigger\n    // can also contain one or more buttons.\n    const divAsButtonProps = React.useMemo<React.HTMLAttributes<HTMLDivElement>>(() => {\n        return {\n            role: \"button\",\n            tabIndex: interactive ? 0 : -1, // Disable keyboard interaction if not interactive\n            onKeyDown: e => {\n                if (e.key === \"Enter\" || e.key === \" \") {\n                    e.preventDefault();\n                    e.currentTarget.click();\n                }\n            }\n        };\n    }, [interactive]);\n\n    return (\n        <CollapsiblePrimitive.Trigger\n            asChild\n            onClick={e => !interactive && e.preventDefault()} // Prevent clicking if not interactive\n        >\n            <div\n                {...divAsButtonProps}\n                className={cn(\n                    \"group/trigger w-full flex items-center relative min-h-[62px]\",\n                    \"focus-visible:outline-none focus-visible:border-none focus-visible:ring-sm focus-visible:ring-primary-dimmed\",\n                    \"group-[.accordion-variant-container]:rounded-lg\",\n                    \"[&[data-state=open]_[data-role=open-close-indicator]]:rotate-180 border-l-accent\",\n                    interactive ? \"cursor-pointer\" : \"cursor-default\"\n                )}\n            >\n                {draggable ? <AccordionItemDragHandle /> : null}\n                {colorMark && (\n                    <div\n                        style={{ backgroundColor: colorMark }}\n                        className={\"block w-[4px] h-[48px] rounded-sm ml-sm\"}\n                    />\n                )}\n                <div className={\"w-full flex justify-between items-center px-md py-sm-extra\"}>\n                    {/* Left side: icon or indicator based on position */}\n                    {openClosedIndicatorPosition === \"left\" ? (\n                        <>\n                            {interactive && !locked ? (\n                                <div className={\"mr-md\"}>\n                                    <OpenCloseIndicator />\n                                </div>\n                            ) : null}\n                        </>\n                    ) : (\n                        <>{icon ? <div className={\"mr-md\"}>{icon}</div> : null}</>\n                    )}\n\n                    {/* Center: title, subtitle, description */}\n                    <div className={\"flex flex-col gap-xxs flex-grow text-left\"}>\n                        <div className={\"flex gap-xs\"}>\n                            <div className={\"text-md font-semibold webiny_accordion-item-title\"}>\n                                {title}\n                            </div>\n                            {subtitle && (\n                                <div className={\"text-neutral-muted text-md\"}>{subtitle}</div>\n                            )}\n                        </div>\n\n                        <div className={\"text-sm text-neutral-strong\"}>{description}</div>\n                    </div>\n\n                    {/* Right side: actions and indicator (or locked icon) */}\n                    {openClosedIndicatorPosition === \"right\" ? (\n                        <div className={\"flex gap-xs items-center\"}>\n                            {locked ? (\n                                <Icon label=\"Locked\" icon={<LockIcon />} color={\"neutral-light\"} />\n                            ) : (\n                                <>\n                                    {actions}\n                                    {/* No need to show the separator if there are no actions and the item is not interactive. */}\n                                    {actions && interactive ? (\n                                        <AccordionItemAction.Separator />\n                                    ) : null}\n                                    {interactive ? <OpenCloseIndicator /> : null}\n                                </>\n                            )}\n                        </div>\n                    ) : (\n                        <div className={\"flex gap-xs items-center\"}>\n                            {locked ? (\n                                <Icon label=\"Locked\" icon={<LockIcon />} color={\"neutral-light\"} />\n                            ) : (\n                                <>{actions}</>\n                            )}\n                        </div>\n                    )}\n                </div>\n            </div>\n        </CollapsiblePrimitive.Trigger>\n    );\n};\n\nexport { AccordionTrigger };\n"],"names":["OpenCloseIndicator","Icon","KeyboardArrowDownIcon","AccordionTrigger","title","subtitle","description","colorMark","actions","icon","interactive","locked","draggable","useAccordionItemProps","accordionProps","useAccordionProps","openClosedIndicatorPosition","divAsButtonProps","React","e","CollapsiblePrimitive","cn","AccordionItemDragHandle","LockIcon","AccordionItemAction"],"mappings":";;;;;;;;;;AAWA,MAAMA,qBAAqB,IAChB,WAAP,GACI,sCAACC,MAAIA;QACD,MAAM;QACN,WAAW;QACX,OAAO;QACP,aAAW;QACX,OAAO;QACP,oBAAM,sCAACC,gBAAqBA;;AAKxC,MAAMC,mBAAmB;IACrB,MAAM,EACFC,KAAK,EACLC,QAAQ,EACRC,WAAW,EACXC,SAAS,EACTC,OAAO,EACPC,IAAI,EACJC,cAAc,IAAI,EAClBC,MAAM,EACNC,SAAS,EACZ,GAAGC;IAEJ,MAAMC,iBAAiBC;IACvB,MAAMC,8BAA8BF,eAAe,2BAA2B,IAAI;IAIlF,MAAMG,mBAAmBC,wBAAAA,OAAa,CAAuC,IAClE;YACH,MAAM;YACN,UAAUR,cAAc,IAAI;YAC5B,WAAWS,CAAAA;gBACP,IAAIA,AAAU,YAAVA,EAAE,GAAG,IAAgBA,AAAU,QAAVA,EAAE,GAAG,EAAU;oBACpCA,EAAE,cAAc;oBAChBA,EAAE,aAAa,CAAC,KAAK;gBACzB;YACJ;QACJ,IACD;QAACT;KAAY;IAEhB,OAAO,WAAP,GACI,sCAACU,YAAAA,OAA4B;QACzB;QACA,SAASD,CAAAA,IAAK,CAACT,eAAeS,EAAE,cAAc;qBAE9C,sCAAC;QACI,GAAGF,gBAAgB;QACpB,WAAWI,GACP,gEACA,gHACA,mDACA,oFACAX,cAAc,mBAAmB;OAGpCE,YAAY,WAAZA,GAAY,sCAACU,yBAAuBA,QAAM,MAC1Cf,aAAa,WAAbA,GACG,sCAAC;QACG,OAAO;YAAE,iBAAiBA;QAAU;QACpC,WAAW;sBAGnB,sCAAC;QAAI,WAAW;OAEXS,AAAgC,WAAhCA,8BAAyC,WAAT,GAC7B,8EACKN,eAAe,CAACC,SAAS,WAATA,GACb,sCAAC;QAAI,WAAW;qBACZ,sCAACX,oBAAkBA,SAEvB,sBAGR,8EAAGS,OAAO,WAAPA,GAAO,sCAAC;QAAI,WAAW;OAAUA,QAAc,qBAItD,sCAAC;QAAI,WAAW;qBACZ,sCAAC;QAAI,WAAW;qBACZ,sCAAC;QAAI,WAAW;OACXL,QAEJC,YAAY,WAAZA,GACG,sCAAC;QAAI,WAAW;OAA+BA,YAAAA,WAAAA,GAIvD,sCAAC;QAAI,WAAW;OAAgCC,eAInDU,AAAgC,YAAhCA,8BAA0C,WAAV,GAC7B,sCAAC;QAAI,WAAW;OACXL,SAAS,WAATA,GACG,sCAACV,MAAIA;QAAC,OAAM;QAAS,oBAAM,sCAACsB,yBAAQA;QAAK,OAAO;uBAEhD,8EACKf,SAEAA,WAAWE,cAAc,WAAdA,GACR,sCAACc,oBAAoB,SAAS,UAC9B,MACHd,cAAc,WAAdA,GAAc,sCAACV,oBAAkBA,QAAM,uBAKpD,sCAAC;QAAI,WAAW;OACXW,SAAS,WAATA,GACG,sCAACV,MAAIA;QAAC,OAAM;QAAS,oBAAM,sCAACsB,yBAAQA;QAAK,OAAO;uBAEhD,8EAAGf;AAQnC"}
+{"version":3,"file":"Accordion/components/AccordionTrigger.js","sources":["../../../src/Accordion/components/AccordionTrigger.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { ReactComponent as KeyboardArrowDownIcon } from \"@webiny/icons/keyboard_arrow_down.svg\";\nimport { ReactComponent as LockIcon } from \"@webiny/icons/lock.svg\";\nimport { Collapsible as CollapsiblePrimitive } from \"radix-ui\";\nimport { cn } from \"~/utils.js\";\nimport { useAccordionItemProps } from \"./AccordionItem.js\";\nimport { useAccordionProps } from \"./AccordionPropsProvider.js\";\nimport { AccordionItemAction } from \"./AccordionItemAction.js\";\nimport { Icon } from \"~/Icon/index.js\";\nimport { AccordionItemDragHandle } from \"~/Accordion/components/AccordionItemDragHandle.js\";\n\nconst OpenCloseIndicator = () => {\n    return (\n        <Icon\n            size={\"md\"}\n            className={\"transition\"}\n            color={\"neutral-strong\"}\n            data-role={\"open-close-indicator\"}\n            label={\"Open/close indicator\"}\n            icon={<KeyboardArrowDownIcon />}\n        />\n    );\n};\n\nconst AccordionTrigger = () => {\n    const {\n        title,\n        subtitle,\n        description,\n        colorMark,\n        actions,\n        icon,\n        interactive = true,\n        locked,\n        draggable,\n        dragHandleRef\n    } = useAccordionItemProps();\n\n    const accordionProps = useAccordionProps();\n    const openClosedIndicatorPosition = accordionProps.openClosedIndicatorPosition || \"right\";\n    // The following three attributes are required for the trigger to act as a button.\n    // We can't use the default button element here because the content of the trigger\n    // can also contain one or more buttons.\n    const divAsButtonProps = React.useMemo<React.HTMLAttributes<HTMLDivElement>>(() => {\n        return {\n            role: \"button\",\n            tabIndex: interactive ? 0 : -1, // Disable keyboard interaction if not interactive\n            onKeyDown: e => {\n                if (e.key === \"Enter\" || e.key === \" \") {\n                    e.preventDefault();\n                    e.currentTarget.click();\n                }\n            }\n        };\n    }, [interactive]);\n\n    return (\n        <CollapsiblePrimitive.Trigger\n            asChild\n            onClick={e => !interactive && e.preventDefault()} // Prevent clicking if not interactive\n        >\n            <div\n                {...divAsButtonProps}\n                className={cn(\n                    \"group/trigger w-full flex items-center relative min-h-[62px]\",\n                    \"focus-visible:outline-none focus-visible:border-none focus-visible:ring-sm focus-visible:ring-primary-dimmed\",\n                    \"group-[.accordion-variant-container]:rounded-lg\",\n                    \"[&[data-state=open]_[data-role=open-close-indicator]]:rotate-180 border-l-accent\",\n                    interactive ? \"cursor-pointer\" : \"cursor-default\"\n                )}\n            >\n                {draggable ? <AccordionItemDragHandle dragHandleRef={dragHandleRef} /> : null}\n                {colorMark && (\n                    <div\n                        style={{ backgroundColor: colorMark }}\n                        className={\"block w-[4px] h-[48px] rounded-sm ml-sm\"}\n                    />\n                )}\n                <div className={\"w-full flex justify-between items-center px-md py-sm-extra\"}>\n                    {/* Left side: icon or indicator based on position */}\n                    {openClosedIndicatorPosition === \"left\" ? (\n                        <>\n                            {interactive && !locked ? (\n                                <div className={\"mr-md\"}>\n                                    <OpenCloseIndicator />\n                                </div>\n                            ) : null}\n                        </>\n                    ) : (\n                        <>{icon ? <div className={\"mr-md\"}>{icon}</div> : null}</>\n                    )}\n\n                    {/* Center: title, subtitle, description */}\n                    <div className={\"flex flex-col gap-xxs flex-grow text-left\"}>\n                        <div className={\"flex gap-xs\"}>\n                            <div className={\"text-md font-semibold webiny_accordion-item-title\"}>\n                                {title}\n                            </div>\n                            {subtitle && (\n                                <div className={\"text-neutral-muted text-md\"}>{subtitle}</div>\n                            )}\n                        </div>\n\n                        <div className={\"text-sm text-neutral-strong\"}>{description}</div>\n                    </div>\n\n                    {/* Right side: actions and indicator (or locked icon) */}\n                    {openClosedIndicatorPosition === \"right\" ? (\n                        <div className={\"flex gap-xs items-center\"}>\n                            {locked ? (\n                                <Icon label=\"Locked\" icon={<LockIcon />} color={\"neutral-light\"} />\n                            ) : (\n                                <>\n                                    {actions}\n                                    {/* No need to show the separator if there are no actions and the item is not interactive. */}\n                                    {actions && interactive ? (\n                                        <AccordionItemAction.Separator />\n                                    ) : null}\n                                    {interactive ? <OpenCloseIndicator /> : null}\n                                </>\n                            )}\n                        </div>\n                    ) : (\n                        <div className={\"flex gap-xs items-center\"}>\n                            {locked ? (\n                                <Icon label=\"Locked\" icon={<LockIcon />} color={\"neutral-light\"} />\n                            ) : (\n                                <>{actions}</>\n                            )}\n                        </div>\n                    )}\n                </div>\n            </div>\n        </CollapsiblePrimitive.Trigger>\n    );\n};\n\nexport { AccordionTrigger };\n"],"names":["OpenCloseIndicator","Icon","KeyboardArrowDownIcon","AccordionTrigger","title","subtitle","description","colorMark","actions","icon","interactive","locked","draggable","dragHandleRef","useAccordionItemProps","accordionProps","useAccordionProps","openClosedIndicatorPosition","divAsButtonProps","React","e","CollapsiblePrimitive","cn","AccordionItemDragHandle","LockIcon","AccordionItemAction"],"mappings":";;;;;;;;;;AAWA,MAAMA,qBAAqB,IAChB,WAAP,GACI,sCAACC,MAAIA;QACD,MAAM;QACN,WAAW;QACX,OAAO;QACP,aAAW;QACX,OAAO;QACP,oBAAM,sCAACC,gBAAqBA;;AAKxC,MAAMC,mBAAmB;IACrB,MAAM,EACFC,KAAK,EACLC,QAAQ,EACRC,WAAW,EACXC,SAAS,EACTC,OAAO,EACPC,IAAI,EACJC,cAAc,IAAI,EAClBC,MAAM,EACNC,SAAS,EACTC,aAAa,EAChB,GAAGC;IAEJ,MAAMC,iBAAiBC;IACvB,MAAMC,8BAA8BF,eAAe,2BAA2B,IAAI;IAIlF,MAAMG,mBAAmBC,wBAAAA,OAAa,CAAuC,IAClE;YACH,MAAM;YACN,UAAUT,cAAc,IAAI;YAC5B,WAAWU,CAAAA;gBACP,IAAIA,AAAU,YAAVA,EAAE,GAAG,IAAgBA,AAAU,QAAVA,EAAE,GAAG,EAAU;oBACpCA,EAAE,cAAc;oBAChBA,EAAE,aAAa,CAAC,KAAK;gBACzB;YACJ;QACJ,IACD;QAACV;KAAY;IAEhB,OAAO,WAAP,GACI,sCAACW,YAAAA,OAA4B;QACzB;QACA,SAASD,CAAAA,IAAK,CAACV,eAAeU,EAAE,cAAc;qBAE9C,sCAAC;QACI,GAAGF,gBAAgB;QACpB,WAAWI,GACP,gEACA,gHACA,mDACA,oFACAZ,cAAc,mBAAmB;OAGpCE,YAAY,WAAZA,GAAY,sCAACW,yBAAuBA;QAAC,eAAeV;SAAoB,MACxEN,aAAa,WAAbA,GACG,sCAAC;QACG,OAAO;YAAE,iBAAiBA;QAAU;QACpC,WAAW;sBAGnB,sCAAC;QAAI,WAAW;OAEXU,AAAgC,WAAhCA,8BAAyC,WAAT,GAC7B,8EACKP,eAAe,CAACC,SAAS,WAATA,GACb,sCAAC;QAAI,WAAW;qBACZ,sCAACX,oBAAkBA,SAEvB,sBAGR,8EAAGS,OAAO,WAAPA,GAAO,sCAAC;QAAI,WAAW;OAAUA,QAAc,qBAItD,sCAAC;QAAI,WAAW;qBACZ,sCAAC;QAAI,WAAW;qBACZ,sCAAC;QAAI,WAAW;OACXL,QAEJC,YAAY,WAAZA,GACG,sCAAC;QAAI,WAAW;OAA+BA,YAAAA,WAAAA,GAIvD,sCAAC;QAAI,WAAW;OAAgCC,eAInDW,AAAgC,YAAhCA,8BAA0C,WAAV,GAC7B,sCAAC;QAAI,WAAW;OACXN,SAAS,WAATA,GACG,sCAACV,MAAIA;QAAC,OAAM;QAAS,oBAAM,sCAACuB,yBAAQA;QAAK,OAAO;uBAEhD,8EACKhB,SAEAA,WAAWE,cAAc,WAAdA,GACR,sCAACe,oBAAoB,SAAS,UAC9B,MACHf,cAAc,WAAdA,GAAc,sCAACV,oBAAkBA,QAAM,uBAKpD,sCAAC;QAAI,WAAW;OACXW,SAAS,WAATA,GACG,sCAACV,MAAIA;QAAC,OAAM;QAAS,oBAAM,sCAACuB,yBAAQA;QAAK,OAAO;uBAEhD,8EAAGhB;AAQnC"}

package/Alert/Alert.d.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 import { type VariantProps } from "../utils.js";
 import { type ButtonProps } from "../Button/index.js";
 declare const alertVariants: (props?: ({
-    type?: "info" | "success" | "warning" | "danger" | null | undefined;
+    type?: "danger" | "info" | "success" | "warning" | null | undefined;
     variant?: "strong" | "subtle" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface AlertProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof alertVariants> {
@@ -13,59 +13,61 @@ export interface AlertProps extends React.HTMLAttributes<HTMLDivElement>, Varian
     swatchColor?: string;
     swatchColorIcon?: boolean;
 }
-declare const AlertAction: ((props: ButtonProps) => React.JSX.Element) & {
-    original: (props: ButtonProps) => React.JSX.Element;
+declare const AlertActionBase: (props: ButtonProps) => React.JSX.Element;
+declare const AlertAction: typeof AlertActionBase & {
+    original: typeof AlertActionBase;
     originalName: string;
     displayName: string;
 } & {
-    original: ((props: ButtonProps) => React.JSX.Element) & {
-        original: (props: ButtonProps) => React.JSX.Element;
+    original: typeof AlertActionBase & {
+        original: typeof AlertActionBase;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: ButtonProps) => React.JSX.Element) & {
-        original: (props: ButtonProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof AlertActionBase & {
+        original: typeof AlertActionBase;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;
 };
-declare const Alert: ((props: AlertProps) => React.JSX.Element) & {
-    original: (props: AlertProps) => React.JSX.Element;
+declare const AlertBase: (props: AlertProps) => React.JSX.Element;
+declare const Alert: typeof AlertBase & {
+    original: typeof AlertBase;
     originalName: string;
     displayName: string;
 } & {
-    original: ((props: AlertProps) => React.JSX.Element) & {
-        original: (props: AlertProps) => React.JSX.Element;
+    original: typeof AlertBase & {
+        original: typeof AlertBase;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: AlertProps) => React.JSX.Element) & {
-        original: (props: AlertProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof AlertBase & {
+        original: typeof AlertBase;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;
 } & {
-    Action: ((props: ButtonProps) => React.JSX.Element) & {
-        original: (props: ButtonProps) => React.JSX.Element;
+    Action: typeof AlertActionBase & {
+        original: typeof AlertActionBase;
         originalName: string;
         displayName: string;
     } & {
-        original: ((props: ButtonProps) => React.JSX.Element) & {
-            original: (props: ButtonProps) => React.JSX.Element;
+        original: typeof AlertActionBase & {
+            original: typeof AlertActionBase;
             originalName: string;
             displayName: string;
         };
         originalName: string;
         displayName: string;
     } & {
-        createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: ButtonProps) => React.JSX.Element) & {
-            original: (props: ButtonProps) => React.JSX.Element;
+        createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof AlertActionBase & {
+            original: typeof AlertActionBase;
             originalName: string;
             displayName: string;
         }>) => (props: unknown) => React.JSX.Element;

package/AutoComplete/AutoComplete.d.ts

@@ -2,21 +2,22 @@ import React from "react";
 import type { AutoCompletePrimitiveProps } from "./primitives/index.js";
 import type { FormComponentProps } from "../FormComponent/index.js";
 type AutoCompleteProps = AutoCompletePrimitiveProps & FormComponentProps;
-declare const AutoComplete: (({ label, description, note, hint, required, disabled, validation, ...props }: AutoCompleteProps) => React.JSX.Element) & {
-    original: ({ label, description, note, hint, required, disabled, validation, ...props }: AutoCompleteProps) => React.JSX.Element;
+declare const DecoratableAutoComplete: ({ label, description, note, hint, required, disabled, validation, ...props }: AutoCompleteProps) => React.JSX.Element;
+declare const AutoComplete: typeof DecoratableAutoComplete & {
+    original: typeof DecoratableAutoComplete;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ label, description, note, hint, required, disabled, validation, ...props }: AutoCompleteProps) => React.JSX.Element) & {
-        original: ({ label, description, note, hint, required, disabled, validation, ...props }: AutoCompleteProps) => React.JSX.Element;
+    original: typeof DecoratableAutoComplete & {
+        original: typeof DecoratableAutoComplete;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ label, description, note, hint, required, disabled, validation, ...props }: AutoCompleteProps) => React.JSX.Element) & {
-        original: ({ label, description, note, hint, required, disabled, validation, ...props }: AutoCompleteProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof DecoratableAutoComplete & {
+        original: typeof DecoratableAutoComplete;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/AutoComplete/primitives/AutoCompletePrimitive.d.ts

@@ -88,21 +88,22 @@ interface AutoCompletePrimitiveProps {
      */
     value?: string;
 }
-declare const AutoCompletePrimitive: ((props: AutoCompletePrimitiveProps) => React.JSX.Element) & {
-    original: (props: AutoCompletePrimitiveProps) => React.JSX.Element;
+declare const DecoratableAutoCompletePrimitive: (props: AutoCompletePrimitiveProps) => React.JSX.Element;
+declare const AutoCompletePrimitive: typeof DecoratableAutoCompletePrimitive & {
+    original: typeof DecoratableAutoCompletePrimitive;
     originalName: string;
     displayName: string;
 } & {
-    original: ((props: AutoCompletePrimitiveProps) => React.JSX.Element) & {
-        original: (props: AutoCompletePrimitiveProps) => React.JSX.Element;
+    original: typeof DecoratableAutoCompletePrimitive & {
+        original: typeof DecoratableAutoCompletePrimitive;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: AutoCompletePrimitiveProps) => React.JSX.Element) & {
-        original: (props: AutoCompletePrimitiveProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof DecoratableAutoCompletePrimitive & {
+        original: typeof DecoratableAutoCompletePrimitive;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/Avatar/Avatar.d.ts

@@ -7,24 +7,25 @@ interface AvatarProps extends React.ComponentPropsWithoutRef<typeof AvatarPrimit
     fallback?: React.ReactElement<AvatarFallbackProps>;
 }
 declare const avatarVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | "xl" | null | undefined;
-    variant?: "strong" | "light" | "subtle" | "quiet" | "outlined" | null | undefined;
+    size?: "lg" | "md" | "sm" | "xl" | null | undefined;
+    variant?: "light" | "outlined" | "quiet" | "strong" | "subtle" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-declare const Avatar: (({ image, fallback, className, size, variant, ...props }: AvatarProps) => React.JSX.Element) & {
-    original: ({ image, fallback, className, size, variant, ...props }: AvatarProps) => React.JSX.Element;
+declare const AvatarBase: ({ image, fallback, className, size, variant, ...props }: AvatarProps) => React.JSX.Element;
+declare const Avatar: typeof AvatarBase & {
+    original: typeof AvatarBase;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ image, fallback, className, size, variant, ...props }: AvatarProps) => React.JSX.Element) & {
-        original: ({ image, fallback, className, size, variant, ...props }: AvatarProps) => React.JSX.Element;
+    original: typeof AvatarBase & {
+        original: typeof AvatarBase;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ image, fallback, className, size, variant, ...props }: AvatarProps) => React.JSX.Element) & {
-        original: ({ image, fallback, className, size, variant, ...props }: AvatarProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof AvatarBase & {
+        original: typeof AvatarBase;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/Avatar/components/AvatarFallback.d.ts

@@ -1,21 +1,22 @@
 import * as React from "react";
 import { Avatar as AvatarPrimitive } from "radix-ui";
 type AvatarFallbackProps = AvatarPrimitive.AvatarFallbackProps;
-declare const AvatarFallback: (({ className, ...props }: AvatarFallbackProps) => React.JSX.Element) & {
-    original: ({ className, ...props }: AvatarFallbackProps) => React.JSX.Element;
+declare const AvatarFallbackBase: ({ className, ...props }: AvatarFallbackProps) => React.JSX.Element;
+declare const AvatarFallback: typeof AvatarFallbackBase & {
+    original: typeof AvatarFallbackBase;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ className, ...props }: AvatarFallbackProps) => React.JSX.Element) & {
-        original: ({ className, ...props }: AvatarFallbackProps) => React.JSX.Element;
+    original: typeof AvatarFallbackBase & {
+        original: typeof AvatarFallbackBase;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<(({ className, ...props }: AvatarFallbackProps) => React.JSX.Element) & {
-        original: ({ className, ...props }: AvatarFallbackProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<typeof AvatarFallbackBase & {
+        original: typeof AvatarFallbackBase;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/Avatar/components/AvatarImage.d.ts

@@ -1,21 +1,22 @@
 import * as React from "react";
 import { Avatar as AvatarPrimitive } from "radix-ui";
 type AvatarImageProps = AvatarPrimitive.AvatarImageProps;
-declare const AvatarImage: (({ className, ...props }: AvatarImageProps) => React.JSX.Element) & {
-    original: ({ className, ...props }: AvatarImageProps) => React.JSX.Element;
+declare const AvatarImageBase: ({ className, ...props }: AvatarImageProps) => React.JSX.Element;
+declare const AvatarImage: typeof AvatarImageBase & {
+    original: typeof AvatarImageBase;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ className, ...props }: AvatarImageProps) => React.JSX.Element) & {
-        original: ({ className, ...props }: AvatarImageProps) => React.JSX.Element;
+    original: typeof AvatarImageBase & {
+        original: typeof AvatarImageBase;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<(({ className, ...props }: AvatarImageProps) => React.JSX.Element) & {
-        original: ({ className, ...props }: AvatarImageProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<typeof AvatarImageBase & {
+        original: typeof AvatarImageBase;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/BetaBadge/BetaBadge.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+interface BetaBadgeProps {
+    text?: React.ReactNode;
+}
+declare const BetaBadge: ({ text }: BetaBadgeProps) => React.JSX.Element;
+export { BetaBadge, type BetaBadgeProps };

package/BetaBadge/BetaBadge.js

@@ -0,0 +1,7 @@
+import react from "react";
+const BetaBadge = ({ text = "beta" })=>/*#__PURE__*/ react.createElement("span", {
+        className: "inline-flex items-center rounded-sm bg-primary/50 px-xs text-[10px] font-semibold text-neutral-light leading-none h-md shrink-0"
+    }, text);
+export { BetaBadge };
+
+//# sourceMappingURL=BetaBadge.js.map