@planningcenter/chat-react-native 1.5.0 → 1.6.0

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

@@ -1 +1 @@
-{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../src/components/display/image.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAA;AACvC,OAAO,EAIL,UAAU,IAAI,qBAAqB,EAGnC,SAAS,EACV,MAAM,cAAc,CAAA;AAIrB,MAAM,WAAW,UAAW,SAAQ,qBAAqB;IACvD;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;OAEG;IACH,uBAAuB,CAAC,EAAE,SAAS,CAAA;IACnC;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAA;CACzB;AAED,wBAAgB,KAAK,CAAC,EACpB,MAAM,EACN,MAAa,EACb,cAAqB,EACrB,cAAqB,EACrB,UAAe,EACf,uBAAuB,EACvB,KAAU,EACV,YAAiB,EACjB,GAAG,KAAK,EACT,EAAE,UAAU,qBA2BZ"}
+{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../src/components/display/image.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAA;AACvC,OAAO,EAIL,UAAU,IAAI,qBAAqB,EAGnC,SAAS,EACV,MAAM,cAAc,CAAA;AAQrB,MAAM,WAAW,UAAW,SAAQ,qBAAqB;IACvD;;;OAGG;IACH,GAAG,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;OAEG;IACH,uBAAuB,CAAC,EAAE,SAAS,CAAA;IACnC;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAA;CACzB;AAED,wBAAgB,KAAK,CAAC,EACpB,MAAM,EACN,MAAa,EACb,cAAqB,EACrB,cAAqB,EACrB,UAAe,EACf,uBAAuB,EACvB,KAAU,EACV,YAAiB,EACjB,GAAG,EACH,GAAG,KAAK,EACT,EAAE,UAAU,qBAiCZ"}

package/build/components/display/image.js

@@ -3,23 +3,23 @@ import React, { useState } from 'react';
 import { Image as ReactNativeImage, StyleSheet, View, } from 'react-native';
 import { useTheme } from '../../hooks';
 import { Spinner } from './spinner';
-export function Image({ source, onLoad = noop, defaultLoading = true, loadingEnabled = true, loaderSize = 24, loadingBackgroundStyles, style = {}, wrapperStyle = {}, ...props }) {
+export function Image({ source, onLoad = noop, defaultLoading = true, loadingEnabled = true, loaderSize = 24, loadingBackgroundStyles, style = {}, wrapperStyle = {}, alt, ...props }) {
     const [loading, setLoading] = useState(defaultLoading);
     const imageStyles = StyleSheet.flatten(style);
     const { width = '100%', height = '100%', borderRadius = 0 } = imageStyles || {};
-    const styles = useStyles(width, height, borderRadius);
+    const styles = useStyles({ width, height, borderRadius });
     const handleOnLoad = (event) => {
         setLoading(false);
         onLoad?.(event);
     };
-    return (<View style={wrapperStyle}>
-      <ReactNativeImage style={[styles.image, imageStyles]} onLoad={handleOnLoad} source={source} {...props}/>
+    return (<View style={wrapperStyle} accessible={Boolean(alt)} accessibilityRole="image" accessibilityState={{ busy: loading }}>
+      <ReactNativeImage style={[styles.image, imageStyles]} onLoad={handleOnLoad} source={source} alt={loading ? '' : alt} {...props}/>
       {loading && loadingEnabled && (<View style={[styles.loadingBackground, loadingBackgroundStyles]}>
           <Spinner size={loaderSize}/>
         </View>)}
     </View>);
 }
-const useStyles = (width, height, borderRadius) => {
+const useStyles = ({ width, height, borderRadius }) => {
     const { colors } = useTheme();
     return StyleSheet.create({
         loadingBackground: {

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

@@ -1 +1 @@
-{"version":3,"file":"image.js","sourceRoot":"","sources":["../../../src/components/display/image.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACvC,OAAO,EAGL,KAAK,IAAI,gBAAgB,EAEzB,UAAU,EACV,IAAI,GAEL,MAAM,cAAc,CAAA;AACrB,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AAyBnC,MAAM,UAAU,KAAK,CAAC,EACpB,MAAM,EACN,MAAM,GAAG,IAAI,EACb,cAAc,GAAG,IAAI,EACrB,cAAc,GAAG,IAAI,EACrB,UAAU,GAAG,EAAE,EACf,uBAAuB,EACvB,KAAK,GAAG,EAAE,EACV,YAAY,GAAG,EAAE,EACjB,GAAG,KAAK,EACG;IACX,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,cAAc,CAAC,CAAA;IAEtD,MAAM,WAAW,GAAG,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC,CAAA;IAC7C,MAAM,EAAE,KAAK,GAAG,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,YAAY,GAAG,CAAC,EAAE,GAAG,WAAW,IAAI,EAAE,CAAA;IAC/E,MAAM,MAAM,GAAG,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,YAAY,CAAC,CAAA;IAErD,MAAM,YAAY,GAAG,CAAC,KAAU,EAAE,EAAE;QAClC,UAAU,CAAC,KAAK,CAAC,CAAA;QACjB,MAAM,EAAE,CAAC,KAAK,CAAC,CAAA;IACjB,CAAC,CAAA;IAED,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,CACxB;MAAA,CAAC,gBAAgB,CACf,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC,CACnC,MAAM,CAAC,CAAC,YAAY,CAAC,CACrB,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,IAAI,KAAK,CAAC,EAEZ;MAAA,CAAC,OAAO,IAAI,cAAc,IAAI,CAC5B,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,iBAAiB,EAAE,uBAAuB,CAAC,CAAC,CAC/D;UAAA,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,EAC5B;QAAA,EAAE,IAAI,CAAC,CACR,CACH;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC;AAED,MAAM,SAAS,GAAG,CAChB,KAAqB,EACrB,MAAsB,EACtB,YAA6C,EAC7C,EAAE;IACF,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAE7B,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,iBAAiB,EAAE;YACjB,QAAQ,EAAE,UAAU;YACpB,GAAG,EAAE,CAAC;YACN,IAAI,EAAE,CAAC;YACP,eAAe,EAAE,MAAM,CAAC,mBAAmB;YAC3C,YAAY;YACZ,KAAK;YACL,MAAM;SACP;QACD,KAAK,EAAE;YACL,eAAe,EAAE,MAAM,CAAC,mBAAmB;YAC3C,KAAK;YACL,MAAM;SACP;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import { noop } from 'lodash'\nimport React, { useState } from 'react'\nimport {\n  AnimatableNumericValue,\n  DimensionValue,\n  Image as ReactNativeImage,\n  ImageProps as ReactNativeImageProps,\n  StyleSheet,\n  View,\n  ViewStyle,\n} from 'react-native'\nimport { useTheme } from '../../hooks'\nimport { Spinner } from './spinner'\n\nexport interface ImageProps extends ReactNativeImageProps {\n  /**\n   * Should the image show the loading indicator by default.\n   */\n  defaultLoading?: boolean\n  /**\n   * Turn on or off loading spinner.\n   */\n  loadingEnabled?: boolean\n  /**\n   * Size of the loading spinner.\n   */\n  loaderSize?: number\n  /**\n   * Style object for the preload background.\n   */\n  loadingBackgroundStyles?: ViewStyle\n  /**\n   * Style the outer View of the image.\n   */\n  wrapperStyle?: ViewStyle\n}\n\nexport function Image({\n  source,\n  onLoad = noop,\n  defaultLoading = true,\n  loadingEnabled = true,\n  loaderSize = 24,\n  loadingBackgroundStyles,\n  style = {},\n  wrapperStyle = {},\n  ...props\n}: ImageProps) {\n  const [loading, setLoading] = useState(defaultLoading)\n\n  const imageStyles = StyleSheet.flatten(style)\n  const { width = '100%', height = '100%', borderRadius = 0 } = imageStyles || {}\n  const styles = useStyles(width, height, borderRadius)\n\n  const handleOnLoad = (event: any) => {\n    setLoading(false)\n    onLoad?.(event)\n  }\n\n  return (\n    <View style={wrapperStyle}>\n      <ReactNativeImage\n        style={[styles.image, imageStyles]}\n        onLoad={handleOnLoad}\n        source={source}\n        {...props}\n      />\n      {loading && loadingEnabled && (\n        <View style={[styles.loadingBackground, loadingBackgroundStyles]}>\n          <Spinner size={loaderSize} />\n        </View>\n      )}\n    </View>\n  )\n}\n\nconst useStyles = (\n  width: DimensionValue,\n  height: DimensionValue,\n  borderRadius: AnimatableNumericValue | string\n) => {\n  const { colors } = useTheme()\n\n  return StyleSheet.create({\n    loadingBackground: {\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      backgroundColor: colors.fillColorNeutral070,\n      borderRadius,\n      width,\n      height,\n    },\n    image: {\n      backgroundColor: colors.fillColorNeutral070,\n      width,\n      height,\n    },\n  })\n}\n"]}
+{"version":3,"file":"image.js","sourceRoot":"","sources":["../../../src/components/display/image.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACvC,OAAO,EAGL,KAAK,IAAI,gBAAgB,EAEzB,UAAU,EACV,IAAI,GAEL,MAAM,cAAc,CAAA;AACrB,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AAkCnC,MAAM,UAAU,KAAK,CAAC,EACpB,MAAM,EACN,MAAM,GAAG,IAAI,EACb,cAAc,GAAG,IAAI,EACrB,cAAc,GAAG,IAAI,EACrB,UAAU,GAAG,EAAE,EACf,uBAAuB,EACvB,KAAK,GAAG,EAAE,EACV,YAAY,GAAG,EAAE,EACjB,GAAG,EACH,GAAG,KAAK,EACG;IACX,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,cAAc,CAAC,CAAA;IAEtD,MAAM,WAAW,GAAG,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC,CAAA;IAC7C,MAAM,EAAE,KAAK,GAAG,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,YAAY,GAAG,CAAC,EAAE,GAAG,WAAW,IAAI,EAAE,CAAA;IAC/E,MAAM,MAAM,GAAG,SAAS,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,YAAY,EAAE,CAAC,CAAA;IAEzD,MAAM,YAAY,GAAG,CAAC,KAAU,EAAE,EAAE;QAClC,UAAU,CAAC,KAAK,CAAC,CAAA;QACjB,MAAM,EAAE,CAAC,KAAK,CAAC,CAAA;IACjB,CAAC,CAAA;IAED,OAAO,CACL,CAAC,IAAI,CACH,KAAK,CAAC,CAAC,YAAY,CAAC,CACpB,UAAU,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CACzB,iBAAiB,CAAC,OAAO,CACzB,kBAAkB,CAAC,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAEtC;MAAA,CAAC,gBAAgB,CACf,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC,CACnC,MAAM,CAAC,CAAC,YAAY,CAAC,CACrB,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CACxB,IAAI,KAAK,CAAC,EAEZ;MAAA,CAAC,OAAO,IAAI,cAAc,IAAI,CAC5B,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,iBAAiB,EAAE,uBAAuB,CAAC,CAAC,CAC/D;UAAA,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,EAC5B;QAAA,EAAE,IAAI,CAAC,CACR,CACH;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC;AAYD,MAAM,SAAS,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,YAAY,EAAU,EAAE,EAAE;IAC5D,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAE7B,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,iBAAiB,EAAE;YACjB,QAAQ,EAAE,UAAU;YACpB,GAAG,EAAE,CAAC;YACN,IAAI,EAAE,CAAC;YACP,eAAe,EAAE,MAAM,CAAC,mBAAmB;YAC3C,YAAY;YACZ,KAAK;YACL,MAAM;SACP;QACD,KAAK,EAAE;YACL,eAAe,EAAE,MAAM,CAAC,mBAAmB;YAC3C,KAAK;YACL,MAAM;SACP;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import { noop } from 'lodash'\nimport React, { useState } from 'react'\nimport {\n  AnimatableNumericValue,\n  DimensionValue,\n  Image as ReactNativeImage,\n  ImageProps as ReactNativeImageProps,\n  StyleSheet,\n  View,\n  ViewStyle,\n} from 'react-native'\nimport { useTheme } from '../../hooks'\nimport { Spinner } from './spinner'\n\n// =================================\n// ====== Component ================\n// =================================\n\nexport interface ImageProps extends ReactNativeImageProps {\n  /**\n   * Describes the image to screen-readers and marks the image as `accessible`.\n   * Passing an empty string will hide the image from screen-readers.\n   */\n  alt: string\n  /**\n   * Shows the image's loading spinner right away. Enabled by default.\n   */\n  defaultLoading?: boolean\n  /**\n   * Turn on or off loading spinner.\n   */\n  loadingEnabled?: boolean\n  /**\n   * Size of the loading spinner.\n   */\n  loaderSize?: number\n  /**\n   * Style object for the preload background.\n   */\n  loadingBackgroundStyles?: ViewStyle\n  /**\n   * Style the outer View of the image.\n   */\n  wrapperStyle?: ViewStyle\n}\n\nexport function Image({\n  source,\n  onLoad = noop,\n  defaultLoading = true,\n  loadingEnabled = true,\n  loaderSize = 24,\n  loadingBackgroundStyles,\n  style = {},\n  wrapperStyle = {},\n  alt,\n  ...props\n}: ImageProps) {\n  const [loading, setLoading] = useState(defaultLoading)\n\n  const imageStyles = StyleSheet.flatten(style)\n  const { width = '100%', height = '100%', borderRadius = 0 } = imageStyles || {}\n  const styles = useStyles({ width, height, borderRadius })\n\n  const handleOnLoad = (event: any) => {\n    setLoading(false)\n    onLoad?.(event)\n  }\n\n  return (\n    <View\n      style={wrapperStyle}\n      accessible={Boolean(alt)}\n      accessibilityRole=\"image\"\n      accessibilityState={{ busy: loading }}\n    >\n      <ReactNativeImage\n        style={[styles.image, imageStyles]}\n        onLoad={handleOnLoad}\n        source={source}\n        alt={loading ? '' : alt}\n        {...props}\n      />\n      {loading && loadingEnabled && (\n        <View style={[styles.loadingBackground, loadingBackgroundStyles]}>\n          <Spinner size={loaderSize} />\n        </View>\n      )}\n    </View>\n  )\n}\n\n// =================================\n// ====== Styles ===================\n// =================================\n\ninterface Styles {\n  width: DimensionValue\n  height: DimensionValue\n  borderRadius: AnimatableNumericValue | string\n}\n\nconst useStyles = ({ width, height, borderRadius }: Styles) => {\n  const { colors } = useTheme()\n\n  return StyleSheet.create({\n    loadingBackground: {\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      backgroundColor: colors.fillColorNeutral070,\n      borderRadius,\n      width,\n      height,\n    },\n    image: {\n      backgroundColor: colors.fillColorNeutral070,\n      width,\n      height,\n    },\n  })\n}\n"]}

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

@@ -1,8 +1,11 @@
-export { Avatar } from './avatar';
-export { AvatarGroup } from './avatar_group';
-export { Heading } from './heading';
-export { Icon } from './icon';
-export { Image, ImageProps } from './image';
-export { Spinner } from './spinner';
-export { Text } from './text';
+export * from './avatar';
+export * from './avatar_group';
+export * from './button';
+export * from './heading';
+export * from './icon';
+export * from './image';
+export * from './spinner';
+export * from './text';
+export * from './text_button';
+export * from './text_inline_button';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/display/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,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,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,QAAQ,CAAA;AACtB,cAAc,eAAe,CAAA;AAC7B,cAAc,sBAAsB,CAAA"}

package/build/components/display/index.js

@@ -1,8 +1,11 @@
-export { Avatar } from './avatar';
-export { AvatarGroup } from './avatar_group';
-export { Heading } from './heading';
-export { Icon } from './icon';
-export { Image } from './image';
-export { Spinner } from './spinner';
-export { Text } from './text';
+export * from './avatar';
+export * from './avatar_group';
+export * from './button';
+export * from './heading';
+export * from './icon';
+export * from './image';
+export * from './spinner';
+export * from './text';
+export * from './text_button';
+export * from './text_inline_button';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/display/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,KAAK,EAAc,MAAM,SAAS,CAAA;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA","sourcesContent":["export { Avatar } from './avatar'\nexport { AvatarGroup } from './avatar_group'\nexport { Heading } from './heading'\nexport { Icon } from './icon'\nexport { Image, ImageProps } from './image'\nexport { Spinner } from './spinner'\nexport { Text } from './text'\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,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"]}

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

@@ -4,7 +4,11 @@ interface SpinnerProps {
      *  Size of the spinner in px
      * */
     size?: number;
+    /**
+     * Specifies the maximum size spinner can scale to if the device's font-size is increased.
+     */
+    maxFontSizeMultiplier?: number;
 }
-export declare function Spinner({ size }: SpinnerProps): React.JSX.Element;
+export declare function Spinner({ size, maxFontSizeMultiplier, }: SpinnerProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=spinner.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../../src/components/display/spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAIhD,UAAU,YAAY;IACpB;;SAEK;IACL,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,wBAAgB,OAAO,CAAC,EAAE,IAAS,EAAE,EAAE,YAAY,qBAoClD"}
+{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../../src/components/display/spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAchD,UAAU,YAAY;IACpB;;SAEK;IACL,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAA;CAC/B;AAED,wBAAgB,OAAO,CAAC,EACtB,IAAS,EACT,qBAA+C,GAChD,EAAE,YAAY,qBAoCd"}

package/build/components/display/spinner.js

@@ -1,7 +1,11 @@
 import React, { useEffect, useRef } from 'react';
 import { Animated, Easing, StyleSheet, View } from 'react-native';
-import { useTheme } from '../../hooks';
-export function Spinner({ size = 20 }) {
+import { useFontScale, useTheme } from '../../hooks';
+// =================================
+// ====== Constants ================
+// =================================
+const PREVENT_SCALING_DEFAULT = 1;
+export function Spinner({ size = 20, maxFontSizeMultiplier = PREVENT_SCALING_DEFAULT, }) {
     const rotation = useRef(new Animated.Value(0)).current;
     const animation = Animated.loop(Animated.timing(rotation, {
         toValue: 1,
@@ -13,7 +17,7 @@ export function Spinner({ size = 20 }) {
         inputRange: [0, 1],
         outputRange: ['0deg', '360deg'],
     });
-    const styles = useStyles(rotateValue, size);
+    const styles = useStyles({ maxFontSizeMultiplier, rotateValue, size });
     useEffect(() => {
         animation.start();
         return () => animation.stop();
@@ -28,8 +32,10 @@ export function Spinner({ size = 20 }) {
       </Animated.View>
     </View>);
 }
-const useStyles = (rotate, size) => {
+const useStyles = ({ maxFontSizeMultiplier, rotateValue, size }) => {
     const { colors } = useTheme();
+    const fontScale = useFontScale({ maxFontSizeMultiplier });
+    const scalableSize = size * fontScale;
     return StyleSheet.create({
         container: {
             width: '100%',
@@ -43,15 +49,15 @@ const useStyles = (rotate, size) => {
             opacity: 0.7,
         },
         animatedContainer: {
-            width: size,
-            height: size,
-            borderRadius: size / 2,
-            transform: [{ rotate }],
+            width: scalableSize,
+            height: scalableSize,
+            borderRadius: scalableSize / 2,
+            transform: [{ rotate: rotateValue }],
         },
         circle: {
-            width: size,
-            height: size,
-            borderRadius: size / 2,
+            width: scalableSize,
+            height: scalableSize,
+            borderRadius: scalableSize / 2,
             borderStyle: 'solid',
             borderWidth: 3,
         },
@@ -68,8 +74,8 @@ const useStyles = (rotate, size) => {
             position: 'absolute',
             top: 0,
             left: 0,
-            width: size / 2,
-            height: size / 2,
+            width: scalableSize / 2,
+            height: scalableSize / 2,
             overflow: 'hidden',
             zIndex: 200,
         },

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

@@ -1 +1 @@
-{"version":3,"file":"spinner.js","sourceRoot":"","sources":["../../../src/components/display/spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAStC,MAAM,UAAU,OAAO,CAAC,EAAE,IAAI,GAAG,EAAE,EAAgB;IACjD,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAA;IAEtD,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAC7B,QAAQ,CAAC,MAAM,CAAC,QAAQ,EAAE;QACxB,OAAO,EAAE,CAAC;QACV,QAAQ,EAAE,IAAI;QACd,MAAM,EAAE,MAAM,CAAC,MAAM;QACrB,eAAe,EAAE,IAAI;KACtB,CAAC,CACH,CAAA;IAED,MAAM,WAAW,GAAG,QAAQ,CAAC,WAAW,CAAC;QACvC,UAAU,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;QAClB,WAAW,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC;KAChC,CAAC,CAAA;IAEF,MAAM,MAAM,GAAG,SAAS,CAAC,WAAW,EAAE,IAAI,CAAC,CAAA;IAE3C,SAAS,CAAC,GAAG,EAAE;QACb,SAAS,CAAC,KAAK,EAAE,CAAA;QACjB,OAAO,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,EAAE,CAAA;IAC/B,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;IAEf,SAAS,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;IAEvD,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAC5B;MAAA,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAC7C;QAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAC3B;UAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC,EAC/C;QAAA,EAAE,IAAI,CACN;QAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,EAC7C;MAAA,EAAE,QAAQ,CAAC,IAAI,CACjB;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC;AAED,MAAM,SAAS,GAAG,CAAC,MAAuD,EAAE,IAAY,EAAE,EAAE;IAC1F,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAE7B,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,SAAS,EAAE;YACT,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;YACd,QAAQ,EAAE,UAAU;YACpB,GAAG,EAAE,CAAC;YACN,IAAI,EAAE,CAAC;YACP,MAAM,EAAE,GAAG;YACX,cAAc,EAAE,QAAQ;YACxB,UAAU,EAAE,QAAQ;YACpB,OAAO,EAAE,GAAG;SACb;QACD,iBAAiB,EAAE;YACjB,KAAK,EAAE,IAAI;YACX,MAAM,EAAE,IAAI;YACZ,YAAY,EAAE,IAAI,GAAG,CAAC;YACtB,SAAS,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC;SACxB;QACD,MAAM,EAAE;YACN,KAAK,EAAE,IAAI;YACX,MAAM,EAAE,IAAI;YACZ,YAAY,EAAE,IAAI,GAAG,CAAC;YACtB,WAAW,EAAE,OAAO;YACpB,WAAW,EAAE,CAAC;SACf;QACD,OAAO,EAAE;YACP,QAAQ,EAAE,UAAU;YACpB,GAAG,EAAE,CAAC;YACN,IAAI,EAAE,CAAC;YACP,WAAW,EAAE,MAAM,CAAC,mBAAmB;SACxC;QACD,KAAK,EAAE;YACL,WAAW,EAAE,MAAM,CAAC,uBAAuB;SAC5C;QACD,QAAQ,EAAE;YACR,QAAQ,EAAE,UAAU;YACpB,GAAG,EAAE,CAAC;YACN,IAAI,EAAE,CAAC;YACP,KAAK,EAAE,IAAI,GAAG,CAAC;YACf,MAAM,EAAE,IAAI,GAAG,CAAC;YAChB,QAAQ,EAAE,QAAQ;YAClB,MAAM,EAAE,GAAG;SACZ;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import React, { useEffect, useRef } from 'react'\nimport { Animated, Easing, StyleSheet, View } from 'react-native'\nimport { useTheme } from '../../hooks'\n\ninterface SpinnerProps {\n  /**\n   *  Size of the spinner in px\n   * */\n  size?: number\n}\n\nexport function Spinner({ size = 20 }: SpinnerProps) {\n  const rotation = useRef(new Animated.Value(0)).current\n\n  const animation = Animated.loop(\n    Animated.timing(rotation, {\n      toValue: 1,\n      duration: 1000,\n      easing: Easing.linear,\n      useNativeDriver: true,\n    })\n  )\n\n  const rotateValue = rotation.interpolate({\n    inputRange: [0, 1],\n    outputRange: ['0deg', '360deg'],\n  })\n\n  const styles = useStyles(rotateValue, size)\n\n  useEffect(() => {\n    animation.start()\n    return () => animation.stop()\n  }, [animation])\n\n  useEffect(() => () => rotation.setValue(0), [rotation])\n\n  return (\n    <View style={styles.container}>\n      <Animated.View style={styles.animatedContainer}>\n        <View style={styles.clipping}>\n          <View style={[styles.circle, styles.spinner]} />\n        </View>\n        <View style={[styles.circle, styles.track]} />\n      </Animated.View>\n    </View>\n  )\n}\n\nconst useStyles = (rotate: Animated.AnimatedInterpolation<string | number>, size: number) => {\n  const { colors } = useTheme()\n\n  return StyleSheet.create({\n    container: {\n      width: '100%',\n      height: '100%',\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      zIndex: 200,\n      justifyContent: 'center',\n      alignItems: 'center',\n      opacity: 0.7,\n    },\n    animatedContainer: {\n      width: size,\n      height: size,\n      borderRadius: size / 2,\n      transform: [{ rotate }],\n    },\n    circle: {\n      width: size,\n      height: size,\n      borderRadius: size / 2,\n      borderStyle: 'solid',\n      borderWidth: 3,\n    },\n    spinner: {\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      borderColor: colors.fillColorNeutral020,\n    },\n    track: {\n      borderColor: colors.fillColorNeutral050Base,\n    },\n    clipping: {\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      width: size / 2,\n      height: size / 2,\n      overflow: 'hidden',\n      zIndex: 200,\n    },\n  })\n}\n"]}
+{"version":3,"file":"spinner.js","sourceRoot":"","sources":["../../../src/components/display/spinner.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect, useRef } from 'react'\nimport { Animated, Easing, StyleSheet, View } from 'react-native'\nimport { useFontScale, useTheme } from '../../hooks'\n\n// =================================\n// ====== Constants ================\n// =================================\n\nconst PREVENT_SCALING_DEFAULT = 1\n\n// =================================\n// ====== Component ================\n// =================================\n\ninterface SpinnerProps {\n  /**\n   *  Size of the spinner in px\n   * */\n  size?: number\n  /**\n   * Specifies the maximum size spinner can scale to if the device's font-size is increased.\n   */\n  maxFontSizeMultiplier?: number\n}\n\nexport function Spinner({\n  size = 20,\n  maxFontSizeMultiplier = PREVENT_SCALING_DEFAULT,\n}: SpinnerProps) {\n  const rotation = useRef(new Animated.Value(0)).current\n\n  const animation = Animated.loop(\n    Animated.timing(rotation, {\n      toValue: 1,\n      duration: 1000,\n      easing: Easing.linear,\n      useNativeDriver: true,\n    })\n  )\n\n  const rotateValue = rotation.interpolate({\n    inputRange: [0, 1],\n    outputRange: ['0deg', '360deg'],\n  })\n\n  const styles = useStyles({ maxFontSizeMultiplier, rotateValue, size })\n\n  useEffect(() => {\n    animation.start()\n    return () => animation.stop()\n  }, [animation])\n\n  useEffect(() => () => rotation.setValue(0), [rotation])\n\n  return (\n    <View style={styles.container}>\n      <Animated.View style={styles.animatedContainer}>\n        <View style={styles.clipping}>\n          <View style={[styles.circle, styles.spinner]} />\n        </View>\n        <View style={[styles.circle, styles.track]} />\n      </Animated.View>\n    </View>\n  )\n}\n\n// =================================\n// ====== Styles ===================\n// =================================\n\ninterface Styles {\n  maxFontSizeMultiplier: number | undefined\n  rotateValue: Animated.AnimatedInterpolation<string | number>\n  size: number\n}\n\nconst useStyles = ({ maxFontSizeMultiplier, rotateValue, size }: Styles) => {\n  const { colors } = useTheme()\n  const fontScale = useFontScale({ maxFontSizeMultiplier })\n  const scalableSize = size * fontScale\n\n  return StyleSheet.create({\n    container: {\n      width: '100%',\n      height: '100%',\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      zIndex: 200,\n      justifyContent: 'center',\n      alignItems: 'center',\n      opacity: 0.7,\n    },\n    animatedContainer: {\n      width: scalableSize,\n      height: scalableSize,\n      borderRadius: scalableSize / 2,\n      transform: [{ rotate: rotateValue }],\n    },\n    circle: {\n      width: scalableSize,\n      height: scalableSize,\n      borderRadius: scalableSize / 2,\n      borderStyle: 'solid',\n      borderWidth: 3,\n    },\n    spinner: {\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      borderColor: colors.fillColorNeutral020,\n    },\n    track: {\n      borderColor: colors.fillColorNeutral050Base,\n    },\n    clipping: {\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      width: scalableSize / 2,\n      height: scalableSize / 2,\n      overflow: 'hidden',\n      zIndex: 200,\n    },\n  })\n}\n"]}

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

@@ -1,7 +1,17 @@
 import React from 'react';
-import { TextProps as ReactNativeTextProps } from 'react-native';
-interface TextProps extends ReactNativeTextProps {
-    variant?: 'plain' | 'secondary' | 'tertiary' | 'footnote';
+import type { TextProps as ReactNativeTextProps } from 'react-native';
+declare const VARIANTS: {
+    readonly plain: "plain";
+    readonly secondary: "secondary";
+    readonly tertiary: "tertiary";
+    readonly footnote: "footnote";
+};
+type VariantUnion = (typeof VARIANTS)[keyof typeof VARIANTS];
+export interface TextProps extends ReactNativeTextProps {
+    /**
+     * Changes the styles and size of the text.
+     */
+    variant?: VariantUnion;
 }
 export declare function Text({ style, variant, children, ...props }: TextProps): React.JSX.Element;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../src/components/display/text.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAIL,SAAS,IAAI,oBAAoB,EAClC,MAAM,cAAc,CAAA;AAGrB,UAAU,SAAU,SAAQ,oBAAoB;IAC9C,OAAO,CAAC,EAAE,OAAO,GAAG,WAAW,GAAG,UAAU,GAAG,UAAU,CAAA;CAC1D;AAED,wBAAgB,IAAI,CAAC,EAAE,KAAK,EAAE,OAAiB,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,qBAc/E"}
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../src/components/display/text.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAa,SAAS,IAAI,oBAAoB,EAAE,MAAM,cAAc,CAAA;AAOhF,QAAA,MAAM,QAAQ;;;;;CAKJ,CAAA;AAEV,KAAK,YAAY,GAAG,CAAC,OAAO,QAAQ,CAAC,CAAC,MAAM,OAAO,QAAQ,CAAC,CAAA;AAO5D,MAAM,WAAW,SAAU,SAAQ,oBAAoB;IACrD;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,CAAA;CACvB;AAED,wBAAgB,IAAI,CAAC,EAAE,KAAK,EAAE,OAAiB,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,qBAc/E"}

package/build/components/display/text.js

@@ -1,19 +1,31 @@
 import { useTheme } from '../../hooks';
 import React from 'react';
-import { Platform, StyleSheet, Text as ReactNativeText, } from 'react-native';
+import { Platform, StyleSheet, Text as ReactNativeText } from 'react-native';
 import { tokens } from '../../vendor/tapestry/tokens';
+// =================================
+// ====== Constants ================
+// =================================
+const VARIANTS = {
+    plain: 'plain',
+    secondary: 'secondary',
+    tertiary: 'tertiary',
+    footnote: 'footnote',
+};
 export function Text({ style, variant = 'plain', children, ...props }) {
     const styles = useStyles();
     const variantStyleMap = {
-        plain: styles.plain,
-        secondary: styles.secondary,
-        tertiary: styles.tertiary,
-        footnote: styles.footnote,
+        [VARIANTS.plain]: styles.plain,
+        [VARIANTS.secondary]: styles.secondary,
+        [VARIANTS.tertiary]: styles.tertiary,
+        [VARIANTS.footnote]: styles.footnote,
     };
     return (<ReactNativeText style={[styles.global, variantStyleMap[variant], style]} {...props}>
       {children}
     </ReactNativeText>);
 }
+// =================================
+// ====== Styles ===================
+// =================================
 const useStyles = () => {
     const { colors } = useTheme();
     return StyleSheet.create({

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

@@ -1 +1 @@
-{"version":3,"file":"text.js","sourceRoot":"","sources":["../../../src/components/display/text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EACL,QAAQ,EACR,UAAU,EACV,IAAI,IAAI,eAAe,GAExB,MAAM,cAAc,CAAA;AACrB,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAA;AAMrD,MAAM,UAAU,IAAI,CAAC,EAAE,KAAK,EAAE,OAAO,GAAG,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAa;IAC9E,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,MAAM,eAAe,GAAG;QACtB,KAAK,EAAE,MAAM,CAAC,KAAK;QACnB,SAAS,EAAE,MAAM,CAAC,SAAS;QAC3B,QAAQ,EAAE,MAAM,CAAC,QAAQ;QACzB,QAAQ,EAAE,MAAM,CAAC,QAAQ;KAC1B,CAAA;IAED,OAAO,CACL,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,OAAO,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,CAClF;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,eAAe,CAAC,CACnB,CAAA;AACH,CAAC;AAED,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAC7B,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,MAAM,EAAE;YACN,UAAU,EAAE,QAAQ,CAAC,MAAM,CAAC;gBAC1B,GAAG,EAAE,QAAQ;gBACb,OAAO,EAAE,QAAQ;aAClB,CAAC;SACH;QACD,KAAK,EAAE;YACL,KAAK,EAAE,MAAM,CAAC,uBAAuB;YACrC,QAAQ,EAAE,MAAM,CAAC,UAAU;YAC3B,UAAU,EAAE,EAAE;SACf;QACD,SAAS,EAAE;YACT,KAAK,EAAE,MAAM,CAAC,uBAAuB;YACrC,QAAQ,EAAE,EAAE,EAAE,uCAAuC;YACrD,UAAU,EAAE,EAAE;SACf;QACD,QAAQ,EAAE;YACR,KAAK,EAAE,MAAM,CAAC,uBAAuB;YACrC,QAAQ,EAAE,MAAM,CAAC,UAAU;YAC3B,UAAU,EAAE,EAAE;SACf;QACD,QAAQ,EAAE;YACR,KAAK,EAAE,MAAM,CAAC,yBAAyB;YACvC,QAAQ,EAAE,EAAE,EAAE,uCAAuC;YACrD,UAAU,EAAE,EAAE;SACf;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import { useTheme } from '../../hooks'\nimport React from 'react'\nimport {\n  Platform,\n  StyleSheet,\n  Text as ReactNativeText,\n  TextProps as ReactNativeTextProps,\n} from 'react-native'\nimport { tokens } from '../../vendor/tapestry/tokens'\n\ninterface TextProps extends ReactNativeTextProps {\n  variant?: 'plain' | 'secondary' | 'tertiary' | 'footnote'\n}\n\nexport function Text({ style, variant = 'plain', children, ...props }: TextProps) {\n  const styles = useStyles()\n  const variantStyleMap = {\n    plain: styles.plain,\n    secondary: styles.secondary,\n    tertiary: styles.tertiary,\n    footnote: styles.footnote,\n  }\n\n  return (\n    <ReactNativeText style={[styles.global, variantStyleMap[variant], style]} {...props}>\n      {children}\n    </ReactNativeText>\n  )\n}\n\nconst useStyles = () => {\n  const { colors } = useTheme()\n  return StyleSheet.create({\n    global: {\n      fontFamily: Platform.select({\n        ios: 'System',\n        android: 'normal',\n      }),\n    },\n    plain: {\n      color: colors.textColorDefaultPrimary,\n      fontSize: tokens.fontSizeMd,\n      lineHeight: 24,\n    },\n    secondary: {\n      color: colors.textColorDefaultPrimary,\n      fontSize: 15, // TODO: Check with UX on correct token\n      lineHeight: 22,\n    },\n    tertiary: {\n      color: colors.textColorDefaultPrimary,\n      fontSize: tokens.fontSizeSm,\n      lineHeight: 20,\n    },\n    footnote: {\n      color: colors.textColorDefaultSecondary,\n      fontSize: 13, // TODO: Check with UX on correct token\n      lineHeight: 16,\n    },\n  })\n}\n"]}
+{"version":3,"file":"text.js","sourceRoot":"","sources":["../../../src/components/display/text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,IAAI,IAAI,eAAe,EAAE,MAAM,cAAc,CAAA;AAE5E,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAA;AAErD,oCAAoC;AACpC,oCAAoC;AACpC,oCAAoC;AAEpC,MAAM,QAAQ,GAAG;IACf,KAAK,EAAE,OAAO;IACd,SAAS,EAAE,WAAW;IACtB,QAAQ,EAAE,UAAU;IACpB,QAAQ,EAAE,UAAU;CACZ,CAAA;AAgBV,MAAM,UAAU,IAAI,CAAC,EAAE,KAAK,EAAE,OAAO,GAAG,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAa;IAC9E,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,MAAM,eAAe,GAAkB;QACrC,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC,KAAK;QAC9B,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC,SAAS;QACtC,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,QAAQ;QACpC,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,QAAQ;KACrC,CAAA;IAED,OAAO,CACL,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,OAAO,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,CAClF;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,eAAe,CAAC,CACnB,CAAA;AACH,CAAC;AAED,oCAAoC;AACpC,oCAAoC;AACpC,oCAAoC;AAEpC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAC7B,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,MAAM,EAAE;YACN,UAAU,EAAE,QAAQ,CAAC,MAAM,CAAC;gBAC1B,GAAG,EAAE,QAAQ;gBACb,OAAO,EAAE,QAAQ;aAClB,CAAC;SACH;QACD,KAAK,EAAE;YACL,KAAK,EAAE,MAAM,CAAC,uBAAuB;YACrC,QAAQ,EAAE,MAAM,CAAC,UAAU;YAC3B,UAAU,EAAE,EAAE;SACf;QACD,SAAS,EAAE;YACT,KAAK,EAAE,MAAM,CAAC,uBAAuB;YACrC,QAAQ,EAAE,EAAE,EAAE,uCAAuC;YACrD,UAAU,EAAE,EAAE;SACf;QACD,QAAQ,EAAE;YACR,KAAK,EAAE,MAAM,CAAC,uBAAuB;YACrC,QAAQ,EAAE,MAAM,CAAC,UAAU;YAC3B,UAAU,EAAE,EAAE;SACf;QACD,QAAQ,EAAE;YACR,KAAK,EAAE,MAAM,CAAC,yBAAyB;YACvC,QAAQ,EAAE,EAAE,EAAE,uCAAuC;YACrD,UAAU,EAAE,EAAE;SACf;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import { useTheme } from '../../hooks'\nimport React from 'react'\nimport { Platform, StyleSheet, Text as ReactNativeText } from 'react-native'\nimport type { TextStyle, TextProps as ReactNativeTextProps } from 'react-native'\nimport { tokens } from '../../vendor/tapestry/tokens'\n\n// =================================\n// ====== Constants ================\n// =================================\n\nconst VARIANTS = {\n  plain: 'plain',\n  secondary: 'secondary',\n  tertiary: 'tertiary',\n  footnote: 'footnote',\n} as const\n\ntype VariantUnion = (typeof VARIANTS)[keyof typeof VARIANTS]\ntype VariantStyles = Record<VariantUnion, TextStyle>\n\n// =================================\n// ====== Component ================\n// =================================\n\nexport interface TextProps extends ReactNativeTextProps {\n  /**\n   * Changes the styles and size of the text.\n   */\n  variant?: VariantUnion\n}\n\nexport function Text({ style, variant = 'plain', children, ...props }: TextProps) {\n  const styles = useStyles()\n  const variantStyleMap: VariantStyles = {\n    [VARIANTS.plain]: styles.plain,\n    [VARIANTS.secondary]: styles.secondary,\n    [VARIANTS.tertiary]: styles.tertiary,\n    [VARIANTS.footnote]: styles.footnote,\n  }\n\n  return (\n    <ReactNativeText style={[styles.global, variantStyleMap[variant], style]} {...props}>\n      {children}\n    </ReactNativeText>\n  )\n}\n\n// =================================\n// ====== Styles ===================\n// =================================\n\nconst useStyles = () => {\n  const { colors } = useTheme()\n  return StyleSheet.create({\n    global: {\n      fontFamily: Platform.select({\n        ios: 'System',\n        android: 'normal',\n      }),\n    },\n    plain: {\n      color: colors.textColorDefaultPrimary,\n      fontSize: tokens.fontSizeMd,\n      lineHeight: 24,\n    },\n    secondary: {\n      color: colors.textColorDefaultPrimary,\n      fontSize: 15, // TODO: Check with UX on correct token\n      lineHeight: 22,\n    },\n    tertiary: {\n      color: colors.textColorDefaultPrimary,\n      fontSize: tokens.fontSizeSm,\n      lineHeight: 20,\n    },\n    footnote: {\n      color: colors.textColorDefaultSecondary,\n      fontSize: 13, // TODO: Check with UX on correct token\n      lineHeight: 16,\n    },\n  })\n}\n"]}

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import type { PressableProps } from 'react-native';
+import type { TextProps } from './text';
+import type { AppearanceUnion } from './button_color_utils';
+interface TextButtonProps extends PressableProps {
+    /**
+     * Specifies whether fonts should be scaled down automatically to fit given style constraints.
+     */
+    adjustsFontSizeToFit?: boolean;
+    /**
+     * Specifies whether fonts should scale to respect the device's text size accessibility settings. The default is true.
+     */
+    allowFontScaling?: boolean;
+    /**
+     * Updates the button's colors
+     */
+    appearance?: AppearanceUnion;
+    /**
+     * Renders text within a `Text`
+     */
+    children?: TextProps['children'];
+    /**
+     * Specifies the maximum size a font can reach when allowFontScaling is enabled.
+     */
+    maxFontSizeMultiplier?: number;
+    /**
+     * Specifies smallest possible scale a font can reach when adjustsFontSizeToFit is enabled. (values 0.01-1.0).
+     */
+    minimumFontScale?: number;
+    /**
+     * Fill buttons are visually more propmonitent then outline buttons
+     */
+    variant?: TextProps['variant'];
+}
+export declare function TextButton({ adjustsFontSizeToFit, allowFontScaling, appearance, disabled, children, maxFontSizeMultiplier, minimumFontScale, variant, ...props }: TextButtonProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=text_button.d.ts.map

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

@@ -0,0 +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"}

package/build/components/display/text_button.js

@@ -0,0 +1,36 @@
+import React from 'react';
+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 }) {
+    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}>
+      <Text adjustsFontSizeToFit={adjustsFontSizeToFit} allowFontScaling={allowFontScaling} maxFontSizeMultiplier={maxFontSizeMultiplier} minimumFontScale={minimumFontScale} numberOfLines={1} style={[styles.text, disabled && styles.disabled]} variant={variant}>
+        {children}
+      </Text>
+    </Pressable>);
+}
+// =================================
+// ====== Styles ===================
+// =================================
+const useStyles = ({ appearance = 'primary', disabled = false }) => {
+    const { colors } = useTheme();
+    const colorKey = getColorKey({ disabled, appearance });
+    const colorOptionMap = useColorOptionMap();
+    return StyleSheet.create({
+        text: {
+            fontWeight: platformFontWeightMedium,
+            color: colorOptionMap[colorKey],
+        },
+        disabled: {
+            color: colors.textColorDefaultDisabled,
+        },
+        pressed: {
+            opacity: 0.5,
+        },
+    });
+};
+//# sourceMappingURL=text_button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"text_button.js","sourceRoot":"","sources":["../../../src/components/display/text_button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAEpD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,OAAO,EAAE,wBAAwB,EAAE,MAAM,aAAa,CAAA;AACtD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AAsCrE,MAAM,UAAU,UAAU,CAAC,EACzB,oBAAoB,GAAG,KAAK,EAC5B,gBAAgB,GAAG,IAAI,EACvB,UAAU,GAAG,SAAS,EACtB,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,qBAAqB,EACrB,gBAAgB,EAChB,OAAO,GAAG,OAAO,EACjB,GAAG,KAAK,EACQ;IAChB,MAAM,MAAM,GAAG,SAAS,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,CAAA;IAElD,OAAO,CACL,CAAC,SAAS,CACR,iBAAiB,CAAC,QAAQ,CAC1B,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,KAAK,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,OAAO,IAAI,MAAM,CAAC,OAAO,CAAC,CAAC,yDAAyD;KAC5G,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,IAAI,CACH,oBAAoB,CAAC,CAAC,oBAAoB,CAAC,CAC3C,gBAAgB,CAAC,CAAC,gBAAgB,CAAC,CACnC,qBAAqB,CAAC,CAAC,qBAAqB,CAAC,CAC7C,gBAAgB,CAAC,CAAC,gBAAgB,CAAC,CACnC,aAAa,CAAC,CAAC,CAAC,CAAC,CACjB,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,QAAQ,IAAI,MAAM,CAAC,QAAQ,CAAC,CAAC,CAClD,OAAO,CAAC,CAAC,OAAO,CAAC,CAEjB;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,SAAS,CAAC,CACb,CAAA;AACH,CAAC;AAED,oCAAoC;AACpC,oCAAoC;AACpC,oCAAoC;AAEpC,MAAM,SAAS,GAAG,CAAC,EAAE,UAAU,GAAG,SAAS,EAAE,QAAQ,GAAG,KAAK,EAA4B,EAAE,EAAE;IAC3F,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,iBAAiB,EAAE,CAAA;IAE1C,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,IAAI,EAAE;YACJ,UAAU,EAAE,wBAAwB;YACpC,KAAK,EAAE,cAAc,CAAC,QAAQ,CAAC;SAChC;QACD,QAAQ,EAAE;YACR,KAAK,EAAE,MAAM,CAAC,wBAAwB;SACvC;QACD,OAAO,EAAE;YACP,OAAO,EAAE,GAAG;SACb;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import React from 'react'\nimport { Pressable, StyleSheet } from 'react-native'\nimport type { PressableProps } from 'react-native'\nimport { useTheme } from '../../hooks'\nimport { platformFontWeightMedium } from '../../utils'\nimport { Text } from './text'\nimport type { TextProps } from './text'\nimport { getColorKey, useColorOptionMap } from './button_color_utils'\nimport type { AppearanceUnion } from './button_color_utils'\n\n// =================================\n// ====== Component ================\n// =================================\n\ninterface TextButtonProps 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   * Renders text within a `Text`\n   */\n  children?: TextProps['children']\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   * Fill buttons are visually more propmonitent then outline buttons\n   */\n  variant?: TextProps['variant']\n}\n\nexport function TextButton({\n  adjustsFontSizeToFit = false,\n  allowFontScaling = true,\n  appearance = 'primary',\n  disabled = false,\n  children,\n  maxFontSizeMultiplier,\n  minimumFontScale,\n  variant = 'plain',\n  ...props\n}: TextButtonProps) {\n  const styles = useStyles({ appearance, disabled })\n\n  return (\n    <Pressable\n      accessibilityRole=\"button\"\n      disabled={disabled}\n      style={({ pressed }) => pressed && styles.pressed} // Android & iOS intentionally get the same pressed style\n      {...props}\n    >\n      <Text\n        adjustsFontSizeToFit={adjustsFontSizeToFit}\n        allowFontScaling={allowFontScaling}\n        maxFontSizeMultiplier={maxFontSizeMultiplier}\n        minimumFontScale={minimumFontScale}\n        numberOfLines={1}\n        style={[styles.text, disabled && styles.disabled]}\n        variant={variant}\n      >\n        {children}\n      </Text>\n    </Pressable>\n  )\n}\n\n// =================================\n// ====== Styles ===================\n// =================================\n\nconst useStyles = ({ appearance = 'primary', disabled = false }: Partial<TextButtonProps>) => {\n  const { colors } = useTheme()\n  const colorKey = getColorKey({ disabled, appearance })\n  const colorOptionMap = useColorOptionMap()\n\n  return StyleSheet.create({\n    text: {\n      fontWeight: platformFontWeightMedium,\n      color: colorOptionMap[colorKey],\n    },\n    disabled: {\n      color: colors.textColorDefaultDisabled,\n    },\n    pressed: {\n      opacity: 0.5,\n    },\n  })\n}\n"]}

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { TextProps } from './text';
+import type { AppearanceUnion } from './button_color_utils';
+interface TextInlineButtonProps extends TextProps {
+    /**
+     * Updates the button's colors
+     */
+    appearance?: AppearanceUnion;
+}
+export declare function TextInlineButton({ appearance, children, disabled, onPress, ...props }: TextInlineButtonProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=text_inline_button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"text_inline_button.d.ts","sourceRoot":"","sources":["../../../src/components/display/text_inline_button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAIvC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAIvC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAM3D,UAAU,qBAAsB,SAAQ,SAAS;IAC/C;;OAEG;IACH,UAAU,CAAC,EAAE,eAAe,CAAA;CAC7B;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,UAAsB,EACtB,QAAQ,EACR,QAAgB,EAChB,OAAO,EACP,GAAG,KAAK,EACT,EAAE,qBAAqB,qBA2BvB"}

package/build/components/display/text_inline_button.js

@@ -0,0 +1,53 @@
+import React, { useState } from 'react';
+import { Platform, StyleSheet } from 'react-native';
+import { useTheme } from '../../hooks';
+import { Text } from './text';
+import { platformFontWeightMedium } from '../../utils';
+import colorFunction from 'color';
+import { getColorKey, useColorOptionMap } from './button_color_utils';
+export function TextInlineButton({ appearance = 'primary', children, disabled = false, onPress, ...props }) {
+    const styles = useStyles({ appearance, disabled });
+    const [isPressed, setIsPressed] = useState(false);
+    const platformPressedStyle = Platform.select({
+        ios: null,
+        android: styles.pressedAndroid,
+    });
+    return (<Text accessibilityRole="button" numberOfLines={1} style={[
+            styles.text,
+            styles.underline,
+            disabled && styles.disabled,
+            isPressed && platformPressedStyle,
+        ]} onPress={!disabled ? onPress : undefined} onPressIn={() => setIsPressed(true)} onPressOut={() => setIsPressed(false)} {...props}>
+      {children}
+    </Text>);
+}
+// =================================
+// ====== Styles ===================
+// =================================
+const useStyles = ({ appearance = 'primary', disabled = false, }) => {
+    const { colors } = useTheme();
+    const colorKey = getColorKey({ disabled, appearance });
+    const colorOptionMap = useColorOptionMap();
+    // Android doesn't show a "pressed" state and so we need to simulate it.
+    // Lowering the Text's opacity doesn't work as it inherits it's parent's Text's opacity.
+    // We can simulate the effect by changing the color's opacity instead.
+    const pressedColor = colorFunction(colorOptionMap[colorKey]).alpha(0.5).string();
+    return StyleSheet.create({
+        text: {
+            fontWeight: platformFontWeightMedium,
+            color: colorOptionMap[colorKey],
+        },
+        underline: {
+            textDecorationLine: 'underline',
+            textDecorationColor: colorOptionMap[colorKey],
+            textDecorationStyle: 'solid',
+        },
+        disabled: {
+            color: colors.textColorDefaultDisabled,
+        },
+        pressedAndroid: {
+            color: pressedColor,
+        },
+    });
+};
+//# sourceMappingURL=text_inline_button.js.map

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

@@ -0,0 +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,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AAcrE,MAAM,UAAU,gBAAgB,CAAC,EAC/B,UAAU,GAAG,SAAS,EACtB,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,SAAS,EACtB,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,iBAAiB,EAAE,CAAA;IAE1C,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, useColorOptionMap } from './button_color_utils'\nimport type { AppearanceUnion } from './button_color_utils'\n\n// =================================\n// ====== Component ================\n// =================================\n\ninterface TextInlineButtonProps extends TextProps {\n  /**\n   * Updates the button's colors\n   */\n  appearance?: AppearanceUnion\n}\n\nexport function TextInlineButton({\n  appearance = 'primary',\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 = 'primary',\n  disabled = false,\n}: Partial<TextInlineButtonProps>) => {\n  const { colors } = useTheme()\n  const colorKey = getColorKey({ disabled, appearance })\n  const colorOptionMap = useColorOptionMap()\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/index.d.ts

@@ -1,3 +1,4 @@
 export * from './conversations';
 export * from './error_boundary';
+export * from './display';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.tsx"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA;AAC/B,cAAc,kBAAkB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.tsx"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA;AAC/B,cAAc,kBAAkB,CAAA;AAChC,cAAc,WAAW,CAAA"}

package/build/components/index.js

@@ -1,3 +1,4 @@
 export * from './conversations';
 export * from './error_boundary';
+export * from './display';
 //# sourceMappingURL=index.js.map

package/build/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.tsx"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA;AAC/B,cAAc,kBAAkB,CAAA","sourcesContent":["export * from './conversations'\nexport * from './error_boundary'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.tsx"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA;AAC/B,cAAc,kBAAkB,CAAA;AAChC,cAAc,WAAW,CAAA","sourcesContent":["export * from './conversations'\nexport * from './error_boundary'\nexport * from './display'\n"]}

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

@@ -27,7 +27,7 @@ interface AvatarRootProps {
     size?: AvatarSize;
 }
 type AvatarMaskProps = ViewProps;
-interface AvatarImageProps extends Omit<ImageProps, 'source'> {
+interface AvatarImageProps extends Omit<ImageProps, 'source' | 'alt'> {
     sourceUri: string;
 }
 interface AvatarGroupProps {

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

@@ -1 +1 @@
-{"version":3,"file":"avatar_primitive.d.ts","sourceRoot":"","sources":["../../../src/components/primitive/avatar_primitive.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAA;AAC7E,OAAO,EAAoB,SAAS,EAAE,MAAM,cAAc,CAAA;AAE1D,OAAO,EAAS,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAgBpD,KAAK,gBAAgB,GAAG;IACtB,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAAC,CAAA;IAC/B,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAA;IACjC,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAAC,CAAA;IACvC,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAA;IACjC,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,CAAA;IAC5C,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAAC,CAAA;CAChC,CAAA;wBAEwB,gBAAgB;AAAzC,wBAAyC;AACzC,YAAY,EACV,gBAAgB,EAChB,mBAAmB,EACnB,gBAAgB,EAChB,eAAe,EACf,eAAe,GAChB,CAAA;AAMD,QAAA,MAAM,YAAY;;;CAGR,CAAA;AAEV,QAAA,MAAM,qBAAqB;;;CAGjB,CAAA;AAGV,KAAK,UAAU,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,OAAO,YAAY,CAAC,CAAA;AAClE,KAAK,kBAAkB,GAAG,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,OAAO,qBAAqB,CAAC,CAAA;AAoC5F,UAAU,eAAe;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,IAAI,CAAC,EAAE,UAAU,CAAA;CAClB;AAmBD,KAAK,eAAe,GAAG,SAAS,CAAA;AAkBhC,UAAU,gBAAiB,SAAQ,IAAI,CAAC,UAAU,EAAE,QAAQ,CAAC;IAC3D,SAAS,EAAE,MAAM,CAAA;CAClB;AA+BD,UAAU,gBAAgB;IACxB,UAAU,EAAE,MAAM,EAAE,CAAA;CACrB;AAsID,UAAU,mBAAoB,SAAQ,SAAS;IAC7C,QAAQ,EAAE,kBAAkB,CAAA;CAC7B"}
+{"version":3,"file":"avatar_primitive.d.ts","sourceRoot":"","sources":["../../../src/components/primitive/avatar_primitive.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAA;AAC7E,OAAO,EAAoB,SAAS,EAAE,MAAM,cAAc,CAAA;AAE1D,OAAO,EAAS,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAgBpD,KAAK,gBAAgB,GAAG;IACtB,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAAC,CAAA;IAC/B,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAA;IACjC,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAAC,CAAA;IACvC,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAA;IACjC,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,CAAA;IAC5C,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAAC,CAAA;CAChC,CAAA;wBAEwB,gBAAgB;AAAzC,wBAAyC;AACzC,YAAY,EACV,gBAAgB,EAChB,mBAAmB,EACnB,gBAAgB,EAChB,eAAe,EACf,eAAe,GAChB,CAAA;AAMD,QAAA,MAAM,YAAY;;;CAGR,CAAA;AAEV,QAAA,MAAM,qBAAqB;;;CAGjB,CAAA;AAGV,KAAK,UAAU,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,OAAO,YAAY,CAAC,CAAA;AAClE,KAAK,kBAAkB,GAAG,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,OAAO,qBAAqB,CAAC,CAAA;AAoC5F,UAAU,eAAe;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,IAAI,CAAC,EAAE,UAAU,CAAA;CAClB;AAmBD,KAAK,eAAe,GAAG,SAAS,CAAA;AAkBhC,UAAU,gBAAiB,SAAQ,IAAI,CAAC,UAAU,EAAE,QAAQ,GAAG,KAAK,CAAC;IACnE,SAAS,EAAE,MAAM,CAAA;CAClB;AAgCD,UAAU,gBAAgB;IACxB,UAAU,EAAE,MAAM,EAAE,CAAA;CACrB;AAsID,UAAU,mBAAoB,SAAQ,SAAS;IAC7C,QAAQ,EAAE,kBAAkB,CAAA;CAC7B"}

package/build/components/primitive/avatar_primitive.js

@@ -44,7 +44,7 @@ function useAvatarContext() {
 }
 function AvatarRoot({ children, size = 'md' }) {
     const [allImagesLoaded, setAllImagesLoaded] = useState(false);
-    const styles = useStyles(size);
+    const styles = useStyles({ size });
     return (<AvatarContext.Provider value={{ size, allImagesLoaded, setAllImagesLoaded }}>
       <View style={styles.rootContainer}>{children}</View>
     </AvatarContext.Provider>);
@@ -59,11 +59,11 @@ function AvatarMask({ children, ...props }) {
 AvatarMask.displayName = 'Avatar.Mask';
 function AvatarImage({ sourceUri, ...props }) {
     const { size } = useAvatarContext();
-    return <Image source={{ uri: sourceUri }} loaderSize={AVATAR_PX[size]} {...props}/>;
+    return <Image source={{ uri: sourceUri }} loaderSize={AVATAR_PX[size]} {...props} alt=""/>;
 }
 AvatarImage.displayName = 'Avatar.Image';
 function AvatarGroupImage({ sourceUri, style, onLoad }) {
-    return (<Image source={{ uri: sourceUri }} loadingEnabled={false} wrapperStyle={style} onLoad={onLoad}/>);
+    return (<Image source={{ uri: sourceUri }} loadingEnabled={false} wrapperStyle={style} onLoad={onLoad} alt=""/>);
 }
 function AvatarGroup({ sourceUris }) {
     const styles = useStyles();
@@ -126,7 +126,7 @@ AvatarGroup.displayName = 'Avatar.Group';
 // =================================
 function AvatarGroupLoader() {
     const { size, allImagesLoaded } = useAvatarContext();
-    const styles = useStyles(size);
+    const styles = useStyles({ size });
     if (allImagesLoaded)
         return null;
     return (<View style={styles.groupLoader}>
@@ -136,14 +136,11 @@ function AvatarGroupLoader() {
 AvatarGroupLoader.displayName = 'Avatar.GroupLoader';
 function AvatarPresence({ presence, ...props }) {
     const { size } = useAvatarContext();
-    const styles = useStyles(size, presence);
+    const styles = useStyles({ size, presence });
     return <View style={styles.presence} {...props}/>;
 }
 AvatarPresence.displayName = 'Avatar.Presence';
-// =================================
-// ====== Styles ===================
-// =================================
-const useStyles = (size = 'md', presence = 'offline') => {
+const useStyles = ({ size = 'md', presence = 'offline' } = {}) => {
     const { colors } = useTheme();
     const PRESENCE_COLOR = {
         online: colors.fillColorInteractionOnlineDefault,