expo-dev-client-components 1.6.0 → 1.7.0

package/CHANGELOG.md

@@ -10,6 +10,16 @@
 
 ### 💡 Others
 
+## 1.7.0 — 2023-11-14
+
+### 💡 Others
+
+- Removed backward compatible code for deprecated SDKs. ([#25154](https://github.com/expo/expo/pull/25154) by [@kudo](https://github.com/kudo))
+
+## 1.6.1 — 2023-09-04
+
+_This version does not introduce any user-facing changes._
+
 ## 1.6.0 — 2023-08-02
 
 _This version does not introduce any user-facing changes._

package/build/Button.js

@@ -130,9 +130,11 @@ function FadeOnPressContainer({ activeOpacity = 0.2, ...props }) {
             useNativeDriver: true,
         }).start();
     }, []);
-    return (React.createElement(Container, { onPressIn: onPressIn, onPressOut: onPressOut, ...props, style: {
+    return (<Container onPressIn={onPressIn} onPressOut={onPressOut} {...props} style={{
             opacity: animatedValue.current,
-        } }, props.children));
+        }}>
+      {props.children}
+    </Container>);
 }
 function HighlightOnPressContainer(props) {
     const theme = useColorScheme();
@@ -150,7 +152,8 @@ function HighlightOnPressContainer(props) {
     const underlayStyle = {
         backgroundColor,
     };
-    return (React.createElement(Container, { onPressIn: onPressIn, onPressOut: onPressOut, ...props },
-        React.createElement(Animated.View, { style: underlayStyle }, props.children)));
+    return (<Container onPressIn={onPressIn} onPressOut={onPressOut} {...props}>
+      <Animated.View style={underlayStyle}>{props.children}</Animated.View>
+    </Container>);
 }
 //# sourceMappingURL=Button.js.map

package/build/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../src/Button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { lightTheme, darkTheme, borderRadius, shadows, palette } from '@expo/styleguide-native';\nimport * as React from 'react';\nimport {\n  Text as RNText,\n  Animated,\n  useColorScheme,\n  Pressable as RNPressable,\n  Easing,\n} from 'react-native';\n\nimport { create } from './create-primitive';\nimport { rounded, margin, padding, text } from './theme';\n\nconst AnimatedPressable = Animated.createAnimatedComponent(RNPressable);\n\nconst Text = create(RNText, {\n  base: {\n    fontFamily: 'Inter-Regular',\n    color: lightTheme.text.default,\n    fontSize: 16,\n    lineHeight: 22,\n  },\n\n  props: {\n    accessibilityRole: 'text',\n  },\n\n  variants: {\n    ...text,\n\n    color: {\n      primary: { color: lightTheme.button.primary.foreground },\n      secondary: { color: lightTheme.button.secondary.foreground },\n      tertiary: { color: lightTheme.button.tertiary.foreground },\n      ghost: { color: lightTheme.button.ghost.foreground },\n      transparent: { color: lightTheme.button.transparent.foreground },\n      default: { color: lightTheme.text.default },\n    },\n  },\n\n  selectors: {\n    dark: {\n      base: {\n        color: darkTheme.text.default,\n      },\n\n      color: {\n        primary: { color: darkTheme.button.primary.foreground },\n        secondary: { color: darkTheme.button.secondary.foreground },\n        tertiary: { color: darkTheme.button.tertiary.foreground },\n        ghost: { color: darkTheme.button.ghost.foreground },\n        transparent: { color: darkTheme.button.transparent.foreground },\n        default: { color: darkTheme.text.default },\n      },\n    },\n  },\n});\n\nconst Container = create(AnimatedPressable, {\n  base: {\n    overflow: 'hidden',\n    borderRadius: borderRadius.medium,\n  },\n\n  props: {\n    accessibilityRole: 'button',\n    android_disableSound: true,\n  },\n\n  variants: {\n    bg: {\n      default: { backgroundColor: lightTheme.background.default },\n      primary: { backgroundColor: lightTheme.button.primary.background },\n      secondary: { backgroundColor: lightTheme.button.secondary.background },\n      tertiary: { backgroundColor: lightTheme.button.tertiary.background },\n      ghost: { backgroundColor: lightTheme.button.ghost.background },\n      transparent: { backgroundColor: lightTheme.button.transparent.background },\n      disabled: { backgroundColor: lightTheme.status.default },\n    },\n\n    border: {\n      ghost: { borderColor: lightTheme.button.ghost.border, borderWidth: 1 },\n    },\n\n    shadow: {\n      button: shadows.button,\n    },\n\n    ...rounded,\n    ...padding,\n    ...margin,\n  },\n\n  selectors: {\n    dark: {\n      bg: {\n        default: { backgroundColor: darkTheme.background.default },\n        primary: { backgroundColor: darkTheme.button.primary.background },\n        secondary: { backgroundColor: darkTheme.button.secondary.background },\n        tertiary: { backgroundColor: darkTheme.button.tertiary.background },\n        ghost: { backgroundColor: darkTheme.button.ghost.background },\n        transparent: { backgroundColor: darkTheme.button.transparent.background },\n        disabled: { backgroundColor: darkTheme.status.default },\n      },\n    },\n  },\n});\n\nexport const Button = {\n  Container,\n  FadeOnPressContainer,\n  HighlightOnPressContainer,\n  Text,\n};\n\ntype FadingPressableProps = {\n  activeOpacity?: number;\n};\n\ntype NoOptionals<T> = {\n  [P in keyof T]-?: T[P];\n};\n\ntype ContainerProps = React.ComponentProps<typeof Container>;\ntype ContainerBackgroundColors = NoOptionals<ContainerProps>['bg'];\n\nconst lightHighlightColorMap: Record<ContainerBackgroundColors, string> = {\n  disabled: 'transparent',\n  default: lightTheme.background.secondary,\n  primary: lightTheme.background.tertiary,\n  secondary: lightTheme.background.quaternary,\n  tertiary: palette.light.gray[600],\n  ghost: lightTheme.background.tertiary,\n  transparent: lightTheme.background.secondary,\n};\n\nconst darkHighlightColorMap: Record<ContainerBackgroundColors, string> = {\n  disabled: 'transparent',\n  default: darkTheme.background.secondary,\n  primary: darkTheme.background.tertiary,\n  secondary: darkTheme.background.quaternary,\n  tertiary: palette.dark.gray[600],\n  ghost: darkTheme.background.tertiary,\n  transparent: darkTheme.background.secondary,\n};\n\nconst highlightColorMap = {\n  dark: darkHighlightColorMap,\n  light: lightHighlightColorMap,\n};\n\nfunction FadeOnPressContainer({\n  activeOpacity = 0.2,\n  ...props\n}: React.ComponentProps<typeof Container> & FadingPressableProps) {\n  const animatedValue = React.useRef(new Animated.Value(1));\n\n  const onPressIn = React.useCallback(() => {\n    Animated.timing(animatedValue.current, {\n      toValue: activeOpacity,\n      duration: 150,\n      easing: Easing.inOut(Easing.quad),\n      useNativeDriver: true,\n    }).start();\n  }, []);\n\n  const onPressOut = React.useCallback(() => {\n    Animated.timing(animatedValue.current, {\n      toValue: 1,\n      duration: 150,\n      easing: Easing.inOut(Easing.quad),\n      useNativeDriver: true,\n    }).start();\n  }, []);\n\n  return (\n    <Container\n      onPressIn={onPressIn}\n      onPressOut={onPressOut}\n      {...props}\n      style={{\n        opacity: animatedValue.current,\n      }}>\n      {props.children}\n    </Container>\n  );\n}\n\nfunction HighlightOnPressContainer(props: React.ComponentProps<typeof Container>) {\n  const theme = useColorScheme();\n  const [isPressing, setIsPressing] = React.useState(false);\n\n  const onPressIn = React.useCallback(() => {\n    setIsPressing(true);\n  }, []);\n\n  const onPressOut = React.useCallback(() => {\n    setIsPressing(false);\n  }, []);\n\n  let backgroundColor = 'transparent';\n\n  if (props.bg && isPressing && theme != null) {\n    backgroundColor = highlightColorMap[theme][props.bg];\n  }\n\n  const underlayStyle = {\n    backgroundColor,\n  };\n\n  return (\n    <Container onPressIn={onPressIn} onPressOut={onPressOut} {...props}>\n      <Animated.View style={underlayStyle}>{props.children}</Animated.View>\n    </Container>\n  );\n}\n"]}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../src/Button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { lightTheme, darkTheme, borderRadius, shadows, palette } from '@expo/styleguide-native';\nimport * as React from 'react';\nimport {\n  Text as RNText,\n  Animated,\n  useColorScheme,\n  Pressable as RNPressable,\n  Easing,\n} from 'react-native';\n\nimport { create } from './create-primitive';\nimport { rounded, margin, padding, text } from './theme';\n\nconst AnimatedPressable = Animated.createAnimatedComponent(RNPressable);\n\nconst Text = create(RNText, {\n  base: {\n    fontFamily: 'Inter-Regular',\n    color: lightTheme.text.default,\n    fontSize: 16,\n    lineHeight: 22,\n  },\n\n  props: {\n    accessibilityRole: 'text',\n  },\n\n  variants: {\n    ...text,\n\n    color: {\n      primary: { color: lightTheme.button.primary.foreground },\n      secondary: { color: lightTheme.button.secondary.foreground },\n      tertiary: { color: lightTheme.button.tertiary.foreground },\n      ghost: { color: lightTheme.button.ghost.foreground },\n      transparent: { color: lightTheme.button.transparent.foreground },\n      default: { color: lightTheme.text.default },\n    },\n  },\n\n  selectors: {\n    dark: {\n      base: {\n        color: darkTheme.text.default,\n      },\n\n      color: {\n        primary: { color: darkTheme.button.primary.foreground },\n        secondary: { color: darkTheme.button.secondary.foreground },\n        tertiary: { color: darkTheme.button.tertiary.foreground },\n        ghost: { color: darkTheme.button.ghost.foreground },\n        transparent: { color: darkTheme.button.transparent.foreground },\n        default: { color: darkTheme.text.default },\n      },\n    },\n  },\n});\n\nconst Container = create(AnimatedPressable, {\n  base: {\n    overflow: 'hidden',\n    borderRadius: borderRadius.medium,\n  },\n\n  props: {\n    accessibilityRole: 'button',\n    android_disableSound: true,\n  },\n\n  variants: {\n    bg: {\n      default: { backgroundColor: lightTheme.background.default },\n      primary: { backgroundColor: lightTheme.button.primary.background },\n      secondary: { backgroundColor: lightTheme.button.secondary.background },\n      tertiary: { backgroundColor: lightTheme.button.tertiary.background },\n      ghost: { backgroundColor: lightTheme.button.ghost.background },\n      transparent: { backgroundColor: lightTheme.button.transparent.background },\n      disabled: { backgroundColor: lightTheme.status.default },\n    },\n\n    border: {\n      ghost: { borderColor: lightTheme.button.ghost.border, borderWidth: 1 },\n    },\n\n    shadow: {\n      button: shadows.button,\n    },\n\n    ...rounded,\n    ...padding,\n    ...margin,\n  },\n\n  selectors: {\n    dark: {\n      bg: {\n        default: { backgroundColor: darkTheme.background.default },\n        primary: { backgroundColor: darkTheme.button.primary.background },\n        secondary: { backgroundColor: darkTheme.button.secondary.background },\n        tertiary: { backgroundColor: darkTheme.button.tertiary.background },\n        ghost: { backgroundColor: darkTheme.button.ghost.background },\n        transparent: { backgroundColor: darkTheme.button.transparent.background },\n        disabled: { backgroundColor: darkTheme.status.default },\n      },\n    },\n  },\n});\n\nexport const Button = {\n  Container,\n  FadeOnPressContainer,\n  HighlightOnPressContainer,\n  Text,\n};\n\ntype FadingPressableProps = {\n  activeOpacity?: number;\n};\n\ntype NoOptionals<T> = {\n  [P in keyof T]-?: T[P];\n};\n\ntype ContainerProps = React.ComponentProps<typeof Container>;\ntype ContainerBackgroundColors = NoOptionals<ContainerProps>['bg'];\n\nconst lightHighlightColorMap: Record<ContainerBackgroundColors, string> = {\n  disabled: 'transparent',\n  default: lightTheme.background.secondary,\n  primary: lightTheme.background.tertiary,\n  secondary: lightTheme.background.quaternary,\n  tertiary: palette.light.gray[600],\n  ghost: lightTheme.background.tertiary,\n  transparent: lightTheme.background.secondary,\n};\n\nconst darkHighlightColorMap: Record<ContainerBackgroundColors, string> = {\n  disabled: 'transparent',\n  default: darkTheme.background.secondary,\n  primary: darkTheme.background.tertiary,\n  secondary: darkTheme.background.quaternary,\n  tertiary: palette.dark.gray[600],\n  ghost: darkTheme.background.tertiary,\n  transparent: darkTheme.background.secondary,\n};\n\nconst highlightColorMap = {\n  dark: darkHighlightColorMap,\n  light: lightHighlightColorMap,\n};\n\nfunction FadeOnPressContainer({\n  activeOpacity = 0.2,\n  ...props\n}: React.ComponentProps<typeof Container> & FadingPressableProps) {\n  const animatedValue = React.useRef(new Animated.Value(1));\n\n  const onPressIn = React.useCallback(() => {\n    Animated.timing(animatedValue.current, {\n      toValue: activeOpacity,\n      duration: 150,\n      easing: Easing.inOut(Easing.quad),\n      useNativeDriver: true,\n    }).start();\n  }, []);\n\n  const onPressOut = React.useCallback(() => {\n    Animated.timing(animatedValue.current, {\n      toValue: 1,\n      duration: 150,\n      easing: Easing.inOut(Easing.quad),\n      useNativeDriver: true,\n    }).start();\n  }, []);\n\n  return (\n    <Container\n      onPressIn={onPressIn}\n      onPressOut={onPressOut}\n      {...props}\n      style={{\n        opacity: animatedValue.current,\n      }}>\n      {props.children}\n    </Container>\n  );\n}\n\nfunction HighlightOnPressContainer(props: React.ComponentProps<typeof Container>) {\n  const theme = useColorScheme();\n  const [isPressing, setIsPressing] = React.useState(false);\n\n  const onPressIn = React.useCallback(() => {\n    setIsPressing(true);\n  }, []);\n\n  const onPressOut = React.useCallback(() => {\n    setIsPressing(false);\n  }, []);\n\n  let backgroundColor = 'transparent';\n\n  if (props.bg && isPressing && theme != null) {\n    backgroundColor = highlightColorMap[theme][props.bg];\n  }\n\n  const underlayStyle = {\n    backgroundColor,\n  };\n\n  return (\n    <Container onPressIn={onPressIn} onPressOut={onPressOut} {...props}>\n      <Animated.View style={underlayStyle}>{props.children}</Animated.View>\n    </Container>\n  );\n}\n"]}

