@ntbjs/react-components 2.0.14 → 3.0.0-rc.1

package/build/data/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../../../src/components/data/Tooltip/Tooltip.js"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\nimport * as S from './Tooltip.styled';\n\n/**\n * Tooltips display informative text when users hover over, focus on, or tap an element.\n *\n * ### Import\n *\n * ``` js\n * import { Tooltip } from '@ntbjs/react-components/data'\n * // or\n * import Tooltip from '@ntbjs/react-components/data/Tooltip'\n * ```\n */\n\nconst Tooltip = React.forwardRef(function Tooltip(\n  { content, interactive, placement, duration, trigger, visible, children, ...props },\n  ref\n) {\n  const eventHandlerProps = ['onClick', 'onChange', 'onSubmit'];\n\n  const filteredProps = Object.fromEntries(\n    Object.entries(props).filter(([key]) => !eventHandlerProps.includes(key))\n  );\n\n  return (\n    <div>\n      <S.Tooltip\n        ref={ref}\n        content={content}\n        interactive={interactive}\n        placement={placement}\n        duration={duration}\n        trigger={trigger}\n        visible={visible}\n        animation={'shift-away-subtle'}\n        {...filteredProps}\n      >\n        {children}\n      </S.Tooltip>\n    </div>\n  );\n});\n\nTooltip.defaultProps = {\n  content: 'Tooltip',\n  interactive: false,\n  placement: 'top',\n  duration: 350\n};\n\n/**\n * https://atomiks.github.io/tippyjs/v6/all-props/\n * @type {{content: Validator<NonNullable<string>>}}\n */\nTooltip.propTypes = {\n  /**\n   * The content of the `Tooltip`.\n   *\n   * **NB!** If the content is a `string`, it should be [wrapped in a tag](https://github.com/atomiks/tippyjs-react/issues/283#issuecomment-1268986001), e.g.:\n   *\n   * `<span>{content}</span>`.\n   */\n  content: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,\n\n  /**\n   * Determines if the tippy has interactive content inside of it, so that it can be\n   * hovered over and clicked inside without hiding.\n   */\n  interactive: PropTypes.bool,\n\n  /**\n   * The preferred placement of the tippy. Note that Popper's flip modifier can change\n   * this to the opposite placement if it has more space.\n   */\n  placement: PropTypes.oneOf([\n    'top',\n    'top-start',\n    'top-end',\n    'right',\n    'right-start',\n    'right-end',\n    'bottom',\n    'bottom-start',\n    'bottom-end',\n    'left',\n    'left-start',\n    'left-end',\n    'auto',\n    'auto-start',\n    'auto-end'\n  ]),\n  /**\n   * Duration in ms of the transition animation.\n   */\n  duration: PropTypes.number,\n\n  /**\n   * Determines the events that cause the tippy to show. Multiple event names are separated by\n   * spaces.\n   *\n   * *Example events:*\n   *\n   * `trigger: 'click'`\n   *\n   * `trigger: 'focusin'`\n   *\n   * `trigger: 'mouseenter click'`\n   *\n   * `trigger: 'mouseenter'`\n   *\n   * --\n   */\n  trigger: PropTypes.oneOf([\n    'mouseenter',\n    'mouseenter focus',\n    'click',\n    'focusin',\n    'mouseenter click',\n    ''\n  ]),\n  /**\n   * Determines if the tippy is visible without trigger\n   */\n  visible: PropTypes.bool,\n\n  children: PropTypes.node\n};\n\nexport default Tooltip;\n"],"names":["Tooltip","React","forwardRef","content","interactive","placement","duration","trigger","visible","children","props","ref","eventHandlerProps","filteredProps","Object","fromEntries","entries","filter","key","includes","createElement","S","_extends","animation","defaultProps","propTypes","process","env","NODE_ENV","PropTypes","oneOfType","string","element","isRequired","bool","oneOf","number","node"],"mappings":";;;;;AAgBMA,MAAAA,OAAO,GAAGC,cAAK,CAACC,UAAU,CAAC,SAASF,OAAOA,CAC/C;EAAEG,OAAO;EAAEC,WAAW;EAAEC,SAAS;EAAEC,QAAQ;EAAEC,OAAO;EAAEC,OAAO;EAAEC,QAAQ;EAAE,GAAGC,KAAAA;AAAM,CAAC,EACnFC,GAAG,EACH;EACA,MAAMC,iBAAiB,GAAG,CAAC,SAAS,EAAE,UAAU,EAAE,UAAU,CAAC,CAAA;AAE7D,EAAA,MAAMC,aAAa,GAAGC,MAAM,CAACC,WAAW,CACtCD,MAAM,CAACE,OAAO,CAACN,KAAK,CAAC,CAACO,MAAM,CAAC,CAAC,CAACC,GAAG,CAAC,KAAK,CAACN,iBAAiB,CAACO,QAAQ,CAACD,GAAG,CAAC,CAC1E,CAAC,CAAA;AAED,EAAA,OACEjB,cAAA,CAAAmB,aAAA,CAAA,KAAA,EAAA,IAAA,EACEnB,cAAA,CAAAmB,aAAA,CAACC,SAAS,EAAAC,QAAA,CAAA;AACRX,IAAAA,GAAG,EAAEA,GAAI;AACTR,IAAAA,OAAO,EAAEA,OAAQ;AACjBC,IAAAA,WAAW,EAAEA,WAAY;AACzBC,IAAAA,SAAS,EAAEA,SAAU;AACrBC,IAAAA,QAAQ,EAAEA,QAAS;AACnBC,IAAAA,OAAO,EAAEA,OAAQ;AACjBC,IAAAA,OAAO,EAAEA,OAAQ;AACjBe,IAAAA,SAAS,EAAE,mBAAA;AAAoB,GAAA,EAC3BV,aAAa,CAAA,EAEhBJ,QACQ,CACR,CAAC,CAAA;AAEV,CAAC,EAAC;AAEFT,OAAO,CAACwB,YAAY,GAAG;AACrBrB,EAAAA,OAAO,EAAE,SAAS;AAClBC,EAAAA,WAAW,EAAE,KAAK;AAClBC,EAAAA,SAAS,EAAE,KAAK;AAChBC,EAAAA,QAAQ,EAAE,GAAA;AACZ,CAAC,CAAA;AAMDN,OAAO,CAACyB,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAG,YAAA,GAAA;AAQlBzB,EAAAA,OAAO,EAAE0B,SAAS,CAACC,SAAS,CAAC,CAACD,SAAS,CAACE,MAAM,EAAEF,SAAS,CAACG,OAAO,CAAC,CAAC,CAACC,UAAU;EAM9E7B,WAAW,EAAEyB,SAAS,CAACK,IAAI;AAM3B7B,EAAAA,SAAS,EAAEwB,SAAS,CAACM,KAAK,CAAC,CACzB,KAAK,EACL,WAAW,EACX,SAAS,EACT,OAAO,EACP,aAAa,EACb,WAAW,EACX,QAAQ,EACR,cAAc,EACd,YAAY,EACZ,MAAM,EACN,YAAY,EACZ,UAAU,EACV,MAAM,EACN,YAAY,EACZ,UAAU,CACX,CAAC;EAIF7B,QAAQ,EAAEuB,SAAS,CAACO,MAAM;AAkB1B7B,EAAAA,OAAO,EAAEsB,SAAS,CAACM,KAAK,CAAC,CACvB,YAAY,EACZ,kBAAkB,EAClB,OAAO,EACP,SAAS,EACT,kBAAkB,EAClB,EAAE,CACH,CAAC;EAIF3B,OAAO,EAAEqB,SAAS,CAACK,IAAI;EAEvBzB,QAAQ,EAAEoB,SAAS,CAACQ,IAAAA;AACtB,CAAC,GAAA,EAAA;;;;"}
+{"version":3,"file":"Tooltip.js","sources":["../../../src/components/data/Tooltip/Tooltip.tsx"],"sourcesContent":["import React from 'react';\n\nimport { FloatingPortal, useMergeRefs } from '@floating-ui/react';\n\nimport useFloatingPopover from '../../../hooks/useFloatingPopover';\nimport { getElementRef } from '../../../utils/getElementRef';\nimport { SharedFloatingArrow, TOOLTIP_ARROW } from '../_shared/FloatingArrow.styled';\nimport * as S from './Tooltip.styled';\n\nimport type { OpenChangeReason } from '@floating-ui/react';\nimport type { PopoverPlacement, PopperOffset } from '../../../hooks/useFloatingPopover';\n\n/**\n * tippy's own defaults for the three props it applied unconditionally and this component\n * never mentioned. All three are OBSERVABLE — they were on every tooltip in both consumers\n * — so they are reproduced rather than dropped. Measured in `tippy.js/dist/tippy.cjs.js`:\n *\n * ```js\n * var renderProps = { …, arrow: true, maxWidth: 350, zIndex: 9999, … };\n * var defaultProps = Object.assign({ …, offset: [0, 10], trigger: 'mouseenter focus', … });\n * ```\n *\n * and applied as\n *\n * ```js\n * box.style.maxWidth = maxWidth + 'px';            // on the box\n * popper.style.zIndex = String(zIndex);            // on the positioner\n * popper.style.pointerEvents = interactive ? '' : 'none';\n * ```\n *\n * `maxWidth` is the one most likely to be mistaken for dead. Plan C6 lists it among the\n * props with \"no consumer usage\", which is true of the PROP and false of its EFFECT: tippy\n * wrote `max-width: 350px` onto every box it ever rendered, so it decides where tooltip text\n * wraps. Accepting-but-ignoring it — C6's remedy for `modifiers` and `popperOptions` — would\n * have unwrapped every multi-line tooltip in both apps. It is implemented instead.\n */\nconst TIPPY_DEFAULT_ARROW = true;\nconst TIPPY_DEFAULT_MAX_WIDTH = 350;\nconst TIPPY_DEFAULT_Z_INDEX = 9999;\n\n/**\n * THE OFFSET, AND WHY `Tooltip` PASSES `arrowHeight: 0` WHILE `Popover` PASSES 15.\n *\n * `useFloatingPopover` documents its `offset` as `[skidding, tipGap]` and adds the arrow\n * height back, so that `Popover` can delete the `errorOffset = arrow ? 15 : 0` memo it\n * carried. That convention is correct FOR `Popover` and wrong here, and the difference is\n * not a matter of taste — it is what the two components actually did:\n *\n * - `Popover.tsx` computed `offset={[offset[0], offset[1] + errorOffset]}` and handed the\n *   SUM to tippy. Its public `offset` was therefore a tip gap, and the hook absorbing the\n *   `+15` keeps that prop meaning what it has always meant.\n * - `Tooltip.tsx` passed NOTHING. tippy's raw default `[0, 10]` applied, and Popper's\n *   `offset` modifier is a distance from the reference to the FLOATING BOX with no arrow\n *   term anywhere in it. So this component's offset has always been a BOX distance.\n *\n * Feeding a box distance to a hook that adds an arrow height would push every tooltip 7px\n * further out, and — worse — it would move the 6 consumer call sites that pass\n * `arrow={false}` by a DIFFERENT amount from the ones that do not, because tippy's box\n * distance does not depend on whether an arrow is drawn. `arrowHeight: 0` makes the hook's\n * main axis equal `offset[1]` exactly, for both.\n *\n * The result is that both the box and the arrow tip land where they do today: box 10px from\n * the reference, arrow 7px of protrusion (see `TOOLTIP_ARROW`), tip 3px from the reference\n * — which is exactly tippy's 10 − 7 = 3. `arrowHeight` only feeds the offset maths; passing\n * 0 does not stop the arrow being rendered or measured.\n */\nconst TOOLTIP_OFFSET: PopperOffset = [0, 10];\nconst TOOLTIP_ARROW_HEIGHT_IS_IN_THE_OFFSET_ALREADY = 0;\n\n/**\n * `max-width: calc(100vw - 10px)`, which `tippy.css` applied through `[data-tippy-root]` —\n * i.e. to the positioner, on top of the box's own 350px. It only binds on a viewport\n * narrower than the tooltip, which is precisely the case it exists for, so it is carried\n * over rather than dropped as unobservable.\n */\nconst POSITIONER_MAX_WIDTH = 'calc(100vw - 10px)';\n\n/**\n * tippy's `appendTo`. `'parent'` and an implicit-parent case are real tippy behaviours, not\n * inventions — measured in `tippy.js/dist/tippy.cjs.js`:\n *\n * ```js\n * if (instance.props.interactive && appendTo === TIPPY_DEFAULT_APPEND_TO || appendTo === 'parent') {\n *   parentNode = node.parentNode;\n * } else {\n *   parentNode = invokeWithArgsOrReturn(appendTo, [node]);\n * }\n * ```\n *\n * ⚠️ THIS IS A CORRECTION TO PLAN §A3, WHICH RESOLVED C4 ON HALF THE EVIDENCE. §A3 quotes\n * `TIPPY_DEFAULT_APPEND_TO = () => document.body` and concludes that portalling by default\n * is behaviour-preserving. The line above is the other half: when `interactive` is true AND\n * `appendTo` is left at its default, tippy does NOT use that default — it renders INLINE,\n * into the reference's parent. So \"portal by default\" is behaviour-preserving only for\n * non-interactive instances. It is safe for `Tooltip`, whose `interactive` defaults to\n * `false` and which no consumer passes it to (measured across both apps), and it is a rule\n * `Popover` will have to honour, since `Popover` does have interactive call sites.\n */\nexport type TooltipAppendTo = 'parent' | Element | ((reference: Element) => Element);\n\ntype TooltipOwnProps = {\n  /**\n   * The content of the `Tooltip`.\n   *\n   * **NB!** If the content is a `string`, it should be wrapped in a tag, e.g.\n   * `<span>{content}</span>`. The requirement outlived its original cause — it was a\n   * `@tippyjs/react` quirk — but it is kept because consumers have written to it.\n   */\n  content: string | React.ReactElement<any>;\n  /**\n   * Determines if the tooltip has interactive content inside of it, so that it can be\n   * hovered over and clicked inside without hiding.\n   */\n  interactive?: boolean;\n  /**\n   * The preferred placement of the tooltip. Note that the flip middleware can change this\n   * to the opposite placement if it has more space.\n   */\n  placement?: PopoverPlacement;\n  /**\n   * Duration in ms of the transition animation.\n   */\n  duration?: number;\n  /**\n   * Determines the events that cause the tooltip to show. Multiple event names are separated\n   * by spaces.\n   *\n   * *Example events:*\n   *\n   * `trigger: 'click'`\n   *\n   * `trigger: 'focusin'`\n   *\n   * `trigger: 'mouseenter click'`\n   *\n   * `trigger: 'mouseenter'`\n   *\n   * Omitting it means `'mouseenter focus'`, and `''` means no triggers at all — both are\n   * relied on by consumer code. See `parseTrigger`.\n   *\n   * --\n   */\n  trigger?: 'mouseenter' | 'mouseenter focus' | 'click' | 'focusin' | 'mouseenter click' | '';\n  /**\n   * Determines if the tooltip is visible without trigger.\n   *\n   * Passing a boolean — **including `false`** — switches the tooltip to CONTROLLED mode and\n   * its own triggers stop firing. `undefined` leaves it uncontrolled. `useTooltipAutoShow`\n   * depends on that distinction and its `toolTipVisible` is `true | undefined` for exactly\n   * this reason.\n   */\n  visible?: boolean;\n  /**\n   * Whether the arrow is rendered. Defaults to `true`, which is tippy's default and was\n   * therefore already the behaviour; 6 consumer call sites pass `false`.\n   */\n  arrow?: boolean;\n  /**\n   * `z-index` of the positioned element. Defaults to 9999, tippy's default. 30 consumer call\n   * sites pass this, which is why it is declared here even though it was never in the old\n   * prop type — it used to typecheck only because the published `Props` widened to\n   * `TippyProps`, and that widening disappears with tippy.\n   */\n  zIndex?: number;\n  /**\n   * A disabled tooltip can never open, even under a controlled `visible={true}` — tippy's\n   * semantics, and what `useTooltipAutoShow`'s `toolTipDisabled` relies on.\n   */\n  disabled?: boolean;\n  /**\n   * `[skidding, distance]`, Popper's convention, where `distance` is the gap between the\n   * reference and the tooltip BOX. Defaults to tippy's `[0, 10]`.\n   */\n  offset?: PopperOffset;\n  /**\n   * Cap on the box's width, in px. Defaults to 350 — tippy's default, and applied to every\n   * tooltip today, so it decides where text wraps.\n   */\n  maxWidth?: number;\n  /**\n   * Where the tooltip is rendered. Defaults to `document.body`. See `TooltipAppendTo`.\n   */\n  appendTo?: TooltipAppendTo;\n  /** Fired when a press lands outside both the reference and the tooltip. */\n  onClickOutside?: (event?: Event) => void;\n  /**\n   * @deprecated Accepted and IGNORED. This was a Popper `modifiers` array; Floating UI has\n   * middleware instead and the two are not translatable prop-for-prop. Kept so that no\n   * existing call site throws — plan C6.\n   */\n  modifiers?: unknown;\n  /**\n   * @deprecated Accepted and IGNORED, for the same reason as `modifiers`.\n   */\n  popperOptions?: unknown;\n  children?: React.ReactNode;\n};\n\n/*\n * NMB-3998 §C.2: the rest of `props` is spread onto `S.Tooltip`, so the published type has\n * to admit that target's props too — a closed type here is worse than `any` for the 125\n * consumer files. Declared members win over the base (`Omit` by `keyof TooltipOwnProps`); a\n * bare `&` would INTERSECT a colliding member instead of overriding it, which narrows it or\n * empties it to `never`.\n *\n * THE BASE MOVED, AND THAT IS WHY THE PROP TYPE ABOVE GREW. It used to be\n * `styled(Tippy)`, so this widening admitted every tippy option — which is how `zIndex`,\n * `arrow`, `disabled` and `maxWidth` typechecked at 40 consumer call sites while appearing\n * nowhere in the prop type. `S.Tooltip` is now a `styled.div`, so those four would have\n * become type errors the moment the library starts publishing `.d.ts` (playbook §G.4).\n * Declaring them explicitly is what keeps that promise; the set was taken from a grep of\n * both consumers, per plan §A6's warning not to trust the old prop types.\n */\ntype Props = Omit<React.ComponentPropsWithoutRef<typeof S.Tooltip>, keyof TooltipOwnProps> &\n  TooltipOwnProps;\n\n/**\n * Props that are accepted and then deliberately dropped, in two groups.\n *\n * `onClick` / `onChange` / `onSubmit` — this filter predates the migration and it used to be\n * redundant: `@tippyjs/react` destructures the props it knows and drops the rest, so an\n * `onClick` passed to a `Tooltip` has never fired. It is LOAD-BEARING NOW. The rest of\n * `props` lands on a real element in this implementation, so removing the filter would\n * silently activate handlers that have been dead at every call site that passes one.\n *\n * `modifiers` / `popperOptions` — plan C6. Popper concepts with no Floating UI translation\n * and no consumer usage, kept accepted-but-ignored so that no existing call site throws.\n * They are filtered here rather than destructured above because destructuring them would\n * bind names nothing reads, which is a lint error, and because \"the list of props that never\n * reach the DOM\" is worth having in exactly one place.\n */\nconst PROPS_NEVER_FORWARDED = ['onClick', 'onChange', 'onSubmit', 'modifiers', 'popperOptions'];\n\n/**\n * Tooltips display informative text when users hover over, focus on, or tap an element.\n *\n * ### Import\n *\n * ``` js\n * import { Tooltip } from '@ntbjs/react-components/data'\n * // or\n * import Tooltip from '@ntbjs/react-components/data/Tooltip'\n * ```\n */\nconst Tooltip = React.forwardRef<any, Props>(function Tooltip(\n  {\n    content = 'Tooltip',\n    interactive = false,\n    placement = 'top',\n    duration = 350,\n    trigger,\n    visible,\n    children,\n    arrow: hasArrow = TIPPY_DEFAULT_ARROW,\n    zIndex = TIPPY_DEFAULT_Z_INDEX,\n    disabled = false,\n    offset = TOOLTIP_OFFSET,\n    maxWidth = TIPPY_DEFAULT_MAX_WIDTH,\n    appendTo,\n    onClickOutside,\n    ...props\n  },\n  ref\n) {\n  const onOpenChange = React.useCallback(\n    (open: boolean, event?: Event, reason?: OpenChangeReason) => {\n      if (!open && reason === 'outside-press') {\n        onClickOutside?.(event);\n      }\n    },\n    [onClickOutside]\n  );\n\n  const {\n    refs,\n    floatingStyles,\n    context,\n    getReferenceProps,\n    getFloatingProps,\n    isMounted,\n    transitionStyles,\n    arrowRef,\n    placement: resolvedPlacement,\n    pointerEvents\n  } = useFloatingPopover({\n    placement,\n    open: visible,\n    onOpenChange,\n    trigger,\n    offset,\n    arrow: hasArrow,\n    arrowHeight: TOOLTIP_ARROW_HEIGHT_IS_IN_THE_OFFSET_ALREADY,\n    interactive,\n    disabled,\n    duration\n  });\n\n  /*\n   * The reference is the CHILD, not the wrapper `<div>`, and that is a compatibility\n   * requirement rather than a preference. `@tippyjs/react` does\n   * `cloneElement(children, { ref })` and attaches its listeners to the resulting node, so\n   * every tooltip in both consumers is positioned against the child's box. The wrapper is a\n   * plain block `<div>`, which in most layouts is far wider than the child — anchoring to it\n   * would re-centre every tooltip that is not in a flex row.\n   *\n   * The ref is merged three ways: this component's own forwarded `ref`, the child's existing\n   * `ref`, and `refs.setReference`. `useMergeRefs` returns `null` when every input is\n   * nullish, which `cloneElement` treats as \"no ref\" — the case that matters for a child\n   * that cannot take one.\n   *\n   * `ref` GOES SOMEWHERE REAL FOR THE FIRST TIME. It used to be handed to `styled(Tippy)`,\n   * and `Tippy` is a plain function component, so React had nowhere to put it. Plan risk #9\n   * asks for `forwardRef` onto the reference and this is it; no consumer passes `ref` to a\n   * `Tooltip` (measured over both apps), so nothing observable changes.\n   *\n   * The CHILD's ref is a different measurement, and it is live: `inputs/CompactTextInput`\n   * renders `<S.Input ref={forwardedRef}>` as this tooltip's child on the `!link` branch, and\n   * `ntb-dam/client` passes react-hook-form's `field.ref` that way on React 16.14. Reading\n   * it as `children.props.ref` yields `undefined` before React 19, so the `cloneElement`\n   * below overwrote it — see `getElementRef`. tippy merged it via `preserveRef`.\n   */\n  const childRef = React.isValidElement(children) ? getElementRef(children) : null;\n  const referenceRef = useMergeRefs([ref, childRef, refs.setReference]);\n\n  const filteredProps = Object.fromEntries(\n    Object.entries(props).filter(([key]) => !PROPS_NEVER_FORWARDED.includes(key))\n  );\n\n  /*\n   * `getReferenceProps(children.props)` and not `getReferenceProps()`: Floating UI COMPOSES\n   * the handlers it needs with the ones already on the element, so a child that has its own\n   * `onMouseEnter` keeps it. tippy did not need this — it attached native listeners straight\n   * to the DOM node and never touched the child's props — so passing the child's props\n   * through is what reproduces \"the child's own handlers still work\".\n   */\n  const reference = React.isValidElement(children)\n    ? React.cloneElement(\n        children as React.ReactElement<Record<string, unknown>>,\n        {\n          ...getReferenceProps((children as React.ReactElement<Record<string, unknown>>).props),\n          ref: referenceRef\n        } as never\n      )\n    : children;\n\n  /*\n   * tippy's appendTo resolution, reproduced. `'parent'`, and `interactive` with no explicit\n   * `appendTo`, render INLINE; everything else portals. See `TooltipAppendTo` for the\n   * measurement and for what it corrects in plan §A3.\n   */\n  const renderInline = appendTo === 'parent' || (interactive && appendTo === undefined);\n\n  /*\n   * Deliberately NOT memoised. The function form of `appendTo` is resolved against the\n   * reference node, which is populated by a callback ref and is therefore `null` on the\n   * first render; a `useMemo` keyed on `refs.reference.current` would be reading a ref\n   * during render to decide whether to recompute, which is the one thing a memo cannot do\n   * correctly. Recomputing every render costs a comparison and is always right.\n   *\n   * ⚠️ `undefined` AND `null` ARE NOT INTERCHANGEABLE HERE, AND GETTING IT WRONG SILENTLY\n   * DELETES THE TOOLTIP. `FloatingPortal`'s `root` is typed `HTMLElement | null | ref`,\n   * which reads as though `null` were the \"no root given\" value. It is not — measured in\n   * `useFloatingPortalNode`:\n   *\n   * ```js\n   * // Wait for the root to exist before creating the portal node.\n   * if (root === null) return;\n   * …\n   * container = container || document.body;\n   * ```\n   *\n   * `null` means \"the root does not exist YET, do not create the portal node\", and the\n   * effect simply returns. Only `undefined` falls through to the `|| document.body`\n   * default. Returning `null` for the ordinary no-`appendTo` case therefore produced a\n   * tooltip that mounted its positioner into nothing and never appeared — caught by the\n   * visual gate as the `Visible` story rendering its trigger and no tooltip, and NOT caught\n   * by the render gate, whose fixture reaches the inline path instead.\n   *\n   * The one place `null` is right is the genuine \"not resolvable yet\" case below: a\n   * function `appendTo` cannot be called until the reference exists, and `null` correctly\n   * defers the portal until it does rather than briefly portalling to the wrong parent.\n   */\n  const resolvePortalRoot = (): HTMLElement | null | undefined => {\n    if (renderInline || appendTo === undefined) return undefined;\n    if (typeof appendTo === 'function') {\n      const node = refs.reference.current;\n      return node instanceof Element ? (appendTo(node) as HTMLElement) : null;\n    }\n    return appendTo as HTMLElement;\n  };\n\n  const floating = isMounted ? (\n    <div\n      ref={refs.setFloating}\n      style={{ ...floatingStyles, zIndex, pointerEvents, maxWidth: POSITIONER_MAX_WIDTH }}\n      {...getFloatingProps()}\n    >\n      {/*\n       * `{...filteredProps}` FIRST and the explicit attributes after, so that a colliding\n       * `style` or `className` cannot displace the transition styles or the placement\n       * attribute. Under tippy those collisions resolved by being dropped entirely; keeping\n       * this element's own values winning is the closest equivalent, and it still lets\n       * `data-*` / `aria-*` through to the box, which is where tippy put `className` too.\n       */}\n      <S.Tooltip\n        {...filteredProps}\n        data-placement={resolvedPlacement}\n        role=\"tooltip\"\n        tabIndex={-1}\n        style={{ ...transitionStyles, maxWidth }}\n      >\n        <div className=\"tippy-content\">{content}</div>\n        {hasArrow && (\n          <SharedFloatingArrow\n            ref={arrowRef}\n            context={context}\n            data-arrow-surface=\"tooltip\"\n            {...TOOLTIP_ARROW}\n          />\n        )}\n      </S.Tooltip>\n    </div>\n  ) : null;\n\n  /*\n   * The bare wrapper `<div>` is preserved verbatim — plan risk #9. It carries no props and\n   * no styling, and it is load-bearing for consumers only in that `TextArea` and\n   * `CompactTextInput` hang an `onMouseLeave` on a div of their own immediately outside it.\n   */\n  return (\n    <div>\n      {reference}\n      {renderInline ? (\n        floating\n      ) : (\n        <FloatingPortal root={resolvePortalRoot()}>{floating}</FloatingPortal>\n      )}\n    </div>\n  );\n});\n\nexport default Tooltip;\n"],"names":["TIPPY_DEFAULT_ARROW","TIPPY_DEFAULT_MAX_WIDTH","TIPPY_DEFAULT_Z_INDEX","TOOLTIP_OFFSET","TOOLTIP_ARROW_HEIGHT_IS_IN_THE_OFFSET_ALREADY","POSITIONER_MAX_WIDTH","PROPS_NEVER_FORWARDED","Tooltip","React","forwardRef","content","interactive","placement","duration","trigger","visible","children","arrow","hasArrow","zIndex","disabled","offset","maxWidth","appendTo","onClickOutside","props","ref","onOpenChange","useCallback","open","event","reason","refs","floatingStyles","context","getReferenceProps","getFloatingProps","isMounted","transitionStyles","arrowRef","resolvedPlacement","pointerEvents","useFloatingPopover","arrowHeight","childRef","isValidElement","getElementRef","referenceRef","useMergeRefs","setReference","filteredProps","Object","fromEntries","entries","filter","key","includes","reference","cloneElement","renderInline","undefined","resolvePortalRoot","node","current","Element","floating","_jsx","setFloating","style","_jsxs","S","role","tabIndex","className","SharedFloatingArrow","TOOLTIP_ARROW","FloatingPortal","root"],"mappings":"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"}

