@julseb-lib/react 0.0.90 → 0.0.91

package/dist/index.cjs.js

@@ -754,37 +754,35 @@ React keys must be passed directly to JSX without using spread:
         min-height: ${({$minHeight:l})=>w.stringifyPx(l)};
     }
 `;_([A1]);const L1=({"data-testid":l,as:c,ref:e,children:a,gap:h="l",backgroundColor:d="transparent",minHeight:i="100svh",...f})=>t.jsx(A1,{"data-testid":l,ref:e,as:c,$gap:h,$backgroundColor:d,$minHeight:i,...f,children:a}),n3=l=>typeof l=="number"?w.stringifyPx(l):new Map([["default",I2.MAIN_DEFAULT],["large",I2.MAIN_LARGE],["form",I2.MAIN_FORM],["full",I2.MAIN_FULL]]).get(l),R1=o.main`
-    position: relative;
-    width: 100%;
-    height: 100%;
-    min-height: 100%;
-    max-width: ${({$size:l})=>n3(l||"default")};
-    padding: ${L.XXL} 0;
-    ${s.Flexbox({$flexDirection:"column",$alignItems:"flex-start",$gap:"l"})}
-    ${s.StretchTags}
+	position: relative;
+	width: 100%;
+	min-height: 100%;
+	max-width: ${({$size:l})=>n3(l||"default")};
+	padding: ${L.XXL} 0;
+	${s.Flexbox({$flexDirection:"column",$alignItems:"flex-start",$gap:"l"})}
+	${s.StretchTags}
 
     & > * {
-        flex-shrink: 0;
-    }
+		flex-shrink: 0;
+	}
 
-    ${({$size:l,$contentSize:c})=>l==="full"&&o.css`
-            display: grid;
-            grid-template-columns: 1fr ${n3(c||"default")} 1fr;
+	${({$size:l,$contentSize:c})=>l==="full"&&o.css`
+			display: grid;
+			grid-template-columns: 1fr ${n3(c||"default")} 1fr;
 
-            & > * {
-                grid-column: 2;
-            }
-        `}
+			& > * {
+				grid-column: 2;
+			}
+		`}
 
-    @media ${N.BREAKPOINT_TABLET_LARGE} {
-        height: unset;
-        min-height: unset;
-        padding: ${L.L} 0;
-    }
+	@media ${N.BREAKPOINT_TABLET_LARGE} {
+		height: unset;
+		min-height: unset;
+		padding: ${L.L} 0;
+	}
 `;_([R1]);const j1=({"data-testid":l,as:c,ref:e,children:a,size:h="default",contentSize:d="default",...i})=>t.jsx(R1,{"data-testid":l,ref:e,as:c,$size:h,$contentSize:d,...i,children:a}),M3=l=>typeof l=="number"?w.stringifyPx(l):new Map([["default",I2.ASIDE_DEFAULT],["small",I2.ASIDE_SMALL]]).get(l),S1=o.aside`
     position: relative;
     width: 100%;
-    height: 100%;
     min-height: 100%;
     max-width: ${({$size:l})=>M3(l||"default")};
     padding: ${L.XXL} 0;
@@ -1111,7 +1109,7 @@ React keys must be passed directly to JSX without using spread:
             ${h?`#${h}`:`.${y}`} {
             --avatar-size: ${m}px;
             }
