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

package/AutoComplete/primitives/presenters/index.js.map

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

package/AutoComplete/primitives/useAutoComplete.d.ts

@@ -1,4 +1,4 @@
-import type { AutoCompletePrimitiveProps } from "./AutoCompletePrimitive";
+import type { AutoCompletePrimitiveProps } from "./AutoCompletePrimitive.js";
 export declare const useAutoComplete: (props: AutoCompletePrimitiveProps) => {
     vm: {
         inputVm: {
@@ -7,7 +7,7 @@ export declare const useAutoComplete: (props: AutoCompletePrimitiveProps) => {
             displayResetAction: boolean;
         };
         optionsListVm: {
-            options: import("../../Command").CommandOptionFormatted[];
+            options: import("../../Command/index.js").CommandOptionFormatted[];
             emptyMessage: any;
             loadingMessage: any;
             open: boolean;

package/AutoComplete/primitives/useAutoComplete.js

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState } from "react";
 import { autorun } from "mobx";
-import { AutoCompletePresenter, AutoCompleteInputPresenter, AutoCompleteListOptionsPresenter } from "./presenters";
+import { AutoCompletePresenter, AutoCompleteInputPresenter, AutoCompleteListOptionsPresenter } from "./presenters/index.js";
 export const useAutoComplete = props => {
   const params = useMemo(() => ({
     options: props.options,

package/AutoComplete/primitives/useAutoComplete.js.map

@@ -1 +1 @@
-{"version":3,"names":["useEffect","useMemo","useState","autorun","AutoCompletePresenter","AutoCompleteInputPresenter","AutoCompleteListOptionsPresenter","useAutoComplete","props","params","options","value","emptyMessage","loadingMessage","initialMessage","onOpenChange","onValueChange","onValueReset","onValueSearch","inputParams","placeholder","displayResetAction","presenter","inputPresenter","optionsListPresenter","init","vm","setVm","initInput","setSelectedOption","searchOption","resetSelectedOption","setListOpenState","showSelectedOption"],"sources":["useAutoComplete.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { autorun } from \"mobx\";\nimport type { AutoCompletePrimitiveProps } from \"./AutoCompletePrimitive\";\nimport type { AutoCompletePresenterParams, AutoCompleteInputPresenterParams } from \"./presenters\";\nimport {\n    AutoCompletePresenter,\n    AutoCompleteInputPresenter,\n    AutoCompleteListOptionsPresenter\n} from \"./presenters\";\n\nexport const useAutoComplete = (props: AutoCompletePrimitiveProps) => {\n    const params: AutoCompletePresenterParams = useMemo(\n        () => ({\n            options: props.options,\n            value: props.value,\n            emptyMessage: props.emptyMessage,\n            loadingMessage: props.loadingMessage,\n            initialMessage: props.initialMessage,\n            onOpenChange: props.onOpenChange,\n            onValueChange: props.onValueChange,\n            onValueReset: props.onValueReset,\n            onValueSearch: props.onValueSearch\n        }),\n        [\n            props.options,\n            props.value,\n            props.emptyMessage,\n            props.loadingMessage,\n            props.initialMessage,\n            props.onOpenChange,\n            props.onValueChange,\n            props.onValueReset,\n            props.onValueSearch\n        ]\n    );\n\n    const inputParams: AutoCompleteInputPresenterParams = useMemo(\n        () => ({\n            value: props.value,\n            placeholder: props.placeholder,\n            displayResetAction: props.displayResetAction\n        }),\n        [props.value, props.placeholder, props.displayResetAction]\n    );\n\n    const presenter = useMemo(() => {\n        const inputPresenter = new AutoCompleteInputPresenter();\n        const optionsListPresenter = new AutoCompleteListOptionsPresenter();\n        const presenter = new AutoCompletePresenter(inputPresenter, optionsListPresenter);\n        presenter.init(params);\n        return presenter;\n    }, []);\n\n    const [vm, setVm] = useState(presenter.vm);\n\n    useEffect(() => {\n        presenter.init(params);\n    }, [params]);\n\n    useEffect(() => {\n        presenter.initInput(inputParams);\n    }, [inputParams]);\n\n    useEffect(() => {\n        return autorun(() => {\n            setVm(presenter.vm);\n        });\n    }, [presenter]);\n\n    return {\n        vm,\n        setSelectedOption: presenter.setSelectedOption,\n        searchOption: presenter.searchOption,\n        resetSelectedOption: presenter.resetSelectedOption,\n        setListOpenState: presenter.setListOpenState,\n        showSelectedOption: presenter.showSelectedOption\n    };\n};\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AACpD,SAASC,OAAO,QAAQ,MAAM;AAG9B,SACIC,qBAAqB,EACrBC,0BAA0B,EAC1BC,gCAAgC;AAGpC,OAAO,MAAMC,eAAe,GAAIC,KAAiC,IAAK;EAClE,MAAMC,MAAmC,GAAGR,OAAO,CAC/C,OAAO;IACHS,OAAO,EAAEF,KAAK,CAACE,OAAO;IACtBC,KAAK,EAAEH,KAAK,CAACG,KAAK;IAClBC,YAAY,EAAEJ,KAAK,CAACI,YAAY;IAChCC,cAAc,EAAEL,KAAK,CAACK,cAAc;IACpCC,cAAc,EAAEN,KAAK,CAACM,cAAc;IACpCC,YAAY,EAAEP,KAAK,CAACO,YAAY;IAChCC,aAAa,EAAER,KAAK,CAACQ,aAAa;IAClCC,YAAY,EAAET,KAAK,CAACS,YAAY;IAChCC,aAAa,EAAEV,KAAK,CAACU;EACzB,CAAC,CAAC,EACF,CACIV,KAAK,CAACE,OAAO,EACbF,KAAK,CAACG,KAAK,EACXH,KAAK,CAACI,YAAY,EAClBJ,KAAK,CAACK,cAAc,EACpBL,KAAK,CAACM,cAAc,EACpBN,KAAK,CAACO,YAAY,EAClBP,KAAK,CAACQ,aAAa,EACnBR,KAAK,CAACS,YAAY,EAClBT,KAAK,CAACU,aAAa,CAE3B,CAAC;EAED,MAAMC,WAA6C,GAAGlB,OAAO,CACzD,OAAO;IACHU,KAAK,EAAEH,KAAK,CAACG,KAAK;IAClBS,WAAW,EAAEZ,KAAK,CAACY,WAAW;IAC9BC,kBAAkB,EAAEb,KAAK,CAACa;EAC9B,CAAC,CAAC,EACF,CAACb,KAAK,CAACG,KAAK,EAAEH,KAAK,CAACY,WAAW,EAAEZ,KAAK,CAACa,kBAAkB,CAC7D,CAAC;EAED,MAAMC,SAAS,GAAGrB,OAAO,CAAC,MAAM;IAC5B,MAAMsB,cAAc,GAAG,IAAIlB,0BAA0B,CAAC,CAAC;IACvD,MAAMmB,oBAAoB,GAAG,IAAIlB,gCAAgC,CAAC,CAAC;IACnE,MAAMgB,SAAS,GAAG,IAAIlB,qBAAqB,CAACmB,cAAc,EAAEC,oBAAoB,CAAC;IACjFF,SAAS,CAACG,IAAI,CAAChB,MAAM,CAAC;IACtB,OAAOa,SAAS;EACpB,CAAC,EAAE,EAAE,CAAC;EAEN,MAAM,CAACI,EAAE,EAAEC,KAAK,CAAC,GAAGzB,QAAQ,CAACoB,SAAS,CAACI,EAAE,CAAC;EAE1C1B,SAAS,CAAC,MAAM;IACZsB,SAAS,CAACG,IAAI,CAAChB,MAAM,CAAC;EAC1B,CAAC,EAAE,CAACA,MAAM,CAAC,CAAC;EAEZT,SAAS,CAAC,MAAM;IACZsB,SAAS,CAACM,SAAS,CAACT,WAAW,CAAC;EACpC,CAAC,EAAE,CAACA,WAAW,CAAC,CAAC;EAEjBnB,SAAS,CAAC,MAAM;IACZ,OAAOG,OAAO,CAAC,MAAM;MACjBwB,KAAK,CAACL,SAAS,CAACI,EAAE,CAAC;IACvB,CAAC,CAAC;EACN,CAAC,EAAE,CAACJ,SAAS,CAAC,CAAC;EAEf,OAAO;IACHI,EAAE;IACFG,iBAAiB,EAAEP,SAAS,CAACO,iBAAiB;IAC9CC,YAAY,EAAER,SAAS,CAACQ,YAAY;IACpCC,mBAAmB,EAAET,SAAS,CAACS,mBAAmB;IAClDC,gBAAgB,EAAEV,SAAS,CAACU,gBAAgB;IAC5CC,kBAAkB,EAAEX,SAAS,CAACW;EAClC,CAAC;AACL,CAAC","ignoreList":[]}
+{"version":3,"names":["useEffect","useMemo","useState","autorun","AutoCompletePresenter","AutoCompleteInputPresenter","AutoCompleteListOptionsPresenter","useAutoComplete","props","params","options","value","emptyMessage","loadingMessage","initialMessage","onOpenChange","onValueChange","onValueReset","onValueSearch","inputParams","placeholder","displayResetAction","presenter","inputPresenter","optionsListPresenter","init","vm","setVm","initInput","setSelectedOption","searchOption","resetSelectedOption","setListOpenState","showSelectedOption"],"sources":["useAutoComplete.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { autorun } from \"mobx\";\nimport type { AutoCompletePrimitiveProps } from \"./AutoCompletePrimitive.js\";\nimport type {\n    AutoCompletePresenterParams,\n    AutoCompleteInputPresenterParams\n} from \"./presenters/index.js\";\nimport {\n    AutoCompletePresenter,\n    AutoCompleteInputPresenter,\n    AutoCompleteListOptionsPresenter\n} from \"./presenters/index.js\";\n\nexport const useAutoComplete = (props: AutoCompletePrimitiveProps) => {\n    const params: AutoCompletePresenterParams = useMemo(\n        () => ({\n            options: props.options,\n            value: props.value,\n            emptyMessage: props.emptyMessage,\n            loadingMessage: props.loadingMessage,\n            initialMessage: props.initialMessage,\n            onOpenChange: props.onOpenChange,\n            onValueChange: props.onValueChange,\n            onValueReset: props.onValueReset,\n            onValueSearch: props.onValueSearch\n        }),\n        [\n            props.options,\n            props.value,\n            props.emptyMessage,\n            props.loadingMessage,\n            props.initialMessage,\n            props.onOpenChange,\n            props.onValueChange,\n            props.onValueReset,\n            props.onValueSearch\n        ]\n    );\n\n    const inputParams: AutoCompleteInputPresenterParams = useMemo(\n        () => ({\n            value: props.value,\n            placeholder: props.placeholder,\n            displayResetAction: props.displayResetAction\n        }),\n        [props.value, props.placeholder, props.displayResetAction]\n    );\n\n    const presenter = useMemo(() => {\n        const inputPresenter = new AutoCompleteInputPresenter();\n        const optionsListPresenter = new AutoCompleteListOptionsPresenter();\n        const presenter = new AutoCompletePresenter(inputPresenter, optionsListPresenter);\n        presenter.init(params);\n        return presenter;\n    }, []);\n\n    const [vm, setVm] = useState(presenter.vm);\n\n    useEffect(() => {\n        presenter.init(params);\n    }, [params]);\n\n    useEffect(() => {\n        presenter.initInput(inputParams);\n    }, [inputParams]);\n\n    useEffect(() => {\n        return autorun(() => {\n            setVm(presenter.vm);\n        });\n    }, [presenter]);\n\n    return {\n        vm,\n        setSelectedOption: presenter.setSelectedOption,\n        searchOption: presenter.searchOption,\n        resetSelectedOption: presenter.resetSelectedOption,\n        setListOpenState: presenter.setListOpenState,\n        showSelectedOption: presenter.showSelectedOption\n    };\n};\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AACpD,SAASC,OAAO,QAAQ,MAAM;AAM9B,SACIC,qBAAqB,EACrBC,0BAA0B,EAC1BC,gCAAgC;AAGpC,OAAO,MAAMC,eAAe,GAAIC,KAAiC,IAAK;EAClE,MAAMC,MAAmC,GAAGR,OAAO,CAC/C,OAAO;IACHS,OAAO,EAAEF,KAAK,CAACE,OAAO;IACtBC,KAAK,EAAEH,KAAK,CAACG,KAAK;IAClBC,YAAY,EAAEJ,KAAK,CAACI,YAAY;IAChCC,cAAc,EAAEL,KAAK,CAACK,cAAc;IACpCC,cAAc,EAAEN,KAAK,CAACM,cAAc;IACpCC,YAAY,EAAEP,KAAK,CAACO,YAAY;IAChCC,aAAa,EAAER,KAAK,CAACQ,aAAa;IAClCC,YAAY,EAAET,KAAK,CAACS,YAAY;IAChCC,aAAa,EAAEV,KAAK,CAACU;EACzB,CAAC,CAAC,EACF,CACIV,KAAK,CAACE,OAAO,EACbF,KAAK,CAACG,KAAK,EACXH,KAAK,CAACI,YAAY,EAClBJ,KAAK,CAACK,cAAc,EACpBL,KAAK,CAACM,cAAc,EACpBN,KAAK,CAACO,YAAY,EAClBP,KAAK,CAACQ,aAAa,EACnBR,KAAK,CAACS,YAAY,EAClBT,KAAK,CAACU,aAAa,CAE3B,CAAC;EAED,MAAMC,WAA6C,GAAGlB,OAAO,CACzD,OAAO;IACHU,KAAK,EAAEH,KAAK,CAACG,KAAK;IAClBS,WAAW,EAAEZ,KAAK,CAACY,WAAW;IAC9BC,kBAAkB,EAAEb,KAAK,CAACa;EAC9B,CAAC,CAAC,EACF,CAACb,KAAK,CAACG,KAAK,EAAEH,KAAK,CAACY,WAAW,EAAEZ,KAAK,CAACa,kBAAkB,CAC7D,CAAC;EAED,MAAMC,SAAS,GAAGrB,OAAO,CAAC,MAAM;IAC5B,MAAMsB,cAAc,GAAG,IAAIlB,0BAA0B,CAAC,CAAC;IACvD,MAAMmB,oBAAoB,GAAG,IAAIlB,gCAAgC,CAAC,CAAC;IACnE,MAAMgB,SAAS,GAAG,IAAIlB,qBAAqB,CAACmB,cAAc,EAAEC,oBAAoB,CAAC;IACjFF,SAAS,CAACG,IAAI,CAAChB,MAAM,CAAC;IACtB,OAAOa,SAAS;EACpB,CAAC,EAAE,EAAE,CAAC;EAEN,MAAM,CAACI,EAAE,EAAEC,KAAK,CAAC,GAAGzB,QAAQ,CAACoB,SAAS,CAACI,EAAE,CAAC;EAE1C1B,SAAS,CAAC,MAAM;IACZsB,SAAS,CAACG,IAAI,CAAChB,MAAM,CAAC;EAC1B,CAAC,EAAE,CAACA,MAAM,CAAC,CAAC;EAEZT,SAAS,CAAC,MAAM;IACZsB,SAAS,CAACM,SAAS,CAACT,WAAW,CAAC;EACpC,CAAC,EAAE,CAACA,WAAW,CAAC,CAAC;EAEjBnB,SAAS,CAAC,MAAM;IACZ,OAAOG,OAAO,CAAC,MAAM;MACjBwB,KAAK,CAACL,SAAS,CAACI,EAAE,CAAC;IACvB,CAAC,CAAC;EACN,CAAC,EAAE,CAACJ,SAAS,CAAC,CAAC;EAEf,OAAO;IACHI,EAAE;IACFG,iBAAiB,EAAEP,SAAS,CAACO,iBAAiB;IAC9CC,YAAY,EAAER,SAAS,CAACQ,YAAY;IACpCC,mBAAmB,EAAET,SAAS,CAACS,mBAAmB;IAClDC,gBAAgB,EAAEV,SAAS,CAACU,gBAAgB;IAC5CC,kBAAkB,EAAEX,SAAS,CAACW;EAClC,CAAC;AACL,CAAC","ignoreList":[]}

package/Avatar/Avatar.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Avatar as AvatarPrimitive } from "radix-ui";
-import { type VariantProps } from "../utils";
-import { type AvatarFallbackProps, type AvatarImageProps } from "./components";
+import { type VariantProps } from "../utils.js";
+import { type AvatarFallbackProps, type AvatarImageProps } from "./components/index.js";
 interface AvatarProps extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>, VariantProps<typeof avatarVariants> {
     image?: React.ReactElement<AvatarImageProps>;
     fallback?: React.ReactElement<AvatarFallbackProps>;
@@ -9,7 +9,7 @@ interface AvatarProps extends React.ComponentPropsWithoutRef<typeof AvatarPrimit
 declare const avatarVariants: (props?: ({
     size?: "sm" | "md" | "lg" | "xl" | null | undefined;
     variant?: "strong" | "light" | "subtle" | "quiet" | "outlined" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const Avatar: (({ image, fallback, className, size, variant, ...props }: AvatarProps) => React.JSX.Element) & {
     original: ({ image, fallback, className, size, variant, ...props }: AvatarProps) => React.JSX.Element;
     originalName: string;
@@ -23,46 +23,46 @@ declare const Avatar: (({ image, fallback, className, size, variant, ...props }:
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ image, fallback, className, size, variant, ...props }: AvatarProps) => React.JSX.Element) & {
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ image, fallback, className, size, variant, ...props }: AvatarProps) => React.JSX.Element) & {
         original: ({ image, fallback, className, size, variant, ...props }: AvatarProps) => React.JSX.Element;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;
 } & {
-    Fallback: (({ className, ...props }: AvatarPrimitive.AvatarFallbackProps) => React.JSX.Element) & {
-        original: ({ className, ...props }: AvatarPrimitive.AvatarFallbackProps) => React.JSX.Element;
+    Fallback: (({ className, ...props }: AvatarFallbackProps) => React.JSX.Element) & {
+        original: ({ className, ...props }: AvatarFallbackProps) => React.JSX.Element;
         originalName: string;
         displayName: string;
     } & {
-        original: (({ className, ...props }: AvatarPrimitive.AvatarFallbackProps) => React.JSX.Element) & {
-            original: ({ className, ...props }: AvatarPrimitive.AvatarFallbackProps) => React.JSX.Element;
+        original: (({ className, ...props }: AvatarFallbackProps) => React.JSX.Element) & {
+            original: ({ className, ...props }: AvatarFallbackProps) => React.JSX.Element;
             originalName: string;
             displayName: string;
         };
         originalName: string;
         displayName: string;
     } & {
-        createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ className, ...props }: AvatarPrimitive.AvatarFallbackProps) => React.JSX.Element) & {
-            original: ({ className, ...props }: AvatarPrimitive.AvatarFallbackProps) => React.JSX.Element;
+        createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ className, ...props }: AvatarFallbackProps) => React.JSX.Element) & {
+            original: ({ className, ...props }: AvatarFallbackProps) => React.JSX.Element;
             originalName: string;
             displayName: string;
         }>) => (props: unknown) => React.JSX.Element;
     };
-    Image: (({ className, ...props }: AvatarPrimitive.AvatarImageProps) => React.JSX.Element) & {
-        original: ({ className, ...props }: AvatarPrimitive.AvatarImageProps) => React.JSX.Element;
+    Image: (({ className, ...props }: AvatarImageProps) => React.JSX.Element) & {
+        original: ({ className, ...props }: AvatarImageProps) => React.JSX.Element;
         originalName: string;
         displayName: string;
     } & {
-        original: (({ className, ...props }: AvatarPrimitive.AvatarImageProps) => React.JSX.Element) & {
-            original: ({ className, ...props }: AvatarPrimitive.AvatarImageProps) => React.JSX.Element;
+        original: (({ className, ...props }: AvatarImageProps) => React.JSX.Element) & {
+            original: ({ className, ...props }: AvatarImageProps) => React.JSX.Element;
             originalName: string;
             displayName: string;
         };
         originalName: string;
         displayName: string;
     } & {
-        createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ className, ...props }: AvatarPrimitive.AvatarImageProps) => React.JSX.Element) & {
-            original: ({ className, ...props }: AvatarPrimitive.AvatarImageProps) => React.JSX.Element;
+        createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ className, ...props }: AvatarImageProps) => React.JSX.Element) & {
+            original: ({ className, ...props }: AvatarImageProps) => React.JSX.Element;
             originalName: string;
             displayName: string;
         }>) => (props: unknown) => React.JSX.Element;

package/Avatar/Avatar.js

@@ -1,21 +1,21 @@
 import * as React from "react";
 import { Avatar as AvatarPrimitive } from "radix-ui";
-import { withStaticProps, cn, makeDecoratable, cva } from "../utils";
-import { AvatarFallback, AvatarImage } from "./components";
-const avatarVariants = cva("wby-relative wby-flex wby-shrink-0 wby-overflow-hidden", {
+import { withStaticProps, cn, makeDecoratable, cva } from "../utils.js";
+import { AvatarFallback, AvatarImage } from "./components/index.js";
+const avatarVariants = cva("relative flex shrink-0 overflow-hidden", {
   variants: {
     size: {
-      sm: "wby-text-h6 wby-rounded-sm wby-size-[24px] [&_svg]:wby-size-[16px]",
-      md: "wby-text-h6 wby-rounded-md wby-size-[32px] [&_svg]:wby-size-[24px]",
-      lg: "wby-text-h6 wby-rounded-md wby-size-[40px] [&_svg]:wby-size-[24px]",
-      xl: "wby-text-h4 wby-rounded-lg wby-size-[48px] [&_svg]:wby-size-[24px]"
+      sm: "text-h6 rounded-sm size-lg [&_svg]:size-md",
+      md: "text-h6 rounded-md size-xl [&_svg]:size-lg",
+      lg: "text-h6 rounded-md size-[40px] [&_svg]:size-lg",
+      xl: "text-h4 rounded-lg size-xxl [&_svg]:size-lg"
     },
     variant: {
-      strong: "wby-bg-primary wby-text-neutral-light [&_svg]:wby-fill-neutral-base",
-      subtle: "wby-bg-neutral-light wby-text-neutral-primary [&_svg]:wby-fill-neutral-xstrong",
-      light: "wby-bg-neutral-dimmed wby-text-neutral-primary [&_svg]:wby-fill-neutral-xstrong",
-      quiet: "wby-bg-transparent wby-text-neutral-primary [&_svg]:wby-fill-neutral-xstrong",
-      outlined: "wby-bg-neutral-base !wby-border-neutral-muted wby-border-sm wby-text-accent-primary [&_svg]:wby-fill-neutral-xstrong"
+      strong: "bg-primary text-neutral-light [&_svg]:fill-neutral-base",
+      subtle: "bg-neutral-light text-neutral-primary [&_svg]:fill-neutral-xstrong",
+      light: "bg-neutral-dimmed text-neutral-primary [&_svg]:fill-neutral-xstrong",
+      quiet: "bg-transparent text-neutral-primary [&_svg]:fill-neutral-xstrong",
+      outlined: "bg-neutral-base border-neutral-muted! border-sm text-accent-primary [&_svg]:fill-neutral-xstrong"
     }
   },
   defaultVariants: {

package/Avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Avatar","AvatarPrimitive","withStaticProps","cn","makeDecoratable","cva","AvatarFallback","AvatarImage","avatarVariants","variants","size","sm","md","lg","xl","variant","strong","subtle","light","quiet","outlined","defaultVariants","AvatarBase","image","fallback","className","props","createElement","Root","Object","assign","Fallback","Image"],"sources":["Avatar.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Avatar as AvatarPrimitive } from \"radix-ui\";\nimport { withStaticProps, cn, makeDecoratable, cva, type VariantProps } from \"~/utils\";\nimport {\n    AvatarFallback,\n    AvatarImage,\n    type AvatarFallbackProps,\n    type AvatarImageProps\n} from \"./components\";\n\ninterface AvatarProps\n    extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,\n        VariantProps<typeof avatarVariants> {\n    image?: React.ReactElement<AvatarImageProps>;\n    fallback?: React.ReactElement<AvatarFallbackProps>;\n}\n\nconst avatarVariants = cva(\"wby-relative wby-flex wby-shrink-0 wby-overflow-hidden\", {\n    variants: {\n        size: {\n            sm: \"wby-text-h6 wby-rounded-sm wby-size-[24px] [&_svg]:wby-size-[16px]\",\n            md: \"wby-text-h6 wby-rounded-md wby-size-[32px] [&_svg]:wby-size-[24px]\",\n            lg: \"wby-text-h6 wby-rounded-md wby-size-[40px] [&_svg]:wby-size-[24px]\",\n            xl: \"wby-text-h4 wby-rounded-lg wby-size-[48px] [&_svg]:wby-size-[24px]\"\n        },\n        variant: {\n            strong: \"wby-bg-primary wby-text-neutral-light [&_svg]:wby-fill-neutral-base\",\n            subtle: \"wby-bg-neutral-light wby-text-neutral-primary [&_svg]:wby-fill-neutral-xstrong\",\n            light: \"wby-bg-neutral-dimmed wby-text-neutral-primary [&_svg]:wby-fill-neutral-xstrong\",\n            quiet: \"wby-bg-transparent wby-text-neutral-primary [&_svg]:wby-fill-neutral-xstrong\",\n            outlined:\n                \"wby-bg-neutral-base !wby-border-neutral-muted wby-border-sm wby-text-accent-primary [&_svg]:wby-fill-neutral-xstrong\"\n        }\n    },\n    defaultVariants: {\n        size: \"md\",\n        variant: \"strong\"\n    }\n});\n\nconst AvatarBase = ({ image, fallback, className, size, variant, ...props }: AvatarProps) => {\n    return (\n        <AvatarPrimitive.Root\n            className={cn(avatarVariants({ variant, size }), className)}\n            {...props}\n        >\n            {image}\n            {fallback}\n        </AvatarPrimitive.Root>\n    );\n};\n\nconst Avatar = withStaticProps(makeDecoratable(\"Avatar\", AvatarBase), {\n    Fallback: AvatarFallback,\n    Image: AvatarImage\n});\n\nexport { Avatar, type AvatarProps, type AvatarImageProps, type AvatarFallbackProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,MAAM,IAAIC,eAAe,QAAQ,UAAU;AACpD,SAASC,eAAe,EAAEC,EAAE,EAAEC,eAAe,EAAEC,GAAG;AAClD,SACIC,cAAc,EACdC,WAAW;AAYf,MAAMC,cAAc,GAAGH,GAAG,CAAC,wDAAwD,EAAE;EACjFI,QAAQ,EAAE;IACNC,IAAI,EAAE;MACFC,EAAE,EAAE,oEAAoE;MACxEC,EAAE,EAAE,oEAAoE;MACxEC,EAAE,EAAE,oEAAoE;MACxEC,EAAE,EAAE;IACR,CAAC;IACDC,OAAO,EAAE;MACLC,MAAM,EAAE,qEAAqE;MAC7EC,MAAM,EAAE,gFAAgF;MACxFC,KAAK,EAAE,iFAAiF;MACxFC,KAAK,EAAE,8EAA8E;MACrFC,QAAQ,EACJ;IACR;EACJ,CAAC;EACDC,eAAe,EAAE;IACbX,IAAI,EAAE,IAAI;IACVK,OAAO,EAAE;EACb;AACJ,CAAC,CAAC;AAEF,MAAMO,UAAU,GAAGA,CAAC;EAAEC,KAAK;EAAEC,QAAQ;EAAEC,SAAS;EAAEf,IAAI;EAAEK,OAAO;EAAE,GAAGW;AAAmB,CAAC,KAAK;EACzF,oBACI3B,KAAA,CAAA4B,aAAA,CAAC1B,eAAe,CAAC2B,IAAI,EAAAC,MAAA,CAAAC,MAAA;IACjBL,SAAS,EAAEtB,EAAE,CAACK,cAAc,CAAC;MAAEO,OAAO;MAAEL;IAAK,CAAC,CAAC,EAAEe,SAAS;EAAE,GACxDC,KAAK,GAERH,KAAK,EACLC,QACiB,CAAC;AAE/B,CAAC;AAED,MAAMxB,MAAM,GAAGE,eAAe,CAACE,eAAe,CAAC,QAAQ,EAAEkB,UAAU,CAAC,EAAE;EAClES,QAAQ,EAAEzB,cAAc;EACxB0B,KAAK,EAAEzB;AACX,CAAC,CAAC;AAEF,SAASP,MAAM","ignoreList":[]}
+{"version":3,"names":["React","Avatar","AvatarPrimitive","withStaticProps","cn","makeDecoratable","cva","AvatarFallback","AvatarImage","avatarVariants","variants","size","sm","md","lg","xl","variant","strong","subtle","light","quiet","outlined","defaultVariants","AvatarBase","image","fallback","className","props","createElement","Root","Object","assign","Fallback","Image"],"sources":["Avatar.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Avatar as AvatarPrimitive } from \"radix-ui\";\nimport { withStaticProps, cn, makeDecoratable, cva, type VariantProps } from \"~/utils.js\";\nimport {\n    AvatarFallback,\n    AvatarImage,\n    type AvatarFallbackProps,\n    type AvatarImageProps\n} from \"./components/index.js\";\n\ninterface AvatarProps\n    extends\n        React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,\n        VariantProps<typeof avatarVariants> {\n    image?: React.ReactElement<AvatarImageProps>;\n    fallback?: React.ReactElement<AvatarFallbackProps>;\n}\n\nconst avatarVariants = cva(\"relative flex shrink-0 overflow-hidden\", {\n    variants: {\n        size: {\n            sm: \"text-h6 rounded-sm size-lg [&_svg]:size-md\",\n            md: \"text-h6 rounded-md size-xl [&_svg]:size-lg\",\n            lg: \"text-h6 rounded-md size-[40px] [&_svg]:size-lg\",\n            xl: \"text-h4 rounded-lg size-xxl [&_svg]:size-lg\"\n        },\n        variant: {\n            strong: \"bg-primary text-neutral-light [&_svg]:fill-neutral-base\",\n            subtle: \"bg-neutral-light text-neutral-primary [&_svg]:fill-neutral-xstrong\",\n            light: \"bg-neutral-dimmed text-neutral-primary [&_svg]:fill-neutral-xstrong\",\n            quiet: \"bg-transparent text-neutral-primary [&_svg]:fill-neutral-xstrong\",\n            outlined:\n                \"bg-neutral-base border-neutral-muted! border-sm text-accent-primary [&_svg]:fill-neutral-xstrong\"\n        }\n    },\n    defaultVariants: {\n        size: \"md\",\n        variant: \"strong\"\n    }\n});\n\nconst AvatarBase = ({ image, fallback, className, size, variant, ...props }: AvatarProps) => {\n    return (\n        <AvatarPrimitive.Root\n            className={cn(avatarVariants({ variant, size }), className)}\n            {...props}\n        >\n            {image}\n            {fallback}\n        </AvatarPrimitive.Root>\n    );\n};\n\nconst Avatar = withStaticProps(makeDecoratable(\"Avatar\", AvatarBase), {\n    Fallback: AvatarFallback,\n    Image: AvatarImage\n});\n\nexport { Avatar, type AvatarProps, type AvatarImageProps, type AvatarFallbackProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,MAAM,IAAIC,eAAe,QAAQ,UAAU;AACpD,SAASC,eAAe,EAAEC,EAAE,EAAEC,eAAe,EAAEC,GAAG;AAClD,SACIC,cAAc,EACdC,WAAW;AAaf,MAAMC,cAAc,GAAGH,GAAG,CAAC,wCAAwC,EAAE;EACjEI,QAAQ,EAAE;IACNC,IAAI,EAAE;MACFC,EAAE,EAAE,4CAA4C;MAChDC,EAAE,EAAE,4CAA4C;MAChDC,EAAE,EAAE,gDAAgD;MACpDC,EAAE,EAAE;IACR,CAAC;IACDC,OAAO,EAAE;MACLC,MAAM,EAAE,yDAAyD;MACjEC,MAAM,EAAE,oEAAoE;MAC5EC,KAAK,EAAE,qEAAqE;MAC5EC,KAAK,EAAE,kEAAkE;MACzEC,QAAQ,EACJ;IACR;EACJ,CAAC;EACDC,eAAe,EAAE;IACbX,IAAI,EAAE,IAAI;IACVK,OAAO,EAAE;EACb;AACJ,CAAC,CAAC;AAEF,MAAMO,UAAU,GAAGA,CAAC;EAAEC,KAAK;EAAEC,QAAQ;EAAEC,SAAS;EAAEf,IAAI;EAAEK,OAAO;EAAE,GAAGW;AAAmB,CAAC,KAAK;EACzF,oBACI3B,KAAA,CAAA4B,aAAA,CAAC1B,eAAe,CAAC2B,IAAI,EAAAC,MAAA,CAAAC,MAAA;IACjBL,SAAS,EAAEtB,EAAE,CAACK,cAAc,CAAC;MAAEO,OAAO;MAAEL;IAAK,CAAC,CAAC,EAAEe,SAAS;EAAE,GACxDC,KAAK,GAERH,KAAK,EACLC,QACiB,CAAC;AAE/B,CAAC;AAED,MAAMxB,MAAM,GAAGE,eAAe,CAACE,eAAe,CAAC,QAAQ,EAAEkB,UAAU,CAAC,EAAE;EAClES,QAAQ,EAAEzB,cAAc;EACxB0B,KAAK,EAAEzB;AACX,CAAC,CAAC;AAEF,SAASP,MAAM","ignoreList":[]}

package/Avatar/Avatar.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Meta, Controls } from '@storybook/blocks';
+import { Canvas, Meta, Controls } from "@storybook/addon-docs/blocks";
 
-import * as AvatarStories from './Avatar.stories';
+import * as AvatarStories from "./Avatar.stories";
 
 <Meta of={AvatarStories} />
 
@@ -15,30 +15,30 @@ import React from "react";
 import { Avatar } from "@webiny/admin-ui";
 
 const AvatarExample = () => {
-    return (
-        <Avatar
-            image={<Avatar.Image src="https://i.pravatar.cc/300" alt="User" />}
-            fallback={<Avatar.Fallback>JD</Avatar.Fallback>}
-            size="md"
-            variant="strong"
-        />
-    );
-};
+return (
+
+<Avatar
+  image={<Avatar.Image src="https://i.pravatar.cc/300" alt="User" />}
+  fallback={<Avatar.Fallback>JD</Avatar.Fallback>}
+  size="md"
+  variant="strong"
+/>
+); };
 
 export default AvatarExample;
 
 ` } }
-        additionalActions={[
-            {
-                title: 'Open in GitHub',
-                onClick: () => {
-                    window.open(
-                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Avatar/Avatar.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/Avatar/Avatar.tsx',
+'_blank'
+);
+},
+}
+]}
 />
 
 <Controls of={AvatarStories.Documentation} />
@@ -48,14 +48,14 @@ import React from "react";
 import { Avatar } from "@webiny/admin-ui";
 
 const AvatarExample = () => {
-    return (
-        <Avatar
-            image={<Avatar.Image src="https://i.pravatar.cc/300" alt="User" />}
-            fallback={<Avatar.Fallback>JD</Avatar.Fallback>}
-            size="md"
-            variant="strong"
-        />
-    );
+  return (
+    <Avatar
+      image={<Avatar.Image src="https://i.pravatar.cc/300" alt="User" />}
+      fallback={<Avatar.Fallback>JD</Avatar.Fallback>}
+      size="md"
+      variant="strong"
+    />
+  );
 };
 
 export default AvatarExample;
@@ -71,14 +71,18 @@ import { ReactComponent as StormIcon } from "@webiny/icons/storm.svg";
 import { Avatar } from "@webiny/admin-ui";
 
 const AvatarExample = () => {
-    return (
-        <Avatar
-        fallback={<Avatar.Fallback><StormIcon /></Avatar.Fallback>}
-        size="md"
-        variant="strong"
-    />
-    );
-};
+return (
+
+<Avatar
+  fallback={
+    <Avatar.Fallback>
+      <StormIcon />
+    </Avatar.Fallback>
+  }
+  size="md"
+  variant="strong"
+/>
+); };
 
 export default AvatarExample;
 
@@ -88,18 +92,23 @@ export default AvatarExample;
 ## Anatomy
 
 ### Size
-<img src="/images/storybook/avatar/size.png" alt="Size"/>
+
+<img src="/images/storybook/avatar/size.png" alt="Size" />
 
 ### Type
-<img src="/images/storybook/avatar/type.png" alt="Type"/>
+
+<img src="/images/storybook/avatar/type.png" alt="Type" />
 
 ### Style
-<img src="/images/storybook/avatar/style.png" alt="Style"/>
+
+<img src="/images/storybook/avatar/style.png" alt="Style" />
 
 ## Usage
 
 ### Header
-<img src="/images/storybook/avatar/header.png" alt="Header"/>
+
+<img src="/images/storybook/avatar/header.png" alt="Header" />
 
 ### Table
-<img src="/images/storybook/avatar/table.png" alt="Table"/>
+
+<img src="/images/storybook/avatar/table.png" alt="Table" />

package/Avatar/Avatar.stories.d.ts

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

package/Avatar/Avatar.stories.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { ReactComponent as StormIcon } from "@webiny/icons/storm.svg";
-import { Avatar } from "./Avatar";
+import { Avatar } from "./Avatar.js";
 const meta = {
   title: "Components/Avatar",
   component: Avatar,
@@ -102,12 +102,10 @@ export const Documentation = {
       defaultValue: "strong"
     },
     image: {
-      description: "The image element to display. Please refer to the example code for details on usage.",
-      control: "none"
+      description: "The image element to display. Please refer to the example code for details on usage."
     },
     fallback: {
-      description: "The fallback element to display when the image fails to load. Please refer to the example code for details on usage.",
-      control: "none"
+      description: "The fallback element to display when the image fails to load. Please refer to the example code for details on usage."
     },
     className: {
       description: "Additional CSS class names. You can pass multiple class names, separated by commas.",

package/Avatar/Avatar.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","ReactComponent","StormIcon","Avatar","meta","title","component","argTypes","size","control","options","defaultValue","variant","Default","args","image","createElement","Image","src","alt","fallback","Fallback","delayMs","SizeSm","name","SizeMd","SizeLg","SizeXl","Text","Icon","Documentation","render","Object","assign","undefined","className","description","placeholder"],"sources":["Avatar.stories.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { ReactComponent as StormIcon } from \"@webiny/icons/storm.svg\";\nimport { Avatar } from \"./Avatar\";\n\nconst meta: Meta<typeof Avatar> = {\n    title: \"Components/Avatar\",\n    component: Avatar,\n    argTypes: {\n        size: {\n            control: \"select\",\n            options: [\"sm\", \"md\", \"lg\", \"xl\"],\n            defaultValue: \"md\"\n        },\n        variant: {\n            control: \"select\",\n            options: [\"strong\", \"subtle\", \"light\", \"quiet\", \"outlined\"],\n            defaultValue: \"strong\"\n        }\n    }\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Avatar>;\n\nexport const Default: Story = {\n    args: {\n        image: <Avatar.Image src=\"https://i.pravatar.cc/300\" alt=\"@webiny\" />,\n        fallback: <Avatar.Fallback delayMs={0}>W</Avatar.Fallback>\n    }\n};\n\nexport const SizeSm: Story = {\n    name: \"Small\",\n    args: {\n        ...Default.args,\n        size: \"sm\"\n    }\n};\nexport const SizeMd: Story = {\n    name: \"Medium\",\n    args: {\n        ...Default.args,\n        size: \"md\"\n    }\n};\n\nexport const SizeLg: Story = {\n    name: \"Large\",\n    args: {\n        ...Default.args,\n        size: \"lg\"\n    }\n};\n\nexport const SizeXl: Story = {\n    name: \"Extra Large\",\n    args: {\n        ...Default.args,\n        size: \"xl\"\n    }\n};\n\nexport const Text: Story = {\n    name: \"Fallback Text\",\n    args: {\n        fallback: <Avatar.Fallback>SH</Avatar.Fallback>\n    }\n};\nexport const Icon: Story = {\n    name: \"Icon\",\n    args: {\n        fallback: (\n            <Avatar.Fallback>\n                <StormIcon />\n            </Avatar.Fallback>\n        )\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        return (\n            <Avatar\n                {...args}\n                image={args.image || <Avatar.Image src=\"https://i.pravatar.cc/300\" alt=\"@webiny\" />}\n                fallback={args.fallback || <Avatar.Fallback delayMs={0}>W</Avatar.Fallback>}\n            />\n        );\n    },\n    args: {\n        size: \"md\",\n        variant: \"strong\",\n        image: undefined,\n        fallback: undefined,\n        className: \"commas, separated, class, name\"\n    },\n    argTypes: {\n        size: {\n            description: \"Controls the size of the avatar\",\n            control: \"select\",\n            options: [\"sm\", \"md\", \"lg\", \"xl\"],\n            defaultValue: \"md\"\n        },\n        variant: {\n            description: \"Controls the visual style of the avatar\",\n            control: \"select\",\n            options: [\"strong\", \"subtle\", \"light\", \"quiet\", \"outlined\"],\n            defaultValue: \"strong\"\n        },\n        image: {\n            description:\n                \"The image element to display. Please refer to the example code for details on usage.\",\n            control: \"none\"\n        },\n        fallback: {\n            description:\n                \"The fallback element to display when the image fails to load. Please refer to the example code for details on usage.\",\n            control: \"none\"\n        },\n        className: {\n            description:\n                \"Additional CSS class names. You can pass multiple class names, separated by commas.\",\n            placeholder: \"Enter class names, separated by commas.\",\n            control: \"text\"\n        }\n    }\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","ReactComponent","StormIcon","Avatar","meta","title","component","argTypes","size","control","options","defaultValue","variant","Default","args","image","createElement","Image","src","alt","fallback","Fallback","delayMs","SizeSm","name","SizeMd","SizeLg","SizeXl","Text","Icon","Documentation","render","Object","assign","undefined","className","description","placeholder"],"sources":["Avatar.stories.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { ReactComponent as StormIcon } from \"@webiny/icons/storm.svg\";\nimport { Avatar } from \"./Avatar.js\";\n\nconst meta: Meta<typeof Avatar> = {\n    title: \"Components/Avatar\",\n    component: Avatar,\n    argTypes: {\n        size: {\n            control: \"select\",\n            options: [\"sm\", \"md\", \"lg\", \"xl\"],\n            defaultValue: \"md\"\n        },\n        variant: {\n            control: \"select\",\n            options: [\"strong\", \"subtle\", \"light\", \"quiet\", \"outlined\"],\n            defaultValue: \"strong\"\n        }\n    }\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Avatar>;\n\nexport const Default: Story = {\n    args: {\n        image: <Avatar.Image src=\"https://i.pravatar.cc/300\" alt=\"@webiny\" />,\n        fallback: <Avatar.Fallback delayMs={0}>W</Avatar.Fallback>\n    }\n};\n\nexport const SizeSm: Story = {\n    name: \"Small\",\n    args: {\n        ...Default.args,\n        size: \"sm\"\n    }\n};\nexport const SizeMd: Story = {\n    name: \"Medium\",\n    args: {\n        ...Default.args,\n        size: \"md\"\n    }\n};\n\nexport const SizeLg: Story = {\n    name: \"Large\",\n    args: {\n        ...Default.args,\n        size: \"lg\"\n    }\n};\n\nexport const SizeXl: Story = {\n    name: \"Extra Large\",\n    args: {\n        ...Default.args,\n        size: \"xl\"\n    }\n};\n\nexport const Text: Story = {\n    name: \"Fallback Text\",\n    args: {\n        fallback: <Avatar.Fallback>SH</Avatar.Fallback>\n    }\n};\nexport const Icon: Story = {\n    name: \"Icon\",\n    args: {\n        fallback: (\n            <Avatar.Fallback>\n                <StormIcon />\n            </Avatar.Fallback>\n        )\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        return (\n            <Avatar\n                {...args}\n                image={args.image || <Avatar.Image src=\"https://i.pravatar.cc/300\" alt=\"@webiny\" />}\n                fallback={args.fallback || <Avatar.Fallback delayMs={0}>W</Avatar.Fallback>}\n            />\n        );\n    },\n    args: {\n        size: \"md\",\n        variant: \"strong\",\n        image: undefined,\n        fallback: undefined,\n        className: \"commas, separated, class, name\"\n    },\n    argTypes: {\n        size: {\n            description: \"Controls the size of the avatar\",\n            control: \"select\",\n            options: [\"sm\", \"md\", \"lg\", \"xl\"],\n            defaultValue: \"md\"\n        },\n        variant: {\n            description: \"Controls the visual style of the avatar\",\n            control: \"select\",\n            options: [\"strong\", \"subtle\", \"light\", \"quiet\", \"outlined\"],\n            defaultValue: \"strong\"\n        },\n        image: {\n            description:\n                \"The image element to display. Please refer to the example code for details on usage.\"\n        },\n        fallback: {\n            description:\n                \"The fallback element to display when the image fails to load. Please refer to the example code for details on usage.\"\n        },\n        className: {\n            description:\n                \"Additional CSS class names. You can pass multiple class names, separated by commas.\",\n            placeholder: \"Enter class names, separated by commas.\",\n            control: \"text\"\n        }\n    }\n};\n"],"mappings":"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","ignoreList":[]}

package/Avatar/components/AvatarFallback.d.ts

@@ -14,7 +14,7 @@ declare const AvatarFallback: (({ className, ...props }: AvatarFallbackProps) =>
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ className, ...props }: AvatarFallbackProps) => React.JSX.Element) & {
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<(({ className, ...props }: AvatarFallbackProps) => React.JSX.Element) & {
         original: ({ className, ...props }: AvatarFallbackProps) => React.JSX.Element;
         originalName: string;
         displayName: string;

package/Avatar/components/AvatarFallback.js

@@ -1,11 +1,11 @@
 import * as React from "react";
 import { Avatar as AvatarPrimitive } from "radix-ui";
-import { cn, makeDecoratable } from "../../utils";
+import { cn, makeDecoratable } from "../../utils.js";
 const AvatarFallbackBase = ({
   className,
   ...props
 }) => /*#__PURE__*/React.createElement(AvatarPrimitive.Fallback, Object.assign({
-  className: cn("wby-flex wby-h-full wby-w-full wby-items-center wby-justify-center wby-rounded-sm", className)
+  className: cn("flex h-full w-full items-center justify-center rounded-sm", className)
 }, props));
 const AvatarFallback = makeDecoratable("AvatarFallback", AvatarFallbackBase);
 export { AvatarFallback };

package/Avatar/components/AvatarFallback.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Avatar","AvatarPrimitive","cn","makeDecoratable","AvatarFallbackBase","className","props","createElement","Fallback","Object","assign","AvatarFallback"],"sources":["AvatarFallback.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Avatar as AvatarPrimitive } from \"radix-ui\";\nimport { cn, makeDecoratable } from \"~/utils\";\n\ntype AvatarFallbackProps = AvatarPrimitive.AvatarFallbackProps;\n\nconst AvatarFallbackBase = ({ className, ...props }: AvatarFallbackProps) => (\n    <AvatarPrimitive.Fallback\n        className={cn(\n            \"wby-flex wby-h-full wby-w-full wby-items-center wby-justify-center wby-rounded-sm\",\n            className\n        )}\n        {...props}\n    />\n);\n\nconst AvatarFallback = makeDecoratable(\"AvatarFallback\", AvatarFallbackBase);\n\nexport { AvatarFallback, type AvatarFallbackProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,MAAM,IAAIC,eAAe,QAAQ,UAAU;AACpD,SAASC,EAAE,EAAEC,eAAe;AAI5B,MAAMC,kBAAkB,GAAGA,CAAC;EAAEC,SAAS;EAAE,GAAGC;AAA2B,CAAC,kBACpEP,KAAA,CAAAQ,aAAA,CAACN,eAAe,CAACO,QAAQ,EAAAC,MAAA,CAAAC,MAAA;EACrBL,SAAS,EAAEH,EAAE,CACT,mFAAmF,EACnFG,SACJ;AAAE,GACEC,KAAK,CACZ,CACJ;AAED,MAAMK,cAAc,GAAGR,eAAe,CAAC,gBAAgB,EAAEC,kBAAkB,CAAC;AAE5E,SAASO,cAAc","ignoreList":[]}
+{"version":3,"names":["React","Avatar","AvatarPrimitive","cn","makeDecoratable","AvatarFallbackBase","className","props","createElement","Fallback","Object","assign","AvatarFallback"],"sources":["AvatarFallback.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Avatar as AvatarPrimitive } from \"radix-ui\";\nimport { cn, makeDecoratable } from \"~/utils.js\";\n\ntype AvatarFallbackProps = AvatarPrimitive.AvatarFallbackProps;\n\nconst AvatarFallbackBase = ({ className, ...props }: AvatarFallbackProps) => (\n    <AvatarPrimitive.Fallback\n        className={cn(\"flex h-full w-full items-center justify-center rounded-sm\", className)}\n        {...props}\n    />\n);\n\nconst AvatarFallback = makeDecoratable(\"AvatarFallback\", AvatarFallbackBase);\n\nexport { AvatarFallback, type AvatarFallbackProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,MAAM,IAAIC,eAAe,QAAQ,UAAU;AACpD,SAASC,EAAE,EAAEC,eAAe;AAI5B,MAAMC,kBAAkB,GAAGA,CAAC;EAAEC,SAAS;EAAE,GAAGC;AAA2B,CAAC,kBACpEP,KAAA,CAAAQ,aAAA,CAACN,eAAe,CAACO,QAAQ,EAAAC,MAAA,CAAAC,MAAA;EACrBL,SAAS,EAAEH,EAAE,CAAC,2DAA2D,EAAEG,SAAS;AAAE,GAClFC,KAAK,CACZ,CACJ;AAED,MAAMK,cAAc,GAAGR,eAAe,CAAC,gBAAgB,EAAEC,kBAAkB,CAAC;AAE5E,SAASO,cAAc","ignoreList":[]}

package/Avatar/components/AvatarImage.d.ts

@@ -14,7 +14,7 @@ declare const AvatarImage: (({ className, ...props }: AvatarImageProps) => React
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ className, ...props }: AvatarImageProps) => React.JSX.Element) & {
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<(({ className, ...props }: AvatarImageProps) => React.JSX.Element) & {
         original: ({ className, ...props }: AvatarImageProps) => React.JSX.Element;
         originalName: string;
         displayName: string;

package/Avatar/components/AvatarImage.js

@@ -1,11 +1,11 @@
 import * as React from "react";
 import { Avatar as AvatarPrimitive } from "radix-ui";
-import { cn, makeDecoratable } from "../../utils";
+import { cn, makeDecoratable } from "../../utils.js";
 const AvatarImageBase = ({
   className,
   ...props
 }) => /*#__PURE__*/React.createElement(AvatarPrimitive.Image, Object.assign({
-  className: cn("wby-aspect-square", className)
+  className: cn("aspect-square", className)
 }, props));
 const AvatarImage = makeDecoratable("AvatarImage", AvatarImageBase);
 export { AvatarImage };

package/Avatar/components/AvatarImage.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Avatar","AvatarPrimitive","cn","makeDecoratable","AvatarImageBase","className","props","createElement","Image","Object","assign","AvatarImage"],"sources":["AvatarImage.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Avatar as AvatarPrimitive } from \"radix-ui\";\nimport { cn, makeDecoratable } from \"~/utils\";\n\ntype AvatarImageProps = AvatarPrimitive.AvatarImageProps;\n\nconst AvatarImageBase = ({ className, ...props }: AvatarImageProps) => (\n    <AvatarPrimitive.Image className={cn(\"wby-aspect-square\", className)} {...props} />\n);\n\nconst AvatarImage = makeDecoratable(\"AvatarImage\", AvatarImageBase);\n\nexport { AvatarImage, type AvatarImageProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,MAAM,IAAIC,eAAe,QAAQ,UAAU;AACpD,SAASC,EAAE,EAAEC,eAAe;AAI5B,MAAMC,eAAe,GAAGA,CAAC;EAAEC,SAAS;EAAE,GAAGC;AAAwB,CAAC,kBAC9DP,KAAA,CAAAQ,aAAA,CAACN,eAAe,CAACO,KAAK,EAAAC,MAAA,CAAAC,MAAA;EAACL,SAAS,EAAEH,EAAE,CAAC,mBAAmB,EAAEG,SAAS;AAAE,GAAKC,KAAK,CAAG,CACrF;AAED,MAAMK,WAAW,GAAGR,eAAe,CAAC,aAAa,EAAEC,eAAe,CAAC;AAEnE,SAASO,WAAW","ignoreList":[]}
+{"version":3,"names":["React","Avatar","AvatarPrimitive","cn","makeDecoratable","AvatarImageBase","className","props","createElement","Image","Object","assign","AvatarImage"],"sources":["AvatarImage.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Avatar as AvatarPrimitive } from \"radix-ui\";\nimport { cn, makeDecoratable } from \"~/utils.js\";\n\ntype AvatarImageProps = AvatarPrimitive.AvatarImageProps;\n\nconst AvatarImageBase = ({ className, ...props }: AvatarImageProps) => (\n    <AvatarPrimitive.Image className={cn(\"aspect-square\", className)} {...props} />\n);\n\nconst AvatarImage = makeDecoratable(\"AvatarImage\", AvatarImageBase);\n\nexport { AvatarImage, type AvatarImageProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,MAAM,IAAIC,eAAe,QAAQ,UAAU;AACpD,SAASC,EAAE,EAAEC,eAAe;AAI5B,MAAMC,eAAe,GAAGA,CAAC;EAAEC,SAAS;EAAE,GAAGC;AAAwB,CAAC,kBAC9DP,KAAA,CAAAQ,aAAA,CAACN,eAAe,CAACO,KAAK,EAAAC,MAAA,CAAAC,MAAA;EAACL,SAAS,EAAEH,EAAE,CAAC,eAAe,EAAEG,SAAS;AAAE,GAAKC,KAAK,CAAG,CACjF;AAED,MAAMK,WAAW,GAAGR,eAAe,CAAC,aAAa,EAAEC,eAAe,CAAC;AAEnE,SAASO,WAAW","ignoreList":[]}

package/Avatar/components/index.d.ts

@@ -1,2 +1,2 @@
-export * from "./AvatarFallback";
-export * from "./AvatarImage";
+export * from "./AvatarFallback.js";
+export * from "./AvatarImage.js";

package/Avatar/components/index.js

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

package/Avatar/components/index.js.map

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

package/Avatar/index.d.ts

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

package/Avatar/index.js

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

package/Avatar/index.js.map

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

package/Button/Button.d.ts

@@ -1,32 +1,33 @@
 import React from "react";
-import { type VariantProps } from "../utils";
+import { type VariantProps } from "../utils.js";
 declare const buttonVariants: (props?: ({
     variant?: "primary" | "secondary" | "tertiary" | "ghost" | "ghost-negative" | null | undefined;
     size?: "sm" | "md" | "lg" | "xl" | null | undefined;
     contentLayout?: "text" | "icon" | "text-icon-start" | "text-icon-end" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children">, VariantProps<typeof buttonVariants> {
     text?: React.ReactNode;
+    children?: React.ReactNode;
     icon?: React.ReactNode;
     iconPosition?: "start" | "end";
     asChild?: boolean;
     containerClassName?: string;
 }
-declare const Button: (({ className, variant, size, asChild, text, icon, iconPosition, disabled, containerClassName, ...rest }: ButtonProps) => React.JSX.Element) & {
-    original: ({ className, variant, size, asChild, text, icon, iconPosition, disabled, containerClassName, ...rest }: ButtonProps) => React.JSX.Element;
+declare const Button: (({ className, variant, size, asChild, text, children, icon, iconPosition, disabled, containerClassName, ...rest }: ButtonProps) => React.JSX.Element) & {
+    original: ({ className, variant, size, asChild, text, children, icon, iconPosition, disabled, containerClassName, ...rest }: ButtonProps) => React.JSX.Element;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ className, variant, size, asChild, text, icon, iconPosition, disabled, containerClassName, ...rest }: ButtonProps) => React.JSX.Element) & {
-        original: ({ className, variant, size, asChild, text, icon, iconPosition, disabled, containerClassName, ...rest }: ButtonProps) => React.JSX.Element;
+    original: (({ className, variant, size, asChild, text, children, icon, iconPosition, disabled, containerClassName, ...rest }: ButtonProps) => React.JSX.Element) & {
+        original: ({ className, variant, size, asChild, text, children, icon, iconPosition, disabled, containerClassName, ...rest }: ButtonProps) => React.JSX.Element;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ className, variant, size, asChild, text, icon, iconPosition, disabled, containerClassName, ...rest }: ButtonProps) => React.JSX.Element) & {
-        original: ({ className, variant, size, asChild, text, icon, iconPosition, disabled, containerClassName, ...rest }: ButtonProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<(({ className, variant, size, asChild, text, children, icon, iconPosition, disabled, containerClassName, ...rest }: ButtonProps) => React.JSX.Element) & {
+        original: ({ className, variant, size, asChild, text, children, icon, iconPosition, disabled, containerClassName, ...rest }: ButtonProps) => React.JSX.Element;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;