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

package/Heading/Heading.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Heading/Heading.stories.js","sources":["../../src/Heading/Heading.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react-webpack5\";\n\nimport { Heading } from \"./Heading.js\";\n\nconst meta: Meta<typeof Heading> = {\n    title: \"Components/Heading\",\n    component: Heading,\n    argTypes: {\n        level: {\n            control: {\n                type: \"number\",\n                min: 1,\n                max: 6\n            }\n        }\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Heading>;\n\nexport const Heading1: Story = {\n    args: {\n        level: 1,\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const Heading2: Story = {\n    args: {\n        level: 2,\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const Heading3: Story = {\n    args: {\n        level: 3,\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const Heading4: Story = {\n    args: {\n        level: 4,\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const Heading5: Story = {\n    args: {\n        level: 5,\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const Heading6: Story = {\n    args: {\n        level: 6,\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const As: Story = {\n    args: {\n        level: 2,\n        as: \"h1\",\n        children: \"This is visually a Heading level 2, but semantically an h1\"\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        level: 1,\n        children: \"This is a heading\",\n        as: undefined,\n        className: undefined\n    },\n    argTypes: {\n        level: {\n            description: \"The heading level (1-6) which determines the size and semantic meaning.\",\n            control: \"select\",\n            options: [1, 2, 3, 4, 5, 6]\n        },\n        as: {\n            description:\n                \"The HTML tag to render, overriding the default tag based on level. This is useful when you want to maintain semantic structure but want different visual styling.\",\n            control: \"select\",\n            options: [\"none\", \"h1\", \"h2\", \"h3\", \"h4\", \"h5\", \"h6\"]\n        },\n        children: {\n            description: \"The content of the heading.\",\n            control: \"text\"\n        },\n        className: {\n            description:\n                \"Additional CSS classes to apply to the heading. You can pass multiple classes, separated by commas or spaces.\"\n        }\n    }\n};\n"],"names":["meta","Heading","Heading1","Heading2","Heading3","Heading4","Heading5","Heading6","As","Documentation","undefined"],"mappings":";AAIA,MAAMA,OAA6B;IAC/B,OAAO;IACP,WAAWC;IACX,UAAU;QACN,OAAO;YACH,SAAS;gBACL,MAAM;gBACN,KAAK;gBACL,KAAK;YACT;QACJ;IACJ;AACJ;AAEA,wBAAeD;AAGR,MAAME,WAAkB;IAC3B,MAAM;QACF,OAAO;QACP,UACI;IACR;AACJ;AAEO,MAAMC,WAAkB;IAC3B,MAAM;QACF,OAAO;QACP,UACI;IACR;AACJ;AAEO,MAAMC,WAAkB;IAC3B,MAAM;QACF,OAAO;QACP,UACI;IACR;AACJ;AAEO,MAAMC,WAAkB;IAC3B,MAAM;QACF,OAAO;QACP,UACI;IACR;AACJ;AAEO,MAAMC,WAAkB;IAC3B,MAAM;QACF,OAAO;QACP,UACI;IACR;AACJ;AAEO,MAAMC,WAAkB;IAC3B,MAAM;QACF,OAAO;QACP,UACI;IACR;AACJ;AAEO,MAAMC,KAAY;IACrB,MAAM;QACF,OAAO;QACP,IAAI;QACJ,UAAU;IACd;AACJ;AAEO,MAAMC,gBAAuB;IAChC,MAAM;QACF,OAAO;QACP,UAAU;QACV,IAAIC;QACJ,WAAWA;IACf;IACA,UAAU;QACN,OAAO;YACH,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAG;gBAAG;gBAAG;gBAAG;gBAAG;aAAE;QAC/B;QACA,IAAI;YACA,aACI;YACJ,SAAS;YACT,SAAS;gBAAC;gBAAQ;gBAAM;gBAAM;gBAAM;gBAAM;gBAAM;aAAK;QACzD;QACA,UAAU;YACN,aAAa;YACb,SAAS;QACb;QACA,WAAW;YACP,aACI;QACR;IACJ;AACJ"}
+{"version":3,"file":"Heading/Heading.stories.js","sources":["../../src/Heading/Heading.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\n\nimport { Heading } from \"./Heading.js\";\n\nconst meta: Meta<typeof Heading> = {\n    title: \"Components/Heading\",\n    component: Heading,\n    argTypes: {\n        level: {\n            control: {\n                type: \"number\",\n                min: 1,\n                max: 6\n            }\n        }\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Heading>;\n\nexport const Heading1: Story = {\n    args: {\n        level: 1,\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const Heading2: Story = {\n    args: {\n        level: 2,\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const Heading3: Story = {\n    args: {\n        level: 3,\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const Heading4: Story = {\n    args: {\n        level: 4,\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const Heading5: Story = {\n    args: {\n        level: 5,\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const Heading6: Story = {\n    args: {\n        level: 6,\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const As: Story = {\n    args: {\n        level: 2,\n        as: \"h1\",\n        children: \"This is visually a Heading level 2, but semantically an h1\"\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        level: 1,\n        children: \"This is a heading\",\n        as: undefined,\n        className: undefined\n    },\n    argTypes: {\n        level: {\n            description: \"The heading level (1-6) which determines the size and semantic meaning.\",\n            control: \"select\",\n            options: [1, 2, 3, 4, 5, 6]\n        },\n        as: {\n            description:\n                \"The HTML tag to render, overriding the default tag based on level. This is useful when you want to maintain semantic structure but want different visual styling.\",\n            control: \"select\",\n            options: [\"none\", \"h1\", \"h2\", \"h3\", \"h4\", \"h5\", \"h6\"]\n        },\n        children: {\n            description: \"The content of the heading.\",\n            control: \"text\"\n        },\n        className: {\n            description:\n                \"Additional CSS classes to apply to the heading. You can pass multiple classes, separated by commas or spaces.\"\n        }\n    }\n};\n"],"names":["meta","Heading","Heading1","Heading2","Heading3","Heading4","Heading5","Heading6","As","Documentation","undefined"],"mappings":";AAIA,MAAMA,OAA6B;IAC/B,OAAO;IACP,WAAWC;IACX,UAAU;QACN,OAAO;YACH,SAAS;gBACL,MAAM;gBACN,KAAK;gBACL,KAAK;YACT;QACJ;IACJ;AACJ;AAEA,wBAAeD;AAGR,MAAME,WAAkB;IAC3B,MAAM;QACF,OAAO;QACP,UACI;IACR;AACJ;AAEO,MAAMC,WAAkB;IAC3B,MAAM;QACF,OAAO;QACP,UACI;IACR;AACJ;AAEO,MAAMC,WAAkB;IAC3B,MAAM;QACF,OAAO;QACP,UACI;IACR;AACJ;AAEO,MAAMC,WAAkB;IAC3B,MAAM;QACF,OAAO;QACP,UACI;IACR;AACJ;AAEO,MAAMC,WAAkB;IAC3B,MAAM;QACF,OAAO;QACP,UACI;IACR;AACJ;AAEO,MAAMC,WAAkB;IAC3B,MAAM;QACF,OAAO;QACP,UACI;IACR;AACJ;AAEO,MAAMC,KAAY;IACrB,MAAM;QACF,OAAO;QACP,IAAI;QACJ,UAAU;IACd;AACJ;AAEO,MAAMC,gBAAuB;IAChC,MAAM;QACF,OAAO;QACP,UAAU;QACV,IAAIC;QACJ,WAAWA;IACf;IACA,UAAU;QACN,OAAO;YACH,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAG;gBAAG;gBAAG;gBAAG;gBAAG;aAAE;QAC/B;QACA,IAAI;YACA,aACI;YACJ,SAAS;YACT,SAAS;gBAAC;gBAAQ;gBAAM;gBAAM;gBAAM;gBAAM;gBAAM;aAAK;QACzD;QACA,UAAU;YACN,aAAa;YACb,SAAS;QACb;QACA,WAAW;YACP,aACI;QACR;IACJ;AACJ"}

package/Icon/Icon.stories.d.ts

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

