@webiny/admin-ui 0.0.0-unstable.eb196ccd2f → 0.0.0-unstable.eb81deee7e

package/Tag/Tag.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","ReactComponent","AddIcon","Tag","meta","title","component","parameters","layout","Default","args","content","WithOnClickCallback","onClick","evt","console","log","WithOnDismissCallback","onDismiss","WithCustomDismissIconElement","dismissIconElement","createElement","dismissIconLabel","NeutralBase","variant","NeutralBaseDisabled","disabled","NeutralBaseOutline","NeutralBaseOutlineDisabled","NeutralLight","NeutralLightDisabled","NeutralMuted","NeutralMutedDisabled","NeutralStrong","NeutralStrongDisabled","NeutralXStrong","NeutralXStrongDisabled","NeutralDark","NeutralDarkDisabled","Accent","AccentDisabled","AccentLight","AccentLightDisabled","Success","SuccessDisabled","SuccessLight","SuccessLightDisabled","Warning","WarningDisabled","Destructive","DestructiveDisabled","FullExample","render","className","Object","assign","Documentation","undefined","argTypes","description","control","options"],"sources":["Tag.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { Tag } from \"./Tag\";\n\nconst meta: Meta<typeof Tag> = {\n    title: \"Components/Tag\",\n    component: Tag,\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Tag>;\n\nexport const Default: Story = {\n    args: {\n        content: \"Label\"\n    }\n};\n\nexport const WithOnClickCallback: Story = {\n    args: {\n        ...Default.args,\n        onClick: evt => {\n            console.log(\"onClick\", evt);\n        }\n    }\n};\n\nexport const WithOnDismissCallback: Story = {\n    args: {\n        ...Default.args,\n        onDismiss: evt => {\n            console.log(\"onDismiss\", evt);\n        }\n    }\n};\n\nexport const WithCustomDismissIconElement: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        dismissIconElement: <AddIcon />,\n        dismissIconLabel: \"Custom dismiss label\"\n    }\n};\n\nexport const NeutralBase: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"neutral-base\"\n    }\n};\n\nexport const NeutralBaseDisabled: Story = {\n    args: {\n        ...NeutralBase.args,\n        disabled: true\n    }\n};\n\nexport const NeutralBaseOutline: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"neutral-base-outline\"\n    }\n};\n\nexport const NeutralBaseOutlineDisabled: Story = {\n    args: {\n        ...NeutralBaseOutline.args,\n        disabled: true\n    }\n};\n\nexport const NeutralLight: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"neutral-light\"\n    }\n};\n\nexport const NeutralLightDisabled: Story = {\n    args: {\n        ...NeutralLight.args,\n        disabled: true\n    }\n};\n\nexport const NeutralMuted: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"neutral-muted\"\n    }\n};\n\nexport const NeutralMutedDisabled: Story = {\n    args: {\n        ...NeutralMuted.args,\n        disabled: true\n    }\n};\n\nexport const NeutralStrong: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"neutral-strong\"\n    }\n};\n\nexport const NeutralStrongDisabled: Story = {\n    args: {\n        ...NeutralStrong.args,\n        disabled: true\n    }\n};\n\nexport const NeutralXStrong: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"neutral-xstrong\"\n    }\n};\n\nexport const NeutralXStrongDisabled: Story = {\n    args: {\n        ...NeutralXStrong.args,\n        disabled: true\n    }\n};\n\nexport const NeutralDark: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"neutral-dark\"\n    }\n};\n\nexport const NeutralDarkDisabled: Story = {\n    args: {\n        ...NeutralDark.args,\n        disabled: true\n    }\n};\n\nexport const Accent: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"accent\"\n    }\n};\n\nexport const AccentDisabled: Story = {\n    args: {\n        ...Accent.args,\n        disabled: true\n    }\n};\n\nexport const AccentLight: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"accent-light\"\n    }\n};\n\nexport const AccentLightDisabled: Story = {\n    args: {\n        ...AccentLight.args,\n        disabled: true\n    }\n};\n\nexport const Success: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"success\"\n    }\n};\n\nexport const SuccessDisabled: Story = {\n    args: {\n        ...Success.args,\n        disabled: true\n    }\n};\n\nexport const SuccessLight: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"success-light\"\n    }\n};\n\nexport const SuccessLightDisabled: Story = {\n    args: {\n        ...SuccessLight.args,\n        disabled: true\n    }\n};\n\nexport const Warning: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"warning\"\n    }\n};\n\nexport const WarningDisabled: Story = {\n    args: {\n        ...Warning.args,\n        disabled: true\n    }\n};\n\nexport const Destructive: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"destructive\"\n    }\n};\n\nexport const DestructiveDisabled: Story = {\n    args: {\n        ...Destructive.args,\n        disabled: true\n    }\n};\n\nexport const FullExample: Story = {\n    args: WithOnDismissCallback.args,\n    render: args => {\n        return (\n            <div className={\"wby-flex wby-gap-sm\"}>\n                <Tag {...args} content={\"Neutral base\"} variant={\"neutral-base\"} />\n                <Tag {...args} content={\"Neutral base outline\"} variant={\"neutral-base-outline\"} />\n                <Tag {...args} content={\"Neutral light\"} variant={\"neutral-light\"} />\n                <Tag {...args} content={\"Neutral muted\"} variant={\"neutral-muted\"} />\n                <Tag {...args} content={\"Neutral strong\"} variant={\"neutral-strong\"} />\n                <Tag {...args} content={\"Neutral xstrong\"} variant={\"neutral-xstrong\"} />\n                <Tag {...args} content={\"Neutral dark\"} variant={\"neutral-dark\"} />\n                <Tag {...args} content={\"Success\"} variant={\"success\"} />\n                <Tag {...args} content={\"Success light\"} variant={\"success-light\"} />\n                <Tag {...args} content={\"Warning\"} variant={\"warning\"} />\n                <Tag {...args} content={\"Destructive\"} variant={\"destructive\"} />\n                <Tag {...args} content={\"Accent\"} variant={\"accent\"} />\n                <Tag {...args} content={\"Accent light\"} variant={\"accent-light\"} />\n            </div>\n        );\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        content: \"Label\",\n        variant: \"neutral-base\",\n        disabled: false,\n        onDismiss: undefined,\n        dismissIconElement: undefined,\n        dismissIconLabel: undefined\n    },\n    argTypes: {\n        content: {\n            description: \"The content of the tag. Please refer to the example code for details.\",\n            control: \"text\"\n        },\n        variant: {\n            description: \"The color variant of the tag.\",\n            control: \"select\",\n            options: [\n                \"neutral-base\",\n                \"neutral-base-outline\",\n                \"neutral-light\",\n                \"neutral-muted\",\n                \"neutral-strong\",\n                \"neutral-xstrong\",\n                \"neutral-dark\",\n                \"success\",\n                \"success-light\",\n                \"warning\",\n                \"destructive\",\n                \"accent\",\n                \"accent-light\"\n            ]\n        },\n        disabled: {\n            description: \"Whether the tag is disabled.\",\n            control: \"boolean\"\n        },\n        onDismiss: {\n            description:\n                \"Callback function when the tag is dismissed. Please refer to the 'Dismissible Tag' example code for details.\",\n            control: \"none\"\n        },\n        dismissIconElement: {\n            description:\n                \"Custom dismiss icon element. Please refer to the 'Custom Dismiss Icon' example code for details.\",\n            control: \"none\"\n        },\n        dismissIconLabel: {\n            description:\n                \"Custom dismiss icon label. Please refer to the 'Custom Dismiss Icon' example code for details.\",\n            control: \"none\"\n        }\n    }\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Tag/Tag.stories.js","sources":["../../src/Tag/Tag.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { Tag } from \"./Tag.js\";\nimport { ReactComponent as InfoIcon } from \"@webiny/icons/info.svg\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\n\nconst meta: Meta<typeof Tag> = {\n    title: \"Components/Tag\",\n    component: Tag,\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Tag>;\n\nexport const Default: Story = {\n    args: {\n        content: \"Label\",\n        icon: <InfoIcon />\n    }\n};\n\nexport const WithOnClickCallback: Story = {\n    args: {\n        ...Default.args,\n        onClick: evt => {\n            console.log(\"onClick\", evt);\n        }\n    }\n};\n\nexport const WithOnDismissCallback: Story = {\n    args: {\n        ...Default.args,\n        onDismiss: evt => {\n            console.log(\"onDismiss\", evt);\n        }\n    }\n};\n\nexport const WithCustomDismissIconElement: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        dismissIconElement: <AddIcon />,\n        dismissIconLabel: \"Custom dismiss label\"\n    }\n};\n\nexport const NeutralBase: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"neutral-base\"\n    }\n};\n\nexport const NeutralBaseDisabled: Story = {\n    args: {\n        ...NeutralBase.args,\n        disabled: true\n    }\n};\n\nexport const NeutralBaseOutline: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"neutral-base-outline\"\n    }\n};\n\nexport const NeutralBaseOutlineDisabled: Story = {\n    args: {\n        ...NeutralBaseOutline.args,\n        disabled: true\n    }\n};\n\nexport const NeutralLight: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"neutral-light\"\n    }\n};\n\nexport const NeutralLightDisabled: Story = {\n    args: {\n        ...NeutralLight.args,\n        disabled: true\n    }\n};\n\nexport const NeutralMuted: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"neutral-muted\"\n    }\n};\n\nexport const NeutralMutedDisabled: Story = {\n    args: {\n        ...NeutralMuted.args,\n        disabled: true\n    }\n};\n\nexport const NeutralStrong: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"neutral-strong\"\n    }\n};\n\nexport const NeutralStrongDisabled: Story = {\n    args: {\n        ...NeutralStrong.args,\n        disabled: true\n    }\n};\n\nexport const NeutralXStrong: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"neutral-xstrong\"\n    }\n};\n\nexport const NeutralXStrongDisabled: Story = {\n    args: {\n        ...NeutralXStrong.args,\n        disabled: true\n    }\n};\n\nexport const NeutralDark: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"neutral-dark\"\n    }\n};\n\nexport const NeutralDarkDisabled: Story = {\n    args: {\n        ...NeutralDark.args,\n        disabled: true\n    }\n};\n\nexport const Accent: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"accent\"\n    }\n};\n\nexport const AccentDisabled: Story = {\n    args: {\n        ...Accent.args,\n        disabled: true\n    }\n};\n\nexport const AccentLight: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"accent-light\"\n    }\n};\n\nexport const AccentLightDisabled: Story = {\n    args: {\n        ...AccentLight.args,\n        disabled: true\n    }\n};\n\nexport const Success: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"success\"\n    }\n};\n\nexport const SuccessDisabled: Story = {\n    args: {\n        ...Success.args,\n        disabled: true\n    }\n};\n\nexport const SuccessLight: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"success-light\"\n    }\n};\n\nexport const SuccessLightDisabled: Story = {\n    args: {\n        ...SuccessLight.args,\n        disabled: true\n    }\n};\n\nexport const Warning: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"warning\"\n    }\n};\n\nexport const WarningDisabled: Story = {\n    args: {\n        ...Warning.args,\n        disabled: true\n    }\n};\n\nexport const Destructive: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"destructive\"\n    }\n};\n\nexport const DestructiveDisabled: Story = {\n    args: {\n        ...Destructive.args,\n        disabled: true\n    }\n};\n\nexport const FullExample: Story = {\n    args: WithOnDismissCallback.args,\n    render: args => {\n        return (\n            <div className={\"flex gap-sm\"}>\n                <Tag {...args} content={\"Neutral base\"} variant={\"neutral-base\"} />\n                <Tag {...args} content={\"Neutral base outline\"} variant={\"neutral-base-outline\"} />\n                <Tag {...args} content={\"Neutral light\"} variant={\"neutral-light\"} />\n                <Tag {...args} content={\"Neutral muted\"} variant={\"neutral-muted\"} />\n                <Tag {...args} content={\"Neutral strong\"} variant={\"neutral-strong\"} />\n                <Tag {...args} content={\"Neutral xstrong\"} variant={\"neutral-xstrong\"} />\n                <Tag {...args} content={\"Neutral dark\"} variant={\"neutral-dark\"} />\n                <Tag {...args} content={\"Success\"} variant={\"success\"} />\n                <Tag {...args} content={\"Success light\"} variant={\"success-light\"} />\n                <Tag {...args} content={\"Warning\"} variant={\"warning\"} />\n                <Tag {...args} content={\"Destructive\"} variant={\"destructive\"} />\n                <Tag {...args} content={\"Accent\"} variant={\"accent\"} />\n                <Tag {...args} content={\"Accent light\"} variant={\"accent-light\"} />\n            </div>\n        );\n    }\n};\n\nexport const WithSwatchColor: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"neutral-base-outline\",\n        content: <>An alert that can be closed and also has action button.</>,\n        swatchColor: \"#FF708F\"\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        content: \"Label\",\n        variant: \"neutral-base\",\n        disabled: false,\n        onDismiss: undefined,\n        dismissIconElement: undefined,\n        dismissIconLabel: undefined\n    },\n    argTypes: {\n        content: {\n            description: \"The content of the tag. Please refer to the example code for details.\",\n            control: \"text\"\n        },\n        variant: {\n            description: \"The color variant of the tag.\",\n            control: \"select\",\n            options: [\n                \"neutral-base\",\n                \"neutral-base-outline\",\n                \"neutral-light\",\n                \"neutral-muted\",\n                \"neutral-strong\",\n                \"neutral-xstrong\",\n                \"neutral-dark\",\n                \"success\",\n                \"success-light\",\n                \"warning\",\n                \"destructive\",\n                \"accent\",\n                \"accent-light\"\n            ]\n        },\n        disabled: {\n            description: \"Whether the tag is disabled.\",\n            control: \"boolean\"\n        },\n        onDismiss: {\n            description:\n                \"Callback function when the tag is dismissed. Please refer to the 'Dismissible Tag' example code for details.\"\n        },\n        dismissIconElement: {\n            description:\n                \"Custom dismiss icon element. Please refer to the 'Custom Dismiss Icon' example code for details.\"\n        },\n        dismissIconLabel: {\n            description:\n                \"Custom dismiss icon label. Please refer to the 'Custom Dismiss Icon' example code for details.\"\n        }\n    }\n};\n"],"names":["meta","Tag","Default","InfoIcon","WithOnClickCallback","evt","console","WithOnDismissCallback","WithCustomDismissIconElement","AddIcon","NeutralBase","NeutralBaseDisabled","NeutralBaseOutline","NeutralBaseOutlineDisabled","NeutralLight","NeutralLightDisabled","NeutralMuted","NeutralMutedDisabled","NeutralStrong","NeutralStrongDisabled","NeutralXStrong","NeutralXStrongDisabled","NeutralDark","NeutralDarkDisabled","Accent","AccentDisabled","AccentLight","AccentLightDisabled","Success","SuccessDisabled","SuccessLight","SuccessLightDisabled","Warning","WarningDisabled","Destructive","DestructiveDisabled","FullExample","args","WithSwatchColor","Documentation","undefined"],"mappings":";;;;AAMA,MAAMA,OAAyB;IAC3B,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;AACJ;AAEA,oBAAeD;AAGR,MAAME,UAAiB;IAC1B,MAAM;QACF,SAAS;QACT,MAAM,WAAN,GAAM,oBAACC,gBAAQA;IACnB;AACJ;AAEO,MAAMC,sBAA6B;IACtC,MAAM;QACF,GAAGF,QAAQ,IAAI;QACf,SAASG,CAAAA;YACLC,QAAQ,GAAG,CAAC,WAAWD;QAC3B;IACJ;AACJ;AAEO,MAAME,wBAA+B;IACxC,MAAM;QACF,GAAGL,QAAQ,IAAI;QACf,WAAWG,CAAAA;YACPC,QAAQ,GAAG,CAAC,aAAaD;QAC7B;IACJ;AACJ;AAEO,MAAMG,+BAAsC;IAC/C,MAAM;QACF,GAAGD,sBAAsB,IAAI;QAC7B,oBAAoB,WAApB,GAAoB,oBAACE,wBAAOA;QAC5B,kBAAkB;IACtB;AACJ;AAEO,MAAMC,cAAqB;IAC9B,MAAM;QACF,GAAGH,sBAAsB,IAAI;QAC7B,SAAS;IACb;AACJ;AAEO,MAAMI,sBAA6B;IACtC,MAAM;QACF,GAAGD,YAAY,IAAI;QACnB,UAAU;IACd;AACJ;AAEO,MAAME,qBAA4B;IACrC,MAAM;QACF,GAAGL,sBAAsB,IAAI;QAC7B,SAAS;IACb;AACJ;AAEO,MAAMM,6BAAoC;IAC7C,MAAM;QACF,GAAGD,mBAAmB,IAAI;QAC1B,UAAU;IACd;AACJ;AAEO,MAAME,eAAsB;IAC/B,MAAM;QACF,GAAGP,sBAAsB,IAAI;QAC7B,SAAS;IACb;AACJ;AAEO,MAAMQ,uBAA8B;IACvC,MAAM;QACF,GAAGD,aAAa,IAAI;QACpB,UAAU;IACd;AACJ;AAEO,MAAME,eAAsB;IAC/B,MAAM;QACF,GAAGT,sBAAsB,IAAI;QAC7B,SAAS;IACb;AACJ;AAEO,MAAMU,uBAA8B;IACvC,MAAM;QACF,GAAGD,aAAa,IAAI;QACpB,UAAU;IACd;AACJ;AAEO,MAAME,gBAAuB;IAChC,MAAM;QACF,GAAGX,sBAAsB,IAAI;QAC7B,SAAS;IACb;AACJ;AAEO,MAAMY,wBAA+B;IACxC,MAAM;QACF,GAAGD,cAAc,IAAI;QACrB,UAAU;IACd;AACJ;AAEO,MAAME,iBAAwB;IACjC,MAAM;QACF,GAAGb,sBAAsB,IAAI;QAC7B,SAAS;IACb;AACJ;AAEO,MAAMc,yBAAgC;IACzC,MAAM;QACF,GAAGD,eAAe,IAAI;QACtB,UAAU;IACd;AACJ;AAEO,MAAME,cAAqB;IAC9B,MAAM;QACF,GAAGf,sBAAsB,IAAI;QAC7B,SAAS;IACb;AACJ;AAEO,MAAMgB,sBAA6B;IACtC,MAAM;QACF,GAAGD,YAAY,IAAI;QACnB,UAAU;IACd;AACJ;AAEO,MAAME,SAAgB;IACzB,MAAM;QACF,GAAGjB,sBAAsB,IAAI;QAC7B,SAAS;IACb;AACJ;AAEO,MAAMkB,iBAAwB;IACjC,MAAM;QACF,GAAGD,OAAO,IAAI;QACd,UAAU;IACd;AACJ;AAEO,MAAME,cAAqB;IAC9B,MAAM;QACF,GAAGnB,sBAAsB,IAAI;QAC7B,SAAS;IACb;AACJ;AAEO,MAAMoB,sBAA6B;IACtC,MAAM;QACF,GAAGD,YAAY,IAAI;QACnB,UAAU;IACd;AACJ;AAEO,MAAME,UAAiB;IAC1B,MAAM;QACF,GAAGrB,sBAAsB,IAAI;QAC7B,SAAS;IACb;AACJ;AAEO,MAAMsB,kBAAyB;IAClC,MAAM;QACF,GAAGD,QAAQ,IAAI;QACf,UAAU;IACd;AACJ;AAEO,MAAME,eAAsB;IAC/B,MAAM;QACF,GAAGvB,sBAAsB,IAAI;QAC7B,SAAS;IACb;AACJ;AAEO,MAAMwB,uBAA8B;IACvC,MAAM;QACF,GAAGD,aAAa,IAAI;QACpB,UAAU;IACd;AACJ;AAEO,MAAME,UAAiB;IAC1B,MAAM;QACF,GAAGzB,sBAAsB,IAAI;QAC7B,SAAS;IACb;AACJ;AAEO,MAAM0B,kBAAyB;IAClC,MAAM;QACF,GAAGD,QAAQ,IAAI;QACf,UAAU;IACd;AACJ;AAEO,MAAME,cAAqB;IAC9B,MAAM;QACF,GAAG3B,sBAAsB,IAAI;QAC7B,SAAS;IACb;AACJ;AAEO,MAAM4B,sBAA6B;IACtC,MAAM;QACF,GAAGD,YAAY,IAAI;QACnB,UAAU;IACd;AACJ;AAEO,MAAME,cAAqB;IAC9B,MAAM7B,sBAAsB,IAAI;IAChC,QAAQ8B,CAAAA,OACG,WAAP,GACI,oBAAC;YAAI,WAAW;yBACZ,oBAACpC,KAAGA;YAAE,GAAGoC,IAAI;YAAE,SAAS;YAAgB,SAAS;0BACjD,oBAACpC,KAAGA;YAAE,GAAGoC,IAAI;YAAE,SAAS;YAAwB,SAAS;0BACzD,oBAACpC,KAAGA;YAAE,GAAGoC,IAAI;YAAE,SAAS;YAAiB,SAAS;0BAClD,oBAACpC,KAAGA;YAAE,GAAGoC,IAAI;YAAE,SAAS;YAAiB,SAAS;0BAClD,oBAACpC,KAAGA;YAAE,GAAGoC,IAAI;YAAE,SAAS;YAAkB,SAAS;0BACnD,oBAACpC,KAAGA;YAAE,GAAGoC,IAAI;YAAE,SAAS;YAAmB,SAAS;0BACpD,oBAACpC,KAAGA;YAAE,GAAGoC,IAAI;YAAE,SAAS;YAAgB,SAAS;0BACjD,oBAACpC,KAAGA;YAAE,GAAGoC,IAAI;YAAE,SAAS;YAAW,SAAS;0BAC5C,oBAACpC,KAAGA;YAAE,GAAGoC,IAAI;YAAE,SAAS;YAAiB,SAAS;0BAClD,oBAACpC,KAAGA;YAAE,GAAGoC,IAAI;YAAE,SAAS;YAAW,SAAS;0BAC5C,oBAACpC,KAAGA;YAAE,GAAGoC,IAAI;YAAE,SAAS;YAAe,SAAS;0BAChD,oBAACpC,KAAGA;YAAE,GAAGoC,IAAI;YAAE,SAAS;YAAU,SAAS;0BAC3C,oBAACpC,KAAGA;YAAE,GAAGoC,IAAI;YAAE,SAAS;YAAgB,SAAS;;AAIjE;AAEO,MAAMC,kBAAyB;IAClC,MAAM;QACF,GAAG/B,sBAAsB,IAAI;QAC7B,SAAS;QACT,SAAS,WAAT,GAAS,0CAAE;QACX,aAAa;IACjB;AACJ;AAEO,MAAMgC,gBAAuB;IAChC,MAAM;QACF,SAAS;QACT,SAAS;QACT,UAAU;QACV,WAAWC;QACX,oBAAoBA;QACpB,kBAAkBA;IACtB;IACA,UAAU;QACN,SAAS;YACL,aAAa;YACb,SAAS;QACb;QACA,SAAS;YACL,aAAa;YACb,SAAS;YACT,SAAS;gBACL;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;aACH;QACL;QACA,UAAU;YACN,aAAa;YACb,SAAS;QACb;QACA,WAAW;YACP,aACI;QACR;QACA,oBAAoB;YAChB,aACI;QACR;QACA,kBAAkB;YACd,aACI;QACR;IACJ;AACJ"}

