\n {/* We use their children if they're slotting to replace the whole svg */}\n {props.asChild ? children : }\n \n );\n});\n\nArrow.displayName = NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst Root = Arrow;\n\nexport {\n Arrow,\n //\n Root,\n};\nexport type { ArrowProps };\n","import * as React from 'react';\nimport {\n useFloating,\n autoUpdate,\n offset,\n shift,\n limitShift,\n hide,\n arrow as floatingUIarrow,\n flip,\n size,\n} from '@floating-ui/react-dom';\nimport * as ArrowPrimitive from '@radix-ui/react-arrow';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { useCallbackRef } from '@radix-ui/react-use-callback-ref';\nimport { useLayoutEffect } from '@radix-ui/react-use-layout-effect';\nimport { useSize } from '@radix-ui/react-use-size';\n\nimport type { Placement, Middleware } from '@floating-ui/react-dom';\nimport type { Scope } from '@radix-ui/react-context';\nimport type { Measurable } from '@radix-ui/rect';\n\nconst SIDE_OPTIONS = ['top', 'right', 'bottom', 'left'] as const;\nconst ALIGN_OPTIONS = ['start', 'center', 'end'] as const;\n\ntype Side = (typeof SIDE_OPTIONS)[number];\ntype Align = (typeof ALIGN_OPTIONS)[number];\n\n/* -------------------------------------------------------------------------------------------------\n * Popper\n * -----------------------------------------------------------------------------------------------*/\n\nconst POPPER_NAME = 'Popper';\n\ntype ScopedProps = P & { __scopePopper?: Scope };\nconst [createPopperContext, createPopperScope] = createContextScope(POPPER_NAME);\n\ntype PopperContextValue = {\n anchor: Measurable | null;\n onAnchorChange(anchor: Measurable | null): void;\n};\nconst [PopperProvider, usePopperContext] = createPopperContext(POPPER_NAME);\n\ninterface PopperProps {\n children?: React.ReactNode;\n}\nconst Popper: React.FC = (props: ScopedProps) => {\n const { __scopePopper, children } = props;\n const [anchor, setAnchor] = React.useState(null);\n return (\n \n {children}\n \n );\n};\n\nPopper.displayName = POPPER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * PopperAnchor\n * -----------------------------------------------------------------------------------------------*/\n\nconst ANCHOR_NAME = 'PopperAnchor';\n\ntype PopperAnchorElement = React.ElementRef;\ntype PrimitiveDivProps = React.ComponentPropsWithoutRef;\ninterface PopperAnchorProps extends PrimitiveDivProps {\n virtualRef?: React.RefObject;\n}\n\nconst PopperAnchor = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const { __scopePopper, virtualRef, ...anchorProps } = props;\n const context = usePopperContext(ANCHOR_NAME, __scopePopper);\n const ref = React.useRef(null);\n const composedRefs = useComposedRefs(forwardedRef, ref);\n\n React.useEffect(() => {\n // Consumer can anchor the popper to something that isn't\n // a DOM node e.g. pointer position, so we override the\n // `anchorRef` with their virtual ref in this case.\n context.onAnchorChange(virtualRef?.current || ref.current);\n });\n\n return virtualRef ? null : ;\n }\n);\n\nPopperAnchor.displayName = ANCHOR_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * PopperContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'PopperContent';\n\ntype PopperContentContextValue = {\n placedSide: Side;\n onArrowChange(arrow: HTMLSpanElement | null): void;\n arrowX?: number;\n arrowY?: number;\n shouldHideArrow: boolean;\n};\n\nconst [PopperContentProvider, useContentContext] =\n createPopperContext(CONTENT_NAME);\n\ntype Boundary = Element | null;\n\ntype PopperContentElement = React.ElementRef;\ninterface PopperContentProps extends PrimitiveDivProps {\n side?: Side;\n sideOffset?: number;\n align?: Align;\n alignOffset?: number;\n arrowPadding?: number;\n avoidCollisions?: boolean;\n collisionBoundary?: Boundary | Boundary[];\n collisionPadding?: number | Partial>;\n sticky?: 'partial' | 'always';\n hideWhenDetached?: boolean;\n updatePositionStrategy?: 'optimized' | 'always';\n onPlaced?: () => void;\n}\n\nconst PopperContent = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const {\n __scopePopper,\n side = 'bottom',\n sideOffset = 0,\n align = 'center',\n alignOffset = 0,\n arrowPadding = 0,\n avoidCollisions = true,\n collisionBoundary = [],\n collisionPadding: collisionPaddingProp = 0,\n sticky = 'partial',\n hideWhenDetached = false,\n updatePositionStrategy = 'optimized',\n onPlaced,\n ...contentProps\n } = props;\n\n const context = usePopperContext(CONTENT_NAME, __scopePopper);\n\n const [content, setContent] = React.useState(null);\n const composedRefs = useComposedRefs(forwardedRef, (node) => setContent(node));\n\n const [arrow, setArrow] = React.useState(null);\n const arrowSize = useSize(arrow);\n const arrowWidth = arrowSize?.width ?? 0;\n const arrowHeight = arrowSize?.height ?? 0;\n\n const desiredPlacement = (side + (align !== 'center' ? '-' + align : '')) as Placement;\n\n const collisionPadding =\n typeof collisionPaddingProp === 'number'\n ? collisionPaddingProp\n : { top: 0, right: 0, bottom: 0, left: 0, ...collisionPaddingProp };\n\n const boundary = Array.isArray(collisionBoundary) ? collisionBoundary : [collisionBoundary];\n const hasExplicitBoundaries = boundary.length > 0;\n\n const detectOverflowOptions = {\n padding: collisionPadding,\n boundary: boundary.filter(isNotNull),\n // with `strategy: 'fixed'`, this is the only way to get it to respect boundaries\n altBoundary: hasExplicitBoundaries,\n };\n\n const { refs, floatingStyles, placement, isPositioned, middlewareData } = useFloating({\n // default to `fixed` strategy so users don't have to pick and we also avoid focus scroll issues\n strategy: 'fixed',\n placement: desiredPlacement,\n whileElementsMounted: (...args) => {\n const cleanup = autoUpdate(...args, {\n animationFrame: updatePositionStrategy === 'always',\n });\n return cleanup;\n },\n elements: {\n reference: context.anchor,\n },\n middleware: [\n offset({ mainAxis: sideOffset + arrowHeight, alignmentAxis: alignOffset }),\n avoidCollisions &&\n shift({\n mainAxis: true,\n crossAxis: false,\n limiter: sticky === 'partial' ? limitShift() : undefined,\n ...detectOverflowOptions,\n }),\n avoidCollisions && flip({ ...detectOverflowOptions }),\n size({\n ...detectOverflowOptions,\n apply: ({ elements, rects, availableWidth, availableHeight }) => {\n const { width: anchorWidth, height: anchorHeight } = rects.reference;\n const contentStyle = elements.floating.style;\n contentStyle.setProperty('--radix-popper-available-width', `${availableWidth}px`);\n contentStyle.setProperty('--radix-popper-available-height', `${availableHeight}px`);\n contentStyle.setProperty('--radix-popper-anchor-width', `${anchorWidth}px`);\n contentStyle.setProperty('--radix-popper-anchor-height', `${anchorHeight}px`);\n },\n }),\n arrow && floatingUIarrow({ element: arrow, padding: arrowPadding }),\n transformOrigin({ arrowWidth, arrowHeight }),\n hideWhenDetached && hide({ strategy: 'referenceHidden', ...detectOverflowOptions }),\n ],\n });\n\n const [placedSide, placedAlign] = getSideAndAlignFromPlacement(placement);\n\n const handlePlaced = useCallbackRef(onPlaced);\n useLayoutEffect(() => {\n if (isPositioned) {\n handlePlaced?.();\n }\n }, [isPositioned, handlePlaced]);\n\n const arrowX = middlewareData.arrow?.x;\n const arrowY = middlewareData.arrow?.y;\n const cannotCenterArrow = middlewareData.arrow?.centerOffset !== 0;\n\n const [contentZIndex, setContentZIndex] = React.useState();\n useLayoutEffect(() => {\n if (content) setContentZIndex(window.getComputedStyle(content).zIndex);\n }, [content]);\n\n return (\n \n \n \n \n \n );\n }\n);\n\nPopperContent.displayName = CONTENT_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * PopperArrow\n * -----------------------------------------------------------------------------------------------*/\n\nconst ARROW_NAME = 'PopperArrow';\n\nconst OPPOSITE_SIDE: Record = {\n top: 'bottom',\n right: 'left',\n bottom: 'top',\n left: 'right',\n};\n\ntype PopperArrowElement = React.ElementRef;\ntype ArrowProps = React.ComponentPropsWithoutRef;\ninterface PopperArrowProps extends ArrowProps {}\n\nconst PopperArrow = React.forwardRef(function PopperArrow(\n props: ScopedProps,\n forwardedRef\n) {\n const { __scopePopper, ...arrowProps } = props;\n const contentContext = useContentContext(ARROW_NAME, __scopePopper);\n const baseSide = OPPOSITE_SIDE[contentContext.placedSide];\n\n return (\n // we have to use an extra wrapper because `ResizeObserver` (used by `useSize`)\n // doesn't report size as we'd expect on SVG elements.\n // it reports their bounding box which is effectively the largest path inside the SVG.\n \n \n \n );\n});\n\nPopperArrow.displayName = ARROW_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction isNotNull(value: T | null): value is T {\n return value !== null;\n}\n\nconst transformOrigin = (options: { arrowWidth: number; arrowHeight: number }): Middleware => ({\n name: 'transformOrigin',\n options,\n fn(data) {\n const { placement, rects, middlewareData } = data;\n\n const cannotCenterArrow = middlewareData.arrow?.centerOffset !== 0;\n const isArrowHidden = cannotCenterArrow;\n const arrowWidth = isArrowHidden ? 0 : options.arrowWidth;\n const arrowHeight = isArrowHidden ? 0 : options.arrowHeight;\n\n const [placedSide, placedAlign] = getSideAndAlignFromPlacement(placement);\n const noArrowAlign = { start: '0%', center: '50%', end: '100%' }[placedAlign];\n\n const arrowXCenter = (middlewareData.arrow?.x ?? 0) + arrowWidth / 2;\n const arrowYCenter = (middlewareData.arrow?.y ?? 0) + arrowHeight / 2;\n\n let x = '';\n let y = '';\n\n if (placedSide === 'bottom') {\n x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;\n y = `${-arrowHeight}px`;\n } else if (placedSide === 'top') {\n x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;\n y = `${rects.floating.height + arrowHeight}px`;\n } else if (placedSide === 'right') {\n x = `${-arrowHeight}px`;\n y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;\n } else if (placedSide === 'left') {\n x = `${rects.floating.width + arrowHeight}px`;\n y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;\n }\n return { data: { x, y } };\n },\n});\n\nfunction getSideAndAlignFromPlacement(placement: Placement) {\n const [side, align = 'center'] = placement.split('-');\n return [side as Side, align as Align] as const;\n}\n\nconst Root = Popper;\nconst Anchor = PopperAnchor;\nconst Content = PopperContent;\nconst Arrow = PopperArrow;\n\nexport {\n createPopperScope,\n //\n Popper,\n PopperAnchor,\n PopperContent,\n PopperArrow,\n //\n Root,\n Anchor,\n Content,\n Arrow,\n //\n SIDE_OPTIONS,\n ALIGN_OPTIONS,\n};\nexport type { PopperProps, PopperAnchorProps, PopperContentProps, PopperArrowProps };\n","/// \n\nimport * as React from 'react';\nimport { useLayoutEffect } from '@radix-ui/react-use-layout-effect';\n\nfunction useSize(element: HTMLElement | null) {\n const [size, setSize] = React.useState<{ width: number; height: number } | undefined>(undefined);\n\n useLayoutEffect(() => {\n if (element) {\n // provide size as early as possible\n setSize({ width: element.offsetWidth, height: element.offsetHeight });\n\n const resizeObserver = new ResizeObserver((entries) => {\n if (!Array.isArray(entries)) {\n return;\n }\n\n // Since we only observe the one element, we don't need to loop over the\n // array\n if (!entries.length) {\n return;\n }\n\n const entry = entries[0];\n let width: number;\n let height: number;\n\n if ('borderBoxSize' in entry) {\n const borderSizeEntry = entry['borderBoxSize'];\n // iron out differences between browsers\n const borderSize = Array.isArray(borderSizeEntry) ? borderSizeEntry[0] : borderSizeEntry;\n width = borderSize['inlineSize'];\n height = borderSize['blockSize'];\n } else {\n // for browsers that don't support `borderBoxSize`\n // we calculate it ourselves to get the correct border box.\n width = element.offsetWidth;\n height = element.offsetHeight;\n }\n\n setSize({ width, height });\n });\n\n resizeObserver.observe(element, { box: 'border-box' });\n\n return () => resizeObserver.unobserve(element);\n } else {\n // We only want to reset to `undefined` when the element becomes `null`,\n // not if it changes to another element.\n setSize(undefined);\n }\n }, [element]);\n\n return size;\n}\n\nexport { useSize };\n","import * as React from 'react';\nimport ReactDOM from 'react-dom';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { useLayoutEffect } from '@radix-ui/react-use-layout-effect';\n\n/* -------------------------------------------------------------------------------------------------\n * Portal\n * -----------------------------------------------------------------------------------------------*/\n\nconst PORTAL_NAME = 'Portal';\n\ntype PortalElement = React.ElementRef;\ntype PrimitiveDivProps = React.ComponentPropsWithoutRef;\ninterface PortalProps extends PrimitiveDivProps {\n /**\n * An optional container where the portaled content should be appended.\n */\n container?: Element | DocumentFragment | null;\n}\n\nconst Portal = React.forwardRef((props, forwardedRef) => {\n const { container: containerProp, ...portalProps } = props;\n const [mounted, setMounted] = React.useState(false);\n useLayoutEffect(() => setMounted(true), []);\n const container = containerProp || (mounted && globalThis?.document?.body);\n return container\n ? ReactDOM.createPortal(, container)\n : null;\n});\n\nPortal.displayName = PORTAL_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst Root = Portal;\n\nexport {\n Portal,\n //\n Root,\n};\nexport type { PortalProps };\n","import * as React from 'react';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { useLayoutEffect } from '@radix-ui/react-use-layout-effect';\nimport { useStateMachine } from './useStateMachine';\n\ninterface PresenceProps {\n children: React.ReactElement | ((props: { present: boolean }) => React.ReactElement);\n present: boolean;\n}\n\nconst Presence: React.FC = (props) => {\n const { present, children } = props;\n const presence = usePresence(present);\n\n const child = (\n typeof children === 'function'\n ? children({ present: presence.isPresent })\n : React.Children.only(children)\n ) as React.ReactElement<{ ref?: React.Ref }>;\n\n const ref = useComposedRefs(presence.ref, getElementRef(child));\n const forceMount = typeof children === 'function';\n return forceMount || presence.isPresent ? React.cloneElement(child, { ref }) : null;\n};\n\nPresence.displayName = 'Presence';\n\n/* -------------------------------------------------------------------------------------------------\n * usePresence\n * -----------------------------------------------------------------------------------------------*/\n\nfunction usePresence(present: boolean) {\n const [node, setNode] = React.useState();\n const stylesRef = React.useRef({} as any);\n const prevPresentRef = React.useRef(present);\n const prevAnimationNameRef = React.useRef('none');\n const initialState = present ? 'mounted' : 'unmounted';\n const [state, send] = useStateMachine(initialState, {\n mounted: {\n UNMOUNT: 'unmounted',\n ANIMATION_OUT: 'unmountSuspended',\n },\n unmountSuspended: {\n MOUNT: 'mounted',\n ANIMATION_END: 'unmounted',\n },\n unmounted: {\n MOUNT: 'mounted',\n },\n });\n\n React.useEffect(() => {\n const currentAnimationName = getAnimationName(stylesRef.current);\n prevAnimationNameRef.current = state === 'mounted' ? currentAnimationName : 'none';\n }, [state]);\n\n useLayoutEffect(() => {\n const styles = stylesRef.current;\n const wasPresent = prevPresentRef.current;\n const hasPresentChanged = wasPresent !== present;\n\n if (hasPresentChanged) {\n const prevAnimationName = prevAnimationNameRef.current;\n const currentAnimationName = getAnimationName(styles);\n\n if (present) {\n send('MOUNT');\n } else if (currentAnimationName === 'none' || styles?.display === 'none') {\n // If there is no exit animation or the element is hidden, animations won't run\n // so we unmount instantly\n send('UNMOUNT');\n } else {\n /**\n * When `present` changes to `false`, we check changes to animation-name to\n * determine whether an animation has started. We chose this approach (reading\n * computed styles) because there is no `animationrun` event and `animationstart`\n * fires after `animation-delay` has expired which would be too late.\n */\n const isAnimating = prevAnimationName !== currentAnimationName;\n\n if (wasPresent && isAnimating) {\n send('ANIMATION_OUT');\n } else {\n send('UNMOUNT');\n }\n }\n\n prevPresentRef.current = present;\n }\n }, [present, send]);\n\n useLayoutEffect(() => {\n if (node) {\n let timeoutId: number;\n const ownerWindow = node.ownerDocument.defaultView ?? window;\n /**\n * Triggering an ANIMATION_OUT during an ANIMATION_IN will fire an `animationcancel`\n * event for ANIMATION_IN after we have entered `unmountSuspended` state. So, we\n * make sure we only trigger ANIMATION_END for the currently active animation.\n */\n const handleAnimationEnd = (event: AnimationEvent) => {\n const currentAnimationName = getAnimationName(stylesRef.current);\n const isCurrentAnimation = currentAnimationName.includes(event.animationName);\n if (event.target === node && isCurrentAnimation) {\n // With React 18 concurrency this update is applied a frame after the\n // animation ends, creating a flash of visible content. By setting the\n // animation fill mode to \"forwards\", we force the node to keep the\n // styles of the last keyframe, removing the flash.\n //\n // Previously we flushed the update via ReactDom.flushSync, but with\n // exit animations this resulted in the node being removed from the\n // DOM before the synthetic animationEnd event was dispatched, meaning\n // user-provided event handlers would not be called.\n // https://github.com/radix-ui/primitives/pull/1849\n send('ANIMATION_END');\n if (!prevPresentRef.current) {\n const currentFillMode = node.style.animationFillMode;\n node.style.animationFillMode = 'forwards';\n // Reset the style after the node had time to unmount (for cases\n // where the component chooses not to unmount). Doing this any\n // sooner than `setTimeout` (e.g. with `requestAnimationFrame`)\n // still causes a flash.\n timeoutId = ownerWindow.setTimeout(() => {\n if (node.style.animationFillMode === 'forwards') {\n node.style.animationFillMode = currentFillMode;\n }\n });\n }\n }\n };\n const handleAnimationStart = (event: AnimationEvent) => {\n if (event.target === node) {\n // if animation occurred, store its name as the previous animation.\n prevAnimationNameRef.current = getAnimationName(stylesRef.current);\n }\n };\n node.addEventListener('animationstart', handleAnimationStart);\n node.addEventListener('animationcancel', handleAnimationEnd);\n node.addEventListener('animationend', handleAnimationEnd);\n return () => {\n ownerWindow.clearTimeout(timeoutId);\n node.removeEventListener('animationstart', handleAnimationStart);\n node.removeEventListener('animationcancel', handleAnimationEnd);\n node.removeEventListener('animationend', handleAnimationEnd);\n };\n } else {\n // Transition to the unmounted state if the node is removed prematurely.\n // We avoid doing so during cleanup as the node may change but still exist.\n send('ANIMATION_END');\n }\n }, [node, send]);\n\n return {\n isPresent: ['mounted', 'unmountSuspended'].includes(state),\n ref: React.useCallback((node: HTMLElement) => {\n if (node) stylesRef.current = getComputedStyle(node);\n setNode(node);\n }, []),\n };\n}\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction getAnimationName(styles?: CSSStyleDeclaration) {\n return styles?.animationName || 'none';\n}\n\n// Before React 19 accessing `element.props.ref` will throw a warning and suggest using `element.ref`\n// After React 19 accessing `element.ref` does the opposite.\n// https://github.com/facebook/react/pull/28348\n//\n// Access the ref using the method that doesn't yield a warning.\nfunction getElementRef(element: React.ReactElement<{ ref?: React.Ref }>) {\n // React <=18 in DEV\n let getter = Object.getOwnPropertyDescriptor(element.props, 'ref')?.get;\n let mayWarn = getter && 'isReactWarning' in getter && getter.isReactWarning;\n if (mayWarn) {\n return (element as any).ref;\n }\n\n // React 19 in DEV\n getter = Object.getOwnPropertyDescriptor(element, 'ref')?.get;\n mayWarn = getter && 'isReactWarning' in getter && getter.isReactWarning;\n if (mayWarn) {\n return element.props.ref;\n }\n\n // Not DEV\n return element.props.ref || (element as any).ref;\n}\n\nexport { Presence };\nexport type { PresenceProps };\n","import * as React from 'react';\n\ntype Machine = { [k: string]: { [k: string]: S } };\ntype MachineState = keyof T;\ntype MachineEvent = keyof UnionToIntersection;\n\n// 🤯 https://fettblog.eu/typescript-union-to-intersection/\ntype UnionToIntersection = (T extends any ? (x: T) => any : never) extends (x: infer R) => any\n ? R\n : never;\n\nexport function useStateMachine(\n initialState: MachineState,\n machine: M & Machine>\n) {\n return React.useReducer((state: MachineState, event: MachineEvent): MachineState => {\n const nextState = (machine[state] as any)[event];\n return nextState ?? state;\n }, initialState);\n}\n","import * as React from 'react';\nimport { useCallbackRef } from '@radix-ui/react-use-callback-ref';\n\ntype UseControllableStateParams = {\n prop?: T | undefined;\n defaultProp?: T | undefined;\n onChange?: (state: T) => void;\n};\n\ntype SetStateFn = (prevState?: T) => T;\n\nfunction useControllableState({\n prop,\n defaultProp,\n onChange = () => {},\n}: UseControllableStateParams) {\n const [uncontrolledProp, setUncontrolledProp] = useUncontrolledState({ defaultProp, onChange });\n const isControlled = prop !== undefined;\n const value = isControlled ? prop : uncontrolledProp;\n const handleChange = useCallbackRef(onChange);\n\n const setValue: React.Dispatch> = React.useCallback(\n (nextValue) => {\n if (isControlled) {\n const setter = nextValue as SetStateFn;\n const value = typeof nextValue === 'function' ? setter(prop) : nextValue;\n if (value !== prop) handleChange(value as T);\n } else {\n setUncontrolledProp(nextValue);\n }\n },\n [isControlled, prop, setUncontrolledProp, handleChange]\n );\n\n return [value, setValue] as const;\n}\n\nfunction useUncontrolledState({\n defaultProp,\n onChange,\n}: Omit, 'prop'>) {\n const uncontrolledState = React.useState(defaultProp);\n const [value] = uncontrolledState;\n const prevValueRef = React.useRef(value);\n const handleChange = useCallbackRef(onChange);\n\n React.useEffect(() => {\n if (prevValueRef.current !== value) {\n handleChange(value as T);\n prevValueRef.current = value;\n }\n }, [value, prevValueRef, handleChange]);\n\n return uncontrolledState;\n}\n\nexport { useControllableState };\n","import * as React from 'react';\nimport { Primitive } from '@radix-ui/react-primitive';\n\n/* -------------------------------------------------------------------------------------------------\n * VisuallyHidden\n * -----------------------------------------------------------------------------------------------*/\n\nconst NAME = 'VisuallyHidden';\n\ntype VisuallyHiddenElement = React.ElementRef;\ntype PrimitiveSpanProps = React.ComponentPropsWithoutRef;\ninterface VisuallyHiddenProps extends PrimitiveSpanProps {}\n\nconst VisuallyHidden = React.forwardRef(\n (props, forwardedRef) => {\n return (\n \n );\n }\n);\n\nVisuallyHidden.displayName = NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst Root = VisuallyHidden;\n\nexport {\n VisuallyHidden,\n //\n Root,\n};\nexport type { VisuallyHiddenProps };\n","import * as React from 'react';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { DismissableLayer } from '@radix-ui/react-dismissable-layer';\nimport { useId } from '@radix-ui/react-id';\nimport * as PopperPrimitive from '@radix-ui/react-popper';\nimport { createPopperScope } from '@radix-ui/react-popper';\nimport { Portal as PortalPrimitive } from '@radix-ui/react-portal';\nimport { Presence } from '@radix-ui/react-presence';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { Slottable } from '@radix-ui/react-slot';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport * as VisuallyHiddenPrimitive from '@radix-ui/react-visually-hidden';\n\nimport type { Scope } from '@radix-ui/react-context';\n\ntype ScopedProps = P & { __scopeTooltip?: Scope };\nconst [createTooltipContext, createTooltipScope] = createContextScope('Tooltip', [\n createPopperScope,\n]);\nconst usePopperScope = createPopperScope();\n\n/* -------------------------------------------------------------------------------------------------\n * TooltipProvider\n * -----------------------------------------------------------------------------------------------*/\n\nconst PROVIDER_NAME = 'TooltipProvider';\nconst DEFAULT_DELAY_DURATION = 700;\nconst TOOLTIP_OPEN = 'tooltip.open';\n\ntype TooltipProviderContextValue = {\n isOpenDelayed: boolean;\n delayDuration: number;\n onOpen(): void;\n onClose(): void;\n onPointerInTransitChange(inTransit: boolean): void;\n isPointerInTransitRef: React.MutableRefObject;\n disableHoverableContent: boolean;\n};\n\nconst [TooltipProviderContextProvider, useTooltipProviderContext] =\n createTooltipContext(PROVIDER_NAME);\n\ninterface TooltipProviderProps {\n children: React.ReactNode;\n /**\n * The duration from when the pointer enters the trigger until the tooltip gets opened.\n * @defaultValue 700\n */\n delayDuration?: number;\n /**\n * How much time a user has to enter another trigger without incurring a delay again.\n * @defaultValue 300\n */\n skipDelayDuration?: number;\n /**\n * When `true`, trying to hover the content will result in the tooltip closing as the pointer leaves the trigger.\n * @defaultValue false\n */\n disableHoverableContent?: boolean;\n}\n\nconst TooltipProvider: React.FC = (\n props: ScopedProps\n) => {\n const {\n __scopeTooltip,\n delayDuration = DEFAULT_DELAY_DURATION,\n skipDelayDuration = 300,\n disableHoverableContent = false,\n children,\n } = props;\n const [isOpenDelayed, setIsOpenDelayed] = React.useState(true);\n const isPointerInTransitRef = React.useRef(false);\n const skipDelayTimerRef = React.useRef(0);\n\n React.useEffect(() => {\n const skipDelayTimer = skipDelayTimerRef.current;\n return () => window.clearTimeout(skipDelayTimer);\n }, []);\n\n return (\n {\n window.clearTimeout(skipDelayTimerRef.current);\n setIsOpenDelayed(false);\n }, [])}\n onClose={React.useCallback(() => {\n window.clearTimeout(skipDelayTimerRef.current);\n skipDelayTimerRef.current = window.setTimeout(\n () => setIsOpenDelayed(true),\n skipDelayDuration\n );\n }, [skipDelayDuration])}\n isPointerInTransitRef={isPointerInTransitRef}\n onPointerInTransitChange={React.useCallback((inTransit: boolean) => {\n isPointerInTransitRef.current = inTransit;\n }, [])}\n disableHoverableContent={disableHoverableContent}\n >\n {children}\n \n );\n};\n\nTooltipProvider.displayName = PROVIDER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * Tooltip\n * -----------------------------------------------------------------------------------------------*/\n\nconst TOOLTIP_NAME = 'Tooltip';\n\ntype TooltipContextValue = {\n contentId: string;\n open: boolean;\n stateAttribute: 'closed' | 'delayed-open' | 'instant-open';\n trigger: TooltipTriggerElement | null;\n onTriggerChange(trigger: TooltipTriggerElement | null): void;\n onTriggerEnter(): void;\n onTriggerLeave(): void;\n onOpen(): void;\n onClose(): void;\n disableHoverableContent: boolean;\n};\n\nconst [TooltipContextProvider, useTooltipContext] =\n createTooltipContext(TOOLTIP_NAME);\n\ninterface TooltipProps {\n children?: React.ReactNode;\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n /**\n * The duration from when the pointer enters the trigger until the tooltip gets opened. This will\n * override the prop with the same name passed to Provider.\n * @defaultValue 700\n */\n delayDuration?: number;\n /**\n * When `true`, trying to hover the content will result in the tooltip closing as the pointer leaves the trigger.\n * @defaultValue false\n */\n disableHoverableContent?: boolean;\n}\n\nconst Tooltip: React.FC = (props: ScopedProps) => {\n const {\n __scopeTooltip,\n children,\n open: openProp,\n defaultOpen = false,\n onOpenChange,\n disableHoverableContent: disableHoverableContentProp,\n delayDuration: delayDurationProp,\n } = props;\n const providerContext = useTooltipProviderContext(TOOLTIP_NAME, props.__scopeTooltip);\n const popperScope = usePopperScope(__scopeTooltip);\n const [trigger, setTrigger] = React.useState(null);\n const contentId = useId();\n const openTimerRef = React.useRef(0);\n const disableHoverableContent =\n disableHoverableContentProp ?? providerContext.disableHoverableContent;\n const delayDuration = delayDurationProp ?? providerContext.delayDuration;\n const wasOpenDelayedRef = React.useRef(false);\n const [open = false, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: defaultOpen,\n onChange: (open) => {\n if (open) {\n providerContext.onOpen();\n\n // as `onChange` is called within a lifecycle method we\n // avoid dispatching via `dispatchDiscreteCustomEvent`.\n document.dispatchEvent(new CustomEvent(TOOLTIP_OPEN));\n } else {\n providerContext.onClose();\n }\n onOpenChange?.(open);\n },\n });\n const stateAttribute = React.useMemo(() => {\n return open ? (wasOpenDelayedRef.current ? 'delayed-open' : 'instant-open') : 'closed';\n }, [open]);\n\n const handleOpen = React.useCallback(() => {\n window.clearTimeout(openTimerRef.current);\n openTimerRef.current = 0;\n wasOpenDelayedRef.current = false;\n setOpen(true);\n }, [setOpen]);\n\n const handleClose = React.useCallback(() => {\n window.clearTimeout(openTimerRef.current);\n openTimerRef.current = 0;\n setOpen(false);\n }, [setOpen]);\n\n const handleDelayedOpen = React.useCallback(() => {\n window.clearTimeout(openTimerRef.current);\n openTimerRef.current = window.setTimeout(() => {\n wasOpenDelayedRef.current = true;\n setOpen(true);\n openTimerRef.current = 0;\n }, delayDuration);\n }, [delayDuration, setOpen]);\n\n React.useEffect(() => {\n return () => {\n if (openTimerRef.current) {\n window.clearTimeout(openTimerRef.current);\n openTimerRef.current = 0;\n }\n };\n }, []);\n\n return (\n \n {\n if (providerContext.isOpenDelayed) handleDelayedOpen();\n else handleOpen();\n }, [providerContext.isOpenDelayed, handleDelayedOpen, handleOpen])}\n onTriggerLeave={React.useCallback(() => {\n if (disableHoverableContent) {\n handleClose();\n } else {\n // Clear the timer in case the pointer leaves the trigger before the tooltip is opened.\n window.clearTimeout(openTimerRef.current);\n openTimerRef.current = 0;\n }\n }, [handleClose, disableHoverableContent])}\n onOpen={handleOpen}\n onClose={handleClose}\n disableHoverableContent={disableHoverableContent}\n >\n {children}\n \n \n );\n};\n\nTooltip.displayName = TOOLTIP_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * TooltipTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'TooltipTrigger';\n\ntype TooltipTriggerElement = React.ElementRef;\ntype PrimitiveButtonProps = React.ComponentPropsWithoutRef;\ninterface TooltipTriggerProps extends PrimitiveButtonProps {}\n\nconst TooltipTrigger = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const { __scopeTooltip, ...triggerProps } = props;\n const context = useTooltipContext(TRIGGER_NAME, __scopeTooltip);\n const providerContext = useTooltipProviderContext(TRIGGER_NAME, __scopeTooltip);\n const popperScope = usePopperScope(__scopeTooltip);\n const ref = React.useRef(null);\n const composedRefs = useComposedRefs(forwardedRef, ref, context.onTriggerChange);\n const isPointerDownRef = React.useRef(false);\n const hasPointerMoveOpenedRef = React.useRef(false);\n const handlePointerUp = React.useCallback(() => (isPointerDownRef.current = false), []);\n\n React.useEffect(() => {\n return () => document.removeEventListener('pointerup', handlePointerUp);\n }, [handlePointerUp]);\n\n return (\n \n {\n if (event.pointerType === 'touch') return;\n if (\n !hasPointerMoveOpenedRef.current &&\n !providerContext.isPointerInTransitRef.current\n ) {\n context.onTriggerEnter();\n hasPointerMoveOpenedRef.current = true;\n }\n })}\n onPointerLeave={composeEventHandlers(props.onPointerLeave, () => {\n context.onTriggerLeave();\n hasPointerMoveOpenedRef.current = false;\n })}\n onPointerDown={composeEventHandlers(props.onPointerDown, () => {\n isPointerDownRef.current = true;\n document.addEventListener('pointerup', handlePointerUp, { once: true });\n })}\n onFocus={composeEventHandlers(props.onFocus, () => {\n if (!isPointerDownRef.current) context.onOpen();\n })}\n onBlur={composeEventHandlers(props.onBlur, context.onClose)}\n onClick={composeEventHandlers(props.onClick, context.onClose)}\n />\n \n );\n }\n);\n\nTooltipTrigger.displayName = TRIGGER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * TooltipPortal\n * -----------------------------------------------------------------------------------------------*/\n\nconst PORTAL_NAME = 'TooltipPortal';\n\ntype PortalContextValue = { forceMount?: true };\nconst [PortalProvider, usePortalContext] = createTooltipContext(PORTAL_NAME, {\n forceMount: undefined,\n});\n\ntype PortalProps = React.ComponentPropsWithoutRef;\ninterface TooltipPortalProps {\n children?: React.ReactNode;\n /**\n * Specify a container element to portal the content into.\n */\n container?: PortalProps['container'];\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true;\n}\n\nconst TooltipPortal: React.FC = (props: ScopedProps) => {\n const { __scopeTooltip, forceMount, children, container } = props;\n const context = useTooltipContext(PORTAL_NAME, __scopeTooltip);\n return (\n \n \n \n {children}\n \n \n \n );\n};\n\nTooltipPortal.displayName = PORTAL_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * TooltipContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'TooltipContent';\n\ntype TooltipContentElement = TooltipContentImplElement;\ninterface TooltipContentProps extends TooltipContentImplProps {\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true;\n}\n\nconst TooltipContent = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const portalContext = usePortalContext(CONTENT_NAME, props.__scopeTooltip);\n const { forceMount = portalContext.forceMount, side = 'top', ...contentProps } = props;\n const context = useTooltipContext(CONTENT_NAME, props.__scopeTooltip);\n\n return (\n \n {context.disableHoverableContent ? (\n \n ) : (\n \n )}\n \n );\n }\n);\n\ntype Point = { x: number; y: number };\ntype Polygon = Point[];\n\ntype TooltipContentHoverableElement = TooltipContentImplElement;\ninterface TooltipContentHoverableProps extends TooltipContentImplProps {}\n\nconst TooltipContentHoverable = React.forwardRef<\n TooltipContentHoverableElement,\n TooltipContentHoverableProps\n>((props: ScopedProps, forwardedRef) => {\n const context = useTooltipContext(CONTENT_NAME, props.__scopeTooltip);\n const providerContext = useTooltipProviderContext(CONTENT_NAME, props.__scopeTooltip);\n const ref = React.useRef(null);\n const composedRefs = useComposedRefs(forwardedRef, ref);\n const [pointerGraceArea, setPointerGraceArea] = React.useState(null);\n\n const { trigger, onClose } = context;\n const content = ref.current;\n\n const { onPointerInTransitChange } = providerContext;\n\n const handleRemoveGraceArea = React.useCallback(() => {\n setPointerGraceArea(null);\n onPointerInTransitChange(false);\n }, [onPointerInTransitChange]);\n\n const handleCreateGraceArea = React.useCallback(\n (event: PointerEvent, hoverTarget: HTMLElement) => {\n const currentTarget = event.currentTarget as HTMLElement;\n const exitPoint = { x: event.clientX, y: event.clientY };\n const exitSide = getExitSideFromRect(exitPoint, currentTarget.getBoundingClientRect());\n const paddedExitPoints = getPaddedExitPoints(exitPoint, exitSide);\n const hoverTargetPoints = getPointsFromRect(hoverTarget.getBoundingClientRect());\n const graceArea = getHull([...paddedExitPoints, ...hoverTargetPoints]);\n setPointerGraceArea(graceArea);\n onPointerInTransitChange(true);\n },\n [onPointerInTransitChange]\n );\n\n React.useEffect(() => {\n return () => handleRemoveGraceArea();\n }, [handleRemoveGraceArea]);\n\n React.useEffect(() => {\n if (trigger && content) {\n const handleTriggerLeave = (event: PointerEvent) => handleCreateGraceArea(event, content);\n const handleContentLeave = (event: PointerEvent) => handleCreateGraceArea(event, trigger);\n\n trigger.addEventListener('pointerleave', handleTriggerLeave);\n content.addEventListener('pointerleave', handleContentLeave);\n return () => {\n trigger.removeEventListener('pointerleave', handleTriggerLeave);\n content.removeEventListener('pointerleave', handleContentLeave);\n };\n }\n }, [trigger, content, handleCreateGraceArea, handleRemoveGraceArea]);\n\n React.useEffect(() => {\n if (pointerGraceArea) {\n const handleTrackPointerGrace = (event: PointerEvent) => {\n const target = event.target as HTMLElement;\n const pointerPosition = { x: event.clientX, y: event.clientY };\n const hasEnteredTarget = trigger?.contains(target) || content?.contains(target);\n const isPointerOutsideGraceArea = !isPointInPolygon(pointerPosition, pointerGraceArea);\n\n if (hasEnteredTarget) {\n handleRemoveGraceArea();\n } else if (isPointerOutsideGraceArea) {\n handleRemoveGraceArea();\n onClose();\n }\n };\n document.addEventListener('pointermove', handleTrackPointerGrace);\n return () => document.removeEventListener('pointermove', handleTrackPointerGrace);\n }\n }, [trigger, content, pointerGraceArea, onClose, handleRemoveGraceArea]);\n\n return ;\n});\n\nconst [VisuallyHiddenContentContextProvider, useVisuallyHiddenContentContext] =\n createTooltipContext(TOOLTIP_NAME, { isInside: false });\n\ntype TooltipContentImplElement = React.ElementRef;\ntype DismissableLayerProps = React.ComponentPropsWithoutRef;\ntype PopperContentProps = React.ComponentPropsWithoutRef;\ninterface TooltipContentImplProps extends Omit {\n /**\n * A more descriptive label for accessibility purpose\n */\n 'aria-label'?: string;\n\n /**\n * Event handler called when the escape key is down.\n * Can be prevented.\n */\n onEscapeKeyDown?: DismissableLayerProps['onEscapeKeyDown'];\n /**\n * Event handler called when the a `pointerdown` event happens outside of the `Tooltip`.\n * Can be prevented.\n */\n onPointerDownOutside?: DismissableLayerProps['onPointerDownOutside'];\n}\n\nconst TooltipContentImpl = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const {\n __scopeTooltip,\n children,\n 'aria-label': ariaLabel,\n onEscapeKeyDown,\n onPointerDownOutside,\n ...contentProps\n } = props;\n const context = useTooltipContext(CONTENT_NAME, __scopeTooltip);\n const popperScope = usePopperScope(__scopeTooltip);\n const { onClose } = context;\n\n // Close this tooltip if another one opens\n React.useEffect(() => {\n document.addEventListener(TOOLTIP_OPEN, onClose);\n return () => document.removeEventListener(TOOLTIP_OPEN, onClose);\n }, [onClose]);\n\n // Close the tooltip if the trigger is scrolled\n React.useEffect(() => {\n if (context.trigger) {\n const handleScroll = (event: Event) => {\n const target = event.target as HTMLElement;\n if (target?.contains(context.trigger)) onClose();\n };\n window.addEventListener('scroll', handleScroll, { capture: true });\n return () => window.removeEventListener('scroll', handleScroll, { capture: true });\n }\n }, [context.trigger, onClose]);\n\n return (\n event.preventDefault()}\n onDismiss={onClose}\n >\n \n {children}\n \n \n {ariaLabel || children}\n \n \n \n \n );\n }\n);\n\nTooltipContent.displayName = CONTENT_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * TooltipArrow\n * -----------------------------------------------------------------------------------------------*/\n\nconst ARROW_NAME = 'TooltipArrow';\n\ntype TooltipArrowElement = React.ElementRef;\ntype PopperArrowProps = React.ComponentPropsWithoutRef;\ninterface TooltipArrowProps extends PopperArrowProps {}\n\nconst TooltipArrow = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const { __scopeTooltip, ...arrowProps } = props;\n const popperScope = usePopperScope(__scopeTooltip);\n const visuallyHiddenContentContext = useVisuallyHiddenContentContext(\n ARROW_NAME,\n __scopeTooltip\n );\n // if the arrow is inside the `VisuallyHidden`, we don't want to render it all to\n // prevent issues in positioning the arrow due to the duplicate\n return visuallyHiddenContentContext.isInside ? null : (\n \n );\n }\n);\n\nTooltipArrow.displayName = ARROW_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype Side = NonNullable;\n\nfunction getExitSideFromRect(point: Point, rect: DOMRect): Side {\n const top = Math.abs(rect.top - point.y);\n const bottom = Math.abs(rect.bottom - point.y);\n const right = Math.abs(rect.right - point.x);\n const left = Math.abs(rect.left - point.x);\n\n switch (Math.min(top, bottom, right, left)) {\n case left:\n return 'left';\n case right:\n return 'right';\n case top:\n return 'top';\n case bottom:\n return 'bottom';\n default:\n throw new Error('unreachable');\n }\n}\n\nfunction getPaddedExitPoints(exitPoint: Point, exitSide: Side, padding = 5) {\n const paddedExitPoints: Point[] = [];\n switch (exitSide) {\n case 'top':\n paddedExitPoints.push(\n { x: exitPoint.x - padding, y: exitPoint.y + padding },\n { x: exitPoint.x + padding, y: exitPoint.y + padding }\n );\n break;\n case 'bottom':\n paddedExitPoints.push(\n { x: exitPoint.x - padding, y: exitPoint.y - padding },\n { x: exitPoint.x + padding, y: exitPoint.y - padding }\n );\n break;\n case 'left':\n paddedExitPoints.push(\n { x: exitPoint.x + padding, y: exitPoint.y - padding },\n { x: exitPoint.x + padding, y: exitPoint.y + padding }\n );\n break;\n case 'right':\n paddedExitPoints.push(\n { x: exitPoint.x - padding, y: exitPoint.y - padding },\n { x: exitPoint.x - padding, y: exitPoint.y + padding }\n );\n break;\n }\n return paddedExitPoints;\n}\n\nfunction getPointsFromRect(rect: DOMRect) {\n const { top, right, bottom, left } = rect;\n return [\n { x: left, y: top },\n { x: right, y: top },\n { x: right, y: bottom },\n { x: left, y: bottom },\n ];\n}\n\n// Determine if a point is inside of a polygon.\n// Based on https://github.com/substack/point-in-polygon\nfunction isPointInPolygon(point: Point, polygon: Polygon) {\n const { x, y } = point;\n let inside = false;\n for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {\n const xi = polygon[i].x;\n const yi = polygon[i].y;\n const xj = polygon[j].x;\n const yj = polygon[j].y;\n\n // prettier-ignore\n const intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi);\n if (intersect) inside = !inside;\n }\n\n return inside;\n}\n\n// Returns a new array of points representing the convex hull of the given set of points.\n// https://www.nayuki.io/page/convex-hull-algorithm\nfunction getHull(points: Readonly>): Array {\n const newPoints: Array
= points.slice();\n newPoints.sort((a: Point, b: Point) => {\n if (a.x < b.x) return -1;\n else if (a.x > b.x) return +1;\n else if (a.y < b.y) return -1;\n else if (a.y > b.y) return +1;\n else return 0;\n });\n return getHullPresorted(newPoints);\n}\n\n// Returns the convex hull, assuming that each points[i] <= points[i + 1]. Runs in O(n) time.\nfunction getHullPresorted
(points: Readonly>): Array {\n if (points.length <= 1) return points.slice();\n\n const upperHull: Array
= [];\n for (let i = 0; i < points.length; i++) {\n const p = points[i];\n while (upperHull.length >= 2) {\n const q = upperHull[upperHull.length - 1];\n const r = upperHull[upperHull.length - 2];\n if ((q.x - r.x) * (p.y - r.y) >= (q.y - r.y) * (p.x - r.x)) upperHull.pop();\n else break;\n }\n upperHull.push(p);\n }\n upperHull.pop();\n\n const lowerHull: Array
= [];\n for (let i = points.length - 1; i >= 0; i--) {\n const p = points[i];\n while (lowerHull.length >= 2) {\n const q = lowerHull[lowerHull.length - 1];\n const r = lowerHull[lowerHull.length - 2];\n if ((q.x - r.x) * (p.y - r.y) >= (q.y - r.y) * (p.x - r.x)) lowerHull.pop();\n else break;\n }\n lowerHull.push(p);\n }\n lowerHull.pop();\n\n if (\n upperHull.length === 1 &&\n lowerHull.length === 1 &&\n upperHull[0].x === lowerHull[0].x &&\n upperHull[0].y === lowerHull[0].y\n ) {\n return upperHull;\n } else {\n return upperHull.concat(lowerHull);\n }\n}\n\nconst Provider = TooltipProvider;\nconst Root = Tooltip;\nconst Trigger = TooltipTrigger;\nconst Portal = TooltipPortal;\nconst Content = TooltipContent;\nconst Arrow = TooltipArrow;\n\nexport {\n createTooltipScope,\n //\n TooltipProvider,\n Tooltip,\n TooltipTrigger,\n TooltipPortal,\n TooltipContent,\n TooltipArrow,\n //\n Provider,\n Root,\n Trigger,\n Portal,\n Content,\n Arrow,\n};\nexport type {\n TooltipProviderProps,\n TooltipProps,\n TooltipTriggerProps,\n TooltipPortalProps,\n TooltipContentProps,\n TooltipArrowProps,\n};\n","import * as React from 'react';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { useCallbackRef } from '@radix-ui/react-use-callback-ref';\n\nconst AUTOFOCUS_ON_MOUNT = 'focusScope.autoFocusOnMount';\nconst AUTOFOCUS_ON_UNMOUNT = 'focusScope.autoFocusOnUnmount';\nconst EVENT_OPTIONS = { bubbles: false, cancelable: true };\n\ntype FocusableTarget = HTMLElement | { focus(): void };\n\n/* -------------------------------------------------------------------------------------------------\n * FocusScope\n * -----------------------------------------------------------------------------------------------*/\n\nconst FOCUS_SCOPE_NAME = 'FocusScope';\n\ntype FocusScopeElement = React.ElementRef;\ntype PrimitiveDivProps = React.ComponentPropsWithoutRef;\ninterface FocusScopeProps extends PrimitiveDivProps {\n /**\n * When `true`, tabbing from last item will focus first tabbable\n * and shift+tab from first item will focus last tababble.\n * @defaultValue false\n */\n loop?: boolean;\n\n /**\n * When `true`, focus cannot escape the focus scope via keyboard,\n * pointer, or a programmatic focus.\n * @defaultValue false\n */\n trapped?: boolean;\n\n /**\n * Event handler called when auto-focusing on mount.\n * Can be prevented.\n */\n onMountAutoFocus?: (event: Event) => void;\n\n /**\n * Event handler called when auto-focusing on unmount.\n * Can be prevented.\n */\n onUnmountAutoFocus?: (event: Event) => void;\n}\n\nconst FocusScope = React.forwardRef((props, forwardedRef) => {\n const {\n loop = false,\n trapped = false,\n onMountAutoFocus: onMountAutoFocusProp,\n onUnmountAutoFocus: onUnmountAutoFocusProp,\n ...scopeProps\n } = props;\n const [container, setContainer] = React.useState(null);\n const onMountAutoFocus = useCallbackRef(onMountAutoFocusProp);\n const onUnmountAutoFocus = useCallbackRef(onUnmountAutoFocusProp);\n const lastFocusedElementRef = React.useRef(null);\n const composedRefs = useComposedRefs(forwardedRef, (node) => setContainer(node));\n\n const focusScope = React.useRef({\n paused: false,\n pause() {\n this.paused = true;\n },\n resume() {\n this.paused = false;\n },\n }).current;\n\n // Takes care of trapping focus if focus is moved outside programmatically for example\n React.useEffect(() => {\n if (trapped) {\n function handleFocusIn(event: FocusEvent) {\n if (focusScope.paused || !container) return;\n const target = event.target as HTMLElement | null;\n if (container.contains(target)) {\n lastFocusedElementRef.current = target;\n } else {\n focus(lastFocusedElementRef.current, { select: true });\n }\n }\n\n function handleFocusOut(event: FocusEvent) {\n if (focusScope.paused || !container) return;\n const relatedTarget = event.relatedTarget as HTMLElement | null;\n\n // A `focusout` event with a `null` `relatedTarget` will happen in at least two cases:\n //\n // 1. When the user switches app/tabs/windows/the browser itself loses focus.\n // 2. In Google Chrome, when the focused element is removed from the DOM.\n //\n // We let the browser do its thing here because:\n //\n // 1. The browser already keeps a memory of what's focused for when the page gets refocused.\n // 2. In Google Chrome, if we try to focus the deleted focused element (as per below), it\n // throws the CPU to 100%, so we avoid doing anything for this reason here too.\n if (relatedTarget === null) return;\n\n // If the focus has moved to an actual legitimate element (`relatedTarget !== null`)\n // that is outside the container, we move focus to the last valid focused element inside.\n if (!container.contains(relatedTarget)) {\n focus(lastFocusedElementRef.current, { select: true });\n }\n }\n\n // When the focused element gets removed from the DOM, browsers move focus\n // back to the document.body. In this case, we move focus to the container\n // to keep focus trapped correctly.\n function handleMutations(mutations: MutationRecord[]) {\n const focusedElement = document.activeElement as HTMLElement | null;\n if (focusedElement !== document.body) return;\n for (const mutation of mutations) {\n if (mutation.removedNodes.length > 0) focus(container);\n }\n }\n\n document.addEventListener('focusin', handleFocusIn);\n document.addEventListener('focusout', handleFocusOut);\n const mutationObserver = new MutationObserver(handleMutations);\n if (container) mutationObserver.observe(container, { childList: true, subtree: true });\n\n return () => {\n document.removeEventListener('focusin', handleFocusIn);\n document.removeEventListener('focusout', handleFocusOut);\n mutationObserver.disconnect();\n };\n }\n }, [trapped, container, focusScope.paused]);\n\n React.useEffect(() => {\n if (container) {\n focusScopesStack.add(focusScope);\n const previouslyFocusedElement = document.activeElement as HTMLElement | null;\n const hasFocusedCandidate = container.contains(previouslyFocusedElement);\n\n if (!hasFocusedCandidate) {\n const mountEvent = new CustomEvent(AUTOFOCUS_ON_MOUNT, EVENT_OPTIONS);\n container.addEventListener(AUTOFOCUS_ON_MOUNT, onMountAutoFocus);\n container.dispatchEvent(mountEvent);\n if (!mountEvent.defaultPrevented) {\n focusFirst(removeLinks(getTabbableCandidates(container)), { select: true });\n if (document.activeElement === previouslyFocusedElement) {\n focus(container);\n }\n }\n }\n\n return () => {\n container.removeEventListener(AUTOFOCUS_ON_MOUNT, onMountAutoFocus);\n\n // We hit a react bug (fixed in v17) with focusing in unmount.\n // We need to delay the focus a little to get around it for now.\n // See: https://github.com/facebook/react/issues/17894\n setTimeout(() => {\n const unmountEvent = new CustomEvent(AUTOFOCUS_ON_UNMOUNT, EVENT_OPTIONS);\n container.addEventListener(AUTOFOCUS_ON_UNMOUNT, onUnmountAutoFocus);\n container.dispatchEvent(unmountEvent);\n if (!unmountEvent.defaultPrevented) {\n focus(previouslyFocusedElement ?? document.body, { select: true });\n }\n // we need to remove the listener after we `dispatchEvent`\n container.removeEventListener(AUTOFOCUS_ON_UNMOUNT, onUnmountAutoFocus);\n\n focusScopesStack.remove(focusScope);\n }, 0);\n };\n }\n }, [container, onMountAutoFocus, onUnmountAutoFocus, focusScope]);\n\n // Takes care of looping focus (when tabbing whilst at the edges)\n const handleKeyDown = React.useCallback(\n (event: React.KeyboardEvent) => {\n if (!loop && !trapped) return;\n if (focusScope.paused) return;\n\n const isTabKey = event.key === 'Tab' && !event.altKey && !event.ctrlKey && !event.metaKey;\n const focusedElement = document.activeElement as HTMLElement | null;\n\n if (isTabKey && focusedElement) {\n const container = event.currentTarget as HTMLElement;\n const [first, last] = getTabbableEdges(container);\n const hasTabbableElementsInside = first && last;\n\n // we can only wrap focus if we have tabbable edges\n if (!hasTabbableElementsInside) {\n if (focusedElement === container) event.preventDefault();\n } else {\n if (!event.shiftKey && focusedElement === last) {\n event.preventDefault();\n if (loop) focus(first, { select: true });\n } else if (event.shiftKey && focusedElement === first) {\n event.preventDefault();\n if (loop) focus(last, { select: true });\n }\n }\n }\n },\n [loop, trapped, focusScope.paused]\n );\n\n return (\n \n );\n});\n\nFocusScope.displayName = FOCUS_SCOPE_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * Utils\n * -----------------------------------------------------------------------------------------------*/\n\n/**\n * Attempts focusing the first element in a list of candidates.\n * Stops when focus has actually moved.\n */\nfunction focusFirst(candidates: HTMLElement[], { select = false } = {}) {\n const previouslyFocusedElement = document.activeElement;\n for (const candidate of candidates) {\n focus(candidate, { select });\n if (document.activeElement !== previouslyFocusedElement) return;\n }\n}\n\n/**\n * Returns the first and last tabbable elements inside a container.\n */\nfunction getTabbableEdges(container: HTMLElement) {\n const candidates = getTabbableCandidates(container);\n const first = findVisible(candidates, container);\n const last = findVisible(candidates.reverse(), container);\n return [first, last] as const;\n}\n\n/**\n * Returns a list of potential tabbable candidates.\n *\n * NOTE: This is only a close approximation. For example it doesn't take into account cases like when\n * elements are not visible. This cannot be worked out easily by just reading a property, but rather\n * necessitate runtime knowledge (computed styles, etc). We deal with these cases separately.\n *\n * See: https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker\n * Credit: https://github.com/discord/focus-layers/blob/master/src/util/wrapFocus.tsx#L1\n */\nfunction getTabbableCandidates(container: HTMLElement) {\n const nodes: HTMLElement[] = [];\n const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {\n acceptNode: (node: any) => {\n const isHiddenInput = node.tagName === 'INPUT' && node.type === 'hidden';\n if (node.disabled || node.hidden || isHiddenInput) return NodeFilter.FILTER_SKIP;\n // `.tabIndex` is not the same as the `tabindex` attribute. It works on the\n // runtime's understanding of tabbability, so this automatically accounts\n // for any kind of element that could be tabbed to.\n return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;\n },\n });\n while (walker.nextNode()) nodes.push(walker.currentNode as HTMLElement);\n // we do not take into account the order of nodes with positive `tabIndex` as it\n // hinders accessibility to have tab order different from visual order.\n return nodes;\n}\n\n/**\n * Returns the first visible element in a list.\n * NOTE: Only checks visibility up to the `container`.\n */\nfunction findVisible(elements: HTMLElement[], container: HTMLElement) {\n for (const element of elements) {\n // we stop checking if it's hidden at the `container` level (excluding)\n if (!isHidden(element, { upTo: container })) return element;\n }\n}\n\nfunction isHidden(node: HTMLElement, { upTo }: { upTo?: HTMLElement }) {\n if (getComputedStyle(node).visibility === 'hidden') return true;\n while (node) {\n // we stop at `upTo` (excluding it)\n if (upTo !== undefined && node === upTo) return false;\n if (getComputedStyle(node).display === 'none') return true;\n node = node.parentElement as HTMLElement;\n }\n return false;\n}\n\nfunction isSelectableInput(element: any): element is FocusableTarget & { select: () => void } {\n return element instanceof HTMLInputElement && 'select' in element;\n}\n\nfunction focus(element?: FocusableTarget | null, { select = false } = {}) {\n // only focus if that element is focusable\n if (element && element.focus) {\n const previouslyFocusedElement = document.activeElement;\n // NOTE: we prevent scrolling on focus, to minimize jarring transitions for users\n element.focus({ preventScroll: true });\n // only select if its not the same element, it supports selection and we need to select\n if (element !== previouslyFocusedElement && isSelectableInput(element) && select)\n element.select();\n }\n}\n\n/* -------------------------------------------------------------------------------------------------\n * FocusScope stack\n * -----------------------------------------------------------------------------------------------*/\n\ntype FocusScopeAPI = { paused: boolean; pause(): void; resume(): void };\nconst focusScopesStack = createFocusScopesStack();\n\nfunction createFocusScopesStack() {\n /** A stack of focus scopes, with the active one at the top */\n let stack: FocusScopeAPI[] = [];\n\n return {\n add(focusScope: FocusScopeAPI) {\n // pause the currently active focus scope (at the top of the stack)\n const activeFocusScope = stack[0];\n if (focusScope !== activeFocusScope) {\n activeFocusScope?.pause();\n }\n // remove in case it already exists (because we'll re-add it at the top of the stack)\n stack = arrayRemove(stack, focusScope);\n stack.unshift(focusScope);\n },\n\n remove(focusScope: FocusScopeAPI) {\n stack = arrayRemove(stack, focusScope);\n stack[0]?.resume();\n },\n };\n}\n\nfunction arrayRemove(array: T[], item: T) {\n const updatedArray = [...array];\n const index = updatedArray.indexOf(item);\n if (index !== -1) {\n updatedArray.splice(index, 1);\n }\n return updatedArray;\n}\n\nfunction removeLinks(items: HTMLElement[]) {\n return items.filter((item) => item.tagName !== 'A');\n}\n\nconst Root = FocusScope;\n\nexport {\n FocusScope,\n //\n Root,\n};\nexport type { FocusScopeProps };\n","import * as React from 'react';\n\n/** Number of components which have requested interest to have focus guards */\nlet count = 0;\n\nfunction FocusGuards(props: any) {\n useFocusGuards();\n return props.children;\n}\n\n/**\n * Injects a pair of focus guards at the edges of the whole DOM tree\n * to ensure `focusin` & `focusout` events can be caught consistently.\n */\nfunction useFocusGuards() {\n React.useEffect(() => {\n const edgeGuards = document.querySelectorAll('[data-radix-focus-guard]');\n document.body.insertAdjacentElement('afterbegin', edgeGuards[0] ?? createFocusGuard());\n document.body.insertAdjacentElement('beforeend', edgeGuards[1] ?? createFocusGuard());\n count++;\n\n return () => {\n if (count === 1) {\n document.querySelectorAll('[data-radix-focus-guard]').forEach((node) => node.remove());\n }\n count--;\n };\n }, []);\n}\n\nfunction createFocusGuard() {\n const element = document.createElement('span');\n element.setAttribute('data-radix-focus-guard', '');\n element.tabIndex = 0;\n element.style.outline = 'none';\n element.style.opacity = '0';\n element.style.position = 'fixed';\n element.style.pointerEvents = 'none';\n return element;\n}\n\nconst Root = FocusGuards;\n\nexport {\n FocusGuards,\n //\n Root,\n //\n useFocusGuards,\n};\n","export var zeroRightClassName = 'right-scroll-bar-position';\nexport var fullWidthClassName = 'width-before-scroll-bar';\nexport var noScrollbarsClassName = 'with-scroll-bars-hidden';\n/**\n * Name of a CSS variable containing the amount of \"hidden\" scrollbar\n * ! might be undefined ! use will fallback!\n */\nexport var removedBarSizeVariable = '--removed-body-scroll-bar-size';\n","/**\n * Assigns a value for a given ref, no matter of the ref format\n * @param {RefObject} ref - a callback function or ref object\n * @param value - a new value\n *\n * @see https://github.com/theKashey/use-callback-ref#assignref\n * @example\n * const refObject = useRef();\n * const refFn = (ref) => {....}\n *\n * assignRef(refObject, \"refValue\");\n * assignRef(refFn, \"refValue\");\n */\nexport function assignRef(ref, value) {\n if (typeof ref === 'function') {\n ref(value);\n }\n else if (ref) {\n ref.current = value;\n }\n return ref;\n}\n","import * as React from 'react';\nimport { assignRef } from './assignRef';\nimport { useCallbackRef } from './useRef';\nvar useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;\nvar currentValues = new WeakMap();\n/**\n * Merges two or more refs together providing a single interface to set their value\n * @param {RefObject|Ref} refs\n * @returns {MutableRefObject} - a new ref, which translates all changes to {refs}\n *\n * @see {@link mergeRefs} a version without buit-in memoization\n * @see https://github.com/theKashey/use-callback-ref#usemergerefs\n * @example\n * const Component = React.forwardRef((props, ref) => {\n * const ownRef = useRef();\n * const domRef = useMergeRefs([ref, ownRef]); // 👈 merge together\n * return ...
\n * }\n */\nexport function useMergeRefs(refs, defaultValue) {\n var callbackRef = useCallbackRef(defaultValue || null, function (newValue) {\n return refs.forEach(function (ref) { return assignRef(ref, newValue); });\n });\n // handle refs changes - added or removed\n useIsomorphicLayoutEffect(function () {\n var oldValue = currentValues.get(callbackRef);\n if (oldValue) {\n var prevRefs_1 = new Set(oldValue);\n var nextRefs_1 = new Set(refs);\n var current_1 = callbackRef.current;\n prevRefs_1.forEach(function (ref) {\n if (!nextRefs_1.has(ref)) {\n assignRef(ref, null);\n }\n });\n nextRefs_1.forEach(function (ref) {\n if (!prevRefs_1.has(ref)) {\n assignRef(ref, current_1);\n }\n });\n }\n currentValues.set(callbackRef, refs);\n }, [refs]);\n return callbackRef;\n}\n","import { useState } from 'react';\n/**\n * creates a MutableRef with ref change callback\n * @param initialValue - initial ref value\n * @param {Function} callback - a callback to run when value changes\n *\n * @example\n * const ref = useCallbackRef(0, (newValue, oldValue) => console.log(oldValue, '->', newValue);\n * ref.current = 1;\n * // prints 0 -> 1\n *\n * @see https://reactjs.org/docs/hooks-reference.html#useref\n * @see https://github.com/theKashey/use-callback-ref#usecallbackref---to-replace-reactuseref\n * @returns {MutableRefObject}\n */\nexport function useCallbackRef(initialValue, callback) {\n var ref = useState(function () { return ({\n // value\n value: initialValue,\n // last callback\n callback: callback,\n // \"memoized\" public interface\n facade: {\n get current() {\n return ref.value;\n },\n set current(value) {\n var last = ref.value;\n if (last !== value) {\n ref.value = value;\n ref.callback(value, last);\n }\n },\n },\n }); })[0];\n // update callback\n ref.callback = callback;\n return ref.facade;\n}\n","import { __assign } from \"tslib\";\nfunction ItoI(a) {\n return a;\n}\nfunction innerCreateMedium(defaults, middleware) {\n if (middleware === void 0) { middleware = ItoI; }\n var buffer = [];\n var assigned = false;\n var medium = {\n read: function () {\n if (assigned) {\n throw new Error('Sidecar: could not `read` from an `assigned` medium. `read` could be used only with `useMedium`.');\n }\n if (buffer.length) {\n return buffer[buffer.length - 1];\n }\n return defaults;\n },\n useMedium: function (data) {\n var item = middleware(data, assigned);\n buffer.push(item);\n return function () {\n buffer = buffer.filter(function (x) { return x !== item; });\n };\n },\n assignSyncMedium: function (cb) {\n assigned = true;\n while (buffer.length) {\n var cbs = buffer;\n buffer = [];\n cbs.forEach(cb);\n }\n buffer = {\n push: function (x) { return cb(x); },\n filter: function () { return buffer; },\n };\n },\n assignMedium: function (cb) {\n assigned = true;\n var pendingQueue = [];\n if (buffer.length) {\n var cbs = buffer;\n buffer = [];\n cbs.forEach(cb);\n pendingQueue = buffer;\n }\n var executeQueue = function () {\n var cbs = pendingQueue;\n pendingQueue = [];\n cbs.forEach(cb);\n };\n var cycle = function () { return Promise.resolve().then(executeQueue); };\n cycle();\n buffer = {\n push: function (x) {\n pendingQueue.push(x);\n cycle();\n },\n filter: function (filter) {\n pendingQueue = pendingQueue.filter(filter);\n return buffer;\n },\n };\n },\n };\n return medium;\n}\nexport function createMedium(defaults, middleware) {\n if (middleware === void 0) { middleware = ItoI; }\n return innerCreateMedium(defaults, middleware);\n}\n// eslint-disable-next-line @typescript-eslint/ban-types\nexport function createSidecarMedium(options) {\n if (options === void 0) { options = {}; }\n var medium = innerCreateMedium(null);\n medium.options = __assign({ async: true, ssr: false }, options);\n return medium;\n}\n","import { createSidecarMedium } from 'use-sidecar';\nexport var effectCar = createSidecarMedium();\n","import { __assign, __rest } from \"tslib\";\nimport * as React from 'react';\nimport { fullWidthClassName, zeroRightClassName } from 'react-remove-scroll-bar/constants';\nimport { useMergeRefs } from 'use-callback-ref';\nimport { effectCar } from './medium';\nvar nothing = function () {\n return;\n};\n/**\n * Removes scrollbar from the page and contain the scroll within the Lock\n */\nvar RemoveScroll = React.forwardRef(function (props, parentRef) {\n var ref = React.useRef(null);\n var _a = React.useState({\n onScrollCapture: nothing,\n onWheelCapture: nothing,\n onTouchMoveCapture: nothing,\n }), callbacks = _a[0], setCallbacks = _a[1];\n var forwardProps = props.forwardProps, children = props.children, className = props.className, removeScrollBar = props.removeScrollBar, enabled = props.enabled, shards = props.shards, sideCar = props.sideCar, noIsolation = props.noIsolation, inert = props.inert, allowPinchZoom = props.allowPinchZoom, _b = props.as, Container = _b === void 0 ? 'div' : _b, gapMode = props.gapMode, rest = __rest(props, [\"forwardProps\", \"children\", \"className\", \"removeScrollBar\", \"enabled\", \"shards\", \"sideCar\", \"noIsolation\", \"inert\", \"allowPinchZoom\", \"as\", \"gapMode\"]);\n var SideCar = sideCar;\n var containerRef = useMergeRefs([ref, parentRef]);\n var containerProps = __assign(__assign({}, rest), callbacks);\n return (React.createElement(React.Fragment, null,\n enabled && (React.createElement(SideCar, { sideCar: effectCar, removeScrollBar: removeScrollBar, shards: shards, noIsolation: noIsolation, inert: inert, setCallbacks: setCallbacks, allowPinchZoom: !!allowPinchZoom, lockRef: ref, gapMode: gapMode })),\n forwardProps ? (React.cloneElement(React.Children.only(children), __assign(__assign({}, containerProps), { ref: containerRef }))) : (React.createElement(Container, __assign({}, containerProps, { className: className, ref: containerRef }), children))));\n});\nRemoveScroll.defaultProps = {\n enabled: true,\n removeScrollBar: true,\n inert: false,\n};\nRemoveScroll.classNames = {\n fullWidth: fullWidthClassName,\n zeroRight: zeroRightClassName,\n};\nexport { RemoveScroll };\n","import { __assign, __rest } from \"tslib\";\nimport * as React from 'react';\nvar SideCar = function (_a) {\n var sideCar = _a.sideCar, rest = __rest(_a, [\"sideCar\"]);\n if (!sideCar) {\n throw new Error('Sidecar: please provide `sideCar` property to import the right car');\n }\n var Target = sideCar.read();\n if (!Target) {\n throw new Error('Sidecar medium not found');\n }\n return React.createElement(Target, __assign({}, rest));\n};\nSideCar.isSideCarExport = true;\nexport function exportSidecar(medium, exported) {\n medium.useMedium(exported);\n return SideCar;\n}\n","import { getNonce } from 'get-nonce';\nfunction makeStyleTag() {\n if (!document)\n return null;\n var tag = document.createElement('style');\n tag.type = 'text/css';\n var nonce = getNonce();\n if (nonce) {\n tag.setAttribute('nonce', nonce);\n }\n return tag;\n}\nfunction injectStyles(tag, css) {\n // @ts-ignore\n if (tag.styleSheet) {\n // @ts-ignore\n tag.styleSheet.cssText = css;\n }\n else {\n tag.appendChild(document.createTextNode(css));\n }\n}\nfunction insertStyleTag(tag) {\n var head = document.head || document.getElementsByTagName('head')[0];\n head.appendChild(tag);\n}\nexport var stylesheetSingleton = function () {\n var counter = 0;\n var stylesheet = null;\n return {\n add: function (style) {\n if (counter == 0) {\n if ((stylesheet = makeStyleTag())) {\n injectStyles(stylesheet, style);\n insertStyleTag(stylesheet);\n }\n }\n counter++;\n },\n remove: function () {\n counter--;\n if (!counter && stylesheet) {\n stylesheet.parentNode && stylesheet.parentNode.removeChild(stylesheet);\n stylesheet = null;\n }\n },\n };\n};\n","import { styleHookSingleton } from './hook';\n/**\n * create a Component to add styles on demand\n * - styles are added when first instance is mounted\n * - styles are removed when the last instance is unmounted\n * - changing styles in runtime does nothing unless dynamic is set. But with multiple components that can lead to the undefined behavior\n */\nexport var styleSingleton = function () {\n var useStyle = styleHookSingleton();\n var Sheet = function (_a) {\n var styles = _a.styles, dynamic = _a.dynamic;\n useStyle(styles, dynamic);\n return null;\n };\n return Sheet;\n};\n","import * as React from 'react';\nimport { stylesheetSingleton } from './singleton';\n/**\n * creates a hook to control style singleton\n * @see {@link styleSingleton} for a safer component version\n * @example\n * ```tsx\n * const useStyle = styleHookSingleton();\n * ///\n * useStyle('body { overflow: hidden}');\n */\nexport var styleHookSingleton = function () {\n var sheet = stylesheetSingleton();\n return function (styles, isDynamic) {\n React.useEffect(function () {\n sheet.add(styles);\n return function () {\n sheet.remove();\n };\n }, [styles && isDynamic]);\n };\n};\n","export var zeroGap = {\n left: 0,\n top: 0,\n right: 0,\n gap: 0,\n};\nvar parse = function (x) { return parseInt(x || '', 10) || 0; };\nvar getOffset = function (gapMode) {\n var cs = window.getComputedStyle(document.body);\n var left = cs[gapMode === 'padding' ? 'paddingLeft' : 'marginLeft'];\n var top = cs[gapMode === 'padding' ? 'paddingTop' : 'marginTop'];\n var right = cs[gapMode === 'padding' ? 'paddingRight' : 'marginRight'];\n return [parse(left), parse(top), parse(right)];\n};\nexport var getGapWidth = function (gapMode) {\n if (gapMode === void 0) { gapMode = 'margin'; }\n if (typeof window === 'undefined') {\n return zeroGap;\n }\n var offsets = getOffset(gapMode);\n var documentWidth = document.documentElement.clientWidth;\n var windowWidth = window.innerWidth;\n return {\n left: offsets[0],\n top: offsets[1],\n right: offsets[2],\n gap: Math.max(0, windowWidth - documentWidth + offsets[2] - offsets[0]),\n };\n};\n","import * as React from 'react';\nimport { styleSingleton } from 'react-style-singleton';\nimport { fullWidthClassName, zeroRightClassName, noScrollbarsClassName, removedBarSizeVariable } from './constants';\nimport { getGapWidth } from './utils';\nvar Style = styleSingleton();\nexport var lockAttribute = 'data-scroll-locked';\n// important tip - once we measure scrollBar width and remove them\n// we could not repeat this operation\n// thus we are using style-singleton - only the first \"yet correct\" style will be applied.\nvar getStyles = function (_a, allowRelative, gapMode, important) {\n var left = _a.left, top = _a.top, right = _a.right, gap = _a.gap;\n if (gapMode === void 0) { gapMode = 'margin'; }\n return \"\\n .\".concat(noScrollbarsClassName, \" {\\n overflow: hidden \").concat(important, \";\\n padding-right: \").concat(gap, \"px \").concat(important, \";\\n }\\n body[\").concat(lockAttribute, \"] {\\n overflow: hidden \").concat(important, \";\\n overscroll-behavior: contain;\\n \").concat([\n allowRelative && \"position: relative \".concat(important, \";\"),\n gapMode === 'margin' &&\n \"\\n padding-left: \".concat(left, \"px;\\n padding-top: \").concat(top, \"px;\\n padding-right: \").concat(right, \"px;\\n margin-left:0;\\n margin-top:0;\\n margin-right: \").concat(gap, \"px \").concat(important, \";\\n \"),\n gapMode === 'padding' && \"padding-right: \".concat(gap, \"px \").concat(important, \";\"),\n ]\n .filter(Boolean)\n .join(''), \"\\n }\\n \\n .\").concat(zeroRightClassName, \" {\\n right: \").concat(gap, \"px \").concat(important, \";\\n }\\n \\n .\").concat(fullWidthClassName, \" {\\n margin-right: \").concat(gap, \"px \").concat(important, \";\\n }\\n \\n .\").concat(zeroRightClassName, \" .\").concat(zeroRightClassName, \" {\\n right: 0 \").concat(important, \";\\n }\\n \\n .\").concat(fullWidthClassName, \" .\").concat(fullWidthClassName, \" {\\n margin-right: 0 \").concat(important, \";\\n }\\n \\n body[\").concat(lockAttribute, \"] {\\n \").concat(removedBarSizeVariable, \": \").concat(gap, \"px;\\n }\\n\");\n};\nvar getCurrentUseCounter = function () {\n var counter = parseInt(document.body.getAttribute(lockAttribute) || '0', 10);\n return isFinite(counter) ? counter : 0;\n};\nexport var useLockAttribute = function () {\n React.useEffect(function () {\n document.body.setAttribute(lockAttribute, (getCurrentUseCounter() + 1).toString());\n return function () {\n var newCounter = getCurrentUseCounter() - 1;\n if (newCounter <= 0) {\n document.body.removeAttribute(lockAttribute);\n }\n else {\n document.body.setAttribute(lockAttribute, newCounter.toString());\n }\n };\n }, []);\n};\n/**\n * Removes page scrollbar and blocks page scroll when mounted\n */\nexport var RemoveScrollBar = function (_a) {\n var noRelative = _a.noRelative, noImportant = _a.noImportant, _b = _a.gapMode, gapMode = _b === void 0 ? 'margin' : _b;\n useLockAttribute();\n /*\n gap will be measured on every component mount\n however it will be used only by the \"first\" invocation\n due to singleton nature of clientHeight) {\n return true;\n }\n }\n current = current.parentNode;\n } while (current && current !== ownerDocument.body);\n return false;\n};\nvar getVScrollVariables = function (_a) {\n var scrollTop = _a.scrollTop, scrollHeight = _a.scrollHeight, clientHeight = _a.clientHeight;\n return [\n scrollTop,\n scrollHeight,\n clientHeight,\n ];\n};\nvar getHScrollVariables = function (_a) {\n var scrollLeft = _a.scrollLeft, scrollWidth = _a.scrollWidth, clientWidth = _a.clientWidth;\n return [\n scrollLeft,\n scrollWidth,\n clientWidth,\n ];\n};\nvar elementCouldBeScrolled = function (axis, node) {\n return axis === 'v' ? elementCouldBeVScrolled(node) : elementCouldBeHScrolled(node);\n};\nvar getScrollVariables = function (axis, node) {\n return axis === 'v' ? getVScrollVariables(node) : getHScrollVariables(node);\n};\nvar getDirectionFactor = function (axis, direction) {\n /**\n * If the element's direction is rtl (right-to-left), then scrollLeft is 0 when the scrollbar is at its rightmost position,\n * and then increasingly negative as you scroll towards the end of the content.\n * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft\n */\n return axis === 'h' && direction === 'rtl' ? -1 : 1;\n};\nexport var handleScroll = function (axis, endTarget, event, sourceDelta, noOverscroll) {\n var directionFactor = getDirectionFactor(axis, window.getComputedStyle(endTarget).direction);\n var delta = directionFactor * sourceDelta;\n // find scrollable target\n var target = event.target;\n var targetInLock = endTarget.contains(target);\n var shouldCancelScroll = false;\n var isDeltaPositive = delta > 0;\n var availableScroll = 0;\n var availableScrollTop = 0;\n do {\n var _a = getScrollVariables(axis, target), position = _a[0], scroll_1 = _a[1], capacity = _a[2];\n var elementScroll = scroll_1 - capacity - directionFactor * position;\n if (position || elementScroll) {\n if (elementCouldBeScrolled(axis, target)) {\n availableScroll += elementScroll;\n availableScrollTop += position;\n }\n }\n if (target instanceof ShadowRoot) {\n target = target.host;\n }\n else {\n target = target.parentNode;\n }\n } while (\n // portaled content\n (!targetInLock && target !== document.body) ||\n // self content\n (targetInLock && (endTarget.contains(target) || endTarget === target)));\n // handle epsilon around 0 (non standard zoom levels)\n if (isDeltaPositive &&\n ((noOverscroll && Math.abs(availableScroll) < 1) || (!noOverscroll && delta > availableScroll))) {\n shouldCancelScroll = true;\n }\n else if (!isDeltaPositive &&\n ((noOverscroll && Math.abs(availableScrollTop) < 1) || (!noOverscroll && -delta > availableScrollTop))) {\n shouldCancelScroll = true;\n }\n return shouldCancelScroll;\n};\n","import { __spreadArray } from \"tslib\";\nimport * as React from 'react';\nimport { RemoveScrollBar } from 'react-remove-scroll-bar';\nimport { styleSingleton } from 'react-style-singleton';\nimport { nonPassive } from './aggresiveCapture';\nimport { handleScroll, locationCouldBeScrolled } from './handleScroll';\nexport var getTouchXY = function (event) {\n return 'changedTouches' in event ? [event.changedTouches[0].clientX, event.changedTouches[0].clientY] : [0, 0];\n};\nexport var getDeltaXY = function (event) { return [event.deltaX, event.deltaY]; };\nvar extractRef = function (ref) {\n return ref && 'current' in ref ? ref.current : ref;\n};\nvar deltaCompare = function (x, y) { return x[0] === y[0] && x[1] === y[1]; };\nvar generateStyle = function (id) { return \"\\n .block-interactivity-\".concat(id, \" {pointer-events: none;}\\n .allow-interactivity-\").concat(id, \" {pointer-events: all;}\\n\"); };\nvar idCounter = 0;\nvar lockStack = [];\nexport function RemoveScrollSideCar(props) {\n var shouldPreventQueue = React.useRef([]);\n var touchStartRef = React.useRef([0, 0]);\n var activeAxis = React.useRef();\n var id = React.useState(idCounter++)[0];\n var Style = React.useState(styleSingleton)[0];\n var lastProps = React.useRef(props);\n React.useEffect(function () {\n lastProps.current = props;\n }, [props]);\n React.useEffect(function () {\n if (props.inert) {\n document.body.classList.add(\"block-interactivity-\".concat(id));\n var allow_1 = __spreadArray([props.lockRef.current], (props.shards || []).map(extractRef), true).filter(Boolean);\n allow_1.forEach(function (el) { return el.classList.add(\"allow-interactivity-\".concat(id)); });\n return function () {\n document.body.classList.remove(\"block-interactivity-\".concat(id));\n allow_1.forEach(function (el) { return el.classList.remove(\"allow-interactivity-\".concat(id)); });\n };\n }\n return;\n }, [props.inert, props.lockRef.current, props.shards]);\n var shouldCancelEvent = React.useCallback(function (event, parent) {\n if (('touches' in event && event.touches.length === 2) || (event.type === 'wheel' && event.ctrlKey)) {\n return !lastProps.current.allowPinchZoom;\n }\n var touch = getTouchXY(event);\n var touchStart = touchStartRef.current;\n var deltaX = 'deltaX' in event ? event.deltaX : touchStart[0] - touch[0];\n var deltaY = 'deltaY' in event ? event.deltaY : touchStart[1] - touch[1];\n var currentAxis;\n var target = event.target;\n var moveDirection = Math.abs(deltaX) > Math.abs(deltaY) ? 'h' : 'v';\n // allow horizontal touch move on Range inputs. They will not cause any scroll\n if ('touches' in event && moveDirection === 'h' && target.type === 'range') {\n return false;\n }\n var canBeScrolledInMainDirection = locationCouldBeScrolled(moveDirection, target);\n if (!canBeScrolledInMainDirection) {\n return true;\n }\n if (canBeScrolledInMainDirection) {\n currentAxis = moveDirection;\n }\n else {\n currentAxis = moveDirection === 'v' ? 'h' : 'v';\n canBeScrolledInMainDirection = locationCouldBeScrolled(moveDirection, target);\n // other axis might be not scrollable\n }\n if (!canBeScrolledInMainDirection) {\n return false;\n }\n if (!activeAxis.current && 'changedTouches' in event && (deltaX || deltaY)) {\n activeAxis.current = currentAxis;\n }\n if (!currentAxis) {\n return true;\n }\n var cancelingAxis = activeAxis.current || currentAxis;\n return handleScroll(cancelingAxis, parent, event, cancelingAxis === 'h' ? deltaX : deltaY, true);\n }, []);\n var shouldPrevent = React.useCallback(function (_event) {\n var event = _event;\n if (!lockStack.length || lockStack[lockStack.length - 1] !== Style) {\n // not the last active\n return;\n }\n var delta = 'deltaY' in event ? getDeltaXY(event) : getTouchXY(event);\n var sourceEvent = shouldPreventQueue.current.filter(function (e) { return e.name === event.type && (e.target === event.target || event.target === e.shadowParent) && deltaCompare(e.delta, delta); })[0];\n // self event, and should be canceled\n if (sourceEvent && sourceEvent.should) {\n if (event.cancelable) {\n event.preventDefault();\n }\n return;\n }\n // outside or shard event\n if (!sourceEvent) {\n var shardNodes = (lastProps.current.shards || [])\n .map(extractRef)\n .filter(Boolean)\n .filter(function (node) { return node.contains(event.target); });\n var shouldStop = shardNodes.length > 0 ? shouldCancelEvent(event, shardNodes[0]) : !lastProps.current.noIsolation;\n if (shouldStop) {\n if (event.cancelable) {\n event.preventDefault();\n }\n }\n }\n }, []);\n var shouldCancel = React.useCallback(function (name, delta, target, should) {\n var event = { name: name, delta: delta, target: target, should: should, shadowParent: getOutermostShadowParent(target) };\n shouldPreventQueue.current.push(event);\n setTimeout(function () {\n shouldPreventQueue.current = shouldPreventQueue.current.filter(function (e) { return e !== event; });\n }, 1);\n }, []);\n var scrollTouchStart = React.useCallback(function (event) {\n touchStartRef.current = getTouchXY(event);\n activeAxis.current = undefined;\n }, []);\n var scrollWheel = React.useCallback(function (event) {\n shouldCancel(event.type, getDeltaXY(event), event.target, shouldCancelEvent(event, props.lockRef.current));\n }, []);\n var scrollTouchMove = React.useCallback(function (event) {\n shouldCancel(event.type, getTouchXY(event), event.target, shouldCancelEvent(event, props.lockRef.current));\n }, []);\n React.useEffect(function () {\n lockStack.push(Style);\n props.setCallbacks({\n onScrollCapture: scrollWheel,\n onWheelCapture: scrollWheel,\n onTouchMoveCapture: scrollTouchMove,\n });\n document.addEventListener('wheel', shouldPrevent, nonPassive);\n document.addEventListener('touchmove', shouldPrevent, nonPassive);\n document.addEventListener('touchstart', scrollTouchStart, nonPassive);\n return function () {\n lockStack = lockStack.filter(function (inst) { return inst !== Style; });\n document.removeEventListener('wheel', shouldPrevent, nonPassive);\n document.removeEventListener('touchmove', shouldPrevent, nonPassive);\n document.removeEventListener('touchstart', scrollTouchStart, nonPassive);\n };\n }, []);\n var removeScrollBar = props.removeScrollBar, inert = props.inert;\n return (React.createElement(React.Fragment, null,\n inert ? React.createElement(Style, { styles: generateStyle(id) }) : null,\n removeScrollBar ? React.createElement(RemoveScrollBar, { gapMode: props.gapMode }) : null));\n}\nfunction getOutermostShadowParent(node) {\n var shadowParent = null;\n while (node !== null) {\n if (node instanceof ShadowRoot) {\n shadowParent = node.host;\n node = node.host;\n }\n node = node.parentNode;\n }\n return shadowParent;\n}\n","import { exportSidecar } from 'use-sidecar';\nimport { RemoveScrollSideCar } from './SideEffect';\nimport { effectCar } from './medium';\nexport default exportSidecar(effectCar, RemoveScrollSideCar);\n","import { __assign } from \"tslib\";\nimport * as React from 'react';\nimport { RemoveScroll } from './UI';\nimport SideCar from './sidecar';\nvar ReactRemoveScroll = React.forwardRef(function (props, ref) { return (React.createElement(RemoveScroll, __assign({}, props, { ref: ref, sideCar: SideCar }))); });\nReactRemoveScroll.classNames = RemoveScroll.classNames;\nexport default ReactRemoveScroll;\n","import * as React from 'react';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { createContext, createContextScope } from '@radix-ui/react-context';\nimport { useId } from '@radix-ui/react-id';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { DismissableLayer } from '@radix-ui/react-dismissable-layer';\nimport { FocusScope } from '@radix-ui/react-focus-scope';\nimport { Portal as PortalPrimitive } from '@radix-ui/react-portal';\nimport { Presence } from '@radix-ui/react-presence';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { useFocusGuards } from '@radix-ui/react-focus-guards';\nimport { RemoveScroll } from 'react-remove-scroll';\nimport { hideOthers } from 'aria-hidden';\nimport { Slot } from '@radix-ui/react-slot';\n\nimport type { Scope } from '@radix-ui/react-context';\n\n/* -------------------------------------------------------------------------------------------------\n * Dialog\n * -----------------------------------------------------------------------------------------------*/\n\nconst DIALOG_NAME = 'Dialog';\n\ntype ScopedProps = P & { __scopeDialog?: Scope };\nconst [createDialogContext, createDialogScope] = createContextScope(DIALOG_NAME);\n\ntype DialogContextValue = {\n triggerRef: React.RefObject;\n contentRef: React.RefObject;\n contentId: string;\n titleId: string;\n descriptionId: string;\n open: boolean;\n onOpenChange(open: boolean): void;\n onOpenToggle(): void;\n modal: boolean;\n};\n\nconst [DialogProvider, useDialogContext] = createDialogContext(DIALOG_NAME);\n\ninterface DialogProps {\n children?: React.ReactNode;\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?(open: boolean): void;\n modal?: boolean;\n}\n\nconst Dialog: React.FC = (props: ScopedProps) => {\n const {\n __scopeDialog,\n children,\n open: openProp,\n defaultOpen,\n onOpenChange,\n modal = true,\n } = props;\n const triggerRef = React.useRef(null);\n const contentRef = React.useRef(null);\n const [open = false, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: defaultOpen,\n onChange: onOpenChange,\n });\n\n return (\n setOpen((prevOpen) => !prevOpen), [setOpen])}\n modal={modal}\n >\n {children}\n \n );\n};\n\nDialog.displayName = DIALOG_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * DialogTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'DialogTrigger';\n\ntype DialogTriggerElement = React.ElementRef;\ntype PrimitiveButtonProps = React.ComponentPropsWithoutRef;\ninterface DialogTriggerProps extends PrimitiveButtonProps {}\n\nconst DialogTrigger = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const { __scopeDialog, ...triggerProps } = props;\n const context = useDialogContext(TRIGGER_NAME, __scopeDialog);\n const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef);\n return (\n \n );\n }\n);\n\nDialogTrigger.displayName = TRIGGER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * DialogPortal\n * -----------------------------------------------------------------------------------------------*/\n\nconst PORTAL_NAME = 'DialogPortal';\n\ntype PortalContextValue = { forceMount?: true };\nconst [PortalProvider, usePortalContext] = createDialogContext(PORTAL_NAME, {\n forceMount: undefined,\n});\n\ntype PortalProps = React.ComponentPropsWithoutRef;\ninterface DialogPortalProps {\n children?: React.ReactNode;\n /**\n * Specify a container element to portal the content into.\n */\n container?: PortalProps['container'];\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true;\n}\n\nconst DialogPortal: React.FC = (props: ScopedProps) => {\n const { __scopeDialog, forceMount, children, container } = props;\n const context = useDialogContext(PORTAL_NAME, __scopeDialog);\n return (\n \n {React.Children.map(children, (child) => (\n \n \n {child}\n \n \n ))}\n \n );\n};\n\nDialogPortal.displayName = PORTAL_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * DialogOverlay\n * -----------------------------------------------------------------------------------------------*/\n\nconst OVERLAY_NAME = 'DialogOverlay';\n\ntype DialogOverlayElement = DialogOverlayImplElement;\ninterface DialogOverlayProps extends DialogOverlayImplProps {\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true;\n}\n\nconst DialogOverlay = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const portalContext = usePortalContext(OVERLAY_NAME, props.__scopeDialog);\n const { forceMount = portalContext.forceMount, ...overlayProps } = props;\n const context = useDialogContext(OVERLAY_NAME, props.__scopeDialog);\n return context.modal ? (\n \n \n \n ) : null;\n }\n);\n\nDialogOverlay.displayName = OVERLAY_NAME;\n\ntype DialogOverlayImplElement = React.ElementRef;\ntype PrimitiveDivProps = React.ComponentPropsWithoutRef;\ninterface DialogOverlayImplProps extends PrimitiveDivProps {}\n\nconst DialogOverlayImpl = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const { __scopeDialog, ...overlayProps } = props;\n const context = useDialogContext(OVERLAY_NAME, __scopeDialog);\n return (\n // Make sure `Content` is scrollable even when it doesn't live inside `RemoveScroll`\n // ie. when `Overlay` and `Content` are siblings\n \n \n \n );\n }\n);\n\n/* -------------------------------------------------------------------------------------------------\n * DialogContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'DialogContent';\n\ntype DialogContentElement = DialogContentTypeElement;\ninterface DialogContentProps extends DialogContentTypeProps {\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true;\n}\n\nconst DialogContent = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const portalContext = usePortalContext(CONTENT_NAME, props.__scopeDialog);\n const { forceMount = portalContext.forceMount, ...contentProps } = props;\n const context = useDialogContext(CONTENT_NAME, props.__scopeDialog);\n return (\n \n {context.modal ? (\n \n ) : (\n \n )}\n \n );\n }\n);\n\nDialogContent.displayName = CONTENT_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype DialogContentTypeElement = DialogContentImplElement;\ninterface DialogContentTypeProps\n extends Omit {}\n\nconst DialogContentModal = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const context = useDialogContext(CONTENT_NAME, props.__scopeDialog);\n const contentRef = React.useRef(null);\n const composedRefs = useComposedRefs(forwardedRef, context.contentRef, contentRef);\n\n // aria-hide everything except the content (better supported equivalent to setting aria-modal)\n React.useEffect(() => {\n const content = contentRef.current;\n if (content) return hideOthers(content);\n }, []);\n\n return (\n {\n event.preventDefault();\n context.triggerRef.current?.focus();\n })}\n onPointerDownOutside={composeEventHandlers(props.onPointerDownOutside, (event) => {\n const originalEvent = event.detail.originalEvent;\n const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;\n const isRightClick = originalEvent.button === 2 || ctrlLeftClick;\n\n // If the event is a right-click, we shouldn't close because\n // it is effectively as if we right-clicked the `Overlay`.\n if (isRightClick) event.preventDefault();\n })}\n // When focus is trapped, a `focusout` event may still happen.\n // We make sure we don't trigger our `onDismiss` in such case.\n onFocusOutside={composeEventHandlers(props.onFocusOutside, (event) =>\n event.preventDefault()\n )}\n />\n );\n }\n);\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst DialogContentNonModal = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const context = useDialogContext(CONTENT_NAME, props.__scopeDialog);\n const hasInteractedOutsideRef = React.useRef(false);\n const hasPointerDownOutsideRef = React.useRef(false);\n\n return (\n {\n props.onCloseAutoFocus?.(event);\n\n if (!event.defaultPrevented) {\n if (!hasInteractedOutsideRef.current) context.triggerRef.current?.focus();\n // Always prevent auto focus because we either focus manually or want user agent focus\n event.preventDefault();\n }\n\n hasInteractedOutsideRef.current = false;\n hasPointerDownOutsideRef.current = false;\n }}\n onInteractOutside={(event) => {\n props.onInteractOutside?.(event);\n\n if (!event.defaultPrevented) {\n hasInteractedOutsideRef.current = true;\n if (event.detail.originalEvent.type === 'pointerdown') {\n hasPointerDownOutsideRef.current = true;\n }\n }\n\n // Prevent dismissing when clicking the trigger.\n // As the trigger is already setup to close, without doing so would\n // cause it to close and immediately open.\n const target = event.target as HTMLElement;\n const targetIsTrigger = context.triggerRef.current?.contains(target);\n if (targetIsTrigger) event.preventDefault();\n\n // On Safari if the trigger is inside a container with tabIndex={0}, when clicked\n // we will get the pointer down outside event on the trigger, but then a subsequent\n // focus outside event on the container, we ignore any focus outside event when we've\n // already had a pointer down outside event.\n if (event.detail.originalEvent.type === 'focusin' && hasPointerDownOutsideRef.current) {\n event.preventDefault();\n }\n }}\n />\n );\n }\n);\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype DialogContentImplElement = React.ElementRef;\ntype DismissableLayerProps = React.ComponentPropsWithoutRef;\ntype FocusScopeProps = React.ComponentPropsWithoutRef;\ninterface DialogContentImplProps extends Omit {\n /**\n * When `true`, focus cannot escape the `Content` via keyboard,\n * pointer, or a programmatic focus.\n * @defaultValue false\n */\n trapFocus?: FocusScopeProps['trapped'];\n\n /**\n * Event handler called when auto-focusing on open.\n * Can be prevented.\n */\n onOpenAutoFocus?: FocusScopeProps['onMountAutoFocus'];\n\n /**\n * Event handler called when auto-focusing on close.\n * Can be prevented.\n */\n onCloseAutoFocus?: FocusScopeProps['onUnmountAutoFocus'];\n}\n\nconst DialogContentImpl = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const { __scopeDialog, trapFocus, onOpenAutoFocus, onCloseAutoFocus, ...contentProps } = props;\n const context = useDialogContext(CONTENT_NAME, __scopeDialog);\n const contentRef = React.useRef(null);\n const composedRefs = useComposedRefs(forwardedRef, contentRef);\n\n // Make sure the whole tree has focus guards as our `Dialog` will be\n // the last element in the DOM (because of the `Portal`)\n useFocusGuards();\n\n return (\n <>\n \n context.onOpenChange(false)}\n />\n \n {process.env.NODE_ENV !== 'production' && (\n <>\n \n \n \n )}\n \n );\n }\n);\n\n/* -------------------------------------------------------------------------------------------------\n * DialogTitle\n * -----------------------------------------------------------------------------------------------*/\n\nconst TITLE_NAME = 'DialogTitle';\n\ntype DialogTitleElement = React.ElementRef;\ntype PrimitiveHeading2Props = React.ComponentPropsWithoutRef;\ninterface DialogTitleProps extends PrimitiveHeading2Props {}\n\nconst DialogTitle = React.forwardRef(\n (props: ScopedProps