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

package/Button/Button.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button/Button.stories.js","sources":["../../src/Button/Button.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { ReactComponent as PencilIcon } from \"@webiny/icons/edit.svg\";\nimport { Button } from \"./Button.js\";\n\n// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export\nconst meta: Meta<typeof Button> = {\n    title: \"Components/Button\",\n    component: Button,\n    argTypes: {\n        variant: {\n            description: \"Type\",\n            control: \"select\",\n            options: [\"primary\", \"secondary\", \"tertiary\", \"ghost\", \"ghost-negative\"],\n            defaultValue: \"primary\"\n        },\n        size: {\n            description: \"Size\",\n            control: \"select\",\n            options: [\"sm\", \"md\", \"lg\", \"xl\"],\n            defaultValue: \"md\"\n        },\n        text: {\n            description: \"Label\",\n            control: \"text\",\n            defaultValue: \"Button\"\n        },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        },\n        icon: {\n            description: \"Please refer to the 'With Icon' button example below for details.\"\n        },\n        iconPosition: {\n            description: \"Please refer to the 'With Icon' button example below for details.\",\n            control: \"select\",\n            defaultValue: \"start\",\n            options: [\"start\", \"end\"]\n        },\n        asChild: {\n            description: \"Please refer to the 'As Child' button example below for details.\"\n        },\n        // Note: after upgrading to Storybook 8.X, use `fn`from `@storybook/test` to spy on the onClick argument.\n        onClick: { action: \"onClick\" }\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Button>;\n\nexport const Primary: Story = {\n    args: {\n        variant: \"primary\",\n        text: \"Button\"\n    }\n};\n\nexport const Secondary: Story = {\n    args: {\n        ...Primary.args,\n        variant: \"secondary\"\n    }\n};\n\nexport const Tertiary: Story = {\n    args: {\n        ...Primary.args,\n        variant: \"tertiary\"\n    }\n};\n\nexport const Ghost: Story = {\n    args: {\n        ...Primary.args,\n        variant: \"ghost\"\n    }\n};\n\nexport const GhostNegative: Story = {\n    decorators: [\n        (Story: any) => (\n            <div className=\"bg-[#25292e] p-[50px] rounded-[5px]\">\n                <Story />\n            </div>\n        )\n    ],\n    args: {\n        ...Primary.args,\n        variant: \"ghost-negative\"\n    }\n};\n\nexport const Small: Story = {\n    args: {\n        ...Primary.args,\n        size: \"sm\"\n    }\n};\n\nexport const Medium: Story = {\n    args: {\n        ...Primary.args,\n        size: \"md\"\n    }\n};\n\nexport const Large: Story = {\n    args: {\n        ...Primary.args,\n        size: \"lg\"\n    }\n};\n\nexport const ExtraLarge: Story = {\n    args: {\n        ...Primary.args,\n        size: \"xl\"\n    }\n};\n\nexport const WithIcon: Story = {\n    args: {\n        ...Primary.args,\n        icon: <PencilIcon />\n    }\n};\n\nexport const WithIconPositionEnd: Story = {\n    args: {\n        ...Primary.args,\n        icon: <PencilIcon />,\n        iconPosition: \"end\"\n    }\n};\n\nexport const WithAsChild: Story = {\n    args: {\n        ...Primary.args,\n        asChild: true,\n        text: <span>Button</span>\n    }\n};\n\n/* The Documentation story is created for the Docs page.\n * The description column for the `iconPosition` and `icon` props displays\n * an extra dash (-), and the formatting breaks unless defined in the story.\n * Hence, this Documentation story was created.\n */\n\nexport const Documentation: Story = {\n    args: {\n        variant: \"primary\",\n        text: \"Button\",\n        size: \"md\",\n        disabled: false,\n        icon: \"\",\n        iconPosition: \"start\",\n        asChild: false\n    }\n};\n"],"names":["meta","Button","Primary","Secondary","Tertiary","Ghost","GhostNegative","Story","Small","Medium","Large","ExtraLarge","WithIcon","PencilIcon","WithIconPositionEnd","WithAsChild","Documentation"],"mappings":";;;AAMA,MAAMA,OAA4B;IAC9B,OAAO;IACP,WAAWC;IACX,UAAU;QACN,SAAS;YACL,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAW;gBAAa;gBAAY;gBAAS;aAAiB;YACxE,cAAc;QAClB;QACA,MAAM;YACF,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAM;gBAAM;gBAAM;aAAK;YACjC,cAAc;QAClB;QACA,MAAM;YACF,aAAa;YACb,SAAS;YACT,cAAc;QAClB;QACA,UAAU;YACN,SAAS;YACT,cAAc;QAClB;QACA,MAAM;YACF,aAAa;QACjB;QACA,cAAc;YACV,aAAa;YACb,SAAS;YACT,cAAc;YACd,SAAS;gBAAC;gBAAS;aAAM;QAC7B;QACA,SAAS;YACL,aAAa;QACjB;QAEA,SAAS;YAAE,QAAQ;QAAU;IACjC;AACJ;AAEA,uBAAeD;AAGR,MAAME,UAAiB;IAC1B,MAAM;QACF,SAAS;QACT,MAAM;IACV;AACJ;AAEO,MAAMC,YAAmB;IAC5B,MAAM;QACF,GAAGD,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAME,WAAkB;IAC3B,MAAM;QACF,GAAGF,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAMG,QAAe;IACxB,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAMI,gBAAuB;IAChC,YAAY;QACR,CAACC,QAAAA,WAAAA,GACG,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;IACD,MAAM;QACF,GAAGL,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAMM,QAAe;IACxB,MAAM;QACF,GAAGN,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMO,SAAgB;IACzB,MAAM;QACF,GAAGP,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMQ,QAAe;IACxB,MAAM;QACF,GAAGR,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMS,aAAoB;IAC7B,MAAM;QACF,GAAGT,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMU,WAAkB;IAC3B,MAAM;QACF,GAAGV,QAAQ,IAAI;QACf,MAAM,WAAN,GAAM,oBAACW,gBAAUA;IACrB;AACJ;AAEO,MAAMC,sBAA6B;IACtC,MAAM;QACF,GAAGZ,QAAQ,IAAI;QACf,MAAM,WAAN,GAAM,oBAACW,gBAAUA;QACjB,cAAc;IAClB;AACJ;AAEO,MAAME,cAAqB;IAC9B,MAAM;QACF,GAAGb,QAAQ,IAAI;QACf,SAAS;QACT,MAAM,WAAN,GAAM,oBAAC,cAAK;IAChB;AACJ;AAQO,MAAMc,gBAAuB;IAChC,MAAM;QACF,SAAS;QACT,MAAM;QACN,MAAM;QACN,UAAU;QACV,MAAM;QACN,cAAc;QACd,SAAS;IACb;AACJ"}
+{"version":3,"file":"Button/Button.stories.js","sources":["../../src/Button/Button.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { ReactComponent as PencilIcon } from \"@webiny/icons/edit.svg\";\nimport { Button } from \"./Button.js\";\n\n// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export\nconst meta: Meta<typeof Button> = {\n    title: \"Components/Button\",\n    component: Button,\n    argTypes: {\n        variant: {\n            description: \"Type\",\n            control: \"select\",\n            options: [\"primary\", \"secondary\", \"tertiary\", \"ghost\", \"ghost-negative\"],\n            defaultValue: \"primary\"\n        },\n        size: {\n            description: \"Size\",\n            control: \"select\",\n            options: [\"sm\", \"md\", \"lg\", \"xl\"],\n            defaultValue: \"md\"\n        },\n        text: {\n            description: \"Label\",\n            control: \"text\",\n            defaultValue: \"Button\"\n        },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        },\n        icon: {\n            description: \"Please refer to the 'With Icon' button example below for details.\"\n        },\n        iconPosition: {\n            description: \"Please refer to the 'With Icon' button example below for details.\",\n            control: \"select\",\n            defaultValue: \"start\",\n            options: [\"start\", \"end\"]\n        },\n        asChild: {\n            description: \"Please refer to the 'As Child' button example below for details.\"\n        },\n        // Note: after upgrading to Storybook 8.X, use `fn`from `@storybook/test` to spy on the onClick argument.\n        onClick: { action: \"onClick\" }\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Button>;\n\nexport const Primary: Story = {\n    args: {\n        variant: \"primary\",\n        text: \"Button\"\n    }\n};\n\nexport const Secondary: Story = {\n    args: {\n        ...Primary.args,\n        variant: \"secondary\"\n    }\n};\n\nexport const Tertiary: Story = {\n    args: {\n        ...Primary.args,\n        variant: \"tertiary\"\n    }\n};\n\nexport const Ghost: Story = {\n    args: {\n        ...Primary.args,\n        variant: \"ghost\"\n    }\n};\n\nexport const GhostNegative: Story = {\n    decorators: [\n        (Story: any) => (\n            <div className=\"bg-[#25292e] p-[50px] rounded-[5px]\">\n                <Story />\n            </div>\n        )\n    ],\n    args: {\n        ...Primary.args,\n        variant: \"ghost-negative\"\n    }\n};\n\nexport const Small: Story = {\n    args: {\n        ...Primary.args,\n        size: \"sm\"\n    }\n};\n\nexport const Medium: Story = {\n    args: {\n        ...Primary.args,\n        size: \"md\"\n    }\n};\n\nexport const Large: Story = {\n    args: {\n        ...Primary.args,\n        size: \"lg\"\n    }\n};\n\nexport const ExtraLarge: Story = {\n    args: {\n        ...Primary.args,\n        size: \"xl\"\n    }\n};\n\nexport const WithIcon: Story = {\n    args: {\n        ...Primary.args,\n        icon: <PencilIcon />\n    }\n};\n\nexport const WithIconPositionEnd: Story = {\n    args: {\n        ...Primary.args,\n        icon: <PencilIcon />,\n        iconPosition: \"end\"\n    }\n};\n\nexport const WithAsChild: Story = {\n    args: {\n        ...Primary.args,\n        asChild: true,\n        text: <span>Button</span>\n    }\n};\n\n/* The Documentation story is created for the Docs page.\n * The description column for the `iconPosition` and `icon` props displays\n * an extra dash (-), and the formatting breaks unless defined in the story.\n * Hence, this Documentation story was created.\n */\n\nexport const Documentation: Story = {\n    args: {\n        variant: \"primary\",\n        text: \"Button\",\n        size: \"md\",\n        disabled: false,\n        icon: \"\",\n        iconPosition: \"start\",\n        asChild: false\n    }\n};\n"],"names":["meta","Button","Primary","Secondary","Tertiary","Ghost","GhostNegative","Story","Small","Medium","Large","ExtraLarge","WithIcon","PencilIcon","WithIconPositionEnd","WithAsChild","Documentation"],"mappings":";;;AAMA,MAAMA,OAA4B;IAC9B,OAAO;IACP,WAAWC;IACX,UAAU;QACN,SAAS;YACL,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAW;gBAAa;gBAAY;gBAAS;aAAiB;YACxE,cAAc;QAClB;QACA,MAAM;YACF,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAM;gBAAM;gBAAM;aAAK;YACjC,cAAc;QAClB;QACA,MAAM;YACF,aAAa;YACb,SAAS;YACT,cAAc;QAClB;QACA,UAAU;YACN,SAAS;YACT,cAAc;QAClB;QACA,MAAM;YACF,aAAa;QACjB;QACA,cAAc;YACV,aAAa;YACb,SAAS;YACT,cAAc;YACd,SAAS;gBAAC;gBAAS;aAAM;QAC7B;QACA,SAAS;YACL,aAAa;QACjB;QAEA,SAAS;YAAE,QAAQ;QAAU;IACjC;AACJ;AAEA,uBAAeD;AAGR,MAAME,UAAiB;IAC1B,MAAM;QACF,SAAS;QACT,MAAM;IACV;AACJ;AAEO,MAAMC,YAAmB;IAC5B,MAAM;QACF,GAAGD,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAME,WAAkB;IAC3B,MAAM;QACF,GAAGF,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAMG,QAAe;IACxB,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAMI,gBAAuB;IAChC,YAAY;QACR,CAACC,QAAAA,WAAAA,GACG,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;IACD,MAAM;QACF,GAAGL,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAMM,QAAe;IACxB,MAAM;QACF,GAAGN,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMO,SAAgB;IACzB,MAAM;QACF,GAAGP,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMQ,QAAe;IACxB,MAAM;QACF,GAAGR,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMS,aAAoB;IAC7B,MAAM;QACF,GAAGT,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMU,WAAkB;IAC3B,MAAM;QACF,GAAGV,QAAQ,IAAI;QACf,MAAM,WAAN,GAAM,oBAACW,gBAAUA;IACrB;AACJ;AAEO,MAAMC,sBAA6B;IACtC,MAAM;QACF,GAAGZ,QAAQ,IAAI;QACf,MAAM,WAAN,GAAM,oBAACW,gBAAUA;QACjB,cAAc;IAClB;AACJ;AAEO,MAAME,cAAqB;IAC9B,MAAM;QACF,GAAGb,QAAQ,IAAI;QACf,SAAS;QACT,MAAM,WAAN,GAAM,oBAAC,cAAK;IAChB;AACJ;AAQO,MAAMc,gBAAuB;IAChC,MAAM;QACF,SAAS;QACT,MAAM;QACN,MAAM;QACN,UAAU;QACV,MAAM;QACN,cAAc;QACd,SAAS;IACb;AACJ"}

package/Button/IconButton.stories.d.ts

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

