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

package/AutoComplete/primitives/AutoCompletePrimitive.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"AutoComplete/primitives/AutoCompletePrimitive.stories.js","sources":["../../../src/AutoComplete/primitives/AutoCompletePrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { ReactComponent as SearchIcon } from \"@webiny/icons/search.svg\";\nimport { AutoCompletePrimitive } from \"./AutoCompletePrimitive.js\";\nimport { Button } from \"~/Button/index.js\";\nimport { Icon } from \"~/Icon/index.js\";\n\nconst meta: Meta<typeof AutoCompletePrimitive> = {\n    title: \"Components/Form Primitives/Autocomplete\",\n    component: AutoCompletePrimitive,\n    parameters: {\n        layout: \"padded\"\n    },\n    argTypes: {\n        onValueChange: { action: \"onValueChange\" },\n        onOpenChange: { action: \"onOpenChange\" }\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return (\n            <div className={\"w-full\"}>\n                <AutoCompletePrimitive {...args} value={value} onValueChange={setValue} />\n                <div className={\"mt-4 text-center\"}>\n                    Current selected value: <pre>{value}</pre>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof AutoCompletePrimitive>;\n\nexport const Default: Story = {\n    args: {\n        options: [\n            \"Eastern Standard Time (EST)\",\n            \"Central Standard Time (CST)\",\n            \"Pacific Standard Time (PST)\",\n            \"Greenwich Mean Time (GMT)\",\n            \"Central European Time (CET)\",\n            \"Central Africa Time (CAT)\",\n            \"India Standard Time (IST)\",\n            \"China Standard Time (CST)\",\n            \"Japan Standard Time (JST)\",\n            \"Australian Western Standard Time (AWST)\",\n            \"New Zealand Standard Time (NZST)\",\n            \"Fiji Time (FJT)\",\n            \"Argentina Time (ART)\",\n            \"Bolivia Time (BOT)\",\n            \"Brasilia Time (BRT)\"\n        ]\n    }\n};\n\nexport const MediumSize: Story = {\n    args: {\n        ...Default.args,\n        size: \"md\"\n    }\n};\n\nexport const LargeSize: Story = {\n    args: {\n        ...Default.args,\n        size: \"lg\"\n    }\n};\n\nexport const ExtraLargeSize: Story = {\n    args: {\n        ...Default.args,\n        size: \"xl\"\n    }\n};\n\nexport const WithStartIcon: Story = {\n    args: {\n        ...Default.args,\n        startIcon: <Icon label={\"Search\"} icon={<SearchIcon />} />\n    }\n};\n\nexport const WithLoading: Story = {\n    args: {\n        ...Default.args,\n        loading: true\n    }\n};\n\nexport const WithoutResetAction: Story = {\n    args: {\n        ...Default.args,\n        displayResetAction: false\n    }\n};\n\nexport const PrimaryVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"primary\"\n    }\n};\n\nexport const PrimaryVariantDisabled: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const PrimaryVariantInvalid: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const SecondaryVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"secondary\",\n        placeholder: \"Custom placeholder\"\n    }\n};\n\nexport const SecondaryVariantDisabled: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const SecondaryVariantInvalid: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const GhostVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"ghost\",\n        placeholder: \"Custom placeholder\"\n    }\n};\n\nexport const GhostVariantDisabled: Story = {\n    args: {\n        ...GhostVariant.args,\n        disabled: true\n    }\n};\n\nexport const GhostVariantInvalid: Story = {\n    args: {\n        ...GhostVariant.args,\n        invalid: true\n    }\n};\n\nexport const GhostNegativeVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"ghost-negative\",\n        placeholder: \"Custom placeholder\"\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark text-neutral-light p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const GhostNegativeVariantDisabled: Story = {\n    args: {\n        ...GhostNegativeVariant.args,\n        disabled: true\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark text-neutral-light p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const GhostNegativeVariantInvalid: Story = {\n    args: {\n        ...GhostNegativeVariant.args,\n        invalid: true\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark text-neutral-light p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const WithPredefinedValue: Story = {\n    args: {\n        ...Default.args,\n        value: \"Eastern Standard Time (EST)\"\n    }\n};\n\nexport const WithCustomPlaceholder: Story = {\n    args: {\n        ...Default.args,\n        placeholder: \"Custom placeholder\"\n    }\n};\n\nexport const WithCustomEmptyMessage: Story = {\n    args: {\n        ...Default.args,\n        emptyMessage: \"Custom empty message\"\n    }\n};\n\nexport const WithCustomInitialMessage: Story = {\n    args: {\n        ...Default.args,\n        initialMessage: \"Custom initial message.\",\n        options: []\n    }\n};\n\nexport const WithFormattedOptions: Story = {\n    args: {\n        ...Default.args,\n        options: [\n            { label: \"Eastern Standard Time (EST)\", value: \"est\" },\n            { label: \"Central Standard Time (CST)\", value: \"cst\" },\n            { label: \"Pacific Standard Time (PST)\", value: \"pst\" },\n            { label: \"Greenwich Mean Time (GMT)\", value: \"gmt\" },\n            { label: \"Central European Time (CET)\", value: \"cet\" },\n            { label: \"Central Africa Time (CAT)\", value: \"cat\" },\n            { label: \"India Standard Time (IST)\", value: \"ist\" },\n            { label: \"China Standard Time (CST)\", value: \"cst_china\" },\n            { label: \"Japan Standard Time (JST)\", value: \"jst\" },\n            { label: \"Australian Western Standard Time (AWST)\", value: \"awst\" },\n            { label: \"New Zealand Standard Time (NZST)\", value: \"nzst\" },\n            { label: \"Fiji Time (FJT)\", value: \"fjt\" },\n            { label: \"Argentina Time (ART)\", value: \"art\" },\n            { label: \"Bolivia Time (BOT)\", value: \"bot\" },\n            { label: \"Brasilia Time (BRT)\", value: \"brt\" }\n        ]\n    }\n};\n\nexport const WithCustomOptionRenderer: Story = {\n    args: {\n        ...Default.args,\n        options: [\n            {\n                label: \"Eastern Standard Time (EST)\",\n                value: \"est\",\n                item: {\n                    name: \"Eastern Standard Time (EST)\",\n                    time_difference: \"-5:00\",\n                    flag: \"🇺🇸\"\n                }\n            },\n            {\n                label: \"Central Standard Time (CST)\",\n                value: \"cst\",\n                item: {\n                    name: \"Central Standard Time (CST)\",\n                    time_difference: \"-6:00\",\n                    flag: \"🇺🇸\"\n                }\n            },\n            {\n                label: \"Pacific Standard Time (PST)\",\n                value: \"pst\",\n                item: {\n                    name: \"Pacific Standard Time (PST)\",\n                    time_difference: \"-8:00\",\n                    flag: \"🇺🇸\"\n                }\n            },\n            {\n                label: \"Greenwich Mean Time (GMT)\",\n                value: \"gmt\",\n                item: {\n                    name: \"Greenwich Mean Time (GMT)\",\n                    time_difference: \"±0:00\",\n                    flag: \"🇬🇧\"\n                }\n            },\n            {\n                label: \"Central European Time (CET)\",\n                value: \"cet\",\n                item: {\n                    name: \"Central European Time (CET)\",\n                    time_difference: \"+1:00\",\n                    flag: \"🇪🇺\"\n                }\n            },\n            {\n                label: \"Central Africa Time (CAT)\",\n                value: \"cat\",\n                item: {\n                    name: \"Central Africa Time (CAT)\",\n                    time_difference: \"+2:00\",\n                    flag: \"🇿🇦\"\n                }\n            },\n            {\n                label: \"India Standard Time (IST)\",\n                value: \"ist\",\n                item: {\n                    name: \"India Standard Time (IST)\",\n                    time_difference: \"+5:30\",\n                    flag: \"🇮🇳\"\n                }\n            },\n            {\n                label: \"China Standard Time (CST)\",\n                value: \"cst_china\",\n                item: {\n                    name: \"China Standard Time (CST)\",\n                    time_difference: \"+8:00\",\n                    flag: \"🇨🇳\"\n                }\n            },\n            {\n                label: \"Japan Standard Time (JST)\",\n                value: \"jst\",\n                item: {\n                    name: \"Japan Standard Time (JST)\",\n                    time_difference: \"+9:00\",\n                    flag: \"🇯🇵\"\n                }\n            },\n            {\n                label: \"Australian Western Standard Time (AWST)\",\n                value: \"awst\",\n                item: {\n                    name: \"Australian Western Standard Time (AWST)\",\n                    time_difference: \"+8:00\",\n                    flag: \"🇦🇺\"\n                }\n            },\n            {\n                label: \"New Zealand Standard Time (NZST)\",\n                value: \"nzst\",\n                item: {\n                    name: \"New Zealand Standard Time (NZST)\",\n                    time_difference: \"+12:00\",\n                    flag: \"🇳🇿\"\n                }\n            },\n            {\n                label: \"Fiji Time (FJT)\",\n                value: \"fjt\",\n                item: {\n                    name: \"Fiji Time (FJT)\",\n                    time_difference: \"+12:00\",\n                    flag: \"🇫🇯\"\n                }\n            },\n            {\n                label: \"Argentina Time (ART)\",\n                value: \"art\",\n                item: {\n                    name: \"Argentina Time (ART)\",\n                    time_difference: \"-3:00\",\n                    flag: \"🇦🇷\"\n                }\n            },\n            {\n                label: \"Bolivia Time (BOT)\",\n                value: \"bot\",\n                item: {\n                    name: \"Bolivia Time (BOT)\",\n                    time_difference: \"-4:00\",\n                    flag: \"🇧🇴\"\n                }\n            },\n            {\n                label: \"Brasilia Time (BRT)\",\n                value: \"brt\",\n                item: {\n                    name: \"Brasilia Time (BRT)\",\n                    time_difference: \"-3:00\",\n                    flag: \"🇧🇷\"\n                }\n            }\n        ],\n        optionRenderer: item => {\n            return (\n                <div className={\"w-full flex justify-between align-middle\"}>\n                    <div>\n                        <span className={\"mr-sm\"}>{item.flag}</span>\n                        {item.name}\n                    </div>\n                    <div className={\"text-sm\"}>{item.time_difference}</div>\n                </div>\n            );\n        }\n    }\n};\n\nexport const WithSeparators: Story = {\n    args: {\n        ...Default.args,\n        options: [\n            { label: \"Eastern Standard Time (EST)\", value: \"est\" },\n            { label: \"Central Standard Time (CST)\", value: \"cst\" },\n            { label: \"Pacific Standard Time (PST)\", value: \"pst\", separator: true },\n            { label: \"Greenwich Mean Time (GMT)\", value: \"gmt\" },\n            { label: \"Central European Time (CET)\", value: \"cet\" },\n            { label: \"Central Africa Time (CAT)\", value: \"cat\", separator: true },\n            { label: \"India Standard Time (IST)\", value: \"ist\" },\n            { label: \"China Standard Time (CST)\", value: \"cst_china\" },\n            { label: \"Japan Standard Time (JST)\", value: \"jst\", separator: true },\n            { label: \"Australian Western Standard Time (AWST)\", value: \"awst\" },\n            { label: \"New Zealand Standard Time (NZST)\", value: \"nzst\" },\n            { label: \"Fiji Time (FJT)\", value: \"fjt\", separator: true },\n            { label: \"Argentina Time (ART)\", value: \"art\" },\n            { label: \"Bolivia Time (BOT)\", value: \"bot\" },\n            { label: \"Brasilia Time (BRT)\", value: \"brt\" }\n        ]\n    }\n};\n\nexport const WithDisabledOptions: Story = {\n    args: {\n        options: [\n            { label: \"Eastern Standard Time (EST)\", value: \"est\", disabled: true },\n            { label: \"Central Standard Time (CST)\", value: \"cst\", disabled: true },\n            { label: \"Pacific Standard Time (PST)\", value: \"pst\", disabled: true },\n            { label: \"Greenwich Mean Time (GMT)\", value: \"gmt\" },\n            { label: \"Central European Time (CET)\", value: \"cet\" },\n            { label: \"Central Africa Time (CAT)\", value: \"cat\" },\n            { label: \"India Standard Time (IST)\", value: \"ist\" },\n            { label: \"China Standard Time (CST)\", value: \"cst_china\" },\n            { label: \"Japan Standard Time (JST)\", value: \"jst\" },\n            { label: \"Australian Western Standard Time (AWST)\", value: \"awst\" },\n            { label: \"New Zealand Standard Time (NZST)\", value: \"nzst\" },\n            { label: \"Fiji Time (FJT)\", value: \"fjt\" },\n            { label: \"Argentina Time (ART)\", value: \"art\" },\n            { label: \"Bolivia Time (BOT)\", value: \"bot\" },\n            { label: \"Brasilia Time (BRT)\", value: \"brt\" }\n        ]\n    }\n};\n\nexport const WithExternalValueControl: Story = {\n    args: {\n        ...Default.args,\n        options: [\n            { label: \"Eastern Standard Time (EST)\", value: \"est\" },\n            { label: \"Central Standard Time (CST)\", value: \"cst\" },\n            { label: \"Pacific Standard Time (PST)\", value: \"pst\" },\n            { label: \"Greenwich Mean Time (GMT)\", value: \"gmt\" },\n            { label: \"Central European Time (CET)\", value: \"cet\" },\n            { label: \"Central Africa Time (CAT)\", value: \"cat\" },\n            { label: \"India Standard Time (IST)\", value: \"ist\" },\n            { label: \"China Standard Time (CST)\", value: \"cst_china\" },\n            { label: \"Japan Standard Time (JST)\", value: \"jst\" },\n            { label: \"Australian Western Standard Time (AWST)\", value: \"awst\" },\n            { label: \"New Zealand Standard Time (NZST)\", value: \"nzst\" },\n            { label: \"Fiji Time (FJT)\", value: \"fjt\" },\n            { label: \"Argentina Time (ART)\", value: \"art\" },\n            { label: \"Bolivia Time (BOT)\", value: \"bot\" },\n            { label: \"Brasilia Time (BRT)\", value: \"brt\" }\n        ]\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return (\n            <div className={\"w-full\"}>\n                <div>\n                    <AutoCompletePrimitive\n                        {...args}\n                        value={value}\n                        onValueChange={value => setValue(value)}\n                    />\n                </div>\n                <div className={\"mt-4 text-center\"}>\n                    <Button text={\"Reset\"} onClick={() => setValue(\"\")} />\n                </div>\n                <div className={\"mt-4 text-center\"}>\n                    Current selected value: <pre>{value}</pre>\n                </div>\n            </div>\n        );\n    }\n};\n"],"names":["meta","AutoCompletePrimitive","args","value","setValue","useState","Default","MediumSize","LargeSize","ExtraLargeSize","WithStartIcon","Icon","SearchIcon","WithLoading","WithoutResetAction","PrimaryVariant","PrimaryVariantDisabled","PrimaryVariantInvalid","SecondaryVariant","SecondaryVariantDisabled","SecondaryVariantInvalid","GhostVariant","GhostVariantDisabled","GhostVariantInvalid","GhostNegativeVariant","Story","GhostNegativeVariantDisabled","GhostNegativeVariantInvalid","WithPredefinedValue","WithCustomPlaceholder","WithCustomEmptyMessage","WithCustomInitialMessage","WithFormattedOptions","WithCustomOptionRenderer","item","WithSeparators","WithDisabledOptions","WithExternalValueControl","Button"],"mappings":";;;;;AAOA,MAAMA,OAA2C;IAC7C,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;IACA,UAAU;QACN,eAAe;YAAE,QAAQ;QAAgB;QACzC,cAAc;YAAE,QAAQ;QAAe;IAC3C;IACA,QAAQC,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAASH,KAAK,KAAK;QAC7C,OAAO,WAAP,GACI,oBAAC;YAAI,WAAW;yBACZ,oBAACD,uBAAqBA;YAAE,GAAGC,IAAI;YAAE,OAAOC;YAAO,eAAeC;0BAC9D,oBAAC;YAAI,WAAW;WAAoB,0CACR,oBAAC,aAAKD;IAI9C;AACJ;AAEA,sCAAeH;AAIR,MAAMM,UAAiB;IAC1B,MAAM;QACF,SAAS;YACL;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;SACH;IACL;AACJ;AAEO,MAAMC,aAAoB;IAC7B,MAAM;QACF,GAAGD,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAME,YAAmB;IAC5B,MAAM;QACF,GAAGF,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMG,iBAAwB;IACjC,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMI,gBAAuB;IAChC,MAAM;QACF,GAAGJ,QAAQ,IAAI;QACf,WAAW,WAAX,GAAW,oBAACK,MAAIA;YAAC,OAAO;YAAU,oBAAM,oBAACC,gBAAUA;;IACvD;AACJ;AAEO,MAAMC,cAAqB;IAC9B,MAAM;QACF,GAAGP,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAMQ,qBAA4B;IACrC,MAAM;QACF,GAAGR,QAAQ,IAAI;QACf,oBAAoB;IACxB;AACJ;AAEO,MAAMS,iBAAwB;IACjC,MAAM;QACF,GAAGT,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAMU,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,GAAGZ,QAAQ,IAAI;QACf,SAAS;QACT,aAAa;IACjB;AACJ;AAEO,MAAMa,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,GAAGf,QAAQ,IAAI;QACf,SAAS;QACT,aAAa;IACjB;AACJ;AAEO,MAAMgB,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,uBAA8B;IACvC,MAAM;QACF,GAAGlB,QAAQ,IAAI;QACf,SAAS;QACT,aAAa;IACjB;IACA,YAAY;QACRmB,CAAAA,QAAAA,WAAAA,GACI,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;AACL;AAEO,MAAMC,+BAAsC;IAC/C,MAAM;QACF,GAAGF,qBAAqB,IAAI;QAC5B,UAAU;IACd;IACA,YAAY;QACRC,CAAAA,QAAAA,WAAAA,GACI,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;AACL;AAEO,MAAME,8BAAqC;IAC9C,MAAM;QACF,GAAGH,qBAAqB,IAAI;QAC5B,SAAS;IACb;IACA,YAAY;QACRC,CAAAA,QAAAA,WAAAA,GACI,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;AACL;AAEO,MAAMG,sBAA6B;IACtC,MAAM;QACF,GAAGtB,QAAQ,IAAI;QACf,OAAO;IACX;AACJ;AAEO,MAAMuB,wBAA+B;IACxC,MAAM;QACF,GAAGvB,QAAQ,IAAI;QACf,aAAa;IACjB;AACJ;AAEO,MAAMwB,yBAAgC;IACzC,MAAM;QACF,GAAGxB,QAAQ,IAAI;QACf,cAAc;IAClB;AACJ;AAEO,MAAMyB,2BAAkC;IAC3C,MAAM;QACF,GAAGzB,QAAQ,IAAI;QACf,gBAAgB;QAChB,SAAS,EAAE;IACf;AACJ;AAEO,MAAM0B,uBAA8B;IACvC,MAAM;QACF,GAAG1B,QAAQ,IAAI;QACf,SAAS;YACL;gBAAE,OAAO;gBAA+B,OAAO;YAAM;YACrD;gBAAE,OAAO;gBAA+B,OAAO;YAAM;YACrD;gBAAE,OAAO;gBAA+B,OAAO;YAAM;YACrD;gBAAE,OAAO;gBAA6B,OAAO;YAAM;YACnD;gBAAE,OAAO;gBAA+B,OAAO;YAAM;YACrD;gBAAE,OAAO;gBAA6B,OAAO;YAAM;YACnD;gBAAE,OAAO;gBAA6B,OAAO;YAAM;YACnD;gBAAE,OAAO;gBAA6B,OAAO;YAAY;YACzD;gBAAE,OAAO;gBAA6B,OAAO;YAAM;YACnD;gBAAE,OAAO;gBAA2C,OAAO;YAAO;YAClE;gBAAE,OAAO;gBAAoC,OAAO;YAAO;YAC3D;gBAAE,OAAO;gBAAmB,OAAO;YAAM;YACzC;gBAAE,OAAO;gBAAwB,OAAO;YAAM;YAC9C;gBAAE,OAAO;gBAAsB,OAAO;YAAM;YAC5C;gBAAE,OAAO;gBAAuB,OAAO;YAAM;SAChD;IACL;AACJ;AAEO,MAAM2B,2BAAkC;IAC3C,MAAM;QACF,GAAG3B,QAAQ,IAAI;QACf,SAAS;YACL;gBACI,OAAO;gBACP,OAAO;gBACP,MAAM;oBACF,MAAM;oBACN,iBAAiB;oBACjB,MAAM;gBACV;YACJ;YACA;gBACI,OAAO;gBACP,OAAO;gBACP,MAAM;oBACF,MAAM;oBACN,iBAAiB;oBACjB,MAAM;gBACV;YACJ;YACA;gBACI,OAAO;gBACP,OAAO;gBACP,MAAM;oBACF,MAAM;oBACN,iBAAiB;oBACjB,MAAM;gBACV;YACJ;YACA;gBACI,OAAO;gBACP,OAAO;gBACP,MAAM;oBACF,MAAM;oBACN,iBAAiB;oBACjB,MAAM;gBACV;YACJ;YACA;gBACI,OAAO;gBACP,OAAO;gBACP,MAAM;oBACF,MAAM;oBACN,iBAAiB;oBACjB,MAAM;gBACV;YACJ;YACA;gBACI,OAAO;gBACP,OAAO;gBACP,MAAM;oBACF,MAAM;oBACN,iBAAiB;oBACjB,MAAM;gBACV;YACJ;YACA;gBACI,OAAO;gBACP,OAAO;gBACP,MAAM;oBACF,MAAM;oBACN,iBAAiB;oBACjB,MAAM;gBACV;YACJ;YACA;gBACI,OAAO;gBACP,OAAO;gBACP,MAAM;oBACF,MAAM;oBACN,iBAAiB;oBACjB,MAAM;gBACV;YACJ;YACA;gBACI,OAAO;gBACP,OAAO;gBACP,MAAM;oBACF,MAAM;oBACN,iBAAiB;oBACjB,MAAM;gBACV;YACJ;YACA;gBACI,OAAO;gBACP,OAAO;gBACP,MAAM;oBACF,MAAM;oBACN,iBAAiB;oBACjB,MAAM;gBACV;YACJ;YACA;gBACI,OAAO;gBACP,OAAO;gBACP,MAAM;oBACF,MAAM;oBACN,iBAAiB;oBACjB,MAAM;gBACV;YACJ;YACA;gBACI,OAAO;gBACP,OAAO;gBACP,MAAM;oBACF,MAAM;oBACN,iBAAiB;oBACjB,MAAM;gBACV;YACJ;YACA;gBACI,OAAO;gBACP,OAAO;gBACP,MAAM;oBACF,MAAM;oBACN,iBAAiB;oBACjB,MAAM;gBACV;YACJ;YACA;gBACI,OAAO;gBACP,OAAO;gBACP,MAAM;oBACF,MAAM;oBACN,iBAAiB;oBACjB,MAAM;gBACV;YACJ;YACA;gBACI,OAAO;gBACP,OAAO;gBACP,MAAM;oBACF,MAAM;oBACN,iBAAiB;oBACjB,MAAM;gBACV;YACJ;SACH;QACD,gBAAgB4B,CAAAA,OACL,WAAP,GACI,oBAAC;gBAAI,WAAW;6BACZ,oBAAC,2BACG,oBAAC;gBAAK,WAAW;eAAUA,KAAK,IAAI,GACnCA,KAAK,IAAI,iBAEd,oBAAC;gBAAI,WAAW;eAAYA,KAAK,eAAe;IAIhE;AACJ;AAEO,MAAMC,iBAAwB;IACjC,MAAM;QACF,GAAG7B,QAAQ,IAAI;QACf,SAAS;YACL;gBAAE,OAAO;gBAA+B,OAAO;YAAM;YACrD;gBAAE,OAAO;gBAA+B,OAAO;YAAM;YACrD;gBAAE,OAAO;gBAA+B,OAAO;gBAAO,WAAW;YAAK;YACtE;gBAAE,OAAO;gBAA6B,OAAO;YAAM;YACnD;gBAAE,OAAO;gBAA+B,OAAO;YAAM;YACrD;gBAAE,OAAO;gBAA6B,OAAO;gBAAO,WAAW;YAAK;YACpE;gBAAE,OAAO;gBAA6B,OAAO;YAAM;YACnD;gBAAE,OAAO;gBAA6B,OAAO;YAAY;YACzD;gBAAE,OAAO;gBAA6B,OAAO;gBAAO,WAAW;YAAK;YACpE;gBAAE,OAAO;gBAA2C,OAAO;YAAO;YAClE;gBAAE,OAAO;gBAAoC,OAAO;YAAO;YAC3D;gBAAE,OAAO;gBAAmB,OAAO;gBAAO,WAAW;YAAK;YAC1D;gBAAE,OAAO;gBAAwB,OAAO;YAAM;YAC9C;gBAAE,OAAO;gBAAsB,OAAO;YAAM;YAC5C;gBAAE,OAAO;gBAAuB,OAAO;YAAM;SAChD;IACL;AACJ;AAEO,MAAM8B,sBAA6B;IACtC,MAAM;QACF,SAAS;YACL;gBAAE,OAAO;gBAA+B,OAAO;gBAAO,UAAU;YAAK;YACrE;gBAAE,OAAO;gBAA+B,OAAO;gBAAO,UAAU;YAAK;YACrE;gBAAE,OAAO;gBAA+B,OAAO;gBAAO,UAAU;YAAK;YACrE;gBAAE,OAAO;gBAA6B,OAAO;YAAM;YACnD;gBAAE,OAAO;gBAA+B,OAAO;YAAM;YACrD;gBAAE,OAAO;gBAA6B,OAAO;YAAM;YACnD;gBAAE,OAAO;gBAA6B,OAAO;YAAM;YACnD;gBAAE,OAAO;gBAA6B,OAAO;YAAY;YACzD;gBAAE,OAAO;gBAA6B,OAAO;YAAM;YACnD;gBAAE,OAAO;gBAA2C,OAAO;YAAO;YAClE;gBAAE,OAAO;gBAAoC,OAAO;YAAO;YAC3D;gBAAE,OAAO;gBAAmB,OAAO;YAAM;YACzC;gBAAE,OAAO;gBAAwB,OAAO;YAAM;YAC9C;gBAAE,OAAO;gBAAsB,OAAO;YAAM;YAC5C;gBAAE,OAAO;gBAAuB,OAAO;YAAM;SAChD;IACL;AACJ;AAEO,MAAMC,2BAAkC;IAC3C,MAAM;QACF,GAAG/B,QAAQ,IAAI;QACf,SAAS;YACL;gBAAE,OAAO;gBAA+B,OAAO;YAAM;YACrD;gBAAE,OAAO;gBAA+B,OAAO;YAAM;YACrD;gBAAE,OAAO;gBAA+B,OAAO;YAAM;YACrD;gBAAE,OAAO;gBAA6B,OAAO;YAAM;YACnD;gBAAE,OAAO;gBAA+B,OAAO;YAAM;YACrD;gBAAE,OAAO;gBAA6B,OAAO;YAAM;YACnD;gBAAE,OAAO;gBAA6B,OAAO;YAAM;YACnD;gBAAE,OAAO;gBAA6B,OAAO;YAAY;YACzD;gBAAE,OAAO;gBAA6B,OAAO;YAAM;YACnD;gBAAE,OAAO;gBAA2C,OAAO;YAAO;YAClE;gBAAE,OAAO;gBAAoC,OAAO;YAAO;YAC3D;gBAAE,OAAO;gBAAmB,OAAO;YAAM;YACzC;gBAAE,OAAO;gBAAwB,OAAO;YAAM;YAC9C;gBAAE,OAAO;gBAAsB,OAAO;YAAM;YAC5C;gBAAE,OAAO;gBAAuB,OAAO;YAAM;SAChD;IACL;IACA,QAAQJ,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAASH,KAAK,KAAK;QAC7C,OAAO,WAAP,GACI,oBAAC;YAAI,WAAW;yBACZ,oBAAC,2BACG,oBAACD,uBAAqBA;YACjB,GAAGC,IAAI;YACR,OAAOC;YACP,eAAeA,CAAAA,QAASC,SAASD;2BAGzC,oBAAC;YAAI,WAAW;yBACZ,oBAACmC,QAAMA;YAAC,MAAM;YAAS,SAAS,IAAMlC,SAAS;2BAEnD,oBAAC;YAAI,WAAW;WAAoB,0CACR,oBAAC,aAAKD;IAI9C;AACJ"}
+{"version":3,"file":"AutoComplete/primitives/AutoCompletePrimitive.stories.js","sources":["../../../src/AutoComplete/primitives/AutoCompletePrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { ReactComponent as SearchIcon } from \"@webiny/icons/search.svg\";\nimport { AutoCompletePrimitive } from \"./AutoCompletePrimitive.js\";\nimport { Button } from \"~/Button/index.js\";\nimport { Icon } from \"~/Icon/index.js\";\n\nconst meta: Meta<typeof AutoCompletePrimitive> = {\n    title: \"Components/Form Primitives/Autocomplete\",\n    component: AutoCompletePrimitive,\n    parameters: {\n        layout: \"padded\"\n    },\n    argTypes: {\n        onValueChange: { action: \"onValueChange\" },\n        onOpenChange: { action: \"onOpenChange\" }\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return (\n            <div className={\"w-full\"}>\n                <AutoCompletePrimitive {...args} value={value} onValueChange={setValue} />\n                <div className={\"mt-4 text-center\"}>\n                    Current selected value: <pre>{value}</pre>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof AutoCompletePrimitive>;\n\nexport const Default: Story = {\n    args: {\n        options: [\n            \"Eastern Standard Time (EST)\",\n            \"Central Standard Time (CST)\",\n            \"Pacific Standard Time (PST)\",\n            \"Greenwich Mean Time (GMT)\",\n            \"Central European Time (CET)\",\n            \"Central Africa Time (CAT)\",\n            \"India Standard Time (IST)\",\n            \"China Standard Time (CST)\",\n            \"Japan Standard Time (JST)\",\n            \"Australian Western Standard Time (AWST)\",\n            \"New Zealand Standard Time (NZST)\",\n            \"Fiji Time (FJT)\",\n            \"Argentina Time (ART)\",\n            \"Bolivia Time (BOT)\",\n            \"Brasilia Time (BRT)\"\n        ]\n    }\n};\n\nexport const MediumSize: Story = {\n    args: {\n        ...Default.args,\n        size: \"md\"\n    }\n};\n\nexport const LargeSize: Story = {\n    args: {\n        ...Default.args,\n        size: \"lg\"\n    }\n};\n\nexport const ExtraLargeSize: Story = {\n    args: {\n        ...Default.args,\n        size: \"xl\"\n    }\n};\n\nexport const WithStartIcon: Story = {\n    args: {\n        ...Default.args,\n        startIcon: <Icon label={\"Search\"} icon={<SearchIcon />} />\n    }\n};\n\nexport const WithLoading: Story = {\n    args: {\n        ...Default.args,\n        loading: true\n    }\n};\n\nexport const WithoutResetAction: Story = {\n    args: {\n        ...Default.args,\n        displayResetAction: false\n    }\n};\n\nexport const PrimaryVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"primary\"\n    }\n};\n\nexport const PrimaryVariantDisabled: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const PrimaryVariantInvalid: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const SecondaryVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"secondary\",\n        placeholder: \"Custom placeholder\"\n    }\n};\n\nexport const SecondaryVariantDisabled: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const SecondaryVariantInvalid: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const GhostVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"ghost\",\n        placeholder: \"Custom placeholder\"\n    }\n};\n\nexport const GhostVariantDisabled: Story = {\n    args: {\n        ...GhostVariant.args,\n        disabled: true\n    }\n};\n\nexport const GhostVariantInvalid: Story = {\n    args: {\n        ...GhostVariant.args,\n        invalid: true\n    }\n};\n\nexport const GhostNegativeVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"ghost-negative\",\n        placeholder: \"Custom placeholder\"\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark text-neutral-light p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const GhostNegativeVariantDisabled: Story = {\n    args: {\n        ...GhostNegativeVariant.args,\n        disabled: true\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark text-neutral-light p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const GhostNegativeVariantInvalid: Story = {\n    args: {\n        ...GhostNegativeVariant.args,\n        invalid: true\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark text-neutral-light p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const WithPredefinedValue: Story = {\n    args: {\n        ...Default.args,\n        value: \"Eastern Standard Time (EST)\"\n    }\n};\n\nexport const WithCustomPlaceholder: Story = {\n    args: {\n        ...Default.args,\n        placeholder: \"Custom placeholder\"\n    }\n};\n\nexport const WithCustomEmptyMessage: Story = {\n    args: {\n        ...Default.args,\n        emptyMessage: \"Custom empty message\"\n    }\n};\n\nexport const WithCustomInitialMessage: Story = {\n    args: {\n        ...Default.args,\n        initialMessage: \"Custom initial message.\",\n        options: []\n    }\n};\n\nexport const WithFormattedOptions: Story = {\n    args: {\n        ...Default.args,\n        options: [\n            { label: \"Eastern Standard Time (EST)\", value: \"est\" },\n            { label: \"Central Standard Time (CST)\", value: \"cst\" },\n            { label: \"Pacific Standard Time (PST)\", value: \"pst\" },\n            { label: \"Greenwich Mean Time (GMT)\", value: \"gmt\" },\n            { label: \"Central European Time (CET)\", value: \"cet\" },\n            { label: \"Central Africa Time (CAT)\", value: \"cat\" },\n            { label: \"India Standard Time (IST)\", value: \"ist\" },\n            { label: \"China Standard Time (CST)\", value: \"cst_china\" },\n            { label: \"Japan Standard Time (JST)\", value: \"jst\" },\n            { label: \"Australian Western Standard Time (AWST)\", value: \"awst\" },\n            { label: \"New Zealand Standard Time (NZST)\", value: \"nzst\" },\n            { label: \"Fiji Time (FJT)\", value: \"fjt\" },\n            { label: \"Argentina Time (ART)\", value: \"art\" },\n            { label: \"Bolivia Time (BOT)\", value: \"bot\" },\n            { label: \"Brasilia Time (BRT)\", value: \"brt\" }\n        ]\n    }\n};\n\nexport const WithCustomOptionRenderer: Story = {\n    args: {\n        ...Default.args,\n        options: [\n            {\n                label: \"Eastern Standard Time (EST)\",\n                value: \"est\",\n                item: {\n                    name: \"Eastern Standard Time (EST)\",\n                    time_difference: \"-5:00\",\n                    flag: \"🇺🇸\"\n                }\n            },\n            {\n                label: \"Central Standard Time (CST)\",\n                value: \"cst\",\n                item: {\n                    name: \"Central Standard Time (CST)\",\n                    time_difference: \"-6:00\",\n                    flag: \"🇺🇸\"\n                }\n            },\n            {\n                label: \"Pacific Standard Time (PST)\",\n                value: \"pst\",\n                item: {\n                    name: \"Pacific Standard Time (PST)\",\n                    time_difference: \"-8:00\",\n                    flag: \"🇺🇸\"\n                }\n            },\n            {\n                label: \"Greenwich Mean Time (GMT)\",\n                value: \"gmt\",\n                item: {\n                    name: \"Greenwich Mean Time (GMT)\",\n                    time_difference: \"±0:00\",\n                    flag: \"🇬🇧\"\n                }\n            },\n            {\n                label: \"Central European Time (CET)\",\n                value: \"cet\",\n                item: {\n                    name: \"Central European Time (CET)\",\n                    time_difference: \"+1:00\",\n                    flag: \"🇪🇺\"\n                }\n            },\n            {\n                label: \"Central Africa Time (CAT)\",\n                value: \"cat\",\n                item: {\n                    name: \"Central Africa Time (CAT)\",\n                    time_difference: \"+2:00\",\n                    flag: \"🇿🇦\"\n                }\n            },\n            {\n                label: \"India Standard Time (IST)\",\n                value: \"ist\",\n                item: {\n                    name: \"India Standard Time (IST)\",\n                    time_difference: \"+5:30\",\n                    flag: \"🇮🇳\"\n                }\n            },\n            {\n                label: \"China Standard Time (CST)\",\n                value: \"cst_china\",\n                item: {\n                    name: \"China Standard Time (CST)\",\n                    time_difference: \"+8:00\",\n                    flag: \"🇨🇳\"\n                }\n            },\n            {\n                label: \"Japan Standard Time (JST)\",\n                value: \"jst\",\n                item: {\n                    name: \"Japan Standard Time (JST)\",\n                    time_difference: \"+9:00\",\n                    flag: \"🇯🇵\"\n                }\n            },\n            {\n                label: \"Australian Western Standard Time (AWST)\",\n                value: \"awst\",\n                item: {\n                    name: \"Australian Western Standard Time (AWST)\",\n                    time_difference: \"+8:00\",\n                    flag: \"🇦🇺\"\n                }\n            },\n            {\n                label: \"New Zealand Standard Time (NZST)\",\n                value: \"nzst\",\n                item: {\n                    name: \"New Zealand Standard Time (NZST)\",\n                    time_difference: \"+12:00\",\n                    flag: \"🇳🇿\"\n                }\n            },\n            {\n                label: \"Fiji Time (FJT)\",\n                value: \"fjt\",\n                item: {\n                    name: \"Fiji Time (FJT)\",\n                    time_difference: \"+12:00\",\n                    flag: \"🇫🇯\"\n                }\n            },\n            {\n                label: \"Argentina Time (ART)\",\n                value: \"art\",\n                item: {\n                    name: \"Argentina Time (ART)\",\n                    time_difference: \"-3:00\",\n                    flag: \"🇦🇷\"\n                }\n            },\n            {\n                label: \"Bolivia Time (BOT)\",\n                value: \"bot\",\n                item: {\n                    name: \"Bolivia Time (BOT)\",\n                    time_difference: \"-4:00\",\n                    flag: \"🇧🇴\"\n                }\n            },\n            {\n                label: \"Brasilia Time (BRT)\",\n                value: \"brt\",\n                item: {\n                    name: \"Brasilia Time (BRT)\",\n                    time_difference: \"-3:00\",\n                    flag: \"🇧🇷\"\n                }\n            }\n        ],\n        optionRenderer: item => {\n            return (\n                <div className={\"w-full flex justify-between align-middle\"}>\n                    <div>\n                        <span className={\"mr-sm\"}>{item.flag}</span>\n                        {item.name}\n                    </div>\n                    <div className={\"text-sm\"}>{item.time_difference}</div>\n                </div>\n            );\n        }\n    }\n};\n\nexport const WithSeparators: Story = {\n    args: {\n        ...Default.args,\n        options: [\n            { label: \"Eastern Standard Time (EST)\", value: \"est\" },\n            { label: \"Central Standard Time (CST)\", value: \"cst\" },\n            { label: \"Pacific Standard Time (PST)\", value: \"pst\", separator: true },\n            { label: \"Greenwich Mean Time (GMT)\", value: \"gmt\" },\n            { label: \"Central European Time (CET)\", value: \"cet\" },\n            { label: \"Central Africa Time (CAT)\", value: \"cat\", separator: true },\n            { label: \"India Standard Time (IST)\", value: \"ist\" },\n            { label: \"China Standard Time (CST)\", value: \"cst_china\" },\n            { label: \"Japan Standard Time (JST)\", value: \"jst\", separator: true },\n            { label: \"Australian Western Standard Time (AWST)\", value: \"awst\" },\n            { label: \"New Zealand Standard Time (NZST)\", value: \"nzst\" },\n            { label: \"Fiji Time (FJT)\", value: \"fjt\", separator: true },\n            { label: \"Argentina Time (ART)\", value: \"art\" },\n            { label: \"Bolivia Time (BOT)\", value: \"bot\" },\n            { label: \"Brasilia Time (BRT)\", value: \"brt\" }\n        ]\n    }\n};\n\nexport const WithDisabledOptions: Story = {\n    args: {\n        options: [\n            { label: \"Eastern Standard Time (EST)\", value: \"est\", disabled: true },\n            { label: \"Central Standard Time (CST)\", value: \"cst\", disabled: true },\n            { label: \"Pacific Standard Time (PST)\", value: \"pst\", disabled: true },\n            { label: \"Greenwich Mean Time (GMT)\", value: \"gmt\" },\n            { label: \"Central European Time (CET)\", value: \"cet\" },\n            { label: \"Central Africa Time (CAT)\", value: \"cat\" },\n            { label: \"India Standard Time (IST)\", value: \"ist\" },\n            { label: \"China Standard Time (CST)\", value: \"cst_china\" },\n            { label: \"Japan Standard Time (JST)\", value: \"jst\" },\n            { label: \"Australian Western Standard Time (AWST)\", value: \"awst\" },\n            { label: \"New Zealand Standard Time (NZST)\", value: \"nzst\" },\n            { label: \"Fiji Time (FJT)\", value: \"fjt\" },\n            { label: \"Argentina Time (ART)\", value: \"art\" },\n            { label: \"Bolivia Time (BOT)\", value: \"bot\" },\n            { label: \"Brasilia Time (BRT)\", value: \"brt\" }\n        ]\n    }\n};\n\nexport const WithExternalValueControl: Story = {\n    args: {\n        ...Default.args,\n        options: [\n            { label: \"Eastern Standard Time (EST)\", value: \"est\" },\n            { label: \"Central Standard Time (CST)\", value: \"cst\" },\n            { label: \"Pacific Standard Time (PST)\", value: \"pst\" },\n            { label: \"Greenwich Mean Time (GMT)\", value: \"gmt\" },\n            { label: \"Central European Time (CET)\", value: \"cet\" },\n            { label: \"Central Africa Time (CAT)\", value: \"cat\" },\n            { label: \"India Standard Time (IST)\", value: \"ist\" },\n            { label: \"China Standard Time (CST)\", value: \"cst_china\" },\n            { label: \"Japan Standard Time (JST)\", value: \"jst\" },\n            { label: \"Australian Western Standard Time (AWST)\", value: \"awst\" },\n            { label: \"New Zealand Standard Time (NZST)\", value: \"nzst\" },\n            { label: \"Fiji Time (FJT)\", value: \"fjt\" },\n            { label: \"Argentina Time (ART)\", value: \"art\" },\n            { label: \"Bolivia Time (BOT)\", value: \"bot\" },\n            { label: \"Brasilia Time (BRT)\", value: \"brt\" }\n        ]\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return (\n            <div className={\"w-full\"}>\n                <div>\n                    <AutoCompletePrimitive\n                        {...args}\n                        value={value}\n                        onValueChange={value => setValue(value)}\n                    />\n                </div>\n                <div className={\"mt-4 text-center\"}>\n                    <Button text={\"Reset\"} onClick={() => setValue(\"\")} />\n                </div>\n                <div className={\"mt-4 text-center\"}>\n                    Current selected value: <pre>{value}</pre>\n                </div>\n            </div>\n        );\n    }\n};\n"],"names":["meta","AutoCompletePrimitive","args","value","setValue","useState","Default","MediumSize","LargeSize","ExtraLargeSize","WithStartIcon","Icon","SearchIcon","WithLoading","WithoutResetAction","PrimaryVariant","PrimaryVariantDisabled","PrimaryVariantInvalid","SecondaryVariant","SecondaryVariantDisabled","SecondaryVariantInvalid","GhostVariant","GhostVariantDisabled","GhostVariantInvalid","GhostNegativeVariant","Story","GhostNegativeVariantDisabled","GhostNegativeVariantInvalid","WithPredefinedValue","WithCustomPlaceholder","WithCustomEmptyMessage","WithCustomInitialMessage","WithFormattedOptions","WithCustomOptionRenderer","item","WithSeparators","WithDisabledOptions","WithExternalValueControl","Button"],"mappings":"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"}

