@repzo/widget-react-native 1.0.0 → 1.0.4

package/lib/module/ui/components/AttachmentChips.js

@@ -0,0 +1,131 @@
+"use strict";
+
+/**
+ * Picked-but-unsent attachments above the composer: a thumbnail for images, a
+ * name + size card for everything else, each with its own remove button.
+ */
+
+import { Image, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
+import { formatBytes, isImageAttachment } from "../../attachments/pickers.js";
+import { formatLabel } from "../../i18n.js";
+import { fontSize, palette, radius, spacing, withAlpha } from "../styles/theme.js";
+import { START_ALIGN } from "../utils/rtl.js";
+import { CloseIcon } from "./icons.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function AttachmentChips({
+  attachments,
+  disabled,
+  removeLabel,
+  onRemove
+}) {
+  return /*#__PURE__*/_jsx(ScrollView, {
+    horizontal: true,
+    showsHorizontalScrollIndicator: false,
+    keyboardShouldPersistTaps: "handled",
+    style: styles.scroller,
+    contentContainerStyle: styles.row,
+    children: attachments.map(attachment => /*#__PURE__*/_jsxs(View, {
+      style: [styles.chip, disabled && styles.chipDisabled],
+      children: [isImageAttachment(attachment.contentType) ? /*#__PURE__*/_jsx(Image, {
+        source: {
+          uri: attachment.previewUri
+        },
+        style: styles.thumbnail,
+        resizeMode: "cover",
+        accessible: true,
+        accessibilityLabel: attachment.name,
+        accessibilityIgnoresInvertColors: true
+      }) : /*#__PURE__*/_jsxs(View, {
+        style: styles.file,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.fileName,
+          numberOfLines: 1,
+          children: attachment.name
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.fileSize,
+          children: formatBytes(attachment.size)
+        })]
+      }), /*#__PURE__*/_jsx(Pressable, {
+        onPress: () => onRemove(attachment.id),
+        disabled: disabled,
+        accessibilityRole: "button",
+        accessibilityLabel: formatLabel(removeLabel, {
+          name: attachment.name
+        }),
+        accessibilityState: {
+          disabled: !!disabled
+        }
+        // 22pt badge + 11pt on every side = a 44pt target.
+        ,
+        hitSlop: 11,
+        style: ({
+          pressed
+        }) => [styles.remove, pressed && styles.removePressed],
+        children: /*#__PURE__*/_jsx(CloseIcon, {
+          size: 10,
+          color: palette.white
+        })
+      })]
+    }, attachment.id))
+  });
+}
+const CHIP_HEIGHT = 64;
+const styles = StyleSheet.create({
+  scroller: {
+    flexGrow: 0,
+    marginBottom: spacing.sm
+  },
+  row: {
+    gap: spacing.sm
+  },
+  chip: {
+    height: CHIP_HEIGHT,
+    borderRadius: radius.md,
+    overflow: 'hidden',
+    backgroundColor: palette.surfaceAlt,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: palette.border
+  },
+  chipDisabled: {
+    opacity: 0.5
+  },
+  thumbnail: {
+    width: CHIP_HEIGHT,
+    height: CHIP_HEIGHT
+  },
+  file: {
+    width: 156,
+    height: CHIP_HEIGHT,
+    justifyContent: 'center',
+    paddingStart: spacing.md,
+    // Clear of the remove badge in the top corner.
+    paddingEnd: spacing.xl + spacing.sm
+  },
+  fileName: {
+    textAlign: START_ALIGN,
+    fontSize: fontSize.meta,
+    fontWeight: '600',
+    color: palette.ink
+  },
+  fileSize: {
+    textAlign: START_ALIGN,
+    fontSize: fontSize.caption,
+    color: palette.textMuted,
+    marginTop: 2
+  },
+  remove: {
+    position: 'absolute',
+    top: spacing.xs,
+    end: spacing.xs,
+    width: 22,
+    height: 22,
+    borderRadius: 11,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: withAlpha(palette.ink, 0.72)
+  },
+  removePressed: {
+    opacity: 0.7
+  }
+});
+//# sourceMappingURL=AttachmentChips.js.map

