@smileid/usesmileid 12.0.0-beta01

package/src/presentation/components/use_smile_id_guideline_thumbnail.tsx

@@ -0,0 +1,134 @@
+import { StyleSheet, Text, View } from "react-native";
+import type { UseSmileIDTheme } from "../theme/theme";
+import { useUseSmileIDTheme } from "../theme/theme_context";
+import { useUseSmileIDLocalizations } from "../../l10n/use_smile_id_localizations_provider";
+import type { InstructionGuideline } from "../flow/model/instruction_guideline";
+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;
+
+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 function UseSmileIDGuidelineThumbnail({
+  guideline,
+  theme: themeProp,
+}: UseSmileIDGuidelineThumbnailProps) {
+  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 (
+    <View style={styles.container}>
+      {/* No `overflow: hidden` so the badge can overhang the card corner. */}
+      <View>
+        <View
+          style={[
+            styles.card,
+            {
+              backgroundColor: theme.colors.cardBackground,
+              borderColor: theme.colors.stroke,
+            },
+          ]}
+        >
+          <Illustration width={IMAGE_WIDTH} height={IMAGE_HEIGHT} />
+          <View
+            style={[
+              styles.pill,
+              {
+                backgroundColor: allowed
+                  ? theme.colors.primary
+                  : theme.colors.secondary,
+              },
+            ]}
+          />
+        </View>
+        <View
+          style={[
+            styles.badge,
+            { backgroundColor: theme.colors.cardBackground },
+          ]}
+          accessibilityRole="image"
+          accessibilityLabel={badgeLabel}
+        >
+          <Badge size={BADGE_ICON_SIZE} />
+        </View>
+      </View>
+      <Text
+        style={{
+          ...theme.typography.cardCaption,
+          fontSize: 10,
+          lineHeight: 10,
+          color: theme.colors.primary,
+          textAlign: "center",
+          marginTop: theme.spacing.extraSmall,
+        }}
+      >
+        {guideline.label(localizations)}
+      </Text>
+    </View>
+  );
+}
+
+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,
+  },
+});

package/src/presentation/components/use_smile_id_instructions_hero.tsx