package/Button/IconButton.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button/IconButton.stories.js","sources":["../../src/Button/IconButton.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport { IconButton } from \"./IconButton.js\";\n\nconst meta: Meta<typeof IconButton> = {\n    title: \"Components/Icon Button\",\n    component: IconButton,\n    tags: [\"!autodocs\"],\n    argTypes: {\n        variant: {\n            description: \"Type\",\n            control: \"select\",\n            options: [\"primary\", \"secondary\", \"tertiary\", \"ghost\", \"ghost-negative\"],\n            defaultValue: \"primary\"\n        },\n        size: {\n            description: \"Size\",\n            control: \"select\",\n            options: [\"xxs\", \"xs\", \"sm\", \"md\", \"lg\", \"xl\"],\n            defaultValue: \"md\"\n        },\n        iconSize: {\n            description: \"Icon Size\",\n            control: \"select\",\n            options: [\"default\", \"lg\"],\n            defaultValue: \"default\"\n        },\n        disabled: {\n            description: \"State\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        icon: {\n            description: \"Please refer to the example above for usage information.\"\n        },\n        onClick: { action: \"onClick\" }\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof IconButton>;\n\nexport const Primary: Story = {\n    args: {\n        variant: \"primary\",\n        icon: <AddIcon />\n    }\n};\n\nexport const Secondary: Story = {\n    args: {\n        ...Primary.args,\n        variant: \"secondary\"\n    }\n};\n\nexport const Tertiary: Story = {\n    args: {\n        ...Primary.args,\n        variant: \"tertiary\"\n    }\n};\n\nexport const Ghost: Story = {\n    args: {\n        ...Primary.args,\n        variant: \"ghost\"\n    }\n};\n\nexport const GhostNegative: Story = {\n    decorators: [\n        Story => (\n            <div className=\"bg-[#25292e] p-[300px] rounded-[5px]\">\n                <Story />\n            </div>\n        )\n    ],\n    args: {\n        ...Primary.args,\n        variant: \"ghost-negative\"\n    }\n};\n\nexport const DoubleExtraSmall: Story = {\n    args: {\n        ...Primary.args,\n        size: \"xxs\"\n    }\n};\n\nexport const ExtraSmall: Story = {\n    args: {\n        ...Primary.args,\n        size: \"xs\"\n    }\n};\n\nexport const Small: Story = {\n    args: {\n        ...Primary.args,\n        size: \"sm\"\n    }\n};\n\nexport const SmallWithLargeIcon: Story = {\n    args: {\n        ...Primary.args,\n        size: \"sm\",\n        iconSize: \"lg\"\n    }\n};\n\nexport const Medium: Story = {\n    args: {\n        ...Primary.args,\n        size: \"md\"\n    }\n};\n\nexport const MediumWithLargeIcon: Story = {\n    args: {\n        ...Primary.args,\n        size: \"md\",\n        iconSize: \"lg\"\n    }\n};\n\nexport const Large: Story = {\n    args: {\n        ...Primary.args,\n        size: \"lg\"\n    }\n};\n\nexport const LargeWithLargeIcon: Story = {\n    args: {\n        ...Primary.args,\n        size: \"lg\",\n        iconSize: \"lg\"\n    }\n};\n\nexport const ExtraLarge: Story = {\n    args: {\n        ...Primary.args,\n        size: \"xl\"\n    }\n};\n\nexport const WithAsChild: Story = {\n    args: {\n        ...Primary.args,\n        asChild: true,\n        icon: (\n            <span>\n                <AddIcon />\n            </span>\n        )\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        variant: \"primary\",\n        size: \"md\",\n        disabled: false,\n        icon: <AddIcon />,\n        iconSize: \"default\"\n    }\n};\n"],"names":["meta","IconButton","Primary","AddIcon","Secondary","Tertiary","Ghost","GhostNegative","Story","DoubleExtraSmall","ExtraSmall","Small","SmallWithLargeIcon","Medium","MediumWithLargeIcon","Large","LargeWithLargeIcon","ExtraLarge","WithAsChild","Documentation"],"mappings":";;;AAKA,MAAMA,OAAgC;IAClC,OAAO;IACP,WAAWC;IACX,MAAM;QAAC;KAAY;IACnB,UAAU;QACN,SAAS;YACL,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAW;gBAAa;gBAAY;gBAAS;aAAiB;YACxE,cAAc;QAClB;QACA,MAAM;YACF,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAO;gBAAM;gBAAM;gBAAM;gBAAM;aAAK;YAC9C,cAAc;QAClB;QACA,UAAU;YACN,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAW;aAAK;YAC1B,cAAc;QAClB;QACA,UAAU;YACN,aAAa;YACb,SAAS;YACT,cAAc;QAClB;QACA,MAAM;YACF,aAAa;QACjB;QACA,SAAS;YAAE,QAAQ;QAAU;IACjC;AACJ;AAEA,2BAAeD;AAGR,MAAME,UAAiB;IAC1B,MAAM;QACF,SAAS;QACT,MAAM,WAAN,GAAM,oBAACC,gBAAOA;IAClB;AACJ;AAEO,MAAMC,YAAmB;IAC5B,MAAM;QACF,GAAGF,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAMG,WAAkB;IAC3B,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAMI,QAAe;IACxB,MAAM;QACF,GAAGJ,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAMK,gBAAuB;IAChC,YAAY;QACRC,CAAAA,QAAAA,WAAAA,GACI,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;IACD,MAAM;QACF,GAAGN,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAMO,mBAA0B;IACnC,MAAM;QACF,GAAGP,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMQ,aAAoB;IAC7B,MAAM;QACF,GAAGR,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMS,QAAe;IACxB,MAAM;QACF,GAAGT,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMU,qBAA4B;IACrC,MAAM;QACF,GAAGV,QAAQ,IAAI;QACf,MAAM;QACN,UAAU;IACd;AACJ;AAEO,MAAMW,SAAgB;IACzB,MAAM;QACF,GAAGX,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMY,sBAA6B;IACtC,MAAM;QACF,GAAGZ,QAAQ,IAAI;QACf,MAAM;QACN,UAAU;IACd;AACJ;AAEO,MAAMa,QAAe;IACxB,MAAM;QACF,GAAGb,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMc,qBAA4B;IACrC,MAAM;QACF,GAAGd,QAAQ,IAAI;QACf,MAAM;QACN,UAAU;IACd;AACJ;AAEO,MAAMe,aAAoB;IAC7B,MAAM;QACF,GAAGf,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMgB,cAAqB;IAC9B,MAAM;QACF,GAAGhB,QAAQ,IAAI;QACf,SAAS;QACT,MAAM,WAAN,GACI,oBAAC,4BACG,oBAACC,gBAAOA;IAGpB;AACJ;AAEO,MAAMgB,gBAAuB;IAChC,MAAM;QACF,SAAS;QACT,MAAM;QACN,UAAU;QACV,MAAM,WAAN,GAAM,oBAAChB,gBAAOA;QACd,UAAU;IACd;AACJ"}
+{"version":3,"file":"Button/IconButton.stories.js","sources":["../../src/Button/IconButton.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport { IconButton } from \"./IconButton.js\";\n\nconst meta: Meta<typeof IconButton> = {\n    title: \"Components/Icon Button\",\n    component: IconButton,\n    tags: [\"!autodocs\"],\n    argTypes: {\n        variant: {\n            description: \"Type\",\n            control: \"select\",\n            options: [\"primary\", \"secondary\", \"tertiary\", \"ghost\", \"ghost-negative\"],\n            defaultValue: \"primary\"\n        },\n        size: {\n            description: \"Size\",\n            control: \"select\",\n            options: [\"xxs\", \"xs\", \"sm\", \"md\", \"lg\", \"xl\"],\n            defaultValue: \"md\"\n        },\n        iconSize: {\n            description: \"Icon Size\",\n            control: \"select\",\n            options: [\"default\", \"lg\"],\n            defaultValue: \"default\"\n        },\n        disabled: {\n            description: \"State\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        icon: {\n            description: \"Please refer to the example above for usage information.\"\n        },\n        onClick: { action: \"onClick\" }\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof IconButton>;\n\nexport const Primary: Story = {\n    args: {\n        variant: \"primary\",\n        icon: <AddIcon />\n    }\n};\n\nexport const Secondary: Story = {\n    args: {\n        ...Primary.args,\n        variant: \"secondary\"\n    }\n};\n\nexport const Tertiary: Story = {\n    args: {\n        ...Primary.args,\n        variant: \"tertiary\"\n    }\n};\n\nexport const Ghost: Story = {\n    args: {\n        ...Primary.args,\n        variant: \"ghost\"\n    }\n};\n\nexport const GhostNegative: Story = {\n    decorators: [\n        Story => (\n            <div className=\"bg-[#25292e] p-[300px] rounded-[5px]\">\n                <Story />\n            </div>\n        )\n    ],\n    args: {\n        ...Primary.args,\n        variant: \"ghost-negative\"\n    }\n};\n\nexport const DoubleExtraSmall: Story = {\n    args: {\n        ...Primary.args,\n        size: \"xxs\"\n    }\n};\n\nexport const ExtraSmall: Story = {\n    args: {\n        ...Primary.args,\n        size: \"xs\"\n    }\n};\n\nexport const Small: Story = {\n    args: {\n        ...Primary.args,\n        size: \"sm\"\n    }\n};\n\nexport const SmallWithLargeIcon: Story = {\n    args: {\n        ...Primary.args,\n        size: \"sm\",\n        iconSize: \"lg\"\n    }\n};\n\nexport const Medium: Story = {\n    args: {\n        ...Primary.args,\n        size: \"md\"\n    }\n};\n\nexport const MediumWithLargeIcon: Story = {\n    args: {\n        ...Primary.args,\n        size: \"md\",\n        iconSize: \"lg\"\n    }\n};\n\nexport const Large: Story = {\n    args: {\n        ...Primary.args,\n        size: \"lg\"\n    }\n};\n\nexport const LargeWithLargeIcon: Story = {\n    args: {\n        ...Primary.args,\n        size: \"lg\",\n        iconSize: \"lg\"\n    }\n};\n\nexport const ExtraLarge: Story = {\n    args: {\n        ...Primary.args,\n        size: \"xl\"\n    }\n};\n\nexport const WithAsChild: Story = {\n    args: {\n        ...Primary.args,\n        asChild: true,\n        icon: (\n            <span>\n                <AddIcon />\n            </span>\n        )\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        variant: \"primary\",\n        size: \"md\",\n        disabled: false,\n        icon: <AddIcon />,\n        iconSize: \"default\"\n    }\n};\n"],"names":["meta","IconButton","Primary","AddIcon","Secondary","Tertiary","Ghost","GhostNegative","Story","DoubleExtraSmall","ExtraSmall","Small","SmallWithLargeIcon","Medium","MediumWithLargeIcon","Large","LargeWithLargeIcon","ExtraLarge","WithAsChild","Documentation"],"mappings":";;;AAKA,MAAMA,OAAgC;IAClC,OAAO;IACP,WAAWC;IACX,MAAM;QAAC;KAAY;IACnB,UAAU;QACN,SAAS;YACL,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAW;gBAAa;gBAAY;gBAAS;aAAiB;YACxE,cAAc;QAClB;QACA,MAAM;YACF,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAO;gBAAM;gBAAM;gBAAM;gBAAM;aAAK;YAC9C,cAAc;QAClB;QACA,UAAU;YACN,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAW;aAAK;YAC1B,cAAc;QAClB;QACA,UAAU;YACN,aAAa;YACb,SAAS;YACT,cAAc;QAClB;QACA,MAAM;YACF,aAAa;QACjB;QACA,SAAS;YAAE,QAAQ;QAAU;IACjC;AACJ;AAEA,2BAAeD;AAGR,MAAME,UAAiB;IAC1B,MAAM;QACF,SAAS;QACT,MAAM,WAAN,GAAM,oBAACC,gBAAOA;IAClB;AACJ;AAEO,MAAMC,YAAmB;IAC5B,MAAM;QACF,GAAGF,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAMG,WAAkB;IAC3B,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAMI,QAAe;IACxB,MAAM;QACF,GAAGJ,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAMK,gBAAuB;IAChC,YAAY;QACRC,CAAAA,QAAAA,WAAAA,GACI,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;IACD,MAAM;QACF,GAAGN,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAMO,mBAA0B;IACnC,MAAM;QACF,GAAGP,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMQ,aAAoB;IAC7B,MAAM;QACF,GAAGR,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMS,QAAe;IACxB,MAAM;QACF,GAAGT,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMU,qBAA4B;IACrC,MAAM;QACF,GAAGV,QAAQ,IAAI;QACf,MAAM;QACN,UAAU;IACd;AACJ;AAEO,MAAMW,SAAgB;IACzB,MAAM;QACF,GAAGX,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMY,sBAA6B;IACtC,MAAM;QACF,GAAGZ,QAAQ,IAAI;QACf,MAAM;QACN,UAAU;IACd;AACJ;AAEO,MAAMa,QAAe;IACxB,MAAM;QACF,GAAGb,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMc,qBAA4B;IACrC,MAAM;QACF,GAAGd,QAAQ,IAAI;QACf,MAAM;QACN,UAAU;IACd;AACJ;AAEO,MAAMe,aAAoB;IAC7B,MAAM;QACF,GAAGf,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMgB,cAAqB;IAC9B,MAAM;QACF,GAAGhB,QAAQ,IAAI;QACf,SAAS;QACT,MAAM,WAAN,GACI,oBAAC,4BACG,oBAACC,gBAAOA;IAGpB;AACJ;AAEO,MAAMgB,gBAAuB;IAChC,MAAM;QACF,SAAS;QACT,MAAM;QACN,UAAU;QACV,MAAM,WAAN,GAAM,oBAAChB,gBAAOA;QACd,UAAU;IACd;AACJ"}

package/Card/Card.stories.d.ts

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

