@incodetech/web 2.2.0-rc.8 → 2.3.0-rc.0

package/dist/baseTutorial-DkL0vjUa.js

@@ -0,0 +1,172 @@
+import { u as T, v as u } from "./vendor-preact-C0jX1Cbq.js";
+import { c as Page } from "./incodeComponent-D3_BSWan.js";
+import { d as cn, o as Lottie } from "./spacer-ayyj5lMa.js";
+import { x as Button } from "./icons-eIgP34nj.js";
+//#region src/shared/baseTutorial/replaceBaseTutorial.ts
+/**
+* The brand blues baked into the tutorial animations. The selfie oval/shoulders
+* use `#007aff`; the ID/passport tutorials additionally use `#006aff` (the
+* default brand blue) for their accent. Both are re-tinted to the active
+* branding color.
+*
+* Authored as hex and converted to Lottie's normalized `[r, g, b]` (0–1) form.
+* The two greens are ~0.06 apart, comfortably outside `COLOR_MATCH_TOLERANCE`,
+* so they neither cross-match nor catch the (grayscale/white) document and
+* face artwork.
+*/
+var SOURCE_BRAND_COLORS = ["#007aff", "#006aff"].map(hexToRgbUnit).filter((color) => color !== null);
+/**
+* Per-channel tolerance when matching a source color. The baked values are
+* authored as rounded decimals (e.g. `0.48`), so an exact comparison is too
+* brittle; a small tolerance keeps the match robust without catching
+* unrelated colors.
+*/
+var COLOR_MATCH_TOLERANCE = .02;
+/**
+* Reads a CSS custom property off the document root and returns its value.
+* Returns `fallback` (empty by default) when the property is unset or
+* unavailable (e.g. during SSR / tests). With the default empty fallback the
+* recolor no-ops, leaving the animation's authored colors in place — which are
+* the default brand blue, so no theme-specific literal is needed here.
+*/
+function getCssVariableAsHex(variableName, fallback = "") {
+	if (typeof document === "undefined") return fallback;
+	return getComputedStyle(document.documentElement).getPropertyValue(variableName).trim() || fallback;
+}
+function hexToRgbUnit(hex) {
+	let normalized = hex.replace("#", "").trim();
+	if (normalized.length === 3) normalized = normalized.split("").map((char) => char + char).join("");
+	const result = /^([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(normalized);
+	if (!result) return null;
+	return [
+		Number.parseInt(result[1], 16) / 255,
+		Number.parseInt(result[2], 16) / 255,
+		Number.parseInt(result[3], 16) / 255
+	];
+}
+function channelMatches(a, b) {
+	return Math.abs(a - b) <= COLOR_MATCH_TOLERANCE;
+}
+function isSourceColor(r, g, b) {
+	return SOURCE_BRAND_COLORS.some(([sr, sg, sb]) => channelMatches(r, sr) && channelMatches(g, sg) && channelMatches(b, sb));
+}
+function isStaticColorArray(value) {
+	return Array.isArray(value) && value.length >= 3 && value.every((entry) => typeof entry === "number");
+}
+function recolorSolid(node, target) {
+	const colorHolder = node.c;
+	if (!colorHolder || typeof colorHolder !== "object") return;
+	const k = colorHolder.k;
+	if (isStaticColorArray(k) && isSourceColor(k[0], k[1], k[2])) {
+		k[0] = target[0];
+		k[1] = target[1];
+		k[2] = target[2];
+	}
+}
+function recolorGradient(node, target) {
+	const gradient = node.g;
+	if (!gradient || typeof gradient !== "object") return;
+	const { p, k } = gradient;
+	const stopCount = typeof p === "number" ? p : 0;
+	const stops = k?.k;
+	if (stopCount <= 0 || !Array.isArray(stops)) return;
+	for (let stop = 0; stop < stopCount; stop++) {
+		const base = stop * 4;
+		const r = stops[base + 1];
+		const g = stops[base + 2];
+		const b = stops[base + 3];
+		if (typeof r === "number" && typeof g === "number" && typeof b === "number" && isSourceColor(r, g, b)) {
+			stops[base + 1] = target[0];
+			stops[base + 2] = target[1];
+			stops[base + 3] = target[2];
+		}
+	}
+}
+function recolorNode(node, target) {
+	if (Array.isArray(node)) {
+		for (const child of node) recolorNode(child, target);
+		return;
+	}
+	if (!node || typeof node !== "object") return;
+	const obj = node;
+	if (obj.ty === "fl" || obj.ty === "st") recolorSolid(obj, target);
+	else if (obj.ty === "gf" || obj.ty === "gs") recolorGradient(obj, target);
+	for (const key of Object.keys(obj)) recolorNode(obj[key], target);
+}
+/**
+* Returns a deep copy of `animationData` with the baked-in brand blue swapped
+* for `hexColor`. The input is never mutated. Unparseable colors leave the
+* animation untouched.
+*/
+function replaceLottieColor(animationData, hexColor) {
+	const target = hexToRgbUnit(hexColor);
+	if (!target) return animationData;
+	const clone = JSON.parse(JSON.stringify(animationData));
+	recolorNode(clone, target);
+	return clone;
+}
+//#endregion
+//#region src/shared/baseTutorial/baseTutorial.tsx
+var BaseTutorial = ({ className = "", animationData, title, titleId, subtitle, onContinue, buttonText, disclaimerText, isLoading, secondaryAction, actionsSlot, stopFramePosition = "middle", recolor = true, shouldScaleAnimationContainer }) => {
+	const themedAnimationData = T(() => {
+		if (!animationData) return null;
+		if (!recolor) return animationData;
+		return replaceLottieColor(animationData, getCssVariableAsHex("--primitive-color-brand-500"));
+	}, [animationData, recolor]);
+	let scaledClasses = {
+		page: "",
+		container: "",
+		animationContainer: ""
+	};
+	if (shouldScaleAnimationContainer) scaledClasses = {
+		page: "IncodeTutorialPageScaled",
+		container: "IncodeBaseTutorialContainerScaled",
+		animationContainer: "IncodeBaseTutorialAnimationContainerScaled"
+	};
+	return /* @__PURE__ */ u(Page, {
+		className: cn("IncodeTutorialPage", scaledClasses.page, className),
+		title,
+		titleId,
+		subtitle,
+		children: [/* @__PURE__ */ u("div", {
+			class: cn("IncodeBaseTutorialContainer", scaledClasses.container),
+			children: /* @__PURE__ */ u("div", {
+				class: cn("IncodeBaseTutorialAnimationContainer", scaledClasses.animationContainer),
+				"aria-hidden": "true",
+				children: themedAnimationData ? /* @__PURE__ */ u(Lottie, {
+					animationData: themedAnimationData,
+					className: "IncodeBaseTutorialAnimation",
+					autoStop: true,
+					stopFramePosition
+				}) : null
+			})
+		}), /* @__PURE__ */ u("div", { children: [/* @__PURE__ */ u("p", {
+			class: "IncodeBaseTutorialDisclaimer",
+			children: disclaimerText
+		}), /* @__PURE__ */ u("div", {
+			class: "IncodeBaseTutorialButtonContainer",
+			children: [
+				/* @__PURE__ */ u(Button, {
+					onClick: onContinue,
+					class: "IncodeBaseTutorialButton",
+					isLoading,
+					children: buttonText
+				}),
+				secondaryAction ? /* @__PURE__ */ u(Button, {
+					variant: "link",
+					onClick: secondaryAction.onClick,
+					class: "IncodeBaseTutorialSecondaryAction",
+					disabled: isLoading,
+					"data-testid": secondaryAction.testId,
+					children: secondaryAction.label
+				}) : null,
+				actionsSlot && /* @__PURE__ */ u("div", {
+					class: "IncodeBaseTutorialActionsSlot",
+					children: actionsSlot
+				})
+			]
+		})] })]
+	});
+};
+//#endregion
+export { BaseTutorial as t };