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

package/Button/Button.js

@@ -1,130 +1,179 @@
-import React, { useMemo } from "react";
+import react, { useMemo } from "react";
 import { Slot } from "radix-ui";
 import { cn, cva, makeDecoratable } from "../utils.js";
 const buttonWrapperVariants = cva("inline-block", {
-  variants: {
-    disabled: {
-      true: "cursor-not-allowed"
+    variants: {
+        disabled: {
+            true: "cursor-not-allowed"
+        }
     }
-  }
 });
-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: ["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!"]
+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: [
+                "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: [
+                "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: "",
+            icon: "",
+            "text-icon-start": "",
+            "text-icon-end": ""
+        }
     },
-    size: {
-      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: "",
-      icon: "",
-      "text-icon-start": "",
-      "text-icon-end": ""
+    compoundVariants: [
+        {
+            size: "xl",
+            variant: "ghost",
+            className: "focus-visible:border-md"
+        },
+        {
+            size: "sm",
+            contentLayout: "icon",
+            className: "p-[calc(var(--padding-xs)-(var(--border-width-sm)))]"
+        },
+        {
+            size: "sm",
+            contentLayout: "text-icon-start",
+            className: "pl-[calc(var(--padding-xs)-(var(--border-width-sm)))] [&>svg]:mr-xs"
+        },
+        {
+            size: "sm",
+            contentLayout: "text-icon-end",
+            className: "pr-[calc(var(--padding-xs)-(var(--border-width-sm)))] [&>svg]:ml-xs"
+        },
+        {
+            size: "md",
+            contentLayout: "icon",
+            className: "p-[calc(var(--padding-sm)-(var(--border-width-sm)))]"
+        },
+        {
+            size: "md",
+            contentLayout: "text-icon-start",
+            className: "pl-[calc(var(--padding-xs-plus)-(var(--border-width-sm)))] [&>svg]:mr-xs"
+        },
+        {
+            size: "md",
+            contentLayout: "text-icon-end",
+            className: "pr-[calc(var(--padding-xs-plus)-(var(--border-width-sm)))] [&>svg]:ml-xs"
+        },
+        {
+            size: "lg",
+            contentLayout: "icon",
+            className: "p-[calc(var(--padding-sm-plus)-(var(--border-width-sm)))]"
+        },
+        {
+            size: "lg",
+            contentLayout: "text-icon-start",
+            className: "pl-[calc(var(--padding-sm-extra)-(var(--border-width-sm)))] [&>svg]:mr-xs-plus"
+        },
+        {
+            size: "lg",
+            contentLayout: "text-icon-end",
+            className: "pr-[calc(var(--padding-sm-extra)-(var(--border-width-sm)))] [&>svg]:ml-xs-plus"
+        },
+        {
+            size: "xl",
+            contentLayout: "icon",
+            className: "p-[calc(var(--padding-md)-(var(--border-width-md)))]"
+        },
+        {
+            size: "xl",
+            contentLayout: "text-icon-start",
+            className: "pl-[calc(var(--padding-sm-extra)-(var(--border-width-md)))] [&>svg]:mr-sm"
+        },
+        {
+            size: "xl",
+            contentLayout: "text-icon-end",
+            className: "pr-[calc(var(--padding-sm-extra)-(var(--border-width-md)))] [&>svg]:ml-sm"
+        }
+    ],
+    defaultVariants: {
+        variant: "primary",
+        size: "md"
     }
-  },
-  compoundVariants: [{
-    size: "xl",
-    variant: "ghost",
-    className: "focus-visible:border-md"
-  }, {
-    size: "sm",
-    contentLayout: "icon",
-    className: "p-[calc(var(--padding-xs)-(var(--border-width-sm)))]"
-  }, {
-    size: "sm",
-    contentLayout: "text-icon-start",
-    className: "pl-[calc(var(--padding-xs)-(var(--border-width-sm)))] [&>svg]:mr-xs"
-  }, {
-    size: "sm",
-    contentLayout: "text-icon-end",
-    className: "pr-[calc(var(--padding-xs)-(var(--border-width-sm)))] [&>svg]:ml-xs"
-  }, {
-    size: "md",
-    contentLayout: "icon",
-    className: "p-[calc(var(--padding-sm)-(var(--border-width-sm)))]"
-  }, {
-    size: "md",
-    contentLayout: "text-icon-start",
-    className: "pl-[calc(var(--padding-xs-plus)-(var(--border-width-sm)))] [&>svg]:mr-xs"
-  }, {
-    size: "md",
-    contentLayout: "text-icon-end",
-    className: "pr-[calc(var(--padding-xs-plus)-(var(--border-width-sm)))] [&>svg]:ml-xs"
-  }, {
-    size: "lg",
-    contentLayout: "icon",
-    className: "p-[calc(var(--padding-sm-plus)-(var(--border-width-sm)))]"
-  }, {
-    size: "lg",
-    contentLayout: "text-icon-start",
-    className: "pl-[calc(var(--padding-sm-extra)-(var(--border-width-sm)))] [&>svg]:mr-xs-plus"
-  }, {
-    size: "lg",
-    contentLayout: "text-icon-end",
-    className: "pr-[calc(var(--padding-sm-extra)-(var(--border-width-sm)))] [&>svg]:ml-xs-plus"
-  }, {
-    size: "xl",
-    contentLayout: "icon",
-    className: "p-[calc(var(--padding-md)-(var(--border-width-md)))]"
-  }, {
-    size: "xl",
-    contentLayout: "text-icon-start",
-    className: "pl-[calc(var(--padding-sm-extra)-(var(--border-width-md)))] [&>svg]:mr-sm"
-  }, {
-    size: "xl",
-    contentLayout: "text-icon-end",
-    className: "pr-[calc(var(--padding-sm-extra)-(var(--border-width-md)))] [&>svg]:ml-sm"
-  }],
-  defaultVariants: {
-    variant: "primary",
-    size: "md"
-  }
 });
