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

package/FormComponent/Note.d.ts

@@ -7,21 +7,22 @@ declare const formComponentNoteVariants: (props?: ({
 type FormComponentNoteProps = TextProps & VariantProps<typeof formComponentNoteVariants> & {
     text?: React.ReactNode;
 };
-declare const FormComponentNote: (({ disabled, text, className, ...props }: FormComponentNoteProps) => React.JSX.Element | null) & {
-    original: ({ disabled, text, className, ...props }: FormComponentNoteProps) => React.JSX.Element | null;
+declare const DecoratableFormComponentNote: ({ disabled, text, className, ...props }: FormComponentNoteProps) => React.JSX.Element | null;
+declare const FormComponentNote: typeof DecoratableFormComponentNote & {
+    original: typeof DecoratableFormComponentNote;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ disabled, text, className, ...props }: FormComponentNoteProps) => React.JSX.Element | null) & {
-        original: ({ disabled, text, className, ...props }: FormComponentNoteProps) => React.JSX.Element | null;
+    original: typeof DecoratableFormComponentNote & {
+        original: typeof DecoratableFormComponentNote;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<(({ disabled, text, className, ...props }: FormComponentNoteProps) => React.JSX.Element | null) & {
-        original: ({ disabled, text, className, ...props }: FormComponentNoteProps) => React.JSX.Element | null;
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<typeof DecoratableFormComponentNote & {
+        original: typeof DecoratableFormComponentNote;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/Grid/Grid.d.ts

@@ -1,72 +1,74 @@
 import React from "react";
 import { type VariantProps } from "../utils.js";
 declare const columnVariants: (props?: ({
-    span?: 1 | 2 | 4 | 3 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "auto" | null | undefined;
-    offset?: 1 | 2 | 4 | 3 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | null | undefined;
-    align?: "bottom" | "top" | "middle" | null | undefined;
+    span?: "auto" | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | null | undefined;
+    offset?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | null | undefined;
+    align?: "bottom" | "middle" | "top" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface ColumnProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof columnVariants> {
     children?: React.ReactNode;
 }
-declare const Column: (({ span, align, children, className, offset, ...props }: ColumnProps) => React.JSX.Element) & {
-    original: ({ span, align, children, className, offset, ...props }: ColumnProps) => React.JSX.Element;
+declare const ColumnBase: ({ span, align, children, className, offset, ...props }: ColumnProps) => React.JSX.Element;
+declare const Column: typeof ColumnBase & {
+    original: typeof ColumnBase;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ span, align, children, className, offset, ...props }: ColumnProps) => React.JSX.Element) & {
-        original: ({ span, align, children, className, offset, ...props }: ColumnProps) => React.JSX.Element;
+    original: typeof ColumnBase & {
+        original: typeof ColumnBase;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<(({ span, align, children, className, offset, ...props }: ColumnProps) => React.JSX.Element) & {
-        original: ({ span, align, children, className, offset, ...props }: ColumnProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<typeof ColumnBase & {
+        original: typeof ColumnBase;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;
 };
 declare const gridVariants: (props?: ({
-    gap?: "none" | "small" | "compact" | "micro" | "comfortable" | "spacious" | null | undefined;
+    gap?: "comfortable" | "compact" | "micro" | "none" | "small" | "spacious" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface GridProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof gridVariants> {
-    children: null | React.ReactElement<ColumnProps, typeof Column> | Array<React.ReactElement<ColumnProps, typeof Column>>;
+    children: null | React.ReactElement<ColumnProps, typeof Column> | Array<React.ReactElement<ColumnProps, typeof Column> | null>;
 }
-declare const Grid: (({ gap, children, className, ...props }: GridProps) => React.JSX.Element) & {
-    original: ({ gap, children, className, ...props }: GridProps) => React.JSX.Element;
+declare const GridBase: ({ gap, children, className, ...props }: GridProps) => React.JSX.Element;
+declare const Grid: typeof GridBase & {
+    original: typeof GridBase;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ gap, children, className, ...props }: GridProps) => React.JSX.Element) & {
-        original: ({ gap, children, className, ...props }: GridProps) => React.JSX.Element;
+    original: typeof GridBase & {
+        original: typeof GridBase;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<(({ gap, children, className, ...props }: GridProps) => React.JSX.Element) & {
-        original: ({ gap, children, className, ...props }: GridProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<typeof GridBase & {
+        original: typeof GridBase;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;
 } & {
-    Column: (({ span, align, children, className, offset, ...props }: ColumnProps) => React.JSX.Element) & {
-        original: ({ span, align, children, className, offset, ...props }: ColumnProps) => React.JSX.Element;
+    Column: typeof ColumnBase & {
+        original: typeof ColumnBase;
         originalName: string;
         displayName: string;
     } & {
-        original: (({ span, align, children, className, offset, ...props }: ColumnProps) => React.JSX.Element) & {
-            original: ({ span, align, children, className, offset, ...props }: ColumnProps) => React.JSX.Element;
+        original: typeof ColumnBase & {
+            original: typeof ColumnBase;
             originalName: string;
             displayName: string;
         };
         originalName: string;
         displayName: string;
     } & {
-        createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<(({ span, align, children, className, offset, ...props }: ColumnProps) => React.JSX.Element) & {
-            original: ({ span, align, children, className, offset, ...props }: ColumnProps) => React.JSX.Element;
+        createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<typeof ColumnBase & {
+            original: typeof ColumnBase;
             originalName: string;
             displayName: string;
         }>) => (props: unknown) => React.JSX.Element;

package/Grid/Grid.js.map

@@ -1 +1 @@
-{"version":3,"file":"Grid/Grid.js","sources":["../../src/Grid/Grid.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, cva, withStaticProps, makeDecoratable, type VariantProps } from \"~/utils.js\";\n\nconst columnVariants = cva(\"\", {\n    variants: {\n        span: {\n            auto: \"col-auto\",\n            1: \"col-span-1\",\n            2: \"col-span-2\",\n            3: \"col-span-3\",\n            4: \"col-span-4\",\n            5: \"col-span-5\",\n            6: \"col-span-6\",\n            7: \"col-span-7\",\n            8: \"col-span-8\",\n            9: \"col-span-9\",\n            10: \"col-span-10\",\n            11: \"col-span-11\",\n            12: \"col-span-12\"\n        },\n        offset: {\n            1: \"col-start-2\",\n            2: \"col-start-3\",\n            3: \"col-start-4\",\n            4: \"col-start-5\",\n            5: \"col-start-6\",\n            6: \"col-start-7\",\n            7: \"col-start-8\",\n            8: \"col-start-9\",\n            9: \"col-start-10\",\n            10: \"col-start-11\",\n            11: \"col-start-12\"\n        },\n        align: {\n            top: \"self-start\",\n            middle: \"self-center\",\n            bottom: \"self-end\"\n        }\n    },\n    defaultVariants: {\n        span: \"auto\"\n    }\n});\n\ninterface ColumnProps\n    extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof columnVariants> {\n    children?: React.ReactNode;\n}\n\nconst ColumnBase = ({ span, align, children, className, offset, ...props }: ColumnProps) => {\n    return (\n        <div {...props} className={cn(columnVariants({ span, offset, align }), className)}>\n            {children}\n        </div>\n    );\n};\n\nconst Column = makeDecoratable(\"Column\", ColumnBase);\n\nconst gridVariants = cva(\"grid\", {\n    variants: {\n        gap: {\n            none: \"gap-0\",\n            micro: \"gap-xs\",\n            small: \"gap-sm\",\n            compact: \"gap-md\",\n            comfortable: \"gap-lg\",\n            spacious: \"gap-xl\"\n        }\n    },\n    defaultVariants: {\n        gap: \"comfortable\"\n    }\n});\n\ninterface GridProps\n    extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof gridVariants> {\n    children:\n        | null\n        | React.ReactElement<ColumnProps, typeof Column>\n        | Array<React.ReactElement<ColumnProps, typeof Column>>;\n}\n\nconst GridBase = ({ gap, children, className, ...props }: GridProps) => {\n    return (\n        <div {...props} className={cn(\"grid-cols-12\", gridVariants({ gap }), className)}>\n            {children}\n        </div>\n    );\n};\n\nconst DecoratableGrid = makeDecoratable(\"Grid\", GridBase);\n\nconst Grid = withStaticProps(DecoratableGrid, { Column });\n\nexport { Grid, type GridProps, type ColumnProps };\n"],"names":["columnVariants","cva","ColumnBase","span","align","children","className","offset","props","cn","Column","makeDecoratable","gridVariants","GridBase","gap","DecoratableGrid","Grid","withStaticProps"],"mappings":";;AAGA,MAAMA,iBAAiBC,IAAI,IAAI;IAC3B,UAAU;QACN,MAAM;YACF,MAAM;YACN,GAAG;YACH,GAAG;YACH,GAAG;YACH,GAAG;YACH,GAAG;YACH,GAAG;YACH,GAAG;YACH,GAAG;YACH,GAAG;YACH,IAAI;YACJ,IAAI;YACJ,IAAI;QACR;QACA,QAAQ;YACJ,GAAG;YACH,GAAG;YACH,GAAG;YACH,GAAG;YACH,GAAG;YACH,GAAG;YACH,GAAG;YACH,GAAG;YACH,GAAG;YACH,IAAI;YACJ,IAAI;QACR;QACA,OAAO;YACH,KAAK;YACL,QAAQ;YACR,QAAQ;QACZ;IACJ;IACA,iBAAiB;QACb,MAAM;IACV;AACJ;AAOA,MAAMC,aAAa,CAAC,EAAEC,IAAI,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,MAAM,EAAE,GAAGC,OAAoB,GAC5E,WAAP,GACI,oBAAC;QAAK,GAAGA,KAAK;QAAE,WAAWC,GAAGT,eAAe;YAAEG;YAAMI;YAAQH;QAAM,IAAIE;OAClED;AAKb,MAAMK,SAASC,gBAAgB,UAAUT;AAEzC,MAAMU,eAAeX,IAAI,QAAQ;IAC7B,UAAU;QACN,KAAK;YACD,MAAM;YACN,OAAO;YACP,OAAO;YACP,SAAS;YACT,aAAa;YACb,UAAU;QACd;IACJ;IACA,iBAAiB;QACb,KAAK;IACT;AACJ;AAUA,MAAMY,WAAW,CAAC,EAAEC,GAAG,EAAET,QAAQ,EAAEC,SAAS,EAAE,GAAGE,OAAkB,GACxD,WAAP,GACI,oBAAC;QAAK,GAAGA,KAAK;QAAE,WAAWC,GAAG,gBAAgBG,aAAa;YAAEE;QAAI,IAAIR;OAChED;AAKb,MAAMU,kBAAkBJ,gBAAgB,QAAQE;AAEhD,MAAMG,OAAOC,gBAAgBF,iBAAiB;IAAEL,QAAAA;AAAO"}
+{"version":3,"file":"Grid/Grid.js","sources":["../../src/Grid/Grid.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, cva, withStaticProps, makeDecoratable, type VariantProps } from \"~/utils.js\";\n\nconst columnVariants = cva(\"\", {\n    variants: {\n        span: {\n            auto: \"col-auto\",\n            1: \"col-span-1\",\n            2: \"col-span-2\",\n            3: \"col-span-3\",\n            4: \"col-span-4\",\n            5: \"col-span-5\",\n            6: \"col-span-6\",\n            7: \"col-span-7\",\n            8: \"col-span-8\",\n            9: \"col-span-9\",\n            10: \"col-span-10\",\n            11: \"col-span-11\",\n            12: \"col-span-12\"\n        },\n        offset: {\n            1: \"col-start-2\",\n            2: \"col-start-3\",\n            3: \"col-start-4\",\n            4: \"col-start-5\",\n            5: \"col-start-6\",\n            6: \"col-start-7\",\n            7: \"col-start-8\",\n            8: \"col-start-9\",\n            9: \"col-start-10\",\n            10: \"col-start-11\",\n            11: \"col-start-12\"\n        },\n        align: {\n            top: \"self-start\",\n            middle: \"self-center\",\n            bottom: \"self-end\"\n        }\n    },\n    defaultVariants: {\n        span: \"auto\"\n    }\n});\n\ninterface ColumnProps\n    extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof columnVariants> {\n    children?: React.ReactNode;\n}\n\nconst ColumnBase = ({ span, align, children, className, offset, ...props }: ColumnProps) => {\n    return (\n        <div {...props} className={cn(columnVariants({ span, offset, align }), className)}>\n            {children}\n        </div>\n    );\n};\n\nconst Column = makeDecoratable(\"Column\", ColumnBase);\n\nconst gridVariants = cva(\"grid\", {\n    variants: {\n        gap: {\n            none: \"gap-0\",\n            micro: \"gap-xs\",\n            small: \"gap-sm\",\n            compact: \"gap-md\",\n            comfortable: \"gap-lg\",\n            spacious: \"gap-xl\"\n        }\n    },\n    defaultVariants: {\n        gap: \"comfortable\"\n    }\n});\n\ninterface GridProps\n    extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof gridVariants> {\n    children:\n        | null\n        | React.ReactElement<ColumnProps, typeof Column>\n        | Array<React.ReactElement<ColumnProps, typeof Column> | null>;\n}\n\nconst GridBase = ({ gap, children, className, ...props }: GridProps) => {\n    return (\n        <div {...props} className={cn(\"grid-cols-12\", gridVariants({ gap }), className)}>\n            {children}\n        </div>\n    );\n};\n\nconst DecoratableGrid = makeDecoratable(\"Grid\", GridBase);\n\nconst Grid = withStaticProps(DecoratableGrid, { Column });\n\nexport { Grid, type GridProps, type ColumnProps };\n"],"names":["columnVariants","cva","ColumnBase","span","align","children","className","offset","props","cn","Column","makeDecoratable","gridVariants","GridBase","gap","DecoratableGrid","Grid","withStaticProps"],"mappings":";;AAGA,MAAMA,iBAAiBC,IAAI,IAAI;IAC3B,UAAU;QACN,MAAM;YACF,MAAM;YACN,GAAG;YACH,GAAG;YACH,GAAG;YACH,GAAG;YACH,GAAG;YACH,GAAG;YACH,GAAG;YACH,GAAG;YACH,GAAG;YACH,IAAI;YACJ,IAAI;YACJ,IAAI;QACR;QACA,QAAQ;YACJ,GAAG;YACH,GAAG;YACH,GAAG;YACH,GAAG;YACH,GAAG;YACH,GAAG;YACH,GAAG;YACH,GAAG;YACH,GAAG;YACH,IAAI;YACJ,IAAI;QACR;QACA,OAAO;YACH,KAAK;YACL,QAAQ;YACR,QAAQ;QACZ;IACJ;IACA,iBAAiB;QACb,MAAM;IACV;AACJ;AAOA,MAAMC,aAAa,CAAC,EAAEC,IAAI,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,MAAM,EAAE,GAAGC,OAAoB,GAC5E,WAAP,GACI,oBAAC;QAAK,GAAGA,KAAK;QAAE,WAAWC,GAAGT,eAAe;YAAEG;YAAMI;YAAQH;QAAM,IAAIE;OAClED;AAKb,MAAMK,SAASC,gBAAgB,UAAUT;AAEzC,MAAMU,eAAeX,IAAI,QAAQ;IAC7B,UAAU;QACN,KAAK;YACD,MAAM;YACN,OAAO;YACP,OAAO;YACP,SAAS;YACT,aAAa;YACb,UAAU;QACd;IACJ;IACA,iBAAiB;QACb,KAAK;IACT;AACJ;AAUA,MAAMY,WAAW,CAAC,EAAEC,GAAG,EAAET,QAAQ,EAAEC,SAAS,EAAE,GAAGE,OAAkB,GACxD,WAAP,GACI,oBAAC;QAAK,GAAGA,KAAK;QAAE,WAAWC,GAAG,gBAAgBG,aAAa;YAAEE;QAAI,IAAIR;OAChED;AAKb,MAAMU,kBAAkBJ,gBAAgB,QAAQE;AAEhD,MAAMG,OAAOC,gBAAgBF,iBAAiB;IAAEL,QAAAA;AAAO"}

package/Grid/Grid.stories.d.ts

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

package/Grid/Grid.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Grid/Grid.stories.js","sources":["../../src/Grid/Grid.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\n\nimport { Grid } from \"./Grid.js\";\nimport { StyledColumn } from \"./stories/StyledColumn.js\";\n\nconst meta: Meta<typeof Grid> = {\n    title: \"Components/Grid\",\n    component: Grid,\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Grid>;\n\nexport const Default: Story = {\n    args: {\n        className: \"bg-neutral-light p-md w-full\",\n        children: (\n            <>\n                <StyledColumn index={1} />\n                <StyledColumn index={2} span={3} />\n                <StyledColumn index={3} />\n                <StyledColumn index={4} />\n                <StyledColumn index={5} />\n                <StyledColumn index={6} />\n                <StyledColumn index={7} span={2} />\n                <StyledColumn index={8} />\n                <StyledColumn index={9} />\n            </>\n        )\n    }\n};\n\nexport const WithGapNone: Story = {\n    args: {\n        ...Default.args,\n        gap: \"none\"\n    }\n};\n\nexport const WithGapMicro: Story = {\n    args: {\n        ...Default.args,\n        gap: \"micro\"\n    }\n};\n\nexport const WithGapSmall: Story = {\n    args: {\n        ...Default.args,\n        gap: \"small\"\n    }\n};\n\nexport const WithGapCompact: Story = {\n    args: {\n        ...Default.args,\n        gap: \"compact\"\n    }\n};\n\nexport const WithGapComfortable: Story = {\n    args: {\n        ...Default.args,\n        gap: \"comfortable\"\n    }\n};\n\nexport const WithGapSpacious: Story = {\n    args: {\n        ...Default.args,\n        gap: \"spacious\"\n    }\n};\n\nexport const WithOffset: Story = {\n    parameters: {\n        layout: \"padded\"\n    },\n    args: {\n        ...Default.args,\n        children: (\n            <>\n                {/* Row 1 */}\n                <StyledColumn span={8} offset={2} index={1} />\n                <Grid.Column span={2} />\n\n                {/* Row 2 */}\n                <StyledColumn span={8} offset={4} index={1} />\n\n                {/* Row 3 */}\n                <StyledColumn span={10} offset={1} index={1} />\n                <Grid.Column span={1} />\n\n                {/* Row 4 */}\n                <StyledColumn span={12} index={1} />\n            </>\n        )\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        return (\n            <Grid {...args}>\n                <Grid.Column className=\"bg-primary text-neutral-light p-2 text-md rounded-sm\">\n                    Col 1\n                </Grid.Column>\n                <Grid.Column\n                    className=\"bg-primary text-neutral-light p-2 text-md rounded-sm\"\n                    span={3}\n                >\n                    Col 2<br />\n                    Span: 3\n                </Grid.Column>\n                <Grid.Column className=\"bg-primary text-neutral-light p-2 text-md rounded-sm\">\n                    Col 3\n                </Grid.Column>\n                <Grid.Column className=\"bg-primary text-neutral-light p-2 text-md rounded-sm\">\n                    Col 4\n                </Grid.Column>\n                <Grid.Column className=\"bg-primary text-neutral-light p-2 text-md rounded-sm\">\n                    Col 5\n                </Grid.Column>\n                <Grid.Column className=\"bg-primary text-neutral-light p-2 text-md rounded-sm\">\n                    Col 6\n                </Grid.Column>\n                <Grid.Column\n                    className=\"bg-primary text-neutral-light p-2 text-md rounded-sm\"\n                    span={2}\n                >\n                    Col 7<br />\n                    Span: 2\n                </Grid.Column>\n                <Grid.Column className=\"bg-primary text-neutral-light p-2 text-md rounded-sm\">\n                    Col 8\n                </Grid.Column>\n                <Grid.Column className=\"bg-primary text-neutral-light p-2 text-md rounded-sm\">\n                    Col 9\n                </Grid.Column>\n            </Grid>\n        );\n    },\n    args: {\n        gap: \"comfortable\",\n        className: \"bg-neutral-light p-md w-full\"\n    },\n    argTypes: {\n        gap: {\n            description: \"Spacing between grid columns\",\n            control: \"select\",\n            options: [\"none\", \"micro\", \"small\", \"compact\", \"comfortable\", \"spacious\"],\n            defaultValue: \"comfortable\"\n        },\n        className: {\n            description:\n                \"Additional CSS class names. You can pass multiple class names that will be applied to Grid.\",\n            control: \"text\"\n        }\n    }\n};\n"],"names":["meta","Grid","Default","StyledColumn","WithGapNone","WithGapMicro","WithGapSmall","WithGapCompact","WithGapComfortable","WithGapSpacious","WithOffset","Documentation","args"],"mappings":";;;AAMA,MAAMA,OAA0B;IAC5B,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;AACJ;AAEA,qBAAeD;AAIR,MAAME,UAAiB;IAC1B,MAAM;QACF,WAAW;QACX,UAAU,WAAV,GACI,wDACI,oBAACC,cAAYA;YAAC,OAAO;0BACrB,oBAACA,cAAYA;YAAC,OAAO;YAAG,MAAM;0BAC9B,oBAACA,cAAYA;YAAC,OAAO;0BACrB,oBAACA,cAAYA;YAAC,OAAO;0BACrB,oBAACA,cAAYA;YAAC,OAAO;0BACrB,oBAACA,cAAYA;YAAC,OAAO;0BACrB,oBAACA,cAAYA;YAAC,OAAO;YAAG,MAAM;0BAC9B,oBAACA,cAAYA;YAAC,OAAO;0BACrB,oBAACA,cAAYA;YAAC,OAAO;;IAGjC;AACJ;AAEO,MAAMC,cAAqB;IAC9B,MAAM;QACF,GAAGF,QAAQ,IAAI;QACf,KAAK;IACT;AACJ;AAEO,MAAMG,eAAsB;IAC/B,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,KAAK;IACT;AACJ;AAEO,MAAMI,eAAsB;IAC/B,MAAM;QACF,GAAGJ,QAAQ,IAAI;QACf,KAAK;IACT;AACJ;AAEO,MAAMK,iBAAwB;IACjC,MAAM;QACF,GAAGL,QAAQ,IAAI;QACf,KAAK;IACT;AACJ;AAEO,MAAMM,qBAA4B;IACrC,MAAM;QACF,GAAGN,QAAQ,IAAI;QACf,KAAK;IACT;AACJ;AAEO,MAAMO,kBAAyB;IAClC,MAAM;QACF,GAAGP,QAAQ,IAAI;QACf,KAAK;IACT;AACJ;AAEO,MAAMQ,aAAoB;IAC7B,YAAY;QACR,QAAQ;IACZ;IACA,MAAM;QACF,GAAGR,QAAQ,IAAI;QACf,UAAU,WAAV,GACI,wDAEI,oBAACC,cAAYA;YAAC,MAAM;YAAG,QAAQ;YAAG,OAAO;0BACzC,oBAACF,KAAK,MAAM;YAAC,MAAM;0BAGnB,oBAACE,cAAYA;YAAC,MAAM;YAAG,QAAQ;YAAG,OAAO;0BAGzC,oBAACA,cAAYA;YAAC,MAAM;YAAI,QAAQ;YAAG,OAAO;0BAC1C,oBAACF,KAAK,MAAM;YAAC,MAAM;0BAGnB,oBAACE,cAAYA;YAAC,MAAM;YAAI,OAAO;;IAG3C;AACJ;AAEO,MAAMQ,gBAAuB;IAChC,QAAQC,CAAAA,OACG,WAAP,GACI,oBAACX,MAASW,MAAAA,WAAAA,GACN,oBAACX,KAAK,MAAM;YAAC,WAAU;WAAuD,wBAG9E,oBAACA,KAAK,MAAM;YACR,WAAU;YACV,MAAM;WACT,uBACQ,oBAAC,aAAK,0BAGf,oBAACA,KAAK,MAAM;YAAC,WAAU;WAAuD,wBAG9E,oBAACA,KAAK,MAAM;YAAC,WAAU;WAAuD,wBAG9E,oBAACA,KAAK,MAAM;YAAC,WAAU;WAAuD,wBAG9E,oBAACA,KAAK,MAAM;YAAC,WAAU;WAAuD,wBAG9E,oBAACA,KAAK,MAAM;YACR,WAAU;YACV,MAAM;WACT,uBACQ,oBAAC,aAAK,0BAGf,oBAACA,KAAK,MAAM;YAAC,WAAU;WAAuD,wBAG9E,oBAACA,KAAK,MAAM;YAAC,WAAU;WAAuD;IAM1F,MAAM;QACF,KAAK;QACL,WAAW;IACf;IACA,UAAU;QACN,KAAK;YACD,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAQ;gBAAS;gBAAS;gBAAW;gBAAe;aAAW;YACzE,cAAc;QAClB;QACA,WAAW;YACP,aACI;YACJ,SAAS;QACb;IACJ;AACJ"}
+{"version":3,"file":"Grid/Grid.stories.js","sources":["../../src/Grid/Grid.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\n\nimport { Grid } from \"./Grid.js\";\nimport { StyledColumn } from \"./stories/StyledColumn.js\";\n\nconst meta: Meta<typeof Grid> = {\n    title: \"Components/Grid\",\n    component: Grid,\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Grid>;\n\nexport const Default: Story = {\n    args: {\n        className: \"bg-neutral-light p-md w-full\",\n        children: (\n            <>\n                <StyledColumn index={1} />\n                <StyledColumn index={2} span={3} />\n                <StyledColumn index={3} />\n                <StyledColumn index={4} />\n                <StyledColumn index={5} />\n                <StyledColumn index={6} />\n                <StyledColumn index={7} span={2} />\n                <StyledColumn index={8} />\n                <StyledColumn index={9} />\n            </>\n        )\n    }\n};\n\nexport const WithGapNone: Story = {\n    args: {\n        ...Default.args,\n        gap: \"none\"\n    }\n};\n\nexport const WithGapMicro: Story = {\n    args: {\n        ...Default.args,\n        gap: \"micro\"\n    }\n};\n\nexport const WithGapSmall: Story = {\n    args: {\n        ...Default.args,\n        gap: \"small\"\n    }\n};\n\nexport const WithGapCompact: Story = {\n    args: {\n        ...Default.args,\n        gap: \"compact\"\n    }\n};\n\nexport const WithGapComfortable: Story = {\n    args: {\n        ...Default.args,\n        gap: \"comfortable\"\n    }\n};\n\nexport const WithGapSpacious: Story = {\n    args: {\n        ...Default.args,\n        gap: \"spacious\"\n    }\n};\n\nexport const WithOffset: Story = {\n    parameters: {\n        layout: \"padded\"\n    },\n    args: {\n        ...Default.args,\n        children: (\n            <>\n                {/* Row 1 */}\n                <StyledColumn span={8} offset={2} index={1} />\n                <Grid.Column span={2} />\n\n                {/* Row 2 */}\n                <StyledColumn span={8} offset={4} index={1} />\n\n                {/* Row 3 */}\n                <StyledColumn span={10} offset={1} index={1} />\n                <Grid.Column span={1} />\n\n                {/* Row 4 */}\n                <StyledColumn span={12} index={1} />\n            </>\n        )\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        return (\n            <Grid {...args}>\n                <Grid.Column className=\"bg-primary text-neutral-light p-2 text-md rounded-sm\">\n                    Col 1\n                </Grid.Column>\n                <Grid.Column\n                    className=\"bg-primary text-neutral-light p-2 text-md rounded-sm\"\n                    span={3}\n                >\n                    Col 2<br />\n                    Span: 3\n                </Grid.Column>\n                <Grid.Column className=\"bg-primary text-neutral-light p-2 text-md rounded-sm\">\n                    Col 3\n                </Grid.Column>\n                <Grid.Column className=\"bg-primary text-neutral-light p-2 text-md rounded-sm\">\n                    Col 4\n                </Grid.Column>\n                <Grid.Column className=\"bg-primary text-neutral-light p-2 text-md rounded-sm\">\n                    Col 5\n                </Grid.Column>\n                <Grid.Column className=\"bg-primary text-neutral-light p-2 text-md rounded-sm\">\n                    Col 6\n                </Grid.Column>\n                <Grid.Column\n                    className=\"bg-primary text-neutral-light p-2 text-md rounded-sm\"\n                    span={2}\n                >\n                    Col 7<br />\n                    Span: 2\n                </Grid.Column>\n                <Grid.Column className=\"bg-primary text-neutral-light p-2 text-md rounded-sm\">\n                    Col 8\n                </Grid.Column>\n                <Grid.Column className=\"bg-primary text-neutral-light p-2 text-md rounded-sm\">\n                    Col 9\n                </Grid.Column>\n            </Grid>\n        );\n    },\n    args: {\n        gap: \"comfortable\",\n        className: \"bg-neutral-light p-md w-full\"\n    },\n    argTypes: {\n        gap: {\n            description: \"Spacing between grid columns\",\n            control: \"select\",\n            options: [\"none\", \"micro\", \"small\", \"compact\", \"comfortable\", \"spacious\"],\n            defaultValue: \"comfortable\"\n        },\n        className: {\n            description:\n                \"Additional CSS class names. You can pass multiple class names that will be applied to Grid.\",\n            control: \"text\"\n        }\n    }\n};\n"],"names":["meta","Grid","Default","StyledColumn","WithGapNone","WithGapMicro","WithGapSmall","WithGapCompact","WithGapComfortable","WithGapSpacious","WithOffset","Documentation","args"],"mappings":";;;AAMA,MAAMA,OAA0B;IAC5B,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;AACJ;AAEA,qBAAeD;AAIR,MAAME,UAAiB;IAC1B,MAAM;QACF,WAAW;QACX,UAAU,WAAV,GACI,wDACI,oBAACC,cAAYA;YAAC,OAAO;0BACrB,oBAACA,cAAYA;YAAC,OAAO;YAAG,MAAM;0BAC9B,oBAACA,cAAYA;YAAC,OAAO;0BACrB,oBAACA,cAAYA;YAAC,OAAO;0BACrB,oBAACA,cAAYA;YAAC,OAAO;0BACrB,oBAACA,cAAYA;YAAC,OAAO;0BACrB,oBAACA,cAAYA;YAAC,OAAO;YAAG,MAAM;0BAC9B,oBAACA,cAAYA;YAAC,OAAO;0BACrB,oBAACA,cAAYA;YAAC,OAAO;;IAGjC;AACJ;AAEO,MAAMC,cAAqB;IAC9B,MAAM;QACF,GAAGF,QAAQ,IAAI;QACf,KAAK;IACT;AACJ;AAEO,MAAMG,eAAsB;IAC/B,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,KAAK;IACT;AACJ;AAEO,MAAMI,eAAsB;IAC/B,MAAM;QACF,GAAGJ,QAAQ,IAAI;QACf,KAAK;IACT;AACJ;AAEO,MAAMK,iBAAwB;IACjC,MAAM;QACF,GAAGL,QAAQ,IAAI;QACf,KAAK;IACT;AACJ;AAEO,MAAMM,qBAA4B;IACrC,MAAM;QACF,GAAGN,QAAQ,IAAI;QACf,KAAK;IACT;AACJ;AAEO,MAAMO,kBAAyB;IAClC,MAAM;QACF,GAAGP,QAAQ,IAAI;QACf,KAAK;IACT;AACJ;AAEO,MAAMQ,aAAoB;IAC7B,YAAY;QACR,QAAQ;IACZ;IACA,MAAM;QACF,GAAGR,QAAQ,IAAI;QACf,UAAU,WAAV,GACI,wDAEI,oBAACC,cAAYA;YAAC,MAAM;YAAG,QAAQ;YAAG,OAAO;0BACzC,oBAACF,KAAK,MAAM;YAAC,MAAM;0BAGnB,oBAACE,cAAYA;YAAC,MAAM;YAAG,QAAQ;YAAG,OAAO;0BAGzC,oBAACA,cAAYA;YAAC,MAAM;YAAI,QAAQ;YAAG,OAAO;0BAC1C,oBAACF,KAAK,MAAM;YAAC,MAAM;0BAGnB,oBAACE,cAAYA;YAAC,MAAM;YAAI,OAAO;;IAG3C;AACJ;AAEO,MAAMQ,gBAAuB;IAChC,QAAQC,CAAAA,OACG,WAAP,GACI,oBAACX,MAASW,MAAAA,WAAAA,GACN,oBAACX,KAAK,MAAM;YAAC,WAAU;WAAuD,wBAG9E,oBAACA,KAAK,MAAM;YACR,WAAU;YACV,MAAM;WACT,uBACQ,oBAAC,aAAK,0BAGf,oBAACA,KAAK,MAAM;YAAC,WAAU;WAAuD,wBAG9E,oBAACA,KAAK,MAAM;YAAC,WAAU;WAAuD,wBAG9E,oBAACA,KAAK,MAAM;YAAC,WAAU;WAAuD,wBAG9E,oBAACA,KAAK,MAAM;YAAC,WAAU;WAAuD,wBAG9E,oBAACA,KAAK,MAAM;YACR,WAAU;YACV,MAAM;WACT,uBACQ,oBAAC,aAAK,0BAGf,oBAACA,KAAK,MAAM;YAAC,WAAU;WAAuD,wBAG9E,oBAACA,KAAK,MAAM;YAAC,WAAU;WAAuD;IAM1F,MAAM;QACF,KAAK;QACL,WAAW;IACf;IACA,UAAU;QACN,KAAK;YACD,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAQ;gBAAS;gBAAS;gBAAW;gBAAe;aAAW;YACzE,cAAc;QAClB;QACA,WAAW;YACP,aACI;YACJ,SAAS;QACb;IACJ;AACJ"}

package/HeaderBar/HeaderBar.d.ts

@@ -4,21 +4,22 @@ interface HeaderBarProps extends React.HTMLAttributes<HTMLDivElement> {
     middle?: React.ReactNode;
     end?: React.ReactNode;
 }
-declare const HeaderBar: (({ start, middle, end, className, ...props }: HeaderBarProps) => React.JSX.Element) & {
-    original: ({ start, middle, end, className, ...props }: HeaderBarProps) => React.JSX.Element;
+declare const HeaderBarBase: ({ start, middle, end, className, ...props }: HeaderBarProps) => React.JSX.Element;
+declare const HeaderBar: typeof HeaderBarBase & {
+    original: typeof HeaderBarBase;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ start, middle, end, className, ...props }: HeaderBarProps) => React.JSX.Element) & {
-        original: ({ start, middle, end, className, ...props }: HeaderBarProps) => React.JSX.Element;
+    original: typeof HeaderBarBase & {
+        original: typeof HeaderBarBase;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<(({ start, middle, end, className, ...props }: HeaderBarProps) => React.JSX.Element) & {
-        original: ({ start, middle, end, className, ...props }: HeaderBarProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<typeof HeaderBarBase & {
+        original: typeof HeaderBarBase;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/HeaderBar/HeaderBar.stories.d.ts

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

package/HeaderBar/HeaderBar.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderBar/HeaderBar.stories.js","sources":["../../src/HeaderBar/HeaderBar.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { ReactComponent as KeyboardArrowRightIcon } from \"@webiny/icons/keyboard_arrow_down.svg\";\nimport { HeaderBar } from \"./HeaderBar.js\";\nimport React from \"react\";\nimport { Button, IconButton } from \"~/Button/index.js\";\nimport { Avatar } from \"~/Avatar/index.js\";\nimport { Text } from \"~/Text/index.js\";\n\nconst meta: Meta<typeof HeaderBar> = {\n    title: \"Components/HeaderBar\",\n    component: HeaderBar,\n    decorators: [\n        Story => (\n            <div className=\"bg-[#f4f4f4] h-[500px] w-[850px]  rounded-[5px] px-[50px] content-center\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof HeaderBar>;\n\nconst StartExample = () => (\n    <Text size={\"sm\"} className={\"text-neutral-dimmed\"}>\n        {\"Headless CMS / Articles / The best article ever\"}\n    </Text>\n);\n\nconst MiddleExample = () => <>Content in the middle</>;\n\nconst EndExample = () => (\n    <div className={\"flex gap-x-sm\"}>\n        <Button variant={\"ghost\"} size={\"md\"} text={\"Root tenant\"} />\n        <div className={\"flex items-center rounded-md gap-xxs py-xs px-xs bg-neutral-light\"}>\n            <Avatar\n                size={\"sm\"}\n                variant={\"strong\"}\n                image={<Avatar.Image src={\"https://i.pravatar.cc/300\"} />}\n                fallback={<Avatar.Fallback delayMs={0}>W</Avatar.Fallback>}\n            />\n            <IconButton\n                variant={\"ghost\"}\n                size={\"xs\"}\n                color={\"neutral-strong\"}\n                icon={<KeyboardArrowRightIcon />}\n                onClick={() => console.log(\"clicked\")}\n            />\n        </div>\n    </div>\n);\n\nexport const Default: Story = {\n    args: {\n        start: <StartExample />,\n        middle: <MiddleExample />,\n        end: <EndExample />\n    }\n};\n\nexport const StartContentOnly: Story = {\n    args: {\n        start: <StartExample />\n    }\n};\n\nexport const MiddleContentOnly: Story = {\n    args: {\n        middle: <MiddleExample />\n    }\n};\n\nexport const EndContentOnly: Story = {\n    args: {\n        end: <EndExample />\n    }\n};\n\nexport const StartEndContentOnly: Story = {\n    args: {\n        start: <StartExample />,\n        end: <EndExample />\n    }\n};\n\nexport const MoreStartContent: Story = {\n    args: {\n        start: (\n            <>\n                <StartExample />\n                <StartExample />\n                <StartExample />\n            </>\n        ),\n        middle: <MiddleExample />,\n        end: <EndExample />\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        start: <StartExample />,\n        middle: <MiddleExample />,\n        end: <EndExample />\n    },\n    argTypes: {\n        start: {\n            description: \"Content displayed at the start of the header bar\"\n        },\n        middle: {\n            description: \"Content displayed in the middle of the header bar\"\n        },\n        end: {\n            description: \"Content displayed at the end of the header bar\"\n        }\n    }\n};\n"],"names":["meta","HeaderBar","Story","StartExample","Text","MiddleExample","EndExample","Button","Avatar","IconButton","KeyboardArrowRightIcon","console","Default","StartContentOnly","MiddleContentOnly","EndContentOnly","StartEndContentOnly","MoreStartContent","Documentation"],"mappings":";;;;;;AAQA,MAAMA,OAA+B;IACjC,OAAO;IACP,WAAWC;IACX,YAAY;QACRC,CAAAA,QAAAA,WAAAA,GACI,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;AACL;AAEA,0BAAeF;AAIf,MAAMG,eAAe,kBACjB,oBAACC,MAAIA;QAAC,MAAM;QAAM,WAAW;OACxB;AAIT,MAAMC,gBAAgB,kBAAM,0CAAE;AAE9B,MAAMC,aAAa,kBACf,oBAAC;QAAI,WAAW;qBACZ,oBAACC,QAAMA;QAAC,SAAS;QAAS,MAAM;QAAM,MAAM;sBAC5C,oBAAC;QAAI,WAAW;qBACZ,oBAACC,QAAMA;QACH,MAAM;QACN,SAAS;QACT,qBAAO,oBAACA,OAAO,KAAK;YAAC,KAAK;;QAC1B,wBAAU,oBAACA,OAAO,QAAQ;YAAC,SAAS;WAAG;sBAE3C,oBAACC,YAAUA;QACP,SAAS;QACT,MAAM;QACN,OAAO;QACP,oBAAM,oBAACC,gBAAsBA;QAC7B,SAAS,IAAMC,QAAQ,GAAG,CAAC;;AAMpC,MAAMC,UAAiB;IAC1B,MAAM;QACF,OAAO,WAAP,GAAO,oBAACT,cAAYA;QACpB,QAAQ,WAAR,GAAQ,oBAACE,eAAaA;QACtB,KAAK,WAAL,GAAK,oBAACC,YAAUA;IACpB;AACJ;AAEO,MAAMO,mBAA0B;IACnC,MAAM;QACF,OAAO,WAAP,GAAO,oBAACV,cAAYA;IACxB;AACJ;AAEO,MAAMW,oBAA2B;IACpC,MAAM;QACF,QAAQ,WAAR,GAAQ,oBAACT,eAAaA;IAC1B;AACJ;AAEO,MAAMU,iBAAwB;IACjC,MAAM;QACF,KAAK,WAAL,GAAK,oBAACT,YAAUA;IACpB;AACJ;AAEO,MAAMU,sBAA6B;IACtC,MAAM;QACF,OAAO,WAAP,GAAO,oBAACb,cAAYA;QACpB,KAAK,WAAL,GAAK,oBAACG,YAAUA;IACpB;AACJ;AAEO,MAAMW,mBAA0B;IACnC,MAAM;QACF,OAAO,WAAP,GACI,wDACI,oBAACd,cAAYA,OAAAA,WAAAA,GACb,oBAACA,cAAYA,OAAAA,WAAAA,GACb,oBAACA,cAAYA;QAGrB,QAAQ,WAAR,GAAQ,oBAACE,eAAaA;QACtB,KAAK,WAAL,GAAK,oBAACC,YAAUA;IACpB;AACJ;AAEO,MAAMY,gBAAuB;IAChC,MAAM;QACF,OAAO,WAAP,GAAO,oBAACf,cAAYA;QACpB,QAAQ,WAAR,GAAQ,oBAACE,eAAaA;QACtB,KAAK,WAAL,GAAK,oBAACC,YAAUA;IACpB;IACA,UAAU;QACN,OAAO;YACH,aAAa;QACjB;QACA,QAAQ;YACJ,aAAa;QACjB;QACA,KAAK;YACD,aAAa;QACjB;IACJ;AACJ"}
+{"version":3,"file":"HeaderBar/HeaderBar.stories.js","sources":["../../src/HeaderBar/HeaderBar.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport { ReactComponent as KeyboardArrowRightIcon } from \"@webiny/icons/keyboard_arrow_down.svg\";\nimport { HeaderBar } from \"./HeaderBar.js\";\nimport React from \"react\";\nimport { Button, IconButton } from \"~/Button/index.js\";\nimport { Avatar } from \"~/Avatar/index.js\";\nimport { Text } from \"~/Text/index.js\";\n\nconst meta: Meta<typeof HeaderBar> = {\n    title: \"Components/HeaderBar\",\n    component: HeaderBar,\n    decorators: [\n        Story => (\n            <div className=\"bg-[#f4f4f4] h-[500px] w-[850px]  rounded-[5px] px-[50px] content-center\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof HeaderBar>;\n\nconst StartExample = () => (\n    <Text size={\"sm\"} className={\"text-neutral-dimmed\"}>\n        {\"Headless CMS / Articles / The best article ever\"}\n    </Text>\n);\n\nconst MiddleExample = () => <>Content in the middle</>;\n\nconst EndExample = () => (\n    <div className={\"flex gap-x-sm\"}>\n        <Button variant={\"ghost\"} size={\"md\"} text={\"Root tenant\"} />\n        <div className={\"flex items-center rounded-md gap-xxs py-xs px-xs bg-neutral-light\"}>\n            <Avatar\n                size={\"sm\"}\n                variant={\"strong\"}\n                image={<Avatar.Image src={\"https://i.pravatar.cc/300\"} />}\n                fallback={<Avatar.Fallback delayMs={0}>W</Avatar.Fallback>}\n            />\n            <IconButton\n                variant={\"ghost\"}\n                size={\"xs\"}\n                color={\"neutral-strong\"}\n                icon={<KeyboardArrowRightIcon />}\n                onClick={() => console.log(\"clicked\")}\n            />\n        </div>\n    </div>\n);\n\nexport const Default: Story = {\n    args: {\n        start: <StartExample />,\n        middle: <MiddleExample />,\n        end: <EndExample />\n    }\n};\n\nexport const StartContentOnly: Story = {\n    args: {\n        start: <StartExample />\n    }\n};\n\nexport const MiddleContentOnly: Story = {\n    args: {\n        middle: <MiddleExample />\n    }\n};\n\nexport const EndContentOnly: Story = {\n    args: {\n        end: <EndExample />\n    }\n};\n\nexport const StartEndContentOnly: Story = {\n    args: {\n        start: <StartExample />,\n        end: <EndExample />\n    }\n};\n\nexport const MoreStartContent: Story = {\n    args: {\n        start: (\n            <>\n                <StartExample />\n                <StartExample />\n                <StartExample />\n            </>\n        ),\n        middle: <MiddleExample />,\n        end: <EndExample />\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        start: <StartExample />,\n        middle: <MiddleExample />,\n        end: <EndExample />\n    },\n    argTypes: {\n        start: {\n            description: \"Content displayed at the start of the header bar\"\n        },\n        middle: {\n            description: \"Content displayed in the middle of the header bar\"\n        },\n        end: {\n            description: \"Content displayed at the end of the header bar\"\n        }\n    }\n};\n"],"names":["meta","HeaderBar","Story","StartExample","Text","MiddleExample","EndExample","Button","Avatar","IconButton","KeyboardArrowRightIcon","console","Default","StartContentOnly","MiddleContentOnly","EndContentOnly","StartEndContentOnly","MoreStartContent","Documentation"],"mappings":";;;;;;AAQA,MAAMA,OAA+B;IACjC,OAAO;IACP,WAAWC;IACX,YAAY;QACRC,CAAAA,QAAAA,WAAAA,GACI,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;AACL;AAEA,0BAAeF;AAIf,MAAMG,eAAe,kBACjB,oBAACC,MAAIA;QAAC,MAAM;QAAM,WAAW;OACxB;AAIT,MAAMC,gBAAgB,kBAAM,0CAAE;AAE9B,MAAMC,aAAa,kBACf,oBAAC;QAAI,WAAW;qBACZ,oBAACC,QAAMA;QAAC,SAAS;QAAS,MAAM;QAAM,MAAM;sBAC5C,oBAAC;QAAI,WAAW;qBACZ,oBAACC,QAAMA;QACH,MAAM;QACN,SAAS;QACT,qBAAO,oBAACA,OAAO,KAAK;YAAC,KAAK;;QAC1B,wBAAU,oBAACA,OAAO,QAAQ;YAAC,SAAS;WAAG;sBAE3C,oBAACC,YAAUA;QACP,SAAS;QACT,MAAM;QACN,OAAO;QACP,oBAAM,oBAACC,gBAAsBA;QAC7B,SAAS,IAAMC,QAAQ,GAAG,CAAC;;AAMpC,MAAMC,UAAiB;IAC1B,MAAM;QACF,OAAO,WAAP,GAAO,oBAACT,cAAYA;QACpB,QAAQ,WAAR,GAAQ,oBAACE,eAAaA;QACtB,KAAK,WAAL,GAAK,oBAACC,YAAUA;IACpB;AACJ;AAEO,MAAMO,mBAA0B;IACnC,MAAM;QACF,OAAO,WAAP,GAAO,oBAACV,cAAYA;IACxB;AACJ;AAEO,MAAMW,oBAA2B;IACpC,MAAM;QACF,QAAQ,WAAR,GAAQ,oBAACT,eAAaA;IAC1B;AACJ;AAEO,MAAMU,iBAAwB;IACjC,MAAM;QACF,KAAK,WAAL,GAAK,oBAACT,YAAUA;IACpB;AACJ;AAEO,MAAMU,sBAA6B;IACtC,MAAM;QACF,OAAO,WAAP,GAAO,oBAACb,cAAYA;QACpB,KAAK,WAAL,GAAK,oBAACG,YAAUA;IACpB;AACJ;AAEO,MAAMW,mBAA0B;IACnC,MAAM;QACF,OAAO,WAAP,GACI,wDACI,oBAACd,cAAYA,OAAAA,WAAAA,GACb,oBAACA,cAAYA,OAAAA,WAAAA,GACb,oBAACA,cAAYA;QAGrB,QAAQ,WAAR,GAAQ,oBAACE,eAAaA;QACtB,KAAK,WAAL,GAAK,oBAACC,YAAUA;IACpB;AACJ;AAEO,MAAMY,gBAAuB;IAChC,MAAM;QACF,OAAO,WAAP,GAAO,oBAACf,cAAYA;QACpB,QAAQ,WAAR,GAAQ,oBAACE,eAAaA;QACtB,KAAK,WAAL,GAAK,oBAACC,YAAUA;IACpB;IACA,UAAU;QACN,OAAO;YACH,aAAa;QACjB;QACA,QAAQ;YACJ,aAAa;QACjB;QACA,KAAK;YACD,aAAa;QACjB;IACJ;AACJ"}

package/Heading/Heading.d.ts

@@ -3,26 +3,27 @@ import { type VariantProps } from "../utils.js";
 export type HeadingTags = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
 export type HeadingLevels = 1 | 2 | 3 | 4 | 5 | 6;
 declare const headingVariants: (props?: ({
-    level?: 1 | 2 | 4 | 3 | 5 | 6 | null | undefined;
+    level?: 1 | 2 | 3 | 4 | 5 | 6 | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement>, VariantProps<typeof headingVariants> {
     as?: HeadingTags;
 }
-declare const Heading: (({ children, level, className, as, ...props }: HeadingProps) => React.JSX.Element) & {
-    original: ({ children, level, className, as, ...props }: HeadingProps) => React.JSX.Element;
+declare const HeadingBase: ({ children, level, className, as, ...props }: HeadingProps) => React.JSX.Element;
+declare const Heading: typeof HeadingBase & {
+    original: typeof HeadingBase;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ children, level, className, as, ...props }: HeadingProps) => React.JSX.Element) & {
-        original: ({ children, level, className, as, ...props }: HeadingProps) => React.JSX.Element;
+    original: typeof HeadingBase & {
+        original: typeof HeadingBase;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<(({ children, level, className, as, ...props }: HeadingProps) => React.JSX.Element) & {
-        original: ({ children, level, className, as, ...props }: HeadingProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<typeof HeadingBase & {
+        original: typeof HeadingBase;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/Heading/Heading.stories.d.ts

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

package/Heading/Heading.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Heading/Heading.stories.js","sources":["../../src/Heading/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"],"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"}
+{"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/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.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.map

@@ -1 +1 @@
-{"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"}
+{"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/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.stories.d.ts

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

package/IconPicker/IconPicker.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconPicker/IconPicker.stories.js","sources":["../../src/IconPicker/IconPicker.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { library } from \"@fortawesome/fontawesome-svg-core\";\nimport { fas } from \"@fortawesome/free-solid-svg-icons\";\nimport { IconPicker } from \"~/IconPicker/index.js\";\n\nconst meta: Meta<typeof IconPicker> = {\n    title: \"Components/Form/IconPicker\",\n    component: IconPicker,\n    argTypes: {\n        onChange: { action: \"onChange\" },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return <IconPicker {...args} value={value} onChange={setValue} />;\n    }\n};\n\nlibrary.add(fas);\n\nexport default meta;\ntype Story = StoryObj<typeof IconPicker>;\n\nexport const Default: Story = {\n    args: {\n        icons: [\n            { prefix: \"fas\", name: \"trash-restore-alt\" },\n            { prefix: \"fas\", name: \"trash-can-arrow-up\" },\n            { prefix: \"fas\", name: \"naira-sign\" },\n            { prefix: \"fas\", name: \"cart-arrow-down\" },\n            { prefix: \"fas\", name: \"walkie-talkie\" },\n            { prefix: \"fas\", name: \"file-edit\" },\n            { prefix: \"fas\", name: \"file-pen\" },\n            { prefix: \"fas\", name: \"receipt\" },\n            { prefix: \"fas\", name: \"pen-square\" },\n            { prefix: \"fas\", name: \"pencil-square\" },\n            { prefix: \"fas\", name: \"square-pen\" },\n            { prefix: \"fas\", name: \"suitcase-rolling\" },\n            { prefix: \"fas\", name: \"person-circle-exclamation\" },\n            { prefix: \"fas\", name: \"chevron-down\" },\n            { prefix: \"fas\", name: \"battery\" },\n            { prefix: \"fas\", name: \"battery-5\" },\n            { prefix: \"fas\", name: \"battery-full\" },\n            { prefix: \"fas\", name: \"skull-crossbones\" },\n            { prefix: \"fas\", name: \"code-compare\" },\n            { prefix: \"fas\", name: \"list-dots\" },\n            { prefix: \"fas\", name: \"list-ul\" },\n            { prefix: \"fas\", name: \"school-lock\" },\n            { prefix: \"fas\", name: \"tower-cell\" },\n            { prefix: \"fas\", name: \"long-arrow-alt-down\" },\n            { prefix: \"fas\", name: \"down-long\" },\n            { prefix: \"fas\", name: \"ranking-star\" },\n            { prefix: \"fas\", name: \"chess-king\" },\n            { prefix: \"fas\", name: \"person-harassing\" },\n            { prefix: \"fas\", name: \"brazilian-real-sign\" },\n            { prefix: \"fas\", name: \"landmark-alt\" },\n            { prefix: \"fas\", name: \"landmark-dome\" },\n            { prefix: \"fas\", name: \"arrow-up\" },\n            { prefix: \"fas\", name: \"television\" },\n            { prefix: \"fas\", name: \"tv-alt\" },\n            { prefix: \"fas\", name: \"tv\" },\n            { prefix: \"fas\", name: \"shrimp\" },\n            { prefix: \"fas\", name: \"tasks\" },\n            { prefix: \"fas\", name: \"list-check\" },\n            { prefix: \"fas\", name: \"jug-detergent\" },\n            { prefix: \"fas\", name: \"user-circle\" },\n            { prefix: \"fas\", name: \"circle-user\" },\n            { prefix: \"fas\", name: \"user-shield\" },\n            { prefix: \"fas\", name: \"wind\" },\n            { prefix: \"fas\", name: \"car-crash\" },\n            { prefix: \"fas\", name: \"car-burst\" },\n            { prefix: \"fas\", name: \"y\" },\n            { prefix: \"fas\", name: \"snowboarding\" },\n            { prefix: \"fas\", name: \"person-snowboarding\" },\n            { prefix: \"fas\", name: \"shipping-fast\" },\n            { prefix: \"fas\", name: \"truck-fast\" }\n        ]\n    }\n};\n\nexport const WithLabel: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const WithLabelRequired: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        required: true\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        label: \"Any field label\",\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 [value, setValue] = useState(args.value || null);\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        // Update value when args.value changes\n        useEffect(() => {\n            setValue(args.value || null);\n        }, [args.value]);\n\n        const handleChange = (newValue: any) => {\n            setValue(newValue);\n\n            // Simple required validation\n            if (args.required && !newValue) {\n                setValidation({ isValid: false, message: \"Please select an icon\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        };\n\n        // Validate on required change or value change\n        useEffect(() => {\n            if (args.required && !value) {\n                setValidation({ isValid: false, message: \"Please select an icon\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        }, [args.required, value]);\n\n        return (\n            <IconPicker\n                {...args}\n                value={value}\n                onChange={handleChange}\n                validation={validation}\n                required={args.required}\n            />\n        );\n    },\n    args: {\n        label: \"Select an Icon\",\n        required: true,\n        disabled: false,\n        description: \"Choose an icon for your button\",\n        note: \"Note: The selected icon will be displayed on your button\",\n        icons: [\n            { prefix: \"fas\", name: \"trash-restore-alt\" },\n            { prefix: \"fas\", name: \"file-pen\" },\n            { prefix: \"fas\", name: \"receipt\" },\n            { prefix: \"fas\", name: \"user-circle\" },\n            { prefix: \"fas\", name: \"circle-user\" }\n        ],\n        value: null,\n        validation: undefined\n    },\n    argTypes: {\n        label: {\n            description: \"Label text for the icon picker\",\n            control: \"text\"\n        },\n        required: {\n            description: \"Makes the field required when set to true\",\n            control: \"boolean\"\n        },\n        disabled: {\n            description: \"Disables the icon picker when set to true\",\n            control: \"boolean\"\n        },\n        description: {\n            description: \"Additional description text below the field\",\n            control: \"text\"\n        },\n        note: {\n            description: \"Additional note text below the field\",\n            control: \"text\"\n        },\n        icons: {\n            description: \"Array of available icons with prefix and name properties\",\n            control: \"object\"\n        },\n        value: {\n            description: \"The selected icon value (in format 'prefix/name')\"\n        },\n        validation: {\n            description:\n                \"Object containing validation state and message. Please refer to the example code for details on usage.\"\n        },\n        onChange: {\n            description: \"Function called when an icon is selected\"\n        }\n    }\n};\n"],"names":["meta","IconPicker","args","value","setValue","useState","library","fas","Default","WithLabel","WithLabelRequired","WithDescription","WithNotes","WithErrors","Disabled","FullExample","Documentation","validation","setValidation","useEffect","handleChange","newValue","undefined"],"mappings":";;;;AAMA,MAAMA,OAAgC;IAClC,OAAO;IACP,WAAWC;IACX,UAAU;QACN,UAAU;YAAE,QAAQ;QAAW;QAC/B,UAAU;YACN,SAAS;YACT,cAAc;QAClB;IACJ;IACA,YAAY;QACR,QAAQ;IACZ;IACA,QAAQC,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAASH,KAAK,KAAK;QAC7C,OAAO,WAAP,GAAO,oBAACD,YAAUA;YAAE,GAAGC,IAAI;YAAE,OAAOC;YAAO,UAAUC;;IACzD;AACJ;AAEAE,QAAQ,GAAG,CAACC;AAEZ,2BAAeP;AAGR,MAAMQ,UAAiB;IAC1B,MAAM;QACF,OAAO;YACH;gBAAE,QAAQ;gBAAO,MAAM;YAAoB;YAC3C;gBAAE,QAAQ;gBAAO,MAAM;YAAqB;YAC5C;gBAAE,QAAQ;gBAAO,MAAM;YAAa;YACpC;gBAAE,QAAQ;gBAAO,MAAM;YAAkB;YACzC;gBAAE,QAAQ;gBAAO,MAAM;YAAgB;YACvC;gBAAE,QAAQ;gBAAO,MAAM;YAAY;YACnC;gBAAE,QAAQ;gBAAO,MAAM;YAAW;YAClC;gBAAE,QAAQ;gBAAO,MAAM;YAAU;YACjC;gBAAE,QAAQ;gBAAO,MAAM;YAAa;YACpC;gBAAE,QAAQ;gBAAO,MAAM;YAAgB;YACvC;gBAAE,QAAQ;gBAAO,MAAM;YAAa;YACpC;gBAAE,QAAQ;gBAAO,MAAM;YAAmB;YAC1C;gBAAE,QAAQ;gBAAO,MAAM;YAA4B;YACnD;gBAAE,QAAQ;gBAAO,MAAM;YAAe;YACtC;gBAAE,QAAQ;gBAAO,MAAM;YAAU;YACjC;gBAAE,QAAQ;gBAAO,MAAM;YAAY;YACnC;gBAAE,QAAQ;gBAAO,MAAM;YAAe;YACtC;gBAAE,QAAQ;gBAAO,MAAM;YAAmB;YAC1C;gBAAE,QAAQ;gBAAO,MAAM;YAAe;YACtC;gBAAE,QAAQ;gBAAO,MAAM;YAAY;YACnC;gBAAE,QAAQ;gBAAO,MAAM;YAAU;YACjC;gBAAE,QAAQ;gBAAO,MAAM;YAAc;YACrC;gBAAE,QAAQ;gBAAO,MAAM;YAAa;YACpC;gBAAE,QAAQ;gBAAO,MAAM;YAAsB;YAC7C;gBAAE,QAAQ;gBAAO,MAAM;YAAY;YACnC;gBAAE,QAAQ;gBAAO,MAAM;YAAe;YACtC;gBAAE,QAAQ;gBAAO,MAAM;YAAa;YACpC;gBAAE,QAAQ;gBAAO,MAAM;YAAmB;YAC1C;gBAAE,QAAQ;gBAAO,MAAM;YAAsB;YAC7C;gBAAE,QAAQ;gBAAO,MAAM;YAAe;YACtC;gBAAE,QAAQ;gBAAO,MAAM;YAAgB;YACvC;gBAAE,QAAQ;gBAAO,MAAM;YAAW;YAClC;gBAAE,QAAQ;gBAAO,MAAM;YAAa;YACpC;gBAAE,QAAQ;gBAAO,MAAM;YAAS;YAChC;gBAAE,QAAQ;gBAAO,MAAM;YAAK;YAC5B;gBAAE,QAAQ;gBAAO,MAAM;YAAS;YAChC;gBAAE,QAAQ;gBAAO,MAAM;YAAQ;YAC/B;gBAAE,QAAQ;gBAAO,MAAM;YAAa;YACpC;gBAAE,QAAQ;gBAAO,MAAM;YAAgB;YACvC;gBAAE,QAAQ;gBAAO,MAAM;YAAc;YACrC;gBAAE,QAAQ;gBAAO,MAAM;YAAc;YACrC;gBAAE,QAAQ;gBAAO,MAAM;YAAc;YACrC;gBAAE,QAAQ;gBAAO,MAAM;YAAO;YAC9B;gBAAE,QAAQ;gBAAO,MAAM;YAAY;YACnC;gBAAE,QAAQ;gBAAO,MAAM;YAAY;YACnC;gBAAE,QAAQ;gBAAO,MAAM;YAAI;YAC3B;gBAAE,QAAQ;gBAAO,MAAM;YAAe;YACtC;gBAAE,QAAQ;gBAAO,MAAM;YAAsB;YAC7C;gBAAE,QAAQ;gBAAO,MAAM;YAAgB;YACvC;gBAAE,QAAQ;gBAAO,MAAM;YAAa;SACvC;IACL;AACJ;AAEO,MAAMC,YAAmB;IAC5B,MAAM;QACF,GAAGD,QAAQ,IAAI;QACf,OAAO;IACX;AACJ;AAEO,MAAME,oBAA2B;IACpC,MAAM;QACF,GAAGF,QAAQ,IAAI;QACf,OAAO;QACP,UAAU;IACd;AACJ;AAEO,MAAMG,kBAAyB;IAClC,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,aAAa;IACjB;AACJ;AAEO,MAAMI,YAAmB;IAC5B,MAAM;QACF,GAAGJ,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMK,aAAoB;IAC7B,MAAM;QACF,GAAGL,QAAQ,IAAI;QACf,YAAY;YACR,SAAS;YACT,SAAS;QACb;IACJ;AACJ;AAEO,MAAMM,WAAkB;IAC3B,MAAM;QACF,GAAGN,QAAQ,IAAI;QACf,OAAO;QACP,UAAU;IACd;AACJ;AAEO,MAAMO,cAAqB;IAC9B,MAAM;QACF,GAAGP,QAAQ,IAAI;QACf,OAAO;QACP,UAAU;QACV,aAAa;QACb,MAAM;QACN,YAAY;YACR,SAAS;YACT,SAAS;QACb;IACJ;AACJ;AAEO,MAAMQ,gBAAuB;IAChC,QAAQd,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAASH,KAAK,KAAK,IAAI;QACjD,MAAM,CAACe,YAAYC,cAAc,GAAGb,SAAS;YAAE,SAAS;YAAM,SAAS;QAAG;QAG1Ec,UAAU;YACNf,SAASF,KAAK,KAAK,IAAI;QAC3B,GAAG;YAACA,KAAK,KAAK;SAAC;QAEf,MAAMkB,eAAe,CAACC;YAClBjB,SAASiB;YAGLnB,KAAK,QAAQ,IAAI,CAACmB,WAClBH,cAAc;gBAAE,SAAS;gBAAO,SAAS;YAAwB,KAEjEA,cAAc;gBAAE,SAAS;gBAAM,SAAS;YAAG;QAEnD;QAGAC,UAAU;YACFjB,KAAK,QAAQ,IAAI,CAACC,QAClBe,cAAc;gBAAE,SAAS;gBAAO,SAAS;YAAwB,KAEjEA,cAAc;gBAAE,SAAS;gBAAM,SAAS;YAAG;QAEnD,GAAG;YAAChB,KAAK,QAAQ;YAAEC;SAAM;QAEzB,OAAO,WAAP,GACI,oBAACF,YAAUA;YACN,GAAGC,IAAI;YACR,OAAOC;YACP,UAAUiB;YACV,YAAYH;YACZ,UAAUf,KAAK,QAAQ;;IAGnC;IACA,MAAM;QACF,OAAO;QACP,UAAU;QACV,UAAU;QACV,aAAa;QACb,MAAM;QACN,OAAO;YACH;gBAAE,QAAQ;gBAAO,MAAM;YAAoB;YAC3C;gBAAE,QAAQ;gBAAO,MAAM;YAAW;YAClC;gBAAE,QAAQ;gBAAO,MAAM;YAAU;YACjC;gBAAE,QAAQ;gBAAO,MAAM;YAAc;YACrC;gBAAE,QAAQ;gBAAO,MAAM;YAAc;SACxC;QACD,OAAO;QACP,YAAYoB;IAChB;IACA,UAAU;QACN,OAAO;YACH,aAAa;YACb,SAAS;QACb;QACA,UAAU;YACN,aAAa;YACb,SAAS;QACb;QACA,UAAU;YACN,aAAa;YACb,SAAS;QACb;QACA,aAAa;YACT,aAAa;YACb,SAAS;QACb;QACA,MAAM;YACF,aAAa;YACb,SAAS;QACb;QACA,OAAO;YACH,aAAa;YACb,SAAS;QACb;QACA,OAAO;YACH,aAAa;QACjB;QACA,YAAY;YACR,aACI;QACR;QACA,UAAU;YACN,aAAa;QACjB;IACJ;AACJ"}
+{"version":3,"file":"IconPicker/IconPicker.stories.js","sources":["../../src/IconPicker/IconPicker.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { library } from \"@fortawesome/fontawesome-svg-core\";\nimport { fas } from \"@fortawesome/free-solid-svg-icons\";\nimport { IconPicker } from \"~/IconPicker/index.js\";\n\nconst meta: Meta<typeof IconPicker> = {\n    title: \"Components/Form/IconPicker\",\n    component: IconPicker,\n    argTypes: {\n        onChange: { action: \"onChange\" },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return <IconPicker {...args} value={value} onChange={setValue} />;\n    }\n};\n\nlibrary.add(fas);\n\nexport default meta;\ntype Story = StoryObj<typeof IconPicker>;\n\nexport const Default: Story = {\n    args: {\n        icons: [\n            { prefix: \"fas\", name: \"trash-restore-alt\" },\n            { prefix: \"fas\", name: \"trash-can-arrow-up\" },\n            { prefix: \"fas\", name: \"naira-sign\" },\n            { prefix: \"fas\", name: \"cart-arrow-down\" },\n            { prefix: \"fas\", name: \"walkie-talkie\" },\n            { prefix: \"fas\", name: \"file-edit\" },\n            { prefix: \"fas\", name: \"file-pen\" },\n            { prefix: \"fas\", name: \"receipt\" },\n            { prefix: \"fas\", name: \"pen-square\" },\n            { prefix: \"fas\", name: \"pencil-square\" },\n            { prefix: \"fas\", name: \"square-pen\" },\n            { prefix: \"fas\", name: \"suitcase-rolling\" },\n            { prefix: \"fas\", name: \"person-circle-exclamation\" },\n            { prefix: \"fas\", name: \"chevron-down\" },\n            { prefix: \"fas\", name: \"battery\" },\n            { prefix: \"fas\", name: \"battery-5\" },\n            { prefix: \"fas\", name: \"battery-full\" },\n            { prefix: \"fas\", name: \"skull-crossbones\" },\n            { prefix: \"fas\", name: \"code-compare\" },\n            { prefix: \"fas\", name: \"list-dots\" },\n            { prefix: \"fas\", name: \"list-ul\" },\n            { prefix: \"fas\", name: \"school-lock\" },\n            { prefix: \"fas\", name: \"tower-cell\" },\n            { prefix: \"fas\", name: \"long-arrow-alt-down\" },\n            { prefix: \"fas\", name: \"down-long\" },\n            { prefix: \"fas\", name: \"ranking-star\" },\n            { prefix: \"fas\", name: \"chess-king\" },\n            { prefix: \"fas\", name: \"person-harassing\" },\n            { prefix: \"fas\", name: \"brazilian-real-sign\" },\n            { prefix: \"fas\", name: \"landmark-alt\" },\n            { prefix: \"fas\", name: \"landmark-dome\" },\n            { prefix: \"fas\", name: \"arrow-up\" },\n            { prefix: \"fas\", name: \"television\" },\n            { prefix: \"fas\", name: \"tv-alt\" },\n            { prefix: \"fas\", name: \"tv\" },\n            { prefix: \"fas\", name: \"shrimp\" },\n            { prefix: \"fas\", name: \"tasks\" },\n            { prefix: \"fas\", name: \"list-check\" },\n            { prefix: \"fas\", name: \"jug-detergent\" },\n            { prefix: \"fas\", name: \"user-circle\" },\n            { prefix: \"fas\", name: \"circle-user\" },\n            { prefix: \"fas\", name: \"user-shield\" },\n            { prefix: \"fas\", name: \"wind\" },\n            { prefix: \"fas\", name: \"car-crash\" },\n            { prefix: \"fas\", name: \"car-burst\" },\n            { prefix: \"fas\", name: \"y\" },\n            { prefix: \"fas\", name: \"snowboarding\" },\n            { prefix: \"fas\", name: \"person-snowboarding\" },\n            { prefix: \"fas\", name: \"shipping-fast\" },\n            { prefix: \"fas\", name: \"truck-fast\" }\n        ]\n    }\n};\n\nexport const WithLabel: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const WithLabelRequired: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        required: true\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        label: \"Any field label\",\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 [value, setValue] = useState(args.value || null);\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        // Update value when args.value changes\n        useEffect(() => {\n            setValue(args.value || null);\n        }, [args.value]);\n\n        const handleChange = (newValue: any) => {\n            setValue(newValue);\n\n            // Simple required validation\n            if (args.required && !newValue) {\n                setValidation({ isValid: false, message: \"Please select an icon\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        };\n\n        // Validate on required change or value change\n        useEffect(() => {\n            if (args.required && !value) {\n                setValidation({ isValid: false, message: \"Please select an icon\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        }, [args.required, value]);\n\n        return (\n            <IconPicker\n                {...args}\n                value={value}\n                onChange={handleChange}\n                validation={validation}\n                required={args.required}\n            />\n        );\n    },\n    args: {\n        label: \"Select an Icon\",\n        required: true,\n        disabled: false,\n        description: \"Choose an icon for your button\",\n        note: \"Note: The selected icon will be displayed on your button\",\n        icons: [\n            { prefix: \"fas\", name: \"trash-restore-alt\" },\n            { prefix: \"fas\", name: \"file-pen\" },\n            { prefix: \"fas\", name: \"receipt\" },\n            { prefix: \"fas\", name: \"user-circle\" },\n            { prefix: \"fas\", name: \"circle-user\" }\n        ],\n        value: null,\n        validation: undefined\n    },\n    argTypes: {\n        label: {\n            description: \"Label text for the icon picker\",\n            control: \"text\"\n        },\n        required: {\n            description: \"Makes the field required when set to true\",\n            control: \"boolean\"\n        },\n        disabled: {\n            description: \"Disables the icon picker when set to true\",\n            control: \"boolean\"\n        },\n        description: {\n            description: \"Additional description text below the field\",\n            control: \"text\"\n        },\n        note: {\n            description: \"Additional note text below the field\",\n            control: \"text\"\n        },\n        icons: {\n            description: \"Array of available icons with prefix and name properties\",\n            control: \"object\"\n        },\n        value: {\n            description: \"The selected icon value (in format 'prefix/name')\"\n        },\n        validation: {\n            description:\n                \"Object containing validation state and message. Please refer to the example code for details on usage.\"\n        },\n        onChange: {\n            description: \"Function called when an icon is selected\"\n        }\n    }\n};\n"],"names":["meta","IconPicker","args","value","setValue","useState","library","fas","Default","WithLabel","WithLabelRequired","WithDescription","WithNotes","WithErrors","Disabled","FullExample","Documentation","validation","setValidation","useEffect","handleChange","newValue","undefined"],"mappings":"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"}

package/IconPicker/primitives/IconPickerPrimitive.d.ts

@@ -3,7 +3,7 @@ import type { InputPrimitiveProps } from "../../Input/index.js";
 import { type VariantProps } from "../../utils.js";
 import type { IconPickerIconDto } from "../domains/index.js";
 declare const iconPickerVariants: (props?: ({
-    size?: "md" | "lg" | "xl" | null | undefined;
+    size?: "lg" | "md" | "xl" | null | undefined;
     disabled?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface IconPickerPrimitiveProps extends VariantProps<typeof iconPickerVariants> {

package/IconPicker/primitives/IconPickerPrimitive.js

@@ -49,8 +49,7 @@ const IconPickerPrimitive = (props)=>{
         size: props.size
     }))), /*#__PURE__*/ react.createElement(PopoverPrimitive.Content, {
         align: "start",
-        className: "min-w-96",
-        onWheel: (e)=>e.stopPropagation()
+        className: "min-w-96"
     }, /*#__PURE__*/ react.createElement(IconPickerInput, {
         value: vm.searchQuery,
         onChange: searchIcon,

package/IconPicker/primitives/IconPickerPrimitive.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconPicker/primitives/IconPickerPrimitive.js","sources":["../../../src/IconPicker/primitives/IconPickerPrimitive.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\nimport type { InputPrimitiveProps } from \"~/Input/index.js\";\nimport { inputVariants } from \"~/Input/index.js\";\nimport { PopoverPrimitive } from \"~/Popover/index.js\";\nimport { cn, cva, type VariantProps } from \"~/utils.js\";\nimport { IconPickerGrid, IconPickerInput, IconPickerTrigger } from \"./components/index.js\";\nimport type { IconPickerIconDto } from \"../domains/index.js\";\nimport { useIconPicker } from \"./useIconPicker.js\";\n\nconst iconPickerVariants = cva(\"cursor-pointer text-neutral-strong\", {\n    variants: {\n        size: {\n            md: \"w-16\",\n            lg: \"w-16\",\n            xl: \"w-20\"\n        },\n        disabled: {\n            true: \"pointer-events-none\"\n        }\n    },\n    defaultVariants: {\n        size: \"lg\"\n    }\n});\n\ninterface IconPickerPrimitiveProps extends VariantProps<typeof iconPickerVariants> {\n    /**\n     * Indicates if the field is disabled.\n     */\n    disabled?: boolean;\n    /**\n     * Callback triggered when the value changes.\n     */\n    onChange?: (value: string) => void;\n    /**\n     * List of icons to be displayed in the icon picker.\n     */\n    icons: IconPickerIconDto[];\n    /**\n     * Indicates if the input field is invalid.\n     * Refer to `InputPrimitiveProps[\"invalid\"]` for possible values.\n     */\n    invalid?: InputPrimitiveProps[\"invalid\"];\n    /**\n     * Optional selected icon.\n     */\n    value?: string;\n    /**\n     * Variant of the input field.\n     * Refer to `InputPrimitiveProps[\"variant\"]` for possible values.\n     */\n    variant?: InputPrimitiveProps[\"variant\"];\n}\n\nconst IconPickerPrimitive = (props: IconPickerPrimitiveProps) => {\n    const { vm, setListOpenState, searchIcon, setSelectedIcon } = useIconPicker(props);\n    // TODO figure out a better way to type this ref, without using `as unknown as`\n    const inputRef = useRef<HTMLInputElement>(null as unknown as HTMLInputElement);\n\n    useEffect(() => {\n        setTimeout(() => {\n            if (vm.open && inputRef.current) {\n                inputRef.current.focus();\n            }\n        }, 50);\n    }, [vm.open]);\n\n    return (\n        <PopoverPrimitive open={vm.open} onOpenChange={setListOpenState}>\n            <PopoverPrimitive.Trigger asChild>\n                <button\n                    data-disabled={props.disabled}\n                    className={cn(\n                        inputVariants({\n                            size: props.size,\n                            variant: props.variant,\n                            invalid: props.invalid\n                        }),\n                        iconPickerVariants({ size: props.size, disabled: props.disabled })\n                    )}\n                >\n                    <IconPickerTrigger value={props.value} size={props.size} />\n                </button>\n            </PopoverPrimitive.Trigger>\n            <PopoverPrimitive.Content\n                align={\"start\"}\n                className={\"min-w-96\"}\n                onWheel={e => e.stopPropagation()} // Wheel event should not propagate to the parent: this fixes scrolling issues when the IconPicker is placed inside a Dialog.\n            >\n                <IconPickerInput value={vm.searchQuery} onChange={searchIcon} inputRef={inputRef} />\n                <IconPickerGrid\n                    icons={vm.icons}\n                    iconsLength={vm.iconsLength}\n                    onIconSelect={setSelectedIcon}\n                />\n            </PopoverPrimitive.Content>\n        </PopoverPrimitive>\n    );\n};\n\nexport { IconPickerPrimitive, type IconPickerPrimitiveProps };\n"],"names":["iconPickerVariants","cva","IconPickerPrimitive","props","vm","setListOpenState","searchIcon","setSelectedIcon","useIconPicker","inputRef","useRef","useEffect","setTimeout","PopoverPrimitive","cn","inputVariants","IconPickerTrigger","e","IconPickerInput","IconPickerGrid"],"mappings":";;;;;;AASA,MAAMA,qBAAqBC,IAAI,sCAAsC;IACjE,UAAU;QACN,MAAM;YACF,IAAI;YACJ,IAAI;YACJ,IAAI;QACR;QACA,UAAU;YACN,MAAM;QACV;IACJ;IACA,iBAAiB;QACb,MAAM;IACV;AACJ;AA+BA,MAAMC,sBAAsB,CAACC;IACzB,MAAM,EAAEC,EAAE,EAAEC,gBAAgB,EAAEC,UAAU,EAAEC,eAAe,EAAE,GAAGC,cAAcL;IAE5E,MAAMM,WAAWC,OAAyB;IAE1CC,UAAU;QACNC,WAAW;YACP,IAAIR,GAAG,IAAI,IAAIK,SAAS,OAAO,EAC3BA,SAAS,OAAO,CAAC,KAAK;QAE9B,GAAG;IACP,GAAG;QAACL,GAAG,IAAI;KAAC;IAEZ,OAAO,WAAP,GACI,oBAACS,kBAAgBA;QAAC,MAAMT,GAAG,IAAI;QAAE,cAAcC;qBAC3C,oBAACQ,iBAAiB,OAAO;QAAC;qBACtB,oBAAC;QACG,iBAAeV,MAAM,QAAQ;QAC7B,WAAWW,GACPC,cAAc;YACV,MAAMZ,MAAM,IAAI;YAChB,SAASA,MAAM,OAAO;YACtB,SAASA,MAAM,OAAO;QAC1B,IACAH,mBAAmB;YAAE,MAAMG,MAAM,IAAI;YAAE,UAAUA,MAAM,QAAQ;QAAC;qBAGpE,oBAACa,mBAAiBA;QAAC,OAAOb,MAAM,KAAK;QAAE,MAAMA,MAAM,IAAI;wBAG/D,oBAACU,iBAAiB,OAAO;QACrB,OAAO;QACP,WAAW;QACX,SAASI,CAAAA,IAAKA,EAAE,eAAe;qBAE/B,oBAACC,iBAAeA;QAAC,OAAOd,GAAG,WAAW;QAAE,UAAUE;QAAY,UAAUG;sBACxE,oBAACU,gBAAcA;QACX,OAAOf,GAAG,KAAK;QACf,aAAaA,GAAG,WAAW;QAC3B,cAAcG;;AAKlC"}
+{"version":3,"file":"IconPicker/primitives/IconPickerPrimitive.js","sources":["../../../src/IconPicker/primitives/IconPickerPrimitive.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\nimport type { InputPrimitiveProps } from \"~/Input/index.js\";\nimport { inputVariants } from \"~/Input/index.js\";\nimport { PopoverPrimitive } from \"~/Popover/index.js\";\nimport { cn, cva, type VariantProps } from \"~/utils.js\";\nimport { IconPickerGrid, IconPickerInput, IconPickerTrigger } from \"./components/index.js\";\nimport type { IconPickerIconDto } from \"../domains/index.js\";\nimport { useIconPicker } from \"./useIconPicker.js\";\n\nconst iconPickerVariants = cva(\"cursor-pointer text-neutral-strong\", {\n    variants: {\n        size: {\n            md: \"w-16\",\n            lg: \"w-16\",\n            xl: \"w-20\"\n        },\n        disabled: {\n            true: \"pointer-events-none\"\n        }\n    },\n    defaultVariants: {\n        size: \"lg\"\n    }\n});\n\ninterface IconPickerPrimitiveProps extends VariantProps<typeof iconPickerVariants> {\n    /**\n     * Indicates if the field is disabled.\n     */\n    disabled?: boolean;\n    /**\n     * Callback triggered when the value changes.\n     */\n    onChange?: (value: string) => void;\n    /**\n     * List of icons to be displayed in the icon picker.\n     */\n    icons: IconPickerIconDto[];\n    /**\n     * Indicates if the input field is invalid.\n     * Refer to `InputPrimitiveProps[\"invalid\"]` for possible values.\n     */\n    invalid?: InputPrimitiveProps[\"invalid\"];\n    /**\n     * Optional selected icon.\n     */\n    value?: string;\n    /**\n     * Variant of the input field.\n     * Refer to `InputPrimitiveProps[\"variant\"]` for possible values.\n     */\n    variant?: InputPrimitiveProps[\"variant\"];\n}\n\nconst IconPickerPrimitive = (props: IconPickerPrimitiveProps) => {\n    const { vm, setListOpenState, searchIcon, setSelectedIcon } = useIconPicker(props);\n    // TODO figure out a better way to type this ref, without using `as unknown as`\n    const inputRef = useRef<HTMLInputElement>(null as unknown as HTMLInputElement);\n\n    useEffect(() => {\n        setTimeout(() => {\n            if (vm.open && inputRef.current) {\n                inputRef.current.focus();\n            }\n        }, 50);\n    }, [vm.open]);\n\n    return (\n        <PopoverPrimitive open={vm.open} onOpenChange={setListOpenState}>\n            <PopoverPrimitive.Trigger asChild>\n                <button\n                    data-disabled={props.disabled}\n                    className={cn(\n                        inputVariants({\n                            size: props.size,\n                            variant: props.variant,\n                            invalid: props.invalid\n                        }),\n                        iconPickerVariants({ size: props.size, disabled: props.disabled })\n                    )}\n                >\n                    <IconPickerTrigger value={props.value} size={props.size} />\n                </button>\n            </PopoverPrimitive.Trigger>\n            <PopoverPrimitive.Content align={\"start\"} className={\"min-w-96\"}>\n                <IconPickerInput value={vm.searchQuery} onChange={searchIcon} inputRef={inputRef} />\n                <IconPickerGrid\n                    icons={vm.icons}\n                    iconsLength={vm.iconsLength}\n                    onIconSelect={setSelectedIcon}\n                />\n            </PopoverPrimitive.Content>\n        </PopoverPrimitive>\n    );\n};\n\nexport { IconPickerPrimitive, type IconPickerPrimitiveProps };\n"],"names":["iconPickerVariants","cva","IconPickerPrimitive","props","vm","setListOpenState","searchIcon","setSelectedIcon","useIconPicker","inputRef","useRef","useEffect","setTimeout","PopoverPrimitive","cn","inputVariants","IconPickerTrigger","IconPickerInput","IconPickerGrid"],"mappings":";;;;;;AASA,MAAMA,qBAAqBC,IAAI,sCAAsC;IACjE,UAAU;QACN,MAAM;YACF,IAAI;YACJ,IAAI;YACJ,IAAI;QACR;QACA,UAAU;YACN,MAAM;QACV;IACJ;IACA,iBAAiB;QACb,MAAM;IACV;AACJ;AA+BA,MAAMC,sBAAsB,CAACC;IACzB,MAAM,EAAEC,EAAE,EAAEC,gBAAgB,EAAEC,UAAU,EAAEC,eAAe,EAAE,GAAGC,cAAcL;IAE5E,MAAMM,WAAWC,OAAyB;IAE1CC,UAAU;QACNC,WAAW;YACP,IAAIR,GAAG,IAAI,IAAIK,SAAS,OAAO,EAC3BA,SAAS,OAAO,CAAC,KAAK;QAE9B,GAAG;IACP,GAAG;QAACL,GAAG,IAAI;KAAC;IAEZ,OAAO,WAAP,GACI,oBAACS,kBAAgBA;QAAC,MAAMT,GAAG,IAAI;QAAE,cAAcC;qBAC3C,oBAACQ,iBAAiB,OAAO;QAAC;qBACtB,oBAAC;QACG,iBAAeV,MAAM,QAAQ;QAC7B,WAAWW,GACPC,cAAc;YACV,MAAMZ,MAAM,IAAI;YAChB,SAASA,MAAM,OAAO;YACtB,SAASA,MAAM,OAAO;QAC1B,IACAH,mBAAmB;YAAE,MAAMG,MAAM,IAAI;YAAE,UAAUA,MAAM,QAAQ;QAAC;qBAGpE,oBAACa,mBAAiBA;QAAC,OAAOb,MAAM,KAAK;QAAE,MAAMA,MAAM,IAAI;wBAG/D,oBAACU,iBAAiB,OAAO;QAAC,OAAO;QAAS,WAAW;qBACjD,oBAACI,iBAAeA;QAAC,OAAOb,GAAG,WAAW;QAAE,UAAUE;QAAY,UAAUG;sBACxE,oBAACS,gBAAcA;QACX,OAAOd,GAAG,KAAK;QACf,aAAaA,GAAG,WAAW;QAC3B,cAAcG;;AAKlC"}

package/IconPicker/primitives/IconPickerPrimitive.stories.d.ts

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