@smileid/usesmileid 12.0.0-beta01

package/dist/presentation/components/use_smile_id_face_overlay.js

@@ -0,0 +1,194 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useEffect, useRef } from "react";
+import { Animated, Easing, StyleSheet, View } from "react-native";
+import Svg, { ClipPath, Defs, Ellipse, Path, Rect } from "react-native-svg";
+import { useUseSmileIDTheme } from "../theme/theme_context";
+import { UseSmileIDMotion } from "../theme/use_smile_id_motion";
+import { isDirectional, UseSmileIDOverlayState, } from "../state/use_smile_id_overlay_state";
+import { useUseSmileIDLocalizations } from "../../l10n/use_smile_id_localizations_provider";
+import { computeFaceOvalGeometry, FaceOvalDefaults, } from "./face_oval_defaults";
+import { UseSmileIDOvalBorderPalette } from "./use_smile_id_oval_border_palette";
+const STROKE_WIDTH = FaceOvalDefaults.strokeWidth;
+const AnimatedEllipse = Animated.createAnimatedComponent(Ellipse);
+/**
+ * Oval edge the arc hugs, or null when non-directional. ML-derived,
+ * never layout-direction-derived (RTL-safe; the oval is never mirrored).
+ */
+function arcEdgeFor(state) {
+    switch (state) {
+        case UseSmileIDOverlayState.MOVE_UP:
+            return "top";
+        case UseSmileIDOverlayState.MOVE_DOWN:
+            return "bottom";
+        case UseSmileIDOverlayState.MOVE_LEFT:
+            return "left";
+        case UseSmileIDOverlayState.MOVE_RIGHT:
+            return "right";
+        default:
+            return null;
+    }
+}
+/**
+ * Face capture oval — dimmed scrim with a transparent cutout plus a
+ * state-driven border. Colours resolve through
+ * `UseSmileIDOvalBorderPalette`; timings come from `UseSmileIDMotion`.
+ * Directional `MOVE_*` states suppress the progress ring and draw a
+ * red arc on the crowded oval edge. See docs/Face-Oval-State-Flows.md.
+ */
+export function UseSmileIDFaceOverlay(props) {
+    const themeFromContext = useUseSmileIDTheme();
+    const theme = props.theme ?? themeFromContext;
+    const loc = useUseSmileIDLocalizations();
+    const enableEnhancedLiveness = props.enableEnhancedLiveness ?? false;
+    const { ovalWidth, ovalHeight, ovalLeft, ovalTop } = computeFaceOvalGeometry(props.containerWidth, props.containerHeight);
+    const borderColor = theme.colors[UseSmileIDOvalBorderPalette.tokenFor(props.state, enableEnhancedLiveness)];
+    const overlayColor = theme.colors.captureOverlayBackground;
+    const trackColor = theme.colors.ovalDefault;
+    const fillColor = theme.colors.ovalActive;
+    const directionalColor = theme.colors.ovalDirectionalIndicator;
+    const progress = clamp01(props.progress ?? 0);
+    const directional = isDirectional(props.state);
+    const ovalCx = ovalLeft + ovalWidth / 2;
+    const ovalCy = ovalTop + ovalHeight / 2;
+    const ovalRx = ovalWidth / 2;
+    const ovalRy = ovalHeight / 2;
+    // Animated.Value can't tween colour strings — cross-fade via opacity
+    // on each borderColor change instead.
+    const borderOpacity = useRef(new Animated.Value(1)).current;
+    useEffect(() => {
+        borderOpacity.setValue(0);
+        Animated.timing(borderOpacity, {
+            toValue: 1,
+            duration: UseSmileIDMotion.stateTransition,
+            easing: Easing.inOut(Easing.ease),
+            useNativeDriver: true,
+        }).start();
+    }, [borderColor, borderOpacity]);
+    // The renderer reads this animated value, never the raw target, so
+    // per-frame native progress jumps rise smoothly.
+    const animatedProgress = useRef(new Animated.Value(progress)).current;
+    useEffect(() => {
+        Animated.timing(animatedProgress, {
+            toValue: progress,
+            duration: UseSmileIDMotion.progressFill,
+            easing: Easing.linear,
+            useNativeDriver: false,
+        }).start();
+    }, [progress, animatedProgress]);
+    // The arc fades rather than popping; the last edge is remembered so
+    // the fade-out stays anchored where the hint was.
+    const lastArcEdgeRef = useRef(arcEdgeFor(props.state));
+    const arcEdge = arcEdgeFor(props.state) ?? lastArcEdgeRef.current;
+    useEffect(() => {
+        const edge = arcEdgeFor(props.state);
+        if (edge !== null)
+            lastArcEdgeRef.current = edge;
+    }, [props.state]);
+    const arcAlpha = useRef(new Animated.Value(directional ? 1 : 0)).current;
+    useEffect(() => {
+        Animated.timing(arcAlpha, {
+            toValue: directional ? 1 : 0,
+            duration: UseSmileIDMotion.stateTransition,
+            easing: Easing.inOut(Easing.ease),
+            useNativeDriver: true,
+        }).start();
+    }, [directional, arcAlpha]);
+    if (props.containerWidth <= 0 || props.containerHeight <= 0) {
+        return null;
+    }
+    // Key the clip id by edge: react-native-svg on Android never
+    // re-resolves an existing ClipPath's contents, so reusing one id
+    // would leave the first-rendered clip band stuck on its edge.
+    const arcClipId = `si_face_overlay_arc_clip_${arcEdge ?? "none"}`;
+    const arcClipRect = arcEdge
+        ? computeArcClipRect(arcEdge, { ovalWidth, ovalHeight, ovalLeft, ovalTop }, props.containerWidth, props.containerHeight)
+        : null;
+    const progressPercent = Math.round(progress * 100);
+    return (_jsxs(View, { testID: props.testID, style: StyleSheet.absoluteFill, pointerEvents: "none", children: [_jsx(ScrimWithOvalCutout, { containerWidth: props.containerWidth, containerHeight: props.containerHeight, ovalCx: ovalCx, ovalCy: ovalCy, ovalRx: ovalRx, ovalRy: ovalRy, color: overlayColor }), _jsxs(Svg, { width: "100%", height: "100%", viewBox: `0 0 ${props.containerWidth} ${props.containerHeight}`, preserveAspectRatio: "none", style: StyleSheet.absoluteFill, children: [_jsx(Defs, { children: arcClipRect ? (_jsx(ClipPath, { id: arcClipId, children: _jsx(Rect, { x: arcClipRect.x, y: arcClipRect.y, width: arcClipRect.width, height: arcClipRect.height }) })) : null }), progress > 0 && !directional ? (_jsx(Ellipse, { cx: ovalCx, cy: ovalCy, rx: ovalRx, ry: ovalRy, stroke: trackColor, strokeWidth: STROKE_WIDTH, fill: "none" })) : (_jsx(AnimatedEllipse, { cx: ovalCx, cy: ovalCy, rx: ovalRx, ry: ovalRy, stroke: borderColor, strokeWidth: STROKE_WIDTH, fill: "none", opacity: borderOpacity })), arcClipRect ? (_jsx(AnimatedEllipse, { cx: ovalCx, cy: ovalCy, rx: ovalRx, ry: ovalRy, stroke: directionalColor, strokeWidth: STROKE_WIDTH, fill: "none", clipPath: `url(#${arcClipId})`, opacity: arcAlpha, testID: "si_face_overlay_directional_arc" })) : null] }), progress > 0 && !directional ? (_jsx(View, { style: StyleSheet.absoluteFill, pointerEvents: "none", children: _jsx(Animated.View, { style: {
+                        position: "absolute",
+                        left: 0,
+                        right: 0,
+                        bottom: 0,
+                        overflow: "hidden",
+                        height: animatedProgress.interpolate({
+                            inputRange: [0, 1],
+                            outputRange: [
+                                props.containerHeight - (ovalTop + ovalHeight + STROKE_WIDTH),
+                                props.containerHeight - (ovalTop - STROKE_WIDTH),
+                            ],
+                        }),
+                    }, children: _jsx(Svg, { width: props.containerWidth, height: props.containerHeight, viewBox: `0 0 ${props.containerWidth} ${props.containerHeight}`, preserveAspectRatio: "none", style: [
+                            styles.fillSvg,
+                            {
+                                width: props.containerWidth,
+                                height: props.containerHeight,
+                            },
+                        ], children: _jsx(Ellipse, { cx: ovalCx, cy: ovalCy, rx: ovalRx, ry: ovalRy, stroke: fillColor, strokeWidth: STROKE_WIDTH, fill: "none" }) }) }) })) : null, progress > 0 ? (_jsx(View, { accessible: true, accessibilityLabel: loc.siAccessibilityCaptureProgress, accessibilityValue: { text: `${progressPercent}%` }, style: StyleSheet.absoluteFill, testID: "si_face_overlay_progress_semantics" })) : null] }));
+}
+/**
+ * Dimmed scrim with a transparent elliptical cutout, drawn as one
+ * even-odd path (outer rect winding + inner ellipse winding). Memoised:
+ * geometry and colour only change on layout/theme changes, so per-frame
+ * overlay updates never touch this native view.
+ */
+const ScrimWithOvalCutout = memo(function ScrimWithOvalCutout(props) {
+    const { containerWidth, containerHeight, ovalCx, ovalCy, ovalRx, ovalRy } = props;
+    const path = `M0 0H${containerWidth}V${containerHeight}H0Z ` +
+        `M${ovalCx - ovalRx} ${ovalCy}` +
+        `a${ovalRx} ${ovalRy} 0 1 0 ${2 * ovalRx} 0` +
+        `a${ovalRx} ${ovalRy} 0 1 0 ${-2 * ovalRx} 0Z`;
+    return (_jsx(Svg, { width: "100%", height: "100%", viewBox: `0 0 ${containerWidth} ${containerHeight}`, preserveAspectRatio: "none", style: StyleSheet.absoluteFill, children: _jsx(Path, { d: path, fill: props.color, fillRule: "evenodd" }) }));
+});
+/**
+ * Clip band spanning `directionalArcEdgeFraction` of the oval extent
+ * from the crowded edge, stroke-padded so the arc isn't shaved off.
+ */
+function computeArcClipRect(edge, oval, containerWidth, containerHeight) {
+    const { ovalWidth, ovalHeight, ovalLeft, ovalTop } = oval;
+    const ovalRight = ovalLeft + ovalWidth;
+    const ovalBottom = ovalTop + ovalHeight;
+    const verticalBand = ovalHeight * FaceOvalDefaults.directionalArcEdgeFraction;
+    const horizontalBand = ovalWidth * FaceOvalDefaults.directionalArcEdgeFraction;
+    switch (edge) {
+        case "top":
+            return {
+                x: 0,
+                y: ovalTop - STROKE_WIDTH,
+                width: containerWidth,
+                height: verticalBand + STROKE_WIDTH,
+            };
+        case "bottom":
+            return {
+                x: 0,
+                y: ovalBottom - verticalBand,
+                width: containerWidth,
+                height: verticalBand + STROKE_WIDTH,
+            };
+        case "left":
+            return {
+                x: ovalLeft - STROKE_WIDTH,
+                y: 0,
+                width: horizontalBand + STROKE_WIDTH,
+                height: containerHeight,
+            };
+        case "right":
+            return {
+                x: ovalRight - horizontalBand,
+                y: 0,
+                width: horizontalBand + STROKE_WIDTH,
+                height: containerHeight,
+            };
+    }
+}
+const styles = StyleSheet.create({
+    // Bottom-anchored so the ring stays aligned as the reveal window grows.
+    fillSvg: { position: "absolute", left: 0, bottom: 0 },
+});
+function clamp01(value) {
+    if (value < 0)
+        return 0;
+    if (value > 1)
+        return 1;
+    return value;
+}
+//# sourceMappingURL=use_smile_id_face_overlay.js.map