package/Card/Card.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card/Card.stories.js","sources":["../../src/Card/Card.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { Card } from \"./Card.js\";\nimport { Button } from \"~/Button/index.js\";\nimport { DropdownMenu } from \"~/DropdownMenu/index.js\";\nimport { ReactComponent as NotificationIcon } from \"@webiny/icons/notifications_active.svg\";\nimport { Tabs } from \"~/Tabs/index.js\";\n\nconst meta: Meta<typeof Card> = {\n    title: \"Components/Card\",\n    component: Card,\n    argTypes: {},\n    decorators: [\n        Story => (\n            <div className=\"bg-[#f9fafa] p-[50px] rounded-[5px] max-w-[800px] text-neutral-dimmed\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Card>;\n\nexport const Default: Story = {\n    args: {\n        padding: \"md\",\n        title: \"Card Title\",\n        description: \"A short card description.\",\n        info: (\n            <>\n                Learn more about this <a href={\"#\"}>here</a>.\n            </>\n        ),\n        children: (\n            <>\n                The amazing, splendid, and most useful umbrella, resistant to rain and friendly to\n                winds, is something that deserves all admiration. Crafted with perfect textures, it\n                bravely withstands storms and gently shades the rays of the sun. A remarkable\n                innovation, with an ergonomically designed grip most suited to the hand, it remains\n                stable even in the fiercest weather.\n            </>\n        ),\n        actions: (\n            <>\n                <Card.CancelAction />\n                <Card.ConfirmAction />\n            </>\n        )\n    },\n    argTypes: {}\n};\n\nexport const SmallSize: Story = {\n    args: {\n        ...Default.args,\n        size: \"sm\"\n    }\n};\n\nexport const PaddingSmall: Story = {\n    args: {\n        ...Default.args,\n        padding: \"sm\"\n    }\n};\n\nexport const PaddingMedium: Story = {\n    args: {\n        ...Default.args,\n        padding: \"md\"\n    }\n};\n\nexport const PaddingLarge: Story = {\n    args: {\n        ...Default.args,\n        padding: \"lg\"\n    }\n};\n\nexport const WithActions: Story = {\n    args: {\n        ...Default.args\n    }\n};\nexport const WithHeaderActions: Story = {\n    args: {\n        ...Default.args,\n        actionsPosition: \"header\"\n    }\n};\n\nexport const WithSmallHeaderActions: Story = {\n    args: {\n        ...Default.args,\n        actionsPosition: \"header\",\n        actionsSize: \"sm\"\n    }\n};\n\nexport const WithLargeCorners: Story = {\n    args: {\n        ...Default.args,\n        cornerSize: \"lg\"\n    }\n};\n\nexport const AccentVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"accent\"\n    }\n};\n\nexport const DropdownMenuInCard: Story = {\n    args: {\n        ...Default.args,\n        children: (\n            <>\n                <DropdownMenu trigger={<Button variant=\"primary\" text={\"Open\"} />}>\n                    <DropdownMenu.Item text={\"Billing\"} />\n                    <DropdownMenu.Item text={\"Settings\"} />\n                    <DropdownMenu.Item text={\"Keyboard shortcuts\"} />\n                </DropdownMenu>\n            </>\n        )\n    }\n};\nexport const WithSmallElevation: Story = {\n    args: {\n        ...Default.args,\n        elevation: \"small\"\n    }\n};\n\nexport const WithMediumElevation: Story = {\n    args: {\n        ...Default.args,\n        elevation: \"medium\"\n    }\n};\n\nexport const WithLargeElevation: Story = {\n    args: {\n        ...Default.args,\n        elevation: \"large\"\n    }\n};\n\nexport const WithIcon: Story = {\n    args: {\n        ...Default.args,\n        icon: <Card.Icon icon={<NotificationIcon />} label={\"Title icon\"} />\n    }\n};\n\nexport const WithTabs: Story = {\n    args: {\n        ...Default.args,\n        bodyPadding: false,\n        icon: <Card.Icon icon={<NotificationIcon />} label={\"Title icon\"} />,\n        children: (\n            <>\n                <Tabs\n                    className={\"w-[500px]\"}\n                    separator={true}\n                    spacing={\"lg\"}\n                    tabs={[\n                        <Tabs.Tab\n                            key={\"account\"}\n                            value={\"account\"}\n                            trigger={\"Account\"}\n                            content={\"Make changes to your account here.\"}\n                        />,\n                        <Tabs.Tab\n                            key={\"company\"}\n                            value={\"company\"}\n                            trigger={\"Company\"}\n                            content={\"Make changes to your company info here.\"}\n                        />,\n                        <Tabs.Tab\n                            key={\"security\"}\n                            value={\"security\"}\n                            trigger={\"Security\"}\n                            content={\"Make changes to your security settings here.\"}\n                        />,\n                        <Tabs.Tab\n                            key={\"development\"}\n                            value={\"development\"}\n                            trigger={\"Development\"}\n                            content={\"Make changes to your development settings here.\"}\n                        />\n                    ]}\n                />\n            </>\n        )\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        return <Card {...args} />;\n    },\n    args: {\n        title: \"Card title goes here\",\n        description: \"Card description goes here\",\n        children: <>This is card content. Anything can go in here.</>,\n        actions: (\n            <>\n                <Button variant={\"secondary\"} text={\"Cancel\"} />\n                <Button variant={\"primary\"} text={\"Confirm\"} />\n            </>\n        ),\n        padding: \"sm\",\n        elevation: \"small\"\n    },\n    argTypes: {\n        title: {\n            description: \"The title displayed at the top of the card\",\n            control: \"text\"\n        },\n        description: {\n            description: \"A description displayed below the title\",\n            control: \"text\"\n        },\n        children: {\n            description:\n                \"The main content of the card. Please refer to the example code for details on usage.\"\n        },\n        actions: {\n            description:\n                \"Buttons or other interactive elements displayed at the bottom of the card. Please refer to the example code for details on usage.\"\n        },\n        padding: {\n            description: \"Controls the amount of padding inside the card\",\n            control: \"select\",\n            options: [\"none\", \"standard\", \"comfortable\"]\n        },\n        elevation: {\n            description: \"Controls the shadow depth of the card\",\n            control: \"select\",\n            options: [\"none\", \"xs\", \"sm\", \"md\", \"lg\", \"xl\"]\n        }\n    }\n};\n"],"names":["meta","Card","Story","Default","SmallSize","PaddingSmall","PaddingMedium","PaddingLarge","WithActions","WithHeaderActions","WithSmallHeaderActions","WithLargeCorners","AccentVariant","DropdownMenuInCard","DropdownMenu","Button","WithSmallElevation","WithMediumElevation","WithLargeElevation","WithIcon","NotificationIcon","WithTabs","Tabs","Documentation","args"],"mappings":"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"}
+{"version":3,"file":"Card/Card.stories.js","sources":["../../src/Card/Card.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { Card } from \"./Card.js\";\nimport { Button } from \"~/Button/index.js\";\nimport { DropdownMenu } from \"~/DropdownMenu/index.js\";\nimport { ReactComponent as NotificationIcon } from \"@webiny/icons/notifications_active.svg\";\nimport { Tabs } from \"~/Tabs/index.js\";\n\nconst meta: Meta<typeof Card> = {\n    title: \"Components/Card\",\n    component: Card,\n    argTypes: {},\n    decorators: [\n        Story => (\n            <div className=\"bg-[#f9fafa] p-[50px] rounded-[5px] max-w-[800px] text-neutral-dimmed\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Card>;\n\nexport const Default: Story = {\n    args: {\n        padding: \"md\",\n        title: \"Card Title\",\n        description: \"A short card description.\",\n        info: (\n            <>\n                Learn more about this <a href={\"#\"}>here</a>.\n            </>\n        ),\n        children: (\n            <>\n                The amazing, splendid, and most useful umbrella, resistant to rain and friendly to\n                winds, is something that deserves all admiration. Crafted with perfect textures, it\n                bravely withstands storms and gently shades the rays of the sun. A remarkable\n                innovation, with an ergonomically designed grip most suited to the hand, it remains\n                stable even in the fiercest weather.\n            </>\n        ),\n        actions: (\n            <>\n                <Card.CancelAction />\n                <Card.ConfirmAction />\n            </>\n        )\n    },\n    argTypes: {}\n};\n\nexport const SmallSize: Story = {\n    args: {\n        ...Default.args,\n        size: \"sm\"\n    }\n};\n\nexport const PaddingSmall: Story = {\n    args: {\n        ...Default.args,\n        padding: \"sm\"\n    }\n};\n\nexport const PaddingMedium: Story = {\n    args: {\n        ...Default.args,\n        padding: \"md\"\n    }\n};\n\nexport const PaddingLarge: Story = {\n    args: {\n        ...Default.args,\n        padding: \"lg\"\n    }\n};\n\nexport const WithActions: Story = {\n    args: {\n        ...Default.args\n    }\n};\nexport const WithHeaderActions: Story = {\n    args: {\n        ...Default.args,\n        actionsPosition: \"header\"\n    }\n};\n\nexport const WithSmallHeaderActions: Story = {\n    args: {\n        ...Default.args,\n        actionsPosition: \"header\",\n        actionsSize: \"sm\"\n    }\n};\n\nexport const WithLargeCorners: Story = {\n    args: {\n        ...Default.args,\n        cornerSize: \"lg\"\n    }\n};\n\nexport const AccentVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"accent\"\n    }\n};\n\nexport const DropdownMenuInCard: Story = {\n    args: {\n        ...Default.args,\n        children: (\n            <>\n                <DropdownMenu trigger={<Button variant=\"primary\" text={\"Open\"} />}>\n                    <DropdownMenu.Item text={\"Billing\"} />\n                    <DropdownMenu.Item text={\"Settings\"} />\n                    <DropdownMenu.Item text={\"Keyboard shortcuts\"} />\n                </DropdownMenu>\n            </>\n        )\n    }\n};\nexport const WithSmallElevation: Story = {\n    args: {\n        ...Default.args,\n        elevation: \"small\"\n    }\n};\n\nexport const WithMediumElevation: Story = {\n    args: {\n        ...Default.args,\n        elevation: \"medium\"\n    }\n};\n\nexport const WithLargeElevation: Story = {\n    args: {\n        ...Default.args,\n        elevation: \"large\"\n    }\n};\n\nexport const WithIcon: Story = {\n    args: {\n        ...Default.args,\n        icon: <Card.Icon icon={<NotificationIcon />} label={\"Title icon\"} />\n    }\n};\n\nexport const WithTabs: Story = {\n    args: {\n        ...Default.args,\n        bodyPadding: false,\n        icon: <Card.Icon icon={<NotificationIcon />} label={\"Title icon\"} />,\n        children: (\n            <>\n                <Tabs\n                    className={\"w-[500px]\"}\n                    separator={true}\n                    spacing={\"lg\"}\n                    tabs={[\n                        <Tabs.Tab\n                            key={\"account\"}\n                            value={\"account\"}\n                            trigger={\"Account\"}\n                            content={\"Make changes to your account here.\"}\n                        />,\n                        <Tabs.Tab\n                            key={\"company\"}\n                            value={\"company\"}\n                            trigger={\"Company\"}\n                            content={\"Make changes to your company info here.\"}\n                        />,\n                        <Tabs.Tab\n                            key={\"security\"}\n                            value={\"security\"}\n                            trigger={\"Security\"}\n                            content={\"Make changes to your security settings here.\"}\n                        />,\n                        <Tabs.Tab\n                            key={\"development\"}\n                            value={\"development\"}\n                            trigger={\"Development\"}\n                            content={\"Make changes to your development settings here.\"}\n                        />\n                    ]}\n                />\n            </>\n        )\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        return <Card {...args} />;\n    },\n    args: {\n        title: \"Card title goes here\",\n        description: \"Card description goes here\",\n        children: <>This is card content. Anything can go in here.</>,\n        actions: (\n            <>\n                <Button variant={\"secondary\"} text={\"Cancel\"} />\n                <Button variant={\"primary\"} text={\"Confirm\"} />\n            </>\n        ),\n        padding: \"sm\",\n        elevation: \"small\"\n    },\n    argTypes: {\n        title: {\n            description: \"The title displayed at the top of the card\",\n            control: \"text\"\n        },\n        description: {\n            description: \"A description displayed below the title\",\n            control: \"text\"\n        },\n        children: {\n            description:\n                \"The main content of the card. Please refer to the example code for details on usage.\"\n        },\n        actions: {\n            description:\n                \"Buttons or other interactive elements displayed at the bottom of the card. Please refer to the example code for details on usage.\"\n        },\n        padding: {\n            description: \"Controls the amount of padding inside the card\",\n            control: \"select\",\n            options: [\"none\", \"standard\", \"comfortable\"]\n        },\n        elevation: {\n            description: \"Controls the shadow depth of the card\",\n            control: \"select\",\n            options: [\"none\", \"xs\", \"sm\", \"md\", \"lg\", \"xl\"]\n        }\n    }\n};\n"],"names":["meta","Card","Story","Default","SmallSize","PaddingSmall","PaddingMedium","PaddingLarge","WithActions","WithHeaderActions","WithSmallHeaderActions","WithLargeCorners","AccentVariant","DropdownMenuInCard","DropdownMenu","Button","WithSmallElevation","WithMediumElevation","WithLargeElevation","WithIcon","NotificationIcon","WithTabs","Tabs","Documentation","args"],"mappings":"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"}

package/Checkbox/Checkbox.stories.d.ts

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

package/Checkbox/Checkbox.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox/Checkbox.stories.js","sources":["../../src/Checkbox/Checkbox.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { Checkbox } from \"~/Checkbox/index.js\";\n\nconst meta: Meta<typeof Checkbox> = {\n    title: \"Components/Form/Checkbox\",\n    component: Checkbox,\n    argTypes: {\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [checked, setChecked] = useState(args.checked);\n        return <Checkbox {...args} checked={checked} onChange={checked => setChecked(checked)} />;\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Checkbox>;\n\nexport const Default: Story = {\n    args: {\n        label: \"Any field label\"\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        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 [checked, setChecked] = useState(args.checked || false);\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        // Update checked state when args.checked changes\n        useEffect(() => {\n            setChecked(args.checked || false);\n        }, [args.checked]);\n\n        const handleChange = (isChecked: boolean) => {\n            setChecked(isChecked);\n\n            // Simple required validation\n            if (args.required && !isChecked) {\n                setValidation({ isValid: false, message: \"This field is required\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        };\n\n        // Validate on required change\n        useEffect(() => {\n            if (args.required && !checked) {\n                setValidation({ isValid: false, message: \"This field is required\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        }, [args.required, checked]);\n\n        return (\n            <Checkbox {...args} checked={checked} onChange={handleChange} validation={validation} />\n        );\n    },\n    args: {\n        label: \"Any field label\",\n        checked: false,\n        disabled: false,\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    argTypes: {\n        label: {\n            description: \"Label text for the checkbox\",\n            control: \"text\",\n            defaultValue: \"Any field label\"\n        },\n        checked: {\n            description: \"Determines if the checkbox is checked\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        disabled: {\n            description: \"Disables the checkbox when set to true\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        required: {\n            description: \"Makes the checkbox required when set to true\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        description: {\n            description: \"Additional description text below the checkbox\",\n            control: \"text\"\n        },\n        note: {\n            description: \"Additional note text below the checkbox\",\n            control: \"text\"\n        },\n        validation: {\n            description: \"Validation state and message\",\n            control: \"object\"\n        },\n        onChange: {\n            description: \"Callback function triggered when checkbox state changes\"\n        }\n    }\n};\n"],"names":["meta","Checkbox","args","checked","setChecked","useState","Default","WithDescription","WithNotes","WithErrors","Disabled","FullExample","Documentation","validation","setValidation","useEffect","handleChange","isChecked"],"mappings":";;AAIA,MAAMA,OAA8B;IAChC,OAAO;IACP,WAAWC;IACX,UAAU;QACN,UAAU;YACN,SAAS;YACT,cAAc;QAClB;IACJ;IACA,YAAY;QACR,QAAQ;IACZ;IACA,QAAQC,CAAAA;QACJ,MAAM,CAACC,SAASC,WAAW,GAAGC,SAASH,KAAK,OAAO;QACnD,OAAO,WAAP,GAAO,oBAACD,UAAQA;YAAE,GAAGC,IAAI;YAAE,SAASC;YAAS,UAAUA,CAAAA,UAAWC,WAAWD;;IACjF;AACJ;AAEA,yBAAeH;AAGR,MAAMM,UAAiB;IAC1B,MAAM;QACF,OAAO;IACX;AACJ;AAEO,MAAMC,kBAAyB;IAClC,MAAM;QACF,GAAGD,QAAQ,IAAI;QACf,aAAa;IACjB;AACJ;AAEO,MAAME,YAAmB;IAC5B,MAAM;QACF,GAAGF,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMG,aAAoB;IAC7B,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,YAAY;YACR,SAAS;YACT,SAAS;QACb;IACJ;AACJ;AAEO,MAAMI,WAAkB;IAC3B,MAAM;QACF,GAAGJ,QAAQ,IAAI;QACf,UAAU;IACd;AACJ;AAEO,MAAMK,cAAqB;IAC9B,MAAM;QACF,GAAGL,QAAQ,IAAI;QACf,OAAO;QACP,UAAU;QACV,aAAa;QACb,MAAM;QACN,YAAY;YACR,SAAS;YACT,SAAS;QACb;IACJ;AACJ;AAEO,MAAMM,gBAAuB;IAChC,QAAQV,CAAAA;QACJ,MAAM,CAACC,SAASC,WAAW,GAAGC,SAASH,KAAK,OAAO,IAAI;QACvD,MAAM,CAACW,YAAYC,cAAc,GAAGT,SAAS;YAAE,SAAS;YAAM,SAAS;QAAG;QAG1EU,UAAU;YACNX,WAAWF,KAAK,OAAO,IAAI;QAC/B,GAAG;YAACA,KAAK,OAAO;SAAC;QAEjB,MAAMc,eAAe,CAACC;YAClBb,WAAWa;YAGPf,KAAK,QAAQ,IAAI,CAACe,YAClBH,cAAc;gBAAE,SAAS;gBAAO,SAAS;YAAyB,KAElEA,cAAc;gBAAE,SAAS;gBAAM,SAAS;YAAG;QAEnD;QAGAC,UAAU;YACFb,KAAK,QAAQ,IAAI,CAACC,UAClBW,cAAc;gBAAE,SAAS;gBAAO,SAAS;YAAyB,KAElEA,cAAc;gBAAE,SAAS;gBAAM,SAAS;YAAG;QAEnD,GAAG;YAACZ,KAAK,QAAQ;YAAEC;SAAQ;QAE3B,OAAO,WAAP,GACI,oBAACF,UAAQA;YAAE,GAAGC,IAAI;YAAE,SAASC;YAAS,UAAUa;YAAc,YAAYH;;IAElF;IACA,MAAM;QACF,OAAO;QACP,SAAS;QACT,UAAU;QACV,UAAU;QACV,aAAa;QACb,MAAM;QACN,YAAY;YACR,SAAS;YACT,SAAS;QACb;IACJ;IACA,UAAU;QACN,OAAO;YACH,aAAa;YACb,SAAS;YACT,cAAc;QAClB;QACA,SAAS;YACL,aAAa;YACb,SAAS;YACT,cAAc;QAClB;QACA,UAAU;YACN,aAAa;YACb,SAAS;YACT,cAAc;QAClB;QACA,UAAU;YACN,aAAa;YACb,SAAS;YACT,cAAc;QAClB;QACA,aAAa;YACT,aAAa;YACb,SAAS;QACb;QACA,MAAM;YACF,aAAa;YACb,SAAS;QACb;QACA,YAAY;YACR,aAAa;YACb,SAAS;QACb;QACA,UAAU;YACN,aAAa;QACjB;IACJ;AACJ"}
+{"version":3,"file":"Checkbox/Checkbox.stories.js","sources":["../../src/Checkbox/Checkbox.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { Checkbox } from \"~/Checkbox/index.js\";\n\nconst meta: Meta<typeof Checkbox> = {\n    title: \"Components/Form/Checkbox\",\n    component: Checkbox,\n    argTypes: {\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [checked, setChecked] = useState(args.checked);\n        return <Checkbox {...args} checked={checked} onChange={checked => setChecked(checked)} />;\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Checkbox>;\n\nexport const Default: Story = {\n    args: {\n        label: \"Any field label\"\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        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 [checked, setChecked] = useState(args.checked || false);\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        // Update checked state when args.checked changes\n        useEffect(() => {\n            setChecked(args.checked || false);\n        }, [args.checked]);\n\n        const handleChange = (isChecked: boolean) => {\n            setChecked(isChecked);\n\n            // Simple required validation\n            if (args.required && !isChecked) {\n                setValidation({ isValid: false, message: \"This field is required\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        };\n\n        // Validate on required change\n        useEffect(() => {\n            if (args.required && !checked) {\n                setValidation({ isValid: false, message: \"This field is required\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        }, [args.required, checked]);\n\n        return (\n            <Checkbox {...args} checked={checked} onChange={handleChange} validation={validation} />\n        );\n    },\n    args: {\n        label: \"Any field label\",\n        checked: false,\n        disabled: false,\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    argTypes: {\n        label: {\n            description: \"Label text for the checkbox\",\n            control: \"text\",\n            defaultValue: \"Any field label\"\n        },\n        checked: {\n            description: \"Determines if the checkbox is checked\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        disabled: {\n            description: \"Disables the checkbox when set to true\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        required: {\n            description: \"Makes the checkbox required when set to true\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        description: {\n            description: \"Additional description text below the checkbox\",\n            control: \"text\"\n        },\n        note: {\n            description: \"Additional note text below the checkbox\",\n            control: \"text\"\n        },\n        validation: {\n            description: \"Validation state and message\",\n            control: \"object\"\n        },\n        onChange: {\n            description: \"Callback function triggered when checkbox state changes\"\n        }\n    }\n};\n"],"names":["meta","Checkbox","args","checked","setChecked","useState","Default","WithDescription","WithNotes","WithErrors","Disabled","FullExample","Documentation","validation","setValidation","useEffect","handleChange","isChecked"],"mappings":";;AAIA,MAAMA,OAA8B;IAChC,OAAO;IACP,WAAWC;IACX,UAAU;QACN,UAAU;YACN,SAAS;YACT,cAAc;QAClB;IACJ;IACA,YAAY;QACR,QAAQ;IACZ;IACA,QAAQC,CAAAA;QACJ,MAAM,CAACC,SAASC,WAAW,GAAGC,SAASH,KAAK,OAAO;QACnD,OAAO,WAAP,GAAO,oBAACD,UAAQA;YAAE,GAAGC,IAAI;YAAE,SAASC;YAAS,UAAUA,CAAAA,UAAWC,WAAWD;;IACjF;AACJ;AAEA,yBAAeH;AAGR,MAAMM,UAAiB;IAC1B,MAAM;QACF,OAAO;IACX;AACJ;AAEO,MAAMC,kBAAyB;IAClC,MAAM;QACF,GAAGD,QAAQ,IAAI;QACf,aAAa;IACjB;AACJ;AAEO,MAAME,YAAmB;IAC5B,MAAM;QACF,GAAGF,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMG,aAAoB;IAC7B,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,YAAY;YACR,SAAS;YACT,SAAS;QACb;IACJ;AACJ;AAEO,MAAMI,WAAkB;IAC3B,MAAM;QACF,GAAGJ,QAAQ,IAAI;QACf,UAAU;IACd;AACJ;AAEO,MAAMK,cAAqB;IAC9B,MAAM;QACF,GAAGL,QAAQ,IAAI;QACf,OAAO;QACP,UAAU;QACV,aAAa;QACb,MAAM;QACN,YAAY;YACR,SAAS;YACT,SAAS;QACb;IACJ;AACJ;AAEO,MAAMM,gBAAuB;IAChC,QAAQV,CAAAA;QACJ,MAAM,CAACC,SAASC,WAAW,GAAGC,SAASH,KAAK,OAAO,IAAI;QACvD,MAAM,CAACW,YAAYC,cAAc,GAAGT,SAAS;YAAE,SAAS;YAAM,SAAS;QAAG;QAG1EU,UAAU;YACNX,WAAWF,KAAK,OAAO,IAAI;QAC/B,GAAG;YAACA,KAAK,OAAO;SAAC;QAEjB,MAAMc,eAAe,CAACC;YAClBb,WAAWa;YAGPf,KAAK,QAAQ,IAAI,CAACe,YAClBH,cAAc;gBAAE,SAAS;gBAAO,SAAS;YAAyB,KAElEA,cAAc;gBAAE,SAAS;gBAAM,SAAS;YAAG;QAEnD;QAGAC,UAAU;YACFb,KAAK,QAAQ,IAAI,CAACC,UAClBW,cAAc;gBAAE,SAAS;gBAAO,SAAS;YAAyB,KAElEA,cAAc;gBAAE,SAAS;gBAAM,SAAS;YAAG;QAEnD,GAAG;YAACZ,KAAK,QAAQ;YAAEC;SAAQ;QAE3B,OAAO,WAAP,GACI,oBAACF,UAAQA;YAAE,GAAGC,IAAI;YAAE,SAASC;YAAS,UAAUa;YAAc,YAAYH;;IAElF;IACA,MAAM;QACF,OAAO;QACP,SAAS;QACT,UAAU;QACV,UAAU;QACV,aAAa;QACb,MAAM;QACN,YAAY;YACR,SAAS;YACT,SAAS;QACb;IACJ;IACA,UAAU;QACN,OAAO;YACH,aAAa;YACb,SAAS;YACT,cAAc;QAClB;QACA,SAAS;YACL,aAAa;YACb,SAAS;YACT,cAAc;QAClB;QACA,UAAU;YACN,aAAa;YACb,SAAS;YACT,cAAc;QAClB;QACA,UAAU;YACN,aAAa;YACb,SAAS;YACT,cAAc;QAClB;QACA,aAAa;YACT,aAAa;YACb,SAAS;QACb;QACA,MAAM;YACF,aAAa;YACb,SAAS;QACb;QACA,YAAY;YACR,aAAa;YACb,SAAS;QACb;QACA,UAAU;YACN,aAAa;QACjB;IACJ;AACJ"}