-        `),console.log(z==null?void 0:z.fallbackBackgroundColor),t.jsxs(f4,{"data-testid":d&&l?`${l}.Avatar`:l,ref:d?void 0:e,as:d?"span":c,id:h,className:T(d&&a?"Avatar":a,C),$backgroundColor:i,$border:f,$borderRadius:r,$size:m,$contentColor:p,$fontSize:H,...u,children:[z&&t.jsx(D2,{"data-testid":l&&`${l}.Image`,className:a&&"Image",src:typeof z=="object"?z.src:z,alt:typeof z=="object"?z.alt:"Avatar",width:"100%",height:"100%",fit:"cover",imgFallback:typeof z=="object"?{text:z.fallback??"",fontSize:z.fallbackFontSize??H,background:z.fallbackBackgroundColor??i,textColor:z.fallbackFontColor??p}:void 0}),M&&M,v&&t.jsx(l2,{"data-testid":l&&`${l}.Icon`,className:a&&"Icon",icon:v,size:g,color:p,baseUrl:n})]})},$l=({"data-testid":l,as:c,ref:e,size:a=32,border:h,borderRadius:d="circle",badge:i,img:f,letter:r,icon:m,iconSize:p=h2(a),backgroundColor:z="danger",contentColor:M=z==="white"?"primary":z==="black"?"white":"background",className:v,containerStyle:g,...n})=>{var y,A;const H=typeof i=="object",u=H&&i.size?i.size:8,C={"data-testid":l,as:c,className:v,hasBadge:!!i,backgroundColor:z,border:h,borderRadius:d,size:a,contentColor:M,img:f,letter:r,icon:m,iconSize:p,ref:e,...n};return i?t.jsxs(r4,{"data-testid":l,ref:e,as:c,className:v,style:g,$backgroundColor:z,$border:h,$borderRadius:d,$size:a,$contentColor:M,children:[t.jsx(k3,{...C}),t.jsx(m4,{"data-testid":l&&`${l}.Badge`,className:T({Badge:v},`Position${w.capitalize(H&&i.position?i.position:"top")}`),size:u,number:H&&i.content?i.content:void 0,backgroundColor:H&&i.backgroundColor?i.backgroundColor:void 0,contentColor:H&&i.contentColor?i.contentColor:void 0,padding:H&&i.padding?i.padding:void 0,$width:u,$paddingLeftRight:H&&typeof i.padding=="object"&&((y=i.padding)!=null&&y.leftRight)?(A=i.padding)==null?void 0:A.leftRight:"0px",$outline:H&&i.outline?i.outline:void 0})]}):t.jsx(k3,{...C})},z0=({$size:l})=>o.css`
+        `),console.log(z==null?void 0:z.fallbackBackgroundColor),t.jsxs(f4,{"data-testid":d&&l?`${l}.Avatar`:l,ref:d?void 0:e,as:d?"span":c,id:h,className:T(d&&a?"Avatar":a,C),$backgroundColor:i,$border:f,$borderRadius:r,$size:m,$contentColor:p,$fontSize:H,...u,children:[z&&t.jsx(D2,{"data-testid":l&&`${l}.Image`,className:a&&"Image",src:typeof z=="object"?z.src:z,alt:typeof z=="object"?z.alt:"Avatar",width:"100%",height:"100%",fit:"cover",imgFallback:typeof z=="object"?{text:z.fallback??"",fontSize:z.fallbackFontSize??H,background:z.fallbackBackgroundColor??i,textColor:z.fallbackFontColor??p}:void 0}),M&&M,v&&t.jsx(l2,{"data-testid":l&&`${l}.Icon`,className:a&&"Icon",icon:v,size:g,color:p,baseUrl:n})]})},$l=({"data-testid":l,as:c,ref:e,size:a=32,border:h,borderRadius:d="circle",badge:i,img:f,letter:r,icon:m,iconSize:p=h2(a),backgroundColor:z="danger",contentColor:M=z==="white"?"primary":z==="black"?"white":"background",className:v,containerStyle:g,role:n="img",...H})=>{var A,$;const u=typeof i=="object",C=u&&i.size?i.size:8,y={"data-testid":l,as:c,className:v,hasBadge:!!i,backgroundColor:z,border:h,borderRadius:d,size:a,contentColor:M,img:f,letter:r,icon:m,iconSize:p,ref:e,role:n,...H};return i?t.jsxs(r4,{"data-testid":l,ref:e,as:c,className:v,style:g,$backgroundColor:z,$border:h,$borderRadius:d,$size:a,$contentColor:M,children:[t.jsx(k3,{...y}),t.jsx(m4,{"data-testid":l&&`${l}.Badge`,className:T({Badge:v},`Position${w.capitalize(u&&i.position?i.position:"top")}`),size:C,number:u&&i.content?i.content:void 0,backgroundColor:u&&i.backgroundColor?i.backgroundColor:void 0,contentColor:u&&i.contentColor?i.contentColor:void 0,padding:u&&i.padding?i.padding:void 0,$width:C,$paddingLeftRight:u&&typeof i.padding=="object"&&((A=i.padding)!=null&&A.leftRight)?($=i.padding)==null?void 0:$.leftRight:"0px",$outline:u&&i.outline?i.outline:void 0})]}):t.jsx(k3,{...y})},z0=({$size:l})=>o.css`
     width: ${l&&w.stringifyPx(l)};
     height: ${l&&w.stringifyPx(l)};
     position: relative;

