@q9labsai/chalk-react-native 4.1.17 → 5.0.1

package/src/components/EntranceView.android.tsx

@@ -1,274 +0,0 @@
-import { RTCView } from "../media/native-webrtc";
-import ArrowLeft01Icon from "@hugeicons/core-free-icons/dist/esm/ArrowLeft01Icon";
-import Mic01Icon from "@hugeicons/core-free-icons/dist/esm/Mic01Icon";
-import MicOff01Icon from "@hugeicons/core-free-icons/dist/esm/MicOff01Icon";
-import UserIcon from "@hugeicons/core-free-icons/dist/esm/UserIcon";
-import Video01Icon from "@hugeicons/core-free-icons/dist/esm/Video01Icon";
-import VideoOffIcon from "@hugeicons/core-free-icons/dist/esm/VideoOffIcon";
-import { HugeiconsIcon } from "@hugeicons/react-native";
-import { KeyboardAvoidingView, Platform, Pressable, StyleSheet, Text, TextInput, View } from "react-native";
-import { Theme } from "../ui/theme";
-import { useNativeTheme } from "../ui/native-theme";
-import { getIosSimulatorMediaMessage } from "../utils/ios-simulator";
-import { FaceAvatar } from "./FaceAvatar";
-import type { EntranceViewProps } from "./EntranceView";
-import { useEntranceController } from "./native-entrance/useEntranceController";
-
-export function EntranceViewAndroid({ spaceName, error, joinDisabled = false, onCancel, ...props }: EntranceViewProps): React.JSX.Element {
-  const controller = useEntranceController({ ...props, joinDisabled });
-  const theme = useNativeTheme();
-  const canJoin = controller.displayName.trim().length > 0 && !joinDisabled && !controller.isSubmitting;
-
-  return (
-    <KeyboardAvoidingView behavior={Platform.OS === "ios" ? "padding" : "height"} style={[styles.screen, { backgroundColor: theme.colors.background }]}>
-      <View style={styles.content}>
-        <View style={styles.previewContainer}>
-          <View style={[styles.previewSurface, { backgroundColor: theme.colors.raisedSurface, borderColor: theme.colors.border }]}>
-            {controller.previewStream && controller.videoEnabled ? (
-              <RTCView mirror objectFit="cover" streamURL={controller.previewStream.toURL()} style={styles.previewVideo} zOrder={0} />
-            ) : (
-              <View style={[styles.avatarContainer, { backgroundColor: theme.colors.insetSurface }]}>
-                <FaceAvatar name={controller.displayName} size={140} textSize={52} />
-              </View>
-            )}
-
-            {onCancel ? (
-              <Pressable accessibilityLabel="Cancel and leave Entrance" accessibilityRole="button" onPress={onCancel} style={({ pressed }) => [styles.floatingBack, { backgroundColor: theme.colors.surface, borderColor: theme.colors.border }, pressed && styles.topIconButtonPressed]}>
-                <HugeiconsIcon icon={ArrowLeft01Icon} size={22} color={theme.colors.foreground} />
-              </Pressable>
-            ) : null}
-          </View>
-
-          {controller.previewError && controller.videoEnabled ? <Text style={styles.previewError}>{controller.previewError}</Text> : null}
-          {controller.simulatorMediaDisabled ? <Text style={styles.previewHint}>{getIosSimulatorMediaMessage()}</Text> : null}
-        </View>
-
-        <View style={[styles.sheetContainer, { backgroundColor: theme.colors.card, borderColor: theme.colors.border, shadowColor: theme.colors.darkCanvas }]}>
-          <View style={styles.sheetHandle} />
-          <View style={styles.sheetHeader}>
-            <Text style={[styles.spaceName, { color: theme.colors.foreground }]} numberOfLines={1}>
-              {spaceName}
-            </Text>
-          </View>
-
-          <View style={[styles.inputCard, { backgroundColor: theme.colors.surface, borderColor: controller.isInputFocused ? theme.colors.ring : theme.colors.border }]}>
-            <HugeiconsIcon icon={UserIcon} size={18} color={controller.isInputFocused ? theme.colors.primary : theme.colors.mutedForeground} style={styles.inputIcon} />
-            <TextInput
-              onChangeText={controller.setDisplayName}
-              onFocus={() => controller.setInputFocused(true)}
-              onBlur={() => controller.setInputFocused(false)}
-              placeholder="Enter your name"
-              placeholderTextColor={theme.colors.mutedForeground}
-              style={[styles.nameInput, { color: theme.colors.foreground }]}
-              value={controller.displayName}
-              maxLength={30}
-              returnKeyType="join"
-              onSubmitEditing={controller.handleJoin}
-            />
-          </View>
-
-          <View style={styles.mediaRow}>
-            <Pressable
-              disabled={controller.simulatorMediaDisabled}
-              onPress={controller.toggleAudio}
-              style={({ pressed }) => [styles.controlCircle, { backgroundColor: controller.audioEnabled ? theme.colors.controlsBackground : theme.colors.error, borderColor: theme.colors.border }, controller.simulatorMediaDisabled && styles.toggleCircleDisabled, pressed && styles.togglePressed]}
-            >
-              <HugeiconsIcon icon={controller.audioEnabled ? Mic01Icon : MicOff01Icon} size={24} color={theme.colors.primaryForeground} />
-            </Pressable>
-            <Pressable
-              disabled={controller.simulatorMediaDisabled}
-              onPress={controller.toggleVideo}
-              style={({ pressed }) => [styles.controlCircle, { backgroundColor: controller.videoEnabled ? theme.colors.controlsBackground : theme.colors.error, borderColor: theme.colors.border }, controller.simulatorMediaDisabled && styles.toggleCircleDisabled, pressed && styles.togglePressed]}
-            >
-              <HugeiconsIcon icon={controller.videoEnabled ? Video01Icon : VideoOffIcon} size={24} color={theme.colors.primaryForeground} />
-            </Pressable>
-          </View>
-
-          {error ? <Text style={[styles.globalError, { color: theme.colors.error }]}>{error}</Text> : null}
-
-          <Pressable disabled={!canJoin} onPress={controller.handleJoin} style={({ pressed }) => [styles.joinButton, { backgroundColor: canJoin ? theme.colors.primary : theme.colors.muted }, !canJoin && styles.joinButtonDisabled, pressed && styles.togglePressed]}>
-            <Text style={[styles.joinButtonText, { color: theme.colors.primaryForeground }]}>{controller.isSubmitting || joinDisabled ? "Joining..." : "Enter Space"}</Text>
-          </Pressable>
-        </View>
-      </View>
-    </KeyboardAvoidingView>
-  );
-}
-
-export { EntranceViewAndroid as EntranceView };
-
-const styles = StyleSheet.create({
-  screen: {
-    flex: 1,
-    backgroundColor: Theme.colors.background,
-  },
-  content: {
-    flex: 1,
-  },
-  floatingBack: {
-    position: "absolute",
-    top: Platform.OS === "ios" ? 24 : 20,
-    left: 20,
-    width: 42,
-    height: 42,
-    borderRadius: 21,
-    backgroundColor: Theme.colors.darkOverlay40,
-    alignItems: "center",
-    justifyContent: "center",
-    zIndex: 10,
-    borderWidth: 1,
-    borderColor: Theme.colors.whiteOverlay10,
-  },
-  previewContainer: {
-    flex: 1,
-    justifyContent: "center",
-    paddingTop: Platform.OS === "ios" ? 10 : 0,
-    marginBottom: 0,
-  },
-  previewSurface: {
-    width: "100%",
-    aspectRatio: 0.72,
-    backgroundColor: Theme.colors.raisedSurface,
-    borderRadius: 32,
-    alignSelf: "center",
-    overflow: "hidden",
-    position: "relative",
-    borderWidth: 1,
-    borderColor: Theme.colors.whiteOverlay06,
-  },
-  previewVideo: {
-    ...StyleSheet.absoluteFillObject,
-  },
-  avatarContainer: {
-    ...StyleSheet.absoluteFillObject,
-    alignItems: "center",
-    justifyContent: "center",
-    backgroundColor: Theme.colors.insetSurface,
-  },
-  togglePressed: {
-    opacity: 0.7,
-    transform: [{ scale: 0.9 }],
-  },
-  previewError: {
-    color: Theme.colors.error,
-    fontSize: 12,
-    marginTop: 10,
-    textAlign: "center",
-    fontWeight: "600",
-    paddingHorizontal: 24,
-  },
-  previewHint: {
-    color: Theme.colors.mutedForeground,
-    fontSize: 12,
-    marginTop: 10,
-    textAlign: "center",
-    lineHeight: 18,
-    paddingHorizontal: 24,
-  },
-  sheetContainer: {
-    backgroundColor: Theme.colors.elevatedSurface,
-    borderTopLeftRadius: 32,
-    borderTopRightRadius: 32,
-    paddingHorizontal: 24,
-    paddingTop: 16,
-    paddingBottom: Platform.OS === "ios" ? 44 : 32,
-    gap: 20,
-    borderTopWidth: 1,
-    borderColor: Theme.colors.whiteOverlay08,
-    shadowColor: Theme.colors.darkCanvas,
-    shadowOffset: { width: 0, height: -12 },
-    shadowOpacity: 0.3,
-    shadowRadius: 16,
-    elevation: 20,
-  },
-  sheetHandle: {
-    width: 36,
-    height: 4,
-    borderRadius: 2,
-    backgroundColor: Theme.colors.whiteOverlay10,
-    alignSelf: "center",
-    marginBottom: 8,
-  },
-  sheetHeader: {
-    alignItems: "center",
-    marginBottom: 4,
-  },
-  spaceName: {
-    color: Theme.colors.foreground,
-    fontSize: 22,
-    fontWeight: "800",
-    textAlign: "center",
-    letterSpacing: -0.6,
-  },
-  inputCard: {
-    flexDirection: "row",
-    alignItems: "center",
-    backgroundColor: Theme.colors.whiteOverlay04,
-    borderRadius: 18,
-    paddingHorizontal: 16,
-    height: 56,
-    borderWidth: 1,
-    borderColor: Theme.colors.whiteOverlay08,
-  },
-  inputCardFocused: {
-    borderColor: Theme.colors.primary,
-    backgroundColor: Theme.colors.accentOverlay04,
-  },
-  inputIcon: {
-    marginRight: 24,
-  },
-  nameInput: {
-    flex: 1,
-    color: Theme.colors.onDark,
-    fontSize: 16,
-    fontWeight: "600",
-    padding: 0,
-  },
-  mediaRow: {
-    flexDirection: "row",
-    justifyContent: "center",
-    gap: 20,
-  },
-  controlCircle: {
-    width: 64,
-    height: 64,
-    borderRadius: 32,
-    backgroundColor: Theme.colors.whiteOverlay06,
-    alignItems: "center",
-    justifyContent: "center",
-    borderWidth: 1,
-    borderColor: Theme.colors.whiteOverlay10,
-  },
-  toggleCircleOff: {
-    backgroundColor: Theme.colors.dangerStrong,
-    borderColor: Theme.colors.dangerStrong,
-  },
-  toggleCircleDisabled: {
-    opacity: 0.45,
-  },
-  joinButton: {
-    width: "100%",
-    height: 58,
-    borderRadius: 18,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  joinButtonDisabled: {
-    opacity: 0.6,
-  },
-  joinButtonText: {
-    color: Theme.colors.onDark,
-    fontSize: 16,
-    fontWeight: "700",
-  },
-  globalError: {
-    color: Theme.colors.error,
-    fontSize: 13,
-    fontWeight: "600",
-    textAlign: "center",
-  },
-  topIconButtonPressed: {
-    opacity: 0.6,
-    transform: [{ scale: 0.92 }],
-  },
-});

package/src/components/EntranceView.ios-pad.tsx

@@ -1,326 +0,0 @@
-import ArrowLeft01Icon from "@hugeicons/core-free-icons/dist/esm/ArrowLeft01Icon";
-import Mic01Icon from "@hugeicons/core-free-icons/dist/esm/Mic01Icon";
-import MicOff01Icon from "@hugeicons/core-free-icons/dist/esm/MicOff01Icon";
-import Video01Icon from "@hugeicons/core-free-icons/dist/esm/Video01Icon";
-import VideoOffIcon from "@hugeicons/core-free-icons/dist/esm/VideoOffIcon";
-import ArrowRight02Icon from "@hugeicons/core-free-icons/dist/esm/ArrowRight02Icon";
-import CancelCircleIcon from "@hugeicons/core-free-icons/dist/esm/CancelCircleIcon";
-import { HugeiconsIcon } from "@hugeicons/react-native";
-import { KeyboardAvoidingView, Platform, Pressable, StyleSheet, Text, TextInput, View, Animated, ActivityIndicator } from "react-native";
-import { Theme } from "../ui/theme";
-import { useNativeTheme } from "../ui/native-theme";
-import { getIosSimulatorMediaMessage } from "../utils/ios-simulator";
-import { FaceAvatar } from "./FaceAvatar";
-import { hasRtcVideoView, RtcVideoView } from "./RtcVideoView";
-import type { EntranceViewProps } from "./EntranceView";
-import { useEntranceController } from "./native-entrance/useEntranceController";
-import { createAnimationRefController, type AnimationRefCallback } from "./native-animation-controller";
-import { useRef } from "react";
-
-export function EntranceViewIosPad({ spaceName, error, joinDisabled = false, onCancel, ...props }: EntranceViewProps): React.JSX.Element {
-  const controller = useEntranceController({ ...props, joinDisabled });
-  const theme = useNativeTheme();
-  const canRenderPreview = hasRtcVideoView();
-  const entryAnim = useRef(new Animated.Value(0)).current;
-  const islandAnim = useRef(new Animated.Value(0)).current;
-  const animationRef = useRef<AnimationRefCallback<unknown> | null>(null);
-  const attachEntryAnimation =
-    animationRef.current ??
-    (animationRef.current = createAnimationRefController<unknown>(() => [
-      Animated.stagger(300, [
-        Animated.spring(entryAnim, {
-          toValue: 1,
-          tension: 20,
-          friction: 8,
-          useNativeDriver: true,
-        }),
-        Animated.spring(islandAnim, {
-          toValue: 1,
-          tension: 25,
-          friction: 9,
-          useNativeDriver: true,
-        }),
-      ]),
-    ]));
-
-  const canJoin = controller.displayName.trim().length > 0 && !joinDisabled && !controller.isSubmitting;
-  const showPreview = Boolean(controller.previewStream && controller.videoEnabled && canRenderPreview);
-  const previewStreamURL = showPreview && controller.previewStream ? controller.previewStream.toURL() : null;
-
-  return (
-    <KeyboardAvoidingView behavior={Platform.OS === "ios" ? "padding" : "height"} style={[styles.screen, { backgroundColor: theme.colors.background }]}>
-      {/* Immersive Background */}
-      <View style={[styles.immersiveContainer, { backgroundColor: theme.colors.darkCanvas }]}>
-        {previewStreamURL ? (
-          <RtcVideoView mirror objectFit="cover" streamURL={previewStreamURL} style={styles.fullScreenVideo} zOrder={-1} />
-        ) : (
-          <View style={[styles.immersiveAvatarContainer, { backgroundColor: theme.colors.background }]}>
-            <FaceAvatar name={controller.displayName} size={200} textSize={80} />
-          </View>
-        )}
-        {/* Subtle Brand Frost - only show over video, not avatar */}
-        {showPreview ? <View style={styles.frostOverlay} /> : null}
-      </View>
-
-      <View style={styles.hudLayer}>
-        {/* Top HUD */}
-        <View style={styles.topHud}>
-          {onCancel ? (
-            <Pressable accessibilityLabel="Cancel and leave Entrance" accessibilityRole="button" onPress={onCancel} style={({ pressed }) => [styles.backPuck, { backgroundColor: theme.colors.surface, borderColor: theme.colors.border }, pressed && styles.pressed]}>
-              <HugeiconsIcon icon={ArrowLeft01Icon} size={22} color={theme.colors.foreground} />
-            </Pressable>
-          ) : null}
-          <View style={styles.spaceInfo}>
-            <Text style={[styles.spaceTitle, { color: theme.colors.foreground }]} numberOfLines={1}>
-              {spaceName}
-            </Text>
-          </View>
-          <View style={styles.topHudSpacer} />
-        </View>
-
-        <View style={styles.flexFill} />
-
-        {/* Bottom HUD */}
-        <Animated.View
-          ref={attachEntryAnimation}
-          style={[
-            styles.bottomHud,
-            {
-              opacity: islandAnim,
-              transform: [{ translateY: islandAnim.interpolate({ inputRange: [0, 1], outputRange: [40, 0] }) }],
-            },
-          ]}
-        >
-          {/* Unified Launch Pad */}
-          <View style={[styles.launchPad, { backgroundColor: theme.colors.card, borderColor: theme.colors.border, shadowColor: theme.colors.darkCanvas }]}>
-            {/* Media Controls Integrated */}
-            <View style={styles.mediaGroup}>
-              <Pressable
-                accessibilityLabel={controller.audioEnabled ? "Mute microphone" : "Unmute microphone"}
-                accessibilityRole="button"
-                accessibilityState={{ disabled: controller.simulatorMediaDisabled, selected: controller.audioEnabled }}
-                disabled={controller.simulatorMediaDisabled}
-                onPress={controller.toggleAudio}
-                style={({ pressed }) => [styles.mediaToggle, { backgroundColor: controller.audioEnabled ? theme.colors.controlsBackground : theme.colors.error, borderColor: theme.colors.border }, pressed && styles.pressed]}
-              >
-                <HugeiconsIcon icon={controller.audioEnabled ? Mic01Icon : MicOff01Icon} size={22} color={theme.colors.primaryForeground} />
-              </Pressable>
-              <Pressable
-                accessibilityLabel={controller.videoEnabled ? "Turn camera off" : "Turn camera on"}
-                accessibilityRole="button"
-                accessibilityState={{ disabled: controller.simulatorMediaDisabled, selected: controller.videoEnabled }}
-                disabled={controller.simulatorMediaDisabled}
-                onPress={controller.toggleVideo}
-                style={({ pressed }) => [styles.mediaToggle, { backgroundColor: controller.videoEnabled ? theme.colors.controlsBackground : theme.colors.error, borderColor: theme.colors.border }, pressed && styles.pressed]}
-              >
-                <HugeiconsIcon icon={controller.videoEnabled ? Video01Icon : VideoOffIcon} size={22} color={theme.colors.primaryForeground} />
-              </Pressable>
-            </View>
-
-            <View style={styles.islandDivider} />
-
-            {/* Identity Field */}
-            <View style={[styles.identityArea, { backgroundColor: theme.colors.surface, borderColor: controller.isInputFocused ? theme.colors.ring : theme.colors.border }, controller.isInputFocused && styles.identityAreaFocused]}>
-              <TextInput
-                accessibilityLabel="Your name"
-                onChangeText={controller.setDisplayName}
-                onFocus={() => controller.setInputFocused(true)}
-                onBlur={() => controller.setInputFocused(false)}
-                placeholder="Enter your name to join"
-                placeholderTextColor={theme.colors.mutedForeground}
-                style={[styles.immersiveInput, { color: theme.colors.foreground }]}
-                value={controller.displayName}
-                maxLength={30}
-                returnKeyType="join"
-                onSubmitEditing={controller.handleJoin}
-              />
-              {controller.displayName.length > 0 && (
-                <Pressable accessibilityLabel="Clear name" accessibilityRole="button" onPress={() => controller.setDisplayName("")} style={styles.clearAction}>
-                  <HugeiconsIcon icon={CancelCircleIcon} size={18} color={theme.colors.mutedForeground} />
-                </Pressable>
-              )}
-            </View>
-
-            <Pressable
-              accessibilityLabel="Enter Space"
-              accessibilityRole="button"
-              accessibilityState={{ disabled: !canJoin }}
-              disabled={!canJoin}
-              onPress={controller.handleJoin}
-              style={({ pressed }) => [
-                styles.joinArrow,
-                canJoin && {
-                  backgroundColor: theme.colors.primary,
-                  shadowColor: theme.colors.primary,
-                  shadowOffset: { width: 0, height: 4 },
-                  shadowOpacity: 0.3,
-                  shadowRadius: 8,
-                },
-                pressed && canJoin && styles.pressed,
-                controller.isSubmitting && styles.disabled,
-              ]}
-            >
-              {controller.isSubmitting ? <ActivityIndicator color={theme.colors.primaryForeground} size="small" /> : <HugeiconsIcon icon={ArrowRight02Icon} size={28} color={canJoin ? theme.colors.primaryForeground : theme.colors.mutedForeground} />}
-            </Pressable>
-          </View>
-
-          {error ? <Text style={[styles.immersiveError, { color: theme.colors.error }]}>{error}</Text> : null}
-          {controller.simulatorMediaDisabled && <Text style={[styles.simulatorHintText, { color: theme.colors.mutedForeground }]}>{getIosSimulatorMediaMessage()}</Text>}
-        </Animated.View>
-      </View>
-    </KeyboardAvoidingView>
-  );
-}
-
-const styles = StyleSheet.create({
-  screen: {
-    flex: 1,
-    backgroundColor: Theme.colors.darkCanvas,
-  },
-  immersiveContainer: {
-    ...StyleSheet.absoluteFillObject,
-    backgroundColor: Theme.colors.darkCanvas,
-  },
-  fullScreenVideo: {
-    ...StyleSheet.absoluteFillObject,
-  },
-  immersiveAvatarContainer: {
-    ...StyleSheet.absoluteFillObject,
-    alignItems: "center",
-    justifyContent: "center",
-    backgroundColor: Theme.colors.background,
-  },
-  frostOverlay: {
-    ...StyleSheet.absoluteFillObject,
-    backgroundColor: Theme.colors.darkOverlay30,
-  },
-  hudLayer: {
-    flex: 1,
-    paddingHorizontal: 60,
-    paddingTop: 40,
-    paddingBottom: 60,
-  },
-  flexFill: {
-    flex: 1,
-  },
-  topHud: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-  },
-  backPuck: {
-    width: 52,
-    height: 52,
-    borderRadius: 26,
-    backgroundColor: Theme.colors.whiteOverlay08,
-    alignItems: "center",
-    justifyContent: "center",
-    borderWidth: 1,
-    borderColor: Theme.colors.whiteOverlay10,
-  },
-  spaceInfo: {
-    alignItems: "center",
-  },
-  spaceTitle: {
-    color: Theme.colors.onDark,
-    fontSize: 28,
-    fontWeight: "900",
-    letterSpacing: -0.5,
-  },
-  topHudSpacer: {
-    width: 52,
-  },
-  bottomHud: {
-    width: "100%",
-    maxWidth: 700,
-    alignSelf: "center",
-    gap: 16,
-  },
-  launchPad: {
-    flexDirection: "row",
-    alignItems: "center",
-    backgroundColor: Theme.colors.canvasOverlay85,
-    borderRadius: 40,
-    borderWidth: 1,
-    borderColor: Theme.colors.whiteOverlay12,
-    padding: 8,
-    height: 80,
-    shadowColor: Theme.colors.darkCanvas,
-    shadowOffset: { width: 0, height: 12 },
-    shadowOpacity: 0.5,
-    shadowRadius: 20,
-    elevation: 20,
-  },
-  mediaGroup: {
-    flexDirection: "row",
-    gap: 8,
-    paddingLeft: 4,
-  },
-  mediaToggle: {
-    width: 64,
-    height: 64,
-    borderRadius: 32,
-    backgroundColor: Theme.colors.whiteOverlay06,
-    alignItems: "center",
-    justifyContent: "center",
-    borderWidth: 1,
-    borderColor: Theme.colors.whiteOverlay05,
-  },
-  toggleOff: {
-    backgroundColor: Theme.colors.error,
-    borderColor: Theme.colors.error,
-  },
-  islandDivider: {
-    width: 1,
-    height: 32,
-    backgroundColor: Theme.colors.whiteOverlay10,
-    marginHorizontal: 16,
-  },
-  identityArea: {
-    flex: 1,
-    flexDirection: "row",
-    alignItems: "center",
-    height: "100%",
-    paddingHorizontal: 8,
-  },
-  identityAreaFocused: {},
-  immersiveInput: {
-    flex: 1,
-    color: Theme.colors.onDark,
-    fontSize: 20,
-    fontWeight: "700",
-    padding: 0,
-    letterSpacing: -0.5,
-  },
-  clearAction: {
-    padding: 10,
-  },
-  joinArrow: {
-    width: 64,
-    height: 64,
-    borderRadius: 32,
-    backgroundColor: Theme.colors.whiteOverlay05,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  immersiveError: {
-    color: Theme.colors.error,
-    fontSize: 14,
-    fontWeight: "700",
-    textAlign: "center",
-    marginTop: 8,
-  },
-  simulatorHintText: {
-    color: Theme.colors.whiteOverlay50,
-    fontSize: 12,
-    textAlign: "center",
-    fontWeight: "600",
-  },
-  pressed: {
-    opacity: 0.7,
-    transform: [{ scale: 0.94 }],
-  },
-  disabled: {
-    opacity: 0.5,
-  },
-});