-const ButtonBase = ({
-  className,
-  variant,
-  size,
-  asChild = false,
-  text,
-  children,
-  icon,
-  iconPosition = "start",
-  disabled,
-  containerClassName,
-  ...rest
-}) => {
-  const Comp = asChild ? Slot.Root : "button";
-  const contentLayout = useMemo(() => {
-    if (!text && !children) {
-      return "icon";
-    }
-    if (!icon) {
-      return "text";
-    }
-    return `text-icon-${iconPosition}`;
-  }, [text, children, icon, iconPosition]);
-  const cssClasses = cn(buttonVariants({
-    variant,
-    size,
-    contentLayout
-  }), className);
-  return /*#__PURE__*/React.createElement("span", {
-    className: cn(buttonWrapperVariants({
-      disabled
-    }), containerClassName)
-  }, /*#__PURE__*/React.createElement(Comp, Object.assign({
-    className: cssClasses,
-    disabled: disabled,
-    "aria-disabled": disabled
-  }, rest), iconPosition !== "end" && icon, /*#__PURE__*/React.createElement(Slot.Slottable, null, text || children || null), iconPosition === "end" && icon));
+const ButtonBase = ({ className, variant, size, asChild = false, text, children, icon, iconPosition = "start", disabled, containerClassName, ...rest })=>{
+    const Comp = asChild ? Slot.Root : "button";
+    const contentLayout = useMemo(()=>{
+        if (!text && !children) return "icon";
+        if (!icon) return "text";
+        return `text-icon-${iconPosition}`;
+    }, [
+        text,
+        children,
+        icon,
+        iconPosition
+    ]);
+    const cssClasses = cn(buttonVariants({
+        variant,
+        size,
+        contentLayout
+    }), className);
+    return /*#__PURE__*/ react.createElement("span", {
+        className: cn(buttonWrapperVariants({
+            disabled
+        }), containerClassName)
+    }, /*#__PURE__*/ react.createElement(Comp, {
+        className: cssClasses,
+        disabled: disabled,
+        "aria-disabled": disabled,
+        ...rest
+    }, "end" !== iconPosition && icon, /*#__PURE__*/ react.createElement(Slot.Slottable, null, text || children || null), "end" === iconPosition && 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","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":[]}
+{"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"}

package/Button/Button.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';
+import { Canvas, Meta, Controls } from "@storybook/addon-docs/blocks";
 
-import * as ButtonStories from './Button.stories';
+import * as ButtonStories from "./Button.stories";
 
 <Meta of={ButtonStories} />
 
@@ -17,25 +17,25 @@ The Button component is a key UI element that enables users to trigger actions o
         \n <Button variant="primary" text={"Button"}></Button>
 
 ` } }
-        additionalActions={[
-            {
-                title: 'Open in GitHub',
-                onClick: () => {
-                    window.open(
-                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Button/Button.tsx',
-                        '_blank'
-                    );
-                },
-            }
-        ]}
+additionalActions={[
+{
+title: 'Open in GitHub',
+onClick: () => {
+window.open(
+'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Button/Button.tsx',
+'_blank'
+);
+},
+}
+]}
 />
 
 <Controls of={ButtonStories.Documentation} exclude={"onClick"} />
 
 ```jsx
-import { Button } from '@webiny/admin-ui';
+import { Button } from "@webiny/admin-ui";
 
-<Button variant="primary" text={"Button"}></Button>
+<Button variant="primary" text={"Button"}></Button>;
 ```
 
 ## Examples
@@ -51,7 +51,6 @@ import { Button } from '@webiny/admin-ui';
 ` } }
 />
 
-
 ### Secondary
 
 <Canvas of={ButtonStories.Secondary}
@@ -105,11 +104,12 @@ import { Button } from '@webiny/admin-ui';
                 import { Button } from '@webiny/admin-ui';
                 import { ReactComponent as PencilIcon } from "@webiny/icons/edit.svg";
                 \n<Button variant="primary"  text={"Button"} size="md" icon={<PencilIcon />} iconPosition="start"></Button>
+
 ` } }
 />
 
-
 ### As Child
+
 The Button component can be used as a wrapper for other elements, allowing flexible composition. This is particularly useful when integrating custom text elements, or any other components inside a button.
 
 <Canvas of={ButtonStories.WithAsChild} story={ {inline: false}}
@@ -125,19 +125,20 @@ The Button component can be used as a wrapper for other elements, allowing flexi
 />
 
 ### Icon Only Button
-import * as IconButtonStories from './IconButton.stories';
+
+import * as IconButtonStories from "./IconButton.stories";
 
 **We have a dedicated `IconButton` component for the Icon-only button. Please check the code below for more details.**
 
 #### Usage
 
 ```jsx
-import { IconButton } from '@webiny/admin-ui';
+import { IconButton } from "@webiny/admin-ui";
 ```
 
 ```jsx
-import { ReactComponent as AddIcon } from "@webiny/icons/add.svg"
-<IconButton icon={<AddIcon />} size={"md"}/>
+import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
+<IconButton icon={<AddIcon />} size={"md"} />;
 ```
 
 <Canvas of={IconButtonStories.Documentation}
@@ -148,17 +149,17 @@ import { ReactComponent as AddIcon } from "@webiny/icons/add.svg"
         \n <IconButton icon={<AddIcon />} size={"md"}/>
 
 ` } }