package/Icon/Icon.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon/Icon.stories.js","sources":["../../src/Icon/Icon.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { ReactComponent as XIcon } from \"@webiny/icons/close.svg\";\nimport { Icon } from \"./Icon.js\";\n\nconst meta: Meta<typeof Icon> = {\n    title: \"Components/Icon\",\n    component: Icon\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Icon>;\n\nexport const Default: Story = {\n    args: {\n        icon: <XIcon />,\n        label: \"This is an icon\",\n        size: \"md\",\n        color: \"accent\"\n    },\n    argTypes: {\n        size: {\n            control: \"select\",\n            options: [\"xs\", \"sm\", \"md\", \"lg\"]\n        },\n        color: {\n            control: \"select\",\n            options: [\n                \"accent\",\n                \"neutral-light\",\n                \"neutral-strong\",\n                \"neutral-strong-transparent\",\n                \"neutral-base\",\n                \"neutral-negative\",\n                \"inherit\"\n            ]\n        }\n    }\n};\n\nexport const ColorInherit: Story = {\n    decorators: [\n        Story => (\n            <div className=\"fill-success\">\n                <Story />\n            </div>\n        )\n    ],\n    args: {\n        ...Default.args,\n        color: \"inherit\"\n    }\n};\n\nexport const ColorAccent: Story = {\n    args: {\n        ...Default.args,\n        color: \"accent\"\n    }\n};\n\nexport const ColorNeutralLight: Story = {\n    args: {\n        ...Default.args,\n        color: \"neutral-light\"\n    }\n};\n\nexport const ColorNeutralStrong: Story = {\n    args: {\n        ...Default.args,\n        color: \"neutral-strong\"\n    }\n};\n\nexport const ColorNeutralStrongTransparent: Story = {\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-disabled p-3xl rounded-md\">\n                <Story />\n            </div>\n        )\n    ],\n    args: {\n        ...Default.args,\n        color: \"neutral-strong-transparent\"\n    }\n};\n\nexport const ColorNeutralBase: Story = {\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark p-3xl rounded-md\">\n                <Story />\n            </div>\n        )\n    ],\n    args: {\n        ...Default.args,\n        color: \"neutral-base\"\n    }\n};\n\nexport const ColorNeutralNegative: Story = {\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark p-3xl rounded-md\">\n                <Story />\n            </div>\n        )\n    ],\n    args: {\n        ...Default.args,\n        color: \"neutral-negative\"\n    }\n};\n\nexport const SizeXs: Story = {\n    args: {\n        ...Default.args,\n        size: \"xs\"\n    }\n};\n\nexport const SizeSm: Story = {\n    args: {\n        ...Default.args,\n        size: \"sm\"\n    }\n};\n\nexport const SizeMd: Story = {\n    args: {\n        ...Default.args,\n        size: \"md\"\n    }\n};\n\nexport const SizeLg: Story = {\n    args: {\n        ...Default.args,\n        size: \"lg\"\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        icon: <XIcon />,\n        label: \"Close icon\",\n        size: \"md\",\n        color: \"accent\",\n        className: \"\"\n    },\n    argTypes: {\n        icon: {\n            description:\n                \"The SVG icon component to be rendered. Please refer to the example code for details.\"\n        },\n        label: {\n            description: \"Accessible label for the icon (for screen readers)\",\n            control: \"text\"\n        },\n        size: {\n            description: \"The size of the icon\",\n            control: \"select\",\n            options: [\"xs\", \"sm\", \"md\", \"lg\"]\n        },\n        color: {\n            description: \"The color of the icon\",\n            control: \"select\",\n            options: [\n                \"inherit\",\n                \"accent\",\n                \"neutral-base\",\n                \"neutral-light\",\n                \"neutral-strong\",\n                \"neutral-strong-transparent\",\n                \"neutral-negative\"\n            ]\n        },\n        className: {\n            description:\n                \"Additional CSS classes to apply to the icon. You can pass multiple classes, separated by commas or spaces.\",\n            control: \"text\"\n        }\n    }\n};\n"],"names":["meta","Icon","Default","XIcon","ColorInherit","Story","ColorAccent","ColorNeutralLight","ColorNeutralStrong","ColorNeutralStrongTransparent","ColorNeutralBase","ColorNeutralNegative","SizeXs","SizeSm","SizeMd","SizeLg","Documentation"],"mappings":";;;AAKA,MAAMA,OAA0B;IAC5B,OAAO;IACP,WAAWC;AACf;AAEA,qBAAeD;AAIR,MAAME,UAAiB;IAC1B,MAAM;QACF,MAAM,WAAN,GAAM,oBAACC,gBAAKA;QACZ,OAAO;QACP,MAAM;QACN,OAAO;IACX;IACA,UAAU;QACN,MAAM;YACF,SAAS;YACT,SAAS;gBAAC;gBAAM;gBAAM;gBAAM;aAAK;QACrC;QACA,OAAO;YACH,SAAS;YACT,SAAS;gBACL;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;aACH;QACL;IACJ;AACJ;AAEO,MAAMC,eAAsB;IAC/B,YAAY;QACRC,CAAAA,QAAAA,WAAAA,GACI,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;IACD,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,OAAO;IACX;AACJ;AAEO,MAAMI,cAAqB;IAC9B,MAAM;QACF,GAAGJ,QAAQ,IAAI;QACf,OAAO;IACX;AACJ;AAEO,MAAMK,oBAA2B;IACpC,MAAM;QACF,GAAGL,QAAQ,IAAI;QACf,OAAO;IACX;AACJ;AAEO,MAAMM,qBAA4B;IACrC,MAAM;QACF,GAAGN,QAAQ,IAAI;QACf,OAAO;IACX;AACJ;AAEO,MAAMO,gCAAuC;IAChD,YAAY;QACRJ,CAAAA,QAAAA,WAAAA,GACI,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;IACD,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,OAAO;IACX;AACJ;AAEO,MAAMQ,mBAA0B;IACnC,YAAY;QACRL,CAAAA,QAAAA,WAAAA,GACI,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;IACD,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,OAAO;IACX;AACJ;AAEO,MAAMS,uBAA8B;IACvC,YAAY;QACRN,CAAAA,QAAAA,WAAAA,GACI,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;IACD,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,OAAO;IACX;AACJ;AAEO,MAAMU,SAAgB;IACzB,MAAM;QACF,GAAGV,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMW,SAAgB;IACzB,MAAM;QACF,GAAGX,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMY,SAAgB;IACzB,MAAM;QACF,GAAGZ,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMa,SAAgB;IACzB,MAAM;QACF,GAAGb,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMc,gBAAuB;IAChC,MAAM;QACF,MAAM,WAAN,GAAM,oBAACb,gBAAKA;QACZ,OAAO;QACP,MAAM;QACN,OAAO;QACP,WAAW;IACf;IACA,UAAU;QACN,MAAM;YACF,aACI;QACR;QACA,OAAO;YACH,aAAa;YACb,SAAS;QACb;QACA,MAAM;YACF,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAM;gBAAM;gBAAM;aAAK;QACrC;QACA,OAAO;YACH,aAAa;YACb,SAAS;YACT,SAAS;gBACL;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;aACH;QACL;QACA,WAAW;YACP,aACI;YACJ,SAAS;QACb;IACJ;AACJ"}
+{"version":3,"file":"Icon/Icon.stories.js","sources":["../../src/Icon/Icon.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { ReactComponent as XIcon } from \"@webiny/icons/close.svg\";\nimport { Icon } from \"./Icon.js\";\n\nconst meta: Meta<typeof Icon> = {\n    title: \"Components/Icon\",\n    component: Icon\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Icon>;\n\nexport const Default: Story = {\n    args: {\n        icon: <XIcon />,\n        label: \"This is an icon\",\n        size: \"md\",\n        color: \"accent\"\n    },\n    argTypes: {\n        size: {\n            control: \"select\",\n            options: [\"xs\", \"sm\", \"md\", \"lg\"]\n        },\n        color: {\n            control: \"select\",\n            options: [\n                \"accent\",\n                \"neutral-light\",\n                \"neutral-strong\",\n                \"neutral-strong-transparent\",\n                \"neutral-base\",\n                \"neutral-negative\",\n                \"inherit\"\n            ]\n        }\n    }\n};\n\nexport const ColorInherit: Story = {\n    decorators: [\n        Story => (\n            <div className=\"fill-success\">\n                <Story />\n            </div>\n        )\n    ],\n    args: {\n        ...Default.args,\n        color: \"inherit\"\n    }\n};\n\nexport const ColorAccent: Story = {\n    args: {\n        ...Default.args,\n        color: \"accent\"\n    }\n};\n\nexport const ColorNeutralLight: Story = {\n    args: {\n        ...Default.args,\n        color: \"neutral-light\"\n    }\n};\n\nexport const ColorNeutralStrong: Story = {\n    args: {\n        ...Default.args,\n        color: \"neutral-strong\"\n    }\n};\n\nexport const ColorNeutralStrongTransparent: Story = {\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-disabled p-3xl rounded-md\">\n                <Story />\n            </div>\n        )\n    ],\n    args: {\n        ...Default.args,\n        color: \"neutral-strong-transparent\"\n    }\n};\n\nexport const ColorNeutralBase: Story = {\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark p-3xl rounded-md\">\n                <Story />\n            </div>\n        )\n    ],\n    args: {\n        ...Default.args,\n        color: \"neutral-base\"\n    }\n};\n\nexport const ColorNeutralNegative: Story = {\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark p-3xl rounded-md\">\n                <Story />\n            </div>\n        )\n    ],\n    args: {\n        ...Default.args,\n        color: \"neutral-negative\"\n    }\n};\n\nexport const SizeXs: Story = {\n    args: {\n        ...Default.args,\n        size: \"xs\"\n    }\n};\n\nexport const SizeSm: Story = {\n    args: {\n        ...Default.args,\n        size: \"sm\"\n    }\n};\n\nexport const SizeMd: Story = {\n    args: {\n        ...Default.args,\n        size: \"md\"\n    }\n};\n\nexport const SizeLg: Story = {\n    args: {\n        ...Default.args,\n        size: \"lg\"\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        icon: <XIcon />,\n        label: \"Close icon\",\n        size: \"md\",\n        color: \"accent\",\n        className: \"\"\n    },\n    argTypes: {\n        icon: {\n            description:\n                \"The SVG icon component to be rendered. Please refer to the example code for details.\"\n        },\n        label: {\n            description: \"Accessible label for the icon (for screen readers)\",\n            control: \"text\"\n        },\n        size: {\n            description: \"The size of the icon\",\n            control: \"select\",\n            options: [\"xs\", \"sm\", \"md\", \"lg\"]\n        },\n        color: {\n            description: \"The color of the icon\",\n            control: \"select\",\n            options: [\n                \"inherit\",\n                \"accent\",\n                \"neutral-base\",\n                \"neutral-light\",\n                \"neutral-strong\",\n                \"neutral-strong-transparent\",\n                \"neutral-negative\"\n            ]\n        },\n        className: {\n            description:\n                \"Additional CSS classes to apply to the icon. You can pass multiple classes, separated by commas or spaces.\",\n            control: \"text\"\n        }\n    }\n};\n"],"names":["meta","Icon","Default","XIcon","ColorInherit","Story","ColorAccent","ColorNeutralLight","ColorNeutralStrong","ColorNeutralStrongTransparent","ColorNeutralBase","ColorNeutralNegative","SizeXs","SizeSm","SizeMd","SizeLg","Documentation"],"mappings":";;;AAKA,MAAMA,OAA0B;IAC5B,OAAO;IACP,WAAWC;AACf;AAEA,qBAAeD;AAIR,MAAME,UAAiB;IAC1B,MAAM;QACF,MAAM,WAAN,GAAM,oBAACC,gBAAKA;QACZ,OAAO;QACP,MAAM;QACN,OAAO;IACX;IACA,UAAU;QACN,MAAM;YACF,SAAS;YACT,SAAS;gBAAC;gBAAM;gBAAM;gBAAM;aAAK;QACrC;QACA,OAAO;YACH,SAAS;YACT,SAAS;gBACL;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;aACH;QACL;IACJ;AACJ;AAEO,MAAMC,eAAsB;IAC/B,YAAY;QACRC,CAAAA,QAAAA,WAAAA,GACI,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;IACD,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,OAAO;IACX;AACJ;AAEO,MAAMI,cAAqB;IAC9B,MAAM;QACF,GAAGJ,QAAQ,IAAI;QACf,OAAO;IACX;AACJ;AAEO,MAAMK,oBAA2B;IACpC,MAAM;QACF,GAAGL,QAAQ,IAAI;QACf,OAAO;IACX;AACJ;AAEO,MAAMM,qBAA4B;IACrC,MAAM;QACF,GAAGN,QAAQ,IAAI;QACf,OAAO;IACX;AACJ;AAEO,MAAMO,gCAAuC;IAChD,YAAY;QACRJ,CAAAA,QAAAA,WAAAA,GACI,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;IACD,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,OAAO;IACX;AACJ;AAEO,MAAMQ,mBAA0B;IACnC,YAAY;QACRL,CAAAA,QAAAA,WAAAA,GACI,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;IACD,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,OAAO;IACX;AACJ;AAEO,MAAMS,uBAA8B;IACvC,YAAY;QACRN,CAAAA,QAAAA,WAAAA,GACI,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;IACD,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,OAAO;IACX;AACJ;AAEO,MAAMU,SAAgB;IACzB,MAAM;QACF,GAAGV,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMW,SAAgB;IACzB,MAAM;QACF,GAAGX,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMY,SAAgB;IACzB,MAAM;QACF,GAAGZ,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMa,SAAgB;IACzB,MAAM;QACF,GAAGb,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMc,gBAAuB;IAChC,MAAM;QACF,MAAM,WAAN,GAAM,oBAACb,gBAAKA;QACZ,OAAO;QACP,MAAM;QACN,OAAO;QACP,WAAW;IACf;IACA,UAAU;QACN,MAAM;YACF,aACI;QACR;QACA,OAAO;YACH,aAAa;YACb,SAAS;QACb;QACA,MAAM;YACF,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAM;gBAAM;gBAAM;aAAK;QACrC;QACA,OAAO;YACH,aAAa;YACb,SAAS;YACT,SAAS;gBACL;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;aACH;QACL;QACA,WAAW;YACP,aACI;YACJ,SAAS;QACb;IACJ;AACJ"}

package/IconPicker/IconPicker.stories.d.ts

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

package/IconPicker/IconPicker.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconPicker/IconPicker.stories.js","sources":["../../src/IconPicker/IconPicker.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { library } from \"@fortawesome/fontawesome-svg-core\";\nimport { fas } from \"@fortawesome/free-solid-svg-icons\";\nimport { IconPicker } from \"~/IconPicker/index.js\";\n\nconst meta: Meta<typeof IconPicker> = {\n    title: \"Components/Form/IconPicker\",\n    component: IconPicker,\n    argTypes: {\n        onChange: { action: \"onChange\" },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return <IconPicker {...args} value={value} onChange={setValue} />;\n    }\n};\n\nlibrary.add(fas);\n\nexport default meta;\ntype Story = StoryObj<typeof IconPicker>;\n\nexport const Default: Story = {\n    args: {\n        icons: [\n            { prefix: \"fas\", name: \"trash-restore-alt\" },\n            { prefix: \"fas\", name: \"trash-can-arrow-up\" },\n            { prefix: \"fas\", name: \"naira-sign\" },\n            { prefix: \"fas\", name: \"cart-arrow-down\" },\n            { prefix: \"fas\", name: \"walkie-talkie\" },\n            { prefix: \"fas\", name: \"file-edit\" },\n            { prefix: \"fas\", name: \"file-pen\" },\n            { prefix: \"fas\", name: \"receipt\" },\n            { prefix: \"fas\", name: \"pen-square\" },\n            { prefix: \"fas\", name: \"pencil-square\" },\n            { prefix: \"fas\", name: \"square-pen\" },\n            { prefix: \"fas\", name: \"suitcase-rolling\" },\n            { prefix: \"fas\", name: \"person-circle-exclamation\" },\n            { prefix: \"fas\", name: \"chevron-down\" },\n            { prefix: \"fas\", name: \"battery\" },\n            { prefix: \"fas\", name: \"battery-5\" },\n            { prefix: \"fas\", name: \"battery-full\" },\n            { prefix: \"fas\", name: \"skull-crossbones\" },\n            { prefix: \"fas\", name: \"code-compare\" },\n            { prefix: \"fas\", name: \"list-dots\" },\n            { prefix: \"fas\", name: \"list-ul\" },\n            { prefix: \"fas\", name: \"school-lock\" },\n            { prefix: \"fas\", name: \"tower-cell\" },\n            { prefix: \"fas\", name: \"long-arrow-alt-down\" },\n            { prefix: \"fas\", name: \"down-long\" },\n            { prefix: \"fas\", name: \"ranking-star\" },\n            { prefix: \"fas\", name: \"chess-king\" },\n            { prefix: \"fas\", name: \"person-harassing\" },\n            { prefix: \"fas\", name: \"brazilian-real-sign\" },\n            { prefix: \"fas\", name: \"landmark-alt\" },\n            { prefix: \"fas\", name: \"landmark-dome\" },\n            { prefix: \"fas\", name: \"arrow-up\" },\n            { prefix: \"fas\", name: \"television\" },\n            { prefix: \"fas\", name: \"tv-alt\" },\n            { prefix: \"fas\", name: \"tv\" },\n            { prefix: \"fas\", name: \"shrimp\" },\n            { prefix: \"fas\", name: \"tasks\" },\n            { prefix: \"fas\", name: \"list-check\" },\n            { prefix: \"fas\", name: \"jug-detergent\" },\n            { prefix: \"fas\", name: \"user-circle\" },\n            { prefix: \"fas\", name: \"circle-user\" },\n            { prefix: \"fas\", name: \"user-shield\" },\n            { prefix: \"fas\", name: \"wind\" },\n            { prefix: \"fas\", name: \"car-crash\" },\n            { prefix: \"fas\", name: \"car-burst\" },\n            { prefix: \"fas\", name: \"y\" },\n            { prefix: \"fas\", name: \"snowboarding\" },\n            { prefix: \"fas\", name: \"person-snowboarding\" },\n            { prefix: \"fas\", name: \"shipping-fast\" },\n            { prefix: \"fas\", name: \"truck-fast\" }\n        ]\n    }\n};\n\nexport const WithLabel: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const WithLabelRequired: 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 [value, setValue] = useState(args.value || null);\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        // Update value when args.value changes\n        useEffect(() => {\n            setValue(args.value || null);\n        }, [args.value]);\n\n        const handleChange = (newValue: any) => {\n            setValue(newValue);\n\n            // Simple required validation\n            if (args.required && !newValue) {\n                setValidation({ isValid: false, message: \"Please select an icon\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        };\n\n        // Validate on required change or value change\n        useEffect(() => {\n            if (args.required && !value) {\n                setValidation({ isValid: false, message: \"Please select an icon\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        }, [args.required, value]);\n\n        return (\n            <IconPicker\n                {...args}\n                value={value}\n                onChange={handleChange}\n                validation={validation}\n                required={args.required}\n            />\n        );\n    },\n    args: {\n        label: \"Select an Icon\",\n        required: true,\n        disabled: false,\n        description: \"Choose an icon for your button\",\n        note: \"Note: The selected icon will be displayed on your button\",\n        icons: [\n            { prefix: \"fas\", name: \"trash-restore-alt\" },\n            { prefix: \"fas\", name: \"file-pen\" },\n            { prefix: \"fas\", name: \"receipt\" },\n            { prefix: \"fas\", name: \"user-circle\" },\n            { prefix: \"fas\", name: \"circle-user\" }\n        ],\n        value: null,\n        validation: undefined\n    },\n    argTypes: {\n        label: {\n            description: \"Label text for the icon picker\",\n            control: \"text\"\n        },\n        required: {\n            description: \"Makes the field required when set to true\",\n            control: \"boolean\"\n        },\n        disabled: {\n            description: \"Disables the icon picker when set to true\",\n            control: \"boolean\"\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        icons: {\n            description: \"Array of available icons with prefix and name properties\",\n            control: \"object\"\n        },\n        value: {\n            description: \"The selected icon value (in format 'prefix/name')\"\n        },\n        validation: {\n            description:\n                \"Object containing validation state and message. Please refer to the example code for details on usage.\"\n        },\n        onChange: {\n            description: \"Function called when an icon is selected\"\n        }\n    }\n};\n"],"names":["meta","IconPicker","args","value","setValue","useState","library","fas","Default","WithLabel","WithLabelRequired","WithDescription","WithNotes","WithErrors","Disabled","FullExample","Documentation","validation","setValidation","useEffect","handleChange","newValue","undefined"],"mappings":"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"}
+{"version":3,"file":"IconPicker/IconPicker.stories.js","sources":["../../src/IconPicker/IconPicker.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { library } from \"@fortawesome/fontawesome-svg-core\";\nimport { fas } from \"@fortawesome/free-solid-svg-icons\";\nimport { IconPicker } from \"~/IconPicker/index.js\";\n\nconst meta: Meta<typeof IconPicker> = {\n    title: \"Components/Form/IconPicker\",\n    component: IconPicker,\n    argTypes: {\n        onChange: { action: \"onChange\" },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return <IconPicker {...args} value={value} onChange={setValue} />;\n    }\n};\n\nlibrary.add(fas);\n\nexport default meta;\ntype Story = StoryObj<typeof IconPicker>;\n\nexport const Default: Story = {\n    args: {\n        icons: [\n            { prefix: \"fas\", name: \"trash-restore-alt\" },\n            { prefix: \"fas\", name: \"trash-can-arrow-up\" },\n            { prefix: \"fas\", name: \"naira-sign\" },\n            { prefix: \"fas\", name: \"cart-arrow-down\" },\n            { prefix: \"fas\", name: \"walkie-talkie\" },\n            { prefix: \"fas\", name: \"file-edit\" },\n            { prefix: \"fas\", name: \"file-pen\" },\n            { prefix: \"fas\", name: \"receipt\" },\n            { prefix: \"fas\", name: \"pen-square\" },\n            { prefix: \"fas\", name: \"pencil-square\" },\n            { prefix: \"fas\", name: \"square-pen\" },\n            { prefix: \"fas\", name: \"suitcase-rolling\" },\n            { prefix: \"fas\", name: \"person-circle-exclamation\" },\n            { prefix: \"fas\", name: \"chevron-down\" },\n            { prefix: \"fas\", name: \"battery\" },\n            { prefix: \"fas\", name: \"battery-5\" },\n            { prefix: \"fas\", name: \"battery-full\" },\n            { prefix: \"fas\", name: \"skull-crossbones\" },\n            { prefix: \"fas\", name: \"code-compare\" },\n            { prefix: \"fas\", name: \"list-dots\" },\n            { prefix: \"fas\", name: \"list-ul\" },\n            { prefix: \"fas\", name: \"school-lock\" },\n            { prefix: \"fas\", name: \"tower-cell\" },\n            { prefix: \"fas\", name: \"long-arrow-alt-down\" },\n            { prefix: \"fas\", name: \"down-long\" },\n            { prefix: \"fas\", name: \"ranking-star\" },\n            { prefix: \"fas\", name: \"chess-king\" },\n            { prefix: \"fas\", name: \"person-harassing\" },\n            { prefix: \"fas\", name: \"brazilian-real-sign\" },\n            { prefix: \"fas\", name: \"landmark-alt\" },\n            { prefix: \"fas\", name: \"landmark-dome\" },\n            { prefix: \"fas\", name: \"arrow-up\" },\n            { prefix: \"fas\", name: \"television\" },\n            { prefix: \"fas\", name: \"tv-alt\" },\n            { prefix: \"fas\", name: \"tv\" },\n            { prefix: \"fas\", name: \"shrimp\" },\n            { prefix: \"fas\", name: \"tasks\" },\n            { prefix: \"fas\", name: \"list-check\" },\n            { prefix: \"fas\", name: \"jug-detergent\" },\n            { prefix: \"fas\", name: \"user-circle\" },\n            { prefix: \"fas\", name: \"circle-user\" },\n            { prefix: \"fas\", name: \"user-shield\" },\n            { prefix: \"fas\", name: \"wind\" },\n            { prefix: \"fas\", name: \"car-crash\" },\n            { prefix: \"fas\", name: \"car-burst\" },\n            { prefix: \"fas\", name: \"y\" },\n            { prefix: \"fas\", name: \"snowboarding\" },\n            { prefix: \"fas\", name: \"person-snowboarding\" },\n            { prefix: \"fas\", name: \"shipping-fast\" },\n            { prefix: \"fas\", name: \"truck-fast\" }\n        ]\n    }\n};\n\nexport const WithLabel: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const WithLabelRequired: 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 [value, setValue] = useState(args.value || null);\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        // Update value when args.value changes\n        useEffect(() => {\n            setValue(args.value || null);\n        }, [args.value]);\n\n        const handleChange = (newValue: any) => {\n            setValue(newValue);\n\n            // Simple required validation\n            if (args.required && !newValue) {\n                setValidation({ isValid: false, message: \"Please select an icon\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        };\n\n        // Validate on required change or value change\n        useEffect(() => {\n            if (args.required && !value) {\n                setValidation({ isValid: false, message: \"Please select an icon\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        }, [args.required, value]);\n\n        return (\n            <IconPicker\n                {...args}\n                value={value}\n                onChange={handleChange}\n                validation={validation}\n                required={args.required}\n            />\n        );\n    },\n    args: {\n        label: \"Select an Icon\",\n        required: true,\n        disabled: false,\n        description: \"Choose an icon for your button\",\n        note: \"Note: The selected icon will be displayed on your button\",\n        icons: [\n            { prefix: \"fas\", name: \"trash-restore-alt\" },\n            { prefix: \"fas\", name: \"file-pen\" },\n            { prefix: \"fas\", name: \"receipt\" },\n            { prefix: \"fas\", name: \"user-circle\" },\n            { prefix: \"fas\", name: \"circle-user\" }\n        ],\n        value: null,\n        validation: undefined\n    },\n    argTypes: {\n        label: {\n            description: \"Label text for the icon picker\",\n            control: \"text\"\n        },\n        required: {\n            description: \"Makes the field required when set to true\",\n            control: \"boolean\"\n        },\n        disabled: {\n            description: \"Disables the icon picker when set to true\",\n            control: \"boolean\"\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        icons: {\n            description: \"Array of available icons with prefix and name properties\",\n            control: \"object\"\n        },\n        value: {\n            description: \"The selected icon value (in format 'prefix/name')\"\n        },\n        validation: {\n            description:\n                \"Object containing validation state and message. Please refer to the example code for details on usage.\"\n        },\n        onChange: {\n            description: \"Function called when an icon is selected\"\n        }\n    }\n};\n"],"names":["meta","IconPicker","args","value","setValue","useState","library","fas","Default","WithLabel","WithLabelRequired","WithDescription","WithNotes","WithErrors","Disabled","FullExample","Documentation","validation","setValidation","useEffect","handleChange","newValue","undefined"],"mappings":"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"}