package/Avatar/Avatar.stories.d.ts

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

package/Avatar/Avatar.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar/Avatar.stories.js","sources":["../../src/Avatar/Avatar.stories.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { ReactComponent as StormIcon } from \"@webiny/icons/storm.svg\";\nimport { Avatar } from \"./Avatar.js\";\n\nconst meta: Meta<typeof Avatar> = {\n    title: \"Components/Avatar\",\n    component: Avatar,\n    argTypes: {\n        size: {\n            control: \"select\",\n            options: [\"sm\", \"md\", \"lg\", \"xl\"],\n            defaultValue: \"md\"\n        },\n        variant: {\n            control: \"select\",\n            options: [\"strong\", \"subtle\", \"light\", \"quiet\", \"outlined\"],\n            defaultValue: \"strong\"\n        }\n    }\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Avatar>;\n\nexport const Default: Story = {\n    args: {\n        image: <Avatar.Image src=\"https://i.pravatar.cc/300\" alt=\"@webiny\" />,\n        fallback: <Avatar.Fallback delayMs={0}>W</Avatar.Fallback>\n    }\n};\n\nexport const SizeSm: Story = {\n    name: \"Small\",\n    args: {\n        ...Default.args,\n        size: \"sm\"\n    }\n};\nexport const SizeMd: Story = {\n    name: \"Medium\",\n    args: {\n        ...Default.args,\n        size: \"md\"\n    }\n};\n\nexport const SizeLg: Story = {\n    name: \"Large\",\n    args: {\n        ...Default.args,\n        size: \"lg\"\n    }\n};\n\nexport const SizeXl: Story = {\n    name: \"Extra Large\",\n    args: {\n        ...Default.args,\n        size: \"xl\"\n    }\n};\n\nexport const Text: Story = {\n    name: \"Fallback Text\",\n    args: {\n        fallback: <Avatar.Fallback>SH</Avatar.Fallback>\n    }\n};\nexport const Icon: Story = {\n    name: \"Icon\",\n    args: {\n        fallback: (\n            <Avatar.Fallback>\n                <StormIcon />\n            </Avatar.Fallback>\n        )\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        return (\n            <Avatar\n                {...args}\n                image={args.image || <Avatar.Image src=\"https://i.pravatar.cc/300\" alt=\"@webiny\" />}\n                fallback={args.fallback || <Avatar.Fallback delayMs={0}>W</Avatar.Fallback>}\n            />\n        );\n    },\n    args: {\n        size: \"md\",\n        variant: \"strong\",\n        image: undefined,\n        fallback: undefined,\n        className: \"commas, separated, class, name\"\n    },\n    argTypes: {\n        size: {\n            description: \"Controls the size of the avatar\",\n            control: \"select\",\n            options: [\"sm\", \"md\", \"lg\", \"xl\"],\n            defaultValue: \"md\"\n        },\n        variant: {\n            description: \"Controls the visual style of the avatar\",\n            control: \"select\",\n            options: [\"strong\", \"subtle\", \"light\", \"quiet\", \"outlined\"],\n            defaultValue: \"strong\"\n        },\n        image: {\n            description:\n                \"The image element to display. Please refer to the example code for details on usage.\"\n        },\n        fallback: {\n            description:\n                \"The fallback element to display when the image fails to load. Please refer to the example code for details on usage.\"\n        },\n        className: {\n            description:\n                \"Additional CSS class names. You can pass multiple class names, separated by commas.\",\n            placeholder: \"Enter class names, separated by commas.\",\n            control: \"text\"\n        }\n    }\n};\n"],"names":["meta","Avatar","Default","SizeSm","SizeMd","SizeLg","SizeXl","Text","Icon","StormIcon","Documentation","args","undefined"],"mappings":";;;AAKA,MAAMA,OAA4B;IAC9B,OAAO;IACP,WAAWC;IACX,UAAU;QACN,MAAM;YACF,SAAS;YACT,SAAS;gBAAC;gBAAM;gBAAM;gBAAM;aAAK;YACjC,cAAc;QAClB;QACA,SAAS;YACL,SAAS;YACT,SAAS;gBAAC;gBAAU;gBAAU;gBAAS;gBAAS;aAAW;YAC3D,cAAc;QAClB;IACJ;AACJ;AAEA,uBAAeD;AAIR,MAAME,UAAiB;IAC1B,MAAM;QACF,OAAO,WAAP,GAAO,sCAACD,OAAO,KAAK;YAAC,KAAI;YAA4B,KAAI;;QACzD,UAAU,WAAV,GAAU,sCAACA,OAAO,QAAQ;YAAC,SAAS;WAAG;IAC3C;AACJ;AAEO,MAAME,SAAgB;IACzB,MAAM;IACN,MAAM;QACF,GAAGD,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AACO,MAAME,SAAgB;IACzB,MAAM;IACN,MAAM;QACF,GAAGF,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMG,SAAgB;IACzB,MAAM;IACN,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMI,SAAgB;IACzB,MAAM;IACN,MAAM;QACF,GAAGJ,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMK,OAAc;IACvB,MAAM;IACN,MAAM;QACF,UAAU,WAAV,GAAU,sCAACN,OAAO,QAAQ,QAAC;IAC/B;AACJ;AACO,MAAMO,OAAc;IACvB,MAAM;IACN,MAAM;QACF,UAAU,WAAV,GACI,sCAACP,OAAO,QAAQ,sBACZ,sCAACQ,gBAASA;IAGtB;AACJ;AAEO,MAAMC,gBAAuB;IAChC,QAAQC,CAAAA,OACG,WAAP,GACI,sCAACV,QAAMA;YACF,GAAGU,IAAI;YACR,OAAOA,KAAK,KAAK,IAAI,WAAJ,GAAI,sCAACV,OAAO,KAAK;gBAAC,KAAI;gBAA4B,KAAI;;YACvE,UAAUU,KAAK,QAAQ,IAAI,WAAJ,GAAI,sCAACV,OAAO,QAAQ;gBAAC,SAAS;eAAG;;IAIpE,MAAM;QACF,MAAM;QACN,SAAS;QACT,OAAOW;QACP,UAAUA;QACV,WAAW;IACf;IACA,UAAU;QACN,MAAM;YACF,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAM;gBAAM;gBAAM;aAAK;YACjC,cAAc;QAClB;QACA,SAAS;YACL,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAU;gBAAU;gBAAS;gBAAS;aAAW;YAC3D,cAAc;QAClB;QACA,OAAO;YACH,aACI;QACR;QACA,UAAU;YACN,aACI;QACR;QACA,WAAW;YACP,aACI;YACJ,aAAa;YACb,SAAS;QACb;IACJ;AACJ"}
+{"version":3,"file":"Avatar/Avatar.stories.js","sources":["../../src/Avatar/Avatar.stories.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { ReactComponent as StormIcon } from \"@webiny/icons/storm.svg\";\nimport { Avatar } from \"./Avatar.js\";\n\nconst meta: Meta<typeof Avatar> = {\n    title: \"Components/Avatar\",\n    component: Avatar,\n    argTypes: {\n        size: {\n            control: \"select\",\n            options: [\"sm\", \"md\", \"lg\", \"xl\"],\n            defaultValue: \"md\"\n        },\n        variant: {\n            control: \"select\",\n            options: [\"strong\", \"subtle\", \"light\", \"quiet\", \"outlined\"],\n            defaultValue: \"strong\"\n        }\n    }\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Avatar>;\n\nexport const Default: Story = {\n    args: {\n        image: <Avatar.Image src=\"https://i.pravatar.cc/300\" alt=\"@webiny\" />,\n        fallback: <Avatar.Fallback delayMs={0}>W</Avatar.Fallback>\n    }\n};\n\nexport const SizeSm: Story = {\n    name: \"Small\",\n    args: {\n        ...Default.args,\n        size: \"sm\"\n    }\n};\nexport const SizeMd: Story = {\n    name: \"Medium\",\n    args: {\n        ...Default.args,\n        size: \"md\"\n    }\n};\n\nexport const SizeLg: Story = {\n    name: \"Large\",\n    args: {\n        ...Default.args,\n        size: \"lg\"\n    }\n};\n\nexport const SizeXl: Story = {\n    name: \"Extra Large\",\n    args: {\n        ...Default.args,\n        size: \"xl\"\n    }\n};\n\nexport const Text: Story = {\n    name: \"Fallback Text\",\n    args: {\n        fallback: <Avatar.Fallback>SH</Avatar.Fallback>\n    }\n};\nexport const Icon: Story = {\n    name: \"Icon\",\n    args: {\n        fallback: (\n            <Avatar.Fallback>\n                <StormIcon />\n            </Avatar.Fallback>\n        )\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        return (\n            <Avatar\n                {...args}\n                image={args.image || <Avatar.Image src=\"https://i.pravatar.cc/300\" alt=\"@webiny\" />}\n                fallback={args.fallback || <Avatar.Fallback delayMs={0}>W</Avatar.Fallback>}\n            />\n        );\n    },\n    args: {\n        size: \"md\",\n        variant: \"strong\",\n        image: undefined,\n        fallback: undefined,\n        className: \"commas, separated, class, name\"\n    },\n    argTypes: {\n        size: {\n            description: \"Controls the size of the avatar\",\n            control: \"select\",\n            options: [\"sm\", \"md\", \"lg\", \"xl\"],\n            defaultValue: \"md\"\n        },\n        variant: {\n            description: \"Controls the visual style of the avatar\",\n            control: \"select\",\n            options: [\"strong\", \"subtle\", \"light\", \"quiet\", \"outlined\"],\n            defaultValue: \"strong\"\n        },\n        image: {\n            description:\n                \"The image element to display. Please refer to the example code for details on usage.\"\n        },\n        fallback: {\n            description:\n                \"The fallback element to display when the image fails to load. Please refer to the example code for details on usage.\"\n        },\n        className: {\n            description:\n                \"Additional CSS class names. You can pass multiple class names, separated by commas.\",\n            placeholder: \"Enter class names, separated by commas.\",\n            control: \"text\"\n        }\n    }\n};\n"],"names":["meta","Avatar","Default","SizeSm","SizeMd","SizeLg","SizeXl","Text","Icon","StormIcon","Documentation","args","undefined"],"mappings":";;;AAKA,MAAMA,OAA4B;IAC9B,OAAO;IACP,WAAWC;IACX,UAAU;QACN,MAAM;YACF,SAAS;YACT,SAAS;gBAAC;gBAAM;gBAAM;gBAAM;aAAK;YACjC,cAAc;QAClB;QACA,SAAS;YACL,SAAS;YACT,SAAS;gBAAC;gBAAU;gBAAU;gBAAS;gBAAS;aAAW;YAC3D,cAAc;QAClB;IACJ;AACJ;AAEA,uBAAeD;AAIR,MAAME,UAAiB;IAC1B,MAAM;QACF,OAAO,WAAP,GAAO,sCAACD,OAAO,KAAK;YAAC,KAAI;YAA4B,KAAI;;QACzD,UAAU,WAAV,GAAU,sCAACA,OAAO,QAAQ;YAAC,SAAS;WAAG;IAC3C;AACJ;AAEO,MAAME,SAAgB;IACzB,MAAM;IACN,MAAM;QACF,GAAGD,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AACO,MAAME,SAAgB;IACzB,MAAM;IACN,MAAM;QACF,GAAGF,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMG,SAAgB;IACzB,MAAM;IACN,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMI,SAAgB;IACzB,MAAM;IACN,MAAM;QACF,GAAGJ,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMK,OAAc;IACvB,MAAM;IACN,MAAM;QACF,UAAU,WAAV,GAAU,sCAACN,OAAO,QAAQ,QAAC;IAC/B;AACJ;AACO,MAAMO,OAAc;IACvB,MAAM;IACN,MAAM;QACF,UAAU,WAAV,GACI,sCAACP,OAAO,QAAQ,sBACZ,sCAACQ,gBAASA;IAGtB;AACJ;AAEO,MAAMC,gBAAuB;IAChC,QAAQC,CAAAA,OACG,WAAP,GACI,sCAACV,QAAMA;YACF,GAAGU,IAAI;YACR,OAAOA,KAAK,KAAK,IAAI,WAAJ,GAAI,sCAACV,OAAO,KAAK;gBAAC,KAAI;gBAA4B,KAAI;;YACvE,UAAUU,KAAK,QAAQ,IAAI,WAAJ,GAAI,sCAACV,OAAO,QAAQ;gBAAC,SAAS;eAAG;;IAIpE,MAAM;QACF,MAAM;QACN,SAAS;QACT,OAAOW;QACP,UAAUA;QACV,WAAW;IACf;IACA,UAAU;QACN,MAAM;YACF,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAM;gBAAM;gBAAM;aAAK;YACjC,cAAc;QAClB;QACA,SAAS;YACL,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAU;gBAAU;gBAAS;gBAAS;aAAW;YAC3D,cAAc;QAClB;QACA,OAAO;YACH,aACI;QACR;QACA,UAAU;YACN,aACI;QACR;QACA,WAAW;YACP,aACI;YACJ,aAAa;YACb,SAAS;QACb;IACJ;AACJ"}