-        additionalActions={[
-            {
-                title: 'Open in GitHub',
-                onClick: () => {
-                    window.open(
-                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Button/Button.tsx',
-                        '_blank'
-                    );
-                },
-            }
-        ]}
+additionalActions={[
+{
+title: 'Open in GitHub',
+onClick: () => {
+window.open(
+'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Button/Button.tsx',
+'_blank'
+);
+},
+}
+]}
 />
 
 #### Props
@@ -168,40 +169,47 @@ import { ReactComponent as AddIcon } from "@webiny/icons/add.svg"
 ## Anatomy
 
 ### Construction
-<img src="/images/storybook/button/contruction.png" alt="Construction"/>
+
+<img src="/images/storybook/button/contruction.png" alt="Construction" />
 
 ### Options
-<img src="/images/storybook/button/options.png" alt="Options"/>
+
+<img src="/images/storybook/button/options.png" alt="Options" />
 
 ### Variants
-<img src="/images/storybook/button/type.png" alt="Variants"/>
+
+<img src="/images/storybook/button/type.png" alt="Variants" />
 
 ### Size
+
 Regular buttons come in four different sizes: small, medium, large, and xl. The medium size is the default and most frequently used option. Use the other sizes sparingly; they should be used to create a hierarchy of importance within the page.
 
-<img src="/images/storybook/button/size.png" alt="Size"/>
+<img src="/images/storybook/button/size.png" alt="Size" />
 
 **Icon-only button** come in six different sizes to accommodate for various component needs.
 
-<img src="/images/storybook/button/size-icon-only.png" alt="Size - Icon Only"/>
-
+<img src="/images/storybook/button/size-icon-only.png" alt="Size - Icon Only" />
 
 ### States
-<img src="/images/storybook/button/states.png" alt="States"/>
+
+<img src="/images/storybook/button/states.png" alt="States" />
 
 ## Usage
 
 ### Icon Usage
+
 An icon should only be used in a button when it's benefitial and when it has a meaningful association with the label.
 
-<img src="/images/storybook/button/icon-usage.png" alt="Icon Usage"/>
+<img src="/images/storybook/button/icon-usage.png" alt="Icon Usage" />
 
 ### Use primary buttons sparingly
+
 Use primary buttons as the desired action for users. Competing primary buttons may leave the user unsure of next steps in their user journey. As a rule of thumb limit primary buttons to 1 in contained UIs and 3 in full page UIs.
 
-<img src="/images/storybook/button/primary-button-usage.png" alt="Primary Button Usage"/>
+<img src="/images/storybook/button/primary-button-usage.png" alt="Primary Button Usage" />
 
 ### 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" />