@webiny/admin-ui 6.4.0-beta.2 → 6.4.0-beta.4

package/FillViewport/FillViewport.d.ts

@@ -0,0 +1,60 @@
+import React from "react";
+type FillViewportProps = React.HTMLAttributes<HTMLDivElement>;
+declare const FillViewportHeight: (({ children, style: userStyle, ...rest }: FillViewportProps) => React.JSX.Element) & {
+    original: ({ children, style: userStyle, ...rest }: FillViewportProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: (({ children, style: userStyle, ...rest }: FillViewportProps) => React.JSX.Element) & {
+        original: ({ children, style: userStyle, ...rest }: FillViewportProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<(({ children, style: userStyle, ...rest }: FillViewportProps) => React.JSX.Element) & {
+        original: ({ children, style: userStyle, ...rest }: FillViewportProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+declare const FillViewportWidth: (({ children, style: userStyle, ...rest }: FillViewportProps) => React.JSX.Element) & {
+    original: ({ children, style: userStyle, ...rest }: FillViewportProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: (({ children, style: userStyle, ...rest }: FillViewportProps) => React.JSX.Element) & {
+        original: ({ children, style: userStyle, ...rest }: FillViewportProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<(({ children, style: userStyle, ...rest }: FillViewportProps) => React.JSX.Element) & {
+        original: ({ children, style: userStyle, ...rest }: FillViewportProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+declare const FillViewport: (({ children, style: userStyle, ...rest }: FillViewportProps) => React.JSX.Element) & {
+    original: ({ children, style: userStyle, ...rest }: FillViewportProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: (({ children, style: userStyle, ...rest }: FillViewportProps) => React.JSX.Element) & {
+        original: ({ children, style: userStyle, ...rest }: FillViewportProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<(({ children, style: userStyle, ...rest }: FillViewportProps) => React.JSX.Element) & {
+        original: ({ children, style: userStyle, ...rest }: FillViewportProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+export { FillViewportHeight, FillViewportWidth, FillViewport };

package/FillViewport/FillViewport.js

@@ -0,0 +1,67 @@
+import react, { useEffect, useRef, useState } from "react";
+import { makeDecoratable } from "../utils.js";
+function useFillViewportStyle(axis) {
+    const ref = useRef(null);
+    const [style, setStyle] = useState();
+    useEffect(()=>{
+        const el = ref.current;
+        if (!el) return;
+        const measure = ()=>{
+            const rect = el.getBoundingClientRect();
+            const next = {};
+            if ("width" === axis || "both" === axis) next.width = window.innerWidth - rect.left;
+            if ("height" === axis || "both" === axis) next.height = window.innerHeight - rect.top;
+            setStyle(next);
+        };
+        measure();
+        const ro = new ResizeObserver(measure);
+        ro.observe(document.documentElement);
+        return ()=>ro.disconnect();
+    }, []);
+    return {
+        ref,
+        style
+    };
+}
+const BaseFillViewportHeight = ({ children, style: userStyle, ...rest })=>{
+    const { ref, style } = useFillViewportStyle("height");
+    return /*#__PURE__*/ react.createElement("div", {
+        ...rest,
+        ref: ref,
+        "data-fill-viewport": "height",
+        style: void 0 !== style ? {
+            height: style.height,
+            ...userStyle
+        } : userStyle
+    }, children);
+};
+const BaseFillViewportWidth = ({ children, style: userStyle, ...rest })=>{
+    const { ref, style } = useFillViewportStyle("width");
+    return /*#__PURE__*/ react.createElement("div", {
+        ...rest,
+        ref: ref,
+        "data-fill-viewport": "width",
+        style: void 0 !== style ? {
+            width: style.width,
+            ...userStyle
+        } : userStyle
+    }, children);
+};
+const BaseFillViewport = ({ children, style: userStyle, ...rest })=>{
+    const { ref, style } = useFillViewportStyle("both");
+    return /*#__PURE__*/ react.createElement("div", {
+        ...rest,
+        ref: ref,
+        "data-fill-viewport": "both",
+        style: void 0 !== style ? {
+            ...style,
+            ...userStyle
+        } : userStyle
+    }, children);
+};
+const FillViewportHeight = makeDecoratable("FillViewportHeight", BaseFillViewportHeight);
+const FillViewportWidth = makeDecoratable("FillViewportWidth", BaseFillViewportWidth);
+const FillViewport = makeDecoratable("FillViewport", BaseFillViewport);
+export { FillViewport, FillViewportHeight, FillViewportWidth };
+
+//# sourceMappingURL=FillViewport.js.map

package/FillViewport/FillViewport.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FillViewport/FillViewport.js","sources":["../../src/FillViewport/FillViewport.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport { makeDecoratable } from \"~/utils.js\";\n\ninterface FillViewportStyle {\n    width?: number;\n    height?: number;\n}\n\nfunction useFillViewportStyle(axis: \"width\" | \"height\" | \"both\") {\n    const ref = useRef<HTMLDivElement>(null);\n    const [style, setStyle] = useState<FillViewportStyle>();\n\n    useEffect(() => {\n        const el = ref.current;\n        if (!el) {\n            return;\n        }\n\n        const measure = () => {\n            const rect = el.getBoundingClientRect();\n            const next: FillViewportStyle = {};\n\n            if (axis === \"width\" || axis === \"both\") {\n                next.width = window.innerWidth - rect.left;\n            }\n\n            if (axis === \"height\" || axis === \"both\") {\n                next.height = window.innerHeight - rect.top;\n            }\n\n            setStyle(next);\n        };\n\n        measure();\n\n        const ro = new ResizeObserver(measure);\n        ro.observe(document.documentElement);\n\n        return () => ro.disconnect();\n    }, []);\n\n    return { ref, style };\n}\n\ntype FillViewportProps = React.HTMLAttributes<HTMLDivElement>;\n\nconst BaseFillViewportHeight = ({ children, style: userStyle, ...rest }: FillViewportProps) => {\n    const { ref, style } = useFillViewportStyle(\"height\");\n\n    return (\n        <div\n            {...rest}\n            ref={ref}\n            data-fill-viewport=\"height\"\n            style={style !== undefined ? { height: style.height, ...userStyle } : userStyle}\n        >\n            {children}\n        </div>\n    );\n};\n\nconst BaseFillViewportWidth = ({ children, style: userStyle, ...rest }: FillViewportProps) => {\n    const { ref, style } = useFillViewportStyle(\"width\");\n\n    return (\n        <div\n            {...rest}\n            ref={ref}\n            data-fill-viewport=\"width\"\n            style={style !== undefined ? { width: style.width, ...userStyle } : userStyle}\n        >\n            {children}\n        </div>\n    );\n};\n\nconst BaseFillViewport = ({ children, style: userStyle, ...rest }: FillViewportProps) => {\n    const { ref, style } = useFillViewportStyle(\"both\");\n\n    return (\n        <div\n            {...rest}\n            ref={ref}\n            data-fill-viewport=\"both\"\n            style={style !== undefined ? { ...style, ...userStyle } : userStyle}\n        >\n            {children}\n        </div>\n    );\n};\n\nconst FillViewportHeight = makeDecoratable(\"FillViewportHeight\", BaseFillViewportHeight);\nconst FillViewportWidth = makeDecoratable(\"FillViewportWidth\", BaseFillViewportWidth);\nconst FillViewport = makeDecoratable(\"FillViewport\", BaseFillViewport);\n\nexport { FillViewportHeight, FillViewportWidth, FillViewport };\n"],"names":["useFillViewportStyle","axis","ref","useRef","style","setStyle","useState","useEffect","el","measure","rect","next","window","ro","ResizeObserver","document","BaseFillViewportHeight","children","userStyle","rest","undefined","BaseFillViewportWidth","BaseFillViewport","FillViewportHeight","makeDecoratable","FillViewportWidth","FillViewport"],"mappings":";;AAQA,SAASA,qBAAqBC,IAAiC;IAC3D,MAAMC,MAAMC,OAAuB;IACnC,MAAM,CAACC,OAAOC,SAAS,GAAGC;IAE1BC,UAAU;QACN,MAAMC,KAAKN,IAAI,OAAO;QACtB,IAAI,CAACM,IACD;QAGJ,MAAMC,UAAU;YACZ,MAAMC,OAAOF,GAAG,qBAAqB;YACrC,MAAMG,OAA0B,CAAC;YAEjC,IAAIV,AAAS,YAATA,QAAoBA,AAAS,WAATA,MACpBU,KAAK,KAAK,GAAGC,OAAO,UAAU,GAAGF,KAAK,IAAI;YAG9C,IAAIT,AAAS,aAATA,QAAqBA,AAAS,WAATA,MACrBU,KAAK,MAAM,GAAGC,OAAO,WAAW,GAAGF,KAAK,GAAG;YAG/CL,SAASM;QACb;QAEAF;QAEA,MAAMI,KAAK,IAAIC,eAAeL;QAC9BI,GAAG,OAAO,CAACE,SAAS,eAAe;QAEnC,OAAO,IAAMF,GAAG,UAAU;IAC9B,GAAG,EAAE;IAEL,OAAO;QAAEX;QAAKE;IAAM;AACxB;AAIA,MAAMY,yBAAyB,CAAC,EAAEC,QAAQ,EAAE,OAAOC,SAAS,EAAE,GAAGC,MAAyB;IACtF,MAAM,EAAEjB,GAAG,EAAEE,KAAK,EAAE,GAAGJ,qBAAqB;IAE5C,OAAO,WAAP,GACI,oBAAC;QACI,GAAGmB,IAAI;QACR,KAAKjB;QACL,sBAAmB;QACnB,OAAOE,AAAUgB,WAAVhB,QAAsB;YAAE,QAAQA,MAAM,MAAM;YAAE,GAAGc,SAAS;QAAC,IAAIA;OAErED;AAGb;AAEA,MAAMI,wBAAwB,CAAC,EAAEJ,QAAQ,EAAE,OAAOC,SAAS,EAAE,GAAGC,MAAyB;IACrF,MAAM,EAAEjB,GAAG,EAAEE,KAAK,EAAE,GAAGJ,qBAAqB;IAE5C,OAAO,WAAP,GACI,oBAAC;QACI,GAAGmB,IAAI;QACR,KAAKjB;QACL,sBAAmB;QACnB,OAAOE,AAAUgB,WAAVhB,QAAsB;YAAE,OAAOA,MAAM,KAAK;YAAE,GAAGc,SAAS;QAAC,IAAIA;OAEnED;AAGb;AAEA,MAAMK,mBAAmB,CAAC,EAAEL,QAAQ,EAAE,OAAOC,SAAS,EAAE,GAAGC,MAAyB;IAChF,MAAM,EAAEjB,GAAG,EAAEE,KAAK,EAAE,GAAGJ,qBAAqB;IAE5C,OAAO,WAAP,GACI,oBAAC;QACI,GAAGmB,IAAI;QACR,KAAKjB;QACL,sBAAmB;QACnB,OAAOE,AAAUgB,WAAVhB,QAAsB;YAAE,GAAGA,KAAK;YAAE,GAAGc,SAAS;QAAC,IAAIA;OAEzDD;AAGb;AAEA,MAAMM,qBAAqBC,gBAAgB,sBAAsBR;AACjE,MAAMS,oBAAoBD,gBAAgB,qBAAqBH;AAC/D,MAAMK,eAAeF,gBAAgB,gBAAgBF"}

package/FillViewport/index.d.ts

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

package/FillViewport/index.js

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

package/Grid/Grid.d.ts

@@ -31,7 +31,7 @@ declare const gridVariants: (props?: ({
     gap?: "none" | "small" | "compact" | "micro" | "comfortable" | "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;

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.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.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.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.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":"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"}
+{"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":";;;;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"}

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;

package/IconPicker/primitives/IconPickerPrimitive.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconPicker/primitives/IconPickerPrimitive.stories.js","sources":["../../../src/IconPicker/primitives/IconPickerPrimitive.stories.tsx"],"sourcesContent":["import React, { useState } 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 { IconPickerPrimitive } from \"./IconPickerPrimitive.js\";\n\nconst meta: Meta<typeof IconPickerPrimitive> = {\n    title: \"Components/Form Primitives/IconPicker\",\n    component: IconPickerPrimitive,\n    argTypes: {\n        onChange: { action: \"onChange\" }\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return (\n            <div className={\"w-full\"}>\n                <IconPickerPrimitive {...args} value={value} onChange={setValue} />\n                <div className={\"mt-4 text-center\"}>\n                    Current selected value: <pre>{value}</pre>\n                </div>\n            </div>\n        );\n    },\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nlibrary.add(fas);\n\nexport default meta;\ntype Story = StoryObj<typeof IconPickerPrimitive>;\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 WithDefaultValue: Story = {\n    args: {\n        ...Default.args,\n        value: \"fas/panorama\"\n    }\n};\n\nexport const MediumSize: Story = {\n    args: {\n        ...Default.args,\n        size: \"md\"\n    }\n};\n\nexport const LargeSize: Story = {\n    args: {\n        ...Default.args,\n        size: \"lg\"\n    }\n};\n\nexport const ExtraLargeSize: Story = {\n    args: {\n        ...Default.args,\n        size: \"xl\"\n    }\n};\n\nexport const PrimaryVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"primary\"\n    }\n};\n\nexport const PrimaryVariantDisabled: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const PrimaryVariantInvalid: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const SecondaryVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"secondary\"\n    }\n};\n\nexport const SecondaryVariantDisabled: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const SecondaryVariantInvalid: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const GhostVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"ghost\"\n    }\n};\n\nexport const GhostVariantDisabled: Story = {\n    args: {\n        ...GhostVariant.args,\n        disabled: true\n    }\n};\n\nexport const GhostVariantInvalid: Story = {\n    args: {\n        ...GhostVariant.args,\n        invalid: true\n    }\n};\n"],"names":["meta","IconPickerPrimitive","args","value","setValue","useState","library","fas","Default","WithDefaultValue","MediumSize","LargeSize","ExtraLargeSize","PrimaryVariant","PrimaryVariantDisabled","PrimaryVariantInvalid","SecondaryVariant","SecondaryVariantDisabled","SecondaryVariantInvalid","GhostVariant","GhostVariantDisabled","GhostVariantInvalid"],"mappings":"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"}
+{"version":3,"file":"IconPicker/primitives/IconPickerPrimitive.stories.js","sources":["../../../src/IconPicker/primitives/IconPickerPrimitive.stories.tsx"],"sourcesContent":["import React, { useState } 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 { IconPickerPrimitive } from \"./IconPickerPrimitive.js\";\n\nconst meta: Meta<typeof IconPickerPrimitive> = {\n    title: \"Components/Form Primitives/IconPicker\",\n    component: IconPickerPrimitive,\n    argTypes: {\n        onChange: { action: \"onChange\" }\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return (\n            <div className={\"w-full\"}>\n                <IconPickerPrimitive {...args} value={value} onChange={setValue} />\n                <div className={\"mt-4 text-center\"}>\n                    Current selected value: <pre>{value}</pre>\n                </div>\n            </div>\n        );\n    },\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nlibrary.add(fas);\n\nexport default meta;\ntype Story = StoryObj<typeof IconPickerPrimitive>;\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 WithDefaultValue: Story = {\n    args: {\n        ...Default.args,\n        value: \"fas/panorama\"\n    }\n};\n\nexport const MediumSize: Story = {\n    args: {\n        ...Default.args,\n        size: \"md\"\n    }\n};\n\nexport const LargeSize: Story = {\n    args: {\n        ...Default.args,\n        size: \"lg\"\n    }\n};\n\nexport const ExtraLargeSize: Story = {\n    args: {\n        ...Default.args,\n        size: \"xl\"\n    }\n};\n\nexport const PrimaryVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"primary\"\n    }\n};\n\nexport const PrimaryVariantDisabled: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const PrimaryVariantInvalid: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const SecondaryVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"secondary\"\n    }\n};\n\nexport const SecondaryVariantDisabled: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const SecondaryVariantInvalid: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const GhostVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"ghost\"\n    }\n};\n\nexport const GhostVariantDisabled: Story = {\n    args: {\n        ...GhostVariant.args,\n        disabled: true\n    }\n};\n\nexport const GhostVariantInvalid: Story = {\n    args: {\n        ...GhostVariant.args,\n        invalid: true\n    }\n};\n"],"names":["meta","IconPickerPrimitive","args","value","setValue","useState","library","fas","Default","WithDefaultValue","MediumSize","LargeSize","ExtraLargeSize","PrimaryVariant","PrimaryVariantDisabled","PrimaryVariantInvalid","SecondaryVariant","SecondaryVariantDisabled","SecondaryVariantInvalid","GhostVariant","GhostVariantDisabled","GhostVariantInvalid"],"mappings":"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"}

package/Input/Input.stories.d.ts

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

package/Input/Input.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input/Input.stories.js","sources":["../../src/Input/Input.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { Input } from \"~/Input/index.js\";\n\nconst meta: Meta<typeof Input> = {\n    title: \"Components/Form/Input\",\n    component: Input,\n    argTypes: {\n        onChange: { action: \"onChange\" },\n        type: {\n            control: \"select\",\n            options: [\n                \"text\",\n                \"number\",\n                \"email\",\n                \"password\",\n                \"tel\",\n                \"url\",\n                \"search\",\n                \"date\",\n                \"datetime-local\",\n                \"month\",\n                \"week\",\n                \"time\",\n                \"color\",\n                \"file\",\n                \"checkbox\",\n                \"radio\",\n                \"range\",\n                \"hidden\",\n                \"button\",\n                \"submit\",\n                \"reset\",\n                \"image\"\n            ],\n            defaultValue: \"text\"\n        },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Input>;\n\nexport const Default: Story = {};\n\nexport const WithLabel: Story = {\n    args: {\n        label: \"Any field label\"\n    }\n};\n\nexport const WithLabelRequired: Story = {\n    args: {\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const WithNotes: Story = {\n    args: {\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const WithErrors: Story = {\n    args: {\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const WithValidateFunction: Story = {\n    render: args => {\n        const [value, setValue] = useState(\"\");\n        const [validation, setValidation] = useState<any>({ isValid: true, message: undefined });\n\n        const validate = async () => {\n            // Simulate API call delay\n            await new Promise(resolve => setTimeout(resolve, 500));\n\n            // Example validation: check if email already exists\n            if (value.includes(\"exists@\")) {\n                setValidation({ isValid: false, message: \"This email is already registered\" });\n            } else {\n                setValidation({ isValid: true, message: undefined });\n            }\n        };\n\n        return (\n            <Input\n                {...args}\n                type=\"email\"\n                label=\"Email\"\n                placeholder=\"Enter your email\"\n                value={value}\n                onChange={newValue => setValue(newValue)}\n                validate={validate}\n                validation={validation}\n            />\n        );\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(\"\");\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        const handleValidation = () => {\n            if (args.required && !value.trim()) {\n                setValidation({ isValid: false, message: \"This field is required\" });\n            } else if (args.minLength && value.trim().length < args.minLength) {\n                setValidation({\n                    isValid: false,\n                    message: `Must be at least ${args.minLength} characters long`\n                });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        };\n\n        return (\n            <Input\n                {...args}\n                value={value}\n                onChange={newValue => setValue(newValue)}\n                validation={validation}\n                onBlur={handleValidation}\n                onEnter={handleValidation}\n            />\n        );\n    },\n    args: {\n        type: \"text\",\n        size: \"lg\",\n        variant: \"primary\",\n        label: \"Full Name\",\n        description: \"Enter your full name as it appears on your ID\",\n        note: \"This will be used for official documentation\",\n        placeholder: \"Enter your full name\",\n        required: true,\n        disabled: false,\n        startIcon: undefined,\n        endIcon: undefined,\n        minLength: 3,\n        maxLength: undefined,\n        onChange: undefined,\n        onBlur: undefined,\n        onEnter: undefined,\n        validation: undefined,\n        validate: undefined\n    },\n    argTypes: {\n        type: {\n            description: \"HTML input type attribute\",\n            control: \"select\",\n            options: [\n                \"text\",\n                \"number\",\n                \"email\",\n                \"password\",\n                \"tel\",\n                \"url\",\n                \"search\",\n                \"date\",\n                \"datetime-local\",\n                \"month\",\n                \"week\",\n                \"time\",\n                \"color\",\n                \"file\"\n            ],\n            defaultValue: \"text\"\n        },\n        size: {\n            description: \"Input field size\",\n            control: \"select\",\n            options: [\"md\", \"lg\", \"xl\"],\n            defaultValue: \"lg\"\n        },\n        variant: {\n            description: \"Input field style variant\",\n            control: \"select\",\n            options: [\"primary\", \"secondary\", \"ghost\", \"ghost-negative\"],\n            defaultValue: \"primary\"\n        },\n        label: {\n            description: \"Label text displayed above the input\",\n            control: \"text\"\n        },\n        description: {\n            description: \"Helper text displayed below the label\",\n            control: \"text\"\n        },\n        note: {\n            description: \"Additional note displayed below the input\",\n            control: \"text\"\n        },\n        placeholder: {\n            description: \"Placeholder text shown when input is empty\",\n            control: \"text\"\n        },\n        required: {\n            description: \"Makes the input field required\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        disabled: {\n            description: \"Disables the input field\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        startIcon: {\n            description: \"Icon displayed at the start of the input\"\n        },\n        endIcon: {\n            description: \"Icon displayed at the end of the input\"\n        },\n        minLength: {\n            description: \"Minimum number of characters required\",\n            control: \"number\",\n            defaultValue: 3\n        },\n        maxLength: {\n            description:\n                \"Maximum number of characters allowed. To apply this maxLength, update the code similarly to how it's done for minLength. Refer to the minLength example above for guidance.\",\n            control: \"number\"\n        },\n        validation: {\n            description:\n                \"Validation state and error message. Please refer to the example code for details on usage.\"\n        },\n        validate: {\n            description: \"Custom validation function\"\n        },\n        onChange: {\n            description: \"Callback function when input value changes\"\n        },\n        onBlur: {\n            description: \"Callback function when input loses focus\"\n        },\n        onEnter: {\n            description: \"Callback function when Enter key is pressed\"\n        }\n    } // Removed forwardEventOnChange and inputRef\n};\n"],"names":["meta","Input","Default","WithLabel","WithLabelRequired","WithDescription","WithNotes","WithErrors","Disabled","WithValidateFunction","args","value","setValue","useState","validation","setValidation","undefined","validate","Promise","resolve","setTimeout","newValue","FullExample","Documentation","handleValidation"],"mappings":"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"}
+{"version":3,"file":"Input/Input.stories.js","sources":["../../src/Input/Input.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { Input } from \"~/Input/index.js\";\n\nconst meta: Meta<typeof Input> = {\n    title: \"Components/Form/Input\",\n    component: Input,\n    argTypes: {\n        onChange: { action: \"onChange\" },\n        type: {\n            control: \"select\",\n            options: [\n                \"text\",\n                \"number\",\n                \"email\",\n                \"password\",\n                \"tel\",\n                \"url\",\n                \"search\",\n                \"date\",\n                \"datetime-local\",\n                \"month\",\n                \"week\",\n                \"time\",\n                \"color\",\n                \"file\",\n                \"checkbox\",\n                \"radio\",\n                \"range\",\n                \"hidden\",\n                \"button\",\n                \"submit\",\n                \"reset\",\n                \"image\"\n            ],\n            defaultValue: \"text\"\n        },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Input>;\n\nexport const Default: Story = {};\n\nexport const WithLabel: Story = {\n    args: {\n        label: \"Any field label\"\n    }\n};\n\nexport const WithLabelRequired: Story = {\n    args: {\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const WithNotes: Story = {\n    args: {\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const WithErrors: Story = {\n    args: {\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const WithValidateFunction: Story = {\n    render: args => {\n        const [value, setValue] = useState(\"\");\n        const [validation, setValidation] = useState<any>({ isValid: true, message: undefined });\n\n        const validate = async () => {\n            // Simulate API call delay\n            await new Promise(resolve => setTimeout(resolve, 500));\n\n            // Example validation: check if email already exists\n            if (value.includes(\"exists@\")) {\n                setValidation({ isValid: false, message: \"This email is already registered\" });\n            } else {\n                setValidation({ isValid: true, message: undefined });\n            }\n        };\n\n        return (\n            <Input\n                {...args}\n                type=\"email\"\n                label=\"Email\"\n                placeholder=\"Enter your email\"\n                value={value}\n                onChange={newValue => setValue(newValue)}\n                validate={validate}\n                validation={validation}\n            />\n        );\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(\"\");\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        const handleValidation = () => {\n            if (args.required && !value.trim()) {\n                setValidation({ isValid: false, message: \"This field is required\" });\n            } else if (args.minLength && value.trim().length < args.minLength) {\n                setValidation({\n                    isValid: false,\n                    message: `Must be at least ${args.minLength} characters long`\n                });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        };\n\n        return (\n            <Input\n                {...args}\n                value={value}\n                onChange={newValue => setValue(newValue)}\n                validation={validation}\n                onBlur={handleValidation}\n                onEnter={handleValidation}\n            />\n        );\n    },\n    args: {\n        type: \"text\",\n        size: \"lg\",\n        variant: \"primary\",\n        label: \"Full Name\",\n        description: \"Enter your full name as it appears on your ID\",\n        note: \"This will be used for official documentation\",\n        placeholder: \"Enter your full name\",\n        required: true,\n        disabled: false,\n        startIcon: undefined,\n        endIcon: undefined,\n        minLength: 3,\n        maxLength: undefined,\n        onChange: undefined,\n        onBlur: undefined,\n        onEnter: undefined,\n        validation: undefined,\n        validate: undefined\n    },\n    argTypes: {\n        type: {\n            description: \"HTML input type attribute\",\n            control: \"select\",\n            options: [\n                \"text\",\n                \"number\",\n                \"email\",\n                \"password\",\n                \"tel\",\n                \"url\",\n                \"search\",\n                \"date\",\n                \"datetime-local\",\n                \"month\",\n                \"week\",\n                \"time\",\n                \"color\",\n                \"file\"\n            ],\n            defaultValue: \"text\"\n        },\n        size: {\n            description: \"Input field size\",\n            control: \"select\",\n            options: [\"md\", \"lg\", \"xl\"],\n            defaultValue: \"lg\"\n        },\n        variant: {\n            description: \"Input field style variant\",\n            control: \"select\",\n            options: [\"primary\", \"secondary\", \"ghost\", \"ghost-negative\"],\n            defaultValue: \"primary\"\n        },\n        label: {\n            description: \"Label text displayed above the input\",\n            control: \"text\"\n        },\n        description: {\n            description: \"Helper text displayed below the label\",\n            control: \"text\"\n        },\n        note: {\n            description: \"Additional note displayed below the input\",\n            control: \"text\"\n        },\n        placeholder: {\n            description: \"Placeholder text shown when input is empty\",\n            control: \"text\"\n        },\n        required: {\n            description: \"Makes the input field required\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        disabled: {\n            description: \"Disables the input field\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        startIcon: {\n            description: \"Icon displayed at the start of the input\"\n        },\n        endIcon: {\n            description: \"Icon displayed at the end of the input\"\n        },\n        minLength: {\n            description: \"Minimum number of characters required\",\n            control: \"number\",\n            defaultValue: 3\n        },\n        maxLength: {\n            description:\n                \"Maximum number of characters allowed. To apply this maxLength, update the code similarly to how it's done for minLength. Refer to the minLength example above for guidance.\",\n            control: \"number\"\n        },\n        validation: {\n            description:\n                \"Validation state and error message. Please refer to the example code for details on usage.\"\n        },\n        validate: {\n            description: \"Custom validation function\"\n        },\n        onChange: {\n            description: \"Callback function when input value changes\"\n        },\n        onBlur: {\n            description: \"Callback function when input loses focus\"\n        },\n        onEnter: {\n            description: \"Callback function when Enter key is pressed\"\n        }\n    } // Removed forwardEventOnChange and inputRef\n};\n"],"names":["meta","Input","Default","WithLabel","WithLabelRequired","WithDescription","WithNotes","WithErrors","Disabled","WithValidateFunction","args","value","setValue","useState","validation","setValidation","undefined","validate","Promise","resolve","setTimeout","newValue","FullExample","Documentation","handleValidation"],"mappings":"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"}

package/Input/InputPrimitive.stories.d.ts

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