package/lib/module/ui/components/AttachmentChips.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Image","Pressable","ScrollView","StyleSheet","Text","View","formatBytes","isImageAttachment","formatLabel","fontSize","palette","radius","spacing","withAlpha","START_ALIGN","CloseIcon","jsx","_jsx","jsxs","_jsxs","AttachmentChips","attachments","disabled","removeLabel","onRemove","horizontal","showsHorizontalScrollIndicator","keyboardShouldPersistTaps","style","styles","scroller","contentContainerStyle","row","children","map","attachment","chip","chipDisabled","contentType","source","uri","previewUri","thumbnail","resizeMode","accessible","accessibilityLabel","name","accessibilityIgnoresInvertColors","file","fileName","numberOfLines","fileSize","size","onPress","id","accessibilityRole","accessibilityState","hitSlop","pressed","remove","removePressed","color","white","CHIP_HEIGHT","create","flexGrow","marginBottom","sm","gap","height","borderRadius","md","overflow","backgroundColor","surfaceAlt","borderWidth","hairlineWidth","borderColor","border","opacity","width","justifyContent","paddingStart","paddingEnd","xl","textAlign","meta","fontWeight","ink","caption","textMuted","marginTop","position","top","xs","end","alignItems"],"sourceRoot":"../../../../src","sources":["ui/components/AttachmentChips.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/ui/components/AttachmentMenu.js

