@webiny/admin-ui 6.4.0-beta.3 → 6.4.0-beta.4

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.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/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.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;

package/MultiAutoComplete/primitives/MultiAutoCompletePrimitive.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiAutoComplete/primitives/MultiAutoCompletePrimitive.stories.js","sources":["../../../src/MultiAutoComplete/primitives/MultiAutoCompletePrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { ReactComponent as SearchIcon } from \"@webiny/icons/search.svg\";\nimport { MultiAutoCompletePrimitive } from \"./MultiAutoCompletePrimitive.js\";\nimport { Button } from \"~/Button/index.js\";\nimport { Icon } from \"~/Icon/index.js\";\nimport { Tag } from \"~/Tag/index.js\";\n\nconst meta: Meta<typeof MultiAutoCompletePrimitive> = {\n    title: \"Components/Form Primitives/Multi Autocomplete\",\n    component: MultiAutoCompletePrimitive,\n    parameters: {\n        layout: \"padded\"\n    },\n    argTypes: {\n        onValuesChange: { action: \"onValuesChange\" },\n        onOpenChange: { action: \"onOpenChange\" },\n        disabled: {\n            control: {\n                type: \"boolean\"\n            }\n        }\n    },\n    render: args => {\n        const [values, setValues] = useState(args.values);\n        return (\n            <div className={\"w-full\"}>\n                <MultiAutoCompletePrimitive {...args} values={values} onValuesChange={setValues} />\n                <div className={\"mt-4 text-center\"}>\n                    Current selected values: {values?.join(\",\")}\n                </div>\n            </div>\n        );\n    }\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof MultiAutoCompletePrimitive>;\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 MediumSize: Story = {\n    args: {\n        ...Default.args,\n        size: \"md\"\n    }\n};\n\nexport const LargeSize: Story = {\n    args: {\n        ...Default.args,\n        size: \"lg\"\n    }\n};\n\nexport const ExtraLargeSize: Story = {\n    args: {\n        ...Default.args,\n        size: \"xl\"\n    }\n};\n\nexport const WithStartIcon: Story = {\n    args: {\n        ...Default.args,\n        startIcon: <Icon label={\"Search\"} icon={<SearchIcon />} />\n    }\n};\n\nexport const WithLoading: Story = {\n    args: {\n        ...Default.args,\n        loading: true\n    }\n};\n\nexport const WithoutResetAction: Story = {\n    args: {\n        ...Default.args,\n        displayResetAction: false\n    }\n};\n\nexport const PrimaryVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"primary\"\n    }\n};\n\nexport const PrimaryVariantDisabled: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const PrimaryVariantInvalid: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const SecondaryVariant: Story = {\n    args: {\n        variant: \"secondary\",\n        placeholder: \"Custom placeholder\"\n    }\n};\n\nexport const SecondaryVariantDisabled: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const SecondaryVariantInvalid: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const GhostVariant: Story = {\n    args: {\n        variant: \"ghost\",\n        placeholder: \"Custom placeholder\"\n    }\n};\n\nexport const GhostVariantDisabled: Story = {\n    args: {\n        ...GhostVariant.args,\n        disabled: true\n    }\n};\n\nexport const GhostVariantInvalid: Story = {\n    args: {\n        ...GhostVariant.args,\n        invalid: true\n    }\n};\n\nexport const GhostNegativeVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"ghost-negative\",\n        placeholder: \"Custom placeholder\"\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark text-neutral-light p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const GhostNegativeVariantDisabled: Story = {\n    args: {\n        ...GhostNegativeVariant.args,\n        disabled: true\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark text-neutral-light p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const GhostNegativeVariantInvalid: Story = {\n    args: {\n        ...GhostNegativeVariant.args,\n        invalid: true\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark text-neutral-light p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const WithPredefinedValue: Story = {\n    args: {\n        ...Default.args,\n        options: [\n            { label: \"Eastern Standard Time (EST)\", value: \"est\" },\n            { label: \"Central Standard Time (CST)\", value: \"cst\" },\n            { label: \"Pacific Standard Time (PST)\", value: \"pst\" },\n            { label: \"Greenwich Mean Time (GMT)\", value: \"gmt\" },\n            { label: \"Central European Time (CET)\", value: \"cet\" },\n            { label: \"Central Africa Time (CAT)\", value: \"cat\" },\n            { label: \"India Standard Time (IST)\", value: \"ist\" },\n            { label: \"China Standard Time (CST)\", value: \"cst_china\" },\n            { label: \"Japan Standard Time (JST)\", value: \"jst\" },\n            { label: \"Australian Western Standard Time (AWST)\", value: \"awst\" },\n            { label: \"New Zealand Standard Time (NZST)\", value: \"nzst\" },\n            { label: \"Fiji Time (FJT)\", value: \"fjt\" },\n            { label: \"Argentina Time (ART)\", value: \"art\" },\n            { label: \"Bolivia Time (BOT)\", value: \"bot\" },\n            { label: \"Brasilia Time (BRT)\", value: \"brt\" }\n        ],\n        values: [\"est\", \"ist\", \"brt\"]\n    }\n};\n\nexport const WithCustomPlaceholder: Story = {\n    args: {\n        ...Default.args,\n        placeholder: \"Custom placeholder\"\n    }\n};\n\nexport const WithCustomEmptyMessage: Story = {\n    args: {\n        ...Default.args,\n        emptyMessage: \"Custom empty message\"\n    }\n};\n\nexport const WithCustomInitialMessage: Story = {\n    args: {\n        ...Default.args,\n        initialMessage: \"Custom initial message.\",\n        options: []\n    }\n};\n\nexport const WithAllowFreeInput: Story = {\n    args: {\n        ...Default.args,\n        allowFreeInput: true\n    }\n};\n\nexport const WithUniqueValues: Story = {\n    args: {\n        ...Default.args,\n        uniqueValues: true,\n        options: [\n            { label: \"Eastern Standard Time (EST)\", value: \"est\" },\n            { label: \"Central Standard Time (CST)\", value: \"cst\" },\n            { label: \"Pacific Standard Time (PST)\", value: \"pst\" }\n        ]\n    }\n};\n\nexport const WithFormattedOptions: Story = {\n    args: {\n        ...Default.args,\n        options: [\n            { label: \"Eastern Standard Time (EST)\", value: \"est\" },\n            { label: \"Central Standard Time (CST)\", value: \"cst\" },\n            { label: \"Pacific Standard Time (PST)\", value: \"pst\" },\n            { label: \"Greenwich Mean Time (GMT)\", value: \"gmt\" },\n            { label: \"Central European Time (CET)\", value: \"cet\" },\n            { label: \"Central Africa Time (CAT)\", value: \"cat\" },\n            { label: \"India Standard Time (IST)\", value: \"ist\" },\n            { label: \"China Standard Time (CST)\", value: \"cst_china\" },\n            { label: \"Japan Standard Time (JST)\", value: \"jst\" },\n            { label: \"Australian Western Standard Time (AWST)\", value: \"awst\" },\n            { label: \"New Zealand Standard Time (NZST)\", value: \"nzst\" },\n            { label: \"Fiji Time (FJT)\", value: \"fjt\" },\n            { label: \"Argentina Time (ART)\", value: \"art\" },\n            { label: \"Bolivia Time (BOT)\", value: \"bot\" },\n            { label: \"Brasilia Time (BRT)\", value: \"brt\" }\n        ]\n    }\n};\n\nexport const WithCustomOptionRenderer: Story = {\n    args: {\n        ...Default.args,\n        options: [\n            {\n                label: \"Eastern Standard Time (EST)\",\n                value: \"est\",\n                item: {\n                    name: \"Eastern Standard Time (EST)\",\n                    time_difference: \"-5:00\",\n                    flag: \"🇺🇸\",\n                    value: \"est\"\n                }\n            },\n            {\n                label: \"Central Standard Time (CST)\",\n                value: \"cst\",\n                item: {\n                    name: \"Central Standard Time (CST)\",\n                    time_difference: \"-6:00\",\n                    flag: \"🇺🇸\",\n                    value: \"cst\"\n                }\n            },\n            {\n                label: \"Pacific Standard Time (PST)\",\n                value: \"pst\",\n                item: {\n                    name: \"Pacific Standard Time (PST)\",\n                    time_difference: \"-8:00\",\n                    flag: \"🇺🇸\",\n                    value: \"pst\"\n                }\n            },\n            {\n                label: \"Greenwich Mean Time (GMT)\",\n                value: \"gmt\",\n                item: {\n                    name: \"Greenwich Mean Time (GMT)\",\n                    time_difference: \"±0:00\",\n                    flag: \"🇬🇧\",\n                    value: \"gmt\"\n                }\n            },\n            {\n                label: \"Central European Time (CET)\",\n                value: \"cet\",\n                item: {\n                    name: \"Central European Time (CET)\",\n                    time_difference: \"+1:00\",\n                    flag: \"🇪🇺\",\n                    value: \"cet\"\n                }\n            },\n            {\n                label: \"Central Africa Time (CAT)\",\n                value: \"cat\",\n                item: {\n                    name: \"Central Africa Time (CAT)\",\n                    time_difference: \"+2:00\",\n                    flag: \"🇿🇦\",\n                    value: \"cat\"\n                }\n            },\n            {\n                label: \"India Standard Time (IST)\",\n                value: \"ist\",\n                item: {\n                    name: \"India Standard Time (IST)\",\n                    time_difference: \"+5:30\",\n                    flag: \"🇮🇳\",\n                    value: \"ist\"\n                }\n            },\n            {\n                label: \"China Standard Time (CST)\",\n                value: \"cst_china\",\n                item: {\n                    name: \"China Standard Time (CST)\",\n                    time_difference: \"+8:00\",\n                    flag: \"🇨🇳\",\n                    value: \"cst_china\"\n                }\n            },\n            {\n                label: \"Japan Standard Time (JST)\",\n                value: \"jst\",\n                item: {\n                    name: \"Japan Standard Time (JST)\",\n                    time_difference: \"+9:00\",\n                    flag: \"🇯🇵\",\n                    value: \"jst\"\n                }\n            },\n            {\n                label: \"Australian Western Standard Time (AWST)\",\n                value: \"awst\",\n                item: {\n                    name: \"Australian Western Standard Time (AWST)\",\n                    time_difference: \"+8:00\",\n                    flag: \"🇦🇺\",\n                    value: \"awst\"\n                }\n            },\n            {\n                label: \"New Zealand Standard Time (NZST)\",\n                value: \"nzst\",\n                item: {\n                    name: \"New Zealand Standard Time (NZST)\",\n                    time_difference: \"+12:00\",\n                    flag: \"🇳🇿\",\n                    value: \"nzst\"\n                }\n            },\n            {\n                label: \"Fiji Time (FJT)\",\n                value: \"fjt\",\n                item: {\n                    name: \"Fiji Time (FJT)\",\n                    time_difference: \"+12:00\",\n                    flag: \"🇫🇯\",\n                    value: \"fjt\"\n                }\n            },\n            {\n                label: \"Argentina Time (ART)\",\n                value: \"art\",\n                item: {\n                    name: \"Argentina Time (ART)\",\n                    time_difference: \"-3:00\",\n                    flag: \"🇦🇷\",\n                    value: \"art\"\n                }\n            },\n            {\n                label: \"Bolivia Time (BOT)\",\n                value: \"bot\",\n                item: {\n                    name: \"Bolivia Time (BOT)\",\n                    time_difference: \"-4:00\",\n                    flag: \"🇧🇴\",\n                    value: \"bot\"\n                }\n            },\n            {\n                label: \"Brasilia Time (BRT)\",\n                value: \"brt\",\n                item: {\n                    name: \"Brasilia Time (BRT)\",\n                    time_difference: \"-3:00\",\n                    flag: \"🇧🇷\",\n                    value: \"brt\"\n                }\n            }\n        ],\n        optionRenderer: item => {\n            return (\n                <div className={\"w-full flex justify-between align-middle\"}>\n                    <div>\n                        <span className={\"mr-sm\"}>{item.flag}</span>\n                        {item.name}\n                    </div>\n                    <div className={\"text-sm\"}>{item.time_difference}</div>\n                </div>\n            );\n        }\n    }\n};\n\nexport const WithCustomSelectedOptionRenderer: Story = {\n    args: {\n        ...WithCustomOptionRenderer.args\n    },\n    render: args => {\n        const [values, setValues] = useState(args.values || []);\n        const selectedOptionRenderer = (item: any) => {\n            return (\n                <Tag\n                    variant={\"neutral-base\"}\n                    content={\n                        <>\n                            {item.flag} {item.name}\n                        </>\n                    }\n                    onDismiss={() => setValues(values.filter(value => value !== item.value))}\n                />\n            );\n        };\n        return (\n            <div className={\"w-full\"}>\n                <MultiAutoCompletePrimitive\n                    {...args}\n                    values={values}\n                    onValuesChange={setValues}\n                    selectedOptionRenderer={selectedOptionRenderer}\n                />\n                <div className={\"mt-4 text-center\"}>\n                    Current selected values: {values?.join(\",\")}\n                </div>\n            </div>\n        );\n    }\n};\n\nexport const WithSeparators: Story = {\n    args: {\n        ...Default.args,\n        options: [\n            { label: \"Eastern Standard Time (EST)\", value: \"est\" },\n            { label: \"Central Standard Time (CST)\", value: \"cst\" },\n            { label: \"Pacific Standard Time (PST)\", value: \"pst\", separator: true },\n            { label: \"Greenwich Mean Time (GMT)\", value: \"gmt\" },\n            { label: \"Central European Time (CET)\", value: \"cet\" },\n            { label: \"Central Africa Time (CAT)\", value: \"cat\", separator: true },\n            { label: \"India Standard Time (IST)\", value: \"ist\" },\n            { label: \"China Standard Time (CST)\", value: \"cst_china\" },\n            { label: \"Japan Standard Time (JST)\", value: \"jst\", separator: true },\n            { label: \"Australian Western Standard Time (AWST)\", value: \"awst\" },\n            { label: \"New Zealand Standard Time (NZST)\", value: \"nzst\" },\n            { label: \"Fiji Time (FJT)\", value: \"fjt\", separator: true },\n            { label: \"Argentina Time (ART)\", value: \"art\" },\n            { label: \"Bolivia Time (BOT)\", value: \"bot\" },\n            { label: \"Brasilia Time (BRT)\", value: \"brt\" }\n        ]\n    }\n};\n\nexport const WithDisabledOptions: Story = {\n    args: {\n        options: [\n            { label: \"Eastern Standard Time (EST)\", value: \"est\", disabled: true },\n            { label: \"Central Standard Time (CST)\", value: \"cst\", disabled: true },\n            { label: \"Pacific Standard Time (PST)\", value: \"pst\", disabled: true },\n            { label: \"Greenwich Mean Time (GMT)\", value: \"gmt\" },\n            { label: \"Central European Time (CET)\", value: \"cet\" },\n            { label: \"Central Africa Time (CAT)\", value: \"cat\" },\n            { label: \"India Standard Time (IST)\", value: \"ist\" },\n            { label: \"China Standard Time (CST)\", value: \"cst_china\" },\n            { label: \"Japan Standard Time (JST)\", value: \"jst\" },\n            { label: \"Australian Western Standard Time (AWST)\", value: \"awst\" },\n            { label: \"New Zealand Standard Time (NZST)\", value: \"nzst\" },\n            { label: \"Fiji Time (FJT)\", value: \"fjt\" },\n            { label: \"Argentina Time (ART)\", value: \"art\" },\n            { label: \"Bolivia Time (BOT)\", value: \"bot\" },\n            { label: \"Brasilia Time (BRT)\", value: \"brt\" }\n        ]\n    }\n};\n\nexport const WithExternalValueControl: Story = {\n    args: {\n        ...Default.args,\n        options: [\n            { label: \"Eastern Standard Time (EST)\", value: \"est\" },\n            { label: \"Central Standard Time (CST)\", value: \"cst\" },\n            { label: \"Pacific Standard Time (PST)\", value: \"pst\" },\n            { label: \"Greenwich Mean Time (GMT)\", value: \"gmt\" },\n            { label: \"Central European Time (CET)\", value: \"cet\" },\n            { label: \"Central Africa Time (CAT)\", value: \"cat\" },\n            { label: \"India Standard Time (IST)\", value: \"ist\" },\n            { label: \"China Standard Time (CST)\", value: \"cst_china\" },\n            { label: \"Japan Standard Time (JST)\", value: \"jst\" },\n            { label: \"Australian Western Standard Time (AWST)\", value: \"awst\" },\n            { label: \"New Zealand Standard Time (NZST)\", value: \"nzst\" },\n            { label: \"Fiji Time (FJT)\", value: \"fjt\" },\n            { label: \"Argentina Time (ART)\", value: \"art\" },\n            { label: \"Bolivia Time (BOT)\", value: \"bot\" },\n            { label: \"Brasilia Time (BRT)\", value: \"brt\" }\n        ]\n    },\n    render: args => {\n        const [values, setValues] = useState(args.values);\n        return (\n            <div className={\"w-full\"}>\n                <MultiAutoCompletePrimitive {...args} values={values} onValuesChange={setValues} />\n                <div className={\"mt-4 text-center\"}>\n                    <Button text={\"Reset\"} onClick={() => setValues(args.values)} />\n                </div>\n                <div className={\"mt-4 text-center\"}>\n                    Current selected values: {values?.join(\",\")}\n                </div>\n            </div>\n        );\n    }\n};\n"],"names":["meta","MultiAutoCompletePrimitive","args","values","setValues","useState","Default","MediumSize","LargeSize","ExtraLargeSize","WithStartIcon","Icon","SearchIcon","WithLoading","WithoutResetAction","PrimaryVariant","PrimaryVariantDisabled","PrimaryVariantInvalid","SecondaryVariant","SecondaryVariantDisabled","SecondaryVariantInvalid","GhostVariant","GhostVariantDisabled","GhostVariantInvalid","GhostNegativeVariant","Story","GhostNegativeVariantDisabled","GhostNegativeVariantInvalid","WithPredefinedValue","WithCustomPlaceholder","WithCustomEmptyMessage","WithCustomInitialMessage","WithAllowFreeInput","WithUniqueValues","WithFormattedOptions","WithCustomOptionRenderer","item","WithCustomSelectedOptionRenderer","selectedOptionRenderer","Tag","value","WithSeparators","WithDisabledOptions","WithExternalValueControl","Button"],"mappings":"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"}
+{"version":3,"file":"MultiAutoComplete/primitives/MultiAutoCompletePrimitive.stories.js","sources":["../../../src/MultiAutoComplete/primitives/MultiAutoCompletePrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { ReactComponent as SearchIcon } from \"@webiny/icons/search.svg\";\nimport { MultiAutoCompletePrimitive } from \"./MultiAutoCompletePrimitive.js\";\nimport { Button } from \"~/Button/index.js\";\nimport { Icon } from \"~/Icon/index.js\";\nimport { Tag } from \"~/Tag/index.js\";\n\nconst meta: Meta<typeof MultiAutoCompletePrimitive> = {\n    title: \"Components/Form Primitives/Multi Autocomplete\",\n    component: MultiAutoCompletePrimitive,\n    parameters: {\n        layout: \"padded\"\n    },\n    argTypes: {\n        onValuesChange: { action: \"onValuesChange\" },\n        onOpenChange: { action: \"onOpenChange\" },\n        disabled: {\n            control: {\n                type: \"boolean\"\n            }\n        }\n    },\n    render: args => {\n        const [values, setValues] = useState(args.values);\n        return (\n            <div className={\"w-full\"}>\n                <MultiAutoCompletePrimitive {...args} values={values} onValuesChange={setValues} />\n                <div className={\"mt-4 text-center\"}>\n                    Current selected values: {values?.join(\",\")}\n                </div>\n            </div>\n        );\n    }\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof MultiAutoCompletePrimitive>;\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 MediumSize: Story = {\n    args: {\n        ...Default.args,\n        size: \"md\"\n    }\n};\n\nexport const LargeSize: Story = {\n    args: {\n        ...Default.args,\n        size: \"lg\"\n    }\n};\n\nexport const ExtraLargeSize: Story = {\n    args: {\n        ...Default.args,\n        size: \"xl\"\n    }\n};\n\nexport const WithStartIcon: Story = {\n    args: {\n        ...Default.args,\n        startIcon: <Icon label={\"Search\"} icon={<SearchIcon />} />\n    }\n};\n\nexport const WithLoading: Story = {\n    args: {\n        ...Default.args,\n        loading: true\n    }\n};\n\nexport const WithoutResetAction: Story = {\n    args: {\n        ...Default.args,\n        displayResetAction: false\n    }\n};\n\nexport const PrimaryVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"primary\"\n    }\n};\n\nexport const PrimaryVariantDisabled: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const PrimaryVariantInvalid: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const SecondaryVariant: Story = {\n    args: {\n        variant: \"secondary\",\n        placeholder: \"Custom placeholder\"\n    }\n};\n\nexport const SecondaryVariantDisabled: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const SecondaryVariantInvalid: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const GhostVariant: Story = {\n    args: {\n        variant: \"ghost\",\n        placeholder: \"Custom placeholder\"\n    }\n};\n\nexport const GhostVariantDisabled: Story = {\n    args: {\n        ...GhostVariant.args,\n        disabled: true\n    }\n};\n\nexport const GhostVariantInvalid: Story = {\n    args: {\n        ...GhostVariant.args,\n        invalid: true\n    }\n};\n\nexport const GhostNegativeVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"ghost-negative\",\n        placeholder: \"Custom placeholder\"\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark text-neutral-light p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const GhostNegativeVariantDisabled: Story = {\n    args: {\n        ...GhostNegativeVariant.args,\n        disabled: true\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark text-neutral-light p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const GhostNegativeVariantInvalid: Story = {\n    args: {\n        ...GhostNegativeVariant.args,\n        invalid: true\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark text-neutral-light p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const WithPredefinedValue: Story = {\n    args: {\n        ...Default.args,\n        options: [\n            { label: \"Eastern Standard Time (EST)\", value: \"est\" },\n            { label: \"Central Standard Time (CST)\", value: \"cst\" },\n            { label: \"Pacific Standard Time (PST)\", value: \"pst\" },\n            { label: \"Greenwich Mean Time (GMT)\", value: \"gmt\" },\n            { label: \"Central European Time (CET)\", value: \"cet\" },\n            { label: \"Central Africa Time (CAT)\", value: \"cat\" },\n            { label: \"India Standard Time (IST)\", value: \"ist\" },\n            { label: \"China Standard Time (CST)\", value: \"cst_china\" },\n            { label: \"Japan Standard Time (JST)\", value: \"jst\" },\n            { label: \"Australian Western Standard Time (AWST)\", value: \"awst\" },\n            { label: \"New Zealand Standard Time (NZST)\", value: \"nzst\" },\n            { label: \"Fiji Time (FJT)\", value: \"fjt\" },\n            { label: \"Argentina Time (ART)\", value: \"art\" },\n            { label: \"Bolivia Time (BOT)\", value: \"bot\" },\n            { label: \"Brasilia Time (BRT)\", value: \"brt\" }\n        ],\n        values: [\"est\", \"ist\", \"brt\"]\n    }\n};\n\nexport const WithCustomPlaceholder: Story = {\n    args: {\n        ...Default.args,\n        placeholder: \"Custom placeholder\"\n    }\n};\n\nexport const WithCustomEmptyMessage: Story = {\n    args: {\n        ...Default.args,\n        emptyMessage: \"Custom empty message\"\n    }\n};\n\nexport const WithCustomInitialMessage: Story = {\n    args: {\n        ...Default.args,\n        initialMessage: \"Custom initial message.\",\n        options: []\n    }\n};\n\nexport const WithAllowFreeInput: Story = {\n    args: {\n        ...Default.args,\n        allowFreeInput: true\n    }\n};\n\nexport const WithUniqueValues: Story = {\n    args: {\n        ...Default.args,\n        uniqueValues: true,\n        options: [\n            { label: \"Eastern Standard Time (EST)\", value: \"est\" },\n            { label: \"Central Standard Time (CST)\", value: \"cst\" },\n            { label: \"Pacific Standard Time (PST)\", value: \"pst\" }\n        ]\n    }\n};\n\nexport const WithFormattedOptions: Story = {\n    args: {\n        ...Default.args,\n        options: [\n            { label: \"Eastern Standard Time (EST)\", value: \"est\" },\n            { label: \"Central Standard Time (CST)\", value: \"cst\" },\n            { label: \"Pacific Standard Time (PST)\", value: \"pst\" },\n            { label: \"Greenwich Mean Time (GMT)\", value: \"gmt\" },\n            { label: \"Central European Time (CET)\", value: \"cet\" },\n            { label: \"Central Africa Time (CAT)\", value: \"cat\" },\n            { label: \"India Standard Time (IST)\", value: \"ist\" },\n            { label: \"China Standard Time (CST)\", value: \"cst_china\" },\n            { label: \"Japan Standard Time (JST)\", value: \"jst\" },\n            { label: \"Australian Western Standard Time (AWST)\", value: \"awst\" },\n            { label: \"New Zealand Standard Time (NZST)\", value: \"nzst\" },\n            { label: \"Fiji Time (FJT)\", value: \"fjt\" },\n            { label: \"Argentina Time (ART)\", value: \"art\" },\n            { label: \"Bolivia Time (BOT)\", value: \"bot\" },\n            { label: \"Brasilia Time (BRT)\", value: \"brt\" }\n        ]\n    }\n};\n\nexport const WithCustomOptionRenderer: Story = {\n    args: {\n        ...Default.args,\n        options: [\n            {\n                label: \"Eastern Standard Time (EST)\",\n                value: \"est\",\n                item: {\n                    name: \"Eastern Standard Time (EST)\",\n                    time_difference: \"-5:00\",\n                    flag: \"🇺🇸\",\n                    value: \"est\"\n                }\n            },\n            {\n                label: \"Central Standard Time (CST)\",\n                value: \"cst\",\n                item: {\n                    name: \"Central Standard Time (CST)\",\n                    time_difference: \"-6:00\",\n                    flag: \"🇺🇸\",\n                    value: \"cst\"\n                }\n            },\n            {\n                label: \"Pacific Standard Time (PST)\",\n                value: \"pst\",\n                item: {\n                    name: \"Pacific Standard Time (PST)\",\n                    time_difference: \"-8:00\",\n                    flag: \"🇺🇸\",\n                    value: \"pst\"\n                }\n            },\n            {\n                label: \"Greenwich Mean Time (GMT)\",\n                value: \"gmt\",\n                item: {\n                    name: \"Greenwich Mean Time (GMT)\",\n                    time_difference: \"±0:00\",\n                    flag: \"🇬🇧\",\n                    value: \"gmt\"\n                }\n            },\n            {\n                label: \"Central European Time (CET)\",\n                value: \"cet\",\n                item: {\n                    name: \"Central European Time (CET)\",\n                    time_difference: \"+1:00\",\n                    flag: \"🇪🇺\",\n                    value: \"cet\"\n                }\n            },\n            {\n                label: \"Central Africa Time (CAT)\",\n                value: \"cat\",\n                item: {\n                    name: \"Central Africa Time (CAT)\",\n                    time_difference: \"+2:00\",\n                    flag: \"🇿🇦\",\n                    value: \"cat\"\n                }\n            },\n            {\n                label: \"India Standard Time (IST)\",\n                value: \"ist\",\n                item: {\n                    name: \"India Standard Time (IST)\",\n                    time_difference: \"+5:30\",\n                    flag: \"🇮🇳\",\n                    value: \"ist\"\n                }\n            },\n            {\n                label: \"China Standard Time (CST)\",\n                value: \"cst_china\",\n                item: {\n                    name: \"China Standard Time (CST)\",\n                    time_difference: \"+8:00\",\n                    flag: \"🇨🇳\",\n                    value: \"cst_china\"\n                }\n            },\n            {\n                label: \"Japan Standard Time (JST)\",\n                value: \"jst\",\n                item: {\n                    name: \"Japan Standard Time (JST)\",\n                    time_difference: \"+9:00\",\n                    flag: \"🇯🇵\",\n                    value: \"jst\"\n                }\n            },\n            {\n                label: \"Australian Western Standard Time (AWST)\",\n                value: \"awst\",\n                item: {\n                    name: \"Australian Western Standard Time (AWST)\",\n                    time_difference: \"+8:00\",\n                    flag: \"🇦🇺\",\n                    value: \"awst\"\n                }\n            },\n            {\n                label: \"New Zealand Standard Time (NZST)\",\n                value: \"nzst\",\n                item: {\n                    name: \"New Zealand Standard Time (NZST)\",\n                    time_difference: \"+12:00\",\n                    flag: \"🇳🇿\",\n                    value: \"nzst\"\n                }\n            },\n            {\n                label: \"Fiji Time (FJT)\",\n                value: \"fjt\",\n                item: {\n                    name: \"Fiji Time (FJT)\",\n                    time_difference: \"+12:00\",\n                    flag: \"🇫🇯\",\n                    value: \"fjt\"\n                }\n            },\n            {\n                label: \"Argentina Time (ART)\",\n                value: \"art\",\n                item: {\n                    name: \"Argentina Time (ART)\",\n                    time_difference: \"-3:00\",\n                    flag: \"🇦🇷\",\n                    value: \"art\"\n                }\n            },\n            {\n                label: \"Bolivia Time (BOT)\",\n                value: \"bot\",\n                item: {\n                    name: \"Bolivia Time (BOT)\",\n                    time_difference: \"-4:00\",\n                    flag: \"🇧🇴\",\n                    value: \"bot\"\n                }\n            },\n            {\n                label: \"Brasilia Time (BRT)\",\n                value: \"brt\",\n                item: {\n                    name: \"Brasilia Time (BRT)\",\n                    time_difference: \"-3:00\",\n                    flag: \"🇧🇷\",\n                    value: \"brt\"\n                }\n            }\n        ],\n        optionRenderer: item => {\n            return (\n                <div className={\"w-full flex justify-between align-middle\"}>\n                    <div>\n                        <span className={\"mr-sm\"}>{item.flag}</span>\n                        {item.name}\n                    </div>\n                    <div className={\"text-sm\"}>{item.time_difference}</div>\n                </div>\n            );\n        }\n    }\n};\n\nexport const WithCustomSelectedOptionRenderer: Story = {\n    args: {\n        ...WithCustomOptionRenderer.args\n    },\n    render: args => {\n        const [values, setValues] = useState(args.values || []);\n        const selectedOptionRenderer = (item: any) => {\n            return (\n                <Tag\n                    variant={\"neutral-base\"}\n                    content={\n                        <>\n                            {item.flag} {item.name}\n                        </>\n                    }\n                    onDismiss={() => setValues(values.filter(value => value !== item.value))}\n                />\n            );\n        };\n        return (\n            <div className={\"w-full\"}>\n                <MultiAutoCompletePrimitive\n                    {...args}\n                    values={values}\n                    onValuesChange={setValues}\n                    selectedOptionRenderer={selectedOptionRenderer}\n                />\n                <div className={\"mt-4 text-center\"}>\n                    Current selected values: {values?.join(\",\")}\n                </div>\n            </div>\n        );\n    }\n};\n\nexport const WithSeparators: Story = {\n    args: {\n        ...Default.args,\n        options: [\n            { label: \"Eastern Standard Time (EST)\", value: \"est\" },\n            { label: \"Central Standard Time (CST)\", value: \"cst\" },\n            { label: \"Pacific Standard Time (PST)\", value: \"pst\", separator: true },\n            { label: \"Greenwich Mean Time (GMT)\", value: \"gmt\" },\n            { label: \"Central European Time (CET)\", value: \"cet\" },\n            { label: \"Central Africa Time (CAT)\", value: \"cat\", separator: true },\n            { label: \"India Standard Time (IST)\", value: \"ist\" },\n            { label: \"China Standard Time (CST)\", value: \"cst_china\" },\n            { label: \"Japan Standard Time (JST)\", value: \"jst\", separator: true },\n            { label: \"Australian Western Standard Time (AWST)\", value: \"awst\" },\n            { label: \"New Zealand Standard Time (NZST)\", value: \"nzst\" },\n            { label: \"Fiji Time (FJT)\", value: \"fjt\", separator: true },\n            { label: \"Argentina Time (ART)\", value: \"art\" },\n            { label: \"Bolivia Time (BOT)\", value: \"bot\" },\n            { label: \"Brasilia Time (BRT)\", value: \"brt\" }\n        ]\n    }\n};\n\nexport const WithDisabledOptions: Story = {\n    args: {\n        options: [\n            { label: \"Eastern Standard Time (EST)\", value: \"est\", disabled: true },\n            { label: \"Central Standard Time (CST)\", value: \"cst\", disabled: true },\n            { label: \"Pacific Standard Time (PST)\", value: \"pst\", disabled: true },\n            { label: \"Greenwich Mean Time (GMT)\", value: \"gmt\" },\n            { label: \"Central European Time (CET)\", value: \"cet\" },\n            { label: \"Central Africa Time (CAT)\", value: \"cat\" },\n            { label: \"India Standard Time (IST)\", value: \"ist\" },\n            { label: \"China Standard Time (CST)\", value: \"cst_china\" },\n            { label: \"Japan Standard Time (JST)\", value: \"jst\" },\n            { label: \"Australian Western Standard Time (AWST)\", value: \"awst\" },\n            { label: \"New Zealand Standard Time (NZST)\", value: \"nzst\" },\n            { label: \"Fiji Time (FJT)\", value: \"fjt\" },\n            { label: \"Argentina Time (ART)\", value: \"art\" },\n            { label: \"Bolivia Time (BOT)\", value: \"bot\" },\n            { label: \"Brasilia Time (BRT)\", value: \"brt\" }\n        ]\n    }\n};\n\nexport const WithExternalValueControl: Story = {\n    args: {\n        ...Default.args,\n        options: [\n            { label: \"Eastern Standard Time (EST)\", value: \"est\" },\n            { label: \"Central Standard Time (CST)\", value: \"cst\" },\n            { label: \"Pacific Standard Time (PST)\", value: \"pst\" },\n            { label: \"Greenwich Mean Time (GMT)\", value: \"gmt\" },\n            { label: \"Central European Time (CET)\", value: \"cet\" },\n            { label: \"Central Africa Time (CAT)\", value: \"cat\" },\n            { label: \"India Standard Time (IST)\", value: \"ist\" },\n            { label: \"China Standard Time (CST)\", value: \"cst_china\" },\n            { label: \"Japan Standard Time (JST)\", value: \"jst\" },\n            { label: \"Australian Western Standard Time (AWST)\", value: \"awst\" },\n            { label: \"New Zealand Standard Time (NZST)\", value: \"nzst\" },\n            { label: \"Fiji Time (FJT)\", value: \"fjt\" },\n            { label: \"Argentina Time (ART)\", value: \"art\" },\n            { label: \"Bolivia Time (BOT)\", value: \"bot\" },\n            { label: \"Brasilia Time (BRT)\", value: \"brt\" }\n        ]\n    },\n    render: args => {\n        const [values, setValues] = useState(args.values);\n        return (\n            <div className={\"w-full\"}>\n                <MultiAutoCompletePrimitive {...args} values={values} onValuesChange={setValues} />\n                <div className={\"mt-4 text-center\"}>\n                    <Button text={\"Reset\"} onClick={() => setValues(args.values)} />\n                </div>\n                <div className={\"mt-4 text-center\"}>\n                    Current selected values: {values?.join(\",\")}\n                </div>\n            </div>\n        );\n    }\n};\n"],"names":["meta","MultiAutoCompletePrimitive","args","values","setValues","useState","Default","MediumSize","LargeSize","ExtraLargeSize","WithStartIcon","Icon","SearchIcon","WithLoading","WithoutResetAction","PrimaryVariant","PrimaryVariantDisabled","PrimaryVariantInvalid","SecondaryVariant","SecondaryVariantDisabled","SecondaryVariantInvalid","GhostVariant","GhostVariantDisabled","GhostVariantInvalid","GhostNegativeVariant","Story","GhostNegativeVariantDisabled","GhostNegativeVariantInvalid","WithPredefinedValue","WithCustomPlaceholder","WithCustomEmptyMessage","WithCustomInitialMessage","WithAllowFreeInput","WithUniqueValues","WithFormattedOptions","WithCustomOptionRenderer","item","WithCustomSelectedOptionRenderer","selectedOptionRenderer","Tag","value","WithSeparators","WithDisabledOptions","WithExternalValueControl","Button"],"mappings":"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"}

