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

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/Button/IconButton.stories.d.ts

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

package/Button/IconButton.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button/IconButton.stories.js","sources":["../../src/Button/IconButton.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport { IconButton } from \"./IconButton.js\";\n\nconst meta: Meta<typeof IconButton> = {\n    title: \"Components/Icon Button\",\n    component: IconButton,\n    tags: [\"!autodocs\"],\n    argTypes: {\n        variant: {\n            description: \"Type\",\n            control: \"select\",\n            options: [\"primary\", \"secondary\", \"tertiary\", \"ghost\", \"ghost-negative\"],\n            defaultValue: \"primary\"\n        },\n        size: {\n            description: \"Size\",\n            control: \"select\",\n            options: [\"xxs\", \"xs\", \"sm\", \"md\", \"lg\", \"xl\"],\n            defaultValue: \"md\"\n        },\n        iconSize: {\n            description: \"Icon Size\",\n            control: \"select\",\n            options: [\"default\", \"lg\"],\n            defaultValue: \"default\"\n        },\n        disabled: {\n            description: \"State\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        icon: {\n            description: \"Please refer to the example above for usage information.\"\n        },\n        onClick: { action: \"onClick\" }\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof IconButton>;\n\nexport const Primary: Story = {\n    args: {\n        variant: \"primary\",\n        icon: <AddIcon />\n    }\n};\n\nexport const Secondary: Story = {\n    args: {\n        ...Primary.args,\n        variant: \"secondary\"\n    }\n};\n\nexport const Tertiary: Story = {\n    args: {\n        ...Primary.args,\n        variant: \"tertiary\"\n    }\n};\n\nexport const Ghost: Story = {\n    args: {\n        ...Primary.args,\n        variant: \"ghost\"\n    }\n};\n\nexport const GhostNegative: Story = {\n    decorators: [\n        Story => (\n            <div className=\"bg-[#25292e] p-[300px] rounded-[5px]\">\n                <Story />\n            </div>\n        )\n    ],\n    args: {\n        ...Primary.args,\n        variant: \"ghost-negative\"\n    }\n};\n\nexport const DoubleExtraSmall: Story = {\n    args: {\n        ...Primary.args,\n        size: \"xxs\"\n    }\n};\n\nexport const ExtraSmall: Story = {\n    args: {\n        ...Primary.args,\n        size: \"xs\"\n    }\n};\n\nexport const Small: Story = {\n    args: {\n        ...Primary.args,\n        size: \"sm\"\n    }\n};\n\nexport const SmallWithLargeIcon: Story = {\n    args: {\n        ...Primary.args,\n        size: \"sm\",\n        iconSize: \"lg\"\n    }\n};\n\nexport const Medium: Story = {\n    args: {\n        ...Primary.args,\n        size: \"md\"\n    }\n};\n\nexport const MediumWithLargeIcon: Story = {\n    args: {\n        ...Primary.args,\n        size: \"md\",\n        iconSize: \"lg\"\n    }\n};\n\nexport const Large: Story = {\n    args: {\n        ...Primary.args,\n        size: \"lg\"\n    }\n};\n\nexport const LargeWithLargeIcon: Story = {\n    args: {\n        ...Primary.args,\n        size: \"lg\",\n        iconSize: \"lg\"\n    }\n};\n\nexport const ExtraLarge: Story = {\n    args: {\n        ...Primary.args,\n        size: \"xl\"\n    }\n};\n\nexport const WithAsChild: Story = {\n    args: {\n        ...Primary.args,\n        asChild: true,\n        icon: (\n            <span>\n                <AddIcon />\n            </span>\n        )\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        variant: \"primary\",\n        size: \"md\",\n        disabled: false,\n        icon: <AddIcon />,\n        iconSize: \"default\"\n    }\n};\n"],"names":["meta","IconButton","Primary","AddIcon","Secondary","Tertiary","Ghost","GhostNegative","Story","DoubleExtraSmall","ExtraSmall","Small","SmallWithLargeIcon","Medium","MediumWithLargeIcon","Large","LargeWithLargeIcon","ExtraLarge","WithAsChild","Documentation"],"mappings":";;;AAKA,MAAMA,OAAgC;IAClC,OAAO;IACP,WAAWC;IACX,MAAM;QAAC;KAAY;IACnB,UAAU;QACN,SAAS;YACL,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAW;gBAAa;gBAAY;gBAAS;aAAiB;YACxE,cAAc;QAClB;QACA,MAAM;YACF,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAO;gBAAM;gBAAM;gBAAM;gBAAM;aAAK;YAC9C,cAAc;QAClB;QACA,UAAU;YACN,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAW;aAAK;YAC1B,cAAc;QAClB;QACA,UAAU;YACN,aAAa;YACb,SAAS;YACT,cAAc;QAClB;QACA,MAAM;YACF,aAAa;QACjB;QACA,SAAS;YAAE,QAAQ;QAAU;IACjC;AACJ;AAEA,2BAAeD;AAGR,MAAME,UAAiB;IAC1B,MAAM;QACF,SAAS;QACT,MAAM,WAAN,GAAM,oBAACC,gBAAOA;IAClB;AACJ;AAEO,MAAMC,YAAmB;IAC5B,MAAM;QACF,GAAGF,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAMG,WAAkB;IAC3B,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAMI,QAAe;IACxB,MAAM;QACF,GAAGJ,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAMK,gBAAuB;IAChC,YAAY;QACRC,CAAAA,QAAAA,WAAAA,GACI,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;IACD,MAAM;QACF,GAAGN,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAMO,mBAA0B;IACnC,MAAM;QACF,GAAGP,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMQ,aAAoB;IAC7B,MAAM;QACF,GAAGR,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMS,QAAe;IACxB,MAAM;QACF,GAAGT,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMU,qBAA4B;IACrC,MAAM;QACF,GAAGV,QAAQ,IAAI;QACf,MAAM;QACN,UAAU;IACd;AACJ;AAEO,MAAMW,SAAgB;IACzB,MAAM;QACF,GAAGX,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMY,sBAA6B;IACtC,MAAM;QACF,GAAGZ,QAAQ,IAAI;QACf,MAAM;QACN,UAAU;IACd;AACJ;AAEO,MAAMa,QAAe;IACxB,MAAM;QACF,GAAGb,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMc,qBAA4B;IACrC,MAAM;QACF,GAAGd,QAAQ,IAAI;QACf,MAAM;QACN,UAAU;IACd;AACJ;AAEO,MAAMe,aAAoB;IAC7B,MAAM;QACF,GAAGf,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMgB,cAAqB;IAC9B,MAAM;QACF,GAAGhB,QAAQ,IAAI;QACf,SAAS;QACT,MAAM,WAAN,GACI,oBAAC,4BACG,oBAACC,gBAAOA;IAGpB;AACJ;AAEO,MAAMgB,gBAAuB;IAChC,MAAM;QACF,SAAS;QACT,MAAM;QACN,UAAU;QACV,MAAM,WAAN,GAAM,oBAAChB,gBAAOA;QACd,UAAU;IACd;AACJ"}
+{"version":3,"file":"Button/IconButton.stories.js","sources":["../../src/Button/IconButton.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport { IconButton } from \"./IconButton.js\";\n\nconst meta: Meta<typeof IconButton> = {\n    title: \"Components/Icon Button\",\n    component: IconButton,\n    tags: [\"!autodocs\"],\n    argTypes: {\n        variant: {\n            description: \"Type\",\n            control: \"select\",\n            options: [\"primary\", \"secondary\", \"tertiary\", \"ghost\", \"ghost-negative\"],\n            defaultValue: \"primary\"\n        },\n        size: {\n            description: \"Size\",\n            control: \"select\",\n            options: [\"xxs\", \"xs\", \"sm\", \"md\", \"lg\", \"xl\"],\n            defaultValue: \"md\"\n        },\n        iconSize: {\n            description: \"Icon Size\",\n            control: \"select\",\n            options: [\"default\", \"lg\"],\n            defaultValue: \"default\"\n        },\n        disabled: {\n            description: \"State\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        icon: {\n            description: \"Please refer to the example above for usage information.\"\n        },\n        onClick: { action: \"onClick\" }\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof IconButton>;\n\nexport const Primary: Story = {\n    args: {\n        variant: \"primary\",\n        icon: <AddIcon />\n    }\n};\n\nexport const Secondary: Story = {\n    args: {\n        ...Primary.args,\n        variant: \"secondary\"\n    }\n};\n\nexport const Tertiary: Story = {\n    args: {\n        ...Primary.args,\n        variant: \"tertiary\"\n    }\n};\n\nexport const Ghost: Story = {\n    args: {\n        ...Primary.args,\n        variant: \"ghost\"\n    }\n};\n\nexport const GhostNegative: Story = {\n    decorators: [\n        Story => (\n            <div className=\"bg-[#25292e] p-[300px] rounded-[5px]\">\n                <Story />\n            </div>\n        )\n    ],\n    args: {\n        ...Primary.args,\n        variant: \"ghost-negative\"\n    }\n};\n\nexport const DoubleExtraSmall: Story = {\n    args: {\n        ...Primary.args,\n        size: \"xxs\"\n    }\n};\n\nexport const ExtraSmall: Story = {\n    args: {\n        ...Primary.args,\n        size: \"xs\"\n    }\n};\n\nexport const Small: Story = {\n    args: {\n        ...Primary.args,\n        size: \"sm\"\n    }\n};\n\nexport const SmallWithLargeIcon: Story = {\n    args: {\n        ...Primary.args,\n        size: \"sm\",\n        iconSize: \"lg\"\n    }\n};\n\nexport const Medium: Story = {\n    args: {\n        ...Primary.args,\n        size: \"md\"\n    }\n};\n\nexport const MediumWithLargeIcon: Story = {\n    args: {\n        ...Primary.args,\n        size: \"md\",\n        iconSize: \"lg\"\n    }\n};\n\nexport const Large: Story = {\n    args: {\n        ...Primary.args,\n        size: \"lg\"\n    }\n};\n\nexport const LargeWithLargeIcon: Story = {\n    args: {\n        ...Primary.args,\n        size: \"lg\",\n        iconSize: \"lg\"\n    }\n};\n\nexport const ExtraLarge: Story = {\n    args: {\n        ...Primary.args,\n        size: \"xl\"\n    }\n};\n\nexport const WithAsChild: Story = {\n    args: {\n        ...Primary.args,\n        asChild: true,\n        icon: (\n            <span>\n                <AddIcon />\n            </span>\n        )\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        variant: \"primary\",\n        size: \"md\",\n        disabled: false,\n        icon: <AddIcon />,\n        iconSize: \"default\"\n    }\n};\n"],"names":["meta","IconButton","Primary","AddIcon","Secondary","Tertiary","Ghost","GhostNegative","Story","DoubleExtraSmall","ExtraSmall","Small","SmallWithLargeIcon","Medium","MediumWithLargeIcon","Large","LargeWithLargeIcon","ExtraLarge","WithAsChild","Documentation"],"mappings":";;;AAKA,MAAMA,OAAgC;IAClC,OAAO;IACP,WAAWC;IACX,MAAM;QAAC;KAAY;IACnB,UAAU;QACN,SAAS;YACL,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAW;gBAAa;gBAAY;gBAAS;aAAiB;YACxE,cAAc;QAClB;QACA,MAAM;YACF,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAO;gBAAM;gBAAM;gBAAM;gBAAM;aAAK;YAC9C,cAAc;QAClB;QACA,UAAU;YACN,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAW;aAAK;YAC1B,cAAc;QAClB;QACA,UAAU;YACN,aAAa;YACb,SAAS;YACT,cAAc;QAClB;QACA,MAAM;YACF,aAAa;QACjB;QACA,SAAS;YAAE,QAAQ;QAAU;IACjC;AACJ;AAEA,2BAAeD;AAGR,MAAME,UAAiB;IAC1B,MAAM;QACF,SAAS;QACT,MAAM,WAAN,GAAM,oBAACC,gBAAOA;IAClB;AACJ;AAEO,MAAMC,YAAmB;IAC5B,MAAM;QACF,GAAGF,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAMG,WAAkB;IAC3B,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAMI,QAAe;IACxB,MAAM;QACF,GAAGJ,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAMK,gBAAuB;IAChC,YAAY;QACRC,CAAAA,QAAAA,WAAAA,GACI,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;IACD,MAAM;QACF,GAAGN,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAMO,mBAA0B;IACnC,MAAM;QACF,GAAGP,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMQ,aAAoB;IAC7B,MAAM;QACF,GAAGR,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMS,QAAe;IACxB,MAAM;QACF,GAAGT,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMU,qBAA4B;IACrC,MAAM;QACF,GAAGV,QAAQ,IAAI;QACf,MAAM;QACN,UAAU;IACd;AACJ;AAEO,MAAMW,SAAgB;IACzB,MAAM;QACF,GAAGX,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMY,sBAA6B;IACtC,MAAM;QACF,GAAGZ,QAAQ,IAAI;QACf,MAAM;QACN,UAAU;IACd;AACJ;AAEO,MAAMa,QAAe;IACxB,MAAM;QACF,GAAGb,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMc,qBAA4B;IACrC,MAAM;QACF,GAAGd,QAAQ,IAAI;QACf,MAAM;QACN,UAAU;IACd;AACJ;AAEO,MAAMe,aAAoB;IAC7B,MAAM;QACF,GAAGf,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMgB,cAAqB;IAC9B,MAAM;QACF,GAAGhB,QAAQ,IAAI;QACf,SAAS;QACT,MAAM,WAAN,GACI,oBAAC,4BACG,oBAACC,gBAAOA;IAGpB;AACJ;AAEO,MAAMgB,gBAAuB;IAChC,MAAM;QACF,SAAS;QACT,MAAM;QACN,UAAU;QACV,MAAM,WAAN,GAAM,oBAAChB,gBAAOA;QACd,UAAU;IACd;AACJ"}

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/Card.stories.d.ts

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