package/IconPicker/primitives/IconPickerPrimitive.stories.d.ts

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

package/IconPicker/primitives/IconPickerPrimitive.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconPicker/primitives/IconPickerPrimitive.stories.js","sources":["../../../src/IconPicker/primitives/IconPickerPrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { library } from \"@fortawesome/fontawesome-svg-core\";\nimport { fas } from \"@fortawesome/free-solid-svg-icons\";\nimport { IconPickerPrimitive } from \"./IconPickerPrimitive.js\";\n\nconst meta: Meta<typeof IconPickerPrimitive> = {\n    title: \"Components/Form Primitives/IconPicker\",\n    component: IconPickerPrimitive,\n    argTypes: {\n        onChange: { action: \"onChange\" }\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return (\n            <div className={\"w-full\"}>\n                <IconPickerPrimitive {...args} value={value} onChange={setValue} />\n                <div className={\"mt-4 text-center\"}>\n                    Current selected value: <pre>{value}</pre>\n                </div>\n            </div>\n        );\n    },\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nlibrary.add(fas);\n\nexport default meta;\ntype Story = StoryObj<typeof IconPickerPrimitive>;\n\nexport const Default: Story = {\n    args: {\n        icons: [\n            { prefix: \"fas\", name: \"trash-restore-alt\" },\n            { prefix: \"fas\", name: \"trash-can-arrow-up\" },\n            { prefix: \"fas\", name: \"naira-sign\" },\n            { prefix: \"fas\", name: \"cart-arrow-down\" },\n            { prefix: \"fas\", name: \"walkie-talkie\" },\n            { prefix: \"fas\", name: \"file-edit\" },\n            { prefix: \"fas\", name: \"file-pen\" },\n            { prefix: \"fas\", name: \"receipt\" },\n            { prefix: \"fas\", name: \"pen-square\" },\n            { prefix: \"fas\", name: \"pencil-square\" },\n            { prefix: \"fas\", name: \"square-pen\" },\n            { prefix: \"fas\", name: \"suitcase-rolling\" },\n            { prefix: \"fas\", name: \"person-circle-exclamation\" },\n            { prefix: \"fas\", name: \"chevron-down\" },\n            { prefix: \"fas\", name: \"battery\" },\n            { prefix: \"fas\", name: \"battery-5\" },\n            { prefix: \"fas\", name: \"battery-full\" },\n            { prefix: \"fas\", name: \"skull-crossbones\" },\n            { prefix: \"fas\", name: \"code-compare\" },\n            { prefix: \"fas\", name: \"list-dots\" },\n            { prefix: \"fas\", name: \"list-ul\" },\n            { prefix: \"fas\", name: \"school-lock\" },\n            { prefix: \"fas\", name: \"tower-cell\" },\n            { prefix: \"fas\", name: \"long-arrow-alt-down\" },\n            { prefix: \"fas\", name: \"down-long\" },\n            { prefix: \"fas\", name: \"ranking-star\" },\n            { prefix: \"fas\", name: \"chess-king\" },\n            { prefix: \"fas\", name: \"person-harassing\" },\n            { prefix: \"fas\", name: \"brazilian-real-sign\" },\n            { prefix: \"fas\", name: \"landmark-alt\" },\n            { prefix: \"fas\", name: \"landmark-dome\" },\n            { prefix: \"fas\", name: \"arrow-up\" },\n            { prefix: \"fas\", name: \"television\" },\n            { prefix: \"fas\", name: \"tv-alt\" },\n            { prefix: \"fas\", name: \"tv\" },\n            { prefix: \"fas\", name: \"shrimp\" },\n            { prefix: \"fas\", name: \"tasks\" },\n            { prefix: \"fas\", name: \"list-check\" },\n            { prefix: \"fas\", name: \"jug-detergent\" },\n            { prefix: \"fas\", name: \"user-circle\" },\n            { prefix: \"fas\", name: \"circle-user\" },\n            { prefix: \"fas\", name: \"user-shield\" },\n            { prefix: \"fas\", name: \"wind\" },\n            { prefix: \"fas\", name: \"car-crash\" },\n            { prefix: \"fas\", name: \"car-burst\" },\n            { prefix: \"fas\", name: \"y\" },\n            { prefix: \"fas\", name: \"snowboarding\" },\n            { prefix: \"fas\", name: \"person-snowboarding\" },\n            { prefix: \"fas\", name: \"shipping-fast\" },\n            { prefix: \"fas\", name: \"truck-fast\" }\n        ]\n    }\n};\n\nexport const WithDefaultValue: Story = {\n    args: {\n        ...Default.args,\n        value: \"fas/panorama\"\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 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        ...Default.args,\n        variant: \"secondary\"\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        ...Default.args,\n        variant: \"ghost\"\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"],"names":["meta","IconPickerPrimitive","args","value","setValue","useState","library","fas","Default","WithDefaultValue","MediumSize","LargeSize","ExtraLargeSize","PrimaryVariant","PrimaryVariantDisabled","PrimaryVariantInvalid","SecondaryVariant","SecondaryVariantDisabled","SecondaryVariantInvalid","GhostVariant","GhostVariantDisabled","GhostVariantInvalid"],"mappings":"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"}
+{"version":3,"file":"IconPicker/primitives/IconPickerPrimitive.stories.js","sources":["../../../src/IconPicker/primitives/IconPickerPrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { library } from \"@fortawesome/fontawesome-svg-core\";\nimport { fas } from \"@fortawesome/free-solid-svg-icons\";\nimport { IconPickerPrimitive } from \"./IconPickerPrimitive.js\";\n\nconst meta: Meta<typeof IconPickerPrimitive> = {\n    title: \"Components/Form Primitives/IconPicker\",\n    component: IconPickerPrimitive,\n    argTypes: {\n        onChange: { action: \"onChange\" }\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return (\n            <div className={\"w-full\"}>\n                <IconPickerPrimitive {...args} value={value} onChange={setValue} />\n                <div className={\"mt-4 text-center\"}>\n                    Current selected value: <pre>{value}</pre>\n                </div>\n            </div>\n        );\n    },\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nlibrary.add(fas);\n\nexport default meta;\ntype Story = StoryObj<typeof IconPickerPrimitive>;\n\nexport const Default: Story = {\n    args: {\n        icons: [\n            { prefix: \"fas\", name: \"trash-restore-alt\" },\n            { prefix: \"fas\", name: \"trash-can-arrow-up\" },\n            { prefix: \"fas\", name: \"naira-sign\" },\n            { prefix: \"fas\", name: \"cart-arrow-down\" },\n            { prefix: \"fas\", name: \"walkie-talkie\" },\n            { prefix: \"fas\", name: \"file-edit\" },\n            { prefix: \"fas\", name: \"file-pen\" },\n            { prefix: \"fas\", name: \"receipt\" },\n            { prefix: \"fas\", name: \"pen-square\" },\n            { prefix: \"fas\", name: \"pencil-square\" },\n            { prefix: \"fas\", name: \"square-pen\" },\n            { prefix: \"fas\", name: \"suitcase-rolling\" },\n            { prefix: \"fas\", name: \"person-circle-exclamation\" },\n            { prefix: \"fas\", name: \"chevron-down\" },\n            { prefix: \"fas\", name: \"battery\" },\n            { prefix: \"fas\", name: \"battery-5\" },\n            { prefix: \"fas\", name: \"battery-full\" },\n            { prefix: \"fas\", name: \"skull-crossbones\" },\n            { prefix: \"fas\", name: \"code-compare\" },\n            { prefix: \"fas\", name: \"list-dots\" },\n            { prefix: \"fas\", name: \"list-ul\" },\n            { prefix: \"fas\", name: \"school-lock\" },\n            { prefix: \"fas\", name: \"tower-cell\" },\n            { prefix: \"fas\", name: \"long-arrow-alt-down\" },\n            { prefix: \"fas\", name: \"down-long\" },\n            { prefix: \"fas\", name: \"ranking-star\" },\n            { prefix: \"fas\", name: \"chess-king\" },\n            { prefix: \"fas\", name: \"person-harassing\" },\n            { prefix: \"fas\", name: \"brazilian-real-sign\" },\n            { prefix: \"fas\", name: \"landmark-alt\" },\n            { prefix: \"fas\", name: \"landmark-dome\" },\n            { prefix: \"fas\", name: \"arrow-up\" },\n            { prefix: \"fas\", name: \"television\" },\n            { prefix: \"fas\", name: \"tv-alt\" },\n            { prefix: \"fas\", name: \"tv\" },\n            { prefix: \"fas\", name: \"shrimp\" },\n            { prefix: \"fas\", name: \"tasks\" },\n            { prefix: \"fas\", name: \"list-check\" },\n            { prefix: \"fas\", name: \"jug-detergent\" },\n            { prefix: \"fas\", name: \"user-circle\" },\n            { prefix: \"fas\", name: \"circle-user\" },\n            { prefix: \"fas\", name: \"user-shield\" },\n            { prefix: \"fas\", name: \"wind\" },\n            { prefix: \"fas\", name: \"car-crash\" },\n            { prefix: \"fas\", name: \"car-burst\" },\n            { prefix: \"fas\", name: \"y\" },\n            { prefix: \"fas\", name: \"snowboarding\" },\n            { prefix: \"fas\", name: \"person-snowboarding\" },\n            { prefix: \"fas\", name: \"shipping-fast\" },\n            { prefix: \"fas\", name: \"truck-fast\" }\n        ]\n    }\n};\n\nexport const WithDefaultValue: Story = {\n    args: {\n        ...Default.args,\n        value: \"fas/panorama\"\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 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        ...Default.args,\n        variant: \"secondary\"\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        ...Default.args,\n        variant: \"ghost\"\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"],"names":["meta","IconPickerPrimitive","args","value","setValue","useState","library","fas","Default","WithDefaultValue","MediumSize","LargeSize","ExtraLargeSize","PrimaryVariant","PrimaryVariantDisabled","PrimaryVariantInvalid","SecondaryVariant","SecondaryVariantDisabled","SecondaryVariantInvalid","GhostVariant","GhostVariantDisabled","GhostVariantInvalid"],"mappings":"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"}

package/Input/Input.stories.d.ts

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