package/Tag/TagIcon.d.ts

@@ -0,0 +1,2 @@
+import * as React from "react";
+export declare const TagIcon: () => React.JSX.Element | null;

package/Tag/TagIcon.js

@@ -0,0 +1,82 @@
+import { cva } from "../utils.js";
+import { useTagProps } from "./TagPropsProvider.js";
+import { Icon } from "../Icon/Icon.js";
+import * as __rspack_external_react from "react";
+const tagIconVariants = cva("mr-xxs", {
+    variants: {
+        variant: {
+            "neutral-base": "fill-neutral-primary",
+            "neutral-base-outline": "fill-neutral-primary",
+            "neutral-light": "fill-neutral-primary",
+            "neutral-muted": "fill-neutral-primary",
+            "neutral-strong": "fill-neutral-light",
+            "neutral-xstrong": "fill-neutral-light",
+            "neutral-dark": "fill-neutral-light",
+            accent: "fill-neutral-light",
+            "accent-light": "fill-neutral-primary",
+            success: "fill-neutral-light",
+            "success-light": "fill-neutral-primary",
+            warning: "fill-neutral-primary",
+            destructive: "fill-neutral-light"
+        },
+        disabled: {
+            true: ""
+        }
+    },
+    compoundVariants: [
+        {
+            variant: "neutral-base",
+            disabled: true,
+            className: "fill-neutral-disabled"
+        },
+        {
+            variant: "neutral-base-outline",
+            disabled: true,
+            className: "fill-neutral-disabled"
+        },
+        {
+            variant: "neutral-light",
+            disabled: true,
+            className: "fill-neutral-disabled"
+        },
+        {
+            variant: "neutral-muted",
+            disabled: true,
+            className: "fill-neutral-disabled"
+        },
+        {
+            variant: "accent-light",
+            disabled: true,
+            className: "fill-neutral-muted"
+        },
+        {
+            variant: "success-light",
+            disabled: true,
+            className: "fill-neutral-muted"
+        },
+        {
+            variant: "warning",
+            disabled: true,
+            className: "fill-neutral-disabled"
+        }
+    ],
+    defaultVariants: {
+        variant: "neutral-base"
+    }
+});
+const TagIcon = ()=>{
+    const { icon, variant, disabled } = useTagProps();
+    if (!icon) return null;
+    return /*#__PURE__*/ __rspack_external_react.createElement(Icon, {
+        label: "Tag icon",
+        icon: icon,
+        size: "xs",
+        className: tagIconVariants({
+            variant,
+            disabled
+        })
+    });
+};
+export { TagIcon };
+
+//# sourceMappingURL=TagIcon.js.map