package/Button/Button.stories.d.ts

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

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":";;;;;;AAQA,MAAMA,OAA0B;IAC5B,OAAO;IACP,WAAWC;IACX,UAAU,CAAC;IACX,YAAY;QACRC,CAAAA,QAAAA,WAAAA,GACI,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;AACL;AAEA,qBAAeF;AAIR,MAAMG,UAAiB;IAC1B,MAAM;QACF,SAAS;QACT,OAAO;QACP,aAAa;QACb,MAAM,WAAN,GACI,0CAAE,wCACwB,oBAAC;YAAE,MAAM;WAAK,SAAQ;QAGpD,UAAU,WAAV,GACI,0CAAE;QAQN,SAAS,WAAT,GACI,wDACI,oBAACF,KAAK,YAAY,uBAClB,oBAACA,KAAK,aAAa;IAG/B;IACA,UAAU,CAAC;AACf;AAEO,MAAMG,YAAmB;IAC5B,MAAM;QACF,GAAGD,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAME,eAAsB;IAC/B,MAAM;QACF,GAAGF,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAMG,gBAAuB;IAChC,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAMI,eAAsB;IAC/B,MAAM;QACF,GAAGJ,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAMK,cAAqB;IAC9B,MAAM;QACF,GAAGL,QAAQ,IAAI;IACnB;AACJ;AACO,MAAMM,oBAA2B;IACpC,MAAM;QACF,GAAGN,QAAQ,IAAI;QACf,iBAAiB;IACrB;AACJ;AAEO,MAAMO,yBAAgC;IACzC,MAAM;QACF,GAAGP,QAAQ,IAAI;QACf,iBAAiB;QACjB,aAAa;IACjB;AACJ;AAEO,MAAMQ,mBAA0B;IACnC,MAAM;QACF,GAAGR,QAAQ,IAAI;QACf,YAAY;IAChB;AACJ;AAEO,MAAMS,gBAAuB;IAChC,MAAM;QACF,GAAGT,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAMU,qBAA4B;IACrC,MAAM;QACF,GAAGV,QAAQ,IAAI;QACf,UAAU,WAAV,GACI,wDACI,oBAACW,cAAYA;YAAC,uBAAS,oBAACC,QAAMA;gBAAC,SAAQ;gBAAU,MAAM;;yBACnD,oBAACD,aAAa,IAAI;YAAC,MAAM;0BACzB,oBAACA,aAAa,IAAI;YAAC,MAAM;0BACzB,oBAACA,aAAa,IAAI;YAAC,MAAM;;IAIzC;AACJ;AACO,MAAME,qBAA4B;IACrC,MAAM;QACF,GAAGb,QAAQ,IAAI;QACf,WAAW;IACf;AACJ;AAEO,MAAMc,sBAA6B;IACtC,MAAM;QACF,GAAGd,QAAQ,IAAI;QACf,WAAW;IACf;AACJ;AAEO,MAAMe,qBAA4B;IACrC,MAAM;QACF,GAAGf,QAAQ,IAAI;QACf,WAAW;IACf;AACJ;AAEO,MAAMgB,WAAkB;IAC3B,MAAM;QACF,GAAGhB,QAAQ,IAAI;QACf,MAAM,WAAN,GAAM,oBAACF,KAAK,IAAI;YAAC,oBAAM,oBAACmB,gBAAgBA;YAAK,OAAO;;IACxD;AACJ;AAEO,MAAMC,WAAkB;IAC3B,MAAM;QACF,GAAGlB,QAAQ,IAAI;QACf,aAAa;QACb,MAAM,WAAN,GAAM,oBAACF,KAAK,IAAI;YAAC,oBAAM,oBAACmB,gBAAgBA;YAAK,OAAO;;QACpD,UAAU,WAAV,GACI,wDACI,oBAACE,MAAIA;YACD,WAAW;YACX,WAAW;YACX,SAAS;YACT,MAAM;8BACF,oBAACA,KAAK,GAAG;oBACL,KAAK;oBACL,OAAO;oBACP,SAAS;oBACT,SAAS;;8BAEb,oBAACA,KAAK,GAAG;oBACL,KAAK;oBACL,OAAO;oBACP,SAAS;oBACT,SAAS;;8BAEb,oBAACA,KAAK,GAAG;oBACL,KAAK;oBACL,OAAO;oBACP,SAAS;oBACT,SAAS;;8BAEb,oBAACA,KAAK,GAAG;oBACL,KAAK;oBACL,OAAO;oBACP,SAAS;oBACT,SAAS;;aAEhB;;IAIjB;AACJ;AAEO,MAAMC,gBAAuB;IAChC,QAAQC,CAAAA,OACG,WAAP,GAAO,oBAACvB,MAASuB;IAErB,MAAM;QACF,OAAO;QACP,aAAa;QACb,UAAU,WAAV,GAAU,0CAAE;QACZ,SAAS,WAAT,GACI,wDACI,oBAACT,QAAMA;YAAC,SAAS;YAAa,MAAM;0BACpC,oBAACA,QAAMA;YAAC,SAAS;YAAW,MAAM;;QAG1C,SAAS;QACT,WAAW;IACf;IACA,UAAU;QACN,OAAO;YACH,aAAa;YACb,SAAS;QACb;QACA,aAAa;YACT,aAAa;YACb,SAAS;QACb;QACA,UAAU;YACN,aACI;QACR;QACA,SAAS;YACL,aACI;QACR;QACA,SAAS;YACL,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAQ;gBAAY;aAAc;QAChD;QACA,WAAW;YACP,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAQ;gBAAM;gBAAM;gBAAM;gBAAM;aAAK;QACnD;IACJ;AACJ"}
+{"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;