@@ -0,0 +1,245 @@
+import { useEffect, useRef, useState } from "react";
+import {
+  Animated,
+  Easing,
+  StyleSheet,
+  View,
+  type LayoutChangeEvent,
+} from "react-native";
+import Svg, { Ellipse } from "react-native-svg";
+import type { UseSmileIDTheme } from "../theme/theme";
+import { useUseSmileIDTheme } from "../theme/theme_context";
+import type { HeroAnimationSource } from "../flow/model/instructions_defaults";
+import { useReducedMotion } from "../utils/use_reduced_motion";
+import { AnimatedLottieView } from "./helpers/animated_lottie_view";
+import { FaceOvalDefaults } from "./face_oval_defaults";
+
+// Oval bounded by 74% of the slot width / 84% of its height; the Lottie
+// frame is slightly wider and nudged down so the face sits centered.
+const OVAL_ASPECT_RATIO = 241 / 324; // width / height
+const OVAL_WIDTH_FRACTION = 0.74;
+const OVAL_HEIGHT_FRACTION = 0.84;
+const ANIMATION_TO_OVAL_WIDTH_RATIO = 279 / 241;
+const ANIMATION_VERTICAL_OFFSET_RATIO = 0.06;
+const STROKE_WIDTH = FaceOvalDefaults.strokeWidth; // matches the capture overlay's oval stroke
+const DEFAULT_LOOP_MS = 2000;
+// The oval progress ring fills on its own fixed-duration loop, independent of
+// the hero animation's playback speed, so a long hero composition can't slow
+// the fill down to a crawl.
+export 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 function loopDurationMs(source: HeroAnimationSource): number {
+  if (source && typeof source === "object" && "fr" in source) {
+    const composition = source as { op?: number; ip?: number; fr?: number };
+    if (composition.fr && composition.op !== undefined) {
+      const milliseconds =
+        ((composition.op - (composition.ip ?? 0)) / composition.fr) * 1000;
+      if (Number.isFinite(milliseconds) && milliseconds > 0) {
+        return milliseconds;
+      }
+    }
+  }
+  return DEFAULT_LOOP_MS;
+}
+
+/**
+ * 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 function UseSmileIDInstructionsHero({
+  source,
+  showOval = false,
+  showOvalProgress = true,
+  theme: themeProp,
+}: UseSmileIDInstructionsHeroProps) {
+  const themeFromContext = useUseSmileIDTheme();
+  const theme = themeProp ?? themeFromContext;
+  const [size, setSize] = useState({ width: 0, height: 0 });
+  const reducedMotion = useReducedMotion();
+  // Drives the Lottie hero frame at its natural composition pace.
+  const heroProgress = useRef(new Animated.Value(0)).current;
+  // Drives the rising green ring fill on its own fixed-duration loop.
+  const ovalProgress = useRef(new Animated.Value(0)).current;
+
+  // Loop only when the ring animates; otherwise pin the value (1 under reduced
+  // motion = full ring / final frame, else 0).
+  const animate = showOvalProgress && !reducedMotion;
+
+  // Hero animation: plays over its own composition duration, untouched by the
+  // ring fill speed.
+  useEffect(() => {
+    if (animate) {
+      heroProgress.setValue(0);
+      const loop = Animated.loop(
+        Animated.timing(heroProgress, {
+          toValue: 1,
+          duration: loopDurationMs(source),
+          easing: Easing.linear,
+          useNativeDriver: false,
+        }),
+      );
+      loop.start();
+      return () => loop.stop();
+    }
+    heroProgress.setValue(reducedMotion ? 1 : 0);
+    return undefined;
+  }, [animate, reducedMotion, source, heroProgress]);
+
+  // Ring fill: dedicated linear loop completing in OVAL_PROGRESS_DURATION_MS,
+  // independent of the hero animation. Reduced motion holds it fully filled.
+  useEffect(() => {
+    if (animate) {
+      ovalProgress.setValue(0);
+      const loop = Animated.loop(
+        Animated.timing(ovalProgress, {
+          toValue: 1,
+          duration: OVAL_PROGRESS_DURATION_MS,
+          easing: Easing.linear,
+          useNativeDriver: false,
+        }),
+      );
+      loop.start();
+      return () => loop.stop();
+    }
+    ovalProgress.setValue(reducedMotion ? 1 : 0);
+    return undefined;
+    // `source` is intentionally omitted: the ring's duration is the fixed
+    // OVAL_PROGRESS_DURATION_MS constant, so it must not re-key on the hero
+    // composition (that coupling is exactly what this effect avoids).
+  }, [animate, reducedMotion, ovalProgress]);
+
+  const ovalWidth = Math.min(
+    size.width * OVAL_WIDTH_FRACTION,
+    size.height * OVAL_HEIGHT_FRACTION * OVAL_ASPECT_RATIO,
+  );
+  const ovalHeight = ovalWidth / OVAL_ASPECT_RATIO;
+  const animationSize = ovalWidth * ANIMATION_TO_OVAL_WIDTH_RATIO;
+  const verticalOffset = animationSize * ANIMATION_VERTICAL_OFFSET_RATIO;
+  const hasSize = ovalWidth > 0 && ovalHeight > 0;
+
+  const onLayout = (event: LayoutChangeEvent) => {
+    const { width, height } = event.nativeEvent.layout;
+    setSize((previous) =>
+      previous.width === width && previous.height === height
+        ? previous
+        : { width, height },
+    );
+  };
+
+  // Drive the Lottie from the hero progress value when the ring is shown or
+  // motion is reduced; otherwise let it play on its own clock (autoPlay+loop).
+  const lottieDrivenByProgress = showOvalProgress || reducedMotion;
+
+  // Inset the ring by half the stroke so it isn't clipped at the SVG edge.
+  const ellipseProps = {
+    cx: ovalWidth / 2,
+    cy: ovalHeight / 2,
+    rx: (ovalWidth - STROKE_WIDTH) / 2,
+    ry: (ovalHeight - STROKE_WIDTH) / 2,
+    strokeWidth: STROKE_WIDTH,
+    fill: "none" as const,
+  };
+
+  return (
+    <View
+      style={styles.container}
+      onLayout={onLayout}
+      testID="si_instructions_hero"
+    >
+      {hasSize ? (
+        <>
+          {showOval ? (
+            <>
+              <Svg
+                width={ovalWidth}
+                height={ovalHeight}
+                style={{
+                  position: "absolute",
+                  left: (size.width - ovalWidth) / 2,
+                  top: (size.height - ovalHeight) / 2,
+                }}
+              >
+                <Ellipse {...ellipseProps} stroke={theme.colors.ovalDefault} />
+              </Svg>
+              {/* Green fill revealed by a bottom-anchored view window —
+                  Android never re-resolves animated SVG clipPath contents,
+                  so the clip must happen at the View layer. */}
+              {showOvalProgress ? (
+                <View
+                  pointerEvents="none"
+                  style={{
+                    position: "absolute",
+                    left: (size.width - ovalWidth) / 2,
+                    top: (size.height - ovalHeight) / 2,
+                    width: ovalWidth,
+                    height: ovalHeight,
+                  }}
+                >
+                  <Animated.View
+                    style={{
+                      position: "absolute",
+                      left: 0,
+                      right: 0,
+                      bottom: 0,
+                      overflow: "hidden",
+                      height: ovalProgress.interpolate({
+                        inputRange: [0, 1],
+                        outputRange: [0, ovalHeight],
+                      }),
+                    }}
+                  >
+                    <Svg
+                      width={ovalWidth}
+                      height={ovalHeight}
+                      style={{ position: "absolute", left: 0, bottom: 0 }}
+                    >
+                      <Ellipse
+                        {...ellipseProps}
+                        stroke={theme.colors.ovalActive}
+                      />
+                    </Svg>
+                  </Animated.View>
+                </View>
+              ) : null}
+            </>
+          ) : null}
+
+          <AnimatedLottieView
+            source={source}
+            autoPlay={!lottieDrivenByProgress}
+            loop={!lottieDrivenByProgress}
+            {...(lottieDrivenByProgress ? { progress: heroProgress } : {})}
+            style={{
+              position: "absolute",
+              width: animationSize,
+              height: animationSize,
+              left: (size.width - animationSize) / 2,
+              top: (size.height - animationSize) / 2 + verticalOffset,
+            }}
+          />
+        </>
+      ) : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1, alignSelf: "stretch" },
+});