package/MultiFilePicker/MultiFilePicker.stories.d.ts

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

package/MultiFilePicker/MultiFilePicker.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiFilePicker/MultiFilePicker.stories.js","sources":["../../src/MultiFilePicker/MultiFilePicker.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { type FileItemDto, MultiFilePicker } from \"~/MultiFilePicker/index.js\";\n\nconst getRandomNumber = (min: number, max: number): number =>\n    Math.floor(Math.random() * (max - min + 1)) + min;\n\nconst createFileList = (size: number = 10): FileItemDto[] => {\n    return Array.from({ length: size }, (_, index) => {\n        const width = getRandomNumber(500, 2000); // Random width between 500 and 2000\n        const height = getRandomNumber(500, 2000); // Random height between 500 and 2000\n        const fileSize = getRandomNumber(500000, 5000000); // Random file size between 500KB and 5MB\n\n        return {\n            name: `file-${index + 1}.jpg`,\n            mimeType: \"image/jpeg\",\n            size: fileSize,\n            url: `https://picsum.photos/${width}/${height}`\n        };\n    });\n};\n\nconst meta: Meta<typeof MultiFilePicker> = {\n    title: \"Components/Form/Multi FilePicker\",\n    component: MultiFilePicker,\n    argTypes: {\n        onSelectItem: { action: \"onSelectItem\" },\n        onEditItem: { action: \"onEditItem\" },\n        onRemoveItem: { action: \"onRemoveItem\" },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [selectedFiles, setSelectedFiles] = useState<FileItemDto[]>([]);\n        return (\n            <MultiFilePicker\n                {...args}\n                values={selectedFiles}\n                onSelectItem={() => setSelectedFiles(createFileList())}\n                onReplaceItem={(_, index) =>\n                    setSelectedFiles(prevState => {\n                        if (!prevState) {\n                            return [];\n                        }\n\n                        return [\n                            ...prevState.slice(0, index),\n                            ...createFileList(1),\n                            ...prevState.slice(index + 1)\n                        ];\n                    })\n                }\n                onRemoveItem={item =>\n                    setSelectedFiles(prevState =>\n                        prevState?.filter(value => value.name !== item?.name)\n                    )\n                }\n                onEditItem={(item, i) => alert(`Editing ${item?.name} at position ${i}`)}\n            />\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof MultiFilePicker>;\n\nexport const Default: Story = {};\n\nexport const AreaType: Story = {\n    args: {\n        ...Default.args,\n        type: \"area\"\n    }\n};\n\nexport const AreaWithLabel: Story = {\n    args: {\n        ...AreaType.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const AreaWithLabelRequired: Story = {\n    args: {\n        ...AreaType.args,\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const AreaWithDescription: Story = {\n    args: {\n        ...AreaType.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const AreaWithNotes: Story = {\n    args: {\n        ...AreaType.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const AreaWithErrors: Story = {\n    args: {\n        ...AreaType.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const AreaDisabled: Story = {\n    args: {\n        ...AreaType.args,\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const AreaWithValidateFunction: Story = {\n    args: {\n        ...AreaType.args\n    },\n    render: args => {\n        const [validation, setValidation] = useState<any>({ isValid: true, message: undefined });\n\n        const validate = async () => {\n            setValidation({ isValid: false, message: \"Any custom error message.\" });\n        };\n\n        return <MultiFilePicker {...args} validate={validate} validation={validation} />;\n    }\n};\n\nexport const AreaFullExample: Story = {\n    args: {\n        ...AreaType.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 Compact: Story = {\n    args: {\n        ...Default.args,\n        type: \"compact\"\n    }\n};\n\nexport const CompactWithLabel: Story = {\n    args: {\n        ...Compact.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const CompactWithLabelRequired: Story = {\n    args: {\n        ...Compact.args,\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const CompactWithDescription: Story = {\n    args: {\n        ...Compact.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const CompactWithNotes: Story = {\n    args: {\n        ...Compact.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const CompactWithErrors: Story = {\n    args: {\n        ...Compact.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const CompactDisabled: Story = {\n    args: {\n        ...Compact.args,\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const CompactWithValidateFunction: Story = {\n    args: {\n        ...Compact.args\n    },\n    render: args => {\n        const [validation, setValidation] = useState<any>({ isValid: true, message: undefined });\n\n        const validate = async () => {\n            setValidation({ isValid: false, message: \"Any custom error message.\" });\n        };\n\n        return <MultiFilePicker {...args} validate={validate} validation={validation} />;\n    }\n};\n\nexport const CompactFullExample: Story = {\n    args: {\n        ...Compact.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 [selectedFiles, setSelectedFiles] = useState<FileItemDto[]>([]);\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        // Update value when args.values changes\n        useEffect(() => {\n            if (!args.values) {\n                setSelectedFiles([]);\n            } else if (Array.isArray(args.values)) {\n                // Convert any string values to FileItemDto format\n                const formattedValues = args.values.map(value => {\n                    if (typeof value === \"string\") {\n                        return {\n                            name: value.split(\"/\").pop() || \"file\",\n                            mimeType: \"image/jpeg\", // Default mime type\n                            size: 0,\n                            url: value\n                        };\n                    }\n                    return value as FileItemDto;\n                });\n                setSelectedFiles(formattedValues);\n            }\n        }, [args.values]);\n\n        const handleSelect = () => {\n            setSelectedFiles(createFileList(3));\n            setValidation({ isValid: true, message: \"\" });\n        };\n\n        const handleReplace = (_: any, index: number) => {\n            setSelectedFiles(prevState => {\n                if (!prevState) {\n                    return [];\n                }\n\n                return [\n                    ...prevState.slice(0, index),\n                    ...createFileList(1),\n                    ...prevState.slice(index + 1)\n                ];\n            });\n            setValidation({ isValid: true, message: \"\" });\n        };\n\n        const handleEdit = (file: any, index: number) => {\n            if (file) {\n                console.log(\"Editing file:\", file, \"at index:\", index);\n                alert(`Editing File: ${file.name} at position ${index}`);\n            }\n        };\n\n        const handleRemove = (file: any, index: number) => {\n            setSelectedFiles(prevState => prevState?.filter((_, i) => i !== index));\n\n            if (args.required && (!selectedFiles || selectedFiles.length <= 1)) {\n                setValidation({ isValid: false, message: \"Please select at least one file\" });\n            }\n        };\n\n        // Validate on required change or value change\n        useEffect(() => {\n            if (args.required && (!selectedFiles || selectedFiles.length === 0)) {\n                setValidation({ isValid: false, message: \"Please select at least one file\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        }, [args.required, selectedFiles]);\n\n        return (\n            <MultiFilePicker\n                {...args}\n                values={selectedFiles}\n                onSelectItem={handleSelect}\n                onReplaceItem={handleReplace}\n                onRemoveItem={handleRemove}\n                onEditItem={handleEdit}\n                validation={validation}\n            />\n        );\n    },\n    args: {\n        label: \"Upload Images\",\n        required: true,\n        disabled: false,\n        description: \"Select files to upload (JPG, PNG, PDF)\",\n        note: \"Note: Maximum file size is 5MB per file\",\n        type: \"area\",\n        values: [],\n        validation: undefined,\n        onSelectItem: undefined,\n        onReplaceItem: undefined,\n        onEditItem: undefined,\n        onRemoveItem: undefined\n    },\n    argTypes: {\n        label: {\n            description: \"Label text for the file picker\",\n            control: \"text\",\n            defaultValue: \"Upload Images\"\n        },\n        type: {\n            description: \"The type of file picker to display\",\n            control: \"select\",\n            options: [\"area\", \"compact\"],\n            defaultValue: \"area\"\n        },\n        required: {\n            description: \"Makes the field required when set to true\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        disabled: {\n            description: \"Disables the field when set to true\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        description: {\n            description: \"Additional description text below the field\",\n            control: \"text\"\n        },\n        note: {\n            description: \"Additional note text below the field\",\n            control: \"text\"\n        },\n        values: {\n            description: \"Array of selected files\",\n            control: \"object\"\n        },\n        validation: {\n            description:\n                \"Validation state and message. Please refer to the example code for details on usage.\"\n        },\n        onSelectItem: {\n            description:\n                \"Callback when user selects files - Please refer to the example code for details on usage.\",\n            action: \"onSelectItem\"\n        },\n        onReplaceItem: {\n            description:\n                \"Callback when user replaces a file - Please refer to the example code for details on usage.\",\n            action: \"onReplaceItem\"\n        },\n        onEditItem: {\n            description:\n                \"Callback when user edits a file - Please refer to the example code for details on usage.\",\n            action: \"onEditItem\"\n        },\n        onRemoveItem: {\n            description:\n                \"Callback when user removes a file - Please refer to the example code for details on usage.\",\n            action: \"onRemoveItem\"\n        }\n    }\n};\n"],"names":["getRandomNumber","min","max","Math","createFileList","size","Array","_","index","width","height","fileSize","meta","MultiFilePicker","args","selectedFiles","setSelectedFiles","useState","prevState","item","value","i","alert","Default","AreaType","AreaWithLabel","AreaWithLabelRequired","AreaWithDescription","AreaWithNotes","AreaWithErrors","AreaDisabled","AreaWithValidateFunction","validation","setValidation","undefined","validate","AreaFullExample","Compact","CompactWithLabel","CompactWithLabelRequired","CompactWithDescription","CompactWithNotes","CompactWithErrors","CompactDisabled","CompactWithValidateFunction","CompactFullExample","Documentation","useEffect","formattedValues","handleSelect","handleReplace","handleEdit","file","console","handleRemove"],"mappings":"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"}
+{"version":3,"file":"MultiFilePicker/MultiFilePicker.stories.js","sources":["../../src/MultiFilePicker/MultiFilePicker.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { type FileItemDto, MultiFilePicker } from \"~/MultiFilePicker/index.js\";\n\nconst getRandomNumber = (min: number, max: number): number =>\n    Math.floor(Math.random() * (max - min + 1)) + min;\n\nconst createFileList = (size: number = 10): FileItemDto[] => {\n    return Array.from({ length: size }, (_, index) => {\n        const width = getRandomNumber(500, 2000); // Random width between 500 and 2000\n        const height = getRandomNumber(500, 2000); // Random height between 500 and 2000\n        const fileSize = getRandomNumber(500000, 5000000); // Random file size between 500KB and 5MB\n\n        return {\n            name: `file-${index + 1}.jpg`,\n            mimeType: \"image/jpeg\",\n            size: fileSize,\n            url: `https://picsum.photos/${width}/${height}`\n        };\n    });\n};\n\nconst meta: Meta<typeof MultiFilePicker> = {\n    title: \"Components/Form/Multi FilePicker\",\n    component: MultiFilePicker,\n    argTypes: {\n        onSelectItem: { action: \"onSelectItem\" },\n        onEditItem: { action: \"onEditItem\" },\n        onRemoveItem: { action: \"onRemoveItem\" },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [selectedFiles, setSelectedFiles] = useState<FileItemDto[]>([]);\n        return (\n            <MultiFilePicker\n                {...args}\n                values={selectedFiles}\n                onSelectItem={() => setSelectedFiles(createFileList())}\n                onReplaceItem={(_, index) =>\n                    setSelectedFiles(prevState => {\n                        if (!prevState) {\n                            return [];\n                        }\n\n                        return [\n                            ...prevState.slice(0, index),\n                            ...createFileList(1),\n                            ...prevState.slice(index + 1)\n                        ];\n                    })\n                }\n                onRemoveItem={item =>\n                    setSelectedFiles(prevState =>\n                        prevState?.filter(value => value.name !== item?.name)\n                    )\n                }\n                onEditItem={(item, i) => alert(`Editing ${item?.name} at position ${i}`)}\n            />\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof MultiFilePicker>;\n\nexport const Default: Story = {};\n\nexport const AreaType: Story = {\n    args: {\n        ...Default.args,\n        type: \"area\"\n    }\n};\n\nexport const AreaWithLabel: Story = {\n    args: {\n        ...AreaType.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const AreaWithLabelRequired: Story = {\n    args: {\n        ...AreaType.args,\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const AreaWithDescription: Story = {\n    args: {\n        ...AreaType.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const AreaWithNotes: Story = {\n    args: {\n        ...AreaType.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const AreaWithErrors: Story = {\n    args: {\n        ...AreaType.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const AreaDisabled: Story = {\n    args: {\n        ...AreaType.args,\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const AreaWithValidateFunction: Story = {\n    args: {\n        ...AreaType.args\n    },\n    render: args => {\n        const [validation, setValidation] = useState<any>({ isValid: true, message: undefined });\n\n        const validate = async () => {\n            setValidation({ isValid: false, message: \"Any custom error message.\" });\n        };\n\n        return <MultiFilePicker {...args} validate={validate} validation={validation} />;\n    }\n};\n\nexport const AreaFullExample: Story = {\n    args: {\n        ...AreaType.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 Compact: Story = {\n    args: {\n        ...Default.args,\n        type: \"compact\"\n    }\n};\n\nexport const CompactWithLabel: Story = {\n    args: {\n        ...Compact.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const CompactWithLabelRequired: Story = {\n    args: {\n        ...Compact.args,\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const CompactWithDescription: Story = {\n    args: {\n        ...Compact.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const CompactWithNotes: Story = {\n    args: {\n        ...Compact.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const CompactWithErrors: Story = {\n    args: {\n        ...Compact.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const CompactDisabled: Story = {\n    args: {\n        ...Compact.args,\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const CompactWithValidateFunction: Story = {\n    args: {\n        ...Compact.args\n    },\n    render: args => {\n        const [validation, setValidation] = useState<any>({ isValid: true, message: undefined });\n\n        const validate = async () => {\n            setValidation({ isValid: false, message: \"Any custom error message.\" });\n        };\n\n        return <MultiFilePicker {...args} validate={validate} validation={validation} />;\n    }\n};\n\nexport const CompactFullExample: Story = {\n    args: {\n        ...Compact.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 [selectedFiles, setSelectedFiles] = useState<FileItemDto[]>([]);\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        // Update value when args.values changes\n        useEffect(() => {\n            if (!args.values) {\n                setSelectedFiles([]);\n            } else if (Array.isArray(args.values)) {\n                // Convert any string values to FileItemDto format\n                const formattedValues = args.values.map(value => {\n                    if (typeof value === \"string\") {\n                        return {\n                            name: value.split(\"/\").pop() || \"file\",\n                            mimeType: \"image/jpeg\", // Default mime type\n                            size: 0,\n                            url: value\n                        };\n                    }\n                    return value as FileItemDto;\n                });\n                setSelectedFiles(formattedValues);\n            }\n        }, [args.values]);\n\n        const handleSelect = () => {\n            setSelectedFiles(createFileList(3));\n            setValidation({ isValid: true, message: \"\" });\n        };\n\n        const handleReplace = (_: any, index: number) => {\n            setSelectedFiles(prevState => {\n                if (!prevState) {\n                    return [];\n                }\n\n                return [\n                    ...prevState.slice(0, index),\n                    ...createFileList(1),\n                    ...prevState.slice(index + 1)\n                ];\n            });\n            setValidation({ isValid: true, message: \"\" });\n        };\n\n        const handleEdit = (file: any, index: number) => {\n            if (file) {\n                console.log(\"Editing file:\", file, \"at index:\", index);\n                alert(`Editing File: ${file.name} at position ${index}`);\n            }\n        };\n\n        const handleRemove = (file: any, index: number) => {\n            setSelectedFiles(prevState => prevState?.filter((_, i) => i !== index));\n\n            if (args.required && (!selectedFiles || selectedFiles.length <= 1)) {\n                setValidation({ isValid: false, message: \"Please select at least one file\" });\n            }\n        };\n\n        // Validate on required change or value change\n        useEffect(() => {\n            if (args.required && (!selectedFiles || selectedFiles.length === 0)) {\n                setValidation({ isValid: false, message: \"Please select at least one file\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        }, [args.required, selectedFiles]);\n\n        return (\n            <MultiFilePicker\n                {...args}\n                values={selectedFiles}\n                onSelectItem={handleSelect}\n                onReplaceItem={handleReplace}\n                onRemoveItem={handleRemove}\n                onEditItem={handleEdit}\n                validation={validation}\n            />\n        );\n    },\n    args: {\n        label: \"Upload Images\",\n        required: true,\n        disabled: false,\n        description: \"Select files to upload (JPG, PNG, PDF)\",\n        note: \"Note: Maximum file size is 5MB per file\",\n        type: \"area\",\n        values: [],\n        validation: undefined,\n        onSelectItem: undefined,\n        onReplaceItem: undefined,\n        onEditItem: undefined,\n        onRemoveItem: undefined\n    },\n    argTypes: {\n        label: {\n            description: \"Label text for the file picker\",\n            control: \"text\",\n            defaultValue: \"Upload Images\"\n        },\n        type: {\n            description: \"The type of file picker to display\",\n            control: \"select\",\n            options: [\"area\", \"compact\"],\n            defaultValue: \"area\"\n        },\n        required: {\n            description: \"Makes the field required when set to true\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        disabled: {\n            description: \"Disables the field when set to true\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        description: {\n            description: \"Additional description text below the field\",\n            control: \"text\"\n        },\n        note: {\n            description: \"Additional note text below the field\",\n            control: \"text\"\n        },\n        values: {\n            description: \"Array of selected files\",\n            control: \"object\"\n        },\n        validation: {\n            description:\n                \"Validation state and message. Please refer to the example code for details on usage.\"\n        },\n        onSelectItem: {\n            description:\n                \"Callback when user selects files - Please refer to the example code for details on usage.\",\n            action: \"onSelectItem\"\n        },\n        onReplaceItem: {\n            description:\n                \"Callback when user replaces a file - Please refer to the example code for details on usage.\",\n            action: \"onReplaceItem\"\n        },\n        onEditItem: {\n            description:\n                \"Callback when user edits a file - Please refer to the example code for details on usage.\",\n            action: \"onEditItem\"\n        },\n        onRemoveItem: {\n            description:\n                \"Callback when user removes a file - Please refer to the example code for details on usage.\",\n            action: \"onRemoveItem\"\n        }\n    }\n};\n"],"names":["getRandomNumber","min","max","Math","createFileList","size","Array","_","index","width","height","fileSize","meta","MultiFilePicker","args","selectedFiles","setSelectedFiles","useState","prevState","item","value","i","alert","Default","AreaType","AreaWithLabel","AreaWithLabelRequired","AreaWithDescription","AreaWithNotes","AreaWithErrors","AreaDisabled","AreaWithValidateFunction","validation","setValidation","undefined","validate","AreaFullExample","Compact","CompactWithLabel","CompactWithLabelRequired","CompactWithDescription","CompactWithNotes","CompactWithErrors","CompactDisabled","CompactWithValidateFunction","CompactFullExample","Documentation","useEffect","formattedValues","handleSelect","handleReplace","handleEdit","file","console","handleRemove"],"mappings":";;AAIA,MAAMA,kBAAkB,CAACC,KAAaC,MAClCC,KAAK,KAAK,CAACA,KAAK,MAAM,KAAMD,CAAAA,MAAMD,MAAM,MAAMA;AAElD,MAAMG,iBAAiB,CAACC,OAAe,EAAE,GAC9BC,MAAM,IAAI,CAAC;QAAE,QAAQD;IAAK,GAAG,CAACE,GAAGC;QACpC,MAAMC,QAAQT,gBAAgB,KAAK;QACnC,MAAMU,SAASV,gBAAgB,KAAK;QACpC,MAAMW,WAAWX,gBAAgB,QAAQ;QAEzC,OAAO;YACH,MAAM,CAAC,KAAK,EAAEQ,QAAQ,EAAE,IAAI,CAAC;YAC7B,UAAU;YACV,MAAMG;YACN,KAAK,CAAC,sBAAsB,EAAEF,MAAM,CAAC,EAAEC,QAAQ;QACnD;IACJ;AAGJ,MAAME,OAAqC;IACvC,OAAO;IACP,WAAWC;IACX,UAAU;QACN,cAAc;YAAE,QAAQ;QAAe;QACvC,YAAY;YAAE,QAAQ;QAAa;QACnC,cAAc;YAAE,QAAQ;QAAe;QACvC,UAAU;YACN,SAAS;YACT,cAAc;QAClB;IACJ;IACA,YAAY;QACR,QAAQ;IACZ;IACA,QAAQC,CAAAA;QACJ,MAAM,CAACC,eAAeC,iBAAiB,GAAGC,SAAwB,EAAE;QACpE,OAAO,WAAP,GACI,oBAACJ,iBAAeA;YACX,GAAGC,IAAI;YACR,QAAQC;YACR,cAAc,IAAMC,iBAAiBZ;YACrC,eAAe,CAACG,GAAGC,QACfQ,iBAAiBE,CAAAA;oBACb,IAAI,CAACA,WACD,OAAO,EAAE;oBAGb,OAAO;2BACAA,UAAU,KAAK,CAAC,GAAGV;2BACnBJ,eAAe;2BACfc,UAAU,KAAK,CAACV,QAAQ;qBAC9B;gBACL;YAEJ,cAAcW,CAAAA,OACVH,iBAAiBE,CAAAA,YACbA,WAAW,OAAOE,CAAAA,QAASA,MAAM,IAAI,KAAKD,MAAM;YAGxD,YAAY,CAACA,MAAME,IAAMC,MAAM,CAAC,QAAQ,EAAEH,MAAM,KAAK,aAAa,EAAEE,GAAG;;IAGnF;AACJ;AAEA,gCAAeT;AAGR,MAAMW,UAAiB,CAAC;AAExB,MAAMC,WAAkB;IAC3B,MAAM;QACF,GAAGD,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAME,gBAAuB;IAChC,MAAM;QACF,GAAGD,SAAS,IAAI;QAChB,OAAO;IACX;AACJ;AAEO,MAAME,wBAA+B;IACxC,MAAM;QACF,GAAGF,SAAS,IAAI;QAChB,OAAO;QACP,UAAU;IACd;AACJ;AAEO,MAAMG,sBAA6B;IACtC,MAAM;QACF,GAAGH,SAAS,IAAI;QAChB,aAAa;IACjB;AACJ;AAEO,MAAMI,gBAAuB;IAChC,MAAM;QACF,GAAGJ,SAAS,IAAI;QAChB,MAAM;IACV;AACJ;AAEO,MAAMK,iBAAwB;IACjC,MAAM;QACF,GAAGL,SAAS,IAAI;QAChB,YAAY;YACR,SAAS;YACT,SAAS;QACb;IACJ;AACJ;AAEO,MAAMM,eAAsB;IAC/B,MAAM;QACF,GAAGN,SAAS,IAAI;QAChB,OAAO;QACP,UAAU;IACd;AACJ;AAEO,MAAMO,2BAAkC;IAC3C,MAAM;QACF,GAAGP,SAAS,IAAI;IACpB;IACA,QAAQV,CAAAA;QACJ,MAAM,CAACkB,YAAYC,cAAc,GAAGhB,SAAc;YAAE,SAAS;YAAM,SAASiB;QAAU;QAEtF,MAAMC,WAAW;YACbF,cAAc;gBAAE,SAAS;gBAAO,SAAS;YAA4B;QACzE;QAEA,OAAO,WAAP,GAAO,oBAACpB,iBAAeA;YAAE,GAAGC,IAAI;YAAE,UAAUqB;YAAU,YAAYH;;IACtE;AACJ;AAEO,MAAMI,kBAAyB;IAClC,MAAM;QACF,GAAGZ,SAAS,IAAI;QAChB,OAAO;QACP,UAAU;QACV,aAAa;QACb,MAAM;QACN,YAAY;YACR,SAAS;YACT,SAAS;QACb;IACJ;AACJ;AAEO,MAAMa,UAAiB;IAC1B,MAAM;QACF,GAAGd,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMe,mBAA0B;IACnC,MAAM;QACF,GAAGD,QAAQ,IAAI;QACf,OAAO;IACX;AACJ;AAEO,MAAME,2BAAkC;IAC3C,MAAM;QACF,GAAGF,QAAQ,IAAI;QACf,OAAO;QACP,UAAU;IACd;AACJ;AAEO,MAAMG,yBAAgC;IACzC,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,aAAa;IACjB;AACJ;AAEO,MAAMI,mBAA0B;IACnC,MAAM;QACF,GAAGJ,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMK,oBAA2B;IACpC,MAAM;QACF,GAAGL,QAAQ,IAAI;QACf,YAAY;YACR,SAAS;YACT,SAAS;QACb;IACJ;AACJ;AAEO,MAAMM,kBAAyB;IAClC,MAAM;QACF,GAAGN,QAAQ,IAAI;QACf,OAAO;QACP,UAAU;IACd;AACJ;AAEO,MAAMO,8BAAqC;IAC9C,MAAM;QACF,GAAGP,QAAQ,IAAI;IACnB;IACA,QAAQvB,CAAAA;QACJ,MAAM,CAACkB,YAAYC,cAAc,GAAGhB,SAAc;YAAE,SAAS;YAAM,SAASiB;QAAU;QAEtF,MAAMC,WAAW;YACbF,cAAc;gBAAE,SAAS;gBAAO,SAAS;YAA4B;QACzE;QAEA,OAAO,WAAP,GAAO,oBAACpB,iBAAeA;YAAE,GAAGC,IAAI;YAAE,UAAUqB;YAAU,YAAYH;;IACtE;AACJ;AAEO,MAAMa,qBAA4B;IACrC,MAAM;QACF,GAAGR,QAAQ,IAAI;QACf,OAAO;QACP,UAAU;QACV,aAAa;QACb,MAAM;QACN,YAAY;YACR,SAAS;YACT,SAAS;QACb;IACJ;AACJ;AAEO,MAAMS,gBAAuB;IAChC,QAAQhC,CAAAA;QACJ,MAAM,CAACC,eAAeC,iBAAiB,GAAGC,SAAwB,EAAE;QACpE,MAAM,CAACe,YAAYC,cAAc,GAAGhB,SAAS;YAAE,SAAS;YAAM,SAAS;QAAG;QAG1E8B,UAAU;YACN,IAAKjC,KAAK,MAAM,EAET;gBAAA,IAAIR,MAAM,OAAO,CAACQ,KAAK,MAAM,GAAG;oBAEnC,MAAMkC,kBAAkBlC,KAAK,MAAM,CAAC,GAAG,CAACM,CAAAA;wBACpC,IAAI,AAAiB,YAAjB,OAAOA,OACP,OAAO;4BACH,MAAMA,MAAM,KAAK,CAAC,KAAK,GAAG,MAAM;4BAChC,UAAU;4BACV,MAAM;4BACN,KAAKA;wBACT;wBAEJ,OAAOA;oBACX;oBACAJ,iBAAiBgC;gBACrB;YAAA,OAfIhC,iBAAiB,EAAE;QAgB3B,GAAG;YAACF,KAAK,MAAM;SAAC;QAEhB,MAAMmC,eAAe;YACjBjC,iBAAiBZ,eAAe;YAChC6B,cAAc;gBAAE,SAAS;gBAAM,SAAS;YAAG;QAC/C;QAEA,MAAMiB,gBAAgB,CAAC3C,GAAQC;YAC3BQ,iBAAiBE,CAAAA;gBACb,IAAI,CAACA,WACD,OAAO,EAAE;gBAGb,OAAO;uBACAA,UAAU,KAAK,CAAC,GAAGV;uBACnBJ,eAAe;uBACfc,UAAU,KAAK,CAACV,QAAQ;iBAC9B;YACL;YACAyB,cAAc;gBAAE,SAAS;gBAAM,SAAS;YAAG;QAC/C;QAEA,MAAMkB,aAAa,CAACC,MAAW5C;YAC3B,IAAI4C,MAAM;gBACNC,QAAQ,GAAG,CAAC,iBAAiBD,MAAM,aAAa5C;gBAChDc,MAAM,CAAC,cAAc,EAAE8B,KAAK,IAAI,CAAC,aAAa,EAAE5C,OAAO;YAC3D;QACJ;QAEA,MAAM8C,eAAe,CAACF,MAAW5C;YAC7BQ,iBAAiBE,CAAAA,YAAaA,WAAW,OAAO,CAACX,GAAGc,IAAMA,MAAMb;YAEhE,IAAIM,KAAK,QAAQ,IAAK,EAACC,iBAAiBA,cAAc,MAAM,IAAI,IAC5DkB,cAAc;gBAAE,SAAS;gBAAO,SAAS;YAAkC;QAEnF;QAGAc,UAAU;YACFjC,KAAK,QAAQ,IAAK,EAACC,iBAAiBA,AAAyB,MAAzBA,cAAc,MAAM,AAAK,IAC7DkB,cAAc;gBAAE,SAAS;gBAAO,SAAS;YAAkC,KAE3EA,cAAc;gBAAE,SAAS;gBAAM,SAAS;YAAG;QAEnD,GAAG;YAACnB,KAAK,QAAQ;YAAEC;SAAc;QAEjC,OAAO,WAAP,GACI,oBAACF,iBAAeA;YACX,GAAGC,IAAI;YACR,QAAQC;YACR,cAAckC;YACd,eAAeC;YACf,cAAcI;YACd,YAAYH;YACZ,YAAYnB;;IAGxB;IACA,MAAM;QACF,OAAO;QACP,UAAU;QACV,UAAU;QACV,aAAa;QACb,MAAM;QACN,MAAM;QACN,QAAQ,EAAE;QACV,YAAYE;QACZ,cAAcA;QACd,eAAeA;QACf,YAAYA;QACZ,cAAcA;IAClB;IACA,UAAU;QACN,OAAO;YACH,aAAa;YACb,SAAS;YACT,cAAc;QAClB;QACA,MAAM;YACF,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAQ;aAAU;YAC5B,cAAc;QAClB;QACA,UAAU;YACN,aAAa;YACb,SAAS;YACT,cAAc;QAClB;QACA,UAAU;YACN,aAAa;YACb,SAAS;YACT,cAAc;QAClB;QACA,aAAa;YACT,aAAa;YACb,SAAS;QACb;QACA,MAAM;YACF,aAAa;YACb,SAAS;QACb;QACA,QAAQ;YACJ,aAAa;YACb,SAAS;QACb;QACA,YAAY;YACR,aACI;QACR;QACA,cAAc;YACV,aACI;YACJ,QAAQ;QACZ;QACA,eAAe;YACX,aACI;YACJ,QAAQ;QACZ;QACA,YAAY;YACR,aACI;YACJ,QAAQ;QACZ;QACA,cAAc;YACV,aACI;YACJ,QAAQ;QACZ;IACJ;AACJ"}

