@planningcenter/chat-react-native 3.13.0-rc.0 → 3.13.0-rc.2

package/build/components/conversation/message.js

@@ -116,7 +116,7 @@ export function Message({ canDeleteNonAuthoredMessages, conversation_id, latestR
           {showMessageMeta && (<View style={styles.messageMeta}>
               {message.mine && !pending && !error && (<MessageReadReceipts message={message} latestReadMessageSortKey={latestReadMessageSortKey}/>)}
               {error ? (<View style={styles.errorContainer}>
-                  {retryFailedSaveMutation.isPending ? (<Spinner size={12} style={styles.errorSpinner}/>) : (<Icon name="general.exclamationTriangle" size={12} style={styles.errorIcon}/>)}
+                  {retryFailedSaveMutation.isPending ? (<Spinner size={12}/>) : (<Icon name="general.exclamationTriangle" size={12} style={styles.errorIcon}/>)}
                   <Text variant="footnote" style={styles.errorText}>
                     Failed to {isPersisted ? 'edit' : 'send'} |{' '}
                     <TextInlineButton onPress={handleRetry} variant="footnote" appearance="danger" disabled={retryFailedSaveMutation.isPending}>
@@ -202,11 +202,6 @@ const useMessageStyles = ({ mine }) => {
         errorText: {
             color: colors.statusErrorText,
         },
-        errorSpinner: {
-            position: 'relative',
-            width: 'auto',
-            height: 'auto',
-        },
     });
 };
 //# sourceMappingURL=message.js.map

package/build/components/conversation/message.js.map

@@ -1 +1 @@
-{"version":3,"file":"message.js","sourceRoot":"","sources":["../../../src/components/conversation/message.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useNavigation } from '@react-navigation/native'\nimport React, { useEffect } from 'react'\nimport { Platform, Pressable, StyleSheet, useWindowDimensions, View } from 'react-native'\nimport { MessageReaction } from '../../components/conversation/message_reaction'\nimport { Avatar, Icon, Spinner, Text, TextInlineButton } from '../../components/display'\nimport { useInteractionGhostBackgroundColor, useTheme } from '../../hooks'\nimport { MessageResource } from '../../types'\nimport { ReactionCountResource } from '../../types/resources/reaction'\nimport { MessageAttachments } from './message_attachments'\nimport ErrorBoundary from '../page/error_boundary'\nimport { MessageMarkdown } from './message_markdown'\nimport { DenormalizedMessageAttachmentResource } from '../../types/resources/denormalized_attachment_resource'\nimport {\n  CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL,\n  platformFontWeightMedium,\n} from '../../utils/styles'\nimport Animated, {\n  useSharedValue,\n  useAnimatedStyle,\n  withTiming,\n  interpolateColor,\n  Easing,\n} from 'react-native-reanimated'\nimport { useLiveRelativeTime } from '../../hooks/use_live_relative_time'\nimport { MessageReadReceipts } from './message_read_receipts'\nimport { isNewMessage, useMessageCreateOrUpdate } from '../../hooks/use_message_create_or_update'\n\n/** Message\n * Component for display of a message within a conversation list\n */\ninterface MessageProps extends MessageResource {\n  canDeleteNonAuthoredMessages: boolean\n  conversation_id: number\n  latestReadMessageSortKey?: string\n}\n\nexport function Message({\n  canDeleteNonAuthoredMessages,\n  conversation_id,\n  latestReadMessageSortKey,\n  ...message\n}: MessageProps) {\n  const { text, reactionCounts, pending, error } = message\n  const styles = useMessageStyles(message)\n  const navigation = useNavigation()\n  const { colors } = useTheme()\n  const hasReactions = reactionCounts.length > 0\n  const [showMessageMetaToggle, setShowMessageMetaToggle] = React.useState(false)\n  const showMessageMeta =\n    showMessageMetaToggle || message.myLatestInConversation || !!pending || !!error || false\n  const timestamp = useLiveRelativeTime(message.createdAt)\n  const wasEdited = Boolean(message.textEditedAt)\n  const isPersisted = !isNewMessage(message)\n  const [temporarilyHidePendingState, setTemporarilyHidePendingState] = React.useState(true)\n\n  useEffect(() => {\n    if (pending) {\n      const timer = setTimeout(() => {\n        setTemporarilyHidePendingState(false)\n      }, 2000)\n      return () => clearTimeout(timer)\n    }\n    return () => {}\n  }, [pending])\n\n  const retryFailedSaveMutation = useMessageCreateOrUpdate({\n    conversationId: conversation_id,\n    message,\n  })\n\n  const handleRetry = () => {\n    if (text && error) {\n      retryFailedSaveMutation.mutateAsync({\n        text,\n        attachments: message.attachmentsForCreate,\n      })\n    }\n  }\n\n  const bgFadeProgress = useSharedValue(0)\n  const pressedColor = Platform.select({\n    ios: colors.fillColorNeutral050Base,\n    default: 'transparent',\n  })\n  const animatedBackgroundColor = useAnimatedStyle(() => {\n    const backgroundColor = interpolateColor(\n      bgFadeProgress.value,\n      [0, 1],\n      ['transparent', pressedColor]\n    )\n    return {\n      backgroundColor,\n    }\n  })\n\n  const handlePressIn = () => {\n    bgFadeProgress.value = withTiming(1, { duration: 300, easing: Easing.inOut(Easing.ease) })\n  }\n\n  const handlePressOut = () => {\n    bgFadeProgress.value = withTiming(0, { duration: 300, easing: Easing.inOut(Easing.ease) })\n  }\n\n  const handleMessageLongPress = () => {\n    if (!isPersisted) return\n\n    navigation.navigate('MessageActions', {\n      message_id: message.id,\n      conversation_id,\n      canDeleteNonAuthoredMessages,\n    })\n  }\n  const handleReactionLongPress = (reaction: ReactionCountResource) => {\n    navigation.navigate('Reactions', {\n      message_id: message.id,\n      conversation_id,\n      reaction_value: reaction.value,\n    })\n  }\n\n  const handleMessageAttachmentLongPress = (attachment: DenormalizedMessageAttachmentResource) => {\n    navigation.navigate('AttachmentActions', {\n      attachmentId: attachment?.id,\n      attachmentContentType: attachment?.attributes.contentType,\n      attachmentUrl: attachment?.attributes.url,\n      conversation_id,\n      canDeleteNonAuthoredMessages,\n      myMessage: message.mine,\n    })\n  }\n\n  const metaProps = {\n    authorName: message.author.name,\n    createdAt: message.createdAt,\n  }\n\n  const renderAuthor = (!message.mine && message.renderAuthor) || false\n  const messageBottomMargin = message.lastInGroup ? 12 : hasReactions || showMessageMeta ? 8 : 4\n  const messagePendingLabel = isPersisted ? 'Saving' : 'Sending'\n\n  return (\n    <Pressable\n      onLongPress={handleMessageLongPress}\n      onPress={() => setShowMessageMetaToggle(!showMessageMetaToggle)}\n      onPressIn={handlePressIn}\n      onPressOut={handlePressOut}\n      android_ripple={{ color: colors.androidRippleNeutral }}\n      accessibilityHint=\"Long press to view message actions like reacting and copying.\"\n    >\n      <Animated.View style={[styles.message, animatedBackgroundColor]}>\n        {!message.mine && (\n          <View style={styles.messageAuthor}>\n            {renderAuthor ? (\n              <Avatar size={'md'} sourceUri={message.author.avatar} />\n            ) : (\n              <View style={styles.avatarPlaceholder} />\n            )}\n          </View>\n        )}\n        <View style={[styles.messageContent, { marginBottom: messageBottomMargin }]}>\n          {renderAuthor && <Text variant=\"tertiary\">{message.author.name}</Text>}\n          <View style={styles.messageBubble}>\n            <ErrorBoundary>\n              <MessageAttachments\n                attachments={message.attachments}\n                metaProps={metaProps}\n                onMessageAttachmentLongPress={handleMessageAttachmentLongPress}\n                onMessageLongPress={handleMessageLongPress}\n              />\n            </ErrorBoundary>\n            {text && (\n              <View style={styles.messageText}>\n                <MessageMarkdown text={text} />\n              </View>\n            )}\n          </View>\n          {hasReactions && (\n            <View style={styles.messageReactions}>\n              {reactionCounts.map(reaction => (\n                <MessageReaction\n                  key={reaction.value}\n                  reaction={reaction}\n                  onLongPress={handleReactionLongPress}\n                  message={message}\n                  conversationId={conversation_id}\n                />\n              ))}\n            </View>\n          )}\n          {showMessageMeta && (\n            <View style={styles.messageMeta}>\n              {message.mine && !pending && !error && (\n                <MessageReadReceipts\n                  message={message}\n                  latestReadMessageSortKey={latestReadMessageSortKey}\n                />\n              )}\n              {error ? (\n                <View style={styles.errorContainer}>\n                  {retryFailedSaveMutation.isPending ? (\n                    <Spinner size={12} style={styles.errorSpinner} />\n                  ) : (\n                    <Icon name=\"general.exclamationTriangle\" size={12} style={styles.errorIcon} />\n                  )}\n                  <Text variant=\"footnote\" style={styles.errorText}>\n                    Failed to {isPersisted ? 'edit' : 'send'} |{' '}\n                    <TextInlineButton\n                      onPress={handleRetry}\n                      variant=\"footnote\"\n                      appearance=\"danger\"\n                      disabled={retryFailedSaveMutation.isPending}\n                    >\n                      Try again\n                    </TextInlineButton>\n                  </Text>\n                </View>\n              ) : pending && (!temporarilyHidePendingState || isPersisted) ? (\n                <View style={styles.pendingIndicatorContainer}>\n                  <Icon\n                    name=\"general.outlinedClock\"\n                    size={12}\n                    color={colors.iconColorDefaultSecondary}\n                  />\n                  <Text variant=\"footnote\">{messagePendingLabel}</Text>\n                </View>\n              ) : isPersisted ? (\n                <Text variant=\"footnote\">{timestamp}</Text>\n              ) : null}\n              {!pending && !error && wasEdited && (\n                <Text variant=\"footnote\">\n                  |{' '}\n                  <Text variant=\"footnote\" style={styles.editedText}>\n                    Edited\n                  </Text>\n                </Text>\n              )}\n            </View>\n          )}\n        </View>\n      </Animated.View>\n    </Pressable>\n  )\n}\n\nconst useMessageStyles = ({ mine }: MessageResource) => {\n  const { colors } = useTheme()\n  const myMessageBackgroundColor = useInteractionGhostBackgroundColor()\n  const { width } = useWindowDimensions()\n  const tabletWidth = width >= 744 // Smallest iPad Mini's width\n\n  const messageBubbleBackgroundColor = mine ? myMessageBackgroundColor : colors.fillColorNeutral070\n\n  return StyleSheet.create({\n    message: {\n      gap: 8,\n      flexDirection: mine ? 'row-reverse' : 'row',\n      paddingHorizontal: CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL,\n    },\n    messageContent: {\n      flex: 1,\n      gap: 4,\n    },\n    messageAuthor: {\n      flexDirection: 'row',\n      gap: 8,\n    },\n    avatarPlaceholder: {\n      width: 32, // Same width as avatar\n      height: 32, // Same height as avatar\n    },\n    messageBubble: {\n      backgroundColor: messageBubbleBackgroundColor,\n      borderRadius: 8,\n      maxWidth: tabletWidth ? 360 : '80%',\n      alignSelf: mine ? 'flex-end' : 'flex-start',\n    },\n    messageText: {\n      paddingVertical: 6,\n      paddingHorizontal: 8,\n    },\n    messageReactions: {\n      flexDirection: 'row',\n      gap: 4,\n      justifyContent: mine ? 'flex-end' : 'flex-start',\n    },\n    messageMeta: {\n      flexDirection: 'row',\n      alignItems: 'center',\n      justifyContent: mine ? 'flex-end' : 'flex-start',\n      gap: 4,\n    },\n    editedText: {\n      fontWeight: platformFontWeightMedium,\n    },\n    pendingIndicatorContainer: {\n      flexDirection: 'row',\n      alignItems: 'center',\n      gap: 4,\n    },\n    errorContainer: {\n      flexDirection: 'row',\n      alignItems: 'center',\n      gap: 4,\n    },\n    errorIcon: {\n      color: colors.statusErrorIcon,\n    },\n    errorText: {\n      color: colors.statusErrorText,\n    },\n    errorSpinner: {\n      position: 'relative',\n      width: 'auto',\n      height: 'auto',\n    },\n  })\n}\n"]}
+{"version":3,"file":"message.js","sourceRoot":"","sources":["../../../src/components/conversation/message.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useNavigation } from '@react-navigation/native'\nimport React, { useEffect } from 'react'\nimport { Platform, Pressable, StyleSheet, useWindowDimensions, View } from 'react-native'\nimport { MessageReaction } from '../../components/conversation/message_reaction'\nimport { Avatar, Icon, Spinner, Text, TextInlineButton } from '../../components/display'\nimport { useInteractionGhostBackgroundColor, useTheme } from '../../hooks'\nimport { MessageResource } from '../../types'\nimport { ReactionCountResource } from '../../types/resources/reaction'\nimport { MessageAttachments } from './message_attachments'\nimport ErrorBoundary from '../page/error_boundary'\nimport { MessageMarkdown } from './message_markdown'\nimport { DenormalizedMessageAttachmentResource } from '../../types/resources/denormalized_attachment_resource'\nimport {\n  CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL,\n  platformFontWeightMedium,\n} from '../../utils/styles'\nimport Animated, {\n  useSharedValue,\n  useAnimatedStyle,\n  withTiming,\n  interpolateColor,\n  Easing,\n} from 'react-native-reanimated'\nimport { useLiveRelativeTime } from '../../hooks/use_live_relative_time'\nimport { MessageReadReceipts } from './message_read_receipts'\nimport { isNewMessage, useMessageCreateOrUpdate } from '../../hooks/use_message_create_or_update'\n\n/** Message\n * Component for display of a message within a conversation list\n */\ninterface MessageProps extends MessageResource {\n  canDeleteNonAuthoredMessages: boolean\n  conversation_id: number\n  latestReadMessageSortKey?: string\n}\n\nexport function Message({\n  canDeleteNonAuthoredMessages,\n  conversation_id,\n  latestReadMessageSortKey,\n  ...message\n}: MessageProps) {\n  const { text, reactionCounts, pending, error } = message\n  const styles = useMessageStyles(message)\n  const navigation = useNavigation()\n  const { colors } = useTheme()\n  const hasReactions = reactionCounts.length > 0\n  const [showMessageMetaToggle, setShowMessageMetaToggle] = React.useState(false)\n  const showMessageMeta =\n    showMessageMetaToggle || message.myLatestInConversation || !!pending || !!error || false\n  const timestamp = useLiveRelativeTime(message.createdAt)\n  const wasEdited = Boolean(message.textEditedAt)\n  const isPersisted = !isNewMessage(message)\n  const [temporarilyHidePendingState, setTemporarilyHidePendingState] = React.useState(true)\n\n  useEffect(() => {\n    if (pending) {\n      const timer = setTimeout(() => {\n        setTemporarilyHidePendingState(false)\n      }, 2000)\n      return () => clearTimeout(timer)\n    }\n    return () => {}\n  }, [pending])\n\n  const retryFailedSaveMutation = useMessageCreateOrUpdate({\n    conversationId: conversation_id,\n    message,\n  })\n\n  const handleRetry = () => {\n    if (text && error) {\n      retryFailedSaveMutation.mutateAsync({\n        text,\n        attachments: message.attachmentsForCreate,\n      })\n    }\n  }\n\n  const bgFadeProgress = useSharedValue(0)\n  const pressedColor = Platform.select({\n    ios: colors.fillColorNeutral050Base,\n    default: 'transparent',\n  })\n  const animatedBackgroundColor = useAnimatedStyle(() => {\n    const backgroundColor = interpolateColor(\n      bgFadeProgress.value,\n      [0, 1],\n      ['transparent', pressedColor]\n    )\n    return {\n      backgroundColor,\n    }\n  })\n\n  const handlePressIn = () => {\n    bgFadeProgress.value = withTiming(1, { duration: 300, easing: Easing.inOut(Easing.ease) })\n  }\n\n  const handlePressOut = () => {\n    bgFadeProgress.value = withTiming(0, { duration: 300, easing: Easing.inOut(Easing.ease) })\n  }\n\n  const handleMessageLongPress = () => {\n    if (!isPersisted) return\n\n    navigation.navigate('MessageActions', {\n      message_id: message.id,\n      conversation_id,\n      canDeleteNonAuthoredMessages,\n    })\n  }\n  const handleReactionLongPress = (reaction: ReactionCountResource) => {\n    navigation.navigate('Reactions', {\n      message_id: message.id,\n      conversation_id,\n      reaction_value: reaction.value,\n    })\n  }\n\n  const handleMessageAttachmentLongPress = (attachment: DenormalizedMessageAttachmentResource) => {\n    navigation.navigate('AttachmentActions', {\n      attachmentId: attachment?.id,\n      attachmentContentType: attachment?.attributes.contentType,\n      attachmentUrl: attachment?.attributes.url,\n      conversation_id,\n      canDeleteNonAuthoredMessages,\n      myMessage: message.mine,\n    })\n  }\n\n  const metaProps = {\n    authorName: message.author.name,\n    createdAt: message.createdAt,\n  }\n\n  const renderAuthor = (!message.mine && message.renderAuthor) || false\n  const messageBottomMargin = message.lastInGroup ? 12 : hasReactions || showMessageMeta ? 8 : 4\n  const messagePendingLabel = isPersisted ? 'Saving' : 'Sending'\n\n  return (\n    <Pressable\n      onLongPress={handleMessageLongPress}\n      onPress={() => setShowMessageMetaToggle(!showMessageMetaToggle)}\n      onPressIn={handlePressIn}\n      onPressOut={handlePressOut}\n      android_ripple={{ color: colors.androidRippleNeutral }}\n      accessibilityHint=\"Long press to view message actions like reacting and copying.\"\n    >\n      <Animated.View style={[styles.message, animatedBackgroundColor]}>\n        {!message.mine && (\n          <View style={styles.messageAuthor}>\n            {renderAuthor ? (\n              <Avatar size={'md'} sourceUri={message.author.avatar} />\n            ) : (\n              <View style={styles.avatarPlaceholder} />\n            )}\n          </View>\n        )}\n        <View style={[styles.messageContent, { marginBottom: messageBottomMargin }]}>\n          {renderAuthor && <Text variant=\"tertiary\">{message.author.name}</Text>}\n          <View style={styles.messageBubble}>\n            <ErrorBoundary>\n              <MessageAttachments\n                attachments={message.attachments}\n                metaProps={metaProps}\n                onMessageAttachmentLongPress={handleMessageAttachmentLongPress}\n                onMessageLongPress={handleMessageLongPress}\n              />\n            </ErrorBoundary>\n            {text && (\n              <View style={styles.messageText}>\n                <MessageMarkdown text={text} />\n              </View>\n            )}\n          </View>\n          {hasReactions && (\n            <View style={styles.messageReactions}>\n              {reactionCounts.map(reaction => (\n                <MessageReaction\n                  key={reaction.value}\n                  reaction={reaction}\n                  onLongPress={handleReactionLongPress}\n                  message={message}\n                  conversationId={conversation_id}\n                />\n              ))}\n            </View>\n          )}\n          {showMessageMeta && (\n            <View style={styles.messageMeta}>\n              {message.mine && !pending && !error && (\n                <MessageReadReceipts\n                  message={message}\n                  latestReadMessageSortKey={latestReadMessageSortKey}\n                />\n              )}\n              {error ? (\n                <View style={styles.errorContainer}>\n                  {retryFailedSaveMutation.isPending ? (\n                    <Spinner size={12} />\n                  ) : (\n                    <Icon name=\"general.exclamationTriangle\" size={12} style={styles.errorIcon} />\n                  )}\n                  <Text variant=\"footnote\" style={styles.errorText}>\n                    Failed to {isPersisted ? 'edit' : 'send'} |{' '}\n                    <TextInlineButton\n                      onPress={handleRetry}\n                      variant=\"footnote\"\n                      appearance=\"danger\"\n                      disabled={retryFailedSaveMutation.isPending}\n                    >\n                      Try again\n                    </TextInlineButton>\n                  </Text>\n                </View>\n              ) : pending && (!temporarilyHidePendingState || isPersisted) ? (\n                <View style={styles.pendingIndicatorContainer}>\n                  <Icon\n                    name=\"general.outlinedClock\"\n                    size={12}\n                    color={colors.iconColorDefaultSecondary}\n                  />\n                  <Text variant=\"footnote\">{messagePendingLabel}</Text>\n                </View>\n              ) : isPersisted ? (\n                <Text variant=\"footnote\">{timestamp}</Text>\n              ) : null}\n              {!pending && !error && wasEdited && (\n                <Text variant=\"footnote\">\n                  |{' '}\n                  <Text variant=\"footnote\" style={styles.editedText}>\n                    Edited\n                  </Text>\n                </Text>\n              )}\n            </View>\n          )}\n        </View>\n      </Animated.View>\n    </Pressable>\n  )\n}\n\nconst useMessageStyles = ({ mine }: MessageResource) => {\n  const { colors } = useTheme()\n  const myMessageBackgroundColor = useInteractionGhostBackgroundColor()\n  const { width } = useWindowDimensions()\n  const tabletWidth = width >= 744 // Smallest iPad Mini's width\n\n  const messageBubbleBackgroundColor = mine ? myMessageBackgroundColor : colors.fillColorNeutral070\n\n  return StyleSheet.create({\n    message: {\n      gap: 8,\n      flexDirection: mine ? 'row-reverse' : 'row',\n      paddingHorizontal: CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL,\n    },\n    messageContent: {\n      flex: 1,\n      gap: 4,\n    },\n    messageAuthor: {\n      flexDirection: 'row',\n      gap: 8,\n    },\n    avatarPlaceholder: {\n      width: 32, // Same width as avatar\n      height: 32, // Same height as avatar\n    },\n    messageBubble: {\n      backgroundColor: messageBubbleBackgroundColor,\n      borderRadius: 8,\n      maxWidth: tabletWidth ? 360 : '80%',\n      alignSelf: mine ? 'flex-end' : 'flex-start',\n    },\n    messageText: {\n      paddingVertical: 6,\n      paddingHorizontal: 8,\n    },\n    messageReactions: {\n      flexDirection: 'row',\n      gap: 4,\n      justifyContent: mine ? 'flex-end' : 'flex-start',\n    },\n    messageMeta: {\n      flexDirection: 'row',\n      alignItems: 'center',\n      justifyContent: mine ? 'flex-end' : 'flex-start',\n      gap: 4,\n    },\n    editedText: {\n      fontWeight: platformFontWeightMedium,\n    },\n    pendingIndicatorContainer: {\n      flexDirection: 'row',\n      alignItems: 'center',\n      gap: 4,\n    },\n    errorContainer: {\n      flexDirection: 'row',\n      alignItems: 'center',\n      gap: 4,\n    },\n    errorIcon: {\n      color: colors.statusErrorIcon,\n    },\n    errorText: {\n      color: colors.statusErrorText,\n    },\n  })\n}\n"]}

package/build/components/display/badge.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { Pressable, StyleSheet, View } from 'react-native';
 import Svg, { Defs, LinearGradient, Path, Stop } from 'react-native-svg';
 import { useFontScale, useTheme } from '../../hooks';
-import { platformFontWeightMedium, space } from '../../utils';
+import { platformFontWeightMedium } from '../../utils';
 import { tokens } from '../../vendor/tapestry/tokens';
 import { Icon } from './icon';
 import { Text } from './text';
@@ -58,9 +58,9 @@ const useStyles = ({ appearance = 'neutral', maxFontSizeMultiplier, variant = 'd
     const { colors } = useTheme();
     const fontScale = useFontScale({ maxFontSizeMultiplier });
     const statusColorMap = useStatusColorAppearanceMap();
-    const badgePaddingHorizontal = space(1) * fontScale;
-    const badgePaddingVertical = space(0.5) * fontScale;
-    const badgeGap = space(0.5) * fontScale;
+    const badgePaddingHorizontal = 8 * fontScale;
+    const badgePaddingVertical = 4 * fontScale;
+    const badgeGap = 4 * fontScale;
     const badgeFontSize = 12;
     const variantStylesMap = {
         default: {

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, space } 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 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    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      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\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 badgePaddingHorizontal = 8 * fontScale\n  const badgePaddingVertical = 4 * fontScale\n  const badgeGap = 4 * 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    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      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/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/display/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAE7D,OAAO,EAAQ,UAAU,EAAE,MAAM,QAAQ,CAAA;AAMzC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAA;AAMlE,QAAA,MAAM,KAAK;;;;CAID,CAAA;AAEV,KAAK,SAAS,GAAG,CAAC,OAAO,KAAK,CAAC,CAAC,MAAM,OAAO,KAAK,CAAC,CAAA;AAYnD,QAAA,MAAM,QAAQ;;;CAGJ,CAAA;AAEV,KAAK,YAAY,GAAG,CAAC,OAAO,QAAQ,CAAC,CAAC,MAAM,OAAO,QAAQ,CAAC,CAAA;AAa5D,MAAM,WAAW,WAAY,SAAQ,cAAc;IACjD;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B;;OAEG;IACH,UAAU,CAAC,EAAE,qBAAqB,CAAA;IAClC;;OAEG;IACH,kBAAkB,CAAC,EAAE,SAAS,CAAA;IAC9B;;OAEG;IACH,oBAAoB,CAAC,EAAE,SAAS,CAAA;IAChC;;OAEG;IACH,YAAY,CAAC,EAAE,UAAU,CAAA;IACzB;;OAEG;IACH,aAAa,CAAC,EAAE,UAAU,CAAA;IAC1B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;OAEG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,CAAA;CACvB;AAED,wBAAgB,MAAM,CAAC,EACrB,oBAA4B,EAC5B,gBAAuB,EACvB,UAA0B,EAC1B,oBAAoB,EACpB,kBAAkB,EAClB,QAAgB,EAChB,YAAY,EACZ,aAAa,EACb,OAAO,EACP,qBAAqB,EACrB,gBAAgB,EAChB,IAAW,EACX,KAAK,EACL,OAAgB,EAChB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,WAAW,qBAiEb"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/display/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAE7D,OAAO,EAAQ,UAAU,EAAE,MAAM,QAAQ,CAAA;AAMzC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAA;AAMlE,QAAA,MAAM,KAAK;;;;CAID,CAAA;AAEV,KAAK,SAAS,GAAG,CAAC,OAAO,KAAK,CAAC,CAAC,MAAM,OAAO,KAAK,CAAC,CAAA;AAYnD,QAAA,MAAM,QAAQ;;;CAGJ,CAAA;AAEV,KAAK,YAAY,GAAG,CAAC,OAAO,QAAQ,CAAC,CAAC,MAAM,OAAO,QAAQ,CAAC,CAAA;AAa5D,MAAM,WAAW,WAAY,SAAQ,cAAc;IACjD;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B;;OAEG;IACH,UAAU,CAAC,EAAE,qBAAqB,CAAA;IAClC;;OAEG;IACH,kBAAkB,CAAC,EAAE,SAAS,CAAA;IAC9B;;OAEG;IACH,oBAAoB,CAAC,EAAE,SAAS,CAAA;IAChC;;OAEG;IACH,YAAY,CAAC,EAAE,UAAU,CAAA;IACzB;;OAEG;IACH,aAAa,CAAC,EAAE,UAAU,CAAA;IAC1B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;OAEG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,CAAA;CACvB;AAED,wBAAgB,MAAM,CAAC,EACrB,oBAA4B,EAC5B,gBAAuB,EACvB,UAA0B,EAC1B,oBAAoB,EACpB,kBAAkB,EAClB,QAAgB,EAChB,YAAY,EACZ,aAAa,EACb,OAAO,EACP,qBAAqB,EACrB,gBAAgB,EAChB,IAAW,EACX,KAAK,EACL,OAAgB,EAChB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,WAAW,qBAkEb"}

package/build/components/display/button.js

@@ -33,7 +33,7 @@ export function Button({ adjustsFontSizeToFit = false, allowFontScaling = true,
             ...overrideStyles,
         })} accessibilityRole="button" disabled={disabled || loading} accessibilityState={{ busy: loading }} android_ripple={{ color: androidRippleColor, borderless: false, foreground: true }} {...props}>
       <LinearGradient start={{ x: 0.1, y: 0.1 }} end={{ x: 0.9, y: 0.9 }} colors={gradientOptionsMap[colorKey]} style={[styles.colorWrapper, colorWrapperStyles]}>
-        {loading && (<Spinner size={styles.spinner.fontSize} maxFontSizeMultiplier={maxFontSizeMultiplier || 0}/>)}
+        {loading && (<Spinner size={styles.spinnerSize.fontSize} style={styles.spinner} maxFontSizeMultiplier={maxFontSizeMultiplier || 0}/>)}
         <View style={[styles.innerWrapper, contentWrapperStyles]}>
           {iconNameLeft && (<Icon name={iconNameLeft} style={iconStyles} maxFontSizeMultiplier={maxFontSizeMultiplier}/>)}
           <Text allowFontScaling={allowFontScaling} minimumFontScale={minimumFontScale} maxFontSizeMultiplier={maxFontSizeMultiplier} adjustsFontSizeToFit={adjustsFontSizeToFit} numberOfLines={1} style={textStyles}>
@@ -133,9 +133,17 @@ const useStyles = ({ appearance = 'interaction', disabled = false, loading = fal
         iconLoading: {
             opacity: 0,
         },
-        spinner: {
+        spinnerSize: {
             fontSize: sizeStyleMap[size].fontSize,
         },
+        spinner: {
+            width: '100%',
+            height: '100%',
+            position: 'absolute',
+            justifyContent: 'center',
+            alignItems: 'center',
+            zIndex: 2,
+        },
     });
 };
 //# sourceMappingURL=button.js.map

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"icon_button.d.ts","sourceRoot":"","sources":["../../../src/components/display/icon_button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAyB,KAAK,SAAS,EAAE,MAAM,cAAc,CAAA;AACpE,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAE7D,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAA;AAKnD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,uBAAuB,CAAA;AAMtE,QAAA,MAAM,KAAK;;;;;;;;;;CAUD,CAAA;AAEV,KAAK,SAAS,GAAG,CAAC,OAAO,KAAK,CAAC,CAAC,MAAM,OAAO,KAAK,CAAC,CAAA;AAmBnD,UAAU,eAAgB,SAAQ,cAAc;IAC9C;;;OAGG;IACH,kBAAkB,EAAE,MAAM,CAAA;IAC1B;;OAEG;IACH,UAAU,CAAC,EAAE,yBAAyB,CAAA;IACtC;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAA;IAC9B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;OAEG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B;;OAEG;IACH,IAAI,EAAE,UAAU,CAAA;IAChB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CAC7B;AAED,wBAAgB,UAAU,CAAC,EACzB,kBAAkB,EAClB,UAAsB,EACtB,QAAgB,EAChB,SAAS,EACT,OAAO,EACP,qBAAqB,EACrB,IAAI,EACJ,IAAW,EACX,KAAK,EACL,GAAG,KAAK,EACT,EAAE,eAAe,qBAmEjB"}
+{"version":3,"file":"icon_button.d.ts","sourceRoot":"","sources":["../../../src/components/display/icon_button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAyB,KAAK,SAAS,EAAE,MAAM,cAAc,CAAA;AACpE,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAE7D,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAA;AAKnD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,uBAAuB,CAAA;AAMtE,QAAA,MAAM,KAAK;;;;;;;;;;CAUD,CAAA;AAEV,KAAK,SAAS,GAAG,CAAC,OAAO,KAAK,CAAC,CAAC,MAAM,OAAO,KAAK,CAAC,CAAA;AAmBnD,UAAU,eAAgB,SAAQ,cAAc;IAC9C;;;OAGG;IACH,kBAAkB,EAAE,MAAM,CAAA;IAC1B;;OAEG;IACH,UAAU,CAAC,EAAE,yBAAyB,CAAA;IACtC;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAA;IAC9B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;OAEG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B;;OAEG;IACH,IAAI,EAAE,UAAU,CAAA;IAChB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CAC7B;AAED,wBAAgB,UAAU,CAAC,EACzB,kBAAkB,EAClB,UAAsB,EACtB,QAAgB,EAChB,SAAS,EACT,OAAO,EACP,qBAAqB,EACrB,IAAI,EACJ,IAAW,EACX,KAAK,EACL,GAAG,KAAK,EACT,EAAE,eAAe,qBAoEjB"}

package/build/components/display/icon_button.js

@@ -60,8 +60,7 @@ export function IconButton({ accessibilityLabel, appearance = 'neutral', disable
             foreground: true,
             radius: androidRadiusSizeMap[size].radius,
         }} {...props}>
-      {loading && (<Spinner size={styles.spinner.fontSize} maxFontSizeMultiplier={maxFontSizeMultiplier || 0}/>)}
-      <Icon name={name} style={[styles.icon, iconStyle, disabled && styles.disabled, loading && styles.loading]} maxFontSizeMultiplier={maxFontSizeMultiplier}/>
+      {loading ? (<Spinner size={styles.spinner.fontSize} maxFontSizeMultiplier={maxFontSizeMultiplier || 0}/>) : (<Icon name={name} style={[styles.icon, iconStyle, disabled && styles.iconDisabled]} maxFontSizeMultiplier={maxFontSizeMultiplier}/>)}
     </Pressable>);
 }
 // =================================
@@ -120,12 +119,9 @@ const useStyles = ({ appearance = 'neutral', disabled = false, loading = false,
             fontSize: sizeStyleMap[size].fontSize,
             color: colorOptionMap[colorKey],
         },
-        disabled: {
+        iconDisabled: {
             color: colors.iconColorDefaultDisabled,
         },
-        loading: {
-            opacity: 0,
-        },
         spinner: {
             fontSize: sizeStyleMap[size].fontSize,
         },

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

@@ -1 +1 @@
-{"version":3,"file":"icon_button.js","sourceRoot":"","sources":["../../../src/components/display/icon_button.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react'\nimport { Pressable, StyleSheet, type StyleProp } from 'react-native'\nimport type { PressableProps, ViewStyle } from 'react-native'\nimport { Icon } from './icon'\nimport type { IconProps, IconString } from './icon'\nimport { useTheme, useFontScale, useCreateAndroidRippleColor } from '../../hooks'\nimport { platformPressedOpacityStyle } from '../../utils'\nimport { Spinner } from './spinner'\nimport { getColorKey, useIconButtonColorOptionMap } from './utils/button_colors'\nimport type { IconButtonAppearanceUnion } from './utils/button_colors'\n\n// =================================\n// ====== Constants ================\n// =================================\n\nconst SIZES = {\n  xxxs: 'xxxs',\n  xxs: 'xxs',\n  xs: 'xs',\n  sm: 'sm',\n  md: 'md',\n  lg: 'lg',\n  xl: 'xl',\n  xxl: 'xxl',\n  xxxl: 'xxxl',\n} as const\n\ntype SizeUnion = (typeof SIZES)[keyof typeof SIZES]\ntype SizeStyle = Record<\n  SizeUnion,\n  {\n    fontSize: number\n    height: number\n  }\n>\ntype AndroidRadiusSize = Record<\n  SizeUnion,\n  {\n    radius: number\n  }\n>\n\n// =================================\n// ====== Component ================\n// =================================\n\ninterface IconButtonProps extends PressableProps {\n  /**\n   * Provides context to screen readers about what the button does.\n   * This is required as Icons don't inherently provide non-visual context like text does.\n   */\n  accessibilityLabel: string\n  /**\n   * Updates the icon's colors. Defaults to 'neutral'.\n   */\n  appearance?: IconButtonAppearanceUnion\n  /**\n   * Styles the icon itself.\n   * `fontSize` allows for a custom size that also responds to the device's text scale.\n   * `color` changes the color of the icon.\n   */\n  iconStyle?: IconProps['style']\n  /**\n   * Disables the button and replaces its content with a spinner\n   */\n  loading?: boolean\n  /**\n   * Specifies the maximum size a font can reach when allowFontScaling is enabled.\n   */\n  maxFontSizeMultiplier?: number\n  /**\n   * Generates an icon from `@planningcenter/icons`\n   */\n  name: IconString\n  /**\n   * Changes the overall size of the button and its contents\n   */\n  size?: SizeUnion\n  /**\n   * Styles the `Pressable` wrapper\n   */\n  style?: StyleProp<ViewStyle>\n}\n\nexport function IconButton({\n  accessibilityLabel,\n  appearance = 'neutral',\n  disabled = false,\n  iconStyle,\n  loading,\n  maxFontSizeMultiplier,\n  name,\n  size = 'md',\n  style,\n  ...props\n}: IconButtonProps) {\n  const styles = useStyles({ appearance, disabled, loading, maxFontSizeMultiplier, size })\n  const colorOptionMap = useIconButtonColorOptionMap()\n  const colorKey = getColorKey({ disabled, loading, appearance })\n\n  const { color = colorOptionMap[colorKey] } = StyleSheet.flatten(iconStyle || {})\n  const androidRippleColor = useCreateAndroidRippleColor({ color: color })\n\n  const androidRadiusSizeMap: AndroidRadiusSize = {\n    [SIZES.xxxs]: {\n      radius: 8,\n    },\n    [SIZES.xxs]: {\n      radius: 10,\n    },\n    [SIZES.xs]: {\n      radius: 12,\n    },\n    [SIZES.sm]: {\n      radius: 14,\n    },\n    [SIZES.md]: {\n      radius: 16,\n    },\n    [SIZES.lg]: {\n      radius: 18,\n    },\n    [SIZES.xl]: {\n      radius: 20,\n    },\n    [SIZES.xxl]: {\n      radius: 26,\n    },\n    [SIZES.xxxl]: {\n      radius: 32,\n    },\n  }\n\n  return (\n    <Pressable\n      style={({ pressed }) => [styles.pressable, style, pressed && platformPressedOpacityStyle]}\n      accessibilityRole=\"button\"\n      disabled={disabled || loading}\n      accessibilityState={{ busy: loading }}\n      accessibilityLabel={accessibilityLabel}\n      hitSlop={10}\n      android_ripple={{\n        color: androidRippleColor,\n        borderless: true,\n        foreground: true,\n        radius: androidRadiusSizeMap[size].radius,\n      }}\n      {...props}\n    >\n      {loading && (\n        <Spinner\n          size={styles.spinner.fontSize}\n          maxFontSizeMultiplier={maxFontSizeMultiplier || 0}\n        />\n      )}\n      <Icon\n        name={name}\n        style={[styles.icon, iconStyle, disabled && styles.disabled, loading && styles.loading]}\n        maxFontSizeMultiplier={maxFontSizeMultiplier}\n      />\n    </Pressable>\n  )\n}\n\n// =================================\n// ====== Styles ===================\n// =================================\n\nconst useStyles = ({\n  appearance = 'neutral',\n  disabled = false,\n  loading = false,\n  maxFontSizeMultiplier,\n  size = 'md',\n}: Partial<IconButtonProps>) => {\n  const { colors } = useTheme()\n  const fontScale = useFontScale({ maxFontSizeMultiplier })\n  const colorOptionMap = useIconButtonColorOptionMap()\n  const colorKey = getColorKey({ disabled, loading, appearance })\n\n  const sizeStyleMap: SizeStyle = {\n    [SIZES.xxxs]: {\n      fontSize: 8,\n      height: 8 * fontScale,\n    },\n    [SIZES.xxs]: {\n      fontSize: 10,\n      height: 10 * fontScale,\n    },\n    [SIZES.xs]: {\n      fontSize: 12,\n      height: 12 * fontScale,\n    },\n    [SIZES.sm]: {\n      fontSize: 14,\n      height: 14 * fontScale,\n    },\n    [SIZES.md]: {\n      fontSize: 16,\n      height: 16 * fontScale,\n    },\n    [SIZES.lg]: {\n      fontSize: 20,\n      height: 20 * fontScale,\n    },\n    [SIZES.xl]: {\n      fontSize: 24,\n      height: 24 * fontScale,\n    },\n    [SIZES.xxl]: {\n      fontSize: 32,\n      height: 32 * fontScale,\n    },\n    [SIZES.xxxl]: {\n      fontSize: 40,\n      height: 40 * fontScale,\n    },\n  }\n\n  return StyleSheet.create({\n    pressable: {\n      alignItems: 'center',\n      justifyContent: 'center',\n      height: sizeStyleMap[size].height,\n    },\n    icon: {\n      fontSize: sizeStyleMap[size].fontSize,\n      color: colorOptionMap[colorKey],\n    },\n    disabled: {\n      color: colors.iconColorDefaultDisabled,\n    },\n    loading: {\n      opacity: 0,\n    },\n    spinner: {\n      fontSize: sizeStyleMap[size].fontSize,\n    },\n  })\n}\n"]}
+{"version":3,"file":"icon_button.js","sourceRoot":"","sources":["../../../src/components/display/icon_button.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react'\nimport { Pressable, StyleSheet, type StyleProp } from 'react-native'\nimport type { PressableProps, ViewStyle } from 'react-native'\nimport { Icon } from './icon'\nimport type { IconProps, IconString } from './icon'\nimport { useTheme, useFontScale, useCreateAndroidRippleColor } from '../../hooks'\nimport { platformPressedOpacityStyle } from '../../utils'\nimport { Spinner } from './spinner'\nimport { getColorKey, useIconButtonColorOptionMap } from './utils/button_colors'\nimport type { IconButtonAppearanceUnion } from './utils/button_colors'\n\n// =================================\n// ====== Constants ================\n// =================================\n\nconst SIZES = {\n  xxxs: 'xxxs',\n  xxs: 'xxs',\n  xs: 'xs',\n  sm: 'sm',\n  md: 'md',\n  lg: 'lg',\n  xl: 'xl',\n  xxl: 'xxl',\n  xxxl: 'xxxl',\n} as const\n\ntype SizeUnion = (typeof SIZES)[keyof typeof SIZES]\ntype SizeStyle = Record<\n  SizeUnion,\n  {\n    fontSize: number\n    height: number\n  }\n>\ntype AndroidRadiusSize = Record<\n  SizeUnion,\n  {\n    radius: number\n  }\n>\n\n// =================================\n// ====== Component ================\n// =================================\n\ninterface IconButtonProps extends PressableProps {\n  /**\n   * Provides context to screen readers about what the button does.\n   * This is required as Icons don't inherently provide non-visual context like text does.\n   */\n  accessibilityLabel: string\n  /**\n   * Updates the icon's colors. Defaults to 'neutral'.\n   */\n  appearance?: IconButtonAppearanceUnion\n  /**\n   * Styles the icon itself.\n   * `fontSize` allows for a custom size that also responds to the device's text scale.\n   * `color` changes the color of the icon.\n   */\n  iconStyle?: IconProps['style']\n  /**\n   * Disables the button and replaces its content with a spinner\n   */\n  loading?: boolean\n  /**\n   * Specifies the maximum size a font can reach when allowFontScaling is enabled.\n   */\n  maxFontSizeMultiplier?: number\n  /**\n   * Generates an icon from `@planningcenter/icons`\n   */\n  name: IconString\n  /**\n   * Changes the overall size of the button and its contents\n   */\n  size?: SizeUnion\n  /**\n   * Styles the `Pressable` wrapper\n   */\n  style?: StyleProp<ViewStyle>\n}\n\nexport function IconButton({\n  accessibilityLabel,\n  appearance = 'neutral',\n  disabled = false,\n  iconStyle,\n  loading,\n  maxFontSizeMultiplier,\n  name,\n  size = 'md',\n  style,\n  ...props\n}: IconButtonProps) {\n  const styles = useStyles({ appearance, disabled, loading, maxFontSizeMultiplier, size })\n  const colorOptionMap = useIconButtonColorOptionMap()\n  const colorKey = getColorKey({ disabled, loading, appearance })\n\n  const { color = colorOptionMap[colorKey] } = StyleSheet.flatten(iconStyle || {})\n  const androidRippleColor = useCreateAndroidRippleColor({ color: color })\n\n  const androidRadiusSizeMap: AndroidRadiusSize = {\n    [SIZES.xxxs]: {\n      radius: 8,\n    },\n    [SIZES.xxs]: {\n      radius: 10,\n    },\n    [SIZES.xs]: {\n      radius: 12,\n    },\n    [SIZES.sm]: {\n      radius: 14,\n    },\n    [SIZES.md]: {\n      radius: 16,\n    },\n    [SIZES.lg]: {\n      radius: 18,\n    },\n    [SIZES.xl]: {\n      radius: 20,\n    },\n    [SIZES.xxl]: {\n      radius: 26,\n    },\n    [SIZES.xxxl]: {\n      radius: 32,\n    },\n  }\n\n  return (\n    <Pressable\n      style={({ pressed }) => [styles.pressable, style, pressed && platformPressedOpacityStyle]}\n      accessibilityRole=\"button\"\n      disabled={disabled || loading}\n      accessibilityState={{ busy: loading }}\n      accessibilityLabel={accessibilityLabel}\n      hitSlop={10}\n      android_ripple={{\n        color: androidRippleColor,\n        borderless: true,\n        foreground: true,\n        radius: androidRadiusSizeMap[size].radius,\n      }}\n      {...props}\n    >\n      {loading ? (\n        <Spinner\n          size={styles.spinner.fontSize}\n          maxFontSizeMultiplier={maxFontSizeMultiplier || 0}\n        />\n      ) : (\n        <Icon\n          name={name}\n          style={[styles.icon, iconStyle, disabled && styles.iconDisabled]}\n          maxFontSizeMultiplier={maxFontSizeMultiplier}\n        />\n      )}\n    </Pressable>\n  )\n}\n\n// =================================\n// ====== Styles ===================\n// =================================\n\nconst useStyles = ({\n  appearance = 'neutral',\n  disabled = false,\n  loading = false,\n  maxFontSizeMultiplier,\n  size = 'md',\n}: Partial<IconButtonProps>) => {\n  const { colors } = useTheme()\n  const fontScale = useFontScale({ maxFontSizeMultiplier })\n  const colorOptionMap = useIconButtonColorOptionMap()\n  const colorKey = getColorKey({ disabled, loading, appearance })\n\n  const sizeStyleMap: SizeStyle = {\n    [SIZES.xxxs]: {\n      fontSize: 8,\n      height: 8 * fontScale,\n    },\n    [SIZES.xxs]: {\n      fontSize: 10,\n      height: 10 * fontScale,\n    },\n    [SIZES.xs]: {\n      fontSize: 12,\n      height: 12 * fontScale,\n    },\n    [SIZES.sm]: {\n      fontSize: 14,\n      height: 14 * fontScale,\n    },\n    [SIZES.md]: {\n      fontSize: 16,\n      height: 16 * fontScale,\n    },\n    [SIZES.lg]: {\n      fontSize: 20,\n      height: 20 * fontScale,\n    },\n    [SIZES.xl]: {\n      fontSize: 24,\n      height: 24 * fontScale,\n    },\n    [SIZES.xxl]: {\n      fontSize: 32,\n      height: 32 * fontScale,\n    },\n    [SIZES.xxxl]: {\n      fontSize: 40,\n      height: 40 * fontScale,\n    },\n  }\n\n  return StyleSheet.create({\n    pressable: {\n      alignItems: 'center',\n      justifyContent: 'center',\n      height: sizeStyleMap[size].height,\n    },\n    icon: {\n      fontSize: sizeStyleMap[size].fontSize,\n      color: colorOptionMap[colorKey],\n    },\n    iconDisabled: {\n      color: colors.iconColorDefaultDisabled,\n    },\n    spinner: {\n      fontSize: sizeStyleMap[size].fontSize,\n    },\n  })\n}\n"]}

package/build/components/display/image.js

@@ -18,7 +18,7 @@ export function Image({ source, onLoad = noop, defaultLoading = true, loading =
     return (<View style={wrapperStyle} accessible={Boolean(alt)} accessibilityRole="image" accessibilityState={{ busy: isLoading }} collapsable={false}>
       <ImageComponent style={[styles.image, imageStyles, animatedImageStyle]} onLoad={handleOnLoad} source={source} alt={isLoading ? '' : alt} {...props}/>
       {!hideLoader && isLoading && (<View style={[styles.loadingBackground, loadingBackgroundStyles]}>
-          <Spinner size={loaderSize}/>
+          <Spinner size={loaderSize} style={styles.spinner}/>
         </View>)}
     </View>);
 }
@@ -39,6 +39,13 @@ const useStyles = ({ width, height, borderRadius }) => {
             width,
             height,
         },
+        spinner: {
+            width: '100%',
+            height: '100%',
+            justifyContent: 'center',
+            alignItems: 'center',
+            position: 'absolute',
+        },
     });
 };
 //# sourceMappingURL=image.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"image.js","sourceRoot":"","sources":["../../../src/components/display/image.tsx"],"names":[],"mappings":"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","sourcesContent":["import { noop } from 'lodash'\nimport React, { useState } from 'react'\nimport {\n  AnimatableNumericValue,\n  DimensionValue,\n  ImageStyle,\n  Image as ReactNativeImage,\n  ImageProps as ReactNativeImageProps,\n  StyleSheet,\n  View,\n  ViewStyle,\n} from 'react-native'\nimport Animated, { AnimatedStyle } from 'react-native-reanimated'\nimport { useTheme } from '../../hooks'\nimport { Spinner } from './spinner'\n\n// =================================\n// ====== Component ================\n// =================================\n\nexport interface ImageProps extends ReactNativeImageProps {\n  /**\n   * Describes the image to screen-readers and marks the image as `accessible`.\n   * Passing an empty string will hide the image from screen-readers.\n   */\n  alt: string\n  /**\n   * Shows the image's loading spinner right away. Enabled by default.\n   */\n  defaultLoading?: boolean\n  /**\n   * Externally controls the loading state of the image.\n   */\n  loading?: boolean\n  /**\n   * Hide the loading spinner, regardless of the loading state.\n   */\n  hideLoader?: boolean\n  /**\n   * Size of the loading spinner.\n   */\n  loaderSize?: number\n  /**\n   * Style object for the preload background.\n   */\n  loadingBackgroundStyles?: ViewStyle\n  /**\n   * Style the outer View of the image.\n   */\n  wrapperStyle?: ViewStyle\n  /**\n   * Style the image if animated.\n   */\n  animatedImageStyle?: AnimatedStyle<ImageStyle>\n}\n\nexport function Image({\n  source,\n  onLoad = noop,\n  defaultLoading = true,\n  loading = false,\n  hideLoader = false,\n  loaderSize = 24,\n  loadingBackgroundStyles,\n  style = {},\n  wrapperStyle = {},\n  alt,\n  animatedImageStyle = {},\n  ...props\n}: ImageProps) {\n  const [isImageLoading, setIsImageLoading] = useState(defaultLoading)\n\n  const imageStyles = StyleSheet.flatten(style)\n  const { width = '100%', height = '100%', borderRadius = 0 } = imageStyles || {}\n  const styles = useStyles({ width, height, borderRadius })\n\n  const handleOnLoad = (event: any) => {\n    setIsImageLoading(false)\n    onLoad?.(event)\n  }\n\n  const isLoading = isImageLoading || loading\n\n  const ImageComponent = animatedImageStyle ? Animated.Image : ReactNativeImage\n\n  return (\n    <View\n      style={wrapperStyle}\n      accessible={Boolean(alt)}\n      accessibilityRole=\"image\"\n      accessibilityState={{ busy: isLoading }}\n      collapsable={false}\n    >\n      <ImageComponent\n        style={[styles.image, imageStyles, animatedImageStyle]}\n        onLoad={handleOnLoad}\n        source={source}\n        alt={isLoading ? '' : alt}\n        {...props}\n      />\n      {!hideLoader && isLoading && (\n        <View style={[styles.loadingBackground, loadingBackgroundStyles]}>\n          <Spinner size={loaderSize} />\n        </View>\n      )}\n    </View>\n  )\n}\n\n// =================================\n// ====== Styles ===================\n// =================================\n\ninterface Styles {\n  width: DimensionValue\n  height: DimensionValue\n  borderRadius: AnimatableNumericValue | string\n}\n\nconst useStyles = ({ width, height, borderRadius }: Styles) => {\n  const { colors } = useTheme()\n\n  return StyleSheet.create({\n    loadingBackground: {\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      backgroundColor: colors.fillColorNeutral070,\n      borderRadius,\n      width,\n      height,\n    },\n    image: {\n      backgroundColor: colors.fillColorNeutral070,\n      width,\n      height,\n    },\n  })\n}\n"]}
+{"version":3,"file":"image.js","sourceRoot":"","sources":["../../../src/components/display/image.tsx"],"names":[],"mappings":"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","sourcesContent":["import { noop } from 'lodash'\nimport React, { useState } from 'react'\nimport {\n  AnimatableNumericValue,\n  DimensionValue,\n  ImageStyle,\n  Image as ReactNativeImage,\n  ImageProps as ReactNativeImageProps,\n  StyleSheet,\n  View,\n  ViewStyle,\n} from 'react-native'\nimport Animated, { AnimatedStyle } from 'react-native-reanimated'\nimport { useTheme } from '../../hooks'\nimport { Spinner } from './spinner'\n\n// =================================\n// ====== Component ================\n// =================================\n\nexport interface ImageProps extends ReactNativeImageProps {\n  /**\n   * Describes the image to screen-readers and marks the image as `accessible`.\n   * Passing an empty string will hide the image from screen-readers.\n   */\n  alt: string\n  /**\n   * Shows the image's loading spinner right away. Enabled by default.\n   */\n  defaultLoading?: boolean\n  /**\n   * Externally controls the loading state of the image.\n   */\n  loading?: boolean\n  /**\n   * Hide the loading spinner, regardless of the loading state.\n   */\n  hideLoader?: boolean\n  /**\n   * Size of the loading spinner.\n   */\n  loaderSize?: number\n  /**\n   * Style object for the preload background.\n   */\n  loadingBackgroundStyles?: ViewStyle\n  /**\n   * Style the outer View of the image.\n   */\n  wrapperStyle?: ViewStyle\n  /**\n   * Style the image if animated.\n   */\n  animatedImageStyle?: AnimatedStyle<ImageStyle>\n}\n\nexport function Image({\n  source,\n  onLoad = noop,\n  defaultLoading = true,\n  loading = false,\n  hideLoader = false,\n  loaderSize = 24,\n  loadingBackgroundStyles,\n  style = {},\n  wrapperStyle = {},\n  alt,\n  animatedImageStyle = {},\n  ...props\n}: ImageProps) {\n  const [isImageLoading, setIsImageLoading] = useState(defaultLoading)\n\n  const imageStyles = StyleSheet.flatten(style)\n  const { width = '100%', height = '100%', borderRadius = 0 } = imageStyles || {}\n  const styles = useStyles({ width, height, borderRadius })\n\n  const handleOnLoad = (event: any) => {\n    setIsImageLoading(false)\n    onLoad?.(event)\n  }\n\n  const isLoading = isImageLoading || loading\n\n  const ImageComponent = animatedImageStyle ? Animated.Image : ReactNativeImage\n\n  return (\n    <View\n      style={wrapperStyle}\n      accessible={Boolean(alt)}\n      accessibilityRole=\"image\"\n      accessibilityState={{ busy: isLoading }}\n      collapsable={false}\n    >\n      <ImageComponent\n        style={[styles.image, imageStyles, animatedImageStyle]}\n        onLoad={handleOnLoad}\n        source={source}\n        alt={isLoading ? '' : alt}\n        {...props}\n      />\n      {!hideLoader && isLoading && (\n        <View style={[styles.loadingBackground, loadingBackgroundStyles]}>\n          <Spinner size={loaderSize} style={styles.spinner} />\n        </View>\n      )}\n    </View>\n  )\n}\n\n// =================================\n// ====== Styles ===================\n// =================================\n\ninterface Styles {\n  width: DimensionValue\n  height: DimensionValue\n  borderRadius: AnimatableNumericValue | string\n}\n\nconst useStyles = ({ width, height, borderRadius }: Styles) => {\n  const { colors } = useTheme()\n\n  return StyleSheet.create({\n    loadingBackground: {\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      backgroundColor: colors.fillColorNeutral070,\n      borderRadius,\n      width,\n      height,\n    },\n    image: {\n      backgroundColor: colors.fillColorNeutral070,\n      width,\n      height,\n    },\n    spinner: {\n      width: '100%',\n      height: '100%',\n      justifyContent: 'center',\n      alignItems: 'center',\n      position: 'absolute',\n    },\n  })\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"person.d.ts","sourceRoot":"","sources":["../../../src/components/display/person.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAoB,KAAK,SAAS,EAAE,MAAM,cAAc,CAAA;AAE/D,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AAU5C,UAAU,WAAW;IACnB,MAAM,EAAE,cAAc,CAAA;IACtB,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB;AAED,wBAAgB,MAAM,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,WAAW,qBAgBpD"}
+{"version":3,"file":"person.d.ts","sourceRoot":"","sources":["../../../src/components/display/person.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAoB,KAAK,SAAS,EAAE,MAAM,cAAc,CAAA;AAE/D,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AAS5C,UAAU,WAAW;IACnB,MAAM,EAAE,cAAc,CAAA;IACtB,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB;AAED,wBAAgB,MAAM,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,WAAW,qBAgBpD"}

package/build/components/display/person.js

@@ -4,7 +4,6 @@ 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, style }) {
     const styles = useStyles();
     return (<View style={[styles.wrapper, style]}>
@@ -27,10 +26,10 @@ const useStyles = () => {
         wrapper: {
             flexDirection: 'row',
             alignItems: 'center',
-            gap: space(1),
+            gap: 8,
         },
         content: {
-            gap: space(0.25),
+            gap: 2,
             flexShrink: 1,
         },
         name: {
@@ -38,7 +37,7 @@ const useStyles = () => {
         },
         badges: {
             flexDirection: 'row',
-            gap: space(0.5),
+            gap: 4,
         },
     });
 };

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

@@ -1 +1 @@
-{"version":3,"file":"person.js","sourceRoot":"","sources":["../../../src/components/display/person.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,UAAU,EAAE,IAAI,EAAkB,MAAM,cAAc,CAAA;AAC/D,OAAO,EAAE,wBAAwB,EAAE,MAAM,oBAAoB,CAAA;AAE7D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AAWnC,MAAM,UAAU,MAAM,CAAC,EAAE,MAAM,EAAE,KAAK,EAAe;IACnD,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAE1B,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CACnC;MAAA,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,EACjC;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAC1B;QAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CACzC;UAAA,CAAC,MAAM,CAAC,IAAI,CACd;QAAA,EAAE,IAAI,CACN;QAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CACzB;UAAA,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,EAAG,CAAC,CAClF;QAAA,EAAE,IAAI,CACR;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC;AAED,oCAAoC;AACpC,oCAAoC;AACpC,oCAAoC;AAEpC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,OAAO,EAAE;YACP,aAAa,EAAE,KAAK;YACpB,UAAU,EAAE,QAAQ;YACpB,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC;SACd;QACD,OAAO,EAAE;YACP,GAAG,EAAE,KAAK,CAAC,IAAI,CAAC;YAChB,UAAU,EAAE,CAAC;SACd;QACD,IAAI,EAAE;YACJ,UAAU,EAAE,wBAAwB;SACrC;QACD,MAAM,EAAE;YACN,aAAa,EAAE,KAAK;YACpB,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC;SAChB;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import React from 'react'\nimport { StyleSheet, View, type ViewStyle } from 'react-native'\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  style?: ViewStyle\n}\n\nexport function Person({ person, style }: PersonProps) {\n  const styles = useStyles()\n\n  return (\n    <View style={[styles.wrapper, style]}>\n      <Avatar sourceUri={person.avatar} />\n      <View style={styles.content}>\n        <Text style={styles.name} numberOfLines={2}>\n          {person.name}\n        </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}\n\n// =================================\n// ====== Styles ===================\n// =================================\n\nconst useStyles = () => {\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      flexShrink: 1,\n    },\n    name: {\n      fontWeight: platformFontWeightMedium,\n    },\n    badges: {\n      flexDirection: 'row',\n      gap: space(0.5),\n    },\n  })\n}\n"]}
+{"version":3,"file":"person.js","sourceRoot":"","sources":["../../../src/components/display/person.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,UAAU,EAAE,IAAI,EAAkB,MAAM,cAAc,CAAA;AAC/D,OAAO,EAAE,wBAAwB,EAAE,MAAM,oBAAoB,CAAA;AAE7D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAW/B,MAAM,UAAU,MAAM,CAAC,EAAE,MAAM,EAAE,KAAK,EAAe;IACnD,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAE1B,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CACnC;MAAA,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,EACjC;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAC1B;QAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CACzC;UAAA,CAAC,MAAM,CAAC,IAAI,CACd;QAAA,EAAE,IAAI,CACN;QAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CACzB;UAAA,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,EAAG,CAAC,CAClF;QAAA,EAAE,IAAI,CACR;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC;AAED,oCAAoC;AACpC,oCAAoC;AACpC,oCAAoC;AAEpC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,OAAO,EAAE;YACP,aAAa,EAAE,KAAK;YACpB,UAAU,EAAE,QAAQ;YACpB,GAAG,EAAE,CAAC;SACP;QACD,OAAO,EAAE;YACP,GAAG,EAAE,CAAC;YACN,UAAU,EAAE,CAAC;SACd;QACD,IAAI,EAAE;YACJ,UAAU,EAAE,wBAAwB;SACrC;QACD,MAAM,EAAE;YACN,aAAa,EAAE,KAAK;YACpB,GAAG,EAAE,CAAC;SACP;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import React from 'react'\nimport { StyleSheet, View, type ViewStyle } from 'react-native'\nimport { platformFontWeightMedium } from '../../utils/styles'\nimport { MemberResource } from '../../types'\nimport { Avatar } from './avatar'\nimport { Text } from './text'\nimport { Badge } from './badge'\n\n// =================================\n// ====== Components ===============\n// =================================\n\ninterface PersonProps {\n  person: MemberResource\n  style?: ViewStyle\n}\n\nexport function Person({ person, style }: PersonProps) {\n  const styles = useStyles()\n\n  return (\n    <View style={[styles.wrapper, style]}>\n      <Avatar sourceUri={person.avatar} />\n      <View style={styles.content}>\n        <Text style={styles.name} numberOfLines={2}>\n          {person.name}\n        </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}\n\n// =================================\n// ====== Styles ===================\n// =================================\n\nconst useStyles = () => {\n  return StyleSheet.create({\n    wrapper: {\n      flexDirection: 'row',\n      alignItems: 'center',\n      gap: 8,\n    },\n    content: {\n      gap: 2,\n      flexShrink: 1,\n    },\n    name: {\n      fontWeight: platformFontWeightMedium,\n    },\n    badges: {\n      flexDirection: 'row',\n      gap: 4,\n    },\n  })\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../../src/components/display/spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAChD,OAAO,EAAoB,SAAS,EAAoB,SAAS,EAAE,MAAM,cAAc,CAAA;AAavF,UAAU,YAAY;IACpB;;SAEK;IACL,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CAC7B;AAED,wBAAgB,OAAO,CAAC,EACtB,IAAS,EACT,qBAA+C,EAC/C,KAAK,GACN,EAAE,YAAY,qBAoCd"}
+{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../../src/components/display/spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAA;AACxC,OAAO,EAAE,SAAS,EAAoB,SAAS,EAAE,MAAM,cAAc,CAAA;AAoBrE,UAAU,YAAY;IACpB;;SAEK;IACL,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CAC7B;AAED,wBAAgB,OAAO,CAAC,EACtB,IAAS,EACT,qBAA+C,EAC/C,KAAK,GACN,EAAE,YAAY,qBAkCd"}