@incodetech/web 0.0.0-dev-20260317-737b25e → 0.0.0-dev-20260318-7837fc0

package/dist/base.css

@@ -586,6 +586,60 @@
 .IncodeInput[type="date"][data-has-value="true"] {
   color: var(--color-input-text-field-default, var(--input-text-field-default));
 }
+.IncodeTextArea {
+  width: 100%;
+  max-width: 420px;
+  min-height: 56px;
+  font-family: var(--typography-input-dropdown-family);
+  font-size: var(--typography-input-dropdown-m-size);
+  font-weight: var(--typography-input-dropdown-m-weight);
+  line-height: var(--typography-input-dropdown-m-line-height);
+  letter-spacing: var(--typography-input-dropdown-m-letter-spacing);
+  background-color: var(--color-input-surface-default, var(--input-surface-default));
+  color: var(--color-input-text-field-default, var(--input-text-field-default));
+  border-radius: var(--radius-input, var(--input-border-radius));
+  border-style: var(--tw-border-style);
+  border-width: 1px;
+  border-color: var(--color-input-border-default, var(--input-border-default));
+  padding: var(--spacing-16, var(--spacing-16, 16px));
+  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));
+  transition-duration: var(--tw-duration, var(--default-transition-duration, .15s));
+  --tw-duration: .2s;
+  --tw-outline-style: none;
+  resize: vertical;
+  outline-style: none;
+  transition-duration: .2s;
+}
+.IncodeTextArea::placeholder {
+  color: var(--color-input-text-field-placeholder, var(--input-text-field-placeholder));
+}
+.IncodeTextArea:disabled {
+  border-color: var(--color-input-border-disabled, var(--input-border-disabled));
+  background-color: var(--color-input-surface-disabled, var(--input-surface-disabled));
+  cursor: not-allowed;
+  color: var(--color-input-text-field-disabled, var(--input-text-field-disabled));
+  resize: none;
+  opacity: 1;
+}
+.IncodeTextArea:focus {
+  border-style: var(--tw-border-style);
+  border-width: 2px;
+  border-color: var(--color-input-border-focus, var(--input-border-focus));
+  background-color: var(--color-input-surface-active, var(--input-surface-active));
+}
+.IncodeTextArea:active:not(:disabled) {
+  border-color: var(--color-input-border-active, var(--input-border-active));
+  background-color: var(--color-input-surface-active, var(--input-surface-active));
+}
+.IncodeTextArea[aria-invalid="true"] {
+  border-color: var(--color-input-border-negative, var(--input-border-negative));
+}
+.IncodeTextArea[aria-invalid="true"]:focus {
+  border-style: var(--tw-border-style);
+  border-width: 2px;
+  border-color: var(--color-input-border-negative, var(--input-border-negative));
+}
 .IncodeInputComposed {
   width: 100%;
   max-width: 420px;
@@ -659,6 +713,57 @@
   font-family: inherit;
   display: inline-block;
 }
+.IncodeTextAreaComposed {
+  width: 100%;
+  max-width: 420px;
+}
+.IncodeTextAreaComposedLabel {
+  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);
+  color: var(--color-input-text-label-default, var(--input-text-label-default));
+  margin: var(--spacing-0, var(--spacing-none, 0px));
+  margin-bottom: var(--spacing-8, var(--spacing-8, 8px));
+  padding: var(--spacing-0, var(--spacing-none, 0px));
+  display: inline-block;
+}
+.IncodeTextAreaComposedRequired {
+  color: var(--color-input-text-helper-negative, var(--input-text-helper-negative));
+}
+.IncodeTextAreaComposedWrapper {
+  position: relative;
+}
+.IncodeTextAreaComposedErrorWrapper, .IncodeTextAreaComposedHelperWrapper {
+  margin-top: var(--spacing-8, var(--spacing-8, 8px));
+  align-items: center;
+  display: flex;
+}
+.IncodeTextAreaComposedIconWrapper {
+  margin-right: var(--spacing-4, var(--spacing-4, 4px));
+  display: inline-block;
+}
+.IncodeTextAreaComposedError {
+  margin: var(--spacing-0, var(--spacing-none, 0px));
+  color: var(--color-input-text-helper-negative, var(--input-text-helper-negative));
+  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);
+  display: inline-block;
+}
+.IncodeTextAreaComposedHelper {
+  margin: var(--spacing-0, var(--spacing-none, 0px));
+  color: var(--color-input-text-helper-default, var(--input-text-helper-default));
+  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);
+  display: inline-block;
+}
 .IncodeDropdownComposed {
   width: 100%;
   max-width: 420px;
@@ -2047,6 +2152,66 @@
     height: 840px;
   }
 }
