@incodetech/web 2.0.0-alpha.8 → 2.0.0-rc.0

package/dist/email/email.es.js

@@ -1,145 +1,87 @@
-import { u as e, S as g, r as h, a as v, B as O } from "../incodeModule-Dv8Qllrv.js";
-import { createEmailManager as y } from "@incodetech/core/email";
-import { d as f, y as b, k as V } from "../vendor-preact-CK0WeTOR.js";
-import { I as P, P as E } from "../page-D9ijzlSn.js";
-import { O as k } from "../otpInput-BtoZe0Wz.js";
-const I = /^[^\s@]+@[^\s@]+\.[^\s@]+$/, w = ({
-  prefilledEmail: i,
-  emailError: s,
-  disabled: r = !1,
-  onEmailChange: t
-}) => {
-  const [n, o] = f("");
-  b(() => {
-    if (i) {
-      o(i);
-      const a = I.test(i.trim());
-      t(i.trim(), a);
-    }
-  }, [i, t]);
-  const m = (a) => {
-    const u = a.target.value;
-    o(u);
-    const l = u.trim(), c = l.length > 0 && I.test(l);
-    t(l, c);
-  }, p = s ? "email-error" : void 0;
-  return /* @__PURE__ */ e("div", { class: "IncodeEmailInput", children: /* @__PURE__ */ e("div", { class: "IncodeEmailInputContainer", children: [
-    /* @__PURE__ */ e(
-      "div",
-      {
-        class: `IncodeEmailInputWrapper ${s ? "IncodeEmailInputWrapperError" : ""} ${r ? "IncodeEmailInputWrapperDisabled" : ""}`,
-        children: [
-          /* @__PURE__ */ e("label", { for: "email-input", class: "IncodeEmailInputLabel", children: "Email" }),
-          /* @__PURE__ */ e(
-            "input",
-            {
-              id: "email-input",
-              type: "email",
-              value: n,
-              onInput: m,
-              placeholder: "Email",
-              disabled: r,
-              class: "IncodeEmailInputField",
-              "data-testid": "email-input",
-              "aria-label": "Email address",
-              "aria-invalid": s ? "true" : "false",
-              "aria-describedby": p,
-              autocomplete: "email"
-            }
-          )
-        ]
-      }
-    ),
-    s && /* @__PURE__ */ e(V, { children: [
-      /* @__PURE__ */ e(g, { size: 8 }),
-      /* @__PURE__ */ e(
-        "p",
-        {
-          id: p,
-          class: "IncodeEmailInputError",
-          "data-testid": "email-error",
-          role: "alert",
-          children: s
-        }
-      )
-    ] })
-  ] }) });
-}, C = ({ config: i, onFinish: s, onError: r }) => {
-  const [t, n] = v(() => {
-    if (!i)
-      throw new Error("Email config is required");
-    return y({ config: i });
-  }), [o, m] = f(!1);
-  if (b(() => {
-    if (t.status === "idle" && n.load)
-      try {
-        n.load();
-      } catch (a) {
-        r?.(
-          a instanceof Error ? a.message : "Failed to initialize email verification"
-        );
-      }
-  }, []), t.status === "idle" || t.status === "loadingPrefill" || t.status === "inputting" || t.status === "submitting" || t.status === "sendingOtp") {
-    const a = t.status === "idle" || t.status === "loadingPrefill" || t.status === "submitting" || t.status === "sendingOtp", d = t.status === "inputting" ? t.prefilledEmail : void 0, u = t.status === "inputting" ? t.emailError : void 0;
-    return /* @__PURE__ */ e(
-      E,
-      {
-        className: "IncodeEmailPage",
-        title: "Verify Email",
-        subtitle: i.otpVerification ? "We will send you a verification code" : void 0,
-        children: [
-          /* @__PURE__ */ e(
-            w,
-            {
-              prefilledEmail: d,
-              emailError: u,
-              disabled: a,
-              onEmailChange: (l, c) => {
-                n.setEmail(l, c), m(c);
-              }
-            }
-          ),
-          /* @__PURE__ */ e(g, {}),
-          /* @__PURE__ */ e(
-            O,
-            {
-              onClick: () => n.submit(),
-              disabled: !o,
-              isLoading: a,
-              "data-testid": "email-submit",
-              children: "Continue"
-            }
-          )
-        ]
-      }
-    );
-  }
-  if (t.status === "awaitingOtp" || t.status === "verifyingOtp" || t.status === "otpError") {
-    const a = t.status === "verifyingOtp";
-    return /* @__PURE__ */ e(
-      E,
-      {
-        className: "IncodeEmailPage IncodeEmailOtpPage",
-        title: "Enter Verification Code",
-        children: /* @__PURE__ */ e(
-          k,
-          {
-            resendTimer: t.status === "awaitingOtp" ? t.resendTimer : 0,
-            canResend: t.status === "awaitingOtp" ? t.canResend : !1,
-            error: t.status === "otpError" ? t.error : void 0,
-            onSubmit: (d) => n.submitOtp(d),
-            onResend: () => n.resendOtp(),
-            onBack: () => n.back(),
-            backLinkText: "change email address",
-            isLoading: a
-          }
-        )
-      }
-    );
-  }
-  return t.status === "success" ? (s?.(), null) : (t.status === "error" && r?.(t.error), null);
-}, L = ({ config: i, onFinish: s, onError: r }) => /* @__PURE__ */ e(P, { children: i ? /* @__PURE__ */ e(C, { config: i, onFinish: s, onError: r }) : null });
-h(L, "incode-email");
-export {
-  L as Email
-};
+import { n as e } from "../i18n-9s4OSqwi.js";
+import { _ as t, p as n, v as r } from "../vendor-preact-D6SntenC.js";
+import { o as i } from "../hooks-BVnGysT7.js";
+import { t as a } from "../incodeComponent-C1o4M0ZK.js";
+import { r as o } from "../loadingIcon-BN5YRQUb.js";
+import { t as s } from "../page-C1yT4DLb.js";
+import { t as c } from "../button-DcCUEn2n.js";
+import { t as l } from "../otpInput-DqRA_egd.js";
+import { t as u } from "../incodeModule-BqCjVgEI.js";
+import { t as d } from "../emailInput-DppGf9pv.js";
+import { createEmailManager as f } from "@incodetech/core/email";
+//#region src/modules/email/email.tsx
+function p(e) {
+	return e === "serverError" ? "email.serverError" : e;
+}
+function m(e) {
+	return e === "invalidEmail" ? "verification.errors.emailInvalid" : e === "serverError" ? "email.serverError" : e;
+}
+var h = ({ config: a, manager: u, onFinish: h, onError: g }) => {
+	let { t: _ } = e(), [v, y] = i(() => {
+		if (u) return u;
+		if (!a) throw Error("Email config is required");
+		return f({ config: a });
+	}, { manageLifecycle: !u }), [b, x] = n(""), [S, C] = n(!1), [w, T] = n(!1), [E, D] = n(!1), O = v.status === "inputting" ? v.prefilledEmail ?? "" : "";
+	if (t(() => {
+		if (O) {
+			let e = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(O.trim());
+			x(O.trim()), C(e), y.setEmail(O.trim(), e);
+		}
+	}, [O, y]), v.status === "idle" || v.status === "loadingPrefill" || v.status === "inputting" || v.status === "submitting" || v.status === "sendingInitialOtp") {
+		let e = v.status === "idle" || v.status === "loadingPrefill" || v.status === "submitting" || v.status === "sendingInitialOtp", t = v.status === "inputting" && v.emailError ? _(m(v.emailError)) : void 0, n = v.status === "inputting" && w && E && !S ? _("verification.errors.emailInvalid") : void 0, i = t ?? n, a = !S || t !== void 0;
+		return /* @__PURE__ */ r(s, {
+			className: "IncodeEmailPage",
+			title: _("email.verify"),
+			subtitle: _("email.willSendCode"),
+			children: [
+				/* @__PURE__ */ r(d, {
+					value: b,
+					emailError: i,
+					disabled: e,
+					required: !0,
+					onEmailChange: (e, t) => {
+						y.setEmail(e, t), x(e), T(!0), D(!1), C(t);
+					},
+					onBlur: () => {
+						D(!0);
+					}
+				}),
+				/* @__PURE__ */ r(o, {}),
+				/* @__PURE__ */ r(c, {
+					onClick: () => y.submit(),
+					disabled: a,
+					isLoading: e,
+					"data-testid": "email-submit",
+					children: _("common.continue")
+				})
+			]
+		}, "email-input");
+	}
+	if (v.status === "awaitingOtp" || v.status === "verifyingOtp" || v.status === "otpError" || v.status === "resendingOtp") {
+		let e = v.status === "verifyingOtp", t = v.status === "otpError", n = v.status === "awaitingOtp", i = v.status === "resendingOtp", a = n || t || e;
+		return /* @__PURE__ */ r(s, {
+			className: "IncodeEmailPage IncodeEmailOtpPage",
+			title: _("otp.enterCodeEmail"),
+			children: /* @__PURE__ */ r(l, {
+				resendTimer: a ? v.resendTimer : 0,
+				canResend: a ? v.canResend : !1,
+				error: t ? _(p(v.otpError)) : void 0,
+				isLoading: e,
+				disabled: i || e,
+				onSubmit: (e) => y.submitOtp(e),
+				onResend: () => y.resendOtp(),
+				onBack: () => y.back(),
+				backLinkText: "otp.changeEmail"
+			})
+		}, "email-otp");
+	}
+	return v.status === "finished" ? (h?.(), null) : (v.status === "error" && g?.(v.error), null);
+}, g = ({ config: e, manager: t, onFinish: n, onError: i }) => /* @__PURE__ */ r(a, { children: e || t ? /* @__PURE__ */ r(h, {
+	config: e,
+	manager: t,
+	onFinish: n,
+	onError: i
+}) : null });
+u(g, "incode-email");
+//#endregion
+export { g as Email };

