@julseb-lib/react 0.0.26 → 0.0.28

package/dist/index.es.js

@@ -8589,21 +8589,28 @@ const Xd = C(
     height: r = "auto",
     borderRadius: s,
     fit: o,
-    ...p
-  }, z) => /* @__PURE__ */ t.jsx(E1, { fallback: c, children: /* @__PURE__ */ t.jsx(
+    loading: p = "lazy",
+    imgFallback: z,
+    ...g
+  }, M) => /* @__PURE__ */ t.jsx(E1, { fallback: c, children: /* @__PURE__ */ t.jsx(
     _c,
     {
       "data-testid": e ? l && `${l}.Image` : l,
       className: e ? a && "Image" : a,
-      ref: z,
+      ref: M,
       src: h,
       alt: d,
+      loading: p,
+      "data-fallback": z == null ? void 0 : z.text,
       $aspectRatio: f,
       $width: i,
       $height: r,
       $borderRadius: s,
       $fit: o,
-      ...p
+      $fallbackBackground: (z == null ? void 0 : z.background) ?? "primary",
+      $fallbackTextColor: (z == null ? void 0 : z.textColor) ?? "background",
+      $fallbackFontSize: (z == null ? void 0 : z.fontSize) ?? "body",
+      ...g
     }
   ) })
 ), Z4 = k.img`
@@ -8615,6 +8622,23 @@ const Xd = C(
     position: relative;
     z-index: 0;
     ${({ $borderRadius: l }) => m.BorderRadius(l)}
+
+    &[alt]:after {
+        position: absolute;
+        top: 0;
+        left: 0;
+        ${m.Flexbox({
+  $alignItems: "center",
+  $justifyContent: "center"
+})};
+        width: 100%;
+        height: 100%;
+        background-color: ${({ $fallbackBackground: l, theme: c }) => m.AllColors(l, c)};
+        color: ${({ $fallbackTextColor: l, theme: c }) => m.AllColors(l, c)};
+        content: attr(data-fallback);
+        font-weight: ${r2.BOLD};
+        font-size: ${({ $fallbackFontSize: l }) => m.FontSize(l)};
+    }
 `, A3 = k.figure`
     position: relative;
     overflow: hidden;
@@ -8982,6 +9006,7 @@ const A0 = C(
     font-weight: ${r2.BLACK};
     line-height: var(--avatar-size);
     text-transform: uppercase;
+    font-size: ${({ $fontSize: l }) => m.FontSize(l)};
 `, a7 = k(A0)`
     position: absolute;
     right: ${({ $width: l, $paddingLeftRight: c }) => `calc((${l / 2}px + ${m.Spacer(c)}) * -1)`};
@@ -9013,30 +9038,32 @@ const p1 = C(
     icon: z,
     iconSize: g,
     iconBaseUrl: M,
-    ...n
-  }, H) => {
-    const u = R0(10, !0), x = (e == null ? void 0 : e.split(" ")[0]) || u;
+    fontSize: n = "body",
+    ...H
+  }, u) => {
+    const x = R0(10, !0), $ = (e == null ? void 0 : e.split(" ")[0]) || x;
     return r0(`
-            ${a ? `#${a}` : `.${x}`} {
+            ${a ? `#${a}` : `.${$}`} {
             --avatar-size: ${r}px;
             }
         `), /* @__PURE__ */ t.jsxs(
       e7,
       {
         "data-testid": h && l ? `${l}.Avatar` : l,
-        ref: h ? void 0 : H,
+        ref: h ? void 0 : u,
         as: h ? "span" : c,
         id: a,
         className: T(
           h && e ? "Avatar" : e,
-          u
+          x
         ),
         $backgroundColor: d,
         $border: f,
         $borderRadius: i,
         $size: r,
         $contentColor: s,
-        ...n,
+        $fontSize: n,
+        ...H,
         children: [
           o && /* @__PURE__ */ t.jsx(
             m0,
@@ -9048,6 +9075,7 @@ const p1 = C(
               width: "100%",
               height: "100%",
               fit: "cover",
+              imgFallback: typeof o == "object" ? { text: o.fallback || "", fontSize: n } : void 0,
               fallback: typeof o == "object" ? o.fallback : void 0
             }
           ),