@smileid/usesmileid 12.0.2 → 12.1.0

package/dist/presentation/components/use_smile_id_expandable_icon.js

@@ -1,55 +1 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useRef } from "react";
-import { Animated, Easing, Pressable, StyleSheet } from "react-native";
-import { useUseSmileIDTheme } from "../theme/theme_context";
-import { SiExpandMore } from "./icons";
-const SIZE = 20;
-const CHEVRON_WIDTH = 12;
-const ROTATION_DURATION_MS = 200;
-/**
- * Filled circular disc carrying a downward chevron. Used in the
- * consent screen's "Learn more" row — partners tap the disc to
- * toggle the explainer panel. The chevron rotates 180° (animated
- * over 200 ms with ease-in-out) when `expanded` flips, so the same
- * artwork serves both states with a smooth transition.
- */
-export function UseSmileIDExpandableIcon(props) {
-    const themeFromContext = useUseSmileIDTheme();
-    const theme = props.theme ?? themeFromContext;
-    const accessibilityLabel = props.expanded ? "Collapse" : "Expand";
-    const rotationProgress = useRef(new Animated.Value(props.expanded ? 1 : 0)).current;
-    useEffect(() => {
-        Animated.timing(rotationProgress, {
-            toValue: props.expanded ? 1 : 0,
-            duration: ROTATION_DURATION_MS,
-            easing: Easing.inOut(Easing.ease),
-            useNativeDriver: true,
-        }).start();
-    }, [props.expanded, rotationProgress]);
-    const rotate = rotationProgress.interpolate({
-        inputRange: [0, 1],
-        outputRange: ["0deg", "180deg"],
-    });
-    const inner = (_jsx(Animated.View, { style: [
-            styles.disc,
-            {
-                backgroundColor: theme.colors.offBlack,
-                transform: [{ rotate }],
-            },
-        ], children: _jsx(SiExpandMore, { size: CHEVRON_WIDTH, color: theme.colors.offWhite }) }));
-    if (props.onChange) {
-        const onChange = props.onChange;
-        return (_jsx(Pressable, { testID: props.testID, accessibilityRole: "button", accessibilityLabel: accessibilityLabel, accessibilityState: { expanded: props.expanded }, onPress: () => onChange(!props.expanded), hitSlop: 8, children: inner }));
-    }
-    return (_jsx(Animated.View, { testID: props.testID, accessibilityRole: "image", accessibilityLabel: accessibilityLabel, children: inner }));
-}
-const styles = StyleSheet.create({
-    disc: {
-        width: SIZE,
-        height: SIZE,
-        borderRadius: SIZE / 2,
-        alignItems: "center",
-        justifyContent: "center",
-    },
-});
-//# sourceMappingURL=use_smile_id_expandable_icon.js.map
+"use strict";import{jsx as i}from"react/jsx-runtime";import{useEffect as f,useRef as x}from"react";import{Animated as n,Easing as r,Pressable as h,StyleSheet as b}from"react-native";import{useUseSmileIDTheme as g}from"../theme/theme_context";import{useUseSmileIDLocalizations as I}from"../../l10n/use_smile_id_localizations_provider";import{SiExpandMore as y}from"./icons";const a=20,C=12,D=200;export function UseSmileIDExpandableIcon(e){const d=g(),t=I(),o=e.theme??d,c={text:e.expanded?t.siCdExpanded:t.siCdCollapsed},s=x(new n.Value(e.expanded?1:0)).current;f(()=>{n.timing(s,{toValue:e.expanded?1:0,duration:D,easing:r.inOut(r.ease),useNativeDriver:!0}).start()},[e.expanded,s]);const m=s.interpolate({inputRange:[0,1],outputRange:["0deg","180deg"]}),l=i(n.View,{style:[S.disc,{backgroundColor:o.colors.offBlack,transform:[{rotate:m}]}],children:i(y,{size:C,color:o.colors.offWhite})});if(e.onChange){const u=e.onChange;return i(h,{testID:e.testID,accessibilityRole:"button",accessibilityLabel:t.siCdExpand,accessibilityValue:c,accessibilityState:{expanded:e.expanded},onPress:()=>u(!e.expanded),hitSlop:8,children:l})}return i(n.View,{testID:e.testID,accessibilityRole:"image",accessibilityLabel:t.siCdExpand,accessibilityValue:c,children:l})}const S=b.create({disc:{width:a,height:a,borderRadius:a/2,alignItems:"center",justifyContent:"center"}});

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