package/dist/index.es.js

@@ -6609,37 +6609,36 @@ const rl = ({
   ["form", F2.MAIN_FORM],
   ["full", F2.MAIN_FULL]
 ])).get(l), G1 = k.main`
-    position: relative;
-    width: 100%;
-    height: 100%;
-    min-height: 100%;
-    max-width: ${({ $size: l }) => C3(l || "default")};
-    padding: ${A.XXL} 0;
-    ${s.Flexbox({
+	position: relative;
+	width: 100%;
+	min-height: 100%;
+	max-width: ${({ $size: l }) => C3(l || "default")};
+	padding: ${A.XXL} 0;
+	${s.Flexbox({
   $flexDirection: "column",
   $alignItems: "flex-start",
   $gap: "l"
 })}
-    ${s.StretchTags}
+	${s.StretchTags}
 
     & > * {
-        flex-shrink: 0;
-    }
+		flex-shrink: 0;
+	}
 
-    ${({ $size: l, $contentSize: c }) => l === "full" && x`
-            display: grid;
-            grid-template-columns: 1fr ${C3(c || "default")} 1fr;
+	${({ $size: l, $contentSize: c }) => l === "full" && x`
+			display: grid;
+			grid-template-columns: 1fr ${C3(c || "default")} 1fr;
 
-            & > * {
-                grid-column: 2;
-            }
-        `}
+			& > * {
+				grid-column: 2;
+			}
+		`}
 
-    @media ${S.BREAKPOINT_TABLET_LARGE} {
-        height: unset;
-        min-height: unset;
-        padding: ${A.L} 0;
-    }
+	@media ${S.BREAKPOINT_TABLET_LARGE} {
+		height: unset;
+		min-height: unset;
+		padding: ${A.L} 0;
+	}
 `;
 j([G1]);
 const ml = ({
@@ -6667,7 +6666,6 @@ const ml = ({
 ])).get(l), T1 = k.aside`
     position: relative;
     width: 100%;
-    height: 100%;
     min-height: 100%;
     max-width: ${({ $size: l }) => $3(l || "default")};
     padding: ${A.XXL} 0;
@@ -7981,10 +7979,11 @@ const R3 = ({
   contentColor: n = z === "white" ? "primary" : z === "black" ? "white" : "background",
   className: p,
   containerStyle: M,
-  ...v
+  role: v = "img",
+  ...u
 }) => {
-  var H, $;
-  const u = typeof i == "object", w = u && i.size ? i.size : 8, y = {
+  var $, C;
+  const w = typeof i == "object", y = w && i.size ? i.size : 8, H = {
     "data-testid": l,
     as: c,
     className: p,
@@ -7999,7 +7998,8 @@ const R3 = ({
     icon: m,
     iconSize: o,
     ref: e,
-    ...v
+    role: v,
+    ...u
   };
   return i ? /* @__PURE__ */ t.jsxs(
     z4,
@@ -8015,7 +8015,7 @@ const R3 = ({
       $size: a,
       $contentColor: n,
       children: [
-        /* @__PURE__ */ t.jsx(R3, { ...y }),
+        /* @__PURE__ */ t.jsx(R3, { ...H }),
         /* @__PURE__ */ t.jsx(
           v4,
           {
@@ -8023,22 +8023,22 @@ const R3 = ({
             className: D(
               { Badge: p },
               `Position${A2(
-                u && i.position ? i.position : "top"
+                w && i.position ? i.position : "top"
               )}`
             ),
-            size: w,
-            number: u && i.content ? i.content : void 0,
-            backgroundColor: u && i.backgroundColor ? i.backgroundColor : void 0,
-            contentColor: u && i.contentColor ? i.contentColor : void 0,
-            padding: u && i.padding ? i.padding : void 0,
-            $width: w,
-            $paddingLeftRight: u && typeof i.padding == "object" && ((H = i.padding) != null && H.leftRight) ? ($ = i.padding) == null ? void 0 : $.leftRight : "0px",
-            $outline: u && i.outline ? i.outline : void 0
+            size: y,
+            number: w && i.content ? i.content : void 0,
+            backgroundColor: w && i.backgroundColor ? i.backgroundColor : void 0,
+            contentColor: w && i.contentColor ? i.contentColor : void 0,
+            padding: w && i.padding ? i.padding : void 0,
+            $width: y,
+            $paddingLeftRight: w && typeof i.padding == "object" && (($ = i.padding) != null && $.leftRight) ? (C = i.padding) == null ? void 0 : C.leftRight : "0px",
+            $outline: w && i.outline ? i.outline : void 0
           }
         )
       ]
     }
-  ) : /* @__PURE__ */ t.jsx(R3, { ...y });
+  ) : /* @__PURE__ */ t.jsx(R3, { ...H });
 }, y0 = ({ $size: l }) => x`
     width: ${l && G(l)};
     height: ${l && G(l)};

package/dist/index.umd.js

@@ -754,37 +754,35 @@ React keys must be passed directly to JSX without using spread:
         min-height: ${({$minHeight:l})=>x.stringifyPx(l)};
     }
 `;_([d1]);const i1=({"data-testid":l,as:c,ref:e,children:a,gap:h="l",backgroundColor:d="transparent",minHeight:i="100svh",...r})=>t.jsx(d1,{"data-testid":l,ref:e,as:c,$gap:h,$backgroundColor:d,$minHeight:i,...r,children:a}),f1=l=>typeof l=="number"?x.stringifyPx(l):new Map([["default",I2.MAIN_DEFAULT],["large",I2.MAIN_LARGE],["form",I2.MAIN_FORM],["full",I2.MAIN_FULL]]).get(l),r1=s.main`
