@planningcenter/chat-react-native 2.2.0-rc.0 → 2.2.0-rc.1

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

@@ -1 +1 @@
-{"version":3,"file":"text_inline_button.js","sourceRoot":"","sources":["../../../src/components/display/text_inline_button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACvC,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,OAAO,EAAE,wBAAwB,EAAE,MAAM,aAAa,CAAA;AACtD,OAAO,aAAa,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,WAAW,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAA;AAc3E,MAAM,UAAU,gBAAgB,CAAC,EAC/B,UAAU,GAAG,aAAa,EAC1B,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,OAAO,EACP,GAAG,KAAK,EACc;IACtB,MAAM,MAAM,GAAG,SAAS,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,CAAA;IAClD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAEjD,MAAM,oBAAoB,GAAG,QAAQ,CAAC,MAAM,CAAC;QAC3C,GAAG,EAAE,IAAI;QACT,OAAO,EAAE,MAAM,CAAC,cAAc;KAC/B,CAAC,CAAA;IAEF,OAAO,CACL,CAAC,IAAI,CACH,iBAAiB,CAAC,QAAQ,CAC1B,aAAa,CAAC,CAAC,CAAC,CAAC,CACjB,KAAK,CAAC,CAAC;YACL,MAAM,CAAC,IAAI;YACX,MAAM,CAAC,SAAS;YAChB,QAAQ,IAAI,MAAM,CAAC,QAAQ;YAC3B,SAAS,IAAI,oBAAoB;SAClC,CAAC,CACF,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CACzC,SAAS,CAAC,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CACpC,UAAU,CAAC,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CACtC,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC;AAED,oCAAoC;AACpC,oCAAoC;AACpC,oCAAoC;AAEpC,MAAM,SAAS,GAAG,CAAC,EACjB,UAAU,GAAG,aAAa,EAC1B,QAAQ,GAAG,KAAK,GACe,EAAE,EAAE;IACnC,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAC7B,MAAM,QAAQ,GAAG,WAAW,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC,CAAA;IACtD,MAAM,cAAc,GAAG,uBAAuB,EAAE,CAAA;IAEhD,wEAAwE;IACxE,wFAAwF;IACxF,sEAAsE;IACtE,MAAM,YAAY,GAAG,aAAa,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAA;IAEhF,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,IAAI,EAAE;YACJ,UAAU,EAAE,wBAAwB;YACpC,KAAK,EAAE,cAAc,CAAC,QAAQ,CAAC;SAChC;QACD,SAAS,EAAE;YACT,kBAAkB,EAAE,WAAW;YAC/B,mBAAmB,EAAE,cAAc,CAAC,QAAQ,CAAC;YAC7C,mBAAmB,EAAE,OAAO;SAC7B;QACD,QAAQ,EAAE;YACR,KAAK,EAAE,MAAM,CAAC,wBAAwB;SACvC;QACD,cAAc,EAAE;YACd,KAAK,EAAE,YAAY;SACpB;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import React, { useState } from 'react'\nimport { Platform, StyleSheet } from 'react-native'\nimport { useTheme } from '../../hooks'\nimport { Text } from './text'\nimport type { TextProps } from './text'\nimport { platformFontWeightMedium } from '../../utils'\nimport colorFunction from 'color'\nimport { getColorKey, useButtonColorOptionMap } from './button_color_utils'\nimport type { ButtonAppearanceUnion } from './button_color_utils'\n\n// =================================\n// ====== Component ================\n// =================================\n\ninterface TextInlineButtonProps extends TextProps {\n  /**\n   * Updates the button's colors\n   */\n  appearance?: ButtonAppearanceUnion\n}\n\nexport function TextInlineButton({\n  appearance = 'interaction',\n  children,\n  disabled = false,\n  onPress,\n  ...props\n}: TextInlineButtonProps) {\n  const styles = useStyles({ appearance, disabled })\n  const [isPressed, setIsPressed] = useState(false)\n\n  const platformPressedStyle = Platform.select({\n    ios: null,\n    android: styles.pressedAndroid,\n  })\n\n  return (\n    <Text\n      accessibilityRole=\"button\"\n      numberOfLines={1}\n      style={[\n        styles.text,\n        styles.underline,\n        disabled && styles.disabled,\n        isPressed && platformPressedStyle,\n      ]}\n      onPress={!disabled ? onPress : undefined}\n      onPressIn={() => setIsPressed(true)}\n      onPressOut={() => setIsPressed(false)}\n      {...props}\n    >\n      {children}\n    </Text>\n  )\n}\n\n// =================================\n// ====== Styles ===================\n// =================================\n\nconst useStyles = ({\n  appearance = 'interaction',\n  disabled = false,\n}: Partial<TextInlineButtonProps>) => {\n  const { colors } = useTheme()\n  const colorKey = getColorKey({ disabled, appearance })\n  const colorOptionMap = useButtonColorOptionMap()\n\n  // Android doesn't show a \"pressed\" state and so we need to simulate it.\n  // Lowering the Text's opacity doesn't work as it inherits it's parent's Text's opacity.\n  // We can simulate the effect by changing the color's opacity instead.\n  const pressedColor = colorFunction(colorOptionMap[colorKey]).alpha(0.5).string()\n\n  return StyleSheet.create({\n    text: {\n      fontWeight: platformFontWeightMedium,\n      color: colorOptionMap[colorKey],\n    },\n    underline: {\n      textDecorationLine: 'underline',\n      textDecorationColor: colorOptionMap[colorKey],\n      textDecorationStyle: 'solid',\n    },\n    disabled: {\n      color: colors.textColorDefaultDisabled,\n    },\n    pressedAndroid: {\n      color: pressedColor,\n    },\n  })\n}\n"]}
+{"version":3,"file":"text_inline_button.js","sourceRoot":"","sources":["../../../src/components/display/text_inline_button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACvC,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,OAAO,EAAE,wBAAwB,EAAE,MAAM,aAAa,CAAA;AACtD,OAAO,aAAa,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,WAAW,EAAE,uBAAuB,EAAE,MAAM,uBAAuB,CAAA;AAc5E,MAAM,UAAU,gBAAgB,CAAC,EAC/B,UAAU,GAAG,aAAa,EAC1B,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,OAAO,EACP,KAAK,EACL,GAAG,KAAK,EACc;IACtB,MAAM,MAAM,GAAG,SAAS,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,CAAA;IAClD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAEjD,MAAM,oBAAoB,GAAG,QAAQ,CAAC,MAAM,CAAC;QAC3C,GAAG,EAAE,IAAI;QACT,OAAO,EAAE,MAAM,CAAC,cAAc;KAC/B,CAAC,CAAA;IAEF,OAAO,CACL,CAAC,IAAI,CACH,iBAAiB,CAAC,QAAQ,CAC1B,aAAa,CAAC,CAAC,CAAC,CAAC,CACjB,KAAK,CAAC,CAAC;YACL,MAAM,CAAC,IAAI;YACX,MAAM,CAAC,SAAS;YAChB,QAAQ,IAAI,MAAM,CAAC,QAAQ;YAC3B,SAAS,IAAI,oBAAoB;YACjC,KAAK;SACN,CAAC,CACF,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CACzC,SAAS,CAAC,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CACpC,UAAU,CAAC,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CACtC,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC;AAED,oCAAoC;AACpC,oCAAoC;AACpC,oCAAoC;AAEpC,MAAM,SAAS,GAAG,CAAC,EACjB,UAAU,GAAG,aAAa,EAC1B,QAAQ,GAAG,KAAK,GACe,EAAE,EAAE;IACnC,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAC7B,MAAM,QAAQ,GAAG,WAAW,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC,CAAA;IACtD,MAAM,cAAc,GAAG,uBAAuB,EAAE,CAAA;IAEhD,wEAAwE;IACxE,wFAAwF;IACxF,sEAAsE;IACtE,MAAM,YAAY,GAAG,aAAa,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAA;IAEhF,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,IAAI,EAAE;YACJ,UAAU,EAAE,wBAAwB;YACpC,KAAK,EAAE,cAAc,CAAC,QAAQ,CAAC;SAChC;QACD,SAAS,EAAE;YACT,kBAAkB,EAAE,WAAW;YAC/B,mBAAmB,EAAE,cAAc,CAAC,QAAQ,CAAC;YAC7C,mBAAmB,EAAE,OAAO;SAC7B;QACD,QAAQ,EAAE;YACR,KAAK,EAAE,MAAM,CAAC,wBAAwB;SACvC;QACD,cAAc,EAAE;YACd,KAAK,EAAE,YAAY;SACpB;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import React, { useState } from 'react'\nimport { Platform, StyleSheet } from 'react-native'\nimport { useTheme } from '../../hooks'\nimport { Text } from './text'\nimport type { TextProps } from './text'\nimport { platformFontWeightMedium } from '../../utils'\nimport colorFunction from 'color'\nimport { getColorKey, useButtonColorOptionMap } from './utils/button_colors'\nimport type { ButtonAppearanceUnion } from './utils/button_colors'\n\n// =================================\n// ====== Component ================\n// =================================\n\ninterface TextInlineButtonProps extends TextProps {\n  /**\n   * Updates the button's colors\n   */\n  appearance?: ButtonAppearanceUnion\n}\n\nexport function TextInlineButton({\n  appearance = 'interaction',\n  children,\n  disabled = false,\n  onPress,\n  style,\n  ...props\n}: TextInlineButtonProps) {\n  const styles = useStyles({ appearance, disabled })\n  const [isPressed, setIsPressed] = useState(false)\n\n  const platformPressedStyle = Platform.select({\n    ios: null,\n    android: styles.pressedAndroid,\n  })\n\n  return (\n    <Text\n      accessibilityRole=\"button\"\n      numberOfLines={1}\n      style={[\n        styles.text,\n        styles.underline,\n        disabled && styles.disabled,\n        isPressed && platformPressedStyle,\n        style,\n      ]}\n      onPress={!disabled ? onPress : undefined}\n      onPressIn={() => setIsPressed(true)}\n      onPressOut={() => setIsPressed(false)}\n      {...props}\n    >\n      {children}\n    </Text>\n  )\n}\n\n// =================================\n// ====== Styles ===================\n// =================================\n\nconst useStyles = ({\n  appearance = 'interaction',\n  disabled = false,\n}: Partial<TextInlineButtonProps>) => {\n  const { colors } = useTheme()\n  const colorKey = getColorKey({ disabled, appearance })\n  const colorOptionMap = useButtonColorOptionMap()\n\n  // Android doesn't show a \"pressed\" state and so we need to simulate it.\n  // Lowering the Text's opacity doesn't work as it inherits it's parent's Text's opacity.\n  // We can simulate the effect by changing the color's opacity instead.\n  const pressedColor = colorFunction(colorOptionMap[colorKey]).alpha(0.5).string()\n\n  return StyleSheet.create({\n    text: {\n      fontWeight: platformFontWeightMedium,\n      color: colorOptionMap[colorKey],\n    },\n    underline: {\n      textDecorationLine: 'underline',\n      textDecorationColor: colorOptionMap[colorKey],\n      textDecorationStyle: 'solid',\n    },\n    disabled: {\n      color: colors.textColorDefaultDisabled,\n    },\n    pressedAndroid: {\n      color: pressedColor,\n    },\n  })\n}\n"]}

