@webiny/admin-ui 6.0.0-alpha.5 → 6.0.0-rc.0

package/List/components/ListItemHandle.js

@@ -1,12 +1,12 @@
 import * as React from "react";
 import { ReactComponent as DragHandleIcon } from "@webiny/icons/drag_indicator.svg";
-import { makeDecoratable } from "../../utils";
-import { Icon } from "../../Icon";
+import { makeDecoratable } from "../../utils.js";
+import { Icon } from "../../Icon/index.js";
 const DecoratableListItemHandle = props => {
   return /*#__PURE__*/React.createElement(Icon, Object.assign({
     size: "md",
     color: "neutral-light",
-    className: "wby-mx-xxs wby-cursor-grab",
+    className: "mx-xxs cursor-grab",
     icon: /*#__PURE__*/React.createElement(DragHandleIcon, null),
     label: "Drag handle"
   }, props));

package/List/components/ListItemHandle.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","ReactComponent","DragHandleIcon","makeDecoratable","Icon","DecoratableListItemHandle","props","createElement","Object","assign","size","color","className","icon","label","ListItemHandle"],"sources":["ListItemHandle.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { ReactComponent as DragHandleIcon } from \"@webiny/icons/drag_indicator.svg\";\nimport { makeDecoratable } from \"~/utils\";\nimport type { IconProps as IconProps } from \"~/Icon\";\nimport { Icon } from \"~/Icon\";\n\ninterface ListItemHandleProps extends Omit<IconProps, \"icon\" | \"label\"> {\n    icon?: React.ReactElement;\n    label?: string;\n}\n\nconst DecoratableListItemHandle = (props: ListItemHandleProps) => {\n    return (\n        <Icon\n            size={\"md\"}\n            color={\"neutral-light\"}\n            className={\"wby-mx-xxs wby-cursor-grab\"}\n            icon={<DragHandleIcon />}\n            label={\"Drag handle\"}\n            {...props}\n        />\n    );\n};\n\nconst ListItemHandle = makeDecoratable(\"ListItemHandle\", DecoratableListItemHandle);\n\nexport { ListItemHandle, type ListItemHandleProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,cAAc,IAAIC,cAAc,QAAQ,kCAAkC;AACnF,SAASC,eAAe;AAExB,SAASC,IAAI;AAOb,MAAMC,yBAAyB,GAAIC,KAA0B,IAAK;EAC9D,oBACIN,KAAA,CAAAO,aAAA,CAACH,IAAI,EAAAI,MAAA,CAAAC,MAAA;IACDC,IAAI,EAAE,IAAK;IACXC,KAAK,EAAE,eAAgB;IACvBC,SAAS,EAAE,4BAA6B;IACxCC,IAAI,eAAEb,KAAA,CAAAO,aAAA,CAACL,cAAc,MAAE,CAAE;IACzBY,KAAK,EAAE;EAAc,GACjBR,KAAK,CACZ,CAAC;AAEV,CAAC;AAED,MAAMS,cAAc,GAAGZ,eAAe,CAAC,gBAAgB,EAAEE,yBAAyB,CAAC;AAEnF,SAASU,cAAc","ignoreList":[]}
+{"version":3,"names":["React","ReactComponent","DragHandleIcon","makeDecoratable","Icon","DecoratableListItemHandle","props","createElement","Object","assign","size","color","className","icon","label","ListItemHandle"],"sources":["ListItemHandle.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { ReactComponent as DragHandleIcon } from \"@webiny/icons/drag_indicator.svg\";\nimport { makeDecoratable } from \"~/utils.js\";\nimport type { IconProps as IconProps } from \"~/Icon/index.js\";\nimport { Icon } from \"~/Icon/index.js\";\n\ninterface ListItemHandleProps extends Omit<IconProps, \"icon\" | \"label\"> {\n    icon?: React.ReactElement;\n    label?: string;\n}\n\nconst DecoratableListItemHandle = (props: ListItemHandleProps) => {\n    return (\n        <Icon\n            size={\"md\"}\n            color={\"neutral-light\"}\n            className={\"mx-xxs cursor-grab\"}\n            icon={<DragHandleIcon />}\n            label={\"Drag handle\"}\n            {...props}\n        />\n    );\n};\n\nconst ListItemHandle = makeDecoratable(\"ListItemHandle\", DecoratableListItemHandle);\n\nexport { ListItemHandle, type ListItemHandleProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,cAAc,IAAIC,cAAc,QAAQ,kCAAkC;AACnF,SAASC,eAAe;AAExB,SAASC,IAAI;AAOb,MAAMC,yBAAyB,GAAIC,KAA0B,IAAK;EAC9D,oBACIN,KAAA,CAAAO,aAAA,CAACH,IAAI,EAAAI,MAAA,CAAAC,MAAA;IACDC,IAAI,EAAE,IAAK;IACXC,KAAK,EAAE,eAAgB;IACvBC,SAAS,EAAE,oBAAqB;IAChCC,IAAI,eAAEb,KAAA,CAAAO,aAAA,CAACL,cAAc,MAAE,CAAE;IACzBY,KAAK,EAAE;EAAc,GACjBR,KAAK,CACZ,CAAC;AAEV,CAAC;AAED,MAAMS,cAAc,GAAGZ,eAAe,CAAC,gBAAgB,EAAEE,yBAAyB,CAAC;AAEnF,SAASU,cAAc","ignoreList":[]}

package/List/components/ListItemIcon.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { IconProps as IconComponentProps } from "../../Icon";
+import type { IconProps as IconComponentProps } from "../../Icon/index.js";
 type ListItemIconProps = IconComponentProps;
 export declare const ListItemIcon: ((props: ListItemIconProps) => React.JSX.Element) & {
     original: (props: ListItemIconProps) => React.JSX.Element;
@@ -14,7 +14,7 @@ export declare const ListItemIcon: ((props: ListItemIconProps) => React.JSX.Elem
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: ListItemIconProps) => React.JSX.Element) & {
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<((props: ListItemIconProps) => React.JSX.Element) & {
         original: (props: ListItemIconProps) => React.JSX.Element;
         originalName: string;
         displayName: string;

package/List/components/ListItemIcon.js

@@ -1,6 +1,6 @@
 import * as React from "react";
-import { makeDecoratable } from "../../utils";
-import { Icon as IconComponent } from "../../Icon";
+import { makeDecoratable } from "../../utils.js";
+import { Icon as IconComponent } from "../../Icon/index.js";
 const DecoratableListItemIcon = props => {
   return /*#__PURE__*/React.createElement(IconComponent, Object.assign({
     size: "md",

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,5 +1,5 @@
 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;
@@ -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":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,EAAEC,SAAS,QAAQ,OAAO;AAClD,SAASC,IAAI;AACb,SAASC,EAAE,EAAEC,GAAG,EAAEC,eAAe;AAEjC,MAAMC,cAAc,GAAGF,GAAG,CAAC,4BAA4B,EAAE;EACrDG,QAAQ,EAAE;IACNC,IAAI,EAAE;MACFC,EAAE,EAAE,iBAAiB;MACrBC,EAAE,EAAE,iBAAiB;MACrBC,EAAE,EAAE,iBAAiB;MACrBC,EAAE,EAAE;IACR;EACJ,CAAC;EACDC,eAAe,EAAE;IACbL,IAAI,EAAE;EACV;AACJ,CAAC,CAAC;AAEF,MAAMM,iBAAiB,GAAGV,GAAG,CAAC,aAAa,EAAE;EACzCG,QAAQ,EAAE;IACNQ,OAAO,EAAE;MACLC,MAAM,EAAE,yCAAyC;MACjDC,MAAM,EAAE,yCAAyC;MACjDC,QAAQ,EAAE;IACd;EACJ,CAAC;EACDL,eAAe,EAAE;IACbE,OAAO,EAAE;EACb;AACJ,CAAC,CAAC;AAEF,MAAMI,mBAAmB,GAAGf,GAAG,CAAC,iBAAiB,EAAE;EAC/CG,QAAQ,EAAE;IACNQ,OAAO,EAAE;MACLC,MAAM,EAAE,yBAAyB;MACjCC,MAAM,EAAE,yCAAyC;MACjDC,QAAQ,EAAE;IACd;EACJ,CAAC;EACDL,eAAe,EAAE;IACbE,OAAO,EAAE;EACb;AACJ,CAAC,CAAC;AAcF,MAAMK,iBAAiB,GAAGA,CAAC;EACvBC,GAAG,GAAG,GAAG;EACTC,GAAG,GAAG,CAAC;EACPC,KAAK,GAAG,EAAE;EACVC,aAAa,GAAG,IAAI;EACpBC,SAAS;EACTjB,IAAI;EACJO,OAAO;EACPW,IAAI;EACJ,GAAGC;AACM,CAAC,KAAK;EACf,MAAMC,aAAa,GAAG,CAAC,GAAGC,IAAI,CAACC,EAAE,GAAG,EAAE;EACtC,MAAMC,SAAS,GAAGH,aAAa,GAAG,GAAG;EACrC,MAAMI,cAAc,GAAGH,IAAI,CAACI,KAAK,CAAE,CAACV,KAAK,GAAGD,GAAG,KAAKD,GAAG,GAAGC,GAAG,CAAC,GAAI,GAAG,CAAC;EAEtE,MAAM,CAACY,QAAQ,EAAEC,WAAW,CAAC,GAAGnC,QAAQ,CAAC,CAAC,CAAC;EAC3CC,SAAS,CAAC,MAAM;IACZ,IAAImC,QAAwC;IAC5C,IAAIZ,aAAa,EAAE;MACf;MACAY,QAAQ,GAAGC,WAAW,CAAC,MAAM;QACzBF,WAAW,CAACG,IAAI,IAAI,CAACA,IAAI,GAAG,EAAE,IAAI,GAAG,CAAC;MAC1C,CAAC,EAAE,EAAE,CAAC;IACV,CAAC,MAAM;MACHH,WAAW,CAAC,CAAC,CAAC;IAClB;IACA,OAAO,MAAMI,aAAa,CAACH,QAAQ,CAAC;EACxC,CAAC,EAAE,CAACZ,aAAa,CAAC,CAAC;EAEnB,oBACIzB,KAAA,CAAAyC,aAAA,QAAAC,MAAA,CAAAC,MAAA,KAASf,KAAK;IAAEF,SAAS,EAAE;EAAyD,iBAChF1B,KAAA,CAAAyC,aAAA;IAAKf,SAAS,EAAEtB,EAAE,CAACG,cAAc,CAAC;MAAEE;IAAK,CAAC,CAAC,EAAEiB,SAAS;EAAE,gBACpD1B,KAAA,CAAAyC,aAAA;IACIG,KAAK,EAAC,4BAA4B;IAClCC,IAAI,EAAC,MAAM;IACXnB,SAAS,EAAC,kCAAkC;IAC5CoB,WAAW,EAAC,IAAI;IAChBC,OAAO,EAAC;EAAa,gBAErB/C,KAAA,CAAAyC,aAAA;IACIO,EAAE,EAAC,IAAI;IACPC,EAAE,EAAC,IAAI;IACPC,CAAC,EAAC,IAAI;IACNC,gBAAgB,EAAC,GAAG;IACpBzB,SAAS,EAAEtB,EAAE,CAACW,iBAAiB,CAAC;MAAEC;IAAQ,CAAC,CAAC,CAAE;IAC9CoC,KAAK,EAAE;MACHC,eAAe,EAAE,GAAGxB,aAAa,MAAMA,aAAa,IAAI;MACxDyB,UAAU,EAAE,gBAAgB;MAC5BC,eAAe,EAAE;IACrB;EAAE,CACL,CAAC,eACFvD,KAAA,CAAAyC,aAAA;IACIO,EAAE,EAAC,IAAI;IACPC,EAAE,EAAC,IAAI;IACPC,CAAC,EAAC,IAAI;IACNC,gBAAgB,EAAC,GAAG;IACpBzB,SAAS,EAAEtB,EAAE,CAACgB,mBAAmB,CAAC;MAAEJ;IAAQ,CAAC,CAAC,CAAE;IAChDoC,KAAK,EAAE;MACHC,eAAe,EAAE,GAAGpB,cAAc,GAAGD,SAAS,MAAMH,aAAa,IAAI;MACrEyB,UAAU,EAAE7B,aAAa,GAAG,MAAM,GAAG,eAAe;MACpD+B,kBAAkB,EAAE/B,aAAa,GAC3B,WAAW,GACX,6BAA6B;MACnCgC,SAAS,EAAEhC,aAAa,GAClB,UAAUU,QAAQ,MAAM,CAAC;MAAA,EACzB,gBAAgB;MACtBoB,eAAe,EAAE;IACrB;EAAE,CACL,CACA,CACJ,CAAC,EACL5B,IAAI,iBACD3B,KAAA,CAAAyC,aAAA,CAACtC,IAAI;IAACuD,EAAE,EAAE,KAAM;IAAChC,SAAS,EAAE;EAAoD,GAC3EC,IACC,CAET,CAAC;AAEd,CAAC;AAED,MAAMgC,MAAM,GAAGrD,eAAe,CAAC,QAAQ,EAAEe,iBAAiB,CAAC;AAE3D,SAASsC,MAAM","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 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,4 +1,4 @@
-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';
@@ -23,7 +23,7 @@ import { Loader } from "@webiny/admin-ui";
 
 const LoaderExample = () => {
     return (
-        <div className="wby-flex wby-flex-col wby-items-center wby-gap-4">
+        <div className="flex flex-col items-center gap-4">
             <Loader
                 size="md"
                 variant="accent"
@@ -58,7 +58,7 @@ import { Loader } from "@webiny/admin-ui";
 
 const LoaderExample = () => {
     return (
-        <div className="wby-flex wby-flex-col wby-items-center wby-gap-4">
+        <div className="flex flex-col items-center gap-4">
             <Loader
                 size="md"
                 variant="accent"
@@ -151,7 +151,7 @@ import React from "react";
 import { Loader } from "@webiny/admin-ui";
 
 const NegativeLoaderExample = () => (
-    <div className="wby-bg-primary wby-p-md wby-rounded-md">
+    <div className="bg-primary p-md rounded-md">
         <Loader variant="negative" />
     </div>
 );
@@ -220,14 +220,14 @@ 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">
+        <div className="relative h-64 w-full bg-neutral-light rounded-md 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 className="h-full flex items-center justify-center">
+                <p className="text-neutral-strong">Content is loading...</p>
             </div>
         </div>
     );
@@ -323,4 +323,4 @@ An **indeterminate loader** does not display exact progress but continuously ani
 
 <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":[]}

package/Loader/OverlayLoader.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { LoaderProps } from "./Loader";
+import type { LoaderProps } from "./Loader.js";
 type OverlayLoaderProps = LoaderProps;
 declare const OverlayLoader: (({ className, size, ...props }: OverlayLoaderProps) => React.JSX.Element) & {
     original: ({ className, size, ...props }: OverlayLoaderProps) => React.JSX.Element;
@@ -14,7 +14,7 @@ declare const OverlayLoader: (({ className, size, ...props }: OverlayLoaderProps
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ className, size, ...props }: OverlayLoaderProps) => React.JSX.Element) & {
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ className, size, ...props }: OverlayLoaderProps) => React.JSX.Element) & {
         original: ({ className, size, ...props }: OverlayLoaderProps) => React.JSX.Element;
         originalName: string;
         displayName: string;

package/Loader/OverlayLoader.js

@@ -1,13 +1,13 @@
 import React from "react";
-import { Loader } from "./Loader";
-import { cn, makeDecoratable } from "../utils";
+import { Loader } from "./Loader.js";
+import { cn, makeDecoratable } from "../utils.js";
 const DecoratableOverlayLoader = ({
   className,
   size = "lg",
   ...props
 }) => {
   return /*#__PURE__*/React.createElement("div", {
-    className: cn("wby-w-full wby-h-full wby-absolute wby-inset-0 wby-bg-neutral-base/80 wby-flex wby-items-center wby-justify-center wby-z-30", className)
+    className: cn("w-full h-full absolute inset-0 bg-neutral-base/80 flex items-center justify-center z-30", className)
   }, /*#__PURE__*/React.createElement(Loader, Object.assign({}, props, {
     size: size
   })));

package/Loader/OverlayLoader.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Loader","cn","makeDecoratable","DecoratableOverlayLoader","className","size","props","createElement","Object","assign","OverlayLoader"],"sources":["OverlayLoader.tsx"],"sourcesContent":["import React from \"react\";\nimport type { LoaderProps } from \"./Loader\";\nimport { Loader } from \"./Loader\";\nimport { cn, makeDecoratable } from \"~/utils\";\n\ntype OverlayLoaderProps = LoaderProps;\n\nconst DecoratableOverlayLoader = ({ className, size = \"lg\", ...props }: OverlayLoaderProps) => {\n    return (\n        <div\n            className={cn(\n                \"wby-w-full wby-h-full wby-absolute wby-inset-0 wby-bg-neutral-base/80 wby-flex wby-items-center wby-justify-center wby-z-30\",\n                className\n            )}\n        >\n            <Loader {...props} size={size} />\n        </div>\n    );\n};\n\nconst OverlayLoader = makeDecoratable(\"OverlayLoader\", DecoratableOverlayLoader);\n\nexport { OverlayLoader, type OverlayLoaderProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,MAAM;AACf,SAASC,EAAE,EAAEC,eAAe;AAI5B,MAAMC,wBAAwB,GAAGA,CAAC;EAAEC,SAAS;EAAEC,IAAI,GAAG,IAAI;EAAE,GAAGC;AAA0B,CAAC,KAAK;EAC3F,oBACIP,KAAA,CAAAQ,aAAA;IACIH,SAAS,EAAEH,EAAE,CACT,6HAA6H,EAC7HG,SACJ;EAAE,gBAEFL,KAAA,CAAAQ,aAAA,CAACP,MAAM,EAAAQ,MAAA,CAAAC,MAAA,KAAKH,KAAK;IAAED,IAAI,EAAEA;EAAK,EAAE,CAC/B,CAAC;AAEd,CAAC;AAED,MAAMK,aAAa,GAAGR,eAAe,CAAC,eAAe,EAAEC,wBAAwB,CAAC;AAEhF,SAASO,aAAa","ignoreList":[]}
+{"version":3,"names":["React","Loader","cn","makeDecoratable","DecoratableOverlayLoader","className","size","props","createElement","Object","assign","OverlayLoader"],"sources":["OverlayLoader.tsx"],"sourcesContent":["import React from \"react\";\nimport type { LoaderProps } from \"./Loader.js\";\nimport { Loader } from \"./Loader.js\";\nimport { cn, makeDecoratable } from \"~/utils.js\";\n\ntype OverlayLoaderProps = LoaderProps;\n\nconst DecoratableOverlayLoader = ({ className, size = \"lg\", ...props }: OverlayLoaderProps) => {\n    return (\n        <div\n            className={cn(\n                \"w-full h-full absolute inset-0 bg-neutral-base/80 flex items-center justify-center z-30\",\n                className\n            )}\n        >\n            <Loader {...props} size={size} />\n        </div>\n    );\n};\n\nconst OverlayLoader = makeDecoratable(\"OverlayLoader\", DecoratableOverlayLoader);\n\nexport { OverlayLoader, type OverlayLoaderProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,MAAM;AACf,SAASC,EAAE,EAAEC,eAAe;AAI5B,MAAMC,wBAAwB,GAAGA,CAAC;EAAEC,SAAS;EAAEC,IAAI,GAAG,IAAI;EAAE,GAAGC;AAA0B,CAAC,KAAK;EAC3F,oBACIP,KAAA,CAAAQ,aAAA;IACIH,SAAS,EAAEH,EAAE,CACT,yFAAyF,EACzFG,SACJ;EAAE,gBAEFL,KAAA,CAAAQ,aAAA,CAACP,MAAM,EAAAQ,MAAA,CAAAC,MAAA,KAAKH,KAAK;IAAED,IAAI,EAAEA;EAAK,EAAE,CAC/B,CAAC;AAEd,CAAC;AAED,MAAMK,aAAa,GAAGR,eAAe,CAAC,eAAe,EAAEC,wBAAwB,CAAC;AAEhF,SAASO,aAAa","ignoreList":[]}

package/Loader/OverlayLoader.stories.d.ts

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

package/Loader/OverlayLoader.stories.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { OverlayLoader } from "./OverlayLoader";
+import { OverlayLoader } from "./OverlayLoader.js";
 const meta = {
   title: "Components/Overlay Loader",
   component: OverlayLoader,
@@ -56,8 +56,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."
     }
   }
 };

package/Loader/OverlayLoader.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","OverlayLoader","meta","title","component","parameters","layout","decorators","Story","createElement","Documentation","args","size","variant","indeterminate","value","min","max","text","className","undefined","argTypes","description","control","options","type","Default","CircularProgressWithText","name"],"sources":["OverlayLoader.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { OverlayLoader } from \"./OverlayLoader\";\n\nconst meta: Meta<typeof OverlayLoader> = {\n    title: \"Components/Overlay Loader\",\n    component: OverlayLoader,\n    parameters: {\n        layout: \"padded\"\n    },\n    decorators: [\n        Story => (\n            <div>\n                <Story />\n                The OverlayLoader component covers its parent container with a semi-transparent\n                overlay, typically used to indicate a loading state while keeping the background\n                content visible but inactive.\n            </div>\n        )\n    ]\n};\n\nexport default meta;\ntype Story = StoryObj<typeof OverlayLoader>;\n\nexport const Documentation: Story = {\n    args: {\n        size: \"lg\",\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 CircularProgressWithText: Story = {\n    name: \"With text\",\n    args: {\n        text: \"Loading...\"\n    }\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,aAAa;AAEtB,MAAMC,IAAgC,GAAG;EACrCC,KAAK,EAAE,2BAA2B;EAClCC,SAAS,EAAEH,aAAa;EACxBI,UAAU,EAAE;IACRC,MAAM,EAAE;EACZ,CAAC;EACDC,UAAU,EAAE,CACRC,KAAK,iBACDR,KAAA,CAAAS,aAAA,2BACIT,KAAA,CAAAS,aAAA,CAACD,KAAK,MAAE,CAAC,kMAIR,CACR;AAET,CAAC;AAED,eAAeN,IAAI;AAGnB,OAAO,MAAMQ,aAAoB,GAAG;EAChCC,IAAI,EAAE;IACFC,IAAI,EAAE,IAAI;IACVC,OAAO,EAAE,QAAQ;IACjBC,aAAa,EAAE,IAAI;IACnBC,KAAK,EAAE,EAAE;IACTC,GAAG,EAAE,CAAC;IACNC,GAAG,EAAE,GAAG;IACRC,IAAI,EAAE,YAAY;IAClBC,SAAS,EAAEC;EACf,CAAC;EACDC,QAAQ,EAAE;IACNT,IAAI,EAAE;MACFU,WAAW,EAAE,oBAAoB;MACjCC,OAAO,EAAE,QAAQ;MACjBC,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI;IACpC,CAAC;IACDX,OAAO,EAAE;MACLS,WAAW,EAAE,oCAAoC;MACjDC,OAAO,EAAE,QAAQ;MACjBC,OAAO,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,UAAU;IAC5C,CAAC;IACDV,aAAa,EAAE;MACXQ,WAAW,EAAE,uDAAuD;MACpEC,OAAO,EAAE;IACb,CAAC;IACDR,KAAK,EAAE;MACHO,WAAW,EAAE,iDAAiD;MAC9DC,OAAO,EAAE;QAAEE,IAAI,EAAE,QAAQ;QAAET,GAAG,EAAE,CAAC;QAAEC,GAAG,EAAE;MAAI;IAChD,CAAC;IACDD,GAAG,EAAE;MACDM,WAAW,EAAE,wCAAwC;MACrDC,OAAO,EAAE;IACb,CAAC;IACDN,GAAG,EAAE;MACDK,WAAW,EAAE,wCAAwC;MACrDC,OAAO,EAAE;IACb,CAAC;IACDL,IAAI,EAAE;MACFI,WAAW,EAAE,2CAA2C;MACxDC,OAAO,EAAE;IACb,CAAC;IACDJ,SAAS,EAAE;MACPG,WAAW,EACP,+FAA+F;MACnGC,OAAO,EAAE;IACb;EACJ;AACJ,CAAC;AAED,OAAO,MAAMG,OAAc,GAAG,CAAC,CAAC;AAEhC,OAAO,MAAMC,wBAA+B,GAAG;EAC3CC,IAAI,EAAE,WAAW;EACjBjB,IAAI,EAAE;IACFO,IAAI,EAAE;EACV;AACJ,CAAC","ignoreList":[]}
+{"version":3,"names":["React","OverlayLoader","meta","title","component","parameters","layout","decorators","Story","createElement","Documentation","args","size","variant","indeterminate","value","min","max","text","className","undefined","argTypes","description","control","options","type","Default","CircularProgressWithText","name"],"sources":["OverlayLoader.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { OverlayLoader } from \"./OverlayLoader.js\";\n\nconst meta: Meta<typeof OverlayLoader> = {\n    title: \"Components/Overlay Loader\",\n    component: OverlayLoader,\n    parameters: {\n        layout: \"padded\"\n    },\n    decorators: [\n        Story => (\n            <div>\n                <Story />\n                The OverlayLoader component covers its parent container with a semi-transparent\n                overlay, typically used to indicate a loading state while keeping the background\n                content visible but inactive.\n            </div>\n        )\n    ]\n};\n\nexport default meta;\ntype Story = StoryObj<typeof OverlayLoader>;\n\nexport const Documentation: Story = {\n    args: {\n        size: \"lg\",\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 CircularProgressWithText: Story = {\n    name: \"With text\",\n    args: {\n        text: \"Loading...\"\n    }\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,aAAa;AAEtB,MAAMC,IAAgC,GAAG;EACrCC,KAAK,EAAE,2BAA2B;EAClCC,SAAS,EAAEH,aAAa;EACxBI,UAAU,EAAE;IACRC,MAAM,EAAE;EACZ,CAAC;EACDC,UAAU,EAAE,CACRC,KAAK,iBACDR,KAAA,CAAAS,aAAA,2BACIT,KAAA,CAAAS,aAAA,CAACD,KAAK,MAAE,CAAC,kMAIR,CACR;AAET,CAAC;AAED,eAAeN,IAAI;AAGnB,OAAO,MAAMQ,aAAoB,GAAG;EAChCC,IAAI,EAAE;IACFC,IAAI,EAAE,IAAI;IACVC,OAAO,EAAE,QAAQ;IACjBC,aAAa,EAAE,IAAI;IACnBC,KAAK,EAAE,EAAE;IACTC,GAAG,EAAE,CAAC;IACNC,GAAG,EAAE,GAAG;IACRC,IAAI,EAAE,YAAY;IAClBC,SAAS,EAAEC;EACf,CAAC;EACDC,QAAQ,EAAE;IACNT,IAAI,EAAE;MACFU,WAAW,EAAE,oBAAoB;MACjCC,OAAO,EAAE,QAAQ;MACjBC,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI;IACpC,CAAC;IACDX,OAAO,EAAE;MACLS,WAAW,EAAE,oCAAoC;MACjDC,OAAO,EAAE,QAAQ;MACjBC,OAAO,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,UAAU;IAC5C,CAAC;IACDV,aAAa,EAAE;MACXQ,WAAW,EAAE,uDAAuD;MACpEC,OAAO,EAAE;IACb,CAAC;IACDR,KAAK,EAAE;MACHO,WAAW,EAAE,iDAAiD;MAC9DC,OAAO,EAAE;QAAEE,IAAI,EAAE,QAAQ;QAAET,GAAG,EAAE,CAAC;QAAEC,GAAG,EAAE;MAAI;IAChD,CAAC;IACDD,GAAG,EAAE;MACDM,WAAW,EAAE,wCAAwC;MACrDC,OAAO,EAAE;IACb,CAAC;IACDN,GAAG,EAAE;MACDK,WAAW,EAAE,wCAAwC;MACrDC,OAAO,EAAE;IACb,CAAC;IACDL,IAAI,EAAE;MACFI,WAAW,EAAE,2CAA2C;MACxDC,OAAO,EAAE;IACb,CAAC;IACDJ,SAAS,EAAE;MACPG,WAAW,EACP;IACR;EACJ;AACJ,CAAC;AAED,OAAO,MAAMI,OAAc,GAAG,CAAC,CAAC;AAEhC,OAAO,MAAMC,wBAA+B,GAAG;EAC3CC,IAAI,EAAE,WAAW;EACjBjB,IAAI,EAAE;IACFO,IAAI,EAAE;EACV;AACJ,CAAC","ignoreList":[]}

package/Loader/index.d.ts

@@ -1,2 +1,2 @@
-export * from "./Loader";
-export * from "./OverlayLoader";
+export * from "./Loader.js";
+export * from "./OverlayLoader.js";

package/Loader/index.js

@@ -1,4 +1,4 @@
-export * from "./Loader";
-export * from "./OverlayLoader";
+export * from "./Loader.js";
+export * from "./OverlayLoader.js";
 
 //# sourceMappingURL=index.js.map

package/Loader/index.js.map

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

package/MultiAutoComplete/MultiAutoComplete.d.ts

@@ -1,22 +1,22 @@
 import React from "react";
-import type { MultiAutoCompletePrimitiveProps } from "./primitives";
-import type { FormComponentProps } from "../FormComponent";
+import type { MultiAutoCompletePrimitiveProps } from "./primitives/index.js";
+import type { FormComponentProps } from "../FormComponent/index.js";
 type MultiAutoCompleteProps = MultiAutoCompletePrimitiveProps & FormComponentProps;
-declare const MultiAutoComplete: (({ label, description, note, required, disabled, validation, ...props }: MultiAutoCompleteProps) => React.JSX.Element) & {
-    original: ({ label, description, note, required, disabled, validation, ...props }: MultiAutoCompleteProps) => React.JSX.Element;
+declare const MultiAutoComplete: (({ label, description, note, hint, required, disabled, validation, ...props }: MultiAutoCompleteProps) => React.JSX.Element) & {
+    original: ({ label, description, note, hint, required, disabled, validation, ...props }: MultiAutoCompleteProps) => React.JSX.Element;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ label, description, note, required, disabled, validation, ...props }: MultiAutoCompleteProps) => React.JSX.Element) & {
-        original: ({ label, description, note, required, disabled, validation, ...props }: MultiAutoCompleteProps) => React.JSX.Element;
+    original: (({ label, description, note, hint, required, disabled, validation, ...props }: MultiAutoCompleteProps) => React.JSX.Element) & {
+        original: ({ label, description, note, hint, required, disabled, validation, ...props }: MultiAutoCompleteProps) => React.JSX.Element;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ label, description, note, required, disabled, validation, ...props }: MultiAutoCompleteProps) => React.JSX.Element) & {
-        original: ({ label, description, note, required, disabled, validation, ...props }: MultiAutoCompleteProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ label, description, note, hint, required, disabled, validation, ...props }: MultiAutoCompleteProps) => React.JSX.Element) & {
+        original: ({ label, description, note, hint, required, disabled, validation, ...props }: MultiAutoCompleteProps) => React.JSX.Element;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/MultiAutoComplete/MultiAutoComplete.js

@@ -1,11 +1,12 @@
 import React, { useMemo, useState, useEffect, useRef } from "react";
-import { makeDecoratable } from "../utils";
-import { MultiAutoCompletePrimitive } from "./primitives";
-import { FormComponentDescription, FormComponentErrorMessage, FormComponentLabel, FormComponentNote } from "../FormComponent";
+import { makeDecoratable } from "../utils.js";
+import { MultiAutoCompletePrimitive } from "./primitives/index.js";
+import { FormComponentDescription, FormComponentErrorMessage, FormComponentLabel, FormComponentNote } from "../FormComponent/index.js";
 const DecoratableMultiAutoComplete = ({
   label,
   description,
   note,
+  hint,
   required,
   disabled,
   validation,
@@ -26,9 +27,10 @@ const DecoratableMultiAutoComplete = ({
     }
   }, []);
   return /*#__PURE__*/React.createElement("div", {
-    className: "wby-w-full"
+    className: "w-full"
   }, /*#__PURE__*/React.createElement(FormComponentLabel, {
     text: label,
+    hint: hint,
     required: required,
     disabled: disabled,
     invalid: invalid,