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

package/Avatar/Avatar.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 AvatarStories from './Avatar.stories';
+import * as AvatarStories from "./Avatar.stories";
 
 <Meta of={AvatarStories} />
 
@@ -15,30 +15,30 @@ import React from "react";
 import { Avatar } from "@webiny/admin-ui";
 
 const AvatarExample = () => {
-    return (
-        <Avatar
-            image={<Avatar.Image src="https://i.pravatar.cc/300" alt="User" />}
-            fallback={<Avatar.Fallback>JD</Avatar.Fallback>}
-            size="md"
-            variant="strong"
-        />
-    );
-};
+return (
+
+<Avatar
+  image={<Avatar.Image src="https://i.pravatar.cc/300" alt="User" />}
+  fallback={<Avatar.Fallback>JD</Avatar.Fallback>}
+  size="md"
+  variant="strong"
+/>
+); };
 
 export default AvatarExample;
 
 ` } }
-        additionalActions={[
-            {
-                title: 'Open in GitHub',
-                onClick: () => {
-                    window.open(
-                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Avatar/Avatar.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/Avatar/Avatar.tsx',
+'_blank'
+);
+},
+}
+]}
 />
 
 <Controls of={AvatarStories.Documentation} />
@@ -48,14 +48,14 @@ import React from "react";
 import { Avatar } from "@webiny/admin-ui";
 
 const AvatarExample = () => {
-    return (
-        <Avatar
-            image={<Avatar.Image src="https://i.pravatar.cc/300" alt="User" />}
-            fallback={<Avatar.Fallback>JD</Avatar.Fallback>}
-            size="md"
-            variant="strong"
-        />
-    );
+  return (
+    <Avatar
+      image={<Avatar.Image src="https://i.pravatar.cc/300" alt="User" />}
+      fallback={<Avatar.Fallback>JD</Avatar.Fallback>}
+      size="md"
+      variant="strong"
+    />
+  );
 };
 
 export default AvatarExample;
@@ -71,14 +71,18 @@ import { ReactComponent as StormIcon } from "@webiny/icons/storm.svg";
 import { Avatar } from "@webiny/admin-ui";
 
 const AvatarExample = () => {
-    return (
-        <Avatar
-        fallback={<Avatar.Fallback><StormIcon /></Avatar.Fallback>}
-        size="md"
-        variant="strong"
-    />
-    );
-};
+return (
+
+<Avatar
+  fallback={
+    <Avatar.Fallback>
+      <StormIcon />
+    </Avatar.Fallback>
+  }
+  size="md"
+  variant="strong"
+/>
+); };
 
 export default AvatarExample;
 
@@ -88,18 +92,23 @@ export default AvatarExample;
 ## Anatomy
 
 ### Size
-<img src="/images/storybook/avatar/size.png" alt="Size"/>
+
+<img src="/images/storybook/avatar/size.png" alt="Size" />
 
 ### Type
-<img src="/images/storybook/avatar/type.png" alt="Type"/>
+
+<img src="/images/storybook/avatar/type.png" alt="Type" />
 
 ### Style
-<img src="/images/storybook/avatar/style.png" alt="Style"/>
+
+<img src="/images/storybook/avatar/style.png" alt="Style" />
 
 ## Usage
 
 ### Header
-<img src="/images/storybook/avatar/header.png" alt="Header"/>
+
+<img src="/images/storybook/avatar/header.png" alt="Header" />
 
 ### Table
-<img src="/images/storybook/avatar/table.png" alt="Table"/>
+
+<img src="/images/storybook/avatar/table.png" alt="Table" />

package/Button/Button.d.ts

@@ -4,7 +4,7 @@ declare const buttonVariants: (props?: ({
     variant?: "primary" | "secondary" | "tertiary" | "ghost" | "ghost-negative" | null | undefined;
     size?: "sm" | "md" | "lg" | "xl" | null | undefined;
     contentLayout?: "text" | "icon" | "text-icon-start" | "text-icon-end" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children">, VariantProps<typeof buttonVariants> {
     text?: React.ReactNode;
     children?: React.ReactNode;

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":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,IAAI,QAAQ,UAAU;AAC/B,SAASC,EAAE,EAAEC,GAAG,EAAqBC,eAAe;AAEpD,MAAMC,qBAAqB,GAAGF,GAAG,CAAC,cAAc,EAAE;EAC9CG,QAAQ,EAAE;IACNC,QAAQ,EAAE;MACNC,IAAI,EAAE;IACV;EACJ;AACJ,CAAC,CAAC;AAEF,MAAMC,cAAc,GAAGN,GAAG,CACtB,CACI,sKAAsK,EACtK,mCAAmC,EACnC,gEAAgE,CACnE,EACD;EACIG,QAAQ,EAAE;IACNI,OAAO,EAAE;MACLC,OAAO,EAAE,CACL,iDAAiD,EACjD,yBAAyB,EACzB,2BAA2B,EAC3B,mCAAmC,EACnC,yDAAyD,CAC5D;MACDC,SAAS,EAAE,CACP,4DAA4D,EAC5D,wBAAwB,EACxB,0BAA0B,EAC1B,yGAAyG,EACzG,yDAAyD,CAC5D;MACDC,QAAQ,EAAE,CACN,+EAA+E,EAC/E,wBAAwB,EACxB,yBAAyB,EACzB,6IAA6I,EAC7I,yDAAyD,CAC5D;MACDC,KAAK,EAAE,CACH,yDAAyD,EACzD,yBAAyB,EACzB,yBAAyB,EACzB,uEAAuE,CAC1E;MACD,gBAAgB,EAAE,CACd,qDAAqD,EACrD,0BAA0B,EAC1B,2BAA2B,EAC3B,wEAAwE,EACxE,oCAAoC;IAE5C,CAAC;IACDC,IAAI,EAAE;MACFC,EAAE,EAAE,CACA,8CAA8C,EAC9C,6GAA6G,CAChH;MACDC,EAAE,EAAE,CACA,8CAA8C,EAC9C,wHAAwH,CAC3H;MACDC,EAAE,EAAE,CACA,mDAAmD,EACnD,kHAAkH,CACrH;MACDC,EAAE,EAAE,CACA,4DAA4D,EAC5D,kHAAkH;IAE1H,CAAC;IACDC,aAAa,EAAE;MACXC,IAAI,EAAE,EAAE;MACRC,IAAI,EAAE,EAAE;MACR,iBAAiB,EAAE,EAAE;MACrB,eAAe,EAAE;IACrB;EACJ,CAAC;EACDC,gBAAgB,EAAE,CACd;IACIR,IAAI,EAAE,IAAI;IACVL,OAAO,EAAE,OAAO;IAChBc,SAAS,EAAE;EACf,CAAC,EACD;IACIT,IAAI,EAAE,IAAI;IACVK,aAAa,EAAE,MAAM;IACrBI,SAAS,EAAE;EACf,CAAC,EACD;IACIT,IAAI,EAAE,IAAI;IACVK,aAAa,EAAE,iBAAiB;IAChCI,SAAS,EAAE;EACf,CAAC,EACD;IACIT,IAAI,EAAE,IAAI;IACVK,aAAa,EAAE,eAAe;IAC9BI,SAAS,EAAE;EACf,CAAC,EACD;IACIT,IAAI,EAAE,IAAI;IACVK,aAAa,EAAE,MAAM;IACrBI,SAAS,EAAE;EACf,CAAC,EACD;IACIT,IAAI,EAAE,IAAI;IACVK,aAAa,EAAE,iBAAiB;IAChCI,SAAS,EACL;EACR,CAAC,EACD;IACIT,IAAI,EAAE,IAAI;IACVK,aAAa,EAAE,eAAe;IAC9BI,SAAS,EACL;EACR,CAAC,EACD;IACIT,IAAI,EAAE,IAAI;IACVK,aAAa,EAAE,MAAM;IACrBI,SAAS,EAAE;EACf,CAAC,EACD;IACIT,IAAI,EAAE,IAAI;IACVK,aAAa,EAAE,iBAAiB;IAChCI,SAAS,EACL;EACR,CAAC,EACD;IACIT,IAAI,EAAE,IAAI;IACVK,aAAa,EAAE,eAAe;IAC9BI,SAAS,EACL;EACR,CAAC,EACD;IACIT,IAAI,EAAE,IAAI;IACVK,aAAa,EAAE,MAAM;IACrBI,SAAS,EAAE;EACf,CAAC,EACD;IACIT,IAAI,EAAE,IAAI;IACVK,aAAa,EAAE,iBAAiB;IAChCI,SAAS,EACL;EACR,CAAC,EACD;IACIT,IAAI,EAAE,IAAI;IACVK,aAAa,EAAE,eAAe;IAC9BI,SAAS,EACL;EACR,CAAC,CACJ;EACDC,eAAe,EAAE;IACbf,OAAO,EAAE,SAAS;IAClBK,IAAI,EAAE;EACV;AACJ,CACJ,CAAC;AAmBD,MAAMW,UAAU,GAAGA,CAAC;EAChBF,SAAS;EACTd,OAAO;EACPK,IAAI;EACJY,OAAO,GAAG,KAAK;EACfN,IAAI;EACJO,QAAQ;EACRN,IAAI;EACJO,YAAY,GAAG,OAAO;EACtBtB,QAAQ;EACRuB,kBAAkB;EAClB,GAAGC;AACM,CAAC,KAAK;EACf,MAAMC,IAAI,GAAGL,OAAO,GAAG1B,IAAI,CAACgC,IAAI,GAAG,QAAQ;EAE3C,MAAMb,aAAa,GAAGpB,OAAO,CAAgB,MAAM;IAC/C,IAAI,CAACqB,IAAI,IAAI,CAACO,QAAQ,EAAE;MACpB,OAAO,MAAM;IACjB;IAEA,IAAI,CAACN,IAAI,EAAE;MACP,OAAO,MAAM;IACjB;IAEA,OAAO,aAAaO,YAAY,EAAE;EACtC,CAAC,EAAE,CAACR,IAAI,EAAEO,QAAQ,EAAEN,IAAI,EAAEO,YAAY,CAAC,CAAC;EAExC,MAAMK,UAAU,GAAGhC,EAAE,CACjBO,cAAc,CAAC;IACXC,OAAO;IACPK,IAAI;IACJK;EACJ,CAAC,CAAC,EACFI,SACJ,CAAC;EAED,oBACIzB,KAAA,CAAAoC,aAAA;IAAMX,SAAS,EAAEtB,EAAE,CAACG,qBAAqB,CAAC;MAAEE;IAAS,CAAC,CAAC,EAAEuB,kBAAkB;EAAE,gBACzE/B,KAAA,CAAAoC,aAAA,CAACH,IAAI,EAAAI,MAAA,CAAAC,MAAA;IAACb,SAAS,EAAEU,UAAW;IAAC3B,QAAQ,EAAEA,QAAS;IAAC,iBAAeA;EAAS,GAAKwB,IAAI,GAC7EF,YAAY,KAAK,KAAK,IAAIP,IAAI,eAC/BvB,KAAA,CAAAoC,aAAA,CAAClC,IAAI,CAACqC,SAAS,QAAEjB,IAAI,IAAIO,QAAQ,IAAI,IAAqB,CAAC,EAC1DC,YAAY,KAAK,KAAK,IAAIP,IACzB,CACJ,CAAC;AAEf,CAAC;AAED,MAAMiB,MAAM,GAAGnC,eAAe,CAAC,QAAQ,EAAEsB,UAAU,CAAC;AAEpD,SAASa,MAAM,EAAoB9B,cAAc","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\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"],"mappings":"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","ignoreList":[]}

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" />

package/Button/IconButton.d.ts

@@ -4,7 +4,7 @@ declare const iconButtonVariants: (props?: ({
     variant?: "primary" | "secondary" | "tertiary" | "ghost" | "ghost-negative" | null | undefined;
     size?: "sm" | "md" | "lg" | "xl" | "xs" | "xxs" | null | undefined;
     iconSize?: "lg" | "default" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children">, VariantProps<typeof iconButtonVariants> {
     icon?: React.ReactNode;
     asChild?: boolean;

package/Button/IconButton.js.map

@@ -1 +1 @@
-{"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":"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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\n        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":[]}

package/Card/components/CardContent.d.ts

@@ -4,7 +4,7 @@ declare const cardContentVariants: (props?: ({
     cornerSize?: "md" | "lg" | null | undefined;
     variant?: "accent" | "default" | null | undefined;
     elevation?: "none" | "small" | "medium" | "large" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface CardContentProps extends VariantProps<typeof cardContentVariants> {
     className?: string;
     children: React.ReactNode;

package/Card/components/CardTitle.d.ts

@@ -4,7 +4,7 @@ declare const cardTitleVariants: (props?: ({
     padding?: "sm" | "md" | "lg" | null | undefined;
     size?: "sm" | "md" | null | undefined;
     variant?: "accent" | "default" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type CardTitleProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof cardTitleVariants>;
 export declare const CardTitle: ({ className, padding, size, variant, ...props }: CardTitleProps) => React.JSX.Element;
 export {};

package/Checkbox/Checkbox.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 CheckboxStories from './Checkbox.stories';
+import * as CheckboxStories from "./Checkbox.stories";
 
 <Meta of={CheckboxStories} />
 
@@ -17,8 +17,8 @@ import React, { useState } from "react";
 import { Checkbox } from "@webiny/admin-ui";
 
 const CheckboxExample = () => {
-    const [isChecked, setIsChecked] = useState(false);
-    const [validation, setValidation] = useState({ isValid: true, message: "" });
+const [isChecked, setIsChecked] = useState(false);
+const [validation, setValidation] = useState({ isValid: true, message: "" });
 
     const handleChange = (checked: boolean) => {
         setIsChecked(checked);
@@ -43,57 +43,58 @@ const CheckboxExample = () => {
             />
         </div>
     );
+
 };
 
 export default CheckboxExample;
 
 ` } }