package/MultiFilePicker/primitives/MultiFilePickerPrimitive.stories.d.ts

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

package/MultiFilePicker/primitives/MultiFilePickerPrimitive.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiFilePicker/primitives/MultiFilePickerPrimitive.stories.js","sources":["../../../src/MultiFilePicker/primitives/MultiFilePickerPrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { MultiFilePickerPrimitive, type FileItemDto } from \"./MultiFilePickerPrimitive.js\";\n\nconst getRandomNumber = (min: number, max: number): number =>\n    Math.floor(Math.random() * (max - min + 1)) + min;\n\nconst createFileList = (size: number = 10): FileItemDto[] => {\n    return Array.from({ length: size }, (_, index) => {\n        const width = getRandomNumber(500, 2000); // Random width between 500 and 2000\n        const height = getRandomNumber(500, 2000); // Random height between 500 and 2000\n        const fileSize = getRandomNumber(500000, 5000000); // Random file size between 500KB and 5MB\n\n        return {\n            name: `file-${index + 1}.jpg`,\n            mimeType: \"image/jpeg\",\n            size: fileSize,\n            url: `https://picsum.photos/${width}/${height}`\n        };\n    });\n};\n\nconst meta: Meta<typeof MultiFilePickerPrimitive> = {\n    title: \"Components/Form Primitives/Multi FilePicker\",\n    component: MultiFilePickerPrimitive,\n    argTypes: {\n        onSelectItem: { action: \"onSelectItem\" },\n        onReplaceItem: { action: \"onReplaceItem\" },\n        onEditItem: { action: \"onEditItem\" },\n        onRemoveItem: { action: \"onRemoveItem\" },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [selectedFiles, setSelectedFiles] = useState<FileItemDto[]>([]);\n        return (\n            <MultiFilePickerPrimitive\n                {...args}\n                values={selectedFiles}\n                onSelectItem={() => setSelectedFiles(createFileList())}\n                onReplaceItem={(_, index) =>\n                    setSelectedFiles(prevState => {\n                        if (!prevState) {\n                            return [];\n                        }\n\n                        return [\n                            ...prevState.slice(0, index),\n                            ...createFileList(1),\n                            ...prevState.slice(index + 1)\n                        ];\n                    })\n                }\n                onRemoveItem={item =>\n                    setSelectedFiles(prevState =>\n                        prevState?.filter(value => value.name !== item?.name)\n                    )\n                }\n                onEditItem={(item, i) => alert(`Editing ${item?.name} at position ${i}`)}\n            />\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof MultiFilePickerPrimitive>;\n\nexport const Default: Story = {\n    args: {\n        label: \"Add gallery files\"\n    }\n};\n\nexport const AreaType: Story = {\n    args: {\n        ...Default.args,\n        type: \"area\"\n    }\n};\n\nexport const AreaPrimaryVariant: Story = {\n    args: {\n        ...AreaType.args,\n        variant: \"primary\"\n    }\n};\n\nexport const AreaPrimaryVariantDisabled: Story = {\n    args: {\n        ...AreaPrimaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const AreaPrimaryVariantInvalid: Story = {\n    args: {\n        ...AreaPrimaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const AreaSecondaryVariant: Story = {\n    args: {\n        ...AreaType.args,\n        variant: \"secondary\"\n    }\n};\n\nexport const AreaSecondaryVariantDisabled: Story = {\n    args: {\n        ...AreaSecondaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const AreaSecondaryVariantInvalid: Story = {\n    args: {\n        ...AreaSecondaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const AreaGhostVariant: Story = {\n    args: {\n        ...AreaType.args,\n        variant: \"ghost\"\n    }\n};\n\nexport const AreaGhostVariantDisabled: Story = {\n    args: {\n        ...AreaGhostVariant.args,\n        disabled: true\n    }\n};\n\nexport const AreaGhostVariantInvalid: Story = {\n    args: {\n        ...AreaGhostVariant.args,\n        invalid: true\n    }\n};\n\nexport const AreaWithImagePreview: Story = {\n    args: {\n        ...AreaType.args,\n        renderFilePreview: props => <MultiFilePickerPrimitive.Preview.Image {...props} />\n    }\n};\n\nexport const AreaWithImagePreviewLight: Story = {\n    args: {\n        ...AreaWithImagePreview.args,\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.Image variant={\"light\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithImagePreviewBase: Story = {\n    args: {\n        ...AreaWithImagePreview.args,\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.Image variant={\"base\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithImagePreviewTransparent: Story = {\n    args: {\n        ...AreaWithImagePreview.args,\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.Image variant={\"transparent\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithRichItemPreview: Story = {\n    args: {\n        ...AreaType.args,\n        renderFilePreview: props => <MultiFilePickerPrimitive.Preview.RichItem {...props} />\n    }\n};\n\nexport const AreaWithRichItemPreviewLight: Story = {\n    args: {\n        ...AreaWithRichItemPreview.args,\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.RichItem variant={\"light\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithRichItemPreviewBase: Story = {\n    args: {\n        ...AreaWithRichItemPreview.args,\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.RichItem variant={\"base\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithRichItemPreviewTransparent: Story = {\n    args: {\n        ...AreaWithRichItemPreview.args,\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.RichItem variant={\"transparent\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithRichItemThumbnailPreview: Story = {\n    args: {\n        ...AreaType.args,\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.RichItem preview={\"thumbnail\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithRichItemFileTypePreview: Story = {\n    args: {\n        ...AreaType.args,\n        values: [\n            {\n                name: \"export.csv\",\n                url: \"export.csv\",\n                mimeType: \"text/csv\",\n                size: 100000\n            }\n        ],\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.RichItem preview={\"file-type\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithRichItemFileTypePlaceholder: Story = {\n    args: {\n        ...AreaType.args,\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.RichItem preview={\"placeholder\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithTextOnlyPreview: Story = {\n    args: {\n        ...AreaType.args,\n        renderFilePreview: props => <MultiFilePickerPrimitive.Preview.TextOnly {...props} />\n    }\n};\n\nexport const AreaWithTextOnlyPreviewLight: Story = {\n    args: {\n        ...AreaWithTextOnlyPreview.args,\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.TextOnly variant={\"light\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithTextOnlyPreviewBase: Story = {\n    args: {\n        ...AreaWithTextOnlyPreview.args,\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.TextOnly variant={\"base\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithTextOnlyPreviewTransparent: Story = {\n    args: {\n        ...AreaWithTextOnlyPreview.args,\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.TextOnly variant={\"transparent\"} {...props} />\n        )\n    }\n};\n\nexport const CompactType: Story = {\n    args: {\n        ...Default.args,\n        type: \"compact\"\n    }\n};\n\nexport const CompactPrimaryVariant: Story = {\n    args: {\n        ...CompactType.args,\n        variant: \"primary\"\n    }\n};\n\nexport const CompactPrimaryVariantDisabled: Story = {\n    args: {\n        ...CompactPrimaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const CompactPrimaryVariantInvalid: Story = {\n    args: {\n        ...CompactPrimaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const CompactSecondaryVariant: Story = {\n    args: {\n        ...CompactType.args,\n        variant: \"secondary\"\n    }\n};\n\nexport const CompactSecondaryVariantDisabled: Story = {\n    args: {\n        ...CompactSecondaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const CompactSecondaryVariantInvalid: Story = {\n    args: {\n        ...CompactSecondaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const CompactGhostVariant: Story = {\n    args: {\n        ...CompactType.args,\n        variant: \"ghost\"\n    }\n};\n\nexport const CompactGhostVariantDisabled: Story = {\n    args: {\n        ...CompactGhostVariant.args,\n        disabled: true\n    }\n};\n\nexport const CompactGhostVariantInvalid: Story = {\n    args: {\n        ...CompactGhostVariant.args,\n        invalid: true\n    }\n};\n\nexport const CompactWithTextOnlyPreviewSmall: Story = {\n    args: {\n        ...CompactType.args,\n        values: createFileList(50),\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.TextOnly {...props} small={true} />\n        )\n    }\n};\n"],"names":["getRandomNumber","min","max","Math","createFileList","size","Array","_","index","width","height","fileSize","meta","MultiFilePickerPrimitive","args","selectedFiles","setSelectedFiles","useState","prevState","item","value","i","alert","Default","AreaType","AreaPrimaryVariant","AreaPrimaryVariantDisabled","AreaPrimaryVariantInvalid","AreaSecondaryVariant","AreaSecondaryVariantDisabled","AreaSecondaryVariantInvalid","AreaGhostVariant","AreaGhostVariantDisabled","AreaGhostVariantInvalid","AreaWithImagePreview","props","AreaWithImagePreviewLight","AreaWithImagePreviewBase","AreaWithImagePreviewTransparent","AreaWithRichItemPreview","AreaWithRichItemPreviewLight","AreaWithRichItemPreviewBase","AreaWithRichItemPreviewTransparent","AreaWithRichItemThumbnailPreview","AreaWithRichItemFileTypePreview","AreaWithRichItemFileTypePlaceholder","AreaWithTextOnlyPreview","AreaWithTextOnlyPreviewLight","AreaWithTextOnlyPreviewBase","AreaWithTextOnlyPreviewTransparent","CompactType","CompactPrimaryVariant","CompactPrimaryVariantDisabled","CompactPrimaryVariantInvalid","CompactSecondaryVariant","CompactSecondaryVariantDisabled","CompactSecondaryVariantInvalid","CompactGhostVariant","CompactGhostVariantDisabled","CompactGhostVariantInvalid","CompactWithTextOnlyPreviewSmall"],"mappings":";;AAIA,MAAMA,kBAAkB,CAACC,KAAaC,MAClCC,KAAK,KAAK,CAACA,KAAK,MAAM,KAAMD,CAAAA,MAAMD,MAAM,MAAMA;AAElD,MAAMG,iBAAiB,CAACC,OAAe,EAAE,GAC9BC,MAAM,IAAI,CAAC;QAAE,QAAQD;IAAK,GAAG,CAACE,GAAGC;QACpC,MAAMC,QAAQT,gBAAgB,KAAK;QACnC,MAAMU,SAASV,gBAAgB,KAAK;QACpC,MAAMW,WAAWX,gBAAgB,QAAQ;QAEzC,OAAO;YACH,MAAM,CAAC,KAAK,EAAEQ,QAAQ,EAAE,IAAI,CAAC;YAC7B,UAAU;YACV,MAAMG;YACN,KAAK,CAAC,sBAAsB,EAAEF,MAAM,CAAC,EAAEC,QAAQ;QACnD;IACJ;AAGJ,MAAME,OAA8C;IAChD,OAAO;IACP,WAAWC;IACX,UAAU;QACN,cAAc;YAAE,QAAQ;QAAe;QACvC,eAAe;YAAE,QAAQ;QAAgB;QACzC,YAAY;YAAE,QAAQ;QAAa;QACnC,cAAc;YAAE,QAAQ;QAAe;QACvC,UAAU;YACN,SAAS;YACT,cAAc;QAClB;IACJ;IACA,YAAY;QACR,QAAQ;IACZ;IACA,QAAQC,CAAAA;QACJ,MAAM,CAACC,eAAeC,iBAAiB,GAAGC,SAAwB,EAAE;QACpE,OAAO,WAAP,GACI,oBAACJ,0BAAwBA;YACpB,GAAGC,IAAI;YACR,QAAQC;YACR,cAAc,IAAMC,iBAAiBZ;YACrC,eAAe,CAACG,GAAGC,QACfQ,iBAAiBE,CAAAA;oBACb,IAAI,CAACA,WACD,OAAO,EAAE;oBAGb,OAAO;2BACAA,UAAU,KAAK,CAAC,GAAGV;2BACnBJ,eAAe;2BACfc,UAAU,KAAK,CAACV,QAAQ;qBAC9B;gBACL;YAEJ,cAAcW,CAAAA,OACVH,iBAAiBE,CAAAA,YACbA,WAAW,OAAOE,CAAAA,QAASA,MAAM,IAAI,KAAKD,MAAM;YAGxD,YAAY,CAACA,MAAME,IAAMC,MAAM,CAAC,QAAQ,EAAEH,MAAM,KAAK,aAAa,EAAEE,GAAG;;IAGnF;AACJ;AAEA,yCAAeT;AAGR,MAAMW,UAAiB;IAC1B,MAAM;QACF,OAAO;IACX;AACJ;AAEO,MAAMC,WAAkB;IAC3B,MAAM;QACF,GAAGD,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAME,qBAA4B;IACrC,MAAM;QACF,GAAGD,SAAS,IAAI;QAChB,SAAS;IACb;AACJ;AAEO,MAAME,6BAAoC;IAC7C,MAAM;QACF,GAAGD,mBAAmB,IAAI;QAC1B,UAAU;IACd;AACJ;AAEO,MAAME,4BAAmC;IAC5C,MAAM;QACF,GAAGF,mBAAmB,IAAI;QAC1B,SAAS;IACb;AACJ;AAEO,MAAMG,uBAA8B;IACvC,MAAM;QACF,GAAGJ,SAAS,IAAI;QAChB,SAAS;IACb;AACJ;AAEO,MAAMK,+BAAsC;IAC/C,MAAM;QACF,GAAGD,qBAAqB,IAAI;QAC5B,UAAU;IACd;AACJ;AAEO,MAAME,8BAAqC;IAC9C,MAAM;QACF,GAAGF,qBAAqB,IAAI;QAC5B,SAAS;IACb;AACJ;AAEO,MAAMG,mBAA0B;IACnC,MAAM;QACF,GAAGP,SAAS,IAAI;QAChB,SAAS;IACb;AACJ;AAEO,MAAMQ,2BAAkC;IAC3C,MAAM;QACF,GAAGD,iBAAiB,IAAI;QACxB,UAAU;IACd;AACJ;AAEO,MAAME,0BAAiC;IAC1C,MAAM;QACF,GAAGF,iBAAiB,IAAI;QACxB,SAAS;IACb;AACJ;AAEO,MAAMG,uBAA8B;IACvC,MAAM;QACF,GAAGV,SAAS,IAAI;QAChB,mBAAmBW,CAAAA,QAAAA,WAAAA,GAAS,oBAACtB,yBAAyB,OAAO,CAAC,KAAK,EAAKsB;IAC5E;AACJ;AAEO,MAAMC,4BAAmC;IAC5C,MAAM;QACF,GAAGF,qBAAqB,IAAI;QAC5B,mBAAmBC,CAAAA,QAAAA,WAAAA,GACf,oBAACtB,yBAAyB,OAAO,CAAC,KAAK;gBAAC,SAAS;gBAAU,GAAGsB,KAAK;;IAE3E;AACJ;AAEO,MAAME,2BAAkC;IAC3C,MAAM;QACF,GAAGH,qBAAqB,IAAI;QAC5B,mBAAmBC,CAAAA,QAAAA,WAAAA,GACf,oBAACtB,yBAAyB,OAAO,CAAC,KAAK;gBAAC,SAAS;gBAAS,GAAGsB,KAAK;;IAE1E;AACJ;AAEO,MAAMG,kCAAyC;IAClD,MAAM;QACF,GAAGJ,qBAAqB,IAAI;QAC5B,mBAAmBC,CAAAA,QAAAA,WAAAA,GACf,oBAACtB,yBAAyB,OAAO,CAAC,KAAK;gBAAC,SAAS;gBAAgB,GAAGsB,KAAK;;IAEjF;AACJ;AAEO,MAAMI,0BAAiC;IAC1C,MAAM;QACF,GAAGf,SAAS,IAAI;QAChB,mBAAmBW,CAAAA,QAAAA,WAAAA,GAAS,oBAACtB,yBAAyB,OAAO,CAAC,QAAQ,EAAKsB;IAC/E;AACJ;AAEO,MAAMK,+BAAsC;IAC/C,MAAM;QACF,GAAGD,wBAAwB,IAAI;QAC/B,mBAAmBJ,CAAAA,QAAAA,WAAAA,GACf,oBAACtB,yBAAyB,OAAO,CAAC,QAAQ;gBAAC,SAAS;gBAAU,GAAGsB,KAAK;;IAE9E;AACJ;AAEO,MAAMM,8BAAqC;IAC9C,MAAM;QACF,GAAGF,wBAAwB,IAAI;QAC/B,mBAAmBJ,CAAAA,QAAAA,WAAAA,GACf,oBAACtB,yBAAyB,OAAO,CAAC,QAAQ;gBAAC,SAAS;gBAAS,GAAGsB,KAAK;;IAE7E;AACJ;AAEO,MAAMO,qCAA4C;IACrD,MAAM;QACF,GAAGH,wBAAwB,IAAI;QAC/B,mBAAmBJ,CAAAA,QAAAA,WAAAA,GACf,oBAACtB,yBAAyB,OAAO,CAAC,QAAQ;gBAAC,SAAS;gBAAgB,GAAGsB,KAAK;;IAEpF;AACJ;AAEO,MAAMQ,mCAA0C;IACnD,MAAM;QACF,GAAGnB,SAAS,IAAI;QAChB,mBAAmBW,CAAAA,QAAAA,WAAAA,GACf,oBAACtB,yBAAyB,OAAO,CAAC,QAAQ;gBAAC,SAAS;gBAAc,GAAGsB,KAAK;;IAElF;AACJ;AAEO,MAAMS,kCAAyC;IAClD,MAAM;QACF,GAAGpB,SAAS,IAAI;QAChB,QAAQ;YACJ;gBACI,MAAM;gBACN,KAAK;gBACL,UAAU;gBACV,MAAM;YACV;SACH;QACD,mBAAmBW,CAAAA,QAAAA,WAAAA,GACf,oBAACtB,yBAAyB,OAAO,CAAC,QAAQ;gBAAC,SAAS;gBAAc,GAAGsB,KAAK;;IAElF;AACJ;AAEO,MAAMU,sCAA6C;IACtD,MAAM;QACF,GAAGrB,SAAS,IAAI;QAChB,mBAAmBW,CAAAA,QAAAA,WAAAA,GACf,oBAACtB,yBAAyB,OAAO,CAAC,QAAQ;gBAAC,SAAS;gBAAgB,GAAGsB,KAAK;;IAEpF;AACJ;AAEO,MAAMW,0BAAiC;IAC1C,MAAM;QACF,GAAGtB,SAAS,IAAI;QAChB,mBAAmBW,CAAAA,QAAAA,WAAAA,GAAS,oBAACtB,yBAAyB,OAAO,CAAC,QAAQ,EAAKsB;IAC/E;AACJ;AAEO,MAAMY,+BAAsC;IAC/C,MAAM;QACF,GAAGD,wBAAwB,IAAI;QAC/B,mBAAmBX,CAAAA,QAAAA,WAAAA,GACf,oBAACtB,yBAAyB,OAAO,CAAC,QAAQ;gBAAC,SAAS;gBAAU,GAAGsB,KAAK;;IAE9E;AACJ;AAEO,MAAMa,8BAAqC;IAC9C,MAAM;QACF,GAAGF,wBAAwB,IAAI;QAC/B,mBAAmBX,CAAAA,QAAAA,WAAAA,GACf,oBAACtB,yBAAyB,OAAO,CAAC,QAAQ;gBAAC,SAAS;gBAAS,GAAGsB,KAAK;;IAE7E;AACJ;AAEO,MAAMc,qCAA4C;IACrD,MAAM;QACF,GAAGH,wBAAwB,IAAI;QAC/B,mBAAmBX,CAAAA,QAAAA,WAAAA,GACf,oBAACtB,yBAAyB,OAAO,CAAC,QAAQ;gBAAC,SAAS;gBAAgB,GAAGsB,KAAK;;IAEpF;AACJ;AAEO,MAAMe,cAAqB;IAC9B,MAAM;QACF,GAAG3B,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAM4B,wBAA+B;IACxC,MAAM;QACF,GAAGD,YAAY,IAAI;QACnB,SAAS;IACb;AACJ;AAEO,MAAME,gCAAuC;IAChD,MAAM;QACF,GAAGD,sBAAsB,IAAI;QAC7B,UAAU;IACd;AACJ;AAEO,MAAME,+BAAsC;IAC/C,MAAM;QACF,GAAGF,sBAAsB,IAAI;QAC7B,SAAS;IACb;AACJ;AAEO,MAAMG,0BAAiC;IAC1C,MAAM;QACF,GAAGJ,YAAY,IAAI;QACnB,SAAS;IACb;AACJ;AAEO,MAAMK,kCAAyC;IAClD,MAAM;QACF,GAAGD,wBAAwB,IAAI;QAC/B,UAAU;IACd;AACJ;AAEO,MAAME,iCAAwC;IACjD,MAAM;QACF,GAAGF,wBAAwB,IAAI;QAC/B,SAAS;IACb;AACJ;AAEO,MAAMG,sBAA6B;IACtC,MAAM;QACF,GAAGP,YAAY,IAAI;QACnB,SAAS;IACb;AACJ;AAEO,MAAMQ,8BAAqC;IAC9C,MAAM;QACF,GAAGD,oBAAoB,IAAI;QAC3B,UAAU;IACd;AACJ;AAEO,MAAME,6BAAoC;IAC7C,MAAM;QACF,GAAGF,oBAAoB,IAAI;QAC3B,SAAS;IACb;AACJ;AAEO,MAAMG,kCAAyC;IAClD,MAAM;QACF,GAAGV,YAAY,IAAI;QACnB,QAAQ9C,eAAe;QACvB,mBAAmB+B,CAAAA,QAAAA,WAAAA,GACf,oBAACtB,yBAAyB,OAAO,CAAC,QAAQ;gBAAE,GAAGsB,KAAK;gBAAE,OAAO;;IAErE;AACJ"}
+{"version":3,"file":"MultiFilePicker/primitives/MultiFilePickerPrimitive.stories.js","sources":["../../../src/MultiFilePicker/primitives/MultiFilePickerPrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { MultiFilePickerPrimitive, type FileItemDto } from \"./MultiFilePickerPrimitive.js\";\n\nconst getRandomNumber = (min: number, max: number): number =>\n    Math.floor(Math.random() * (max - min + 1)) + min;\n\nconst createFileList = (size: number = 10): FileItemDto[] => {\n    return Array.from({ length: size }, (_, index) => {\n        const width = getRandomNumber(500, 2000); // Random width between 500 and 2000\n        const height = getRandomNumber(500, 2000); // Random height between 500 and 2000\n        const fileSize = getRandomNumber(500000, 5000000); // Random file size between 500KB and 5MB\n\n        return {\n            name: `file-${index + 1}.jpg`,\n            mimeType: \"image/jpeg\",\n            size: fileSize,\n            url: `https://picsum.photos/${width}/${height}`\n        };\n    });\n};\n\nconst meta: Meta<typeof MultiFilePickerPrimitive> = {\n    title: \"Components/Form Primitives/Multi FilePicker\",\n    component: MultiFilePickerPrimitive,\n    argTypes: {\n        onSelectItem: { action: \"onSelectItem\" },\n        onReplaceItem: { action: \"onReplaceItem\" },\n        onEditItem: { action: \"onEditItem\" },\n        onRemoveItem: { action: \"onRemoveItem\" },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [selectedFiles, setSelectedFiles] = useState<FileItemDto[]>([]);\n        return (\n            <MultiFilePickerPrimitive\n                {...args}\n                values={selectedFiles}\n                onSelectItem={() => setSelectedFiles(createFileList())}\n                onReplaceItem={(_, index) =>\n                    setSelectedFiles(prevState => {\n                        if (!prevState) {\n                            return [];\n                        }\n\n                        return [\n                            ...prevState.slice(0, index),\n                            ...createFileList(1),\n                            ...prevState.slice(index + 1)\n                        ];\n                    })\n                }\n                onRemoveItem={item =>\n                    setSelectedFiles(prevState =>\n                        prevState?.filter(value => value.name !== item?.name)\n                    )\n                }\n                onEditItem={(item, i) => alert(`Editing ${item?.name} at position ${i}`)}\n            />\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof MultiFilePickerPrimitive>;\n\nexport const Default: Story = {\n    args: {\n        label: \"Add gallery files\"\n    }\n};\n\nexport const AreaType: Story = {\n    args: {\n        ...Default.args,\n        type: \"area\"\n    }\n};\n\nexport const AreaPrimaryVariant: Story = {\n    args: {\n        ...AreaType.args,\n        variant: \"primary\"\n    }\n};\n\nexport const AreaPrimaryVariantDisabled: Story = {\n    args: {\n        ...AreaPrimaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const AreaPrimaryVariantInvalid: Story = {\n    args: {\n        ...AreaPrimaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const AreaSecondaryVariant: Story = {\n    args: {\n        ...AreaType.args,\n        variant: \"secondary\"\n    }\n};\n\nexport const AreaSecondaryVariantDisabled: Story = {\n    args: {\n        ...AreaSecondaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const AreaSecondaryVariantInvalid: Story = {\n    args: {\n        ...AreaSecondaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const AreaGhostVariant: Story = {\n    args: {\n        ...AreaType.args,\n        variant: \"ghost\"\n    }\n};\n\nexport const AreaGhostVariantDisabled: Story = {\n    args: {\n        ...AreaGhostVariant.args,\n        disabled: true\n    }\n};\n\nexport const AreaGhostVariantInvalid: Story = {\n    args: {\n        ...AreaGhostVariant.args,\n        invalid: true\n    }\n};\n\nexport const AreaWithImagePreview: Story = {\n    args: {\n        ...AreaType.args,\n        renderFilePreview: props => <MultiFilePickerPrimitive.Preview.Image {...props} />\n    }\n};\n\nexport const AreaWithImagePreviewLight: Story = {\n    args: {\n        ...AreaWithImagePreview.args,\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.Image variant={\"light\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithImagePreviewBase: Story = {\n    args: {\n        ...AreaWithImagePreview.args,\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.Image variant={\"base\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithImagePreviewTransparent: Story = {\n    args: {\n        ...AreaWithImagePreview.args,\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.Image variant={\"transparent\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithRichItemPreview: Story = {\n    args: {\n        ...AreaType.args,\n        renderFilePreview: props => <MultiFilePickerPrimitive.Preview.RichItem {...props} />\n    }\n};\n\nexport const AreaWithRichItemPreviewLight: Story = {\n    args: {\n        ...AreaWithRichItemPreview.args,\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.RichItem variant={\"light\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithRichItemPreviewBase: Story = {\n    args: {\n        ...AreaWithRichItemPreview.args,\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.RichItem variant={\"base\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithRichItemPreviewTransparent: Story = {\n    args: {\n        ...AreaWithRichItemPreview.args,\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.RichItem variant={\"transparent\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithRichItemThumbnailPreview: Story = {\n    args: {\n        ...AreaType.args,\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.RichItem preview={\"thumbnail\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithRichItemFileTypePreview: Story = {\n    args: {\n        ...AreaType.args,\n        values: [\n            {\n                name: \"export.csv\",\n                url: \"export.csv\",\n                mimeType: \"text/csv\",\n                size: 100000\n            }\n        ],\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.RichItem preview={\"file-type\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithRichItemFileTypePlaceholder: Story = {\n    args: {\n        ...AreaType.args,\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.RichItem preview={\"placeholder\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithTextOnlyPreview: Story = {\n    args: {\n        ...AreaType.args,\n        renderFilePreview: props => <MultiFilePickerPrimitive.Preview.TextOnly {...props} />\n    }\n};\n\nexport const AreaWithTextOnlyPreviewLight: Story = {\n    args: {\n        ...AreaWithTextOnlyPreview.args,\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.TextOnly variant={\"light\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithTextOnlyPreviewBase: Story = {\n    args: {\n        ...AreaWithTextOnlyPreview.args,\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.TextOnly variant={\"base\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithTextOnlyPreviewTransparent: Story = {\n    args: {\n        ...AreaWithTextOnlyPreview.args,\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.TextOnly variant={\"transparent\"} {...props} />\n        )\n    }\n};\n\nexport const CompactType: Story = {\n    args: {\n        ...Default.args,\n        type: \"compact\"\n    }\n};\n\nexport const CompactPrimaryVariant: Story = {\n    args: {\n        ...CompactType.args,\n        variant: \"primary\"\n    }\n};\n\nexport const CompactPrimaryVariantDisabled: Story = {\n    args: {\n        ...CompactPrimaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const CompactPrimaryVariantInvalid: Story = {\n    args: {\n        ...CompactPrimaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const CompactSecondaryVariant: Story = {\n    args: {\n        ...CompactType.args,\n        variant: \"secondary\"\n    }\n};\n\nexport const CompactSecondaryVariantDisabled: Story = {\n    args: {\n        ...CompactSecondaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const CompactSecondaryVariantInvalid: Story = {\n    args: {\n        ...CompactSecondaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const CompactGhostVariant: Story = {\n    args: {\n        ...CompactType.args,\n        variant: \"ghost\"\n    }\n};\n\nexport const CompactGhostVariantDisabled: Story = {\n    args: {\n        ...CompactGhostVariant.args,\n        disabled: true\n    }\n};\n\nexport const CompactGhostVariantInvalid: Story = {\n    args: {\n        ...CompactGhostVariant.args,\n        invalid: true\n    }\n};\n\nexport const CompactWithTextOnlyPreviewSmall: Story = {\n    args: {\n        ...CompactType.args,\n        values: createFileList(50),\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.TextOnly {...props} small={true} />\n        )\n    }\n};\n"],"names":["getRandomNumber","min","max","Math","createFileList","size","Array","_","index","width","height","fileSize","meta","MultiFilePickerPrimitive","args","selectedFiles","setSelectedFiles","useState","prevState","item","value","i","alert","Default","AreaType","AreaPrimaryVariant","AreaPrimaryVariantDisabled","AreaPrimaryVariantInvalid","AreaSecondaryVariant","AreaSecondaryVariantDisabled","AreaSecondaryVariantInvalid","AreaGhostVariant","AreaGhostVariantDisabled","AreaGhostVariantInvalid","AreaWithImagePreview","props","AreaWithImagePreviewLight","AreaWithImagePreviewBase","AreaWithImagePreviewTransparent","AreaWithRichItemPreview","AreaWithRichItemPreviewLight","AreaWithRichItemPreviewBase","AreaWithRichItemPreviewTransparent","AreaWithRichItemThumbnailPreview","AreaWithRichItemFileTypePreview","AreaWithRichItemFileTypePlaceholder","AreaWithTextOnlyPreview","AreaWithTextOnlyPreviewLight","AreaWithTextOnlyPreviewBase","AreaWithTextOnlyPreviewTransparent","CompactType","CompactPrimaryVariant","CompactPrimaryVariantDisabled","CompactPrimaryVariantInvalid","CompactSecondaryVariant","CompactSecondaryVariantDisabled","CompactSecondaryVariantInvalid","CompactGhostVariant","CompactGhostVariantDisabled","CompactGhostVariantInvalid","CompactWithTextOnlyPreviewSmall"],"mappings":"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"}

