@ankhorage/zora 23.0.0 → 23.2.0

package/web-dist/chunks/{Accordion-rspy7gjb.js → Accordion-bmp1ab7m.js}

@@ -1,27 +1,187 @@
 'use client';
+import {
+  require_cjs
+} from "./Accordion-7hn324r1.js";
 import {
   Button2
-} from "./Accordion-dp638q63.js";
+} from "./Accordion-yms7x22j.js";
 import {
   withZoraThemeScope
 } from "./Accordion-13y3zx87.js";
 import {
-  View2
+  View2,
+  Divider2,
+  ScrollView2
 } from "./Accordion-01e56hb5.js";
 import {
   FormActions2,
   FormError2,
   hasRequiredRule,
   useFormController
-} from "./Accordion-f1t3rzgg.js";
+} from "./Accordion-ejy7gr0a.js";
+import {
+  Text3
+} from "./Accordion-46vwm9xv.js";
 import {
   Field2
-} from "./Accordion-w0k7gnn9.js";
+} from "./Accordion-5pskbqss.js";
 import {
   TextInput2
-} from "./Accordion-89q14src.js";
+} from "./Accordion-ejns5mga.js";
+import {
+  KeyboardAvoidingView2
+} from "./Accordion-r23sx4gf.js";
+import {
+  Surface2
+} from "./Accordion-kemavggr.js";
+import {
+  __toESM
+} from "./Accordion-9qvmwkxe.js";
 