package/build/components/display/{button_color_utils.d.ts → utils/button_colors.d.ts}

@@ -36,4 +36,4 @@ interface GetColorKeyArgs {
     appearance: ButtonAppearanceUnion | IconButtonAppearanceUnion;
 }
 declare function getColorKey({ disabled, loading, appearance }: GetColorKeyArgs): "neutral" | "danger" | "interaction" | "disabled";
-//# sourceMappingURL=button_color_utils.d.ts.map
+//# sourceMappingURL=button_colors.d.ts.map

package/build/components/display/utils/button_colors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button_colors.d.ts","sourceRoot":"","sources":["../../../../src/components/display/utils/button_colors.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 → utils/button_colors.js}

@@ -1,4 +1,4 @@
-import { useTheme } from '../../hooks';
+import { useTheme } from '../../../hooks';
 // =================================
 // ====== Exports ==================
 // =================================
@@ -57,4 +57,4 @@ function getColorKey({ disabled, loading, appearance }) {
         return 'disabled';
     return appearance;
 }
-//# sourceMappingURL=button_color_utils.js.map
+//# sourceMappingURL=button_colors.js.map

package/build/components/display/utils/button_colors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button_colors.js","sourceRoot":"","sources":["../../../../src/components/display/utils/button_colors.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAEzC,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/utils/status_colors.d.ts