package/src/presentation/components/use_smile_id_learn_more_content.tsx

@@ -0,0 +1,115 @@
+import { Linking, StyleSheet, Text, View } from "react-native";
+import type { UseSmileIDTheme } from "../theme/theme";
+import { useUseSmileIDTheme } from "../theme/theme_context";
+import { useUseSmileIDLocalizations } from "../../l10n/use_smile_id_localizations_provider";
+import { UseSmileIDCrashReporting } from "@smileid/usesmileid_bridge";
+
+export type UseSmileIDLearnMoreContentProps = {
+  readonly partnerName: string;
+  readonly partnerPrivacyPolicyUrl?: string;
+  readonly testID?: string;
+  readonly theme?: UseSmileIDTheme;
+};
+
+const SMILE_ID_PRIVACY_URL = "https://usesmileid.com/privacy-policy/";
+
+/**
+ * Privacy-policy / consent details, rendered in an expandable section
+ * on the consent screen. Composes the canonical
+ * `si_consent_learn_more_description` template with `{smile_id}`,
+ * `{partner}`, `{retention}` placeholders.
+ *
+ * Tap targets:
+ *   • Smile ID link → `https://usesmileid.com/privacy-policy/`
+ *   • Partner link  → `partnerPrivacyPolicyUrl` (silent no-op when omitted)
+ *   • DSAR link     → opens Smile ID DSAR page
+ *
+ * Substitution is done locally because
+ * `siConsentLearnMoreDescription` is a non-parameterised getter —
+ * keeps the localizations class one-token-per-method.
+ */
+export function UseSmileIDLearnMoreContent(
+  props: UseSmileIDLearnMoreContentProps,
+) {
+  const themeFromContext = useUseSmileIDTheme();
+  const theme = props.theme ?? themeFromContext;
+  const loc = useUseSmileIDLocalizations();
+
+  const description = loc.siConsentLearnMoreDescription
+    .split("{smile_id}")
+    .join(loc.siConsentLearnMoreDescriptionSmileId)
+    .split("{partner}")
+    .join(props.partnerName)
+    .split("{retention}")
+    .join(loc.siConsentLearnMoreDescriptionRetention);
+
+  const openSmileId = () => {
+    Linking.openURL(SMILE_ID_PRIVACY_URL).catch((err: unknown) => {
+      // Concrete scenario: device has no browser registered, or URL
+      // handler rejects. Route through crash reporting so partners
+      // see the failure in observability instead of "tap does
+      // nothing" in QA.
+      UseSmileIDCrashReporting.captureException(err);
+    });
+  };
+  const openPartner = () => {
+    const url = props.partnerPrivacyPolicyUrl;
+    if (!url) return;
+    Linking.openURL(url).catch((err: unknown) => {
+      // Concrete scenario: partner ships a malformed
+      // `partnerPrivacyPolicyUrl` — tap silently fails. Surface to
+      // crash reporting so partner QA catches it pre-release.
+      UseSmileIDCrashReporting.captureException(err);
+    });
+  };
+
+  const linkStyle = {
+    ...theme.typography.body,
+    color: theme.colors.primary,
+    textDecorationLine: "underline" as const,
+  };
+
+  return (
+    <View
+      testID={props.testID}
+      style={[
+        styles.container,
+        { paddingVertical: theme.spacing.medium, gap: theme.spacing.small },
+      ]}
+    >
+      <Text
+        style={{
+          ...theme.typography.body,
+          color: theme.colors.cardText,
+          lineHeight: 18,
+        }}
+      >
+        {description}
+      </Text>
+
+      <Text style={{ ...theme.typography.body, color: theme.colors.cardText }}>
+        {loc.siConsentLearnMoreDsarPrefix}
+        <Text onPress={openSmileId} style={linkStyle}>
+          {loc.siConsentLearnMoreDsarLink}
+        </Text>
+        .
+      </Text>
+
+      <Text style={{ ...theme.typography.body, color: theme.colors.cardText }}>
+        {loc.siConsentLearnMorePrivacyPrefix}
+        <Text onPress={openSmileId} style={linkStyle}>
+          {loc.siConsentLearnMorePrivacySmileLink}
+        </Text>
+        {loc.siConsentLearnMorePrivacyAnd}
+        <Text onPress={openPartner} style={linkStyle}>
+          {loc.siConsentLearnMorePrivacyPartnerLink(props.partnerName)}
+        </Text>
+        {loc.siConsentLearnMorePrivacySuffix}
+      </Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {},
+});