package/dist/presentation/components/use_smile_id_face_overlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use_smile_id_face_overlay.js","sourceRoot":"","sources":["../../../src/presentation/components/use_smile_id_face_overlay.tsx"],"names":[],"mappings":"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"}

package/dist/presentation/components/use_smile_id_face_silhouette_overlay.d.ts

@@ -0,0 +1,15 @@
+import type { UseSmileIDTheme } from "../theme/theme";
+export type UseSmileIDFaceSilhouetteOverlayProps = {
+    readonly visible: boolean;
+    readonly theme?: UseSmileIDTheme;
+};
+/**
+ * Silhouette guide rendered inside the face oval during the
+ * `INSTRUCTION` state — gives the user a visual hint of where to
+ * place their face before the analyzer kicks in.
+ *
+ * **STUB.** Silhouette SVG / vector pending; current implementation
+ * is an empty view.
+ */
+export declare function UseSmileIDFaceSilhouetteOverlay(props: UseSmileIDFaceSilhouetteOverlayProps): import("react").JSX.Element | null;
+//# sourceMappingURL=use_smile_id_face_silhouette_overlay.d.ts.map

package/dist/presentation/components/use_smile_id_face_silhouette_overlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use_smile_id_face_silhouette_overlay.d.ts","sourceRoot":"","sources":["../../../src/presentation/components/use_smile_id_face_silhouette_overlay.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAGtD,MAAM,MAAM,oCAAoC,GAAG;IACjD,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,KAAK,CAAC,EAAE,eAAe,CAAC;CAClC,CAAC;AAEF;;;;;;;GAOG;AACH,wBAAgB,+BAA+B,CAC7C,KAAK,EAAE,oCAAoC,sCAQ5C"}

