prometeo-design-system 7.3.5 → 7.3.6

package/dist/Avatar.es.js

@@ -1,7 +1,7 @@
 import { j as i } from "./jsx-runtime-GkKLlHH4.js";
 import { c as f } from "./index-BOQuZ0gG.js";
 import { memo as b, useState as x, useEffect as v } from "react";
-import { A as d } from "./AvatarBase-sKVPLn_O.js";
+import { A as u } from "./AvatarBase-D6H-sXbg.js";
 const z = f(
   "bg-brand-secondary-default border-neutral-default-default border-1 rounded-full text-brand-secondary-default grid place-items-center overflow-hidden object-cover object-center absolute ",
   {
@@ -17,30 +17,31 @@ const z = f(
     }
   }
 ), A = ({
-  subImageUrl: a,
-  size: e = "medium",
-  ...t
+  ref: a,
+  subImageUrl: e,
+  size: r = "medium",
+  ...s
 }) => {
-  const [s, l] = x(!1);
+  const [o, l] = x(!1);
   return v(() => {
     l(!1);
-  }, [a]), /* @__PURE__ */ i.jsxs("div", { className: "relative size-max", children: [
-    /* @__PURE__ */ i.jsx(d, { ...t, size: e }),
-    a && !s && /* @__PURE__ */ i.jsx(
+  }, [e]), /* @__PURE__ */ i.jsxs("div", { ref: a, className: "relative size-max", children: [
+    /* @__PURE__ */ i.jsx(u, { ...s, size: r }),
+    e && !o && /* @__PURE__ */ i.jsx(
       "img",
       {
-        className: z({ size: e }),
-        src: a,
+        className: z({ size: r }),
+        src: e,
         alt: "subimage",
         draggable: !1,
         onError: () => l(!0)
       }
     )
   ] });
-}, u = b(A);
-u.displayName = "AvatarAndSubavatar";
-const p = "[Pyrion Avatar]", c = /* @__PURE__ */ new Set(), r = (a, e) => {
-  c.has(a) || (c.add(a), console.warn(`${p} ${e}`));
+}, g = b(A);
+g.displayName = "AvatarAndSubavatar";
+const p = "[Pyrion Avatar]", d = /* @__PURE__ */ new Set(), t = (a, e) => {
+  d.has(a) || (d.add(a), console.warn(`${p} ${e}`));
 }, k = {
   xxxxs: "xsmall",
   xxxs: "small",
@@ -53,48 +54,48 @@ const p = "[Pyrion Avatar]", c = /* @__PURE__ */ new Set(), r = (a, e) => {
 }, y = (a) => {
   if (a.size) return a.size;
   if (a.sizeImage ?? a.sizeFallback) {
-    a.sizeImage && r(
+    a.sizeImage && t(
       "sizeImage",
       'La prop "sizeImage" está deprecada. Usá "size" (AvatarSize) en su lugar.'
-    ), a.sizeFallback && r(
+    ), a.sizeFallback && t(
       "sizeFallback",
       'La prop "sizeFallback" está deprecada. Usá "size" (AvatarSize) en su lugar.'
     );
-    const t = a.sizeImage ?? a.sizeFallback;
-    return k[t];
+    const r = a.sizeImage ?? a.sizeFallback;
+    return k[r];
   }
   return "medium";
 }, I = (a) => {
   if (a.name) return a.name;
   if (a.fallbackText)
-    return r(
+    return t(
       "fallbackText",
       'La prop "fallbackText" está deprecada. Usá "name" en su lugar.'
     ), a.fallbackText;
 }, L = (a) => {
   const {
     sizeImage: e,
-    sizeFallback: t,
+    sizeFallback: r,
     imageDiameter: s,
-    fallbackText: l,
-    subImageDiameter: g,
-    subImageUrl: o,
-    fallbackType: m,
+    fallbackText: o,
+    subImageDiameter: l,
+    subImageUrl: m,
+    fallbackType: c,
     ...n
   } = a;
-  return o && r(
+  return m && t(
     "subImageUrl",
     'La prop "subImageUrl" en Avatar está deprecada. Usá el componente AvatarAndSubavatar en su lugar.'
-  ), s !== void 0 && r(
+  ), s !== void 0 && t(
     "imageDiameter",
     'La prop "imageDiameter" ya no tiene efecto. Usá "size" (AvatarSize) en su lugar.'
-  ), g !== void 0 && r(
+  ), l !== void 0 && t(
     "subImageDiameter",
     'La prop "subImageDiameter" ya no tiene efecto en el nuevo layout del subavatar.'
-  ), m === "defaultAvatar" && r(
+  ), c === "defaultAvatar" && t(
     "fallbackType-defaultAvatar",
     'La prop "fallbackType=defaultAvatar" está deprecada. El avatar usa el icono por defecto cuando no hay imagen ni nombre.'
-  ), a.isLoading && r(
+  ), a.isLoading && t(
     "isLoading",
     'La prop "isLoading" en Avatar está deprecada para futuras versiones; sigue soportada por retrocompatibilidad.'
   ), {
@@ -103,16 +104,17 @@ const p = "[Pyrion Avatar]", c = /* @__PURE__ */ new Set(), r = (a, e) => {
     name: I(a),
     className: n.className,
     isLoading: n.isLoading,
-    fallbackType: m ?? "initials",
-    subImageUrl: o
+    fallbackType: c ?? "initials",
+    subImageUrl: m,
+    ref: n.ref
   };
 };
 function E(a) {
-  const e = L(a), { subImageUrl: t, ...s } = e;
-  return t ? /* @__PURE__ */ i.jsx(u, { subImageUrl: t, ...s }) : /* @__PURE__ */ i.jsx(d, { ...s });
+  const e = L(a), { subImageUrl: r, ...s } = e;
+  return r ? /* @__PURE__ */ i.jsx(g, { subImageUrl: r, ...s }) : /* @__PURE__ */ i.jsx(u, { ...s });
 }
 export {
   E as AvatarAndSubavatar,
-  d as AvatarBase,
+  u as AvatarBase,
   E as default
 };

package/dist/AvatarBase-D6H-sXbg.js

@@ -0,0 +1,67 @@
+import { j as e } from "./jsx-runtime-GkKLlHH4.js";
+import { c as t } from "./cn-B6yFEsav.js";
+import { c } from "./index-BOQuZ0gG.js";
+import { useState as u, useEffect as g } from "react";
+import b from "./Skeleton.es.js";
+import { UserAvatar as h } from "./Icons/UserAvatar.es.js";
+const o = c(
+  "bg-brand-secondary-default rounded-full text-brand-secondary-default grid place-items-center overflow-hidden object-cover object-center select-none",
+  {
+    variants: {
+      size: {
+        "2xlarge": "size-[128px]",
+        xlarge: "size-16",
+        large: "size-[42px]",
+        medium: "size-8",
+        small: "size-6",
+        xsmall: "size-4"
+      }
+    }
+  }
+), j = c("text-brand-secondary-default w-full text-center", {
+  variants: {
+    size: {
+      "2xlarge": "pyrion-fonts-headline-large text-[56px]",
+      xlarge: "pyrion-fonts-headline-medium",
+      large: "pyrion-fonts-headline-small",
+      medium: "pyrion-fonts-label-large",
+      small: "pyrion-fonts-label-medium",
+      xsmall: "pyrion-fonts-label-small text-[8px]"
+    }
+  }
+}), v = (r) => r.trim().split(" ").map((a) => a.charAt(0)).join("").toUpperCase().slice(0, 2);
+function I({
+  ref: r,
+  imageUrl: a,
+  size: s = "medium",
+  isLoading: m = !1,
+  className: l = "",
+  name: n,
+  fallbackType: d = "initials"
+}) {
+  const [f, i] = u(!1);
+  if (g(() => {
+    i(!1);
+  }, [a]), m)
+    return /* @__PURE__ */ e.jsx("div", { ref: r, className: t("inline-flex", l), children: /* @__PURE__ */ e.jsx(
+      b,
+      {
+        shape: "circle",
+        className: t(o({ size: s }), "border-0")
+      }
+    ) });
+  const p = d === "initials" && n, x = !!a && !f;
+  return /* @__PURE__ */ e.jsx("div", { ref: r, className: t(o({ size: s }), l), children: x ? /* @__PURE__ */ e.jsx(
+    "img",
+    {
+      src: a,
+      alt: "avatar",
+      className: "w-full h-full object-cover",
+      draggable: !1,
+      onError: () => i(!0)
+    }
+  ) : p ? /* @__PURE__ */ e.jsx("p", { className: j({ size: s }), children: v(n) }) : /* @__PURE__ */ e.jsx(h, { className: "size-full rounded-full" }) });
+}
+export {
+  I as A
+};

package/dist/Chat.es.js

@@ -1,20 +1,54 @@
+import { M as f } from "./ChatCard-0GSfoMZZ.js";
 import { j as a } from "./jsx-runtime-GkKLlHH4.js";
-import { memo as r, forwardRef as f } from "react";
-import { c as e } from "./cn-B6yFEsav.js";
-import i from "./CardBackground.es.js";
-const c = f(function({ cardBackground: s, children: t, className: o, ...l }, m) {
-  return /* @__PURE__ */ a.jsxs("div", { className: e("relative w-full", o), ref: m, ...l, children: [
-    s && /* @__PURE__ */ a.jsx(
-      i,
-      {
-        ...s,
-        className: e("absolute inset-0 z-0", s.className)
-      }
-    ),
-    /* @__PURE__ */ a.jsx("div", { className: "relative z-10 flex flex-col w-full overflow-y-auto", children: t })
-  ] });
-}), n = r(c);
-n.displayName = "Chat";
+import { memo as d, forwardRef as l, useMemo as m } from "react";
+import { c as i } from "./cn-B6yFEsav.js";
+import c from "./CardBackground.es.js";
+const p = l(
+  function({ cardBackground: s, children: n, className: r, ...t }, o) {
+    return /* @__PURE__ */ a.jsxs("div", { className: i("relative w-full", r), ref: o, ...t, children: [
+      s && /* @__PURE__ */ a.jsx(
+        c,
+        {
+          ...s,
+          className: i("absolute inset-0 z-0", s.className)
+        }
+      ),
+      /* @__PURE__ */ a.jsx("div", { className: "relative z-10 flex flex-col w-full overflow-y-auto", children: n })
+    ] });
+  }
+), u = d(p);
+u.displayName = "Chat.Viewport";
+const h = f;
+h.Viewport = u;
+function w(e) {
+  return `${e.senderId}-${e.firstMessage.id}`;
+}
+function C(e, s) {
+  if (e.length === 0) return [];
+  const n = s?.getBurstKey ?? w, r = [];
+  for (const t of e) {
+    const o = r[r.length - 1];
+    if (o && o.senderId === t.senderId) {
+      o.messages.push(t);
+      continue;
+    }
+    r.push({
+      key: n({ senderId: t.senderId, firstMessage: t }),
+      senderId: t.senderId,
+      messages: [t]
+    });
+  }
+  return r;
+}
+function V(e, s) {
+  return m(
+    () => C(e, s),
+    [e, s]
+  );
+}
 export {
-  n as default
+  u as ChatViewport,
+  h as default,
+  C as groupMessagesBySender,
+  V as useChatBursts
 };

package/dist/ChatCard-0GSfoMZZ.js

@@ -0,0 +1,201 @@
+import { j as n } from "./jsx-runtime-GkKLlHH4.js";
+import { Children as C, isValidElement as h, cloneElement as j, memo as d, forwardRef as w } from "react";
+import { c as l } from "./cn-B6yFEsav.js";
+import { c as m } from "./index-BOQuZ0gG.js";
+import b from "./Avatar.es.js";
+import D from "./Link.es.js";
+import S from "./CardBackground.es.js";
+function k(t) {
+  if (typeof t != "function" && typeof t != "object") return;
+  const e = t;
+  return e.displayName ?? e.type?.displayName;
+}
+function z(t) {
+  const e = t.type;
+  return e === c || k(e) === "ChatCard";
+}
+function F(t, e) {
+  return C.map(t, (r) => !h(r) || !z(r) || r.props.direction ? r : j(r, {
+    direction: e
+  }));
+}
+const V = m("relative flex flex-col gap-1 justify-start", {
+  variants: {
+    direction: {
+      left: "items-start",
+      right: "items-end"
+    },
+    withAvatar: {
+      true: "",
+      false: ""
+    }
+  },
+  compoundVariants: [
+    { direction: "left", withAvatar: !0, class: "pl-12" },
+    { direction: "right", withAvatar: !0, class: "pr-12" }
+  ]
+}), $ = m("flex gap-1", {
+  variants: {
+    direction: {
+      left: "flex-row",
+      right: "flex-row-reverse"
+    }
+  }
+});
+function A({
+  direction: t,
+  avatar: e,
+  link: r,
+  children: a,
+  className: s
+}) {
+  const { ref: o, label: i, href: f, onClick: u } = r, g = f ? { href: f } : { onClick: u }, N = F(a, t);
+  return /* @__PURE__ */ n.jsxs(
+    "div",
+    {
+      className: l(
+        V({ direction: t, withAvatar: !0 }),
+        s
+      ),
+      children: [
+        /* @__PURE__ */ n.jsxs("div", { className: $({ direction: t }), children: [
+          /* @__PURE__ */ n.jsx("div", { className: "flex items-end shrink-0 self-end", children: /* @__PURE__ */ n.jsx(b, { ...e, size: e.size ?? "small" }) }),
+          /* @__PURE__ */ n.jsx("div", { className: "flex flex-col gap-2 flex-1 min-w-0", children: N })
+        ] }),
+        /* @__PURE__ */ n.jsx(
+          D,
+          {
+            ref: o,
+            color: "brand",
+            size: "medium",
+            withBackground: !1,
+            ...g,
+            children: i
+          }
+        )
+      ]
+    }
+  );
+}
+const x = d(A);
+x.displayName = "Chat";
+function E(t) {
+  if (!t) return;
+  if (typeof t == "string") return t;
+  const e = String(t.getDate()).padStart(2, "0"), r = String(t.getMonth() + 1).padStart(2, "0"), a = t.getFullYear(), s = String(t.getHours()).padStart(2, "0"), o = String(t.getMinutes()).padStart(2, "0");
+  return `${e}/${r}/${a}, ${s}:${o}`;
+}
+const T = m("relative overflow-hidden flex flex-col rounded-[var(--radius-large)]", {
+  variants: {
+    direction: {
+      left: "[&:last-child]:rounded-bl-none",
+      right: "[&:last-child]:rounded-br-none"
+    }
+  }
+}), M = m("flex flex-col gap-3 relative z-10 p-3"), v = d(function({
+  children: e,
+  className: r,
+  ...a
+}) {
+  return /* @__PURE__ */ n.jsx("div", { className: l("flex flex-col gap-3 ", r), ...a, children: e });
+}), y = d(function({
+  children: e,
+  className: r,
+  ...a
+}) {
+  return /* @__PURE__ */ n.jsx(
+    "p",
+    {
+      className: l(
+        "pyrion-fonts-body-medium text-neutral-primary-default",
+        r
+      ),
+      ...a,
+      children: e
+    }
+  );
+}), p = d(function({
+  date: e,
+  leftSlot: r,
+  actions: a,
+  className: s,
+  ...o
+}) {
+  const i = E(e);
+  return /* @__PURE__ */ n.jsxs(
+    "div",
+    {
+      className: l(
+        "flex items-center pl-3 pr-1 pb-1 relative z-10",
+        s
+      ),
+      ...o,
+      children: [
+        /* @__PURE__ */ n.jsxs("div", { className: "flex items-center gap-1 flex-1 pyrion-fonts-body-small text-neutral-tertiary-default", children: [
+          r,
+          i && /* @__PURE__ */ n.jsx("span", { children: i })
+        ] }),
+        a && /* @__PURE__ */ n.jsx("div", { className: "shrink-0", children: a })
+      ]
+    }
+  );
+});
+function P(t) {
+  if (typeof t != "function" && typeof t != "object") return;
+  const e = t;
+  return e.displayName ?? e.type?.displayName;
+}
+function R(t) {
+  const e = t.type;
+  return e === p || P(e) === "ChatCard.Footer";
+}
+function G(t) {
+  const e = [], r = [];
+  return C.forEach(t, (a) => {
+    if (h(a) && R(a)) {
+      r.push(a);
+      return;
+    }
+    e.push(a);
+  }), { commentContent: e, footers: r };
+}
+const B = w(function({ cardBackground: e, children: r, className: a, direction: s = "left", ...o }, i) {
+  const { commentContent: f, footers: u } = G(r);
+  return /* @__PURE__ */ n.jsxs(
+    "div",
+    {
+      className: l(T({ direction: s }), a),
+      ref: i,
+      ...o,
+      children: [
+        /* @__PURE__ */ n.jsx(
+          S,
+          {
+            color: "neutral",
+            variant: "secondary",
+            ...e,
+            className: l("absolute inset-0 z-0", e?.className)
+          }
+        ),
+        /* @__PURE__ */ n.jsx("div", { className: M(), children: f }),
+        u
+      ]
+    }
+  );
+});
+function H(t) {
+  return /* @__PURE__ */ n.jsx(x, { ...t });
+}
+const c = d(B);
+c.Content = v;
+c.Text = y;
+c.Footer = p;
+c.Participant = H;
+c.displayName = "ChatCard";
+v.displayName = "ChatCard.Content";
+y.displayName = "ChatCard.Text";
+p.displayName = "ChatCard.Footer";
+export {
+  c as C,
+  x as M
+};

package/dist/ChatCard.es.js

@@ -1,167 +1,4 @@
-import { j as r } from "./jsx-runtime-GkKLlHH4.js";
-import { useContext as p, createContext as C, memo as d, forwardRef as v, useMemo as g } from "react";
-import { c as l } from "./cn-B6yFEsav.js";
-import { c as m } from "./index-BOQuZ0gG.js";
-import j from "./Avatar.es.js";
-import y from "./CardBackground.es.js";
-import N from "./Link.es.js";
-const f = C(null);
-function w() {
-  const t = p(f);
-  if (!t)
-    throw new Error("ChatCard must be used inside <ChatCard.Participant>");
-  return t;
-}
-function b(t) {
-  if (!t) return;
-  if (typeof t == "string") return t;
-  const a = String(t.getDate()).padStart(2, "0"), e = String(t.getMonth() + 1).padStart(2, "0"), n = t.getFullYear(), s = String(t.getHours()).padStart(2, "0"), i = String(t.getMinutes()).padStart(2, "0");
-  return `${a}/${e}/${n}, ${s}:${i}`;
-}
-const S = m("relative flex flex-col gap-1 justify-start", {
-  variants: {
-    direction: {
-      left: "items-start",
-      right: "items-end"
-    },
-    withAvatar: {
-      true: "",
-      false: ""
-    }
-  },
-  compoundVariants: [
-    { direction: "left", withAvatar: !0, class: "pl-12" },
-    { direction: "right", withAvatar: !0, class: "pr-12" }
-  ]
-}), P = m("flex gap-1", {
-  variants: {
-    direction: {
-      left: "flex-row",
-      right: "flex-row-reverse"
-    }
-  }
-}), z = m("relative overflow-hidden flex flex-col rounded-[var(--radius-large)]", {
-  variants: {
-    direction: {
-      left: "[&:last-child]:rounded-bl-none",
-      right: "[&:last-child]:rounded-br-none"
-    }
-  }
-}), V = m("flex flex-col gap-1 relative z-10 px-3 pt-3"), h = d(function({
-  children: a,
-  className: e,
-  ...n
-}) {
-  return /* @__PURE__ */ r.jsx("div", { className: l("flex flex-col gap-2", e), ...n, children: a });
-}), x = d(function({
-  children: a,
-  className: e,
-  ...n
-}) {
-  return /* @__PURE__ */ r.jsx(
-    "p",
-    {
-      className: l(
-        "pyrion-fonts-body-medium text-neutral-primary-default",
-        e
-      ),
-      ...n,
-      children: a
-    }
-  );
-}), u = d(function({
-  date: a,
-  leftSlot: e,
-  actions: n,
-  className: s,
-  ...i
-}) {
-  const o = b(a);
-  return /* @__PURE__ */ r.jsxs(
-    "div",
-    {
-      className: l(
-        "flex items-center pl-3 pr-1 pb-1 relative z-10 min-h-[28px]",
-        s
-      ),
-      ...i,
-      children: [
-        /* @__PURE__ */ r.jsxs("div", { className: "flex items-center gap-1 flex-1 pyrion-fonts-body-small text-neutral-tertiary-default", children: [
-          e,
-          o && /* @__PURE__ */ r.jsx("span", { children: o })
-        ] }),
-        n && /* @__PURE__ */ r.jsx("div", { className: "shrink-0", children: n })
-      ]
-    }
-  );
-}), A = v(function({ cardBackground: a, children: e, className: n, ...s }, i) {
-  const { direction: o } = w();
-  return /* @__PURE__ */ r.jsxs(
-    "div",
-    {
-      className: l(z({ direction: o }), n),
-      ref: i,
-      ...s,
-      children: [
-        /* @__PURE__ */ r.jsx(
-          y,
-          {
-            color: "neutral",
-            variant: "secondary",
-            ...a,
-            className: l("absolute inset-0 z-0", a?.className)
-          }
-        ),
-        /* @__PURE__ */ r.jsx("div", { className: V(), children: e })
-      ]
-    }
-  );
-}), c = d(A);
-function F({
-  direction: t,
-  avatar: a,
-  link: e,
-  children: n,
-  className: s
-}) {
-  const i = g(
-    () => ({ direction: t, avatar: a, link: e }),
-    [t, a, e]
-  ), o = e.href ? { href: e.href } : { onClick: e.onClick };
-  return /* @__PURE__ */ r.jsx(f.Provider, { value: i, children: /* @__PURE__ */ r.jsxs(
-    "div",
-    {
-      className: l(
-        S({ direction: t, withAvatar: !0 }),
-        s
-      ),
-      children: [
-        /* @__PURE__ */ r.jsxs("div", { className: P({ direction: t }), children: [
-          /* @__PURE__ */ r.jsx("div", { className: "flex items-end shrink-0 self-end", children: /* @__PURE__ */ r.jsx(j, { ...a, size: a.size ?? "small" }) }),
-          /* @__PURE__ */ r.jsx("div", { className: "flex flex-col gap-2 flex-1 min-w-0", children: n })
-        ] }),
-        /* @__PURE__ */ r.jsx(
-          N,
-          {
-            color: "brand",
-            size: "medium",
-            withBackground: !1,
-            ...o,
-            children: e.label
-          }
-        )
-      ]
-    }
-  ) });
-}
-c.Content = h;
-c.Text = x;
-c.Footer = u;
-c.Participant = F;
-c.displayName = "ChatCard";
-h.displayName = "ChatCard.Content";
-x.displayName = "ChatCard.Text";
-u.displayName = "ChatCard.Footer";
+import { C as f } from "./ChatCard-0GSfoMZZ.js";
 export {
-  c as default
+  f as default
 };

package/dist/Chip.es.js

@@ -4,7 +4,7 @@ import { c as h } from "./index-BOQuZ0gG.js";
 import { c as v } from "./cn-B6yFEsav.js";
 import { i as V } from "./iconUtils-rTOfKDxE.js";
 import { Close as K } from "./Icons/Close.es.js";
-import { A as q } from "./AvatarBase-sKVPLn_O.js";
+import { A as q } from "./AvatarBase-D6H-sXbg.js";
 const Q = {
   small: "h-5 px-2 text-xs prometeo-fonts-body-small",
   medium: "h-8 px-3 text-sm prometeo-fonts-body-medium",

package/dist/ListItem.es.js

@@ -6,7 +6,7 @@ import { memo as p, forwardRef as S, useMemo as g } from "react";
 import { c as u } from "./index-BOQuZ0gG.js";
 import R from "./Divider.es.js";
 import { ChevronDown as B } from "./Icons/ChevronDown.es.js";
-import { A as O } from "./AvatarBase-sKVPLn_O.js";
+import { A as O } from "./AvatarBase-D6H-sXbg.js";
 const _ = {
   size: "small",
   name: "A B"

package/dist/components/Avatar/AvatarAndSubavatar.d.ts

@@ -2,5 +2,5 @@ import { AvatarBaseProps } from './AvatarBase';
 export interface AvatarAndSubavatarProps extends AvatarBaseProps {
     subImageUrl: string;
 }
-declare const AvatarAndSubavatar: import('react').MemoExoticComponent<({ subImageUrl, size, ...props }: AvatarAndSubavatarProps) => import("react/jsx-runtime").JSX.Element>;
+declare const AvatarAndSubavatar: import('react').MemoExoticComponent<({ ref, subImageUrl, size, ...props }: AvatarAndSubavatarProps) => import("react/jsx-runtime").JSX.Element>;
 export default AvatarAndSubavatar;

package/dist/components/Avatar/AvatarBase.d.ts

@@ -1,3 +1,4 @@
+import { Ref } from 'react';
 import { AvatarSize } from './avatarTypes';
 export interface AvatarBaseProps {
     imageUrl?: string;
@@ -6,5 +7,6 @@ export interface AvatarBaseProps {
     className?: string;
     isLoading?: boolean;
     fallbackType?: "initials" | "defaultAvatar";
+    ref?: Ref<HTMLDivElement>;
 }
-export declare function AvatarBase({ imageUrl, size, isLoading, className, name, fallbackType, }: AvatarBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function AvatarBase({ ref, imageUrl, size, isLoading, className, name, fallbackType, }: AvatarBaseProps): import("react/jsx-runtime").JSX.Element;