fluent-styles 1.54.0 → 1.55.0

package/lib/module/notification/index.js

@@ -0,0 +1,253 @@
+"use strict";
+
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import { Animated, Image, StyleSheet, Text, TouchableOpacity, useColorScheme, View } from 'react-native';
+import { resolveTheme, NOTIFICATION_DARK, NOTIFICATION_LIGHT } from "../utiles/theme.js";
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// ─── Component ────────────────────────────────────────────────────────────────
+
+export const Notification = ({
+  title,
+  body,
+  avatar,
+  initials,
+  source,
+  timestamp,
+  actionLabel,
+  onAction,
+  onDismiss,
+  duration = 5000,
+  theme = 'dark',
+  colors: colorOverrides
+}) => {
+  const deviceScheme = useColorScheme();
+  const colors = useMemo(() => {
+    const base = resolveTheme(theme, deviceScheme) === 'light' ? NOTIFICATION_LIGHT : NOTIFICATION_DARK;
+    return colorOverrides ? {
+      ...base,
+      ...colorOverrides
+    } : base;
+  }, [theme, deviceScheme, colorOverrides]);
+
+  // ── Animation ────────────────────────────────────────────────────────────
+  const translateX = useRef(new Animated.Value(360)).current;
+  const opacity = useRef(new Animated.Value(0)).current;
+  const isDismissing = useRef(false);
+  const onDismissRef = useRef(onDismiss);
+  useEffect(() => {
+    onDismissRef.current = onDismiss;
+  }, [onDismiss]);
+  const dismiss = useCallback(() => {
+    if (isDismissing.current) return;
+    isDismissing.current = true;
+    Animated.parallel([Animated.timing(translateX, {
+      toValue: 360,
+      duration: 260,
+      useNativeDriver: true
+    }), Animated.timing(opacity, {
+      toValue: 0,
+      duration: 200,
+      useNativeDriver: true
+    })]).start(() => onDismissRef.current?.());
+  }, [translateX, opacity]);
+  useEffect(() => {
+    Animated.parallel([Animated.spring(translateX, {
+      toValue: 0,
+      useNativeDriver: true,
+      damping: 22,
+      stiffness: 250
+    }), Animated.timing(opacity, {
+      toValue: 1,
+      duration: 180,
+      useNativeDriver: true
+    })]).start();
+    if (duration > 0) {
+      const t = setTimeout(dismiss, duration);
+      return () => clearTimeout(t);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const handleAction = useCallback(() => {
+    onAction?.();
+    dismiss();
+  }, [onAction, dismiss]);
+
+  // ── Render ───────────────────────────────────────────────────────────────
+  return /*#__PURE__*/_jsxs(Animated.View, {
+    style: [styles.container, {
+      backgroundColor: colors.background,
+      borderColor: colors.border,
+      opacity,
+      transform: [{
+        translateX
+      }]
+    }],
+    children: [/*#__PURE__*/_jsx(View, {
+      style: styles.avatarWrap,
+      children: avatar ? /*#__PURE__*/_jsx(Image, {
+        source: avatar,
+        style: styles.avatarImage
+      }) : /*#__PURE__*/_jsx(View, {
+        style: [styles.avatarFallback, {
+          backgroundColor: colors.avatarBg,
+          borderColor: colors.avatarBorder
+        }],
+        children: /*#__PURE__*/_jsx(Text, {
+          style: [styles.avatarInitials, {
+            color: colors.avatarInitials
+          }],
+          children: initials ?? '?'
+        })
+      })
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.content,
+      children: [source ? /*#__PURE__*/_jsx(Text, {
+        style: [styles.source, {
+          color: colors.source
+        }],
+        numberOfLines: 1,
+        children: source
+      }) : null, /*#__PURE__*/_jsxs(View, {
+        style: styles.titleRow,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: [styles.title, {
+            color: colors.title
+          }],
+          numberOfLines: 1,
+          children: title
+        }), timestamp ? /*#__PURE__*/_jsx(Text, {
+          style: [styles.timestamp, {
+            color: colors.timestamp
+          }],
+          children: timestamp
+        }) : null]
+      }), /*#__PURE__*/_jsx(Text, {
+        style: [styles.body, {
+          color: colors.body
+        }],
+        numberOfLines: 2,
+        children: body
+      }), actionLabel ? /*#__PURE__*/_jsx(TouchableOpacity, {
+        onPress: handleAction,
+        style: [styles.actionBtn, {
+          backgroundColor: colors.actionBg,
+          borderColor: colors.actionBorder
+        }],
+        children: /*#__PURE__*/_jsx(Text, {
+          style: [styles.actionLabel, {
+            color: colors.actionLabel
+          }],
+          children: actionLabel
+        })
+      }) : null]
+    }), /*#__PURE__*/_jsx(TouchableOpacity, {
+      onPress: dismiss,
+      style: styles.closeBtn,
+      hitSlop: {
+        top: 8,
+        bottom: 8,
+        left: 8,
+        right: 8
+      },
+      children: /*#__PURE__*/_jsx(Text, {
+        style: [styles.closeIcon, {
+          color: colors.closeIcon
+        }],
+        children: "\u2715"
+      })
+    })]
+  });
+};
+
+// ─── Styles (layout only) ─────────────────────────────────────────────────────
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    borderWidth: 1,
+    borderRadius: 14,
+    padding: 14,
+    gap: 12,
+    width: 340,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 12
+    },
+    shadowOpacity: 0.18,
+    shadowRadius: 20,
+    elevation: 10
+  },
+  avatarWrap: {
+    paddingTop: 2
+  },
+  avatarImage: {
+    width: 40,
+    height: 40,
+    borderRadius: 20
+  },
+  avatarFallback: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    borderWidth: 1,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  avatarInitials: {
+    fontSize: 15,
+    fontWeight: '700',
+    letterSpacing: 0.5
+  },
+  content: {
+    flex: 1,
+    gap: 3
+  },
+  source: {
+    fontSize: 11,
+    fontWeight: '600',
+    letterSpacing: 0.8,
+    textTransform: 'uppercase'
+  },
+  titleRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between'
+  },
+  title: {
+    fontSize: 14,
+    fontWeight: '700',
+    flex: 1
+  },
+  timestamp: {
+    fontSize: 11,
+    marginLeft: 8
+  },
+  body: {
+    fontSize: 13,
+    lineHeight: 18
+  },
+  actionBtn: {
+    alignSelf: 'flex-start',
+    marginTop: 6,
+    paddingHorizontal: 12,
+    paddingVertical: 5,
+    borderRadius: 6,
+    borderWidth: 1
+  },
+  actionLabel: {
+    fontSize: 12,
+    fontWeight: '600'
+  },
+  closeBtn: {
+    paddingTop: 2
+  },
+  closeIcon: {
+    fontSize: 12,
+    fontWeight: '600'
+  }
+});
+export { NOTIFICATION_DARK, NOTIFICATION_LIGHT };
+//# sourceMappingURL=index.js.map