package/dist/presentation/components/use_smile_id_face_silhouette_overlay.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from "react-native";
+import { useUseSmileIDTheme } from "../theme/theme_context";
+/**
+ * Silhouette guide rendered inside the face oval during the
+ * `INSTRUCTION` state — gives the user a visual hint of where to
+ * place their face before the analyzer kicks in.
+ *
+ * **STUB.** Silhouette SVG / vector pending; current implementation
+ * is an empty view.
+ */
+export function UseSmileIDFaceSilhouetteOverlay(props) {
+    const themeFromContext = useUseSmileIDTheme();
+    const theme = props.theme ?? themeFromContext;
+    if (!props.visible)
+        return null;
+    return (_jsx(View, { style: { opacity: 0.3, backgroundColor: theme.colors.stroke } }));
+}
+//# sourceMappingURL=use_smile_id_face_silhouette_overlay.js.map

package/dist/presentation/components/use_smile_id_face_silhouette_overlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use_smile_id_face_silhouette_overlay.js","sourceRoot":"","sources":["../../../src/presentation/components/use_smile_id_face_silhouette_overlay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAO5D;;;;;;;GAOG;AACH,MAAM,UAAU,+BAA+B,CAC7C,KAA2C;IAE3C,MAAM,gBAAgB,GAAG,kBAAkB,EAAE,CAAC;IAC9C,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,gBAAgB,CAAC;IAC9C,IAAI,CAAC,KAAK,CAAC,OAAO;QAAE,OAAO,IAAI,CAAC;IAChC,OAAO,CACL,KAAC,IAAI,IAAC,KAAK,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,GAAI,CACxE,CAAC;AACJ,CAAC"}

