docthub-core-components 3.3.4 → 3.3.6

package/dist/components/overrides/ui/mobile-number-dialog/mobile-number-dialog.js

@@ -1,268 +1,369 @@
 "use client";
-import { jsx as o, jsxs as E, Fragment as de } from "react/jsx-runtime";
+import { jsx as o, jsxs as A, Fragment as pt } from "react/jsx-runtime";
 import { c as D } from "react-compiler-runtime";
-import { Smartphone as fe, X as ue } from "lucide-react";
-import * as ie from "react";
-import { DoctButton as z } from "../../../ui/button.js";
-import { DialogHeader as me, DialogTitle as he, DialogContent as be, Dialog as pe } from "../../../ui/dialog.js";
-import { DrawerHeader as ge, DrawerTitle as Ne, DrawerContent as ve, Drawer as _e } from "../../../ui/drawer.js";
-import { DoctTypography as H } from "../../../ui/typography.js";
-import { useIsMobile as xe } from "../../../../hooks/use-mobile.js";
-import { cn as se } from "../../../../lib/utils.js";
-import { DoctPhoneInput as De } from "../inputs/phone-input.js";
-import { MOBILE_NUMBER_DIALOG_DEFAULT_COUNTRY_CODE as Me, buildMobileNumberDisplay as ye, MOBILE_NUMBER_DIALOG_DEFAULT_PHONE_PLACEHOLDER as Le, MOBILE_NUMBER_DIALOG_BODY_TITLE as Ce, MOBILE_NUMBER_DIALOG_HEADER_TITLE as Ee, MOBILE_NUMBER_DIALOG_DEFAULT_INFO_MESSAGE as ae, MOBILE_NUMBER_DIALOG_PRIMARY_LABEL as we, buildLoginWithMobileNumberLabel as Ae, MOBILE_NUMBER_DIALOG_LOGIN_UNIFY_HINT as Ie, isMobileNumberDialogPrimaryDisabled as Oe, MOBILE_NUMBER_DIALOG_SECONDARY_LABEL as Be } from "./presets.js";
-import { MOBILE_NUMBER_DIALOG_DRAWER_BACKDROP_CLASS as oe } from "./types.js";
-const Re = "[&>div:first-child]:pointer-events-none [&>div:first-child]:sr-only [&>div:first-child]:m-0 [&>div:first-child]:h-0 [&>div:first-child]:w-0 [&>div:first-child]:overflow-hidden", Te = "flex w-full flex-col overflow-hidden border border-black/[0.12] bg-white";
-function ke(r) {
+import { Smartphone as ht, X as bt } from "lucide-react";
+import * as G from "react";
+import { CircularProgress as lt } from "../circular-progress.js";
+import { DoctButton as ae } from "../../../ui/button.js";
+import { DialogHeader as gt, DialogTitle as _t, DialogContent as Lt, Dialog as Nt } from "../../../ui/dialog.js";
+import { DrawerHeader as vt, DrawerTitle as Et, DrawerContent as xt, Drawer as Dt } from "../../../ui/drawer.js";
+import { DoctTypography as ce } from "../../../ui/typography.js";
+import { useIsMobile as Mt } from "../../../../hooks/use-mobile.js";
+import { cn as qe } from "../../../../lib/utils.js";
+import { DoctPhoneInput as yt } from "../inputs/phone-input.js";
+import { MobileNumberDialogOtpSurface as it } from "./otp-dialog.js";
+import { MOBILE_NUMBER_DIALOG_DEFAULT_COUNTRY_CODE as Ct, buildMobileNumberDisplay as Ot, MOBILE_NUMBER_DIALOG_DEFAULT_PHONE_PLACEHOLDER as wt, MOBILE_NUMBER_DIALOG_BODY_TITLE as It, MOBILE_NUMBER_DIALOG_HEADER_TITLE as At, MOBILE_NUMBER_DIALOG_DEFAULT_INFO_MESSAGE as st, MOBILE_NUMBER_DIALOG_OTP_HEADER_TITLE as Bt, MOBILE_NUMBER_DIALOG_OTP_SUBMIT_LABEL as Tt, MOBILE_NUMBER_DIALOG_OTP_TITLE as St, MOBILE_NUMBER_DIALOG_OTP_RESEND_LABEL as Rt, MOBILE_NUMBER_DIALOG_PRIMARY_LABEL as kt, buildLoginWithMobileNumberLabel as Pt, MOBILE_NUMBER_DIALOG_LOGIN_UNIFY_HINT as Ut, isMobileNumberDialogPrimaryDisabled as Gt, MOBILE_NUMBER_DIALOG_SECONDARY_LABEL as Ft } from "./presets.js";
+import { MOBILE_NUMBER_DIALOG_DRAWER_BACKDROP_CLASS as Xe } from "./types.js";
+const Ht = "[&>div:first-child]:pointer-events-none [&>div:first-child]:sr-only [&>div:first-child]:m-0 [&>div:first-child]:h-0 [&>div:first-child]:w-0 [&>div:first-child]:overflow-hidden", zt = "flex w-full flex-col overflow-hidden border border-black/[0.12] bg-white";
+function $t(a) {
   const e = D(3), {
     onClose: i
-  } = r;
+  } = a;
   let t;
-  e[0] === Symbol.for("react.memo_cache_sentinel") ? (t = /* @__PURE__ */ o(ue, { className: "size-6", "aria-hidden": !0 }), e[0] = t) : t = e[0];
+  e[0] === Symbol.for("react.memo_cache_sentinel") ? (t = /* @__PURE__ */ o(bt, { className: "size-6", "aria-hidden": !0 }), e[0] = t) : t = e[0];
   let l;
-  return e[1] !== i ? (l = /* @__PURE__ */ o(z, { type: "button", variant: "ghost", onClick: i, className: "flex size-12 shrink-0 items-center justify-center rounded-full p-0 text-black/70", "aria-label": "Close", icon: t }), e[1] = i, e[2] = l) : l = e[2], l;
+  return e[1] !== i ? (l = /* @__PURE__ */ o(ae, { type: "button", variant: "ghost", onClick: i, className: "flex size-12 shrink-0 items-center justify-center rounded-full p-0 text-black/70", "aria-label": "Close", icon: t }), e[1] = i, e[2] = l) : l = e[2], l;
 }
