@planningcenter/chat-react-native 3.42.2-qa-821.1 → 3.42.2-qa-staging.4

package/build/components/display/button.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
 import { Pressable, StyleSheet, Text, View } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import { useTheme, useFontScale, useCreateAndroidRippleColor } from '../../hooks';
@@ -23,11 +23,22 @@ export function Button({ adjustsFontSizeToFit = false, allowFontScaling = true,
     const textStyles = [styles.text, disabled && styles.textDisabled, loading && styles.iconLoading];
     const iconStyles = [styles.icon, disabled && styles.iconDisabled, loading && styles.textLoading];
     const androidRippleColor = useCreateAndroidRippleColor({ color: gradientOptionsMap[colorKey][0] });
-    return (_jsx(Pressable, { style: ({ pressed }) => ({
+    return (<Pressable style={({ pressed }) => ({
             ...styles.pressable,
             ...(pressed && platformPressedOpacityStyle),
             ...overrideStyles,
-        }), accessibilityRole: "button", disabled: disabled || loading, accessibilityState: { busy: loading }, android_ripple: { color: androidRippleColor, borderless: false, foreground: true }, ...props, children: _jsxs(LinearGradient, { start: { x: 0.1, y: 0.1 }, end: { x: 0.9, y: 0.9 }, colors: gradientOptionsMap[colorKey], style: [styles.colorWrapper, colorWrapperStyles], children: [loading && (_jsx(Spinner, { size: styles.spinnerSize.fontSize, style: styles.spinner, maxFontSizeMultiplier: maxFontSizeMultiplier || 0 })), _jsxs(View, { style: [styles.innerWrapper, contentWrapperStyles], children: [iconNameLeft && (_jsx(Icon, { name: iconNameLeft, style: iconStyles, maxFontSizeMultiplier: maxFontSizeMultiplier })), _jsx(Text, { allowFontScaling: allowFontScaling, minimumFontScale: minimumFontScale, maxFontSizeMultiplier: maxFontSizeMultiplier, adjustsFontSizeToFit: adjustsFontSizeToFit, numberOfLines: 1, style: textStyles, children: title }), iconNameRight && (_jsx(Icon, { name: iconNameRight, style: iconStyles, maxFontSizeMultiplier: maxFontSizeMultiplier }))] })] }) }));
+        })} accessibilityRole="button" disabled={disabled || loading} accessibilityState={{ busy: loading }} android_ripple={{ color: androidRippleColor, borderless: false, foreground: true }} {...props}>
+      <LinearGradient start={{ x: 0.1, y: 0.1 }} end={{ x: 0.9, y: 0.9 }} colors={gradientOptionsMap[colorKey]} style={[styles.colorWrapper, colorWrapperStyles]}>
+        {loading && (<Spinner size={styles.spinnerSize.fontSize} style={styles.spinner} maxFontSizeMultiplier={maxFontSizeMultiplier || 0}/>)}
+        <View style={[styles.innerWrapper, contentWrapperStyles]}>
+          {iconNameLeft && (<Icon name={iconNameLeft} style={iconStyles} maxFontSizeMultiplier={maxFontSizeMultiplier}/>)}
+          <Text allowFontScaling={allowFontScaling} minimumFontScale={minimumFontScale} maxFontSizeMultiplier={maxFontSizeMultiplier} adjustsFontSizeToFit={adjustsFontSizeToFit} numberOfLines={1} style={textStyles}>
+            {title}
+          </Text>
+          {iconNameRight && (<Icon name={iconNameRight} style={iconStyles} maxFontSizeMultiplier={maxFontSizeMultiplier}/>)}
+        </View>
+      </LinearGradient>
+    </Pressable>);
 }
 // =================================
 // ====== Styles ===================

package/build/components/display/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/display/button.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react'\nimport { Pressable, StyleSheet, Text, View } from 'react-native'\nimport type { PressableProps, ViewStyle } from 'react-native'\nimport LinearGradient from 'react-native-linear-gradient'\nimport { useTheme, useFontScale, useCreateAndroidRippleColor } from '../../hooks'\nimport { platformFontWeightBold, platformPressedOpacityStyle } from '../../utils'\nimport { tokens } from '../../vendor/tapestry/tokens'\nimport { Icon, IconString } from './icon'\nimport { Spinner } from './spinner'\nimport { getColorKey, useButtonColorOptionMap, useGradientColorMap } from './utils/button_colors'\nimport type { ButtonAppearanceUnion } from './utils/button_colors'\n\n// =================================\n// ====== Constants ================\n// =================================\n\nconst SIZES = {\n  sm: 'sm',\n  md: 'md',\n  lg: 'lg',\n} as const\n\ntype SizeUnion = (typeof SIZES)[keyof typeof SIZES]\ntype SizeStyle = Record<\n  SizeUnion,\n  {\n    fontSize: number\n    paddingHorizontal: number\n    height: number\n    borderRadius: number\n    gap: number\n  }\n>\n\ntype VariantUnion = 'fill' | 'outline'\ntype VariantColors = Record<\n  VariantUnion,\n  {\n    backgroundColor: string\n    color: string\n  }\n>\n\n// =================================\n// ====== Component ================\n// =================================\n\nexport interface ButtonProps extends PressableProps {\n  /**\n   * Specifies whether fonts should be scaled down automatically to fit given style constraints.\n   */\n  adjustsFontSizeToFit?: boolean\n  /**\n   * Specifies whether fonts should scale to respect the device's text size accessibility settings. The default is true.\n   */\n  allowFontScaling?: boolean\n  /**\n   * Updates the button's colors\n   */\n  appearance?: ButtonAppearanceUnion\n  /**\n   * Styles the outer LinearGradient that gives the button its background and outline color\n   */\n  colorWrapperStyles?: ViewStyle\n  /**\n   * Styles the inner View that wraps the button's content\n   */\n  contentWrapperStyles?: ViewStyle\n  /**\n   * Generates an icon to the left of the button text\n   */\n  iconNameLeft?: IconString\n  /**\n   * Generates an icon to the right of the button text\n   */\n  iconNameRight?: IconString\n  /**\n   * Disables the button and replaces its content with a spinner\n   */\n  loading?: boolean\n  /**\n   * Specifies the maximum size a font can reach when allowFontScaling is enabled.\n   */\n  maxFontSizeMultiplier?: number\n  /**\n   * Specifies smallest possible scale a font can reach when adjustsFontSizeToFit is enabled. (values 0.01-1.0).\n   */\n  minimumFontScale?: number\n  /**\n   * Changes the overall size of the button and its contents\n   */\n  size?: SizeUnion\n  /**\n   * Renders as text within the button\n   */\n  title: string\n  /**\n   * Fill buttons are visually more propmonitent then outline buttons\n   */\n  variant?: VariantUnion\n}\n\nexport function Button({\n  adjustsFontSizeToFit = false,\n  allowFontScaling = true,\n  appearance = 'interaction',\n  contentWrapperStyles,\n  colorWrapperStyles,\n  disabled = false,\n  iconNameLeft,\n  iconNameRight,\n  loading,\n  maxFontSizeMultiplier,\n  minimumFontScale,\n  size = 'md',\n  title,\n  variant = 'fill',\n  style,\n  ...props\n}: ButtonProps) {\n  const styles = useStyles({ appearance, disabled, loading, maxFontSizeMultiplier, size, variant })\n  const gradientOptionsMap = useGradientColorMap()\n  const colorKey = getColorKey({ disabled, loading, appearance })\n\n  const overrideStyles = StyleSheet.flatten(style)\n  const textStyles = [styles.text, disabled && styles.textDisabled, loading && styles.iconLoading]\n  const iconStyles = [styles.icon, disabled && styles.iconDisabled, loading && styles.textLoading]\n\n  const androidRippleColor = useCreateAndroidRippleColor({ color: gradientOptionsMap[colorKey][0] })\n\n  return (\n    <Pressable\n      style={({ pressed }) => ({\n        ...styles.pressable,\n        ...(pressed && platformPressedOpacityStyle),\n        ...overrideStyles,\n      })}\n      accessibilityRole=\"button\"\n      disabled={disabled || loading}\n      accessibilityState={{ busy: loading }}\n      android_ripple={{ color: androidRippleColor, borderless: false, foreground: true }}\n      {...props}\n    >\n      <LinearGradient\n        start={{ x: 0.1, y: 0.1 }}\n        end={{ x: 0.9, y: 0.9 }}\n        colors={gradientOptionsMap[colorKey]}\n        style={[styles.colorWrapper, colorWrapperStyles]}\n      >\n        {loading && (\n          <Spinner\n            size={styles.spinnerSize.fontSize}\n            style={styles.spinner}\n            maxFontSizeMultiplier={maxFontSizeMultiplier || 0}\n          />\n        )}\n        <View style={[styles.innerWrapper, contentWrapperStyles]}>\n          {iconNameLeft && (\n            <Icon\n              name={iconNameLeft}\n              style={iconStyles}\n              maxFontSizeMultiplier={maxFontSizeMultiplier}\n            />\n          )}\n          <Text\n            allowFontScaling={allowFontScaling}\n            minimumFontScale={minimumFontScale}\n            maxFontSizeMultiplier={maxFontSizeMultiplier}\n            adjustsFontSizeToFit={adjustsFontSizeToFit}\n            numberOfLines={1}\n            style={textStyles}\n          >\n            {title}\n          </Text>\n          {iconNameRight && (\n            <Icon\n              name={iconNameRight}\n              style={iconStyles}\n              maxFontSizeMultiplier={maxFontSizeMultiplier}\n            />\n          )}\n        </View>\n      </LinearGradient>\n    </Pressable>\n  )\n}\n\n// =================================\n// ====== Styles ===================\n// =================================\n\nconst useStyles = ({\n  appearance = 'interaction',\n  disabled = false,\n  loading = false,\n  maxFontSizeMultiplier,\n  size = 'md',\n  variant = 'fill',\n}: Partial<ButtonProps>) => {\n  const { colors, button } = useTheme()\n  const fontScale = useFontScale({ maxFontSizeMultiplier })\n  const colorOptionMap = useButtonColorOptionMap()\n\n  const outlineHeightOffset = size === 'sm' ? 2 : 4\n  const outlineMarginOffset = size === 'sm' ? 1 : 2\n\n  const sizeStyleMap: SizeStyle = {\n    [SIZES.sm]: {\n      fontSize: 12,\n      paddingHorizontal: 12 * fontScale,\n      borderRadius: button.borderRadius * fontScale,\n      height: 24 * fontScale - outlineHeightOffset,\n      gap: 4 * fontScale,\n    },\n    [SIZES.md]: {\n      fontSize: 14,\n      paddingHorizontal: 16 * fontScale,\n      borderRadius: button.borderRadius * fontScale,\n      height: 32 * fontScale - outlineHeightOffset,\n      gap: 6 * fontScale,\n    },\n    [SIZES.lg]: {\n      fontSize: 16,\n      paddingHorizontal: 24 * fontScale,\n      borderRadius: button.borderRadius * fontScale,\n      height: 40 * fontScale - outlineHeightOffset,\n      gap: 8 * fontScale,\n    },\n  }\n\n  const variantOutlineColor =\n    disabled || loading ? colors.fillColorNeutral090 : colors.fillColorNeutral100Inverted\n\n  const variantStyleMap: VariantColors = {\n    fill: {\n      backgroundColor: 'transparent',\n      color: tokens.colorNeutral100White,\n    },\n    outline: {\n      backgroundColor: variantOutlineColor,\n      color: colorOptionMap[appearance],\n    },\n  }\n\n  return StyleSheet.create({\n    pressable: {\n      borderRadius: sizeStyleMap[size].borderRadius,\n      overflow: 'hidden',\n    },\n    colorWrapper: {\n      flexDirection: 'row',\n      justifyContent: 'center',\n      alignItems: 'center',\n      borderRadius: sizeStyleMap[size].borderRadius,\n    },\n    innerWrapper: {\n      flexDirection: 'row',\n      justifyContent: 'center',\n      alignItems: 'center',\n      margin: outlineMarginOffset,\n      gap: sizeStyleMap[size].gap,\n      borderRadius: sizeStyleMap[size].borderRadius - outlineMarginOffset,\n      height: sizeStyleMap[size].height,\n      backgroundColor: variantStyleMap[variant].backgroundColor,\n      paddingHorizontal: sizeStyleMap[size].paddingHorizontal,\n    },\n    text: {\n      textAlign: 'center',\n      textAlignVertical: 'center',\n      includeFontPadding: false,\n      fontWeight: platformFontWeightBold,\n      fontSize: sizeStyleMap[size].fontSize,\n      color: variantStyleMap[variant].color,\n    },\n    textDisabled: {\n      color: colors.textColorDefaultDisabled,\n    },\n    textLoading: {\n      opacity: 0,\n    },\n    icon: {\n      fontSize: sizeStyleMap[size].fontSize,\n      color: variantStyleMap[variant].color,\n    },\n    iconDisabled: {\n      color: colors.iconColorDefaultDisabled,\n    },\n    iconLoading: {\n      opacity: 0,\n    },\n    spinnerSize: {\n      fontSize: sizeStyleMap[size].fontSize,\n    },\n    spinner: {\n      width: '100%',\n      height: '100%',\n      position: 'absolute',\n      justifyContent: 'center',\n      alignItems: 'center',\n      zIndex: 2,\n    },\n  })\n}\n"]}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/display/button.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react'\nimport { Pressable, StyleSheet, Text, View } from 'react-native'\nimport type { PressableProps, ViewStyle } from 'react-native'\nimport LinearGradient from 'react-native-linear-gradient'\nimport { useTheme, useFontScale, useCreateAndroidRippleColor } from '../../hooks'\nimport { platformFontWeightBold, platformPressedOpacityStyle } from '../../utils'\nimport { tokens } from '../../vendor/tapestry/tokens'\nimport { Icon, IconString } from './icon'\nimport { Spinner } from './spinner'\nimport { getColorKey, useButtonColorOptionMap, useGradientColorMap } from './utils/button_colors'\nimport type { ButtonAppearanceUnion } from './utils/button_colors'\n\n// =================================\n// ====== Constants ================\n// =================================\n\nconst SIZES = {\n  sm: 'sm',\n  md: 'md',\n  lg: 'lg',\n} as const\n\ntype SizeUnion = (typeof SIZES)[keyof typeof SIZES]\ntype SizeStyle = Record<\n  SizeUnion,\n  {\n    fontSize: number\n    paddingHorizontal: number\n    height: number\n    borderRadius: number\n    gap: number\n  }\n>\n\ntype VariantUnion = 'fill' | 'outline'\ntype VariantColors = Record<\n  VariantUnion,\n  {\n    backgroundColor: string\n    color: string\n  }\n>\n\n// =================================\n// ====== Component ================\n// =================================\n\nexport interface ButtonProps extends PressableProps {\n  /**\n   * Specifies whether fonts should be scaled down automatically to fit given style constraints.\n   */\n  adjustsFontSizeToFit?: boolean\n  /**\n   * Specifies whether fonts should scale to respect the device's text size accessibility settings. The default is true.\n   */\n  allowFontScaling?: boolean\n  /**\n   * Updates the button's colors\n   */\n  appearance?: ButtonAppearanceUnion\n  /**\n   * Styles the outer LinearGradient that gives the button its background and outline color\n   */\n  colorWrapperStyles?: ViewStyle\n  /**\n   * Styles the inner View that wraps the button's content\n   */\n  contentWrapperStyles?: ViewStyle\n  /**\n   * Generates an icon to the left of the button text\n   */\n  iconNameLeft?: IconString\n  /**\n   * Generates an icon to the right of the button text\n   */\n  iconNameRight?: IconString\n  /**\n   * Disables the button and replaces its content with a spinner\n   */\n  loading?: boolean\n  /**\n   * Specifies the maximum size a font can reach when allowFontScaling is enabled.\n   */\n  maxFontSizeMultiplier?: number\n  /**\n   * Specifies smallest possible scale a font can reach when adjustsFontSizeToFit is enabled. (values 0.01-1.0).\n   */\n  minimumFontScale?: number\n  /**\n   * Changes the overall size of the button and its contents\n   */\n  size?: SizeUnion\n  /**\n   * Renders as text within the button\n   */\n  title: string\n  /**\n   * Fill buttons are visually more propmonitent then outline buttons\n   */\n  variant?: VariantUnion\n}\n\nexport function Button({\n  adjustsFontSizeToFit = false,\n  allowFontScaling = true,\n  appearance = 'interaction',\n  contentWrapperStyles,\n  colorWrapperStyles,\n  disabled = false,\n  iconNameLeft,\n  iconNameRight,\n  loading,\n  maxFontSizeMultiplier,\n  minimumFontScale,\n  size = 'md',\n  title,\n  variant = 'fill',\n  style,\n  ...props\n}: ButtonProps) {\n  const styles = useStyles({ appearance, disabled, loading, maxFontSizeMultiplier, size, variant })\n  const gradientOptionsMap = useGradientColorMap()\n  const colorKey = getColorKey({ disabled, loading, appearance })\n\n  const overrideStyles = StyleSheet.flatten(style)\n  const textStyles = [styles.text, disabled && styles.textDisabled, loading && styles.iconLoading]\n  const iconStyles = [styles.icon, disabled && styles.iconDisabled, loading && styles.textLoading]\n\n  const androidRippleColor = useCreateAndroidRippleColor({ color: gradientOptionsMap[colorKey][0] })\n\n  return (\n    <Pressable\n      style={({ pressed }) => ({\n        ...styles.pressable,\n        ...(pressed && platformPressedOpacityStyle),\n        ...overrideStyles,\n      })}\n      accessibilityRole=\"button\"\n      disabled={disabled || loading}\n      accessibilityState={{ busy: loading }}\n      android_ripple={{ color: androidRippleColor, borderless: false, foreground: true }}\n      {...props}\n    >\n      <LinearGradient\n        start={{ x: 0.1, y: 0.1 }}\n        end={{ x: 0.9, y: 0.9 }}\n        colors={gradientOptionsMap[colorKey]}\n        style={[styles.colorWrapper, colorWrapperStyles]}\n      >\n        {loading && (\n          <Spinner\n            size={styles.spinnerSize.fontSize}\n            style={styles.spinner}\n            maxFontSizeMultiplier={maxFontSizeMultiplier || 0}\n          />\n        )}\n        <View style={[styles.innerWrapper, contentWrapperStyles]}>\n          {iconNameLeft && (\n            <Icon\n              name={iconNameLeft}\n              style={iconStyles}\n              maxFontSizeMultiplier={maxFontSizeMultiplier}\n            />\n          )}\n          <Text\n            allowFontScaling={allowFontScaling}\n            minimumFontScale={minimumFontScale}\n            maxFontSizeMultiplier={maxFontSizeMultiplier}\n            adjustsFontSizeToFit={adjustsFontSizeToFit}\n            numberOfLines={1}\n            style={textStyles}\n          >\n            {title}\n          </Text>\n          {iconNameRight && (\n            <Icon\n              name={iconNameRight}\n              style={iconStyles}\n              maxFontSizeMultiplier={maxFontSizeMultiplier}\n            />\n          )}\n        </View>\n      </LinearGradient>\n    </Pressable>\n  )\n}\n\n// =================================\n// ====== Styles ===================\n// =================================\n\nconst useStyles = ({\n  appearance = 'interaction',\n  disabled = false,\n  loading = false,\n  maxFontSizeMultiplier,\n  size = 'md',\n  variant = 'fill',\n}: Partial<ButtonProps>) => {\n  const { colors, button } = useTheme()\n  const fontScale = useFontScale({ maxFontSizeMultiplier })\n  const colorOptionMap = useButtonColorOptionMap()\n\n  const outlineHeightOffset = size === 'sm' ? 2 : 4\n  const outlineMarginOffset = size === 'sm' ? 1 : 2\n\n  const sizeStyleMap: SizeStyle = {\n    [SIZES.sm]: {\n      fontSize: 12,\n      paddingHorizontal: 12 * fontScale,\n      borderRadius: button.borderRadius * fontScale,\n      height: 24 * fontScale - outlineHeightOffset,\n      gap: 4 * fontScale,\n    },\n    [SIZES.md]: {\n      fontSize: 14,\n      paddingHorizontal: 16 * fontScale,\n      borderRadius: button.borderRadius * fontScale,\n      height: 32 * fontScale - outlineHeightOffset,\n      gap: 6 * fontScale,\n    },\n    [SIZES.lg]: {\n      fontSize: 16,\n      paddingHorizontal: 24 * fontScale,\n      borderRadius: button.borderRadius * fontScale,\n      height: 40 * fontScale - outlineHeightOffset,\n      gap: 8 * fontScale,\n    },\n  }\n\n  const variantOutlineColor =\n    disabled || loading ? colors.fillColorNeutral090 : colors.fillColorNeutral100Inverted\n\n  const variantStyleMap: VariantColors = {\n    fill: {\n      backgroundColor: 'transparent',\n      color: tokens.colorNeutral100White,\n    },\n    outline: {\n      backgroundColor: variantOutlineColor,\n      color: colorOptionMap[appearance],\n    },\n  }\n\n  return StyleSheet.create({\n    pressable: {\n      borderRadius: sizeStyleMap[size].borderRadius,\n      overflow: 'hidden',\n    },\n    colorWrapper: {\n      flexDirection: 'row',\n      justifyContent: 'center',\n      alignItems: 'center',\n      borderRadius: sizeStyleMap[size].borderRadius,\n    },\n    innerWrapper: {\n      flexDirection: 'row',\n      justifyContent: 'center',\n      alignItems: 'center',\n      margin: outlineMarginOffset,\n      gap: sizeStyleMap[size].gap,\n      borderRadius: sizeStyleMap[size].borderRadius - outlineMarginOffset,\n      height: sizeStyleMap[size].height,\n      backgroundColor: variantStyleMap[variant].backgroundColor,\n      paddingHorizontal: sizeStyleMap[size].paddingHorizontal,\n    },\n    text: {\n      textAlign: 'center',\n      textAlignVertical: 'center',\n      includeFontPadding: false,\n      fontWeight: platformFontWeightBold,\n      fontSize: sizeStyleMap[size].fontSize,\n      color: variantStyleMap[variant].color,\n    },\n    textDisabled: {\n      color: colors.textColorDefaultDisabled,\n    },\n    textLoading: {\n      opacity: 0,\n    },\n    icon: {\n      fontSize: sizeStyleMap[size].fontSize,\n      color: variantStyleMap[variant].color,\n    },\n    iconDisabled: {\n      color: colors.iconColorDefaultDisabled,\n    },\n    iconLoading: {\n      opacity: 0,\n    },\n    spinnerSize: {\n      fontSize: sizeStyleMap[size].fontSize,\n    },\n    spinner: {\n      width: '100%',\n      height: '100%',\n      position: 'absolute',\n      justifyContent: 'center',\n      alignItems: 'center',\n      zIndex: 2,\n    },\n  })\n}\n"]}