-    position: relative;
-    width: 100%;
-    height: 100%;
-    min-height: 100%;
-    max-width: ${({$size:l})=>f1(l||"default")};
-    padding: ${L.XXL} 0;
-    ${o.Flexbox({$flexDirection:"column",$alignItems:"flex-start",$gap:"l"})}
-    ${o.StretchTags}
+	position: relative;
+	width: 100%;
+	min-height: 100%;
+	max-width: ${({$size:l})=>f1(l||"default")};
+	padding: ${L.XXL} 0;
+	${o.Flexbox({$flexDirection:"column",$alignItems:"flex-start",$gap:"l"})}
+	${o.StretchTags}
 
     & > * {
-        flex-shrink: 0;
-    }
+		flex-shrink: 0;
+	}
 
-    ${({$size:l,$contentSize:c})=>l==="full"&&s.css`
-            display: grid;
-            grid-template-columns: 1fr ${f1(c||"default")} 1fr;
+	${({$size:l,$contentSize:c})=>l==="full"&&s.css`
+			display: grid;
+			grid-template-columns: 1fr ${f1(c||"default")} 1fr;
 
-            & > * {
-                grid-column: 2;
-            }
-        `}
+			& > * {
+				grid-column: 2;
+			}
+		`}
 
-    @media ${N.BREAKPOINT_TABLET_LARGE} {
-        height: unset;
-        min-height: unset;
-        padding: ${L.L} 0;
-    }
+	@media ${N.BREAKPOINT_TABLET_LARGE} {
+		height: unset;
+		min-height: unset;
+		padding: ${L.L} 0;
+	}
 `;_([r1]);const m1=({"data-testid":l,as:c,ref:e,children:a,size:h="default",contentSize:d="default",...i})=>t.jsx(r1,{"data-testid":l,ref:e,as:c,$size:h,$contentSize:d,...i,children:a}),s1=l=>typeof l=="number"?x.stringifyPx(l):new Map([["default",I2.ASIDE_DEFAULT],["small",I2.ASIDE_SMALL]]).get(l),o1=s.aside`
     position: relative;
     width: 100%;