package/build/data/Tooltip/Tooltip.styled.js

@@ -1,28 +1,15 @@
 import styled from 'styled-components';
 import { applyDefaultTheme } from '../../utils/defaultTheme.js';
-import TippyTooltip from '@tippyjs/react';
-import 'tippy.js/animations/shift-away-subtle.css';
-import 'tippy.js/dist/tippy.css';
 
-const Tooltip = styled(TippyTooltip).attrs(applyDefaultTheme)`
-  font-family: ${props => props.theme.primaryFontFamily};
-  font-size: 1rem;
-  font-weight: 400;
-  background: ${props => props.theme.getColor('gray-700')};
-  border-radius: 3px;
-  pointer-events: default !important;
-  .tippy-content {
-    padding: 9px 12px;
-  }
-
-  .tippy-arrow {
-    color: ${props => props.theme.getColor('gray-700')};
-  }
-
-  a {
-    color: inherit;
-  }
-`;
+const shouldForwardProp = prop => {
+  return prop !== 'theme' && !prop.startsWith('$');
+};
+const Tooltip = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "Tooltipstyled__Tooltip",
+  componentId: "sc-vg943j-0"
+})(["position:relative;outline:0;white-space:normal;line-height:1.4;color:", ";font-family:", ";font-size:1rem;font-weight:400;background:", ";border-radius:3px;.tippy-content{position:relative;z-index:1;padding:9px 12px;}a{color:inherit;}"], props => props.theme.getColor('white'), props => props.theme.primaryFontFamily, props => props.theme.getColor('gray-700'));
 
 export { Tooltip };
 //# sourceMappingURL=Tooltip.styled.js.map

