@userflow-tech/react-native 0.1.1 → 0.2.0

package/lib/module/surfaces/tooltip/TooltipBubble.js

@@ -1,7 +1,8 @@
 "use strict";
 
 import * as React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { Platform, StyleSheet, View } from 'react-native';
+import { CardFade } from "../CardFade.js";
 import { ABSOLUTE_FILL } from "../absoluteFill.js";
 import { TooltipNotch } from "./TooltipNotch.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -9,27 +10,66 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Tooltip chrome shell: diamond notch + card fill sharing one shadow family.
  *
  * Web draws card and notch as a single silhouette under `filter: drop-shadow`.
- * RN has no silhouette filter, so the card uses a dedicated shadow layer and
- * `elevation` on the fill (Android). The notch itself is not shadowed — a
- * second blurred shadow on the rotated square leaves a gray band at the pointer
- * base when it points up into the anchor. An inset fill diamond on top erases
- * that seam (and bordered stroke gaps) without clipping the outer tip.
+ * RN has no silhouette filter — on both platforms a view's shadow is derived
+ * from that view's own bounds, and the notch hangs at a negative offset
+ * *outside* the card's bounds. No shadow cast by the card or by the shell can
+ * ever reach it, so the diamond has to cast its own, and the two shadows
+ * together trace the card + tip outline.
+ *
+ * The order is what keeps that honest. A shadow is painted with its own layer,
+ * so only a layer drawn *before* the notch may cast a card-sized shadow —
+ * otherwise it lands on the exposed tip as a gray band. Hence: shadow layer,
+ * then notch, then the fill and seam cover, both silent.
+ *
+ * iOS gets `shadow*` on the notch (`elevation` is inert there); Android gets
+ * `elevation`, which is the only shadow it honors on a rotated view.
  */
 export function TooltipBubble({
   chrome,
   notchPosition,
   style,
   onLayout,
-  children
+  children,
+  maxHeight,
+  showNotch: showNotchProp = true
 }) {
-  const showNotch = chrome.notchSize > 0;
+  const showNotch = showNotchProp && chrome.notchSize > 0;
   const bordered = chrome.borderWidth > 0;
+  // Only bordered themes need the diamond seam cover, to keep the stroke even
+  // where the notch meets the card. It is opaque and sits above the fill, so
+  // borderless themes must skip it or it paints over the card's own text.
+  const showSeamCover = showNotch && bordered;
+  // Borderless: a 2pt strip of fill color on the pointer edge covers the iOS
+  // hairline where `overflow: hidden` anti-aliases the card against the dim.
+  // Inset by the radius so it does not square off the corners. Bordered cards
+  // already have a stroke there — painting fill over it would hide the border.
+  const notchEdge = showNotch && !bordered ? protrudingNotchEdge(notchPosition) : null;
   // Web paints the notch with border color when bordered, otherwise the card
   // fill. Never use literal `transparent` — that hides the pointer entirely.
   const notchColor = bordered && chrome.borderColor !== 'transparent' ? chrome.borderColor : chrome.backgroundColor;
-  // Android draws by elevation, so every layer above the card shadow has to be
+  // Android draws by elevation, so every layer above the shadow layer has to be
   // raised with it or the opaque shadow layer paints over the card body.
   const elevation = chrome.shadowStyle.elevation ?? 0;
+  // Raising a layer on Android also makes it cast its own elevation shadow,
+  // painted directly beneath that layer, so anything above the notch has to
+  // give its shadow up. `shadowColor: 'transparent'` does that on both
+  // platforms — it is the one shadow prop Android honors (API 28+), and on iOS
+  // it cancels the shadow outright — so this needs no platform split.
+  const raisedSilent = {
+    elevation,
+    shadowColor: 'transparent'
+  };
+  // The one caster above the shadow layer. iOS reads this diamond's own
+  // bounds, and the 45° layer rotation carries the shadow with it, so the tip
+  // gets a shadow shaped like the tip.
+  const notchShadow = Platform.OS === 'ios' ? {
+    shadowColor: chrome.shadowStyle.shadowColor,
+    shadowOffset: chrome.shadowStyle.shadowOffset,
+    shadowOpacity: chrome.shadowStyle.shadowOpacity,
+    shadowRadius: chrome.shadowStyle.shadowRadius
+  } : {
+    elevation
+  };
   const notchProps = {
     notchSize: chrome.notchSize,
     ...(notchPosition.top !== undefined ? {
@@ -45,7 +85,7 @@ export function TooltipBubble({
       right: notchPosition.right
     } : {})
   };
-  return /*#__PURE__*/_jsxs(View, {
+  return /*#__PURE__*/_jsxs(CardFade, {
     testID: "userflow-tooltip-card",
     accessibilityViewIsModal: true,
     pointerEvents: "auto",
@@ -53,37 +93,106 @@ export function TooltipBubble({
     style: [styles.shell, style],
     children: [/*#__PURE__*/_jsx(View, {
       pointerEvents: "none",
+      testID: "userflow-tooltip-card-shadow",
       style: [styles.cardShadow, chrome.shadowStyle, {
-        elevation: 0,
         borderRadius: chrome.borderRadius,
         backgroundColor: chrome.backgroundColor
       }]
     }), showNotch ? /*#__PURE__*/_jsx(TooltipNotch, {
       ...notchProps,
       notchColor: notchColor,
-      style: styles.notchLayer
+      style: [styles.notchLayer, notchShadow]
     }) : null, /*#__PURE__*/_jsx(View, {
-      style: [chrome.fillStyle, styles.fill, {
-        elevation
-      }],
-      children: children
-    }), showNotch ? /*#__PURE__*/_jsx(TooltipNotch, {
+      testID: "userflow-tooltip-card-fill",
+      style: [chrome.fillStyle, styles.fill,
+      // Keep the opaque rounded skin unclipped so its top edge composites
+      // onto this layer instead of the dim. Content still clips inside.
+      styles.fillSkin, raisedSilent, maxHeight != null ? {
+        maxHeight
+      } : null],
+      children: /*#__PURE__*/_jsx(View, {
+        testID: "userflow-tooltip-card-fill-clip",
+        style: [styles.fillClip, {
+          borderRadius: chrome.borderRadius
+        }, maxHeight != null ? {
+          maxHeight
+        } : null],
+        children: children
+      })
+    }), notchEdge ? /*#__PURE__*/_jsx(View, {
+      pointerEvents: "none",
+      testID: "userflow-tooltip-notch-edge-cap",
+      style: [styles.notchSeamCover, edgeCapStyle(notchEdge, chrome.borderRadius, chrome.backgroundColor), raisedSilent]
+    }) : null, showSeamCover ? /*#__PURE__*/_jsx(TooltipNotch, {
       ...notchProps,
       notchColor: chrome.backgroundColor,
       inset: Math.max(chrome.borderWidth, 1),
-      style: [styles.notchSeamCover, {
-        elevation
-      }],
+      style: [styles.notchSeamCover, raisedSilent],
       testID: "userflow-tooltip-notch-seam"
     }) : null]
   });
 }
+
+/** Pixel-thick cover for the fill hairline on the pointer's card edge. */
+const EDGE_CAP_THICKNESS = 2;
+
+/**
+ * The pointer hangs *outside* the card, so its edge offset is negative.
+ * Along-edge alignment (the other axis) is positive and must be ignored.
+ */
+function protrudingNotchEdge(position) {
+  if (position.top != null && position.top < 0) return 'top';
+  if (position.bottom != null && position.bottom < 0) return 'bottom';
+  if (position.left != null && position.left < 0) return 'left';
+  if (position.right != null && position.right < 0) return 'right';
+  return null;
+}
+function edgeCapStyle(edge, borderRadius, backgroundColor) {
+  const inset = borderRadius;
+  const along = {
+    position: 'absolute',
+    backgroundColor
+  };
+  switch (edge) {
+    case 'top':
+      return {
+        ...along,
+        top: 0,
+        left: inset,
+        right: inset,
+        height: EDGE_CAP_THICKNESS
+      };
+    case 'bottom':
+      return {
+        ...along,
+        bottom: 0,
+        left: inset,
+        right: inset,
+        height: EDGE_CAP_THICKNESS
+      };
+    case 'left':
+      return {
+        ...along,
+        left: 0,
+        top: inset,
+        bottom: inset,
+        width: EDGE_CAP_THICKNESS
+      };
+    case 'right':
+      return {
+        ...along,
+        right: 0,
+        top: inset,
+        bottom: inset,
+        width: EDGE_CAP_THICKNESS
+      };
+  }
+}
 const styles = StyleSheet.create({
   shell: {
     position: 'relative',
     backgroundColor: 'transparent',
     overflow: 'visible',
-    maxHeight: '80%',
     flexShrink: 1
   },
   cardShadow: {
@@ -94,7 +203,19 @@ const styles = StyleSheet.create({
     zIndex: 1
   },
   fill: {
-    zIndex: 2
+    zIndex: 2,
+    minHeight: 0,
+    flexShrink: 1
+  },
+  fillSkin: {
+    overflow: 'visible'
+  },
+  fillClip: {
+    overflow: 'hidden',
+    minHeight: 0,
+    flexShrink: 1
+    // Do not set flexGrow / flex: 1. The card sizes to its content; grow in an
+    // auto-height parent collapses the fill to 0 and leaves only the notch.
   },
   notchSeamCover: {
     zIndex: 3

package/lib/module/surfaces/tooltip/TooltipBubble.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","StyleSheet","View","ABSOLUTE_FILL","TooltipNotch","jsx","_jsx","jsxs","_jsxs","TooltipBubble","chrome","notchPosition","style","onLayout","children","showNotch","notchSize","bordered","borderWidth","notchColor","borderColor","backgroundColor","elevation","shadowStyle","notchProps","top","undefined","bottom","left","right","testID","accessibilityViewIsModal","pointerEvents","styles","shell","cardShadow","borderRadius","notchLayer","fillStyle","fill","inset","Math","max","notchSeamCover","create","position","overflow","maxHeight","flexShrink","zIndex"],"sourceRoot":"../../../../src","sources":["surfaces/tooltip/TooltipBubble.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","Platform","StyleSheet","View","CardFade","ABSOLUTE_FILL","TooltipNotch","jsx","_jsx","jsxs","_jsxs","TooltipBubble","chrome","notchPosition","style","onLayout","children","maxHeight","showNotch","showNotchProp","notchSize","bordered","borderWidth","showSeamCover","notchEdge","protrudingNotchEdge","notchColor","borderColor","backgroundColor","elevation","shadowStyle","raisedSilent","shadowColor","notchShadow","OS","shadowOffset","shadowOpacity","shadowRadius","notchProps","top","undefined","bottom","left","right","testID","accessibilityViewIsModal","pointerEvents","styles","shell","cardShadow","borderRadius","notchLayer","fillStyle","fill","fillSkin","fillClip","notchSeamCover","edgeCapStyle","inset","Math","max","EDGE_CAP_THICKNESS","position","edge","along","height","width","create","overflow","flexShrink","zIndex","minHeight"],"sourceRoot":"../../../../src","sources":["surfaces/tooltip/TooltipBubble.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/surfaces/tooltip/TooltipCutout.js

@@ -3,18 +3,61 @@
 import * as React from 'react';
 import { Dimensions, StyleSheet, View } from 'react-native';
 import { ABSOLUTE_FILL } from "../absoluteFill.js";
+import { getSurfaceInteractionBlocking } from "../surfaceInteractionConfig.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** No hole yet: collapses the top/left/right bands, leaving one full-screen band. */
+const NO_HOLE = {
+  top: 0,
+  left: 0,
+  width: 0,
+  height: 0
+};
+
+/**
+ * Intersect the hole with the screen, or drop it when the target is off-screen.
+ *
+ * Targets are measured before `scrollAnchorIntoView` has brought them in, so an
+ * unclamped rect can sit above the viewport. The bands then disagree — the top
+ * one collapses while the side ones still paint at y=0 — and leave phantom dim
+ * blocks pinned to the top edge that reflow as the scroll settles.
+ */
+function clampToScreen(rect, screenWidth, screenHeight) {
+  if (rect == null) {
+    return null;
+  }
+  const top = Math.max(0, rect.top);
+  const left = Math.max(0, rect.left);
+  const bottom = Math.min(screenHeight, rect.top + rect.height);
+  const right = Math.min(screenWidth, rect.left + rect.width);
+  if (bottom <= top || right <= left) {
+    return null;
+  }
+  return {
+    top,
+    left,
+    width: right - left,
+    height: bottom - top
+  };
+}
+
 /**
  * Four-block dimmed cutout around the padded target (web tooltip backdrop).
  *
- * Dim bands use `pointerEvents="none"` so touches reach the app — React Native
- * cannot block taps while allowing scroll the way web's `mousedown`-only
- * swallow does. When `targetBlocked`, only the hole (target) is covered with a
- * transparent `pointerEvents="auto"` layer.
+ * When surface interaction blocking is enabled (default), dim bands use
+ * `pointerEvents="auto"` so taps outside the hole are swallowed. The target
+ * hole stays open for guided-tour taps unless `targetBlocked` seals it.
+ *
+ * When blocking is disabled (`Userflow.setSurfaceInteractionBlocking(false)`),
+ * bands revert to `pointerEvents="none"` so the host app stays scrollable and
+ * tappable — legacy pass-through behavior. The `targetBlocked` hole seal is
+ * unchanged and still mounts when set.
  *
- * MVP note: each block uses its own translucent opacity. That matches non-overlapping
- * tiles well, but can look slightly uneven vs web’s single shadow-hole when other
- * translucent overlays stack. Acceptable for Phase 3; a single masked layer can come later.
+ * The bands are opaque and share one translucent parent, so the dim is composited
+ * once. Per-band opacity looks identical while the tiles truly abut, but any frame
+ * where two of them overlap darkens twice: going from no hole to a measured one
+ * grows the top band while the bottom band still covers the screen, which painted a
+ * doubled rectangle over the upper screen until the geometry settled. Group opacity
+ * makes overlap invisible instead of relying on the four rects always agreeing.
  */
 export function TooltipCutout({
   targetRect,
@@ -26,59 +69,69 @@ export function TooltipCutout({
     width: sw,
     height: sh
   } = Dimensions.get('window');
+  const hole = clampToScreen(targetRect, sw, sh);
   const {
     top,
     left,
     width,
     height
-  } = targetRect;
+  } = hole ?? NO_HOLE;
   const right = left + width;
   const bottom = top + height;
   const blockStyle = {
-    backgroundColor: backdropColor,
-    opacity: backdropOpacity
+    backgroundColor: backdropColor
   };
+  const blockInteraction = getSurfaceInteractionBlocking();
+  const bandPointerEvents = blockInteraction ? 'auto' : 'none';
+  const dimPointerEvents = blockInteraction ? 'box-none' : 'none';
   return /*#__PURE__*/_jsxs(View, {
     style: ABSOLUTE_FILL,
     pointerEvents: "box-none",
     testID: "userflow-tooltip-cutout",
-    children: [/*#__PURE__*/_jsx(View, {
-      pointerEvents: "none",
-      testID: "userflow-tooltip-cutout-top",
-      style: [styles.block, blockStyle, {
-        top: 0,
-        left: 0,
-        width: sw,
-        height: Math.max(0, top)
-      }]
-    }), /*#__PURE__*/_jsx(View, {
-      pointerEvents: "none",
-      testID: "userflow-tooltip-cutout-left",
-      style: [styles.block, blockStyle, {
-        top: Math.max(0, top),
-        left: 0,
-        width: Math.max(0, left),
-        height: Math.max(0, height)
-      }]
-    }), /*#__PURE__*/_jsx(View, {
-      pointerEvents: "none",
-      testID: "userflow-tooltip-cutout-right",
-      style: [styles.block, blockStyle, {
-        top: Math.max(0, top),
-        left: Math.max(0, right),
-        width: Math.max(0, sw - right),
-        height: Math.max(0, height)
-      }]
-    }), /*#__PURE__*/_jsx(View, {
-      pointerEvents: "none",
-      testID: "userflow-tooltip-cutout-bottom",
-      style: [styles.block, blockStyle, {
-        top: Math.max(0, bottom),
-        left: 0,
-        width: sw,
-        height: Math.max(0, sh - bottom)
-      }]
-    }), targetBlocked ? /*#__PURE__*/_jsx(View, {
+    children: [/*#__PURE__*/_jsxs(View, {
+      pointerEvents: dimPointerEvents,
+      testID: "userflow-tooltip-cutout-dim",
+      style: [ABSOLUTE_FILL, {
+        opacity: backdropOpacity
+      }],
+      children: [/*#__PURE__*/_jsx(View, {
+        pointerEvents: bandPointerEvents,
+        testID: "userflow-tooltip-cutout-top",
+        style: [styles.block, blockStyle, {
+          top: 0,
+          left: 0,
+          width: sw,
+          height: Math.max(0, top)
+        }]
+      }), /*#__PURE__*/_jsx(View, {
+        pointerEvents: bandPointerEvents,
+        testID: "userflow-tooltip-cutout-left",
+        style: [styles.block, blockStyle, {
+          top: Math.max(0, top),
+          left: 0,
+          width: Math.max(0, left),
+          height: Math.max(0, height)
+        }]
+      }), /*#__PURE__*/_jsx(View, {
+        pointerEvents: bandPointerEvents,
+        testID: "userflow-tooltip-cutout-right",
+        style: [styles.block, blockStyle, {
+          top: Math.max(0, top),
+          left: Math.max(0, right),
+          width: Math.max(0, sw - right),
+          height: Math.max(0, height)
+        }]
+      }), /*#__PURE__*/_jsx(View, {
+        pointerEvents: bandPointerEvents,
+        testID: "userflow-tooltip-cutout-bottom",
+        style: [styles.block, blockStyle, {
+          top: Math.max(0, bottom),
+          left: 0,
+          width: sw,
+          height: Math.max(0, sh - bottom)
+        }]
+      })]
+    }), targetBlocked && hole != null ? /*#__PURE__*/_jsx(View, {
       pointerEvents: "auto",
       testID: "userflow-tooltip-target-block",
       style: [styles.block, {

package/lib/module/surfaces/tooltip/TooltipCutout.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Dimensions","StyleSheet","View","ABSOLUTE_FILL","jsx","_jsx","jsxs","_jsxs","TooltipCutout","targetRect","backdropColor","backdropOpacity","targetBlocked","width","sw","height","sh","get","top","left","right","bottom","blockStyle","backgroundColor","opacity","style","pointerEvents","testID","children","styles","block","Math","max","create","position"],"sourceRoot":"../../../../src","sources":["surfaces/tooltip/TooltipCutout.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","Dimensions","StyleSheet","View","ABSOLUTE_FILL","getSurfaceInteractionBlocking","jsx","_jsx","jsxs","_jsxs","NO_HOLE","top","left","width","height","clampToScreen","rect","screenWidth","screenHeight","Math","max","bottom","min","right","TooltipCutout","targetRect","backdropColor","backdropOpacity","targetBlocked","sw","sh","get","hole","blockStyle","backgroundColor","blockInteraction","bandPointerEvents","dimPointerEvents","style","pointerEvents","testID","children","opacity","styles","block","create","position"],"sourceRoot":"../../../../src","sources":["surfaces/tooltip/TooltipCutout.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/surfaces/tooltip/TooltipHighlight.js

@@ -0,0 +1,118 @@
+"use strict";
+
+import * as React from 'react';
+import { Platform, StyleSheet, View } from 'react-native';
+import { isHighlightVisible } from "../resolveHighlightChrome.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Mobile focus ring for the tooltip hole (mockup: thin brand stroke + soft
+ * halo). Web uses one CSS `box-shadow`; RN approximates that with a 2px
+ * stroke, one translucent band, and a real blur where the platform can
+ * paint a colored shadow (`shadow*` on iOS, `boxShadow` on RN 0.76+).
+ *
+ * Ring chrome is passed as a style array so `StyleSheet.create` numeric IDs
+ * are not object-spread (that drops `position: 'absolute'` on device).
+ */
+export function TooltipHighlight({
+  targetRect,
+  chrome
+}) {
+  if (!isHighlightVisible(chrome)) return null;
+  const rings = buildHighlightRings(targetRect, chrome);
+  if (rings.length === 0) return null;
+  return /*#__PURE__*/_jsx(View, {
+    pointerEvents: "none",
+    testID: "userflow-tooltip-highlight",
+    children: rings.map(ring => /*#__PURE__*/_jsx(View, {
+      pointerEvents: "none",
+      testID: ring.testID,
+      style: ring.style
+    }, ring.testID))
+  });
+}
+export function buildHighlightRings(rect, chrome) {
+  if (rect.width <= 0 || rect.height <= 0) return [];
+  const inset = chrome.type === 'INSIDE';
+  const rings = [];
+  let consumed = 0;
+  if (chrome.strokeWidth > 0) {
+    const frame = ringFrame(rect, chrome.strokeWidth, consumed, inset, chrome.borderRadius);
+    if (frame) {
+      rings.push({
+        testID: 'userflow-tooltip-highlight-stroke',
+        style: [styles.ring, frame, {
+          borderWidth: chrome.strokeWidth,
+          borderColor: chrome.color,
+          ...strokeGlow(chrome)
+        }]
+      });
+      consumed += chrome.strokeWidth;
+    }
+  }
+  if (chrome.radius > 0) {
+    const frame = ringFrame(rect, chrome.radius, consumed, inset, chrome.borderRadius);
+    if (frame) {
+      rings.push({
+        testID: 'userflow-tooltip-highlight-glow',
+        style: [styles.ring, frame, {
+          borderWidth: chrome.radius,
+          borderColor: chrome.glowColor
+        }]
+      });
+    }
+  }
+  return rings;
+}
+function strokeGlow(chrome) {
+  const blur = Math.max(chrome.radius, 6);
+  const glow = {
+    shadowColor: chrome.color,
+    shadowOffset: {
+      width: 0,
+      height: 0
+    },
+    shadowOpacity: Math.min(0.45, chrome.opacity),
+    shadowRadius: blur
+  };
+  if (Platform?.OS !== 'ios') {
+    glow.boxShadow = `0px 0px ${blur}px 0px ${chrome.glowColor}`;
+  }
+  return glow;
+}
+function ringFrame(rect, borderWidth, alreadyConsumed, inset, cornerRadius) {
+  if (borderWidth <= 0) return null;
+  const {
+    top,
+    left,
+    width,
+    height
+  } = rect;
+  if (inset) {
+    const nextWidth = width - alreadyConsumed * 2;
+    const nextHeight = height - alreadyConsumed * 2;
+    if (nextWidth < borderWidth * 2 || nextHeight < borderWidth * 2) return null;
+    return {
+      top: top + alreadyConsumed,
+      left: left + alreadyConsumed,
+      width: nextWidth,
+      height: nextHeight,
+      borderRadius: Math.max(0, cornerRadius - alreadyConsumed)
+    };
+  }
+  const outset = alreadyConsumed + borderWidth;
+  return {
+    top: top - outset,
+    left: left - outset,
+    width: width + outset * 2,
+    height: height + outset * 2,
+    borderRadius: cornerRadius + outset
+  };
+}
+const styles = StyleSheet.create({
+  ring: {
+    position: 'absolute',
+    backgroundColor: 'transparent',
+    overflow: 'visible'
+  }
+});
+//# sourceMappingURL=TooltipHighlight.js.map

package/lib/module/surfaces/tooltip/TooltipHighlight.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Platform","StyleSheet","View","isHighlightVisible","jsx","_jsx","TooltipHighlight","targetRect","chrome","rings","buildHighlightRings","length","pointerEvents","testID","children","map","ring","style","rect","width","height","inset","type","consumed","strokeWidth","frame","ringFrame","borderRadius","push","styles","borderWidth","borderColor","color","strokeGlow","radius","glowColor","blur","Math","max","glow","shadowColor","shadowOffset","shadowOpacity","min","opacity","shadowRadius","OS","boxShadow","alreadyConsumed","cornerRadius","top","left","nextWidth","nextHeight","outset","create","position","backgroundColor","overflow"],"sourceRoot":"../../../../src","sources":["surfaces/tooltip/TooltipHighlight.tsx"],"mappings":"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","ignoreList":[]}