@incodetech/web 0.0.0-dev-20260302-ad37d43 → 0.0.0-dev-20260302-e38ab90

package/dist/ekyb/styles.css

@@ -0,0 +1,107 @@
+/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */
+.IncodeEkybPage {
+  max-width: 480px;
+  margin: 0 auto;
+}
+
+.IncodeEkyb__form {
+  flex-direction: column;
+  gap: 16px;
+  width: 100%;
+  margin-top: 32px;
+  display: flex;
+}
+
+@media (min-width: 768px) {
+  .IncodePageContainer.IncodeEkybPage {
+    height: 95dvh;
+    max-height: none;
+    margin-top: 0;
+  }
+
+  .IncodeEkybPage .IncodePageInner {
+    height: 95%;
+  }
+
+  .IncodePageContainer.IncodeEkybPage--scrollable {
+    max-width: 500px;
+  }
+
+  .IncodeEkybPage .IncodePageContent {
+    min-height: 0;
+  }
+
+  .IncodeEkybPage .IncodeEkyb__form {
+    flex: 1;
+    min-height: 0;
+    padding-bottom: 8px;
+    overflow-y: auto;
+  }
+
+  .IncodeEkybPage--scrollable .IncodeEkyb__form {
+    margin-left: 8px;
+  }
+
+  .IncodeEkyb__footer {
+    flex-shrink: 0;
+  }
+}
+
+.IncodeEkyb__form .IncodeInputComposed, .IncodeEkyb__form .IncodeDropdownComposed, .IncodeEkyb__form .IncodeFormField {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.IncodeEkyb__form .IncodeFormField {
+  margin-bottom: 0;
+}
+
+.IncodeEkybPage .IncodeEkyb__sectionHeader {
+  font-family: var(--primitive-typography-family-dm-sans);
+  font-size: var(--typography-headline-h3-size);
+  font-weight: var(--typography-headline-h3-weight);
+  line-height: var(--typography-headline-h3-line-height);
+  letter-spacing: var(--typography-headline-h3-letter-spacing);
+  color: var(--color-text-body-primary, var(--text-body-primary));
+  width: 100%;
+  max-width: 420px;
+  margin: 16px auto 0;
+  padding: 12px 0;
+  font-weight: 700;
+}
+
+.IncodeEkyb__ubos, .IncodeEkyb__uboEntry {
+  flex-direction: column;
+  gap: 16px;
+  display: flex;
+}
+
+.IncodeEkyb__removeUbo {
+  color: var(--text-error, #dc2626);
+  cursor: pointer;
+  background: none;
+  border: none;
+  padding: 0;
+  font-size: .75rem;
+}
+
+.IncodeEkyb__addUbo {
+  color: var(--button-primary-surface-default, #006aff);
+  cursor: pointer;
+  text-align: center;
+  background: none;
+  border: none;
+  padding: 8px 0;
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 18px;
+  text-decoration: underline;
+}
+
+.IncodeEkyb__addUbo:hover {
+  opacity: .8;
+}
+
+.IncodeEkyb__countrySelector {
+  width: 100%;
+}

package/dist/ekybModule-Dm04An2k.js

@@ -0,0 +1,243 @@
+import { u as t, a as g, S as $, B as U, r as F } from "./incodeModule-_kfNnq5z.js";
+import { SUPPORTED_COUNTRIES as I, DEV_ONLY_COUNTRIES as M, createEkybManager as R } from "@incodetech/core/ekyb";
+import { T as D, y as v, A as w, k as L } from "./vendor-preact-BDue3y7V.js";
+import "./instance-B-q0ZREN.js";
+import { u as k } from "./useTranslation-B1jrtqlW.js";
+import "@incodetech/core";
+import { F as A, V as E, u as P } from "./verificationResult-BMHBsZ8s.js";
+import { I as O, P as T } from "./incodeComponent-DSqGVqSo.js";
+import { D as S, I as N } from "./dropdownComposed-vWK3dHjS.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(), a = D(() => (G() ? [...I, ...M] : [...I]).map(q).sort((u, l) => u.label.localeCompare(l.label)), []);
+  return /* @__PURE__ */ t("div", { className: "IncodeEkyb__countrySelector", children: /* @__PURE__ */ t(
+    S,
+    {
+      id: "ekyb-country",
+      label: r("ekyb.country"),
+      value: e,
+      options: a,
+      onChange: o,
+      "data-testid": "ekyb-country-selector"
+    }
+  ) });
+}, _ = ({
+  field: e,
+  value: o,
+  error: r,
+  country: a,
+  onChange: c
+}) => {
+  const { t: u } = k(), l = !e.required, m = u(e.label);
+  if (e.type === "dropdown") {
+    const n = l ? `${m} (${u("common.optional")})` : m, b = e.name === "state" ? u("ekyb.selectState") : void 0;
+    return /* @__PURE__ */ t(
+      S,
+      {
+        id: `ekyb-${e.name}`,
+        label: n,
+        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(
+    A,
+    {
+      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: a,
+  onAdd: c,
+  onRemove: u
+}) => {
+  const { t: l } = k();
+  return e.length === 0 ? null : /* @__PURE__ */ t("div", { className: "IncodeEkyb__ubos", children: [
+    e.map((m, n) => {
+      const b = n === 0 ? l("ekyb.uboName") : l("ekyb.uboNameWithNumber", { number: n + 1 }), i = n === 0 ? l("ekyb.uboSurname") : l("ekyb.uboSurnameWithNumber", { number: n + 1 }), h = n === 0;
+      return /* @__PURE__ */ t("div", { className: "IncodeEkyb__uboEntry", children: [
+        /* @__PURE__ */ t(
+          N,
+          {
+            id: `ubo-${n}-name`,
+            label: b,
+            name: `ubo-${n}-name`,
+            value: m.name,
+            error: o[`ubo-${n}-name`] ? l(o[`ubo-${n}-name`]) : void 0,
+            onInput: (d) => a(n, "name", d.target.value),
+            "data-testid": `ekyb-ubo-${n}-name`
+          }
+        ),
+        /* @__PURE__ */ t(
+          N,
+          {
+            id: `ubo-${n}-surname`,
+            label: i,
+            name: `ubo-${n}-surname`,
+            value: m.surname,
+            error: o[`ubo-${n}-surname`] ? l(o[`ubo-${n}-surname`]) : void 0,
+            onInput: (d) => a(
+              n,
+              "surname",
+              d.target.value
+            ),
+            "data-testid": `ekyb-ubo-${n}-surname`
+          }
+        ),
+        !h && /* @__PURE__ */ t(
+          "button",
+          {
+            className: "IncodeEkyb__removeUbo",
+            onClick: () => u(n),
+            type: "button",
+            children: l("common.remove")
+          }
+        )
+      ] }, m.id);
+    }),
+    r && /* @__PURE__ */ t(
+      "button",
+      {
+        className: "IncodeEkyb__addUbo",
+        onClick: c,
+        type: "button",
+        "data-testid": "ekyb-add-ubo",
+        children: l("ekyb.addAnotherUbo")
+      }
+    )
+  ] });
+}, W = ({ config: e, onFinish: o, onError: r }) => {
+  const [a, c] = g(() => R({ config: e }), {
+    autoLoad: !1
+  });
+  v(() => {
+    (a.status === "finished" || a.status === "closed") && o?.();
+  }, [a.status, o]);
+  const u = a.status === "error" ? a.errorMessage : void 0;
+  return v(() => {
+    a.status === "error" && r?.(u);
+  }, [a.status, r, u]), a.status === "finished" || a.status === "closed" ? null : a.status === "submitting" ? /* @__PURE__ */ t(E, { status: "submitting" }) : a.status === "success" ? /* @__PURE__ */ t(E, { status: "success" }) : a.status === "error" ? /* @__PURE__ */ t(E, { status: "failure", onRetry: () => c.retry() }) : a.status === "form" ? /* @__PURE__ */ t(Y, { state: a, manager: c }) : null;
+}, f = /* @__PURE__ */ new Set([
+  "street",
+  "houseNo",
+  "addressLine2",
+  "city",
+  "state",
+  "postalCode"
+]), Y = ({ state: e, manager: o }) => {
+  const { country: r, fields: a, values: c, displayErrors: u, isValid: l, ubos: m, canAddUbo: n } = e, { t: b } = k(), i = w(null), h = P(i, a.length), d = a.filter((s) => !f.has(s.name)), C = a.filter((s) => f.has(s.name));
+  return /* @__PURE__ */ t(T, { className: `IncodeEkybPage${h ? " IncodeEkybPage--scrollable" : ""}`, title: b("ekyb.title"), children: [
+    /* @__PURE__ */ t("div", { ref: i, className: "IncodeEkyb__form", children: [
+      /* @__PURE__ */ t(
+        K,
+        {
+          value: r,
+          onChange: (s) => o.setCountry(s)
+        }
+      ),
+      d.map((s) => /* @__PURE__ */ t(
+        _,
+        {
+          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: n,
+          onSetField: (s, y, p) => o.setUboField(s, y, p),
+          onAdd: () => o.addUbo(),
+          onRemove: (s) => o.removeUbo(s)
+        }
+      ),
+      C.length > 0 && /* @__PURE__ */ t(L, { children: [
+        /* @__PURE__ */ t("h3", { className: "IncodeEkyb__sectionHeader", children: b("ekyb.addressDetails") }),
+        C.map((s) => /* @__PURE__ */ t(
+          _,
+          {
+            field: s,
+            value: c[s.name] ?? "",
+            error: u[s.name],
+            country: r,
+            onChange: (y, p) => o.setField(y, p)
+          },
+          s.name
+        ))
+      ] })
+    ] }),
+    /* @__PURE__ */ t("div", { className: "IncodeEkyb__footer", children: [
+      /* @__PURE__ */ t($, { size: 32 }),
+      /* @__PURE__ */ t(
+        U,
+        {
+          onClick: () => o.submit(),
+          disabled: !l,
+          "data-testid": "ekyb-submit",
+          children: b("ekyb.continue")
+        }
+      )
+    ] })
+  ] });
+}, j = ({
+  config: e,
+  onFinish: o,
+  onError: r
+}) => /* @__PURE__ */ t(O, { children: e ? /* @__PURE__ */ t(W, { config: e, onFinish: o, onError: r }) : null });
+F(j, "incode-ekyb");
+export {
+  j as EkybModule
+};

package/dist/ekyc/styles.css

@@ -0,0 +1,274 @@
+/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */
+.IncodeEkycPage {
+  max-width: 480px;
+  margin: 0 auto;
+}
+
+.IncodeEkyc__form {
+  flex-direction: column;
+  gap: 16px;
+  width: 100%;
+  margin-top: 32px;
+  display: flex;
+}
+
+@media (min-width: 768px) {
+  .IncodePageContainer.IncodeEkycPage {
+    height: 100dvh;
+    max-height: none;
+    margin-top: 0;
+  }
+
+  .IncodeEkycPage .IncodePageInner {
+    height: 100%;
+  }
+
+  .IncodePageContainer.IncodeEkycPage--scrollable {
+    max-width: 500px;
+  }
+
+  .IncodeEkycPage .IncodePageContent {
+    min-height: 0;
+  }
+
+  .IncodeEkycPage .IncodeEkyc__form {
+    flex: 1;
+    min-height: 0;
+    padding-bottom: 8px;
+    overflow-y: auto;
+  }
+
+  .IncodeEkycPage--scrollable .IncodeEkyc__form {
+    margin-left: 8px;
+  }
+
+  .IncodeEkyc__footer {
+    flex-shrink: 0;
+  }
+}
+
+.IncodeEkyc__form .IncodeInputComposed, .IncodeEkyc__form .IncodeDropdownComposed, .IncodeEkyc__form .IncodeDateInputComposed, .IncodeEkyc__form .IncodeAddressAutocomplete {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.IncodeEkyc__form .IncodeFormField {
+  margin-bottom: 0;
+}
+
+.IncodeEkycPage .IncodeEkyc__sectionHeader {
+  font-family: var(--primitive-typography-family-dm-sans);
+  font-size: var(--typography-headline-h3-size);
+  font-weight: var(--typography-headline-h3-weight);
+  line-height: var(--typography-headline-h3-line-height);
+  letter-spacing: var(--typography-headline-h3-letter-spacing);
+  color: var(--color-text-body-primary, var(--text-body-primary));
+  width: 100%;
+  max-width: 420px;
+  margin: 16px auto 0;
+  padding: 12px 0;
+  font-weight: 700;
+}
+
+.IncodeEkyc__radioGroup {
+  width: 100%;
+  max-width: 420px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.IncodeEkyc__radioLabel {
+  color: var(--input-text-label-default, #262831);
+  margin-bottom: 8px;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 14px;
+  display: block;
+}
+
+.IncodeEkyc__radioOptions {
+  gap: 24px;
+  display: flex;
+}
+
+.IncodeEkyc__radioOption {
+  color: var(--radio-button-text-default, var(--text-body-primary, #262831));
+  cursor: pointer;
+  align-items: center;
+  gap: 12px;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 16px;
+  display: flex;
+}
+
+.IncodeEkyc__radioOption input[type="radio"] {
+  appearance: none;
+  border: 2px solid var(--radio-button-border-default, #82879a);
+  background: var(--radio-button-surface-default, #fcfcfd);
+  cursor: pointer;
+  border-radius: 9999px;
+  width: 28px;
+  min-width: 28px;
+  height: 28px;
+  min-height: 28px;
+  margin: 0;
+  position: relative;
+}
+
+.IncodeEkyc__radioOption input[type="radio"]:after {
+  content: "";
+  opacity: 0;
+  background: #fff;
+  border-radius: 9999px;
+  width: 10px;
+  height: 10px;
+  margin: auto;
+  display: block;
+  position: absolute;
+  inset: 0;
+}
+
+.IncodeEkyc__radioOption input[type="radio"]:checked {
+  border-color: var(--radio-button-surface-selected, #006aff);
+  background: var(--radio-button-surface-selected, #006aff);
+}
+
+.IncodeEkyc__radioOption input[type="radio"]:checked:after {
+  opacity: 1;
+}
+
+.IncodeEkyc__fieldError {
+  color: var(--input-text-helper-negative, #dc2626);
+  margin-top: 8px;
+  font-size: 14px;
+  display: block;
+}
+
+.IncodeAddressAutocomplete {
+  width: 100%;
+  position: relative;
+}
+
+.IncodeAddressAutocomplete__suggestions {
+  z-index: 10;
+  background: var(--surface-neutral-0, #fff);
+  border: 1px solid var(--input-border-default, #82879a);
+  border-radius: 8px;
+  max-height: 200px;
+  margin: 8px 0 0;
+  padding: 0;
+  list-style: none;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  overflow-y: auto;
+  box-shadow: 0 2px 8px #00000026;
+}
+
+.IncodeAddressAutocomplete__suggestion {
+  cursor: pointer;
+  color: var(--text-body-primary, #262831);
+  border-bottom: 1px solid var(--input-border-default, #82879a);
+  padding: 12px 16px;
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.IncodeAddressAutocomplete__suggestion:last-child {
+  border-bottom: none;
+}
+
+.IncodeAddressAutocomplete__suggestion:hover {
+  background: var(--surface-neutral-100, #f5f5f7);
+}
+
+.IncodeAddressAutocomplete__modalOverlay {
+  z-index: 50;
+  background: #00000080;
+  align-items: flex-end;
+  display: flex;
+  position: fixed;
+  inset: 0;
+}
+
+.IncodeAddressAutocomplete__modal {
+  background: var(--surface-primary, #fff);
+  border-radius: 1rem 1rem 0 0;
+  flex-direction: column;
+  width: 100%;
+  max-height: 90vh;
+  display: flex;
+}
+
+.IncodeAddressAutocomplete__modalHeader {
+  border-bottom: 1px solid var(--input-border-default, #e5e7eb);
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 1.5rem;
+  display: flex;
+}
+
+.IncodeAddressAutocomplete__modalHeader h3 {
+  margin: 0;
+  font-size: 1.125rem;
+  font-weight: 600;
+}
+
+.IncodeAddressAutocomplete__modalClose {
+  cursor: pointer;
+  color: var(--text-secondary, #6b7280);
+  background: none;
+  border: none;
+  padding: 0;
+  font-size: 1.5rem;
+  line-height: 1;
+}
+
+.IncodeAddressAutocomplete__modalBody {
+  flex: 1;
+  padding: 1rem 1.5rem;
+  overflow-y: auto;
+}
+
+.IncodeAddressAutocomplete__modalInput {
+  border: 1px solid var(--input-border-default, #d1d5db);
+  border-radius: .375rem;
+  outline: none;
+  width: 100%;
+  margin-bottom: .75rem;
+  padding: .75rem 1rem;
+  font-size: 1rem;
+}
+
+.IncodeAddressAutocomplete__modalInput:focus {
+  border-color: var(--button-primary-surface-default, #3b82f6);
+}
+
+.IncodeAddressAutocomplete__modalSuggestions {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.IncodeAddressAutocomplete__modalSuggestion {
+  cursor: pointer;
+  color: var(--text-primary, #111827);
+  border-bottom: 1px solid var(--input-border-default, #f3f4f6);
+  padding: .75rem 0;
+  font-size: .875rem;
+}
+
+.IncodeAddressAutocomplete__enterManually {
+  border: 1px solid var(--input-border-default, #d1d5db);
+  width: 100%;
+  color: var(--text-secondary, #6b7280);
+  cursor: pointer;
+  text-align: center;
+  background: none;
+  border-radius: .375rem;
+  margin-top: .75rem;
+  padding: .75rem;
+  font-size: .875rem;
+}