package/src/presentation/components/use_smile_id_loading_content.tsx

@@ -0,0 +1,54 @@
+import { StyleSheet, Text, View } from "react-native";
+import type { UseSmileIDTheme } from "../theme/theme";
+import { useUseSmileIDTheme } from "../theme/theme_context";
+import { useUseSmileIDLocalizations } from "../../l10n/use_smile_id_localizations_provider";
+
+export type UseSmileIDLoadingContentProps = {
+  readonly message?: string;
+  readonly testID?: string;
+  readonly theme?: UseSmileIDTheme;
+};
+
+/**
+ * Loading-state body of the processing screen's bottom card —
+ * "Submitting…" message (or partner override) only. The active
+ * spinner is rendered separately, centered inside the face oval
+ * by the screen itself, so the same indicator doesn't appear twice.
+ */
+export function UseSmileIDLoadingContent(props: UseSmileIDLoadingContentProps) {
+  const themeFromContext = useUseSmileIDTheme();
+  const theme = props.theme ?? themeFromContext;
+  const loc = useUseSmileIDLocalizations();
+  const message = props.message ?? loc.siProcessingSubmitting;
+  return (
+    <View
+      testID={props.testID}
+      style={[styles.container, { paddingVertical: theme.spacing.small }]}
+    >
+      <Text
+        style={{
+          ...theme.typography.cardHeading,
+          color: theme.colors.primary,
+          textAlign: "center",
+          letterSpacing: -0.425,
+        }}
+      >
+        {message}
+      </Text>
+      <Text
+        style={{
+          ...theme.typography.cardCaption,
+          color: theme.colors.cardText,
+          textAlign: "center",
+          marginTop: theme.spacing.extraSmall,
+        }}
+      >
+        {loc.siProcessingSubmittingSubtitle}
+      </Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { alignItems: "center", justifyContent: "center" },
+});

package/src/presentation/components/use_smile_id_loading_indicator.tsx