@@ -0,0 +1,17 @@
+export { useStatusColorAppearanceMap };
+export type { StatusAppearanceUnion };
+declare const STATUS_APPEARANCES: {
+    readonly error: "error";
+    readonly info: "info";
+    readonly neutral: "neutral";
+    readonly success: "success";
+    readonly warning: "warning";
+};
+type StatusAppearanceUnion = (typeof STATUS_APPEARANCES)[keyof typeof STATUS_APPEARANCES];
+type StatusAppearanceColors = Record<StatusAppearanceUnion, {
+    background: string;
+    text: string;
+    icon: string;
+}>;
+declare function useStatusColorAppearanceMap(): StatusAppearanceColors;
+//# sourceMappingURL=status_colors.d.ts.map

package/build/components/display/utils/status_colors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"status_colors.d.ts","sourceRoot":"","sources":["../../../../src/components/display/utils/status_colors.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,2BAA2B,EAAE,CAAA;AACtC,YAAY,EAAE,qBAAqB,EAAE,CAAA;AAMrC,QAAA,MAAM,kBAAkB;;;;;;CAMd,CAAA;AAEV,KAAK,qBAAqB,GAAG,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,OAAO,kBAAkB,CAAC,CAAA;AAEzF,KAAK,sBAAsB,GAAG,MAAM,CAClC,qBAAqB,EACrB;IACE,UAAU,EAAE,MAAM,CAAA;IAClB,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,CAAA;CACb,CACF,CAAA;AAMD,iBAAS,2BAA2B,IAAI,sBAAsB,CAgD7D"}

package/build/components/display/utils/status_colors.js

@@ -0,0 +1,49 @@
+import { useTheme } from '../../../hooks';
+// =================================
+// ====== Exports ==================
+// =================================
+export { useStatusColorAppearanceMap };
+// =================================
+// ====== Constants ================
+// =================================
+const STATUS_APPEARANCES = {
+    error: 'error',
+    info: 'info',
+    neutral: 'neutral',
+    success: 'success',
+    warning: 'warning',
+};
+// =================================
+// ====== Hooks ====================
+// =================================
+function useStatusColorAppearanceMap() {
+    const { colors: { statusErrorBackground, statusErrorText, statusErrorIcon, statusInfoBackground, statusInfoText, statusInfoIcon, statusNeutralBackground, statusNeutralText, statusNeutralIcon, statusSuccessBackground, statusSuccessText, statusSuccessIcon, statusWarningBackground, statusWarningText, statusWarningIcon, }, } = useTheme();
+    return {
+        error: {
+            background: statusErrorBackground,
+            text: statusErrorText,
+            icon: statusErrorIcon,
+        },
+        info: {
+            background: statusInfoBackground,
+            text: statusInfoText,
+            icon: statusInfoIcon,
+        },
+        neutral: {
+            background: statusNeutralBackground,
+            text: statusNeutralText,
+            icon: statusNeutralIcon,
+        },
+        success: {
+            background: statusSuccessBackground,
+            text: statusSuccessText,
+            icon: statusSuccessIcon,
+        },
+        warning: {
+            background: statusWarningBackground,
+            text: statusWarningText,
+            icon: statusWarningIcon,
+        },
+    };
+}
+//# sourceMappingURL=status_colors.js.map