package/MultiSelect/MultiSelect.stories.d.ts

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

package/MultiSelect/MultiSelect.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect/MultiSelect.stories.js","sources":["../../src/MultiSelect/MultiSelect.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { MultiSelect } from \"./MultiSelect.js\";\n\nconst defaultOptions = [\n    { label: \"Option 1\", value: \"option-1\" },\n    { label: \"Option 2\", value: \"option-2\" },\n    { label: \"Option 3\", value: \"option-3\" },\n    { label: \"Option 4\", value: \"option-4\" },\n    { label: \"Option 5\", value: \"option-5\" },\n    { label: \"Option 6\", value: \"option-6\" }\n];\n\nconst meta: Meta<typeof MultiSelect> = {\n    title: \"Components/Form/MultiSelect\",\n    component: MultiSelect,\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [value, setValue] = useState<string[]>(args.value ?? []);\n        return <MultiSelect {...args} value={value} onChange={setValue} />;\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof MultiSelect>;\n\nexport const Default: Story = {\n    args: {\n        options: defaultOptions\n    }\n};\n\nexport const WithLabel: Story = {\n    args: {\n        ...Default.args,\n        label: \"Label\"\n    }\n};\n\nexport const WithPreselected: Story = {\n    args: {\n        ...Default.args,\n        label: \"Label\",\n        value: [\"option-1\", \"option-2\", \"option-3\"]\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        ...Default.args,\n        label: \"Label\",\n        description: \"Select one or more options from the list.\"\n    }\n};\n\nexport const WithErrors: Story = {\n    args: {\n        ...Default.args,\n        label: \"Label\",\n        validation: {\n            isValid: false,\n            message: \"At least one option must be selected.\"\n        }\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        ...Default.args,\n        label: \"Label\",\n        disabled: true,\n        value: [\"option-1\", \"option-2\"]\n    }\n};\n\nexport const WithSelectionCount: Story = {\n    args: {\n        ...Default.args,\n        label: \"Label\",\n        value: [\"option-1\", \"option-2\", \"option-3\"],\n        showSelectionCount: true\n    }\n};\n\nexport const FullExample: Story = {\n    args: {\n        label: \"Label\",\n        description: \"Select one or more options from the list.\",\n        note: \"Note: Ensure your selection is accurate before proceeding.\",\n        required: true,\n        options: defaultOptions,\n        value: [\"option-1\", \"option-2\", \"option-3\"],\n        validation: {\n            isValid: false,\n            message: \"At least one option must be selected.\"\n        }\n    }\n};\n"],"names":["defaultOptions","meta","MultiSelect","args","value","setValue","useState","Default","WithLabel","WithPreselected","WithDescription","WithErrors","Disabled","WithSelectionCount","FullExample"],"mappings":";;AAIA,MAAMA,iBAAiB;IACnB;QAAE,OAAO;QAAY,OAAO;IAAW;IACvC;QAAE,OAAO;QAAY,OAAO;IAAW;IACvC;QAAE,OAAO;QAAY,OAAO;IAAW;IACvC;QAAE,OAAO;QAAY,OAAO;IAAW;IACvC;QAAE,OAAO;QAAY,OAAO;IAAW;IACvC;QAAE,OAAO;QAAY,OAAO;IAAW;CAC1C;AAED,MAAMC,OAAiC;IACnC,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;IACA,QAAQC,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAAmBH,KAAK,KAAK,IAAI,EAAE;QAC7D,OAAO,WAAP,GAAO,oBAACD,aAAWA;YAAE,GAAGC,IAAI;YAAE,OAAOC;YAAO,UAAUC;;IAC1D;AACJ;AAEA,4BAAeJ;AAGR,MAAMM,UAAiB;IAC1B,MAAM;QACF,SAASP;IACb;AACJ;AAEO,MAAMQ,YAAmB;IAC5B,MAAM;QACF,GAAGD,QAAQ,IAAI;QACf,OAAO;IACX;AACJ;AAEO,MAAME,kBAAyB;IAClC,MAAM;QACF,GAAGF,QAAQ,IAAI;QACf,OAAO;QACP,OAAO;YAAC;YAAY;YAAY;SAAW;IAC/C;AACJ;AAEO,MAAMG,kBAAyB;IAClC,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,OAAO;QACP,aAAa;IACjB;AACJ;AAEO,MAAMI,aAAoB;IAC7B,MAAM;QACF,GAAGJ,QAAQ,IAAI;QACf,OAAO;QACP,YAAY;YACR,SAAS;YACT,SAAS;QACb;IACJ;AACJ;AAEO,MAAMK,WAAkB;IAC3B,MAAM;QACF,GAAGL,QAAQ,IAAI;QACf,OAAO;QACP,UAAU;QACV,OAAO;YAAC;YAAY;SAAW;IACnC;AACJ;AAEO,MAAMM,qBAA4B;IACrC,MAAM;QACF,GAAGN,QAAQ,IAAI;QACf,OAAO;QACP,OAAO;YAAC;YAAY;YAAY;SAAW;QAC3C,oBAAoB;IACxB;AACJ;AAEO,MAAMO,cAAqB;IAC9B,MAAM;QACF,OAAO;QACP,aAAa;QACb,MAAM;QACN,UAAU;QACV,SAASd;QACT,OAAO;YAAC;YAAY;YAAY;SAAW;QAC3C,YAAY;YACR,SAAS;YACT,SAAS;QACb;IACJ;AACJ"}
+{"version":3,"file":"MultiSelect/MultiSelect.stories.js","sources":["../../src/MultiSelect/MultiSelect.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { MultiSelect } from \"./MultiSelect.js\";\n\nconst defaultOptions = [\n    { label: \"Option 1\", value: \"option-1\" },\n    { label: \"Option 2\", value: \"option-2\" },\n    { label: \"Option 3\", value: \"option-3\" },\n    { label: \"Option 4\", value: \"option-4\" },\n    { label: \"Option 5\", value: \"option-5\" },\n    { label: \"Option 6\", value: \"option-6\" }\n];\n\nconst meta: Meta<typeof MultiSelect> = {\n    title: \"Components/Form/MultiSelect\",\n    component: MultiSelect,\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [value, setValue] = useState<string[]>(args.value ?? []);\n        return <MultiSelect {...args} value={value} onChange={setValue} />;\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof MultiSelect>;\n\nexport const Default: Story = {\n    args: {\n        options: defaultOptions\n    }\n};\n\nexport const WithLabel: Story = {\n    args: {\n        ...Default.args,\n        label: \"Label\"\n    }\n};\n\nexport const WithPreselected: Story = {\n    args: {\n        ...Default.args,\n        label: \"Label\",\n        value: [\"option-1\", \"option-2\", \"option-3\"]\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        ...Default.args,\n        label: \"Label\",\n        description: \"Select one or more options from the list.\"\n    }\n};\n\nexport const WithErrors: Story = {\n    args: {\n        ...Default.args,\n        label: \"Label\",\n        validation: {\n            isValid: false,\n            message: \"At least one option must be selected.\"\n        }\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        ...Default.args,\n        label: \"Label\",\n        disabled: true,\n        value: [\"option-1\", \"option-2\"]\n    }\n};\n\nexport const WithSelectionCount: Story = {\n    args: {\n        ...Default.args,\n        label: \"Label\",\n        value: [\"option-1\", \"option-2\", \"option-3\"],\n        showSelectionCount: true\n    }\n};\n\nexport const FullExample: Story = {\n    args: {\n        label: \"Label\",\n        description: \"Select one or more options from the list.\",\n        note: \"Note: Ensure your selection is accurate before proceeding.\",\n        required: true,\n        options: defaultOptions,\n        value: [\"option-1\", \"option-2\", \"option-3\"],\n        validation: {\n            isValid: false,\n            message: \"At least one option must be selected.\"\n        }\n    }\n};\n"],"names":["defaultOptions","meta","MultiSelect","args","value","setValue","useState","Default","WithLabel","WithPreselected","WithDescription","WithErrors","Disabled","WithSelectionCount","FullExample"],"mappings":";;AAIA,MAAMA,iBAAiB;IACnB;QAAE,OAAO;QAAY,OAAO;IAAW;IACvC;QAAE,OAAO;QAAY,OAAO;IAAW;IACvC;QAAE,OAAO;QAAY,OAAO;IAAW;IACvC;QAAE,OAAO;QAAY,OAAO;IAAW;IACvC;QAAE,OAAO;QAAY,OAAO;IAAW;IACvC;QAAE,OAAO;QAAY,OAAO;IAAW;CAC1C;AAED,MAAMC,OAAiC;IACnC,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;IACA,QAAQC,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAAmBH,KAAK,KAAK,IAAI,EAAE;QAC7D,OAAO,WAAP,GAAO,oBAACD,aAAWA;YAAE,GAAGC,IAAI;YAAE,OAAOC;YAAO,UAAUC;;IAC1D;AACJ;AAEA,4BAAeJ;AAGR,MAAMM,UAAiB;IAC1B,MAAM;QACF,SAASP;IACb;AACJ;AAEO,MAAMQ,YAAmB;IAC5B,MAAM;QACF,GAAGD,QAAQ,IAAI;QACf,OAAO;IACX;AACJ;AAEO,MAAME,kBAAyB;IAClC,MAAM;QACF,GAAGF,QAAQ,IAAI;QACf,OAAO;QACP,OAAO;YAAC;YAAY;YAAY;SAAW;IAC/C;AACJ;AAEO,MAAMG,kBAAyB;IAClC,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,OAAO;QACP,aAAa;IACjB;AACJ;AAEO,MAAMI,aAAoB;IAC7B,MAAM;QACF,GAAGJ,QAAQ,IAAI;QACf,OAAO;QACP,YAAY;YACR,SAAS;YACT,SAAS;QACb;IACJ;AACJ;AAEO,MAAMK,WAAkB;IAC3B,MAAM;QACF,GAAGL,QAAQ,IAAI;QACf,OAAO;QACP,UAAU;QACV,OAAO;YAAC;YAAY;SAAW;IACnC;AACJ;AAEO,MAAMM,qBAA4B;IACrC,MAAM;QACF,GAAGN,QAAQ,IAAI;QACf,OAAO;QACP,OAAO;YAAC;YAAY;YAAY;SAAW;QAC3C,oBAAoB;IACxB;AACJ;AAEO,MAAMO,cAAqB;IAC9B,MAAM;QACF,OAAO;QACP,aAAa;QACb,MAAM;QACN,UAAU;QACV,SAASd;QACT,OAAO;YAAC;YAAY;YAAY;SAAW;QAC3C,YAAY;YACR,SAAS;YACT,SAAS;QACb;IACJ;AACJ"}