package/dist/presentation/components/use_smile_id_failed_content.d.ts

@@ -0,0 +1,19 @@
+import type { UseSmileIDTheme } from "../theme/theme";
+export type UseSmileIDFailedContentProps = {
+    readonly title?: string;
+    readonly errorMessage?: string;
+    readonly retryLabel?: string;
+    readonly exitLabel?: string;
+    readonly onRetry?: () => void;
+    readonly onExit?: () => void;
+    readonly testID?: string;
+    readonly theme?: UseSmileIDTheme;
+};
+/**
+ * Failure-state body of the processing screen's bottom card —
+ * title, error message, and the Retry / Exit buttons. The warning
+ * ✕ indicator is rendered separately, centered inside the face
+ * oval by the screen itself, so it doesn't appear twice.
+ */
+export declare function UseSmileIDFailedContent(props: UseSmileIDFailedContentProps): import("react").JSX.Element;
+//# sourceMappingURL=use_smile_id_failed_content.d.ts.map

package/dist/presentation/components/use_smile_id_failed_content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use_smile_id_failed_content.d.ts","sourceRoot":"","sources":["../../../src/presentation/components/use_smile_id_failed_content.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAKtD,MAAM,MAAM,4BAA4B,GAAG;IACzC,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAC;IAC/B,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,KAAK,CAAC,EAAE,eAAe,CAAC;CAClC,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,4BAA4B,+BA2D1E"}

package/dist/presentation/components/use_smile_id_failed_content.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { StyleSheet, Text, View } from "react-native";
+import { useUseSmileIDTheme } from "../theme/theme_context";
+import { UseSmileIDButton } from "./use_smile_id_button";
+import { useUseSmileIDLocalizations } from "../../l10n/use_smile_id_localizations_provider";
+/**
+ * Failure-state body of the processing screen's bottom card —
+ * title, error message, and the Retry / Exit buttons. The warning
+ * ✕ indicator is rendered separately, centered inside the face
+ * oval by the screen itself, so it doesn't appear twice.
+ */
+export function UseSmileIDFailedContent(props) {
+    const themeFromContext = useUseSmileIDTheme();
+    const theme = props.theme ?? themeFromContext;
+    const loc = useUseSmileIDLocalizations();
+    const title = props.title ?? loc.siProcessingFailedTitle;
+    const message = props.errorMessage ?? loc.siProcessingFailedMessage;
+    const retryLabel = props.retryLabel ?? loc.siProcessingRetry;
+    const exitLabel = props.exitLabel ?? loc.siProcessingExit;
+    return (_jsxs(View, { testID: props.testID, style: [styles.container, { paddingVertical: theme.spacing.small }], children: [_jsx(Text, { style: {
+                    ...theme.typography.cardTitle,
+                    color: theme.colors.primary,
+                    textAlign: "center",
+                }, children: title }), _jsx(Text, { style: {
+                    ...theme.typography.body,
+                    color: theme.colors.cardText,
+                    marginTop: theme.spacing.small,
+                    textAlign: "center",
+                }, children: message }), _jsxs(View, { style: [
+                    styles.buttons,
+                    { marginTop: theme.spacing.large, gap: theme.spacing.small },
+                ], children: [props.onRetry ? (_jsx(UseSmileIDButton, { label: retryLabel, onClick: props.onRetry, variant: "primary", theme: theme, testID: "si_processing_retry_button" })) : null, props.onExit ? (_jsx(UseSmileIDButton, { label: exitLabel, onClick: props.onExit, variant: "secondary", theme: theme, testID: "si_processing_exit_button" })) : null] })] }));
+}
+const styles = StyleSheet.create({
+    // Without `alignSelf: "stretch"` the centering card hugs the text
+    // and the buttons collapse to their label widths.
+    container: {
+        alignItems: "center",
+        justifyContent: "center",
+        alignSelf: "stretch",
+    },
+    buttons: { alignSelf: "stretch" },
+});
+//# sourceMappingURL=use_smile_id_failed_content.js.map