-    height: 100%;
     min-height: 100%;
     max-width: ${({$size:l})=>s1(l||"default")};
     padding: ${L.XXL} 0;
@@ -1111,7 +1109,7 @@ React keys must be passed directly to JSX without using spread:
             ${h?`#${h}`:`.${y}`} {
             --avatar-size: ${m}px;
             }
-        `),console.log(p==null?void 0:p.fallbackBackgroundColor),t.jsxs(Y1,{"data-testid":d&&l?`${l}.Avatar`:l,ref:d?void 0:e,as:d?"span":c,id:h,className:G(d&&a?"Avatar":a,$),$backgroundColor:i,$border:r,$borderRadius:f,$size:m,$contentColor:z,$fontSize:C,...u,children:[p&&t.jsx(V2,{"data-testid":l&&`${l}.Image`,className:a&&"Image",src:typeof p=="object"?p.src:p,alt:typeof p=="object"?p.alt:"Avatar",width:"100%",height:"100%",fit:"cover",imgFallback:typeof p=="object"?{text:p.fallback??"",fontSize:p.fallbackFontSize??C,background:p.fallbackBackgroundColor??i,textColor:p.fallbackFontColor??z}:void 0}),M&&M,v&&t.jsx(l2,{"data-testid":l&&`${l}.Icon`,className:a&&"Icon",icon:v,size:g,color:z,baseUrl:n})]})},wl=({"data-testid":l,as:c,ref:e,size:a=32,border:h,borderRadius:d="circle",badge:i,img:r,letter:f,icon:m,iconSize:z=h2(a),backgroundColor:p="danger",contentColor:M=p==="white"?"primary":p==="black"?"white":"background",className:v,containerStyle:g,...n})=>{var y,R;const C=typeof i=="object",u=C&&i.size?i.size:8,$={"data-testid":l,as:c,className:v,hasBadge:!!i,backgroundColor:p,border:h,borderRadius:d,size:a,contentColor:M,img:r,letter:f,icon:m,iconSize:z,ref:e,...n};return i?t.jsxs(P1,{"data-testid":l,ref:e,as:c,className:v,style:g,$backgroundColor:p,$border:h,$borderRadius:d,$size:a,$contentColor:M,children:[t.jsx(F1,{...$}),t.jsx(U1,{"data-testid":l&&`${l}.Badge`,className:G({Badge:v},`Position${x.capitalize(C&&i.position?i.position:"top")}`),size:u,number:C&&i.content?i.content:void 0,backgroundColor:C&&i.backgroundColor?i.backgroundColor:void 0,contentColor:C&&i.contentColor?i.contentColor:void 0,padding:C&&i.padding?i.padding:void 0,$width:u,$paddingLeftRight:C&&typeof i.padding=="object"&&((y=i.padding)!=null&&y.leftRight)?(R=i.padding)==null?void 0:R.leftRight:"0px",$outline:C&&i.outline?i.outline:void 0})]}):t.jsx(F1,{...$})},s0=({$size:l})=>s.css`
+        `),console.log(p==null?void 0:p.fallbackBackgroundColor),t.jsxs(Y1,{"data-testid":d&&l?`${l}.Avatar`:l,ref:d?void 0:e,as:d?"span":c,id:h,className:G(d&&a?"Avatar":a,$),$backgroundColor:i,$border:r,$borderRadius:f,$size:m,$contentColor:z,$fontSize:C,...u,children:[p&&t.jsx(V2,{"data-testid":l&&`${l}.Image`,className:a&&"Image",src:typeof p=="object"?p.src:p,alt:typeof p=="object"?p.alt:"Avatar",width:"100%",height:"100%",fit:"cover",imgFallback:typeof p=="object"?{text:p.fallback??"",fontSize:p.fallbackFontSize??C,background:p.fallbackBackgroundColor??i,textColor:p.fallbackFontColor??z}:void 0}),M&&M,v&&t.jsx(l2,{"data-testid":l&&`${l}.Icon`,className:a&&"Icon",icon:v,size:g,color:z,baseUrl:n})]})},wl=({"data-testid":l,as:c,ref:e,size:a=32,border:h,borderRadius:d="circle",badge:i,img:r,letter:f,icon:m,iconSize:z=h2(a),backgroundColor:p="danger",contentColor:M=p==="white"?"primary":p==="black"?"white":"background",className:v,containerStyle:g,role:n="img",...C})=>{var R,A;const u=typeof i=="object",$=u&&i.size?i.size:8,y={"data-testid":l,as:c,className:v,hasBadge:!!i,backgroundColor:p,border:h,borderRadius:d,size:a,contentColor:M,img:r,letter:f,icon:m,iconSize:z,ref:e,role:n,...C};return i?t.jsxs(P1,{"data-testid":l,ref:e,as:c,className:v,style:g,$backgroundColor:p,$border:h,$borderRadius:d,$size:a,$contentColor:M,children:[t.jsx(F1,{...y}),t.jsx(U1,{"data-testid":l&&`${l}.Badge`,className:G({Badge:v},`Position${x.capitalize(u&&i.position?i.position:"top")}`),size:$,number:u&&i.content?i.content:void 0,backgroundColor:u&&i.backgroundColor?i.backgroundColor:void 0,contentColor:u&&i.contentColor?i.contentColor:void 0,padding:u&&i.padding?i.padding:void 0,$width:$,$paddingLeftRight:u&&typeof i.padding=="object"&&((R=i.padding)!=null&&R.leftRight)?(A=i.padding)==null?void 0:A.leftRight:"0px",$outline:u&&i.outline?i.outline:void 0})]}):t.jsx(F1,{...y})},s0=({$size:l})=>s.css`
     width: ${l&&x.stringifyPx(l)};
     height: ${l&&x.stringifyPx(l)};
     position: relative;