package/Input/Input.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input/Input.stories.js","sources":["../../src/Input/Input.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { Input } from \"~/Input/index.js\";\n\nconst meta: Meta<typeof Input> = {\n    title: \"Components/Form/Input\",\n    component: Input,\n    argTypes: {\n        onChange: { action: \"onChange\" },\n        type: {\n            control: \"select\",\n            options: [\n                \"text\",\n                \"number\",\n                \"email\",\n                \"password\",\n                \"tel\",\n                \"url\",\n                \"search\",\n                \"date\",\n                \"datetime-local\",\n                \"month\",\n                \"week\",\n                \"time\",\n                \"color\",\n                \"file\",\n                \"checkbox\",\n                \"radio\",\n                \"range\",\n                \"hidden\",\n                \"button\",\n                \"submit\",\n                \"reset\",\n                \"image\"\n            ],\n            defaultValue: \"text\"\n        },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Input>;\n\nexport const Default: Story = {};\n\nexport const WithLabel: Story = {\n    args: {\n        label: \"Any field label\"\n    }\n};\n\nexport const WithLabelRequired: Story = {\n    args: {\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const WithNotes: Story = {\n    args: {\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const WithErrors: Story = {\n    args: {\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const WithValidateFunction: Story = {\n    render: args => {\n        const [value, setValue] = useState(\"\");\n        const [validation, setValidation] = useState<any>({ isValid: true, message: undefined });\n\n        const validate = async () => {\n            // Simulate API call delay\n            await new Promise(resolve => setTimeout(resolve, 500));\n\n            // Example validation: check if email already exists\n            if (value.includes(\"exists@\")) {\n                setValidation({ isValid: false, message: \"This email is already registered\" });\n            } else {\n                setValidation({ isValid: true, message: undefined });\n            }\n        };\n\n        return (\n            <Input\n                {...args}\n                type=\"email\"\n                label=\"Email\"\n                placeholder=\"Enter your email\"\n                value={value}\n                onChange={newValue => setValue(newValue)}\n                validate={validate}\n                validation={validation}\n            />\n        );\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 [value, setValue] = useState(\"\");\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        const handleValidation = () => {\n            if (args.required && !value.trim()) {\n                setValidation({ isValid: false, message: \"This field is required\" });\n            } else if (args.minLength && value.trim().length < args.minLength) {\n                setValidation({\n                    isValid: false,\n                    message: `Must be at least ${args.minLength} characters long`\n                });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        };\n\n        return (\n            <Input\n                {...args}\n                value={value}\n                onChange={newValue => setValue(newValue)}\n                validation={validation}\n                onBlur={handleValidation}\n                onEnter={handleValidation}\n            />\n        );\n    },\n    args: {\n        type: \"text\",\n        size: \"lg\",\n        variant: \"primary\",\n        label: \"Full Name\",\n        description: \"Enter your full name as it appears on your ID\",\n        note: \"This will be used for official documentation\",\n        placeholder: \"Enter your full name\",\n        required: true,\n        disabled: false,\n        startIcon: undefined,\n        endIcon: undefined,\n        minLength: 3,\n        maxLength: undefined,\n        onChange: undefined,\n        onBlur: undefined,\n        onEnter: undefined,\n        validation: undefined,\n        validate: undefined\n    },\n    argTypes: {\n        type: {\n            description: \"HTML input type attribute\",\n            control: \"select\",\n            options: [\n                \"text\",\n                \"number\",\n                \"email\",\n                \"password\",\n                \"tel\",\n                \"url\",\n                \"search\",\n                \"date\",\n                \"datetime-local\",\n                \"month\",\n                \"week\",\n                \"time\",\n                \"color\",\n                \"file\"\n            ],\n            defaultValue: \"text\"\n        },\n        size: {\n            description: \"Input field size\",\n            control: \"select\",\n            options: [\"md\", \"lg\", \"xl\"],\n            defaultValue: \"lg\"\n        },\n        variant: {\n            description: \"Input field style variant\",\n            control: \"select\",\n            options: [\"primary\", \"secondary\", \"ghost\", \"ghost-negative\"],\n            defaultValue: \"primary\"\n        },\n        label: {\n            description: \"Label text displayed above the input\",\n            control: \"text\"\n        },\n        description: {\n            description: \"Helper text displayed below the label\",\n            control: \"text\"\n        },\n        note: {\n            description: \"Additional note displayed below the input\",\n            control: \"text\"\n        },\n        placeholder: {\n            description: \"Placeholder text shown when input is empty\",\n            control: \"text\"\n        },\n        required: {\n            description: \"Makes the input field required\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        disabled: {\n            description: \"Disables the input field\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        startIcon: {\n            description: \"Icon displayed at the start of the input\"\n        },\n        endIcon: {\n            description: \"Icon displayed at the end of the input\"\n        },\n        minLength: {\n            description: \"Minimum number of characters required\",\n            control: \"number\",\n            defaultValue: 3\n        },\n        maxLength: {\n            description:\n                \"Maximum number of characters allowed. To apply this maxLength, update the code similarly to how it's done for minLength. Refer to the minLength example above for guidance.\",\n            control: \"number\"\n        },\n        validation: {\n            description:\n                \"Validation state and error message. Please refer to the example code for details on usage.\"\n        },\n        validate: {\n            description: \"Custom validation function\"\n        },\n        onChange: {\n            description: \"Callback function when input value changes\"\n        },\n        onBlur: {\n            description: \"Callback function when input loses focus\"\n        },\n        onEnter: {\n            description: \"Callback function when Enter key is pressed\"\n        }\n    } // Removed forwardEventOnChange and inputRef\n};\n"],"names":["meta","Input","Default","WithLabel","WithLabelRequired","WithDescription","WithNotes","WithErrors","Disabled","WithValidateFunction","args","value","setValue","useState","validation","setValidation","undefined","validate","Promise","resolve","setTimeout","newValue","FullExample","Documentation","handleValidation"],"mappings":"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"}
+{"version":3,"file":"Input/Input.stories.js","sources":["../../src/Input/Input.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { Input } from \"~/Input/index.js\";\n\nconst meta: Meta<typeof Input> = {\n    title: \"Components/Form/Input\",\n    component: Input,\n    argTypes: {\n        onChange: { action: \"onChange\" },\n        type: {\n            control: \"select\",\n            options: [\n                \"text\",\n                \"number\",\n                \"email\",\n                \"password\",\n                \"tel\",\n                \"url\",\n                \"search\",\n                \"date\",\n                \"datetime-local\",\n                \"month\",\n                \"week\",\n                \"time\",\n                \"color\",\n                \"file\",\n                \"checkbox\",\n                \"radio\",\n                \"range\",\n                \"hidden\",\n                \"button\",\n                \"submit\",\n                \"reset\",\n                \"image\"\n            ],\n            defaultValue: \"text\"\n        },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Input>;\n\nexport const Default: Story = {};\n\nexport const WithLabel: Story = {\n    args: {\n        label: \"Any field label\"\n    }\n};\n\nexport const WithLabelRequired: Story = {\n    args: {\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const WithNotes: Story = {\n    args: {\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const WithErrors: Story = {\n    args: {\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const WithValidateFunction: Story = {\n    render: args => {\n        const [value, setValue] = useState(\"\");\n        const [validation, setValidation] = useState<any>({ isValid: true, message: undefined });\n\n        const validate = async () => {\n            // Simulate API call delay\n            await new Promise(resolve => setTimeout(resolve, 500));\n\n            // Example validation: check if email already exists\n            if (value.includes(\"exists@\")) {\n                setValidation({ isValid: false, message: \"This email is already registered\" });\n            } else {\n                setValidation({ isValid: true, message: undefined });\n            }\n        };\n\n        return (\n            <Input\n                {...args}\n                type=\"email\"\n                label=\"Email\"\n                placeholder=\"Enter your email\"\n                value={value}\n                onChange={newValue => setValue(newValue)}\n                validate={validate}\n                validation={validation}\n            />\n        );\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 [value, setValue] = useState(\"\");\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        const handleValidation = () => {\n            if (args.required && !value.trim()) {\n                setValidation({ isValid: false, message: \"This field is required\" });\n            } else if (args.minLength && value.trim().length < args.minLength) {\n                setValidation({\n                    isValid: false,\n                    message: `Must be at least ${args.minLength} characters long`\n                });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        };\n\n        return (\n            <Input\n                {...args}\n                value={value}\n                onChange={newValue => setValue(newValue)}\n                validation={validation}\n                onBlur={handleValidation}\n                onEnter={handleValidation}\n            />\n        );\n    },\n    args: {\n        type: \"text\",\n        size: \"lg\",\n        variant: \"primary\",\n        label: \"Full Name\",\n        description: \"Enter your full name as it appears on your ID\",\n        note: \"This will be used for official documentation\",\n        placeholder: \"Enter your full name\",\n        required: true,\n        disabled: false,\n        startIcon: undefined,\n        endIcon: undefined,\n        minLength: 3,\n        maxLength: undefined,\n        onChange: undefined,\n        onBlur: undefined,\n        onEnter: undefined,\n        validation: undefined,\n        validate: undefined\n    },\n    argTypes: {\n        type: {\n            description: \"HTML input type attribute\",\n            control: \"select\",\n            options: [\n                \"text\",\n                \"number\",\n                \"email\",\n                \"password\",\n                \"tel\",\n                \"url\",\n                \"search\",\n                \"date\",\n                \"datetime-local\",\n                \"month\",\n                \"week\",\n                \"time\",\n                \"color\",\n                \"file\"\n            ],\n            defaultValue: \"text\"\n        },\n        size: {\n            description: \"Input field size\",\n            control: \"select\",\n            options: [\"md\", \"lg\", \"xl\"],\n            defaultValue: \"lg\"\n        },\n        variant: {\n            description: \"Input field style variant\",\n            control: \"select\",\n            options: [\"primary\", \"secondary\", \"ghost\", \"ghost-negative\"],\n            defaultValue: \"primary\"\n        },\n        label: {\n            description: \"Label text displayed above the input\",\n            control: \"text\"\n        },\n        description: {\n            description: \"Helper text displayed below the label\",\n            control: \"text\"\n        },\n        note: {\n            description: \"Additional note displayed below the input\",\n            control: \"text\"\n        },\n        placeholder: {\n            description: \"Placeholder text shown when input is empty\",\n            control: \"text\"\n        },\n        required: {\n            description: \"Makes the input field required\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        disabled: {\n            description: \"Disables the input field\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        startIcon: {\n            description: \"Icon displayed at the start of the input\"\n        },\n        endIcon: {\n            description: \"Icon displayed at the end of the input\"\n        },\n        minLength: {\n            description: \"Minimum number of characters required\",\n            control: \"number\",\n            defaultValue: 3\n        },\n        maxLength: {\n            description:\n                \"Maximum number of characters allowed. To apply this maxLength, update the code similarly to how it's done for minLength. Refer to the minLength example above for guidance.\",\n            control: \"number\"\n        },\n        validation: {\n            description:\n                \"Validation state and error message. Please refer to the example code for details on usage.\"\n        },\n        validate: {\n            description: \"Custom validation function\"\n        },\n        onChange: {\n            description: \"Callback function when input value changes\"\n        },\n        onBlur: {\n            description: \"Callback function when input loses focus\"\n        },\n        onEnter: {\n            description: \"Callback function when Enter key is pressed\"\n        }\n    } // Removed forwardEventOnChange and inputRef\n};\n"],"names":["meta","Input","Default","WithLabel","WithLabelRequired","WithDescription","WithNotes","WithErrors","Disabled","WithValidateFunction","args","value","setValue","useState","validation","setValidation","undefined","validate","Promise","resolve","setTimeout","newValue","FullExample","Documentation","handleValidation"],"mappings":"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"}

package/Input/InputPrimitive.stories.d.ts

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