package/dist/presentation/components/use_smile_id_failed_content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use_smile_id_failed_content.js","sourceRoot":"","sources":["../../../src/presentation/components/use_smile_id_failed_content.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,0BAA0B,EAAE,MAAM,gDAAgD,CAAC;AAa5F;;;;;GAKG;AACH,MAAM,UAAU,uBAAuB,CAAC,KAAmC;IACzE,MAAM,gBAAgB,GAAG,kBAAkB,EAAE,CAAC;IAC9C,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,gBAAgB,CAAC;IAC9C,MAAM,GAAG,GAAG,0BAA0B,EAAE,CAAC;IACzC,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,GAAG,CAAC,uBAAuB,CAAC;IACzD,MAAM,OAAO,GAAG,KAAK,CAAC,YAAY,IAAI,GAAG,CAAC,yBAAyB,CAAC;IACpE,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,IAAI,GAAG,CAAC,iBAAiB,CAAC;IAC7D,MAAM,SAAS,GAAG,KAAK,CAAC,SAAS,IAAI,GAAG,CAAC,gBAAgB,CAAC;IAC1D,OAAO,CACL,MAAC,IAAI,IACH,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,KAAK,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,EAAE,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC,aAEnE,KAAC,IAAI,IACH,KAAK,EAAE;oBACL,GAAG,KAAK,CAAC,UAAU,CAAC,SAAS;oBAC7B,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO;oBAC3B,SAAS,EAAE,QAAQ;iBACpB,YAEA,KAAK,GACD,EACP,KAAC,IAAI,IACH,KAAK,EAAE;oBACL,GAAG,KAAK,CAAC,UAAU,CAAC,IAAI;oBACxB,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,QAAQ;oBAC5B,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;oBAC9B,SAAS,EAAE,QAAQ;iBACpB,YAEA,OAAO,GACH,EACP,MAAC,IAAI,IACH,KAAK,EAAE;oBACL,MAAM,CAAC,OAAO;oBACd,EAAE,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,GAAG,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE;iBAC7D,aAEA,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CACf,KAAC,gBAAgB,IACf,KAAK,EAAE,UAAU,EACjB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,OAAO,EAAC,SAAS,EACjB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAC,4BAA4B,GACnC,CACH,CAAC,CAAC,CAAC,IAAI,EACP,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CACd,KAAC,gBAAgB,IACf,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,KAAK,CAAC,MAAM,EACrB,OAAO,EAAC,WAAW,EACnB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAC,2BAA2B,GAClC,CACH,CAAC,CAAC,CAAC,IAAI,IACH,IACF,CACR,CAAC;AACJ,CAAC;AAED,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,kEAAkE;IAClE,kDAAkD;IAClD,SAAS,EAAE;QACT,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;QACxB,SAAS,EAAE,SAAS;KACrB;IACD,OAAO,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE;CAClC,CAAC,CAAC"}

package/dist/presentation/components/use_smile_id_guideline_thumbnail.d.ts

@@ -0,0 +1,12 @@
+import type { UseSmileIDTheme } from "../theme/theme";
+import type { InstructionGuideline } from "../flow/model/instruction_guideline";
+export type UseSmileIDGuidelineThumbnailProps = {
+    readonly guideline: InstructionGuideline;
+    readonly theme?: UseSmileIDTheme;
+};
+/**
+ * A capture-guideline tile: a bordered card with the illustration and a status
+ * pill, a check/close badge overhanging the top-end corner, and a caption.
+ */
+export declare function UseSmileIDGuidelineThumbnail({ guideline, theme: themeProp, }: UseSmileIDGuidelineThumbnailProps): import("react").JSX.Element;
+//# sourceMappingURL=use_smile_id_guideline_thumbnail.d.ts.map