package/Tag/TagIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag/TagIcon.js","sources":["../../src/Tag/TagIcon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cva } from \"~/utils.js\";\nimport { useTagProps } from \"./TagPropsProvider.js\";\nimport { Icon } from \"~/Icon/Icon.js\";\n\nconst tagIconVariants = cva(\"mr-xxs\", {\n    variants: {\n        variant: {\n            \"neutral-base\": \"fill-neutral-primary\",\n            \"neutral-base-outline\": \"fill-neutral-primary\",\n            \"neutral-light\": \"fill-neutral-primary\",\n            \"neutral-muted\": \"fill-neutral-primary\",\n            \"neutral-strong\": \"fill-neutral-light\",\n            \"neutral-xstrong\": \"fill-neutral-light\",\n            \"neutral-dark\": \"fill-neutral-light\",\n            accent: \"fill-neutral-light\",\n            \"accent-light\": \"fill-neutral-primary\",\n            success: \"fill-neutral-light\",\n            \"success-light\": \"fill-neutral-primary\",\n            warning: \"fill-neutral-primary\",\n            destructive: \"fill-neutral-light\"\n        },\n        disabled: {\n            true: \"\"\n        }\n    },\n    compoundVariants: [\n        { variant: \"neutral-base\", disabled: true, className: \"fill-neutral-disabled\" },\n        { variant: \"neutral-base-outline\", disabled: true, className: \"fill-neutral-disabled\" },\n        { variant: \"neutral-light\", disabled: true, className: \"fill-neutral-disabled\" },\n        { variant: \"neutral-muted\", disabled: true, className: \"fill-neutral-disabled\" },\n        { variant: \"accent-light\", disabled: true, className: \"fill-neutral-muted\" },\n        { variant: \"success-light\", disabled: true, className: \"fill-neutral-muted\" },\n        { variant: \"warning\", disabled: true, className: \"fill-neutral-disabled\" }\n    ],\n    defaultVariants: {\n        variant: \"neutral-base\"\n    }\n});\n\nexport const TagIcon = () => {\n    const { icon, variant, disabled } = useTagProps();\n    if (!icon) {\n        return null;\n    }\n\n    return (\n        <Icon\n            label={\"Tag icon\"}\n            icon={icon}\n            size=\"xs\"\n            className={tagIconVariants({ variant, disabled })}\n        />\n    );\n};\n"],"names":["tagIconVariants","cva","TagIcon","icon","variant","disabled","useTagProps","Icon"],"mappings":";;;;AAKA,MAAMA,kBAAkBC,IAAI,UAAU;IAClC,UAAU;QACN,SAAS;YACL,gBAAgB;YAChB,wBAAwB;YACxB,iBAAiB;YACjB,iBAAiB;YACjB,kBAAkB;YAClB,mBAAmB;YACnB,gBAAgB;YAChB,QAAQ;YACR,gBAAgB;YAChB,SAAS;YACT,iBAAiB;YACjB,SAAS;YACT,aAAa;QACjB;QACA,UAAU;YACN,MAAM;QACV;IACJ;IACA,kBAAkB;QACd;YAAE,SAAS;YAAgB,UAAU;YAAM,WAAW;QAAwB;QAC9E;YAAE,SAAS;YAAwB,UAAU;YAAM,WAAW;QAAwB;QACtF;YAAE,SAAS;YAAiB,UAAU;YAAM,WAAW;QAAwB;QAC/E;YAAE,SAAS;YAAiB,UAAU;YAAM,WAAW;QAAwB;QAC/E;YAAE,SAAS;YAAgB,UAAU;YAAM,WAAW;QAAqB;QAC3E;YAAE,SAAS;YAAiB,UAAU;YAAM,WAAW;QAAqB;QAC5E;YAAE,SAAS;YAAW,UAAU;YAAM,WAAW;QAAwB;KAC5E;IACD,iBAAiB;QACb,SAAS;IACb;AACJ;AAEO,MAAMC,UAAU;IACnB,MAAM,EAAEC,IAAI,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GAAGC;IACpC,IAAI,CAACH,MACD,OAAO;IAGX,OAAO,WAAP,GACI,sCAACI,MAAIA;QACD,OAAO;QACP,MAAMJ;QACN,MAAK;QACL,WAAWH,gBAAgB;YAAEI;YAASC;QAAS;;AAG3D"}