package/Checkbox/primitives/CheckboxPrimitive.stories.d.ts

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

package/Checkbox/primitives/CheckboxPrimitive.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox/primitives/CheckboxPrimitive.stories.js","sources":["../../../src/Checkbox/primitives/CheckboxPrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { CheckboxPrimitive } from \"./CheckboxPrimitive.js\";\n\nconst meta: Meta<typeof CheckboxPrimitive> = {\n    title: \"Components/Form Primitives/Checkbox\",\n    component: CheckboxPrimitive,\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [checked, setChecked] = useState(args.checked);\n        return (\n            <CheckboxPrimitive\n                {...args}\n                checked={checked}\n                onChange={checked => setChecked(checked)}\n            />\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof CheckboxPrimitive>;\n\nexport const Default: Story = {\n    args: {\n        label: \"Any field label\"\n    }\n};\n\nexport const LongLabel: Story = {\n    args: {\n        label: \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eu aliquam lacus. Morbi eleifend, eros et vestibulum lobortis, mi elit scelerisque neque, sit amet dictum orci sem ac ante. In hac habitasse platea dictumst. Pellentesque molestie nisl tortor, eu dictum velit mollis vitae. Maecenas nec risus sit amet ante efficitur venenatis id eget eros. Aenean mollis vel dolor vitae vestibulum. Integer consectetur id diam eget iaculis. Praesent egestas ullamcorper libero vel eleifend. \"\n    }\n};\n\nexport const Checked: Story = {\n    args: {\n        ...Default.args,\n        checked: true\n    }\n};\n\nexport const Indeterminate: Story = {\n    args: {\n        ...Default.args,\n        indeterminate: true\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        ...Default.args,\n        disabled: true\n    }\n};\n"],"names":["meta","CheckboxPrimitive","args","checked","setChecked","useState","Default","LongLabel","Checked","Indeterminate","Disabled"],"mappings":";;AAIA,MAAMA,OAAuC;IACzC,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;IACA,QAAQC,CAAAA;QACJ,MAAM,CAACC,SAASC,WAAW,GAAGC,SAASH,KAAK,OAAO;QACnD,OAAO,WAAP,GACI,oBAACD,mBAAiBA;YACb,GAAGC,IAAI;YACR,SAASC;YACT,UAAUA,CAAAA,UAAWC,WAAWD;;IAG5C;AACJ;AAEA,kCAAeH;AAGR,MAAMM,UAAiB;IAC1B,MAAM;QACF,OAAO;IACX;AACJ;AAEO,MAAMC,YAAmB;IAC5B,MAAM;QACF,OAAO;IACX;AACJ;AAEO,MAAMC,UAAiB;IAC1B,MAAM;QACF,GAAGF,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAMG,gBAAuB;IAChC,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,eAAe;IACnB;AACJ;AAEO,MAAMI,WAAkB;IAC3B,MAAM;QACF,GAAGJ,QAAQ,IAAI;QACf,UAAU;IACd;AACJ"}
+{"version":3,"file":"Checkbox/primitives/CheckboxPrimitive.stories.js","sources":["../../../src/Checkbox/primitives/CheckboxPrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { CheckboxPrimitive } from \"./CheckboxPrimitive.js\";\n\nconst meta: Meta<typeof CheckboxPrimitive> = {\n    title: \"Components/Form Primitives/Checkbox\",\n    component: CheckboxPrimitive,\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [checked, setChecked] = useState(args.checked);\n        return (\n            <CheckboxPrimitive\n                {...args}\n                checked={checked}\n                onChange={checked => setChecked(checked)}\n            />\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof CheckboxPrimitive>;\n\nexport const Default: Story = {\n    args: {\n        label: \"Any field label\"\n    }\n};\n\nexport const LongLabel: Story = {\n    args: {\n        label: \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eu aliquam lacus. Morbi eleifend, eros et vestibulum lobortis, mi elit scelerisque neque, sit amet dictum orci sem ac ante. In hac habitasse platea dictumst. Pellentesque molestie nisl tortor, eu dictum velit mollis vitae. Maecenas nec risus sit amet ante efficitur venenatis id eget eros. Aenean mollis vel dolor vitae vestibulum. Integer consectetur id diam eget iaculis. Praesent egestas ullamcorper libero vel eleifend. \"\n    }\n};\n\nexport const Checked: Story = {\n    args: {\n        ...Default.args,\n        checked: true\n    }\n};\n\nexport const Indeterminate: Story = {\n    args: {\n        ...Default.args,\n        indeterminate: true\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        ...Default.args,\n        disabled: true\n    }\n};\n"],"names":["meta","CheckboxPrimitive","args","checked","setChecked","useState","Default","LongLabel","Checked","Indeterminate","Disabled"],"mappings":";;AAIA,MAAMA,OAAuC;IACzC,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;IACA,QAAQC,CAAAA;QACJ,MAAM,CAACC,SAASC,WAAW,GAAGC,SAASH,KAAK,OAAO;QACnD,OAAO,WAAP,GACI,oBAACD,mBAAiBA;YACb,GAAGC,IAAI;YACR,SAASC;YACT,UAAUA,CAAAA,UAAWC,WAAWD;;IAG5C;AACJ;AAEA,kCAAeH;AAGR,MAAMM,UAAiB;IAC1B,MAAM;QACF,OAAO;IACX;AACJ;AAEO,MAAMC,YAAmB;IAC5B,MAAM;QACF,OAAO;IACX;AACJ;AAEO,MAAMC,UAAiB;IAC1B,MAAM;QACF,GAAGF,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAMG,gBAAuB;IAChC,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,eAAe;IACnB;AACJ;AAEO,MAAMI,WAAkB;IAC3B,MAAM;QACF,GAAGJ,QAAQ,IAAI;QACf,UAAU;IACd;AACJ"}

package/CheckboxGroup/CheckboxGroup.stories.d.ts

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

package/CheckboxGroup/CheckboxGroup.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroup/CheckboxGroup.stories.js","sources":["../../src/CheckboxGroup/CheckboxGroup.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { CheckboxGroup } from \"~/CheckboxGroup/index.js\";\n\nconst meta: Meta<typeof CheckboxGroup> = {\n    title: \"Components/Form/CheckboxGroup\",\n    component: CheckboxGroup,\n    argTypes: {\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 <CheckboxGroup {...args} value={value} onChange={value => setValue(value)} />;\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof CheckboxGroup>;\n\nexport const Default: Story = {\n    args: {\n        items: [\n            {\n                label: \"Value 1\",\n                value: \"value-1\"\n            },\n            {\n                label: \"Value 2\",\n                value: \"value-2\"\n            },\n            {\n                label: \"Value 3\",\n                value: \"value-3\"\n            }\n        ],\n        value: []\n    }\n};\n\nexport const WithLabel: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const WithRequiredLabel: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        ...Default.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const WithNotes: Story = {\n    args: {\n        ...Default.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const WithErrors: Story = {\n    args: {\n        ...Default.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        items: [\n            {\n                label: \"Value 1\",\n                value: \"value-1\",\n                disabled: true\n            },\n            {\n                label: \"Value 2\",\n                value: \"value-2\",\n                disabled: true\n            },\n            {\n                label: \"Value 3\",\n                value: \"value-3\",\n                disabled: true\n            }\n        ],\n        disabled: true\n    }\n};\n\nexport const FullExample: Story = {\n    args: {\n        ...Default.args,\n        label: \"Select which deploy option do you prefer\",\n        required: true,\n        description:\n            \"Deployment option is simply a way of parsing the data based on your database settings.\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"You must select at least one of the items!\"\n        }\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        const [selectedValues, setSelectedValues] = useState<string[]>(args.value || []);\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        // Update values when args.value changes\n        useEffect(() => {\n            setSelectedValues(args.value || []);\n        }, [args.value]);\n\n        const handleChange = (newValues: string[]) => {\n            setSelectedValues(newValues);\n\n            // Simple required validation\n            if (args.required && (!newValues || newValues.length === 0)) {\n                setValidation({ isValid: false, message: \"Please select at least one option.\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        };\n\n        // Validate on required change or value change\n        useEffect(() => {\n            if (args.required && (!selectedValues || selectedValues.length === 0)) {\n                setValidation({ isValid: false, message: \"Please select at least one option.\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        }, [args.required, selectedValues]);\n\n        return (\n            <CheckboxGroup\n                {...args}\n                value={selectedValues}\n                onChange={handleChange}\n                validation={validation}\n                required={args.required}\n            />\n        );\n    },\n    args: {\n        label: \"Select your preferences\",\n        required: true,\n        disabled: false,\n        description: \"Choose one or more options.\",\n        note: \"Note: You can select multiple values.\",\n        items: [\n            {\n                label: \"Value 1\",\n                value: \"value-1\"\n            },\n            {\n                label: \"Value 2\",\n                value: \"value-2\"\n            },\n            {\n                label: \"Value 3\",\n                value: \"value-3\"\n            }\n        ],\n        value: [],\n        validation: {\n            isValid: false,\n            message: \"Please select at least one option.\"\n        }\n    },\n    argTypes: {\n        label: {\n            description: \"Label text for the checkbox group\",\n            control: \"text\",\n            defaultValue: \"Select your preferences\"\n        },\n        required: {\n            description: \"Makes the checkbox group required when set to true\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        disabled: {\n            description: \"Disables the checkbox group when set to true\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        description: {\n            description: \"Additional description text below the checkbox group\",\n            control: \"text\"\n        },\n        note: {\n            description: \"Additional note text below the checkbox group\",\n            control: \"text\"\n        },\n        validation: {\n            description: \"Validation state and message\",\n            control: \"object\"\n        },\n        items: {\n            description: \"Array of checkbox items with label and value\",\n            control: \"object\"\n        },\n        value: {\n            description: \"Array of selected values\",\n            control: \"object\"\n        },\n        onChange: {\n            description: \"Callback function triggered when selection changes\"\n        }\n    }\n};\n"],"names":["meta","CheckboxGroup","args","value","setValue","useState","Default","WithLabel","WithRequiredLabel","WithDescription","WithNotes","WithErrors","Disabled","FullExample","Documentation","selectedValues","setSelectedValues","validation","setValidation","useEffect","handleChange","newValues"],"mappings":"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"}
+{"version":3,"file":"CheckboxGroup/CheckboxGroup.stories.js","sources":["../../src/CheckboxGroup/CheckboxGroup.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { CheckboxGroup } from \"~/CheckboxGroup/index.js\";\n\nconst meta: Meta<typeof CheckboxGroup> = {\n    title: \"Components/Form/CheckboxGroup\",\n    component: CheckboxGroup,\n    argTypes: {\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 <CheckboxGroup {...args} value={value} onChange={value => setValue(value)} />;\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof CheckboxGroup>;\n\nexport const Default: Story = {\n    args: {\n        items: [\n            {\n                label: \"Value 1\",\n                value: \"value-1\"\n            },\n            {\n                label: \"Value 2\",\n                value: \"value-2\"\n            },\n            {\n                label: \"Value 3\",\n                value: \"value-3\"\n            }\n        ],\n        value: []\n    }\n};\n\nexport const WithLabel: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const WithRequiredLabel: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        ...Default.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const WithNotes: Story = {\n    args: {\n        ...Default.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const WithErrors: Story = {\n    args: {\n        ...Default.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        items: [\n            {\n                label: \"Value 1\",\n                value: \"value-1\",\n                disabled: true\n            },\n            {\n                label: \"Value 2\",\n                value: \"value-2\",\n                disabled: true\n            },\n            {\n                label: \"Value 3\",\n                value: \"value-3\",\n                disabled: true\n            }\n        ],\n        disabled: true\n    }\n};\n\nexport const FullExample: Story = {\n    args: {\n        ...Default.args,\n        label: \"Select which deploy option do you prefer\",\n        required: true,\n        description:\n            \"Deployment option is simply a way of parsing the data based on your database settings.\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"You must select at least one of the items!\"\n        }\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        const [selectedValues, setSelectedValues] = useState<string[]>(args.value || []);\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        // Update values when args.value changes\n        useEffect(() => {\n            setSelectedValues(args.value || []);\n        }, [args.value]);\n\n        const handleChange = (newValues: string[]) => {\n            setSelectedValues(newValues);\n\n            // Simple required validation\n            if (args.required && (!newValues || newValues.length === 0)) {\n                setValidation({ isValid: false, message: \"Please select at least one option.\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        };\n\n        // Validate on required change or value change\n        useEffect(() => {\n            if (args.required && (!selectedValues || selectedValues.length === 0)) {\n                setValidation({ isValid: false, message: \"Please select at least one option.\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        }, [args.required, selectedValues]);\n\n        return (\n            <CheckboxGroup\n                {...args}\n                value={selectedValues}\n                onChange={handleChange}\n                validation={validation}\n                required={args.required}\n            />\n        );\n    },\n    args: {\n        label: \"Select your preferences\",\n        required: true,\n        disabled: false,\n        description: \"Choose one or more options.\",\n        note: \"Note: You can select multiple values.\",\n        items: [\n            {\n                label: \"Value 1\",\n                value: \"value-1\"\n            },\n            {\n                label: \"Value 2\",\n                value: \"value-2\"\n            },\n            {\n                label: \"Value 3\",\n                value: \"value-3\"\n            }\n        ],\n        value: [],\n        validation: {\n            isValid: false,\n            message: \"Please select at least one option.\"\n        }\n    },\n    argTypes: {\n        label: {\n            description: \"Label text for the checkbox group\",\n            control: \"text\",\n            defaultValue: \"Select your preferences\"\n        },\n        required: {\n            description: \"Makes the checkbox group required when set to true\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        disabled: {\n            description: \"Disables the checkbox group when set to true\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        description: {\n            description: \"Additional description text below the checkbox group\",\n            control: \"text\"\n        },\n        note: {\n            description: \"Additional note text below the checkbox group\",\n            control: \"text\"\n        },\n        validation: {\n            description: \"Validation state and message\",\n            control: \"object\"\n        },\n        items: {\n            description: \"Array of checkbox items with label and value\",\n            control: \"object\"\n        },\n        value: {\n            description: \"Array of selected values\",\n            control: \"object\"\n        },\n        onChange: {\n            description: \"Callback function triggered when selection changes\"\n        }\n    }\n};\n"],"names":["meta","CheckboxGroup","args","value","setValue","useState","Default","WithLabel","WithRequiredLabel","WithDescription","WithNotes","WithErrors","Disabled","FullExample","Documentation","selectedValues","setSelectedValues","validation","setValidation","useEffect","handleChange","newValues"],"mappings":"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"}