@@ -0,0 +1,81 @@
+import { useEffect, useRef } from "react";
+import { Animated, Easing } from "react-native";
+import Svg, { Circle } from "react-native-svg";
+import type { UseSmileIDTheme } from "../theme/theme";
+import { useUseSmileIDTheme } from "../theme/theme_context";
+import { useReducedMotion } from "../utils/use_reduced_motion";
+
+export type UseSmileIDLoadingIndicatorProps = {
+  /** Diameter in dp (default 64). */
+  readonly size?: number;
+  readonly testID?: string;
+  readonly theme?: UseSmileIDTheme;
+};
+
+const DEFAULT_SIZE = 64;
+const STROKE_WIDTH = 4;
+// 270° visible arc — the open quarter is what reads as "spinning".
+const SWEEP_FRACTION = 0.75;
+const SPIN_DURATION_MS = 1000;
+
+/**
+ * Submission spinner — a `submittingIndicator`-green arc (round cap,
+ * 270° sweep) that rotates once per second. When the OS reports
+ * reduced-motion, the arc is held static (no rotation) so the screen
+ * still reads as "in progress" without animating.
+ */
+export function UseSmileIDLoadingIndicator(
+  props: UseSmileIDLoadingIndicatorProps,
+) {
+  const themeFromContext = useUseSmileIDTheme();
+  const theme = props.theme ?? themeFromContext;
+  const size = props.size ?? DEFAULT_SIZE;
+  const radius = (size - STROKE_WIDTH) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const arcLength = circumference * SWEEP_FRACTION;
+
+  const reduceMotion = useReducedMotion();
+  const rotation = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    if (reduceMotion) return;
+    const loop = Animated.loop(
+      Animated.timing(rotation, {
+        toValue: 1,
+        duration: SPIN_DURATION_MS,
+        easing: Easing.linear,
+        useNativeDriver: true,
+      }),
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [reduceMotion, rotation]);
+
+  const spin = rotation.interpolate({
+    inputRange: [0, 1],
+    outputRange: ["0deg", "360deg"],
+  });
+
+  return (
+    <Animated.View
+      testID={props.testID}
+      style={[
+        { width: size, height: size },
+        reduceMotion ? null : { transform: [{ rotate: spin }] },
+      ]}
+    >
+      <Svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
+        <Circle
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          stroke={theme.colors.submittingIndicator}
+          strokeWidth={STROKE_WIDTH}
+          strokeLinecap="round"
+          strokeDasharray={`${arcLength} ${circumference}`}
+          fill="none"
+        />
+      </Svg>
+    </Animated.View>
+  );
+}

package/src/presentation/components/use_smile_id_oval_border_palette.ts

@@ -0,0 +1,60 @@
+import type { UseSmileIDColors } from "../theme/theme";
+import { UseSmileIDOverlayState } from "../state/use_smile_id_overlay_state";
+
+/** Theme-color token names the oval border can resolve to. */
+export type OvalBorderColorToken = Extract<
+  keyof UseSmileIDColors,
+  "ovalDefault" | "ovalActive" | "ovalWarning"
+>;
+
+/**
+ * Pure overlay-state → border colour-token table, unit-tested directly;
+ * `UseSmileIDFaceOverlay` resolves the token through the active theme.
+ */
+export const UseSmileIDOvalBorderPalette = {
+  tokenFor(
+    captureState: UseSmileIDOverlayState,
+    enableEnhancedLiveness: boolean,
+  ): OvalBorderColorToken {
+    switch (captureState) {
+      case UseSmileIDOverlayState.INSTRUCTION:
+      case UseSmileIDOverlayState.IDLE:
+      case UseSmileIDOverlayState.FACE_DETECTED:
+      case UseSmileIDOverlayState.HEAD_TURN:
+        return "ovalDefault";
+
+      case UseSmileIDOverlayState.READY:
+        return "ovalActive";
+
+      // ESS has no green oval treatment.
+      case UseSmileIDOverlayState.CAPTURING:
+      case UseSmileIDOverlayState.PROCESSING:
+        return enableEnhancedLiveness ? "ovalDefault" : "ovalActive";
+
+      // Directional hints keep a neutral rim; the red arc carries colour.
+      case UseSmileIDOverlayState.MOVE_LEFT:
+      case UseSmileIDOverlayState.MOVE_RIGHT:
+      case UseSmileIDOverlayState.MOVE_UP:
+      case UseSmileIDOverlayState.MOVE_DOWN:
+        return "ovalDefault";
+
+      case UseSmileIDOverlayState.TOO_CLOSE:
+      case UseSmileIDOverlayState.TOO_FAR:
+      case UseSmileIDOverlayState.FACE_NOT_CENTERED:
+      case UseSmileIDOverlayState.LOW_LIGHT:
+      case UseSmileIDOverlayState.BRIGHT_LIGHT:
+      case UseSmileIDOverlayState.WRONG_ORIENTATION:
+      case UseSmileIDOverlayState.NOT_SMILING:
+      case UseSmileIDOverlayState.MULTIPLE_FACES:
+        return "ovalWarning";
+
+      // Document states render via UseSmileIDDocumentOverlay, not here.
+      case UseSmileIDOverlayState.DOCUMENT_NOT_CENTERED:
+      case UseSmileIDOverlayState.DOCUMENT_TOO_FAR:
+      case UseSmileIDOverlayState.DOCUMENT_TOO_CLOSE:
+      case UseSmileIDOverlayState.DOCUMENT_HOLD_STILL:
+      case UseSmileIDOverlayState.DOCUMENT_READY:
+        return "ovalDefault";
+    }
+  },
+} as const;