package/dist/presentation/components/use_smile_id_guideline_thumbnail.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use_smile_id_guideline_thumbnail.d.ts","sourceRoot":"","sources":["../../../src/presentation/components/use_smile_id_guideline_thumbnail.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAGtD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAehF,MAAM,MAAM,iCAAiC,GAAG;IAC9C,QAAQ,CAAC,SAAS,EAAE,oBAAoB,CAAC;IACzC,QAAQ,CAAC,KAAK,CAAC,EAAE,eAAe,CAAC;CAClC,CAAC;AAEF;;;GAGG;AACH,wBAAgB,4BAA4B,CAAC,EAC3C,SAAS,EACT,KAAK,EAAE,SAAS,GACjB,EAAE,iCAAiC,+BA6DnC"}

package/dist/presentation/components/use_smile_id_guideline_thumbnail.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { StyleSheet, Text, View } from "react-native";
+import { useUseSmileIDTheme } from "../theme/theme_context";
+import { useUseSmileIDLocalizations } from "../../l10n/use_smile_id_localizations_provider";
+import { SiFilledCheckCircle, SiFilledCloseCircle } from "./icons";
+const CARD_WIDTH = 41;
+const CARD_HEIGHT = 73;
+const CARD_RADIUS = 4;
+const IMAGE_WIDTH = 31;
+const IMAGE_HEIGHT = 43;
+const PILL_WIDTH = 20;
+const PILL_HEIGHT = 4;
+const BADGE_SIZE = 16;
+const BADGE_ICON_SIZE = 14;
+// The badge overhangs the top-end corner of the card.
+const BADGE_OVERHANG = -10;
+/**
+ * A capture-guideline tile: a bordered card with the illustration and a status
+ * pill, a check/close badge overhanging the top-end corner, and a caption.
+ */
+export function UseSmileIDGuidelineThumbnail({ guideline, theme: themeProp, }) {
+    const themeFromContext = useUseSmileIDTheme();
+    const theme = themeProp ?? themeFromContext;
+    const localizations = useUseSmileIDLocalizations();
+    const allowed = guideline.status === "allowed";
+    const Illustration = guideline.image;
+    const Badge = allowed ? SiFilledCheckCircle : SiFilledCloseCircle;
+    const badgeLabel = allowed
+        ? localizations.siCdGuidelineAllowed
+        : localizations.siCdGuidelineBlocked;
+    return (_jsxs(View, { style: styles.container, children: [_jsxs(View, { children: [_jsxs(View, { style: [
+                            styles.card,
+                            {
+                                backgroundColor: theme.colors.cardBackground,
+                                borderColor: theme.colors.stroke,
+                            },
+                        ], children: [_jsx(Illustration, { width: IMAGE_WIDTH, height: IMAGE_HEIGHT }), _jsx(View, { style: [
+                                    styles.pill,
+                                    {
+                                        backgroundColor: allowed
+                                            ? theme.colors.primary
+                                            : theme.colors.secondary,
+                                    },
+                                ] })] }), _jsx(View, { style: [
+                            styles.badge,
+                            { backgroundColor: theme.colors.cardBackground },
+                        ], accessibilityRole: "image", accessibilityLabel: badgeLabel, children: _jsx(Badge, { size: BADGE_ICON_SIZE }) })] }), _jsx(Text, { style: {
+                    ...theme.typography.cardCaption,
+                    fontSize: 10,
+                    lineHeight: 10,
+                    color: theme.colors.primary,
+                    textAlign: "center",
+                    marginTop: theme.spacing.extraSmall,
+                }, children: guideline.label(localizations) })] }));
+}
+const styles = StyleSheet.create({
+    container: { alignItems: "center" },
+    card: {
+        width: CARD_WIDTH,
+        height: CARD_HEIGHT,
+        borderRadius: CARD_RADIUS,
+        borderWidth: 1,
+        paddingHorizontal: 4,
+        paddingVertical: 6,
+        alignItems: "center",
+        justifyContent: "center",
+        rowGap: 4,
+        // Soft shadow (black @ ~10%).
+        shadowColor: "#000000",
+        shadowOpacity: 0.1,
+        shadowRadius: 2,
+        shadowOffset: { width: 0, height: 1 },
+        elevation: 1,
+    },
+    pill: {
+        width: PILL_WIDTH,
+        height: PILL_HEIGHT,
+        borderRadius: PILL_HEIGHT / 2,
+    },
+    badge: {
+        position: "absolute",
+        top: BADGE_OVERHANG,
+        end: BADGE_OVERHANG,
+        width: BADGE_SIZE,
+        height: BADGE_SIZE,
+        borderRadius: BADGE_SIZE / 2,
+        alignItems: "center",
+        justifyContent: "center",
+        shadowColor: "#000000",
+        shadowOpacity: 0.1,
+        shadowRadius: 2,
+        shadowOffset: { width: 0, height: 1 },
+        elevation: 1,
+    },
+});
+//# sourceMappingURL=use_smile_id_guideline_thumbnail.js.map