package/Tag/TagPropsProvider.d.ts

@@ -0,0 +1,6 @@
+import { type TagProps } from "./Tag.js";
+declare const TagPropsProvider: import("react").FunctionComponent<{
+    props: TagProps;
+    children: React.ReactNode;
+}>, useTagProps: () => TagProps;
+export { TagPropsProvider, useTagProps };

package/Tag/TagPropsProvider.js

@@ -0,0 +1,5 @@
+import { createComponentPropsProvider } from "../utils.js";
+const [TagPropsProvider, useTagProps] = createComponentPropsProvider();
+export { TagPropsProvider, useTagProps };
+
+//# sourceMappingURL=TagPropsProvider.js.map

package/Tag/TagPropsProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag/TagPropsProvider.js","sources":["../../src/Tag/TagPropsProvider.ts"],"sourcesContent":["import { createComponentPropsProvider } from \"~/utils.js\";\nimport { type TagProps } from \"./Tag.js\";\n\nconst [TagPropsProvider, useTagProps] = createComponentPropsProvider<TagProps>();\n\nexport { TagPropsProvider, useTagProps };\n"],"names":["TagPropsProvider","useTagProps","createComponentPropsProvider"],"mappings":";AAGA,MAAM,CAACA,kBAAkBC,YAAY,GAAGC"}

