@kesha-antonov/react-native-chat 5.0.0 → 6.0.0

package/lib/components/RecordingBar.js

@@ -0,0 +1,766 @@
+import { c as _c } from "react/compiler-runtime";
+import React, { useEffect, useState } from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import Animated, { Easing, FadeOut, Keyframe, ReduceMotion, cancelAnimation, interpolate, useAnimatedStyle, useSharedValue, withDelay, withRepeat, withSequence, withTiming } from 'react-native-reanimated';
+import { useIsRTL } from '../hooks/useIsRTL';
+import { useLabels } from '../hooks/useLabels';
+import { useThemedStyles } from '../hooks/useTheme';
+import { useStore } from '../store';
+import { ChevronIcon } from './MediaControls';
+import { formatRecordingTime } from './recordingFeedback';
+import { sameNumber } from './recordingMeter';
+
+/** How long the cancelled bar stays up for the trash can (`recordDeleteImageView`). */
+export const CANCEL_LINGER_MS = 900;
+/** The trash can's own run, inside the linger. */
+const TRASH_MS = 850;
+/** `RecordDot`: fades to nothing over 600ms and back, linearly. */
+const BLINK_MS = 600;
+/** A changed timer digit rolls down 15 while crossfading (116ms). */
+const DIGIT_ROLL = 15;
+const DIGIT_MS = 116;
+/** At rest the hint drifts 6 each way, a sweep a second (`SlideTextView`). */
+const DRIFT = 6;
+const DRIFT_SWEEP_MS = 1000;
+/** On lock the hint drops 12 as CANCEL comes down 12 into its place, 300ms. */
+const LOCK_SHIFT = 12;
+const LOCK_MS = 300;
+
+/** The bar's parts come in from 20 further along, over 150ms decelerate (`runningAnimation`). */
+const PART_IN = new Keyframe({
+  0: {
+    opacity: 0,
+    transform: [{
+      translateX: 20
+    }]
+  },
+  100: {
+    opacity: 1,
+    transform: [{
+      translateX: 0
+    }],
+    easing: Easing.out(Easing.quad)
+  }
+}).duration(150);
+const PART_IN_RTL = new Keyframe({
+  0: {
+    opacity: 0,
+    transform: [{
+      translateX: -20
+    }]
+  },
+  100: {
+    opacity: 1,
+    transform: [{
+      translateX: 0
+    }],
+    easing: Easing.out(Easing.quad)
+  }
+}).duration(150);
+/** The red dot scales in from nothing. */
+const DOT_IN = new Keyframe({
+  0: {
+    transform: [{
+      scale: 0
+    }]
+  },
+  100: {
+    transform: [{
+      scale: 1
+    }],
+    easing: Easing.out(Easing.quad)
+  }
+}).duration(150);
+const DIGIT_IN = new Keyframe({
+  0: {
+    opacity: 0,
+    transform: [{
+      translateY: -DIGIT_ROLL
+    }]
+  },
+  100: {
+    opacity: 1,
+    transform: [{
+      translateY: 0
+    }]
+  }
+}).duration(DIGIT_MS);
+const DIGIT_OUT = new Keyframe({
+  0: {
+    opacity: 1,
+    transform: [{
+      translateY: 0
+    }]
+  },
+  100: {
+    opacity: 0,
+    transform: [{
+      translateY: DIGIT_ROLL
+    }]
+  }
+}).duration(DIGIT_MS);
+const clamp01 = value => {
+  'worklet';
+
+  return value < 0 ? 0 : value > 1 ? 1 : value;
+};
+/**
+ * The composer while a take records (`recordPanel`): the red dot, the timer,
+ * "slide to cancel" following the circle, and CANCEL once locked.
+ */
+export function RecordingBar(t0) {
+  const $ = _c(66);
+  const {
+    elapsed,
+    isLocked,
+    isBlinking,
+    isCancelled,
+    slideProgress,
+    slideDistance,
+    onCancel
+  } = t0;
+  const styles = useThemedStyles(createStyles);
+  const labels = useLabels();
+  const isRTL = useIsRTL();
+  const cancelSign = isRTL ? 1 : -1;
+  const [wasLocked, setWasLocked] = useState(isLocked);
+  if (isLocked && !wasLocked) {
+    setWasLocked(true);
+  } else {
+    if (!isLocked && !isCancelled && wasLocked) {
+      setWasLocked(false);
+    }
+  }
+  const isShownLocked = isLocked || isCancelled && wasLocked;
+  const labelWidth = useSharedValue(0);
+  const drift = useSharedValue(0);
+  const lock = useSharedValue(isShownLocked ? 1 : 0);
+  const leave = useSharedValue(0);
+  let t1;
+  let t2;
+  if ($[0] !== isShownLocked || $[1] !== lock) {
+    t1 = () => {
+      lock.value = withTiming(isShownLocked ? 1 : 0, {
+        duration: LOCK_MS
+      });
+    };
+    t2 = [isShownLocked, lock];
+    $[0] = isShownLocked;
+    $[1] = lock;
+    $[2] = t1;
+    $[3] = t2;
+  } else {
+    t1 = $[2];
+    t2 = $[3];
+  }
+  useEffect(t1, t2);
+  let t3;
+  let t4;
+  if ($[4] !== isCancelled || $[5] !== leave) {
+    t3 = () => {
+      leave.value = isCancelled ? withDelay(200, withTiming(1, {
+        duration: 200
+      })) : 0;
+    };
+    t4 = [isCancelled, leave];
+    $[4] = isCancelled;
+    $[5] = leave;
+    $[6] = t3;
+    $[7] = t4;
+  } else {
+    t3 = $[6];
+    t4 = $[7];
+  }
+  useEffect(t3, t4);
+  let t5;
+  let t6;
+  if ($[8] !== drift) {
+    t5 = () => {
+      drift.value = withRepeat(withSequence(withTiming(1, {
+        duration: DRIFT_SWEEP_MS / 2,
+        easing: Easing.inOut(Easing.quad),
+        reduceMotion: ReduceMotion.System
+      }), withTiming(-1, {
+        duration: DRIFT_SWEEP_MS,
+        easing: Easing.inOut(Easing.quad),
+        reduceMotion: ReduceMotion.System
+      }), withTiming(0, {
+        duration: DRIFT_SWEEP_MS / 2,
+        easing: Easing.inOut(Easing.quad),
+        reduceMotion: ReduceMotion.System
+      })), -1);
+      return () => cancelAnimation(drift);
+    };
+    t6 = [drift];
+    $[8] = drift;
+    $[9] = t5;
+    $[10] = t6;
+  } else {
+    t5 = $[9];
+    t6 = $[10];
+  }
+  useEffect(t5, t6);
+  let t7;
+  if ($[11] !== labelWidth) {
+    t7 = event => {
+      labelWidth.value = event.nativeEvent.layout.width;
+    };
+    $[11] = labelWidth;
+    $[12] = t7;
+  } else {
+    t7 = $[12];
+  }
+  const onLabelLayout = t7;
+  const timerStyle = useAnimatedStyle(() => ({
+    opacity: 1 - leave.value,
+    transform: [{
+      translateX: cancelSign * 20 * leave.value
+    }]
+  }));
+  const hintStyle = useAnimatedStyle(() => {
+    const progress = slideProgress.value;
+    const circleOffset = cancelSign * slideDistance * (1 - progress);
+    const rest = clamp01((progress - 0.8) / 0.2);
+    return {
+      opacity: progress * (1 - lock.value) * (1 - leave.value),
+      transform: [{
+        translateX: cancelSign * (labelWidth.value / 4) * (1 - progress) + 0.3 * circleOffset + DRIFT * drift.value * rest + cancelSign * 20 * leave.value
+      }, {
+        translateY: LOCK_SHIFT * lock.value
+      }]
+    };
+  });
+  const cancelStyle = useAnimatedStyle(() => ({
+    opacity: lock.value * (1 - leave.value),
+    transform: [{
+      translateY: -LOCK_SHIFT * (1 - lock.value)
+    }]
+  }));
+  const partIn = isRTL ? PART_IN_RTL : PART_IN;
+  const t8 = isRTL && styles.rowReverse;
+  let t9;
+  if ($[13] !== styles.bar || $[14] !== t8) {
+    t9 = [styles.bar, t8];
+    $[13] = styles.bar;
+    $[14] = t8;
+    $[15] = t9;
+  } else {
+    t9 = $[15];
+  }
+  let t10;
+  if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+    t10 = FadeOut.duration(150);
+    $[16] = t10;
+  } else {
+    t10 = $[16];
+  }
+  let t11;
+  if ($[17] !== isBlinking || $[18] !== isCancelled) {
+    t11 = <Animated.View entering={DOT_IN}><RecordDot isBlinking={isBlinking} isCancelled={isCancelled} /></Animated.View>;
+    $[17] = isBlinking;
+    $[18] = isCancelled;
+    $[19] = t11;
+  } else {
+    t11 = $[19];
+  }
+  const t12 = isRTL ? styles.timerRTL : styles.timerLTR;
+  let t13;
+  if ($[20] !== elapsed || $[21] !== styles.timerText) {
+    t13 = <RecordingTime elapsed={elapsed} style={styles.timerText} />;
+    $[20] = elapsed;
+    $[21] = styles.timerText;
+    $[22] = t13;
+  } else {
+    t13 = $[22];
+  }
+  let t14;
+  if ($[23] !== t13 || $[24] !== timerStyle) {
+    t14 = <Animated.View style={timerStyle}>{t13}</Animated.View>;
+    $[23] = t13;
+    $[24] = timerStyle;
+    $[25] = t14;
+  } else {
+    t14 = $[25];
+  }
+  let t15;
+  if ($[26] !== partIn || $[27] !== t12 || $[28] !== t14) {
+    t15 = <Animated.View entering={partIn} style={t12}>{t14}</Animated.View>;
+    $[26] = partIn;
+    $[27] = t12;
+    $[28] = t14;
+    $[29] = t15;
+  } else {
+    t15 = $[29];
+  }
+  const t16 = isRTL && styles.rowReverse;
+  let t17;
+  if ($[30] !== hintStyle || $[31] !== styles.hint || $[32] !== t16) {
+    t17 = [styles.hint, t16, hintStyle];
+    $[30] = hintStyle;
+    $[31] = styles.hint;
+    $[32] = t16;
+    $[33] = t17;
+  } else {
+    t17 = $[33];
+  }
+  const t18 = isRTL ? "right" : "left";
+  let t19;
+  if ($[34] !== styles.hintColor.color || $[35] !== t18) {
+    t19 = <ChevronIcon color={styles.hintColor.color} size={12} direction={t18} />;
+    $[34] = styles.hintColor.color;
+    $[35] = t18;
+    $[36] = t19;
+  } else {
+    t19 = $[36];
+  }
+  let t20;
+  if ($[37] !== labels.slideToCancel || $[38] !== styles.hintText) {
+    t20 = <Text style={styles.hintText} numberOfLines={1}>{labels.slideToCancel}</Text>;
+    $[37] = labels.slideToCancel;
+    $[38] = styles.hintText;
+    $[39] = t20;
+  } else {
+    t20 = $[39];
+  }
+  let t21;
+  if ($[40] !== t17 || $[41] !== t19 || $[42] !== t20) {
+    t21 = <Animated.View style={t17}>{t19}{t20}</Animated.View>;
+    $[40] = t17;
+    $[41] = t19;
+    $[42] = t20;
+    $[43] = t21;
+  } else {
+    t21 = $[43];
+  }
+  let t22;
+  if ($[44] !== partIn || $[45] !== styles.hintFill || $[46] !== t21) {
+    t22 = <Animated.View entering={partIn} style={styles.hintFill} pointerEvents="none">{t21}</Animated.View>;
+    $[44] = partIn;
+    $[45] = styles.hintFill;
+    $[46] = t21;
+    $[47] = t22;
+  } else {
+    t22 = $[47];
+  }
+  let t23;
+  if ($[48] !== cancelStyle || $[49] !== isLocked || $[50] !== isShownLocked || $[51] !== labels.cancel || $[52] !== onCancel || $[53] !== styles.cancelText || $[54] !== styles.hintFill) {
+    t23 = isShownLocked && <Animated.View style={[styles.hintFill, cancelStyle]} pointerEvents={isLocked ? "auto" : "none"}><Pressable hitSlop={8} onPress={onCancel} accessibilityRole="button" accessibilityLabel="cancel recording"><Text style={styles.cancelText}>{labels.cancel.toLocaleUpperCase()}</Text></Pressable></Animated.View>;
+    $[48] = cancelStyle;
+    $[49] = isLocked;
+    $[50] = isShownLocked;
+    $[51] = labels.cancel;
+    $[52] = onCancel;
+    $[53] = styles.cancelText;
+    $[54] = styles.hintFill;
+    $[55] = t23;
+  } else {
+    t23 = $[55];
+  }
+  let t24;
+  if ($[56] !== onLabelLayout || $[57] !== styles.hintArea || $[58] !== t22 || $[59] !== t23) {
+    t24 = <View style={styles.hintArea} onLayout={onLabelLayout}>{t22}{t23}</View>;
+    $[56] = onLabelLayout;
+    $[57] = styles.hintArea;
+    $[58] = t22;
+    $[59] = t23;
+    $[60] = t24;
+  } else {
+    t24 = $[60];
+  }
+  let t25;
+  if ($[61] !== t11 || $[62] !== t15 || $[63] !== t24 || $[64] !== t9) {
+    t25 = <Animated.View style={t9} exiting={t10}>{t11}{t15}{t24}</Animated.View>;
+    $[61] = t11;
+    $[62] = t15;
+    $[63] = t24;
+    $[64] = t9;
+    $[65] = t25;
+  } else {
+    t25 = $[65];
+  }
+  return t25;
+}
+
+/**
+ * The timer, one slot per character, so a changed digit rolls down out of
+ * its slot while the new one rolls in from above. The tenths are the
+ * exception: they only roll when a digit before them changes, and
+ * swaps the last one in place - rolled ten times a second, it never sat still
+ * long enough to read and the timer looked like it was shaking.
+ */
+function RecordingTime(t0) {
+  const $ = _c(5);
+  const {
+    elapsed,
+    style
+  } = t0;
+  const ms = useStore(elapsed, sameNumber, 0);
+  let t1;
+  if ($[0] !== ms) {
+    t1 = formatRecordingTime(ms);
+    $[0] = ms;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== style || $[3] !== t1) {
+    t2 = <RollingTimer text={t1} style={style} />;
+    $[2] = style;
+    $[3] = t1;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  return t2;
+}
+function RollingTimer(t0) {
+  const $ = _c(15);
+  const {
+    text,
+    style
+  } = t0;
+  const styles = useThemedStyles(createStyles);
+  let T0;
+  let t1;
+  let t2;
+  let t3;
+  let t4;
+  if ($[0] !== style || $[1] !== styles.digitSlot || $[2] !== styles.timerRow || $[3] !== text) {
+    const chars = text.split("");
+    T0 = View;
+    t1 = styles.timerRow;
+    t2 = true;
+    t3 = text;
+    t4 = chars.map((char, index) => <View key={index} style={styles.digitSlot}>{index === chars.length - 1 ? <Text style={style}>{char}</Text> : <Animated.Text key={char} entering={DIGIT_IN} exiting={DIGIT_OUT} style={style}>{char}</Animated.Text>}</View>);
+    $[0] = style;
+    $[1] = styles.digitSlot;
+    $[2] = styles.timerRow;
+    $[3] = text;
+    $[4] = T0;
+    $[5] = t1;
+    $[6] = t2;
+    $[7] = t3;
+    $[8] = t4;
+  } else {
+    T0 = $[4];
+    t1 = $[5];
+    t2 = $[6];
+    t3 = $[7];
+    t4 = $[8];
+  }
+  let t5;
+  if ($[9] !== T0 || $[10] !== t1 || $[11] !== t2 || $[12] !== t3 || $[13] !== t4) {
+    t5 = <T0 style={t1} accessible={t2} accessibilityLabel={t3}>{t4}</T0>;
+    $[9] = T0;
+    $[10] = t1;
+    $[11] = t2;
+    $[12] = t3;
+    $[13] = t4;
+    $[14] = t5;
+  } else {
+    t5 = $[14];
+  }
+  return t5;
+}
+
+/**
+ * The record dot: a 10pt red dot blinking 600ms out and 600ms in.
+ * On cancel it hops into a trash can: the can grows with its lid open, the dot falls in, the lid
+ * shuts and the can shrinks away.
+ */
+function RecordDot(t0) {
+  const $ = _c(38);
+  const {
+    isBlinking,
+    isCancelled
+  } = t0;
+  const styles = useThemedStyles(createStyles);
+  const blink = useSharedValue(1);
+  const trash = useSharedValue(0);
+  let t1;
+  let t2;
+  if ($[0] !== blink || $[1] !== isBlinking || $[2] !== isCancelled) {
+    t1 = () => {
+      if (!isBlinking || isCancelled) {
+        cancelAnimation(blink);
+        blink.value = withTiming(1, {
+          duration: 100
+        });
+        return;
+      }
+      blink.value = 1;
+      blink.value = withRepeat(withTiming(0, {
+        duration: BLINK_MS,
+        easing: Easing.linear,
+        reduceMotion: ReduceMotion.System
+      }), -1, true);
+      return () => cancelAnimation(blink);
+    };
+    t2 = [isBlinking, isCancelled, blink];
+    $[0] = blink;
+    $[1] = isBlinking;
+    $[2] = isCancelled;
+    $[3] = t1;
+    $[4] = t2;
+  } else {
+    t1 = $[3];
+    t2 = $[4];
+  }
+  useEffect(t1, t2);
+  let t3;
+  let t4;
+  if ($[5] !== isCancelled || $[6] !== trash) {
+    t3 = () => {
+      trash.value = isCancelled ? withTiming(1, {
+        duration: TRASH_MS,
+        easing: Easing.linear
+      }) : 0;
+    };
+    t4 = [isCancelled, trash];
+    $[5] = isCancelled;
+    $[6] = trash;
+    $[7] = t3;
+    $[8] = t4;
+  } else {
+    t3 = $[7];
+    t4 = $[8];
+  }
+  useEffect(t3, t4);
+  const dotStyle = useAnimatedStyle(() => {
+    const t = trash.value;
+    return {
+      opacity: blink.value,
+      transform: [{
+        translateY: interpolate(t, [0, 0.22, 0.5], [0, -16, 2], "clamp")
+      }, {
+        scale: interpolate(t, [0, 0.22, 0.45, 0.5], [1, 0.8, 0.6, 0], "clamp")
+      }]
+    };
+  });
+  const canStyle = useAnimatedStyle(() => {
+    const t_0 = trash.value;
+    const scale = interpolate(t_0, [0, 0.2, 0.72, 1], [0, 1, 1, 0], "clamp");
+    return {
+      opacity: scale > 0.01 ? 1 : 0,
+      transform: [{
+        scale
+      }]
+    };
+  });
+  const lidStyle = useAnimatedStyle(() => ({
+    transform: [{
+      translateX: -LID_WIDTH / 2
+    }, {
+      rotate: `${interpolate(trash.value, [0.04, 0.22, 0.5, 0.64], [0, -55, -55, 0], "clamp")}deg`
+    }, {
+      translateX: LID_WIDTH / 2
+    }]
+  }));
+  let t5;
+  if ($[9] !== canStyle || $[10] !== styles.can) {
+    t5 = [styles.can, canStyle];
+    $[9] = canStyle;
+    $[10] = styles.can;
+    $[11] = t5;
+  } else {
+    t5 = $[11];
+  }
+  let t6;
+  if ($[12] !== lidStyle || $[13] !== styles.lid) {
+    t6 = [styles.lid, lidStyle];
+    $[12] = lidStyle;
+    $[13] = styles.lid;
+    $[14] = t6;
+  } else {
+    t6 = $[14];
+  }
+  let t7;
+  if ($[15] !== styles.lidHandle) {
+    t7 = <View style={styles.lidHandle} />;
+    $[15] = styles.lidHandle;
+    $[16] = t7;
+  } else {
+    t7 = $[16];
+  }
+  let t8;
+  if ($[17] !== t6 || $[18] !== t7) {
+    t8 = <Animated.View style={t6}>{t7}</Animated.View>;
+    $[17] = t6;
+    $[18] = t7;
+    $[19] = t8;
+  } else {
+    t8 = $[19];
+  }
+  let t10;
+  let t9;
+  if ($[20] !== styles.canRib) {
+    t9 = <View style={styles.canRib} />;
+    t10 = <View style={styles.canRib} />;
+    $[20] = styles.canRib;
+    $[21] = t10;
+    $[22] = t9;
+  } else {
+    t10 = $[21];
+    t9 = $[22];
+  }
+  let t11;
+  if ($[23] !== styles.canBody || $[24] !== t10 || $[25] !== t9) {
+    t11 = <View style={styles.canBody}>{t9}{t10}</View>;
+    $[23] = styles.canBody;
+    $[24] = t10;
+    $[25] = t9;
+    $[26] = t11;
+  } else {
+    t11 = $[26];
+  }
+  let t12;
+  if ($[27] !== t11 || $[28] !== t5 || $[29] !== t8) {
+    t12 = <Animated.View style={t5} pointerEvents="none">{t8}{t11}</Animated.View>;
+    $[27] = t11;
+    $[28] = t5;
+    $[29] = t8;
+    $[30] = t12;
+  } else {
+    t12 = $[30];
+  }
+  let t13;
+  if ($[31] !== dotStyle || $[32] !== styles.dot) {
+    t13 = <Animated.View style={[styles.dot, dotStyle]} />;
+    $[31] = dotStyle;
+    $[32] = styles.dot;
+    $[33] = t13;
+  } else {
+    t13 = $[33];
+  }
+  let t14;
+  if ($[34] !== styles.dotSlot || $[35] !== t12 || $[36] !== t13) {
+    t14 = <View style={styles.dotSlot}>{t12}{t13}</View>;
+    $[34] = styles.dotSlot;
+    $[35] = t12;
+    $[36] = t13;
+    $[37] = t14;
+  } else {
+    t14 = $[37];
+  }
+  return t14;
+}
+const DOT_SIZE = 10;
+const LID_WIDTH = 14;
+const createStyles = theme => StyleSheet.create({
+  // Sized like the field so the row height does not jump.
+  bar: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    minHeight: theme.composer.minHeight,
+    paddingHorizontal: theme.composer.fieldPaddingH
+  },
+  rowReverse: {
+    flexDirection: 'row-reverse'
+  },
+  dotSlot: {
+    width: 16,
+    height: 24,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  dot: {
+    width: DOT_SIZE,
+    height: DOT_SIZE,
+    borderRadius: DOT_SIZE / 2,
+    backgroundColor: theme.colors.error
+  },
+  can: {
+    position: 'absolute',
+    bottom: 2,
+    alignItems: 'center'
+  },
+  lid: {
+    width: LID_WIDTH,
+    height: 2,
+    borderRadius: 1,
+    marginBottom: 1,
+    backgroundColor: theme.colors.placeholder,
+    alignItems: 'center'
+  },
+  lidHandle: {
+    position: 'absolute',
+    top: -2,
+    width: 5,
+    height: 2,
+    borderTopLeftRadius: 1,
+    borderTopRightRadius: 1,
+    backgroundColor: theme.colors.placeholder
+  },
+  canBody: {
+    width: 11,
+    height: 12,
+    borderWidth: 1.5,
+    borderTopWidth: 0,
+    borderBottomLeftRadius: 3,
+    borderBottomRightRadius: 3,
+    borderColor: theme.colors.placeholder,
+    flexDirection: 'row',
+    justifyContent: 'space-evenly',
+    paddingVertical: 2
+  },
+  canRib: {
+    width: 1,
+    backgroundColor: theme.colors.placeholder
+  },
+  timerLTR: {
+    marginLeft: 6
+  },
+  timerRTL: {
+    marginRight: 6
+  },
+  // `m:ss,t`: wide enough for the tenths so the bar does not jitter.
+  timerRow: {
+    flexDirection: 'row',
+    minWidth: 58
+  },
+  digitSlot: {
+    overflow: 'hidden'
+  },
+  timerText: {
+    fontSize: 15,
+    fontWeight: '600',
+    color: theme.colors.inputText,
+    fontVariant: ['tabular-nums']
+  },
+  hintArea: {
+    flex: 1,
+    alignSelf: 'stretch',
+    overflow: 'hidden'
+  },
+  hintFill: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  hint: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6
+  },
+  hintText: {
+    fontSize: 15,
+    color: theme.colors.placeholder
+  },
+  // Carries the chevron color through the StyleSheet so it stays themed.
+  hintColor: {
+    color: theme.colors.placeholder
+  },
+  cancelText: {
+    fontSize: 15,
+    fontWeight: '600',
+    letterSpacing: 0.5,
+    color: theme.colors.accent
+  }
+});
+//# sourceMappingURL=RecordingBar.js.map