package/dist/presentation/components/use_smile_id_guideline_thumbnail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use_smile_id_guideline_thumbnail.js","sourceRoot":"","sources":["../../../src/presentation/components/use_smile_id_guideline_thumbnail.tsx"],"names":[],"mappings":"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"}

package/dist/presentation/components/use_smile_id_instruction_card.d.ts

@@ -0,0 +1,31 @@
+import { type AnimationObject } from "lottie-react-native";
+import type { UseSmileIDTheme } from "../theme/theme";
+export type UseSmileIDInstructionCardProps = {
+    /**
+     * Lottie animation source — typically a `require(...)` of a JSON
+     * file under `presentation/assets/`, which Metro inlines as an
+     * `AnimationObject`. Loops forever at default speed (1.0x).
+     */
+    readonly source: AnimationObject | string | {
+        readonly uri: string;
+    };
+    /**
+     * Hide the warm card background (used for the bottom row in the
+     * instructions screen's 2x2 grid, where the animations carry their
+     * own backgrounds baked into the Lottie file).
+     */
+    readonly showBackground?: boolean;
+    readonly testID?: string;
+    readonly theme?: UseSmileIDTheme;
+};
+/**
+ * Square instruction card hosting a looping Lottie animation. Used
+ * in the instructions screen's 2x2 grid.
+ *
+ * Background: defaults to the warm `instructionCardBackground` tint
+ * (light beige in light mode, dark grey in dark mode). The bottom
+ * row of the grid passes `showBackground={false}` to render plain
+ * animations whose own backgrounds carry through.
+ */
+export declare function UseSmileIDInstructionCard(props: UseSmileIDInstructionCardProps): import("react").JSX.Element;
+//# sourceMappingURL=use_smile_id_instruction_card.d.ts.map

package/dist/presentation/components/use_smile_id_instruction_card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use_smile_id_instruction_card.d.ts","sourceRoot":"","sources":["../../../src/presentation/components/use_smile_id_instruction_card.tsx"],"names":[],"mappings":"AACA,OAAmB,EAAE,KAAK,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACvE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAGtD,MAAM,MAAM,8BAA8B,GAAG;IAC3C;;;;OAIG;IACH,QAAQ,CAAC,MAAM,EAAE,eAAe,GAAG,MAAM,GAAG;QAAE,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC;IACrE;;;;OAIG;IACH,QAAQ,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAClC,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,KAAK,CAAC,EAAE,eAAe,CAAC;CAClC,CAAC;AAKF;;;;;;;;GAQG;AACH,wBAAgB,yBAAyB,CACvC,KAAK,EAAE,8BAA8B,+BA2BtC"}