package/Card/Card.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card/Card.stories.js","sources":["../../src/Card/Card.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { Card } from \"./Card.js\";\nimport { Button } from \"~/Button/index.js\";\nimport { DropdownMenu } from \"~/DropdownMenu/index.js\";\nimport { ReactComponent as NotificationIcon } from \"@webiny/icons/notifications_active.svg\";\nimport { Tabs } from \"~/Tabs/index.js\";\n\nconst meta: Meta<typeof Card> = {\n    title: \"Components/Card\",\n    component: Card,\n    argTypes: {},\n    decorators: [\n        Story => (\n            <div className=\"bg-[#f9fafa] p-[50px] rounded-[5px] max-w-[800px] text-neutral-dimmed\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Card>;\n\nexport const Default: Story = {\n    args: {\n        padding: \"md\",\n        title: \"Card Title\",\n        description: \"A short card description.\",\n        info: (\n            <>\n                Learn more about this <a href={\"#\"}>here</a>.\n            </>\n        ),\n        children: (\n            <>\n                The amazing, splendid, and most useful umbrella, resistant to rain and friendly to\n                winds, is something that deserves all admiration. Crafted with perfect textures, it\n                bravely withstands storms and gently shades the rays of the sun. A remarkable\n                innovation, with an ergonomically designed grip most suited to the hand, it remains\n                stable even in the fiercest weather.\n            </>\n        ),\n        actions: (\n            <>\n                <Card.CancelAction />\n                <Card.ConfirmAction />\n            </>\n        )\n    },\n    argTypes: {}\n};\n\nexport const SmallSize: Story = {\n    args: {\n        ...Default.args,\n        size: \"sm\"\n    }\n};\n\nexport const PaddingSmall: Story = {\n    args: {\n        ...Default.args,\n        padding: \"sm\"\n    }\n};\n\nexport const PaddingMedium: Story = {\n    args: {\n        ...Default.args,\n        padding: \"md\"\n    }\n};\n\nexport const PaddingLarge: Story = {\n    args: {\n        ...Default.args,\n        padding: \"lg\"\n    }\n};\n\nexport const WithActions: Story = {\n    args: {\n        ...Default.args\n    }\n};\nexport const WithHeaderActions: Story = {\n    args: {\n        ...Default.args,\n        actionsPosition: \"header\"\n    }\n};\n\nexport const WithSmallHeaderActions: Story = {\n    args: {\n        ...Default.args,\n        actionsPosition: \"header\",\n        actionsSize: \"sm\"\n    }\n};\n\nexport const WithLargeCorners: Story = {\n    args: {\n        ...Default.args,\n        cornerSize: \"lg\"\n    }\n};\n\nexport const AccentVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"accent\"\n    }\n};\n\nexport const DropdownMenuInCard: Story = {\n    args: {\n        ...Default.args,\n        children: (\n            <>\n                <DropdownMenu trigger={<Button variant=\"primary\" text={\"Open\"} />}>\n                    <DropdownMenu.Item text={\"Billing\"} />\n                    <DropdownMenu.Item text={\"Settings\"} />\n                    <DropdownMenu.Item text={\"Keyboard shortcuts\"} />\n                </DropdownMenu>\n            </>\n        )\n    }\n};\nexport const WithSmallElevation: Story = {\n    args: {\n        ...Default.args,\n        elevation: \"small\"\n    }\n};\n\nexport const WithMediumElevation: Story = {\n    args: {\n        ...Default.args,\n        elevation: \"medium\"\n    }\n};\n\nexport const WithLargeElevation: Story = {\n    args: {\n        ...Default.args,\n        elevation: \"large\"\n    }\n};\n\nexport const WithIcon: Story = {\n    args: {\n        ...Default.args,\n        icon: <Card.Icon icon={<NotificationIcon />} label={\"Title icon\"} />\n    }\n};\n\nexport const WithTabs: Story = {\n    args: {\n        ...Default.args,\n        bodyPadding: false,\n        icon: <Card.Icon icon={<NotificationIcon />} label={\"Title icon\"} />,\n        children: (\n            <>\n                <Tabs\n                    className={\"w-[500px]\"}\n                    separator={true}\n                    spacing={\"lg\"}\n                    tabs={[\n                        <Tabs.Tab\n                            key={\"account\"}\n                            value={\"account\"}\n                            trigger={\"Account\"}\n                            content={\"Make changes to your account here.\"}\n                        />,\n                        <Tabs.Tab\n                            key={\"company\"}\n                            value={\"company\"}\n                            trigger={\"Company\"}\n                            content={\"Make changes to your company info here.\"}\n                        />,\n                        <Tabs.Tab\n                            key={\"security\"}\n                            value={\"security\"}\n                            trigger={\"Security\"}\n                            content={\"Make changes to your security settings here.\"}\n                        />,\n                        <Tabs.Tab\n                            key={\"development\"}\n                            value={\"development\"}\n                            trigger={\"Development\"}\n                            content={\"Make changes to your development settings here.\"}\n                        />\n                    ]}\n                />\n            </>\n        )\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        return <Card {...args} />;\n    },\n    args: {\n        title: \"Card title goes here\",\n        description: \"Card description goes here\",\n        children: <>This is card content. Anything can go in here.</>,\n        actions: (\n            <>\n                <Button variant={\"secondary\"} text={\"Cancel\"} />\n                <Button variant={\"primary\"} text={\"Confirm\"} />\n            </>\n        ),\n        padding: \"sm\",\n        elevation: \"small\"\n    },\n    argTypes: {\n        title: {\n            description: \"The title displayed at the top of the card\",\n            control: \"text\"\n        },\n        description: {\n            description: \"A description displayed below the title\",\n            control: \"text\"\n        },\n        children: {\n            description:\n                \"The main content of the card. Please refer to the example code for details on usage.\"\n        },\n        actions: {\n            description:\n                \"Buttons or other interactive elements displayed at the bottom of the card. Please refer to the example code for details on usage.\"\n        },\n        padding: {\n            description: \"Controls the amount of padding inside the card\",\n            control: \"select\",\n            options: [\"none\", \"standard\", \"comfortable\"]\n        },\n        elevation: {\n            description: \"Controls the shadow depth of the card\",\n            control: \"select\",\n            options: [\"none\", \"xs\", \"sm\", \"md\", \"lg\", \"xl\"]\n        }\n    }\n};\n"],"names":["meta","Card","Story","Default","SmallSize","PaddingSmall","PaddingMedium","PaddingLarge","WithActions","WithHeaderActions","WithSmallHeaderActions","WithLargeCorners","AccentVariant","DropdownMenuInCard","DropdownMenu","Button","WithSmallElevation","WithMediumElevation","WithLargeElevation","WithIcon","NotificationIcon","WithTabs","Tabs","Documentation","args"],"mappings":"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"}
+{"version":3,"file":"Card/Card.stories.js","sources":["../../src/Card/Card.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { Card } from \"./Card.js\";\nimport { Button } from \"~/Button/index.js\";\nimport { DropdownMenu } from \"~/DropdownMenu/index.js\";\nimport { ReactComponent as NotificationIcon } from \"@webiny/icons/notifications_active.svg\";\nimport { Tabs } from \"~/Tabs/index.js\";\n\nconst meta: Meta<typeof Card> = {\n    title: \"Components/Card\",\n    component: Card,\n    argTypes: {},\n    decorators: [\n        Story => (\n            <div className=\"bg-[#f9fafa] p-[50px] rounded-[5px] max-w-[800px] text-neutral-dimmed\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Card>;\n\nexport const Default: Story = {\n    args: {\n        padding: \"md\",\n        title: \"Card Title\",\n        description: \"A short card description.\",\n        info: (\n            <>\n                Learn more about this <a href={\"#\"}>here</a>.\n            </>\n        ),\n        children: (\n            <>\n                The amazing, splendid, and most useful umbrella, resistant to rain and friendly to\n                winds, is something that deserves all admiration. Crafted with perfect textures, it\n                bravely withstands storms and gently shades the rays of the sun. A remarkable\n                innovation, with an ergonomically designed grip most suited to the hand, it remains\n                stable even in the fiercest weather.\n            </>\n        ),\n        actions: (\n            <>\n                <Card.CancelAction />\n                <Card.ConfirmAction />\n            </>\n        )\n    },\n    argTypes: {}\n};\n\nexport const SmallSize: Story = {\n    args: {\n        ...Default.args,\n        size: \"sm\"\n    }\n};\n\nexport const PaddingSmall: Story = {\n    args: {\n        ...Default.args,\n        padding: \"sm\"\n    }\n};\n\nexport const PaddingMedium: Story = {\n    args: {\n        ...Default.args,\n        padding: \"md\"\n    }\n};\n\nexport const PaddingLarge: Story = {\n    args: {\n        ...Default.args,\n        padding: \"lg\"\n    }\n};\n\nexport const WithActions: Story = {\n    args: {\n        ...Default.args\n    }\n};\nexport const WithHeaderActions: Story = {\n    args: {\n        ...Default.args,\n        actionsPosition: \"header\"\n    }\n};\n\nexport const WithSmallHeaderActions: Story = {\n    args: {\n        ...Default.args,\n        actionsPosition: \"header\",\n        actionsSize: \"sm\"\n    }\n};\n\nexport const WithLargeCorners: Story = {\n    args: {\n        ...Default.args,\n        cornerSize: \"lg\"\n    }\n};\n\nexport const AccentVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"accent\"\n    }\n};\n\nexport const DropdownMenuInCard: Story = {\n    args: {\n        ...Default.args,\n        children: (\n            <>\n                <DropdownMenu trigger={<Button variant=\"primary\" text={\"Open\"} />}>\n                    <DropdownMenu.Item text={\"Billing\"} />\n                    <DropdownMenu.Item text={\"Settings\"} />\n                    <DropdownMenu.Item text={\"Keyboard shortcuts\"} />\n                </DropdownMenu>\n            </>\n        )\n    }\n};\nexport const WithSmallElevation: Story = {\n    args: {\n        ...Default.args,\n        elevation: \"small\"\n    }\n};\n\nexport const WithMediumElevation: Story = {\n    args: {\n        ...Default.args,\n        elevation: \"medium\"\n    }\n};\n\nexport const WithLargeElevation: Story = {\n    args: {\n        ...Default.args,\n        elevation: \"large\"\n    }\n};\n\nexport const WithIcon: Story = {\n    args: {\n        ...Default.args,\n        icon: <Card.Icon icon={<NotificationIcon />} label={\"Title icon\"} />\n    }\n};\n\nexport const WithTabs: Story = {\n    args: {\n        ...Default.args,\n        bodyPadding: false,\n        icon: <Card.Icon icon={<NotificationIcon />} label={\"Title icon\"} />,\n        children: (\n            <>\n                <Tabs\n                    className={\"w-[500px]\"}\n                    separator={true}\n                    spacing={\"lg\"}\n                    tabs={[\n                        <Tabs.Tab\n                            key={\"account\"}\n                            value={\"account\"}\n                            trigger={\"Account\"}\n                            content={\"Make changes to your account here.\"}\n                        />,\n                        <Tabs.Tab\n                            key={\"company\"}\n                            value={\"company\"}\n                            trigger={\"Company\"}\n                            content={\"Make changes to your company info here.\"}\n                        />,\n                        <Tabs.Tab\n                            key={\"security\"}\n                            value={\"security\"}\n                            trigger={\"Security\"}\n                            content={\"Make changes to your security settings here.\"}\n                        />,\n                        <Tabs.Tab\n                            key={\"development\"}\n                            value={\"development\"}\n                            trigger={\"Development\"}\n                            content={\"Make changes to your development settings here.\"}\n                        />\n                    ]}\n                />\n            </>\n        )\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        return <Card {...args} />;\n    },\n    args: {\n        title: \"Card title goes here\",\n        description: \"Card description goes here\",\n        children: <>This is card content. Anything can go in here.</>,\n        actions: (\n            <>\n                <Button variant={\"secondary\"} text={\"Cancel\"} />\n                <Button variant={\"primary\"} text={\"Confirm\"} />\n            </>\n        ),\n        padding: \"sm\",\n        elevation: \"small\"\n    },\n    argTypes: {\n        title: {\n            description: \"The title displayed at the top of the card\",\n            control: \"text\"\n        },\n        description: {\n            description: \"A description displayed below the title\",\n            control: \"text\"\n        },\n        children: {\n            description:\n                \"The main content of the card. Please refer to the example code for details on usage.\"\n        },\n        actions: {\n            description:\n                \"Buttons or other interactive elements displayed at the bottom of the card. Please refer to the example code for details on usage.\"\n        },\n        padding: {\n            description: \"Controls the amount of padding inside the card\",\n            control: \"select\",\n            options: [\"none\", \"standard\", \"comfortable\"]\n        },\n        elevation: {\n            description: \"Controls the shadow depth of the card\",\n            control: \"select\",\n            options: [\"none\", \"xs\", \"sm\", \"md\", \"lg\", \"xl\"]\n        }\n    }\n};\n"],"names":["meta","Card","Story","Default","SmallSize","PaddingSmall","PaddingMedium","PaddingLarge","WithActions","WithHeaderActions","WithSmallHeaderActions","WithLargeCorners","AccentVariant","DropdownMenuInCard","DropdownMenu","Button","WithSmallElevation","WithMediumElevation","WithLargeElevation","WithIcon","NotificationIcon","WithTabs","Tabs","Documentation","args"],"mappings":"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"}

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;