package/lib/module/notification/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","useEffect","useMemo","useRef","Animated","Image","StyleSheet","Text","TouchableOpacity","useColorScheme","View","resolveTheme","NOTIFICATION_DARK","NOTIFICATION_LIGHT","jsx","_jsx","jsxs","_jsxs","Notification","title","body","avatar","initials","source","timestamp","actionLabel","onAction","onDismiss","duration","theme","colors","colorOverrides","deviceScheme","base","translateX","Value","current","opacity","isDismissing","onDismissRef","dismiss","parallel","timing","toValue","useNativeDriver","start","spring","damping","stiffness","t","setTimeout","clearTimeout","handleAction","style","styles","container","backgroundColor","background","borderColor","border","transform","children","avatarWrap","avatarImage","avatarFallback","avatarBg","avatarBorder","avatarInitials","color","content","numberOfLines","titleRow","onPress","actionBtn","actionBg","actionBorder","closeBtn","hitSlop","top","bottom","left","right","closeIcon","create","flexDirection","borderWidth","borderRadius","padding","gap","width","shadowColor","shadowOffset","height","shadowOpacity","shadowRadius","elevation","paddingTop","alignItems","justifyContent","fontSize","fontWeight","letterSpacing","flex","textTransform","marginLeft","lineHeight","alignSelf","marginTop","paddingHorizontal","paddingVertical"],"sourceRoot":"../../../src","sources":["notification/index.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/notification/useNotification.js