package/Tag/TagSwatchBox.d.ts

@@ -0,0 +1,2 @@
+import * as React from "react";
+export declare const TagSwatchBox: () => React.JSX.Element | null;

package/Tag/TagSwatchBox.js

@@ -0,0 +1,17 @@
+import { useTagProps } from "./TagPropsProvider.js";
+import * as __rspack_external_react from "react";
+const TagSwatchBox = ()=>{
+    const { swatchColor, swatchColorIcon } = useTagProps();
+    if (!swatchColor || false === swatchColorIcon) return null;
+    return /*#__PURE__*/ __rspack_external_react.createElement("div", {
+        className: "mr-xs"
+    }, /*#__PURE__*/ __rspack_external_react.createElement("div", {
+        className: "size-sm rounded-xs",
+        style: {
+            backgroundColor: swatchColor
+        }
+    }));
+};
+export { TagSwatchBox };
+
+//# sourceMappingURL=TagSwatchBox.js.map

package/Tag/TagSwatchBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag/TagSwatchBox.js","sources":["../../src/Tag/TagSwatchBox.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useTagProps } from \"./TagPropsProvider.js\";\n\nexport const TagSwatchBox = () => {\n    const { swatchColor, swatchColorIcon } = useTagProps();\n\n    if (!swatchColor || swatchColorIcon === false) {\n        return null;\n    }\n\n    return (\n        <div className={\"mr-xs\"}>\n            <div className={\"size-sm rounded-xs\"} style={{ backgroundColor: swatchColor }} />\n        </div>\n    );\n};\n"],"names":["TagSwatchBox","swatchColor","swatchColorIcon","useTagProps"],"mappings":";;AAGO,MAAMA,eAAe;IACxB,MAAM,EAAEC,WAAW,EAAEC,eAAe,EAAE,GAAGC;IAEzC,IAAI,CAACF,eAAeC,AAAoB,UAApBA,iBAChB,OAAO;IAGX,OAAO,WAAP,GACI,sCAAC;QAAI,WAAW;qBACZ,sCAAC;QAAI,WAAW;QAAsB,OAAO;YAAE,iBAAiBD;QAAY;;AAGxF"}

package/Tag/index.d.ts

@@ -1 +1 @@
-export * from "./Tag";
+export * from "./Tag.js";

package/Tag/index.js

@@ -1,3 +1 @@
-export * from "./Tag";
-
-//# sourceMappingURL=index.js.map
+export * from "./Tag.js";

package/Tags/Tags.d.ts

@@ -1,22 +1,23 @@
 import React from "react";
-import { type TagsPrimitiveProps } from "./primitives";
-import { type FormComponentProps } from "../FormComponent";
+import { type TagsPrimitiveProps } from "./primitives/index.js";
+import { type FormComponentProps } from "../FormComponent/index.js";
 type TagsProps = TagsPrimitiveProps & FormComponentProps;
-declare const Tags: (({ label, description, note, required, disabled, validation, validate, onBlur: originalOnBlur, ...props }: TagsProps) => React.JSX.Element) & {
-    original: ({ label, description, note, required, disabled, validation, validate, onBlur: originalOnBlur, ...props }: TagsProps) => React.JSX.Element;
+declare const DecoratableTags: ({ label, description, note, hint, required, disabled, validation, validate, onBlur: originalOnBlur, ...props }: TagsProps) => React.JSX.Element;
+declare const Tags: typeof DecoratableTags & {
+    original: typeof DecoratableTags;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ label, description, note, required, disabled, validation, validate, onBlur: originalOnBlur, ...props }: TagsProps) => React.JSX.Element) & {
-        original: ({ label, description, note, required, disabled, validation, validate, onBlur: originalOnBlur, ...props }: TagsProps) => React.JSX.Element;
+    original: typeof DecoratableTags & {
+        original: typeof DecoratableTags;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ label, description, note, required, disabled, validation, validate, onBlur: originalOnBlur, ...props }: TagsProps) => React.JSX.Element) & {
-        original: ({ label, description, note, required, disabled, validation, validate, onBlur: originalOnBlur, ...props }: TagsProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof DecoratableTags & {
+        original: typeof DecoratableTags;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/Tags/Tags.js

@@ -1,57 +1,51 @@
-import React, { useCallback, useMemo } from "react";
-import { makeDecoratable, generateId } from "../utils";
-import { TagsPrimitive } from "./primitives";
-import { FormComponentDescription, FormComponentErrorMessage, FormComponentLabel, FormComponentNote } from "../FormComponent";
-const DecoratableTags = ({
-  label,
-  description,
-  note,
-  required,
-  disabled,
-  validation,
-  validate,
-  onBlur: originalOnBlur,
-  ...props
-}) => {
-  const {
-    isValid: validationIsValid,
-    message: validationMessage
-  } = validation || {};
-  const id = useMemo(() => generateId(props.id), [props.id]);
-  const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);
-  const onBlur = useCallback(async e => {
-    if (validate) {
-      // Since we are accessing event in an async operation, we need to persist it.
-      // See https://reactjs.org/docs/events.html#event-pooling.
-      e.persist();
-      await validate();
-    }
-    originalOnBlur && originalOnBlur(e);
-  }, [validate, originalOnBlur]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: "wby-w-full"
-  }, /*#__PURE__*/React.createElement(FormComponentLabel, {
-    htmlFor: id,
-    text: label,
-    required: required,
-    disabled: disabled,
-    invalid: invalid
-  }), /*#__PURE__*/React.createElement(FormComponentDescription, {
-    text: description,
-    disabled: disabled
-  }), /*#__PURE__*/React.createElement(TagsPrimitive, Object.assign({}, props, {
-    id: id,
-    disabled: disabled,
-    invalid: invalid,
-    onBlur: onBlur
-  })), /*#__PURE__*/React.createElement(FormComponentErrorMessage, {
-    text: validationMessage,
-    invalid: invalid,
-    disabled: disabled
-  }), /*#__PURE__*/React.createElement(FormComponentNote, {
-    text: note,
-    disabled: disabled
-  }));
+import react, { useCallback, useMemo } from "react";
+import { generateId, makeDecoratable } from "../utils.js";
+import { TagsPrimitive } from "./primitives/index.js";
+import { FormComponentDescription, FormComponentErrorMessage, FormComponentLabel, FormComponentNote } from "../FormComponent/index.js";
+const DecoratableTags = ({ label, description, note, hint, required, disabled, validation, validate, onBlur: originalOnBlur, ...props })=>{
+    const { isValid: validationIsValid, message: validationMessage } = validation || {};
+    const id = useMemo(()=>generateId(props.id), [
+        props.id
+    ]);
+    const invalid = useMemo(()=>false === validationIsValid, [
+        validationIsValid
+    ]);
+    const onBlur = useCallback(async (e)=>{
+        if (validate) {
+            e.persist();
+            await validate();
+        }
+        originalOnBlur && originalOnBlur(e);
+    }, [
+        validate,
+        originalOnBlur
+    ]);
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "w-full"
+    }, /*#__PURE__*/ react.createElement(FormComponentLabel, {
+        htmlFor: id,
+        text: label,
+        hint: hint,
+        required: required,
+        disabled: disabled,
+        invalid: invalid
+    }), /*#__PURE__*/ react.createElement(FormComponentDescription, {
+        text: description,
+        disabled: disabled
+    }), /*#__PURE__*/ react.createElement(TagsPrimitive, {
+        ...props,
+        id: id,
+        disabled: disabled,
+        invalid: invalid,
+        onBlur: onBlur
+    }), /*#__PURE__*/ react.createElement(FormComponentErrorMessage, {
+        text: validationMessage,
+        invalid: invalid,
+        disabled: disabled
+    }), /*#__PURE__*/ react.createElement(FormComponentNote, {
+        text: note,
+        disabled: disabled
+    }));
 };
 const Tags = makeDecoratable("Tags", DecoratableTags);
 export { Tags };