@@ -23,4 +23,3 @@ export type UseSmileIDFaceOvalImageProps = {
  * flash where the SVG renders at zero-size).
  */
 export declare function UseSmileIDFaceOvalImage(props: UseSmileIDFaceOvalImageProps): import("react").JSX.Element | null;
-//# sourceMappingURL=use_smile_id_face_oval_image.d.ts.map

package/dist/presentation/components/use_smile_id_face_oval_image.js

@@ -1,41 +1 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Svg, { ClipPath, Defs, Ellipse, Image as SvgImage, } from "react-native-svg";
-import { StyleSheet, View } from "react-native";
-import { computeFaceOvalGeometry } from "./face_oval_defaults";
-/**
- * Renders the captured selfie at the canonical face-oval rect,
- * clipped to an ellipse.
- *
- * Implementation: draws an SVG `<Image>` element constrained to the
- * oval bounds and clipped through a `<ClipPath>` containing an
- * `<Ellipse>`. Going through `react-native-svg` (already a peer
- * dep) gives us a true ellipse on both iOS and Android — RN's
- * `borderRadius` can't express asymmetric corner radii, so a plain
- * `<Image>` with `borderRadius: ovalWidth/2` would render as a
- * pill on Android when the oval isn't a perfect circle (face-oval
- * default is roughly 1:1.26).
- *
- * Returns `null` until the canvas has measured (avoids a one-frame
- * flash where the SVG renders at zero-size).
- */
-export function UseSmileIDFaceOvalImage(props) {
-    if (props.containerWidth <= 0 || props.containerHeight <= 0)
-        return null;
-    if (props.uri.length === 0)
-        return null;
-    const { ovalWidth, ovalHeight, ovalLeft, ovalTop } = computeFaceOvalGeometry(props.containerWidth, props.containerHeight);
-    const clipId = "si_face_oval_image_clip";
-    return (_jsx(View, { pointerEvents: "none", style: [
-            styles.container,
-            {
-                width: ovalWidth,
-                height: ovalHeight,
-                left: ovalLeft,
-                top: ovalTop,
-            },
-        ], testID: props.testID, children: _jsxs(Svg, { width: "100%", height: "100%", viewBox: `0 0 ${ovalWidth} ${ovalHeight}`, children: [_jsx(Defs, { children: _jsx(ClipPath, { id: clipId, children: _jsx(Ellipse, { cx: ovalWidth / 2, cy: ovalHeight / 2, rx: ovalWidth / 2, ry: ovalHeight / 2 }) }) }), _jsx(SvgImage, { href: { uri: props.uri }, x: 0, y: 0, width: ovalWidth, height: ovalHeight, preserveAspectRatio: "xMidYMid slice", clipPath: `url(#${clipId})` })] }) }));
-}
-const styles = StyleSheet.create({
-    container: { position: "absolute" },
-});
-//# sourceMappingURL=use_smile_id_face_oval_image.js.map
+"use strict";import{jsx as n,jsxs as a}from"react/jsx-runtime";import c,{ClipPath as h,Defs as s,Ellipse as m,Image as d}from"react-native-svg";import{StyleSheet as g,View as f}from"react-native";import{computeFaceOvalGeometry as u}from"./face_oval_defaults";export function UseSmileIDFaceOvalImage(e){if(e.containerWidth<=0||e.containerHeight<=0||e.uri.length===0)return null;const{ovalWidth:t,ovalHeight:i,ovalLeft:l,ovalTop:o}=u(e.containerWidth,e.containerHeight),r="si_face_oval_image_clip";return n(f,{pointerEvents:"none",style:[v.container,{width:t,height:i,left:l,top:o}],testID:e.testID,children:a(c,{width:"100%",height:"100%",viewBox:`0 0 ${t} ${i}`,children:[n(s,{children:n(h,{id:r,children:n(m,{cx:t/2,cy:i/2,rx:t/2,ry:i/2})})}),n(d,{href:{uri:e.uri},x:0,y:0,width:t,height:i,preserveAspectRatio:"xMidYMid slice",clipPath:`url(#${r})`})]})})}const v=g.create({container:{position:"absolute"}});

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