+@media (min-width: 40rem) {
+  .IncodePageContainer .IncodePageInner {
+    max-width: 40rem;
+  }
+}
+@media (min-width: 48rem) {
+  .IncodePageContainer .IncodePageInner {
+    max-width: 48rem;
+  }
+}
+@media (min-width: 64rem) {
+  .IncodePageContainer .IncodePageInner {
+    max-width: 64rem;
+  }
+}
+@media (min-width: 80rem) {
+  .IncodePageContainer .IncodePageInner {
+    max-width: 80rem;
+  }
+}
+@media (min-width: 96rem) {
+  .IncodePageContainer .IncodePageInner {
+    max-width: 96rem;
+  }
+}
+@media (min-width: 48rem) {
+  .IncodePageContainer .IncodePageInner {
+    height: 840px;
+  }
+}
+@media (min-width: 40rem) {
+  .IncodePageContainer .IncodePageInner {
+    max-width: 40rem;
+  }
+}
+@media (min-width: 48rem) {
+  .IncodePageContainer .IncodePageInner {
+    max-width: 48rem;
+  }
+}
+@media (min-width: 64rem) {
+  .IncodePageContainer .IncodePageInner {
+    max-width: 64rem;
+  }
+}
+@media (min-width: 80rem) {
+  .IncodePageContainer .IncodePageInner {
+    max-width: 80rem;
+  }
+}
+@media (min-width: 96rem) {
+  .IncodePageContainer .IncodePageInner {
+    max-width: 96rem;
+  }
+}
+@media (min-width: 48rem) {
+  .IncodePageContainer .IncodePageInner {
+    height: 840px;
+  }
+}
 .IncodePageContainer .IncodePageInner {
   width: 100%;
 }

package/dist/ekyb/styles.css

@@ -8,6 +8,10 @@
   }
 }
 