@@ -0,0 +1,58 @@
+"use strict";
+
+import { useCallback } from 'react';
+import React from 'react';
+import { usePortal } from "../portal/PortalContext.js";
+import { Notification } from "./index.js";
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+import { jsx as _jsx } from "react/jsx-runtime";
+// ─── Hook ─────────────────────────────────────────────────────────────────────
+
+/**
+ * Declarative notification hook — requires a `PortalManager` ancestor.
+ *
+ * Notifications slide in from the right edge at the top of the screen and
+ * auto-dismiss after `duration` ms (default 5000).
+ *
+ * @example
+ * ```tsx
+ * const notification = useNotification()
+ *
+ * notification.show({
+ *   title: 'New message from Alex',
+ *   body:  'Hey, are you free this afternoon?',
+ *   source: 'Messages',
+ *   initials: 'AK',
+ *   timestamp: 'now',
+ *   actionLabel: 'Reply',
+ *   onAction: () => navigation.navigate('Chat'),
+ * })
+ * ```
+ */
+export function useNotification() {
+  const {
+    mount,
+    unmount
+  } = usePortal();
+  const show = useCallback(options => {
+    let id;
+    id = mount(/*#__PURE__*/_jsx(Notification, {
+      ...options,
+      onDismiss: () => unmount(id)
+    }), {
+      position: 'top-right',
+      offset: {
+        x: 16,
+        y: 56
+      }
+    });
+    return id;
+  }, [mount, unmount]);
+  const dismiss = useCallback(id => unmount(id), [unmount]);
+  return {
+    show,
+    dismiss
+  };
+}
+//# sourceMappingURL=useNotification.js.map

package/lib/module/notification/useNotification.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useCallback","React","usePortal","Notification","jsx","_jsx","useNotification","mount","unmount","show","options","id","onDismiss","position","offset","x","y","dismiss"],"sourceRoot":"../../../src","sources":["notification/useNotification.tsx"],"mappings":";;AAAA,SAASA,WAAW,QAAQ,OAAO;AACnC,OAAOC,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS,QAAQ,4BAAyB;AACnD,SAASC,YAAY,QAA2B,YAAI;;AAEpD;AAAA,SAAAC,GAAA,IAAAC,IAAA;AASA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,eAAeA,CAAA,EAAoB;EACjD,MAAM;IAAEC,KAAK;IAAEC;EAAQ,CAAC,GAAGN,SAAS,CAAC,CAAC;EAEtC,MAAMO,IAAI,GAAGT,WAAW,CACrBU,OAAoB,IAAa;IAChC,IAAIC,EAAU;IAEdA,EAAE,GAAGJ,KAAK,cACRF,IAAA,CAACF,YAAY;MAAA,GACPO,OAAO;MACXE,SAAS,EAAEA,CAAA,KAAMJ,OAAO,CAACG,EAAE;IAAE,CAC9B,CAAC,EACF;MAAEE,QAAQ,EAAE,WAAW;MAAEC,MAAM,EAAE;QAAEC,CAAC,EAAE,EAAE;QAAEC,CAAC,EAAE;MAAG;IAAE,CACpD,CAAC;IAED,OAAOL,EAAE;EACX,CAAC,EACD,CAACJ,KAAK,EAAEC,OAAO,CACjB,CAAC;EAED,MAAMS,OAAO,GAAGjB,WAAW,CACxBW,EAAU,IAAKH,OAAO,CAACG,EAAE,CAAC,EAC3B,CAACH,OAAO,CACV,CAAC;EAED,OAAO;IAAEC,IAAI;IAAEQ;EAAQ,CAAC;AAC1B","ignoreList":[]}

package/lib/module/page/index.js