package/CheckboxGroup/primitives/CheckboxGroupPrimitive.stories.d.ts

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

package/CheckboxGroup/primitives/CheckboxGroupPrimitive.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroup/primitives/CheckboxGroupPrimitive.stories.js","sources":["../../../src/CheckboxGroup/primitives/CheckboxGroupPrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { CheckboxGroupPrimitive } from \"./CheckboxGroupPrimitive.js\";\nimport { Button } from \"~/Button/index.js\";\n\nconst meta: Meta<typeof CheckboxGroupPrimitive> = {\n    title: \"Components/Form Primitives/CheckboxGroup\",\n    component: CheckboxGroupPrimitive,\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [values, setValues] = useState(args.value);\n        return (\n            <div className={\"w-full\"}>\n                <CheckboxGroupPrimitive\n                    {...args}\n                    value={values}\n                    onChange={values => setValues(values)}\n                />\n                <div className={\"mt-4 text-center\"}>\n                    Current selected value: <pre>{values && values.join()}</pre>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof CheckboxGroupPrimitive>;\n\nexport const Default: Story = {\n    args: {\n        items: [\n            {\n                label: \"Value 1\",\n                value: \"value-1\"\n            },\n            {\n                label: \"Value 2\",\n                value: \"value-2\"\n            },\n            {\n                label: \"Value 3\",\n                value: \"value-3\"\n            }\n        ],\n        value: []\n    }\n};\n\nexport const WithLongLabels: Story = {\n    args: {\n        items: [\n            {\n                label: \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eu aliquam lacus. Morbi eleifend, eros et vestibulum lobortis, mi elit scelerisque neque, sit amet dictum orci sem ac ante. In hac habitasse platea dictumst. Pellentesque molestie nisl tortor, eu dictum velit mollis vitae. Integer consectetur id diam eget iaculis. Praesent egestas ullamcorper libero vel eleifend.\",\n                value: \"value-1\"\n            },\n            {\n                label: \"Ut pretium ex vel auctor bibendum. In hac habitasse platea dictumst. Etiam varius felis mi, eu sagittis erat congue vel. Phasellus dui eros, dignissim quis quam pulvinar, tincidunt venenatis felis.\",\n                value: \"value-2\"\n            },\n            {\n                label: \"Nullam gravida consequat volutpat. Ut faucibus imperdiet lobortis. Nullam tempus accumsan metus, vel fermentum lacus dignissim vitae. Sed vitae nunc ante. Cras sollicitudin id dolor sit amet imperdiet.\",\n                value: \"value-3\"\n            }\n        ],\n        value: []\n    }\n};\n\nexport const WithSelectedValues: Story = {\n    args: {\n        items: [\n            {\n                label: \"Value 1\",\n                value: \"value-1\"\n            },\n            {\n                label: \"Value 2\",\n                value: \"value-2\"\n            },\n            {\n                label: \"Value 3\",\n                value: \"value-3\"\n            }\n        ],\n        value: [\"value-2\"]\n    }\n};\n\nexport const WithDisabledValue: Story = {\n    args: {\n        items: [\n            {\n                label: \"Value 1\",\n                value: \"value-1\"\n            },\n            {\n                label: \"Value 2\",\n                value: \"value-2\",\n                disabled: true\n            },\n            {\n                label: \"Value 3\",\n                value: \"value-3\"\n            }\n        ],\n        value: [\"value-2\"]\n    }\n};\n\nexport const WithExternalValueControl: Story = {\n    args: {\n        ...Default.args\n    },\n    render: args => {\n        const [values, setValues] = useState(args.value);\n        return (\n            <div className={\"w-full\"}>\n                <div>\n                    <CheckboxGroupPrimitive\n                        {...args}\n                        value={values}\n                        onChange={values => setValues(values)}\n                    />\n                </div>\n                <div className={\"mt-4 text-center\"}>\n                    <Button text={\"Reset\"} onClick={() => setValues([])} />\n                </div>\n                <div className={\"mt-4 text-center\"}>\n                    Current selected value: <pre>{values && values.join()}</pre>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport const WithNumericValues: Story = {\n    args: {\n        ...Default.args,\n        value: [3, 4],\n        items: [\n            {\n                label: \"Number 1\",\n                value: 1\n            },\n            {\n                label: \"Number 2\",\n                value: 2\n            },\n            {\n                label: \"Number 3\",\n                value: 3\n            },\n            {\n                label: \"Number 4\",\n                value: 4\n            },\n            {\n                label: \"Number 5\",\n                value: 5\n            }\n        ]\n    }\n};\n"],"names":["meta","CheckboxGroupPrimitive","args","values","setValues","useState","Default","WithLongLabels","WithSelectedValues","WithDisabledValue","WithExternalValueControl","Button","WithNumericValues"],"mappings":";;;AAKA,MAAMA,OAA4C;IAC9C,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;IACA,QAAQC,CAAAA;QACJ,MAAM,CAACC,QAAQC,UAAU,GAAGC,SAASH,KAAK,KAAK;QAC/C,OAAO,WAAP,GACI,oBAAC;YAAI,WAAW;yBACZ,oBAACD,wBAAsBA;YAClB,GAAGC,IAAI;YACR,OAAOC;YACP,UAAUA,CAAAA,SAAUC,UAAUD;0BAElC,oBAAC;YAAI,WAAW;WAAoB,0CACR,oBAAC,aAAKA,UAAUA,OAAO,IAAI;IAInE;AACJ;AAEA,uCAAeH;AAGR,MAAMM,UAAiB;IAC1B,MAAM;QACF,OAAO;YACH;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;YACX;SACH;QACD,OAAO,EAAE;IACb;AACJ;AAEO,MAAMC,iBAAwB;IACjC,MAAM;QACF,OAAO;YACH;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;YACX;SACH;QACD,OAAO,EAAE;IACb;AACJ;AAEO,MAAMC,qBAA4B;IACrC,MAAM;QACF,OAAO;YACH;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;YACX;SACH;QACD,OAAO;YAAC;SAAU;IACtB;AACJ;AAEO,MAAMC,oBAA2B;IACpC,MAAM;QACF,OAAO;YACH;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;gBACP,UAAU;YACd;YACA;gBACI,OAAO;gBACP,OAAO;YACX;SACH;QACD,OAAO;YAAC;SAAU;IACtB;AACJ;AAEO,MAAMC,2BAAkC;IAC3C,MAAM;QACF,GAAGJ,QAAQ,IAAI;IACnB;IACA,QAAQJ,CAAAA;QACJ,MAAM,CAACC,QAAQC,UAAU,GAAGC,SAASH,KAAK,KAAK;QAC/C,OAAO,WAAP,GACI,oBAAC;YAAI,WAAW;yBACZ,oBAAC,2BACG,oBAACD,wBAAsBA;YAClB,GAAGC,IAAI;YACR,OAAOC;YACP,UAAUA,CAAAA,SAAUC,UAAUD;2BAGtC,oBAAC;YAAI,WAAW;yBACZ,oBAACQ,QAAMA;YAAC,MAAM;YAAS,SAAS,IAAMP,UAAU,EAAE;2BAEtD,oBAAC;YAAI,WAAW;WAAoB,0CACR,oBAAC,aAAKD,UAAUA,OAAO,IAAI;IAInE;AACJ;AAEO,MAAMS,oBAA2B;IACpC,MAAM;QACF,GAAGN,QAAQ,IAAI;QACf,OAAO;YAAC;YAAG;SAAE;QACb,OAAO;YACH;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;YACX;SACH;IACL;AACJ"}
+{"version":3,"file":"CheckboxGroup/primitives/CheckboxGroupPrimitive.stories.js","sources":["../../../src/CheckboxGroup/primitives/CheckboxGroupPrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { CheckboxGroupPrimitive } from \"./CheckboxGroupPrimitive.js\";\nimport { Button } from \"~/Button/index.js\";\n\nconst meta: Meta<typeof CheckboxGroupPrimitive> = {\n    title: \"Components/Form Primitives/CheckboxGroup\",\n    component: CheckboxGroupPrimitive,\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [values, setValues] = useState(args.value);\n        return (\n            <div className={\"w-full\"}>\n                <CheckboxGroupPrimitive\n                    {...args}\n                    value={values}\n                    onChange={values => setValues(values)}\n                />\n                <div className={\"mt-4 text-center\"}>\n                    Current selected value: <pre>{values && values.join()}</pre>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof CheckboxGroupPrimitive>;\n\nexport const Default: Story = {\n    args: {\n        items: [\n            {\n                label: \"Value 1\",\n                value: \"value-1\"\n            },\n            {\n                label: \"Value 2\",\n                value: \"value-2\"\n            },\n            {\n                label: \"Value 3\",\n                value: \"value-3\"\n            }\n        ],\n        value: []\n    }\n};\n\nexport const WithLongLabels: Story = {\n    args: {\n        items: [\n            {\n                label: \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eu aliquam lacus. Morbi eleifend, eros et vestibulum lobortis, mi elit scelerisque neque, sit amet dictum orci sem ac ante. In hac habitasse platea dictumst. Pellentesque molestie nisl tortor, eu dictum velit mollis vitae. Integer consectetur id diam eget iaculis. Praesent egestas ullamcorper libero vel eleifend.\",\n                value: \"value-1\"\n            },\n            {\n                label: \"Ut pretium ex vel auctor bibendum. In hac habitasse platea dictumst. Etiam varius felis mi, eu sagittis erat congue vel. Phasellus dui eros, dignissim quis quam pulvinar, tincidunt venenatis felis.\",\n                value: \"value-2\"\n            },\n            {\n                label: \"Nullam gravida consequat volutpat. Ut faucibus imperdiet lobortis. Nullam tempus accumsan metus, vel fermentum lacus dignissim vitae. Sed vitae nunc ante. Cras sollicitudin id dolor sit amet imperdiet.\",\n                value: \"value-3\"\n            }\n        ],\n        value: []\n    }\n};\n\nexport const WithSelectedValues: Story = {\n    args: {\n        items: [\n            {\n                label: \"Value 1\",\n                value: \"value-1\"\n            },\n            {\n                label: \"Value 2\",\n                value: \"value-2\"\n            },\n            {\n                label: \"Value 3\",\n                value: \"value-3\"\n            }\n        ],\n        value: [\"value-2\"]\n    }\n};\n\nexport const WithDisabledValue: Story = {\n    args: {\n        items: [\n            {\n                label: \"Value 1\",\n                value: \"value-1\"\n            },\n            {\n                label: \"Value 2\",\n                value: \"value-2\",\n                disabled: true\n            },\n            {\n                label: \"Value 3\",\n                value: \"value-3\"\n            }\n        ],\n        value: [\"value-2\"]\n    }\n};\n\nexport const WithExternalValueControl: Story = {\n    args: {\n        ...Default.args\n    },\n    render: args => {\n        const [values, setValues] = useState(args.value);\n        return (\n            <div className={\"w-full\"}>\n                <div>\n                    <CheckboxGroupPrimitive\n                        {...args}\n                        value={values}\n                        onChange={values => setValues(values)}\n                    />\n                </div>\n                <div className={\"mt-4 text-center\"}>\n                    <Button text={\"Reset\"} onClick={() => setValues([])} />\n                </div>\n                <div className={\"mt-4 text-center\"}>\n                    Current selected value: <pre>{values && values.join()}</pre>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport const WithNumericValues: Story = {\n    args: {\n        ...Default.args,\n        value: [3, 4],\n        items: [\n            {\n                label: \"Number 1\",\n                value: 1\n            },\n            {\n                label: \"Number 2\",\n                value: 2\n            },\n            {\n                label: \"Number 3\",\n                value: 3\n            },\n            {\n                label: \"Number 4\",\n                value: 4\n            },\n            {\n                label: \"Number 5\",\n                value: 5\n            }\n        ]\n    }\n};\n"],"names":["meta","CheckboxGroupPrimitive","args","values","setValues","useState","Default","WithLongLabels","WithSelectedValues","WithDisabledValue","WithExternalValueControl","Button","WithNumericValues"],"mappings":";;;AAKA,MAAMA,OAA4C;IAC9C,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;IACA,QAAQC,CAAAA;QACJ,MAAM,CAACC,QAAQC,UAAU,GAAGC,SAASH,KAAK,KAAK;QAC/C,OAAO,WAAP,GACI,oBAAC;YAAI,WAAW;yBACZ,oBAACD,wBAAsBA;YAClB,GAAGC,IAAI;YACR,OAAOC;YACP,UAAUA,CAAAA,SAAUC,UAAUD;0BAElC,oBAAC;YAAI,WAAW;WAAoB,0CACR,oBAAC,aAAKA,UAAUA,OAAO,IAAI;IAInE;AACJ;AAEA,uCAAeH;AAGR,MAAMM,UAAiB;IAC1B,MAAM;QACF,OAAO;YACH;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;YACX;SACH;QACD,OAAO,EAAE;IACb;AACJ;AAEO,MAAMC,iBAAwB;IACjC,MAAM;QACF,OAAO;YACH;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;YACX;SACH;QACD,OAAO,EAAE;IACb;AACJ;AAEO,MAAMC,qBAA4B;IACrC,MAAM;QACF,OAAO;YACH;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;YACX;SACH;QACD,OAAO;YAAC;SAAU;IACtB;AACJ;AAEO,MAAMC,oBAA2B;IACpC,MAAM;QACF,OAAO;YACH;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;gBACP,UAAU;YACd;YACA;gBACI,OAAO;gBACP,OAAO;YACX;SACH;QACD,OAAO;YAAC;SAAU;IACtB;AACJ;AAEO,MAAMC,2BAAkC;IAC3C,MAAM;QACF,GAAGJ,QAAQ,IAAI;IACnB;IACA,QAAQJ,CAAAA;QACJ,MAAM,CAACC,QAAQC,UAAU,GAAGC,SAASH,KAAK,KAAK;QAC/C,OAAO,WAAP,GACI,oBAAC;YAAI,WAAW;yBACZ,oBAAC,2BACG,oBAACD,wBAAsBA;YAClB,GAAGC,IAAI;YACR,OAAOC;YACP,UAAUA,CAAAA,SAAUC,UAAUD;2BAGtC,oBAAC;YAAI,WAAW;yBACZ,oBAACQ,QAAMA;YAAC,MAAM;YAAS,SAAS,IAAMP,UAAU,EAAE;2BAEtD,oBAAC;YAAI,WAAW;WAAoB,0CACR,oBAAC,aAAKD,UAAUA,OAAO,IAAI;IAInE;AACJ;AAEO,MAAMS,oBAA2B;IACpC,MAAM;QACF,GAAGN,QAAQ,IAAI;QACf,OAAO;YAAC;YAAG;SAAE;QACb,OAAO;YACH;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;YACX;SACH;IACL;AACJ"}