+.IncodeEkybSpinner {
+  flex: 1;
+}
+
 .IncodeEkybPage {
   max-width: 480px;
   margin-inline: auto;

package/dist/{ekybModule-FeVB4y3_.js → ekybModule-9m8cnkfH.js}

@@ -1,18 +1,19 @@
-import { b as v, u as o, I as X, a as J, B as Q } from "./button-Ca1tRSTI.js";
-import { SUPPORTED_COUNTRIES as M, DEV_ONLY_COUNTRIES as Z, computeEkybDisplayErrors as x, createEkybManager as ee } from "@incodetech/core/ekyb";
-import { T as q, y as V, A as P, d as te, q as S, k as oe } from "./vendor-preact-BXf0bkEs.js";
+import { b as v, u as o, I as J, a as Q, B as Z } from "./button-Ca1tRSTI.js";
+import { SUPPORTED_COUNTRIES as M, DEV_ONLY_COUNTRIES as x, computeEkybDisplayErrors as ee, createEkybManager as te } from "@incodetech/core/ekyb";
+import { T as q, y as V, A as D, d as oe, q as S, k as re } from "./vendor-preact-BXf0bkEs.js";
 import "./uiConfig-Z6RT23Sl.js";
 import "@incodetech/core";
-import { u as re, A as se } from "./addressAutocomplete-DetZGxBZ.js";
-import { P as ne } from "./page-BVHG3h0V.js";
-import { t as K, F as ae, V as A } from "./formField-FeX9N4c8.js";
-import { r as ue } from "./incodeModule-aE-LkKwM.js";
-import { D as G } from "./dropdownComposed-B5ZuQS8C.js";
+import { u as ne, A as se } from "./addressAutocomplete-DetZGxBZ.js";
+import { P as K } from "./page-BVHG3h0V.js";
+import { S as ae } from "./spinner-Cx3FPUCD.js";
+import { t as G, F as ce, V as P } from "./formField-FeX9N4c8.js";
+import { r as le } from "./incodeModule-aE-LkKwM.js";
+import { D as Y } from "./dropdownComposed-B5ZuQS8C.js";
 import { I as _ } from "./inputComposed-BHi-MSpP.js";
-function ce(t) {
+function ue(t) {
   return [...t.toUpperCase()].map((r) => String.fromCodePoint(127462 + r.charCodeAt(0) - 65)).join("");
 }
-const le = {
+const ie = {
   BR: "Brazil",
   CM: "Cameroon",
   CN: "China",
@@ -27,27 +28,27 @@ const le = {
   GB: "United Kingdom",
   US: "USA"
 };
-function ie(t) {
-  const r = le[t] ?? t;
-  return { value: t, label: `${ce(t)} ${r}` };
+function me(t) {
+  const r = ie[t] ?? t;
+  return { value: t, label: `${ue(t)} ${r}` };
 }
-function me() {
+function de() {
   if (typeof window > "u") return !1;
   const { hostname: t } = window.location;
   return t === "localhost" || t.includes("stage") || t.includes("demo");
 }
-const de = ({
+const be = ({
   value: t,
   onChange: r
 }) => {
-  const { t: u } = v(), s = q(() => (me() ? [...M, ...Z] : [...M]).map(ie).sort((c, d) => c.label.localeCompare(d.label)), []);
+  const { t: c } = v(), n = q(() => (de() ? [...M, ...x] : [...M]).map(me).sort((l, d) => l.label.localeCompare(d.label)), []);
   return /* @__PURE__ */ o("div", { className: "IncodeEkybCountrySelector", children: /* @__PURE__ */ o(
-    G,
+    Y,
     {
       id: "ekyb-country",
-      label: u("ekyb.country"),
+      label: c("ekyb.country"),
       value: t,
-      options: s,
+      options: n,
       onChange: r,
       "data-testid": "ekyb-country-selector"
     }
@@ -55,126 +56,133 @@ const de = ({
 }, B = ({
   field: t,
   value: r,
-  error: u,
-  errorParams: s,
+  error: c,
+  errorParams: n,
   country: i,
-  onChange: c,
+  onChange: l,
   onBlur: d
 }) => {
-  const { t: b } = v(), l = !t.required, h = b(t.label);
+  const { t: b } = v(), u = !t.required, h = b(t.label);
   if (t.type === "dropdown") {
-    const m = l ? `${h} (${b("common.optional")})` : h, n = t.name === "state" ? b("ekyb.selectState") : void 0;
+    const m = u ? `${h} (${b("common.optional")})` : h, s = t.name === "state" ? b("ekyb.selectState") : void 0;
     return /* @__PURE__ */ o(
-      G,
+      Y,
       {
         id: `ekyb-${t.name}`,
         label: m,
-        placeholder: n,
+        placeholder: s,
         value: r,
         options: (t.options ?? []).map((p) => ({
           ...p,
           label: b(p.label)
         })),
-        error: K(b, u, s),
+        error: G(b, c, n),
         searchable: !0,
-        onChange: (p) => c(t.name, p),
+        onChange: (p) => l(t.name, p),
         onBlur: d ? () => d(t.name) : void 0,
         "data-testid": `ekyb-field-${t.name}`
       }
     );
   }
   return /* @__PURE__ */ o(
-    ae,
+    ce,
     {
       name: t.name,
       label: t.label,
       value: r,
-      error: u,
-      errorParams: s,
+      error: c,
+      errorParams: n,
       required: t.required,
-      optional: l,
-      onChange: c,
+      optional: u,
+      onChange: l,
       onBlur: d
     }
   );
-}, be = ({
+}, pe = ({
   ubos: t,
   errors: r,
-  errorParams: u,
-  canAddUbo: s,
+  errorParams: c,
+  canAddUbo: n,
   onSetField: i,
-  onBlur: c,
+  onBlur: l,
   onAdd: d,
   onRemove: b
 }) => {
-  const { t: l } = v(), h = (m) => K(l, r[m], u[m]);
+  const { t: u } = v(), h = (m) => G(u, r[m], c[m]);
   return t.length === 0 ? null : /* @__PURE__ */ o("div", { className: "IncodeEkybUbos", children: [
-    t.map((m, n) => {
-      const p = n === 0 ? l("ekyb.uboName") : l("ekyb.uboNameWithNumber", { number: n + 1 }), f = n === 0 ? l("ekyb.uboSurname") : l("ekyb.uboSurnameWithNumber", { number: n + 1 }), N = n === 0;
+    t.map((m, s) => {
+      const p = s === 0 ? u("ekyb.uboName") : u("ekyb.uboNameWithNumber", { number: s + 1 }), f = s === 0 ? u("ekyb.uboSurname") : u("ekyb.uboSurnameWithNumber", { number: s + 1 }), N = s === 0;
       return /* @__PURE__ */ o("div", { className: "IncodeEkybUboEntry", children: [
         /* @__PURE__ */ o(
           _,
           {
-            id: `ubo-${n}-name`,
+            id: `ubo-${s}-name`,
             label: p,
-            name: `ubo-${n}-name`,
+            name: `ubo-${s}-name`,
             value: m.name,
-            error: h(`ubo-${n}-name`),
-            onInput: (I) => i(n, "name", I.target.value),
-            onBlur: c ? () => c(`ubo-${n}-name`) : void 0,
-            "data-testid": `ekyb-ubo-${n}-name`
+            error: h(`ubo-${s}-name`),
+            onInput: (I) => i(s, "name", I.target.value),
+            onBlur: l ? () => l(`ubo-${s}-name`) : void 0,
+            "data-testid": `ekyb-ubo-${s}-name`
           }
         ),
         /* @__PURE__ */ o(
           _,
           {
-            id: `ubo-${n}-surname`,
+            id: `ubo-${s}-surname`,
             label: f,
-            name: `ubo-${n}-surname`,
+            name: `ubo-${s}-surname`,
             value: m.surname,
-            error: h(`ubo-${n}-surname`),
+            error: h(`ubo-${s}-surname`),
             onInput: (I) => i(
-              n,
+              s,
               "surname",
               I.target.value
             ),
-            onBlur: c ? () => c(`ubo-${n}-surname`) : void 0,
-            "data-testid": `ekyb-ubo-${n}-surname`
+            onBlur: l ? () => l(`ubo-${s}-surname`) : void 0,
+            "data-testid": `ekyb-ubo-${s}-surname`
           }
         ),
         !N && /* @__PURE__ */ o(
           "button",
           {
             className: "IncodeEkybRemoveUbo",
-            onClick: () => b(n),
+            onClick: () => b(s),
             type: "button",
-            children: l("common.remove")
+            children: u("common.remove")
           }
         )
       ] }, m.id);
     }),
-    s && /* @__PURE__ */ o(
+    n && /* @__PURE__ */ o(
       "button",
       {
         className: "IncodeEkybAddUbo",
         onClick: d,
         type: "button",
         "data-testid": "ekyb-add-ubo",
-        children: l("ekyb.addAnotherUbo")
+        children: u("ekyb.addAnotherUbo")
       }
     )
   ] });
-}, pe = ({ config: t, onFinish: r }) => {
-  const { t: u } = v(), [s, i] = J(() => ee({ config: t }));
+}, ye = ({ config: t, onFinish: r }) => {
+  const { t: c } = v(), [n, i] = Q(() => te({ config: t }));
   return V(() => {
-    (s.status === "finished" || s.status === "closed") && r?.();
-  }, [s.status, r]), s.status === "finished" || s.status === "closed" ? null : s.status === "loading" ? /* @__PURE__ */ o(
-    A,
+    (n.status === "finished" || n.status === "closed") && r?.();
+  }, [n.status, r]), n.status === "finished" || n.status === "closed" ? null : n.status === "loading" ? /* @__PURE__ */ o(
+    P,
     {
       status: "submitting",
-      submittingTitle: u("common.loading")
+      submittingTitle: c("common.loading")
+    }
+  ) : n.status === "submitting" ? /* @__PURE__ */ o(K, { children: /* @__PURE__ */ o(
+    ae,
+    {
+      fullScreen: !1,
+      title: c("common.processing"),
+      className: "IncodeEkybSpinner"
     }
-  ) : s.status === "submitting" ? /* @__PURE__ */ o(A, { status: "submitting" }) : s.status === "success" ? /* @__PURE__ */ o(A, { status: "success" }) : s.status === "error" ? /* @__PURE__ */ o(A, { status: "failure", onRetry: () => i.retry() }) : s.status === "form" ? /* @__PURE__ */ o(he, { state: s, manager: i }) : null;
+  ) }) : n.status === "success" ? /* @__PURE__ */ o(P, { status: "success" }) : n.status === "error" ? /* @__PURE__ */ o(P, { status: "failure", onRetry: () => i.retry() }) : n.status === "form" ? /* @__PURE__ */ o(ke, { state: n, manager: i }) : null;
 }, O = /* @__PURE__ */ new Set([
   "street",
   "houseNo",
@@ -182,61 +190,61 @@ const de = ({
   "city",
   "state",
   "postalCode"
-]), ye = ["street", "city", "state", "postalCode", "houseNo"], he = ({ state: t, manager: r }) => {
+]), he = ["street", "city", "state", "postalCode", "houseNo"], ke = ({ state: t, manager: r }) => {
   const {
-    country: u,
-    fields: s,
+    country: c,
+    fields: n,
     values: i,
-    errors: c,
+    errors: l,
     isValid: d,
     ubos: b,
-    canAddUbo: l,
+    canAddUbo: u,
     addressSuggestions: h,
     submitAttempted: m
-  } = t, { t: n } = v(), p = P(null), f = P(null), N = P(void 0), I = re(p, s.length), [w, T] = te({}), y = S((e) => {
+  } = t, { t: s } = v(), p = D(null), f = D(null), N = D(void 0), I = ne(p, n.length), [w, T] = oe({}), y = S((e) => {
     T((a) => a[e] ? a : { ...a, [e]: !0 });
   }, []), { displayErrors: E, errorParams: F } = q(
-    () => x(
-      c,
+    () => ee(
+      l,
       w,
       m,
-      u,
-      s
+      c,
+      n
     ),
-    [c, w, m, u, s]
+    [l, w, m, c, n]
   ), $ = S(
     (e) => y(e),
     [y]
-  ), U = S(
+  ), A = S(
     (e, a) => {
       y(e), r.setField(e, a);
     },
     [r, y]
-  ), Y = S(
+  ), j = S(
     (e, a, k) => {
       y(`ubo-${e}-${a}`), r.setUboField(e, a, k);
     },
     [r, y]
-  ), j = S(
+  ), W = S(
     (e) => {
-      for (const a of ye) y(a);
+      for (const a of he) y(a);
       r.selectAddress(e);
     },
     [r, y]
-  ), W = S(
+  ), z = S(
     (e) => {
       r.removeUbo(e), T((a) => {
         const k = {};
-        for (const [C, R] of Object.entries(a)) {
-          const D = C.match(/^ubo-(\d+)-(name|surname)$/);
-          if (!D) {
-            k[C] = R;
+        for (const [C, U] of Object.entries(a)) {
+          const R = C.match(/^ubo-(\d+)-(name|surname)$/);
+          if (!R) {
+            k[C] = U;
             continue;
           }
-          const g = Number(D[1]);
+          const g = Number(R[1]);
           if (g === e) continue;
-          const H = g > e ? g - 1 : g;
-          k[`ubo-${H}-${D[2]}`] = R;
+          const X = g > e ? g - 1 : g;
+          k[`ubo-${X}-${R[2]}`] = U;
         }
         return k;
       });
@@ -257,44 +265,44 @@ const de = ({
     });
     return () => cancelAnimationFrame(k);
   }, [E.postalCode]);
-  const z = s.filter((e) => !O.has(e.name)), L = s.filter((e) => O.has(e.name));
-  return /* @__PURE__ */ o(ne, { className: `IncodeEkybPage${I ? " IncodeEkybPageScrollable" : ""}`, title: n("ekyb.title"), children: [
+  const H = n.filter((e) => !O.has(e.name)), L = n.filter((e) => O.has(e.name));
+  return /* @__PURE__ */ o(K, { className: `IncodeEkybPage${I ? " IncodeEkybPageScrollable" : ""}`, title: s("ekyb.title"), children: [
     /* @__PURE__ */ o("div", { ref: p, className: "IncodeEkybForm", children: [
       /* @__PURE__ */ o(
-        de,
+        be,
         {
-          value: u,
+          value: c,
           onChange: (e) => r.setCountry(e)
         }
       ),
-      z.map((e) => /* @__PURE__ */ o(
+      H.map((e) => /* @__PURE__ */ o(
         B,
         {
           field: e,
           value: i[e.name] ?? "",
           error: E[e.name],
           errorParams: F[e.name],
-          country: u,
-          onChange: U,
+          country: c,
+          onChange: A,
           onBlur: $
         },
         e.name
       )),
       /* @__PURE__ */ o(
-        be,
+        pe,
         {
           ubos: b,
           errors: E,
           errorParams: F,
-          canAddUbo: l,
-          onSetField: Y,
+          canAddUbo: u,
+          onSetField: j,
           onBlur: $,
           onAdd: () => r.addUbo(),
-          onRemove: W
+          onRemove: z
         }
       ),
-      L.length > 0 && /* @__PURE__ */ o(oe, { children: [
-        /* @__PURE__ */ o("h3", { className: "IncodeEkybSectionHeader", children: n("ekyb.addressDetails") }),
+      L.length > 0 && /* @__PURE__ */ o(re, { children: [
+        /* @__PURE__ */ o("h3", { className: "IncodeEkybSectionHeader", children: s("ekyb.addressDetails") }),
         L.map((e) => e.name === "street" ? /* @__PURE__ */ o(
           se,
           {
@@ -304,9 +312,9 @@ const de = ({
             errorParams: F.street,
             suggestions: h,
             optional: !e.required,
-            onChange: (a) => U("street", a),
+            onChange: (a) => A("street", a),
             onSearch: (a) => r.searchAddress(a),
-            onSelect: j,
+            onSelect: W,
             onBlur: () => $("street")
           },
           e.name
@@ -321,8 +329,8 @@ const de = ({
                 value: i[e.name] ?? "",
                 error: E[e.name],
                 errorParams: F[e.name],
-                country: u,
-                onChange: U,
+                country: c,
+                onChange: A,
                 onBlur: $
               }
             )
@@ -332,17 +340,17 @@ const de = ({
       ] })
     ] }),
     /* @__PURE__ */ o("div", { className: "IncodeEkybFooter", children: /* @__PURE__ */ o(
-      Q,
+      Z,
       {
         onClick: () => r.submit(),
         disabled: !d,
         "data-testid": "ekyb-submit",
-        children: n("ekyb.continue")
+        children: s("ekyb.continue")
       }
     ) })
   ] });
-}, ke = ({ config: t, onFinish: r }) => /* @__PURE__ */ o(X, { children: t ? /* @__PURE__ */ o(pe, { config: t, onFinish: r }) : null });
-ue(ke, "incode-ekyb");
+}, Ee = ({ config: t, onFinish: r }) => /* @__PURE__ */ o(J, { children: t ? /* @__PURE__ */ o(ye, { config: t, onFinish: r }) : null });
+le(Ee, "incode-ekyb");
 export {
-  ke as EkybModule
+  Ee as EkybModule
 };

package/dist/ekyc/styles.css

@@ -9,6 +9,10 @@
   }
 }
 
+.IncodeEkycSpinner {
+  flex: 1;
+}
+
 .IncodeEkycPage {
   max-width: 480px;
   margin-inline: auto;