-        additionalActions={[
-            {
-                title: 'Open in GitHub',
-                onClick: () => {
-                    window.open(
-                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Checkbox/Checkbox.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/Checkbox/Checkbox.tsx',
+'_blank'
+);
+},
+}
+]}
 />
 
-<Controls of={CheckboxStories.Documentation} exclude={"onChange"}/>
+<Controls of={CheckboxStories.Documentation} exclude={"onChange"} />
 
 ```tsx
 import React, { useState } from "react";
 import { Checkbox } from "@webiny/admin-ui";
 
 const CheckboxExample = () => {
-    const [isChecked, setIsChecked] = useState(false);
-    const [validation, setValidation] = useState({ isValid: true, message: "" });
-
-    const handleChange = (checked: boolean) => {
-        setIsChecked(checked);
-
-        if (!checked) {
-            setValidation({ isValid: false, message: "This field is required" });
-        } else {
-            setValidation({ isValid: true, message: "" });
-        }
-    };
-
-    return (
-        <div>
-            <Checkbox
-                label="Any field label"
-                description="Provide the required information for processing your request."
-                note="Note: Ensure your selection or input is accurate before proceeding."
-                checked={isChecked}
-                required={true}
-                onChange={handleChange}
-                validation={validation}
-            />
-        </div>
-    );
+  const [isChecked, setIsChecked] = useState(false);
+  const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+  const handleChange = (checked: boolean) => {
+    setIsChecked(checked);
+
+    if (!checked) {
+      setValidation({ isValid: false, message: "This field is required" });
+    } else {
+      setValidation({ isValid: true, message: "" });
+    }
+  };
+
+  return (
+    <div>
+      <Checkbox
+        label="Any field label"
+        description="Provide the required information for processing your request."
+        note="Note: Ensure your selection or input is accurate before proceeding."
+        checked={isChecked}
+        required={true}
+        onChange={handleChange}
+        validation={validation}
+      />
+    </div>
+  );
 };
 
 export default CheckboxExample;
@@ -102,24 +103,25 @@ export default CheckboxExample;
 ## Anatomy
 
 ### General
+
 Checkbox input enable users to select a single or multiple items from a list of offered choices. A checkbox input group organizes related checkbox input options together for better clarity and functionality.
 
-<img src="/images/storybook/checkbox/general.png" alt="General"/>
+<img src="/images/storybook/checkbox/general.png" alt="General" />
 
 ### Checkbox input options
+
 Checkbox inputs can exist in two different states: Selected and Not Selected.
 
-<img src="/images/storybook/checkbox/checkbox-input-options.png" alt="Checkbox input options"/>
+<img src="/images/storybook/checkbox/checkbox-input-options.png" alt="Checkbox input options" />
 
 ### States
-<img src="/images/storybook/checkbox/states.png" alt="States"/>
+
+<img src="/images/storybook/checkbox/states.png" alt="States" />
 
 ## Usage
 
 ### Text overflow
-When the checkbox text content is too long for the horizontal space available, the content should wrap to form another line aligning the text and checkbox on top.
-
-<img src="/images/storybook/checkbox/text-overflow.png" alt="Text overflow"/>
-
 
+When the checkbox text content is too long for the horizontal space available, the content should wrap to form another line aligning the text and checkbox on top.
 
+<img src="/images/storybook/checkbox/text-overflow.png" alt="Text overflow" />

package/Checkbox/primitives/CheckboxPrimitive.d.ts

@@ -8,7 +8,7 @@ import type { CheckboxItemDto, CheckboxItemFormatted } from "../../Checkbox/inde
 declare const checkboxVariants: (props?: ({
     indeterminate?: boolean | null | undefined;
     hasLabel?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types.js").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type CheckboxPrimitiveProps = Omit<CheckboxPrimitives.CheckboxProps, "defaultChecked" | "onCheckedChange" | "onChange"> & VariantProps<typeof checkboxVariants> & CheckboxItemDto & {
     onChange: (checked: boolean) => void;
 };