package/Popover/Popover.stories.d.ts

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

package/Popover/Popover.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover/Popover.stories.js","sources":["../../src/Popover/Popover.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { Popover } from \"./Popover.js\";\n\nconst meta: Meta<typeof Popover> = {\n    title: \"Components/Popover\",\n    component: Popover,\n    parameters: {\n        layout: \"padded\"\n    },\n    argTypes: {\n        align: {\n            control: \"select\",\n            options: [\"start\", \"center\", \"end\"]\n        },\n        side: {\n            control: \"select\",\n            options: [\"top\", \"bottom\", \"left\", \"right\"]\n        }\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-[#f4f4f4] flex items-center justify-center w-full h-[300px]\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Popover>;\n\nexport const Default: Story = {\n    args: {\n        trigger: <p>Popover trigger</p>,\n        content: (\n            <div className={\"w-[260px]\"}>\n                <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Morbi\n                lectus leo, dapibus vitae mollis dictum, vulputate eget lorem. Aliquam rutrum auctor\n                tempus.\n            </div>\n        )\n    }\n};\n\nexport const AccentVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"accent\"\n    }\n};\n\nexport const WithArrowAccentVariant: Story = {\n    args: {\n        ...AccentVariant.args,\n        arrow: true\n    }\n};\n\nexport const SubtleVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"subtle\"\n    },\n    decorators: [\n        Story => (\n            <div className=\"flex items-center justify-center bg-neutral-dark text-neutral-light w-full h-[300px]\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const WithArrowSubtleVariant: Story = {\n    args: {\n        variant: \"subtle\",\n        trigger: <p>Popover trigger</p>,\n        arrow: true,\n        content: (\n            <div className={\"w-[260px]\"}>\n                <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Morbi\n                lectus leo, dapibus vitae mollis dictum, vulputate eget lorem. Aliquam rutrum auctor\n                tempus.\n            </div>\n        )\n    },\n    decorators: SubtleVariant.decorators\n};\n\nexport const Documentation: Story = {\n    args: {\n        align: \"center\",\n        side: \"bottom\",\n        variant: \"subtle\",\n        arrow: false,\n        close: false,\n        trigger: <p>Popover trigger</p>,\n        content: (\n            <div className={\"w-[260px]\"}>\n                <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Morbi\n                lectus leo, dapibus vitae mollis dictum, vulputate eget lorem. Aliquam rutrum auctor\n                tempus.\n            </div>\n        )\n    },\n    argTypes: {\n        trigger: {\n            description:\n                \"The element that triggers the popover when clicked. Please refer to the example code for details.\"\n        },\n        content: {\n            description:\n                \"The content to display inside the popover. Please refer to the example code for details.\"\n        },\n        side: {\n            description: \"The side of the trigger where the popover appears.\",\n            control: \"select\",\n            options: [\"top\", \"right\", \"bottom\", \"left\"]\n        },\n        align: {\n            description: \"The alignment of the popover relative to the trigger.\",\n            control: \"select\",\n            options: [\"start\", \"center\", \"end\"]\n        },\n        variant: {\n            description: \"The visual style variant of the popover.\",\n            control: \"select\",\n            options: [\"accent\", \"subtle\"]\n        },\n        arrow: {\n            description: \"Whether to show an arrow pointing to the trigger.\",\n            control: \"boolean\"\n        },\n        close: {\n            description: \"Whether to show a close button inside the popover.\",\n            control: \"boolean\"\n        }\n    }\n};\n"],"names":["meta","Popover","Story","Default","AccentVariant","WithArrowAccentVariant","SubtleVariant","WithArrowSubtleVariant","Documentation"],"mappings":";;AAIA,MAAMA,OAA6B;IAC/B,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;IACA,UAAU;QACN,OAAO;YACH,SAAS;YACT,SAAS;gBAAC;gBAAS;gBAAU;aAAM;QACvC;QACA,MAAM;YACF,SAAS;YACT,SAAS;gBAAC;gBAAO;gBAAU;gBAAQ;aAAQ;QAC/C;IACJ;IACA,YAAY;QACRC,CAAAA,QAAAA,WAAAA,GACI,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;AACL;AAEA,wBAAeF;AAIR,MAAMG,UAAiB;IAC1B,MAAM;QACF,SAAS,WAAT,GAAS,oBAAC,WAAE;QACZ,SAAS,WAAT,GACI,oBAAC;YAAI,WAAW;yBACZ,oBAAC,gBAAO,+BAAmC;IAKvD;AACJ;AAEO,MAAMC,gBAAuB;IAChC,MAAM;QACF,GAAGD,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAME,yBAAgC;IACzC,MAAM;QACF,GAAGD,cAAc,IAAI;QACrB,OAAO;IACX;AACJ;AAEO,MAAME,gBAAuB;IAChC,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,SAAS;IACb;IACA,YAAY;QACRD,CAAAA,QAAAA,WAAAA,GACI,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;AACL;AAEO,MAAMK,yBAAgC;IACzC,MAAM;QACF,SAAS;QACT,SAAS,WAAT,GAAS,oBAAC,WAAE;QACZ,OAAO;QACP,SAAS,WAAT,GACI,oBAAC;YAAI,WAAW;yBACZ,oBAAC,gBAAO,+BAAmC;IAKvD;IACA,YAAYD,cAAc,UAAU;AACxC;AAEO,MAAME,gBAAuB;IAChC,MAAM;QACF,OAAO;QACP,MAAM;QACN,SAAS;QACT,OAAO;QACP,OAAO;QACP,SAAS,WAAT,GAAS,oBAAC,WAAE;QACZ,SAAS,WAAT,GACI,oBAAC;YAAI,WAAW;yBACZ,oBAAC,gBAAO,+BAAmC;IAKvD;IACA,UAAU;QACN,SAAS;YACL,aACI;QACR;QACA,SAAS;YACL,aACI;QACR;QACA,MAAM;YACF,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAO;gBAAS;gBAAU;aAAO;QAC/C;QACA,OAAO;YACH,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAS;gBAAU;aAAM;QACvC;QACA,SAAS;YACL,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAU;aAAS;QACjC;QACA,OAAO;YACH,aAAa;YACb,SAAS;QACb;QACA,OAAO;YACH,aAAa;YACb,SAAS;QACb;IACJ;AACJ"}
+{"version":3,"file":"Popover/Popover.stories.js","sources":["../../src/Popover/Popover.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { Popover } from \"./Popover.js\";\n\nconst meta: Meta<typeof Popover> = {\n    title: \"Components/Popover\",\n    component: Popover,\n    parameters: {\n        layout: \"padded\"\n    },\n    argTypes: {\n        align: {\n            control: \"select\",\n            options: [\"start\", \"center\", \"end\"]\n        },\n        side: {\n            control: \"select\",\n            options: [\"top\", \"bottom\", \"left\", \"right\"]\n        }\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-[#f4f4f4] flex items-center justify-center w-full h-[300px]\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Popover>;\n\nexport const Default: Story = {\n    args: {\n        trigger: <p>Popover trigger</p>,\n        content: (\n            <div className={\"w-[260px]\"}>\n                <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Morbi\n                lectus leo, dapibus vitae mollis dictum, vulputate eget lorem. Aliquam rutrum auctor\n                tempus.\n            </div>\n        )\n    }\n};\n\nexport const AccentVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"accent\"\n    }\n};\n\nexport const WithArrowAccentVariant: Story = {\n    args: {\n        ...AccentVariant.args,\n        arrow: true\n    }\n};\n\nexport const SubtleVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"subtle\"\n    },\n    decorators: [\n        Story => (\n            <div className=\"flex items-center justify-center bg-neutral-dark text-neutral-light w-full h-[300px]\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const WithArrowSubtleVariant: Story = {\n    args: {\n        variant: \"subtle\",\n        trigger: <p>Popover trigger</p>,\n        arrow: true,\n        content: (\n            <div className={\"w-[260px]\"}>\n                <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Morbi\n                lectus leo, dapibus vitae mollis dictum, vulputate eget lorem. Aliquam rutrum auctor\n                tempus.\n            </div>\n        )\n    },\n    decorators: SubtleVariant.decorators\n};\n\nexport const Documentation: Story = {\n    args: {\n        align: \"center\",\n        side: \"bottom\",\n        variant: \"subtle\",\n        arrow: false,\n        close: false,\n        trigger: <p>Popover trigger</p>,\n        content: (\n            <div className={\"w-[260px]\"}>\n                <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Morbi\n                lectus leo, dapibus vitae mollis dictum, vulputate eget lorem. Aliquam rutrum auctor\n                tempus.\n            </div>\n        )\n    },\n    argTypes: {\n        trigger: {\n            description:\n                \"The element that triggers the popover when clicked. Please refer to the example code for details.\"\n        },\n        content: {\n            description:\n                \"The content to display inside the popover. Please refer to the example code for details.\"\n        },\n        side: {\n            description: \"The side of the trigger where the popover appears.\",\n            control: \"select\",\n            options: [\"top\", \"right\", \"bottom\", \"left\"]\n        },\n        align: {\n            description: \"The alignment of the popover relative to the trigger.\",\n            control: \"select\",\n            options: [\"start\", \"center\", \"end\"]\n        },\n        variant: {\n            description: \"The visual style variant of the popover.\",\n            control: \"select\",\n            options: [\"accent\", \"subtle\"]\n        },\n        arrow: {\n            description: \"Whether to show an arrow pointing to the trigger.\",\n            control: \"boolean\"\n        },\n        close: {\n            description: \"Whether to show a close button inside the popover.\",\n            control: \"boolean\"\n        }\n    }\n};\n"],"names":["meta","Popover","Story","Default","AccentVariant","WithArrowAccentVariant","SubtleVariant","WithArrowSubtleVariant","Documentation"],"mappings":";;AAIA,MAAMA,OAA6B;IAC/B,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;IACA,UAAU;QACN,OAAO;YACH,SAAS;YACT,SAAS;gBAAC;gBAAS;gBAAU;aAAM;QACvC;QACA,MAAM;YACF,SAAS;YACT,SAAS;gBAAC;gBAAO;gBAAU;gBAAQ;aAAQ;QAC/C;IACJ;IACA,YAAY;QACRC,CAAAA,QAAAA,WAAAA,GACI,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;AACL;AAEA,wBAAeF;AAIR,MAAMG,UAAiB;IAC1B,MAAM;QACF,SAAS,WAAT,GAAS,oBAAC,WAAE;QACZ,SAAS,WAAT,GACI,oBAAC;YAAI,WAAW;yBACZ,oBAAC,gBAAO,+BAAmC;IAKvD;AACJ;AAEO,MAAMC,gBAAuB;IAChC,MAAM;QACF,GAAGD,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAME,yBAAgC;IACzC,MAAM;QACF,GAAGD,cAAc,IAAI;QACrB,OAAO;IACX;AACJ;AAEO,MAAME,gBAAuB;IAChC,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,SAAS;IACb;IACA,YAAY;QACRD,CAAAA,QAAAA,WAAAA,GACI,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;AACL;AAEO,MAAMK,yBAAgC;IACzC,MAAM;QACF,SAAS;QACT,SAAS,WAAT,GAAS,oBAAC,WAAE;QACZ,OAAO;QACP,SAAS,WAAT,GACI,oBAAC;YAAI,WAAW;yBACZ,oBAAC,gBAAO,+BAAmC;IAKvD;IACA,YAAYD,cAAc,UAAU;AACxC;AAEO,MAAME,gBAAuB;IAChC,MAAM;QACF,OAAO;QACP,MAAM;QACN,SAAS;QACT,OAAO;QACP,OAAO;QACP,SAAS,WAAT,GAAS,oBAAC,WAAE;QACZ,SAAS,WAAT,GACI,oBAAC;YAAI,WAAW;yBACZ,oBAAC,gBAAO,+BAAmC;IAKvD;IACA,UAAU;QACN,SAAS;YACL,aACI;QACR;QACA,SAAS;YACL,aACI;QACR;QACA,MAAM;YACF,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAO;gBAAS;gBAAU;aAAO;QAC/C;QACA,OAAO;YACH,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAS;gBAAU;aAAM;QACvC;QACA,SAAS;YACL,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAU;aAAS;QACjC;QACA,OAAO;YACH,aAAa;YACb,SAAS;QACb;QACA,OAAO;YACH,aAAa;YACb,SAAS;QACb;IACJ;AACJ"}