package/build/data/Tooltip/Tooltip.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.styled.js","sources":["../../../src/components/data/Tooltip/Tooltip.styled.js"],"sourcesContent":["import styled from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\nimport Tippy from '@tippyjs/react';\nimport 'tippy.js/animations/shift-away-subtle.css';\nimport 'tippy.js/dist/tippy.css';\n\nexport const Tooltip = styled(Tippy).attrs(applyDefaultTheme)`\n  font-family: ${props => props.theme.primaryFontFamily};\n  font-size: 1rem;\n  font-weight: 400;\n  background: ${props => props.theme.getColor('gray-700')};\n  border-radius: 3px;\n  pointer-events: default !important;\n  .tippy-content {\n    padding: 9px 12px;\n  }\n\n  .tippy-arrow {\n    color: ${props => props.theme.getColor('gray-700')};\n  }\n\n  a {\n    color: inherit;\n  }\n`;\n"],"names":["Tooltip","styled","Tippy","attrs","applyDefaultTheme","props","theme","primaryFontFamily","getColor"],"mappings":";;;;;;AAOO,MAAMA,OAAO,GAAGC,MAAM,CAACC,YAAK,CAAC,CAACC,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAC7D,eAAA,EAAiBC,KAAK,IAAIA,KAAK,CAACC,KAAK,CAACC,iBAAiB,CAAA;AACvD;AACA;AACA,cAAgBF,EAAAA,KAAK,IAAIA,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,CAAA;AACzD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAaH,EAAAA,KAAK,IAAIA,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,CAAA;AACtD;AACA;AACA;AACA;AACA;AACA;;;;"}
+{"version":3,"file":"Tooltip.styled.js","sources":["../../../src/components/data/Tooltip/Tooltip.styled.ts"],"sourcesContent":["/*\n * $-transient-prop pattern: rules in\n * `src/components/layout/SectionSeparator/SectionSeparator.styled.ts`, derivation and\n * measurements in `scripts/TS-MIGRATION-PLAYBOOK.md` §J.\n *\n * NO TRANSIENT PROP IS READ HERE — every interpolation reads only `props.theme`, which\n * `ExecutionContext` already supplies via the C6 `DefaultTheme` augmentation.\n *\n * ================== WHAT REPLACED WHAT, AND THE TWO THINGS THAT CAME BACK ==================\n *\n * This file used to be `styled(Tippy)`, so the class it generated landed on tippy's\n * `.tippy-box` and the rules below were only ever the OVERRIDES — the base came from\n * `tippy.js/dist/tippy.css`, which this file imported. Dropping tippy therefore drops a\n * base stylesheet nobody had written down, and two of its declarations were load-bearing:\n *\n *   .tippy-box { position: relative; background-color: #333; color: #fff;\n *                border-radius: 4px; font-size: 14px; line-height: 1.4;\n *                white-space: normal; outline: 0; transition-property: ... }\n *\n * - `color: #fff` is where the tooltip's WHITE TEXT came from. Nothing in the old version\n *   of this file set a colour; had it been dropped silently the text would have fallen back\n *   to inherited, i.e. near-black on `gray-700` in the light theme. `white` is `#ffffff`\n *   in `colors-export.js`, the same colour, so it is written as the token.\n * - `position: relative` is the ARROW'S CONTAINING BLOCK. `FloatingArrow` positions its\n *   `<svg>` at `[side]: 100%`, which resolves against the nearest positioned ancestor; with\n *   a static box the arrow would escape to the viewport.\n *\n * `line-height: 1.4`, `white-space: normal` and `outline: 0` are carried over for the same\n * reason — they were in force and are not defaults. The three declarations that were\n * genuinely overridden (`background-color`, `border-radius`, `font-size`) keep the\n * overriding values and tippy's are simply gone.\n *\n * WHAT WAS DELIBERATELY NOT CARRIED OVER, so the next reader does not \"restore\" it:\n *\n * - `pointer-events: default !important`. `default` is not a value of `pointer-events`\n *   (the valid set is auto | none | visiblePainted | visibleFill | visibleStroke | visible\n *   | painted | fill | stroke | all | inherit), so the declaration was invalid and the\n *   browser dropped it. It has never had any effect. The real mechanism is tippy's\n *   `popper.style.pointerEvents = interactive ? '' : 'none'`, which now lives on the\n *   positioner in `Tooltip.tsx` where the hook reports it.\n * - `transition-property`. `useTransitionStyles` emits its own transition shorthand inline\n *   on this element, so a stylesheet declaration would be overridden on every render.\n * - `.tippy-arrow { color: … }`. tippy drew the arrow as a CSS border triangle, and\n *   `border-*-color: initial` resolves to `currentColor` — which is why the arrow colour\n *   was set through `color`. The arrow is now an SVG and is filled by\n *   `FloatingArrow.styled.ts`'s `tooltip` surface, with the same `gray-700`.\n *\n * ================== WHY `.tippy-content` IS STILL CALLED `.tippy-content` ==================\n *\n * It is a deliberate compatibility shim, not a leftover. `src/sass/components/popover.scss`\n * in BOTH consumers targets that class name, so renaming it needs coordinated PRs in two\n * repos — plan C2/§A4. `Tooltip.tsx` renders exactly one such element.\n *\n * It keeps `position: relative` and `z-index: 1` as well as the padding, because\n * `tippy.css`'s own `.tippy-content` rule supplied those and that stylesheet is still in\n * the bundle (`Popover.styled.ts` imports it until Popover migrates too). Declaring them\n * here means this component does not silently change the day that import goes away.\n */\nimport styled from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\n/*\n * Single-argument, and it stays that way — peer floor `styled-components: >=5.1.0`, and the\n * two majors disagree on the second parameter. §J.4.\n *\n * IT IS ALSO NOW MANDATORY RATHER THAN OPTIONAL, WHICH FIXES A DECLARED DEFECT. The old\n * version of this file was one of only two of the 36 styled files with no\n * `shouldForwardProp`, and its header recorded the consequence: nothing filtered props, so\n * the `theme` OBJECT that `.attrs(applyDefaultTheme)` injects was handed to\n * `@tippyjs/react`, which did `box.setAttribute('data-theme', theme)` for any truthy theme\n * and put `data-theme=\"[object Object]\"` on the live box. The root here is a plain\n * `styled.div`, so without this predicate that same object would be written to the DOM as\n * `theme=\"[object Object]\"` — `theme` is all-lowercase, so React 19 does NOT drop it the\n * way it drops unknown camelCase props. The fix the old header asked for is therefore not a\n * follow-up; it is a precondition of this rewrite.\n */\nconst shouldForwardProp = (prop: string): boolean => {\n  return prop !== 'theme' && !prop.startsWith('$');\n};\n\n/**\n * The tooltip box — what `.tippy-box` was.\n *\n * `Tooltip.tsx` puts the transition styles and the `max-width` on this element inline and\n * the POSITION on its parent, matching the split tippy used (animated box inside a\n * Popper-positioned root) and the one the three existing Floating UI sites use.\n */\nexport const Tooltip = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  position: relative;\n  outline: 0;\n  white-space: normal;\n  line-height: 1.4;\n  color: ${props => props.theme.getColor('white')};\n  font-family: ${props => props.theme.primaryFontFamily};\n  font-size: 1rem;\n  font-weight: 400;\n  background: ${props => props.theme.getColor('gray-700')};\n  border-radius: 3px;\n\n  .tippy-content {\n    position: relative;\n    z-index: 1;\n    padding: 9px 12px;\n  }\n\n  a {\n    color: inherit;\n  }\n`;\n"],"names":["shouldForwardProp","prop","startsWith","Tooltip","styled","div","withConfig","attrs","applyDefaultTheme","displayName","componentId","props","theme","getColor","primaryFontFamily"],"mappings":";;;AA4EA,MAAMA,iBAAiB,GAAIC,IAAY,IAAc;EACnD,OAAOA,IAAI,KAAK,OAAO,IAAI,CAACA,IAAI,CAACC,UAAU,CAAC,GAAG,CAAC;AAClD,CAAC;AASM,MAAMC,OAAO,GAAGC,MAAM,CAACC,GAAG,CAC9BC,UAAU,CAAC;AACVN,EAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAAF,UAAA,CAAA;EAAAG,WAAA,EAAA,wBAAA;EAAAC,WAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,uEAAA,EAAA,eAAA,EAAA,6CAAA,EAAA,mGAAA,CAAA,EAKhBC,KAAK,IAAIA,KAAK,CAACC,KAAK,CAACC,QAAQ,CAAC,OAAO,CAAC,EAChCF,KAAK,IAAIA,KAAK,CAACC,KAAK,CAACE,iBAAiB,EAGvCH,KAAK,IAAIA,KAAK,CAACC,KAAK,CAACC,QAAQ,CAAC,UAAU,CAAC;;;;"}

