@incodetech/web 0.0.0-dev-20260313-bc2dab4 → 0.0.0-dev-20260317-ce5d28b

package/dist/flow/styles.css

@@ -5743,6 +5743,10 @@
   margin-bottom: var(--spacing-0, var(--spacing-none, 0px));
 }
 
+.IncodeEkybForm .IncodeAddressAutocomplete {
+  margin-inline: auto;
+}
+
 @media (min-width: 768px) {
   .IncodePageContainer.IncodeEkybPage {
     margin-top: var(--spacing-0, var(--spacing-none, 0px));

package/dist/formField-B2HDj15w.js

@@ -0,0 +1,103 @@
+import { b as I, u as e, B as v } from "./button-Ca1tRSTI.js";
+import "./uiConfig-Z6RT23Sl.js";
+import "./vendor-preact-BXf0bkEs.js";
+import { E as b } from "./errorIcon-BL647nVh.js";
+import { S as y } from "./successIcon-BybULRRU.js";
+import { P as m } from "./page-BVHG3h0V.js";
+import { S as F } from "./spinner-Cx3FPUCD.js";
+import { I as E } from "./dropdownComposed-DBm7cotT.js";
+const L = ({
+  status: i,
+  submittingTitle: t,
+  successTitle: n,
+  failureTitle: d,
+  onRetry: o,
+  onSkip: s,
+  retryLabel: a,
+  skipLabel: f
+}) => {
+  const { t: r } = I();
+  if (i === "submitting") {
+    const c = t ?? r("verification.processing");
+    return /* @__PURE__ */ e(m, { className: "IncodeVerificationResult", children: /* @__PURE__ */ e("div", { className: "IncodeVerificationResult__center", children: [
+      /* @__PURE__ */ e(F, {}),
+      /* @__PURE__ */ e("p", { className: "IncodeVerificationResult__title", children: c })
+    ] }) });
+  }
+  if (i === "success") {
+    const c = n ?? r("verification.successTitle");
+    return /* @__PURE__ */ e(m, { className: "IncodeVerificationResult", children: /* @__PURE__ */ e("div", { className: "IncodeVerificationResult__center", children: [
+      /* @__PURE__ */ e(y, { size: 64 }),
+      /* @__PURE__ */ e("p", { className: "IncodeVerificationResult__title", children: c })
+    ] }) });
+  }
+  const u = d ?? r("verification.failureTitle");
+  return /* @__PURE__ */ e(m, { className: "IncodeVerificationResult", children: [
+    /* @__PURE__ */ e("div", { className: "IncodeVerificationResult__center", children: [
+      /* @__PURE__ */ e(b, { size: 64 }),
+      /* @__PURE__ */ e("p", { className: "IncodeVerificationResult__title", children: u })
+    ] }),
+    /* @__PURE__ */ e("div", { className: "IncodeVerificationResult__actions", children: [
+      o && /* @__PURE__ */ e(v, { onClick: o, "data-testid": "verification-retry", children: a ?? r("common.tryAgain") }),
+      s && /* @__PURE__ */ e(
+        v,
+        {
+          onClick: s,
+          variant: "secondary",
+          "data-testid": "verification-skip",
+          children: f ?? r("common.skip")
+        }
+      )
+    ] })
+  ] });
+};
+function S(i, t) {
+  return t?.fieldName && typeof t.fieldName == "string" ? { ...t, fieldName: i(String(t.fieldName)) } : t;
+}
+function k(i, t, n) {
+  if (t)
+    return i(t, S(i, n));
+}
+const A = ({
+  name: i,
+  label: t,
+  value: n = "",
+  error: d,
+  errorParams: o,
+  type: s = "text",
+  placeholder: a,
+  placeholderParams: f,
+  required: r,
+  readonly: u,
+  maxLength: c,
+  disabled: N,
+  optional: _,
+  onChange: h
+}) => {
+  const { t: l } = I(), p = l(t), V = _ ? `${p} ${l("verification.labels.optional")}` : p;
+  return /* @__PURE__ */ e("div", { className: "IncodeFormField", children: /* @__PURE__ */ e(
+    E,
+    {
+      id: i,
+      label: V,
+      name: i,
+      type: s,
+      value: n,
+      placeholder: a ? l(a, f) : void 0,
+      readOnly: u,
+      disabled: N,
+      maxLength: c,
+      error: k(l, d, o),
+      onInput: (R) => {
+        const g = R.target;
+        h(i, g.value);
+      },
+      "data-testid": `form-field-${i}`
+    }
+  ) });
+};
+export {
+  A as F,
+  L as V,
+  k as t
+};

package/dist/phoneInputComposed-D0oBe-el.js

@@ -0,0 +1,159 @@
+import { u as n } from "./button-Ca1tRSTI.js";
+import { D as Y, d as S, A as k, T as D, y as q, q as y } from "./vendor-preact-BXf0bkEs.js";
+import { g as u, c as G } from "./countries-C9bhJe4u.js";
+import { D as J, I as K } from "./dropdownComposed-DBm7cotT.js";
+import { E as Q } from "./errorIcon-BL647nVh.js";
+import { S as X } from "./successIcon-BybULRRU.js";
+import { A as E, p as W } from "./AsYouType-CpH-Rmtj.js";
+const Z = Y(
+  ({
+    id: a,
+    label: m,
+    countryCode: A = "US",
+    value: c,
+    placeholder: N = "(123) 123-6789",
+    error: r,
+    helper: h,
+    showErrorIcon: j,
+    showHelperIcon: B,
+    disabled: P = !1,
+    disableCountrySelector: L = !1,
+    required: I,
+    onChange: f,
+    "aria-labelledby": T,
+    "data-testid": x,
+    ...z
+  }, F) => {
+    const [d, b] = S(A), [l, C] = S(""), $ = k(!1), H = D(
+      () => G.map((o) => ({
+        value: o.code,
+        label: `${o.emoji} ${o.callingCode} ${o.name}`
+      })),
+      []
+    ), t = D(
+      () => u(d) ?? u("US"),
+      [d]
+    );
+    q(() => {
+      if ($.current || !c || !t) return;
+      $.current = !0;
+      const o = c.startsWith("+") ? c : `+${c}`, e = W(o);
+      if (e?.isValid() && e.country) {
+        e.country !== d && b(e.country);
+        const s = new E(e.country);
+        C(s.input(e.nationalNumber));
+      }
+    }, [c, t, d]);
+    const p = y(
+      (o, e) => {
+        const s = `${e.callingCode}${o.replace(/\D/g, "")}`;
+        try {
+          const w = W(s, e.code);
+          f?.(s, w?.isValid() ?? !1);
+        } catch {
+          f?.(s, !1);
+        }
+      },
+      [f]
+    ), M = y(
+      (o) => {
+        b(o);
+        const e = u(o);
+        e && l && p(l, e);
+      },
+      [l, p]
+    ), U = y(
+      (o) => {
+        const e = o.target.value;
+        if (!t) {
+          C(e);
+          return;
+        }
+        const s = `${t.callingCode}${e}`, R = new E(t.code).input(s).replace(t.callingCode, "").trimStart();
+        C(R), p(e, t);
+      },
+      [t, p]
+    ), V = `${a}-country`, i = `${a}-phone`, g = `${i}-helper`, v = `${i}-error`, O = [h ? g : null, r ? v : null].filter(Boolean).join(" ");
+    return /* @__PURE__ */ n("div", { class: "IncodePhoneInputComposed", children: [
+      m && /* @__PURE__ */ n(
+        "label",
+        {
+          class: "IncodePhoneInputComposedLabel",
+          htmlFor: i,
+          "data-testid": `${a}-label`,
+          children: [
+            m,
+            I && /* @__PURE__ */ n("span", { class: "IncodePhoneInputComposedRequired", children: " *" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ n(
+        J,
+        {
+          id: V,
+          options: H,
+          value: d,
+          onChange: M,
+          disabled: P || L,
+          required: I,
+          searchable: !0,
+          searchPlaceholder: "Search countries...",
+          suppressMessages: !0,
+          "aria-label": "Select country code",
+          renderSelectedLabel: (o) => {
+            const e = u(o.value);
+            return e ? `${e.emoji} ${e.callingCode}` : o.label;
+          },
+          class: "IncodePhoneInputComposedDropdown",
+          siblingElement: /* @__PURE__ */ n(
+            K,
+            {
+              id: i,
+              ref: F,
+              type: "tel",
+              value: l,
+              onInput: U,
+              placeholder: N,
+              error: r,
+              disabled: P,
+              required: I,
+              suppressMessages: !0,
+              "aria-label": m ? void 0 : "Phone number",
+              "aria-labelledby": T,
+              "aria-describedby": O || void 0,
+              "aria-invalid": r ? "true" : void 0,
+              "data-testid": x,
+              ...z
+            }
+          )
+        }
+      ),
+      r && /* @__PURE__ */ n(
+        "div",
+        {
+          class: "IncodePhoneInputComposedErrorWrapper",
+          "data-testid": `${a}-error-wrapper`,
+          children: [
+            j && /* @__PURE__ */ n("div", { class: "IncodePhoneInputComposedIconWrapper", children: /* @__PURE__ */ n(Q, { size: 16 }) }),
+            /* @__PURE__ */ n("p", { id: v, class: "IncodePhoneInputComposedError", children: r })
+          ]
+        }
+      ),
+      h && !r && /* @__PURE__ */ n(
+        "div",
+        {
+          class: "IncodePhoneInputComposedHelperWrapper",
+          "data-testid": `${a}-helper-wrapper`,
+          children: [
+            B && /* @__PURE__ */ n("div", { class: "IncodePhoneInputComposedIconWrapper", children: /* @__PURE__ */ n(X, { size: 16 }) }),
+            /* @__PURE__ */ n("p", { id: g, class: "IncodePhoneInputComposedHelper", children: h })
+          ]
+        }
+      )
+    ] });
+  }
+);
+Z.displayName = "PhoneInputComposed";
+export {
+  Z as P
+};

package/dist/types/extensibility.d.ts

@@ -513,19 +513,27 @@ declare type PermissionsProps = {
     permissionStatus: PermissionStatus_2;
 };
 
-export declare const PhoneInputComposed: FC<PhoneInputComposedProps>;
+export declare const PhoneInputComposed: FunctionalComponent<PropsWithoutRef<PhoneInputComposedProps> & {
+ref?: Ref<HTMLInputElement> | undefined;
+}>;
 
-declare type PhoneInputComposedProps = {
+declare type PhoneInputComposedProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'id' | 'onChange' | 'class'> & PhoneInputOwnProps;
+
+declare type PhoneInputOwnProps = {
     id: string;
     label?: string;
     countryCode?: string;
     value?: string;
     placeholder?: string;
     error?: string;
+    helper?: string;
+    showErrorIcon?: boolean;
+    showHelperIcon?: boolean;
     disabled?: boolean;
     disableCountrySelector?: boolean;
     required?: boolean;
     onChange?: (fullNumber: string, isValid: boolean) => void;
+    'aria-labelledby'?: string;
     'data-testid'?: string;
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@incodetech/web",
-  "version": "0.0.0-dev-20260313-bc2dab4",
+  "version": "0.0.0-dev-20260317-ce5d28b",
   "type": "module",
   "main": "./dist/index.es.js",
   "types": "./dist/types/index.d.ts",
@@ -119,7 +119,7 @@
     "preact-custom-element": "^4.6.0",
     "qrcode": "^1.5.4",
     "tailwindcss": "^4.1.17",
-    "@incodetech/core": "0.0.0-dev-20260313-bc2dab4"
+    "@incodetech/core": "0.0.0-dev-20260317-ce5d28b"
   },
   "devDependencies": {
     "@microsoft/api-extractor": "^7.53.3",

package/dist/ekybModule-DiFpO2sE.js

@@ -1,244 +0,0 @@
-import { b as k, u as t, I as U, a as F, S as $, B as R } from "./button-Ca1tRSTI.js";
-import { SUPPORTED_COUNTRIES as I, DEV_ONLY_COUNTRIES as M, createEkybManager as D } from "@incodetech/core/ekyb";
-import { T as w, y as v, A, k as L } from "./vendor-preact-BXf0bkEs.js";
-import "./uiConfig-Z6RT23Sl.js";
-import "@incodetech/core";
-import { u as P } from "./useFormScrollable-3O3GeT4m.js";
-import { P as O } from "./page-BVHG3h0V.js";
-import { F as T, V as E } from "./formField-C91ckby4.js";
-import { r as _ } from "./incodeModule-aE-LkKwM.js";
-import { D as g, I as S } from "./dropdownComposed-DBm7cotT.js";
-function B(e) {
-  return [...e.toUpperCase()].map((o) => String.fromCodePoint(127462 + o.charCodeAt(0) - 65)).join("");
-}
-const V = {
-  BR: "Brazil",
-  CM: "Cameroon",
-  CN: "China",
-  FR: "France",
-  DE: "Germany",
-  IL: "Israel",
-  IT: "Italy",
-  KE: "Kenya",
-  MX: "Mexico",
-  NG: "Nigeria",
-  ES: "Spain",
-  GB: "United Kingdom",
-  US: "United States"
-};
-function q(e) {
-  const o = V[e] ?? e;
-  return { value: e, label: `${B(e)} ${o}` };
-}
-function G() {
-  if (typeof window > "u") return !1;
-  const { hostname: e } = window.location;
-  return e === "localhost" || e.includes("stage") || e.includes("demo");
-}
-const K = ({
-  value: e,
-  onChange: o
-}) => {
-  const { t: r } = k(), n = w(() => (G() ? [...I, ...M] : [...I]).map(q).sort((u, l) => u.label.localeCompare(l.label)), []);
-  return /* @__PURE__ */ t("div", { className: "IncodeEkybCountrySelector", children: /* @__PURE__ */ t(
-    g,
-    {
-      id: "ekyb-country",
-      label: r("ekyb.country"),
-      value: e,
-      options: n,
-      onChange: o,
-      "data-testid": "ekyb-country-selector"
-    }
-  ) });
-}, N = ({
-  field: e,
-  value: o,
-  error: r,
-  country: n,
-  onChange: c
-}) => {
-  const { t: u } = k(), l = !e.required, m = u(e.label);
-  if (e.type === "dropdown") {
-    const a = l ? `${m} (${u("common.optional")})` : m, b = e.name === "state" ? u("ekyb.selectState") : void 0;
-    return /* @__PURE__ */ t(
-      g,
-      {
-        id: `ekyb-${e.name}`,
-        label: a,
-        placeholder: b,
-        value: o,
-        options: (e.options ?? []).map((i) => ({
-          ...i,
-          label: u(i.label)
-        })),
-        error: r ? u(r) : void 0,
-        searchable: !0,
-        onChange: (i) => c(e.name, i),
-        "data-testid": `ekyb-field-${e.name}`
-      }
-    );
-  }
-  return /* @__PURE__ */ t(
-    T,
-    {
-      name: e.name,
-      label: e.label,
-      value: o,
-      error: r,
-      required: e.required,
-      optional: l,
-      onChange: c
-    }
-  );
-}, z = ({
-  ubos: e,
-  errors: o,
-  canAddUbo: r,
-  onSetField: n,
-  onAdd: c,
-  onRemove: u
-}) => {
-  const { t: l } = k();
-  return e.length === 0 ? null : /* @__PURE__ */ t("div", { className: "IncodeEkybUbos", children: [
-    e.map((m, a) => {
-      const b = a === 0 ? l("ekyb.uboName") : l("ekyb.uboNameWithNumber", { number: a + 1 }), i = a === 0 ? l("ekyb.uboSurname") : l("ekyb.uboSurnameWithNumber", { number: a + 1 }), h = a === 0;
-      return /* @__PURE__ */ t("div", { className: "IncodeEkybUboEntry", children: [
-        /* @__PURE__ */ t(
-          S,
-          {
-            id: `ubo-${a}-name`,
-            label: b,
-            name: `ubo-${a}-name`,
-            value: m.name,
-            error: o[`ubo-${a}-name`] ? l(o[`ubo-${a}-name`]) : void 0,
-            onInput: (d) => n(a, "name", d.target.value),
-            "data-testid": `ekyb-ubo-${a}-name`
-          }
-        ),
-        /* @__PURE__ */ t(
-          S,
-          {
-            id: `ubo-${a}-surname`,
-            label: i,
-            name: `ubo-${a}-surname`,
-            value: m.surname,
-            error: o[`ubo-${a}-surname`] ? l(o[`ubo-${a}-surname`]) : void 0,
-            onInput: (d) => n(
-              a,
-              "surname",
-              d.target.value
-            ),
-            "data-testid": `ekyb-ubo-${a}-surname`
-          }
-        ),
-        !h && /* @__PURE__ */ t(
-          "button",
-          {
-            className: "IncodeEkybRemoveUbo",
-            onClick: () => u(a),
-            type: "button",
-            children: l("common.remove")
-          }
-        )
-      ] }, m.id);
-    }),
-    r && /* @__PURE__ */ t(
-      "button",
-      {
-        className: "IncodeEkybAddUbo",
-        onClick: c,
-        type: "button",
-        "data-testid": "ekyb-add-ubo",
-        children: l("ekyb.addAnotherUbo")
-      }
-    )
-  ] });
-}, W = ({ config: e, onFinish: o, onError: r }) => {
-  const [n, c] = F(() => D({ config: e }), {
-    autoLoad: !1
-  });
-  v(() => {
-    (n.status === "finished" || n.status === "closed") && o?.();
-  }, [n.status, o]);
-  const u = n.status === "error" ? n.errorMessage : void 0;
-  return v(() => {
-    n.status === "error" && r?.(u);
-  }, [n.status, r, u]), n.status === "finished" || n.status === "closed" ? null : n.status === "submitting" ? /* @__PURE__ */ t(E, { status: "submitting" }) : n.status === "success" ? /* @__PURE__ */ t(E, { status: "success" }) : n.status === "error" ? /* @__PURE__ */ t(E, { status: "failure", onRetry: () => c.retry() }) : n.status === "form" ? /* @__PURE__ */ t(Y, { state: n, manager: c }) : null;
-}, f = /* @__PURE__ */ new Set([
-  "street",
-  "houseNo",
-  "addressLine2",
-  "city",
-  "state",
-  "postalCode"
-]), Y = ({ state: e, manager: o }) => {
-  const { country: r, fields: n, values: c, displayErrors: u, isValid: l, ubos: m, canAddUbo: a } = e, { t: b } = k(), i = A(null), h = P(i, n.length), d = n.filter((s) => !f.has(s.name)), C = n.filter((s) => f.has(s.name));
-  return /* @__PURE__ */ t(O, { className: `IncodeEkybPage${h ? " IncodeEkybPageScrollable" : ""}`, title: b("ekyb.title"), children: [
-    /* @__PURE__ */ t("div", { ref: i, className: "IncodeEkybForm", children: [
-      /* @__PURE__ */ t(
-        K,
-        {
-          value: r,
-          onChange: (s) => o.setCountry(s)
-        }
-      ),
-      d.map((s) => /* @__PURE__ */ t(
-        N,
-        {
-          field: s,
-          value: c[s.name] ?? "",
-          error: u[s.name],
-          country: r,
-          onChange: (y, p) => o.setField(y, p)
-        },
-        s.name
-      )),
-      C.length > 0 && /* @__PURE__ */ t(L, { children: [
-        /* @__PURE__ */ t("h3", { className: "IncodeEkybSectionHeader", children: b("ekyb.addressDetails") }),
-        C.map((s) => /* @__PURE__ */ t(
-          N,
-          {
-            field: s,
-            value: c[s.name] ?? "",
-            error: u[s.name],
-            country: r,
-            onChange: (y, p) => o.setField(y, p)
-          },
-          s.name
-        ))
-      ] }),
-      /* @__PURE__ */ t(
-        z,
-        {
-          ubos: m,
-          errors: u,
-          canAddUbo: a,
-          onSetField: (s, y, p) => o.setUboField(s, y, p),
-          onAdd: () => o.addUbo(),
-          onRemove: (s) => o.removeUbo(s)
-        }
-      )
-    ] }),
-    /* @__PURE__ */ t("div", { className: "IncodeEkybFooter", children: [
-      /* @__PURE__ */ t($, { size: 32 }),
-      /* @__PURE__ */ t(
-        R,
-        {
-          onClick: () => o.submit(),
-          disabled: !l,
-          "data-testid": "ekyb-submit",
-          children: b("ekyb.continue")
-        }
-      )
-    ] })
-  ] });
-}, j = ({
-  config: e,
-  onFinish: o,
-  onError: r
-}) => /* @__PURE__ */ t(U, { children: e ? /* @__PURE__ */ t(W, { config: e, onFinish: o, onError: r }) : null });
-_(j, "incode-ekyb");
-export {
-  j as EkybModule
-};