@incodetech/web 0.0.0-dev-20260422-96fafd7 → 0.0.0-dev-20260422-4a0d0e6

package/dist/{dropdownComposed-D33V63q7.js → dropdownComposed-DU_6BWvm.js}

@@ -1,15 +1,15 @@
 import { _ as e, l as t, p as n, v as r } from "./vendor-preact-D6SntenC.js";
 import { n as i } from "./loadingIcon-wTrHZMGC.js";
-import { h as a, l as o, n as s } from "./icons-GsJu_yZn.js";
-import { t as ee } from "./successIcon-C4GI_9SU.js";
+import { h as ee, l as a, n as o } from "./icons-GsJu_yZn.js";
+import { t as s } from "./successIcon-C4GI_9SU.js";
 //#region src/shared/dropdownComposed/dropdownComposed.tsx
-var c = ({ id: c, label: l, placeholder: u = "Choose an option", value: d, options: f, onChange: p, error: m, helper: h, showErrorIcon: te, showHelperIcon: g, suppressMessages: _ = !1, disabled: v = !1, required: y, searchable: b = !1, searchPlaceholder: x = "Search...", noResultsText: S = "No results found", name: C, tabIndex: w, onKeyDown: T, onBlur: E, renderSelectedLabel: D, siblingElement: O, enterKeyHint: ne, class: k, "aria-label": A, "data-testid": j }) => {
-	let [M, N] = n(!1), [re, P] = n(!1), [F, I] = n(-1), [L, R] = n(""), z = t(null), B = t(null), V = t(null), H = t([]), U = t(null), W = t(""), G = t(), K = f.find((e) => e.value === d), q = K ? D ? D(K) : K.label : u, J = b && L ? f.filter((e) => e.label.toLowerCase().includes(L.toLowerCase())) : f, Y = `${c}-label`, X = `${c}-listbox`, Z = `${c}-helper`, Q = `${c}-error`, ie = _ ? "" : [h ? Z : null, m ? Q : null].filter(Boolean).join(" ");
+var c = ({ id: c, label: l, placeholder: u = "Choose an option", value: d, options: f, onChange: p, error: m, helper: h, showErrorIcon: g, showHelperIcon: _, suppressMessages: v = !1, disabled: y = !1, required: b, searchable: x = !1, searchPlaceholder: S = "Search...", noResultsText: C = "No results found", name: w, tabIndex: T, onKeyDown: E, onBlur: te, renderSelectedLabel: D, siblingElement: O, enterKeyHint: ne, class: k, "aria-label": A, "data-testid": j }) => {
+	let [M, N] = n(!1), [P, F] = n(!1), [I, L] = n(-1), [R, z] = n(""), B = t(null), V = t(null), H = t(null), U = t([]), W = t(null), G = t(""), K = t(), q = f.find((e) => e.value === d), re = q ? D ? D(q) : q.label : u, J = x && R ? f.filter((e) => e.label.toLowerCase().includes(R.toLowerCase())) : f, Y = `${c}-label`, X = `${c}-listbox`, Z = `${c}-helper`, Q = `${c}-error`, ie = v ? "" : [h ? Z : null, m ? Q : null].filter(Boolean).join(" ");
 	e(() => {
 		if (!M) return;
 		let e = requestAnimationFrame(() => {
-			b && U.current && U.current.focus(), requestAnimationFrame(() => {
-				V.current?.scrollIntoView({
+			x && W.current && W.current.focus(), requestAnimationFrame(() => {
+				H.current?.scrollIntoView({
 					behavior: "smooth",
 					block: "nearest",
 					inline: "nearest"
@@ -17,60 +17,60 @@ var c = ({ id: c, label: l, placeholder: u = "Choose an option", value: d, optio
 			});
 		});
 		return () => cancelAnimationFrame(e);
-	}, [M, b]), e(() => {
-		M || (I(-1), R(""));
+	}, [M, x]), e(() => {
+		M || (L(-1), z(""));
 	}, [M]), e(() => {
-		F >= 0 && H.current[F] && H.current[F]?.scrollIntoView({
+		I >= 0 && U.current[I] && U.current[I]?.scrollIntoView({
 			block: "nearest",
 			inline: "nearest"
 		});
-	}, [F]), e(() => () => {
-		G.current && clearTimeout(G.current);
+	}, [I]), e(() => () => {
+		K.current && clearTimeout(K.current);
 	}, []);
 	let ae = () => {
-		v || N((e) => !e);
+		y || N((e) => !e);
 	}, $ = (e) => {
-		p(e), N(!1), I(-1), B.current?.focus();
+		p(e), N(!1), L(-1), V.current?.focus();
 	}, oe = () => {
-		P(!0);
+		F(!0);
 	}, se = (e) => {
-		P(!1), z.current?.contains(e.relatedTarget) || (N(!1), E?.());
+		F(!1), B.current?.contains(e.relatedTarget) || (N(!1), te?.());
 	}, ce = (e) => {
-		if (v) return;
-		T?.(e);
+		if (y) return;
+		E?.(e);
 		let { key: t } = e;
 		if (t.length === 1 && /^[a-zA-Z0-9]$/.test(t)) {
-			e.preventDefault(), G.current && clearTimeout(G.current), W.current += t.toLowerCase();
-			let n = J.findIndex((e) => e.label.toLowerCase().startsWith(W.current));
-			n !== -1 && (M || N(!0), I(n)), G.current = setTimeout(() => {
-				W.current = "";
+			e.preventDefault(), K.current && clearTimeout(K.current), G.current += t.toLowerCase();
+			let n = J.findIndex((e) => e.label.toLowerCase().startsWith(G.current));
+			n !== -1 && (M || N(!0), L(n)), K.current = setTimeout(() => {
+				G.current = "";
 			}, 500);
 			return;
 		}
 		switch (t) {
 			case "ArrowDown":
-				e.preventDefault(), M ? I((e) => e < J.length - 1 ? e + 1 : e) : (N(!0), I(0));
+				e.preventDefault(), M ? L((e) => e < J.length - 1 ? e + 1 : e) : (N(!0), L(0));
 				break;
 			case "ArrowUp":
-				e.preventDefault(), M ? I((e) => e > 0 ? e - 1 : e) : (N(!0), I(J.length - 1));
+				e.preventDefault(), M ? L((e) => e > 0 ? e - 1 : e) : (N(!0), L(J.length - 1));
 				break;
 			case "Home":
-				e.preventDefault(), M && I(0);
+				e.preventDefault(), M && L(0);
 				break;
 			case "End":
-				e.preventDefault(), M && I(J.length - 1);
+				e.preventDefault(), M && L(J.length - 1);
 				break;
 			case "Enter":
-				e.preventDefault(), M && F >= 0 && J[F] ? $(J[F].value) : M || N(!0);
+				e.preventDefault(), M && I >= 0 && J[I] ? $(J[I].value) : M || N(!0);
 				break;
 			case " ":
-				e.preventDefault(), M && F >= 0 && J[F] ? $(J[F].value) : M || (N(!0), I(0));
+				e.preventDefault(), M && I >= 0 && J[I] ? $(J[I].value) : M || (N(!0), L(0));
 				break;
 			case "Escape":
-				e.preventDefault(), M && (N(!1), I(-1), B.current?.focus());
+				e.preventDefault(), M && (N(!1), L(-1), V.current?.focus());
 				break;
 			case "Tab":
-				M && (N(!1), I(-1));
+				M && (N(!1), L(-1));
 				break;
 			default: break;
 		}
@@ -78,47 +78,47 @@ var c = ({ id: c, label: l, placeholder: u = "Choose an option", value: d, optio
 		let { key: t } = e;
 		switch (t) {
 			case "ArrowDown":
-				e.preventDefault(), I((e) => e < J.length - 1 ? e + 1 : e);
+				e.preventDefault(), L((e) => e < J.length - 1 ? e + 1 : e);
 				break;
 			case "ArrowUp":
-				e.preventDefault(), I((e) => e > 0 ? e - 1 : e);
+				e.preventDefault(), L((e) => e > 0 ? e - 1 : e);
 				break;
 			case "Home":
-				e.preventDefault(), I(0);
+				e.preventDefault(), L(0);
 				break;
 			case "End":
-				e.preventDefault(), I(J.length - 1);
+				e.preventDefault(), L(J.length - 1);
 				break;
 			case "Enter":
-				e.preventDefault(), F >= 0 && J[F] && $(J[F].value);
+				e.preventDefault(), I >= 0 && J[I] && $(J[I].value);
 				break;
 			case "Escape":
-				e.preventDefault(), N(!1), I(-1), B.current?.focus();
+				e.preventDefault(), N(!1), L(-1), V.current?.focus();
 				break;
 			case "Tab":
-				N(!1), I(-1);
+				N(!1), L(-1);
 				break;
 			default: break;
 		}
 	};
 	return /* @__PURE__ */ r("div", {
 		class: i("IncodeDropdownComposed", k),
-		ref: z,
+		ref: B,
 		onBlur: se,
 		children: [
-			C && /* @__PURE__ */ r("input", {
+			w && /* @__PURE__ */ r("input", {
 				type: "hidden",
-				name: C,
+				name: w,
 				value: d || "",
-				disabled: v,
-				required: y
+				disabled: y,
+				required: b
 			}),
 			l && /* @__PURE__ */ r("label", {
 				class: "IncodeDropdownComposedLabel",
 				id: Y,
 				htmlFor: c,
 				"data-testid": `${c}-label`,
-				children: [l, y && /* @__PURE__ */ r("span", {
+				children: [l, b && /* @__PURE__ */ r("span", {
 					class: "IncodeDropdownComposedRequired",
 					children: " *"
 				})]
@@ -128,70 +128,71 @@ var c = ({ id: c, label: l, placeholder: u = "Choose an option", value: d, optio
 				children: [/* @__PURE__ */ r("div", {
 					class: i("IncodeDropdownComposedTriggerRow", { IncodeDropdownComposedTriggerRowWithSibling: !!O }),
 					children: [/* @__PURE__ */ r("button", {
-						ref: B,
+						ref: V,
 						type: "button",
 						id: c,
 						class: "IncodeDropdownComposedTrigger",
 						onClick: ae,
 						onFocus: oe,
 						onKeyDown: ce,
-						tabIndex: v ? -1 : w ?? 0,
-						disabled: v,
+						tabIndex: y ? -1 : T ?? 0,
+						disabled: y,
 						"aria-haspopup": "listbox",
 						"aria-expanded": M ? "true" : "false",
-						"aria-disabled": v ? "true" : void 0,
+						"aria-disabled": y ? "true" : void 0,
 						"aria-labelledby": l ? Y : void 0,
 						"aria-label": l ? void 0 : A,
 						"aria-controls": M ? X : void 0,
-						"aria-activedescendant": M && F >= 0 ? `${c}-option-${F}` : void 0,
+						"aria-activedescendant": M && I >= 0 ? `${c}-option-${I}` : void 0,
 						"aria-invalid": m ? "true" : void 0,
-						"aria-required": y ? "true" : void 0,
+						"aria-required": b ? "true" : void 0,
 						"aria-describedby": ie || void 0,
 						"data-error": m ? "true" : void 0,
-						"data-focused": re || M ? "true" : void 0,
+						"data-focused": P || M ? "true" : void 0,
 						"data-testid": j,
 						children: [/* @__PURE__ */ r("span", {
-							class: K ? "IncodeDropdownComposedTriggerText" : "IncodeDropdownComposedTriggerPlaceholder",
-							children: q
+							class: q ? "IncodeDropdownComposedTriggerText" : "IncodeDropdownComposedTriggerPlaceholder",
+							"aria-hidden": !l && A ? "true" : void 0,
+							children: re
 						}), /* @__PURE__ */ r("span", {
 							class: "IncodeDropdownComposedTriggerIcon",
 							"aria-hidden": "true",
 							"data-open": M,
-							children: /* @__PURE__ */ r(o, {})
+							children: /* @__PURE__ */ r(a, {})
 						})]
 					}), O && /* @__PURE__ */ r("div", {
 						class: "IncodeDropdownComposedSibling",
 						children: O
 					})]
 				}), M && /* @__PURE__ */ r("div", {
-					ref: V,
+					ref: H,
 					class: "IncodeDropdownComposedList",
 					"data-error": m ? "true" : void 0,
-					children: [b && /* @__PURE__ */ r("div", {
+					children: [x && /* @__PURE__ */ r("div", {
 						class: "IncodeDropdownComposedSearchWrapper",
 						children: /* @__PURE__ */ r("div", {
 							class: "IncodeDropdownComposedSearchInner",
 							children: [/* @__PURE__ */ r("input", {
-								ref: U,
+								ref: W,
 								type: "text",
 								class: "IncodeDropdownComposedSearchInput",
-								value: L,
+								value: R,
 								onInput: (e) => {
-									R(e.target.value), I(0);
+									z(e.target.value), L(0);
 								},
 								onKeyDown: le,
-								placeholder: x,
+								placeholder: S,
 								role: "combobox",
 								"aria-autocomplete": "list",
 								"aria-expanded": "true",
 								"aria-controls": X,
-								"aria-activedescendant": F >= 0 ? `${c}-option-${F}` : void 0,
-								"aria-label": x,
+								"aria-activedescendant": I >= 0 ? `${c}-option-${I}` : void 0,
+								"aria-label": S,
 								autocomplete: "off"
 							}), /* @__PURE__ */ r("span", {
 								class: "IncodeDropdownComposedSearchIcon",
 								"aria-hidden": "true",
-								children: /* @__PURE__ */ r(s, { size: 20 })
+								children: /* @__PURE__ */ r(o, { size: 20 })
 							})]
 						})
 					}), /* @__PURE__ */ r("div", {
@@ -202,49 +203,53 @@ var c = ({ id: c, label: l, placeholder: u = "Choose an option", value: d, optio
 						class: "IncodeDropdownComposedOptionsScroll",
 						children: J.length === 0 ? /* @__PURE__ */ r("div", {
 							class: "IncodeDropdownComposedNoResults",
-							children: S
+							children: C
 						}) : J.map((e, t) => /* @__PURE__ */ r("div", {
 							id: `${c}-option-${t}`,
 							role: "option",
+							"aria-label": e.ariaLabel,
 							"aria-selected": d === e.value ? "true" : "false",
 							class: "IncodeDropdownComposedOption",
-							"data-highlighted": F === t,
+							"data-highlighted": I === t,
 							ref: (e) => {
-								H.current[t] = e;
+								U.current[t] = e;
 							},
 							onClick: () => $(e.value),
 							onMouseDown: (e) => e.preventDefault(),
-							onMouseEnter: () => I(t),
-							children: e.label
+							onMouseEnter: () => L(t),
+							children: e.ariaLabel ? /* @__PURE__ */ r("span", {
+								"aria-hidden": "true",
+								children: e.label
+							}) : e.label
 						}, e.value))
 					})]
 				})]
 			}),
-			b && /* @__PURE__ */ r("div", {
+			x && /* @__PURE__ */ r("div", {
 				class: "IncodeDropdownComposedLiveRegion",
 				role: "status",
 				"aria-live": "polite",
 				"aria-atomic": "true",
-				children: M && L ? J.length === 0 ? S : `${J.length} result${J.length === 1 ? "" : "s"} available` : ""
+				children: M && R ? J.length === 0 ? C : `${J.length} result${J.length === 1 ? "" : "s"} available` : ""
 			}),
-			!_ && m && /* @__PURE__ */ r("div", {
+			!v && m && /* @__PURE__ */ r("div", {
 				class: "IncodeDropdownComposedErrorWrapper",
 				"data-testid": `${c}-error-wrapper`,
-				children: [te && /* @__PURE__ */ r("div", {
+				children: [g && /* @__PURE__ */ r("div", {
 					class: "IncodeDropdownComposedIconWrapper",
-					children: /* @__PURE__ */ r(a, { size: 17 })
+					children: /* @__PURE__ */ r(ee, { size: 17 })
 				}), /* @__PURE__ */ r("p", {
 					id: Q,
 					class: "IncodeDropdownComposedError",
 					children: m
 				})]
 			}),
-			!_ && h && !m && /* @__PURE__ */ r("div", {
+			!v && h && !m && /* @__PURE__ */ r("div", {
 				class: "IncodeDropdownComposedHelperWrapper",
 				"data-testid": `${c}-helper-wrapper`,
-				children: [g && /* @__PURE__ */ r("div", {
+				children: [_ && /* @__PURE__ */ r("div", {
 					class: "IncodeDropdownComposedIconWrapper",
-					children: /* @__PURE__ */ r(ee, { size: 17 })
+					children: /* @__PURE__ */ r(s, { size: 17 })
 				}), /* @__PURE__ */ r("p", {
 					id: Z,
 					class: "IncodeDropdownComposedHelper",

package/dist/ekyb/ekyb.es.js

@@ -1,2 +1,2 @@
-import { t as e } from "../ekybModule-DV8eZFTA.js";
+import { t as e } from "../ekybModule-BRgihGGi.js";
 export { e as EkybModule };

package/dist/ekyb/styles.css

@@ -2,22 +2,21 @@
 @layer properties {
   @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
     *, :before, :after, ::backdrop {
-      --tw-font-weight: initial;
       --tw-border-style: solid;
     }
   }
 }
 
-.IncodeEkybSpinner {
-  flex: 1;
-}
-
 .IncodeEkybPage {
   max-width: 480px;
   margin-inline: auto;
 }
 
-.IncodeEkybForm {
+.IncodeEkybPage .IncodeEkybSpinner {
+  flex: 1;
+}
+
+.IncodeEkybPage .IncodeEkybForm {
   margin-top: var(--spacing-32, var(--spacing-32, 32px));
   gap: var(--spacing-16, var(--spacing-16, 16px));
   flex-direction: column;
@@ -25,91 +24,45 @@
   display: flex;
 }
 
-.IncodeEkybForm .IncodeInputComposed, .IncodeEkybForm .IncodeDropdownComposed, .IncodeEkybForm .IncodeFormField {
+.IncodeEkybPage .IncodeEkybForm .IncodeInputComposed, .IncodeEkybPage .IncodeEkybForm .IncodeDropdownComposed, .IncodeEkybPage .IncodeEkybForm .IncodeFormField {
   margin-inline: auto;
 }
 
-.IncodeEkybForm .IncodeFormField {
+.IncodeEkybPage .IncodeEkybForm .IncodeFormField {
   margin-bottom: var(--spacing-0, var(--spacing-none, 0px));
 }
 
-.IncodeEkybForm .IncodeAddressAutocomplete {
+.IncodeEkybPage .IncodeEkybForm .IncodeAddressAutocomplete {
   margin-inline: auto;
 }
 
-.IncodeEkybFooter {
-  margin-top: var(--spacing-24, var(--spacing-24, 24px));
-}
-
-@media (min-width: 768px) {
-  .IncodePageContainer.IncodeEkybPage {
-    margin-top: var(--spacing-0, var(--spacing-none, 0px));
-    height: 95dvh;
-    max-height: none;
-  }
-
-  .IncodeEkybPage .IncodePageInner {
-    height: 95%;
-  }
-
-  .IncodePageContainer.IncodeEkybPageScrollable {
-    max-width: 500px;
-  }
-
-  .IncodeEkybPage .IncodePageContent {
-    min-height: var(--spacing-0, var(--spacing-none, 0px));
-  }
-
-  .IncodeEkybPage .IncodeEkybForm {
-    min-height: var(--spacing-0, var(--spacing-none, 0px));
-    padding-bottom: var(--spacing-8, var(--spacing-8, 8px));
-    overflow-y: auto;
-  }
-
-  .IncodeEkybPageScrollable .IncodeEkybForm {
-    margin-left: var(--spacing-8, var(--spacing-8, 8px));
-  }
-
-  .IncodeEkybFooter {
-    flex-shrink: 0;
-  }
-}
-
-.IncodeEkybPage .IncodeEkybSectionHeader {
-  font-family: var(--typography-headline-family);
-  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);
-  --tw-font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
-  font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
-  color: var(--color-input-text-label-default, var(--input-text-label-default));
-  margin-inline: auto;
-  margin-top: var(--spacing-16, var(--spacing-16, 16px));
+.IncodeEkybPage .IncodeEkybCountrySelector {
   width: 100%;
-  max-width: 420px;
-  padding-block: var(--spacing-12, var(--spacing-12, 12px));
 }
 
-.IncodeEkybUbos, .IncodeEkybUboEntry {
+.IncodeEkybPage .IncodeEkybUbos, .IncodeEkybPage .IncodeEkybUboEntry {
   gap: var(--spacing-16, var(--spacing-16, 16px));
   flex-direction: column;
   display: flex;
 }
 
-.IncodeEkybRemoveUbo {
+.IncodeEkybPage .IncodeEkybRemoveUbo {
   cursor: pointer;
   border-style: var(--tw-border-style);
   border-width: var(--border-width-none, var(--primitive-border-width-0));
   --tw-border-style: none;
   padding: var(--spacing-0, var(--spacing-none, 0px));
-  font-size: var(--text-12, var(--primitive-typography-size-12));
+  font-family: var(--typography-body-family);
+  font-size: var(--typography-body-s-regular-size);
+  font-weight: var(--typography-body-s-regular-weight);
+  line-height: var(--typography-body-s-regular-line-height);
+  letter-spacing: var(--typography-body-s-regular-letter-spacing);
   color: var(--color-text-status-negative, var(--text-status-negative));
   background-color: #0000;
   border-style: none;
 }
 
-.IncodeEkybAddUbo {
+.IncodeEkybPage .IncodeEkybAddUbo {
   cursor: pointer;
   border-style: var(--tw-border-style);
   border-width: var(--border-width-none, var(--primitive-border-width-0));
@@ -131,17 +84,60 @@
   text-decoration-thickness: auto;
 }
 
-.IncodeEkybAddUbo:hover {
+.IncodeEkybPage .IncodeEkybAddUbo:hover {
   opacity: .8;
 }
 
-.IncodeEkybCountrySelector {
+.IncodeEkybPage .IncodeEkybSectionHeader {
+  font-family: var(--typography-headline-family);
+  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-input-text-label-default, var(--input-text-label-default));
+  margin-inline: auto;
+  margin-top: var(--spacing-16, var(--spacing-16, 16px));
   width: 100%;
+  max-width: 420px;
+  padding-block: var(--spacing-12, var(--spacing-12, 12px));
 }
 
-@property --tw-font-weight {
-  syntax: "*";
-  inherits: false
+.IncodeEkybPage .IncodeEkybFooter {
+  margin-top: var(--spacing-24, var(--spacing-24, 24px));
+}
+
+@media (min-width: 768px) {
+  .IncodeEkybPage.IncodePageContainer {
+    margin-top: var(--spacing-0, var(--spacing-none, 0px));
+    height: 95dvh;
+    max-height: none;
+  }
+
+  .IncodeEkybPage .IncodePageInner {
+    height: 95%;
+  }
+
+  .IncodeEkybPage.IncodeEkybPageScrollable {
+    max-width: 500px;
+  }
+
+  .IncodeEkybPage .IncodePageContent {
+    min-height: var(--spacing-0, var(--spacing-none, 0px));
+  }
+
+  .IncodeEkybPage .IncodeEkybForm {
+    min-height: var(--spacing-0, var(--spacing-none, 0px));
+    padding-bottom: var(--spacing-8, var(--spacing-8, 8px));
+    overflow-y: auto;
+  }
+
+  .IncodeEkybPage.IncodeEkybPageScrollable .IncodeEkybForm {
+    margin-left: var(--spacing-8, var(--spacing-8, 8px));
+  }
+
+  .IncodeEkybPage .IncodeEkybFooter {
+    flex-shrink: 0;
+  }
 }
 
 @property --tw-border-style {