@webiny/admin-ui 0.0.0-unstable.e53eceafb5 → 0.0.0-unstable.e6f0dc8ca7

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", "h-[20px]"], {
   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 };

package/Tag/Tag.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","ReactComponent","Close","cn","cva","makeDecoratable","Icon","IconButton","tagVariants","variants","isInteractive","true","isDismissible","false","isDisabled","variant","accent","success","warning","destructive","defaultVariants","DecoratableTag","className","content","onClick","onDismiss","dismissIconElement","createElement","dismissIconLabel","disabled","props","dismissButtonVariant","useMemo","includes","dismissIconColor","Object","assign","Boolean","icon","label","color","size","event","stopPropagation","Tag"],"sources":["Tag.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { ReactComponent as Close } from \"@webiny/icons/close.svg\";\nimport { cn, cva, makeDecoratable, type VariantProps } from \"~/utils\";\nimport { Icon, type IconProps } from \"~/Icon\";\nimport type { iconButtonVariants } from \"~/Button\";\nimport { IconButton } from \"~/Button\";\n\nconst tagVariants = cva(\n    [\n        \"wby-inline-flex wby-items-center wby-gap-xxs wby-rounded-sm wby-text-sm wby-text-regular wby-transition-colors wby-overflow-hidden\",\n        \"focus:outline-none\"\n    ],\n    {\n        variants: {\n            isInteractive: {\n                true: \"wby-cursor-pointer\"\n            },\n            isDismissible: {\n                true: \"wby-pl-xs-plus wby-pt-xxs wby-pb-xxs wby-pr-xs\",\n                false: \"wby-px-xs-plus wby-py-xxs\"\n            },\n            isDisabled: {\n                true: \"wby-cursor-not-allowed wby-pointer-events-none\"\n            },\n            variant: {\n                \"neutral-base\": [\n                    \"wby-bg-transparent wby-text-neutral-primary\",\n                    \"hover:wby-bg-neutral-light\",\n                    \"aria-disabled:wby-bg-transparent aria-disabled:wby-text-neutral-disabled\"\n                ],\n                \"neutral-base-outline\": [\n                    \"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))]\",\n                    \"wby-bg-transparent wby-border-neutral-muted wby-text-neutral-primary\",\n                    \"hover:wby-bg-neutral-light\",\n                    \"aria-disabled:wby-bg-transparent aria-disabled:wby-border-neutral-dimmed aria-disabled:wby-text-neutral-disabled\"\n                ],\n                \"neutral-light\": [\n                    \"wby-bg-neutral-light wby-text-neutral-primary\",\n                    \"hover:wby-bg-neutral-muted\",\n                    \"aria-disabled:wby-bg-neutral-light aria-disabled:wby-text-neutral-muted\"\n                ],\n                \"neutral-muted\": [\n                    \"wby-bg-neutral-muted wby-text-neutral-primary\",\n                    \"hover:wby-bg-neutral-strong\",\n                    \"aria-disabled:wby-bg-neutral-muted aria-disabled:wby-text-neutral-muted\"\n                ],\n                \"neutral-strong\": [\n                    \"wby-bg-neutral-strong wby-text-neutral-light\",\n                    \"hover:wby-bg-neutral-xstrong\",\n                    \"aria-disabled:wby-bg-neutral-muted\"\n                ],\n                \"neutral-xstrong\": [\n                    \"wby-bg-neutral-xstrong wby-text-neutral-light\",\n                    \"hover:wby-bg-neutral-dark\",\n                    \"aria-disabled:wby-bg-neutral-strong\"\n                ],\n                \"neutral-dark\": [\n                    \"wby-bg-neutral-dark wby-text-neutral-light\",\n                    \"hover:wby-bg-neutral-xstrong\",\n                    \"aria-disabled:wby-bg-neutral-strong\"\n                ],\n                accent: [\n                    \"wby-bg-primary-default wby-text-neutral-light\",\n                    \"hover:wby-bg-primary-strong\",\n                    \"aria-disabled:wby-bg-primary-disabled\"\n                ],\n                \"accent-light\": [\n                    \"wby-bg-primary-subtle wby-text-neutral-primary\",\n                    \"hover:wby-bg-primary-muted\",\n                    \"aria-disabled:wby-bg-primary-subtle aria-disabled:wby-text-neutral-muted\"\n                ],\n                success: [\n                    \"wby-bg-success-default wby-text-neutral-light\",\n                    \"hover:wby-bg-success-strong\",\n                    \"aria-disabled:wby-bg-success-disabled\"\n                ],\n                \"success-light\": [\n                    \"wby-bg-success-subtle wby-text-neutral-primary\",\n                    \"hover:wby-bg-success-muted\",\n                    \"aria-disabled:wby-bg-success-subtle aria-disabled:wby-text-neutral-muted\"\n                ],\n                warning: [\n                    \"wby-bg-warning-muted wby-text-neutral-primary\",\n                    \"hover:wby-bg-warning-default\",\n                    \"aria-disabled:wby-bg-warning-disabled aria-disabled:wby-text-neutral-disabled\"\n                ],\n                destructive: [\n                    \"wby-bg-destructive-default wby-text-neutral-light\",\n                    \"hover:wby-bg-destructive-strong\",\n                    \"aria-disabled:wby-bg-destructive-disabled\"\n                ]\n            }\n        },\n        defaultVariants: {\n            variant: \"neutral-base\"\n        }\n    }\n);\n\nexport interface TagProps\n    extends Omit<React.HTMLAttributes<HTMLSpanElement>, \"children\" | \"content\">,\n        VariantProps<typeof tagVariants> {\n    content: React.ReactNode;\n    onDismiss?: (event: React.SyntheticEvent<HTMLSpanElement>) => void;\n    dismissIconElement?: React.ReactElement;\n    dismissIconLabel?: string;\n    disabled?: boolean;\n}\n\nconst DecoratableTag = ({\n    className,\n    variant,\n    content,\n    onClick,\n    onDismiss,\n    dismissIconElement = <Close />,\n    dismissIconLabel = \"Close\",\n    disabled,\n    ...props\n}: TagProps) => {\n    const dismissButtonVariant = React.useMemo((): VariantProps<\n        typeof iconButtonVariants\n    >[\"variant\"] => {\n        if (\n            variant &&\n            [\n                \"neutral-strong\",\n                \"neutral-xstrong\",\n                \"neutral-dark\",\n                \"success\",\n                \"accent\",\n                \"destructive\"\n            ].includes(variant)\n        ) {\n            return \"ghost-negative\";\n        }\n\n        return \"ghost\";\n    }, [variant]);\n\n    const dismissIconColor: IconProps[\"color\"] = React.useMemo(() => {\n        if (\n            variant &&\n            [\n                \"neutral-strong\",\n                \"neutral-xstrong\",\n                \"neutral-dark\",\n                \"accent\",\n                \"success\",\n                \"destructive\"\n            ].includes(variant)\n        ) {\n            return \"neutral-negative\";\n        }\n\n        if (variant && [\"warning\"].includes(variant)) {\n            return \"neutral-strong\";\n        }\n\n        return \"neutral-strong-transparent\";\n    }, [variant]);\n\n    return (\n        <span\n            {...props}\n            onClick={onClick}\n            className={cn(\n                tagVariants({\n                    variant,\n                    isDismissible: Boolean(onDismiss),\n                    isInteractive: Boolean(onClick),\n                    isDisabled: Boolean(disabled)\n                }),\n                className\n            )}\n            aria-disabled={disabled}\n        >\n            <span className={\"wby-overflow-hidden wby-truncate wby-whitespace-nowrap\"}>\n                {content}\n            </span>\n            {onDismiss && (\n                <IconButton\n                    icon={\n                        <Icon\n                            icon={dismissIconElement}\n                            label={dismissIconLabel}\n                            color={dismissIconColor}\n                            size={\"sm\"}\n                        />\n                    }\n                    size={\"xxs\"}\n                    variant={dismissButtonVariant}\n                    disabled={disabled}\n                    onClick={event => {\n                        event.stopPropagation();\n                        onDismiss(event);\n                    }}\n                />\n            )}\n        </span>\n    );\n};\nconst Tag = makeDecoratable(\"Tag\", DecoratableTag);\n\nexport { Tag };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","ReactComponent","Close","cn","cva","makeDecoratable","omit","Icon","IconButton","TagPropsProvider","TagSwatchBox","TagIcon","tagVariants","variants","isInteractive","true","isDismissible","false","isDisabled","variant","accent","success","warning","destructive","defaultVariants","DecoratableTag","props","className","content","onClick","onDismiss","dismissIconElement","createElement","dismissIconLabel","disabled","rootProps","dismissButtonVariant","useMemo","includes","dismissIconColor","Object","assign","Boolean","icon","label","color","size","event","stopPropagation","Tag"],"sources":["Tag.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { ReactComponent as Close } from \"@webiny/icons/close.svg\";\nimport { cn, cva, makeDecoratable, omit, type VariantProps } from \"~/utils.js\";\nimport { Icon, type IconProps } from \"~/Icon/index.js\";\nimport type { iconButtonVariants } from \"~/Button/index.js\";\nimport { IconButton } from \"~/Button/index.js\";\nimport { TagPropsProvider } from \"~/Tag/TagPropsProvider.js\";\nimport { TagSwatchBox } from \"./TagSwatchBox.js\";\nimport { TagIcon } from \"./TagIcon.js\";\n\nconst tagVariants = cva(\n    [\n        \"inline-flex items-center gap-xxs rounded-sm text-sm text-regular transition-colors overflow-hidden\",\n        \"focus:outline-none\",\n        \"h-[20px]\"\n    ],\n    {\n        variants: {\n            isInteractive: {\n                true: \"cursor-pointer\"\n            },\n            isDismissible: {\n                true: \"pl-xs-plus pt-xxs pb-xxs pr-xs\",\n                false: \"px-xs-plus py-xxs\"\n            },\n            isDisabled: {\n                true: \"cursor-not-allowed pointer-events-none\"\n            },\n            variant: {\n                \"neutral-base\": [\n                    \"bg-transparent text-neutral-primary\",\n                    \"hover:bg-neutral-light\",\n                    \"aria-disabled:bg-transparent aria-disabled:text-neutral-disabled\"\n                ],\n                \"neutral-base-outline\": [\n                    \"border-sm border-solid px-[calc(var(--padding-xs-plus)-(var(--border-width-sm)))] py-[calc(var(--padding-xxs)-(var(--border-width-sm)))]\",\n                    \"bg-neutral-base border-neutral-muted text-neutral-primary\",\n                    \"hover:bg-neutral-light\",\n                    \"aria-disabled:bg-transparent aria-disabled:border-neutral-dimmed aria-disabled:text-neutral-disabled\"\n                ],\n                \"neutral-light\": [\n                    \"bg-neutral-light text-neutral-primary\",\n                    \"hover:bg-neutral-muted\",\n                    \"aria-disabled:bg-neutral-light aria-disabled:text-neutral-muted\"\n                ],\n                \"neutral-muted\": [\n                    \"bg-neutral-muted text-neutral-primary\",\n                    \"hover:bg-neutral-strong\",\n                    \"aria-disabled:bg-neutral-muted aria-disabled:text-neutral-muted\"\n                ],\n                \"neutral-strong\": [\n                    \"bg-neutral-strong text-neutral-light\",\n                    \"hover:bg-neutral-xstrong\",\n                    \"aria-disabled:bg-neutral-muted\"\n                ],\n                \"neutral-xstrong\": [\n                    \"bg-neutral-xstrong text-neutral-light\",\n                    \"hover:bg-neutral-dark\",\n                    \"aria-disabled:bg-neutral-strong\"\n                ],\n                \"neutral-dark\": [\n                    \"bg-neutral-dark text-neutral-light\",\n                    \"hover:bg-neutral-xstrong\",\n                    \"aria-disabled:bg-neutral-strong\"\n                ],\n                accent: [\n                    \"bg-primary text-neutral-light\",\n                    \"hover:bg-primary-strong\",\n                    \"aria-disabled:bg-primary-disabled\"\n                ],\n                \"accent-light\": [\n                    \"bg-primary-subtle text-neutral-primary\",\n                    \"hover:bg-primary-muted\",\n                    \"aria-disabled:bg-primary-subtle aria-disabled:text-neutral-muted\"\n                ],\n                success: [\n                    \"bg-success text-neutral-light\",\n                    \"hover:bg-success-strong\",\n                    \"aria-disabled:bg-success-disabled\"\n                ],\n                \"success-light\": [\n                    \"bg-success-subtle text-neutral-primary\",\n                    \"hover:bg-success-muted\",\n                    \"aria-disabled:bg-success-subtle aria-disabled:text-neutral-muted\"\n                ],\n                warning: [\n                    \"bg-warning-muted text-neutral-primary\",\n                    \"hover:bg-warning\",\n                    \"aria-disabled:bg-warning-disabled aria-disabled:text-neutral-disabled\"\n                ],\n                destructive: [\n                    \"bg-destructive text-neutral-light\",\n                    \"hover:bg-destructive-strong\",\n                    \"aria-disabled:bg-destructive-disabled\"\n                ]\n            }\n        },\n        defaultVariants: {\n            variant: \"neutral-base\"\n        }\n    }\n);\n\nexport interface TagProps\n    extends\n        Omit<React.HTMLAttributes<HTMLSpanElement>, \"children\" | \"content\">,\n        VariantProps<typeof tagVariants> {\n    content: React.ReactNode;\n    onDismiss?: (event: React.SyntheticEvent<HTMLSpanElement>) => void;\n    dismissIconElement?: React.ReactElement;\n    dismissIconLabel?: string;\n    swatchColor?: string;\n    swatchColorIcon?: boolean;\n    icon?: React.ReactElement | null;\n    disabled?: boolean;\n}\n\nconst DecoratableTag = (props: TagProps) => {\n    const {\n        className,\n        variant,\n        content,\n        onClick,\n        onDismiss,\n        dismissIconElement = <Close />,\n        dismissIconLabel = \"Close\",\n        disabled,\n        ...rootProps\n    } = omit(props, [\"icon\", \"swatchColor\", \"swatchColorIcon\"]);\n\n    const dismissButtonVariant = React.useMemo((): VariantProps<\n        typeof iconButtonVariants\n    >[\"variant\"] => {\n        if (\n            variant &&\n            [\n                \"neutral-strong\",\n                \"neutral-xstrong\",\n                \"neutral-dark\",\n                \"success\",\n                \"accent\",\n                \"destructive\"\n            ].includes(variant)\n        ) {\n            return \"ghost-negative\";\n        }\n\n        return \"ghost\";\n    }, [variant]);\n\n    const dismissIconColor: IconProps[\"color\"] = React.useMemo(() => {\n        if (\n            variant &&\n            [\n                \"neutral-strong\",\n                \"neutral-xstrong\",\n                \"neutral-dark\",\n                \"accent\",\n                \"success\",\n                \"destructive\"\n            ].includes(variant)\n        ) {\n            return \"neutral-negative\";\n        }\n\n        if (variant && [\"warning\"].includes(variant)) {\n            return \"neutral-strong\";\n        }\n\n        return \"neutral-strong-transparent\";\n    }, [variant]);\n\n    return (\n        <TagPropsProvider props={props}>\n            <span\n                {...rootProps}\n                onClick={onClick}\n                className={cn(\n                    tagVariants({\n                        variant,\n                        isDismissible: Boolean(onDismiss),\n                        isInteractive: Boolean(onClick),\n                        isDisabled: Boolean(disabled)\n                    }),\n                    className\n                )}\n                aria-disabled={disabled}\n            >\n                <TagSwatchBox />\n                <TagIcon />\n                <span className={\"overflow-hidden truncate whitespace-nowrap\"}>{content}</span>\n                {onDismiss && (\n                    <IconButton\n                        icon={\n                            <Icon\n                                icon={dismissIconElement}\n                                label={dismissIconLabel}\n                                color={dismissIconColor}\n                                size={\"sm\"}\n                            />\n                        }\n                        size={\"xxs\"}\n                        variant={dismissButtonVariant}\n                        disabled={disabled}\n                        onClick={event => {\n                            event.stopPropagation();\n                            onDismiss(event);\n                        }}\n                    />\n                )}\n            </span>\n        </TagPropsProvider>\n    );\n};\nconst Tag = makeDecoratable(\"Tag\", DecoratableTag);\n\nexport { Tag };\n"],"mappings":"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","ignoreList":[]}