package/dist/lib/components/Aside/styles.tsx

@@ -19,7 +19,6 @@ const StyledAside = styled.aside<{
 }>`
     position: relative;
     width: 100%;
-    height: 100%;
     min-height: 100%;
     max-width: ${({ $size }) => getAsideSize($size || "default")};
     padding: ${SPACERS.XXL} 0;

package/dist/lib/components/Avatar/Avatar.tsx

@@ -35,111 +35,113 @@ import type { ILibAvatar } from "./types"
  * <Avatar icon={<UserIcon />} badge={{ content: 1, backgroundColor: "danger" }} />
  */
 export const Avatar: FC<ILibAvatar> = ({
-    "data-testid": testid,
-    as,
-    ref,
-    size = 32,
-    border,
-    borderRadius = "circle",
-    badge,
-    img,
-    letter,
-    icon,
-    iconSize = roundIconSize(size),
-    backgroundColor = "danger",
-    contentColor = backgroundColor === "white"
-        ? "primary"
-        : backgroundColor === "black"
-        ? "white"
-        : "background",
-    className,
-    containerStyle,
-    ...rest
+	"data-testid": testid,
+	as,
+	ref,
+	size = 32,
+	border,
+	borderRadius = "circle",
+	badge,
+	img,
+	letter,
+	icon,
+	iconSize = roundIconSize(size),
+	backgroundColor = "danger",
+	contentColor = backgroundColor === "white"
+		? "primary"
+		: backgroundColor === "black"
+		? "white"
+		: "background",
+	className,
+	containerStyle,
+	role = "img",
+	...rest
 }) => {
-    const isBadgeObject = typeof badge === "object"
-    const badgeSize = isBadgeObject && badge.size ? badge.size : 8
+	const isBadgeObject = typeof badge === "object"
+	const badgeSize = isBadgeObject && badge.size ? badge.size : 8
 
-    const avatarProps = {
-        "data-testid": testid,
-        as,
-        className,
-        hasBadge: !!badge,
-        backgroundColor,
-        border,
-        borderRadius,
-        size,
-        contentColor,
-        img,
-        letter,
-        icon,
-        iconSize,
-        ref,
-        ...rest,
-    }
+	const avatarProps = {
+		"data-testid": testid,
+		as,
+		className,
+		hasBadge: !!badge,
+		backgroundColor,
+		border,
+		borderRadius,
+		size,
+		contentColor,
+		img,
+		letter,
+		icon,
+		iconSize,
+		ref,
+		role,
+		...rest,
+	}
 
-    if (badge)
-        return (
-            <StyledAvatarContainer
-                data-testid={testid}
-                ref={ref}
-                as={as}
-                className={className}
-                style={containerStyle}
-                $backgroundColor={backgroundColor}
-                $border={border}
-                $borderRadius={borderRadius}
-                $size={size}
-                $contentColor={contentColor}
-            >
-                <AvatarFunction {...avatarProps} />
+	if (badge)
+		return (
+			<StyledAvatarContainer
+				data-testid={testid}
+				ref={ref}
+				as={as}
+				className={className}
+				style={containerStyle}
+				$backgroundColor={backgroundColor}
+				$border={border}
+				$borderRadius={borderRadius}
+				$size={size}
+				$contentColor={contentColor}
+			>
+				<AvatarFunction {...avatarProps} />
 
-                <StyledBadge
-                    data-testid={testid && `${testid}.Badge`}
-                    className={classNames(
-                        { Badge: className },
-                        `Position${capitalize(
-                            isBadgeObject && badge.position
-                                ? badge.position
-                                : "top"
-                        )}`
-                    )}
-                    size={badgeSize}
-                    number={
-                        isBadgeObject && badge.content
-                            ? badge.content
-                            : undefined
-                    }
-                    backgroundColor={
-                        isBadgeObject && badge.backgroundColor
-                            ? badge.backgroundColor
-                            : undefined
-                    }
-                    contentColor={
-                        isBadgeObject && badge.contentColor
-                            ? badge.contentColor
-                            : undefined
-                    }
-                    padding={
-                        isBadgeObject && badge.padding
-                            ? badge.padding
-                            : undefined
-                    }
-                    $width={badgeSize}
-                    $paddingLeftRight={
-                        isBadgeObject &&
-                        typeof badge.padding === "object" &&
-                        badge.padding?.leftRight
-                            ? badge.padding?.leftRight
-                            : "0px"
-                    }
-                    $outline={
-                        isBadgeObject && badge.outline
-                            ? badge.outline
-                            : undefined
-                    }
-                />
-            </StyledAvatarContainer>
-        )
+				<StyledBadge
+					data-testid={testid && `${testid}.Badge`}
+					className={classNames(
+						{ Badge: className },
+						`Position${capitalize(
+							isBadgeObject && badge.position
+								? badge.position
+								: "top"
+						)}`
+					)}
+					size={badgeSize}
+					number={
+						isBadgeObject && badge.content
+							? badge.content
+							: undefined
+					}
+					backgroundColor={
+						isBadgeObject && badge.backgroundColor
+							? badge.backgroundColor
+							: undefined
+					}
+					contentColor={
+						isBadgeObject && badge.contentColor
+							? badge.contentColor
+							: undefined
+					}
+					padding={
+						isBadgeObject && badge.padding
+							? badge.padding
+							: undefined
+					}
+					$width={badgeSize}
+					$paddingLeftRight={
+						isBadgeObject &&
+						typeof badge.padding === "object" &&
+						badge.padding?.leftRight
+							? badge.padding?.leftRight
+							: "0px"
+					}
+					$outline={
+						isBadgeObject && badge.outline
+							? badge.outline
+							: undefined
+					}
+				/>
+			</StyledAvatarContainer>
+		)
 
-    return <AvatarFunction {...avatarProps} />
+	return <AvatarFunction {...avatarProps} />
 }

package/dist/lib/components/Main/styles.tsx

@@ -4,56 +4,55 @@ import { setDefaultTheme, Mixins, MEDIA, SPACERS, LAYOUTS } from "../../"
 import type { LibMainSize } from "../../types"
 
 const getMainSize = (size: LibMainSize) => {
-    if (typeof size === "number") return stringifyPx(size)
+	if (typeof size === "number") return stringifyPx(size)
 
-    const sizesMap = new Map<LibMainSize, LAYOUTS>([
-        ["default", LAYOUTS.MAIN_DEFAULT],
-        ["large", LAYOUTS.MAIN_LARGE],
-        ["form", LAYOUTS.MAIN_FORM],
-        ["full", LAYOUTS.MAIN_FULL],
-    ])
+	const sizesMap = new Map<LibMainSize, LAYOUTS>([
+		["default", LAYOUTS.MAIN_DEFAULT],
+		["large", LAYOUTS.MAIN_LARGE],
+		["form", LAYOUTS.MAIN_FORM],
+		["full", LAYOUTS.MAIN_FULL],
+	])
 
-    return sizesMap.get(size)
+	return sizesMap.get(size)
 }
 
 const StyledMain = styled.main<{
-    $size?: LibMainSize
-    $contentSize?: Extract<LibMainSize, "default" | "large" | "form">
-    $minHeight: string | number
+	$size?: LibMainSize
+	$contentSize?: Extract<LibMainSize, "default" | "large" | "form">
+	$minHeight: string | number
 }>`
