@planningcenter/chat-react-native 3.0.0 → 3.1.0-rc.1

package/build/components/display/badge.js

@@ -92,6 +92,7 @@ const useStyles = ({ appearance = 'neutral', maxFontSizeMultiplier, variant = 'd
             flexDirection: 'row',
             alignItems: 'center',
             justifyContent: 'center',
+            alignSelf: 'flex-start',
             borderRadius: variantStylesMap[variant].borderRadius,
             borderWidth: variantStylesMap[variant].borderWidth,
             borderColor: statusColorMap[appearance].background,
@@ -116,12 +117,14 @@ const useStyles = ({ appearance = 'neutral', maxFontSizeMultiplier, variant = 'd
             color: variantStylesMap[variant].textColor,
             fontWeight: variantStylesMap[variant].fontWeight,
             fontSize: badgeFontSize,
+            lineHeight: 15 * fontScale,
         },
         metaLabel: {
             paddingHorizontal: variantStylesMap[variant].paddingHorizontal,
             fontSize: badgeFontSize,
             flexShrink: 1,
             paddingLeft: variantStylesMap[variant].metaLabelPaddingLeft,
+            lineHeight: 15 * fontScale,
         },
     });
 };

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 from 'react'\nimport { StyleSheet, View } from 'react-native'\nimport type { ViewStyle, TextStyle } from 'react-native'\nimport Svg, { Path, Defs, LinearGradient, Stop } from 'react-native-svg'\nimport { useFontScale, useTheme } from '../../hooks'\nimport { Icon } from './icon'\nimport { Text } from './text'\nimport { platformFontWeightMedium, space } from '../../utils'\nimport { tokens } from '../../vendor/tapestry/tokens'\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'\n\nconst PRODUCT_LOGO_COMPONENT_MAP = {\n  groups: GroupsLogo,\n  services: ServicesIcon,\n} as const\n\n// =================================\n// ====== Component ================\n// =================================\n\ninterface 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?: string\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\nexport function Badge({\n  appearance = 'neutral',\n  metaLabel,\n  style,\n  iconName,\n  label,\n  productLogoName,\n  variant = 'default',\n  maxFontSizeMultiplier,\n}: BadgeProps) {\n  const styles = useStyles({ appearance, maxFontSizeMultiplier, variant })\n  const { showBadgeLogo } = useTheme()\n\n  const isMetaSubtle = variant === 'metaSubtle'\n  const isMeta = variant === 'meta'\n  const hasMetaLabel = Boolean(metaLabel)\n\n  const showLogo = showBadgeLogo && productLogoName && isMeta\n  const ProductLogoSvg = showLogo && PRODUCT_LOGO_COMPONENT_MAP[productLogoName?.toLowerCase()]\n  const badgeLabel = isMetaSubtle && hasMetaLabel ? `${label}:` : label\n\n  return (\n    <View style={[styles.badgeWrapper, style]}>\n      <View style={styles.badge}>\n        {showLogo && ProductLogoSvg && <ProductLogoSvg logoSize={styles.logo.fontSize} />}\n        {iconName && <Icon name={iconName} style={styles.icon} />}\n        <Text variant=\"footnote\" style={styles.label}>\n          {badgeLabel}\n        </Text>\n      </View>\n      {hasMetaLabel && (\n        <Text variant=\"footnote\" style={styles.metaLabel} numberOfLines={1}>\n          {metaLabel}\n        </Text>\n      )}\n    </View>\n  )\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 badgePaddingHorizontal = space(1) * fontScale\n  const badgePaddingVertical = space(0.5) * fontScale\n  const badgeGap = space(0.5) * fontScale\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,\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,\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      alignItems: 'center',\n      justifyContent: 'center',\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    logo: {\n      fontSize: badgeFontSize * fontScale,\n    },\n    label: {\n      color: variantStylesMap[variant].textColor,\n      fontWeight: variantStylesMap[variant].fontWeight,\n      fontSize: badgeFontSize,\n    },\n    metaLabel: {\n      paddingHorizontal: variantStylesMap[variant].paddingHorizontal,\n      fontSize: badgeFontSize,\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 from 'react'\nimport { StyleSheet, View } from 'react-native'\nimport type { ViewStyle, TextStyle } from 'react-native'\nimport Svg, { Path, Defs, LinearGradient, Stop } from 'react-native-svg'\nimport { useFontScale, useTheme } from '../../hooks'\nimport { Icon } from './icon'\nimport { Text } from './text'\nimport { platformFontWeightMedium, space } from '../../utils'\nimport { tokens } from '../../vendor/tapestry/tokens'\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'\n\nconst PRODUCT_LOGO_COMPONENT_MAP = {\n  groups: GroupsLogo,\n  services: ServicesIcon,\n} as const\n\n// =================================\n// ====== Component ================\n// =================================\n\ninterface 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?: string\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\nexport function Badge({\n  appearance = 'neutral',\n  metaLabel,\n  style,\n  iconName,\n  label,\n  productLogoName,\n  variant = 'default',\n  maxFontSizeMultiplier,\n}: BadgeProps) {\n  const styles = useStyles({ appearance, maxFontSizeMultiplier, variant })\n  const { showBadgeLogo } = useTheme()\n\n  const isMetaSubtle = variant === 'metaSubtle'\n  const isMeta = variant === 'meta'\n  const hasMetaLabel = Boolean(metaLabel)\n\n  const showLogo = showBadgeLogo && productLogoName && isMeta\n  const ProductLogoSvg = showLogo && PRODUCT_LOGO_COMPONENT_MAP[productLogoName?.toLowerCase()]\n  const badgeLabel = isMetaSubtle && hasMetaLabel ? `${label}:` : label\n\n  return (\n    <View style={[styles.badgeWrapper, style]}>\n      <View style={styles.badge}>\n        {showLogo && ProductLogoSvg && <ProductLogoSvg logoSize={styles.logo.fontSize} />}\n        {iconName && <Icon name={iconName} style={styles.icon} />}\n        <Text variant=\"footnote\" style={styles.label}>\n          {badgeLabel}\n        </Text>\n      </View>\n      {hasMetaLabel && (\n        <Text variant=\"footnote\" style={styles.metaLabel} numberOfLines={1}>\n          {metaLabel}\n        </Text>\n      )}\n    </View>\n  )\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 badgePaddingHorizontal = space(1) * fontScale\n  const badgePaddingVertical = space(0.5) * fontScale\n  const badgeGap = space(0.5) * fontScale\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,\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,\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      alignItems: 'center',\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    logo: {\n      fontSize: badgeFontSize * fontScale,\n    },\n    label: {\n      color: variantStylesMap[variant].textColor,\n      fontWeight: variantStylesMap[variant].fontWeight,\n      fontSize: badgeFontSize,\n      lineHeight: 15 * fontScale,\n    },\n    metaLabel: {\n      paddingHorizontal: variantStylesMap[variant].paddingHorizontal,\n      fontSize: badgeFontSize,\n      flexShrink: 1,\n      paddingLeft: variantStylesMap[variant].metaLabelPaddingLeft,\n      lineHeight: 15 * fontScale,\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/index.d.ts

@@ -1,16 +1,17 @@
-export * from './avatar';
 export * from './avatar_group';
+export * from './avatar';
 export * from './badge';
-export * from './banner';
 export * from './banner_collapsible';
+export * from './banner';
 export * from './button';
 export * from './heading';
-export * from './icon';
 export * from './icon_button';
+export * from './icon';
 export * from './image';
+export * from './person';
 export * from './spinner';
 export * from './switch';
-export * from './text';
 export * from './text_button';
 export * from './text_inline_button';