package/CodeEditor/CodeEditor.stories.d.ts

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

package/CodeEditor/CodeEditor.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeEditor/CodeEditor.stories.js","sources":["../../src/CodeEditor/CodeEditor.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { CodeEditor } from \"./CodeEditor.js\";\n\nconst meta: Meta<typeof CodeEditor> = {\n    title: \"Components/Form/CodeEditor\",\n    component: CodeEditor,\n    argTypes: {\n        onChange: { action: \"onChange\" },\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 CodeEditor>;\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        ...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 || \"\");\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        // Update value when args.value changes\n        useEffect(() => {\n            setValue(args.value || \"\");\n        }, [args.value]);\n\n        const handleChange = (newValue: string | undefined) => {\n            setValue(newValue);\n\n            // Simple required validation\n            if (args.required && (!newValue || newValue.trim() === \"\")) {\n                setValidation({ isValid: false, message: \"This field is required\" });\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 || value.trim() === \"\")) {\n                setValidation({ isValid: false, message: \"This field is required\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        }, [args.required, value]);\n\n        return (\n            <CodeEditor\n                {...args}\n                value={value}\n                onChange={handleChange}\n                validation={validation}\n                required={args.required}\n            />\n        );\n    },\n    args: {\n        label: \"JSON Configuration\",\n        required: true,\n        disabled: false,\n        description: \"Enter your configuration in JSON format\",\n        note: \"Note: Make sure your JSON is valid\",\n        theme: \"github\",\n        value: '{\\n  \"name\": \"example\",\\n  \"version\": \"1.0.0\"\\n}',\n        validation: undefined\n    },\n    argTypes: {\n        label: {\n            description: \"Label text for the code editor\",\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 code editor 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        theme: {\n            description: \"The theme for the code editor\",\n            control: \"select\",\n            options: [\"github\", \"twilight\", \"chrome\"]\n        },\n        value: {\n            description: \"The code content\",\n            control: \"text\"\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 the code changes\"\n        }\n    }\n};\n"],"names":["meta","CodeEditor","Default","WithLabel","WithLabelRequired","WithDescription","WithNotes","WithErrors","Disabled","FullExample","Documentation","args","value","setValue","useState","validation","setValidation","useEffect","handleChange","newValue","undefined"],"mappings":";;AAIA,MAAMA,OAAgC;IAClC,OAAO;IACP,WAAWC;IACX,UAAU;QACN,UAAU;YAAE,QAAQ;QAAW;QAC/B,UAAU;YACN,SAAS;YACT,cAAc;QAClB;IACJ;IACA,YAAY;QACR,QAAQ;IACZ;AACJ;AAEA,2BAAeD;AAGR,MAAME,UAAiB,CAAC;AAExB,MAAMC,YAAmB;IAC5B,MAAM;QACF,OAAO;IACX;AACJ;AAEO,MAAMC,oBAA2B;IACpC,MAAM;QACF,GAAGF,QAAQ,IAAI;QACf,OAAO;QACP,UAAU;IACd;AACJ;AAEO,MAAMG,kBAAyB;IAClC,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,aAAa;IACjB;AACJ;AAEO,MAAMI,YAAmB;IAC5B,MAAM;QACF,GAAGJ,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMK,aAAoB;IAC7B,MAAM;QACF,GAAGL,QAAQ,IAAI;QACf,YAAY;YACR,SAAS;YACT,SAAS;QACb;IACJ;AACJ;AAEO,MAAMM,WAAkB;IAC3B,MAAM;QACF,GAAGN,QAAQ,IAAI;QACf,OAAO;QACP,UAAU;IACd;AACJ;AAEO,MAAMO,cAAqB;IAC9B,MAAM;QACF,GAAGP,QAAQ,IAAI;QACf,OAAO;QACP,UAAU;QACV,aAAa;QACb,MAAM;QACN,YAAY;YACR,SAAS;YACT,SAAS;QACb;IACJ;AACJ;AAEO,MAAMQ,gBAAuB;IAChC,QAAQC,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAASH,KAAK,KAAK,IAAI;QACjD,MAAM,CAACI,YAAYC,cAAc,GAAGF,SAAS;YAAE,SAAS;YAAM,SAAS;QAAG;QAG1EG,UAAU;YACNJ,SAASF,KAAK,KAAK,IAAI;QAC3B,GAAG;YAACA,KAAK,KAAK;SAAC;QAEf,MAAMO,eAAe,CAACC;YAClBN,SAASM;YAGLR,KAAK,QAAQ,IAAK,EAACQ,YAAYA,AAAoB,OAApBA,SAAS,IAAI,EAAQ,IACpDH,cAAc;gBAAE,SAAS;gBAAO,SAAS;YAAyB,KAElEA,cAAc;gBAAE,SAAS;gBAAM,SAAS;YAAG;QAEnD;QAGAC,UAAU;YACFN,KAAK,QAAQ,IAAK,EAACC,SAASA,AAAiB,OAAjBA,MAAM,IAAI,EAAQ,IAC9CI,cAAc;gBAAE,SAAS;gBAAO,SAAS;YAAyB,KAElEA,cAAc;gBAAE,SAAS;gBAAM,SAAS;YAAG;QAEnD,GAAG;YAACL,KAAK,QAAQ;YAAEC;SAAM;QAEzB,OAAO,WAAP,GACI,oBAACX,YAAUA;YACN,GAAGU,IAAI;YACR,OAAOC;YACP,UAAUM;YACV,YAAYH;YACZ,UAAUJ,KAAK,QAAQ;;IAGnC;IACA,MAAM;QACF,OAAO;QACP,UAAU;QACV,UAAU;QACV,aAAa;QACb,MAAM;QACN,OAAO;QACP,OAAO;QACP,YAAYS;IAChB;IACA,UAAU;QACN,OAAO;YACH,aAAa;YACb,SAAS;QACb;QACA,UAAU;YACN,aAAa;YACb,SAAS;QACb;QACA,UAAU;YACN,aAAa;YACb,SAAS;QACb;QACA,aAAa;YACT,aAAa;YACb,SAAS;QACb;QACA,MAAM;YACF,aAAa;YACb,SAAS;QACb;QACA,OAAO;YACH,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAU;gBAAY;aAAS;QAC7C;QACA,OAAO;YACH,aAAa;YACb,SAAS;QACb;QACA,YAAY;YACR,aACI;QACR;QACA,UAAU;YACN,aAAa;QACjB;IACJ;AACJ"}
+{"version":3,"file":"CodeEditor/CodeEditor.stories.js","sources":["../../src/CodeEditor/CodeEditor.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { CodeEditor } from \"./CodeEditor.js\";\n\nconst meta: Meta<typeof CodeEditor> = {\n    title: \"Components/Form/CodeEditor\",\n    component: CodeEditor,\n    argTypes: {\n        onChange: { action: \"onChange\" },\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 CodeEditor>;\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        ...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 || \"\");\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        // Update value when args.value changes\n        useEffect(() => {\n            setValue(args.value || \"\");\n        }, [args.value]);\n\n        const handleChange = (newValue: string | undefined) => {\n            setValue(newValue);\n\n            // Simple required validation\n            if (args.required && (!newValue || newValue.trim() === \"\")) {\n                setValidation({ isValid: false, message: \"This field is required\" });\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 || value.trim() === \"\")) {\n                setValidation({ isValid: false, message: \"This field is required\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        }, [args.required, value]);\n\n        return (\n            <CodeEditor\n                {...args}\n                value={value}\n                onChange={handleChange}\n                validation={validation}\n                required={args.required}\n            />\n        );\n    },\n    args: {\n        label: \"JSON Configuration\",\n        required: true,\n        disabled: false,\n        description: \"Enter your configuration in JSON format\",\n        note: \"Note: Make sure your JSON is valid\",\n        theme: \"github\",\n        value: '{\\n  \"name\": \"example\",\\n  \"version\": \"1.0.0\"\\n}',\n        validation: undefined\n    },\n    argTypes: {\n        label: {\n            description: \"Label text for the code editor\",\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 code editor 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        theme: {\n            description: \"The theme for the code editor\",\n            control: \"select\",\n            options: [\"github\", \"twilight\", \"chrome\"]\n        },\n        value: {\n            description: \"The code content\",\n            control: \"text\"\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 the code changes\"\n        }\n    }\n};\n"],"names":["meta","CodeEditor","Default","WithLabel","WithLabelRequired","WithDescription","WithNotes","WithErrors","Disabled","FullExample","Documentation","args","value","setValue","useState","validation","setValidation","useEffect","handleChange","newValue","undefined"],"mappings":";;AAIA,MAAMA,OAAgC;IAClC,OAAO;IACP,WAAWC;IACX,UAAU;QACN,UAAU;YAAE,QAAQ;QAAW;QAC/B,UAAU;YACN,SAAS;YACT,cAAc;QAClB;IACJ;IACA,YAAY;QACR,QAAQ;IACZ;AACJ;AAEA,2BAAeD;AAGR,MAAME,UAAiB,CAAC;AAExB,MAAMC,YAAmB;IAC5B,MAAM;QACF,OAAO;IACX;AACJ;AAEO,MAAMC,oBAA2B;IACpC,MAAM;QACF,GAAGF,QAAQ,IAAI;QACf,OAAO;QACP,UAAU;IACd;AACJ;AAEO,MAAMG,kBAAyB;IAClC,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,aAAa;IACjB;AACJ;AAEO,MAAMI,YAAmB;IAC5B,MAAM;QACF,GAAGJ,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMK,aAAoB;IAC7B,MAAM;QACF,GAAGL,QAAQ,IAAI;QACf,YAAY;YACR,SAAS;YACT,SAAS;QACb;IACJ;AACJ;AAEO,MAAMM,WAAkB;IAC3B,MAAM;QACF,GAAGN,QAAQ,IAAI;QACf,OAAO;QACP,UAAU;IACd;AACJ;AAEO,MAAMO,cAAqB;IAC9B,MAAM;QACF,GAAGP,QAAQ,IAAI;QACf,OAAO;QACP,UAAU;QACV,aAAa;QACb,MAAM;QACN,YAAY;YACR,SAAS;YACT,SAAS;QACb;IACJ;AACJ;AAEO,MAAMQ,gBAAuB;IAChC,QAAQC,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAASH,KAAK,KAAK,IAAI;QACjD,MAAM,CAACI,YAAYC,cAAc,GAAGF,SAAS;YAAE,SAAS;YAAM,SAAS;QAAG;QAG1EG,UAAU;YACNJ,SAASF,KAAK,KAAK,IAAI;QAC3B,GAAG;YAACA,KAAK,KAAK;SAAC;QAEf,MAAMO,eAAe,CAACC;YAClBN,SAASM;YAGLR,KAAK,QAAQ,IAAK,EAACQ,YAAYA,AAAoB,OAApBA,SAAS,IAAI,EAAQ,IACpDH,cAAc;gBAAE,SAAS;gBAAO,SAAS;YAAyB,KAElEA,cAAc;gBAAE,SAAS;gBAAM,SAAS;YAAG;QAEnD;QAGAC,UAAU;YACFN,KAAK,QAAQ,IAAK,EAACC,SAASA,AAAiB,OAAjBA,MAAM,IAAI,EAAQ,IAC9CI,cAAc;gBAAE,SAAS;gBAAO,SAAS;YAAyB,KAElEA,cAAc;gBAAE,SAAS;gBAAM,SAAS;YAAG;QAEnD,GAAG;YAACL,KAAK,QAAQ;YAAEC;SAAM;QAEzB,OAAO,WAAP,GACI,oBAACX,YAAUA;YACN,GAAGU,IAAI;YACR,OAAOC;YACP,UAAUM;YACV,YAAYH;YACZ,UAAUJ,KAAK,QAAQ;;IAGnC;IACA,MAAM;QACF,OAAO;QACP,UAAU;QACV,UAAU;QACV,aAAa;QACb,MAAM;QACN,OAAO;QACP,OAAO;QACP,YAAYS;IAChB;IACA,UAAU;QACN,OAAO;YACH,aAAa;YACb,SAAS;QACb;QACA,UAAU;YACN,aAAa;YACb,SAAS;QACb;QACA,UAAU;YACN,aAAa;YACb,SAAS;QACb;QACA,aAAa;YACT,aAAa;YACb,SAAS;QACb;QACA,MAAM;YACF,aAAa;YACb,SAAS;QACb;QACA,OAAO;YACH,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAU;gBAAY;aAAS;QAC7C;QACA,OAAO;YACH,aAAa;YACb,SAAS;QACb;QACA,YAAY;YACR,aACI;QACR;QACA,UAAU;YACN,aAAa;QACjB;IACJ;AACJ"}

package/CodeEditor/CodeEditorPrimitive.stories.d.ts

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

package/CodeEditor/CodeEditorPrimitive.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeEditor/CodeEditorPrimitive.stories.js","sources":["../../src/CodeEditor/CodeEditorPrimitive.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { CodeEditorPrimitive } from \"./CodeEditorPrimitive.js\";\n\nconst meta: Meta<typeof CodeEditorPrimitive> = {\n    title: \"Components/Form Primitives/CodeEditor\",\n    component: CodeEditorPrimitive,\n    argTypes: {\n        onChange: { action: \"onChange\" }\n    },\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof CodeEditorPrimitive>;\n\nexport const Default: Story = {};\n"],"names":["meta","CodeEditorPrimitive","Default"],"mappings":";AAGA,MAAMA,OAAyC;IAC3C,OAAO;IACP,WAAWC;IACX,UAAU;QACN,UAAU;YAAE,QAAQ;QAAW;IACnC;IACA,YAAY;QACR,QAAQ;IACZ;AACJ;AAEA,oCAAeD;AAGR,MAAME,UAAiB,CAAC"}
+{"version":3,"file":"CodeEditor/CodeEditorPrimitive.stories.js","sources":["../../src/CodeEditor/CodeEditorPrimitive.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport { CodeEditorPrimitive } from \"./CodeEditorPrimitive.js\";\n\nconst meta: Meta<typeof CodeEditorPrimitive> = {\n    title: \"Components/Form Primitives/CodeEditor\",\n    component: CodeEditorPrimitive,\n    argTypes: {\n        onChange: { action: \"onChange\" }\n    },\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof CodeEditorPrimitive>;\n\nexport const Default: Story = {};\n"],"names":["meta","CodeEditorPrimitive","Default"],"mappings":";AAGA,MAAMA,OAAyC;IAC3C,OAAO;IACP,WAAWC;IACX,UAAU;QACN,UAAU;YAAE,QAAQ;QAAW;IACnC;IACA,YAAY;QACR,QAAQ;IACZ;AACJ;AAEA,oCAAeD;AAGR,MAAME,UAAiB,CAAC"}

package/ColorPicker/ColorPicker.stories.d.ts

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