package/build/components/display/utils/status_colors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"status_colors.js","sourceRoot":"","sources":["../../../../src/components/display/utils/status_colors.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAEzC,oCAAoC;AACpC,oCAAoC;AACpC,oCAAoC;AAEpC,OAAO,EAAE,2BAA2B,EAAE,CAAA;AAGtC,oCAAoC;AACpC,oCAAoC;AACpC,oCAAoC;AAEpC,MAAM,kBAAkB,GAAG;IACzB,KAAK,EAAE,OAAO;IACd,IAAI,EAAE,MAAM;IACZ,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;CACV,CAAA;AAaV,oCAAoC;AACpC,oCAAoC;AACpC,oCAAoC;AAEpC,SAAS,2BAA2B;IAClC,MAAM,EACJ,MAAM,EAAE,EACN,qBAAqB,EACrB,eAAe,EACf,eAAe,EACf,oBAAoB,EACpB,cAAc,EACd,cAAc,EACd,uBAAuB,EACvB,iBAAiB,EACjB,iBAAiB,EACjB,uBAAuB,EACvB,iBAAiB,EACjB,iBAAiB,EACjB,uBAAuB,EACvB,iBAAiB,EACjB,iBAAiB,GAClB,GACF,GAAG,QAAQ,EAAE,CAAA;IAEd,OAAO;QACL,KAAK,EAAE;YACL,UAAU,EAAE,qBAAqB;YACjC,IAAI,EAAE,eAAe;YACrB,IAAI,EAAE,eAAe;SACtB;QACD,IAAI,EAAE;YACJ,UAAU,EAAE,oBAAoB;YAChC,IAAI,EAAE,cAAc;YACpB,IAAI,EAAE,cAAc;SACrB;QACD,OAAO,EAAE;YACP,UAAU,EAAE,uBAAuB;YACnC,IAAI,EAAE,iBAAiB;YACvB,IAAI,EAAE,iBAAiB;SACxB;QACD,OAAO,EAAE;YACP,UAAU,EAAE,uBAAuB;YACnC,IAAI,EAAE,iBAAiB;YACvB,IAAI,EAAE,iBAAiB;SACxB;QACD,OAAO,EAAE;YACP,UAAU,EAAE,uBAAuB;YACnC,IAAI,EAAE,iBAAiB;YACvB,IAAI,EAAE,iBAAiB;SACxB;KACF,CAAA;AACH,CAAC","sourcesContent":["import { useTheme } from '../../../hooks'\n\n// =================================\n// ====== Exports ==================\n// =================================\n\nexport { useStatusColorAppearanceMap }\nexport type { StatusAppearanceUnion }\n\n// =================================\n// ====== Constants ================\n// =================================\n\nconst STATUS_APPEARANCES = {\n  error: 'error',\n  info: 'info',\n  neutral: 'neutral',\n  success: 'success',\n  warning: 'warning',\n} as const\n\ntype StatusAppearanceUnion = (typeof STATUS_APPEARANCES)[keyof typeof STATUS_APPEARANCES]\n\ntype StatusAppearanceColors = Record<\n  StatusAppearanceUnion,\n  {\n    background: string\n    text: string\n    icon: string\n  }\n>\n\n// =================================\n// ====== Hooks ====================\n// =================================\n\nfunction useStatusColorAppearanceMap(): StatusAppearanceColors {\n  const {\n    colors: {\n      statusErrorBackground,\n      statusErrorText,\n      statusErrorIcon,\n      statusInfoBackground,\n      statusInfoText,\n      statusInfoIcon,\n      statusNeutralBackground,\n      statusNeutralText,\n      statusNeutralIcon,\n      statusSuccessBackground,\n      statusSuccessText,\n      statusSuccessIcon,\n      statusWarningBackground,\n      statusWarningText,\n      statusWarningIcon,\n    },\n  } = useTheme()\n\n  return {\n    error: {\n      background: statusErrorBackground,\n      text: statusErrorText,\n      icon: statusErrorIcon,\n    },\n    info: {\n      background: statusInfoBackground,\n      text: statusInfoText,\n      icon: statusInfoIcon,\n    },\n    neutral: {\n      background: statusNeutralBackground,\n      text: statusNeutralText,\n      icon: statusNeutralIcon,\n    },\n    success: {\n      background: statusSuccessBackground,\n      text: statusSuccessText,\n      icon: statusSuccessIcon,\n    },\n    warning: {\n      background: statusWarningBackground,\n      text: statusWarningText,\n      icon: statusWarningIcon,\n    },\n  }\n}\n"]}

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

