v1.2.15

lib/components/avatar/avatar.tsx

@@ -48,7 +48,7 @@ export const Avatar = (props: IAvatar) => {
     return initials.toUpperCase();
   };
 
-  const defaultSvgString = renderToString(<User color="white" size={28} />);
+  const defaultSvgString = renderToString(<User variant="Bold" color="white" size={28} />);
   const defaultImgSrc = `data:image/svg+xml;base64,${btoa(defaultSvgString)}`;
   const nameLetters = name ? getInitials(name) : "";
 

lib/customization/styles/components/avatar.styles.ts

@@ -36,9 +36,9 @@ const img = cva(["zn-block"], {
       "2xs": ["zn-w-3", "zn-h-3"],
       xs: ["zn-w-4", "zn-h-4"],
       sm: ["zn-w-6", "zn-h-6"],
-      md: ["zn-w-8", "zn-h-8"],
-      lg: ["zn-w-12", "zn-h-12"],
-      xl: ["zn-w-20", "zn-h-20"],
+      md: ["zn-w-7", "zn-h-7"],
+      lg: ["zn-w-10", "zn-h-10"],
+      xl: ["zn-w-16", "zn-h-16"],
       "2xl": ["zn-w-24", "zn-h-24"],
     },
   },

lib/customization/styles/components/box.styles.ts

@@ -1,6 +1,6 @@
 import { cva } from "class-variance-authority";
 
-const base = cva(["zn-block"]);
+const base = cva([]);
 
 const boxStyles = {
   base,

lib/customization/styles/components/flex.styles.ts

@@ -1,6 +1,6 @@
 import { cva } from "class-variance-authority";
 
-const base = cva(["zn-flex"], {
+const base = cva(["zn-flex", "zn-w-full"], {
   variants: {
     direction: {
       row: ["zn-flex-row"],

lib/customization/styles/components/image.styles.ts

@@ -18,6 +18,7 @@ const backdrop = cva([
   "zn-flex",
   "zn-justify-center",
   "zn-items-center",
+  "zn-z-[9999]",
 ]);
 const imgContainer = cva(["zn-select-none"]);
 const isPreviewable = cva(["hover:zn-brightness-75", "zn-cursor-pointer"]);