@@ -20,4 +20,3 @@ export type UseSmileIDFaceOverlayProps = {
  * red arc on the crowded oval edge. See docs/Face-Oval-State-Flows.md.
  */
 export declare function UseSmileIDFaceOverlay(props: UseSmileIDFaceOverlayProps): import("react").JSX.Element | null;
-//# sourceMappingURL=use_smile_id_face_overlay.d.ts.map

package/dist/presentation/components/use_smile_id_face_overlay.js

@@ -1,194 +1 @@
-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
+"use strict";import{jsx as e,jsxs as L}from"react/jsx-runtime";import{memo as G,useEffect as _,useRef as E}from"react";import{Animated as c,Easing as D,StyleSheet as g,View as S}from"react-native";import V,{ClipPath as Z,Defs as K,Ellipse as I,Path as q,Rect as J}from"react-native-svg";import{useUseSmileIDTheme as Q}from"../theme/theme_context";import{UseSmileIDMotion as A}from"../theme/use_smile_id_motion";import{isDirectional as X,UseSmileIDOverlayState as $}from"../state/use_smile_id_overlay_state";import{useUseSmileIDLocalizations as Y}from"../../l10n/use_smile_id_localizations_provider";import{computeFaceOvalGeometry as p,FaceOvalDefaults as k}from"./face_oval_defaults";import{UseSmileIDOvalBorderPalette as tt}from"./use_smile_id_oval_border_palette";const o=k.strokeWidth,U=c.createAnimatedComponent(I);function T(t){switch(t){case $.MOVE_UP:return"top";case $.MOVE_DOWN:return"bottom";case $.MOVE_LEFT:return"left";case $.MOVE_RIGHT:return"right";default:return null}}export function UseSmileIDFaceOverlay(t){const u=Q(),n=t.theme??u,s=Y(),d=t.enableEnhancedLiveness??!1,{ovalWidth:r,ovalHeight:i,ovalLeft:a,ovalTop:l}=p(t.containerWidth,t.containerHeight),R=n.colors[tt.tokenFor(t.state,d)],m=n.colors.captureOverlayBackground,f=n.colors.ovalDefault,j=n.colors.ovalActive,N=n.colors.ovalDirectionalIndicator,h=nt(t.progress??0),y=X(t.state),x=a+r/2,w=l+i/2,b=r/2,C=i/2,W=E(new c.Value(1)).current;_(()=>{W.setValue(0),c.timing(W,{toValue:1,duration:A.stateTransition,easing:D.inOut(D.ease),useNativeDriver:!0}).start()},[R,W]);const H=E(new c.Value(h)).current;_(()=>{c.timing(H,{toValue:h,duration:A.progressFill,easing:D.linear,useNativeDriver:!1}).start()},[h,H]);const B=E(T(t.state)),O=T(t.state)??B.current;_(()=>{const P=T(t.state);P!==null&&(B.current=P)},[t.state]);const F=E(new c.Value(y?1:0)).current;if(_(()=>{c.timing(F,{toValue:y?1:0,duration:A.stateTransition,easing:D.inOut(D.ease),useNativeDriver:!0}).start()},[y,F]),t.containerWidth<=0||t.containerHeight<=0)return null;const M=`si_face_overlay_arc_clip_${O??"none"}`,v=O?it(O,{ovalWidth:r,ovalHeight:i,ovalLeft:a,ovalTop:l},t.containerWidth,t.containerHeight):null,z=Math.round(h*100);return L(S,{testID:t.testID,style:g.absoluteFill,pointerEvents:"none",children:[e(et,{containerWidth:t.containerWidth,containerHeight:t.containerHeight,ovalCx:x,ovalCy:w,ovalRx:b,ovalRy:C,color:m}),L(V,{width:"100%",height:"100%",viewBox:`0 0 ${t.containerWidth} ${t.containerHeight}`,preserveAspectRatio:"none",style:g.absoluteFill,children:[e(K,{children:v?e(Z,{id:M,children:e(J,{x:v.x,y:v.y,width:v.width,height:v.height})}):null}),h>0&&!y?e(I,{cx:x,cy:w,rx:b,ry:C,stroke:f,strokeWidth:o,fill:"none"}):e(U,{cx:x,cy:w,rx:b,ry:C,stroke:R,strokeWidth:o,fill:"none",opacity:W}),v?e(U,{cx:x,cy:w,rx:b,ry:C,stroke:N,strokeWidth:o,fill:"none",clipPath:`url(#${M})`,opacity:F,testID:"si_face_overlay_directional_arc"}):null]}),h>0&&!y?e(S,{style:g.absoluteFill,pointerEvents:"none",children:e(c.View,{style:{position:"absolute",left:0,right:0,bottom:0,overflow:"hidden",height:H.interpolate({inputRange:[0,1],outputRange:[t.containerHeight-(l+i+o),t.containerHeight-(l-o)]})},children:e(V,{width:t.containerWidth,height:t.containerHeight,viewBox:`0 0 ${t.containerWidth} ${t.containerHeight}`,preserveAspectRatio:"none",style:[ot.fillSvg,{width:t.containerWidth,height:t.containerHeight}],children:e(I,{cx:x,cy:w,rx:b,ry:C,stroke:j,strokeWidth:o,fill:"none"})})})}):null,h>0?e(S,{accessible:!0,accessibilityLabel:s.siAccessibilityCaptureProgress,accessibilityValue:{text:`${z}%`},style:g.absoluteFill,testID:"si_face_overlay_progress_semantics"}):null]})}const et=G(function(u){const{containerWidth:n,containerHeight:s,ovalCx:d,ovalCy:r,ovalRx:i,ovalRy:a}=u,l=`M0 0H${n}V${s}H0Z M${d-i} ${r}a${i} ${a} 0 1 0 ${2*i} 0a${i} ${a} 0 1 0 ${-2*i} 0Z`;return e(V,{width:"100%",height:"100%",viewBox:`0 0 ${n} ${s}`,preserveAspectRatio:"none",style:g.absoluteFill,children:e(q,{d:l,fill:u.color,fillRule:"evenodd"})})});function it(t,u,n,s){const{ovalWidth:d,ovalHeight:r,ovalLeft:i,ovalTop:a}=u,l=i+d,R=a+r,m=r*k.directionalArcEdgeFraction,f=d*k.directionalArcEdgeFraction;switch(t){case"top":return{x:0,y:a-o,width:n,height:m+o};case"bottom":return{x:0,y:R-m,width:n,height:m+o};case"left":return{x:i-o,y:0,width:f+o,height:s};case"right":return{x:l-f,y:0,width:f+o,height:s}}}const ot=g.create({fillSvg:{position:"absolute",left:0,bottom:0}});function nt(t){return t<0?0:t>1?1:t}

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

@@ -16,4 +16,3 @@ export type UseSmileIDFailedContentProps = {
  * 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.js

@@ -1,44 +1 @@
-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
+"use strict";import{jsx as s,jsxs as n}from"react/jsx-runtime";import{StyleSheet as h,Text as l,View as r}from"react-native";import{useUseSmileIDTheme as d}from"../theme/theme_context";import{UseSmileIDButton as o}from"./use_smile_id_button";import{useUseSmileIDLocalizations as u}from"../../l10n/use_smile_id_localizations_provider";export function UseSmileIDFailedContent(e){const c=d(),t=e.theme??c,i=u(),m=e.title??i.siProcessingFailedTitle,g=e.errorMessage??i.siProcessingFailedMessage,y=e.retryLabel??i.siProcessingRetry,x=e.exitLabel??i.siProcessingExit;return n(r,{testID:e.testID,style:[a.container,{paddingVertical:t.spacing.small}],children:[s(l,{style:{...t.typography.cardTitle,color:t.colors.primary,textAlign:"center"},children:m}),s(l,{style:{...t.typography.body,color:t.colors.cardText,marginTop:t.spacing.small,textAlign:"center"},children:g}),n(r,{style:[a.buttons,{marginTop:t.spacing.large,gap:t.spacing.small}],children:[e.onRetry?s(o,{label:y,onClick:e.onRetry,variant:"primary",theme:t,testID:"si_processing_retry_button"}):null,e.onExit?s(o,{label:x,onClick:e.onExit,variant:"secondary",theme:t,testID:"si_processing_exit_button"}):null]})]})}const a=h.create({container:{alignItems:"center",justifyContent:"center",alignSelf:"stretch"},buttons:{alignSelf:"stretch"}});

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

@@ -9,4 +9,3 @@ export type UseSmileIDGuidelineThumbnailProps = {
  * 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.js

@@ -1,179 +1 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-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;
-// Document card SVGs carry a transparent bleed around the visible card (3px
-// L/R, 2px top, 4px bottom); the tile offsets the SVG by it so the card fills
-// the framed box exactly.
-const DOC_CARD_RADIUS = 4;
-const DOC_BLEED_X = 3;
-const DOC_BLEED_TOP = 2;
-const DOC_BLEED_BOTTOM = 4;
-const DOC_BADGE_OVERHANG = -8;
-/**
- * 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();
-    // Measured card width — the card scales to its column, so the SVG size and
-    // bleed offset scale with it.
-    const [measuredCardWidth, setMeasuredCardWidth] = useState(0);
-    const allowed = guideline.status === "allowed";
-    const Illustration = guideline.image;
-    const Badge = allowed ? SiFilledCheckCircle : SiFilledCloseCircle;
-    const badgeLabel = allowed
-        ? localizations.siCdGuidelineAllowed
-        : localizations.siCdGuidelineBlocked;
-    const caption = guideline.label(localizations);
-    // Document tile: one of four equal columns (so all four fit one row); the
-    // self-contained card SVG fills the column, framed by a border + shadow with
-    // an overhanging badge (no pill).
-    if (guideline.card) {
-        const { width: figmaCardWidth, height: figmaCardHeight } = guideline.card;
-        const scale = measuredCardWidth > 0 ? measuredCardWidth / figmaCardWidth : 0;
-        return (_jsxs(View, { style: styles.documentTile, children: [_jsxs(View, { style: [styles.documentCardWrap, { maxWidth: figmaCardWidth }], children: [_jsxs(View, { style: [
-                                styles.documentCard,
-                                {
-                                    aspectRatio: figmaCardWidth / figmaCardHeight,
-                                    backgroundColor: theme.colors.cardBackground,
-                                },
-                            ], onLayout: (event) => {
-                                const width = event.nativeEvent.layout.width;
-                                setMeasuredCardWidth((previous) => Math.abs(previous - width) < 0.5 ? previous : width);
-                            }, children: [scale > 0 ? (_jsx(View, { style: {
-                                        position: "absolute",
-                                        left: -DOC_BLEED_X * scale,
-                                        top: -DOC_BLEED_TOP * scale,
-                                    }, children: _jsx(Illustration, { width: (figmaCardWidth + DOC_BLEED_X * 2) * scale, height: (figmaCardHeight + DOC_BLEED_TOP + DOC_BLEED_BOTTOM) * scale }) })) : null, _jsx(View, { pointerEvents: "none", style: [
-                                        styles.documentCardBorder,
-                                        { borderColor: theme.colors.stroke },
-                                    ] })] }), _jsx(View, { style: [
-                                styles.badge,
-                                styles.documentBadge,
-                                { backgroundColor: theme.colors.cardBackground },
-                            ], accessibilityRole: "image", accessibilityLabel: badgeLabel, children: _jsx(Badge, { size: BADGE_ICON_SIZE }) })] }), _jsx(Text, { numberOfLines: 1, style: {
-                        ...theme.typography.cardCaption,
-                        fontSize: 10,
-                        lineHeight: 12,
-                        color: theme.colors.cardText,
-                        textAlign: "center",
-                        marginTop: theme.spacing.extraSmall,
-                    }, children: caption })] }));
-    }
-    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: caption })] }));
-}
-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,
-    },
-    // One of four equal columns so the document guidelines always fit one row.
-    documentTile: {
-        width: "25%",
-        alignItems: "center",
-        paddingHorizontal: 3,
-    },
-    // Capped at the artwork's natural width (inline maxWidth) so it never grows
-    // past its design size on wide screens.
-    documentCardWrap: {
-        width: "100%",
-        alignSelf: "center",
-    },
-    documentCard: {
-        width: "100%",
-        borderRadius: DOC_CARD_RADIUS,
-        // No `overflow: hidden` — would clip the SVG's bleed and the shadow.
-        shadowColor: "#000000",
-        shadowOpacity: 0.1,
-        shadowRadius: 3,
-        shadowOffset: { width: 0, height: 1 },
-        elevation: 1,
-    },
-    documentCardBorder: {
-        position: "absolute",
-        top: 0,
-        bottom: 0,
-        start: 0,
-        end: 0,
-        borderRadius: DOC_CARD_RADIUS,
-        borderWidth: 1,
-    },
-    documentBadge: {
-        top: DOC_BADGE_OVERHANG,
-        end: DOC_BADGE_OVERHANG,
-    },
-});
-//# sourceMappingURL=use_smile_id_guideline_thumbnail.js.map
+"use strict";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useState as H}from"react";import{StyleSheet as G,Text as w,View as o}from"react-native";import{useUseSmileIDTheme as k}from"../theme/theme_context";import{useUseSmileIDLocalizations as x}from"../../l10n/use_smile_id_localizations_provider";import{SiFilledCheckCircle as L,SiFilledCloseCircle as W}from"./icons";const z=41,j=73,v=4,M=31,U=43,V=20,D=4,l=16,f=14,I=-10,_=4,E=3,R=2,F=4,B=-8;export function UseSmileIDGuidelineThumbnail({guideline:a,theme:O}){const A=k(),t=O??A,n=x(),[h,S]=H(0),c=a.status==="allowed",m=a.image,g=c?L:W,u=c?n.siCdGuidelineAllowed:n.siCdGuidelineBlocked,C=a.label(n);if(a.card){const{width:d,height:p}=a.card,s=h>0?h/d:0;return r(o,{style:i.documentTile,children:[r(o,{style:[i.documentCardWrap,{maxWidth:d}],children:[r(o,{style:[i.documentCard,{aspectRatio:d/p,backgroundColor:t.colors.cardBackground}],onLayout:T=>{const b=T.nativeEvent.layout.width;S(y=>Math.abs(y-b)<.5?y:b)},children:[s>0?e(o,{style:{position:"absolute",left:-E*s,top:-R*s},children:e(m,{width:(d+E*2)*s,height:(p+R+F)*s})}):null,e(o,{pointerEvents:"none",style:[i.documentCardBorder,{borderColor:t.colors.stroke}]})]}),e(o,{style:[i.badge,i.documentBadge,{backgroundColor:t.colors.cardBackground}],accessibilityRole:"image",accessibilityLabel:u,children:e(g,{size:f})})]}),e(w,{numberOfLines:1,style:{...t.typography.cardCaption,fontSize:10,lineHeight:12,color:t.colors.cardText,textAlign:"center",marginTop:t.spacing.extraSmall},children:C})]})}return r(o,{style:i.container,children:[r(o,{children:[r(o,{style:[i.card,{backgroundColor:t.colors.cardBackground,borderColor:t.colors.stroke}],children:[e(m,{width:M,height:U}),e(o,{style:[i.pill,{backgroundColor:c?t.colors.primary:t.colors.secondary}]})]}),e(o,{style:[i.badge,{backgroundColor:t.colors.cardBackground}],accessibilityRole:"image",accessibilityLabel:u,children:e(g,{size:f})})]}),e(w,{style:{...t.typography.cardCaption,fontSize:10,lineHeight:10,color:t.colors.primary,textAlign:"center",marginTop:t.spacing.extraSmall},children:C})]})}const i=G.create({container:{alignItems:"center"},card:{width:z,height:j,borderRadius:v,borderWidth:1,paddingHorizontal:4,paddingVertical:6,alignItems:"center",justifyContent:"center",rowGap:4,shadowColor:"#000000",shadowOpacity:.1,shadowRadius:2,shadowOffset:{width:0,height:1},elevation:1},pill:{width:V,height:D,borderRadius:D/2},badge:{position:"absolute",top:I,end:I,width:l,height:l,borderRadius:l/2,alignItems:"center",justifyContent:"center",shadowColor:"#000000",shadowOpacity:.1,shadowRadius:2,shadowOffset:{width:0,height:1},elevation:1},documentTile:{width:"25%",alignItems:"center",paddingHorizontal:3},documentCardWrap:{width:"100%",alignSelf:"center"},documentCard:{width:"100%",borderRadius:_,shadowColor:"#000000",shadowOpacity:.1,shadowRadius:3,shadowOffset:{width:0,height:1},elevation:1},documentCardBorder:{position:"absolute",top:0,bottom:0,start:0,end:0,borderRadius:_,borderWidth:1},documentBadge:{top:B,end:B}});

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

@@ -25,4 +25,3 @@ export declare function loopDurationMs(source: HeroAnimationSource): number;
  * the final frame, ring filled).
  */
 export declare function UseSmileIDInstructionsHero({ source, showOval, showOvalProgress, showCardBackground, theme: themeProp, }: UseSmileIDInstructionsHeroProps): import("react").JSX.Element;
-//# sourceMappingURL=use_smile_id_instructions_hero.d.ts.map