@umituz/react-native-ai-generation-content 1.27.25 → 1.27.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-generation-content",
-  "version": "1.27.25",
+  "version": "1.27.27",
   "description": "Provider-agnostic AI generation orchestration for React Native with result preview components",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/domains/generation/wizard/infrastructure/strategies/image-generation.strategy.ts

@@ -16,6 +16,7 @@ import {
 } from "./wizard-strategy.constants";
 import { buildFacePreservationPrompt } from "../../../../prompts/infrastructure/builders/face-preservation-builder";
 import { buildInteractionStylePrompt, type InteractionStyle } from "../../../../prompts/infrastructure/builders/interaction-style-builder";
+import { extractPrompt, extractSelection } from "../utils";
 
 declare const __DEV__: boolean;
 
@@ -165,9 +166,8 @@ export async function buildImageInput(
 ): Promise<ImageGenerationInput | null> {
   const photos = await extractPhotosFromWizardData(wizardData);
 
-  // Get prompt from wizardData (text_input step) OR scenario.aiPrompt
-  const userPrompt = wizardData.prompt as string | undefined;
-  const prompt = userPrompt?.trim() || scenario.aiPrompt?.trim();
+  // Extract prompt using type-safe extractor with fallback
+  const prompt = extractPrompt(wizardData, scenario.aiPrompt);
 
   if (!prompt) {
     throw new Error("Prompt is required for image generation");
@@ -178,18 +178,19 @@ export async function buildImageInput(
   if (photos.length > 0) {
     const styleEnhancements: string[] = [];
 
-    const romanticMoods = wizardData.selection_romantic_mood as string[] | undefined;
-    if (romanticMoods?.length) {
+    // Extract selections using type-safe extractor
+    const romanticMoods = extractSelection(wizardData.selection_romantic_mood);
+    if (Array.isArray(romanticMoods) && romanticMoods.length > 0) {
       styleEnhancements.push(`Mood: ${romanticMoods.join(", ")}`);
     }
 
-    const artStyle = wizardData.selection_art_style as string | undefined;
-    if (artStyle && artStyle !== DEFAULT_STYLE_VALUE) {
+    const artStyle = extractSelection(wizardData.selection_art_style);
+    if (typeof artStyle === "string" && artStyle !== DEFAULT_STYLE_VALUE) {
       styleEnhancements.push(`Art style: ${artStyle}`);
     }
 
-    const artist = wizardData.selection_artist_style as string | undefined;
-    if (artist && artist !== DEFAULT_STYLE_VALUE) {
+    const artist = extractSelection(wizardData.selection_artist_style);
+    if (typeof artist === "string" && artist !== DEFAULT_STYLE_VALUE) {
       styleEnhancements.push(`Artist style: ${artist}`);
     }
 
@@ -198,8 +199,9 @@ export async function buildImageInput(
     }
   }
 
-  // Get style from wizard selection (for text-to-image)
-  const style = wizardData.style as string | undefined;
+  // Extract style using type-safe extractor (for text-to-image)
+  const styleValue = extractSelection(wizardData.style);
+  const style = typeof styleValue === "string" ? styleValue : undefined;
 
   // Get interaction style from scenario (default: romantic for couple apps)
   const interactionStyle = (scenario.interactionStyle as InteractionStyle) ?? "romantic";

package/src/domains/generation/wizard/infrastructure/strategies/video-generation.strategy.ts

@@ -10,6 +10,7 @@ import { createCreationsRepository } from "../../../../creations/infrastructure/
 import type { WizardScenarioData } from "../../presentation/hooks/useWizardGeneration";
 import type { WizardStrategy } from "./wizard-strategy.types";
 import { PHOTO_KEY_PREFIX, VIDEO_FEATURE_PATTERNS } from "./wizard-strategy.constants";
+import { extractPrompt, extractDuration } from "../utils";
 
 // ============================================================================
 // Types
@@ -86,17 +87,15 @@ export async function buildVideoInput(
 ): Promise<VideoGenerationInput | null> {
   const photos = await extractPhotosFromWizardData(wizardData);
 
-  // Get prompt from wizardData or scenario
-  const userPrompt = wizardData.prompt as string | undefined;
-  const motionPrompt = wizardData.motion_prompt as string | undefined;
-  const prompt = userPrompt?.trim() || motionPrompt?.trim() || scenario.aiPrompt?.trim();
+  // Extract prompt using type-safe extractor with fallback
+  const prompt = extractPrompt(wizardData, scenario.aiPrompt);
 
   if (!prompt) {
     throw new Error("Prompt is required for video generation");
   }
 
-  // Get duration from wizardData
-  const duration = wizardData.duration as number | undefined;
+  // Extract duration using type-safe extractor (default: 5 seconds)
+  const duration = extractDuration(wizardData, 5);
 
   return {
     sourceImageBase64: photos[0],

package/src/domains/generation/wizard/infrastructure/utils/index.ts

@@ -0,0 +1,8 @@
+export {
+  extractString,
+  extractTrimmedString,
+  extractNumber,
+  extractSelection,
+  extractPrompt,
+  extractDuration,
+} from "./wizard-data-extractors";

package/src/domains/generation/wizard/infrastructure/utils/wizard-data-extractors.ts

@@ -0,0 +1,198 @@
+/**
+ * Wizard Data Extractors
+ * Type-safe utilities for extracting values from wizard data
+ *
+ * Pattern: Type Guards + Normalizers
+ * @see https://www.typescriptlang.org/docs/handbook/2/narrowing.html
+ * @see https://betterstack.com/community/guides/scaling-nodejs/typescript-type-guards/
+ */
+
+// ============================================================================
+// Type Guards
+// ============================================================================
+
+/**
+ * Check if value is a non-null object
+ */
+function isObject(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+/**
+ * Check if object has a specific property
+ * Uses 'in' operator for safe property checking
+ */
+function hasProperty<K extends string>(
+  obj: Record<string, unknown>,
+  key: K,
+): obj is Record<K, unknown> {
+  return key in obj;
+}
+
+// ============================================================================
+// String Extractors
+// ============================================================================
+
+/**
+ * Extracts string from various input formats:
+ * - Direct string: "my text"
+ * - Object with text field: { text: "my text" }
+ * - Object with uri field (fallback): { uri: "my text" }
+ *
+ * @param value - The value to extract string from
+ * @returns The extracted string or undefined
+ */
+export function extractString(value: unknown): string | undefined {
+  // Direct string
+  if (typeof value === "string") {
+    return value;
+  }
+
+  // Object with text or uri field
+  if (isObject(value)) {
+    if (hasProperty(value, "text") && typeof value.text === "string") {
+      return value.text;
+    }
+    if (hasProperty(value, "uri") && typeof value.uri === "string") {
+      return value.uri;
+    }
+  }
+
+  return undefined;
+}
+
+/**
+ * Extracts and trims string, returning undefined if empty
+ */
+export function extractTrimmedString(value: unknown): string | undefined {
+  const str = extractString(value);
+  const trimmed = str?.trim();
+  return trimmed && trimmed.length > 0 ? trimmed : undefined;
+}
+
+// ============================================================================
+// Number Extractors
+// ============================================================================
+
+/**
+ * Extracts number from various input formats:
+ * - Direct number: 5
+ * - Object with value field: { value: 5 }
+ * - Object with selection field: { selection: 5 }
+ *
+ * @param value - The value to extract number from
+ * @returns The extracted number or undefined
+ */
+export function extractNumber(value: unknown): number | undefined {
+  // Direct number
+  if (typeof value === "number" && !Number.isNaN(value)) {
+    return value;
+  }
+
+  // Object with value or selection field
+  if (isObject(value)) {
+    if (hasProperty(value, "value") && typeof value.value === "number") {
+      return value.value;
+    }
+    if (hasProperty(value, "selection") && typeof value.selection === "number") {
+      return value.selection;
+    }
+  }
+
+  return undefined;
+}
+
+// ============================================================================
+// Selection Extractors
+// ============================================================================
+
+/**
+ * Extracts selection value (string or string array) from wizard data
+ *
+ * @param value - The value to extract selection from
+ * @returns The extracted selection or undefined
+ */
+export function extractSelection(value: unknown): string | string[] | undefined {
+  // Direct string
+  if (typeof value === "string") {
+    return value;
+  }
+
+  // Direct string array
+  if (Array.isArray(value) && value.every((v) => typeof v === "string")) {
+    return value as string[];
+  }
+
+  // Object with selection field
+  if (isObject(value)) {
+    if (hasProperty(value, "selection")) {
+      const selection = value.selection;
+      if (typeof selection === "string") {
+        return selection;
+      }
+      if (Array.isArray(selection) && selection.every((v) => typeof v === "string")) {
+        return selection as string[];
+      }
+    }
+  }
+
+  return undefined;
+}
+
+// ============================================================================
+// Prompt Extractor (Specialized)
+// ============================================================================
+
+/**
+ * Extracts prompt from wizard data with fallback chain
+ * Checks multiple keys in order: prompt, motion_prompt, text
+ *
+ * @param wizardData - The wizard data object
+ * @param fallback - Optional fallback value (e.g., scenario.aiPrompt)
+ * @returns The extracted and trimmed prompt or undefined
+ */
+export function extractPrompt(
+  wizardData: Record<string, unknown>,
+  fallback?: string,
+): string | undefined {
+  // Priority chain for prompt keys
+  const promptKeys = ["prompt", "motion_prompt", "text", "userPrompt"];
+
+  for (const key of promptKeys) {
+    if (key in wizardData) {
+      const extracted = extractTrimmedString(wizardData[key]);
+      if (extracted) {
+        return extracted;
+      }
+    }
+  }
+
+  // Use fallback if provided
+  return fallback?.trim() || undefined;
+}
+
+// ============================================================================
+// Duration Extractor (Specialized)
+// ============================================================================
+
+/**
+ * Extracts duration from wizard data
+ * Handles both direct number and object with value field
+ *
+ * @param wizardData - The wizard data object
+ * @param defaultValue - Default duration if not found
+ * @returns The extracted duration in seconds
+ */
+export function extractDuration(
+  wizardData: Record<string, unknown>,
+  defaultValue = 5,
+): number {
+  const durationData = wizardData.duration;
+
+  const extracted = extractNumber(durationData);
+  if (extracted !== undefined && extracted > 0) {
+    return extracted;
+  }
+
+  return defaultValue;
+}

package/src/domains/generation/wizard/presentation/screens/SelectionScreen.tsx

@@ -1,17 +1,19 @@
 /**
  * SelectionScreen
  * Generic selection step for wizard flows (duration, style, etc.)
+ * Uses design system: NavigationHeader + ScreenLayout
  */
 
-import React, { useState, useCallback } from "react";
-import { View, ScrollView, TouchableOpacity } from "react-native";
+import React, { useState, useCallback, useMemo } from "react";
+import { View, TouchableOpacity, StyleSheet } from "react-native";
 import {
   AtomicText,
-  AtomicButton,
   AtomicIcon,
   useAppDesignTokens,
+  ScreenLayout,
+  NavigationHeader,
+  type DesignTokens,
 } from "@umituz/react-native-design-system";
-import { styles } from "./SelectionScreen.styles";
 import type { SelectionScreenProps } from "./SelectionScreen.types";
 
 export type {
@@ -78,28 +80,55 @@ export const SelectionScreen: React.FC<SelectionScreenProps> = ({
     [isMultiSelect, selected],
   );
 
-  return (
-    <View style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}>
-      <View style={[styles.header, { paddingHorizontal: tokens.spacing.md }]}>
-        <AtomicButton variant="text" size="sm" onPress={onBack}>
-          <View style={styles.backButtonContent}>
-            <AtomicIcon name="arrow-back" size="sm" color="textPrimary" />
-            {translations.backButton ? (
-              <AtomicText type="labelMedium" color="textPrimary" style={styles.backButtonText}>
-                {translations.backButton}
-              </AtomicText>
-            ) : null}
-          </View>
-        </AtomicButton>
-      </View>
+  const styles = useMemo(() => createStyles(tokens), [tokens]);
 
-      <ScrollView style={styles.scrollView} contentContainerStyle={{ padding: tokens.spacing.md }}>
+  return (
+    <View style={{ flex: 1, backgroundColor: tokens.colors.backgroundPrimary }}>
+      <NavigationHeader
+        title=""
+        onBackPress={onBack}
+        rightElement={
+          <TouchableOpacity
+            onPress={handleContinue}
+            activeOpacity={0.7}
+            disabled={!canContinue}
+            style={[
+              styles.continueButton,
+              {
+                backgroundColor: canContinue ? tokens.colors.primary : tokens.colors.surfaceVariant,
+                opacity: canContinue ? 1 : 0.5,
+              },
+            ]}
+          >
+            <AtomicText
+              type="bodyMedium"
+              style={[
+                styles.continueText,
+                { color: canContinue ? tokens.colors.onPrimary : tokens.colors.textSecondary },
+              ]}
+            >
+              {translations.continueButton}
+            </AtomicText>
+            <AtomicIcon
+              name="arrow-forward"
+              size="sm"
+              color={canContinue ? "onPrimary" : "textSecondary"}
+            />
+          </TouchableOpacity>
+        }
+      />
+      <ScreenLayout
+        scrollable={true}
+        edges={["left", "right"]}
+        hideScrollIndicator={true}
+        contentContainerStyle={styles.scrollContent}
+      >
         <AtomicText type="headlineMedium" color="textPrimary" style={styles.title}>
           {translations.title}
         </AtomicText>
 
         {translations.subtitle ? (
-          <AtomicText type="bodyMedium" color="textSecondary" style={{ marginBottom: tokens.spacing.lg }}>
+          <AtomicText type="bodyMedium" color="textSecondary" style={styles.subtitle}>
             {translations.subtitle}
           </AtomicText>
         ) : null}
@@ -115,7 +144,6 @@ export const SelectionScreen: React.FC<SelectionScreenProps> = ({
                   {
                     backgroundColor: isSelected ? tokens.colors.primaryContainer : tokens.colors.backgroundSecondary,
                     borderColor: isSelected ? tokens.colors.primary : tokens.colors.border,
-                    borderRadius: tokens.borders.radius.md,
                   },
                 ]}
                 onPress={() => handleSelect(option.id)}
@@ -136,13 +164,61 @@ export const SelectionScreen: React.FC<SelectionScreenProps> = ({
             );
           })}
         </View>
-      </ScrollView>
-
-      <View style={[styles.footer, { padding: tokens.spacing.md }]}>
-        <AtomicButton variant="primary" size="lg" onPress={handleContinue} disabled={!canContinue} style={styles.continueButton}>
-          {translations.continueButton}
-        </AtomicButton>
-      </View>
+      </ScreenLayout>
     </View>
   );
 };
+
+const createStyles = (tokens: DesignTokens) =>
+  StyleSheet.create({
+    scrollContent: {
+      paddingHorizontal: tokens.spacing.lg,
+      paddingBottom: 40,
+    },
+    title: {
+      marginBottom: tokens.spacing.sm,
+    },
+    subtitle: {
+      marginBottom: tokens.spacing.lg,
+    },
+    optionsGrid: {
+      flexDirection: "row",
+      flexWrap: "wrap",
+      gap: tokens.spacing.sm,
+    },
+    optionCard: {
+      flex: 1,
+      minWidth: "45%",
+      padding: tokens.spacing.md,
+      borderWidth: 2,
+      borderRadius: tokens.borders.radius.md,
+      alignItems: "center",
+      justifyContent: "center",
+      gap: tokens.spacing.xs,
+      position: "relative",
+    },
+    optionLabel: {
+      textAlign: "center",
+    },
+    checkmark: {
+      position: "absolute",
+      top: tokens.spacing.xs,
+      right: tokens.spacing.xs,
+      width: 20,
+      height: 20,
+      borderRadius: 10,
+      alignItems: "center",
+      justifyContent: "center",
+    },
+    continueButton: {
+      flexDirection: "row",
+      alignItems: "center",
+      paddingHorizontal: tokens.spacing.md,
+      paddingVertical: tokens.spacing.xs,
+      borderRadius: tokens.borders.radius.full,
+    },
+    continueText: {
+      fontWeight: "800",
+      marginRight: 4,
+    },
+  });

package/src/domains/generation/wizard/presentation/screens/TextInputScreen.tsx

@@ -1,16 +1,19 @@
 /**
  * TextInputScreen
  * Generic text input step for wizard flows
- * Header: Back on left, Continue on right
+ * Uses design system: NavigationHeader + ScreenLayout
  */
 
-import React, { useState, useCallback } from "react";
-import { View, ScrollView, TextInput, TouchableOpacity, StyleSheet } from "react-native";
+import React, { useState, useCallback, useMemo } from "react";
+import { View, TextInput, TouchableOpacity, StyleSheet } from "react-native";
 import {
   AtomicText,
   AtomicButton,
   AtomicIcon,
   useAppDesignTokens,
+  ScreenLayout,
+  NavigationHeader,
+  type DesignTokens,
 } from "@umituz/react-native-design-system";
 import type { TextInputScreenProps } from "./TextInputScreen.types";
 
@@ -46,64 +49,63 @@ export const TextInputScreen: React.FC<TextInputScreenProps> = ({
     setText(example);
   }, []);
 
-  return (
-    <View style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}>
-      {/* Header with Back on left, Continue on right */}
-      <View style={[styles.header, { paddingHorizontal: tokens.spacing.md }]}>
-        <TouchableOpacity onPress={onBack} style={styles.backButton}>
-          <AtomicIcon name="chevron-left" size="md" color="textPrimary" />
-        </TouchableOpacity>
+  const styles = useMemo(() => createStyles(tokens), [tokens]);
 
-        <TouchableOpacity
-          onPress={handleContinue}
-          disabled={!canContinue}
-          style={[
-            styles.continueButton,
-            {
-              backgroundColor: canContinue ? tokens.colors.primary : tokens.colors.surfaceSecondary,
-              borderRadius: tokens.radius.md,
-            },
-          ]}
-        >
-          <AtomicText
-            type="labelLarge"
-            style={{
-              color: canContinue ? tokens.colors.textInverse : tokens.colors.textSecondary,
-              fontWeight: "600",
-            }}
+  return (
+    <View style={{ flex: 1, backgroundColor: tokens.colors.backgroundPrimary }}>
+      <NavigationHeader
+        title=""
+        onBackPress={onBack}
+        rightElement={
+          <TouchableOpacity
+            onPress={handleContinue}
+            activeOpacity={0.7}
+            disabled={!canContinue}
+            style={[
+              styles.continueButton,
+              {
+                backgroundColor: canContinue ? tokens.colors.primary : tokens.colors.surfaceVariant,
+                opacity: canContinue ? 1 : 0.5,
+              },
+            ]}
           >
-            {translations.continueButton}
-          </AtomicText>
-        </TouchableOpacity>
-      </View>
-
-      <ScrollView
-        style={styles.scrollView}
-        contentContainerStyle={{ padding: tokens.spacing.md }}
-        keyboardShouldPersistTaps="handled"
+            <AtomicText
+              type="bodyMedium"
+              style={[
+                styles.continueText,
+                { color: canContinue ? tokens.colors.onPrimary : tokens.colors.textSecondary },
+              ]}
+            >
+              {translations.continueButton}
+            </AtomicText>
+            <AtomicIcon
+              name="arrow-forward"
+              size="sm"
+              color={canContinue ? "onPrimary" : "textSecondary"}
+            />
+          </TouchableOpacity>
+        }
+      />
+      <ScreenLayout
+        scrollable={true}
+        edges={["left", "right"]}
+        hideScrollIndicator={true}
+        keyboardAvoiding={true}
+        contentContainerStyle={styles.scrollContent}
       >
         <AtomicText type="headlineMedium" color="textPrimary" style={styles.title}>
           {translations.title}
         </AtomicText>
 
         {translations.subtitle ? (
-          <AtomicText type="bodyMedium" color="textSecondary" style={{ marginBottom: tokens.spacing.lg }}>
+          <AtomicText type="bodyMedium" color="textSecondary" style={styles.subtitle}>
             {translations.subtitle}
           </AtomicText>
         ) : null}
 
-        <View
-          style={[
-            styles.inputContainer,
-            {
-              backgroundColor: tokens.colors.backgroundSecondary,
-              borderRadius: tokens.borders.radius.md,
-              borderColor: tokens.colors.border,
-            },
-          ]}
-        >
+        <View style={styles.inputContainer}>
           <TextInput
-            style={[styles.textInput, { color: tokens.colors.textPrimary, minHeight: config?.multiline ? 120 : 48 }]}
+            style={[styles.textInput, { minHeight: config?.multiline ? 120 : 48 }]}
             placeholder={translations.placeholder}
             placeholderTextColor={tokens.colors.textTertiary}
             value={text}
@@ -118,8 +120,8 @@ export const TextInputScreen: React.FC<TextInputScreenProps> = ({
         </View>
 
         {examplePrompts.length > 0 && translations.examplesTitle ? (
-          <View style={{ marginTop: tokens.spacing.lg }}>
-            <AtomicText type="labelLarge" color="textSecondary" style={{ marginBottom: tokens.spacing.sm }}>
+          <View style={styles.examplesSection}>
+            <AtomicText type="labelLarge" color="textSecondary" style={styles.examplesTitle}>
               {translations.examplesTitle}
             </AtomicText>
             {examplePrompts.slice(0, 4).map((example, index) => (
@@ -128,53 +130,64 @@ export const TextInputScreen: React.FC<TextInputScreenProps> = ({
                 variant="outline"
                 size="sm"
                 onPress={() => handleExampleSelect(example)}
-                style={{ marginBottom: tokens.spacing.xs }}
+                style={styles.exampleButton}
               >
                 {example.length > 50 ? `${example.slice(0, 50)}...` : example}
               </AtomicButton>
             ))}
           </View>
         ) : null}
-      </ScrollView>
+      </ScreenLayout>
     </View>
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  header: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-    paddingVertical: 12,
-  },
-  backButton: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 4,
-  },
-  continueButton: {
-    paddingHorizontal: 16,
-    paddingVertical: 8,
-  },
-  scrollView: {
-    flex: 1,
-  },
-  title: {
-    marginBottom: 8,
-  },
-  inputContainer: {
-    borderWidth: 1,
-    padding: 12,
-  },
-  textInput: {
-    fontSize: 16,
-    lineHeight: 22,
-  },
-  charCount: {
-    textAlign: "right",
-    marginTop: 8,
-  },
-});
+const createStyles = (tokens: DesignTokens) =>
+  StyleSheet.create({
+    scrollContent: {
+      paddingHorizontal: tokens.spacing.lg,
+      paddingBottom: 40,
+    },
+    title: {
+      marginBottom: tokens.spacing.sm,
+    },
+    subtitle: {
+      marginBottom: tokens.spacing.lg,
+    },
+    inputContainer: {
+      backgroundColor: tokens.colors.backgroundSecondary,
+      borderRadius: tokens.borders.radius.md,
+      borderWidth: 1,
+      borderColor: tokens.colors.border,
+      padding: tokens.spacing.md,
+    },
+    textInput: {
+      fontSize: 16,
+      lineHeight: 22,
+      color: tokens.colors.textPrimary,
+    },
+    charCount: {
+      textAlign: "right",
+      marginTop: tokens.spacing.sm,
+    },
+    examplesSection: {
+      marginTop: tokens.spacing.lg,
+    },
+    examplesTitle: {
+      marginBottom: tokens.spacing.sm,
+    },
+    exampleButton: {
+      marginBottom: tokens.spacing.xs,
+    },
+    continueButton: {
+      flexDirection: "row",
+      alignItems: "center",
+      paddingHorizontal: tokens.spacing.md,
+      paddingVertical: tokens.spacing.xs,
+      borderRadius: tokens.borders.radius.full,
+    },
+    continueText: {
+      fontWeight: "800",
+      marginRight: 4,
+    },
+  });

package/src/domains/generation/wizard/presentation/screens/SelectionScreen.styles.ts

@@ -1,63 +0,0 @@
-/**
- * SelectionScreen Styles
- */
-
-import { StyleSheet } from "react-native";
-
-export const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  header: {
-    flexDirection: "row",
-    alignItems: "center",
-    paddingVertical: 8,
-  },
-  backButtonContent: {
-    flexDirection: "row",
-    alignItems: "center",
-  },
-  backButtonText: {
-    marginLeft: 4,
-  },
-  scrollView: {
-    flex: 1,
-  },
-  title: {
-    marginBottom: 8,
-  },
-  optionsGrid: {
-    flexDirection: "row",
-    flexWrap: "wrap",
-    gap: 12,
-  },
-  optionCard: {
-    flex: 1,
-    minWidth: "45%",
-    padding: 16,
-    borderWidth: 2,
-    alignItems: "center",
-    position: "relative",
-  },
-  optionLabel: {
-    marginTop: 8,
-    textAlign: "center",
-  },
-  checkmark: {
-    position: "absolute",
-    top: 8,
-    right: 8,
-    width: 20,
-    height: 20,
-    borderRadius: 10,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  footer: {
-    borderTopWidth: 1,
-    borderTopColor: "rgba(0,0,0,0.1)",
-  },
-  continueButton: {
-    width: "100%",
-  },
-});