@webiny/admin-ui 0.0.0-unstable.7be00a75a9 → 0.0.0-unstable.7c2def32a7

package/Avatar/Avatar.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar/Avatar.stories.js","sources":["../../src/Avatar/Avatar.stories.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { ReactComponent as StormIcon } from \"@webiny/icons/storm.svg\";\nimport { Avatar } from \"./Avatar.js\";\n\nconst meta: Meta<typeof Avatar> = {\n    title: \"Components/Avatar\",\n    component: Avatar,\n    argTypes: {\n        size: {\n            control: \"select\",\n            options: [\"sm\", \"md\", \"lg\", \"xl\"],\n            defaultValue: \"md\"\n        },\n        variant: {\n            control: \"select\",\n            options: [\"strong\", \"subtle\", \"light\", \"quiet\", \"outlined\"],\n            defaultValue: \"strong\"\n        }\n    }\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Avatar>;\n\nexport const Default: Story = {\n    args: {\n        image: <Avatar.Image src=\"https://i.pravatar.cc/300\" alt=\"@webiny\" />,\n        fallback: <Avatar.Fallback delayMs={0}>W</Avatar.Fallback>\n    }\n};\n\nexport const SizeSm: Story = {\n    name: \"Small\",\n    args: {\n        ...Default.args,\n        size: \"sm\"\n    }\n};\nexport const SizeMd: Story = {\n    name: \"Medium\",\n    args: {\n        ...Default.args,\n        size: \"md\"\n    }\n};\n\nexport const SizeLg: Story = {\n    name: \"Large\",\n    args: {\n        ...Default.args,\n        size: \"lg\"\n    }\n};\n\nexport const SizeXl: Story = {\n    name: \"Extra Large\",\n    args: {\n        ...Default.args,\n        size: \"xl\"\n    }\n};\n\nexport const Text: Story = {\n    name: \"Fallback Text\",\n    args: {\n        fallback: <Avatar.Fallback>SH</Avatar.Fallback>\n    }\n};\nexport const Icon: Story = {\n    name: \"Icon\",\n    args: {\n        fallback: (\n            <Avatar.Fallback>\n                <StormIcon />\n            </Avatar.Fallback>\n        )\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        return (\n            <Avatar\n                {...args}\n                image={args.image || <Avatar.Image src=\"https://i.pravatar.cc/300\" alt=\"@webiny\" />}\n                fallback={args.fallback || <Avatar.Fallback delayMs={0}>W</Avatar.Fallback>}\n            />\n        );\n    },\n    args: {\n        size: \"md\",\n        variant: \"strong\",\n        image: undefined,\n        fallback: undefined,\n        className: \"commas, separated, class, name\"\n    },\n    argTypes: {\n        size: {\n            description: \"Controls the size of the avatar\",\n            control: \"select\",\n            options: [\"sm\", \"md\", \"lg\", \"xl\"],\n            defaultValue: \"md\"\n        },\n        variant: {\n            description: \"Controls the visual style of the avatar\",\n            control: \"select\",\n            options: [\"strong\", \"subtle\", \"light\", \"quiet\", \"outlined\"],\n            defaultValue: \"strong\"\n        },\n        image: {\n            description:\n                \"The image element to display. Please refer to the example code for details on usage.\"\n        },\n        fallback: {\n            description:\n                \"The fallback element to display when the image fails to load. Please refer to the example code for details on usage.\"\n        },\n        className: {\n            description:\n                \"Additional CSS class names. You can pass multiple class names, separated by commas.\",\n            placeholder: \"Enter class names, separated by commas.\",\n            control: \"text\"\n        }\n    }\n};\n"],"names":["meta","Avatar","Default","SizeSm","SizeMd","SizeLg","SizeXl","Text","Icon","StormIcon","Documentation","args","undefined"],"mappings":";;;AAKA,MAAMA,OAA4B;IAC9B,OAAO;IACP,WAAWC;IACX,UAAU;QACN,MAAM;YACF,SAAS;YACT,SAAS;gBAAC;gBAAM;gBAAM;gBAAM;aAAK;YACjC,cAAc;QAClB;QACA,SAAS;YACL,SAAS;YACT,SAAS;gBAAC;gBAAU;gBAAU;gBAAS;gBAAS;aAAW;YAC3D,cAAc;QAClB;IACJ;AACJ;AAEA,uBAAeD;AAIR,MAAME,UAAiB;IAC1B,MAAM;QACF,OAAO,WAAP,GAAO,sCAACD,OAAO,KAAK;YAAC,KAAI;YAA4B,KAAI;;QACzD,UAAU,WAAV,GAAU,sCAACA,OAAO,QAAQ;YAAC,SAAS;WAAG;IAC3C;AACJ;AAEO,MAAME,SAAgB;IACzB,MAAM;IACN,MAAM;QACF,GAAGD,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AACO,MAAME,SAAgB;IACzB,MAAM;IACN,MAAM;QACF,GAAGF,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMG,SAAgB;IACzB,MAAM;IACN,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMI,SAAgB;IACzB,MAAM;IACN,MAAM;QACF,GAAGJ,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMK,OAAc;IACvB,MAAM;IACN,MAAM;QACF,UAAU,WAAV,GAAU,sCAACN,OAAO,QAAQ,QAAC;IAC/B;AACJ;AACO,MAAMO,OAAc;IACvB,MAAM;IACN,MAAM;QACF,UAAU,WAAV,GACI,sCAACP,OAAO,QAAQ,sBACZ,sCAACQ,gBAASA;IAGtB;AACJ;AAEO,MAAMC,gBAAuB;IAChC,QAAQC,CAAAA,OACG,WAAP,GACI,sCAACV,QAAMA;YACF,GAAGU,IAAI;YACR,OAAOA,KAAK,KAAK,IAAI,WAAJ,GAAI,sCAACV,OAAO,KAAK;gBAAC,KAAI;gBAA4B,KAAI;;YACvE,UAAUU,KAAK,QAAQ,IAAI,WAAJ,GAAI,sCAACV,OAAO,QAAQ;gBAAC,SAAS;eAAG;;IAIpE,MAAM;QACF,MAAM;QACN,SAAS;QACT,OAAOW;QACP,UAAUA;QACV,WAAW;IACf;IACA,UAAU;QACN,MAAM;YACF,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAM;gBAAM;gBAAM;aAAK;YACjC,cAAc;QAClB;QACA,SAAS;YACL,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAU;gBAAU;gBAAS;gBAAS;aAAW;YAC3D,cAAc;QAClB;QACA,OAAO;YACH,aACI;QACR;QACA,UAAU;YACN,aACI;QACR;QACA,WAAW;YACP,aACI;YACJ,aAAa;YACb,SAAS;QACb;IACJ;AACJ"}
+{"version":3,"file":"Avatar/Avatar.stories.js","sources":["../../src/Avatar/Avatar.stories.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { ReactComponent as StormIcon } from \"@webiny/icons/storm.svg\";\nimport { Avatar } from \"./Avatar.js\";\n\nconst meta: Meta<typeof Avatar> = {\n    title: \"Components/Avatar\",\n    component: Avatar,\n    argTypes: {\n        size: {\n            control: \"select\",\n            options: [\"sm\", \"md\", \"lg\", \"xl\"],\n            defaultValue: \"md\"\n        },\n        variant: {\n            control: \"select\",\n            options: [\"strong\", \"subtle\", \"light\", \"quiet\", \"outlined\"],\n            defaultValue: \"strong\"\n        }\n    }\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Avatar>;\n\nexport const Default: Story = {\n    args: {\n        image: <Avatar.Image src=\"https://i.pravatar.cc/300\" alt=\"@webiny\" />,\n        fallback: <Avatar.Fallback delayMs={0}>W</Avatar.Fallback>\n    }\n};\n\nexport const SizeSm: Story = {\n    name: \"Small\",\n    args: {\n        ...Default.args,\n        size: \"sm\"\n    }\n};\nexport const SizeMd: Story = {\n    name: \"Medium\",\n    args: {\n        ...Default.args,\n        size: \"md\"\n    }\n};\n\nexport const SizeLg: Story = {\n    name: \"Large\",\n    args: {\n        ...Default.args,\n        size: \"lg\"\n    }\n};\n\nexport const SizeXl: Story = {\n    name: \"Extra Large\",\n    args: {\n        ...Default.args,\n        size: \"xl\"\n    }\n};\n\nexport const Text: Story = {\n    name: \"Fallback Text\",\n    args: {\n        fallback: <Avatar.Fallback>SH</Avatar.Fallback>\n    }\n};\nexport const Icon: Story = {\n    name: \"Icon\",\n    args: {\n        fallback: (\n            <Avatar.Fallback>\n                <StormIcon />\n            </Avatar.Fallback>\n        )\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        return (\n            <Avatar\n                {...args}\n                image={args.image || <Avatar.Image src=\"https://i.pravatar.cc/300\" alt=\"@webiny\" />}\n                fallback={args.fallback || <Avatar.Fallback delayMs={0}>W</Avatar.Fallback>}\n            />\n        );\n    },\n    args: {\n        size: \"md\",\n        variant: \"strong\",\n        image: undefined,\n        fallback: undefined,\n        className: \"commas, separated, class, name\"\n    },\n    argTypes: {\n        size: {\n            description: \"Controls the size of the avatar\",\n            control: \"select\",\n            options: [\"sm\", \"md\", \"lg\", \"xl\"],\n            defaultValue: \"md\"\n        },\n        variant: {\n            description: \"Controls the visual style of the avatar\",\n            control: \"select\",\n            options: [\"strong\", \"subtle\", \"light\", \"quiet\", \"outlined\"],\n            defaultValue: \"strong\"\n        },\n        image: {\n            description:\n                \"The image element to display. Please refer to the example code for details on usage.\"\n        },\n        fallback: {\n            description:\n                \"The fallback element to display when the image fails to load. Please refer to the example code for details on usage.\"\n        },\n        className: {\n            description:\n                \"Additional CSS class names. You can pass multiple class names, separated by commas.\",\n            placeholder: \"Enter class names, separated by commas.\",\n            control: \"text\"\n        }\n    }\n};\n"],"names":["meta","Avatar","Default","SizeSm","SizeMd","SizeLg","SizeXl","Text","Icon","StormIcon","Documentation","args","undefined"],"mappings":";;;AAKA,MAAMA,OAA4B;IAC9B,OAAO;IACP,WAAWC;IACX,UAAU;QACN,MAAM;YACF,SAAS;YACT,SAAS;gBAAC;gBAAM;gBAAM;gBAAM;aAAK;YACjC,cAAc;QAClB;QACA,SAAS;YACL,SAAS;YACT,SAAS;gBAAC;gBAAU;gBAAU;gBAAS;gBAAS;aAAW;YAC3D,cAAc;QAClB;IACJ;AACJ;AAEA,uBAAeD;AAIR,MAAME,UAAiB;IAC1B,MAAM;QACF,OAAO,WAAP,GAAO,sCAACD,OAAO,KAAK;YAAC,KAAI;YAA4B,KAAI;;QACzD,UAAU,WAAV,GAAU,sCAACA,OAAO,QAAQ;YAAC,SAAS;WAAG;IAC3C;AACJ;AAEO,MAAME,SAAgB;IACzB,MAAM;IACN,MAAM;QACF,GAAGD,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AACO,MAAME,SAAgB;IACzB,MAAM;IACN,MAAM;QACF,GAAGF,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMG,SAAgB;IACzB,MAAM;IACN,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMI,SAAgB;IACzB,MAAM;IACN,MAAM;QACF,GAAGJ,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMK,OAAc;IACvB,MAAM;IACN,MAAM;QACF,UAAU,WAAV,GAAU,sCAACN,OAAO,QAAQ,QAAC;IAC/B;AACJ;AACO,MAAMO,OAAc;IACvB,MAAM;IACN,MAAM;QACF,UAAU,WAAV,GACI,sCAACP,OAAO,QAAQ,sBACZ,sCAACQ,gBAASA;IAGtB;AACJ;AAEO,MAAMC,gBAAuB;IAChC,QAAQC,CAAAA,OACG,WAAP,GACI,sCAACV,QAAMA;YACF,GAAGU,IAAI;YACR,OAAOA,KAAK,KAAK,IAAI,WAAJ,GAAI,sCAACV,OAAO,KAAK;gBAAC,KAAI;gBAA4B,KAAI;;YACvE,UAAUU,KAAK,QAAQ,IAAI,WAAJ,GAAI,sCAACV,OAAO,QAAQ;gBAAC,SAAS;eAAG;;IAIpE,MAAM;QACF,MAAM;QACN,SAAS;QACT,OAAOW;QACP,UAAUA;QACV,WAAW;IACf;IACA,UAAU;QACN,MAAM;YACF,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAM;gBAAM;gBAAM;aAAK;YACjC,cAAc;QAClB;QACA,SAAS;YACL,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAU;gBAAU;gBAAS;gBAAS;aAAW;YAC3D,cAAc;QAClB;QACA,OAAO;YACH,aACI;QACR;QACA,UAAU;YACN,aACI;QACR;QACA,WAAW;YACP,aACI;YACJ,aAAa;YACb,SAAS;QACb;IACJ;AACJ"}