@@ -0,0 +1,17 @@
+"use strict";
+
+import React from 'react';
+import { StyledSafeAreaView } from "../safeAreaView/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const StyledPage = ({
+  children,
+  ...props
+}) => {
+  return /*#__PURE__*/_jsx(StyledSafeAreaView, {
+    ...props,
+    children: children
+  });
+};
+StyledPage.displayName = 'StyledPage';
+export { StyledPage };
+//# sourceMappingURL=index.js.map

package/lib/module/page/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","StyledSafeAreaView","jsx","_jsx","StyledPage","children","props","displayName"],"sourceRoot":"../../../src","sources":["page/index.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,kBAAkB,QAAiC,0BAAiB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAM9E,MAAMC,UAAU,GAAGA,CAAC;EAAEC,QAAQ;EAAE,GAAGC;AAAuB,CAAC,KAAK;EAC5D,oBACIH,IAAA,CAACF,kBAAkB;IAAA,GAAKK,KAAK;IAAAD,QAAA,EACxBA;EAAQ,CACO,CAAC;AAE7B,CAAC;AAEDD,UAAU,CAACG,WAAW,GAAG,YAAY;AAErC,SAASH,UAAU","ignoreList":[]}

package/lib/module/popup/Popup.js

@@ -0,0 +1,328 @@
+"use strict";
+
+import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Animated, BackHandler, Easing, Modal, Platform, Pressable, StyleSheet, Text, TouchableOpacity, useColorScheme, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { POPUP_COLORS_DARK, POPUP_COLORS_LIGHT } from "./interface.js";
+import { animatedStyle, getBorderRadius, getPositionStyle, hiddenValue, resolveAnimation, visibleValue } from "./helpers.js";
+
+// ─── Close button (pure RN, no icon library) ──────────────────────────────────
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const CloseButton = ({
+  onPress,
+  color,
+  bg
+}) => /*#__PURE__*/_jsx(TouchableOpacity, {
+  onPress: onPress,
+  hitSlop: {
+    top: 8,
+    bottom: 8,
+    left: 8,
+    right: 8
+  },
+  style: [close.btn, {
+    backgroundColor: bg
+  }],
+  accessibilityLabel: "Close",
+  accessibilityRole: "button",
+  children: /*#__PURE__*/_jsx(Text, {
+    style: [close.icon, {
+      color
+    }],
+    children: "\u2715"
+  })
+});
+const close = StyleSheet.create({
+  btn: {
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  icon: {
+    fontSize: 13,
+    fontWeight: '700',
+    lineHeight: 14
+  }
+});
+
+// ─── Popup ────────────────────────────────────────────────────────────────────
+
+const PopupInner = ({
+  children,
+  visible,
+  overlay = true,
+  overlayColor,
+  closeOnPressOverlay = true,
+  onPressOverlay,
+  position = 'bottom',
+  animation: animProp,
+  duration = 280,
+  spring,
+  round = true,
+  roundRadius = 20,
+  safeAreaBottom = false,
+  safeAreaTop = false,
+  lazyRender = true,
+  destroyOnClose = false,
+  title,
+  subtitle,
+  showHandle: showHandleProp,
+  showClose = false,
+  onClose,
+  style,
+  overlayStyle,
+  headerStyle,
+  titleStyle,
+  subtitleStyle,
+  colors: colorOverrides,
+  onOpen,
+  onOpened,
+  onClosed,
+  onRequestClose,
+  testID
+}) => {
+  // ── Colours ────────────────────────────────────────────────────────────────
+  const scheme = useColorScheme();
+  const baseColors = scheme === 'dark' ? POPUP_COLORS_DARK : POPUP_COLORS_LIGHT;
+  const colors = useMemo(() => colorOverrides ? {
+    ...baseColors,
+    ...colorOverrides
+  } : baseColors, [baseColors, colorOverrides]);
+
+  // ── Safe area ──────────────────────────────────────────────────────────────
+  const insets = useSafeAreaInsets();
+
+  // ── Animation resolution ───────────────────────────────────────────────────
+  const animation = resolveAnimation(animProp, position);
+  const HIDDEN = hiddenValue(animation, position);
+  const VISIBLE = visibleValue(animation);
+
+  // ── Render gate ────────────────────────────────────────────────────────────
+  const hasEverOpened = useRef(false);
+  const [mounted, setMounted] = useState(!lazyRender || visible);
+  const [modalVisible, setModalVisible] = useState(visible);
+
+  // ── Animated values ────────────────────────────────────────────────────────
+  const anim = useRef(new Animated.Value(visible ? VISIBLE : HIDDEN)).current;
+  const overlayAnim = useRef(new Animated.Value(visible ? 1 : 0)).current;
+  const isAnimating = useRef(false);
+
+  // ── Lifecycle refs ────────────────────────────────────────────────────────
+  const onOpenedRef = useRef(onOpened);
+  const onClosedRef = useRef(onClosed);
+  useEffect(() => {
+    onOpenedRef.current = onOpened;
+  }, [onOpened]);
+  useEffect(() => {
+    onClosedRef.current = onClosed;
+  }, [onClosed]);
+
+  // ── Run animation ──────────────────────────────────────────────────────────
+  const runAnimation = useCallback((toVisible, onDone) => {
+    isAnimating.current = true;
+    const toValue = toVisible ? VISIBLE : HIDDEN;
+    const makeAnim = (val, target) => {
+      if (animation === 'none') {
+        return Animated.timing(val, {
+          toValue: target,
+          duration: 0,
+          useNativeDriver: val !== overlayAnim
+        });
+      }
+      if (toVisible && spring) {
+        return Animated.spring(val, {
+          toValue: target,
+          damping: spring.damping,
+          stiffness: spring.stiffness,
+          mass: spring.mass ?? 1,
+          useNativeDriver: val !== overlayAnim
+        });
+      }
+      return Animated.timing(val, {
+        toValue: target,
+        duration,
+        easing: toVisible ? Easing.out(Easing.cubic) : Easing.in(Easing.cubic),
+        useNativeDriver: val !== overlayAnim
+      });
+    };
+    Animated.parallel([makeAnim(anim, toValue), makeAnim(overlayAnim, toVisible ? 1 : 0)]).start(({
+      finished
+    }) => {
+      isAnimating.current = false;
+      if (finished) onDone?.();
+    });
+  }, [anim, overlayAnim, animation, duration, spring, HIDDEN, VISIBLE]);
+
+  // ── Sync visible prop ──────────────────────────────────────────────────────
+  useEffect(() => {
+    if (visible) {
+      if (!mounted) setMounted(true);
+      hasEverOpened.current = true;
+      setModalVisible(true);
+      onOpen?.();
+      // Give the Modal a frame to mount before animating
+      requestAnimationFrame(() => {
+        runAnimation(true, () => onOpenedRef.current?.());
+      });
+    } else {
+      runAnimation(false, () => {
+        setModalVisible(false);
+        if (destroyOnClose) {
+          setMounted(false);
+          hasEverOpened.current = false;
+        }
+        onClosedRef.current?.();
+      });
+    }
+  }, [visible]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // ── Android back button ────────────────────────────────────────────────────
+  useEffect(() => {
+    if (!visible || Platform.OS !== 'android') return;
+    const handler = BackHandler.addEventListener('hardwareBackPress', () => {
+      return onRequestClose?.() ?? false;
+    });
+    return () => handler.remove();
+  }, [visible, onRequestClose]);
+
+  // ── Overlay press ──────────────────────────────────────────────────────────
+  const handleOverlayPress = useCallback(() => {
+    onPressOverlay?.();
+    if (closeOnPressOverlay) onClose?.();
+  }, [onPressOverlay, closeOnPressOverlay, onClose]);
+
+  // ── Handle visibility ──────────────────────────────────────────────────────
+  const showHandle = _showHandle(position, showHandleProp);
+
+  // ── Animated style for the popup surface ──────────────────────────────────
+  const popupAnimatedStyle = useMemo(() => animatedStyle(animation, position, anim),
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [animation, position] // anim ref is stable
+  );
+
+  // ── Border radius ──────────────────────────────────────────────────────────
+  const radiusStyle = getBorderRadius(position, round, roundRadius);
+
+  // ── Safe area padding ──────────────────────────────────────────────────────
+  const safeStyle = {
+    paddingBottom: safeAreaBottom ? insets.bottom : 0,
+    paddingTop: safeAreaTop ? insets.top : 0
+  };
+
+  // ── Center wrapper (for center position, centers the content) ─────────────
+  const positionStyle = getPositionStyle(position);
+  if (!mounted && !modalVisible) return null;
+  return /*#__PURE__*/_jsxs(Modal, {
+    visible: modalVisible,
+    transparent: true,
+    statusBarTranslucent: true,
+    animationType: "none",
+    onRequestClose: () => onRequestClose?.(),
+    testID: testID,
+    children: [overlay && /*#__PURE__*/_jsx(Animated.View, {
+      style: [StyleSheet.absoluteFill, {
+        backgroundColor: overlayColor ?? colors.overlay,
+        opacity: overlayAnim
+      }, overlayStyle],
+      pointerEvents: "box-none",
+      children: /*#__PURE__*/_jsx(Pressable, {
+        style: StyleSheet.absoluteFill,
+        onPress: handleOverlayPress
+      })
+    }), /*#__PURE__*/_jsx(Animated.View, {
+      style: [positionStyle, popupAnimatedStyle],
+      pointerEvents: "box-none",
+      children: /*#__PURE__*/_jsxs(View, {
+        style: [S.surface, radiusStyle, safeStyle, {
+          backgroundColor: colors.background
+        }, style],
+        children: [showHandle && /*#__PURE__*/_jsx(View, {
+          style: [S.handle_wrap],
+          children: /*#__PURE__*/_jsx(View, {
+            style: [S.handle, {
+              backgroundColor: colors.handle
+            }]
+          })
+        }), title || subtitle || showClose ? /*#__PURE__*/_jsxs(View, {
+          style: [S.header, {
+            borderBottomColor: colors.headerBorder
+          }, showHandle && S.header_no_top_pad, headerStyle],
+          children: [/*#__PURE__*/_jsxs(View, {
+            style: S.header_text,
+            children: [title ? typeof title === 'string' ? /*#__PURE__*/_jsx(Text, {
+              style: [S.header_title, {
+                color: colors.headerTitle
+              }, titleStyle],
+              numberOfLines: 1,
+              children: title
+            }) : title : null, subtitle ? typeof subtitle === 'string' ? /*#__PURE__*/_jsx(Text, {
+              style: [S.header_subtitle, {
+                color: colors.headerSubtitle
+              }, subtitleStyle],
+              numberOfLines: 1,
+              children: subtitle
+            }) : subtitle : null]
+          }), showClose && onClose ? /*#__PURE__*/_jsx(CloseButton, {
+            onPress: onClose,
+            color: colors.closeIcon,
+            bg: colors.closeIconBg
+          }) : null]
+        }) : null, mounted ? children : null]
+      })
+    })]
+  });
+};
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+function _showHandle(position, explicit) {
+  if (explicit !== undefined) return explicit;
+  return position === 'bottom';
+}
+
+// ─── Styles ───────────────────────────────────────────────────────────────────
+
+const S = StyleSheet.create({
+  surface: {
+    overflow: 'hidden'
+  },
+  handle_wrap: {
+    alignItems: 'center',
+    paddingTop: 10,
+    paddingBottom: 4
+  },
+  handle: {
+    width: 36,
+    height: 4,
+    borderRadius: 2
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 20,
+    paddingTop: 16,
+    paddingBottom: 14,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    gap: 12
+  },
+  header_no_top_pad: {
+    paddingTop: 6
+  },
+  header_text: {
+    flex: 1,
+    gap: 3
+  },
+  header_title: {
+    fontSize: 17,
+    fontWeight: '600',
+    letterSpacing: -0.2
+  },
+  header_subtitle: {
+    fontSize: 13,
+    fontWeight: '400'
+  }
+});
+export const Popup = /*#__PURE__*/memo(PopupInner);
+//# sourceMappingURL=Popup.js.map