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

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-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"],"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,21 @@ 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, required, disabled, validation, ...props }: IconPickerProps) => React.JSX.Element) & {
-    original: ({ label, description, note, required, disabled, validation, ...props }: IconPickerProps) => React.JSX.Element;
+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;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ label, description, note, required, disabled, validation, ...props }: IconPickerProps) => React.JSX.Element) & {
-        original: ({ label, description, note, required, disabled, validation, ...props }: IconPickerProps) => React.JSX.Element;
+    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;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ label, description, note, required, disabled, validation, ...props }: IconPickerProps) => React.JSX.Element) & {
-        original: ({ label, description, note, required, disabled, validation, ...props }: IconPickerProps) => React.JSX.Element;
+    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;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/IconPicker/IconPicker.js

@@ -1,42 +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,
-  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,
-    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 };

package/IconPicker/IconPicker.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useMemo","makeDecoratable","IconPickerPrimitive","FormComponentDescription","FormComponentErrorMessage","FormComponentLabel","FormComponentNote","DecoratableIconPicker","label","description","note","required","disabled","validation","props","isValid","validationIsValid","message","validationMessage","invalid","createElement","className","text","Object","assign","IconPicker"],"sources":["IconPicker.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { makeDecoratable } from \"~/utils.js\";\nimport type { IconPickerPrimitiveProps } from \"./primitives/index.js\";\nimport { IconPickerPrimitive } from \"./primitives/index.js\";\nimport type { FormComponentProps } from \"~/FormComponent/index.js\";\nimport {\n    FormComponentDescription,\n    FormComponentErrorMessage,\n    FormComponentLabel,\n    FormComponentNote\n} from \"~/FormComponent/index.js\";\n\ntype IconPickerProps = IconPickerPrimitiveProps & FormComponentProps;\n\nconst DecoratableIconPicker = ({\n    label,\n    description,\n    note,\n    required,\n    disabled,\n    validation,\n    ...props\n}: IconPickerProps) => {\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n    const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);\n\n    return (\n        <div className={\"w-full\"}>\n            <FormComponentLabel\n                text={label}\n                required={required}\n                disabled={disabled}\n                invalid={invalid}\n            />\n            <FormComponentDescription text={description} disabled={disabled} />\n            <IconPickerPrimitive {...props} disabled={disabled} invalid={invalid} />\n            <FormComponentErrorMessage\n                text={validationMessage}\n                invalid={invalid}\n                disabled={disabled}\n            />\n            <FormComponentNote text={note} disabled={disabled} />\n        </div>\n    );\n};\nconst IconPicker = makeDecoratable(\"IconPicker\", DecoratableIconPicker);\n\nexport { IconPicker, type IconPickerProps };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,eAAe;AAExB,SAASC,mBAAmB;AAE5B,SACIC,wBAAwB,EACxBC,yBAAyB,EACzBC,kBAAkB,EAClBC,iBAAiB;AAKrB,MAAMC,qBAAqB,GAAGA,CAAC;EAC3BC,KAAK;EACLC,WAAW;EACXC,IAAI;EACJC,QAAQ;EACRC,QAAQ;EACRC,UAAU;EACV,GAAGC;AACU,CAAC,KAAK;EACnB,MAAM;IAAEC,OAAO,EAAEC,iBAAiB;IAAEC,OAAO,EAAEC;EAAkB,CAAC,GAAGL,UAAU,IAAI,CAAC,CAAC;EACnF,MAAMM,OAAO,GAAGnB,OAAO,CAAC,MAAMgB,iBAAiB,KAAK,KAAK,EAAE,CAACA,iBAAiB,CAAC,CAAC;EAE/E,oBACIjB,KAAA,CAAAqB,aAAA;IAAKC,SAAS,EAAE;EAAS,gBACrBtB,KAAA,CAAAqB,aAAA,CAACf,kBAAkB;IACfiB,IAAI,EAAEd,KAAM;IACZG,QAAQ,EAAEA,QAAS;IACnBC,QAAQ,EAAEA,QAAS;IACnBO,OAAO,EAAEA;EAAQ,CACpB,CAAC,eACFpB,KAAA,CAAAqB,aAAA,CAACjB,wBAAwB;IAACmB,IAAI,EAAEb,WAAY;IAACG,QAAQ,EAAEA;EAAS,CAAE,CAAC,eACnEb,KAAA,CAAAqB,aAAA,CAAClB,mBAAmB,EAAAqB,MAAA,CAAAC,MAAA,KAAKV,KAAK;IAAEF,QAAQ,EAAEA,QAAS;IAACO,OAAO,EAAEA;EAAQ,EAAE,CAAC,eACxEpB,KAAA,CAAAqB,aAAA,CAAChB,yBAAyB;IACtBkB,IAAI,EAAEJ,iBAAkB;IACxBC,OAAO,EAAEA,OAAQ;IACjBP,QAAQ,EAAEA;EAAS,CACtB,CAAC,eACFb,KAAA,CAAAqB,aAAA,CAACd,iBAAiB;IAACgB,IAAI,EAAEZ,IAAK;IAACE,QAAQ,EAAEA;EAAS,CAAE,CACnD,CAAC;AAEd,CAAC;AACD,MAAMa,UAAU,GAAGxB,eAAe,CAAC,YAAY,EAAEM,qBAAqB,CAAC;AAEvE,SAASkB,UAAU","ignoreList":[]}
+{"version":3,"file":"IconPicker/IconPicker.js","sources":["../../src/IconPicker/IconPicker.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { makeDecoratable } from \"~/utils.js\";\nimport type { IconPickerPrimitiveProps } from \"./primitives/index.js\";\nimport { IconPickerPrimitive } from \"./primitives/index.js\";\nimport type { FormComponentProps } from \"~/FormComponent/index.js\";\nimport {\n    FormComponentDescription,\n    FormComponentErrorMessage,\n    FormComponentLabel,\n    FormComponentNote\n} from \"~/FormComponent/index.js\";\n\ntype IconPickerProps = IconPickerPrimitiveProps & FormComponentProps;\n\nconst DecoratableIconPicker = ({\n    label,\n    description,\n    note,\n    hint,\n    required,\n    disabled,\n    validation,\n    ...props\n}: IconPickerProps) => {\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n    const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);\n\n    return (\n        <div className={\"w-full\"}>\n            <FormComponentLabel\n                text={label}\n                hint={hint}\n                required={required}\n                disabled={disabled}\n                invalid={invalid}\n            />\n            <FormComponentDescription text={description} disabled={disabled} />\n            <IconPickerPrimitive {...props} disabled={disabled} invalid={invalid} />\n            <FormComponentErrorMessage\n                text={validationMessage}\n                invalid={invalid}\n                disabled={disabled}\n            />\n            <FormComponentNote text={note} disabled={disabled} />\n        </div>\n    );\n};\nconst IconPicker = makeDecoratable(\"IconPicker\", DecoratableIconPicker);\n\nexport { IconPicker, type IconPickerProps };\n"],"names":["DecoratableIconPicker","label","description","note","hint","required","disabled","validation","props","validationIsValid","validationMessage","invalid","useMemo","FormComponentLabel","FormComponentDescription","IconPickerPrimitive","FormComponentErrorMessage","FormComponentNote","IconPicker","makeDecoratable"],"mappings":";;;;AAcA,MAAMA,wBAAwB,CAAC,EAC3BC,KAAK,EACLC,WAAW,EACXC,IAAI,EACJC,IAAI,EACJC,QAAQ,EACRC,QAAQ,EACRC,UAAU,EACV,GAAGC,OACW;IACd,MAAM,EAAE,SAASC,iBAAiB,EAAE,SAASC,iBAAiB,EAAE,GAAGH,cAAc,CAAC;IAClF,MAAMI,UAAUC,QAAQ,IAAMH,AAAsB,UAAtBA,mBAA6B;QAACA;KAAkB;IAE9E,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACI,oBAAkBA;QACf,MAAMZ;QACN,MAAMG;QACN,UAAUC;QACV,UAAUC;QACV,SAASK;sBAEb,oBAACG,0BAAwBA;QAAC,MAAMZ;QAAa,UAAUI;sBACvD,oBAACS,qBAAmBA;QAAE,GAAGP,KAAK;QAAE,UAAUF;QAAU,SAASK;sBAC7D,oBAACK,2BAAyBA;QACtB,MAAMN;QACN,SAASC;QACT,UAAUL;sBAEd,oBAACW,mBAAiBA;QAAC,MAAMd;QAAM,UAAUG;;AAGrD;AACA,MAAMY,aAAaC,gBAAgB,cAAcnB"}