package/Tags/Tags.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useMemo","makeDecoratable","generateId","TagsPrimitive","FormComponentDescription","FormComponentErrorMessage","FormComponentLabel","FormComponentNote","DecoratableTags","label","description","note","required","disabled","validation","validate","onBlur","originalOnBlur","props","isValid","validationIsValid","message","validationMessage","id","invalid","e","persist","createElement","className","htmlFor","text","Object","assign","Tags"],"sources":["Tags.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport { makeDecoratable, generateId } from \"~/utils\";\nimport { TagsPrimitive, type TagsPrimitiveProps } from \"./primitives\";\n\nimport {\n    FormComponentDescription,\n    FormComponentErrorMessage,\n    FormComponentLabel,\n    FormComponentNote,\n    type FormComponentProps\n} from \"~/FormComponent\";\n\ntype TagsProps = TagsPrimitiveProps & FormComponentProps;\n\nconst DecoratableTags = ({\n    label,\n    description,\n    note,\n    required,\n    disabled,\n    validation,\n    validate,\n    onBlur: originalOnBlur,\n    ...props\n}: TagsProps) => {\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n    const id = useMemo(() => generateId(props.id), [props.id]);\n    const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);\n\n    const onBlur = useCallback(\n        async (e: React.FocusEvent<HTMLInputElement>) => {\n            if (validate) {\n                // Since we are accessing event in an async operation, we need to persist it.\n                // See https://reactjs.org/docs/events.html#event-pooling.\n                e.persist();\n                await validate();\n            }\n            originalOnBlur && originalOnBlur(e);\n        },\n        [validate, originalOnBlur]\n    );\n\n    return (\n        <div className={\"wby-w-full\"}>\n            <FormComponentLabel\n                htmlFor={id}\n                text={label}\n                required={required}\n                disabled={disabled}\n                invalid={invalid}\n            />\n            <FormComponentDescription text={description} disabled={disabled} />\n            <TagsPrimitive\n                {...props}\n                id={id}\n                disabled={disabled}\n                invalid={invalid}\n                onBlur={onBlur}\n            />\n            <FormComponentErrorMessage\n                text={validationMessage}\n                invalid={invalid}\n                disabled={disabled}\n            />\n            <FormComponentNote text={note} disabled={disabled} />\n        </div>\n    );\n};\n\nconst Tags = makeDecoratable(\"Tags\", DecoratableTags);\n\nexport { Tags, type TagsProps };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AACnD,SAASC,eAAe,EAAEC,UAAU;AACpC,SAASC,aAAa;AAEtB,SACIC,wBAAwB,EACxBC,yBAAyB,EACzBC,kBAAkB,EAClBC,iBAAiB;AAMrB,MAAMC,eAAe,GAAGA,CAAC;EACrBC,KAAK;EACLC,WAAW;EACXC,IAAI;EACJC,QAAQ;EACRC,QAAQ;EACRC,UAAU;EACVC,QAAQ;EACRC,MAAM,EAAEC,cAAc;EACtB,GAAGC;AACI,CAAC,KAAK;EACb,MAAM;IAAEC,OAAO,EAAEC,iBAAiB;IAAEC,OAAO,EAAEC;EAAkB,CAAC,GAAGR,UAAU,IAAI,CAAC,CAAC;EACnF,MAAMS,EAAE,GAAGvB,OAAO,CAAC,MAAME,UAAU,CAACgB,KAAK,CAACK,EAAE,CAAC,EAAE,CAACL,KAAK,CAACK,EAAE,CAAC,CAAC;EAC1D,MAAMC,OAAO,GAAGxB,OAAO,CAAC,MAAMoB,iBAAiB,KAAK,KAAK,EAAE,CAACA,iBAAiB,CAAC,CAAC;EAE/E,MAAMJ,MAAM,GAAGjB,WAAW,CACtB,MAAO0B,CAAqC,IAAK;IAC7C,IAAIV,QAAQ,EAAE;MACV;MACA;MACAU,CAAC,CAACC,OAAO,CAAC,CAAC;MACX,MAAMX,QAAQ,CAAC,CAAC;IACpB;IACAE,cAAc,IAAIA,cAAc,CAACQ,CAAC,CAAC;EACvC,CAAC,EACD,CAACV,QAAQ,EAAEE,cAAc,CAC7B,CAAC;EAED,oBACInB,KAAA,CAAA6B,aAAA;IAAKC,SAAS,EAAE;EAAa,gBACzB9B,KAAA,CAAA6B,aAAA,CAACrB,kBAAkB;IACfuB,OAAO,EAAEN,EAAG;IACZO,IAAI,EAAErB,KAAM;IACZG,QAAQ,EAAEA,QAAS;IACnBC,QAAQ,EAAEA,QAAS;IACnBW,OAAO,EAAEA;EAAQ,CACpB,CAAC,eACF1B,KAAA,CAAA6B,aAAA,CAACvB,wBAAwB;IAAC0B,IAAI,EAAEpB,WAAY;IAACG,QAAQ,EAAEA;EAAS,CAAE,CAAC,eACnEf,KAAA,CAAA6B,aAAA,CAACxB,aAAa,EAAA4B,MAAA,CAAAC,MAAA,KACNd,KAAK;IACTK,EAAE,EAAEA,EAAG;IACPV,QAAQ,EAAEA,QAAS;IACnBW,OAAO,EAAEA,OAAQ;IACjBR,MAAM,EAAEA;EAAO,EAClB,CAAC,eACFlB,KAAA,CAAA6B,aAAA,CAACtB,yBAAyB;IACtByB,IAAI,EAAER,iBAAkB;IACxBE,OAAO,EAAEA,OAAQ;IACjBX,QAAQ,EAAEA;EAAS,CACtB,CAAC,eACFf,KAAA,CAAA6B,aAAA,CAACpB,iBAAiB;IAACuB,IAAI,EAAEnB,IAAK;IAACE,QAAQ,EAAEA;EAAS,CAAE,CACnD,CAAC;AAEd,CAAC;AAED,MAAMoB,IAAI,GAAGhC,eAAe,CAAC,MAAM,EAAEO,eAAe,CAAC;AAErD,SAASyB,IAAI","ignoreList":[]}
+{"version":3,"file":"Tags/Tags.js","sources":["../../src/Tags/Tags.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport { makeDecoratable, generateId } from \"~/utils.js\";\nimport { TagsPrimitive, type TagsPrimitiveProps } from \"./primitives/index.js\";\n\nimport {\n    FormComponentDescription,\n    FormComponentErrorMessage,\n    FormComponentLabel,\n    FormComponentNote,\n    type FormComponentProps\n} from \"~/FormComponent/index.js\";\n\ntype TagsProps = TagsPrimitiveProps & FormComponentProps;\n\nconst DecoratableTags = ({\n    label,\n    description,\n    note,\n    hint,\n    required,\n    disabled,\n    validation,\n    validate,\n    onBlur: originalOnBlur,\n    ...props\n}: TagsProps) => {\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n    const id = useMemo(() => generateId(props.id), [props.id]);\n    const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);\n\n    const onBlur = useCallback(\n        async (e: React.FocusEvent<HTMLInputElement>) => {\n            if (validate) {\n                // Since we are accessing event in an async operation, we need to persist it.\n                // See https://reactjs.org/docs/events.html#event-pooling.\n                e.persist();\n                await validate();\n            }\n            originalOnBlur && originalOnBlur(e);\n        },\n        [validate, originalOnBlur]\n    );\n\n    return (\n        <div className={\"w-full\"}>\n            <FormComponentLabel\n                htmlFor={id}\n                text={label}\n                hint={hint}\n                required={required}\n                disabled={disabled}\n                invalid={invalid}\n            />\n            <FormComponentDescription text={description} disabled={disabled} />\n            <TagsPrimitive\n                {...props}\n                id={id}\n                disabled={disabled}\n                invalid={invalid}\n                onBlur={onBlur}\n            />\n            <FormComponentErrorMessage\n                text={validationMessage}\n                invalid={invalid}\n                disabled={disabled}\n            />\n            <FormComponentNote text={note} disabled={disabled} />\n        </div>\n    );\n};\n\nconst Tags = makeDecoratable(\"Tags\", DecoratableTags);\n\nexport { Tags, type TagsProps };\n"],"names":["DecoratableTags","label","description","note","hint","required","disabled","validation","validate","originalOnBlur","props","validationIsValid","validationMessage","id","useMemo","generateId","invalid","onBlur","useCallback","e","FormComponentLabel","FormComponentDescription","TagsPrimitive","FormComponentErrorMessage","FormComponentNote","Tags","makeDecoratable"],"mappings":";;;;AAcA,MAAMA,kBAAkB,CAAC,EACrBC,KAAK,EACLC,WAAW,EACXC,IAAI,EACJC,IAAI,EACJC,QAAQ,EACRC,QAAQ,EACRC,UAAU,EACVC,QAAQ,EACR,QAAQC,cAAc,EACtB,GAAGC,OACK;IACR,MAAM,EAAE,SAASC,iBAAiB,EAAE,SAASC,iBAAiB,EAAE,GAAGL,cAAc,CAAC;IAClF,MAAMM,KAAKC,QAAQ,IAAMC,WAAWL,MAAM,EAAE,GAAG;QAACA,MAAM,EAAE;KAAC;IACzD,MAAMM,UAAUF,QAAQ,IAAMH,AAAsB,UAAtBA,mBAA6B;QAACA;KAAkB;IAE9E,MAAMM,SAASC,YACX,OAAOC;QACH,IAAIX,UAAU;YAGVW,EAAE,OAAO;YACT,MAAMX;QACV;QACAC,kBAAkBA,eAAeU;IACrC,GACA;QAACX;QAAUC;KAAe;IAG9B,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACW,oBAAkBA;QACf,SAASP;QACT,MAAMZ;QACN,MAAMG;QACN,UAAUC;QACV,UAAUC;QACV,SAASU;sBAEb,oBAACK,0BAAwBA;QAAC,MAAMnB;QAAa,UAAUI;sBACvD,oBAACgB,eAAaA;QACT,GAAGZ,KAAK;QACT,IAAIG;QACJ,UAAUP;QACV,SAASU;QACT,QAAQC;sBAEZ,oBAACM,2BAAyBA;QACtB,MAAMX;QACN,SAASI;QACT,UAAUV;sBAEd,oBAACkB,mBAAiBA;QAAC,MAAMrB;QAAM,UAAUG;;AAGrD;AAEA,MAAMmB,OAAOC,gBAAgB,QAAQ1B"}