package/build/create-primitive.js.map

@@ -1 +1 @@
-{"version":3,"file":"create-primitive.js","sourceRoot":"","sources":["../src/create-primitive.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { StyleSheet, ViewStyle, ImageStyle, TextStyle } from 'react-native';\n\nimport { useTheme } from './useExpoTheme';\n\ntype StyleType = ViewStyle | TextStyle | ImageStyle;\n\ntype Options = {\n  base?: StyleType;\n  variants?: VariantMap<StyleType>;\n};\n\ntype VariantMap<T> = { [key: string]: { [key: string]: T } };\n\ntype Nested<Type> = {\n  [Property in keyof Type]?: keyof Type[Property];\n};\n\ntype SelectorMap<Variants> = Partial<{\n  [K in keyof Variants]?: {\n    [T in keyof Variants[K]]?: StyleType;\n  };\n}>;\n\ntype Selectors<Variants> = {\n  light?: SelectorMap<Variants>;\n  dark?: SelectorMap<Variants>;\n};\n\ntype SelectorProps = {\n  light?: StyleType;\n  dark?: StyleType;\n};\n\nexport function create<T extends object, O extends Options>(\n  component: React.ComponentType<T>,\n  config: O & { selectors?: Selectors<O['variants']>; props?: T }\n) {\n  config.selectors = config.selectors ?? {};\n  config.variants = config.variants ?? {};\n\n  const Component = React.forwardRef<\n    T,\n    React.PropsWithChildren<T> & Nested<typeof config['variants']> & { selectors?: SelectorProps }\n  >((props, ref) => {\n    const theme = useTheme();\n\n    const variantStyles = stylesForVariants(props, config.variants);\n    const selectorStyles = stylesForSelectors(props, config.selectors, { theme });\n    const selectorPropsStyles = stylesForSelectorProps(props.selectors, { theme });\n\n    const variantFreeProps: any = { ...props };\n\n    // @ts-ignore\n    // there could be a conflict between the primitive prop and the variant name\n    // for example - variant name \"width\" and prop \"width\"\n    // in these cases, favor the variant because it is under the users control (e.g they can update the conflicting name)\n\n    Object.keys(config.variants).forEach((variant) => {\n      delete variantFreeProps[variant];\n    });\n\n    return React.createElement(component, {\n      ...config.props,\n      ...variantFreeProps,\n      style: StyleSheet.flatten([\n        config.base,\n        variantStyles,\n        selectorStyles,\n        selectorPropsStyles,\n        // @ts-ignore\n        props.style || {},\n      ]),\n      ref,\n    });\n  });\n\n  return Component;\n}\n\nfunction stylesForVariants(props: any, variants: any = {}) {\n  let styles = {};\n\n  for (const key in props) {\n    if (variants[key]) {\n      const value = props[key];\n\n      const styleValue = variants[key][value];\n      if (styleValue) {\n        styles = StyleSheet.flatten(StyleSheet.compose(styles, styleValue));\n      }\n    }\n  }\n\n  return styles;\n}\n\nfunction stylesForSelectors(props: any, selectors: any = {}, state: any = {}) {\n  const styles: any[] = [];\n\n  if (state.theme != null) {\n    if (selectors[state.theme] != null) {\n      const variants = selectors[state.theme];\n      const variantStyles = stylesForVariants(props, variants);\n\n      if (variants.base != null) {\n        styles.push(variants.base);\n      }\n\n      styles.push(variantStyles);\n    }\n  }\n\n  return StyleSheet.flatten(styles);\n}\n\nfunction stylesForSelectorProps(selectors: any = {}, state: any = {}) {\n  const styles: any[] = [];\n\n  if (state.theme != null) {\n    if (selectors[state.theme] != null) {\n      const selectorStyles = selectors[state.theme];\n      styles.push(selectorStyles);\n    }\n  }\n\n  return StyleSheet.flatten(styles);\n}\n"]}
+{"version":3,"file":"create-primitive.js","sourceRoot":"","sources":["../src/create-primitive.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { StyleSheet, ViewStyle, ImageStyle, TextStyle } from 'react-native';\n\nimport { useTheme } from './useExpoTheme';\n\ntype StyleType = ViewStyle | TextStyle | ImageStyle;\n\ntype Options = {\n  base?: StyleType;\n  variants?: VariantMap<StyleType>;\n};\n\ntype VariantMap<T> = { [key: string]: { [key: string]: T } };\n\ntype Nested<Type> = {\n  [Property in keyof Type]?: keyof Type[Property];\n};\n\ntype SelectorMap<Variants> = Partial<{\n  [K in keyof Variants]?: {\n    [T in keyof Variants[K]]?: StyleType;\n  };\n}>;\n\ntype Selectors<Variants> = {\n  light?: SelectorMap<Variants>;\n  dark?: SelectorMap<Variants>;\n};\n\ntype SelectorProps = {\n  light?: StyleType;\n  dark?: StyleType;\n};\n\nexport function create<T extends object, O extends Options>(\n  component: React.ComponentType<T>,\n  config: O & { selectors?: Selectors<O['variants']>; props?: T }\n) {\n  config.selectors = config.selectors ?? {};\n  config.variants = config.variants ?? {};\n\n  const Component = React.forwardRef<\n    T,\n    React.PropsWithChildren<T> & Nested<(typeof config)['variants']> & { selectors?: SelectorProps }\n  >((props, ref) => {\n    const theme = useTheme();\n\n    const variantStyles = stylesForVariants(props, config.variants);\n    const selectorStyles = stylesForSelectors(props, config.selectors, { theme });\n    const selectorPropsStyles = stylesForSelectorProps(props.selectors, { theme });\n\n    const variantFreeProps: any = { ...props };\n\n    // @ts-ignore\n    // there could be a conflict between the primitive prop and the variant name\n    // for example - variant name \"width\" and prop \"width\"\n    // in these cases, favor the variant because it is under the users control (e.g they can update the conflicting name)\n\n    Object.keys(config.variants).forEach((variant) => {\n      delete variantFreeProps[variant];\n    });\n\n    return React.createElement(component, {\n      ...config.props,\n      ...variantFreeProps,\n      style: StyleSheet.flatten([\n        config.base,\n        variantStyles,\n        selectorStyles,\n        selectorPropsStyles,\n        // @ts-ignore\n        props.style || {},\n      ]),\n      ref,\n    });\n  });\n\n  return Component;\n}\n\nfunction stylesForVariants(props: any, variants: any = {}) {\n  let styles = {};\n\n  for (const key in props) {\n    if (variants[key]) {\n      const value = props[key];\n\n      const styleValue = variants[key][value];\n      if (styleValue) {\n        styles = StyleSheet.flatten(StyleSheet.compose(styles, styleValue));\n      }\n    }\n  }\n\n  return styles;\n}\n\nfunction stylesForSelectors(props: any, selectors: any = {}, state: any = {}) {\n  const styles: any[] = [];\n\n  if (state.theme != null) {\n    if (selectors[state.theme] != null) {\n      const variants = selectors[state.theme];\n      const variantStyles = stylesForVariants(props, variants);\n\n      if (variants.base != null) {\n        styles.push(variants.base);\n      }\n\n      styles.push(variantStyles);\n    }\n  }\n\n  return StyleSheet.flatten(styles);\n}\n\nfunction stylesForSelectorProps(selectors: any = {}, state: any = {}) {\n  const styles: any[] = [];\n\n  if (state.theme != null) {\n    if (selectors[state.theme] != null) {\n      const selectorStyles = selectors[state.theme];\n      styles.push(selectorStyles);\n    }\n  }\n\n  return StyleSheet.flatten(styles);\n}\n"]}

package/build/icons/BranchIcon.js

@@ -6,6 +6,6 @@ const icon = require('../../assets/branch-icon.png');
 export function BranchIcon(props) {
     const theme = useCurrentTheme();
     const themedIcon = theme === 'dark' ? lightIcon : icon;
-    return React.createElement(Image, { source: themedIcon, ...props });
+    return <Image source={themedIcon} {...props}/>;
 }
 //# sourceMappingURL=BranchIcon.js.map

