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

package/List/components/ListItemHandle.d.ts

@@ -4,21 +4,22 @@ interface ListItemHandleProps extends Omit<IconProps, "icon" | "label"> {
     icon?: React.ReactElement;
     label?: string;
 }
-declare const ListItemHandle: ((props: ListItemHandleProps) => React.JSX.Element) & {
-    original: (props: ListItemHandleProps) => React.JSX.Element;
+declare const DecoratableListItemHandle: (props: ListItemHandleProps) => React.JSX.Element;
+declare const ListItemHandle: typeof DecoratableListItemHandle & {
+    original: typeof DecoratableListItemHandle;
     originalName: string;
     displayName: string;
 } & {
-    original: ((props: ListItemHandleProps) => React.JSX.Element) & {
-        original: (props: ListItemHandleProps) => React.JSX.Element;
+    original: typeof DecoratableListItemHandle & {
+        original: typeof DecoratableListItemHandle;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<((props: ListItemHandleProps) => React.JSX.Element) & {
-        original: (props: ListItemHandleProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<typeof DecoratableListItemHandle & {
+        original: typeof DecoratableListItemHandle;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/List/components/ListItemIcon.d.ts

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

package/List/components/ListItemSeparator.d.ts

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

package/Loader/Loader.d.ts

@@ -1,10 +1,10 @@
 import React from "react";
 import { type VariantProps } from "../utils.js";
 declare const loaderVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | "xs" | null | undefined;
+    size?: "lg" | "md" | "sm" | "xs" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const loaderBaseVariant: (props?: ({
-    variant?: "accent" | "subtle" | "negative" | null | undefined;
+    variant?: "accent" | "negative" | "subtle" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface LoaderProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof loaderVariants>, VariantProps<typeof loaderBaseVariant> {
     max?: number;
@@ -14,21 +14,22 @@ interface LoaderProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps
     indeterminate?: boolean;
     text?: React.ReactNode;
 }
-declare const Loader: (({ max, min, value, indeterminate, className, size, variant, text, ...props }: LoaderProps) => React.JSX.Element) & {
-    original: ({ max, min, value, indeterminate, className, size, variant, text, ...props }: LoaderProps) => React.JSX.Element;
+declare const DecoratableLoader: ({ max, min, value, indeterminate, className, size, variant, text, ...props }: LoaderProps) => React.JSX.Element;
+declare const Loader: typeof DecoratableLoader & {
+    original: typeof DecoratableLoader;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ max, min, value, indeterminate, className, size, variant, text, ...props }: LoaderProps) => React.JSX.Element) & {
-        original: ({ max, min, value, indeterminate, className, size, variant, text, ...props }: LoaderProps) => React.JSX.Element;
+    original: typeof DecoratableLoader & {
+        original: typeof DecoratableLoader;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<(({ max, min, value, indeterminate, className, size, variant, text, ...props }: LoaderProps) => React.JSX.Element) & {
-        original: ({ max, min, value, indeterminate, className, size, variant, text, ...props }: LoaderProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<typeof DecoratableLoader & {
+        original: typeof DecoratableLoader;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/Loader/Loader.stories.d.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import { Loader } from "./Loader.js";
 declare const meta: Meta<typeof Loader>;
 export default meta;

package/Loader/Loader.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Loader/Loader.stories.js","sources":["../../src/Loader/Loader.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { Loader } from \"./Loader.js\";\n\nconst meta: Meta<typeof Loader> = {\n    title: \"Components/Loader\",\n    component: Loader,\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Loader>;\n\nexport const Documentation: Story = {\n    args: {\n        size: \"md\",\n        variant: \"accent\",\n        indeterminate: true,\n        value: 66,\n        min: 0,\n        max: 100,\n        text: \"Loading...\",\n        className: undefined\n    },\n    argTypes: {\n        size: {\n            description: \"Size of the loader\",\n            control: \"select\",\n            options: [\"xs\", \"sm\", \"md\", \"lg\"]\n        },\n        variant: {\n            description: \"Visual style variant of the loader\",\n            control: \"select\",\n            options: [\"accent\", \"subtle\", \"negative\"]\n        },\n        indeterminate: {\n            description: \"Whether the loader should show indeterminate progress\",\n            control: \"boolean\"\n        },\n        value: {\n            description: \"Current progress value (when not indeterminate)\",\n            control: { type: \"number\", min: 0, max: 100 }\n        },\n        min: {\n            description: \"Minimum value for progress calculation\",\n            control: \"number\"\n        },\n        max: {\n            description: \"Maximum value for progress calculation\",\n            control: \"number\"\n        },\n        text: {\n            description: \"Optional text to display below the loader\",\n            control: \"text\"\n        },\n        className: {\n            description:\n                \"Additional CSS class names. You can pass multiple class names, separated by commas or spaces.\"\n        }\n    }\n};\n\nexport const Default: Story = {};\n\nexport const ExtraSmall: Story = {\n    args: {\n        size: \"xs\"\n    }\n};\n\nexport const Small: Story = {\n    args: {\n        size: \"sm\"\n    }\n};\n\nexport const Medium: Story = {\n    args: {\n        size: \"md\"\n    }\n};\n\nexport const Large: Story = {\n    args: {\n        size: \"lg\"\n    }\n};\n\nexport const Accent: Story = {\n    args: {\n        variant: \"accent\"\n    }\n};\n\nexport const Subtle: Story = {\n    args: {\n        variant: \"subtle\"\n    }\n};\n\nexport const Negative: Story = {\n    args: {\n        variant: \"negative\"\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-primary p-md rounded-md\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const WithControlledValue: Story = {\n    args: {\n        value: 0,\n        indeterminate: false\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n\n        useEffect(() => {\n            const interval = setInterval(() => {\n                setValue((prevValue = 0) => {\n                    if (prevValue === 100) {\n                        return prevValue;\n                    }\n                    return prevValue + 5;\n                });\n            }, 50);\n\n            return () => clearInterval(interval);\n        }, []);\n\n        return <Loader {...args} value={value} text={`Loading ${value}%`} />;\n    }\n};\n\nexport const WithText: Story = {\n    args: {\n        text: \"Loading...\"\n    }\n};\n"],"names":["meta","Loader","Documentation","undefined","Default","ExtraSmall","Small","Medium","Large","Accent","Subtle","Negative","Story","WithControlledValue","args","value","setValue","useState","useEffect","interval","setInterval","prevValue","clearInterval","WithText"],"mappings":";;AAIA,MAAMA,OAA4B;IAC9B,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;AACJ;AAEA,uBAAeD;AAGR,MAAME,gBAAuB;IAChC,MAAM;QACF,MAAM;QACN,SAAS;QACT,eAAe;QACf,OAAO;QACP,KAAK;QACL,KAAK;QACL,MAAM;QACN,WAAWC;IACf;IACA,UAAU;QACN,MAAM;YACF,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAM;gBAAM;gBAAM;aAAK;QACrC;QACA,SAAS;YACL,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAU;gBAAU;aAAW;QAC7C;QACA,eAAe;YACX,aAAa;YACb,SAAS;QACb;QACA,OAAO;YACH,aAAa;YACb,SAAS;gBAAE,MAAM;gBAAU,KAAK;gBAAG,KAAK;YAAI;QAChD;QACA,KAAK;YACD,aAAa;YACb,SAAS;QACb;QACA,KAAK;YACD,aAAa;YACb,SAAS;QACb;QACA,MAAM;YACF,aAAa;YACb,SAAS;QACb;QACA,WAAW;YACP,aACI;QACR;IACJ;AACJ;AAEO,MAAMC,UAAiB,CAAC;AAExB,MAAMC,aAAoB;IAC7B,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,QAAe;IACxB,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,SAAgB;IACzB,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,QAAe;IACxB,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,SAAgB;IACzB,MAAM;QACF,SAAS;IACb;AACJ;AAEO,MAAMC,SAAgB;IACzB,MAAM;QACF,SAAS;IACb;AACJ;AAEO,MAAMC,WAAkB;IAC3B,MAAM;QACF,SAAS;IACb;IACA,YAAY;QACRC,CAAAA,QAAAA,WAAAA,GACI,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;AACL;AAEO,MAAMC,sBAA6B;IACtC,MAAM;QACF,OAAO;QACP,eAAe;IACnB;IACA,QAAQC,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAASH,KAAK,KAAK;QAE7CI,UAAU;YACN,MAAMC,WAAWC,YAAY;gBACzBJ,SAAS,CAACK,YAAY,CAAC;oBACnB,IAAIA,AAAc,QAAdA,WACA,OAAOA;oBAEX,OAAOA,YAAY;gBACvB;YACJ,GAAG;YAEH,OAAO,IAAMC,cAAcH;QAC/B,GAAG,EAAE;QAEL,OAAO,WAAP,GAAO,oBAAClB,QAAMA;YAAE,GAAGa,IAAI;YAAE,OAAOC;YAAO,MAAM,CAAC,QAAQ,EAAEA,MAAM,CAAC,CAAC;;IACpE;AACJ;AAEO,MAAMQ,WAAkB;IAC3B,MAAM;QACF,MAAM;IACV;AACJ"}
+{"version":3,"file":"Loader/Loader.stories.js","sources":["../../src/Loader/Loader.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { Loader } from \"./Loader.js\";\n\nconst meta: Meta<typeof Loader> = {\n    title: \"Components/Loader\",\n    component: Loader,\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Loader>;\n\nexport const Documentation: Story = {\n    args: {\n        size: \"md\",\n        variant: \"accent\",\n        indeterminate: true,\n        value: 66,\n        min: 0,\n        max: 100,\n        text: \"Loading...\",\n        className: undefined\n    },\n    argTypes: {\n        size: {\n            description: \"Size of the loader\",\n            control: \"select\",\n            options: [\"xs\", \"sm\", \"md\", \"lg\"]\n        },\n        variant: {\n            description: \"Visual style variant of the loader\",\n            control: \"select\",\n            options: [\"accent\", \"subtle\", \"negative\"]\n        },\n        indeterminate: {\n            description: \"Whether the loader should show indeterminate progress\",\n            control: \"boolean\"\n        },\n        value: {\n            description: \"Current progress value (when not indeterminate)\",\n            control: { type: \"number\", min: 0, max: 100 }\n        },\n        min: {\n            description: \"Minimum value for progress calculation\",\n            control: \"number\"\n        },\n        max: {\n            description: \"Maximum value for progress calculation\",\n            control: \"number\"\n        },\n        text: {\n            description: \"Optional text to display below the loader\",\n            control: \"text\"\n        },\n        className: {\n            description:\n                \"Additional CSS class names. You can pass multiple class names, separated by commas or spaces.\"\n        }\n    }\n};\n\nexport const Default: Story = {};\n\nexport const ExtraSmall: Story = {\n    args: {\n        size: \"xs\"\n    }\n};\n\nexport const Small: Story = {\n    args: {\n        size: \"sm\"\n    }\n};\n\nexport const Medium: Story = {\n    args: {\n        size: \"md\"\n    }\n};\n\nexport const Large: Story = {\n    args: {\n        size: \"lg\"\n    }\n};\n\nexport const Accent: Story = {\n    args: {\n        variant: \"accent\"\n    }\n};\n\nexport const Subtle: Story = {\n    args: {\n        variant: \"subtle\"\n    }\n};\n\nexport const Negative: Story = {\n    args: {\n        variant: \"negative\"\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-primary p-md rounded-md\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const WithControlledValue: Story = {\n    args: {\n        value: 0,\n        indeterminate: false\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n\n        useEffect(() => {\n            const interval = setInterval(() => {\n                setValue((prevValue = 0) => {\n                    if (prevValue === 100) {\n                        return prevValue;\n                    }\n                    return prevValue + 5;\n                });\n            }, 50);\n\n            return () => clearInterval(interval);\n        }, []);\n\n        return <Loader {...args} value={value} text={`Loading ${value}%`} />;\n    }\n};\n\nexport const WithText: Story = {\n    args: {\n        text: \"Loading...\"\n    }\n};\n"],"names":["meta","Loader","Documentation","undefined","Default","ExtraSmall","Small","Medium","Large","Accent","Subtle","Negative","Story","WithControlledValue","args","value","setValue","useState","useEffect","interval","setInterval","prevValue","clearInterval","WithText"],"mappings":";;AAIA,MAAMA,OAA4B;IAC9B,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;AACJ;AAEA,uBAAeD;AAGR,MAAME,gBAAuB;IAChC,MAAM;QACF,MAAM;QACN,SAAS;QACT,eAAe;QACf,OAAO;QACP,KAAK;QACL,KAAK;QACL,MAAM;QACN,WAAWC;IACf;IACA,UAAU;QACN,MAAM;YACF,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAM;gBAAM;gBAAM;aAAK;QACrC;QACA,SAAS;YACL,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAU;gBAAU;aAAW;QAC7C;QACA,eAAe;YACX,aAAa;YACb,SAAS;QACb;QACA,OAAO;YACH,aAAa;YACb,SAAS;gBAAE,MAAM;gBAAU,KAAK;gBAAG,KAAK;YAAI;QAChD;QACA,KAAK;YACD,aAAa;YACb,SAAS;QACb;QACA,KAAK;YACD,aAAa;YACb,SAAS;QACb;QACA,MAAM;YACF,aAAa;YACb,SAAS;QACb;QACA,WAAW;YACP,aACI;QACR;IACJ;AACJ;AAEO,MAAMC,UAAiB,CAAC;AAExB,MAAMC,aAAoB;IAC7B,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,QAAe;IACxB,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,SAAgB;IACzB,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,QAAe;IACxB,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,SAAgB;IACzB,MAAM;QACF,SAAS;IACb;AACJ;AAEO,MAAMC,SAAgB;IACzB,MAAM;QACF,SAAS;IACb;AACJ;AAEO,MAAMC,WAAkB;IAC3B,MAAM;QACF,SAAS;IACb;IACA,YAAY;QACRC,CAAAA,QAAAA,WAAAA,GACI,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;AACL;AAEO,MAAMC,sBAA6B;IACtC,MAAM;QACF,OAAO;QACP,eAAe;IACnB;IACA,QAAQC,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAASH,KAAK,KAAK;QAE7CI,UAAU;YACN,MAAMC,WAAWC,YAAY;gBACzBJ,SAAS,CAACK,YAAY,CAAC;oBACnB,IAAIA,AAAc,QAAdA,WACA,OAAOA;oBAEX,OAAOA,YAAY;gBACvB;YACJ,GAAG;YAEH,OAAO,IAAMC,cAAcH;QAC/B,GAAG,EAAE;QAEL,OAAO,WAAP,GAAO,oBAAClB,QAAMA;YAAE,GAAGa,IAAI;YAAE,OAAOC;YAAO,MAAM,CAAC,QAAQ,EAAEA,MAAM,CAAC,CAAC;;IACpE;AACJ;AAEO,MAAMQ,WAAkB;IAC3B,MAAM;QACF,MAAM;IACV;AACJ"}

package/Loader/OverlayLoader.d.ts

@@ -1,21 +1,22 @@
 import React from "react";
 import type { LoaderProps } from "./Loader.js";
 type OverlayLoaderProps = LoaderProps;
-declare const OverlayLoader: (({ className, size, ...props }: OverlayLoaderProps) => React.JSX.Element) & {
-    original: ({ className, size, ...props }: OverlayLoaderProps) => React.JSX.Element;
+declare const DecoratableOverlayLoader: ({ className, size, ...props }: OverlayLoaderProps) => React.JSX.Element;
+declare const OverlayLoader: typeof DecoratableOverlayLoader & {
+    original: typeof DecoratableOverlayLoader;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ className, size, ...props }: OverlayLoaderProps) => React.JSX.Element) & {
-        original: ({ className, size, ...props }: OverlayLoaderProps) => React.JSX.Element;
+    original: typeof DecoratableOverlayLoader & {
+        original: typeof DecoratableOverlayLoader;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ className, size, ...props }: OverlayLoaderProps) => React.JSX.Element) & {
-        original: ({ className, size, ...props }: OverlayLoaderProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof DecoratableOverlayLoader & {
+        original: typeof DecoratableOverlayLoader;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/Loader/OverlayLoader.stories.d.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import { OverlayLoader } from "./OverlayLoader.js";
 declare const meta: Meta<typeof OverlayLoader>;
 export default meta;

package/Loader/OverlayLoader.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Loader/OverlayLoader.stories.js","sources":["../../src/Loader/OverlayLoader.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { OverlayLoader } from \"./OverlayLoader.js\";\n\nconst meta: Meta<typeof OverlayLoader> = {\n    title: \"Components/Overlay Loader\",\n    component: OverlayLoader,\n    parameters: {\n        layout: \"padded\"\n    },\n    decorators: [\n        Story => (\n            <div>\n                <Story />\n                The OverlayLoader component covers its parent container with a semi-transparent\n                overlay, typically used to indicate a loading state while keeping the background\n                content visible but inactive.\n            </div>\n        )\n    ]\n};\n\nexport default meta;\ntype Story = StoryObj<typeof OverlayLoader>;\n\nexport const Documentation: Story = {\n    args: {\n        size: \"lg\",\n        variant: \"accent\",\n        indeterminate: true,\n        value: 66,\n        min: 0,\n        max: 100,\n        text: \"Loading...\",\n        className: undefined\n    },\n    argTypes: {\n        size: {\n            description: \"Size of the loader\",\n            control: \"select\",\n            options: [\"xs\", \"sm\", \"md\", \"lg\"]\n        },\n        variant: {\n            description: \"Visual style variant of the loader\",\n            control: \"select\",\n            options: [\"accent\", \"subtle\", \"negative\"]\n        },\n        indeterminate: {\n            description: \"Whether the loader should show indeterminate progress\",\n            control: \"boolean\"\n        },\n        value: {\n            description: \"Current progress value (when not indeterminate)\",\n            control: { type: \"number\", min: 0, max: 100 }\n        },\n        min: {\n            description: \"Minimum value for progress calculation\",\n            control: \"number\"\n        },\n        max: {\n            description: \"Maximum value for progress calculation\",\n            control: \"number\"\n        },\n        text: {\n            description: \"Optional text to display below the loader\",\n            control: \"text\"\n        },\n        className: {\n            description:\n                \"Additional CSS class names. You can pass multiple class names, separated by commas or spaces.\"\n        }\n    }\n};\n\nexport const Default: Story = {};\n\nexport const CircularProgressWithText: Story = {\n    name: \"With text\",\n    args: {\n        text: \"Loading...\"\n    }\n};\n"],"names":["meta","OverlayLoader","Story","Documentation","undefined","Default","CircularProgressWithText"],"mappings":";;AAIA,MAAMA,OAAmC;IACrC,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;IACA,YAAY;QACRC,CAAAA,QAAAA,WAAAA,GACI,oBAAC,2BACG,oBAACA,OAAAA,OAAQ;KAMpB;AACL;AAEA,8BAAeF;AAGR,MAAMG,gBAAuB;IAChC,MAAM;QACF,MAAM;QACN,SAAS;QACT,eAAe;QACf,OAAO;QACP,KAAK;QACL,KAAK;QACL,MAAM;QACN,WAAWC;IACf;IACA,UAAU;QACN,MAAM;YACF,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAM;gBAAM;gBAAM;aAAK;QACrC;QACA,SAAS;YACL,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAU;gBAAU;aAAW;QAC7C;QACA,eAAe;YACX,aAAa;YACb,SAAS;QACb;QACA,OAAO;YACH,aAAa;YACb,SAAS;gBAAE,MAAM;gBAAU,KAAK;gBAAG,KAAK;YAAI;QAChD;QACA,KAAK;YACD,aAAa;YACb,SAAS;QACb;QACA,KAAK;YACD,aAAa;YACb,SAAS;QACb;QACA,MAAM;YACF,aAAa;YACb,SAAS;QACb;QACA,WAAW;YACP,aACI;QACR;IACJ;AACJ;AAEO,MAAMC,UAAiB,CAAC;AAExB,MAAMC,2BAAkC;IAC3C,MAAM;IACN,MAAM;QACF,MAAM;IACV;AACJ"}
+{"version":3,"file":"Loader/OverlayLoader.stories.js","sources":["../../src/Loader/OverlayLoader.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { OverlayLoader } from \"./OverlayLoader.js\";\n\nconst meta: Meta<typeof OverlayLoader> = {\n    title: \"Components/Overlay Loader\",\n    component: OverlayLoader,\n    parameters: {\n        layout: \"padded\"\n    },\n    decorators: [\n        Story => (\n            <div>\n                <Story />\n                The OverlayLoader component covers its parent container with a semi-transparent\n                overlay, typically used to indicate a loading state while keeping the background\n                content visible but inactive.\n            </div>\n        )\n    ]\n};\n\nexport default meta;\ntype Story = StoryObj<typeof OverlayLoader>;\n\nexport const Documentation: Story = {\n    args: {\n        size: \"lg\",\n        variant: \"accent\",\n        indeterminate: true,\n        value: 66,\n        min: 0,\n        max: 100,\n        text: \"Loading...\",\n        className: undefined\n    },\n    argTypes: {\n        size: {\n            description: \"Size of the loader\",\n            control: \"select\",\n            options: [\"xs\", \"sm\", \"md\", \"lg\"]\n        },\n        variant: {\n            description: \"Visual style variant of the loader\",\n            control: \"select\",\n            options: [\"accent\", \"subtle\", \"negative\"]\n        },\n        indeterminate: {\n            description: \"Whether the loader should show indeterminate progress\",\n            control: \"boolean\"\n        },\n        value: {\n            description: \"Current progress value (when not indeterminate)\",\n            control: { type: \"number\", min: 0, max: 100 }\n        },\n        min: {\n            description: \"Minimum value for progress calculation\",\n            control: \"number\"\n        },\n        max: {\n            description: \"Maximum value for progress calculation\",\n            control: \"number\"\n        },\n        text: {\n            description: \"Optional text to display below the loader\",\n            control: \"text\"\n        },\n        className: {\n            description:\n                \"Additional CSS class names. You can pass multiple class names, separated by commas or spaces.\"\n        }\n    }\n};\n\nexport const Default: Story = {};\n\nexport const CircularProgressWithText: Story = {\n    name: \"With text\",\n    args: {\n        text: \"Loading...\"\n    }\n};\n"],"names":["meta","OverlayLoader","Story","Documentation","undefined","Default","CircularProgressWithText"],"mappings":";;AAIA,MAAMA,OAAmC;IACrC,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;IACA,YAAY;QACRC,CAAAA,QAAAA,WAAAA,GACI,oBAAC,2BACG,oBAACA,OAAAA,OAAQ;KAMpB;AACL;AAEA,8BAAeF;AAGR,MAAMG,gBAAuB;IAChC,MAAM;QACF,MAAM;QACN,SAAS;QACT,eAAe;QACf,OAAO;QACP,KAAK;QACL,KAAK;QACL,MAAM;QACN,WAAWC;IACf;IACA,UAAU;QACN,MAAM;YACF,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAM;gBAAM;gBAAM;aAAK;QACrC;QACA,SAAS;YACL,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAU;gBAAU;aAAW;QAC7C;QACA,eAAe;YACX,aAAa;YACb,SAAS;QACb;QACA,OAAO;YACH,aAAa;YACb,SAAS;gBAAE,MAAM;gBAAU,KAAK;gBAAG,KAAK;YAAI;QAChD;QACA,KAAK;YACD,aAAa;YACb,SAAS;QACb;QACA,KAAK;YACD,aAAa;YACb,SAAS;QACb;QACA,MAAM;YACF,aAAa;YACb,SAAS;QACb;QACA,WAAW;YACP,aACI;QACR;IACJ;AACJ;AAEO,MAAMC,UAAiB,CAAC;AAExB,MAAMC,2BAAkC;IAC3C,MAAM;IACN,MAAM;QACF,MAAM;IACV;AACJ"}

package/Markdown/Markdown.d.ts

@@ -0,0 +1,47 @@
+import React from "react";
+import { type TextProps } from "../Text/index.js";
+/**
+ * Styling for compiled markdown BLOCKS.
+ *
+ * Tailwind's preflight strips list markers and paragraph margins, and the markdown compiler emits
+ * bare elements, so without this a list renders as unindented run-on text and a fenced code block as
+ * plain prose. Child selectors rather than a global stylesheet, so this reaches only markdown that
+ * was asked to be styled.
+ *
+ * Exported for a caller that needs the classes without this component, e.g. one already rendering
+ * compiled markdown inside its own element.
+ */
+export declare const markdownBlockClasses: string;
+export interface MarkdownProps extends Pick<TextProps, "size" | "className"> {
+    children: React.ReactNode;
+}
+/**
+ * Renders markdown that contains block content: paragraphs, lists, fenced code.
+ *
+ * `Alert`, `Label` and the form-field descriptions call `compileMarkdown` directly and need none of
+ * this, because they render a sentence with a bold word or a link. Reach for this component when the
+ * source is long-form and its structure has to survive.
+ *
+ * Renders a `div`, since `Text` is a span by default and block markdown nested in one is invalid.
+ */
+declare const MarkdownBase: ({ children, size, className }: MarkdownProps) => React.JSX.Element;
+declare const Markdown: typeof MarkdownBase & {
+    original: typeof MarkdownBase;
+    originalName: string;
+    displayName: string;
+} & {
+    original: typeof MarkdownBase & {
+        original: typeof MarkdownBase;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<typeof MarkdownBase & {
+        original: typeof MarkdownBase;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+export { Markdown };

package/Markdown/Markdown.js

@@ -0,0 +1,17 @@
+import react from "react";
+import { cn, makeDecoratable } from "../utils.js";
+import { Text } from "../Text/index.js";
+import { useAdminUi } from "../AdminUiProvider/index.js";
+const markdownBlockClasses = "[&_p]:mb-xs [&_p:last-child]:mb-0 [&_ul]:mb-xs [&_ul]:list-disc [&_ul]:pl-lg [&_ol]:mb-xs [&_ol]:list-decimal [&_ol]:pl-lg [&_li]:mt-xxs [&_strong]:font-semibold [&_a]:underline [&_code]:rounded [&_code]:bg-neutral-subtle [&_code]:px-xs [&_code]:font-mono [&_pre]:mb-xs [&_pre]:overflow-x-auto [&_pre]:rounded [&_pre]:bg-neutral-subtle [&_pre]:p-sm";
+const MarkdownBase = ({ children, size = "sm", className })=>{
+    const { compileMarkdown } = useAdminUi();
+    return /*#__PURE__*/ react.createElement(Text, {
+        as: "div",
+        size: size,
+        className: cn(markdownBlockClasses, className)
+    }, compileMarkdown(children));
+};
+const Markdown = makeDecoratable("Markdown", MarkdownBase);
+export { Markdown, markdownBlockClasses };
+
+//# sourceMappingURL=Markdown.js.map

package/Markdown/Markdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Markdown/Markdown.js","sources":["../../src/Markdown/Markdown.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, makeDecoratable } from \"~/utils.js\";\nimport { Text, type TextProps } from \"~/Text/index.js\";\nimport { useAdminUi } from \"~/AdminUiProvider/index.js\";\n\n/**\n * Styling for compiled markdown BLOCKS.\n *\n * Tailwind's preflight strips list markers and paragraph margins, and the markdown compiler emits\n * bare elements, so without this a list renders as unindented run-on text and a fenced code block as\n * plain prose. Child selectors rather than a global stylesheet, so this reaches only markdown that\n * was asked to be styled.\n *\n * Exported for a caller that needs the classes without this component, e.g. one already rendering\n * compiled markdown inside its own element.\n */\nexport const markdownBlockClasses = [\n    \"[&_p]:mb-xs [&_p:last-child]:mb-0\",\n    \"[&_ul]:mb-xs [&_ul]:list-disc [&_ul]:pl-lg\",\n    \"[&_ol]:mb-xs [&_ol]:list-decimal [&_ol]:pl-lg\",\n    \"[&_li]:mt-xxs\",\n    \"[&_strong]:font-semibold\",\n    \"[&_a]:underline\",\n    \"[&_code]:rounded [&_code]:bg-neutral-subtle [&_code]:px-xs [&_code]:font-mono\",\n    \"[&_pre]:mb-xs [&_pre]:overflow-x-auto [&_pre]:rounded [&_pre]:bg-neutral-subtle [&_pre]:p-sm\"\n].join(\" \");\n\nexport interface MarkdownProps extends Pick<TextProps, \"size\" | \"className\"> {\n    children: React.ReactNode;\n}\n\n/**\n * Renders markdown that contains block content: paragraphs, lists, fenced code.\n *\n * `Alert`, `Label` and the form-field descriptions call `compileMarkdown` directly and need none of\n * this, because they render a sentence with a bold word or a link. Reach for this component when the\n * source is long-form and its structure has to survive.\n *\n * Renders a `div`, since `Text` is a span by default and block markdown nested in one is invalid.\n */\nconst MarkdownBase = ({ children, size = \"sm\", className }: MarkdownProps) => {\n    const { compileMarkdown } = useAdminUi();\n\n    return (\n        <Text as=\"div\" size={size} className={cn(markdownBlockClasses, className)}>\n            {compileMarkdown(children)}\n        </Text>\n    );\n};\n\nconst Markdown = makeDecoratable(\"Markdown\", MarkdownBase);\n\nexport { Markdown };\n"],"names":["markdownBlockClasses","MarkdownBase","children","size","className","compileMarkdown","useAdminUi","Text","cn","Markdown","makeDecoratable"],"mappings":";;;;AAgBO,MAAMA,uBAAuB;AAwBpC,MAAMC,eAAe,CAAC,EAAEC,QAAQ,EAAEC,OAAO,IAAI,EAAEC,SAAS,EAAiB;IACrE,MAAM,EAAEC,eAAe,EAAE,GAAGC;IAE5B,OAAO,WAAP,GACI,oBAACC,MAAIA;QAAC,IAAG;QAAM,MAAMJ;QAAM,WAAWK,GAAGR,sBAAsBI;OAC1DC,gBAAgBH;AAG7B;AAEA,MAAMO,WAAWC,gBAAgB,YAAYT"}

package/Markdown/index.d.ts

@@ -0,0 +1 @@
+export * from "./Markdown.js";

package/Markdown/index.js

@@ -0,0 +1 @@
+export * from "./Markdown.js";

package/MultiAutoComplete/MultiAutoComplete.d.ts

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

package/MultiAutoComplete/MultiAutoComplete.stories.d.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import { MultiAutoComplete } from "./MultiAutoComplete.js";
 declare const meta: Meta<typeof MultiAutoComplete>;
 export default meta;

package/MultiAutoComplete/MultiAutoComplete.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiAutoComplete/MultiAutoComplete.stories.js","sources":["../../src/MultiAutoComplete/MultiAutoComplete.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { MultiAutoComplete } from \"./MultiAutoComplete.js\";\n\nconst meta: Meta<typeof MultiAutoComplete> = {\n    title: \"Components/Form/Multi AutoComplete\",\n    component: MultiAutoComplete,\n    argTypes: {\n        onValuesChange: { action: \"onValuesChange\" },\n        onOpenChange: { action: \"onOpenChange\" },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [values, setValues] = useState(args.values);\n        return <MultiAutoComplete {...args} values={values} onValuesChange={setValues} />;\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof MultiAutoComplete>;\n\nexport const Default: Story = {\n    args: {\n        options: [\n            \"Eastern Standard Time (EST)\",\n            \"Central Standard Time (CST)\",\n            \"Pacific Standard Time (PST)\",\n            \"Greenwich Mean Time (GMT)\",\n            \"Central European Time (CET)\",\n            \"Central Africa Time (CAT)\",\n            \"India Standard Time (IST)\",\n            \"China Standard Time (CST)\",\n            \"Japan Standard Time (JST)\",\n            \"Australian Western Standard Time (AWST)\",\n            \"New Zealand Standard Time (NZST)\",\n            \"Fiji Time (FJT)\",\n            \"Argentina Time (ART)\",\n            \"Bolivia Time (BOT)\",\n            \"Brasilia Time (BRT)\"\n        ]\n    }\n};\n\nexport const WithLabel: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const WithRequiredLabel: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        ...Default.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const WithNotes: Story = {\n    args: {\n        ...Default.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const WithErrors: Story = {\n    args: {\n        ...Default.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const FullExample: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        required: true,\n        description: \"Provide the required information for processing your request.\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        const [values, setValues] = useState(args.values || []);\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        // Update validation when values change\n        useEffect(() => {\n            if (args.required && (!values || values.length === 0)) {\n                setValidation({ isValid: false, message: \"Please select at least one option\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        }, [values, args.required]);\n\n        return (\n            <MultiAutoComplete\n                {...args}\n                values={values}\n                onValuesChange={setValues}\n                validation={validation}\n            />\n        );\n    },\n    args: {\n        label: \"Time Zones\",\n        description: \"Select one or more time zones\",\n        placeholder: \"Search or select time zones\",\n        required: true,\n        allowFreeInput: true,\n        note: \"You can add custom time zones if needed\",\n        options: [\n            \"Eastern Standard Time (EST)\",\n            \"Central Standard Time (CST)\",\n            \"Pacific Standard Time (PST)\",\n            \"Greenwich Mean Time (GMT)\"\n        ],\n        values: [],\n        onValuesChange: undefined,\n        disabled: false,\n        validation: undefined,\n        onOpenChange: undefined\n    },\n    argTypes: {\n        label: {\n            description: \"Label text for the component\",\n            control: \"text\"\n        },\n        description: {\n            description: \"Additional description text displayed below the label\",\n            control: \"text\"\n        },\n        placeholder: {\n            description: \"Placeholder text for the input\",\n            control: \"text\"\n        },\n        required: {\n            description: \"Marks the field as required when true\",\n            control: \"boolean\"\n        },\n        disabled: {\n            description: \"Disables the component when set to true\",\n            control: \"boolean\"\n        },\n        allowFreeInput: {\n            description: \"Allows users to add custom values not in the options list\",\n            control: \"boolean\"\n        },\n        note: {\n            description: \"Additional note text displayed below the component\",\n            control: \"text\"\n        },\n        options: {\n            description: \"Array of options to display in the dropdown\",\n            control: \"object\"\n        },\n        values: {\n            description: \"Array of currently selected values\",\n            control: \"object\"\n        },\n        onValuesChange: {\n            description: \"Callback fired when selected values change\"\n        },\n        validation: {\n            description:\n                \"Object containing validation state and message. Please refer to the example code for details on usage.\"\n        },\n        onOpenChange: {\n            description:\n                \"Callback triggered when the dropdown opens or closes, allowing you to respond to changes in its open state.\"\n        }\n    }\n};\n"],"names":["meta","MultiAutoComplete","args","values","setValues","useState","Default","WithLabel","WithRequiredLabel","WithDescription","WithNotes","WithErrors","Disabled","FullExample","Documentation","validation","setValidation","useEffect","undefined"],"mappings":"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"}
+{"version":3,"file":"MultiAutoComplete/MultiAutoComplete.stories.js","sources":["../../src/MultiAutoComplete/MultiAutoComplete.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { MultiAutoComplete } from \"./MultiAutoComplete.js\";\n\nconst meta: Meta<typeof MultiAutoComplete> = {\n    title: \"Components/Form/Multi AutoComplete\",\n    component: MultiAutoComplete,\n    argTypes: {\n        onValuesChange: { action: \"onValuesChange\" },\n        onOpenChange: { action: \"onOpenChange\" },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [values, setValues] = useState(args.values);\n        return <MultiAutoComplete {...args} values={values} onValuesChange={setValues} />;\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof MultiAutoComplete>;\n\nexport const Default: Story = {\n    args: {\n        options: [\n            \"Eastern Standard Time (EST)\",\n            \"Central Standard Time (CST)\",\n            \"Pacific Standard Time (PST)\",\n            \"Greenwich Mean Time (GMT)\",\n            \"Central European Time (CET)\",\n            \"Central Africa Time (CAT)\",\n            \"India Standard Time (IST)\",\n            \"China Standard Time (CST)\",\n            \"Japan Standard Time (JST)\",\n            \"Australian Western Standard Time (AWST)\",\n            \"New Zealand Standard Time (NZST)\",\n            \"Fiji Time (FJT)\",\n            \"Argentina Time (ART)\",\n            \"Bolivia Time (BOT)\",\n            \"Brasilia Time (BRT)\"\n        ]\n    }\n};\n\nexport const WithLabel: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const WithRequiredLabel: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        ...Default.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const WithNotes: Story = {\n    args: {\n        ...Default.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const WithErrors: Story = {\n    args: {\n        ...Default.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const FullExample: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        required: true,\n        description: \"Provide the required information for processing your request.\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        const [values, setValues] = useState(args.values || []);\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        // Update validation when values change\n        useEffect(() => {\n            if (args.required && (!values || values.length === 0)) {\n                setValidation({ isValid: false, message: \"Please select at least one option\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        }, [values, args.required]);\n\n        return (\n            <MultiAutoComplete\n                {...args}\n                values={values}\n                onValuesChange={setValues}\n                validation={validation}\n            />\n        );\n    },\n    args: {\n        label: \"Time Zones\",\n        description: \"Select one or more time zones\",\n        placeholder: \"Search or select time zones\",\n        required: true,\n        allowFreeInput: true,\n        note: \"You can add custom time zones if needed\",\n        options: [\n            \"Eastern Standard Time (EST)\",\n            \"Central Standard Time (CST)\",\n            \"Pacific Standard Time (PST)\",\n            \"Greenwich Mean Time (GMT)\"\n        ],\n        values: [],\n        onValuesChange: undefined,\n        disabled: false,\n        validation: undefined,\n        onOpenChange: undefined\n    },\n    argTypes: {\n        label: {\n            description: \"Label text for the component\",\n            control: \"text\"\n        },\n        description: {\n            description: \"Additional description text displayed below the label\",\n            control: \"text\"\n        },\n        placeholder: {\n            description: \"Placeholder text for the input\",\n            control: \"text\"\n        },\n        required: {\n            description: \"Marks the field as required when true\",\n            control: \"boolean\"\n        },\n        disabled: {\n            description: \"Disables the component when set to true\",\n            control: \"boolean\"\n        },\n        allowFreeInput: {\n            description: \"Allows users to add custom values not in the options list\",\n            control: \"boolean\"\n        },\n        note: {\n            description: \"Additional note text displayed below the component\",\n            control: \"text\"\n        },\n        options: {\n            description: \"Array of options to display in the dropdown\",\n            control: \"object\"\n        },\n        values: {\n            description: \"Array of currently selected values\",\n            control: \"object\"\n        },\n        onValuesChange: {\n            description: \"Callback fired when selected values change\"\n        },\n        validation: {\n            description:\n                \"Object containing validation state and message. Please refer to the example code for details on usage.\"\n        },\n        onOpenChange: {\n            description:\n                \"Callback triggered when the dropdown opens or closes, allowing you to respond to changes in its open state.\"\n        }\n    }\n};\n"],"names":["meta","MultiAutoComplete","args","values","setValues","useState","Default","WithLabel","WithRequiredLabel","WithDescription","WithNotes","WithErrors","Disabled","FullExample","Documentation","validation","setValidation","useEffect","undefined"],"mappings":"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"}

package/MultiAutoComplete/primitives/MultiAutoCompletePrimitive.d.ts

@@ -82,6 +82,12 @@ interface MultiAutoCompletePrimitiveProps {
      * Custom renderer for the selected options.
      */
     selectedOptionRenderer?: (item: any, index: number) => React.ReactNode;
+    /**
+     * Filter the options by the typed text on the client. Defaults to `true`.
+     * Set to `false` when `onValueSearch` already returns the matching options,
+     * so options matched on data other than their label are not dropped.
+     */
+    shouldFilter?: boolean;
     /**
      * Icon to be displayed at the start of the input field.
      */
@@ -100,21 +106,22 @@ interface MultiAutoCompletePrimitiveProps {
      */
     values?: string[];
 }
-declare const MultiAutoCompletePrimitive: ((props: MultiAutoCompletePrimitiveProps) => React.JSX.Element) & {
-    original: (props: MultiAutoCompletePrimitiveProps) => React.JSX.Element;
+declare const DecoratableMultiAutoCompletePrimitive: (props: MultiAutoCompletePrimitiveProps) => React.JSX.Element;
+declare const MultiAutoCompletePrimitive: typeof DecoratableMultiAutoCompletePrimitive & {
+    original: typeof DecoratableMultiAutoCompletePrimitive;
     originalName: string;
     displayName: string;
 } & {
-    original: ((props: MultiAutoCompletePrimitiveProps) => React.JSX.Element) & {
-        original: (props: MultiAutoCompletePrimitiveProps) => React.JSX.Element;
+    original: typeof DecoratableMultiAutoCompletePrimitive & {
+        original: typeof DecoratableMultiAutoCompletePrimitive;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: MultiAutoCompletePrimitiveProps) => React.JSX.Element) & {
-        original: (props: MultiAutoCompletePrimitiveProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof DecoratableMultiAutoCompletePrimitive & {
+        original: typeof DecoratableMultiAutoCompletePrimitive;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/MultiAutoComplete/primitives/MultiAutoCompletePrimitive.js

@@ -35,6 +35,7 @@ const DecoratableMultiAutoCompletePrimitive = (props)=>{
         onOpenChange: ()=>setListOpenState(true)
     }, /*#__PURE__*/ react.createElement(Command, {
         label: String(props.label),
+        shouldFilter: props.shouldFilter,
         onKeyDown: handleKeyDown
     }, /*#__PURE__*/ react.createElement(PopoverPrimitive.Trigger, {
         asChild: true

package/MultiAutoComplete/primitives/MultiAutoCompletePrimitive.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiAutoComplete/primitives/MultiAutoCompletePrimitive.js","sources":["../../../src/MultiAutoComplete/primitives/MultiAutoCompletePrimitive.tsx"],"sourcesContent":["import type { KeyboardEvent } from \"react\";\nimport React from \"react\";\nimport { Command } from \"~/Command/index.js\";\nimport { PopoverPrimitive } from \"~/Popover/index.js\";\nimport type { InputPrimitiveProps } from \"~/Input/index.js\";\nimport { makeDecoratable } from \"~/utils.js\";\nimport { useMultiAutoComplete } from \"./useMultiAutoComplete.js\";\nimport {\n    MultiAutoCompleteInput,\n    MultiAutoCompleteInputIcons,\n    MultiAutoCompleteList\n} from \"./components/index.js\";\nimport type { MultiAutoCompleteOption } from \"../domains/index.js\";\nimport type { Icon } from \"~/Icon/index.js\";\n\ninterface MultiAutoCompletePrimitiveProps {\n    /**\n     * Allows free input of values not present in the options.\n     */\n    allowFreeInput?: boolean;\n    /**\n     * Indicates if the reset action should be displayed.\n     */\n    displayResetAction?: boolean;\n    /**\n     * Indicates if the field is disabled.\n     */\n    disabled?: boolean;\n    /**\n     * Message to display when there are no options.\n     */\n    emptyMessage?: React.ReactNode;\n    /**\n     * Indicates if the input field is invalid.\n     * Refer to `InputPrimitiveProps[\"invalid\"]` for possible values.\n     */\n    invalid?: InputPrimitiveProps[\"invalid\"];\n    /**\n     * Message to display when there are no options loaded or selected.\n     * Use it to invite the user to interact with the autocomplete by typing a value.\n     */\n    initialMessage?: React.ReactNode;\n    /**\n     * Reference to the input element.\n     */\n    inputRef?: React.Ref<HTMLInputElement>;\n    /**\n     * Accessible label for the command menu. Not shown visibly.\n     */\n    label?: React.ReactNode;\n    /**\n     * Indicates if the autocomplete is loading options.\n     */\n    loading?: boolean;\n    /**\n     * Message to display while loading options.\n     */\n    loadingMessage?: React.ReactNode;\n    /**\n     * Callback triggered when the open state changes.\n     */\n    onOpenChange?: (open: boolean) => void;\n    /**\n     * Callback triggered when a value has been searched by the user.\n     */\n    onValueSearch?: (value: string) => void;\n    /**\n     * Callback triggered when the values change.\n     */\n    onValuesChange: (values: string[]) => void;\n    /**\n     * Callback triggered to reset the values.\n     */\n    onValuesReset?: () => void;\n    /**\n     * List of options for the autocomplete.\n     */\n    options?: MultiAutoCompleteOption[];\n    /**\n     * Custom renderer for the options.\n     */\n    optionRenderer?: (item: any, index: number) => React.ReactNode;\n    /**\n     * Placeholder text for the input field.\n     */\n    placeholder?: string;\n    /**\n     * Size of the input field.\n     * Refer to `InputPrimitiveProps[\"size\"]` for possible values.\n     */\n    size?: InputPrimitiveProps[\"size\"];\n    /**\n     * Custom renderer for the selected options.\n     */\n    selectedOptionRenderer?: (item: any, index: number) => React.ReactNode;\n    /**\n     * Icon to be displayed at the start of the input field.\n     */\n    startIcon?: React.ReactElement<typeof Icon> | React.ReactElement;\n    /**\n     * Ensures that each value is unique.\n     */\n    uniqueValues?: boolean;\n    /**\n     * Variant of the input field.\n     * Refer to `InputPrimitiveProps[\"variant\"]` for possible values.\n     */\n    variant?: InputPrimitiveProps[\"variant\"];\n    /**\n     * Optional selected items.\n     */\n    values?: string[];\n}\n\nconst DecoratableMultiAutoCompletePrimitive = (props: MultiAutoCompletePrimitiveProps) => {\n    const {\n        vm,\n        setListOpenState,\n        setSelectedOption,\n        searchOption,\n        removeSelectedOption,\n        resetSelectedOptions,\n        createOption\n    } = useMultiAutoComplete(props);\n\n    const handleKeyDown = React.useCallback(\n        (event: KeyboardEvent<HTMLDivElement>) => {\n            if (props.disabled) {\n                return;\n            }\n\n            if (!vm.optionsListVm.open) {\n                setListOpenState(true);\n            }\n\n            if (event.key.toLowerCase() === \"escape\") {\n                setListOpenState(false);\n            }\n        },\n        [props.disabled, setListOpenState, setSelectedOption, vm.optionsListVm.open]\n    );\n\n    const handleSelectOption = React.useCallback(\n        (value: string) => {\n            setSelectedOption(value);\n            setListOpenState(false);\n        },\n        [setSelectedOption, setListOpenState]\n    );\n\n    const handleCreateOption = React.useCallback(\n        (value: string) => {\n            createOption(value);\n            setListOpenState(false);\n        },\n        [createOption, setListOpenState]\n    );\n\n    return (\n        <PopoverPrimitive open={vm.optionsListVm.open} onOpenChange={() => setListOpenState(true)}>\n            <Command label={String(props.label)} onKeyDown={handleKeyDown}>\n                <PopoverPrimitive.Trigger asChild>\n                    <span>\n                        <MultiAutoCompleteInput\n                            inputRef={props.inputRef}\n                            value={vm.inputVm.value}\n                            placeholder={vm.inputVm.placeholder}\n                            changeValue={searchOption}\n                            closeList={() => setListOpenState(false)}\n                            openList={() => setListOpenState(true)}\n                            variant={props.variant}\n                            size={props.size}\n                            invalid={props.invalid}\n                            removeSelectedOption={removeSelectedOption}\n                            selectedOptionRenderer={props.selectedOptionRenderer}\n                            selectedOptions={vm.selectedOptionsVm.options}\n                            disabled={props.disabled}\n                            startIcon={props.startIcon}\n                            endIcon={\n                                <MultiAutoCompleteInputIcons\n                                    inputSize={props.size}\n                                    inputVariant={props.variant}\n                                    displayResetAction={\n                                        !vm.selectedOptionsVm.empty && vm.inputVm.displayResetAction\n                                    }\n                                    disabled={props.disabled}\n                                    loading={props.loading}\n                                    onResetValue={resetSelectedOptions}\n                                    onOpenChange={() => setListOpenState(!vm.optionsListVm.open)}\n                                />\n                            }\n                        />\n                    </span>\n                </PopoverPrimitive.Trigger>\n                <PopoverPrimitive.Content\n                    style={{ width: \"var(--radix-popover-trigger-width)\" }}\n                    onOpenAutoFocus={e => e.preventDefault()}\n                >\n                    <MultiAutoCompleteList\n                        emptyMessage={vm.optionsListVm.emptyMessage}\n                        empty={vm.optionsListVm.empty}\n                        loading={props.loading}\n                        loadingMessage={vm.optionsListVm.loadingMessage}\n                        onOptionCreate={handleCreateOption}\n                        onOptionSelect={handleSelectOption}\n                        optionRenderer={props.optionRenderer}\n                        options={vm.optionsListVm.options}\n                        temporaryOption={vm.temporaryOptionVm.option}\n                    />\n                </PopoverPrimitive.Content>\n            </Command>\n        </PopoverPrimitive>\n    );\n};\n\nconst MultiAutoCompletePrimitive = makeDecoratable(\n    \"MultiAutoCompletePrimitive\",\n    DecoratableMultiAutoCompletePrimitive\n);\n\nexport { MultiAutoCompletePrimitive, type MultiAutoCompletePrimitiveProps };\n"],"names":["DecoratableMultiAutoCompletePrimitive","props","vm","setListOpenState","setSelectedOption","searchOption","removeSelectedOption","resetSelectedOptions","createOption","useMultiAutoComplete","handleKeyDown","React","event","handleSelectOption","value","handleCreateOption","PopoverPrimitive","Command","String","MultiAutoCompleteInput","MultiAutoCompleteInputIcons","e","MultiAutoCompleteList","MultiAutoCompletePrimitive","makeDecoratable"],"mappings":";;;;;;AAkHA,MAAMA,wCAAwC,CAACC;IAC3C,MAAM,EACFC,EAAE,EACFC,gBAAgB,EAChBC,iBAAiB,EACjBC,YAAY,EACZC,oBAAoB,EACpBC,oBAAoB,EACpBC,YAAY,EACf,GAAGC,qBAAqBR;IAEzB,MAAMS,gBAAgBC,MAAAA,WAAiB,CACnC,CAACC;QACG,IAAIX,MAAM,QAAQ,EACd;QAGJ,IAAI,CAACC,GAAG,aAAa,CAAC,IAAI,EACtBC,iBAAiB;QAGrB,IAAIS,AAA4B,aAA5BA,MAAM,GAAG,CAAC,WAAW,IACrBT,iBAAiB;IAEzB,GACA;QAACF,MAAM,QAAQ;QAAEE;QAAkBC;QAAmBF,GAAG,aAAa,CAAC,IAAI;KAAC;IAGhF,MAAMW,qBAAqBF,MAAAA,WAAiB,CACxC,CAACG;QACGV,kBAAkBU;QAClBX,iBAAiB;IACrB,GACA;QAACC;QAAmBD;KAAiB;IAGzC,MAAMY,qBAAqBJ,MAAAA,WAAiB,CACxC,CAACG;QACGN,aAAaM;QACbX,iBAAiB;IACrB,GACA;QAACK;QAAcL;KAAiB;IAGpC,OAAO,WAAP,GACI,oBAACa,kBAAgBA;QAAC,MAAMd,GAAG,aAAa,CAAC,IAAI;QAAE,cAAc,IAAMC,iBAAiB;qBAChF,oBAACc,SAAOA;QAAC,OAAOC,OAAOjB,MAAM,KAAK;QAAG,WAAWS;qBAC5C,oBAACM,iBAAiB,OAAO;QAAC;qBACtB,oBAAC,4BACG,oBAACG,wBAAsBA;QACnB,UAAUlB,MAAM,QAAQ;QACxB,OAAOC,GAAG,OAAO,CAAC,KAAK;QACvB,aAAaA,GAAG,OAAO,CAAC,WAAW;QACnC,aAAaG;QACb,WAAW,IAAMF,iBAAiB;QAClC,UAAU,IAAMA,iBAAiB;QACjC,SAASF,MAAM,OAAO;QACtB,MAAMA,MAAM,IAAI;QAChB,SAASA,MAAM,OAAO;QACtB,sBAAsBK;QACtB,wBAAwBL,MAAM,sBAAsB;QACpD,iBAAiBC,GAAG,iBAAiB,CAAC,OAAO;QAC7C,UAAUD,MAAM,QAAQ;QACxB,WAAWA,MAAM,SAAS;QAC1B,uBACI,oBAACmB,6BAA2BA;YACxB,WAAWnB,MAAM,IAAI;YACrB,cAAcA,MAAM,OAAO;YAC3B,oBACI,CAACC,GAAG,iBAAiB,CAAC,KAAK,IAAIA,GAAG,OAAO,CAAC,kBAAkB;YAEhE,UAAUD,MAAM,QAAQ;YACxB,SAASA,MAAM,OAAO;YACtB,cAAcM;YACd,cAAc,IAAMJ,iBAAiB,CAACD,GAAG,aAAa,CAAC,IAAI;;wBAM/E,oBAACc,iBAAiB,OAAO;QACrB,OAAO;YAAE,OAAO;QAAqC;QACrD,iBAAiBK,CAAAA,IAAKA,EAAE,cAAc;qBAEtC,oBAACC,uBAAqBA;QAClB,cAAcpB,GAAG,aAAa,CAAC,YAAY;QAC3C,OAAOA,GAAG,aAAa,CAAC,KAAK;QAC7B,SAASD,MAAM,OAAO;QACtB,gBAAgBC,GAAG,aAAa,CAAC,cAAc;QAC/C,gBAAgBa;QAChB,gBAAgBF;QAChB,gBAAgBZ,MAAM,cAAc;QACpC,SAASC,GAAG,aAAa,CAAC,OAAO;QACjC,iBAAiBA,GAAG,iBAAiB,CAAC,MAAM;;AAMpE;AAEA,MAAMqB,6BAA6BC,gBAC/B,8BACAxB"}
+{"version":3,"file":"MultiAutoComplete/primitives/MultiAutoCompletePrimitive.js","sources":["../../../src/MultiAutoComplete/primitives/MultiAutoCompletePrimitive.tsx"],"sourcesContent":["import type { KeyboardEvent } from \"react\";\nimport React from \"react\";\nimport { Command } from \"~/Command/index.js\";\nimport { PopoverPrimitive } from \"~/Popover/index.js\";\nimport type { InputPrimitiveProps } from \"~/Input/index.js\";\nimport { makeDecoratable } from \"~/utils.js\";\nimport { useMultiAutoComplete } from \"./useMultiAutoComplete.js\";\nimport {\n    MultiAutoCompleteInput,\n    MultiAutoCompleteInputIcons,\n    MultiAutoCompleteList\n} from \"./components/index.js\";\nimport type { MultiAutoCompleteOption } from \"../domains/index.js\";\nimport type { Icon } from \"~/Icon/index.js\";\n\ninterface MultiAutoCompletePrimitiveProps {\n    /**\n     * Allows free input of values not present in the options.\n     */\n    allowFreeInput?: boolean;\n    /**\n     * Indicates if the reset action should be displayed.\n     */\n    displayResetAction?: boolean;\n    /**\n     * Indicates if the field is disabled.\n     */\n    disabled?: boolean;\n    /**\n     * Message to display when there are no options.\n     */\n    emptyMessage?: React.ReactNode;\n    /**\n     * Indicates if the input field is invalid.\n     * Refer to `InputPrimitiveProps[\"invalid\"]` for possible values.\n     */\n    invalid?: InputPrimitiveProps[\"invalid\"];\n    /**\n     * Message to display when there are no options loaded or selected.\n     * Use it to invite the user to interact with the autocomplete by typing a value.\n     */\n    initialMessage?: React.ReactNode;\n    /**\n     * Reference to the input element.\n     */\n    inputRef?: React.Ref<HTMLInputElement>;\n    /**\n     * Accessible label for the command menu. Not shown visibly.\n     */\n    label?: React.ReactNode;\n    /**\n     * Indicates if the autocomplete is loading options.\n     */\n    loading?: boolean;\n    /**\n     * Message to display while loading options.\n     */\n    loadingMessage?: React.ReactNode;\n    /**\n     * Callback triggered when the open state changes.\n     */\n    onOpenChange?: (open: boolean) => void;\n    /**\n     * Callback triggered when a value has been searched by the user.\n     */\n    onValueSearch?: (value: string) => void;\n    /**\n     * Callback triggered when the values change.\n     */\n    onValuesChange: (values: string[]) => void;\n    /**\n     * Callback triggered to reset the values.\n     */\n    onValuesReset?: () => void;\n    /**\n     * List of options for the autocomplete.\n     */\n    options?: MultiAutoCompleteOption[];\n    /**\n     * Custom renderer for the options.\n     */\n    optionRenderer?: (item: any, index: number) => React.ReactNode;\n    /**\n     * Placeholder text for the input field.\n     */\n    placeholder?: string;\n    /**\n     * Size of the input field.\n     * Refer to `InputPrimitiveProps[\"size\"]` for possible values.\n     */\n    size?: InputPrimitiveProps[\"size\"];\n    /**\n     * Custom renderer for the selected options.\n     */\n    selectedOptionRenderer?: (item: any, index: number) => React.ReactNode;\n    /**\n     * Filter the options by the typed text on the client. Defaults to `true`.\n     * Set to `false` when `onValueSearch` already returns the matching options,\n     * so options matched on data other than their label are not dropped.\n     */\n    shouldFilter?: boolean;\n    /**\n     * Icon to be displayed at the start of the input field.\n     */\n    startIcon?: React.ReactElement<typeof Icon> | React.ReactElement;\n    /**\n     * Ensures that each value is unique.\n     */\n    uniqueValues?: boolean;\n    /**\n     * Variant of the input field.\n     * Refer to `InputPrimitiveProps[\"variant\"]` for possible values.\n     */\n    variant?: InputPrimitiveProps[\"variant\"];\n    /**\n     * Optional selected items.\n     */\n    values?: string[];\n}\n\nconst DecoratableMultiAutoCompletePrimitive = (props: MultiAutoCompletePrimitiveProps) => {\n    const {\n        vm,\n        setListOpenState,\n        setSelectedOption,\n        searchOption,\n        removeSelectedOption,\n        resetSelectedOptions,\n        createOption\n    } = useMultiAutoComplete(props);\n\n    const handleKeyDown = React.useCallback(\n        (event: KeyboardEvent<HTMLDivElement>) => {\n            if (props.disabled) {\n                return;\n            }\n\n            if (!vm.optionsListVm.open) {\n                setListOpenState(true);\n            }\n\n            if (event.key.toLowerCase() === \"escape\") {\n                setListOpenState(false);\n            }\n        },\n        [props.disabled, setListOpenState, setSelectedOption, vm.optionsListVm.open]\n    );\n\n    const handleSelectOption = React.useCallback(\n        (value: string) => {\n            setSelectedOption(value);\n            setListOpenState(false);\n        },\n        [setSelectedOption, setListOpenState]\n    );\n\n    const handleCreateOption = React.useCallback(\n        (value: string) => {\n            createOption(value);\n            setListOpenState(false);\n        },\n        [createOption, setListOpenState]\n    );\n\n    return (\n        <PopoverPrimitive open={vm.optionsListVm.open} onOpenChange={() => setListOpenState(true)}>\n            <Command\n                label={String(props.label)}\n                shouldFilter={props.shouldFilter}\n                onKeyDown={handleKeyDown}\n            >\n                <PopoverPrimitive.Trigger asChild>\n                    <span>\n                        <MultiAutoCompleteInput\n                            inputRef={props.inputRef}\n                            value={vm.inputVm.value}\n                            placeholder={vm.inputVm.placeholder}\n                            changeValue={searchOption}\n                            closeList={() => setListOpenState(false)}\n                            openList={() => setListOpenState(true)}\n                            variant={props.variant}\n                            size={props.size}\n                            invalid={props.invalid}\n                            removeSelectedOption={removeSelectedOption}\n                            selectedOptionRenderer={props.selectedOptionRenderer}\n                            selectedOptions={vm.selectedOptionsVm.options}\n                            disabled={props.disabled}\n                            startIcon={props.startIcon}\n                            endIcon={\n                                <MultiAutoCompleteInputIcons\n                                    inputSize={props.size}\n                                    inputVariant={props.variant}\n                                    displayResetAction={\n                                        !vm.selectedOptionsVm.empty && vm.inputVm.displayResetAction\n                                    }\n                                    disabled={props.disabled}\n                                    loading={props.loading}\n                                    onResetValue={resetSelectedOptions}\n                                    onOpenChange={() => setListOpenState(!vm.optionsListVm.open)}\n                                />\n                            }\n                        />\n                    </span>\n                </PopoverPrimitive.Trigger>\n                <PopoverPrimitive.Content\n                    style={{ width: \"var(--radix-popover-trigger-width)\" }}\n                    onOpenAutoFocus={e => e.preventDefault()}\n                >\n                    <MultiAutoCompleteList\n                        emptyMessage={vm.optionsListVm.emptyMessage}\n                        empty={vm.optionsListVm.empty}\n                        loading={props.loading}\n                        loadingMessage={vm.optionsListVm.loadingMessage}\n                        onOptionCreate={handleCreateOption}\n                        onOptionSelect={handleSelectOption}\n                        optionRenderer={props.optionRenderer}\n                        options={vm.optionsListVm.options}\n                        temporaryOption={vm.temporaryOptionVm.option}\n                    />\n                </PopoverPrimitive.Content>\n            </Command>\n        </PopoverPrimitive>\n    );\n};\n\nconst MultiAutoCompletePrimitive = makeDecoratable(\n    \"MultiAutoCompletePrimitive\",\n    DecoratableMultiAutoCompletePrimitive\n);\n\nexport { MultiAutoCompletePrimitive, type MultiAutoCompletePrimitiveProps };\n"],"names":["DecoratableMultiAutoCompletePrimitive","props","vm","setListOpenState","setSelectedOption","searchOption","removeSelectedOption","resetSelectedOptions","createOption","useMultiAutoComplete","handleKeyDown","React","event","handleSelectOption","value","handleCreateOption","PopoverPrimitive","Command","String","MultiAutoCompleteInput","MultiAutoCompleteInputIcons","e","MultiAutoCompleteList","MultiAutoCompletePrimitive","makeDecoratable"],"mappings":";;;;;;AAwHA,MAAMA,wCAAwC,CAACC;IAC3C,MAAM,EACFC,EAAE,EACFC,gBAAgB,EAChBC,iBAAiB,EACjBC,YAAY,EACZC,oBAAoB,EACpBC,oBAAoB,EACpBC,YAAY,EACf,GAAGC,qBAAqBR;IAEzB,MAAMS,gBAAgBC,MAAAA,WAAiB,CACnC,CAACC;QACG,IAAIX,MAAM,QAAQ,EACd;QAGJ,IAAI,CAACC,GAAG,aAAa,CAAC,IAAI,EACtBC,iBAAiB;QAGrB,IAAIS,AAA4B,aAA5BA,MAAM,GAAG,CAAC,WAAW,IACrBT,iBAAiB;IAEzB,GACA;QAACF,MAAM,QAAQ;QAAEE;QAAkBC;QAAmBF,GAAG,aAAa,CAAC,IAAI;KAAC;IAGhF,MAAMW,qBAAqBF,MAAAA,WAAiB,CACxC,CAACG;QACGV,kBAAkBU;QAClBX,iBAAiB;IACrB,GACA;QAACC;QAAmBD;KAAiB;IAGzC,MAAMY,qBAAqBJ,MAAAA,WAAiB,CACxC,CAACG;QACGN,aAAaM;QACbX,iBAAiB;IACrB,GACA;QAACK;QAAcL;KAAiB;IAGpC,OAAO,WAAP,GACI,oBAACa,kBAAgBA;QAAC,MAAMd,GAAG,aAAa,CAAC,IAAI;QAAE,cAAc,IAAMC,iBAAiB;qBAChF,oBAACc,SAAOA;QACJ,OAAOC,OAAOjB,MAAM,KAAK;QACzB,cAAcA,MAAM,YAAY;QAChC,WAAWS;qBAEX,oBAACM,iBAAiB,OAAO;QAAC;qBACtB,oBAAC,4BACG,oBAACG,wBAAsBA;QACnB,UAAUlB,MAAM,QAAQ;QACxB,OAAOC,GAAG,OAAO,CAAC,KAAK;QACvB,aAAaA,GAAG,OAAO,CAAC,WAAW;QACnC,aAAaG;QACb,WAAW,IAAMF,iBAAiB;QAClC,UAAU,IAAMA,iBAAiB;QACjC,SAASF,MAAM,OAAO;QACtB,MAAMA,MAAM,IAAI;QAChB,SAASA,MAAM,OAAO;QACtB,sBAAsBK;QACtB,wBAAwBL,MAAM,sBAAsB;QACpD,iBAAiBC,GAAG,iBAAiB,CAAC,OAAO;QAC7C,UAAUD,MAAM,QAAQ;QACxB,WAAWA,MAAM,SAAS;QAC1B,uBACI,oBAACmB,6BAA2BA;YACxB,WAAWnB,MAAM,IAAI;YACrB,cAAcA,MAAM,OAAO;YAC3B,oBACI,CAACC,GAAG,iBAAiB,CAAC,KAAK,IAAIA,GAAG,OAAO,CAAC,kBAAkB;YAEhE,UAAUD,MAAM,QAAQ;YACxB,SAASA,MAAM,OAAO;YACtB,cAAcM;YACd,cAAc,IAAMJ,iBAAiB,CAACD,GAAG,aAAa,CAAC,IAAI;;wBAM/E,oBAACc,iBAAiB,OAAO;QACrB,OAAO;YAAE,OAAO;QAAqC;QACrD,iBAAiBK,CAAAA,IAAKA,EAAE,cAAc;qBAEtC,oBAACC,uBAAqBA;QAClB,cAAcpB,GAAG,aAAa,CAAC,YAAY;QAC3C,OAAOA,GAAG,aAAa,CAAC,KAAK;QAC7B,SAASD,MAAM,OAAO;QACtB,gBAAgBC,GAAG,aAAa,CAAC,cAAc;QAC/C,gBAAgBa;QAChB,gBAAgBF;QAChB,gBAAgBZ,MAAM,cAAc;QACpC,SAASC,GAAG,aAAa,CAAC,OAAO;QACjC,iBAAiBA,GAAG,iBAAiB,CAAC,MAAM;;AAMpE;AAEA,MAAMqB,6BAA6BC,gBAC/B,8BACAxB"}

package/MultiAutoComplete/primitives/MultiAutoCompletePrimitive.stories.d.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import { MultiAutoCompletePrimitive } from "./MultiAutoCompletePrimitive.js";
 declare const meta: Meta<typeof MultiAutoCompletePrimitive>;
 export default meta;