-function Se(r) {
+function Wt(a) {
   const e = D(7), {
     title: i,
     onClose: t
-  } = r;
+  } = a;
   let l;
-  e[0] !== i ? (l = /* @__PURE__ */ o("div", { className: "flex min-h-12 min-w-0 flex-1 items-center py-[18px]", children: /* @__PURE__ */ o(H, { as: "p", variant: "textLabel1", weight: "semiBold", align: "left", className: "min-w-0 !text-black/80", children: i }) }), e[0] = i, e[1] = l) : l = e[1];
-  let n;
-  e[2] !== t ? (n = /* @__PURE__ */ o(ke, { onClose: t }), e[2] = t, e[3] = n) : n = e[3];
+  e[0] !== i ? (l = /* @__PURE__ */ o("div", { className: "flex min-h-12 min-w-0 flex-1 items-center py-[18px]", children: /* @__PURE__ */ o(ce, { as: "p", variant: "textLabel1", weight: "semiBold", align: "left", className: "min-w-0 !text-black/80", children: i }) }), e[0] = i, e[1] = l) : l = e[1];
   let s;
-  return e[4] !== l || e[5] !== n ? (s = /* @__PURE__ */ E("div", { className: "flex w-full shrink-0 items-start justify-between overflow-hidden pl-4", children: [
+  e[2] !== t ? (s = /* @__PURE__ */ o($t, { onClose: t }), e[2] = t, e[3] = s) : s = e[3];
+  let n;
+  return e[4] !== l || e[5] !== s ? (n = /* @__PURE__ */ A("div", { className: "flex w-full shrink-0 items-start justify-between overflow-hidden pl-4", children: [
     l,
-    n
-  ] }), e[4] = l, e[5] = n, e[6] = s) : s = e[6], s;
+    s
+  ] }), e[4] = l, e[5] = s, e[6] = n) : n = e[6], n;
 }
-function Pe(r) {
+function jt(a) {
   const e = D(4), {
     icon: i
-  } = r;
+  } = a;
   let t;
-  e[0] !== i ? (t = i ?? /* @__PURE__ */ o(fe, { className: "size-6 text-white", strokeWidth: 1.75, "aria-hidden": !0 }), e[0] = i, e[1] = t) : t = e[1];
+  e[0] !== i ? (t = i ?? /* @__PURE__ */ o(ht, { className: "size-6 text-white", strokeWidth: 1.75, "aria-hidden": !0 }), e[0] = i, e[1] = t) : t = e[1];
   let l;
   return e[2] !== t ? (l = /* @__PURE__ */ o("div", { className: "flex size-12 shrink-0 items-center justify-center rounded-xl bg-[#00A0C0] px-3", children: t }), e[2] = t, e[3] = l) : l = e[3], l;
 }
