@oxyhq/services 17.0.0 → 18.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxyhq/services",
-  "version": "17.0.0",
+  "version": "18.0.0",
   "description": "OxyHQ Expo/React Native SDK — UI components, screens, and native features",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -106,10 +106,10 @@
     }
   },
   "dependencies": {
-    "@oxyhq/contracts": "0.10.0"
+    "@oxyhq/contracts": "0.11.0"
   },
   "devDependencies": {
-    "@oxyhq/core": "^7.0.0",
+    "@oxyhq/core": "8.0.0",
     "nativewind": "5.0.0-preview.3",
     "react-native-css": "^3.0.0",
     "@react-native-async-storage/async-storage": "^2.0.0",
@@ -153,7 +153,7 @@
   "peerDependencies": {
     "@expo/vector-icons": "^15.0.3",
     "@oxyhq/bloom": ">=0.16.0",
-    "@oxyhq/core": "^7.1.0",
+    "@oxyhq/core": "^8.0.0",
     "@react-native-async-storage/async-storage": "^2.0.0",
     "@react-native-community/netinfo": "^11.4.1",
     "@tanstack/query-async-storage-persister": "^5.101",

package/src/index.ts

@@ -192,10 +192,21 @@ export type { ViewMode, SortBy, SortOrder } from './ui/hooks/useFileFiltering';
 // ---------------------------------------------------------------------------
 export { default as Avatar } from './ui/components/Avatar';
 export type { AvatarProps } from './ui/components/Avatar';
-export { OxySignInButton } from './ui/components/OxySignInButton';
+export {
+  OxySignInButton,
+  OXY_OAUTH_STATE_STORAGE_KEY,
+  OXY_OAUTH_CODE_VERIFIER_STORAGE_KEY,
+} from './ui/components/OxySignInButton';
+export type { OxySignInButtonProps, OxyOAuthResult } from './ui/components/OxySignInButton';
 export { OxyAuthPrompt } from './ui/components/OxyAuthPrompt';
 export type { OxyAuthPromptProps } from './ui/components/OxyAuthPrompt';
 export { default as OxyLogo } from './ui/components/OxyLogo';
+export { OxyConsentScreen } from './ui/components/OxyConsentScreen';
+export type {
+  OxyConsentScreenProps,
+  OxyConsentApplication,
+  OxyConsentUser,
+} from './ui/components/OxyConsentScreen';
 
 // Optional signed-out gate primitive. Wrap any subtree (or the whole app via
 // `OxyProvider`'s `requireAuth` prop) to opt into a shared, readiness-safe wall.

package/src/ui/components/OxyAccountDialog.tsx

@@ -22,14 +22,29 @@
  * 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.
+ * that do not use NativeWind (e.g. the accounts app).
+ *
+ * The surface is Bloom's `<Dialog>` (`@oxyhq/bloom/dialog`) with a responsive
+ * `placement` — a bottom sheet on narrow viewports, a centered card on wide ones.
+ * It REPLACES the hand-rolled RN `<Modal>` + `<GestureHandlerRootView>` + manual
+ * backdrop/card wrapper this component used before. That RN `<Modal>` is invisible
+ * under React StrictMode on web: react-native-web's `ModalPortal` appends its host
+ * node during render but removes it in an effect cleanup and never re-attaches, so
+ * the dialog never paints in a dev Vite build. Bloom's `<Dialog>` renders through
+ * its own Portal and has no such lifecycle hazard.
+ *
+ * Open/close is CONTROLLED by `isAccountDialogOpen` (the `open` prop); the Dialog
+ * stays mounted whenever the controller exists so it can animate its own close.
+ * Backdrop / swipe-to-dismiss is disabled (`dismissOnBackdrop={false}`) on purpose:
+ * Bloom's controlled `bottom` placement does not fire `onClose` on a gesture or
+ * backdrop dismissal, so allowing it would desync `isAccountDialogOpen` from the
+ * sheet and block reopening. The header close button (and a successful switch)
+ * drive `closeAccountDialog`, which flips `open` and runs the exit animation.
  */
 
 import type React from 'react';
 import { useCallback, useMemo, useState, useSyncExternalStore } from 'react';
 import {
-  Modal,
   Platform,
   Pressable,
   ScrollView,
@@ -38,11 +53,11 @@ import {
   type StyleProp,
   type ViewStyle,
 } 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 { Dialog } from '@oxyhq/bloom/dialog';
 import { Text } from '@oxyhq/bloom/typography';
 import {
   useTheme,
@@ -172,7 +187,7 @@ const OxyAccountDialog: React.FC = () => {
     [handleSwitch, controller, handleManage, closeAccountDialog],
   );
 
-  if (!isAccountDialogOpen || !controller) {
+  if (!controller) {
     return null;
   }
 
@@ -180,65 +195,48 @@ const OxyAccountDialog: React.FC = () => {
   const showBack = view === 'qr' || (view === 'add' && snapshot.accounts.length > 0);
 
   return (
-    <Modal
-      visible
-      transparent
-      animationType={isWeb ? 'fade' : 'slide'}
-      statusBarTranslucent
-      onRequestClose={closeAccountDialog}
+    <Dialog
+      open={isAccountDialogOpen}
+      onClose={closeAccountDialog}
+      placement={{ base: 'bottom', md: 'center' }}
+      dismissOnBackdrop={false}
+      maxWidth={420}
+      label={headerCopy(view, snapshot.accounts.length, t).title}
     >
-      <GestureHandlerRootView style={styles.root}>
-        <View style={[styles.backdrop, { backgroundColor: theme.colors.overlay }]}>
-          <Pressable
-            style={StyleSheet.absoluteFill}
-            onPress={closeAccountDialog}
-            accessibilityLabel={t('common.actions.close') || 'Close'}
-            accessibilityRole="button"
+      <DialogHeader
+        snapshot={snapshot}
+        theme={theme}
+        t={t}
+        showBack={showBack}
+        onBack={() => controller.setView('accounts')}
+        onClose={closeAccountDialog}
+      />
+      <ScrollView
+        style={styles.body}
+        contentContainerStyle={styles.bodyContent}
+        showsVerticalScrollIndicator={false}
+      >
+        {view === 'accounts' ? (
+          <AccountsView snapshot={snapshot} theme={theme} t={t} handlers={handlers} />
+        ) : view === 'qr' ? (
+          <QrView snapshot={snapshot} theme={theme} t={t} onRetry={() => void controller.showQr()} />
+        ) : (
+          <SignInView
+            snapshot={snapshot}
+            theme={theme}
+            t={t}
+            handlers={handlers}
+            onSignInWithOxy={() => void controller.signInWithOxy()}
+            onScanQr={() => void controller.showQr()}
+            onUsePassword={() =>
+              controller.openPasswordAtOxyAuth({
+                returnUrl: isWeb ? currentHref() : undefined,
+              })
+            }
           />
-          <View
-            style={[
-              styles.card,
-              isWeb ? styles.cardCentered : styles.cardSheet,
-              { backgroundColor: theme.colors.card, borderColor: theme.colors.border },
-            ]}
-          >
-            <DialogHeader
-              snapshot={snapshot}
-              theme={theme}
-              t={t}
-              showBack={showBack}
-              onBack={() => controller.setView('accounts')}
-              onClose={closeAccountDialog}
-            />
-            <ScrollView
-              style={styles.body}
-              contentContainerStyle={styles.bodyContent}
-              showsVerticalScrollIndicator={false}
-            >
-              {view === 'accounts' ? (
-                <AccountsView snapshot={snapshot} theme={theme} t={t} handlers={handlers} />
-              ) : view === 'qr' ? (
-                <QrView snapshot={snapshot} theme={theme} t={t} onRetry={() => void controller.showQr()} />
-              ) : (
-                <SignInView
-                  snapshot={snapshot}
-                  theme={theme}
-                  t={t}
-                  handlers={handlers}
-                  onSignInWithOxy={() => void controller.signInWithOxy()}
-                  onScanQr={() => void controller.showQr()}
-                  onUsePassword={() =>
-                    controller.openPasswordAtOxyAuth({
-                      returnUrl: isWeb ? currentHref() : undefined,
-                    })
-                  }
-                />
-              )}
-            </ScrollView>
-          </View>
-        </View>
-      </GestureHandlerRootView>
-    </Modal>
+        )}
+      </ScrollView>
+    </Dialog>
   );
 };
 
@@ -583,29 +581,6 @@ const EMPTY_SNAPSHOT: AccountDialogSnapshot = {
 };
 
 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,

package/src/ui/components/OxyConsentScreen.tsx

@@ -0,0 +1,456 @@
+/**
+ * OxyConsentScreen — the unified OAuth authorize/consent surface for
+ * `@oxyhq/services`.
+ *
+ * A PURE, presentational React Native component: it renders the resolved
+ * requesting-application identity, the permissions (scopes) being requested,
+ * the account that will authorize the request, and the allow/deny affordances —
+ * and delegates every decision back through {@link OxyConsentScreenProps.onAllow}
+ * / {@link OxyConsentScreenProps.onDeny}. It performs NO data fetching and owns
+ * NO session state: the caller resolves the application + scopes + user (the IdP
+ * from `GET /auth/session/approve-info/:code`, Console from its own request) and
+ * drives the `busy` / `error` flags. This is the RN/Bloom port of the web
+ * `consent-card` (`packages/auth`), so the two consent surfaces stay in visual
+ * and behavioral lockstep.
+ *
+ * Theming is `useTheme()` + a `StyleSheet` (the same approach as
+ * {@link OxyAccountDialog}) so it renders correctly in EVERY consumer, including
+ * apps that do not use NativeWind. Copy is localized through {@link useI18n}
+ * under the `consent.*` keys.
+ */
+import { useCallback } from 'react';
+import { Linking, Pressable, ScrollView, StyleSheet, View } from 'react-native';
+import { logger } from '@oxyhq/core';
+import { Avatar } from '@oxyhq/bloom/avatar';
+import { Button } from '@oxyhq/bloom/button';
+import { Text } from '@oxyhq/bloom/typography';
+import { useTheme } from '@oxyhq/bloom/theme';
+import { useI18n } from '../hooks/useI18n';
+import OxyLogo from './OxyLogo';
+
+/** The requesting application, resolved by the caller (never user-supplied raw). */
+export interface OxyConsentApplication {
+  /** Display name of the requesting application. */
+  name: string;
+  /** Application icon — a URL or bare file id passed straight to `<Avatar source>`. */
+  iconUrl?: string;
+  /** Public website of the application, shown as a link when present. */
+  websiteUrl?: string;
+  /** Privacy policy URL, shown as a link when present. */
+  privacyPolicyUrl?: string;
+  /** Terms of service URL, shown as a link when present. */
+  termsUrl?: string;
+  /** Human-readable publisher, used for the "Published by …" provenance line. */
+  developerName?: string;
+  /** True for first-party / official Oxy applications. */
+  isOfficial?: boolean;
+}
+
+/** The account that will authorize the request (the currently signed-in user). */
+export interface OxyConsentUser {
+  /** Real display name, when the profile has one. */
+  displayName?: string;
+  /** Normalized handle — the sanctioned fallback when `displayName` is absent. */
+  handle?: string;
+  /** Avatar — a URL or bare file id passed straight to `<Avatar source>`. */
+  avatarUri?: string;
+}
+
+export interface OxyConsentScreenProps {
+  /** The resolved requesting application. */
+  application: OxyConsentApplication;
+  /** OAuth scopes requested by the client (mapped to friendly labels). */
+  scopes: string[];
+  /** The account that will authorize the request, when known. */
+  user?: OxyConsentUser;
+  /** Approve handler — the caller mints the code / completes the flow. */
+  onAllow: () => void | Promise<void>;
+  /** Deny handler — the caller cancels the flow. */
+  onDeny: () => void;
+  /** True while a decision is in flight; disables both actions and spins Allow. */
+  busy?: boolean;
+  /** A blocking error message for the request, when present. */
+  error?: string | null;
+}
+
+/**
+ * Friendly-label i18n keys for the scopes the platform issues. Standard OIDC
+ * scopes (`openid` / `profile` / `email` / `offline_access`) and the Oxy scope
+ * set both map to a curated `consent.scopes.*` sentence. Unknown scopes fall
+ * back to the raw scope string so the user always sees something concrete.
+ */
+const SCOPE_LABEL_KEYS: Record<string, string> = {
+  openid: 'consent.scopes.openid',
+  profile: 'consent.scopes.profile',
+  email: 'consent.scopes.email',
+  offline_access: 'consent.scopes.offlineAccess',
+  'user:read': 'consent.scopes.userRead',
+  'files:read': 'consent.scopes.filesRead',
+  'files:write': 'consent.scopes.filesWrite',
+  'files:delete': 'consent.scopes.filesDelete',
+  'webhooks:receive': 'consent.scopes.webhooksReceive',
+  'chat:completions': 'consent.scopes.chatCompletions',
+  'models:read': 'consent.scopes.modelsRead',
+  'federation:write': 'consent.scopes.federationWrite',
+};
+
+type Translate = ReturnType<typeof useI18n>['t'];
+
+function scopeLabel(scope: string, t: Translate): string {
+  const key = SCOPE_LABEL_KEYS[scope];
+  return key ? t(key) : scope;
+}
+
+/** A tappable legal/website link that opens the URL in the platform browser. */
+function ConsentLink({
+  label,
+  url,
+  testID,
+  color,
+}: {
+  label: string;
+  url: string;
+  testID: string;
+  color: string;
+}) {
+  const handlePress = useCallback(() => {
+    // `websiteUrl`/legal URLs are application-controlled metadata rendered on a
+    // high-trust surface: only ever hand web schemes to the OS.
+    let protocol: string;
+    try {
+      protocol = new URL(url).protocol;
+    } catch {
+      logger.warn('OxyConsentScreen: invalid link URL', { url });
+      return;
+    }
+    if (protocol !== 'https:' && protocol !== 'http:') {
+      logger.warn('OxyConsentScreen: blocked non-web link scheme', { url });
+      return;
+    }
+    Linking.openURL(url).catch((error) => {
+      logger.warn('OxyConsentScreen: could not open link', { url, error });
+    });
+  }, [url]);
+  return (
+    <Pressable testID={testID} onPress={handlePress} accessibilityRole="link" style={styles.link}>
+      <Text style={[styles.linkText, { color }]}>{label}</Text>
+    </Pressable>
+  );
+}
+
+export function OxyConsentScreen({
+  application,
+  scopes,
+  user,
+  onAllow,
+  onDeny,
+  busy = false,
+  error = null,
+}: OxyConsentScreenProps) {
+  const theme = useTheme();
+  const { t } = useI18n();
+  const appName = application.name;
+  // Scopes key the permission rows — a duplicate in the request would mean
+  // duplicate React keys and redundant rows.
+  const uniqueScopes = [...new Set(scopes)];
+
+  const provenanceLabel = application.isOfficial
+    ? t('consent.provenance.official')
+    : application.developerName
+      ? t('consent.provenance.developer', { developer: application.developerName })
+      : t('consent.provenance.thirdParty');
+
+  // Display-name rule (D5): a real display name, else the normalized handle.
+  const accountName = user ? user.displayName?.trim() || user.handle : undefined;
+
+  const handleAllow = useCallback(() => {
+    void onAllow();
+  }, [onAllow]);
+
+  const showLegalLinks = Boolean(application.privacyPolicyUrl || application.termsUrl);
+
+  return (
+    <ScrollView
+      testID="oxy-consent-screen"
+      style={styles.root}
+      contentContainerStyle={styles.content}
+    >
+      {/* Header: requesting app ↔ Oxy identity */}
+      <View style={styles.header}>
+        <View style={styles.connection}>
+          <Avatar source={application.iconUrl} name={appName} size={56} />
+          <View style={styles.connector}>
+            <View style={[styles.dot, { backgroundColor: theme.colors.border }]} />
+            <View style={[styles.dot, { backgroundColor: theme.colors.border }]} />
+            <View style={[styles.dot, { backgroundColor: theme.colors.border }]} />
+          </View>
+          <View style={[styles.logoBadge, { backgroundColor: theme.colors.backgroundSecondary ?? theme.colors.card }]}>
+            <OxyLogo variant="icon" size={30} fillColor={theme.colors.primary} />
+          </View>
+        </View>
+        <Text style={[styles.title, { color: theme.colors.text }]}>
+          {t('consent.title', { app: appName })}
+        </Text>
+        <Text style={[styles.subtitle, { color: theme.colors.textSecondary }]}>
+          {t('consent.subtitle', { app: appName })}
+        </Text>
+      </View>
+
+      {/* Provenance */}
+      <View style={[styles.card, { borderColor: theme.colors.border, backgroundColor: theme.colors.card }]}>
+        <Text testID="consent-provenance" style={[styles.provenance, { color: theme.colors.text }]}>
+          {provenanceLabel}
+        </Text>
+        {application.websiteUrl ? (
+          <ConsentLink
+            testID="consent-link-website"
+            label={application.websiteUrl}
+            url={application.websiteUrl}
+            color={theme.colors.primary}
+          />
+        ) : null}
+      </View>
+
+      {/* Requested permissions */}
+      <View style={styles.section}>
+        <Text style={[styles.sectionLabel, { color: theme.colors.textSecondary }]}>
+          {t('consent.permissions.title')}
+        </Text>
+        <View style={[styles.card, { borderColor: theme.colors.border, backgroundColor: theme.colors.card }]}>
+          {uniqueScopes.length > 0 ? (
+            uniqueScopes.map((scope) => (
+              <View key={scope} testID={`consent-scope-${scope}`} style={styles.row}>
+                <View style={[styles.bullet, { backgroundColor: theme.colors.primary }]} />
+                <Text style={[styles.rowText, { color: theme.colors.text }]}>
+                  {scopeLabel(scope, t)}
+                </Text>
+              </View>
+            ))
+          ) : (
+            <View testID="consent-scope-basic" style={styles.row}>
+              <View style={[styles.bullet, { backgroundColor: theme.colors.primary }]} />
+              <Text style={[styles.rowText, { color: theme.colors.text }]}>
+                {t('consent.permissions.basic')}
+              </Text>
+            </View>
+          )}
+        </View>
+      </View>
+
+      {/* Authorizing account */}
+      {user ? (
+        <View
+          testID="consent-account"
+          style={[styles.accountRow, { borderColor: theme.colors.border, backgroundColor: theme.colors.card }]}
+        >
+          <Avatar source={user.avatarUri} name={accountName} size={40} />
+          <View style={styles.accountText}>
+            <Text
+              testID="consent-account-name"
+              numberOfLines={1}
+              style={[styles.accountName, { color: theme.colors.text }]}
+            >
+              {accountName}
+            </Text>
+            {user.handle && user.handle !== accountName ? (
+              <Text numberOfLines={1} style={[styles.accountHandle, { color: theme.colors.textSecondary }]}>
+                {user.handle}
+              </Text>
+            ) : null}
+          </View>
+        </View>
+      ) : null}
+
+      {/* Legal links */}
+      {showLegalLinks ? (
+        <View style={styles.linksRow}>
+          {application.privacyPolicyUrl ? (
+            <ConsentLink
+              testID="consent-link-privacy"
+              label={t('consent.links.privacy')}
+              url={application.privacyPolicyUrl}
+              color={theme.colors.textSecondary}
+            />
+          ) : null}
+          {application.termsUrl ? (
+            <ConsentLink
+              testID="consent-link-terms"
+              label={t('consent.links.terms')}
+              url={application.termsUrl}
+              color={theme.colors.textSecondary}
+            />
+          ) : null}
+        </View>
+      ) : null}
+
+      {/* Blocking error */}
+      {error ? (
+        <View
+          testID="consent-error"
+          style={[styles.errorCard, { borderColor: theme.colors.error }]}
+        >
+          <Text style={[styles.errorText, { color: theme.colors.error }]}>{error}</Text>
+        </View>
+      ) : null}
+
+      {/* Decision actions */}
+      <View style={styles.actions}>
+        <Button
+          testID="consent-allow"
+          variant="primary"
+          onPress={handleAllow}
+          disabled={busy}
+          loading={busy}
+          style={styles.actionButton}
+        >
+          {t('consent.allow', { app: appName })}
+        </Button>
+        <Button
+          testID="consent-deny"
+          variant="ghost"
+          onPress={onDeny}
+          disabled={busy}
+          style={styles.actionButton}
+        >
+          {t('consent.deny')}
+        </Button>
+      </View>
+
+      <Text style={[styles.disclaimer, { color: theme.colors.textSecondary }]}>
+        {t('consent.disclaimer', { app: appName })}
+      </Text>
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+  },
+  content: {
+    padding: 20,
+    gap: 20,
+  },
+  header: {
+    alignItems: 'center',
+    gap: 12,
+  },
+  connection: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10,
+  },
+  connector: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+  },
+  dot: {
+    width: 4,
+    height: 4,
+    borderRadius: 2,
+  },
+  logoBadge: {
+    width: 56,
+    height: 56,
+    borderRadius: 28,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: '700',
+    textAlign: 'center',
+  },
+  subtitle: {
+    fontSize: 14,
+    lineHeight: 20,
+    textAlign: 'center',
+  },
+  section: {
+    gap: 8,
+  },
+  sectionLabel: {
+    fontSize: 12,
+    fontWeight: '600',
+    paddingHorizontal: 4,
+  },
+  card: {
+    borderWidth: StyleSheet.hairlineWidth,
+    borderRadius: 16,
+    padding: 12,
+    gap: 10,
+  },
+  provenance: {
+    fontSize: 14,
+    fontWeight: '600',
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10,
+  },
+  bullet: {
+    width: 6,
+    height: 6,
+    borderRadius: 3,
+  },
+  rowText: {
+    flex: 1,
+    fontSize: 14,
+  },
+  accountRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderRadius: 16,
+    padding: 12,
+  },
+  accountText: {
+    flex: 1,
+    minWidth: 0,
+  },
+  accountName: {
+    fontSize: 15,
+    fontWeight: '600',
+  },
+  accountHandle: {
+    fontSize: 13,
+  },
+  linksRow: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 16,
+    paddingHorizontal: 4,
+  },
+  link: {
+    alignSelf: 'flex-start',
+  },
+  linkText: {
+    fontSize: 13,
+    textDecorationLine: 'underline',
+  },
+  errorCard: {
+    borderWidth: StyleSheet.hairlineWidth,
+    borderRadius: 12,
+    padding: 12,
+  },
+  errorText: {
+    fontSize: 14,
+  },
+  actions: {
+    gap: 12,
+  },
+  actionButton: {
+    width: '100%',
+  },
+  disclaimer: {
+    fontSize: 12,
+    lineHeight: 18,
+    textAlign: 'center',
+    paddingHorizontal: 4,
+  },
+});
+
+export default OxyConsentScreen;