@webiny/admin-ui 0.0.0-unstable.e6f0dc8ca7 → 0.0.0-unstable.e9333b3f0b

package/Heading/Heading.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["Heading","meta","title","component","argTypes","level","control","type","min","max","Heading1","args","children","Heading2","Heading3","Heading4","Heading5","Heading6","As","as","Documentation","undefined","className","description","options"],"sources":["Heading.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react-webpack5\";\n\nimport { Heading } from \"./Heading.js\";\n\nconst meta: Meta<typeof Heading> = {\n    title: \"Components/Heading\",\n    component: Heading,\n    argTypes: {\n        level: {\n            control: {\n                type: \"number\",\n                min: 1,\n                max: 6\n            }\n        }\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Heading>;\n\nexport const Heading1: Story = {\n    args: {\n        level: 1,\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const Heading2: Story = {\n    args: {\n        level: 2,\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const Heading3: Story = {\n    args: {\n        level: 3,\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const Heading4: Story = {\n    args: {\n        level: 4,\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const Heading5: Story = {\n    args: {\n        level: 5,\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const Heading6: Story = {\n    args: {\n        level: 6,\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const As: Story = {\n    args: {\n        level: 2,\n        as: \"h1\",\n        children: \"This is visually a Heading level 2, but semantically an h1\"\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        level: 1,\n        children: \"This is a heading\",\n        as: undefined,\n        className: undefined\n    },\n    argTypes: {\n        level: {\n            description: \"The heading level (1-6) which determines the size and semantic meaning.\",\n            control: \"select\",\n            options: [1, 2, 3, 4, 5, 6]\n        },\n        as: {\n            description:\n                \"The HTML tag to render, overriding the default tag based on level. This is useful when you want to maintain semantic structure but want different visual styling.\",\n            control: \"select\",\n            options: [\"none\", \"h1\", \"h2\", \"h3\", \"h4\", \"h5\", \"h6\"]\n        },\n        children: {\n            description: \"The content of the heading.\",\n            control: \"text\"\n        },\n        className: {\n            description:\n                \"Additional CSS classes to apply to the heading. You can pass multiple classes, separated by commas or spaces.\"\n        }\n    }\n};\n"],"mappings":"AAEA,SAASA,OAAO;AAEhB,MAAMC,IAA0B,GAAG;EAC/BC,KAAK,EAAE,oBAAoB;EAC3BC,SAAS,EAAEH,OAAO;EAClBI,QAAQ,EAAE;IACNC,KAAK,EAAE;MACHC,OAAO,EAAE;QACLC,IAAI,EAAE,QAAQ;QACdC,GAAG,EAAE,CAAC;QACNC,GAAG,EAAE;MACT;IACJ;EACJ;AACJ,CAAC;AAED,eAAeR,IAAI;AAGnB,OAAO,MAAMS,QAAe,GAAG;EAC3BC,IAAI,EAAE;IACFN,KAAK,EAAE,CAAC;IACRO,QAAQ,EACJ;EACR;AACJ,CAAC;AAED,OAAO,MAAMC,QAAe,GAAG;EAC3BF,IAAI,EAAE;IACFN,KAAK,EAAE,CAAC;IACRO,QAAQ,EACJ;EACR;AACJ,CAAC;AAED,OAAO,MAAME,QAAe,GAAG;EAC3BH,IAAI,EAAE;IACFN,KAAK,EAAE,CAAC;IACRO,QAAQ,EACJ;EACR;AACJ,CAAC;AAED,OAAO,MAAMG,QAAe,GAAG;EAC3BJ,IAAI,EAAE;IACFN,KAAK,EAAE,CAAC;IACRO,QAAQ,EACJ;EACR;AACJ,CAAC;AAED,OAAO,MAAMI,QAAe,GAAG;EAC3BL,IAAI,EAAE;IACFN,KAAK,EAAE,CAAC;IACRO,QAAQ,EACJ;EACR;AACJ,CAAC;AAED,OAAO,MAAMK,QAAe,GAAG;EAC3BN,IAAI,EAAE;IACFN,KAAK,EAAE,CAAC;IACRO,QAAQ,EACJ;EACR;AACJ,CAAC;AAED,OAAO,MAAMM,EAAS,GAAG;EACrBP,IAAI,EAAE;IACFN,KAAK,EAAE,CAAC;IACRc,EAAE,EAAE,IAAI;IACRP,QAAQ,EAAE;EACd;AACJ,CAAC;AAED,OAAO,MAAMQ,aAAoB,GAAG;EAChCT,IAAI,EAAE;IACFN,KAAK,EAAE,CAAC;IACRO,QAAQ,EAAE,mBAAmB;IAC7BO,EAAE,EAAEE,SAAS;IACbC,SAAS,EAAED;EACf,CAAC;EACDjB,QAAQ,EAAE;IACNC,KAAK,EAAE;MACHkB,WAAW,EAAE,yEAAyE;MACtFjB,OAAO,EAAE,QAAQ;MACjBkB,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;IAC9B,CAAC;IACDL,EAAE,EAAE;MACAI,WAAW,EACP,mKAAmK;MACvKjB,OAAO,EAAE,QAAQ;MACjBkB,OAAO,EAAE,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI;IACxD,CAAC;IACDZ,QAAQ,EAAE;MACNW,WAAW,EAAE,6BAA6B;MAC1CjB,OAAO,EAAE;IACb,CAAC;IACDgB,SAAS,EAAE;MACPC,WAAW,EACP;IACR;EACJ;AACJ,CAAC","ignoreList":[]}
+{"version":3,"file":"Heading/Heading.stories.js","sources":["../../src/Heading/Heading.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\n\nimport { Heading } from \"./Heading.js\";\n\nconst meta: Meta<typeof Heading> = {\n    title: \"Components/Heading\",\n    component: Heading,\n    argTypes: {\n        level: {\n            control: {\n                type: \"number\",\n                min: 1,\n                max: 6\n            }\n        }\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Heading>;\n\nexport const Heading1: Story = {\n    args: {\n        level: 1,\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const Heading2: Story = {\n    args: {\n        level: 2,\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const Heading3: Story = {\n    args: {\n        level: 3,\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const Heading4: Story = {\n    args: {\n        level: 4,\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const Heading5: Story = {\n    args: {\n        level: 5,\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const Heading6: Story = {\n    args: {\n        level: 6,\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const As: Story = {\n    args: {\n        level: 2,\n        as: \"h1\",\n        children: \"This is visually a Heading level 2, but semantically an h1\"\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        level: 1,\n        children: \"This is a heading\",\n        as: undefined,\n        className: undefined\n    },\n    argTypes: {\n        level: {\n            description: \"The heading level (1-6) which determines the size and semantic meaning.\",\n            control: \"select\",\n            options: [1, 2, 3, 4, 5, 6]\n        },\n        as: {\n            description:\n                \"The HTML tag to render, overriding the default tag based on level. This is useful when you want to maintain semantic structure but want different visual styling.\",\n            control: \"select\",\n            options: [\"none\", \"h1\", \"h2\", \"h3\", \"h4\", \"h5\", \"h6\"]\n        },\n        children: {\n            description: \"The content of the heading.\",\n            control: \"text\"\n        },\n        className: {\n            description:\n                \"Additional CSS classes to apply to the heading. You can pass multiple classes, separated by commas or spaces.\"\n        }\n    }\n};\n"],"names":["meta","Heading","Heading1","Heading2","Heading3","Heading4","Heading5","Heading6","As","Documentation","undefined"],"mappings":";AAIA,MAAMA,OAA6B;IAC/B,OAAO;IACP,WAAWC;IACX,UAAU;QACN,OAAO;YACH,SAAS;gBACL,MAAM;gBACN,KAAK;gBACL,KAAK;YACT;QACJ;IACJ;AACJ;AAEA,wBAAeD;AAGR,MAAME,WAAkB;IAC3B,MAAM;QACF,OAAO;QACP,UACI;IACR;AACJ;AAEO,MAAMC,WAAkB;IAC3B,MAAM;QACF,OAAO;QACP,UACI;IACR;AACJ;AAEO,MAAMC,WAAkB;IAC3B,MAAM;QACF,OAAO;QACP,UACI;IACR;AACJ;AAEO,MAAMC,WAAkB;IAC3B,MAAM;QACF,OAAO;QACP,UACI;IACR;AACJ;AAEO,MAAMC,WAAkB;IAC3B,MAAM;QACF,OAAO;QACP,UACI;IACR;AACJ;AAEO,MAAMC,WAAkB;IAC3B,MAAM;QACF,OAAO;QACP,UACI;IACR;AACJ;AAEO,MAAMC,KAAY;IACrB,MAAM;QACF,OAAO;QACP,IAAI;QACJ,UAAU;IACd;AACJ;AAEO,MAAMC,gBAAuB;IAChC,MAAM;QACF,OAAO;QACP,UAAU;QACV,IAAIC;QACJ,WAAWA;IACf;IACA,UAAU;QACN,OAAO;YACH,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAG;gBAAG;gBAAG;gBAAG;gBAAG;aAAE;QAC/B;QACA,IAAI;YACA,aACI;YACJ,SAAS;YACT,SAAS;gBAAC;gBAAQ;gBAAM;gBAAM;gBAAM;gBAAM;gBAAM;aAAK;QACzD;QACA,UAAU;YACN,aAAa;YACb,SAAS;QACb;QACA,WAAW;YACP,aACI;QACR;IACJ;AACJ"}