@@ -0,0 +1,38 @@
+import { FC, ReactNode } from 'react';
+import { type StatusAppearanceUnion } from '../display/utils/status_colors';
+type BannerComponents = {
+    Root: FC<BannerRootProps>;
+    StaticLayout: FC<BannerStaticLayoutProps>;
+    Content: FC<BannerContentProps>;
+    StatusIcon: FC<BannerStatusIconProps>;
+    Heading: FC<BannerHeadingProps>;
+    Text: FC<BannerTextProps>;
+    Link: FC<BannerLinkProps>;
+};
+declare const _default: BannerComponents;
+export default _default;
+export type { BannerRootProps, BannerStaticLayoutProps, BannerContentProps, BannerStatusIconProps, BannerHeadingProps, BannerTextProps, BannerLinkProps, };
+interface BannerRootProps {
+    children: ReactNode;
+    appearance?: StatusAppearanceUnion;
+}
+interface BannerStaticLayoutProps {
+    children: ReactNode;
+}
+interface BannerContentProps {
+    children: ReactNode;
+}
+interface BannerStatusIconProps {
+    iconName?: string;
+}
+interface BannerHeadingProps {
+    children: ReactNode;
+}
+interface BannerTextProps {
+    children: ReactNode;
+}
+interface BannerLinkProps {
+    children: ReactNode;
+    onPress?: () => void;
+}
+//# sourceMappingURL=banner_primitive.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"banner_primitive.d.ts","sourceRoot":"","sources":["../../../src/components/primitive/banner_primitive.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAiB,EAAE,EAAE,SAAS,EAAc,MAAM,OAAO,CAAA;AAEvE,OAAO,EAEL,KAAK,qBAAqB,EAC3B,MAAM,gCAAgC,CAAA;AAoBvC,KAAK,gBAAgB,GAAG;IACtB,IAAI,EAAE,EAAE,CAAC,eAAe,CAAC,CAAA;IACzB,YAAY,EAAE,EAAE,CAAC,uBAAuB,CAAC,CAAA;IACzC,OAAO,EAAE,EAAE,CAAC,kBAAkB,CAAC,CAAA;IAC/B,UAAU,EAAE,EAAE,CAAC,qBAAqB,CAAC,CAAA;IACrC,OAAO,EAAE,EAAE,CAAC,kBAAkB,CAAC,CAAA;IAC/B,IAAI,EAAE,EAAE,CAAC,eAAe,CAAC,CAAA;IACzB,IAAI,EAAE,EAAE,CAAC,eAAe,CAAC,CAAA;CAC1B,CAAA;wBAEwB,gBAAgB;AAAzC,wBAAyC;AACzC,YAAY,EACV,eAAe,EACf,uBAAuB,EACvB,kBAAkB,EAClB,qBAAqB,EACrB,kBAAkB,EAClB,eAAe,EACf,eAAe,GAChB,CAAA;AAwBD,UAAU,eAAe;IACvB,QAAQ,EAAE,SAAS,CAAA;IACnB,UAAU,CAAC,EAAE,qBAAqB,CAAA;CACnC;AAYD,UAAU,uBAAuB;IAC/B,QAAQ,EAAE,SAAS,CAAA;CACpB;AAeD,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,SAAS,CAAA;CACpB;AAcD,UAAU,qBAAqB;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AA6BD,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,SAAS,CAAA;CACpB;AAmBD,UAAU,eAAe;IACvB,QAAQ,EAAE,SAAS,CAAA;CACpB;AAmBD,UAAU,eAAe;IACvB,QAAQ,EAAE,SAAS,CAAA;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB"}

package/build/components/primitive/banner_primitive.js

@@ -0,0 +1,112 @@
+import React, { createContext, useContext } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { useStatusColorAppearanceMap, } from '../display/utils/status_colors';
+import { MAX_FONT_SIZE_MULTIPLIER, platformFontWeightMedium, space } from '../../utils';
+import { tokens } from '../../vendor/tapestry/tokens';
+import { Heading, Icon, Text, TextInlineButton } from '../display';
+import { useFontScale } from '../../hooks';
+// ========================================
+// ====== Exports =========================
+// ========================================
+const Banner = {
+    Root: BannerRoot,
+    StaticLayout: BannerStaticLayout,
+    Content: BannerContent,
+    StatusIcon: BannerStatusIcon,
+    Heading: BannerHeading,
+    Text: BannerText,
+    Link: BannerLink,
+};
+export default Banner;
+const BannerContext = createContext(null);
+function useBannerContext() {
+    const context = useContext(BannerContext);
+    if (!context) {
+        throw new Error('Banner components must be used within Banner.Root');
+    }
+    return context;
+}
+function BannerRoot({ children, appearance = 'neutral' }) {
+    return <BannerContext.Provider value={{ appearance }}>{children}</BannerContext.Provider>;
+}
+BannerRoot.displayName = 'Banner.Root';
+function BannerStaticLayout({ children }) {
+    const { appearance } = useBannerContext();
+    const styles = useStyles({ appearance });
+    return <View style={styles.staticLayout}>{children}</View>;
+}
+BannerStaticLayout.displayName = 'Banner.StaticLayout';
+function BannerContent({ children }) {
+    const styles = useStyles();
+    return <View style={styles.content}>{children}</View>;
+}
+BannerContent.displayName = 'Banner.Content';
+function BannerStatusIcon({ iconName }) {
+    const { appearance = 'neutral' } = useBannerContext();
+    const styles = useStyles({ appearance });
+    const iconNameMap = {
+        error: 'general.exclamationTriangle',
+        info: 'general.outlinedInfoCircle',
+        neutral: 'general.outlinedInfoCircle',
+        success: 'general.check',
+        warning: 'general.exclamationTriangle',
+    };
+    return (<Icon name={iconName || iconNameMap[appearance]} style={styles.icon} maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}/>);
+}
+BannerStatusIcon.displayName = 'Banner.StatusIcon';
+function BannerHeading({ children }) {
+    const { appearance = 'neutral' } = useBannerContext();
+    const styles = useStyles({ appearance });
+    return (<Heading variant="h3" style={styles.heading}>
+      {children}
+    </Heading>);
+}
+BannerHeading.displayName = 'Banner.Heading';
+function BannerText({ children }) {
+    const { appearance = 'neutral' } = useBannerContext();
+    const styles = useStyles({ appearance });
+    return (<Text variant="tertiary" style={styles.text}>
+      {children}
+    </Text>);
+}
+BannerText.displayName = 'Banner.Text';
+function BannerLink({ children, onPress }) {
+    const { appearance = 'neutral' } = useBannerContext();
+    const styles = useStyles({ appearance });
+    return (<TextInlineButton variant="tertiary" style={styles.text} onPress={onPress}>
+      {children}
+    </TextInlineButton>);
+}
+BannerLink.displayName = 'Banner.Link';
+const useStyles = ({ appearance = 'neutral' } = {}) => {
+    const statusColorMap = useStatusColorAppearanceMap();
+    const fontScale = useFontScale();
+    return StyleSheet.create({
+        staticLayout: {
+            flexDirection: 'row',
+            backgroundColor: statusColorMap[appearance].background,
+            padding: space(1.5),
+            gap: space(1),
+            borderRadius: tokens.borderRadiusMd,
+            flex: 1,
+        },
+        content: {
+            gap: space(0.5),
+            flex: 1,
+        },
+        icon: {
+            color: statusColorMap[appearance].icon,
+            fontSize: tokens.fontSizeMd,
+            marginTop: space(0.5) * fontScale,
+        },
+        heading: {
+            color: statusColorMap[appearance].text,
+            fontWeight: platformFontWeightMedium,
+            fontSize: tokens.fontSizeMd,
+        },
+        text: {
+            color: statusColorMap[appearance].text,
+        },
+    });
+};
+//# sourceMappingURL=banner_primitive.js.map