-// src/features/auth/adapters/inbound/ForgotPasswordForm.tsx
+// src/features/auth/utils/oauthProviders.ts
+var DEFAULT_OAUTH_PROVIDER_ICONS = {
+  apple: { provider: "FontAwesome", name: "apple" },
+  azure: { provider: "FontAwesome5", name: "microsoft", variant: "brand" },
+  bitbucket: { provider: "FontAwesome", name: "bitbucket" },
+  discord: { provider: "FontAwesome5", name: "discord", variant: "brand" },
+  facebook: { provider: "FontAwesome", name: "facebook" },
+  figma: { provider: "FontAwesome5", name: "figma", variant: "brand" },
+  github: { provider: "FontAwesome", name: "github" },
+  gitlab: { provider: "FontAwesome5", name: "gitlab", variant: "brand" },
+  google: { provider: "FontAwesome", name: "google" },
+  linkedin: { provider: "FontAwesome", name: "linkedin" },
+  microsoft: { provider: "FontAwesome5", name: "microsoft", variant: "brand" },
+  slack: { provider: "FontAwesome5", name: "slack", variant: "brand" },
+  spotify: { provider: "FontAwesome", name: "spotify" },
+  twitch: { provider: "FontAwesome5", name: "twitch", variant: "brand" },
+  twitter: { provider: "FontAwesome", name: "twitter" },
+  x: { provider: "FontAwesome6", name: "x-twitter", variant: "brand" },
+  zoom: { provider: "FontAwesome5", name: "video", variant: "solid" }
+};
+var DEFAULT_OAUTH_PROVIDER_LABELS = {
+  apple: "Apple",
+  azure: "Microsoft",
+  bitbucket: "Bitbucket",
+  discord: "Discord",
+  facebook: "Facebook",
+  figma: "Figma",
+  github: "GitHub",
+  gitlab: "GitLab",
+  google: "Google",
+  kakao: "Kakao",
+  keycloak: "Keycloak",
+  linkedin: "LinkedIn",
+  microsoft: "Microsoft",
+  notion: "Notion",
+  slack: "Slack",
+  spotify: "Spotify",
+  twitch: "Twitch",
+  twitter: "Twitter",
+  workos: "WorkOS",
+  x: "X",
+  zoom: "Zoom"
+};
+var oauthProviderIcons = new Map(Object.entries(DEFAULT_OAUTH_PROVIDER_ICONS));
+var oauthProviderLabels = new Map(Object.entries(DEFAULT_OAUTH_PROVIDER_LABELS));
+function resolveOAuthProviderIcon(providerId) {
+  return oauthProviderIcons.get(normalizeOAuthProviderId(providerId));
+}
+function resolveOAuthProviderLabel(providerId) {
+  const normalizedProviderId = normalizeOAuthProviderId(providerId);
+  const knownLabel = oauthProviderLabels.get(normalizedProviderId);
+  return knownLabel ?? titleCaseProviderId(normalizedProviderId);
+}
+function normalizeOAuthProviderId(providerId) {
+  return providerId.trim().toLowerCase();
+}
+function titleCaseProviderId(providerId) {
+  const words = providerId.split(/[-_\s]+/u).map((word) => word.trim()).filter((word) => word.length > 0);
+  if (words.length === 0) {
+    return "Provider";
+  }
+  return words.map((word) => `${word.charAt(0).toUpperCase()}${word.slice(1)}`).join(" ");
+}
+
+// src/features/auth/adapters/inbound/OAuthProviderButton.tsx
+import { jsx } from "react/jsx-runtime";
+function OAuthProviderButtonInner({
+  themeId: _themeId,
+  mode: _mode,
+  interactionPolicy,
+  providerId,
+  label,
+  icon,
+  disabled = false,
+  loading = false,
+  fullWidth = true,
+  size = "l",
+  variant = "outline",
+  color = "neutral",
+  onPress,
+  testID
+}) {
+  const resolvedIcon = icon ?? resolveOAuthProviderIcon(providerId);
+  const resolvedLabel = label ?? `Continue with ${resolveOAuthProviderLabel(providerId)}`;
+  return /* @__PURE__ */ jsx(Button2, {
+    color,
+    disabled: disabled || loading || onPress === undefined,
+    fullWidth,
+    interactionPolicy,
+    leadingIcon: resolvedIcon,
+    loading,
+    onPress: () => {
+      onPress?.(providerId);
+    },
+    size,
+    testID,
+    variant,
+    children: resolvedLabel
+  });
+}
+var OAuthProviderButton2 = withZoraThemeScope(OAuthProviderButtonInner);
+
+// src/features/auth/adapters/inbound/OAuthProviderList.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function OAuthProviderListInner({
+  themeId: _themeId,
+  mode: _mode,
+  interactionPolicy,
+  providers,
+  disabled = false,
+  loading = false,
+  fullWidth,
+  layout = "stack",
+  size,
+  variant,
+  color,
+  onProviderPress,
+  testID
+}) {
+  const direction = layout === "inline" ? "row" : "column";
+  const resolvedFullWidth = fullWidth ?? layout === "stack";
+  return /* @__PURE__ */ jsx2(View2, {
+    direction,
+    gap: "s",
+    testID,
+    wrap: layout === "inline" ? "wrap" : undefined,
+    children: providers.map((provider) => /* @__PURE__ */ jsx2(OAuthProviderButton2, {
+      color,
+      disabled: disabled || provider.disabled,
+      fullWidth: resolvedFullWidth,
+      icon: provider.icon,
+      label: provider.label,
+      loading: loading || provider.loading,
+      onPress: onProviderPress,
+      providerId: provider.id,
+      size,
+      variant,
+      interactionPolicy
+    }, provider.id))
+  });
+}
+var OAuthProviderList2 = withZoraThemeScope(OAuthProviderListInner);
+
+// src/features/auth/adapters/inbound/SignInForm.tsx
 import React from "react";
 
 // src/features/auth/utils/authForm.ts
@@ -83,7 +243,7 @@ function normalizeIdentifierKind(identifier, identifiers) {
 }
 
 // src/features/auth/adapters/inbound/AuthFormField.tsx
