@memobit/libs 2.1.0 → 3.1.0

package/dist/components/Auth/ChangePasswordModal/ChangePasswordModal2.js

@@ -0,0 +1,138 @@
+import './ChangePasswordModal.css';
+import { Modal as k } from "../../Modal/Modal2.js";
+import { InputPassword as m } from "../../InputPassword/InputPassword2.js";
+import { Toast as T } from "../../Toast/Toast2.js";
+import { useAuth as F } from "../../../hooks/useAuth/useAuth.js";
+/* empty css                    */
+import { useEffect as E, useState as o } from "react";
+import { jsx as e, jsxs as d } from "react/jsx-runtime";
+function U({ isOpen: l, onClose: c }) {
+  const { config: b } = F(), [i, u] = o(""), [n, f] = o(""), [w, p] = o(""), [g, a] = o(""), [r, C] = o(!1), [h, P] = o(null);
+  E(() => {
+    l && (u(""), f(""), p(""), a(""));
+  }, [l]);
+  const y = async () => {
+    if (!i || !n || !w) {
+      a("All fields are required");
+      return;
+    }
+    if (n !== w) {
+      a("New passwords do not match");
+      return;
+    }
+    if (n.length < 8) {
+      a("New password must be at least 8 characters long");
+      return;
+    }
+    C(!0), a("");
+    try {
+      const s = document.cookie.match(/(?:^|;\s*)csrf_token=([^;]+)/), t = s ? decodeURIComponent(s[1]) : null, _ = { "Content-Type": "application/json" };
+      t && (_["X-CSRF-Token"] = t);
+      const N = await fetch(`${b.apiBaseUrl}/auth/changePassword`, {
+        method: "POST",
+        credentials: "include",
+        headers: _,
+        body: JSON.stringify({
+          currentPassword: i,
+          newPassword: n
+        })
+      });
+      if (!N.ok) {
+        const v = await N.json();
+        throw new Error(v.error || "Failed to change password");
+      }
+      P({
+        message: "Password changed successfully!",
+        type: "success"
+      }), setTimeout(() => {
+        c();
+      }, 2e3);
+    } catch (s) {
+      const t = s instanceof Error ? s.message : "Failed to change password";
+      a(t);
+    } finally {
+      C(!1);
+    }
+  }, M = () => {
+    P(null);
+  };
+  return /* @__PURE__ */ d(k, {
+    isOpen: l,
+    onClose: c,
+    title: "Change Password",
+    size: "medium",
+    primary: {
+      text: r ? "Changing..." : "Change Password",
+      onClick: y,
+      icon: "lock",
+      variant: "success",
+      disabled: r
+    },
+    secondary: {
+      text: "Cancel",
+      onClick: c,
+      icon: "clear",
+      variant: "default",
+      disabled: r
+    },
+    children: [/* @__PURE__ */ d("div", {
+      className: "ChangePasswordModal",
+      children: [
+        /* @__PURE__ */ d("div", {
+          className: "ChangePasswordModal__field",
+          children: [/* @__PURE__ */ e("label", {
+            htmlFor: "current-password",
+            className: "ChangePasswordModal__label",
+            children: "Current Password"
+          }), /* @__PURE__ */ e(m, {
+            id: "current-password",
+            value: i,
+            onChange: (s) => u(s),
+            placeholder: "Enter current password",
+            disabled: r,
+            autoFocus: !0
+          })]
+        }),
+        /* @__PURE__ */ d("div", {
+          className: "ChangePasswordModal__field",
+          children: [/* @__PURE__ */ e("label", {
+            htmlFor: "new-password",
+            className: "ChangePasswordModal__label",
+            children: "New Password"
+          }), /* @__PURE__ */ e(m, {
+            id: "new-password",
+            value: n,
+            onChange: (s) => f(s),
+            placeholder: "Enter new password",
+            disabled: r
+          })]
+        }),
+        /* @__PURE__ */ d("div", {
+          className: "ChangePasswordModal__field",
+          children: [/* @__PURE__ */ e("label", {
+            htmlFor: "confirm-password",
+            className: "ChangePasswordModal__label",
+            children: "Confirm New Password"
+          }), /* @__PURE__ */ e(m, {
+            id: "confirm-password",
+            value: w,
+            onChange: (s) => p(s),
+            placeholder: "Confirm new password",
+            disabled: r
+          })]
+        }),
+        g && /* @__PURE__ */ e("div", {
+          className: "ChangePasswordModal__error",
+          children: g
+        })
+      ]
+    }), h && /* @__PURE__ */ e(T, {
+      message: h.message,
+      type: h.type,
+      onClose: M
+    })]
+  });
+}
+export {
+  U as ChangePasswordModal
+};

