@planningcenter/chat-react-native 1.6.1-qa-27.0 → 1.6.1-rc.0

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { PressableProps, ViewStyle } from 'react-native';
-import type { AppearanceUnion } from './button_color_utils';
+import type { ButtonAppearanceUnion } from './button_color_utils';
 declare const SIZES: {
     readonly sm: "sm";
     readonly md: "md";
@@ -24,7 +24,7 @@ interface ButtonProps extends PressableProps {
     /**
      * Updates the button's colors
      */
-    appearance?: AppearanceUnion;
+    appearance?: ButtonAppearanceUnion;
     /**
      * Styles the inner View that wraps the button's content
      */

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;AAQ7D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAM3D,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,UAAU,WAAY,SAAQ,cAAc;IAC1C;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B;;OAEG;IACH,UAAU,CAAC,EAAE,eAAe,CAAA;IAC5B;;OAEG;IACH,iBAAiB,CAAC,EAAE,SAAS,CAAA;IAC7B;;OAEG;IACH,iBAAiB,CAAC,EAAE,SAAS,CAAA;IAC7B;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;;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,UAAsB,EACtB,iBAAiB,EACjB,iBAAiB,EACjB,QAAgB,EAChB,YAAY,EACZ,aAAa,EACb,OAAO,EACP,qBAAqB,EACrB,gBAAgB,EAChB,IAAW,EACX,KAAK,EACL,OAAgB,EAChB,GAAG,KAAK,EACT,EAAE,WAAW,qBA4Db"}
+{"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;AAQ7D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAA;AAMjE,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,UAAU,WAAY,SAAQ,cAAc;IAC1C;;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,iBAAiB,CAAC,EAAE,SAAS,CAAA;IAC7B;;OAEG;IACH,iBAAiB,CAAC,EAAE,SAAS,CAAA;IAC7B;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;;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,iBAAiB,EACjB,iBAAiB,EACjB,QAAgB,EAChB,YAAY,EACZ,aAAa,EACb,OAAO,EACP,qBAAqB,EACrB,gBAAgB,EAChB,IAAW,EACX,KAAK,EACL,OAAgB,EAChB,GAAG,KAAK,EACT,EAAE,WAAW,qBA4Db"}

package/build/components/display/button.js

@@ -6,7 +6,7 @@ import { useTheme, useFontScale, useCreateAndroidRippleColor } from '../../hooks
 import { tokens } from '../../vendor/tapestry/tokens';
 import { platformFontWeightBold, platformPressedOpacityStyle } from '../../utils';
 import { Spinner } from './spinner';
-import { getColorKey, useColorOptionMap, useGradientColorMap } from './button_color_utils';
+import { getColorKey, useButtonColorOptionMap, useGradientColorMap } from './button_color_utils';
 // =================================
 // ====== Constants ================
 // =================================
@@ -19,7 +19,7 @@ const VARIANTS = {
     fill: 'fill',
     outline: 'outline',
 };
-export function Button({ adjustsFontSizeToFit = false, allowFontScaling = true, appearance = 'primary', buttonInnerStyles, buttonOuterStyles, disabled = false, iconNameLeft, iconNameRight, loading, maxFontSizeMultiplier, minimumFontScale, size = 'md', title, variant = 'fill', ...props }) {
+export function Button({ adjustsFontSizeToFit = false, allowFontScaling = true, appearance = 'interaction', buttonInnerStyles, buttonOuterStyles, disabled = false, iconNameLeft, iconNameRight, loading, maxFontSizeMultiplier, minimumFontScale, size = 'md', title, variant = 'fill', ...props }) {
     const styles = useStyles({ appearance, disabled, loading, maxFontSizeMultiplier, size, variant });
     const gradientOptionsMap = useGradientColorMap();
     const colorKey = getColorKey({ disabled, loading, appearance });
@@ -42,10 +42,10 @@ export function Button({ adjustsFontSizeToFit = false, allowFontScaling = true,
 // =================================
 // ====== Styles ===================
 // =================================
-const useStyles = ({ appearance = 'primary', disabled = false, loading = false, maxFontSizeMultiplier, size = 'md', variant = 'fill', }) => {
+const useStyles = ({ appearance = 'interaction', disabled = false, loading = false, maxFontSizeMultiplier, size = 'md', variant = 'fill', }) => {
     const { colors } = useTheme();
     const fontScale = useFontScale({ maxFontSizeMultiplier });
-    const colorOptionMap = useColorOptionMap();
+    const colorOptionMap = useButtonColorOptionMap();
     const outlineOffsetSm = 2;
     const outlineOffset = 4;
     const sizeStyleMap = {

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 } 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, useColorOptionMap, useGradientColorMap } from './button_color_utils'\nimport type { AppearanceUnion } from './button_color_utils'\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\ninterface 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?: AppearanceUnion\n  /**\n   * Styles the inner View that wraps the button's content\n   */\n  buttonInnerStyles?: ViewStyle\n  /**\n   * Styles the outer LinearGradient that gives the button it's backgrounnd and outline color\n   */\n  buttonOuterStyles?: ViewStyle\n  /**\n   * Generates an icon to the left of the button text\n   */\n  iconNameLeft?: string\n  /**\n   * Generates an icon to the right of the button text\n   */\n  iconNameRight?: string\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 = 'primary',\n  buttonInnerStyles,\n  buttonOuterStyles,\n  disabled = false,\n  iconNameLeft,\n  iconNameRight,\n  loading,\n  maxFontSizeMultiplier,\n  minimumFontScale,\n  size = 'md',\n  title,\n  variant = 'fill',\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 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 }) => [styles.pressable, pressed && platformPressedOpacityStyle]}\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, buttonOuterStyles]}\n      >\n        {loading && (\n          <Spinner\n            size={styles.spinner.fontSize}\n            maxFontSizeMultiplier={maxFontSizeMultiplier || 0}\n          />\n        )}\n        <View style={[styles.innerWrapper, buttonInnerStyles]}>\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 = 'primary',\n  disabled = false,\n  loading = false,\n  maxFontSizeMultiplier,\n  size = 'md',\n  variant = 'fill',\n}: Partial<ButtonProps>) => {\n  const { colors } = useTheme()\n  const fontScale = useFontScale({ maxFontSizeMultiplier })\n  const colorOptionMap = useColorOptionMap()\n\n  const outlineOffsetSm = 2\n  const outlineOffset = 4\n\n  const sizeStyleMap: SizeStyle = {\n    [SIZES.sm]: {\n      fontSize: 12,\n      paddingHorizontal: 12 * fontScale,\n      height: 24 * fontScale - outlineOffsetSm,\n      borderRadius: 24 * fontScale,\n      gap: 4 * fontScale,\n    },\n    [SIZES.md]: {\n      fontSize: 14,\n      paddingHorizontal: 16 * fontScale,\n      height: 32 * fontScale - outlineOffset,\n      borderRadius: 32 * fontScale,\n      gap: 6 * fontScale,\n    },\n    [SIZES.lg]: {\n      fontSize: 16,\n      paddingHorizontal: 24 * fontScale,\n      height: 40 * fontScale - outlineOffset,\n      borderRadius: 40 * fontScale,\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: size === 'sm' ? 1 : 2,\n      gap: sizeStyleMap[size].gap,\n      borderRadius: sizeStyleMap[size].borderRadius,\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 } 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 './button_color_utils'\nimport type { ButtonAppearanceUnion } from './button_color_utils'\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\ninterface 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 inner View that wraps the button's content\n   */\n  buttonInnerStyles?: ViewStyle\n  /**\n   * Styles the outer LinearGradient that gives the button it's backgrounnd and outline color\n   */\n  buttonOuterStyles?: ViewStyle\n  /**\n   * Generates an icon to the left of the button text\n   */\n  iconNameLeft?: string\n  /**\n   * Generates an icon to the right of the button text\n   */\n  iconNameRight?: string\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  buttonInnerStyles,\n  buttonOuterStyles,\n  disabled = false,\n  iconNameLeft,\n  iconNameRight,\n  loading,\n  maxFontSizeMultiplier,\n  minimumFontScale,\n  size = 'md',\n  title,\n  variant = 'fill',\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 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 }) => [styles.pressable, pressed && platformPressedOpacityStyle]}\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, buttonOuterStyles]}\n      >\n        {loading && (\n          <Spinner\n            size={styles.spinner.fontSize}\n            maxFontSizeMultiplier={maxFontSizeMultiplier || 0}\n          />\n        )}\n        <View style={[styles.innerWrapper, buttonInnerStyles]}>\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 } = useTheme()\n  const fontScale = useFontScale({ maxFontSizeMultiplier })\n  const colorOptionMap = useButtonColorOptionMap()\n\n  const outlineOffsetSm = 2\n  const outlineOffset = 4\n\n  const sizeStyleMap: SizeStyle = {\n    [SIZES.sm]: {\n      fontSize: 12,\n      paddingHorizontal: 12 * fontScale,\n      height: 24 * fontScale - outlineOffsetSm,\n      borderRadius: 24 * fontScale,\n      gap: 4 * fontScale,\n    },\n    [SIZES.md]: {\n      fontSize: 14,\n      paddingHorizontal: 16 * fontScale,\n      height: 32 * fontScale - outlineOffset,\n      borderRadius: 32 * fontScale,\n      gap: 6 * fontScale,\n    },\n    [SIZES.lg]: {\n      fontSize: 16,\n      paddingHorizontal: 24 * fontScale,\n      height: 40 * fontScale - outlineOffset,\n      borderRadius: 40 * fontScale,\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: size === 'sm' ? 1 : 2,\n      gap: sizeStyleMap[size].gap,\n      borderRadius: sizeStyleMap[size].borderRadius,\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"]}

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

@@ -1,24 +1,39 @@
-export { getColorKey, useColorOptionMap, useGradientColorMap };
-export type { AppearanceUnion };
-declare const APPEARANCES: {
-    readonly primary: "primary";
+export { getColorKey, useButtonColorOptionMap, useGradientColorMap, useIconButtonColorOptionMap };
+export type { ButtonAppearanceUnion, IconButtonAppearanceUnion };
+declare const BUTTON_APPEARANCES: {
     readonly danger: "danger";
+    readonly interaction: "interaction";
 };
-type AppearanceUnion = (typeof APPEARANCES)[keyof typeof APPEARANCES];
-declare const COLOR_OPTIONS: {
+type ButtonAppearanceUnion = (typeof BUTTON_APPEARANCES)[keyof typeof BUTTON_APPEARANCES];
+declare const ICON_BUTTON_APPEARANCES: {
+    readonly neutral: "neutral";
+    readonly danger: "danger";
+    readonly interaction: "interaction";
+};
+type IconButtonAppearanceUnion = (typeof ICON_BUTTON_APPEARANCES)[keyof typeof ICON_BUTTON_APPEARANCES];
+declare const BUTTON_COLOR_OPTIONS: {
     readonly disabled: "disabled";
-    readonly primary: "primary";
     readonly danger: "danger";
+    readonly interaction: "interaction";
+};
+type ButtonColorOptionUnion = (typeof BUTTON_COLOR_OPTIONS)[keyof typeof BUTTON_COLOR_OPTIONS];
+declare const ICON_BUTTON_COLOR_OPTIONS: {
+    readonly neutral: "neutral";
+    readonly danger: "danger";
+    readonly interaction: "interaction";
+    readonly disabled: "disabled";
 };
-type ColorOptionUnion = (typeof COLOR_OPTIONS)[keyof typeof COLOR_OPTIONS];
-type ColorOptionMap = Record<ColorOptionUnion, string>;
-declare function useColorOptionMap(): ColorOptionMap;
-type GradientColorMap = Record<ColorOptionUnion, [string, string]>;
+type IconButtonColorOptionUnion = (typeof ICON_BUTTON_COLOR_OPTIONS)[keyof typeof ICON_BUTTON_COLOR_OPTIONS];
+type ButtonColorOptionMap = Record<ButtonColorOptionUnion, string>;
+declare function useButtonColorOptionMap(): ButtonColorOptionMap;
+type IconButtonColorOptionMap = Record<IconButtonColorOptionUnion, string>;
+declare function useIconButtonColorOptionMap(): IconButtonColorOptionMap;
+type GradientColorMap = Record<ButtonColorOptionUnion, [string, string]>;
 declare function useGradientColorMap(): GradientColorMap;
 interface GetColorKeyArgs {
     disabled: boolean | null;
     loading?: boolean;
-    appearance: AppearanceUnion;
+    appearance: ButtonAppearanceUnion | IconButtonAppearanceUnion;
 }
-declare function getColorKey({ disabled, loading, appearance }: GetColorKeyArgs): AppearanceUnion | "disabled";
+declare function getColorKey({ disabled, loading, appearance }: GetColorKeyArgs): "danger" | "interaction" | "neutral" | "disabled";
 //# sourceMappingURL=button_color_utils.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"button_color_utils.d.ts","sourceRoot":"","sources":["../../../src/components/display/button_color_utils.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,CAAA;AAC9D,YAAY,EAAE,eAAe,EAAE,CAAA;AAM/B,QAAA,MAAM,WAAW;;;CAGP,CAAA;AAEV,KAAK,eAAe,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,OAAO,WAAW,CAAC,CAAA;AAErE,QAAA,MAAM,aAAa;;;;CAGT,CAAA;AAEV,KAAK,gBAAgB,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,OAAO,aAAa,CAAC,CAAA;AAM1E,KAAK,cAAc,GAAG,MAAM,CAAC,gBAAgB,EAAE,MAAM,CAAC,CAAA;AACtD,iBAAS,iBAAiB,IAAI,cAAc,CAQ3C;AAED,KAAK,gBAAgB,GAAG,MAAM,CAAC,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAA;AAClE,iBAAS,mBAAmB,IAAI,gBAAgB,CAc/C;AAMD,UAAU,eAAe;IACvB,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAA;IACxB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,UAAU,EAAE,eAAe,CAAA;CAC5B;AACD,iBAAS,WAAW,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,UAAU,EAAE,EAAE,eAAe,gCAGtE"}
+{"version":3,"file":"button_color_utils.d.ts","sourceRoot":"","sources":["../../../src/components/display/button_color_utils.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,WAAW,EAAE,uBAAuB,EAAE,mBAAmB,EAAE,2BAA2B,EAAE,CAAA;AACjG,YAAY,EAAE,qBAAqB,EAAE,yBAAyB,EAAE,CAAA;AAMhE,QAAA,MAAM,kBAAkB;;;CAGd,CAAA;AAEV,KAAK,qBAAqB,GAAG,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,OAAO,kBAAkB,CAAC,CAAA;AAEzF,QAAA,MAAM,uBAAuB;;;;CAGnB,CAAA;AAEV,KAAK,yBAAyB,GAC5B,CAAC,OAAO,uBAAuB,CAAC,CAAC,MAAM,OAAO,uBAAuB,CAAC,CAAA;AAExE,QAAA,MAAM,oBAAoB;;;;CAGhB,CAAA;AAEV,KAAK,sBAAsB,GAAG,CAAC,OAAO,oBAAoB,CAAC,CAAC,MAAM,OAAO,oBAAoB,CAAC,CAAA;AAE9F,QAAA,MAAM,yBAAyB;;;;;CAGrB,CAAA;AAEV,KAAK,0BAA0B,GAC7B,CAAC,OAAO,yBAAyB,CAAC,CAAC,MAAM,OAAO,yBAAyB,CAAC,CAAA;AAM5E,KAAK,oBAAoB,GAAG,MAAM,CAAC,sBAAsB,EAAE,MAAM,CAAC,CAAA;AAClE,iBAAS,uBAAuB,IAAI,oBAAoB,CAQvD;AAED,KAAK,wBAAwB,GAAG,MAAM,CAAC,0BAA0B,EAAE,MAAM,CAAC,CAAA;AAC1E,iBAAS,2BAA2B,IAAI,wBAAwB,CAS/D;AAED,KAAK,gBAAgB,GAAG,MAAM,CAAC,sBAAsB,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAA;AACxE,iBAAS,mBAAmB,IAAI,gBAAgB,CAc/C;AAMD,UAAU,eAAe;IACvB,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAA;IACxB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,UAAU,EAAE,qBAAqB,GAAG,yBAAyB,CAAA;CAC9D;AACD,iBAAS,WAAW,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,UAAU,EAAE,EAAE,eAAe,qDAGtE"}

package/build/components/display/button_color_utils.js

@@ -2,24 +2,41 @@ import { useTheme } from '../../hooks';
 // =================================
 // ====== Exports ==================
 // =================================
-export { getColorKey, useColorOptionMap, useGradientColorMap };
+export { getColorKey, useButtonColorOptionMap, useGradientColorMap, useIconButtonColorOptionMap };
 // =================================
 // ====== Constants ================
 // =================================
-const APPEARANCES = {
-    primary: 'primary',
+const BUTTON_APPEARANCES = {
     danger: 'danger',
+    interaction: 'interaction',
 };
-const COLOR_OPTIONS = {
-    ...APPEARANCES,
+const ICON_BUTTON_APPEARANCES = {
+    ...BUTTON_APPEARANCES,
+    neutral: 'neutral',
+};
+const BUTTON_COLOR_OPTIONS = {
+    ...BUTTON_APPEARANCES,
     disabled: 'disabled',
 };
-function useColorOptionMap() {
+const ICON_BUTTON_COLOR_OPTIONS = {
+    ...BUTTON_COLOR_OPTIONS,
+    ...ICON_BUTTON_APPEARANCES,
+};
+function useButtonColorOptionMap() {
+    const { colors } = useTheme();
+    return {
+        interaction: colors.interaction,
+        danger: colors.fillColorStatusErrorMedium,
+        disabled: colors.textColorDefaultDisabled,
+    };
+}
+function useIconButtonColorOptionMap() {
     const { colors } = useTheme();
     return {
-        primary: colors.interaction,
         danger: colors.fillColorStatusErrorMedium,
         disabled: colors.textColorDefaultDisabled,
+        interaction: colors.interaction,
+        neutral: colors.iconColorDefaultSecondary,
     };
 }
 function useGradientColorMap() {
@@ -27,7 +44,7 @@ function useGradientColorMap() {
     const defaultColorStart = colors.buttonStart || colors.interaction;
     const defaultColorEnd = colors.buttonEnd || colors.interaction;
     return {
-        primary: [defaultColorStart, defaultColorEnd],
+        interaction: [defaultColorStart, defaultColorEnd],
         danger: [colors.fillColorStatusErrorMedium, colors.fillColorStatusErrorMedium],
         disabled: [
             colors.fillColorButtonNeutralSolidDisabled,

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

@@ -1 +1 @@
-{"version":3,"file":"button_color_utils.js","sourceRoot":"","sources":["../../../src/components/display/button_color_utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAEtC,oCAAoC;AACpC,oCAAoC;AACpC,oCAAoC;AAEpC,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,CAAA;AAG9D,oCAAoC;AACpC,oCAAoC;AACpC,oCAAoC;AAEpC,MAAM,WAAW,GAAG;IAClB,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,QAAQ;CACR,CAAA;AAIV,MAAM,aAAa,GAAG;IACpB,GAAG,WAAW;IACd,QAAQ,EAAE,UAAU;CACZ,CAAA;AASV,SAAS,iBAAiB;IACxB,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAE7B,OAAO;QACL,OAAO,EAAE,MAAM,CAAC,WAAW;QAC3B,MAAM,EAAE,MAAM,CAAC,0BAA0B;QACzC,QAAQ,EAAE,MAAM,CAAC,wBAAwB;KAC1C,CAAA;AACH,CAAC;AAGD,SAAS,mBAAmB;IAC1B,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAE7B,MAAM,iBAAiB,GAAG,MAAM,CAAC,WAAW,IAAI,MAAM,CAAC,WAAW,CAAA;IAClE,MAAM,eAAe,GAAG,MAAM,CAAC,SAAS,IAAI,MAAM,CAAC,WAAW,CAAA;IAE9D,OAAO;QACL,OAAO,EAAE,CAAC,iBAAiB,EAAE,eAAe,CAAC;QAC7C,MAAM,EAAE,CAAC,MAAM,CAAC,0BAA0B,EAAE,MAAM,CAAC,0BAA0B,CAAC;QAC9E,QAAQ,EAAE;YACR,MAAM,CAAC,mCAAmC;YAC1C,MAAM,CAAC,mCAAmC;SAC3C;KACF,CAAA;AACH,CAAC;AAWD,SAAS,WAAW,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,UAAU,EAAmB;IACrE,IAAI,QAAQ,IAAI,OAAO;QAAE,OAAO,UAAU,CAAA;IAC1C,OAAO,UAAU,CAAA;AACnB,CAAC","sourcesContent":["import { useTheme } from '../../hooks'\n\n// =================================\n// ====== Exports ==================\n// =================================\n\nexport { getColorKey, useColorOptionMap, useGradientColorMap }\nexport type { AppearanceUnion }\n\n// =================================\n// ====== Constants ================\n// =================================\n\nconst APPEARANCES = {\n  primary: 'primary',\n  danger: 'danger',\n} as const\n\ntype AppearanceUnion = (typeof APPEARANCES)[keyof typeof APPEARANCES]\n\nconst COLOR_OPTIONS = {\n  ...APPEARANCES,\n  disabled: 'disabled',\n} as const\n\ntype ColorOptionUnion = (typeof COLOR_OPTIONS)[keyof typeof COLOR_OPTIONS]\n\n// =================================\n// ====== Hooks ====================\n// =================================\n\ntype ColorOptionMap = Record<ColorOptionUnion, string>\nfunction useColorOptionMap(): ColorOptionMap {\n  const { colors } = useTheme()\n\n  return {\n    primary: colors.interaction,\n    danger: colors.fillColorStatusErrorMedium,\n    disabled: colors.textColorDefaultDisabled,\n  }\n}\n\ntype GradientColorMap = Record<ColorOptionUnion, [string, string]>\nfunction useGradientColorMap(): GradientColorMap {\n  const { colors } = useTheme()\n\n  const defaultColorStart = colors.buttonStart || colors.interaction\n  const defaultColorEnd = colors.buttonEnd || colors.interaction\n\n  return {\n    primary: [defaultColorStart, defaultColorEnd],\n    danger: [colors.fillColorStatusErrorMedium, colors.fillColorStatusErrorMedium],\n    disabled: [\n      colors.fillColorButtonNeutralSolidDisabled,\n      colors.fillColorButtonNeutralSolidDisabled,\n    ],\n  }\n}\n\n// =================================\n// ====== Functions ================\n// =================================\n\ninterface GetColorKeyArgs {\n  disabled: boolean | null\n  loading?: boolean\n  appearance: AppearanceUnion\n}\nfunction getColorKey({ disabled, loading, appearance }: GetColorKeyArgs) {\n  if (disabled || loading) return 'disabled'\n  return appearance\n}\n"]}
+{"version":3,"file":"button_color_utils.js","sourceRoot":"","sources":["../../../src/components/display/button_color_utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAEtC,oCAAoC;AACpC,oCAAoC;AACpC,oCAAoC;AAEpC,OAAO,EAAE,WAAW,EAAE,uBAAuB,EAAE,mBAAmB,EAAE,2BAA2B,EAAE,CAAA;AAGjG,oCAAoC;AACpC,oCAAoC;AACpC,oCAAoC;AAEpC,MAAM,kBAAkB,GAAG;IACzB,MAAM,EAAE,QAAQ;IAChB,WAAW,EAAE,aAAa;CAClB,CAAA;AAIV,MAAM,uBAAuB,GAAG;IAC9B,GAAG,kBAAkB;IACrB,OAAO,EAAE,SAAS;CACV,CAAA;AAKV,MAAM,oBAAoB,GAAG;IAC3B,GAAG,kBAAkB;IACrB,QAAQ,EAAE,UAAU;CACZ,CAAA;AAIV,MAAM,yBAAyB,GAAG;IAChC,GAAG,oBAAoB;IACvB,GAAG,uBAAuB;CAClB,CAAA;AAUV,SAAS,uBAAuB;IAC9B,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAE7B,OAAO;QACL,WAAW,EAAE,MAAM,CAAC,WAAW;QAC/B,MAAM,EAAE,MAAM,CAAC,0BAA0B;QACzC,QAAQ,EAAE,MAAM,CAAC,wBAAwB;KAC1C,CAAA;AACH,CAAC;AAGD,SAAS,2BAA2B;IAClC,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAE7B,OAAO;QACL,MAAM,EAAE,MAAM,CAAC,0BAA0B;QACzC,QAAQ,EAAE,MAAM,CAAC,wBAAwB;QACzC,WAAW,EAAE,MAAM,CAAC,WAAW;QAC/B,OAAO,EAAE,MAAM,CAAC,yBAAyB;KAC1C,CAAA;AACH,CAAC;AAGD,SAAS,mBAAmB;IAC1B,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAE7B,MAAM,iBAAiB,GAAG,MAAM,CAAC,WAAW,IAAI,MAAM,CAAC,WAAW,CAAA;IAClE,MAAM,eAAe,GAAG,MAAM,CAAC,SAAS,IAAI,MAAM,CAAC,WAAW,CAAA;IAE9D,OAAO;QACL,WAAW,EAAE,CAAC,iBAAiB,EAAE,eAAe,CAAC;QACjD,MAAM,EAAE,CAAC,MAAM,CAAC,0BAA0B,EAAE,MAAM,CAAC,0BAA0B,CAAC;QAC9E,QAAQ,EAAE;YACR,MAAM,CAAC,mCAAmC;YAC1C,MAAM,CAAC,mCAAmC;SAC3C;KACF,CAAA;AACH,CAAC;AAWD,SAAS,WAAW,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,UAAU,EAAmB;IACrE,IAAI,QAAQ,IAAI,OAAO;QAAE,OAAO,UAAU,CAAA;IAC1C,OAAO,UAAU,CAAA;AACnB,CAAC","sourcesContent":["import { useTheme } from '../../hooks'\n\n// =================================\n// ====== Exports ==================\n// =================================\n\nexport { getColorKey, useButtonColorOptionMap, useGradientColorMap, useIconButtonColorOptionMap }\nexport type { ButtonAppearanceUnion, IconButtonAppearanceUnion }\n\n// =================================\n// ====== Constants ================\n// =================================\n\nconst BUTTON_APPEARANCES = {\n  danger: 'danger',\n  interaction: 'interaction',\n} as const\n\ntype ButtonAppearanceUnion = (typeof BUTTON_APPEARANCES)[keyof typeof BUTTON_APPEARANCES]\n\nconst ICON_BUTTON_APPEARANCES = {\n  ...BUTTON_APPEARANCES,\n  neutral: 'neutral',\n} as const\n\ntype IconButtonAppearanceUnion =\n  (typeof ICON_BUTTON_APPEARANCES)[keyof typeof ICON_BUTTON_APPEARANCES]\n\nconst BUTTON_COLOR_OPTIONS = {\n  ...BUTTON_APPEARANCES,\n  disabled: 'disabled',\n} as const\n\ntype ButtonColorOptionUnion = (typeof BUTTON_COLOR_OPTIONS)[keyof typeof BUTTON_COLOR_OPTIONS]\n\nconst ICON_BUTTON_COLOR_OPTIONS = {\n  ...BUTTON_COLOR_OPTIONS,\n  ...ICON_BUTTON_APPEARANCES,\n} as const\n\ntype IconButtonColorOptionUnion =\n  (typeof ICON_BUTTON_COLOR_OPTIONS)[keyof typeof ICON_BUTTON_COLOR_OPTIONS]\n\n// =================================\n// ====== Hooks ====================\n// =================================\n\ntype ButtonColorOptionMap = Record<ButtonColorOptionUnion, string>\nfunction useButtonColorOptionMap(): ButtonColorOptionMap {\n  const { colors } = useTheme()\n\n  return {\n    interaction: colors.interaction,\n    danger: colors.fillColorStatusErrorMedium,\n    disabled: colors.textColorDefaultDisabled,\n  }\n}\n\ntype IconButtonColorOptionMap = Record<IconButtonColorOptionUnion, string>\nfunction useIconButtonColorOptionMap(): IconButtonColorOptionMap {\n  const { colors } = useTheme()\n\n  return {\n    danger: colors.fillColorStatusErrorMedium,\n    disabled: colors.textColorDefaultDisabled,\n    interaction: colors.interaction,\n    neutral: colors.iconColorDefaultSecondary,\n  }\n}\n\ntype GradientColorMap = Record<ButtonColorOptionUnion, [string, string]>\nfunction useGradientColorMap(): GradientColorMap {\n  const { colors } = useTheme()\n\n  const defaultColorStart = colors.buttonStart || colors.interaction\n  const defaultColorEnd = colors.buttonEnd || colors.interaction\n\n  return {\n    interaction: [defaultColorStart, defaultColorEnd],\n    danger: [colors.fillColorStatusErrorMedium, colors.fillColorStatusErrorMedium],\n    disabled: [\n      colors.fillColorButtonNeutralSolidDisabled,\n      colors.fillColorButtonNeutralSolidDisabled,\n    ],\n  }\n}\n\n// =================================\n// ====== Functions ================\n// =================================\n\ninterface GetColorKeyArgs {\n  disabled: boolean | null\n  loading?: boolean\n  appearance: ButtonAppearanceUnion | IconButtonAppearanceUnion\n}\nfunction getColorKey({ disabled, loading, appearance }: GetColorKeyArgs) {\n  if (disabled || loading) return 'disabled'\n  return appearance\n}\n"]}

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

@@ -5,7 +5,7 @@ type IconStyle = ViewStyle & {
     fontSize?: number;
     color?: string;
 };
-interface IconProps extends Omit<XmlProps, 'xml' | 'fontSize'> {
+export interface IconProps extends Omit<XmlProps, 'xml' | 'fontSize'> {
     /**
      * Made up of the set.iconName.
      * Example: "general.textMessage"

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

@@ -1 +1 @@
-{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../src/components/display/icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAExD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AA0BhD,KAAK,SAAS,GAAG,SAAS,GAAG;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAMD,UAAU,SAAU,SAAQ,IAAI,CAAC,QAAQ,EAAE,KAAK,GAAG,UAAU,CAAC;IAC5D;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;;OAGG;IACH,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,IAAI,CAAC,EACnB,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,2BAA2B,EAC3B,kBAAkB,EAClB,qBAAqB,EACrB,GAAG,KAAK,EACT,EAAE,SAAS,qBA0BX"}
+{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../src/components/display/icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAExD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AA0BhD,KAAK,SAAS,GAAG,SAAS,GAAG;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAMD,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,QAAQ,EAAE,KAAK,GAAG,UAAU,CAAC;IACnE;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;;OAGG;IACH,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,IAAI,CAAC,EACnB,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,2BAA2B,EAC3B,kBAAkB,EAClB,qBAAqB,EACrB,GAAG,KAAK,EACT,EAAE,SAAS,qBA0BX"}

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

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

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

@@ -0,0 +1,52 @@
+import React from 'react';
+import type { PressableProps, ViewStyle } from 'react-native';
+import type { IconProps } from './icon';
+import type { IconButtonAppearanceUnion } from './button_color_utils';
+declare const SIZES: {
+    readonly md: "md";
+    readonly lg: "lg";
+    readonly xl: "xl";
+    readonly xxl: "xxl";
+    readonly xxxl: "xxxl";
+};
+type SizeUnion = (typeof SIZES)[keyof typeof SIZES];
+interface IconButtonProps extends PressableProps {
+    /**
+     * Provides context to screen readers about what the button does.
+     * This is required as Icons don't inherently provide non-visual context like text does.
+     */
+    accessibilityLabel: string;
+    /**
+     * Updates the icon's colors. Defaults to 'neutral'.
+     */
+    appearance?: IconButtonAppearanceUnion;
+    /**
+     * Styles the icon itself.
+     * `fontSize` allows for a custom size that also responds to the device's text scale.
+     * `color` changes the color of the icon.
+     */
+    iconStyle?: IconProps['style'];
+    /**
+     * Disables the button and replaces its content with a spinner
+     */
+    loading?: boolean;
+    /**
+     * Specifies the maximum size a font can reach when allowFontScaling is enabled.
+     */
+    maxFontSizeMultiplier?: number;
+    /**
+     * Generates an icon from `@planningcenter/icons`
+     */
+    name: string;
+    /**
+     * Changes the overall size of the button and its contents
+     */
+    size?: SizeUnion;
+    /**
+     * Styles the `Pressable` wrapper
+     */
+    style?: ViewStyle;
+}
+export declare function IconButton({ accessibilityLabel, appearance, disabled, iconStyle, loading, maxFontSizeMultiplier, name, size, style, ...props }: IconButtonProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=icon_button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"icon_button.d.ts","sourceRoot":"","sources":["../../../src/components/display/icon_button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAE7D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAKvC,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAA;AAMrE,QAAA,MAAM,KAAK;;;;;;CAMD,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,MAAM,CAAA;IACZ;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB;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,qBAuDjB"}

package/build/components/display/icon_button.js

@@ -0,0 +1,102 @@
+import React from 'react';
+import { Pressable, StyleSheet } from 'react-native';
+import { Icon } from './icon';
+import { useTheme, useFontScale, useCreateAndroidRippleColor } from '../../hooks';
+import { platformPressedOpacityStyle } from '../../utils';
+import { Spinner } from './spinner';
+import { getColorKey, useIconButtonColorOptionMap } from './button_color_utils';
+// =================================
+// ====== Constants ================
+// =================================
+const SIZES = {
+    md: 'md',
+    lg: 'lg',
+    xl: 'xl',
+    xxl: 'xxl',
+    xxxl: 'xxxl',
+};
+export function IconButton({ accessibilityLabel, appearance = 'neutral', disabled = false, iconStyle, loading, maxFontSizeMultiplier, name, size = 'md', style, ...props }) {
+    const styles = useStyles({ appearance, disabled, loading, maxFontSizeMultiplier, size });
+    const colorOptionMap = useIconButtonColorOptionMap();
+    const colorKey = getColorKey({ disabled, loading, appearance });
+    const { color = colorOptionMap[colorKey] } = StyleSheet.flatten(iconStyle || {});
+    const androidRippleColor = useCreateAndroidRippleColor({ color: color });
+    const androidRadiusSizeMap = {
+        [SIZES.md]: {
+            radius: 16,
+        },
+        [SIZES.lg]: {
+            radius: 18,
+        },
+        [SIZES.xl]: {
+            radius: 20,
+        },
+        [SIZES.xxl]: {
+            radius: 26,
+        },
+        [SIZES.xxxl]: {
+            radius: 32,
+        },
+    };
+    return (<Pressable style={({ pressed }) => [styles.pressable, style, pressed && platformPressedOpacityStyle]} accessibilityRole="button" disabled={disabled || loading} accessibilityState={{ busy: loading }} accessibilityLabel={accessibilityLabel} hitSlop={10} android_ripple={{
+            color: androidRippleColor,
+            borderless: true,
+            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}/>
+    </Pressable>);
+}
+// =================================
+// ====== Styles ===================
+// =================================
+const useStyles = ({ appearance = 'neutral', disabled = false, loading = false, maxFontSizeMultiplier, size = 'md', }) => {
+    const { colors } = useTheme();
+    const fontScale = useFontScale({ maxFontSizeMultiplier });
+    const colorOptionMap = useIconButtonColorOptionMap();
+    const colorKey = getColorKey({ disabled, loading, appearance });
+    const sizeStyleMap = {
+        [SIZES.md]: {
+            fontSize: 16,
+            height: 16 * fontScale,
+        },
+        [SIZES.lg]: {
+            fontSize: 20,
+            height: 20 * fontScale,
+        },
+        [SIZES.xl]: {
+            fontSize: 24,
+            height: 24 * fontScale,
+        },
+        [SIZES.xxl]: {
+            fontSize: 32,
+            height: 32 * fontScale,
+        },
+        [SIZES.xxxl]: {
+            fontSize: 40,
+            height: 40 * fontScale,
+        },
+    };
+    return StyleSheet.create({
+        pressable: {
+            alignItems: 'center',
+            justifyContent: 'center',
+            height: sizeStyleMap[size].height,
+        },
+        icon: {
+            fontSize: sizeStyleMap[size].fontSize,
+            color: colorOptionMap[colorKey],
+        },
+        disabled: {
+            color: colors.iconColorDefaultDisabled,
+        },
+        loading: {
+            opacity: 0,
+        },
+        spinner: {
+            fontSize: sizeStyleMap[size].fontSize,
+        },
+    });
+};
+//# sourceMappingURL=icon_button.js.map

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

@@ -0,0 +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 } from 'react-native'\nimport type { PressableProps, ViewStyle } from 'react-native'\nimport { Icon } from './icon'\nimport type { IconProps } from './icon'\nimport { useTheme, useFontScale, useCreateAndroidRippleColor } from '../../hooks'\nimport { platformPressedOpacityStyle } from '../../utils'\nimport { Spinner } from './spinner'\nimport { getColorKey, useIconButtonColorOptionMap } from './button_color_utils'\nimport type { IconButtonAppearanceUnion } from './button_color_utils'\n\n// =================================\n// ====== Constants ================\n// =================================\n\nconst SIZES = {\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: string\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?: 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.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.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"]}

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

@@ -3,6 +3,7 @@ export * from './avatar_group';
 export * from './button';
 export * from './heading';
 export * from './icon';
+export * from './icon_button';
 export * from './image';
 export * from './spinner';
 export * from './text';

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

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

package/build/components/display/index.js

@@ -3,6 +3,7 @@ export * from './avatar_group';
 export * from './button';
 export * from './heading';
 export * from './icon';
+export * from './icon_button';
 export * from './image';
 export * from './spinner';
 export * from './text';

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/display/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,QAAQ,CAAA;AACtB,cAAc,eAAe,CAAA;AAC7B,cAAc,sBAAsB,CAAA","sourcesContent":["export * from './avatar'\nexport * from './avatar_group'\nexport * from './button'\nexport * from './heading'\nexport * from './icon'\nexport * from './image'\nexport * from './spinner'\nexport * from './text'\nexport * from './text_button'\nexport * from './text_inline_button'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/display/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,QAAQ,CAAA;AACtB,cAAc,eAAe,CAAA;AAC7B,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,QAAQ,CAAA;AACtB,cAAc,eAAe,CAAA;AAC7B,cAAc,sBAAsB,CAAA","sourcesContent":["export * from './avatar'\nexport * from './avatar_group'\nexport * from './button'\nexport * from './heading'\nexport * from './icon'\nexport * from './icon_button'\nexport * from './image'\nexport * from './spinner'\nexport * from './text'\nexport * from './text_button'\nexport * from './text_inline_button'\n"]}

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { PressableProps } from 'react-native';
 import type { TextProps } from './text';
-import type { AppearanceUnion } from './button_color_utils';
+import type { ButtonAppearanceUnion } from './button_color_utils';
 interface TextButtonProps extends PressableProps {
     /**
      * Specifies whether fonts should be scaled down automatically to fit given style constraints.
@@ -14,7 +14,7 @@ interface TextButtonProps extends PressableProps {
     /**
      * Updates the button's colors
      */
-    appearance?: AppearanceUnion;
+    appearance?: ButtonAppearanceUnion;
     /**
      * Renders text within a `Text`
      */
@@ -28,7 +28,7 @@ interface TextButtonProps extends PressableProps {
      */
     minimumFontScale?: number;
     /**
-     * Fill buttons are visually more propmonitent then outline buttons
+     * Changes the styles and size of the text.
      */
     variant?: TextProps['variant'];
 }

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

@@ -1 +1 @@
-{"version":3,"file":"text_button.d.ts","sourceRoot":"","sources":["../../../src/components/display/text_button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAIlD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAEvC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAM3D,UAAU,eAAgB,SAAQ,cAAc;IAC9C;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B;;OAEG;IACH,UAAU,CAAC,EAAE,eAAe,CAAA;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,CAAA;IAChC;;OAEG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CAC/B;AAED,wBAAgB,UAAU,CAAC,EACzB,oBAA4B,EAC5B,gBAAuB,EACvB,UAAsB,EACtB,QAAgB,EAChB,QAAQ,EACR,qBAAqB,EACrB,gBAAgB,EAChB,OAAiB,EACjB,GAAG,KAAK,EACT,EAAE,eAAe,qBAuBjB"}
+{"version":3,"file":"text_button.d.ts","sourceRoot":"","sources":["../../../src/components/display/text_button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAIlD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAEvC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAA;AAMjE,UAAU,eAAgB,SAAQ,cAAc;IAC9C;;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,QAAQ,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,CAAA;IAChC;;OAEG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CAC/B;AAED,wBAAgB,UAAU,CAAC,EACzB,oBAA4B,EAC5B,gBAAuB,EACvB,UAA0B,EAC1B,QAAgB,EAChB,QAAQ,EACR,qBAAqB,EACrB,gBAAgB,EAChB,OAAiB,EACjB,GAAG,KAAK,EACT,EAAE,eAAe,qBAwBjB"}

package/build/components/display/text_button.js

@@ -3,11 +3,11 @@ import { Pressable, StyleSheet } from 'react-native';
 import { useTheme } from '../../hooks';
 import { platformFontWeightMedium } from '../../utils';
 import { Text } from './text';
-import { getColorKey, useColorOptionMap } from './button_color_utils';
-export function TextButton({ adjustsFontSizeToFit = false, allowFontScaling = true, appearance = 'primary', disabled = false, children, maxFontSizeMultiplier, minimumFontScale, variant = 'plain', ...props }) {
+import { getColorKey, useButtonColorOptionMap } from './button_color_utils';
+export function TextButton({ adjustsFontSizeToFit = false, allowFontScaling = true, appearance = 'interaction', disabled = false, children, maxFontSizeMultiplier, minimumFontScale, variant = 'plain', ...props }) {
     const styles = useStyles({ appearance, disabled });
     return (<Pressable accessibilityRole="button" disabled={disabled} style={({ pressed }) => pressed && styles.pressed} // Android & iOS intentionally get the same pressed style
-     {...props}>
+     hitSlop={10} {...props}>
       <Text adjustsFontSizeToFit={adjustsFontSizeToFit} allowFontScaling={allowFontScaling} maxFontSizeMultiplier={maxFontSizeMultiplier} minimumFontScale={minimumFontScale} numberOfLines={1} style={[styles.text, disabled && styles.disabled]} variant={variant}>
         {children}
       </Text>
@@ -16,10 +16,10 @@ export function TextButton({ adjustsFontSizeToFit = false, allowFontScaling = tr
 // =================================
 // ====== Styles ===================
 // =================================
-const useStyles = ({ appearance = 'primary', disabled = false }) => {
+const useStyles = ({ appearance = 'interaction', disabled = false }) => {
     const { colors } = useTheme();
     const colorKey = getColorKey({ disabled, appearance });
-    const colorOptionMap = useColorOptionMap();
+    const colorOptionMap = useButtonColorOptionMap();
     return StyleSheet.create({
         text: {
             fontWeight: platformFontWeightMedium,