package/Tag/Tag.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Meta, Controls } from '@storybook/blocks';
+import { Canvas, Meta, Controls } from "@storybook/addon-docs/blocks";
 
-import * as TagStories from './Tag.stories';
+import * as TagStories from "./Tag.stories";
 
 <Meta of={TagStories} />
 
@@ -15,23 +15,23 @@ import React from "react";
 import { Tag } from "@webiny/admin-ui";
 
 const TagExample = () => {
-    return <Tag content="Label" />;
+return <Tag content="Label" />;
 };
 
 export default TagExample;
 
 ` } }
-        additionalActions={[
-            {
-                title: 'Open in GitHub',
-                onClick: () => {
-                    window.open(
-                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Tag/Tag.tsx',
-                        '_blank'
-                    );
-                },
-            }
-        ]}
+additionalActions={[
+{
+title: 'Open in GitHub',
+onClick: () => {
+window.open(
+'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Tag/Tag.tsx',
+'_blank'
+);
+},
+}
+]}
 />
 
 <Controls of={TagStories.Documentation} />
@@ -41,7 +41,7 @@ import React from "react";
 import { Tag } from "@webiny/admin-ui";
 
 const TagExample = () => {
-    return <Tag content="Label" />;
+  return <Tag content="Label" />;
 };
 
 export default TagExample;
@@ -58,7 +58,7 @@ import React from "react";
 import { Tag } from "@webiny/admin-ui";
 
 const BasicTagExample = () => {
-    return <Tag content="Label" />;
+return <Tag content="Label" />;
 };
 
 export default BasicTagExample;
@@ -73,12 +73,12 @@ import React from "react";
 import { Tag } from "@webiny/admin-ui";
 
 const InteractiveTagExample = () => {
-    return <Tag
-        content="Click me"
-        onClick={evt => {
-            console.log("Tag clicked", evt);
-        }}
-    />;
+return <Tag
+content="Click me"
+onClick={evt => {
+console.log("Tag clicked", evt);
+}}
+/>;
 };
 
 export default InteractiveTagExample;
@@ -93,12 +93,12 @@ import React from "react";
 import { Tag } from "@webiny/admin-ui";
 
 const DismissibleTagExample = () => {
-    return <Tag
-        content="Dismissible"
-        onDismiss={evt => {
-            console.log("Tag dismissed", evt);
-        }}
-    />;
+return <Tag
+content="Dismissible"
+onDismiss={evt => {
+console.log("Tag dismissed", evt);
+}}
+/>;
 };
 
 export default DismissibleTagExample;
@@ -114,14 +114,14 @@ import { Tag } from "@webiny/admin-ui";
 import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
 
 const CustomDismissIconExample = () => {
-    return <Tag
-        content="Custom Icon"
-        onDismiss={evt => {
-            console.log("Tag dismissed", evt);
-        }}
-        dismissIconElement={<AddIcon />}
-        dismissIconLabel="Custom dismiss label"
-    />;
+return <Tag
+content="Custom Icon"
+onDismiss={evt => {
+console.log("Tag dismissed", evt);
+}}
+dismissIconElement={<AddIcon />}
+dismissIconLabel="Custom dismiss label"
+/>;
 };
 
 export default CustomDismissIconExample;
@@ -136,24 +136,24 @@ import React from "react";
 import { Tag } from "@webiny/admin-ui";
 
 const TagVariantsExample = () => {
-    return (
-        <div className={"wby-flex wby-gap-sm"}>
-            <Tag content={"Neutral base"} variant={"neutral-base"} onDismiss={() => {}} />
-            <Tag content={"Neutral base outline"} variant={"neutral-base-outline"} onDismiss={() => {}} />
-            <Tag content={"Neutral light"} variant={"neutral-light"} onDismiss={() => {}} />
-            <Tag content={"Neutral muted"} variant={"neutral-muted"} onDismiss={() => {}} />
-            <Tag content={"Neutral strong"} variant={"neutral-strong"} onDismiss={() => {}} />
-            <Tag content={"Neutral xstrong"} variant={"neutral-xstrong"} onDismiss={() => {}} />
-            <Tag content={"Neutral dark"} variant={"neutral-dark"} onDismiss={() => {}} />
-            <Tag content={"Success"} variant={"success"} onDismiss={() => {}} />
-            <Tag content={"Success light"} variant={"success-light"} onDismiss={() => {}} />
-            <Tag content={"Warning"} variant={"warning"} onDismiss={() => {}} />
-            <Tag content={"Destructive"} variant={"destructive"} onDismiss={() => {}} />
-            <Tag content={"Accent"} variant={"accent"} onDismiss={() => {}} />
-            <Tag content={"Accent light"} variant={"accent-light"} onDismiss={() => {}} />
-        </div>
-    );
-};
+return (
+
+<div className={"flex gap-sm"}>
+  <Tag content={"Neutral base"} variant={"neutral-base"} onDismiss={() => {}} />
+  <Tag content={"Neutral base outline"} variant={"neutral-base-outline"} onDismiss={() => {}} />
+  <Tag content={"Neutral light"} variant={"neutral-light"} onDismiss={() => {}} />
+  <Tag content={"Neutral muted"} variant={"neutral-muted"} onDismiss={() => {}} />
+  <Tag content={"Neutral strong"} variant={"neutral-strong"} onDismiss={() => {}} />
+  <Tag content={"Neutral xstrong"} variant={"neutral-xstrong"} onDismiss={() => {}} />
+  <Tag content={"Neutral dark"} variant={"neutral-dark"} onDismiss={() => {}} />
+  <Tag content={"Success"} variant={"success"} onDismiss={() => {}} />
+  <Tag content={"Success light"} variant={"success-light"} onDismiss={() => {}} />
+  <Tag content={"Warning"} variant={"warning"} onDismiss={() => {}} />
+  <Tag content={"Destructive"} variant={"destructive"} onDismiss={() => {}} />
+  <Tag content={"Accent"} variant={"accent"} onDismiss={() => {}} />
+  <Tag content={"Accent light"} variant={"accent-light"} onDismiss={() => {}} />
+</div>
+); };
 
 export default TagVariantsExample;
 ` } } />