@@ -0,0 +1,120 @@
+"use strict";
+
+/**
+ * The attach button's choice of source.
+ *
+ * iOS gets the native action sheet. Android has no equivalent (`Alert` caps at
+ * three buttons, and three sources plus Cancel is four), so it gets a small
+ * bottom sheet in its own transparent modal — which also lets the hardware
+ * back button close the sheet rather than the whole widget.
+ */
+
+import { ActionSheetIOS, Modal, Platform, Pressable, StyleSheet, Text, View } from 'react-native';
+import { useWidgetInsets } from "../hooks/use-widget-insets.js";
+import { fontSize, palette, radius, spacing } from "../styles/theme.js";
+import { START_ALIGN } from "../utils/rtl.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * iOS only: shows the native sheet and calls `onSelect` with the chosen key
+ * (nothing on cancel). Returns false elsewhere, so the caller shows
+ * `AttachmentMenu` instead.
+ */
+export function showNativeAttachmentMenu(options, cancelLabel, onSelect) {
+  if (Platform.OS !== 'ios') return false;
+  ActionSheetIOS.showActionSheetWithOptions({
+    options: [...options.map(option => option.label), cancelLabel],
+    cancelButtonIndex: options.length
+  }, index => {
+    const chosen = options[index];
+    if (chosen) onSelect(chosen.key);
+  });
+  return true;
+}
+export function AttachmentMenu({
+  visible,
+  options,
+  cancelLabel,
+  onSelect,
+  onClose
+}) {
+  const insets = useWidgetInsets();
+  return /*#__PURE__*/_jsxs(Modal, {
+    visible: visible,
+    transparent: true,
+    animationType: "fade",
+    statusBarTranslucent: true,
+    onRequestClose: onClose,
+    children: [/*#__PURE__*/_jsx(Pressable, {
+      style: styles.backdrop,
+      onPress: onClose,
+      accessibilityRole: "button",
+      accessibilityLabel: cancelLabel
+    }), /*#__PURE__*/_jsxs(View, {
+      style: [styles.sheet, {
+        paddingBottom: insets.bottom + spacing.sm
+      }],
+      accessibilityViewIsModal: true,
+      children: [options.map(option => /*#__PURE__*/_jsx(Pressable, {
+        onPress: () => onSelect(option.key),
+        accessibilityRole: "button",
+        style: ({
+          pressed
+        }) => [styles.row, pressed && styles.rowPressed],
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.rowLabel,
+          children: option.label
+        })
+      }, option.key)), /*#__PURE__*/_jsx(View, {
+        style: styles.divider
+      }), /*#__PURE__*/_jsx(Pressable, {
+        onPress: onClose,
+        accessibilityRole: "button",
+        style: ({
+          pressed
+        }) => [styles.row, pressed && styles.rowPressed],
+        children: /*#__PURE__*/_jsx(Text, {
+          style: [styles.rowLabel, styles.cancelLabel],
+          children: cancelLabel
+        })
+      })]
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  backdrop: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(0, 0, 0, 0.32)'
+  },
+  sheet: {
+    position: 'absolute',
+    start: 0,
+    end: 0,
+    bottom: 0,
+    backgroundColor: palette.white,
+    borderTopLeftRadius: radius.xl + 4,
+    borderTopRightRadius: radius.xl + 4,
+    paddingTop: spacing.sm
+  },
+  row: {
+    minHeight: 52,
+    justifyContent: 'center',
+    paddingHorizontal: spacing.xl
+  },
+  rowPressed: {
+    backgroundColor: palette.surfaceAlt
+  },
+  rowLabel: {
+    textAlign: START_ALIGN,
+    fontSize: fontSize.body,
+    color: palette.ink
+  },
+  cancelLabel: {
+    color: palette.textMuted
+  },
+  divider: {
+    height: StyleSheet.hairlineWidth,
+    backgroundColor: palette.border,
+    marginVertical: spacing.xs
+  }
+});
+//# sourceMappingURL=AttachmentMenu.js.map

package/lib/module/ui/components/AttachmentMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ActionSheetIOS","Modal","Platform","Pressable","StyleSheet","Text","View","useWidgetInsets","fontSize","palette","radius","spacing","START_ALIGN","jsx","_jsx","jsxs","_jsxs","showNativeAttachmentMenu","options","cancelLabel","onSelect","OS","showActionSheetWithOptions","map","option","label","cancelButtonIndex","length","index","chosen","key","AttachmentMenu","visible","onClose","insets","transparent","animationType","statusBarTranslucent","onRequestClose","children","style","styles","backdrop","onPress","accessibilityRole","accessibilityLabel","sheet","paddingBottom","bottom","sm","accessibilityViewIsModal","pressed","row","rowPressed","rowLabel","divider","create","absoluteFillObject","backgroundColor","position","start","end","white","borderTopLeftRadius","xl","borderTopRightRadius","paddingTop","minHeight","justifyContent","paddingHorizontal","surfaceAlt","textAlign","body","color","ink","textMuted","height","hairlineWidth","border","marginVertical","xs"],"sourceRoot":"../../../../src","sources":["ui/components/AttachmentMenu.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/ui/components/ImageViewer.js

@@ -0,0 +1,177 @@
+"use strict";
+
+/**
+ * Full-screen viewer for image attachments, so a tap on a photo the agent sent
+ * stays inside the messenger instead of bouncing to the browser. Pinch-to-zoom
+ * uses the native ScrollView zoom (iOS); Android shows the image fitted.
+ */
+
+import { useState } from 'react';
+import { ActivityIndicator, Image, Modal, Platform, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
+import { useWidgetInsets } from "../hooks/use-widget-insets.js";
+import { fontSize, palette, spacing } from "../styles/theme.js";
+import { CloseIcon } from "./icons.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function ImageViewer({
+  image,
+  labels,
+  onClose,
+  onOpenExternally
+}) {
+  const insets = useWidgetInsets();
+  // Keyed by URL so opening another image starts from a clean loading state.
+  const [status, setStatus] = useState({
+    url: null,
+    state: 'loading'
+  });
+  const state = status.url === image?.url ? status.state : 'loading';
+  return /*#__PURE__*/_jsx(Modal, {
+    visible: !!image,
+    transparent: true,
+    animationType: "fade",
+    statusBarTranslucent: true,
+    onRequestClose: onClose,
+    children: /*#__PURE__*/_jsxs(View, {
+      style: styles.backdrop,
+      accessibilityViewIsModal: true,
+      children: [image ? /*#__PURE__*/_jsx(ScrollView, {
+        style: styles.fill,
+        contentContainerStyle: styles.center,
+        maximumZoomScale: 4,
+        minimumZoomScale: 1,
+        centerContent: true,
+        showsHorizontalScrollIndicator: false,
+        showsVerticalScrollIndicator: false,
+        bouncesZoom: true,
+        children: /*#__PURE__*/_jsx(Image, {
+          source: {
+            uri: image.url
+          },
+          style: styles.image,
+          resizeMode: "contain",
+          accessibilityLabel: image.name,
+          accessibilityIgnoresInvertColors: true,
+          onLoad: () => setStatus({
+            url: image.url,
+            state: 'ready'
+          }),
+          onError: () => setStatus({
+            url: image.url,
+            state: 'failed'
+          })
+        })
+      }) : null, image && state === 'loading' ? /*#__PURE__*/_jsx(ActivityIndicator, {
+        style: StyleSheet.absoluteFill,
+        color: palette.white
+      }) : null, image && state === 'failed' ? /*#__PURE__*/_jsxs(View, {
+        style: [StyleSheet.absoluteFill, styles.center, styles.failed],
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.failedText,
+          children: labels.loadFailed
+        }), /*#__PURE__*/_jsx(Pressable, {
+          onPress: () => onOpenExternally(image.url),
+          accessibilityRole: "button",
+          style: ({
+            pressed
+          }) => [styles.externalButton, pressed && styles.pressed],
+          children: /*#__PURE__*/_jsx(Text, {
+            style: styles.externalLabel,
+            children: labels.openExternally
+          })
+        })]
+      }) : null, /*#__PURE__*/_jsxs(View, {
+        style: [styles.header, {
+          paddingTop: insets.top + spacing.sm
+        }],
+        pointerEvents: "box-none",
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.title,
+          numberOfLines: 1,
+          children: image?.name ?? ''
+        }), /*#__PURE__*/_jsx(Pressable, {
+          onPress: onClose,
+          accessibilityRole: "button",
+          accessibilityLabel: labels.close,
+          hitSlop: 12,
+          style: ({
+            pressed
+          }) => [styles.closeButton, pressed && styles.pressed],
+          children: /*#__PURE__*/_jsx(CloseIcon, {
+            size: 20,
+            color: palette.white
+          })
+        })]
+      })]
+    })
+  });
+}
+const styles = StyleSheet.create({
+  backdrop: {
+    flex: 1,
+    backgroundColor: '#000000'
+  },
+  fill: {
+    flex: 1
+  },
+  center: {
+    flexGrow: 1,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  image: {
+    width: '100%',
+    height: '100%'
+  },
+  header: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.md,
+    paddingHorizontal: spacing.lg,
+    paddingBottom: spacing.sm,
+    backgroundColor: 'rgba(0,0,0,0.45)'
+  },
+  title: {
+    flex: 1,
+    minWidth: 0,
+    color: palette.white,
+    fontSize: fontSize.body,
+    fontWeight: '600'
+  },
+  closeButton: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'rgba(255,255,255,0.14)'
+  },
+  pressed: {
+    opacity: 0.7
+  },
+  failed: {
+    gap: spacing.md,
+    paddingHorizontal: spacing.xxl
+  },
+  failedText: {
+    color: palette.white,
+    fontSize: fontSize.body,
+    textAlign: 'center'
+  },
+  externalButton: {
+    paddingHorizontal: spacing.lg,
+    paddingVertical: spacing.sm,
+    borderRadius: 999,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: 'rgba(255,255,255,0.5)'
+  },
+  externalLabel: {
+    color: palette.white,
+    fontSize: fontSize.meta,
+    fontWeight: Platform.OS === 'ios' ? '600' : 'bold'
+  }
+});
+//# sourceMappingURL=ImageViewer.js.map