package/Input/InputPrimitive.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input/InputPrimitive.stories.js","sources":["../../src/Input/InputPrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { ReactComponent as NotificationsIcon } from \"@webiny/icons/notifications.svg\";\nimport { ReactComponent as CalendarIcon } from \"@webiny/icons/calendar_month.svg\";\n\nimport { InputPrimitive } from \"./InputPrimitive.js\";\nimport { Icon } from \"~/Icon/index.js\";\n\nconst meta: Meta<typeof InputPrimitive> = {\n    title: \"Components/Form Primitives/Input\",\n    component: InputPrimitive,\n    argTypes: {\n        onChange: { action: \"onChange\" },\n        onEnter: { action: \"onEnter\" },\n        onKeyDown: { action: \"onKeyDown\" },\n        type: {\n            control: \"select\",\n            options: [\n                \"text\",\n                \"number\",\n                \"email\",\n                \"password\",\n                \"tel\",\n                \"url\",\n                \"search\",\n                \"date\",\n                \"datetime-local\",\n                \"month\",\n                \"week\",\n                \"time\",\n                \"color\",\n                \"file\",\n                \"checkbox\",\n                \"radio\",\n                \"range\",\n                \"hidden\",\n                \"button\",\n                \"submit\",\n                \"reset\",\n                \"image\"\n            ],\n            defaultValue: \"text\"\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return (\n            <div className={\"w-full\"}>\n                <InputPrimitive {...args} value={value} onChange={setValue} />\n                <div className={\"mt-4 text-center\"}>\n                    Current selected value: <pre>{value}</pre>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof InputPrimitive>;\n\nexport const Default: Story = {};\n\nexport const MediumSize: Story = {\n    args: {\n        placeholder: \"Custom placeholder\",\n        size: \"md\"\n    }\n};\n\nexport const LargeSize: Story = {\n    args: {\n        placeholder: \"Custom placeholder\",\n        size: \"lg\"\n    }\n};\n\nexport const ExtraLargeSize: Story = {\n    args: {\n        placeholder: \"Custom placeholder\",\n        size: \"xl\"\n    }\n};\n\nexport const WithStartIcon: Story = {\n    args: {\n        placeholder: \"Custom placeholder\",\n        startIcon: <Icon label={\"Bell\"} icon={<NotificationsIcon />} />\n    }\n};\n\nexport const WithEndIcon: Story = {\n    args: {\n        placeholder: \"Custom placeholder\",\n        endIcon: <Icon label={\"Calendar\"} icon={<CalendarIcon />} />\n    }\n};\n\nexport const WithStartAndEndIcons: Story = {\n    args: {\n        placeholder: \"Custom placeholder\",\n        startIcon: <Icon label={\"Bell\"} icon={<NotificationsIcon />} />,\n        endIcon: <Icon label={\"Calendar\"} icon={<CalendarIcon />} />\n    }\n};\n\nexport const PrimaryVariant: Story = {\n    args: {\n        ...WithStartAndEndIcons.args,\n        variant: \"primary\",\n        placeholder: \"Custom placeholder\"\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        ...WithStartAndEndIcons.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        ...WithStartAndEndIcons.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        ...WithStartAndEndIcons.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 WithForwardEventOnChange: Story = {\n    args: {\n        ...Default.args,\n        forwardEventOnChange: true\n    }\n};\n"],"names":["meta","InputPrimitive","args","value","setValue","useState","Default","MediumSize","LargeSize","ExtraLargeSize","WithStartIcon","Icon","NotificationsIcon","WithEndIcon","CalendarIcon","WithStartAndEndIcons","PrimaryVariant","PrimaryVariantDisabled","PrimaryVariantInvalid","SecondaryVariant","SecondaryVariantDisabled","SecondaryVariantInvalid","GhostVariant","GhostVariantDisabled","GhostVariantInvalid","GhostNegativeVariant","Story","GhostNegativeVariantDisabled","GhostNegativeVariantInvalid","WithForwardEventOnChange"],"mappings":"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"}
+{"version":3,"file":"Input/InputPrimitive.stories.js","sources":["../../src/Input/InputPrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { ReactComponent as NotificationsIcon } from \"@webiny/icons/notifications.svg\";\nimport { ReactComponent as CalendarIcon } from \"@webiny/icons/calendar_month.svg\";\n\nimport { InputPrimitive } from \"./InputPrimitive.js\";\nimport { Icon } from \"~/Icon/index.js\";\n\nconst meta: Meta<typeof InputPrimitive> = {\n    title: \"Components/Form Primitives/Input\",\n    component: InputPrimitive,\n    argTypes: {\n        onChange: { action: \"onChange\" },\n        onEnter: { action: \"onEnter\" },\n        onKeyDown: { action: \"onKeyDown\" },\n        type: {\n            control: \"select\",\n            options: [\n                \"text\",\n                \"number\",\n                \"email\",\n                \"password\",\n                \"tel\",\n                \"url\",\n                \"search\",\n                \"date\",\n                \"datetime-local\",\n                \"month\",\n                \"week\",\n                \"time\",\n                \"color\",\n                \"file\",\n                \"checkbox\",\n                \"radio\",\n                \"range\",\n                \"hidden\",\n                \"button\",\n                \"submit\",\n                \"reset\",\n                \"image\"\n            ],\n            defaultValue: \"text\"\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return (\n            <div className={\"w-full\"}>\n                <InputPrimitive {...args} value={value} onChange={setValue} />\n                <div className={\"mt-4 text-center\"}>\n                    Current selected value: <pre>{value}</pre>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof InputPrimitive>;\n\nexport const Default: Story = {};\n\nexport const MediumSize: Story = {\n    args: {\n        placeholder: \"Custom placeholder\",\n        size: \"md\"\n    }\n};\n\nexport const LargeSize: Story = {\n    args: {\n        placeholder: \"Custom placeholder\",\n        size: \"lg\"\n    }\n};\n\nexport const ExtraLargeSize: Story = {\n    args: {\n        placeholder: \"Custom placeholder\",\n        size: \"xl\"\n    }\n};\n\nexport const WithStartIcon: Story = {\n    args: {\n        placeholder: \"Custom placeholder\",\n        startIcon: <Icon label={\"Bell\"} icon={<NotificationsIcon />} />\n    }\n};\n\nexport const WithEndIcon: Story = {\n    args: {\n        placeholder: \"Custom placeholder\",\n        endIcon: <Icon label={\"Calendar\"} icon={<CalendarIcon />} />\n    }\n};\n\nexport const WithStartAndEndIcons: Story = {\n    args: {\n        placeholder: \"Custom placeholder\",\n        startIcon: <Icon label={\"Bell\"} icon={<NotificationsIcon />} />,\n        endIcon: <Icon label={\"Calendar\"} icon={<CalendarIcon />} />\n    }\n};\n\nexport const PrimaryVariant: Story = {\n    args: {\n        ...WithStartAndEndIcons.args,\n        variant: \"primary\",\n        placeholder: \"Custom placeholder\"\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        ...WithStartAndEndIcons.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        ...WithStartAndEndIcons.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        ...WithStartAndEndIcons.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 WithForwardEventOnChange: Story = {\n    args: {\n        ...Default.args,\n        forwardEventOnChange: true\n    }\n};\n"],"names":["meta","InputPrimitive","args","value","setValue","useState","Default","MediumSize","LargeSize","ExtraLargeSize","WithStartIcon","Icon","NotificationsIcon","WithEndIcon","CalendarIcon","WithStartAndEndIcons","PrimaryVariant","PrimaryVariantDisabled","PrimaryVariantInvalid","SecondaryVariant","SecondaryVariantDisabled","SecondaryVariantInvalid","GhostVariant","GhostVariantDisabled","GhostVariantInvalid","GhostNegativeVariant","Story","GhostNegativeVariantDisabled","GhostNegativeVariantInvalid","WithForwardEventOnChange"],"mappings":"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"}

package/Label/Label.stories.d.ts

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

package/Label/Label.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Label/Label.stories.js","sources":["../../src/Label/Label.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\n\nimport { Label } from \"./Label.js\";\nimport { Tooltip } from \"~/Tooltip/index.js\";\nimport { Input } from \"~/Input/index.js\";\n\nconst meta: Meta<typeof Label> = {\n    title: \"Components/Form/Label\",\n    component: Label,\n    parameters: {\n        layout: \"padded\"\n    },\n    decorators: [\n        Story => (\n            <Tooltip.Provider>\n                <Story />\n            </Tooltip.Provider>\n        )\n    ]\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Label>;\n\nexport const Documentation: Story = {\n    render: args => {\n        const [value, setValue] = React.useState(\"\");\n\n        return (\n            <div className=\"mb-4 space-y-2\">\n                <Label {...args} />\n                <Input\n                    id={args.htmlFor}\n                    type=\"text\"\n                    placeholder=\"e.g. John Michael Doe\"\n                    required={args.required}\n                    value={value}\n                    onChange={e => setValue(e.target.value)}\n                />\n            </div>\n        );\n    },\n    args: {\n        text: \"Full Name\",\n        htmlFor: \"full-name\",\n        description: \"As shown on your government-issued ID\",\n        hint: \"Include middle name if applicable\",\n        required: true,\n        disabled: false,\n        weight: \"strong\",\n        value: \"Label value will be shown here\",\n        invalid: false\n    },\n    argTypes: {\n        text: {\n            description: \"The text content of the label\",\n            control: \"text\"\n        },\n        htmlFor: {\n            description: \"The ID of the form element this label is associated with\",\n            control: \"text\"\n        },\n        description: {\n            description: \"Additional descriptive text shown next to the label\",\n            control: \"text\"\n        },\n        hint: {\n            description: \"Tooltip hint text that appears on hover\",\n            control: \"text\"\n        },\n        required: {\n            description: \"Whether the associated form field is required\",\n            control: \"boolean\"\n        },\n        disabled: {\n            description: \"Whether the label should appear disabled\",\n            control: \"boolean\"\n        },\n        weight: {\n            description: \"The font weight of the label text\",\n            control: \"select\",\n            options: [\"strong\", \"light\"]\n        },\n        value: {\n            description: \"Optional value to display on the right side of the label\",\n            control: \"text\"\n        },\n        invalid: {\n            description: \"Whether the label should appear in an invalid state\",\n            control: \"boolean\"\n        }\n    }\n};\n\nexport const Default: Story = {\n    args: {\n        text: \"Test label\",\n        htmlFor: \"test-field\"\n    },\n    render: args => (\n        <>\n            <input type=\"checkbox\" id={args.htmlFor} />\n            <Label {...args} />\n        </>\n    )\n};\n\nexport const LightWeight: Story = {\n    args: {\n        ...Default.args,\n        weight: \"light\"\n    }\n};\n\nexport const Required: Story = {\n    args: {\n        ...Default.args,\n        required: true\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        ...Default.args,\n        description: \"(description)\"\n    }\n};\n\nexport const WithHint: Story = {\n    args: {\n        ...Default.args,\n        hint: \"This is an additional message in case context to this label needs to be added\"\n    }\n};\n\nexport const WithValue: Story = {\n    args: {\n        ...Default.args,\n        value: 24\n    },\n    render: args => (\n        <div className=\"w-64\">\n            <Label {...args} />\n        </div>\n    )\n};\n\nexport const Disabled: Story = {\n    args: {\n        htmlFor: \"test-field-disabled\",\n        text: \"Test label\",\n        description: \"(description)\",\n        hint: \"This is an additional message in case context to this label needs to be added\",\n        required: true,\n        disabled: true,\n        value: 24\n    },\n    render: args => (\n        <div className=\"w-64\">\n            <Label {...args} />\n        </div>\n    )\n};\n"],"names":["meta","Label","Story","Tooltip","Documentation","args","value","setValue","React","Input","e","Default","LightWeight","Required","WithDescription","WithHint","WithValue","Disabled"],"mappings":";;;;AAOA,MAAMA,OAA2B;IAC7B,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;IACA,YAAY;QACRC,CAAAA,QAAAA,WAAAA,GACI,oBAACC,QAAQ,QAAQ,sBACb,oBAACD,OAAAA;KAGZ;AACL;AAEA,sBAAeF;AAGR,MAAMI,gBAAuB;IAChC,QAAQC,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,MAAAA,QAAc,CAAC;QAEzC,OAAO,WAAP,GACI,oBAAC;YAAI,WAAU;yBACX,oBAACP,OAAUI,OAAAA,WAAAA,GACX,oBAACI,OAAKA;YACF,IAAIJ,KAAK,OAAO;YAChB,MAAK;YACL,aAAY;YACZ,UAAUA,KAAK,QAAQ;YACvB,OAAOC;YACP,UAAUI,CAAAA,IAAKH,SAASG,EAAE,MAAM,CAAC,KAAK;;IAItD;IACA,MAAM;QACF,MAAM;QACN,SAAS;QACT,aAAa;QACb,MAAM;QACN,UAAU;QACV,UAAU;QACV,QAAQ;QACR,OAAO;QACP,SAAS;IACb;IACA,UAAU;QACN,MAAM;YACF,aAAa;YACb,SAAS;QACb;QACA,SAAS;YACL,aAAa;YACb,SAAS;QACb;QACA,aAAa;YACT,aAAa;YACb,SAAS;QACb;QACA,MAAM;YACF,aAAa;YACb,SAAS;QACb;QACA,UAAU;YACN,aAAa;YACb,SAAS;QACb;QACA,UAAU;YACN,aAAa;YACb,SAAS;QACb;QACA,QAAQ;YACJ,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAU;aAAQ;QAChC;QACA,OAAO;YACH,aAAa;YACb,SAAS;QACb;QACA,SAAS;YACL,aAAa;YACb,SAAS;QACb;IACJ;AACJ;AAEO,MAAMC,UAAiB;IAC1B,MAAM;QACF,MAAM;QACN,SAAS;IACb;IACA,QAAQN,CAAAA,OAAAA,WAAAA,GACJ,wDACI,oBAAC;YAAM,MAAK;YAAW,IAAIA,KAAK,OAAO;0BACvC,oBAACJ,OAAUI;AAGvB;AAEO,MAAMO,cAAqB;IAC9B,MAAM;QACF,GAAGD,QAAQ,IAAI;QACf,QAAQ;IACZ;AACJ;AAEO,MAAME,WAAkB;IAC3B,MAAM;QACF,GAAGF,QAAQ,IAAI;QACf,UAAU;IACd;AACJ;AAEO,MAAMG,kBAAyB;IAClC,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,aAAa;IACjB;AACJ;AAEO,MAAMI,WAAkB;IAC3B,MAAM;QACF,GAAGJ,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMK,YAAmB;IAC5B,MAAM;QACF,GAAGL,QAAQ,IAAI;QACf,OAAO;IACX;IACA,QAAQN,CAAAA,OAAAA,WAAAA,GACJ,oBAAC;YAAI,WAAU;yBACX,oBAACJ,OAAUI;AAGvB;AAEO,MAAMY,WAAkB;IAC3B,MAAM;QACF,SAAS;QACT,MAAM;QACN,aAAa;QACb,MAAM;QACN,UAAU;QACV,UAAU;QACV,OAAO;IACX;IACA,QAAQZ,CAAAA,OAAAA,WAAAA,GACJ,oBAAC;YAAI,WAAU;yBACX,oBAACJ,OAAUI;AAGvB"}
+{"version":3,"file":"Label/Label.stories.js","sources":["../../src/Label/Label.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\n\nimport { Label } from \"./Label.js\";\nimport { Tooltip } from \"~/Tooltip/index.js\";\nimport { Input } from \"~/Input/index.js\";\n\nconst meta: Meta<typeof Label> = {\n    title: \"Components/Form/Label\",\n    component: Label,\n    parameters: {\n        layout: \"padded\"\n    },\n    decorators: [\n        Story => (\n            <Tooltip.Provider>\n                <Story />\n            </Tooltip.Provider>\n        )\n    ]\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Label>;\n\nexport const Documentation: Story = {\n    render: args => {\n        const [value, setValue] = React.useState(\"\");\n\n        return (\n            <div className=\"mb-4 space-y-2\">\n                <Label {...args} />\n                <Input\n                    id={args.htmlFor}\n                    type=\"text\"\n                    placeholder=\"e.g. John Michael Doe\"\n                    required={args.required}\n                    value={value}\n                    onChange={e => setValue(e.target.value)}\n                />\n            </div>\n        );\n    },\n    args: {\n        text: \"Full Name\",\n        htmlFor: \"full-name\",\n        description: \"As shown on your government-issued ID\",\n        hint: \"Include middle name if applicable\",\n        required: true,\n        disabled: false,\n        weight: \"strong\",\n        value: \"Label value will be shown here\",\n        invalid: false\n    },\n    argTypes: {\n        text: {\n            description: \"The text content of the label\",\n            control: \"text\"\n        },\n        htmlFor: {\n            description: \"The ID of the form element this label is associated with\",\n            control: \"text\"\n        },\n        description: {\n            description: \"Additional descriptive text shown next to the label\",\n            control: \"text\"\n        },\n        hint: {\n            description: \"Tooltip hint text that appears on hover\",\n            control: \"text\"\n        },\n        required: {\n            description: \"Whether the associated form field is required\",\n            control: \"boolean\"\n        },\n        disabled: {\n            description: \"Whether the label should appear disabled\",\n            control: \"boolean\"\n        },\n        weight: {\n            description: \"The font weight of the label text\",\n            control: \"select\",\n            options: [\"strong\", \"light\"]\n        },\n        value: {\n            description: \"Optional value to display on the right side of the label\",\n            control: \"text\"\n        },\n        invalid: {\n            description: \"Whether the label should appear in an invalid state\",\n            control: \"boolean\"\n        }\n    }\n};\n\nexport const Default: Story = {\n    args: {\n        text: \"Test label\",\n        htmlFor: \"test-field\"\n    },\n    render: args => (\n        <>\n            <input type=\"checkbox\" id={args.htmlFor} />\n            <Label {...args} />\n        </>\n    )\n};\n\nexport const LightWeight: Story = {\n    args: {\n        ...Default.args,\n        weight: \"light\"\n    }\n};\n\nexport const Required: Story = {\n    args: {\n        ...Default.args,\n        required: true\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        ...Default.args,\n        description: \"(description)\"\n    }\n};\n\nexport const WithHint: Story = {\n    args: {\n        ...Default.args,\n        hint: \"This is an additional message in case context to this label needs to be added\"\n    }\n};\n\nexport const WithValue: Story = {\n    args: {\n        ...Default.args,\n        value: 24\n    },\n    render: args => (\n        <div className=\"w-64\">\n            <Label {...args} />\n        </div>\n    )\n};\n\nexport const Disabled: Story = {\n    args: {\n        htmlFor: \"test-field-disabled\",\n        text: \"Test label\",\n        description: \"(description)\",\n        hint: \"This is an additional message in case context to this label needs to be added\",\n        required: true,\n        disabled: true,\n        value: 24\n    },\n    render: args => (\n        <div className=\"w-64\">\n            <Label {...args} />\n        </div>\n    )\n};\n"],"names":["meta","Label","Story","Tooltip","Documentation","args","value","setValue","React","Input","e","Default","LightWeight","Required","WithDescription","WithHint","WithValue","Disabled"],"mappings":";;;;AAOA,MAAMA,OAA2B;IAC7B,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;IACA,YAAY;QACRC,CAAAA,QAAAA,WAAAA,GACI,oBAACC,QAAQ,QAAQ,sBACb,oBAACD,OAAAA;KAGZ;AACL;AAEA,sBAAeF;AAGR,MAAMI,gBAAuB;IAChC,QAAQC,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,MAAAA,QAAc,CAAC;QAEzC,OAAO,WAAP,GACI,oBAAC;YAAI,WAAU;yBACX,oBAACP,OAAUI,OAAAA,WAAAA,GACX,oBAACI,OAAKA;YACF,IAAIJ,KAAK,OAAO;YAChB,MAAK;YACL,aAAY;YACZ,UAAUA,KAAK,QAAQ;YACvB,OAAOC;YACP,UAAUI,CAAAA,IAAKH,SAASG,EAAE,MAAM,CAAC,KAAK;;IAItD;IACA,MAAM;QACF,MAAM;QACN,SAAS;QACT,aAAa;QACb,MAAM;QACN,UAAU;QACV,UAAU;QACV,QAAQ;QACR,OAAO;QACP,SAAS;IACb;IACA,UAAU;QACN,MAAM;YACF,aAAa;YACb,SAAS;QACb;QACA,SAAS;YACL,aAAa;YACb,SAAS;QACb;QACA,aAAa;YACT,aAAa;YACb,SAAS;QACb;QACA,MAAM;YACF,aAAa;YACb,SAAS;QACb;QACA,UAAU;YACN,aAAa;YACb,SAAS;QACb;QACA,UAAU;YACN,aAAa;YACb,SAAS;QACb;QACA,QAAQ;YACJ,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAU;aAAQ;QAChC;QACA,OAAO;YACH,aAAa;YACb,SAAS;QACb;QACA,SAAS;YACL,aAAa;YACb,SAAS;QACb;IACJ;AACJ;AAEO,MAAMC,UAAiB;IAC1B,MAAM;QACF,MAAM;QACN,SAAS;IACb;IACA,QAAQN,CAAAA,OAAAA,WAAAA,GACJ,wDACI,oBAAC;YAAM,MAAK;YAAW,IAAIA,KAAK,OAAO;0BACvC,oBAACJ,OAAUI;AAGvB;AAEO,MAAMO,cAAqB;IAC9B,MAAM;QACF,GAAGD,QAAQ,IAAI;QACf,QAAQ;IACZ;AACJ;AAEO,MAAME,WAAkB;IAC3B,MAAM;QACF,GAAGF,QAAQ,IAAI;QACf,UAAU;IACd;AACJ;AAEO,MAAMG,kBAAyB;IAClC,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,aAAa;IACjB;AACJ;AAEO,MAAMI,WAAkB;IAC3B,MAAM;QACF,GAAGJ,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMK,YAAmB;IAC5B,MAAM;QACF,GAAGL,QAAQ,IAAI;QACf,OAAO;IACX;IACA,QAAQN,CAAAA,OAAAA,WAAAA,GACJ,oBAAC;YAAI,WAAU;yBACX,oBAACJ,OAAUI;AAGvB;AAEO,MAAMY,WAAkB;IAC3B,MAAM;QACF,SAAS;QACT,MAAM;QACN,aAAa;QACb,MAAM;QACN,UAAU;QACV,UAAU;QACV,OAAO;IACX;IACA,QAAQZ,CAAAA,OAAAA,WAAAA,GACJ,oBAAC;YAAI,WAAU;yBACX,oBAACJ,OAAUI;AAGvB"}