+export * from './text';
 //# 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,UAAU,CAAA;AACxB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,sBAAsB,CAAA;AACpC,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,QAAQ,CAAA;AACtB,cAAc,eAAe,CAAA;AAC7B,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,eAAe,CAAA;AAC7B,cAAc,sBAAsB,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,WAAW,CAAA;AACzB,cAAc,eAAe,CAAA;AAC7B,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,sBAAsB,CAAA;AACpC,cAAc,QAAQ,CAAA"}

package/build/components/display/index.js

@@ -1,16 +1,17 @@
-export * from './avatar';
 export * from './avatar_group';
+export * from './avatar';
 export * from './badge';
-export * from './banner';
 export * from './banner_collapsible';
+export * from './banner';
 export * from './button';
 export * from './heading';
-export * from './icon';
 export * from './icon_button';
+export * from './icon';
 export * from './image';
+export * from './person';
 export * from './spinner';
 export * from './switch';
-export * from './text';
 export * from './text_button';
 export * from './text_inline_button';
+export * from './text';
 //# 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,UAAU,CAAA;AACxB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,sBAAsB,CAAA;AACpC,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,QAAQ,CAAA;AACtB,cAAc,eAAe,CAAA;AAC7B,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,eAAe,CAAA;AAC7B,cAAc,sBAAsB,CAAA","sourcesContent":["export * from './avatar'\nexport * from './avatar_group'\nexport * from './badge'\nexport * from './banner'\nexport * from './banner_collapsible'\nexport * from './button'\nexport * from './heading'\nexport * from './icon'\nexport * from './icon_button'\nexport * from './image'\nexport * from './spinner'\nexport * from './switch'\nexport * from './text'\nexport * from './text_button'\nexport * from './text_inline_button'\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,WAAW,CAAA;AACzB,cAAc,eAAe,CAAA;AAC7B,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,sBAAsB,CAAA;AACpC,cAAc,QAAQ,CAAA","sourcesContent":["export * from './avatar_group'\nexport * from './avatar'\nexport * from './badge'\nexport * from './banner_collapsible'\nexport * from './banner'\nexport * from './button'\nexport * from './heading'\nexport * from './icon_button'\nexport * from './icon'\nexport * from './image'\nexport * from './person'\nexport * from './spinner'\nexport * from './switch'\nexport * from './text_button'\nexport * from './text_inline_button'\nexport * from './text'\n"]}

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { MemberResource } from '../../types';
+interface PersonProps {
+    person: MemberResource;
+}
+export declare function Person({ person }: PersonProps): React.JSX.Element;
+export declare function Adult({ person }: PersonProps): React.JSX.Element;
+export declare function Child({ person }: PersonProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=person.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"person.d.ts","sourceRoot":"","sources":["../../../src/components/display/person.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AAU5C,UAAU,WAAW;IACnB,MAAM,EAAE,cAAc,CAAA;CACvB;AAED,wBAAgB,MAAM,CAAC,EAAE,MAAM,EAAE,EAAE,WAAW,qBAE7C;AAED,wBAAgB,KAAK,CAAC,EAAE,MAAM,EAAE,EAAE,WAAW,qBAc5C;AACD,wBAAgB,KAAK,CAAC,EAAE,MAAM,EAAE,EAAE,WAAW,qBAoB5C"}

package/build/components/display/person.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { useTheme } from '../../hooks';
+import { platformFontWeightMedium } from '../../utils/styles';
+import { Avatar } from './avatar';
+import { Text } from './text';
+import { Badge } from './badge';
+import { space } from '../../utils';
+export function Person({ person }) {
+    return person.child ? <Child person={person}/> : <Adult person={person}/>;
+}
+export function Adult({ person }) {
+    const styles = useStyles();
+    return (<View style={styles.wrapper}>
+      <Avatar sourceUri={person.avatar}/>
+      <View style={styles.content}>
+        <Text style={styles.name}>{person.name}</Text>
+        <View style={styles.badges}>
+          {person.badges?.map((badge, index) => <Badge key={index} label={badge.title}/>)}
+        </View>
+      </View>
+    </View>);
+}
+export function Child({ person }) {
+    const styles = useStyles();
+    return (<View style={styles.wrapper}>
+      <View style={styles.childAvatar}>
+        <Avatar sourceUri={person.avatar}/>
+      </View>
+      <View style={styles.content}>
+        <Text style={[styles.name, styles.childName]}>{person.name}</Text>
+        <View style={styles.badges}>
+          <Badge label="Not eligible to chat" appearance="warning" iconName="general.shieldExclamation"/>
+        </View>
+      </View>
+    </View>);
+}
+// =================================
+// ====== Styles ===================
+// =================================
+const useStyles = () => {
+    const { colors } = useTheme();
+    return StyleSheet.create({
+        wrapper: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: space(1),
+        },
+        content: {
+            gap: space(0.25),
+        },
+        name: {
+            fontWeight: platformFontWeightMedium,
+        },
+        childName: {
+            color: colors.textColorDefaultSecondary,
+        },
+        childAvatar: {
+            opacity: 0.5,
+        },
+        badges: {
+            flexDirection: 'row',
+            gap: space(0.5),
+        },
+    });
+};
+//# sourceMappingURL=person.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"person.js","sourceRoot":"","sources":["../../../src/components/display/person.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react'\nimport { StyleSheet, View } from 'react-native'\nimport { useTheme } from '../../hooks'\nimport { platformFontWeightMedium } from '../../utils/styles'\nimport { MemberResource } from '../../types'\nimport { Avatar } from './avatar'\nimport { Text } from './text'\nimport { Badge } from './badge'\nimport { space } from '../../utils'\n\n// =================================\n// ====== Components ===============\n// =================================\n\ninterface PersonProps {\n  person: MemberResource\n}\n\nexport function Person({ person }: PersonProps) {\n  return person.child ? <Child person={person} /> : <Adult person={person} />\n}\n\nexport function Adult({ person }: PersonProps) {\n  const styles = useStyles()\n\n  return (\n    <View style={styles.wrapper}>\n      <Avatar sourceUri={person.avatar} />\n      <View style={styles.content}>\n        <Text style={styles.name}>{person.name}</Text>\n        <View style={styles.badges}>\n          {person.badges?.map((badge, index) => <Badge key={index} label={badge.title} />)}\n        </View>\n      </View>\n    </View>\n  )\n}\nexport function Child({ person }: PersonProps) {\n  const styles = useStyles()\n\n  return (\n    <View style={styles.wrapper}>\n      <View style={styles.childAvatar}>\n        <Avatar sourceUri={person.avatar} />\n      </View>\n      <View style={styles.content}>\n        <Text style={[styles.name, styles.childName]}>{person.name}</Text>\n        <View style={styles.badges}>\n          <Badge\n            label=\"Not eligible to chat\"\n            appearance=\"warning\"\n            iconName=\"general.shieldExclamation\"\n          />\n        </View>\n      </View>\n    </View>\n  )\n}\n\n// =================================\n// ====== Styles ===================\n// =================================\n\nconst useStyles = () => {\n  const { colors } = useTheme()\n\n  return StyleSheet.create({\n    wrapper: {\n      flexDirection: 'row',\n      alignItems: 'center',\n      gap: space(1),\n    },\n    content: {\n      gap: space(0.25),\n    },\n    name: {\n      fontWeight: platformFontWeightMedium,\n    },\n    childName: {\n      color: colors.textColorDefaultSecondary,\n    },\n    childAvatar: {\n      opacity: 0.5,\n    },\n    badges: {\n      flexDirection: 'row',\n      gap: space(0.5),\n    },\n  })\n}\n"]}