package/build/components/primitive/banner_primitive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"banner_primitive.js","sourceRoot":"","sources":["../../../src/components/primitive/banner_primitive.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { createContext, FC, ReactNode, useContext } from 'react'\nimport { StyleSheet, View } from 'react-native'\nimport {\n  useStatusColorAppearanceMap,\n  type StatusAppearanceUnion,\n} from '../display/utils/status_colors'\nimport { MAX_FONT_SIZE_MULTIPLIER, platformFontWeightMedium, space } from '../../utils'\nimport { tokens } from '../../vendor/tapestry/tokens'\nimport { Heading, Icon, Text, TextInlineButton } from '../display'\nimport { useFontScale } from '../../hooks'\n\n// ========================================\n// ====== Exports =========================\n// ========================================\n\nconst Banner = {\n  Root: BannerRoot,\n  StaticLayout: BannerStaticLayout,\n  Content: BannerContent,\n  StatusIcon: BannerStatusIcon,\n  Heading: BannerHeading,\n  Text: BannerText,\n  Link: BannerLink,\n} as const\n\ntype BannerComponents = {\n  Root: FC<BannerRootProps>\n  StaticLayout: FC<BannerStaticLayoutProps>\n  Content: FC<BannerContentProps>\n  StatusIcon: FC<BannerStatusIconProps>\n  Heading: FC<BannerHeadingProps>\n  Text: FC<BannerTextProps>\n  Link: FC<BannerLinkProps>\n}\n\nexport default Banner as BannerComponents\nexport type {\n  BannerRootProps,\n  BannerStaticLayoutProps,\n  BannerContentProps,\n  BannerStatusIconProps,\n  BannerHeadingProps,\n  BannerTextProps,\n  BannerLinkProps,\n}\n\n// ========================================\n// ====== Context =========================\n// ========================================\n\ninterface BannerContextType {\n  appearance?: StatusAppearanceUnion\n}\n\nconst BannerContext = createContext<BannerContextType | null>(null)\n\nfunction useBannerContext() {\n  const context = useContext(BannerContext)\n  if (!context) {\n    throw new Error('Banner components must be used within Banner.Root')\n  }\n  return context\n}\n\n// ========================================\n// ====== BannerRoot ======================\n// ========================================\n\ninterface BannerRootProps {\n  children: ReactNode\n  appearance?: StatusAppearanceUnion\n}\n\nfunction BannerRoot({ children, appearance = 'neutral' }: BannerRootProps) {\n  return <BannerContext.Provider value={{ appearance }}>{children}</BannerContext.Provider>\n}\n\nBannerRoot.displayName = 'Banner.Root'\n\n// ========================================\n// ====== BannerStaticLayout ==============\n// ========================================\n\ninterface BannerStaticLayoutProps {\n  children: ReactNode\n}\n\nfunction BannerStaticLayout({ children }: BannerStaticLayoutProps) {\n  const { appearance } = useBannerContext()\n  const styles = useStyles({ appearance })\n\n  return <View style={styles.staticLayout}>{children}</View>\n}\n\nBannerStaticLayout.displayName = 'Banner.StaticLayout'\n\n// ========================================\n// ====== BannerContent ===================\n// ========================================\n\ninterface BannerContentProps {\n  children: ReactNode\n}\n\nfunction BannerContent({ children }: BannerContentProps) {\n  const styles = useStyles()\n\n  return <View style={styles.content}>{children}</View>\n}\n\nBannerContent.displayName = 'Banner.Content'\n\n// ========================================\n// ====== BannerStatusIcon ================\n// ========================================\n\ninterface BannerStatusIconProps {\n  iconName?: string\n}\n\nfunction BannerStatusIcon({ iconName }: BannerStatusIconProps) {\n  const { appearance = 'neutral' } = useBannerContext()\n  const styles = useStyles({ appearance })\n\n  const iconNameMap = {\n    error: 'general.exclamationTriangle',\n    info: 'general.outlinedInfoCircle',\n    neutral: 'general.outlinedInfoCircle',\n    success: 'general.check',\n    warning: 'general.exclamationTriangle',\n  } as const\n\n  return (\n    <Icon\n      name={iconName || iconNameMap[appearance]}\n      style={styles.icon}\n      maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}\n    />\n  )\n}\n\nBannerStatusIcon.displayName = 'Banner.StatusIcon'\n\n// ========================================\n// ====== BannerHeading ===================\n// ========================================\n\ninterface BannerHeadingProps {\n  children: ReactNode\n}\n\nfunction BannerHeading({ children }: BannerHeadingProps) {\n  const { appearance = 'neutral' } = useBannerContext()\n  const styles = useStyles({ appearance })\n\n  return (\n    <Heading variant=\"h3\" style={styles.heading}>\n      {children}\n    </Heading>\n  )\n}\n\nBannerHeading.displayName = 'Banner.Heading'\n\n// ========================================\n// ====== BannerText ======================\n// ========================================\n\ninterface BannerTextProps {\n  children: ReactNode\n}\n\nfunction BannerText({ children }: BannerTextProps) {\n  const { appearance = 'neutral' } = useBannerContext()\n  const styles = useStyles({ appearance })\n\n  return (\n    <Text variant=\"tertiary\" style={styles.text}>\n      {children}\n    </Text>\n  )\n}\n\nBannerText.displayName = 'Banner.Text'\n\n// ========================================\n// ====== BannerLink ======================\n// ========================================\n\ninterface BannerLinkProps {\n  children: ReactNode\n  onPress?: () => void\n}\n\nfunction BannerLink({ children, onPress }: BannerLinkProps) {\n  const { appearance = 'neutral' } = useBannerContext()\n  const styles = useStyles({ appearance })\n\n  return (\n    <TextInlineButton variant=\"tertiary\" style={styles.text} onPress={onPress}>\n      {children}\n    </TextInlineButton>\n  )\n}\n\nBannerLink.displayName = 'Banner.Link'\n\n// ========================================\n// ====== Styles ==========================\n// ========================================\n\ninterface Styles {\n  appearance?: StatusAppearanceUnion\n}\n\nconst useStyles = ({ appearance = 'neutral' }: Styles = {}) => {\n  const statusColorMap = useStatusColorAppearanceMap()\n  const fontScale = useFontScale()\n\n  return StyleSheet.create({\n    staticLayout: {\n      flexDirection: 'row',\n      backgroundColor: statusColorMap[appearance].background,\n      padding: space(1.5),\n      gap: space(1),\n      borderRadius: tokens.borderRadiusMd,\n      flex: 1,\n    },\n    content: {\n      gap: space(0.5),\n      flex: 1,\n    },\n    icon: {\n      color: statusColorMap[appearance].icon,\n      fontSize: tokens.fontSizeMd,\n      marginTop: space(0.5) * fontScale,\n    },\n    heading: {\n      color: statusColorMap[appearance].text,\n      fontWeight: platformFontWeightMedium,\n      fontSize: tokens.fontSizeMd,\n    },\n    text: {\n      color: statusColorMap[appearance].text,\n    },\n  })\n}\n"]}

