@webiny/admin-ui 6.0.0-alpha.5 → 6.0.0-rc.0

package/Tabs/Tabs.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","ReactComponent","PersonIcon","LockIcon","Tabs","meta","title","component","parameters","layout","Default","args","tabs","createElement","Tab","key","value","trigger","content","SizeSmall","size","SizeMedium","SizeLarge","SizeExtraLarge","SpacingExtraSmall","spacing","SpacingSmall","SpacingMedium","SpacingLarge","SpacingExtraLarge","SpacingDoubleExtraLarge","WithSeparator","separator","WithDefaultValue","defaultValue","WithControlledValue","render","setValue","Object","assign","onValueChange","WithIcons","icon","WithDisabledTab","disabled","WithHiddenTab","visible","WithCustomTabSpacing","Documentation","JSON","stringify","undefined","argTypes","description","control","options"],"sources":["Tabs.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { ReactComponent as PersonIcon } from \"@webiny/icons/person.svg\";\nimport { ReactComponent as LockIcon } from \"@webiny/icons/lock.svg\";\nimport { Tabs } from \"./Tabs\";\n\nconst meta: Meta<typeof Tabs> = {\n    title: \"Components/Tabs\",\n    component: Tabs,\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Tabs>;\n\nexport const Default: Story = {\n    args: {\n        tabs: [\n            <Tabs.Tab\n                key={\"account\"}\n                value={\"account\"}\n                trigger={\"Account\"}\n                content={\n                    \"Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum.\"\n                }\n            />,\n            <Tabs.Tab\n                key={\"password\"}\n                value={\"password\"}\n                trigger={\"Password\"}\n                content={\n                    \"Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. \"\n                }\n            />\n        ]\n    }\n};\n\nexport const SizeSmall: Story = {\n    args: {\n        ...Default.args,\n        size: \"sm\"\n    }\n};\n\nexport const SizeMedium: Story = {\n    args: {\n        ...Default.args,\n        size: \"md\"\n    }\n};\n\nexport const SizeLarge: Story = {\n    args: {\n        ...Default.args,\n        size: \"lg\"\n    }\n};\n\nexport const SizeExtraLarge: Story = {\n    args: {\n        ...Default.args,\n        size: \"xl\"\n    }\n};\n\nexport const SpacingExtraSmall: Story = {\n    args: {\n        ...Default.args,\n        spacing: \"xs\"\n    }\n};\n\nexport const SpacingSmall: Story = {\n    args: {\n        ...Default.args,\n        spacing: \"sm\"\n    }\n};\n\nexport const SpacingMedium: Story = {\n    args: {\n        ...Default.args,\n        spacing: \"md\"\n    }\n};\n\nexport const SpacingLarge: Story = {\n    args: {\n        ...Default.args,\n        spacing: \"lg\"\n    }\n};\n\nexport const SpacingExtraLarge: Story = {\n    args: {\n        ...Default.args,\n        spacing: \"xl\"\n    }\n};\n\nexport const SpacingDoubleExtraLarge: Story = {\n    args: {\n        ...Default.args,\n        spacing: \"xxl\"\n    }\n};\n\nexport const WithSeparator: Story = {\n    args: {\n        ...Default.args,\n        separator: true\n    }\n};\n\nexport const WithDefaultValue: Story = {\n    args: {\n        ...Default.args,\n        defaultValue: \"password\"\n    }\n};\n\nexport const WithControlledValue: Story = {\n    args: {\n        ...Default.args,\n        value: \"password\"\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return <Tabs {...args} value={value} onValueChange={setValue} />;\n    }\n};\n\nexport const WithIcons: Story = {\n    args: {\n        ...Default.args,\n        tabs: [\n            <Tabs.Tab\n                key={\"account\"}\n                value={\"account\"}\n                trigger={\"Account\"}\n                content={\n                    \"Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum.\"\n                }\n                icon={<PersonIcon />}\n            />,\n            <Tabs.Tab\n                key={\"password\"}\n                value={\"password\"}\n                trigger={\"Password\"}\n                content={\n                    \"Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. \"\n                }\n                icon={<LockIcon />}\n            />\n        ]\n    }\n};\n\nexport const WithDisabledTab: Story = {\n    args: {\n        ...Default.args,\n        tabs: [\n            <Tabs.Tab\n                key={\"account\"}\n                value={\"account\"}\n                trigger={\"Account\"}\n                content={\n                    \"Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum.\"\n                }\n                disabled={true}\n            />,\n            <Tabs.Tab\n                key={\"password\"}\n                value={\"password\"}\n                trigger={\"Password\"}\n                content={\n                    \"Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. \"\n                }\n            />\n        ]\n    }\n};\n\nexport const WithHiddenTab: Story = {\n    args: {\n        ...Default.args,\n        tabs: [\n            <Tabs.Tab\n                key={\"account\"}\n                value={\"account\"}\n                trigger={\"Account\"}\n                content={\n                    \"Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum.\"\n                }\n                visible={false}\n            />,\n            <Tabs.Tab\n                key={\"password\"}\n                value={\"password\"}\n                trigger={\"Password\"}\n                content={\n                    \"Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. \"\n                }\n            />\n        ]\n    }\n};\n\nexport const WithCustomTabSpacing: Story = {\n    args: {\n        ...Default.args,\n        spacing: \"sm\",\n        tabs: [\n            <Tabs.Tab\n                key={\"account\"}\n                value={\"account\"}\n                trigger={\"Account\"}\n                content={\n                    \"Tab with custom spacing XXL - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum.\"\n                }\n                spacing={\"xxl\"}\n            />,\n            <Tabs.Tab\n                key={\"password\"}\n                value={\"password\"}\n                trigger={\"Password\"}\n                content={\n                    \"Tab with inherited spacing - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. \"\n                }\n            />\n        ]\n    }\n};\n\n// Update the Documentation story to properly handle control changes\nexport const Documentation: Story = {\n    render: args => {\n        // Force re-render when args change by using a key\n        return <Tabs key={JSON.stringify(args)} {...args} />;\n    },\n    args: {\n        size: \"md\",\n        spacing: \"lg\",\n        separator: true,\n        defaultValue: \"account\",\n        tabs: [\n            <Tabs.Tab\n                key={\"account\"}\n                value={\"account\"}\n                trigger={\"Account\"}\n                content={\n                    \"Account content - This tab contains account settings and personal information. Users can update their profile details, change email address, and manage notification preferences.\"\n                }\n            />,\n            <Tabs.Tab\n                key={\"security\"}\n                value={\"security\"}\n                trigger={\"Security\"}\n                content={\n                    \"Security content - This tab contains security settings. Users can change their password, enable two-factor authentication, and review recent account activity.\"\n                }\n            />,\n            <Tabs.Tab\n                key={\"preferences\"}\n                value={\"preferences\"}\n                trigger={\"Preferences\"}\n                content={\n                    \"Preferences content - This tab contains user preferences. Users can customize the interface, set language preferences, and configure other application settings.\"\n                }\n            />\n        ],\n        value: undefined\n    },\n    argTypes: {\n        size: {\n            description: \"Size of the tabs\",\n            control: \"select\",\n            options: [\"sm\", \"md\", \"lg\", \"xl\"],\n            defaultValue: \"md\"\n        },\n        spacing: {\n            description: \"Spacing around the tabs and content\",\n            control: \"select\",\n            options: [\"xs\", \"sm\", \"md\", \"lg\", \"xl\", \"xxl\"],\n            defaultValue: \"lg\"\n        },\n        separator: {\n            description:\n                \"Whether to show a separator line below the tabs, by default it's `false`.\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        defaultValue: {\n            description: \"The value of the tab that should be active by default\",\n            control: \"text\"\n        },\n        value: {\n            description:\n                \"The controlled value of the active tab, please refer to the example code for details.\",\n            control: \"none\"\n        },\n        tabs: {\n            description: \"The tabs to render, please refer to the example code for details.\",\n            control: \"none\"\n        }\n    }\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useState","ReactComponent","PersonIcon","LockIcon","Tabs","meta","title","component","parameters","layout","Default","args","tabs","createElement","Tab","key","value","trigger","content","SizeSmall","size","SizeMedium","SizeLarge","SizeExtraLarge","SpacingExtraSmall","spacing","SpacingSmall","SpacingMedium","SpacingLarge","SpacingExtraLarge","SpacingDoubleExtraLarge","WithSeparator","separator","WithDefaultValue","defaultValue","WithControlledValue","render","setValue","Object","assign","onValueChange","WithIcons","icon","WithDisabledTab","disabled","WithHiddenTab","visible","WithCustomTabSpacing","Documentation","JSON","stringify","undefined","argTypes","description","control","options"],"sources":["Tabs.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { ReactComponent as PersonIcon } from \"@webiny/icons/person.svg\";\nimport { ReactComponent as LockIcon } from \"@webiny/icons/lock.svg\";\nimport { Tabs } from \"./Tabs.js\";\n\nconst meta: Meta<typeof Tabs> = {\n    title: \"Components/Tabs\",\n    component: Tabs,\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Tabs>;\n\nexport const Default: Story = {\n    args: {\n        tabs: [\n            <Tabs.Tab\n                key={\"account\"}\n                value={\"account\"}\n                trigger={\"Account\"}\n                content={\n                    \"Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum.\"\n                }\n            />,\n            <Tabs.Tab\n                key={\"password\"}\n                value={\"password\"}\n                trigger={\"Password\"}\n                content={\n                    \"Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. \"\n                }\n            />\n        ]\n    }\n};\n\nexport const SizeSmall: Story = {\n    args: {\n        ...Default.args,\n        size: \"sm\"\n    }\n};\n\nexport const SizeMedium: Story = {\n    args: {\n        ...Default.args,\n        size: \"md\"\n    }\n};\n\nexport const SizeLarge: Story = {\n    args: {\n        ...Default.args,\n        size: \"lg\"\n    }\n};\n\nexport const SizeExtraLarge: Story = {\n    args: {\n        ...Default.args,\n        size: \"xl\"\n    }\n};\n\nexport const SpacingExtraSmall: Story = {\n    args: {\n        ...Default.args,\n        spacing: \"xs\"\n    }\n};\n\nexport const SpacingSmall: Story = {\n    args: {\n        ...Default.args,\n        spacing: \"sm\"\n    }\n};\n\nexport const SpacingMedium: Story = {\n    args: {\n        ...Default.args,\n        spacing: \"md\"\n    }\n};\n\nexport const SpacingLarge: Story = {\n    args: {\n        ...Default.args,\n        spacing: \"lg\"\n    }\n};\n\nexport const SpacingExtraLarge: Story = {\n    args: {\n        ...Default.args,\n        spacing: \"xl\"\n    }\n};\n\nexport const SpacingDoubleExtraLarge: Story = {\n    args: {\n        ...Default.args,\n        spacing: \"xxl\"\n    }\n};\n\nexport const WithSeparator: Story = {\n    args: {\n        ...Default.args,\n        separator: true\n    }\n};\n\nexport const WithDefaultValue: Story = {\n    args: {\n        ...Default.args,\n        defaultValue: \"password\"\n    }\n};\n\nexport const WithControlledValue: Story = {\n    args: {\n        ...Default.args,\n        value: \"password\"\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return <Tabs {...args} value={value} onValueChange={setValue} />;\n    }\n};\n\nexport const WithIcons: Story = {\n    args: {\n        ...Default.args,\n        tabs: [\n            <Tabs.Tab\n                key={\"account\"}\n                value={\"account\"}\n                trigger={\"Account\"}\n                content={\n                    \"Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum.\"\n                }\n                icon={<PersonIcon />}\n            />,\n            <Tabs.Tab\n                key={\"password\"}\n                value={\"password\"}\n                trigger={\"Password\"}\n                content={\n                    \"Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. \"\n                }\n                icon={<LockIcon />}\n            />\n        ]\n    }\n};\n\nexport const WithDisabledTab: Story = {\n    args: {\n        ...Default.args,\n        tabs: [\n            <Tabs.Tab\n                key={\"account\"}\n                value={\"account\"}\n                trigger={\"Account\"}\n                content={\n                    \"Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum.\"\n                }\n                disabled={true}\n            />,\n            <Tabs.Tab\n                key={\"password\"}\n                value={\"password\"}\n                trigger={\"Password\"}\n                content={\n                    \"Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. \"\n                }\n            />\n        ]\n    }\n};\n\nexport const WithHiddenTab: Story = {\n    args: {\n        ...Default.args,\n        tabs: [\n            <Tabs.Tab\n                key={\"account\"}\n                value={\"account\"}\n                trigger={\"Account\"}\n                content={\n                    \"Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum.\"\n                }\n                visible={false}\n            />,\n            <Tabs.Tab\n                key={\"password\"}\n                value={\"password\"}\n                trigger={\"Password\"}\n                content={\n                    \"Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. \"\n                }\n            />\n        ]\n    }\n};\n\nexport const WithCustomTabSpacing: Story = {\n    args: {\n        ...Default.args,\n        spacing: \"sm\",\n        tabs: [\n            <Tabs.Tab\n                key={\"account\"}\n                value={\"account\"}\n                trigger={\"Account\"}\n                content={\n                    \"Tab with custom spacing XXL - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum.\"\n                }\n                spacing={\"xxl\"}\n            />,\n            <Tabs.Tab\n                key={\"password\"}\n                value={\"password\"}\n                trigger={\"Password\"}\n                content={\n                    \"Tab with inherited spacing - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. \"\n                }\n            />\n        ]\n    }\n};\n\n// Update the Documentation story to properly handle control changes\nexport const Documentation: Story = {\n    render: args => {\n        // Force re-render when args change by using a key\n        return <Tabs key={JSON.stringify(args)} {...args} />;\n    },\n    args: {\n        size: \"md\",\n        spacing: \"lg\",\n        separator: true,\n        defaultValue: \"account\",\n        tabs: [\n            <Tabs.Tab\n                key={\"account\"}\n                value={\"account\"}\n                trigger={\"Account\"}\n                content={\n                    \"Account content - This tab contains account settings and personal information. Users can update their profile details, change email address, and manage notification preferences.\"\n                }\n            />,\n            <Tabs.Tab\n                key={\"security\"}\n                value={\"security\"}\n                trigger={\"Security\"}\n                content={\n                    \"Security content - This tab contains security settings. Users can change their password, enable two-factor authentication, and review recent account activity.\"\n                }\n            />,\n            <Tabs.Tab\n                key={\"preferences\"}\n                value={\"preferences\"}\n                trigger={\"Preferences\"}\n                content={\n                    \"Preferences content - This tab contains user preferences. Users can customize the interface, set language preferences, and configure other application settings.\"\n                }\n            />\n        ],\n        value: undefined\n    },\n    argTypes: {\n        size: {\n            description: \"Size of the tabs\",\n            control: \"select\",\n            options: [\"sm\", \"md\", \"lg\", \"xl\"],\n            defaultValue: \"md\"\n        },\n        spacing: {\n            description: \"Spacing around the tabs and content\",\n            control: \"select\",\n            options: [\"xs\", \"sm\", \"md\", \"lg\", \"xl\", \"xxl\"],\n            defaultValue: \"lg\"\n        },\n        separator: {\n            description:\n                \"Whether to show a separator line below the tabs, by default it's `false`.\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        defaultValue: {\n            description: \"The value of the tab that should be active by default\",\n            control: \"text\"\n        },\n        value: {\n            description:\n                \"The controlled value of the active tab, please refer to the example code for details.\"\n        },\n        tabs: {\n            description: \"The tabs to render, please refer to the example code for details.\"\n        }\n    }\n};\n"],"mappings":"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","ignoreList":[]}