package/dist/email/styles.css

@@ -1,123 +1,12 @@
-/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */
-@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-border-style: solid;
-      --tw-duration: initial;
-      --tw-font-weight: initial;
-    }
-  }
-}
-
-.IncodeEmailPage .IncodePageContent {
-  padding-top: var(--spacing-32, var(--spacing-32, 32px));
-  padding-bottom: var(--spacing-16, var(--spacing-16, 16px));
-}
-
-.IncodeEmailPage .IncodeEmailInput, .IncodeEmailPage .IncodeEmailInputContainer {
+/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
+.IncodeEmailInput, .IncodeEmailInputContainer {
   flex-direction: column;
   align-items: center;
   width: 100%;
   display: flex;
 }
 
-.IncodeEmailPage .IncodeEmailInputWrapper {
-  border-radius: var(--radius-small, var(--border-radius-small));
-  border-style: var(--tw-border-style);
-  border-width: 1px;
-  border-color: var(--color-input-border-default, var(--input-border-default));
-  background-color: var(--color-input-surface-default, var(--input-surface-default));
-  width: 100%;
-  max-width: 340px;
-  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;
-  flex-direction: column;
-  transition-duration: .2s;
-  display: flex;
-}
-
-.IncodeEmailPage .IncodeEmailInputWrapper:focus-within {
-  border-color: var(--color-input-border-active, var(--input-border-active));
-}
-
-.IncodeEmailPage .IncodeEmailInputWrapper.IncodeEmailInputWrapperError {
-  border-color: var(--color-input-border-negative, var(--input-border-negative));
-}
-
-.IncodeEmailPage .IncodeEmailInputWrapper.IncodeEmailInputWrapperDisabled {
-  border-color: var(--color-input-border-disabled, var(--input-border-disabled));
-  background-color: var(--color-input-surface-disabled, var(--input-surface-disabled));
-}
-
-.IncodeEmailPage .IncodeEmailInputLabel {
-  clip-path: inset(50%);
-  white-space: nowrap;
-  border-width: 0;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  padding: 0;
-  position: absolute;
-  overflow: hidden;
-}
-
-.IncodeEmailPage .IncodeEmailInputField {
-  border-style: var(--tw-border-style);
-  border-width: var(--border-width-none, var(--border-none));
-  --tw-border-style: none;
-  width: 100%;
-  padding-inline: var(--spacing-16, var(--spacing-16, 16px));
-  padding-block: var(--spacing-16, var(--spacing-16, 16px));
-  font-size: var(--text-18, var(--primitive-typography-size-18));
-  --tw-font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
-  font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
-  color: var(--color-input-text-field-default, var(--input-text-field-default));
-  --tw-outline-style: none;
-  border-radius: var(--radius-small, var(--border-radius-small));
-  background-color: #0000;
-  border-style: none;
-  outline-style: none;
-}
-
-.IncodeEmailPage .IncodeEmailInputField::placeholder {
-  --tw-font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
-  font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
-  color: var(--color-input-text-field-placeholder, var(--input-text-field-placeholder));
-}
-
-.IncodeEmailPage .IncodeEmailInputField:disabled {
-  cursor: not-allowed;
-  color: var(--color-input-text-field-disabled, var(--input-text-field-disabled));
-}
-
-.IncodeEmailPage .IncodeEmailInputField:focus {
-  --tw-outline-style: none;
-  outline-style: none;
-}
-
-.IncodeEmailPage .IncodeEmailInputError {
-  margin: var(--spacing-0, var(--spacing-none, 0px));
-  text-align: center;
-  font-size: var(--text-14, var(--primitive-typography-size-14));
-  --tw-font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
-  font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
-  color: var(--color-input-text-helper-negative, var(--input-text-helper-negative));
-}
-
-@property --tw-border-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
-
-@property --tw-duration {
-  syntax: "*";
-  inherits: false
-}
-
-@property --tw-font-weight {
-  syntax: "*";
-  inherits: false
+.IncodeEmailPage .IncodePageContent {
+  padding-top: var(--spacing-32, var(--spacing-32, 32px));
+  padding-bottom: var(--spacing-16, var(--spacing-16, 16px));
 }

package/dist/emailInput-DppGf9pv.js

@@ -0,0 +1,37 @@
+import { n as e } from "./i18n-9s4OSqwi.js";
+import { v as t } from "./vendor-preact-D6SntenC.js";
+import "./extensibility-CzEJfRwo.js";
+import { t as n } from "./inputComposed-APSw8C7o.js";
+//#region src/modules/email/emailInput.tsx
+var r = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/, i = ({ value: i, emailError: a, label: o, disabled: s = !1, required: c = !1, onEmailChange: l, onBlur: u }) => {
+	let { t: d } = e(), f = (e) => {
+		let t = e.target.value.trim();
+		l(t, t.length > 0 && r.test(t));
+	}, p = a ? "email-error" : void 0;
+	return /* @__PURE__ */ t("div", {
+		class: "IncodeEmailInput",
+		children: /* @__PURE__ */ t("div", {
+			class: "IncodeEmailInputContainer",
+			onFocusOut: u,
+			children: /* @__PURE__ */ t(n, {
+				id: "email-input",
+				type: "email",
+				value: i,
+				onInput: f,
+				placeholder: d("email.placeholder"),
+				disabled: s,
+				required: c,
+				label: o,
+				"data-testid": "email-input",
+				"aria-label": o ? void 0 : "Email address",
+				"aria-invalid": a ? "true" : void 0,
+				"aria-describedby": p || void 0,
+				autocomplete: "email",
+				error: a,
+				showErrorIcon: !0
+			})
+		})
+	});
+};
+//#endregion
+export { i as t };

package/dist/expiredId-BnmzE8T3.js

@@ -0,0 +1,70 @@
+import { n as e } from "./i18n-9s4OSqwi.js";
+import { _ as t, l as n, v as r } from "./vendor-preact-D6SntenC.js";
+import { r as i } from "./loadingIcon-BN5YRQUb.js";
+import { t as a } from "./page-C1yT4DLb.js";
+import { t as o } from "./typography-CxjaknHN.js";
+import { t as s } from "./button-DcCUEn2n.js";
+//#region src/shared/icons/redStrikeIcon.tsx
+var c = ({ className: e, ...t }) => /* @__PURE__ */ r("svg", {
+	class: e,
+	width: "33",
+	height: "32",
+	viewBox: "0 0 33 32",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg",
+	"aria-hidden": "true",
+	...t,
+	children: /* @__PURE__ */ r("path", {
+		d: "M16.5 0C25.3219 0 32.5 7.17642 32.5 16C32.5 24.8219 25.3219 32 16.5 32C7.67811 32 0.5 24.8219 0.5 16C0.5 7.17642 7.67811 0 16.5 0ZM13.6553 11.3701C13.1618 10.8767 12.3636 10.8767 11.8701 11.3701C11.3767 11.8636 11.3767 12.6618 11.8701 13.1553L14.9053 16.1924L11.8721 19.2256C11.3803 19.7191 11.3803 20.5173 11.8721 21.0107C12.3656 21.504 13.1658 21.5041 13.6592 21.0107L16.6924 17.9775L19.7334 21.0205C19.981 21.2664 20.3029 21.3916 20.6279 21.3916C20.9513 21.3916 21.2746 21.2664 21.5205 21.0205C22.014 20.527 22.014 19.7269 21.5205 19.2334L18.4775 16.1924L21.5107 13.1572C22.0041 12.6638 22.004 11.8639 21.5107 11.3721C21.0173 10.8786 20.2191 10.8786 19.7256 11.3721L16.6904 14.4053L13.6553 11.3701Z",
+		fill: "#E71111"
+	})
+}), l = ({ onRetry: l, onContinue: u, attemptsRemaining: d }) => {
+	let { t: f } = e(), p = n(null);
+	return t(() => {
+		p.current?.focus();
+	}, []), /* @__PURE__ */ r(a, {
+		hideHeader: !0,
+		hideFooterBranding: !0,
+		className: "IncodeIdExpiredPage",
+		"data-testid": "expired-id",
+		children: [/* @__PURE__ */ r("div", {
+			class: "IncodeIdExpiredContent",
+			role: "alert",
+			children: [
+				/* @__PURE__ */ r(c, { className: "IncodeIdExpiredIcon" }),
+				/* @__PURE__ */ r(o, {
+					ref: p,
+					tabIndex: -1,
+					className: "IncodeIdExpiredTitle",
+					children: f("idv2.capture.notifications.expiredId")
+				}),
+				/* @__PURE__ */ r(i, { size: 12 }),
+				/* @__PURE__ */ r("p", {
+					class: "IncodeIdExpiredSubtitle",
+					children: f("idv2.capture.expiredId.pleaseTryWithADifferentId")
+				}),
+				/* @__PURE__ */ r(i, { size: 80 }),
+				d === void 0 ? null : /* @__PURE__ */ r("p", {
+					class: "IncodeIdExpiredAttemptsCounter",
+					"data-testid": "expired-id-attempts-counter",
+					children: `${d} ${f("idv2.capture.processing.attemptsRemainingLabel")}`
+				})
+			]
+		}), /* @__PURE__ */ r("div", {
+			class: "IncodeIdExpiredButtonContainer",
+			children: l ? /* @__PURE__ */ r(s, {
+				variant: "primary",
+				onClick: l,
+				"data-testid": "expired-id-retry",
+				children: f("idv2.capture.processing.tryAgain")
+			}) : u ? /* @__PURE__ */ r(s, {
+				variant: "primary",
+				onClick: u,
+				"data-testid": "expired-id-continue",
+				children: f("idv2.capture.processing.continue")
+			}) : null
+		})]
+	});
+};
+//#endregion
+export { c as n, l as t };