package/Heading/index.js

@@ -1,3 +1 @@
 export * from "./Heading.js";
-
-//# sourceMappingURL=index.js.map

package/Icon/Icon.d.ts

@@ -1,28 +1,29 @@
 import React from "react";
 import { type VariantProps } from "../utils.js";
 declare const iconVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | "xs" | null | undefined;
-    color?: "accent" | "inherit" | "neutral-light" | "neutral-strong" | "neutral-strong-transparent" | "neutral-base" | "neutral-negative" | null | undefined;
+    size?: "lg" | "md" | "sm" | "xs" | null | undefined;
+    color?: "accent" | "inherit" | "neutral-base" | "neutral-light" | "neutral-negative" | "neutral-strong" | "neutral-strong-transparent" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface IconProps extends Omit<React.HTMLAttributes<HTMLOrSVGElement>, "color">, VariantProps<typeof iconVariants> {
     label: string;
     icon: React.ReactNode;
 }
-declare const Icon: ((props: IconProps) => React.JSX.Element) & {
-    original: (props: IconProps) => React.JSX.Element;
+declare const IconBase: (props: IconProps) => React.JSX.Element;
+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/Icon/Icon.js

@@ -1,47 +1,40 @@
-import React from "react";
+import react from "react";
 import { AccessibleIcon } from "radix-ui";
 import { cn, cva, makeDecoratable } from "../utils.js";
 const iconVariants = cva("shrink-0", {
-  variants: {
-    size: {
-      xs: "size-sm-extra",
-      sm: "size-md",
-      md: "size-md-plus",
-      lg: "size-lg"
+    variants: {
+        size: {
+            xs: "size-sm-extra",
+            sm: "size-md",
+            md: "size-md-plus",
+            lg: "size-lg"
+        },
+        color: {
+            inherit: "fill-inherit text-inherit",
+            accent: "fill-accent-default text-accent-default",
+            "neutral-light": "fill-neutral-strong text-neutral-strong",
+            "neutral-strong": "fill-neutral-xstrong text-neutral-xstrong",
+            "neutral-strong-transparent": "fill-neutral-xstrong/30 text-neutral-xstrong/30",
+            "neutral-base": "fill-neutral-base text-neutral-base",
+            "neutral-negative": "fill-neutral-base/50 text-neutral-base/50"
+        }
     },
-    color: {
-      inherit: "fill-inherit text-inherit",
-      accent: "fill-accent-default text-accent-default",
-      "neutral-light": "fill-neutral-strong text-neutral-strong",
-      "neutral-strong": "fill-neutral-xstrong text-neutral-xstrong",
-      "neutral-strong-transparent": "fill-neutral-xstrong/30 text-neutral-xstrong/30",
-      "neutral-base": "fill-neutral-base text-neutral-base",
-      "neutral-negative": "fill-neutral-base/50 text-neutral-base/50"
+    defaultVariants: {
+        size: "md",
+        color: "inherit"
     }
-  },
-  defaultVariants: {
-    size: "md",
-    color: "inherit"
-  }
 });
-const IconBase = props => {
-  const {
-    label,
-    icon,
-    color,
-    size,
-    className,
-    ...rest
-  } = props;
-  return /*#__PURE__*/React.createElement(AccessibleIcon.Root, {
-    label: label
-  }, /*#__PURE__*/React.cloneElement(icon, {
-    ...rest,
-    className: cn(iconVariants({
-      color,
-      size
-    }), className)
-  }));
+const IconBase = (props)=>{
+    const { label, icon, color, size, className, ...rest } = props;
+    return /*#__PURE__*/ react.createElement(AccessibleIcon.Root, {
+        label: label
+    }, /*#__PURE__*/ react.cloneElement(icon, {
+        ...rest,
+        className: cn(iconVariants({
+            color,
+            size
+        }), className)
+    }));
 };
 const Icon = makeDecoratable("Icon", IconBase);
 export { Icon };

package/Icon/Icon.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","AccessibleIcon","cn","cva","makeDecoratable","iconVariants","variants","size","xs","sm","md","lg","color","inherit","accent","defaultVariants","IconBase","props","label","icon","className","rest","createElement","Root","cloneElement","Icon"],"sources":["Icon.tsx"],"sourcesContent":["import React from \"react\";\nimport { AccessibleIcon } from \"radix-ui\";\nimport { cn, cva, makeDecoratable, type VariantProps } from \"~/utils.js\";\n\nconst iconVariants = cva(\"shrink-0\", {\n    variants: {\n        size: {\n            xs: \"size-sm-extra\",\n            sm: \"size-md\",\n            md: \"size-md-plus\",\n            lg: \"size-lg\"\n        },\n        color: {\n            inherit: \"fill-inherit text-inherit\",\n            accent: \"fill-accent-default text-accent-default\",\n            \"neutral-light\": \"fill-neutral-strong text-neutral-strong\",\n            \"neutral-strong\": \"fill-neutral-xstrong text-neutral-xstrong\",\n            \"neutral-strong-transparent\": \"fill-neutral-xstrong/30 text-neutral-xstrong/30\",\n            \"neutral-base\": \"fill-neutral-base text-neutral-base\",\n            \"neutral-negative\": \"fill-neutral-base/50 text-neutral-base/50\"\n        }\n    },\n    defaultVariants: {\n        size: \"md\",\n        color: \"inherit\"\n    }\n});\n\ninterface IconProps\n    extends\n        Omit<React.HTMLAttributes<HTMLOrSVGElement>, \"color\">,\n        VariantProps<typeof iconVariants> {\n    label: string;\n    icon: React.ReactNode;\n}\n\nconst IconBase = (props: IconProps) => {\n    const { label, icon, color, size, className, ...rest } = props;\n    return (\n        <AccessibleIcon.Root label={label}>\n            {/* @ts-expect-error */}\n            {React.cloneElement(icon, {\n                ...rest,\n                className: cn(iconVariants({ color, size }), className)\n            })}\n        </AccessibleIcon.Root>\n    );\n};\n\nconst Icon = makeDecoratable(\"Icon\", IconBase);\n\nexport { Icon, type IconProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,cAAc,QAAQ,UAAU;AACzC,SAASC,EAAE,EAAEC,GAAG,EAAEC,eAAe;AAEjC,MAAMC,YAAY,GAAGF,GAAG,CAAC,UAAU,EAAE;EACjCG,QAAQ,EAAE;IACNC,IAAI,EAAE;MACFC,EAAE,EAAE,eAAe;MACnBC,EAAE,EAAE,SAAS;MACbC,EAAE,EAAE,cAAc;MAClBC,EAAE,EAAE;IACR,CAAC;IACDC,KAAK,EAAE;MACHC,OAAO,EAAE,2BAA2B;MACpCC,MAAM,EAAE,yCAAyC;MACjD,eAAe,EAAE,yCAAyC;MAC1D,gBAAgB,EAAE,2CAA2C;MAC7D,4BAA4B,EAAE,iDAAiD;MAC/E,cAAc,EAAE,qCAAqC;MACrD,kBAAkB,EAAE;IACxB;EACJ,CAAC;EACDC,eAAe,EAAE;IACbR,IAAI,EAAE,IAAI;IACVK,KAAK,EAAE;EACX;AACJ,CAAC,CAAC;AAUF,MAAMI,QAAQ,GAAIC,KAAgB,IAAK;EACnC,MAAM;IAAEC,KAAK;IAAEC,IAAI;IAAEP,KAAK;IAAEL,IAAI;IAAEa,SAAS;IAAE,GAAGC;EAAK,CAAC,GAAGJ,KAAK;EAC9D,oBACIjB,KAAA,CAAAsB,aAAA,CAACrB,cAAc,CAACsB,IAAI;IAACL,KAAK,EAAEA;EAAM,gBAE7BlB,KAAK,CAACwB,YAAY,CAACL,IAAI,EAAE;IACtB,GAAGE,IAAI;IACPD,SAAS,EAAElB,EAAE,CAACG,YAAY,CAAC;MAAEO,KAAK;MAAEL;IAAK,CAAC,CAAC,EAAEa,SAAS;EAC1D,CAAC,CACgB,CAAC;AAE9B,CAAC;AAED,MAAMK,IAAI,GAAGrB,eAAe,CAAC,MAAM,EAAEY,QAAQ,CAAC;AAE9C,SAASS,IAAI","ignoreList":[]}
+{"version":3,"file":"Icon/Icon.js","sources":["../../src/Icon/Icon.tsx"],"sourcesContent":["import React from \"react\";\nimport { AccessibleIcon } from \"radix-ui\";\nimport { cn, cva, makeDecoratable, type VariantProps } from \"~/utils.js\";\n\nconst iconVariants = cva(\"shrink-0\", {\n    variants: {\n        size: {\n            xs: \"size-sm-extra\",\n            sm: \"size-md\",\n            md: \"size-md-plus\",\n            lg: \"size-lg\"\n        },\n        color: {\n            inherit: \"fill-inherit text-inherit\",\n            accent: \"fill-accent-default text-accent-default\",\n            \"neutral-light\": \"fill-neutral-strong text-neutral-strong\",\n            \"neutral-strong\": \"fill-neutral-xstrong text-neutral-xstrong\",\n            \"neutral-strong-transparent\": \"fill-neutral-xstrong/30 text-neutral-xstrong/30\",\n            \"neutral-base\": \"fill-neutral-base text-neutral-base\",\n            \"neutral-negative\": \"fill-neutral-base/50 text-neutral-base/50\"\n        }\n    },\n    defaultVariants: {\n        size: \"md\",\n        color: \"inherit\"\n    }\n});\n\ninterface IconProps\n    extends\n        Omit<React.HTMLAttributes<HTMLOrSVGElement>, \"color\">,\n        VariantProps<typeof iconVariants> {\n    label: string;\n    icon: React.ReactNode;\n}\n\nconst IconBase = (props: IconProps) => {\n    const { label, icon, color, size, className, ...rest } = props;\n    return (\n        <AccessibleIcon.Root label={label}>\n            {/* @ts-expect-error */}\n            {React.cloneElement(icon, {\n                ...rest,\n                className: cn(iconVariants({ color, size }), className)\n            })}\n        </AccessibleIcon.Root>\n    );\n};\n\nconst Icon = makeDecoratable(\"Icon\", IconBase);\n\nexport { Icon, type IconProps };\n"],"names":["iconVariants","cva","IconBase","props","label","icon","color","size","className","rest","AccessibleIcon","React","cn","Icon","makeDecoratable"],"mappings":";;;AAIA,MAAMA,eAAeC,IAAI,YAAY;IACjC,UAAU;QACN,MAAM;YACF,IAAI;YACJ,IAAI;YACJ,IAAI;YACJ,IAAI;QACR;QACA,OAAO;YACH,SAAS;YACT,QAAQ;YACR,iBAAiB;YACjB,kBAAkB;YAClB,8BAA8B;YAC9B,gBAAgB;YAChB,oBAAoB;QACxB;IACJ;IACA,iBAAiB;QACb,MAAM;QACN,OAAO;IACX;AACJ;AAUA,MAAMC,WAAW,CAACC;IACd,MAAM,EAAEC,KAAK,EAAEC,IAAI,EAAEC,KAAK,EAAEC,IAAI,EAAEC,SAAS,EAAE,GAAGC,MAAM,GAAGN;IACzD,OAAO,WAAP,GACI,oBAACO,eAAe,IAAI;QAAC,OAAON;qBAEvBO,MAAAA,YAAkB,CAACN,MAAM;QACtB,GAAGI,IAAI;QACP,WAAWG,GAAGZ,aAAa;YAAEM;YAAOC;QAAK,IAAIC;IACjD;AAGZ;AAEA,MAAMK,OAAOC,gBAAgB,QAAQZ"}

package/Icon/Icon.stories.d.ts

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

package/Icon/Icon.stories.js

@@ -1,138 +1,174 @@
-import React from "react";
-import { ReactComponent as XIcon } from "@webiny/icons/close.svg";
+import react from "react";
+import { ReactComponent } from "@webiny/icons/close.svg";
 import { Icon } from "./Icon.js";
 const meta = {
-  title: "Components/Icon",
-  component: Icon
+    title: "Components/Icon",
+    component: Icon
 };
-export default meta;
-export const Default = {
-  args: {
-    icon: /*#__PURE__*/React.createElement(XIcon, null),
-    label: "This is an icon",
-    size: "md",
-    color: "accent"
-  },
-  argTypes: {
-    size: {
-      control: "select",
-      options: ["xs", "sm", "md", "lg"]
+const Icon_stories = meta;
+const Default = {
+    args: {
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        label: "This is an icon",
+        size: "md",
+        color: "accent"
     },
-    color: {
-      control: "select",
-      options: ["accent", "neutral-light", "neutral-strong", "neutral-strong-transparent", "neutral-base", "neutral-negative", "inherit"]
+    argTypes: {
+        size: {
+            control: "select",
+            options: [
+                "xs",
+                "sm",
+                "md",
+                "lg"
+            ]
+        },
+        color: {
+            control: "select",
+            options: [
+                "accent",
+                "neutral-light",
+                "neutral-strong",
+                "neutral-strong-transparent",
+                "neutral-base",
+                "neutral-negative",
+                "inherit"
+            ]
+        }
     }
-  }
 };
-export const ColorInherit = {
-  decorators: [Story => /*#__PURE__*/React.createElement("div", {
-    className: "fill-success"
-  }, /*#__PURE__*/React.createElement(Story, null))],
-  args: {
-    ...Default.args,
-    color: "inherit"
-  }
+const ColorInherit = {
+    decorators: [
+        (Story)=>/*#__PURE__*/ react.createElement("div", {
+                className: "fill-success"
+            }, /*#__PURE__*/ react.createElement(Story, null))
+    ],
+    args: {
+        ...Default.args,
+        color: "inherit"
+    }
 };
-export const ColorAccent = {
-  args: {
-    ...Default.args,
-    color: "accent"
-  }
+const ColorAccent = {
+    args: {
+        ...Default.args,
+        color: "accent"
+    }
 };
-export const ColorNeutralLight = {
-  args: {
-    ...Default.args,
-    color: "neutral-light"
-  }
+const ColorNeutralLight = {
+    args: {
+        ...Default.args,
+        color: "neutral-light"
+    }
 };
-export const ColorNeutralStrong = {
-  args: {
-    ...Default.args,
-    color: "neutral-strong"
-  }
+const ColorNeutralStrong = {
+    args: {
+        ...Default.args,
+        color: "neutral-strong"
+    }
 };
-export const ColorNeutralStrongTransparent = {
-  decorators: [Story => /*#__PURE__*/React.createElement("div", {
-    className: "bg-neutral-disabled p-3xl rounded-md"
-  }, /*#__PURE__*/React.createElement(Story, null))],
-  args: {
-    ...Default.args,
-    color: "neutral-strong-transparent"
-  }
+const ColorNeutralStrongTransparent = {
+    decorators: [
+        (Story)=>/*#__PURE__*/ react.createElement("div", {
+                className: "bg-neutral-disabled p-3xl rounded-md"
+            }, /*#__PURE__*/ react.createElement(Story, null))
+    ],
+    args: {
+        ...Default.args,
+        color: "neutral-strong-transparent"
+    }
 };
-export const ColorNeutralBase = {
-  decorators: [Story => /*#__PURE__*/React.createElement("div", {
-    className: "bg-neutral-dark p-3xl rounded-md"
-  }, /*#__PURE__*/React.createElement(Story, null))],
-  args: {
-    ...Default.args,
-    color: "neutral-base"
-  }
+const ColorNeutralBase = {
+    decorators: [
+        (Story)=>/*#__PURE__*/ react.createElement("div", {
+                className: "bg-neutral-dark p-3xl rounded-md"
+            }, /*#__PURE__*/ react.createElement(Story, null))
+    ],
+    args: {
+        ...Default.args,
+        color: "neutral-base"
+    }
 };
-export const ColorNeutralNegative = {
-  decorators: [Story => /*#__PURE__*/React.createElement("div", {
-    className: "bg-neutral-dark p-3xl rounded-md"
-  }, /*#__PURE__*/React.createElement(Story, null))],
-  args: {
-    ...Default.args,
-    color: "neutral-negative"
-  }
+const ColorNeutralNegative = {
+    decorators: [
+        (Story)=>/*#__PURE__*/ react.createElement("div", {
+                className: "bg-neutral-dark p-3xl rounded-md"
+            }, /*#__PURE__*/ react.createElement(Story, null))
+    ],
+    args: {
+        ...Default.args,
+        color: "neutral-negative"
+    }
 };
-export const SizeXs = {
-  args: {
-    ...Default.args,
-    size: "xs"
-  }
+const SizeXs = {
+    args: {
+        ...Default.args,
+        size: "xs"
+    }
 };
-export const SizeSm = {
-  args: {
-    ...Default.args,
-    size: "sm"
-  }
+const SizeSm = {
+    args: {
+        ...Default.args,
+        size: "sm"
+    }
 };
-export const SizeMd = {
-  args: {
-    ...Default.args,
-    size: "md"
-  }
+const SizeMd = {
+    args: {
+        ...Default.args,
+        size: "md"
+    }
 };
-export const SizeLg = {
-  args: {
-    ...Default.args,
-    size: "lg"
-  }
+const SizeLg = {
+    args: {
+        ...Default.args,
+        size: "lg"
+    }
 };
-export const Documentation = {
-  args: {
-    icon: /*#__PURE__*/React.createElement(XIcon, null),
-    label: "Close icon",
-    size: "md",
-    color: "accent",
-    className: ""
-  },
-  argTypes: {
-    icon: {
-      description: "The SVG icon component to be rendered. Please refer to the example code for details."
-    },
-    label: {
-      description: "Accessible label for the icon (for screen readers)",
-      control: "text"
-    },
-    size: {
-      description: "The size of the icon",
-      control: "select",
-      options: ["xs", "sm", "md", "lg"]
-    },
-    color: {
-      description: "The color of the icon",
-      control: "select",
-      options: ["inherit", "accent", "neutral-base", "neutral-light", "neutral-strong", "neutral-strong-transparent", "neutral-negative"]
+const Documentation = {
+    args: {
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        label: "Close icon",
+        size: "md",
+        color: "accent",
+        className: ""
     },
-    className: {
-      description: "Additional CSS classes to apply to the icon. You can pass multiple classes, separated by commas or spaces.",
-      control: "text"
+    argTypes: {
+        icon: {
+            description: "The SVG icon component to be rendered. Please refer to the example code for details."
+        },
+        label: {
+            description: "Accessible label for the icon (for screen readers)",
+            control: "text"
+        },
+        size: {
+            description: "The size of the icon",
+            control: "select",
+            options: [
+                "xs",
+                "sm",
+                "md",
+                "lg"
+            ]
+        },
+        color: {
+            description: "The color of the icon",
+            control: "select",
+            options: [
+                "inherit",
+                "accent",
+                "neutral-base",
+                "neutral-light",
+                "neutral-strong",
+                "neutral-strong-transparent",
+                "neutral-negative"
+            ]
+        },
+        className: {
+            description: "Additional CSS classes to apply to the icon. You can pass multiple classes, separated by commas or spaces.",
+            control: "text"
+        }
     }
-  }
 };
+export default Icon_stories;
+export { ColorAccent, ColorInherit, ColorNeutralBase, ColorNeutralLight, ColorNeutralNegative, ColorNeutralStrong, ColorNeutralStrongTransparent, Default, Documentation, SizeLg, SizeMd, SizeSm, SizeXs };
 
 //# sourceMappingURL=Icon.stories.js.map

package/Icon/Icon.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","ReactComponent","XIcon","Icon","meta","title","component","Default","args","icon","createElement","label","size","color","argTypes","control","options","ColorInherit","decorators","Story","className","ColorAccent","ColorNeutralLight","ColorNeutralStrong","ColorNeutralStrongTransparent","ColorNeutralBase","ColorNeutralNegative","SizeXs","SizeSm","SizeMd","SizeLg","Documentation","description"],"sources":["Icon.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { ReactComponent as XIcon } from \"@webiny/icons/close.svg\";\nimport { Icon } from \"./Icon.js\";\n\nconst meta: Meta<typeof Icon> = {\n    title: \"Components/Icon\",\n    component: Icon\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Icon>;\n\nexport const Default: Story = {\n    args: {\n        icon: <XIcon />,\n        label: \"This is an icon\",\n        size: \"md\",\n        color: \"accent\"\n    },\n    argTypes: {\n        size: {\n            control: \"select\",\n            options: [\"xs\", \"sm\", \"md\", \"lg\"]\n        },\n        color: {\n            control: \"select\",\n            options: [\n                \"accent\",\n                \"neutral-light\",\n                \"neutral-strong\",\n                \"neutral-strong-transparent\",\n                \"neutral-base\",\n                \"neutral-negative\",\n                \"inherit\"\n            ]\n        }\n    }\n};\n\nexport const ColorInherit: Story = {\n    decorators: [\n        Story => (\n            <div className=\"fill-success\">\n                <Story />\n            </div>\n        )\n    ],\n    args: {\n        ...Default.args,\n        color: \"inherit\"\n    }\n};\n\nexport const ColorAccent: Story = {\n    args: {\n        ...Default.args,\n        color: \"accent\"\n    }\n};\n\nexport const ColorNeutralLight: Story = {\n    args: {\n        ...Default.args,\n        color: \"neutral-light\"\n    }\n};\n\nexport const ColorNeutralStrong: Story = {\n    args: {\n        ...Default.args,\n        color: \"neutral-strong\"\n    }\n};\n\nexport const ColorNeutralStrongTransparent: Story = {\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-disabled p-3xl rounded-md\">\n                <Story />\n            </div>\n        )\n    ],\n    args: {\n        ...Default.args,\n        color: \"neutral-strong-transparent\"\n    }\n};\n\nexport const ColorNeutralBase: Story = {\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark p-3xl rounded-md\">\n                <Story />\n            </div>\n        )\n    ],\n    args: {\n        ...Default.args,\n        color: \"neutral-base\"\n    }\n};\n\nexport const ColorNeutralNegative: Story = {\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark p-3xl rounded-md\">\n                <Story />\n            </div>\n        )\n    ],\n    args: {\n        ...Default.args,\n        color: \"neutral-negative\"\n    }\n};\n\nexport const SizeXs: Story = {\n    args: {\n        ...Default.args,\n        size: \"xs\"\n    }\n};\n\nexport const SizeSm: Story = {\n    args: {\n        ...Default.args,\n        size: \"sm\"\n    }\n};\n\nexport const SizeMd: Story = {\n    args: {\n        ...Default.args,\n        size: \"md\"\n    }\n};\n\nexport const SizeLg: Story = {\n    args: {\n        ...Default.args,\n        size: \"lg\"\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        icon: <XIcon />,\n        label: \"Close icon\",\n        size: \"md\",\n        color: \"accent\",\n        className: \"\"\n    },\n    argTypes: {\n        icon: {\n            description:\n                \"The SVG icon component to be rendered. Please refer to the example code for details.\"\n        },\n        label: {\n            description: \"Accessible label for the icon (for screen readers)\",\n            control: \"text\"\n        },\n        size: {\n            description: \"The size of the icon\",\n            control: \"select\",\n            options: [\"xs\", \"sm\", \"md\", \"lg\"]\n        },\n        color: {\n            description: \"The color of the icon\",\n            control: \"select\",\n            options: [\n                \"inherit\",\n                \"accent\",\n                \"neutral-base\",\n                \"neutral-light\",\n                \"neutral-strong\",\n                \"neutral-strong-transparent\",\n                \"neutral-negative\"\n            ]\n        },\n        className: {\n            description:\n                \"Additional CSS classes to apply to the icon. You can pass multiple classes, separated by commas or spaces.\",\n            control: \"text\"\n        }\n    }\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Icon/Icon.stories.js","sources":["../../src/Icon/Icon.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { ReactComponent as XIcon } from \"@webiny/icons/close.svg\";\nimport { Icon } from \"./Icon.js\";\n\nconst meta: Meta<typeof Icon> = {\n    title: \"Components/Icon\",\n    component: Icon\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Icon>;\n\nexport const Default: Story = {\n    args: {\n        icon: <XIcon />,\n        label: \"This is an icon\",\n        size: \"md\",\n        color: \"accent\"\n    },\n    argTypes: {\n        size: {\n            control: \"select\",\n            options: [\"xs\", \"sm\", \"md\", \"lg\"]\n        },\n        color: {\n            control: \"select\",\n            options: [\n                \"accent\",\n                \"neutral-light\",\n                \"neutral-strong\",\n                \"neutral-strong-transparent\",\n                \"neutral-base\",\n                \"neutral-negative\",\n                \"inherit\"\n            ]\n        }\n    }\n};\n\nexport const ColorInherit: Story = {\n    decorators: [\n        Story => (\n            <div className=\"fill-success\">\n                <Story />\n            </div>\n        )\n    ],\n    args: {\n        ...Default.args,\n        color: \"inherit\"\n    }\n};\n\nexport const ColorAccent: Story = {\n    args: {\n        ...Default.args,\n        color: \"accent\"\n    }\n};\n\nexport const ColorNeutralLight: Story = {\n    args: {\n        ...Default.args,\n        color: \"neutral-light\"\n    }\n};\n\nexport const ColorNeutralStrong: Story = {\n    args: {\n        ...Default.args,\n        color: \"neutral-strong\"\n    }\n};\n\nexport const ColorNeutralStrongTransparent: Story = {\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-disabled p-3xl rounded-md\">\n                <Story />\n            </div>\n        )\n    ],\n    args: {\n        ...Default.args,\n        color: \"neutral-strong-transparent\"\n    }\n};\n\nexport const ColorNeutralBase: Story = {\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark p-3xl rounded-md\">\n                <Story />\n            </div>\n        )\n    ],\n    args: {\n        ...Default.args,\n        color: \"neutral-base\"\n    }\n};\n\nexport const ColorNeutralNegative: Story = {\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark p-3xl rounded-md\">\n                <Story />\n            </div>\n        )\n    ],\n    args: {\n        ...Default.args,\n        color: \"neutral-negative\"\n    }\n};\n\nexport const SizeXs: Story = {\n    args: {\n        ...Default.args,\n        size: \"xs\"\n    }\n};\n\nexport const SizeSm: Story = {\n    args: {\n        ...Default.args,\n        size: \"sm\"\n    }\n};\n\nexport const SizeMd: Story = {\n    args: {\n        ...Default.args,\n        size: \"md\"\n    }\n};\n\nexport const SizeLg: Story = {\n    args: {\n        ...Default.args,\n        size: \"lg\"\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        icon: <XIcon />,\n        label: \"Close icon\",\n        size: \"md\",\n        color: \"accent\",\n        className: \"\"\n    },\n    argTypes: {\n        icon: {\n            description:\n                \"The SVG icon component to be rendered. Please refer to the example code for details.\"\n        },\n        label: {\n            description: \"Accessible label for the icon (for screen readers)\",\n            control: \"text\"\n        },\n        size: {\n            description: \"The size of the icon\",\n            control: \"select\",\n            options: [\"xs\", \"sm\", \"md\", \"lg\"]\n        },\n        color: {\n            description: \"The color of the icon\",\n            control: \"select\",\n            options: [\n                \"inherit\",\n                \"accent\",\n                \"neutral-base\",\n                \"neutral-light\",\n                \"neutral-strong\",\n                \"neutral-strong-transparent\",\n                \"neutral-negative\"\n            ]\n        },\n        className: {\n            description:\n                \"Additional CSS classes to apply to the icon. You can pass multiple classes, separated by commas or spaces.\",\n            control: \"text\"\n        }\n    }\n};\n"],"names":["meta","Icon","Default","XIcon","ColorInherit","Story","ColorAccent","ColorNeutralLight","ColorNeutralStrong","ColorNeutralStrongTransparent","ColorNeutralBase","ColorNeutralNegative","SizeXs","SizeSm","SizeMd","SizeLg","Documentation"],"mappings":";;;AAKA,MAAMA,OAA0B;IAC5B,OAAO;IACP,WAAWC;AACf;AAEA,qBAAeD;AAIR,MAAME,UAAiB;IAC1B,MAAM;QACF,MAAM,WAAN,GAAM,oBAACC,gBAAKA;QACZ,OAAO;QACP,MAAM;QACN,OAAO;IACX;IACA,UAAU;QACN,MAAM;YACF,SAAS;YACT,SAAS;gBAAC;gBAAM;gBAAM;gBAAM;aAAK;QACrC;QACA,OAAO;YACH,SAAS;YACT,SAAS;gBACL;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;aACH;QACL;IACJ;AACJ;AAEO,MAAMC,eAAsB;IAC/B,YAAY;QACRC,CAAAA,QAAAA,WAAAA,GACI,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;IACD,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,OAAO;IACX;AACJ;AAEO,MAAMI,cAAqB;IAC9B,MAAM;QACF,GAAGJ,QAAQ,IAAI;QACf,OAAO;IACX;AACJ;AAEO,MAAMK,oBAA2B;IACpC,MAAM;QACF,GAAGL,QAAQ,IAAI;QACf,OAAO;IACX;AACJ;AAEO,MAAMM,qBAA4B;IACrC,MAAM;QACF,GAAGN,QAAQ,IAAI;QACf,OAAO;IACX;AACJ;AAEO,MAAMO,gCAAuC;IAChD,YAAY;QACRJ,CAAAA,QAAAA,WAAAA,GACI,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;IACD,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,OAAO;IACX;AACJ;AAEO,MAAMQ,mBAA0B;IACnC,YAAY;QACRL,CAAAA,QAAAA,WAAAA,GACI,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;IACD,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,OAAO;IACX;AACJ;AAEO,MAAMS,uBAA8B;IACvC,YAAY;QACRN,CAAAA,QAAAA,WAAAA,GACI,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;IACD,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,OAAO;IACX;AACJ;AAEO,MAAMU,SAAgB;IACzB,MAAM;QACF,GAAGV,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMW,SAAgB;IACzB,MAAM;QACF,GAAGX,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMY,SAAgB;IACzB,MAAM;QACF,GAAGZ,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMa,SAAgB;IACzB,MAAM;QACF,GAAGb,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMc,gBAAuB;IAChC,MAAM;QACF,MAAM,WAAN,GAAM,oBAACb,gBAAKA;QACZ,OAAO;QACP,MAAM;QACN,OAAO;QACP,WAAW;IACf;IACA,UAAU;QACN,MAAM;YACF,aACI;QACR;QACA,OAAO;YACH,aAAa;YACb,SAAS;QACb;QACA,MAAM;YACF,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAM;gBAAM;gBAAM;aAAK;QACrC;QACA,OAAO;YACH,aAAa;YACb,SAAS;YACT,SAAS;gBACL;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;aACH;QACL;QACA,WAAW;YACP,aACI;YACJ,SAAS;QACb;IACJ;AACJ"}

package/Icon/index.js

@@ -1,3 +1 @@
 export * from "./Icon.js";
-
-//# sourceMappingURL=index.js.map

package/IconPicker/IconPicker.d.ts

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

package/IconPicker/IconPicker.js

@@ -1,44 +1,35 @@
-import React, { useMemo } from "react";
+import react, { useMemo } from "react";
 import { makeDecoratable } from "../utils.js";
 import { IconPickerPrimitive } from "./primitives/index.js";
 import { FormComponentDescription, FormComponentErrorMessage, FormComponentLabel, FormComponentNote } from "../FormComponent/index.js";
-const DecoratableIconPicker = ({
-  label,
-  description,
-  note,
-  hint,
-  required,
-  disabled,
-  validation,
-  ...props
-}) => {
-  const {
-    isValid: validationIsValid,
-    message: validationMessage
-  } = validation || {};
-  const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: "w-full"
-  }, /*#__PURE__*/React.createElement(FormComponentLabel, {
-    text: label,
-    hint: hint,
-    required: required,
-    disabled: disabled,
-    invalid: invalid
-  }), /*#__PURE__*/React.createElement(FormComponentDescription, {
-    text: description,
-    disabled: disabled
-  }), /*#__PURE__*/React.createElement(IconPickerPrimitive, Object.assign({}, props, {
-    disabled: disabled,
-    invalid: invalid
-  })), /*#__PURE__*/React.createElement(FormComponentErrorMessage, {
-    text: validationMessage,
-    invalid: invalid,
-    disabled: disabled
-  }), /*#__PURE__*/React.createElement(FormComponentNote, {
-    text: note,
-    disabled: disabled
-  }));
+const DecoratableIconPicker = ({ label, description, note, hint, required, disabled, validation, ...props })=>{
+    const { isValid: validationIsValid, message: validationMessage } = validation || {};
+    const invalid = useMemo(()=>false === validationIsValid, [
+        validationIsValid
+    ]);
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "w-full"
+    }, /*#__PURE__*/ react.createElement(FormComponentLabel, {
+        text: label,
+        hint: hint,
+        required: required,
+        disabled: disabled,
+        invalid: invalid
+    }), /*#__PURE__*/ react.createElement(FormComponentDescription, {
+        text: description,
+        disabled: disabled
+    }), /*#__PURE__*/ react.createElement(IconPickerPrimitive, {
+        ...props,
+        disabled: disabled,
+        invalid: invalid
+    }), /*#__PURE__*/ react.createElement(FormComponentErrorMessage, {
+        text: validationMessage,
+        invalid: invalid,
+        disabled: disabled
+    }), /*#__PURE__*/ react.createElement(FormComponentNote, {
+        text: note,
+        disabled: disabled
+    }));
 };
 const IconPicker = makeDecoratable("IconPicker", DecoratableIconPicker);
 export { IconPicker };