-function Fe() {
-  const r = D(1);
+function Yt() {
+  const a = D(1);
   let e;
-  return r[0] === Symbol.for("react.memo_cache_sentinel") ? (e = /* @__PURE__ */ o(H, { as: "p", variant: "textLabel3", weight: "medium", align: "left", className: "w-full !text-[#4389FF]", children: ae }), r[0] = e) : e = r[0], e;
+  return a[0] === Symbol.for("react.memo_cache_sentinel") ? (e = /* @__PURE__ */ o(ce, { as: "p", variant: "textLabel3", weight: "medium", align: "left", className: "w-full !text-[#4389FF]", children: st }), a[0] = e) : e = a[0], e;
 }
-function Ue(r) {
+function Kt(a) {
   const e = D(3), {
     message: i,
     isDefaultMessage: t
-  } = r;
+  } = a;
   let l;
-  return e[0] !== t || e[1] !== i ? (l = /* @__PURE__ */ o("div", { className: "w-full self-stretch rounded-xl bg-[rgba(67,137,255,0.12)] p-[14px]", children: t ? /* @__PURE__ */ o(Fe, {}) : /* @__PURE__ */ o(H, { as: "p", variant: "textLabel3", weight: "medium", align: "left", className: "w-full !text-[#4389FF]", children: i }) }), e[0] = t, e[1] = i, e[2] = l) : l = e[2], l;
+  return e[0] !== t || e[1] !== i ? (l = /* @__PURE__ */ o("div", { className: "w-full self-stretch rounded-xl bg-[rgba(67,137,255,0.12)] p-[14px]", children: t ? /* @__PURE__ */ o(Yt, {}) : /* @__PURE__ */ o(ce, { as: "p", variant: "textLabel3", weight: "medium", align: "left", className: "w-full !text-[#4389FF]", children: i }) }), e[0] = t, e[1] = i, e[2] = l) : l = e[2], l;
 }
-function ne(r) {
+function ot(a) {
   const e = D(14), {
     countryCode: i,
     placeholder: t,
     value: l,
-    onChange: n,
-    onCountryCodeChange: s,
-    error: m
-  } = r;
+    onChange: s,
+    onCountryCodeChange: n,
+    error: c
+  } = a;
+  let m;
+  e[0] !== i ? (m = i.replace(/\D/g, "") || void 0, e[0] = i, e[1] = m) : m = e[1];
+  const u = m;
   let d;
-  e[0] !== i ? (d = i.replace(/\D/g, "") || void 0, e[0] = i, e[1] = d) : d = e[1];
-  const f = d;
-  let a;
-  e[2] !== s ? (a = (M) => s == null ? void 0 : s(`+${M}`), e[2] = s, e[3] = a) : a = e[3];
-  const c = !m && "[&>div>button]:border-black/10 [&>div>input]:border-black/10";
-  let h;
-  e[4] !== c ? (h = se("w-full space-y-1 [&>div>button]:h-[44px] [&>div>button]:rounded-l-lg [&>div>input]:h-[44px] [&>div>input]:rounded-r-lg [&>div>input]:shadow-none [&>div>input]:placeholder:text-black/40 [&>div>input]:focus-visible:ring-0", c), e[4] = c, e[5] = h) : h = e[5];
-  let p;
-  return e[6] !== m || e[7] !== f || e[8] !== n || e[9] !== t || e[10] !== a || e[11] !== h || e[12] !== l ? (p = /* @__PURE__ */ o(De, { countryCode: f, placeholder: t, value: l, onPhoneChange: n, onCountryCodeChange: a, error: m, "aria-label": "Mobile number", className: h }), e[6] = m, e[7] = f, e[8] = n, e[9] = t, e[10] = a, e[11] = h, e[12] = l, e[13] = p) : p = e[13], p;
+  e[2] !== n ? (d = (h) => n == null ? void 0 : n(`+${h}`), e[2] = n, e[3] = d) : d = e[3];
+  const p = !c && "[&>div>button]:border-black/10 [&>div>input]:border-black/10";
+  let r;
+  e[4] !== p ? (r = qe("w-full space-y-1 [&>div>button]:h-[44px] [&>div>button]:rounded-l-lg [&>div>input]:h-[44px] [&>div>input]:rounded-r-lg [&>div>input]:shadow-none [&>div>input]:placeholder:text-black/40 [&>div>input]:focus-visible:ring-0", p), e[4] = p, e[5] = r) : r = e[5];
+  let f;
+  return e[6] !== c || e[7] !== u || e[8] !== s || e[9] !== t || e[10] !== d || e[11] !== r || e[12] !== l ? (f = /* @__PURE__ */ o(yt, { countryCode: u, placeholder: t, value: l, onPhoneChange: s, onCountryCodeChange: d, error: c, "aria-label": "Mobile number", className: r }), e[6] = c, e[7] = u, e[8] = s, e[9] = t, e[10] = d, e[11] = r, e[12] = l, e[13] = f) : f = e[13], f;
 }
-function Ge(r) {
-  const e = D(7), {
-    phoneDisplay: i
-  } = r;
-  let t;
-  e[0] !== i ? (t = Ae(i), e[0] = i, e[1] = t) : t = e[1];
+function Vt(a) {
+  const e = D(8), {
+    phoneDisplay: i,
+    onLogin: t
+  } = a;
   let l;
-  e[2] !== t ? (l = /* @__PURE__ */ o(z, { type: "button", variant: "outline", size: "medium", fullWidth: !0, children: t }), e[2] = t, e[3] = l) : l = e[3];
-  let n;
-  e[4] === Symbol.for("react.memo_cache_sentinel") ? (n = /* @__PURE__ */ o(H, { as: "p", variant: "body5", weight: "regular", className: "w-full !text-center !text-black/44", children: Ie }), e[4] = n) : n = e[4];
+  e[0] !== i ? (l = Pt(i), e[0] = i, e[1] = l) : l = e[1];
   let s;
-  return e[5] !== l ? (s = /* @__PURE__ */ E("div", { className: "flex w-full flex-col items-center gap-1.5 rounded-xl bg-black/[0.04] p-3", children: [
-    l,
+  e[2] !== t || e[3] !== l ? (s = /* @__PURE__ */ o(ae, { type: "button", variant: "outline", size: "medium", fullWidth: !0, onClick: t, children: l }), e[2] = t, e[3] = l, e[4] = s) : s = e[4];
+  let n;
+  e[5] === Symbol.for("react.memo_cache_sentinel") ? (n = /* @__PURE__ */ o(ce, { as: "p", variant: "body5", weight: "regular", className: "w-full !text-center !text-black/44", children: Ut }), e[5] = n) : n = e[5];
+  let c;
+  return e[6] !== s ? (c = /* @__PURE__ */ A("div", { className: "flex w-full flex-col items-center gap-1.5 rounded-xl bg-black/[0.04] p-3", children: [
+    s,
     n
-  ] }), e[5] = l, e[6] = s) : s = e[6], s;
+  ] }), e[6] = s, e[7] = c) : c = e[7], c;
 }
-function $e(r) {
-  const e = D(11), {
+function Xt(a) {
+  const e = D(24), {
     trigger: i,
-    state: t
-  } = r, l = we[i][t];
-  let n;
-  e[0] !== t ? (n = Oe(t), e[0] = t, e[1] = n) : n = e[1];
-  const s = n;
+    state: t,
+    onPrimaryClick: l,
+    onSecondaryClick: s,
+    isPrimaryLoading: n
+  } = a, c = kt[i][t];
+  let m;
+  e[0] !== n || e[1] !== t ? (m = Gt(t) || n, e[0] = n, e[1] = t, e[2] = m) : m = e[2];
+  const u = m;
   if (i === "action") {
-    const a = s ? "disabled" : "primary";
-    let c;
-    return e[2] !== s || e[3] !== l || e[4] !== a ? (c = /* @__PURE__ */ o(z, { type: "button", size: "medium", fullWidth: !0, variant: a, disabled: s, children: l }), e[2] = s, e[3] = l, e[4] = a, e[5] = c) : c = e[5], c;
+    const _ = u ? "disabled" : "primary";
+    let L;
+    e[3] !== n || e[4] !== c ? (L = n ? /* @__PURE__ */ o(lt, { size: 24, strokeWidth: 2 }) : c, e[3] = n, e[4] = c, e[5] = L) : L = e[5];
+    let N;
+    return e[6] !== l || e[7] !== u || e[8] !== _ || e[9] !== L ? (N = /* @__PURE__ */ o(ae, { type: "button", size: "medium", fullWidth: !0, variant: _, disabled: u, onClick: l, children: L }), e[6] = l, e[7] = u, e[8] = _, e[9] = L, e[10] = N) : N = e[10], N;
   }
-  let m;
-  e[6] === Symbol.for("react.memo_cache_sentinel") ? (m = /* @__PURE__ */ o(z, { type: "button", size: "medium", variant: "secondary", className: "shrink-0", children: Be }), e[6] = m) : m = e[6];
-  const d = s ? "disabled" : "primary";
+  let d;
+  e[11] !== s ? (d = /* @__PURE__ */ o(ae, { type: "button", size: "medium", variant: "secondary", className: "shrink-0", onClick: s, children: Ft }), e[11] = s, e[12] = d) : d = e[12];
+  const p = u ? "disabled" : "primary";
+  let r;
+  e[13] !== n || e[14] !== c ? (r = n ? /* @__PURE__ */ o(lt, { size: 24, strokeWidth: 2 }) : c, e[13] = n, e[14] = c, e[15] = r) : r = e[15];
   let f;
-  return e[7] !== s || e[8] !== l || e[9] !== d ? (f = /* @__PURE__ */ E("div", { className: "flex w-full items-start gap-2.5", children: [
-    m,
-    /* @__PURE__ */ o(z, { type: "button", size: "medium", fullWidth: !0, variant: d, disabled: s, className: "min-w-0 flex-1", children: l })
-  ] }), e[7] = s, e[8] = l, e[9] = d, e[10] = f) : f = e[10], f;
+  e[16] !== l || e[17] !== u || e[18] !== p || e[19] !== r ? (f = /* @__PURE__ */ o(ae, { type: "button", size: "medium", fullWidth: !0, variant: p, disabled: u, className: "min-w-0 flex-1", onClick: l, children: r }), e[16] = l, e[17] = u, e[18] = p, e[19] = r, e[20] = f) : f = e[20];
+  let h;
+  return e[21] !== d || e[22] !== f ? (h = /* @__PURE__ */ A("div", { className: "flex w-full items-start gap-2.5", children: [
+    d,
+    f
+  ] }), e[21] = d, e[22] = f, e[23] = h) : h = e[23], h;
 }
-function re(r) {
-  const e = D(35), {
+function nt(a) {
+  const e = D(40), {
     trigger: i,
     state: t,
     headerTitle: l,
-    bodyTitle: n,
-    infoMessage: s,
-    isDefaultInfoMessage: m,
-    phoneNumber: d,
-    onPhoneNumberChange: f,
-    existingAccountErrorMessage: a,
-    phoneDisplay: c,
-    phonePlaceholder: h,
-    countryCode: p,
-    onCountryCodeChange: M,
-    icon: w,
-    onClose: $,
-    className: A,
-    surface: I
-  } = r, O = t === "existingAccount", N = I === "drawer" ? "h-auto max-w-none rounded-t-[16px]" : "max-w-[320px] rounded-[16px] shadow-[0_8px_24px_rgba(0,0,0,0.12)]";
-  let L;
-  e[0] !== A || e[1] !== N ? (L = se(Te, N, A), e[0] = A, e[1] = N, e[2] = L) : L = e[2];
-  const y = L;
-  let C;
-  e[3] !== l || e[4] !== $ ? (C = /* @__PURE__ */ o(Se, { title: l, onClose: $ }), e[3] = l, e[4] = $, e[5] = C) : C = e[5];
-  let g;
-  e[6] !== w ? (g = /* @__PURE__ */ o(Pe, { icon: w }), e[6] = w, e[7] = g) : g = e[7];
-  let u;
-  e[8] !== n ? (u = /* @__PURE__ */ o(H, { as: "h2", variant: "textLabel1", weight: "semiBold", align: "center", className: "shrink-0 whitespace-nowrap !text-black/80", children: n }), e[8] = n, e[9] = u) : u = e[9];
+    bodyTitle: s,
+    infoMessage: n,
+    isDefaultInfoMessage: c,
+    phoneNumber: m,
+    onPhoneNumberChange: u,
+    existingAccountErrorMessage: d,
+    phoneErrorMessage: p,
+    phoneDisplay: r,
+    phonePlaceholder: f,
+    countryCode: h,
+    onCountryCodeChange: _,
+    onExistingAccountLogin: L,
+    onPrimaryClick: N,
+    onSecondaryClick: B,
+    isPrimaryLoading: T,
+    icon: S,
+    onClose: F,
+    className: R,
+    surface: ie
+  } = a, k = t === "existingAccount", P = ie === "drawer" ? "h-auto max-w-none rounded-t-[16px]" : "!max-w-[384px] rounded-[16px] shadow-[0_8px_24px_rgba(0,0,0,0.12)]";
+  let H;
+  e[0] !== R || e[1] !== P ? (H = qe(zt, P, R), e[0] = R, e[1] = P, e[2] = H) : H = e[2];
+  const U = H;
+  let E;
+  e[3] !== l || e[4] !== F ? (E = /* @__PURE__ */ o(Wt, { title: l, onClose: F }), e[3] = l, e[4] = F, e[5] = E) : E = e[5];
   let v;
-  e[10] !== s || e[11] !== m ? (v = /* @__PURE__ */ o(Ue, { message: s, isDefaultMessage: m }), e[10] = s, e[11] = m, e[12] = v) : v = e[12];
-  let _;
-  e[13] !== p || e[14] !== a || e[15] !== O || e[16] !== M || e[17] !== f || e[18] !== c || e[19] !== d || e[20] !== h ? (_ = /* @__PURE__ */ o("div", { className: "flex w-full flex-col items-start gap-4", children: O ? /* @__PURE__ */ E(de, { children: [
-    /* @__PURE__ */ o("div", { className: "flex w-full flex-col items-start gap-1.5", children: /* @__PURE__ */ o(ne, { countryCode: p, placeholder: h, value: d, onChange: f, onCountryCodeChange: M, error: a }) }),
-    /* @__PURE__ */ o(Ge, { phoneDisplay: c })
-  ] }) : /* @__PURE__ */ o(ne, { countryCode: p, placeholder: h, value: d, onChange: f, onCountryCodeChange: M }) }), e[13] = p, e[14] = a, e[15] = O, e[16] = M, e[17] = f, e[18] = c, e[19] = d, e[20] = h, e[21] = _) : _ = e[21];
+  e[6] !== S ? (v = /* @__PURE__ */ o(jt, { icon: S }), e[6] = S, e[7] = v) : v = e[7];
+  let M;
+  e[8] !== s ? (M = /* @__PURE__ */ o(ce, { as: "h2", variant: "textLabel1", weight: "semiBold", align: "center", className: "shrink-0 whitespace-nowrap !text-black/80", children: s }), e[8] = s, e[9] = M) : M = e[9];
   let x;
-  e[22] !== g || e[23] !== u || e[24] !== v || e[25] !== _ ? (x = /* @__PURE__ */ E("div", { className: "flex w-full flex-col items-center gap-4 px-4 pb-5 pt-4", children: [
-    g,
-    u,
+  e[10] !== n || e[11] !== c ? (x = /* @__PURE__ */ o(Kt, { message: n, isDefaultMessage: c }), e[10] = n, e[11] = c, e[12] = x) : x = e[12];
+  let y;
+  e[13] !== h || e[14] !== d || e[15] !== k || e[16] !== _ || e[17] !== L || e[18] !== u || e[19] !== r || e[20] !== p || e[21] !== m || e[22] !== f ? (y = /* @__PURE__ */ o("div", { className: "flex w-full flex-col items-start gap-4", children: k ? /* @__PURE__ */ A(pt, { children: [
+    /* @__PURE__ */ o("div", { className: "flex w-full flex-col items-start gap-1.5", children: /* @__PURE__ */ o(ot, { countryCode: h, placeholder: f, value: m, onChange: u, onCountryCodeChange: _, error: d }) }),
+    /* @__PURE__ */ o(Vt, { phoneDisplay: r, onLogin: L })
+  ] }) : /* @__PURE__ */ o(ot, { countryCode: h, placeholder: f, value: m, onChange: u, onCountryCodeChange: _, error: p }) }), e[13] = h, e[14] = d, e[15] = k, e[16] = _, e[17] = L, e[18] = u, e[19] = r, e[20] = p, e[21] = m, e[22] = f, e[23] = y) : y = e[23];
+  let C;
+  e[24] !== v || e[25] !== M || e[26] !== x || e[27] !== y ? (C = /* @__PURE__ */ A("div", { className: "flex w-full flex-col items-center gap-4 px-4 pb-5 pt-4", children: [
     v,
-    _
-  ] }), e[22] = g, e[23] = u, e[24] = v, e[25] = _, e[26] = x) : x = e[26];
-  let b;
-  e[27] !== t || e[28] !== i ? (b = /* @__PURE__ */ o("div", { className: "flex w-full flex-col items-start border-t border-black/10 bg-[#FAFAFA] p-4", children: /* @__PURE__ */ o($e, { trigger: i, state: t }) }), e[27] = t, e[28] = i, e[29] = b) : b = e[29];
-  let B;
-  return e[30] !== y || e[31] !== C || e[32] !== x || e[33] !== b ? (B = /* @__PURE__ */ E("div", { className: y, children: [
-    C,
+    M,
     x,
-    b
-  ] }), e[30] = y, e[31] = C, e[32] = x, e[33] = b, e[34] = B) : B = e[34], B;
+    y
+  ] }), e[24] = v, e[25] = M, e[26] = x, e[27] = y, e[28] = C) : C = e[28];
+  let O;
+  e[29] !== T || e[30] !== N || e[31] !== B || e[32] !== t || e[33] !== i ? (O = /* @__PURE__ */ o("div", { className: "flex w-full flex-col items-start border-t border-black/10 bg-[#FAFAFA] p-4", children: /* @__PURE__ */ o(Xt, { trigger: i, state: t, onPrimaryClick: N, onSecondaryClick: B, isPrimaryLoading: T }) }), e[29] = T, e[30] = N, e[31] = B, e[32] = t, e[33] = i, e[34] = O) : O = e[34];
+  let I;
+  return e[35] !== U || e[36] !== E || e[37] !== C || e[38] !== O ? (I = /* @__PURE__ */ A("div", { className: U, children: [
+    E,
+    C,
+    O
+  ] }), e[35] = U, e[36] = E, e[37] = C, e[38] = O, e[39] = I) : I = e[39], I;
+}
+function Ae(a) {
+  return Array.from({
+    length: a
+  }, () => "");
 }
-function ce(r) {
-  const e = D(54), {
+function rt(a) {
+  const e = D(106), {
     open: i,
     onOpenChange: t,
     trigger: l,
-    state: n,
-    headerTitle: s,
-    bodyTitle: m,
-    infoMessage: d,
-    phoneNumber: f,
-    onPhoneNumberChange: a,
-    onCountryCodeChange: c,
-    existingAccountErrorMessage: h,
-    phonePlaceholder: p,
-    countryCode: M,
-    icon: w,
-    isMobileOverride: $,
-    className: A
-  } = r, I = l === void 0 ? "action" : l, O = n === void 0 ? "addNumber" : n, N = f === void 0 ? "" : f, L = p === void 0 ? Le : p, y = M === void 0 ? Me : M, C = xe(), g = $ ?? C, u = s ?? Ee[I], v = m ?? Ce[I], _ = d ?? ae, x = d == null, [b, B] = ie.useState(y);
-  let W;
-  e[0] !== b || e[1] !== N ? (W = ye(b, N), e[0] = b, e[1] = N, e[2] = W) : W = e[2];
-  const ee = W;
-  let j;
-  e[3] !== t ? (j = () => {
+    state: s,
+    headerTitle: n,
+    bodyTitle: c,
+    infoMessage: m,
+    phoneNumber: u,
+    onPhoneNumberChange: d,
+    onCountryCodeChange: p,
+    step: r,
+    defaultStep: f,
+    onStepChange: h,
+    onExistingAccountLoginClick: _,
+    phoneErrorMessage: L,
+    onPrimaryClick: N,
+    onSecondaryClick: B,
+    isPrimaryLoading: T,
+    maskedRecipient: S,
+    otpHeaderTitle: F,
+    onOtpBack: R,
+    otpError: ie,
+    otpCanResend: k,
+    onOtpResend: P,
+    otpTimerText: H,
+    isOtpSubmitting: U,
+    otpValue: E,
+    onOtpChange: v,
+    otpLength: M,
+    onOtpSubmit: x,
+    otpTitle: y,
+    otpResendLabel: C,
+    otpSubmitLabel: O,
+    existingAccountErrorMessage: I,
+    phonePlaceholder: Je,
+    countryCode: Qe,
+    icon: Be,
+    isMobileOverride: at,
+    closeOnOutsideClick: Ze,
+    className: z
+  } = a, oe = l === void 0 ? "action" : l, de = s === void 0 ? "addNumber" : s, $ = u === void 0 ? "" : u, ne = f === void 0 ? "mobileNumber" : f, Te = F === void 0 ? Bt : F, b = M === void 0 ? 6 : M, Se = y === void 0 ? St : y, ct = C === void 0 ? Rt : C, Re = O === void 0 ? Tt : O, ke = Je === void 0 ? wt : Je, se = Qe === void 0 ? Ct : Qe, Pe = Ze === void 0 ? !0 : Ze, dt = Mt(), re = at ?? dt, w = n ?? At[oe], Ue = c ?? It[oe], Ge = m ?? st, Fe = m == null, [W, et] = G.useState(se), [ut, tt] = G.useState(ne);
+  let ue;
+  e[0] !== b ? (ue = () => Ae(b), e[0] = b, e[1] = ue) : ue = e[1];
+  const [ft, He] = G.useState(ue), mt = r ?? ut, ze = E ?? ft;
+  let fe;
+  e[2] !== b || e[3] !== ze ? (fe = ze.slice(0, b).concat(Ae(b)).slice(0, b), e[2] = b, e[3] = ze, e[4] = fe) : fe = e[4];
+  const $e = fe;
+  let me;
+  e[5] !== W || e[6] !== S || e[7] !== $ ? (me = S ?? Ot(W, $), e[5] = W, e[6] = S, e[7] = $, e[8] = me) : me = e[8];
+  const j = me;
+  let pe;
+  e[9] !== t ? (pe = () => {
     t(!1);
-  }, e[3] = t, e[4] = j) : j = e[4];
-  const te = j;
-  let Y, K;
-  e[5] !== y ? (Y = () => {
-    B(y);
-  }, K = [y], e[5] = y, e[6] = Y, e[7] = K) : (Y = e[6], K = e[7]), ie.useEffect(Y, K);
-  let X;
-  e[8] !== c ? (X = (R) => {
-    B(R), c == null || c(R);
-  }, e[8] = c, e[9] = X) : X = e[9];
-  const le = X;
-  let q, J;
-  e[10] !== g || e[11] !== i ? (q = () => {
-    if (g)
-      return i ? document.body.classList.add(oe) : document.body.classList.remove(oe), ze;
-  }, J = [g, i], e[10] = g, e[11] = i, e[12] = q, e[13] = J) : (q = e[12], J = e[13]), ie.useEffect(q, J);
-  let Q;
-  e[14] !== b || e[15] !== A || e[16] !== h || e[17] !== te || e[18] !== le || e[19] !== w || e[20] !== x || e[21] !== a || e[22] !== N || e[23] !== L || e[24] !== v || e[25] !== u || e[26] !== _ || e[27] !== ee || e[28] !== O || e[29] !== I ? (Q = {
-    trigger: I,
-    state: O,
-    headerTitle: u,
-    bodyTitle: v,
-    infoMessage: _,
-    isDefaultInfoMessage: x,
-    phoneNumber: N,
-    onPhoneNumberChange: a,
-    existingAccountErrorMessage: h,
-    phoneDisplay: ee,
-    phonePlaceholder: L,
-    countryCode: b,
-    onCountryCodeChange: le,
-    icon: w,
-    onClose: te,
-    className: A
-  }, e[14] = b, e[15] = A, e[16] = h, e[17] = te, e[18] = le, e[19] = w, e[20] = x, e[21] = a, e[22] = N, e[23] = L, e[24] = v, e[25] = u, e[26] = _, e[27] = ee, e[28] = O, e[29] = I, e[30] = Q) : Q = e[30];
-  const T = Q;
-  if (g) {
-    let R;
-    e[31] === Symbol.for("react.memo_cache_sentinel") ? (R = se(Re, "flex h-auto max-h-[90vh] w-full flex-col overflow-hidden rounded-t-[16px] border-0 p-0"), e[31] = R) : R = e[31];
-    let F;
-    e[32] !== u ? (F = /* @__PURE__ */ o(ge, { className: "sr-only", children: /* @__PURE__ */ o(Ne, { children: u }) }), e[32] = u, e[33] = F) : F = e[33];
-    let U;
-    e[34] !== T ? (U = /* @__PURE__ */ o(re, { ...T, surface: "drawer" }), e[34] = T, e[35] = U) : U = e[35];
-    let G;
-    e[36] !== F || e[37] !== U ? (G = /* @__PURE__ */ E(ve, { "aria-describedby": void 0, className: R, "data-mobile-number-dialog-drawer-content": !0, children: [
-      F,
-      U
-    ] }), e[36] = F, e[37] = U, e[38] = G) : G = e[38];
-    let Z;
-    return e[39] !== t || e[40] !== i || e[41] !== G ? (Z = /* @__PURE__ */ o(_e, { dismissible: !0, open: i, onOpenChange: t, children: G }), e[39] = t, e[40] = i, e[41] = G, e[42] = Z) : Z = e[42], Z;
-  }
-  let k;
-  e[43] !== u ? (k = /* @__PURE__ */ o(me, { className: "sr-only", children: /* @__PURE__ */ o(he, { children: u }) }), e[43] = u, e[44] = k) : k = e[44];
-  let S;
-  e[45] !== T ? (S = /* @__PURE__ */ o(re, { ...T, surface: "dialog" }), e[45] = T, e[46] = S) : S = e[46];
-  let P;
-  e[47] !== k || e[48] !== S ? (P = /* @__PURE__ */ E(be, { "aria-describedby": void 0, className: "max-w-[320px] overflow-visible rounded-[16px] border-0 bg-transparent p-0 shadow-none outline-none focus:outline-none focus-visible:outline-none", closeOnOutsideClick: !0, showCloseButton: !1, size: "sm", children: [
-    k,
-    S
-  ] }), e[47] = k, e[48] = S, e[49] = P) : P = e[49];
+  }, e[9] = t, e[10] = pe) : pe = e[10];
+  const We = pe;
+  let he, be;
+  e[11] !== se ? (he = () => {
+    et(se);
+  }, be = [se], e[11] = se, e[12] = he, e[13] = be) : (he = e[12], be = e[13]), G.useEffect(he, be);
+  let ge;
+  e[14] !== p ? (ge = (g) => {
+    et(g), p == null || p(g);
+  }, e[14] = p, e[15] = ge) : ge = e[15];
+  const je = ge;
+  let _e;
+  e[16] !== h || e[17] !== r ? (_e = (g) => {
+    r == null && tt(g), h == null || h(g);
+  }, e[16] = h, e[17] = r, e[18] = _e) : _e = e[18];
+  const Y = _e;
+  let Le;
+  e[19] !== v || e[20] !== E ? (Le = (g) => {
+    E == null && He(g), v == null || v(g);
+  }, e[19] = v, e[20] = E, e[21] = Le) : Le = e[21];
+  const Ye = Le;
+  let Ne;
+  e[22] !== Y || e[23] !== _ ? (Ne = () => {
+    _ == null || _(), Y("otp");
+  }, e[22] = Y, e[23] = _, e[24] = Ne) : Ne = e[24];
+  const Ke = Ne;
+  let ve, Ee;
+  e[25] !== ne || e[26] !== i || e[27] !== b || e[28] !== r ? (ve = () => {
+    i || (r == null && tt(ne), He(Ae(b)));
+  }, Ee = [ne, i, b, r], e[25] = ne, e[26] = i, e[27] = b, e[28] = r, e[29] = ve, e[30] = Ee) : (ve = e[29], Ee = e[30]), G.useEffect(ve, Ee);
+  let xe, De;
+  e[31] !== b ? (xe = () => {
+    He((g) => g.length === b ? g : Ae(b));
+  }, De = [b], e[31] = b, e[32] = xe, e[33] = De) : (xe = e[32], De = e[33]), G.useEffect(xe, De);
+  let Me, ye;
+  e[34] !== re || e[35] !== i ? (Me = () => {
+    if (re)
+      return i ? document.body.classList.add(Xe) : document.body.classList.remove(Xe), qt;
+  }, ye = [re, i], e[34] = re, e[35] = i, e[36] = Me, e[37] = ye) : (Me = e[36], ye = e[37]), G.useEffect(Me, ye);
+  let Ce;
+  e[38] !== W || e[39] !== z || e[40] !== I || e[41] !== We || e[42] !== je || e[43] !== Ke || e[44] !== Be || e[45] !== Fe || e[46] !== T || e[47] !== d || e[48] !== N || e[49] !== B || e[50] !== L || e[51] !== $ || e[52] !== ke || e[53] !== Ue || e[54] !== w || e[55] !== Ge || e[56] !== j || e[57] !== de || e[58] !== oe ? (Ce = {
+    trigger: oe,
+    state: de,
+    headerTitle: w,
+    bodyTitle: Ue,
+    infoMessage: Ge,
+    isDefaultInfoMessage: Fe,
+    phoneNumber: $,
+    onPhoneNumberChange: d,
+    existingAccountErrorMessage: I,
+    phoneErrorMessage: L,
+    phoneDisplay: j,
+    phonePlaceholder: ke,
+    countryCode: W,
+    onCountryCodeChange: je,
+    onExistingAccountLogin: Ke,
+    onPrimaryClick: N,
+    onSecondaryClick: B,
+    isPrimaryLoading: T,
+    icon: Be,
+    onClose: We,
+    className: z
+  }, e[38] = W, e[39] = z, e[40] = I, e[41] = We, e[42] = je, e[43] = Ke, e[44] = Be, e[45] = Fe, e[46] = T, e[47] = d, e[48] = N, e[49] = B, e[50] = L, e[51] = $, e[52] = ke, e[53] = Ue, e[54] = w, e[55] = Ge, e[56] = j, e[57] = de, e[58] = oe, e[59] = Ce) : Ce = e[59];
+  const K = Ce;
   let V;
-  return e[50] !== t || e[51] !== i || e[52] !== P ? (V = /* @__PURE__ */ o(pe, { open: i, onOpenChange: t, modal: !0, children: P }), e[50] = t, e[51] = i, e[52] = P, e[53] = V) : V = e[53], V;
+  e[60] !== Y || e[61] !== R ? (V = R ?? (() => Y("mobileNumber")), e[60] = Y, e[61] = R, e[62] = V) : V = e[62];
+  const Ve = H ?? ct;
+  let Oe;
+  e[63] !== z || e[64] !== Ye || e[65] !== U || e[66] !== P || e[67] !== x || e[68] !== $e || e[69] !== k || e[70] !== ie || e[71] !== Te || e[72] !== Re || e[73] !== Se || e[74] !== j || e[75] !== V || e[76] !== Ve ? (Oe = {
+    headerTitle: Te,
+    title: Se,
+    phoneDisplay: j,
+    otp: $e,
+    onOtpChange: Ye,
+    onOtpSubmit: x,
+    onBack: V,
+    otpError: ie,
+    canResend: k,
+    onResend: P,
+    timerText: Ve,
+    submitLabel: Re,
+    isSubmitting: U,
+    className: z
+  }, e[63] = z, e[64] = Ye, e[65] = U, e[66] = P, e[67] = x, e[68] = $e, e[69] = k, e[70] = ie, e[71] = Te, e[72] = Re, e[73] = Se, e[74] = j, e[75] = V, e[76] = Ve, e[77] = Oe) : Oe = e[77];
+  const X = Oe, q = mt === "otp" && de === "existingAccount";
+  if (re) {
+    let g;
+    e[78] === Symbol.for("react.memo_cache_sentinel") ? (g = qe(Ht, "mx-auto flex h-auto max-h-[90vh] w-full max-w-[384px] flex-col overflow-hidden rounded-t-[16px] border-0 p-0"), e[78] = g) : g = e[78];
+    let ee;
+    e[79] !== w ? (ee = /* @__PURE__ */ o(vt, { className: "sr-only", children: /* @__PURE__ */ o(Et, { children: w }) }), e[79] = w, e[80] = ee) : ee = e[80];
+    let te;
+    e[81] !== X || e[82] !== q || e[83] !== K ? (te = q ? /* @__PURE__ */ o(it, { ...X, surface: "drawer" }) : /* @__PURE__ */ o(nt, { ...K, surface: "drawer" }), e[81] = X, e[82] = q, e[83] = K, e[84] = te) : te = e[84];
+    let le;
+    e[85] !== ee || e[86] !== te ? (le = /* @__PURE__ */ A(xt, { "aria-describedby": void 0, className: g, "data-mobile-number-dialog-drawer-content": !0, children: [
+      ee,
+      te
+    ] }), e[85] = ee, e[86] = te, e[87] = le) : le = e[87];
+    let Ie;
+    return e[88] !== t || e[89] !== i || e[90] !== le ? (Ie = /* @__PURE__ */ o(Dt, { dismissible: !0, open: i, onOpenChange: t, children: le }), e[88] = t, e[89] = i, e[90] = le, e[91] = Ie) : Ie = e[91], Ie;
+  }
+  let J;
+  e[92] !== w ? (J = /* @__PURE__ */ o(gt, { className: "sr-only", children: /* @__PURE__ */ o(_t, { children: w }) }), e[92] = w, e[93] = J) : J = e[93];
+  let Q;
+  e[94] !== X || e[95] !== q || e[96] !== K ? (Q = q ? /* @__PURE__ */ o(it, { ...X, surface: "dialog" }) : /* @__PURE__ */ o(nt, { ...K, surface: "dialog" }), e[94] = X, e[95] = q, e[96] = K, e[97] = Q) : Q = e[97];
+  let Z;
+  e[98] !== Pe || e[99] !== J || e[100] !== Q ? (Z = /* @__PURE__ */ A(Lt, { "aria-describedby": void 0, className: "max-w-[384px] overflow-visible rounded-[16px] border-0 bg-transparent p-0 shadow-none outline-none focus:outline-none focus-visible:outline-none", closeOnOutsideClick: Pe, showCloseButton: !1, size: "sm", children: [
+    J,
+    Q
+  ] }), e[98] = Pe, e[99] = J, e[100] = Q, e[101] = Z) : Z = e[101];
+  let we;
+  return e[102] !== t || e[103] !== i || e[104] !== Z ? (we = /* @__PURE__ */ o(Nt, { open: i, onOpenChange: t, modal: !0, children: Z }), e[102] = t, e[103] = i, e[104] = Z, e[105] = we) : we = e[105], we;
 }
-function ze() {
-  return document.body.classList.remove(oe);
+function qt() {
+  return document.body.classList.remove(Xe);
 }
-const tt = ce, lt = ce;
+const ul = rt, fl = rt;
 export {
-  lt as DoctAccountConflictPrompt,
-  tt as DoctMobileNumberDialog,
-  ce as MobileNumberDialog
+  fl as DoctAccountConflictPrompt,
+  ul as DoctMobileNumberDialog,
+  rt as MobileNumberDialog
 };