package/Checkbox/Checkbox.stories.d.ts

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

package/Checkbox/Checkbox.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox/Checkbox.stories.js","sources":["../../src/Checkbox/Checkbox.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { Checkbox } from \"~/Checkbox/index.js\";\n\nconst meta: Meta<typeof Checkbox> = {\n    title: \"Components/Form/Checkbox\",\n    component: Checkbox,\n    argTypes: {\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [checked, setChecked] = useState(args.checked);\n        return <Checkbox {...args} checked={checked} onChange={checked => setChecked(checked)} />;\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Checkbox>;\n\nexport const Default: Story = {\n    args: {\n        label: \"Any field label\"\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        ...Default.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const WithNotes: Story = {\n    args: {\n        ...Default.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const WithErrors: Story = {\n    args: {\n        ...Default.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        ...Default.args,\n        disabled: true\n    }\n};\n\nexport const FullExample: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        required: true,\n        description: \"Provide the required information for processing your request.\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        const [checked, setChecked] = useState(args.checked || false);\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        // Update checked state when args.checked changes\n        useEffect(() => {\n            setChecked(args.checked || false);\n        }, [args.checked]);\n\n        const handleChange = (isChecked: boolean) => {\n            setChecked(isChecked);\n\n            // Simple required validation\n            if (args.required && !isChecked) {\n                setValidation({ isValid: false, message: \"This field is required\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        };\n\n        // Validate on required change\n        useEffect(() => {\n            if (args.required && !checked) {\n                setValidation({ isValid: false, message: \"This field is required\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        }, [args.required, checked]);\n\n        return (\n            <Checkbox {...args} checked={checked} onChange={handleChange} validation={validation} />\n        );\n    },\n    args: {\n        label: \"Any field label\",\n        checked: false,\n        disabled: false,\n        required: true,\n        description: \"Provide the required information for processing your request.\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    },\n    argTypes: {\n        label: {\n            description: \"Label text for the checkbox\",\n            control: \"text\",\n            defaultValue: \"Any field label\"\n        },\n        checked: {\n            description: \"Determines if the checkbox is checked\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        disabled: {\n            description: \"Disables the checkbox when set to true\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        required: {\n            description: \"Makes the checkbox required when set to true\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        description: {\n            description: \"Additional description text below the checkbox\",\n            control: \"text\"\n        },\n        note: {\n            description: \"Additional note text below the checkbox\",\n            control: \"text\"\n        },\n        validation: {\n            description: \"Validation state and message\",\n            control: \"object\"\n        },\n        onChange: {\n            description: \"Callback function triggered when checkbox state changes\"\n        }\n    }\n};\n"],"names":["meta","Checkbox","args","checked","setChecked","useState","Default","WithDescription","WithNotes","WithErrors","Disabled","FullExample","Documentation","validation","setValidation","useEffect","handleChange","isChecked"],"mappings":";;AAIA,MAAMA,OAA8B;IAChC,OAAO;IACP,WAAWC;IACX,UAAU;QACN,UAAU;YACN,SAAS;YACT,cAAc;QAClB;IACJ;IACA,YAAY;QACR,QAAQ;IACZ;IACA,QAAQC,CAAAA;QACJ,MAAM,CAACC,SAASC,WAAW,GAAGC,SAASH,KAAK,OAAO;QACnD,OAAO,WAAP,GAAO,oBAACD,UAAQA;YAAE,GAAGC,IAAI;YAAE,SAASC;YAAS,UAAUA,CAAAA,UAAWC,WAAWD;;IACjF;AACJ;AAEA,yBAAeH;AAGR,MAAMM,UAAiB;IAC1B,MAAM;QACF,OAAO;IACX;AACJ;AAEO,MAAMC,kBAAyB;IAClC,MAAM;QACF,GAAGD,QAAQ,IAAI;QACf,aAAa;IACjB;AACJ;AAEO,MAAME,YAAmB;IAC5B,MAAM;QACF,GAAGF,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMG,aAAoB;IAC7B,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,YAAY;YACR,SAAS;YACT,SAAS;QACb;IACJ;AACJ;AAEO,MAAMI,WAAkB;IAC3B,MAAM;QACF,GAAGJ,QAAQ,IAAI;QACf,UAAU;IACd;AACJ;AAEO,MAAMK,cAAqB;IAC9B,MAAM;QACF,GAAGL,QAAQ,IAAI;QACf,OAAO;QACP,UAAU;QACV,aAAa;QACb,MAAM;QACN,YAAY;YACR,SAAS;YACT,SAAS;QACb;IACJ;AACJ;AAEO,MAAMM,gBAAuB;IAChC,QAAQV,CAAAA;QACJ,MAAM,CAACC,SAASC,WAAW,GAAGC,SAASH,KAAK,OAAO,IAAI;QACvD,MAAM,CAACW,YAAYC,cAAc,GAAGT,SAAS;YAAE,SAAS;YAAM,SAAS;QAAG;QAG1EU,UAAU;YACNX,WAAWF,KAAK,OAAO,IAAI;QAC/B,GAAG;YAACA,KAAK,OAAO;SAAC;QAEjB,MAAMc,eAAe,CAACC;YAClBb,WAAWa;YAGPf,KAAK,QAAQ,IAAI,CAACe,YAClBH,cAAc;gBAAE,SAAS;gBAAO,SAAS;YAAyB,KAElEA,cAAc;gBAAE,SAAS;gBAAM,SAAS;YAAG;QAEnD;QAGAC,UAAU;YACFb,KAAK,QAAQ,IAAI,CAACC,UAClBW,cAAc;gBAAE,SAAS;gBAAO,SAAS;YAAyB,KAElEA,cAAc;gBAAE,SAAS;gBAAM,SAAS;YAAG;QAEnD,GAAG;YAACZ,KAAK,QAAQ;YAAEC;SAAQ;QAE3B,OAAO,WAAP,GACI,oBAACF,UAAQA;YAAE,GAAGC,IAAI;YAAE,SAASC;YAAS,UAAUa;YAAc,YAAYH;;IAElF;IACA,MAAM;QACF,OAAO;QACP,SAAS;QACT,UAAU;QACV,UAAU;QACV,aAAa;QACb,MAAM;QACN,YAAY;YACR,SAAS;YACT,SAAS;QACb;IACJ;IACA,UAAU;QACN,OAAO;YACH,aAAa;YACb,SAAS;YACT,cAAc;QAClB;QACA,SAAS;YACL,aAAa;YACb,SAAS;YACT,cAAc;QAClB;QACA,UAAU;YACN,aAAa;YACb,SAAS;YACT,cAAc;QAClB;QACA,UAAU;YACN,aAAa;YACb,SAAS;YACT,cAAc;QAClB;QACA,aAAa;YACT,aAAa;YACb,SAAS;QACb;QACA,MAAM;YACF,aAAa;YACb,SAAS;QACb;QACA,YAAY;YACR,aAAa;YACb,SAAS;QACb;QACA,UAAU;YACN,aAAa;QACjB;IACJ;AACJ"}
+{"version":3,"file":"Checkbox/Checkbox.stories.js","sources":["../../src/Checkbox/Checkbox.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { Checkbox } from \"~/Checkbox/index.js\";\n\nconst meta: Meta<typeof Checkbox> = {\n    title: \"Components/Form/Checkbox\",\n    component: Checkbox,\n    argTypes: {\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [checked, setChecked] = useState(args.checked);\n        return <Checkbox {...args} checked={checked} onChange={checked => setChecked(checked)} />;\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Checkbox>;\n\nexport const Default: Story = {\n    args: {\n        label: \"Any field label\"\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        ...Default.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const WithNotes: Story = {\n    args: {\n        ...Default.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const WithErrors: Story = {\n    args: {\n        ...Default.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        ...Default.args,\n        disabled: true\n    }\n};\n\nexport const FullExample: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        required: true,\n        description: \"Provide the required information for processing your request.\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        const [checked, setChecked] = useState(args.checked || false);\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        // Update checked state when args.checked changes\n        useEffect(() => {\n            setChecked(args.checked || false);\n        }, [args.checked]);\n\n        const handleChange = (isChecked: boolean) => {\n            setChecked(isChecked);\n\n            // Simple required validation\n            if (args.required && !isChecked) {\n                setValidation({ isValid: false, message: \"This field is required\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        };\n\n        // Validate on required change\n        useEffect(() => {\n            if (args.required && !checked) {\n                setValidation({ isValid: false, message: \"This field is required\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        }, [args.required, checked]);\n\n        return (\n            <Checkbox {...args} checked={checked} onChange={handleChange} validation={validation} />\n        );\n    },\n    args: {\n        label: \"Any field label\",\n        checked: false,\n        disabled: false,\n        required: true,\n        description: \"Provide the required information for processing your request.\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    },\n    argTypes: {\n        label: {\n            description: \"Label text for the checkbox\",\n            control: \"text\",\n            defaultValue: \"Any field label\"\n        },\n        checked: {\n            description: \"Determines if the checkbox is checked\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        disabled: {\n            description: \"Disables the checkbox when set to true\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        required: {\n            description: \"Makes the checkbox required when set to true\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        description: {\n            description: \"Additional description text below the checkbox\",\n            control: \"text\"\n        },\n        note: {\n            description: \"Additional note text below the checkbox\",\n            control: \"text\"\n        },\n        validation: {\n            description: \"Validation state and message\",\n            control: \"object\"\n        },\n        onChange: {\n            description: \"Callback function triggered when checkbox state changes\"\n        }\n    }\n};\n"],"names":["meta","Checkbox","args","checked","setChecked","useState","Default","WithDescription","WithNotes","WithErrors","Disabled","FullExample","Documentation","validation","setValidation","useEffect","handleChange","isChecked"],"mappings":";;AAIA,MAAMA,OAA8B;IAChC,OAAO;IACP,WAAWC;IACX,UAAU;QACN,UAAU;YACN,SAAS;YACT,cAAc;QAClB;IACJ;IACA,YAAY;QACR,QAAQ;IACZ;IACA,QAAQC,CAAAA;QACJ,MAAM,CAACC,SAASC,WAAW,GAAGC,SAASH,KAAK,OAAO;QACnD,OAAO,WAAP,GAAO,oBAACD,UAAQA;YAAE,GAAGC,IAAI;YAAE,SAASC;YAAS,UAAUA,CAAAA,UAAWC,WAAWD;;IACjF;AACJ;AAEA,yBAAeH;AAGR,MAAMM,UAAiB;IAC1B,MAAM;QACF,OAAO;IACX;AACJ;AAEO,MAAMC,kBAAyB;IAClC,MAAM;QACF,GAAGD,QAAQ,IAAI;QACf,aAAa;IACjB;AACJ;AAEO,MAAME,YAAmB;IAC5B,MAAM;QACF,GAAGF,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMG,aAAoB;IAC7B,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,YAAY;YACR,SAAS;YACT,SAAS;QACb;IACJ;AACJ;AAEO,MAAMI,WAAkB;IAC3B,MAAM;QACF,GAAGJ,QAAQ,IAAI;QACf,UAAU;IACd;AACJ;AAEO,MAAMK,cAAqB;IAC9B,MAAM;QACF,GAAGL,QAAQ,IAAI;QACf,OAAO;QACP,UAAU;QACV,aAAa;QACb,MAAM;QACN,YAAY;YACR,SAAS;YACT,SAAS;QACb;IACJ;AACJ;AAEO,MAAMM,gBAAuB;IAChC,QAAQV,CAAAA;QACJ,MAAM,CAACC,SAASC,WAAW,GAAGC,SAASH,KAAK,OAAO,IAAI;QACvD,MAAM,CAACW,YAAYC,cAAc,GAAGT,SAAS;YAAE,SAAS;YAAM,SAAS;QAAG;QAG1EU,UAAU;YACNX,WAAWF,KAAK,OAAO,IAAI;QAC/B,GAAG;YAACA,KAAK,OAAO;SAAC;QAEjB,MAAMc,eAAe,CAACC;YAClBb,WAAWa;YAGPf,KAAK,QAAQ,IAAI,CAACe,YAClBH,cAAc;gBAAE,SAAS;gBAAO,SAAS;YAAyB,KAElEA,cAAc;gBAAE,SAAS;gBAAM,SAAS;YAAG;QAEnD;QAGAC,UAAU;YACFb,KAAK,QAAQ,IAAI,CAACC,UAClBW,cAAc;gBAAE,SAAS;gBAAO,SAAS;YAAyB,KAElEA,cAAc;gBAAE,SAAS;gBAAM,SAAS;YAAG;QAEnD,GAAG;YAACZ,KAAK,QAAQ;YAAEC;SAAQ;QAE3B,OAAO,WAAP,GACI,oBAACF,UAAQA;YAAE,GAAGC,IAAI;YAAE,SAASC;YAAS,UAAUa;YAAc,YAAYH;;IAElF;IACA,MAAM;QACF,OAAO;QACP,SAAS;QACT,UAAU;QACV,UAAU;QACV,aAAa;QACb,MAAM;QACN,YAAY;YACR,SAAS;YACT,SAAS;QACb;IACJ;IACA,UAAU;QACN,OAAO;YACH,aAAa;YACb,SAAS;YACT,cAAc;QAClB;QACA,SAAS;YACL,aAAa;YACb,SAAS;YACT,cAAc;QAClB;QACA,UAAU;YACN,aAAa;YACb,SAAS;YACT,cAAc;QAClB;QACA,UAAU;YACN,aAAa;YACb,SAAS;YACT,cAAc;QAClB;QACA,aAAa;YACT,aAAa;YACb,SAAS;QACb;QACA,MAAM;YACF,aAAa;YACb,SAAS;QACb;QACA,YAAY;YACR,aAAa;YACb,SAAS;QACb;QACA,UAAU;YACN,aAAa;QACjB;IACJ;AACJ"}