package/build/components/display/child_notice.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { type ViewStyle } from 'react-native';
 import { MemberResource } from '../../types';
 interface ChildNoticeProps {
@@ -5,6 +6,6 @@ interface ChildNoticeProps {
     showMembers?: boolean;
     style?: ViewStyle;
 }
-export declare function ChildNotice({ childMembers, showMembers, style }: ChildNoticeProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChildNotice({ childMembers, showMembers, style }: ChildNoticeProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=child_notice.d.ts.map

package/build/components/display/child_notice.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"child_notice.d.ts","sourceRoot":"","sources":["../../../src/components/display/child_notice.tsx"],"names":[],"mappings":"AACA,OAAO,EAAoB,KAAK,SAAS,EAAE,MAAM,cAAc,CAAA;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AAW5C,UAAU,gBAAgB;IACxB,YAAY,EAAE,cAAc,EAAE,CAAA;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB;AAED,wBAAgB,WAAW,CAAC,EAAE,YAAY,EAAE,WAAmB,EAAE,KAAK,EAAE,EAAE,gBAAgB,2CAqBzF"}
+{"version":3,"file":"child_notice.d.ts","sourceRoot":"","sources":["../../../src/components/display/child_notice.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAoB,KAAK,SAAS,EAAE,MAAM,cAAc,CAAA;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AAW5C,UAAU,gBAAgB;IACxB,YAAY,EAAE,cAAc,EAAE,CAAA;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB;AAED,wBAAgB,WAAW,CAAC,EAAE,YAAY,EAAE,WAAmB,EAAE,KAAK,EAAE,EAAE,gBAAgB,qBAqBzF"}

package/build/components/display/child_notice.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
 import { View, StyleSheet } from 'react-native';
 import { platformFontWeightMedium, pluralize } from '../../utils';
 import BannerPrimitive from '../primitive/banner_primitive';
@@ -8,11 +8,23 @@ import { Text } from './text';
 export function ChildNotice({ childMembers, showMembers = false, style }) {
     const styles = useStyles();
     const heading = `${pluralize(childMembers.length, 'member')} under age 13`;
-    return (_jsxs(BannerCollapsible, { appearance: "warning", iconName: "general.shieldExclamation", heading: heading, style: style, children: [_jsx(BannerPrimitive.Text, { children: "Under age members cannot chat. They won't see conversations or notifications." }), showMembers && (_jsx(View, { style: styles.childrenWrapper, children: childMembers?.map(child => _jsx(Child, { child: child }, child.id)) }))] }));
+    return (<BannerCollapsible appearance="warning" iconName="general.shieldExclamation" heading={heading} style={style}>
+      <BannerPrimitive.Text>
+        Under age members cannot chat. They won't see conversations or notifications.
+      </BannerPrimitive.Text>
+      {showMembers && (<View style={styles.childrenWrapper}>
+          {childMembers?.map(child => <Child key={child.id} child={child}/>)}
+        </View>)}
+    </BannerCollapsible>);
 }
 function Child({ child }) {
     const styles = useStyles();
-    return (_jsxs(View, { style: styles.child, children: [_jsx(Avatar, { sourceUri: child.avatar, size: "sm" }), _jsx(Text, { variant: "tertiary", style: styles.name, children: child.name })] }));
+    return (<View style={styles.child}>
+      <Avatar sourceUri={child.avatar} size="sm"/>
+      <Text variant="tertiary" style={styles.name}>
+        {child.name}
+      </Text>
+    </View>);
 }
 // =================================
 // ====== Styles ===================

package/build/components/display/child_notice.js.map

@@ -1 +1 @@
-{"version":3,"file":"child_notice.js","sourceRoot":"","sources":["../../../src/components/display/child_notice.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,cAAc,CAAA;AAE/D,OAAO,EAAE,wBAAwB,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACjE,OAAO,eAAe,MAAM,+BAA+B,CAAA;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AACxD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAY7B,MAAM,UAAU,WAAW,CAAC,EAAE,YAAY,EAAE,WAAW,GAAG,KAAK,EAAE,KAAK,EAAoB;IACxF,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,MAAM,OAAO,GAAG,GAAG,SAAS,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,eAAe,CAAA;IAE1E,OAAO,CACL,MAAC,iBAAiB,IAChB,UAAU,EAAC,SAAS,EACpB,QAAQ,EAAC,2BAA2B,EACpC,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,aAEZ,KAAC,eAAe,CAAC,IAAI,gGAEE,EACtB,WAAW,IAAI,CACd,KAAC,IAAI,IAAC,KAAK,EAAE,MAAM,CAAC,eAAe,YAChC,YAAY,EAAE,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,KAAC,KAAK,IAAgB,KAAK,EAAE,KAAK,IAAtB,KAAK,CAAC,EAAE,CAAkB,CAAC,GAC9D,CACR,IACiB,CACrB,CAAA;AACH,CAAC;AAED,SAAS,KAAK,CAAC,EAAE,KAAK,EAA6B;IACjD,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,OAAO,CACL,MAAC,IAAI,IAAC,KAAK,EAAE,MAAM,CAAC,KAAK,aACvB,KAAC,MAAM,IAAC,SAAS,EAAE,KAAK,CAAC,MAAM,EAAE,IAAI,EAAC,IAAI,GAAG,EAC7C,KAAC,IAAI,IAAC,OAAO,EAAC,UAAU,EAAC,KAAK,EAAE,MAAM,CAAC,IAAI,YACxC,KAAK,CAAC,IAAI,GACN,IACF,CACR,CAAA;AACH,CAAC;AAED,oCAAoC;AACpC,oCAAoC;AACpC,oCAAoC;AAEpC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,eAAe,EAAE;YACf,SAAS,EAAE,CAAC;YACZ,GAAG,EAAE,CAAC;SACP;QACD,KAAK,EAAE;YACL,aAAa,EAAE,KAAK;YACpB,UAAU,EAAE,QAAQ;YACpB,GAAG,EAAE,CAAC;SACP;QACD,IAAI,EAAE;YACJ,UAAU,EAAE,wBAAwB;SACrC;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import React from 'react'\nimport { View, StyleSheet, type ViewStyle } from 'react-native'\nimport { MemberResource } from '../../types'\nimport { platformFontWeightMedium, pluralize } from '../../utils'\nimport BannerPrimitive from '../primitive/banner_primitive'\nimport { Avatar } from './avatar'\nimport { BannerCollapsible } from './banner_collapsible'\nimport { Text } from './text'\n\n// =================================\n// ====== Component ================\n// =================================\n\ninterface ChildNoticeProps {\n  childMembers: MemberResource[]\n  showMembers?: boolean\n  style?: ViewStyle\n}\n\nexport function ChildNotice({ childMembers, showMembers = false, style }: ChildNoticeProps) {\n  const styles = useStyles()\n  const heading = `${pluralize(childMembers.length, 'member')} under age 13`\n\n  return (\n    <BannerCollapsible\n      appearance=\"warning\"\n      iconName=\"general.shieldExclamation\"\n      heading={heading}\n      style={style}\n    >\n      <BannerPrimitive.Text>\n        Under age members cannot chat. They won't see conversations or notifications.\n      </BannerPrimitive.Text>\n      {showMembers && (\n        <View style={styles.childrenWrapper}>\n          {childMembers?.map(child => <Child key={child.id} child={child} />)}\n        </View>\n      )}\n    </BannerCollapsible>\n  )\n}\n\nfunction Child({ child }: { child: MemberResource }) {\n  const styles = useStyles()\n  return (\n    <View style={styles.child}>\n      <Avatar sourceUri={child.avatar} size=\"sm\" />\n      <Text variant=\"tertiary\" style={styles.name}>\n        {child.name}\n      </Text>\n    </View>\n  )\n}\n\n// =================================\n// ====== Styles ===================\n// =================================\n\nconst useStyles = () => {\n  return StyleSheet.create({\n    childrenWrapper: {\n      marginTop: 8,\n      gap: 8,\n    },\n    child: {\n      flexDirection: 'row',\n      alignItems: 'center',\n      gap: 8,\n    },\n    name: {\n      fontWeight: platformFontWeightMedium,\n    },\n  })\n}\n"]}
+{"version":3,"file":"child_notice.js","sourceRoot":"","sources":["../../../src/components/display/child_notice.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,cAAc,CAAA;AAE/D,OAAO,EAAE,wBAAwB,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACjE,OAAO,eAAe,MAAM,+BAA+B,CAAA;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AACxD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAY7B,MAAM,UAAU,WAAW,CAAC,EAAE,YAAY,EAAE,WAAW,GAAG,KAAK,EAAE,KAAK,EAAoB;IACxF,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,MAAM,OAAO,GAAG,GAAG,SAAS,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,eAAe,CAAA;IAE1E,OAAO,CACL,CAAC,iBAAiB,CAChB,UAAU,CAAC,SAAS,CACpB,QAAQ,CAAC,2BAA2B,CACpC,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,KAAK,CAAC,CAAC,KAAK,CAAC,CAEb;MAAA,CAAC,eAAe,CAAC,IAAI,CACnB;;MACF,EAAE,eAAe,CAAC,IAAI,CACtB;MAAA,CAAC,WAAW,IAAI,CACd,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,eAAe,CAAC,CAClC;UAAA,CAAC,YAAY,EAAE,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,EAAG,CAAC,CACrE;QAAA,EAAE,IAAI,CAAC,CACR,CACH;IAAA,EAAE,iBAAiB,CAAC,CACrB,CAAA;AACH,CAAC;AAED,SAAS,KAAK,CAAC,EAAE,KAAK,EAA6B;IACjD,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CACxB;MAAA,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,IAAI,EAC1C;MAAA,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAC1C;QAAA,CAAC,KAAK,CAAC,IAAI,CACb;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC;AAED,oCAAoC;AACpC,oCAAoC;AACpC,oCAAoC;AAEpC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,eAAe,EAAE;YACf,SAAS,EAAE,CAAC;YACZ,GAAG,EAAE,CAAC;SACP;QACD,KAAK,EAAE;YACL,aAAa,EAAE,KAAK;YACpB,UAAU,EAAE,QAAQ;YACpB,GAAG,EAAE,CAAC;SACP;QACD,IAAI,EAAE;YACJ,UAAU,EAAE,wBAAwB;SACrC;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import React from 'react'\nimport { View, StyleSheet, type ViewStyle } from 'react-native'\nimport { MemberResource } from '../../types'\nimport { platformFontWeightMedium, pluralize } from '../../utils'\nimport BannerPrimitive from '../primitive/banner_primitive'\nimport { Avatar } from './avatar'\nimport { BannerCollapsible } from './banner_collapsible'\nimport { Text } from './text'\n\n// =================================\n// ====== Component ================\n// =================================\n\ninterface ChildNoticeProps {\n  childMembers: MemberResource[]\n  showMembers?: boolean\n  style?: ViewStyle\n}\n\nexport function ChildNotice({ childMembers, showMembers = false, style }: ChildNoticeProps) {\n  const styles = useStyles()\n  const heading = `${pluralize(childMembers.length, 'member')} under age 13`\n\n  return (\n    <BannerCollapsible\n      appearance=\"warning\"\n      iconName=\"general.shieldExclamation\"\n      heading={heading}\n      style={style}\n    >\n      <BannerPrimitive.Text>\n        Under age members cannot chat. They won't see conversations or notifications.\n      </BannerPrimitive.Text>\n      {showMembers && (\n        <View style={styles.childrenWrapper}>\n          {childMembers?.map(child => <Child key={child.id} child={child} />)}\n        </View>\n      )}\n    </BannerCollapsible>\n  )\n}\n\nfunction Child({ child }: { child: MemberResource }) {\n  const styles = useStyles()\n  return (\n    <View style={styles.child}>\n      <Avatar sourceUri={child.avatar} size=\"sm\" />\n      <Text variant=\"tertiary\" style={styles.name}>\n        {child.name}\n      </Text>\n    </View>\n  )\n}\n\n// =================================\n// ====== Styles ===================\n// =================================\n\nconst useStyles = () => {\n  return StyleSheet.create({\n    childrenWrapper: {\n      marginTop: 8,\n      gap: 8,\n    },\n    child: {\n      flexDirection: 'row',\n      alignItems: 'center',\n      gap: 8,\n    },\n    name: {\n      fontWeight: platformFontWeightMedium,\n    },\n  })\n}\n"]}

package/build/components/display/conversation_avatar.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { ViewStyle } from 'react-native';
 import type { ConversationResource } from '../../types';
 import { type AvatarRootProps } from '../primitive/avatar_primitive';
@@ -11,6 +12,6 @@ interface ConversationAvatarProps {
     style?: ViewStyle;
     maxFontSizeMultiplier?: AvatarRootProps['maxFontSizeMultiplier'];
 }
-export declare function ConversationAvatar({ conversation, size, showFallback, fallbackIconName, style, maxFontSizeMultiplier, }: ConversationAvatarProps): import("react/jsx-runtime").JSX.Element;
+export declare function ConversationAvatar({ conversation, size, showFallback, fallbackIconName, style, maxFontSizeMultiplier, }: ConversationAvatarProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=conversation_avatar.d.ts.map

package/build/components/display/conversation_avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"conversation_avatar.d.ts","sourceRoot":"","sources":["../../../src/components/display/conversation_avatar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAC7C,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAA;AACvD,OAAwB,EAAE,KAAK,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAGrF,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,QAAQ,CAAA;AAGxC,KAAK,sBAAsB,GAAG,IAAI,CAChC,oBAAoB,EAClB,kBAAkB,GAClB,iBAAiB,GACjB,mBAAmB,GACnB,sBAAsB,GACtB,mBAAmB,CACtB,CAAA;AAgCD,UAAU,uBAAuB;IAC/B,YAAY,EAAE,sBAAsB,CAAA;IACpC,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAA;IAC9B,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,gBAAgB,CAAC,EAAE,UAAU,CAAA;IAC7B,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,qBAAqB,CAAC,EAAE,eAAe,CAAC,uBAAuB,CAAC,CAAA;CACjE;AAED,wBAAgB,kBAAkB,CAAC,EACjC,YAAY,EACZ,IAAW,EACX,YAAoB,EACpB,gBAAmC,EACnC,KAAK,EACL,qBAAqB,GACtB,EAAE,uBAAuB,2CA2BzB"}
+{"version":3,"file":"conversation_avatar.d.ts","sourceRoot":"","sources":["../../../src/components/display/conversation_avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAC7C,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAA;AACvD,OAAwB,EAAE,KAAK,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAGrF,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,QAAQ,CAAA;AAGxC,KAAK,sBAAsB,GAAG,IAAI,CAChC,oBAAoB,EAClB,kBAAkB,GAClB,iBAAiB,GACjB,mBAAmB,GACnB,sBAAsB,GACtB,mBAAmB,CACtB,CAAA;AAgCD,UAAU,uBAAuB;IAC/B,YAAY,EAAE,sBAAsB,CAAA;IACpC,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAA;IAC9B,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,gBAAgB,CAAC,EAAE,UAAU,CAAA;IAC7B,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,qBAAqB,CAAC,EAAE,eAAe,CAAC,uBAAuB,CAAC,CAAA;CACjE;AAED,wBAAgB,kBAAkB,CAAC,EACjC,YAAY,EACZ,IAAW,EACX,YAAoB,EACpB,gBAAmC,EACnC,KAAK,EACL,qBAAqB,GACtB,EAAE,uBAAuB,qBA2BzB"}

package/build/components/display/conversation_avatar.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
 import AvatarPrimitive from '../primitive/avatar_primitive';
 import { AvatarGroup } from './avatar_group';
 import { EmojiAvatar } from './emoji_avatar';
@@ -28,13 +28,17 @@ export function ConversationAvatar({ conversation, size = 'lg', showFallback = f
     const sizeProps = { size, maxFontSizeMultiplier, style };
     switch (avatar.kind) {
         case 'image':
-            return (_jsx(AvatarPrimitive.Root, { ...sizeProps, children: _jsx(AvatarPrimitive.Mask, { children: _jsx(AvatarPrimitive.Image, { sourceUri: avatar.url }) }) }));
+            return (<AvatarPrimitive.Root {...sizeProps}>
+          <AvatarPrimitive.Mask>
+            <AvatarPrimitive.Image sourceUri={avatar.url}/>
+          </AvatarPrimitive.Mask>
+        </AvatarPrimitive.Root>);
         case 'icon':
-            return _jsx(IconAvatar, { iconKey: avatar.iconKey, color: avatar.color, ...sizeProps });
+            return <IconAvatar iconKey={avatar.iconKey} color={avatar.color} {...sizeProps}/>;
         case 'emoji':
-            return _jsx(EmojiAvatar, { emoji: avatar.emoji, color: avatar.color, ...sizeProps });
+            return <EmojiAvatar emoji={avatar.emoji} color={avatar.color} {...sizeProps}/>;
         case 'group':
-            return (_jsx(AvatarGroup, { sourceUris: avatar.sources || [], showFallback: showFallback || !avatar.sources || avatar.sources.length === 0, fallbackIconName: fallbackIconName, ...sizeProps }));
+            return (<AvatarGroup sourceUris={avatar.sources || []} showFallback={showFallback || !avatar.sources || avatar.sources.length === 0} fallbackIconName={fallbackIconName} {...sizeProps}/>);
     }
 }
 //# sourceMappingURL=conversation_avatar.js.map

package/build/components/display/conversation_avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"conversation_avatar.js","sourceRoot":"","sources":["../../../src/components/display/conversation_avatar.tsx"],"names":[],"mappings":";AAGA,OAAO,eAAyC,MAAM,+BAA+B,CAAA;AACrF,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAE5C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAiB1C,SAAS,aAAa,CAAC,YAAoC;IACzD,IAAI,YAAY,CAAC,gBAAgB,KAAK,OAAO,IAAI,YAAY,CAAC,oBAAoB,EAAE,CAAC;QACnF,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,YAAY,CAAC,oBAAoB,EAAE,CAAA;IAClE,CAAC;IAED,IAAI,YAAY,CAAC,gBAAgB,KAAK,MAAM,IAAI,YAAY,CAAC,eAAe,EAAE,CAAC;QAC7E,OAAO;YACL,IAAI,EAAE,MAAM;YACZ,OAAO,EAAE,YAAY,CAAC,eAAe;YACrC,KAAK,EAAE,YAAY,CAAC,iBAAiB,IAAI,IAAI;SAC9C,CAAA;IACH,CAAC;IAED,IAAI,YAAY,CAAC,gBAAgB,KAAK,OAAO,IAAI,YAAY,CAAC,eAAe,EAAE,CAAC;QAC9E,OAAO;YACL,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,YAAY,CAAC,eAAe;YACnC,KAAK,EAAE,YAAY,CAAC,iBAAiB,IAAI,IAAI;SAC9C,CAAA;IACH,CAAC;IAED,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,YAAY,CAAC,iBAAiB,EAAE,CAAA;AACnE,CAAC;AAWD,MAAM,UAAU,kBAAkB,CAAC,EACjC,YAAY,EACZ,IAAI,GAAG,IAAI,EACX,YAAY,GAAG,KAAK,EACpB,gBAAgB,GAAG,gBAAgB,EACnC,KAAK,EACL,qBAAqB,GACG;IACxB,MAAM,MAAM,GAAG,aAAa,CAAC,YAAY,CAAC,CAAA;IAC1C,MAAM,SAAS,GAAG,EAAE,IAAI,EAAE,qBAAqB,EAAE,KAAK,EAAE,CAAA;IAExD,QAAQ,MAAM,CAAC,IAAI,EAAE,CAAC;QACpB,KAAK,OAAO;YACV,OAAO,CACL,KAAC,eAAe,CAAC,IAAI,OAAK,SAAS,YACjC,KAAC,eAAe,CAAC,IAAI,cACnB,KAAC,eAAe,CAAC,KAAK,IAAC,SAAS,EAAE,MAAM,CAAC,GAAG,GAAI,GAC3B,GACF,CACxB,CAAA;QACH,KAAK,MAAM;YACT,OAAO,KAAC,UAAU,IAAC,OAAO,EAAE,MAAM,CAAC,OAAO,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,KAAM,SAAS,GAAI,CAAA;QACpF,KAAK,OAAO;YACV,OAAO,KAAC,WAAW,IAAC,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,KAAM,SAAS,GAAI,CAAA;QACjF,KAAK,OAAO;YACV,OAAO,CACL,KAAC,WAAW,IACV,UAAU,EAAE,MAAM,CAAC,OAAO,IAAI,EAAE,EAChC,YAAY,EAAE,YAAY,IAAI,CAAC,MAAM,CAAC,OAAO,IAAI,MAAM,CAAC,OAAO,CAAC,MAAM,KAAK,CAAC,EAC5E,gBAAgB,EAAE,gBAAgB,KAC9B,SAAS,GACb,CACH,CAAA;IACL,CAAC;AACH,CAAC","sourcesContent":["import React from 'react'\nimport type { ViewStyle } from 'react-native'\nimport type { ConversationResource } from '../../types'\nimport AvatarPrimitive, { type AvatarRootProps } from '../primitive/avatar_primitive'\nimport { AvatarGroup } from './avatar_group'\nimport { EmojiAvatar } from './emoji_avatar'\nimport { type IconString } from './icon'\nimport { IconAvatar } from './icon_avatar'\n\ntype ConversationAvatarData = Pick<\n  ConversationResource,\n  | 'customAvatarType'\n  | 'customAvatarKey'\n  | 'customAvatarColor'\n  | 'customAvatarImageUrl'\n  | 'previewAvatarUrls'\n>\n\ntype ResolvedAvatar =\n  | { kind: 'image'; url: string }\n  | { kind: 'icon'; iconKey: string; color: string | null }\n  | { kind: 'emoji'; emoji: string; color: string | null }\n  | { kind: 'group'; sources: string[] | undefined }\n\nfunction resolveAvatar(conversation: ConversationAvatarData): ResolvedAvatar {\n  if (conversation.customAvatarType === 'image' && conversation.customAvatarImageUrl) {\n    return { kind: 'image', url: conversation.customAvatarImageUrl }\n  }\n\n  if (conversation.customAvatarType === 'icon' && conversation.customAvatarKey) {\n    return {\n      kind: 'icon',\n      iconKey: conversation.customAvatarKey,\n      color: conversation.customAvatarColor ?? null,\n    }\n  }\n\n  if (conversation.customAvatarType === 'emoji' && conversation.customAvatarKey) {\n    return {\n      kind: 'emoji',\n      emoji: conversation.customAvatarKey,\n      color: conversation.customAvatarColor ?? null,\n    }\n  }\n\n  return { kind: 'group', sources: conversation.previewAvatarUrls }\n}\n\ninterface ConversationAvatarProps {\n  conversation: ConversationAvatarData\n  size?: AvatarRootProps['size']\n  showFallback?: boolean\n  fallbackIconName?: IconString\n  style?: ViewStyle\n  maxFontSizeMultiplier?: AvatarRootProps['maxFontSizeMultiplier']\n}\n\nexport function ConversationAvatar({\n  conversation,\n  size = 'lg',\n  showFallback = false,\n  fallbackIconName = 'general.person',\n  style,\n  maxFontSizeMultiplier,\n}: ConversationAvatarProps) {\n  const avatar = resolveAvatar(conversation)\n  const sizeProps = { size, maxFontSizeMultiplier, style }\n\n  switch (avatar.kind) {\n    case 'image':\n      return (\n        <AvatarPrimitive.Root {...sizeProps}>\n          <AvatarPrimitive.Mask>\n            <AvatarPrimitive.Image sourceUri={avatar.url} />\n          </AvatarPrimitive.Mask>\n        </AvatarPrimitive.Root>\n      )\n    case 'icon':\n      return <IconAvatar iconKey={avatar.iconKey} color={avatar.color} {...sizeProps} />\n    case 'emoji':\n      return <EmojiAvatar emoji={avatar.emoji} color={avatar.color} {...sizeProps} />\n    case 'group':\n      return (\n        <AvatarGroup\n          sourceUris={avatar.sources || []}\n          showFallback={showFallback || !avatar.sources || avatar.sources.length === 0}\n          fallbackIconName={fallbackIconName}\n          {...sizeProps}\n        />\n      )\n  }\n}\n"]}
+{"version":3,"file":"conversation_avatar.js","sourceRoot":"","sources":["../../../src/components/display/conversation_avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,eAAyC,MAAM,+BAA+B,CAAA;AACrF,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAE5C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAiB1C,SAAS,aAAa,CAAC,YAAoC;IACzD,IAAI,YAAY,CAAC,gBAAgB,KAAK,OAAO,IAAI,YAAY,CAAC,oBAAoB,EAAE,CAAC;QACnF,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,YAAY,CAAC,oBAAoB,EAAE,CAAA;IAClE,CAAC;IAED,IAAI,YAAY,CAAC,gBAAgB,KAAK,MAAM,IAAI,YAAY,CAAC,eAAe,EAAE,CAAC;QAC7E,OAAO;YACL,IAAI,EAAE,MAAM;YACZ,OAAO,EAAE,YAAY,CAAC,eAAe;YACrC,KAAK,EAAE,YAAY,CAAC,iBAAiB,IAAI,IAAI;SAC9C,CAAA;IACH,CAAC;IAED,IAAI,YAAY,CAAC,gBAAgB,KAAK,OAAO,IAAI,YAAY,CAAC,eAAe,EAAE,CAAC;QAC9E,OAAO;YACL,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,YAAY,CAAC,eAAe;YACnC,KAAK,EAAE,YAAY,CAAC,iBAAiB,IAAI,IAAI;SAC9C,CAAA;IACH,CAAC;IAED,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,YAAY,CAAC,iBAAiB,EAAE,CAAA;AACnE,CAAC;AAWD,MAAM,UAAU,kBAAkB,CAAC,EACjC,YAAY,EACZ,IAAI,GAAG,IAAI,EACX,YAAY,GAAG,KAAK,EACpB,gBAAgB,GAAG,gBAAgB,EACnC,KAAK,EACL,qBAAqB,GACG;IACxB,MAAM,MAAM,GAAG,aAAa,CAAC,YAAY,CAAC,CAAA;IAC1C,MAAM,SAAS,GAAG,EAAE,IAAI,EAAE,qBAAqB,EAAE,KAAK,EAAE,CAAA;IAExD,QAAQ,MAAM,CAAC,IAAI,EAAE,CAAC;QACpB,KAAK,OAAO;YACV,OAAO,CACL,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,SAAS,CAAC,CAClC;UAAA,CAAC,eAAe,CAAC,IAAI,CACnB;YAAA,CAAC,eAAe,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,EAC/C;UAAA,EAAE,eAAe,CAAC,IAAI,CACxB;QAAA,EAAE,eAAe,CAAC,IAAI,CAAC,CACxB,CAAA;QACH,KAAK,MAAM;YACT,OAAO,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,IAAI,SAAS,CAAC,EAAG,CAAA;QACpF,KAAK,OAAO;YACV,OAAO,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,IAAI,SAAS,CAAC,EAAG,CAAA;QACjF,KAAK,OAAO;YACV,OAAO,CACL,CAAC,WAAW,CACV,UAAU,CAAC,CAAC,MAAM,CAAC,OAAO,IAAI,EAAE,CAAC,CACjC,YAAY,CAAC,CAAC,YAAY,IAAI,CAAC,MAAM,CAAC,OAAO,IAAI,MAAM,CAAC,OAAO,CAAC,MAAM,KAAK,CAAC,CAAC,CAC7E,gBAAgB,CAAC,CAAC,gBAAgB,CAAC,CACnC,IAAI,SAAS,CAAC,EACd,CACH,CAAA;IACL,CAAC;AACH,CAAC","sourcesContent":["import React from 'react'\nimport type { ViewStyle } from 'react-native'\nimport type { ConversationResource } from '../../types'\nimport AvatarPrimitive, { type AvatarRootProps } from '../primitive/avatar_primitive'\nimport { AvatarGroup } from './avatar_group'\nimport { EmojiAvatar } from './emoji_avatar'\nimport { type IconString } from './icon'\nimport { IconAvatar } from './icon_avatar'\n\ntype ConversationAvatarData = Pick<\n  ConversationResource,\n  | 'customAvatarType'\n  | 'customAvatarKey'\n  | 'customAvatarColor'\n  | 'customAvatarImageUrl'\n  | 'previewAvatarUrls'\n>\n\ntype ResolvedAvatar =\n  | { kind: 'image'; url: string }\n  | { kind: 'icon'; iconKey: string; color: string | null }\n  | { kind: 'emoji'; emoji: string; color: string | null }\n  | { kind: 'group'; sources: string[] | undefined }\n\nfunction resolveAvatar(conversation: ConversationAvatarData): ResolvedAvatar {\n  if (conversation.customAvatarType === 'image' && conversation.customAvatarImageUrl) {\n    return { kind: 'image', url: conversation.customAvatarImageUrl }\n  }\n\n  if (conversation.customAvatarType === 'icon' && conversation.customAvatarKey) {\n    return {\n      kind: 'icon',\n      iconKey: conversation.customAvatarKey,\n      color: conversation.customAvatarColor ?? null,\n    }\n  }\n\n  if (conversation.customAvatarType === 'emoji' && conversation.customAvatarKey) {\n    return {\n      kind: 'emoji',\n      emoji: conversation.customAvatarKey,\n      color: conversation.customAvatarColor ?? null,\n    }\n  }\n\n  return { kind: 'group', sources: conversation.previewAvatarUrls }\n}\n\ninterface ConversationAvatarProps {\n  conversation: ConversationAvatarData\n  size?: AvatarRootProps['size']\n  showFallback?: boolean\n  fallbackIconName?: IconString\n  style?: ViewStyle\n  maxFontSizeMultiplier?: AvatarRootProps['maxFontSizeMultiplier']\n}\n\nexport function ConversationAvatar({\n  conversation,\n  size = 'lg',\n  showFallback = false,\n  fallbackIconName = 'general.person',\n  style,\n  maxFontSizeMultiplier,\n}: ConversationAvatarProps) {\n  const avatar = resolveAvatar(conversation)\n  const sizeProps = { size, maxFontSizeMultiplier, style }\n\n  switch (avatar.kind) {\n    case 'image':\n      return (\n        <AvatarPrimitive.Root {...sizeProps}>\n          <AvatarPrimitive.Mask>\n            <AvatarPrimitive.Image sourceUri={avatar.url} />\n          </AvatarPrimitive.Mask>\n        </AvatarPrimitive.Root>\n      )\n    case 'icon':\n      return <IconAvatar iconKey={avatar.iconKey} color={avatar.color} {...sizeProps} />\n    case 'emoji':\n      return <EmojiAvatar emoji={avatar.emoji} color={avatar.color} {...sizeProps} />\n    case 'group':\n      return (\n        <AvatarGroup\n          sourceUris={avatar.sources || []}\n          showFallback={showFallback || !avatar.sources || avatar.sources.length === 0}\n          fallbackIconName={fallbackIconName}\n          {...sizeProps}\n        />\n      )\n  }\n}\n"]}

package/build/components/display/emoji_avatar.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { type AvatarRootProps } from '../primitive/avatar_primitive';
 interface EmojiAvatarProps {
     emoji: string;
@@ -6,6 +7,6 @@ interface EmojiAvatarProps {
     maxFontSizeMultiplier?: AvatarRootProps['maxFontSizeMultiplier'];
     style?: AvatarRootProps['style'];
 }
-export declare function EmojiAvatar({ emoji, color, size, maxFontSizeMultiplier, style, }: EmojiAvatarProps): import("react/jsx-runtime").JSX.Element;
+export declare function EmojiAvatar({ emoji, color, size, maxFontSizeMultiplier, style, }: EmojiAvatarProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=emoji_avatar.d.ts.map

package/build/components/display/emoji_avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"emoji_avatar.d.ts","sourceRoot":"","sources":["../../../src/components/display/emoji_avatar.tsx"],"names":[],"mappings":"AAGA,OAAwB,EACtB,KAAK,eAAe,EAErB,MAAM,+BAA+B,CAAA;AAYtC,UAAU,gBAAgB;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAA;IAC9B,qBAAqB,CAAC,EAAE,eAAe,CAAC,uBAAuB,CAAC,CAAA;IAChE,KAAK,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC,CAAA;CACjC;AAED,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,KAAK,EACL,IAAW,EACX,qBAAqB,EACrB,KAAK,GACN,EAAE,gBAAgB,2CAgBlB"}
+{"version":3,"file":"emoji_avatar.d.ts","sourceRoot":"","sources":["../../../src/components/display/emoji_avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAwB,EACtB,KAAK,eAAe,EAErB,MAAM,+BAA+B,CAAA;AAYtC,UAAU,gBAAgB;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAA;IAC9B,qBAAqB,CAAC,EAAE,eAAe,CAAC,uBAAuB,CAAC,CAAA;IAChE,KAAK,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC,CAAA;CACjC;AAED,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,KAAK,EACL,IAAW,EACX,qBAAqB,EACrB,KAAK,GACN,EAAE,gBAAgB,qBAgBlB"}

package/build/components/display/emoji_avatar.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import AvatarPrimitive from '../primitive/avatar_primitive';
@@ -13,7 +13,17 @@ const EMOJI_SIZE = {
 };
 export function EmojiAvatar({ emoji, color, size = 'lg', maxFontSizeMultiplier, style, }) {
     const gradientProps = getAvatarGradientProps(color);
-    return (_jsx(AvatarPrimitive.Root, { size: size, maxFontSizeMultiplier: maxFontSizeMultiplier, style: style, children: _jsx(AvatarPrimitive.Mask, { children: _jsx(LinearGradient, { ...gradientProps, style: styles.gradientFill, children: _jsx(View, { style: styles.contentContainer, children: _jsx(Text, { allowFontScaling: false, style: { fontSize: EMOJI_SIZE[size] }, children: emoji }) }) }) }) }));
+    return (<AvatarPrimitive.Root size={size} maxFontSizeMultiplier={maxFontSizeMultiplier} style={style}>
+      <AvatarPrimitive.Mask>
+        <LinearGradient {...gradientProps} style={styles.gradientFill}>
+          <View style={styles.contentContainer}>
+            <Text allowFontScaling={false} style={{ fontSize: EMOJI_SIZE[size] }}>
+              {emoji}
+            </Text>
+          </View>
+        </LinearGradient>
+      </AvatarPrimitive.Mask>
+    </AvatarPrimitive.Root>);
 }
 const styles = StyleSheet.create({
     gradientFill: {

package/build/components/display/emoji_avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"emoji_avatar.js","sourceRoot":"","sources":["../../../src/components/display/emoji_avatar.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACrD,OAAO,cAAc,MAAM,8BAA8B,CAAA;AACzD,OAAO,eAGN,MAAM,+BAA+B,CAAA;AACtC,OAAO,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAA;AAEvE,MAAM,UAAU,GAA+B;IAC7C,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;IACN,KAAK,EAAE,EAAE;CACV,CAAA;AAUD,MAAM,UAAU,WAAW,CAAC,EAC1B,KAAK,EACL,KAAK,EACL,IAAI,GAAG,IAAI,EACX,qBAAqB,EACrB,KAAK,GACY;IACjB,MAAM,aAAa,GAAG,sBAAsB,CAAC,KAAK,CAAC,CAAA;IAEnD,OAAO,CACL,KAAC,eAAe,CAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,KAAK,EAAE,KAAK,YAC1F,KAAC,eAAe,CAAC,IAAI,cACnB,KAAC,cAAc,OAAK,aAAa,EAAE,KAAK,EAAE,MAAM,CAAC,YAAY,YAC3D,KAAC,IAAI,IAAC,KAAK,EAAE,MAAM,CAAC,gBAAgB,YAClC,KAAC,IAAI,IAAC,gBAAgB,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,CAAC,IAAI,CAAC,EAAE,YACjE,KAAK,GACD,GACF,GACQ,GACI,GACF,CACxB,CAAA;AACH,CAAC;AAED,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,YAAY,EAAE;QACZ,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;KACf;IACD,gBAAgB,EAAE;QAChB,IAAI,EAAE,CAAC;QACP,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;KACzB;CACF,CAAC,CAAA","sourcesContent":["import React from 'react'\nimport { StyleSheet, Text, View } from 'react-native'\nimport LinearGradient from 'react-native-linear-gradient'\nimport AvatarPrimitive, {\n  type AvatarRootProps,\n  type AvatarSize,\n} from '../primitive/avatar_primitive'\nimport { getAvatarGradientProps } from './utils/avatar_gradient_colors'\n\nconst EMOJI_SIZE: Record<AvatarSize, number> = {\n  xs: 8,\n  sm: 10,\n  md: 14,\n  lg: 20,\n  xl: 28,\n  '2xl': 40,\n}\n\ninterface EmojiAvatarProps {\n  emoji: string\n  color?: string | null\n  size?: AvatarRootProps['size']\n  maxFontSizeMultiplier?: AvatarRootProps['maxFontSizeMultiplier']\n  style?: AvatarRootProps['style']\n}\n\nexport function EmojiAvatar({\n  emoji,\n  color,\n  size = 'lg',\n  maxFontSizeMultiplier,\n  style,\n}: EmojiAvatarProps) {\n  const gradientProps = getAvatarGradientProps(color)\n\n  return (\n    <AvatarPrimitive.Root size={size} maxFontSizeMultiplier={maxFontSizeMultiplier} style={style}>\n      <AvatarPrimitive.Mask>\n        <LinearGradient {...gradientProps} style={styles.gradientFill}>\n          <View style={styles.contentContainer}>\n            <Text allowFontScaling={false} style={{ fontSize: EMOJI_SIZE[size] }}>\n              {emoji}\n            </Text>\n          </View>\n        </LinearGradient>\n      </AvatarPrimitive.Mask>\n    </AvatarPrimitive.Root>\n  )\n}\n\nconst styles = StyleSheet.create({\n  gradientFill: {\n    width: '100%',\n    height: '100%',\n  },\n  contentContainer: {\n    flex: 1,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n})\n"]}
+{"version":3,"file":"emoji_avatar.js","sourceRoot":"","sources":["../../../src/components/display/emoji_avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACrD,OAAO,cAAc,MAAM,8BAA8B,CAAA;AACzD,OAAO,eAGN,MAAM,+BAA+B,CAAA;AACtC,OAAO,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAA;AAEvE,MAAM,UAAU,GAA+B;IAC7C,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;IACN,KAAK,EAAE,EAAE;CACV,CAAA;AAUD,MAAM,UAAU,WAAW,CAAC,EAC1B,KAAK,EACL,KAAK,EACL,IAAI,GAAG,IAAI,EACX,qBAAqB,EACrB,KAAK,GACY;IACjB,MAAM,aAAa,GAAG,sBAAsB,CAAC,KAAK,CAAC,CAAA;IAEnD,OAAO,CACL,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,qBAAqB,CAAC,CAAC,qBAAqB,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAC3F;MAAA,CAAC,eAAe,CAAC,IAAI,CACnB;QAAA,CAAC,cAAc,CAAC,IAAI,aAAa,CAAC,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,CAC5D;UAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CACnC;YAAA,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,QAAQ,EAAE,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,CACnE;cAAA,CAAC,KAAK,CACR;YAAA,EAAE,IAAI,CACR;UAAA,EAAE,IAAI,CACR;QAAA,EAAE,cAAc,CAClB;MAAA,EAAE,eAAe,CAAC,IAAI,CACxB;IAAA,EAAE,eAAe,CAAC,IAAI,CAAC,CACxB,CAAA;AACH,CAAC;AAED,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,YAAY,EAAE;QACZ,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;KACf;IACD,gBAAgB,EAAE;QAChB,IAAI,EAAE,CAAC;QACP,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;KACzB;CACF,CAAC,CAAA","sourcesContent":["import React from 'react'\nimport { StyleSheet, Text, View } from 'react-native'\nimport LinearGradient from 'react-native-linear-gradient'\nimport AvatarPrimitive, {\n  type AvatarRootProps,\n  type AvatarSize,\n} from '../primitive/avatar_primitive'\nimport { getAvatarGradientProps } from './utils/avatar_gradient_colors'\n\nconst EMOJI_SIZE: Record<AvatarSize, number> = {\n  xs: 8,\n  sm: 10,\n  md: 14,\n  lg: 20,\n  xl: 28,\n  '2xl': 40,\n}\n\ninterface EmojiAvatarProps {\n  emoji: string\n  color?: string | null\n  size?: AvatarRootProps['size']\n  maxFontSizeMultiplier?: AvatarRootProps['maxFontSizeMultiplier']\n  style?: AvatarRootProps['style']\n}\n\nexport function EmojiAvatar({\n  emoji,\n  color,\n  size = 'lg',\n  maxFontSizeMultiplier,\n  style,\n}: EmojiAvatarProps) {\n  const gradientProps = getAvatarGradientProps(color)\n\n  return (\n    <AvatarPrimitive.Root size={size} maxFontSizeMultiplier={maxFontSizeMultiplier} style={style}>\n      <AvatarPrimitive.Mask>\n        <LinearGradient {...gradientProps} style={styles.gradientFill}>\n          <View style={styles.contentContainer}>\n            <Text allowFontScaling={false} style={{ fontSize: EMOJI_SIZE[size] }}>\n              {emoji}\n            </Text>\n          </View>\n        </LinearGradient>\n      </AvatarPrimitive.Mask>\n    </AvatarPrimitive.Root>\n  )\n}\n\nconst styles = StyleSheet.create({\n  gradientFill: {\n    width: '100%',\n    height: '100%',\n  },\n  contentContainer: {\n    flex: 1,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n})\n"]}

package/build/components/display/file_attachment_preview.d.ts

@@ -6,6 +6,6 @@ interface FileAttachmentPreviewProps {
     error?: boolean;
     hideRemoveButton?: boolean;
 }
-export declare const FileAttachmentPreview: ({ name, contentType, onRemovePress, loading, error, hideRemoveButton, }: FileAttachmentPreviewProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FileAttachmentPreview: ({ name, contentType, onRemovePress, loading, error, hideRemoveButton, }: FileAttachmentPreviewProps) => import("react").JSX.Element;
 export {};
 //# sourceMappingURL=file_attachment_preview.d.ts.map

package/build/components/display/file_attachment_preview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"file_attachment_preview.d.ts","sourceRoot":"","sources":["../../../src/components/display/file_attachment_preview.tsx"],"names":[],"mappings":"AAUA,UAAU,0BAA0B;IAClC,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,aAAa,EAAE,MAAM,IAAI,CAAA;IACzB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,gBAAgB,CAAC,EAAE,OAAO,CAAA;CAC3B;AAED,eAAO,MAAM,qBAAqB,GAAI,yEAOnC,0BAA0B,4CA2C5B,CAAA"}
+{"version":3,"file":"file_attachment_preview.d.ts","sourceRoot":"","sources":["../../../src/components/display/file_attachment_preview.tsx"],"names":[],"mappings":"AAUA,UAAU,0BAA0B;IAClC,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,aAAa,EAAE,MAAM,IAAI,CAAA;IACzB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,gBAAgB,CAAC,EAAE,OAAO,CAAA;CAC3B;AAED,eAAO,MAAM,qBAAqB,GAAI,yEAOnC,0BAA0B,gCA2C5B,CAAA"}

package/build/components/display/file_attachment_preview.js

@@ -1,4 +1,3 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { View, StyleSheet } from 'react-native';
 import { useTheme } from '../../hooks';
 import { platformFontWeightMedium } from '../../utils';
@@ -11,9 +10,24 @@ import { Text } from './text';
 export const FileAttachmentPreview = ({ name, contentType, onRemovePress, loading = false, error = false, hideRemoveButton = false, }) => {
     const styles = useStyles({ error });
     if (loading) {
-        return (_jsx(View, { style: styles.container, children: _jsx(Spinner, { size: 20, style: styles.spinner }) }));
+        return (<View style={styles.container}>
+        <Spinner size={20} style={styles.spinner}/>
+      </View>);
     }
-    return (_jsxs(View, { style: styles.container, children: [_jsxs(View, { style: styles.contentContainer, children: [_jsx(Icon, { name: getAttachmentIconName(contentType), size: 18, style: styles.fileIcon }), _jsx(View, { style: styles.textContainer, children: _jsx(Text, { variant: "tertiary", numberOfLines: 1, style: styles.nameText, accessibilityLabel: `File attachment: ${name}`, children: name }) })] }), !hideRemoveButton && (_jsx(IconButton, { name: "general.x", onPress: onRemovePress, size: "xxs", appearance: "neutral", style: styles.closeButton, accessibilityLabel: "Remove file attachment" })), error && (_jsx(View, { style: styles.errorBadge, children: _jsx(Icon, { name: "general.exclamationTriangle", size: 12, style: styles.errorIcon }) }))] }));
+    return (<View style={styles.container}>
+      <View style={styles.contentContainer}>
+        <Icon name={getAttachmentIconName(contentType)} size={18} style={styles.fileIcon}/>
+        <View style={styles.textContainer}>
+          <Text variant="tertiary" numberOfLines={1} style={styles.nameText} accessibilityLabel={`File attachment: ${name}`}>
+            {name}
+          </Text>
+        </View>
+      </View>
+      {!hideRemoveButton && (<IconButton name="general.x" onPress={onRemovePress} size="xxs" appearance="neutral" style={styles.closeButton} accessibilityLabel="Remove file attachment"/>)}
+      {error && (<View style={styles.errorBadge}>
+          <Icon name="general.exclamationTriangle" size={12} style={styles.errorIcon}/>
+        </View>)}
+    </View>);
 };
 const useStyles = ({ error }) => {
     const { colors } = useTheme();

package/build/components/display/file_attachment_preview.js.map

@@ -1 +1 @@
-{"version":3,"file":"file_attachment_preview.js","sourceRoot":"","sources":["../../../src/components/display/file_attachment_preview.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,OAAO,EAAE,wBAAwB,EAAE,MAAM,aAAa,CAAA;AACtD,OAAO,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAA;AACnE,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAA;AACrD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAW7B,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,EACpC,IAAI,EACJ,WAAW,EACX,aAAa,EACb,OAAO,GAAG,KAAK,EACf,KAAK,GAAG,KAAK,EACb,gBAAgB,GAAG,KAAK,GACG,EAAE,EAAE;IAC/B,MAAM,MAAM,GAAG,SAAS,CAAC,EAAE,KAAK,EAAE,CAAC,CAAA;IAEnC,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO,CACL,KAAC,IAAI,IAAC,KAAK,EAAE,MAAM,CAAC,SAAS,YAC3B,KAAC,OAAO,IAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,OAAO,GAAI,GACvC,CACR,CAAA;IACH,CAAC;IAED,OAAO,CACL,MAAC,IAAI,IAAC,KAAK,EAAE,MAAM,CAAC,SAAS,aAC3B,MAAC,IAAI,IAAC,KAAK,EAAE,MAAM,CAAC,gBAAgB,aAClC,KAAC,IAAI,IAAC,IAAI,EAAE,qBAAqB,CAAC,WAAW,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,QAAQ,GAAI,EACpF,KAAC,IAAI,IAAC,KAAK,EAAE,MAAM,CAAC,aAAa,YAC/B,KAAC,IAAI,IACH,OAAO,EAAC,UAAU,EAClB,aAAa,EAAE,CAAC,EAChB,KAAK,EAAE,MAAM,CAAC,QAAQ,EACtB,kBAAkB,EAAE,oBAAoB,IAAI,EAAE,YAE7C,IAAI,GACA,GACF,IACF,EACN,CAAC,gBAAgB,IAAI,CACpB,KAAC,UAAU,IACT,IAAI,EAAC,WAAW,EAChB,OAAO,EAAE,aAAa,EACtB,IAAI,EAAC,KAAK,EACV,UAAU,EAAC,SAAS,EACpB,KAAK,EAAE,MAAM,CAAC,WAAW,EACzB,kBAAkB,EAAC,wBAAwB,GAC3C,CACH,EACA,KAAK,IAAI,CACR,KAAC,IAAI,IAAC,KAAK,EAAE,MAAM,CAAC,UAAU,YAC5B,KAAC,IAAI,IAAC,IAAI,EAAC,6BAA6B,EAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,SAAS,GAAI,GACzE,CACR,IACI,CACR,CAAA;AACH,CAAC,CAAA;AAED,MAAM,SAAS,GAAG,CAAC,EAAE,KAAK,EAAuC,EAAE,EAAE;IACnE,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAC7B,MAAM,YAAY,GAAG,CAAC,CAAA;IAEtB,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,SAAS,EAAE;YACT,MAAM,EAAE,EAAE;YACV,QAAQ,EAAE,GAAG;YACb,aAAa,EAAE,KAAK;YACpB,cAAc,EAAE,eAAe;YAC/B,UAAU,EAAE,QAAQ;YACpB,GAAG,EAAE,CAAC;YACN,eAAe,EAAE,MAAM,CAAC,mBAAmB;YAC3C,WAAW,EAAE,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC,CAAC,MAAM,CAAC,sBAAsB;YAC7E,WAAW,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAC1B,YAAY;YACZ,OAAO,EAAE,CAAC;SACX;QACD,gBAAgB,EAAE;YAChB,aAAa,EAAE,KAAK;YACpB,GAAG,EAAE,CAAC;YACN,UAAU,EAAE,QAAQ;YACpB,UAAU,EAAE,CAAC;YACb,iBAAiB,EAAE,CAAC;YACpB,eAAe,EAAE,CAAC;SACnB;QACD,aAAa,EAAE;YACb,UAAU,EAAE,CAAC;YACb,aAAa,EAAE,QAAQ;SACxB;QACD,QAAQ,EAAE;YACR,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,wBAAwB,CAAC,CAAC,CAAC,MAAM,CAAC,uBAAuB;SAChF;QACD,QAAQ,EAAE;YACR,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,wBAAwB,CAAC,CAAC,CAAC,MAAM,CAAC,uBAAuB;YAC/E,UAAU,EAAE,wBAAwB;YACpC,UAAU,EAAE,CAAC;SACd;QACD,WAAW,EAAE;YACX,eAAe,EAAE,MAAM,CAAC,uBAAuB;YAC/C,YAAY,EAAE,EAAE;YAChB,MAAM,EAAE,EAAE;YACV,KAAK,EAAE,EAAE;YACT,SAAS,EAAE,YAAY;SACxB;QACD,UAAU,EAAE;YACV,eAAe,EAAE,MAAM,CAAC,iBAAiB;YACzC,QAAQ,EAAE,UAAU;YACpB,MAAM,EAAE,CAAC;YACT,KAAK,EAAE,CAAC;YACR,MAAM,EAAE,CAAC;YACT,sBAAsB,EAAE,YAAY;YACpC,OAAO,EAAE,CAAC;SACX;QACD,SAAS,EAAE;YACT,KAAK,EAAE,MAAM,CAAC,oBAAoB;YAClC,SAAS,EAAE,CAAC,EAAE,UAAU,EAAE,CAAC,EAAE,CAAC;YAC9B,QAAQ,EAAE,EAAE;SACb;QACD,OAAO,EAAE;YACP,gBAAgB,EAAE,MAAM;SACzB;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import { View, StyleSheet } from 'react-native'\nimport { useTheme } from '../../hooks'\nimport { platformFontWeightMedium } from '../../utils'\nimport { getAttachmentIconName } from '../../utils/attachment_kind'\nimport { tokens } from '../../vendor/tapestry/tokens'\nimport { Icon } from './icon'\nimport { IconButton } from './icon_button'\nimport { Spinner } from './spinner'\nimport { Text } from './text'\n\ninterface FileAttachmentPreviewProps {\n  name: string\n  contentType?: string\n  onRemovePress: () => void\n  loading?: boolean\n  error?: boolean\n  hideRemoveButton?: boolean\n}\n\nexport const FileAttachmentPreview = ({\n  name,\n  contentType,\n  onRemovePress,\n  loading = false,\n  error = false,\n  hideRemoveButton = false,\n}: FileAttachmentPreviewProps) => {\n  const styles = useStyles({ error })\n\n  if (loading) {\n    return (\n      <View style={styles.container}>\n        <Spinner size={20} style={styles.spinner} />\n      </View>\n    )\n  }\n\n  return (\n    <View style={styles.container}>\n      <View style={styles.contentContainer}>\n        <Icon name={getAttachmentIconName(contentType)} size={18} style={styles.fileIcon} />\n        <View style={styles.textContainer}>\n          <Text\n            variant=\"tertiary\"\n            numberOfLines={1}\n            style={styles.nameText}\n            accessibilityLabel={`File attachment: ${name}`}\n          >\n            {name}\n          </Text>\n        </View>\n      </View>\n      {!hideRemoveButton && (\n        <IconButton\n          name=\"general.x\"\n          onPress={onRemovePress}\n          size=\"xxs\"\n          appearance=\"neutral\"\n          style={styles.closeButton}\n          accessibilityLabel=\"Remove file attachment\"\n        />\n      )}\n      {error && (\n        <View style={styles.errorBadge}>\n          <Icon name=\"general.exclamationTriangle\" size={12} style={styles.errorIcon} />\n        </View>\n      )}\n    </View>\n  )\n}\n\nconst useStyles = ({ error }: Partial<FileAttachmentPreviewProps>) => {\n  const { colors } = useTheme()\n  const borderRadius = 8\n\n  return StyleSheet.create({\n    container: {\n      height: 60,\n      minWidth: 150,\n      flexDirection: 'row',\n      justifyContent: 'space-between',\n      alignItems: 'center',\n      gap: 8,\n      backgroundColor: colors.fillColorNeutral070,\n      borderColor: error ? colors.statusErrorBorder : colors.borderColorDefaultBase,\n      borderWidth: error ? 2 : 1,\n      borderRadius,\n      padding: 4,\n    },\n    contentContainer: {\n      flexDirection: 'row',\n      gap: 8,\n      alignItems: 'center',\n      flexShrink: 1,\n      paddingHorizontal: 8,\n      paddingVertical: 4,\n    },\n    textContainer: {\n      flexShrink: 1,\n      flexDirection: 'column',\n    },\n    fileIcon: {\n      color: error ? colors.iconColorDefaultDisabled : colors.iconColorDefaultPrimary,\n    },\n    nameText: {\n      color: error ? colors.textColorDefaultDisabled : colors.textColorDefaultPrimary,\n      fontWeight: platformFontWeightMedium,\n      flexShrink: 1,\n    },\n    closeButton: {\n      backgroundColor: colors.fillColorNeutral050Base,\n      borderRadius: 16,\n      height: 20,\n      width: 20,\n      alignSelf: 'flex-start',\n    },\n    errorBadge: {\n      backgroundColor: colors.statusErrorBorder,\n      position: 'absolute',\n      bottom: 0,\n      right: 0,\n      zIndex: 2,\n      borderStartStartRadius: borderRadius,\n      padding: 4,\n    },\n    errorIcon: {\n      color: tokens.colorNeutral100White,\n      transform: [{ translateX: 1 }],\n      fontSize: 10,\n    },\n    spinner: {\n      marginHorizontal: 'auto',\n    },\n  })\n}\n"]}
+{"version":3,"file":"file_attachment_preview.js","sourceRoot":"","sources":["../../../src/components/display/file_attachment_preview.tsx"],"names":[],"mappings":"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","sourcesContent":["import { View, StyleSheet } from 'react-native'\nimport { useTheme } from '../../hooks'\nimport { platformFontWeightMedium } from '../../utils'\nimport { getAttachmentIconName } from '../../utils/attachment_kind'\nimport { tokens } from '../../vendor/tapestry/tokens'\nimport { Icon } from './icon'\nimport { IconButton } from './icon_button'\nimport { Spinner } from './spinner'\nimport { Text } from './text'\n\ninterface FileAttachmentPreviewProps {\n  name: string\n  contentType?: string\n  onRemovePress: () => void\n  loading?: boolean\n  error?: boolean\n  hideRemoveButton?: boolean\n}\n\nexport const FileAttachmentPreview = ({\n  name,\n  contentType,\n  onRemovePress,\n  loading = false,\n  error = false,\n  hideRemoveButton = false,\n}: FileAttachmentPreviewProps) => {\n  const styles = useStyles({ error })\n\n  if (loading) {\n    return (\n      <View style={styles.container}>\n        <Spinner size={20} style={styles.spinner} />\n      </View>\n    )\n  }\n\n  return (\n    <View style={styles.container}>\n      <View style={styles.contentContainer}>\n        <Icon name={getAttachmentIconName(contentType)} size={18} style={styles.fileIcon} />\n        <View style={styles.textContainer}>\n          <Text\n            variant=\"tertiary\"\n            numberOfLines={1}\n            style={styles.nameText}\n            accessibilityLabel={`File attachment: ${name}`}\n          >\n            {name}\n          </Text>\n        </View>\n      </View>\n      {!hideRemoveButton && (\n        <IconButton\n          name=\"general.x\"\n          onPress={onRemovePress}\n          size=\"xxs\"\n          appearance=\"neutral\"\n          style={styles.closeButton}\n          accessibilityLabel=\"Remove file attachment\"\n        />\n      )}\n      {error && (\n        <View style={styles.errorBadge}>\n          <Icon name=\"general.exclamationTriangle\" size={12} style={styles.errorIcon} />\n        </View>\n      )}\n    </View>\n  )\n}\n\nconst useStyles = ({ error }: Partial<FileAttachmentPreviewProps>) => {\n  const { colors } = useTheme()\n  const borderRadius = 8\n\n  return StyleSheet.create({\n    container: {\n      height: 60,\n      minWidth: 150,\n      flexDirection: 'row',\n      justifyContent: 'space-between',\n      alignItems: 'center',\n      gap: 8,\n      backgroundColor: colors.fillColorNeutral070,\n      borderColor: error ? colors.statusErrorBorder : colors.borderColorDefaultBase,\n      borderWidth: error ? 2 : 1,\n      borderRadius,\n      padding: 4,\n    },\n    contentContainer: {\n      flexDirection: 'row',\n      gap: 8,\n      alignItems: 'center',\n      flexShrink: 1,\n      paddingHorizontal: 8,\n      paddingVertical: 4,\n    },\n    textContainer: {\n      flexShrink: 1,\n      flexDirection: 'column',\n    },\n    fileIcon: {\n      color: error ? colors.iconColorDefaultDisabled : colors.iconColorDefaultPrimary,\n    },\n    nameText: {\n      color: error ? colors.textColorDefaultDisabled : colors.textColorDefaultPrimary,\n      fontWeight: platformFontWeightMedium,\n      flexShrink: 1,\n    },\n    closeButton: {\n      backgroundColor: colors.fillColorNeutral050Base,\n      borderRadius: 16,\n      height: 20,\n      width: 20,\n      alignSelf: 'flex-start',\n    },\n    errorBadge: {\n      backgroundColor: colors.statusErrorBorder,\n      position: 'absolute',\n      bottom: 0,\n      right: 0,\n      zIndex: 2,\n      borderStartStartRadius: borderRadius,\n      padding: 4,\n    },\n    errorIcon: {\n      color: tokens.colorNeutral100White,\n      transform: [{ translateX: 1 }],\n      fontSize: 10,\n    },\n    spinner: {\n      marginHorizontal: 'auto',\n    },\n  })\n}\n"]}

package/build/components/display/heading.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { TextProps as ReactNativeTextProps } from 'react-native';
 export interface HeadingProps extends ReactNativeTextProps {
     /**
@@ -6,5 +7,5 @@ export interface HeadingProps extends ReactNativeTextProps {
      */
     variant?: 'h1' | 'h2' | 'h3' | 'h4';
 }
-export declare function Heading({ style, variant, children, ...props }: HeadingProps): import("react/jsx-runtime").JSX.Element;
+export declare function Heading({ style, variant, children, ...props }: HeadingProps): React.JSX.Element;
 //# sourceMappingURL=heading.d.ts.map

package/build/components/display/heading.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"heading.d.ts","sourceRoot":"","sources":["../../../src/components/display/heading.tsx"],"names":[],"mappings":"AACA,OAAO,EAIL,SAAS,IAAI,oBAAoB,EAClC,MAAM,cAAc,CAAA;AASrB,MAAM,WAAW,YAAa,SAAQ,oBAAoB;IACxD;;;OAGG;IACH,OAAO,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;CACpC;AAED,wBAAgB,OAAO,CAAC,EAAE,KAAK,EAAE,OAAc,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,2CAkBlF"}
+{"version":3,"file":"heading.d.ts","sourceRoot":"","sources":["../../../src/components/display/heading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAIL,SAAS,IAAI,oBAAoB,EAClC,MAAM,cAAc,CAAA;AASrB,MAAM,WAAW,YAAa,SAAQ,oBAAoB;IACxD;;;OAGG;IACH,OAAO,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;CACpC;AAED,wBAAgB,OAAO,CAAC,EAAE,KAAK,EAAE,OAAc,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,qBAkBlF"}

package/build/components/display/heading.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
 import { Platform, StyleSheet, Text as ReactNativeText, } from 'react-native';
 import { useTheme } from '../../hooks';
 import { platformFontWeightBold } from '../../utils/styles';
@@ -11,7 +11,9 @@ export function Heading({ style, variant = 'h1', children, ...props }) {
         h3: styles.heading3,
         h4: styles.heading4,
     };
-    return (_jsx(ReactNativeText, { style: [styles.global, variantStyleMap[variant], style], accessibilityRole: "header", ...props, children: children }));
+    return (<ReactNativeText style={[styles.global, variantStyleMap[variant], style]} accessibilityRole="header" {...props}>
+      {children}
+    </ReactNativeText>);
 }
 // =================================
 // ====== Styles ===================

package/build/components/display/heading.js.map

@@ -1 +1 @@
-{"version":3,"file":"heading.js","sourceRoot":"","sources":["../../../src/components/display/heading.tsx"],"names":[],"mappings":";AACA,OAAO,EACL,QAAQ,EACR,UAAU,EACV,IAAI,IAAI,eAAe,GAExB,MAAM,cAAc,CAAA;AACrB,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAA;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAA;AAcrD,MAAM,UAAU,OAAO,CAAC,EAAE,KAAK,EAAE,OAAO,GAAG,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAgB;IACjF,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,MAAM,eAAe,GAAG;QACtB,EAAE,EAAE,MAAM,CAAC,QAAQ;QACnB,EAAE,EAAE,MAAM,CAAC,QAAQ;QACnB,EAAE,EAAE,MAAM,CAAC,QAAQ;QACnB,EAAE,EAAE,MAAM,CAAC,QAAQ;KACpB,CAAA;IAED,OAAO,CACL,KAAC,eAAe,IACd,KAAK,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,OAAO,CAAC,EAAE,KAAK,CAAC,EACvD,iBAAiB,EAAC,QAAQ,KACtB,KAAK,YAER,QAAQ,GACO,CACnB,CAAA;AACH,CAAC;AAED,oCAAoC;AACpC,oCAAoC;AACpC,oCAAoC;AAEpC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAE7B,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,MAAM,EAAE;YACN,UAAU,EAAE,QAAQ,CAAC,MAAM,CAAC;gBAC1B,GAAG,EAAE,QAAQ;gBACb,OAAO,EAAE,QAAQ;aAClB,CAAC;SACH;QACD,QAAQ,EAAE;YACR,KAAK,EAAE,MAAM,CAAC,wBAAwB;YACtC,QAAQ,EAAE,MAAM,CAAC,WAAW;SAC7B;QACD,QAAQ,EAAE;YACR,KAAK,EAAE,MAAM,CAAC,wBAAwB;YACtC,UAAU,EAAE,sBAAsB;YAClC,QAAQ,EAAE,MAAM,CAAC,UAAU;SAC5B;QACD,QAAQ,EAAE;YACR,KAAK,EAAE,MAAM,CAAC,wBAAwB;YACtC,UAAU,EAAE,sBAAsB;YAClC,QAAQ,EAAE,MAAM,CAAC,UAAU;SAC5B;QACD,QAAQ,EAAE;YACR,KAAK,EAAE,MAAM,CAAC,yBAAyB;YACvC,UAAU,EAAE,sBAAsB;YAClC,QAAQ,EAAE,MAAM,CAAC,UAAU;YAC3B,aAAa,EAAE,WAAW;SAC3B;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import React from 'react'\nimport {\n  Platform,\n  StyleSheet,\n  Text as ReactNativeText,\n  TextProps as ReactNativeTextProps,\n} from 'react-native'\nimport { useTheme } from '../../hooks'\nimport { platformFontWeightBold } from '../../utils/styles'\nimport { tokens } from '../../vendor/tapestry/tokens'\n\n// =================================\n// ====== Component ================\n// =================================\n\nexport interface HeadingProps extends ReactNativeTextProps {\n  /**\n   * Changes the styles and size of the text.\n   * Semantically all React Native headings have the same 'hierarchical' level.\n   */\n  variant?: 'h1' | 'h2' | 'h3' | 'h4'\n}\n\nexport function Heading({ style, variant = 'h1', children, ...props }: HeadingProps) {\n  const styles = useStyles()\n  const variantStyleMap = {\n    h1: styles.heading1,\n    h2: styles.heading2,\n    h3: styles.heading3,\n    h4: styles.heading4,\n  }\n\n  return (\n    <ReactNativeText\n      style={[styles.global, variantStyleMap[variant], style]}\n      accessibilityRole=\"header\"\n      {...props}\n    >\n      {children}\n    </ReactNativeText>\n  )\n}\n\n// =================================\n// ====== Styles ===================\n// =================================\n\nconst useStyles = () => {\n  const { colors } = useTheme()\n\n  return StyleSheet.create({\n    global: {\n      fontFamily: Platform.select({\n        ios: 'System',\n        android: 'normal',\n      }),\n    },\n    heading1: {\n      color: colors.textColorDefaultHeadline,\n      fontSize: tokens.fontSize2xl,\n    },\n    heading2: {\n      color: colors.textColorDefaultHeadline,\n      fontWeight: platformFontWeightBold,\n      fontSize: tokens.fontSizeXl,\n    },\n    heading3: {\n      color: colors.textColorDefaultHeadline,\n      fontWeight: platformFontWeightBold,\n      fontSize: tokens.fontSizeLg,\n    },\n    heading4: {\n      color: colors.textColorDefaultSecondary,\n      fontWeight: platformFontWeightBold,\n      fontSize: tokens.fontSizeSm,\n      textTransform: 'uppercase',\n    },\n  })\n}\n"]}
+{"version":3,"file":"heading.js","sourceRoot":"","sources":["../../../src/components/display/heading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EACL,QAAQ,EACR,UAAU,EACV,IAAI,IAAI,eAAe,GAExB,MAAM,cAAc,CAAA;AACrB,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAA;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAA;AAcrD,MAAM,UAAU,OAAO,CAAC,EAAE,KAAK,EAAE,OAAO,GAAG,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAgB;IACjF,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,MAAM,eAAe,GAAG;QACtB,EAAE,EAAE,MAAM,CAAC,QAAQ;QACnB,EAAE,EAAE,MAAM,CAAC,QAAQ;QACnB,EAAE,EAAE,MAAM,CAAC,QAAQ;QACnB,EAAE,EAAE,MAAM,CAAC,QAAQ;KACpB,CAAA;IAED,OAAO,CACL,CAAC,eAAe,CACd,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,OAAO,CAAC,EAAE,KAAK,CAAC,CAAC,CACxD,iBAAiB,CAAC,QAAQ,CAC1B,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,eAAe,CAAC,CACnB,CAAA;AACH,CAAC;AAED,oCAAoC;AACpC,oCAAoC;AACpC,oCAAoC;AAEpC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAE7B,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,MAAM,EAAE;YACN,UAAU,EAAE,QAAQ,CAAC,MAAM,CAAC;gBAC1B,GAAG,EAAE,QAAQ;gBACb,OAAO,EAAE,QAAQ;aAClB,CAAC;SACH;QACD,QAAQ,EAAE;YACR,KAAK,EAAE,MAAM,CAAC,wBAAwB;YACtC,QAAQ,EAAE,MAAM,CAAC,WAAW;SAC7B;QACD,QAAQ,EAAE;YACR,KAAK,EAAE,MAAM,CAAC,wBAAwB;YACtC,UAAU,EAAE,sBAAsB;YAClC,QAAQ,EAAE,MAAM,CAAC,UAAU;SAC5B;QACD,QAAQ,EAAE;YACR,KAAK,EAAE,MAAM,CAAC,wBAAwB;YACtC,UAAU,EAAE,sBAAsB;YAClC,QAAQ,EAAE,MAAM,CAAC,UAAU;SAC5B;QACD,QAAQ,EAAE;YACR,KAAK,EAAE,MAAM,CAAC,yBAAyB;YACvC,UAAU,EAAE,sBAAsB;YAClC,QAAQ,EAAE,MAAM,CAAC,UAAU;YAC3B,aAAa,EAAE,WAAW;SAC3B;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import React from 'react'\nimport {\n  Platform,\n  StyleSheet,\n  Text as ReactNativeText,\n  TextProps as ReactNativeTextProps,\n} from 'react-native'\nimport { useTheme } from '../../hooks'\nimport { platformFontWeightBold } from '../../utils/styles'\nimport { tokens } from '../../vendor/tapestry/tokens'\n\n// =================================\n// ====== Component ================\n// =================================\n\nexport interface HeadingProps extends ReactNativeTextProps {\n  /**\n   * Changes the styles and size of the text.\n   * Semantically all React Native headings have the same 'hierarchical' level.\n   */\n  variant?: 'h1' | 'h2' | 'h3' | 'h4'\n}\n\nexport function Heading({ style, variant = 'h1', children, ...props }: HeadingProps) {\n  const styles = useStyles()\n  const variantStyleMap = {\n    h1: styles.heading1,\n    h2: styles.heading2,\n    h3: styles.heading3,\n    h4: styles.heading4,\n  }\n\n  return (\n    <ReactNativeText\n      style={[styles.global, variantStyleMap[variant], style]}\n      accessibilityRole=\"header\"\n      {...props}\n    >\n      {children}\n    </ReactNativeText>\n  )\n}\n\n// =================================\n// ====== Styles ===================\n// =================================\n\nconst useStyles = () => {\n  const { colors } = useTheme()\n\n  return StyleSheet.create({\n    global: {\n      fontFamily: Platform.select({\n        ios: 'System',\n        android: 'normal',\n      }),\n    },\n    heading1: {\n      color: colors.textColorDefaultHeadline,\n      fontSize: tokens.fontSize2xl,\n    },\n    heading2: {\n      color: colors.textColorDefaultHeadline,\n      fontWeight: platformFontWeightBold,\n      fontSize: tokens.fontSizeXl,\n    },\n    heading3: {\n      color: colors.textColorDefaultHeadline,\n      fontWeight: platformFontWeightBold,\n      fontSize: tokens.fontSizeLg,\n    },\n    heading4: {\n      color: colors.textColorDefaultSecondary,\n      fontWeight: platformFontWeightBold,\n      fontSize: tokens.fontSizeSm,\n      textTransform: 'uppercase',\n    },\n  })\n}\n"]}

package/build/components/display/icon.d.ts

@@ -11,6 +11,7 @@ import * as people from '@planningcenter/icons/paths/people';
 import * as publishing from '@planningcenter/icons/paths/publishing';
 import * as registrations from '@planningcenter/icons/paths/registrations';
 import * as services from '@planningcenter/icons/paths/services';
+import React from 'react';
 import type { ColorValue, StyleProp, ViewStyle } from 'react-native';
 import type { XmlProps } from 'react-native-svg';
 declare const ICONS: {
@@ -59,6 +60,6 @@ export interface IconProps extends Omit<XmlProps, 'xml' | 'fontSize'> {
      */
     style?: StyleProp<IconStyle>;
 }
-export declare function Icon({ color, name, size, style, accessibilityElementsHidden, accessibilityLabel, maxFontSizeMultiplier, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
+export declare function Icon({ color, name, size, style, accessibilityElementsHidden, accessibilityLabel, maxFontSizeMultiplier, ...props }: IconProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=icon.d.ts.map

package/build/components/display/icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../src/components/display/icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,QAAQ,MAAM,sCAAsC,CAAA;AAChE,OAAO,KAAK,GAAG,MAAM,iCAAiC,CAAA;AACtD,OAAO,KAAK,KAAK,MAAM,mCAAmC,CAAA;AAC1D,OAAO,KAAK,QAAQ,MAAM,sCAAsC,CAAA;AAChE,OAAO,KAAK,IAAI,MAAM,kCAAkC,CAAA;AACxD,OAAO,KAAK,YAAY,MAAM,2CAA2C,CAAA;AACzE,OAAO,KAAK,OAAO,MAAM,qCAAqC,CAAA;AAC9D,OAAO,KAAK,MAAM,MAAM,oCAAoC,CAAA;AAC5D,OAAO,KAAK,QAAQ,MAAM,sCAAsC,CAAA;AAChE,OAAO,KAAK,MAAM,MAAM,oCAAoC,CAAA;AAC5D,OAAO,KAAK,UAAU,MAAM,wCAAwC,CAAA;AACpE,OAAO,KAAK,aAAa,MAAM,2CAA2C,CAAA;AAC1E,OAAO,KAAK,QAAQ,MAAM,sCAAsC,CAAA;AAEhE,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAEpE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAUhD,QAAA,MAAM,KAAK;;;;;;;;;;;;;;CAcD,CAAA;AAEV,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG;IAClC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,KAAK,CAAA;AAE5C,KAAK,QAAQ,CAAC,CAAC,SAAS,WAAW,IAAI,MAAM,CAAC,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,CAAA;AAEvE,MAAM,MAAM,UAAU,GAClB,YAAY,QAAQ,CAAC,UAAU,CAAC,EAAE,GAClC,OAAO,QAAQ,CAAC,KAAK,CAAC,EAAE,GACxB,SAAS,QAAQ,CAAC,OAAO,CAAC,EAAE,GAC5B,YAAY,QAAQ,CAAC,UAAU,CAAC,EAAE,GAClC,QAAQ,QAAQ,CAAC,MAAM,CAAC,EAAE,GAC1B,gBAAgB,QAAQ,CAAC,cAAc,CAAC,EAAE,GAC1C,WAAW,QAAQ,CAAC,SAAS,CAAC,EAAE,GAChC,UAAU,QAAQ,CAAC,QAAQ,CAAC,EAAE,GAC9B,YAAY,QAAQ,CAAC,UAAU,CAAC,EAAE,GAClC,UAAU,QAAQ,CAAC,QAAQ,CAAC,EAAE,GAC9B,YAAY,QAAQ,CAAC,UAAU,CAAC,EAAE,GAClC,cAAc,QAAQ,CAAC,YAAY,CAAC,EAAE,GACtC,iBAAiB,QAAQ,CAAC,eAAe,CAAC,EAAE,CAAA;AAMhD,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,QAAQ,EAAE,KAAK,GAAG,UAAU,CAAC;IACnE;;;OAGG;IACH,IAAI,EAAE,UAAU,CAAA;IAChB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B;;OAEG;IACH,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CAC7B;AAED,wBAAgB,IAAI,CAAC,EACnB,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,2BAA2B,EAC3B,kBAAkB,EAClB,qBAAqB,EACrB,GAAG,KAAK,EACT,EAAE,SAAS,2CA0BX"}
+{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../src/components/display/icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,QAAQ,MAAM,sCAAsC,CAAA;AAChE,OAAO,KAAK,GAAG,MAAM,iCAAiC,CAAA;AACtD,OAAO,KAAK,KAAK,MAAM,mCAAmC,CAAA;AAC1D,OAAO,KAAK,QAAQ,MAAM,sCAAsC,CAAA;AAChE,OAAO,KAAK,IAAI,MAAM,kCAAkC,CAAA;AACxD,OAAO,KAAK,YAAY,MAAM,2CAA2C,CAAA;AACzE,OAAO,KAAK,OAAO,MAAM,qCAAqC,CAAA;AAC9D,OAAO,KAAK,MAAM,MAAM,oCAAoC,CAAA;AAC5D,OAAO,KAAK,QAAQ,MAAM,sCAAsC,CAAA;AAChE,OAAO,KAAK,MAAM,MAAM,oCAAoC,CAAA;AAC5D,OAAO,KAAK,UAAU,MAAM,wCAAwC,CAAA;AACpE,OAAO,KAAK,aAAa,MAAM,2CAA2C,CAAA;AAC1E,OAAO,KAAK,QAAQ,MAAM,sCAAsC,CAAA;AAChE,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAEpE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAUhD,QAAA,MAAM,KAAK;;;;;;;;;;;;;;CAcD,CAAA;AAEV,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG;IAClC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,KAAK,CAAA;AAE5C,KAAK,QAAQ,CAAC,CAAC,SAAS,WAAW,IAAI,MAAM,CAAC,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,CAAA;AAEvE,MAAM,MAAM,UAAU,GAClB,YAAY,QAAQ,CAAC,UAAU,CAAC,EAAE,GAClC,OAAO,QAAQ,CAAC,KAAK,CAAC,EAAE,GACxB,SAAS,QAAQ,CAAC,OAAO,CAAC,EAAE,GAC5B,YAAY,QAAQ,CAAC,UAAU,CAAC,EAAE,GAClC,QAAQ,QAAQ,CAAC,MAAM,CAAC,EAAE,GAC1B,gBAAgB,QAAQ,CAAC,cAAc,CAAC,EAAE,GAC1C,WAAW,QAAQ,CAAC,SAAS,CAAC,EAAE,GAChC,UAAU,QAAQ,CAAC,QAAQ,CAAC,EAAE,GAC9B,YAAY,QAAQ,CAAC,UAAU,CAAC,EAAE,GAClC,UAAU,QAAQ,CAAC,QAAQ,CAAC,EAAE,GAC9B,YAAY,QAAQ,CAAC,UAAU,CAAC,EAAE,GAClC,cAAc,QAAQ,CAAC,YAAY,CAAC,EAAE,GACtC,iBAAiB,QAAQ,CAAC,eAAe,CAAC,EAAE,CAAA;AAMhD,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,QAAQ,EAAE,KAAK,GAAG,UAAU,CAAC;IACnE;;;OAGG;IACH,IAAI,EAAE,UAAU,CAAA;IAChB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B;;OAEG;IACH,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CAC7B;AAED,wBAAgB,IAAI,CAAC,EACnB,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,2BAA2B,EAC3B,kBAAkB,EAClB,qBAAqB,EACrB,GAAG,KAAK,EACT,EAAE,SAAS,qBA0BX"}

package/build/components/display/icon.js

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import * as accounts from '@planningcenter/icons/paths/accounts';
 import * as api from '@planningcenter/icons/paths/api';
 import * as brand from '@planningcenter/icons/paths/brand';
@@ -12,6 +11,7 @@ import * as people from '@planningcenter/icons/paths/people';
 import * as publishing from '@planningcenter/icons/paths/publishing';
 import * as registrations from '@planningcenter/icons/paths/registrations';
 import * as services from '@planningcenter/icons/paths/services';
+import React from 'react';
 import { StyleSheet, View } from 'react-native';
 import { SvgXml } from 'react-native-svg';
 import { useFontScale, useTheme } from '../../hooks';
@@ -41,13 +41,13 @@ export function Icon({ color, name, size, style, accessibilityElementsHidden, ac
     const styles = useStyles({ color, iconSize });
     if (!path) {
         console.warn(`No icon available named ${name}. Remember to use the format "set.iconName"`);
-        return _jsx(View, { style: styles.noIcon });
+        return <View style={styles.noIcon}/>;
     }
-    return (_jsx(SvgXml, { accessibilityElementsHidden: accessibilityElementsHidden, accessibilityLabel: accessibilityLabel, xml: `
+    return (<SvgXml accessibilityElementsHidden={accessibilityElementsHidden} accessibilityLabel={accessibilityLabel} xml={`
           <svg viewBox="0 0 16 16">
             <path d="${path}" fill="currentColor" />
           </svg>
-        `, height: iconSize, width: iconSize, style: { ...styles.icon, ...flattenStyles }, ...props }));
+        `} height={iconSize} width={iconSize} style={{ ...styles.icon, ...flattenStyles }} {...props}/>);
 }
 const useGetIconSize = (size, style, maxFontSizeMultiplier) => {
     const fontSize = style?.fontSize;

package/build/components/display/icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../src/components/display/icon.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as accounts from '@planningcenter/icons/paths/accounts'\nimport * as api from '@planningcenter/icons/paths/api'\nimport * as brand from '@planningcenter/icons/paths/brand'\nimport * as calendar from '@planningcenter/icons/paths/calendar'\nimport * as chat from '@planningcenter/icons/paths/chat'\nimport * as churchCenter from '@planningcenter/icons/paths/church-center'\nimport * as general from '@planningcenter/icons/paths/general'\nimport * as groups from '@planningcenter/icons/paths/groups'\nimport * as logomark from '@planningcenter/icons/paths/logomark'\nimport * as people from '@planningcenter/icons/paths/people'\nimport * as publishing from '@planningcenter/icons/paths/publishing'\nimport * as registrations from '@planningcenter/icons/paths/registrations'\nimport * as services from '@planningcenter/icons/paths/services'\nimport React from 'react'\nimport type { ColorValue, StyleProp, ViewStyle } from 'react-native'\nimport { StyleSheet, View } from 'react-native'\nimport type { XmlProps } from 'react-native-svg'\nimport { SvgXml } from 'react-native-svg'\nimport { useFontScale, useTheme } from '../../hooks'\n\n// =================================\n// ====== Constants ================\n// =================================\n\nconst FALLBACK_SIZE = 12\n\nconst ICONS = {\n  accounts,\n  api,\n  brand,\n  calendar,\n  chat,\n  churchCenter,\n  general,\n  groups,\n  logomark,\n  people,\n  services,\n  publishing,\n  registrations,\n} as const\n\nexport type IconStyle = ViewStyle & {\n  fontSize?: number\n  color?: string\n}\n\nexport type IconSetName = keyof typeof ICONS\n\ntype IconName<T extends IconSetName> = keyof (typeof ICONS)[T] & string\n\nexport type IconString =\n  | `accounts.${IconName<'accounts'>}`\n  | `api.${IconName<'api'>}`\n  | `brand.${IconName<'brand'>}`\n  | `calendar.${IconName<'calendar'>}`\n  | `chat.${IconName<'chat'>}`\n  | `churchCenter.${IconName<'churchCenter'>}`\n  | `general.${IconName<'general'>}`\n  | `groups.${IconName<'groups'>}`\n  | `logomark.${IconName<'logomark'>}`\n  | `people.${IconName<'people'>}`\n  | `services.${IconName<'services'>}`\n  | `publishing.${IconName<'publishing'>}`\n  | `registrations.${IconName<'registrations'>}`\n\n// =================================\n// ====== Component ================\n// =================================\n\nexport interface IconProps extends Omit<XmlProps, 'xml' | 'fontSize'> {\n  /**\n   * Made up of the set.iconName.\n   * Example: \"general.textMessage\"\n   */\n  name: IconString\n  /**\n   * This sets a static size for the icon.\n   * Providing a fontSize style will allow the icon to scale with the device's text a11y size.\n   */\n  size?: number\n  /**\n   * Specifies the maximum size a font can reach when allowFontScaling is enabled.\n   */\n  maxFontSizeMultiplier?: number\n  /**\n   * Changes the color of the icon. Most cases should use a theme color to support light/dark mode.\n   */\n  color?: ColorValue\n  /**\n   * Icon can handle ViewStyle, color, and fontSize.\n   */\n  style?: StyleProp<IconStyle>\n}\n\nexport function Icon({\n  color,\n  name,\n  size,\n  style,\n  accessibilityElementsHidden,\n  accessibilityLabel,\n  maxFontSizeMultiplier,\n  ...props\n}: IconProps) {\n  const flattenStyles = StyleSheet.flatten(style)\n  const iconSize = useGetIconSize(size, flattenStyles, maxFontSizeMultiplier)\n  const path = getIconPath(name)\n  const styles = useStyles({ color, iconSize })\n\n  if (!path) {\n    console.warn(`No icon available named ${name}. Remember to use the format \"set.iconName\"`)\n    return <View style={styles.noIcon} />\n  }\n\n  return (\n    <SvgXml\n      accessibilityElementsHidden={accessibilityElementsHidden}\n      accessibilityLabel={accessibilityLabel}\n      xml={`\n          <svg viewBox=\"0 0 16 16\">\n            <path d=\"${path}\" fill=\"currentColor\" />\n          </svg>\n        `}\n      height={iconSize}\n      width={iconSize}\n      style={{ ...styles.icon, ...flattenStyles }}\n      {...props}\n    />\n  )\n}\n\nconst useGetIconSize = (size?: number, style?: IconStyle, maxFontSizeMultiplier?: number) => {\n  const fontSize = style?.fontSize\n  const fontScale = useFontScale({ maxFontSizeMultiplier })\n\n  if (fontSize) return fontSize * fontScale\n\n  return size || FALLBACK_SIZE\n}\n\nconst getIconPath = (name: IconString): string => {\n  const [setName, iconName] = name.split('.')\n\n  return (ICONS[setName as IconSetName] as Record<string, string>)?.[iconName]\n}\n\n// =================================\n// ====== Styles ===================\n// =================================\n\nconst useStyles = ({ color, iconSize }: { color?: ColorValue; iconSize: number }) => {\n  const { colors } = useTheme()\n\n  return StyleSheet.create({\n    noIcon: {\n      backgroundColor: colors.iconColorDefaultDisabled,\n      width: iconSize,\n      height: iconSize,\n      borderRadius: iconSize / 2,\n    },\n    icon: {\n      color: color || colors.iconColorDefaultPrimary,\n    },\n  })\n}\n"]}
+{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../src/components/display/icon.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as accounts from '@planningcenter/icons/paths/accounts'\nimport * as api from '@planningcenter/icons/paths/api'\nimport * as brand from '@planningcenter/icons/paths/brand'\nimport * as calendar from '@planningcenter/icons/paths/calendar'\nimport * as chat from '@planningcenter/icons/paths/chat'\nimport * as churchCenter from '@planningcenter/icons/paths/church-center'\nimport * as general from '@planningcenter/icons/paths/general'\nimport * as groups from '@planningcenter/icons/paths/groups'\nimport * as logomark from '@planningcenter/icons/paths/logomark'\nimport * as people from '@planningcenter/icons/paths/people'\nimport * as publishing from '@planningcenter/icons/paths/publishing'\nimport * as registrations from '@planningcenter/icons/paths/registrations'\nimport * as services from '@planningcenter/icons/paths/services'\nimport React from 'react'\nimport type { ColorValue, StyleProp, ViewStyle } from 'react-native'\nimport { StyleSheet, View } from 'react-native'\nimport type { XmlProps } from 'react-native-svg'\nimport { SvgXml } from 'react-native-svg'\nimport { useFontScale, useTheme } from '../../hooks'\n\n// =================================\n// ====== Constants ================\n// =================================\n\nconst FALLBACK_SIZE = 12\n\nconst ICONS = {\n  accounts,\n  api,\n  brand,\n  calendar,\n  chat,\n  churchCenter,\n  general,\n  groups,\n  logomark,\n  people,\n  services,\n  publishing,\n  registrations,\n} as const\n\nexport type IconStyle = ViewStyle & {\n  fontSize?: number\n  color?: string\n}\n\nexport type IconSetName = keyof typeof ICONS\n\ntype IconName<T extends IconSetName> = keyof (typeof ICONS)[T] & string\n\nexport type IconString =\n  | `accounts.${IconName<'accounts'>}`\n  | `api.${IconName<'api'>}`\n  | `brand.${IconName<'brand'>}`\n  | `calendar.${IconName<'calendar'>}`\n  | `chat.${IconName<'chat'>}`\n  | `churchCenter.${IconName<'churchCenter'>}`\n  | `general.${IconName<'general'>}`\n  | `groups.${IconName<'groups'>}`\n  | `logomark.${IconName<'logomark'>}`\n  | `people.${IconName<'people'>}`\n  | `services.${IconName<'services'>}`\n  | `publishing.${IconName<'publishing'>}`\n  | `registrations.${IconName<'registrations'>}`\n\n// =================================\n// ====== Component ================\n// =================================\n\nexport interface IconProps extends Omit<XmlProps, 'xml' | 'fontSize'> {\n  /**\n   * Made up of the set.iconName.\n   * Example: \"general.textMessage\"\n   */\n  name: IconString\n  /**\n   * This sets a static size for the icon.\n   * Providing a fontSize style will allow the icon to scale with the device's text a11y size.\n   */\n  size?: number\n  /**\n   * Specifies the maximum size a font can reach when allowFontScaling is enabled.\n   */\n  maxFontSizeMultiplier?: number\n  /**\n   * Changes the color of the icon. Most cases should use a theme color to support light/dark mode.\n   */\n  color?: ColorValue\n  /**\n   * Icon can handle ViewStyle, color, and fontSize.\n   */\n  style?: StyleProp<IconStyle>\n}\n\nexport function Icon({\n  color,\n  name,\n  size,\n  style,\n  accessibilityElementsHidden,\n  accessibilityLabel,\n  maxFontSizeMultiplier,\n  ...props\n}: IconProps) {\n  const flattenStyles = StyleSheet.flatten(style)\n  const iconSize = useGetIconSize(size, flattenStyles, maxFontSizeMultiplier)\n  const path = getIconPath(name)\n  const styles = useStyles({ color, iconSize })\n\n  if (!path) {\n    console.warn(`No icon available named ${name}. Remember to use the format \"set.iconName\"`)\n    return <View style={styles.noIcon} />\n  }\n\n  return (\n    <SvgXml\n      accessibilityElementsHidden={accessibilityElementsHidden}\n      accessibilityLabel={accessibilityLabel}\n      xml={`\n          <svg viewBox=\"0 0 16 16\">\n            <path d=\"${path}\" fill=\"currentColor\" />\n          </svg>\n        `}\n      height={iconSize}\n      width={iconSize}\n      style={{ ...styles.icon, ...flattenStyles }}\n      {...props}\n    />\n  )\n}\n\nconst useGetIconSize = (size?: number, style?: IconStyle, maxFontSizeMultiplier?: number) => {\n  const fontSize = style?.fontSize\n  const fontScale = useFontScale({ maxFontSizeMultiplier })\n\n  if (fontSize) return fontSize * fontScale\n\n  return size || FALLBACK_SIZE\n}\n\nconst getIconPath = (name: IconString): string => {\n  const [setName, iconName] = name.split('.')\n\n  return (ICONS[setName as IconSetName] as Record<string, string>)?.[iconName]\n}\n\n// =================================\n// ====== Styles ===================\n// =================================\n\nconst useStyles = ({ color, iconSize }: { color?: ColorValue; iconSize: number }) => {\n  const { colors } = useTheme()\n\n  return StyleSheet.create({\n    noIcon: {\n      backgroundColor: colors.iconColorDefaultDisabled,\n      width: iconSize,\n      height: iconSize,\n      borderRadius: iconSize / 2,\n    },\n    icon: {\n      color: color || colors.iconColorDefaultPrimary,\n    },\n  })\n}\n"]}