@@ -167,12 +167,12 @@ import React from "react";
 import { Tag } from "@webiny/admin-ui";
 
 const DisabledTagExample = () => {
-    return <Tag
-        content="Disabled"
-        variant="neutral-base"
-        onDismiss={() => {}}
-        disabled={true}
-    />;
+return <Tag
+content="Disabled"
+variant="neutral-base"
+onDismiss={() => {}}
+disabled={true}
+/>;
 };
 
 export default DisabledTagExample;
@@ -181,16 +181,20 @@ export default DisabledTagExample;
 ## Anatomy
 
 ### Construction
-<img src="/images/storybook/tag/construction.png" alt="Construction"/>
+
+<img src="/images/storybook/tag/construction.png" alt="Construction" />
 
 ### Style
-<img src="/images/storybook/tag/style.png" alt="Style"/>
+
+<img src="/images/storybook/tag/style.png" alt="Style" />
 
 ### States
-<img src="/images/storybook/tag/states.png" alt="States"/>
+
+<img src="/images/storybook/tag/states.png" alt="States" />
 
 ## Usage Guidelines
-<img src="/images/storybook/tag/usage.png" alt="Usage"/>
+
+<img src="/images/storybook/tag/usage.png" alt="Usage" />
 
 ## Best Practices
 

