@webiny/admin-ui 6.2.0-beta.0 → 6.3.0-beta.0

package/Sidebar/Sidebar.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';
+import { Canvas, Meta, Controls } from "@storybook/addon-docs/blocks";
 
-import * as SidebarStories from './Sidebar.stories';
+import * as SidebarStories from "./Sidebar.stories";
 
 <Meta of={SidebarStories} />
 
@@ -17,55 +17,44 @@ import { ReactComponent as CmsIcon } from "@webiny/icons/web.svg";
 import { ReactComponent as PageBuilderIcon } from "@webiny/icons/table_chart.svg";
 
 const SidebarExample = () => {
-    return (
-        <SidebarProvider>
-            <Sidebar
-                title={"Webiny"}
-                icon={
-                    <Sidebar.Icon
-                        element={<img src="/logo.png" alt="Webiny" />}
-                        label={"Webiny"}
-                    />
-                }
-            >
-                <Sidebar.Link
-                    text={"Headless CMS"}
-                    to={"/cms"}
-                    icon={<Sidebar.Item.Icon label="Headless CMS" element={<CmsIcon />} />}
-                />
-                <Sidebar.Item
-                    text={"Page Builder"}
-                    icon={<Sidebar.Item.Icon label="Page Builder" element={<PageBuilderIcon />} />}
-                >
-                    <Sidebar.Group text={"Pages"} />
-                    <Sidebar.Link
-                        to={"/page-builder/pages"}
-                        text={"Pages"}
-                    />
-                    <Sidebar.Link
-                        to={"/page-builder/templates"}
-                        text={"Templates"}
-                    />
-                </Sidebar.Item>
-            </Sidebar>
-        </SidebarProvider>
-    );
-};
+return (
+
+<SidebarProvider>
+  <Sidebar
+    title={"Webiny"}
+    icon={<Sidebar.Icon element={<img src="/logo.png" alt="Webiny" />} label={"Webiny"} />}
+  >
+    <Sidebar.Link
+      text={"Headless CMS"}
+      to={"/cms"}
+      icon={<Sidebar.Item.Icon label="Headless CMS" element={<CmsIcon />} />}
+    />
+    <Sidebar.Item
+      text={"Page Builder"}
+      icon={<Sidebar.Item.Icon label="Page Builder" element={<PageBuilderIcon />} />}
+    >
+      <Sidebar.Group text={"Pages"} />
+      <Sidebar.Link to={"/page-builder/pages"} text={"Pages"} />
+      <Sidebar.Link to={"/page-builder/templates"} text={"Templates"} />
+    </Sidebar.Item>
+  </Sidebar>
+</SidebarProvider>
+); };
 
 export default SidebarExample;
 
 ` } }
-        additionalActions={[
-            {
-                title: 'Open in GitHub',
-                onClick: () => {
-                    window.open(
-                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Sidebar/Sidebar.tsx',
-                        '_blank'
-                    );
-                },
-            }
-        ]}
+additionalActions={[
+{
+title: 'Open in GitHub',
+onClick: () => {
+window.open(
+'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Sidebar/Sidebar.tsx',
+'_blank'
+);
+},
+}
+]}
 />
 
 ```tsx
@@ -75,39 +64,28 @@ import { ReactComponent as CmsIcon } from "@webiny/icons/web.svg";
 import { ReactComponent as PageBuilderIcon } from "@webiny/icons/table_chart.svg";
 
 const SidebarExample = () => {
-    return (
-        <SidebarProvider>
-            <Sidebar
-                title={"Webiny"}
-                icon={
-                    <Sidebar.Icon
-                        element={<img src="/logo.png" alt="Webiny" />}
-                        label={"Webiny"}
-                    />
-                }
-            >
-                <Sidebar.Link
-                    text={"Headless CMS"}
-                    to={"/cms"}
-                    icon={<Sidebar.Item.Icon label="Headless CMS" element={<CmsIcon />} />}
-                />
-                <Sidebar.Item
-                    text={"Page Builder"}
-                    icon={<Sidebar.Item.Icon label="Page Builder" element={<PageBuilderIcon />} />}
-                >
-                    <Sidebar.Group text={"Pages"} />
-                    <Sidebar.Link
-                        to={"/page-builder/pages"}
-                        text={"Pages"}
-                    />
-                    <Sidebar.Link
-                        to={"/page-builder/templates"}
-                        text={"Templates"}
-                    />
-                </Sidebar.Item>
-            </Sidebar>
-        </SidebarProvider>
-    );
+  return (
+    <SidebarProvider>
+      <Sidebar
+        title={"Webiny"}
+        icon={<Sidebar.Icon element={<img src="/logo.png" alt="Webiny" />} label={"Webiny"} />}
+      >
+        <Sidebar.Link
+          text={"Headless CMS"}
+          to={"/cms"}
+          icon={<Sidebar.Item.Icon label="Headless CMS" element={<CmsIcon />} />}
+        />
+        <Sidebar.Item
+          text={"Page Builder"}
+          icon={<Sidebar.Item.Icon label="Page Builder" element={<PageBuilderIcon />} />}
+        >
+          <Sidebar.Group text={"Pages"} />
+          <Sidebar.Link to={"/page-builder/pages"} text={"Pages"} />
+          <Sidebar.Link to={"/page-builder/templates"} text={"Templates"} />
+        </Sidebar.Item>
+      </Sidebar>
+    </SidebarProvider>
+  );
 };
 
 export default SidebarExample;
@@ -123,11 +101,11 @@ The main container component that holds the entire sidebar structure.
 
 ```jsx
 <Sidebar
-    title="Application Title"
-    icon={<Sidebar.Icon element={<Logo />} label="Logo" />}
-    footer={<FooterContent />}
+  title="Application Title"
+  icon={<Sidebar.Icon element={<Logo />} label="Logo" />}
+  footer={<FooterContent />}
 >
-    {/* Menu items */}
+  {/* Menu items */}
 </Sidebar>
 ```
 
@@ -158,10 +136,10 @@ Used to create menu items that link to different routes in the application.
 
 ```jsx
 <Sidebar.Link
-    text="Dashboard"
-    to="/dashboard"
-    icon={<Sidebar.Item.Icon label="Dashboard" element={<DashboardIcon />} />}
-    active={currentPath === "/dashboard"}
+  text="Dashboard"
+  to="/dashboard"
+  icon={<Sidebar.Item.Icon label="Dashboard" element={<DashboardIcon />} />}
+  active={currentPath === "/dashboard"}
 />
 ```
 