package/lib/module/ui/components/ImageViewer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useState","ActivityIndicator","Image","Modal","Platform","Pressable","ScrollView","StyleSheet","Text","View","useWidgetInsets","fontSize","palette","spacing","CloseIcon","jsx","_jsx","jsxs","_jsxs","ImageViewer","image","labels","onClose","onOpenExternally","insets","status","setStatus","url","state","visible","transparent","animationType","statusBarTranslucent","onRequestClose","children","style","styles","backdrop","accessibilityViewIsModal","fill","contentContainerStyle","center","maximumZoomScale","minimumZoomScale","centerContent","showsHorizontalScrollIndicator","showsVerticalScrollIndicator","bouncesZoom","source","uri","resizeMode","accessibilityLabel","name","accessibilityIgnoresInvertColors","onLoad","onError","absoluteFill","color","white","failed","failedText","loadFailed","onPress","accessibilityRole","pressed","externalButton","externalLabel","openExternally","header","paddingTop","top","sm","pointerEvents","title","numberOfLines","close","hitSlop","closeButton","size","create","flex","backgroundColor","flexGrow","alignItems","justifyContent","width","height","position","left","right","flexDirection","gap","md","paddingHorizontal","lg","paddingBottom","minWidth","body","fontWeight","borderRadius","opacity","xxl","textAlign","paddingVertical","borderWidth","hairlineWidth","borderColor","meta","OS"],"sourceRoot":"../../../../src","sources":["ui/components/ImageViewer.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/ui/components/InAppNotification.js