package/dist/components/Auth/Login/Login.css

@@ -0,0 +1 @@
+.LoginPage{background:var(--body-background);min-height:100vh;padding:var(--spacing-24);justify-content:center;align-items:center;display:flex}.LoginPage__card{width:100%;max-width:400px;padding:var(--spacing-48);background:var(--card-background-color);border:1px solid var(--border-color);border-radius:var(--radius);box-shadow:var(--card-box-shadow)}.LoginPage__title{margin:0 0 var(--spacing-32) 0;font-size:var(--font-size-xxl);text-align:center;color:var(--body-title-color);overflow-wrap:break-word;font-weight:600}@media (width<=400px){.LoginPage__card{padding:var(--spacing-24)}.LoginPage__title{font-size:var(--font-size-xl)}}.LoginPage__form{gap:var(--spacing-16);flex-direction:column;display:flex}.LoginPage__hint{font-size:var(--font-size-sm);color:var(--body-sub-title-color);text-align:center;line-height:var(--line-height-normal);margin:0}.LoginPage__error{padding:var(--spacing-12);color:var(--body-danger-color);border:1px solid var(--body-danger-color);border-radius:var(--radius);font-size:var(--font-size-sm);text-align:center;background:#ff5a651a}

package/dist/components/Auth/Login/Login2.js

@@ -0,0 +1,155 @@
+import './Login.css';
+import { Button as f } from "../../Button/Button2.js";
+import { Checkbox as b } from "../../Checkbox/Checkbox2.js";
+import { InputText as _ } from "../../InputText/InputText2.js";
+import { InputPassword as V } from "../../InputPassword/InputPassword2.js";
+import { Toast as W } from "../../Toast/Toast2.js";
+import { useAuth as Y } from "../../../hooks/useAuth/useAuth.js";
+/* empty css      */
+import { useEffect as L, useState as r } from "react";
+import { Fragment as j, jsx as a, jsxs as c } from "react/jsx-runtime";
+function X({ redirectPath: h = "/" }) {
+  const { login: P, verifyMfa: C, config: S, isAuthenticated: g } = Y(), [x, p] = r("credentials"), [l, E] = r(""), [d, N] = r(""), [y, k] = r(!1), [M, T] = r("totp"), [m, u] = r(""), [w, q] = r(!1), [n, i] = r(""), [o, s] = r(!1), [U, v] = r(!1);
+  L(() => {
+    g && (window.location.href = h);
+  }, [g, h]), L(() => {
+    if (new URLSearchParams(window.location.search).get("session_expired") === "true") {
+      v(!0);
+      const e = window.location.pathname;
+      window.history.replaceState({}, "", e);
+    }
+  }, []);
+  const D = async (e) => {
+    if (e.preventDefault(), i(""), !l || !d) {
+      i("Username and password are required");
+      return;
+    }
+    s(!0);
+    try {
+      const t = await P({
+        username: l,
+        password: d,
+        rememberMe: y
+      });
+      t.mfaRequired && (T(t.method ?? "totp"), u(""), p("mfa"));
+    } catch (t) {
+      i(t instanceof Error ? t.message : "Login failed. Please try again.");
+    } finally {
+      s(!1);
+    }
+  }, F = async (e) => {
+    if (e.preventDefault(), i(""), !m.trim()) {
+      i("Enter the verification code");
+      return;
+    }
+    s(!0);
+    try {
+      await C(m.trim(), w);
+    } catch (t) {
+      i(t instanceof Error ? t.message : "Verification failed. Please try again.");
+    } finally {
+      s(!1);
+    }
+  }, I = () => {
+    p("credentials"), u(""), i("");
+  }, R = M === "email" ? "Enter the code we emailed you. You can also use a recovery code." : "Enter the code from your authenticator app. You can also use a recovery code.";
+  return /* @__PURE__ */ c(j, { children: [/* @__PURE__ */ a("div", {
+    className: "LoginPage",
+    children: /* @__PURE__ */ c("div", {
+      className: "LoginPage__card",
+      children: [/* @__PURE__ */ a("h1", {
+        className: "LoginPage__title",
+        children: S.appName || "Login"
+      }), x === "credentials" ? /* @__PURE__ */ c("form", {
+        onSubmit: D,
+        className: "LoginPage__form",
+        children: [
+          /* @__PURE__ */ a(_, {
+            placeholder: "Username",
+            value: l,
+            onChange: (e) => E(e),
+            required: !0,
+            autoFocus: !0,
+            disabled: o
+          }),
+          /* @__PURE__ */ a(V, {
+            placeholder: "Password",
+            value: d,
+            onChange: (e) => N(e),
+            required: !0,
+            disabled: o
+          }),
+          /* @__PURE__ */ a(b, {
+            checked: y,
+            onChange: (e) => k(e),
+            label: "Keep me logged in",
+            disabled: o
+          }),
+          n && /* @__PURE__ */ a("div", {
+            className: "LoginPage__error",
+            children: n
+          }),
+          /* @__PURE__ */ a(f, {
+            type: "submit",
+            variant: "info",
+            icon: "key",
+            loading: o,
+            fullWidth: !0,
+            children: "Sign In"
+          })
+        ]
+      }) : /* @__PURE__ */ c("form", {
+        onSubmit: F,
+        className: "LoginPage__form",
+        children: [
+          /* @__PURE__ */ a("p", {
+            className: "LoginPage__hint",
+            children: R
+          }),
+          /* @__PURE__ */ a(_, {
+            placeholder: "Verification code",
+            value: m,
+            onChange: (e) => u(e),
+            required: !0,
+            autoFocus: !0,
+            disabled: o
+          }),
+          /* @__PURE__ */ a(b, {
+            checked: w,
+            onChange: (e) => q(e),
+            label: "Trust this device for 90 days",
+            disabled: o
+          }),
+          n && /* @__PURE__ */ a("div", {
+            className: "LoginPage__error",
+            children: n
+          }),
+          /* @__PURE__ */ a(f, {
+            type: "submit",
+            variant: "info",
+            icon: "key",
+            loading: o,
+            fullWidth: !0,
+            children: "Verify"
+          }),
+          /* @__PURE__ */ a(f, {
+            type: "button",
+            variant: "default",
+            icon: "clear",
+            disabled: o,
+            fullWidth: !0,
+            onClick: I,
+            children: "Back"
+          })
+        ]
+      })]
+    })
+  }), U && /* @__PURE__ */ a(W, {
+    message: "Your session has expired. Please log in again.",
+    type: "warning",
+    onClose: () => v(!1)
+  })] });
+}
+export {
+  X as Login
+};

package/dist/components/Auth/MfaSetupModal/MfaSetupModal.css

@@ -0,0 +1 @@
+.MfaSetupModal{gap:var(--spacing-16);flex-direction:column;display:flex}.MfaSetupModal__section{gap:var(--spacing-12);flex-direction:column;display:flex}.MfaSetupModal__hint{font-size:var(--font-size-sm);color:var(--body-sub-title-color);line-height:var(--line-height-normal);margin:0}.MfaSetupModal__hint--muted{font-size:var(--font-size-xs)}.MfaSetupModal__status{font-size:var(--font-size-md);color:var(--body-title-color);margin:0}.MfaSetupModal__secret{padding:var(--spacing-12);border:1px solid var(--border-color);border-radius:var(--radius);background:var(--card-background-color);font-family:monospace;font-size:var(--font-size-xl);letter-spacing:var(--spacing-2);text-align:center;word-break:break-all;-webkit-user-select:all;user-select:all}.MfaSetupModal__qr{padding:var(--spacing-16);border-radius:var(--radius);background:#fff;justify-content:center;display:flex}.MfaSetupModal__qr svg{display:block}.MfaSetupModal__codes{gap:var(--spacing-8);padding:var(--spacing-12);border:1px solid var(--border-color);border-radius:var(--radius);background:var(--card-background-color);font-family:monospace;font-size:var(--font-size-md);text-align:center;-webkit-user-select:all;user-select:all;grid-template-columns:1fr 1fr;margin:0;list-style:none;display:grid}.MfaSetupModal__error{padding:var(--spacing-12);color:var(--body-danger-color);border:1px solid var(--body-danger-color);border-radius:var(--radius);font-size:var(--font-size-sm);text-align:center}

package/dist/components/Auth/MfaSetupModal/MfaSetupModal2.js

@@ -0,0 +1,327 @@
+import './MfaSetupModal.css';
+import { Button as o } from "../../Button/Button2.js";
+import { Modal as Y } from "../../Modal/Modal2.js";
+import { InputText as U } from "../../InputText/InputText2.js";
+import { InputPassword as j } from "../../InputPassword/InputPassword2.js";
+import { Toast as Z } from "../../Toast/Toast2.js";
+import { useAuth as ee } from "../../../hooks/useAuth/useAuth.js";
+import { QRCodeSVG as ae } from "../../../node_modules/qrcode.react/lib/esm/index.js";
+/* empty css              */
+import { useCallback as A, useEffect as te, useState as n } from "react";
+import { Fragment as D, jsx as e, jsxs as s } from "react/jsx-runtime";
+function pe({ isOpen: M, onClose: $ }) {
+  const { config: f } = ee(), [x, i] = n("loading"), [C, I] = n(!1), [_, P] = n(null), [V, z] = n(""), [S, G] = n(""), [p, l] = n(""), [m, d] = n(""), [b, v] = n([]), [k, u] = n(""), [a, N] = n(!1), [g, y] = n(null), c = A(async (t, h) => {
+    const W = document.cookie.match(/(?:^|;\s*)csrf_token=([^;]+)/), E = W ? decodeURIComponent(W[1]) : null, R = { "Content-Type": "application/json" };
+    E && (R["X-CSRF-Token"] = E);
+    const F = await fetch(`${f.apiBaseUrl}${t}`, {
+      method: "POST",
+      credentials: "include",
+      headers: R,
+      body: h ? JSON.stringify(h) : void 0
+    }), B = await F.json().catch(() => ({}));
+    if (!F.ok) throw new Error(B.error || "Request failed");
+    return B;
+  }, [f.apiBaseUrl]), w = A(async () => {
+    i("loading"), u("");
+    try {
+      const t = await (await fetch(`${f.apiBaseUrl}/auth/mfaStatus`, { credentials: "include" })).json();
+      I(!!t.enabled), P(t.method ?? null), i("overview");
+    } catch {
+      u("Could not load MFA status."), i("overview");
+    }
+  }, [f.apiBaseUrl]);
+  te(() => {
+    M && (l(""), d(""), u(""), v([]), w());
+  }, [M, w]);
+  const r = async (t) => {
+    N(!0), u("");
+    try {
+      await t();
+    } catch (h) {
+      u(h instanceof Error ? h.message : "Something went wrong.");
+    } finally {
+      N(!1);
+    }
+  }, q = () => r(async () => {
+    const t = await c("/auth/mfaSetupTotp");
+    z(t.secret || ""), G(t.otpauthUri || ""), l(""), i("totp-setup");
+  }), J = () => r(async () => {
+    const t = await c("/auth/mfaConfirmTotp", { code: p.trim() });
+    v(t.recoveryCodes || []), i("recovery");
+  }), T = () => r(async () => {
+    await c("/auth/mfaEnableEmail"), l(""), i("email-setup");
+  }), L = () => r(async () => {
+    const t = await c("/auth/mfaConfirmEmail", { code: p.trim() });
+    v(t.recoveryCodes || []), i("recovery");
+  }), O = () => r(async () => {
+    await c("/auth/mfaDisable", { password: m }), y({
+      message: "Two-factor authentication disabled.",
+      type: "success"
+    }), d(""), await w();
+  }), Q = () => r(async () => {
+    const t = await c("/auth/mfaRegenRecovery", { password: m });
+    v(t.recoveryCodes || []), d(""), i("recovery");
+  }), X = () => r(async () => {
+    await c("/auth/mfaForgetDevices"), y({
+      message: "All trusted devices have been signed out.",
+      type: "success"
+    });
+  }), H = () => {
+    navigator.clipboard?.writeText(b.join(`
+`)), y({
+      message: "Recovery codes copied.",
+      type: "success"
+    });
+  }, K = V.replace(/(.{4})/g, "$1 ").trim();
+  return /* @__PURE__ */ s(Y, {
+    isOpen: M,
+    onClose: $,
+    title: "Two-factor authentication",
+    titleIcon: "key",
+    size: "medium",
+    children: [/* @__PURE__ */ s("div", {
+      className: "MfaSetupModal",
+      children: [(() => {
+        switch (x) {
+          case "loading":
+            return /* @__PURE__ */ e("p", {
+              className: "MfaSetupModal__hint",
+              children: "Loading…"
+            });
+          case "overview":
+            return /* @__PURE__ */ s("div", {
+              className: "MfaSetupModal__section",
+              children: [/* @__PURE__ */ s("p", {
+                className: "MfaSetupModal__status",
+                children: ["Status: ", /* @__PURE__ */ e("strong", { children: C ? `Enabled (${_ === "email" ? "email codes" : "authenticator app"})` : "Disabled" })]
+              }), C ? /* @__PURE__ */ s(D, { children: [
+                /* @__PURE__ */ e(o, {
+                  variant: "default",
+                  fullWidth: !0,
+                  disabled: a,
+                  onClick: () => i("regen"),
+                  children: "Regenerate recovery codes"
+                }),
+                /* @__PURE__ */ e(o, {
+                  variant: "default",
+                  fullWidth: !0,
+                  disabled: a,
+                  onClick: () => r(X),
+                  children: "Sign out trusted devices"
+                }),
+                /* @__PURE__ */ e(o, {
+                  variant: "danger",
+                  icon: "lock",
+                  fullWidth: !0,
+                  disabled: a,
+                  onClick: () => i("disable"),
+                  children: "Disable two-factor"
+                })
+              ] }) : /* @__PURE__ */ s(D, { children: [
+                /* @__PURE__ */ e("p", {
+                  className: "MfaSetupModal__hint",
+                  children: "Add a second step at sign-in. Choose a method:"
+                }),
+                /* @__PURE__ */ e(o, {
+                  variant: "info",
+                  fullWidth: !0,
+                  disabled: a,
+                  onClick: q,
+                  children: "Set up authenticator app"
+                }),
+                /* @__PURE__ */ e(o, {
+                  variant: "default",
+                  fullWidth: !0,
+                  disabled: a,
+                  onClick: T,
+                  children: "Set up email codes"
+                })
+              ] })]
+            });
+          case "totp-setup":
+            return /* @__PURE__ */ s("div", {
+              className: "MfaSetupModal__section",
+              children: [
+                /* @__PURE__ */ e("p", {
+                  className: "MfaSetupModal__hint",
+                  children: "Scan this with your authenticator app (Google Authenticator, Aegis, 1Password…)."
+                }),
+                S && /* @__PURE__ */ e("div", {
+                  className: "MfaSetupModal__qr",
+                  children: /* @__PURE__ */ e(ae, {
+                    value: S,
+                    size: 192,
+                    marginSize: 2
+                  })
+                }),
+                /* @__PURE__ */ e("p", {
+                  className: "MfaSetupModal__hint MfaSetupModal__hint--muted",
+                  children: "Can’t scan? Choose “Enter a setup key” and type this key (time-based):"
+                }),
+                /* @__PURE__ */ e("div", {
+                  className: "MfaSetupModal__secret",
+                  children: K
+                }),
+                /* @__PURE__ */ e(U, {
+                  placeholder: "6-digit code from the app",
+                  value: p,
+                  onChange: l,
+                  autoFocus: !0,
+                  disabled: a
+                }),
+                /* @__PURE__ */ e(o, {
+                  variant: "info",
+                  icon: "key",
+                  fullWidth: !0,
+                  loading: a,
+                  onClick: J,
+                  children: "Verify & enable"
+                })
+              ]
+            });
+          case "email-setup":
+            return /* @__PURE__ */ s("div", {
+              className: "MfaSetupModal__section",
+              children: [
+                /* @__PURE__ */ e("p", {
+                  className: "MfaSetupModal__hint",
+                  children: "We emailed you a 6-digit code. Enter it below to enable email verification."
+                }),
+                /* @__PURE__ */ e(U, {
+                  placeholder: "6-digit code",
+                  value: p,
+                  onChange: l,
+                  autoFocus: !0,
+                  disabled: a
+                }),
+                /* @__PURE__ */ e(o, {
+                  variant: "info",
+                  icon: "key",
+                  fullWidth: !0,
+                  loading: a,
+                  onClick: L,
+                  children: "Verify & enable"
+                }),
+                /* @__PURE__ */ e(o, {
+                  variant: "default",
+                  fullWidth: !0,
+                  disabled: a,
+                  onClick: T,
+                  children: "Resend code"
+                })
+              ]
+            });
+          case "recovery":
+            return /* @__PURE__ */ s("div", {
+              className: "MfaSetupModal__section",
+              children: [
+                /* @__PURE__ */ s("p", {
+                  className: "MfaSetupModal__hint",
+                  children: [
+                    "Save these one-time recovery codes somewhere safe. Each works once if you lose access to your",
+                    " ",
+                    _ === "email" ? "email" : "authenticator",
+                    ". They are shown only now."
+                  ]
+                }),
+                /* @__PURE__ */ e("ul", {
+                  className: "MfaSetupModal__codes",
+                  children: b.map((t) => /* @__PURE__ */ e("li", { children: t }, t))
+                }),
+                /* @__PURE__ */ e(o, {
+                  variant: "default",
+                  fullWidth: !0,
+                  disabled: a,
+                  onClick: H,
+                  children: "Copy codes"
+                }),
+                /* @__PURE__ */ e(o, {
+                  variant: "success",
+                  fullWidth: !0,
+                  disabled: a,
+                  onClick: w,
+                  children: "I've saved them"
+                })
+              ]
+            });
+          case "disable":
+            return /* @__PURE__ */ s("div", {
+              className: "MfaSetupModal__section",
+              children: [
+                /* @__PURE__ */ e("p", {
+                  className: "MfaSetupModal__hint",
+                  children: "Confirm your password to disable two-factor authentication."
+                }),
+                /* @__PURE__ */ e(j, {
+                  placeholder: "Current password",
+                  value: m,
+                  onChange: d,
+                  autoFocus: !0,
+                  disabled: a
+                }),
+                /* @__PURE__ */ e(o, {
+                  variant: "danger",
+                  icon: "lock",
+                  fullWidth: !0,
+                  loading: a,
+                  onClick: O,
+                  children: "Disable two-factor"
+                }),
+                /* @__PURE__ */ e(o, {
+                  variant: "default",
+                  icon: "clear",
+                  fullWidth: !0,
+                  disabled: a,
+                  onClick: () => i("overview"),
+                  children: "Cancel"
+                })
+              ]
+            });
+          case "regen":
+            return /* @__PURE__ */ s("div", {
+              className: "MfaSetupModal__section",
+              children: [
+                /* @__PURE__ */ e("p", {
+                  className: "MfaSetupModal__hint",
+                  children: "Confirm your password to generate a new set of recovery codes. The old codes stop working."
+                }),
+                /* @__PURE__ */ e(j, {
+                  placeholder: "Current password",
+                  value: m,
+                  onChange: d,
+                  autoFocus: !0,
+                  disabled: a
+                }),
+                /* @__PURE__ */ e(o, {
+                  variant: "info",
+                  icon: "key",
+                  fullWidth: !0,
+                  loading: a,
+                  onClick: Q,
+                  children: "Generate new codes"
+                }),
+                /* @__PURE__ */ e(o, {
+                  variant: "default",
+                  icon: "clear",
+                  fullWidth: !0,
+                  disabled: a,
+                  onClick: () => i("overview"),
+                  children: "Cancel"
+                })
+              ]
+            });
+        }
+      })(), k && /* @__PURE__ */ e("div", {
+        className: "MfaSetupModal__error",
+        children: k
+      })]
+    }), g && /* @__PURE__ */ e(Z, {
+      message: g.message,
+      type: g.type,
+      onClose: () => y(null)
+    })]
+  });
+}
+export {
+  pe as MfaSetupModal
+};

package/dist/components/AvatarInitials/AvatarInitials.css

@@ -0,0 +1 @@
+.avatar-initials{font-family:var(--font-family,sans-serif);font-weight:var(--font-weight-semibold);line-height:var(--line-height-none);-webkit-user-select:none;user-select:none;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.avatar-initials--small{width:28px;height:28px;font-size:var(--font-size-xxs)}.avatar-initials--medium{width:40px;height:40px;font-size:var(--font-size-sm)}.avatar-initials--large{width:56px;height:56px;font-size:var(--font-size-md)}.avatar-initials--rounded{border-radius:var(--radius-full)}.avatar-initials--squared{border-radius:var(--radius-sm)}.avatar-initials__text{letter-spacing:.04em;display:block}