package/ProgressBar/ProgressBar.stories.d.ts

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

package/ProgressBar/ProgressBar.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar/ProgressBar.stories.js","sources":["../../src/ProgressBar/ProgressBar.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { ProgressBar } from \"./ProgressBar.js\";\n\nconst meta: Meta<typeof ProgressBar> = {\n    title: \"Components/ProgressBar\",\n    component: ProgressBar,\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        value: 50\n    },\n    argTypes: {\n        value: {\n            description: \"Current progress value (0-100)\",\n            control: { type: \"number\", min: 0, max: 100 }\n        },\n        max: {\n            description: \"Maximum value for the progress bar. Defaults to 100.\",\n            control: { type: \"number\", min: 1 }\n        },\n        valuePosition: {\n            description:\n                \"Position of the value label relative to the progress bar. Can be 'start', 'end',  or 'both'. Defaults to 'undefined'.\",\n            control: {\n                type: \"select\",\n                options: [\"start\", \"end\", \"both\"]\n            }\n        }\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof ProgressBar>;\n\nexport const Default: Story = {\n    args: {\n        value: 50\n    }\n};\n\nexport const WithCustomMaxValue: Story = {\n    args: {\n        ...Default.args,\n        max: 200\n    }\n};\n\nexport const WithValuePositionStart: Story = {\n    args: {\n        ...Default.args,\n        valuePosition: \"start\"\n    }\n};\n\nexport const WithValuePositionEnd: Story = {\n    args: {\n        ...Default.args,\n        valuePosition: \"end\"\n    }\n};\n\nexport const WithValuePositionBoth: Story = {\n    args: {\n        ...Default.args,\n        valuePosition: \"both\"\n    }\n};\n\nexport const WithGetValueLabel: Story = {\n    args: {\n        ...Default.args,\n        getValueLabel: (value: number) => `${value} mb`\n    }\n};\n\nexport const WithControlledValue: Story = {\n    args: {\n        value: 0\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n\n        useEffect(() => {\n            const interval = setInterval(() => {\n                setValue((prevValue = 0) => {\n                    const value = Number(prevValue);\n\n                    if (value === 100) {\n                        return value;\n                    }\n                    return value + 5;\n                });\n            }, 100);\n\n            return () => clearInterval(interval);\n        }, []);\n\n        return <ProgressBar {...args} value={value} />;\n    }\n};\n"],"names":["meta","ProgressBar","Documentation","Default","WithCustomMaxValue","WithValuePositionStart","WithValuePositionEnd","WithValuePositionBoth","WithGetValueLabel","value","WithControlledValue","args","setValue","useState","useEffect","interval","setInterval","prevValue","Number","clearInterval"],"mappings":";;AAIA,MAAMA,OAAiC;IACnC,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;AACJ;AAEO,MAAMC,gBAAuB;IAChC,MAAM;QACF,OAAO;IACX;IACA,UAAU;QACN,OAAO;YACH,aAAa;YACb,SAAS;gBAAE,MAAM;gBAAU,KAAK;gBAAG,KAAK;YAAI;QAChD;QACA,KAAK;YACD,aAAa;YACb,SAAS;gBAAE,MAAM;gBAAU,KAAK;YAAE;QACtC;QACA,eAAe;YACX,aACI;YACJ,SAAS;gBACL,MAAM;gBACN,SAAS;oBAAC;oBAAS;oBAAO;iBAAO;YACrC;QACJ;IACJ;AACJ;AAEA,4BAAeF;AAGR,MAAMG,UAAiB;IAC1B,MAAM;QACF,OAAO;IACX;AACJ;AAEO,MAAMC,qBAA4B;IACrC,MAAM;QACF,GAAGD,QAAQ,IAAI;QACf,KAAK;IACT;AACJ;AAEO,MAAME,yBAAgC;IACzC,MAAM;QACF,GAAGF,QAAQ,IAAI;QACf,eAAe;IACnB;AACJ;AAEO,MAAMG,uBAA8B;IACvC,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,eAAe;IACnB;AACJ;AAEO,MAAMI,wBAA+B;IACxC,MAAM;QACF,GAAGJ,QAAQ,IAAI;QACf,eAAe;IACnB;AACJ;AAEO,MAAMK,oBAA2B;IACpC,MAAM;QACF,GAAGL,QAAQ,IAAI;QACf,eAAe,CAACM,QAAkB,GAAGA,MAAM,GAAG,CAAC;IACnD;AACJ;AAEO,MAAMC,sBAA6B;IACtC,MAAM;QACF,OAAO;IACX;IACA,QAAQC,CAAAA;QACJ,MAAM,CAACF,OAAOG,SAAS,GAAGC,SAASF,KAAK,KAAK;QAE7CG,UAAU;YACN,MAAMC,WAAWC,YAAY;gBACzBJ,SAAS,CAACK,YAAY,CAAC;oBACnB,MAAMR,QAAQS,OAAOD;oBAErB,IAAIR,AAAU,QAAVA,OACA,OAAOA;oBAEX,OAAOA,QAAQ;gBACnB;YACJ,GAAG;YAEH,OAAO,IAAMU,cAAcJ;QAC/B,GAAG,EAAE;QAEL,OAAO,WAAP,GAAO,oBAACd,aAAWA;YAAE,GAAGU,IAAI;YAAE,OAAOF;;IACzC;AACJ"}
+{"version":3,"file":"ProgressBar/ProgressBar.stories.js","sources":["../../src/ProgressBar/ProgressBar.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { ProgressBar } from \"./ProgressBar.js\";\n\nconst meta: Meta<typeof ProgressBar> = {\n    title: \"Components/ProgressBar\",\n    component: ProgressBar,\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        value: 50\n    },\n    argTypes: {\n        value: {\n            description: \"Current progress value (0-100)\",\n            control: { type: \"number\", min: 0, max: 100 }\n        },\n        max: {\n            description: \"Maximum value for the progress bar. Defaults to 100.\",\n            control: { type: \"number\", min: 1 }\n        },\n        valuePosition: {\n            description:\n                \"Position of the value label relative to the progress bar. Can be 'start', 'end',  or 'both'. Defaults to 'undefined'.\",\n            control: {\n                type: \"select\",\n                options: [\"start\", \"end\", \"both\"]\n            }\n        }\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof ProgressBar>;\n\nexport const Default: Story = {\n    args: {\n        value: 50\n    }\n};\n\nexport const WithCustomMaxValue: Story = {\n    args: {\n        ...Default.args,\n        max: 200\n    }\n};\n\nexport const WithValuePositionStart: Story = {\n    args: {\n        ...Default.args,\n        valuePosition: \"start\"\n    }\n};\n\nexport const WithValuePositionEnd: Story = {\n    args: {\n        ...Default.args,\n        valuePosition: \"end\"\n    }\n};\n\nexport const WithValuePositionBoth: Story = {\n    args: {\n        ...Default.args,\n        valuePosition: \"both\"\n    }\n};\n\nexport const WithGetValueLabel: Story = {\n    args: {\n        ...Default.args,\n        getValueLabel: (value: number) => `${value} mb`\n    }\n};\n\nexport const WithControlledValue: Story = {\n    args: {\n        value: 0\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n\n        useEffect(() => {\n            const interval = setInterval(() => {\n                setValue((prevValue = 0) => {\n                    const value = Number(prevValue);\n\n                    if (value === 100) {\n                        return value;\n                    }\n                    return value + 5;\n                });\n            }, 100);\n\n            return () => clearInterval(interval);\n        }, []);\n\n        return <ProgressBar {...args} value={value} />;\n    }\n};\n"],"names":["meta","ProgressBar","Documentation","Default","WithCustomMaxValue","WithValuePositionStart","WithValuePositionEnd","WithValuePositionBoth","WithGetValueLabel","value","WithControlledValue","args","setValue","useState","useEffect","interval","setInterval","prevValue","Number","clearInterval"],"mappings":";;AAIA,MAAMA,OAAiC;IACnC,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;AACJ;AAEO,MAAMC,gBAAuB;IAChC,MAAM;QACF,OAAO;IACX;IACA,UAAU;QACN,OAAO;YACH,aAAa;YACb,SAAS;gBAAE,MAAM;gBAAU,KAAK;gBAAG,KAAK;YAAI;QAChD;QACA,KAAK;YACD,aAAa;YACb,SAAS;gBAAE,MAAM;gBAAU,KAAK;YAAE;QACtC;QACA,eAAe;YACX,aACI;YACJ,SAAS;gBACL,MAAM;gBACN,SAAS;oBAAC;oBAAS;oBAAO;iBAAO;YACrC;QACJ;IACJ;AACJ;AAEA,4BAAeF;AAGR,MAAMG,UAAiB;IAC1B,MAAM;QACF,OAAO;IACX;AACJ;AAEO,MAAMC,qBAA4B;IACrC,MAAM;QACF,GAAGD,QAAQ,IAAI;QACf,KAAK;IACT;AACJ;AAEO,MAAME,yBAAgC;IACzC,MAAM;QACF,GAAGF,QAAQ,IAAI;QACf,eAAe;IACnB;AACJ;AAEO,MAAMG,uBAA8B;IACvC,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,eAAe;IACnB;AACJ;AAEO,MAAMI,wBAA+B;IACxC,MAAM;QACF,GAAGJ,QAAQ,IAAI;QACf,eAAe;IACnB;AACJ;AAEO,MAAMK,oBAA2B;IACpC,MAAM;QACF,GAAGL,QAAQ,IAAI;QACf,eAAe,CAACM,QAAkB,GAAGA,MAAM,GAAG,CAAC;IACnD;AACJ;AAEO,MAAMC,sBAA6B;IACtC,MAAM;QACF,OAAO;IACX;IACA,QAAQC,CAAAA;QACJ,MAAM,CAACF,OAAOG,SAAS,GAAGC,SAASF,KAAK,KAAK;QAE7CG,UAAU;YACN,MAAMC,WAAWC,YAAY;gBACzBJ,SAAS,CAACK,YAAY,CAAC;oBACnB,MAAMR,QAAQS,OAAOD;oBAErB,IAAIR,AAAU,QAAVA,OACA,OAAOA;oBAEX,OAAOA,QAAQ;gBACnB;YACJ,GAAG;YAEH,OAAO,IAAMU,cAAcJ;QAC/B,GAAG,EAAE;QAEL,OAAO,WAAP,GAAO,oBAACd,aAAWA;YAAE,GAAGU,IAAI;YAAE,OAAOF;;IACzC;AACJ"}

package/RadioGroup/RadioGroup.stories.d.ts

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