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

package/lib/components/MediaControls.js

@@ -1,524 +1,1168 @@
+import { c as _c } from "react/compiler-runtime";
 import React, { useMemo } from 'react';
 import { StyleSheet, View } from 'react-native';
 /** Right-pointing play triangle drawn with borders (no SVG dependency). */
-export const PlayIcon = ({ color = '#fff', size = 14 }) => {
-    const styles = useMemo(() => createPlayStyles(color, size), [color, size]);
-    return <View style={styles.triangle}/>;
+export const PlayIcon = t0 => {
+  const $ = _c(5);
+  const {
+    color: t1,
+    size: t2
+  } = t0;
+  const color = t1 === undefined ? "#fff" : t1;
+  const size = t2 === undefined ? 14 : t2;
+  let t3;
+  if ($[0] !== color || $[1] !== size) {
+    t3 = createPlayStyles(color, size);
+    $[0] = color;
+    $[1] = size;
+    $[2] = t3;
+  } else {
+    t3 = $[2];
+  }
+  const styles = t3;
+  let t4;
+  if ($[3] !== styles.triangle) {
+    t4 = <View style={styles.triangle} />;
+    $[3] = styles.triangle;
+    $[4] = t4;
+  } else {
+    t4 = $[4];
+  }
+  return t4;
 };
+
 /** Two-bar pause glyph. */
-export const PauseIcon = ({ color = '#fff', size = 14 }) => {
-    const styles = useMemo(() => createPauseStyles(color, size), [color, size]);
-    return (<View style={styles.row}>
-      <View style={styles.bar}/>
-      <View style={styles.bar}/>
-    </View>);
+export const PauseIcon = t0 => {
+  const $ = _c(10);
+  const {
+    color: t1,
+    size: t2
+  } = t0;
+  const color = t1 === undefined ? "#fff" : t1;
+  const size = t2 === undefined ? 14 : t2;
+  let t3;
+  if ($[0] !== color || $[1] !== size) {
+    t3 = createPauseStyles(color, size);
+    $[0] = color;
+    $[1] = size;
+    $[2] = t3;
+  } else {
+    t3 = $[2];
+  }
+  const styles = t3;
+  let t4;
+  let t5;
+  if ($[3] !== styles.bar) {
+    t4 = <View style={styles.bar} />;
+    t5 = <View style={styles.bar} />;
+    $[3] = styles.bar;
+    $[4] = t4;
+    $[5] = t5;
+  } else {
+    t4 = $[4];
+    t5 = $[5];
+  }
+  let t6;
+  if ($[6] !== styles.row || $[7] !== t4 || $[8] !== t5) {
+    t6 = <View style={styles.row}>{t4}{t5}</View>;
+    $[6] = styles.row;
+    $[7] = t4;
+    $[8] = t5;
+    $[9] = t6;
+  } else {
+    t6 = $[9];
+  }
+  return t6;
 };
 const createPlayStyles = (color, size) => StyleSheet.create({
-    triangle: {
-        width: 0,
-        height: 0,
-        borderTopWidth: size / 2,
-        borderBottomWidth: size / 2,
-        borderLeftWidth: size * 0.85,
-        borderTopColor: 'transparent',
-        borderBottomColor: 'transparent',
-        borderLeftColor: color,
-        // optical centering inside a circle
-        marginLeft: size * 0.15,
-    },
+  triangle: {
+    width: 0,
+    height: 0,
+    borderTopWidth: size / 2,
+    borderBottomWidth: size / 2,
+    borderLeftWidth: size * 0.85,
+    borderTopColor: 'transparent',
+    borderBottomColor: 'transparent',
+    borderLeftColor: color,
+    // optical centering inside a circle
+    marginLeft: size * 0.15
+  }
 });
 const createPauseStyles = (color, size) => StyleSheet.create({
-    row: {
-        flexDirection: 'row',
-    },
-    bar: {
-        width: Math.max(2, size * 0.28),
-        height: size,
-        marginHorizontal: size * 0.1,
-        borderRadius: 1,
-        backgroundColor: color,
-    },
+  row: {
+    flexDirection: 'row'
+  },
+  bar: {
+    width: Math.max(2, size * 0.28),
+    height: size,
+    marginHorizontal: size * 0.1,
+    borderRadius: 1,
+    backgroundColor: color
+  }
 });
+
 /** An "X" close glyph drawn with two crossed bars. */
-export const CloseIcon = ({ color = '#fff', size = 18 }) => {
-    const styles = useMemo(() => createCloseStyles(color, size), [color, size]);
-    return (<View style={styles.wrapper}>
-      <View style={styles.bar1}/>
-      <View style={styles.bar2}/>
-    </View>);
+export const CloseIcon = t0 => {
+  const $ = _c(11);
+  const {
+    color: t1,
+    size: t2
+  } = t0;
+  const color = t1 === undefined ? "#fff" : t1;
+  const size = t2 === undefined ? 18 : t2;
+  let t3;
+  if ($[0] !== color || $[1] !== size) {
+    t3 = createCloseStyles(color, size);
+    $[0] = color;
+    $[1] = size;
+    $[2] = t3;
+  } else {
+    t3 = $[2];
+  }
+  const styles = t3;
+  let t4;
+  if ($[3] !== styles.bar1) {
+    t4 = <View style={styles.bar1} />;
+    $[3] = styles.bar1;
+    $[4] = t4;
+  } else {
+    t4 = $[4];
+  }
+  let t5;
+  if ($[5] !== styles.bar2) {
+    t5 = <View style={styles.bar2} />;
+    $[5] = styles.bar2;
+    $[6] = t5;
+  } else {
+    t5 = $[6];
+  }
+  let t6;
+  if ($[7] !== styles.wrapper || $[8] !== t4 || $[9] !== t5) {
+    t6 = <View style={styles.wrapper}>{t4}{t5}</View>;
+    $[7] = styles.wrapper;
+    $[8] = t4;
+    $[9] = t5;
+    $[10] = t6;
+  } else {
+    t6 = $[10];
+  }
+  return t6;
 };
+
 /** A chevron drawn with two borders. `direction` points it left, down or up. */
-export const ChevronIcon = ({ color = '#fff', size = 14, direction = 'left' }) => {
-    const styles = useMemo(() => createChevronStyles(color, size, direction), [color, size, direction]);
-    return <View style={styles.chevron}/>;
+export const ChevronIcon = t0 => {
+  const $ = _c(6);
+  const {
+    color: t1,
+    size: t2,
+    direction: t3
+  } = t0;
+  const color = t1 === undefined ? "#fff" : t1;
+  const size = t2 === undefined ? 14 : t2;
+  const direction = t3 === undefined ? "left" : t3;
+  let t4;
+  if ($[0] !== color || $[1] !== direction || $[2] !== size) {
+    t4 = createChevronStyles(color, size, direction);
+    $[0] = color;
+    $[1] = direction;
+    $[2] = size;
+    $[3] = t4;
+  } else {
+    t4 = $[3];
+  }
+  const styles = t4;
+  let t5;
+  if ($[4] !== styles.chevron) {
+    t5 = <View style={styles.chevron} />;
+    $[4] = styles.chevron;
+    $[5] = t5;
+  } else {
+    t5 = $[5];
+  }
+  return t5;
 };
+
 /** A "+" glyph drawn with two crossed bars. */
-export const PlusIcon = ({ color = '#fff', size = 18 }) => {
-    const styles = useMemo(() => createPlusStyles(color, size), [color, size]);
-    return (<View style={styles.wrapper}>
-      <View style={styles.horizontal}/>
-      <View style={styles.vertical}/>
-    </View>);
+export const PlusIcon = t0 => {
+  const $ = _c(11);
+  const {
+    color: t1,
+    size: t2
+  } = t0;
+  const color = t1 === undefined ? "#fff" : t1;
+  const size = t2 === undefined ? 18 : t2;
+  let t3;
+  if ($[0] !== color || $[1] !== size) {
+    t3 = createPlusStyles(color, size);
+    $[0] = color;
+    $[1] = size;
+    $[2] = t3;
+  } else {
+    t3 = $[2];
+  }
+  const styles = t3;
+  let t4;
+  if ($[3] !== styles.horizontal) {
+    t4 = <View style={styles.horizontal} />;
+    $[3] = styles.horizontal;
+    $[4] = t4;
+  } else {
+    t4 = $[4];
+  }
+  let t5;
+  if ($[5] !== styles.vertical) {
+    t5 = <View style={styles.vertical} />;
+    $[5] = styles.vertical;
+    $[6] = t5;
+  } else {
+    t5 = $[6];
+  }
+  let t6;
+  if ($[7] !== styles.wrapper || $[8] !== t4 || $[9] !== t5) {
+    t6 = <View style={styles.wrapper}>{t4}{t5}</View>;
+    $[7] = styles.wrapper;
+    $[8] = t4;
+    $[9] = t5;
+    $[10] = t6;
+  } else {
+    t6 = $[10];
+  }
+  return t6;
 };
+
 /** A simple map-pin (teardrop head + inner dot) drawn with Views. */
-export const PinIcon = ({ color = '#fff', size = 18 }) => {
-    const styles = useMemo(() => createPinStyles(color, size), [color, size]);
-    return (<View style={styles.wrapper}>
-      <View style={styles.head}>
-        <View style={styles.hole}/>
-      </View>
-      <View style={styles.point}/>
-    </View>);
+export const PinIcon = t0 => {
+  const $ = _c(14);
+  const {
+    color: t1,
+    size: t2
+  } = t0;
+  const color = t1 === undefined ? "#fff" : t1;
+  const size = t2 === undefined ? 18 : t2;
+  let t3;
+  if ($[0] !== color || $[1] !== size) {
+    t3 = createPinStyles(color, size);
+    $[0] = color;
+    $[1] = size;
+    $[2] = t3;
+  } else {
+    t3 = $[2];
+  }
+  const styles = t3;
+  let t4;
+  if ($[3] !== styles.hole) {
+    t4 = <View style={styles.hole} />;
+    $[3] = styles.hole;
+    $[4] = t4;
+  } else {
+    t4 = $[4];
+  }
+  let t5;
+  if ($[5] !== styles.head || $[6] !== t4) {
+    t5 = <View style={styles.head}>{t4}</View>;
+    $[5] = styles.head;
+    $[6] = t4;
+    $[7] = t5;
+  } else {
+    t5 = $[7];
+  }
+  let t6;
+  if ($[8] !== styles.point) {
+    t6 = <View style={styles.point} />;
+    $[8] = styles.point;
+    $[9] = t6;
+  } else {
+    t6 = $[9];
+  }
+  let t7;
+  if ($[10] !== styles.wrapper || $[11] !== t5 || $[12] !== t6) {
+    t7 = <View style={styles.wrapper}>{t5}{t6}</View>;
+    $[10] = styles.wrapper;
+    $[11] = t5;
+    $[12] = t6;
+    $[13] = t7;
+  } else {
+    t7 = $[13];
+  }
+  return t7;
 };
+
 /** Microphone glyph (capsule body + stand) drawn with Views. */
-export const MicIcon = ({ color = '#fff', size = 22 }) => {
-    const styles = useMemo(() => createMicStyles(color, size), [color, size]);
-    return (<View style={styles.wrapper}>
-      <View style={styles.body}/>
-      <View style={styles.stem}/>
-      <View style={styles.base}/>
-    </View>);
+export const MicIcon = t0 => {
+  const $ = _c(14);
+  const {
+    color: t1,
+    size: t2
+  } = t0;
+  const color = t1 === undefined ? "#fff" : t1;
+  const size = t2 === undefined ? 22 : t2;
+  let t3;
+  if ($[0] !== color || $[1] !== size) {
+    t3 = createMicStyles(color, size);
+    $[0] = color;
+    $[1] = size;
+    $[2] = t3;
+  } else {
+    t3 = $[2];
+  }
+  const styles = t3;
+  let t4;
+  if ($[3] !== styles.body) {
+    t4 = <View style={styles.body} />;
+    $[3] = styles.body;
+    $[4] = t4;
+  } else {
+    t4 = $[4];
+  }
+  let t5;
+  if ($[5] !== styles.stem) {
+    t5 = <View style={styles.stem} />;
+    $[5] = styles.stem;
+    $[6] = t5;
+  } else {
+    t5 = $[6];
+  }
+  let t6;
+  if ($[7] !== styles.base) {
+    t6 = <View style={styles.base} />;
+    $[7] = styles.base;
+    $[8] = t6;
+  } else {
+    t6 = $[8];
+  }
+  let t7;
+  if ($[9] !== styles.wrapper || $[10] !== t4 || $[11] !== t5 || $[12] !== t6) {
+    t7 = <View style={styles.wrapper}>{t4}{t5}{t6}</View>;
+    $[9] = styles.wrapper;
+    $[10] = t4;
+    $[11] = t5;
+    $[12] = t6;
+    $[13] = t7;
+  } else {
+    t7 = $[13];
+  }
+  return t7;
 };
+
 /** Camera glyph (body + lens) drawn with Views. */
-export const CameraIcon = ({ color = '#fff', size = 22 }) => {
-    const styles = useMemo(() => createCameraStyles(color, size), [color, size]);
-    return (<View style={styles.body}>
-      <View style={styles.lens}/>
-    </View>);
+export const CameraIcon = t0 => {
+  const $ = _c(8);
+  const {
+    color: t1,
+    size: t2
+  } = t0;
+  const color = t1 === undefined ? "#fff" : t1;
+  const size = t2 === undefined ? 22 : t2;
+  let t3;
+  if ($[0] !== color || $[1] !== size) {
+    t3 = createCameraStyles(color, size);
+    $[0] = color;
+    $[1] = size;
+    $[2] = t3;
+  } else {
+    t3 = $[2];
+  }
+  const styles = t3;
+  let t4;
+  if ($[3] !== styles.lens) {
+    t4 = <View style={styles.lens} />;
+    $[3] = styles.lens;
+    $[4] = t4;
+  } else {
+    t4 = $[4];
+  }
+  let t5;
+  if ($[5] !== styles.body || $[6] !== t4) {
+    t5 = <View style={styles.body}>{t4}</View>;
+    $[5] = styles.body;
+    $[6] = t4;
+    $[7] = t5;
+  } else {
+    t5 = $[7];
+  }
+  return t5;
 };
 const createMicStyles = (color, size) => StyleSheet.create({
-    wrapper: {
-        width: size,
-        height: size,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    body: {
-        width: size * 0.4,
-        height: size * 0.56,
-        borderRadius: size * 0.2,
-        backgroundColor: color,
-    },
-    stem: {
-        width: Math.max(2, size * 0.09),
-        height: size * 0.16,
-        backgroundColor: color,
-    },
-    base: {
-        width: size * 0.5,
-        height: Math.max(2, size * 0.09),
-        borderRadius: 2,
-        backgroundColor: color,
-    },
+  wrapper: {
+    width: size,
+    height: size,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  body: {
+    width: size * 0.4,
+    height: size * 0.56,
+    borderRadius: size * 0.2,
+    backgroundColor: color
+  },
+  stem: {
+    width: Math.max(2, size * 0.09),
+    height: size * 0.16,
+    backgroundColor: color
+  },
+  base: {
+    width: size * 0.5,
+    height: Math.max(2, size * 0.09),
+    borderRadius: 2,
+    backgroundColor: color
+  }
 });
 const createCameraStyles = (color, size) => StyleSheet.create({
-    body: {
-        width: size,
-        height: size * 0.72,
-        borderRadius: size * 0.16,
-        backgroundColor: color,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    lens: {
-        width: size * 0.34,
-        height: size * 0.34,
-        borderRadius: size * 0.17,
-        borderWidth: Math.max(1.5, size * 0.08),
-        borderColor: 'rgba(0,0,0,0.35)',
-    },
+  body: {
+    width: size,
+    height: size * 0.72,
+    borderRadius: size * 0.16,
+    backgroundColor: color,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  lens: {
+    width: size * 0.34,
+    height: size * 0.34,
+    borderRadius: size * 0.17,
+    borderWidth: Math.max(1.5, size * 0.08),
+    borderColor: 'rgba(0,0,0,0.35)'
+  }
 });
 const createCloseStyles = (color, size) => {
-    const thickness = Math.max(1.5, Math.round(size * 0.12));
-    const bar = {
-        position: 'absolute',
-        width: size,
-        height: thickness,
-        borderRadius: thickness / 2,
-        backgroundColor: color,
-    };
-    return StyleSheet.create({
-        wrapper: {
-            width: size,
-            height: size,
-            alignItems: 'center',
-            justifyContent: 'center',
-        },
-        bar1: { ...bar, transform: [{ rotate: '45deg' }] },
-        bar2: { ...bar, transform: [{ rotate: '-45deg' }] },
-    });
+  const thickness = Math.max(1.5, Math.round(size * 0.12));
+  const bar = {
+    position: 'absolute',
+    width: size,
+    height: thickness,
+    borderRadius: thickness / 2,
+    backgroundColor: color
+  };
+  return StyleSheet.create({
+    wrapper: {
+      width: size,
+      height: size,
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    bar1: {
+      ...bar,
+      transform: [{
+        rotate: '45deg'
+      }]
+    },
+    bar2: {
+      ...bar,
+      transform: [{
+        rotate: '-45deg'
+      }]
+    }
+  });
 };
+
 // 45deg points the right/bottom border pair down; +90deg (135deg) points it
 // left; -135deg points it up; -45deg (the remaining step) points it right.
 const CHEVRON_ROTATION = {
-    down: '45deg',
-    left: '135deg',
-    up: '-135deg',
-    right: '-45deg',
+  down: '45deg',
+  left: '135deg',
+  up: '-135deg',
+  right: '-45deg'
 };
 const createChevronStyles = (color, size, direction) => {
-    const thickness = Math.max(1.5, Math.round(size * 0.16));
-    return StyleSheet.create({
-        chevron: {
-            width: size * 0.6,
-            height: size * 0.6,
-            borderColor: color,
-            borderRightWidth: thickness,
-            borderBottomWidth: thickness,
-            transform: [{ rotate: CHEVRON_ROTATION[direction] }],
-        },
-    });
+  const thickness = Math.max(1.5, Math.round(size * 0.16));
+  return StyleSheet.create({
+    chevron: {
+      width: size * 0.6,
+      height: size * 0.6,
+      borderColor: color,
+      borderRightWidth: thickness,
+      borderBottomWidth: thickness,
+      transform: [{
+        rotate: CHEVRON_ROTATION[direction]
+      }]
+    }
+  });
 };
 const createPlusStyles = (color, size) => {
-    const thickness = Math.max(2, Math.round(size * 0.14));
-    return StyleSheet.create({
-        wrapper: {
-            width: size,
-            height: size,
-            alignItems: 'center',
-            justifyContent: 'center',
-        },
-        horizontal: {
-            position: 'absolute',
-            width: size,
-            height: thickness,
-            borderRadius: thickness / 2,
-            backgroundColor: color,
-        },
-        vertical: {
-            position: 'absolute',
-            width: thickness,
-            height: size,
-            borderRadius: thickness / 2,
-            backgroundColor: color,
-        },
-    });
+  const thickness = Math.max(2, Math.round(size * 0.14));
+  return StyleSheet.create({
+    wrapper: {
+      width: size,
+      height: size,
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    horizontal: {
+      position: 'absolute',
+      width: size,
+      height: thickness,
+      borderRadius: thickness / 2,
+      backgroundColor: color
+    },
+    vertical: {
+      position: 'absolute',
+      width: thickness,
+      height: size,
+      borderRadius: thickness / 2,
+      backgroundColor: color
+    }
+  });
 };
 const createPinStyles = (color, size) => {
-    const head = size * 0.8;
-    return StyleSheet.create({
-        wrapper: {
-            width: size,
-            height: size,
-            alignItems: 'center',
-        },
-        head: {
-            width: head,
-            height: head,
-            borderRadius: head / 2,
-            backgroundColor: color,
-            alignItems: 'center',
-            justifyContent: 'center',
-        },
-        hole: {
-            width: head * 0.36,
-            height: head * 0.36,
-            borderRadius: head * 0.18,
-            backgroundColor: 'rgba(0,0,0,0.25)',
-        },
-        point: {
-            width: 0,
-            height: 0,
-            marginTop: -size * 0.18,
-            borderLeftWidth: head * 0.28,
-            borderRightWidth: head * 0.28,
-            borderTopWidth: head * 0.42,
-            borderLeftColor: 'transparent',
-            borderRightColor: 'transparent',
-            borderTopColor: color,
-        },
-    });
+  const head = size * 0.8;
+  return StyleSheet.create({
+    wrapper: {
+      width: size,
+      height: size,
+      alignItems: 'center'
+    },
+    head: {
+      width: head,
+      height: head,
+      borderRadius: head / 2,
+      backgroundColor: color,
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    hole: {
+      width: head * 0.36,
+      height: head * 0.36,
+      borderRadius: head * 0.18,
+      backgroundColor: 'rgba(0,0,0,0.25)'
+    },
+    point: {
+      width: 0,
+      height: 0,
+      marginTop: -size * 0.18,
+      borderLeftWidth: head * 0.28,
+      borderRightWidth: head * 0.28,
+      borderTopWidth: head * 0.42,
+      borderLeftColor: 'transparent',
+      borderRightColor: 'transparent',
+      borderTopColor: color
+    }
+  });
 };
+
 /** A smiley face (circle outline + eyes + mouth). */
-export const EmojiIcon = ({ color = '#fff', size = 24 }) => {
-    const styles = useMemo(() => createEmojiStyles(color, size), [color, size]);
-    return (<View style={styles.face}>
-      <View style={styles.eyes}>
-        <View style={styles.eye}/>
-        <View style={styles.eye}/>
-      </View>
-      <View style={styles.mouth}/>
-    </View>);
+export const EmojiIcon = t0 => {
+  const $ = _c(16);
+  const {
+    color: t1,
+    size: t2
+  } = t0;
+  const color = t1 === undefined ? "#fff" : t1;
+  const size = t2 === undefined ? 24 : t2;
+  let t3;
+  if ($[0] !== color || $[1] !== size) {
+    t3 = createEmojiStyles(color, size);
+    $[0] = color;
+    $[1] = size;
+    $[2] = t3;
+  } else {
+    t3 = $[2];
+  }
+  const styles = t3;
+  let t4;
+  let t5;
+  if ($[3] !== styles.eye) {
+    t4 = <View style={styles.eye} />;
+    t5 = <View style={styles.eye} />;
+    $[3] = styles.eye;
+    $[4] = t4;
+    $[5] = t5;
+  } else {
+    t4 = $[4];
+    t5 = $[5];
+  }
+  let t6;
+  if ($[6] !== styles.eyes || $[7] !== t4 || $[8] !== t5) {
+    t6 = <View style={styles.eyes}>{t4}{t5}</View>;
+    $[6] = styles.eyes;
+    $[7] = t4;
+    $[8] = t5;
+    $[9] = t6;
+  } else {
+    t6 = $[9];
+  }
+  let t7;
+  if ($[10] !== styles.mouth) {
+    t7 = <View style={styles.mouth} />;
+    $[10] = styles.mouth;
+    $[11] = t7;
+  } else {
+    t7 = $[11];
+  }
+  let t8;
+  if ($[12] !== styles.face || $[13] !== t6 || $[14] !== t7) {
+    t8 = <View style={styles.face}>{t6}{t7}</View>;
+    $[12] = styles.face;
+    $[13] = t6;
+    $[14] = t7;
+    $[15] = t8;
+  } else {
+    t8 = $[15];
+  }
+  return t8;
 };
+
 /** A paperclip approximation: a rounded three-sided loop, tilted. */
-export const PaperclipIcon = ({ color = '#fff', size = 24 }) => {
-    const styles = useMemo(() => createClipStyles(color, size), [color, size]);
-    return (<View style={styles.wrapper}>
-      <View style={styles.clip}/>
-    </View>);
+export const PaperclipIcon = t0 => {
+  const $ = _c(8);
+  const {
+    color: t1,
+    size: t2
+  } = t0;
+  const color = t1 === undefined ? "#fff" : t1;
+  const size = t2 === undefined ? 24 : t2;
+  let t3;
+  if ($[0] !== color || $[1] !== size) {
+    t3 = createClipStyles(color, size);
+    $[0] = color;
+    $[1] = size;
+    $[2] = t3;
+  } else {
+    t3 = $[2];
+  }
+  const styles = t3;
+  let t4;
+  if ($[3] !== styles.clip) {
+    t4 = <View style={styles.clip} />;
+    $[3] = styles.clip;
+    $[4] = t4;
+  } else {
+    t4 = $[4];
+  }
+  let t5;
+  if ($[5] !== styles.wrapper || $[6] !== t4) {
+    t5 = <View style={styles.wrapper}>{t4}</View>;
+    $[5] = styles.wrapper;
+    $[6] = t4;
+    $[7] = t5;
+  } else {
+    t5 = $[7];
+  }
+  return t5;
 };
+
 /** A reply corner-arrow. */
-export const ReplyArrowIcon = ({ color = '#fff', size = 20 }) => {
-    const styles = useMemo(() => createReplyStyles(color, size), [color, size]);
-    return (<View style={styles.wrapper}>
-      <View style={styles.arrow}/>
-      <View style={styles.line}/>
-    </View>);
+export const ReplyArrowIcon = t0 => {
+  const $ = _c(11);
+  const {
+    color: t1,
+    size: t2
+  } = t0;
+  const color = t1 === undefined ? "#fff" : t1;
+  const size = t2 === undefined ? 20 : t2;
+  let t3;
+  if ($[0] !== color || $[1] !== size) {
+    t3 = createReplyStyles(color, size);
+    $[0] = color;
+    $[1] = size;
+    $[2] = t3;
+  } else {
+    t3 = $[2];
+  }
+  const styles = t3;
+  let t4;
+  if ($[3] !== styles.arrow) {
+    t4 = <View style={styles.arrow} />;
+    $[3] = styles.arrow;
+    $[4] = t4;
+  } else {
+    t4 = $[4];
+  }
+  let t5;
+  if ($[5] !== styles.line) {
+    t5 = <View style={styles.line} />;
+    $[5] = styles.line;
+    $[6] = t5;
+  } else {
+    t5 = $[6];
+  }
+  let t6;
+  if ($[7] !== styles.wrapper || $[8] !== t4 || $[9] !== t5) {
+    t6 = <View style={styles.wrapper}>{t4}{t5}</View>;
+    $[7] = styles.wrapper;
+    $[8] = t4;
+    $[9] = t5;
+    $[10] = t6;
+  } else {
+    t6 = $[10];
+  }
+  return t6;
 };
+
 /** A pencil (tilted body + tip). */
-export const PencilIcon = ({ color = '#fff', size = 18 }) => {
-    const styles = useMemo(() => createPencilStyles(color, size), [color, size]);
-    return (<View style={styles.wrapper}>
-      <View style={styles.body}/>
-    </View>);
+export const PencilIcon = t0 => {
+  const $ = _c(8);
+  const {
+    color: t1,
+    size: t2
+  } = t0;
+  const color = t1 === undefined ? "#fff" : t1;
+  const size = t2 === undefined ? 18 : t2;
+  let t3;
+  if ($[0] !== color || $[1] !== size) {
+    t3 = createPencilStyles(color, size);
+    $[0] = color;
+    $[1] = size;
+    $[2] = t3;
+  } else {
+    t3 = $[2];
+  }
+  const styles = t3;
+  let t4;
+  if ($[3] !== styles.body) {
+    t4 = <View style={styles.body} />;
+    $[3] = styles.body;
+    $[4] = t4;
+  } else {
+    t4 = $[4];
+  }
+  let t5;
+  if ($[5] !== styles.wrapper || $[6] !== t4) {
+    t5 = <View style={styles.wrapper}>{t4}</View>;
+    $[5] = styles.wrapper;
+    $[6] = t4;
+    $[7] = t5;
+  } else {
+    t5 = $[7];
+  }
+  return t5;
 };
+
 /** A padlock (body + shackle). */
-export const LockIcon = ({ color = '#fff', size = 16 }) => {
-    const styles = useMemo(() => createLockStyles(color, size), [color, size]);
-    return (<View style={styles.wrapper}>
-      <View style={styles.shackle}/>
-      <View style={styles.body}/>
-    </View>);
+export const LockIcon = t0 => {
+  const $ = _c(11);
+  const {
+    color: t1,
+    size: t2
+  } = t0;
+  const color = t1 === undefined ? "#fff" : t1;
+  const size = t2 === undefined ? 16 : t2;
+  let t3;
+  if ($[0] !== color || $[1] !== size) {
+    t3 = createLockStyles(color, size);
+    $[0] = color;
+    $[1] = size;
+    $[2] = t3;
+  } else {
+    t3 = $[2];
+  }
+  const styles = t3;
+  let t4;
+  if ($[3] !== styles.shackle) {
+    t4 = <View style={styles.shackle} />;
+    $[3] = styles.shackle;
+    $[4] = t4;
+  } else {
+    t4 = $[4];
+  }
+  let t5;
+  if ($[5] !== styles.body) {
+    t5 = <View style={styles.body} />;
+    $[5] = styles.body;
+    $[6] = t5;
+  } else {
+    t5 = $[6];
+  }
+  let t6;
+  if ($[7] !== styles.wrapper || $[8] !== t4 || $[9] !== t5) {
+    t6 = <View style={styles.wrapper}>{t4}{t5}</View>;
+    $[7] = styles.wrapper;
+    $[8] = t4;
+    $[9] = t5;
+    $[10] = t6;
+  } else {
+    t6 = $[10];
+  }
+  return t6;
 };
+
 /** Camera-flip: a camera body with a circular arrow around it. */
-export const FlipCameraIcon = ({ color = '#fff', size = 22 }) => {
-    const styles = useMemo(() => createFlipStyles(color, size), [color, size]);
-    return (<View style={styles.wrapper}>
-      <View style={styles.ring}/>
-      <View style={styles.arrow}/>
-      <View style={styles.lens}/>
-    </View>);
+export const FlipCameraIcon = t0 => {
+  const $ = _c(14);
+  const {
+    color: t1,
+    size: t2
+  } = t0;
+  const color = t1 === undefined ? "#fff" : t1;
+  const size = t2 === undefined ? 22 : t2;
+  let t3;
+  if ($[0] !== color || $[1] !== size) {
+    t3 = createFlipStyles(color, size);
+    $[0] = color;
+    $[1] = size;
+    $[2] = t3;
+  } else {
+    t3 = $[2];
+  }
+  const styles = t3;
+  let t4;
+  if ($[3] !== styles.ring) {
+    t4 = <View style={styles.ring} />;
+    $[3] = styles.ring;
+    $[4] = t4;
+  } else {
+    t4 = $[4];
+  }
+  let t5;
+  if ($[5] !== styles.arrow) {
+    t5 = <View style={styles.arrow} />;
+    $[5] = styles.arrow;
+    $[6] = t5;
+  } else {
+    t5 = $[6];
+  }
+  let t6;
+  if ($[7] !== styles.lens) {
+    t6 = <View style={styles.lens} />;
+    $[7] = styles.lens;
+    $[8] = t6;
+  } else {
+    t6 = $[8];
+  }
+  let t7;
+  if ($[9] !== styles.wrapper || $[10] !== t4 || $[11] !== t5 || $[12] !== t6) {
+    t7 = <View style={styles.wrapper}>{t4}{t5}{t6}</View>;
+    $[9] = styles.wrapper;
+    $[10] = t4;
+    $[11] = t5;
+    $[12] = t6;
+    $[13] = t7;
+  } else {
+    t7 = $[13];
+  }
+  return t7;
 };
+
 /** A lightning bolt, drawn as two offset triangles. */
-export const FlashIcon = ({ color = '#fff', size = 22 }) => {
-    const styles = useMemo(() => createFlashStyles(color, size), [color, size]);
-    return (<View style={styles.wrapper}>
-      <View style={styles.top}/>
-      <View style={styles.bottom}/>
-    </View>);
+export const FlashIcon = t0 => {
+  const $ = _c(11);
+  const {
+    color: t1,
+    size: t2
+  } = t0;
+  const color = t1 === undefined ? "#fff" : t1;
+  const size = t2 === undefined ? 22 : t2;
+  let t3;
+  if ($[0] !== color || $[1] !== size) {
+    t3 = createFlashStyles(color, size);
+    $[0] = color;
+    $[1] = size;
+    $[2] = t3;
+  } else {
+    t3 = $[2];
+  }
+  const styles = t3;
+  let t4;
+  if ($[3] !== styles.top) {
+    t4 = <View style={styles.top} />;
+    $[3] = styles.top;
+    $[4] = t4;
+  } else {
+    t4 = $[4];
+  }
+  let t5;
+  if ($[5] !== styles.bottom) {
+    t5 = <View style={styles.bottom} />;
+    $[5] = styles.bottom;
+    $[6] = t5;
+  } else {
+    t5 = $[6];
+  }
+  let t6;
+  if ($[7] !== styles.wrapper || $[8] !== t4 || $[9] !== t5) {
+    t6 = <View style={styles.wrapper}>{t4}{t5}</View>;
+    $[7] = styles.wrapper;
+    $[8] = t4;
+    $[9] = t5;
+    $[10] = t6;
+  } else {
+    t6 = $[10];
+  }
+  return t6;
 };
 const createFlipStyles = (color, size) => {
-    const t = Math.max(1.5, Math.round(size * 0.09));
-    return StyleSheet.create({
-        wrapper: {
-            width: size,
-            height: size,
-            alignItems: 'center',
-            justifyContent: 'center',
-        },
-        // Open ring: the gap plus the arrow head reads as "rotate".
-        ring: {
-            position: 'absolute',
-            width: size * 0.82,
-            height: size * 0.82,
-            borderRadius: size * 0.41,
-            borderWidth: t,
-            borderColor: color,
-            borderRightColor: 'transparent',
-        },
-        arrow: {
-            position: 'absolute',
-            top: size * 0.06,
-            right: size * 0.1,
-            width: 0,
-            height: 0,
-            borderLeftWidth: t * 1.6,
-            borderRightWidth: t * 1.6,
-            borderBottomWidth: t * 2.2,
-            borderLeftColor: 'transparent',
-            borderRightColor: 'transparent',
-            borderBottomColor: color,
-            transform: [{ rotate: '135deg' }],
-        },
-        lens: {
-            width: size * 0.26,
-            height: size * 0.26,
-            borderRadius: size * 0.13,
-            backgroundColor: color,
-        },
-    });
-};
-const createFlashStyles = (color, size) => StyleSheet.create({
+  const t = Math.max(1.5, Math.round(size * 0.09));
+  return StyleSheet.create({
     wrapper: {
-        width: size,
-        height: size,
-        alignItems: 'center',
-        justifyContent: 'center',
+      width: size,
+      height: size,
+      alignItems: 'center',
+      justifyContent: 'center'
     },
-    top: {
-        width: 0,
-        height: 0,
-        borderLeftWidth: size * 0.2,
-        borderRightWidth: size * 0.12,
-        borderBottomWidth: size * 0.4,
-        borderLeftColor: 'transparent',
-        borderRightColor: 'transparent',
-        borderBottomColor: color,
-        transform: [{ translateX: size * 0.04 }],
+    // Open ring: the gap plus the arrow head reads as "rotate".
+    ring: {
+      position: 'absolute',
+      width: size * 0.82,
+      height: size * 0.82,
+      borderRadius: size * 0.41,
+      borderWidth: t,
+      borderColor: color,
+      borderRightColor: 'transparent'
     },
-    bottom: {
-        width: 0,
-        height: 0,
-        borderLeftWidth: size * 0.12,
-        borderRightWidth: size * 0.2,
-        borderTopWidth: size * 0.4,
-        borderLeftColor: 'transparent',
-        borderRightColor: 'transparent',
-        borderTopColor: color,
-        transform: [{ translateX: -size * 0.04 }],
+    arrow: {
+      position: 'absolute',
+      top: size * 0.06,
+      right: size * 0.1,
+      width: 0,
+      height: 0,
+      borderLeftWidth: t * 1.6,
+      borderRightWidth: t * 1.6,
+      borderBottomWidth: t * 2.2,
+      borderLeftColor: 'transparent',
+      borderRightColor: 'transparent',
+      borderBottomColor: color,
+      transform: [{
+        rotate: '135deg'
+      }]
     },
+    lens: {
+      width: size * 0.26,
+      height: size * 0.26,
+      borderRadius: size * 0.13,
+      backgroundColor: color
+    }
+  });
+};
+const createFlashStyles = (color, size) => StyleSheet.create({
+  wrapper: {
+    width: size,
+    height: size,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  top: {
+    width: 0,
+    height: 0,
+    borderLeftWidth: size * 0.2,
+    borderRightWidth: size * 0.12,
+    borderBottomWidth: size * 0.4,
+    borderLeftColor: 'transparent',
+    borderRightColor: 'transparent',
+    borderBottomColor: color,
+    transform: [{
+      translateX: size * 0.04
+    }]
+  },
+  bottom: {
+    width: 0,
+    height: 0,
+    borderLeftWidth: size * 0.12,
+    borderRightWidth: size * 0.2,
+    borderTopWidth: size * 0.4,
+    borderLeftColor: 'transparent',
+    borderRightColor: 'transparent',
+    borderTopColor: color,
+    transform: [{
+      translateX: -size * 0.04
+    }]
+  }
 });
+
 /** A trash can (lid bar + body). */
-export const TrashIcon = ({ color = '#fff', size = 18 }) => {
-    const styles = useMemo(() => createTrashStyles(color, size), [color, size]);
-    return (<View style={styles.wrapper}>
-      <View style={styles.lid}/>
-      <View style={styles.body}/>
-    </View>);
+export const TrashIcon = t0 => {
+  const $ = _c(11);
+  const {
+    color: t1,
+    size: t2
+  } = t0;
+  const color = t1 === undefined ? "#fff" : t1;
+  const size = t2 === undefined ? 18 : t2;
+  let t3;
+  if ($[0] !== color || $[1] !== size) {
+    t3 = createTrashStyles(color, size);
+    $[0] = color;
+    $[1] = size;
+    $[2] = t3;
+  } else {
+    t3 = $[2];
+  }
+  const styles = t3;
+  let t4;
+  if ($[3] !== styles.lid) {
+    t4 = <View style={styles.lid} />;
+    $[3] = styles.lid;
+    $[4] = t4;
+  } else {
+    t4 = $[4];
+  }
+  let t5;
+  if ($[5] !== styles.body) {
+    t5 = <View style={styles.body} />;
+    $[5] = styles.body;
+    $[6] = t5;
+  } else {
+    t5 = $[6];
+  }
+  let t6;
+  if ($[7] !== styles.wrapper || $[8] !== t4 || $[9] !== t5) {
+    t6 = <View style={styles.wrapper}>{t4}{t5}</View>;
+    $[7] = styles.wrapper;
+    $[8] = t4;
+    $[9] = t5;
+    $[10] = t6;
+  } else {
+    t6 = $[10];
+  }
+  return t6;
 };
 const createEmojiStyles = (color, size) => {
-    const t = Math.max(1.5, Math.round(size * 0.08));
-    return StyleSheet.create({
-        face: {
-            width: size,
-            height: size,
-            borderRadius: size / 2,
-            borderWidth: t,
-            borderColor: color,
-            alignItems: 'center',
-            justifyContent: 'center',
-        },
-        eyes: {
-            flexDirection: 'row',
-            gap: size * 0.18,
-            marginTop: -size * 0.06,
-        },
-        eye: {
-            width: t,
-            height: t,
-            borderRadius: t,
-            backgroundColor: color,
-        },
-        mouth: {
-            width: size * 0.4,
-            height: size * 0.2,
-            marginTop: size * 0.04,
-            borderBottomWidth: t,
-            borderLeftWidth: t,
-            borderRightWidth: t,
-            borderColor: color,
-            borderBottomLeftRadius: size * 0.2,
-            borderBottomRightRadius: size * 0.2,
-        },
-    });
+  const t = Math.max(1.5, Math.round(size * 0.08));
+  return StyleSheet.create({
+    face: {
+      width: size,
+      height: size,
+      borderRadius: size / 2,
+      borderWidth: t,
+      borderColor: color,
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    eyes: {
+      flexDirection: 'row',
+      gap: size * 0.18,
+      marginTop: -size * 0.06
+    },
+    eye: {
+      width: t,
+      height: t,
+      borderRadius: t,
+      backgroundColor: color
+    },
+    mouth: {
+      width: size * 0.4,
+      height: size * 0.2,
+      marginTop: size * 0.04,
+      borderBottomWidth: t,
+      borderLeftWidth: t,
+      borderRightWidth: t,
+      borderColor: color,
+      borderBottomLeftRadius: size * 0.2,
+      borderBottomRightRadius: size * 0.2
+    }
+  });
 };
 const createClipStyles = (color, size) => {
-    const t = Math.max(1.5, Math.round(size * 0.09));
-    return StyleSheet.create({
-        wrapper: {
-            width: size,
-            height: size,
-            alignItems: 'center',
-            justifyContent: 'center',
-        },
-        clip: {
-            width: size * 0.5,
-            height: size * 0.78,
-            borderWidth: t,
-            borderColor: color,
-            borderRadius: size * 0.25,
-            borderBottomWidth: 0,
-            transform: [{ rotate: '35deg' }],
-        },
-    });
+  const t = Math.max(1.5, Math.round(size * 0.09));
+  return StyleSheet.create({
+    wrapper: {
+      width: size,
+      height: size,
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    clip: {
+      width: size * 0.5,
+      height: size * 0.78,
+      borderWidth: t,
+      borderColor: color,
+      borderRadius: size * 0.25,
+      borderBottomWidth: 0,
+      transform: [{
+        rotate: '35deg'
+      }]
+    }
+  });
 };
 const createReplyStyles = (color, size) => {
-    const t = Math.max(1.5, Math.round(size * 0.12));
-    return StyleSheet.create({
-        wrapper: {
-            width: size,
-            height: size,
-            justifyContent: 'center',
-        },
-        arrow: {
-            position: 'absolute',
-            left: 0,
-            top: size * 0.28,
-            width: size * 0.34,
-            height: size * 0.34,
-            borderLeftWidth: t,
-            borderBottomWidth: t,
-            borderColor: color,
-            transform: [{ rotate: '45deg' }],
-        },
-        line: {
-            position: 'absolute',
-            left: size * 0.12,
-            top: size * 0.46,
-            width: size * 0.7,
-            height: t,
-            backgroundColor: color,
-            borderRadius: t / 2,
-        },
-    });
-};
-const createPencilStyles = (color, size) => StyleSheet.create({
+  const t = Math.max(1.5, Math.round(size * 0.12));
+  return StyleSheet.create({
     wrapper: {
-        width: size,
-        height: size,
-        alignItems: 'center',
-        justifyContent: 'center',
+      width: size,
+      height: size,
+      justifyContent: 'center'
     },
-    body: {
-        width: size * 0.28,
-        height: size * 0.86,
-        backgroundColor: color,
-        borderRadius: size * 0.06,
-        transform: [{ rotate: '45deg' }],
+    arrow: {
+      position: 'absolute',
+      left: 0,
+      top: size * 0.28,
+      width: size * 0.34,
+      height: size * 0.34,
+      borderLeftWidth: t,
+      borderBottomWidth: t,
+      borderColor: color,
+      transform: [{
+        rotate: '45deg'
+      }]
     },
+    line: {
+      position: 'absolute',
+      left: size * 0.12,
+      top: size * 0.46,
+      width: size * 0.7,
+      height: t,
+      backgroundColor: color,
+      borderRadius: t / 2
+    }
+  });
+};
+const createPencilStyles = (color, size) => StyleSheet.create({
+  wrapper: {
+    width: size,
+    height: size,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  body: {
+    width: size * 0.28,
+    height: size * 0.86,
+    backgroundColor: color,
+    borderRadius: size * 0.06,
+    transform: [{
+      rotate: '45deg'
+    }]
+  }
 });
 const createLockStyles = (color, size) => {
-    const t = Math.max(1.5, Math.round(size * 0.12));
-    return StyleSheet.create({
-        wrapper: {
-            width: size,
-            height: size,
-            alignItems: 'center',
-            justifyContent: 'center',
-        },
-        shackle: {
-            width: size * 0.5,
-            height: size * 0.4,
-            borderWidth: t,
-            borderColor: color,
-            borderBottomWidth: 0,
-            borderTopLeftRadius: size * 0.25,
-            borderTopRightRadius: size * 0.25,
-            marginBottom: -t,
-        },
-        body: {
-            width: size * 0.74,
-            height: size * 0.5,
-            borderRadius: size * 0.1,
-            backgroundColor: color,
-        },
-    });
+  const t = Math.max(1.5, Math.round(size * 0.12));
+  return StyleSheet.create({
+    wrapper: {
+      width: size,
+      height: size,
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    shackle: {
+      width: size * 0.5,
+      height: size * 0.4,
+      borderWidth: t,
+      borderColor: color,
+      borderBottomWidth: 0,
+      borderTopLeftRadius: size * 0.25,
+      borderTopRightRadius: size * 0.25,
+      marginBottom: -t
+    },
+    body: {
+      width: size * 0.74,
+      height: size * 0.5,
+      borderRadius: size * 0.1,
+      backgroundColor: color
+    }
+  });
 };
 const createTrashStyles = (color, size) => {
-    const t = Math.max(1.5, Math.round(size * 0.1));
-    return StyleSheet.create({
-        wrapper: {
-            width: size,
-            height: size,
-            alignItems: 'center',
-            justifyContent: 'center',
-        },
-        lid: {
-            width: size * 0.7,
-            height: t,
-            backgroundColor: color,
-            borderRadius: t / 2,
-            marginBottom: t,
-        },
-        body: {
-            width: size * 0.56,
-            height: size * 0.6,
-            borderWidth: t,
-            borderColor: color,
-            borderTopWidth: 0,
-            borderBottomLeftRadius: size * 0.12,
-            borderBottomRightRadius: size * 0.12,
-        },
-    });
+  const t = Math.max(1.5, Math.round(size * 0.1));
+  return StyleSheet.create({
+    wrapper: {
+      width: size,
+      height: size,
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    lid: {
+      width: size * 0.7,
+      height: t,
+      backgroundColor: color,
+      borderRadius: t / 2,
+      marginBottom: t
+    },
+    body: {
+      width: size * 0.56,
+      height: size * 0.6,
+      borderWidth: t,
+      borderColor: color,
+      borderTopWidth: 0,
+      borderBottomLeftRadius: size * 0.12,
+      borderBottomRightRadius: size * 0.12
+    }
+  });
 };
 //# sourceMappingURL=MediaControls.js.map