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

package/dist/addressAutocomplete-CL7IcYGQ.js

@@ -0,0 +1,151 @@
+import { d, y as M, A as H, q as F } from "./vendor-preact-BXf0bkEs.js";
+import { b as K, u as l } from "./button-Ca1tRSTI.js";
+import "./uiConfig-Z6RT23Sl.js";
+import { t as Q } from "./formField-B2HDj15w.js";
+import { I as R } from "./dropdownComposed-DBm7cotT.js";
+import "@incodetech/core";
+import { u as q } from "./useMediaQuery-CiSMgDyi.js";
+function G(c, f) {
+  const [A, h] = d(!1);
+  return M(() => {
+    const o = c.current;
+    if (!o) return;
+    const i = () => h(o.scrollHeight > o.clientHeight);
+    i();
+    const u = new ResizeObserver(i);
+    return u.observe(o), () => u.disconnect();
+  }, [f, c]), A;
+}
+const J = ({
+  label: c,
+  value: f,
+  error: A,
+  errorParams: h,
+  suggestions: o,
+  readonly: i,
+  optional: u,
+  onChange: w,
+  onSearch: k,
+  onSelect: N
+}) => {
+  const { t: n } = K(), [x, a] = d(!1), [D, m] = d(!1), [C, S] = d(""), [s, r] = d(-1), v = H(null), p = "ekyc-address-listbox", I = q(), g = n(c), E = u ? `${g} (${n("common.optional")})` : g;
+  M(() => {
+    function e(t) {
+      v.current && !v.current.contains(t.target) && a(!1);
+    }
+    return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+  }, []), M(() => {
+    r(-1);
+  }, [o]);
+  const b = F(
+    (e) => {
+      N(e), a(!1), m(!1), r(-1);
+    },
+    [N]
+  ), $ = (e) => {
+    w(e), e.length >= 3 ? I ? (m(!0), S(e)) : (k(e), a(!0)) : a(!1);
+  }, O = (e) => {
+    !x || o.length === 0 || (e.key === "ArrowDown" ? (e.preventDefault(), r((t) => t < o.length - 1 ? t + 1 : 0)) : e.key === "ArrowUp" ? (e.preventDefault(), r((t) => t > 0 ? t - 1 : o.length - 1)) : e.key === "Enter" && s >= 0 ? (e.preventDefault(), b(o[s])) : e.key === "Escape" && (a(!1), r(-1)));
+  }, y = !I && x && o.length > 0, L = y && s >= 0 ? `${p}-option-${s}` : void 0;
+  return /* @__PURE__ */ l("div", { className: "IncodeAddressAutocomplete", ref: v, children: [
+    /* @__PURE__ */ l(
+      R,
+      {
+        id: "ekyc-street",
+        label: E,
+        name: "street",
+        value: f,
+        readOnly: i,
+        error: Q(n, A, h),
+        onInput: (e) => $(e.target.value),
+        onKeyDown: O,
+        role: "combobox",
+        "aria-expanded": y,
+        "aria-controls": p,
+        "aria-activedescendant": L,
+        "aria-autocomplete": "list",
+        "data-testid": "ekyc-address-input"
+      }
+    ),
+    y && /* @__PURE__ */ l(
+      "ul",
+      {
+        id: p,
+        role: "listbox",
+        className: "IncodeAddressAutocompleteSuggestions",
+        children: o.map((e, t) => /* @__PURE__ */ l(
+          "li",
+          {
+            id: `${p}-option-${t}`,
+            role: "option",
+            "aria-selected": t === s,
+            className: `IncodeAddressAutocompleteSuggestion${t === s ? "IncodeAddressAutocompleteSuggestionActive" : ""}`,
+            onClick: () => b(e),
+            children: e.label
+          },
+          e.id
+        ))
+      }
+    ),
+    I && D && /* @__PURE__ */ l("div", { className: "IncodeAddressAutocompleteModalOverlay", children: /* @__PURE__ */ l("div", { className: "IncodeAddressAutocompleteModal", children: [
+      /* @__PURE__ */ l("div", { className: "IncodeAddressAutocompleteModalHeader", children: [
+        /* @__PURE__ */ l("h3", { children: n("verification.addressSearch") }),
+        /* @__PURE__ */ l(
+          "button",
+          {
+            className: "IncodeAddressAutocompleteModalClose",
+            onClick: () => m(!1),
+            type: "button",
+            children: "×"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ l("div", { className: "IncodeAddressAutocompleteModalBody", children: [
+        /* @__PURE__ */ l(
+          "input",
+          {
+            className: "IncodeAddressAutocompleteModalInput",
+            type: "text",
+            value: C,
+            placeholder: n("verification.addressPlaceholder"),
+            onInput: (e) => {
+              const t = e.target.value;
+              S(t), t.length >= 3 && k(t);
+            },
+            autoFocus: !0
+          }
+        ),
+        o.length > 0 && /* @__PURE__ */ l(
+          "ul",
+          {
+            role: "listbox",
+            className: "IncodeAddressAutocompleteModalSuggestions",
+            children: o.map((e) => /* @__PURE__ */ l(
+              "li",
+              {
+                role: "option",
+                className: "IncodeAddressAutocompleteModalSuggestion",
+                onClick: () => b(e),
+                children: e.label
+              },
+              e.id
+            ))
+          }
+        ),
+        /* @__PURE__ */ l(
+          "button",
+          {
+            className: "IncodeAddressAutocompleteEnterManually",
+            onClick: () => m(!1),
+            type: "button",
+            children: n("verification.enterManually")
+          }
+        )
+      ] })
+    ] }) })
+  ] });
+};
+export {
+  J as A,
+  G as u
+};

package/dist/base.css

@@ -882,13 +882,66 @@
   font-family: inherit;
   display: inline-block;
 }
-.IncodePhoneInputComposed .IncodeDropdownComposedTrigger {
+.IncodePhoneInputComposed {
+  width: 100%;
+  max-width: 420px;
+  position: relative;
+}
+.IncodePhoneInputComposedLabel {
+  margin: var(--spacing-0, var(--spacing-none, 0px));
+  margin-bottom: var(--spacing-8, var(--spacing-8, 8px));
+  font-family: var(--typography-label-family);
+  font-size: var(--typography-label-m-size);
+  font-weight: var(--typography-label-m-weight);
+  line-height: var(--typography-label-m-line-height);
+  letter-spacing: var(--typography-label-m-letter-spacing);
+  display: inline-block;
+}
+.IncodePhoneInputComposedRequired {
+  color: var(--color-input-text-helper-negative, var(--input-text-helper-negative));
+}
+.IncodePhoneInputComposedDropdown {
+  max-width: none;
+}
+.IncodePhoneInputComposedDropdown .IncodeDropdownComposedTrigger {
   flex-shrink: 0;
   width: auto;
+  min-width: 120px;
 }
-.IncodePhoneInputComposed .IncodeDropdownComposedSibling .IncodeInputComposed, .IncodePhoneInputComposed .IncodeDropdownComposedSibling .IncodeInput {
+.IncodePhoneInputComposedDropdown .IncodeDropdownComposedSibling .IncodeInputComposed, .IncodePhoneInputComposedDropdown .IncodeDropdownComposedSibling .IncodeInput {
   max-width: none;
 }
+.IncodePhoneInputComposedErrorWrapper, .IncodePhoneInputComposedHelperWrapper {
+  margin-top: var(--spacing-8, var(--spacing-8, 8px));
+  align-items: center;
+  display: flex;
+}
+.IncodePhoneInputComposedIconWrapper {
+  margin-right: var(--spacing-8, var(--spacing-8, 8px));
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+.IncodePhoneInputComposedError {
+  margin: var(--spacing-0, var(--spacing-none, 0px));
+  font-family: var(--typography-body-family);
+  font-size: var(--typography-body-m-regular-size);
+  font-weight: var(--typography-body-m-regular-weight);
+  line-height: var(--typography-body-m-regular-line-height);
+  letter-spacing: var(--typography-body-m-regular-letter-spacing);
+  color: var(--color-input-text-helper-negative, var(--input-text-helper-negative));
+  display: inline-block;
+}
+.IncodePhoneInputComposedHelper {
+  margin: var(--spacing-0, var(--spacing-none, 0px));
+  font-family: var(--typography-body-family);
+  font-size: var(--typography-body-m-regular-size);
+  font-weight: var(--typography-body-m-regular-weight);
+  line-height: var(--typography-body-m-regular-line-height);
+  letter-spacing: var(--typography-body-m-regular-letter-spacing);
+  color: var(--color-input-text-helper-default, var(--input-text-helper-default));
+  display: inline-block;
+}
 .IncodeOtpInput {
   flex-direction: column;
   flex: 1;

package/dist/ekyb/styles.css

@@ -29,6 +29,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/ekybModule-CV7jE8qz.js

@@ -0,0 +1,299 @@
+import { b as k, u as o, I as w, a as D, S as L, B as T } from "./button-Ca1tRSTI.js";
+import { SUPPORTED_COUNTRIES as F, DEV_ONLY_COUNTRIES as O, createEkybManager as _ } from "@incodetech/core/ekyb";
+import { T as q, y as g, A as S, k as B } from "./vendor-preact-BXf0bkEs.js";
+import "./uiConfig-Z6RT23Sl.js";
+import "@incodetech/core";
+import { u as V, A as G } from "./addressAutocomplete-CL7IcYGQ.js";
+import { P as K } from "./page-BVHG3h0V.js";
+import { t as $, F as z, V as v } from "./formField-B2HDj15w.js";
+import { r as W } from "./incodeModule-aE-LkKwM.js";
+import { D as P, I as f } from "./dropdownComposed-DBm7cotT.js";
+function Y(e) {
+  return [...e.toUpperCase()].map((r) => String.fromCodePoint(127462 + r.charCodeAt(0) - 65)).join("");
+}
+const j = {
+  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: "USA"
+};
+function H(e) {
+  const r = j[e] ?? e;
+  return { value: e, label: `${Y(e)} ${r}` };
+}
+function X() {
+  if (typeof window > "u") return !1;
+  const { hostname: e } = window.location;
+  return e === "localhost" || e.includes("stage") || e.includes("demo");
+}
+const J = ({
+  value: e,
+  onChange: r
+}) => {
+  const { t: u } = k(), i = q(() => (X() ? [...F, ...O] : [...F]).map(H).sort((l, a) => l.label.localeCompare(a.label)), []);
+  return /* @__PURE__ */ o("div", { className: "IncodeEkybCountrySelector", children: /* @__PURE__ */ o(
+    P,
+    {
+      id: "ekyb-country",
+      label: u("ekyb.country"),
+      value: e,
+      options: i,
+      onChange: r,
+      "data-testid": "ekyb-country-selector"
+    }
+  ) });
+}, U = ({
+  field: e,
+  value: r,
+  error: u,
+  errorParams: i,
+  country: s,
+  onChange: l
+}) => {
+  const { t: a } = k(), m = !e.required, p = a(e.label);
+  if (e.type === "dropdown") {
+    const d = m ? `${p} (${a("common.optional")})` : p, n = e.name === "state" ? a("ekyb.selectState") : void 0;
+    return /* @__PURE__ */ o(
+      P,
+      {
+        id: `ekyb-${e.name}`,
+        label: d,
+        placeholder: n,
+        value: r,
+        options: (e.options ?? []).map((b) => ({
+          ...b,
+          label: a(b.label)
+        })),
+        error: $(a, u, i),
+        searchable: !0,
+        onChange: (b) => l(e.name, b),
+        "data-testid": `ekyb-field-${e.name}`
+      }
+    );
+  }
+  return /* @__PURE__ */ o(
+    z,
+    {
+      name: e.name,
+      label: e.label,
+      value: r,
+      error: u,
+      errorParams: i,
+      required: e.required,
+      optional: m,
+      onChange: l
+    }
+  );
+}, Q = ({
+  ubos: e,
+  errors: r,
+  errorParams: u,
+  canAddUbo: i,
+  onSetField: s,
+  onAdd: l,
+  onRemove: a
+}) => {
+  const { t: m } = k(), p = (d) => $(m, r[d], u[d]);
+  return e.length === 0 ? null : /* @__PURE__ */ o("div", { className: "IncodeEkybUbos", children: [
+    e.map((d, n) => {
+      const b = n === 0 ? m("ekyb.uboName") : m("ekyb.uboNameWithNumber", { number: n + 1 }), C = n === 0 ? m("ekyb.uboSurname") : m("ekyb.uboSurnameWithNumber", { number: n + 1 }), E = n === 0;
+      return /* @__PURE__ */ o("div", { className: "IncodeEkybUboEntry", children: [
+        /* @__PURE__ */ o(
+          f,
+          {
+            id: `ubo-${n}-name`,
+            label: b,
+            name: `ubo-${n}-name`,
+            value: d.name,
+            error: p(`ubo-${n}-name`),
+            onInput: (h) => s(n, "name", h.target.value),
+            "data-testid": `ekyb-ubo-${n}-name`
+          }
+        ),
+        /* @__PURE__ */ o(
+          f,
+          {
+            id: `ubo-${n}-surname`,
+            label: C,
+            name: `ubo-${n}-surname`,
+            value: d.surname,
+            error: p(`ubo-${n}-surname`),
+            onInput: (h) => s(
+              n,
+              "surname",
+              h.target.value
+            ),
+            "data-testid": `ekyb-ubo-${n}-surname`
+          }
+        ),
+        !E && /* @__PURE__ */ o(
+          "button",
+          {
+            className: "IncodeEkybRemoveUbo",
+            onClick: () => a(n),
+            type: "button",
+            children: m("common.remove")
+          }
+        )
+      ] }, d.id);
+    }),
+    i && /* @__PURE__ */ o(
+      "button",
+      {
+        className: "IncodeEkybAddUbo",
+        onClick: l,
+        type: "button",
+        "data-testid": "ekyb-add-ubo",
+        children: m("ekyb.addAnotherUbo")
+      }
+    )
+  ] });
+}, Z = ({ config: e, onFinish: r, onError: u }) => {
+  const { t: i } = k(), [s, l] = D(() => _({ config: e }));
+  g(() => {
+    (s.status === "finished" || s.status === "closed") && r?.();
+  }, [s.status, r]);
+  const a = s.status === "error" ? s.errorMessage : void 0;
+  return g(() => {
+    s.status === "error" && u?.(a);
+  }, [s.status, u, a]), s.status === "finished" || s.status === "closed" ? null : s.status === "loading" ? /* @__PURE__ */ o(
+    v,
+    {
+      status: "submitting",
+      submittingTitle: i("common.loading")
+    }
+  ) : s.status === "submitting" ? /* @__PURE__ */ o(v, { status: "submitting" }) : s.status === "success" ? /* @__PURE__ */ o(v, { status: "success" }) : s.status === "error" ? /* @__PURE__ */ o(v, { status: "failure", onRetry: () => l.retry() }) : s.status === "form" ? /* @__PURE__ */ o(x, { state: s, manager: l }) : null;
+}, A = /* @__PURE__ */ new Set([
+  "street",
+  "houseNo",
+  "addressLine2",
+  "city",
+  "state",
+  "postalCode"
+]), x = ({ state: e, manager: r }) => {
+  const {
+    country: u,
+    fields: i,
+    values: s,
+    displayErrors: l,
+    errorParams: a,
+    isValid: m,
+    ubos: p,
+    canAddUbo: d,
+    addressSuggestions: n
+  } = e, { t: b } = k(), C = S(null), E = S(null), h = S(void 0), R = V(C, i.length);
+  g(() => {
+    const t = l.postalCode, c = h.current;
+    if (h.current = t, !t || c === t)
+      return;
+    const y = requestAnimationFrame(() => {
+      const I = E.current;
+      if (!I) return;
+      (I.querySelector("#postalCode-error") ?? I).scrollIntoView({
+        behavior: "smooth",
+        block: "nearest"
+      });
+    });
+    return () => cancelAnimationFrame(y);
+  }, [l.postalCode]);
+  const M = i.filter((t) => !A.has(t.name)), N = i.filter((t) => A.has(t.name));
+  return /* @__PURE__ */ o(K, { className: `IncodeEkybPage${R ? " IncodeEkybPageScrollable" : ""}`, title: b("ekyb.title"), children: [
+    /* @__PURE__ */ o("div", { ref: C, className: "IncodeEkybForm", children: [
+      /* @__PURE__ */ o(
+        J,
+        {
+          value: u,
+          onChange: (t) => r.setCountry(t)
+        }
+      ),
+      M.map((t) => /* @__PURE__ */ o(
+        U,
+        {
+          field: t,
+          value: s[t.name] ?? "",
+          error: l[t.name],
+          errorParams: a[t.name],
+          country: u,
+          onChange: (c, y) => r.setField(c, y)
+        },
+        t.name
+      )),
+      /* @__PURE__ */ o(
+        Q,
+        {
+          ubos: p,
+          errors: l,
+          errorParams: a,
+          canAddUbo: d,
+          onSetField: (t, c, y) => r.setUboField(t, c, y),
+          onAdd: () => r.addUbo(),
+          onRemove: (t) => r.removeUbo(t)
+        }
+      ),
+      N.length > 0 && /* @__PURE__ */ o(B, { children: [
+        /* @__PURE__ */ o("h3", { className: "IncodeEkybSectionHeader", children: b("ekyb.addressDetails") }),
+        N.map((t) => t.name === "street" ? /* @__PURE__ */ o(
+          G,
+          {
+            label: t.label,
+            value: s.street ?? "",
+            error: l.street,
+            errorParams: a.street,
+            suggestions: n,
+            optional: !t.required,
+            onChange: (c) => r.setField("street", c),
+            onSearch: (c) => r.searchAddress(c),
+            onSelect: (c) => r.selectAddress(c)
+          },
+          t.name
+        ) : /* @__PURE__ */ o(
+          "div",
+          {
+            ref: t.name === "postalCode" ? E : void 0,
+            children: /* @__PURE__ */ o(
+              U,
+              {
+                field: t,
+                value: s[t.name] ?? "",
+                error: l[t.name],
+                errorParams: a[t.name],
+                country: u,
+                onChange: (c, y) => r.setField(c, y)
+              }
+            )
+          },
+          t.name
+        ))
+      ] })
+    ] }),
+    /* @__PURE__ */ o("div", { className: "IncodeEkybFooter", children: [
+      /* @__PURE__ */ o(L, { size: 32 }),
+      /* @__PURE__ */ o(
+        T,
+        {
+          onClick: () => r.submit(),
+          disabled: !m,
+          "data-testid": "ekyb-submit",
+          children: b("ekyb.continue")
+        }
+      )
+    ] })
+  ] });
+}, ee = ({
+  config: e,
+  onFinish: r,
+  onError: u
+}) => /* @__PURE__ */ o(w, { children: e ? /* @__PURE__ */ o(Z, { config: e, onFinish: r, onError: u }) : null });
+W(ee, "incode-ekyb");
+export {
+  ee as EkybModule
+};