package/Tabs/components/Content.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Tabs as TabsPrimitive } from "radix-ui";
-import { type VariantProps } from "../../utils";
+import { type VariantProps } from "../../utils.js";
 declare const tabContentVariants: (props?: ({
     spacing?: "sm" | "md" | "lg" | "xl" | "xs" | "xxl" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/Tabs/components/Content.js

@@ -1,19 +1,19 @@
 import * as React from "react";
 import { Tabs as TabsPrimitive } from "radix-ui";
-import { cn, cva } from "../../utils";
-const tabContentVariants = cva(["wby-bg-transparent", "focus-visible:wby-outline-none focus-visible:wby-ring-lg focus-visible:wby-ring-primary-dimmed",
+import { cn, cva } from "../../utils.js";
+const tabContentVariants = cva(["bg-neutral-base", "rounded-lg", "focus-visible:outline-none focus-visible:ring-lg focus-visible:ring-primary-dimmed",
 // By default, the inner content is removed by the DOM when the tab becomes inactive.
 // This is a problem when we need to keep track of the state inside a tab content, such as forms.
 //  We are force-mounting the tab content and this class ensures the content is hidden, but not removed from the DOM.
-"data-[state=inactive]:wby-hidden"], {
+"data-[state=inactive]:hidden"], {
   variants: {
     spacing: {
-      xs: "wby-p-xs",
-      sm: "wby-p-sm",
-      md: "wby-p-md",
-      lg: "wby-p-lg",
-      xl: "wby-p-xl",
-      xxl: "wby-p-xxl"
+      xs: "p-xs",
+      sm: "p-sm",
+      md: "p-md",
+      lg: "p-lg",
+      xl: "p-xl",
+      xxl: "p-xxl"
     }
   }
 });

package/Tabs/components/Content.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Tabs","TabsPrimitive","cn","cva","tabContentVariants","variants","spacing","xs","sm","md","lg","xl","xxl","Content","className","content","props","createElement","Object","assign","forceMount"],"sources":["Content.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Tabs as TabsPrimitive } from \"radix-ui\";\nimport { cn, cva, type VariantProps } from \"~/utils\";\n\nconst tabContentVariants = cva(\n    [\n        \"wby-bg-transparent\",\n        \"focus-visible:wby-outline-none focus-visible:wby-ring-lg focus-visible:wby-ring-primary-dimmed\",\n        // By default, the inner content is removed by the DOM when the tab becomes inactive.\n        // This is a problem when we need to keep track of the state inside a tab content, such as forms.\n        //  We are force-mounting the tab content and this class ensures the content is hidden, but not removed from the DOM.\n        \"data-[state=inactive]:wby-hidden\"\n    ],\n    {\n        variants: {\n            spacing: {\n                xs: \"wby-p-xs\",\n                sm: \"wby-p-sm\",\n                md: \"wby-p-md\",\n                lg: \"wby-p-lg\",\n                xl: \"wby-p-xl\",\n                xxl: \"wby-p-xxl\"\n            }\n        }\n    }\n);\n\ntype ContentProps = Omit<TabsPrimitive.TabsContentProps, \"children\" | \"content\"> &\n    VariantProps<typeof tabContentVariants> & {\n        content: React.ReactNode;\n    };\n\nconst Content = ({ className, content, spacing, ...props }: ContentProps) => (\n    <TabsPrimitive.Content\n        className={cn(tabContentVariants({ spacing }), className)}\n        forceMount={true}\n        {...props}\n    >\n        {content}\n    </TabsPrimitive.Content>\n);\n\nexport { Content, type ContentProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,IAAI,IAAIC,aAAa,QAAQ,UAAU;AAChD,SAASC,EAAE,EAAEC,GAAG;AAEhB,MAAMC,kBAAkB,GAAGD,GAAG,CAC1B,CACI,oBAAoB,EACpB,gGAAgG;AAChG;AACA;AACA;AACA,kCAAkC,CACrC,EACD;EACIE,QAAQ,EAAE;IACNC,OAAO,EAAE;MACLC,EAAE,EAAE,UAAU;MACdC,EAAE,EAAE,UAAU;MACdC,EAAE,EAAE,UAAU;MACdC,EAAE,EAAE,UAAU;MACdC,EAAE,EAAE,UAAU;MACdC,GAAG,EAAE;IACT;EACJ;AACJ,CACJ,CAAC;AAOD,MAAMC,OAAO,GAAGA,CAAC;EAAEC,SAAS;EAAEC,OAAO;EAAET,OAAO;EAAE,GAAGU;AAAoB,CAAC,kBACpEjB,KAAA,CAAAkB,aAAA,CAAChB,aAAa,CAACY,OAAO,EAAAK,MAAA,CAAAC,MAAA;EAClBL,SAAS,EAAEZ,EAAE,CAACE,kBAAkB,CAAC;IAAEE;EAAQ,CAAC,CAAC,EAAEQ,SAAS,CAAE;EAC1DM,UAAU,EAAE;AAAK,GACbJ,KAAK,GAERD,OACkB,CAC1B;AAED,SAASF,OAAO","ignoreList":[]}
+{"version":3,"names":["React","Tabs","TabsPrimitive","cn","cva","tabContentVariants","variants","spacing","xs","sm","md","lg","xl","xxl","Content","className","content","props","createElement","Object","assign","forceMount"],"sources":["Content.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Tabs as TabsPrimitive } from \"radix-ui\";\nimport { cn, cva, type VariantProps } from \"~/utils.js\";\n\nconst tabContentVariants = cva(\n    [\n        \"bg-neutral-base\",\n        \"rounded-lg\",\n        \"focus-visible:outline-none focus-visible:ring-lg focus-visible:ring-primary-dimmed\",\n        // By default, the inner content is removed by the DOM when the tab becomes inactive.\n        // This is a problem when we need to keep track of the state inside a tab content, such as forms.\n        //  We are force-mounting the tab content and this class ensures the content is hidden, but not removed from the DOM.\n        \"data-[state=inactive]:hidden\"\n    ],\n    {\n        variants: {\n            spacing: {\n                xs: \"p-xs\",\n                sm: \"p-sm\",\n                md: \"p-md\",\n                lg: \"p-lg\",\n                xl: \"p-xl\",\n                xxl: \"p-xxl\"\n            }\n        }\n    }\n);\n\ntype ContentProps = Omit<TabsPrimitive.TabsContentProps, \"children\" | \"content\"> &\n    VariantProps<typeof tabContentVariants> & {\n        content: React.ReactNode;\n    };\n\nconst Content = ({ className, content, spacing, ...props }: ContentProps) => (\n    <TabsPrimitive.Content\n        className={cn(tabContentVariants({ spacing }), className)}\n        forceMount={true}\n        {...props}\n    >\n        {content}\n    </TabsPrimitive.Content>\n);\n\nexport { Content, type ContentProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,IAAI,IAAIC,aAAa,QAAQ,UAAU;AAChD,SAASC,EAAE,EAAEC,GAAG;AAEhB,MAAMC,kBAAkB,GAAGD,GAAG,CAC1B,CACI,iBAAiB,EACjB,YAAY,EACZ,oFAAoF;AACpF;AACA;AACA;AACA,8BAA8B,CACjC,EACD;EACIE,QAAQ,EAAE;IACNC,OAAO,EAAE;MACLC,EAAE,EAAE,MAAM;MACVC,EAAE,EAAE,MAAM;MACVC,EAAE,EAAE,MAAM;MACVC,EAAE,EAAE,MAAM;MACVC,EAAE,EAAE,MAAM;MACVC,GAAG,EAAE;IACT;EACJ;AACJ,CACJ,CAAC;AAOD,MAAMC,OAAO,GAAGA,CAAC;EAAEC,SAAS;EAAEC,OAAO;EAAET,OAAO;EAAE,GAAGU;AAAoB,CAAC,kBACpEjB,KAAA,CAAAkB,aAAA,CAAChB,aAAa,CAACY,OAAO,EAAAK,MAAA,CAAAC,MAAA;EAClBL,SAAS,EAAEZ,EAAE,CAACE,kBAAkB,CAAC;IAAEE;EAAQ,CAAC,CAAC,EAAEQ,SAAS,CAAE;EAC1DM,UAAU,EAAE;AAAK,GACbJ,KAAK,GAERD,OACkB,CAC1B;AAED,SAASF,OAAO","ignoreList":[]}

package/Tabs/components/Context.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-import type { TabItem } from "./Tab";
+import type { TabItem } from "./Tab.js";
 interface ITabsContext {
     addTab(props: TabItem): void;
     removeTab(id: string): void;

package/Tabs/components/Context.js.map

@@ -1 +1 @@
-{"version":3,"names":["createContext","TabsContext","undefined"],"sources":["Context.tsx"],"sourcesContent":["import { createContext } from \"react\";\nimport type { TabItem } from \"./Tab\";\n\ninterface ITabsContext {\n    addTab(props: TabItem): void;\n    removeTab(id: string): void;\n}\n\nconst TabsContext = createContext<ITabsContext | undefined>(undefined);\n\nexport { TabsContext, type ITabsContext };\n"],"mappings":"AAAA,SAASA,aAAa,QAAQ,OAAO;AAQrC,MAAMC,WAAW,gBAAGD,aAAa,CAA2BE,SAAS,CAAC;AAEtE,SAASD,WAAW","ignoreList":[]}
+{"version":3,"names":["createContext","TabsContext","undefined"],"sources":["Context.tsx"],"sourcesContent":["import { createContext } from \"react\";\nimport type { TabItem } from \"./Tab.js\";\n\ninterface ITabsContext {\n    addTab(props: TabItem): void;\n    removeTab(id: string): void;\n}\n\nconst TabsContext = createContext<ITabsContext | undefined>(undefined);\n\nexport { TabsContext, type ITabsContext };\n"],"mappings":"AAAA,SAASA,aAAa,QAAQ,OAAO;AAQrC,MAAMC,WAAW,gBAAGD,aAAa,CAA2BE,SAAS,CAAC;AAEtE,SAASD,WAAW","ignoreList":[]}

package/Tabs/components/List.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Tabs as TabsPrimitive } from "radix-ui";
-import { type VariantProps } from "../../utils";
+import { type VariantProps } from "../../utils.js";
 declare const tabListVariants: (props?: ({
     size?: "sm" | "md" | "lg" | "xl" | null | undefined;
     spacing?: "sm" | "md" | "lg" | "xl" | "xs" | "xxl" | null | undefined;

package/Tabs/components/List.js

@@ -1,24 +1,24 @@
 import * as React from "react";
 import { Tabs as TabsPrimitive } from "radix-ui";
-import { cn, cva } from "../../utils";
-const tabListVariants = cva("wby-w-full wby-inline-flex wby-items-center wby-justify-start", {
+import { cn, cva } from "../../utils.js";
+const tabListVariants = cva("w-full inline-flex items-center justify-start", {
   variants: {
     size: {
-      sm: "wby-gap-sm",
-      md: "wby-gap-sm",
-      lg: "wby-gap-sm-extra",
-      xl: "wby-gap-md"
+      sm: "gap-sm",
+      md: "gap-sm",
+      lg: "gap-sm-extra",
+      xl: "gap-md"
     },
     spacing: {
-      xs: "wby-px-xs",
-      sm: "wby-px-sm",
-      md: "wby-px-md",
-      lg: "wby-px-lg",
-      xl: "wby-px-xl",
-      xxl: "wby-px-xxl"
+      xs: "px-xs",
+      sm: "px-sm",
+      md: "px-md",
+      lg: "px-lg",
+      xl: "px-xl",
+      xxl: "px-xxl"
     },
     separator: {
-      true: "wby-border-solid wby-border-b-sm wby-border-neutral-dimmed"
+      true: "border-solid border-b-sm border-neutral-dimmed"
     }
   },
   defaultVariants: {

package/Tabs/components/List.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Tabs","TabsPrimitive","cn","cva","tabListVariants","variants","size","sm","md","lg","xl","spacing","xs","xxl","separator","true","defaultVariants","List","className","props","createElement","Object","assign"],"sources":["List.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Tabs as TabsPrimitive } from \"radix-ui\";\nimport { cn, cva, type VariantProps } from \"~/utils\";\n\nconst tabListVariants = cva(\"wby-w-full wby-inline-flex wby-items-center wby-justify-start\", {\n    variants: {\n        size: {\n            sm: \"wby-gap-sm\",\n            md: \"wby-gap-sm\",\n            lg: \"wby-gap-sm-extra\",\n            xl: \"wby-gap-md\"\n        },\n        spacing: {\n            xs: \"wby-px-xs\",\n            sm: \"wby-px-sm\",\n            md: \"wby-px-md\",\n            lg: \"wby-px-lg\",\n            xl: \"wby-px-xl\",\n            xxl: \"wby-px-xxl\"\n        },\n        separator: {\n            true: \"wby-border-solid wby-border-b-sm wby-border-neutral-dimmed\"\n        }\n    },\n    defaultVariants: {\n        size: \"sm\"\n    }\n});\n\ntype ListProps = TabsPrimitive.TabsListProps & VariantProps<typeof tabListVariants>;\n\nconst List = ({ className, spacing, size, separator, ...props }: ListProps) => (\n    <TabsPrimitive.List\n        className={cn(tabListVariants({ spacing, size, separator }), className)}\n        {...props}\n    />\n);\n\nexport { List, type ListProps, tabListVariants };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,IAAI,IAAIC,aAAa,QAAQ,UAAU;AAChD,SAASC,EAAE,EAAEC,GAAG;AAEhB,MAAMC,eAAe,GAAGD,GAAG,CAAC,+DAA+D,EAAE;EACzFE,QAAQ,EAAE;IACNC,IAAI,EAAE;MACFC,EAAE,EAAE,YAAY;MAChBC,EAAE,EAAE,YAAY;MAChBC,EAAE,EAAE,kBAAkB;MACtBC,EAAE,EAAE;IACR,CAAC;IACDC,OAAO,EAAE;MACLC,EAAE,EAAE,WAAW;MACfL,EAAE,EAAE,WAAW;MACfC,EAAE,EAAE,WAAW;MACfC,EAAE,EAAE,WAAW;MACfC,EAAE,EAAE,WAAW;MACfG,GAAG,EAAE;IACT,CAAC;IACDC,SAAS,EAAE;MACPC,IAAI,EAAE;IACV;EACJ,CAAC;EACDC,eAAe,EAAE;IACbV,IAAI,EAAE;EACV;AACJ,CAAC,CAAC;AAIF,MAAMW,IAAI,GAAGA,CAAC;EAAEC,SAAS;EAAEP,OAAO;EAAEL,IAAI;EAAEQ,SAAS;EAAE,GAAGK;AAAiB,CAAC,kBACtEpB,KAAA,CAAAqB,aAAA,CAACnB,aAAa,CAACgB,IAAI,EAAAI,MAAA,CAAAC,MAAA;EACfJ,SAAS,EAAEhB,EAAE,CAACE,eAAe,CAAC;IAAEO,OAAO;IAAEL,IAAI;IAAEQ;EAAU,CAAC,CAAC,EAAEI,SAAS;AAAE,GACpEC,KAAK,CACZ,CACJ;AAED,SAASF,IAAI,EAAkBb,eAAe","ignoreList":[]}
+{"version":3,"names":["React","Tabs","TabsPrimitive","cn","cva","tabListVariants","variants","size","sm","md","lg","xl","spacing","xs","xxl","separator","true","defaultVariants","List","className","props","createElement","Object","assign"],"sources":["List.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Tabs as TabsPrimitive } from \"radix-ui\";\nimport { cn, cva, type VariantProps } from \"~/utils.js\";\n\nconst tabListVariants = cva(\"w-full inline-flex items-center justify-start\", {\n    variants: {\n        size: {\n            sm: \"gap-sm\",\n            md: \"gap-sm\",\n            lg: \"gap-sm-extra\",\n            xl: \"gap-md\"\n        },\n        spacing: {\n            xs: \"px-xs\",\n            sm: \"px-sm\",\n            md: \"px-md\",\n            lg: \"px-lg\",\n            xl: \"px-xl\",\n            xxl: \"px-xxl\"\n        },\n        separator: {\n            true: \"border-solid border-b-sm border-neutral-dimmed\"\n        }\n    },\n    defaultVariants: {\n        size: \"sm\"\n    }\n});\n\ntype ListProps = TabsPrimitive.TabsListProps & VariantProps<typeof tabListVariants>;\n\nconst List = ({ className, spacing, size, separator, ...props }: ListProps) => (\n    <TabsPrimitive.List\n        className={cn(tabListVariants({ spacing, size, separator }), className)}\n        {...props}\n    />\n);\n\nexport { List, type ListProps, tabListVariants };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,IAAI,IAAIC,aAAa,QAAQ,UAAU;AAChD,SAASC,EAAE,EAAEC,GAAG;AAEhB,MAAMC,eAAe,GAAGD,GAAG,CAAC,+CAA+C,EAAE;EACzEE,QAAQ,EAAE;IACNC,IAAI,EAAE;MACFC,EAAE,EAAE,QAAQ;MACZC,EAAE,EAAE,QAAQ;MACZC,EAAE,EAAE,cAAc;MAClBC,EAAE,EAAE;IACR,CAAC;IACDC,OAAO,EAAE;MACLC,EAAE,EAAE,OAAO;MACXL,EAAE,EAAE,OAAO;MACXC,EAAE,EAAE,OAAO;MACXC,EAAE,EAAE,OAAO;MACXC,EAAE,EAAE,OAAO;MACXG,GAAG,EAAE;IACT,CAAC;IACDC,SAAS,EAAE;MACPC,IAAI,EAAE;IACV;EACJ,CAAC;EACDC,eAAe,EAAE;IACbV,IAAI,EAAE;EACV;AACJ,CAAC,CAAC;AAIF,MAAMW,IAAI,GAAGA,CAAC;EAAEC,SAAS;EAAEP,OAAO;EAAEL,IAAI;EAAEQ,SAAS;EAAE,GAAGK;AAAiB,CAAC,kBACtEpB,KAAA,CAAAqB,aAAA,CAACnB,aAAa,CAACgB,IAAI,EAAAI,MAAA,CAAAC,MAAA;EACfJ,SAAS,EAAEhB,EAAE,CAACE,eAAe,CAAC;IAAEO,OAAO;IAAEL,IAAI;IAAEQ;EAAU,CAAC,CAAC,EAAEI,SAAS;AAAE,GACpEC,KAAK,CACZ,CACJ;AAED,SAASF,IAAI,EAAkBb,eAAe","ignoreList":[]}

package/Tabs/components/Tab.d.ts

@@ -1,6 +1,6 @@
 import type React from "react";
-import { type VariantProps } from "../../utils";
-import type { tabListVariants } from "./List";
+import { type VariantProps } from "../../utils.js";
+import type { tabListVariants } from "./List.js";
 interface TabProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "content"> {
     value: string;
     trigger: React.ReactNode;
@@ -27,7 +27,7 @@ declare const Tab: ((props: TabProps) => null) & {
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: TabProps) => null) & {
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: TabProps) => null) & {
         original: (props: TabProps) => null;
         originalName: string;
         displayName: string;

package/Tabs/components/Tab.js

@@ -1,6 +1,6 @@
 import { useContext, useEffect, useRef } from "react";
-import { makeDecoratable, generateId } from "../../utils";
-import { TabsContext } from "./Context";
+import { makeDecoratable, generateId } from "../../utils.js";
+import { TabsContext } from "./Context.js";
 const DecoratableTab = props => {
   const tabsContext = useContext(TabsContext);
   const idRef = useRef(generateId());

package/Tabs/components/Tab.js.map

@@ -1 +1 @@
-{"version":3,"names":["useContext","useEffect","useRef","makeDecoratable","generateId","TabsContext","DecoratableTab","props","tabsContext","idRef","addTab","id","current","visible","removeTab","Tab"],"sources":["Tab.tsx"],"sourcesContent":["import type React from \"react\";\nimport { useContext, useEffect, useRef } from \"react\";\nimport { makeDecoratable, generateId, type VariantProps } from \"~/utils\";\nimport { TabsContext } from \"./Context\";\nimport type { tabListVariants } from \"./List\";\n\ninterface TabProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"children\" | \"content\"> {\n    value: string;\n    trigger: React.ReactNode;\n    content: React.ReactNode;\n    icon?: React.ReactElement;\n    spacing?: VariantProps<typeof tabListVariants>[\"spacing\"];\n    disabled?: boolean;\n    visible?: boolean;\n    \"data-testid\"?: string;\n}\n\ninterface TabItem extends TabProps {\n    id: string;\n}\n\nconst DecoratableTab = (props: TabProps) => {\n    const tabsContext = useContext(TabsContext);\n    const idRef = useRef(generateId());\n\n    useEffect(() => {\n        tabsContext!.addTab({ ...props, id: idRef.current, visible: props.visible ?? true });\n    }, [props]);\n\n    useEffect(() => {\n        return () => {\n            return tabsContext!.removeTab(idRef.current);\n        };\n    }, []);\n\n    return null;\n};\n\nconst Tab = makeDecoratable(\"Tab\", DecoratableTab);\n\nexport { Tab, type TabProps, type TabItem };\n"],"mappings":"AACA,SAASA,UAAU,EAAEC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AACrD,SAASC,eAAe,EAAEC,UAAU;AACpC,SAASC,WAAW;AAkBpB,MAAMC,cAAc,GAAIC,KAAe,IAAK;EACxC,MAAMC,WAAW,GAAGR,UAAU,CAACK,WAAW,CAAC;EAC3C,MAAMI,KAAK,GAAGP,MAAM,CAACE,UAAU,CAAC,CAAC,CAAC;EAElCH,SAAS,CAAC,MAAM;IACZO,WAAW,CAAEE,MAAM,CAAC;MAAE,GAAGH,KAAK;MAAEI,EAAE,EAAEF,KAAK,CAACG,OAAO;MAAEC,OAAO,EAAEN,KAAK,CAACM,OAAO,IAAI;IAAK,CAAC,CAAC;EACxF,CAAC,EAAE,CAACN,KAAK,CAAC,CAAC;EAEXN,SAAS,CAAC,MAAM;IACZ,OAAO,MAAM;MACT,OAAOO,WAAW,CAAEM,SAAS,CAACL,KAAK,CAACG,OAAO,CAAC;IAChD,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO,IAAI;AACf,CAAC;AAED,MAAMG,GAAG,GAAGZ,eAAe,CAAC,KAAK,EAAEG,cAAc,CAAC;AAElD,SAASS,GAAG","ignoreList":[]}
+{"version":3,"names":["useContext","useEffect","useRef","makeDecoratable","generateId","TabsContext","DecoratableTab","props","tabsContext","idRef","addTab","id","current","visible","removeTab","Tab"],"sources":["Tab.tsx"],"sourcesContent":["import type React from \"react\";\nimport { useContext, useEffect, useRef } from \"react\";\nimport { makeDecoratable, generateId, type VariantProps } from \"~/utils.js\";\nimport { TabsContext } from \"./Context.js\";\nimport type { tabListVariants } from \"./List.js\";\n\ninterface TabProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"children\" | \"content\"> {\n    value: string;\n    trigger: React.ReactNode;\n    content: React.ReactNode;\n    icon?: React.ReactElement;\n    spacing?: VariantProps<typeof tabListVariants>[\"spacing\"];\n    disabled?: boolean;\n    visible?: boolean;\n    \"data-testid\"?: string;\n}\n\ninterface TabItem extends TabProps {\n    id: string;\n}\n\nconst DecoratableTab = (props: TabProps) => {\n    const tabsContext = useContext(TabsContext);\n    const idRef = useRef(generateId());\n\n    useEffect(() => {\n        tabsContext!.addTab({ ...props, id: idRef.current, visible: props.visible ?? true });\n    }, [props]);\n\n    useEffect(() => {\n        return () => {\n            return tabsContext!.removeTab(idRef.current);\n        };\n    }, []);\n\n    return null;\n};\n\nconst Tab = makeDecoratable(\"Tab\", DecoratableTab);\n\nexport { Tab, type TabProps, type TabItem };\n"],"mappings":"AACA,SAASA,UAAU,EAAEC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AACrD,SAASC,eAAe,EAAEC,UAAU;AACpC,SAASC,WAAW;AAkBpB,MAAMC,cAAc,GAAIC,KAAe,IAAK;EACxC,MAAMC,WAAW,GAAGR,UAAU,CAACK,WAAW,CAAC;EAC3C,MAAMI,KAAK,GAAGP,MAAM,CAACE,UAAU,CAAC,CAAC,CAAC;EAElCH,SAAS,CAAC,MAAM;IACZO,WAAW,CAAEE,MAAM,CAAC;MAAE,GAAGH,KAAK;MAAEI,EAAE,EAAEF,KAAK,CAACG,OAAO;MAAEC,OAAO,EAAEN,KAAK,CAACM,OAAO,IAAI;IAAK,CAAC,CAAC;EACxF,CAAC,EAAE,CAACN,KAAK,CAAC,CAAC;EAEXN,SAAS,CAAC,MAAM;IACZ,OAAO,MAAM;MACT,OAAOO,WAAW,CAAEM,SAAS,CAACL,KAAK,CAACG,OAAO,CAAC;IAChD,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO,IAAI;AACf,CAAC;AAED,MAAMG,GAAG,GAAGZ,eAAe,CAAC,KAAK,EAAEG,cAAc,CAAC;AAElD,SAASS,GAAG","ignoreList":[]}

package/Tabs/components/Trigger.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Tabs as TabsPrimitive } from "radix-ui";
-import { type VariantProps } from "../../utils";
+import { type VariantProps } from "../../utils.js";
 declare const tabTriggerVariants: (props?: ({
     size?: "sm" | "md" | "lg" | "xl" | null | undefined;
     visible?: boolean | null | undefined;

package/Tabs/components/Trigger.js

@@ -1,30 +1,30 @@
 import * as React from "react";
 import { Tabs as TabsPrimitive } from "radix-ui";
-import { cn, cva } from "../../utils";
-import { Icon } from "../../Icon";
-const tabTriggerVariants = cva(["wby-group wby-inline-flex wby-items-center wby-justify-center wby-whitespace-nowrap wby-outline-none wby-transition-all", "wby-text-neutral-strong hover:text-neutral-primary", "wby-border-b-md wby-border-transparent wby-border-solid", "data-[state=active]:wby-border-accent-default data-[state=active]:wby-text-neutral-primary", "disabled:wby-pointer-events-none disabled:!wby-text-neutral-disabled disabled:!wby-fill-neutral-disabled disabled:!wby-border-transparent"], {
+import { cn, cva } from "../../utils.js";
+import { Icon } from "../../Icon/index.js";
+const tabTriggerVariants = cva(["group inline-flex items-center justify-center whitespace-nowrap outline-none transition-all", "text-neutral-strong hover:text-neutral-primary", "border-b-md border-transparent border-solid", "data-[state=active]:border-accent-default data-[state=active]:text-neutral-primary", "disabled:pointer-events-none disabled:text-neutral-disabled! disabled:fill-neutral-disabled! disabled:border-transparent!"], {
   variants: {
     size: {
-      sm: "wby-text-sm wby-h-[40px]",
-      md: "wby-text-md wby-h-[48px]",
-      lg: "wby-text-lg wby-h-[56px]",
-      xl: "wby-text-xl wby-h-[64px]"
+      sm: "text-sm h-[40px]",
+      md: "text-md h-xxl",
+      lg: "text-lg h-[56px]",
+      xl: "text-xl h-3xl"
     },
     visible: {
-      false: "wby-hidden"
+      false: "hidden"
     }
   },
   defaultVariants: {
     size: "sm"
   }
 });
-const innerTabTriggerVariants = cva(["wby-inline-flex wby-items-center wby-justify-start wby-gap-xs", "group-hover:wby-bg-neutral-dimmed", "group-focus-visible:wby-ring-lg group-focus-visible:wby-ring-primary-dimmed"], {
+const innerTabTriggerVariants = cva(["inline-flex items-center justify-start gap-xs", "group-hover:bg-neutral-dimmed", "group-focus-visible:ring-lg group-focus-visible:ring-primary-dimmed"], {
   variants: {
     size: {
-      sm: "wby-rounded-sm wby-p-xs",
-      md: "wby-rounded-sm wby-px-xs wby-py-xs-plus",
-      lg: "wby-rounded-sm wby-px-xs-plus wby-py-sm-plus",
-      xl: "wby-rounded-lg wby-px-sm wby-py-sm-plus"
+      sm: "rounded-sm p-xs",
+      md: "rounded-sm px-xs py-xs-plus",
+      lg: "rounded-sm px-xs-plus py-sm-plus",
+      xl: "rounded-lg px-sm py-sm-plus"
     }
   },
   defaultVariants: {

package/Tabs/components/Trigger.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Tabs","TabsPrimitive","cn","cva","Icon","tabTriggerVariants","variants","size","sm","md","lg","xl","visible","false","defaultVariants","innerTabTriggerVariants","Trigger","className","icon","text","props","createElement","Object","assign","label","String","color"],"sources":["Trigger.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Tabs as TabsPrimitive } from \"radix-ui\";\nimport { cn, cva, type VariantProps } from \"~/utils\";\nimport { Icon } from \"~/Icon\";\n\nconst tabTriggerVariants = cva(\n    [\n        \"wby-group wby-inline-flex wby-items-center wby-justify-center wby-whitespace-nowrap wby-outline-none wby-transition-all\",\n        \"wby-text-neutral-strong hover:text-neutral-primary\",\n        \"wby-border-b-md wby-border-transparent wby-border-solid\",\n        \"data-[state=active]:wby-border-accent-default data-[state=active]:wby-text-neutral-primary\",\n        \"disabled:wby-pointer-events-none disabled:!wby-text-neutral-disabled disabled:!wby-fill-neutral-disabled disabled:!wby-border-transparent\"\n    ],\n    {\n        variants: {\n            size: {\n                sm: \"wby-text-sm wby-h-[40px]\",\n                md: \"wby-text-md wby-h-[48px]\",\n                lg: \"wby-text-lg wby-h-[56px]\",\n                xl: \"wby-text-xl wby-h-[64px]\"\n            },\n            visible: {\n                false: \"wby-hidden\"\n            }\n        },\n        defaultVariants: {\n            size: \"sm\"\n        }\n    }\n);\n\nconst innerTabTriggerVariants = cva(\n    [\n        \"wby-inline-flex wby-items-center wby-justify-start wby-gap-xs\",\n        \"group-hover:wby-bg-neutral-dimmed\",\n        \"group-focus-visible:wby-ring-lg group-focus-visible:wby-ring-primary-dimmed\"\n    ],\n    {\n        variants: {\n            size: {\n                sm: \"wby-rounded-sm wby-p-xs\",\n                md: \"wby-rounded-sm wby-px-xs wby-py-xs-plus\",\n                lg: \"wby-rounded-sm wby-px-xs-plus wby-py-sm-plus\",\n                xl: \"wby-rounded-lg wby-px-sm wby-py-sm-plus\"\n            }\n        },\n        defaultVariants: {\n            size: \"sm\"\n        }\n    }\n);\n\ntype TriggerProps = Omit<TabsPrimitive.TabsTriggerProps, \"children\"> &\n    VariantProps<typeof tabTriggerVariants> & {\n        text: React.ReactNode;\n        icon?: React.ReactElement;\n        \"data-testid\"?: string;\n    };\n\nconst Trigger = ({ className, size, icon, text, visible, ...props }: TriggerProps) => (\n    <TabsPrimitive.Trigger\n        className={cn(tabTriggerVariants({ size, visible }), className)}\n        {...props}\n    >\n        <div className={cn(innerTabTriggerVariants({ size }))}>\n            {icon && <Icon icon={icon} size={\"sm\"} label={String(text)} color={\"neutral-light\"} />}\n            {text}\n        </div>\n    </TabsPrimitive.Trigger>\n);\n\nexport { Trigger, type TriggerProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,IAAI,IAAIC,aAAa,QAAQ,UAAU;AAChD,SAASC,EAAE,EAAEC,GAAG;AAChB,SAASC,IAAI;AAEb,MAAMC,kBAAkB,GAAGF,GAAG,CAC1B,CACI,yHAAyH,EACzH,oDAAoD,EACpD,yDAAyD,EACzD,4FAA4F,EAC5F,2IAA2I,CAC9I,EACD;EACIG,QAAQ,EAAE;IACNC,IAAI,EAAE;MACFC,EAAE,EAAE,0BAA0B;MAC9BC,EAAE,EAAE,0BAA0B;MAC9BC,EAAE,EAAE,0BAA0B;MAC9BC,EAAE,EAAE;IACR,CAAC;IACDC,OAAO,EAAE;MACLC,KAAK,EAAE;IACX;EACJ,CAAC;EACDC,eAAe,EAAE;IACbP,IAAI,EAAE;EACV;AACJ,CACJ,CAAC;AAED,MAAMQ,uBAAuB,GAAGZ,GAAG,CAC/B,CACI,+DAA+D,EAC/D,mCAAmC,EACnC,6EAA6E,CAChF,EACD;EACIG,QAAQ,EAAE;IACNC,IAAI,EAAE;MACFC,EAAE,EAAE,yBAAyB;MAC7BC,EAAE,EAAE,yCAAyC;MAC7CC,EAAE,EAAE,8CAA8C;MAClDC,EAAE,EAAE;IACR;EACJ,CAAC;EACDG,eAAe,EAAE;IACbP,IAAI,EAAE;EACV;AACJ,CACJ,CAAC;AASD,MAAMS,OAAO,GAAGA,CAAC;EAAEC,SAAS;EAAEV,IAAI;EAAEW,IAAI;EAAEC,IAAI;EAAEP,OAAO;EAAE,GAAGQ;AAAoB,CAAC,kBAC7ErB,KAAA,CAAAsB,aAAA,CAACpB,aAAa,CAACe,OAAO,EAAAM,MAAA,CAAAC,MAAA;EAClBN,SAAS,EAAEf,EAAE,CAACG,kBAAkB,CAAC;IAAEE,IAAI;IAAEK;EAAQ,CAAC,CAAC,EAAEK,SAAS;AAAE,GAC5DG,KAAK,gBAETrB,KAAA,CAAAsB,aAAA;EAAKJ,SAAS,EAAEf,EAAE,CAACa,uBAAuB,CAAC;IAAER;EAAK,CAAC,CAAC;AAAE,GACjDW,IAAI,iBAAInB,KAAA,CAAAsB,aAAA,CAACjB,IAAI;EAACc,IAAI,EAAEA,IAAK;EAACX,IAAI,EAAE,IAAK;EAACiB,KAAK,EAAEC,MAAM,CAACN,IAAI,CAAE;EAACO,KAAK,EAAE;AAAgB,CAAE,CAAC,EACrFP,IACA,CACc,CAC1B;AAED,SAASH,OAAO","ignoreList":[]}
+{"version":3,"names":["React","Tabs","TabsPrimitive","cn","cva","Icon","tabTriggerVariants","variants","size","sm","md","lg","xl","visible","false","defaultVariants","innerTabTriggerVariants","Trigger","className","icon","text","props","createElement","Object","assign","label","String","color"],"sources":["Trigger.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Tabs as TabsPrimitive } from \"radix-ui\";\nimport { cn, cva, type VariantProps } from \"~/utils.js\";\nimport { Icon } from \"~/Icon/index.js\";\n\nconst tabTriggerVariants = cva(\n    [\n        \"group inline-flex items-center justify-center whitespace-nowrap outline-none transition-all\",\n        \"text-neutral-strong hover:text-neutral-primary\",\n        \"border-b-md border-transparent border-solid\",\n        \"data-[state=active]:border-accent-default data-[state=active]:text-neutral-primary\",\n        \"disabled:pointer-events-none disabled:text-neutral-disabled! disabled:fill-neutral-disabled! disabled:border-transparent!\"\n    ],\n    {\n        variants: {\n            size: {\n                sm: \"text-sm h-[40px]\",\n                md: \"text-md h-xxl\",\n                lg: \"text-lg h-[56px]\",\n                xl: \"text-xl h-3xl\"\n            },\n            visible: {\n                false: \"hidden\"\n            }\n        },\n        defaultVariants: {\n            size: \"sm\"\n        }\n    }\n);\n\nconst innerTabTriggerVariants = cva(\n    [\n        \"inline-flex items-center justify-start gap-xs\",\n        \"group-hover:bg-neutral-dimmed\",\n        \"group-focus-visible:ring-lg group-focus-visible:ring-primary-dimmed\"\n    ],\n    {\n        variants: {\n            size: {\n                sm: \"rounded-sm p-xs\",\n                md: \"rounded-sm px-xs py-xs-plus\",\n                lg: \"rounded-sm px-xs-plus py-sm-plus\",\n                xl: \"rounded-lg px-sm py-sm-plus\"\n            }\n        },\n        defaultVariants: {\n            size: \"sm\"\n        }\n    }\n);\n\ntype TriggerProps = Omit<TabsPrimitive.TabsTriggerProps, \"children\"> &\n    VariantProps<typeof tabTriggerVariants> & {\n        text: React.ReactNode;\n        icon?: React.ReactElement;\n        \"data-testid\"?: string;\n    };\n\nconst Trigger = ({ className, size, icon, text, visible, ...props }: TriggerProps) => (\n    <TabsPrimitive.Trigger\n        className={cn(tabTriggerVariants({ size, visible }), className)}\n        {...props}\n    >\n        <div className={cn(innerTabTriggerVariants({ size }))}>\n            {icon && <Icon icon={icon} size={\"sm\"} label={String(text)} color={\"neutral-light\"} />}\n            {text}\n        </div>\n    </TabsPrimitive.Trigger>\n);\n\nexport { Trigger, type TriggerProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,IAAI,IAAIC,aAAa,QAAQ,UAAU;AAChD,SAASC,EAAE,EAAEC,GAAG;AAChB,SAASC,IAAI;AAEb,MAAMC,kBAAkB,GAAGF,GAAG,CAC1B,CACI,6FAA6F,EAC7F,gDAAgD,EAChD,6CAA6C,EAC7C,oFAAoF,EACpF,2HAA2H,CAC9H,EACD;EACIG,QAAQ,EAAE;IACNC,IAAI,EAAE;MACFC,EAAE,EAAE,kBAAkB;MACtBC,EAAE,EAAE,eAAe;MACnBC,EAAE,EAAE,kBAAkB;MACtBC,EAAE,EAAE;IACR,CAAC;IACDC,OAAO,EAAE;MACLC,KAAK,EAAE;IACX;EACJ,CAAC;EACDC,eAAe,EAAE;IACbP,IAAI,EAAE;EACV;AACJ,CACJ,CAAC;AAED,MAAMQ,uBAAuB,GAAGZ,GAAG,CAC/B,CACI,+CAA+C,EAC/C,+BAA+B,EAC/B,qEAAqE,CACxE,EACD;EACIG,QAAQ,EAAE;IACNC,IAAI,EAAE;MACFC,EAAE,EAAE,iBAAiB;MACrBC,EAAE,EAAE,6BAA6B;MACjCC,EAAE,EAAE,kCAAkC;MACtCC,EAAE,EAAE;IACR;EACJ,CAAC;EACDG,eAAe,EAAE;IACbP,IAAI,EAAE;EACV;AACJ,CACJ,CAAC;AASD,MAAMS,OAAO,GAAGA,CAAC;EAAEC,SAAS;EAAEV,IAAI;EAAEW,IAAI;EAAEC,IAAI;EAAEP,OAAO;EAAE,GAAGQ;AAAoB,CAAC,kBAC7ErB,KAAA,CAAAsB,aAAA,CAACpB,aAAa,CAACe,OAAO,EAAAM,MAAA,CAAAC,MAAA;EAClBN,SAAS,EAAEf,EAAE,CAACG,kBAAkB,CAAC;IAAEE,IAAI;IAAEK;EAAQ,CAAC,CAAC,EAAEK,SAAS;AAAE,GAC5DG,KAAK,gBAETrB,KAAA,CAAAsB,aAAA;EAAKJ,SAAS,EAAEf,EAAE,CAACa,uBAAuB,CAAC;IAAER;EAAK,CAAC,CAAC;AAAE,GACjDW,IAAI,iBAAInB,KAAA,CAAAsB,aAAA,CAACjB,IAAI;EAACc,IAAI,EAAEA,IAAK;EAACX,IAAI,EAAE,IAAK;EAACiB,KAAK,EAAEC,MAAM,CAACN,IAAI,CAAE;EAACO,KAAK,EAAE;AAAgB,CAAE,CAAC,EACrFP,IACA,CACc,CAC1B;AAED,SAASH,OAAO","ignoreList":[]}

package/Tabs/components/index.d.ts

@@ -1,5 +1,5 @@
-export * from "./Content";
-export * from "./Context";
-export * from "./List";
-export * from "./Tab";
-export * from "./Trigger";
+export * from "./Content.js";
+export * from "./Context.js";
+export * from "./List.js";
+export * from "./Tab.js";
+export * from "./Trigger.js";

package/Tabs/components/index.js

@@ -1,7 +1,7 @@
-export * from "./Content";
-export * from "./Context";
-export * from "./List";
-export * from "./Tab";
-export * from "./Trigger";
+export * from "./Content.js";
+export * from "./Context.js";
+export * from "./List.js";
+export * from "./Tab.js";
+export * from "./Trigger.js";
 
 //# sourceMappingURL=index.js.map

package/Tabs/components/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Content\";\nexport * from \"./Context\";\nexport * from \"./List\";\nexport * from \"./Tab\";\nexport * from \"./Trigger\";\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA","ignoreList":[]}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Content.js\";\nexport * from \"./Context.js\";\nexport * from \"./List.js\";\nexport * from \"./Tab.js\";\nexport * from \"./Trigger.js\";\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA","ignoreList":[]}

package/Tabs/index.d.ts

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

package/Tabs/index.js

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

package/Tabs/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Tabs\";\n"],"mappings":"AAAA","ignoreList":[]}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Tabs.js\";\n"],"mappings":"AAAA","ignoreList":[]}

package/Tag/Tag.d.ts

@@ -1,33 +1,36 @@
 import * as React from "react";
-import { type VariantProps } from "../utils";
+import { type VariantProps } from "../utils.js";
 declare const tagVariants: (props?: ({
     isInteractive?: boolean | null | undefined;
     isDismissible?: boolean | null | undefined;
     isDisabled?: boolean | null | undefined;
     variant?: "accent" | "neutral-light" | "neutral-strong" | "neutral-base" | "success" | "warning" | "neutral-base-outline" | "neutral-muted" | "neutral-xstrong" | "neutral-dark" | "accent-light" | "success-light" | "destructive" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/dist/types.js").ClassProp) | undefined) => string;
 export interface TagProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children" | "content">, VariantProps<typeof tagVariants> {
     content: React.ReactNode;
     onDismiss?: (event: React.SyntheticEvent<HTMLSpanElement>) => void;
     dismissIconElement?: React.ReactElement;
     dismissIconLabel?: string;
+    swatchColor?: string;
+    swatchColorIcon?: boolean;
+    icon?: React.ReactElement | null;
     disabled?: boolean;
 }
-declare const Tag: (({ className, variant, content, onClick, onDismiss, dismissIconElement, dismissIconLabel, disabled, ...props }: TagProps) => React.JSX.Element) & {
-    original: ({ className, variant, content, onClick, onDismiss, dismissIconElement, dismissIconLabel, disabled, ...props }: TagProps) => React.JSX.Element;
+declare const Tag: ((props: TagProps) => React.JSX.Element) & {
+    original: (props: TagProps) => React.JSX.Element;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ className, variant, content, onClick, onDismiss, dismissIconElement, dismissIconLabel, disabled, ...props }: TagProps) => React.JSX.Element) & {
-        original: ({ className, variant, content, onClick, onDismiss, dismissIconElement, dismissIconLabel, disabled, ...props }: TagProps) => React.JSX.Element;
+    original: ((props: TagProps) => React.JSX.Element) & {
+        original: (props: TagProps) => React.JSX.Element;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ className, variant, content, onClick, onDismiss, dismissIconElement, dismissIconLabel, disabled, ...props }: TagProps) => React.JSX.Element) & {
-        original: ({ className, variant, content, onClick, onDismiss, dismissIconElement, dismissIconLabel, disabled, ...props }: TagProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: TagProps) => React.JSX.Element) & {
+        original: (props: TagProps) => React.JSX.Element;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/Tag/Tag.js

@@ -1,51 +1,55 @@
 import * as React from "react";
 import { ReactComponent as Close } from "@webiny/icons/close.svg";
-import { cn, cva, makeDecoratable } from "../utils";
-import { Icon } from "../Icon";
-import { IconButton } from "../Button";
-const tagVariants = cva(["wby-inline-flex wby-items-center wby-gap-xxs wby-rounded-sm wby-text-sm wby-text-regular wby-transition-colors wby-overflow-hidden", "focus:outline-none"], {
+import { cn, cva, makeDecoratable, omit } from "../utils.js";
+import { Icon } from "../Icon/index.js";
+import { IconButton } from "../Button/index.js";
+import { TagPropsProvider } from "./TagPropsProvider.js";
+import { TagSwatchBox } from "./TagSwatchBox.js";
+import { TagIcon } from "./TagIcon.js";
+const tagVariants = cva(["inline-flex items-center gap-xxs rounded-sm text-sm text-regular transition-colors overflow-hidden", "focus:outline-none"], {
   variants: {
     isInteractive: {
-      true: "wby-cursor-pointer"
+      true: "cursor-pointer"
     },
     isDismissible: {
-      true: "wby-pl-xs-plus wby-pt-xxs wby-pb-xxs wby-pr-xs",
-      false: "wby-px-xs-plus wby-py-xxs"
+      true: "pl-xs-plus pt-xxs pb-xxs pr-xs",
+      false: "px-xs-plus py-xxs"
     },
     isDisabled: {
-      true: "wby-cursor-not-allowed wby-pointer-events-none"
+      true: "cursor-not-allowed pointer-events-none"
     },
     variant: {
-      "neutral-base": ["wby-bg-transparent wby-text-neutral-primary", "hover:wby-bg-neutral-light", "aria-disabled:wby-bg-transparent aria-disabled:wby-text-neutral-disabled"],
-      "neutral-base-outline": ["wby-border-sm wby-border-solid wby-px-[calc(theme(padding.xs-plus)-theme(borderWidth.sm))] wby-py-[calc(theme(padding.xxs)-theme(borderWidth.sm))]", "wby-bg-transparent wby-border-neutral-muted wby-text-neutral-primary", "hover:wby-bg-neutral-light", "aria-disabled:wby-bg-transparent aria-disabled:wby-border-neutral-dimmed aria-disabled:wby-text-neutral-disabled"],
-      "neutral-light": ["wby-bg-neutral-light wby-text-neutral-primary", "hover:wby-bg-neutral-muted", "aria-disabled:wby-bg-neutral-light aria-disabled:wby-text-neutral-muted"],
-      "neutral-muted": ["wby-bg-neutral-muted wby-text-neutral-primary", "hover:wby-bg-neutral-strong", "aria-disabled:wby-bg-neutral-muted aria-disabled:wby-text-neutral-muted"],
-      "neutral-strong": ["wby-bg-neutral-strong wby-text-neutral-light", "hover:wby-bg-neutral-xstrong", "aria-disabled:wby-bg-neutral-muted"],
-      "neutral-xstrong": ["wby-bg-neutral-xstrong wby-text-neutral-light", "hover:wby-bg-neutral-dark", "aria-disabled:wby-bg-neutral-strong"],
-      "neutral-dark": ["wby-bg-neutral-dark wby-text-neutral-light", "hover:wby-bg-neutral-xstrong", "aria-disabled:wby-bg-neutral-strong"],
-      accent: ["wby-bg-primary-default wby-text-neutral-light", "hover:wby-bg-primary-strong", "aria-disabled:wby-bg-primary-disabled"],
-      "accent-light": ["wby-bg-primary-subtle wby-text-neutral-primary", "hover:wby-bg-primary-muted", "aria-disabled:wby-bg-primary-subtle aria-disabled:wby-text-neutral-muted"],
-      success: ["wby-bg-success-default wby-text-neutral-light", "hover:wby-bg-success-strong", "aria-disabled:wby-bg-success-disabled"],
-      "success-light": ["wby-bg-success-subtle wby-text-neutral-primary", "hover:wby-bg-success-muted", "aria-disabled:wby-bg-success-subtle aria-disabled:wby-text-neutral-muted"],
-      warning: ["wby-bg-warning-muted wby-text-neutral-primary", "hover:wby-bg-warning-default", "aria-disabled:wby-bg-warning-disabled aria-disabled:wby-text-neutral-disabled"],
-      destructive: ["wby-bg-destructive-default wby-text-neutral-light", "hover:wby-bg-destructive-strong", "aria-disabled:wby-bg-destructive-disabled"]
+      "neutral-base": ["bg-transparent text-neutral-primary", "hover:bg-neutral-light", "aria-disabled:bg-transparent aria-disabled:text-neutral-disabled"],
+      "neutral-base-outline": ["border-sm border-solid px-[calc(var(--padding-xs-plus)-(var(--border-width-sm)))] py-[calc(var(--padding-xxs)-(var(--border-width-sm)))]", "bg-neutral-base border-neutral-muted text-neutral-primary", "hover:bg-neutral-light", "aria-disabled:bg-transparent aria-disabled:border-neutral-dimmed aria-disabled:text-neutral-disabled"],
+      "neutral-light": ["bg-neutral-light text-neutral-primary", "hover:bg-neutral-muted", "aria-disabled:bg-neutral-light aria-disabled:text-neutral-muted"],
+      "neutral-muted": ["bg-neutral-muted text-neutral-primary", "hover:bg-neutral-strong", "aria-disabled:bg-neutral-muted aria-disabled:text-neutral-muted"],
+      "neutral-strong": ["bg-neutral-strong text-neutral-light", "hover:bg-neutral-xstrong", "aria-disabled:bg-neutral-muted"],
+      "neutral-xstrong": ["bg-neutral-xstrong text-neutral-light", "hover:bg-neutral-dark", "aria-disabled:bg-neutral-strong"],
+      "neutral-dark": ["bg-neutral-dark text-neutral-light", "hover:bg-neutral-xstrong", "aria-disabled:bg-neutral-strong"],
+      accent: ["bg-primary text-neutral-light", "hover:bg-primary-strong", "aria-disabled:bg-primary-disabled"],
+      "accent-light": ["bg-primary-subtle text-neutral-primary", "hover:bg-primary-muted", "aria-disabled:bg-primary-subtle aria-disabled:text-neutral-muted"],
+      success: ["bg-success text-neutral-light", "hover:bg-success-strong", "aria-disabled:bg-success-disabled"],
+      "success-light": ["bg-success-subtle text-neutral-primary", "hover:bg-success-muted", "aria-disabled:bg-success-subtle aria-disabled:text-neutral-muted"],
+      warning: ["bg-warning-muted text-neutral-primary", "hover:bg-warning", "aria-disabled:bg-warning-disabled aria-disabled:text-neutral-disabled"],
+      destructive: ["bg-destructive text-neutral-light", "hover:bg-destructive-strong", "aria-disabled:bg-destructive-disabled"]
     }
   },
   defaultVariants: {
     variant: "neutral-base"
   }
 });
-const DecoratableTag = ({
-  className,
-  variant,
-  content,
-  onClick,
-  onDismiss,
-  dismissIconElement = /*#__PURE__*/React.createElement(Close, null),
-  dismissIconLabel = "Close",
-  disabled,
-  ...props
-}) => {
+const DecoratableTag = props => {
+  const {
+    className,
+    variant,
+    content,
+    onClick,
+    onDismiss,
+    dismissIconElement = /*#__PURE__*/React.createElement(Close, null),
+    dismissIconLabel = "Close",
+    disabled,
+    ...rootProps
+  } = omit(props, ["icon", "swatchColor", "swatchColorIcon"]);
   const dismissButtonVariant = React.useMemo(() => {
     if (variant && ["neutral-strong", "neutral-xstrong", "neutral-dark", "success", "accent", "destructive"].includes(variant)) {
       return "ghost-negative";
@@ -61,7 +65,9 @@ const DecoratableTag = ({
     }
     return "neutral-strong-transparent";
   }, [variant]);
-  return /*#__PURE__*/React.createElement("span", Object.assign({}, props, {
+  return /*#__PURE__*/React.createElement(TagPropsProvider, {
+    props: props
+  }, /*#__PURE__*/React.createElement("span", Object.assign({}, rootProps, {
     onClick: onClick,
     className: cn(tagVariants({
       variant,
@@ -70,8 +76,8 @@ const DecoratableTag = ({
       isDisabled: Boolean(disabled)
     }), className),
     "aria-disabled": disabled
-  }), /*#__PURE__*/React.createElement("span", {
-    className: "wby-overflow-hidden wby-truncate wby-whitespace-nowrap"
+  }), /*#__PURE__*/React.createElement(TagSwatchBox, null), /*#__PURE__*/React.createElement(TagIcon, null), /*#__PURE__*/React.createElement("span", {
+    className: "overflow-hidden truncate whitespace-nowrap"
   }, content), onDismiss && /*#__PURE__*/React.createElement(IconButton, {
     icon: /*#__PURE__*/React.createElement(Icon, {
       icon: dismissIconElement,
@@ -86,7 +92,7 @@ const DecoratableTag = ({
       event.stopPropagation();
       onDismiss(event);
     }
-  }));
+  })));
 };
 const Tag = makeDecoratable("Tag", DecoratableTag);
 export { Tag };