package/ColorPicker/ColorPicker.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker/ColorPicker.stories.js","sources":["../../src/ColorPicker/ColorPicker.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { ColorPicker } from \"./ColorPicker.js\";\n\nconst meta: Meta<typeof ColorPicker> = {\n    title: \"Components/Form/ColorPicker\",\n    component: ColorPicker,\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 <ColorPicker {...args} value={value} onChange={setValue} />;\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof ColorPicker>;\n\nexport const Default: Story = {};\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 || \"\");\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        // Update value when args.value changes\n        useEffect(() => {\n            setValue(args.value || \"\");\n        }, [args.value]);\n\n        const handleChange = (newValue: string) => {\n            setValue(newValue);\n\n            // Simple required validation\n            if (args.required && (!newValue || newValue.trim() === \"\")) {\n                setValidation({ isValid: false, message: \"Please select a color\" });\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 || value.trim() === \"\")) {\n                setValidation({ isValid: false, message: \"Please select a color\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        }, [args.required, value]);\n\n        return (\n            <ColorPicker\n                {...args}\n                value={value}\n                onChange={handleChange}\n                validation={validation}\n                required={args.required}\n            />\n        );\n    },\n    args: {\n        label: \"Brand Color\",\n        required: true,\n        disabled: false,\n        description: \"Select your primary brand color\",\n        note: \"Note: Choose a color that aligns with your brand identity\",\n        value: \"#4285F4\",\n        validation: undefined\n    },\n    argTypes: {\n        label: {\n            description: \"Label text for the color 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 color 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        value: {\n            description: \"The selected color value (hex, RGB, or named color)\",\n            control: \"color\"\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 the color changes\"\n        }\n    }\n};\n"],"names":["meta","ColorPicker","args","value","setValue","useState","Default","WithLabel","WithLabelRequired","WithDescription","WithNotes","WithErrors","Disabled","FullExample","Documentation","validation","setValidation","useEffect","handleChange","newValue","undefined"],"mappings":"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"}
+{"version":3,"file":"ColorPicker/ColorPicker.stories.js","sources":["../../src/ColorPicker/ColorPicker.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { ColorPicker } from \"./ColorPicker.js\";\n\nconst meta: Meta<typeof ColorPicker> = {\n    title: \"Components/Form/ColorPicker\",\n    component: ColorPicker,\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 <ColorPicker {...args} value={value} onChange={setValue} />;\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof ColorPicker>;\n\nexport const Default: Story = {};\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 || \"\");\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        // Update value when args.value changes\n        useEffect(() => {\n            setValue(args.value || \"\");\n        }, [args.value]);\n\n        const handleChange = (newValue: string) => {\n            setValue(newValue);\n\n            // Simple required validation\n            if (args.required && (!newValue || newValue.trim() === \"\")) {\n                setValidation({ isValid: false, message: \"Please select a color\" });\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 || value.trim() === \"\")) {\n                setValidation({ isValid: false, message: \"Please select a color\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        }, [args.required, value]);\n\n        return (\n            <ColorPicker\n                {...args}\n                value={value}\n                onChange={handleChange}\n                validation={validation}\n                required={args.required}\n            />\n        );\n    },\n    args: {\n        label: \"Brand Color\",\n        required: true,\n        disabled: false,\n        description: \"Select your primary brand color\",\n        note: \"Note: Choose a color that aligns with your brand identity\",\n        value: \"#4285F4\",\n        validation: undefined\n    },\n    argTypes: {\n        label: {\n            description: \"Label text for the color 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 color 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        value: {\n            description: \"The selected color value (hex, RGB, or named color)\",\n            control: \"color\"\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 the color changes\"\n        }\n    }\n};\n"],"names":["meta","ColorPicker","args","value","setValue","useState","Default","WithLabel","WithLabelRequired","WithDescription","WithNotes","WithErrors","Disabled","FullExample","Documentation","validation","setValidation","useEffect","handleChange","newValue","undefined"],"mappings":"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"}

package/ColorPicker/primitives/ColorPickerPrimitive.stories.d.ts

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

package/ColorPicker/primitives/ColorPickerPrimitive.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker/primitives/ColorPickerPrimitive.stories.js","sources":["../../../src/ColorPicker/primitives/ColorPickerPrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { ColorPickerPrimitive } from \"./ColorPickerPrimitive.js\";\n\nconst meta: Meta<typeof ColorPickerPrimitive> = {\n    title: \"Components/Form Primitives/ColorPicker\",\n    component: ColorPickerPrimitive,\n    argTypes: {\n        onChange: { action: \"onChange\" },\n        onChangeComplete: { action: \"onChangeComplete\" },\n        onOpenChange: { action: \"onOpenChange\" }\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                <div className={\"flex items-center justify-center mb-4\"}>\n                    <ColorPickerPrimitive\n                        {...args}\n                        value={value}\n                        onChange={value => console.log(\"Value changed:\", value)}\n                        onChangeComplete={value => {\n                            console.log(\"Value change complete:\", value);\n                            setValue(value);\n                        }}\n                    />\n                </div>\n                <div className={\"text-center\"}>\n                    Current selected value: <pre>{value}</pre>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof ColorPickerPrimitive>;\n\nexport const Default: Story = {};\n\nexport const MediumSize: Story = {\n    args: {\n        size: \"md\"\n    }\n};\n\nexport const LargeSize: Story = {\n    args: {\n        size: \"lg\"\n    }\n};\n\nexport const ExtraLargeSize: Story = {\n    args: {\n        size: \"xl\"\n    }\n};\n\nexport const PrimaryVariant: Story = {\n    args: {\n        variant: \"primary\"\n    }\n};\n\nexport const PrimaryVariantDisabled: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const PrimaryVariantInvalid: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const SecondaryVariant: Story = {\n    args: {\n        variant: \"secondary\"\n    }\n};\n\nexport const SecondaryVariantDisabled: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const SecondaryVariantInvalid: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const GhostVariant: Story = {\n    args: {\n        variant: \"ghost\"\n    }\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 WithDefaultValue: Story = {\n    args: {\n        ...Default.args,\n        value: \"#ff0000\"\n    }\n};\n\nexport const WithStartAlign: Story = {\n    args: {\n        ...Default.args,\n        align: \"start\"\n    }\n};\n\nexport const WithCenterAlign: Story = {\n    args: {\n        ...Default.args,\n        align: \"center\"\n    }\n};\n\nexport const WithEndAlign: Story = {\n    args: {\n        ...Default.args,\n        align: \"end\"\n    }\n};\n"],"names":["meta","ColorPickerPrimitive","args","value","setValue","useState","console","Default","MediumSize","LargeSize","ExtraLargeSize","PrimaryVariant","PrimaryVariantDisabled","PrimaryVariantInvalid","SecondaryVariant","SecondaryVariantDisabled","SecondaryVariantInvalid","GhostVariant","GhostVariantDisabled","GhostVariantInvalid","WithDefaultValue","WithStartAlign","WithCenterAlign","WithEndAlign"],"mappings":";;AAIA,MAAMA,OAA0C;IAC5C,OAAO;IACP,WAAWC;IACX,UAAU;QACN,UAAU;YAAE,QAAQ;QAAW;QAC/B,kBAAkB;YAAE,QAAQ;QAAmB;QAC/C,cAAc;YAAE,QAAQ;QAAe;IAC3C;IACA,YAAY;QACR,QAAQ;IACZ;IACA,QAAQC,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAASH,KAAK,KAAK;QAC7C,OAAO,WAAP,GACI,oBAAC;YAAI,WAAW;yBACZ,oBAAC;YAAI,WAAW;yBACZ,oBAACD,sBAAoBA;YAChB,GAAGC,IAAI;YACR,OAAOC;YACP,UAAUA,CAAAA,QAASG,QAAQ,GAAG,CAAC,kBAAkBH;YACjD,kBAAkBA,CAAAA;gBACdG,QAAQ,GAAG,CAAC,0BAA0BH;gBACtCC,SAASD;YACb;2BAGR,oBAAC;YAAI,WAAW;WAAe,0CACH,oBAAC,aAAKA;IAI9C;AACJ;AAEA,qCAAeH;AAGR,MAAMO,UAAiB,CAAC;AAExB,MAAMC,aAAoB;IAC7B,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,YAAmB;IAC5B,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,iBAAwB;IACjC,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,iBAAwB;IACjC,MAAM;QACF,SAAS;IACb;AACJ;AAEO,MAAMC,yBAAgC;IACzC,MAAM;QACF,GAAGD,eAAe,IAAI;QACtB,UAAU;IACd;AACJ;AAEO,MAAME,wBAA+B;IACxC,MAAM;QACF,GAAGF,eAAe,IAAI;QACtB,SAAS;IACb;AACJ;AAEO,MAAMG,mBAA0B;IACnC,MAAM;QACF,SAAS;IACb;AACJ;AAEO,MAAMC,2BAAkC;IAC3C,MAAM;QACF,GAAGD,iBAAiB,IAAI;QACxB,UAAU;IACd;AACJ;AAEO,MAAME,0BAAiC;IAC1C,MAAM;QACF,GAAGF,iBAAiB,IAAI;QACxB,SAAS;IACb;AACJ;AAEO,MAAMG,eAAsB;IAC/B,MAAM;QACF,SAAS;IACb;AACJ;AAEO,MAAMC,uBAA8B;IACvC,MAAM;QACF,GAAGD,aAAa,IAAI;QACpB,UAAU;IACd;AACJ;AAEO,MAAME,sBAA6B;IACtC,MAAM;QACF,GAAGF,aAAa,IAAI;QACpB,SAAS;IACb;AACJ;AAEO,MAAMG,mBAA0B;IACnC,MAAM;QACF,GAAGb,QAAQ,IAAI;QACf,OAAO;IACX;AACJ;AAEO,MAAMc,iBAAwB;IACjC,MAAM;QACF,GAAGd,QAAQ,IAAI;QACf,OAAO;IACX;AACJ;AAEO,MAAMe,kBAAyB;IAClC,MAAM;QACF,GAAGf,QAAQ,IAAI;QACf,OAAO;IACX;AACJ;AAEO,MAAMgB,eAAsB;IAC/B,MAAM;QACF,GAAGhB,QAAQ,IAAI;QACf,OAAO;IACX;AACJ"}
+{"version":3,"file":"ColorPicker/primitives/ColorPickerPrimitive.stories.js","sources":["../../../src/ColorPicker/primitives/ColorPickerPrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { ColorPickerPrimitive } from \"./ColorPickerPrimitive.js\";\n\nconst meta: Meta<typeof ColorPickerPrimitive> = {\n    title: \"Components/Form Primitives/ColorPicker\",\n    component: ColorPickerPrimitive,\n    argTypes: {\n        onChange: { action: \"onChange\" },\n        onChangeComplete: { action: \"onChangeComplete\" },\n        onOpenChange: { action: \"onOpenChange\" }\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                <div className={\"flex items-center justify-center mb-4\"}>\n                    <ColorPickerPrimitive\n                        {...args}\n                        value={value}\n                        onChange={value => console.log(\"Value changed:\", value)}\n                        onChangeComplete={value => {\n                            console.log(\"Value change complete:\", value);\n                            setValue(value);\n                        }}\n                    />\n                </div>\n                <div className={\"text-center\"}>\n                    Current selected value: <pre>{value}</pre>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof ColorPickerPrimitive>;\n\nexport const Default: Story = {};\n\nexport const MediumSize: Story = {\n    args: {\n        size: \"md\"\n    }\n};\n\nexport const LargeSize: Story = {\n    args: {\n        size: \"lg\"\n    }\n};\n\nexport const ExtraLargeSize: Story = {\n    args: {\n        size: \"xl\"\n    }\n};\n\nexport const PrimaryVariant: Story = {\n    args: {\n        variant: \"primary\"\n    }\n};\n\nexport const PrimaryVariantDisabled: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const PrimaryVariantInvalid: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const SecondaryVariant: Story = {\n    args: {\n        variant: \"secondary\"\n    }\n};\n\nexport const SecondaryVariantDisabled: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const SecondaryVariantInvalid: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const GhostVariant: Story = {\n    args: {\n        variant: \"ghost\"\n    }\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 WithDefaultValue: Story = {\n    args: {\n        ...Default.args,\n        value: \"#ff0000\"\n    }\n};\n\nexport const WithStartAlign: Story = {\n    args: {\n        ...Default.args,\n        align: \"start\"\n    }\n};\n\nexport const WithCenterAlign: Story = {\n    args: {\n        ...Default.args,\n        align: \"center\"\n    }\n};\n\nexport const WithEndAlign: Story = {\n    args: {\n        ...Default.args,\n        align: \"end\"\n    }\n};\n"],"names":["meta","ColorPickerPrimitive","args","value","setValue","useState","console","Default","MediumSize","LargeSize","ExtraLargeSize","PrimaryVariant","PrimaryVariantDisabled","PrimaryVariantInvalid","SecondaryVariant","SecondaryVariantDisabled","SecondaryVariantInvalid","GhostVariant","GhostVariantDisabled","GhostVariantInvalid","WithDefaultValue","WithStartAlign","WithCenterAlign","WithEndAlign"],"mappings":";;AAIA,MAAMA,OAA0C;IAC5C,OAAO;IACP,WAAWC;IACX,UAAU;QACN,UAAU;YAAE,QAAQ;QAAW;QAC/B,kBAAkB;YAAE,QAAQ;QAAmB;QAC/C,cAAc;YAAE,QAAQ;QAAe;IAC3C;IACA,YAAY;QACR,QAAQ;IACZ;IACA,QAAQC,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAASH,KAAK,KAAK;QAC7C,OAAO,WAAP,GACI,oBAAC;YAAI,WAAW;yBACZ,oBAAC;YAAI,WAAW;yBACZ,oBAACD,sBAAoBA;YAChB,GAAGC,IAAI;YACR,OAAOC;YACP,UAAUA,CAAAA,QAASG,QAAQ,GAAG,CAAC,kBAAkBH;YACjD,kBAAkBA,CAAAA;gBACdG,QAAQ,GAAG,CAAC,0BAA0BH;gBACtCC,SAASD;YACb;2BAGR,oBAAC;YAAI,WAAW;WAAe,0CACH,oBAAC,aAAKA;IAI9C;AACJ;AAEA,qCAAeH;AAGR,MAAMO,UAAiB,CAAC;AAExB,MAAMC,aAAoB;IAC7B,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,YAAmB;IAC5B,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,iBAAwB;IACjC,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,iBAAwB;IACjC,MAAM;QACF,SAAS;IACb;AACJ;AAEO,MAAMC,yBAAgC;IACzC,MAAM;QACF,GAAGD,eAAe,IAAI;QACtB,UAAU;IACd;AACJ;AAEO,MAAME,wBAA+B;IACxC,MAAM;QACF,GAAGF,eAAe,IAAI;QACtB,SAAS;IACb;AACJ;AAEO,MAAMG,mBAA0B;IACnC,MAAM;QACF,SAAS;IACb;AACJ;AAEO,MAAMC,2BAAkC;IAC3C,MAAM;QACF,GAAGD,iBAAiB,IAAI;QACxB,UAAU;IACd;AACJ;AAEO,MAAME,0BAAiC;IAC1C,MAAM;QACF,GAAGF,iBAAiB,IAAI;QACxB,SAAS;IACb;AACJ;AAEO,MAAMG,eAAsB;IAC/B,MAAM;QACF,SAAS;IACb;AACJ;AAEO,MAAMC,uBAA8B;IACvC,MAAM;QACF,GAAGD,aAAa,IAAI;QACpB,UAAU;IACd;AACJ;AAEO,MAAME,sBAA6B;IACtC,MAAM;QACF,GAAGF,aAAa,IAAI;QACpB,SAAS;IACb;AACJ;AAEO,MAAMG,mBAA0B;IACnC,MAAM;QACF,GAAGb,QAAQ,IAAI;QACf,OAAO;IACX;AACJ;AAEO,MAAMc,iBAAwB;IACjC,MAAM;QACF,GAAGd,QAAQ,IAAI;QACf,OAAO;IACX;AACJ;AAEO,MAAMe,kBAAyB;IAClC,MAAM;QACF,GAAGf,QAAQ,IAAI;QACf,OAAO;IACX;AACJ;AAEO,MAAMgB,eAAsB;IAC/B,MAAM;QACF,GAAGhB,QAAQ,IAAI;QACf,OAAO;IACX;AACJ"}

package/DataTable/DataTable.stories.d.ts

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

