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

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { type AvatarImageProps, type AvatarPresenceProps, type AvatarRootProps } from '../primitive/avatar_primitive';
+interface AvatarProps {
+    sourceUri: AvatarImageProps['sourceUri'];
+    size?: AvatarRootProps['size'];
+    presence?: AvatarPresenceProps['presence'];
+}
+export declare function Avatar({ presence, size, sourceUri }: AvatarProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=avatar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/components/display/avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAwB,EACtB,KAAK,gBAAgB,EACrB,KAAK,mBAAmB,EACxB,KAAK,eAAe,EACrB,MAAM,+BAA+B,CAAA;AAEtC,UAAU,WAAW;IACnB,SAAS,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAA;IACxC,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAA;IAC9B,QAAQ,CAAC,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAA;CAC3C;AAED,wBAAgB,MAAM,CAAC,EAAE,QAAQ,EAAE,IAAW,EAAE,SAAS,EAAE,EAAE,WAAW,qBASvE"}

package/build/components/display/avatar.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import AvatarPrimitive from '../primitive/avatar_primitive';
+export function Avatar({ presence, size = 'lg', sourceUri }) {
+    return (<AvatarPrimitive.Root size={size}>
+      <AvatarPrimitive.Mask>
+        <AvatarPrimitive.Image sourceUri={sourceUri}/>
+      </AvatarPrimitive.Mask>
+      {presence && <AvatarPrimitive.Presence presence={presence}/>}
+    </AvatarPrimitive.Root>);
+}
+//# sourceMappingURL=avatar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../../src/components/display/avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,eAIN,MAAM,+BAA+B,CAAA;AAQtC,MAAM,UAAU,MAAM,CAAC,EAAE,QAAQ,EAAE,IAAI,GAAG,IAAI,EAAE,SAAS,EAAe;IACtE,OAAO,CACL,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAC/B;MAAA,CAAC,eAAe,CAAC,IAAI,CACnB;QAAA,CAAC,eAAe,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,EAC9C;MAAA,EAAE,eAAe,CAAC,IAAI,CACtB;MAAA,CAAC,QAAQ,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,EAAG,CAC/D;IAAA,EAAE,eAAe,CAAC,IAAI,CAAC,CACxB,CAAA;AACH,CAAC","sourcesContent":["import React from 'react'\nimport AvatarPrimitive, {\n  type AvatarImageProps,\n  type AvatarPresenceProps,\n  type AvatarRootProps,\n} from '../primitive/avatar_primitive'\n\ninterface AvatarProps {\n  sourceUri: AvatarImageProps['sourceUri']\n  size?: AvatarRootProps['size']\n  presence?: AvatarPresenceProps['presence']\n}\n\nexport function Avatar({ presence, size = 'lg', sourceUri }: AvatarProps) {\n  return (\n    <AvatarPrimitive.Root size={size}>\n      <AvatarPrimitive.Mask>\n        <AvatarPrimitive.Image sourceUri={sourceUri} />\n      </AvatarPrimitive.Mask>\n      {presence && <AvatarPrimitive.Presence presence={presence} />}\n    </AvatarPrimitive.Root>\n  )\n}\n"]}

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { type AvatarGroupProps, type AvatarRootProps } from '../primitive/avatar_primitive';
+interface AvatarGroupDisplayProps {
+    sourceUris: AvatarGroupProps['sourceUris'];
+    size?: AvatarRootProps['size'];
+}
+export declare function AvatarGroup({ sourceUris, size }: AvatarGroupDisplayProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=avatar_group.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"avatar_group.d.ts","sourceRoot":"","sources":["../../../src/components/display/avatar_group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAwB,EACtB,KAAK,gBAAgB,EACrB,KAAK,eAAe,EACrB,MAAM,+BAA+B,CAAA;AAEtC,UAAU,uBAAuB;IAC/B,UAAU,EAAE,gBAAgB,CAAC,YAAY,CAAC,CAAA;IAC1C,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAA;CAC/B;AAED,wBAAgB,WAAW,CAAC,EAAE,UAAU,EAAE,IAAW,EAAE,EAAE,uBAAuB,qBAS/E"}

package/build/components/display/avatar_group.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import AvatarPrimitive from '../primitive/avatar_primitive';
+export function AvatarGroup({ sourceUris, size = 'lg' }) {
+    return (<AvatarPrimitive.Root size={size}>
+      <AvatarPrimitive.Mask>
+        <AvatarPrimitive.Group sourceUris={sourceUris}/>
+        <AvatarPrimitive.GroupLoader />
+      </AvatarPrimitive.Mask>
+    </AvatarPrimitive.Root>);
+}
+//# sourceMappingURL=avatar_group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"avatar_group.js","sourceRoot":"","sources":["../../../src/components/display/avatar_group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,eAGN,MAAM,+BAA+B,CAAA;AAOtC,MAAM,UAAU,WAAW,CAAC,EAAE,UAAU,EAAE,IAAI,GAAG,IAAI,EAA2B;IAC9E,OAAO,CACL,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAC/B;MAAA,CAAC,eAAe,CAAC,IAAI,CACnB;QAAA,CAAC,eAAe,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,UAAU,CAAC,EAC9C;QAAA,CAAC,eAAe,CAAC,WAAW,CAAC,AAAD,EAC9B;MAAA,EAAE,eAAe,CAAC,IAAI,CACxB;IAAA,EAAE,eAAe,CAAC,IAAI,CAAC,CACxB,CAAA;AACH,CAAC","sourcesContent":["import React from 'react'\nimport AvatarPrimitive, {\n  type AvatarGroupProps,\n  type AvatarRootProps,\n} from '../primitive/avatar_primitive'\n\ninterface AvatarGroupDisplayProps {\n  sourceUris: AvatarGroupProps['sourceUris']\n  size?: AvatarRootProps['size']\n}\n\nexport function AvatarGroup({ sourceUris, size = 'lg' }: AvatarGroupDisplayProps) {\n  return (\n    <AvatarPrimitive.Root size={size}>\n      <AvatarPrimitive.Mask>\n        <AvatarPrimitive.Group sourceUris={sourceUris} />\n        <AvatarPrimitive.GroupLoader />\n      </AvatarPrimitive.Mask>\n    </AvatarPrimitive.Root>\n  )\n}\n"]}

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { TextProps as ReactNativeTextProps } from 'react-native';
+interface TextProps extends ReactNativeTextProps {
+    variant?: 'h1' | 'h2' | 'h3' | 'h4';
+}
+export declare function Heading({ style, variant, children, ...props }: TextProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=heading.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"heading.d.ts","sourceRoot":"","sources":["../../../src/components/display/heading.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAIL,SAAS,IAAI,oBAAoB,EAClC,MAAM,cAAc,CAAA;AAIrB,UAAU,SAAU,SAAQ,oBAAoB;IAC9C,OAAO,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;CACpC;AAED,wBAAgB,OAAO,CAAC,EAAE,KAAK,EAAE,OAAc,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,qBAkB/E"}

package/build/components/display/heading.js

@@ -0,0 +1,53 @@
+import { useTheme } from '../../hooks';
+import React from 'react';
+import { Platform, StyleSheet, Text as ReactNativeText, } from 'react-native';
+import { tokens } from '../../vendor/tapestry/tokens';
+import { platformFontWeightBold } from '../../utils/platform_styles';
+export function Heading({ style, variant = 'h1', children, ...props }) {
+    const styles = useStyles();
+    const variantStyleMap = {
+        h1: styles.heading1,
+        h2: styles.heading2,
+        h3: styles.heading3,
+        h4: styles.heading4,
+    };
+    return (<ReactNativeText style={[styles.global, variantStyleMap[variant], style]} accessibilityRole="header" {...props}>
+      {children}
+    </ReactNativeText>);
+}
+const useStyles = () => {
+    const { colors } = useTheme();
+    return StyleSheet.create({
+        global: {
+            fontFamily: Platform.select({
+                ios: 'System',
+                android: 'normal',
+            }),
+        },
+        heading1: {
+            color: colors.textColorDefaultHeadline,
+            fontSize: 25, // Todo: Check with UX on correct token
+            lineHeight: 32,
+        },
+        heading2: {
+            color: colors.textColorDefaultHeadline,
+            fontWeight: platformFontWeightBold,
+            fontSize: 21, // Todo: Check with UX on correct token
+            lineHeight: 24,
+        },
+        heading3: {
+            color: colors.textColorDefaultHeadline,
+            fontWeight: platformFontWeightBold,
+            fontSize: tokens.fontSizeLg,
+            lineHeight: 22,
+        },
+        heading4: {
+            color: colors.textColorDefaultSecondary,
+            fontWeight: platformFontWeightBold,
+            fontSize: tokens.fontSizeSm,
+            lineHeight: 20,
+            textTransform: 'uppercase',
+        },
+    });
+};
+//# sourceMappingURL=heading.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"heading.js","sourceRoot":"","sources":["../../../src/components/display/heading.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;AACrD,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAA;AAMpE,MAAM,UAAU,OAAO,CAAC,EAAE,KAAK,EAAE,OAAO,GAAG,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAa;IAC9E,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,MAAM,eAAe,GAAG;QACtB,EAAE,EAAE,MAAM,CAAC,QAAQ;QACnB,EAAE,EAAE,MAAM,CAAC,QAAQ;QACnB,EAAE,EAAE,MAAM,CAAC,QAAQ;QACnB,EAAE,EAAE,MAAM,CAAC,QAAQ;KACpB,CAAA;IAED,OAAO,CACL,CAAC,eAAe,CACd,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,OAAO,CAAC,EAAE,KAAK,CAAC,CAAC,CACxD,iBAAiB,CAAC,QAAQ,CAC1B,IAAI,KAAK,CAAC,CAEV;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;IAE7B,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,QAAQ,EAAE;YACR,KAAK,EAAE,MAAM,CAAC,wBAAwB;YACtC,QAAQ,EAAE,EAAE,EAAE,uCAAuC;YACrD,UAAU,EAAE,EAAE;SACf;QACD,QAAQ,EAAE;YACR,KAAK,EAAE,MAAM,CAAC,wBAAwB;YACtC,UAAU,EAAE,sBAAsB;YAClC,QAAQ,EAAE,EAAE,EAAE,uCAAuC;YACrD,UAAU,EAAE,EAAE;SACf;QACD,QAAQ,EAAE;YACR,KAAK,EAAE,MAAM,CAAC,wBAAwB;YACtC,UAAU,EAAE,sBAAsB;YAClC,QAAQ,EAAE,MAAM,CAAC,UAAU;YAC3B,UAAU,EAAE,EAAE;SACf;QACD,QAAQ,EAAE;YACR,KAAK,EAAE,MAAM,CAAC,yBAAyB;YACvC,UAAU,EAAE,sBAAsB;YAClC,QAAQ,EAAE,MAAM,CAAC,UAAU;YAC3B,UAAU,EAAE,EAAE;YACd,aAAa,EAAE,WAAW;SAC3B;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'\nimport { platformFontWeightBold } from '../../utils/platform_styles'\n\ninterface TextProps extends ReactNativeTextProps {\n  variant?: 'h1' | 'h2' | 'h3' | 'h4'\n}\n\nexport function Heading({ style, variant = 'h1', children, ...props }: TextProps) {\n  const styles = useStyles()\n  const variantStyleMap = {\n    h1: styles.heading1,\n    h2: styles.heading2,\n    h3: styles.heading3,\n    h4: styles.heading4,\n  }\n\n  return (\n    <ReactNativeText\n      style={[styles.global, variantStyleMap[variant], style]}\n      accessibilityRole=\"header\"\n      {...props}\n    >\n      {children}\n    </ReactNativeText>\n  )\n}\n\nconst useStyles = () => {\n  const { colors } = useTheme()\n\n  return StyleSheet.create({\n    global: {\n      fontFamily: Platform.select({\n        ios: 'System',\n        android: 'normal',\n      }),\n    },\n    heading1: {\n      color: colors.textColorDefaultHeadline,\n      fontSize: 25, // Todo: Check with UX on correct token\n      lineHeight: 32,\n    },\n    heading2: {\n      color: colors.textColorDefaultHeadline,\n      fontWeight: platformFontWeightBold,\n      fontSize: 21, // Todo: Check with UX on correct token\n      lineHeight: 24,\n    },\n    heading3: {\n      color: colors.textColorDefaultHeadline,\n      fontWeight: platformFontWeightBold,\n      fontSize: tokens.fontSizeLg,\n      lineHeight: 22,\n    },\n    heading4: {\n      color: colors.textColorDefaultSecondary,\n      fontWeight: platformFontWeightBold,\n      fontSize: tokens.fontSizeSm,\n      lineHeight: 20,\n      textTransform: 'uppercase',\n    },\n  })\n}\n"]}

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

@@ -1,10 +1,14 @@
 import React from 'react';
 import { ImageProps as ReactNativeImageProps, ViewStyle } from 'react-native';
-interface ImageProps extends ReactNativeImageProps {
+export interface ImageProps extends ReactNativeImageProps {
     /**
      * Should the image show the loading indicator by default.
      */
     defaultLoading?: boolean;
+    /**
+     * Turn on or off loading spinner.
+     */
+    loadingEnabled?: boolean;
     /**
      * Size of the loading spinner.
      */
@@ -13,7 +17,10 @@ interface ImageProps extends ReactNativeImageProps {
      * Style object for the preload background.
      */
     loadingBackgroundStyles?: ViewStyle;
+    /**
+     * Style the outer View of the image.
+     */
+    wrapperStyle?: ViewStyle;
 }
-export declare function Image({ source, onLoad, defaultLoading, loaderSize, loadingBackgroundStyles, style, ...restProps }: ImageProps): React.JSX.Element;
-export {};
+export declare function Image({ source, onLoad, defaultLoading, loadingEnabled, loaderSize, loadingBackgroundStyles, style, wrapperStyle, ...props }: ImageProps): React.JSX.Element;
 //# sourceMappingURL=image.d.ts.map

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,UAAU,UAAW,SAAQ,qBAAqB;IAChD;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;OAEG;IACH,uBAAuB,CAAC,EAAE,SAAS,CAAA;CACpC;AAED,wBAAgB,KAAK,CAAC,EACpB,MAAM,EACN,MAAa,EACb,cAAqB,EACrB,UAAe,EACf,uBAAuB,EACvB,KAAK,EACL,GAAG,SAAS,EACb,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;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"}

package/build/components/display/image.js

@@ -3,7 +3,7 @@ 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, loaderSize = 24, loadingBackgroundStyles, style, ...restProps }) {
+export function Image({ source, onLoad = noop, defaultLoading = true, loadingEnabled = true, loaderSize = 24, loadingBackgroundStyles, style = {}, wrapperStyle = {}, ...props }) {
     const [loading, setLoading] = useState(defaultLoading);
     const imageStyles = StyleSheet.flatten(style);
     const { width = '100%', height = '100%', borderRadius = 0 } = imageStyles || {};
@@ -12,9 +12,9 @@ export function Image({ source, onLoad = noop, defaultLoading = true, loaderSize
         setLoading(false);
         onLoad?.(event);
     };
-    return (<View>
-      <ReactNativeImage style={[styles.image, imageStyles]} onLoad={handleOnLoad} source={source} {...restProps}/>
-      {loading && (<View style={[styles.loadingBackground, loadingBackgroundStyles]}>
+    return (<View style={wrapperStyle}>
+      <ReactNativeImage style={[styles.image, imageStyles]} onLoad={handleOnLoad} source={source} {...props}/>
+      {loading && loadingEnabled && (<View style={[styles.loadingBackground, loadingBackgroundStyles]}>
           <Spinner size={loaderSize}/>
         </View>)}
     </View>);
@@ -32,7 +32,9 @@ const useStyles = (width, height, borderRadius) => {
             height,
         },
         image: {
-            backgroundColor: 'transparent',
+            backgroundColor: colors.fillColorNeutral070,
+            width,
+            height,
         },
     });
 };

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;AAiBnC,MAAM,UAAU,KAAK,CAAC,EACpB,MAAM,EACN,MAAM,GAAG,IAAI,EACb,cAAc,GAAG,IAAI,EACrB,UAAU,GAAG,EAAE,EACf,uBAAuB,EACvB,KAAK,EACL,GAAG,SAAS,EACD;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,CACH;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,SAAS,CAAC,EAEhB;MAAA,CAAC,OAAO,IAAI,CACV,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,YAAoC,EACpC,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,aAAa;SAC/B;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\ninterface ImageProps extends ReactNativeImageProps {\n  /**\n   * Should the image show the loading indicator by default.\n   */\n  defaultLoading?: 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\nexport function Image({\n  source,\n  onLoad = noop,\n  defaultLoading = true,\n  loaderSize = 24,\n  loadingBackgroundStyles,\n  style,\n  ...restProps\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      <ReactNativeImage\n        style={[styles.image, imageStyles]}\n        onLoad={handleOnLoad}\n        source={source}\n        {...restProps}\n      />\n      {loading && (\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\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: 'transparent',\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;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"]}

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

@@ -1,4 +1,7 @@
+export { Avatar } from './avatar';
+export { AvatarGroup } from './avatar_group';
+export { Heading } from './heading';
+export { Image, ImageProps } from './image';
 export { Spinner } from './spinner';
-export { Image } from './image';
 export { Text } from './text';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/display/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA"}
+{"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,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA"}

package/build/components/display/index.js

@@ -1,4 +1,7 @@
-export { Spinner } from './spinner';
+export { Avatar } from './avatar';
+export { AvatarGroup } from './avatar_group';
+export { Heading } from './heading';
 export { Image } from './image';
+export { Spinner } from './spinner';
 export { Text } from './text';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/display/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA","sourcesContent":["export { Spinner } from './spinner'\nexport { Image } from './image'\nexport { Text } from './text'\n"]}
+{"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,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 { Image, ImageProps } from './image'\nexport { Spinner } from './spinner'\nexport { Text } from './text'\n"]}

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

@@ -3,6 +3,6 @@ import { TextProps as ReactNativeTextProps } from 'react-native';
 interface TextProps extends ReactNativeTextProps {
     variant?: 'plain' | 'secondary' | 'tertiary' | 'footnote';
 }
-export declare function Text({ style, variant, children, ...rest }: TextProps): React.JSX.Element;
+export declare function Text({ style, variant, children, ...props }: TextProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=text.d.ts.map

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;AAErB,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,IAAI,EAAE,EAAE,SAAS,qBAc9E"}
+{"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"}

package/build/components/display/text.js

@@ -1,7 +1,8 @@
 import { useTheme } from '../../hooks';
 import React from 'react';
 import { Platform, StyleSheet, Text as ReactNativeText, } from 'react-native';
-export function Text({ style, variant = 'plain', children, ...rest }) {
+import { tokens } from '../../vendor/tapestry/tokens';
+export function Text({ style, variant = 'plain', children, ...props }) {
     const styles = useStyles();
     const variantStyleMap = {
         plain: styles.plain,
@@ -9,7 +10,7 @@ export function Text({ style, variant = 'plain', children, ...rest }) {
         tertiary: styles.tertiary,
         footnote: styles.footnote,
     };
-    return (<ReactNativeText style={[styles.global, variantStyleMap[variant], style]} {...rest}>
+    return (<ReactNativeText style={[styles.global, variantStyleMap[variant], style]} {...props}>
       {children}
     </ReactNativeText>);
 }
@@ -24,22 +25,22 @@ const useStyles = () => {
         },
         plain: {
             color: colors.textColorDefaultPrimary,
-            fontSize: 16,
+            fontSize: tokens.fontSizeMd,
             lineHeight: 24,
         },
         secondary: {
             color: colors.textColorDefaultPrimary,
-            fontSize: 15,
+            fontSize: 15, // TODO: Check with UX on correct token
             lineHeight: 22,
         },
         tertiary: {
             color: colors.textColorDefaultPrimary,
-            fontSize: 14,
+            fontSize: tokens.fontSizeSm,
             lineHeight: 20,
         },
         footnote: {
             color: colors.textColorDefaultSecondary,
-            fontSize: 13,
+            fontSize: 13, // TODO: Check with UX on correct token
             lineHeight: 16,
         },
     });

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;AAMrB,MAAM,UAAU,IAAI,CAAC,EAAE,KAAK,EAAE,OAAO,GAAG,OAAO,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAa;IAC7E,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,IAAI,CAAC,CACjF;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,EAAE;YACZ,UAAU,EAAE,EAAE;SACf;QACD,SAAS,EAAE;YACT,KAAK,EAAE,MAAM,CAAC,uBAAuB;YACrC,QAAQ,EAAE,EAAE;YACZ,UAAU,EAAE,EAAE;SACf;QACD,QAAQ,EAAE;YACR,KAAK,EAAE,MAAM,CAAC,uBAAuB;YACrC,QAAQ,EAAE,EAAE;YACZ,UAAU,EAAE,EAAE;SACf;QACD,QAAQ,EAAE;YACR,KAAK,EAAE,MAAM,CAAC,yBAAyB;YACvC,QAAQ,EAAE,EAAE;YACZ,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'\n\ninterface TextProps extends ReactNativeTextProps {\n  variant?: 'plain' | 'secondary' | 'tertiary' | 'footnote'\n}\n\nexport function Text({ style, variant = 'plain', children, ...rest }: 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]} {...rest}>\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: 16,\n      lineHeight: 24,\n    },\n    secondary: {\n      color: colors.textColorDefaultPrimary,\n      fontSize: 15,\n      lineHeight: 22,\n    },\n    tertiary: {\n      color: colors.textColorDefaultPrimary,\n      fontSize: 14,\n      lineHeight: 20,\n    },\n    footnote: {\n      color: colors.textColorDefaultSecondary,\n      fontSize: 13,\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,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"]}

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import { ViewProps } from 'react-native';
+import { ImageProps } from '../display/image';
+type AvatarComponents = {
+    Root: React.FC<AvatarRootProps>;
+    Image: React.FC<AvatarImageProps>;
+    Presence: React.FC<AvatarPresenceProps>;
+    Group: React.FC<AvatarGroupProps>;
+    GroupLoader: React.FC<Record<string, never>>;
+    Mask: React.FC<AvatarMaskProps>;
+};
+declare const _default: AvatarComponents;
+export default _default;
+export type { AvatarImageProps, AvatarPresenceProps, AvatarGroupProps, AvatarMaskProps, AvatarRootProps, };
+declare const AVATAR_SIZES: {
+    readonly md: "md";
+    readonly lg: "lg";
+};
+declare const AVATAR_PRESENCE_TYPES: {
+    readonly online: "online";
+    readonly offline: "offline";
+};
+type AvatarSize = (typeof AVATAR_SIZES)[keyof typeof AVATAR_SIZES];
+type AvatarPresenceType = (typeof AVATAR_PRESENCE_TYPES)[keyof typeof AVATAR_PRESENCE_TYPES];
+interface AvatarRootProps {
+    children: React.ReactNode;
+    size?: AvatarSize;
+}
+type AvatarMaskProps = ViewProps;
+interface AvatarImageProps extends Omit<ImageProps, 'source'> {
+    sourceUri: string;
+}
+interface AvatarGroupProps {
+    sourceUris: string[];
+}
+interface AvatarPresenceProps extends ViewProps {
+    presence: AvatarPresenceType;
+}
+//# sourceMappingURL=avatar_primitive.d.ts.map

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

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

package/build/components/primitive/avatar_primitive.js

@@ -0,0 +1,204 @@
+import React, { createContext, useContext, useEffect, useState } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { useTheme } from '../../hooks';
+import { Image } from '../display/image';
+import { Spinner } from '../display/spinner';
+// =================================
+// ====== Exports ==================
+// =================================
+const Avatar = {
+    Root: AvatarRoot,
+    Image: AvatarImage,
+    Presence: AvatarPresence,
+    Group: AvatarGroup,
+    GroupLoader: AvatarGroupLoader,
+    Mask: AvatarMask,
+};
+export default Avatar;
+// =================================
+// ====== Constants & Types ========
+// =================================
+const AVATAR_SIZES = {
+    md: 'md',
+    lg: 'lg',
+};
+const AVATAR_PRESENCE_TYPES = {
+    online: 'online',
+    offline: 'offline',
+};
+const AVATAR_PX = {
+    [AVATAR_SIZES.md]: 32,
+    [AVATAR_SIZES.lg]: 40,
+};
+const AVATAR_PRESENCE_PX = {
+    [AVATAR_SIZES.md]: 12,
+    [AVATAR_SIZES.lg]: 14,
+};
+const AvatarContext = createContext(null);
+function useAvatarContext() {
+    const context = useContext(AvatarContext);
+    if (!context) {
+        throw new Error('Avatar components must be used within Avatar.Root');
+    }
+    return context;
+}
+function AvatarRoot({ children, size = 'md' }) {
+    const [allImagesLoaded, setAllImagesLoaded] = useState(false);
+    const styles = useStyles(size);
+    return (<AvatarContext.Provider value={{ size, allImagesLoaded, setAllImagesLoaded }}>
+      <View style={styles.rootContainer}>{children}</View>
+    </AvatarContext.Provider>);
+}
+AvatarRoot.displayName = 'Avatar.Root';
+function AvatarMask({ children, ...props }) {
+    const styles = useStyles();
+    return (<View style={styles.mask} {...props}>
+      {children}
+    </View>);
+}
+AvatarMask.displayName = 'Avatar.Mask';
+function AvatarImage({ sourceUri, ...props }) {
+    const { size } = useAvatarContext();
+    return <Image source={{ uri: sourceUri }} loaderSize={AVATAR_PX[size]} {...props}/>;
+}
+AvatarImage.displayName = 'Avatar.Image';
+function AvatarGroupImage({ sourceUri, style, onLoad }) {
+    return (<Image source={{ uri: sourceUri }} loadingEnabled={false} wrapperStyle={style} onLoad={onLoad}/>);
+}
+function AvatarGroup({ sourceUris }) {
+    const styles = useStyles();
+    const { setAllImagesLoaded } = useAvatarContext();
+    const [loadingStatus, setLoadingStatus] = useState({
+        0: false,
+        1: false,
+        2: false,
+        3: false,
+    });
+    const displayUris = sourceUris.slice(0, 4);
+    const hasDisplayUris = displayUris.length > 0;
+    const handleImageLoaded = index => {
+        setLoadingStatus(prev => ({
+            ...prev,
+            [index]: true,
+        }));
+    };
+    useEffect(() => {
+        const allImagesLoaded = hasDisplayUris && displayUris.every((_, index) => loadingStatus[index] === true);
+        setAllImagesLoaded(allImagesLoaded);
+    }, [displayUris, hasDisplayUris, loadingStatus, setAllImagesLoaded]);
+    if (!hasDisplayUris) {
+        return null;
+    }
+    if (displayUris.length === 1) {
+        return <AvatarGroupImage sourceUri={displayUris[0]} onLoad={() => handleImageLoaded(0)}/>;
+    }
+    if (displayUris.length === 2) {
+        return (<View style={styles.groupRow}>
+        <AvatarGroupImage sourceUri={displayUris[0]} style={styles.halfWidthFullHeight} onLoad={() => handleImageLoaded(0)}/>
+        <AvatarGroupImage sourceUri={displayUris[1]} style={styles.halfWidthFullHeight} onLoad={() => handleImageLoaded(1)}/>
+      </View>);
+    }
+    if (displayUris.length === 3) {
+        return (<View style={styles.groupColumn}>
+        <View style={styles.groupRow}>
+          <AvatarGroupImage sourceUri={displayUris[0]} style={styles.halfWidthFullHeight} onLoad={() => handleImageLoaded(0)}/>
+          <View style={styles.groupColumn}>
+            <AvatarGroupImage sourceUri={displayUris[1]} style={styles.fullWidthHalfHeight} onLoad={() => handleImageLoaded(1)}/>
+            <AvatarGroupImage sourceUri={displayUris[2]} style={styles.fullWidthHalfHeight} onLoad={() => handleImageLoaded(2)}/>
+          </View>
+        </View>
+      </View>);
+    }
+    return (<View style={styles.groupColumn}>
+      <View style={styles.groupRow}>
+        <AvatarGroupImage sourceUri={displayUris[0]} style={styles.halfWidthFullHeight} onLoad={() => handleImageLoaded(0)}/>
+        <AvatarGroupImage sourceUri={displayUris[1]} style={styles.halfWidthFullHeight} onLoad={() => handleImageLoaded(1)}/>
+      </View>
+      <View style={styles.groupRow}>
+        <AvatarGroupImage sourceUri={displayUris[2]} style={styles.halfWidthFullHeight} onLoad={() => handleImageLoaded(2)}/>
+        <AvatarGroupImage sourceUri={displayUris[3]} style={styles.halfWidthFullHeight} onLoad={() => handleImageLoaded(3)}/>
+      </View>
+    </View>);
+}
+AvatarGroup.displayName = 'Avatar.Group';
+// =================================
+// ====== AvatarGroupLoader   =========
+// =================================
+function AvatarGroupLoader() {
+    const { size, allImagesLoaded } = useAvatarContext();
+    const styles = useStyles(size);
+    if (allImagesLoaded)
+        return null;
+    return (<View style={styles.groupLoader}>
+      <Spinner size={AVATAR_PX[size]}/>
+    </View>);
+}
+AvatarGroupLoader.displayName = 'Avatar.GroupLoader';
+function AvatarPresence({ presence, ...props }) {
+    const { size } = useAvatarContext();
+    const styles = useStyles(size, presence);
+    return <View style={styles.presence} {...props}/>;
+}
+AvatarPresence.displayName = 'Avatar.Presence';
+// =================================
+// ====== Styles ===================
+// =================================
+const useStyles = (size = 'md', presence = 'offline') => {
+    const { colors } = useTheme();
+    const PRESENCE_COLOR = {
+        online: colors.fillColorInteractionOnlineDefault,
+        offline: colors.iconColorDefaultDisabled,
+    };
+    const presenceDiameter = AVATAR_PRESENCE_PX[size];
+    const avatarDiameter = AVATAR_PX[size];
+    const groupGap = 1;
+    return StyleSheet.create({
+        rootContainer: {
+            height: avatarDiameter,
+            width: avatarDiameter,
+        },
+        mask: {
+            borderRadius: avatarDiameter,
+            overflow: 'hidden',
+            width: '100%',
+            height: '100%',
+        },
+        presence: {
+            height: presenceDiameter,
+            width: presenceDiameter,
+            backgroundColor: PRESENCE_COLOR[presence],
+            borderColor: colors.fillColorNeutral100Inverted,
+            borderWidth: 2,
+            borderRadius: presenceDiameter,
+            position: 'absolute',
+            bottom: -1,
+            right: -1,
+        },
+        groupLoader: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            borderRadius: avatarDiameter,
+            width: avatarDiameter,
+            height: avatarDiameter,
+        },
+        groupColumn: {
+            flex: 1,
+            gap: groupGap,
+        },
+        groupRow: {
+            flexDirection: 'row',
+            flex: 1,
+            gap: groupGap,
+        },
+        halfWidthFullHeight: {
+            width: '50%',
+            height: '100%',
+        },
+        fullWidthHalfHeight: {
+            width: '100%',
+            height: '50%',
+        },
+    });
+};
+//# sourceMappingURL=avatar_primitive.js.map