-    position: relative;
-    width: 100%;
-    height: 100%;
-    min-height: 100%;
-    max-width: ${({ $size }) => getMainSize($size || "default")};
-    padding: ${SPACERS.XXL} 0;
-    ${Mixins.Flexbox({
-        $flexDirection: "column",
-        $alignItems: "flex-start",
-        $gap: "l",
-    })}
-    ${Mixins.StretchTags}
+	position: relative;
+	width: 100%;
+	min-height: 100%;
+	max-width: ${({ $size }) => getMainSize($size || "default")};
+	padding: ${SPACERS.XXL} 0;
+	${Mixins.Flexbox({
+		$flexDirection: "column",
+		$alignItems: "flex-start",
+		$gap: "l",
+	})}
+	${Mixins.StretchTags}
 
     & > * {
-        flex-shrink: 0;
-    }
-
-    ${({ $size, $contentSize }) =>
-        $size === "full" &&
-        css`
-            display: grid;
-            grid-template-columns: 1fr ${getMainSize($contentSize || "default")} 1fr;
-
-            & > * {
-                grid-column: 2;
-            }
-        `}
-
-    @media ${MEDIA.BREAKPOINT_TABLET_LARGE} {
-        height: unset;
-        min-height: unset;
-        padding: ${SPACERS.L} 0;
-    }
+		flex-shrink: 0;
+	}
+
+	${({ $size, $contentSize }) =>
+		$size === "full" &&
+		css`
+			display: grid;
+			grid-template-columns: 1fr ${getMainSize($contentSize || "default")} 1fr;
+
+			& > * {
+				grid-column: 2;
+			}
+		`}
+
+	@media ${MEDIA.BREAKPOINT_TABLET_LARGE} {
+		height: unset;
+		min-height: unset;
+		padding: ${SPACERS.L} 0;
+	}
 `
 
 setDefaultTheme([StyledMain])

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@julseb-lib/react",
-	"version": "0.0.90",
+	"version": "0.0.91",
 	"type": "module",
 	"license": "MIT",
 	"scripts": {