package/dist/presentation/components/use_smile_id_instruction_card.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StyleSheet, View } from "react-native";
+import LottieView from "lottie-react-native";
+import { useUseSmileIDTheme } from "../theme/theme_context";
+const CARD_SIZE = 150;
+const CARD_RADIUS = 8;
+/**
+ * Square instruction card hosting a looping Lottie animation. Used
+ * in the instructions screen's 2x2 grid.
+ *
+ * Background: defaults to the warm `instructionCardBackground` tint
+ * (light beige in light mode, dark grey in dark mode). The bottom
+ * row of the grid passes `showBackground={false}` to render plain
+ * animations whose own backgrounds carry through.
+ */
+export function UseSmileIDInstructionCard(props) {
+    const themeFromContext = useUseSmileIDTheme();
+    const theme = props.theme ?? themeFromContext;
+    const showBackground = props.showBackground ?? true;
+    return (_jsx(View, { testID: props.testID, style: [
+            styles.card,
+            {
+                borderRadius: CARD_RADIUS,
+                backgroundColor: showBackground
+                    ? theme.colors.instructionCardBackground
+                    : "transparent",
+            },
+        ], children: _jsx(LottieView, { source: props.source, autoPlay: true, loop: true, style: styles.animation }) }));
+}
+const styles = StyleSheet.create({
+    card: {
+        width: CARD_SIZE,
+        height: CARD_SIZE,
+        overflow: "hidden",
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    animation: {
+        width: "100%",
+        height: "100%",
+    },
+});
+//# sourceMappingURL=use_smile_id_instruction_card.js.map

package/dist/presentation/components/use_smile_id_instruction_card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use_smile_id_instruction_card.js","sourceRoot":"","sources":["../../../src/presentation/components/use_smile_id_instruction_card.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAChD,OAAO,UAAoC,MAAM,qBAAqB,CAAC;AAEvE,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAmB5D,MAAM,SAAS,GAAG,GAAG,CAAC;AACtB,MAAM,WAAW,GAAG,CAAC,CAAC;AAEtB;;;;;;;;GAQG;AACH,MAAM,UAAU,yBAAyB,CACvC,KAAqC;IAErC,MAAM,gBAAgB,GAAG,kBAAkB,EAAE,CAAC;IAC9C,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,gBAAgB,CAAC;IAC9C,MAAM,cAAc,GAAG,KAAK,CAAC,cAAc,IAAI,IAAI,CAAC;IACpD,OAAO,CACL,KAAC,IAAI,IACH,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,KAAK,EAAE;YACL,MAAM,CAAC,IAAI;YACX;gBACE,YAAY,EAAE,WAAW;gBACzB,eAAe,EAAE,cAAc;oBAC7B,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,yBAAyB;oBACxC,CAAC,CAAC,aAAa;aAClB;SACF,YAED,KAAC,UAAU,IACT,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,QAAQ,QACR,IAAI,QACJ,KAAK,EAAE,MAAM,CAAC,SAAS,GAEvB,GACG,CACR,CAAC;AACJ,CAAC;AAED,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,IAAI,EAAE;QACJ,KAAK,EAAE,SAAS;QAChB,MAAM,EAAE,SAAS;QACjB,QAAQ,EAAE,QAAQ;QAClB,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;KACzB;IACD,SAAS,EAAE;QACT,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;KACf;CACF,CAAC,CAAC"}

package/dist/presentation/components/use_smile_id_instructions_hero.d.ts

@@ -0,0 +1,26 @@
+import type { UseSmileIDTheme } from "../theme/theme";
+import type { HeroAnimationSource } from "../flow/model/instructions_defaults";
+export declare const OVAL_PROGRESS_DURATION_MS = 5500;
+export type UseSmileIDInstructionsHeroProps = {
+    /** Lottie animation rendered inside the (optional) face-oval ring. */
+    readonly source: HeroAnimationSource;
+    /** Draw the face-oval ring around the animation. */
+    readonly showOval?: boolean;
+    /**
+     * Animate a green fill rising bottom-to-top in sync with the animation loop.
+     * When `false`, only the static gray track is drawn and no per-frame work is
+     * scheduled (Enhanced Smart Selfie has no single rising-progress gesture).
+     */
+    readonly showOvalProgress?: boolean;
+    readonly theme?: UseSmileIDTheme;
+};
+/** Loop duration from the Lottie composition (`(op - ip) / fr`), else default. */
+export declare function loopDurationMs(source: HeroAnimationSource): number;
+/**
+ * Hero animation with an optional face-oval ring. The hero plays at its own
+ * natural composition pace while the ring's green fill rises on a separate,
+ * fixed-duration loop, so the two are decoupled. Honors reduced motion (holds
+ * the final frame, ring filled).
+ */
+export declare function UseSmileIDInstructionsHero({ source, showOval, showOvalProgress, theme: themeProp, }: UseSmileIDInstructionsHeroProps): import("react").JSX.Element;
+//# sourceMappingURL=use_smile_id_instructions_hero.d.ts.map

package/dist/presentation/components/use_smile_id_instructions_hero.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use_smile_id_instructions_hero.d.ts","sourceRoot":"","sources":["../../../src/presentation/components/use_smile_id_instructions_hero.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEtD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAiB/E,eAAO,MAAM,yBAAyB,OAAO,CAAC;AAE9C,MAAM,MAAM,+BAA+B,GAAG;IAC5C,sEAAsE;IACtE,QAAQ,CAAC,MAAM,EAAE,mBAAmB,CAAC;IACrC,oDAAoD;IACpD,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B;;;;OAIG;IACH,QAAQ,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IACpC,QAAQ,CAAC,KAAK,CAAC,EAAE,eAAe,CAAC;CAClC,CAAC;AAEF,kFAAkF;AAClF,wBAAgB,cAAc,CAAC,MAAM,EAAE,mBAAmB,GAAG,MAAM,CAYlE;AAED;;;;;GAKG;AACH,wBAAgB,0BAA0B,CAAC,EACzC,MAAM,EACN,QAAgB,EAChB,gBAAuB,EACvB,KAAK,EAAE,SAAS,GACjB,EAAE,+BAA+B,+BA0KjC"}