@incodetech/web 0.0.0-dev-20260313-8b7649e → 0.0.0-dev-20260313-bc2dab4

package/dist/phone/phone.es.js

@@ -1,38 +1,48 @@
-import { r as f, u as e, I as P, a as O, S as b, B as I } from "../incodeModule-DRRax-fx.js";
+import { u as e, I as P, a as O, S as b, B as I } from "../button-Ca1tRSTI.js";
 import { createPhoneManager as C } from "@incodetech/core/phone";
 import { d as E } from "../vendor-preact-BXf0bkEs.js";
 import "@incodetech/core";
-import { O as v } from "../otpInput-CUC4ePyO.js";
-import { P as p } from "../page-BIegWWXP.js";
-import { PhoneInput as y } from "../phoneInput-CqWsl1aH.js";
-const w = ({ config: n, onFinish: o, onError: r }) => {
-  const [t, s] = O(() => {
-    if (!n)
-      throw new Error("Phone config is required");
-    return C({ config: n });
-  }), [l, c] = E(!1);
+import { O as y } from "../otpInput-cazUY73p.js";
+import { P as l } from "../page-BVHG3h0V.js";
+import { r as v } from "../incodeModule-aE-LkKwM.js";
+import { PhoneInput as w } from "../phoneInput-Duuochsh.js";
+const S = ({
+  config: n,
+  manager: i,
+  onFinish: r,
+  onError: a
+}) => {
+  const [t, s] = O(
+    () => {
+      if (i) return i;
+      if (!n)
+        throw new Error("Phone config is required");
+      return C({ config: n });
+    },
+    { manageLifecycle: !i }
+  ), [c, m] = E(!1);
   if (t.status === "idle" || t.status === "loadingPrefill" || t.status === "inputting" || t.status === "submitting" || t.status === "sendingOtp") {
-    const i = t.status === "idle" || t.status === "loadingPrefill" || t.status === "submitting" || t.status === "sendingOtp", a = t.status === "inputting" ? t.countryCode : "US", h = t.status === "inputting" ? t.phonePrefix : "+1", m = t.status === "inputting" ? t.prefilledPhone : void 0, g = t.status === "inputting" ? t.phoneError : void 0;
+    const o = t.status === "idle" || t.status === "loadingPrefill" || t.status === "submitting" || t.status === "sendingOtp", u = t.status === "inputting" ? t.countryCode : "US", h = t.status === "inputting" ? t.phonePrefix : "+1", f = t.status === "inputting" ? t.prefilledPhone : void 0, g = t.status === "inputting" ? t.phoneError : void 0;
     return /* @__PURE__ */ e(
-      p,
+      l,
       {
         className: "IncodePhonePage",
         title: "Verify Phone",
         subtitle: n.otpVerification ? "We will send you a verification code" : void 0,
         children: [
           /* @__PURE__ */ e(
-            y,
+            w,
             {
-              countryCode: a,
+              countryCode: u,
               phonePrefix: h,
-              prefilledPhone: m,
+              prefilledPhone: f,
               phoneError: g,
               optinEnabled: n.optinEnabled,
-              disabled: i,
-              onPhoneChange: (u, d) => {
-                s.setPhoneNumber(u, d), c(d);
+              disabled: o,
+              onPhoneChange: (d, p) => {
+                s.setPhoneNumber(d, p), m(p);
               },
-              onOptInChange: (u) => s.setOptInGranted(u)
+              onOptInChange: (d) => s.setOptInGranted(d)
             }
           ),
           /* @__PURE__ */ e(b, {}),
@@ -40,8 +50,8 @@ const w = ({ config: n, onFinish: o, onError: r }) => {
             I,
             {
               onClick: () => s.submit(),
-              disabled: !l,
-              isLoading: i,
+              disabled: !c,
+              isLoading: o,
               "data-testid": "phone-submit",
               children: "Continue"
             }
@@ -51,30 +61,43 @@ const w = ({ config: n, onFinish: o, onError: r }) => {
     );
   }
   if (t.status === "awaitingOtp" || t.status === "verifyingOtp" || t.status === "otpError") {
-    const i = t.status === "verifyingOtp";
+    const o = t.status === "verifyingOtp";
     return /* @__PURE__ */ e(
-      p,
+      l,
       {
         className: "IncodePhonePage IncodePhoneOtpPage",
         title: "Enter Verification Code",
         children: /* @__PURE__ */ e(
-          v,
+          y,
           {
             resendTimer: t.status === "awaitingOtp" ? t.resendTimer : 0,
             canResend: t.status === "awaitingOtp" ? t.canResend : !1,
             error: t.status === "otpError" ? t.error : void 0,
-            onSubmit: (a) => s.submitOtp(a),
+            onSubmit: (u) => s.submitOtp(u),
             onResend: () => s.resendOtp(),
             onBack: () => s.back(),
-            isLoading: i
+            isLoading: o
           }
         )
       }
     );
   }
-  return t.status === "finished" ? (o?.(), null) : (t.status === "error" && r?.(t.error), null);
-}, S = ({ config: n, onFinish: o, onError: r }) => /* @__PURE__ */ e(P, { children: n ? /* @__PURE__ */ e(w, { config: n, onFinish: o, onError: r }) : null });
-f(S, "incode-phone");
+  return t.status === "finished" ? (r?.(), null) : (t.status === "error" && a?.(t.error), null);
+}, V = ({
+  config: n,
+  manager: i,
+  onFinish: r,
+  onError: a
+}) => /* @__PURE__ */ e(P, { children: n ? /* @__PURE__ */ e(
+  S,
+  {
+    config: n,
+    manager: i,
+    onFinish: r,
+    onError: a
+  }
+) : null });
+v(V, "incode-phone");
 export {
-  S as Phone
+  V as Phone
 };

package/dist/{phoneInput-CqWsl1aH.js → phoneInput-Duuochsh.js}

@@ -1,8 +1,8 @@
-import { u as n, S } from "./incodeModule-DRRax-fx.js";
+import { u as n, S } from "./button-Ca1tRSTI.js";
 import { d as p, A as D, y as u, k as $ } from "./vendor-preact-BXf0bkEs.js";
-import { g as b, c as g } from "./countries-3p5tkqcx.js";
-import { C as z } from "./chevronDown-CInnOfOW.js";
-import { p as k, A } from "./AsYouType-BtKe6-rC.js";
+import { g as b, c as g } from "./countries-C9bhJe4u.js";
+import { C as z } from "./chevronDown-BUaOuf9J.js";
+import { p as k, A } from "./AsYouType-CpH-Rmtj.js";
 const M = ({
   countryCode: P,
   prefilledPhone: a,

package/dist/phoneInputComposed-B1gXoSzr.js

@@ -0,0 +1,107 @@
+import { u as $ } from "./button-Ca1tRSTI.js";
+import { d as g, A as q, T as I, y as B, q as u } from "./vendor-preact-BXf0bkEs.js";
+import { c as E, g as l } from "./countries-C9bhJe4u.js";
+import { I as F, D as M } from "./dropdownComposed-DBm7cotT.js";
+import { p as P, A as b } from "./AsYouType-CpH-Rmtj.js";
+const H = ({
+  id: p,
+  label: w,
+  countryCode: S = "US",
+  value: r,
+  placeholder: A = "(123) 123-6789",
+  error: m,
+  disabled: f = !1,
+  disableCountrySelector: D = !1,
+  required: N,
+  onChange: d,
+  "data-testid": T
+}) => {
+  const [s, h] = g(S), [a, i] = g(""), y = q(!1), j = I(
+    () => E.map((t) => ({
+      value: t.code,
+      label: `${t.emoji} ${t.callingCode} ${t.name}`
+    })),
+    []
+  ), o = I(
+    () => l(s) ?? l("US"),
+    [s]
+  );
+  B(() => {
+    if (y.current || !r || !o) return;
+    y.current = !0;
+    const t = r.startsWith("+") ? r : `+${r}`, e = P(t);
+    if (e?.isValid() && e.country) {
+      e.country !== s && h(e.country);
+      const n = new b(e.country);
+      i(n.input(e.nationalNumber));
+    }
+  }, [r, o, s]);
+  const c = u(
+    (t, e) => {
+      const n = `${e.callingCode}${t.replace(/\D/g, "")}`;
+      try {
+        const C = P(n, e.code);
+        d?.(n, C?.isValid() ?? !1);
+      } catch {
+        d?.(n, !1);
+      }
+    },
+    [d]
+  ), v = u(
+    (t) => {
+      h(t);
+      const e = l(t);
+      e && a && c(a, e);
+    },
+    [a, c]
+  ), x = u(
+    (t) => {
+      const e = t.target.value;
+      if (!o) {
+        i(e);
+        return;
+      }
+      const n = `${o.callingCode}${e}`, V = new b(o.code).input(n).replace(o.callingCode, "").trimStart();
+      i(V), c(e, o);
+    },
+    [o, c]
+  ), L = `${p}-country`, U = `${p}-phone`;
+  return /* @__PURE__ */ $(
+    M,
+    {
+      id: L,
+      label: w,
+      options: j,
+      value: s,
+      onChange: v,
+      error: m,
+      disabled: f || D,
+      required: N,
+      searchable: !0,
+      searchPlaceholder: "Search countries...",
+      renderSelectedLabel: (t) => {
+        const e = l(t.value);
+        return e ? `${e.emoji} ${e.callingCode}` : t.label;
+      },
+      class: "IncodePhoneInputComposed",
+      siblingElement: /* @__PURE__ */ $(
+        F,
+        {
+          id: U,
+          type: "tel",
+          value: a,
+          onInput: x,
+          placeholder: A,
+          error: m,
+          disabled: f,
+          suppressMessages: !0,
+          "aria-label": "Phone number",
+          "data-testid": T
+        }
+      )
+    }
+  );
+};
+export {
+  H as P
+};

package/dist/{processing-BvPiE-YI.js → processing-CDgOueI3.js}

@@ -1,6 +1,6 @@
-import { b as i, u as t } from "./incodeModule-DRRax-fx.js";
-import { S as e } from "./spinner-BI8nVld2.js";
-import "./uiConfig-DisZ_yFB.js";
+import { b as i, u as t } from "./button-Ca1tRSTI.js";
+import { S as e } from "./spinner-Cx3FPUCD.js";
+import "./uiConfig-Z6RT23Sl.js";
 import "./vendor-preact-BXf0bkEs.js";
 const s = () => {
   const { t: r } = i();

package/dist/selfie/selfie.es.js

@@ -1,32 +1,43 @@
-import { r as a, u as r, I as o, a as u } from "../incodeModule-DRRax-fx.js";
+import { u as t, I as o, a as u } from "../button-Ca1tRSTI.js";
 import { createSelfieManager as l } from "@incodetech/core/selfie";
 import "../vendor-preact-BXf0bkEs.js";
 import "@incodetech/core";
-import { P as m } from "../baseTutorial-BmPYrCn3.js";
-import { P as f } from "../processing-BvPiE-YI.js";
-import { T as p, C as c } from "../tutorial-DdfxR0ct.js";
-const d = ({
+import { P as m } from "../permissions-DwF2Ez1N.js";
+import { r as f } from "../incodeModule-aE-LkKwM.js";
+import { P as c } from "../processing-CDgOueI3.js";
+import { T as p, C as d } from "../tutorial-Dagmccxh.js";
+const g = ({
   config: e,
-  onFinish: i,
-  onError: s
+  manager: s,
+  onFinish: n,
+  onError: i
 }) => {
-  const [t, n] = u(() => l({ config: e }));
-  return t.status === "idle" || t.status === "loading" ? null : t.status === "tutorial" ? /* @__PURE__ */ r(p, { manager: n }) : t.status === "permissions" ? /* @__PURE__ */ r(
+  const [r, a] = u(
+    () => s ?? l({ config: e }),
+    { manageLifecycle: !s }
+  );
+  return r.status === "idle" || r.status === "loading" ? null : r.status === "tutorial" ? /* @__PURE__ */ t(p, { manager: a }) : r.status === "permissions" ? /* @__PURE__ */ t(
     m,
     {
-      manager: n,
-      permissionStatus: t.permissionStatus
+      manager: a,
+      permissionStatus: r.permissionStatus
     }
-  ) : t.status === "capture" ? /* @__PURE__ */ r(c, { manager: n, state: t }) : t.status === "processing" ? /* @__PURE__ */ r(f, {}) : t.status === "finished" ? (i?.(), null) : t.status === "closed" ? (s?.(void 0), null) : (t.status === "error" && s?.(t.error), null);
-}, g = ({ config: e, onFinish: i, onError: s }) => /* @__PURE__ */ r(o, { children: /* @__PURE__ */ r("main", { class: "IncodeSelfieMain", children: e ? /* @__PURE__ */ r(
-  d,
+  ) : r.status === "capture" ? /* @__PURE__ */ t(d, { manager: a, state: r }) : r.status === "processing" ? /* @__PURE__ */ t(c, {}) : r.status === "finished" ? (n?.(), null) : r.status === "closed" ? (i?.(void 0), null) : (r.status === "error" && i?.(r.error), null);
+}, S = ({
+  config: e,
+  manager: s,
+  onFinish: n,
+  onError: i
+}) => /* @__PURE__ */ t(o, { children: /* @__PURE__ */ t("main", { class: "IncodeSelfieMain", children: e ? /* @__PURE__ */ t(
+  g,
   {
     config: e,
-    onFinish: i,
-    onError: s
+    manager: s,
+    onFinish: n,
+    onError: i
   }
 ) : null }) });
-a(g, "incode-selfie");
+f(S, "incode-selfie");
 export {
-  g as Selfie
+  S as Selfie
 };

package/dist/selfie/styles.css

@@ -103,6 +103,10 @@
     display: flex;
   }
 
+  .grid {
+    display: grid;
+  }
+
   .hidden {
     display: none;
   }
@@ -111,6 +115,10 @@
     display: inline-flex;
   }
 
+  .flex-shrink {
+    flex-shrink: 1;
+  }
+
   .transform {
     transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
   }

package/dist/{spinner-BI8nVld2.js → spinner-Cx3FPUCD.js}

@@ -1,8 +1,8 @@
-import { u as e, d as p, L as h, S as o } from "./incodeModule-DRRax-fx.js";
-import { D as S, A as u, y as I, k as i } from "./vendor-preact-BXf0bkEs.js";
-const m = S(
+import { u as e, d as l, L as h, S as o } from "./button-Ca1tRSTI.js";
+import { D as y, A as u, y as I, k as i } from "./vendor-preact-BXf0bkEs.js";
+const S = y(
   ({ children: n, className: r, ...s }, a) => /* @__PURE__ */ e("h2", { ref: a, class: `IncodeTitle ${r ?? ""}`, ...s, children: n })
-), g = ({ children: n, className: r }) => /* @__PURE__ */ e("h4", { class: `IncodeTypographyH4 ${r ?? ""}`, children: n }), z = ({ children: n, className: r }) => /* @__PURE__ */ e("h5", { class: `IncodeTypographyH5 ${r ?? ""}`, children: n }), y = {
+), H = ({ children: n, className: r }) => /* @__PURE__ */ e("h1", { class: `IncodeTypographyH1 ${r ?? ""}`, children: n }), f = ({ children: n, className: r }) => /* @__PURE__ */ e("h3", { class: `IncodeTypographyH3 ${r ?? ""}`, children: n }), z = ({ children: n, className: r }) => /* @__PURE__ */ e("h4", { class: `IncodeTypographyH4 ${r ?? ""}`, children: n }), $ = ({ children: n, className: r }) => /* @__PURE__ */ e("h5", { class: `IncodeTypographyH5 ${r ?? ""}`, children: n }), T = {
   small: 24,
   medium: 48,
   large: 64
@@ -13,11 +13,11 @@ const m = S(
   fullScreen: a = !0,
   className: d
 }) => {
-  const l = y[s], c = u(null);
+  const p = T[s], c = u(null);
   I(() => {
     n && c.current?.focus();
   }, [n]);
-  const t = p(
+  const t = l(
     "IncodeSpinner",
     a && "IncodeSpinnerFullScreen",
     d
@@ -33,12 +33,12 @@ const m = S(
       role: "status",
       "aria-live": "polite",
       children: /* @__PURE__ */ e("div", { class: "IncodeSpinnerContent", children: [
-        /* @__PURE__ */ e(h, { size: l }),
+        /* @__PURE__ */ e(h, { size: p }),
         (n || r) && /* @__PURE__ */ e(i, { children: [
           /* @__PURE__ */ e(o, { size: 16 }),
           /* @__PURE__ */ e("div", { class: "IncodeSpinnerText", children: [
             n && /* @__PURE__ */ e(
-              m,
+              S,
               {
                 ref: c,
                 tabIndex: -1,
@@ -58,7 +58,9 @@ const m = S(
 };
 export {
   v as S,
-  m as T,
-  g as a,
-  z as b
+  S as T,
+  H as a,
+  f as b,
+  z as c,
+  $ as d
 };

package/dist/{successIcon-BaTWSwWN.js → successIcon-BybULRRU.js}

@@ -1,4 +1,4 @@
-import { u as t } from "./incodeModule-DRRax-fx.js";
+import { u as t } from "./button-Ca1tRSTI.js";
 const i = ({ size: s = 64 }) => /* @__PURE__ */ t(
   "svg",
   {

package/dist/{tutorial-DdfxR0ct.js → tutorial-Dagmccxh.js}

@@ -1,11 +1,11 @@
-import { u as t, S as T, b as O, d as w, B as A, L as B } from "./incodeModule-DRRax-fx.js";
+import { u as t, S as T, b as O, d as w, B as A, L as B } from "./button-Ca1tRSTI.js";
 import { A as s, y as E, g as F, D as M, q as V, k as I, d as h } from "./vendor-preact-BXf0bkEs.js";
-import "./uiConfig-DisZ_yFB.js";
-import { S as y } from "./successIcon-BaTWSwWN.js";
-import { P as D } from "./page-BIegWWXP.js";
-import { T as N, S as P } from "./spinner-BI8nVld2.js";
-import { E as H } from "./errorContent-Dcw7Uy36.js";
-import { B as x } from "./baseTutorial-BmPYrCn3.js";
+import "./uiConfig-Z6RT23Sl.js";
+import { S as y } from "./successIcon-BybULRRU.js";
+import { P as D } from "./page-BVHG3h0V.js";
+import { T as N, S as P } from "./spinner-Cx3FPUCD.js";
+import { E as H } from "./errorContent-yUAdbZ5o.js";
+import { B as x } from "./permissions-DwF2Ez1N.js";
 const L = ({
   icon: i,
   title: n,

package/dist/types/authentication.d.ts

@@ -1,18 +1,23 @@
 import { AuthenticationConfig } from '@incodetech/core/authentication';
+import { AuthenticationManager } from '@incodetech/core/authentication';
 import { FC } from 'preact/compat';
 
 export declare const Authentication: FC<AuthenticationProps>;
 
 declare type AuthenticationProps = IncodeModuleProps<AuthenticationConfig & {
     authHint?: string;
-}>;
+}, void, AuthenticationManager>;
 
-declare type IncodeModuleProps<TConfig, TResult = void> = {
+declare type IncodeModuleProps<TConfig, TResult = void, TManager = unknown> = {
     /**
      * Module configuration required to render the flow.
      * For Web Components, this is typically assigned via `element.config = ...`.
      */
     config?: TConfig;
+    /**
+     * Optional pre-built manager. When provided, the module does not create or manage the manager lifecycle.
+     */
+    manager?: TManager;
     /**
      * Callback invoked when the module completes successfully.
      * @param result - Optional result data from the module completion
@@ -28,6 +33,8 @@ export { }
 
 declare global {
     interface HTMLElementTagNameMap {
-        'incode-authentication': HTMLElement & IncodeModuleProps<AuthenticationConfig & { authHint?: string }>;
+        'incode-authentication': HTMLElement & IncodeModuleProps<AuthenticationConfig & { authHint?: string },
+  void,
+  AuthenticationManager>;
     }
 }

package/dist/types/curp-validation.d.ts

@@ -5,12 +5,16 @@ export declare const CurpValidation: FC<CurpValidationProps>;
 
 declare type CurpValidationProps = IncodeModuleProps<CurpValidationConfig>;
 
-declare type IncodeModuleProps<TConfig, TResult = void> = {
+declare type IncodeModuleProps<TConfig, TResult = void, TManager = unknown> = {
     /**
      * Module configuration required to render the flow.
      * For Web Components, this is typically assigned via `element.config = ...`.
      */
     config?: TConfig;
+    /**
+     * Optional pre-built manager. When provided, the module does not create or manage the manager lifecycle.
+     */
+    manager?: TManager;
     /**
      * Callback invoked when the module completes successfully.
      * @param result - Optional result data from the module completion

package/dist/types/email.d.ts

@@ -1,4 +1,5 @@
 import { EmailConfig } from '@incodetech/core/email';
+import { EmailManager } from '@incodetech/core/email';
 import { FC } from 'preact/compat';
 
 /**
@@ -29,14 +30,18 @@ export declare const Email: FC<EmailProps>;
 /**
  * Props for the Email component
  */
-declare type EmailProps = IncodeModuleProps<EmailConfig>;
+declare type EmailProps = IncodeModuleProps<EmailConfig, void, EmailManager>;
 
-declare type IncodeModuleProps<TConfig, TResult = void> = {
+declare type IncodeModuleProps<TConfig, TResult = void, TManager = unknown> = {
     /**
      * Module configuration required to render the flow.
      * For Web Components, this is typically assigned via `element.config = ...`.
      */
     config?: TConfig;
+    /**
+     * Optional pre-built manager. When provided, the module does not create or manage the manager lifecycle.
+     */
+    manager?: TManager;
     /**
      * Callback invoked when the module completes successfully.
      * @param result - Optional result data from the module completion
@@ -52,6 +57,6 @@ export { }
 
 declare global {
     interface HTMLElementTagNameMap {
-        'incode-email': HTMLElement & IncodeModuleProps<EmailConfig>;
+        'incode-email': HTMLElement & IncodeModuleProps<EmailConfig, void, EmailManager>;
     }
 }