@planningcenter/chat-react-native 3.15.0-rc.0 → 3.15.0-rc.10

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

@@ -1 +1 @@
-{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../src/components/display/badge.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { JSX } from 'react'\nimport type { TextStyle, ViewProps, ViewStyle } from 'react-native'\nimport { Pressable, StyleSheet, View } from 'react-native'\nimport Svg, { Defs, LinearGradient, Path, Stop } from 'react-native-svg'\nimport { useFontScale, useTheme } from '../../hooks'\nimport { platformFontWeightMedium } from '../../utils'\nimport { tokens } from '../../vendor/tapestry/tokens'\nimport { Icon, IconString } from './icon'\nimport { Text } from './text'\nimport { useStatusColorAppearanceMap, type StatusAppearanceUnion } from './utils/status_colors'\n\n// =================================\n// ====== Constants ================\n// =================================\n\nconst VARIANTS = {\n  default: 'default',\n  meta: 'meta',\n  metaSubtle: 'metaSubtle',\n} as const\n\ntype VariantUnion = (typeof VARIANTS)[keyof typeof VARIANTS]\n\ntype VariantStyles = Record<\n  VariantUnion,\n  {\n    backgroundColor: string\n    paddingHorizontal: number\n    paddingVertical: number\n    borderWidth: number\n    borderRadius: number\n    textColor: string\n    gap: number\n    metaLabelPaddingLeft: number\n    fontWeight: TextStyle['fontWeight']\n  }\n>\n\ntype ProductLogoName = 'Groups' | 'Services' | 'groups' | 'services'\ntype ProductLogoComponent = ({ logoSize }: { logoSize: number }) => JSX.Element\n\nconst PRODUCT_LOGO_COMPONENT_MAP: Record<ProductLogoName, ProductLogoComponent> = {\n  Groups: GroupsLogo,\n  groups: GroupsLogo,\n  services: ServicesIcon,\n  Services: ServicesIcon,\n}\n\n// =================================\n// ====== Component ================\n// =================================\n\nexport interface BadgeProps {\n  /**\n   * Renders the main text.\n   */\n  label: string\n  /**\n   * Renders secondary meta text to the right of the label.\n   */\n  metaLabel?: string\n  /**\n   * Changes the status color for the badge and icon.\n   */\n  appearance?: StatusAppearanceUnion\n  /**\n   * Changes form of the logo to support a meta label and badge\n   */\n  variant?: VariantUnion\n  /**\n   * Adds a product logo to the left of the text.\n   */\n  productLogoName?: ProductLogoName\n  /**\n   * Shows an icon of the user choice to the left of the text.\n   */\n  iconName?: IconString\n  /**\n   * Shows an icon of the user choice to the right of the text.\n   */\n  iconNameRight?: IconString\n  /**\n   * Styles badge wrapper.\n   */\n  style?: ViewStyle\n  /**\n   * Specifies the maximum size a font can reach when allowFontScaling is enabled.\n   */\n  maxFontSizeMultiplier?: number\n  /**\n   * Callback function when the badge is pressed.\n   */\n  onPress?: () => void\n}\n\nexport function Badge({\n  appearance = 'neutral',\n  metaLabel,\n  style,\n  iconName,\n  iconNameRight,\n  label,\n  productLogoName,\n  variant = 'default',\n  maxFontSizeMultiplier,\n  onPress,\n}: BadgeProps) {\n  const styles = useStyles({ appearance, maxFontSizeMultiplier, variant })\n  const { showBadgeProductLogo } = useTheme()\n\n  const isMetaSubtle = variant === 'metaSubtle'\n  const hasMetaLabel = Boolean(metaLabel)\n\n  const showLogo = showBadgeProductLogo && productLogoName\n  const ProductLogoSvg = showLogo && PRODUCT_LOGO_COMPONENT_MAP[productLogoName]\n  const badgeLabel = isMetaSubtle && hasMetaLabel ? `${label}:` : label\n\n  return (\n    <BadgeWrapper style={[styles.badgeWrapper, style]} onPress={onPress} accessibilityRole=\"button\">\n      <View style={styles.badge}>\n        {showLogo && ProductLogoSvg && <ProductLogoSvg logoSize={styles.logo.fontSize} />}\n        {iconName && <Icon name={iconName} style={styles.icon} />}\n        <Text\n          variant=\"footnote\"\n          style={styles.label}\n          numberOfLines={1}\n          maxFontSizeMultiplier={maxFontSizeMultiplier}\n        >\n          {badgeLabel}\n        </Text>\n        {iconNameRight && <Icon name={iconNameRight} style={styles.iconRight} />}\n      </View>\n      {hasMetaLabel && (\n        <Text\n          variant=\"footnote\"\n          style={styles.metaLabel}\n          numberOfLines={1}\n          maxFontSizeMultiplier={maxFontSizeMultiplier}\n        >\n          {metaLabel}\n        </Text>\n      )}\n    </BadgeWrapper>\n  )\n}\n\nconst BadgeWrapper = ({\n  children,\n  onPress,\n  accessibilityRole,\n  ...restProps\n}: ViewProps & Pick<BadgeProps, 'onPress'>) => {\n  if (onPress) {\n    return (\n      <Pressable accessibilityRole={accessibilityRole} onPress={onPress} {...restProps}>\n        {children}\n      </Pressable>\n    )\n  }\n\n  return <View {...restProps}>{children}</View>\n}\n\n// =================================\n// ====== Styles ===================\n// =================================\n\nconst useStyles = ({\n  appearance = 'neutral',\n  maxFontSizeMultiplier,\n  variant = 'default',\n}: Partial<BadgeProps>) => {\n  const { colors } = useTheme()\n  const fontScale = useFontScale({ maxFontSizeMultiplier })\n\n  const statusColorMap = useStatusColorAppearanceMap()\n\n  const badgeGap = 4 * fontScale\n  const badgePaddingHorizontal = 8\n  const badgePaddingVertical = 4\n  const badgeFontSize = 12\n\n  const variantStylesMap: VariantStyles = {\n    default: {\n      gap: badgeGap,\n      backgroundColor: statusColorMap[appearance].background,\n      metaLabelPaddingLeft: badgePaddingHorizontal,\n      paddingHorizontal: badgePaddingHorizontal,\n      paddingVertical: badgePaddingVertical,\n      borderWidth: tokens.borderSizeDefault * fontScale,\n      borderRadius: tokens.borderRadiusMd * fontScale,\n      textColor: statusColorMap[appearance].text,\n      fontWeight: 'normal',\n    },\n    meta: {\n      gap: badgeGap,\n      backgroundColor: statusColorMap[appearance].background,\n      metaLabelPaddingLeft: badgePaddingHorizontal,\n      paddingHorizontal: badgePaddingHorizontal,\n      paddingVertical: badgePaddingVertical,\n      borderWidth: tokens.borderSizeDefault * fontScale,\n      borderRadius: tokens.borderRadiusMd * fontScale,\n      textColor: statusColorMap[appearance].text,\n      fontWeight: platformFontWeightMedium,\n    },\n    metaSubtle: {\n      gap: badgeGap,\n      backgroundColor: 'transparent',\n      metaLabelPaddingLeft: badgeGap,\n      paddingHorizontal: 0,\n      paddingVertical: 0,\n      borderWidth: 0,\n      borderRadius: 0,\n      textColor: colors.textColorDefaultSecondary,\n      fontWeight: platformFontWeightMedium,\n    },\n  }\n\n  return StyleSheet.create({\n    badgeWrapper: {\n      flexDirection: 'row',\n      justifyContent: 'center',\n      alignSelf: 'flex-start',\n      borderRadius: variantStylesMap[variant].borderRadius,\n      borderWidth: variantStylesMap[variant].borderWidth,\n      borderColor: statusColorMap[appearance].background,\n    },\n    badge: {\n      flexDirection: 'row',\n      alignItems: 'center',\n      gap: variantStylesMap[variant].gap,\n      paddingVertical: variantStylesMap[variant].paddingVertical,\n      paddingHorizontal: variantStylesMap[variant].paddingHorizontal,\n      backgroundColor: variantStylesMap[variant].backgroundColor,\n      borderRadius: variantStylesMap[variant].borderRadius - 2,\n    },\n    icon: {\n      color: statusColorMap[appearance].icon,\n      fontSize: badgeFontSize,\n    },\n    iconRight: {\n      color: statusColorMap[appearance].icon,\n      fontSize: badgeFontSize - 2,\n    },\n    logo: {\n      fontSize: badgeFontSize * fontScale,\n    },\n    label: {\n      color: variantStylesMap[variant].textColor,\n      fontWeight: variantStylesMap[variant].fontWeight,\n      fontSize: badgeFontSize,\n      flexShrink: 1,\n    },\n    metaLabel: {\n      paddingHorizontal: variantStylesMap[variant].paddingHorizontal,\n      fontSize: badgeFontSize,\n      alignSelf: 'center',\n      flexShrink: 1,\n      paddingLeft: variantStylesMap[variant].metaLabelPaddingLeft,\n    },\n  })\n}\n\n// =================================\n// ====== Product Logos ============\n// =================================\n\ninterface ProductLogoProps {\n  logoSize: number\n}\n\nfunction GroupsLogo({ logoSize }: ProductLogoProps) {\n  return (\n    <Svg width={logoSize} height={logoSize} viewBox=\"0 0 16 16\" fill=\"none\">\n      <Path\n        d=\"M9.06 6.14H6.94c-.152.36-.438.646-.797.798v2.12c.359.152.645.438.797.797h2.117c.152-.359.437-.645.796-.797V6.94a1.502 1.502 0 01-.793-.8zM8 0C1.6 0 0 1.595 0 8s1.6 8 8 8 8-1.595 8-8-1.595-8-8-8zm3.939 10.44a1.5 1.5 0 01-2.882.585H6.94a1.5 1.5 0 11-1.963-1.963v-2.12A1.501 1.501 0 116.94 4.98h2.12a1.5 1.5 0 111.963 1.968v2.11a1.501 1.501 0 01.916 1.383z\"\n        fill=\"url(#paint0_linear_2632_26363)\"\n      />\n      <Defs>\n        <LinearGradient\n          id=\"paint0_linear_2632_26363\"\n          x1={-5.6338}\n          y1={5.6338}\n          x2={5.6338}\n          y2={16.9014}\n          gradientUnits=\"userSpaceOnUse\"\n        >\n          <Stop stopColor=\"#FF962D\" />\n          <Stop offset={1} stopColor=\"#FC7638\" />\n        </LinearGradient>\n      </Defs>\n    </Svg>\n  )\n}\n\nfunction ServicesIcon({ logoSize }: ProductLogoProps) {\n  return (\n    <Svg width={logoSize} height={logoSize} viewBox=\"0 0 16 16\" fill=\"none\">\n      <Path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M.116 8c0-6.4 1.6-8 8-8s8 1.6 8 8-1.6 8-8 8-8-1.6-8-8zm4.123 3.464a.848.848 0 10.943-1.41.848.848 0 00-.943 1.41zm.001-2.76a.848.848 0 10.948-1.408.848.848 0 00-.948 1.407zm0-2.759a.849.849 0 10.948-1.408.849.849 0 00-.948 1.408zm8.1 5.34a.388.388 0 00.03-.149v-.755a.39.39 0 00-.39-.39H6.87a.39.39 0 00-.39.39v.755a.39.39 0 00.39.39h5.11a.39.39 0 00.36-.24zm0-2.758a.388.388 0 00.03-.149v-.757a.387.387 0 00-.39-.388H6.87a.388.388 0 00-.39.388v.757a.388.388 0 00.39.388h5.11a.388.388 0 00.36-.24zm0-2.76a.388.388 0 00.03-.148v-.754a.39.39 0 00-.39-.389H6.87a.39.39 0 00-.39.387v.756a.39.39 0 00.39.39h5.11a.389.389 0 00.36-.241z\"\n        fill=\"url(#paint0_linear_2632_56586)\"\n      />\n      <Defs>\n        <LinearGradient\n          id=\"paint0_linear_2632_56586\"\n          x1={-5.51759}\n          y1={5.6338}\n          x2={5.75001}\n          y2={16.9014}\n          gradientUnits=\"userSpaceOnUse\"\n        >\n          <Stop stopColor=\"#6BB23D\" />\n          <Stop offset={1} stopColor=\"#659630\" />\n        </LinearGradient>\n      </Defs>\n    </Svg>\n  )\n}\n"]}
+{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../src/components/display/badge.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { JSX } from 'react'\nimport type { TextStyle, ViewProps, ViewStyle } from 'react-native'\nimport { Pressable, StyleSheet, View } from 'react-native'\nimport Svg, { Defs, LinearGradient, Path, Stop } from 'react-native-svg'\nimport { useFontScale, useTheme } from '../../hooks'\nimport { platformFontWeightMedium } from '../../utils'\nimport { tokens } from '../../vendor/tapestry/tokens'\nimport { Icon, IconString } from './icon'\nimport { Text } from './text'\nimport { useStatusColorAppearanceMap, type StatusAppearanceUnion } from './utils/status_colors'\n\n// =================================\n// ====== Constants ================\n// =================================\n\nconst VARIANTS = {\n  default: 'default',\n  meta: 'meta',\n  metaSubtle: 'metaSubtle',\n} as const\n\ntype VariantUnion = (typeof VARIANTS)[keyof typeof VARIANTS]\n\ntype VariantStyles = Record<\n  VariantUnion,\n  {\n    backgroundColor: string\n    paddingHorizontal: number\n    paddingVertical: number\n    borderWidth: number\n    borderRadius: number\n    textColor: string\n    gap: number\n    metaLabelPaddingLeft: number\n    fontWeight: TextStyle['fontWeight']\n  }\n>\n\ntype ProductLogoName = 'Groups' | 'Services' | 'groups' | 'services'\ntype ProductLogoComponent = ({ logoSize }: { logoSize: number }) => JSX.Element\n\nconst PRODUCT_LOGO_COMPONENT_MAP: Record<ProductLogoName, ProductLogoComponent> = {\n  Groups: GroupsLogo,\n  groups: GroupsLogo,\n  services: ServicesIcon,\n  Services: ServicesIcon,\n}\n\n// =================================\n// ====== Component ================\n// =================================\n\nexport interface BadgeProps {\n  /**\n   * Renders the main text.\n   */\n  label: string\n  /**\n   * Renders secondary meta text to the right of the label.\n   */\n  metaLabel?: string\n  /**\n   * Changes the status color for the badge and icon.\n   */\n  appearance?: StatusAppearanceUnion\n  /**\n   * Changes form of the logo to support a meta label and badge\n   */\n  variant?: VariantUnion\n  /**\n   * Adds a product logo to the left of the text.\n   */\n  productLogoName?: ProductLogoName\n  /**\n   * Shows an icon of the user choice to the left of the text.\n   */\n  iconName?: IconString\n  /**\n   * Shows an icon of the user choice to the right of the text.\n   */\n  iconNameRight?: IconString\n  /**\n   * Styles badge wrapper.\n   */\n  style?: ViewStyle\n  /**\n   * Specifies the maximum size a font can reach when allowFontScaling is enabled.\n   */\n  maxFontSizeMultiplier?: number\n  /**\n   * Callback function when the badge is pressed.\n   */\n  onPress?: () => void\n  /**\n   * Specifies the number of lines for the meta label before truncating.\n   */\n  numberOfLinesMetaLabel?: number\n}\n\nexport function Badge({\n  appearance = 'neutral',\n  metaLabel,\n  style,\n  iconName,\n  iconNameRight,\n  label,\n  productLogoName,\n  variant = 'default',\n  maxFontSizeMultiplier,\n  numberOfLinesMetaLabel = 1,\n  onPress,\n}: BadgeProps) {\n  const styles = useStyles({ appearance, maxFontSizeMultiplier, variant })\n  const { showBadgeProductLogo } = useTheme()\n\n  const isMetaSubtle = variant === 'metaSubtle'\n  const hasMetaLabel = Boolean(metaLabel)\n\n  const showLogo = showBadgeProductLogo && productLogoName\n  const ProductLogoSvg = showLogo && PRODUCT_LOGO_COMPONENT_MAP[productLogoName]\n  const badgeLabel = isMetaSubtle && hasMetaLabel ? `${label}:` : label\n\n  return (\n    <BadgeWrapper style={[styles.badgeWrapper, style]} onPress={onPress} accessibilityRole=\"button\">\n      <View style={styles.badge}>\n        {showLogo && ProductLogoSvg && <ProductLogoSvg logoSize={styles.logo.fontSize} />}\n        {iconName && <Icon name={iconName} style={styles.icon} />}\n        <Text\n          variant=\"footnote\"\n          style={styles.label}\n          numberOfLines={1}\n          maxFontSizeMultiplier={maxFontSizeMultiplier}\n        >\n          {badgeLabel}\n        </Text>\n        {iconNameRight && <Icon name={iconNameRight} style={styles.iconRight} />}\n      </View>\n      {hasMetaLabel && (\n        <Text\n          variant=\"footnote\"\n          style={styles.metaLabel}\n          numberOfLines={numberOfLinesMetaLabel}\n          maxFontSizeMultiplier={maxFontSizeMultiplier}\n        >\n          {metaLabel}\n        </Text>\n      )}\n    </BadgeWrapper>\n  )\n}\n\nconst BadgeWrapper = ({\n  children,\n  onPress,\n  accessibilityRole,\n  ...restProps\n}: ViewProps & Pick<BadgeProps, 'onPress'>) => {\n  if (onPress) {\n    return (\n      <Pressable accessibilityRole={accessibilityRole} onPress={onPress} {...restProps}>\n        {children}\n      </Pressable>\n    )\n  }\n\n  return <View {...restProps}>{children}</View>\n}\n\n// =================================\n// ====== Styles ===================\n// =================================\n\nconst useStyles = ({\n  appearance = 'neutral',\n  maxFontSizeMultiplier,\n  variant = 'default',\n}: Partial<BadgeProps>) => {\n  const { colors } = useTheme()\n  const fontScale = useFontScale({ maxFontSizeMultiplier })\n\n  const statusColorMap = useStatusColorAppearanceMap()\n\n  const badgeGap = 4 * fontScale\n  const badgePaddingHorizontal = 8\n  const badgePaddingVertical = 4\n  const badgeFontSize = 12\n\n  const variantStylesMap: VariantStyles = {\n    default: {\n      gap: badgeGap,\n      backgroundColor: statusColorMap[appearance].background,\n      metaLabelPaddingLeft: badgePaddingHorizontal,\n      paddingHorizontal: badgePaddingHorizontal,\n      paddingVertical: badgePaddingVertical,\n      borderWidth: tokens.borderSizeDefault * fontScale,\n      borderRadius: tokens.borderRadiusMd * fontScale,\n      textColor: statusColorMap[appearance].text,\n      fontWeight: 'normal',\n    },\n    meta: {\n      gap: badgeGap,\n      backgroundColor: statusColorMap[appearance].background,\n      metaLabelPaddingLeft: badgePaddingHorizontal,\n      paddingHorizontal: badgePaddingHorizontal,\n      paddingVertical: badgePaddingVertical,\n      borderWidth: tokens.borderSizeDefault * fontScale,\n      borderRadius: tokens.borderRadiusMd * fontScale,\n      textColor: statusColorMap[appearance].text,\n      fontWeight: platformFontWeightMedium,\n    },\n    metaSubtle: {\n      gap: badgeGap,\n      backgroundColor: 'transparent',\n      metaLabelPaddingLeft: badgeGap,\n      paddingHorizontal: 0,\n      paddingVertical: 0,\n      borderWidth: 0,\n      borderRadius: 0,\n      textColor: colors.textColorDefaultSecondary,\n      fontWeight: platformFontWeightMedium,\n    },\n  }\n\n  return StyleSheet.create({\n    badgeWrapper: {\n      flexDirection: 'row',\n      justifyContent: 'center',\n      alignSelf: 'flex-start',\n      borderRadius: variantStylesMap[variant].borderRadius,\n      borderWidth: variantStylesMap[variant].borderWidth,\n      borderColor: statusColorMap[appearance].background,\n    },\n    badge: {\n      flexDirection: 'row',\n      alignItems: 'center',\n      gap: variantStylesMap[variant].gap,\n      paddingVertical: variantStylesMap[variant].paddingVertical,\n      paddingHorizontal: variantStylesMap[variant].paddingHorizontal,\n      backgroundColor: variantStylesMap[variant].backgroundColor,\n      borderRadius: variantStylesMap[variant].borderRadius - 2,\n    },\n    icon: {\n      color: statusColorMap[appearance].icon,\n      fontSize: badgeFontSize,\n    },\n    iconRight: {\n      color: statusColorMap[appearance].icon,\n      fontSize: badgeFontSize - 2,\n    },\n    logo: {\n      fontSize: badgeFontSize * fontScale,\n    },\n    label: {\n      color: variantStylesMap[variant].textColor,\n      fontWeight: variantStylesMap[variant].fontWeight,\n      fontSize: badgeFontSize,\n      flexShrink: 1,\n    },\n    metaLabel: {\n      paddingHorizontal: variantStylesMap[variant].paddingHorizontal,\n      fontSize: badgeFontSize,\n      alignSelf: 'center',\n      flexShrink: 1,\n      paddingLeft: variantStylesMap[variant].metaLabelPaddingLeft,\n    },\n  })\n}\n\n// =================================\n// ====== Product Logos ============\n// =================================\n\ninterface ProductLogoProps {\n  logoSize: number\n}\n\nfunction GroupsLogo({ logoSize }: ProductLogoProps) {\n  return (\n    <Svg width={logoSize} height={logoSize} viewBox=\"0 0 16 16\" fill=\"none\">\n      <Path\n        d=\"M9.06 6.14H6.94c-.152.36-.438.646-.797.798v2.12c.359.152.645.438.797.797h2.117c.152-.359.437-.645.796-.797V6.94a1.502 1.502 0 01-.793-.8zM8 0C1.6 0 0 1.595 0 8s1.6 8 8 8 8-1.595 8-8-1.595-8-8-8zm3.939 10.44a1.5 1.5 0 01-2.882.585H6.94a1.5 1.5 0 11-1.963-1.963v-2.12A1.501 1.501 0 116.94 4.98h2.12a1.5 1.5 0 111.963 1.968v2.11a1.501 1.501 0 01.916 1.383z\"\n        fill=\"url(#paint0_linear_2632_26363)\"\n      />\n      <Defs>\n        <LinearGradient\n          id=\"paint0_linear_2632_26363\"\n          x1={-5.6338}\n          y1={5.6338}\n          x2={5.6338}\n          y2={16.9014}\n          gradientUnits=\"userSpaceOnUse\"\n        >\n          <Stop stopColor=\"#FF962D\" />\n          <Stop offset={1} stopColor=\"#FC7638\" />\n        </LinearGradient>\n      </Defs>\n    </Svg>\n  )\n}\n\nfunction ServicesIcon({ logoSize }: ProductLogoProps) {\n  return (\n    <Svg width={logoSize} height={logoSize} viewBox=\"0 0 16 16\" fill=\"none\">\n      <Path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M.116 8c0-6.4 1.6-8 8-8s8 1.6 8 8-1.6 8-8 8-8-1.6-8-8zm4.123 3.464a.848.848 0 10.943-1.41.848.848 0 00-.943 1.41zm.001-2.76a.848.848 0 10.948-1.408.848.848 0 00-.948 1.407zm0-2.759a.849.849 0 10.948-1.408.849.849 0 00-.948 1.408zm8.1 5.34a.388.388 0 00.03-.149v-.755a.39.39 0 00-.39-.39H6.87a.39.39 0 00-.39.39v.755a.39.39 0 00.39.39h5.11a.39.39 0 00.36-.24zm0-2.758a.388.388 0 00.03-.149v-.757a.387.387 0 00-.39-.388H6.87a.388.388 0 00-.39.388v.757a.388.388 0 00.39.388h5.11a.388.388 0 00.36-.24zm0-2.76a.388.388 0 00.03-.148v-.754a.39.39 0 00-.39-.389H6.87a.39.39 0 00-.39.387v.756a.39.39 0 00.39.39h5.11a.389.389 0 00.36-.241z\"\n        fill=\"url(#paint0_linear_2632_56586)\"\n      />\n      <Defs>\n        <LinearGradient\n          id=\"paint0_linear_2632_56586\"\n          x1={-5.51759}\n          y1={5.6338}\n          x2={5.75001}\n          y2={16.9014}\n          gradientUnits=\"userSpaceOnUse\"\n        >\n          <Stop stopColor=\"#6BB23D\" />\n          <Stop offset={1} stopColor=\"#659630\" />\n        </LinearGradient>\n      </Defs>\n    </Svg>\n  )\n}\n"]}

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

@@ -1,26 +1,39 @@
 import React from 'react';
 import type { ColorValue, StyleProp, ViewStyle } from 'react-native';
 import type { XmlProps } from 'react-native-svg';
+import * as accounts from '@planningcenter/icons/paths/accounts';
+import * as api from '@planningcenter/icons/paths/api';
+import * as brand from '@planningcenter/icons/paths/brand';
+import * as calendar from '@planningcenter/icons/paths/calendar';
+import * as chat from '@planningcenter/icons/paths/chat';
+import * as churchCenter from '@planningcenter/icons/paths/church-center';
+import * as general from '@planningcenter/icons/paths/general';
+import * as groups from '@planningcenter/icons/paths/groups';
+import * as logomark from '@planningcenter/icons/paths/logomark';
+import * as people from '@planningcenter/icons/paths/people';
+import * as services from '@planningcenter/icons/paths/services';
+import * as publishing from '@planningcenter/icons/paths/publishing';
 declare const ICONS: {
-    readonly accounts: any;
-    readonly api: any;
-    readonly brand: any;
-    readonly calendar: any;
-    readonly chat: any;
-    readonly churchCenter: any;
-    readonly general: any;
-    readonly groups: any;
-    readonly logomark: any;
-    readonly people: any;
-    readonly services: any;
-    readonly publishing: any;
+    readonly accounts: typeof accounts;
+    readonly api: typeof api;
+    readonly brand: typeof brand;
+    readonly calendar: typeof calendar;
+    readonly chat: typeof chat;
+    readonly churchCenter: typeof churchCenter;
+    readonly general: typeof general;
+    readonly groups: typeof groups;
+    readonly logomark: typeof logomark;
+    readonly people: typeof people;
+    readonly services: typeof services;
+    readonly publishing: typeof publishing;
 };
 export type IconStyle = ViewStyle & {
     fontSize?: number;
     color?: string;
 };
 export type IconSetName = keyof typeof ICONS;
-export type IconString = `${IconSetName}.${(typeof ICONS)[IconSetName]}`;
+type IconName<T extends IconSetName> = keyof (typeof ICONS)[T] & string;
+export type IconString = `accounts.${IconName<'accounts'>}` | `api.${IconName<'api'>}` | `brand.${IconName<'brand'>}` | `calendar.${IconName<'calendar'>}` | `chat.${IconName<'chat'>}` | `churchCenter.${IconName<'churchCenter'>}` | `general.${IconName<'general'>}` | `groups.${IconName<'groups'>}` | `logomark.${IconName<'logomark'>}` | `people.${IconName<'people'>}` | `services.${IconName<'services'>}` | `publishing.${IconName<'publishing'>}`;
 export interface IconProps extends Omit<XmlProps, 'xml' | 'fontSize'> {
     /**
      * Made up of the set.iconName.

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,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAEpE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAkChD,QAAA,MAAM,KAAK;;;;;;;;;;;;;CAaD,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;AAC5C,MAAM,MAAM,UAAU,GAAG,GAAG,WAAW,IAAI,CAAC,OAAO,KAAK,CAAC,CAAC,WAAW,CAAC,EAAE,CAAA;AAMxE,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"}
+{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../src/components/display/icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAEpE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAGhD,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,QAAQ,MAAM,sCAAsC,CAAA;AAChE,OAAO,KAAK,UAAU,MAAM,wCAAwC,CAAA;AAQpE,QAAA,MAAM,KAAK;;;;;;;;;;;;;CAaD,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,CAAA;AAM1C,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

@@ -2,29 +2,17 @@ import React from 'react';
 import { StyleSheet, View } from 'react-native';
 import { SvgXml } from 'react-native-svg';
 import { useFontScale, useTheme } from '../../hooks';
-// @ts-ignore
 import * as accounts from '@planningcenter/icons/paths/accounts';
-// @ts-ignore
 import * as api from '@planningcenter/icons/paths/api';
-// @ts-ignore
 import * as brand from '@planningcenter/icons/paths/brand';
-// @ts-ignore
 import * as calendar from '@planningcenter/icons/paths/calendar';
-// @ts-ignore
 import * as chat from '@planningcenter/icons/paths/chat';
-// @ts-ignore
 import * as churchCenter from '@planningcenter/icons/paths/church-center';
-// @ts-ignore
 import * as general from '@planningcenter/icons/paths/general';
-// @ts-ignore
 import * as groups from '@planningcenter/icons/paths/groups';
-// @ts-ignore
 import * as logomark from '@planningcenter/icons/paths/logomark';
-// @ts-ignore
 import * as people from '@planningcenter/icons/paths/people';
-// @ts-ignore
 import * as services from '@planningcenter/icons/paths/services';
-// @ts-ignore
 import * as publishing from '@planningcenter/icons/paths/publishing';
 // =================================
 // ====== Constants ================

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

@@ -1 +1 @@
-{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../src/components/display/icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAE/C,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AAEzC,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAEpD,aAAa;AACb,OAAO,KAAK,QAAQ,MAAM,sCAAsC,CAAA;AAChE,aAAa;AACb,OAAO,KAAK,GAAG,MAAM,iCAAiC,CAAA;AACtD,aAAa;AACb,OAAO,KAAK,KAAK,MAAM,mCAAmC,CAAA;AAC1D,aAAa;AACb,OAAO,KAAK,QAAQ,MAAM,sCAAsC,CAAA;AAChE,aAAa;AACb,OAAO,KAAK,IAAI,MAAM,kCAAkC,CAAA;AACxD,aAAa;AACb,OAAO,KAAK,YAAY,MAAM,2CAA2C,CAAA;AACzE,aAAa;AACb,OAAO,KAAK,OAAO,MAAM,qCAAqC,CAAA;AAC9D,aAAa;AACb,OAAO,KAAK,MAAM,MAAM,oCAAoC,CAAA;AAC5D,aAAa;AACb,OAAO,KAAK,QAAQ,MAAM,sCAAsC,CAAA;AAChE,aAAa;AACb,OAAO,KAAK,MAAM,MAAM,oCAAoC,CAAA;AAC5D,aAAa;AACb,OAAO,KAAK,QAAQ,MAAM,sCAAsC,CAAA;AAChE,aAAa;AACb,OAAO,KAAK,UAAU,MAAM,wCAAwC,CAAA;AAEpE,oCAAoC;AACpC,oCAAoC;AACpC,oCAAoC;AAEpC,MAAM,aAAa,GAAG,EAAE,CAAA;AAExB,MAAM,KAAK,GAAG;IACZ,QAAQ;IACR,GAAG;IACH,KAAK;IACL,QAAQ;IACR,IAAI;IACJ,YAAY;IACZ,OAAO;IACP,MAAM;IACN,QAAQ;IACR,MAAM;IACN,QAAQ;IACR,UAAU;CACF,CAAA;AAuCV,MAAM,UAAU,IAAI,CAAC,EACnB,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,2BAA2B,EAC3B,kBAAkB,EAClB,qBAAqB,EACrB,GAAG,KAAK,EACE;IACV,MAAM,aAAa,GAAG,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC,CAAA;IAC/C,MAAM,QAAQ,GAAG,cAAc,CAAC,IAAI,EAAE,aAAa,EAAE,qBAAqB,CAAC,CAAA;IAC3E,MAAM,IAAI,GAAG,WAAW,CAAC,IAAI,CAAC,CAAA;IAC9B,MAAM,MAAM,GAAG,SAAS,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAA;IAE7C,IAAI,CAAC,IAAI,EAAE,CAAC;QACV,OAAO,CAAC,IAAI,CAAC,2BAA2B,IAAI,6CAA6C,CAAC,CAAA;QAC1F,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,EAAG,CAAA;IACvC,CAAC;IAED,OAAO,CACL,CAAC,MAAM,CACL,2BAA2B,CAAC,CAAC,2BAA2B,CAAC,CACzD,kBAAkB,CAAC,CAAC,kBAAkB,CAAC,CACvC,GAAG,CAAC,CAAC;;uBAEY,IAAI;;SAElB,CAAC,CACJ,MAAM,CAAC,CAAC,QAAQ,CAAC,CACjB,KAAK,CAAC,CAAC,QAAQ,CAAC,CAChB,KAAK,CAAC,CAAC,EAAE,GAAG,MAAM,CAAC,IAAI,EAAE,GAAG,aAAa,EAAE,CAAC,CAC5C,IAAI,KAAK,CAAC,EACV,CACH,CAAA;AACH,CAAC;AAED,MAAM,cAAc,GAAG,CAAC,IAAa,EAAE,KAAiB,EAAE,qBAA8B,EAAE,EAAE;IAC1F,MAAM,QAAQ,GAAG,KAAK,EAAE,QAAQ,CAAA;IAChC,MAAM,SAAS,GAAG,YAAY,CAAC,EAAE,qBAAqB,EAAE,CAAC,CAAA;IAEzD,IAAI,QAAQ;QAAE,OAAO,QAAQ,GAAG,SAAS,CAAA;IAEzC,OAAO,IAAI,IAAI,aAAa,CAAA;AAC9B,CAAC,CAAA;AAED,MAAM,WAAW,GAAG,CAAC,IAAgB,EAAU,EAAE;IAC/C,MAAM,CAAC,OAAO,EAAE,QAAQ,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;IAE3C,OAAO,KAAK,CAAC,OAAsB,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAA;AAClD,CAAC,CAAA;AAED,oCAAoC;AACpC,oCAAoC;AACpC,oCAAoC;AAEpC,MAAM,SAAS,GAAG,CAAC,EAAE,KAAK,EAAE,QAAQ,EAA4C,EAAE,EAAE;IAClF,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAE7B,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,MAAM,EAAE;YACN,eAAe,EAAE,MAAM,CAAC,wBAAwB;YAChD,KAAK,EAAE,QAAQ;YACf,MAAM,EAAE,QAAQ;YAChB,YAAY,EAAE,QAAQ,GAAG,CAAC;SAC3B;QACD,IAAI,EAAE;YACJ,KAAK,EAAE,KAAK,IAAI,MAAM,CAAC,uBAAuB;SAC/C;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import React from 'react'\nimport { StyleSheet, View } from 'react-native'\nimport type { ColorValue, StyleProp, ViewStyle } from 'react-native'\nimport { SvgXml } from 'react-native-svg'\nimport type { XmlProps } from 'react-native-svg'\nimport { useFontScale, useTheme } from '../../hooks'\n\n// @ts-ignore\nimport * as accounts from '@planningcenter/icons/paths/accounts'\n// @ts-ignore\nimport * as api from '@planningcenter/icons/paths/api'\n// @ts-ignore\nimport * as brand from '@planningcenter/icons/paths/brand'\n// @ts-ignore\nimport * as calendar from '@planningcenter/icons/paths/calendar'\n// @ts-ignore\nimport * as chat from '@planningcenter/icons/paths/chat'\n// @ts-ignore\nimport * as churchCenter from '@planningcenter/icons/paths/church-center'\n// @ts-ignore\nimport * as general from '@planningcenter/icons/paths/general'\n// @ts-ignore\nimport * as groups from '@planningcenter/icons/paths/groups'\n// @ts-ignore\nimport * as logomark from '@planningcenter/icons/paths/logomark'\n// @ts-ignore\nimport * as people from '@planningcenter/icons/paths/people'\n// @ts-ignore\nimport * as services from '@planningcenter/icons/paths/services'\n// @ts-ignore\nimport * as publishing from '@planningcenter/icons/paths/publishing'\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} as const\n\nexport type IconStyle = ViewStyle & {\n  fontSize?: number\n  color?: string\n}\n\nexport type IconSetName = keyof typeof ICONS\nexport type IconString = `${IconSetName}.${(typeof ICONS)[IconSetName]}`\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]?.[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 React from 'react'\nimport { StyleSheet, View } from 'react-native'\nimport type { ColorValue, StyleProp, ViewStyle } from 'react-native'\nimport { SvgXml } from 'react-native-svg'\nimport type { XmlProps } from 'react-native-svg'\nimport { useFontScale, useTheme } from '../../hooks'\n\nimport * 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 services from '@planningcenter/icons/paths/services'\nimport * as publishing from '@planningcenter/icons/paths/publishing'\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} 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\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"]}

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

@@ -19,4 +19,5 @@ export * from './text_inline_button';
 export * from './text';
 export * from './toggle_button';
 export * from './keyboard_view';
+export * from './pressable_row';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/display/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAA;AAC9B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,sBAAsB,CAAA;AACpC,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,WAAW,CAAA;AACzB,cAAc,eAAe,CAAA;AAC7B,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,4BAA4B,CAAA;AAC1C,cAAc,4BAA4B,CAAA;AAC1C,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,sBAAsB,CAAA;AACpC,cAAc,QAAQ,CAAA;AACtB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,iBAAiB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/display/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAA;AAC9B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,sBAAsB,CAAA;AACpC,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,WAAW,CAAA;AACzB,cAAc,eAAe,CAAA;AAC7B,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,4BAA4B,CAAA;AAC1C,cAAc,4BAA4B,CAAA;AAC1C,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,sBAAsB,CAAA;AACpC,cAAc,QAAQ,CAAA;AACtB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,iBAAiB,CAAA"}

package/build/components/display/index.js

@@ -19,4 +19,5 @@ export * from './text_inline_button';
 export * from './text';
 export * from './toggle_button';
 export * from './keyboard_view';
+export * from './pressable_row';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/display/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAA;AAC9B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,sBAAsB,CAAA;AACpC,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,WAAW,CAAA;AACzB,cAAc,eAAe,CAAA;AAC7B,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,4BAA4B,CAAA;AAC1C,cAAc,4BAA4B,CAAA;AAC1C,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,sBAAsB,CAAA;AACpC,cAAc,QAAQ,CAAA;AACtB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,iBAAiB,CAAA","sourcesContent":["export * from './avatar_group'\nexport * from './avatar'\nexport * from './badge'\nexport * from './banner_collapsible'\nexport * from './banner'\nexport * from './button'\nexport * from './child_notice'\nexport * from './heading'\nexport * from './icon_button'\nexport * from './icon'\nexport * from './image'\nexport * from './image_attachment_preview'\nexport * from './video_attachment_preview'\nexport * from './person'\nexport * from './spinner'\nexport * from './switch'\nexport * from './text_button'\nexport * from './text_inline_button'\nexport * from './text'\nexport * from './toggle_button'\nexport * from './keyboard_view'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/display/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAA;AAC9B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,sBAAsB,CAAA;AACpC,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,WAAW,CAAA;AACzB,cAAc,eAAe,CAAA;AAC7B,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,4BAA4B,CAAA;AAC1C,cAAc,4BAA4B,CAAA;AAC1C,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,sBAAsB,CAAA;AACpC,cAAc,QAAQ,CAAA;AACtB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,iBAAiB,CAAA","sourcesContent":["export * from './avatar_group'\nexport * from './avatar'\nexport * from './badge'\nexport * from './banner_collapsible'\nexport * from './banner'\nexport * from './button'\nexport * from './child_notice'\nexport * from './heading'\nexport * from './icon_button'\nexport * from './icon'\nexport * from './image'\nexport * from './image_attachment_preview'\nexport * from './video_attachment_preview'\nexport * from './person'\nexport * from './spinner'\nexport * from './switch'\nexport * from './text_button'\nexport * from './text_inline_button'\nexport * from './text'\nexport * from './toggle_button'\nexport * from './keyboard_view'\nexport * from './pressable_row'\n"]}

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

@@ -0,0 +1,14 @@
+import { PropsWithChildren } from 'react';
+import { ViewStyle } from 'react-native';
+import { IconProps } from './icon';
+export interface PressableRowProps extends PropsWithChildren {
+    isActive?: boolean;
+    onPress: () => void;
+    style?: ViewStyle;
+    textStyle?: any;
+    text: string;
+    iconPath?: IconProps['name'];
+    iconColor?: string;
+}
+export declare const PressableRow: ({ children, isActive, onPress, style, text, textStyle, iconPath, iconColor, }: PressableRowProps) => import("react").JSX.Element;
+//# sourceMappingURL=pressable_row.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pressable_row.d.ts","sourceRoot":"","sources":["../../../src/components/display/pressable_row.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAoB,SAAS,EAAE,MAAM,cAAc,CAAA;AAE1D,OAAO,EAAQ,SAAS,EAAE,MAAM,QAAQ,CAAA;AAGxC,MAAM,WAAW,iBAAkB,SAAQ,iBAAiB;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,SAAS,CAAC,EAAE,GAAG,CAAA;IACf,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAA;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,eAAO,MAAM,YAAY,kFAStB,iBAAiB,gCAsBnB,CAAA"}

package/build/components/display/pressable_row.js

@@ -0,0 +1,65 @@
+import { PlatformPressable } from '@react-navigation/elements';
+import { StyleSheet, View } from 'react-native';
+import { useTheme } from '../../hooks';
+import { Icon } from './icon';
+import { Text } from './text';
+export const PressableRow = ({ children, isActive, onPress, style, text, textStyle, iconPath, iconColor, }) => {
+    const styles = useRowStyles({ isActive, iconColor });
+    return (<PlatformPressable style={styles.container} onPress={onPress} accessibilityRole="radio" accessibilityState={{ selected: isActive }}>
+      <View style={[styles.innerContainer, style]}>
+        {children}
+        <Text style={textStyle}>{text}</Text>
+        <Icon name={iconPath || 'general.check'} size={16} style={styles.rowIconRight} accessibilityElementsHidden/>
+      </View>
+    </PlatformPressable>);
+};
+const ASPECT_RATIO = 16 / 9;
+const THUMBNAIL_WIDTH = 80;
+const THUMBNAIL_HEIGHT = THUMBNAIL_WIDTH / ASPECT_RATIO;
+const useRowStyles = ({ isActive = false, iconColor, } = {}) => {
+    const theme = useTheme();
+    return StyleSheet.create({
+        container: {
+            paddingLeft: 16,
+        },
+        innerContainer: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 12,
+            borderBottomWidth: 1,
+            borderBottomColor: theme.colors.fillColorNeutral050Base,
+            paddingVertical: 12,
+            paddingRight: 16,
+        },
+        borderLessRow: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 12,
+            paddingVertical: 12,
+            paddingRight: 16,
+            paddingLeft: 16,
+        },
+        viewMoreButton: {
+            flex: 1,
+        },
+        row: {},
+        rowImage: {
+            width: THUMBNAIL_WIDTH,
+            height: THUMBNAIL_HEIGHT,
+            borderRadius: 4,
+        },
+        rowContent: {
+            flexShrink: 1,
+        },
+        rowIconRight: {
+            marginLeft: 'auto',
+            color: iconColor || theme.colors.iconColorDefaultDim,
+            opacity: isActive ? 1 : 0,
+        },
+        rowTitle: {
+            fontSize: 16,
+            flexShrink: 1,
+        },
+    });
+};
+//# sourceMappingURL=pressable_row.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pressable_row.js","sourceRoot":"","sources":["../../../src/components/display/pressable_row.tsx"],"names":[],"mappings":"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","sourcesContent":["import { PlatformPressable } from '@react-navigation/elements'\nimport { PropsWithChildren } from 'react'\nimport { StyleSheet, View, ViewStyle } from 'react-native'\nimport { useTheme } from '../../hooks'\nimport { Icon, IconProps } from './icon'\nimport { Text } from './text'\n\nexport interface PressableRowProps extends PropsWithChildren {\n  isActive?: boolean\n  onPress: () => void\n  style?: ViewStyle\n  textStyle?: any\n  text: string\n  iconPath?: IconProps['name']\n  iconColor?: string\n}\n\nexport const PressableRow = ({\n  children,\n  isActive,\n  onPress,\n  style,\n  text,\n  textStyle,\n  iconPath,\n  iconColor,\n}: PressableRowProps) => {\n  const styles = useRowStyles({ isActive, iconColor })\n\n  return (\n    <PlatformPressable\n      style={styles.container}\n      onPress={onPress}\n      accessibilityRole=\"radio\"\n      accessibilityState={{ selected: isActive }}\n    >\n      <View style={[styles.innerContainer, style]}>\n        {children}\n        <Text style={textStyle}>{text}</Text>\n        <Icon\n          name={iconPath || 'general.check'}\n          size={16}\n          style={styles.rowIconRight}\n          accessibilityElementsHidden\n        />\n      </View>\n    </PlatformPressable>\n  )\n}\n\nconst ASPECT_RATIO = 16 / 9\nconst THUMBNAIL_WIDTH = 80\nconst THUMBNAIL_HEIGHT = THUMBNAIL_WIDTH / ASPECT_RATIO\n\nconst useRowStyles = ({\n  isActive = false,\n  iconColor,\n}: { isActive?: boolean; iconColor?: string } = {}) => {\n  const theme = useTheme()\n  return StyleSheet.create({\n    container: {\n      paddingLeft: 16,\n    },\n    innerContainer: {\n      flexDirection: 'row',\n      alignItems: 'center',\n      gap: 12,\n      borderBottomWidth: 1,\n      borderBottomColor: theme.colors.fillColorNeutral050Base,\n      paddingVertical: 12,\n      paddingRight: 16,\n    },\n    borderLessRow: {\n      flexDirection: 'row',\n      alignItems: 'center',\n      gap: 12,\n      paddingVertical: 12,\n      paddingRight: 16,\n      paddingLeft: 16,\n    },\n    viewMoreButton: {\n      flex: 1,\n    },\n    row: {},\n    rowImage: {\n      width: THUMBNAIL_WIDTH,\n      height: THUMBNAIL_HEIGHT,\n      borderRadius: 4,\n    },\n    rowContent: {\n      flexShrink: 1,\n    },\n    rowIconRight: {\n      marginLeft: 'auto',\n      color: iconColor || theme.colors.iconColorDefaultDim,\n      opacity: isActive ? 1 : 0,\n    },\n    rowTitle: {\n      fontSize: 16,\n      flexShrink: 1,\n    },\n  })\n}\n"]}

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

@@ -1,7 +1,8 @@
 import React from 'react';
 import type { PressableProps } from 'react-native';
 import { IconString } from './icon';
-export interface ToggleButtonProps extends PressableProps {
+type RestrictedPressableProps = Omit<PressableProps, 'onLongPress'>;
+export interface ToggleButtonProps extends RestrictedPressableProps {
     /**
      * Pressable container styles
      */
@@ -44,4 +45,5 @@ export interface ToggleButtonProps extends PressableProps {
     hapticFeedback?: boolean;
 }
 export declare function ToggleButton({ active, adjustsFontSizeToFit, allowFontScaling, iconNameLeft, iconNameRight, maxFontSizeMultiplier, minimumFontScale, title, style, hapticFeedback, onPress, ...props }: ToggleButtonProps): React.JSX.Element;
+export {};
 //# sourceMappingURL=toggle_button.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"toggle_button.d.ts","sourceRoot":"","sources":["../../../src/components/display/toggle_button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,cAAc,EAAyB,MAAM,cAAc,CAAA;AAazE,OAAO,EAAQ,UAAU,EAAE,MAAM,QAAQ,CAAA;AAQzC,MAAM,WAAW,iBAAkB,SAAQ,cAAc;IACvD;;OAEG;IACH,MAAM,EAAE,OAAO,CAAA;IACf;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B;;OAEG;IACH,YAAY,CAAC,EAAE,UAAU,CAAA;IACzB;;OAEG;IACH,aAAa,CAAC,EAAE,UAAU,CAAA;IAC1B;;OAEG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAA;IAC/B;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB;AAED,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,oBAA4B,EAC5B,gBAAuB,EACvB,YAAY,EACZ,aAAa,EACb,qBAAyD,EACzD,gBAAgB,EAChB,KAAK,EACL,KAAK,EACL,cAAqB,EACrB,OAAO,EACP,GAAG,KAAK,EACT,EAAE,iBAAiB,qBAsDnB"}
+{"version":3,"file":"toggle_button.d.ts","sourceRoot":"","sources":["../../../src/components/display/toggle_button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,cAAc,EAAyB,MAAM,cAAc,CAAA;AAazE,OAAO,EAAQ,UAAU,EAAE,MAAM,QAAQ,CAAA;AAWzC,KAAK,wBAAwB,GAAG,IAAI,CAAC,cAAc,EAAE,aAAa,CAAC,CAAA;AAMnE,MAAM,WAAW,iBAAkB,SAAQ,wBAAwB;IACjE;;OAEG;IACH,MAAM,EAAE,OAAO,CAAA;IACf;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B;;OAEG;IACH,YAAY,CAAC,EAAE,UAAU,CAAA;IACzB;;OAEG;IACH,aAAa,CAAC,EAAE,UAAU,CAAA;IAC1B;;OAEG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAA;IAC/B;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB;AAED,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,oBAA4B,EAC5B,gBAAuB,EACvB,YAAY,EACZ,aAAa,EACb,qBAAyD,EACzD,gBAAgB,EAChB,KAAK,EACL,KAAK,EACL,cAAqB,EACrB,OAAO,EACP,GAAG,KAAK,EACT,EAAE,iBAAiB,qBAwDnB"}

package/build/components/display/toggle_button.js

@@ -21,7 +21,7 @@ export function ToggleButton({ active, adjustsFontSizeToFit = false, allowFontSc
             ...styles.pressable,
             ...(pressed ? platformPressedOpacityStyle : null),
             ...overrideStyles,
-        })} accessibilityRole="togglebutton" accessibilityState={{ checked: active }} android_ripple={{ color: androidRippleColor, borderless: false, foreground: true }} onPress={handlePress} {...props}>
+        })} accessibilityRole="togglebutton" accessibilityState={{ checked: active }} android_ripple={{ color: androidRippleColor, borderless: false, foreground: true }} onPress={handlePress} accessibilityShowsLargeContentViewer accessibilityLargeContentTitle={title} {...props}>
       {iconNameLeft && (<Icon name={iconNameLeft} style={styles.icon} maxFontSizeMultiplier={maxFontSizeMultiplier}/>)}
       <Text allowFontScaling={allowFontScaling} minimumFontScale={minimumFontScale} maxFontSizeMultiplier={maxFontSizeMultiplier} adjustsFontSizeToFit={adjustsFontSizeToFit} numberOfLines={1} style={styles.text} variant="tertiary">
         {title}

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