package/Link/Link.stories.d.ts

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

package/Link/Link.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link/Link.stories.js","sources":["../../src/Link/Link.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { Link } from \"./Link.js\";\nimport { Text } from \"~/Text/index.js\";\nimport { AdminUiProvider } from \"~/AdminUiProvider/index.js\";\nimport { LinkComponentProps } from \"~/Link/LinkComponent.js\";\n\nconst NoopLinkComponent = ({ to, ...props }: LinkComponentProps) => {\n    return (\n        <a\n            href={to}\n            {...props}\n            onClick={e => {\n                e.preventDefault();\n            }}\n        />\n    );\n};\n\nconst meta: Meta<typeof Link> = {\n    title: \"Components/Link\",\n    component: Link,\n    decorators: [\n        (Story: React.ComponentType) => (\n            <AdminUiProvider linkComponent={NoopLinkComponent}>\n                <Story />\n            </AdminUiProvider>\n        )\n    ],\n    argTypes: {\n        size: { control: \"select\", options: [\"sm\", \"md\", \"lg\", \"xl\"] },\n        variant: { control: \"select\", options: [\"primary\", \"secondary\"] }\n    }\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Link>;\n\nexport const Default: Story = {\n    args: {\n        to: \"#\",\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const LinkXl: Story = {\n    args: {\n        size: \"xl\",\n        to: \"#\",\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const LinkLg: Story = {\n    args: {\n        size: \"lg\",\n        to: \"#\",\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const LinkMd: Story = {\n    args: {\n        size: \"md\",\n        to: \"#\",\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const LinkSm: Story = {\n    args: {\n        size: \"sm\",\n        to: \"#\",\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const InheritedSize: Story = {\n    name: \"Link with inherited size\",\n    render: linkProps => {\n        return (\n            <Text>\n                <Text size=\"lg\">\n                    Size of this text is set to large, so,&nbsp;\n                    <Link {...linkProps}>this link&apos;s</Link> size is also automatically set to\n                    large.\n                </Text>\n            </Text>\n        );\n    },\n    args: {\n        to: \"#\",\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const WithUnderline: Story = {\n    args: {\n        underline: true,\n        to: \"#\",\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const PrimaryNegative: Story = {\n    decorators: [\n        Story => (\n            <div className=\"bg-[#25292e] p-[300px] rounded-[5px] text-neutral-dimmed\">\n                <Story />\n            </div>\n        )\n    ],\n    render: args => {\n        return (\n            <Text>\n                Lorem <Link {...args}>ipsum dolor sit amet</Link>, consectetur adipiscing elit.\n                Fusce tempus tortor eu sapien interdum rhoncus.\n            </Text>\n        );\n    },\n    args: {\n        ...Default.args,\n        variant: \"primary-negative\"\n    }\n};\n\nexport const SecondaryNegative: Story = {\n    decorators: [\n        Story => (\n            <div className=\"bg-[#25292e] p-[300px] rounded-[5px] text-neutral-dimmed\">\n                <Story />\n            </div>\n        )\n    ],\n    render: args => {\n        return (\n            <Text>\n                Lorem <Link {...args}>ipsum dolor sit amet</Link>, consectetur adipiscing elit.\n                Fusce tempus tortor eu sapien interdum rhoncus.\n            </Text>\n        );\n    },\n    args: {\n        ...Default.args,\n        variant: \"secondary-negative\"\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        to: \"#\",\n        variant: \"primary\",\n        size: \"md\",\n        underline: false,\n        disabled: false,\n        children: \"This is a link\"\n    },\n    argTypes: {\n        to: {\n            description:\n                \"The URL or path the link points to. If it’s a relative path, you can pass it as-is—it will automatically resolve based on the parent route. For a full URL, be sure to pass the complete address starting with `https://...`\",\n            control: \"text\",\n            defaultValue: \"#\"\n        },\n        variant: {\n            description: \"Visual style of the link\",\n            control: \"select\",\n            options: [\"primary\", \"secondary\", \"primary-negative\", \"secondary-negative\"],\n            defaultValue: \"primary\"\n        },\n        size: {\n            description: \"Size of the link text\",\n            control: \"select\",\n            options: [\"inherit\", \"sm\", \"md\", \"lg\", \"xl\"],\n            defaultValue: \"inherit\"\n        },\n        underline: {\n            description: \"Whether the link should be underlined by default\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        disabled: {\n            description: \"Whether the link is disabled\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        children: {\n            description: \"The content of the link. It can be any valid React node.\",\n            control: \"text\",\n            defaultValue: \"This is a link\"\n        }\n    }\n};\n"],"names":["NoopLinkComponent","to","props","e","meta","Link","Story","AdminUiProvider","Default","LinkXl","LinkLg","LinkMd","LinkSm","InheritedSize","linkProps","Text","WithUnderline","PrimaryNegative","args","SecondaryNegative","Documentation"],"mappings":";;;;AAOA,MAAMA,oBAAoB,CAAC,EAAEC,EAAE,EAAE,GAAGC,OAA2B,GACpD,WAAP,GACI,oBAAC;QACG,MAAMD;QACL,GAAGC,KAAK;QACT,SAASC,CAAAA;YACLA,EAAE,cAAc;QACpB;;AAKZ,MAAMC,OAA0B;IAC5B,OAAO;IACP,WAAWC;IACX,YAAY;QACR,CAACC,QAAAA,WAAAA,GACG,oBAACC,iBAAeA;gBAAC,eAAeP;6BAC5B,oBAACM,OAAAA;KAGZ;IACD,UAAU;QACN,MAAM;YAAE,SAAS;YAAU,SAAS;gBAAC;gBAAM;gBAAM;gBAAM;aAAK;QAAC;QAC7D,SAAS;YAAE,SAAS;YAAU,SAAS;gBAAC;gBAAW;aAAY;QAAC;IACpE;AACJ;AAEA,qBAAeF;AAIR,MAAMI,UAAiB;IAC1B,MAAM;QACF,IAAI;QACJ,UACI;IACR;AACJ;AAEO,MAAMC,SAAgB;IACzB,MAAM;QACF,MAAM;QACN,IAAI;QACJ,UACI;IACR;AACJ;AAEO,MAAMC,SAAgB;IACzB,MAAM;QACF,MAAM;QACN,IAAI;QACJ,UACI;IACR;AACJ;AAEO,MAAMC,SAAgB;IACzB,MAAM;QACF,MAAM;QACN,IAAI;QACJ,UACI;IACR;AACJ;AAEO,MAAMC,SAAgB;IACzB,MAAM;QACF,MAAM;QACN,IAAI;QACJ,UACI;IACR;AACJ;AAEO,MAAMC,gBAAuB;IAChC,MAAM;IACN,QAAQC,CAAAA,YACG,WAAP,GACI,oBAACC,MAAIA,MAAAA,WAAAA,GACD,oBAACA,MAAIA;YAAC,MAAK;WAAK,4DAEZ,oBAACV,MAASS,WAAW,gBAAuB;IAM5D,MAAM;QACF,IAAI;QACJ,UACI;IACR;AACJ;AAEO,MAAME,gBAAuB;IAChC,MAAM;QACF,WAAW;QACX,IAAI;QACJ,UACI;IACR;AACJ;AAEO,MAAMC,kBAAyB;IAClC,YAAY;QACRX,CAAAA,QAAAA,WAAAA,GACI,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;IACD,QAAQY,CAAAA,OACG,WAAP,GACI,oBAACH,MAAIA,MAAC,wBACI,oBAACV,MAASa,MAAM,yBAA2B;IAK7D,MAAM;QACF,GAAGV,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAMW,oBAA2B;IACpC,YAAY;QACRb,CAAAA,QAAAA,WAAAA,GACI,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;IACD,QAAQY,CAAAA,OACG,WAAP,GACI,oBAACH,MAAIA,MAAC,wBACI,oBAACV,MAASa,MAAM,yBAA2B;IAK7D,MAAM;QACF,GAAGV,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAMY,gBAAuB;IAChC,MAAM;QACF,IAAI;QACJ,SAAS;QACT,MAAM;QACN,WAAW;QACX,UAAU;QACV,UAAU;IACd;IACA,UAAU;QACN,IAAI;YACA,aACI;YACJ,SAAS;YACT,cAAc;QAClB;QACA,SAAS;YACL,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAW;gBAAa;gBAAoB;aAAqB;YAC3E,cAAc;QAClB;QACA,MAAM;YACF,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAW;gBAAM;gBAAM;gBAAM;aAAK;YAC5C,cAAc;QAClB;QACA,WAAW;YACP,aAAa;YACb,SAAS;YACT,cAAc;QAClB;QACA,UAAU;YACN,aAAa;YACb,SAAS;YACT,cAAc;QAClB;QACA,UAAU;YACN,aAAa;YACb,SAAS;YACT,cAAc;QAClB;IACJ;AACJ"}
+{"version":3,"file":"Link/Link.stories.js","sources":["../../src/Link/Link.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { Link } from \"./Link.js\";\nimport { Text } from \"~/Text/index.js\";\nimport { AdminUiProvider } from \"~/AdminUiProvider/index.js\";\nimport { LinkComponentProps } from \"~/Link/LinkComponent.js\";\n\nconst NoopLinkComponent = ({ to, ...props }: LinkComponentProps) => {\n    return (\n        <a\n            href={to}\n            {...props}\n            onClick={e => {\n                e.preventDefault();\n            }}\n        />\n    );\n};\n\nconst meta: Meta<typeof Link> = {\n    title: \"Components/Link\",\n    component: Link,\n    decorators: [\n        (Story: React.ComponentType) => (\n            <AdminUiProvider linkComponent={NoopLinkComponent}>\n                <Story />\n            </AdminUiProvider>\n        )\n    ],\n    argTypes: {\n        size: { control: \"select\", options: [\"sm\", \"md\", \"lg\", \"xl\"] },\n        variant: { control: \"select\", options: [\"primary\", \"secondary\"] }\n    }\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Link>;\n\nexport const Default: Story = {\n    args: {\n        to: \"#\",\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const LinkXl: Story = {\n    args: {\n        size: \"xl\",\n        to: \"#\",\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const LinkLg: Story = {\n    args: {\n        size: \"lg\",\n        to: \"#\",\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const LinkMd: Story = {\n    args: {\n        size: \"md\",\n        to: \"#\",\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const LinkSm: Story = {\n    args: {\n        size: \"sm\",\n        to: \"#\",\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const InheritedSize: Story = {\n    name: \"Link with inherited size\",\n    render: linkProps => {\n        return (\n            <Text>\n                <Text size=\"lg\">\n                    Size of this text is set to large, so,&nbsp;\n                    <Link {...linkProps}>this link&apos;s</Link> size is also automatically set to\n                    large.\n                </Text>\n            </Text>\n        );\n    },\n    args: {\n        to: \"#\",\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const WithUnderline: Story = {\n    args: {\n        underline: true,\n        to: \"#\",\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const PrimaryNegative: Story = {\n    decorators: [\n        Story => (\n            <div className=\"bg-[#25292e] p-[300px] rounded-[5px] text-neutral-dimmed\">\n                <Story />\n            </div>\n        )\n    ],\n    render: args => {\n        return (\n            <Text>\n                Lorem <Link {...args}>ipsum dolor sit amet</Link>, consectetur adipiscing elit.\n                Fusce tempus tortor eu sapien interdum rhoncus.\n            </Text>\n        );\n    },\n    args: {\n        ...Default.args,\n        variant: \"primary-negative\"\n    }\n};\n\nexport const SecondaryNegative: Story = {\n    decorators: [\n        Story => (\n            <div className=\"bg-[#25292e] p-[300px] rounded-[5px] text-neutral-dimmed\">\n                <Story />\n            </div>\n        )\n    ],\n    render: args => {\n        return (\n            <Text>\n                Lorem <Link {...args}>ipsum dolor sit amet</Link>, consectetur adipiscing elit.\n                Fusce tempus tortor eu sapien interdum rhoncus.\n            </Text>\n        );\n    },\n    args: {\n        ...Default.args,\n        variant: \"secondary-negative\"\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        to: \"#\",\n        variant: \"primary\",\n        size: \"md\",\n        underline: false,\n        disabled: false,\n        children: \"This is a link\"\n    },\n    argTypes: {\n        to: {\n            description:\n                \"The URL or path the link points to. If it’s a relative path, you can pass it as-is—it will automatically resolve based on the parent route. For a full URL, be sure to pass the complete address starting with `https://...`\",\n            control: \"text\",\n            defaultValue: \"#\"\n        },\n        variant: {\n            description: \"Visual style of the link\",\n            control: \"select\",\n            options: [\"primary\", \"secondary\", \"primary-negative\", \"secondary-negative\"],\n            defaultValue: \"primary\"\n        },\n        size: {\n            description: \"Size of the link text\",\n            control: \"select\",\n            options: [\"inherit\", \"sm\", \"md\", \"lg\", \"xl\"],\n            defaultValue: \"inherit\"\n        },\n        underline: {\n            description: \"Whether the link should be underlined by default\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        disabled: {\n            description: \"Whether the link is disabled\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        children: {\n            description: \"The content of the link. It can be any valid React node.\",\n            control: \"text\",\n            defaultValue: \"This is a link\"\n        }\n    }\n};\n"],"names":["NoopLinkComponent","to","props","e","meta","Link","Story","AdminUiProvider","Default","LinkXl","LinkLg","LinkMd","LinkSm","InheritedSize","linkProps","Text","WithUnderline","PrimaryNegative","args","SecondaryNegative","Documentation"],"mappings":";;;;AAOA,MAAMA,oBAAoB,CAAC,EAAEC,EAAE,EAAE,GAAGC,OAA2B,GACpD,WAAP,GACI,oBAAC;QACG,MAAMD;QACL,GAAGC,KAAK;QACT,SAASC,CAAAA;YACLA,EAAE,cAAc;QACpB;;AAKZ,MAAMC,OAA0B;IAC5B,OAAO;IACP,WAAWC;IACX,YAAY;QACR,CAACC,QAAAA,WAAAA,GACG,oBAACC,iBAAeA;gBAAC,eAAeP;6BAC5B,oBAACM,OAAAA;KAGZ;IACD,UAAU;QACN,MAAM;YAAE,SAAS;YAAU,SAAS;gBAAC;gBAAM;gBAAM;gBAAM;aAAK;QAAC;QAC7D,SAAS;YAAE,SAAS;YAAU,SAAS;gBAAC;gBAAW;aAAY;QAAC;IACpE;AACJ;AAEA,qBAAeF;AAIR,MAAMI,UAAiB;IAC1B,MAAM;QACF,IAAI;QACJ,UACI;IACR;AACJ;AAEO,MAAMC,SAAgB;IACzB,MAAM;QACF,MAAM;QACN,IAAI;QACJ,UACI;IACR;AACJ;AAEO,MAAMC,SAAgB;IACzB,MAAM;QACF,MAAM;QACN,IAAI;QACJ,UACI;IACR;AACJ;AAEO,MAAMC,SAAgB;IACzB,MAAM;QACF,MAAM;QACN,IAAI;QACJ,UACI;IACR;AACJ;AAEO,MAAMC,SAAgB;IACzB,MAAM;QACF,MAAM;QACN,IAAI;QACJ,UACI;IACR;AACJ;AAEO,MAAMC,gBAAuB;IAChC,MAAM;IACN,QAAQC,CAAAA,YACG,WAAP,GACI,oBAACC,MAAIA,MAAAA,WAAAA,GACD,oBAACA,MAAIA;YAAC,MAAK;WAAK,4DAEZ,oBAACV,MAASS,WAAW,gBAAuB;IAM5D,MAAM;QACF,IAAI;QACJ,UACI;IACR;AACJ;AAEO,MAAME,gBAAuB;IAChC,MAAM;QACF,WAAW;QACX,IAAI;QACJ,UACI;IACR;AACJ;AAEO,MAAMC,kBAAyB;IAClC,YAAY;QACRX,CAAAA,QAAAA,WAAAA,GACI,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;IACD,QAAQY,CAAAA,OACG,WAAP,GACI,oBAACH,MAAIA,MAAC,wBACI,oBAACV,MAASa,MAAM,yBAA2B;IAK7D,MAAM;QACF,GAAGV,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAMW,oBAA2B;IACpC,YAAY;QACRb,CAAAA,QAAAA,WAAAA,GACI,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;IACD,QAAQY,CAAAA,OACG,WAAP,GACI,oBAACH,MAAIA,MAAC,wBACI,oBAACV,MAASa,MAAM,yBAA2B;IAK7D,MAAM;QACF,GAAGV,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAMY,gBAAuB;IAChC,MAAM;QACF,IAAI;QACJ,SAAS;QACT,MAAM;QACN,WAAW;QACX,UAAU;QACV,UAAU;IACd;IACA,UAAU;QACN,IAAI;YACA,aACI;YACJ,SAAS;YACT,cAAc;QAClB;QACA,SAAS;YACL,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAW;gBAAa;gBAAoB;aAAqB;YAC3E,cAAc;QAClB;QACA,MAAM;YACF,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAW;gBAAM;gBAAM;gBAAM;aAAK;YAC5C,cAAc;QAClB;QACA,WAAW;YACP,aAAa;YACb,SAAS;YACT,cAAc;QAClB;QACA,UAAU;YACN,aAAa;YACb,SAAS;YACT,cAAc;QAClB;QACA,UAAU;YACN,aAAa;YACb,SAAS;YACT,cAAc;QAClB;IACJ;AACJ"}