-import { jsx } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 function AuthFormField({
   field,
   value,
@@ -94,7 +254,7 @@ function AuthFormField({
   interactionPolicy
 }) {
   const fieldDisabled = disabled || loading || field.disabled;
-  return /* @__PURE__ */ jsx(Field2, {
+  return /* @__PURE__ */ jsx3(Field2, {
     description: field.description,
     disabled: fieldDisabled,
     errorText: error,
@@ -104,7 +264,7 @@ function AuthFormField({
     readOnly: field.readOnly,
     required: field.required ?? hasRequiredRule(field.rules),
     testID: field.testID,
-    children: /* @__PURE__ */ jsx(TextInput2, {
+    children: /* @__PURE__ */ jsx3(TextInput2, {
       accessibilityLabel: typeof field.label === "string" ? field.label : undefined,
       autoCapitalize: field.autoCapitalize ?? (["email", "password", "url"].includes(field.type ?? "text") ? "none" : undefined),
       autoComplete: field.autoComplete,
@@ -148,7 +308,7 @@ function resolveTextContentType(field) {
 }
 
 // src/features/auth/adapters/inbound/AuthForm.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
 function AuthForm({
   fields,
   values,
@@ -168,10 +328,10 @@ function AuthForm({
     gap: "m",
     testID,
     children: [
-      /* @__PURE__ */ jsx2(FormError2, {
+      /* @__PURE__ */ jsx4(FormError2, {
         error
       }),
-      fields.map((field) => /* @__PURE__ */ jsx2(AuthFormField, {
+      fields.map((field) => /* @__PURE__ */ jsx4(AuthFormField, {
         disabled,
         error: controller.errors[field.name],
         field,
@@ -180,7 +340,7 @@ function AuthForm({
         onChange: controller.setFieldValue,
         value: values[field.name]
       }, field.name)),
-      /* @__PURE__ */ jsx2(FormActions2, {
+      /* @__PURE__ */ jsx4(FormActions2, {
         disabled,
         interactionPolicy,
         loading,
@@ -195,26 +355,31 @@ function AuthForm({
   });
 }
 
-// src/features/auth/adapters/inbound/ForgotPasswordForm.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
-function ForgotPasswordFormInner({
+// src/features/auth/adapters/inbound/SignInForm.tsx
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+function SignInFormInner({
   themeId: _themeId,
-  mode: _mode,
   interactionPolicy,
+  mode: _mode,
   identifiers = defaultIdentifiers,
   identifierLabel,
-  signInLabel = "Sign in",
+  secretLabel = "Password",
+  forgotPasswordLabel = "Forgot password",
+  signUpLabel = "Sign up",
   loading = false,
   disabled = false,
   error,
-  submitLabel = "Send code",
+  submitLabel = "Sign in",
   onSubmit,
-  onSignIn,
+  onForgotPassword,
+  onSignUp,
   testID
 }) {
   const [values, setValues] = React.useState({
-    identifier: ""
+    identifier: "",
+    secret: ""
   });
+  const hasActions = Boolean(onForgotPassword ?? onSignUp);
   const fields = React.useMemo(() => [
     {
       name: "identifier",
@@ -222,28 +387,48 @@ function ForgotPasswordFormInner({
       type: resolveIdentifierType(identifiers),
       autoCapitalize: "none",
       rules: resolveIdentifierRules(identifiers)
+    },
+    {
+      name: "secret",
+      label: secretLabel,
+      type: "password",
+      rules: [{ kind: "required" }]
     }
-  ], [identifierLabel, identifiers]);
+  ], [identifierLabel, identifiers, secretLabel]);
   const handleSubmit = React.useCallback((formValues) => onSubmit?.({
     identifier: formValues.identifier.trim(),
-    identifierKind: normalizeIdentifierKind(formValues.identifier, identifiers)
+    identifierKind: normalizeIdentifierKind(formValues.identifier, identifiers),
+    secret: formValues.secret
   }), [identifiers, onSubmit]);
-  return /* @__PURE__ */ jsx3(AuthForm, {
-    actions: onSignIn ? /* @__PURE__ */ jsx3(View2, {
+  return /* @__PURE__ */ jsx5(AuthForm, {
+    actions: hasActions ? /* @__PURE__ */ jsxs2(View2, {
       direction: "row",
       gap: "s",
       wrap: "wrap",
-      children: /* @__PURE__ */ jsx3(Button2, {
-        disabled: disabled || loading,
-        variant: "ghost",
-        onPress: () => {
-          onSignIn();
-        },
-        size: "s",
-        color: "neutral",
-        interactionPolicy,
-        children: signInLabel
-      })
+      children: [
+        onForgotPassword ? /* @__PURE__ */ jsx5(Button2, {
+          disabled: disabled || loading,
+          variant: "ghost",
+          onPress: () => {
+            onForgotPassword();
+          },
+          size: "s",
+          color: "neutral",
+          interactionPolicy,
+          children: forgotPasswordLabel
+        }) : null,
+        onSignUp ? /* @__PURE__ */ jsx5(Button2, {
+          disabled: disabled || loading,
+          variant: "ghost",
+          onPress: () => {
+            onSignUp();
+          },
+          size: "s",
+          color: "neutral",
+          interactionPolicy,
+          children: signUpLabel
+        }) : null
+      ]
     }) : undefined,
     disabled,
     error,
@@ -257,203 +442,63 @@ function ForgotPasswordFormInner({
     values
   });
 }
-var ForgotPasswordForm2 = withZoraThemeScope(ForgotPasswordFormInner);
+var SignInForm2 = withZoraThemeScope(SignInFormInner);
 
-// src/features/auth/utils/oauthProviders.ts
-var DEFAULT_OAUTH_PROVIDER_ICONS = {
-  apple: { provider: "FontAwesome", name: "apple" },
-  azure: { provider: "FontAwesome5", name: "microsoft", variant: "brand" },
-  bitbucket: { provider: "FontAwesome", name: "bitbucket" },
-  discord: { provider: "FontAwesome5", name: "discord", variant: "brand" },
-  facebook: { provider: "FontAwesome", name: "facebook" },
-  figma: { provider: "FontAwesome5", name: "figma", variant: "brand" },
-  github: { provider: "FontAwesome", name: "github" },
-  gitlab: { provider: "FontAwesome5", name: "gitlab", variant: "brand" },
-  google: { provider: "FontAwesome", name: "google" },
-  linkedin: { provider: "FontAwesome", name: "linkedin" },
-  microsoft: { provider: "FontAwesome5", name: "microsoft", variant: "brand" },
-  slack: { provider: "FontAwesome5", name: "slack", variant: "brand" },
-  spotify: { provider: "FontAwesome", name: "spotify" },
-  twitch: { provider: "FontAwesome5", name: "twitch", variant: "brand" },
-  twitter: { provider: "FontAwesome", name: "twitter" },
-  x: { provider: "FontAwesome6", name: "x-twitter", variant: "brand" },
-  zoom: { provider: "FontAwesome5", name: "video", variant: "solid" }
-};
-var DEFAULT_OAUTH_PROVIDER_LABELS = {
-  apple: "Apple",
-  azure: "Microsoft",
-  bitbucket: "Bitbucket",
-  discord: "Discord",
-  facebook: "Facebook",
-  figma: "Figma",
-  github: "GitHub",
-  gitlab: "GitLab",
-  google: "Google",
-  kakao: "Kakao",
-  keycloak: "Keycloak",
-  linkedin: "LinkedIn",
-  microsoft: "Microsoft",
-  notion: "Notion",
-  slack: "Slack",
-  spotify: "Spotify",
-  twitch: "Twitch",
-  twitter: "Twitter",
-  workos: "WorkOS",
-  x: "X",
-  zoom: "Zoom"
-};
-var oauthProviderIcons = new Map(Object.entries(DEFAULT_OAUTH_PROVIDER_ICONS));
-var oauthProviderLabels = new Map(Object.entries(DEFAULT_OAUTH_PROVIDER_LABELS));
-function resolveOAuthProviderIcon(providerId) {
-  return oauthProviderIcons.get(normalizeOAuthProviderId(providerId));
-}
-function resolveOAuthProviderLabel(providerId) {
-  const normalizedProviderId = normalizeOAuthProviderId(providerId);
-  const knownLabel = oauthProviderLabels.get(normalizedProviderId);
-  return knownLabel ?? titleCaseProviderId(normalizedProviderId);
-}
-function normalizeOAuthProviderId(providerId) {
-  return providerId.trim().toLowerCase();
-}
-function titleCaseProviderId(providerId) {
-  const words = providerId.split(/[-_\s]+/u).map((word) => word.trim()).filter((word) => word.length > 0);
-  if (words.length === 0) {
-    return "Provider";
+// src/features/auth/adapters/inbound/SignUpForm.tsx
+import React2 from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var defaultSignUpFields = [
+  {
+    name: "email",
+    label: "Email",
+    type: "email",
+    autoCapitalize: "none",
+    rules: [{ kind: "required" }, { kind: "email" }]
+  },
+  {
+    name: "password",
+    label: "Password",
+    type: "password",
+    rules: [{ kind: "required" }, { kind: "minLength", value: 8 }]
   }
-  return words.map((word) => `${word.charAt(0).toUpperCase()}${word.slice(1)}`).join(" ");
-}
-
-// src/features/auth/adapters/inbound/OAuthProviderButton.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
-function OAuthProviderButtonInner({
-  themeId: _themeId,
-  mode: _mode,
-  interactionPolicy,
-  providerId,
-  label,
-  icon,
-  disabled = false,
-  loading = false,
-  fullWidth = true,
-  size = "l",
-  variant = "outline",
-  color = "neutral",
-  onPress,
-  testID
-}) {
-  const resolvedIcon = icon ?? resolveOAuthProviderIcon(providerId);
-  const resolvedLabel = label ?? `Continue with ${resolveOAuthProviderLabel(providerId)}`;
-  return /* @__PURE__ */ jsx4(Button2, {
-    color,
-    disabled: disabled || loading || onPress === undefined,
-    fullWidth,
-    interactionPolicy,
-    leadingIcon: resolvedIcon,
-    loading,
-    onPress: () => {
-      onPress?.(providerId);
-    },
-    size,
-    testID,
-    variant,
-    children: resolvedLabel
-  });
+];
+function createValues(fields) {
+  const values = fields.reduce((nextValues, field) => {
+    nextValues[field.name] = "";
+    return nextValues;
+  }, {});
+  return values;
 }
-var OAuthProviderButton2 = withZoraThemeScope(OAuthProviderButtonInner);
-
-// src/features/auth/adapters/inbound/OAuthProviderList.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
-function OAuthProviderListInner({
+function SignUpFormInner({
   themeId: _themeId,
-  mode: _mode,
   interactionPolicy,
-  providers,
-  disabled = false,
-  loading = false,
-  fullWidth,
-  layout = "stack",
-  size,
-  variant,
-  color,
-  onProviderPress,
-  testID
-}) {
-  const direction = layout === "inline" ? "row" : "column";
-  const resolvedFullWidth = fullWidth ?? layout === "stack";
-  return /* @__PURE__ */ jsx5(View2, {
-    direction,
-    gap: "s",
-    testID,
-    wrap: layout === "inline" ? "wrap" : undefined,
-    children: providers.map((provider) => /* @__PURE__ */ jsx5(OAuthProviderButton2, {
-      color,
-      disabled: disabled || provider.disabled,
-      fullWidth: resolvedFullWidth,
-      icon: provider.icon,
-      label: provider.label,
-      loading: loading || provider.loading,
-      onPress: onProviderPress,
-      providerId: provider.id,
-      size,
-      variant,
-      interactionPolicy
-    }, provider.id))
-  });
-}
-var OAuthProviderList2 = withZoraThemeScope(OAuthProviderListInner);
-
-// src/features/auth/adapters/inbound/OtpForm.tsx
-import React2 from "react";
-import { jsx as jsx6 } from "react/jsx-runtime";
-function OtpFormInner({
-  themeId: _themeId,
   mode: _mode,
-  interactionPolicy,
-  length = 6,
-  otpLabel = "Code",
-  resendLabel = "Resend code",
-  resendDisabled = false,
-  resendLoading = false,
+  fields = defaultSignUpFields,
+  signInLabel = "Sign in",
   loading = false,
   disabled = false,
   error,
-  submitLabel = "Verify code",
+  submitLabel = "Sign up",
   onSubmit,
-  onResend,
+  onSignIn,
   testID
 }) {
-  const resolvedLength = Math.max(1, length);
-  const [values, setValues] = React2.useState({
-    otp: ""
-  });
-  const fields = React2.useMemo(() => [
-    {
-      name: "otp",
-      label: otpLabel,
-      type: "otp",
-      maxLength: resolvedLength,
-      rules: [{ kind: "required" }, { kind: "minLength", value: resolvedLength }]
-    }
-  ], [otpLabel, resolvedLength]);
-  const handleSubmit = React2.useCallback((formValues) => onSubmit?.({
-    otp: formValues.otp.trim()
-  }), [onSubmit]);
+  const [values, setValues] = React2.useState(() => createValues(fields));
   return /* @__PURE__ */ jsx6(AuthForm, {
-    actions: onResend ? /* @__PURE__ */ jsx6(View2, {
+    actions: onSignIn ? /* @__PURE__ */ jsx6(View2, {
       direction: "row",
       gap: "s",
       wrap: "wrap",
       children: /* @__PURE__ */ jsx6(Button2, {
-        disabled: disabled || loading || resendDisabled,
+        disabled: disabled || loading,
         variant: "ghost",
-        loading: resendLoading,
         onPress: () => {
-          onResend();
+          onSignIn();
         },
         size: "s",
         color: "neutral",
         interactionPolicy,
-        children: resendLabel
+        children: signInLabel
       })
     }) : undefined,
     disabled,
@@ -462,40 +507,211 @@ function OtpFormInner({
     interactionPolicy,
     loading,
     onChange: setValues,
-    onSubmit: handleSubmit,
+    onSubmit,
     submitLabel,
     testID,
     values
   });
 }
-var OtpForm2 = withZoraThemeScope(OtpFormInner);
+var SignUpForm2 = withZoraThemeScope(SignUpFormInner);
 
-// src/features/auth/adapters/inbound/SignInForm.tsx
-import React3 from "react";
-import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
-function SignInFormInner({
+// src/features/auth/adapters/inbound/AuthScreen.tsx
+var import_react_native = __toESM(require_cjs(), 1);
+import { jsx as jsx7, jsxs as jsxs3, Fragment } from "react/jsx-runtime";
+var AuthScreen2 = withZoraThemeScope(AuthScreenInner);
+function AuthScreenInner({
   themeId: _themeId,
+  mode: _themeMode,
+  interactionPolicy,
+  authMode,
+  title,
+  description,
+  info,
+  error,
+  loading = false,
+  disabled = false,
+  identifiers,
+  identifierLabel,
+  signUpFields,
+  oauthProviders = [],
+  oauthSeparatorLabel = "or continue with password",
+  onModeChange,
+  onOAuthProviderPress,
+  onSignInSubmit,
+  onSignUpSubmit,
+  testID
+}) {
+  const effectiveTitle = title ?? (authMode === "signIn" ? "Sign in" : "Create account");
+  const hasOAuth = oauthProviders.length > 0;
+  return /* @__PURE__ */ jsx7(KeyboardAvoidingView2, {
+    behavior: import_react_native.Platform.select({ android: "height", ios: "padding" }),
+    interactionPolicy,
+    style: { flex: 1 },
+    children: /* @__PURE__ */ jsx7(ScrollView2, {
+      bg: "background",
+      contentContainerStyle: { flexGrow: 1 },
+      flex: 1,
+      interactionPolicy,
+      keyboardShouldPersistTaps: "handled",
+      children: /* @__PURE__ */ jsx7(View2, {
+        align: "center",
+        flex: 1,
+        interactionPolicy,
+        justify: "center",
+        px: { base: "m", md: "xl" },
+        py: "xl",
+        children: /* @__PURE__ */ jsxs3(Surface2, {
+          gap: "m",
+          maxWidth: 560,
+          p: { base: "l", md: "xl" },
+          radius: "l",
+          testID,
+          variant: "outline",
+          width: "100%",
+          children: [
+            /* @__PURE__ */ jsxs3(View2, {
+              gap: "xs",
+              interactionPolicy,
+              children: [
+                /* @__PURE__ */ jsx7(Text3, {
+                  variant: "lead",
+                  weight: "semiBold",
+                  children: effectiveTitle
+                }),
+                description ? /* @__PURE__ */ jsx7(Text3, {
+                  emphasis: "muted",
+                  variant: "bodySmall",
+                  children: description
+                }) : null
+              ]
+            }),
+            hasOAuth ? /* @__PURE__ */ jsxs3(Fragment, {
+              children: [
+                /* @__PURE__ */ jsx7(OAuthProviderList2, {
+                  disabled: disabled || loading,
+                  interactionPolicy,
+                  onProviderPress: onOAuthProviderPress,
+                  providers: oauthProviders,
+                  testID: testID ? `${testID}-oauth` : undefined
+                }),
+                /* @__PURE__ */ jsxs3(View2, {
+                  align: "center",
+                  direction: "row",
+                  gap: "s",
+                  interactionPolicy,
+                  children: [
+                    /* @__PURE__ */ jsx7(View2, {
+                      flex: 1,
+                      interactionPolicy,
+                      children: /* @__PURE__ */ jsx7(Divider2, {
+                        interactionPolicy
+                      })
+                    }),
+                    /* @__PURE__ */ jsx7(Text3, {
+                      emphasis: "muted",
+                      variant: "bodySmall",
+                      children: oauthSeparatorLabel
+                    }),
+                    /* @__PURE__ */ jsx7(View2, {
+                      flex: 1,
+                      interactionPolicy,
+                      children: /* @__PURE__ */ jsx7(Divider2, {
+                        interactionPolicy
+                      })
+                    })
+                  ]
+                })
+              ]
+            }) : null,
+            /* @__PURE__ */ jsx7(AuthScreenForm, {
+              authMode,
+              disabled,
+              error,
+              identifierLabel,
+              identifiers,
+              interactionPolicy,
+              loading,
+              onModeChange,
+              onSignInSubmit,
+              onSignUpSubmit,
+              signUpFields,
+              testID: testID ? `${testID}-form` : undefined
+            }),
+            info ? /* @__PURE__ */ jsx7(Text3, {
+              color: "success",
+              variant: "bodySmall",
+              children: info
+            }) : null
+          ]
+        })
+      })
+    })
+  });
+}
+function AuthScreenForm({
+  authMode,
+  disabled,
+  error,
+  identifierLabel,
+  identifiers,
   interactionPolicy,
+  loading,
+  onModeChange,
+  onSignInSubmit,
+  onSignUpSubmit,
+  signUpFields,
+  testID
+}) {
+  if (authMode === "signIn") {
+    return /* @__PURE__ */ jsx7(SignInForm2, {
+      disabled,
+      error,
+      identifierLabel,
+      identifiers,
+      interactionPolicy,
+      loading,
+      onSignUp: onModeChange ? () => onModeChange("signUp") : undefined,
+      onSubmit: onSignInSubmit,
+      signUpLabel: "Need an account? Sign up",
+      submitLabel: "Sign in",
+      testID
+    });
+  }
+  return /* @__PURE__ */ jsx7(SignUpForm2, {
+    disabled,
+    error,
+    fields: signUpFields,
+    interactionPolicy,
+    loading,
+    onSignIn: onModeChange ? () => onModeChange("signIn") : undefined,
+    onSubmit: onSignUpSubmit,
+    signInLabel: "Already have an account? Sign in",
+    submitLabel: "Create account",
+    testID
+  });
+}
+
+// src/features/auth/adapters/inbound/ForgotPasswordForm.tsx
+import React3 from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+function ForgotPasswordFormInner({
+  themeId: _themeId,
   mode: _mode,
+  interactionPolicy,
   identifiers = defaultIdentifiers,
   identifierLabel,
-  secretLabel = "Password",
-  forgotPasswordLabel = "Forgot password",
-  signUpLabel = "Sign up",
+  signInLabel = "Sign in",
   loading = false,
   disabled = false,
   error,
-  submitLabel = "Sign in",
+  submitLabel = "Send code",
   onSubmit,
-  onForgotPassword,
-  onSignUp,
+  onSignIn,
   testID
 }) {
   const [values, setValues] = React3.useState({
-    identifier: "",
-    secret: ""
+    identifier: ""
   });
-  const hasActions = Boolean(onForgotPassword ?? onSignUp);
   const fields = React3.useMemo(() => [
     {
       name: "identifier",
@@ -503,48 +719,28 @@ function SignInFormInner({
       type: resolveIdentifierType(identifiers),
       autoCapitalize: "none",
       rules: resolveIdentifierRules(identifiers)
-    },
-    {
-      name: "secret",
-      label: secretLabel,
-      type: "password",
-      rules: [{ kind: "required" }]
     }
-  ], [identifierLabel, identifiers, secretLabel]);
+  ], [identifierLabel, identifiers]);
   const handleSubmit = React3.useCallback((formValues) => onSubmit?.({
     identifier: formValues.identifier.trim(),
-    identifierKind: normalizeIdentifierKind(formValues.identifier, identifiers),
-    secret: formValues.secret
+    identifierKind: normalizeIdentifierKind(formValues.identifier, identifiers)
   }), [identifiers, onSubmit]);
-  return /* @__PURE__ */ jsx7(AuthForm, {
-    actions: hasActions ? /* @__PURE__ */ jsxs2(View2, {
+  return /* @__PURE__ */ jsx8(AuthForm, {
+    actions: onSignIn ? /* @__PURE__ */ jsx8(View2, {
       direction: "row",
       gap: "s",
       wrap: "wrap",
-      children: [
-        onForgotPassword ? /* @__PURE__ */ jsx7(Button2, {
-          disabled: disabled || loading,
-          variant: "ghost",
-          onPress: () => {
-            onForgotPassword();
-          },
-          size: "s",
-          color: "neutral",
-          interactionPolicy,
-          children: forgotPasswordLabel
-        }) : null,
-        onSignUp ? /* @__PURE__ */ jsx7(Button2, {
-          disabled: disabled || loading,
-          variant: "ghost",
-          onPress: () => {
-            onSignUp();
-          },
-          size: "s",
-          color: "neutral",
-          interactionPolicy,
-          children: signUpLabel
-        }) : null
-      ]
+      children: /* @__PURE__ */ jsx8(Button2, {
+        disabled: disabled || loading,
+        variant: "ghost",
+        onPress: () => {
+          onSignIn();
+        },
+        size: "s",
+        color: "neutral",
+        interactionPolicy,
+        children: signInLabel
+      })
     }) : undefined,
     disabled,
     error,
@@ -558,63 +754,60 @@ function SignInFormInner({
     values
   });
 }
-var SignInForm2 = withZoraThemeScope(SignInFormInner);
+var ForgotPasswordForm2 = withZoraThemeScope(ForgotPasswordFormInner);
 
-// src/features/auth/adapters/inbound/SignUpForm.tsx
+// src/features/auth/adapters/inbound/OtpForm.tsx
 import React4 from "react";
-import { jsx as jsx8 } from "react/jsx-runtime";
-var defaultSignUpFields = [
-  {
-    name: "email",
-    label: "Email",
-    type: "email",
-    autoCapitalize: "none",
-    rules: [{ kind: "required" }, { kind: "email" }]
-  },
-  {
-    name: "password",
-    label: "Password",
-    type: "password",
-    rules: [{ kind: "required" }, { kind: "minLength", value: 8 }]
-  }
-];
-function createValues(fields) {
-  const values = fields.reduce((nextValues, field) => {
-    nextValues[field.name] = "";
-    return nextValues;
-  }, {});
-  return values;
-}
-function SignUpFormInner({
+import { jsx as jsx9 } from "react/jsx-runtime";
+function OtpFormInner({
   themeId: _themeId,
-  interactionPolicy,
   mode: _mode,
-  fields = defaultSignUpFields,
-  signInLabel = "Sign in",
+  interactionPolicy,
+  length = 6,
+  otpLabel = "Code",
+  resendLabel = "Resend code",
+  resendDisabled = false,
+  resendLoading = false,
   loading = false,
   disabled = false,
   error,
-  submitLabel = "Sign up",
+  submitLabel = "Verify code",
   onSubmit,
-  onSignIn,
+  onResend,
   testID
 }) {
-  const [values, setValues] = React4.useState(() => createValues(fields));
-  return /* @__PURE__ */ jsx8(AuthForm, {
-    actions: onSignIn ? /* @__PURE__ */ jsx8(View2, {
+  const resolvedLength = Math.max(1, length);
+  const [values, setValues] = React4.useState({
+    otp: ""
+  });
+  const fields = React4.useMemo(() => [
+    {
+      name: "otp",
+      label: otpLabel,
+      type: "otp",
+      maxLength: resolvedLength,
+      rules: [{ kind: "required" }, { kind: "minLength", value: resolvedLength }]
+    }
+  ], [otpLabel, resolvedLength]);
+  const handleSubmit = React4.useCallback((formValues) => onSubmit?.({
+    otp: formValues.otp.trim()
+  }), [onSubmit]);
+  return /* @__PURE__ */ jsx9(AuthForm, {
+    actions: onResend ? /* @__PURE__ */ jsx9(View2, {
       direction: "row",
       gap: "s",
       wrap: "wrap",
-      children: /* @__PURE__ */ jsx8(Button2, {
-        disabled: disabled || loading,
+      children: /* @__PURE__ */ jsx9(Button2, {
+        disabled: disabled || loading || resendDisabled,
         variant: "ghost",
+        loading: resendLoading,
         onPress: () => {
-          onSignIn();
+          onResend();
         },
         size: "s",
         color: "neutral",
         interactionPolicy,
-        children: signInLabel
+        children: resendLabel
       })
     }) : undefined,
     disabled,
@@ -623,11 +816,11 @@ function SignUpFormInner({
     interactionPolicy,
     loading,
     onChange: setValues,
-    onSubmit,
+    onSubmit: handleSubmit,
     submitLabel,
     testID,
     values
   });
 }
-var SignUpForm2 = withZoraThemeScope(SignUpFormInner);
-export { ForgotPasswordForm2, OAuthProviderButton2, OAuthProviderList2, OtpForm2, SignInForm2, SignUpForm2 };
+var OtpForm2 = withZoraThemeScope(OtpFormInner);
+export { OAuthProviderButton2, OAuthProviderList2, SignInForm2, SignUpForm2, AuthScreen2, ForgotPasswordForm2, OtpForm2 };