@webiny/admin-ui 6.4.11 → 6.6.0-alpha.1

package/BetaBadge/BetaBadge.js.map

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

package/Breadcrumbs/Breadcrumbs.d.ts

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

package/Breadcrumbs/Breadcrumbs.js

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

package/Breadcrumbs/Breadcrumbs.js.map

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

package/Breadcrumbs/Breadcrumbs.stories.d.ts

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

package/Breadcrumbs/Breadcrumbs.stories.js

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

package/Breadcrumbs/Breadcrumbs.stories.js.map

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

package/Breadcrumbs/index.d.ts

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

package/Breadcrumbs/index.js

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

package/Button/Button.d.ts

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

package/Button/CopyButton.d.ts

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

package/Button/IconButton.d.ts

@@ -1,29 +1,30 @@
 import React from "react";
 import { type VariantProps } from "../utils.js";
 declare const iconButtonVariants: (props?: ({
-    variant?: "primary" | "secondary" | "tertiary" | "ghost" | "ghost-negative" | null | undefined;
-    size?: "sm" | "md" | "lg" | "xl" | "xs" | "xxs" | null | undefined;
-    iconSize?: "lg" | "default" | null | undefined;
+    variant?: "ghost" | "ghost-negative" | "primary" | "secondary" | "tertiary" | null | undefined;
+    size?: "lg" | "md" | "sm" | "xl" | "xs" | "xxs" | null | undefined;
+    iconSize?: "default" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children">, VariantProps<typeof iconButtonVariants> {
     icon?: React.ReactNode;
     asChild?: boolean;
 }
-declare const IconButton: (({ className, variant, size, icon, iconSize, asChild, disabled, ...props }: IconButtonProps) => React.JSX.Element) & {
-    original: ({ className, variant, size, icon, iconSize, asChild, disabled, ...props }: IconButtonProps) => React.JSX.Element;
+declare const DecoratableIconButton: ({ className, variant, size, icon, iconSize, asChild, disabled, ...props }: IconButtonProps) => React.JSX.Element;
+declare const IconButton: typeof DecoratableIconButton & {
+    original: typeof DecoratableIconButton;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ className, variant, size, icon, iconSize, asChild, disabled, ...props }: IconButtonProps) => React.JSX.Element) & {
-        original: ({ className, variant, size, icon, iconSize, asChild, disabled, ...props }: IconButtonProps) => React.JSX.Element;
+    original: typeof DecoratableIconButton & {
+        original: typeof DecoratableIconButton;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<(({ className, variant, size, icon, iconSize, asChild, disabled, ...props }: IconButtonProps) => React.JSX.Element) & {
-        original: ({ className, variant, size, icon, iconSize, asChild, disabled, ...props }: IconButtonProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<typeof DecoratableIconButton & {
+        original: typeof DecoratableIconButton;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/Calendar/Calendar.d.ts

@@ -3,21 +3,22 @@ import { type DayPickerProps } from "react-day-picker";
 type CalendarProps = DayPickerProps & {
     className?: string;
 };
-declare const Calendar: (({ className, classNames, components, ...props }: CalendarProps) => React.JSX.Element) & {
-    original: ({ className, classNames, components, ...props }: CalendarProps) => React.JSX.Element;
+declare const DecoratableCalendar: ({ className, classNames, components, ...props }: CalendarProps) => React.JSX.Element;
+declare const Calendar: typeof DecoratableCalendar & {
+    original: typeof DecoratableCalendar;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ className, classNames, components, ...props }: CalendarProps) => React.JSX.Element) & {
-        original: ({ className, classNames, components, ...props }: CalendarProps) => React.JSX.Element;
+    original: typeof DecoratableCalendar & {
+        original: typeof DecoratableCalendar;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ className, classNames, components, ...props }: CalendarProps) => React.JSX.Element) & {
-        original: ({ className, classNames, components, ...props }: CalendarProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof DecoratableCalendar & {
+        original: typeof DecoratableCalendar;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/Calendar/calendarClassNames.js

@@ -4,7 +4,7 @@ const calendarClassNames = {
     month: "flex flex-col gap-sm",
     month_caption: "flex items-center justify-center h-8 relative",
     caption_label: "text-md font-semibold text-neutral-strong",
-    nav: "absolute inset-x-0 flex items-center justify-between",
+    nav: "absolute inset-x-0 z-10 flex items-center justify-between",
     button_previous: "inline-flex items-center justify-center size-8 rounded-sm cursor-pointer text-neutral-strong hover:bg-neutral-light",
     button_next: "inline-flex items-center justify-center size-8 rounded-sm cursor-pointer text-neutral-strong hover:bg-neutral-light",
     month_grid: "border-collapse",

package/Calendar/calendarClassNames.js.map

@@ -1 +1 @@
-{"version":3,"file":"Calendar/calendarClassNames.js","sources":["../../src/Calendar/calendarClassNames.ts"],"sourcesContent":["import type { ClassNames } from \"react-day-picker\";\n\nexport const calendarClassNames: Partial<ClassNames> = {\n    root: \"p-md\",\n    months: \"relative flex gap-md\",\n    month: \"flex flex-col gap-sm\",\n    month_caption: \"flex items-center justify-center h-8 relative\",\n    caption_label: \"text-md font-semibold text-neutral-strong\",\n    nav: \"absolute inset-x-0 flex items-center justify-between\",\n    button_previous:\n        \"inline-flex items-center justify-center size-8 rounded-sm cursor-pointer text-neutral-strong hover:bg-neutral-light\",\n    button_next:\n        \"inline-flex items-center justify-center size-8 rounded-sm cursor-pointer text-neutral-strong hover:bg-neutral-light\",\n    month_grid: \"border-collapse\",\n    weekdays: \"\",\n    weekday: \"text-xs font-medium text-neutral-dimmed size-9 text-center\",\n    weeks: \"\",\n    week: \"\",\n    day: \"size-9 text-center text-sm p-0 relative\",\n    day_button:\n        \"inline-flex items-center justify-center size-9 rounded-sm font-normal cursor-pointer hover:bg-neutral-light transition-colors\",\n    selected:\n        \"[&>button]:bg-primary [&>button]:text-neutral-base [&>button]:hover:bg-primary-strong [&>button]:font-medium\",\n    today: \"[&>button]:border-sm [&>button]:border-primary\",\n    outside: \"[&>button]:text-neutral-dimmed [&>button]:opacity-50\",\n    disabled: \"[&>button]:text-neutral-disabled [&>button]:cursor-not-allowed\",\n    hidden: \"invisible\",\n    range_start:\n        \"[&>button]:bg-primary [&>button]:text-neutral-base [&>button]:hover:bg-primary-strong [&>button]:rounded-r-none\",\n    range_end:\n        \"[&>button]:bg-primary [&>button]:text-neutral-base [&>button]:hover:bg-primary-strong [&>button]:rounded-l-none\",\n    range_middle:\n        \"bg-primary-subtle [&>button]:bg-transparent [&>button]:text-primary-strong [&>button]:rounded-none [&>button]:hover:bg-primary-subtle/70\",\n    focused: \"[&>button]:ring-2 [&>button]:ring-primary-dimmed\",\n    dropdowns: \"flex items-center gap-sm\",\n    dropdown:\n        \"appearance-none border-sm border-neutral-muted rounded-sm px-sm py-xs text-sm cursor-pointer bg-neutral-base\",\n    dropdown_root: \"relative\",\n    chevron: \"size-md fill-current\",\n    footer: \"pt-sm text-sm text-neutral-dimmed\"\n};\n"],"names":["calendarClassNames"],"mappings":"AAEO,MAAMA,qBAA0C;IACnD,MAAM;IACN,QAAQ;IACR,OAAO;IACP,eAAe;IACf,eAAe;IACf,KAAK;IACL,iBACI;IACJ,aACI;IACJ,YAAY;IACZ,UAAU;IACV,SAAS;IACT,OAAO;IACP,MAAM;IACN,KAAK;IACL,YACI;IACJ,UACI;IACJ,OAAO;IACP,SAAS;IACT,UAAU;IACV,QAAQ;IACR,aACI;IACJ,WACI;IACJ,cACI;IACJ,SAAS;IACT,WAAW;IACX,UACI;IACJ,eAAe;IACf,SAAS;IACT,QAAQ;AACZ"}
+{"version":3,"file":"Calendar/calendarClassNames.js","sources":["../../src/Calendar/calendarClassNames.ts"],"sourcesContent":["import type { ClassNames } from \"react-day-picker\";\n\nexport const calendarClassNames: Partial<ClassNames> = {\n    root: \"p-md\",\n    months: \"relative flex gap-md\",\n    month: \"flex flex-col gap-sm\",\n    month_caption: \"flex items-center justify-center h-8 relative\",\n    caption_label: \"text-md font-semibold text-neutral-strong\",\n    nav: \"absolute inset-x-0 z-10 flex items-center justify-between\",\n    button_previous:\n        \"inline-flex items-center justify-center size-8 rounded-sm cursor-pointer text-neutral-strong hover:bg-neutral-light\",\n    button_next:\n        \"inline-flex items-center justify-center size-8 rounded-sm cursor-pointer text-neutral-strong hover:bg-neutral-light\",\n    month_grid: \"border-collapse\",\n    weekdays: \"\",\n    weekday: \"text-xs font-medium text-neutral-dimmed size-9 text-center\",\n    weeks: \"\",\n    week: \"\",\n    day: \"size-9 text-center text-sm p-0 relative\",\n    day_button:\n        \"inline-flex items-center justify-center size-9 rounded-sm font-normal cursor-pointer hover:bg-neutral-light transition-colors\",\n    selected:\n        \"[&>button]:bg-primary [&>button]:text-neutral-base [&>button]:hover:bg-primary-strong [&>button]:font-medium\",\n    today: \"[&>button]:border-sm [&>button]:border-primary\",\n    outside: \"[&>button]:text-neutral-dimmed [&>button]:opacity-50\",\n    disabled: \"[&>button]:text-neutral-disabled [&>button]:cursor-not-allowed\",\n    hidden: \"invisible\",\n    range_start:\n        \"[&>button]:bg-primary [&>button]:text-neutral-base [&>button]:hover:bg-primary-strong [&>button]:rounded-r-none\",\n    range_end:\n        \"[&>button]:bg-primary [&>button]:text-neutral-base [&>button]:hover:bg-primary-strong [&>button]:rounded-l-none\",\n    range_middle:\n        \"bg-primary-subtle [&>button]:bg-transparent [&>button]:text-primary-strong [&>button]:rounded-none [&>button]:hover:bg-primary-subtle/70\",\n    focused: \"[&>button]:ring-2 [&>button]:ring-primary-dimmed\",\n    dropdowns: \"flex items-center gap-sm\",\n    dropdown:\n        \"appearance-none border-sm border-neutral-muted rounded-sm px-sm py-xs text-sm cursor-pointer bg-neutral-base\",\n    dropdown_root: \"relative\",\n    chevron: \"size-md fill-current\",\n    footer: \"pt-sm text-sm text-neutral-dimmed\"\n};\n"],"names":["calendarClassNames"],"mappings":"AAEO,MAAMA,qBAA0C;IACnD,MAAM;IACN,QAAQ;IACR,OAAO;IACP,eAAe;IACf,eAAe;IACf,KAAK;IACL,iBACI;IACJ,aACI;IACJ,YAAY;IACZ,UAAU;IACV,SAAS;IACT,OAAO;IACP,MAAM;IACN,KAAK;IACL,YACI;IACJ,UACI;IACJ,OAAO;IACP,SAAS;IACT,UAAU;IACV,QAAQ;IACR,aACI;IACJ,WACI;IACJ,cACI;IACJ,SAAS;IACT,WAAW;IACX,UACI;IACJ,eAAe;IACf,SAAS;IACT,QAAQ;AACZ"}

package/Card/Card.d.ts

@@ -16,39 +16,25 @@ interface CardProps extends Omit<React.ComponentPropsWithoutRef<typeof CardConte
     info?: React.ReactNode;
     children: React.ReactNode;
 }
-declare const Card: {
+declare const CardBase: {
     (props: CardProps): React.JSX.Element;
     displayName: string;
-} & {
-    original: {
-        (props: CardProps): React.JSX.Element;
-        displayName: string;
-    };
+};
+declare const Card: typeof CardBase & {
+    original: typeof CardBase;
     originalName: string;
     displayName: string;
 } & {
-    original: {
-        (props: CardProps): React.JSX.Element;
-        displayName: string;
-    } & {
-        original: {
-            (props: CardProps): React.JSX.Element;
-            displayName: string;
-        };
+    original: typeof CardBase & {
+        original: typeof CardBase;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<{
-        (props: CardProps): React.JSX.Element;
-        displayName: string;
-    } & {
-        original: {
-            (props: CardProps): React.JSX.Element;
-            displayName: string;
-        };
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof CardBase & {
+        original: typeof CardBase;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/Card/components/CancelAction.d.ts

@@ -1,21 +1,23 @@
 import * as React from "react";
 import { ButtonProps } from "../../Button/index.js";
-export declare const CancelAction: ((props: ButtonProps) => React.JSX.Element) & {
-    original: (props: ButtonProps) => React.JSX.Element;
+declare const CancelActionBase: (props: ButtonProps) => React.JSX.Element;
+export declare const CancelAction: typeof CancelActionBase & {
+    original: typeof CancelActionBase;
     originalName: string;
     displayName: string;
 } & {
-    original: ((props: ButtonProps) => React.JSX.Element) & {
-        original: (props: ButtonProps) => React.JSX.Element;
+    original: typeof CancelActionBase & {
+        original: typeof CancelActionBase;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: ButtonProps) => React.JSX.Element) & {
-        original: (props: ButtonProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof CancelActionBase & {
+        original: typeof CancelActionBase;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;
 };
+export {};

package/Card/components/CardContent.d.ts

@@ -1,16 +1,16 @@
 import * as React from "react";
 import { type VariantProps } from "../../utils.js";
 declare const cardContentVariants: (props?: ({
-    cornerSize?: "md" | "lg" | null | undefined;
+    cornerSize?: "lg" | "md" | null | undefined;
     variant?: "accent" | "default" | null | undefined;
-    elevation?: "none" | "small" | "medium" | "large" | null | undefined;
+    elevation?: "large" | "medium" | "none" | "small" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface CardContentProps extends VariantProps<typeof cardContentVariants> {
     className?: string;
     children: React.ReactNode;
 }
-declare const CardContent: {
-    ({ children }: CardContentProps): React.JSX.Element;
-    displayName: string;
-};
+declare function CardContent({ children }: CardContentProps): React.JSX.Element;
+declare namespace CardContent {
+    var displayName: string;
+}
 export { CardContent };

package/Card/components/CardTitle.d.ts

@@ -1,8 +1,8 @@
 import * as React from "react";
 import { type VariantProps } from "../../utils.js";
 declare const cardTitleVariants: (props?: ({
-    padding?: "sm" | "md" | "lg" | null | undefined;
-    size?: "sm" | "md" | null | undefined;
+    padding?: "lg" | "md" | "sm" | null | undefined;
+    size?: "md" | "sm" | null | undefined;
     variant?: "accent" | "default" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type CardTitleProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof cardTitleVariants>;

package/Card/components/ConfirmAction.d.ts

@@ -1,21 +1,23 @@
 import * as React from "react";
 import { ButtonProps } from "../../Button/index.js";
-export declare const ConfirmAction: ((props: ButtonProps) => React.JSX.Element) & {
-    original: (props: ButtonProps) => React.JSX.Element;
+declare const ConfirmActionBase: (props: ButtonProps) => React.JSX.Element;
+export declare const ConfirmAction: typeof ConfirmActionBase & {
+    original: typeof ConfirmActionBase;
     originalName: string;
     displayName: string;
 } & {
-    original: ((props: ButtonProps) => React.JSX.Element) & {
-        original: (props: ButtonProps) => React.JSX.Element;
+    original: typeof ConfirmActionBase & {
+        original: typeof ConfirmActionBase;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: ButtonProps) => React.JSX.Element) & {
-        original: (props: ButtonProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof ConfirmActionBase & {
+        original: typeof ConfirmActionBase;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;
 };
+export {};

package/Card/components/Icon.d.ts

@@ -1,21 +1,22 @@
 import * as React from "react";
 import type { IconProps as IconComponentProps } from "../../Icon/index.js";
 type IconProps = IconComponentProps;
-export declare const Icon: ((props: IconProps) => React.JSX.Element) & {
-    original: (props: IconProps) => React.JSX.Element;
+declare const IconBase: (props: IconProps) => React.JSX.Element;
+export declare const Icon: typeof IconBase & {
+    original: typeof IconBase;
     originalName: string;
     displayName: string;
 } & {
-    original: ((props: IconProps) => React.JSX.Element) & {
-        original: (props: IconProps) => React.JSX.Element;
+    original: typeof IconBase & {
+        original: typeof IconBase;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<((props: IconProps) => React.JSX.Element) & {
-        original: (props: IconProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<typeof IconBase & {
+        original: typeof IconBase;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/Checkbox/Checkbox.d.ts

@@ -2,21 +2,22 @@ import React from "react";
 import type { CheckboxPrimitiveProps } from "./primitives/index.js";
 import type { FormComponentProps } from "../FormComponent/index.js";
 type CheckboxProps = CheckboxPrimitiveProps & FormComponentProps;
-declare const Checkbox: (({ description, note, validation, ...props }: CheckboxProps) => React.JSX.Element) & {
-    original: ({ description, note, validation, ...props }: CheckboxProps) => React.JSX.Element;
+declare const DecoratableCheckbox: ({ description, note, validation, ...props }: CheckboxProps) => React.JSX.Element;
+declare const Checkbox: typeof DecoratableCheckbox & {
+    original: typeof DecoratableCheckbox;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ description, note, validation, ...props }: CheckboxProps) => React.JSX.Element) & {
-        original: ({ description, note, validation, ...props }: CheckboxProps) => React.JSX.Element;
+    original: typeof DecoratableCheckbox & {
+        original: typeof DecoratableCheckbox;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ description, note, validation, ...props }: CheckboxProps) => React.JSX.Element) & {
-        original: ({ description, note, validation, ...props }: CheckboxProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof DecoratableCheckbox & {
+        original: typeof DecoratableCheckbox;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;