@webiny/admin-ui 6.2.0-beta.0 → 6.3.0-beta.0

package/Tabs/components/Content.d.ts

@@ -3,7 +3,7 @@ import { Tabs as TabsPrimitive } from "radix-ui";
 import { type VariantProps } from "../../utils.js";
 declare const tabContentVariants: (props?: ({
     spacing?: "sm" | "md" | "lg" | "xl" | "xs" | "xxl" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type ContentProps = Omit<TabsPrimitive.TabsContentProps, "children" | "content"> & VariantProps<typeof tabContentVariants> & {
     content: React.ReactNode;
 };

package/Tabs/components/List.d.ts

@@ -5,7 +5,7 @@ declare const tabListVariants: (props?: ({
     size?: "sm" | "md" | "lg" | "xl" | null | undefined;
     spacing?: "sm" | "md" | "lg" | "xl" | "xs" | "xxl" | null | undefined;
     separator?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type ListProps = TabsPrimitive.TabsListProps & VariantProps<typeof tabListVariants>;
 declare const List: ({ className, spacing, size, separator, ...props }: ListProps) => React.JSX.Element;
 export { List, type ListProps, tabListVariants };

package/Tabs/components/Trigger.d.ts

@@ -4,7 +4,7 @@ import { type VariantProps } from "../../utils.js";
 declare const tabTriggerVariants: (props?: ({
     size?: "sm" | "md" | "lg" | "xl" | null | undefined;
     visible?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type TriggerProps = Omit<TabsPrimitive.TabsTriggerProps, "children"> & VariantProps<typeof tabTriggerVariants> & {
     text: React.ReactNode;
     icon?: React.ReactElement;

package/Tag/Tag.d.ts

@@ -5,7 +5,7 @@ declare const tagVariants: (props?: ({
     isDismissible?: boolean | null | undefined;
     isDisabled?: boolean | null | undefined;
     variant?: "accent" | "neutral-light" | "neutral-strong" | "neutral-base" | "success" | "warning" | "neutral-base-outline" | "neutral-muted" | "neutral-xstrong" | "neutral-dark" | "accent-light" | "success-light" | "destructive" | null | undefined;
-} & import("class-variance-authority/dist/types.js").ClassProp) | undefined) => string;
+} & import("class-variance-authority/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;

package/Tag/Tag.js.map

@@ -1 +1 @@
-{"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 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":[]}
+{"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/addon-docs/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={"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>
-    );
-};
+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/Tags/primitives/TagsPrimitive.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useMemo","ReactComponent","AddIcon","makeDecoratable","useTags","InputPrimitive","Tag","IconButton","DecoratableTagsPrimitive","props","vm","inputValue","addValue","removeValue","inputProps","disabled","inputRef","invalid","onChange","placeholder","size","variant","handleKeyDown","event","key","target","preventDefault","createElement","Object","assign","inputVm","onKeyDown","startIcon","endIcon","onClick","icon","valuesVm","values","length","className","map","tag","id","content","label","onDismiss","protected","undefined","TagsPrimitive"],"sources":["TagsPrimitive.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport { makeDecoratable } from \"~/utils.js\";\nimport { useTags } from \"./useTags.js\";\nimport { InputPrimitive, type InputPrimitiveProps } from \"~/Input/index.js\";\nimport { Tag } from \"~/Tag/index.js\";\nimport { IconButton } from \"~/Button/index.js\";\nimport type { Icon } from \"~/Icon/index.js\";\n\ninterface TagsPrimitiveProps\n    extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\" | \"onChange\"> {\n    /**\n     * Indicates if the field is disabled.\n     */\n    disabled?: boolean;\n    /**\n     * Reference to the input element.\n     */\n    inputRef?: React.Ref<HTMLInputElement>;\n    /**\n     * Indicates if the input field is invalid.\n     */\n    invalid?: boolean;\n    /**\n     * Callback triggered when a tag is added or removed.\n     */\n    onChange?: (values: string[]) => void;\n    /**\n     * Callback triggered when the input value changes.\n     */\n    onValueInput?: (value: string) => void;\n    /**\n     * Callback triggered when the value is added to the list.\n     */\n    onValueAdd?: (value: string) => void;\n    /**\n     * Callback triggered when a tag is removed.\n     */\n    onValueRemove?: (value: string) => void;\n    /**\n     * Placeholder text for the input field.\n     */\n    placeholder?: string;\n    /**\n     * Size of the input field.\n     * Refer to `InputPrimitiveProps[\"size\"]` for possible values.\n     */\n    size?: InputPrimitiveProps[\"size\"];\n    /**\n     * Icon to be displayed at the start of the input field.\n     */\n    startIcon?: React.ReactElement<typeof Icon> | React.ReactElement;\n    /**\n     * Variant of the input field.\n     * Refer to `InputPrimitiveProps[\"variant\"]` for possible values.\n     */\n    variant?: InputPrimitiveProps[\"variant\"];\n    /**\n     * Optional selected item.\n     */\n    value?: string[];\n    /**\n     * Protected values cannot be removed by the user, these can be simple strings or regex patterns.\n     */\n    protectedValues?: string[];\n}\n\nconst DecoratableTagsPrimitive = (props: TagsPrimitiveProps) => {\n    const { vm, inputValue, addValue, removeValue } = useTags(props);\n\n    const inputProps: InputPrimitiveProps = useMemo(\n        () => ({\n            disabled: props.disabled,\n            inputRef: props.inputRef,\n            invalid: props.invalid,\n            onChange: inputValue,\n            placeholder: props.placeholder,\n            size: props.size,\n            variant: props.variant\n        }),\n        [props]\n    );\n\n    // When user press Enter, add the current input value as a tag\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        if (event.key === \"Enter\" && event.target) {\n            event.preventDefault();\n            addValue();\n        }\n    };\n\n    return (\n        <div>\n            <InputPrimitive\n                {...inputProps}\n                {...vm.inputVm}\n                onChange={inputValue}\n                onKeyDown={handleKeyDown}\n                startIcon={props.startIcon}\n                endIcon={\n                    <IconButton\n                        onClick={addValue}\n                        icon={<AddIcon />}\n                        variant={\"ghost\"}\n                        disabled={inputProps.disabled}\n                    />\n                }\n            />\n\n            {vm.valuesVm.values.length > 0 && (\n                <div className={\"mt-sm flex flex-wrap gap-xs\"}>\n                    {vm.valuesVm.values.map(tag => (\n                        <Tag\n                            key={tag.id}\n                            content={tag.label}\n                            onDismiss={!tag.protected ? () => removeValue(tag.label) : undefined}\n                            variant={\"neutral-muted\"}\n                        />\n                    ))}\n                </div>\n            )}\n        </div>\n    );\n};\n\nconst TagsPrimitive = makeDecoratable(\"TagsPrimitive\", DecoratableTagsPrimitive);\n\nexport { TagsPrimitive, type TagsPrimitiveProps };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,cAAc,IAAIC,OAAO,QAAQ,uBAAuB;AACjE,SAASC,eAAe;AACxB,SAASC,OAAO;AAChB,SAASC,cAAc;AACvB,SAASC,GAAG;AACZ,SAASC,UAAU;AA6DnB,MAAMC,wBAAwB,GAAIC,KAAyB,IAAK;EAC5D,MAAM;IAAEC,EAAE;IAAEC,UAAU;IAAEC,QAAQ;IAAEC;EAAY,CAAC,GAAGT,OAAO,CAACK,KAAK,CAAC;EAEhE,MAAMK,UAA+B,GAAGd,OAAO,CAC3C,OAAO;IACHe,QAAQ,EAAEN,KAAK,CAACM,QAAQ;IACxBC,QAAQ,EAAEP,KAAK,CAACO,QAAQ;IACxBC,OAAO,EAAER,KAAK,CAACQ,OAAO;IACtBC,QAAQ,EAAEP,UAAU;IACpBQ,WAAW,EAAEV,KAAK,CAACU,WAAW;IAC9BC,IAAI,EAAEX,KAAK,CAACW,IAAI;IAChBC,OAAO,EAAEZ,KAAK,CAACY;EACnB,CAAC,CAAC,EACF,CAACZ,KAAK,CACV,CAAC;;EAED;EACA,MAAMa,aAAa,GAAIC,KAA4C,IAAK;IACpE,IAAIA,KAAK,CAACC,GAAG,KAAK,OAAO,IAAID,KAAK,CAACE,MAAM,EAAE;MACvCF,KAAK,CAACG,cAAc,CAAC,CAAC;MACtBd,QAAQ,CAAC,CAAC;IACd;EACJ,CAAC;EAED,oBACIb,KAAA,CAAA4B,aAAA,2BACI5B,KAAA,CAAA4B,aAAA,CAACtB,cAAc,EAAAuB,MAAA,CAAAC,MAAA,KACPf,UAAU,EACVJ,EAAE,CAACoB,OAAO;IACdZ,QAAQ,EAAEP,UAAW;IACrBoB,SAAS,EAAET,aAAc;IACzBU,SAAS,EAAEvB,KAAK,CAACuB,SAAU;IAC3BC,OAAO,eACHlC,KAAA,CAAA4B,aAAA,CAACpB,UAAU;MACP2B,OAAO,EAAEtB,QAAS;MAClBuB,IAAI,eAAEpC,KAAA,CAAA4B,aAAA,CAACzB,OAAO,MAAE,CAAE;MAClBmB,OAAO,EAAE,OAAQ;MACjBN,QAAQ,EAAED,UAAU,CAACC;IAAS,CACjC;EACJ,EACJ,CAAC,EAEDL,EAAE,CAAC0B,QAAQ,CAACC,MAAM,CAACC,MAAM,GAAG,CAAC,iBAC1BvC,KAAA,CAAA4B,aAAA;IAAKY,SAAS,EAAE;EAA8B,GACzC7B,EAAE,CAAC0B,QAAQ,CAACC,MAAM,CAACG,GAAG,CAACC,GAAG,iBACvB1C,KAAA,CAAA4B,aAAA,CAACrB,GAAG;IACAkB,GAAG,EAAEiB,GAAG,CAACC,EAAG;IACZC,OAAO,EAAEF,GAAG,CAACG,KAAM;IACnBC,SAAS,EAAE,CAACJ,GAAG,CAACK,SAAS,GAAG,MAAMjC,WAAW,CAAC4B,GAAG,CAACG,KAAK,CAAC,GAAGG,SAAU;IACrE1B,OAAO,EAAE;EAAgB,CAC5B,CACJ,CACA,CAER,CAAC;AAEd,CAAC;AAED,MAAM2B,aAAa,GAAG7C,eAAe,CAAC,eAAe,EAAEK,wBAAwB,CAAC;AAEhF,SAASwC,aAAa","ignoreList":[]}
+{"version":3,"names":["React","useMemo","ReactComponent","AddIcon","makeDecoratable","useTags","InputPrimitive","Tag","IconButton","DecoratableTagsPrimitive","props","vm","inputValue","addValue","removeValue","inputProps","disabled","inputRef","invalid","onChange","placeholder","size","variant","handleKeyDown","event","key","target","preventDefault","createElement","Object","assign","inputVm","onKeyDown","startIcon","endIcon","onClick","icon","valuesVm","values","length","className","map","tag","id","content","label","onDismiss","protected","undefined","TagsPrimitive"],"sources":["TagsPrimitive.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport { makeDecoratable } from \"~/utils.js\";\nimport { useTags } from \"./useTags.js\";\nimport { InputPrimitive, type InputPrimitiveProps } from \"~/Input/index.js\";\nimport { Tag } from \"~/Tag/index.js\";\nimport { IconButton } from \"~/Button/index.js\";\nimport type { Icon } from \"~/Icon/index.js\";\n\ninterface TagsPrimitiveProps extends Omit<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    \"size\" | \"onChange\"\n> {\n    /**\n     * Indicates if the field is disabled.\n     */\n    disabled?: boolean;\n    /**\n     * Reference to the input element.\n     */\n    inputRef?: React.Ref<HTMLInputElement>;\n    /**\n     * Indicates if the input field is invalid.\n     */\n    invalid?: boolean;\n    /**\n     * Callback triggered when a tag is added or removed.\n     */\n    onChange?: (values: string[]) => void;\n    /**\n     * Callback triggered when the input value changes.\n     */\n    onValueInput?: (value: string) => void;\n    /**\n     * Callback triggered when the value is added to the list.\n     */\n    onValueAdd?: (value: string) => void;\n    /**\n     * Callback triggered when a tag is removed.\n     */\n    onValueRemove?: (value: string) => void;\n    /**\n     * Placeholder text for the input field.\n     */\n    placeholder?: string;\n    /**\n     * Size of the input field.\n     * Refer to `InputPrimitiveProps[\"size\"]` for possible values.\n     */\n    size?: InputPrimitiveProps[\"size\"];\n    /**\n     * Icon to be displayed at the start of the input field.\n     */\n    startIcon?: React.ReactElement<typeof Icon> | React.ReactElement;\n    /**\n     * Variant of the input field.\n     * Refer to `InputPrimitiveProps[\"variant\"]` for possible values.\n     */\n    variant?: InputPrimitiveProps[\"variant\"];\n    /**\n     * Optional selected item.\n     */\n    value?: string[];\n    /**\n     * Protected values cannot be removed by the user, these can be simple strings or regex patterns.\n     */\n    protectedValues?: string[];\n}\n\nconst DecoratableTagsPrimitive = (props: TagsPrimitiveProps) => {\n    const { vm, inputValue, addValue, removeValue } = useTags(props);\n\n    const inputProps: InputPrimitiveProps = useMemo(\n        () => ({\n            disabled: props.disabled,\n            inputRef: props.inputRef,\n            invalid: props.invalid,\n            onChange: inputValue,\n            placeholder: props.placeholder,\n            size: props.size,\n            variant: props.variant\n        }),\n        [props]\n    );\n\n    // When user press Enter, add the current input value as a tag\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        if (event.key === \"Enter\" && event.target) {\n            event.preventDefault();\n            addValue();\n        }\n    };\n\n    return (\n        <div>\n            <InputPrimitive\n                {...inputProps}\n                {...vm.inputVm}\n                onChange={inputValue}\n                onKeyDown={handleKeyDown}\n                startIcon={props.startIcon}\n                endIcon={\n                    <IconButton\n                        onClick={addValue}\n                        icon={<AddIcon />}\n                        variant={\"ghost\"}\n                        disabled={inputProps.disabled}\n                    />\n                }\n            />\n\n            {vm.valuesVm.values.length > 0 && (\n                <div className={\"mt-sm flex flex-wrap gap-xs\"}>\n                    {vm.valuesVm.values.map(tag => (\n                        <Tag\n                            key={tag.id}\n                            content={tag.label}\n                            onDismiss={!tag.protected ? () => removeValue(tag.label) : undefined}\n                            variant={\"neutral-muted\"}\n                        />\n                    ))}\n                </div>\n            )}\n        </div>\n    );\n};\n\nconst TagsPrimitive = makeDecoratable(\"TagsPrimitive\", DecoratableTagsPrimitive);\n\nexport { TagsPrimitive, type TagsPrimitiveProps };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,cAAc,IAAIC,OAAO,QAAQ,uBAAuB;AACjE,SAASC,eAAe;AACxB,SAASC,OAAO;AAChB,SAASC,cAAc;AACvB,SAASC,GAAG;AACZ,SAASC,UAAU;AA+DnB,MAAMC,wBAAwB,GAAIC,KAAyB,IAAK;EAC5D,MAAM;IAAEC,EAAE;IAAEC,UAAU;IAAEC,QAAQ;IAAEC;EAAY,CAAC,GAAGT,OAAO,CAACK,KAAK,CAAC;EAEhE,MAAMK,UAA+B,GAAGd,OAAO,CAC3C,OAAO;IACHe,QAAQ,EAAEN,KAAK,CAACM,QAAQ;IACxBC,QAAQ,EAAEP,KAAK,CAACO,QAAQ;IACxBC,OAAO,EAAER,KAAK,CAACQ,OAAO;IACtBC,QAAQ,EAAEP,UAAU;IACpBQ,WAAW,EAAEV,KAAK,CAACU,WAAW;IAC9BC,IAAI,EAAEX,KAAK,CAACW,IAAI;IAChBC,OAAO,EAAEZ,KAAK,CAACY;EACnB,CAAC,CAAC,EACF,CAACZ,KAAK,CACV,CAAC;;EAED;EACA,MAAMa,aAAa,GAAIC,KAA4C,IAAK;IACpE,IAAIA,KAAK,CAACC,GAAG,KAAK,OAAO,IAAID,KAAK,CAACE,MAAM,EAAE;MACvCF,KAAK,CAACG,cAAc,CAAC,CAAC;MACtBd,QAAQ,CAAC,CAAC;IACd;EACJ,CAAC;EAED,oBACIb,KAAA,CAAA4B,aAAA,2BACI5B,KAAA,CAAA4B,aAAA,CAACtB,cAAc,EAAAuB,MAAA,CAAAC,MAAA,KACPf,UAAU,EACVJ,EAAE,CAACoB,OAAO;IACdZ,QAAQ,EAAEP,UAAW;IACrBoB,SAAS,EAAET,aAAc;IACzBU,SAAS,EAAEvB,KAAK,CAACuB,SAAU;IAC3BC,OAAO,eACHlC,KAAA,CAAA4B,aAAA,CAACpB,UAAU;MACP2B,OAAO,EAAEtB,QAAS;MAClBuB,IAAI,eAAEpC,KAAA,CAAA4B,aAAA,CAACzB,OAAO,MAAE,CAAE;MAClBmB,OAAO,EAAE,OAAQ;MACjBN,QAAQ,EAAED,UAAU,CAACC;IAAS,CACjC;EACJ,EACJ,CAAC,EAEDL,EAAE,CAAC0B,QAAQ,CAACC,MAAM,CAACC,MAAM,GAAG,CAAC,iBAC1BvC,KAAA,CAAA4B,aAAA;IAAKY,SAAS,EAAE;EAA8B,GACzC7B,EAAE,CAAC0B,QAAQ,CAACC,MAAM,CAACG,GAAG,CAACC,GAAG,iBACvB1C,KAAA,CAAA4B,aAAA,CAACrB,GAAG;IACAkB,GAAG,EAAEiB,GAAG,CAACC,EAAG;IACZC,OAAO,EAAEF,GAAG,CAACG,KAAM;IACnBC,SAAS,EAAE,CAACJ,GAAG,CAACK,SAAS,GAAG,MAAMjC,WAAW,CAAC4B,GAAG,CAACG,KAAK,CAAC,GAAGG,SAAU;IACrE1B,OAAO,EAAE;EAAgB,CAC5B,CACJ,CACA,CAER,CAAC;AAEd,CAAC;AAED,MAAM2B,aAAa,GAAG7C,eAAe,CAAC,eAAe,EAAEK,wBAAwB,CAAC;AAEhF,SAASwC,aAAa","ignoreList":[]}

package/Text/Text.d.ts

@@ -3,7 +3,7 @@ import { type VariantProps } from "../utils.js";
 type TextTags = "span" | "div";
 declare const textVariants: (props?: ({
     size?: "sm" | "md" | "lg" | "xl" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface TextProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof textVariants> {
     as?: TextTags;
 }

package/Text/Text.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';
+import { Canvas, Meta, Controls } from "@storybook/addon-docs/blocks";
 
-import * as TextStories from './Text.stories';
+import * as TextStories from "./Text.stories";
 
 <Meta of={TextStories} />
 
@@ -15,23 +15,23 @@ import React from "react";
 import { Text } from "@webiny/admin-ui";
 
 const TextExample = () => {
-    return <Text size="md">Text component example</Text>;
+return <Text size="md">Text component example</Text>;
 };
 
 export default TextExample;
 
 ` } }
-        additionalActions={[
-            {
-                title: 'Open in GitHub',
-                onClick: () => {
-                    window.open(
-                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Text/Text.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/Text/Text.tsx',
+'_blank'
+);
+},
+}
+]}
 />
 
 <Controls of={TextStories.Documentation} />
@@ -41,7 +41,7 @@ import React from "react";
 import { Text } from "@webiny/admin-ui";
 
 const TextExample = () => {
-    return <Text size="md">Text component example</Text>;
+  return <Text size="md">Text component example</Text>;
 };
 
 export default TextExample;
@@ -56,12 +56,13 @@ import React from "react";
 import { Text } from "@webiny/admin-ui";
 
 const TextXlExample = () => {
-    return (
-        <Text size="xl">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.
-        </Text>
-    );
-};
+return (
+
+<Text size="xl">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum
+  rhoncus.
+</Text>
+); };
 
 export default TextXlExample;
 ` } } />
@@ -73,12 +74,13 @@ import React from "react";
 import { Text } from "@webiny/admin-ui";
 
 const TextLgExample = () => {
-    return (
-        <Text size="lg">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.
-        </Text>
-    );
-};
+return (
+
+<Text size="lg">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum
+  rhoncus.
+</Text>
+); };
 
 export default TextLgExample;
 ` } } />
@@ -90,12 +92,13 @@ import React from "react";
 import { Text } from "@webiny/admin-ui";
 
 const TextMdExample = () => {
-    return (
-        <Text size="md">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.
-        </Text>
-    );
-};
+return (
+
+<Text size="md">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum
+  rhoncus.
+</Text>
+); };
 
 export default TextMdExample;
 ` } } />
@@ -107,12 +110,13 @@ import React from "react";
 import { Text } from "@webiny/admin-ui";
 
 const TextSmExample = () => {
-    return (
-        <Text size="sm">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.
-        </Text>
-    );
-};
+return (
+
+<Text size="sm">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum
+  rhoncus.
+</Text>
+); };
 
 export default TextSmExample;
 ` } } />
@@ -126,15 +130,17 @@ import React from "react";
 import { Text } from "@webiny/admin-ui";
 
 const TextAsExample = () => {
-    return (
-        <>
-            {/* Render as a div element */}
-            <Text as="div" size="md">This text is rendered as a div</Text>
-
-            {/* Default is span */}
-            <Text size="md">This text is rendered as a span</Text>
-        </>
-    );
+  return (
+    <>
+      {/* Render as a div element */}
+      <Text as="div" size="md">
+        This text is rendered as a div
+      </Text>
+
+      {/* Default is span */}
+      <Text size="md">This text is rendered as a span</Text>
+    </>
+  );
 };
 
 export default TextAsExample;