package/Tag/Tag.stories.d.ts

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Tag } from "./Tag";
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import { Tag } from "./Tag.js";
 declare const meta: Meta<typeof Tag>;
 export default meta;
 type Story = StoryObj<typeof Tag>;
@@ -34,4 +34,5 @@ export declare const WarningDisabled: Story;
 export declare const Destructive: Story;
 export declare const DestructiveDisabled: Story;
 export declare const FullExample: Story;
+export declare const WithSwatchColor: Story;
 export declare const Documentation: Story;

package/Tag/Tag.stories.js

@@ -1,6 +1,7 @@
 import React from "react";
+import { Tag } from "./Tag.js";
+import { ReactComponent as InfoIcon } from "@webiny/icons/info.svg";
 import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
-import { Tag } from "./Tag";
 const meta = {
   title: "Components/Tag",
   component: Tag,
@@ -11,7 +12,8 @@ const meta = {
 export default meta;
 export const Default = {
   args: {
-    content: "Label"
+    content: "Label",
+    icon: /*#__PURE__*/React.createElement(InfoIcon, null)
   }
 };
 export const WithOnClickCallback = {
@@ -197,7 +199,7 @@ export const FullExample = {
   args: WithOnDismissCallback.args,
   render: args => {
     return /*#__PURE__*/React.createElement("div", {
-      className: "wby-flex wby-gap-sm"
+      className: "flex gap-sm"
     }, /*#__PURE__*/React.createElement(Tag, Object.assign({}, args, {
       content: "Neutral base",
       variant: "neutral-base"
@@ -240,6 +242,14 @@ export const FullExample = {
     })));
   }
 };
+export const WithSwatchColor = {
+  args: {
+    ...WithOnDismissCallback.args,
+    variant: "neutral-base-outline",
+    content: /*#__PURE__*/React.createElement(React.Fragment, null, "An alert that can be closed and also has action button."),
+    swatchColor: "#FF708F"
+  }
+};
 export const Documentation = {
   args: {
     content: "Label",
@@ -264,16 +274,13 @@ export const Documentation = {
       control: "boolean"
     },
     onDismiss: {
-      description: "Callback function when the tag is dismissed. Please refer to the 'Dismissible Tag' example code for details.",
-      control: "none"
+      description: "Callback function when the tag is dismissed. Please refer to the 'Dismissible Tag' example code for details."
     },
     dismissIconElement: {
-      description: "Custom dismiss icon element. Please refer to the 'Custom Dismiss Icon' example code for details.",
-      control: "none"
+      description: "Custom dismiss icon element. Please refer to the 'Custom Dismiss Icon' example code for details."
     },
     dismissIconLabel: {
-      description: "Custom dismiss icon label. Please refer to the 'Custom Dismiss Icon' example code for details.",
-      control: "none"
+      description: "Custom dismiss icon label. Please refer to the 'Custom Dismiss Icon' example code for details."
     }
   }
 };

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,"names":["React","Tag","ReactComponent","InfoIcon","AddIcon","meta","title","component","parameters","layout","Default","args","content","icon","createElement","WithOnClickCallback","onClick","evt","console","log","WithOnDismissCallback","onDismiss","WithCustomDismissIconElement","dismissIconElement","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","WithSwatchColor","Fragment","swatchColor","Documentation","undefined","argTypes","description","control","options"],"sources":["Tag.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\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"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,GAAG;AACZ,SAASC,cAAc,IAAIC,QAAQ,QAAQ,wBAAwB;AACnE,SAASD,cAAc,IAAIE,OAAO,QAAQ,uBAAuB;AAEjE,MAAMC,IAAsB,GAAG;EAC3BC,KAAK,EAAE,gBAAgB;EACvBC,SAAS,EAAEN,GAAG;EACdO,UAAU,EAAE;IACRC,MAAM,EAAE;EACZ;AACJ,CAAC;AAED,eAAeJ,IAAI;AAGnB,OAAO,MAAMK,OAAc,GAAG;EAC1BC,IAAI,EAAE;IACFC,OAAO,EAAE,OAAO;IAChBC,IAAI,eAAEb,KAAA,CAAAc,aAAA,CAACX,QAAQ,MAAE;EACrB;AACJ,CAAC;AAED,OAAO,MAAMY,mBAA0B,GAAG;EACtCJ,IAAI,EAAE;IACF,GAAGD,OAAO,CAACC,IAAI;IACfK,OAAO,EAAEC,GAAG,IAAI;MACZC,OAAO,CAACC,GAAG,CAAC,SAAS,EAAEF,GAAG,CAAC;IAC/B;EACJ;AACJ,CAAC;AAED,OAAO,MAAMG,qBAA4B,GAAG;EACxCT,IAAI,EAAE;IACF,GAAGD,OAAO,CAACC,IAAI;IACfU,SAAS,EAAEJ,GAAG,IAAI;MACdC,OAAO,CAACC,GAAG,CAAC,WAAW,EAAEF,GAAG,CAAC;IACjC;EACJ;AACJ,CAAC;AAED,OAAO,MAAMK,4BAAmC,GAAG;EAC/CX,IAAI,EAAE;IACF,GAAGS,qBAAqB,CAACT,IAAI;IAC7BY,kBAAkB,eAAEvB,KAAA,CAAAc,aAAA,CAACV,OAAO,MAAE,CAAC;IAC/BoB,gBAAgB,EAAE;EACtB;AACJ,CAAC;AAED,OAAO,MAAMC,WAAkB,GAAG;EAC9Bd,IAAI,EAAE;IACF,GAAGS,qBAAqB,CAACT,IAAI;IAC7Be,OAAO,EAAE;EACb;AACJ,CAAC;AAED,OAAO,MAAMC,mBAA0B,GAAG;EACtChB,IAAI,EAAE;IACF,GAAGc,WAAW,CAACd,IAAI;IACnBiB,QAAQ,EAAE;EACd;AACJ,CAAC;AAED,OAAO,MAAMC,kBAAyB,GAAG;EACrClB,IAAI,EAAE;IACF,GAAGS,qBAAqB,CAACT,IAAI;IAC7Be,OAAO,EAAE;EACb;AACJ,CAAC;AAED,OAAO,MAAMI,0BAAiC,GAAG;EAC7CnB,IAAI,EAAE;IACF,GAAGkB,kBAAkB,CAAClB,IAAI;IAC1BiB,QAAQ,EAAE;EACd;AACJ,CAAC;AAED,OAAO,MAAMG,YAAmB,GAAG;EAC/BpB,IAAI,EAAE;IACF,GAAGS,qBAAqB,CAACT,IAAI;IAC7Be,OAAO,EAAE;EACb;AACJ,CAAC;AAED,OAAO,MAAMM,oBAA2B,GAAG;EACvCrB,IAAI,EAAE;IACF,GAAGoB,YAAY,CAACpB,IAAI;IACpBiB,QAAQ,EAAE;EACd;AACJ,CAAC;AAED,OAAO,MAAMK,YAAmB,GAAG;EAC/BtB,IAAI,EAAE;IACF,GAAGS,qBAAqB,CAACT,IAAI;IAC7Be,OAAO,EAAE;EACb;AACJ,CAAC;AAED,OAAO,MAAMQ,oBAA2B,GAAG;EACvCvB,IAAI,EAAE;IACF,GAAGsB,YAAY,CAACtB,IAAI;IACpBiB,QAAQ,EAAE;EACd;AACJ,CAAC;AAED,OAAO,MAAMO,aAAoB,GAAG;EAChCxB,IAAI,EAAE;IACF,GAAGS,qBAAqB,CAACT,IAAI;IAC7Be,OAAO,EAAE;EACb;AACJ,CAAC;AAED,OAAO,MAAMU,qBAA4B,GAAG;EACxCzB,IAAI,EAAE;IACF,GAAGwB,aAAa,CAACxB,IAAI;IACrBiB,QAAQ,EAAE;EACd;AACJ,CAAC;AAED,OAAO,MAAMS,cAAqB,GAAG;EACjC1B,IAAI,EAAE;IACF,GAAGS,qBAAqB,CAACT,IAAI;IAC7Be,OAAO,EAAE;EACb;AACJ,CAAC;AAED,OAAO,MAAMY,sBAA6B,GAAG;EACzC3B,IAAI,EAAE;IACF,GAAG0B,cAAc,CAAC1B,IAAI;IACtBiB,QAAQ,EAAE;EACd;AACJ,CAAC;AAED,OAAO,MAAMW,WAAkB,GAAG;EAC9B5B,IAAI,EAAE;IACF,GAAGS,qBAAqB,CAACT,IAAI;IAC7Be,OAAO,EAAE;EACb;AACJ,CAAC;AAED,OAAO,MAAMc,mBAA0B,GAAG;EACtC7B,IAAI,EAAE;IACF,GAAG4B,WAAW,CAAC5B,IAAI;IACnBiB,QAAQ,EAAE;EACd;AACJ,CAAC;AAED,OAAO,MAAMa,MAAa,GAAG;EACzB9B,IAAI,EAAE;IACF,GAAGS,qBAAqB,CAACT,IAAI;IAC7Be,OAAO,EAAE;EACb;AACJ,CAAC;AAED,OAAO,MAAMgB,cAAqB,GAAG;EACjC/B,IAAI,EAAE;IACF,GAAG8B,MAAM,CAAC9B,IAAI;IACdiB,QAAQ,EAAE;EACd;AACJ,CAAC;AAED,OAAO,MAAMe,WAAkB,GAAG;EAC9BhC,IAAI,EAAE;IACF,GAAGS,qBAAqB,CAACT,IAAI;IAC7Be,OAAO,EAAE;EACb;AACJ,CAAC;AAED,OAAO,MAAMkB,mBAA0B,GAAG;EACtCjC,IAAI,EAAE;IACF,GAAGgC,WAAW,CAAChC,IAAI;IACnBiB,QAAQ,EAAE;EACd;AACJ,CAAC;AAED,OAAO,MAAMiB,OAAc,GAAG;EAC1BlC,IAAI,EAAE;IACF,GAAGS,qBAAqB,CAACT,IAAI;IAC7Be,OAAO,EAAE;EACb;AACJ,CAAC;AAED,OAAO,MAAMoB,eAAsB,GAAG;EAClCnC,IAAI,EAAE;IACF,GAAGkC,OAAO,CAAClC,IAAI;IACfiB,QAAQ,EAAE;EACd;AACJ,CAAC;AAED,OAAO,MAAMmB,YAAmB,GAAG;EAC/BpC,IAAI,EAAE;IACF,GAAGS,qBAAqB,CAACT,IAAI;IAC7Be,OAAO,EAAE;EACb;AACJ,CAAC;AAED,OAAO,MAAMsB,oBAA2B,GAAG;EACvCrC,IAAI,EAAE;IACF,GAAGoC,YAAY,CAACpC,IAAI;IACpBiB,QAAQ,EAAE;EACd;AACJ,CAAC;AAED,OAAO,MAAMqB,OAAc,GAAG;EAC1BtC,IAAI,EAAE;IACF,GAAGS,qBAAqB,CAACT,IAAI;IAC7Be,OAAO,EAAE;EACb;AACJ,CAAC;AAED,OAAO,MAAMwB,eAAsB,GAAG;EAClCvC,IAAI,EAAE;IACF,GAAGsC,OAAO,CAACtC,IAAI;IACfiB,QAAQ,EAAE;EACd;AACJ,CAAC;AAED,OAAO,MAAMuB,WAAkB,GAAG;EAC9BxC,IAAI,EAAE;IACF,GAAGS,qBAAqB,CAACT,IAAI;IAC7Be,OAAO,EAAE;EACb;AACJ,CAAC;AAED,OAAO,MAAM0B,mBAA0B,GAAG;EACtCzC,IAAI,EAAE;IACF,GAAGwC,WAAW,CAACxC,IAAI;IACnBiB,QAAQ,EAAE;EACd;AACJ,CAAC;AAED,OAAO,MAAMyB,WAAkB,GAAG;EAC9B1C,IAAI,EAAES,qBAAqB,CAACT,IAAI;EAChC2C,MAAM,EAAE3C,IAAI,IAAI;IACZ,oBACIX,KAAA,CAAAc,aAAA;MAAKyC,SAAS,EAAE;IAAc,gBAC1BvD,KAAA,CAAAc,aAAA,CAACb,GAAG,EAAAuD,MAAA,CAAAC,MAAA,KAAK9C,IAAI;MAAEC,OAAO,EAAE,cAAe;MAACc,OAAO,EAAE;IAAe,EAAE,CAAC,eACnE1B,KAAA,CAAAc,aAAA,CAACb,GAAG,EAAAuD,MAAA,CAAAC,MAAA,KAAK9C,IAAI;MAAEC,OAAO,EAAE,sBAAuB;MAACc,OAAO,EAAE;IAAuB,EAAE,CAAC,eACnF1B,KAAA,CAAAc,aAAA,CAACb,GAAG,EAAAuD,MAAA,CAAAC,MAAA,KAAK9C,IAAI;MAAEC,OAAO,EAAE,eAAgB;MAACc,OAAO,EAAE;IAAgB,EAAE,CAAC,eACrE1B,KAAA,CAAAc,aAAA,CAACb,GAAG,EAAAuD,MAAA,CAAAC,MAAA,KAAK9C,IAAI;MAAEC,OAAO,EAAE,eAAgB;MAACc,OAAO,EAAE;IAAgB,EAAE,CAAC,eACrE1B,KAAA,CAAAc,aAAA,CAACb,GAAG,EAAAuD,MAAA,CAAAC,MAAA,KAAK9C,IAAI;MAAEC,OAAO,EAAE,gBAAiB;MAACc,OAAO,EAAE;IAAiB,EAAE,CAAC,eACvE1B,KAAA,CAAAc,aAAA,CAACb,GAAG,EAAAuD,MAAA,CAAAC,MAAA,KAAK9C,IAAI;MAAEC,OAAO,EAAE,iBAAkB;MAACc,OAAO,EAAE;IAAkB,EAAE,CAAC,eACzE1B,KAAA,CAAAc,aAAA,CAACb,GAAG,EAAAuD,MAAA,CAAAC,MAAA,KAAK9C,IAAI;MAAEC,OAAO,EAAE,cAAe;MAACc,OAAO,EAAE;IAAe,EAAE,CAAC,eACnE1B,KAAA,CAAAc,aAAA,CAACb,GAAG,EAAAuD,MAAA,CAAAC,MAAA,KAAK9C,IAAI;MAAEC,OAAO,EAAE,SAAU;MAACc,OAAO,EAAE;IAAU,EAAE,CAAC,eACzD1B,KAAA,CAAAc,aAAA,CAACb,GAAG,EAAAuD,MAAA,CAAAC,MAAA,KAAK9C,IAAI;MAAEC,OAAO,EAAE,eAAgB;MAACc,OAAO,EAAE;IAAgB,EAAE,CAAC,eACrE1B,KAAA,CAAAc,aAAA,CAACb,GAAG,EAAAuD,MAAA,CAAAC,MAAA,KAAK9C,IAAI;MAAEC,OAAO,EAAE,SAAU;MAACc,OAAO,EAAE;IAAU,EAAE,CAAC,eACzD1B,KAAA,CAAAc,aAAA,CAACb,GAAG,EAAAuD,MAAA,CAAAC,MAAA,KAAK9C,IAAI;MAAEC,OAAO,EAAE,aAAc;MAACc,OAAO,EAAE;IAAc,EAAE,CAAC,eACjE1B,KAAA,CAAAc,aAAA,CAACb,GAAG,EAAAuD,MAAA,CAAAC,MAAA,KAAK9C,IAAI;MAAEC,OAAO,EAAE,QAAS;MAACc,OAAO,EAAE;IAAS,EAAE,CAAC,eACvD1B,KAAA,CAAAc,aAAA,CAACb,GAAG,EAAAuD,MAAA,CAAAC,MAAA,KAAK9C,IAAI;MAAEC,OAAO,EAAE,cAAe;MAACc,OAAO,EAAE;IAAe,EAAE,CACjE,CAAC;EAEd;AACJ,CAAC;AAED,OAAO,MAAMgC,eAAsB,GAAG;EAClC/C,IAAI,EAAE;IACF,GAAGS,qBAAqB,CAACT,IAAI;IAC7Be,OAAO,EAAE,sBAAsB;IAC/Bd,OAAO,eAAEZ,KAAA,CAAAc,aAAA,CAAAd,KAAA,CAAA2D,QAAA,QAAE,yDAAyD,CAAC;IACrEC,WAAW,EAAE;EACjB;AACJ,CAAC;AAED,OAAO,MAAMC,aAAoB,GAAG;EAChClD,IAAI,EAAE;IACFC,OAAO,EAAE,OAAO;IAChBc,OAAO,EAAE,cAAc;IACvBE,QAAQ,EAAE,KAAK;IACfP,SAAS,EAAEyC,SAAS;IACpBvC,kBAAkB,EAAEuC,SAAS;IAC7BtC,gBAAgB,EAAEsC;EACtB,CAAC;EACDC,QAAQ,EAAE;IACNnD,OAAO,EAAE;MACLoD,WAAW,EAAE,uEAAuE;MACpFC,OAAO,EAAE;IACb,CAAC;IACDvC,OAAO,EAAE;MACLsC,WAAW,EAAE,+BAA+B;MAC5CC,OAAO,EAAE,QAAQ;MACjBC,OAAO,EAAE,CACL,cAAc,EACd,sBAAsB,EACtB,eAAe,EACf,eAAe,EACf,gBAAgB,EAChB,iBAAiB,EACjB,cAAc,EACd,SAAS,EACT,eAAe,EACf,SAAS,EACT,aAAa,EACb,QAAQ,EACR,cAAc;IAEtB,CAAC;IACDtC,QAAQ,EAAE;MACNoC,WAAW,EAAE,8BAA8B;MAC3CC,OAAO,EAAE;IACb,CAAC;IACD5C,SAAS,EAAE;MACP2C,WAAW,EACP;IACR,CAAC;IACDzC,kBAAkB,EAAE;MAChByC,WAAW,EACP;IACR,CAAC;IACDxC,gBAAgB,EAAE;MACdwC,WAAW,EACP;IACR;EACJ;AACJ,CAAC","ignoreList":[]}

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,79 @@
+import * as React from "react";
+import { cva } from "../utils.js";
+import { useTagProps } from "./TagPropsProvider.js";
+import { Icon } from "../Icon/Icon.js";
+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"
+  }
+});
+export const TagIcon = () => {
+  const {
+    icon,
+    variant,
+    disabled
+  } = useTagProps();
+  if (!icon) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(Icon, {
+    label: "Tag icon",
+    icon: icon,
+    size: "xs",
+    className: tagIconVariants({
+      variant,
+      disabled
+    })
+  });
+};
+
+//# sourceMappingURL=TagIcon.js.map