@dloizides/auth-web 1.2.2 → 1.4.0

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { createContext, useState, useRef, useEffect, useCallback, useMemo, useContext } from 'react';
-import { View, Text, TextInput, TouchableOpacity, ActivityIndicator, StyleSheet } from 'react-native';
+import { StyleSheet, View, Text, TextInput, TouchableOpacity, ActivityIndicator, Pressable } from 'react-native';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useMutation } from '@tanstack/react-query';
 import { BffAuthClient, createFetchHttpClient } from '@dloizides/auth-client';
@@ -33,6 +33,11 @@ var DEFAULT_FORGOT_PASSWORD_LABELS = {
   networkError: "Something went wrong. Please try again.",
   invalidEmail: "Enter a valid email address."
 };
+var DEFAULT_FORGOT_PASSWORD_FIELDS_LABELS = {
+  ...DEFAULT_FORGOT_PASSWORD_LABELS,
+  cancel: "Cancel",
+  close: "Close"
+};
 var DEFAULT_OTP_LABELS = {
   requestTitle: "Sign in with a code",
   requestDescription: "Enter your email and we will send you a one-time code.",
@@ -63,6 +68,77 @@ var DEFAULT_PIN_LABELS = {
   missingPin: "Enter your event PIN.",
   invalidPin: "That PIN is incorrect, has expired, or is locked out."
 };
+var DEFAULT_DEVICE_PIN_UNLOCK_LABELS = {
+  title: "Welcome back, {name}",
+  titleNoName: "Welcome back",
+  description: "Enter your {count}-digit PIN to sign in on this device.",
+  pinLabel: "PIN",
+  pinPlaceholder: "Enter your PIN",
+  submit: "Unlock",
+  submitting: "Signing in...",
+  usePasswordInstead: "Sign in with password instead",
+  usePasswordHint: "Switch to signing in with your username and password",
+  errorIncomplete: "Enter all {count} digits of your PIN.",
+  errorInvalid: "That PIN is incorrect. Try again.",
+  errorLockedOut: "Too many attempts. Try again later.",
+  errorLockedOutRetry: "Too many attempts. Try again in {count} seconds.",
+  errorRateLimited: "Too many requests. Try again later.",
+  errorRateLimitedRetry: "Too many requests. Try again in {count} seconds.",
+  errorGeneric: "Something went wrong. Try again, or sign in with your password.",
+  digitFilledHint: "PIN digit entered",
+  digitEmptyHint: "PIN digit not yet entered"
+};
+var DEFAULT_DEVICE_PIN_ENROLL_LABELS = {
+  offerTitle: "Set a PIN for faster sign-in?",
+  offerDescription: "Next time, sign in on this device with a short PIN instead of your full password.",
+  offerAccept: "Set up a PIN",
+  offerAcceptHint: "Open the form to choose a quick sign-in PIN",
+  offerSkip: "Not now",
+  offerSkipHint: "Dismiss the PIN setup offer",
+  formTitle: "Choose your PIN",
+  formDescription: "Pick a {count}-digit PIN you will remember. You will use it to sign in on this device.",
+  lengthLabel: "PIN length",
+  lengthOptionHint: "Use a {count}-digit PIN",
+  pinLabel: "New PIN",
+  pinPlaceholder: "Enter a new PIN",
+  confirmLabel: "Confirm PIN",
+  confirmPlaceholder: "Re-enter your PIN",
+  submit: "Save PIN",
+  submitting: "Saving...",
+  cancel: "Cancel",
+  cancelHint: "Close the PIN setup form without saving",
+  errorMismatch: "The PINs must match and be exactly {count} digits.",
+  errorUnauthorized: "Your session has expired. Sign in again to set a PIN.",
+  errorForbidden: "A PIN is already set for this session.",
+  errorInvalidPin: "That PIN is not allowed. Choose a different one.",
+  errorFailed: "Could not set your PIN. Try again later."
+};
+var DEFAULT_DEVICE_PIN_SETTINGS_LABELS = {
+  title: "Quick PIN sign-in",
+  description: "Sign in on this device with a short PIN instead of your full password.",
+  statusEnabled: "Quick PIN sign-in is enabled on this device.",
+  statusDisabled: "Quick PIN sign-in is off.",
+  enable: "Enable quick PIN sign-in",
+  enableHint: "Set a PIN so you can sign in faster on this device",
+  disable: "Disable",
+  disableHint: "Remove the PIN sign-in from this device",
+  disabling: "Disabling...",
+  disableFailed: "Could not disable PIN sign-in. Try again later."
+};
+var DEFAULT_PASSKEY_LOGIN_LABELS = {
+  signInButton: "Sign in with a passkey",
+  signInHint: "Use your fingerprint, face, or security key to sign in",
+  errorCancelled: "Passkey sign-in was cancelled. You can try again or sign in another way.",
+  errorFailed: "Passkey sign-in didn't work. Try again, or sign in another way."
+};
+var DEFAULT_PASSKEY_SETTINGS_LABELS = {
+  title: "Passkeys",
+  description: "Add a passkey to sign in with your fingerprint, face, or a security key instead of a password.",
+  reauthHint: "You'll be asked to confirm your password before adding a passkey.",
+  addButton: "Add a passkey",
+  addHint: "Start setting up a passkey for this account",
+  registeredSuccess: "Your passkey was added. You can now use it to sign in."
+};
 var DEFAULT_RESET_PASSWORD_LABELS = {
   title: "Reset password",
   description: "Choose a new password for your account.",
@@ -91,6 +167,8 @@ var AuthTestIds = {
   forgotPasswordForm: "auth-forgot-form",
   forgotPasswordEmailInput: "auth-forgot-email",
   forgotPasswordSubmitButton: "auth-forgot-submit",
+  forgotPasswordCancelButton: "auth-forgot-cancel",
+  forgotPasswordCloseButton: "auth-forgot-close",
   forgotPasswordError: "auth-forgot-error",
   forgotPasswordSuccess: "auth-forgot-success",
   resetPasswordForm: "auth-reset-form",
@@ -109,7 +187,39 @@ var AuthTestIds = {
   pinForm: "auth-pin-form",
   pinInput: "auth-pin-input",
   pinSubmitButton: "auth-pin-submit",
-  pinError: "auth-pin-error"
+  pinError: "auth-pin-error",
+  // Device-PIN unlock gate
+  devicePinUnlock: "auth-device-pin-unlock",
+  devicePinUnlockInput: "auth-device-pin-unlock-input",
+  devicePinUnlockSubmit: "auth-device-pin-unlock-submit",
+  devicePinUnlockUsePassword: "auth-device-pin-unlock-use-password",
+  devicePinUnlockError: "auth-device-pin-unlock-error",
+  // Device-PIN enrol form + length picker
+  devicePinEnrollForm: "auth-device-pin-enroll-form",
+  devicePinEnrollLength: "auth-device-pin-enroll-length",
+  devicePinEnrollPin: "auth-device-pin-enroll-pin",
+  devicePinEnrollConfirm: "auth-device-pin-enroll-confirm",
+  devicePinEnrollSubmit: "auth-device-pin-enroll-submit",
+  devicePinEnrollCancel: "auth-device-pin-enroll-cancel",
+  devicePinEnrollError: "auth-device-pin-enroll-error",
+  // Device-PIN offer (post-login)
+  devicePinOffer: "auth-device-pin-offer",
+  devicePinOfferAccept: "auth-device-pin-offer-accept",
+  devicePinOfferSkip: "auth-device-pin-offer-skip",
+  // Device-PIN settings card
+  devicePinSettings: "auth-device-pin-settings",
+  devicePinSettingsStatus: "auth-device-pin-settings-status",
+  devicePinSettingsEnable: "auth-device-pin-settings-enable",
+  devicePinSettingsDisable: "auth-device-pin-settings-disable",
+  devicePinSettingsError: "auth-device-pin-settings-error",
+  // Passkey login button
+  passkeyLogin: "auth-passkey-login",
+  passkeyLoginButton: "auth-passkey-login-button",
+  passkeyLoginError: "auth-passkey-login-error",
+  // Passkey settings card
+  passkeySettings: "auth-passkey-settings",
+  passkeySettingsAdd: "auth-passkey-settings-add",
+  passkeySettingsSuccess: "auth-passkey-settings-success"
 };
 function withTestIdPrefix(baseId, prefix) {
   return prefix === void 0 || prefix === "" ? baseId : `${prefix}-${baseId}`;
@@ -203,6 +313,32 @@ function useAuthStyles(theme) {
       helperText: {
         fontSize: typography.caption,
         color: colors.textSecondary
+      },
+      escapeLink: {
+        alignSelf: "center",
+        marginTop: spacing.md,
+        paddingVertical: spacing.xs / 2
+      },
+      secondaryButton: {
+        borderRadius: radii.input,
+        borderWidth: 1,
+        borderColor: colors.primary,
+        paddingVertical: BUTTON_VERTICAL_PADDING,
+        alignItems: "center",
+        justifyContent: "center",
+        marginTop: spacing.sm,
+        backgroundColor: colors.surface
+      },
+      secondaryButtonText: {
+        fontSize: typography.body,
+        fontWeight: "600",
+        color: colors.primary
+      },
+      statusText: {
+        fontSize: typography.label,
+        fontWeight: "600",
+        marginTop: spacing.sm,
+        color: colors.text
       }
     });
   }, [theme]);
@@ -364,7 +500,7 @@ function LoginForm({
   testIdPrefix
 }) {
   const theme = useAuthTheme(themeProp);
-  const styles = useAuthStyles(theme);
+  const styles3 = useAuthStyles(theme);
   const labels = useMemo(
     () => ({ ...DEFAULT_LOGIN_LABELS, ...labelsProp }),
     [labelsProp]
@@ -391,12 +527,12 @@ function LoginForm({
   const handleSubmit = useCallback(() => {
     void runLogin();
   }, [runLogin]);
-  const submitButtonStyle = isSubmitting ? [styles.primaryButton, styles.primaryButtonDisabled] : styles.primaryButton;
-  return /* @__PURE__ */ jsx(View, { style: styles.screen, children: /* @__PURE__ */ jsxs(View, { style: styles.card, testID: withTestIdPrefix(AuthTestIds.loginForm, testIdPrefix), children: [
-    /* @__PURE__ */ jsx(Text, { style: styles.title, children: labels.title }),
-    /* @__PURE__ */ jsx(Text, { style: styles.subtitle, children: labels.subtitle }),
-    /* @__PURE__ */ jsxs(View, { style: styles.fieldGroup, children: [
-      /* @__PURE__ */ jsx(Text, { style: styles.label, children: labels.usernameLabel }),
+  const submitButtonStyle = isSubmitting ? [styles3.primaryButton, styles3.primaryButtonDisabled] : styles3.primaryButton;
+  return /* @__PURE__ */ jsx(View, { style: styles3.screen, children: /* @__PURE__ */ jsxs(View, { style: styles3.card, testID: withTestIdPrefix(AuthTestIds.loginForm, testIdPrefix), children: [
+    /* @__PURE__ */ jsx(Text, { style: styles3.title, children: labels.title }),
+    /* @__PURE__ */ jsx(Text, { style: styles3.subtitle, children: labels.subtitle }),
+    /* @__PURE__ */ jsxs(View, { style: styles3.fieldGroup, children: [
+      /* @__PURE__ */ jsx(Text, { style: styles3.label, children: labels.usernameLabel }),
       /* @__PURE__ */ jsx(
         TextInput,
         {
@@ -407,15 +543,15 @@ function LoginForm({
           editable: !isSubmitting,
           placeholder: labels.usernamePlaceholder,
           placeholderTextColor: theme.colors.textSecondary,
-          style: styles.input,
+          style: styles3.input,
           testID: withTestIdPrefix(AuthTestIds.loginUsernameInput, testIdPrefix),
           value: username,
           onChangeText: setUsername
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs(View, { style: styles.fieldGroup, children: [
-      /* @__PURE__ */ jsx(Text, { style: styles.label, children: labels.passwordLabel }),
+    /* @__PURE__ */ jsxs(View, { style: styles3.fieldGroup, children: [
+      /* @__PURE__ */ jsx(Text, { style: styles3.label, children: labels.passwordLabel }),
       /* @__PURE__ */ jsx(
         TextInput,
         {
@@ -427,7 +563,7 @@ function LoginForm({
           editable: !isSubmitting,
           placeholder: labels.passwordPlaceholder,
           placeholderTextColor: theme.colors.textSecondary,
-          style: styles.input,
+          style: styles3.input,
           testID: withTestIdPrefix(AuthTestIds.loginPasswordInput, testIdPrefix),
           value: password,
           onChangeText: setPassword
@@ -437,7 +573,7 @@ function LoginForm({
     errorText !== null ? /* @__PURE__ */ jsx(
       Text,
       {
-        style: styles.errorText,
+        style: styles3.errorText,
         testID: withTestIdPrefix(AuthTestIds.loginError, testIdPrefix),
         children: errorText
       }
@@ -449,10 +585,10 @@ function LoginForm({
         accessibilityLabel: labels.forgotPassword,
         accessibilityRole: "link",
         disabled: isSubmitting,
-        style: styles.fieldGroup,
+        style: styles3.fieldGroup,
         testID: withTestIdPrefix(AuthTestIds.loginForgotLink, testIdPrefix),
         onPress: onForgotPassword,
-        children: /* @__PURE__ */ jsx(Text, { style: styles.linkText, children: labels.forgotPassword })
+        children: /* @__PURE__ */ jsx(Text, { style: styles3.linkText, children: labels.forgotPassword })
       }
     ) : null,
     /* @__PURE__ */ jsx(
@@ -465,7 +601,7 @@ function LoginForm({
         style: submitButtonStyle,
         testID: withTestIdPrefix(AuthTestIds.loginSubmitButton, testIdPrefix),
         onPress: handleSubmit,
-        children: isSubmitting ? /* @__PURE__ */ jsx(ActivityIndicator, { color: theme.colors.onPrimary, size: "small" }) : /* @__PURE__ */ jsx(Text, { style: styles.primaryButtonText, children: labels.submit })
+        children: isSubmitting ? /* @__PURE__ */ jsx(ActivityIndicator, { color: theme.colors.onPrimary, size: "small" }) : /* @__PURE__ */ jsx(Text, { style: styles3.primaryButtonText, children: labels.submit })
       }
     ),
     onSignUp !== void 0 ? /* @__PURE__ */ jsx(
@@ -475,10 +611,10 @@ function LoginForm({
         accessibilityLabel: labels.signUp,
         accessibilityRole: "link",
         disabled: isSubmitting,
-        style: styles.fieldGroup,
+        style: styles3.fieldGroup,
         testID: withTestIdPrefix(AuthTestIds.loginSignUpLink, testIdPrefix),
         onPress: onSignUp,
-        children: /* @__PURE__ */ jsx(Text, { style: styles.linkText, children: labels.signUp })
+        children: /* @__PURE__ */ jsx(Text, { style: styles3.linkText, children: labels.signUp })
       }
     ) : null
   ] }) });
@@ -516,7 +652,7 @@ function ForgotPasswordForm({
   testIdPrefix
 }) {
   const theme = useAuthTheme(themeProp);
-  const styles = useAuthStyles(theme);
+  const styles3 = useAuthStyles(theme);
   const labels = useMemo(
     () => ({ ...DEFAULT_FORGOT_PASSWORD_LABELS, ...labelsProp }),
     [labelsProp]
@@ -548,25 +684,25 @@ function ForgotPasswordForm({
     }
     mutation.mutate({ email: trimmedEmail, resetUrlTemplate });
   }, [email, mutation, resetUrlTemplate, labels.invalidEmail]);
-  const submitButtonStyle = isPending ? [styles.primaryButton, styles.primaryButtonDisabled] : styles.primaryButton;
-  return /* @__PURE__ */ jsx(View, { style: styles.screen, children: /* @__PURE__ */ jsxs(
+  const submitButtonStyle = isPending ? [styles3.primaryButton, styles3.primaryButtonDisabled] : styles3.primaryButton;
+  return /* @__PURE__ */ jsx(View, { style: styles3.screen, children: /* @__PURE__ */ jsxs(
     View,
     {
-      style: styles.card,
+      style: styles3.card,
       testID: withTestIdPrefix(AuthTestIds.forgotPasswordForm, testIdPrefix),
       children: [
-        /* @__PURE__ */ jsx(Text, { style: styles.title, children: labels.title }),
+        /* @__PURE__ */ jsx(Text, { style: styles3.title, children: labels.title }),
         submitted ? /* @__PURE__ */ jsx(
           Text,
           {
-            style: styles.successText,
+            style: styles3.successText,
             testID: withTestIdPrefix(AuthTestIds.forgotPasswordSuccess, testIdPrefix),
             children: labels.successMessage
           }
         ) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Text, { style: styles.subtitle, children: labels.description }),
-          /* @__PURE__ */ jsxs(View, { style: styles.fieldGroup, children: [
-            /* @__PURE__ */ jsx(Text, { style: styles.label, children: labels.emailLabel }),
+          /* @__PURE__ */ jsx(Text, { style: styles3.subtitle, children: labels.description }),
+          /* @__PURE__ */ jsxs(View, { style: styles3.fieldGroup, children: [
+            /* @__PURE__ */ jsx(Text, { style: styles3.label, children: labels.emailLabel }),
             /* @__PURE__ */ jsx(
               TextInput,
               {
@@ -578,7 +714,7 @@ function ForgotPasswordForm({
                 keyboardType: "email-address",
                 placeholder: labels.emailPlaceholder,
                 placeholderTextColor: theme.colors.textSecondary,
-                style: styles.input,
+                style: styles3.input,
                 testID: withTestIdPrefix(AuthTestIds.forgotPasswordEmailInput, testIdPrefix),
                 value: email,
                 onChangeText: setEmail
@@ -588,7 +724,7 @@ function ForgotPasswordForm({
           errorText !== null ? /* @__PURE__ */ jsx(
             Text,
             {
-              style: styles.errorText,
+              style: styles3.errorText,
               testID: withTestIdPrefix(AuthTestIds.forgotPasswordError, testIdPrefix),
               children: errorText
             }
@@ -603,7 +739,7 @@ function ForgotPasswordForm({
               style: submitButtonStyle,
               testID: withTestIdPrefix(AuthTestIds.forgotPasswordSubmitButton, testIdPrefix),
               onPress: handleSubmit,
-              children: isPending ? /* @__PURE__ */ jsx(ActivityIndicator, { color: theme.colors.onPrimary, size: "small" }) : /* @__PURE__ */ jsx(Text, { style: styles.primaryButtonText, children: labels.submit })
+              children: isPending ? /* @__PURE__ */ jsx(ActivityIndicator, { color: theme.colors.onPrimary, size: "small" }) : /* @__PURE__ */ jsx(Text, { style: styles3.primaryButtonText, children: labels.submit })
             }
           )
         ] })
@@ -611,6 +747,182 @@ function ForgotPasswordForm({
     }
   ) });
 }
+var EMAIL_REGEX2 = /^[^@\s]+@[^.\s]+\.[^\s]+$/;
+function isValidForgotPasswordEmail(value) {
+  return EMAIL_REGEX2.test(value.trim());
+}
+function useForgotPasswordSubmit({
+  client,
+  resetUrlTemplate,
+  onSuccess
+}) {
+  const [email, setEmail] = useState("");
+  const [submitted, setSubmitted] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [hasNetworkError, setHasNetworkError] = useState(false);
+  const canSubmit = isValidForgotPasswordEmail(email) && !isSubmitting;
+  const submit = useCallback(() => {
+    const target = email.trim();
+    if (!isValidForgotPasswordEmail(target) || isSubmitting) {
+      return;
+    }
+    setHasNetworkError(false);
+    setIsSubmitting(true);
+    const request = { email: target, resetUrlTemplate };
+    client.forgotPassword(request).then(() => {
+      setSubmitted(true);
+      onSuccess?.();
+    }).catch(() => setHasNetworkError(true)).finally(() => setIsSubmitting(false));
+  }, [client, email, isSubmitting, resetUrlTemplate, onSuccess]);
+  const reset = useCallback(() => {
+    setEmail("");
+    setSubmitted(false);
+    setIsSubmitting(false);
+    setHasNetworkError(false);
+  }, []);
+  return {
+    email,
+    setEmail,
+    submitted,
+    isSubmitting,
+    hasNetworkError,
+    canSubmit,
+    submit,
+    reset
+  };
+}
+var SECONDARY_BORDER_WIDTH = 1;
+function useModalStyles(theme) {
+  return useMemo(
+    () => StyleSheet.create({
+      body: { padding: theme.spacing.md },
+      actions: {
+        flexDirection: "row",
+        justifyContent: "flex-end",
+        alignItems: "center",
+        marginTop: theme.spacing.md,
+        gap: theme.spacing.sm
+      },
+      secondaryButton: {
+        borderRadius: theme.radii.input,
+        paddingVertical: theme.spacing.sm,
+        paddingHorizontal: theme.spacing.md,
+        borderWidth: SECONDARY_BORDER_WIDTH,
+        borderColor: theme.colors.border
+      },
+      secondaryButtonText: {
+        fontSize: theme.typography.body,
+        fontWeight: "600",
+        color: theme.colors.text
+      }
+    }),
+    [theme]
+  );
+}
+function ForgotPasswordFields({
+  client,
+  theme: themeProp,
+  labels: labelsProp,
+  resetUrlTemplate,
+  visible = true,
+  onSuccess,
+  onCancel,
+  onClose,
+  testIdPrefix
+}) {
+  const theme = useAuthTheme(themeProp);
+  const styles3 = useAuthStyles(theme);
+  const modalStyles = useModalStyles(theme);
+  const labels = useMemo(
+    () => ({ ...DEFAULT_FORGOT_PASSWORD_FIELDS_LABELS, ...labelsProp }),
+    [labelsProp]
+  );
+  const form = useForgotPasswordSubmit({ client, resetUrlTemplate, onSuccess });
+  const { reset } = form;
+  useEffect(() => {
+    if (!visible) {
+      reset();
+    }
+  }, [visible, reset]);
+  const submitButtonStyle = form.canSubmit ? styles3.primaryButton : [styles3.primaryButton, styles3.primaryButtonDisabled];
+  const handleCancel = () => {
+    form.reset();
+    onCancel?.();
+  };
+  const handleClose = () => {
+    form.reset();
+    onClose?.();
+  };
+  if (form.submitted) {
+    return /* @__PURE__ */ jsxs(View, { style: modalStyles.body, testID: withTestIdPrefix(AuthTestIds.forgotPasswordForm, testIdPrefix), children: [
+      /* @__PURE__ */ jsx(Text, { style: styles3.successText, testID: withTestIdPrefix(AuthTestIds.forgotPasswordSuccess, testIdPrefix), children: labels.successMessage }),
+      onClose !== void 0 ? /* @__PURE__ */ jsx(View, { style: modalStyles.actions, children: /* @__PURE__ */ jsx(
+        TouchableOpacity,
+        {
+          accessibilityHint: labels.close,
+          accessibilityLabel: labels.close,
+          accessibilityRole: "button",
+          style: styles3.primaryButton,
+          testID: withTestIdPrefix(AuthTestIds.forgotPasswordCloseButton, testIdPrefix),
+          onPress: handleClose,
+          children: /* @__PURE__ */ jsx(Text, { style: styles3.primaryButtonText, children: labels.close })
+        }
+      ) }) : null
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(View, { style: modalStyles.body, testID: withTestIdPrefix(AuthTestIds.forgotPasswordForm, testIdPrefix), children: [
+    /* @__PURE__ */ jsx(Text, { style: styles3.subtitle, children: labels.description }),
+    /* @__PURE__ */ jsxs(View, { style: styles3.fieldGroup, children: [
+      /* @__PURE__ */ jsx(Text, { style: styles3.label, children: labels.emailLabel }),
+      /* @__PURE__ */ jsx(
+        TextInput,
+        {
+          accessibilityHint: labels.emailPlaceholder,
+          accessibilityLabel: labels.emailLabel,
+          autoCapitalize: "none",
+          autoCorrect: false,
+          editable: !form.isSubmitting,
+          keyboardType: "email-address",
+          placeholder: labels.emailPlaceholder,
+          placeholderTextColor: theme.colors.textSecondary,
+          style: styles3.input,
+          testID: withTestIdPrefix(AuthTestIds.forgotPasswordEmailInput, testIdPrefix),
+          value: form.email,
+          onChangeText: form.setEmail
+        }
+      )
+    ] }),
+    form.hasNetworkError ? /* @__PURE__ */ jsx(Text, { style: styles3.errorText, testID: withTestIdPrefix(AuthTestIds.forgotPasswordError, testIdPrefix), children: labels.networkError }) : null,
+    /* @__PURE__ */ jsxs(View, { style: modalStyles.actions, children: [
+      onCancel !== void 0 ? /* @__PURE__ */ jsx(
+        TouchableOpacity,
+        {
+          accessibilityHint: labels.cancel,
+          accessibilityLabel: labels.cancel,
+          accessibilityRole: "button",
+          disabled: form.isSubmitting,
+          style: modalStyles.secondaryButton,
+          testID: withTestIdPrefix(AuthTestIds.forgotPasswordCancelButton, testIdPrefix),
+          onPress: handleCancel,
+          children: /* @__PURE__ */ jsx(Text, { style: modalStyles.secondaryButtonText, children: labels.cancel })
+        }
+      ) : null,
+      /* @__PURE__ */ jsx(
+        TouchableOpacity,
+        {
+          accessibilityHint: labels.submit,
+          accessibilityLabel: form.isSubmitting ? labels.submitting : labels.submit,
+          accessibilityRole: "button",
+          disabled: !form.canSubmit,
+          style: submitButtonStyle,
+          testID: withTestIdPrefix(AuthTestIds.forgotPasswordSubmitButton, testIdPrefix),
+          onPress: form.submit,
+          children: form.isSubmitting ? /* @__PURE__ */ jsx(ActivityIndicator, { color: theme.colors.onPrimary, size: "small" }) : /* @__PURE__ */ jsx(Text, { style: styles3.primaryButtonText, children: labels.submit })
+        }
+      )
+    ] })
+  ] });
+}
 
 // src/hooks/ResetPasswordError.ts
 var ResetPasswordError = /* @__PURE__ */ ((ResetPasswordError2) => {
@@ -784,24 +1096,24 @@ function ResetPasswordForm({
   testIdPrefix
 }) {
   const theme = useAuthTheme(themeProp);
-  const styles = useAuthStyles(theme);
+  const styles3 = useAuthStyles(theme);
   const labels = useMemo(
     () => ({ ...DEFAULT_RESET_PASSWORD_LABELS, ...labelsProp }),
     [labelsProp]
   );
   const form = useResetPasswordForm({ client, token, onSuccess });
   const message = errorMessage(form.errorKey, labels);
-  const submitButtonStyle = form.isSubmitting ? [styles.primaryButton, styles.primaryButtonDisabled] : styles.primaryButton;
-  return /* @__PURE__ */ jsx(View, { style: styles.screen, children: /* @__PURE__ */ jsxs(
+  const submitButtonStyle = form.isSubmitting ? [styles3.primaryButton, styles3.primaryButtonDisabled] : styles3.primaryButton;
+  return /* @__PURE__ */ jsx(View, { style: styles3.screen, children: /* @__PURE__ */ jsxs(
     View,
     {
-      style: styles.card,
+      style: styles3.card,
       testID: withTestIdPrefix(AuthTestIds.resetPasswordForm, testIdPrefix),
       children: [
-        /* @__PURE__ */ jsx(Text, { style: styles.title, children: labels.title }),
-        /* @__PURE__ */ jsx(Text, { style: styles.subtitle, children: labels.description }),
-        /* @__PURE__ */ jsxs(View, { style: styles.fieldGroup, children: [
-          /* @__PURE__ */ jsx(Text, { style: styles.label, children: labels.newPasswordLabel }),
+        /* @__PURE__ */ jsx(Text, { style: styles3.title, children: labels.title }),
+        /* @__PURE__ */ jsx(Text, { style: styles3.subtitle, children: labels.description }),
+        /* @__PURE__ */ jsxs(View, { style: styles3.fieldGroup, children: [
+          /* @__PURE__ */ jsx(Text, { style: styles3.label, children: labels.newPasswordLabel }),
           /* @__PURE__ */ jsx(
             TextInput,
             {
@@ -813,15 +1125,15 @@ function ResetPasswordForm({
               editable: !form.isSubmitting,
               placeholder: labels.newPasswordPlaceholder,
               placeholderTextColor: theme.colors.textSecondary,
-              style: styles.input,
+              style: styles3.input,
               testID: withTestIdPrefix(AuthTestIds.resetPasswordNewInput, testIdPrefix),
               value: form.newPassword,
               onChangeText: form.setNewPassword
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs(View, { style: styles.fieldGroup, children: [
-          /* @__PURE__ */ jsx(Text, { style: styles.label, children: labels.confirmPasswordLabel }),
+        /* @__PURE__ */ jsxs(View, { style: styles3.fieldGroup, children: [
+          /* @__PURE__ */ jsx(Text, { style: styles3.label, children: labels.confirmPasswordLabel }),
           /* @__PURE__ */ jsx(
             TextInput,
             {
@@ -833,7 +1145,7 @@ function ResetPasswordForm({
               editable: !form.isSubmitting,
               placeholder: labels.confirmPasswordPlaceholder,
               placeholderTextColor: theme.colors.textSecondary,
-              style: styles.input,
+              style: styles3.input,
               testID: withTestIdPrefix(AuthTestIds.resetPasswordConfirmInput, testIdPrefix),
               value: form.confirmPassword,
               onChangeText: form.setConfirmPassword
@@ -843,7 +1155,7 @@ function ResetPasswordForm({
         message !== null ? /* @__PURE__ */ jsx(
           Text,
           {
-            style: styles.errorText,
+            style: styles3.errorText,
             testID: withTestIdPrefix(AuthTestIds.resetPasswordError, testIdPrefix),
             children: message
           }
@@ -858,7 +1170,7 @@ function ResetPasswordForm({
             style: submitButtonStyle,
             testID: withTestIdPrefix(AuthTestIds.resetPasswordSubmitButton, testIdPrefix),
             onPress: form.submit,
-            children: form.isSubmitting ? /* @__PURE__ */ jsx(ActivityIndicator, { color: theme.colors.onPrimary, size: "small" }) : /* @__PURE__ */ jsx(Text, { style: styles.primaryButtonText, children: labels.submit })
+            children: form.isSubmitting ? /* @__PURE__ */ jsx(ActivityIndicator, { color: theme.colors.onPrimary, size: "small" }) : /* @__PURE__ */ jsx(Text, { style: styles3.primaryButtonText, children: labels.submit })
           }
         )
       ]
@@ -866,7 +1178,7 @@ function ResetPasswordForm({
   ) });
 }
 function OtpRequestStep({
-  styles,
+  styles: styles3,
   theme,
   labels,
   testIdPrefix,
@@ -875,12 +1187,12 @@ function OtpRequestStep({
   onSubmit
 }) {
   const [email, setEmail] = useState("");
-  const buttonStyle = isSubmitting ? [styles.primaryButton, styles.primaryButtonDisabled] : styles.primaryButton;
+  const buttonStyle = isSubmitting ? [styles3.primaryButton, styles3.primaryButtonDisabled] : styles3.primaryButton;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Text, { style: styles.title, children: labels.requestTitle }),
-    /* @__PURE__ */ jsx(Text, { style: styles.subtitle, children: labels.requestDescription }),
-    /* @__PURE__ */ jsxs(View, { style: styles.fieldGroup, children: [
-      /* @__PURE__ */ jsx(Text, { style: styles.label, children: labels.emailLabel }),
+    /* @__PURE__ */ jsx(Text, { style: styles3.title, children: labels.requestTitle }),
+    /* @__PURE__ */ jsx(Text, { style: styles3.subtitle, children: labels.requestDescription }),
+    /* @__PURE__ */ jsxs(View, { style: styles3.fieldGroup, children: [
+      /* @__PURE__ */ jsx(Text, { style: styles3.label, children: labels.emailLabel }),
       /* @__PURE__ */ jsx(
         TextInput,
         {
@@ -892,14 +1204,14 @@ function OtpRequestStep({
           keyboardType: "email-address",
           placeholder: labels.emailPlaceholder,
           placeholderTextColor: theme.colors.textSecondary,
-          style: styles.input,
+          style: styles3.input,
           testID: withTestIdPrefix(AuthTestIds.otpEmailInput, testIdPrefix),
           value: email,
           onChangeText: setEmail
         }
       )
     ] }),
-    errorText !== null ? /* @__PURE__ */ jsx(Text, { style: styles.errorText, testID: withTestIdPrefix(AuthTestIds.otpError, testIdPrefix), children: errorText }) : null,
+    errorText !== null ? /* @__PURE__ */ jsx(Text, { style: styles3.errorText, testID: withTestIdPrefix(AuthTestIds.otpError, testIdPrefix), children: errorText }) : null,
     /* @__PURE__ */ jsx(
       TouchableOpacity,
       {
@@ -910,13 +1222,13 @@ function OtpRequestStep({
         style: buttonStyle,
         testID: withTestIdPrefix(AuthTestIds.otpRequestButton, testIdPrefix),
         onPress: () => onSubmit(email.trim()),
-        children: isSubmitting ? /* @__PURE__ */ jsx(ActivityIndicator, { color: theme.colors.onPrimary, size: "small" }) : /* @__PURE__ */ jsx(Text, { style: styles.primaryButtonText, children: labels.requestSubmit })
+        children: isSubmitting ? /* @__PURE__ */ jsx(ActivityIndicator, { color: theme.colors.onPrimary, size: "small" }) : /* @__PURE__ */ jsx(Text, { style: styles3.primaryButtonText, children: labels.requestSubmit })
       }
     )
   ] });
 }
 function OtpVerifyStep({
-  styles,
+  styles: styles3,
   theme,
   labels,
   testIdPrefix,
@@ -928,13 +1240,13 @@ function OtpVerifyStep({
   onChangeEmail
 }) {
   const [code, setCode] = useState("");
-  const buttonStyle = isSubmitting ? [styles.primaryButton, styles.primaryButtonDisabled] : styles.primaryButton;
+  const buttonStyle = isSubmitting ? [styles3.primaryButton, styles3.primaryButtonDisabled] : styles3.primaryButton;
   const description = labels.verifyDescription.replace("{identifier}", identifier);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Text, { style: styles.title, children: labels.verifyTitle }),
-    /* @__PURE__ */ jsx(Text, { style: styles.subtitle, children: description }),
-    /* @__PURE__ */ jsxs(View, { style: styles.fieldGroup, children: [
-      /* @__PURE__ */ jsx(Text, { style: styles.label, children: labels.codeLabel }),
+    /* @__PURE__ */ jsx(Text, { style: styles3.title, children: labels.verifyTitle }),
+    /* @__PURE__ */ jsx(Text, { style: styles3.subtitle, children: description }),
+    /* @__PURE__ */ jsxs(View, { style: styles3.fieldGroup, children: [
+      /* @__PURE__ */ jsx(Text, { style: styles3.label, children: labels.codeLabel }),
       /* @__PURE__ */ jsx(
         TextInput,
         {
@@ -946,14 +1258,14 @@ function OtpVerifyStep({
           keyboardType: "number-pad",
           placeholder: labels.codePlaceholder,
           placeholderTextColor: theme.colors.textSecondary,
-          style: styles.input,
+          style: styles3.input,
           testID: withTestIdPrefix(AuthTestIds.otpCodeInput, testIdPrefix),
           value: code,
           onChangeText: setCode
         }
       )
     ] }),
-    errorText !== null ? /* @__PURE__ */ jsx(Text, { style: styles.errorText, testID: withTestIdPrefix(AuthTestIds.otpError, testIdPrefix), children: errorText }) : null,
+    errorText !== null ? /* @__PURE__ */ jsx(Text, { style: styles3.errorText, testID: withTestIdPrefix(AuthTestIds.otpError, testIdPrefix), children: errorText }) : null,
     /* @__PURE__ */ jsx(
       TouchableOpacity,
       {
@@ -964,7 +1276,7 @@ function OtpVerifyStep({
         style: buttonStyle,
         testID: withTestIdPrefix(AuthTestIds.otpVerifyButton, testIdPrefix),
         onPress: () => onSubmit(code.trim()),
-        children: isSubmitting ? /* @__PURE__ */ jsx(ActivityIndicator, { color: theme.colors.onPrimary, size: "small" }) : /* @__PURE__ */ jsx(Text, { style: styles.primaryButtonText, children: labels.verifySubmit })
+        children: isSubmitting ? /* @__PURE__ */ jsx(ActivityIndicator, { color: theme.colors.onPrimary, size: "small" }) : /* @__PURE__ */ jsx(Text, { style: styles3.primaryButtonText, children: labels.verifySubmit })
       }
     ),
     /* @__PURE__ */ jsx(
@@ -974,10 +1286,10 @@ function OtpVerifyStep({
         accessibilityLabel: isSubmitting ? labels.resending : labels.resend,
         accessibilityRole: "link",
         disabled: isSubmitting,
-        style: styles.fieldGroup,
+        style: styles3.fieldGroup,
         testID: withTestIdPrefix(AuthTestIds.otpResendButton, testIdPrefix),
         onPress: onResend,
-        children: /* @__PURE__ */ jsx(Text, { style: styles.linkText, children: isSubmitting ? labels.resending : labels.resend })
+        children: /* @__PURE__ */ jsx(Text, { style: styles3.linkText, children: isSubmitting ? labels.resending : labels.resend })
       }
     ),
     /* @__PURE__ */ jsx(
@@ -989,7 +1301,7 @@ function OtpVerifyStep({
         disabled: isSubmitting,
         testID: withTestIdPrefix(AuthTestIds.otpChangeEmailButton, testIdPrefix),
         onPress: onChangeEmail,
-        children: /* @__PURE__ */ jsx(Text, { style: styles.linkText, children: labels.changeEmail })
+        children: /* @__PURE__ */ jsx(Text, { style: styles3.linkText, children: labels.changeEmail })
       }
     )
   ] });
@@ -1112,9 +1424,9 @@ function useOtpLogin(options) {
     ]
   );
 }
-var EMAIL_REGEX2 = /^[^@\s]+@[^.\s]+\.[^\s]+$/;
+var EMAIL_REGEX3 = /^[^@\s]+@[^.\s]+\.[^\s]+$/;
 function isValidEmail2(value) {
-  return EMAIL_REGEX2.test(value);
+  return EMAIL_REGEX3.test(value);
 }
 function transportErrorFor(step, error, labels) {
   if (error === null) {
@@ -1158,7 +1470,7 @@ function OtpForm({
   testIdPrefix
 }) {
   const theme = useAuthTheme(themeProp);
-  const styles = useAuthStyles(theme);
+  const styles3 = useAuthStyles(theme);
   const labels = useMemo(
     () => ({ ...DEFAULT_OTP_LABELS, ...labelsProp }),
     [labelsProp]
@@ -1176,13 +1488,13 @@ function OtpForm({
     otp.reset();
   }, [otp]);
   const errorText = localError ?? transportErrorFor(otp.step, otp.error, labels);
-  return /* @__PURE__ */ jsx(View, { style: styles.screen, children: /* @__PURE__ */ jsx(View, { style: styles.card, testID: withTestIdPrefix(AuthTestIds.otpForm, testIdPrefix), children: otp.step === "requestCode" /* RequestCode */ ? /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(View, { style: styles3.screen, children: /* @__PURE__ */ jsx(View, { style: styles3.card, testID: withTestIdPrefix(AuthTestIds.otpForm, testIdPrefix), children: otp.step === "requestCode" /* RequestCode */ ? /* @__PURE__ */ jsx(
     OtpRequestStep,
     {
       errorText,
       isSubmitting: otp.isSubmitting,
       labels,
-      styles,
+      styles: styles3,
       testIdPrefix,
       theme,
       onSubmit: handleRequest
@@ -1194,7 +1506,7 @@ function OtpForm({
       identifier: otp.identifier,
       isSubmitting: otp.isSubmitting,
       labels,
-      styles,
+      styles: styles3,
       testIdPrefix,
       theme,
       onChangeEmail: handleChangeEmail,
@@ -1283,7 +1595,7 @@ function PinForm({
   testIdPrefix
 }) {
   const theme = useAuthTheme(themeProp);
-  const styles = useAuthStyles(theme);
+  const styles3 = useAuthStyles(theme);
   const labels = useMemo(
     () => ({ ...DEFAULT_PIN_LABELS, ...labelsProp }),
     [labelsProp]
@@ -1293,12 +1605,12 @@ function PinForm({
   const [pinValue, setPinValue] = useState("");
   const handleSubmit = useSubmitHandler(pin, labels, setLocalError, onSuccess);
   const errorText = localError ?? transportErrorFor2(pin.error, labels);
-  const buttonStyle = pin.isSubmitting ? [styles.primaryButton, styles.primaryButtonDisabled] : styles.primaryButton;
-  return /* @__PURE__ */ jsx(View, { style: styles.screen, children: /* @__PURE__ */ jsxs(View, { style: styles.card, testID: withTestIdPrefix(AuthTestIds.pinForm, testIdPrefix), children: [
-    /* @__PURE__ */ jsx(Text, { style: styles.title, children: labels.title }),
-    /* @__PURE__ */ jsx(Text, { style: styles.subtitle, children: labels.description }),
-    /* @__PURE__ */ jsxs(View, { style: styles.fieldGroup, children: [
-      /* @__PURE__ */ jsx(Text, { style: styles.label, children: labels.pinLabel }),
+  const buttonStyle = pin.isSubmitting ? [styles3.primaryButton, styles3.primaryButtonDisabled] : styles3.primaryButton;
+  return /* @__PURE__ */ jsx(View, { style: styles3.screen, children: /* @__PURE__ */ jsxs(View, { style: styles3.card, testID: withTestIdPrefix(AuthTestIds.pinForm, testIdPrefix), children: [
+    /* @__PURE__ */ jsx(Text, { style: styles3.title, children: labels.title }),
+    /* @__PURE__ */ jsx(Text, { style: styles3.subtitle, children: labels.description }),
+    /* @__PURE__ */ jsxs(View, { style: styles3.fieldGroup, children: [
+      /* @__PURE__ */ jsx(Text, { style: styles3.label, children: labels.pinLabel }),
       /* @__PURE__ */ jsx(
         TextInput,
         {
@@ -1311,7 +1623,7 @@ function PinForm({
           placeholder: labels.pinPlaceholder,
           placeholderTextColor: theme.colors.textSecondary,
           secureTextEntry: true,
-          style: styles.input,
+          style: styles3.input,
           testID: withTestIdPrefix(AuthTestIds.pinInput, testIdPrefix),
           value: pinValue,
           onChangeText: setPinValue
@@ -1321,7 +1633,7 @@ function PinForm({
     errorText !== null ? /* @__PURE__ */ jsx(
       Text,
       {
-        style: styles.errorText,
+        style: styles3.errorText,
         testID: withTestIdPrefix(AuthTestIds.pinError, testIdPrefix),
         children: errorText
       }
@@ -1336,11 +1648,918 @@ function PinForm({
         style: buttonStyle,
         testID: withTestIdPrefix(AuthTestIds.pinSubmitButton, testIdPrefix),
         onPress: () => handleSubmit(pinValue.trim()),
-        children: pin.isSubmitting ? /* @__PURE__ */ jsx(ActivityIndicator, { color: theme.colors.onPrimary, size: "small" }) : /* @__PURE__ */ jsx(Text, { style: styles.primaryButtonText, children: labels.submit })
+        children: pin.isSubmitting ? /* @__PURE__ */ jsx(ActivityIndicator, { color: theme.colors.onPrimary, size: "small" }) : /* @__PURE__ */ jsx(Text, { style: styles3.primaryButtonText, children: labels.submit })
       }
     )
   ] }) });
 }
+var DOT_SIZE = 18;
+var DOT_BORDER_WIDTH = 2;
+var DOT_RADIUS = 9;
+var ROW_GAP = 12;
+var ROW_MIN_HEIGHT = 44;
+var ROW_VERTICAL_MARGIN = 16;
+var HIDDEN_SIZE = 1;
+function sanitise(raw, length) {
+  return raw.replace(/\D/g, "").slice(0, length);
+}
+function useDotStyles(theme) {
+  return useMemo(
+    () => ({
+      filled: { backgroundColor: theme.colors.primary, borderColor: theme.colors.primary },
+      empty: { backgroundColor: theme.colors.background, borderColor: theme.colors.border }
+    }),
+    [theme]
+  );
+}
+function DevicePinInput({
+  value,
+  length,
+  disabled,
+  testID,
+  testIdPrefix,
+  accessibilityLabel,
+  accessibilityHint,
+  filledHint,
+  emptyHint,
+  theme: themeProp,
+  onChange
+}) {
+  const theme = useAuthTheme(themeProp);
+  const inputRef = useRef(null);
+  const dotStyles = useDotStyles(theme);
+  const cells = Array.from({ length }, (_unused, index) => index);
+  const baseId = withTestIdPrefix(testID, testIdPrefix);
+  return /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      accessibilityHint,
+      accessibilityLabel,
+      accessibilityRole: "button",
+      disabled,
+      style: styles.row,
+      testID: `${baseId}-row`,
+      onPress: () => inputRef.current?.focus(),
+      children: [
+        cells.map((index) => {
+          const filled = index < value.length;
+          return /* @__PURE__ */ jsx(
+            View,
+            {
+              accessibilityLabel: filled ? filledHint : emptyHint,
+              style: [styles.dot, filled ? dotStyles.filled : dotStyles.empty],
+              testID: `${baseId}-dot-${String(index)}`
+            },
+            index
+          );
+        }),
+        /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            ref: inputRef,
+            accessibilityHint,
+            accessibilityLabel,
+            autoFocus: true,
+            caretHidden: true,
+            editable: !disabled,
+            keyboardType: "number-pad",
+            maxLength: length,
+            secureTextEntry: true,
+            style: styles.hiddenInput,
+            testID: baseId,
+            value,
+            onChangeText: (raw) => onChange(sanitise(raw, length))
+          }
+        )
+      ]
+    }
+  );
+}
+var styles = StyleSheet.create({
+  dot: {
+    borderRadius: DOT_RADIUS,
+    borderWidth: DOT_BORDER_WIDTH,
+    height: DOT_SIZE,
+    width: DOT_SIZE
+  },
+  hiddenInput: {
+    height: HIDDEN_SIZE,
+    opacity: 0,
+    position: "absolute",
+    width: HIDDEN_SIZE
+  },
+  row: {
+    alignItems: "center",
+    flexDirection: "row",
+    gap: ROW_GAP,
+    justifyContent: "center",
+    marginVertical: ROW_VERTICAL_MARGIN,
+    minHeight: ROW_MIN_HEIGHT
+  }
+});
+
+// src/components/interpolate.ts
+function interpolate(template, values) {
+  return template.replace(/\{(\w+)\}/g, (match, key) => {
+    const value = values[key];
+    return value === void 0 ? match : String(value);
+  });
+}
+
+// src/devicePin/devicePinConstants.ts
+var DEVICE_PIN_ALLOWED_DIGITS = [4, 6, 8];
+var DEVICE_PIN_DEFAULT_DIGITS = 4;
+function isAllowedPinDigits(value) {
+  return DEVICE_PIN_ALLOWED_DIGITS.includes(value);
+}
+var PILL_VERTICAL_PADDING = 10;
+var PILL_FONT_SIZE = 15;
+function usePickerStyles(theme) {
+  return useMemo(
+    () => ({
+      pill: { borderColor: theme.colors.border },
+      active: { backgroundColor: theme.colors.primary, borderColor: theme.colors.primary },
+      text: { color: theme.colors.text },
+      textActive: { color: theme.colors.onPrimary }
+    }),
+    [theme]
+  );
+}
+function DevicePinLengthPicker({
+  selected,
+  disabled,
+  optionHint,
+  testIdPrefix,
+  theme: themeProp,
+  onSelect
+}) {
+  const theme = useAuthTheme(themeProp);
+  const dynamic = usePickerStyles(theme);
+  const baseId = withTestIdPrefix(AuthTestIds.devicePinEnrollLength, testIdPrefix);
+  return /* @__PURE__ */ jsx(View, { style: styles2.row, children: DEVICE_PIN_ALLOWED_DIGITS.map((option) => {
+    const active = option === selected;
+    return /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        accessibilityHint: interpolate(optionHint, { count: option }),
+        accessibilityLabel: String(option),
+        accessibilityRole: "button",
+        accessibilityState: { selected: active },
+        disabled,
+        style: [styles2.pill, dynamic.pill, active ? dynamic.active : null],
+        testID: `${baseId}-${String(option)}`,
+        onPress: () => onSelect(option),
+        children: /* @__PURE__ */ jsx(Text, { style: [styles2.text, dynamic.text, active ? dynamic.textActive : null], children: String(option) })
+      },
+      option
+    );
+  }) });
+}
+var styles2 = StyleSheet.create({
+  pill: {
+    alignItems: "center",
+    borderRadius: 8,
+    borderWidth: 1,
+    flex: 1,
+    paddingVertical: PILL_VERTICAL_PADDING
+  },
+  row: {
+    flexDirection: "row",
+    gap: 8,
+    marginBottom: 8
+  },
+  text: {
+    fontSize: PILL_FONT_SIZE,
+    fontWeight: "700"
+  }
+});
+
+// src/devicePin/DevicePinErrorKey.ts
+var DevicePinErrorKey = /* @__PURE__ */ ((DevicePinErrorKey2) => {
+  DevicePinErrorKey2["Incomplete"] = "incomplete";
+  DevicePinErrorKey2["Invalid"] = "invalid";
+  DevicePinErrorKey2["LockedOut"] = "locked_out";
+  DevicePinErrorKey2["RateLimited"] = "rate_limited";
+  DevicePinErrorKey2["Generic"] = "generic";
+  return DevicePinErrorKey2;
+})(DevicePinErrorKey || {});
+function useDevicePinUnlock({
+  client,
+  digits,
+  onSignedIn
+}) {
+  const [pin, setPinState] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+  const [errorKey, setErrorKey] = useState(null);
+  const [retryAfterSeconds, setRetryAfterSeconds] = useState(null);
+  const setPin = useCallback((next) => {
+    setPinState(next);
+    setErrorKey(null);
+    setRetryAfterSeconds(null);
+  }, []);
+  const submit = useCallback(() => {
+    setErrorKey(null);
+    setRetryAfterSeconds(null);
+    if (pin.length < digits) {
+      setErrorKey("incomplete" /* Incomplete */);
+      return;
+    }
+    setSubmitting(true);
+    client.unlockWithDevicePin({ pin }).then((result) => {
+      if (result.status === "success") {
+        onSignedIn(result.user);
+        return;
+      }
+      if (result.status === "invalid") {
+        setErrorKey("invalid" /* Invalid */);
+        return;
+      }
+      if (result.status === "locked") {
+        setRetryAfterSeconds(result.retryAfterSeconds);
+        setErrorKey("locked_out" /* LockedOut */);
+        return;
+      }
+      if (result.status === "rateLimited") {
+        setRetryAfterSeconds(result.retryAfterSeconds);
+        setErrorKey("rate_limited" /* RateLimited */);
+        return;
+      }
+      setErrorKey("generic" /* Generic */);
+    }).catch(() => {
+      setErrorKey("generic" /* Generic */);
+    }).finally(() => {
+      setSubmitting(false);
+    });
+  }, [client, pin, digits, onSignedIn]);
+  return { pin, submitting, errorKey, retryAfterSeconds, setPin, submit };
+}
+function resolveErrorText(errorKey, digits, retryAfter, labels) {
+  if (errorKey === null) {
+    return null;
+  }
+  if (errorKey === "incomplete" /* Incomplete */) {
+    return interpolate(labels.errorIncomplete, { count: digits });
+  }
+  if (errorKey === "invalid" /* Invalid */) {
+    return labels.errorInvalid;
+  }
+  if (errorKey === "locked_out" /* LockedOut */) {
+    return retryAfter !== null ? interpolate(labels.errorLockedOutRetry, { count: retryAfter }) : labels.errorLockedOut;
+  }
+  if (errorKey === "rate_limited" /* RateLimited */) {
+    return retryAfter !== null ? interpolate(labels.errorRateLimitedRetry, { count: retryAfter }) : labels.errorRateLimited;
+  }
+  return labels.errorGeneric;
+}
+function DevicePinUnlockScreen({
+  client,
+  digits,
+  rememberedUsername,
+  theme: themeProp,
+  labels: labelsProp,
+  testIdPrefix,
+  onSignedIn,
+  onUsePassword
+}) {
+  const theme = useAuthTheme(themeProp);
+  const styles3 = useAuthStyles(theme);
+  const labels = useMemo(
+    () => ({ ...DEFAULT_DEVICE_PIN_UNLOCK_LABELS, ...labelsProp }),
+    [labelsProp]
+  );
+  const { pin, submitting, errorKey, retryAfterSeconds, setPin, submit } = useDevicePinUnlock({
+    client,
+    digits,
+    onSignedIn
+  });
+  const hasName = rememberedUsername !== "";
+  const title = hasName ? interpolate(labels.title, { name: rememberedUsername }) : labels.titleNoName;
+  const error = resolveErrorText(errorKey, digits, retryAfterSeconds, labels);
+  const buttonStyle = submitting ? [styles3.primaryButton, styles3.primaryButtonDisabled] : styles3.primaryButton;
+  return /* @__PURE__ */ jsx(View, { style: styles3.screen, children: /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: styles3.card,
+      testID: withTestIdPrefix(AuthTestIds.devicePinUnlock, testIdPrefix),
+      children: [
+        /* @__PURE__ */ jsx(Text, { style: styles3.title, children: title }),
+        /* @__PURE__ */ jsx(Text, { style: styles3.subtitle, children: interpolate(labels.description, { count: digits }) }),
+        /* @__PURE__ */ jsx(
+          DevicePinInput,
+          {
+            accessibilityHint: labels.pinPlaceholder,
+            accessibilityLabel: labels.pinLabel,
+            disabled: submitting,
+            emptyHint: labels.digitEmptyHint,
+            filledHint: labels.digitFilledHint,
+            length: digits,
+            testID: AuthTestIds.devicePinUnlockInput,
+            testIdPrefix,
+            theme,
+            value: pin,
+            onChange: setPin
+          }
+        ),
+        error !== null ? /* @__PURE__ */ jsx(
+          Text,
+          {
+            style: styles3.errorText,
+            testID: withTestIdPrefix(AuthTestIds.devicePinUnlockError, testIdPrefix),
+            children: error
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(
+          TouchableOpacity,
+          {
+            accessibilityHint: labels.submit,
+            accessibilityLabel: submitting ? labels.submitting : labels.submit,
+            accessibilityRole: "button",
+            disabled: submitting,
+            style: buttonStyle,
+            testID: withTestIdPrefix(AuthTestIds.devicePinUnlockSubmit, testIdPrefix),
+            onPress: submit,
+            children: submitting ? /* @__PURE__ */ jsx(ActivityIndicator, { color: theme.colors.onPrimary, size: "small" }) : /* @__PURE__ */ jsx(Text, { style: styles3.primaryButtonText, children: labels.submit })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TouchableOpacity,
+          {
+            accessibilityHint: labels.usePasswordHint,
+            accessibilityLabel: labels.usePasswordInstead,
+            accessibilityRole: "button",
+            disabled: submitting,
+            style: styles3.escapeLink,
+            testID: withTestIdPrefix(AuthTestIds.devicePinUnlockUsePassword, testIdPrefix),
+            onPress: onUsePassword,
+            children: /* @__PURE__ */ jsx(Text, { style: styles3.linkText, children: labels.usePasswordInstead })
+          }
+        )
+      ]
+    }
+  ) });
+}
+
+// src/devicePin/DevicePinEnrollErrorKey.ts
+var DevicePinEnrollErrorKey = /* @__PURE__ */ ((DevicePinEnrollErrorKey2) => {
+  DevicePinEnrollErrorKey2["Mismatch"] = "mismatch";
+  DevicePinEnrollErrorKey2["Unauthorized"] = "unauthorized";
+  DevicePinEnrollErrorKey2["Forbidden"] = "forbidden";
+  DevicePinEnrollErrorKey2["InvalidPin"] = "invalid_pin";
+  DevicePinEnrollErrorKey2["Failed"] = "failed";
+  return DevicePinEnrollErrorKey2;
+})(DevicePinEnrollErrorKey || {});
+function errorKeyFor(result) {
+  if (result.status === "unauthorized") {
+    return "unauthorized" /* Unauthorized */;
+  }
+  if (result.status === "forbidden") {
+    return "forbidden" /* Forbidden */;
+  }
+  if (result.status === "invalidPin") {
+    return "invalid_pin" /* InvalidPin */;
+  }
+  return "failed" /* Failed */;
+}
+function useDevicePinEnroll({
+  client,
+  digits,
+  onEnrolled
+}) {
+  const [pin, setPinState] = useState("");
+  const [confirmPin, setConfirmState] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+  const [errorKey, setErrorKey] = useState(null);
+  const setPin = useCallback((next) => {
+    setPinState(next);
+    setErrorKey(null);
+  }, []);
+  const setConfirmPin = useCallback((next) => {
+    setConfirmState(next);
+    setErrorKey(null);
+  }, []);
+  const submit = useCallback(() => {
+    setErrorKey(null);
+    const wrongLength = pin.length !== digits;
+    const mismatched = pin !== confirmPin;
+    if (wrongLength || mismatched) {
+      setErrorKey("mismatch" /* Mismatch */);
+      return;
+    }
+    setSubmitting(true);
+    client.enrollDevicePin({ pin, digits }).then((result) => {
+      if (result.status === "success") {
+        onEnrolled();
+        return;
+      }
+      setErrorKey(errorKeyFor(result));
+    }).catch(() => {
+      setErrorKey("failed" /* Failed */);
+    }).finally(() => {
+      setSubmitting(false);
+    });
+  }, [client, pin, confirmPin, digits, onEnrolled]);
+  return { pin, confirmPin, submitting, errorKey, setPin, setConfirmPin, submit };
+}
+function resolveErrorText2(errorKey, digits, labels) {
+  if (errorKey === null) {
+    return null;
+  }
+  if (errorKey === "mismatch" /* Mismatch */) {
+    return interpolate(labels.errorMismatch, { count: digits });
+  }
+  if (errorKey === "unauthorized" /* Unauthorized */) {
+    return labels.errorUnauthorized;
+  }
+  if (errorKey === "forbidden" /* Forbidden */) {
+    return labels.errorForbidden;
+  }
+  if (errorKey === "invalid_pin" /* InvalidPin */) {
+    return labels.errorInvalidPin;
+  }
+  return labels.errorFailed;
+}
+function DevicePinEnrollForm({
+  client,
+  initialDigits = DEVICE_PIN_DEFAULT_DIGITS,
+  theme: themeProp,
+  labels: labelsProp,
+  testIdPrefix,
+  onEnrolled,
+  onCancel
+}) {
+  const theme = useAuthTheme(themeProp);
+  const styles3 = useAuthStyles(theme);
+  const labels = useMemo(
+    () => ({ ...DEFAULT_DEVICE_PIN_ENROLL_LABELS, ...labelsProp }),
+    [labelsProp]
+  );
+  const [digits, setDigits] = useState(initialDigits);
+  const { pin, confirmPin, submitting, errorKey, setPin, setConfirmPin, submit } = useDevicePinEnroll({ client, digits, onEnrolled });
+  const error = resolveErrorText2(errorKey, digits, labels);
+  const buttonStyle = submitting ? [styles3.primaryButton, styles3.primaryButtonDisabled] : styles3.primaryButton;
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: styles3.card,
+      testID: withTestIdPrefix(AuthTestIds.devicePinEnrollForm, testIdPrefix),
+      children: [
+        /* @__PURE__ */ jsx(Text, { style: styles3.title, children: labels.formTitle }),
+        /* @__PURE__ */ jsx(Text, { style: styles3.subtitle, children: interpolate(labels.formDescription, { count: digits }) }),
+        /* @__PURE__ */ jsx(Text, { style: styles3.label, children: labels.lengthLabel }),
+        /* @__PURE__ */ jsx(
+          DevicePinLengthPicker,
+          {
+            disabled: submitting,
+            optionHint: labels.lengthOptionHint,
+            selected: digits,
+            testIdPrefix,
+            theme,
+            onSelect: (option) => {
+              setDigits(option);
+              setPin("");
+              setConfirmPin("");
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(Text, { style: styles3.label, children: labels.pinLabel }),
+        /* @__PURE__ */ jsx(
+          DevicePinInput,
+          {
+            accessibilityHint: labels.pinPlaceholder,
+            accessibilityLabel: labels.pinLabel,
+            disabled: submitting,
+            emptyHint: labels.pinPlaceholder,
+            filledHint: labels.pinLabel,
+            length: digits,
+            testID: AuthTestIds.devicePinEnrollPin,
+            testIdPrefix,
+            theme,
+            value: pin,
+            onChange: setPin
+          }
+        ),
+        /* @__PURE__ */ jsx(Text, { style: styles3.label, children: labels.confirmLabel }),
+        /* @__PURE__ */ jsx(
+          DevicePinInput,
+          {
+            accessibilityHint: labels.confirmPlaceholder,
+            accessibilityLabel: labels.confirmLabel,
+            disabled: submitting,
+            emptyHint: labels.confirmPlaceholder,
+            filledHint: labels.confirmLabel,
+            length: digits,
+            testID: AuthTestIds.devicePinEnrollConfirm,
+            testIdPrefix,
+            theme,
+            value: confirmPin,
+            onChange: setConfirmPin
+          }
+        ),
+        error !== null ? /* @__PURE__ */ jsx(
+          Text,
+          {
+            style: styles3.errorText,
+            testID: withTestIdPrefix(AuthTestIds.devicePinEnrollError, testIdPrefix),
+            children: error
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(
+          TouchableOpacity,
+          {
+            accessibilityHint: labels.submit,
+            accessibilityLabel: submitting ? labels.submitting : labels.submit,
+            accessibilityRole: "button",
+            disabled: submitting,
+            style: buttonStyle,
+            testID: withTestIdPrefix(AuthTestIds.devicePinEnrollSubmit, testIdPrefix),
+            onPress: submit,
+            children: submitting ? /* @__PURE__ */ jsx(ActivityIndicator, { color: theme.colors.onPrimary, size: "small" }) : /* @__PURE__ */ jsx(Text, { style: styles3.primaryButtonText, children: labels.submit })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TouchableOpacity,
+          {
+            accessibilityHint: labels.cancelHint,
+            accessibilityLabel: labels.cancel,
+            accessibilityRole: "button",
+            disabled: submitting,
+            style: styles3.escapeLink,
+            testID: withTestIdPrefix(AuthTestIds.devicePinEnrollCancel, testIdPrefix),
+            onPress: onCancel,
+            children: /* @__PURE__ */ jsx(Text, { style: styles3.linkText, children: labels.cancel })
+          }
+        )
+      ]
+    }
+  );
+}
+function DevicePinOffer({
+  client,
+  initialDigits,
+  theme: themeProp,
+  labels: labelsProp,
+  testIdPrefix,
+  onDismiss
+}) {
+  const theme = useAuthTheme(themeProp);
+  const styles3 = useAuthStyles(theme);
+  const labels = useMemo(
+    () => ({ ...DEFAULT_DEVICE_PIN_ENROLL_LABELS, ...labelsProp }),
+    [labelsProp]
+  );
+  const [expanded, setExpanded] = useState(false);
+  const cardTestId = withTestIdPrefix(AuthTestIds.devicePinOffer, testIdPrefix);
+  if (expanded) {
+    return /* @__PURE__ */ jsx(View, { style: styles3.card, testID: cardTestId, children: /* @__PURE__ */ jsx(
+      DevicePinEnrollForm,
+      {
+        client,
+        initialDigits,
+        labels: labelsProp,
+        testIdPrefix,
+        theme,
+        onCancel: onDismiss,
+        onEnrolled: onDismiss
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxs(View, { style: styles3.card, testID: cardTestId, children: [
+    /* @__PURE__ */ jsx(Text, { style: styles3.title, children: labels.offerTitle }),
+    /* @__PURE__ */ jsx(Text, { style: styles3.subtitle, children: labels.offerDescription }),
+    /* @__PURE__ */ jsx(
+      TouchableOpacity,
+      {
+        accessibilityHint: labels.offerAcceptHint,
+        accessibilityLabel: labels.offerAccept,
+        accessibilityRole: "button",
+        style: styles3.primaryButton,
+        testID: withTestIdPrefix(AuthTestIds.devicePinOfferAccept, testIdPrefix),
+        onPress: () => setExpanded(true),
+        children: /* @__PURE__ */ jsx(Text, { style: styles3.primaryButtonText, children: labels.offerAccept })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      TouchableOpacity,
+      {
+        accessibilityHint: labels.offerSkipHint,
+        accessibilityLabel: labels.offerSkip,
+        accessibilityRole: "button",
+        style: styles3.secondaryButton,
+        testID: withTestIdPrefix(AuthTestIds.devicePinOfferSkip, testIdPrefix),
+        onPress: onDismiss,
+        children: /* @__PURE__ */ jsx(Text, { style: styles3.secondaryButtonText, children: labels.offerSkip })
+      }
+    )
+  ] });
+}
+function useDevicePinDisable({
+  client,
+  initialHasPin,
+  onChanged
+}) {
+  const [hasPin, setHasPin] = useState(initialHasPin);
+  const [disabling, setDisabling] = useState(false);
+  const [failed, setFailed] = useState(false);
+  const disable = useCallback(() => {
+    setFailed(false);
+    setDisabling(true);
+    client.disableDevicePin().then((ok) => {
+      if (ok) {
+        setHasPin(false);
+        onChanged?.(false);
+        return;
+      }
+      setFailed(true);
+    }).catch(() => {
+      setFailed(true);
+    }).finally(() => {
+      setDisabling(false);
+    });
+  }, [client, onChanged]);
+  const markEnabled = useCallback(() => {
+    setHasPin(true);
+    onChanged?.(true);
+  }, [onChanged]);
+  return { hasPin, disabling, failed, disable, markEnabled };
+}
+function DevicePinSettingsCard({
+  client,
+  initialHasPin,
+  theme: themeProp,
+  labels: labelsProp,
+  enrollLabels,
+  testIdPrefix,
+  onChanged
+}) {
+  const theme = useAuthTheme(themeProp);
+  const styles3 = useAuthStyles(theme);
+  const labels = useMemo(
+    () => ({ ...DEFAULT_DEVICE_PIN_SETTINGS_LABELS, ...labelsProp }),
+    [labelsProp]
+  );
+  const resolvedEnrollLabels = useMemo(
+    () => ({ ...DEFAULT_DEVICE_PIN_ENROLL_LABELS, ...enrollLabels }),
+    [enrollLabels]
+  );
+  const [enrolling, setEnrolling] = useState(false);
+  const { hasPin, disabling, failed, disable, markEnabled } = useDevicePinDisable({
+    client,
+    initialHasPin,
+    onChanged
+  });
+  const handleEnrolled = () => {
+    setEnrolling(false);
+    markEnabled();
+  };
+  const disableButtonStyle = disabling ? [styles3.secondaryButton, styles3.primaryButtonDisabled] : styles3.secondaryButton;
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: styles3.card,
+      testID: withTestIdPrefix(AuthTestIds.devicePinSettings, testIdPrefix),
+      children: [
+        /* @__PURE__ */ jsx(Text, { style: styles3.title, children: labels.title }),
+        /* @__PURE__ */ jsx(Text, { style: styles3.subtitle, children: labels.description }),
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            style: styles3.statusText,
+            testID: withTestIdPrefix(AuthTestIds.devicePinSettingsStatus, testIdPrefix),
+            children: hasPin ? labels.statusEnabled : labels.statusDisabled
+          }
+        ),
+        failed ? /* @__PURE__ */ jsx(
+          Text,
+          {
+            style: styles3.errorText,
+            testID: withTestIdPrefix(AuthTestIds.devicePinSettingsError, testIdPrefix),
+            children: labels.disableFailed
+          }
+        ) : null,
+        renderAction()
+      ]
+    }
+  );
+  function renderAction() {
+    if (enrolling) {
+      return /* @__PURE__ */ jsx(
+        DevicePinEnrollForm,
+        {
+          client,
+          labels: resolvedEnrollLabels,
+          testIdPrefix,
+          theme,
+          onCancel: () => setEnrolling(false),
+          onEnrolled: handleEnrolled
+        }
+      );
+    }
+    if (hasPin) {
+      return /* @__PURE__ */ jsx(
+        TouchableOpacity,
+        {
+          accessibilityHint: labels.disableHint,
+          accessibilityLabel: disabling ? labels.disabling : labels.disable,
+          accessibilityRole: "button",
+          disabled: disabling,
+          style: disableButtonStyle,
+          testID: withTestIdPrefix(AuthTestIds.devicePinSettingsDisable, testIdPrefix),
+          onPress: disable,
+          children: disabling ? /* @__PURE__ */ jsx(ActivityIndicator, { color: theme.colors.primary, size: "small" }) : /* @__PURE__ */ jsx(Text, { style: styles3.secondaryButtonText, children: labels.disable })
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      TouchableOpacity,
+      {
+        accessibilityHint: labels.enableHint,
+        accessibilityLabel: labels.enable,
+        accessibilityRole: "button",
+        style: styles3.primaryButton,
+        testID: withTestIdPrefix(AuthTestIds.devicePinSettingsEnable, testIdPrefix),
+        onPress: () => setEnrolling(true),
+        children: /* @__PURE__ */ jsx(Text, { style: styles3.primaryButtonText, children: labels.enable })
+      }
+    );
+  }
+}
+
+// src/passkey/passkeyNavigation.ts
+var PASSKEY_LOGIN_ENDPOINT = "/bff/passkey/login";
+var PASSKEY_REGISTER_ENDPOINT = "/bff/passkey/register";
+var RETURN_URL_PARAM = "returnUrl";
+var PASSKEY_ERROR_PARAM = "passkeyError";
+var PASSKEY_PARAM = "passkey";
+var PASSKEY_REGISTERED_VALUE = "registered";
+var PASSKEY_ERROR_CANCELLED = "cancelled";
+var PASSKEY_ERROR_FAILED = "failed";
+function buildNavigationUrl(endpoint, returnUrl) {
+  return `${endpoint}?${RETURN_URL_PARAM}=${encodeURIComponent(returnUrl)}`;
+}
+function readSearchParams() {
+  if (typeof window === "undefined") {
+    return null;
+  }
+  return new URLSearchParams(window.location.search);
+}
+function startPasskeyLogin(returnUrl) {
+  if (typeof window === "undefined") {
+    return;
+  }
+  window.location.assign(buildNavigationUrl(PASSKEY_LOGIN_ENDPOINT, returnUrl));
+}
+function startPasskeyRegistration(returnUrl) {
+  if (typeof window === "undefined") {
+    return;
+  }
+  window.location.assign(buildNavigationUrl(PASSKEY_REGISTER_ENDPOINT, returnUrl));
+}
+function readPasskeyError() {
+  const params = readSearchParams();
+  if (params === null) {
+    return null;
+  }
+  const value = params.get(PASSKEY_ERROR_PARAM);
+  if (value === PASSKEY_ERROR_CANCELLED) {
+    return PASSKEY_ERROR_CANCELLED;
+  }
+  if (value === PASSKEY_ERROR_FAILED) {
+    return PASSKEY_ERROR_FAILED;
+  }
+  return null;
+}
+function readPasskeyRegistered() {
+  const params = readSearchParams();
+  if (params === null) {
+    return false;
+  }
+  return params.get(PASSKEY_PARAM) === PASSKEY_REGISTERED_VALUE;
+}
+var DEFAULT_RETURN_URL = "/";
+function PasskeyLoginButton({
+  returnUrl = DEFAULT_RETURN_URL,
+  theme: themeProp,
+  labels: labelsProp,
+  testIdPrefix
+}) {
+  const theme = useAuthTheme(themeProp);
+  const styles3 = useAuthStyles(theme);
+  const labels = useMemo(
+    () => ({ ...DEFAULT_PASSKEY_LOGIN_LABELS, ...labelsProp }),
+    [labelsProp]
+  );
+  const error = readPasskeyError();
+  return /* @__PURE__ */ jsxs(View, { testID: withTestIdPrefix(AuthTestIds.passkeyLogin, testIdPrefix), children: [
+    error !== null ? /* @__PURE__ */ jsx(
+      Text,
+      {
+        style: styles3.errorText,
+        testID: withTestIdPrefix(AuthTestIds.passkeyLoginError, testIdPrefix),
+        children: error === "cancelled" ? labels.errorCancelled : labels.errorFailed
+      }
+    ) : null,
+    /* @__PURE__ */ jsx(
+      TouchableOpacity,
+      {
+        accessibilityHint: labels.signInHint,
+        accessibilityLabel: labels.signInButton,
+        accessibilityRole: "button",
+        style: styles3.secondaryButton,
+        testID: withTestIdPrefix(AuthTestIds.passkeyLoginButton, testIdPrefix),
+        onPress: () => startPasskeyLogin(returnUrl),
+        children: /* @__PURE__ */ jsx(Text, { style: styles3.secondaryButtonText, children: labels.signInButton })
+      }
+    )
+  ] });
+}
+var DEFAULT_RETURN_PATH = "/";
+function readCurrentPath() {
+  if (typeof window === "undefined") {
+    return DEFAULT_RETURN_PATH;
+  }
+  return window.location.pathname;
+}
+function PasskeySettingsCard({
+  returnUrl,
+  theme: themeProp,
+  labels: labelsProp,
+  testIdPrefix
+}) {
+  const theme = useAuthTheme(themeProp);
+  const styles3 = useAuthStyles(theme);
+  const labels = useMemo(
+    () => ({ ...DEFAULT_PASSKEY_SETTINGS_LABELS, ...labelsProp }),
+    [labelsProp]
+  );
+  const justRegistered = readPasskeyRegistered();
+  const target = returnUrl ?? readCurrentPath();
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: styles3.card,
+      testID: withTestIdPrefix(AuthTestIds.passkeySettings, testIdPrefix),
+      children: [
+        /* @__PURE__ */ jsx(Text, { style: styles3.title, children: labels.title }),
+        /* @__PURE__ */ jsx(Text, { style: styles3.subtitle, children: labels.description }),
+        /* @__PURE__ */ jsx(Text, { style: styles3.helperText, children: labels.reauthHint }),
+        justRegistered ? /* @__PURE__ */ jsx(
+          Text,
+          {
+            style: styles3.successText,
+            testID: withTestIdPrefix(AuthTestIds.passkeySettingsSuccess, testIdPrefix),
+            children: labels.registeredSuccess
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(
+          TouchableOpacity,
+          {
+            accessibilityHint: labels.addHint,
+            accessibilityLabel: labels.addButton,
+            accessibilityRole: "button",
+            style: styles3.primaryButton,
+            testID: withTestIdPrefix(AuthTestIds.passkeySettingsAdd, testIdPrefix),
+            onPress: () => startPasskeyRegistration(target),
+            children: /* @__PURE__ */ jsx(Text, { style: styles3.primaryButtonText, children: labels.addButton })
+          }
+        )
+      ]
+    }
+  );
+}
+var EMPTY_CONFIG = {
+  methods: [],
+  registrationEnabled: false,
+  deviceState: {
+    rememberedUsername: null,
+    hasPin: false,
+    pinDigits: null,
+    preferredMethod: null
+  }
+};
+function useBffLoginConfig(client) {
+  const [config, setConfig] = useState(EMPTY_CONFIG);
+  const [loading, setLoading] = useState(true);
+  useEffect(() => {
+    let active = true;
+    client.getLoginConfig().then((next) => {
+      if (active) {
+        setConfig(next);
+      }
+    }).catch(() => {
+      if (active) {
+        setConfig(EMPTY_CONFIG);
+      }
+    }).finally(() => {
+      if (active) {
+        setLoading(false);
+      }
+    });
+    return () => {
+      active = false;
+    };
+  }, [client]);
+  return { config, loading };
+}
 async function lazyFetchHttpClient(request) {
   const fetchImpl = typeof fetch === "function" ? fetch.bind(globalThis) : void 0;
   if (fetchImpl === void 0) {
@@ -1384,6 +2603,6 @@ function resolvePostLoginRoute(user, table) {
   return table.fallback ?? null;
 }
 
-export { AuthTestIds, AuthThemeProvider, BffAuthStatus, DEFAULT_FORGOT_PASSWORD_LABELS, DEFAULT_LOGIN_LABELS, DEFAULT_OTP_LABELS, DEFAULT_PIN_LABELS, DEFAULT_RESET_PASSWORD_LABELS, ForgotPasswordForm, LoginForm, OtpForm, OtpLoginStep, PASSWORD_MAX_LENGTH, PASSWORD_MIN_LENGTH, PasswordPolicyError, PinForm, ResetPasswordError, ResetPasswordForm, collectUserRoles, createBffAuthClient, defaultAuthTheme, isPasswordValid, resolvePostLoginRoute, useAuthTheme, useBffAuth, useBffForgotPassword, useBffResetPassword, useOtpLogin, usePinLogin, useResetPasswordForm, validatePasswordPolicy, withTestIdPrefix };
+export { AuthTestIds, AuthThemeProvider, BffAuthStatus, DEFAULT_DEVICE_PIN_ENROLL_LABELS, DEFAULT_DEVICE_PIN_SETTINGS_LABELS, DEFAULT_DEVICE_PIN_UNLOCK_LABELS, DEFAULT_FORGOT_PASSWORD_FIELDS_LABELS, DEFAULT_FORGOT_PASSWORD_LABELS, DEFAULT_LOGIN_LABELS, DEFAULT_OTP_LABELS, DEFAULT_PASSKEY_LOGIN_LABELS, DEFAULT_PASSKEY_SETTINGS_LABELS, DEFAULT_PIN_LABELS, DEFAULT_RESET_PASSWORD_LABELS, DEVICE_PIN_ALLOWED_DIGITS, DEVICE_PIN_DEFAULT_DIGITS, DevicePinEnrollErrorKey, DevicePinEnrollForm, DevicePinErrorKey, DevicePinInput, DevicePinLengthPicker, DevicePinOffer, DevicePinSettingsCard, DevicePinUnlockScreen, ForgotPasswordFields, ForgotPasswordForm, LoginForm, OtpForm, OtpLoginStep, PASSWORD_MAX_LENGTH, PASSWORD_MIN_LENGTH, PasskeyLoginButton, PasskeySettingsCard, PasswordPolicyError, PinForm, ResetPasswordError, ResetPasswordForm, collectUserRoles, createBffAuthClient, defaultAuthTheme, isAllowedPinDigits, isPasswordValid, isValidForgotPasswordEmail, readPasskeyError, readPasskeyRegistered, resolvePostLoginRoute, startPasskeyLogin, startPasskeyRegistration, useAuthTheme, useBffAuth, useBffForgotPassword, useBffLoginConfig, useBffResetPassword, useDevicePinDisable, useDevicePinEnroll, useDevicePinUnlock, useForgotPasswordSubmit, useOtpLogin, usePinLogin, useResetPasswordForm, validatePasswordPolicy, withTestIdPrefix };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map