package/build/data/VerificationStatusIcon/VerificationStatusIcon.js

@@ -1,36 +1,29 @@
-import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
-import PropTypes from 'prop-types';
 import { VerificationIconWrapper, VerificationStatusIcon as VerificationStatusIcon$1, VerificationStatusColor } from './VerificationStatusIcon.styled.js';
 import { ReactComponent as SvgVerification } from '../../icons/verification.svg.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
 const VerificationStatusIcon = React__default.forwardRef(function VerificationStatusIcon({
   status,
-  iconHeight,
-  background,
+  iconHeight = 15,
+  background = false,
   ...props
 }, forwardedRef) {
-  return React__default.createElement(VerificationIconWrapper, {
-    $background: background
-  }, React__default.createElement(VerificationStatusIcon$1, _extends({
-    $iconHeight: iconHeight,
+  return jsx(VerificationIconWrapper, {
     $background: background,
-    ref: forwardedRef
-  }, props), React__default.createElement(SvgVerification, null), React__default.createElement(VerificationStatusColor, {
-    $iconHeight: iconHeight,
-    $status: status,
-    $background: background
-  })));
+    children: jsxs(VerificationStatusIcon$1, {
+      $iconHeight: iconHeight,
+      $background: background,
+      ref: forwardedRef,
+      ...props,
+      children: [jsx(SvgVerification, {}), jsx(VerificationStatusColor, {
+        $iconHeight: iconHeight,
+        $status: status,
+        $background: background
+      })]
+    })
+  });
 });
-VerificationStatusIcon.propTypes = process.env.NODE_ENV !== "production" ? {
-  status: PropTypes.oneOf(['verified', 'pending', 'rejected', 'mixed']).isRequired,
-  iconHeight: PropTypes.number,
-  background: PropTypes.bool
-} : {};
-VerificationStatusIcon.defaultProps = {
-  iconHeight: 15,
-  background: false
-};
 
 export { VerificationStatusIcon as default };
 //# sourceMappingURL=VerificationStatusIcon.js.map

package/build/data/VerificationStatusIcon/VerificationStatusIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"VerificationStatusIcon.js","sources":["../../../src/components/data/VerificationStatusIcon/VerificationStatusIcon.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport * as S from './VerificationStatusIcon.styled';\nimport { VerificationIcon } from '../../../icons';\n\n/**\n * A compact icon showing verification status with color coding.\n *\n * ### Import\n *\n * ``` js\n * import { VerificationStatusIcon } from '@ntbjs/react-components/data'\n * // or\n * import VerificationStatusIcon from '@ntbjs/react-components/data/VerificationStatusIcon'\n * ```\n *\n * ### Props\n * ```\n * Pass one of \"verified\", \"pending\" or \"rejected\" to `status` to display the correct verification status.\n * Pass `iconHeight={15}` to set the height of the icon in pixel\n * ```\n */\nconst VerificationStatusIcon = React.forwardRef(function VerificationStatusIcon(\n  { status, iconHeight, background, ...props },\n  forwardedRef\n) {\n  return (\n    <S.VerificationIconWrapper $background={background}>\n      <S.VerificationStatusIcon\n        $iconHeight={iconHeight}\n        $background={background}\n        ref={forwardedRef}\n        {...props}\n      >\n        <VerificationIcon />\n        <S.VerificationStatusColor\n          $iconHeight={iconHeight}\n          $status={status}\n          $background={background}\n        />\n      </S.VerificationStatusIcon>\n    </S.VerificationIconWrapper>\n  );\n});\n\nVerificationStatusIcon.propTypes = {\n  /**\n   * Status of the verification\n   */\n  status: PropTypes.oneOf(['verified', 'pending', 'rejected', 'mixed']).isRequired,\n  /**\n   * Custom height of the icon\n   */\n  iconHeight: PropTypes.number,\n  /**\n   * If Icon has background\n   */\n  background: PropTypes.bool\n};\n\nVerificationStatusIcon.defaultProps = {\n  iconHeight: 15,\n  background: false\n};\n\nexport default VerificationStatusIcon;\n"],"names":["VerificationStatusIcon","React","forwardRef","status","iconHeight","background","props","forwardedRef","createElement","S","$background","_extends","$iconHeight","ref","VerificationIcon","$status","propTypes","process","env","NODE_ENV","PropTypes","oneOf","isRequired","number","bool","defaultProps"],"mappings":";;;;;;AAsBMA,MAAAA,sBAAsB,GAAGC,cAAK,CAACC,UAAU,CAAC,SAASF,sBAAsBA,CAC7E;EAAEG,MAAM;EAAEC,UAAU;EAAEC,UAAU;EAAE,GAAGC,KAAAA;AAAM,CAAC,EAC5CC,YAAY,EACZ;AACA,EAAA,OACEN,cAAA,CAAAO,aAAA,CAACC,uBAAyB,EAAA;AAACC,IAAAA,WAAW,EAAEL,UAAAA;GACtCJ,EAAAA,cAAA,CAAAO,aAAA,CAACC,wBAAwB,EAAAE,QAAA,CAAA;AACvBC,IAAAA,WAAW,EAAER,UAAW;AACxBM,IAAAA,WAAW,EAAEL,UAAW;AACxBQ,IAAAA,GAAG,EAAEN,YAAAA;AAAa,GAAA,EACdD,KAAK,CAETL,EAAAA,cAAA,CAAAO,aAAA,CAACM,eAAgB,EAAA,IAAE,CAAC,EACpBb,cAAA,CAAAO,aAAA,CAACC,uBAAyB,EAAA;AACxBG,IAAAA,WAAW,EAAER,UAAW;AACxBW,IAAAA,OAAO,EAAEZ,MAAO;AAChBO,IAAAA,WAAW,EAAEL,UAAAA;GACd,CACuB,CACD,CAAC,CAAA;AAEhC,CAAC,EAAC;AAEFL,sBAAsB,CAACgB,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAG,YAAA,GAAA;AAIjChB,EAAAA,MAAM,EAAEiB,SAAS,CAACC,KAAK,CAAC,CAAC,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,CAAC,CAAC,CAACC,UAAU;EAIhFlB,UAAU,EAAEgB,SAAS,CAACG,MAAM;EAI5BlB,UAAU,EAAEe,SAAS,CAACI,IAAAA;AACxB,CAAC,GAAA,EAAA,CAAA;AAEDxB,sBAAsB,CAACyB,YAAY,GAAG;AACpCrB,EAAAA,UAAU,EAAE,EAAE;AACdC,EAAAA,UAAU,EAAE,KAAA;AACd,CAAC;;;;"}
+{"version":3,"file":"VerificationStatusIcon.js","sources":["../../../src/components/data/VerificationStatusIcon/VerificationStatusIcon.tsx"],"sourcesContent":["import React from 'react';\nimport * as S from './VerificationStatusIcon.styled';\nimport { VerificationIcon } from '../../../icons';\n\ntype VerificationStatusIconOwnProps = {\n  /**\n   * Status of the verification\n   */\n  status: 'verified' | 'pending' | 'rejected' | 'mixed';\n  /**\n   * Custom height of the icon\n   */\n  iconHeight?: number;\n  /**\n   * If Icon has background\n   */\n  background?: boolean;\n};\n\n/*\n * NMB-3998 §C.2: `props` is spread onto `S.VerificationStatusIcon`, so the published type\n * has to admit that target's props too — a closed type here is worse than `any` for the\n * 125 consumer files. Declared members win over the base (`Omit` by `keyof VerificationStatusIconOwnProps`);\n * a bare `&` would INTERSECT a colliding member instead of overriding it, which narrows\n * it (measured: `rows?: number | string` & `rows?: number`) or empties it to `never`.\n */\ntype Props = Omit<\n  React.ComponentPropsWithoutRef<typeof S.VerificationStatusIcon>,\n  keyof VerificationStatusIconOwnProps\n> &\n  VerificationStatusIconOwnProps;\n\n/**\n * A compact icon showing verification status with color coding.\n *\n * ### Import\n *\n * ``` js\n * import { VerificationStatusIcon } from '@ntbjs/react-components/data'\n * // or\n * import VerificationStatusIcon from '@ntbjs/react-components/data/VerificationStatusIcon'\n * ```\n *\n * ### Props\n * ```\n * Pass one of \"verified\", \"pending\" or \"rejected\" to `status` to display the correct verification status.\n * Pass `iconHeight={15}` to set the height of the icon in pixel\n * ```\n */\nconst VerificationStatusIcon = React.forwardRef<any, Props>(function VerificationStatusIcon(\n  { status, iconHeight = 15, background = false, ...props },\n  forwardedRef\n) {\n  return (\n    <S.VerificationIconWrapper $background={background}>\n      <S.VerificationStatusIcon\n        $iconHeight={iconHeight}\n        $background={background}\n        ref={forwardedRef}\n        {...props}\n      >\n        <VerificationIcon />\n        <S.VerificationStatusColor\n          $iconHeight={iconHeight}\n          $status={status}\n          $background={background}\n        />\n      </S.VerificationStatusIcon>\n    </S.VerificationIconWrapper>\n  );\n});\n\nexport default VerificationStatusIcon;\n"],"names":["VerificationStatusIcon","React","forwardRef","status","iconHeight","background","props","forwardedRef","_jsx","S","$background","children","_jsxs","$iconHeight","ref","VerificationIcon","$status"],"mappings":";;;;;AAiDA,MAAMA,sBAAsB,GAAGC,cAAK,CAACC,UAAU,CAAa,SAASF,sBAAsBA,CACzF;EAAEG,MAAM;AAAEC,EAAAA,UAAU,GAAG,EAAE;AAAEC,EAAAA,UAAU,GAAG,KAAK;EAAE,GAAGC;AAAM,CAAC,EACzDC,YAAY,EACZ;AACA,EAAA,OACEC,GAAA,CAACC,uBAAyB,EAAA;AAACC,IAAAA,WAAW,EAAEL,UAAW;AAAAM,IAAAA,QAAA,EACjDC,IAAA,CAACH,wBAAwB,EAAA;AACvBI,MAAAA,WAAW,EAAET,UAAW;AACxBM,MAAAA,WAAW,EAAEL,UAAW;AACxBS,MAAAA,GAAG,EAAEP,YAAa;AAAA,MAAA,GACdD,KAAK;MAAAK,QAAA,EAAA,CAETH,GAAA,CAACO,eAAgB,EAAA,EAAE,CAAC,EACpBP,GAAA,CAACC,uBAAyB,EAAA;AACxBI,QAAAA,WAAW,EAAET,UAAW;AACxBY,QAAAA,OAAO,EAAEb,MAAO;AAChBO,QAAAA,WAAW,EAAEL;AAAW,OACzB,CAAC;KACsB;AAAC,GACF,CAAC;AAEhC,CAAC;;;;"}