package/build/hooks/use_font_scale.d.ts

@@ -1,4 +1,4 @@
-export declare const useFontScale: ({ maxFontSizeMultiplier }: {
+export declare const useFontScale: ({ maxFontSizeMultiplier, }?: {
     maxFontSizeMultiplier?: number;
 }) => number;
 //# sourceMappingURL=use_font_scale.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"use_font_scale.d.ts","sourceRoot":"","sources":["../../src/hooks/use_font_scale.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,8BAA+B;IAAE,qBAAqB,CAAC,EAAE,MAAM,CAAA;CAAE,WAMzF,CAAA"}
+{"version":3,"file":"use_font_scale.d.ts","sourceRoot":"","sources":["../../src/hooks/use_font_scale.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,gCAEtB;IAAE,qBAAqB,CAAC,EAAE,MAAM,CAAA;CAAE,WAMpC,CAAA"}

package/build/hooks/use_font_scale.js

@@ -1,5 +1,5 @@
 import { useWindowDimensions } from 'react-native';
-export const useFontScale = ({ maxFontSizeMultiplier }) => {
+export const useFontScale = ({ maxFontSizeMultiplier, } = {}) => {
     const { fontScale: nativeFontScale } = useWindowDimensions();
     const scaleLimit = maxFontSizeMultiplier || nativeFontScale;
     const fontScale = Math.min(scaleLimit, nativeFontScale);

package/build/hooks/use_font_scale.js.map

@@ -1 +1 @@
-{"version":3,"file":"use_font_scale.js","sourceRoot":"","sources":["../../src/hooks/use_font_scale.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAA;AAElD,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAAE,qBAAqB,EAAsC,EAAE,EAAE;IAC5F,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE,GAAG,mBAAmB,EAAE,CAAA;IAC5D,MAAM,UAAU,GAAG,qBAAqB,IAAI,eAAe,CAAA;IAC3D,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,UAAU,EAAE,eAAe,CAAC,CAAA;IAEvD,OAAO,SAAS,CAAA;AAClB,CAAC,CAAA","sourcesContent":["import { useWindowDimensions } from 'react-native'\n\nexport const useFontScale = ({ maxFontSizeMultiplier }: { maxFontSizeMultiplier?: number }) => {\n  const { fontScale: nativeFontScale } = useWindowDimensions()\n  const scaleLimit = maxFontSizeMultiplier || nativeFontScale\n  const fontScale = Math.min(scaleLimit, nativeFontScale)\n\n  return fontScale\n}\n"]}
+{"version":3,"file":"use_font_scale.js","sourceRoot":"","sources":["../../src/hooks/use_font_scale.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAA;AAElD,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAC3B,qBAAqB,MACiB,EAAE,EAAE,EAAE;IAC5C,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE,GAAG,mBAAmB,EAAE,CAAA;IAC5D,MAAM,UAAU,GAAG,qBAAqB,IAAI,eAAe,CAAA;IAC3D,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,UAAU,EAAE,eAAe,CAAC,CAAA;IAEvD,OAAO,SAAS,CAAA;AAClB,CAAC,CAAA","sourcesContent":["import { useWindowDimensions } from 'react-native'\n\nexport const useFontScale = ({\n  maxFontSizeMultiplier,\n}: { maxFontSizeMultiplier?: number } = {}) => {\n  const { fontScale: nativeFontScale } = useWindowDimensions()\n  const scaleLimit = maxFontSizeMultiplier || nativeFontScale\n  const fontScale = Math.min(scaleLimit, nativeFontScale)\n\n  return fontScale\n}\n"]}

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

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

package/build/screens/design_system_screen.js

@@ -1,8 +1,9 @@
 import React, { useState } from 'react';
 import { Alert, Pressable, ScrollView, StyleSheet, View } from 'react-native';
 import { useTheme } from '../hooks';
-import { Avatar, AvatarGroup, Badge, Button, Heading, Icon, IconButton, Image, Spinner, Switch, Text, TextButton, TextInlineButton, } from '../components/display';
+import { Avatar, AvatarGroup, Badge, Banner, Button, Heading, Icon, IconButton, Image, Spinner, Switch, Text, TextButton, TextInlineButton, } from '../components/display';
 import { space, MAX_FONT_SIZE_MULTIPLIER, platformPressedOpacityStyle, platformFontWeightMedium, } from '../utils';
+import BannerPrimitive from '../components/primitive/banner_primitive';
 // =================================
 // ====== Docs Utils ===============
 // =================================
@@ -430,6 +431,21 @@ function StatusComponentsSection({ isLast }) {
           <Badge variant="metaSubtle" productLogoName="services" label="Team"/>
         </Row>
       </Group>
+      <Group title="Banner" description="Banners that can convey a status with color and an optional icon. They render a description and optional heading. A `Banner.Link` can be used by wrapping it in `Banner.Text` and passing it to `description`. Target products can change colors via theming.">
+        <Column>
+          <Banner appearance="neutral" showIcon={false} description="Et sint Quis non excepturi enim et conseq atur porro est galisum labore ea volupt."/>
+          <Banner appearance="info" heading="Banner heading" description="Et sint Quis non excepturi enim et conseq atur porro est galisum labore ea volupt."/>
+          <Banner appearance="success" heading="Banner heading" description={<BannerPrimitive.Text>
+                Et sint Quis non excepturi{' '}
+                <BannerPrimitive.Link onPress={buttonPress}>
+                  enim et conseq atur porro est
+                </BannerPrimitive.Link>{' '}
+                galisum labore ea volupt.
+              </BannerPrimitive.Text>}/>
+          <Banner appearance="warning" iconName="general.shieldExclamation" heading="13 members under age 13" description="Et sint Quis non excepturi enim et conseq atur porro est galisum labore ea volupt."/>
+          <Banner appearance="error" heading="Banner heading" description="Et sint Quis non excepturi enim et conseq atur porro est galisum labore ea volupt."/>
+        </Column>
+      </Group>
     </CollapsableSection>);
 }
 function CollapsableSection({ children, title, isLast = false }) {
@@ -458,6 +474,10 @@ function Row({ children, style }) {
     const styles = useStyles();
     return <View style={[styles.row, style]}>{children}</View>;
 }
+function Column({ children, style }) {
+    const styles = useStyles();
+    return <View style={[styles.column, style]}>{children}</View>;
+}
 function TextGroup({ children }) {
     const styles = useStyles();
     return <View style={styles.textGroup}>{children}</View>;
@@ -516,6 +536,9 @@ const useStyles = () => {
             justifyContent: 'center',
             flexWrap: 'wrap',
         },
+        column: {
+            gap: space(2),
+        },
         textRow: {
             gap: space(1.5),
         },