@@ -1 +1 @@
-{"version":3,"file":"toggle_button.js","sourceRoot":"","sources":["../../../src/components/display/toggle_button.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react'\nimport { Pressable, StyleSheet } from 'react-native'\nimport type { PressableProps, GestureResponderEvent } from 'react-native'\nimport { Text } from './text'\nimport {\n  useTheme,\n  useFontScale,\n  useCreateAndroidRippleColor,\n  useInteractionGhostBackgroundColor,\n} from '../../hooks'\nimport {\n  MAX_FONT_SIZE_MULTIPLIER_LANDMARK,\n  platformFontWeightBold,\n  platformPressedOpacityStyle,\n} from '../../utils'\nimport { Icon, IconString } from './icon'\nimport { tokens } from '../../vendor/tapestry/tokens'\nimport { Haptic } from '../../utils/native_adapters/configuration'\n\n// =================================\n// ====== Component ================\n// =================================\n\nexport interface ToggleButtonProps extends PressableProps {\n  /**\n   * Pressable container styles\n   */\n  active: boolean\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   * 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   * 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   * Renders as text within the button\n   */\n  title: string\n  /**\n   * Pressable container styles\n   */\n  style?: PressableProps['style']\n  /**\n   * Specifies whether haptic feedback should be enabled.\n   */\n  hapticFeedback?: boolean\n}\n\nexport function ToggleButton({\n  active,\n  adjustsFontSizeToFit = false,\n  allowFontScaling = true,\n  iconNameLeft,\n  iconNameRight,\n  maxFontSizeMultiplier = MAX_FONT_SIZE_MULTIPLIER_LANDMARK,\n  minimumFontScale,\n  title,\n  style,\n  hapticFeedback = true,\n  onPress,\n  ...props\n}: ToggleButtonProps) {\n  const styles = useStyles({ active, maxFontSizeMultiplier })\n  const { colors } = useTheme()\n  const overrideStyles = StyleSheet.flatten(style) // Ensures the pressed styles still get applied\n\n  const baseRippleColor = active ? colors.interaction : colors.fillColorNeutral050Base\n  const androidRippleColor = useCreateAndroidRippleColor({ color: baseRippleColor })\n\n  const handlePress = (event: GestureResponderEvent) => {\n    if (hapticFeedback) Haptic.impactLight()\n\n    onPress?.(event)\n  }\n\n  return (\n    <Pressable\n      style={({ pressed }) => ({\n        ...styles.pressable,\n        ...(pressed ? platformPressedOpacityStyle : null),\n        ...overrideStyles,\n      })}\n      accessibilityRole=\"togglebutton\"\n      accessibilityState={{ checked: active }}\n      android_ripple={{ color: androidRippleColor, borderless: false, foreground: true }}\n      onPress={handlePress}\n      {...props}\n    >\n      {iconNameLeft && (\n        <Icon\n          name={iconNameLeft}\n          style={styles.icon}\n          maxFontSizeMultiplier={maxFontSizeMultiplier}\n        />\n      )}\n      <Text\n        allowFontScaling={allowFontScaling}\n        minimumFontScale={minimumFontScale}\n        maxFontSizeMultiplier={maxFontSizeMultiplier}\n        adjustsFontSizeToFit={adjustsFontSizeToFit}\n        numberOfLines={1}\n        style={styles.text}\n        variant=\"tertiary\"\n      >\n        {title}\n      </Text>\n      {iconNameRight && (\n        <Icon\n          name={iconNameRight}\n          style={styles.icon}\n          maxFontSizeMultiplier={maxFontSizeMultiplier}\n        />\n      )}\n    </Pressable>\n  )\n}\n\n// =================================\n// ====== Styles ===================\n// =================================\n\nconst useStyles = ({ active, maxFontSizeMultiplier }: Partial<ToggleButtonProps>) => {\n  const { colors, button } = useTheme()\n  const fontScale = useFontScale({ maxFontSizeMultiplier })\n\n  const activeBackgroundColor = useInteractionGhostBackgroundColor()\n\n  const color = active ? colors.interaction : colors.textColorDefaultSecondary\n\n  return StyleSheet.create({\n    pressable: {\n      borderRadius: button.borderRadius * fontScale,\n      borderWidth: 1,\n      borderColor: active ? colors.interaction : colors.borderColorDefaultBase,\n      backgroundColor: active ? activeBackgroundColor : 'transparent',\n      paddingHorizontal: 16 * fontScale,\n      flexDirection: 'row',\n      alignItems: 'center',\n      justifyContent: 'center',\n      height: 32 * fontScale,\n      gap: 6 * fontScale,\n      overflow: 'hidden',\n    },\n    text: {\n      textAlign: 'center',\n      textAlignVertical: 'center',\n      includeFontPadding: false,\n      fontWeight: platformFontWeightBold,\n      color,\n    },\n    icon: {\n      fontSize: tokens.fontSizeSm * fontScale,\n      color,\n    },\n  })\n}\n"]}
+{"version":3,"file":"toggle_button.js","sourceRoot":"","sources":["../../../src/components/display/toggle_button.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react'\nimport { Pressable, StyleSheet } from 'react-native'\nimport type { PressableProps, GestureResponderEvent } from 'react-native'\nimport { Text } from './text'\nimport {\n  useTheme,\n  useFontScale,\n  useCreateAndroidRippleColor,\n  useInteractionGhostBackgroundColor,\n} from '../../hooks'\nimport {\n  MAX_FONT_SIZE_MULTIPLIER_LANDMARK,\n  platformFontWeightBold,\n  platformPressedOpacityStyle,\n} from '../../utils'\nimport { Icon, IconString } from './icon'\nimport { tokens } from '../../vendor/tapestry/tokens'\nimport { Haptic } from '../../utils/native_adapters/configuration'\n\n// =================================\n// ====== Constants ================\n// =================================\n\n// We are omitting `onLongPress` because we are instead supporting `accessibilityShowsLargeContentViewer`.\n// This is triggered by an `onLongPress` event when an iOS device is in Apple's accessible font scale range.\n// Triggering this prop will display an almost full screen iOS a11y button.\ntype RestrictedPressableProps = Omit<PressableProps, 'onLongPress'>\n\n// =================================\n// ====== Component ================\n// =================================\n\nexport interface ToggleButtonProps extends RestrictedPressableProps {\n  /**\n   * Pressable container styles\n   */\n  active: boolean\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   * 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   * 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   * Renders as text within the button\n   */\n  title: string\n  /**\n   * Pressable container styles\n   */\n  style?: PressableProps['style']\n  /**\n   * Specifies whether haptic feedback should be enabled.\n   */\n  hapticFeedback?: boolean\n}\n\nexport function ToggleButton({\n  active,\n  adjustsFontSizeToFit = false,\n  allowFontScaling = true,\n  iconNameLeft,\n  iconNameRight,\n  maxFontSizeMultiplier = MAX_FONT_SIZE_MULTIPLIER_LANDMARK,\n  minimumFontScale,\n  title,\n  style,\n  hapticFeedback = true,\n  onPress,\n  ...props\n}: ToggleButtonProps) {\n  const styles = useStyles({ active, maxFontSizeMultiplier })\n  const { colors } = useTheme()\n  const overrideStyles = StyleSheet.flatten(style) // Ensures the pressed styles still get applied\n\n  const baseRippleColor = active ? colors.interaction : colors.fillColorNeutral050Base\n  const androidRippleColor = useCreateAndroidRippleColor({ color: baseRippleColor })\n\n  const handlePress = (event: GestureResponderEvent) => {\n    if (hapticFeedback) Haptic.impactLight()\n\n    onPress?.(event)\n  }\n\n  return (\n    <Pressable\n      style={({ pressed }) => ({\n        ...styles.pressable,\n        ...(pressed ? platformPressedOpacityStyle : null),\n        ...overrideStyles,\n      })}\n      accessibilityRole=\"togglebutton\"\n      accessibilityState={{ checked: active }}\n      android_ripple={{ color: androidRippleColor, borderless: false, foreground: true }}\n      onPress={handlePress}\n      accessibilityShowsLargeContentViewer\n      accessibilityLargeContentTitle={title}\n      {...props}\n    >\n      {iconNameLeft && (\n        <Icon\n          name={iconNameLeft}\n          style={styles.icon}\n          maxFontSizeMultiplier={maxFontSizeMultiplier}\n        />\n      )}\n      <Text\n        allowFontScaling={allowFontScaling}\n        minimumFontScale={minimumFontScale}\n        maxFontSizeMultiplier={maxFontSizeMultiplier}\n        adjustsFontSizeToFit={adjustsFontSizeToFit}\n        numberOfLines={1}\n        style={styles.text}\n        variant=\"tertiary\"\n      >\n        {title}\n      </Text>\n      {iconNameRight && (\n        <Icon\n          name={iconNameRight}\n          style={styles.icon}\n          maxFontSizeMultiplier={maxFontSizeMultiplier}\n        />\n      )}\n    </Pressable>\n  )\n}\n\n// =================================\n// ====== Styles ===================\n// =================================\n\nconst useStyles = ({ active, maxFontSizeMultiplier }: Partial<ToggleButtonProps>) => {\n  const { colors, button } = useTheme()\n  const fontScale = useFontScale({ maxFontSizeMultiplier })\n\n  const activeBackgroundColor = useInteractionGhostBackgroundColor()\n\n  const color = active ? colors.interaction : colors.textColorDefaultSecondary\n\n  return StyleSheet.create({\n    pressable: {\n      borderRadius: button.borderRadius * fontScale,\n      borderWidth: 1,\n      borderColor: active ? colors.interaction : colors.borderColorDefaultBase,\n      backgroundColor: active ? activeBackgroundColor : 'transparent',\n      paddingHorizontal: 16 * fontScale,\n      flexDirection: 'row',\n      alignItems: 'center',\n      justifyContent: 'center',\n      height: 32 * fontScale,\n      gap: 6 * fontScale,\n      overflow: 'hidden',\n    },\n    text: {\n      textAlign: 'center',\n      textAlignVertical: 'center',\n      includeFontPadding: false,\n      fontWeight: platformFontWeightBold,\n      color,\n    },\n    icon: {\n      fontSize: tokens.fontSizeSm * fontScale,\n      color,\n    },\n  })\n}\n"]}