package/build/data/VerificationStatusIcon/VerificationStatusIcon.styled.js

@@ -6,39 +6,22 @@ const shouldForwardProp = prop => {
 };
 const VerificationIconWrapper = styled.div.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  ${props => props.$background && css`
-    background-color: #000 !important;
-    width: fit-content;
-    padding: 6px 14px 6px 9px;
-    border-radius: 15px;
-}
-    `};
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "VerificationStatusIconstyled__VerificationIconWrapper",
+  componentId: "sc-10rr64t-0"
+})(["", ";"], props => props.$background && css(["background-color:#000 !important;width:fit-content;padding:6px 14px 6px 9px;border-radius:15px;}"]));
 const VerificationStatusIcon = styled.div.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  display: flex;
-  position: relative;
-  font: normal normal normal 12px/16px Roboto;
-  ${props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-700'))};
-
-  ${props => props.$background && props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-100'))};
-
-  svg {
-    height: ${props => props.iconHeight ?? 15}px;
-  }
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "VerificationStatusIconstyled__VerificationStatusIcon",
+  componentId: "sc-10rr64t-1"
+})(["display:flex;position:relative;font:normal normal normal 12px/16px Roboto;", ";", ";svg{height:", "px;}"], props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-700')), props => props.$background && props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-100')), props => props.iconHeight ?? 15);
 const VerificationStatusColor = styled.div.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  position: absolute;