package/DataTable/DataTable.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable/DataTable.stories.js","sources":["../../src/DataTable/DataTable.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport type { DataTableColumns, DataTableDefaultData, DataTableSorting } from \"./DataTable.js\";\nimport { DataTable } from \"./DataTable.js\";\nimport { Avatar } from \"~/Avatar/index.js\";\nimport { Text } from \"~/Text/index.js\";\n\nconst meta: Meta<typeof DataTable> = {\n    title: \"Components/DataTable\",\n    component: DataTable,\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\ntype Story<T extends Record<string, any> & DataTableDefaultData> = StoryObj<typeof DataTable<T>>;\n\n// Declare the data structure.\ninterface Entry {\n    id: string;\n    name: string;\n    createdBy: string;\n    lastModified: string;\n    status: string;\n}\n\n// Define the columns structure for the table.\nconst columns: DataTableColumns<Entry> = {\n    name: {\n        header: \"Title\"\n    },\n    createdBy: {\n        header: \"Author\"\n    },\n    lastModified: {\n        header: \"Last Modified\"\n    },\n    status: {\n        header: \"Status\"\n    }\n};\n\n// Define the data to display.\nconst data = [\n    {\n        id: \"entry-1\",\n        name: \"Getting Started Guide\",\n        createdBy: \"John Doe\",\n        lastModified: \"1 hour ago\",\n        status: \"Published\"\n    },\n    {\n        id: \"entry-2\",\n        name: \"User Documentation\",\n        createdBy: \"Jane Smith\",\n        lastModified: \"3 days ago\",\n        status: \"Draft\"\n    },\n    {\n        id: \"entry-3\",\n        name: \"API Reference\",\n        createdBy: \"John Doe\",\n        lastModified: \"1 week ago\",\n        status: \"Published\"\n    }\n];\n\nexport const Default: Story<Entry> = {\n    args: {\n        data,\n        columns\n    }\n};\n\nexport const Bordered: Story<Entry> = {\n    args: {\n        ...Default.args,\n        bordered: true\n    }\n};\n\nexport const WithStickyHeader: Story<Entry> = {\n    args: {\n        ...Default.args,\n        stickyHeader: true\n    }\n};\n\nexport const WithSelectableRows: Story<Entry> = {\n    args: Default.args,\n    render: args => {\n        const [selectedRows, setSelectedRows] = useState<Entry[]>([]);\n\n        return (\n            <DataTable\n                {...args}\n                selectedRows={selectedRows}\n                onSelectRow={rows => setSelectedRows(rows)}\n            />\n        );\n    }\n};\n\nexport const WithLoading: Story<Entry> = {\n    args: {\n        columns\n    },\n    render: ({ columns }) => {\n        const [loading, setLoading] = useState(true);\n        const [tableData, setTableData] = useState<Entry[]>([]);\n\n        useEffect(() => {\n            const timer = setTimeout(() => {\n                setTableData(data); // your predefined data\n                setLoading(false);\n            }, 5000);\n\n            return () => clearTimeout(timer);\n        }, []);\n\n        return <DataTable columns={columns} data={tableData} loading={loading} />;\n    }\n};\n\nexport const WithLongColumnContent: Story<Entry> = {\n    args: {\n        ...Default.args,\n        columns: {\n            ...columns,\n            name: {\n                ...columns.name,\n                header: \"Name - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\"\n            }\n        },\n        data: data.map(entry => ({\n            ...entry,\n            name: `${entry.name} - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.`\n        }))\n    }\n};\n\nexport const WithCustomCellRenderer: Story<Entry> = {\n    args: {\n        ...Default.args,\n        columns: {\n            ...columns,\n            name: {\n                ...columns.name,\n                cell: (entry: Entry) => {\n                    return (\n                        <div className={\"flex items-center gap-sm-extra\"}>\n                            <Avatar\n                                image={\n                                    <Avatar.Image\n                                        src=\"https://github.com/webiny-bot.png\"\n                                        alt=\"@webiny\"\n                                    />\n                                }\n                                fallback={<Avatar.Fallback>{entry.name.charAt(0)}</Avatar.Fallback>}\n                                size={\"xl\"}\n                            />\n                            <div>\n                                <Text className={\"text-neutral-primary font-semibold\"} as={\"div\"}>\n                                    {entry.name}\n                                </Text>\n                                <Text\n                                    size={\"sm\"}\n                                    className={\"text-neutral-strong\"}\n                                    as={\"div\"}\n                                >{`Last updated: ${entry.lastModified}`}</Text>\n                            </div>\n                        </div>\n                    );\n                }\n            }\n        }\n    }\n};\n\nexport const WithCustomColumnSize: Story<Entry> = {\n    args: {\n        ...Default.args,\n        columns: {\n            ...columns,\n            name: {\n                ...columns.name,\n                size: 200\n            }\n        }\n    }\n};\n\nexport const WithCustomColumnClassName: Story<Entry> = {\n    args: {\n        ...Default.args,\n        columns: {\n            ...columns,\n            lastModified: {\n                ...columns.lastModified,\n                className: \"bg-primary-subtle\"\n            },\n            status: {\n                ...columns.status,\n                className: \"text-right\"\n            }\n        }\n    }\n};\n\nexport const WithSorting: Story<Entry> = {\n    args: {\n        ...Default.args,\n        columns: {\n            ...columns,\n            name: {\n                ...columns.name,\n                enableSorting: true\n            },\n            lastModified: {\n                ...columns.lastModified,\n                enableSorting: true\n            }\n        },\n        sorting: [\n            {\n                id: \"lastModified\",\n                desc: true\n            }\n        ]\n    },\n    render: ({ sorting: argsSorting = [], ...args }) => {\n        const [sorting, setSorting] = useState<DataTableSorting>(argsSorting);\n        return <DataTable {...args} sorting={sorting} onSortingChange={setSorting} />;\n    }\n};\n\n// Add a Documentation story\nexport const Documentation: Story<Entry> = {\n    args: {\n        bordered: true,\n        stickyHeader: true,\n        columns: {\n            name: {\n                header: \"Title\",\n                enableSorting: true\n            },\n            createdBy: {\n                header: \"Author\"\n            },\n            lastModified: {\n                header: \"Last Modified\",\n                enableSorting: true\n            },\n            status: {\n                header: \"Status\"\n            }\n        },\n        data: [\n            {\n                id: \"entry-1\",\n                name: \"Getting Started Guide\",\n                createdBy: \"John Doe\",\n                lastModified: \"1 hour ago\",\n                status: \"Published\"\n            },\n            {\n                id: \"entry-2\",\n                name: \"User Documentation\",\n                createdBy: \"Jane Smith\",\n                lastModified: \"3 days ago\",\n                status: \"Draft\"\n            },\n            {\n                id: \"entry-3\",\n                name: \"API Reference\",\n                createdBy: \"John Doe\",\n                lastModified: \"1 week ago\",\n                status: \"Published\"\n            }\n        ]\n    },\n    render: args => {\n        const [selectedRows, setSelectedRows] = useState<Entry[]>([]);\n        const [sorting, setSorting] = useState<DataTableSorting>([]);\n\n        return (\n            <DataTable\n                {...args}\n                selectedRows={selectedRows}\n                onSelectRow={rows => setSelectedRows(rows)}\n                sorting={sorting}\n                onSortingChange={setSorting}\n            />\n        );\n    },\n    parameters: {\n        docs: {\n            description: {\n                story: \"This example shows a DataTable with selectable rows, sorting, and a sticky header.\"\n            }\n        }\n    },\n    argTypes: {\n        bordered: {\n            description: \"Show or hide borders.\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        stickyHeader: {\n            description: \"Enable sticky header.\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        columns: {\n            description: \"Columns definition. Please refer to the code example for details.\",\n            control: false\n        },\n        data: {\n            description:\n                \"Data to display into DataTable body. Please refer to the code example for details.\",\n            control: false\n        }\n    }\n};\n"],"names":["meta","DataTable","columns","data","Default","Bordered","WithStickyHeader","WithSelectableRows","args","selectedRows","setSelectedRows","useState","rows","WithLoading","loading","setLoading","tableData","setTableData","useEffect","timer","setTimeout","clearTimeout","WithLongColumnContent","entry","WithCustomCellRenderer","Avatar","Text","WithCustomColumnSize","WithCustomColumnClassName","WithSorting","argsSorting","sorting","setSorting","Documentation"],"mappings":"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"}
+{"version":3,"file":"DataTable/DataTable.stories.js","sources":["../../src/DataTable/DataTable.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport type { DataTableColumns, DataTableDefaultData, DataTableSorting } from \"./DataTable.js\";\nimport { DataTable } from \"./DataTable.js\";\nimport { Avatar } from \"~/Avatar/index.js\";\nimport { Text } from \"~/Text/index.js\";\n\nconst meta: Meta<typeof DataTable> = {\n    title: \"Components/DataTable\",\n    component: DataTable,\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\ntype Story<T extends Record<string, any> & DataTableDefaultData> = StoryObj<typeof DataTable<T>>;\n\n// Declare the data structure.\ninterface Entry {\n    id: string;\n    name: string;\n    createdBy: string;\n    lastModified: string;\n    status: string;\n}\n\n// Define the columns structure for the table.\nconst columns: DataTableColumns<Entry> = {\n    name: {\n        header: \"Title\"\n    },\n    createdBy: {\n        header: \"Author\"\n    },\n    lastModified: {\n        header: \"Last Modified\"\n    },\n    status: {\n        header: \"Status\"\n    }\n};\n\n// Define the data to display.\nconst data = [\n    {\n        id: \"entry-1\",\n        name: \"Getting Started Guide\",\n        createdBy: \"John Doe\",\n        lastModified: \"1 hour ago\",\n        status: \"Published\"\n    },\n    {\n        id: \"entry-2\",\n        name: \"User Documentation\",\n        createdBy: \"Jane Smith\",\n        lastModified: \"3 days ago\",\n        status: \"Draft\"\n    },\n    {\n        id: \"entry-3\",\n        name: \"API Reference\",\n        createdBy: \"John Doe\",\n        lastModified: \"1 week ago\",\n        status: \"Published\"\n    }\n];\n\nexport const Default: Story<Entry> = {\n    args: {\n        data,\n        columns\n    }\n};\n\nexport const Bordered: Story<Entry> = {\n    args: {\n        ...Default.args,\n        bordered: true\n    }\n};\n\nexport const WithStickyHeader: Story<Entry> = {\n    args: {\n        ...Default.args,\n        stickyHeader: true\n    }\n};\n\nexport const WithSelectableRows: Story<Entry> = {\n    args: Default.args,\n    render: args => {\n        const [selectedRows, setSelectedRows] = useState<Entry[]>([]);\n\n        return (\n            <DataTable\n                {...args}\n                selectedRows={selectedRows}\n                onSelectRow={rows => setSelectedRows(rows)}\n            />\n        );\n    }\n};\n\nexport const WithLoading: Story<Entry> = {\n    args: {\n        columns\n    },\n    render: ({ columns }) => {\n        const [loading, setLoading] = useState(true);\n        const [tableData, setTableData] = useState<Entry[]>([]);\n\n        useEffect(() => {\n            const timer = setTimeout(() => {\n                setTableData(data); // your predefined data\n                setLoading(false);\n            }, 5000);\n\n            return () => clearTimeout(timer);\n        }, []);\n\n        return <DataTable columns={columns} data={tableData} loading={loading} />;\n    }\n};\n\nexport const WithLongColumnContent: Story<Entry> = {\n    args: {\n        ...Default.args,\n        columns: {\n            ...columns,\n            name: {\n                ...columns.name,\n                header: \"Name - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\"\n            }\n        },\n        data: data.map(entry => ({\n            ...entry,\n            name: `${entry.name} - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.`\n        }))\n    }\n};\n\nexport const WithCustomCellRenderer: Story<Entry> = {\n    args: {\n        ...Default.args,\n        columns: {\n            ...columns,\n            name: {\n                ...columns.name,\n                cell: (entry: Entry) => {\n                    return (\n                        <div className={\"flex items-center gap-sm-extra\"}>\n                            <Avatar\n                                image={\n                                    <Avatar.Image\n                                        src=\"https://github.com/webiny-bot.png\"\n                                        alt=\"@webiny\"\n                                    />\n                                }\n                                fallback={<Avatar.Fallback>{entry.name.charAt(0)}</Avatar.Fallback>}\n                                size={\"xl\"}\n                            />\n                            <div>\n                                <Text className={\"text-neutral-primary font-semibold\"} as={\"div\"}>\n                                    {entry.name}\n                                </Text>\n                                <Text\n                                    size={\"sm\"}\n                                    className={\"text-neutral-strong\"}\n                                    as={\"div\"}\n                                >{`Last updated: ${entry.lastModified}`}</Text>\n                            </div>\n                        </div>\n                    );\n                }\n            }\n        }\n    }\n};\n\nexport const WithCustomColumnSize: Story<Entry> = {\n    args: {\n        ...Default.args,\n        columns: {\n            ...columns,\n            name: {\n                ...columns.name,\n                size: 200\n            }\n        }\n    }\n};\n\nexport const WithCustomColumnClassName: Story<Entry> = {\n    args: {\n        ...Default.args,\n        columns: {\n            ...columns,\n            lastModified: {\n                ...columns.lastModified,\n                className: \"bg-primary-subtle\"\n            },\n            status: {\n                ...columns.status,\n                className: \"text-right\"\n            }\n        }\n    }\n};\n\nexport const WithSorting: Story<Entry> = {\n    args: {\n        ...Default.args,\n        columns: {\n            ...columns,\n            name: {\n                ...columns.name,\n                enableSorting: true\n            },\n            lastModified: {\n                ...columns.lastModified,\n                enableSorting: true\n            }\n        },\n        sorting: [\n            {\n                id: \"lastModified\",\n                desc: true\n            }\n        ]\n    },\n    render: ({ sorting: argsSorting = [], ...args }) => {\n        const [sorting, setSorting] = useState<DataTableSorting>(argsSorting);\n        return <DataTable {...args} sorting={sorting} onSortingChange={setSorting} />;\n    }\n};\n\n// Add a Documentation story\nexport const Documentation: Story<Entry> = {\n    args: {\n        bordered: true,\n        stickyHeader: true,\n        columns: {\n            name: {\n                header: \"Title\",\n                enableSorting: true\n            },\n            createdBy: {\n                header: \"Author\"\n            },\n            lastModified: {\n                header: \"Last Modified\",\n                enableSorting: true\n            },\n            status: {\n                header: \"Status\"\n            }\n        },\n        data: [\n            {\n                id: \"entry-1\",\n                name: \"Getting Started Guide\",\n                createdBy: \"John Doe\",\n                lastModified: \"1 hour ago\",\n                status: \"Published\"\n            },\n            {\n                id: \"entry-2\",\n                name: \"User Documentation\",\n                createdBy: \"Jane Smith\",\n                lastModified: \"3 days ago\",\n                status: \"Draft\"\n            },\n            {\n                id: \"entry-3\",\n                name: \"API Reference\",\n                createdBy: \"John Doe\",\n                lastModified: \"1 week ago\",\n                status: \"Published\"\n            }\n        ]\n    },\n    render: args => {\n        const [selectedRows, setSelectedRows] = useState<Entry[]>([]);\n        const [sorting, setSorting] = useState<DataTableSorting>([]);\n\n        return (\n            <DataTable\n                {...args}\n                selectedRows={selectedRows}\n                onSelectRow={rows => setSelectedRows(rows)}\n                sorting={sorting}\n                onSortingChange={setSorting}\n            />\n        );\n    },\n    parameters: {\n        docs: {\n            description: {\n                story: \"This example shows a DataTable with selectable rows, sorting, and a sticky header.\"\n            }\n        }\n    },\n    argTypes: {\n        bordered: {\n            description: \"Show or hide borders.\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        stickyHeader: {\n            description: \"Enable sticky header.\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        columns: {\n            description: \"Columns definition. Please refer to the code example for details.\",\n            control: false\n        },\n        data: {\n            description:\n                \"Data to display into DataTable body. Please refer to the code example for details.\",\n            control: false\n        }\n    }\n};\n"],"names":["meta","DataTable","columns","data","Default","Bordered","WithStickyHeader","WithSelectableRows","args","selectedRows","setSelectedRows","useState","rows","WithLoading","loading","setLoading","tableData","setTableData","useEffect","timer","setTimeout","clearTimeout","WithLongColumnContent","entry","WithCustomCellRenderer","Avatar","Text","WithCustomColumnSize","WithCustomColumnClassName","WithSorting","argsSorting","sorting","setSorting","Documentation"],"mappings":"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"}

package/DatePicker/DatePicker.stories.d.ts

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