package/build/icons/BranchIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"BranchIcon.js","sourceRoot":"","sources":["../../src/icons/BranchIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,SAAS,GAAG,OAAO,CAAC,oCAAoC,CAAC,CAAC;AAChE,MAAM,IAAI,GAAG,OAAO,CAAC,8BAA8B,CAAC,CAAC;AAErD,MAAM,UAAU,UAAU,CAAC,KAAkD;IAC3E,MAAM,KAAK,GAAG,eAAe,EAAE,CAAC;IAChC,MAAM,UAAU,GAAG,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC;IAEvD,OAAO,oBAAC,KAAK,IAAC,MAAM,EAAE,UAAU,KAAM,KAAK,GAAI,CAAC;AAClD,CAAC","sourcesContent":["import * as React from 'react';\n\nimport { Image } from '../Image';\nimport { useCurrentTheme } from '../useExpoTheme';\n\nconst lightIcon = require('../../assets/branch-icon-light.png');\nconst icon = require('../../assets/branch-icon.png');\n\nexport function BranchIcon(props: Partial<React.ComponentProps<typeof Image>>) {\n  const theme = useCurrentTheme();\n  const themedIcon = theme === 'dark' ? lightIcon : icon;\n\n  return <Image source={themedIcon} {...props} />;\n}\n"]}
+{"version":3,"file":"BranchIcon.js","sourceRoot":"","sources":["../../src/icons/BranchIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,SAAS,GAAG,OAAO,CAAC,oCAAoC,CAAC,CAAC;AAChE,MAAM,IAAI,GAAG,OAAO,CAAC,8BAA8B,CAAC,CAAC;AAErD,MAAM,UAAU,UAAU,CAAC,KAAkD;IAC3E,MAAM,KAAK,GAAG,eAAe,EAAE,CAAC;IAChC,MAAM,UAAU,GAAG,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC;IAEvD,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,UAAU,CAAC,CAAC,IAAI,KAAK,CAAC,EAAG,CAAC;AAClD,CAAC","sourcesContent":["import * as React from 'react';\n\nimport { Image } from '../Image';\nimport { useCurrentTheme } from '../useExpoTheme';\n\nconst lightIcon = require('../../assets/branch-icon-light.png');\nconst icon = require('../../assets/branch-icon.png');\n\nexport function BranchIcon(props: Partial<React.ComponentProps<typeof Image>>) {\n  const theme = useCurrentTheme();\n  const themedIcon = theme === 'dark' ? lightIcon : icon;\n\n  return <Image source={themedIcon} {...props} />;\n}\n"]}

package/build/icons/BuildingIcon.js

@@ -2,6 +2,6 @@ import * as React from 'react';
 import { Image } from '../Image';
 const icon = require('../../assets/building-icon.png');
 export function BuildingIcon(props) {
-    return React.createElement(Image, { source: icon, ...props });
+    return <Image source={icon} {...props}/>;
 }
 //# sourceMappingURL=BuildingIcon.js.map

package/build/icons/BuildingIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"BuildingIcon.js","sourceRoot":"","sources":["../../src/icons/BuildingIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,MAAM,IAAI,GAAG,OAAO,CAAC,gCAAgC,CAAC,CAAC;AAEvD,MAAM,UAAU,YAAY,CAAC,KAAkD;IAC7E,OAAO,oBAAC,KAAK,IAAC,MAAM,EAAE,IAAI,KAAM,KAAK,GAAI,CAAC;AAC5C,CAAC","sourcesContent":["import * as React from 'react';\n\nimport { Image } from '../Image';\n\nconst icon = require('../../assets/building-icon.png');\n\nexport function BuildingIcon(props: Partial<React.ComponentProps<typeof Image>>) {\n  return <Image source={icon} {...props} />;\n}\n"]}
+{"version":3,"file":"BuildingIcon.js","sourceRoot":"","sources":["../../src/icons/BuildingIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,MAAM,IAAI,GAAG,OAAO,CAAC,gCAAgC,CAAC,CAAC;AAEvD,MAAM,UAAU,YAAY,CAAC,KAAkD;IAC7E,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,CAAC,EAAG,CAAC;AAC5C,CAAC","sourcesContent":["import * as React from 'react';\n\nimport { Image } from '../Image';\n\nconst icon = require('../../assets/building-icon.png');\n\nexport function BuildingIcon(props: Partial<React.ComponentProps<typeof Image>>) {\n  return <Image source={icon} {...props} />;\n}\n"]}

package/build/icons/CheckIcon.js

@@ -6,6 +6,6 @@ const icon = require('../../assets/check-icon.png');
 export function CheckIcon(props) {
     const theme = useCurrentTheme();
     const themedIcon = theme === 'dark' ? lightIcon : icon;
-    return React.createElement(Image, { source: themedIcon, ...props });
+    return <Image source={themedIcon} {...props}/>;
 }
 //# sourceMappingURL=CheckIcon.js.map

package/build/icons/CheckIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckIcon.js","sourceRoot":"","sources":["../../src/icons/CheckIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,SAAS,GAAG,OAAO,CAAC,mCAAmC,CAAC,CAAC;AAC/D,MAAM,IAAI,GAAG,OAAO,CAAC,6BAA6B,CAAC,CAAC;AAEpD,MAAM,UAAU,SAAS,CAAC,KAAkD;IAC1E,MAAM,KAAK,GAAG,eAAe,EAAE,CAAC;IAChC,MAAM,UAAU,GAAG,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC;IAEvD,OAAO,oBAAC,KAAK,IAAC,MAAM,EAAE,UAAU,KAAM,KAAK,GAAI,CAAC;AAClD,CAAC","sourcesContent":["import * as React from 'react';\n\nimport { Image } from '../Image';\nimport { useCurrentTheme } from '../useExpoTheme';\n\nconst lightIcon = require('../../assets/check-icon-light.png');\nconst icon = require('../../assets/check-icon.png');\n\nexport function CheckIcon(props: Partial<React.ComponentProps<typeof Image>>) {\n  const theme = useCurrentTheme();\n  const themedIcon = theme === 'dark' ? lightIcon : icon;\n\n  return <Image source={themedIcon} {...props} />;\n}\n"]}
+{"version":3,"file":"CheckIcon.js","sourceRoot":"","sources":["../../src/icons/CheckIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,SAAS,GAAG,OAAO,CAAC,mCAAmC,CAAC,CAAC;AAC/D,MAAM,IAAI,GAAG,OAAO,CAAC,6BAA6B,CAAC,CAAC;AAEpD,MAAM,UAAU,SAAS,CAAC,KAAkD;IAC1E,MAAM,KAAK,GAAG,eAAe,EAAE,CAAC;IAChC,MAAM,UAAU,GAAG,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC;IAEvD,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,UAAU,CAAC,CAAC,IAAI,KAAK,CAAC,EAAG,CAAC;AAClD,CAAC","sourcesContent":["import * as React from 'react';\n\nimport { Image } from '../Image';\nimport { useCurrentTheme } from '../useExpoTheme';\n\nconst lightIcon = require('../../assets/check-icon-light.png');\nconst icon = require('../../assets/check-icon.png');\n\nexport function CheckIcon(props: Partial<React.ComponentProps<typeof Image>>) {\n  const theme = useCurrentTheme();\n  const themedIcon = theme === 'dark' ? lightIcon : icon;\n\n  return <Image source={themedIcon} {...props} />;\n}\n"]}

package/build/icons/ChevronRightIcon.js

@@ -2,6 +2,6 @@ import * as React from 'react';
 import { Image } from '../Image';
 const icon = require('../../assets/chevron-right-icon.png');
 export function ChevronRightIcon(props) {
-    return React.createElement(Image, { source: icon, ...props });
+    return <Image source={icon} {...props}/>;
 }
 //# sourceMappingURL=ChevronRightIcon.js.map

package/build/icons/ChevronRightIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChevronRightIcon.js","sourceRoot":"","sources":["../../src/icons/ChevronRightIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,MAAM,IAAI,GAAG,OAAO,CAAC,qCAAqC,CAAC,CAAC;AAE5D,MAAM,UAAU,gBAAgB,CAAC,KAAkD;IACjF,OAAO,oBAAC,KAAK,IAAC,MAAM,EAAE,IAAI,KAAM,KAAK,GAAI,CAAC;AAC5C,CAAC","sourcesContent":["import * as React from 'react';\n\nimport { Image } from '../Image';\n\nconst icon = require('../../assets/chevron-right-icon.png');\n\nexport function ChevronRightIcon(props: Partial<React.ComponentProps<typeof Image>>) {\n  return <Image source={icon} {...props} />;\n}\n"]}
+{"version":3,"file":"ChevronRightIcon.js","sourceRoot":"","sources":["../../src/icons/ChevronRightIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,MAAM,IAAI,GAAG,OAAO,CAAC,qCAAqC,CAAC,CAAC;AAE5D,MAAM,UAAU,gBAAgB,CAAC,KAAkD;IACjF,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,CAAC,EAAG,CAAC;AAC5C,CAAC","sourcesContent":["import * as React from 'react';\n\nimport { Image } from '../Image';\n\nconst icon = require('../../assets/chevron-right-icon.png');\n\nexport function ChevronRightIcon(props: Partial<React.ComponentProps<typeof Image>>) {\n  return <Image source={icon} {...props} />;\n}\n"]}

package/build/icons/ClipboardIcon.js

@@ -2,6 +2,6 @@ import * as React from 'react';
 import { Image } from '../Image';
 const icon = require('../../assets/clipboard-icon.png');
 export function ClipboardIcon(props) {
-    return React.createElement(Image, { source: icon, ...props });
+    return <Image source={icon} {...props}/>;
 }
 //# sourceMappingURL=ClipboardIcon.js.map

package/build/icons/ClipboardIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"ClipboardIcon.js","sourceRoot":"","sources":["../../src/icons/ClipboardIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,MAAM,IAAI,GAAG,OAAO,CAAC,iCAAiC,CAAC,CAAC;AAExD,MAAM,UAAU,aAAa,CAAC,KAAkD;IAC9E,OAAO,oBAAC,KAAK,IAAC,MAAM,EAAE,IAAI,KAAM,KAAK,GAAI,CAAC;AAC5C,CAAC","sourcesContent":["import * as React from 'react';\n\nimport { Image } from '../Image';\n\nconst icon = require('../../assets/clipboard-icon.png');\n\nexport function ClipboardIcon(props: Partial<React.ComponentProps<typeof Image>>) {\n  return <Image source={icon} {...props} />;\n}\n"]}
+{"version":3,"file":"ClipboardIcon.js","sourceRoot":"","sources":["../../src/icons/ClipboardIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,MAAM,IAAI,GAAG,OAAO,CAAC,iCAAiC,CAAC,CAAC;AAExD,MAAM,UAAU,aAAa,CAAC,KAAkD;IAC9E,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,CAAC,EAAG,CAAC;AAC5C,CAAC","sourcesContent":["import * as React from 'react';\n\nimport { Image } from '../Image';\n\nconst icon = require('../../assets/clipboard-icon.png');\n\nexport function ClipboardIcon(props: Partial<React.ComponentProps<typeof Image>>) {\n  return <Image source={icon} {...props} />;\n}\n"]}

package/build/icons/DebugIcon.js

@@ -2,6 +2,6 @@ import * as React from 'react';
 import { Image } from '../Image';
 const icon = require('../../assets/debug-icon.png');
 export function DebugIcon(props) {
-    return React.createElement(Image, { source: icon, ...props });
+    return <Image source={icon} {...props}/>;
 }
 //# sourceMappingURL=DebugIcon.js.map

package/build/icons/DebugIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"DebugIcon.js","sourceRoot":"","sources":["../../src/icons/DebugIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,MAAM,IAAI,GAAG,OAAO,CAAC,6BAA6B,CAAC,CAAC;AAEpD,MAAM,UAAU,SAAS,CAAC,KAAkD;IAC1E,OAAO,oBAAC,KAAK,IAAC,MAAM,EAAE,IAAI,KAAM,KAAK,GAAI,CAAC;AAC5C,CAAC","sourcesContent":["import * as React from 'react';\n\nimport { Image } from '../Image';\n\nconst icon = require('../../assets/debug-icon.png');\n\nexport function DebugIcon(props: Partial<React.ComponentProps<typeof Image>>) {\n  return <Image source={icon} {...props} />;\n}\n"]}
+{"version":3,"file":"DebugIcon.js","sourceRoot":"","sources":["../../src/icons/DebugIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,MAAM,IAAI,GAAG,OAAO,CAAC,6BAA6B,CAAC,CAAC;AAEpD,MAAM,UAAU,SAAS,CAAC,KAAkD;IAC1E,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,CAAC,EAAG,CAAC;AAC5C,CAAC","sourcesContent":["import * as React from 'react';\n\nimport { Image } from '../Image';\n\nconst icon = require('../../assets/debug-icon.png');\n\nexport function DebugIcon(props: Partial<React.ComponentProps<typeof Image>>) {\n  return <Image source={icon} {...props} />;\n}\n"]}

package/build/icons/ExpoLogoIcon.js

@@ -2,6 +2,6 @@ import * as React from 'react';
 import { Image } from '../Image';
 const icon = require('../../assets/logo-icon.png');
 export function ExpoLogoIcon(props) {
-    return React.createElement(Image, { ...props, source: icon });
+    return <Image {...props} source={icon}/>;
 }
 //# sourceMappingURL=ExpoLogoIcon.js.map

package/build/icons/ExpoLogoIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpoLogoIcon.js","sourceRoot":"","sources":["../../src/icons/ExpoLogoIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,MAAM,IAAI,GAAG,OAAO,CAAC,4BAA4B,CAAC,CAAC;AAEnD,MAAM,UAAU,YAAY,CAAC,KAAkD;IAC7E,OAAO,oBAAC,KAAK,OAAK,KAAK,EAAE,MAAM,EAAE,IAAI,GAAI,CAAC;AAC5C,CAAC","sourcesContent":["import * as React from 'react';\n\nimport { Image } from '../Image';\n\nconst icon = require('../../assets/logo-icon.png');\n\nexport function ExpoLogoIcon(props: Partial<React.ComponentProps<typeof Image>>) {\n  return <Image {...props} source={icon} />;\n}\n"]}
+{"version":3,"file":"ExpoLogoIcon.js","sourceRoot":"","sources":["../../src/icons/ExpoLogoIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,MAAM,IAAI,GAAG,OAAO,CAAC,4BAA4B,CAAC,CAAC;AAEnD,MAAM,UAAU,YAAY,CAAC,KAAkD;IAC7E,OAAO,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,EAAG,CAAC;AAC5C,CAAC","sourcesContent":["import * as React from 'react';\n\nimport { Image } from '../Image';\n\nconst icon = require('../../assets/logo-icon.png');\n\nexport function ExpoLogoIcon(props: Partial<React.ComponentProps<typeof Image>>) {\n  return <Image {...props} source={icon} />;\n}\n"]}

package/build/icons/ExtensionsFilledIcon.js

@@ -19,6 +19,6 @@ export function ExtensionsFilledIcon(props) {
     const theme = useCurrentTheme();
     const themedIcon = iconMap[theme];
     const icon = props.focused ? themedIcon.active : themedIcon.inactive;
-    return React.createElement(Image, { source: icon, ...props });
+    return <Image source={icon} {...props}/>;
 }
 //# sourceMappingURL=ExtensionsFilledIcon.js.map

package/build/icons/ExtensionsFilledIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExtensionsFilledIcon.js","sourceRoot":"","sources":["../../src/icons/ExtensionsFilledIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,eAAe,GAAG,OAAO,CAAC,sDAAsD,CAAC,CAAC;AACxF,MAAM,UAAU,GAAG,OAAO,CAAC,gDAAgD,CAAC,CAAC;AAC7E,MAAM,iBAAiB,GAAG,OAAO,CAAC,wDAAwD,CAAC,CAAC;AAC5F,MAAM,YAAY,GAAG,OAAO,CAAC,kDAAkD,CAAC,CAAC;AAEjF,MAAM,OAAO,GAAG;IACd,KAAK,EAAE;QACL,MAAM,EAAE,UAAU;QAClB,QAAQ,EAAE,YAAY;KACvB;IACD,IAAI,EAAE;QACJ,MAAM,EAAE,eAAe;QACvB,QAAQ,EAAE,iBAAiB;KAC5B;CACF,CAAC;AAMF,MAAM,UAAU,oBAAoB,CAAC,KAAsB;IACzD,MAAM,KAAK,GAAG,eAAe,EAAE,CAAC;IAChC,MAAM,UAAU,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;IAClC,MAAM,IAAI,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,QAAQ,CAAC;IACrE,OAAO,oBAAC,KAAK,IAAC,MAAM,EAAE,IAAI,KAAM,KAAK,GAAI,CAAC;AAC5C,CAAC","sourcesContent":["import * as React from 'react';\n\nimport { Image } from '../Image';\nimport { useCurrentTheme } from '../useExpoTheme';\n\nconst activeLightIcon = require('../../assets/extensions-filled-active-icon-light.png');\nconst activeIcon = require('../../assets/extensions-filled-active-icon.png');\nconst inactiveLightIcon = require('../../assets/extensions-filled-inactive-icon-light.png');\nconst inactiveIcon = require('../../assets/extensions-filled-inactive-icon.png');\n\nconst iconMap = {\n  light: {\n    active: activeIcon,\n    inactive: inactiveIcon,\n  },\n  dark: {\n    active: activeLightIcon,\n    inactive: inactiveLightIcon,\n  },\n};\n\ntype TabBarIconProps = Partial<React.ComponentProps<typeof Image>> & {\n  focused?: boolean;\n};\n\nexport function ExtensionsFilledIcon(props: TabBarIconProps) {\n  const theme = useCurrentTheme();\n  const themedIcon = iconMap[theme];\n  const icon = props.focused ? themedIcon.active : themedIcon.inactive;\n  return <Image source={icon} {...props} />;\n}\n"]}
+{"version":3,"file":"ExtensionsFilledIcon.js","sourceRoot":"","sources":["../../src/icons/ExtensionsFilledIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,eAAe,GAAG,OAAO,CAAC,sDAAsD,CAAC,CAAC;AACxF,MAAM,UAAU,GAAG,OAAO,CAAC,gDAAgD,CAAC,CAAC;AAC7E,MAAM,iBAAiB,GAAG,OAAO,CAAC,wDAAwD,CAAC,CAAC;AAC5F,MAAM,YAAY,GAAG,OAAO,CAAC,kDAAkD,CAAC,CAAC;AAEjF,MAAM,OAAO,GAAG;IACd,KAAK,EAAE;QACL,MAAM,EAAE,UAAU;QAClB,QAAQ,EAAE,YAAY;KACvB;IACD,IAAI,EAAE;QACJ,MAAM,EAAE,eAAe;QACvB,QAAQ,EAAE,iBAAiB;KAC5B;CACF,CAAC;AAMF,MAAM,UAAU,oBAAoB,CAAC,KAAsB;IACzD,MAAM,KAAK,GAAG,eAAe,EAAE,CAAC;IAChC,MAAM,UAAU,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;IAClC,MAAM,IAAI,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,QAAQ,CAAC;IACrE,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,CAAC,EAAG,CAAC;AAC5C,CAAC","sourcesContent":["import * as React from 'react';\n\nimport { Image } from '../Image';\nimport { useCurrentTheme } from '../useExpoTheme';\n\nconst activeLightIcon = require('../../assets/extensions-filled-active-icon-light.png');\nconst activeIcon = require('../../assets/extensions-filled-active-icon.png');\nconst inactiveLightIcon = require('../../assets/extensions-filled-inactive-icon-light.png');\nconst inactiveIcon = require('../../assets/extensions-filled-inactive-icon.png');\n\nconst iconMap = {\n  light: {\n    active: activeIcon,\n    inactive: inactiveIcon,\n  },\n  dark: {\n    active: activeLightIcon,\n    inactive: inactiveLightIcon,\n  },\n};\n\ntype TabBarIconProps = Partial<React.ComponentProps<typeof Image>> & {\n  focused?: boolean;\n};\n\nexport function ExtensionsFilledIcon(props: TabBarIconProps) {\n  const theme = useCurrentTheme();\n  const themedIcon = iconMap[theme];\n  const icon = props.focused ? themedIcon.active : themedIcon.inactive;\n  return <Image source={icon} {...props} />;\n}\n"]}

package/build/icons/ExtensionsIcon.js

@@ -6,6 +6,6 @@ const icon = require('../../assets/extensions-icon.png');
 export function ExtensionsIcon(props) {
     const theme = useCurrentTheme();
     const themedIcon = theme === 'dark' ? lightIcon : icon;
-    return React.createElement(Image, { source: themedIcon, ...props });
+    return <Image source={themedIcon} {...props}/>;
 }
 //# sourceMappingURL=ExtensionsIcon.js.map

package/build/icons/ExtensionsIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExtensionsIcon.js","sourceRoot":"","sources":["../../src/icons/ExtensionsIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,SAAS,GAAG,OAAO,CAAC,wCAAwC,CAAC,CAAC;AACpE,MAAM,IAAI,GAAG,OAAO,CAAC,kCAAkC,CAAC,CAAC;AAEzD,MAAM,UAAU,cAAc,CAAC,KAAkD;IAC/E,MAAM,KAAK,GAAG,eAAe,EAAE,CAAC;IAChC,MAAM,UAAU,GAAG,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC;IAEvD,OAAO,oBAAC,KAAK,IAAC,MAAM,EAAE,UAAU,KAAM,KAAK,GAAI,CAAC;AAClD,CAAC","sourcesContent":["import * as React from 'react';\n\nimport { Image } from '../Image';\nimport { useCurrentTheme } from '../useExpoTheme';\n\nconst lightIcon = require('../../assets/extensions-icon-light.png');\nconst icon = require('../../assets/extensions-icon.png');\n\nexport function ExtensionsIcon(props: Partial<React.ComponentProps<typeof Image>>) {\n  const theme = useCurrentTheme();\n  const themedIcon = theme === 'dark' ? lightIcon : icon;\n\n  return <Image source={themedIcon} {...props} />;\n}\n"]}
+{"version":3,"file":"ExtensionsIcon.js","sourceRoot":"","sources":["../../src/icons/ExtensionsIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,SAAS,GAAG,OAAO,CAAC,wCAAwC,CAAC,CAAC;AACpE,MAAM,IAAI,GAAG,OAAO,CAAC,kCAAkC,CAAC,CAAC;AAEzD,MAAM,UAAU,cAAc,CAAC,KAAkD;IAC/E,MAAM,KAAK,GAAG,eAAe,EAAE,CAAC;IAChC,MAAM,UAAU,GAAG,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC;IAEvD,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,UAAU,CAAC,CAAC,IAAI,KAAK,CAAC,EAAG,CAAC;AAClD,CAAC","sourcesContent":["import * as React from 'react';\n\nimport { Image } from '../Image';\nimport { useCurrentTheme } from '../useExpoTheme';\n\nconst lightIcon = require('../../assets/extensions-icon-light.png');\nconst icon = require('../../assets/extensions-icon.png');\n\nexport function ExtensionsIcon(props: Partial<React.ComponentProps<typeof Image>>) {\n  const theme = useCurrentTheme();\n  const themedIcon = theme === 'dark' ? lightIcon : icon;\n\n  return <Image source={themedIcon} {...props} />;\n}\n"]}

package/build/icons/HomeFilledIcon.js

@@ -19,6 +19,6 @@ export function HomeFilledIcon(props) {
     const theme = useCurrentTheme();
     const themedIcon = iconMap[theme];
     const icon = props.focused ? themedIcon.active : themedIcon.inactive;
-    return React.createElement(Image, { source: icon, ...props });
+    return <Image source={icon} {...props}/>;
 }
 //# sourceMappingURL=HomeFilledIcon.js.map

package/build/icons/HomeFilledIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"HomeFilledIcon.js","sourceRoot":"","sources":["../../src/icons/HomeFilledIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,eAAe,GAAG,OAAO,CAAC,gDAAgD,CAAC,CAAC;AAClF,MAAM,UAAU,GAAG,OAAO,CAAC,0CAA0C,CAAC,CAAC;AACvE,MAAM,iBAAiB,GAAG,OAAO,CAAC,kDAAkD,CAAC,CAAC;AACtF,MAAM,YAAY,GAAG,OAAO,CAAC,4CAA4C,CAAC,CAAC;AAE3E,MAAM,OAAO,GAAG;IACd,KAAK,EAAE;QACL,MAAM,EAAE,UAAU;QAClB,QAAQ,EAAE,YAAY;KACvB;IACD,IAAI,EAAE;QACJ,MAAM,EAAE,eAAe;QACvB,QAAQ,EAAE,iBAAiB;KAC5B;CACF,CAAC;AAMF,MAAM,UAAU,cAAc,CAAC,KAAsB;IACnD,MAAM,KAAK,GAAG,eAAe,EAAE,CAAC;IAChC,MAAM,UAAU,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;IAClC,MAAM,IAAI,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,QAAQ,CAAC;IACrE,OAAO,oBAAC,KAAK,IAAC,MAAM,EAAE,IAAI,KAAM,KAAK,GAAI,CAAC;AAC5C,CAAC","sourcesContent":["import * as React from 'react';\n\nimport { Image } from '../Image';\nimport { useCurrentTheme } from '../useExpoTheme';\n\nconst activeLightIcon = require('../../assets/home-filled-active-icon-light.png');\nconst activeIcon = require('../../assets/home-filled-active-icon.png');\nconst inactiveLightIcon = require('../../assets/home-filled-inactive-icon-light.png');\nconst inactiveIcon = require('../../assets/home-filled-inactive-icon.png');\n\nconst iconMap = {\n  light: {\n    active: activeIcon,\n    inactive: inactiveIcon,\n  },\n  dark: {\n    active: activeLightIcon,\n    inactive: inactiveLightIcon,\n  },\n};\n\ntype TabBarIconProps = Partial<React.ComponentProps<typeof Image>> & {\n  focused?: boolean;\n};\n\nexport function HomeFilledIcon(props: TabBarIconProps) {\n  const theme = useCurrentTheme();\n  const themedIcon = iconMap[theme];\n  const icon = props.focused ? themedIcon.active : themedIcon.inactive;\n  return <Image source={icon} {...props} />;\n}\n"]}
+{"version":3,"file":"HomeFilledIcon.js","sourceRoot":"","sources":["../../src/icons/HomeFilledIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,eAAe,GAAG,OAAO,CAAC,gDAAgD,CAAC,CAAC;AAClF,MAAM,UAAU,GAAG,OAAO,CAAC,0CAA0C,CAAC,CAAC;AACvE,MAAM,iBAAiB,GAAG,OAAO,CAAC,kDAAkD,CAAC,CAAC;AACtF,MAAM,YAAY,GAAG,OAAO,CAAC,4CAA4C,CAAC,CAAC;AAE3E,MAAM,OAAO,GAAG;IACd,KAAK,EAAE;QACL,MAAM,EAAE,UAAU;QAClB,QAAQ,EAAE,YAAY;KACvB;IACD,IAAI,EAAE;QACJ,MAAM,EAAE,eAAe;QACvB,QAAQ,EAAE,iBAAiB;KAC5B;CACF,CAAC;AAMF,MAAM,UAAU,cAAc,CAAC,KAAsB;IACnD,MAAM,KAAK,GAAG,eAAe,EAAE,CAAC;IAChC,MAAM,UAAU,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;IAClC,MAAM,IAAI,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,QAAQ,CAAC;IACrE,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,CAAC,EAAG,CAAC;AAC5C,CAAC","sourcesContent":["import * as React from 'react';\n\nimport { Image } from '../Image';\nimport { useCurrentTheme } from '../useExpoTheme';\n\nconst activeLightIcon = require('../../assets/home-filled-active-icon-light.png');\nconst activeIcon = require('../../assets/home-filled-active-icon.png');\nconst inactiveLightIcon = require('../../assets/home-filled-inactive-icon-light.png');\nconst inactiveIcon = require('../../assets/home-filled-inactive-icon.png');\n\nconst iconMap = {\n  light: {\n    active: activeIcon,\n    inactive: inactiveIcon,\n  },\n  dark: {\n    active: activeLightIcon,\n    inactive: inactiveLightIcon,\n  },\n};\n\ntype TabBarIconProps = Partial<React.ComponentProps<typeof Image>> & {\n  focused?: boolean;\n};\n\nexport function HomeFilledIcon(props: TabBarIconProps) {\n  const theme = useCurrentTheme();\n  const themedIcon = iconMap[theme];\n  const icon = props.focused ? themedIcon.active : themedIcon.inactive;\n  return <Image source={icon} {...props} />;\n}\n"]}

package/build/icons/InfoIcon.js

@@ -6,6 +6,6 @@ const icon = require('../../assets/info-icon.png');
 export function InfoIcon(props) {
     const theme = useCurrentTheme();
     const themedIcon = theme === 'dark' ? lightIcon : icon;
-    return React.createElement(Image, { source: themedIcon, ...props });
+    return <Image source={themedIcon} {...props}/>;
 }
 //# sourceMappingURL=InfoIcon.js.map

package/build/icons/InfoIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"InfoIcon.js","sourceRoot":"","sources":["../../src/icons/InfoIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,SAAS,GAAG,OAAO,CAAC,kCAAkC,CAAC,CAAC;AAC9D,MAAM,IAAI,GAAG,OAAO,CAAC,4BAA4B,CAAC,CAAC;AAEnD,MAAM,UAAU,QAAQ,CAAC,KAAkD;IACzE,MAAM,KAAK,GAAG,eAAe,EAAE,CAAC;IAChC,MAAM,UAAU,GAAG,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC;IAEvD,OAAO,oBAAC,KAAK,IAAC,MAAM,EAAE,UAAU,KAAM,KAAK,GAAI,CAAC;AAClD,CAAC","sourcesContent":["import * as React from 'react';\n\nimport { Image } from '../Image';\nimport { useCurrentTheme } from '../useExpoTheme';\n\nconst lightIcon = require('../../assets/info-icon-light.png');\nconst icon = require('../../assets/info-icon.png');\n\nexport function InfoIcon(props: Partial<React.ComponentProps<typeof Image>>) {\n  const theme = useCurrentTheme();\n  const themedIcon = theme === 'dark' ? lightIcon : icon;\n\n  return <Image source={themedIcon} {...props} />;\n}\n"]}
+{"version":3,"file":"InfoIcon.js","sourceRoot":"","sources":["../../src/icons/InfoIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,SAAS,GAAG,OAAO,CAAC,kCAAkC,CAAC,CAAC;AAC9D,MAAM,IAAI,GAAG,OAAO,CAAC,4BAA4B,CAAC,CAAC;AAEnD,MAAM,UAAU,QAAQ,CAAC,KAAkD;IACzE,MAAM,KAAK,GAAG,eAAe,EAAE,CAAC;IAChC,MAAM,UAAU,GAAG,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC;IAEvD,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,UAAU,CAAC,CAAC,IAAI,KAAK,CAAC,EAAG,CAAC;AAClD,CAAC","sourcesContent":["import * as React from 'react';\n\nimport { Image } from '../Image';\nimport { useCurrentTheme } from '../useExpoTheme';\n\nconst lightIcon = require('../../assets/info-icon-light.png');\nconst icon = require('../../assets/info-icon.png');\n\nexport function InfoIcon(props: Partial<React.ComponentProps<typeof Image>>) {\n  const theme = useCurrentTheme();\n  const themedIcon = theme === 'dark' ? lightIcon : icon;\n\n  return <Image source={themedIcon} {...props} />;\n}\n"]}

package/build/icons/InspectElementIcon.js

@@ -2,6 +2,6 @@ import * as React from 'react';
 import { Image } from '../Image';
 const icon = require('../../assets/inspect-element-icon.png');
 export function InspectElementIcon(props) {
-    return React.createElement(Image, { source: icon, ...props });
+    return <Image source={icon} {...props}/>;
 }
 //# sourceMappingURL=InspectElementIcon.js.map

package/build/icons/InspectElementIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"InspectElementIcon.js","sourceRoot":"","sources":["../../src/icons/InspectElementIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,MAAM,IAAI,GAAG,OAAO,CAAC,uCAAuC,CAAC,CAAC;AAE9D,MAAM,UAAU,kBAAkB,CAAC,KAAkD;IACnF,OAAO,oBAAC,KAAK,IAAC,MAAM,EAAE,IAAI,KAAM,KAAK,GAAI,CAAC;AAC5C,CAAC","sourcesContent":["import * as React from 'react';\n\nimport { Image } from '../Image';\n\nconst icon = require('../../assets/inspect-element-icon.png');\n\nexport function InspectElementIcon(props: Partial<React.ComponentProps<typeof Image>>) {\n  return <Image source={icon} {...props} />;\n}\n"]}
+{"version":3,"file":"InspectElementIcon.js","sourceRoot":"","sources":["../../src/icons/InspectElementIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,MAAM,IAAI,GAAG,OAAO,CAAC,uCAAuC,CAAC,CAAC;AAE9D,MAAM,UAAU,kBAAkB,CAAC,KAAkD;IACnF,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,CAAC,EAAG,CAAC;AAC5C,CAAC","sourcesContent":["import * as React from 'react';\n\nimport { Image } from '../Image';\n\nconst icon = require('../../assets/inspect-element-icon.png');\n\nexport function InspectElementIcon(props: Partial<React.ComponentProps<typeof Image>>) {\n  return <Image source={icon} {...props} />;\n}\n"]}

package/build/icons/LoadingIndicatorIcon.js

@@ -2,6 +2,6 @@ import * as React from 'react';
 import { Image } from '../Image';
 const icon = require('../../assets/loading-indicator-icon.png');
 export function LoadingIndicatorIcon(props) {
-    return React.createElement(Image, { source: icon, ...props });
+    return <Image source={icon} {...props}/>;
 }
 //# sourceMappingURL=LoadingIndicatorIcon.js.map

package/build/icons/LoadingIndicatorIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingIndicatorIcon.js","sourceRoot":"","sources":["../../src/icons/LoadingIndicatorIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,MAAM,IAAI,GAAG,OAAO,CAAC,yCAAyC,CAAC,CAAC;AAEhE,MAAM,UAAU,oBAAoB,CAAC,KAAkD;IACrF,OAAO,oBAAC,KAAK,IAAC,MAAM,EAAE,IAAI,KAAM,KAAK,GAAI,CAAC;AAC5C,CAAC","sourcesContent":["import * as React from 'react';\n\nimport { Image } from '../Image';\n\nconst icon = require('../../assets/loading-indicator-icon.png');\n\nexport function LoadingIndicatorIcon(props: Partial<React.ComponentProps<typeof Image>>) {\n  return <Image source={icon} {...props} />;\n}\n"]}
+{"version":3,"file":"LoadingIndicatorIcon.js","sourceRoot":"","sources":["../../src/icons/LoadingIndicatorIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,MAAM,IAAI,GAAG,OAAO,CAAC,yCAAyC,CAAC,CAAC;AAEhE,MAAM,UAAU,oBAAoB,CAAC,KAAkD;IACrF,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,CAAC,EAAG,CAAC;AAC5C,CAAC","sourcesContent":["import * as React from 'react';\n\nimport { Image } from '../Image';\n\nconst icon = require('../../assets/loading-indicator-icon.png');\n\nexport function LoadingIndicatorIcon(props: Partial<React.ComponentProps<typeof Image>>) {\n  return <Image source={icon} {...props} />;\n}\n"]}

package/build/icons/PerformanceIcon.js

@@ -2,6 +2,6 @@ import * as React from 'react';
 import { Image } from '../Image';
 const icon = require('../../assets/performance-icon.png');
 export function PerformanceIcon(props) {
-    return React.createElement(Image, { source: icon, ...props });
+    return <Image source={icon} {...props}/>;
 }
 //# sourceMappingURL=PerformanceIcon.js.map

package/build/icons/PerformanceIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"PerformanceIcon.js","sourceRoot":"","sources":["../../src/icons/PerformanceIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,MAAM,IAAI,GAAG,OAAO,CAAC,mCAAmC,CAAC,CAAC;AAE1D,MAAM,UAAU,eAAe,CAAC,KAAkD;IAChF,OAAO,oBAAC,KAAK,IAAC,MAAM,EAAE,IAAI,KAAM,KAAK,GAAI,CAAC;AAC5C,CAAC","sourcesContent":["import * as React from 'react';\n\nimport { Image } from '../Image';\n\nconst icon = require('../../assets/performance-icon.png');\n\nexport function PerformanceIcon(props: Partial<React.ComponentProps<typeof Image>>) {\n  return <Image source={icon} {...props} />;\n}\n"]}
+{"version":3,"file":"PerformanceIcon.js","sourceRoot":"","sources":["../../src/icons/PerformanceIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,MAAM,IAAI,GAAG,OAAO,CAAC,mCAAmC,CAAC,CAAC;AAE1D,MAAM,UAAU,eAAe,CAAC,KAAkD;IAChF,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,CAAC,EAAG,CAAC;AAC5C,CAAC","sourcesContent":["import * as React from 'react';\n\nimport { Image } from '../Image';\n\nconst icon = require('../../assets/performance-icon.png');\n\nexport function PerformanceIcon(props: Partial<React.ComponentProps<typeof Image>>) {\n  return <Image source={icon} {...props} />;\n}\n"]}

package/build/icons/QuestionMarkIcon.js

@@ -2,6 +2,6 @@ import * as React from 'react';
 import { Image } from '../Image';
 const icon = require('../../assets/question-mark-icon.png');
 export function QuestionMarkIcon(props) {
-    return React.createElement(Image, { source: icon, ...props });
+    return <Image source={icon} {...props}/>;
 }
 //# sourceMappingURL=QuestionMarkIcon.js.map

package/build/icons/QuestionMarkIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"QuestionMarkIcon.js","sourceRoot":"","sources":["../../src/icons/QuestionMarkIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,MAAM,IAAI,GAAG,OAAO,CAAC,qCAAqC,CAAC,CAAC;AAE5D,MAAM,UAAU,gBAAgB,CAAC,KAAkD;IACjF,OAAO,oBAAC,KAAK,IAAC,MAAM,EAAE,IAAI,KAAM,KAAK,GAAI,CAAC;AAC5C,CAAC","sourcesContent":["import * as React from 'react';\n\nimport { Image } from '../Image';\n\nconst icon = require('../../assets/question-mark-icon.png');\n\nexport function QuestionMarkIcon(props: Partial<React.ComponentProps<typeof Image>>) {\n  return <Image source={icon} {...props} />;\n}\n"]}
+{"version":3,"file":"QuestionMarkIcon.js","sourceRoot":"","sources":["../../src/icons/QuestionMarkIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,MAAM,IAAI,GAAG,OAAO,CAAC,qCAAqC,CAAC,CAAC;AAE5D,MAAM,UAAU,gBAAgB,CAAC,KAAkD;IACjF,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,CAAC,EAAG,CAAC;AAC5C,CAAC","sourcesContent":["import * as React from 'react';\n\nimport { Image } from '../Image';\n\nconst icon = require('../../assets/question-mark-icon.png');\n\nexport function QuestionMarkIcon(props: Partial<React.ComponentProps<typeof Image>>) {\n  return <Image source={icon} {...props} />;\n}\n"]}

package/build/icons/RefreshIcon.js

@@ -2,6 +2,6 @@ import * as React from 'react';
 import { Image } from '../Image';
 const icon = require('../../assets/refresh-icon.png');
 export function RefreshIcon(props) {
-    return React.createElement(Image, { source: icon, ...props });
+    return <Image source={icon} {...props}/>;
 }
 //# sourceMappingURL=RefreshIcon.js.map

package/build/icons/RefreshIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"RefreshIcon.js","sourceRoot":"","sources":["../../src/icons/RefreshIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,MAAM,IAAI,GAAG,OAAO,CAAC,+BAA+B,CAAC,CAAC;AAEtD,MAAM,UAAU,WAAW,CAAC,KAAkD;IAC5E,OAAO,oBAAC,KAAK,IAAC,MAAM,EAAE,IAAI,KAAM,KAAK,GAAI,CAAC;AAC5C,CAAC","sourcesContent":["import * as React from 'react';\n\nimport { Image } from '../Image';\n\nconst icon = require('../../assets/refresh-icon.png');\n\nexport function RefreshIcon(props: Partial<React.ComponentProps<typeof Image>>) {\n  return <Image source={icon} {...props} />;\n}\n"]}
+{"version":3,"file":"RefreshIcon.js","sourceRoot":"","sources":["../../src/icons/RefreshIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,MAAM,IAAI,GAAG,OAAO,CAAC,+BAA+B,CAAC,CAAC;AAEtD,MAAM,UAAU,WAAW,CAAC,KAAkD;IAC5E,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,CAAC,EAAG,CAAC;AAC5C,CAAC","sourcesContent":["import * as React from 'react';\n\nimport { Image } from '../Image';\n\nconst icon = require('../../assets/refresh-icon.png');\n\nexport function RefreshIcon(props: Partial<React.ComponentProps<typeof Image>>) {\n  return <Image source={icon} {...props} />;\n}\n"]}

package/build/icons/RunIcon.js

@@ -2,6 +2,6 @@ import * as React from 'react';
 import { Image } from '../Image';
 const icon = require('../../assets/run-icon.png');
 export function RunIcon(props) {
-    return React.createElement(Image, { source: icon, ...props });
+    return <Image source={icon} {...props}/>;
 }
 //# sourceMappingURL=RunIcon.js.map

package/build/icons/RunIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"RunIcon.js","sourceRoot":"","sources":["../../src/icons/RunIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,MAAM,IAAI,GAAG,OAAO,CAAC,2BAA2B,CAAC,CAAC;AAElD,MAAM,UAAU,OAAO,CAAC,KAAkD;IACxE,OAAO,oBAAC,KAAK,IAAC,MAAM,EAAE,IAAI,KAAM,KAAK,GAAI,CAAC;AAC5C,CAAC","sourcesContent":["import * as React from 'react';\n\nimport { Image } from '../Image';\n\nconst icon = require('../../assets/run-icon.png');\n\nexport function RunIcon(props: Partial<React.ComponentProps<typeof Image>>) {\n  return <Image source={icon} {...props} />;\n}\n"]}
+{"version":3,"file":"RunIcon.js","sourceRoot":"","sources":["../../src/icons/RunIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,MAAM,IAAI,GAAG,OAAO,CAAC,2BAA2B,CAAC,CAAC;AAElD,MAAM,UAAU,OAAO,CAAC,KAAkD;IACxE,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,CAAC,EAAG,CAAC;AAC5C,CAAC","sourcesContent":["import * as React from 'react';\n\nimport { Image } from '../Image';\n\nconst icon = require('../../assets/run-icon.png');\n\nexport function RunIcon(props: Partial<React.ComponentProps<typeof Image>>) {\n  return <Image source={icon} {...props} />;\n}\n"]}

package/build/icons/SettingsFilledIcon.js

@@ -19,6 +19,6 @@ export function SettingsFilledIcon(props) {
     const theme = useCurrentTheme();
     const themedIcon = iconMap[theme];
     const icon = props.focused ? themedIcon.active : themedIcon.inactive;
-    return React.createElement(Image, { source: icon, ...props });
+    return <Image source={icon} {...props}/>;
 }
 //# sourceMappingURL=SettingsFilledIcon.js.map

package/build/icons/SettingsFilledIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"SettingsFilledIcon.js","sourceRoot":"","sources":["../../src/icons/SettingsFilledIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,eAAe,GAAG,OAAO,CAAC,oDAAoD,CAAC,CAAC;AACtF,MAAM,UAAU,GAAG,OAAO,CAAC,8CAA8C,CAAC,CAAC;AAC3E,MAAM,iBAAiB,GAAG,OAAO,CAAC,sDAAsD,CAAC,CAAC;AAC1F,MAAM,YAAY,GAAG,OAAO,CAAC,gDAAgD,CAAC,CAAC;AAE/E,MAAM,OAAO,GAAG;IACd,KAAK,EAAE;QACL,MAAM,EAAE,UAAU;QAClB,QAAQ,EAAE,YAAY;KACvB;IACD,IAAI,EAAE;QACJ,MAAM,EAAE,eAAe;QACvB,QAAQ,EAAE,iBAAiB;KAC5B;CACF,CAAC;AAMF,MAAM,UAAU,kBAAkB,CAAC,KAAsB;IACvD,MAAM,KAAK,GAAG,eAAe,EAAE,CAAC;IAChC,MAAM,UAAU,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;IAClC,MAAM,IAAI,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,QAAQ,CAAC;IACrE,OAAO,oBAAC,KAAK,IAAC,MAAM,EAAE,IAAI,KAAM,KAAK,GAAI,CAAC;AAC5C,CAAC","sourcesContent":["import * as React from 'react';\n\nimport { Image } from '../Image';\nimport { useCurrentTheme } from '../useExpoTheme';\n\nconst activeLightIcon = require('../../assets/settings-filled-active-icon-light.png');\nconst activeIcon = require('../../assets/settings-filled-active-icon.png');\nconst inactiveLightIcon = require('../../assets/settings-filled-inactive-icon-light.png');\nconst inactiveIcon = require('../../assets/settings-filled-inactive-icon.png');\n\nconst iconMap = {\n  light: {\n    active: activeIcon,\n    inactive: inactiveIcon,\n  },\n  dark: {\n    active: activeLightIcon,\n    inactive: inactiveLightIcon,\n  },\n};\n\ntype TabBarIconProps = Partial<React.ComponentProps<typeof Image>> & {\n  focused?: boolean;\n};\n\nexport function SettingsFilledIcon(props: TabBarIconProps) {\n  const theme = useCurrentTheme();\n  const themedIcon = iconMap[theme];\n  const icon = props.focused ? themedIcon.active : themedIcon.inactive;\n  return <Image source={icon} {...props} />;\n}\n"]}
+{"version":3,"file":"SettingsFilledIcon.js","sourceRoot":"","sources":["../../src/icons/SettingsFilledIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,eAAe,GAAG,OAAO,CAAC,oDAAoD,CAAC,CAAC;AACtF,MAAM,UAAU,GAAG,OAAO,CAAC,8CAA8C,CAAC,CAAC;AAC3E,MAAM,iBAAiB,GAAG,OAAO,CAAC,sDAAsD,CAAC,CAAC;AAC1F,MAAM,YAAY,GAAG,OAAO,CAAC,gDAAgD,CAAC,CAAC;AAE/E,MAAM,OAAO,GAAG;IACd,KAAK,EAAE;QACL,MAAM,EAAE,UAAU;QAClB,QAAQ,EAAE,YAAY;KACvB;IACD,IAAI,EAAE;QACJ,MAAM,EAAE,eAAe;QACvB,QAAQ,EAAE,iBAAiB;KAC5B;CACF,CAAC;AAMF,MAAM,UAAU,kBAAkB,CAAC,KAAsB;IACvD,MAAM,KAAK,GAAG,eAAe,EAAE,CAAC;IAChC,MAAM,UAAU,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;IAClC,MAAM,IAAI,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,QAAQ,CAAC;IACrE,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,CAAC,EAAG,CAAC;AAC5C,CAAC","sourcesContent":["import * as React from 'react';\n\nimport { Image } from '../Image';\nimport { useCurrentTheme } from '../useExpoTheme';\n\nconst activeLightIcon = require('../../assets/settings-filled-active-icon-light.png');\nconst activeIcon = require('../../assets/settings-filled-active-icon.png');\nconst inactiveLightIcon = require('../../assets/settings-filled-inactive-icon-light.png');\nconst inactiveIcon = require('../../assets/settings-filled-inactive-icon.png');\n\nconst iconMap = {\n  light: {\n    active: activeIcon,\n    inactive: inactiveIcon,\n  },\n  dark: {\n    active: activeLightIcon,\n    inactive: inactiveLightIcon,\n  },\n};\n\ntype TabBarIconProps = Partial<React.ComponentProps<typeof Image>> & {\n  focused?: boolean;\n};\n\nexport function SettingsFilledIcon(props: TabBarIconProps) {\n  const theme = useCurrentTheme();\n  const themedIcon = iconMap[theme];\n  const icon = props.focused ? themedIcon.active : themedIcon.inactive;\n  return <Image source={icon} {...props} />;\n}\n"]}

package/build/icons/ShakeDeviceIcon.js

@@ -6,6 +6,6 @@ const icon = require('../../assets/shake-device-icon.png');
 export function ShakeDeviceIcon(props) {
     const theme = useCurrentTheme();
     const themedIcon = theme === 'dark' ? lightIcon : icon;
-    return React.createElement(Image, { source: themedIcon, ...props });
+    return <Image source={themedIcon} {...props}/>;
 }
 //# sourceMappingURL=ShakeDeviceIcon.js.map

package/build/icons/ShakeDeviceIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"ShakeDeviceIcon.js","sourceRoot":"","sources":["../../src/icons/ShakeDeviceIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,SAAS,GAAG,OAAO,CAAC,0CAA0C,CAAC,CAAC;AACtE,MAAM,IAAI,GAAG,OAAO,CAAC,oCAAoC,CAAC,CAAC;AAE3D,MAAM,UAAU,eAAe,CAAC,KAAkD;IAChF,MAAM,KAAK,GAAG,eAAe,EAAE,CAAC;IAChC,MAAM,UAAU,GAAG,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC;IAEvD,OAAO,oBAAC,KAAK,IAAC,MAAM,EAAE,UAAU,KAAM,KAAK,GAAI,CAAC;AAClD,CAAC","sourcesContent":["import * as React from 'react';\n\nimport { Image } from '../Image';\nimport { useCurrentTheme } from '../useExpoTheme';\n\nconst lightIcon = require('../../assets/shake-device-icon-light.png');\nconst icon = require('../../assets/shake-device-icon.png');\n\nexport function ShakeDeviceIcon(props: Partial<React.ComponentProps<typeof Image>>) {\n  const theme = useCurrentTheme();\n  const themedIcon = theme === 'dark' ? lightIcon : icon;\n\n  return <Image source={themedIcon} {...props} />;\n}\n"]}
+{"version":3,"file":"ShakeDeviceIcon.js","sourceRoot":"","sources":["../../src/icons/ShakeDeviceIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,SAAS,GAAG,OAAO,CAAC,0CAA0C,CAAC,CAAC;AACtE,MAAM,IAAI,GAAG,OAAO,CAAC,oCAAoC,CAAC,CAAC;AAE3D,MAAM,UAAU,eAAe,CAAC,KAAkD;IAChF,MAAM,KAAK,GAAG,eAAe,EAAE,CAAC;IAChC,MAAM,UAAU,GAAG,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC;IAEvD,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,UAAU,CAAC,CAAC,IAAI,KAAK,CAAC,EAAG,CAAC;AAClD,CAAC","sourcesContent":["import * as React from 'react';\n\nimport { Image } from '../Image';\nimport { useCurrentTheme } from '../useExpoTheme';\n\nconst lightIcon = require('../../assets/shake-device-icon-light.png');\nconst icon = require('../../assets/shake-device-icon.png');\n\nexport function ShakeDeviceIcon(props: Partial<React.ComponentProps<typeof Image>>) {\n  const theme = useCurrentTheme();\n  const themedIcon = theme === 'dark' ? lightIcon : icon;\n\n  return <Image source={themedIcon} {...props} />;\n}\n"]}

package/build/icons/ShowMenuIcon.js

@@ -6,6 +6,6 @@ const icon = require('../../assets/show-menu-at-launch-icon.png');
 export function ShowMenuIcon(props) {
     const theme = useCurrentTheme();
     const themedIcon = theme === 'dark' ? lightIcon : icon;
-    return React.createElement(Image, { source: themedIcon, ...props });
+    return <Image source={themedIcon} {...props}/>;
 }
 //# sourceMappingURL=ShowMenuIcon.js.map

package/build/icons/ShowMenuIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"ShowMenuIcon.js","sourceRoot":"","sources":["../../src/icons/ShowMenuIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,SAAS,GAAG,OAAO,CAAC,iDAAiD,CAAC,CAAC;AAC7E,MAAM,IAAI,GAAG,OAAO,CAAC,2CAA2C,CAAC,CAAC;AAElE,MAAM,UAAU,YAAY,CAAC,KAAkD;IAC7E,MAAM,KAAK,GAAG,eAAe,EAAE,CAAC;IAChC,MAAM,UAAU,GAAG,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC;IAEvD,OAAO,oBAAC,KAAK,IAAC,MAAM,EAAE,UAAU,KAAM,KAAK,GAAI,CAAC;AAClD,CAAC","sourcesContent":["import * as React from 'react';\n\nimport { Image } from '../Image';\nimport { useCurrentTheme } from '../useExpoTheme';\n\nconst lightIcon = require('../../assets/show-menu-at-launch-icon-light.png');\nconst icon = require('../../assets/show-menu-at-launch-icon.png');\n\nexport function ShowMenuIcon(props: Partial<React.ComponentProps<typeof Image>>) {\n  const theme = useCurrentTheme();\n  const themedIcon = theme === 'dark' ? lightIcon : icon;\n\n  return <Image source={themedIcon} {...props} />;\n}\n"]}
+{"version":3,"file":"ShowMenuIcon.js","sourceRoot":"","sources":["../../src/icons/ShowMenuIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,SAAS,GAAG,OAAO,CAAC,iDAAiD,CAAC,CAAC;AAC7E,MAAM,IAAI,GAAG,OAAO,CAAC,2CAA2C,CAAC,CAAC;AAElE,MAAM,UAAU,YAAY,CAAC,KAAkD;IAC7E,MAAM,KAAK,GAAG,eAAe,EAAE,CAAC;IAChC,MAAM,UAAU,GAAG,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC;IAEvD,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,UAAU,CAAC,CAAC,IAAI,KAAK,CAAC,EAAG,CAAC;AAClD,CAAC","sourcesContent":["import * as React from 'react';\n\nimport { Image } from '../Image';\nimport { useCurrentTheme } from '../useExpoTheme';\n\nconst lightIcon = require('../../assets/show-menu-at-launch-icon-light.png');\nconst icon = require('../../assets/show-menu-at-launch-icon.png');\n\nexport function ShowMenuIcon(props: Partial<React.ComponentProps<typeof Image>>) {\n  const theme = useCurrentTheme();\n  const themedIcon = theme === 'dark' ? lightIcon : icon;\n\n  return <Image source={themedIcon} {...props} />;\n}\n"]}

package/build/icons/TerminalIcon.js

@@ -2,6 +2,6 @@ import * as React from 'react';
 import { Image } from '../Image';
 const icon = require('../../assets/terminal-icon.png');
 export function TerminalIcon(props) {
-    return React.createElement(Image, { source: icon, ...props });
+    return <Image source={icon} {...props}/>;
 }
 //# sourceMappingURL=TerminalIcon.js.map

package/build/icons/TerminalIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"TerminalIcon.js","sourceRoot":"","sources":["../../src/icons/TerminalIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,MAAM,IAAI,GAAG,OAAO,CAAC,gCAAgC,CAAC,CAAC;AAEvD,MAAM,UAAU,YAAY,CAAC,KAAkD;IAC7E,OAAO,oBAAC,KAAK,IAAC,MAAM,EAAE,IAAI,KAAM,KAAK,GAAI,CAAC;AAC5C,CAAC","sourcesContent":["import * as React from 'react';\n\nimport { Image } from '../Image';\n\nconst icon = require('../../assets/terminal-icon.png');\n\nexport function TerminalIcon(props: Partial<React.ComponentProps<typeof Image>>) {\n  return <Image source={icon} {...props} />;\n}\n"]}
+{"version":3,"file":"TerminalIcon.js","sourceRoot":"","sources":["../../src/icons/TerminalIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,MAAM,IAAI,GAAG,OAAO,CAAC,gCAAgC,CAAC,CAAC;AAEvD,MAAM,UAAU,YAAY,CAAC,KAAkD;IAC7E,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,CAAC,EAAG,CAAC;AAC5C,CAAC","sourcesContent":["import * as React from 'react';\n\nimport { Image } from '../Image';\n\nconst icon = require('../../assets/terminal-icon.png');\n\nexport function TerminalIcon(props: Partial<React.ComponentProps<typeof Image>>) {\n  return <Image source={icon} {...props} />;\n}\n"]}

package/build/icons/ThreeFingerPressIcon.js

@@ -6,6 +6,6 @@ const icon = require('../../assets/three-finger-long-press-icon.png');
 export function ThreeFingerPressIcon(props) {
     const theme = useCurrentTheme();
     const themedIcon = theme === 'dark' ? lightIcon : icon;
-    return React.createElement(Image, { source: themedIcon, ...props });
+    return <Image source={themedIcon} {...props}/>;
 }
 //# sourceMappingURL=ThreeFingerPressIcon.js.map

package/build/icons/ThreeFingerPressIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThreeFingerPressIcon.js","sourceRoot":"","sources":["../../src/icons/ThreeFingerPressIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,SAAS,GAAG,OAAO,CAAC,qDAAqD,CAAC,CAAC;AACjF,MAAM,IAAI,GAAG,OAAO,CAAC,+CAA+C,CAAC,CAAC;AAEtE,MAAM,UAAU,oBAAoB,CAAC,KAAkD;IACrF,MAAM,KAAK,GAAG,eAAe,EAAE,CAAC;IAChC,MAAM,UAAU,GAAG,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC;IAEvD,OAAO,oBAAC,KAAK,IAAC,MAAM,EAAE,UAAU,KAAM,KAAK,GAAI,CAAC;AAClD,CAAC","sourcesContent":["import * as React from 'react';\n\nimport { Image } from '../Image';\nimport { useCurrentTheme } from '../useExpoTheme';\n\nconst lightIcon = require('../../assets/three-finger-long-press-icon-light.png');\nconst icon = require('../../assets/three-finger-long-press-icon.png');\n\nexport function ThreeFingerPressIcon(props: Partial<React.ComponentProps<typeof Image>>) {\n  const theme = useCurrentTheme();\n  const themedIcon = theme === 'dark' ? lightIcon : icon;\n\n  return <Image source={themedIcon} {...props} />;\n}\n"]}
+{"version":3,"file":"ThreeFingerPressIcon.js","sourceRoot":"","sources":["../../src/icons/ThreeFingerPressIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,SAAS,GAAG,OAAO,CAAC,qDAAqD,CAAC,CAAC;AACjF,MAAM,IAAI,GAAG,OAAO,CAAC,+CAA+C,CAAC,CAAC;AAEtE,MAAM,UAAU,oBAAoB,CAAC,KAAkD;IACrF,MAAM,KAAK,GAAG,eAAe,EAAE,CAAC;IAChC,MAAM,UAAU,GAAG,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC;IAEvD,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,UAAU,CAAC,CAAC,IAAI,KAAK,CAAC,EAAG,CAAC;AAClD,CAAC","sourcesContent":["import * as React from 'react';\n\nimport { Image } from '../Image';\nimport { useCurrentTheme } from '../useExpoTheme';\n\nconst lightIcon = require('../../assets/three-finger-long-press-icon-light.png');\nconst icon = require('../../assets/three-finger-long-press-icon.png');\n\nexport function ThreeFingerPressIcon(props: Partial<React.ComponentProps<typeof Image>>) {\n  const theme = useCurrentTheme();\n  const themedIcon = theme === 'dark' ? lightIcon : icon;\n\n  return <Image source={themedIcon} {...props} />;\n}\n"]}

package/build/icons/ToolbarOverlayIcon.js

@@ -2,6 +2,6 @@ import * as React from 'react';
 import { Image } from '../Image';
 const icon = require('../../assets/toolbar-overlay-icon.png');
 export function ToolbarOverlayIcon(props) {
-    return React.createElement(Image, { source: icon, ...props });
+    return <Image source={icon} {...props}/>;
 }
 //# sourceMappingURL=ToolbarOverlayIcon.js.map

package/build/icons/ToolbarOverlayIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarOverlayIcon.js","sourceRoot":"","sources":["../../src/icons/ToolbarOverlayIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,MAAM,IAAI,GAAG,OAAO,CAAC,uCAAuC,CAAC,CAAC;AAE9D,MAAM,UAAU,kBAAkB,CAAC,KAAkD;IACnF,OAAO,oBAAC,KAAK,IAAC,MAAM,EAAE,IAAI,KAAM,KAAK,GAAI,CAAC;AAC5C,CAAC","sourcesContent":["import * as React from 'react';\n\nimport { Image } from '../Image';\n\nconst icon = require('../../assets/toolbar-overlay-icon.png');\n\nexport function ToolbarOverlayIcon(props: Partial<React.ComponentProps<typeof Image>>) {\n  return <Image source={icon} {...props} />;\n}\n"]}
+{"version":3,"file":"ToolbarOverlayIcon.js","sourceRoot":"","sources":["../../src/icons/ToolbarOverlayIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,MAAM,IAAI,GAAG,OAAO,CAAC,uCAAuC,CAAC,CAAC;AAE9D,MAAM,UAAU,kBAAkB,CAAC,KAAkD;IACnF,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,CAAC,EAAG,CAAC;AAC5C,CAAC","sourcesContent":["import * as React from 'react';\n\nimport { Image } from '../Image';\n\nconst icon = require('../../assets/toolbar-overlay-icon.png');\n\nexport function ToolbarOverlayIcon(props: Partial<React.ComponentProps<typeof Image>>) {\n  return <Image source={icon} {...props} />;\n}\n"]}

package/build/icons/UpdateIcon.js

@@ -6,6 +6,6 @@ const icon = require('../../assets/update-icon.png');
 export function UpdateIcon(props) {
     const theme = useCurrentTheme();
     const themedIcon = theme === 'dark' ? lightIcon : icon;
-    return React.createElement(Image, { source: themedIcon, ...props });
+    return <Image source={themedIcon} {...props}/>;
 }
 //# sourceMappingURL=UpdateIcon.js.map

package/build/icons/UpdateIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"UpdateIcon.js","sourceRoot":"","sources":["../../src/icons/UpdateIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,SAAS,GAAG,OAAO,CAAC,oCAAoC,CAAC,CAAC;AAChE,MAAM,IAAI,GAAG,OAAO,CAAC,8BAA8B,CAAC,CAAC;AAErD,MAAM,UAAU,UAAU,CAAC,KAAkD;IAC3E,MAAM,KAAK,GAAG,eAAe,EAAE,CAAC;IAChC,MAAM,UAAU,GAAG,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC;IAEvD,OAAO,oBAAC,KAAK,IAAC,MAAM,EAAE,UAAU,KAAM,KAAK,GAAI,CAAC;AAClD,CAAC","sourcesContent":["import * as React from 'react';\n\nimport { Image } from '../Image';\nimport { useCurrentTheme } from '../useExpoTheme';\n\nconst lightIcon = require('../../assets/update-icon-light.png');\nconst icon = require('../../assets/update-icon.png');\n\nexport function UpdateIcon(props: Partial<React.ComponentProps<typeof Image>>) {\n  const theme = useCurrentTheme();\n  const themedIcon = theme === 'dark' ? lightIcon : icon;\n\n  return <Image source={themedIcon} {...props} />;\n}\n"]}
+{"version":3,"file":"UpdateIcon.js","sourceRoot":"","sources":["../../src/icons/UpdateIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,SAAS,GAAG,OAAO,CAAC,oCAAoC,CAAC,CAAC;AAChE,MAAM,IAAI,GAAG,OAAO,CAAC,8BAA8B,CAAC,CAAC;AAErD,MAAM,UAAU,UAAU,CAAC,KAAkD;IAC3E,MAAM,KAAK,GAAG,eAAe,EAAE,CAAC;IAChC,MAAM,UAAU,GAAG,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC;IAEvD,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,UAAU,CAAC,CAAC,IAAI,KAAK,CAAC,EAAG,CAAC;AAClD,CAAC","sourcesContent":["import * as React from 'react';\n\nimport { Image } from '../Image';\nimport { useCurrentTheme } from '../useExpoTheme';\n\nconst lightIcon = require('../../assets/update-icon-light.png');\nconst icon = require('../../assets/update-icon.png');\n\nexport function UpdateIcon(props: Partial<React.ComponentProps<typeof Image>>) {\n  const theme = useCurrentTheme();\n  const themedIcon = theme === 'dark' ? lightIcon : icon;\n\n  return <Image source={themedIcon} {...props} />;\n}\n"]}

package/build/icons/UserIcon.js

@@ -6,6 +6,6 @@ const icon = require('../../assets/user-icon.png');
 export function UserIcon(props) {
     const theme = useCurrentTheme();
     const themedIcon = theme === 'dark' ? lightIcon : icon;
-    return React.createElement(Image, { source: themedIcon, ...props });
+    return <Image source={themedIcon} {...props}/>;
 }
 //# sourceMappingURL=UserIcon.js.map

package/build/icons/UserIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"UserIcon.js","sourceRoot":"","sources":["../../src/icons/UserIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,SAAS,GAAG,OAAO,CAAC,kCAAkC,CAAC,CAAC;AAC9D,MAAM,IAAI,GAAG,OAAO,CAAC,4BAA4B,CAAC,CAAC;AAEnD,MAAM,UAAU,QAAQ,CAAC,KAAkD;IACzE,MAAM,KAAK,GAAG,eAAe,EAAE,CAAC;IAChC,MAAM,UAAU,GAAG,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC;IAEvD,OAAO,oBAAC,KAAK,IAAC,MAAM,EAAE,UAAU,KAAM,KAAK,GAAI,CAAC;AAClD,CAAC","sourcesContent":["import * as React from 'react';\n\nimport { Image } from '../Image';\nimport { useCurrentTheme } from '../useExpoTheme';\n\nconst lightIcon = require('../../assets/user-icon-light.png');\nconst icon = require('../../assets/user-icon.png');\n\nexport function UserIcon(props: Partial<React.ComponentProps<typeof Image>>) {\n  const theme = useCurrentTheme();\n  const themedIcon = theme === 'dark' ? lightIcon : icon;\n\n  return <Image source={themedIcon} {...props} />;\n}\n"]}
+{"version":3,"file":"UserIcon.js","sourceRoot":"","sources":["../../src/icons/UserIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,SAAS,GAAG,OAAO,CAAC,kCAAkC,CAAC,CAAC;AAC9D,MAAM,IAAI,GAAG,OAAO,CAAC,4BAA4B,CAAC,CAAC;AAEnD,MAAM,UAAU,QAAQ,CAAC,KAAkD;IACzE,MAAM,KAAK,GAAG,eAAe,EAAE,CAAC;IAChC,MAAM,UAAU,GAAG,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC;IAEvD,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,UAAU,CAAC,CAAC,IAAI,KAAK,CAAC,EAAG,CAAC;AAClD,CAAC","sourcesContent":["import * as React from 'react';\n\nimport { Image } from '../Image';\nimport { useCurrentTheme } from '../useExpoTheme';\n\nconst lightIcon = require('../../assets/user-icon-light.png');\nconst icon = require('../../assets/user-icon.png');\n\nexport function UserIcon(props: Partial<React.ComponentProps<typeof Image>>) {\n  const theme = useCurrentTheme();\n  const themedIcon = theme === 'dark' ? lightIcon : icon;\n\n  return <Image source={themedIcon} {...props} />;\n}\n"]}

package/build/icons/WarningIcon.js

@@ -6,6 +6,6 @@ const icon = require('../../assets/warning-triangle-icon.png');
 export function WarningIcon(props) {
     const theme = useCurrentTheme();
     const themedIcon = theme === 'dark' ? lightIcon : icon;
-    return React.createElement(Image, { source: themedIcon, ...props });
+    return <Image source={themedIcon} {...props}/>;
 }
 //# sourceMappingURL=WarningIcon.js.map

package/build/icons/WarningIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"WarningIcon.js","sourceRoot":"","sources":["../../src/icons/WarningIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,SAAS,GAAG,OAAO,CAAC,8CAA8C,CAAC,CAAC;AAC1E,MAAM,IAAI,GAAG,OAAO,CAAC,wCAAwC,CAAC,CAAC;AAE/D,MAAM,UAAU,WAAW,CAAC,KAAkD;IAC5E,MAAM,KAAK,GAAG,eAAe,EAAE,CAAC;IAChC,MAAM,UAAU,GAAG,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC;IAEvD,OAAO,oBAAC,KAAK,IAAC,MAAM,EAAE,UAAU,KAAM,KAAK,GAAI,CAAC;AAClD,CAAC","sourcesContent":["import * as React from 'react';\n\nimport { Image } from '../Image';\nimport { useCurrentTheme } from '../useExpoTheme';\n\nconst lightIcon = require('../../assets/warning-triangle-icon-light.png');\nconst icon = require('../../assets/warning-triangle-icon.png');\n\nexport function WarningIcon(props: Partial<React.ComponentProps<typeof Image>>) {\n  const theme = useCurrentTheme();\n  const themedIcon = theme === 'dark' ? lightIcon : icon;\n\n  return <Image source={themedIcon} {...props} />;\n}\n"]}
+{"version":3,"file":"WarningIcon.js","sourceRoot":"","sources":["../../src/icons/WarningIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,SAAS,GAAG,OAAO,CAAC,8CAA8C,CAAC,CAAC;AAC1E,MAAM,IAAI,GAAG,OAAO,CAAC,wCAAwC,CAAC,CAAC;AAE/D,MAAM,UAAU,WAAW,CAAC,KAAkD;IAC5E,MAAM,KAAK,GAAG,eAAe,EAAE,CAAC;IAChC,MAAM,UAAU,GAAG,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC;IAEvD,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,UAAU,CAAC,CAAC,IAAI,KAAK,CAAC,EAAG,CAAC;AAClD,CAAC","sourcesContent":["import * as React from 'react';\n\nimport { Image } from '../Image';\nimport { useCurrentTheme } from '../useExpoTheme';\n\nconst lightIcon = require('../../assets/warning-triangle-icon-light.png');\nconst icon = require('../../assets/warning-triangle-icon.png');\n\nexport function WarningIcon(props: Partial<React.ComponentProps<typeof Image>>) {\n  const theme = useCurrentTheme();\n  const themedIcon = theme === 'dark' ? lightIcon : icon;\n\n  return <Image source={themedIcon} {...props} />;\n}\n"]}

package/build/icons/XIcon.js

@@ -6,6 +6,6 @@ const icon = require('../../assets/x-icon.png');
 export function XIcon(props) {
     const theme = useCurrentTheme();
     const themedIcon = theme === 'dark' ? lightIcon : icon;
-    return React.createElement(Image, { source: themedIcon, ...props });
+    return <Image source={themedIcon} {...props}/>;
 }
 //# sourceMappingURL=XIcon.js.map

package/build/icons/XIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"XIcon.js","sourceRoot":"","sources":["../../src/icons/XIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,SAAS,GAAG,OAAO,CAAC,+BAA+B,CAAC,CAAC;AAC3D,MAAM,IAAI,GAAG,OAAO,CAAC,yBAAyB,CAAC,CAAC;AAEhD,MAAM,UAAU,KAAK,CAAC,KAAkD;IACtE,MAAM,KAAK,GAAG,eAAe,EAAE,CAAC;IAChC,MAAM,UAAU,GAAG,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC;IAEvD,OAAO,oBAAC,KAAK,IAAC,MAAM,EAAE,UAAU,KAAM,KAAK,GAAI,CAAC;AAClD,CAAC","sourcesContent":["import * as React from 'react';\n\nimport { Image } from '../Image';\nimport { useCurrentTheme } from '../useExpoTheme';\n\nconst lightIcon = require('../../assets/x-icon-light.png');\nconst icon = require('../../assets/x-icon.png');\n\nexport function XIcon(props: Partial<React.ComponentProps<typeof Image>>) {\n  const theme = useCurrentTheme();\n  const themedIcon = theme === 'dark' ? lightIcon : icon;\n\n  return <Image source={themedIcon} {...props} />;\n}\n"]}
+{"version":3,"file":"XIcon.js","sourceRoot":"","sources":["../../src/icons/XIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,SAAS,GAAG,OAAO,CAAC,+BAA+B,CAAC,CAAC;AAC3D,MAAM,IAAI,GAAG,OAAO,CAAC,yBAAyB,CAAC,CAAC;AAEhD,MAAM,UAAU,KAAK,CAAC,KAAkD;IACtE,MAAM,KAAK,GAAG,eAAe,EAAE,CAAC;IAChC,MAAM,UAAU,GAAG,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC;IAEvD,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,UAAU,CAAC,CAAC,IAAI,KAAK,CAAC,EAAG,CAAC;AAClD,CAAC","sourcesContent":["import * as React from 'react';\n\nimport { Image } from '../Image';\nimport { useCurrentTheme } from '../useExpoTheme';\n\nconst lightIcon = require('../../assets/x-icon-light.png');\nconst icon = require('../../assets/x-icon.png');\n\nexport function XIcon(props: Partial<React.ComponentProps<typeof Image>>) {\n  const theme = useCurrentTheme();\n  const themedIcon = theme === 'dark' ? lightIcon : icon;\n\n  return <Image source={themedIcon} {...props} />;\n}\n"]}

package/build/useExpoTheme.js

@@ -11,7 +11,7 @@ export function ThemeProvider({ children, themePreference = 'no-preference' }) {
         }
         return systemTheme ?? 'light';
     }, [themePreference, systemTheme]);
-    return React.createElement(ThemeContext.Provider, { value: theme }, children);
+    return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
 }
 export function useCurrentTheme() {
     const theme = useTheme();

package/build/useExpoTheme.js.map

@@ -1 +1 @@
-{"version":3,"file":"useExpoTheme.js","sourceRoot":"","sources":["../src/useExpoTheme.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AACzE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAK9C,MAAM,YAAY,GAAG,KAAK,CAAC,aAAa,CAAQ,OAAO,CAAC,CAAC;AACzD,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;AAO7D,MAAM,UAAU,aAAa,CAAC,EAAE,QAAQ,EAAE,eAAe,GAAG,eAAe,EAAsB;IAC/F,MAAM,WAAW,GAAG,cAAc,EAAE,CAAC;IAErC,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC/B,IAAI,eAAe,KAAK,eAAe,EAAE;YACvC,OAAO,eAAe,CAAC;SACxB;QAED,OAAO,WAAW,IAAI,OAAO,CAAC;IAChC,CAAC,EAAE,CAAC,eAAe,EAAE,WAAW,CAAC,CAAC,CAAC;IAEnC,OAAO,oBAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,IAAG,QAAQ,CAAyB,CAAC;AACjF,CAAC;AAID,MAAM,UAAU,eAAe;IAC7B,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,OAAO,KAAK,CAAC;AACf,CAAC;AAED,MAAM,UAAU,YAAY;IAC1B,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,IAAI,KAAK,KAAK,MAAM,EAAE;QACpB,OAAO,SAAS,CAAC;KAClB;IAED,OAAO,UAAU,CAAC;AACpB,CAAC;AAED,MAAM,UAAU,cAAc;IAC5B,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,OAAO,OAAO,CAAC,KAAK,CAAC,CAAC;AACxB,CAAC","sourcesContent":["import { lightTheme, darkTheme, palette } from '@expo/styleguide-native';\nimport * as React from 'react';\nimport { useColorScheme } from 'react-native';\n\nexport type ThemePreference = 'light' | 'dark' | 'no-preference';\ntype Theme = 'light' | 'dark';\n\nconst ThemeContext = React.createContext<Theme>('light');\nexport const useTheme = () => React.useContext(ThemeContext);\n\ntype ThemeProviderProps = {\n  children: React.ReactNode;\n  themePreference?: ThemePreference;\n};\n\nexport function ThemeProvider({ children, themePreference = 'no-preference' }: ThemeProviderProps) {\n  const systemTheme = useColorScheme();\n\n  const theme = React.useMemo(() => {\n    if (themePreference !== 'no-preference') {\n      return themePreference;\n    }\n\n    return systemTheme ?? 'light';\n  }, [themePreference, systemTheme]);\n\n  return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;\n}\n\nexport type ExpoTheme = typeof lightTheme;\n\nexport function useCurrentTheme(): 'light' | 'dark' {\n  const theme = useTheme();\n  return theme;\n}\n\nexport function useExpoTheme(): ExpoTheme {\n  const theme = useTheme();\n\n  if (theme === 'dark') {\n    return darkTheme;\n  }\n\n  return lightTheme;\n}\n\nexport function useExpoPalette() {\n  const theme = useTheme();\n  return palette[theme];\n}\n"]}
+{"version":3,"file":"useExpoTheme.js","sourceRoot":"","sources":["../src/useExpoTheme.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AACzE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAK9C,MAAM,YAAY,GAAG,KAAK,CAAC,aAAa,CAAQ,OAAO,CAAC,CAAC;AACzD,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;AAO7D,MAAM,UAAU,aAAa,CAAC,EAAE,QAAQ,EAAE,eAAe,GAAG,eAAe,EAAsB;IAC/F,MAAM,WAAW,GAAG,cAAc,EAAE,CAAC;IAErC,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC/B,IAAI,eAAe,KAAK,eAAe,EAAE;YACvC,OAAO,eAAe,CAAC;SACxB;QAED,OAAO,WAAW,IAAI,OAAO,CAAC;IAChC,CAAC,EAAE,CAAC,eAAe,EAAE,WAAW,CAAC,CAAC,CAAC;IAEnC,OAAO,CAAC,YAAY,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC;AACjF,CAAC;AAID,MAAM,UAAU,eAAe;IAC7B,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,OAAO,KAAK,CAAC;AACf,CAAC;AAED,MAAM,UAAU,YAAY;IAC1B,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,IAAI,KAAK,KAAK,MAAM,EAAE;QACpB,OAAO,SAAS,CAAC;KAClB;IAED,OAAO,UAAU,CAAC;AACpB,CAAC;AAED,MAAM,UAAU,cAAc;IAC5B,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,OAAO,OAAO,CAAC,KAAK,CAAC,CAAC;AACxB,CAAC","sourcesContent":["import { lightTheme, darkTheme, palette } from '@expo/styleguide-native';\nimport * as React from 'react';\nimport { useColorScheme } from 'react-native';\n\nexport type ThemePreference = 'light' | 'dark' | 'no-preference';\ntype Theme = 'light' | 'dark';\n\nconst ThemeContext = React.createContext<Theme>('light');\nexport const useTheme = () => React.useContext(ThemeContext);\n\ntype ThemeProviderProps = {\n  children: React.ReactNode;\n  themePreference?: ThemePreference;\n};\n\nexport function ThemeProvider({ children, themePreference = 'no-preference' }: ThemeProviderProps) {\n  const systemTheme = useColorScheme();\n\n  const theme = React.useMemo(() => {\n    if (themePreference !== 'no-preference') {\n      return themePreference;\n    }\n\n    return systemTheme ?? 'light';\n  }, [themePreference, systemTheme]);\n\n  return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;\n}\n\nexport type ExpoTheme = typeof lightTheme;\n\nexport function useCurrentTheme(): 'light' | 'dark' {\n  const theme = useTheme();\n  return theme;\n}\n\nexport function useExpoTheme(): ExpoTheme {\n  const theme = useTheme();\n\n  if (theme === 'dark') {\n    return darkTheme;\n  }\n\n  return lightTheme;\n}\n\nexport function useExpoPalette() {\n  const theme = useTheme();\n  return palette[theme];\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "expo-dev-client-components",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "Shared JS components and configuration for expo-dev-client",
   "main": "src/index.ts",
   "scripts": {
@@ -42,5 +42,5 @@
       "./setupTests.js"
     ]
   },
-  "gitHead": "2240630a92eb79a4e4bf73e1439916c394876478"
+  "gitHead": "3142a086578deffd8704a8f1b6f0f661527d836c"
 }

package/setupTests.js

@@ -12,12 +12,10 @@ jest.mock('react-native/Libraries/Components/AccessibilityInfo/AccessibilityInfo
     removeEventListener: jest.fn(),
     setAccessibilityFocus: jest.fn(),
   };
-
-  // workaround to be compatible with modern `Accessibility` in RN 0.66 which has ESM export
-  // Use `return { default: MockAccessibility };` when we drop support for SDK 44
-  MockA11y.default = MockA11y;
-
-  return MockA11y;
+  return {
+    __esModule: true,
+    default: MockA11y,
+  };
 });
 
 jest.mock('react-native/Libraries/Utilities/Appearance', () => {
@@ -26,10 +24,8 @@ jest.mock('react-native/Libraries/Utilities/Appearance', () => {
     removeChangeListener: jest.fn(),
     getColorScheme: jest.fn(() => 'light'),
   };
-
-  // workaround to be compatible with modern `Appearance` in RN 0.66 which has ESM export
-  // Use `return { default: MockAppearance };` when we drop support for SDK 44
-  MockAppearance.default = MockAppearance;
-
-  return MockAppearance;
+  return {
+    __esModule: true,
+    default: MockAppearance,
+  };
 });

package/src/create-primitive.tsx

@@ -41,7 +41,7 @@ export function create<T extends object, O extends Options>(
 
   const Component = React.forwardRef<
     T,
-    React.PropsWithChildren<T> & Nested<typeof config['variants']> & { selectors?: SelectorProps }
+    React.PropsWithChildren<T> & Nested<(typeof config)['variants']> & { selectors?: SelectorProps }
   >((props, ref) => {
     const theme = useTheme();