@squad-sports/react-native 1.3.1

package/src/screens/auth/EnterEmailScreen.tsx

@@ -0,0 +1,234 @@
+import React, { useCallback, useRef, useState } from 'react';
+import {
+  View,
+  Text,
+  TextInput,
+  StyleSheet,
+  Pressable,
+  Linking,
+  useWindowDimensions,
+} from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
+
+import type { RootStackParamList } from '../../navigation/SquadNavigator';
+import { useSquadSDK } from '../../SquadProvider';
+import { Colors } from '../../theme/ThemeContext';
+import { ErrorHint } from '../../components/ux/errors/ErrorHint';
+import Button from '../../components/ux/buttons/Button';
+import AvoidKeyboardScreen from '../../components/ux/layout/AvoidKeyboardScreen';
+import { TitleRegular, BodyMedium, SubtitleSmall } from '../../components/ux/text/Typography';
+
+type Nav = NativeStackNavigationProp<RootStackParamList, 'EnterEmail'>;
+
+function validateEmail(email: string): boolean {
+  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+}
+
+export function EnterEmailScreen() {
+  const navigation = useNavigation<Nav>();
+  const sdk = useSquadSDK();
+  const { height } = useWindowDimensions();
+  const isShort = height < 700;
+
+  const [email, setEmail] = useState('');
+  const [firstName, setFirstName] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const inputRef = useRef<TextInput>(null);
+
+  const buttonDisabled = !email || !firstName || isLoading;
+
+  const onChangeEmail = useCallback((value: string) => {
+    setError(null);
+    setEmail(value);
+  }, []);
+
+  const onSubmit = useCallback(async () => {
+    if (!validateEmail(email)) {
+      setError('Please enter a valid email address');
+      return;
+    }
+
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const result = await sdk.sessionManager.createSession({
+        email,
+        firstName,
+      });
+
+      if (result.status === 'pending') {
+        navigation.navigate('EnterCode', { email });
+      } else {
+        setError(result.error ?? 'Failed to send verification code');
+      }
+    } catch (err) {
+      setError('An error occurred. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  }, [email, firstName, sdk, navigation]);
+
+  return (
+    <AvoidKeyboardScreen>
+      <View style={[styles.headerContainer, isShort && styles.headerContainerShort]}>
+        <Pressable style={styles.backButton} onPress={() => navigation.goBack()}>
+          <Text style={styles.backButtonText}>{'<'}</Text>
+        </Pressable>
+      </View>
+
+      <View style={[styles.container, isShort && styles.containerShort]}>
+        <TitleRegular style={styles.title}>Create Your Account</TitleRegular>
+
+        <View style={styles.formContainer}>
+          <View style={styles.inputContainer}>
+            <TextInput
+              value={firstName}
+              onChangeText={setFirstName}
+              placeholder="First name"
+              placeholderTextColor={Colors.gray6}
+              style={styles.textInput}
+              autoCapitalize="words"
+              returnKeyType="next"
+              onSubmitEditing={() => inputRef.current?.focus()}
+            />
+          </View>
+          <View style={styles.inputContainer}>
+            <TextInput
+              ref={inputRef}
+              value={email}
+              onChangeText={onChangeEmail}
+              onSubmitEditing={onSubmit}
+              placeholder="Email address"
+              placeholderTextColor={Colors.gray6}
+              style={styles.textInput}
+              keyboardType="email-address"
+              autoCapitalize="none"
+              autoCorrect={false}
+              returnKeyType="go"
+            />
+          </View>
+          <ErrorHint hint={error} />
+        </View>
+
+        <View style={styles.footerContainer}>
+          <Button
+            style={[styles.button, buttonDisabled && styles.buttonDisabled]}
+            onPress={onSubmit}
+            disabled={buttonDisabled}
+          >
+            <Text style={[styles.buttonText, buttonDisabled && styles.buttonDisabledText]}>
+              {isLoading ? 'Sending...' : 'Send Code'}
+            </Text>
+          </Button>
+
+          <BodyMedium style={styles.privacyText}>
+            By tapping "Send Code" you agree to the{' '}
+            <Text
+              style={styles.privacyLink}
+              onPress={() => Linking.openURL('https://www.withyoursquad.com/terms')}
+            >
+              Terms & Conditions
+            </Text>
+            {' '}and{' '}
+            <Text
+              style={styles.privacyLink}
+              onPress={() => Linking.openURL('https://www.withyoursquad.com/privacy')}
+            >
+              Privacy Policy
+            </Text>
+          </BodyMedium>
+        </View>
+      </View>
+    </AvoidKeyboardScreen>
+  );
+}
+
+const styles = StyleSheet.create({
+  headerContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 20,
+    paddingTop: 20,
+    marginBottom: 60,
+    marginTop: 36,
+  },
+  headerContainerShort: {
+    marginBottom: 40,
+    marginTop: 24,
+  },
+  backButton: {
+    padding: 10,
+  },
+  backButtonText: {
+    fontSize: 24,
+    color: Colors.white,
+    fontWeight: '600',
+  },
+  container: {
+    flex: 1,
+    paddingBottom: 16,
+    paddingHorizontal: 24,
+  },
+  containerShort: {
+    paddingBottom: 8,
+  },
+  title: {
+    color: Colors.white,
+    marginBottom: 24,
+  },
+  formContainer: {
+    flex: 1,
+    width: '100%',
+    maxWidth: 400,
+    alignSelf: 'center',
+  },
+  inputContainer: {
+    marginBottom: 16,
+  },
+  textInput: {
+    color: Colors.white,
+    fontSize: 16,
+    fontWeight: '500',
+    paddingVertical: 16,
+    paddingHorizontal: 16,
+    borderWidth: 1,
+    borderColor: Colors.gray5,
+    borderRadius: 8,
+    backgroundColor: Colors.black,
+  },
+  footerContainer: {
+    width: '100%',
+    maxWidth: 400,
+    alignSelf: 'center',
+  },
+  button: {
+    alignItems: 'center',
+    backgroundColor: Colors.purple1,
+    borderRadius: 8,
+    height: 56,
+    justifyContent: 'center',
+  },
+  buttonDisabled: {
+    backgroundColor: Colors.gray2,
+  },
+  buttonText: {
+    fontSize: 16,
+    color: Colors.gray1,
+    fontWeight: '600',
+  },
+  buttonDisabledText: {
+    color: Colors.gray6,
+  },
+  privacyText: {
+    color: Colors.gray6,
+    marginTop: 16,
+    textAlign: 'center',
+  },
+  privacyLink: {
+    color: Colors.purple1,
+    fontWeight: '500',
+  },
+});

package/src/screens/auth/LandingScreen.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
+
+import type { RootStackParamList } from '../../navigation/SquadNavigator';
+import { useTheme } from '../../theme/ThemeContext';
+
+type LandingNavProp = NativeStackNavigationProp<RootStackParamList, 'Landing'>;
+
+export function LandingScreen() {
+  const navigation = useNavigation<LandingNavProp>();
+  const { theme, colors } = useTheme();
+
+  return (
+    <View style={[styles.container, { backgroundColor: theme.screenBackground }]}>
+      <View style={styles.content}>
+        <Text style={[styles.title, { color: colors.white }]}>
+          Squad Sports
+        </Text>
+        <Text style={[styles.subtitle, { color: colors.gray6 }]}>
+          Connect with your squad
+        </Text>
+      </View>
+
+      <View style={styles.buttons}>
+        <TouchableOpacity
+          style={[styles.button, { backgroundColor: theme.buttonColor }]}
+          onPress={() => navigation.navigate('EnterEmail')}
+        >
+          <Text style={[styles.buttonText, { color: theme.buttonText }]}>
+            Get Started
+          </Text>
+        </TouchableOpacity>
+
+        <TouchableOpacity
+          style={[styles.secondaryButton]}
+          onPress={() => navigation.navigate('EnterEmail')}
+        >
+          <Text style={[styles.secondaryButtonText, { color: colors.white }]}>
+            I already have an account
+          </Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'space-between',
+    paddingHorizontal: 24,
+    paddingBottom: 48,
+  },
+  content: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  title: {
+    fontSize: 32,
+    fontWeight: '700',
+    marginBottom: 8,
+  },
+  subtitle: {
+    fontSize: 16,
+  },
+  buttons: {
+    gap: 12,
+  },
+  button: {
+    height: 52,
+    borderRadius: 26,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  buttonText: {
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  secondaryButton: {
+    height: 52,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  secondaryButtonText: {
+    fontSize: 16,
+  },
+});

package/src/screens/auth/LoginScreen.tsx

@@ -0,0 +1,126 @@
+/**
+ * Phone-based login screen.
+ * Ported from squad-demo/src/screens/LoginScreen.tsx.
+ */
+import React, { useCallback, useState, useRef } from 'react';
+import { View, Text, TextInput, StyleSheet, Pressable, Linking, useWindowDimensions } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
+import type { RootStackParamList } from '../../navigation/SquadNavigator';
+import { useSquadSDK } from '../../SquadProvider';
+import { Colors } from '../../theme/ThemeContext';
+import Button from '../../components/ux/buttons/Button';
+import { ErrorHint } from '../../components/ux/errors/ErrorHint';
+import AvoidKeyboardScreen from '../../components/ux/layout/AvoidKeyboardScreen';
+import { TitleRegular, BodyMedium, SubtitleSmall } from '../../components/ux/text/Typography';
+
+type Nav = NativeStackNavigationProp<RootStackParamList, 'Login'>;
+
+export function LoginScreen() {
+  const navigation = useNavigation<Nav>();
+  const sdk = useSquadSDK();
+  const { height } = useWindowDimensions();
+  const isShort = height < 700;
+
+  const [phone, setPhone] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const inputRef = useRef<TextInput>(null);
+
+  const isValid = phone.replace(/\D/g, '').length >= 10;
+
+  const handleSubmit = useCallback(async () => {
+    if (!isValid || isLoading) return;
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const result = await sdk.sessionManager.createSession({ phone });
+      if (result.status === 'pending') {
+        navigation.navigate('EnterCode', { phone });
+      } else {
+        setError('Failed to send verification code.');
+      }
+    } catch {
+      setError('An error occurred. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  }, [phone, isValid, isLoading, sdk, navigation]);
+
+  return (
+    <AvoidKeyboardScreen>
+      <View style={[styles.headerContainer, isShort && styles.headerShort]}>
+        <Pressable style={styles.backButton} onPress={() => navigation.goBack()}>
+          <Text style={styles.backText}>{'<'}</Text>
+        </Pressable>
+      </View>
+
+      <View style={styles.container}>
+        <TitleRegular style={styles.title}>Enter Your Phone Number</TitleRegular>
+
+        <View style={styles.inputRow}>
+          <View style={styles.countryCode}>
+            <Text style={styles.countryCodeText}>+1</Text>
+          </View>
+          <TextInput
+            ref={inputRef}
+            value={phone}
+            onChangeText={(t) => { setPhone(t); setError(null); }}
+            onSubmitEditing={handleSubmit}
+            placeholder="Phone number"
+            placeholderTextColor={Colors.gray6}
+            keyboardType="phone-pad"
+            style={styles.input}
+            maxLength={15}
+            accessibilityLabel="Phone number"
+          />
+        </View>
+
+        <ErrorHint hint={error} />
+
+        <View style={styles.footer}>
+          <Button
+            style={[styles.button, !isValid && styles.buttonDisabled]}
+            onPress={handleSubmit}
+            disabled={!isValid || isLoading}
+          >
+            <Text style={[styles.buttonText, !isValid && styles.buttonTextDisabled]}>
+              {isLoading ? 'Sending...' : 'Send Code'}
+            </Text>
+          </Button>
+
+          <BodyMedium style={styles.legal}>
+            By tapping "Send Code" you agree to the{' '}
+            <Text style={styles.legalLink} onPress={() => Linking.openURL('https://www.withyoursquad.com/terms')}>
+              Terms & Conditions
+            </Text>{' '}and{' '}
+            <Text style={styles.legalLink} onPress={() => Linking.openURL('https://www.withyoursquad.com/privacy')}>
+              Privacy Policy
+            </Text>
+          </BodyMedium>
+        </View>
+      </View>
+    </AvoidKeyboardScreen>
+  );
+}
+
+const styles = StyleSheet.create({
+  headerContainer: { paddingHorizontal: 20, paddingTop: 20, marginBottom: 60, marginTop: 36 },
+  headerShort: { marginBottom: 40, marginTop: 24 },
+  backButton: { padding: 10 },
+  backText: { fontSize: 24, color: Colors.white, fontWeight: '600' },
+  container: { flex: 1, paddingHorizontal: 24, paddingBottom: 16 },
+  title: { color: Colors.white, marginBottom: 24 },
+  inputRow: { flexDirection: 'row', borderWidth: 1, borderColor: Colors.gray5, borderRadius: 8, backgroundColor: Colors.black, overflow: 'hidden', marginBottom: 8 },
+  countryCode: { paddingHorizontal: 16, paddingVertical: 16, borderRightWidth: 1, borderRightColor: Colors.gray5 },
+  countryCodeText: { color: Colors.white, fontSize: 16, fontWeight: '500' },
+  input: { flex: 1, paddingHorizontal: 16, paddingVertical: 16, color: Colors.white, fontSize: 16, fontWeight: '500' },
+  footer: { marginTop: 'auto' },
+  button: { height: 56, borderRadius: 8, backgroundColor: Colors.purple1, justifyContent: 'center', alignItems: 'center' },
+  buttonDisabled: { backgroundColor: Colors.gray2 },
+  buttonText: { color: Colors.gray1, fontSize: 16, fontWeight: '600' },
+  buttonTextDisabled: { color: Colors.gray6 },
+  legal: { color: Colors.gray6, marginTop: 16, textAlign: 'center' },
+  legalLink: { color: Colors.purple1, fontWeight: '500' },
+});

package/src/screens/events/EventScreen.tsx

@@ -0,0 +1,163 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  FlatList,
+  Pressable,
+} from 'react-native';
+
+import { useApiClient } from '../../SquadProvider';
+import { useTheme, Colors } from '../../theme/ThemeContext';
+import ScreenHeader from '../../components/ux/layout/ScreenHeader';
+import Button from '../../components/ux/buttons/Button';
+import UserImage from '../../components/ux/user-image/UserImage';
+import { TitleSmall, TitleMedium, BodyRegular, BodyMedium, BodySmall } from '../../components/ux/text/Typography';
+
+interface EventItem {
+  id: string;
+  title: string;
+  description?: string;
+  date?: string;
+  location?: string;
+  imageUrl?: string;
+  attendeeCount: number;
+  isAttending: boolean;
+}
+
+export function EventScreen() {
+  const apiClient = useApiClient();
+  const { theme } = useTheme();
+
+  const [events, setEvents] = useState<EventItem[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const load = async () => {
+      try {
+        const data = await apiClient.getEvents();
+        if (data?.events) {
+          setEvents(data.events.map((e: any) => ({
+            id: e.id,
+            title: e.title ?? '',
+            description: e.description,
+            date: e.startDate ?? e.date,
+            location: e.location,
+            imageUrl: e.imageUrl,
+            attendeeCount: e.attendeeCount ?? 0,
+            isAttending: e.isAttending ?? false,
+          })));
+        }
+      } catch {}
+      setLoading(false);
+    };
+    load();
+  }, [apiClient]);
+
+  const toggleAttendance = useCallback(async (eventId: string, isAttending: boolean) => {
+    try {
+      if (isAttending) {
+        await apiClient.removeAttendee(eventId);
+      } else {
+        await apiClient.setAttendee(eventId);
+      }
+      setEvents(prev => prev.map(e =>
+        e.id === eventId
+          ? { ...e, isAttending: !isAttending, attendeeCount: e.attendeeCount + (isAttending ? -1 : 1) }
+          : e
+      ));
+    } catch {}
+  }, [apiClient]);
+
+  const formatDate = (dateStr?: string) => {
+    if (!dateStr) return '';
+    const d = new Date(dateStr);
+    return d.toLocaleDateString(undefined, { weekday: 'short', month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' });
+  };
+
+  return (
+    <View style={[styles.container, { backgroundColor: theme.screenBackground }]}>
+      <ScreenHeader title="Events" />
+
+      <FlatList
+        data={events}
+        keyExtractor={item => item.id}
+        contentContainerStyle={styles.list}
+        renderItem={({ item }) => (
+          <View style={styles.card}>
+            {item.imageUrl && (
+              <View style={styles.cardImagePlaceholder}>
+                <BodySmall style={styles.cardImageText}>Event Image</BodySmall>
+              </View>
+            )}
+            <View style={styles.cardContent}>
+              <TitleSmall style={styles.eventTitle}>{item.title}</TitleSmall>
+              {item.date && (
+                <BodyMedium style={styles.eventDate}>{formatDate(item.date)}</BodyMedium>
+              )}
+              {item.location && (
+                <BodySmall style={styles.eventLocation}>{item.location}</BodySmall>
+              )}
+              {item.description && (
+                <BodyRegular style={styles.eventDesc} numberOfLines={2}>{item.description}</BodyRegular>
+              )}
+
+              <View style={styles.cardFooter}>
+                <BodySmall style={styles.attendeeCount}>
+                  {item.attendeeCount} attending
+                </BodySmall>
+                <Button
+                  style={[
+                    styles.attendButton,
+                    item.isAttending
+                      ? styles.attendButtonActive
+                      : { backgroundColor: theme.buttonColor },
+                  ]}
+                  onPress={() => toggleAttendance(item.id, item.isAttending)}
+                >
+                  <Text style={[
+                    styles.attendButtonText,
+                    item.isAttending ? styles.attendButtonTextActive : { color: theme.buttonText },
+                  ]}>
+                    {item.isAttending ? 'Going' : 'Attend'}
+                  </Text>
+                </Button>
+              </View>
+            </View>
+          </View>
+        )}
+        ListEmptyComponent={
+          !loading ? (
+            <View style={styles.empty}>
+              <BodyRegular style={styles.emptyText}>No upcoming events</BodyRegular>
+            </View>
+          ) : null
+        }
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  list: { padding: 24, gap: 16 },
+  card: { backgroundColor: Colors.gray2, borderRadius: 16, overflow: 'hidden' },
+  cardImagePlaceholder: {
+    height: 140, backgroundColor: Colors.gray3,
+    justifyContent: 'center', alignItems: 'center',
+  },
+  cardImageText: { color: Colors.gray6 },
+  cardContent: { padding: 16 },
+  eventTitle: { color: Colors.white, marginBottom: 4 },
+  eventDate: { color: Colors.purple1, marginBottom: 2 },
+  eventLocation: { color: Colors.gray6, marginBottom: 8 },
+  eventDesc: { color: Colors.gray6, marginBottom: 16 },
+  cardFooter: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },
+  attendeeCount: { color: Colors.gray6 },
+  attendButton: { paddingVertical: 8, paddingHorizontal: 20, borderRadius: 16 },
+  attendButtonActive: { backgroundColor: 'transparent', borderWidth: 1, borderColor: Colors.green },
+  attendButtonText: { fontSize: 13, fontWeight: '600' },
+  attendButtonTextActive: { color: Colors.green },
+  empty: { alignItems: 'center', paddingTop: 48 },
+  emptyText: { color: Colors.gray6 },
+});

package/src/screens/freestyle/CommunityFreestyleScreen.tsx

@@ -0,0 +1,82 @@
+/**
+ * Community freestyle listens/reactions screens.
+ * Ported from squad-demo/src/screens/CommunityFreestyleListens.tsx + CommunityFreestyleReaction.tsx.
+ */
+import React, { useEffect, useState } from 'react';
+import { View, StyleSheet, FlatList } from 'react-native';
+import { useRoute } from '@react-navigation/native';
+import { useApiClient } from '../../SquadProvider';
+import { useTheme, Colors } from '../../theme/ThemeContext';
+import ScreenHeader from '../../components/ux/layout/ScreenHeader';
+import { FreestyleUserListen, FreestyleUserReaction } from '../../components/freestyle/FreestyleComponents';
+import { BodyRegular } from '../../components/ux/text/Typography';
+
+export function CommunityFreestyleListensScreen() {
+  const route = useRoute<any>();
+  const apiClient = useApiClient();
+  const { theme } = useTheme();
+  const freestyleId = route.params?.freestyleId;
+  const [listens, setListens] = useState<Array<{ userName: string; userImageUrl?: string; listenedAt?: string }>>([]);
+
+  useEffect(() => {
+    // Load community-wide listens for this freestyle
+  }, [freestyleId, apiClient]);
+
+  return (
+    <View style={[styles.container, { backgroundColor: theme.screenBackground }]}>
+      <ScreenHeader title="Community Listens" />
+      <FlatList
+        data={listens}
+        keyExtractor={(_, i) => String(i)}
+        renderItem={({ item }) => <FreestyleUserListen {...item} />}
+        contentContainerStyle={styles.list}
+        ListEmptyComponent={<View style={styles.empty}><BodyRegular style={styles.emptyText}>No community listens yet</BodyRegular></View>}
+      />
+    </View>
+  );
+}
+
+export function CommunityFreestyleReactionsScreen() {
+  const route = useRoute<any>();
+  const apiClient = useApiClient();
+  const { theme } = useTheme();
+  const freestyleId = route.params?.freestyleId;
+  const emoji = route.params?.emoji;
+  const [reactions, setReactions] = useState<Array<{ userName: string; userImageUrl?: string; emoji: string }>>([]);
+
+  useEffect(() => {
+    const load = async () => {
+      try {
+        const result = await apiClient.getFreestyleReactionsForCommunity(freestyleId, emoji ?? '');
+        if (result?.reactions) {
+          setReactions(result.reactions.map((r: any) => ({
+            userName: r.creator?.displayName ?? '',
+            userImageUrl: r.creator?.imageUrl,
+            emoji: r.emojiLabel ?? emoji ?? '',
+          })));
+        }
+      } catch {}
+    };
+    if (freestyleId) load();
+  }, [freestyleId, emoji, apiClient]);
+
+  return (
+    <View style={[styles.container, { backgroundColor: theme.screenBackground }]}>
+      <ScreenHeader title="Community Reactions" />
+      <FlatList
+        data={reactions}
+        keyExtractor={(_, i) => String(i)}
+        renderItem={({ item }) => <FreestyleUserReaction {...item} />}
+        contentContainerStyle={styles.list}
+        ListEmptyComponent={<View style={styles.empty}><BodyRegular style={styles.emptyText}>No community reactions yet</BodyRegular></View>}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  list: { paddingBottom: 48 },
+  empty: { flex: 1, justifyContent: 'center', alignItems: 'center', paddingTop: 48 },
+  emptyText: { color: Colors.gray6 },
+});