@smileid/usesmileid 12.0.0-beta01 → 12.0.1

package/src/presentation/components/__tests__/use_smile_id_enhanced_smart_selfie_clip.test.tsx

@@ -8,10 +8,10 @@ import {
 import { AccessibilityInfo } from "react-native";
 import {
   UseSmileIDEnhancedSmartSelfieClip,
-  ENHANCED_SMART_SELFIE_ANIMATION_SIZE,
+  ENHANCED_SMART_SELFIE_ARROW_FIT,
 } from "../use_smile_id_enhanced_smart_selfie_clip";
+import { FaceOvalDefaults } from "../face_oval_defaults";
 import {
-  ENHANCED_SMART_SELFIE_ANIMATION_OPACITY,
   ENHANCED_SMART_SELFIE_ANIMATION_SPEED,
   ENHANCED_SMART_SELFIE_TOTAL_FRAMES,
 } from "../helpers/enhanced_smart_selfie_animation_frames";
@@ -196,7 +196,7 @@ describe("UseSmileIDEnhancedSmartSelfieClip", () => {
   });
 
   describe("positioning", () => {
-    it("produces a container sized to ENHANCED_SMART_SELFIE_ANIMATION_SIZE", async () => {
+    it("sizes the container to the oval width times the arrow-fit factor", async () => {
       const tree = renderClip({ pingPong: false });
       await act(async () => {
         await Promise.resolve();
@@ -210,13 +210,17 @@ describe("UseSmileIDEnhancedSmartSelfieClip", () => {
       );
       expect(container).toBeDefined();
       const style = container!.props.style as { width: number; height: number };
-      expect(style.width).toBe(ENHANCED_SMART_SELFIE_ANIMATION_SIZE);
-      expect(style.height).toBe(ENHANCED_SMART_SELFIE_ANIMATION_SIZE);
+      const expectedSize =
+        BASE_CONTAINER_WIDTH *
+        FaceOvalDefaults.ovalWidthRatio *
+        ENHANCED_SMART_SELFIE_ARROW_FIT;
+      expect(style.width).toBe(expectedSize);
+      expect(style.height).toBe(expectedSize);
     });
   });
 
   describe("tuning — opacity + speed", () => {
-    it("renders the cue at 0.75 opacity so the face stays the focal point", async () => {
+    it("renders the cue at full opacity (no translucency over the animation)", async () => {
       const tree = renderClip({ pingPong: false });
       await act(async () => {
         await Promise.resolve();
@@ -227,8 +231,8 @@ describe("UseSmileIDEnhancedSmartSelfieClip", () => {
           match.props.style !== undefined && match.props.style !== null,
       );
       expect(container).toBeDefined();
-      const style = container!.props.style as { opacity: number };
-      expect(style.opacity).toBe(ENHANCED_SMART_SELFIE_ANIMATION_OPACITY);
+      const style = container!.props.style as { opacity?: number };
+      expect(style.opacity).toBeUndefined();
     });
 
     it("plays the full primer at 0.6x speed", async () => {

package/src/presentation/components/__tests__/use_smile_id_guideline_thumbnail.test.tsx

@@ -7,7 +7,10 @@ import {
 } from "react-test-renderer";
 import { Text } from "react-native";
 import { UseSmileIDGuidelineThumbnail } from "../use_smile_id_guideline_thumbnail";
-import { SELFIE_GUIDELINES } from "../../flow/model/instructions_defaults";
+import {
+  DOCUMENT_GUIDELINES_PASSPORT,
+  SELFIE_GUIDELINES,
+} from "../../flow/model/instructions_defaults";
 
 function render(element: React.ReactElement) {
   let tree!: ReturnType<typeof createRenderer>;
@@ -77,3 +80,33 @@ describe("UseSmileIDGuidelineThumbnail", () => {
     );
   });
 });
+
+// DOCUMENT_GUIDELINES_PASSPORT order: [Good (allowed), …, Not reflective]; these
+// carry a `card` size → the thumbnail renders the document-card layout.
+const documentAllowedGuideline = DOCUMENT_GUIDELINES_PASSPORT[0]!;
+const documentBlockedGuideline = DOCUMENT_GUIDELINES_PASSPORT[3]!;
+
+describe("UseSmileIDGuidelineThumbnail — document card", () => {
+  it("renders the caption and allowed badge for a document guideline", () => {
+    const { root } = render(
+      <UseSmileIDGuidelineThumbnail guideline={documentAllowedGuideline} />,
+    );
+    expect(findTextNode(root, "Good")).not.toBeNull();
+    expect(
+      root.findAllByProps({ accessibilityLabel: "Allowed" })[0],
+    ).toBeTruthy();
+    expect(
+      root.findAllByProps({ accessibilityLabel: "Not allowed" }),
+    ).toHaveLength(0);
+  });
+
+  it("renders the blocked badge and caption for a blocked document guideline", () => {
+    const { root } = render(
+      <UseSmileIDGuidelineThumbnail guideline={documentBlockedGuideline} />,
+    );
+    expect(findTextNode(root, "Not reflective")).not.toBeNull();
+    expect(
+      root.findAllByProps({ accessibilityLabel: "Not allowed" })[0],
+    ).toBeTruthy();
+  });
+});

package/src/presentation/components/__tests__/use_smile_id_instructions_hero.test.tsx

@@ -7,6 +7,7 @@ import {
   OVAL_PROGRESS_DURATION_MS,
   loopDurationMs,
 } from "../use_smile_id_instructions_hero";
+import { AnimatedLottieView } from "../helpers/animated_lottie_view";
 import { SELFIE_HERO_ANIMATION } from "../../flow/model/instructions_defaults";
 
 function render(element: React.ReactElement) {
@@ -76,4 +77,74 @@ describe("UseSmileIDInstructionsHero", () => {
       timingSpy.mockRestore();
     }
   });
+
+  it("pins oval-less heroes to the software Lottie engine on iOS", () => {
+    // lottie-ios's CA engine mis-renders the doc heroes' track mattes, so
+    // oval-less heroes must pin renderMode SOFTWARE on iOS.
+    const docTree = render(
+      <UseSmileIDInstructionsHero
+        source={SELFIE_HERO_ANIMATION}
+        showOval={false}
+        showOvalProgress={false}
+      />,
+    );
+    const docHero = docTree.root.findByProps({
+      testID: "si_instructions_hero",
+    });
+    act(() => {
+      docHero.props.onLayout({
+        nativeEvent: { layout: { width: 390, height: 600 } },
+      });
+    });
+    expect(docTree.root.findByType(AnimatedLottieView).props.renderMode).toBe(
+      "SOFTWARE",
+    );
+    act(() => docTree.unmount());
+
+    const ovalTree = render(
+      <UseSmileIDInstructionsHero
+        source={SELFIE_HERO_ANIMATION}
+        showOval
+        showOvalProgress={false}
+      />,
+    );
+    const ovalHero = ovalTree.root.findByProps({
+      testID: "si_instructions_hero",
+    });
+    act(() => {
+      ovalHero.props.onLayout({
+        nativeEvent: { layout: { width: 390, height: 600 } },
+      });
+    });
+    expect(
+      ovalTree.root.findByType(AnimatedLottieView).props.renderMode,
+    ).toBeUndefined();
+    act(() => ovalTree.unmount());
+  });
+
+  it("gives the document card hero explicit dimensions (no intrinsic-size flash)", () => {
+    const tree = render(
+      <UseSmileIDInstructionsHero
+        source={SELFIE_HERO_ANIMATION}
+        showCardBackground
+        showOvalProgress={false}
+      />,
+    );
+    // The renderer doesn't fire onLayout on its own; drive it so the measured
+    // subtree (card + Lottie) materializes.
+    const hero = tree.root.findByProps({ testID: "si_instructions_hero" });
+    act(() => {
+      hero.props.onLayout({
+        nativeEvent: { layout: { width: 384, height: 600 } },
+      });
+    });
+
+    const lottie = tree.root.findByType(AnimatedLottieView);
+    const style = lottie.props.style as { width?: unknown; height?: unknown };
+    // Regression guard: explicit numeric width/height (not absoluteFill), else the Lottie
+    // flashes at the composition's intrinsic size on first render.
+    expect(typeof style.width).toBe("number");
+    expect(typeof style.height).toBe("number");
+    act(() => tree.unmount());
+  });
 });

package/src/presentation/components/__tests__/use_smile_id_oval_border_palette.test.ts

@@ -16,17 +16,14 @@ describe("UseSmileIDOvalBorderPalette", () => {
     UseSmileIDOverlayState.MOVE_RIGHT,
     UseSmileIDOverlayState.MOVE_UP,
     UseSmileIDOverlayState.MOVE_DOWN,
-    UseSmileIDOverlayState.DOCUMENT_NOT_CENTERED,
-    UseSmileIDOverlayState.DOCUMENT_TOO_FAR,
-    UseSmileIDOverlayState.DOCUMENT_TOO_CLOSE,
-    UseSmileIDOverlayState.DOCUMENT_HOLD_STILL,
-    UseSmileIDOverlayState.DOCUMENT_READY,
   ];
 
   const active: UseSmileIDOverlayState[] = [
     UseSmileIDOverlayState.READY,
     UseSmileIDOverlayState.CAPTURING,
     UseSmileIDOverlayState.PROCESSING,
+    // Document is correctly framed → green, mirroring the selfie ready state.
+    UseSmileIDOverlayState.DOCUMENT_READY,
   ];
 
   const warning: UseSmileIDOverlayState[] = [
@@ -38,6 +35,11 @@ describe("UseSmileIDOvalBorderPalette", () => {
     UseSmileIDOverlayState.WRONG_ORIENTATION,
     UseSmileIDOverlayState.NOT_SMILING,
     UseSmileIDOverlayState.MULTIPLE_FACES,
+    // Document detected but mispositioned → red, mirroring the face warnings.
+    UseSmileIDOverlayState.DOCUMENT_NOT_CENTERED,
+    UseSmileIDOverlayState.DOCUMENT_TOO_FAR,
+    UseSmileIDOverlayState.DOCUMENT_TOO_CLOSE,
+    UseSmileIDOverlayState.DOCUMENT_HOLD_STILL,
   ];
 
   it("covers every overlay state exactly once across the three buckets", () => {

package/src/presentation/components/helpers/enhanced_smart_selfie_animation_frames.ts

@@ -50,12 +50,6 @@ export const ENHANCED_SMART_SELFIE_FRAME_RATE = 30;
  */
 export const ENHANCED_SMART_SELFIE_ANIMATION_SPEED = 0.6;
 
-/**
- * Opacity for the ESS cues so the face stays the focal point behind the
- * translucent arrow overlay.
- */
-export const ENHANCED_SMART_SELFIE_ANIMATION_OPACITY = 0.75;
-
 /**
  * Resolve the keyframe span for [direction] — the green `matched` span
  * while [poseMatched], otherwise the grey `pending` span. Pure, so the

package/src/presentation/components/icons/index.tsx

@@ -4,10 +4,18 @@ import {
   SI_FILLED_CHECK_CIRCLE,
   SI_FILLED_CLOSE_CIRCLE,
   SI_GUIDELINE_ACCESSORIES,
-  SI_GUIDELINE_DOCUMENT_GOOD,
-  SI_GUIDELINE_DOCUMENT_NOT_BLURRY,
-  SI_GUIDELINE_DOCUMENT_NOT_CROPPED,
-  SI_GUIDELINE_DOCUMENT_NOT_REFLECTIVE,
+  SI_GUIDELINE_DOCUMENT_GENERIC_GOOD,
+  SI_GUIDELINE_DOCUMENT_GENERIC_NOT_BLURRY,
+  SI_GUIDELINE_DOCUMENT_GENERIC_NOT_CROPPED,
+  SI_GUIDELINE_DOCUMENT_GENERIC_NOT_REFLECTIVE,
+  SI_GUIDELINE_DOCUMENT_GREEN_BOOK_GOOD,
+  SI_GUIDELINE_DOCUMENT_GREEN_BOOK_NOT_BLURRY,
+  SI_GUIDELINE_DOCUMENT_GREEN_BOOK_NOT_CROPPED,
+  SI_GUIDELINE_DOCUMENT_GREEN_BOOK_NOT_REFLECTIVE,
+  SI_GUIDELINE_DOCUMENT_PASSPORT_GOOD,
+  SI_GUIDELINE_DOCUMENT_PASSPORT_NOT_BLURRY,
+  SI_GUIDELINE_DOCUMENT_PASSPORT_NOT_CROPPED,
+  SI_GUIDELINE_DOCUMENT_PASSPORT_NOT_REFLECTIVE,
   SI_GUIDELINE_GOOD,
   SI_GUIDELINE_MULTIPLE_FACES,
   SI_GUIDELINE_POOR_LIGHTING,
@@ -245,23 +253,62 @@ export const SiGuidelinePoorLighting = guidelineIllustration(
   SI_GUIDELINE_POOR_LIGHTING,
 );
 
-// Document-capture guideline illustrations. All four render the shared ID-card
-// placeholder for now; per-guideline assets are pending design.
-/** "Good" document-guideline illustration (allowed). */
-export const SiGuidelineDocumentGood = guidelineIllustration(
-  SI_GUIDELINE_DOCUMENT_GOOD,
+// Document-capture guideline illustrations — self-contained card art per
+// document type (see `instruction_svg_strings`). Each renders at the asset's
+// natural viewBox; `UseSmileIDGuidelineThumbnail` sizes and frames them.
+
+// --- Generic document (landscape) ---
+/** "Good" generic-document guideline illustration (allowed). */
+export const SiGuidelineDocumentGenericGood = guidelineIllustration(
+  SI_GUIDELINE_DOCUMENT_GENERIC_GOOD,
+);
+/** "Not cropped" generic-document guideline illustration (blocked). */
+export const SiGuidelineDocumentGenericNotCropped = guidelineIllustration(
+  SI_GUIDELINE_DOCUMENT_GENERIC_NOT_CROPPED,
+);
+/** "Not blurry" generic-document guideline illustration (blocked). */
+export const SiGuidelineDocumentGenericNotBlurry = guidelineIllustration(
+  SI_GUIDELINE_DOCUMENT_GENERIC_NOT_BLURRY,
+);
+/** "Not reflective" generic-document guideline illustration (blocked). */
+export const SiGuidelineDocumentGenericNotReflective = guidelineIllustration(
+  SI_GUIDELINE_DOCUMENT_GENERIC_NOT_REFLECTIVE,
+);
+
+// --- Passport (landscape) ---
+/** "Good" passport guideline illustration (allowed). */
+export const SiGuidelineDocumentPassportGood = guidelineIllustration(
+  SI_GUIDELINE_DOCUMENT_PASSPORT_GOOD,
+);
+/** "Not cropped" passport guideline illustration (blocked). */
+export const SiGuidelineDocumentPassportNotCropped = guidelineIllustration(
+  SI_GUIDELINE_DOCUMENT_PASSPORT_NOT_CROPPED,
+);
+/** "Not blurry" passport guideline illustration (blocked). */
+export const SiGuidelineDocumentPassportNotBlurry = guidelineIllustration(
+  SI_GUIDELINE_DOCUMENT_PASSPORT_NOT_BLURRY,
+);
+/** "Not reflective" passport guideline illustration (blocked). */
+export const SiGuidelineDocumentPassportNotReflective = guidelineIllustration(
+  SI_GUIDELINE_DOCUMENT_PASSPORT_NOT_REFLECTIVE,
+);
+
+// --- South Africa green book (portrait) ---
+/** "Good" green-book guideline illustration (allowed). */
+export const SiGuidelineDocumentGreenBookGood = guidelineIllustration(
+  SI_GUIDELINE_DOCUMENT_GREEN_BOOK_GOOD,
 );
-/** "Not cropped" document-guideline illustration (blocked). */
-export const SiGuidelineDocumentNotCropped = guidelineIllustration(
-  SI_GUIDELINE_DOCUMENT_NOT_CROPPED,
+/** "Not cropped" green-book guideline illustration (blocked). */
+export const SiGuidelineDocumentGreenBookNotCropped = guidelineIllustration(
+  SI_GUIDELINE_DOCUMENT_GREEN_BOOK_NOT_CROPPED,
 );
-/** "Not blurry" document-guideline illustration (blocked). */
-export const SiGuidelineDocumentNotBlurry = guidelineIllustration(
-  SI_GUIDELINE_DOCUMENT_NOT_BLURRY,
+/** "Not blurry" green-book guideline illustration (blocked). */
+export const SiGuidelineDocumentGreenBookNotBlurry = guidelineIllustration(
+  SI_GUIDELINE_DOCUMENT_GREEN_BOOK_NOT_BLURRY,
 );
-/** "Not reflective" document-guideline illustration (blocked). */
-export const SiGuidelineDocumentNotReflective = guidelineIllustration(
-  SI_GUIDELINE_DOCUMENT_NOT_REFLECTIVE,
+/** "Not reflective" green-book guideline illustration (blocked). */
+export const SiGuidelineDocumentGreenBookNotReflective = guidelineIllustration(
+  SI_GUIDELINE_DOCUMENT_GREEN_BOOK_NOT_REFLECTIVE,
 );
 
 /** Capture-guidelines section-header glyph; tint via `color` (currentColor). */

package/src/presentation/components/use_smile_id_attribution.tsx

@@ -8,7 +8,7 @@ export type UseSmileIDAttributionProps = {
   /**
    * Force the light-tone attribution regardless of the active
    * colour scheme. Used by surfaces that always render light
-   * (capture screen overlay, processing screen card).
+   * (the capture screen overlay).
    */
   readonly forceLightMode?: boolean;
   readonly testID?: string;

package/src/presentation/components/use_smile_id_button.tsx

@@ -23,8 +23,8 @@ export type UseSmileIDButtonProps = {
  * Pill-shaped primary / secondary button (48-dp height, 32-radius
  * corners).
  *
- * Secondary variant: transparent background + 1-pt stroke in the
- * secondary colour + primary-coloured label.
+ * Secondary variant: transparent background + 2-pt stroke in the
+ * primary colour + primary-coloured label.
  */
 export function UseSmileIDButton(props: UseSmileIDButtonProps) {
   const themeFromContext = useUseSmileIDTheme();
@@ -58,8 +58,8 @@ export function UseSmileIDButton(props: UseSmileIDButtonProps) {
               ? "transparent"
               : theme.colors.primary,
           borderColor:
-            !disabled && isSecondary ? theme.colors.secondary : "transparent",
-          borderWidth: !disabled && isSecondary ? 1 : 0,
+            !disabled && isSecondary ? theme.colors.primary : "transparent",
+          borderWidth: !disabled && isSecondary ? 2 : 0,
           opacity: disabled ? 1 : pressed ? 0.85 : 1,
         },
       ]}

package/src/presentation/components/use_smile_id_capture_content.tsx

@@ -9,6 +9,7 @@ import {
 import { SafeAreaView } from "react-native-safe-area-context";
 import type { ScanHeadTurnDirection } from "@smileid/usesmileid_bridge";
 import { CaptureType } from "../../core/models/ml_config";
+import type { DocumentType } from "../../core/models/document_type";
 import { defaultLightTheme, type UseSmileIDTheme } from "../theme/theme";
 import { useUseSmileIDTheme } from "../theme/theme_context";
 import {
@@ -45,6 +46,10 @@ export type UseSmileIDCaptureContentState = {
   /** Show the Start Capture control (pre-flight instruction state only). */
   readonly showCaptureButton: boolean;
   readonly knownIdAspectRatio?: number;
+  /** Document type — selects the in-frame shimmer skeleton. Ignored for selfie. */
+  readonly documentTypeKind?: DocumentType["kind"];
+  /** Active side is the back — swaps the generic shimmer front→back. Ignored for selfie. */
+  readonly isBackSide?: boolean;
   /** Document manual shutter availability (capture-mode + fallback-timer driven). Ignored for selfie. */
   readonly showManualShutter?: boolean;
   /** Document gallery-upload availability (`allowGalleryUpload`). Ignored for selfie. */
@@ -72,6 +77,13 @@ export type UseSmileIDCaptureContentProps = {
   readonly onGalleryUpload?: (() => void) | undefined;
   /** Disables document controls while a manual/gallery delivery is in flight. */
   readonly documentControlsEnabled?: boolean | undefined;
+  /**
+   * Reports the camera-viewport (canvas) size on layout so the screen can
+   * derive the document crop region from the same geometry the overlay draws.
+   */
+  readonly onViewportLayout?:
+    | ((size: { width: number; height: number }) => void)
+    | undefined;
   readonly theme?: UseSmileIDTheme | undefined;
 };
 
@@ -96,9 +108,14 @@ function UseSmileIDCaptureContentInner(props: UseSmileIDCaptureContentProps) {
         ? previous
         : { width, height },
     );
+    // Surface the viewport size; the screen dedupes no-change passes.
+    props.onViewportLayout?.({ width, height });
   };
 
   const isSelfie = state.captureType === CaptureType.selfie;
+  // Landscape document moves the close ✕ into the control lane; portrait /
+  // selfie keep it in the top bar. False until the canvas is measured.
+  const isLandscapeDocument = !isSelfie && canvas.width > canvas.height;
   const feedback = state.feedbackKey
     ? resolveFeedbackCopy(state.feedbackKey, loc)
     : null;
@@ -129,6 +146,10 @@ function UseSmileIDCaptureContentInner(props: UseSmileIDCaptureContentProps) {
               containerWidth={canvas.width}
               containerHeight={canvas.height}
               theme={theme}
+              isBackSide={state.isBackSide ?? false}
+              {...(state.documentTypeKind !== undefined
+                ? { documentTypeKind: state.documentTypeKind }
+                : {})}
               {...(state.knownIdAspectRatio !== undefined
                 ? { knownIdAspectRatio: state.knownIdAspectRatio }
                 : {})}
@@ -159,11 +180,11 @@ function UseSmileIDCaptureContentInner(props: UseSmileIDCaptureContentProps) {
               />
             ) : null
           ) : null}
-          {/* Document control slot: shutter + gallery while positioning;
-              progress spinner once capture commits (they never coexist). */}
+          {/* Document control slot: shutter + gallery while positioning (plus the
+              close ✕ in landscape). The capture-progress spinner renders in the
+              overlay only while capturing, so it never coexists with these controls. */}
           {!isSelfie ? (
             <UseSmileIDDocumentCaptureControls
-              capturing={isDocumentCaptureActive(state.overlayState)}
               showManualShutter={
                 (state.showManualShutter ?? false) &&
                 props.onManualShutter !== undefined &&
@@ -180,14 +201,17 @@ function UseSmileIDCaptureContentInner(props: UseSmileIDCaptureContentProps) {
               onGallery={props.onGalleryUpload ?? noop}
               shutterAccessibilityLabel={loc.siCdDocumentCaptureShutter}
               galleryAccessibilityLabel={loc.siCdDocumentGallery}
+              closeAccessibilityLabel={loc.siCdClose}
+              onClose={props.onClose}
             />
           ) : null}
         </>
       ) : null}
 
-      {/* Camera stays full-bleed; only the control layers inset from the system bars. */}
+      {/* Control layers inset from the system bars (camera stays full-bleed);
+          both horizontal edges so landscape keeps chrome clear of the notch. */}
       <SafeAreaView
-        edges={["top"]}
+        edges={["top", "left", "right"]}
         style={[
           styles.topBar,
           {
@@ -207,8 +231,9 @@ function UseSmileIDCaptureContentInner(props: UseSmileIDCaptureContentProps) {
         ) : (
           <View style={styles.chromeSpacer} />
         )}
-        {/* Close/cancel (document chrome) — top-right, mirrors the back button. */}
-        {props.onClose ? (
+        {/* Close/cancel (document chrome) — top-right in portrait / selfie; in
+            landscape document capture the ✕ moves into the control lane. */}
+        {props.onClose && !isLandscapeDocument ? (
           <Pressable
             onPress={props.onClose}
             accessibilityRole="button"
@@ -247,10 +272,9 @@ function UseSmileIDCaptureContentInner(props: UseSmileIDCaptureContentProps) {
           <Text
             style={{
               ...theme.typography.cardTitle,
-              // Light-palette forced: overlay is locked to light mode (selfie navy-on-white).
-              color: isSelfie
-                ? defaultLightTheme.colors.primary
-                : defaultLightTheme.colors.captureFeedbackText,
+              // The capture screen supplies the light-resolved partner theme, so
+              // this stays light-on-light while honouring a partner `primary`.
+              color: theme.colors.primary,
               textAlign: "center",
             }}
             testID="si_capture_feedback_text"
@@ -261,7 +285,7 @@ function UseSmileIDCaptureContentInner(props: UseSmileIDCaptureContentProps) {
       ) : null}
 
       <SafeAreaView
-        edges={["bottom"]}
+        edges={["bottom", "left", "right"]}
         style={[
           styles.bottom,
           {

package/src/presentation/components/use_smile_id_captured_document_image.tsx

@@ -1,17 +1,13 @@
 import type { ReactNode } from "react";
 import { Image, StyleSheet, View } from "react-native";
-import {
-  defaultFrameAspectRatio,
-  type DocumentOrientation,
-} from "../../core/models/document_type";
 import type { UseSmileIDTheme } from "../theme/theme";
 import { useUseSmileIDTheme } from "../theme/theme_context";
 
 export type UseSmileIDCapturedDocumentImageProps = {
   /** Local file URI (`file:///…`) of the captured document side. */
   readonly uri?: string;
-  /** Drives the frame aspect: landscape fills width, portrait fills height. */
-  readonly orientation: DocumentOrientation;
+  /** Capture-frame aspect ratio (width / height): ≥1 fills width (landscape), <1 fills height (portrait). */
+  readonly aspectRatio: number;
   /** Content centered over the document rect — e.g. the processing-screen status badge. */
   readonly overlayChild?: ReactNode;
   /** Accessible name for the image; when unset the image stays decorative. */
@@ -33,8 +29,7 @@ export function UseSmileIDCapturedDocumentImage(
 ) {
   const themeFromContext = useUseSmileIDTheme();
   const theme = props.theme ?? themeFromContext;
-  const aspectRatio = defaultFrameAspectRatio(props.orientation);
-  // Landscape (aspect ≥ 1) is width-bound; portrait is height-bound.
+  const aspectRatio = props.aspectRatio;
   const fill = aspectRatio >= 1 ? styles.fillWidth : styles.fillHeight;
 
   return (