package/Sidebar/components/items/SidebarMenuSubItemIndentation.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import { type VariantProps } from "../../../utils.js";
 declare const separatorVariants: (props?: ({
     variant?: "group-label" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface SidebarMenuSubItemIndentationProps extends Omit<React.HTMLAttributes<HTMLLIElement>, "content">, VariantProps<typeof separatorVariants> {
     lvl: number;
 }

package/Sidebar/components/items/SidebarMenuSubItemIndentation.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Separator","cva","separatorVariants","variants","variant","SidebarMenuSubItemIndentation","lvl","createElement","className","Array","from","length","_","index","key","orientation","margin"],"sources":["SidebarMenuSubItemIndentation.tsx"],"sourcesContent":["import React from \"react\";\nimport { Separator } from \"~/Separator/index.js\";\n\nimport { cva, type VariantProps } from \"~/utils.js\";\n\nconst separatorVariants = cva([\"h-xl ml-px\"], {\n    variants: {\n        variant: {\n            \"group-label\": \"h-[38px]!\"\n        }\n    }\n});\n\nexport interface SidebarMenuSubItemIndentationProps\n    extends Omit<React.HTMLAttributes<HTMLLIElement>, \"content\">,\n        VariantProps<typeof separatorVariants> {\n    lvl: number;\n}\n\nconst SidebarMenuSubItemIndentation = ({ lvl, variant }: SidebarMenuSubItemIndentationProps) => {\n    return (\n        <div data-sidebar=\"indentation\" className={\"gap-x-xs flex mr-sm\"}>\n            {Array.from({ length: lvl }, (_, index) => (\n                <div data-sidebar={\"indentation-element\"} className={\"ml-md\"} key={lvl + index}>\n                    <Separator\n                        orientation={\"vertical\"}\n                        margin={\"none\"}\n                        variant={\"strong\"}\n                        className={separatorVariants({ variant })}\n                    />\n                </div>\n            ))}\n        </div>\n    );\n};\n\nexport { SidebarMenuSubItemIndentation };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS;AAElB,SAASC,GAAG;AAEZ,MAAMC,iBAAiB,GAAGD,GAAG,CAAC,CAAC,YAAY,CAAC,EAAE;EAC1CE,QAAQ,EAAE;IACNC,OAAO,EAAE;MACL,aAAa,EAAE;IACnB;EACJ;AACJ,CAAC,CAAC;AAQF,MAAMC,6BAA6B,GAAGA,CAAC;EAAEC,GAAG;EAAEF;AAA4C,CAAC,KAAK;EAC5F,oBACIL,KAAA,CAAAQ,aAAA;IAAK,gBAAa,aAAa;IAACC,SAAS,EAAE;EAAsB,GAC5DC,KAAK,CAACC,IAAI,CAAC;IAAEC,MAAM,EAAEL;EAAI,CAAC,EAAE,CAACM,CAAC,EAAEC,KAAK,kBAClCd,KAAA,CAAAQ,aAAA;IAAK,gBAAc,qBAAsB;IAACC,SAAS,EAAE,OAAQ;IAACM,GAAG,EAAER,GAAG,GAAGO;EAAM,gBAC3Ed,KAAA,CAAAQ,aAAA,CAACP,SAAS;IACNe,WAAW,EAAE,UAAW;IACxBC,MAAM,EAAE,MAAO;IACfZ,OAAO,EAAE,QAAS;IAClBI,SAAS,EAAEN,iBAAiB,CAAC;MAAEE;IAAQ,CAAC;EAAE,CAC7C,CACA,CACR,CACA,CAAC;AAEd,CAAC;AAED,SAASC,6BAA6B","ignoreList":[]}
+{"version":3,"names":["React","Separator","cva","separatorVariants","variants","variant","SidebarMenuSubItemIndentation","lvl","createElement","className","Array","from","length","_","index","key","orientation","margin"],"sources":["SidebarMenuSubItemIndentation.tsx"],"sourcesContent":["import React from \"react\";\nimport { Separator } from \"~/Separator/index.js\";\n\nimport { cva, type VariantProps } from \"~/utils.js\";\n\nconst separatorVariants = cva([\"h-xl ml-px\"], {\n    variants: {\n        variant: {\n            \"group-label\": \"h-[38px]!\"\n        }\n    }\n});\n\nexport interface SidebarMenuSubItemIndentationProps\n    extends\n        Omit<React.HTMLAttributes<HTMLLIElement>, \"content\">,\n        VariantProps<typeof separatorVariants> {\n    lvl: number;\n}\n\nconst SidebarMenuSubItemIndentation = ({ lvl, variant }: SidebarMenuSubItemIndentationProps) => {\n    return (\n        <div data-sidebar=\"indentation\" className={\"gap-x-xs flex mr-sm\"}>\n            {Array.from({ length: lvl }, (_, index) => (\n                <div data-sidebar={\"indentation-element\"} className={\"ml-md\"} key={lvl + index}>\n                    <Separator\n                        orientation={\"vertical\"}\n                        margin={\"none\"}\n                        variant={\"strong\"}\n                        className={separatorVariants({ variant })}\n                    />\n                </div>\n            ))}\n        </div>\n    );\n};\n\nexport { SidebarMenuSubItemIndentation };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS;AAElB,SAASC,GAAG;AAEZ,MAAMC,iBAAiB,GAAGD,GAAG,CAAC,CAAC,YAAY,CAAC,EAAE;EAC1CE,QAAQ,EAAE;IACNC,OAAO,EAAE;MACL,aAAa,EAAE;IACnB;EACJ;AACJ,CAAC,CAAC;AASF,MAAMC,6BAA6B,GAAGA,CAAC;EAAEC,GAAG;EAAEF;AAA4C,CAAC,KAAK;EAC5F,oBACIL,KAAA,CAAAQ,aAAA;IAAK,gBAAa,aAAa;IAACC,SAAS,EAAE;EAAsB,GAC5DC,KAAK,CAACC,IAAI,CAAC;IAAEC,MAAM,EAAEL;EAAI,CAAC,EAAE,CAACM,CAAC,EAAEC,KAAK,kBAClCd,KAAA,CAAAQ,aAAA;IAAK,gBAAc,qBAAsB;IAACC,SAAS,EAAE,OAAQ;IAACM,GAAG,EAAER,GAAG,GAAGO;EAAM,gBAC3Ed,KAAA,CAAAQ,aAAA,CAACP,SAAS;IACNe,WAAW,EAAE,UAAW;IACxBC,MAAM,EAAE,MAAO;IACfZ,OAAO,EAAE,QAAS;IAClBI,SAAS,EAAEN,iBAAiB,CAAC;MAAEE;IAAQ,CAAC;EAAE,CAC7C,CACA,CACR,CACA,CAAC;AAEd,CAAC;AAED,SAASC,6BAA6B","ignoreList":[]}

package/Skeleton/Skeleton.d.ts

@@ -3,7 +3,7 @@ import { type VariantProps } from "../utils.js";
 declare const skeletonVariants: (props?: ({
     type?: "area" | "text" | "thumbnail" | null | undefined;
     size?: "sm" | "md" | "lg" | "xl" | "xs" | "xxl" | "3xl" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof skeletonVariants> {
 }
 declare const Skeleton: (({ size, type, className, ...props }: SkeletonProps) => React.JSX.Element) & {

package/Skeleton/Skeleton.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","cn","cva","makeDecoratable","skeletonVariants","variants","type","text","thumbnail","area","size","xs","sm","md","lg","xl","xxl","compoundVariants","class","defaultVariants","DecoratableSkeleton","className","props","createElement","Object","assign","Skeleton"],"sources":["Skeleton.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, cva, type VariantProps, makeDecoratable } from \"~/utils.js\";\n\nconst skeletonVariants = cva(\"animate-skeleton-pulse rounded-sm\", {\n    variants: {\n        type: {\n            text: \"w-full\",\n            thumbnail: \"aspect-square\",\n            area: \"size-full\"\n        },\n        size: {\n            xs: \"h-sm\",\n            sm: \"h-sm-extra\",\n            md: \"h-md\",\n            lg: \"h-lg\",\n            xl: \"h-xl\",\n            xxl: \"h-[40px]\",\n            \"3xl\": \"h-xxl\"\n        }\n    },\n    compoundVariants: [\n        // The following compound variants are not supported by the current version of the design system.\n        {\n            type: \"thumbnail\",\n            size: \"xs\",\n            class: \"hidden!\"\n        },\n        {\n            type: \"text\",\n            size: \"3xl\",\n            class: \"hidden!\"\n        }\n    ],\n    defaultVariants: {\n        type: \"area\",\n        size: \"lg\"\n    }\n});\n\ninterface SkeletonProps\n    extends React.HTMLAttributes<HTMLDivElement>,\n        VariantProps<typeof skeletonVariants> {}\n\nconst DecoratableSkeleton = ({ size, type, className, ...props }: SkeletonProps) => {\n    return <div className={cn(skeletonVariants({ size, type }), className)} {...props} />;\n};\n\nconst Skeleton = makeDecoratable(\"Skeleton\", DecoratableSkeleton);\n\nexport { Skeleton, type SkeletonProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,EAAE,EAAEC,GAAG,EAAqBC,eAAe;AAEpD,MAAMC,gBAAgB,GAAGF,GAAG,CAAC,mCAAmC,EAAE;EAC9DG,QAAQ,EAAE;IACNC,IAAI,EAAE;MACFC,IAAI,EAAE,QAAQ;MACdC,SAAS,EAAE,eAAe;MAC1BC,IAAI,EAAE;IACV,CAAC;IACDC,IAAI,EAAE;MACFC,EAAE,EAAE,MAAM;MACVC,EAAE,EAAE,YAAY;MAChBC,EAAE,EAAE,MAAM;MACVC,EAAE,EAAE,MAAM;MACVC,EAAE,EAAE,MAAM;MACVC,GAAG,EAAE,UAAU;MACf,KAAK,EAAE;IACX;EACJ,CAAC;EACDC,gBAAgB,EAAE;EACd;EACA;IACIX,IAAI,EAAE,WAAW;IACjBI,IAAI,EAAE,IAAI;IACVQ,KAAK,EAAE;EACX,CAAC,EACD;IACIZ,IAAI,EAAE,MAAM;IACZI,IAAI,EAAE,KAAK;IACXQ,KAAK,EAAE;EACX,CAAC,CACJ;EACDC,eAAe,EAAE;IACbb,IAAI,EAAE,MAAM;IACZI,IAAI,EAAE;EACV;AACJ,CAAC,CAAC;AAMF,MAAMU,mBAAmB,GAAGA,CAAC;EAAEV,IAAI;EAAEJ,IAAI;EAAEe,SAAS;EAAE,GAAGC;AAAqB,CAAC,KAAK;EAChF,oBAAOtB,KAAA,CAAAuB,aAAA,QAAAC,MAAA,CAAAC,MAAA;IAAKJ,SAAS,EAAEpB,EAAE,CAACG,gBAAgB,CAAC;MAAEM,IAAI;MAAEJ;IAAK,CAAC,CAAC,EAAEe,SAAS;EAAE,GAAKC,KAAK,CAAG,CAAC;AACzF,CAAC;AAED,MAAMI,QAAQ,GAAGvB,eAAe,CAAC,UAAU,EAAEiB,mBAAmB,CAAC;AAEjE,SAASM,QAAQ","ignoreList":[]}
+{"version":3,"names":["React","cn","cva","makeDecoratable","skeletonVariants","variants","type","text","thumbnail","area","size","xs","sm","md","lg","xl","xxl","compoundVariants","class","defaultVariants","DecoratableSkeleton","className","props","createElement","Object","assign","Skeleton"],"sources":["Skeleton.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, cva, type VariantProps, makeDecoratable } from \"~/utils.js\";\n\nconst skeletonVariants = cva(\"animate-skeleton-pulse rounded-sm\", {\n    variants: {\n        type: {\n            text: \"w-full\",\n            thumbnail: \"aspect-square\",\n            area: \"size-full\"\n        },\n        size: {\n            xs: \"h-sm\",\n            sm: \"h-sm-extra\",\n            md: \"h-md\",\n            lg: \"h-lg\",\n            xl: \"h-xl\",\n            xxl: \"h-[40px]\",\n            \"3xl\": \"h-xxl\"\n        }\n    },\n    compoundVariants: [\n        // The following compound variants are not supported by the current version of the design system.\n        {\n            type: \"thumbnail\",\n            size: \"xs\",\n            class: \"hidden!\"\n        },\n        {\n            type: \"text\",\n            size: \"3xl\",\n            class: \"hidden!\"\n        }\n    ],\n    defaultVariants: {\n        type: \"area\",\n        size: \"lg\"\n    }\n});\n\ninterface SkeletonProps\n    extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof skeletonVariants> {}\n\nconst DecoratableSkeleton = ({ size, type, className, ...props }: SkeletonProps) => {\n    return <div className={cn(skeletonVariants({ size, type }), className)} {...props} />;\n};\n\nconst Skeleton = makeDecoratable(\"Skeleton\", DecoratableSkeleton);\n\nexport { Skeleton, type SkeletonProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,EAAE,EAAEC,GAAG,EAAqBC,eAAe;AAEpD,MAAMC,gBAAgB,GAAGF,GAAG,CAAC,mCAAmC,EAAE;EAC9DG,QAAQ,EAAE;IACNC,IAAI,EAAE;MACFC,IAAI,EAAE,QAAQ;MACdC,SAAS,EAAE,eAAe;MAC1BC,IAAI,EAAE;IACV,CAAC;IACDC,IAAI,EAAE;MACFC,EAAE,EAAE,MAAM;MACVC,EAAE,EAAE,YAAY;MAChBC,EAAE,EAAE,MAAM;MACVC,EAAE,EAAE,MAAM;MACVC,EAAE,EAAE,MAAM;MACVC,GAAG,EAAE,UAAU;MACf,KAAK,EAAE;IACX;EACJ,CAAC;EACDC,gBAAgB,EAAE;EACd;EACA;IACIX,IAAI,EAAE,WAAW;IACjBI,IAAI,EAAE,IAAI;IACVQ,KAAK,EAAE;EACX,CAAC,EACD;IACIZ,IAAI,EAAE,MAAM;IACZI,IAAI,EAAE,KAAK;IACXQ,KAAK,EAAE;EACX,CAAC,CACJ;EACDC,eAAe,EAAE;IACbb,IAAI,EAAE,MAAM;IACZI,IAAI,EAAE;EACV;AACJ,CAAC,CAAC;AAKF,MAAMU,mBAAmB,GAAGA,CAAC;EAAEV,IAAI;EAAEJ,IAAI;EAAEe,SAAS;EAAE,GAAGC;AAAqB,CAAC,KAAK;EAChF,oBAAOtB,KAAA,CAAAuB,aAAA,QAAAC,MAAA,CAAAC,MAAA;IAAKJ,SAAS,EAAEpB,EAAE,CAACG,gBAAgB,CAAC;MAAEM,IAAI;MAAEJ;IAAK,CAAC,CAAC,EAAEe,SAAS;EAAE,GAAKC,KAAK,CAAG,CAAC;AACzF,CAAC;AAED,MAAMI,QAAQ,GAAGvB,eAAe,CAAC,UAAU,EAAEiB,mBAAmB,CAAC;AAEjE,SAASM,QAAQ","ignoreList":[]}

package/Skeleton/Skeleton.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';
+import { Canvas, Meta, Controls } from "@storybook/addon-docs/blocks";
 
-import * as SkeletonStories from './Skeleton.stories';
+import * as SkeletonStories from "./Skeleton.stories";
 
 <Meta of={SkeletonStories} />
 
@@ -15,23 +15,23 @@ import React from "react";
 import { Skeleton } from "@webiny/admin-ui";
 
 const SkeletonExample = () => {
-    return <Skeleton />;
+return <Skeleton />;
 };
 
 export default SkeletonExample;
 
 ` } }
-        additionalActions={[
-            {
-                title: 'Open in GitHub',
-                onClick: () => {
-                    window.open(
-                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Skeleton/Skeleton.tsx',
-                        '_blank'
-                    );
-                },
-            }
-        ]}
+additionalActions={[
+{
+title: 'Open in GitHub',
+onClick: () => {
+window.open(
+'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Skeleton/Skeleton.tsx',
+'_blank'
+);
+},
+}
+]}
 />
 
 <Controls of={SkeletonStories.Documentation} />
@@ -41,7 +41,7 @@ import React from "react";
 import { Skeleton } from "@webiny/admin-ui";
 
 const SkeletonExample = () => {
-    return <Skeleton />;
+  return <Skeleton />;
 };
 
 export default SkeletonExample;
@@ -62,7 +62,7 @@ import React from "react";
 import { Skeleton } from "@webiny/admin-ui";
 
 const AreaSkeletonExample = () => {
-    return <Skeleton type="area" className="w-1/2 h-32" />;
+return <Skeleton type="area" className="w-1/2 h-32" />;
 };
 
 export default AreaSkeletonExample;
@@ -77,7 +77,7 @@ import React from "react";
 import { Skeleton } from "@webiny/admin-ui";
 
 const TextSkeletonExample = () => {
-    return <Skeleton type="text" />;
+return <Skeleton type="text" />;
 };
 
 export default TextSkeletonExample;
@@ -92,7 +92,7 @@ import React from "react";
 import { Skeleton } from "@webiny/admin-ui";
 
 const ThumbnailSkeletonExample = () => {
-    return <Skeleton type="thumbnail" />;
+return <Skeleton type="thumbnail" />;
 };
 
 export default ThumbnailSkeletonExample;
@@ -109,7 +109,7 @@ import React from "react";
 import { Skeleton } from "@webiny/admin-ui";
 
 const XsSkeletonExample = () => {
-    return <Skeleton size="xs" />;
+return <Skeleton size="xs" />;
 };
 
 export default XsSkeletonExample;
@@ -122,7 +122,7 @@ import React from "react";
 import { Skeleton } from "@webiny/admin-ui";
 
 const SmSkeletonExample = () => {
-    return <Skeleton size="sm" />;
+return <Skeleton size="sm" />;
 };
 
 export default SmSkeletonExample;
@@ -135,7 +135,7 @@ import React from "react";
 import { Skeleton } from "@webiny/admin-ui";
 
 const MdSkeletonExample = () => {
-    return <Skeleton size="md" />;
+return <Skeleton size="md" />;
 };
 
 export default MdSkeletonExample;
@@ -148,7 +148,7 @@ import React from "react";
 import { Skeleton } from "@webiny/admin-ui";
 
 const LgSkeletonExample = () => {
-    return <Skeleton size="lg" />;
+return <Skeleton size="lg" />;
 };
 
 export default LgSkeletonExample;
@@ -161,7 +161,7 @@ import React from "react";
 import { Skeleton } from "@webiny/admin-ui";
 
 const XlSkeletonExample = () => {
-    return <Skeleton size="xl" />;
+return <Skeleton size="xl" />;
 };
 
 export default XlSkeletonExample;
@@ -174,7 +174,7 @@ import React from "react";
 import { Skeleton } from "@webiny/admin-ui";
 
 const XxlSkeletonExample = () => {
-    return <Skeleton size="xxl" />;
+return <Skeleton size="xxl" />;
 };
 
 export default XxlSkeletonExample;
@@ -187,7 +187,7 @@ import React from "react";
 import { Skeleton } from "@webiny/admin-ui";
 
 const ThreeXlSkeletonExample = () => {
-    return <Skeleton size="3xl" />;
+return <Skeleton size="3xl" />;
 };
 
 export default ThreeXlSkeletonExample;
@@ -202,18 +202,18 @@ import React from "react";
 import { Skeleton } from "@webiny/admin-ui";
 
 const MultipleAreasExample = () => {
-    return (
-        <div className="flex gap-md">
-            <div className="flex flex-col gap-md">
-                <Skeleton type="area" className={"w-32 h-32"} />
-                <Skeleton type="area" className={"w-32 h-32"} />
-            </div>
-            <div>
-                <Skeleton type="area" className="w-32 h-full" />
-            </div>
-        </div>
-    );
-};
+return (
+
+<div className="flex gap-md">
+  <div className="flex flex-col gap-md">
+    <Skeleton type="area" className={"w-32 h-32"} />
+    <Skeleton type="area" className={"w-32 h-32"} />
+  </div>
+  <div>
+    <Skeleton type="area" className="w-32 h-full" />
+  </div>
+</div>
+); };
 
 export default MultipleAreasExample;
 ` } } />

package/Slider/Slider.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';
+import { Canvas, Meta, Controls } from "@storybook/addon-docs/blocks";
 
-import * as SliderStories from './Slider.stories';
+import * as SliderStories from "./Slider.stories";
 
 <Meta of={SliderStories} />
 
@@ -15,8 +15,8 @@ import React, { useState } from "react";
 import { Slider } from "@webiny/admin-ui";
 
 const SliderExample = () => {
-    const [value, setValue] = useState(50);
-    const [validation, setValidation] = useState({ isValid: true, message: "" });
+const [value, setValue] = useState(50);
+const [validation, setValidation] = useState({ isValid: true, message: "" });
 
     const handleChange = (newValue: number) => {
         setValue(newValue);
@@ -46,62 +46,63 @@ const SliderExample = () => {
             />
         </div>
     );
+
 };
 
 export default SliderExample;
 
 ` } }
-        additionalActions={[
-            {
-                title: 'Open in GitHub',
-                onClick: () => {
-                    window.open(
-                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Slider/Slider.tsx',
-                        '_blank'
-                    );
-                },
-            }
-        ]}
+additionalActions={[
+{
+title: 'Open in GitHub',
+onClick: () => {
+window.open(
+'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Slider/Slider.tsx',
+'_blank'
+);
+},
+}
+]}
 />
 
-<Controls of={SliderStories.Documentation} exclude={["onValueChange", "onValueCommit"]}/>
+<Controls of={SliderStories.Documentation} exclude={["onValueChange", "onValueCommit"]} />
 
 ```tsx
 import React, { useState } from "react";
 import { Slider } from "@webiny/admin-ui";
 
 const SliderExample = () => {
-    const [value, setValue] = useState(50);
-    const [validation, setValidation] = useState({ isValid: true, message: "" });
-
-    const handleChange = (newValue: number) => {
-        setValue(newValue);
-
-        if (newValue === 0) {
-            setValidation({ isValid: false, message: "Please select a value" });
-        } else {
-            setValidation({ isValid: true, message: "" });
-        }
-    };
-
-    return (
-        <div>
-            <Slider
-                label="Volume Level"
-                description="Adjust the volume level of your device"
-                note="Note: Higher values may cause distortion on some devices"
-                min={0}
-                max={100}
-                step={1}
-                value={value}
-                required={true}
-                onValueChange={handleChange}
-                showTooltip={true}
-                transformValue={(value) => `${value}%`}
-                validation={validation}
-            />
-        </div>
-    );
+  const [value, setValue] = useState(50);
+  const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+  const handleChange = (newValue: number) => {
+    setValue(newValue);
+
+    if (newValue === 0) {
+      setValidation({ isValid: false, message: "Please select a value" });
+    } else {
+      setValidation({ isValid: true, message: "" });
+    }
+  };
+
+  return (
+    <div>
+      <Slider
+        label="Volume Level"
+        description="Adjust the volume level of your device"
+        note="Note: Higher values may cause distortion on some devices"
+        min={0}
+        max={100}
+        step={1}
+        value={value}
+        required={true}
+        onValueChange={handleChange}
+        showTooltip={true}
+        transformValue={value => `${value}%`}
+        validation={validation}
+      />
+    </div>
+  );
 };
 
 export default SliderExample;

package/Slider/primitives/SliderPrimitive.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useSlider","SliderRoot","SliderThumb","SliderTrack","SliderPrimitiveRenderer","tooltipSide","textValue","showTooltip","sliderProps","createElement","className","SliderPrimitive","props","transformValue","restProps","vm","changeValue","commitValue","Object","assign","onValueChange","onValueCommit"],"sources":["SliderPrimitive.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type { Slider as SliderPrimitives } from \"radix-ui\";\nimport { useSlider } from \"./useSlider.js\";\nimport { SliderRoot, SliderThumb, SliderTrack, type SliderThumbProps } from \"./components/index.js\";\n\ntype SliderRootProps = Omit<SliderPrimitives.SliderProps, \"min\"> & {\n    min: number;\n};\n\ntype SliderPrimitiveRendererProps = SliderRootProps & SliderThumbProps;\n\nconst SliderPrimitiveRenderer = ({\n    tooltipSide,\n    textValue,\n    showTooltip,\n    ...sliderProps\n}: SliderPrimitiveVm) => {\n    return (\n        <div className={\"flex h-md w-full\"}>\n            <SliderRoot {...sliderProps}>\n                <SliderTrack />\n                <SliderThumb\n                    textValue={textValue}\n                    showTooltip={showTooltip}\n                    tooltipSide={tooltipSide}\n                />\n            </SliderRoot>\n        </div>\n    );\n};\n\ninterface SliderPrimitiveProps\n    extends Omit<\n        SliderPrimitives.SliderProps,\n        \"defaultValue\" | \"value\" | \"onValueChange\" | \"onValueCommit\"\n    > {\n    onValueChange: (value: number) => void;\n    onValueCommit?: (value: number) => void;\n    showTooltip?: boolean;\n    tooltipSide?: \"top\" | \"bottom\";\n    transformValue?: (value: number) => string;\n    value?: number;\n}\n\ntype SliderPrimitiveVm = SliderRootProps & SliderThumbProps;\n\nconst SliderPrimitive = (props: SliderPrimitiveProps) => {\n    const { transformValue, ...restProps } = props;\n    const { vm, changeValue, commitValue } = useSlider({ ...restProps, transformValue });\n\n    return (\n        <SliderPrimitiveRenderer\n            {...restProps}\n            {...vm}\n            onValueChange={changeValue}\n            onValueCommit={commitValue}\n        />\n    );\n};\n\nexport {\n    SliderPrimitive,\n    SliderPrimitiveRenderer,\n    type SliderPrimitiveVm,\n    type SliderPrimitiveProps,\n    type SliderPrimitiveRendererProps\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAE9B,SAASC,SAAS;AAClB,SAASC,UAAU,EAAEC,WAAW,EAAEC,WAAW;AAQ7C,MAAMC,uBAAuB,GAAGA,CAAC;EAC7BC,WAAW;EACXC,SAAS;EACTC,WAAW;EACX,GAAGC;AACY,CAAC,KAAK;EACrB,oBACIT,KAAA,CAAAU,aAAA;IAAKC,SAAS,EAAE;EAAmB,gBAC/BX,KAAA,CAAAU,aAAA,CAACR,UAAU,EAAKO,WAAW,eACvBT,KAAA,CAAAU,aAAA,CAACN,WAAW,MAAE,CAAC,eACfJ,KAAA,CAAAU,aAAA,CAACP,WAAW;IACRI,SAAS,EAAEA,SAAU;IACrBC,WAAW,EAAEA,WAAY;IACzBF,WAAW,EAAEA;EAAY,CAC5B,CACO,CACX,CAAC;AAEd,CAAC;AAiBD,MAAMM,eAAe,GAAIC,KAA2B,IAAK;EACrD,MAAM;IAAEC,cAAc;IAAE,GAAGC;EAAU,CAAC,GAAGF,KAAK;EAC9C,MAAM;IAAEG,EAAE;IAAEC,WAAW;IAAEC;EAAY,CAAC,GAAGjB,SAAS,CAAC;IAAE,GAAGc,SAAS;IAAED;EAAe,CAAC,CAAC;EAEpF,oBACId,KAAA,CAAAU,aAAA,CAACL,uBAAuB,EAAAc,MAAA,CAAAC,MAAA,KAChBL,SAAS,EACTC,EAAE;IACNK,aAAa,EAAEJ,WAAY;IAC3BK,aAAa,EAAEJ;EAAY,EAC9B,CAAC;AAEV,CAAC;AAED,SACIN,eAAe,EACfP,uBAAuB","ignoreList":[]}
+{"version":3,"names":["React","useSlider","SliderRoot","SliderThumb","SliderTrack","SliderPrimitiveRenderer","tooltipSide","textValue","showTooltip","sliderProps","createElement","className","SliderPrimitive","props","transformValue","restProps","vm","changeValue","commitValue","Object","assign","onValueChange","onValueCommit"],"sources":["SliderPrimitive.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type { Slider as SliderPrimitives } from \"radix-ui\";\nimport { useSlider } from \"./useSlider.js\";\nimport { SliderRoot, SliderThumb, SliderTrack, type SliderThumbProps } from \"./components/index.js\";\n\ntype SliderRootProps = Omit<SliderPrimitives.SliderProps, \"min\"> & {\n    min: number;\n};\n\ntype SliderPrimitiveRendererProps = SliderRootProps & SliderThumbProps;\n\nconst SliderPrimitiveRenderer = ({\n    tooltipSide,\n    textValue,\n    showTooltip,\n    ...sliderProps\n}: SliderPrimitiveVm) => {\n    return (\n        <div className={\"flex h-md w-full\"}>\n            <SliderRoot {...sliderProps}>\n                <SliderTrack />\n                <SliderThumb\n                    textValue={textValue}\n                    showTooltip={showTooltip}\n                    tooltipSide={tooltipSide}\n                />\n            </SliderRoot>\n        </div>\n    );\n};\n\ninterface SliderPrimitiveProps extends Omit<\n    SliderPrimitives.SliderProps,\n    \"defaultValue\" | \"value\" | \"onValueChange\" | \"onValueCommit\"\n> {\n    onValueChange: (value: number) => void;\n    onValueCommit?: (value: number) => void;\n    showTooltip?: boolean;\n    tooltipSide?: \"top\" | \"bottom\";\n    transformValue?: (value: number) => string;\n    value?: number;\n}\n\ntype SliderPrimitiveVm = SliderRootProps & SliderThumbProps;\n\nconst SliderPrimitive = (props: SliderPrimitiveProps) => {\n    const { transformValue, ...restProps } = props;\n    const { vm, changeValue, commitValue } = useSlider({ ...restProps, transformValue });\n\n    return (\n        <SliderPrimitiveRenderer\n            {...restProps}\n            {...vm}\n            onValueChange={changeValue}\n            onValueCommit={commitValue}\n        />\n    );\n};\n\nexport {\n    SliderPrimitive,\n    SliderPrimitiveRenderer,\n    type SliderPrimitiveVm,\n    type SliderPrimitiveProps,\n    type SliderPrimitiveRendererProps\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAE9B,SAASC,SAAS;AAClB,SAASC,UAAU,EAAEC,WAAW,EAAEC,WAAW;AAQ7C,MAAMC,uBAAuB,GAAGA,CAAC;EAC7BC,WAAW;EACXC,SAAS;EACTC,WAAW;EACX,GAAGC;AACY,CAAC,KAAK;EACrB,oBACIT,KAAA,CAAAU,aAAA;IAAKC,SAAS,EAAE;EAAmB,gBAC/BX,KAAA,CAAAU,aAAA,CAACR,UAAU,EAAKO,WAAW,eACvBT,KAAA,CAAAU,aAAA,CAACN,WAAW,MAAE,CAAC,eACfJ,KAAA,CAAAU,aAAA,CAACP,WAAW;IACRI,SAAS,EAAEA,SAAU;IACrBC,WAAW,EAAEA,WAAY;IACzBF,WAAW,EAAEA;EAAY,CAC5B,CACO,CACX,CAAC;AAEd,CAAC;AAgBD,MAAMM,eAAe,GAAIC,KAA2B,IAAK;EACrD,MAAM;IAAEC,cAAc;IAAE,GAAGC;EAAU,CAAC,GAAGF,KAAK;EAC9C,MAAM;IAAEG,EAAE;IAAEC,WAAW;IAAEC;EAAY,CAAC,GAAGjB,SAAS,CAAC;IAAE,GAAGc,SAAS;IAAED;EAAe,CAAC,CAAC;EAEpF,oBACId,KAAA,CAAAU,aAAA,CAACL,uBAAuB,EAAAc,MAAA,CAAAC,MAAA,KAChBL,SAAS,EACTC,EAAE;IACNK,aAAa,EAAEJ,WAAY;IAC3BK,aAAa,EAAEJ;EAAY,EAC9B,CAAC;AAEV,CAAC;AAED,SACIN,eAAe,EACfP,uBAAuB","ignoreList":[]}

package/Slider/primitives/components/SliderSideValue.d.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 import { type VariantProps } from "../../../utils.js";
 declare const sliderValueVariants: (props?: ({
     disabled?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface SliderValueProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof sliderValueVariants> {
     value?: string;
 }

package/Slider/primitives/components/SliderSideValue.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","cn","cva","sliderValueVariants","variants","disabled","true","SliderValue","value","className","createElement"],"sources":["SliderSideValue.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn, cva, type VariantProps } from \"~/utils.js\";\n\nconst sliderValueVariants = cva(\"font-normal text-sm leading-none\", {\n    variants: {\n        disabled: {\n            true: \"text-neutral-disabled cursor-not-allowed\"\n        }\n    }\n});\n\ninterface SliderValueProps\n    extends React.HTMLAttributes<HTMLSpanElement>,\n        VariantProps<typeof sliderValueVariants> {\n    value?: string;\n}\n\nconst SliderValue = ({ value, disabled, className }: SliderValueProps) => {\n    if (!value) {\n        return null;\n    }\n    return <span className={cn(sliderValueVariants({ disabled }), className)}>{value}</span>;\n};\n\nexport { SliderValue, type SliderValueProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,EAAE,EAAEC,GAAG;AAEhB,MAAMC,mBAAmB,GAAGD,GAAG,CAAC,kCAAkC,EAAE;EAChEE,QAAQ,EAAE;IACNC,QAAQ,EAAE;MACNC,IAAI,EAAE;IACV;EACJ;AACJ,CAAC,CAAC;AAQF,MAAMC,WAAW,GAAGA,CAAC;EAAEC,KAAK;EAAEH,QAAQ;EAAEI;AAA4B,CAAC,KAAK;EACtE,IAAI,CAACD,KAAK,EAAE;IACR,OAAO,IAAI;EACf;EACA,oBAAOR,KAAA,CAAAU,aAAA;IAAMD,SAAS,EAAER,EAAE,CAACE,mBAAmB,CAAC;MAAEE;IAAS,CAAC,CAAC,EAAEI,SAAS;EAAE,GAAED,KAAY,CAAC;AAC5F,CAAC;AAED,SAASD,WAAW","ignoreList":[]}
+{"version":3,"names":["React","cn","cva","sliderValueVariants","variants","disabled","true","SliderValue","value","className","createElement"],"sources":["SliderSideValue.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn, cva, type VariantProps } from \"~/utils.js\";\n\nconst sliderValueVariants = cva(\"font-normal text-sm leading-none\", {\n    variants: {\n        disabled: {\n            true: \"text-neutral-disabled cursor-not-allowed\"\n        }\n    }\n});\n\ninterface SliderValueProps\n    extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof sliderValueVariants> {\n    value?: string;\n}\n\nconst SliderValue = ({ value, disabled, className }: SliderValueProps) => {\n    if (!value) {\n        return null;\n    }\n    return <span className={cn(sliderValueVariants({ disabled }), className)}>{value}</span>;\n};\n\nexport { SliderValue, type SliderValueProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,EAAE,EAAEC,GAAG;AAEhB,MAAMC,mBAAmB,GAAGD,GAAG,CAAC,kCAAkC,EAAE;EAChEE,QAAQ,EAAE;IACNC,QAAQ,EAAE;MACNC,IAAI,EAAE;IACV;EACJ;AACJ,CAAC,CAAC;AAOF,MAAMC,WAAW,GAAGA,CAAC;EAAEC,KAAK;EAAEH,QAAQ;EAAEI;AAA4B,CAAC,KAAK;EACtE,IAAI,CAACD,KAAK,EAAE;IACR,OAAO,IAAI;EACf;EACA,oBAAOR,KAAA,CAAAU,aAAA;IAAMD,SAAS,EAAER,EAAE,CAACE,mBAAmB,CAAC;MAAEE;IAAS,CAAC,CAAC,EAAEI,SAAS;EAAE,GAAED,KAAY,CAAC;AAC5F,CAAC;AAED,SAASD,WAAW","ignoreList":[]}

package/Slider/primitives/components/SliderTooltip.d.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 import { type VariantProps } from "../../../utils.js";
 declare const sliderTooltipVariants: (props?: ({
     side?: "bottom" | "top" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type SliderTooltipProps = VariantProps<typeof sliderTooltipVariants> & {
     textValue: string;
     showTooltip?: boolean;

package/SteppedProgress/components/SteppedProgressIcon.d.ts

@@ -5,7 +5,7 @@ declare const steppedProgressIconVariants: (props?: ({
     state?: ProgressItemState | null | undefined;
     disabled?: boolean | null | undefined;
     errored?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface SteppedProgressIconProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof steppedProgressIconVariants> {
 }
 declare const SteppedProgressIcon: ({ state, errored, disabled, className, ...props }: SteppedProgressIconProps) => React.JSX.Element;

package/SteppedProgress/components/SteppedProgressIcon.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","ReactComponent","CheckIcon","ErrorIcon","cn","cva","ProgressItemState","Icon","steppedProgressIconVariants","variants","state","IDLE","IN_PROGRESS","COMPLETED","COMPLETED_AFFIRMATIVE","disabled","true","errored","compoundVariants","className","defaultVariants","SteppedProgressIcon","props","icon","useMemo","createElement","label","size","Fragment","Object","assign"],"sources":["SteppedProgressIcon.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as CheckIcon } from \"@webiny/icons/check.svg\";\nimport { ReactComponent as ErrorIcon } from \"@webiny/icons/error_outline.svg\";\nimport { cn, cva, type VariantProps } from \"~/utils.js\";\nimport { ProgressItemState } from \"~/SteppedProgress/domains/index.js\";\nimport { Icon } from \"~/Icon/index.js\";\n\nconst steppedProgressIconVariants = cva(\n    [\"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2\"],\n    {\n        variants: {\n            state: {\n                [ProgressItemState.IDLE]: \"hidden\",\n                [ProgressItemState.IN_PROGRESS]: \"size-sm-extra rounded-full bg-primary\",\n                [ProgressItemState.COMPLETED]: \"fill-neutral-base\",\n                [ProgressItemState.COMPLETED_AFFIRMATIVE]: \"fill-neutral-base\"\n            },\n            disabled: {\n                true: \"fill-neutral-base!\"\n            },\n            errored: {\n                true: \"fill-destructive\"\n            }\n        },\n        compoundVariants: [\n            // disabled\n            {\n                state: ProgressItemState.IN_PROGRESS,\n                disabled: true,\n                className: \"bg-neutral-strong\"\n            },\n            // errored\n            {\n                state: ProgressItemState.IDLE,\n                errored: true,\n                className: \"block\"\n            },\n            {\n                state: ProgressItemState.IN_PROGRESS,\n                errored: true,\n                className: \"size-auto rounded-none bg-transparent\"\n            },\n            {\n                state: ProgressItemState.COMPLETED,\n                errored: true,\n                className: \"fill-neutral-base\"\n            },\n            {\n                state: ProgressItemState.COMPLETED_AFFIRMATIVE,\n                errored: true,\n                className: \"fill-neutral-base\"\n            }\n        ],\n        defaultVariants: {\n            state: ProgressItemState.IDLE\n        }\n    }\n);\n\ninterface SteppedProgressIconProps\n    extends React.HTMLAttributes<HTMLDivElement>,\n        VariantProps<typeof steppedProgressIconVariants> {}\n\nconst SteppedProgressIcon = ({\n    state,\n    errored,\n    disabled,\n    className,\n    ...props\n}: SteppedProgressIconProps) => {\n    const icon = React.useMemo(() => {\n        if (errored) {\n            return <Icon icon={<ErrorIcon />} label={\"Error\"} size={\"sm\"} />;\n        }\n\n        if (\n            state === ProgressItemState.COMPLETED ||\n            state === ProgressItemState.COMPLETED_AFFIRMATIVE\n        ) {\n            return <Icon icon={<CheckIcon />} label={\"Completed\"} size={\"sm\"} />;\n        }\n\n        return <></>;\n    }, [state, errored]);\n\n    return (\n        <div\n            {...props}\n            className={cn(steppedProgressIconVariants({ state, disabled, errored }), className)}\n        >\n            {icon}\n        </div>\n    );\n};\n\nexport { SteppedProgressIcon, type SteppedProgressIconProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,cAAc,IAAIC,SAAS,QAAQ,yBAAyB;AACrE,SAASD,cAAc,IAAIE,SAAS,QAAQ,iCAAiC;AAC7E,SAASC,EAAE,EAAEC,GAAG;AAChB,SAASC,iBAAiB;AAC1B,SAASC,IAAI;AAEb,MAAMC,2BAA2B,GAAGH,GAAG,CACnC,CAAC,6DAA6D,CAAC,EAC/D;EACII,QAAQ,EAAE;IACNC,KAAK,EAAE;MACH,CAACJ,iBAAiB,CAACK,IAAI,GAAG,QAAQ;MAClC,CAACL,iBAAiB,CAACM,WAAW,GAAG,uCAAuC;MACxE,CAACN,iBAAiB,CAACO,SAAS,GAAG,mBAAmB;MAClD,CAACP,iBAAiB,CAACQ,qBAAqB,GAAG;IAC/C,CAAC;IACDC,QAAQ,EAAE;MACNC,IAAI,EAAE;IACV,CAAC;IACDC,OAAO,EAAE;MACLD,IAAI,EAAE;IACV;EACJ,CAAC;EACDE,gBAAgB,EAAE;EACd;EACA;IACIR,KAAK,EAAEJ,iBAAiB,CAACM,WAAW;IACpCG,QAAQ,EAAE,IAAI;IACdI,SAAS,EAAE;EACf,CAAC;EACD;EACA;IACIT,KAAK,EAAEJ,iBAAiB,CAACK,IAAI;IAC7BM,OAAO,EAAE,IAAI;IACbE,SAAS,EAAE;EACf,CAAC,EACD;IACIT,KAAK,EAAEJ,iBAAiB,CAACM,WAAW;IACpCK,OAAO,EAAE,IAAI;IACbE,SAAS,EAAE;EACf,CAAC,EACD;IACIT,KAAK,EAAEJ,iBAAiB,CAACO,SAAS;IAClCI,OAAO,EAAE,IAAI;IACbE,SAAS,EAAE;EACf,CAAC,EACD;IACIT,KAAK,EAAEJ,iBAAiB,CAACQ,qBAAqB;IAC9CG,OAAO,EAAE,IAAI;IACbE,SAAS,EAAE;EACf,CAAC,CACJ;EACDC,eAAe,EAAE;IACbV,KAAK,EAAEJ,iBAAiB,CAACK;EAC7B;AACJ,CACJ,CAAC;AAMD,MAAMU,mBAAmB,GAAGA,CAAC;EACzBX,KAAK;EACLO,OAAO;EACPF,QAAQ;EACRI,SAAS;EACT,GAAGG;AACmB,CAAC,KAAK;EAC5B,MAAMC,IAAI,GAAGvB,KAAK,CAACwB,OAAO,CAAC,MAAM;IAC7B,IAAIP,OAAO,EAAE;MACT,oBAAOjB,KAAA,CAAAyB,aAAA,CAAClB,IAAI;QAACgB,IAAI,eAAEvB,KAAA,CAAAyB,aAAA,CAACtB,SAAS,MAAE,CAAE;QAACuB,KAAK,EAAE,OAAQ;QAACC,IAAI,EAAE;MAAK,CAAE,CAAC;IACpE;IAEA,IACIjB,KAAK,KAAKJ,iBAAiB,CAACO,SAAS,IACrCH,KAAK,KAAKJ,iBAAiB,CAACQ,qBAAqB,EACnD;MACE,oBAAOd,KAAA,CAAAyB,aAAA,CAAClB,IAAI;QAACgB,IAAI,eAAEvB,KAAA,CAAAyB,aAAA,CAACvB,SAAS,MAAE,CAAE;QAACwB,KAAK,EAAE,WAAY;QAACC,IAAI,EAAE;MAAK,CAAE,CAAC;IACxE;IAEA,oBAAO3B,KAAA,CAAAyB,aAAA,CAAAzB,KAAA,CAAA4B,QAAA,MAAI,CAAC;EAChB,CAAC,EAAE,CAAClB,KAAK,EAAEO,OAAO,CAAC,CAAC;EAEpB,oBACIjB,KAAA,CAAAyB,aAAA,QAAAI,MAAA,CAAAC,MAAA,KACQR,KAAK;IACTH,SAAS,EAAEf,EAAE,CAACI,2BAA2B,CAAC;MAAEE,KAAK;MAAEK,QAAQ;MAAEE;IAAQ,CAAC,CAAC,EAAEE,SAAS;EAAE,IAEnFI,IACA,CAAC;AAEd,CAAC;AAED,SAASF,mBAAmB","ignoreList":[]}
+{"version":3,"names":["React","ReactComponent","CheckIcon","ErrorIcon","cn","cva","ProgressItemState","Icon","steppedProgressIconVariants","variants","state","IDLE","IN_PROGRESS","COMPLETED","COMPLETED_AFFIRMATIVE","disabled","true","errored","compoundVariants","className","defaultVariants","SteppedProgressIcon","props","icon","useMemo","createElement","label","size","Fragment","Object","assign"],"sources":["SteppedProgressIcon.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as CheckIcon } from \"@webiny/icons/check.svg\";\nimport { ReactComponent as ErrorIcon } from \"@webiny/icons/error_outline.svg\";\nimport { cn, cva, type VariantProps } from \"~/utils.js\";\nimport { ProgressItemState } from \"~/SteppedProgress/domains/index.js\";\nimport { Icon } from \"~/Icon/index.js\";\n\nconst steppedProgressIconVariants = cva(\n    [\"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2\"],\n    {\n        variants: {\n            state: {\n                [ProgressItemState.IDLE]: \"hidden\",\n                [ProgressItemState.IN_PROGRESS]: \"size-sm-extra rounded-full bg-primary\",\n                [ProgressItemState.COMPLETED]: \"fill-neutral-base\",\n                [ProgressItemState.COMPLETED_AFFIRMATIVE]: \"fill-neutral-base\"\n            },\n            disabled: {\n                true: \"fill-neutral-base!\"\n            },\n            errored: {\n                true: \"fill-destructive\"\n            }\n        },\n        compoundVariants: [\n            // disabled\n            {\n                state: ProgressItemState.IN_PROGRESS,\n                disabled: true,\n                className: \"bg-neutral-strong\"\n            },\n            // errored\n            {\n                state: ProgressItemState.IDLE,\n                errored: true,\n                className: \"block\"\n            },\n            {\n                state: ProgressItemState.IN_PROGRESS,\n                errored: true,\n                className: \"size-auto rounded-none bg-transparent\"\n            },\n            {\n                state: ProgressItemState.COMPLETED,\n                errored: true,\n                className: \"fill-neutral-base\"\n            },\n            {\n                state: ProgressItemState.COMPLETED_AFFIRMATIVE,\n                errored: true,\n                className: \"fill-neutral-base\"\n            }\n        ],\n        defaultVariants: {\n            state: ProgressItemState.IDLE\n        }\n    }\n);\n\ninterface SteppedProgressIconProps\n    extends\n        React.HTMLAttributes<HTMLDivElement>,\n        VariantProps<typeof steppedProgressIconVariants> {}\n\nconst SteppedProgressIcon = ({\n    state,\n    errored,\n    disabled,\n    className,\n    ...props\n}: SteppedProgressIconProps) => {\n    const icon = React.useMemo(() => {\n        if (errored) {\n            return <Icon icon={<ErrorIcon />} label={\"Error\"} size={\"sm\"} />;\n        }\n\n        if (\n            state === ProgressItemState.COMPLETED ||\n            state === ProgressItemState.COMPLETED_AFFIRMATIVE\n        ) {\n            return <Icon icon={<CheckIcon />} label={\"Completed\"} size={\"sm\"} />;\n        }\n\n        return <></>;\n    }, [state, errored]);\n\n    return (\n        <div\n            {...props}\n            className={cn(steppedProgressIconVariants({ state, disabled, errored }), className)}\n        >\n            {icon}\n        </div>\n    );\n};\n\nexport { SteppedProgressIcon, type SteppedProgressIconProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,cAAc,IAAIC,SAAS,QAAQ,yBAAyB;AACrE,SAASD,cAAc,IAAIE,SAAS,QAAQ,iCAAiC;AAC7E,SAASC,EAAE,EAAEC,GAAG;AAChB,SAASC,iBAAiB;AAC1B,SAASC,IAAI;AAEb,MAAMC,2BAA2B,GAAGH,GAAG,CACnC,CAAC,6DAA6D,CAAC,EAC/D;EACII,QAAQ,EAAE;IACNC,KAAK,EAAE;MACH,CAACJ,iBAAiB,CAACK,IAAI,GAAG,QAAQ;MAClC,CAACL,iBAAiB,CAACM,WAAW,GAAG,uCAAuC;MACxE,CAACN,iBAAiB,CAACO,SAAS,GAAG,mBAAmB;MAClD,CAACP,iBAAiB,CAACQ,qBAAqB,GAAG;IAC/C,CAAC;IACDC,QAAQ,EAAE;MACNC,IAAI,EAAE;IACV,CAAC;IACDC,OAAO,EAAE;MACLD,IAAI,EAAE;IACV;EACJ,CAAC;EACDE,gBAAgB,EAAE;EACd;EACA;IACIR,KAAK,EAAEJ,iBAAiB,CAACM,WAAW;IACpCG,QAAQ,EAAE,IAAI;IACdI,SAAS,EAAE;EACf,CAAC;EACD;EACA;IACIT,KAAK,EAAEJ,iBAAiB,CAACK,IAAI;IAC7BM,OAAO,EAAE,IAAI;IACbE,SAAS,EAAE;EACf,CAAC,EACD;IACIT,KAAK,EAAEJ,iBAAiB,CAACM,WAAW;IACpCK,OAAO,EAAE,IAAI;IACbE,SAAS,EAAE;EACf,CAAC,EACD;IACIT,KAAK,EAAEJ,iBAAiB,CAACO,SAAS;IAClCI,OAAO,EAAE,IAAI;IACbE,SAAS,EAAE;EACf,CAAC,EACD;IACIT,KAAK,EAAEJ,iBAAiB,CAACQ,qBAAqB;IAC9CG,OAAO,EAAE,IAAI;IACbE,SAAS,EAAE;EACf,CAAC,CACJ;EACDC,eAAe,EAAE;IACbV,KAAK,EAAEJ,iBAAiB,CAACK;EAC7B;AACJ,CACJ,CAAC;AAOD,MAAMU,mBAAmB,GAAGA,CAAC;EACzBX,KAAK;EACLO,OAAO;EACPF,QAAQ;EACRI,SAAS;EACT,GAAGG;AACmB,CAAC,KAAK;EAC5B,MAAMC,IAAI,GAAGvB,KAAK,CAACwB,OAAO,CAAC,MAAM;IAC7B,IAAIP,OAAO,EAAE;MACT,oBAAOjB,KAAA,CAAAyB,aAAA,CAAClB,IAAI;QAACgB,IAAI,eAAEvB,KAAA,CAAAyB,aAAA,CAACtB,SAAS,MAAE,CAAE;QAACuB,KAAK,EAAE,OAAQ;QAACC,IAAI,EAAE;MAAK,CAAE,CAAC;IACpE;IAEA,IACIjB,KAAK,KAAKJ,iBAAiB,CAACO,SAAS,IACrCH,KAAK,KAAKJ,iBAAiB,CAACQ,qBAAqB,EACnD;MACE,oBAAOd,KAAA,CAAAyB,aAAA,CAAClB,IAAI;QAACgB,IAAI,eAAEvB,KAAA,CAAAyB,aAAA,CAACvB,SAAS,MAAE,CAAE;QAACwB,KAAK,EAAE,WAAY;QAACC,IAAI,EAAE;MAAK,CAAE,CAAC;IACxE;IAEA,oBAAO3B,KAAA,CAAAyB,aAAA,CAAAzB,KAAA,CAAA4B,QAAA,MAAI,CAAC;EAChB,CAAC,EAAE,CAAClB,KAAK,EAAEO,OAAO,CAAC,CAAC;EAEpB,oBACIjB,KAAA,CAAAyB,aAAA,QAAAI,MAAA,CAAAC,MAAA,KACQR,KAAK;IACTH,SAAS,EAAEf,EAAE,CAACI,2BAA2B,CAAC;MAAEE,KAAK;MAAEK,QAAQ;MAAEE;IAAQ,CAAC,CAAC,EAAEE,SAAS;EAAE,IAEnFI,IACA,CAAC;AAEd,CAAC;AAED,SAASF,mBAAmB","ignoreList":[]}