package/IconPicker/IconPicker.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';
+import { Canvas, Meta, Controls } from "@storybook/addon-docs/blocks";
 
-import * as IconPickerStories from './IconPicker.stories';
+import * as IconPickerStories from "./IconPicker.stories";
 
 <Meta of={IconPickerStories} />
 
@@ -20,8 +20,8 @@ import { fas } from "@fortawesome/free-solid-svg-icons";
 library.add(fas as any);
 
 const IconPickerExample = () => {
-    const [selectedIcon, setSelectedIcon] = useState("");
-    const [validation, setValidation] = useState({ isValid: true, message: "" });
+const [selectedIcon, setSelectedIcon] = useState("");
+const [validation, setValidation] = useState({ isValid: true, message: "" });
 
     const handleChange = (newIcon: string) => {
         setSelectedIcon(newIcon);
@@ -52,22 +52,23 @@ const IconPickerExample = () => {
             validation={validation}
         />
     );
+
 };
 
 export default IconPickerExample;
 
 ` } }
-        additionalActions={[
-            {
-                title: 'Open in GitHub',
-                onClick: () => {
-                    window.open(
-                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/IconPicker/IconPicker.tsx',
-                        '_blank'
-                    );
-                },
-            }
-        ]}
+additionalActions={[
+{
+title: 'Open in GitHub',
+onClick: () => {
+window.open(
+'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/IconPicker/IconPicker.tsx',
+'_blank'
+);
+},
+}
+]}
 />
 
 <Controls of={IconPickerStories.Documentation} exclude={"onChange"} />
@@ -82,38 +83,39 @@ import { fas } from "@fortawesome/free-solid-svg-icons";
 library.add(fas as any);
 
 const IconPickerExample = () => {
-    const [selectedIcon, setSelectedIcon] = useState("");
-    const [validation, setValidation] = useState({ isValid: true, message: "" });
-
-    const handleChange = (newIcon: string) => {
-        setSelectedIcon(newIcon);
-
-        if (!newIcon && true) { // true represents required field
-            setValidation({ isValid: false, message: "Please select an icon" });
-        } else {
-            setValidation({ isValid: true, message: "" });
-        }
-    };
-
-    return (
-        <IconPicker
-            label="Select an Icon"
-            description="Choose an icon for your button"
-            note="Note: The selected icon will be displayed on your button"
-            required={true}
-            icons={[
-                { prefix: "fas", name: "trash-restore-alt" },
-                { prefix: "fas", name: "file-pen" },
-                { prefix: "fas", name: "receipt" },
-                { prefix: "fas", name: "user-circle" },
-                { prefix: "fas", name: "circle-user" }
-                // Add more icons as needed
-            ]}
-            value={selectedIcon}
-            onChange={handleChange}
-            validation={validation}
-        />
-    );
+  const [selectedIcon, setSelectedIcon] = useState("");
+  const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+  const handleChange = (newIcon: string) => {
+    setSelectedIcon(newIcon);
+
+    if (!newIcon && true) {
+      // true represents required field
+      setValidation({ isValid: false, message: "Please select an icon" });
+    } else {
+      setValidation({ isValid: true, message: "" });
+    }
+  };
+
+  return (
+    <IconPicker
+      label="Select an Icon"
+      description="Choose an icon for your button"
+      note="Note: The selected icon will be displayed on your button"
+      required={true}
+      icons={[
+        { prefix: "fas", name: "trash-restore-alt" },
+        { prefix: "fas", name: "file-pen" },
+        { prefix: "fas", name: "receipt" },
+        { prefix: "fas", name: "user-circle" },
+        { prefix: "fas", name: "circle-user" }
+        // Add more icons as needed
+      ]}
+      value={selectedIcon}
+      onChange={handleChange}
+      validation={validation}
+    />
+  );
 };
 
 export default IconPickerExample;
@@ -146,29 +148,29 @@ const definitions = (library as any).definitions;
 const allIcons: IconPickerIconDto[] = [];
 
 Object.keys(definitions)
-    .filter((pack): pack is IconPrefix => validPrefixes.includes(pack as IconPrefix))
-    .forEach((prefix) => {
-        const icons = definitions[prefix];
-        Object.keys(icons).forEach((icon) => {
-            allIcons.push({
-                prefix,
-                name: icon as IconName
-            });
-        });
+  .filter((pack): pack is IconPrefix => validPrefixes.includes(pack as IconPrefix))
+  .forEach(prefix => {
+    const icons = definitions[prefix];
+    Object.keys(icons).forEach(icon => {
+      allIcons.push({
+        prefix,
+        name: icon as IconName
+      });
     });
+  });
 ```
 
 You can then pass the `allIcons` array to the `IconPicker` component:
 
 ```tsx
 <IconPicker
-    label="Select an Icon"
-    description="Choose an icon for your button"
-    note="Note: The selected icon will be displayed on your button"
-    required={true}
-    icons={allIcons}
-    value={selectedIcon}
-    onChange={handleChange}
-    validation={validation}
+  label="Select an Icon"
+  description="Choose an icon for your button"
+  note="Note: The selected icon will be displayed on your button"
+  required={true}
+  icons={allIcons}
+  value={selectedIcon}
+  onChange={handleChange}
+  validation={validation}
 />
 ```