(null);\n const composedRefs = useComposedRefs(forwardedRef, ref);\n const context = useCollectionContext(ITEM_SLOT_NAME, scope);\n\n React.useEffect(() => {\n context.itemMap.set(ref, { ref, ...(itemData as unknown as ItemData) });\n return () => void context.itemMap.delete(ref);\n });\n\n return (\n \n {children}\n \n );\n }\n );\n\n CollectionItemSlot.displayName = ITEM_SLOT_NAME;\n\n /* -----------------------------------------------------------------------------------------------\n * useCollection\n * ---------------------------------------------------------------------------------------------*/\n\n function useCollection(scope: any) {\n const context = useCollectionContext(name + 'CollectionConsumer', scope);\n\n const getItems = React.useCallback(() => {\n const collectionNode = context.collectionRef.current;\n if (!collectionNode) return [];\n const orderedNodes = Array.from(collectionNode.querySelectorAll(`[${ITEM_DATA_ATTR}]`));\n const items = Array.from(context.itemMap.values());\n const orderedItems = items.sort(\n (a, b) => orderedNodes.indexOf(a.ref.current!) - orderedNodes.indexOf(b.ref.current!)\n );\n return orderedItems;\n }, [context.collectionRef, context.itemMap]);\n\n return getItems;\n }\n\n return [\n { Provider: CollectionProvider, Slot: CollectionSlot, ItemSlot: CollectionItemSlot },\n useCollection,\n createCollectionScope,\n ] as const;\n}\n\nexport { createCollection };\nexport type { CollectionProps };\n","import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { Slot } from '@radix-ui/react-slot';\n\nconst NODES = [\n 'a',\n 'button',\n 'div',\n 'form',\n 'h2',\n 'h3',\n 'img',\n 'input',\n 'label',\n 'li',\n 'nav',\n 'ol',\n 'p',\n 'span',\n 'svg',\n 'ul',\n] as const;\n\n// Temporary while we await merge of this fix:\n// https://github.com/DefinitelyTyped/DefinitelyTyped/pull/55396\n// prettier-ignore\ntype PropsWithoutRef = P extends any ? ('ref' extends keyof P ? Pick> : P) : P;\ntype ComponentPropsWithoutRef = PropsWithoutRef<\n React.ComponentProps\n>;\n\ntype Primitives = { [E in typeof NODES[number]]: PrimitiveForwardRefComponent };\ntype PrimitivePropsWithRef = React.ComponentPropsWithRef & {\n asChild?: boolean;\n};\n\ninterface PrimitiveForwardRefComponent\n extends React.ForwardRefExoticComponent> {}\n\n/* -------------------------------------------------------------------------------------------------\n * Primitive\n * -----------------------------------------------------------------------------------------------*/\n\nconst Primitive = NODES.reduce((primitive, node) => {\n const Node = React.forwardRef((props: PrimitivePropsWithRef, forwardedRef: any) => {\n const { asChild, ...primitiveProps } = props;\n const Comp: any = asChild ? Slot : node;\n\n React.useEffect(() => {\n (window as any)[Symbol.for('radix-ui')] = true;\n }, []);\n\n return ;\n });\n\n Node.displayName = `Primitive.${node}`;\n\n return { ...primitive, [node]: Node };\n}, {} as Primitives);\n\n/* -------------------------------------------------------------------------------------------------\n * Utils\n * -----------------------------------------------------------------------------------------------*/\n\n/**\n * Flush custom event dispatch\n * https://github.com/radix-ui/primitives/pull/1378\n *\n * React batches *all* event handlers since version 18, this introduces certain considerations when using custom event types.\n *\n * Internally, React prioritises events in the following order:\n * - discrete\n * - continuous\n * - default\n *\n * https://github.com/facebook/react/blob/a8a4742f1c54493df00da648a3f9d26e3db9c8b5/packages/react-dom/src/events/ReactDOMEventListener.js#L294-L350\n *\n * `discrete` is an important distinction as updates within these events are applied immediately.\n * React however, is not able to infer the priority of custom event types due to how they are detected internally.\n * Because of this, it's possible for updates from custom events to be unexpectedly batched when\n * dispatched by another `discrete` event.\n *\n * In order to ensure that updates from custom events are applied predictably, we need to manually flush the batch.\n * This utility should be used when dispatching a custom event from within another `discrete` event, this utility\n * is not nessesary when dispatching known event types, or if dispatching a custom type inside a non-discrete event.\n * For example:\n *\n * dispatching a known click 👎\n * target.dispatchEvent(new Event(‘click’))\n *\n * dispatching a custom type within a non-discrete event 👎\n * onScroll={(event) => event.target.dispatchEvent(new CustomEvent(‘customType’))}\n *\n * dispatching a custom type within a `discrete` event 👍\n * onPointerDown={(event) => dispatchDiscreteCustomEvent(event.target, new CustomEvent(‘customType’))}\n *\n * Note: though React classifies `focus`, `focusin` and `focusout` events as `discrete`, it's not recommended to use\n * this utility with them. This is because it's possible for those handlers to be called implicitly during render\n * e.g. when focus is within a component as it is unmounted, or when managing focus on mount.\n */\n\nfunction dispatchDiscreteCustomEvent(target: E['target'], event: E) {\n if (target) ReactDOM.flushSync(() => target.dispatchEvent(event));\n}\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst Root = Primitive;\n\nexport {\n Primitive,\n //\n Root,\n //\n dispatchDiscreteCustomEvent,\n};\nexport type { ComponentPropsWithoutRef, PrimitivePropsWithRef };\n","import * as React from 'react';\n\n/**\n * A custom hook that converts a callback to a ref to avoid triggering re-renders when passed as a\n * prop or avoid re-executing effects when passed as a dependency\n */\nfunction useCallbackRef any>(callback: T | undefined): T {\n const callbackRef = React.useRef(callback);\n\n React.useEffect(() => {\n callbackRef.current = callback;\n });\n\n // https://github.com/facebook/react/issues/19240\n return React.useMemo(() => ((...args) => callbackRef.current?.(...args)) as T, []);\n}\n\nexport { useCallbackRef };\n","import * as React from 'react';\nimport { useCallbackRef } from '@radix-ui/react-use-callback-ref';\n\n/**\n * Listens for when the escape key is down\n */\nfunction useEscapeKeydown(\n onEscapeKeyDownProp?: (event: KeyboardEvent) => void,\n ownerDocument: Document = globalThis?.document\n) {\n const onEscapeKeyDown = useCallbackRef(onEscapeKeyDownProp);\n\n React.useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n onEscapeKeyDown(event);\n }\n };\n ownerDocument.addEventListener('keydown', handleKeyDown);\n return () => ownerDocument.removeEventListener('keydown', handleKeyDown);\n }, [onEscapeKeyDown, ownerDocument]);\n}\n\nexport { useEscapeKeydown };\n","import * as React from 'react';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { Primitive, dispatchDiscreteCustomEvent } from '@radix-ui/react-primitive';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { useCallbackRef } from '@radix-ui/react-use-callback-ref';\nimport { useEscapeKeydown } from '@radix-ui/react-use-escape-keydown';\n\nimport type * as Radix from '@radix-ui/react-primitive';\n\n/* -------------------------------------------------------------------------------------------------\n * DismissableLayer\n * -----------------------------------------------------------------------------------------------*/\n\nconst DISMISSABLE_LAYER_NAME = 'DismissableLayer';\nconst CONTEXT_UPDATE = 'dismissableLayer.update';\nconst POINTER_DOWN_OUTSIDE = 'dismissableLayer.pointerDownOutside';\nconst FOCUS_OUTSIDE = 'dismissableLayer.focusOutside';\n\nlet originalBodyPointerEvents: string;\n\nconst DismissableLayerContext = React.createContext({\n layers: new Set(),\n layersWithOutsidePointerEventsDisabled: new Set(),\n branches: new Set(),\n});\n\ntype DismissableLayerElement = React.ElementRef;\ntype PrimitiveDivProps = Radix.ComponentPropsWithoutRef;\ninterface DismissableLayerProps extends PrimitiveDivProps {\n /**\n * When `true`, hover/focus/click interactions will be disabled on elements outside\n * the `DismissableLayer`. Users will need to click twice on outside elements to\n * interact with them: once to close the `DismissableLayer`, and again to trigger the element.\n */\n disableOutsidePointerEvents?: boolean;\n /**\n * Event handler called when the escape key is down.\n * Can be prevented.\n */\n onEscapeKeyDown?: (event: KeyboardEvent) => void;\n /**\n * Event handler called when the a `pointerdown` event happens outside of the `DismissableLayer`.\n * Can be prevented.\n */\n onPointerDownOutside?: (event: PointerDownOutsideEvent) => void;\n /**\n * Event handler called when the focus moves outside of the `DismissableLayer`.\n * Can be prevented.\n */\n onFocusOutside?: (event: FocusOutsideEvent) => void;\n /**\n * Event handler called when an interaction happens outside the `DismissableLayer`.\n * Specifically, when a `pointerdown` event happens outside or focus moves outside of it.\n * Can be prevented.\n */\n onInteractOutside?: (event: PointerDownOutsideEvent | FocusOutsideEvent) => void;\n /**\n * Handler called when the `DismissableLayer` should be dismissed\n */\n onDismiss?: () => void;\n}\n\nconst DismissableLayer = React.forwardRef(\n (props, forwardedRef) => {\n const {\n disableOutsidePointerEvents = false,\n onEscapeKeyDown,\n onPointerDownOutside,\n onFocusOutside,\n onInteractOutside,\n onDismiss,\n ...layerProps\n } = props;\n const context = React.useContext(DismissableLayerContext);\n const [node, setNode] = React.useState(null);\n const ownerDocument = node?.ownerDocument ?? globalThis?.document;\n const [, force] = React.useState({});\n const composedRefs = useComposedRefs(forwardedRef, (node) => setNode(node));\n const layers = Array.from(context.layers);\n const [highestLayerWithOutsidePointerEventsDisabled] = [...context.layersWithOutsidePointerEventsDisabled].slice(-1); // prettier-ignore\n const highestLayerWithOutsidePointerEventsDisabledIndex = layers.indexOf(highestLayerWithOutsidePointerEventsDisabled); // prettier-ignore\n const index = node ? layers.indexOf(node) : -1;\n const isBodyPointerEventsDisabled = context.layersWithOutsidePointerEventsDisabled.size > 0;\n const isPointerEventsEnabled = index >= highestLayerWithOutsidePointerEventsDisabledIndex;\n\n const pointerDownOutside = usePointerDownOutside((event) => {\n const target = event.target as HTMLElement;\n const isPointerDownOnBranch = [...context.branches].some((branch) => branch.contains(target));\n if (!isPointerEventsEnabled || isPointerDownOnBranch) return;\n onPointerDownOutside?.(event);\n onInteractOutside?.(event);\n if (!event.defaultPrevented) onDismiss?.();\n }, ownerDocument);\n\n const focusOutside = useFocusOutside((event) => {\n const target = event.target as HTMLElement;\n const isFocusInBranch = [...context.branches].some((branch) => branch.contains(target));\n if (isFocusInBranch) return;\n onFocusOutside?.(event);\n onInteractOutside?.(event);\n if (!event.defaultPrevented) onDismiss?.();\n }, ownerDocument);\n\n useEscapeKeydown((event) => {\n const isHighestLayer = index === context.layers.size - 1;\n if (!isHighestLayer) return;\n onEscapeKeyDown?.(event);\n if (!event.defaultPrevented && onDismiss) {\n event.preventDefault();\n onDismiss();\n }\n }, ownerDocument);\n\n React.useEffect(() => {\n if (!node) return;\n if (disableOutsidePointerEvents) {\n if (context.layersWithOutsidePointerEventsDisabled.size === 0) {\n originalBodyPointerEvents = ownerDocument.body.style.pointerEvents;\n ownerDocument.body.style.pointerEvents = 'none';\n }\n context.layersWithOutsidePointerEventsDisabled.add(node);\n }\n context.layers.add(node);\n dispatchUpdate();\n return () => {\n if (\n disableOutsidePointerEvents &&\n context.layersWithOutsidePointerEventsDisabled.size === 1\n ) {\n ownerDocument.body.style.pointerEvents = originalBodyPointerEvents;\n }\n };\n }, [node, ownerDocument, disableOutsidePointerEvents, context]);\n\n /**\n * We purposefully prevent combining this effect with the `disableOutsidePointerEvents` effect\n * because a change to `disableOutsidePointerEvents` would remove this layer from the stack\n * and add it to the end again so the layering order wouldn't be _creation order_.\n * We only want them to be removed from context stacks when unmounted.\n */\n React.useEffect(() => {\n return () => {\n if (!node) return;\n context.layers.delete(node);\n context.layersWithOutsidePointerEventsDisabled.delete(node);\n dispatchUpdate();\n };\n }, [node, context]);\n\n React.useEffect(() => {\n const handleUpdate = () => force({});\n document.addEventListener(CONTEXT_UPDATE, handleUpdate);\n return () => document.removeEventListener(CONTEXT_UPDATE, handleUpdate);\n }, []);\n\n return (\n \n );\n }\n);\n\nDismissableLayer.displayName = DISMISSABLE_LAYER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * DismissableLayerBranch\n * -----------------------------------------------------------------------------------------------*/\n\nconst BRANCH_NAME = 'DismissableLayerBranch';\n\ntype DismissableLayerBranchElement = React.ElementRef;\ninterface DismissableLayerBranchProps extends PrimitiveDivProps {}\n\nconst DismissableLayerBranch = React.forwardRef<\n DismissableLayerBranchElement,\n DismissableLayerBranchProps\n>((props, forwardedRef) => {\n const context = React.useContext(DismissableLayerContext);\n const ref = React.useRef(null);\n const composedRefs = useComposedRefs(forwardedRef, ref);\n\n React.useEffect(() => {\n const node = ref.current;\n if (node) {\n context.branches.add(node);\n return () => {\n context.branches.delete(node);\n };\n }\n }, [context.branches]);\n\n return ;\n});\n\nDismissableLayerBranch.displayName = BRANCH_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype PointerDownOutsideEvent = CustomEvent<{ originalEvent: PointerEvent }>;\ntype FocusOutsideEvent = CustomEvent<{ originalEvent: FocusEvent }>;\n\n/**\n * Listens for `pointerdown` outside a react subtree. We use `pointerdown` rather than `pointerup`\n * to mimic layer dismissing behaviour present in OS.\n * Returns props to pass to the node we want to check for outside events.\n */\nfunction usePointerDownOutside(\n onPointerDownOutside?: (event: PointerDownOutsideEvent) => void,\n ownerDocument: Document = globalThis?.document\n) {\n const handlePointerDownOutside = useCallbackRef(onPointerDownOutside) as EventListener;\n const isPointerInsideReactTreeRef = React.useRef(false);\n const handleClickRef = React.useRef(() => {});\n\n React.useEffect(() => {\n const handlePointerDown = (event: PointerEvent) => {\n if (event.target && !isPointerInsideReactTreeRef.current) {\n const eventDetail = { originalEvent: event };\n\n function handleAndDispatchPointerDownOutsideEvent() {\n handleAndDispatchCustomEvent(\n POINTER_DOWN_OUTSIDE,\n handlePointerDownOutside,\n eventDetail,\n { discrete: true }\n );\n }\n\n /**\n * On touch devices, we need to wait for a click event because browsers implement\n * a ~350ms delay between the time the user stops touching the display and when the\n * browser executres events. We need to ensure we don't reactivate pointer-events within\n * this timeframe otherwise the browser may execute events that should have been prevented.\n *\n * Additionally, this also lets us deal automatically with cancellations when a click event\n * isn't raised because the page was considered scrolled/drag-scrolled, long-pressed, etc.\n *\n * This is why we also continuously remove the previous listener, because we cannot be\n * certain that it was raised, and therefore cleaned-up.\n */\n if (event.pointerType === 'touch') {\n ownerDocument.removeEventListener('click', handleClickRef.current);\n handleClickRef.current = handleAndDispatchPointerDownOutsideEvent;\n ownerDocument.addEventListener('click', handleClickRef.current, { once: true });\n } else {\n handleAndDispatchPointerDownOutsideEvent();\n }\n }\n isPointerInsideReactTreeRef.current = false;\n };\n /**\n * if this hook executes in a component that mounts via a `pointerdown` event, the event\n * would bubble up to the document and trigger a `pointerDownOutside` event. We avoid\n * this by delaying the event listener registration on the document.\n * This is not React specific, but rather how the DOM works, ie:\n * ```\n * button.addEventListener('pointerdown', () => {\n * console.log('I will log');\n * document.addEventListener('pointerdown', () => {\n * console.log('I will also log');\n * })\n * });\n */\n const timerId = window.setTimeout(() => {\n ownerDocument.addEventListener('pointerdown', handlePointerDown);\n }, 0);\n return () => {\n window.clearTimeout(timerId);\n ownerDocument.removeEventListener('pointerdown', handlePointerDown);\n ownerDocument.removeEventListener('click', handleClickRef.current);\n };\n }, [ownerDocument, handlePointerDownOutside]);\n\n return {\n // ensures we check React component tree (not just DOM tree)\n onPointerDownCapture: () => (isPointerInsideReactTreeRef.current = true),\n };\n}\n\n/**\n * Listens for when focus happens outside a react subtree.\n * Returns props to pass to the root (node) of the subtree we want to check.\n */\nfunction useFocusOutside(\n onFocusOutside?: (event: FocusOutsideEvent) => void,\n ownerDocument: Document = globalThis?.document\n) {\n const handleFocusOutside = useCallbackRef(onFocusOutside) as EventListener;\n const isFocusInsideReactTreeRef = React.useRef(false);\n\n React.useEffect(() => {\n const handleFocus = (event: FocusEvent) => {\n if (event.target && !isFocusInsideReactTreeRef.current) {\n const eventDetail = { originalEvent: event };\n handleAndDispatchCustomEvent(FOCUS_OUTSIDE, handleFocusOutside, eventDetail, {\n discrete: false,\n });\n }\n };\n ownerDocument.addEventListener('focusin', handleFocus);\n return () => ownerDocument.removeEventListener('focusin', handleFocus);\n }, [ownerDocument, handleFocusOutside]);\n\n return {\n onFocusCapture: () => (isFocusInsideReactTreeRef.current = true),\n onBlurCapture: () => (isFocusInsideReactTreeRef.current = false),\n };\n}\n\nfunction dispatchUpdate() {\n const event = new CustomEvent(CONTEXT_UPDATE);\n document.dispatchEvent(event);\n}\n\nfunction handleAndDispatchCustomEvent(\n name: string,\n handler: ((event: E) => void) | undefined,\n detail: { originalEvent: OriginalEvent } & (E extends CustomEvent ? D : never),\n { discrete }: { discrete: boolean }\n) {\n const target = detail.originalEvent.target;\n const event = new CustomEvent(name, { bubbles: false, cancelable: true, detail });\n if (handler) target.addEventListener(name, handler as EventListener, { once: true });\n\n if (discrete) {\n dispatchDiscreteCustomEvent(target, event);\n } else {\n target.dispatchEvent(event);\n }\n}\n\nconst Root = DismissableLayer;\nconst Branch = DismissableLayerBranch;\n\nexport {\n DismissableLayer,\n DismissableLayerBranch,\n //\n Root,\n Branch,\n};\nexport type { DismissableLayerProps };\n","import * as React from 'react';\nimport ReactDOM from 'react-dom';\nimport { Primitive } from '@radix-ui/react-primitive';\n\nimport type * as Radix from '@radix-ui/react-primitive';\n\n/* -------------------------------------------------------------------------------------------------\n * Portal\n * -----------------------------------------------------------------------------------------------*/\n\nconst PORTAL_NAME = 'Portal';\n\ntype PortalElement = React.ElementRef;\ntype PrimitiveDivProps = Radix.ComponentPropsWithoutRef;\ninterface PortalProps extends PrimitiveDivProps {\n container?: HTMLElement | null;\n}\n\nconst Portal = React.forwardRef((props, forwardedRef) => {\n const { container = globalThis?.document?.body, ...portalProps } = props;\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';\n\n/**\n * On the server, React emits a warning when calling `useLayoutEffect`.\n * This is because neither `useLayoutEffect` nor `useEffect` run on the server.\n * We use this safe version which suppresses the warning by replacing it with a noop on the server.\n *\n * See: https://reactjs.org/docs/hooks-reference.html#uselayouteffect\n */\nconst useLayoutEffect = Boolean(globalThis?.document) ? React.useLayoutEffect : () => {};\n\nexport { useLayoutEffect };\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 * as ReactDOM from 'react-dom';\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;\n\n const ref = useComposedRefs(presence.ref, (child as any).ref);\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 /**\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\n // a frame after the animation ends, creating a flash of visible content.\n // By manually flushing we ensure they sync within a frame, removing the flash.\n ReactDOM.flushSync(() => send('ANIMATION_END'));\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 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\nexport { Presence };\nexport type { PresenceProps };\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\nimport type * as Radix from '@radix-ui/react-primitive';\n\n/* -------------------------------------------------------------------------------------------------\n * VisuallyHidden\n * -----------------------------------------------------------------------------------------------*/\n\nconst NAME = 'VisuallyHidden';\n\ntype VisuallyHiddenElement = React.ElementRef;\ntype PrimitiveSpanProps = Radix.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 * as ReactDOM from 'react-dom';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { createCollection } from '@radix-ui/react-collection';\nimport { createContextScope } from '@radix-ui/react-context';\nimport * as DismissableLayer from '@radix-ui/react-dismissable-layer';\nimport { Portal } from '@radix-ui/react-portal';\nimport { Presence } from '@radix-ui/react-presence';\nimport { Primitive, dispatchDiscreteCustomEvent } from '@radix-ui/react-primitive';\nimport { useCallbackRef } from '@radix-ui/react-use-callback-ref';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { useLayoutEffect } from '@radix-ui/react-use-layout-effect';\nimport { VisuallyHidden } from '@radix-ui/react-visually-hidden';\n\nimport type * as Radix from '@radix-ui/react-primitive';\nimport type { Scope } from '@radix-ui/react-context';\n\n/* -------------------------------------------------------------------------------------------------\n * ToastProvider\n * -----------------------------------------------------------------------------------------------*/\n\nconst PROVIDER_NAME = 'ToastProvider';\n\nconst [Collection, useCollection, createCollectionScope] = createCollection('Toast');\n\ntype SwipeDirection = 'up' | 'down' | 'left' | 'right';\ntype ToastProviderContextValue = {\n label: string;\n duration: number;\n swipeDirection: SwipeDirection;\n swipeThreshold: number;\n toastCount: number;\n viewport: ToastViewportElement | null;\n onViewportChange(viewport: ToastViewportElement): void;\n onToastAdd(): void;\n onToastRemove(): void;\n isFocusedToastEscapeKeyDownRef: React.MutableRefObject;\n isClosePausedRef: React.MutableRefObject;\n};\n\ntype ScopedProps = P & { __scopeToast?: Scope };\nconst [createToastContext, createToastScope] = createContextScope('Toast', [createCollectionScope]);\nconst [ToastProviderProvider, useToastProviderContext] =\n createToastContext(PROVIDER_NAME);\n\ninterface ToastProviderProps {\n children?: React.ReactNode;\n /**\n * An author-localized label for each toast. Used to help screen reader users\n * associate the interruption with a toast.\n * @defaultValue 'Notification'\n */\n label?: string;\n /**\n * Time in milliseconds that each toast should remain visible for.\n * @defaultValue 5000\n */\n duration?: number;\n /**\n * Direction of pointer swipe that should close the toast.\n * @defaultValue 'right'\n */\n swipeDirection?: SwipeDirection;\n /**\n * Distance in pixels that the swipe must pass before a close is triggered.\n * @defaultValue 50\n */\n swipeThreshold?: number;\n}\n\nconst ToastProvider: React.FC = (props: ScopedProps) => {\n const {\n __scopeToast,\n label = 'Notification',\n duration = 5000,\n swipeDirection = 'right',\n swipeThreshold = 50,\n children,\n } = props;\n const [viewport, setViewport] = React.useState(null);\n const [toastCount, setToastCount] = React.useState(0);\n const isFocusedToastEscapeKeyDownRef = React.useRef(false);\n const isClosePausedRef = React.useRef(false);\n return (\n \n setToastCount((prevCount) => prevCount + 1), [])}\n onToastRemove={React.useCallback(() => setToastCount((prevCount) => prevCount - 1), [])}\n isFocusedToastEscapeKeyDownRef={isFocusedToastEscapeKeyDownRef}\n isClosePausedRef={isClosePausedRef}\n >\n {children}\n \n \n );\n};\n\nToastProvider.propTypes = {\n label(props) {\n if (props.label && typeof props.label === 'string' && !props.label.trim()) {\n const error = `Invalid prop \\`label\\` supplied to \\`${PROVIDER_NAME}\\`. Expected non-empty \\`string\\`.`;\n return new Error(error);\n }\n return null;\n },\n};\n\nToastProvider.displayName = PROVIDER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * ToastViewport\n * -----------------------------------------------------------------------------------------------*/\n\nconst VIEWPORT_NAME = 'ToastViewport';\nconst VIEWPORT_DEFAULT_HOTKEY = ['F8'];\nconst VIEWPORT_PAUSE = 'toast.viewportPause';\nconst VIEWPORT_RESUME = 'toast.viewportResume';\n\ntype ToastViewportElement = React.ElementRef;\ntype PrimitiveOrderedListProps = Radix.ComponentPropsWithoutRef;\ninterface ToastViewportProps extends PrimitiveOrderedListProps {\n /**\n * The keys to use as the keyboard shortcut that will move focus to the toast viewport.\n * @defaultValue ['F8']\n */\n hotkey?: string[];\n /**\n * An author-localized label for the toast viewport to provide context for screen reader users\n * when navigating page landmarks. The available `{hotkey}` placeholder will be replaced for you.\n * @defaultValue 'Notifications ({hotkey})'\n */\n label?: string;\n}\n\nconst ToastViewport = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const {\n __scopeToast,\n hotkey = VIEWPORT_DEFAULT_HOTKEY,\n label = 'Notifications ({hotkey})',\n ...viewportProps\n } = props;\n const context = useToastProviderContext(VIEWPORT_NAME, __scopeToast);\n const getItems = useCollection(__scopeToast);\n const wrapperRef = React.useRef(null);\n const headFocusProxyRef = React.useRef(null);\n const tailFocusProxyRef = React.useRef(null);\n const ref = React.useRef(null);\n const composedRefs = useComposedRefs(forwardedRef, ref, context.onViewportChange);\n const hotkeyLabel = hotkey.join('+').replace(/Key/g, '').replace(/Digit/g, '');\n const hasToasts = context.toastCount > 0;\n\n React.useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n // we use `event.code` as it is consistent regardless of meta keys that were pressed.\n // for example, `event.key` for `Control+Alt+t` is `†` and `t !== †`\n const isHotkeyPressed = hotkey.every((key) => (event as any)[key] || event.code === key);\n if (isHotkeyPressed) ref.current?.focus();\n };\n document.addEventListener('keydown', handleKeyDown);\n return () => document.removeEventListener('keydown', handleKeyDown);\n }, [hotkey]);\n\n React.useEffect(() => {\n const wrapper = wrapperRef.current;\n const viewport = ref.current;\n if (hasToasts && wrapper && viewport) {\n const handlePause = () => {\n if (!context.isClosePausedRef.current) {\n const pauseEvent = new CustomEvent(VIEWPORT_PAUSE);\n viewport.dispatchEvent(pauseEvent);\n context.isClosePausedRef.current = true;\n }\n };\n\n const handleResume = () => {\n if (context.isClosePausedRef.current) {\n const resumeEvent = new CustomEvent(VIEWPORT_RESUME);\n viewport.dispatchEvent(resumeEvent);\n context.isClosePausedRef.current = false;\n }\n };\n\n const handleFocusOutResume = (event: FocusEvent) => {\n const isFocusMovingOutside = !wrapper.contains(event.relatedTarget as HTMLElement);\n if (isFocusMovingOutside) handleResume();\n };\n\n const handlePointerLeaveResume = () => {\n const isFocusInside = wrapper.contains(document.activeElement);\n if (!isFocusInside) handleResume();\n };\n\n // Toasts are not in the viewport React tree so we need to bind DOM events\n wrapper.addEventListener('focusin', handlePause);\n wrapper.addEventListener('focusout', handleFocusOutResume);\n wrapper.addEventListener('pointermove', handlePause);\n wrapper.addEventListener('pointerleave', handlePointerLeaveResume);\n window.addEventListener('blur', handlePause);\n window.addEventListener('focus', handleResume);\n return () => {\n wrapper.removeEventListener('focusin', handlePause);\n wrapper.removeEventListener('focusout', handleFocusOutResume);\n wrapper.removeEventListener('pointermove', handlePause);\n wrapper.removeEventListener('pointerleave', handlePointerLeaveResume);\n window.removeEventListener('blur', handlePause);\n window.removeEventListener('focus', handleResume);\n };\n }\n }, [hasToasts, context.isClosePausedRef]);\n\n const getSortedTabbableCandidates = React.useCallback(\n ({ tabbingDirection }: { tabbingDirection: 'forwards' | 'backwards' }) => {\n const toastItems = getItems();\n const tabbableCandidates = toastItems.map((toastItem) => {\n const toastNode = toastItem.ref.current!;\n const toastTabbableCandidates = [toastNode, ...getTabbableCandidates(toastNode)];\n return tabbingDirection === 'forwards'\n ? toastTabbableCandidates\n : toastTabbableCandidates.reverse();\n });\n return (\n tabbingDirection === 'forwards' ? tabbableCandidates.reverse() : tabbableCandidates\n ).flat();\n },\n [getItems]\n );\n\n React.useEffect(() => {\n const viewport = ref.current;\n // We programmatically manage tabbing as we are unable to influence\n // the source order with portals, this allows us to reverse the\n // tab order so that it runs from most recent toast to least\n if (viewport) {\n const handleKeyDown = (event: KeyboardEvent) => {\n const isMetaKey = event.altKey || event.ctrlKey || event.metaKey;\n const isTabKey = event.key === 'Tab' && !isMetaKey;\n\n if (isTabKey) {\n const focusedElement = document.activeElement;\n const isTabbingBackwards = event.shiftKey;\n const targetIsViewport = event.target === viewport;\n\n // If we're back tabbing after jumping to the viewport then we simply\n // proxy focus out to the preceding document\n if (targetIsViewport && isTabbingBackwards) {\n headFocusProxyRef.current?.focus();\n return;\n }\n\n const tabbingDirection = isTabbingBackwards ? 'backwards' : 'forwards';\n const sortedCandidates = getSortedTabbableCandidates({ tabbingDirection });\n const index = sortedCandidates.findIndex((candidate) => candidate === focusedElement);\n if (focusFirst(sortedCandidates.slice(index + 1))) {\n event.preventDefault();\n } else {\n // If we can't focus that means we're at the edges so we\n // proxy to the corresponding exit point and let the browser handle\n // tab/shift+tab keypress and implicitly pass focus to the next valid element in the document\n isTabbingBackwards\n ? headFocusProxyRef.current?.focus()\n : tailFocusProxyRef.current?.focus();\n }\n }\n };\n\n // Toasts are not in the viewport React tree so we need to bind DOM events\n viewport.addEventListener('keydown', handleKeyDown);\n return () => viewport.removeEventListener('keydown', handleKeyDown);\n }\n }, [getItems, getSortedTabbableCandidates]);\n\n return (\n \n {hasToasts && (\n {\n const tabbableCandidates = getSortedTabbableCandidates({\n tabbingDirection: 'forwards',\n });\n focusFirst(tabbableCandidates);\n }}\n />\n )}\n {/**\n * tabindex on the the list so that it can be focused when items are removed. we focus\n * the list instead of the viewport so it announces number of items remaining.\n */}\n \n \n \n {hasToasts && (\n {\n const tabbableCandidates = getSortedTabbableCandidates({\n tabbingDirection: 'backwards',\n });\n focusFirst(tabbableCandidates);\n }}\n />\n )}\n \n );\n }\n);\n\nToastViewport.displayName = VIEWPORT_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst FOCUS_PROXY_NAME = 'ToastFocusProxy';\n\ntype FocusProxyElement = React.ElementRef;\ntype VisuallyHiddenProps = Radix.ComponentPropsWithoutRef;\ninterface FocusProxyProps extends VisuallyHiddenProps {\n onFocusFromOutsideViewport(): void;\n}\n\nconst FocusProxy = React.forwardRef>(\n (props, forwardedRef) => {\n const { __scopeToast, onFocusFromOutsideViewport, ...proxyProps } = props;\n const context = useToastProviderContext(FOCUS_PROXY_NAME, __scopeToast);\n\n return (\n {\n const prevFocusedElement = event.relatedTarget as HTMLElement | null;\n const isFocusFromOutsideViewport = !context.viewport?.contains(prevFocusedElement);\n if (isFocusFromOutsideViewport) onFocusFromOutsideViewport();\n }}\n />\n );\n }\n);\n\nFocusProxy.displayName = FOCUS_PROXY_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * Toast\n * -----------------------------------------------------------------------------------------------*/\n\nconst TOAST_NAME = 'Toast';\nconst TOAST_SWIPE_START = 'toast.swipeStart';\nconst TOAST_SWIPE_MOVE = 'toast.swipeMove';\nconst TOAST_SWIPE_CANCEL = 'toast.swipeCancel';\nconst TOAST_SWIPE_END = 'toast.swipeEnd';\n\ntype ToastElement = ToastImplElement;\ninterface ToastProps extends Omit {\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?(open: boolean): void;\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 Toast = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const { forceMount, open: openProp, defaultOpen, onOpenChange, ...toastProps } = props;\n const [open = true, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: defaultOpen,\n onChange: onOpenChange,\n });\n return (\n \n setOpen(false)}\n onPause={useCallbackRef(props.onPause)}\n onResume={useCallbackRef(props.onResume)}\n onSwipeStart={composeEventHandlers(props.onSwipeStart, (event) => {\n event.currentTarget.setAttribute('data-swipe', 'start');\n })}\n onSwipeMove={composeEventHandlers(props.onSwipeMove, (event) => {\n const { x, y } = event.detail.delta;\n event.currentTarget.setAttribute('data-swipe', 'move');\n event.currentTarget.style.setProperty('--radix-toast-swipe-move-x', `${x}px`);\n event.currentTarget.style.setProperty('--radix-toast-swipe-move-y', `${y}px`);\n })}\n onSwipeCancel={composeEventHandlers(props.onSwipeCancel, (event) => {\n event.currentTarget.setAttribute('data-swipe', 'cancel');\n event.currentTarget.style.removeProperty('--radix-toast-swipe-move-x');\n event.currentTarget.style.removeProperty('--radix-toast-swipe-move-y');\n event.currentTarget.style.removeProperty('--radix-toast-swipe-end-x');\n event.currentTarget.style.removeProperty('--radix-toast-swipe-end-y');\n })}\n onSwipeEnd={composeEventHandlers(props.onSwipeEnd, (event) => {\n const { x, y } = event.detail.delta;\n event.currentTarget.setAttribute('data-swipe', 'end');\n event.currentTarget.style.removeProperty('--radix-toast-swipe-move-x');\n event.currentTarget.style.removeProperty('--radix-toast-swipe-move-y');\n event.currentTarget.style.setProperty('--radix-toast-swipe-end-x', `${x}px`);\n event.currentTarget.style.setProperty('--radix-toast-swipe-end-y', `${y}px`);\n setOpen(false);\n })}\n />\n \n );\n }\n);\n\nToast.displayName = TOAST_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype SwipeEvent = { currentTarget: EventTarget & ToastElement } & Omit<\n CustomEvent<{ originalEvent: React.PointerEvent; delta: { x: number; y: number } }>,\n 'currentTarget'\n>;\n\nconst [ToastInteractiveProvider, useToastInteractiveContext] = createToastContext(TOAST_NAME, {\n onClose() {},\n});\n\ntype ToastImplElement = React.ElementRef;\ntype DismissableLayerProps = Radix.ComponentPropsWithoutRef;\ntype ToastImplPrivateProps = { open: boolean; onClose(): void };\ntype PrimitiveListItemProps = Radix.ComponentPropsWithoutRef;\ninterface ToastImplProps extends ToastImplPrivateProps, PrimitiveListItemProps {\n type?: 'foreground' | 'background';\n /**\n * Time in milliseconds that toast should remain visible for. Overrides value\n * given to `ToastProvider`.\n */\n duration?: number;\n onEscapeKeyDown?: DismissableLayerProps['onEscapeKeyDown'];\n onPause?(): void;\n onResume?(): void;\n onSwipeStart?(event: SwipeEvent): void;\n onSwipeMove?(event: SwipeEvent): void;\n onSwipeCancel?(event: SwipeEvent): void;\n onSwipeEnd?(event: SwipeEvent): void;\n}\n\nconst ToastImpl = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const {\n __scopeToast,\n type = 'foreground',\n duration: durationProp,\n open,\n onClose,\n onEscapeKeyDown,\n onPause,\n onResume,\n onSwipeStart,\n onSwipeMove,\n onSwipeCancel,\n onSwipeEnd,\n ...toastProps\n } = props;\n const context = useToastProviderContext(TOAST_NAME, __scopeToast);\n const [node, setNode] = React.useState(null);\n const composedRefs = useComposedRefs(forwardedRef, (node) => setNode(node));\n const pointerStartRef = React.useRef<{ x: number; y: number } | null>(null);\n const swipeDeltaRef = React.useRef<{ x: number; y: number } | null>(null);\n const duration = durationProp || context.duration;\n const closeTimerStartTimeRef = React.useRef(0);\n const closeTimerRemainingTimeRef = React.useRef(duration);\n const closeTimerRef = React.useRef(0);\n const { onToastAdd, onToastRemove } = context;\n const handleClose = useCallbackRef(() => {\n // focus viewport if focus is within toast to read the remaining toast\n // count to SR users and ensure focus isn't lost\n const isFocusInToast = node?.contains(document.activeElement);\n if (isFocusInToast) context.viewport?.focus();\n onClose();\n });\n\n const startTimer = React.useCallback(\n (duration: number) => {\n if (!duration || duration === Infinity) return;\n window.clearTimeout(closeTimerRef.current);\n closeTimerStartTimeRef.current = new Date().getTime();\n closeTimerRef.current = window.setTimeout(handleClose, duration);\n },\n [handleClose]\n );\n\n React.useEffect(() => {\n const viewport = context.viewport;\n if (viewport) {\n const handleResume = () => {\n startTimer(closeTimerRemainingTimeRef.current);\n onResume?.();\n };\n const handlePause = () => {\n const elapsedTime = new Date().getTime() - closeTimerStartTimeRef.current;\n closeTimerRemainingTimeRef.current = closeTimerRemainingTimeRef.current - elapsedTime;\n window.clearTimeout(closeTimerRef.current);\n onPause?.();\n };\n viewport.addEventListener(VIEWPORT_PAUSE, handlePause);\n viewport.addEventListener(VIEWPORT_RESUME, handleResume);\n return () => {\n viewport.removeEventListener(VIEWPORT_PAUSE, handlePause);\n viewport.removeEventListener(VIEWPORT_RESUME, handleResume);\n };\n }\n }, [context.viewport, duration, onPause, onResume, startTimer]);\n\n // start timer when toast opens or duration changes.\n // we include `open` in deps because closed !== unmounted when animating\n // so it could reopen before being completely unmounted\n React.useEffect(() => {\n if (open && !context.isClosePausedRef.current) startTimer(duration);\n }, [open, duration, context.isClosePausedRef, startTimer]);\n\n React.useEffect(() => {\n onToastAdd();\n return () => onToastRemove();\n }, [onToastAdd, onToastRemove]);\n\n const announceTextContent = React.useMemo(() => {\n return node ? getAnnounceTextContent(node) : null;\n }, [node]);\n\n if (!context.viewport) return null;\n\n return (\n <>\n {announceTextContent && (\n \n {announceTextContent}\n \n )}\n\n \n {ReactDOM.createPortal(\n \n {\n if (!context.isFocusedToastEscapeKeyDownRef.current) handleClose();\n context.isFocusedToastEscapeKeyDownRef.current = false;\n })}\n >\n {\n if (event.key !== 'Escape') return;\n onEscapeKeyDown?.(event.nativeEvent);\n if (!event.nativeEvent.defaultPrevented) {\n context.isFocusedToastEscapeKeyDownRef.current = true;\n handleClose();\n }\n })}\n onPointerDown={composeEventHandlers(props.onPointerDown, (event) => {\n if (event.button !== 0) return;\n pointerStartRef.current = { x: event.clientX, y: event.clientY };\n })}\n onPointerMove={composeEventHandlers(props.onPointerMove, (event) => {\n if (!pointerStartRef.current) return;\n const x = event.clientX - pointerStartRef.current.x;\n const y = event.clientY - pointerStartRef.current.y;\n const hasSwipeMoveStarted = Boolean(swipeDeltaRef.current);\n const isHorizontalSwipe = ['left', 'right'].includes(context.swipeDirection);\n const clamp = ['left', 'up'].includes(context.swipeDirection)\n ? Math.min\n : Math.max;\n const clampedX = isHorizontalSwipe ? clamp(0, x) : 0;\n const clampedY = !isHorizontalSwipe ? clamp(0, y) : 0;\n const moveStartBuffer = event.pointerType === 'touch' ? 10 : 2;\n const delta = { x: clampedX, y: clampedY };\n const eventDetail = { originalEvent: event, delta };\n if (hasSwipeMoveStarted) {\n swipeDeltaRef.current = delta;\n handleAndDispatchCustomEvent(TOAST_SWIPE_MOVE, onSwipeMove, eventDetail, {\n discrete: false,\n });\n } else if (isDeltaInDirection(delta, context.swipeDirection, moveStartBuffer)) {\n swipeDeltaRef.current = delta;\n handleAndDispatchCustomEvent(TOAST_SWIPE_START, onSwipeStart, eventDetail, {\n discrete: false,\n });\n (event.target as HTMLElement).setPointerCapture(event.pointerId);\n } else if (Math.abs(x) > moveStartBuffer || Math.abs(y) > moveStartBuffer) {\n // User is swiping in wrong direction so we disable swipe gesture\n // for the current pointer down interaction\n pointerStartRef.current = null;\n }\n })}\n onPointerUp={composeEventHandlers(props.onPointerUp, (event) => {\n const delta = swipeDeltaRef.current;\n const target = event.target as HTMLElement;\n if (target.hasPointerCapture(event.pointerId)) {\n target.releasePointerCapture(event.pointerId);\n }\n swipeDeltaRef.current = null;\n pointerStartRef.current = null;\n if (delta) {\n const toast = event.currentTarget;\n const eventDetail = { originalEvent: event, delta };\n if (\n isDeltaInDirection(delta, context.swipeDirection, context.swipeThreshold)\n ) {\n handleAndDispatchCustomEvent(TOAST_SWIPE_END, onSwipeEnd, eventDetail, {\n discrete: true,\n });\n } else {\n handleAndDispatchCustomEvent(\n TOAST_SWIPE_CANCEL,\n onSwipeCancel,\n eventDetail,\n {\n discrete: true,\n }\n );\n }\n // Prevent click event from triggering on items within the toast when\n // pointer up is part of a swipe gesture\n toast.addEventListener('click', (event) => event.preventDefault(), {\n once: true,\n });\n }\n })}\n />\n \n ,\n context.viewport\n )}\n \n \n );\n }\n);\n\nToastImpl.propTypes = {\n type(props) {\n if (props.type && !['foreground', 'background'].includes(props.type)) {\n const error = `Invalid prop \\`type\\` supplied to \\`${TOAST_NAME}\\`. Expected \\`foreground | background\\`.`;\n return new Error(error);\n }\n return null;\n },\n};\n\n/* -----------------------------------------------------------------------------------------------*/\n\ninterface ToastAnnounceProps\n extends Omit, 'children'>,\n ScopedProps<{ children: string[] }> {}\n\nconst ToastAnnounce: React.FC = (props: ScopedProps) => {\n const { __scopeToast, children, ...announceProps } = props;\n const context = useToastProviderContext(TOAST_NAME, __scopeToast);\n const [renderAnnounceText, setRenderAnnounceText] = React.useState(false);\n const [isAnnounced, setIsAnnounced] = React.useState(false);\n\n // render text content in the next frame to ensure toast is announced in NVDA\n useNextFrame(() => setRenderAnnounceText(true));\n\n // cleanup after announcing\n React.useEffect(() => {\n const timer = window.setTimeout(() => setIsAnnounced(true), 1000);\n return () => window.clearTimeout(timer);\n }, []);\n\n return isAnnounced ? null : (\n \n \n {renderAnnounceText && (\n <>\n {context.label} {children}\n \n )}\n \n \n );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * ToastTitle\n * -----------------------------------------------------------------------------------------------*/\n\nconst TITLE_NAME = 'ToastTitle';\n\ntype ToastTitleElement = React.ElementRef;\ntype PrimitiveDivProps = Radix.ComponentPropsWithoutRef;\ninterface ToastTitleProps extends PrimitiveDivProps {}\n\nconst ToastTitle = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const { __scopeToast, ...titleProps } = props;\n return ;\n }\n);\n\nToastTitle.displayName = TITLE_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * ToastDescription\n * -----------------------------------------------------------------------------------------------*/\n\nconst DESCRIPTION_NAME = 'ToastDescription';\n\ntype ToastDescriptionElement = React.ElementRef;\ninterface ToastDescriptionProps extends PrimitiveDivProps {}\n\nconst ToastDescription = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const { __scopeToast, ...descriptionProps } = props;\n return ;\n }\n);\n\nToastDescription.displayName = DESCRIPTION_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * ToastAction\n * -----------------------------------------------------------------------------------------------*/\n\nconst ACTION_NAME = 'ToastAction';\n\ntype ToastActionElement = ToastCloseElement;\ninterface ToastActionProps extends ToastCloseProps {\n /**\n * A short description for an alternate way to carry out the action. For screen reader users\n * who will not be able to navigate to the button easily/quickly.\n * @example Upgrade\n * @example Undo\n */\n altText: string;\n}\n\nconst ToastAction = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const { altText, ...actionProps } = props;\n if (!altText) return null;\n return (\n \n \n \n );\n }\n);\n\nToastAction.propTypes = {\n altText(props) {\n if (!props.altText) {\n return new Error(`Missing prop \\`altText\\` expected on \\`${ACTION_NAME}\\``);\n }\n return null;\n },\n};\n\nToastAction.displayName = ACTION_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * ToastClose\n * -----------------------------------------------------------------------------------------------*/\n\nconst CLOSE_NAME = 'ToastClose';\n\ntype ToastCloseElement = React.ElementRef;\ntype PrimitiveButtonProps = Radix.ComponentPropsWithoutRef;\ninterface ToastCloseProps extends PrimitiveButtonProps {}\n\nconst ToastClose = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const { __scopeToast, ...closeProps } = props;\n const interactiveContext = useToastInteractiveContext(CLOSE_NAME, __scopeToast);\n\n return (\n \n \n \n );\n }\n);\n\nToastClose.displayName = CLOSE_NAME;\n\n/* ---------------------------------------------------------------------------------------------- */\n\ntype ToastAnnounceExcludeElement = React.ElementRef;\ninterface ToastAnnounceExcludeProps extends PrimitiveDivProps {\n altText?: string;\n}\n\nconst ToastAnnounceExclude = React.forwardRef<\n ToastAnnounceExcludeElement,\n ToastAnnounceExcludeProps\n>((props: ScopedProps, forwardedRef) => {\n const { __scopeToast, altText, ...announceExcludeProps } = props;\n\n return (\n \n );\n});\n\nfunction getAnnounceTextContent(container: HTMLElement) {\n const textContent: string[] = [];\n const childNodes = Array.from(container.childNodes);\n\n childNodes.forEach((node) => {\n if (node.nodeType === node.TEXT_NODE && node.textContent) textContent.push(node.textContent);\n if (isHTMLElement(node)) {\n const isHidden = node.ariaHidden || node.hidden || node.style.display === 'none';\n const isExcluded = node.dataset.radixToastAnnounceExclude === '';\n\n if (!isHidden) {\n if (isExcluded) {\n const altText = node.dataset.radixToastAnnounceAlt;\n if (altText) textContent.push(altText);\n } else {\n textContent.push(...getAnnounceTextContent(node));\n }\n }\n }\n });\n\n // We return a collection of text rather than a single concatenated string.\n // This allows SR VO to naturally pause break between nodes while announcing.\n return textContent;\n}\n\n/* ---------------------------------------------------------------------------------------------- */\n\nfunction handleAndDispatchCustomEvent<\n E extends CustomEvent,\n ReactEvent extends React.SyntheticEvent\n>(\n name: string,\n handler: ((event: E) => void) | undefined,\n detail: { originalEvent: ReactEvent } & (E extends CustomEvent ? D : never),\n { discrete }: { discrete: boolean }\n) {\n const currentTarget = detail.originalEvent.currentTarget as HTMLElement;\n const event = new CustomEvent(name, { bubbles: true, cancelable: true, detail });\n if (handler) currentTarget.addEventListener(name, handler as EventListener, { once: true });\n\n if (discrete) {\n dispatchDiscreteCustomEvent(currentTarget, event);\n } else {\n currentTarget.dispatchEvent(event);\n }\n}\n\nconst isDeltaInDirection = (\n delta: { x: number; y: number },\n direction: SwipeDirection,\n threshold = 0\n) => {\n const deltaX = Math.abs(delta.x);\n const deltaY = Math.abs(delta.y);\n const isDeltaX = deltaX > deltaY;\n if (direction === 'left' || direction === 'right') {\n return isDeltaX && deltaX > threshold;\n } else {\n return !isDeltaX && deltaY > threshold;\n }\n};\n\nfunction useNextFrame(callback = () => {}) {\n const fn = useCallbackRef(callback);\n useLayoutEffect(() => {\n let raf1 = 0;\n let raf2 = 0;\n raf1 = window.requestAnimationFrame(() => (raf2 = window.requestAnimationFrame(fn)));\n return () => {\n window.cancelAnimationFrame(raf1);\n window.cancelAnimationFrame(raf2);\n };\n }, [fn]);\n}\n\nfunction isHTMLElement(node: any): node is HTMLElement {\n return node.nodeType === node.ELEMENT_NODE;\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\nfunction focusFirst(candidates: HTMLElement[]) {\n const previouslyFocusedElement = document.activeElement;\n return candidates.some((candidate) => {\n // if focus is already where we want to go, we don't want to keep going through the candidates\n if (candidate === previouslyFocusedElement) return true;\n candidate.focus();\n return document.activeElement !== previouslyFocusedElement;\n });\n}\n\nconst Provider = ToastProvider;\nconst Viewport = ToastViewport;\nconst Root = Toast;\nconst Title = ToastTitle;\nconst Description = ToastDescription;\nconst Action = ToastAction;\nconst Close = ToastClose;\n\nexport {\n createToastScope,\n //\n ToastProvider,\n ToastViewport,\n Toast,\n ToastTitle,\n ToastDescription,\n ToastAction,\n ToastClose,\n //\n Provider,\n Viewport,\n Root,\n Title,\n Description,\n Action,\n Close,\n};\nexport type {\n ToastProviderProps,\n ToastViewportProps,\n ToastProps,\n ToastTitleProps,\n ToastDescriptionProps,\n ToastActionProps,\n ToastCloseProps,\n};\n","import * as React from \"react\"\nimport { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n\nexport function formatDate(input: string | number): string {\n const date = new Date(input)\n return date.toLocaleDateString(\"en-US\", {\n month: \"long\",\n day: \"numeric\",\n year: \"numeric\",\n })\n}\n\nexport function absoluteUrl(path: string) {\n return `${process.env.NEXT_PUBLIC_APP_URL}${path}`\n}\n","\"use client\"\n\n// Inspired by react-hot-toast library\nimport * as React from \"react\"\n\nimport type {\n ToastActionElement,\n ToastProps,\n} from \"@/registry/default/ui/toast\"\n\nconst TOAST_LIMIT = 1\nconst TOAST_REMOVE_DELAY = 1000000\n\ntype ToasterToast = ToastProps & {\n id: string\n title?: React.ReactNode\n description?: React.ReactNode\n action?: ToastActionElement\n}\n\nconst actionTypes = {\n ADD_TOAST: \"ADD_TOAST\",\n UPDATE_TOAST: \"UPDATE_TOAST\",\n DISMISS_TOAST: \"DISMISS_TOAST\",\n REMOVE_TOAST: \"REMOVE_TOAST\",\n} as const\n\nlet count = 0\n\nfunction genId() {\n count = (count + 1) % Number.MAX_SAFE_INTEGER\n return count.toString()\n}\n\ntype ActionType = typeof actionTypes\n\ntype Action =\n | {\n type: ActionType[\"ADD_TOAST\"]\n toast: ToasterToast\n }\n | {\n type: ActionType[\"UPDATE_TOAST\"]\n toast: Partial\n }\n | {\n type: ActionType[\"DISMISS_TOAST\"]\n toastId?: ToasterToast[\"id\"]\n }\n | {\n type: ActionType[\"REMOVE_TOAST\"]\n toastId?: ToasterToast[\"id\"]\n }\n\ninterface State {\n toasts: ToasterToast[]\n}\n\nconst toastTimeouts = new Map>()\n\nconst addToRemoveQueue = (toastId: string) => {\n if (toastTimeouts.has(toastId)) {\n return\n }\n\n const timeout = setTimeout(() => {\n toastTimeouts.delete(toastId)\n dispatch({\n type: \"REMOVE_TOAST\",\n toastId: toastId,\n })\n }, TOAST_REMOVE_DELAY)\n\n toastTimeouts.set(toastId, timeout)\n}\n\nexport const reducer = (state: State, action: Action): State => {\n switch (action.type) {\n case \"ADD_TOAST\":\n return {\n ...state,\n toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),\n }\n\n case \"UPDATE_TOAST\":\n return {\n ...state,\n toasts: state.toasts.map((t) =>\n t.id === action.toast.id ? { ...t, ...action.toast } : t\n ),\n }\n\n case \"DISMISS_TOAST\": {\n const { toastId } = action\n\n // ! Side effects ! - This could be extracted into a dismissToast() action,\n // but I'll keep it here for simplicity\n if (toastId) {\n addToRemoveQueue(toastId)\n } else {\n state.toasts.forEach((toast) => {\n addToRemoveQueue(toast.id)\n })\n }\n\n return {\n ...state,\n toasts: state.toasts.map((t) =>\n t.id === toastId || toastId === undefined\n ? {\n ...t,\n open: false,\n }\n : t\n ),\n }\n }\n case \"REMOVE_TOAST\":\n if (action.toastId === undefined) {\n return {\n ...state,\n toasts: [],\n }\n }\n return {\n ...state,\n toasts: state.toasts.filter((t) => t.id !== action.toastId),\n }\n }\n}\n\nconst listeners: Array<(state: State) => void> = []\n\nlet memoryState: State = { toasts: [] }\n\nfunction dispatch(action: Action) {\n memoryState = reducer(memoryState, action)\n listeners.forEach((listener) => {\n listener(memoryState)\n })\n}\n\ntype Toast = Omit\n\nfunction toast({ ...props }: Toast) {\n const id = genId()\n\n const update = (props: ToasterToast) =>\n dispatch({\n type: \"UPDATE_TOAST\",\n toast: { ...props, id },\n })\n const dismiss = () => dispatch({ type: \"DISMISS_TOAST\", toastId: id })\n\n dispatch({\n type: \"ADD_TOAST\",\n toast: {\n ...props,\n id,\n open: true,\n onOpenChange: (open) => {\n if (!open) dismiss()\n },\n },\n })\n\n return {\n id: id,\n dismiss,\n update,\n }\n}\n\nfunction useToast() {\n const [state, setState] = React.useState(memoryState)\n\n React.useEffect(() => {\n listeners.push(setState)\n return () => {\n const index = listeners.indexOf(setState)\n if (index > -1) {\n listeners.splice(index, 1)\n }\n }\n }, [state])\n\n return {\n ...state,\n toast,\n dismiss: (toastId?: string) => dispatch({ type: \"DISMISS_TOAST\", toastId }),\n }\n}\n\nexport { useToast, toast }\n"]}