package/List/List.stories.d.ts

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

package/List/List.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"List/List.stories.js","sources":["../../src/List/List.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as ChartIcon } from \"@webiny/icons/insert_chart.svg\";\nimport { ReactComponent as MoreIcon } from \"@webiny/icons/more_vert.svg\";\nimport { ReactComponent as OpenIcon } from \"@webiny/icons/visibility.svg\";\nimport { ReactComponent as EditIcon } from \"@webiny/icons/edit.svg\";\nimport { ReactComponent as TrashIcon } from \"@webiny/icons/delete.svg\";\nimport { ReactComponent as UserIcon } from \"@webiny/icons/person.svg\";\nimport { ReactComponent as SettingsIcon } from \"@webiny/icons/settings.svg\";\nimport { ReactComponent as HelpIcon } from \"@webiny/icons/help.svg\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { List, type ListItemProps as BaseListItemProps } from \"./List.js\";\nimport { Avatar } from \"~/Avatar/index.js\";\n\nconst meta: Meta<typeof List> = {\n    title: \"Components/List\",\n    component: List,\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof List>;\n\ninterface ListItemProps extends Omit<BaseListItemProps, \"title\"> {\n    index: number;\n}\n\nconst ListItem = (props: ListItemProps) => {\n    return <List.Item title={`List item ${props.index}`} {...props} />;\n};\n\nexport const Default: Story = {\n    args: {\n        children: (\n            <>\n                <ListItem index={1} />\n                <ListItem index={2} />\n                <ListItem index={3} />\n            </>\n        )\n    }\n};\n\nexport const WithTransparentBackground: Story = {\n    args: {\n        background: \"transparent\",\n        children: (\n            <>\n                <List.Item\n                    icon={<UserIcon />}\n                    title=\"User Profile\"\n                    description=\"View and edit your profile information\"\n                />\n                <List.Item\n                    icon={<SettingsIcon />}\n                    title=\"Settings\"\n                    description=\"Configure application settings\"\n                />\n                <List.Item\n                    icon={<HelpIcon />}\n                    title=\"Help & Support\"\n                    description=\"Get assistance and view documentation\"\n                />\n            </>\n        )\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-light p-md\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const WithBaseBackground: Story = {\n    args: {\n        ...Default.args,\n        background: \"base\"\n    }\n};\n\nexport const WithLightBackground: Story = {\n    args: {\n        background: \"light\",\n        children: (\n            <>\n                <List.Item\n                    icon={<UserIcon />}\n                    title=\"User Profile\"\n                    description=\"View and edit your profile information\"\n                />\n                <List.Item\n                    icon={<SettingsIcon />}\n                    title=\"Settings\"\n                    description=\"Configure application settings\"\n                />\n                <List.Item\n                    icon={<HelpIcon />}\n                    title=\"Help & Support\"\n                    description=\"Get assistance and view documentation\"\n                />\n            </>\n        )\n    }\n};\n\nexport const WithUnderlineVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"underline\"\n    }\n};\n\nexport const WithContainerVariant: Story = {\n    args: {\n        variant: \"container\",\n        children: (\n            <>\n                <List.Item\n                    icon={<UserIcon />}\n                    title=\"User Profile\"\n                    description=\"View and edit your profile information\"\n                />\n                <List.Item\n                    icon={<SettingsIcon />}\n                    title=\"Settings\"\n                    description=\"Configure application settings\"\n                />\n                <List.Item\n                    icon={<HelpIcon />}\n                    title=\"Help & Support\"\n                    description=\"Get assistance and view documentation\"\n                />\n            </>\n        )\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-light p-md\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const WithDescription: Story = {\n    args: {\n        children: (\n            <>\n                <List.Item\n                    title=\"User Profile\"\n                    description=\"View and edit your profile information\"\n                />\n                <List.Item title=\"Settings\" description=\"Configure application settings\" />\n                <List.Item\n                    title=\"Help & Support\"\n                    description=\"Get assistance and view documentation\"\n                />\n            </>\n        )\n    }\n};\n\nexport const WithIcon: Story = {\n    args: {\n        children: (\n            <>\n                <List.Item icon={<UserIcon />} title=\"User Profile\" />\n                <List.Item icon={<SettingsIcon />} title=\"Settings\" />\n                <List.Item icon={<HelpIcon />} title=\"Help & Support\" />\n            </>\n        )\n    }\n};\n\nexport const WithIconsAndDescriptions: Story = {\n    args: {\n        children: (\n            <>\n                <List.Item\n                    icon={<UserIcon />}\n                    title=\"User Profile\"\n                    description=\"View and edit your profile information\"\n                />\n                <List.Item\n                    icon={<SettingsIcon />}\n                    title=\"Settings\"\n                    description=\"Configure application settings\"\n                />\n                <List.Item\n                    icon={<HelpIcon />}\n                    title=\"Help & Support\"\n                    description=\"Get assistance and view documentation\"\n                />\n            </>\n        )\n    }\n};\n\nexport const WithAvatar: Story = {\n    args: {\n        ...Default.args,\n        children: (\n            <>\n                <ListItem\n                    index={1}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    icon={\n                        <Avatar\n                            image={\n                                <Avatar.Image src=\"https://i.pravatar.cc/300?img=1\" alt=\"@webiny\" />\n                            }\n                            fallback={<Avatar.Fallback>W</Avatar.Fallback>}\n                        />\n                    }\n                />\n                <ListItem\n                    index={2}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    icon={\n                        <Avatar\n                            image={\n                                <Avatar.Image src=\"https://i.pravatar.cc/300?img=2\" alt=\"@webiny\" />\n                            }\n                            fallback={<Avatar.Fallback>W</Avatar.Fallback>}\n                        />\n                    }\n                />\n            </>\n        )\n    }\n};\n\nexport const WithHandle: Story = {\n    args: {\n        ...Default.args,\n        children: (\n            <>\n                <ListItem\n                    index={1}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    handle={<List.Item.Handle />}\n                />\n                <ListItem\n                    index={2}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    handle={<List.Item.Handle />}\n                />\n            </>\n        )\n    }\n};\n\nexport const WithActions: Story = {\n    ...Default,\n    args: {\n        children: (\n            <>\n                <ListItem\n                    index={1}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    icon={<List.Item.Icon icon={<ChartIcon />} label={\"Chart\"} />}\n                    actions={\n                        <>\n                            <List.Item.Action icon={<EditIcon />} />\n                            <List.Item.Action icon={<TrashIcon />} />\n                            <List.Item.Action.Separator />\n                            <List.Item.Action icon={<OpenIcon />} />\n                            <List.Item.Action icon={<MoreIcon />} />\n                        </>\n                    }\n                />\n                <ListItem\n                    index={2}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    icon={<List.Item.Icon icon={<ChartIcon />} label={\"Chart\"} />}\n                    actions={\n                        <>\n                            <List.Item.Action icon={<EditIcon />} />\n                            <List.Item.Action icon={<TrashIcon />} />\n                            <List.Item.Action.Separator />\n                            <List.Item.Action icon={<OpenIcon />} />\n                            <List.Item.Action icon={<MoreIcon />} />\n                        </>\n                    }\n                />\n            </>\n        )\n    }\n};\n\nexport const WithDisabled: Story = {\n    args: {\n        children: (\n            <>\n                <List.Item\n                    title=\"User Profile\"\n                    description=\"View and edit your profile information\"\n                    onClick={() => alert(\"User Profile clicked\")}\n                />\n                <List.Item\n                    title=\"Settings\"\n                    description=\"Configure application settings\"\n                    disabled={true}\n                    onClick={() => alert(\"This alert won't show because the item is disabled\")}\n                />\n                <List.Item\n                    title=\"Help & Support\"\n                    description=\"Get assistance and view documentation\"\n                    onClick={() => alert(\"Help & Support clicked\")}\n                />\n            </>\n        )\n    }\n};\n\nexport const WithActivated: Story = {\n    args: {\n        children: (\n            <>\n                <List.Item\n                    title=\"User Profile\"\n                    description=\"View and edit your profile information\"\n                    activated={true}\n                    onClick={() => console.log(\"User Profile clicked\")}\n                />\n                <List.Item\n                    title=\"Settings\"\n                    description=\"Configure application settings\"\n                    onClick={() => console.log(\"Settings clicked\")}\n                />\n                <List.Item\n                    title=\"Help & Support\"\n                    description=\"Get assistance and view documentation\"\n                    onClick={() => console.log(\"Help & Support clicked\")}\n                />\n            </>\n        )\n    }\n};\n\nexport const WithClickHandlers: Story = {\n    args: {\n        children: (\n            <>\n                <List.Item\n                    title=\"User Profile\"\n                    description=\"View and edit your profile information\"\n                    onClick={() => alert(\"User Profile clicked\")}\n                />\n                <List.Item\n                    title=\"Settings\"\n                    description=\"Configure application settings\"\n                    onClick={() => alert(\"Settings clicked\")}\n                />\n                <List.Item\n                    title=\"Help & Support\"\n                    description=\"Get assistance and view documentation\"\n                    onClick={() => alert(\"Help & Support clicked\")}\n                />\n            </>\n        )\n    }\n};\n\nexport const WithSelectedItem: Story = {\n    render: () => {\n        // Using render function to handle state\n        const [selectedIndex, setSelectedIndex] = React.useState(0);\n\n        return (\n            <List>\n                <List.Item\n                    title=\"User Profile\"\n                    description=\"View and edit your profile information\"\n                    selected={selectedIndex === 0}\n                    onClick={() => setSelectedIndex(0)}\n                />\n                <List.Item\n                    title=\"Settings\"\n                    description=\"Configure application settings\"\n                    selected={selectedIndex === 1}\n                    onClick={() => setSelectedIndex(1)}\n                />\n                <List.Item\n                    title=\"Help & Support\"\n                    description=\"Get assistance and view documentation\"\n                    selected={selectedIndex === 2}\n                    onClick={() => setSelectedIndex(2)}\n                />\n            </List>\n        );\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        variant: \"underline\",\n        background: \"base\",\n        children: (\n            <>\n                <List.Item\n                    icon={<UserIcon />}\n                    title=\"User Profile\"\n                    description=\"View and edit your profile information\"\n                    onClick={() => console.log(\"User Profile clicked\")}\n                />\n                <List.Item\n                    icon={<SettingsIcon />}\n                    title=\"Settings\"\n                    description=\"Configure application settings\"\n                    onClick={() => console.log(\"Settings clicked\")}\n                />\n                <List.Item\n                    icon={<HelpIcon />}\n                    title=\"Help & Support\"\n                    description=\"Get assistance and view documentation\"\n                    onClick={() => console.log(\"Help & Support clicked\")}\n                />\n            </>\n        )\n    },\n    argTypes: {\n        variant: {\n            control: \"select\",\n            options: [\"underline\", \"container\"],\n            description: \"The visual style of the list\"\n        },\n        background: {\n            control: \"select\",\n            options: [\"base\", \"light\", \"transparent\"],\n            description: \"The background color of the list\"\n        },\n        children: {\n            description: \"The content of the list. Please refer to the example code for details.\"\n        }\n    },\n    parameters: {\n        docs: {\n            description: {\n                story: \"This example shows a List with icons, titles, descriptions, and click handlers.\"\n            }\n        }\n    }\n};\n"],"names":["meta","List","ListItem","props","Default","WithTransparentBackground","UserIcon","SettingsIcon","HelpIcon","Story","WithBaseBackground","WithLightBackground","WithUnderlineVariant","WithContainerVariant","WithDescription","WithIcon","WithIconsAndDescriptions","WithAvatar","Avatar","WithHandle","WithActions","ChartIcon","EditIcon","TrashIcon","OpenIcon","MoreIcon","WithDisabled","alert","WithActivated","console","WithClickHandlers","WithSelectedItem","selectedIndex","setSelectedIndex","React","Documentation"],"mappings":"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"}
+{"version":3,"file":"List/List.stories.js","sources":["../../src/List/List.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as ChartIcon } from \"@webiny/icons/insert_chart.svg\";\nimport { ReactComponent as MoreIcon } from \"@webiny/icons/more_vert.svg\";\nimport { ReactComponent as OpenIcon } from \"@webiny/icons/visibility.svg\";\nimport { ReactComponent as EditIcon } from \"@webiny/icons/edit.svg\";\nimport { ReactComponent as TrashIcon } from \"@webiny/icons/delete.svg\";\nimport { ReactComponent as UserIcon } from \"@webiny/icons/person.svg\";\nimport { ReactComponent as SettingsIcon } from \"@webiny/icons/settings.svg\";\nimport { ReactComponent as HelpIcon } from \"@webiny/icons/help.svg\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { List, type ListItemProps as BaseListItemProps } from \"./List.js\";\nimport { Avatar } from \"~/Avatar/index.js\";\n\nconst meta: Meta<typeof List> = {\n    title: \"Components/List\",\n    component: List,\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof List>;\n\ninterface ListItemProps extends Omit<BaseListItemProps, \"title\"> {\n    index: number;\n}\n\nconst ListItem = (props: ListItemProps) => {\n    return <List.Item title={`List item ${props.index}`} {...props} />;\n};\n\nexport const Default: Story = {\n    args: {\n        children: (\n            <>\n                <ListItem index={1} />\n                <ListItem index={2} />\n                <ListItem index={3} />\n            </>\n        )\n    }\n};\n\nexport const WithTransparentBackground: Story = {\n    args: {\n        background: \"transparent\",\n        children: (\n            <>\n                <List.Item\n                    icon={<UserIcon />}\n                    title=\"User Profile\"\n                    description=\"View and edit your profile information\"\n                />\n                <List.Item\n                    icon={<SettingsIcon />}\n                    title=\"Settings\"\n                    description=\"Configure application settings\"\n                />\n                <List.Item\n                    icon={<HelpIcon />}\n                    title=\"Help & Support\"\n                    description=\"Get assistance and view documentation\"\n                />\n            </>\n        )\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-light p-md\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const WithBaseBackground: Story = {\n    args: {\n        ...Default.args,\n        background: \"base\"\n    }\n};\n\nexport const WithLightBackground: Story = {\n    args: {\n        background: \"light\",\n        children: (\n            <>\n                <List.Item\n                    icon={<UserIcon />}\n                    title=\"User Profile\"\n                    description=\"View and edit your profile information\"\n                />\n                <List.Item\n                    icon={<SettingsIcon />}\n                    title=\"Settings\"\n                    description=\"Configure application settings\"\n                />\n                <List.Item\n                    icon={<HelpIcon />}\n                    title=\"Help & Support\"\n                    description=\"Get assistance and view documentation\"\n                />\n            </>\n        )\n    }\n};\n\nexport const WithUnderlineVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"underline\"\n    }\n};\n\nexport const WithContainerVariant: Story = {\n    args: {\n        variant: \"container\",\n        children: (\n            <>\n                <List.Item\n                    icon={<UserIcon />}\n                    title=\"User Profile\"\n                    description=\"View and edit your profile information\"\n                />\n                <List.Item\n                    icon={<SettingsIcon />}\n                    title=\"Settings\"\n                    description=\"Configure application settings\"\n                />\n                <List.Item\n                    icon={<HelpIcon />}\n                    title=\"Help & Support\"\n                    description=\"Get assistance and view documentation\"\n                />\n            </>\n        )\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-light p-md\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const WithDescription: Story = {\n    args: {\n        children: (\n            <>\n                <List.Item\n                    title=\"User Profile\"\n                    description=\"View and edit your profile information\"\n                />\n                <List.Item title=\"Settings\" description=\"Configure application settings\" />\n                <List.Item\n                    title=\"Help & Support\"\n                    description=\"Get assistance and view documentation\"\n                />\n            </>\n        )\n    }\n};\n\nexport const WithIcon: Story = {\n    args: {\n        children: (\n            <>\n                <List.Item icon={<UserIcon />} title=\"User Profile\" />\n                <List.Item icon={<SettingsIcon />} title=\"Settings\" />\n                <List.Item icon={<HelpIcon />} title=\"Help & Support\" />\n            </>\n        )\n    }\n};\n\nexport const WithIconsAndDescriptions: Story = {\n    args: {\n        children: (\n            <>\n                <List.Item\n                    icon={<UserIcon />}\n                    title=\"User Profile\"\n                    description=\"View and edit your profile information\"\n                />\n                <List.Item\n                    icon={<SettingsIcon />}\n                    title=\"Settings\"\n                    description=\"Configure application settings\"\n                />\n                <List.Item\n                    icon={<HelpIcon />}\n                    title=\"Help & Support\"\n                    description=\"Get assistance and view documentation\"\n                />\n            </>\n        )\n    }\n};\n\nexport const WithAvatar: Story = {\n    args: {\n        ...Default.args,\n        children: (\n            <>\n                <ListItem\n                    index={1}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    icon={\n                        <Avatar\n                            image={\n                                <Avatar.Image src=\"https://i.pravatar.cc/300?img=1\" alt=\"@webiny\" />\n                            }\n                            fallback={<Avatar.Fallback>W</Avatar.Fallback>}\n                        />\n                    }\n                />\n                <ListItem\n                    index={2}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    icon={\n                        <Avatar\n                            image={\n                                <Avatar.Image src=\"https://i.pravatar.cc/300?img=2\" alt=\"@webiny\" />\n                            }\n                            fallback={<Avatar.Fallback>W</Avatar.Fallback>}\n                        />\n                    }\n                />\n            </>\n        )\n    }\n};\n\nexport const WithHandle: Story = {\n    args: {\n        ...Default.args,\n        children: (\n            <>\n                <ListItem\n                    index={1}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    handle={<List.Item.Handle />}\n                />\n                <ListItem\n                    index={2}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    handle={<List.Item.Handle />}\n                />\n            </>\n        )\n    }\n};\n\nexport const WithActions: Story = {\n    ...Default,\n    args: {\n        children: (\n            <>\n                <ListItem\n                    index={1}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    icon={<List.Item.Icon icon={<ChartIcon />} label={\"Chart\"} />}\n                    actions={\n                        <>\n                            <List.Item.Action icon={<EditIcon />} />\n                            <List.Item.Action icon={<TrashIcon />} />\n                            <List.Item.Action.Separator />\n                            <List.Item.Action icon={<OpenIcon />} />\n                            <List.Item.Action icon={<MoreIcon />} />\n                        </>\n                    }\n                />\n                <ListItem\n                    index={2}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    icon={<List.Item.Icon icon={<ChartIcon />} label={\"Chart\"} />}\n                    actions={\n                        <>\n                            <List.Item.Action icon={<EditIcon />} />\n                            <List.Item.Action icon={<TrashIcon />} />\n                            <List.Item.Action.Separator />\n                            <List.Item.Action icon={<OpenIcon />} />\n                            <List.Item.Action icon={<MoreIcon />} />\n                        </>\n                    }\n                />\n            </>\n        )\n    }\n};\n\nexport const WithDisabled: Story = {\n    args: {\n        children: (\n            <>\n                <List.Item\n                    title=\"User Profile\"\n                    description=\"View and edit your profile information\"\n                    onClick={() => alert(\"User Profile clicked\")}\n                />\n                <List.Item\n                    title=\"Settings\"\n                    description=\"Configure application settings\"\n                    disabled={true}\n                    onClick={() => alert(\"This alert won't show because the item is disabled\")}\n                />\n                <List.Item\n                    title=\"Help & Support\"\n                    description=\"Get assistance and view documentation\"\n                    onClick={() => alert(\"Help & Support clicked\")}\n                />\n            </>\n        )\n    }\n};\n\nexport const WithActivated: Story = {\n    args: {\n        children: (\n            <>\n                <List.Item\n                    title=\"User Profile\"\n                    description=\"View and edit your profile information\"\n                    activated={true}\n                    onClick={() => console.log(\"User Profile clicked\")}\n                />\n                <List.Item\n                    title=\"Settings\"\n                    description=\"Configure application settings\"\n                    onClick={() => console.log(\"Settings clicked\")}\n                />\n                <List.Item\n                    title=\"Help & Support\"\n                    description=\"Get assistance and view documentation\"\n                    onClick={() => console.log(\"Help & Support clicked\")}\n                />\n            </>\n        )\n    }\n};\n\nexport const WithClickHandlers: Story = {\n    args: {\n        children: (\n            <>\n                <List.Item\n                    title=\"User Profile\"\n                    description=\"View and edit your profile information\"\n                    onClick={() => alert(\"User Profile clicked\")}\n                />\n                <List.Item\n                    title=\"Settings\"\n                    description=\"Configure application settings\"\n                    onClick={() => alert(\"Settings clicked\")}\n                />\n                <List.Item\n                    title=\"Help & Support\"\n                    description=\"Get assistance and view documentation\"\n                    onClick={() => alert(\"Help & Support clicked\")}\n                />\n            </>\n        )\n    }\n};\n\nexport const WithSelectedItem: Story = {\n    render: () => {\n        // Using render function to handle state\n        const [selectedIndex, setSelectedIndex] = React.useState(0);\n\n        return (\n            <List>\n                <List.Item\n                    title=\"User Profile\"\n                    description=\"View and edit your profile information\"\n                    selected={selectedIndex === 0}\n                    onClick={() => setSelectedIndex(0)}\n                />\n                <List.Item\n                    title=\"Settings\"\n                    description=\"Configure application settings\"\n                    selected={selectedIndex === 1}\n                    onClick={() => setSelectedIndex(1)}\n                />\n                <List.Item\n                    title=\"Help & Support\"\n                    description=\"Get assistance and view documentation\"\n                    selected={selectedIndex === 2}\n                    onClick={() => setSelectedIndex(2)}\n                />\n            </List>\n        );\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        variant: \"underline\",\n        background: \"base\",\n        children: (\n            <>\n                <List.Item\n                    icon={<UserIcon />}\n                    title=\"User Profile\"\n                    description=\"View and edit your profile information\"\n                    onClick={() => console.log(\"User Profile clicked\")}\n                />\n                <List.Item\n                    icon={<SettingsIcon />}\n                    title=\"Settings\"\n                    description=\"Configure application settings\"\n                    onClick={() => console.log(\"Settings clicked\")}\n                />\n                <List.Item\n                    icon={<HelpIcon />}\n                    title=\"Help & Support\"\n                    description=\"Get assistance and view documentation\"\n                    onClick={() => console.log(\"Help & Support clicked\")}\n                />\n            </>\n        )\n    },\n    argTypes: {\n        variant: {\n            control: \"select\",\n            options: [\"underline\", \"container\"],\n            description: \"The visual style of the list\"\n        },\n        background: {\n            control: \"select\",\n            options: [\"base\", \"light\", \"transparent\"],\n            description: \"The background color of the list\"\n        },\n        children: {\n            description: \"The content of the list. Please refer to the example code for details.\"\n        }\n    },\n    parameters: {\n        docs: {\n            description: {\n                story: \"This example shows a List with icons, titles, descriptions, and click handlers.\"\n            }\n        }\n    }\n};\n"],"names":["meta","List","ListItem","props","Default","WithTransparentBackground","UserIcon","SettingsIcon","HelpIcon","Story","WithBaseBackground","WithLightBackground","WithUnderlineVariant","WithContainerVariant","WithDescription","WithIcon","WithIconsAndDescriptions","WithAvatar","Avatar","WithHandle","WithActions","ChartIcon","EditIcon","TrashIcon","OpenIcon","MoreIcon","WithDisabled","alert","WithActivated","console","WithClickHandlers","WithSelectedItem","selectedIndex","setSelectedIndex","React","Documentation"],"mappings":"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"}

package/Loader/Loader.stories.d.ts

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