package/Checkbox/primitives/CheckboxPrimitive.d.ts

@@ -19,40 +19,45 @@ type CheckboxPrimitiveRendererProps = Omit<CheckboxPrimitiveProps, "onCheckedCha
     changeChecked: (checked: boolean) => void;
     disabled?: boolean;
 };
-declare const CheckboxPrimitiveRenderer: (({ label, id, hasLabel, indeterminate, changeChecked, checked, className, disabled, ...props }: CheckboxPrimitiveRendererProps) => React.JSX.Element) & {
-    original: ({ label, id, hasLabel, indeterminate, changeChecked, checked, className, disabled, ...props }: CheckboxPrimitiveRendererProps) => React.JSX.Element;
+declare const DecoratableCheckboxPrimitiveRenderer: ({ label, id, hasLabel, indeterminate, changeChecked, checked, className, disabled, ...props }: CheckboxPrimitiveRendererProps) => React.JSX.Element;
+declare const CheckboxPrimitiveRenderer: typeof DecoratableCheckboxPrimitiveRenderer & {
+    original: typeof DecoratableCheckboxPrimitiveRenderer;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ label, id, hasLabel, indeterminate, changeChecked, checked, className, disabled, ...props }: CheckboxPrimitiveRendererProps) => React.JSX.Element) & {
-        original: ({ label, id, hasLabel, indeterminate, changeChecked, checked, className, disabled, ...props }: CheckboxPrimitiveRendererProps) => React.JSX.Element;
+    original: typeof DecoratableCheckboxPrimitiveRenderer & {
+        original: typeof DecoratableCheckboxPrimitiveRenderer;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ label, id, hasLabel, indeterminate, changeChecked, checked, className, disabled, ...props }: CheckboxPrimitiveRendererProps) => React.JSX.Element) & {
-        original: ({ label, id, hasLabel, indeterminate, changeChecked, checked, className, disabled, ...props }: CheckboxPrimitiveRendererProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof DecoratableCheckboxPrimitiveRenderer & {
+        original: typeof DecoratableCheckboxPrimitiveRenderer;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;
 };
-declare const CheckboxPrimitive: ((props: CheckboxPrimitiveProps) => React.JSX.Element | null) & {
-    original: (props: CheckboxPrimitiveProps) => React.JSX.Element | null;
+/**
+ * Checkbox
+ */
+declare const DecoratableCheckboxPrimitive: (props: CheckboxPrimitiveProps) => React.JSX.Element | null;
+declare const CheckboxPrimitive: typeof DecoratableCheckboxPrimitive & {
+    original: typeof DecoratableCheckboxPrimitive;
     originalName: string;
     displayName: string;
 } & {
-    original: ((props: CheckboxPrimitiveProps) => React.JSX.Element | null) & {
-        original: (props: CheckboxPrimitiveProps) => React.JSX.Element | null;
+    original: typeof DecoratableCheckboxPrimitive & {
+        original: typeof DecoratableCheckboxPrimitive;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: CheckboxPrimitiveProps) => React.JSX.Element | null) & {
-        original: (props: CheckboxPrimitiveProps) => React.JSX.Element | null;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof DecoratableCheckboxPrimitive & {
+        original: typeof DecoratableCheckboxPrimitive;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/Checkbox/primitives/CheckboxPrimitive.stories.d.ts

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

package/Checkbox/primitives/CheckboxPrimitive.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox/primitives/CheckboxPrimitive.stories.js","sources":["../../../src/Checkbox/primitives/CheckboxPrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { CheckboxPrimitive } from \"./CheckboxPrimitive.js\";\n\nconst meta: Meta<typeof CheckboxPrimitive> = {\n    title: \"Components/Form Primitives/Checkbox\",\n    component: CheckboxPrimitive,\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [checked, setChecked] = useState(args.checked);\n        return (\n            <CheckboxPrimitive\n                {...args}\n                checked={checked}\n                onChange={checked => setChecked(checked)}\n            />\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof CheckboxPrimitive>;\n\nexport const Default: Story = {\n    args: {\n        label: \"Any field label\"\n    }\n};\n\nexport const LongLabel: Story = {\n    args: {\n        label: \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eu aliquam lacus. Morbi eleifend, eros et vestibulum lobortis, mi elit scelerisque neque, sit amet dictum orci sem ac ante. In hac habitasse platea dictumst. Pellentesque molestie nisl tortor, eu dictum velit mollis vitae. Maecenas nec risus sit amet ante efficitur venenatis id eget eros. Aenean mollis vel dolor vitae vestibulum. Integer consectetur id diam eget iaculis. Praesent egestas ullamcorper libero vel eleifend. \"\n    }\n};\n\nexport const Checked: Story = {\n    args: {\n        ...Default.args,\n        checked: true\n    }\n};\n\nexport const Indeterminate: Story = {\n    args: {\n        ...Default.args,\n        indeterminate: true\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        ...Default.args,\n        disabled: true\n    }\n};\n"],"names":["meta","CheckboxPrimitive","args","checked","setChecked","useState","Default","LongLabel","Checked","Indeterminate","Disabled"],"mappings":";;AAIA,MAAMA,OAAuC;IACzC,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;IACA,QAAQC,CAAAA;QACJ,MAAM,CAACC,SAASC,WAAW,GAAGC,SAASH,KAAK,OAAO;QACnD,OAAO,WAAP,GACI,oBAACD,mBAAiBA;YACb,GAAGC,IAAI;YACR,SAASC;YACT,UAAUA,CAAAA,UAAWC,WAAWD;;IAG5C;AACJ;AAEA,kCAAeH;AAGR,MAAMM,UAAiB;IAC1B,MAAM;QACF,OAAO;IACX;AACJ;AAEO,MAAMC,YAAmB;IAC5B,MAAM;QACF,OAAO;IACX;AACJ;AAEO,MAAMC,UAAiB;IAC1B,MAAM;QACF,GAAGF,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAMG,gBAAuB;IAChC,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,eAAe;IACnB;AACJ;AAEO,MAAMI,WAAkB;IAC3B,MAAM;QACF,GAAGJ,QAAQ,IAAI;QACf,UAAU;IACd;AACJ"}
+{"version":3,"file":"Checkbox/primitives/CheckboxPrimitive.stories.js","sources":["../../../src/Checkbox/primitives/CheckboxPrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { CheckboxPrimitive } from \"./CheckboxPrimitive.js\";\n\nconst meta: Meta<typeof CheckboxPrimitive> = {\n    title: \"Components/Form Primitives/Checkbox\",\n    component: CheckboxPrimitive,\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [checked, setChecked] = useState(args.checked);\n        return (\n            <CheckboxPrimitive\n                {...args}\n                checked={checked}\n                onChange={checked => setChecked(checked)}\n            />\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof CheckboxPrimitive>;\n\nexport const Default: Story = {\n    args: {\n        label: \"Any field label\"\n    }\n};\n\nexport const LongLabel: Story = {\n    args: {\n        label: \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eu aliquam lacus. Morbi eleifend, eros et vestibulum lobortis, mi elit scelerisque neque, sit amet dictum orci sem ac ante. In hac habitasse platea dictumst. Pellentesque molestie nisl tortor, eu dictum velit mollis vitae. Maecenas nec risus sit amet ante efficitur venenatis id eget eros. Aenean mollis vel dolor vitae vestibulum. Integer consectetur id diam eget iaculis. Praesent egestas ullamcorper libero vel eleifend. \"\n    }\n};\n\nexport const Checked: Story = {\n    args: {\n        ...Default.args,\n        checked: true\n    }\n};\n\nexport const Indeterminate: Story = {\n    args: {\n        ...Default.args,\n        indeterminate: true\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        ...Default.args,\n        disabled: true\n    }\n};\n"],"names":["meta","CheckboxPrimitive","args","checked","setChecked","useState","Default","LongLabel","Checked","Indeterminate","Disabled"],"mappings":";;AAIA,MAAMA,OAAuC;IACzC,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;IACA,QAAQC,CAAAA;QACJ,MAAM,CAACC,SAASC,WAAW,GAAGC,SAASH,KAAK,OAAO;QACnD,OAAO,WAAP,GACI,oBAACD,mBAAiBA;YACb,GAAGC,IAAI;YACR,SAASC;YACT,UAAUA,CAAAA,UAAWC,WAAWD;;IAG5C;AACJ;AAEA,kCAAeH;AAGR,MAAMM,UAAiB;IAC1B,MAAM;QACF,OAAO;IACX;AACJ;AAEO,MAAMC,YAAmB;IAC5B,MAAM;QACF,OAAO;IACX;AACJ;AAEO,MAAMC,UAAiB;IAC1B,MAAM;QACF,GAAGF,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAMG,gBAAuB;IAChC,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,eAAe;IACnB;AACJ;AAEO,MAAMI,WAAkB;IAC3B,MAAM;QACF,GAAGJ,QAAQ,IAAI;QACf,UAAU;IACd;AACJ"}

package/CheckboxGroup/CheckboxGroup.d.ts

@@ -2,21 +2,22 @@ import React from "react";
 import type { CheckboxGroupPrimitiveProps } from "./primitives/CheckboxGroupPrimitive.js";
 import type { FormComponentProps } from "../FormComponent/index.js";
 type CheckboxGroupProps = CheckboxGroupPrimitiveProps & FormComponentProps;
-declare const CheckboxGroup: (({ label, description, note, required, disabled, hint, validation, ...props }: CheckboxGroupProps) => React.JSX.Element) & {
-    original: ({ label, description, note, required, disabled, hint, validation, ...props }: CheckboxGroupProps) => React.JSX.Element;
+declare const DecoratableCheckboxGroup: ({ label, description, note, required, disabled, hint, validation, ...props }: CheckboxGroupProps) => React.JSX.Element;
+declare const CheckboxGroup: typeof DecoratableCheckboxGroup & {
+    original: typeof DecoratableCheckboxGroup;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ label, description, note, required, disabled, hint, validation, ...props }: CheckboxGroupProps) => React.JSX.Element) & {
-        original: ({ label, description, note, required, disabled, hint, validation, ...props }: CheckboxGroupProps) => React.JSX.Element;
+    original: typeof DecoratableCheckboxGroup & {
+        original: typeof DecoratableCheckboxGroup;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ label, description, note, required, disabled, hint, validation, ...props }: CheckboxGroupProps) => React.JSX.Element) & {
-        original: ({ label, description, note, required, disabled, hint, validation, ...props }: CheckboxGroupProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof DecoratableCheckboxGroup & {
+        original: typeof DecoratableCheckboxGroup;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/CheckboxGroup/CheckboxGroup.stories.d.ts

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