package/build/hooks/use_conversation_messages.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use_conversation_messages.d.ts","sourceRoot":"","sources":["../../src/hooks/use_conversation_messages.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAC1C,OAAO,EAEL,wBAAwB,EAEzB,MAAM,oBAAoB,CAAA;AAE3B,eAAO,MAAM,uBAAuB,wBACb;IAAE,eAAe,EAAE,MAAM,CAAA;CAAE,SACzC,wBAAwB;;;;;;CAUhC,CAAA;AAED,eAAO,MAAM,sBAAsB,wBAAyB;IAAE,eAAe,EAAE,MAAM,CAAA;CAAE;;;;;;;;;;;CAoBrF,CAAA;AAEF,eAAO,MAAM,mBAAmB,wBAAyB;IAAE,eAAe,EAAE,MAAM,CAAA;CAAE,iDAGnF,CAAA"}
+{"version":3,"file":"use_conversation_messages.d.ts","sourceRoot":"","sources":["../../src/hooks/use_conversation_messages.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAE1C,OAAO,EAEL,wBAAwB,EAEzB,MAAM,oBAAoB,CAAA;AAE3B,eAAO,MAAM,uBAAuB,wBACb;IAAE,eAAe,EAAE,MAAM,CAAA;CAAE,SACzC,wBAAwB;;;;;;CAehC,CAAA;AAED,eAAO,MAAM,sBAAsB,wBAAyB;IAAE,eAAe,EAAE,MAAM,CAAA;CAAE;;;;;;;;;;;CAoBrF,CAAA;AAEF,eAAO,MAAM,mBAAmB,wBAAyB;IAAE,eAAe,EAAE,MAAM,CAAA;CAAE,iDAGnF,CAAA"}

package/build/hooks/use_conversation_messages.js

@@ -1,8 +1,13 @@
+import { useConversationMessagesJoltEvents } from './use_conversation_messages_jolt_events';
 import { getRequestQueryKey, useSuspensePaginator, } from './use_suspense_api';
 export const useConversationMessages = ({ conversation_id }, opts) => {
     const { data, refetch, isRefetching, fetchNextPage } = useSuspensePaginator(getMessagesRequestArgs({ conversation_id }), opts);
     const queryKey = getMessagesQueryKey({ conversation_id });
     const messages = data.sort((a, b) => -a.id.localeCompare(b.id));
+    useConversationMessagesJoltEvents({
+        conversationId: conversation_id,
+        refetchMessages: refetch,
+    });
     return { messages, refetch, isRefetching, fetchNextPage, queryKey };
 };
 export const getMessagesRequestArgs = ({ conversation_id }) => ({

package/build/hooks/use_conversation_messages.js.map

@@ -1 +1 @@
-{"version":3,"file":"use_conversation_messages.js","sourceRoot":"","sources":["../../src/hooks/use_conversation_messages.ts"],"names":[],"mappings":"AACA,OAAO,EACL,kBAAkB,EAElB,oBAAoB,GACrB,MAAM,oBAAoB,CAAA;AAE3B,MAAM,CAAC,MAAM,uBAAuB,GAAG,CACrC,EAAE,eAAe,EAA+B,EAChD,IAA+B,EAC/B,EAAE;IACF,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,GAAG,oBAAoB,CACzE,sBAAsB,CAAC,EAAE,eAAe,EAAE,CAAC,EAC3C,IAAI,CACL,CAAA;IACD,MAAM,QAAQ,GAAG,mBAAmB,CAAC,EAAE,eAAe,EAAE,CAAC,CAAA;IACzD,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;IAE/D,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,QAAQ,EAAE,CAAA;AACrE,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,EAAE,eAAe,EAA+B,EAAE,EAAE,CAAC,CAAC;IAC3F,GAAG,EAAE,qBAAqB,eAAe,WAAW;IACpD,IAAI,EAAE;QACJ,OAAO,EAAE,EAAE;QACX,MAAM,EAAE;YACN,OAAO,EAAE;gBACP,MAAM;gBACN,gBAAgB;gBAChB,MAAM;gBACN,aAAa;gBACb,YAAY;gBACZ,YAAY;gBACZ,QAAQ;gBACR,iBAAiB;aAClB;YACD,MAAM,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC;YAC1B,aAAa,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,YAAY,CAAC;SACtE;QACD,OAAO,EAAE,CAAC,QAAQ,EAAE,iBAAiB,CAAC;KACvC;CACF,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,EAAE,eAAe,EAA+B,EAAE,EAAE;IACtF,MAAM,WAAW,GAAG,sBAAsB,CAAC,EAAE,eAAe,EAAE,CAAC,CAAA;IAC/D,OAAO,kBAAkB,CAAC,WAAW,CAAC,CAAA;AACxC,CAAC,CAAA","sourcesContent":["import { MessageResource } from '../types'\nimport {\n  getRequestQueryKey,\n  SuspensePaginatorOptions,\n  useSuspensePaginator,\n} from './use_suspense_api'\n\nexport const useConversationMessages = (\n  { conversation_id }: { conversation_id: string },\n  opts?: SuspensePaginatorOptions\n) => {\n  const { data, refetch, isRefetching, fetchNextPage } = useSuspensePaginator<MessageResource>(\n    getMessagesRequestArgs({ conversation_id }),\n    opts\n  )\n  const queryKey = getMessagesQueryKey({ conversation_id })\n  const messages = data.sort((a, b) => -a.id.localeCompare(b.id))\n\n  return { messages, refetch, isRefetching, fetchNextPage, queryKey }\n}\n\nexport const getMessagesRequestArgs = ({ conversation_id }: { conversation_id: string }) => ({\n  url: `/me/conversations/${conversation_id}/messages`,\n  data: {\n    perPage: 25,\n    fields: {\n      Message: [\n        'text',\n        'text_edited_at',\n        'mine',\n        'attachments',\n        'created_at',\n        'deleted_at',\n        'author',\n        'reaction_counts',\n      ],\n      Person: ['name', 'avatar'],\n      ReactionCount: ['value', 'count', 'mine', 'message_id', 'author_ids'],\n    },\n    include: ['author', 'reaction_counts'],\n  },\n})\n\nexport const getMessagesQueryKey = ({ conversation_id }: { conversation_id: string }) => {\n  const requestArgs = getMessagesRequestArgs({ conversation_id })\n  return getRequestQueryKey(requestArgs)\n}\n"]}
+{"version":3,"file":"use_conversation_messages.js","sourceRoot":"","sources":["../../src/hooks/use_conversation_messages.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iCAAiC,EAAE,MAAM,yCAAyC,CAAA;AAC3F,OAAO,EACL,kBAAkB,EAElB,oBAAoB,GACrB,MAAM,oBAAoB,CAAA;AAE3B,MAAM,CAAC,MAAM,uBAAuB,GAAG,CACrC,EAAE,eAAe,EAA+B,EAChD,IAA+B,EAC/B,EAAE;IACF,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,GAAG,oBAAoB,CACzE,sBAAsB,CAAC,EAAE,eAAe,EAAE,CAAC,EAC3C,IAAI,CACL,CAAA;IACD,MAAM,QAAQ,GAAG,mBAAmB,CAAC,EAAE,eAAe,EAAE,CAAC,CAAA;IACzD,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;IAE/D,iCAAiC,CAAC;QAChC,cAAc,EAAE,eAAe;QAC/B,eAAe,EAAE,OAAO;KACzB,CAAC,CAAA;IAEF,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,QAAQ,EAAE,CAAA;AACrE,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,EAAE,eAAe,EAA+B,EAAE,EAAE,CAAC,CAAC;IAC3F,GAAG,EAAE,qBAAqB,eAAe,WAAW;IACpD,IAAI,EAAE;QACJ,OAAO,EAAE,EAAE;QACX,MAAM,EAAE;YACN,OAAO,EAAE;gBACP,MAAM;gBACN,gBAAgB;gBAChB,MAAM;gBACN,aAAa;gBACb,YAAY;gBACZ,YAAY;gBACZ,QAAQ;gBACR,iBAAiB;aAClB;YACD,MAAM,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC;YAC1B,aAAa,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,YAAY,CAAC;SACtE;QACD,OAAO,EAAE,CAAC,QAAQ,EAAE,iBAAiB,CAAC;KACvC;CACF,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,EAAE,eAAe,EAA+B,EAAE,EAAE;IACtF,MAAM,WAAW,GAAG,sBAAsB,CAAC,EAAE,eAAe,EAAE,CAAC,CAAA;IAC/D,OAAO,kBAAkB,CAAC,WAAW,CAAC,CAAA;AACxC,CAAC,CAAA","sourcesContent":["import { MessageResource } from '../types'\nimport { useConversationMessagesJoltEvents } from './use_conversation_messages_jolt_events'\nimport {\n  getRequestQueryKey,\n  SuspensePaginatorOptions,\n  useSuspensePaginator,\n} from './use_suspense_api'\n\nexport const useConversationMessages = (\n  { conversation_id }: { conversation_id: string },\n  opts?: SuspensePaginatorOptions\n) => {\n  const { data, refetch, isRefetching, fetchNextPage } = useSuspensePaginator<MessageResource>(\n    getMessagesRequestArgs({ conversation_id }),\n    opts\n  )\n  const queryKey = getMessagesQueryKey({ conversation_id })\n  const messages = data.sort((a, b) => -a.id.localeCompare(b.id))\n\n  useConversationMessagesJoltEvents({\n    conversationId: conversation_id,\n    refetchMessages: refetch,\n  })\n\n  return { messages, refetch, isRefetching, fetchNextPage, queryKey }\n}\n\nexport const getMessagesRequestArgs = ({ conversation_id }: { conversation_id: string }) => ({\n  url: `/me/conversations/${conversation_id}/messages`,\n  data: {\n    perPage: 25,\n    fields: {\n      Message: [\n        'text',\n        'text_edited_at',\n        'mine',\n        'attachments',\n        'created_at',\n        'deleted_at',\n        'author',\n        'reaction_counts',\n      ],\n      Person: ['name', 'avatar'],\n      ReactionCount: ['value', 'count', 'mine', 'message_id', 'author_ids'],\n    },\n    include: ['author', 'reaction_counts'],\n  },\n})\n\nexport const getMessagesQueryKey = ({ conversation_id }: { conversation_id: string }) => {\n  const requestArgs = getMessagesRequestArgs({ conversation_id })\n  return getRequestQueryKey(requestArgs)\n}\n"]}

package/build/hooks/use_conversation_messages_jolt_events.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    conversationId: string;
+    refetchMessages?: () => void;
+}
+export declare function useConversationMessagesJoltEvents({ conversationId, refetchMessages }: Props): void;
+export {};
+//# sourceMappingURL=use_conversation_messages_jolt_events.d.ts.map

package/build/hooks/use_conversation_messages_jolt_events.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use_conversation_messages_jolt_events.d.ts","sourceRoot":"","sources":["../../src/hooks/use_conversation_messages_jolt_events.ts"],"names":[],"mappings":"AAUA,UAAU,KAAK;IACb,cAAc,EAAE,MAAM,CAAA;IACtB,eAAe,CAAC,EAAE,MAAM,IAAI,CAAA;CAC7B;AAED,wBAAgB,iCAAiC,CAAC,EAAE,cAAc,EAAE,eAAe,EAAE,EAAE,KAAK,QAiC3F"}

package/build/hooks/use_conversation_messages_jolt_events.js

@@ -0,0 +1,36 @@
+import { useJoltChannel, useJoltEvent } from './use_jolt';
+import { updateRecordInPagesData } from '../utils';
+import { useQueryClient } from '@tanstack/react-query';
+import { useCurrentPerson } from './use_current_person';
+import { transformMessageEventDataToMessageResource } from '../utils/jolt/transform_message_event_data_to_message_resource';
+import { getMessagesRequestArgs } from './use_conversation_messages';
+import { getRequestQueryKey } from './use_suspense_api';
+export function useConversationMessagesJoltEvents({ conversationId, refetchMessages }) {
+    const queryClient = useQueryClient();
+    const currentPerson = useCurrentPerson();
+    const joltChannel = useJoltChannel(`chat.conversations.${conversationId}`);
+    const messagesRequestArgs = getMessagesRequestArgs({ conversation_id: conversationId });
+    const messagesQueryKey = getRequestQueryKey(messagesRequestArgs);
+    const handleMessageJoltEvent = async () => {
+        refetchMessages?.();
+    };
+    const handleMessageUpdateOrCreate = async (e) => {
+        const { data } = e.data;
+        const message = transformMessageEventDataToMessageResource({
+            data,
+            currentPersonId: currentPerson.id,
+        });
+        queryClient.setQueryData(messagesQueryKey, prev => updateRecordInPagesData({
+            data: prev,
+            record: message,
+            processRecord: (record, current) => {
+                return { ...current, ...record };
+            },
+        }));
+    };
+    useJoltEvent(joltChannel, 'message.created', handleMessageUpdateOrCreate);
+    useJoltEvent(joltChannel, 'message.updated', handleMessageUpdateOrCreate);
+    useJoltEvent(joltChannel, 'message.deleted', handleMessageJoltEvent);
+    useJoltEvent(joltChannel, 'reaction.*', handleMessageJoltEvent);
+}
+//# sourceMappingURL=use_conversation_messages_jolt_events.js.map

package/build/hooks/use_conversation_messages_jolt_events.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use_conversation_messages_jolt_events.js","sourceRoot":"","sources":["../../src/hooks/use_conversation_messages_jolt_events.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AACzD,OAAO,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAA;AAElD,OAAO,EAAgB,cAAc,EAAE,MAAM,uBAAuB,CAAA;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AACvD,OAAO,EAAE,0CAA0C,EAAE,MAAM,gEAAgE,CAAA;AAC3H,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAA;AACpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAA;AAOvD,MAAM,UAAU,iCAAiC,CAAC,EAAE,cAAc,EAAE,eAAe,EAAS;IAC1F,MAAM,WAAW,GAAG,cAAc,EAAE,CAAA;IACpC,MAAM,aAAa,GAAG,gBAAgB,EAAE,CAAA;IACxC,MAAM,WAAW,GAAG,cAAc,CAAC,sBAAsB,cAAc,EAAE,CAAC,CAAA;IAC1E,MAAM,mBAAmB,GAAG,sBAAsB,CAAC,EAAE,eAAe,EAAE,cAAc,EAAE,CAAC,CAAA;IACvF,MAAM,gBAAgB,GAAG,kBAAkB,CAAC,mBAAmB,CAAC,CAAA;IAEhE,MAAM,sBAAsB,GAAG,KAAK,IAAI,EAAE;QACxC,eAAe,EAAE,EAAE,CAAA;IACrB,CAAC,CAAA;IAED,MAAM,2BAA2B,GAAG,KAAK,EAAE,CAAsB,EAAE,EAAE;QACnE,MAAM,EAAE,IAAI,EAAE,GAAG,CAAC,CAAC,IAAI,CAAA;QACvB,MAAM,OAAO,GAAG,0CAA0C,CAAC;YACzD,IAAI;YACJ,eAAe,EAAE,aAAa,CAAC,EAAE;SAClC,CAAC,CAAA;QAEF,WAAW,CAAC,YAAY,CAAY,gBAAgB,EAAE,IAAI,CAAC,EAAE,CAC3D,uBAAuB,CAAC;YACtB,IAAI,EAAE,IAAI;YACV,MAAM,EAAE,OAAO;YACf,aAAa,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,EAAE;gBACjC,OAAO,EAAE,GAAG,OAAO,EAAE,GAAG,MAAM,EAAE,CAAA;YAClC,CAAC;SACF,CAAC,CACH,CAAA;IACH,CAAC,CAAA;IAED,YAAY,CAAC,WAAW,EAAE,iBAAiB,EAAE,2BAA2B,CAAC,CAAA;IACzE,YAAY,CAAC,WAAW,EAAE,iBAAiB,EAAE,2BAA2B,CAAC,CAAA;IACzE,YAAY,CAAC,WAAW,EAAE,iBAAiB,EAAE,sBAAsB,CAAC,CAAA;IACpE,YAAY,CAAC,WAAW,EAAE,YAAY,EAAE,sBAAsB,CAAC,CAAA;AACjE,CAAC","sourcesContent":["import { ApiCollection, MessageResource } from '../types'\nimport { useJoltChannel, useJoltEvent } from './use_jolt'\nimport { updateRecordInPagesData } from '../utils'\nimport { MessageCreatedEvent } from '../types/jolt_events/message_events'\nimport { InfiniteData, useQueryClient } from '@tanstack/react-query'\nimport { useCurrentPerson } from './use_current_person'\nimport { transformMessageEventDataToMessageResource } from '../utils/jolt/transform_message_event_data_to_message_resource'\nimport { getMessagesRequestArgs } from './use_conversation_messages'\nimport { getRequestQueryKey } from './use_suspense_api'\n\ninterface Props {\n  conversationId: string\n  refetchMessages?: () => void\n}\n\nexport function useConversationMessagesJoltEvents({ conversationId, refetchMessages }: Props) {\n  const queryClient = useQueryClient()\n  const currentPerson = useCurrentPerson()\n  const joltChannel = useJoltChannel(`chat.conversations.${conversationId}`)\n  const messagesRequestArgs = getMessagesRequestArgs({ conversation_id: conversationId })\n  const messagesQueryKey = getRequestQueryKey(messagesRequestArgs)\n\n  const handleMessageJoltEvent = async () => {\n    refetchMessages?.()\n  }\n\n  const handleMessageUpdateOrCreate = async (e: MessageCreatedEvent) => {\n    const { data } = e.data\n    const message = transformMessageEventDataToMessageResource({\n      data,\n      currentPersonId: currentPerson.id,\n    })\n\n    queryClient.setQueryData<QueryData>(messagesQueryKey, prev =>\n      updateRecordInPagesData({\n        data: prev,\n        record: message,\n        processRecord: (record, current) => {\n          return { ...current, ...record }\n        },\n      })\n    )\n  }\n\n  useJoltEvent(joltChannel, 'message.created', handleMessageUpdateOrCreate)\n  useJoltEvent(joltChannel, 'message.updated', handleMessageUpdateOrCreate)\n  useJoltEvent(joltChannel, 'message.deleted', handleMessageJoltEvent)\n  useJoltEvent(joltChannel, 'reaction.*', handleMessageJoltEvent)\n}\n\ntype QueryData = InfiniteData<ApiCollection<MessageResource>>\n"]}

package/build/hooks/use_current_person.d.ts

@@ -1,3 +1,3 @@
-import { PersonResource } from '../types';
-export declare const useCurrentPerson: () => PersonResource;
+import { CurrentPersonResource } from '../types';
+export declare const useCurrentPerson: () => CurrentPersonResource;
 //# sourceMappingURL=use_current_person.d.ts.map

package/build/hooks/use_current_person.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use_current_person.d.ts","sourceRoot":"","sources":["../../src/hooks/use_current_person.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAGzC,eAAO,MAAM,gBAAgB,sBAW5B,CAAA"}
+{"version":3,"file":"use_current_person.d.ts","sourceRoot":"","sources":["../../src/hooks/use_current_person.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAA;AAGhD,eAAO,MAAM,gBAAgB,6BAW5B,CAAA"}

package/build/hooks/use_current_person.js.map

@@ -1 +1 @@
-{"version":3,"file":"use_current_person.js","sourceRoot":"","sources":["../../src/hooks/use_current_person.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAA;AAEnD,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,EAAE;IACnC,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,cAAc,CAAiB;QACtD,GAAG,EAAE,KAAK;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,cAAc,EAAE,kBAAkB,CAAC;aACrE;SACF;KACF,CAAC,CAAA;IAEF,OAAO,MAAM,CAAA;AACf,CAAC,CAAA","sourcesContent":["import { PersonResource } from '../types'\nimport { useSuspenseGet } from './use_suspense_api'\n\nexport const useCurrentPerson = () => {\n  const { data: person } = useSuspenseGet<PersonResource>({\n    url: '/me',\n    data: {\n      fields: {\n        Person: ['id', 'name', 'avatar', 'unread_count', 'pco_chat_enabled'],\n      },\n    },\n  })\n\n  return person\n}\n"]}
+{"version":3,"file":"use_current_person.js","sourceRoot":"","sources":["../../src/hooks/use_current_person.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAA;AAEnD,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,EAAE;IACnC,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,cAAc,CAAwB;QAC7D,GAAG,EAAE,KAAK;QACV,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,cAAc,EAAE,kBAAkB,CAAC;aACrE;SACF;KACF,CAAC,CAAA;IAEF,OAAO,MAAM,CAAA;AACf,CAAC,CAAA","sourcesContent":["import { CurrentPersonResource } from '../types'\nimport { useSuspenseGet } from './use_suspense_api'\n\nexport const useCurrentPerson = () => {\n  const { data: person } = useSuspenseGet<CurrentPersonResource>({\n    url: '/me',\n    data: {\n      fields: {\n        Person: ['id', 'name', 'avatar', 'unread_count', 'pco_chat_enabled'],\n      },\n    },\n  })\n\n  return person\n}\n"]}

package/build/screens/conversation_details_screen.js

@@ -1,7 +1,7 @@
 import { useNavigation } from '@react-navigation/native';
 import React, { useCallback, useEffect, useState, } from 'react';
 import { StyleSheet, TextInput, View, } from 'react-native';
-import { Avatar, Badge, Heading, Icon, Switch, Text } from '../components';
+import { Heading, Icon, Person, Switch, Text } from '../components';
 import { useSuspenseGet, useTheme } from '../hooks';
 import { useConversation, useConversationMute, useConversationUpdate, } from '../hooks/use_conversation';
 import { isDefined } from '../types';
@@ -94,7 +94,7 @@ export function ConversationDetailsScreen({ route }) {
               </ListSection>);
                 case SectionTypes.members:
                     return (<ListSection isStart={isStart} isEnd={isEnd} style={item?.sectionStyle}>
-                <MemberRow {...item.data}/>
+                <Person person={{ ...item.data }}/>
               </ListSection>);
                 case SectionTypes.setting:
                     return (<ListSection isStart={isStart} isEnd={isEnd} style={item?.sectionStyle}>
@@ -143,20 +143,6 @@ function SettingRow({ title, style, titleStyle = {}, subtitle, rightItem, rightI
       {Boolean(rightItem) && <View style={rightItemStyle}>{rightItem}</View>}
     </View>);
 }
-function MemberRow({ avatar, name, style, badges }) {
-    const styles = useStyles();
-    return (<View style={[styles.member, style]}>
-      <Avatar sourceUri={avatar}/>
-      <View style={styles.memberBody}>
-        <Text style={styles.memberName}>{name}</Text>
-        <View style={styles.memberBadges}>
-          {badges?.map((badge, index) => (<View key={index} style={styles.memberBadge}>
-              <Badge label={badge.title}/>
-            </View>))}
-        </View>
-      </View>
-    </View>);
-}
 // =================================
 // ====== Styles ===================
 // =================================

package/build/screens/conversation_details_screen.js.map

@@ -1 +1 @@
-{"version":3,"file":"conversation_details_screen.js","sourceRoot":"","sources":["../../src/screens/conversation_details_screen.tsx"],"names":[],"mappings":"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","sourcesContent":["import { StaticScreenProps, useNavigation } from '@react-navigation/native'\nimport React, {\n  useCallback,\n  useEffect,\n  useState,\n  type SetStateAction,\n  type Dispatch,\n  type ReactNode,\n} from 'react'\nimport {\n  StyleSheet,\n  TextInput,\n  View,\n  type TextStyle,\n  type ViewStyle,\n  type ViewProps,\n} from 'react-native'\nimport { Avatar, Badge, Heading, Icon, Switch, Text } from '../components'\nimport { useSuspenseGet, useTheme } from '../hooks'\nimport {\n  useConversation,\n  useConversationMute,\n  useConversationUpdate,\n} from '../hooks/use_conversation'\nimport { MemberBadge, MemberResource, isDefined } from '../types'\nimport { HeaderRightButton } from '../navigation/header'\nimport { FlashList } from '@shopify/flash-list'\nimport { space } from '../utils'\n\n// =========================================\n// ====== Factory Constants & Types ========\n// =========================================\n\nenum SectionTypes {\n  header,\n  hidden,\n  members,\n  setting,\n  view,\n}\n\ntype SectionListData = Array<\n  | DataItem<{ title: string }, SectionTypes.header>\n  | DataItem<MemberResource, SectionTypes.members>\n  | DataItem<ViewProps, SectionTypes.view>\n  | DataItem<{ title: string }, SectionTypes.setting>\n  | DataItem<any, SectionTypes.hidden>\n>\n\ninterface DataItem<T, TName extends SectionTypes> {\n  type: TName\n  data: T\n  sectionStyle?: ViewStyle\n}\n\n// =================================\n// ====== Components ===============\n// =================================\n\nexport type ConversationDetailsScreenProps = StaticScreenProps<{\n  conversation_id: string\n}>\n\nexport function ConversationDetailsScreen({ route }: ConversationDetailsScreenProps) {\n  const navigation = useNavigation()\n  const styles = useStyles()\n\n  const { data: conversation } = useConversation(route.params)\n  const [title, setTitle] = useState(conversation.title)\n  const { muted, setMuted } = useConversationMute(route.params)\n  const { mutate: saveTitle } = useConversationUpdate(route.params)\n\n  const canUpdate = conversation.memberAbility?.canUpdate || false\n  const { data: members } = useSuspenseGet<MemberResource[]>({\n    url: `/me/conversations/${route.params.conversation_id}/members`,\n    data: {\n      include: ['person'],\n      fields: {\n        Member: ['avatar', 'name', 'first_name', 'last_name', 'child', 'badges'],\n      },\n    },\n  })\n\n  const memberItems = members.map(data => ({\n    type: SectionTypes.members,\n    data,\n  }))\n\n  const HeaderRight = useCallback(() => {\n    return (\n      <HeaderRightButton\n        onPress={() => {\n          saveTitle({ title })\n          navigation.goBack()\n        }}\n      >\n        Done\n      </HeaderRightButton>\n    )\n  }, [navigation, saveTitle, title])\n\n  useEffect(() => {\n    navigation.setOptions({\n      headerRight: HeaderRight,\n    })\n  }, [HeaderRight, navigation])\n\n  const listData = [\n    {\n      type: SectionTypes.view,\n      data: {\n        children: <TitleInput canUpdate={canUpdate} title={title} setTitle={setTitle} />,\n        style: styles.titleContainer,\n      },\n    },\n    {\n      type: SectionTypes.header,\n      data: { title: 'Settings' },\n      sectionStyle: styles.addBottomBorder,\n    },\n    {\n      type: SectionTypes.setting,\n      data: {\n        title: 'Mute',\n        rightItem: <Switch value={muted} onChange={() => setMuted(!muted)} />,\n      },\n    },\n    {\n      type: SectionTypes.header,\n      data: { title: 'Members' },\n    },\n    ...memberItems,\n  ].filter(item => item.type !== SectionTypes.hidden)\n\n  const headerIndices = listData\n    .map(({ type }, index) => (type === SectionTypes.header ? index : undefined))\n    .filter(isDefined)\n\n  return (\n    <FlashList\n      data={listData as SectionListData}\n      estimatedItemSize={52}\n      contentContainerStyle={styles.contentContainer}\n      renderItem={({ item, index }) => {\n        const [isStart, isEnd] = [\n          index === 0 || headerIndices.includes(index),\n          index === listData.length - 1 || headerIndices.includes(index + 1),\n        ]\n\n        switch (item.type) {\n          case SectionTypes.header:\n            return (\n              <ListSection isStart={isStart} isEnd={isEnd} style={item?.sectionStyle}>\n                <SectionHeading title={item.data.title} />\n              </ListSection>\n            )\n          case SectionTypes.members:\n            return (\n              <ListSection isStart={isStart} isEnd={isEnd} style={item?.sectionStyle}>\n                <MemberRow {...item.data} />\n              </ListSection>\n            )\n          case SectionTypes.setting:\n            return (\n              <ListSection isStart={isStart} isEnd={isEnd} style={item?.sectionStyle}>\n                <SettingRow {...item.data} />\n              </ListSection>\n            )\n          case SectionTypes.view:\n            return (\n              <ListSection isStart={isStart} isEnd={isEnd} style={item?.sectionStyle}>\n                <View {...item.data} style={item.data.style} />\n              </ListSection>\n            )\n          default:\n            return null\n        }\n      }}\n    />\n  )\n}\n\ninterface ListSectionProps {\n  isStart?: boolean\n  isEnd?: boolean\n  style?: ViewStyle\n  children: ReactNode\n}\n\nfunction ListSection({ isStart, isEnd, style, children }: ListSectionProps) {\n  const styles = useStyles({ isStart, isEnd })\n\n  return (\n    <View style={styles.sectionOuter}>\n      <View style={[styles.sectionInner, style]}>{children}</View>\n    </View>\n  )\n}\n\ninterface SectionHeadingProps {\n  title: string\n}\n\nfunction SectionHeading({ title }: SectionHeadingProps) {\n  const styles = useStyles()\n\n  return (\n    <View style={styles.header}>\n      <Heading variant=\"h3\">{title}</Heading>\n    </View>\n  )\n}\n\ninterface InputProps {\n  canUpdate: boolean\n  title: string\n  setTitle: Dispatch<SetStateAction<string>>\n}\n\nfunction TitleInput({ canUpdate, title, setTitle }: InputProps) {\n  const styles = useStyles()\n  return (\n    <>\n      <View style={[styles.titleLabelContainer, !canUpdate && styles.titleInputDisabled]}>\n        <Text variant=\"tertiary\">Title</Text>\n        {!canUpdate && <Icon name=\"general.lock\" />}\n      </View>\n      <TextInput\n        editable={canUpdate}\n        onChangeText={setTitle}\n        style={[styles.titleInput, !canUpdate && styles.titleInputDisabled]}\n        value={title}\n      />\n    </>\n  )\n}\n\ninterface SettingRowProps {\n  title: string\n  style?: ViewStyle\n  rightItem?: ReactNode\n  titleStyle?: TextStyle\n  subtitle?: string\n  rightItemStyle?: ViewStyle\n}\n\nfunction SettingRow({\n  title,\n  style,\n  titleStyle = {},\n  subtitle,\n  rightItem,\n  rightItemStyle = {},\n}: SettingRowProps) {\n  const styles = useStyles()\n\n  return (\n    <View style={[styles.settingRow, style]}>\n      <View style={styles.settingRowContent}>\n        <Text variant=\"plain\" style={[styles.settingRowText, titleStyle]}>\n          {title}\n        </Text>\n        {Boolean(subtitle) && <Text variant=\"footnote\">{subtitle}</Text>}\n      </View>\n      {Boolean(rightItem) && <View style={rightItemStyle}>{rightItem}</View>}\n    </View>\n  )\n}\n\ninterface MemberRowProps {\n  avatar: string\n  name: string\n  style?: ViewStyle\n  badges?: MemberBadge[]\n}\n\nfunction MemberRow({ avatar, name, style, badges }: MemberRowProps) {\n  const styles = useStyles()\n\n  return (\n    <View style={[styles.member, style]}>\n      <Avatar sourceUri={avatar} />\n      <View style={styles.memberBody}>\n        <Text style={styles.memberName}>{name}</Text>\n        <View style={styles.memberBadges}>\n          {badges?.map((badge, index) => (\n            <View key={index} style={styles.memberBadge}>\n              <Badge label={badge.title} />\n            </View>\n          ))}\n        </View>\n      </View>\n    </View>\n  )\n}\n\n// =================================\n// ====== Styles ===================\n// =================================\n\nconst useStyles = ({ isStart, isEnd }: { isStart?: boolean; isEnd?: boolean } = {}) => {\n  const { colors } = useTheme()\n\n  return StyleSheet.create({\n    contentContainer: {\n      backgroundColor: colors.fillColorNeutral080,\n      padding: space(2),\n    },\n    sectionOuter: {\n      paddingTop: space(1),\n      paddingLeft: space(2),\n      backgroundColor: colors.fillColorNeutral100Inverted,\n      borderTopLeftRadius: isStart ? space(1) : 0,\n      borderTopRightRadius: isStart ? space(1) : 0,\n      borderBottomLeftRadius: isEnd ? space(1) : 0,\n      borderBottomRightRadius: isEnd ? space(1) : 0,\n      marginBottom: isEnd ? space(2) : 0,\n    },\n    sectionInner: {\n      borderBottomWidth: 0,\n      borderBottomColor: colors.borderColorDefaultBase,\n      paddingRight: space(2),\n      paddingBottom: space(1),\n    },\n    addBottomBorder: {\n      borderBottomWidth: isEnd ? 0 : 1,\n    },\n    titleContainer: {},\n    titleLabel: {},\n    titleLabelContainer: {\n      flexDirection: 'row',\n      alignItems: 'center',\n      gap: 8,\n    },\n    titleInput: {\n      color: colors.textColorDefaultPrimary,\n    },\n    titleInputDisabled: { opacity: 0.7 },\n    header: {\n      paddingVertical: space(1.5),\n    },\n    settingRow: {\n      flexDirection: 'row',\n      justifyContent: 'space-between',\n      alignItems: 'center',\n      gap: space(1),\n    },\n    settingRowContent: {\n      flex: 1,\n    },\n    settingRowText: {\n      lineHeight: 20,\n    },\n    member: {\n      flexDirection: 'row',\n      gap: space(1),\n    },\n    memberBody: {\n      gap: space(0.5),\n    },\n    memberName: {\n      lineHeight: space(2),\n    },\n    memberBadges: {\n      flexDirection: 'row',\n      gap: space(1),\n    },\n    memberBadge: {},\n  })\n}\n"]}
+{"version":3,"file":"conversation_details_screen.js","sourceRoot":"","sources":["../../src/screens/conversation_details_screen.tsx"],"names":[],"mappings":"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","sourcesContent":["import { StaticScreenProps, useNavigation } from '@react-navigation/native'\nimport React, {\n  useCallback,\n  useEffect,\n  useState,\n  type SetStateAction,\n  type Dispatch,\n  type ReactNode,\n} from 'react'\nimport {\n  StyleSheet,\n  TextInput,\n  View,\n  type TextStyle,\n  type ViewStyle,\n  type ViewProps,\n} from 'react-native'\nimport { Heading, Icon, Person, Switch, Text } from '../components'\nimport { useSuspenseGet, useTheme } from '../hooks'\nimport {\n  useConversation,\n  useConversationMute,\n  useConversationUpdate,\n} from '../hooks/use_conversation'\nimport { MemberResource, isDefined } from '../types'\nimport { HeaderRightButton } from '../navigation/header'\nimport { FlashList } from '@shopify/flash-list'\nimport { space } from '../utils'\n\n// =========================================\n// ====== Factory Constants & Types ========\n// =========================================\n\nenum SectionTypes {\n  header,\n  hidden,\n  members,\n  setting,\n  view,\n}\n\ntype SectionListData = Array<\n  | DataItem<{ title: string }, SectionTypes.header>\n  | DataItem<MemberResource, SectionTypes.members>\n  | DataItem<ViewProps, SectionTypes.view>\n  | DataItem<{ title: string }, SectionTypes.setting>\n  | DataItem<any, SectionTypes.hidden>\n>\n\ninterface DataItem<T, TName extends SectionTypes> {\n  type: TName\n  data: T\n  sectionStyle?: ViewStyle\n}\n\n// =================================\n// ====== Components ===============\n// =================================\n\nexport type ConversationDetailsScreenProps = StaticScreenProps<{\n  conversation_id: string\n}>\n\nexport function ConversationDetailsScreen({ route }: ConversationDetailsScreenProps) {\n  const navigation = useNavigation()\n  const styles = useStyles()\n\n  const { data: conversation } = useConversation(route.params)\n  const [title, setTitle] = useState(conversation.title)\n  const { muted, setMuted } = useConversationMute(route.params)\n  const { mutate: saveTitle } = useConversationUpdate(route.params)\n\n  const canUpdate = conversation.memberAbility?.canUpdate || false\n  const { data: members } = useSuspenseGet<MemberResource[]>({\n    url: `/me/conversations/${route.params.conversation_id}/members`,\n    data: {\n      include: ['person'],\n      fields: {\n        Member: ['avatar', 'name', 'first_name', 'last_name', 'child', 'badges'],\n      },\n    },\n  })\n\n  const memberItems = members.map(data => ({\n    type: SectionTypes.members,\n    data,\n  }))\n\n  const HeaderRight = useCallback(() => {\n    return (\n      <HeaderRightButton\n        onPress={() => {\n          saveTitle({ title })\n          navigation.goBack()\n        }}\n      >\n        Done\n      </HeaderRightButton>\n    )\n  }, [navigation, saveTitle, title])\n\n  useEffect(() => {\n    navigation.setOptions({\n      headerRight: HeaderRight,\n    })\n  }, [HeaderRight, navigation])\n\n  const listData = [\n    {\n      type: SectionTypes.view,\n      data: {\n        children: <TitleInput canUpdate={canUpdate} title={title} setTitle={setTitle} />,\n        style: styles.titleContainer,\n      },\n    },\n    {\n      type: SectionTypes.header,\n      data: { title: 'Settings' },\n      sectionStyle: styles.addBottomBorder,\n    },\n    {\n      type: SectionTypes.setting,\n      data: {\n        title: 'Mute',\n        rightItem: <Switch value={muted} onChange={() => setMuted(!muted)} />,\n      },\n    },\n    {\n      type: SectionTypes.header,\n      data: { title: 'Members' },\n    },\n    ...memberItems,\n  ].filter(item => item.type !== SectionTypes.hidden)\n\n  const headerIndices = listData\n    .map(({ type }, index) => (type === SectionTypes.header ? index : undefined))\n    .filter(isDefined)\n\n  return (\n    <FlashList\n      data={listData as SectionListData}\n      estimatedItemSize={52}\n      contentContainerStyle={styles.contentContainer}\n      renderItem={({ item, index }) => {\n        const [isStart, isEnd] = [\n          index === 0 || headerIndices.includes(index),\n          index === listData.length - 1 || headerIndices.includes(index + 1),\n        ]\n\n        switch (item.type) {\n          case SectionTypes.header:\n            return (\n              <ListSection isStart={isStart} isEnd={isEnd} style={item?.sectionStyle}>\n                <SectionHeading title={item.data.title} />\n              </ListSection>\n            )\n          case SectionTypes.members:\n            return (\n              <ListSection isStart={isStart} isEnd={isEnd} style={item?.sectionStyle}>\n                <Person person={{ ...item.data }} />\n              </ListSection>\n            )\n          case SectionTypes.setting:\n            return (\n              <ListSection isStart={isStart} isEnd={isEnd} style={item?.sectionStyle}>\n                <SettingRow {...item.data} />\n              </ListSection>\n            )\n          case SectionTypes.view:\n            return (\n              <ListSection isStart={isStart} isEnd={isEnd} style={item?.sectionStyle}>\n                <View {...item.data} style={item.data.style} />\n              </ListSection>\n            )\n          default:\n            return null\n        }\n      }}\n    />\n  )\n}\n\ninterface ListSectionProps {\n  isStart?: boolean\n  isEnd?: boolean\n  style?: ViewStyle\n  children: ReactNode\n}\n\nfunction ListSection({ isStart, isEnd, style, children }: ListSectionProps) {\n  const styles = useStyles({ isStart, isEnd })\n\n  return (\n    <View style={styles.sectionOuter}>\n      <View style={[styles.sectionInner, style]}>{children}</View>\n    </View>\n  )\n}\n\ninterface SectionHeadingProps {\n  title: string\n}\n\nfunction SectionHeading({ title }: SectionHeadingProps) {\n  const styles = useStyles()\n\n  return (\n    <View style={styles.header}>\n      <Heading variant=\"h3\">{title}</Heading>\n    </View>\n  )\n}\n\ninterface InputProps {\n  canUpdate: boolean\n  title: string\n  setTitle: Dispatch<SetStateAction<string>>\n}\n\nfunction TitleInput({ canUpdate, title, setTitle }: InputProps) {\n  const styles = useStyles()\n  return (\n    <>\n      <View style={[styles.titleLabelContainer, !canUpdate && styles.titleInputDisabled]}>\n        <Text variant=\"tertiary\">Title</Text>\n        {!canUpdate && <Icon name=\"general.lock\" />}\n      </View>\n      <TextInput\n        editable={canUpdate}\n        onChangeText={setTitle}\n        style={[styles.titleInput, !canUpdate && styles.titleInputDisabled]}\n        value={title}\n      />\n    </>\n  )\n}\n\ninterface SettingRowProps {\n  title: string\n  style?: ViewStyle\n  rightItem?: ReactNode\n  titleStyle?: TextStyle\n  subtitle?: string\n  rightItemStyle?: ViewStyle\n}\n\nfunction SettingRow({\n  title,\n  style,\n  titleStyle = {},\n  subtitle,\n  rightItem,\n  rightItemStyle = {},\n}: SettingRowProps) {\n  const styles = useStyles()\n\n  return (\n    <View style={[styles.settingRow, style]}>\n      <View style={styles.settingRowContent}>\n        <Text variant=\"plain\" style={[styles.settingRowText, titleStyle]}>\n          {title}\n        </Text>\n        {Boolean(subtitle) && <Text variant=\"footnote\">{subtitle}</Text>}\n      </View>\n      {Boolean(rightItem) && <View style={rightItemStyle}>{rightItem}</View>}\n    </View>\n  )\n}\n\n// =================================\n// ====== Styles ===================\n// =================================\n\nconst useStyles = ({ isStart, isEnd }: { isStart?: boolean; isEnd?: boolean } = {}) => {\n  const { colors } = useTheme()\n\n  return StyleSheet.create({\n    contentContainer: {\n      backgroundColor: colors.fillColorNeutral080,\n      padding: space(2),\n    },\n    sectionOuter: {\n      paddingTop: space(1),\n      paddingLeft: space(2),\n      backgroundColor: colors.fillColorNeutral100Inverted,\n      borderTopLeftRadius: isStart ? space(1) : 0,\n      borderTopRightRadius: isStart ? space(1) : 0,\n      borderBottomLeftRadius: isEnd ? space(1) : 0,\n      borderBottomRightRadius: isEnd ? space(1) : 0,\n      marginBottom: isEnd ? space(2) : 0,\n    },\n    sectionInner: {\n      borderBottomWidth: 0,\n      borderBottomColor: colors.borderColorDefaultBase,\n      paddingRight: space(2),\n      paddingBottom: space(1),\n    },\n    addBottomBorder: {\n      borderBottomWidth: isEnd ? 0 : 1,\n    },\n    titleContainer: {},\n    titleLabel: {},\n    titleLabelContainer: {\n      flexDirection: 'row',\n      alignItems: 'center',\n      gap: 8,\n    },\n    titleInput: {\n      color: colors.textColorDefaultPrimary,\n    },\n    titleInputDisabled: { opacity: 0.7 },\n    header: {\n      paddingVertical: space(1.5),\n    },\n    settingRow: {\n      flexDirection: 'row',\n      justifyContent: 'space-between',\n      alignItems: 'center',\n      gap: space(1),\n    },\n    settingRowContent: {\n      flex: 1,\n    },\n    settingRowText: {\n      lineHeight: 20,\n    },\n    member: {\n      flexDirection: 'row',\n      gap: space(1),\n    },\n    memberBody: {\n      gap: space(0.5),\n    },\n    memberName: {\n      lineHeight: space(2),\n    },\n    memberBadges: {\n      flexDirection: 'row',\n      gap: space(1),\n    },\n    memberBadge: {},\n  })\n}\n"]}

package/build/screens/design_system_screen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"design_system_screen.d.ts","sourceRoot":"","sources":["../../src/screens/design_system_screen.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AA0DvC,wBAAgB,kBAAkB,sBAgBjC"}
+{"version":3,"file":"design_system_screen.d.ts","sourceRoot":"","sources":["../../src/screens/design_system_screen.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AA6EvC,wBAAgB,kBAAkB,sBAiBjC"}

package/build/screens/design_system_screen.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Alert, Pressable, ScrollView, StyleSheet, View } from 'react-native';
 import { useTheme } from '../hooks';
-import { Avatar, AvatarGroup, Badge, Banner, BannerCollapsible, Button, Heading, Icon, IconButton, Image, Spinner, Switch, Text, TextButton, TextInlineButton, } from '../components/display';
+import { Avatar, AvatarGroup, Badge, Banner, BannerCollapsible, Button, Heading, Icon, IconButton, Image, Person, Spinner, Switch, Text, TextButton, TextInlineButton, } from '../components/display';
 import { space, MAX_FONT_SIZE_MULTIPLIER, platformPressedOpacityStyle, platformFontWeightMedium, } from '../utils';
 import BannerPrimitive from '../components/primitive/banner_primitive';
 // =================================
@@ -25,6 +25,22 @@ const URL = {
         'https://i.pravatar.cc/200?img=27',
     ],
 };
+const personAdult = {
+    id: '1',
+    type: 'Member',
+    name: 'John Doe',
+    avatar: URL.avatar,
+    badges: [{ title: 'Conversation owner' }, { title: 'Leader' }],
+    child: false,
+};
+const personChild = {
+    id: '2',
+    type: 'Member',
+    name: 'Kid McChild',
+    avatar: URL.two_avatars[1],
+    badges: [],
+    child: true,
+};
 const buttonPress = () => Alert.alert('Button clicked');
 // =================================
 // ====== Component ================
@@ -40,7 +56,8 @@ export function DesignSystemScreen() {
       <PressablesSection />
       <ImageIconsSection />
       <FormControlsSection />
-      <StatusComponentsSection isLast/>
+      <StatusComponentsSection />
+      <MiscComponentsSection isLast/>
     </ScrollView>);
 }
 function ThemeSection({ isLast }) {
@@ -484,6 +501,16 @@ function StatusComponentsSection({ isLast }) {
       </Group>
     </CollapsableSection>);
 }
+function MiscComponentsSection({ isLast }) {
+    return (<CollapsableSection title="Misc components" isLast={isLast}>
+      <Group title="Person" description="Takes a person object (`MemberResource` type) and displays an avatar, name, and badges. If person is a child we show a special badge and faded styles. Implomentation is based on a similar Chat Web component.">
+        <Column>
+          <Person person={personAdult}/>
+          <Person person={personChild}/>
+        </Column>
+      </Group>
+    </CollapsableSection>);
+}
 function CollapsableSection({ children, title, isLast = false }) {
     const styles = useStyles();
     const { colors } = useTheme();