@blocklet/ui-react 3.0.9 → 3.0.10

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

@@ -1,61 +1,60 @@
-import { jsxs as x, Fragment as A, jsx as a } from "react/jsx-runtime";
-import { lazy as P, memo as mo, createElement as ho, useState as H, useRef as fo, useEffect as so, useMemo as Q } from "react";
-import { Icon as yo } from "@iconify/react";
-import { Backdrop as xo, Box as f, useMediaQuery as bo, SwipeableDrawer as uo, Typography as S, Tooltip as go } from "@mui/material";
-import Co from "@emotion/styled";
-import O from "@arcblock/ux/lib/Button";
-import U, { detectCountryFromPhone as Y, getCountryNameByCountry as vo, validatePhoneNumber as wo, getDialCodeByCountry as ko } from "@arcblock/ux/lib/PhoneInput";
-import k from "lodash/cloneDeep";
-import Eo from "lodash/omit";
-import { mergeSx as Io } from "@arcblock/ux/lib/Util/style";
-import { LOGIN_PROVIDER as _ } from "@arcblock/ux/lib/Util/constant";
-import { useReactive as E, useCreation as I, useMemoizedFn as zo } from "ahooks";
-import { translate as Po } from "@arcblock/ux/lib/Locale/util";
-import Vo from "validator/lib/isEmail";
-import q from "validator/lib/isPostalCode";
-import { useLocaleContext as Bo } from "@arcblock/ux/lib/Locale/context";
-import { useBrowser as Lo } from "@arcblock/react-hooks";
-import No from "@arcblock/ux/lib/UserCard/Content/clock";
-import { translations as jo } from "../../libs/locales.js";
-import g, { inputFieldStyle as Ao, commonInputStyle as So } from "../editable-field.js";
-import { LinkPreviewInput as Oo } from "./link-preview-input.js";
-import { defaultButtonStyle as J, currentTimezone as R, primaryButtonStyle as Ro } from "./utils.js";
-import { TimezoneSelect as Do } from "./timezone-select.js";
-import Wo from "./address.js";
-const To = P(() => import("@arcblock/icons/lib/Location")), Fo = P(() => import("@arcblock/icons/lib/Timezone")), Mo = P(() => import("@arcblock/icons/lib/Email")), $o = P(() => import("@arcblock/icons/lib/Phone")), z = {
+import { jsxs as y, Fragment as L, jsx as t } from "react/jsx-runtime";
+import { lazy as I, memo as ie, createElement as ae, useState as T, useRef as le, useEffect as de, useMemo as F } from "react";
+import { Icon as ce } from "@iconify/react";
+import { Backdrop as se, Box as m, useMediaQuery as pe, SwipeableDrawer as me, Typography as N, Tooltip as ue } from "@mui/material";
+import he from "@emotion/styled";
+import j from "@arcblock/ux/lib/Button";
+import M, { detectCountryFromPhone as $, getCountryNameByCountry as fe, validatePhoneNumber as ye, getDialCodeByCountry as xe } from "@arcblock/ux/lib/PhoneInput";
+import v from "lodash/cloneDeep";
+import be from "lodash/omit";
+import { mergeSx as ge } from "@arcblock/ux/lib/Util/style";
+import { LOGIN_PROVIDER as G } from "@arcblock/ux/lib/Util/constant";
+import { useReactive as w, useCreation as k, useMemoizedFn as Ce } from "ahooks";
+import { translate as ve } from "@arcblock/ux/lib/Locale/util";
+import we from "validator/lib/isEmail";
+import H from "validator/lib/isPostalCode";
+import { useLocaleContext as ke } from "@arcblock/ux/lib/Locale/context";
+import { useBrowser as Ee } from "@arcblock/react-hooks";
+import Ie from "@arcblock/ux/lib/UserCard/Content/clock";
+import { translations as ze } from "../../libs/locales.js";
+import g, { inputFieldStyle as Pe, commonInputStyle as Ve } from "../editable-field.js";
+import { LinkPreviewInput as Be } from "./link-preview-input.js";
+import { defaultButtonStyle as Q, currentTimezone as A, primaryButtonStyle as Le } from "./utils.js";
+import { TimezoneSelect as Ne } from "./timezone-select.js";
+import je from "./address.js";
+const Ae = I(() => import("@arcblock/icons/lib/Location")), Se = I(() => import("@arcblock/icons/lib/Timezone")), Oe = I(() => import("@arcblock/icons/lib/Email")), We = I(() => import("@arcblock/icons/lib/Phone")), E = {
   width: 20,
   height: 20
-}, K = 200, X = mo(function({
-  ref: o,
-  ...V
+}, U = 200, Y = ie(function({
+  ref: r,
+  ...z
 }) {
-  return /* @__PURE__ */ ho(
-    xo,
+  return /* @__PURE__ */ ae(
+    se,
     {
-      ref: o,
+      ref: r,
       component: "div",
       style: {
         backgroundColor: "rgba(0, 0, 0, 0.6)",
         backdropFilter: "blur(3px)",
         touchAction: "none"
       },
-      ...V,
+      ...z,
       key: "background"
     }
   );
 });
-X.displayName = "BackdropWrap";
-function se({
-  isMyself: m,
-  user: o,
-  onSave: V,
-  isMobile: b
+Y.displayName = "BackdropWrap";
+function so({
+  isMyself: s,
+  user: r,
+  onSave: z,
+  isMobile: x
 }) {
-  var $, G;
-  const [Z, B] = H(!1), [oo, C] = H(!1), eo = fo(null), no = Lo(), u = bo("(max-width:640px)") || no.mobile.any, p = E({
+  const [_, P] = T(!1), [q, C] = T(!1), J = le(null), K = Ee(), b = pe("(max-width:640px)") || K.mobile.any, c = w({
     email: "",
     phone: ""
-  }), s = E({
+  }), u = w({
     country: "",
     province: "",
     city: "",
@@ -63,20 +62,20 @@ function se({
     line2: "",
     postalCode: ""
   });
-  so(() => {
-    u || C(!1);
-  }, [u]);
-  const D = I(() => (o == null ? void 0 : o.phoneVerified) ?? !1, [o == null ? void 0 : o.phoneVerified]), W = I(() => (o == null ? void 0 : o.emailVerified) ?? !1, [o == null ? void 0 : o.emailVerified]), { locale: L } = Bo(), c = zo((n, i = {}) => Po(jo, n, L, "en", i)), l = E(
-    o != null && o.metadata ? k(o.metadata) : {
-      joinedAt: o == null ? void 0 : o.createdAt,
-      email: o == null ? void 0 : o.email,
+  de(() => {
+    b || C(!1);
+  }, [b]);
+  const S = k(() => r?.phoneVerified ?? !1, [r?.phoneVerified]), O = k(() => r?.emailVerified ?? !1, [r?.emailVerified]), { locale: V } = ke(), d = Ce((o, n = {}) => ve(ze, o, V, "en", n)), a = w(
+    r?.metadata ? v(r.metadata) : {
+      joinedAt: r?.createdAt,
+      email: r?.email,
       phone: {
         country: "cn",
-        phoneNumber: (o == null ? void 0 : o.phone) ?? ""
+        phoneNumber: r?.phone ?? ""
       }
     }
-  ), r = E(
-    o != null && o.address ? k(o.address) : {
+  ), l = w(
+    r?.address ? v(r.address) : {
       country: "",
       province: "",
       city: "",
@@ -84,337 +83,328 @@ function se({
       line2: "",
       postalCode: ""
     }
-  ), to = I(() => !!(o != null && o.address), [($ = o == null ? void 0 : o.address) == null ? void 0 : $.country]), y = Q(() => {
-    var n;
-    return (n = o == null ? void 0 : o.address) != null && n.country ? o.address.country : L === "zh" ? "cn" : "us";
-  }, [(G = o == null ? void 0 : o.address) == null ? void 0 : G.country, L]), N = I(() => {
-    const n = l.phone ?? (o == null ? void 0 : o.phone) ?? {
-      country: y,
+  ), X = k(() => !!r?.address, [r?.address?.country]), h = F(() => r?.address?.country ? r.address.country : V === "zh" ? "cn" : "us", [r?.address?.country, V]), B = k(() => {
+    const o = a.phone ?? r?.phone ?? {
+      country: h,
       phone: ""
     };
-    if (n && typeof n == "string")
+    if (o && typeof o == "string")
       return {
-        country: Y(n) || y,
-        phone: n
+        country: $(o) || h,
+        phone: o
       };
-    if (n && typeof n == "object") {
-      const { country: i = "", phoneNumber: t = "" } = n;
+    if (o && typeof o == "object") {
+      const { country: n = "", phoneNumber: e = "" } = o;
       return {
-        country: i || Y(t) || "",
-        phone: t || ""
+        country: n || $(e) || "",
+        phone: e || ""
       };
     }
     return {
-      country: y,
+      country: h,
       phone: ""
     };
-  }, [l.phone, o == null ? void 0 : o.phone, y]), h = (n, i) => {
-    l[i] = n;
-  }, io = (n, i) => {
-    r[n] = i, n === "city" && h(i, "location"), n === "postalCode" ? s.postalCode = i && !q(i, "any") ? c("profile.address.invalidPostalCode") : "" : s[n] = "";
-  }, T = () => {
-    u ? C(!0) : B(!0);
-  }, F = () => {
-    const n = k(o == null ? void 0 : o.metadata) ?? {};
-    n && Object.keys(l).forEach((t) => {
-      const e = t;
-      l[e] = n[e];
+  }, [a.phone, r?.phone, h]), p = (o, n) => {
+    a[n] = o;
+  }, Z = (o, n) => {
+    l[o] = n, o === "city" && p(n, "location"), o === "postalCode" ? u.postalCode = n && !H(n, "any") ? d("profile.address.invalidPostalCode") : "" : u[o] = "";
+  }, W = () => {
+    b ? C(!0) : P(!0);
+  }, R = () => {
+    const o = v(r?.metadata) ?? {};
+    o && Object.keys(a).forEach((e) => {
+      const i = e;
+      a[i] = o[i];
     });
-    const i = k(o == null ? void 0 : o.address) ?? {};
-    i && Object.keys(r).forEach((t) => {
-      const e = t;
-      r[e] = i[e];
-    }), [p, s].forEach((t) => {
-      Object.keys(t).forEach((e) => {
-        t[e] = "";
+    const n = v(r?.address) ?? {};
+    n && Object.keys(l).forEach((e) => {
+      const i = e;
+      l[i] = n[i];
+    }), [c, u].forEach((e) => {
+      Object.keys(e).forEach((i) => {
+        e[i] = "";
       });
-    }), u ? C(!1) : B(!1);
-  }, ao = Q(() => {
-    var i;
-    const n = ((i = l == null ? void 0 : l.links) == null ? void 0 : i.map((t) => t.url)) || [""];
-    return n.length > 0 ? n : [""];
-  }, [l.links]), lo = (n) => {
-    const i = n.map((t) => {
-      var d;
-      if (!t)
+    }), b ? C(!1) : P(!1);
+  }, ee = F(() => {
+    const o = a?.links?.map((n) => n.url) || [""];
+    return o.length > 0 ? o : [""];
+  }, [a.links]), oe = (o) => {
+    const n = o.map((e) => {
+      if (!e)
         return {
-          url: t
+          url: e
         };
-      const e = (d = l.links) == null ? void 0 : d.find((v) => v.url === t);
-      return e ? {
-        ...e,
-        url: t
+      const i = a.links?.find((f) => f.url === e);
+      return i ? {
+        ...i,
+        url: e
       } : {
-        url: t,
-        favicon: t
+        url: e,
+        favicon: e
       };
     });
-    h(i, "links");
-  }, ro = () => {
-    if (Object.keys(l).forEach((i) => {
-      var d, v;
-      const t = i, e = l[t];
-      if (e && typeof e == "string" && (l[t] = e.trim()), t === "bio" && (l[t] = (d = l[t]) == null ? void 0 : d.slice(0, K)), t === "timezone" && (l[t] = e || R), t === "phone" && e && typeof e == "object") {
-        const w = e, co = ko(w.country), j = ((v = w.phoneNumber) == null ? void 0 : v.replace(new RegExp(`^\\+${co}`), "")) || "", po = (j == null ? void 0 : j.trim().length) > 0;
-        l[t] = {
-          country: w.country,
-          ...po ? { phoneNumber: w.phoneNumber } : {}
+    p(n, "links");
+  }, ne = () => {
+    if (Object.keys(a).forEach((n) => {
+      const e = n, i = a[e];
+      if (i && typeof i == "string" && (a[e] = i.trim()), e === "bio" && (a[e] = a[e]?.slice(0, U)), e === "timezone" && (a[e] = i || A), e === "phone" && i && typeof i == "object") {
+        const f = i, te = xe(f.country), re = (f.phoneNumber?.replace(new RegExp(`^\\+${te}`), "") || "")?.trim().length > 0;
+        a[e] = {
+          country: f.country,
+          ...re ? { phoneNumber: f.phoneNumber } : {}
         };
       }
-    }), r.postalCode && !q(r.postalCode, "any") && (s.postalCode = c("profile.address.invalidPostalCode")), [p, s].some((i) => Object.values(i).some((t) => t)))
+    }), l.postalCode && !H(l.postalCode, "any") && (u.postalCode = d("profile.address.invalidPostalCode")), [c, u].some((n) => Object.values(n).some((e) => e)))
       return;
-    const n = Eo(r, "detailedAddress");
-    n.country || (n.country = y), V({ metadata: l, address: n }), B(!1), C(!1);
-  }, M = (n, i = "self") => {
-    var t;
-    return /* @__PURE__ */ x(
-      Go,
-      {
-        pt: 2,
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "space-between",
-        alignItems: "flex-start",
-        gap: b ? "4px" : "16px",
-        children: [
-          /* @__PURE__ */ a(
-            g,
-            {
-              value: l.bio ?? "",
-              onChange: (e) => h(e, "bio"),
-              editable: n,
-              placeholder: "Bio",
-              component: "textarea",
-              inline: !1,
-              rows: 3,
-              label: c("profile.bio"),
-              maxLength: K,
-              style: {
-                ...n ? { marginBottom: 8 } : {}
-              }
-            }
-          ),
-          !n && m ? /* @__PURE__ */ a(
-            O,
-            {
-              size: b ? "small" : "large",
-              variant: "outlined",
-              sx: {
-                ...J,
-                mb: b ? "4px" : 2,
-                mt: b ? "4px" : 2,
-                height: b ? "32px" : "40px"
-              },
-              onClick: T,
-              fullWidth: !0,
-              children: c("profile.editProfile")
-            }
-          ) : null,
-          n && m && to ? /* @__PURE__ */ a(
-            Wo,
-            {
-              address: r,
-              errors: s,
-              handleChange: io,
-              defaultCountry: y
-            }
-          ) : /* @__PURE__ */ a(
-            g,
-            {
-              value: l.location ?? ((t = o == null ? void 0 : o.address) == null ? void 0 : t.city) ?? "",
-              onChange: (e) => h(e, "location"),
-              editable: n,
-              placeholder: "Location",
-              label: c("profile.location"),
-              tooltip: m && (r.line1 || r.line2) ? /* @__PURE__ */ a(A, { children: ["line1", "line2"].map((e) => r[e] ? /* @__PURE__ */ x(f, { children: [
-                /* @__PURE__ */ a(
-                  S,
-                  {
-                    variant: "caption",
-                    component: "p",
-                    sx: {
-                      fontWeight: 600,
-                      mb: 0
-                    },
-                    children: c(`profile.address.${e}`)
-                  }
-                ),
-                /* @__PURE__ */ a(S, { variant: "caption", component: "span", children: r[e] })
-              ] }, e) : null) }) : null,
-              renderValue: () => {
-                const d = [r != null && r.country ? vo(r == null ? void 0 : r.country) : "", r.province, r.city || l.location || ""].filter(Boolean).join(" ");
-                return /* @__PURE__ */ a(S, { component: "span", children: d });
-              },
-              icon: /* @__PURE__ */ a(To, { ...z })
+    const o = be(l, "detailedAddress");
+    o.country || (o.country = h), z({ metadata: a, address: o }), P(!1), C(!1);
+  }, D = (o, n = "self") => /* @__PURE__ */ y(
+    Re,
+    {
+      pt: 2,
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "space-between",
+      alignItems: "flex-start",
+      gap: x ? "4px" : "16px",
+      children: [
+        /* @__PURE__ */ t(
+          g,
+          {
+            value: a.bio ?? "",
+            onChange: (e) => p(e, "bio"),
+            editable: o,
+            placeholder: "Bio",
+            component: "textarea",
+            inline: !1,
+            rows: 3,
+            label: d("profile.bio"),
+            maxLength: U,
+            style: {
+              ...o ? { marginBottom: 8 } : {}
             }
-          ),
-          /* @__PURE__ */ a(
-            g,
-            {
-              value: l.timezone || R,
-              onChange: (e) => h(e, "timezone"),
-              editable: n,
-              placeholder: "timezone",
-              icon: /* @__PURE__ */ a(Fo, { ...z }),
-              label: c("profile.timezone"),
-              renderValue: (e) => /* @__PURE__ */ a(No, { value: e }),
-              children: /* @__PURE__ */ a(
-                Do,
+          }
+        ),
+        !o && s ? /* @__PURE__ */ t(
+          j,
+          {
+            size: x ? "small" : "large",
+            variant: "outlined",
+            sx: {
+              ...Q,
+              mb: x ? "4px" : 2,
+              mt: x ? "4px" : 2,
+              height: x ? "32px" : "40px"
+            },
+            onClick: W,
+            fullWidth: !0,
+            children: d("profile.editProfile")
+          }
+        ) : null,
+        o && s && X ? /* @__PURE__ */ t(
+          je,
+          {
+            address: l,
+            errors: u,
+            handleChange: Z,
+            defaultCountry: h
+          }
+        ) : /* @__PURE__ */ t(
+          g,
+          {
+            value: a.location ?? r?.address?.city ?? "",
+            onChange: (e) => p(e, "location"),
+            editable: o,
+            placeholder: "Location",
+            label: d("profile.location"),
+            tooltip: s && (l.line1 || l.line2) ? /* @__PURE__ */ t(L, { children: ["line1", "line2"].map((e) => l[e] ? /* @__PURE__ */ y(m, { children: [
+              /* @__PURE__ */ t(
+                N,
                 {
-                  value: l.timezone || R,
-                  onChange: (e) => h(e, "timezone"),
-                  disabled: !n,
-                  mode: i
+                  variant: "caption",
+                  component: "p",
+                  sx: {
+                    fontWeight: 600,
+                    mb: 0
+                  },
+                  children: d(`profile.address.${e}`)
                 }
-              )
-            }
-          ),
-          /* @__PURE__ */ a(
-            g,
-            {
-              value: l.email ?? (o == null ? void 0 : o.email) ?? "",
-              editable: n,
-              hidePreview: !m,
-              disabled: (o == null ? void 0 : o.sourceProvider) === _.EMAIL,
-              canEdit: !W,
-              verified: W,
-              placeholder: "Email",
-              icon: /* @__PURE__ */ a(Mo, { ...z }),
-              label: /* @__PURE__ */ x(A, { children: [
-                c("profile.email"),
-                (o == null ? void 0 : o.sourceProvider) === _.EMAIL ? /* @__PURE__ */ a(go, { title: c("profile.emailSourceProviderNotAllowEdit"), children: /* @__PURE__ */ a(
-                  f,
-                  {
-                    component: yo,
-                    icon: "mdi:info-outline",
-                    sx: {
-                      verticalAlign: "middle",
-                      ml: 0.25
-                    }
-                  }
-                ) }) : null
-              ] }),
-              onChange: (e) => h(e, "email"),
-              errorMsg: p.email,
-              renderValue: (e) => m ? /* @__PURE__ */ a(
-                "a",
+              ),
+              /* @__PURE__ */ t(N, { variant: "caption", component: "span", children: l[e] })
+            ] }, e) : null) }) : null,
+            renderValue: () => {
+              const i = [l?.country ? fe(l?.country) : "", l.province, l.city || a.location || ""].filter(Boolean).join(" ");
+              return /* @__PURE__ */ t(N, { component: "span", children: i });
+            },
+            icon: /* @__PURE__ */ t(Ae, { ...E })
+          }
+        ),
+        /* @__PURE__ */ t(
+          g,
+          {
+            value: a.timezone || A,
+            onChange: (e) => p(e, "timezone"),
+            editable: o,
+            placeholder: "timezone",
+            icon: /* @__PURE__ */ t(Se, { ...E }),
+            label: d("profile.timezone"),
+            renderValue: (e) => /* @__PURE__ */ t(Ie, { value: e }),
+            children: /* @__PURE__ */ t(
+              Ne,
+              {
+                value: a.timezone || A,
+                onChange: (e) => p(e, "timezone"),
+                disabled: !o,
+                mode: n
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ t(
+          g,
+          {
+            value: a.email ?? r?.email ?? "",
+            editable: o,
+            hidePreview: !s,
+            disabled: r?.sourceProvider === G.EMAIL,
+            canEdit: !O,
+            verified: O,
+            placeholder: "Email",
+            icon: /* @__PURE__ */ t(Oe, { ...E }),
+            label: /* @__PURE__ */ y(L, { children: [
+              d("profile.email"),
+              r?.sourceProvider === G.EMAIL ? /* @__PURE__ */ t(ue, { title: d("profile.emailSourceProviderNotAllowEdit"), children: /* @__PURE__ */ t(
+                m,
                 {
-                  href: `mailto:${e}`,
-                  style: {
-                    color: "inherit",
-                    textDecoration: "none"
-                  },
-                  children: e
+                  component: ce,
+                  icon: "mdi:info-outline",
+                  sx: {
+                    verticalAlign: "middle",
+                    ml: 0.25
+                  }
                 }
-              ) : null,
-              onValueValidate: (e) => {
-                let d = "";
-                e && !Vo(e) && (d = c("profile.emailInvalid")), p.email = d;
+              ) }) : null
+            ] }),
+            onChange: (e) => p(e, "email"),
+            errorMsg: c.email,
+            renderValue: (e) => s ? /* @__PURE__ */ t(
+              "a",
+              {
+                href: `mailto:${e}`,
+                style: {
+                  color: "inherit",
+                  textDecoration: "none"
+                },
+                children: e
               }
+            ) : null,
+            onValueValidate: (e) => {
+              let i = "";
+              e && !we(e) && (i = d("profile.emailInvalid")), c.email = i;
             }
-          ),
-          /* @__PURE__ */ a(
-            g,
-            {
-              value: N.phone,
-              editable: n,
-              hidePreview: !m,
-              canEdit: !D,
-              verified: D,
-              placeholder: "Phone",
-              icon: /* @__PURE__ */ a($o, { ...z }),
-              onChange: (e) => h(e, "phone"),
-              label: c("profile.phone"),
-              renderValue: () => m ? /* @__PURE__ */ a(U, { value: N, preview: !0 }) : null,
-              children: /* @__PURE__ */ a(
-                U,
+          }
+        ),
+        /* @__PURE__ */ t(
+          g,
+          {
+            value: B.phone,
+            editable: o,
+            hidePreview: !s,
+            canEdit: !S,
+            verified: S,
+            placeholder: "Phone",
+            icon: /* @__PURE__ */ t(We, { ...E }),
+            onChange: (e) => p(e, "phone"),
+            label: d("profile.phone"),
+            renderValue: () => s ? /* @__PURE__ */ t(M, { value: B, preview: !0 }) : null,
+            children: /* @__PURE__ */ t(
+              M,
+              {
+                variant: "outlined",
+                className: "editable-field",
+                InputProps: {
+                  sx: { backgroundColor: "transparent" },
+                  placeholder: "Phone"
+                },
+                value: B,
+                error: !!c.phone,
+                helperText: c.phone,
+                sx: ge(Pe, c.phone ? {} : Ve),
+                onChange: (e) => {
+                  ye(e.phone, e.country) ? c.phone = "" : c.phone = d("profile.phoneInvalid"), p(
+                    {
+                      country: e.country,
+                      phoneNumber: e.phone
+                    },
+                    "phone"
+                  );
+                }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ t(Be, { editable: o, links: ee, onChange: oe }),
+        o && s ? /* @__PURE__ */ y(
+          m,
+          {
+            style: { width: "100%" },
+            sx: {
+              display: "flex",
+              gap: 1,
+              justifyContent: "flex-end",
+              flexDirection: n === "drawer" ? "column" : "row"
+            },
+            children: [
+              /* @__PURE__ */ t(
+                j,
                 {
+                  fullWidth: n === "drawer",
+                  size: "small",
                   variant: "outlined",
-                  className: "editable-field",
-                  InputProps: {
-                    sx: { backgroundColor: "transparent" },
-                    placeholder: "Phone"
+                  sx: { ...Q, minWidth: "54px" },
+                  onClick: R,
+                  children: d("common.cancel")
+                }
+              ),
+              /* @__PURE__ */ t(
+                j,
+                {
+                  fullWidth: n === "drawer",
+                  size: "small",
+                  disabled: !!c.email || !!c.phone,
+                  variant: "outlined",
+                  sx: {
+                    ...Le,
+                    minWidth: "54px",
+                    "&.Mui-disabled": {
+                      backgroundColor: "rgba(0, 0, 0, 0.12)"
+                    }
                   },
-                  value: N,
-                  error: !!p.phone,
-                  helperText: p.phone,
-                  sx: Io(Ao, p.phone ? {} : So),
-                  onChange: (e) => {
-                    wo(e.phone, e.country) ? p.phone = "" : p.phone = c("profile.phoneInvalid"), h(
-                      {
-                        country: e.country,
-                        phoneNumber: e.phone
-                      },
-                      "phone"
-                    );
-                  }
+                  onClick: ne,
+                  children: d("common.save")
                 }
               )
-            }
-          ),
-          /* @__PURE__ */ a(Oo, { editable: n, links: ao, onChange: lo }),
-          n && m ? /* @__PURE__ */ x(
-            f,
-            {
-              style: { width: "100%" },
-              sx: {
-                display: "flex",
-                gap: 1,
-                justifyContent: "flex-end",
-                flexDirection: i === "drawer" ? "column" : "row"
-              },
-              children: [
-                /* @__PURE__ */ a(
-                  O,
-                  {
-                    fullWidth: i === "drawer",
-                    size: "small",
-                    variant: "outlined",
-                    sx: { ...J, minWidth: "54px" },
-                    onClick: F,
-                    children: c("common.cancel")
-                  }
-                ),
-                /* @__PURE__ */ a(
-                  O,
-                  {
-                    fullWidth: i === "drawer",
-                    size: "small",
-                    disabled: !!p.email || !!p.phone,
-                    variant: "outlined",
-                    sx: {
-                      ...Ro,
-                      minWidth: "54px",
-                      "&.Mui-disabled": {
-                        backgroundColor: "rgba(0, 0, 0, 0.12)"
-                      }
-                    },
-                    onClick: ro,
-                    children: c("common.save")
-                  }
-                )
-              ]
-            }
-          ) : null
-        ]
-      }
-    );
-  };
-  return /* @__PURE__ */ x(A, { children: [
-    M(Z),
-    u && /* @__PURE__ */ x(
-      uo,
+            ]
+          }
+        ) : null
+      ]
+    }
+  );
+  return /* @__PURE__ */ y(L, { children: [
+    D(_),
+    b && /* @__PURE__ */ y(
+      me,
       {
         sx: {
           zIndex: 9999
         },
         disableSwipeToOpen: !0,
-        onOpen: T,
-        open: oo,
+        onOpen: W,
+        open: q,
         anchor: "bottom",
-        onClose: F,
+        onClose: R,
         slots: {
-          backdrop: X
+          backdrop: Y
         },
         slotProps: {
           paper: {
@@ -428,17 +418,17 @@ function se({
           }
         },
         children: [
-          /* @__PURE__ */ a(
-            f,
+          /* @__PURE__ */ t(
+            m,
             {
-              ref: eo,
+              ref: J,
               sx: {
                 padding: "16px 32px",
                 margin: "-8px auto -16px",
                 zIndex: 1
               },
-              children: /* @__PURE__ */ a(
-                f,
+              children: /* @__PURE__ */ t(
+                m,
                 {
                   sx: {
                     width: "48px",
@@ -450,15 +440,15 @@ function se({
               )
             }
           ),
-          /* @__PURE__ */ a(
-            f,
+          /* @__PURE__ */ t(
+            m,
             {
               sx: {
                 p: 2,
                 maxHeight: "500px",
                 overflowY: "auto"
               },
-              children: M(!0, "drawer")
+              children: D(!0, "drawer")
             }
           )
         ]
@@ -466,7 +456,7 @@ function se({
     )
   ] });
 }
-const Go = Co(f)`
+const Re = he(m)`
   width: 100%;
 
   .MuiOutlinedInput-root {
@@ -505,5 +495,5 @@ const Go = Co(f)`
   }
 `;
 export {
-  se as default
+  so as default
 };