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

package/List/components/ListItemIcon.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","makeDecoratable","Icon","IconComponent","DecoratableListItemIcon","props","createElement","Object","assign","size","color","ListItemIcon"],"sources":["ListItemIcon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { makeDecoratable } from \"~/utils\";\nimport type { IconProps as IconComponentProps } from \"~/Icon\";\nimport { Icon as IconComponent } from \"~/Icon\";\n\ntype ListItemIconProps = IconComponentProps;\n\nconst DecoratableListItemIcon = (props: ListItemIconProps) => {\n    return <IconComponent size={\"md\"} color={\"inherit\"} {...props} />;\n};\n\nexport const ListItemIcon = makeDecoratable(\"ListItemIcon\", DecoratableListItemIcon);\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,eAAe;AAExB,SAASC,IAAI,IAAIC,aAAa;AAI9B,MAAMC,uBAAuB,GAAIC,KAAwB,IAAK;EAC1D,oBAAOL,KAAA,CAAAM,aAAA,CAACH,aAAa,EAAAI,MAAA,CAAAC,MAAA;IAACC,IAAI,EAAE,IAAK;IAACC,KAAK,EAAE;EAAU,GAAKL,KAAK,CAAG,CAAC;AACrE,CAAC;AAED,OAAO,MAAMM,YAAY,GAAGV,eAAe,CAAC,cAAc,EAAEG,uBAAuB,CAAC","ignoreList":[]}
+{"version":3,"names":["React","makeDecoratable","Icon","IconComponent","DecoratableListItemIcon","props","createElement","Object","assign","size","color","ListItemIcon"],"sources":["ListItemIcon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { makeDecoratable } from \"~/utils.js\";\nimport type { IconProps as IconComponentProps } from \"~/Icon/index.js\";\nimport { Icon as IconComponent } from \"~/Icon/index.js\";\n\ntype ListItemIconProps = IconComponentProps;\n\nconst DecoratableListItemIcon = (props: ListItemIconProps) => {\n    return <IconComponent size={\"md\"} color={\"inherit\"} {...props} />;\n};\n\nexport const ListItemIcon = makeDecoratable(\"ListItemIcon\", DecoratableListItemIcon);\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,eAAe;AAExB,SAASC,IAAI,IAAIC,aAAa;AAI9B,MAAMC,uBAAuB,GAAIC,KAAwB,IAAK;EAC1D,oBAAOL,KAAA,CAAAM,aAAA,CAACH,aAAa,EAAAI,MAAA,CAAAC,MAAA;IAACC,IAAI,EAAE,IAAK;IAACC,KAAK,EAAE;EAAU,GAAKL,KAAK,CAAG,CAAC;AACrE,CAAC;AAED,OAAO,MAAMM,YAAY,GAAGV,eAAe,CAAC,cAAc,EAAEG,uBAAuB,CAAC","ignoreList":[]}

package/List/components/ListItemSeparator.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { type SeparatorProps } from "../../Separator";
+import { type SeparatorProps } from "../../Separator/index.js";
 type ListItemSeparatorProps = SeparatorProps;
 declare const ListItemSeparator: ((props: ListItemSeparatorProps) => React.JSX.Element) & {
     original: (props: ListItemSeparatorProps) => React.JSX.Element;
@@ -14,7 +14,7 @@ declare const ListItemSeparator: ((props: ListItemSeparatorProps) => React.JSX.E
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: ListItemSeparatorProps) => React.JSX.Element) & {
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<((props: ListItemSeparatorProps) => React.JSX.Element) & {
         original: (props: ListItemSeparatorProps) => React.JSX.Element;
         originalName: string;
         displayName: string;

package/List/components/ListItemSeparator.js

@@ -1,10 +1,10 @@
 import * as React from "react";
-import { makeDecoratable } from "../../utils";
-import { Separator } from "../../Separator";
+import { makeDecoratable } from "../../utils.js";
+import { Separator } from "../../Separator/index.js";
 const DecoratableListItemSeparator = props => {
   return /*#__PURE__*/React.createElement(Separator, Object.assign({
     orientation: "vertical",
-    className: "wby-h-lg wby-mx-sm-plus"
+    className: "h-lg mx-sm-plus"
   }, props));
 };
 const ListItemSeparator = makeDecoratable("ListItemSeparator", DecoratableListItemSeparator);

package/List/components/ListItemSeparator.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","makeDecoratable","Separator","DecoratableListItemSeparator","props","createElement","Object","assign","orientation","className","ListItemSeparator"],"sources":["ListItemSeparator.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { makeDecoratable } from \"~/utils\";\nimport { Separator, type SeparatorProps } from \"~/Separator\";\n\ntype ListItemSeparatorProps = SeparatorProps;\n\nconst DecoratableListItemSeparator = (props: ListItemSeparatorProps) => {\n    return <Separator orientation={\"vertical\"} className={\"wby-h-lg wby-mx-sm-plus\"} {...props} />;\n};\n\nconst ListItemSeparator = makeDecoratable(\"ListItemSeparator\", DecoratableListItemSeparator);\n\nexport { ListItemSeparator, type ListItemSeparatorProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,eAAe;AACxB,SAASC,SAAS;AAIlB,MAAMC,4BAA4B,GAAIC,KAA6B,IAAK;EACpE,oBAAOJ,KAAA,CAAAK,aAAA,CAACH,SAAS,EAAAI,MAAA,CAAAC,MAAA;IAACC,WAAW,EAAE,UAAW;IAACC,SAAS,EAAE;EAA0B,GAAKL,KAAK,CAAG,CAAC;AAClG,CAAC;AAED,MAAMM,iBAAiB,GAAGT,eAAe,CAAC,mBAAmB,EAAEE,4BAA4B,CAAC;AAE5F,SAASO,iBAAiB","ignoreList":[]}
+{"version":3,"names":["React","makeDecoratable","Separator","DecoratableListItemSeparator","props","createElement","Object","assign","orientation","className","ListItemSeparator"],"sources":["ListItemSeparator.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { makeDecoratable } from \"~/utils.js\";\nimport { Separator, type SeparatorProps } from \"~/Separator/index.js\";\n\ntype ListItemSeparatorProps = SeparatorProps;\n\nconst DecoratableListItemSeparator = (props: ListItemSeparatorProps) => {\n    return <Separator orientation={\"vertical\"} className={\"h-lg mx-sm-plus\"} {...props} />;\n};\n\nconst ListItemSeparator = makeDecoratable(\"ListItemSeparator\", DecoratableListItemSeparator);\n\nexport { ListItemSeparator, type ListItemSeparatorProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,eAAe;AACxB,SAASC,SAAS;AAIlB,MAAMC,4BAA4B,GAAIC,KAA6B,IAAK;EACpE,oBAAOJ,KAAA,CAAAK,aAAA,CAACH,SAAS,EAAAI,MAAA,CAAAC,MAAA;IAACC,WAAW,EAAE,UAAW;IAACC,SAAS,EAAE;EAAkB,GAAKL,KAAK,CAAG,CAAC;AAC1F,CAAC;AAED,MAAMM,iBAAiB,GAAGT,eAAe,CAAC,mBAAmB,EAAEE,4BAA4B,CAAC;AAE5F,SAASO,iBAAiB","ignoreList":[]}

package/List/components/index.d.ts

@@ -1 +1 @@
-export * from "./ListItem";
+export * from "./ListItem.js";

package/List/components/index.js

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

package/List/components/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./ListItem\";\n"],"mappings":"AAAA","ignoreList":[]}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./ListItem.js\";\n"],"mappings":"AAAA","ignoreList":[]}

