@blocklet/ui-react 3.4.6 → 3.4.8

package/lib/UserCenter/components/user-info/link-preview-input.js

@@ -1,6 +1,6 @@
 import { jsx as e, jsxs as f } from "react/jsx-runtime";
 import { useState as I, useMemo as C } from "react";
-import { styled as k, Box as p, Typography as y, IconButton as D, Button as U, useTheme as S, FormControl as B, TextField as F } from "@mui/material";
+import { Box as p, Typography as y, IconButton as k, Button as D, useTheme as U, styled as S, FormControl as B, TextField as F } from "@mui/material";
 import { Remove as T, Add as _ } from "@mui/icons-material";
 import { translate as z } from "@arcblock/ux/lib/Locale/util";
 import { useMemoizedFn as E } from "ahooks";
@@ -83,14 +83,14 @@ function q({ links: t = [], onChange: s }) {
               },
               children: [
                 /* @__PURE__ */ e($, { value: o, onChange: (c) => b(n, c), errorMsg: a }),
-                /* @__PURE__ */ e(D, { onClick: () => L(n), children: /* @__PURE__ */ e(T, { sx: { color: "text.secondary" } }) })
+                /* @__PURE__ */ e(k, { onClick: () => L(n), children: /* @__PURE__ */ e(T, { sx: { color: "text.secondary" } }) })
               ]
             },
             n
           );
         }),
         t.length < g ? /* @__PURE__ */ f(
-          U,
+          D,
           {
             fullWidth: !0,
             variant: "outlined",
@@ -122,7 +122,7 @@ function q({ links: t = [], onChange: s }) {
   );
 }
 function G({ link: t }) {
-  const l = S().palette.mode === "dark";
+  const l = U().palette.mode === "dark";
   if (!t)
     return null;
   const { icon: r, options: i } = W(t) || {};
@@ -174,7 +174,7 @@ function ut({
     }
   );
 }
-const H = k("span")`
+const H = S("span")`
   flex: 1;
   white-space: nowrap;
   overflow: hidden;

package/lib/UserCenter/components/user-info/metadata.js

@@ -1,7 +1,7 @@
 import { jsxs as y, Fragment as B, jsx as t } from "react/jsx-runtime";
-import { memo as te, createElement as re, useState as R, useRef as ie, useEffect as ae, useMemo as D } from "react";
+import { useState as R, useRef as te, useEffect as re, useMemo as D, memo as ie, createElement as ae } from "react";
 import { Icon as le } from "@iconify/react";
-import { Backdrop as de, Box as m, useMediaQuery as ce, SwipeableDrawer as pe, Typography as L, Tooltip as se } from "@mui/material";
+import { useMediaQuery as de, SwipeableDrawer as ce, Box as m, Typography as L, Tooltip as se, Backdrop as pe } from "@mui/material";
 import me from "@emotion/styled";
 import N from "@arcblock/ux/lib/Button";
 import F, { detectCountryFromPhone as T, getCountryNameByCountry as ue, validatePhoneNumber as he, getDialCodeByCountry as fe } from "@arcblock/ux/lib/PhoneInput";
@@ -29,12 +29,12 @@ import Se from "./address.js";
 const E = {
   width: 20,
   height: 20
-}, H = 200, Q = te(function({
+}, H = 200, Q = ie(function({
   ref: r,
   ...I
 }) {
-  return /* @__PURE__ */ re(
-    de,
+  return /* @__PURE__ */ ae(
+    pe,
     {
       ref: r,
       component: "div",
@@ -50,12 +50,12 @@ const E = {
 });
 Q.displayName = "BackdropWrap";
 function mo({
-  isMyself: p,
+  isMyself: s,
   user: r,
   onSave: I,
   isMobile: x
 }) {
-  const [U, P] = R(!1), [Y, C] = R(!1), _ = ie(null), q = we(), b = ce("(max-width:640px)") || q.mobile.any, c = w({
+  const [U, P] = R(!1), [Y, C] = R(!1), _ = te(null), q = we(), b = de("(max-width:640px)") || q.mobile.any, c = w({
     email: "",
     phone: ""
   }), u = w({
@@ -66,7 +66,7 @@ function mo({
     line2: "",
     postalCode: ""
   });
-  ae(() => {
+  re(() => {
     b || C(!1);
   }, [b]);
   const j = k(() => r?.phoneVerified ?? !1, [r?.phoneVerified]), A = k(() => r?.emailVerified ?? !1, [r?.emailVerified]), { locale: z } = ve(), d = be((o, n = {}) => ge(Ve, o, z, "en", n)), a = w(
@@ -108,10 +108,10 @@ function mo({
       country: h,
       phone: ""
     };
-  }, [a.phone, r?.phone, h]), s = (o, n) => {
+  }, [a.phone, r?.phone, h]), p = (o, n) => {
     a[n] = o;
   }, K = (o, n) => {
-    l[o] = n, o === "city" && s(n, "location"), o === "postalCode" ? u.postalCode = n && !$(n, "any") ? d("profile.address.invalidPostalCode") : "" : u[o] = "";
+    l[o] = n, o === "city" && p(n, "location"), o === "postalCode" ? u.postalCode = n && !$(n, "any") ? d("profile.address.invalidPostalCode") : "" : u[o] = "";
   }, S = () => {
     b ? C(!0) : P(!0);
   }, O = () => {
@@ -147,7 +147,7 @@ function mo({
         favicon: e
       };
     });
-    s(n, "links");
+    p(n, "links");
   }, ee = () => {
     if (Object.keys(a).forEach((n) => {
       const e = n, i = a[e];
@@ -176,7 +176,7 @@ function mo({
           g,
           {
             value: a.bio ?? "",
-            onChange: (e) => s(e, "bio"),
+            onChange: (e) => p(e, "bio"),
             editable: o,
             placeholder: "Bio",
             component: "textarea",
@@ -189,7 +189,7 @@ function mo({
             }
           }
         ),
-        !o && p ? /* @__PURE__ */ t(
+        !o && s ? /* @__PURE__ */ t(
           N,
           {
             size: x ? "small" : "large",
@@ -205,7 +205,7 @@ function mo({
             children: d("profile.editProfile")
           }
         ) : null,
-        o && p && J ? /* @__PURE__ */ t(
+        o && s && J ? /* @__PURE__ */ t(
           Se,
           {
             address: l,
@@ -217,11 +217,11 @@ function mo({
           g,
           {
             value: a.location ?? r?.address?.city ?? "",
-            onChange: (e) => s(e, "location"),
+            onChange: (e) => p(e, "location"),
             editable: o,
             placeholder: "Location",
             label: d("profile.location"),
-            tooltip: p && (l.line1 || l.line2) ? /* @__PURE__ */ t(B, { children: ["line1", "line2"].map((e) => l[e] ? /* @__PURE__ */ y(m, { children: [
+            tooltip: s && (l.line1 || l.line2) ? /* @__PURE__ */ t(B, { children: ["line1", "line2"].map((e) => l[e] ? /* @__PURE__ */ y(m, { children: [
               /* @__PURE__ */ t(
                 L,
                 {
@@ -247,7 +247,7 @@ function mo({
           g,
           {
             value: a.timezone || "",
-            onChange: (e) => s(e, "timezone"),
+            onChange: (e) => p(e, "timezone"),
             editable: o,
             placeholder: "timezone",
             icon: /* @__PURE__ */ t(Pe, { ...E }),
@@ -257,7 +257,7 @@ function mo({
               Ae,
               {
                 value: a.timezone ?? "",
-                onChange: (e) => s(e, "timezone"),
+                onChange: (e) => p(e, "timezone"),
                 disabled: !o,
                 mode: n
               }
@@ -269,7 +269,7 @@ function mo({
           {
             value: a.email ?? r?.email ?? "",
             editable: o,
-            hidePreview: !p,
+            hidePreview: !s,
             disabled: r?.sourceProvider === M.EMAIL,
             canEdit: !A,
             verified: A,
@@ -289,9 +289,9 @@ function mo({
                 }
               ) }) : null
             ] }),
-            onChange: (e) => s(e, "email"),
+            onChange: (e) => p(e, "email"),
             errorMsg: c.email,
-            renderValue: (e) => p ? /* @__PURE__ */ t(
+            renderValue: (e) => s ? /* @__PURE__ */ t(
               "a",
               {
                 href: `mailto:${e}`,
@@ -313,29 +313,31 @@ function mo({
           {
             value: V.phone,
             editable: o,
-            hidePreview: !p,
+            hidePreview: !s,
             canEdit: !j,
             verified: j,
             placeholder: "Phone",
             icon: /* @__PURE__ */ t(Ie, { ...E }),
-            onChange: (e) => s(e, "phone"),
+            onChange: (e) => p(e, "phone"),
             label: d("profile.phone"),
-            renderValue: () => p ? /* @__PURE__ */ t(F, { value: V, preview: !0 }) : null,
+            renderValue: () => s ? /* @__PURE__ */ t(F, { value: V, preview: !0 }) : null,
             children: /* @__PURE__ */ t(
               F,
               {
                 variant: "outlined",
                 className: "editable-field",
-                InputProps: {
-                  sx: { backgroundColor: "transparent" },
-                  placeholder: "Phone"
+                slotProps: {
+                  input: {
+                    sx: { backgroundColor: "transparent" },
+                    placeholder: "Phone"
+                  }
                 },
                 value: V,
                 error: !!c.phone,
                 helperText: c.phone,
                 sx: xe(Be, c.phone ? {} : Le),
                 onChange: (e) => {
-                  he(e.phone, e.country) ? c.phone = "" : c.phone = d("profile.phoneInvalid"), s(
+                  he(e.phone, e.country) ? c.phone = "" : c.phone = d("profile.phoneInvalid"), p(
                     {
                       country: e.country,
                       phoneNumber: e.phone
@@ -348,7 +350,7 @@ function mo({
           }
         ),
         /* @__PURE__ */ t(Ne, { editable: o, links: X, onChange: Z }),
-        o && p ? /* @__PURE__ */ y(
+        o && s ? /* @__PURE__ */ y(
           m,
           {
             style: { width: "100%" },
@@ -397,7 +399,7 @@ function mo({
   return /* @__PURE__ */ y(B, { children: [
     W(U),
     b && /* @__PURE__ */ y(
-      pe,
+      ce,
       {
         sx: {
           zIndex: 9999

package/lib/UserCenter/components/user-info/user-basic-info.js

@@ -6,19 +6,19 @@ import { useMemoizedFn as V } from "ahooks";
 import { translate as Y } from "@arcblock/ux/lib/Locale/util";
 import { useLocaleContext as $ } from "@arcblock/ux/lib/Locale/context";
 import q from "lodash/noop";
-import { useState as C, useEffect as j } from "react";
+import { lazy as G, useState as C, useEffect as j } from "react";
 import I from "@arcblock/ux/lib/Toast";
-import { parseURL as G, joinURL as H } from "ufo";
-import { KeyboardArrowUp as J, KeyboardArrowDown as X } from "@mui/icons-material";
-import { getBlockletSDK as Z } from "@blocklet/js-sdk";
-import { translations as _ } from "../../libs/locales.js";
+import { parseURL as H, joinURL as J } from "ufo";
+import { KeyboardArrowUp as X, KeyboardArrowDown as Z } from "@mui/icons-material";
+import { getBlockletSDK as _ } from "@blocklet/js-sdk";
+import { translations as P } from "../../libs/locales.js";
 import { formatAxiosError as R } from "../../libs/utils.js";
-import { currentTimezone as P, getStatusDuration as M, isValidUrl as tt, isDuplicateUrl as rt } from "./utils.js";
-import et from "./switch-role.js";
-import ot from "./metadata.js";
+import { currentTimezone as M, getStatusDuration as tt, isValidUrl as rt, isDuplicateUrl as et } from "./utils.js";
+import ot from "./switch-role.js";
 import at from "./user-status.js";
 import nt from "./user-info.js";
 import it from "./social-actions/index.js";
+const lt = G(() => import("./metadata.js"));
 function kt({
   user: t,
   isMyself: o = !0,
@@ -31,7 +31,7 @@ function kt({
   isShowSocialActions: D = !1,
   ...m
 }) {
-  const h = Z(), { locale: x } = $(), [g, v] = C(void 0), w = V((i, e = {}) => Y(_, i, x, "en", e)), [d, S] = C(!a || c);
+  const h = _(), { locale: x } = $(), [g, v] = C(void 0), w = V((i, e = {}) => Y(P, i, x, "en", e)), [d, S] = C(!a || c);
   j(() => {
     v(t?.metadata?.status);
   }, [t]), j(() => {
@@ -41,7 +41,7 @@ function kt({
     if (o)
       try {
         if (i) {
-          const e = M(i);
+          const e = tt(i);
           i.dateRange = e.length > 0 ? e : g?.dateRange ?? [];
         }
         v(i), await h.user.saveProfile({
@@ -62,10 +62,10 @@ function kt({
     const { metadata: e, address: E } = i;
     try {
       const p = e?.links?.map((n, U) => {
-        if (!n.url || !tt(n.url) || U > 0 && e.links?.slice(0, U)?.some((K) => rt(K.url, n.url)))
+        if (!n.url || !rt(n.url) || U > 0 && e.links?.slice(0, U)?.some((K) => et(K.url, n.url)))
           return null;
         try {
-          return G(n.url).protocol || (n.url = H("https://", n.url)), n;
+          return H(n.url).protocol || (n.url = J("https://", n.url)), n;
         } catch {
           return console.error("Invalid URL:", n.url), null;
         }
@@ -146,7 +146,7 @@ function kt({
                         isMobile: a,
                         size: m.size || (a ? 64 : 100),
                         isMyself: o,
-                        timezone: t?.metadata?.timezone || P,
+                        timezone: t?.metadata?.timezone || M,
                         status: g,
                         onChange: L
                       }
@@ -188,7 +188,7 @@ function kt({
                               children: t?.fullName
                             }
                           ),
-                          o ? /* @__PURE__ */ r(et, { user: t, switchPassport: k }) : null
+                          o ? /* @__PURE__ */ r(ot, { user: t, switchPassport: k }) : null
                         ]
                       }
                     ),
@@ -211,7 +211,7 @@ function kt({
           }
         ),
         !o && D ? /* @__PURE__ */ r(s, { sx: { mt: 2 }, children: /* @__PURE__ */ r(it, { user: t }) }) : null,
-        /* @__PURE__ */ r(ot, { isMobile: a, isMyself: o, user: t, onSave: B }),
+        /* @__PURE__ */ r(lt, { isMobile: a, isMyself: o, user: t, onSave: B }),
         o ? /* @__PURE__ */ l(N, { children: [
           /* @__PURE__ */ r(T, { sx: { my: a ? 1 : 3 } }),
           a && !c ? /* @__PURE__ */ r(
@@ -234,7 +234,7 @@ function kt({
                       opacity: 0.8
                     }
                   },
-                  children: d ? /* @__PURE__ */ r(J, {}) : /* @__PURE__ */ r(X, {})
+                  children: d ? /* @__PURE__ */ r(X, {}) : /* @__PURE__ */ r(Z, {})
                 }
               )
             }

package/lib/common/header-addons.js

@@ -1,59 +1,51 @@
-import { jsx as i, Fragment as b } from "react/jsx-runtime";
+import { jsx as s, Fragment as b } from "react/jsx-runtime";
 import "iconify-icon";
-import a from "prop-types";
-import { use as L, createElement as v } from "react";
-import { SessionContext as N } from "@arcblock/did-connect-react/lib/Session";
-import T from "@arcblock/ux/lib/Config/theme-mode-toggle";
-import { useLocaleContext as k } from "@arcblock/ux/lib/Locale/context";
+import r from "prop-types";
+import { use as L, createElement as k } from "react";
+import { SessionContext as w } from "@arcblock/did-connect-react/lib/Session";
+import N from "@arcblock/ux/lib/Config/theme-mode-toggle";
+import { useLocaleContext as T } from "@arcblock/ux/lib/Locale/context";
 import C from "@arcblock/ux/lib/Locale/selector";
-import S from "@arcblock/ux/lib/SessionBlocklet";
-import D from "@arcblock/ux/lib/SessionUser";
-import { WELLKNOWN_BLOCKLET_ADMIN_PATH as E } from "@abtnode/constant";
-import { getLocalizedNavigation as M, filterNavByRole as O } from "../blocklets.js";
-import { SessionManagerProps as R } from "../types.js";
-import W from "./domain-warning.js";
-import P from "./notification-addon.js";
-import B from "./org-switch/index.js";
-const _ = () => !!(window?.blocklet?.navigation ?? []).find((o) => o.id === "/userCenter/notification"), j = (n) => {
-  const { settings: o = {} } = n ?? window?.blocklet ?? {};
-  return o?.org?.enabled || !1;
-}, x = () => {
-  const { pathname: n = "" } = window.location || {};
-  return n.startsWith(E);
-};
+import R from "@arcblock/ux/lib/SessionBlocklet";
+import S from "@arcblock/ux/lib/SessionUser";
+import { getLocalizedNavigation as M, filterNavByRole as B } from "../blocklets.js";
+import { SessionManagerProps as D } from "../types.js";
+import P from "./domain-warning.js";
+import j from "./notification-addon.js";
+const x = () => !!(window?.blocklet?.navigation ?? []).find((o) => o.id === "/userCenter/notification");
 function z({
-  formattedBlocklet: n,
+  formattedBlocklet: l,
   addons: o = null,
   showDomainWarningDialog: m = !0,
   sessionManagerProps: u = { showRole: !0 }
 }) {
-  const e = L(N), { locale: t, languages: p, defaultLocale: g } = k() || {}, { enableConnect: d = !0, enableLocale: h = !0 } = n, y = !!e?.session?.user;
-  let l = M({
-    navigation: n?.navigation?.sessionManager,
-    locale: t,
+  const n = L(w), { locale: i, languages: p, defaultLocale: g } = T() || {}, { enableConnect: d = !0, enableLocale: h = !0 } = l, y = !!n?.session?.user;
+  let a = M({
+    navigation: l?.navigation?.sessionManager,
+    locale: i,
     defaultLocale: g
   }) || [];
-  l = O(l, e?.session?.user?.role);
+  a = B(a, n?.session?.user?.role);
   const c = (() => {
     if (o && typeof o != "function")
       return Array.isArray(o) ? o : [o];
-    let s = [];
-    if (_() && s.push(/* @__PURE__ */ i(P, { session: e.session }, "notification-addon")), h && t && p.length > 1 && s.push(/* @__PURE__ */ i(C, { showText: !1 }, "locale-selector")), s.push(/* @__PURE__ */ i(T, {}, "theme-mode-toggle")), d && e) {
+    let e = [];
+    if (x() && e.push(/* @__PURE__ */ s(j, { session: n.session }, "notification-addon")), h && i && p.length > 1 && e.push(/* @__PURE__ */ s(C, { showText: !1 }, "locale-selector")), e.push(/* @__PURE__ */ s(N, {}, "theme-mode-toggle")), d && n) {
       const f = [];
-      y && (l ? l.slice(0, 5) : []).forEach((r) => {
+      y && (a ? a.slice(0, 5) : []).forEach((t) => {
         f.push({
-          label: r.title,
-          icon: r.icon ? /* @__PURE__ */ i("iconify-icon", { icon: r.icon, height: 24, style: { marginRight: 8 } }) : null,
+          label: t.title,
+          icon: t.icon ? /* @__PURE__ */ s("iconify-icon", { icon: t.icon, height: 24, style: { marginRight: 8 } }) : null,
           component: "a",
-          href: r.link,
-          key: r.link
+          href: t.link,
+          key: t.link
         });
-      }), s.push(/* @__PURE__ */ i(S, { session: e.session, locale: t }, "session-blocklet")), s.push(
-        /* @__PURE__ */ i(
-          D,
+      }), e.push(/* @__PURE__ */ s(R, { session: n.session, locale: i }, "session-blocklet")), e.push(
+        /* @__PURE__ */ s(
+          S,
           {
-            session: e.session,
-            locale: t,
+            session: n.session,
+            locale: i,
             menu: f,
             showRole: !0,
             ...u
@@ -62,21 +54,21 @@ function z({
         )
       );
     }
-    return !x() && j(n) && e?.session?.user && s.unshift(/* @__PURE__ */ i(B, { session: e.session, locale: t }, "orgs-switch")), typeof o == "function" && (s = o(s) || []), s;
-  })(), w = Array.isArray(c) ? c : [c], A = [
-    m ? /* @__PURE__ */ i(W, { session: e?.session, locale: t }) : null,
-    ...w
+    return typeof o == "function" && (e = o(e) || []), e;
+  })(), v = Array.isArray(c) ? c : [c], A = [
+    m ? /* @__PURE__ */ s(P, { session: n?.session, locale: i }) : null,
+    ...v
   ].filter(Boolean);
-  return v(b, null, ...A);
+  return k(b, null, ...A);
 }
 z.propTypes = {
-  formattedBlocklet: a.object.isRequired,
+  formattedBlocklet: r.object.isRequired,
   // 需要考虑 定制的 addons 与内置的 连接钱包/选择语言 addons 共存的情况
   // - PropTypes.func: 可以把自定义 addons 插在 session-manager 或 locale-selector (如果存在的话) 前/中/后
   // - PropTypes.node: 将 addons 原样传给 UX Header 组件
-  addons: a.oneOfType([a.func, a.node]),
-  sessionManagerProps: R,
-  showDomainWarningDialog: a.bool
+  addons: r.oneOfType([r.func, r.node]),
+  sessionManagerProps: D,
+  showDomainWarningDialog: r.bool
 };
 export {
   z as default

package/lib/common/org-switch/avatar-uploader.d.ts

@@ -0,0 +1,30 @@
+import { default as PropTypes } from 'prop-types';
+declare function AvatarUploader({ org, size, teamDid: teamDidProp, prefix, locale, headers, onChange, onError, editable, }: {
+    org?: null | undefined;
+    size?: number | undefined;
+    teamDid?: string | undefined;
+    prefix?: string | undefined;
+    locale?: string | undefined;
+    headers?: ((...args: any[]) => void) | undefined;
+    onChange?: ((...args: any[]) => void) | undefined;
+    onError?: ((...args: any[]) => void) | undefined;
+    editable?: boolean | undefined;
+}): import("react/jsx-runtime").JSX.Element;
+declare namespace AvatarUploader {
+    namespace propTypes {
+        let org: PropTypes.Requireable<PropTypes.InferProps<{
+            id: PropTypes.Requireable<string>;
+            name: PropTypes.Requireable<string>;
+            avatar: PropTypes.Requireable<string>;
+        }>>;
+        let size: PropTypes.Requireable<number>;
+        let teamDid: PropTypes.Requireable<string>;
+        let prefix: PropTypes.Requireable<string>;
+        let headers: PropTypes.Requireable<(...args: any[]) => any>;
+        let onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        let onError: PropTypes.Requireable<(...args: any[]) => any>;
+        let editable: PropTypes.Requireable<boolean>;
+        let locale: PropTypes.Requireable<string>;
+    }
+}
+export default AvatarUploader;

package/lib/common/org-switch/avatar-uploader.js

@@ -0,0 +1,170 @@
+import { jsxs as E, jsx as n, Fragment as k } from "react/jsx-runtime";
+import { lazy as M, useRef as D, useState as I, useMemo as g, Suspense as T } from "react";
+import v from "lodash/noop";
+import e from "prop-types";
+import { Box as b, CircularProgress as X } from "@mui/material";
+import { styled as Z } from "@arcblock/ux/lib/Theme";
+import { joinURL as y } from "ufo";
+import { useMemoizedFn as l } from "ahooks";
+import $ from "@mui/icons-material/CameraAlt";
+import { translate as K } from "@arcblock/ux/lib/Locale/util";
+import q from "@arcblock/ux/lib/Img";
+import B from "./locales.js";
+const H = M(() => import("@blocklet/uploader").then((t) => ({ default: t.Uploader }))), P = "/blocklet", V = [".png", ".jpg", ".jpeg", ".webp", ".bmp", ".ico"], G = 5 * 1024 * 1024, A = 256, S = 3;
+function J(t, o, a) {
+  return y(t, P, o, "orgs", "avatar", a);
+}
+function Q(t, o) {
+  return y(t, P, o, "orgs", "avatar", "upload");
+}
+function Y({
+  org: t = null,
+  size: o = 80,
+  teamDid: a = "",
+  prefix: i = "/.well-known/service",
+  locale: U = "en",
+  headers: R = v,
+  onChange: O = v,
+  onError: x = v,
+  editable: p = !0
+}) {
+  const C = l((r, h = {}) => K(B, r, U, "en", h)), u = D(null), [d, c] = I(!1), [m, F] = I(""), s = g(() => a || (typeof window < "u" ? window.blocklet?.did : ""), [a]), f = g(() => s ? Q(i, s) : null, [i, s]), _ = p && !!f, z = l(() => {
+    _ && !d && u.current?.open();
+  }), L = l((r) => {
+    u.current?.close(), c(!1);
+    const { avatarPath: h } = r.data;
+    F(r.uploadURL), O(h);
+  }), N = l(() => {
+    c(!0);
+  }), W = l((r) => {
+    c(!1), console.error("Avatar upload failed:", r), x(r);
+  }), w = g(() => {
+    if (m)
+      return m;
+    const r = t?.avatar;
+    return r ? t?.id ? J(i, s, r) : r.startsWith("http://") || r.startsWith("https://") || r.startsWith("/") ? r : y(i, r) : null;
+  }, [m, t?.avatar, t?.id, i, s]), j = t?.name || "";
+  return /* @__PURE__ */ E(tt, { $size: o, $editable: p, $uploading: d, onClick: z, children: [
+    f && /* @__PURE__ */ n(T, { fallback: null, children: /* @__PURE__ */ n(
+      H,
+      {
+        ref: u,
+        locale: U,
+        popup: !0,
+        onUploadFinish: L,
+        onUploadStart: N,
+        onError: W,
+        plugins: ["ImageEditor"],
+        installerProps: { disabled: !0 },
+        apiPathProps: {
+          uploader: f,
+          disableMediaKitPrefix: !0,
+          disableMediaKitStatus: !0
+        },
+        coreProps: {
+          restrictions: {
+            allowedFileExts: V,
+            maxFileSize: G,
+            maxNumberOfFiles: 1
+          }
+        },
+        dashboardProps: {
+          autoOpen: "imageEditor"
+        },
+        imageEditorProps: {
+          actions: {
+            revert: !0,
+            rotate: !0,
+            granularRotate: !0,
+            flip: !0,
+            zoomIn: !0,
+            zoomOut: !0,
+            cropSquare: !1,
+            cropWidescreen: !1,
+            cropWidescreenVertical: !1
+          },
+          cropperOptions: {
+            autoCrop: !0,
+            autoCropArea: 1,
+            aspectRatio: 1,
+            initialAspectRatio: 1,
+            croppedCanvasOptions: {
+              minWidth: A,
+              minHeight: A
+            }
+          }
+        },
+        tusProps: {
+          headers: R
+        }
+      }
+    ) }),
+    /* @__PURE__ */ n(
+      q,
+      {
+        src: w || "",
+        alt: j,
+        width: o,
+        height: o,
+        ratio: 1,
+        size: "cover",
+        position: "center",
+        lazy: !1,
+        style: {
+          borderRadius: "50%",
+          overflow: "hidden"
+        }
+      },
+      w || "no-avatar"
+    ),
+    p && /* @__PURE__ */ n(b, { className: "upload-overlay", children: d ? /* @__PURE__ */ n(X, { size: o / S, sx: { color: "white" } }) : /* @__PURE__ */ E(k, { children: [
+      /* @__PURE__ */ n($, { sx: { fontSize: o / S, color: "white" } }),
+      /* @__PURE__ */ n(b, { component: "span", sx: { fontSize: 12, color: "white" }, children: C("upload") })
+    ] }) })
+  ] });
+}
+Y.propTypes = {
+  org: e.shape({
+    id: e.string,
+    name: e.string,
+    avatar: e.string
+  }),
+  size: e.number,
+  teamDid: e.string,
+  prefix: e.string,
+  headers: e.func,
+  onChange: e.func,
+  onError: e.func,
+  editable: e.bool,
+  locale: e.string
+};
+const tt = Z(b, {
+  shouldForwardProp: (t) => !["$size", "$editable", "$uploading"].includes(t)
+})(({ $size: t, $editable: o, $uploading: a }) => ({
+  position: "relative",
+  width: t,
+  height: t,
+  borderRadius: "50%",
+  overflow: "hidden",
+  cursor: o && !a ? "pointer" : "default",
+  ".upload-overlay": {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    opacity: a ? 1 : 0,
+    transition: "opacity 0.2s ease-in-out"
+  },
+  "&:hover .upload-overlay": {
+    opacity: o ? 1 : 0
+  }
+}));
+export {
+  Y as default
+};