@oxyhq/services 16.0.0 → 17.0.0

package/lib/module/ui/components/OxyAccountDialog.js

@@ -0,0 +1,761 @@
+"use strict";
+
+/**
+ * OxyAccountDialog — the ONE unified account dialog for `@oxyhq/services`.
+ *
+ * A thin React Native binding over the headless `AccountDialogController` in
+ * `@oxyhq/core` (bound via `useSyncExternalStore`), presented as a bottom-sheet
+ * modal. It REPLACES the five drifting device/account surfaces the SDK shipped
+ * before (`ProfileMenu`, `AccountMenu`, `AccountSwitcher`, `SignInAccountChooser`,
+ * and `SignInModal`) with a single implementation whose data + state machine live
+ * in core, so the RN and web (auth-sdk) bindings render the SAME list from the
+ * SAME logic and cannot diverge.
+ *
+ * Views (from `snapshot.view`):
+ *  - `accounts` — the unified `SwitchableAccount[]` list (device sign-ins ∪ graph
+ *    accounts). Tapping a row switches through `controller.switchTo(accountId)`
+ *    (the uniform switch), the active row is flagged, and a "+ Add account" row
+ *    opens the sign-in entry. This is what `ProfileButton` opens.
+ *  - `add` / `signin` — the sign-in entry: primary "Sign in with Oxy" (device
+ *    flow), "Scan a QR", and a secondary "Use a password" hand-off that opens
+ *    auth.oxy.so (password + 2FA are NOT in the SDK).
+ *  - `qr` — the cross-device QR handoff + its waiting state.
+ *
+ * Per-account color re-theming uses Bloom's `APP_COLOR_PRESETS` + `BloomColorScope`
+ * (same visual language auth.oxy.so uses). Base theming is `useTheme()` + a
+ * `StyleSheet`, so the dialog renders correctly in EVERY consumer — including apps
+ * that do not use NativeWind (e.g. the accounts app). Modal contents are wrapped
+ * in `<GestureHandlerRootView>` because RN's `Modal` renders into its own window.
+ */
+
+import { useCallback, useMemo, useState, useSyncExternalStore } from 'react';
+import { Modal, Platform, Pressable, ScrollView, StyleSheet, View } from 'react-native';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { MaterialCommunityIcons } from '@expo/vector-icons';
+import QRCode from 'react-native-qrcode-svg';
+import { Avatar } from '@oxyhq/bloom/avatar';
+import { Button } from '@oxyhq/bloom/button';
+import { Text } from '@oxyhq/bloom/typography';
+import { useTheme, BloomColorScope, APP_COLOR_NAMES, APP_COLOR_PRESETS } from '@oxyhq/bloom/theme';
+import { useQueryClient } from '@tanstack/react-query';
+import { useOxy } from "../context/OxyContext.js";
+import { useI18n } from "../hooks/useI18n.js";
+import OxyLogo from "./OxyLogo.js";
+
+/** Diameter of a row avatar. */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ROW_AVATAR_SIZE = 40;
+/** High-contrast QR colors — intentionally fixed (NOT themed) for scan reliability. */
+const QR_PLATE_BG = '#FFFFFF';
+const QR_FOREGROUND = '#000000';
+const QR_SIZE = 196;
+const isWeb = Platform.OS === 'web';
+
+/**
+ * Resolve an account's stored color (a named Bloom preset, e.g. `'purple'`) to
+ * a concrete brand hex for the row accent. Falls back to the theme primary when
+ * the account has no color or the value is not a recognized preset, so the accent
+ * renders in EVERY consumer regardless of NativeWind availability.
+ */
+function resolveAccentHex(color, fallback) {
+  const preset = toPreset(color);
+  return preset ? APP_COLOR_PRESETS[preset].hex : fallback;
+}
+
+/** Narrow a stored color string to a known `AppColorName`, or `undefined`. */
+function toPreset(color) {
+  if (!color) return undefined;
+  return APP_COLOR_NAMES.includes(color) ? color : undefined;
+}
+/**
+ * The unified account dialog. Mounted once by `OxyProvider`; opened imperatively
+ * via `useOxy().openAccountDialog(view?)` (or the back-compat `showSignInModal`).
+ */
+const OxyAccountDialog = () => {
+  const {
+    accountDialogController: controller,
+    isAccountDialogOpen,
+    closeAccountDialog,
+    showBottomSheet,
+    logoutAll,
+    refreshAccounts
+  } = useOxy();
+  const theme = useTheme();
+  const {
+    t
+  } = useI18n();
+  const queryClient = useQueryClient();
+
+  // Bind the headless controller. `getSnapshot` returns a stable reference
+  // between changes, so it is `useSyncExternalStore`-safe. Guard the no-provider
+  // loading state (`controller` is `null`) with an inert store.
+  const subscribe = useCallback(listener => controller ? controller.subscribe(listener) : () => undefined, [controller]);
+  const getSnapshot = useCallback(() => controller ? controller.getSnapshot() : EMPTY_SNAPSHOT, [controller]);
+  const snapshot = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  const [switching, setSwitching] = useState(false);
+  const handleSwitch = useCallback(async accountId => {
+    if (!controller || switching) return;
+    if (accountId === snapshot.activeAccountId) {
+      closeAccountDialog();
+      return;
+    }
+    setSwitching(true);
+    try {
+      await controller.switchTo(accountId);
+      // A switch succeeds unless the controller recorded an error. On success
+      // reload the app's account graph and drop cached account-scoped data so
+      // the new active identity re-fetches — the same side effects the
+      // context's own `switchToAccount` performs.
+      if (!controller.getSnapshot().error) {
+        void refreshAccounts();
+        queryClient.invalidateQueries();
+        closeAccountDialog();
+      }
+    } finally {
+      setSwitching(false);
+    }
+  }, [controller, switching, snapshot.activeAccountId, closeAccountDialog, refreshAccounts, queryClient]);
+  const handleManage = useCallback(() => {
+    closeAccountDialog();
+    showBottomSheet?.('ManageAccount');
+  }, [closeAccountDialog, showBottomSheet]);
+  const handleSignOutAll = useCallback(() => {
+    closeAccountDialog();
+    void logoutAll();
+  }, [closeAccountDialog, logoutAll]);
+  const handlers = useMemo(() => ({
+    onSwitch: accountId => {
+      void handleSwitch(accountId);
+    },
+    onAdd: () => controller?.add(),
+    onManage: handleManage,
+    onClose: closeAccountDialog
+  }), [handleSwitch, controller, handleManage, closeAccountDialog]);
+  if (!isAccountDialogOpen || !controller) {
+    return null;
+  }
+  const {
+    view
+  } = snapshot;
+  const showBack = view === 'qr' || view === 'add' && snapshot.accounts.length > 0;
+  return /*#__PURE__*/_jsx(Modal, {
+    visible: true,
+    transparent: true,
+    animationType: isWeb ? 'fade' : 'slide',
+    statusBarTranslucent: true,
+    onRequestClose: closeAccountDialog,
+    children: /*#__PURE__*/_jsx(GestureHandlerRootView, {
+      style: styles.root,
+      children: /*#__PURE__*/_jsxs(View, {
+        style: [styles.backdrop, {
+          backgroundColor: theme.colors.overlay
+        }],
+        children: [/*#__PURE__*/_jsx(Pressable, {
+          style: StyleSheet.absoluteFill,
+          onPress: closeAccountDialog,
+          accessibilityLabel: t('common.actions.close') || 'Close',
+          accessibilityRole: "button"
+        }), /*#__PURE__*/_jsxs(View, {
+          style: [styles.card, isWeb ? styles.cardCentered : styles.cardSheet, {
+            backgroundColor: theme.colors.card,
+            borderColor: theme.colors.border
+          }],
+          children: [/*#__PURE__*/_jsx(DialogHeader, {
+            snapshot: snapshot,
+            theme: theme,
+            t: t,
+            showBack: showBack,
+            onBack: () => controller.setView('accounts'),
+            onClose: closeAccountDialog
+          }), /*#__PURE__*/_jsx(ScrollView, {
+            style: styles.body,
+            contentContainerStyle: styles.bodyContent,
+            showsVerticalScrollIndicator: false,
+            children: view === 'accounts' ? /*#__PURE__*/_jsx(AccountsView, {
+              snapshot: snapshot,
+              theme: theme,
+              t: t,
+              handlers: handlers
+            }) : view === 'qr' ? /*#__PURE__*/_jsx(QrView, {
+              snapshot: snapshot,
+              theme: theme,
+              t: t,
+              onRetry: () => void controller.showQr()
+            }) : /*#__PURE__*/_jsx(SignInView, {
+              snapshot: snapshot,
+              theme: theme,
+              t: t,
+              handlers: handlers,
+              onSignInWithOxy: () => void controller.signInWithOxy(),
+              onScanQr: () => void controller.showQr(),
+              onUsePassword: () => controller.openPasswordAtOxyAuth({
+                returnUrl: isWeb ? currentHref() : undefined
+              })
+            })
+          })]
+        })]
+      })
+    })
+  });
+};
+
+// ---------------------------------------------------------------------------
+// Header
+// ---------------------------------------------------------------------------
+
+const DialogHeader = ({
+  snapshot,
+  theme,
+  t,
+  showBack,
+  onBack,
+  onClose
+}) => {
+  const {
+    title,
+    subtitle
+  } = headerCopy(snapshot.view, snapshot.accounts.length, t);
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.header,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.headerBar,
+      children: [showBack ? /*#__PURE__*/_jsx(Pressable, {
+        onPress: onBack,
+        style: [styles.iconButton, {
+          backgroundColor: theme.colors.backgroundSecondary
+        }],
+        accessibilityRole: "button",
+        accessibilityLabel: t('common.actions.back') || 'Back',
+        children: /*#__PURE__*/_jsx(MaterialCommunityIcons, {
+          name: "chevron-left",
+          size: 22,
+          color: theme.colors.textSecondary
+        })
+      }) : /*#__PURE__*/_jsx(View, {
+        style: styles.iconButton
+      }), /*#__PURE__*/_jsx(OxyLogo, {
+        variant: "icon",
+        size: 34,
+        fillColor: theme.colors.primary
+      }), /*#__PURE__*/_jsx(Pressable, {
+        onPress: onClose,
+        style: [styles.iconButton, {
+          backgroundColor: theme.colors.backgroundSecondary
+        }],
+        accessibilityRole: "button",
+        accessibilityLabel: t('common.actions.close') || 'Close',
+        children: /*#__PURE__*/_jsx(MaterialCommunityIcons, {
+          name: "close",
+          size: 20,
+          color: theme.colors.textSecondary
+        })
+      })]
+    }), /*#__PURE__*/_jsx(Text, {
+      style: [styles.title, {
+        color: theme.colors.text
+      }],
+      numberOfLines: 1,
+      children: title
+    }), subtitle ? /*#__PURE__*/_jsx(Text, {
+      style: [styles.subtitle, {
+        color: theme.colors.textSecondary
+      }],
+      numberOfLines: 2,
+      children: subtitle
+    }) : null]
+  });
+};
+
+// ---------------------------------------------------------------------------
+// Accounts view
+// ---------------------------------------------------------------------------
+
+const AccountsView = ({
+  snapshot,
+  theme,
+  t,
+  handlers
+}) => {
+  if (snapshot.loading && snapshot.accounts.length === 0) {
+    return /*#__PURE__*/_jsxs(View, {
+      style: styles.centeredBlock,
+      children: [/*#__PURE__*/_jsx(MaterialCommunityIcons, {
+        name: "loading",
+        size: 24,
+        color: theme.colors.textSecondary
+      }), /*#__PURE__*/_jsx(Text, {
+        style: [styles.mutedText, {
+          color: theme.colors.textSecondary
+        }],
+        children: t('accountSwitcher.loading') || 'Loading accounts…'
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.rows,
+    children: [snapshot.accounts.map(account => /*#__PURE__*/_jsx(AccountRow, {
+      account: account,
+      theme: theme,
+      switching: snapshot.switchingAccountId === account.accountId,
+      disabled: snapshot.switchingAccountId !== null,
+      onPress: () => handlers.onSwitch(account.accountId)
+    }, account.accountId)), /*#__PURE__*/_jsxs(Pressable, {
+      style: [styles.addRow, {
+        borderColor: theme.colors.border
+      }],
+      onPress: handlers.onAdd,
+      accessibilityRole: "button",
+      accessibilityLabel: t('signin.addAccountTitle') || 'Add another account',
+      children: [/*#__PURE__*/_jsx(View, {
+        style: [styles.addBadge, {
+          borderColor: theme.colors.border
+        }],
+        children: /*#__PURE__*/_jsx(MaterialCommunityIcons, {
+          name: "plus",
+          size: 20,
+          color: theme.colors.textSecondary
+        })
+      }), /*#__PURE__*/_jsx(Text, {
+        style: [styles.rowName, {
+          color: theme.colors.textSecondary
+        }],
+        children: t('signin.addAccountTitle') || 'Add another account'
+      })]
+    }), /*#__PURE__*/_jsx(View, {
+      style: styles.footerLinks,
+      children: /*#__PURE__*/_jsx(Pressable, {
+        onPress: handlers.onManage,
+        accessibilityRole: "button",
+        children: /*#__PURE__*/_jsx(Text, {
+          style: [styles.linkText, {
+            color: theme.colors.primary
+          }],
+          children: t('accountMenu.manage') || 'Manage accounts'
+        })
+      })
+    })]
+  });
+};
+const AccountRow = ({
+  account,
+  theme,
+  switching,
+  disabled,
+  onPress
+}) => {
+  const accent = resolveAccentHex(account.color, theme.colors.primary);
+  const rowStyle = [styles.accountRow, {
+    borderColor: account.isCurrent ? accent : theme.colors.border,
+    backgroundColor: theme.colors.card
+  }, disabled && !switching ? styles.rowDisabled : null];
+  return /*#__PURE__*/_jsx(BloomColorScope, {
+    colorPreset: toPreset(account.color),
+    asChild: true,
+    children: /*#__PURE__*/_jsxs(Pressable, {
+      style: rowStyle,
+      onPress: onPress,
+      disabled: disabled,
+      accessibilityRole: "button",
+      accessibilityState: {
+        selected: account.isCurrent,
+        disabled
+      },
+      accessibilityLabel: account.displayName,
+      children: [/*#__PURE__*/_jsx(View, {
+        style: [styles.avatarRing, {
+          borderColor: account.isCurrent ? accent : 'transparent'
+        }],
+        children: /*#__PURE__*/_jsx(Avatar, {
+          source: account.user.avatar ?? undefined,
+          variant: "thumb",
+          name: account.displayName,
+          size: ROW_AVATAR_SIZE
+        })
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.rowMeta,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: [styles.rowName, {
+            color: theme.colors.text
+          }],
+          numberOfLines: 1,
+          children: account.displayName
+        }), account.email ? /*#__PURE__*/_jsx(Text, {
+          style: [styles.rowHandle, {
+            color: theme.colors.textSecondary
+          }],
+          numberOfLines: 1,
+          children: account.email
+        }) : null]
+      }), switching ? /*#__PURE__*/_jsx(MaterialCommunityIcons, {
+        name: "loading",
+        size: 20,
+        color: accent
+      }) : account.isCurrent ? /*#__PURE__*/_jsx(MaterialCommunityIcons, {
+        name: "check-circle",
+        size: 20,
+        color: accent
+      }) : /*#__PURE__*/_jsx(MaterialCommunityIcons, {
+        name: "chevron-right",
+        size: 20,
+        color: theme.colors.textSecondary
+      })]
+    })
+  });
+};
+
+// ---------------------------------------------------------------------------
+// Sign-in view (add / signin)
+// ---------------------------------------------------------------------------
+
+const SignInView = ({
+  snapshot,
+  theme,
+  t,
+  handlers,
+  onSignInWithOxy,
+  onScanQr,
+  onUsePassword
+}) => /*#__PURE__*/_jsxs(View, {
+  style: styles.signInBlock,
+  children: [snapshot.accounts.length > 0 ? /*#__PURE__*/_jsxs(View, {
+    style: styles.rows,
+    children: [snapshot.accounts.map(account => /*#__PURE__*/_jsx(AccountRow, {
+      account: account,
+      theme: theme,
+      switching: snapshot.switchingAccountId === account.accountId,
+      disabled: snapshot.switchingAccountId !== null,
+      onPress: () => handlers.onSwitch(account.accountId)
+    }, account.accountId)), /*#__PURE__*/_jsx(Dividerish, {
+      theme: theme,
+      label: t('signin.or') || 'or'
+    })]
+  }) : null, /*#__PURE__*/_jsx(Button, {
+    variant: "primary",
+    onPress: onSignInWithOxy,
+    style: styles.primaryButton,
+    children: "Sign in with Oxy"
+  }), /*#__PURE__*/_jsx(Button, {
+    variant: "secondary",
+    onPress: onScanQr,
+    style: styles.secondaryButton,
+    children: t('accountSwitcher.scanQr') || 'Scan a QR from another device'
+  }), /*#__PURE__*/_jsx(Pressable, {
+    onPress: onUsePassword,
+    accessibilityRole: "button",
+    style: styles.passwordLink,
+    children: /*#__PURE__*/_jsx(Text, {
+      style: [styles.linkText, {
+        color: theme.colors.textSecondary
+      }],
+      children: "Use a password instead"
+    })
+  })]
+});
+const Dividerish = ({
+  theme,
+  label
+}) => /*#__PURE__*/_jsxs(View, {
+  style: styles.dividerRow,
+  children: [/*#__PURE__*/_jsx(View, {
+    style: [styles.dividerLine, {
+      backgroundColor: theme.colors.border
+    }]
+  }), /*#__PURE__*/_jsx(Text, {
+    style: [styles.dividerText, {
+      color: theme.colors.textSecondary
+    }],
+    children: label
+  }), /*#__PURE__*/_jsx(View, {
+    style: [styles.dividerLine, {
+      backgroundColor: theme.colors.border
+    }]
+  })]
+});
+
+// ---------------------------------------------------------------------------
+// QR view
+// ---------------------------------------------------------------------------
+
+const QrView = ({
+  snapshot,
+  theme,
+  t,
+  onRetry
+}) => {
+  const {
+    signIn
+  } = snapshot;
+  if (signIn.phase === 'error') {
+    return /*#__PURE__*/_jsxs(View, {
+      style: styles.centeredBlock,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: [styles.errorText, {
+          color: theme.colors.error
+        }],
+        children: signIn.error || 'Sign-in failed. Please try again.'
+      }), /*#__PURE__*/_jsx(Button, {
+        variant: "secondary",
+        onPress: onRetry,
+        style: styles.secondaryButton,
+        children: t('common.actions.tryAgain') || 'Try again'
+      })]
+    });
+  }
+  if (signIn.phase === 'starting' || signIn.phase === 'authorized' || !signIn.qrPayload) {
+    const label = signIn.phase === 'authorized' ? t('signin.status.signingIn') || 'Signing in…' : t('accountSwitcher.loading') || 'Preparing sign-in…';
+    return /*#__PURE__*/_jsxs(View, {
+      style: styles.centeredBlock,
+      children: [/*#__PURE__*/_jsx(MaterialCommunityIcons, {
+        name: "loading",
+        size: 26,
+        color: theme.colors.primary
+      }), /*#__PURE__*/_jsx(Text, {
+        style: [styles.mutedText, {
+          color: theme.colors.textSecondary
+        }],
+        children: label
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.centeredBlock,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: styles.qrPlate,
+      children: /*#__PURE__*/_jsx(QRCode, {
+        value: signIn.qrPayload,
+        size: QR_SIZE,
+        backgroundColor: QR_PLATE_BG,
+        color: QR_FOREGROUND
+      })
+    }), /*#__PURE__*/_jsx(Text, {
+      style: [styles.mutedText, {
+        color: theme.colors.textSecondary
+      }],
+      children: t('accountSwitcher.scanWithOxy') || 'Scan with any Oxy app and approve.'
+    })]
+  });
+};
+
+// ---------------------------------------------------------------------------
+// Copy + helpers
+// ---------------------------------------------------------------------------
+
+function headerCopy(view, accountCount, t) {
+  switch (view) {
+    case 'accounts':
+      return {
+        title: t('accountSwitcher.sections.yourAccounts') || 'Your accounts',
+        subtitle: t('signin.chooser.subtitle') || 'Choose which account to continue with.'
+      };
+    case 'qr':
+      return {
+        title: t('accountSwitcher.scanTitle') || 'Scan with Oxy',
+        subtitle: t('accountSwitcher.scanSubtitle') || 'Approve from your phone.'
+      };
+    default:
+      return accountCount > 0 ? {
+        title: t('signin.addAccountTitle') || 'Add another account',
+        subtitle: t('signin.addAccountSubtitle') || 'Sign in with another account.'
+      } : {
+        title: t('signin.title') || 'Sign in',
+        subtitle: t('signin.subtitle') || 'One identity for the whole ecosystem.'
+      };
+  }
+}
+
+/** Current document URL on web; `undefined` where `location` is absent. */
+function currentHref() {
+  const location = globalThis.location;
+  return typeof location?.href === 'string' ? location.href : undefined;
+}
+const EMPTY_SNAPSHOT = {
+  view: 'accounts',
+  accounts: [],
+  activeAccountId: null,
+  loading: false,
+  error: null,
+  switchingAccountId: null,
+  signIn: {
+    phase: 'idle',
+    authorizeCode: null,
+    qrPayload: null,
+    expiresAt: null,
+    error: null
+  }
+};
+const styles = StyleSheet.create({
+  root: {
+    flex: 1
+  },
+  backdrop: {
+    flex: 1,
+    justifyContent: isWeb ? 'center' : 'flex-end',
+    alignItems: 'center'
+  },
+  card: {
+    width: '100%',
+    maxWidth: 420,
+    borderWidth: StyleSheet.hairlineWidth,
+    paddingHorizontal: 20,
+    paddingTop: 16,
+    paddingBottom: 24
+  },
+  cardCentered: {
+    borderRadius: 28
+  },
+  cardSheet: {
+    borderTopLeftRadius: 28,
+    borderTopRightRadius: 28
+  },
+  header: {
+    alignItems: 'center',
+    marginBottom: 12
+  },
+  headerBar: {
+    width: '100%',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: 8
+  },
+  iconButton: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  title: {
+    fontSize: 22,
+    fontWeight: '800',
+    letterSpacing: -0.4,
+    textAlign: 'center',
+    marginTop: 6
+  },
+  subtitle: {
+    fontSize: 14,
+    lineHeight: 19,
+    textAlign: 'center',
+    marginTop: 4
+  },
+  body: {
+    width: '100%'
+  },
+  bodyContent: {
+    paddingTop: 4,
+    paddingBottom: 4
+  },
+  rows: {
+    width: '100%',
+    gap: 8
+  },
+  accountRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderRadius: 16,
+    paddingVertical: 10,
+    paddingHorizontal: 12
+  },
+  rowDisabled: {
+    opacity: 0.6
+  },
+  avatarRing: {
+    borderRadius: 9999,
+    borderWidth: 2,
+    padding: 1
+  },
+  rowMeta: {
+    flex: 1,
+    minWidth: 0
+  },
+  rowName: {
+    fontSize: 15,
+    fontWeight: '600'
+  },
+  rowHandle: {
+    fontSize: 12.5,
+    marginTop: 1
+  },
+  addRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderStyle: 'dashed',
+    borderRadius: 16,
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+    marginTop: 8
+  },
+  addBadge: {
+    width: ROW_AVATAR_SIZE,
+    height: ROW_AVATAR_SIZE,
+    borderRadius: 9999,
+    borderWidth: StyleSheet.hairlineWidth,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  footerLinks: {
+    alignItems: 'center',
+    marginTop: 16
+  },
+  linkText: {
+    fontSize: 14,
+    fontWeight: '600'
+  },
+  signInBlock: {
+    width: '100%'
+  },
+  primaryButton: {
+    width: '100%',
+    borderRadius: 14,
+    marginTop: 8
+  },
+  secondaryButton: {
+    width: '100%',
+    borderRadius: 14,
+    marginTop: 10
+  },
+  passwordLink: {
+    alignSelf: 'center',
+    paddingVertical: 10,
+    marginTop: 12
+  },
+  dividerRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    width: '100%',
+    marginVertical: 14
+  },
+  dividerLine: {
+    flex: 1,
+    height: StyleSheet.hairlineWidth
+  },
+  dividerText: {
+    marginHorizontal: 12,
+    fontSize: 13
+  },
+  centeredBlock: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 12,
+    paddingVertical: 24
+  },
+  mutedText: {
+    fontSize: 14,
+    textAlign: 'center'
+  },
+  errorText: {
+    fontSize: 14,
+    textAlign: 'center'
+  },
+  qrPlate: {
+    padding: 16,
+    borderRadius: 16,
+    backgroundColor: QR_PLATE_BG
+  }
+});
+export default OxyAccountDialog;
+//# sourceMappingURL=OxyAccountDialog.js.map