@webiny/admin-ui 6.0.0-alpha.0

package/Tag/Tag.d.ts

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { type VariantProps } from "../utils";
+declare const tagVariants: (props?: ({
+    isInteractive?: boolean | null | undefined;
+    isDismissible?: boolean | null | undefined;
+    isDisabled?: boolean | null | undefined;
+    variant?: "accent" | "success" | "neutral-light" | "neutral-strong" | "neutral-base" | "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;
+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;
+    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;
+    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;
+        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;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+export { Tag };

package/Tag/Tag.js

@@ -0,0 +1,94 @@
+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"], {
+  variants: {
+    isInteractive: {
+      true: "wby-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"
+    },
+    isDisabled: {
+      true: "wby-cursor-not-allowed wby-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"]
+    }
+  },
+  defaultVariants: {
+    variant: "neutral-base"
+  }
+});
+const DecoratableTag = ({
+  className,
+  variant,
+  content,
+  onClick,
+  onDismiss,
+  dismissIconElement = /*#__PURE__*/React.createElement(Close, null),
+  dismissIconLabel = "Close",
+  disabled,
+  ...props
+}) => {
+  const dismissButtonVariant = React.useMemo(() => {
+    if (variant && ["neutral-strong", "neutral-xstrong", "neutral-dark", "success", "accent", "destructive"].includes(variant)) {
+      return "ghost-negative";
+    }
+    return "ghost";
+  }, [variant]);
+  const dismissIconColor = React.useMemo(() => {
+    if (variant && ["neutral-strong", "neutral-xstrong", "neutral-dark", "accent", "success", "destructive"].includes(variant)) {
+      return "neutral-negative";
+    }
+    if (variant && ["warning"].includes(variant)) {
+      return "neutral-strong";
+    }
+    return "neutral-strong-transparent";
+  }, [variant]);
+  return /*#__PURE__*/React.createElement("span", Object.assign({}, props, {
+    onClick: onClick,
+    className: cn(tagVariants({
+      variant,
+      isDismissible: Boolean(onDismiss),
+      isInteractive: Boolean(onClick),
+      isDisabled: Boolean(disabled)
+    }), className),
+    "aria-disabled": disabled
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "wby-overflow-hidden wby-truncate wby-whitespace-nowrap"
+  }, content), onDismiss && /*#__PURE__*/React.createElement(IconButton, {
+    icon: /*#__PURE__*/React.createElement(Icon, {
+      icon: dismissIconElement,
+      label: dismissIconLabel,
+      color: dismissIconColor,
+      size: "sm"
+    }),
+    size: "xxs",
+    variant: dismissButtonVariant,
+    disabled: disabled,
+    onClick: event => {
+      event.stopPropagation();
+      onDismiss(event);
+    }
+  }));
+};
+const Tag = makeDecoratable("Tag", DecoratableTag);
+export { Tag };
+
+//# sourceMappingURL=Tag.js.map

package/Tag/Tag.js.map

@@ -0,0 +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 { IconButton, iconButtonVariants } 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":[]}

package/Tag/Tag.mdx