-  bottom: 0;
-  left: ${props => (props.$iconHeight ?? 15) * 2 / 3}px;
-  width: ${props => (props.$iconHeight ?? 15) * 2 / 3}px;
-  height: ${props => (props.$iconHeight ?? 15) * 2 / 3}px;
-  border-radius: 50%;
-  ${props => {
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "VerificationStatusIconstyled__VerificationStatusColor",
+  componentId: "sc-10rr64t-2"
+})(["position:absolute;bottom:0;left:", "px;width:", "px;height:", "px;border-radius:50%;", ";"], props => (props.$iconHeight ?? 15) * 2 / 3, props => (props.$iconHeight ?? 15) * 2 / 3, props => (props.$iconHeight ?? 15) * 2 / 3, props => {
   let darkThemeColor = props.theme.getColor('gray-100');
   let lightThemeColor = props.theme.getColor('gray-500');
   if (props.$status === 'verified') {
@@ -55,8 +38,7 @@ const VerificationStatusColor = styled.div.withConfig({
     lightThemeColor = '#008CDB';
   }
   return props.theme.themeProp('background-color', darkThemeColor, lightThemeColor);
-}};
-`;
+});
 
 export { VerificationIconWrapper, VerificationStatusColor, VerificationStatusIcon };
 //# sourceMappingURL=VerificationStatusIcon.styled.js.map

package/build/data/VerificationStatusIcon/VerificationStatusIcon.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"VerificationStatusIcon.styled.js","sources":["../../../src/components/data/VerificationStatusIcon/VerificationStatusIcon.styled.js"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\nconst shouldForwardProp = prop => {\n  return prop !== 'theme' && !prop.startsWith('$');\n};\n\nexport const VerificationIconWrapper = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  ${props =>\n    props.$background &&\n    css`\n    background-color: #000 !important;\n    width: fit-content;\n    padding: 6px 14px 6px 9px;\n    border-radius: 15px;\n}\n    `};\n`;\n\nexport const VerificationStatusIcon = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  display: flex;\n  position: relative;\n  font: normal normal normal 12px/16px Roboto;\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('gray-300'),\n      props.theme.getColor('gray-700')\n    )};\n\n  ${props =>\n    props.$background &&\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('gray-100'),\n      props.theme.getColor('gray-100')\n    )};\n\n  svg {\n    height: ${props => props.iconHeight ?? 15}px;\n  }\n`;\n\nexport const VerificationStatusColor = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  position: absolute;\n  bottom: 0;\n  left: ${props => ((props.$iconHeight ?? 15) * 2) / 3}px;\n  width: ${props => ((props.$iconHeight ?? 15) * 2) / 3}px;\n  height: ${props => ((props.$iconHeight ?? 15) * 2) / 3}px;\n  border-radius: 50%;\n  ${props => {\n    let darkThemeColor = props.theme.getColor('gray-100');\n    let lightThemeColor = props.theme.getColor('gray-500');\n\n    if (props.$status === 'verified') {\n      darkThemeColor = props.theme.getColor('emerald-500');\n      lightThemeColor = props.theme.getColor('emerald-500');\n    } else if (props.$status === 'pending') {\n      darkThemeColor = props.theme.getColor('signal-yellow-500');\n      lightThemeColor = props.theme.getColor('signal-yellow-500');\n    } else if (props.$status === 'rejected') {\n      darkThemeColor = props.theme.getColor('red-600');\n      lightThemeColor = props.theme.getColor('red-600');\n    } else if (props.$status === 'mixed') {\n      darkThemeColor = '#008CDB';\n      lightThemeColor = '#008CDB';\n    }\n\n    return props.theme.themeProp('background-color', darkThemeColor, lightThemeColor);\n  }};\n`;\n"],"names":["shouldForwardProp","prop","startsWith","VerificationIconWrapper","styled","div","withConfig","attrs","applyDefaultTheme","props","$background","css","VerificationStatusIcon","theme","themeProp","getColor","iconHeight","VerificationStatusColor","$iconHeight","darkThemeColor","lightThemeColor","$status"],"mappings":"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"}
+{"version":3,"file":"VerificationStatusIcon.styled.js","sources":["../../../src/components/data/VerificationStatusIcon/VerificationStatusIcon.styled.ts"],"sourcesContent":["/*\n * $-transient-prop pattern: rules in\n * `src/components/layout/SectionSeparator/SectionSeparator.styled.ts`, derivation and\n * measurements in `scripts/TS-MIGRATION-PLAYBOOK.md` §J.\n *\n * ONE DEFERRED DEFECT AND ONE COSMETIC ODDITY, NEITHER FIXED HERE:\n *\n *   - `VerificationStatusIcon` reads `props.iconHeight` for its `svg` height, but the\n *     component passes `$iconHeight`. See `VerificationStatusIconStyleProps`.\n *   - `VerificationIconWrapper`'s interpolated block below contains a STRAY `}` on its\n *     own line, after `border-radius: 15px;`. It is a typo, it is in the recorded\n *     baseline, and removing it changes the emitted css text — so it belongs to a commit\n *     that re-records, not to a type-only one.\n */\nimport styled, { css } from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\n/**\n * Shared by all three components: `VerificationStatusIcon.tsx` passes `$background` to\n * every one of them. Only `VerificationIconWrapper` and `VerificationStatusIcon` read it;\n * on `VerificationStatusColor` it is passed and never read, which is harmless because the\n * `$` means `shouldForwardProp` filters it before both the CSS and the DOM.\n */\ninterface VerificationBackgroundStyleProps {\n  /** `background` — `PropTypes.bool`; swaps in the black pill and the light icon colour. */\n  $background?: boolean;\n}\n\n/**\n * Props of the `VerificationStatusIcon` element.\n *\n * DEFECT, DECLARED NOT FIXED: `iconHeight` in its non-`$` form is what the `svg` rule\n * below reads, and NOTHING PASSES IT — `VerificationStatusIcon.tsx` passes `$iconHeight`,\n * which this component never reads. So the `?? 15` fallback is unconditional and the icon\n * is 15px tall no matter what a caller asks for, WHILE `VerificationStatusColor` does read\n * `$iconHeight` and scales correctly. Pass `iconHeight={30}` today and the status dot grows\n * but the icon it sits on does not.\n *\n * The fix is to repoint the read to `props.$iconHeight`, which ACTIVATES A BRANCH THAT HAS\n * NEVER FIRED and changes the emitted height for every non-default `iconHeight`. §J.8 puts\n * that in C10 with its baseline re-record.\n */\nexport interface VerificationStatusIconStyleProps extends VerificationBackgroundStyleProps {\n  /** `iconHeight` — `PropTypes.number`, px. Read, never passed; see the JSDoc above. */\n  iconHeight?: number;\n}\n\n/** Props of `VerificationStatusColor`, the small status dot. */\ninterface VerificationStatusColorStyleProps extends VerificationBackgroundStyleProps {\n  /** `iconHeight` — `PropTypes.number`, px. This site reads the `$` form, correctly. */\n  $iconHeight?: number;\n  /**\n   * `status` — `PropTypes.oneOf(['verified', 'pending', 'rejected', 'mixed'])`, and\n   * `.isRequired` on the component but still OPTIONAL here per §J.5.\n   *\n   * Closed on purpose rather than widened to `string`: the block below compares this value\n   * four times, and with a closed union a mistyped status name is TS2367 instead of a\n   * branch that silently never fires. §J.6.\n   */\n  $status?: 'verified' | 'pending' | 'rejected' | 'mixed';\n}\n\n/*\n * Single-argument, and it stays that way — peer floor `styled-components: >=5.1.0`, and\n * the two majors disagree on the second parameter. §J.4. `prop` needs the annotation\n * because `withConfig` takes this by reference, so it gets no contextual typing.\n */\nconst shouldForwardProp = (prop: string): boolean => {\n  return prop !== 'theme' && !prop.startsWith('$');\n};\n\nexport const VerificationIconWrapper = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs<VerificationBackgroundStyleProps>(applyDefaultTheme)`\n  ${props =>\n    props.$background &&\n    css`\n    background-color: #000 !important;\n    width: fit-content;\n    padding: 6px 14px 6px 9px;\n    border-radius: 15px;\n}\n    `};\n`;\n\nexport const VerificationStatusIcon = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs<VerificationStatusIconStyleProps>(applyDefaultTheme)`\n  display: flex;\n  position: relative;\n  font: normal normal normal 12px/16px Roboto;\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('gray-300'),\n      props.theme.getColor('gray-700')\n    )};\n\n  ${props =>\n    props.$background &&\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('gray-100'),\n      props.theme.getColor('gray-100')\n    )};\n\n  svg {\n    height: ${props => props.iconHeight ?? 15}px;\n  }\n`;\n\nexport const VerificationStatusColor = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs<VerificationStatusColorStyleProps>(applyDefaultTheme)`\n  position: absolute;\n  bottom: 0;\n  left: ${props => ((props.$iconHeight ?? 15) * 2) / 3}px;\n  width: ${props => ((props.$iconHeight ?? 15) * 2) / 3}px;\n  height: ${props => ((props.$iconHeight ?? 15) * 2) / 3}px;\n  border-radius: 50%;\n  ${props => {\n    let darkThemeColor = props.theme.getColor('gray-100');\n    let lightThemeColor = props.theme.getColor('gray-500');\n\n    if (props.$status === 'verified') {\n      darkThemeColor = props.theme.getColor('emerald-500');\n      lightThemeColor = props.theme.getColor('emerald-500');\n    } else if (props.$status === 'pending') {\n      darkThemeColor = props.theme.getColor('signal-yellow-500');\n      lightThemeColor = props.theme.getColor('signal-yellow-500');\n    } else if (props.$status === 'rejected') {\n      darkThemeColor = props.theme.getColor('red-600');\n      lightThemeColor = props.theme.getColor('red-600');\n    } else if (props.$status === 'mixed') {\n      darkThemeColor = '#008CDB';\n      lightThemeColor = '#008CDB';\n    }\n\n    return props.theme.themeProp('background-color', darkThemeColor, lightThemeColor);\n  }};\n`;\n"],"names":["shouldForwardProp","prop","startsWith","VerificationIconWrapper","styled","div","withConfig","attrs","applyDefaultTheme","displayName","componentId","props","$background","css","VerificationStatusIcon","theme","themeProp","getColor","iconHeight","VerificationStatusColor","$iconHeight","darkThemeColor","lightThemeColor","$status"],"mappings":"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"}

package/build/data/VerificationStatusIcon/index.js

@@ -0,0 +1,2 @@
+export { default } from './VerificationStatusIcon.js';
+//# sourceMappingURL=index.js.map

package/build/data/VerificationStatusIcon/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/build/data/_shared/FloatingArrow.styled.js

@@ -0,0 +1,30 @@
+import styled from 'styled-components';
+import { applyDefaultTheme } from '../../utils/defaultTheme.js';
+import { FloatingArrow } from '@floating-ui/react';
+import { DEFAULT_ARROW_HEIGHT } from '../../hooks/useFloatingPopover.js';
+
+const POPOVER_ARROW = {
+  width: 26,
+  height: DEFAULT_ARROW_HEIGHT,
+  strokeWidth: 1
+};
+const TOOLTIP_ARROW = {
+  width: 14,
+  height: 7,
+  strokeWidth: 0
+};
+const shouldForwardProp = prop => {
+  return prop !== 'theme' && !prop.startsWith('$');
+};
+const SharedFloatingArrow = styled(FloatingArrow).withConfig({
+  shouldForwardProp
+}).attrs(props => ({
+  ...applyDefaultTheme(props),
+  'data-arrow-surface': props['data-arrow-surface'] ?? 'popover'
+})).withConfig({
+  displayName: "FloatingArrowstyled__SharedFloatingArrow",
+  componentId: "sc-d8okt-0"
+})(["body.dark-theme &[data-arrow-surface='popover']{fill:", ";stroke:", ";& > path:last-of-type{stroke:", ";}}body.light-theme &[data-arrow-surface='popover']{fill:", ";stroke:", ";& > path:last-of-type{stroke:", ";}}body:not(.light-theme):not(.dark-theme) &[data-arrow-surface='popover']{fill:", ";stroke:", ";& > path:last-of-type{stroke:", ";}@media (prefers-color-scheme:dark){fill:", ";stroke:", ";& > path:last-of-type{stroke:", ";}}}body.dark-theme &[data-arrow-surface='tooltip'],body.light-theme &[data-arrow-surface='tooltip'],body:not(.light-theme):not(.dark-theme) &[data-arrow-surface='tooltip']{fill:", ";stroke:none;& > path:last-of-type{stroke:", ";}}"], props => props.theme.getColor('gray-700'), props => props.theme.getColor('gray-800'), props => props.theme.getColor('gray-700'), props => props.theme.getColor('white'), props => props.theme.getColor('gray-300'), props => props.theme.getColor('white'), props => props.theme.getColor('white'), props => props.theme.getColor('gray-300'), props => props.theme.getColor('white'), props => props.theme.getColor('gray-700'), props => props.theme.getColor('gray-800'), props => props.theme.getColor('gray-700'), props => props.theme.getColor('gray-700'), props => props.theme.getColor('gray-700'));
+
+export { POPOVER_ARROW, SharedFloatingArrow, TOOLTIP_ARROW };
+//# sourceMappingURL=FloatingArrow.styled.js.map

package/build/data/_shared/FloatingArrow.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingArrow.styled.js","sources":["../../../src/components/data/_shared/FloatingArrow.styled.ts"],"sourcesContent":["/*\n * $-transient-prop pattern: rules in\n * `src/components/layout/SectionSeparator/SectionSeparator.styled.ts`, derivation and\n * measurements in `scripts/TS-MIGRATION-PLAYBOOK.md` §J.\n *\n * THE ONE THEMED ARROW. It replaces four things:\n *\n *   1. `Popover.styled.ts`'s eight `.tippy-arrow::before` / `::after` blocks — a CSS\n *      border-triangle drawn twice per side (an outline layer and a fill layer) for each\n *      of the four sides, 8 rules and 4 `themeProp()` calls.\n *   2. `Tooltip.styled.ts`'s `.tippy-arrow { color: … }` — tippy drove the arrow colour\n *      through `color`, because its triangle was a border and `border-*-color: initial`\n *      resolves to `currentColor`.\n *   3. `SummaryCard.styled.ts`'s `StyledFloatingArrow`.\n *   4. `AssetAction.styled.ts`'s `StyledFloatingArrow`.\n *\n * (3) and (4) still exist: consolidating those three Floating UI sites onto this file and\n * onto `useFloatingPopover` is a DEFERRED pass. This file is written to serve them — its\n * `popover` surface is `SummaryCard`'s exact colour pair — but it does not touch them.\n *\n * ================== WHY NO `themeProp()` AND NO INTERPOLATED `css` BLOCK ==================\n *\n * Two repo conventions decide the whole shape of the template below, both recorded in\n * `ThemeProp`'s JSDoc in `src/utils/defaultTheme.ts`:\n *\n * - `themeProp()` emits `body.dark-theme && { … }`, a SELECTOR. Nesting it inside another\n *   selector block (`&[data-arrow-surface='tooltip'] { ${themeProp(…)} }`) produces\n *   `&[data-arrow-surface='tooltip'] body.dark-theme && { … }` — a descendant selector that\n *   matches nothing. So the two surfaces cannot each carry a `themeProp()`, and the theme\n *   branches are written out by hand instead. `body:not(.light-theme):not(.dark-theme)` +\n *   `prefers-color-scheme` is included because that is `themeProp`'s third branch and\n *   Storybook's neither-class state is a real state (see `scripts/VERIFY.md`, \"How the\n *   theme is driven\").\n * - Per-instance state goes on a STATIC attribute selector, not a `${props => css…}` rule,\n *   because interpolated rules share the component's `componentId` and two instances in\n *   different states collide. `data-arrow-surface` is that attribute.\n *\n * A side effect worth having: because nothing here is a shared `css<A>` helper, §J.7's\n * weak-type rule never engages. The plan's addendum §A1 predicted a shared arrow would hit\n * it (\"A single shared `FloatingArrow.styled.ts` used by four call sites will hit this\");\n * it does not, and the reason is that the surfaces are static rule text rather than an\n * interpolated helper the hosts have to satisfy.\n */\nimport styled from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\nimport { FloatingArrow } from '@floating-ui/react';\nimport { DEFAULT_ARROW_HEIGHT } from '../../../hooks/useFloatingPopover';\n\nimport type { NtbTheme } from '../../../utils/defaultTheme';\n\n/**\n * Which surface the arrow is pointing away from, i.e. which fill/border pair it uses.\n *\n * - `popover` — the `Popover` box and the summary-card overlay: `gray-700` on dark,\n *   `white` on light, with a 1px border that continues the box's own.\n * - `tooltip` — the `Tooltip` box: `gray-700` in BOTH themes and no border, because\n *   `Tooltip.styled.ts` sets `background: gray-700` unconditionally and has no border.\n */\nexport type FloatingArrowSurface = 'popover' | 'tooltip';\n\n/**\n * THE ARROW'S GEOMETRY, PER SURFACE — and the numbers are derived, not chosen.\n *\n * `height` is how far the arrow protrudes from the floating element, because\n * `FloatingArrow` positions its `<svg>` at `[side]: '100%'`. It is therefore the term\n * `useFloatingPopover` adds to the main-axis offset, which is why the popover height is\n * IMPORTED from there rather than written twice: the offset maths and the rendered\n * triangle must be the same number or the arrow sits at the wrong gap.\n *\n * `popover` — from `Popover.styled.ts`'s override, `border-width: 15px 13px 0`: a triangle\n * 15px tall on a 13+13 = **26px** base. The full derivation, including why the `+15` in\n * `Popover.tsx` was never a fudge, is on `DEFAULT_ARROW_HEIGHT`.\n *\n * `tooltip` — `Tooltip.styled.ts` never overrode the geometry, so the numbers come from\n * `tippy.js/dist/tippy.css`, and they are the **VISIBLE** triangle rather than the declared\n * one. THE ONE PIXEL THE FIRST DRAFT OF THIS COMMENT CALLED UNAVOIDABLE IS NOT: it\n * disappears once the hidden part of tippy's triangle is subtracted instead of being\n * carried. The measurement, from the four rules that describe a top-placed tooltip arrow:\n *\n *   .tippy-arrow                                  { width: 16px; height: 16px }\n *   .tippy-box[data-placement^=top] > .tippy-arrow { bottom: 0 }\n *   .tippy-box[data-placement^=top] > .tippy-arrow:before {\n *       bottom: -7px; border-width: 8px 8px 0 }\n *\n * 1. The 16x16 arrow box sits with its bottom edge ON the box's bottom edge.\n * 2. The `:before` border-triangle is 8px tall on a 16px base, positioned `bottom: -7px`,\n *    so its apex is 7px OUTSIDE the box and its 16px-wide base is 1px INSIDE it.\n * 3. Therefore only 7 of the 8px are ever visible, and at the box edge — 1px down from a\n *    16px base on an 8px triangle — the triangle has already narrowed to\n *    16 x (1 - 1/8) = **14px**.\n * 4. So the triangle a user sees is **14px wide at the box edge and 7px tall**, which is\n *    `FloatingArrow`'s own default geometry, and `FloatingArrow` overlapping nothing is\n *    exactly right: there is nothing to overlap. The 1px tippy hides is the same\n *    `gray-700` as the box behind it (this surface has no border), so it was never\n *    contributing a pixel.\n *\n * The offset that goes with it is tippy's own default `[0, 10]` passed straight through,\n * with `arrowHeight: 0` handed to `useFloatingPopover` — see the block comment at\n * `TOOLTIP_OFFSET` in `Tooltip.tsx`, which is where the reason that `Tooltip` does NOT add\n * the arrow height while `Popover` does is written down. Box 10px out, tip 3px out, in both\n * implementations.\n *\n * `strokeWidth` is `FloatingArrow`'s border width in px. `0` means the outline `<path>` is\n * not rendered at all, which is why the `tooltip` surface needs no `stroke` rule.\n */\nexport const POPOVER_ARROW = {\n  width: 26,\n  height: DEFAULT_ARROW_HEIGHT,\n  strokeWidth: 1\n} as const;\n\n/**\n * See `POPOVER_ARROW` — same derivation, from tippy's unmodified default geometry, reduced\n * to the part of it that is visible. 14x7 and not 16x8; the numbers coincide with\n * `FloatingArrow`'s own defaults, which is a result rather than a shortcut and is why they\n * are written out anyway.\n */\nexport const TOOLTIP_ARROW = {\n  width: 14,\n  height: 7,\n  strokeWidth: 0\n} as const;\n\n/**\n * Props of `SharedFloatingArrow`, i.e. what this file's `.attrs()` callback reads and what\n * a call site may set. Both optional per §J.5 — every wrapper spreads `{...props}` onto its\n * styled root, and a required transient prop manufactures TS2769 there.\n */\ninterface FloatingArrowStyleProps {\n  /**\n   * styled-components' theme. Declared for the same reason `Popover.styled.ts` declares\n   * it — this is `styled(ThirdPartyComponent)`, so the outer props are\n   * `FloatingArrowProps extends React.ComponentPropsWithRef<'svg'>` and nothing in there\n   * is `theme`. `.attrs(applyDefaultTheme)` fills it in for the interpolations below.\n   */\n  theme?: NtbTheme;\n  /**\n   * Which colour pair to use. NOT `$`-prefixed on purpose: it has to REACH THE DOM,\n   * because the rules below select on it. `shouldForwardProp` forwards it precisely\n   * because it does not start with `$`.\n   *\n   * Hyphenated, so a call site could pass it without this declaration — TypeScript does\n   * not excess-property-check JSX attribute names that are not valid identifiers. It is\n   * declared anyway because the `.attrs()` callback READS it, and a read does need the\n   * declaration.\n   */\n  'data-arrow-surface'?: FloatingArrowSurface;\n}\n\n/*\n * Single-argument, and it stays that way — peer floor `styled-components: >=5.1.0`, and the\n * two majors disagree on the second parameter. §J.4.\n *\n * This is also the fix for the leak `AssetAction.styled.ts` has: its `StyledFloatingArrow`\n * has no `shouldForwardProp`, so `.attrs(applyDefaultTheme)`'s `theme` OBJECT is handed to\n * `FloatingArrow`, which spreads `...rest` onto the `<svg>` — `theme=\"[object Object]\"` on\n * an SVG element. Filtering it here means the shared arrow never had that defect.\n */\nconst shouldForwardProp = (prop: string): boolean => {\n  return prop !== 'theme' && !prop.startsWith('$');\n};\n\n/**\n * The themed arrow. Render it inside the floating element with `context`, `ref` and the\n * geometry from `POPOVER_ARROW` / `TOOLTIP_ARROW`:\n *\n * ```tsx\n * <S.SharedFloatingArrow ref={arrowRef} context={context} {...POPOVER_ARROW} />\n * ```\n *\n * `ref` IS REQUIRED BY `FloatingArrow` ITSELF — it warns in development without one and\n * the `arrow()` middleware has nothing to measure. `useFloatingPopover` returns the\n * matching `arrowRef`.\n *\n * ================== THE THREE-PATH STRUCTURE, WHICH THE CSS DEPENDS ON ==================\n *\n * `FloatingArrow` renders, in order (measured in\n * `@floating-ui/react/dist/floating-ui.react.esm.js`):\n *\n *   1. an OUTLINE `<path>`, ONLY when `strokeWidth > 0`, with `fill=\"none\"` and\n *      `stroke-width: strokeWidth * 2 + 1`;\n *   2. the FILL `<path>`, whose `stroke` attribute it sets to the value of the `fill`\n *      PROP — its way of covering the inner half of (1)'s stroke so a `strokeWidth: 1`\n *      renders as a 1px border rather than 1.5px;\n *   3. a `<clipPath>`, which is not a `<path>`.\n *\n * We colour by CSS rather than by the `fill`/`stroke` PROPS because the theme is chosen by\n * a `body` class at runtime and a prop would have to be computed in JS, which cannot see\n * which class is set. That leaves (2)'s `stroke` attribute unset, so the rules below set it\n * explicitly — `& > path:last-of-type`, which is (2) whether or not (1) is present.\n * Without that rule (2) would INHERIT the CSS `stroke` and the border would read ~1.5px\n * instead of the 1px it replaces.\n */\nexport const SharedFloatingArrow = styled(FloatingArrow)\n  .withConfig({\n    shouldForwardProp\n  })\n  /*\n   * A CALLBACK, so the generic on `.attrs<P>()` is MANDATORY (§J.2): the callback\n   * parameter only gains `P` in this slot, so `props['data-arrow-surface']` has no legal\n   * annotation position anywhere else.\n   *\n   * It must be a callback rather than a static object for a runtime reason too: `.attrs()`\n   * merges its result OVER the incoming props, so `.attrs({ 'data-arrow-surface': 'popover' })`\n   * would beat the call site's `data-arrow-surface=\"tooltip\"`. `?? 'popover'` is what makes\n   * it a DEFAULT instead of an override.\n   */\n  .attrs<FloatingArrowStyleProps>(props => ({\n    ...applyDefaultTheme(props),\n    'data-arrow-surface': props['data-arrow-surface'] ?? 'popover'\n  }))`\n  /* ---------------------------------------------------------------- popover surface ----\n   * NO BACKTICKS ANYWHERE BELOW: this is the inside of a tagged template literal, so a\n   * backtick in a comment ends the template and the file stops parsing (measured: 17\n   * TS1005/TS1443 errors from two prose backticks).\n   *\n   * SummaryCard.styled.ts's pair for the fill (gray-700 dark / white light), and\n   * Popover.styled.ts's .tippy-arrow::before pair for the border (gray-800 dark /\n   * gray-300 light) — the same pair as the popover box's own 1px border, which is the\n   * point: the arrow continues it.\n   */\n  body.dark-theme &[data-arrow-surface='popover'] {\n    fill: ${props => props.theme.getColor('gray-700')};\n    stroke: ${props => props.theme.getColor('gray-800')};\n\n    & > path:last-of-type {\n      stroke: ${props => props.theme.getColor('gray-700')};\n    }\n  }\n\n  body.light-theme &[data-arrow-surface='popover'] {\n    fill: ${props => props.theme.getColor('white')};\n    stroke: ${props => props.theme.getColor('gray-300')};\n\n    & > path:last-of-type {\n      stroke: ${props => props.theme.getColor('white')};\n    }\n  }\n\n  body:not(.light-theme):not(.dark-theme) &[data-arrow-surface='popover'] {\n    fill: ${props => props.theme.getColor('white')};\n    stroke: ${props => props.theme.getColor('gray-300')};\n\n    & > path:last-of-type {\n      stroke: ${props => props.theme.getColor('white')};\n    }\n\n    @media (prefers-color-scheme: dark) {\n      fill: ${props => props.theme.getColor('gray-700')};\n      stroke: ${props => props.theme.getColor('gray-800')};\n\n      & > path:last-of-type {\n        stroke: ${props => props.theme.getColor('gray-700')};\n      }\n    }\n  }\n\n  /* ---------------------------------------------------------------- tooltip surface ----\n   * gray-700 in both themes, matching Tooltip.styled.ts's unconditional\n   * \"background: gray-700\". It is still written under the three theme selectors rather\n   * than as one bare rule, so that it cannot lose a specificity contest with the popover\n   * branches above: a themed selector carries one type + three class simple selectors,\n   * while a bare &[data-arrow-surface=...] carries two, and the bare form would be\n   * overridden if the two surfaces ever overlapped.\n   *\n   * \"stroke: none\" is belt-and-braces — TOOLTIP_ARROW.strokeWidth is 0, so FloatingArrow\n   * does not render the outline path at all.\n   */\n  body.dark-theme &[data-arrow-surface='tooltip'],\n  body.light-theme &[data-arrow-surface='tooltip'],\n  body:not(.light-theme):not(.dark-theme) &[data-arrow-surface='tooltip'] {\n    fill: ${props => props.theme.getColor('gray-700')};\n    stroke: none;\n\n    & > path:last-of-type {\n      stroke: ${props => props.theme.getColor('gray-700')};\n    }\n  }\n`;\n\nexport default SharedFloatingArrow;\n"],"names":["POPOVER_ARROW","width","height","DEFAULT_ARROW_HEIGHT","strokeWidth","TOOLTIP_ARROW","shouldForwardProp","prop","startsWith","SharedFloatingArrow","styled","FloatingArrow","withConfig","attrs","props","applyDefaultTheme","displayName","componentId","theme","getColor"],"mappings":";;;;;AA0GO,MAAMA,aAAa,GAAG;AAC3BC,EAAAA,KAAK,EAAE,EAAE;AACTC,EAAAA,MAAM,EAAEC,oBAAoB;AAC5BC,EAAAA,WAAW,EAAE;AACf;AAQO,MAAMC,aAAa,GAAG;AAC3BJ,EAAAA,KAAK,EAAE,EAAE;AACTC,EAAAA,MAAM,EAAE,CAAC;AACTE,EAAAA,WAAW,EAAE;AACf;AAqCA,MAAME,iBAAiB,GAAIC,IAAY,IAAc;EACnD,OAAOA,IAAI,KAAK,OAAO,IAAI,CAACA,IAAI,CAACC,UAAU,CAAC,GAAG,CAAC;AAClD,CAAC;AAiCM,MAAMC,mBAAmB,GAAGC,MAAM,CAACC,aAAa,CAAC,CACrDC,UAAU,CAAC;AACVN,EAAAA;AACF,CAAC,CAAC,CAWDO,KAAK,CAA0BC,KAAK,KAAK;EACxC,GAAGC,iBAAiB,CAACD,KAAK,CAAC;AAC3B,EAAA,oBAAoB,EAAEA,KAAK,CAAC,oBAAoB,CAAC,IAAI;AACvD,CAAC,CAAC,CAAC,CAAAF,UAAA,CAAA;EAAAI,WAAA,EAAA,0CAAA;EAAAC,WAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,uDAAA,EAAA,UAAA,EAAA,gCAAA,EAAA,2DAAA,EAAA,UAAA,EAAA,gCAAA,EAAA,kFAAA,EAAA,UAAA,EAAA,gCAAA,EAAA,4CAAA,EAAA,UAAA,EAAA,gCAAA,EAAA,oLAAA,EAAA,4CAAA,EAAA,KAAA,CAAA,EAYOH,KAAK,IAAIA,KAAK,CAACI,KAAK,CAACC,QAAQ,CAAC,UAAU,CAAC,EACvCL,KAAK,IAAIA,KAAK,CAACI,KAAK,CAACC,QAAQ,CAAC,UAAU,CAAC,EAGvCL,KAAK,IAAIA,KAAK,CAACI,KAAK,CAACC,QAAQ,CAAC,UAAU,CAAC,EAK7CL,KAAK,IAAIA,KAAK,CAACI,KAAK,CAACC,QAAQ,CAAC,OAAO,CAAC,EACpCL,KAAK,IAAIA,KAAK,CAACI,KAAK,CAACC,QAAQ,CAAC,UAAU,CAAC,EAGvCL,KAAK,IAAIA,KAAK,CAACI,KAAK,CAACC,QAAQ,CAAC,OAAO,CAAC,EAK1CL,KAAK,IAAIA,KAAK,CAACI,KAAK,CAACC,QAAQ,CAAC,OAAO,CAAC,EACpCL,KAAK,IAAIA,KAAK,CAACI,KAAK,CAACC,QAAQ,CAAC,UAAU,CAAC,EAGvCL,KAAK,IAAIA,KAAK,CAACI,KAAK,CAACC,QAAQ,CAAC,OAAO,CAAC,EAIxCL,KAAK,IAAIA,KAAK,CAACI,KAAK,CAACC,QAAQ,CAAC,UAAU,CAAC,EACvCL,KAAK,IAAIA,KAAK,CAACI,KAAK,CAACC,QAAQ,CAAC,UAAU,CAAC,EAGvCL,KAAK,IAAIA,KAAK,CAACI,KAAK,CAACC,QAAQ,CAAC,UAAU,CAAC,EAmB/CL,KAAK,IAAIA,KAAK,CAACI,KAAK,CAACC,QAAQ,CAAC,UAAU,CAAC,EAIrCL,KAAK,IAAIA,KAAK,CAACI,KAAK,CAACC,QAAQ,CAAC,UAAU,CAAC;;;;"}

package/build/hooks/useEventListner.js.map

@@ -1 +1 @@
-{"version":3,"file":"useEventListner.js","sources":["../../src/hooks/useEventListner.js"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect';\n\nfunction useEventListener(eventName, handler, element, options) {\n  // Create a ref that stores handler\n  const savedHandler = useRef(handler);\n\n  useIsomorphicLayoutEffect(() => {\n    savedHandler.current = handler;\n  }, [handler]);\n\n  useEffect(() => {\n    // Define the listening target\n    const targetElement = element?.current ?? window;\n\n    if (!(targetElement && targetElement.addEventListener)) return;\n\n    // Create event listener that calls handler function stored in ref\n    const listener = event => savedHandler.current(event);\n\n    targetElement.addEventListener(eventName, listener, options);\n\n    // Remove event listener on cleanup\n    return () => {\n      targetElement.removeEventListener(eventName, listener, options);\n    };\n  }, [eventName, element, options]);\n}\n\nexport { useEventListener };\n"],"names":["useEventListener","eventName","handler","element","options","savedHandler","useRef","useIsomorphicLayoutEffect","current","useEffect","targetElement","window","addEventListener","listener","event","removeEventListener"],"mappings":";;;AAGA,SAASA,gBAAgBA,CAACC,SAAS,EAAEC,OAAO,EAAEC,OAAO,EAAEC,OAAO,EAAE;AAE9D,EAAA,MAAMC,YAAY,GAAGC,MAAM,CAACJ,OAAO,CAAC,CAAA;AAEpCK,EAAAA,yBAAyB,CAAC,MAAM;IAC9BF,YAAY,CAACG,OAAO,GAAGN,OAAO,CAAA;AAChC,GAAC,EAAE,CAACA,OAAO,CAAC,CAAC,CAAA;AAEbO,EAAAA,SAAS,CAAC,MAAM;AAEd,IAAA,MAAMC,aAAa,GAAGP,OAAO,EAAEK,OAAO,IAAIG,MAAM,CAAA;AAEhD,IAAA,IAAI,EAAED,aAAa,IAAIA,aAAa,CAACE,gBAAgB,CAAC,EAAE,OAAA;IAGxD,MAAMC,QAAQ,GAAGC,KAAK,IAAIT,YAAY,CAACG,OAAO,CAACM,KAAK,CAAC,CAAA;IAErDJ,aAAa,CAACE,gBAAgB,CAACX,SAAS,EAAEY,QAAQ,EAAET,OAAO,CAAC,CAAA;AAG5D,IAAA,OAAO,MAAM;MACXM,aAAa,CAACK,mBAAmB,CAACd,SAAS,EAAEY,QAAQ,EAAET,OAAO,CAAC,CAAA;KAChE,CAAA;GACF,EAAE,CAACH,SAAS,EAAEE,OAAO,EAAEC,OAAO,CAAC,CAAC,CAAA;AACnC;;;;"}
+{"version":3,"file":"useEventListner.js","sources":["../../src/hooks/useEventListner.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect';\n\nimport type { RefObject } from 'react';\n\n/**\n * Every event name this hook accepts, mapped to the event object the handler\n * actually receives.\n *\n * AN INTERSECTION, NOT `interface DomEventMap extends WindowEventMap,\n * HTMLElementEventMap, DocumentEventMap {}`. The three lib.dom maps share keys\n * through `GlobalEventHandlersEventMap`, and an interface extending all three is\n * a TS2320 candidate (\"named property 'X' of types … are not identical\") as soon\n * as two of them declare a shared key with types that are equivalent rather than\n * identical — a lib.dom detail that changes between TypeScript releases. An\n * intersection has no such rule: overlapping keys become `MouseEvent &\n * MouseEvent`, `keyof` is still the union of all three key sets, and lib.dom\n * stays the single source of truth for which event class each name carries. Do\n * not \"tidy\" this into an interface.\n *\n * All three maps are needed because the target is chosen at runtime:\n * `element?.current ?? window`.\n */\nexport type DomEventMap = WindowEventMap & HTMLElementEventMap & DocumentEventMap;\n\n/** Any DOM event name this hook accepts — `keyof DomEventMap`. */\nexport type DomEventName = keyof DomEventMap;\n\n/**\n * Subscribes to a DOM event for the lifetime of the component, always calling\n * the latest `handler` without re-subscribing when it changes identity.\n *\n * `element` AND `options` ARE OPTIONAL, AND THAT IS THE ENTIRE FIX FOR THE\n * TS2554 ARITY ERRORS IN THIS DIRECTORY. In JavaScript a missing argument is\n * `undefined`; in TypeScript a parameter with neither `?` nor a default is\n * REQUIRED. Annotating the original four parameters without marking the last two\n * optional is what made every existing 2- and 3-argument call site a hard error\n * (`useOnClickOutside.ts:4`, `useElementSize.ts:22`,\n * `MultiLevelCheckboxSelect.tsx:65-67`). `element` really is optional — the hook\n * falls back to `window` — and `options` really is optional, so the declaration\n * below records what this function has always done. The body is unchanged.\n *\n * @param eventName any DOM event name; it selects the handler's event type\n * @param handler   receives the event. Stored in a ref, so it may be a fresh\n *                  closure on every render without rebinding the listener\n * @param element   ref to the target. Omit it — or pass a ref whose `current` is\n *                  still `null` — to listen on `window`\n * @param options   forwarded verbatim to `addEventListener` and\n *                  `removeEventListener`\n */\nfunction useEventListener<K extends DomEventName, T extends EventTarget = HTMLElement>(\n  eventName: K,\n  handler: (event: DomEventMap[K]) => void,\n  element?: RefObject<T | null> | null,\n  options?: boolean | AddEventListenerOptions\n): void {\n  // Create a ref that stores handler\n  const savedHandler = useRef(handler);\n\n  useIsomorphicLayoutEffect(() => {\n    savedHandler.current = handler;\n  }, [handler]);\n\n  useEffect(() => {\n    /*\n     * Define the listening target.\n     *\n     * Typed as the `EventTarget` base rather than `T | Window` deliberately: the\n     * only members this hook touches are `addEventListener` /\n     * `removeEventListener`, and `EventTarget` declares exactly those two with a\n     * `type: string` signature. The `HTMLElement` and `Window` overloads are\n     * keyed on their OWN narrower event maps, so a union target combined with a\n     * `K` spanning all three maps makes overload resolution fail for every name\n     * that is valid on one target but not the other. Precision belongs at the\n     * public boundary above, where it is checked; here the base interface is the\n     * honest description of what is used.\n     */\n    const targetElement: EventTarget = element?.current ?? window;\n\n    if (!(targetElement && targetElement.addEventListener)) return;\n\n    /*\n     * Create event listener that calls handler function stored in ref.\n     *\n     * The cast is the inverse of the boundary check: `EventListener` hands us a\n     * bare `Event` because it is the untyped base signature, while `K` — checked\n     * at the call site — is what says which subclass actually arrives.\n     */\n    const listener: EventListener = event => savedHandler.current(event as DomEventMap[K]);\n\n    targetElement.addEventListener(eventName, listener, options);\n\n    // Remove event listener on cleanup\n    return () => {\n      targetElement.removeEventListener(eventName, listener, options);\n    };\n  }, [eventName, element, options]);\n}\n\nexport { useEventListener };\n"],"names":["useEventListener","eventName","handler","element","options","savedHandler","useRef","useIsomorphicLayoutEffect","current","useEffect","targetElement","window","addEventListener","listener","event","removeEventListener"],"mappings":";;;AAkDA,SAASA,gBAAgBA,CACvBC,SAAY,EACZC,OAAwC,EACxCC,OAAoC,EACpCC,OAA2C,EACrC;AAEN,EAAA,MAAMC,YAAY,GAAGC,MAAM,CAACJ,OAAO,CAAC;AAEpCK,EAAAA,yBAAyB,CAAC,MAAM;IAC9BF,YAAY,CAACG,OAAO,GAAGN,OAAO;AAChC,EAAA,CAAC,EAAE,CAACA,OAAO,CAAC,CAAC;AAEbO,EAAAA,SAAS,CAAC,MAAM;AAcd,IAAA,MAAMC,aAA0B,GAAGP,OAAO,EAAEK,OAAO,IAAIG,MAAM;AAE7D,IAAA,IAAI,EAAED,aAAa,IAAIA,aAAa,CAACE,gBAAgB,CAAC,EAAE;IASxD,MAAMC,QAAuB,GAAGC,KAAK,IAAIT,YAAY,CAACG,OAAO,CAACM,KAAuB,CAAC;IAEtFJ,aAAa,CAACE,gBAAgB,CAACX,SAAS,EAAEY,QAAQ,EAAET,OAAO,CAAC;AAG5D,IAAA,OAAO,MAAM;MACXM,aAAa,CAACK,mBAAmB,CAACd,SAAS,EAAEY,QAAQ,EAAET,OAAO,CAAC;IACjE,CAAC;EACH,CAAC,EAAE,CAACH,SAAS,EAAEE,OAAO,EAAEC,OAAO,CAAC,CAAC;AACnC;;;;"}

package/build/hooks/useFloatingPopover.js

@@ -0,0 +1,187 @@
+import { useRef, useState, useEffect, useCallback, useMemo } from 'react';
+import { useFloating, autoUpdate, safePolygon, useClick, useHover, useFocus, useDismiss, useInteractions, useTransitionStyles, offset, autoPlacement, flip, shift, arrow, size } from '@floating-ui/react';
+import { parseTrigger } from '../utils/parseTrigger.js';
+
+const DEFAULT_ARROW_HEIGHT = 15;
+const DEFAULT_MAX_HEIGHT_PADDING = 10;
+const DEFAULT_COLLISION_PADDING = 5;
+const SHIFT_AWAY_SUBTLE_DISTANCE = 5;
+function isAutoPlacement(placement) {
+  return placement === 'auto' || placement === 'auto-start' || placement === 'auto-end';
+}
+const shiftAwaySubtle = ({
+  side
+}) => {
+  const transform = {
+    top: `translateY(${SHIFT_AWAY_SUBTLE_DISTANCE}px)`,
+    bottom: `translateY(-${SHIFT_AWAY_SUBTLE_DISTANCE}px)`,
+    left: `translateX(${SHIFT_AWAY_SUBTLE_DISTANCE}px)`,
+    right: `translateX(-${SHIFT_AWAY_SUBTLE_DISTANCE}px)`
+  }[side];
+  return {
+    opacity: 0,
+    transform
+  };
+};
+function buildMiddleware(options) {
+  const middleware = [offset({
+    mainAxis: options.mainAxis,
+    crossAxis: options.crossAxis
+  })];
+  if (isAutoPlacement(options.placement)) {
+    const alignment = options.placement === 'auto-start' ? 'start' : options.placement === 'auto-end' ? 'end' : undefined;
+    middleware.push(autoPlacement({
+      padding: options.collisionPadding,
+      ...(alignment ? {
+        alignment,
+        autoAlignment: false
+      } : {})
+    }));
+  } else {
+    middleware.push(flip({
+      padding: options.collisionPadding
+    }));
+  }
+  middleware.push(shift({
+    padding: options.collisionPadding
+  }));
+  if (options.arrow) {
+    middleware.push(arrow({
+      element: options.arrowRef
+    }));
+  }
+  if (options.constrainHeight) {
+    middleware.push(size({
+      padding: options.maxHeightPadding,
+      apply({
+        availableHeight,
+        elements
+      }) {
+        elements.floating.style.maxHeight = '';
+        const fits = elements.floating.scrollHeight <= availableHeight;
+        elements.floating.style.maxHeight = fits ? '' : `${Math.max(0, availableHeight)}px`;
+      }
+    }));
+  }
+  if (options.extra?.length) {
+    middleware.push(...options.extra);
+  }
+  return middleware;
+}
+function useFloatingPopover(options = {}) {
+  const {
+    placement = 'bottom',
+    open,
+    onOpenChange,
+    trigger,
+    offset: offsetProp = [0, 0],
+    arrow: hasArrow = false,
+    arrowHeight = DEFAULT_ARROW_HEIGHT,
+    interactive = false,
+    disabled = false,
+    duration,
+    transition,
+    dismiss: dismissProps,
+    hover: hoverProps,
+    click: clickProps,
+    focus: focusProps,
+    constrainHeight = false,
+    maxHeightPadding = DEFAULT_MAX_HEIGHT_PADDING,
+    collisionPadding = DEFAULT_COLLISION_PADDING,
+    nodeId,
+    middleware: extraMiddleware
+  } = options;
+  const arrowRef = useRef(null);
+  const isControlled = typeof open === 'boolean';
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
+  const isOpen = disabled ? false : isControlled ? open : uncontrolledOpen;
+  useEffect(() => {
+    if (disabled) {
+      setUncontrolledOpen(false);
+    }
+  }, [disabled]);
+  const setOpen = useCallback((next, event, reason) => {
+    if (!isControlled) {
+      setUncontrolledOpen(next);
+    }
+    onOpenChange?.(next, event, reason);
+  }, [isControlled, onOpenChange]);
+  const [skidding, distance] = offsetProp;
+  const middleware = useMemo(() => buildMiddleware({
+    placement,
+    mainAxis: distance + (hasArrow ? arrowHeight : 0),
+    crossAxis: skidding,
+    arrow: hasArrow,
+    arrowRef,
+    constrainHeight,
+    maxHeightPadding,
+    collisionPadding,
+    extra: extraMiddleware
+  }), [placement, distance, skidding, hasArrow, arrowHeight, constrainHeight, maxHeightPadding, collisionPadding, extraMiddleware]);
+  const {
+    refs,
+    floatingStyles,
+    context,
+    placement: resolvedPlacement
+  } = useFloating({
+    placement: isAutoPlacement(placement) ? undefined : placement,
+    open: isOpen,
+    onOpenChange: setOpen,
+    whileElementsMounted: autoUpdate,
+    middleware,
+    nodeId
+  });
+  const triggers = useMemo(() => parseTrigger(trigger), [trigger]);
+  const triggersEnabled = !disabled && !isControlled;
+  const handleClose = useMemo(() => interactive ? safePolygon() : null, [interactive]);
+  const click = useClick(context, {
+    ...clickProps,
+    enabled: triggersEnabled && triggers.click
+  });
+  const hover = useHover(context, {
+    ...hoverProps,
+    enabled: triggersEnabled && triggers.hover,
+    handleClose
+  });
+  const focus = useFocus(context, {
+    visibleOnly: false,
+    ...focusProps,
+    enabled: triggersEnabled && triggers.focus
+  });
+  const dismiss = useDismiss(context, {
+    escapeKey: false,
+    outsidePress: true,
+    referencePress: false,
+    ...dismissProps,
+    enabled: !disabled
+  });
+  const {
+    getReferenceProps,
+    getFloatingProps
+  } = useInteractions([click, hover, focus, dismiss]);
+  const {
+    isMounted,
+    styles: transitionStyles
+  } = useTransitionStyles(context, {
+    initial: shiftAwaySubtle,
+    ...transition,
+    duration
+  });
+  return {
+    refs,
+    floatingStyles,
+    context,
+    getReferenceProps,
+    getFloatingProps,
+    isMounted,
+    transitionStyles,
+    arrowRef,
+    isOpen,
+    setOpen,
+    placement: resolvedPlacement,
+    pointerEvents: interactive ? undefined : 'none'
+  };
+}
+
+export { DEFAULT_ARROW_HEIGHT, useFloatingPopover as default, useFloatingPopover };
+//# sourceMappingURL=useFloatingPopover.js.map