package/Avatar/components/AvatarFallback.d.ts

@@ -1,21 +1,22 @@
 import * as React from "react";
 import { Avatar as AvatarPrimitive } from "radix-ui";
 type AvatarFallbackProps = AvatarPrimitive.AvatarFallbackProps;
-declare const AvatarFallback: (({ className, ...props }: AvatarFallbackProps) => React.JSX.Element) & {
-    original: ({ className, ...props }: AvatarFallbackProps) => React.JSX.Element;
+declare const AvatarFallbackBase: ({ className, ...props }: AvatarFallbackProps) => React.JSX.Element;
+declare const AvatarFallback: typeof AvatarFallbackBase & {
+    original: typeof AvatarFallbackBase;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ className, ...props }: AvatarFallbackProps) => React.JSX.Element) & {
-        original: ({ className, ...props }: AvatarFallbackProps) => React.JSX.Element;
+    original: typeof AvatarFallbackBase & {
+        original: typeof AvatarFallbackBase;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<(({ className, ...props }: AvatarFallbackProps) => React.JSX.Element) & {
-        original: ({ className, ...props }: AvatarFallbackProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<typeof AvatarFallbackBase & {
+        original: typeof AvatarFallbackBase;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/Avatar/components/AvatarImage.d.ts

@@ -1,21 +1,22 @@
 import * as React from "react";
 import { Avatar as AvatarPrimitive } from "radix-ui";
 type AvatarImageProps = AvatarPrimitive.AvatarImageProps;
-declare const AvatarImage: (({ className, ...props }: AvatarImageProps) => React.JSX.Element) & {
-    original: ({ className, ...props }: AvatarImageProps) => React.JSX.Element;
+declare const AvatarImageBase: ({ className, ...props }: AvatarImageProps) => React.JSX.Element;
+declare const AvatarImage: typeof AvatarImageBase & {
+    original: typeof AvatarImageBase;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ className, ...props }: AvatarImageProps) => React.JSX.Element) & {
-        original: ({ className, ...props }: AvatarImageProps) => React.JSX.Element;
+    original: typeof AvatarImageBase & {
+        original: typeof AvatarImageBase;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<(({ className, ...props }: AvatarImageProps) => React.JSX.Element) & {
-        original: ({ className, ...props }: AvatarImageProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<typeof AvatarImageBase & {
+        original: typeof AvatarImageBase;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/BetaBadge/BetaBadge.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+interface BetaBadgeProps {
+    text?: React.ReactNode;
+}
+declare const BetaBadge: ({ text }: BetaBadgeProps) => React.JSX.Element;
+export { BetaBadge, type BetaBadgeProps };

package/BetaBadge/BetaBadge.js

@@ -0,0 +1,7 @@
+import react from "react";
+const BetaBadge = ({ text = "beta" })=>/*#__PURE__*/ react.createElement("span", {
+        className: "inline-flex items-center rounded-sm bg-primary/50 px-xs text-[10px] font-semibold text-neutral-light leading-none h-md shrink-0"
+    }, text);
+export { BetaBadge };
+
+//# sourceMappingURL=BetaBadge.js.map

package/BetaBadge/BetaBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BetaBadge/BetaBadge.js","sources":["../../src/BetaBadge/BetaBadge.tsx"],"sourcesContent":["import React from \"react\";\n\ninterface BetaBadgeProps {\n    text?: React.ReactNode;\n}\n\nconst BetaBadge = ({ text = \"beta\" }: BetaBadgeProps) => {\n    return (\n        <span\n            className={\n                \"inline-flex items-center rounded-sm bg-primary/50 px-xs text-[10px] font-semibold text-neutral-light leading-none h-md shrink-0\"\n            }\n        >\n            {text}\n        </span>\n    );\n};\n\nexport { BetaBadge, type BetaBadgeProps };\n"],"names":["BetaBadge","text"],"mappings":";AAMA,MAAMA,YAAY,CAAC,EAAEC,OAAO,MAAM,EAAkB,GACzC,WAAP,GACI,oBAAC;QACG,WACI;OAGHA"}

package/Breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,54 @@
+import React from "react";
+export interface BreadcrumbsItem {
+    /**
+     * Text label of the breadcrumb. Omitted for the leading home item, which is icon-only.
+     */
+    label?: string;
+    /**
+     * Leading icon. Used by the home item; other items typically render text only. Sized and
+     * colored by the breadcrumb — pass the raw icon component (e.g. `<HomeIcon />`).
+     */
+    icon?: React.ReactNode;
+    /**
+     * Full, untruncated text used as the item's `title` (native tooltip). Defaults to `label`.
+     */
+    title?: string;
+    /**
+     * Navigates when the item is activated. Omitted (or on the current item) renders a
+     * non-interactive item.
+     */
+    onClick?: () => void;
+    /**
+     * Marks the current location — the last item in the trail. Rendered with stronger text
+     * and never interactive, per the design system's breadcrumb guidelines.
+     */
+    current?: boolean;
+}
+export interface BreadcrumbsProps extends React.HTMLAttributes<HTMLElement> {
+    items: BreadcrumbsItem[];
+}
+declare const BreadcrumbsBase: ({ items, className, ...props }: BreadcrumbsProps) => React.JSX.Element | null;
+declare const Breadcrumbs: typeof BreadcrumbsBase & {
+    original: typeof BreadcrumbsBase;
+    originalName: string;
+    displayName: string;
+} & {
+    original: typeof BreadcrumbsBase & {
+        original: typeof BreadcrumbsBase;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<typeof BreadcrumbsBase & {
+        original: typeof BreadcrumbsBase;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+/**
+ * Convenience factory for the leading, icon-only home entry.
+ */
+export declare const createHomeBreadcrumbItem: (onClick?: () => void) => BreadcrumbsItem;
+export { Breadcrumbs };

package/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,66 @@
+import react from "react";
+import { ReactComponent } from "@webiny/icons/home.svg";
+import { ReactComponent as keyboard_arrow_right_svg_ReactComponent } from "@webiny/icons/keyboard_arrow_right.svg";
+import { cn, makeDecoratable } from "../utils.js";
+const itemTextClassName = "block max-w-[150px] truncate text-sm tracking-normal whitespace-nowrap";
+const glyphClassName = "size-md shrink-0 fill-current";
+const renderGlyph = (icon)=>{
+    if (!/*#__PURE__*/ react.isValidElement(icon)) return icon;
+    const element = icon;
+    return /*#__PURE__*/ react.cloneElement(element, {
+        className: cn(glyphClassName, element.props.className)
+    });
+};
+const BreadcrumbItem = ({ item })=>{
+    const interactive = Boolean(item.onClick) && !item.current;
+    const title = item.title ?? item.label;
+    const content = /*#__PURE__*/ react.createElement("span", {
+        className: "flex items-center gap-xs"
+    }, item.icon ? renderGlyph(item.icon) : null, item.label ? /*#__PURE__*/ react.createElement("span", {
+        className: itemTextClassName
+    }, item.label) : null);
+    if (!interactive) return /*#__PURE__*/ react.createElement("span", {
+        "aria-current": item.current ? "page" : void 0,
+        title: title,
+        className: cn("flex items-center rounded-sm px-xs py-xxs", item.current ? "text-neutral-primary" : "text-neutral-muted")
+    }, content);
+    return /*#__PURE__*/ react.createElement("button", {
+        type: "button",
+        onClick: item.onClick,
+        title: title,
+        className: cn("flex items-center rounded-sm px-xs py-xxs", "cursor-pointer text-neutral-muted transition-colors", "hover:bg-neutral-dimmed hover:text-neutral-primary", "focus-visible:outline-none focus-visible:ring-md focus-visible:ring-primary-dimmed")
+    }, content);
+};
+const BreadcrumbSeparator = ()=>/*#__PURE__*/ react.createElement("span", {
+        "aria-hidden": "true",
+        className: "flex items-center text-neutral-muted"
+    }, /*#__PURE__*/ react.createElement(keyboard_arrow_right_svg_ReactComponent, {
+        className: glyphClassName
+    }));
+const BreadcrumbsBase = ({ items, className, ...props })=>{
+    if (0 === items.length) return null;
+    return /*#__PURE__*/ react.createElement("nav", {
+        "aria-label": "Breadcrumb",
+        className: cn("flex items-center", className),
+        ...props
+    }, /*#__PURE__*/ react.createElement("ol", {
+        className: "flex items-center gap-none"
+    }, items.map((item, index)=>{
+        const key = `${item.label ?? "home"}-${index}`;
+        return /*#__PURE__*/ react.createElement("li", {
+            key: key,
+            className: "flex items-center"
+        }, index > 0 ? /*#__PURE__*/ react.createElement(BreadcrumbSeparator, null) : null, /*#__PURE__*/ react.createElement(BreadcrumbItem, {
+            item: item
+        }));
+    })));
+};
+const Breadcrumbs = makeDecoratable("Breadcrumbs", BreadcrumbsBase);
+const createHomeBreadcrumbItem = (onClick)=>({
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        title: "Home",
+        onClick
+    });
+export { Breadcrumbs, createHomeBreadcrumbItem };
+
+//# sourceMappingURL=Breadcrumbs.js.map

package/Breadcrumbs/Breadcrumbs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumbs/Breadcrumbs.js","sources":["../../src/Breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as HomeIcon } from \"@webiny/icons/home.svg\";\nimport { ReactComponent as SeparatorIcon } from \"@webiny/icons/keyboard_arrow_right.svg\";\nimport { cn } from \"~/utils.js\";\nimport { makeDecoratable } from \"~/utils.js\";\n\nexport interface BreadcrumbsItem {\n    /**\n     * Text label of the breadcrumb. Omitted for the leading home item, which is icon-only.\n     */\n    label?: string;\n    /**\n     * Leading icon. Used by the home item; other items typically render text only. Sized and\n     * colored by the breadcrumb — pass the raw icon component (e.g. `<HomeIcon />`).\n     */\n    icon?: React.ReactNode;\n    /**\n     * Full, untruncated text used as the item's `title` (native tooltip). Defaults to `label`.\n     */\n    title?: string;\n    /**\n     * Navigates when the item is activated. Omitted (or on the current item) renders a\n     * non-interactive item.\n     */\n    onClick?: () => void;\n    /**\n     * Marks the current location — the last item in the trail. Rendered with stronger text\n     * and never interactive, per the design system's breadcrumb guidelines.\n     */\n    current?: boolean;\n}\n\nexport interface BreadcrumbsProps extends React.HTMLAttributes<HTMLElement> {\n    items: BreadcrumbsItem[];\n}\n\nconst itemTextClassName = \"block max-w-[150px] truncate text-sm tracking-normal whitespace-nowrap\";\n\n// The material glyphs default their `fill` to `currentColor`, so the surrounding text color\n// (muted / primary / hover) drives the icon color too.\nconst glyphClassName = \"size-md shrink-0 fill-current\";\n\nconst renderGlyph = (icon: React.ReactNode) => {\n    if (!React.isValidElement(icon)) {\n        return icon;\n    }\n    const element = icon as React.ReactElement<{ className?: string }>;\n    return React.cloneElement(element, {\n        className: cn(glyphClassName, element.props.className)\n    });\n};\n\nconst BreadcrumbItem = ({ item }: { item: BreadcrumbsItem }) => {\n    const interactive = Boolean(item.onClick) && !item.current;\n    const title = item.title ?? item.label;\n\n    const content = (\n        <span className=\"flex items-center gap-xs\">\n            {item.icon ? renderGlyph(item.icon) : null}\n            {item.label ? <span className={itemTextClassName}>{item.label}</span> : null}\n        </span>\n    );\n\n    // The current (active) item and any item without an action render as plain text.\n    if (!interactive) {\n        return (\n            <span\n                aria-current={item.current ? \"page\" : undefined}\n                title={title}\n                className={cn(\n                    \"flex items-center rounded-sm px-xs py-xxs\",\n                    item.current ? \"text-neutral-primary\" : \"text-neutral-muted\"\n                )}\n            >\n                {content}\n            </span>\n        );\n    }\n\n    return (\n        <button\n            type=\"button\"\n            onClick={item.onClick}\n            title={title}\n            className={cn(\n                \"flex items-center rounded-sm px-xs py-xxs\",\n                \"cursor-pointer text-neutral-muted transition-colors\",\n                \"hover:bg-neutral-dimmed hover:text-neutral-primary\",\n                \"focus-visible:outline-none focus-visible:ring-md focus-visible:ring-primary-dimmed\"\n            )}\n        >\n            {content}\n        </button>\n    );\n};\n\nconst BreadcrumbSeparator = () => {\n    return (\n        <span aria-hidden=\"true\" className=\"flex items-center text-neutral-muted\">\n            <SeparatorIcon className={glyphClassName} />\n        </span>\n    );\n};\n\nconst BreadcrumbsBase = ({ items, className, ...props }: BreadcrumbsProps) => {\n    if (items.length === 0) {\n        return null;\n    }\n\n    return (\n        <nav aria-label=\"Breadcrumb\" className={cn(\"flex items-center\", className)} {...props}>\n            <ol className=\"flex items-center gap-none\">\n                {items.map((item, index) => {\n                    // A stable-enough key: labels are unique within a trail; index breaks ties.\n                    const key = `${item.label ?? \"home\"}-${index}`;\n                    return (\n                        <li key={key} className=\"flex items-center\">\n                            {index > 0 ? <BreadcrumbSeparator /> : null}\n                            <BreadcrumbItem item={item} />\n                        </li>\n                    );\n                })}\n            </ol>\n        </nav>\n    );\n};\n\nconst Breadcrumbs = makeDecoratable(\"Breadcrumbs\", BreadcrumbsBase);\n\n/**\n * Convenience factory for the leading, icon-only home entry.\n */\nexport const createHomeBreadcrumbItem = (onClick?: () => void): BreadcrumbsItem => ({\n    icon: <HomeIcon />,\n    title: \"Home\",\n    onClick\n});\n\nexport { Breadcrumbs };\n"],"names":["itemTextClassName","glyphClassName","renderGlyph","icon","React","element","cn","BreadcrumbItem","item","interactive","Boolean","title","content","undefined","BreadcrumbSeparator","SeparatorIcon","BreadcrumbsBase","items","className","props","index","key","Breadcrumbs","makeDecoratable","createHomeBreadcrumbItem","onClick","HomeIcon"],"mappings":";;;;AAoCA,MAAMA,oBAAoB;AAI1B,MAAMC,iBAAiB;AAEvB,MAAMC,cAAc,CAACC;IACjB,IAAI,CAAC,WAAD,GAACC,MAAAA,cAAoB,CAACD,OACtB,OAAOA;IAEX,MAAME,UAAUF;IAChB,OAAO,WAAP,GAAOC,MAAAA,YAAkB,CAACC,SAAS;QAC/B,WAAWC,GAAGL,gBAAgBI,QAAQ,KAAK,CAAC,SAAS;IACzD;AACJ;AAEA,MAAME,iBAAiB,CAAC,EAAEC,IAAI,EAA6B;IACvD,MAAMC,cAAcC,QAAQF,KAAK,OAAO,KAAK,CAACA,KAAK,OAAO;IAC1D,MAAMG,QAAQH,KAAK,KAAK,IAAIA,KAAK,KAAK;IAEtC,MAAMI,UAAU,WAAVA,GACF,oBAAC;QAAK,WAAU;OACXJ,KAAK,IAAI,GAAGN,YAAYM,KAAK,IAAI,IAAI,MACrCA,KAAK,KAAK,GAAG,WAAH,GAAG,oBAAC;QAAK,WAAWR;OAAoBQ,KAAK,KAAK,IAAW;IAKhF,IAAI,CAACC,aACD,OAAO,WAAP,GACI,oBAAC;QACG,gBAAcD,KAAK,OAAO,GAAG,SAASK;QACtC,OAAOF;QACP,WAAWL,GACP,6CACAE,KAAK,OAAO,GAAG,yBAAyB;OAG3CI;IAKb,OAAO,WAAP,GACI,oBAAC;QACG,MAAK;QACL,SAASJ,KAAK,OAAO;QACrB,OAAOG;QACP,WAAWL,GACP,6CACA,uDACA,sDACA;OAGHM;AAGb;AAEA,MAAME,sBAAsB,IACjB,WAAP,GACI,oBAAC;QAAK,eAAY;QAAO,WAAU;qBAC/B,oBAACC,yCAAaA;QAAC,WAAWd;;AAKtC,MAAMe,kBAAkB,CAAC,EAAEC,KAAK,EAAEC,SAAS,EAAE,GAAGC,OAAyB;IACrE,IAAIF,AAAiB,MAAjBA,MAAM,MAAM,EACZ,OAAO;IAGX,OAAO,WAAP,GACI,oBAAC;QAAI,cAAW;QAAa,WAAWX,GAAG,qBAAqBY;QAAa,GAAGC,KAAK;qBACjF,oBAAC;QAAG,WAAU;OACTF,MAAM,GAAG,CAAC,CAACT,MAAMY;QAEd,MAAMC,MAAM,GAAGb,KAAK,KAAK,IAAI,OAAO,CAAC,EAAEY,OAAO;QAC9C,OAAO,WAAP,GACI,oBAAC;YAAG,KAAKC;YAAK,WAAU;WACnBD,QAAQ,IAAI,WAAJ,GAAI,oBAACN,qBAAmBA,QAAM,oBACvC,oBAACP,gBAAcA;YAAC,MAAMC;;IAGlC;AAIhB;AAEA,MAAMc,cAAcC,gBAAgB,eAAeP;AAK5C,MAAMQ,2BAA2B,CAACC,UAA2C;QAChF,MAAM,WAAN,GAAM,oBAACC,gBAAQA;QACf,OAAO;QACPD;IACJ"}

package/Breadcrumbs/Breadcrumbs.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta } from "@storybook/react";
+import type { StoryObj } from "@storybook/react";
+import { Breadcrumbs } from "./Breadcrumbs.js";
+declare const meta: Meta<typeof Breadcrumbs>;
+export default meta;
+type Story = StoryObj<typeof Breadcrumbs>;
+export declare const Default: Story;
+export declare const DeepTrail: Story;
+export declare const HomeOnly: Story;

package/Breadcrumbs/Breadcrumbs.stories.js

@@ -0,0 +1,71 @@
+import react from "react";
+import { ReactComponent } from "@webiny/icons/home.svg";
+import { Breadcrumbs } from "./Breadcrumbs.js";
+const meta = {
+    title: "Components/Breadcrumbs",
+    component: Breadcrumbs,
+    decorators: [
+        (Story)=>/*#__PURE__*/ react.createElement("div", {
+                className: "w-[850px] rounded-sm bg-neutral-base px-md py-xs-plus"
+            }, /*#__PURE__*/ react.createElement(Story, null))
+    ]
+};
+const Breadcrumbs_stories = meta;
+const noop = ()=>void 0;
+const Default = {
+    args: {
+        items: [
+            {
+                icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+                title: "Home",
+                onClick: noop
+            },
+            {
+                label: "Page Builder",
+                onClick: noop
+            },
+            {
+                label: "Articles",
+                current: true
+            }
+        ]
+    }
+};
+const DeepTrail = {
+    args: {
+        items: [
+            {
+                icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+                title: "Home",
+                onClick: noop
+            },
+            {
+                label: "Headless CMS",
+                onClick: noop
+            },
+            {
+                label: "Articles",
+                onClick: noop
+            },
+            {
+                label: "The best article ever written about breadcrumbs",
+                current: true
+            }
+        ]
+    }
+};
+const HomeOnly = {
+    args: {
+        items: [
+            {
+                icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+                title: "Home",
+                current: true
+            }
+        ]
+    }
+};
+export default Breadcrumbs_stories;
+export { DeepTrail, Default, HomeOnly };
+
+//# sourceMappingURL=Breadcrumbs.stories.js.map

package/Breadcrumbs/Breadcrumbs.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumbs/Breadcrumbs.stories.js","sources":["../../src/Breadcrumbs/Breadcrumbs.stories.tsx"],"sourcesContent":["import type { Meta } from \"@storybook/react\";\nimport type { StoryObj } from \"@storybook/react\";\nimport React from \"react\";\nimport { ReactComponent as HomeIcon } from \"@webiny/icons/home.svg\";\nimport { Breadcrumbs } from \"./Breadcrumbs.js\";\n\nconst meta: Meta<typeof Breadcrumbs> = {\n    title: \"Components/Breadcrumbs\",\n    component: Breadcrumbs,\n    decorators: [\n        Story => (\n            <div className=\"w-[850px] rounded-sm bg-neutral-base px-md py-xs-plus\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Breadcrumbs>;\n\nconst noop = () => undefined;\n\nexport const Default: Story = {\n    args: {\n        items: [\n            { icon: <HomeIcon />, title: \"Home\", onClick: noop },\n            { label: \"Page Builder\", onClick: noop },\n            { label: \"Articles\", current: true }\n        ]\n    }\n};\n\nexport const DeepTrail: Story = {\n    args: {\n        items: [\n            { icon: <HomeIcon />, title: \"Home\", onClick: noop },\n            { label: \"Headless CMS\", onClick: noop },\n            { label: \"Articles\", onClick: noop },\n            { label: \"The best article ever written about breadcrumbs\", current: true }\n        ]\n    }\n};\n\nexport const HomeOnly: Story = {\n    args: {\n        items: [{ icon: <HomeIcon />, title: \"Home\", current: true }]\n    }\n};\n"],"names":["meta","Breadcrumbs","Story","noop","undefined","Default","HomeIcon","DeepTrail","HomeOnly"],"mappings":";;;AAMA,MAAMA,OAAiC;IACnC,OAAO;IACP,WAAWC;IACX,YAAY;QACRC,CAAAA,QAAAA,WAAAA,GACI,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;AACL;AAEA,4BAAeF;AAIf,MAAMG,OAAO,IAAMC;AAEZ,MAAMC,UAAiB;IAC1B,MAAM;QACF,OAAO;YACH;gBAAE,MAAM,WAAN,GAAM,oBAACC,gBAAQA;gBAAK,OAAO;gBAAQ,SAASH;YAAK;YACnD;gBAAE,OAAO;gBAAgB,SAASA;YAAK;YACvC;gBAAE,OAAO;gBAAY,SAAS;YAAK;SACtC;IACL;AACJ;AAEO,MAAMI,YAAmB;IAC5B,MAAM;QACF,OAAO;YACH;gBAAE,MAAM,WAAN,GAAM,oBAACD,gBAAQA;gBAAK,OAAO;gBAAQ,SAASH;YAAK;YACnD;gBAAE,OAAO;gBAAgB,SAASA;YAAK;YACvC;gBAAE,OAAO;gBAAY,SAASA;YAAK;YACnC;gBAAE,OAAO;gBAAmD,SAAS;YAAK;SAC7E;IACL;AACJ;AAEO,MAAMK,WAAkB;IAC3B,MAAM;QACF,OAAO;YAAC;gBAAE,MAAM,WAAN,GAAM,oBAACF,gBAAQA;gBAAK,OAAO;gBAAQ,SAAS;YAAK;SAAE;IACjE;AACJ"}

package/Breadcrumbs/index.d.ts

@@ -0,0 +1 @@
+export * from "./Breadcrumbs.js";

package/Breadcrumbs/index.js

@@ -0,0 +1 @@
+export * from "./Breadcrumbs.js";

package/Button/Button.d.ts

@@ -1,9 +1,9 @@
 import React from "react";
 import { type VariantProps } from "../utils.js";
 declare const buttonVariants: (props?: ({
-    variant?: "primary" | "secondary" | "tertiary" | "ghost" | "ghost-negative" | null | undefined;
-    size?: "sm" | "md" | "lg" | "xl" | null | undefined;
-    contentLayout?: "text" | "icon" | "text-icon-start" | "text-icon-end" | null | undefined;
+    variant?: "ghost" | "ghost-negative" | "link" | "primary" | "secondary" | "tertiary" | null | undefined;
+    size?: "lg" | "md" | "sm" | "xl" | null | undefined;
+    contentLayout?: "icon" | "text" | "text-icon-end" | "text-icon-start" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children">, VariantProps<typeof buttonVariants> {
     text?: React.ReactNode;
@@ -13,21 +13,22 @@ interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>
     asChild?: boolean;
     containerClassName?: string;
 }
-declare const Button: (({ className, variant, size, asChild, text, children, icon, iconPosition, disabled, containerClassName, ...rest }: ButtonProps) => React.JSX.Element) & {
-    original: ({ className, variant, size, asChild, text, children, icon, iconPosition, disabled, containerClassName, ...rest }: ButtonProps) => React.JSX.Element;
+declare const ButtonBase: ({ className, variant, size, asChild, text, children, icon, iconPosition, disabled, containerClassName, ...rest }: ButtonProps) => React.JSX.Element;
+declare const Button: typeof ButtonBase & {
+    original: typeof ButtonBase;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ className, variant, size, asChild, text, children, icon, iconPosition, disabled, containerClassName, ...rest }: ButtonProps) => React.JSX.Element) & {
-        original: ({ className, variant, size, asChild, text, children, icon, iconPosition, disabled, containerClassName, ...rest }: ButtonProps) => React.JSX.Element;
+    original: typeof ButtonBase & {
+        original: typeof ButtonBase;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<(({ className, variant, size, asChild, text, children, icon, iconPosition, disabled, containerClassName, ...rest }: ButtonProps) => React.JSX.Element) & {
-        original: ({ className, variant, size, asChild, text, children, icon, iconPosition, disabled, containerClassName, ...rest }: ButtonProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<typeof ButtonBase & {
+        original: typeof ButtonBase;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/Button/Button.js

@@ -48,6 +48,13 @@ const buttonVariants = cva([
                 "active:bg-neutral-base/30",
                 "aria-disabled:text-neutral-disabled aria-disabled:fill-neutral-base/50",
                 "focus-visible:border-neutral-base!"
+            ],
+            link: [
+                "bg-transparent text-accent-primary fill-accent-default",
+                "p-0! border-0! rounded-xs",
+                "hover:underline!",
+                "aria-disabled:text-neutral-disabled aria-disabled:fill-neutral-strong",
+                "focus-visible:ring-lg focus-visible:ring-primary-dimmed"
             ]
         },
         size: {

package/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button/Button.js","sources":["../../src/Button/Button.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { Slot } from \"radix-ui\";\nimport { cn, cva, type VariantProps, makeDecoratable } from \"~/utils.js\";\n\nconst buttonWrapperVariants = cva(\"inline-block\", {\n    variants: {\n        disabled: {\n            true: \"cursor-not-allowed\"\n        }\n    }\n});\n\nconst buttonVariants = cva(\n    [\n        \"border-transparent rounded font-sans inline-flex items-center justify-center whitespace-nowrap ring-offset-background transition-colors no-underline! cursor-pointer\",\n        \"aria-disabled:pointer-events-none\",\n        \"focus-visible:outline-none focus-visible:border-accent-default\"\n    ],\n    {\n        variants: {\n            variant: {\n                primary: [\n                    \"bg-primary text-neutral-light fill-neutral-base\",\n                    \"hover:bg-primary-strong\",\n                    \"active:bg-primary-xstrong\",\n                    \"aria-disabled:bg-primary-disabled\",\n                    \"focus-visible:ring-lg focus-visible:ring-primary-dimmed\"\n                ],\n                secondary: [\n                    \"bg-neutral-dimmed text-neutral-strong fill-neutral-xstrong\",\n                    \"hover:bg-neutral-muted\",\n                    \"active:bg-neutral-strong\",\n                    \"aria-disabled:bg-neutral-disabled aria-disabled:text-neutral-disabled aria-disabled:fill-neutral-strong\",\n                    \"focus-visible:ring-lg focus-visible:ring-primary-dimmed\"\n                ],\n                tertiary: [\n                    \"bg-neutral-base text-neutral-strong border-neutral-muted fill-neutral-xstrong\",\n                    \"hover:bg-neutral-light\",\n                    \"active:bg-neutral-muted\",\n                    \"aria-disabled:bg-neutral-disabled aria-disabled:border-neutral-dimmed aria-disabled:text-neutral-disabled aria-disabled:fill-neutral-strong\",\n                    \"focus-visible:ring-lg focus-visible:ring-primary-dimmed\"\n                ],\n                ghost: [\n                    \"bg-transparent text-neutral-strong fill-neutral-xstrong\",\n                    \"hover:bg-neutral-dimmed\",\n                    \"active:bg-neutral-muted\",\n                    \"aria-disabled:text-neutral-disabled aria-disabled:fill-neutral-strong\"\n                ],\n                \"ghost-negative\": [\n                    \"bg-transparent text-neutral-light fill-neutral-base\",\n                    \"hover:bg-neutral-base/20\",\n                    \"active:bg-neutral-base/30\",\n                    \"aria-disabled:text-neutral-disabled aria-disabled:fill-neutral-base/50\",\n                    \"focus-visible:border-neutral-base!\"\n                ]\n            },\n            size: {\n                sm: [\n                    \"text-sm border-sm rounded-sm [&>svg]:size-md\",\n                    \"py-[calc(var(--padding-xs)-(var(--border-width-sm)))] px-[calc(var(--padding-sm)-(var(--border-width-sm)))]\"\n                ],\n                md: [\n                    \"text-md border-sm rounded-md [&>svg]:size-md\",\n                    \"py-[calc(var(--padding-xs-plus)-(var(--border-width-sm)))] px-[calc(var(--padding-sm-extra)-(var(--border-width-sm)))]\"\n                ],\n                lg: [\n                    \"text-md border-sm rounded-md [&>svg]:size-md-plus\",\n                    \"py-[calc(var(--padding-sm-plus)-(var(--border-width-sm)))] px-[calc(var(--padding-md)-(var(--border-width-sm)))]\"\n                ],\n                xl: [\n                    \"text-lg font-semibold border-lg rounded-md [&>svg]:size-lg\",\n                    \"py-[calc(theme(padding.md-plus)-(var(--border-width-md)))] px-[calc(var(--padding-md)-(var(--border-width-md)))]\"\n                ]\n            },\n            contentLayout: {\n                text: \"\",\n                icon: \"\",\n                \"text-icon-start\": \"\",\n                \"text-icon-end\": \"\"\n            }\n        },\n        compoundVariants: [\n            {\n                size: \"xl\",\n                variant: \"ghost\",\n                className: \"focus-visible:border-md\"\n            },\n            {\n                size: \"sm\",\n                contentLayout: \"icon\",\n                className: \"p-[calc(var(--padding-xs)-(var(--border-width-sm)))]\"\n            },\n            {\n                size: \"sm\",\n                contentLayout: \"text-icon-start\",\n                className: \"pl-[calc(var(--padding-xs)-(var(--border-width-sm)))] [&>svg]:mr-xs\"\n            },\n            {\n                size: \"sm\",\n                contentLayout: \"text-icon-end\",\n                className: \"pr-[calc(var(--padding-xs)-(var(--border-width-sm)))] [&>svg]:ml-xs\"\n            },\n            {\n                size: \"md\",\n                contentLayout: \"icon\",\n                className: \"p-[calc(var(--padding-sm)-(var(--border-width-sm)))]\"\n            },\n            {\n                size: \"md\",\n                contentLayout: \"text-icon-start\",\n                className:\n                    \"pl-[calc(var(--padding-xs-plus)-(var(--border-width-sm)))] [&>svg]:mr-xs\"\n            },\n            {\n                size: \"md\",\n                contentLayout: \"text-icon-end\",\n                className:\n                    \"pr-[calc(var(--padding-xs-plus)-(var(--border-width-sm)))] [&>svg]:ml-xs\"\n            },\n            {\n                size: \"lg\",\n                contentLayout: \"icon\",\n                className: \"p-[calc(var(--padding-sm-plus)-(var(--border-width-sm)))]\"\n            },\n            {\n                size: \"lg\",\n                contentLayout: \"text-icon-start\",\n                className:\n                    \"pl-[calc(var(--padding-sm-extra)-(var(--border-width-sm)))] [&>svg]:mr-xs-plus\"\n            },\n            {\n                size: \"lg\",\n                contentLayout: \"text-icon-end\",\n                className:\n                    \"pr-[calc(var(--padding-sm-extra)-(var(--border-width-sm)))] [&>svg]:ml-xs-plus\"\n            },\n            {\n                size: \"xl\",\n                contentLayout: \"icon\",\n                className: \"p-[calc(var(--padding-md)-(var(--border-width-md)))]\"\n            },\n            {\n                size: \"xl\",\n                contentLayout: \"text-icon-start\",\n                className:\n                    \"pl-[calc(var(--padding-sm-extra)-(var(--border-width-md)))] [&>svg]:mr-sm\"\n            },\n            {\n                size: \"xl\",\n                contentLayout: \"text-icon-end\",\n                className:\n                    \"pr-[calc(var(--padding-sm-extra)-(var(--border-width-md)))] [&>svg]:ml-sm\"\n            }\n        ],\n        defaultVariants: {\n            variant: \"primary\",\n            size: \"md\"\n        }\n    }\n);\n\ninterface ButtonProps\n    extends\n        Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"children\">,\n        VariantProps<typeof buttonVariants> {\n    text?: React.ReactNode;\n    children?: React.ReactNode;\n\n    icon?: React.ReactNode;\n\n    iconPosition?: \"start\" | \"end\";\n\n    asChild?: boolean;\n\n    containerClassName?: string;\n}\n\ntype ContentLayout = \"text\" | \"icon\" | \"text-icon-start\" | \"text-icon-end\";\n\nconst ButtonBase = ({\n    className,\n    variant,\n    size,\n    asChild = false,\n    text,\n    children,\n    icon,\n    iconPosition = \"start\",\n    disabled,\n    containerClassName,\n    ...rest\n}: ButtonProps) => {\n    const Comp = asChild ? Slot.Root : \"button\";\n\n    const contentLayout = useMemo<ContentLayout>(() => {\n        if (!text && !children) {\n            return \"icon\";\n        }\n\n        if (!icon) {\n            return \"text\";\n        }\n\n        return `text-icon-${iconPosition}` as ContentLayout;\n    }, [text, children, icon, iconPosition]);\n\n    const cssClasses = cn(\n        buttonVariants({\n            variant,\n            size,\n            contentLayout\n        }),\n        className\n    );\n\n    return (\n        <span className={cn(buttonWrapperVariants({ disabled }), containerClassName)}>\n            <Comp className={cssClasses} disabled={disabled} aria-disabled={disabled} {...rest}>\n                {iconPosition !== \"end\" && icon}\n                <Slot.Slottable>{text || children || null}</Slot.Slottable>\n                {iconPosition === \"end\" && icon}\n            </Comp>\n        </span>\n    );\n};\n\nconst Button = makeDecoratable(\"Button\", ButtonBase);\n\nexport { Button, type ButtonProps, buttonVariants };\n"],"names":["buttonWrapperVariants","cva","buttonVariants","ButtonBase","className","variant","size","asChild","text","children","icon","iconPosition","disabled","containerClassName","rest","Comp","Slot","contentLayout","useMemo","cssClasses","cn","Button","makeDecoratable"],"mappings":";;;AAIA,MAAMA,wBAAwBC,IAAI,gBAAgB;IAC9C,UAAU;QACN,UAAU;YACN,MAAM;QACV;IACJ;AACJ;AAEA,MAAMC,iBAAiBD,IACnB;IACI;IACA;IACA;CACH,EACD;IACI,UAAU;QACN,SAAS;YACL,SAAS;gBACL;gBACA;gBACA;gBACA;gBACA;aACH;YACD,WAAW;gBACP;gBACA;gBACA;gBACA;gBACA;aACH;YACD,UAAU;gBACN;gBACA;gBACA;gBACA;gBACA;aACH;YACD,OAAO;gBACH;gBACA;gBACA;gBACA;aACH;YACD,kBAAkB;gBACd;gBACA;gBACA;gBACA;gBACA;aACH;QACL;QACA,MAAM;YACF,IAAI;gBACA;gBACA;aACH;YACD,IAAI;gBACA;gBACA;aACH;YACD,IAAI;gBACA;gBACA;aACH;YACD,IAAI;gBACA;gBACA;aACH;QACL;QACA,eAAe;YACX,MAAM;YACN,MAAM;YACN,mBAAmB;YACnB,iBAAiB;QACrB;IACJ;IACA,kBAAkB;QACd;YACI,MAAM;YACN,SAAS;YACT,WAAW;QACf;QACA;YACI,MAAM;YACN,eAAe;YACf,WAAW;QACf;QACA;YACI,MAAM;YACN,eAAe;YACf,WAAW;QACf;QACA;YACI,MAAM;YACN,eAAe;YACf,WAAW;QACf;QACA;YACI,MAAM;YACN,eAAe;YACf,WAAW;QACf;QACA;YACI,MAAM;YACN,eAAe;YACf,WACI;QACR;QACA;YACI,MAAM;YACN,eAAe;YACf,WACI;QACR;QACA;YACI,MAAM;YACN,eAAe;YACf,WAAW;QACf;QACA;YACI,MAAM;YACN,eAAe;YACf,WACI;QACR;QACA;YACI,MAAM;YACN,eAAe;YACf,WACI;QACR;QACA;YACI,MAAM;YACN,eAAe;YACf,WAAW;QACf;QACA;YACI,MAAM;YACN,eAAe;YACf,WACI;QACR;QACA;YACI,MAAM;YACN,eAAe;YACf,WACI;QACR;KACH;IACD,iBAAiB;QACb,SAAS;QACT,MAAM;IACV;AACJ;AAqBJ,MAAME,aAAa,CAAC,EAChBC,SAAS,EACTC,OAAO,EACPC,IAAI,EACJC,UAAU,KAAK,EACfC,IAAI,EACJC,QAAQ,EACRC,IAAI,EACJC,eAAe,OAAO,EACtBC,QAAQ,EACRC,kBAAkB,EAClB,GAAGC,MACO;IACV,MAAMC,OAAOR,UAAUS,KAAK,IAAI,GAAG;IAEnC,MAAMC,gBAAgBC,QAAuB;QACzC,IAAI,CAACV,QAAQ,CAACC,UACV,OAAO;QAGX,IAAI,CAACC,MACD,OAAO;QAGX,OAAO,CAAC,UAAU,EAAEC,cAAc;IACtC,GAAG;QAACH;QAAMC;QAAUC;QAAMC;KAAa;IAEvC,MAAMQ,aAAaC,GACflB,eAAe;QACXG;QACAC;QACAW;IACJ,IACAb;IAGJ,OAAO,WAAP,GACI,oBAAC;QAAK,WAAWgB,GAAGpB,sBAAsB;YAAEY;QAAS,IAAIC;qBACrD,oBAACE,MAAAA;QAAK,WAAWI;QAAY,UAAUP;QAAU,iBAAeA;QAAW,GAAGE,IAAI;OAC7EH,AAAiB,UAAjBA,gBAA0BD,MAAAA,WAAAA,GAC3B,oBAACM,KAAK,SAAS,QAAER,QAAQC,YAAY,OACpCE,AAAiB,UAAjBA,gBAA0BD;AAI3C;AAEA,MAAMW,SAASC,gBAAgB,UAAUnB"}
+{"version":3,"file":"Button/Button.js","sources":["../../src/Button/Button.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { Slot } from \"radix-ui\";\nimport { cn, cva, type VariantProps, makeDecoratable } from \"~/utils.js\";\n\nconst buttonWrapperVariants = cva(\"inline-block\", {\n    variants: {\n        disabled: {\n            true: \"cursor-not-allowed\"\n        }\n    }\n});\n\nconst buttonVariants = cva(\n    [\n        \"border-transparent rounded font-sans inline-flex items-center justify-center whitespace-nowrap ring-offset-background transition-colors no-underline! cursor-pointer\",\n        \"aria-disabled:pointer-events-none\",\n        \"focus-visible:outline-none focus-visible:border-accent-default\"\n    ],\n    {\n        variants: {\n            variant: {\n                primary: [\n                    \"bg-primary text-neutral-light fill-neutral-base\",\n                    \"hover:bg-primary-strong\",\n                    \"active:bg-primary-xstrong\",\n                    \"aria-disabled:bg-primary-disabled\",\n                    \"focus-visible:ring-lg focus-visible:ring-primary-dimmed\"\n                ],\n                secondary: [\n                    \"bg-neutral-dimmed text-neutral-strong fill-neutral-xstrong\",\n                    \"hover:bg-neutral-muted\",\n                    \"active:bg-neutral-strong\",\n                    \"aria-disabled:bg-neutral-disabled aria-disabled:text-neutral-disabled aria-disabled:fill-neutral-strong\",\n                    \"focus-visible:ring-lg focus-visible:ring-primary-dimmed\"\n                ],\n                tertiary: [\n                    \"bg-neutral-base text-neutral-strong border-neutral-muted fill-neutral-xstrong\",\n                    \"hover:bg-neutral-light\",\n                    \"active:bg-neutral-muted\",\n                    \"aria-disabled:bg-neutral-disabled aria-disabled:border-neutral-dimmed aria-disabled:text-neutral-disabled aria-disabled:fill-neutral-strong\",\n                    \"focus-visible:ring-lg focus-visible:ring-primary-dimmed\"\n                ],\n                ghost: [\n                    \"bg-transparent text-neutral-strong fill-neutral-xstrong\",\n                    \"hover:bg-neutral-dimmed\",\n                    \"active:bg-neutral-muted\",\n                    \"aria-disabled:text-neutral-disabled aria-disabled:fill-neutral-strong\"\n                ],\n                \"ghost-negative\": [\n                    \"bg-transparent text-neutral-light fill-neutral-base\",\n                    \"hover:bg-neutral-base/20\",\n                    \"active:bg-neutral-base/30\",\n                    \"aria-disabled:text-neutral-disabled aria-disabled:fill-neutral-base/50\",\n                    \"focus-visible:border-neutral-base!\"\n                ],\n                /*\n                 * An action that reads as a link, e.g. a secondary step in a dialog footer. Styled\n                 * like the base `a` rule in theme.css. The `!` overrides undo the padding, border\n                 * and underline rules that every other variant shares.\n                 */\n                link: [\n                    \"bg-transparent text-accent-primary fill-accent-default\",\n                    \"p-0! border-0! rounded-xs\",\n                    \"hover:underline!\",\n                    \"aria-disabled:text-neutral-disabled aria-disabled:fill-neutral-strong\",\n                    \"focus-visible:ring-lg focus-visible:ring-primary-dimmed\"\n                ]\n            },\n            size: {\n                sm: [\n                    \"text-sm border-sm rounded-sm [&>svg]:size-md\",\n                    \"py-[calc(var(--padding-xs)-(var(--border-width-sm)))] px-[calc(var(--padding-sm)-(var(--border-width-sm)))]\"\n                ],\n                md: [\n                    \"text-md border-sm rounded-md [&>svg]:size-md\",\n                    \"py-[calc(var(--padding-xs-plus)-(var(--border-width-sm)))] px-[calc(var(--padding-sm-extra)-(var(--border-width-sm)))]\"\n                ],\n                lg: [\n                    \"text-md border-sm rounded-md [&>svg]:size-md-plus\",\n                    \"py-[calc(var(--padding-sm-plus)-(var(--border-width-sm)))] px-[calc(var(--padding-md)-(var(--border-width-sm)))]\"\n                ],\n                xl: [\n                    \"text-lg font-semibold border-lg rounded-md [&>svg]:size-lg\",\n                    \"py-[calc(theme(padding.md-plus)-(var(--border-width-md)))] px-[calc(var(--padding-md)-(var(--border-width-md)))]\"\n                ]\n            },\n            contentLayout: {\n                text: \"\",\n                icon: \"\",\n                \"text-icon-start\": \"\",\n                \"text-icon-end\": \"\"\n            }\n        },\n        compoundVariants: [\n            {\n                size: \"xl\",\n                variant: \"ghost\",\n                className: \"focus-visible:border-md\"\n            },\n            {\n                size: \"sm\",\n                contentLayout: \"icon\",\n                className: \"p-[calc(var(--padding-xs)-(var(--border-width-sm)))]\"\n            },\n            {\n                size: \"sm\",\n                contentLayout: \"text-icon-start\",\n                className: \"pl-[calc(var(--padding-xs)-(var(--border-width-sm)))] [&>svg]:mr-xs\"\n            },\n            {\n                size: \"sm\",\n                contentLayout: \"text-icon-end\",\n                className: \"pr-[calc(var(--padding-xs)-(var(--border-width-sm)))] [&>svg]:ml-xs\"\n            },\n            {\n                size: \"md\",\n                contentLayout: \"icon\",\n                className: \"p-[calc(var(--padding-sm)-(var(--border-width-sm)))]\"\n            },\n            {\n                size: \"md\",\n                contentLayout: \"text-icon-start\",\n                className:\n                    \"pl-[calc(var(--padding-xs-plus)-(var(--border-width-sm)))] [&>svg]:mr-xs\"\n            },\n            {\n                size: \"md\",\n                contentLayout: \"text-icon-end\",\n                className:\n                    \"pr-[calc(var(--padding-xs-plus)-(var(--border-width-sm)))] [&>svg]:ml-xs\"\n            },\n            {\n                size: \"lg\",\n                contentLayout: \"icon\",\n                className: \"p-[calc(var(--padding-sm-plus)-(var(--border-width-sm)))]\"\n            },\n            {\n                size: \"lg\",\n                contentLayout: \"text-icon-start\",\n                className:\n                    \"pl-[calc(var(--padding-sm-extra)-(var(--border-width-sm)))] [&>svg]:mr-xs-plus\"\n            },\n            {\n                size: \"lg\",\n                contentLayout: \"text-icon-end\",\n                className:\n                    \"pr-[calc(var(--padding-sm-extra)-(var(--border-width-sm)))] [&>svg]:ml-xs-plus\"\n            },\n            {\n                size: \"xl\",\n                contentLayout: \"icon\",\n                className: \"p-[calc(var(--padding-md)-(var(--border-width-md)))]\"\n            },\n            {\n                size: \"xl\",\n                contentLayout: \"text-icon-start\",\n                className:\n                    \"pl-[calc(var(--padding-sm-extra)-(var(--border-width-md)))] [&>svg]:mr-sm\"\n            },\n            {\n                size: \"xl\",\n                contentLayout: \"text-icon-end\",\n                className:\n                    \"pr-[calc(var(--padding-sm-extra)-(var(--border-width-md)))] [&>svg]:ml-sm\"\n            }\n        ],\n        defaultVariants: {\n            variant: \"primary\",\n            size: \"md\"\n        }\n    }\n);\n\ninterface ButtonProps\n    extends\n        Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"children\">,\n        VariantProps<typeof buttonVariants> {\n    text?: React.ReactNode;\n    children?: React.ReactNode;\n\n    icon?: React.ReactNode;\n\n    iconPosition?: \"start\" | \"end\";\n\n    asChild?: boolean;\n\n    containerClassName?: string;\n}\n\ntype ContentLayout = \"text\" | \"icon\" | \"text-icon-start\" | \"text-icon-end\";\n\nconst ButtonBase = ({\n    className,\n    variant,\n    size,\n    asChild = false,\n    text,\n    children,\n    icon,\n    iconPosition = \"start\",\n    disabled,\n    containerClassName,\n    ...rest\n}: ButtonProps) => {\n    const Comp = asChild ? Slot.Root : \"button\";\n\n    const contentLayout = useMemo<ContentLayout>(() => {\n        if (!text && !children) {\n            return \"icon\";\n        }\n\n        if (!icon) {\n            return \"text\";\n        }\n\n        return `text-icon-${iconPosition}` as ContentLayout;\n    }, [text, children, icon, iconPosition]);\n\n    const cssClasses = cn(\n        buttonVariants({\n            variant,\n            size,\n            contentLayout\n        }),\n        className\n    );\n\n    return (\n        <span className={cn(buttonWrapperVariants({ disabled }), containerClassName)}>\n            <Comp className={cssClasses} disabled={disabled} aria-disabled={disabled} {...rest}>\n                {iconPosition !== \"end\" && icon}\n                <Slot.Slottable>{text || children || null}</Slot.Slottable>\n                {iconPosition === \"end\" && icon}\n            </Comp>\n        </span>\n    );\n};\n\nconst Button = makeDecoratable(\"Button\", ButtonBase);\n\nexport { Button, type ButtonProps, buttonVariants };\n"],"names":["buttonWrapperVariants","cva","buttonVariants","ButtonBase","className","variant","size","asChild","text","children","icon","iconPosition","disabled","containerClassName","rest","Comp","Slot","contentLayout","useMemo","cssClasses","cn","Button","makeDecoratable"],"mappings":";;;AAIA,MAAMA,wBAAwBC,IAAI,gBAAgB;IAC9C,UAAU;QACN,UAAU;YACN,MAAM;QACV;IACJ;AACJ;AAEA,MAAMC,iBAAiBD,IACnB;IACI;IACA;IACA;CACH,EACD;IACI,UAAU;QACN,SAAS;YACL,SAAS;gBACL;gBACA;gBACA;gBACA;gBACA;aACH;YACD,WAAW;gBACP;gBACA;gBACA;gBACA;gBACA;aACH;YACD,UAAU;gBACN;gBACA;gBACA;gBACA;gBACA;aACH;YACD,OAAO;gBACH;gBACA;gBACA;gBACA;aACH;YACD,kBAAkB;gBACd;gBACA;gBACA;gBACA;gBACA;aACH;YAMD,MAAM;gBACF;gBACA;gBACA;gBACA;gBACA;aACH;QACL;QACA,MAAM;YACF,IAAI;gBACA;gBACA;aACH;YACD,IAAI;gBACA;gBACA;aACH;YACD,IAAI;gBACA;gBACA;aACH;YACD,IAAI;gBACA;gBACA;aACH;QACL;QACA,eAAe;YACX,MAAM;YACN,MAAM;YACN,mBAAmB;YACnB,iBAAiB;QACrB;IACJ;IACA,kBAAkB;QACd;YACI,MAAM;YACN,SAAS;YACT,WAAW;QACf;QACA;YACI,MAAM;YACN,eAAe;YACf,WAAW;QACf;QACA;YACI,MAAM;YACN,eAAe;YACf,WAAW;QACf;QACA;YACI,MAAM;YACN,eAAe;YACf,WAAW;QACf;QACA;YACI,MAAM;YACN,eAAe;YACf,WAAW;QACf;QACA;YACI,MAAM;YACN,eAAe;YACf,WACI;QACR;QACA;YACI,MAAM;YACN,eAAe;YACf,WACI;QACR;QACA;YACI,MAAM;YACN,eAAe;YACf,WAAW;QACf;QACA;YACI,MAAM;YACN,eAAe;YACf,WACI;QACR;QACA;YACI,MAAM;YACN,eAAe;YACf,WACI;QACR;QACA;YACI,MAAM;YACN,eAAe;YACf,WAAW;QACf;QACA;YACI,MAAM;YACN,eAAe;YACf,WACI;QACR;QACA;YACI,MAAM;YACN,eAAe;YACf,WACI;QACR;KACH;IACD,iBAAiB;QACb,SAAS;QACT,MAAM;IACV;AACJ;AAqBJ,MAAME,aAAa,CAAC,EAChBC,SAAS,EACTC,OAAO,EACPC,IAAI,EACJC,UAAU,KAAK,EACfC,IAAI,EACJC,QAAQ,EACRC,IAAI,EACJC,eAAe,OAAO,EACtBC,QAAQ,EACRC,kBAAkB,EAClB,GAAGC,MACO;IACV,MAAMC,OAAOR,UAAUS,KAAK,IAAI,GAAG;IAEnC,MAAMC,gBAAgBC,QAAuB;QACzC,IAAI,CAACV,QAAQ,CAACC,UACV,OAAO;QAGX,IAAI,CAACC,MACD,OAAO;QAGX,OAAO,CAAC,UAAU,EAAEC,cAAc;IACtC,GAAG;QAACH;QAAMC;QAAUC;QAAMC;KAAa;IAEvC,MAAMQ,aAAaC,GACflB,eAAe;QACXG;QACAC;QACAW;IACJ,IACAb;IAGJ,OAAO,WAAP,GACI,oBAAC;QAAK,WAAWgB,GAAGpB,sBAAsB;YAAEY;QAAS,IAAIC;qBACrD,oBAACE,MAAAA;QAAK,WAAWI;QAAY,UAAUP;QAAU,iBAAeA;QAAW,GAAGE,IAAI;OAC7EH,AAAiB,UAAjBA,gBAA0BD,MAAAA,WAAAA,GAC3B,oBAACM,KAAK,SAAS,QAAER,QAAQC,YAAY,OACpCE,AAAiB,UAAjBA,gBAA0BD;AAI3C;AAEA,MAAMW,SAASC,gBAAgB,UAAUnB"}

package/Button/Button.mdx

@@ -95,6 +95,19 @@ import { Button } from "@webiny/admin-ui";
 ` } }
 />
 
+### Link
+
+For an action that should read as a link, without navigating anywhere. Use the `Link` component when it does navigate.
+
+<Canvas of={ButtonStories.Link}
+        source={ { code:
+                `// Code for a Link button
+        \n import { Button } from '@webiny/admin-ui';
+        \n <Button variant="link" text={"Button"}></Button>
+
+` } }
+/>
+
 ### With Icon
 
 <Canvas of={ButtonStories.WithIcon} story={ {inline: false}}

package/Button/Button.stories.d.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import { Button } from "./Button.js";
 declare const meta: Meta<typeof Button>;
 export default meta;
@@ -8,6 +8,7 @@ export declare const Secondary: Story;
 export declare const Tertiary: Story;
 export declare const Ghost: Story;
 export declare const GhostNegative: Story;
+export declare const Link: Story;
 export declare const Small: Story;
 export declare const Medium: Story;
 export declare const Large: Story;

package/Button/Button.stories.js

@@ -13,7 +13,8 @@ const meta = {
                 "secondary",
                 "tertiary",
                 "ghost",
-                "ghost-negative"
+                "ghost-negative",
+                "link"
             ],
             defaultValue: "primary"
         },
@@ -93,6 +94,12 @@ const GhostNegative = {
         variant: "ghost-negative"
     }
 };
+const Link = {
+    args: {
+        ...Primary.args,
+        variant: "link"
+    }
+};
 const Small = {
     args: {
         ...Primary.args,
@@ -149,6 +156,6 @@ const Documentation = {
     }
 };
 export default Button_stories;
-export { Documentation, ExtraLarge, Ghost, GhostNegative, Large, Medium, Primary, Secondary, Small, Tertiary, WithAsChild, WithIcon, WithIconPositionEnd };
+export { Documentation, ExtraLarge, Ghost, GhostNegative, Large, Link, Medium, Primary, Secondary, Small, Tertiary, WithAsChild, WithIcon, WithIconPositionEnd };
 
 //# sourceMappingURL=Button.stories.js.map

package/Button/Button.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button/Button.stories.js","sources":["../../src/Button/Button.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { ReactComponent as PencilIcon } from \"@webiny/icons/edit.svg\";\nimport { Button } from \"./Button.js\";\n\n// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export\nconst meta: Meta<typeof Button> = {\n    title: \"Components/Button\",\n    component: Button,\n    argTypes: {\n        variant: {\n            description: \"Type\",\n            control: \"select\",\n            options: [\"primary\", \"secondary\", \"tertiary\", \"ghost\", \"ghost-negative\"],\n            defaultValue: \"primary\"\n        },\n        size: {\n            description: \"Size\",\n            control: \"select\",\n            options: [\"sm\", \"md\", \"lg\", \"xl\"],\n            defaultValue: \"md\"\n        },\n        text: {\n            description: \"Label\",\n            control: \"text\",\n            defaultValue: \"Button\"\n        },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        },\n        icon: {\n            description: \"Please refer to the 'With Icon' button example below for details.\"\n        },\n        iconPosition: {\n            description: \"Please refer to the 'With Icon' button example below for details.\",\n            control: \"select\",\n            defaultValue: \"start\",\n            options: [\"start\", \"end\"]\n        },\n        asChild: {\n            description: \"Please refer to the 'As Child' button example below for details.\"\n        },\n        // Note: after upgrading to Storybook 8.X, use `fn`from `@storybook/test` to spy on the onClick argument.\n        onClick: { action: \"onClick\" }\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Button>;\n\nexport const Primary: Story = {\n    args: {\n        variant: \"primary\",\n        text: \"Button\"\n    }\n};\n\nexport const Secondary: Story = {\n    args: {\n        ...Primary.args,\n        variant: \"secondary\"\n    }\n};\n\nexport const Tertiary: Story = {\n    args: {\n        ...Primary.args,\n        variant: \"tertiary\"\n    }\n};\n\nexport const Ghost: Story = {\n    args: {\n        ...Primary.args,\n        variant: \"ghost\"\n    }\n};\n\nexport const GhostNegative: Story = {\n    decorators: [\n        (Story: any) => (\n            <div className=\"bg-[#25292e] p-[50px] rounded-[5px]\">\n                <Story />\n            </div>\n        )\n    ],\n    args: {\n        ...Primary.args,\n        variant: \"ghost-negative\"\n    }\n};\n\nexport const Small: Story = {\n    args: {\n        ...Primary.args,\n        size: \"sm\"\n    }\n};\n\nexport const Medium: Story = {\n    args: {\n        ...Primary.args,\n        size: \"md\"\n    }\n};\n\nexport const Large: Story = {\n    args: {\n        ...Primary.args,\n        size: \"lg\"\n    }\n};\n\nexport const ExtraLarge: Story = {\n    args: {\n        ...Primary.args,\n        size: \"xl\"\n    }\n};\n\nexport const WithIcon: Story = {\n    args: {\n        ...Primary.args,\n        icon: <PencilIcon />\n    }\n};\n\nexport const WithIconPositionEnd: Story = {\n    args: {\n        ...Primary.args,\n        icon: <PencilIcon />,\n        iconPosition: \"end\"\n    }\n};\n\nexport const WithAsChild: Story = {\n    args: {\n        ...Primary.args,\n        asChild: true,\n        text: <span>Button</span>\n    }\n};\n\n/* The Documentation story is created for the Docs page.\n * The description column for the `iconPosition` and `icon` props displays\n * an extra dash (-), and the formatting breaks unless defined in the story.\n * Hence, this Documentation story was created.\n */\n\nexport const Documentation: Story = {\n    args: {\n        variant: \"primary\",\n        text: \"Button\",\n        size: \"md\",\n        disabled: false,\n        icon: \"\",\n        iconPosition: \"start\",\n        asChild: false\n    }\n};\n"],"names":["meta","Button","Primary","Secondary","Tertiary","Ghost","GhostNegative","Story","Small","Medium","Large","ExtraLarge","WithIcon","PencilIcon","WithIconPositionEnd","WithAsChild","Documentation"],"mappings":";;;AAMA,MAAMA,OAA4B;IAC9B,OAAO;IACP,WAAWC;IACX,UAAU;QACN,SAAS;YACL,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAW;gBAAa;gBAAY;gBAAS;aAAiB;YACxE,cAAc;QAClB;QACA,MAAM;YACF,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAM;gBAAM;gBAAM;aAAK;YACjC,cAAc;QAClB;QACA,MAAM;YACF,aAAa;YACb,SAAS;YACT,cAAc;QAClB;QACA,UAAU;YACN,SAAS;YACT,cAAc;QAClB;QACA,MAAM;YACF,aAAa;QACjB;QACA,cAAc;YACV,aAAa;YACb,SAAS;YACT,cAAc;YACd,SAAS;gBAAC;gBAAS;aAAM;QAC7B;QACA,SAAS;YACL,aAAa;QACjB;QAEA,SAAS;YAAE,QAAQ;QAAU;IACjC;AACJ;AAEA,uBAAeD;AAGR,MAAME,UAAiB;IAC1B,MAAM;QACF,SAAS;QACT,MAAM;IACV;AACJ;AAEO,MAAMC,YAAmB;IAC5B,MAAM;QACF,GAAGD,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAME,WAAkB;IAC3B,MAAM;QACF,GAAGF,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAMG,QAAe;IACxB,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAMI,gBAAuB;IAChC,YAAY;QACR,CAACC,QAAAA,WAAAA,GACG,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;IACD,MAAM;QACF,GAAGL,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAMM,QAAe;IACxB,MAAM;QACF,GAAGN,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMO,SAAgB;IACzB,MAAM;QACF,GAAGP,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMQ,QAAe;IACxB,MAAM;QACF,GAAGR,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMS,aAAoB;IAC7B,MAAM;QACF,GAAGT,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMU,WAAkB;IAC3B,MAAM;QACF,GAAGV,QAAQ,IAAI;QACf,MAAM,WAAN,GAAM,oBAACW,gBAAUA;IACrB;AACJ;AAEO,MAAMC,sBAA6B;IACtC,MAAM;QACF,GAAGZ,QAAQ,IAAI;QACf,MAAM,WAAN,GAAM,oBAACW,gBAAUA;QACjB,cAAc;IAClB;AACJ;AAEO,MAAME,cAAqB;IAC9B,MAAM;QACF,GAAGb,QAAQ,IAAI;QACf,SAAS;QACT,MAAM,WAAN,GAAM,oBAAC,cAAK;IAChB;AACJ;AAQO,MAAMc,gBAAuB;IAChC,MAAM;QACF,SAAS;QACT,MAAM;QACN,MAAM;QACN,UAAU;QACV,MAAM;QACN,cAAc;QACd,SAAS;IACb;AACJ"}
+{"version":3,"file":"Button/Button.stories.js","sources":["../../src/Button/Button.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { ReactComponent as PencilIcon } from \"@webiny/icons/edit.svg\";\nimport { Button } from \"./Button.js\";\n\n// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export\nconst meta: Meta<typeof Button> = {\n    title: \"Components/Button\",\n    component: Button,\n    argTypes: {\n        variant: {\n            description: \"Type\",\n            control: \"select\",\n            options: [\"primary\", \"secondary\", \"tertiary\", \"ghost\", \"ghost-negative\", \"link\"],\n            defaultValue: \"primary\"\n        },\n        size: {\n            description: \"Size\",\n            control: \"select\",\n            options: [\"sm\", \"md\", \"lg\", \"xl\"],\n            defaultValue: \"md\"\n        },\n        text: {\n            description: \"Label\",\n            control: \"text\",\n            defaultValue: \"Button\"\n        },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        },\n        icon: {\n            description: \"Please refer to the 'With Icon' button example below for details.\"\n        },\n        iconPosition: {\n            description: \"Please refer to the 'With Icon' button example below for details.\",\n            control: \"select\",\n            defaultValue: \"start\",\n            options: [\"start\", \"end\"]\n        },\n        asChild: {\n            description: \"Please refer to the 'As Child' button example below for details.\"\n        },\n        // Note: after upgrading to Storybook 8.X, use `fn`from `@storybook/test` to spy on the onClick argument.\n        onClick: { action: \"onClick\" }\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Button>;\n\nexport const Primary: Story = {\n    args: {\n        variant: \"primary\",\n        text: \"Button\"\n    }\n};\n\nexport const Secondary: Story = {\n    args: {\n        ...Primary.args,\n        variant: \"secondary\"\n    }\n};\n\nexport const Tertiary: Story = {\n    args: {\n        ...Primary.args,\n        variant: \"tertiary\"\n    }\n};\n\nexport const Ghost: Story = {\n    args: {\n        ...Primary.args,\n        variant: \"ghost\"\n    }\n};\n\nexport const GhostNegative: Story = {\n    decorators: [\n        (Story: any) => (\n            <div className=\"bg-[#25292e] p-[50px] rounded-[5px]\">\n                <Story />\n            </div>\n        )\n    ],\n    args: {\n        ...Primary.args,\n        variant: \"ghost-negative\"\n    }\n};\n\nexport const Link: Story = {\n    args: {\n        ...Primary.args,\n        variant: \"link\"\n    }\n};\n\nexport const Small: Story = {\n    args: {\n        ...Primary.args,\n        size: \"sm\"\n    }\n};\n\nexport const Medium: Story = {\n    args: {\n        ...Primary.args,\n        size: \"md\"\n    }\n};\n\nexport const Large: Story = {\n    args: {\n        ...Primary.args,\n        size: \"lg\"\n    }\n};\n\nexport const ExtraLarge: Story = {\n    args: {\n        ...Primary.args,\n        size: \"xl\"\n    }\n};\n\nexport const WithIcon: Story = {\n    args: {\n        ...Primary.args,\n        icon: <PencilIcon />\n    }\n};\n\nexport const WithIconPositionEnd: Story = {\n    args: {\n        ...Primary.args,\n        icon: <PencilIcon />,\n        iconPosition: \"end\"\n    }\n};\n\nexport const WithAsChild: Story = {\n    args: {\n        ...Primary.args,\n        asChild: true,\n        text: <span>Button</span>\n    }\n};\n\n/* The Documentation story is created for the Docs page.\n * The description column for the `iconPosition` and `icon` props displays\n * an extra dash (-), and the formatting breaks unless defined in the story.\n * Hence, this Documentation story was created.\n */\n\nexport const Documentation: Story = {\n    args: {\n        variant: \"primary\",\n        text: \"Button\",\n        size: \"md\",\n        disabled: false,\n        icon: \"\",\n        iconPosition: \"start\",\n        asChild: false\n    }\n};\n"],"names":["meta","Button","Primary","Secondary","Tertiary","Ghost","GhostNegative","Story","Link","Small","Medium","Large","ExtraLarge","WithIcon","PencilIcon","WithIconPositionEnd","WithAsChild","Documentation"],"mappings":";;;AAMA,MAAMA,OAA4B;IAC9B,OAAO;IACP,WAAWC;IACX,UAAU;QACN,SAAS;YACL,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAW;gBAAa;gBAAY;gBAAS;gBAAkB;aAAO;YAChF,cAAc;QAClB;QACA,MAAM;YACF,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAM;gBAAM;gBAAM;aAAK;YACjC,cAAc;QAClB;QACA,MAAM;YACF,aAAa;YACb,SAAS;YACT,cAAc;QAClB;QACA,UAAU;YACN,SAAS;YACT,cAAc;QAClB;QACA,MAAM;YACF,aAAa;QACjB;QACA,cAAc;YACV,aAAa;YACb,SAAS;YACT,cAAc;YACd,SAAS;gBAAC;gBAAS;aAAM;QAC7B;QACA,SAAS;YACL,aAAa;QACjB;QAEA,SAAS;YAAE,QAAQ;QAAU;IACjC;AACJ;AAEA,uBAAeD;AAGR,MAAME,UAAiB;IAC1B,MAAM;QACF,SAAS;QACT,MAAM;IACV;AACJ;AAEO,MAAMC,YAAmB;IAC5B,MAAM;QACF,GAAGD,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAME,WAAkB;IAC3B,MAAM;QACF,GAAGF,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAMG,QAAe;IACxB,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAMI,gBAAuB;IAChC,YAAY;QACR,CAACC,QAAAA,WAAAA,GACG,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;IACD,MAAM;QACF,GAAGL,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAMM,OAAc;IACvB,MAAM;QACF,GAAGN,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAMO,QAAe;IACxB,MAAM;QACF,GAAGP,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMQ,SAAgB;IACzB,MAAM;QACF,GAAGR,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMS,QAAe;IACxB,MAAM;QACF,GAAGT,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMU,aAAoB;IAC7B,MAAM;QACF,GAAGV,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMW,WAAkB;IAC3B,MAAM;QACF,GAAGX,QAAQ,IAAI;QACf,MAAM,WAAN,GAAM,oBAACY,gBAAUA;IACrB;AACJ;AAEO,MAAMC,sBAA6B;IACtC,MAAM;QACF,GAAGb,QAAQ,IAAI;QACf,MAAM,WAAN,GAAM,oBAACY,gBAAUA;QACjB,cAAc;IAClB;AACJ;AAEO,MAAME,cAAqB;IAC9B,MAAM;QACF,GAAGd,QAAQ,IAAI;QACf,SAAS;QACT,MAAM,WAAN,GAAM,oBAAC,cAAK;IAChB;AACJ;AAQO,MAAMe,gBAAuB;IAChC,MAAM;QACF,SAAS;QACT,MAAM;QACN,MAAM;QACN,UAAU;QACV,MAAM;QACN,cAAc;QACd,SAAS;IACb;AACJ"}

package/Button/CopyButton.d.ts

@@ -10,21 +10,22 @@ interface CopyButtonProps extends ButtonProps {
      */
     onCopy?: () => void;
 }
-declare const CopyButton: ((props: CopyButtonProps) => React.JSX.Element) & {
-    original: (props: CopyButtonProps) => React.JSX.Element;
+declare const CopyButtonBase: (props: CopyButtonProps) => React.JSX.Element;
+declare const CopyButton: typeof CopyButtonBase & {
+    original: typeof CopyButtonBase;
     originalName: string;
     displayName: string;
 } & {
-    original: ((props: CopyButtonProps) => React.JSX.Element) & {
-        original: (props: CopyButtonProps) => React.JSX.Element;
+    original: typeof CopyButtonBase & {
+        original: typeof CopyButtonBase;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: CopyButtonProps) => React.JSX.Element) & {
-        original: (props: CopyButtonProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof CopyButtonBase & {
+        original: typeof CopyButtonBase;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;