@@ -0,0 +1,203 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as TagStories from './Tag.stories';
+
+<Meta of={TagStories} />
+
+# Tag
+
+The Tag component is a visual element used to display brief, contextual information or status, such as counts, labels, or indicators. It enhances UI clarity by drawing attention to critical updates (e.g., notifications), item counts, or states (e.g., "new," "active").
+
+## Usage
+
+<Canvas of={TagStories.Documentation} source={ { code: `
+import React from "react";
+import { Tag } from "@webiny/admin-ui";
+
+const TagExample = () => {
+    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'
+                    );
+                },
+            }
+        ]}
+/>
+
+<Controls of={TagStories.Documentation} />
+
+```jsx
+import React from "react";
+import { Tag } from "@webiny/admin-ui";
+
+const TagExample = () => {
+    return <Tag content="Label" />;
+};
+
+export default TagExample;
+```
+
+## Examples
+
+### Basic Tag
+
+A basic tag displays a simple label without any interaction.
+
+<Canvas of={TagStories.Default} source={ { code: `
+import React from "react";
+import { Tag } from "@webiny/admin-ui";
+
+const BasicTagExample = () => {
+    return <Tag content="Label" />;
+};
+
+export default BasicTagExample;
+` } } />
+
+### Interactive Tag
+
+Tags can be made interactive by adding an onClick handler.
+
+<Canvas of={TagStories.WithOnClickCallback} source={ { code: `
+import React from "react";
+import { Tag } from "@webiny/admin-ui";
+
+const InteractiveTagExample = () => {
+    return <Tag
+        content="Click me"
+        onClick={evt => {
+            console.log("Tag clicked", evt);
+        }}
+    />;
+};
+
+export default InteractiveTagExample;
+` } } />
+
+### Dismissible Tag
+
+Tags can include a dismiss button by providing an onDismiss handler.
+
+<Canvas of={TagStories.WithOnDismissCallback} source={ { code: `
+import React from "react";
+import { Tag } from "@webiny/admin-ui";
+
+const DismissibleTagExample = () => {
+    return <Tag
+        content="Dismissible"
+        onDismiss={evt => {
+            console.log("Tag dismissed", evt);
+        }}
+    />;
+};
+
+export default DismissibleTagExample;
+` } } />
+
+### Custom Dismiss Icon
+
+You can customize the dismiss icon by providing a custom icon element.
+
+<Canvas of={TagStories.WithCustomDismissIconElement} source={ { code: `
+import React from "react";
+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"
+    />;
+};
+
+export default CustomDismissIconExample;
+` } } />
+
+### Variants
+
+Tags come in various color variants to represent different states or categories.
+
+<Canvas of={TagStories.FullExample} source={ { code: `
+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>
+    );
+};
+
+export default TagVariantsExample;
+` } } />
+
+### Disabled Tags
+
+Tags can be disabled to indicate that they are not interactive.
+
+<Canvas of={TagStories.NeutralBaseDisabled} source={ { code: `
+import React from "react";
+import { Tag } from "@webiny/admin-ui";
+
+const DisabledTagExample = () => {
+    return <Tag
+        content="Disabled"
+        variant="neutral-base"
+        onDismiss={() => {}}
+        disabled={true}
+    />;
+};
+
+export default DisabledTagExample;
+` } } />
+
+## Anatomy
+
+### Construction
+<img src="/images/storybook/tag/construction.png" alt="Construction"/>
+
+### Style
+<img src="/images/storybook/tag/style.png" alt="Style"/>
+
+### States
+<img src="/images/storybook/tag/states.png" alt="States"/>
+
+## Usage Guidelines
+<img src="/images/storybook/tag/usage.png" alt="Usage"/>
+
+## Best Practices
+
+- Use tags to categorize content or indicate status
+- Keep tag content concise and clear
+- Choose appropriate color variants to convey meaning
+- Use dismissible tags when users need to remove or filter items
+- Consider using interactive tags for filtering or navigation
+- Ensure sufficient contrast between tag text and background
+- Maintain consistent spacing when displaying multiple tags

package/Tag/Tag.stories.d.ts

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Tag } from "./Tag";
+declare const meta: Meta<typeof Tag>;
+export default meta;
+type Story = StoryObj<typeof Tag>;
+export declare const Default: Story;
+export declare const WithOnClickCallback: Story;
+export declare const WithOnDismissCallback: Story;
+export declare const WithCustomDismissIconElement: Story;
+export declare const NeutralBase: Story;
+export declare const NeutralBaseDisabled: Story;
+export declare const NeutralBaseOutline: Story;
+export declare const NeutralBaseOutlineDisabled: Story;
+export declare const NeutralLight: Story;
+export declare const NeutralLightDisabled: Story;
+export declare const NeutralMuted: Story;
+export declare const NeutralMutedDisabled: Story;
+export declare const NeutralStrong: Story;
+export declare const NeutralStrongDisabled: Story;
+export declare const NeutralXStrong: Story;
+export declare const NeutralXStrongDisabled: Story;
+export declare const NeutralDark: Story;
+export declare const NeutralDarkDisabled: Story;
+export declare const Accent: Story;
+export declare const AccentDisabled: Story;
+export declare const AccentLight: Story;
+export declare const AccentLightDisabled: Story;
+export declare const Success: Story;
+export declare const SuccessDisabled: Story;
+export declare const SuccessLight: Story;
+export declare const SuccessLightDisabled: Story;
+export declare const Warning: Story;
+export declare const WarningDisabled: Story;
+export declare const Destructive: Story;
+export declare const DestructiveDisabled: Story;
+export declare const FullExample: Story;
+export declare const Documentation: Story;

package/Tag/Tag.stories.js

@@ -0,0 +1,281 @@
+import React from "react";
+import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
+import { Tag } from "./Tag";
+const meta = {
+  title: "Components/Tag",
+  component: Tag,
+  parameters: {
+    layout: "padded"
+  }
+};
+export default meta;
+export const Default = {
+  args: {
+    content: "Label"
+  }
+};
+export const WithOnClickCallback = {
+  args: {
+    ...Default.args,
+    onClick: evt => {
+      console.log("onClick", evt);
+    }
+  }
+};
+export const WithOnDismissCallback = {
+  args: {
+    ...Default.args,
+    onDismiss: evt => {
+      console.log("onDismiss", evt);
+    }
+  }
+};
+export const WithCustomDismissIconElement = {
+  args: {
+    ...WithOnDismissCallback.args,
+    dismissIconElement: /*#__PURE__*/React.createElement(AddIcon, null),
+    dismissIconLabel: "Custom dismiss label"
+  }
+};
+export const NeutralBase = {
+  args: {
+    ...WithOnDismissCallback.args,
+    variant: "neutral-base"
+  }
+};
+export const NeutralBaseDisabled = {
+  args: {
+    ...NeutralBase.args,
+    disabled: true
+  }
+};
+export const NeutralBaseOutline = {
+  args: {
+    ...WithOnDismissCallback.args,
+    variant: "neutral-base-outline"
+  }
+};
+export const NeutralBaseOutlineDisabled = {
+  args: {
+    ...NeutralBaseOutline.args,
+    disabled: true
+  }
+};
+export const NeutralLight = {
+  args: {
+    ...WithOnDismissCallback.args,
+    variant: "neutral-light"
+  }
+};
+export const NeutralLightDisabled = {
+  args: {
+    ...NeutralLight.args,
+    disabled: true
+  }
+};
+export const NeutralMuted = {
+  args: {
+    ...WithOnDismissCallback.args,
+    variant: "neutral-muted"
+  }
+};
+export const NeutralMutedDisabled = {
+  args: {
+    ...NeutralMuted.args,
+    disabled: true
+  }
+};
+export const NeutralStrong = {
+  args: {
+    ...WithOnDismissCallback.args,
+    variant: "neutral-strong"
+  }
+};
+export const NeutralStrongDisabled = {
+  args: {
+    ...NeutralStrong.args,
+    disabled: true
+  }
+};
+export const NeutralXStrong = {
+  args: {
+    ...WithOnDismissCallback.args,
+    variant: "neutral-xstrong"
+  }
+};
+export const NeutralXStrongDisabled = {
+  args: {
+    ...NeutralXStrong.args,
+    disabled: true
+  }
+};
+export const NeutralDark = {
+  args: {
+    ...WithOnDismissCallback.args,
+    variant: "neutral-dark"
+  }
+};
+export const NeutralDarkDisabled = {
+  args: {
+    ...NeutralDark.args,
+    disabled: true
+  }
+};
+export const Accent = {
+  args: {
+    ...WithOnDismissCallback.args,
+    variant: "accent"
+  }
+};
+export const AccentDisabled = {
+  args: {
+    ...Accent.args,
+    disabled: true
+  }
+};
+export const AccentLight = {
+  args: {
+    ...WithOnDismissCallback.args,
+    variant: "accent-light"
+  }
+};
+export const AccentLightDisabled = {
+  args: {
+    ...AccentLight.args,
+    disabled: true
+  }
+};
+export const Success = {
+  args: {
+    ...WithOnDismissCallback.args,
+    variant: "success"
+  }
+};
+export const SuccessDisabled = {
+  args: {
+    ...Success.args,
+    disabled: true
+  }
+};
+export const SuccessLight = {
+  args: {
+    ...WithOnDismissCallback.args,
+    variant: "success-light"
+  }
+};
+export const SuccessLightDisabled = {
+  args: {
+    ...SuccessLight.args,
+    disabled: true
+  }
+};
+export const Warning = {
+  args: {
+    ...WithOnDismissCallback.args,
+    variant: "warning"
+  }
+};
+export const WarningDisabled = {
+  args: {
+    ...Warning.args,
+    disabled: true
+  }
+};
+export const Destructive = {
+  args: {
+    ...WithOnDismissCallback.args,
+    variant: "destructive"
+  }
+};
+export const DestructiveDisabled = {
+  args: {
+    ...Destructive.args,
+    disabled: true
+  }
+};
+export const FullExample = {
+  args: WithOnDismissCallback.args,
+  render: args => {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "wby-flex wby-gap-sm"
+    }, /*#__PURE__*/React.createElement(Tag, Object.assign({}, args, {
+      content: "Neutral base",
+      variant: "neutral-base"
+    })), /*#__PURE__*/React.createElement(Tag, Object.assign({}, args, {
+      content: "Neutral base outline",
+      variant: "neutral-base-outline"
+    })), /*#__PURE__*/React.createElement(Tag, Object.assign({}, args, {
+      content: "Neutral light",
+      variant: "neutral-light"
+    })), /*#__PURE__*/React.createElement(Tag, Object.assign({}, args, {
+      content: "Neutral muted",
+      variant: "neutral-muted"
+    })), /*#__PURE__*/React.createElement(Tag, Object.assign({}, args, {
+      content: "Neutral strong",
+      variant: "neutral-strong"
+    })), /*#__PURE__*/React.createElement(Tag, Object.assign({}, args, {
+      content: "Neutral xstrong",
+      variant: "neutral-xstrong"
+    })), /*#__PURE__*/React.createElement(Tag, Object.assign({}, args, {
+      content: "Neutral dark",
+      variant: "neutral-dark"
+    })), /*#__PURE__*/React.createElement(Tag, Object.assign({}, args, {
+      content: "Success",
+      variant: "success"
+    })), /*#__PURE__*/React.createElement(Tag, Object.assign({}, args, {
+      content: "Success light",
+      variant: "success-light"
+    })), /*#__PURE__*/React.createElement(Tag, Object.assign({}, args, {
+      content: "Warning",
+      variant: "warning"
+    })), /*#__PURE__*/React.createElement(Tag, Object.assign({}, args, {
+      content: "Destructive",
+      variant: "destructive"
+    })), /*#__PURE__*/React.createElement(Tag, Object.assign({}, args, {
+      content: "Accent",
+      variant: "accent"
+    })), /*#__PURE__*/React.createElement(Tag, Object.assign({}, args, {
+      content: "Accent light",
+      variant: "accent-light"
+    })));
+  }
+};
+export const Documentation = {
+  args: {
+    content: "Label",
+    variant: "neutral-base",
+    disabled: false,
+    onDismiss: undefined,
+    dismissIconElement: undefined,
+    dismissIconLabel: undefined
+  },
+  argTypes: {
+    content: {
+      description: "The content of the tag. Please refer to the example code for details.",
+      control: "text"
+    },
+    variant: {
+      description: "The color variant of the tag.",
+      control: "select",
+      options: ["neutral-base", "neutral-base-outline", "neutral-light", "neutral-muted", "neutral-strong", "neutral-xstrong", "neutral-dark", "success", "success-light", "warning", "destructive", "accent", "accent-light"]
+    },
+    disabled: {
+      description: "Whether the tag is disabled.",
+      control: "boolean"
+    },
+    onDismiss: {
+      description: "Callback function when the tag is dismissed. Please refer to the 'Dismissible Tag' example code for details.",
+      control: "none"
+    },
+    dismissIconElement: {
+      description: "Custom dismiss icon element. Please refer to the 'Custom Dismiss Icon' example code for details.",
+      control: "none"
+    },
+    dismissIconLabel: {
+      description: "Custom dismiss icon label. Please refer to the 'Custom Dismiss Icon' example code for details.",
+      control: "none"
+    }
+  }
+};
+
+//# sourceMappingURL=Tag.stories.js.map