package/build/components/primitive/avatar_primitive.d.ts

@@ -28,6 +28,8 @@ type AvatarPresenceType = (typeof AVATAR_PRESENCE_TYPES)[keyof typeof AVATAR_PRE
 interface AvatarRootProps {
     children: React.ReactNode;
     size?: AvatarSize;
+    style?: ViewProps['style'];
+    maxFontSizeMultiplier?: number;
 }
 type AvatarMaskProps = ViewProps;
 interface AvatarImageProps extends Omit<ImageProps, 'source' | 'alt'> {

package/build/components/primitive/avatar_primitive.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"avatar_primitive.d.ts","sourceRoot":"","sources":["../../../src/components/primitive/avatar_primitive.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAA;AAC7E,OAAO,EAAoB,SAAS,EAAE,MAAM,cAAc,CAAA;AAE1D,OAAO,EAAQ,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAClD,OAAO,EAAS,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAkBpD,KAAK,gBAAgB,GAAG;IACtB,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAAC,CAAA;IAC/B,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAA;IACjC,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAAC,CAAA;IACjD,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAAC,CAAA;IACvC,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAA;IACjC,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,CAAA;IAC5C,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAAC,CAAA;CAChC,CAAA;wBAEwB,gBAAgB;AAAzC,wBAAyC;AACzC,YAAY,EACV,gBAAgB,EAChB,wBAAwB,EACxB,mBAAmB,EACnB,gBAAgB,EAChB,eAAe,EACf,eAAe,GAChB,CAAA;AAMD,QAAA,MAAM,YAAY;;;;CAIR,CAAA;AAEV,QAAA,MAAM,qBAAqB;;;CAGjB,CAAA;AAGV,KAAK,UAAU,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,OAAO,YAAY,CAAC,CAAA;AAClE,KAAK,kBAAkB,GAAG,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,OAAO,qBAAqB,CAAC,CAAA;AA4C5F,UAAU,eAAe;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,IAAI,CAAC,EAAE,UAAU,CAAA;CAClB;AAmBD,KAAK,eAAe,GAAG,SAAS,CAAA;AAkBhC,UAAU,gBAAiB,SAAQ,IAAI,CAAC,UAAU,EAAE,QAAQ,GAAG,KAAK,CAAC;IACnE,SAAS,EAAE,MAAM,CAAA;CAClB;AAwBD,UAAU,wBAAwB;IAChC,IAAI,CAAC,EAAE,UAAU,CAAA;CAClB;AA0BD,UAAU,gBAAgB;IACxB,UAAU,EAAE,MAAM,EAAE,CAAA;CACrB;AAuID,UAAU,mBAAoB,SAAQ,SAAS;IAC7C,QAAQ,EAAE,kBAAkB,CAAA;CAC7B"}
+{"version":3,"file":"avatar_primitive.d.ts","sourceRoot":"","sources":["../../../src/components/primitive/avatar_primitive.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAA;AAC7E,OAAO,EAAoB,SAAS,EAAE,MAAM,cAAc,CAAA;AAE1D,OAAO,EAAQ,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAClD,OAAO,EAAS,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAkBpD,KAAK,gBAAgB,GAAG;IACtB,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAAC,CAAA;IAC/B,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAA;IACjC,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAAC,CAAA;IACjD,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAAC,CAAA;IACvC,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAA;IACjC,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,CAAA;IAC5C,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAAC,CAAA;CAChC,CAAA;wBAEwB,gBAAgB;AAAzC,wBAAyC;AACzC,YAAY,EACV,gBAAgB,EAChB,wBAAwB,EACxB,mBAAmB,EACnB,gBAAgB,EAChB,eAAe,EACf,eAAe,GAChB,CAAA;AAMD,QAAA,MAAM,YAAY;;;;CAIR,CAAA;AAEV,QAAA,MAAM,qBAAqB;;;CAGjB,CAAA;AAGV,KAAK,UAAU,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,OAAO,YAAY,CAAC,CAAA;AAClE,KAAK,kBAAkB,GAAG,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,OAAO,qBAAqB,CAAC,CAAA;AA6C5F,UAAU,eAAe;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAA;IAC1B,qBAAqB,CAAC,EAAE,MAAM,CAAA;CAC/B;AA0BD,KAAK,eAAe,GAAG,SAAS,CAAA;AAmBhC,UAAU,gBAAiB,SAAQ,IAAI,CAAC,UAAU,EAAE,QAAQ,GAAG,KAAK,CAAC;IACnE,SAAS,EAAE,MAAM,CAAA;CAClB;AAwBD,UAAU,wBAAwB;IAChC,IAAI,CAAC,EAAE,UAAU,CAAA;CAClB;AA0BD,UAAU,gBAAgB;IACxB,UAAU,EAAE,MAAM,EAAE,CAAA;CACrB;AAuID,UAAU,mBAAoB,SAAQ,SAAS;IAC7C,QAAQ,EAAE,kBAAkB,CAAA;CAC7B"}

package/build/components/primitive/avatar_primitive.js

@@ -53,24 +53,25 @@ function useAvatarContext() {
     }
     return context;
 }
-function AvatarRoot({ children, size = 'md' }) {
+function AvatarRoot({ children, size = 'md', style, maxFontSizeMultiplier = MAX_FONT_SIZE_MULTIPLIER, }) {
     const [allImagesLoaded, setAllImagesLoaded] = useState(false);
-    const styles = useStyles({ size });
-    return (<AvatarContext.Provider value={{ size, allImagesLoaded, setAllImagesLoaded }}>
-      <View style={styles.rootContainer}>{children}</View>
+    const styles = useStyles({ size, maxFontSizeMultiplier });
+    return (<AvatarContext.Provider value={{ size, allImagesLoaded, setAllImagesLoaded, maxFontSizeMultiplier }}>
+      <View style={[styles.rootContainer, style]}>{children}</View>
     </AvatarContext.Provider>);
 }
 AvatarRoot.displayName = 'Avatar.Root';
 function AvatarMask({ children, ...props }) {
-    const styles = useStyles();
+    const { maxFontSizeMultiplier } = useAvatarContext();
+    const styles = useStyles({ maxFontSizeMultiplier });
     return (<View style={styles.mask} {...props}>
       {children}
     </View>);
 }
 AvatarMask.displayName = 'Avatar.Mask';
 function AvatarImage({ sourceUri, ...props }) {
-    const { size } = useAvatarContext();
-    const fontScale = useFontScale({ maxFontSizeMultiplier: MAX_FONT_SIZE_MULTIPLIER });
+    const { size, maxFontSizeMultiplier } = useAvatarContext();
+    const fontScale = useFontScale({ maxFontSizeMultiplier });
     const scaledAvatarSize = AVATAR_PX[size] * fontScale;
     return <Image source={{ uri: sourceUri }} loaderSize={scaledAvatarSize} {...props} alt=""/>;
 }
@@ -79,9 +80,9 @@ function AvatarGroupImage({ sourceUri, style, onLoad }) {
     return (<Image source={{ uri: sourceUri }} hideLoader wrapperStyle={style} onLoad={onLoad} alt=""/>);
 }
 function AvatarImageFallback({ name = 'general.person' }) {
-    const { size } = useAvatarContext();
-    const styles = useStyles();
-    const fontScale = useFontScale({ maxFontSizeMultiplier: MAX_FONT_SIZE_MULTIPLIER });
+    const { size, maxFontSizeMultiplier } = useAvatarContext();
+    const styles = useStyles({ maxFontSizeMultiplier });
+    const fontScale = useFontScale({ maxFontSizeMultiplier });
     const scaledIconSize = AVATAR_FALLBACK_ICON_PX[size] * fontScale;
     return (<View style={styles.fallbackContainer}>
       <Icon name={name} size={scaledIconSize} style={styles.fallbackIcon} accessibilityElementsHidden={true}/>
@@ -89,8 +90,8 @@ function AvatarImageFallback({ name = 'general.person' }) {
 }
 AvatarImageFallback.displayName = 'Avatar.ImageFallback';
 function AvatarGroup({ sourceUris }) {
-    const styles = useStyles();
-    const { setAllImagesLoaded } = useAvatarContext();
+    const { setAllImagesLoaded, maxFontSizeMultiplier } = useAvatarContext();
+    const styles = useStyles({ maxFontSizeMultiplier });
     const [loadingStatus, setLoadingStatus] = useState({
         0: false,
         1: false,
@@ -146,9 +147,9 @@ AvatarGroup.displayName = 'Avatar.Group';
 // ====== AvatarGroupLoader   =========
 // =================================
 function AvatarGroupLoader() {
-    const { size, allImagesLoaded } = useAvatarContext();
-    const styles = useStyles({ size });
-    const fontScale = useFontScale({ maxFontSizeMultiplier: MAX_FONT_SIZE_MULTIPLIER });
+    const { size, allImagesLoaded, maxFontSizeMultiplier } = useAvatarContext();
+    const styles = useStyles({ size, maxFontSizeMultiplier });
+    const fontScale = useFontScale({ maxFontSizeMultiplier });
     const scaledSpinnerSize = AVATAR_PX[size] * fontScale;
     if (allImagesLoaded)
         return null;
@@ -158,14 +159,14 @@ function AvatarGroupLoader() {
 }
 AvatarGroupLoader.displayName = 'Avatar.GroupLoader';
 function AvatarPresence({ presence, ...props }) {
-    const { size } = useAvatarContext();
-    const styles = useStyles({ size, presence });
+    const { size, maxFontSizeMultiplier } = useAvatarContext();
+    const styles = useStyles({ size, presence, maxFontSizeMultiplier });
     return <View style={styles.presence} {...props}/>;
 }
 AvatarPresence.displayName = 'Avatar.Presence';
-const useStyles = ({ size = 'md', presence = 'offline' } = {}) => {
+const useStyles = ({ size = 'md', presence = 'offline', maxFontSizeMultiplier = MAX_FONT_SIZE_MULTIPLIER, } = {}) => {
     const { colors } = useTheme();
-    const fontScale = useFontScale({ maxFontSizeMultiplier: MAX_FONT_SIZE_MULTIPLIER });
+    const fontScale = useFontScale({ maxFontSizeMultiplier });
     const PRESENCE_COLOR = {
         online: colors.fillColorInteractionOnlineDefault,
         offline: colors.iconColorDefaultDisabled,