@@ -0,0 +1,208 @@
+"use strict";
+
+/**
+ * The card that floats over the host app when a team reply arrives while the
+ * messenger is closed — Intercom's in-app notification. It never times out:
+ * tapping it opens the conversation, swiping it left or right dismisses it
+ * (the thread stays unread). The store takes it down on its own once the
+ * messenger opens or the thread is read.
+ *
+ * Pure JS gestures (PanResponder), so hosts need no gesture library.
+ */
+
+import { useEffect, useMemo, useRef } from 'react';
+import { AccessibilityInfo, Animated, PanResponder, Pressable, StyleSheet, Text, View, useWindowDimensions } from 'react-native';
+import { formatLabel } from "../../i18n.js";
+import { useReduceMotion } from "../hooks/use-reduce-motion.js";
+import { fontSize, palette, radius, shadows, spacing, withAlpha } from "../styles/theme.js";
+import { START_ALIGN } from "../utils/rtl.js";
+import { Avatar } from "./Avatar.js";
+
+/** Share of the card's width a drag must travel to count as a dismiss. */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const DISMISS_DISTANCE_RATIO = 0.35;
+/** A quick flick dismisses even when it travels less than that. */
+const DISMISS_VELOCITY = 0.6;
+export function InAppNotification({
+  notification,
+  color,
+  bottomInset,
+  labels,
+  onOpen,
+  onDismiss
+}) {
+  const {
+    width
+  } = useWindowDimensions();
+  const reduceMotion = useReduceMotion();
+  // Read as "hold still" until the setting is known (see useReduceMotion).
+  const animate = reduceMotion === false;
+  const entry = useRef(new Animated.Value(animate ? 0 : 1)).current;
+  const dragX = useRef(new Animated.Value(0)).current;
+  const preview = notification.preview || (notification.hasAttachments ? labels.attachment : '');
+  const sender = notification.senderName ? formatLabel(labels.replyFrom, {
+    name: notification.senderName
+  }) : labels.newReply;
+  const accessibilityLabel = [preview, sender].filter(Boolean).join(', ');
+
+  // Mounted once per reply (the provider keys it by message id), so this runs
+  // for every new card: slide it in and tell screen-reader users it arrived.
+  useEffect(() => {
+    if (animate) {
+      Animated.spring(entry, {
+        toValue: 1,
+        useNativeDriver: true,
+        speed: 16,
+        bounciness: 4
+      }).start();
+    }
+    AccessibilityInfo.announceForAccessibility(accessibilityLabel);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const panResponder = useMemo(() => {
+    const settle = () => Animated.spring(dragX, {
+      toValue: 0,
+      useNativeDriver: true,
+      bounciness: 6
+    }).start();
+    return PanResponder.create({
+      // Capture so a horizontal drag wins over the Pressable underneath; taps
+      // and vertical movement still reach it.
+      onMoveShouldSetPanResponderCapture: (_, gesture) => Math.abs(gesture.dx) > 8 && Math.abs(gesture.dx) > Math.abs(gesture.dy) * 1.5,
+      onPanResponderMove: (_, gesture) => dragX.setValue(gesture.dx),
+      onPanResponderTerminationRequest: () => false,
+      onPanResponderRelease: (_, gesture) => {
+        const farEnough = Math.abs(gesture.dx) > width * DISMISS_DISTANCE_RATIO;
+        const fastEnough = Math.abs(gesture.vx) > DISMISS_VELOCITY;
+        if (!farEnough && !fastEnough) {
+          settle();
+          return;
+        }
+        const direction = (gesture.dx || gesture.vx) < 0 ? -1 : 1;
+        Animated.timing(dragX, {
+          toValue: direction * width,
+          duration: animate ? 180 : 0,
+          useNativeDriver: true
+        }).start(() => onDismiss());
+      },
+      onPanResponderTerminate: settle
+    });
+  }, [animate, dragX, onDismiss, width]);
+  const handleAccessibilityAction = event => {
+    if (event.nativeEvent.actionName === 'dismiss') onDismiss();
+    if (event.nativeEvent.actionName === 'activate') onOpen(notification.conversationId);
+  };
+  const opacity = Animated.multiply(entry, dragX.interpolate({
+    inputRange: [-width, 0, width],
+    outputRange: [0, 1, 0],
+    extrapolate: 'clamp'
+  }));
+  const translateY = entry.interpolate({
+    inputRange: [0, 1],
+    outputRange: [spacing.lg, 0]
+  });
+  return /*#__PURE__*/_jsx(View, {
+    pointerEvents: "box-none",
+    style: [styles.wrapper, {
+      bottom: bottomInset + spacing.md
+    }],
+    children: /*#__PURE__*/_jsx(Animated.View, {
+      ...panResponder.panHandlers,
+      style: [styles.card, {
+        opacity,
+        transform: [{
+          translateX: dragX
+        }, {
+          translateY
+        }]
+      }],
+      children: /*#__PURE__*/_jsxs(Pressable, {
+        onPress: () => onOpen(notification.conversationId),
+        accessibilityRole: "button",
+        accessibilityLabel: accessibilityLabel,
+        accessibilityHint: labels.openHint,
+        accessibilityActions: [{
+          name: 'activate'
+        }, {
+          name: 'dismiss',
+          label: labels.dismiss
+        }],
+        onAccessibilityAction: handleAccessibilityAction,
+        style: ({
+          pressed
+        }) => [styles.row, pressed && styles.pressed],
+        children: [/*#__PURE__*/_jsx(Avatar, {
+          avatar: notification.senderAvatar,
+          name: notification.senderName,
+          color: color,
+          size: 40,
+          style: styles.avatar
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.text,
+          children: [preview ? /*#__PURE__*/_jsx(Text, {
+            numberOfLines: 2,
+            style: styles.preview,
+            children: preview
+          }) : null, /*#__PURE__*/_jsx(Text, {
+            numberOfLines: 1,
+            style: styles.sender,
+            children: sender
+          })]
+        })]
+      })
+    })
+  });
+}
+const styles = StyleSheet.create({
+  wrapper: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    paddingHorizontal: spacing.lg,
+    alignItems: 'center',
+    // Above the host's navigator even when the provider is mounted before it.
+    zIndex: 1000,
+    elevation: 1000
+  },
+  card: {
+    width: '100%',
+    maxWidth: 480,
+    borderRadius: radius.xl,
+    backgroundColor: palette.text,
+    ...shadows.floating
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.md,
+    minHeight: 64,
+    paddingVertical: spacing.md,
+    paddingHorizontal: spacing.lg,
+    borderRadius: radius.xl
+  },
+  pressed: {
+    opacity: 0.85
+  },
+  avatar: {
+    borderWidth: 1,
+    borderColor: withAlpha(palette.white, 0.1)
+  },
+  text: {
+    flex: 1,
+    minWidth: 0,
+    gap: 2
+  },
+  preview: {
+    color: palette.white,
+    fontSize: fontSize.body,
+    fontWeight: '600',
+    lineHeight: 20,
+    textAlign: START_ALIGN
+  },
+  sender: {
+    color: withAlpha(palette.white, 0.64),
+    fontSize: fontSize.meta,
+    textAlign: START_ALIGN
+  }
+});
+//# sourceMappingURL=InAppNotification.js.map