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

package/Button/Button.js

@@ -1,28 +1,27 @@
 import React, { useMemo } from "react";
 import { Slot } from "radix-ui";
-import { cn, cva, makeDecoratable } from "../utils";
-const buttonWrapperVariants = cva("wby-inline-block", {
+import { cn, cva, makeDecoratable } from "../utils.js";
+const buttonWrapperVariants = cva("inline-block", {
   variants: {
     disabled: {
-      true: "wby-cursor-not-allowed",
-      false: "wby-cursor-pointer"
+      true: "cursor-not-allowed"
     }
   }
 });
-const buttonVariants = cva(["wby-border-transparent wby-rounded wby-font-sans wby-inline-flex wby-items-center wby-justify-center wby-whitespace-nowrap wby-ring-offset-background wby-transition-colors !wby-no-underline", "aria-disabled:wby-pointer-events-none", "focus-visible:wby-outline-none focus-visible:wby-border-accent-default"], {
+const buttonVariants = cva(["border-transparent rounded font-sans inline-flex items-center justify-center whitespace-nowrap ring-offset-background transition-colors no-underline! cursor-pointer", "aria-disabled:pointer-events-none", "focus-visible:outline-none focus-visible:border-accent-default"], {
   variants: {
     variant: {
-      primary: ["wby-bg-primary wby-text-neutral-light wby-fill-neutral-base", "hover:wby-bg-primary-strong", "active:wby-bg-primary-xstrong", "aria-disabled:wby-bg-primary-disabled", "focus-visible:wby-ring-lg focus-visible:wby-ring-primary-dimmed"],
-      secondary: ["wby-bg-neutral-dimmed wby-text-neutral-strong wby-fill-neutral-xstrong", "hover:wby-bg-neutral-muted", "active:wby-bg-neutral-strong", "aria-disabled:wby-bg-neutral-disabled aria-disabled:wby-text-neutral-disabled aria-disabled:wby-fill-neutral-strong", "focus-visible:wby-ring-lg focus-visible:wby-ring-primary-dimmed"],
-      tertiary: ["wby-bg-neutral-base wby-text-neutral-strong wby-border-neutral-muted wby-fill-neutral-xstrong", "hover:wby-bg-neutral-light", "active:wby-bg-neutral-muted", "aria-disabled:wby-bg-neutral-disabled aria-disabled:wby-border-neutral-dimmed aria-disabled:wby-text-neutral-disabled aria-disabled:wby-fill-neutral-strong", "focus-visible:wby-ring-lg focus-visible:wby-ring-primary-dimmed"],
-      ghost: ["wby-bg-transparent wby-text-neutral-strong wby-fill-neutral-xstrong", "hover:wby-bg-neutral-dimmed", "active:wby-bg-neutral-muted", "aria-disabled:wby-text-neutral-disabled aria-disabled:wby-fill-neutral-strong"],
-      "ghost-negative": ["wby-bg-transparent wby-text-neutral-light wby-fill-neutral-base", "hover:wby-bg-neutral-base/20", "active:wby-bg-neutral-base/30", "aria-disabled:wby-text-neutral-disabled aria-disabled:wby-fill-neutral-base/50", "focus-visible:!wby-border-neutral-base"]
+      primary: ["bg-primary text-neutral-light fill-neutral-base", "hover:bg-primary-strong", "active:bg-primary-xstrong", "aria-disabled:bg-primary-disabled", "focus-visible:ring-lg focus-visible:ring-primary-dimmed"],
+      secondary: ["bg-neutral-dimmed text-neutral-strong fill-neutral-xstrong", "hover:bg-neutral-muted", "active:bg-neutral-strong", "aria-disabled:bg-neutral-disabled aria-disabled:text-neutral-disabled aria-disabled:fill-neutral-strong", "focus-visible:ring-lg focus-visible:ring-primary-dimmed"],
+      tertiary: ["bg-neutral-base text-neutral-strong border-neutral-muted fill-neutral-xstrong", "hover:bg-neutral-light", "active:bg-neutral-muted", "aria-disabled:bg-neutral-disabled aria-disabled:border-neutral-dimmed aria-disabled:text-neutral-disabled aria-disabled:fill-neutral-strong", "focus-visible:ring-lg focus-visible:ring-primary-dimmed"],
+      ghost: ["bg-transparent text-neutral-strong fill-neutral-xstrong", "hover:bg-neutral-dimmed", "active:bg-neutral-muted", "aria-disabled:text-neutral-disabled aria-disabled:fill-neutral-strong"],
+      "ghost-negative": ["bg-transparent text-neutral-light fill-neutral-base", "hover:bg-neutral-base/20", "active:bg-neutral-base/30", "aria-disabled:text-neutral-disabled aria-disabled:fill-neutral-base/50", "focus-visible:border-neutral-base!"]
     },
     size: {
-      sm: ["wby-text-sm wby-border-sm wby-rounded-sm [&>svg]:wby-size-md", "wby-py-[calc(theme(padding.xs)-theme(borderWidth.sm))] wby-px-[calc(theme(padding.sm)-theme(borderWidth.sm))]"],
-      md: ["wby-text-md wby-border-sm wby-rounded-md [&>svg]:wby-size-md", "wby-py-[calc(theme(padding.xs-plus)-theme(borderWidth.sm))] wby-px-[calc(theme(padding.sm-extra)-theme(borderWidth.sm))]"],
-      lg: ["wby-text-md wby-border-sm wby-rounded-md [&>svg]:wby-size-md-plus", "wby-py-[calc(theme(padding.sm-plus)-theme(borderWidth.sm))] wby-px-[calc(theme(padding.md)-theme(borderWidth.sm))]"],
-      xl: ["wby-text-lg wby-font-semibold wby-border-lg wby-rounded-md [&>svg]:wby-size-lg", "wby-py-[calc(theme(padding.md-plus)-theme(borderWidth.md))] wby-px-[calc(theme(padding.md)-theme(borderWidth.md))]"]
+      sm: ["text-sm border-sm rounded-sm [&>svg]:size-md", "py-[calc(var(--padding-xs)-(var(--border-width-sm)))] px-[calc(var(--padding-sm)-(var(--border-width-sm)))]"],
+      md: ["text-md border-sm rounded-md [&>svg]:size-md", "py-[calc(var(--padding-xs-plus)-(var(--border-width-sm)))] px-[calc(var(--padding-sm-extra)-(var(--border-width-sm)))]"],
+      lg: ["text-md border-sm rounded-md [&>svg]:size-md-plus", "py-[calc(var(--padding-sm-plus)-(var(--border-width-sm)))] px-[calc(var(--padding-md)-(var(--border-width-sm)))]"],
+      xl: ["text-lg font-semibold border-lg rounded-md [&>svg]:size-lg", "py-[calc(theme(padding.md-plus)-(var(--border-width-md)))] px-[calc(var(--padding-md)-(var(--border-width-md)))]"]
     },
     contentLayout: {
       text: "",
@@ -34,55 +33,55 @@ const buttonVariants = cva(["wby-border-transparent wby-rounded wby-font-sans wb
   compoundVariants: [{
     size: "xl",
     variant: "ghost",
-    className: "focus-visible:wby-border-md"
+    className: "focus-visible:border-md"
   }, {
     size: "sm",
     contentLayout: "icon",
-    className: "wby-p-[calc(theme(padding.xs)-theme(borderWidth.sm))]"
+    className: "p-[calc(var(--padding-xs)-(var(--border-width-sm)))]"
   }, {
     size: "sm",
     contentLayout: "text-icon-start",
-    className: "wby-pl-[calc(theme(padding.xs)-theme(borderWidth.sm))] [&>svg]:wby-mr-xs"
+    className: "pl-[calc(var(--padding-xs)-(var(--border-width-sm)))] [&>svg]:mr-xs"
   }, {
     size: "sm",
     contentLayout: "text-icon-end",
-    className: "wby-pr-[calc(theme(padding.xs)-theme(borderWidth.sm))] [&>svg]:wby-ml-xs"
+    className: "pr-[calc(var(--padding-xs)-(var(--border-width-sm)))] [&>svg]:ml-xs"
   }, {
     size: "md",
     contentLayout: "icon",
-    className: "wby-p-[calc(theme(padding.sm)-theme(borderWidth.sm))]"
+    className: "p-[calc(var(--padding-sm)-(var(--border-width-sm)))]"
   }, {
     size: "md",
     contentLayout: "text-icon-start",
-    className: "wby-pl-[calc(theme(padding.xs-plus)-theme(borderWidth.sm))] [&>svg]:wby-mr-xs"
+    className: "pl-[calc(var(--padding-xs-plus)-(var(--border-width-sm)))] [&>svg]:mr-xs"
   }, {
     size: "md",
     contentLayout: "text-icon-end",
-    className: "wby-pr-[calc(theme(padding.xs-plus)-theme(borderWidth.sm))] [&>svg]:wby-ml-xs"
+    className: "pr-[calc(var(--padding-xs-plus)-(var(--border-width-sm)))] [&>svg]:ml-xs"
   }, {
     size: "lg",
     contentLayout: "icon",
-    className: "wby-p-[calc(theme(padding.sm-plus)-theme(borderWidth.sm))]"
+    className: "p-[calc(var(--padding-sm-plus)-(var(--border-width-sm)))]"
   }, {
     size: "lg",
     contentLayout: "text-icon-start",
-    className: "wby-pl-[calc(theme(padding.sm-extra)-theme(borderWidth.sm))] [&>svg]:wby-mr-xs-plus"
+    className: "pl-[calc(var(--padding-sm-extra)-(var(--border-width-sm)))] [&>svg]:mr-xs-plus"
   }, {
     size: "lg",
     contentLayout: "text-icon-end",
-    className: "wby-pr-[calc(theme(padding.sm-extra)-theme(borderWidth.sm))] [&>svg]:wby-ml-xs-plus"
+    className: "pr-[calc(var(--padding-sm-extra)-(var(--border-width-sm)))] [&>svg]:ml-xs-plus"
   }, {
     size: "xl",
     contentLayout: "icon",
-    className: "wby-p-[calc(theme(padding.md)-theme(borderWidth.md))]"
+    className: "p-[calc(var(--padding-md)-(var(--border-width-md)))]"
   }, {
     size: "xl",
     contentLayout: "text-icon-start",
-    className: "wby-pl-[calc(theme(padding.sm-extra)-theme(borderWidth.md))] [&>svg]:wby-mr-sm"
+    className: "pl-[calc(var(--padding-sm-extra)-(var(--border-width-md)))] [&>svg]:mr-sm"
   }, {
     size: "xl",
     contentLayout: "text-icon-end",
-    className: "wby-pr-[calc(theme(padding.sm-extra)-theme(borderWidth.md))] [&>svg]:wby-ml-sm"
+    className: "pr-[calc(var(--padding-sm-extra)-(var(--border-width-md)))] [&>svg]:ml-sm"
   }],
   defaultVariants: {
     variant: "primary",
@@ -95,6 +94,7 @@ const ButtonBase = ({
   size,
   asChild = false,
   text,
+  children,
   icon,
   iconPosition = "start",
   disabled,
@@ -103,14 +103,14 @@ const ButtonBase = ({
 }) => {
   const Comp = asChild ? Slot.Root : "button";
   const contentLayout = useMemo(() => {
-    if (!text) {
+    if (!text && !children) {
       return "icon";
     }
     if (!icon) {
       return "text";
     }
     return `text-icon-${iconPosition}`;
-  }, [text, icon, iconPosition]);
+  }, [text, children, icon, iconPosition]);
   const cssClasses = cn(buttonVariants({
     variant,
     size,
@@ -124,7 +124,7 @@ const ButtonBase = ({
     className: cssClasses,
     disabled: disabled,
     "aria-disabled": disabled
-  }, rest), iconPosition !== "end" && icon, /*#__PURE__*/React.createElement(Slot.Slottable, null, text), iconPosition === "end" && icon));
+  }, rest), iconPosition !== "end" && icon, /*#__PURE__*/React.createElement(Slot.Slottable, null, text || children || null), iconPosition === "end" && icon));
 };
 const Button = makeDecoratable("Button", ButtonBase);
 export { Button, buttonVariants };

package/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useMemo","Slot","cn","cva","makeDecoratable","buttonWrapperVariants","variants","disabled","true","false","buttonVariants","variant","primary","secondary","tertiary","ghost","size","sm","md","lg","xl","contentLayout","text","icon","compoundVariants","className","defaultVariants","ButtonBase","asChild","iconPosition","containerClassName","rest","Comp","Root","cssClasses","createElement","Object","assign","Slottable","Button"],"sources":["Button.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { Slot } from \"radix-ui\";\nimport { cn, cva, type VariantProps, makeDecoratable } from \"~/utils\";\n\nconst buttonWrapperVariants = cva(\"wby-inline-block\", {\n    variants: {\n        disabled: {\n            true: \"wby-cursor-not-allowed\",\n            false: \"wby-cursor-pointer\"\n        }\n    }\n});\n\nconst buttonVariants = cva(\n    [\n        \"wby-border-transparent wby-rounded wby-font-sans wby-inline-flex wby-items-center wby-justify-center wby-whitespace-nowrap wby-ring-offset-background wby-transition-colors !wby-no-underline\",\n        \"aria-disabled:wby-pointer-events-none\",\n        \"focus-visible:wby-outline-none focus-visible:wby-border-accent-default\"\n    ],\n    {\n        variants: {\n            variant: {\n                primary: [\n                    \"wby-bg-primary wby-text-neutral-light wby-fill-neutral-base\",\n                    \"hover:wby-bg-primary-strong\",\n                    \"active:wby-bg-primary-xstrong\",\n                    \"aria-disabled:wby-bg-primary-disabled\",\n                    \"focus-visible:wby-ring-lg focus-visible:wby-ring-primary-dimmed\"\n                ],\n                secondary: [\n                    \"wby-bg-neutral-dimmed wby-text-neutral-strong wby-fill-neutral-xstrong\",\n                    \"hover:wby-bg-neutral-muted\",\n                    \"active:wby-bg-neutral-strong\",\n                    \"aria-disabled:wby-bg-neutral-disabled aria-disabled:wby-text-neutral-disabled aria-disabled:wby-fill-neutral-strong\",\n                    \"focus-visible:wby-ring-lg focus-visible:wby-ring-primary-dimmed\"\n                ],\n                tertiary: [\n                    \"wby-bg-neutral-base wby-text-neutral-strong wby-border-neutral-muted wby-fill-neutral-xstrong\",\n                    \"hover:wby-bg-neutral-light\",\n                    \"active:wby-bg-neutral-muted\",\n                    \"aria-disabled:wby-bg-neutral-disabled aria-disabled:wby-border-neutral-dimmed aria-disabled:wby-text-neutral-disabled aria-disabled:wby-fill-neutral-strong\",\n                    \"focus-visible:wby-ring-lg focus-visible:wby-ring-primary-dimmed\"\n                ],\n                ghost: [\n                    \"wby-bg-transparent wby-text-neutral-strong wby-fill-neutral-xstrong\",\n                    \"hover:wby-bg-neutral-dimmed\",\n                    \"active:wby-bg-neutral-muted\",\n                    \"aria-disabled:wby-text-neutral-disabled aria-disabled:wby-fill-neutral-strong\"\n                ],\n                \"ghost-negative\": [\n                    \"wby-bg-transparent wby-text-neutral-light wby-fill-neutral-base\",\n                    \"hover:wby-bg-neutral-base/20\",\n                    \"active:wby-bg-neutral-base/30\",\n                    \"aria-disabled:wby-text-neutral-disabled aria-disabled:wby-fill-neutral-base/50\",\n                    \"focus-visible:!wby-border-neutral-base\"\n                ]\n            },\n            size: {\n                sm: [\n                    \"wby-text-sm wby-border-sm wby-rounded-sm [&>svg]:wby-size-md\",\n                    \"wby-py-[calc(theme(padding.xs)-theme(borderWidth.sm))] wby-px-[calc(theme(padding.sm)-theme(borderWidth.sm))]\"\n                ],\n                md: [\n                    \"wby-text-md wby-border-sm wby-rounded-md [&>svg]:wby-size-md\",\n                    \"wby-py-[calc(theme(padding.xs-plus)-theme(borderWidth.sm))] wby-px-[calc(theme(padding.sm-extra)-theme(borderWidth.sm))]\"\n                ],\n                lg: [\n                    \"wby-text-md wby-border-sm wby-rounded-md [&>svg]:wby-size-md-plus\",\n                    \"wby-py-[calc(theme(padding.sm-plus)-theme(borderWidth.sm))] wby-px-[calc(theme(padding.md)-theme(borderWidth.sm))]\"\n                ],\n                xl: [\n                    \"wby-text-lg wby-font-semibold wby-border-lg wby-rounded-md [&>svg]:wby-size-lg\",\n                    \"wby-py-[calc(theme(padding.md-plus)-theme(borderWidth.md))] wby-px-[calc(theme(padding.md)-theme(borderWidth.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:wby-border-md\"\n            },\n            {\n                size: \"sm\",\n                contentLayout: \"icon\",\n                className: \"wby-p-[calc(theme(padding.xs)-theme(borderWidth.sm))]\"\n            },\n            {\n                size: \"sm\",\n                contentLayout: \"text-icon-start\",\n                className:\n                    \"wby-pl-[calc(theme(padding.xs)-theme(borderWidth.sm))] [&>svg]:wby-mr-xs\"\n            },\n            {\n                size: \"sm\",\n                contentLayout: \"text-icon-end\",\n                className:\n                    \"wby-pr-[calc(theme(padding.xs)-theme(borderWidth.sm))] [&>svg]:wby-ml-xs\"\n            },\n            {\n                size: \"md\",\n                contentLayout: \"icon\",\n                className: \"wby-p-[calc(theme(padding.sm)-theme(borderWidth.sm))]\"\n            },\n            {\n                size: \"md\",\n                contentLayout: \"text-icon-start\",\n                className:\n                    \"wby-pl-[calc(theme(padding.xs-plus)-theme(borderWidth.sm))] [&>svg]:wby-mr-xs\"\n            },\n            {\n                size: \"md\",\n                contentLayout: \"text-icon-end\",\n                className:\n                    \"wby-pr-[calc(theme(padding.xs-plus)-theme(borderWidth.sm))] [&>svg]:wby-ml-xs\"\n            },\n            {\n                size: \"lg\",\n                contentLayout: \"icon\",\n                className: \"wby-p-[calc(theme(padding.sm-plus)-theme(borderWidth.sm))]\"\n            },\n            {\n                size: \"lg\",\n                contentLayout: \"text-icon-start\",\n                className:\n                    \"wby-pl-[calc(theme(padding.sm-extra)-theme(borderWidth.sm))] [&>svg]:wby-mr-xs-plus\"\n            },\n            {\n                size: \"lg\",\n                contentLayout: \"text-icon-end\",\n                className:\n                    \"wby-pr-[calc(theme(padding.sm-extra)-theme(borderWidth.sm))] [&>svg]:wby-ml-xs-plus\"\n            },\n            {\n                size: \"xl\",\n                contentLayout: \"icon\",\n                className: \"wby-p-[calc(theme(padding.md)-theme(borderWidth.md))]\"\n            },\n            {\n                size: \"xl\",\n                contentLayout: \"text-icon-start\",\n                className:\n                    \"wby-pl-[calc(theme(padding.sm-extra)-theme(borderWidth.md))] [&>svg]:wby-mr-sm\"\n            },\n            {\n                size: \"xl\",\n                contentLayout: \"text-icon-end\",\n                className:\n                    \"wby-pr-[calc(theme(padding.sm-extra)-theme(borderWidth.md))] [&>svg]:wby-ml-sm\"\n            }\n        ],\n        defaultVariants: {\n            variant: \"primary\",\n            size: \"md\"\n        }\n    }\n);\n\ninterface ButtonProps\n    extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"children\">,\n        VariantProps<typeof buttonVariants> {\n    text?: 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    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) {\n            return \"icon\";\n        }\n\n        if (!icon) {\n            return \"text\";\n        }\n\n        return `text-icon-${iconPosition}` as ContentLayout;\n    }, [text, 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}</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"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useMemo","Slot","cn","cva","makeDecoratable","buttonWrapperVariants","variants","disabled","true","buttonVariants","variant","primary","secondary","tertiary","ghost","size","sm","md","lg","xl","contentLayout","text","icon","compoundVariants","className","defaultVariants","ButtonBase","asChild","children","iconPosition","containerClassName","rest","Comp","Root","cssClasses","createElement","Object","assign","Slottable","Button"],"sources":["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 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"],"mappings":"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","ignoreList":[]}

package/Button/Button.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Controls } from '@storybook/blocks';
+import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';
 
 import * as ButtonStories from './Button.stories';
 
@@ -204,4 +204,4 @@ Use primary buttons as the desired action for users. Competing primary buttons m
 ### Button Group
 When used in groups, buttons should support only maximum of two type variants, with an exception of third variant being ghost extension button (eg. ellipsis). Avoid using random type and icon options within the button groups. Avoid using different sizes within the same group.
 
-<img src="/images/storybook/button/button-group.png" alt="Button Group"/>
+<img src="/images/storybook/button/button-group.png" alt="Button Group"/>

package/Button/Button.stories.d.ts

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Button } from "./Button";
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import { Button } from "./Button.js";
 declare const meta: Meta<typeof Button>;
 export default meta;
 type Story = StoryObj<typeof Button>;

package/Button/Button.stories.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { ReactComponent as PencilIcon } from "@webiny/icons/edit.svg";
-import { Button } from "./Button";
+import { Button } from "./Button.js";
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta = {
@@ -29,8 +29,7 @@ const meta = {
       defaultValue: false
     },
     icon: {
-      description: "Please refer to the 'With Icon' button example below for details.",
-      control: "none"
+      description: "Please refer to the 'With Icon' button example below for details."
     },
     iconPosition: {
       description: "Please refer to the 'With Icon' button example below for details.",
@@ -39,8 +38,7 @@ const meta = {
       options: ["start", "end"]
     },
     asChild: {
-      description: "Please refer to the 'As Child' button example below for details.",
-      control: "none"
+      description: "Please refer to the 'As Child' button example below for details."
     },
     // Note: after upgrading to Storybook 8.X, use `fn`from `@storybook/test` to spy on the onClick argument.
     onClick: {
@@ -75,7 +73,7 @@ export const Ghost = {
 };
 export const GhostNegative = {
   decorators: [Story => /*#__PURE__*/React.createElement("div", {
-    className: "wby-bg-[#25292e] wby-p-[50px] wby-rounded-[5px]"
+    className: "bg-[#25292e] p-[50px] rounded-[5px]"
   }, /*#__PURE__*/React.createElement(Story, null))],
   args: {
     ...Primary.args,

package/Button/Button.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","ReactComponent","PencilIcon","Button","meta","title","component","argTypes","variant","description","control","options","defaultValue","size","text","disabled","icon","iconPosition","asChild","onClick","action","Primary","args","Secondary","Tertiary","Ghost","GhostNegative","decorators","Story","createElement","className","Small","Medium","Large","ExtraLarge","WithIcon","WithIconPositionEnd","WithAsChild","Documentation"],"sources":["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\";\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            control: \"none\"\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            control: \"none\"\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=\"wby-bg-[#25292e] wby-p-[50px] wby-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"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","ReactComponent","PencilIcon","Button","meta","title","component","argTypes","variant","description","control","options","defaultValue","size","text","disabled","icon","iconPosition","asChild","onClick","action","Primary","args","Secondary","Tertiary","Ghost","GhostNegative","decorators","Story","createElement","className","Small","Medium","Large","ExtraLarge","WithIcon","WithIconPositionEnd","WithAsChild","Documentation"],"sources":["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"],"mappings":"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","ignoreList":[]}

package/Button/CopyButton.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { ButtonProps } from "./Button";
+import type { ButtonProps } from "./Button.js";
 interface CopyButtonProps extends ButtonProps {
     /**
      * Value to copy to clipboard.
@@ -17,15 +17,13 @@ declare const CopyButton: ((props: CopyButtonProps) => React.JSX.Element) & {
 } & {
     original: ((props: CopyButtonProps) => React.JSX.Element) & {
         original: (props: CopyButtonProps) => React.JSX.Element;
-        originalName: string; /**
-         * Callback function that is executed after the value is copied to the clipboard.
-         */
+        originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: CopyButtonProps) => React.JSX.Element) & {
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: CopyButtonProps) => React.JSX.Element) & {
         original: (props: CopyButtonProps) => React.JSX.Element;
         originalName: string;
         displayName: string;

package/Button/CopyButton.js

@@ -1,7 +1,7 @@
 import React, { useCallback } from "react";
 import { ReactComponent as CopyToClipboardIcon } from "@webiny/icons/content_copy.svg";
-import { Button } from "./Button";
-import { makeDecoratable } from "../utils";
+import { Button } from "./Button.js";
+import { makeDecoratable } from "../utils.js";
 const CopyButtonBase = props => {
   const {
     value,

package/Button/CopyButton.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","ReactComponent","CopyToClipboardIcon","Button","makeDecoratable","CopyButtonBase","props","value","onCopy","rest","copyToClipboard","navigator","clipboard","writeText","createElement","Object","assign","onClick","icon","CopyButton"],"sources":["CopyButton.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { ReactComponent as CopyToClipboardIcon } from \"@webiny/icons/content_copy.svg\";\nimport type { ButtonProps } from \"./Button\";\nimport { Button } from \"./Button\";\nimport { makeDecoratable } from \"../utils\";\n\ninterface CopyButtonProps extends ButtonProps {\n    /**\n     * Value to copy to clipboard.\n     */\n    value: string;\n\n    /**\n     * Callback function that is executed after the value is copied to the clipboard.\n     */\n    onCopy?: () => void;\n}\n\nconst CopyButtonBase = (props: CopyButtonProps) => {\n    const { value, onCopy, ...rest } = props;\n\n    const copyToClipboard = useCallback(() => {\n        navigator.clipboard.writeText(value);\n        if (typeof onCopy === \"function\") {\n            onCopy();\n        }\n    }, [value]);\n\n    return <Button {...rest} onClick={copyToClipboard} icon={<CopyToClipboardIcon />} />;\n};\n\nconst CopyButton = makeDecoratable(\"CopyButton\", CopyButtonBase);\n\nexport { CopyButton, type CopyButtonProps };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,QAAQ,OAAO;AAC1C,SAASC,cAAc,IAAIC,mBAAmB,QAAQ,gCAAgC;AAEtF,SAASC,MAAM;AACf,SAASC,eAAe;AAcxB,MAAMC,cAAc,GAAIC,KAAsB,IAAK;EAC/C,MAAM;IAAEC,KAAK;IAAEC,MAAM;IAAE,GAAGC;EAAK,CAAC,GAAGH,KAAK;EAExC,MAAMI,eAAe,GAAGV,WAAW,CAAC,MAAM;IACtCW,SAAS,CAACC,SAAS,CAACC,SAAS,CAACN,KAAK,CAAC;IACpC,IAAI,OAAOC,MAAM,KAAK,UAAU,EAAE;MAC9BA,MAAM,CAAC,CAAC;IACZ;EACJ,CAAC,EAAE,CAACD,KAAK,CAAC,CAAC;EAEX,oBAAOR,KAAA,CAAAe,aAAA,CAACX,MAAM,EAAAY,MAAA,CAAAC,MAAA,KAAKP,IAAI;IAAEQ,OAAO,EAAEP,eAAgB;IAACQ,IAAI,eAAEnB,KAAA,CAAAe,aAAA,CAACZ,mBAAmB,MAAE;EAAE,EAAE,CAAC;AACxF,CAAC;AAED,MAAMiB,UAAU,GAAGf,eAAe,CAAC,YAAY,EAAEC,cAAc,CAAC;AAEhE,SAASc,UAAU","ignoreList":[]}
+{"version":3,"names":["React","useCallback","ReactComponent","CopyToClipboardIcon","Button","makeDecoratable","CopyButtonBase","props","value","onCopy","rest","copyToClipboard","navigator","clipboard","writeText","createElement","Object","assign","onClick","icon","CopyButton"],"sources":["CopyButton.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { ReactComponent as CopyToClipboardIcon } from \"@webiny/icons/content_copy.svg\";\nimport type { ButtonProps } from \"./Button.js\";\nimport { Button } from \"./Button.js\";\nimport { makeDecoratable } from \"../utils.js\";\n\ninterface CopyButtonProps extends ButtonProps {\n    /**\n     * Value to copy to clipboard.\n     */\n    value: string;\n\n    /**\n     * Callback function that is executed after the value is copied to the clipboard.\n     */\n    onCopy?: () => void;\n}\n\nconst CopyButtonBase = (props: CopyButtonProps) => {\n    const { value, onCopy, ...rest } = props;\n\n    const copyToClipboard = useCallback(() => {\n        navigator.clipboard.writeText(value);\n        if (typeof onCopy === \"function\") {\n            onCopy();\n        }\n    }, [value]);\n\n    return <Button {...rest} onClick={copyToClipboard} icon={<CopyToClipboardIcon />} />;\n};\n\nconst CopyButton = makeDecoratable(\"CopyButton\", CopyButtonBase);\n\nexport { CopyButton, type CopyButtonProps };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,QAAQ,OAAO;AAC1C,SAASC,cAAc,IAAIC,mBAAmB,QAAQ,gCAAgC;AAEtF,SAASC,MAAM;AACf,SAASC,eAAe;AAcxB,MAAMC,cAAc,GAAIC,KAAsB,IAAK;EAC/C,MAAM;IAAEC,KAAK;IAAEC,MAAM;IAAE,GAAGC;EAAK,CAAC,GAAGH,KAAK;EAExC,MAAMI,eAAe,GAAGV,WAAW,CAAC,MAAM;IACtCW,SAAS,CAACC,SAAS,CAACC,SAAS,CAACN,KAAK,CAAC;IACpC,IAAI,OAAOC,MAAM,KAAK,UAAU,EAAE;MAC9BA,MAAM,CAAC,CAAC;IACZ;EACJ,CAAC,EAAE,CAACD,KAAK,CAAC,CAAC;EAEX,oBAAOR,KAAA,CAAAe,aAAA,CAACX,MAAM,EAAAY,MAAA,CAAAC,MAAA,KAAKP,IAAI;IAAEQ,OAAO,EAAEP,eAAgB;IAACQ,IAAI,eAAEnB,KAAA,CAAAe,aAAA,CAACZ,mBAAmB,MAAE;EAAE,EAAE,CAAC;AACxF,CAAC;AAED,MAAMiB,UAAU,GAAGf,eAAe,CAAC,YAAY,EAAEC,cAAc,CAAC;AAEhE,SAASc,UAAU","ignoreList":[]}

package/Button/IconButton.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { type VariantProps } from "../utils";
+import { type VariantProps } from "../utils.js";
 declare const iconButtonVariants: (props?: ({
     variant?: "primary" | "secondary" | "tertiary" | "ghost" | "ghost-negative" | null | undefined;
     size?: "sm" | "md" | "lg" | "xl" | "xs" | "xxs" | null | undefined;
@@ -22,7 +22,7 @@ declare const IconButton: (({ className, variant, size, icon, iconSize, asChild,
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ className, variant, size, icon, iconSize, asChild, disabled, ...props }: IconButtonProps) => React.JSX.Element) & {
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<(({ className, variant, size, icon, iconSize, asChild, disabled, ...props }: IconButtonProps) => React.JSX.Element) & {
         original: ({ className, variant, size, icon, iconSize, asChild, disabled, ...props }: IconButtonProps) => React.JSX.Element;
         originalName: string;
         displayName: string;

package/Button/IconButton.js

@@ -1,30 +1,29 @@
 import React from "react";
 import { Slot } from "radix-ui";
-import { cn, cva, makeDecoratable } from "../utils";
-const iconButtonWrapperVariants = cva("wby-inline-block", {
+import { cn, cva, makeDecoratable } from "../utils.js";
+const iconButtonWrapperVariants = cva("inline-block", {
   variants: {
     disabled: {
-      true: "wby-cursor-not-allowed",
-      false: "wby-cursor-pointer"
+      true: "cursor-not-allowed"
     }
   }
 });
-const iconButtonVariants = cva(["wby-border-transparent wby-rounded wby-flex wby-flex-shrink-0 wby-items-center wby-justify-center wby-ring-offset-background wby-transition-colors", "[&_svg]:wby-pointer-events-none [&_svg]:wby-shrink-0", "[&_img]:wby-pointer-events-none [&_img]:wby-shrink-0", "aria-disabled:wby-pointer-events-none", "focus-visible:wby-outline-none focus-visible:wby-border-accent-default"], {
+const iconButtonVariants = cva(["border-transparent rounded flex shrink-0 items-center justify-center ring-offset-background transition-colors cursor-pointer", "[&_svg]:pointer-events-none [&_svg]:shrink-0", "[&_img]:pointer-events-none [&_img]:shrink-0", "aria-disabled:pointer-events-none", "focus-visible:outline-none focus-visible:border-accent-default"], {
   variants: {
     variant: {
-      primary: ["wby-bg-primary wby-fill-neutral-base", "hover:wby-bg-primary-strong", "active:wby-bg-primary-xstrong", "aria-disabled:wby-bg-primary-disabled", "focus-visible:wby-ring-lg focus-visible:wby-ring-primary-dimmed"],
-      secondary: ["wby-bg-neutral-dimmed wby-fill-neutral-xstrong", "hover:wby-bg-neutral-muted", "active:wby-bg-neutral-strong", "aria-disabled:wby-bg-neutral-disabled aria-disabled:wby-fill-neutral-strong", "focus-visible:wby-ring-lg focus-visible:wby-ring-primary-dimmed"],
-      tertiary: ["wby-bg-neutral-base wby-border-neutral-muted wby-fill-neutral-xstrong", "hover:wby-bg-neutral-light", "active:wby-bg-neutral-muted", "aria-disabled:wby-bg-neutral-disabled aria-disabled:wby-fill-neutral-strong aria-disabled:wby-border-neutral-dimmed", "focus-visible:wby-ring-lg focus-visible:wby-ring-primary-dimmed"],
-      ghost: ["wby-bg-transparent wby-fill-neutral-xstrong", "hover:wby-bg-neutral-dimmed", "active:wby-bg-neutral-muted", "aria-disabled:wby-fill-neutral-strong hover:aria-disabled:wby-bg-transparent active:aria-disabled:wby-bg-transparent"],
-      "ghost-negative": ["wby-bg-transparent wby-fill-neutral-base", "hover:wby-bg-neutral-base/20", "active:wby-bg-neutral-base/30", "focus-visible:!wby-border-neutral-base", "aria-disabled:wby-fill-neutral-base aria-disabled:wby-opacity-50 hover:aria-disabled:wby-bg-transparent active:aria-disabled:wby-bg-transparent"]
+      primary: ["bg-primary fill-neutral-base", "hover:bg-primary-strong", "active:bg-primary-xstrong", "aria-disabled:bg-primary-disabled", "focus-visible:ring-lg focus-visible:ring-primary-dimmed"],
+      secondary: ["bg-neutral-dimmed fill-neutral-xstrong", "hover:bg-neutral-muted", "active:bg-neutral-strong", "aria-disabled:bg-neutral-disabled aria-disabled:fill-neutral-strong", "focus-visible:ring-lg focus-visible:ring-primary-dimmed"],
+      tertiary: ["bg-neutral-base border-neutral-muted fill-neutral-xstrong", "hover:bg-neutral-light", "active:bg-neutral-muted", "aria-disabled:bg-neutral-disabled aria-disabled:fill-neutral-strong aria-disabled:border-neutral-dimmed", "focus-visible:ring-lg focus-visible:ring-primary-dimmed"],
+      ghost: ["bg-transparent fill-neutral-xstrong", "hover:bg-neutral-dark/5", "active:bg-neutral-muted", "aria-disabled:fill-neutral-strong hover:aria-disabled:bg-transparent active:aria-disabled:bg-transparent"],
+      "ghost-negative": ["bg-transparent fill-neutral-base", "hover:bg-neutral-base/20", "active:bg-neutral-base/30", "focus-visible:border-neutral-base!", "aria-disabled:fill-neutral-base aria-disabled:opacity-50 hover:aria-disabled:bg-transparent active:aria-disabled:bg-transparent"]
     },
     size: {
-      xxs: "wby-border-sm wby-rounded-xs wby-size-sm-extra [&_svg]:wby-size-md [&_img]:wby-size-md",
-      xs: "wby-border-sm wby-rounded-xs wby-size-md [&_svg]:wby-size-md [&_img]:wby-size-md",
-      sm: "wby-border-sm wby-rounded-sm",
-      md: "wby-border-sm wby-rounded-md",
-      lg: "wby-border-sm wby-rounded-md",
-      xl: "wby-border-md wby-rounded-lg wby-p-[calc(theme(padding.md)-theme(borderWidth.md))] [&_svg]:wby-size-lg [&_img]:wby-size-lg"
+      xxs: "border-sm rounded-xs size-sm-extra [&_svg]:size-md [&_img]:size-md",
+      xs: "border-sm rounded-xs size-md [&_svg]:size-md [&_img]:size-md",
+      sm: "border-sm rounded-sm",
+      md: "border-sm rounded-md",
+      lg: "border-sm rounded-md",
+      xl: "border-md rounded-lg p-[calc(var(--padding-md)-(var(--border-width-md)))] [&_svg]:size-lg [&_img]:size-lg"
     },
     iconSize: {
       default: "",
@@ -34,31 +33,31 @@ const iconButtonVariants = cva(["wby-border-transparent wby-rounded wby-flex wby
   compoundVariants: [{
     size: "xl",
     variant: "ghost",
-    className: "focus-visible:wby-border-md"
+    className: "focus-visible:border-md"
   }, {
     size: "sm",
     iconSize: "default",
-    className: "wby-p-[calc(theme(padding.xs)-theme(borderWidth.sm))] [&_svg]:wby-size-md [&_img]:wby-size-md"
+    className: "p-[calc(var(--padding-xs)-var(--border-width-sm))] [&_svg]:size-md [&_img]:size-md"
   }, {
     size: "sm",
     iconSize: "lg",
-    className: "wby-p-[calc(theme(padding.xxs)-theme(borderWidth.sm))] [&_svg]:wby-size-md-plus [&_img]:wby-size-md-plus"
+    className: "p-[calc(var(--padding-xxs)-var(--border-width-sm))] [&_svg]:size-md-plus [&_img]:size-md-plus"
   }, {
     size: "md",
     iconSize: "default",
-    className: "wby-p-[calc(theme(padding.sm)-theme(borderWidth.sm))] [&_svg]:wby-size-md [&_img]:wby-size-md"
+    className: "p-[calc(var(--padding-sm)-var(--border-width-sm))] [&_svg]:size-md [&_img]:size-md"
   }, {
     size: "md",
     iconSize: "lg",
-    className: "wby-p-[calc(theme(padding.xs)-theme(borderWidth.sm))] [&_svg]:wby-size-lg [&_img]:wby-size-lg"
+    className: "p-[calc(var(--padding-xs)-var(--border-width-sm))] [&_svg]:size-lg [&_img]:size-lg"
   }, {
     size: "lg",
     iconSize: "default",
-    className: "wby-p-[calc(theme(padding.sm-plus)-theme(borderWidth.sm))] [&_svg]:wby-size-md-plus [&_img]:wby-size-md-plus"
+    className: "p-[calc(var(--padding-sm-plus)-var(--border-width-sm))] [&_svg]:size-md-plus [&_img]:size-md-plus"
   }, {
     size: "lg",
     iconSize: "lg",
-    className: "wby-p-[calc(theme(padding.sm)-theme(borderWidth.sm))] [&_svg]:wby-size-lg [&_img]:wby-size-lg"
+    className: "p-[calc(var(--padding-sm)-var(--border-width-sm))] [&_svg]:size-lg [&_img]:size-lg"
   }],
   defaultVariants: {
     variant: "primary",

package/Button/IconButton.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Slot","cn","cva","makeDecoratable","iconButtonWrapperVariants","variants","disabled","true","false","iconButtonVariants","variant","primary","secondary","tertiary","ghost","size","xxs","xs","sm","md","lg","xl","iconSize","default","compoundVariants","className","defaultVariants","DecoratableIconButton","icon","asChild","props","Comp","Root","createElement","Object","assign","IconButton"],"sources":["IconButton.tsx"],"sourcesContent":["import React from \"react\";\nimport { Slot } from \"radix-ui\";\nimport { cn, cva, type VariantProps, makeDecoratable } from \"~/utils\";\n\nconst iconButtonWrapperVariants = cva(\"wby-inline-block\", {\n    variants: {\n        disabled: {\n            true: \"wby-cursor-not-allowed\",\n            false: \"wby-cursor-pointer\"\n        }\n    }\n});\n\nconst iconButtonVariants = cva(\n    [\n        \"wby-border-transparent wby-rounded wby-flex wby-flex-shrink-0 wby-items-center wby-justify-center wby-ring-offset-background wby-transition-colors\",\n        \"[&_svg]:wby-pointer-events-none [&_svg]:wby-shrink-0\",\n        \"[&_img]:wby-pointer-events-none [&_img]:wby-shrink-0\",\n        \"aria-disabled:wby-pointer-events-none\",\n        \"focus-visible:wby-outline-none focus-visible:wby-border-accent-default\"\n    ],\n    {\n        variants: {\n            variant: {\n                primary: [\n                    \"wby-bg-primary wby-fill-neutral-base\",\n                    \"hover:wby-bg-primary-strong\",\n                    \"active:wby-bg-primary-xstrong\",\n                    \"aria-disabled:wby-bg-primary-disabled\",\n                    \"focus-visible:wby-ring-lg focus-visible:wby-ring-primary-dimmed\"\n                ],\n                secondary: [\n                    \"wby-bg-neutral-dimmed wby-fill-neutral-xstrong\",\n                    \"hover:wby-bg-neutral-muted\",\n                    \"active:wby-bg-neutral-strong\",\n                    \"aria-disabled:wby-bg-neutral-disabled aria-disabled:wby-fill-neutral-strong\",\n                    \"focus-visible:wby-ring-lg focus-visible:wby-ring-primary-dimmed\"\n                ],\n                tertiary: [\n                    \"wby-bg-neutral-base wby-border-neutral-muted wby-fill-neutral-xstrong\",\n                    \"hover:wby-bg-neutral-light\",\n                    \"active:wby-bg-neutral-muted\",\n                    \"aria-disabled:wby-bg-neutral-disabled aria-disabled:wby-fill-neutral-strong aria-disabled:wby-border-neutral-dimmed\",\n                    \"focus-visible:wby-ring-lg focus-visible:wby-ring-primary-dimmed\"\n                ],\n                ghost: [\n                    \"wby-bg-transparent wby-fill-neutral-xstrong\",\n                    \"hover:wby-bg-neutral-dimmed\",\n                    \"active:wby-bg-neutral-muted\",\n                    \"aria-disabled:wby-fill-neutral-strong hover:aria-disabled:wby-bg-transparent active:aria-disabled:wby-bg-transparent\"\n                ],\n                \"ghost-negative\": [\n                    \"wby-bg-transparent wby-fill-neutral-base\",\n                    \"hover:wby-bg-neutral-base/20\",\n                    \"active:wby-bg-neutral-base/30\",\n                    \"focus-visible:!wby-border-neutral-base\",\n                    \"aria-disabled:wby-fill-neutral-base aria-disabled:wby-opacity-50 hover:aria-disabled:wby-bg-transparent active:aria-disabled:wby-bg-transparent\"\n                ]\n            },\n            size: {\n                xxs: \"wby-border-sm wby-rounded-xs wby-size-sm-extra [&_svg]:wby-size-md [&_img]:wby-size-md\",\n                xs: \"wby-border-sm wby-rounded-xs wby-size-md [&_svg]:wby-size-md [&_img]:wby-size-md\",\n                sm: \"wby-border-sm wby-rounded-sm\",\n                md: \"wby-border-sm wby-rounded-md\",\n                lg: \"wby-border-sm wby-rounded-md\",\n                xl: \"wby-border-md wby-rounded-lg wby-p-[calc(theme(padding.md)-theme(borderWidth.md))] [&_svg]:wby-size-lg [&_img]:wby-size-lg\"\n            },\n            iconSize: {\n                default: \"\",\n                lg: \"\"\n            }\n        },\n        compoundVariants: [\n            {\n                size: \"xl\",\n                variant: \"ghost\",\n                className: \"focus-visible:wby-border-md\"\n            },\n            {\n                size: \"sm\",\n                iconSize: \"default\",\n                className:\n                    \"wby-p-[calc(theme(padding.xs)-theme(borderWidth.sm))] [&_svg]:wby-size-md [&_img]:wby-size-md\"\n            },\n            {\n                size: \"sm\",\n                iconSize: \"lg\",\n                className:\n                    \"wby-p-[calc(theme(padding.xxs)-theme(borderWidth.sm))] [&_svg]:wby-size-md-plus [&_img]:wby-size-md-plus\"\n            },\n            {\n                size: \"md\",\n                iconSize: \"default\",\n                className:\n                    \"wby-p-[calc(theme(padding.sm)-theme(borderWidth.sm))] [&_svg]:wby-size-md [&_img]:wby-size-md\"\n            },\n            {\n                size: \"md\",\n                iconSize: \"lg\",\n                className:\n                    \"wby-p-[calc(theme(padding.xs)-theme(borderWidth.sm))] [&_svg]:wby-size-lg [&_img]:wby-size-lg\"\n            },\n            {\n                size: \"lg\",\n                iconSize: \"default\",\n                className:\n                    \"wby-p-[calc(theme(padding.sm-plus)-theme(borderWidth.sm))] [&_svg]:wby-size-md-plus [&_img]:wby-size-md-plus\"\n            },\n            {\n                size: \"lg\",\n                iconSize: \"lg\",\n                className:\n                    \"wby-p-[calc(theme(padding.sm)-theme(borderWidth.sm))] [&_svg]:wby-size-lg [&_img]:wby-size-lg\"\n            }\n        ],\n        defaultVariants: {\n            variant: \"primary\",\n            size: \"md\",\n            iconSize: \"default\"\n        }\n    }\n);\n\ninterface IconButtonProps\n    extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"children\">,\n        VariantProps<typeof iconButtonVariants> {\n    icon?: React.ReactNode;\n    asChild?: boolean;\n}\n\nconst DecoratableIconButton = ({\n    className,\n    variant,\n    size,\n    icon,\n    iconSize,\n    asChild = false,\n    disabled,\n    ...props\n}: IconButtonProps) => {\n    const Comp = asChild ? Slot.Root : \"button\";\n    return (\n        <span className={cn(iconButtonWrapperVariants({ disabled }))}>\n            <Comp\n                {...props}\n                className={cn(iconButtonVariants({ variant, size, iconSize }), className)}\n                disabled={disabled}\n                aria-disabled={disabled}\n            >\n                {icon}\n            </Comp>\n        </span>\n    );\n};\n\nconst IconButton = makeDecoratable(\"IconButton\", DecoratableIconButton);\n\nexport { IconButton, type IconButtonProps, iconButtonVariants };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","Slot","cn","cva","makeDecoratable","iconButtonWrapperVariants","variants","disabled","true","iconButtonVariants","variant","primary","secondary","tertiary","ghost","size","xxs","xs","sm","md","lg","xl","iconSize","default","compoundVariants","className","defaultVariants","DecoratableIconButton","icon","asChild","props","Comp","Root","createElement","Object","assign","IconButton"],"sources":["IconButton.tsx"],"sourcesContent":["import React from \"react\";\nimport { Slot } from \"radix-ui\";\nimport { cn, cva, type VariantProps, makeDecoratable } from \"~/utils.js\";\n\nconst iconButtonWrapperVariants = cva(\"inline-block\", {\n    variants: {\n        disabled: {\n            true: \"cursor-not-allowed\"\n        }\n    }\n});\n\nconst iconButtonVariants = cva(\n    [\n        \"border-transparent rounded flex shrink-0 items-center justify-center ring-offset-background transition-colors cursor-pointer\",\n        \"[&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        \"[&_img]:pointer-events-none [&_img]:shrink-0\",\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 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 fill-neutral-xstrong\",\n                    \"hover:bg-neutral-muted\",\n                    \"active:bg-neutral-strong\",\n                    \"aria-disabled:bg-neutral-disabled aria-disabled:fill-neutral-strong\",\n                    \"focus-visible:ring-lg focus-visible:ring-primary-dimmed\"\n                ],\n                tertiary: [\n                    \"bg-neutral-base border-neutral-muted fill-neutral-xstrong\",\n                    \"hover:bg-neutral-light\",\n                    \"active:bg-neutral-muted\",\n                    \"aria-disabled:bg-neutral-disabled aria-disabled:fill-neutral-strong aria-disabled:border-neutral-dimmed\",\n                    \"focus-visible:ring-lg focus-visible:ring-primary-dimmed\"\n                ],\n                ghost: [\n                    \"bg-transparent fill-neutral-xstrong\",\n                    \"hover:bg-neutral-dark/5\",\n                    \"active:bg-neutral-muted\",\n                    \"aria-disabled:fill-neutral-strong hover:aria-disabled:bg-transparent active:aria-disabled:bg-transparent\"\n                ],\n                \"ghost-negative\": [\n                    \"bg-transparent fill-neutral-base\",\n                    \"hover:bg-neutral-base/20\",\n                    \"active:bg-neutral-base/30\",\n                    \"focus-visible:border-neutral-base!\",\n                    \"aria-disabled:fill-neutral-base aria-disabled:opacity-50 hover:aria-disabled:bg-transparent active:aria-disabled:bg-transparent\"\n                ]\n            },\n            size: {\n                xxs: \"border-sm rounded-xs size-sm-extra [&_svg]:size-md [&_img]:size-md\",\n                xs: \"border-sm rounded-xs size-md [&_svg]:size-md [&_img]:size-md\",\n                sm: \"border-sm rounded-sm\",\n                md: \"border-sm rounded-md\",\n                lg: \"border-sm rounded-md\",\n                xl: \"border-md rounded-lg p-[calc(var(--padding-md)-(var(--border-width-md)))] [&_svg]:size-lg [&_img]:size-lg\"\n            },\n            iconSize: {\n                default: \"\",\n                lg: \"\"\n            }\n        },\n        compoundVariants: [\n            {\n                size: \"xl\",\n                variant: \"ghost\",\n                className: \"focus-visible:border-md\"\n            },\n            {\n                size: \"sm\",\n                iconSize: \"default\",\n                className:\n                    \"p-[calc(var(--padding-xs)-var(--border-width-sm))] [&_svg]:size-md [&_img]:size-md\"\n            },\n            {\n                size: \"sm\",\n                iconSize: \"lg\",\n                className:\n                    \"p-[calc(var(--padding-xxs)-var(--border-width-sm))] [&_svg]:size-md-plus [&_img]:size-md-plus\"\n            },\n            {\n                size: \"md\",\n                iconSize: \"default\",\n                className:\n                    \"p-[calc(var(--padding-sm)-var(--border-width-sm))] [&_svg]:size-md [&_img]:size-md\"\n            },\n            {\n                size: \"md\",\n                iconSize: \"lg\",\n                className:\n                    \"p-[calc(var(--padding-xs)-var(--border-width-sm))] [&_svg]:size-lg [&_img]:size-lg\"\n            },\n            {\n                size: \"lg\",\n                iconSize: \"default\",\n                className:\n                    \"p-[calc(var(--padding-sm-plus)-var(--border-width-sm))] [&_svg]:size-md-plus [&_img]:size-md-plus\"\n            },\n            {\n                size: \"lg\",\n                iconSize: \"lg\",\n                className:\n                    \"p-[calc(var(--padding-sm)-var(--border-width-sm))] [&_svg]:size-lg [&_img]:size-lg\"\n            }\n        ],\n        defaultVariants: {\n            variant: \"primary\",\n            size: \"md\",\n            iconSize: \"default\"\n        }\n    }\n);\n\ninterface IconButtonProps\n    extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"children\">,\n        VariantProps<typeof iconButtonVariants> {\n    icon?: React.ReactNode;\n    asChild?: boolean;\n}\n\nconst DecoratableIconButton = ({\n    className,\n    variant,\n    size,\n    icon,\n    iconSize,\n    asChild = false,\n    disabled,\n    ...props\n}: IconButtonProps) => {\n    const Comp = asChild ? Slot.Root : \"button\";\n    return (\n        <span className={cn(iconButtonWrapperVariants({ disabled }))}>\n            <Comp\n                {...props}\n                className={cn(iconButtonVariants({ variant, size, iconSize }), className)}\n                disabled={disabled}\n                aria-disabled={disabled}\n            >\n                {icon}\n            </Comp>\n        </span>\n    );\n};\n\nconst IconButton = makeDecoratable(\"IconButton\", DecoratableIconButton);\n\nexport { IconButton, type IconButtonProps, iconButtonVariants };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,UAAU;AAC/B,SAASC,EAAE,EAAEC,GAAG,EAAqBC,eAAe;AAEpD,MAAMC,yBAAyB,GAAGF,GAAG,CAAC,cAAc,EAAE;EAClDG,QAAQ,EAAE;IACNC,QAAQ,EAAE;MACNC,IAAI,EAAE;IACV;EACJ;AACJ,CAAC,CAAC;AAEF,MAAMC,kBAAkB,GAAGN,GAAG,CAC1B,CACI,8HAA8H,EAC9H,8CAA8C,EAC9C,8CAA8C,EAC9C,mCAAmC,EACnC,gEAAgE,CACnE,EACD;EACIG,QAAQ,EAAE;IACNI,OAAO,EAAE;MACLC,OAAO,EAAE,CACL,8BAA8B,EAC9B,yBAAyB,EACzB,2BAA2B,EAC3B,mCAAmC,EACnC,yDAAyD,CAC5D;MACDC,SAAS,EAAE,CACP,wCAAwC,EACxC,wBAAwB,EACxB,0BAA0B,EAC1B,qEAAqE,EACrE,yDAAyD,CAC5D;MACDC,QAAQ,EAAE,CACN,2DAA2D,EAC3D,wBAAwB,EACxB,yBAAyB,EACzB,yGAAyG,EACzG,yDAAyD,CAC5D;MACDC,KAAK,EAAE,CACH,qCAAqC,EACrC,yBAAyB,EACzB,yBAAyB,EACzB,0GAA0G,CAC7G;MACD,gBAAgB,EAAE,CACd,kCAAkC,EAClC,0BAA0B,EAC1B,2BAA2B,EAC3B,oCAAoC,EACpC,iIAAiI;IAEzI,CAAC;IACDC,IAAI,EAAE;MACFC,GAAG,EAAE,oEAAoE;MACzEC,EAAE,EAAE,8DAA8D;MAClEC,EAAE,EAAE,sBAAsB;MAC1BC,EAAE,EAAE,sBAAsB;MAC1BC,EAAE,EAAE,sBAAsB;MAC1BC,EAAE,EAAE;IACR,CAAC;IACDC,QAAQ,EAAE;MACNC,OAAO,EAAE,EAAE;MACXH,EAAE,EAAE;IACR;EACJ,CAAC;EACDI,gBAAgB,EAAE,CACd;IACIT,IAAI,EAAE,IAAI;IACVL,OAAO,EAAE,OAAO;IAChBe,SAAS,EAAE;EACf,CAAC,EACD;IACIV,IAAI,EAAE,IAAI;IACVO,QAAQ,EAAE,SAAS;IACnBG,SAAS,EACL;EACR,CAAC,EACD;IACIV,IAAI,EAAE,IAAI;IACVO,QAAQ,EAAE,IAAI;IACdG,SAAS,EACL;EACR,CAAC,EACD;IACIV,IAAI,EAAE,IAAI;IACVO,QAAQ,EAAE,SAAS;IACnBG,SAAS,EACL;EACR,CAAC,EACD;IACIV,IAAI,EAAE,IAAI;IACVO,QAAQ,EAAE,IAAI;IACdG,SAAS,EACL;EACR,CAAC,EACD;IACIV,IAAI,EAAE,IAAI;IACVO,QAAQ,EAAE,SAAS;IACnBG,SAAS,EACL;EACR,CAAC,EACD;IACIV,IAAI,EAAE,IAAI;IACVO,QAAQ,EAAE,IAAI;IACdG,SAAS,EACL;EACR,CAAC,CACJ;EACDC,eAAe,EAAE;IACbhB,OAAO,EAAE,SAAS;IAClBK,IAAI,EAAE,IAAI;IACVO,QAAQ,EAAE;EACd;AACJ,CACJ,CAAC;AASD,MAAMK,qBAAqB,GAAGA,CAAC;EAC3BF,SAAS;EACTf,OAAO;EACPK,IAAI;EACJa,IAAI;EACJN,QAAQ;EACRO,OAAO,GAAG,KAAK;EACftB,QAAQ;EACR,GAAGuB;AACU,CAAC,KAAK;EACnB,MAAMC,IAAI,GAAGF,OAAO,GAAG5B,IAAI,CAAC+B,IAAI,GAAG,QAAQ;EAC3C,oBACIhC,KAAA,CAAAiC,aAAA;IAAMR,SAAS,EAAEvB,EAAE,CAACG,yBAAyB,CAAC;MAAEE;IAAS,CAAC,CAAC;EAAE,gBACzDP,KAAA,CAAAiC,aAAA,CAACF,IAAI,EAAAG,MAAA,CAAAC,MAAA,KACGL,KAAK;IACTL,SAAS,EAAEvB,EAAE,CAACO,kBAAkB,CAAC;MAAEC,OAAO;MAAEK,IAAI;MAAEO;IAAS,CAAC,CAAC,EAAEG,SAAS,CAAE;IAC1ElB,QAAQ,EAAEA,QAAS;IACnB,iBAAeA;EAAS,IAEvBqB,IACC,CACJ,CAAC;AAEf,CAAC;AAED,MAAMQ,UAAU,GAAGhC,eAAe,CAAC,YAAY,EAAEuB,qBAAqB,CAAC;AAEvE,SAASS,UAAU,EAAwB3B,kBAAkB","ignoreList":[]}

package/Button/IconButton.stories.d.ts

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { IconButton } from "./IconButton";
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import { IconButton } from "./IconButton.js";
 declare const meta: Meta<typeof IconButton>;
 export default meta;
 type Story = StoryObj<typeof IconButton>;

package/Button/IconButton.stories.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
-import { IconButton } from "./IconButton";
+import { IconButton } from "./IconButton.js";
 const meta = {
   title: "Components/Icon Button",
   component: IconButton,
@@ -30,8 +30,7 @@ const meta = {
       defaultValue: false
     },
     icon: {
-      description: "Please refer to the example above for usage information.",
-      control: "none"
+      description: "Please refer to the example above for usage information."
     },
     onClick: {
       action: "onClick"
@@ -65,7 +64,7 @@ export const Ghost = {
 };
 export const GhostNegative = {
   decorators: [Story => /*#__PURE__*/React.createElement("div", {
-    className: "wby-bg-[#25292e] wby-p-[300px] wby-rounded-[5px]"
+    className: "bg-[#25292e] p-[300px] rounded-[5px]"
   }, /*#__PURE__*/React.createElement(Story, null))],
   args: {
     ...Primary.args,