package/Tags/Tags.stories.d.ts

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

package/Tags/Tags.stories.js

@@ -1,92 +1,95 @@
-import React, { useState } from "react";
-import { Tags } from "./Tags";
+import react, { useState } from "react";
+import { Tags } from "./Tags.js";
 const meta = {
-  title: "Components/Form/Tags",
-  component: Tags,
-  argTypes: {
-    onChange: {
-      action: "onChange"
+    title: "Components/Form/Tags",
+    component: Tags,
+    argTypes: {
+        onChange: {
+            action: "onChange"
+        },
+        onValueInput: {
+            action: "onValueInput"
+        },
+        onValueAdd: {
+            action: "onValueAdd"
+        },
+        onValueRemove: {
+            action: "onValueRemove"
+        },
+        disabled: {
+            control: "boolean",
+            defaultValue: false
+        }
     },
-    onValueInput: {
-      action: "onValueInput"
+    parameters: {
+        layout: "padded"
     },
-    onValueAdd: {
-      action: "onValueAdd"
-    },
-    onValueRemove: {
-      action: "onValueRemove"
-    },
-    disabled: {
-      control: "boolean",
-      defaultValue: false
+    render: (args)=>{
+        const [values, setValues] = useState(args.value);
+        return /*#__PURE__*/ react.createElement(Tags, {
+            ...args,
+            value: values,
+            onChange: setValues
+        });
     }
-  },
-  parameters: {
-    layout: "padded"
-  },
-  render: args => {
-    const [values, setValues] = useState(args.value);
-    return /*#__PURE__*/React.createElement(Tags, Object.assign({}, args, {
-      value: values,
-      onChange: setValues
-    }));
-  }
 };
-export default meta;
-export const Default = {};
-export const WithLabel = {
-  args: {
-    ...Default.args,
-    label: "Any field label"
-  }
+const Tags_stories = meta;
+const Default = {};
+const WithLabel = {
+    args: {
+        ...Default.args,
+        label: "Any field label"
+    }
 };
-export const WithRequiredLabel = {
-  args: {
-    ...Default.args,
-    label: "Any field label",
-    required: true
-  }
+const WithRequiredLabel = {
+    args: {
+        ...Default.args,
+        label: "Any field label",
+        required: true
+    }
 };
-export const WithDescription = {
-  args: {
-    ...Default.args,
-    description: "Provide the required information for processing your request."
-  }
+const WithDescription = {
+    args: {
+        ...Default.args,
+        description: "Provide the required information for processing your request."
+    }
 };
-export const WithNotes = {
-  args: {
-    ...Default.args,
-    note: "Note: Ensure your selection or input is accurate before proceeding."
-  }
+const WithNotes = {
+    args: {
+        ...Default.args,
+        note: "Note: Ensure your selection or input is accurate before proceeding."
+    }
 };
-export const WithErrors = {
-  args: {
-    ...Default.args,
-    validation: {
-      isValid: false,
-      message: "This field is required."
+const WithErrors = {
+    args: {
+        ...Default.args,
+        validation: {
+            isValid: false,
+            message: "This field is required."
+        }
     }
-  }
 };
-export const Disabled = {
-  args: {
-    ...Default.args,
-    label: "Any field label",
-    disabled: true
-  }
+const Disabled = {
+    args: {
+        ...Default.args,
+        label: "Any field label",
+        disabled: true
+    }
 };
-export const FullExample = {
-  args: {
-    ...Default.args,
-    label: "Any field label",
-    required: true,
-    description: "Provide the required information for processing your request.",
-    note: "Note: Ensure your selection or input is accurate before proceeding.",
-    validation: {
-      isValid: false,
-      message: "This field is required."
+const FullExample = {
+    args: {
+        ...Default.args,
+        label: "Any field label",
+        required: true,
+        description: "Provide the required information for processing your request.",
+        note: "Note: Ensure your selection or input is accurate before proceeding.",
+        validation: {
+            isValid: false,
+            message: "This field is required."
+        }
     }
-  }
 };
+export default Tags_stories;
+export { Default, Disabled, FullExample, WithDescription, WithErrors, WithLabel, WithNotes, WithRequiredLabel };
 
 //# sourceMappingURL=Tags.stories.js.map

package/Tags/Tags.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","Tags","meta","title","component","argTypes","onChange","action","onValueInput","onValueAdd","onValueRemove","disabled","control","defaultValue","parameters","layout","render","args","values","setValues","value","createElement","Object","assign","Default","WithLabel","label","WithRequiredLabel","required","WithDescription","description","WithNotes","note","WithErrors","validation","isValid","message","Disabled","FullExample"],"sources":["Tags.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { Tags } from \"./Tags\";\n\nconst meta: Meta<typeof Tags> = {\n    title: \"Components/Form/Tags\",\n    component: Tags,\n    argTypes: {\n        onChange: { action: \"onChange\" },\n        onValueInput: { action: \"onValueInput\" },\n        onValueAdd: { action: \"onValueAdd\" },\n        onValueRemove: { action: \"onValueRemove\" },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [values, setValues] = useState(args.value);\n        return <Tags {...args} value={values} onChange={setValues} />;\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Tags>;\n\nexport const Default: Story = {};\n\nexport const WithLabel: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const WithRequiredLabel: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        ...Default.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const WithNotes: Story = {\n    args: {\n        ...Default.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const WithErrors: Story = {\n    args: {\n        ...Default.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const FullExample: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        required: true,\n        description: \"Provide the required information for processing your request.\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AAEvC,SAASC,IAAI;AAEb,MAAMC,IAAuB,GAAG;EAC5BC,KAAK,EAAE,sBAAsB;EAC7BC,SAAS,EAAEH,IAAI;EACfI,QAAQ,EAAE;IACNC,QAAQ,EAAE;MAAEC,MAAM,EAAE;IAAW,CAAC;IAChCC,YAAY,EAAE;MAAED,MAAM,EAAE;IAAe,CAAC;IACxCE,UAAU,EAAE;MAAEF,MAAM,EAAE;IAAa,CAAC;IACpCG,aAAa,EAAE;MAAEH,MAAM,EAAE;IAAgB,CAAC;IAC1CI,QAAQ,EAAE;MACNC,OAAO,EAAE,SAAS;MAClBC,YAAY,EAAE;IAClB;EACJ,CAAC;EACDC,UAAU,EAAE;IACRC,MAAM,EAAE;EACZ,CAAC;EACDC,MAAM,EAAEC,IAAI,IAAI;IACZ,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAGnB,QAAQ,CAACiB,IAAI,CAACG,KAAK,CAAC;IAChD,oBAAOrB,KAAA,CAAAsB,aAAA,CAACpB,IAAI,EAAAqB,MAAA,CAAAC,MAAA,KAAKN,IAAI;MAAEG,KAAK,EAAEF,MAAO;MAACZ,QAAQ,EAAEa;IAAU,EAAE,CAAC;EACjE;AACJ,CAAC;AAED,eAAejB,IAAI;AAGnB,OAAO,MAAMsB,OAAc,GAAG,CAAC,CAAC;AAEhC,OAAO,MAAMC,SAAgB,GAAG;EAC5BR,IAAI,EAAE;IACF,GAAGO,OAAO,CAACP,IAAI;IACfS,KAAK,EAAE;EACX;AACJ,CAAC;AAED,OAAO,MAAMC,iBAAwB,GAAG;EACpCV,IAAI,EAAE;IACF,GAAGO,OAAO,CAACP,IAAI;IACfS,KAAK,EAAE,iBAAiB;IACxBE,QAAQ,EAAE;EACd;AACJ,CAAC;AAED,OAAO,MAAMC,eAAsB,GAAG;EAClCZ,IAAI,EAAE;IACF,GAAGO,OAAO,CAACP,IAAI;IACfa,WAAW,EAAE;EACjB;AACJ,CAAC;AAED,OAAO,MAAMC,SAAgB,GAAG;EAC5Bd,IAAI,EAAE;IACF,GAAGO,OAAO,CAACP,IAAI;IACfe,IAAI,EAAE;EACV;AACJ,CAAC;AAED,OAAO,MAAMC,UAAiB,GAAG;EAC7BhB,IAAI,EAAE;IACF,GAAGO,OAAO,CAACP,IAAI;IACfiB,UAAU,EAAE;MACRC,OAAO,EAAE,KAAK;MACdC,OAAO,EAAE;IACb;EACJ;AACJ,CAAC;AAED,OAAO,MAAMC,QAAe,GAAG;EAC3BpB,IAAI,EAAE;IACF,GAAGO,OAAO,CAACP,IAAI;IACfS,KAAK,EAAE,iBAAiB;IACxBf,QAAQ,EAAE;EACd;AACJ,CAAC;AAED,OAAO,MAAM2B,WAAkB,GAAG;EAC9BrB,IAAI,EAAE;IACF,GAAGO,OAAO,CAACP,IAAI;IACfS,KAAK,EAAE,iBAAiB;IACxBE,QAAQ,EAAE,IAAI;IACdE,WAAW,EAAE,+DAA+D;IAC5EE,IAAI,EAAE,qEAAqE;IAC3EE,UAAU,EAAE;MACRC,OAAO,EAAE,KAAK;MACdC,OAAO,EAAE;IACb;EACJ;AACJ,CAAC","ignoreList":[]}
+{"version":3,"file":"Tags/Tags.stories.js","sources":["../../src/Tags/Tags.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { Tags } from \"./Tags.js\";\n\nconst meta: Meta<typeof Tags> = {\n    title: \"Components/Form/Tags\",\n    component: Tags,\n    argTypes: {\n        onChange: { action: \"onChange\" },\n        onValueInput: { action: \"onValueInput\" },\n        onValueAdd: { action: \"onValueAdd\" },\n        onValueRemove: { action: \"onValueRemove\" },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [values, setValues] = useState(args.value);\n        return <Tags {...args} value={values} onChange={setValues} />;\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Tags>;\n\nexport const Default: Story = {};\n\nexport const WithLabel: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const WithRequiredLabel: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        ...Default.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const WithNotes: Story = {\n    args: {\n        ...Default.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const WithErrors: Story = {\n    args: {\n        ...Default.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const FullExample: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        required: true,\n        description: \"Provide the required information for processing your request.\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n"],"names":["meta","Tags","args","values","setValues","useState","Default","WithLabel","WithRequiredLabel","WithDescription","WithNotes","WithErrors","Disabled","FullExample"],"mappings":";;AAIA,MAAMA,OAA0B;IAC5B,OAAO;IACP,WAAWC;IACX,UAAU;QACN,UAAU;YAAE,QAAQ;QAAW;QAC/B,cAAc;YAAE,QAAQ;QAAe;QACvC,YAAY;YAAE,QAAQ;QAAa;QACnC,eAAe;YAAE,QAAQ;QAAgB;QACzC,UAAU;YACN,SAAS;YACT,cAAc;QAClB;IACJ;IACA,YAAY;QACR,QAAQ;IACZ;IACA,QAAQC,CAAAA;QACJ,MAAM,CAACC,QAAQC,UAAU,GAAGC,SAASH,KAAK,KAAK;QAC/C,OAAO,WAAP,GAAO,oBAACD,MAAIA;YAAE,GAAGC,IAAI;YAAE,OAAOC;YAAQ,UAAUC;;IACpD;AACJ;AAEA,qBAAeJ;AAGR,MAAMM,UAAiB,CAAC;AAExB,MAAMC,YAAmB;IAC5B,MAAM;QACF,GAAGD,QAAQ,IAAI;QACf,OAAO;IACX;AACJ;AAEO,MAAME,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"}