package/List/index.d.ts

@@ -1 +1 @@
-export * from "./List";
+export * from "./List.js";

package/List/index.js

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

package/List/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./List\";\n"],"mappings":"AAAA","ignoreList":[]}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./List.js\";\n"],"mappings":"AAAA","ignoreList":[]}

package/Loader/Loader.d.ts

@@ -1,11 +1,11 @@
 import React from "react";
-import { type VariantProps } from "../utils";
+import { type VariantProps } from "../utils.js";
 declare const loaderVariants: (props?: ({
     size?: "sm" | "md" | "lg" | "xs" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const loaderBaseVariant: (props?: ({
     variant?: "accent" | "subtle" | "negative" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface LoaderProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof loaderVariants>, VariantProps<typeof loaderBaseVariant> {
     max?: number;
     value?: number;
@@ -27,7 +27,7 @@ declare const Loader: (({ max, min, value, indeterminate, className, size, varia
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ max, min, value, indeterminate, className, size, variant, text, ...props }: LoaderProps) => React.JSX.Element) & {
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<(({ max, min, value, indeterminate, className, size, variant, text, ...props }: LoaderProps) => React.JSX.Element) & {
         original: ({ max, min, value, indeterminate, className, size, variant, text, ...props }: LoaderProps) => React.JSX.Element;
         originalName: string;
         displayName: string;

package/Loader/Loader.js

@@ -1,37 +1,37 @@
 import React, { useState, useEffect } from "react";
-import { Text } from "../Text";
-import { cn, cva, makeDecoratable } from "../utils";
-const loaderVariants = cva("wby-relative wby-translate", {
+import { Text } from "../Text/index.js";
+import { cn, cva, makeDecoratable } from "../utils.js";
+const loaderVariants = cva("relative translate", {
   variants: {
     size: {
-      xs: "wby-size-[16px]",
-      sm: "wby-size-[20px]",
-      md: "wby-size-[24px]",
-      lg: "wby-size-[40px]"
+      xs: "size-md",
+      sm: "size-md-plus",
+      md: "size-lg",
+      lg: "size-[40px]"
     }
   },
   defaultVariants: {
     size: "md"
   }
 });
-const loaderBaseVariant = cva("wby-stroke ", {
+const loaderBaseVariant = cva("stroke ", {
   variants: {
     variant: {
-      accent: "wby-opacity-10 wby-text-neutral-primary",
-      subtle: "wby-opacity-10 wby-text-neutral-primary",
-      negative: "wby-opacity-20 wby-text-neutral-light"
+      accent: "opacity-10 text-neutral-primary",
+      subtle: "opacity-10 text-neutral-primary",
+      negative: "opacity-20 text-neutral-light"
     }
   },
   defaultVariants: {
     variant: "accent"
   }
 });
-const loaderActiveVariant = cva("wby-opacity-100", {
+const loaderActiveVariant = cva("opacity-100", {
   variants: {
     variant: {
-      accent: "wby-text-accent-primary",
-      subtle: "wby-opacity-50 wby-text-neutral-primary",
-      negative: "wby-text-neutral-light"
+      accent: "text-accent-primary",
+      subtle: "opacity-50 text-neutral-primary",
+      negative: "text-neutral-light"
     }
   },
   defaultVariants: {
@@ -66,7 +66,7 @@ const DecoratableLoader = ({
     return () => clearInterval(interval);
   }, [indeterminate]);
   return /*#__PURE__*/React.createElement("div", Object.assign({}, props, {
-    className: "wby-text-center wby-flex wby-flex-col wby-items-center"
+    className: "text-center flex flex-col items-center"
   }), /*#__PURE__*/React.createElement("div", {
     className: cn(loaderVariants({
       size
@@ -74,7 +74,7 @@ const DecoratableLoader = ({
   }, /*#__PURE__*/React.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
-    className: "wby-size-full wby-stroke-current",
+    className: "size-full stroke-current",
     strokeWidth: "12",
     viewBox: "0 0 100 100"
   }, /*#__PURE__*/React.createElement("circle", {
@@ -108,7 +108,7 @@ const DecoratableLoader = ({
     }
   }))), text && /*#__PURE__*/React.createElement(Text, {
     as: "div",
-    className: "wby-text-neutral-strong wby-w-full wby-pt-sm-plus"
+    className: "text-neutral-strong w-full pt-sm-plus"
   }, text));
 };
 const Loader = makeDecoratable("Loader", DecoratableLoader);

package/Loader/Loader.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","useEffect","Text","cn","cva","makeDecoratable","loaderVariants","variants","size","xs","sm","md","lg","defaultVariants","loaderBaseVariant","variant","accent","subtle","negative","loaderActiveVariant","DecoratableLoader","max","min","value","indeterminate","className","text","props","circumference","Math","PI","percentPx","currentPercent","round","rotation","setRotation","interval","setInterval","prev","clearInterval","createElement","Object","assign","xmlns","fill","strokeWidth","viewBox","cx","cy","r","strokeDashoffset","style","strokeDasharray","transition","transformOrigin","transitionProperty","transform","as","Loader"],"sources":["Loader.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport { Text } from \"~/Text\";\nimport { cn, cva, makeDecoratable, type VariantProps } from \"~/utils\";\n\nconst loaderVariants = cva(\"wby-relative wby-translate\", {\n    variants: {\n        size: {\n            xs: \"wby-size-[16px]\",\n            sm: \"wby-size-[20px]\",\n            md: \"wby-size-[24px]\",\n            lg: \"wby-size-[40px]\"\n        }\n    },\n    defaultVariants: {\n        size: \"md\"\n    }\n});\n\nconst loaderBaseVariant = cva(\"wby-stroke \", {\n    variants: {\n        variant: {\n            accent: \"wby-opacity-10 wby-text-neutral-primary\",\n            subtle: \"wby-opacity-10 wby-text-neutral-primary\",\n            negative: \"wby-opacity-20 wby-text-neutral-light\"\n        }\n    },\n    defaultVariants: {\n        variant: \"accent\"\n    }\n});\n\nconst loaderActiveVariant = cva(\"wby-opacity-100\", {\n    variants: {\n        variant: {\n            accent: \"wby-text-accent-primary\",\n            subtle: \"wby-opacity-50 wby-text-neutral-primary\",\n            negative: \"wby-text-neutral-light\"\n        }\n    },\n    defaultVariants: {\n        variant: \"accent\"\n    }\n});\n\ninterface LoaderProps\n    extends React.HTMLAttributes<HTMLDivElement>,\n        VariantProps<typeof loaderVariants>,\n        VariantProps<typeof loaderBaseVariant> {\n    max?: number;\n    value?: number;\n    min?: number;\n    className?: string;\n    indeterminate?: boolean;\n    text?: React.ReactNode;\n}\n\nconst DecoratableLoader = ({\n    max = 100,\n    min = 0,\n    value = 66,\n    indeterminate = true,\n    className,\n    size,\n    variant,\n    text,\n    ...props\n}: LoaderProps) => {\n    const circumference = 2 * Math.PI * 45;\n    const percentPx = circumference / 100;\n    const currentPercent = Math.round(((value - min) / (max - min)) * 100);\n\n    const [rotation, setRotation] = useState(0);\n    useEffect(() => {\n        let interval: ReturnType<typeof setInterval>;\n        if (indeterminate) {\n            // Rotate the loader by 10 degrees every 30ms when indeterminate\n            interval = setInterval(() => {\n                setRotation(prev => (prev + 10) % 360);\n            }, 30);\n        } else {\n            setRotation(0);\n        }\n        return () => clearInterval(interval);\n    }, [indeterminate]);\n\n    return (\n        <div {...props} className={\"wby-text-center wby-flex wby-flex-col wby-items-center\"}>\n            <div className={cn(loaderVariants({ size }), className)}>\n                <svg\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    fill=\"none\"\n                    className=\"wby-size-full wby-stroke-current\"\n                    strokeWidth=\"12\"\n                    viewBox=\"0 0 100 100\"\n                >\n                    <circle\n                        cx=\"50\"\n                        cy=\"50\"\n                        r=\"44\"\n                        strokeDashoffset=\"0\"\n                        className={cn(loaderBaseVariant({ variant }))}\n                        style={{\n                            strokeDasharray: `${circumference}px ${circumference}px`,\n                            transition: \"all 1s ease 0s\",\n                            transformOrigin: \"50px 50px\"\n                        }}\n                    />\n                    <circle\n                        cx=\"50\"\n                        cy=\"50\"\n                        r=\"44\"\n                        strokeDashoffset=\"0\"\n                        className={cn(loaderActiveVariant({ variant }))}\n                        style={{\n                            strokeDasharray: `${currentPercent * percentPx}px ${circumference}px`,\n                            transition: indeterminate ? \"none\" : \"500ms ease 0s\",\n                            transitionProperty: indeterminate\n                                ? \"transform\"\n                                : \"stroke-dasharray, transform\",\n                            transform: indeterminate\n                                ? `rotate(${rotation}deg)` // Rotate when indeterminate\n                                : \"rotate(-90deg)\",\n                            transformOrigin: \"50px 50px\"\n                        }}\n                    />\n                </svg>\n            </div>\n            {text && (\n                <Text as={\"div\"} className={\"wby-text-neutral-strong wby-w-full wby-pt-sm-plus\"}>\n                    {text}\n                </Text>\n            )}\n        </div>\n    );\n};\n\nconst Loader = makeDecoratable(\"Loader\", DecoratableLoader);\n\nexport { Loader, type LoaderProps };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useState","useEffect","Text","cn","cva","makeDecoratable","loaderVariants","variants","size","xs","sm","md","lg","defaultVariants","loaderBaseVariant","variant","accent","subtle","negative","loaderActiveVariant","DecoratableLoader","max","min","value","indeterminate","className","text","props","circumference","Math","PI","percentPx","currentPercent","round","rotation","setRotation","interval","setInterval","prev","clearInterval","createElement","Object","assign","xmlns","fill","strokeWidth","viewBox","cx","cy","r","strokeDashoffset","style","strokeDasharray","transition","transformOrigin","transitionProperty","transform","as","Loader"],"sources":["Loader.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport { Text } from \"~/Text/index.js\";\nimport { cn, cva, makeDecoratable, type VariantProps } from \"~/utils.js\";\n\nconst loaderVariants = cva(\"relative translate\", {\n    variants: {\n        size: {\n            xs: \"size-md\",\n            sm: \"size-md-plus\",\n            md: \"size-lg\",\n            lg: \"size-[40px]\"\n        }\n    },\n    defaultVariants: {\n        size: \"md\"\n    }\n});\n\nconst loaderBaseVariant = cva(\"stroke \", {\n    variants: {\n        variant: {\n            accent: \"opacity-10 text-neutral-primary\",\n            subtle: \"opacity-10 text-neutral-primary\",\n            negative: \"opacity-20 text-neutral-light\"\n        }\n    },\n    defaultVariants: {\n        variant: \"accent\"\n    }\n});\n\nconst loaderActiveVariant = cva(\"opacity-100\", {\n    variants: {\n        variant: {\n            accent: \"text-accent-primary\",\n            subtle: \"opacity-50 text-neutral-primary\",\n            negative: \"text-neutral-light\"\n        }\n    },\n    defaultVariants: {\n        variant: \"accent\"\n    }\n});\n\ninterface LoaderProps\n    extends\n        React.HTMLAttributes<HTMLDivElement>,\n        VariantProps<typeof loaderVariants>,\n        VariantProps<typeof loaderBaseVariant> {\n    max?: number;\n    value?: number;\n    min?: number;\n    className?: string;\n    indeterminate?: boolean;\n    text?: React.ReactNode;\n}\n\nconst DecoratableLoader = ({\n    max = 100,\n    min = 0,\n    value = 66,\n    indeterminate = true,\n    className,\n    size,\n    variant,\n    text,\n    ...props\n}: LoaderProps) => {\n    const circumference = 2 * Math.PI * 45;\n    const percentPx = circumference / 100;\n    const currentPercent = Math.round(((value - min) / (max - min)) * 100);\n\n    const [rotation, setRotation] = useState(0);\n    useEffect(() => {\n        let interval: ReturnType<typeof setInterval>;\n        if (indeterminate) {\n            // Rotate the loader by 10 degrees every 30ms when indeterminate\n            interval = setInterval(() => {\n                setRotation(prev => (prev + 10) % 360);\n            }, 30);\n        } else {\n            setRotation(0);\n        }\n        return () => clearInterval(interval);\n    }, [indeterminate]);\n\n    return (\n        <div {...props} className={\"text-center flex flex-col items-center\"}>\n            <div className={cn(loaderVariants({ size }), className)}>\n                <svg\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    fill=\"none\"\n                    className=\"size-full stroke-current\"\n                    strokeWidth=\"12\"\n                    viewBox=\"0 0 100 100\"\n                >\n                    <circle\n                        cx=\"50\"\n                        cy=\"50\"\n                        r=\"44\"\n                        strokeDashoffset=\"0\"\n                        className={cn(loaderBaseVariant({ variant }))}\n                        style={{\n                            strokeDasharray: `${circumference}px ${circumference}px`,\n                            transition: \"all 1s ease 0s\",\n                            transformOrigin: \"50px 50px\"\n                        }}\n                    />\n                    <circle\n                        cx=\"50\"\n                        cy=\"50\"\n                        r=\"44\"\n                        strokeDashoffset=\"0\"\n                        className={cn(loaderActiveVariant({ variant }))}\n                        style={{\n                            strokeDasharray: `${currentPercent * percentPx}px ${circumference}px`,\n                            transition: indeterminate ? \"none\" : \"500ms ease 0s\",\n                            transitionProperty: indeterminate\n                                ? \"transform\"\n                                : \"stroke-dasharray, transform\",\n                            transform: indeterminate\n                                ? `rotate(${rotation}deg)` // Rotate when indeterminate\n                                : \"rotate(-90deg)\",\n                            transformOrigin: \"50px 50px\"\n                        }}\n                    />\n                </svg>\n            </div>\n            {text && (\n                <Text as={\"div\"} className={\"text-neutral-strong w-full pt-sm-plus\"}>\n                    {text}\n                </Text>\n            )}\n        </div>\n    );\n};\n\nconst Loader = makeDecoratable(\"Loader\", DecoratableLoader);\n\nexport { Loader, type LoaderProps };\n"],"mappings":"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","ignoreList":[]}

package/Loader/Loader.mdx

@@ -1,7 +1,7 @@
-import { Canvas, Meta, Controls } from '@storybook/blocks';
+import { Canvas, Meta, Controls } from "@storybook/addon-docs/blocks";
 
-import * as LoaderStories from './Loader.stories';
-import * as OverlayLoaderStories from './OverlayLoader.stories';
+import * as LoaderStories from "./Loader.stories";
+import * as OverlayLoaderStories from "./OverlayLoader.stories";
 
 <Meta title="Components/Loader" />
 
@@ -10,8 +10,8 @@ import * as OverlayLoaderStories from './OverlayLoader.stories';
 The Loader components provide visual feedback to users when content is loading or an operation is in progress.
 Webiny offers two loader components:
 
-1. -  **Loader** - A standalone circular progress indicator.
-2. -  **OverlayLoader** - The OverlayLoader covers its parent container with a semi-transparent overlay, typically used to indicate a loading state while keeping the background content visible but inactive. Please refer below for more examples.
+1.  - **Loader** - A standalone circular progress indicator.
+2.  - **OverlayLoader** - The OverlayLoader covers its parent container with a semi-transparent overlay, typically used to indicate a loading state while keeping the background content visible but inactive. Please refer below for more examples.
 
 ## Loader
 
@@ -22,32 +22,27 @@ import React from "react";
 import { Loader } from "@webiny/admin-ui";
 
 const LoaderExample = () => {
-    return (
-        <div className="wby-flex wby-flex-col wby-items-center wby-gap-4">
-            <Loader
-                size="md"
-                variant="accent"
-                indeterminate={true}
-                text="Loading..."
-            />
-        </div>
-    );
-};
+return (
+
+<div className="flex flex-col items-center gap-4">
+  <Loader size="md" variant="accent" indeterminate={true} text="Loading..." />
+</div>
+); };
 
 export default LoaderExample;
 
 ` } }
-    additionalActions={[
-        {
-            title: 'Open in GitHub',
-            onClick: () => {
-                window.open(
-                    'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Loader/Loader.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/Loader/Loader.tsx',
+'_blank'
+);
+},
+}
+]}
 />
 
 <Controls of={LoaderStories.Documentation} />
@@ -57,16 +52,11 @@ import React from "react";
 import { Loader } from "@webiny/admin-ui";
 
 const LoaderExample = () => {
-    return (
-        <div className="wby-flex wby-flex-col wby-items-center wby-gap-4">
-            <Loader
-                size="md"
-                variant="accent"
-                indeterminate={true}
-                text="Loading..."
-            />
-        </div>
-    );
+  return (
+    <div className="flex flex-col items-center gap-4">
+      <Loader size="md" variant="accent" indeterminate={true} text="Loading..." />
+    </div>
+  );
 };
 
 export default LoaderExample;
@@ -81,7 +71,8 @@ import React from "react";
 import { Loader } from "@webiny/admin-ui";
 
 const ExtraSmallLoaderExample = () => (
-    <Loader size="xs" />
+
+<Loader size="xs" />
 );
 
 export default ExtraSmallLoaderExample;
@@ -92,7 +83,8 @@ import React from "react";
 import { Loader } from "@webiny/admin-ui";
 
 const SmallLoaderExample = () => (
-    <Loader size="sm" />
+
+<Loader size="sm" />
 );
 
 export default SmallLoaderExample;
@@ -103,7 +95,8 @@ import React from "react";
 import { Loader } from "@webiny/admin-ui";
 
 const MediumLoaderExample = () => (
-    <Loader size="md" />
+
+<Loader size="md" />
 );
 
 export default MediumLoaderExample;
@@ -114,7 +107,8 @@ import React from "react";
 import { Loader } from "@webiny/admin-ui";
 
 const LargeLoaderExample = () => (
-    <Loader size="lg" />
+
+<Loader size="lg" />
 );
 
 export default LargeLoaderExample;
@@ -129,7 +123,8 @@ import React from "react";
 import { Loader } from "@webiny/admin-ui";
 
 const AccentLoaderExample = () => (
-    <Loader variant="accent" />
+
+<Loader variant="accent" />
 );
 
 export default AccentLoaderExample;
@@ -140,7 +135,8 @@ import React from "react";
 import { Loader } from "@webiny/admin-ui";
 
 const SubtleLoaderExample = () => (
-    <Loader variant="subtle" />
+
+<Loader variant="subtle" />
 );
 
 export default SubtleLoaderExample;
@@ -151,9 +147,10 @@ import React from "react";
 import { Loader } from "@webiny/admin-ui";
 
 const NegativeLoaderExample = () => (
-    <div className="wby-bg-primary wby-p-md wby-rounded-md">
-        <Loader variant="negative" />
-    </div>
+
+<div className="bg-primary p-md rounded-md">
+  <Loader variant="negative" />
+</div>
 );
 
 export default NegativeLoaderExample;
@@ -168,7 +165,7 @@ import React, { useState, useEffect } from "react";
 import { Loader } from "@webiny/admin-ui";
 
 const ControlledProgressExample = () => {
-    const [value, setValue] = useState(0);
+const [value, setValue] = useState(0);
 
     useEffect(() => {
         const interval = setInterval(() => {
@@ -190,6 +187,7 @@ const ControlledProgressExample = () => {
             text={"Loading " + value + "%"}
         />
     );
+
 };
 
 export default ControlledProgressExample;
@@ -204,7 +202,8 @@ import React from "react";
 import { Loader } from "@webiny/admin-ui";
 
 const LoaderWithTextExample = () => (
-    <Loader text="Loading..." />
+
+<Loader text="Loading..." />
 );
 
 export default LoaderWithTextExample;
@@ -219,34 +218,30 @@ import React from "react";
 import { OverlayLoader } from "@webiny/admin-ui";
 
 const OverlayLoaderExample = () => {
-    return (
-        <div className="wby-relative wby-h-64 wby-w-full wby-bg-neutral-light wby-rounded-md wby-p-4">
-            <OverlayLoader
-                size="lg"
-                variant="accent"
-                text="Loading content..."
-            />
-            <div className="wby-h-full wby-flex wby-items-center wby-justify-center">
-                <p className="wby-text-neutral-strong">Content is loading...</p>
-            </div>
-        </div>
-    );
-};
+return (
+
+<div className="relative h-64 w-full bg-neutral-light rounded-md p-4">
+  <OverlayLoader size="lg" variant="accent" text="Loading content..." />
+  <div className="h-full flex items-center justify-center">
+    <p className="text-neutral-strong">Content is loading...</p>
+  </div>
+</div>
+); };
 
 export default OverlayLoaderExample;
 
 ` } }
-    additionalActions={[
-        {
-            title: 'Open in GitHub',
-            onClick: () => {
-                window.open(
-                    'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Loader/OverlayLoader.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/Loader/OverlayLoader.tsx',
+'_blank'
+);
+},
+}
+]}
 />
 
 <Controls of={OverlayLoaderStories.Documentation} />
@@ -256,10 +251,12 @@ import React from "react";
 import { OverlayLoader } from "@webiny/admin-ui";
 
 const DefaultOverlayLoaderExample = () => (
-    <div>
-        <OverlayLoader />
-        The OverlayLoader component covers its parent container with a semi-transparent overlay, typically used to indicate a loading state while keeping the background content visible but inactive.
-    </div>
+  <div>
+    <OverlayLoader />
+    The OverlayLoader component covers its parent container with a semi-transparent overlay,
+    typically used to indicate a loading state while keeping the background content visible but
+    inactive.
+  </div>
 );
 
 export default DefaultOverlayLoaderExample;
@@ -272,10 +269,12 @@ import React from "react";
 import { OverlayLoader } from "@webiny/admin-ui";
 
 const DefaultOverlayLoaderExample = () => (
-    <div>
-        <OverlayLoader />
-        The OverlayLoader component covers its parent container with a semi-transparent overlay, typically used to indicate a loading state while keeping the background content visible but inactive.
-    </div>
+
+<div>
+  <OverlayLoader />
+  The OverlayLoader component covers its parent container with a semi-transparent overlay, typically
+  used to indicate a loading state while keeping the background content visible but inactive.
+</div>
 );
 
 export default DefaultOverlayLoaderExample;
@@ -288,10 +287,12 @@ import React from "react";
 import { OverlayLoader } from "@webiny/admin-ui";
 
 const OverlayLoaderWithTextExample = () => (
-    <div>
-        <OverlayLoader text="Loading..." />
-         The OverlayLoader component covers its parent container with a semi-transparent overlay, typically used to indicate a loading state while keeping the background content visible but inactive.
-    </div>
+
+<div>
+  <OverlayLoader text="Loading..." />
+  The OverlayLoader component covers its parent container with a semi-transparent overlay, typically
+  used to indicate a loading state while keeping the background content visible but inactive.
+</div>
 );
 
 export default OverlayLoaderWithTextExample;
@@ -300,10 +301,12 @@ export default OverlayLoaderWithTextExample;
 ## Anatomy
 
 ### Construction
-<img src="/images/storybook/loader/construction.png" alt="Construction"/>
+
+<img src="/images/storybook/loader/construction.png" alt="Construction" />
 
 ### Style
-<img src="/images/storybook/loader/style.png" alt="Style"/>
+
+<img src="/images/storybook/loader/style.png" alt="Style" />
 
 ### Type
 
@@ -311,16 +314,18 @@ A **determinate** circular loader visually represents progress with a circular a
 
 An **indeterminate loader** does not display exact progress but continuously animates, signaling that a process is ongoing without a known completion time.
 
-<img src="/images/storybook/loader/type.png" alt="Type"/>
+<img src="/images/storybook/loader/type.png" alt="Type" />
 
 ### Size
-<img src="/images/storybook/loader/size.png" alt="Size"/>
+
+<img src="/images/storybook/loader/size.png" alt="Size" />
 
 ### Background Overlay
-<img src="/images/storybook/loader/background-overlay.png" alt="Background Overlay"/>
+
+<img src="/images/storybook/loader/background-overlay.png" alt="Background Overlay" />
 
 ## Usage
 
-<img src="/images/storybook/loader/usage-1.png" alt="Usage"/>
+<img src="/images/storybook/loader/usage-1.png" alt="Usage" />
 
-<img src="/images/storybook/loader/usage-2.png" alt="Usage"/>
+<img src="/images/storybook/loader/usage-2.png" alt="Usage" />

package/Loader/Loader.stories.d.ts

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

package/Loader/Loader.stories.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { Loader } from "./Loader";
+import { Loader } from "./Loader.js";
 const meta = {
   title: "Components/Loader",
   component: Loader,
@@ -55,8 +55,7 @@ export const Documentation = {
       control: "text"
     },
     className: {
-      description: "Additional CSS class names. You can pass multiple class names, separated by commas or spaces.",
-      control: "none"
+      description: "Additional CSS class names. You can pass multiple class names, separated by commas or spaces."
     }
   }
 };
@@ -96,7 +95,7 @@ export const Negative = {
     variant: "negative"
   },
   decorators: [Story => /*#__PURE__*/React.createElement("div", {
-    className: "wby-bg-primary wby-p-md wby-rounded-md"
+    className: "bg-primary p-md rounded-md"
   }, /*#__PURE__*/React.createElement(Story, null))]
 };
 export const WithControlledValue = {

package/Loader/Loader.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","useEffect","Loader","meta","title","component","parameters","layout","Documentation","args","size","variant","indeterminate","value","min","max","text","className","undefined","argTypes","description","control","options","type","Default","ExtraSmall","Small","Medium","Large","Accent","Subtle","Negative","decorators","Story","createElement","WithControlledValue","render","setValue","interval","setInterval","prevValue","clearInterval","Object","assign","WithText"],"sources":["Loader.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { Loader } from \"./Loader\";\n\nconst meta: Meta<typeof Loader> = {\n    title: \"Components/Loader\",\n    component: Loader,\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Loader>;\n\nexport const Documentation: Story = {\n    args: {\n        size: \"md\",\n        variant: \"accent\",\n        indeterminate: true,\n        value: 66,\n        min: 0,\n        max: 100,\n        text: \"Loading...\",\n        className: undefined\n    },\n    argTypes: {\n        size: {\n            description: \"Size of the loader\",\n            control: \"select\",\n            options: [\"xs\", \"sm\", \"md\", \"lg\"]\n        },\n        variant: {\n            description: \"Visual style variant of the loader\",\n            control: \"select\",\n            options: [\"accent\", \"subtle\", \"negative\"]\n        },\n        indeterminate: {\n            description: \"Whether the loader should show indeterminate progress\",\n            control: \"boolean\"\n        },\n        value: {\n            description: \"Current progress value (when not indeterminate)\",\n            control: { type: \"number\", min: 0, max: 100 }\n        },\n        min: {\n            description: \"Minimum value for progress calculation\",\n            control: \"number\"\n        },\n        max: {\n            description: \"Maximum value for progress calculation\",\n            control: \"number\"\n        },\n        text: {\n            description: \"Optional text to display below the loader\",\n            control: \"text\"\n        },\n        className: {\n            description:\n                \"Additional CSS class names. You can pass multiple class names, separated by commas or spaces.\",\n            control: \"none\"\n        }\n    }\n};\n\nexport const Default: Story = {};\n\nexport const ExtraSmall: Story = {\n    args: {\n        size: \"xs\"\n    }\n};\n\nexport const Small: Story = {\n    args: {\n        size: \"sm\"\n    }\n};\n\nexport const Medium: Story = {\n    args: {\n        size: \"md\"\n    }\n};\n\nexport const Large: Story = {\n    args: {\n        size: \"lg\"\n    }\n};\n\nexport const Accent: Story = {\n    args: {\n        variant: \"accent\"\n    }\n};\n\nexport const Subtle: Story = {\n    args: {\n        variant: \"subtle\"\n    }\n};\n\nexport const Negative: Story = {\n    args: {\n        variant: \"negative\"\n    },\n    decorators: [\n        Story => (\n            <div className=\"wby-bg-primary wby-p-md wby-rounded-md\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const WithControlledValue: Story = {\n    args: {\n        value: 0,\n        indeterminate: false\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n\n        useEffect(() => {\n            const interval = setInterval(() => {\n                setValue((prevValue = 0) => {\n                    if (prevValue === 100) {\n                        return prevValue;\n                    }\n                    return prevValue + 5;\n                });\n            }, 50);\n\n            return () => clearInterval(interval);\n        }, []);\n\n        return <Loader {...args} value={value} text={`Loading ${value}%`} />;\n    }\n};\n\nexport const WithText: Story = {\n    args: {\n        text: \"Loading...\"\n    }\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useState","useEffect","Loader","meta","title","component","parameters","layout","Documentation","args","size","variant","indeterminate","value","min","max","text","className","undefined","argTypes","description","control","options","type","Default","ExtraSmall","Small","Medium","Large","Accent","Subtle","Negative","decorators","Story","createElement","WithControlledValue","render","setValue","interval","setInterval","prevValue","clearInterval","Object","assign","WithText"],"sources":["Loader.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { Loader } from \"./Loader.js\";\n\nconst meta: Meta<typeof Loader> = {\n    title: \"Components/Loader\",\n    component: Loader,\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Loader>;\n\nexport const Documentation: Story = {\n    args: {\n        size: \"md\",\n        variant: \"accent\",\n        indeterminate: true,\n        value: 66,\n        min: 0,\n        max: 100,\n        text: \"Loading...\",\n        className: undefined\n    },\n    argTypes: {\n        size: {\n            description: \"Size of the loader\",\n            control: \"select\",\n            options: [\"xs\", \"sm\", \"md\", \"lg\"]\n        },\n        variant: {\n            description: \"Visual style variant of the loader\",\n            control: \"select\",\n            options: [\"accent\", \"subtle\", \"negative\"]\n        },\n        indeterminate: {\n            description: \"Whether the loader should show indeterminate progress\",\n            control: \"boolean\"\n        },\n        value: {\n            description: \"Current progress value (when not indeterminate)\",\n            control: { type: \"number\", min: 0, max: 100 }\n        },\n        min: {\n            description: \"Minimum value for progress calculation\",\n            control: \"number\"\n        },\n        max: {\n            description: \"Maximum value for progress calculation\",\n            control: \"number\"\n        },\n        text: {\n            description: \"Optional text to display below the loader\",\n            control: \"text\"\n        },\n        className: {\n            description:\n                \"Additional CSS class names. You can pass multiple class names, separated by commas or spaces.\"\n        }\n    }\n};\n\nexport const Default: Story = {};\n\nexport const ExtraSmall: Story = {\n    args: {\n        size: \"xs\"\n    }\n};\n\nexport const Small: Story = {\n    args: {\n        size: \"sm\"\n    }\n};\n\nexport const Medium: Story = {\n    args: {\n        size: \"md\"\n    }\n};\n\nexport const Large: Story = {\n    args: {\n        size: \"lg\"\n    }\n};\n\nexport const Accent: Story = {\n    args: {\n        variant: \"accent\"\n    }\n};\n\nexport const Subtle: Story = {\n    args: {\n        variant: \"subtle\"\n    }\n};\n\nexport const Negative: Story = {\n    args: {\n        variant: \"negative\"\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-primary p-md rounded-md\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const WithControlledValue: Story = {\n    args: {\n        value: 0,\n        indeterminate: false\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n\n        useEffect(() => {\n            const interval = setInterval(() => {\n                setValue((prevValue = 0) => {\n                    if (prevValue === 100) {\n                        return prevValue;\n                    }\n                    return prevValue + 5;\n                });\n            }, 50);\n\n            return () => clearInterval(interval);\n        }, []);\n\n        return <Loader {...args} value={value} text={`Loading ${value}%`} />;\n    }\n};\n\nexport const WithText: Story = {\n    args: {\n        text: \"Loading...\"\n    }\n};\n"],"mappings":"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","ignoreList":[]}