`, so it can be styled via any CSS solution you prefer.\n * @see https://floating-ui.com/docs/FloatingOverlay\n */\nconst FloatingOverlay = /*#__PURE__*/React.forwardRef(function FloatingOverlay(_ref, ref) {\n let {\n lockScroll = false,\n ...rest\n } = _ref;\n index(() => {\n var _window$visualViewpor, _window$visualViewpor2;\n if (!lockScroll) {\n return;\n }\n const alreadyLocked = document.body.hasAttribute(identifier);\n if (alreadyLocked) {\n return;\n }\n document.body.setAttribute(identifier, '');\n\n // RTL scrollbar\n const scrollbarX = Math.round(document.documentElement.getBoundingClientRect().left) + document.documentElement.scrollLeft;\n const paddingProp = scrollbarX ? 'paddingLeft' : 'paddingRight';\n const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;\n\n // Only iOS doesn't respect `overflow: hidden` on document.body, and this\n // technique has fewer side effects.\n if (!/iP(hone|ad|od)|iOS/.test(getPlatform())) {\n Object.assign(document.body.style, {\n overflow: 'hidden',\n [paddingProp]: scrollbarWidth + \"px\"\n });\n return () => {\n document.body.removeAttribute(identifier);\n Object.assign(document.body.style, {\n overflow: '',\n [paddingProp]: ''\n });\n };\n }\n\n // iOS 12 does not support `visualViewport`.\n const offsetLeft = ((_window$visualViewpor = window.visualViewport) == null ? void 0 : _window$visualViewpor.offsetLeft) || 0;\n const offsetTop = ((_window$visualViewpor2 = window.visualViewport) == null ? void 0 : _window$visualViewpor2.offsetTop) || 0;\n const scrollX = window.pageXOffset;\n const scrollY = window.pageYOffset;\n Object.assign(document.body.style, {\n position: 'fixed',\n overflow: 'hidden',\n top: -(scrollY - Math.floor(offsetTop)) + \"px\",\n left: -(scrollX - Math.floor(offsetLeft)) + \"px\",\n right: '0',\n [paddingProp]: scrollbarWidth + \"px\"\n });\n return () => {\n Object.assign(document.body.style, {\n position: '',\n overflow: '',\n top: '',\n left: '',\n right: '',\n [paddingProp]: ''\n });\n document.body.removeAttribute(identifier);\n window.scrollTo(scrollX, scrollY);\n };\n }, [lockScroll]);\n return /*#__PURE__*/React.createElement(\"div\", _extends({\n ref: ref\n }, rest, {\n style: {\n position: 'fixed',\n overflow: 'auto',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n ...rest.style\n }\n }));\n});\n\nfunction isButtonTarget(event) {\n return isHTMLElement(event.target) && event.target.tagName === 'BUTTON';\n}\nfunction isSpaceIgnored(element) {\n return isTypeableElement(element);\n}\n/**\n * Opens or closes the floating element when clicking the reference element.\n * @see https://floating-ui.com/docs/useClick\n */\nconst useClick = function (_ref, _temp) {\n let {\n open,\n onOpenChange,\n dataRef,\n elements: {\n domReference\n }\n } = _ref;\n let {\n enabled = true,\n event: eventOption = 'click',\n toggle = true,\n ignoreMouse = false,\n keyboardHandlers = true\n } = _temp === void 0 ? {} : _temp;\n const pointerTypeRef = React.useRef();\n return React.useMemo(() => {\n if (!enabled) {\n return {};\n }\n return {\n reference: {\n onPointerDown(event) {\n pointerTypeRef.current = event.pointerType;\n },\n onMouseDown(event) {\n // Ignore all buttons except for the \"main\" button.\n // https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button\n if (event.button !== 0) {\n return;\n }\n if (isMouseLikePointerType(pointerTypeRef.current, true) && ignoreMouse) {\n return;\n }\n if (eventOption === 'click') {\n return;\n }\n if (open) {\n if (toggle && (dataRef.current.openEvent ? dataRef.current.openEvent.type === 'mousedown' : true)) {\n onOpenChange(false);\n }\n } else {\n // Prevent stealing focus from the floating element\n event.preventDefault();\n onOpenChange(true);\n }\n dataRef.current.openEvent = event.nativeEvent;\n },\n onClick(event) {\n if (dataRef.current.__syncReturnFocus) {\n return;\n }\n if (eventOption === 'mousedown' && pointerTypeRef.current) {\n pointerTypeRef.current = undefined;\n return;\n }\n if (isMouseLikePointerType(pointerTypeRef.current, true) && ignoreMouse) {\n return;\n }\n if (open) {\n if (toggle && (dataRef.current.openEvent ? dataRef.current.openEvent.type === 'click' : true)) {\n onOpenChange(false);\n }\n } else {\n onOpenChange(true);\n }\n dataRef.current.openEvent = event.nativeEvent;\n },\n onKeyDown(event) {\n pointerTypeRef.current = undefined;\n if (!keyboardHandlers) {\n return;\n }\n if (isButtonTarget(event)) {\n return;\n }\n if (event.key === ' ' && !isSpaceIgnored(domReference)) {\n // Prevent scrolling\n event.preventDefault();\n }\n if (event.key === 'Enter') {\n if (open) {\n if (toggle) {\n onOpenChange(false);\n }\n } else {\n onOpenChange(true);\n }\n }\n },\n onKeyUp(event) {\n if (!keyboardHandlers) {\n return;\n }\n if (isButtonTarget(event) || isSpaceIgnored(domReference)) {\n return;\n }\n if (event.key === ' ') {\n if (open) {\n if (toggle) {\n onOpenChange(false);\n }\n } else {\n onOpenChange(true);\n }\n }\n }\n }\n };\n }, [enabled, dataRef, eventOption, ignoreMouse, keyboardHandlers, domReference, toggle, open, onOpenChange]);\n};\n\n/**\n * Check whether the event.target is within the provided node. Uses event.composedPath if available for custom element support.\n *\n * @param event The event whose target/composedPath to check\n * @param node The node to check against\n * @returns Whether the event.target/composedPath is within the node.\n */\nfunction isEventTargetWithin(event, node) {\n if (node == null) {\n return false;\n }\n if ('composedPath' in event) {\n return event.composedPath().includes(node);\n }\n\n // TS thinks `event` is of type never as it assumes all browsers support composedPath, but browsers without shadow dom don't\n const e = event;\n return e.target != null && node.contains(e.target);\n}\n\nconst bubbleHandlerKeys = {\n pointerdown: 'onPointerDown',\n mousedown: 'onMouseDown',\n click: 'onClick'\n};\nconst captureHandlerKeys = {\n pointerdown: 'onPointerDownCapture',\n mousedown: 'onMouseDownCapture',\n click: 'onClickCapture'\n};\nconst normalizeBubblesProp = function (bubbles) {\n var _bubbles$escapeKey, _bubbles$outsidePress;\n if (bubbles === void 0) {\n bubbles = true;\n }\n return {\n escapeKeyBubbles: typeof bubbles === 'boolean' ? bubbles : (_bubbles$escapeKey = bubbles.escapeKey) != null ? _bubbles$escapeKey : true,\n outsidePressBubbles: typeof bubbles === 'boolean' ? bubbles : (_bubbles$outsidePress = bubbles.outsidePress) != null ? _bubbles$outsidePress : true\n };\n};\n/**\n * Closes the floating element when a dismissal is requested — by default, when\n * the user presses the `escape` key or outside of the floating element.\n * @see https://floating-ui.com/docs/useDismiss\n */\nconst useDismiss = function (_ref, _temp) {\n let {\n open,\n onOpenChange,\n events,\n nodeId,\n elements: {\n reference,\n domReference,\n floating\n },\n dataRef\n } = _ref;\n let {\n enabled = true,\n escapeKey = true,\n outsidePress: unstable_outsidePress = true,\n outsidePressEvent = 'pointerdown',\n referencePress = false,\n referencePressEvent = 'pointerdown',\n ancestorScroll = false,\n bubbles = true\n } = _temp === void 0 ? {} : _temp;\n const tree = useFloatingTree();\n const nested = useFloatingParentNodeId() != null;\n const outsidePressFn = useEvent(typeof unstable_outsidePress === 'function' ? unstable_outsidePress : () => false);\n const outsidePress = typeof unstable_outsidePress === 'function' ? outsidePressFn : unstable_outsidePress;\n const insideReactTreeRef = React.useRef(false);\n const {\n escapeKeyBubbles,\n outsidePressBubbles\n } = normalizeBubblesProp(bubbles);\n React.useEffect(() => {\n if (!open || !enabled) {\n return;\n }\n dataRef.current.__escapeKeyBubbles = escapeKeyBubbles;\n dataRef.current.__outsidePressBubbles = outsidePressBubbles;\n function onKeyDown(event) {\n if (event.key === 'Escape') {\n const children = tree ? getChildren(tree.nodesRef.current, nodeId) : [];\n if (children.length > 0) {\n let shouldDismiss = true;\n children.forEach(child => {\n var _child$context;\n if ((_child$context = child.context) != null && _child$context.open && !child.context.dataRef.current.__escapeKeyBubbles) {\n shouldDismiss = false;\n return;\n }\n });\n if (!shouldDismiss) {\n return;\n }\n }\n events.emit('dismiss', {\n type: 'escapeKey',\n data: {\n returnFocus: {\n preventScroll: false\n }\n }\n });\n onOpenChange(false);\n }\n }\n function onOutsidePress(event) {\n // Given developers can stop the propagation of the synthetic event,\n // we can only be confident with a positive value.\n const insideReactTree = insideReactTreeRef.current;\n insideReactTreeRef.current = false;\n if (insideReactTree) {\n return;\n }\n if (typeof outsidePress === 'function' && !outsidePress(event)) {\n return;\n }\n const target = getTarget(event);\n\n // Check if the click occurred on the scrollbar\n if (isHTMLElement(target) && floating) {\n const win = floating.ownerDocument.defaultView || window;\n const canScrollX = target.scrollWidth > target.clientWidth;\n const canScrollY = target.scrollHeight > target.clientHeight;\n let xCond = canScrollY && event.offsetX > target.clientWidth;\n\n // In some browsers it is possible to change the (or window)\n // scrollbar to the left side, but is very rare and is difficult to\n // check for. Plus, for modal dialogs with backdrops, it is more\n // important that the backdrop is checked but not so much the window.\n if (canScrollY) {\n const isRTL = win.getComputedStyle(target).direction === 'rtl';\n if (isRTL) {\n xCond = event.offsetX <= target.offsetWidth - target.clientWidth;\n }\n }\n if (xCond || canScrollX && event.offsetY > target.clientHeight) {\n return;\n }\n }\n const targetIsInsideChildren = tree && getChildren(tree.nodesRef.current, nodeId).some(node => {\n var _node$context;\n return isEventTargetWithin(event, (_node$context = node.context) == null ? void 0 : _node$context.elements.floating);\n });\n if (isEventTargetWithin(event, floating) || isEventTargetWithin(event, domReference) || targetIsInsideChildren) {\n return;\n }\n const children = tree ? getChildren(tree.nodesRef.current, nodeId) : [];\n if (children.length > 0) {\n let shouldDismiss = true;\n children.forEach(child => {\n var _child$context2;\n if ((_child$context2 = child.context) != null && _child$context2.open && !child.context.dataRef.current.__outsidePressBubbles) {\n shouldDismiss = false;\n return;\n }\n });\n if (!shouldDismiss) {\n return;\n }\n }\n events.emit('dismiss', {\n type: 'outsidePress',\n data: {\n returnFocus: nested ? {\n preventScroll: true\n } : isVirtualClick(event) || isVirtualPointerEvent(event)\n }\n });\n onOpenChange(false);\n }\n function onScroll() {\n onOpenChange(false);\n }\n const doc = getDocument(floating);\n escapeKey && doc.addEventListener('keydown', onKeyDown);\n outsidePress && doc.addEventListener(outsidePressEvent, onOutsidePress);\n let ancestors = [];\n if (ancestorScroll) {\n if (isElement(domReference)) {\n ancestors = getOverflowAncestors(domReference);\n }\n if (isElement(floating)) {\n ancestors = ancestors.concat(getOverflowAncestors(floating));\n }\n if (!isElement(reference) && reference && reference.contextElement) {\n ancestors = ancestors.concat(getOverflowAncestors(reference.contextElement));\n }\n }\n\n // Ignore the visual viewport for scrolling dismissal (allow pinch-zoom)\n ancestors = ancestors.filter(ancestor => {\n var _doc$defaultView;\n return ancestor !== ((_doc$defaultView = doc.defaultView) == null ? void 0 : _doc$defaultView.visualViewport);\n });\n ancestors.forEach(ancestor => {\n ancestor.addEventListener('scroll', onScroll, {\n passive: true\n });\n });\n return () => {\n escapeKey && doc.removeEventListener('keydown', onKeyDown);\n outsidePress && doc.removeEventListener(outsidePressEvent, onOutsidePress);\n ancestors.forEach(ancestor => {\n ancestor.removeEventListener('scroll', onScroll);\n });\n };\n }, [dataRef, floating, domReference, reference, escapeKey, outsidePress, outsidePressEvent, events, tree, nodeId, open, onOpenChange, ancestorScroll, enabled, escapeKeyBubbles, outsidePressBubbles, nested]);\n React.useEffect(() => {\n insideReactTreeRef.current = false;\n }, [outsidePress, outsidePressEvent]);\n return React.useMemo(() => {\n if (!enabled) {\n return {};\n }\n return {\n reference: {\n [bubbleHandlerKeys[referencePressEvent]]: () => {\n if (referencePress) {\n events.emit('dismiss', {\n type: 'referencePress',\n data: {\n returnFocus: false\n }\n });\n onOpenChange(false);\n }\n }\n },\n floating: {\n [captureHandlerKeys[outsidePressEvent]]: () => {\n insideReactTreeRef.current = true;\n }\n }\n };\n }, [enabled, events, referencePress, outsidePressEvent, referencePressEvent, onOpenChange]);\n};\n\n/**\n * Opens the floating element while the reference element has focus, like CSS\n * `:focus`.\n * @see https://floating-ui.com/docs/useFocus\n */\nconst useFocus = function (_ref, _temp) {\n let {\n open,\n onOpenChange,\n dataRef,\n events,\n refs,\n elements: {\n floating,\n domReference\n }\n } = _ref;\n let {\n enabled = true,\n keyboardOnly = true\n } = _temp === void 0 ? {} : _temp;\n const pointerTypeRef = React.useRef('');\n const blockFocusRef = React.useRef(false);\n const timeoutRef = React.useRef();\n React.useEffect(() => {\n if (!enabled) {\n return;\n }\n const doc = getDocument(floating);\n const win = doc.defaultView || window;\n\n // If the reference was focused and the user left the tab/window, and the\n // floating element was not open, the focus should be blocked when they\n // return to the tab/window.\n function onBlur() {\n if (!open && isHTMLElement(domReference) && domReference === activeElement$1(getDocument(domReference))) {\n blockFocusRef.current = true;\n }\n }\n win.addEventListener('blur', onBlur);\n return () => {\n win.removeEventListener('blur', onBlur);\n };\n }, [floating, domReference, open, enabled]);\n React.useEffect(() => {\n if (!enabled) {\n return;\n }\n function onDismiss(payload) {\n if (payload.type === 'referencePress' || payload.type === 'escapeKey') {\n blockFocusRef.current = true;\n }\n }\n events.on('dismiss', onDismiss);\n return () => {\n events.off('dismiss', onDismiss);\n };\n }, [events, enabled]);\n React.useEffect(() => {\n return () => {\n clearTimeout(timeoutRef.current);\n };\n }, []);\n return React.useMemo(() => {\n if (!enabled) {\n return {};\n }\n return {\n reference: {\n onPointerDown(_ref2) {\n let {\n pointerType\n } = _ref2;\n pointerTypeRef.current = pointerType;\n blockFocusRef.current = !!(pointerType && keyboardOnly);\n },\n onMouseLeave() {\n blockFocusRef.current = false;\n },\n onFocus(event) {\n var _dataRef$current$open;\n if (blockFocusRef.current) {\n return;\n }\n\n // Dismiss with click should ignore the subsequent `focus` trigger,\n // but only if the click originated inside the reference element.\n if (event.type === 'focus' && ((_dataRef$current$open = dataRef.current.openEvent) == null ? void 0 : _dataRef$current$open.type) === 'mousedown' && dataRef.current.openEvent && isEventTargetWithin(dataRef.current.openEvent, domReference)) {\n return;\n }\n dataRef.current.openEvent = event.nativeEvent;\n onOpenChange(true);\n },\n onBlur(event) {\n blockFocusRef.current = false;\n const relatedTarget = event.relatedTarget;\n\n // Hit the non-modal focus management portal guard. Focus will be\n // moved into the floating element immediately after.\n const movedToFocusGuard = isElement(relatedTarget) && relatedTarget.hasAttribute('data-floating-ui-focus-guard') && relatedTarget.getAttribute('data-type') === 'outside';\n\n // Wait for the window blur listener to fire.\n timeoutRef.current = setTimeout(() => {\n // When focusing the reference element (e.g. regular click), then\n // clicking into the floating element, prevent it from hiding.\n // Note: it must be focusable, e.g. `tabindex=\"-1\"`.\n if (contains(refs.floating.current, relatedTarget) || contains(domReference, relatedTarget) || movedToFocusGuard) {\n return;\n }\n onOpenChange(false);\n });\n }\n }\n };\n }, [enabled, keyboardOnly, domReference, refs, dataRef, onOpenChange]);\n};\n\nlet isPreventScrollSupported = false;\nconst ARROW_UP = 'ArrowUp';\nconst ARROW_DOWN = 'ArrowDown';\nconst ARROW_LEFT = 'ArrowLeft';\nconst ARROW_RIGHT = 'ArrowRight';\nfunction isDifferentRow(index, cols, prevRow) {\n return Math.floor(index / cols) !== prevRow;\n}\nfunction isIndexOutOfBounds(listRef, index) {\n return index < 0 || index >= listRef.current.length;\n}\nfunction findNonDisabledIndex(listRef, _temp) {\n let {\n startingIndex = -1,\n decrement = false,\n disabledIndices,\n amount = 1\n } = _temp === void 0 ? {} : _temp;\n const list = listRef.current;\n let index = startingIndex;\n do {\n var _list$index, _list$index2;\n index = index + (decrement ? -amount : amount);\n } while (index >= 0 && index <= list.length - 1 && (disabledIndices ? disabledIndices.includes(index) : list[index] == null || ((_list$index = list[index]) == null ? void 0 : _list$index.hasAttribute('disabled')) || ((_list$index2 = list[index]) == null ? void 0 : _list$index2.getAttribute('aria-disabled')) === 'true'));\n return index;\n}\nfunction doSwitch(orientation, vertical, horizontal) {\n switch (orientation) {\n case 'vertical':\n return vertical;\n case 'horizontal':\n return horizontal;\n default:\n return vertical || horizontal;\n }\n}\nfunction isMainOrientationKey(key, orientation) {\n const vertical = key === ARROW_UP || key === ARROW_DOWN;\n const horizontal = key === ARROW_LEFT || key === ARROW_RIGHT;\n return doSwitch(orientation, vertical, horizontal);\n}\nfunction isMainOrientationToEndKey(key, orientation, rtl) {\n const vertical = key === ARROW_DOWN;\n const horizontal = rtl ? key === ARROW_LEFT : key === ARROW_RIGHT;\n return doSwitch(orientation, vertical, horizontal) || key === 'Enter' || key == ' ' || key === '';\n}\nfunction isCrossOrientationOpenKey(key, orientation, rtl) {\n const vertical = rtl ? key === ARROW_LEFT : key === ARROW_RIGHT;\n const horizontal = key === ARROW_DOWN;\n return doSwitch(orientation, vertical, horizontal);\n}\nfunction isCrossOrientationCloseKey(key, orientation, rtl) {\n const vertical = rtl ? key === ARROW_RIGHT : key === ARROW_LEFT;\n const horizontal = key === ARROW_UP;\n return doSwitch(orientation, vertical, horizontal);\n}\nfunction getMinIndex(listRef, disabledIndices) {\n return findNonDisabledIndex(listRef, {\n disabledIndices\n });\n}\nfunction getMaxIndex(listRef, disabledIndices) {\n return findNonDisabledIndex(listRef, {\n decrement: true,\n startingIndex: listRef.current.length,\n disabledIndices\n });\n}\n/**\n * Adds arrow key-based navigation of a list of items, either using real DOM\n * focus or virtual focus.\n * @see https://floating-ui.com/docs/useListNavigation\n */\nconst useListNavigation = function (_ref, _temp2) {\n let {\n open,\n onOpenChange,\n refs,\n elements: {\n domReference\n }\n } = _ref;\n let {\n listRef,\n activeIndex,\n onNavigate: unstable_onNavigate = () => {},\n enabled = true,\n selectedIndex = null,\n allowEscape = false,\n loop = false,\n nested = false,\n rtl = false,\n virtual = false,\n focusItemOnOpen = 'auto',\n focusItemOnHover = true,\n openOnArrowKeyDown = true,\n disabledIndices = undefined,\n orientation = 'vertical',\n cols = 1,\n scrollItemIntoView = true\n } = _temp2 === void 0 ? {\n listRef: {\n current: []\n },\n activeIndex: null,\n onNavigate: () => {}\n } : _temp2;\n if (process.env.NODE_ENV !== \"production\") {\n if (allowEscape) {\n if (!loop) {\n console.warn(['Floating UI: `useListNavigation` looping must be enabled to allow', 'escaping.'].join(' '));\n }\n if (!virtual) {\n console.warn(['Floating UI: `useListNavigation` must be virtual to allow', 'escaping.'].join(' '));\n }\n }\n if (orientation === 'vertical' && cols > 1) {\n console.warn(['Floating UI: In grid list navigation mode (`cols` > 1), the', '`orientation` should be either \"horizontal\" or \"both\".'].join(' '));\n }\n }\n const parentId = useFloatingParentNodeId();\n const tree = useFloatingTree();\n const onNavigate = useEvent(unstable_onNavigate);\n const focusItemOnOpenRef = React.useRef(focusItemOnOpen);\n const indexRef = React.useRef(selectedIndex != null ? selectedIndex : -1);\n const keyRef = React.useRef(null);\n const isPointerModalityRef = React.useRef(true);\n const previousOnNavigateRef = React.useRef(onNavigate);\n const previousOpenRef = React.useRef(open);\n const forceSyncFocus = React.useRef(false);\n const forceScrollIntoViewRef = React.useRef(false);\n const disabledIndicesRef = useLatestRef(disabledIndices);\n const latestOpenRef = useLatestRef(open);\n const scrollItemIntoViewRef = useLatestRef(scrollItemIntoView);\n const [activeId, setActiveId] = React.useState();\n const focusItem = React.useCallback(function (listRef, indexRef, forceScrollIntoView) {\n if (forceScrollIntoView === void 0) {\n forceScrollIntoView = false;\n }\n const item = listRef.current[indexRef.current];\n if (virtual) {\n setActiveId(item == null ? void 0 : item.id);\n } else {\n enqueueFocus(item, {\n preventScroll: true,\n // Mac Safari does not move the virtual cursor unless the focus call\n // is sync. However, for the very first focus call, we need to wait\n // for the position to be ready in order to prevent unwanted\n // scrolling. This means the virtual cursor will not move to the first\n // item when first opening the floating element, but will on\n // subsequent calls. `preventScroll` is supported in modern Safari,\n // so we can use that instead.\n // iOS Safari must be async or the first item will not be focused.\n sync: isMac() && isSafari() ? isPreventScrollSupported || forceSyncFocus.current : false\n });\n }\n requestAnimationFrame(() => {\n const scrollIntoViewOptions = scrollItemIntoViewRef.current;\n const shouldScrollIntoView = scrollIntoViewOptions && item && (forceScrollIntoView || !isPointerModalityRef.current);\n if (shouldScrollIntoView) {\n // JSDOM doesn't support `.scrollIntoView()` but it's widely supported\n // by all browsers.\n item.scrollIntoView == null ? void 0 : item.scrollIntoView(typeof scrollIntoViewOptions === 'boolean' ? {\n block: 'nearest',\n inline: 'nearest'\n } : scrollIntoViewOptions);\n }\n });\n }, [virtual, scrollItemIntoViewRef]);\n index(() => {\n document.createElement('div').focus({\n get preventScroll() {\n isPreventScrollSupported = true;\n return false;\n }\n });\n }, []);\n\n // Sync `selectedIndex` to be the `activeIndex` upon opening the floating\n // element. Also, reset `activeIndex` upon closing the floating element.\n index(() => {\n if (!enabled) {\n return;\n }\n if (open) {\n if (focusItemOnOpenRef.current && selectedIndex != null) {\n // Regardless of the pointer modality, we want to ensure the selected\n // item comes into view when the floating element is opened.\n forceScrollIntoViewRef.current = true;\n onNavigate(selectedIndex);\n }\n } else if (previousOpenRef.current) {\n // Since the user can specify `onNavigate` conditionally\n // (onNavigate: open ? setActiveIndex : setSelectedIndex),\n // we store and call the previous function.\n indexRef.current = -1;\n previousOnNavigateRef.current(null);\n }\n }, [enabled, open, selectedIndex, onNavigate]);\n\n // Sync `activeIndex` to be the focused item while the floating element is\n // open.\n index(() => {\n if (!enabled) {\n return;\n }\n if (open) {\n if (activeIndex == null) {\n forceSyncFocus.current = false;\n if (selectedIndex != null) {\n return;\n }\n\n // Reset while the floating element was open (e.g. the list changed).\n if (previousOpenRef.current) {\n indexRef.current = -1;\n focusItem(listRef, indexRef);\n }\n\n // Initial sync.\n if (!previousOpenRef.current && focusItemOnOpenRef.current && (keyRef.current != null || focusItemOnOpenRef.current === true && keyRef.current == null)) {\n indexRef.current = keyRef.current == null || isMainOrientationToEndKey(keyRef.current, orientation, rtl) || nested ? getMinIndex(listRef, disabledIndicesRef.current) : getMaxIndex(listRef, disabledIndicesRef.current);\n onNavigate(indexRef.current);\n }\n } else if (!isIndexOutOfBounds(listRef, activeIndex)) {\n indexRef.current = activeIndex;\n focusItem(listRef, indexRef, forceScrollIntoViewRef.current);\n forceScrollIntoViewRef.current = false;\n }\n }\n }, [enabled, open, activeIndex, selectedIndex, nested, listRef, orientation, rtl, onNavigate, focusItem, disabledIndicesRef]);\n\n // Ensure the parent floating element has focus when a nested child closes\n // to allow arrow key navigation to work after the pointer leaves the child.\n index(() => {\n if (!enabled) {\n return;\n }\n if (previousOpenRef.current && !open) {\n var _tree$nodesRef$curren, _tree$nodesRef$curren2;\n const parentFloating = tree == null ? void 0 : (_tree$nodesRef$curren = tree.nodesRef.current.find(node => node.id === parentId)) == null ? void 0 : (_tree$nodesRef$curren2 = _tree$nodesRef$curren.context) == null ? void 0 : _tree$nodesRef$curren2.elements.floating;\n if (parentFloating && !contains(parentFloating, activeElement$1(getDocument(parentFloating)))) {\n parentFloating.focus({\n preventScroll: true\n });\n }\n }\n }, [enabled, open, tree, parentId]);\n index(() => {\n keyRef.current = null;\n previousOnNavigateRef.current = onNavigate;\n previousOpenRef.current = open;\n });\n const hasActiveIndex = activeIndex != null;\n const item = React.useMemo(() => {\n function syncCurrentTarget(currentTarget) {\n if (!open) return;\n const index = listRef.current.indexOf(currentTarget);\n if (index !== -1) {\n onNavigate(index);\n }\n }\n const props = {\n onFocus(_ref2) {\n let {\n currentTarget\n } = _ref2;\n syncCurrentTarget(currentTarget);\n },\n onClick: _ref3 => {\n let {\n currentTarget\n } = _ref3;\n return currentTarget.focus({\n preventScroll: true\n });\n },\n // Safari\n ...(focusItemOnHover && {\n onMouseMove(_ref4) {\n let {\n currentTarget\n } = _ref4;\n syncCurrentTarget(currentTarget);\n },\n onPointerLeave() {\n if (!isPointerModalityRef.current) {\n return;\n }\n indexRef.current = -1;\n focusItem(listRef, indexRef);\n\n // Virtual cursor with VoiceOver on iOS needs this to be flushed\n // synchronously or there is a glitch that prevents nested\n // submenus from being accessible.\n flushSync(() => onNavigate(null));\n if (!virtual) {\n var _refs$floating$curren;\n // This also needs to be sync to prevent fast mouse movements\n // from leaving behind a stale active item when landing on a\n // disabled button item.\n (_refs$floating$curren = refs.floating.current) == null ? void 0 : _refs$floating$curren.focus({\n preventScroll: true\n });\n }\n }\n })\n };\n return props;\n }, [open, refs, focusItem, focusItemOnHover, listRef, onNavigate, virtual]);\n return React.useMemo(() => {\n if (!enabled) {\n return {};\n }\n const disabledIndices = disabledIndicesRef.current;\n function onKeyDown(event) {\n isPointerModalityRef.current = false;\n forceSyncFocus.current = true;\n\n // If the floating element is animating out, ignore navigation. Otherwise,\n // the `activeIndex` gets set to 0 despite not being open so the next time\n // the user ArrowDowns, the first item won't be focused.\n if (!latestOpenRef.current && event.currentTarget === refs.floating.current) {\n return;\n }\n if (nested && isCrossOrientationCloseKey(event.key, orientation, rtl)) {\n stopEvent(event);\n onOpenChange(false);\n if (isHTMLElement(domReference)) {\n domReference.focus();\n }\n return;\n }\n const currentIndex = indexRef.current;\n const minIndex = getMinIndex(listRef, disabledIndices);\n const maxIndex = getMaxIndex(listRef, disabledIndices);\n if (event.key === 'Home') {\n indexRef.current = minIndex;\n onNavigate(indexRef.current);\n }\n if (event.key === 'End') {\n indexRef.current = maxIndex;\n onNavigate(indexRef.current);\n }\n\n // Grid navigation.\n if (cols > 1) {\n const prevIndex = indexRef.current;\n if (event.key === ARROW_UP) {\n stopEvent(event);\n if (prevIndex === -1) {\n indexRef.current = maxIndex;\n } else {\n indexRef.current = findNonDisabledIndex(listRef, {\n startingIndex: prevIndex,\n amount: cols,\n decrement: true,\n disabledIndices\n });\n if (loop && (prevIndex - cols < minIndex || indexRef.current < 0)) {\n const col = prevIndex % cols;\n const maxCol = maxIndex % cols;\n const offset = maxIndex - (maxCol - col);\n if (maxCol === col) {\n indexRef.current = maxIndex;\n } else {\n indexRef.current = maxCol > col ? offset : offset - cols;\n }\n }\n }\n if (isIndexOutOfBounds(listRef, indexRef.current)) {\n indexRef.current = prevIndex;\n }\n onNavigate(indexRef.current);\n }\n if (event.key === ARROW_DOWN) {\n stopEvent(event);\n if (prevIndex === -1) {\n indexRef.current = minIndex;\n } else {\n indexRef.current = findNonDisabledIndex(listRef, {\n startingIndex: prevIndex,\n amount: cols,\n disabledIndices\n });\n if (loop && prevIndex + cols > maxIndex) {\n indexRef.current = findNonDisabledIndex(listRef, {\n startingIndex: prevIndex % cols - cols,\n amount: cols,\n disabledIndices\n });\n }\n }\n if (isIndexOutOfBounds(listRef, indexRef.current)) {\n indexRef.current = prevIndex;\n }\n onNavigate(indexRef.current);\n }\n\n // Remains on the same row/column.\n if (orientation === 'both') {\n const prevRow = Math.floor(prevIndex / cols);\n if (event.key === ARROW_RIGHT) {\n stopEvent(event);\n if (prevIndex % cols !== cols - 1) {\n indexRef.current = findNonDisabledIndex(listRef, {\n startingIndex: prevIndex,\n disabledIndices\n });\n if (loop && isDifferentRow(indexRef.current, cols, prevRow)) {\n indexRef.current = findNonDisabledIndex(listRef, {\n startingIndex: prevIndex - prevIndex % cols - 1,\n disabledIndices\n });\n }\n } else if (loop) {\n indexRef.current = findNonDisabledIndex(listRef, {\n startingIndex: prevIndex - prevIndex % cols - 1,\n disabledIndices\n });\n }\n if (isDifferentRow(indexRef.current, cols, prevRow)) {\n indexRef.current = prevIndex;\n }\n }\n if (event.key === ARROW_LEFT) {\n stopEvent(event);\n if (prevIndex % cols !== 0) {\n indexRef.current = findNonDisabledIndex(listRef, {\n startingIndex: prevIndex,\n disabledIndices,\n decrement: true\n });\n if (loop && isDifferentRow(indexRef.current, cols, prevRow)) {\n indexRef.current = findNonDisabledIndex(listRef, {\n startingIndex: prevIndex + (cols - prevIndex % cols),\n decrement: true,\n disabledIndices\n });\n }\n } else if (loop) {\n indexRef.current = findNonDisabledIndex(listRef, {\n startingIndex: prevIndex + (cols - prevIndex % cols),\n decrement: true,\n disabledIndices\n });\n }\n if (isDifferentRow(indexRef.current, cols, prevRow)) {\n indexRef.current = prevIndex;\n }\n }\n const lastRow = Math.floor(maxIndex / cols) === prevRow;\n if (isIndexOutOfBounds(listRef, indexRef.current)) {\n if (loop && lastRow) {\n indexRef.current = event.key === ARROW_LEFT ? maxIndex : findNonDisabledIndex(listRef, {\n startingIndex: prevIndex - prevIndex % cols - 1,\n disabledIndices\n });\n } else {\n indexRef.current = prevIndex;\n }\n }\n onNavigate(indexRef.current);\n return;\n }\n }\n if (isMainOrientationKey(event.key, orientation)) {\n stopEvent(event);\n\n // Reset the index if no item is focused.\n if (open && !virtual && activeElement$1(event.currentTarget.ownerDocument) === event.currentTarget) {\n indexRef.current = isMainOrientationToEndKey(event.key, orientation, rtl) ? minIndex : maxIndex;\n onNavigate(indexRef.current);\n return;\n }\n if (isMainOrientationToEndKey(event.key, orientation, rtl)) {\n if (loop) {\n indexRef.current = currentIndex >= maxIndex ? allowEscape && currentIndex !== listRef.current.length ? -1 : minIndex : findNonDisabledIndex(listRef, {\n startingIndex: currentIndex,\n disabledIndices\n });\n } else {\n indexRef.current = Math.min(maxIndex, findNonDisabledIndex(listRef, {\n startingIndex: currentIndex,\n disabledIndices\n }));\n }\n } else {\n if (loop) {\n indexRef.current = currentIndex <= minIndex ? allowEscape && currentIndex !== -1 ? listRef.current.length : maxIndex : findNonDisabledIndex(listRef, {\n startingIndex: currentIndex,\n decrement: true,\n disabledIndices\n });\n } else {\n indexRef.current = Math.max(minIndex, findNonDisabledIndex(listRef, {\n startingIndex: currentIndex,\n decrement: true,\n disabledIndices\n }));\n }\n }\n if (isIndexOutOfBounds(listRef, indexRef.current)) {\n onNavigate(null);\n } else {\n onNavigate(indexRef.current);\n }\n }\n }\n function checkVirtualMouse(event) {\n if (focusItemOnOpen === 'auto' && isVirtualClick(event.nativeEvent)) {\n focusItemOnOpenRef.current = true;\n }\n }\n function checkVirtualPointer(event) {\n // `pointerdown` fires first, reset the state then perform the checks.\n focusItemOnOpenRef.current = focusItemOnOpen;\n if (focusItemOnOpen === 'auto' && isVirtualPointerEvent(event.nativeEvent)) {\n focusItemOnOpenRef.current = true;\n }\n }\n const ariaActiveDescendantProp = virtual && open && hasActiveIndex && {\n 'aria-activedescendant': activeId\n };\n return {\n reference: {\n ...ariaActiveDescendantProp,\n onKeyDown(event) {\n isPointerModalityRef.current = false;\n const isArrowKey = event.key.indexOf('Arrow') === 0;\n if (virtual && open) {\n return onKeyDown(event);\n }\n\n // If a floating element should not open on arrow key down, avoid\n // setting `activeIndex` while it's closed.\n if (!open && !openOnArrowKeyDown && isArrowKey) {\n return;\n }\n const isNavigationKey = isArrowKey || event.key === 'Enter' || event.key === ' ' || event.key === '';\n if (isNavigationKey) {\n keyRef.current = event.key;\n }\n if (nested) {\n if (isCrossOrientationOpenKey(event.key, orientation, rtl)) {\n stopEvent(event);\n if (open) {\n indexRef.current = getMinIndex(listRef, disabledIndices);\n onNavigate(indexRef.current);\n } else {\n onOpenChange(true);\n }\n }\n return;\n }\n if (isMainOrientationKey(event.key, orientation)) {\n if (selectedIndex != null) {\n indexRef.current = selectedIndex;\n }\n stopEvent(event);\n if (!open && openOnArrowKeyDown) {\n onOpenChange(true);\n } else {\n onKeyDown(event);\n }\n if (open) {\n onNavigate(indexRef.current);\n }\n }\n },\n onFocus() {\n if (open) {\n onNavigate(null);\n }\n },\n onPointerDown: checkVirtualPointer,\n onMouseDown: checkVirtualMouse,\n onClick: checkVirtualMouse\n },\n floating: {\n 'aria-orientation': orientation === 'both' ? undefined : orientation,\n ...ariaActiveDescendantProp,\n onKeyDown,\n onPointerMove() {\n isPointerModalityRef.current = true;\n }\n },\n item\n };\n }, [domReference, refs, activeId, disabledIndicesRef, latestOpenRef, listRef, enabled, orientation, rtl, virtual, open, hasActiveIndex, nested, selectedIndex, openOnArrowKeyDown, allowEscape, cols, loop, focusItemOnOpen, onNavigate, onOpenChange, item]);\n};\n\n/**\n * Merges an array of refs into a single memoized callback ref or `null`.\n * @see https://floating-ui.com/docs/useMergeRefs\n */\nfunction useMergeRefs(refs) {\n return React.useMemo(() => {\n if (refs.every(ref => ref == null)) {\n return null;\n }\n return value => {\n refs.forEach(ref => {\n if (typeof ref === 'function') {\n ref(value);\n } else if (ref != null) {\n ref.current = value;\n }\n });\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, refs);\n}\n\n/**\n * Adds base screen reader props to the reference and floating elements for a\n * given floating element `role`.\n * @see https://floating-ui.com/docs/useRole\n */\nconst useRole = function (_ref, _temp) {\n let {\n open\n } = _ref;\n let {\n enabled = true,\n role = 'dialog'\n } = _temp === void 0 ? {} : _temp;\n const rootId = useId();\n const referenceId = useId();\n return React.useMemo(() => {\n const floatingProps = {\n id: rootId,\n role\n };\n if (!enabled) {\n return {};\n }\n if (role === 'tooltip') {\n return {\n reference: {\n 'aria-describedby': open ? rootId : undefined\n },\n floating: floatingProps\n };\n }\n return {\n reference: {\n 'aria-expanded': open ? 'true' : 'false',\n 'aria-haspopup': role === 'alertdialog' ? 'dialog' : role,\n 'aria-controls': open ? rootId : undefined,\n ...(role === 'listbox' && {\n role: 'combobox'\n }),\n ...(role === 'menu' && {\n id: referenceId\n })\n },\n floating: {\n ...floatingProps,\n ...(role === 'menu' && {\n 'aria-labelledby': referenceId\n })\n }\n };\n }, [enabled, role, open, rootId, referenceId]);\n};\n\n// Converts a JS style key like `backgroundColor` to a CSS transition-property\n// like `background-color`.\nconst camelCaseToKebabCase = str => str.replace(/[A-Z]+(?![a-z])|[A-Z]/g, ($, ofs) => (ofs ? '-' : '') + $.toLowerCase());\nfunction useDelayUnmount(open, durationMs) {\n const [isMounted, setIsMounted] = React.useState(open);\n if (open && !isMounted) {\n setIsMounted(true);\n }\n React.useEffect(() => {\n if (!open) {\n const timeout = setTimeout(() => setIsMounted(false), durationMs);\n return () => clearTimeout(timeout);\n }\n }, [open, durationMs]);\n return isMounted;\n}\n/**\n * Provides a status string to apply CSS transitions to a floating element,\n * correctly handling placement-aware transitions.\n * @see https://floating-ui.com/docs/useTransition#usetransitionstatus\n */\nfunction useTransitionStatus(_ref, _temp) {\n let {\n open,\n elements: {\n floating\n }\n } = _ref;\n let {\n duration = 250\n } = _temp === void 0 ? {} : _temp;\n const isNumberDuration = typeof duration === 'number';\n const closeDuration = (isNumberDuration ? duration : duration.close) || 0;\n const [initiated, setInitiated] = React.useState(false);\n const [status, setStatus] = React.useState('unmounted');\n const isMounted = useDelayUnmount(open, closeDuration);\n\n // `initiated` check prevents this `setState` call from breaking\n //
. This call is necessary to ensure subsequent opens\n // after the initial one allows the correct side animation to play when the\n // placement has changed.\n index(() => {\n if (initiated && !isMounted) {\n setStatus('unmounted');\n }\n }, [initiated, isMounted]);\n index(() => {\n if (!floating) return;\n if (open) {\n setStatus('initial');\n const frame = requestAnimationFrame(() => {\n setStatus('open');\n });\n return () => {\n cancelAnimationFrame(frame);\n };\n } else {\n setInitiated(true);\n setStatus('close');\n }\n }, [open, floating]);\n return {\n isMounted,\n status\n };\n}\n/**\n * Provides styles to apply CSS transitions to a floating element, correctly\n * handling placement-aware transitions. Wrapper around `useTransitionStatus`.\n * @see https://floating-ui.com/docs/useTransition#usetransitionstyles\n */\nfunction useTransitionStyles(context, _temp2) {\n let {\n initial: unstable_initial = {\n opacity: 0\n },\n open: unstable_open,\n close: unstable_close,\n common: unstable_common,\n duration = 250\n } = _temp2 === void 0 ? {} : _temp2;\n const placement = context.placement;\n const side = placement.split('-')[0];\n const [styles, setStyles] = React.useState({});\n const {\n isMounted,\n status\n } = useTransitionStatus(context, {\n duration\n });\n const initialRef = useLatestRef(unstable_initial);\n const openRef = useLatestRef(unstable_open);\n const closeRef = useLatestRef(unstable_close);\n const commonRef = useLatestRef(unstable_common);\n const isNumberDuration = typeof duration === 'number';\n const openDuration = (isNumberDuration ? duration : duration.open) || 0;\n const closeDuration = (isNumberDuration ? duration : duration.close) || 0;\n index(() => {\n const fnArgs = {\n side,\n placement\n };\n const initial = initialRef.current;\n const close = closeRef.current;\n const open = openRef.current;\n const common = commonRef.current;\n const initialStyles = typeof initial === 'function' ? initial(fnArgs) : initial;\n const closeStyles = typeof close === 'function' ? close(fnArgs) : close;\n const commonStyles = typeof common === 'function' ? common(fnArgs) : common;\n const openStyles = (typeof open === 'function' ? open(fnArgs) : open) || Object.keys(initialStyles).reduce((acc, key) => {\n acc[key] = '';\n return acc;\n }, {});\n if (status === 'initial' || status === 'unmounted') {\n setStyles(styles => ({\n transitionProperty: styles.transitionProperty,\n ...commonStyles,\n ...initialStyles\n }));\n }\n if (status === 'open') {\n setStyles({\n transitionProperty: Object.keys(openStyles).map(camelCaseToKebabCase).join(','),\n transitionDuration: openDuration + \"ms\",\n ...commonStyles,\n ...openStyles\n });\n }\n if (status === 'close') {\n const styles = closeStyles || initialStyles;\n setStyles({\n transitionProperty: Object.keys(styles).map(camelCaseToKebabCase).join(','),\n transitionDuration: closeDuration + \"ms\",\n ...commonStyles,\n ...styles\n });\n }\n }, [side, placement, closeDuration, closeRef, initialRef, openRef, commonRef, openDuration, status]);\n return {\n isMounted,\n styles\n };\n}\n\n/**\n * Provides a matching callback that can be used to focus an item as the user\n * types, often used in tandem with `useListNavigation()`.\n * @see https://floating-ui.com/docs/useTypeahead\n */\nconst useTypeahead = function (_ref, _temp) {\n var _ref2;\n let {\n open,\n dataRef,\n refs\n } = _ref;\n let {\n listRef,\n activeIndex,\n onMatch: unstable_onMatch = () => {},\n enabled = true,\n findMatch = null,\n resetMs = 1000,\n ignoreKeys = [],\n selectedIndex = null\n } = _temp === void 0 ? {\n listRef: {\n current: []\n },\n activeIndex: null\n } : _temp;\n const timeoutIdRef = React.useRef();\n const stringRef = React.useRef('');\n const prevIndexRef = React.useRef((_ref2 = selectedIndex != null ? selectedIndex : activeIndex) != null ? _ref2 : -1);\n const matchIndexRef = React.useRef(null);\n const onMatch = useEvent(unstable_onMatch);\n const findMatchRef = useLatestRef(findMatch);\n const ignoreKeysRef = useLatestRef(ignoreKeys);\n index(() => {\n if (open) {\n clearTimeout(timeoutIdRef.current);\n matchIndexRef.current = null;\n stringRef.current = '';\n }\n }, [open]);\n index(() => {\n // Sync arrow key navigation but not typeahead navigation.\n if (open && stringRef.current === '') {\n var _ref3;\n prevIndexRef.current = (_ref3 = selectedIndex != null ? selectedIndex : activeIndex) != null ? _ref3 : -1;\n }\n }, [open, selectedIndex, activeIndex]);\n return React.useMemo(() => {\n if (!enabled) {\n return {};\n }\n function onKeyDown(event) {\n var _refs$floating$curren;\n // Correctly scope nested non-portalled floating elements. Since the nested\n // floating element is inside of the another, we find the closest role\n // that indicates the floating element scope.\n const target = getTarget(event.nativeEvent);\n if (isElement(target) && (activeElement$1(getDocument(target)) !== event.currentTarget ? (_refs$floating$curren = refs.floating.current) != null && _refs$floating$curren.contains(target) ? target.closest('[role=\"dialog\"],[role=\"menu\"],[role=\"listbox\"],[role=\"tree\"],[role=\"grid\"]') !== event.currentTarget : false : !event.currentTarget.contains(target))) {\n return;\n }\n if (stringRef.current.length > 0 && stringRef.current[0] !== ' ') {\n dataRef.current.typing = true;\n if (event.key === ' ') {\n stopEvent(event);\n }\n }\n const listContent = listRef.current;\n if (listContent == null || ignoreKeysRef.current.includes(event.key) ||\n // Character key.\n event.key.length !== 1 ||\n // Modifier key.\n event.ctrlKey || event.metaKey || event.altKey) {\n return;\n }\n\n // Bail out if the list contains a word like \"llama\" or \"aaron\". TODO:\n // allow it in this case, too.\n const allowRapidSuccessionOfFirstLetter = listContent.every(text => {\n var _text$, _text$2;\n return text ? ((_text$ = text[0]) == null ? void 0 : _text$.toLocaleLowerCase()) !== ((_text$2 = text[1]) == null ? void 0 : _text$2.toLocaleLowerCase()) : true;\n });\n\n // Allows the user to cycle through items that start with the same letter\n // in rapid succession.\n if (allowRapidSuccessionOfFirstLetter && stringRef.current === event.key) {\n stringRef.current = '';\n prevIndexRef.current = matchIndexRef.current;\n }\n stringRef.current += event.key;\n clearTimeout(timeoutIdRef.current);\n timeoutIdRef.current = setTimeout(() => {\n stringRef.current = '';\n prevIndexRef.current = matchIndexRef.current;\n dataRef.current.typing = false;\n }, resetMs);\n const prevIndex = prevIndexRef.current;\n const orderedList = [...listContent.slice((prevIndex || 0) + 1), ...listContent.slice(0, (prevIndex || 0) + 1)];\n const str = findMatchRef.current ? findMatchRef.current(orderedList, stringRef.current) : orderedList.find(text => (text == null ? void 0 : text.toLocaleLowerCase().indexOf(stringRef.current.toLocaleLowerCase())) === 0);\n const index = str ? listContent.indexOf(str) : -1;\n if (index !== -1) {\n onMatch(index);\n matchIndexRef.current = index;\n }\n }\n return {\n reference: {\n onKeyDown\n },\n floating: {\n onKeyDown\n }\n };\n }, [enabled, dataRef, listRef, resetMs, ignoreKeysRef, findMatchRef, onMatch, refs]);\n};\n\nfunction getArgsWithCustomFloatingHeight(state, height) {\n return {\n ...state,\n rects: {\n ...state.rects,\n floating: {\n ...state.rects.floating,\n height\n }\n }\n };\n}\n/**\n * Positions the floating element such that an inner element inside\n * of it is anchored to the reference element.\n * @see https://floating-ui.com/docs/inner\n */\nconst inner = props => ({\n name: 'inner',\n options: props,\n async fn(state) {\n const {\n listRef,\n overflowRef,\n onFallbackChange,\n offset: innerOffset = 0,\n index = 0,\n minItemsVisible = 4,\n referenceOverflowThreshold = 0,\n scrollRef,\n ...detectOverflowOptions\n } = props;\n const {\n rects,\n elements: {\n floating\n }\n } = state;\n const item = listRef.current[index];\n if (process.env.NODE_ENV !== \"production\") {\n if (!state.placement.startsWith('bottom')) {\n console.warn(['Floating UI: `placement` side must be \"bottom\" when using the', '`inner` middleware.'].join(' '));\n }\n }\n if (!item) {\n return {};\n }\n const nextArgs = {\n ...state,\n ...(await offset(-item.offsetTop - rects.reference.height / 2 - item.offsetHeight / 2 - innerOffset).fn(state))\n };\n const el = (scrollRef == null ? void 0 : scrollRef.current) || floating;\n const overflow = await detectOverflow(getArgsWithCustomFloatingHeight(nextArgs, el.scrollHeight), detectOverflowOptions);\n const refOverflow = await detectOverflow(nextArgs, {\n ...detectOverflowOptions,\n elementContext: 'reference'\n });\n const diffY = Math.max(0, overflow.top);\n const nextY = nextArgs.y + diffY;\n const maxHeight = Math.max(0, el.scrollHeight - diffY - Math.max(0, overflow.bottom));\n el.style.maxHeight = maxHeight + \"px\";\n el.scrollTop = diffY;\n\n // There is not enough space, fallback to standard anchored positioning\n if (onFallbackChange) {\n if (el.offsetHeight < item.offsetHeight * Math.min(minItemsVisible, listRef.current.length - 1) - 1 || refOverflow.top >= -referenceOverflowThreshold || refOverflow.bottom >= -referenceOverflowThreshold) {\n flushSync(() => onFallbackChange(true));\n } else {\n flushSync(() => onFallbackChange(false));\n }\n }\n if (overflowRef) {\n overflowRef.current = await detectOverflow(getArgsWithCustomFloatingHeight({\n ...nextArgs,\n y: nextY\n }, el.offsetHeight), detectOverflowOptions);\n }\n return {\n y: nextY\n };\n }\n});\n/**\n * Changes the `inner` middleware's `offset` upon a `wheel` event to\n * expand the floating element's height, revealing more list items.\n * @see https://floating-ui.com/docs/inner\n */\nconst useInnerOffset = (_ref, _ref2) => {\n let {\n open,\n elements\n } = _ref;\n let {\n enabled = true,\n overflowRef,\n scrollRef,\n onChange: unstable_onChange\n } = _ref2;\n const onChange = useEvent(unstable_onChange);\n const controlledScrollingRef = React.useRef(false);\n const prevScrollTopRef = React.useRef(null);\n const initialOverflowRef = React.useRef(null);\n React.useEffect(() => {\n if (!enabled) {\n return;\n }\n function onWheel(e) {\n if (e.ctrlKey || !el || overflowRef.current == null) {\n return;\n }\n const dY = e.deltaY;\n const isAtTop = overflowRef.current.top >= -0.5;\n const isAtBottom = overflowRef.current.bottom >= -0.5;\n const remainingScroll = el.scrollHeight - el.clientHeight;\n const sign = dY < 0 ? -1 : 1;\n const method = dY < 0 ? 'max' : 'min';\n if (el.scrollHeight <= el.clientHeight) {\n return;\n }\n if (!isAtTop && dY > 0 || !isAtBottom && dY < 0) {\n e.preventDefault();\n flushSync(() => {\n onChange(d => d + Math[method](dY, remainingScroll * sign));\n });\n } else if (/firefox/i.test(getUserAgent())) {\n // Needed to propagate scrolling during momentum scrolling phase once\n // it gets limited by the boundary. UX improvement, not critical.\n el.scrollTop += dY;\n }\n }\n const el = (scrollRef == null ? void 0 : scrollRef.current) || elements.floating;\n if (open && el) {\n el.addEventListener('wheel', onWheel);\n\n // Wait for the position to be ready.\n requestAnimationFrame(() => {\n prevScrollTopRef.current = el.scrollTop;\n if (overflowRef.current != null) {\n initialOverflowRef.current = {\n ...overflowRef.current\n };\n }\n });\n return () => {\n prevScrollTopRef.current = null;\n initialOverflowRef.current = null;\n el.removeEventListener('wheel', onWheel);\n };\n }\n }, [enabled, open, elements.floating, overflowRef, scrollRef, onChange]);\n return React.useMemo(() => {\n if (!enabled) {\n return {};\n }\n return {\n floating: {\n onKeyDown() {\n controlledScrollingRef.current = true;\n },\n onWheel() {\n controlledScrollingRef.current = false;\n },\n onPointerMove() {\n controlledScrollingRef.current = false;\n },\n onScroll() {\n const el = (scrollRef == null ? void 0 : scrollRef.current) || elements.floating;\n if (!overflowRef.current || !el || !controlledScrollingRef.current) {\n return;\n }\n if (prevScrollTopRef.current !== null) {\n const scrollDiff = el.scrollTop - prevScrollTopRef.current;\n if (overflowRef.current.bottom < -0.5 && scrollDiff < -1 || overflowRef.current.top < -0.5 && scrollDiff > 1) {\n flushSync(() => onChange(d => d + scrollDiff));\n }\n }\n\n // [Firefox] Wait for the height change to have been applied.\n requestAnimationFrame(() => {\n prevScrollTopRef.current = el.scrollTop;\n });\n }\n }\n };\n }, [enabled, overflowRef, elements.floating, scrollRef, onChange]);\n};\n\nfunction isPointInPolygon(point, polygon) {\n const [x, y] = point;\n let isInside = false;\n const length = polygon.length;\n for (let i = 0, j = length - 1; i < length; j = i++) {\n const [xi, yi] = polygon[i] || [0, 0];\n const [xj, yj] = polygon[j] || [0, 0];\n const intersect = yi >= y !== yj >= y && x <= (xj - xi) * (y - yi) / (yj - yi) + xi;\n if (intersect) {\n isInside = !isInside;\n }\n }\n return isInside;\n}\nfunction isInside(point, rect) {\n return point[0] >= rect.x && point[0] <= rect.x + rect.width && point[1] >= rect.y && point[1] <= rect.y + rect.height;\n}\nfunction safePolygon(_temp) {\n let {\n restMs = 0,\n buffer = 0.5,\n blockPointerEvents = false\n } = _temp === void 0 ? {} : _temp;\n let timeoutId;\n let isInsideRect = false;\n let hasLanded = false;\n const fn = _ref => {\n let {\n x,\n y,\n placement,\n elements,\n onClose,\n nodeId,\n tree\n } = _ref;\n return function onMouseMove(event) {\n function close() {\n clearTimeout(timeoutId);\n onClose();\n }\n clearTimeout(timeoutId);\n if (!elements.domReference || !elements.floating || placement == null || x == null || y == null) {\n return;\n }\n const {\n clientX,\n clientY\n } = event;\n const clientPoint = [clientX, clientY];\n const target = getTarget(event);\n const isLeave = event.type === 'mouseleave';\n const isOverFloatingEl = contains(elements.floating, target);\n const isOverReferenceEl = contains(elements.domReference, target);\n const refRect = elements.domReference.getBoundingClientRect();\n const rect = elements.floating.getBoundingClientRect();\n const side = placement.split('-')[0];\n const cursorLeaveFromRight = x > rect.right - rect.width / 2;\n const cursorLeaveFromBottom = y > rect.bottom - rect.height / 2;\n const isOverReferenceRect = isInside(clientPoint, refRect);\n if (isOverFloatingEl) {\n hasLanded = true;\n if (!isLeave) {\n return;\n }\n }\n if (isOverReferenceEl) {\n hasLanded = false;\n }\n if (isOverReferenceEl && !isLeave) {\n hasLanded = true;\n return;\n }\n\n // Prevent overlapping floating element from being stuck in an open-close\n // loop: https://github.com/floating-ui/floating-ui/issues/1910\n if (isLeave && isElement(event.relatedTarget) && contains(elements.floating, event.relatedTarget)) {\n return;\n }\n\n // If any nested child is open, abort.\n if (tree && getChildren(tree.nodesRef.current, nodeId).some(_ref2 => {\n let {\n context\n } = _ref2;\n return context == null ? void 0 : context.open;\n })) {\n return;\n }\n\n // If the pointer is leaving from the opposite side, the \"buffer\" logic\n // creates a point where the floating element remains open, but should be\n // ignored.\n // A constant of 1 handles floating point rounding errors.\n if (side === 'top' && y >= refRect.bottom - 1 || side === 'bottom' && y <= refRect.top + 1 || side === 'left' && x >= refRect.right - 1 || side === 'right' && x <= refRect.left + 1) {\n return close();\n }\n\n // Ignore when the cursor is within the rectangular trough between the\n // two elements. Since the triangle is created from the cursor point,\n // which can start beyond the ref element's edge, traversing back and\n // forth from the ref to the floating element can cause it to close. This\n // ensures it always remains open in that case.\n let rectPoly = [];\n switch (side) {\n case 'top':\n rectPoly = [[rect.left, refRect.top + 1], [rect.left, rect.bottom - 1], [rect.right, rect.bottom - 1], [rect.right, refRect.top + 1]];\n isInsideRect = clientX >= rect.left && clientX <= rect.right && clientY >= rect.top && clientY <= refRect.top + 1;\n break;\n case 'bottom':\n rectPoly = [[rect.left, rect.top + 1], [rect.left, refRect.bottom - 1], [rect.right, refRect.bottom - 1], [rect.right, rect.top + 1]];\n isInsideRect = clientX >= rect.left && clientX <= rect.right && clientY >= refRect.bottom - 1 && clientY <= rect.bottom;\n break;\n case 'left':\n rectPoly = [[rect.right - 1, rect.bottom], [rect.right - 1, rect.top], [refRect.left + 1, rect.top], [refRect.left + 1, rect.bottom]];\n isInsideRect = clientX >= rect.left && clientX <= refRect.left + 1 && clientY >= rect.top && clientY <= rect.bottom;\n break;\n case 'right':\n rectPoly = [[refRect.right - 1, rect.bottom], [refRect.right - 1, rect.top], [rect.left + 1, rect.top], [rect.left + 1, rect.bottom]];\n isInsideRect = clientX >= refRect.right - 1 && clientX <= rect.right && clientY >= rect.top && clientY <= rect.bottom;\n break;\n }\n function getPolygon(_ref3) {\n let [x, y] = _ref3;\n const isFloatingWider = rect.width > refRect.width;\n const isFloatingTaller = rect.height > refRect.height;\n switch (side) {\n case 'top':\n {\n const cursorPointOne = [isFloatingWider ? x + buffer / 2 : cursorLeaveFromRight ? x + buffer * 4 : x - buffer * 4, y + buffer + 1];\n const cursorPointTwo = [isFloatingWider ? x - buffer / 2 : cursorLeaveFromRight ? x + buffer * 4 : x - buffer * 4, y + buffer + 1];\n const commonPoints = [[rect.left, cursorLeaveFromRight ? rect.bottom - buffer : isFloatingWider ? rect.bottom - buffer : rect.top], [rect.right, cursorLeaveFromRight ? isFloatingWider ? rect.bottom - buffer : rect.top : rect.bottom - buffer]];\n return [cursorPointOne, cursorPointTwo, ...commonPoints];\n }\n case 'bottom':\n {\n const cursorPointOne = [isFloatingWider ? x + buffer / 2 : cursorLeaveFromRight ? x + buffer * 4 : x - buffer * 4, y - buffer];\n const cursorPointTwo = [isFloatingWider ? x - buffer / 2 : cursorLeaveFromRight ? x + buffer * 4 : x - buffer * 4, y - buffer];\n const commonPoints = [[rect.left, cursorLeaveFromRight ? rect.top + buffer : isFloatingWider ? rect.top + buffer : rect.bottom], [rect.right, cursorLeaveFromRight ? isFloatingWider ? rect.top + buffer : rect.bottom : rect.top + buffer]];\n return [cursorPointOne, cursorPointTwo, ...commonPoints];\n }\n case 'left':\n {\n const cursorPointOne = [x + buffer + 1, isFloatingTaller ? y + buffer / 2 : cursorLeaveFromBottom ? y + buffer * 4 : y - buffer * 4];\n const cursorPointTwo = [x + buffer + 1, isFloatingTaller ? y - buffer / 2 : cursorLeaveFromBottom ? y + buffer * 4 : y - buffer * 4];\n const commonPoints = [[cursorLeaveFromBottom ? rect.right - buffer : isFloatingTaller ? rect.right - buffer : rect.left, rect.top], [cursorLeaveFromBottom ? isFloatingTaller ? rect.right - buffer : rect.left : rect.right - buffer, rect.bottom]];\n return [...commonPoints, cursorPointOne, cursorPointTwo];\n }\n case 'right':\n {\n const cursorPointOne = [x - buffer, isFloatingTaller ? y + buffer / 2 : cursorLeaveFromBottom ? y + buffer * 4 : y - buffer * 4];\n const cursorPointTwo = [x - buffer, isFloatingTaller ? y - buffer / 2 : cursorLeaveFromBottom ? y + buffer * 4 : y - buffer * 4];\n const commonPoints = [[cursorLeaveFromBottom ? rect.left + buffer : isFloatingTaller ? rect.left + buffer : rect.right, rect.top], [cursorLeaveFromBottom ? isFloatingTaller ? rect.left + buffer : rect.right : rect.left + buffer, rect.bottom]];\n return [cursorPointOne, cursorPointTwo, ...commonPoints];\n }\n }\n }\n const poly = isInsideRect ? rectPoly : getPolygon([x, y]);\n if (isInsideRect) {\n return;\n } else if (hasLanded && !isOverReferenceRect) {\n return close();\n }\n if (!isPointInPolygon([clientX, clientY], poly)) {\n close();\n } else if (restMs && !hasLanded) {\n timeoutId = setTimeout(close, restMs);\n }\n };\n };\n fn.__options = {\n blockPointerEvents\n };\n return fn;\n}\n\n/**\n * Provides data to position a floating element and context to add interactions.\n * @see https://floating-ui.com/docs/react\n */\nfunction useFloating(options) {\n if (options === void 0) {\n options = {};\n }\n const {\n open = false,\n onOpenChange: unstable_onOpenChange,\n nodeId\n } = options;\n const position = useFloating$1(options);\n const tree = useFloatingTree();\n const domReferenceRef = React.useRef(null);\n const dataRef = React.useRef({});\n const events = React.useState(() => createPubSub())[0];\n const [domReference, setDomReference] = React.useState(null);\n const setPositionReference = React.useCallback(node => {\n const positionReference = isElement(node) ? {\n getBoundingClientRect: () => node.getBoundingClientRect(),\n contextElement: node\n } : node;\n position.refs.setReference(positionReference);\n }, [position.refs]);\n const setReference = React.useCallback(node => {\n if (isElement(node) || node === null) {\n domReferenceRef.current = node;\n setDomReference(node);\n }\n\n // Backwards-compatibility for passing a virtual element to `reference`\n // after it has set the DOM reference.\n if (isElement(position.refs.reference.current) || position.refs.reference.current === null ||\n // Don't allow setting virtual elements using the old technique back to\n // `null` to support `positionReference` + an unstable `reference`\n // callback ref.\n node !== null && !isElement(node)) {\n position.refs.setReference(node);\n }\n }, [position.refs]);\n const refs = React.useMemo(() => ({\n ...position.refs,\n setReference,\n setPositionReference,\n domReference: domReferenceRef\n }), [position.refs, setReference, setPositionReference]);\n const elements = React.useMemo(() => ({\n ...position.elements,\n domReference: domReference\n }), [position.elements, domReference]);\n const onOpenChange = useEvent(unstable_onOpenChange);\n const context = React.useMemo(() => ({\n ...position,\n refs,\n elements,\n dataRef,\n nodeId,\n events,\n open,\n onOpenChange\n }), [position, nodeId, events, open, onOpenChange, refs, elements]);\n index(() => {\n const node = tree == null ? void 0 : tree.nodesRef.current.find(node => node.id === nodeId);\n if (node) {\n node.context = context;\n }\n });\n return React.useMemo(() => ({\n ...position,\n context,\n refs,\n reference: setReference,\n positionReference: setPositionReference\n }), [position, refs, context, setReference, setPositionReference]);\n}\n\nfunction mergeProps(userProps, propsList, elementKey) {\n const map = new Map();\n return {\n ...(elementKey === 'floating' && {\n tabIndex: -1\n }),\n ...userProps,\n ...propsList.map(value => value ? value[elementKey] : null).concat(userProps).reduce((acc, props) => {\n if (!props) {\n return acc;\n }\n Object.entries(props).forEach(_ref => {\n let [key, value] = _ref;\n if (key.indexOf('on') === 0) {\n if (!map.has(key)) {\n map.set(key, []);\n }\n if (typeof value === 'function') {\n var _map$get;\n (_map$get = map.get(key)) == null ? void 0 : _map$get.push(value);\n acc[key] = function () {\n var _map$get2;\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n (_map$get2 = map.get(key)) == null ? void 0 : _map$get2.forEach(fn => fn(...args));\n };\n }\n } else {\n acc[key] = value;\n }\n });\n return acc;\n }, {})\n };\n}\nconst useInteractions = function (propsList) {\n if (propsList === void 0) {\n propsList = [];\n }\n // The dependencies are a dynamic array, so we can't use the linter's\n // suggestion to add it to the deps array.\n const deps = propsList;\n const getReferenceProps = React.useCallback(userProps => mergeProps(userProps, propsList, 'reference'),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n deps);\n const getFloatingProps = React.useCallback(userProps => mergeProps(userProps, propsList, 'floating'),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n deps);\n const getItemProps = React.useCallback(userProps => mergeProps(userProps, propsList, 'item'),\n // Granularly check for `item` changes, because the `getItemProps` getter\n // should be as referentially stable as possible since it may be passed as\n // a prop to many components. All `item` key values must therefore be\n // memoized.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n propsList.map(key => key == null ? void 0 : key.item));\n return React.useMemo(() => ({\n getReferenceProps,\n getFloatingProps,\n getItemProps\n }), [getReferenceProps, getFloatingProps, getItemProps]);\n};\n\nexport { FloatingDelayGroup, FloatingFocusManager, FloatingNode, FloatingOverlay, FloatingPortal, FloatingTree, inner, safePolygon, useClick, useDelayGroup, useDelayGroupContext, useDismiss, useFloating, useFloatingNodeId, useFloatingParentNodeId, useFloatingPortalNode, useFloatingTree, useFocus, useHover, useId, useInnerOffset, useInteractions, useListNavigation, useMergeRefs, useRole, useTransitionStatus, useTransitionStyles, useTypeahead };\n","import { MantineTheme, CSSObject, getSize, getBreakpointValue } from '@mantine/styles';\n\nfunction getSortedKeys(value: Record
, theme: MantineTheme) {\n const sorted = Object.keys(value)\n .filter((breakpoint) => breakpoint !== 'base')\n .sort(\n (a, b) =>\n getBreakpointValue(getSize({ size: a, sizes: theme.breakpoints })) -\n getBreakpointValue(getSize({ size: b, sizes: theme.breakpoints }))\n );\n return 'base' in value ? ['base', ...sorted] : sorted;\n}\n\nexport type StyleProperty = string | string[];\n\ninterface GetResponsiveStyles {\n value: any;\n theme: MantineTheme;\n getValue: (value: any, theme: MantineTheme) => any;\n property: StyleProperty;\n}\n\nexport function getResponsiveValue({ value, theme, getValue, property }: GetResponsiveStyles) {\n if (value == null) {\n return undefined;\n }\n\n if (typeof value === 'object') {\n const result = getSortedKeys(value, theme).reduce((acc, breakpointKey) => {\n if (breakpointKey === 'base' && value.base !== undefined) {\n const baseValue = getValue(value.base, theme);\n\n if (Array.isArray(property)) {\n property.forEach((prop) => {\n acc[prop] = baseValue;\n });\n return acc;\n }\n\n acc[property] = baseValue;\n return acc;\n }\n\n const breakpointValue = getValue(value[breakpointKey], theme);\n\n if (Array.isArray(property)) {\n acc[theme.fn.largerThan(breakpointKey)] = {};\n property.forEach((prop) => {\n acc[theme.fn.largerThan(breakpointKey)][prop] = breakpointValue;\n });\n\n return acc;\n }\n\n acc[theme.fn.largerThan(breakpointKey)] = {\n [property]: breakpointValue,\n };\n\n return acc;\n }, {});\n\n return result;\n }\n\n const cssValue = getValue(value, theme);\n\n if (Array.isArray(property)) {\n return property.reduce((acc, prop) => {\n acc[prop] = cssValue;\n return acc;\n }, {});\n }\n\n return { [property]: cssValue };\n}\n","import { MantineTheme, getSize } from '@mantine/styles';\n\nconst NEGATIVE_VALUES = ['-xs', '-sm', '-md', '-lg', '-xl'];\n\nexport function getSpacingValue(size: string | number, theme: MantineTheme) {\n if (NEGATIVE_VALUES.includes(size as string)) {\n return `calc(${getSize({\n size: (size as string).replace('-', ''),\n sizes: theme.spacing,\n })} * -1)`;\n }\n\n return getSize({ size, sizes: theme.spacing });\n}\n","import { getColorValue } from './get-color-value';\nimport { getSizeValue, identity } from './get-default-value';\nimport { getFontSizeValue } from './get-font-size-value';\nimport { getSpacingValue } from './get-spacing-value';\n\nexport const valueGetters = {\n identity,\n color: getColorValue,\n size: getSizeValue,\n fontSize: getFontSizeValue,\n spacing: getSpacingValue,\n};\n\nexport type SystemValueType = keyof typeof valueGetters;\n","import { rem } from '@mantine/styles';\n\nexport function getSizeValue(value: T) {\n return rem(value);\n}\n\nexport function identity(value: T) {\n return value;\n}\n","import { MantineTheme } from '@mantine/styles';\n\nexport function getColorValue(color: any, theme: MantineTheme): string {\n if (color === 'dimmed') {\n return theme.colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[6];\n }\n\n return theme.fn.variant({ variant: 'filled', color, primaryFallback: false }).background;\n}\n","import { MantineTheme, getSize } from '@mantine/styles';\n\nexport function getFontSizeValue(size: any, theme: MantineTheme) {\n return getSize({ size, sizes: theme.fontSizes });\n}\n","import type { StyleProperty } from '../get-responsive-value/get-responsive-value';\nimport type { SystemValueType } from '../value-getters/value-getters';\n\nexport interface SystemPropData {\n type: SystemValueType;\n property: StyleProperty;\n}\n\nexport const SYSTEM_PROPS: Record = {\n m: { type: 'spacing', property: 'margin' },\n mt: { type: 'spacing', property: 'marginTop' },\n mb: { type: 'spacing', property: 'marginBottom' },\n ml: { type: 'spacing', property: 'marginLeft' },\n mr: { type: 'spacing', property: 'marginRight' },\n mx: { type: 'spacing', property: ['marginRight', 'marginLeft'] },\n my: { type: 'spacing', property: ['marginTop', 'marginBottom'] },\n\n p: { type: 'spacing', property: 'padding' },\n pt: { type: 'spacing', property: 'paddingTop' },\n pb: { type: 'spacing', property: 'paddingBottom' },\n pl: { type: 'spacing', property: 'paddingLeft' },\n pr: { type: 'spacing', property: 'paddingRight' },\n px: { type: 'spacing', property: ['paddingRight', 'paddingLeft'] },\n py: { type: 'spacing', property: ['paddingTop', 'paddingBottom'] },\n\n bg: { type: 'color', property: 'background' },\n c: { type: 'color', property: 'color' },\n opacity: { type: 'identity', property: 'opacity' },\n\n ff: { type: 'identity', property: 'fontFamily' },\n fz: { type: 'fontSize', property: 'fontSize' },\n fw: { type: 'identity', property: 'fontWeight' },\n lts: { type: 'size', property: 'letterSpacing' },\n ta: { type: 'identity', property: 'textAlign' },\n lh: { type: 'identity', property: 'lineHeight' },\n fs: { type: 'identity', property: 'fontStyle' },\n tt: { type: 'identity', property: 'textTransform' },\n td: { type: 'identity', property: 'textDecoration' },\n\n w: { type: 'spacing', property: 'width' },\n miw: { type: 'spacing', property: 'minWidth' },\n maw: { type: 'spacing', property: 'maxWidth' },\n h: { type: 'spacing', property: 'height' },\n mih: { type: 'spacing', property: 'minHeight' },\n mah: { type: 'spacing', property: 'maxHeight' },\n\n bgsz: { type: 'size', property: 'backgroundSize' },\n bgp: { type: 'identity', property: 'backgroundPosition' },\n bgr: { type: 'identity', property: 'backgroundRepeat' },\n bga: { type: 'identity', property: 'backgroundAttachment' },\n\n pos: { type: 'identity', property: 'position' },\n top: { type: 'identity', property: 'top' },\n left: { type: 'size', property: 'left' },\n bottom: { type: 'size', property: 'bottom' },\n right: { type: 'size', property: 'right' },\n inset: { type: 'size', property: 'inset' },\n\n display: { type: 'identity', property: 'display' },\n};\n","import { MantineTheme } from '@mantine/styles';\nimport { getResponsiveValue } from '../get-responsive-value/get-responsive-value';\nimport { valueGetters } from '../value-getters/value-getters';\nimport { SYSTEM_PROPS } from '../system-props/system-props';\n\nexport function getSystemStyles(\n systemStyles: Record,\n theme: MantineTheme,\n systemProps = SYSTEM_PROPS\n) {\n const styles = Object.keys(systemProps).reduce((acc, systemProp) => {\n if (systemProp in systemStyles && systemStyles[systemProp] !== undefined) {\n acc.push(\n getResponsiveValue({\n value: systemStyles[systemProp],\n getValue: valueGetters[systemProps[systemProp].type],\n property: systemProps[systemProp].property,\n theme,\n })\n );\n }\n\n return acc;\n }, []);\n\n return styles.reduce((acc, stylesPartial) => {\n Object.keys(stylesPartial).forEach((property) => {\n if (typeof stylesPartial[property] === 'object' && stylesPartial[property] !== null) {\n if (!(property in acc)) {\n acc[property] = stylesPartial[property];\n } else {\n acc[property] = { ...acc[property], ...stylesPartial[property] };\n }\n } else {\n acc[property] = stylesPartial[property];\n }\n });\n\n return acc;\n }, {});\n}\n","import {\n MantineStyleSystemProps,\n MantineTheme,\n Sx,\n useCss,\n useMantineTheme,\n} from '@mantine/styles';\nimport { getSystemStyles } from '../style-system-props/get-system-styles/get-system-styles';\n\nfunction extractSx(sx: Sx, theme: MantineTheme) {\n return typeof sx === 'function' ? sx(theme) : sx;\n}\n\nexport function useSx(sx: Sx | Sx[], systemProps: MantineStyleSystemProps, className: string) {\n const theme = useMantineTheme();\n const { css, cx } = useCss();\n\n if (Array.isArray(sx)) {\n return cx(\n className,\n css(getSystemStyles(systemProps, theme)),\n sx.map((partial) => css(extractSx(partial, theme)))\n );\n }\n\n return cx(className, css(extractSx(sx, theme)), css(getSystemStyles(systemProps, theme)));\n}\n","import React, { forwardRef } from 'react';\nimport { DefaultProps } from '@mantine/styles';\nimport { createPolymorphicComponent } from '@mantine/utils';\nimport { extractSystemStyles } from './style-system-props/extract-system-styles/extract-system-styles';\nimport { useSx } from './use-sx/use-sx';\n\nexport interface BoxProps extends DefaultProps {\n children?: React.ReactNode;\n}\n\nexport const _Box = forwardRef(\n ({ className, component, style, sx, ...others }, ref) => {\n const { systemStyles, rest } = extractSystemStyles(others);\n const Element = component || 'div';\n return (\n \n );\n }\n);\n\n_Box.displayName = '@mantine/core/Box';\n\nexport const Box = createPolymorphicComponent<'div', BoxProps>(_Box);\n","import { MantineStyleSystemProps, filterProps } from '@mantine/styles';\n\nexport function extractSystemStyles>(\n others: MantineStyleSystemProps & T\n): { systemStyles: MantineStyleSystemProps; rest: T } {\n const {\n m,\n mx,\n my,\n mt,\n mb,\n ml,\n mr,\n p,\n px,\n py,\n pt,\n pb,\n pl,\n pr,\n bg,\n c,\n opacity,\n ff,\n fz,\n fw,\n lts,\n ta,\n lh,\n fs,\n tt,\n td,\n w,\n miw,\n maw,\n h,\n mih,\n mah,\n bgsz,\n bgp,\n bgr,\n bga,\n pos,\n top,\n left,\n bottom,\n right,\n inset,\n display,\n ...rest\n } = others;\n const systemStyles = filterProps({\n m,\n mx,\n my,\n mt,\n mb,\n ml,\n mr,\n p,\n px,\n py,\n pt,\n pb,\n pl,\n pr,\n bg,\n c,\n opacity,\n ff,\n fz,\n fw,\n lts,\n ta,\n lh,\n fs,\n tt,\n td,\n w,\n miw,\n maw,\n h,\n mih,\n mah,\n bgsz,\n bgp,\n bgr,\n bga,\n pos,\n top,\n left,\n bottom,\n right,\n inset,\n display,\n });\n\n return { systemStyles, rest: rest as unknown as T };\n}\n","import {\n createStyles,\n MantineNumberSize,\n MantineColor,\n MantineTheme,\n MantineGradient,\n CSSObject,\n rem,\n getSize,\n} from '@mantine/styles';\n\nexport const ACTION_ICON_VARIANTS = [\n 'subtle',\n 'filled',\n 'outline',\n 'light',\n 'default',\n 'transparent',\n 'gradient',\n];\n\nexport interface ActionIconStylesParams {\n color: MantineColor;\n radius: MantineNumberSize;\n gradient: MantineGradient;\n}\n\nexport const sizes = {\n xs: rem(18),\n sm: rem(22),\n md: rem(28),\n lg: rem(34),\n xl: rem(44),\n};\n\ninterface GetVariantStyles {\n variant: string;\n theme: MantineTheme;\n color: MantineColor;\n gradient: MantineGradient;\n}\n\nfunction getVariantStyles({ variant, theme, color, gradient }: GetVariantStyles): CSSObject {\n const colors = theme.fn.variant({ color, variant, gradient });\n\n if (variant === 'gradient') {\n return {\n border: 0,\n backgroundImage: colors.background,\n color: colors.color,\n\n '&:hover': theme.fn.hover({\n backgroundSize: '200%',\n }),\n };\n }\n\n if (ACTION_ICON_VARIANTS.includes(variant)) {\n return {\n border: `${rem(1)} solid ${colors.border}`,\n backgroundColor: colors.background,\n color: colors.color,\n ...theme.fn.hover({\n backgroundColor: colors.hover,\n }),\n };\n }\n\n return null;\n}\n\nexport default createStyles(\n (theme, { radius, color, gradient }: ActionIconStylesParams, { variant, size }) => ({\n root: {\n position: 'relative',\n borderRadius: theme.fn.radius(radius),\n padding: 0,\n lineHeight: 1,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n height: getSize({ size, sizes }),\n minHeight: getSize({ size, sizes }),\n width: getSize({ size, sizes }),\n minWidth: getSize({ size, sizes }),\n ...getVariantStyles({ variant, theme, color, gradient }),\n\n '&:active': theme.activeStyles,\n\n '& [data-action-icon-loader]': {\n maxWidth: '70%',\n },\n\n '&:disabled, &[data-disabled]': {\n color: theme.colors.gray[theme.colorScheme === 'dark' ? 6 : 4],\n cursor: 'not-allowed',\n backgroundColor:\n variant === 'transparent'\n ? undefined\n : theme.fn.themeColor('gray', theme.colorScheme === 'dark' ? 8 : 1),\n borderColor:\n variant === 'transparent'\n ? undefined\n : theme.fn.themeColor('gray', theme.colorScheme === 'dark' ? 8 : 1),\n backgroundImage: 'none',\n pointerEvents: 'none',\n\n '&:active': {\n transform: 'none',\n },\n },\n\n '&[data-loading]': {\n pointerEvents: 'none',\n\n '&::before': {\n content: '\"\"',\n ...theme.fn.cover(rem(-1)),\n backgroundColor:\n theme.colorScheme === 'dark'\n ? theme.fn.rgba(theme.colors.dark[7], 0.5)\n : 'rgba(255, 255, 255, .5)',\n borderRadius: theme.fn.radius(radius),\n cursor: 'not-allowed',\n },\n },\n },\n })\n);\n","import React, { forwardRef } from 'react';\nimport {\n DefaultProps,\n MantineNumberSize,\n MantineColor,\n Selectors,\n useComponentDefaultProps,\n MantineGradient,\n Variants,\n} from '@mantine/styles';\nimport { createPolymorphicComponent } from '@mantine/utils';\nimport { UnstyledButton } from '../UnstyledButton';\nimport useStyles, { ActionIconStylesParams } from './ActionIcon.styles';\nimport { Loader, LoaderProps } from '../Loader';\n\nexport type ActionIconStylesNames = Selectors;\n\nexport interface ActionIconProps\n extends DefaultProps {\n __staticSelector?: string;\n\n /** Icon */\n children?: React.ReactNode;\n\n /** Controls appearance, subtle by default */\n variant?: Variants<\n 'subtle' | 'filled' | 'outline' | 'light' | 'default' | 'transparent' | 'gradient'\n >;\n\n /** Key of theme.colors */\n color?: MantineColor;\n\n /** Gradient input, only used when variant=\"gradient\", theme.defaultGradient by default */\n gradient?: MantineGradient;\n\n /** Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default */\n radius?: MantineNumberSize;\n\n /** Predefined button size or any valid CSS value to set width and height */\n size?: MantineNumberSize;\n\n /** Props added to Loader component (only visible when `loading` prop is set) */\n loaderProps?: LoaderProps;\n\n /** Indicates loading state */\n loading?: boolean;\n\n /** Indicates disabled state */\n disabled?: boolean;\n}\n\nconst defaultProps: Partial = {\n color: 'gray',\n size: 'md',\n variant: 'subtle',\n};\n\nexport const _ActionIcon = forwardRef((props, ref) => {\n const {\n className,\n color,\n children,\n radius,\n size,\n variant,\n gradient,\n disabled,\n loaderProps,\n loading,\n unstyled,\n __staticSelector,\n ...others\n } = useComponentDefaultProps('ActionIcon', defaultProps, props);\n\n const { classes, cx, theme } = useStyles(\n { radius, color, gradient },\n { name: ['ActionIcon', __staticSelector], unstyled, size, variant }\n );\n\n const loader = (\n \n );\n\n return (\n \n {loading ? loader : children}\n \n );\n});\n\n_ActionIcon.displayName = '@mantine/core/ActionIcon';\n\nexport const ActionIcon = createPolymorphicComponent<'button', ActionIconProps>(_ActionIcon);\n","import React from 'react';\n\nexport function CloseIcon(props: React.ComponentPropsWithoutRef<'svg'>) {\n const { width, height, style, ...others } = props;\n return (\n \n );\n}\n\nCloseIcon.displayName = '@mantine/core/CloseIcon';\n","import React, { forwardRef } from 'react';\nimport { useComponentDefaultProps, rem } from '@mantine/styles';\nimport { createPolymorphicComponent } from '@mantine/utils';\nimport { ActionIcon, ActionIconProps } from '../ActionIcon/ActionIcon';\nimport { CloseIcon } from './CloseIcon';\n\nexport interface CloseButtonProps\n extends Omit,\n Omit, 'color'> {\n /** Width and height of X icon */\n iconSize?: number | string;\n}\n\nconst iconSizes = {\n xs: rem(12),\n sm: rem(16),\n md: rem(20),\n lg: rem(28),\n xl: rem(34),\n};\n\nconst defaultProps: Partial = {\n size: 'sm',\n};\n\nexport const _CloseButton = forwardRef((props, ref) => {\n const { iconSize, size, children, ...others } = useComponentDefaultProps(\n 'CloseButton',\n defaultProps,\n props\n );\n const _iconSize = rem(iconSize || iconSizes[size]);\n return (\n \n {children || }\n \n );\n});\n\n_CloseButton.displayName = '@mantine/core/CloseButton';\n\nexport const CloseButton = createPolymorphicComponent<'button', CloseButtonProps>(_CloseButton);\n","import { createStyles, MantineColor, MantineTheme, rem, getSize } from '@mantine/styles';\n\nexport interface DividerStylesParams {\n color: MantineColor;\n}\n\nconst sizes = {\n xs: rem(1),\n sm: rem(2),\n md: rem(3),\n lg: rem(4),\n xl: rem(5),\n};\n\nfunction getColor(theme: MantineTheme, color: MantineColor) {\n const themeColor = theme.fn.variant({ variant: 'outline', color }).border;\n\n return typeof color === 'string' && (color in theme.colors || color.split('.')[0] in theme.colors)\n ? themeColor\n : color === undefined\n ? theme.colorScheme === 'dark'\n ? theme.colors.dark[4]\n : theme.colors.gray[4]\n : color;\n}\n\nexport default createStyles((theme, { color }: DividerStylesParams, { size, variant }) => ({\n root: {},\n\n withLabel: {\n borderTop: '0 !important',\n },\n\n left: {\n '&::before': {\n display: 'none',\n },\n },\n\n right: {\n '&::after': {\n display: 'none',\n },\n },\n\n label: {\n display: 'flex',\n alignItems: 'center',\n\n '&::before': {\n content: '\"\"',\n flex: 1,\n height: rem(1),\n borderTop: `${getSize({ size, sizes })} ${variant} ${getColor(theme, color)}`,\n marginRight: theme.spacing.xs,\n },\n\n '&::after': {\n content: '\"\"',\n flex: 1,\n borderTop: `${getSize({ size, sizes })} ${variant} ${getColor(theme, color)}`,\n marginLeft: theme.spacing.xs,\n },\n },\n\n labelDefaultStyles: {\n color:\n color === 'dark'\n ? theme.colors.dark[1]\n : theme.fn.themeColor(\n color,\n theme.colorScheme === 'dark' ? 5 : theme.fn.primaryShade(),\n false\n ),\n },\n\n horizontal: {\n border: 0,\n borderTopWidth: rem(getSize({ size, sizes })),\n borderTopColor: getColor(theme, color),\n borderTopStyle: variant as any,\n margin: 0,\n },\n\n vertical: {\n border: 0,\n alignSelf: 'stretch',\n height: 'auto',\n borderLeftWidth: rem(getSize({ size, sizes })),\n borderLeftColor: getColor(theme, color),\n borderLeftStyle: variant as any,\n },\n}));\n","import React, { forwardRef } from 'react';\nimport {\n DefaultProps,\n MantineNumberSize,\n MantineColor,\n useComponentDefaultProps,\n Variants,\n rem,\n} from '@mantine/styles';\nimport useStyles from './Divider.styles';\nimport { Text } from '../Text';\nimport { Box } from '../Box';\n\nexport type DividerStylesNames = 'label';\n\nexport interface DividerProps\n extends DefaultProps,\n React.ComponentPropsWithoutRef<'div'> {\n /** Key of theme.colors, defaults to \"gray\" in light color scheme and to \"dark\" in dark color scheme */\n color?: MantineColor;\n\n /** Divider orientation */\n orientation?: 'horizontal' | 'vertical';\n\n /** Sets height when orientation=\"horizontal\" and width when orientation=\"vertical\" */\n size?: MantineNumberSize;\n\n /** Text inside the divider, only applicable when orientation=\"horizontal\" */\n label?: React.ReactNode;\n\n /** Label position, only applicable when orientation=\"horizontal\" */\n labelPosition?: 'left' | 'center' | 'right';\n\n /** Props added to the label element */\n labelProps?: Record;\n\n /** Controls appearance */\n variant?: Variants<'solid' | 'dashed' | 'dotted'>;\n}\n\nconst defaultProps: Partial = {\n orientation: 'horizontal',\n size: 'xs',\n labelPosition: 'left',\n variant: 'solid',\n};\n\nexport const Divider = forwardRef((props: DividerProps, ref) => {\n const {\n className,\n color,\n orientation,\n size,\n label,\n labelPosition,\n labelProps,\n variant,\n styles,\n classNames,\n unstyled,\n ...others\n } = useComponentDefaultProps('Divider', defaultProps, props);\n\n const { classes, cx } = useStyles(\n { color },\n { classNames, styles, unstyled, name: 'Divider', variant, size }\n );\n\n const vertical = orientation === 'vertical';\n const horizontal = orientation === 'horizontal';\n const withLabel = !!label && horizontal;\n\n const useLabelDefaultStyles = !labelProps?.color;\n\n return (\n \n {withLabel && (\n \n {label}\n \n )}\n \n );\n});\n\nDivider.displayName = '@mantine/core/Divider';\n","import { CSSObject, rem } from '@mantine/styles';\nimport type { FloatingPosition, FloatingSide, FloatingPlacement, ArrowPosition } from '../types';\n\nfunction horizontalSide(\n placement: FloatingPlacement | 'center',\n arrowY: number,\n arrowOffset: number,\n arrowPosition: ArrowPosition\n) {\n if (placement === 'center' || arrowPosition === 'center') {\n return { top: arrowY };\n }\n\n if (placement === 'end') {\n return { bottom: arrowOffset };\n }\n\n if (placement === 'start') {\n return { top: arrowOffset };\n }\n\n return {};\n}\n\nfunction verticalSide(\n placement: FloatingPlacement | 'center',\n arrowX: number,\n arrowOffset: number,\n arrowPosition: ArrowPosition,\n dir: 'rtl' | 'ltr'\n) {\n if (placement === 'center' || arrowPosition === 'center') {\n return { left: arrowX };\n }\n\n if (placement === 'end') {\n return { [dir === 'ltr' ? 'right' : 'left']: arrowOffset };\n }\n\n if (placement === 'start') {\n return { [dir === 'ltr' ? 'left' : 'right']: arrowOffset };\n }\n\n return {};\n}\n\nconst radiusByFloatingSide: Record<\n FloatingSide,\n keyof Pick<\n CSSObject,\n | 'borderBottomLeftRadius'\n | 'borderBottomRightRadius'\n | 'borderTopLeftRadius'\n | 'borderTopRightRadius'\n >\n> = {\n bottom: 'borderTopLeftRadius',\n left: 'borderTopRightRadius',\n right: 'borderBottomLeftRadius',\n top: 'borderBottomRightRadius',\n};\n\nexport function getArrowPositionStyles({\n position,\n arrowSize,\n arrowOffset,\n arrowRadius,\n arrowPosition,\n arrowX,\n arrowY,\n dir,\n}: {\n position: FloatingPosition;\n arrowSize: number;\n arrowOffset: number;\n arrowRadius: number;\n arrowPosition: ArrowPosition;\n arrowX: number;\n arrowY: number;\n dir: 'rtl' | 'ltr';\n}) {\n const [side, placement = 'center'] = position.split('-') as [FloatingSide, FloatingPlacement];\n const baseStyles = {\n width: rem(arrowSize),\n height: rem(arrowSize),\n transform: 'rotate(45deg)',\n position: 'absolute',\n [radiusByFloatingSide[side]]: rem(arrowRadius),\n };\n\n const arrowPlacement = rem(-arrowSize / 2);\n\n if (side === 'left') {\n return {\n ...baseStyles,\n ...horizontalSide(placement, arrowY, arrowOffset, arrowPosition),\n right: arrowPlacement,\n borderLeftColor: 'transparent',\n borderBottomColor: 'transparent',\n };\n }\n\n if (side === 'right') {\n return {\n ...baseStyles,\n ...horizontalSide(placement, arrowY, arrowOffset, arrowPosition),\n left: arrowPlacement,\n borderRightColor: 'transparent',\n borderTopColor: 'transparent',\n };\n }\n\n if (side === 'top') {\n return {\n ...baseStyles,\n ...verticalSide(placement, arrowX, arrowOffset, arrowPosition, dir),\n bottom: arrowPlacement,\n borderTopColor: 'transparent',\n borderLeftColor: 'transparent',\n };\n }\n\n if (side === 'bottom') {\n return {\n ...baseStyles,\n ...verticalSide(placement, arrowX, arrowOffset, arrowPosition, dir),\n top: arrowPlacement,\n borderBottomColor: 'transparent',\n borderRightColor: 'transparent',\n };\n }\n\n return {};\n}\n","import React, { forwardRef } from 'react';\nimport { useMantineTheme } from '@mantine/styles';\nimport { getArrowPositionStyles } from './get-arrow-position-styles';\nimport { ArrowPosition, FloatingPosition } from '../types';\n\ninterface FloatingArrowProps extends React.ComponentPropsWithoutRef<'div'> {\n position: FloatingPosition;\n arrowSize: number;\n arrowOffset: number;\n arrowRadius: number;\n arrowPosition: ArrowPosition;\n arrowX: number;\n arrowY: number;\n visible: boolean;\n}\n\nexport const FloatingArrow = forwardRef(\n (\n {\n position,\n arrowSize,\n arrowOffset,\n arrowRadius,\n arrowPosition,\n visible,\n arrowX,\n arrowY,\n ...others\n },\n ref\n ) => {\n const theme = useMantineTheme();\n if (!visible) {\n return null;\n }\n\n return (\n \n );\n }\n);\n\nFloatingArrow.displayName = '@mantine/core/FloatingArrow';\n","import type { FloatingPosition, FloatingSide, FloatingPlacement } from '../types';\n\nexport function getFloatingPosition(\n dir: 'rtl' | 'ltr',\n position: FloatingPosition\n): FloatingPosition {\n if (dir === 'rtl' && (position.includes('right') || position.includes('left'))) {\n const [side, placement] = position.split('-') as [FloatingSide, FloatingPlacement];\n const flippedPosition = side === 'right' ? 'left' : 'right';\n return placement === undefined ? flippedPosition : `${flippedPosition}-${placement}`;\n }\n\n return position;\n}\n","import { useState, useEffect } from 'react';\nimport { autoUpdate } from '@floating-ui/react';\nimport { useDidUpdate } from '@mantine/hooks';\nimport { FloatingPosition } from './types';\n\ninterface Payload {\n opened: boolean;\n floating: {\n update(): void;\n refs: {\n floating: React.MutableRefObject;\n reference: React.MutableRefObject;\n };\n };\n positionDependencies: any[];\n position: FloatingPosition;\n}\n\nexport function useFloatingAutoUpdate({\n opened,\n floating,\n position,\n positionDependencies,\n}: Payload) {\n const [delayedUpdate, setDelayedUpdate] = useState(0);\n\n useEffect(() => {\n if (floating.refs.reference.current && floating.refs.floating.current) {\n return autoUpdate(\n floating.refs.reference.current,\n floating.refs.floating.current,\n floating.update\n );\n }\n\n return undefined;\n }, [\n floating.refs.reference.current,\n floating.refs.floating.current,\n opened,\n delayedUpdate,\n position,\n ]);\n\n useDidUpdate(() => {\n floating.update();\n }, positionDependencies);\n\n useDidUpdate(() => {\n setDelayedUpdate((c) => c + 1);\n }, [opened]);\n}\n","const TABBABLE_NODES = /input|select|textarea|button|object/;\nexport const FOCUS_SELECTOR = 'a, input, select, textarea, button, object, [tabindex]';\n\nfunction hidden(element: HTMLElement) {\n if (process.env.NODE_ENV === 'test') {\n return false;\n }\n\n return element.style.display === 'none';\n}\n\nfunction visible(element: HTMLElement) {\n const isHidden =\n element.getAttribute('aria-hidden') ||\n element.getAttribute('hidden') ||\n element.getAttribute('type') === 'hidden';\n\n if (isHidden) {\n return false;\n }\n\n let parentElement: HTMLElement = element;\n while (parentElement) {\n if (parentElement === document.body || parentElement.nodeType === 11) {\n break;\n }\n\n if (hidden(parentElement)) {\n return false;\n }\n\n parentElement = parentElement.parentNode as HTMLElement;\n }\n\n return true;\n}\n\nfunction getElementTabIndex(element: HTMLElement) {\n let tabIndex = element.getAttribute('tabindex');\n if (tabIndex === null) {\n tabIndex = undefined;\n }\n return parseInt(tabIndex, 10);\n}\n\nexport function focusable(element: HTMLElement) {\n const nodeName = element.nodeName.toLowerCase();\n const isTabIndexNotNaN = !Number.isNaN(getElementTabIndex(element));\n const res =\n // @ts-ignore\n (TABBABLE_NODES.test(nodeName) && !element.disabled) ||\n (element instanceof HTMLAnchorElement ? element.href || isTabIndexNotNaN : isTabIndexNotNaN);\n\n return res && visible(element);\n}\n\nexport function tabbable(element: HTMLElement) {\n const tabIndex = getElementTabIndex(element);\n const isTabIndexNaN = Number.isNaN(tabIndex);\n return (isTabIndexNaN || tabIndex >= 0) && focusable(element);\n}\n\nexport function findTabbableDescendants(element: HTMLElement): HTMLElement[] {\n return Array.from(element.querySelectorAll(FOCUS_SELECTOR)).filter(tabbable);\n}\n","import { useCallback, useEffect, useRef } from 'react';\nimport { FOCUS_SELECTOR, focusable, tabbable } from './tabbable';\nimport { scopeTab } from './scope-tab';\nimport { createAriaHider } from './create-aria-hider';\n\nexport function useFocusTrap(active = true): (instance: HTMLElement | null) => void {\n const ref = useRef();\n const restoreAria = useRef(null);\n\n const focusNode = (node: HTMLElement) => {\n let focusElement: HTMLElement = node.querySelector('[data-autofocus]');\n\n if (!focusElement) {\n const children = Array.from(node.querySelectorAll(FOCUS_SELECTOR));\n focusElement = children.find(tabbable) || children.find(focusable) || null;\n if (!focusElement && focusable(node)) focusElement = node;\n }\n\n if (focusElement) {\n focusElement.focus({ preventScroll: true });\n } else if (process.env.NODE_ENV === 'development') {\n // eslint-disable-next-line no-console\n console.warn(\n '[@mantine/hooks/use-focus-trap] Failed to find focusable element within provided node',\n node\n );\n }\n };\n\n const setRef = useCallback(\n (node: HTMLElement | null) => {\n if (!active) {\n return;\n }\n\n if (node === null) {\n if (restoreAria.current) {\n restoreAria.current();\n restoreAria.current = null;\n }\n return;\n }\n\n restoreAria.current = createAriaHider(node);\n if (ref.current === node) {\n return;\n }\n\n if (node) {\n // Delay processing the HTML node by a frame. This ensures focus is assigned correctly.\n setTimeout(() => {\n if (node.getRootNode()) {\n focusNode(node);\n } else if (process.env.NODE_ENV === 'development') {\n // eslint-disable-next-line no-console\n console.warn('[@mantine/hooks/use-focus-trap] Ref node is not part of the dom', node);\n }\n });\n\n ref.current = node;\n } else {\n ref.current = null;\n }\n },\n [active]\n );\n\n useEffect(() => {\n if (!active) {\n return undefined;\n }\n\n ref.current && setTimeout(() => focusNode(ref.current));\n\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Tab' && ref.current) {\n scopeTab(ref.current, event);\n }\n };\n\n document.addEventListener('keydown', handleKeyDown);\n return () => {\n document.removeEventListener('keydown', handleKeyDown);\n\n if (restoreAria.current) {\n restoreAria.current();\n }\n };\n }, [active]);\n\n return setRef;\n}\n","import { randomId } from '../utils';\n\ntype Value = {\n node: HTMLElement;\n ariaHidden: string;\n};\n\nexport function createAriaHider(\n containerNode: HTMLElement,\n selector: string = 'body > :not(script)'\n) {\n const id = randomId();\n\n const rootNodes: Value[] = Array.from(document.querySelectorAll(selector)).map(\n (node) => {\n if (node?.shadowRoot?.contains(containerNode) || node.contains(containerNode)) {\n return undefined;\n }\n\n const ariaHidden = node.getAttribute('aria-hidden');\n const prevAriaHidden = node.getAttribute('data-hidden');\n const prevFocusId = node.getAttribute('data-focus-id');\n\n node.setAttribute('data-focus-id', id);\n\n if (ariaHidden === null || ariaHidden === 'false') {\n node.setAttribute('aria-hidden', 'true');\n } else if (!prevAriaHidden && !prevFocusId) {\n node.setAttribute('data-hidden', ariaHidden);\n }\n\n return {\n node,\n ariaHidden: prevAriaHidden || null,\n };\n }\n );\n\n return () => {\n rootNodes.forEach((item) => {\n // If node contains the target container OR the focus trap ID has changed, don't perform cleanup\n if (!item || id !== item.node.getAttribute('data-focus-id')) {\n return;\n }\n\n if (item.ariaHidden === null) {\n item.node.removeAttribute('aria-hidden');\n } else {\n item.node.setAttribute('aria-hidden', item.ariaHidden);\n }\n\n item.node.removeAttribute('data-focus-id');\n item.node.removeAttribute('data-hidden');\n });\n };\n}\n","import { findTabbableDescendants } from './tabbable';\n\nexport function scopeTab(node: HTMLElement, event: KeyboardEvent) {\n const tabbable = findTabbableDescendants(node);\n if (!tabbable.length) {\n event.preventDefault();\n return;\n }\n const finalTabbable = tabbable[event.shiftKey ? 0 : tabbable.length - 1];\n const root = node.getRootNode() as unknown as DocumentOrShadowRoot;\n const leavingFinalTabbable = finalTabbable === root.activeElement || node === root.activeElement;\n\n if (!leavingFinalTabbable) {\n return;\n }\n\n event.preventDefault();\n\n const target = tabbable[event.shiftKey ? tabbable.length - 1 : 0];\n\n if (target) {\n target.focus();\n }\n}\n","import React, { cloneElement } from 'react';\nimport { isElement } from '@mantine/utils';\nimport { useFocusTrap, useMergedRef } from '@mantine/hooks';\n\nexport interface FocusTrapProps {\n /** Element at which focus should be trapped, should support ref prop */\n children: any;\n\n /** Determines whether focus should be trapped within child element */\n active?: boolean;\n\n /** Prop that should be used to access component ref */\n refProp?: string;\n}\n\nexport function FocusTrap({\n children,\n active = true,\n refProp = 'ref',\n}: FocusTrapProps): React.ReactElement {\n const focusTrapRef = useFocusTrap(active);\n const ref = useMergedRef(focusTrapRef, children?.ref);\n\n if (!isElement(children)) {\n return children;\n }\n\n return cloneElement(children, { [refProp]: ref });\n}\n\nFocusTrap.displayName = '@mantine/core/FocusTrap';\n","import { createStyles, getSize } from '@mantine/styles';\n\nexport default createStyles((theme, _params, { size }) => ({\n label: {\n display: 'inline-block',\n fontSize: getSize({ size, sizes: theme.fontSizes }),\n fontWeight: 500,\n color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.colors.gray[9],\n wordBreak: 'break-word',\n cursor: 'default',\n WebkitTapHighlightColor: 'transparent',\n },\n\n required: {\n color: theme.fn.variant({ variant: 'filled', color: 'red' }).background,\n },\n}));\n","/* eslint-disable react/no-unused-prop-types */\nimport React, { forwardRef } from 'react';\nimport { DefaultProps, MantineSize, Selectors, useComponentDefaultProps } from '@mantine/styles';\nimport { Box } from '../../Box';\nimport useStyles from './InputLabel.styles';\n\nexport type InputLabelStylesNames = Selectors;\n\nexport interface InputLabelProps\n extends DefaultProps,\n React.ComponentPropsWithoutRef<'label'> {\n variant?: string;\n\n /** Label content */\n children?: React.ReactNode;\n\n /** Label root element */\n labelElement?: 'label' | 'div';\n\n /** Determines whether required asterisk should be displayed */\n required?: boolean;\n\n /** Predefined label size */\n size?: MantineSize;\n\n __staticSelector?: string;\n}\n\nconst defaultProps: Partial = {\n labelElement: 'label',\n size: 'sm',\n};\n\nexport const InputLabel = forwardRef((props, ref) => {\n const {\n labelElement,\n children,\n required,\n size,\n classNames,\n styles,\n unstyled,\n className,\n htmlFor,\n __staticSelector,\n variant,\n onMouseDown,\n ...others\n } = useComponentDefaultProps('InputLabel', defaultProps, props);\n\n const { classes, cx } = useStyles(null, {\n name: ['InputWrapper', __staticSelector],\n classNames,\n styles,\n unstyled,\n variant,\n size,\n });\n\n return (\n \n component={labelElement as 'label'}\n ref={ref}\n className={cx(classes.label, className)}\n htmlFor={labelElement === 'label' ? htmlFor : undefined}\n onMouseDown={(event) => {\n onMouseDown?.(event);\n if (!event.defaultPrevented && event.detail > 1) {\n event.preventDefault();\n }\n }}\n {...others}\n >\n {children}\n {required && (\n \n {' *'}\n \n )}\n \n );\n});\n\nInputLabel.displayName = '@mantine/core/InputLabel';\n","import { createStyles, rem, getSize } from '@mantine/styles';\n\nexport default createStyles((theme, _params, { size }) => ({\n error: {\n wordBreak: 'break-word',\n color: theme.fn.variant({ variant: 'filled', color: 'red' }).background,\n fontSize: `calc(${getSize({ size, sizes: theme.fontSizes })} - ${rem(2)})`,\n lineHeight: 1.2,\n display: 'block',\n },\n}));\n","import React, { forwardRef } from 'react';\nimport { DefaultProps, MantineSize, Selectors, useComponentDefaultProps } from '@mantine/styles';\nimport { Text } from '../../Text';\nimport useStyles from './InputError.styles';\n\nexport type InputErrorStylesNames = Selectors;\n\nexport interface InputErrorProps\n extends DefaultProps,\n React.ComponentPropsWithoutRef<'div'> {\n variant?: string;\n\n /** Error content */\n children?: React.ReactNode;\n\n /** Predefined size */\n size?: MantineSize;\n\n __staticSelector?: string;\n}\n\nconst defaultProps: Partial = {\n size: 'sm',\n};\n\nexport const InputError = forwardRef((props, ref) => {\n const {\n children,\n className,\n classNames,\n styles,\n unstyled,\n size,\n __staticSelector,\n variant,\n ...others\n } = useComponentDefaultProps('InputError', defaultProps, props);\n\n const { classes, cx } = useStyles(null, {\n name: ['InputWrapper', __staticSelector],\n classNames,\n styles,\n unstyled,\n variant,\n size,\n });\n\n return (\n \n {children}\n \n );\n});\n\nInputError.displayName = '@mantine/core/InputError';\n","import { createStyles, rem, getSize } from '@mantine/styles';\n\nexport default createStyles((theme, _params, { size }) => ({\n description: {\n wordBreak: 'break-word',\n color: theme.colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[6],\n fontSize: `calc(${getSize({ size, sizes: theme.fontSizes })} - ${rem(2)})`,\n lineHeight: 1.2,\n display: 'block',\n },\n}));\n","import React, { forwardRef } from 'react';\nimport { DefaultProps, MantineSize, Selectors, useComponentDefaultProps } from '@mantine/styles';\nimport { Text } from '../../Text';\nimport useStyles from './InputDescription.styles';\n\nexport type InputDescriptionStylesNames = Selectors;\n\nexport interface InputDescriptionProps\n extends DefaultProps,\n React.ComponentPropsWithoutRef<'div'> {\n variant?: string;\n\n /** Description content */\n children?: React.ReactNode;\n\n /** Predefined size */\n size?: MantineSize;\n\n __staticSelector?: string;\n}\n\nconst defaultProps: Partial = {\n size: 'sm',\n};\n\nexport const InputDescription = forwardRef((props, ref) => {\n const {\n children,\n className,\n classNames,\n styles,\n unstyled,\n size,\n __staticSelector,\n variant,\n ...others\n } = useComponentDefaultProps('InputDescription', defaultProps, props);\n\n const { classes, cx } = useStyles(null, {\n name: ['InputWrapper', __staticSelector],\n classNames,\n styles,\n unstyled,\n variant,\n size,\n });\n\n return (\n \n {children}\n \n );\n});\n\nInputDescription.displayName = '@mantine/core/InputDescription';\n","import { createContext, useContext } from 'react';\n\ninterface InputWrapperContextValue {\n offsetTop: boolean;\n offsetBottom: boolean;\n describedBy: string;\n}\n\nconst InputWrapperContext = createContext({\n offsetBottom: false,\n offsetTop: false,\n describedBy: undefined,\n});\n\nexport const InputWrapperProvider = InputWrapperContext.Provider;\nexport const useInputWrapperContext = () => useContext(InputWrapperContext);\n","export function getInputOffsets(\n inputWrapperOrder: ('label' | 'input' | 'description' | 'error')[],\n { hasDescription, hasError }: { hasDescription: boolean; hasError: boolean }\n) {\n const inputIndex = inputWrapperOrder.findIndex((part) => part === 'input');\n const aboveInput = inputWrapperOrder[inputIndex - 1];\n const belowInput = inputWrapperOrder[inputIndex + 1];\n const offsetTop =\n (hasDescription && aboveInput === 'description') || (hasError && aboveInput === 'error');\n const offsetBottom =\n (hasDescription && belowInput === 'description') || (hasError && belowInput === 'error');\n return { offsetBottom, offsetTop };\n}\n","import { createStyles } from '@mantine/styles';\n\nexport default createStyles((theme) => ({\n root: {\n ...theme.fn.fontStyles(),\n lineHeight: theme.lineHeight,\n },\n}));\n","import React, { forwardRef, Fragment } from 'react';\nimport { DefaultProps, MantineSize, Selectors, useComponentDefaultProps } from '@mantine/styles';\nimport { Box } from '../../Box';\nimport { InputLabel, InputLabelStylesNames } from '../InputLabel/InputLabel';\nimport { InputError, InputErrorStylesNames } from '../InputError/InputError';\nimport {\n InputDescription,\n InputDescriptionStylesNames,\n} from '../InputDescription/InputDescription';\nimport { InputWrapperProvider } from '../InputWrapper.context';\nimport { getInputOffsets } from './get-input-offsets';\nimport useStyles from './InputWrapper.styles';\n\nexport type InputWrapperStylesNames =\n | Selectors\n | InputLabelStylesNames\n | InputErrorStylesNames\n | InputDescriptionStylesNames;\n\nexport interface InputWrapperBaseProps {\n /** Input label, displayed before input */\n label?: React.ReactNode;\n\n /** Input description, displayed after label */\n description?: React.ReactNode;\n\n /** Displays error message after input */\n error?: React.ReactNode;\n\n /** Adds required attribute to the input and red asterisk on the right side of label */\n required?: boolean;\n\n /** Determines whether required asterisk should be rendered, overrides required prop, does not add required attribute to the input */\n withAsterisk?: boolean;\n\n /** Props spread to label element */\n labelProps?: Record;\n\n /** Props spread to description element */\n descriptionProps?: Record;\n\n /** Props spread to error element */\n errorProps?: Record;\n\n /** Input container component, defaults to React.Fragment */\n inputContainer?(children: React.ReactNode): React.ReactNode;\n\n /** Controls order of the Input.Wrapper elements */\n inputWrapperOrder?: ('label' | 'input' | 'description' | 'error')[];\n}\n\nexport interface InputWrapperProps\n extends DefaultProps,\n InputWrapperBaseProps,\n React.ComponentPropsWithoutRef<'div'> {\n variant?: string;\n\n /** Input that should be wrapped */\n children: React.ReactNode;\n\n /** htmlFor label prop */\n id?: string;\n\n /** Render label as label with htmlFor or as div */\n labelElement?: 'label' | 'div';\n\n /** Controls all elements font-size */\n size?: MantineSize;\n\n /** Static css selector base */\n __staticSelector?: string;\n}\n\nconst defaultProps: Partial = {\n labelElement: 'label',\n size: 'sm',\n inputContainer: (children) => children,\n inputWrapperOrder: ['label', 'description', 'input', 'error'],\n};\n\nexport const InputWrapper = forwardRef((props, ref) => {\n const {\n className,\n label,\n children,\n required,\n id,\n error,\n description,\n labelElement,\n labelProps,\n descriptionProps,\n errorProps,\n classNames,\n styles,\n size,\n inputContainer,\n __staticSelector,\n unstyled,\n inputWrapperOrder,\n withAsterisk,\n variant,\n ...others\n } = useComponentDefaultProps('InputWrapper', defaultProps, props);\n\n const { classes, cx } = useStyles(null, {\n classNames,\n styles,\n name: ['InputWrapper', __staticSelector],\n unstyled,\n variant,\n size,\n });\n\n const sharedProps = {\n classNames,\n styles,\n unstyled,\n size,\n variant,\n __staticSelector,\n };\n\n const isRequired = typeof withAsterisk === 'boolean' ? withAsterisk : required;\n const errorId = id ? `${id}-error` : errorProps?.id;\n const descriptionId = id ? `${id}-description` : descriptionProps?.id;\n const hasError = !!error && typeof error !== 'boolean';\n const _describedBy = `${hasError ? errorId : ''} ${description ? descriptionId : ''}`;\n const describedBy = _describedBy.trim().length > 0 ? _describedBy.trim() : undefined;\n\n const _label = label && (\n \n {label}\n \n );\n\n const _description = description && (\n \n {description}\n \n );\n\n const _input = {inputContainer(children)};\n\n const _error = typeof error !== 'boolean' && error && (\n \n {error}\n \n );\n\n const content = inputWrapperOrder.map((part) => {\n switch (part) {\n case 'label':\n return _label;\n case 'input':\n return _input;\n case 'description':\n return _description;\n case 'error':\n return _error;\n default:\n return null;\n }\n });\n\n return (\n \n \n {content}\n \n \n );\n});\n\nInputWrapper.displayName = '@mantine/core/InputWrapper';\n","import React, { forwardRef } from 'react';\nimport { DefaultProps, useComponentDefaultProps } from '@mantine/styles';\nimport { packSx } from '@mantine/utils';\nimport { Box } from '../../Box';\n\nexport interface InputPlaceholderProps\n extends DefaultProps,\n React.ComponentPropsWithoutRef<'span'> {}\n\nconst defaultProps: Partial = {};\n\nexport const InputPlaceholder = forwardRef((props, ref) => {\n const { sx, ...others } = useComponentDefaultProps('InputPlaceholder', defaultProps, props);\n return (\n theme.fn.placeholderStyles(), ...packSx(sx)]}\n ref={ref}\n {...others}\n />\n );\n});\n\nInputPlaceholder.displayName = '@mantine/core/InputPlaceholder';\n","import React, { forwardRef } from 'react';\nimport {\n DefaultProps,\n MantineNumberSize,\n MantineSize,\n rem,\n Selectors,\n useComponentDefaultProps,\n Variants,\n} from '@mantine/styles';\nimport { createPolymorphicComponent } from '@mantine/utils';\nimport { Box, extractSystemStyles } from '../Box';\nimport { InputWrapper } from './InputWrapper/InputWrapper';\nimport { InputDescription } from './InputDescription/InputDescription';\nimport { InputLabel } from './InputLabel/InputLabel';\nimport { InputError } from './InputError/InputError';\nimport { InputPlaceholder } from './InputPlaceholder/InputPlaceholder';\nimport { useInputWrapperContext } from './InputWrapper.context';\nimport useStyles from './Input.styles';\n\nexport type InputStylesNames = Selectors;\n\nexport interface InputSharedProps {\n /** Adds icon on the left side of input */\n icon?: React.ReactNode;\n\n /** Width of icon section */\n iconWidth?: React.CSSProperties['width'];\n\n /** Right section of input, similar to icon but on the right */\n rightSection?: React.ReactNode;\n\n /** Width of right section, is used to calculate input padding-right */\n rightSectionWidth?: React.CSSProperties['width'];\n\n /** Props spread to rightSection div element */\n rightSectionProps?: Record;\n\n /** Properties spread to root element */\n wrapperProps?: Record;\n\n /** Sets required on input element */\n required?: boolean;\n\n /** Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default */\n radius?: MantineNumberSize;\n\n /** Defines input appearance, defaults to default in light color scheme and filled in dark */\n variant?: Variants<'default' | 'filled' | 'unstyled'>;\n\n /** Disabled input state */\n disabled?: boolean;\n\n /** Input size */\n size?: MantineSize;\n}\n\nexport interface InputProps extends InputSharedProps, DefaultProps {\n /** Static css selector base */\n __staticSelector?: string;\n\n /** Determines whether input has error styles */\n error?: React.ReactNode;\n\n /** Will input have multiple lines? */\n multiline?: boolean;\n\n /** Determines whether cursor on input should be pointer */\n pointer?: boolean;\n}\n\nconst defaultProps: Partial = {\n size: 'sm',\n variant: 'default',\n};\n\nexport const _Input = forwardRef((props, ref) => {\n const {\n className,\n error,\n required,\n disabled,\n variant,\n icon,\n style,\n rightSectionWidth,\n iconWidth,\n rightSection,\n rightSectionProps,\n radius,\n size,\n wrapperProps,\n classNames,\n styles,\n __staticSelector,\n multiline,\n sx,\n unstyled,\n pointer,\n ...others\n } = useComponentDefaultProps('Input', defaultProps, props);\n const { offsetBottom, offsetTop, describedBy } = useInputWrapperContext();\n\n const { classes, cx } = useStyles(\n {\n radius,\n multiline,\n invalid: !!error,\n rightSectionWidth: rightSectionWidth ? rem(rightSectionWidth) : undefined,\n iconWidth,\n withRightSection: !!rightSection,\n offsetBottom,\n offsetTop,\n pointer,\n },\n { classNames, styles, name: ['Input', __staticSelector], unstyled, variant, size }\n );\n\n const { systemStyles, rest } = extractSystemStyles(others);\n\n return (\n \n {icon && {icon}
}\n\n \n\n {rightSection && (\n \n {rightSection}\n
\n )}\n \n );\n}) as any;\n\n_Input.displayName = '@mantine/core/Input';\n_Input.Wrapper = InputWrapper;\n_Input.Label = InputLabel;\n_Input.Description = InputDescription;\n_Input.Error = InputError;\n_Input.Placeholder = InputPlaceholder;\n\nexport const Input = createPolymorphicComponent<\n 'input',\n InputProps,\n {\n Wrapper: typeof InputWrapper;\n Label: typeof InputLabel;\n Description: typeof InputDescription;\n Error: typeof InputError;\n Placeholder: typeof InputPlaceholder;\n }\n>(_Input);\n","import { createStyles, MantineNumberSize, MantineTheme, rem, getSize } from '@mantine/styles';\n\nexport interface InputStylesParams {\n radius: MantineNumberSize;\n multiline: boolean;\n invalid: boolean;\n rightSectionWidth: string | number;\n withRightSection: boolean;\n iconWidth: string | number;\n offsetBottom: boolean;\n offsetTop: boolean;\n pointer: boolean;\n}\n\nexport const sizes = {\n xs: rem(30),\n sm: rem(36),\n md: rem(42),\n lg: rem(50),\n xl: rem(60),\n};\n\nconst INPUT_VARIANTS = ['default', 'filled', 'unstyled'];\n\ninterface GetVariantStylesInput {\n theme: MantineTheme;\n variant: string;\n}\n\nfunction getVariantStyles({ theme, variant }: GetVariantStylesInput) {\n if (!INPUT_VARIANTS.includes(variant)) {\n return null;\n }\n\n if (variant === 'default') {\n return {\n border: `${rem(1)} solid ${\n theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[4]\n }`,\n backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.white,\n transition: 'border-color 100ms ease',\n '&:focus, &:focus-within': theme.focusRingStyles.inputStyles(theme),\n };\n }\n\n if (variant === 'filled') {\n return {\n border: `${rem(1)} solid transparent`,\n backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],\n '&:focus, &:focus-within': theme.focusRingStyles.inputStyles(theme),\n };\n }\n\n return {\n borderWidth: 0,\n color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,\n backgroundColor: 'transparent',\n minHeight: rem(28),\n outline: 0,\n\n '&:focus, &:focus-within': {\n outline: 'none',\n borderColor: 'transparent',\n },\n\n '&:disabled': {\n backgroundColor: 'transparent',\n\n '&:focus, &:focus-within': {\n outline: 'none',\n borderColor: 'transparent',\n },\n },\n };\n}\n\nexport default createStyles(\n (\n theme,\n {\n multiline,\n radius,\n invalid,\n rightSectionWidth,\n withRightSection,\n iconWidth,\n offsetBottom,\n offsetTop,\n pointer,\n }: InputStylesParams,\n { variant, size }\n ) => {\n const invalidColor = theme.fn.variant({\n variant: 'filled',\n color: 'red',\n }).background;\n const sizeStyles =\n variant === 'default' || variant === 'filled'\n ? {\n minHeight: getSize({ size, sizes }),\n paddingLeft: `calc(${getSize({ size, sizes })} / 3)`,\n paddingRight: withRightSection\n ? rightSectionWidth || getSize({ size, sizes })\n : `calc(${getSize({ size, sizes })} / 3)`,\n borderRadius: theme.fn.radius(radius),\n }\n : variant === 'unstyled' && withRightSection\n ? {\n paddingRight: rightSectionWidth || getSize({ size, sizes }),\n }\n : null;\n\n return {\n wrapper: {\n position: 'relative',\n marginTop: offsetTop ? `calc(${theme.spacing.xs} / 2)` : undefined,\n marginBottom: offsetBottom ? `calc(${theme.spacing.xs} / 2)` : undefined,\n\n '&:has(input:disabled)': {\n '& .mantine-Input-rightSection': {\n display: 'none',\n },\n },\n },\n\n input: {\n ...theme.fn.fontStyles(),\n height: multiline\n ? variant === 'unstyled'\n ? undefined\n : 'auto'\n : getSize({ size, sizes }),\n WebkitTapHighlightColor: 'transparent',\n lineHeight: multiline ? theme.lineHeight : `calc(${getSize({ size, sizes })} - ${rem(2)})`,\n appearance: 'none',\n resize: 'none',\n boxSizing: 'border-box',\n fontSize: getSize({ size, sizes: theme.fontSizes }),\n width: '100%',\n color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,\n display: 'block',\n textAlign: 'left',\n cursor: pointer ? 'pointer' : undefined,\n ...getVariantStyles({ theme, variant }),\n ...sizeStyles,\n\n '&:disabled, &[data-disabled]': {\n backgroundColor:\n theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[1],\n color: theme.colors.dark[2],\n opacity: 0.6,\n cursor: 'not-allowed',\n pointerEvents: 'none',\n\n '&::placeholder': {\n color: theme.colors.dark[2],\n },\n },\n\n '&[data-invalid]': {\n color: invalidColor,\n borderColor: invalidColor,\n\n '&::placeholder': {\n opacity: 1,\n color: invalidColor,\n },\n },\n\n '&[data-with-icon]': {\n paddingLeft: typeof iconWidth === 'number' ? rem(iconWidth) : getSize({ size, sizes }),\n },\n\n '&::placeholder': {\n ...theme.fn.placeholderStyles(),\n opacity: 1,\n },\n\n '&::-webkit-inner-spin-button, &::-webkit-outer-spin-button, &::-webkit-search-decoration, &::-webkit-search-cancel-button, &::-webkit-search-results-button, &::-webkit-search-results-decoration':\n {\n appearance: 'none',\n },\n\n '&[type=number]': {\n MozAppearance: 'textfield',\n },\n },\n\n icon: {\n pointerEvents: 'none',\n position: 'absolute',\n zIndex: 1,\n left: 0,\n top: 0,\n bottom: 0,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n width: iconWidth ? rem(iconWidth) : getSize({ size, sizes }),\n color: invalid\n ? theme.colors.red[theme.colorScheme === 'dark' ? 6 : 7]\n : theme.colorScheme === 'dark'\n ? theme.colors.dark[2]\n : theme.colors.gray[5],\n },\n\n rightSection: {\n position: 'absolute',\n top: 0,\n bottom: 0,\n right: 0,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n width: rightSectionWidth || getSize({ size, sizes }),\n },\n };\n }\n);\n","import { useComponentDefaultProps, DefaultProps, MantineStyleSystemProps } from '@mantine/styles';\nimport { useId } from '@mantine/hooks';\nimport { extractSystemStyles } from '../Box';\nimport { InputWrapperBaseProps } from './InputWrapper/InputWrapper';\nimport { InputSharedProps } from './Input';\n\ninterface BaseProps extends InputWrapperBaseProps, InputSharedProps, DefaultProps {\n __staticSelector?: string;\n id?: string;\n}\n\nexport function useInputProps>(\n component: string,\n defaultProps: U,\n props: T\n) {\n const {\n label,\n description,\n error,\n required,\n classNames,\n styles,\n className,\n unstyled,\n __staticSelector,\n sx,\n errorProps,\n labelProps,\n descriptionProps,\n wrapperProps: _wrapperProps,\n id,\n size,\n style,\n inputContainer,\n inputWrapperOrder,\n withAsterisk,\n variant,\n ...others\n } = useComponentDefaultProps(component, defaultProps, props);\n\n const uid = useId(id);\n\n const { systemStyles, rest } = extractSystemStyles(others);\n\n const wrapperProps = {\n label,\n description,\n error,\n required,\n classNames,\n className,\n __staticSelector,\n sx,\n errorProps,\n labelProps,\n descriptionProps,\n unstyled,\n styles,\n id: uid,\n size,\n style,\n inputContainer,\n inputWrapperOrder,\n withAsterisk,\n variant,\n ..._wrapperProps,\n };\n\n return {\n ...rest,\n classNames,\n styles,\n unstyled,\n wrapperProps: {\n ...wrapperProps,\n ...systemStyles,\n } as typeof wrapperProps & MantineStyleSystemProps,\n inputProps: {\n required,\n classNames,\n styles,\n unstyled,\n id: uid,\n size,\n __staticSelector,\n error,\n variant,\n },\n };\n}\n","import React from 'react';\nimport { LoaderProps } from './loader-props';\n\nexport function Bars({ size, color, ...others }: LoaderProps) {\n const { style, ...rest } = others;\n return (\n \n );\n}\n","import React from 'react';\nimport { LoaderProps } from './loader-props';\n\nexport function Oval({ size, color, ...others }: LoaderProps) {\n const { style, ...rest } = others;\n return (\n \n );\n}\n","import React from 'react';\nimport { LoaderProps } from './loader-props';\n\nexport function Dots({ size, color, ...others }: LoaderProps) {\n const { style, ...rest } = others;\n return (\n \n );\n}\n","import React from 'react';\nimport {\n DefaultProps,\n MantineNumberSize,\n MantineColor,\n MantineTheme,\n useMantineTheme,\n useComponentDefaultProps,\n rem,\n getSize,\n} from '@mantine/styles';\nimport { Box } from '../Box';\nimport { Bars } from './loaders/Bars';\nimport { Oval } from './loaders/Oval';\nimport { Dots } from './loaders/Dots';\n\nconst LOADERS = {\n bars: Bars,\n oval: Oval,\n dots: Dots,\n};\n\nconst sizes = {\n xs: rem(18),\n sm: rem(22),\n md: rem(36),\n lg: rem(44),\n xl: rem(58),\n};\n\nexport interface LoaderProps\n extends DefaultProps,\n Omit, 'display' | 'opacity'> {\n /** Defines width of loader */\n size?: MantineNumberSize;\n\n /** Loader color from theme */\n color?: MantineColor;\n\n /** Loader appearance */\n variant?: MantineTheme['loader'];\n}\n\nconst defaultProps: Partial = {\n size: 'md',\n};\n\nexport function Loader(props: LoaderProps) {\n const { size, color, variant, ...others } = useComponentDefaultProps(\n 'Loader',\n defaultProps,\n props\n );\n const theme = useMantineTheme();\n const defaultLoader = variant in LOADERS ? variant : theme.loader;\n\n return (\n \n );\n}\n\nLoader.displayName = '@mantine/core/Loader';\n","import { useEffect, useRef } from 'react';\n\nconst DEFAULT_EVENTS = ['mousedown', 'touchstart'];\n\nexport function useClickOutside(\n handler: () => void,\n events?: string[] | null,\n nodes?: (HTMLElement | null)[]\n) {\n const ref = useRef();\n\n useEffect(() => {\n const listener = (event: any) => {\n const { target } = event ?? {};\n if (Array.isArray(nodes)) {\n const shouldIgnore =\n target?.hasAttribute('data-ignore-outside-clicks') ||\n (!document.body.contains(target) && target.tagName !== 'HTML');\n const shouldTrigger = nodes.every((node) => !!node && !event.composedPath().includes(node));\n shouldTrigger && !shouldIgnore && handler();\n } else if (ref.current && !ref.current.contains(target)) {\n handler();\n }\n };\n\n (events || DEFAULT_EVENTS).forEach((fn) => document.addEventListener(fn, listener));\n\n return () => {\n (events || DEFAULT_EVENTS).forEach((fn) => document.removeEventListener(fn, listener));\n };\n }, [ref, handler, nodes]);\n\n return ref;\n}\n","import { useDidUpdate, useUncontrolled } from '@mantine/hooks';\nimport {\n useFloating,\n shift,\n flip,\n arrow,\n offset,\n size,\n Middleware,\n inline,\n limitShift,\n UseFloatingReturn,\n} from '@floating-ui/react';\nimport { FloatingAxesOffsets, FloatingPosition, useFloatingAutoUpdate } from '../Floating';\nimport { PopoverWidth, PopoverMiddlewares } from './Popover.types';\n\ninterface UsePopoverOptions {\n offset: number | FloatingAxesOffsets;\n position: FloatingPosition;\n positionDependencies: any[];\n onPositionChange?(position: FloatingPosition): void;\n opened: boolean;\n defaultOpened: boolean;\n onChange(opened: boolean): void;\n onClose?(): void;\n onOpen?(): void;\n width: PopoverWidth;\n middlewares: PopoverMiddlewares;\n arrowRef: React.RefObject;\n arrowOffset: number;\n}\n\nfunction getPopoverMiddlewares(\n options: UsePopoverOptions,\n getFloating: () => UseFloatingReturn\n) {\n const middlewares: Middleware[] = [offset(options.offset)];\n\n if (options.middlewares.shift) {\n middlewares.push(shift({ limiter: limitShift() }));\n }\n\n if (options.middlewares.flip) {\n middlewares.push(flip());\n }\n\n if (options.middlewares.inline) {\n middlewares.push(inline());\n }\n\n middlewares.push(arrow({ element: options.arrowRef, padding: options.arrowOffset }));\n\n if (options.middlewares.size || options.width === 'target') {\n middlewares.push(\n size({\n apply({ rects, availableWidth, availableHeight }) {\n const floating = getFloating();\n const styles = floating.refs.floating.current?.style ?? {};\n\n if (options.middlewares.size) {\n Object.assign(styles, {\n maxWidth: `${availableWidth}px`,\n maxHeight: `${availableHeight}px`,\n });\n }\n\n if (options.width === 'target') {\n Object.assign(styles, {\n width: `${rects.reference.width}px`,\n });\n }\n },\n })\n );\n }\n\n return middlewares;\n}\n\nexport function usePopover(options: UsePopoverOptions) {\n const [_opened, setOpened] = useUncontrolled({\n value: options.opened,\n defaultValue: options.defaultOpened,\n finalValue: false,\n onChange: options.onChange,\n });\n\n const onClose = () => {\n options.onClose?.();\n setOpened(false);\n };\n\n const onToggle = () => {\n if (_opened) {\n options.onClose?.();\n setOpened(false);\n } else {\n options.onOpen?.();\n setOpened(true);\n }\n };\n\n const floating: UseFloatingReturn = useFloating({\n placement: options.position,\n middleware: getPopoverMiddlewares(options, () => floating),\n });\n\n useFloatingAutoUpdate({\n opened: options.opened,\n position: options.position,\n positionDependencies: options.positionDependencies,\n floating,\n });\n\n useDidUpdate(() => {\n options.onPositionChange?.(floating.placement);\n }, [floating.placement]);\n\n useDidUpdate(() => {\n if (!options.opened) {\n options.onClose?.();\n } else {\n options.onOpen?.();\n }\n }, [options.opened]);\n\n return {\n floating,\n controlled: typeof options.opened === 'boolean',\n opened: _opened,\n onClose,\n onToggle,\n };\n}\n","export const POPOVER_ERRORS = {\n context: 'Popover component was not found in the tree',\n children:\n 'Popover.Target component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported',\n};\n","import { ReferenceType } from '@floating-ui/react';\nimport { createSafeContext } from '@mantine/utils';\nimport { MantineNumberSize, MantineShadow, ClassNames, Styles } from '@mantine/styles';\nimport { FloatingPosition, ArrowPosition } from '../Floating';\nimport { TransitionOverride } from '../Transition';\nimport { PortalProps } from '../Portal';\nimport { POPOVER_ERRORS } from './Popover.errors';\nimport { PopoverWidth, PopoverStylesNames, PopoverStylesParams } from './Popover.types';\n\ninterface PopoverContext {\n x: number;\n y: number;\n arrowX: number;\n arrowY: number;\n arrowRef: React.RefObject;\n opened: boolean;\n transitionProps?: TransitionOverride;\n reference: (node: ReferenceType) => void;\n floating: (node: HTMLElement) => void;\n width?: PopoverWidth;\n withArrow: boolean;\n arrowSize: number;\n arrowOffset: number;\n arrowRadius: number;\n arrowPosition: ArrowPosition;\n trapFocus: boolean;\n placement: FloatingPosition;\n withinPortal: boolean;\n portalProps?: Omit;\n closeOnEscape: boolean;\n zIndex: React.CSSProperties['zIndex'];\n radius?: MantineNumberSize;\n shadow?: MantineShadow;\n onClose?(): void;\n getDropdownId(): string;\n getTargetId(): string;\n controlled: boolean;\n onToggle(): void;\n withRoles: boolean;\n targetProps: Record;\n disabled: boolean;\n returnFocus: boolean;\n classNames: ClassNames;\n styles: Styles;\n unstyled: boolean;\n __staticSelector: string;\n variant: string;\n keepMounted: boolean;\n}\n\nexport const [PopoverContextProvider, usePopoverContext] = createSafeContext(\n POPOVER_ERRORS.context\n);\n","/* eslint-disable react/no-unused-prop-types */\nimport React, { cloneElement, forwardRef } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\nimport { isElement } from '@mantine/utils';\nimport { clsx, useComponentDefaultProps } from '@mantine/styles';\nimport { usePopoverContext } from '../Popover.context';\nimport { POPOVER_ERRORS } from '../Popover.errors';\n\nexport interface PopoverTargetProps {\n /** Target element */\n children: React.ReactNode;\n\n /** Key of the prop that should be used to get element ref */\n refProp?: string;\n\n /** Popup accessible type, 'dialog' by default */\n popupType?: string;\n\n /** Determines whether component should override default id of target element, defaults to true */\n shouldOverrideDefaultTargetId?: boolean;\n}\n\nconst defaultProps: Partial = {\n refProp: 'ref',\n popupType: 'dialog',\n shouldOverrideDefaultTargetId: true,\n};\n\nexport const PopoverTarget = forwardRef((props, ref) => {\n const { children, refProp, popupType, shouldOverrideDefaultTargetId, ...others } =\n useComponentDefaultProps('PopoverTarget', defaultProps, props);\n\n if (!isElement(children)) {\n throw new Error(POPOVER_ERRORS.children);\n }\n\n const forwardedProps = others as any;\n const ctx = usePopoverContext();\n const targetRef = useMergedRef(ctx.reference, (children as any).ref, ref);\n\n const accessibleProps = ctx.withRoles\n ? {\n 'aria-haspopup': popupType,\n 'aria-expanded': ctx.opened,\n 'aria-controls': ctx.getDropdownId(),\n id: shouldOverrideDefaultTargetId ? ctx.getTargetId() : children.props.id,\n }\n : {};\n\n return cloneElement(children, {\n ...forwardedProps,\n ...accessibleProps,\n ...ctx.targetProps,\n className: clsx(ctx.targetProps.className, forwardedProps.className, children.props.className),\n [refProp]: targetRef,\n ...(!ctx.controlled ? { onClick: ctx.onToggle } : null),\n });\n});\n\nPopoverTarget.displayName = '@mantine/core/PopoverTarget';\n","export const noop = () => {};\n","import React from 'react';\nimport { noop } from '../noop/noop';\n\ninterface Options {\n active: boolean;\n onTrigger?(): void;\n onKeyDown?(event: React.KeyboardEvent): void;\n}\n\nexport function closeOnEscape(\n callback?: (event: any) => void,\n options: Options = { active: true }\n) {\n if (typeof callback !== 'function' || !options.active) {\n return options.onKeyDown || noop;\n }\n\n return (event: React.KeyboardEvent) => {\n if (event.key === 'Escape') {\n callback(event);\n options.onTrigger?.();\n }\n };\n}\n","import { createStyles, MantineShadow, MantineNumberSize, rem } from '@mantine/styles';\n\nexport interface PopoverStylesParams {\n radius?: MantineNumberSize;\n shadow?: MantineShadow;\n}\n\nexport default createStyles((theme, { radius, shadow }: PopoverStylesParams) => ({\n dropdown: {\n position: 'absolute',\n backgroundColor: theme.white,\n background: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.white,\n border: `${rem(1)} solid ${\n theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2]\n }`,\n padding: `${theme.spacing.sm} ${theme.spacing.md}`,\n boxShadow: theme.shadows[shadow] || shadow || 'none',\n borderRadius: theme.fn.radius(radius),\n\n '&:focus': {\n outline: 0,\n },\n },\n\n arrow: {\n backgroundColor: 'inherit',\n border: `${rem(1)} solid ${\n theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2]\n }`,\n zIndex: 1,\n },\n}));\n","import React from 'react';\nimport { DefaultProps, useComponentDefaultProps, rem } from '@mantine/styles';\nimport { closeOnEscape } from '@mantine/utils';\nimport { useFocusReturn } from '@mantine/hooks';\nimport { FloatingArrow } from '../../Floating';\nimport { Box } from '../../Box';\nimport { Transition } from '../../Transition';\nimport { FocusTrap } from '../../FocusTrap';\nimport { OptionalPortal } from '../../Portal';\nimport { usePopoverContext } from '../Popover.context';\nimport useStyles from './PopoverDropdown.styles';\n\nexport interface PopoverDropdownProps extends DefaultProps, React.ComponentPropsWithoutRef<'div'> {\n /** Dropdown content */\n children?: React.ReactNode;\n}\n\nconst defaultProps: Partial = {};\n\nexport function PopoverDropdown(props: PopoverDropdownProps) {\n const { style, className, children, onKeyDownCapture, ...others } = useComponentDefaultProps(\n 'PopoverDropdown',\n defaultProps,\n props\n );\n\n const ctx = usePopoverContext();\n const { classes, cx } = useStyles(\n { radius: ctx.radius, shadow: ctx.shadow },\n {\n name: ctx.__staticSelector,\n classNames: ctx.classNames,\n styles: ctx.styles,\n unstyled: ctx.unstyled,\n variant: ctx.variant,\n }\n );\n\n const returnFocus = useFocusReturn({\n opened: ctx.opened,\n shouldReturnFocus: ctx.returnFocus,\n });\n\n const accessibleProps = ctx.withRoles\n ? {\n 'aria-labelledby': ctx.getTargetId(),\n id: ctx.getDropdownId(),\n role: 'dialog',\n }\n : {};\n\n if (ctx.disabled) {\n return null;\n }\n\n return (\n \n \n {(transitionStyles) => (\n \n \n {children}\n\n \n \n \n )}\n \n \n );\n}\n\nPopoverDropdown.displayName = '@mantine/core/PopoverDropdown';\n","/* eslint-disable react/no-unused-prop-types */\n\nimport React, { useRef, useState, useCallback } from 'react';\nimport { useId, useClickOutside } from '@mantine/hooks';\nimport {\n useMantineTheme,\n ClassNames,\n Styles,\n MantineNumberSize,\n MantineShadow,\n getDefaultZIndex,\n useComponentDefaultProps,\n} from '@mantine/styles';\nimport { TransitionOverride } from '../Transition';\nimport {\n getFloatingPosition,\n FloatingAxesOffsets,\n FloatingPosition,\n ArrowPosition,\n} from '../Floating';\nimport { PortalProps } from '../Portal';\nimport { usePopover } from './use-popover';\nimport { PopoverContextProvider } from './Popover.context';\nimport {\n PopoverWidth,\n PopoverMiddlewares,\n PopoverStylesNames,\n PopoverStylesParams,\n} from './Popover.types';\nimport { PopoverTarget } from './PopoverTarget/PopoverTarget';\nimport { PopoverDropdown } from './PopoverDropdown/PopoverDropdown';\n\nexport interface PopoverBaseProps {\n /** Dropdown position relative to target */\n position?: FloatingPosition;\n\n /** Default Y axis or either (main, cross, alignment) X and Y axis space between target element and dropdown */\n offset?: number | FloatingAxesOffsets;\n\n /** Called when dropdown position changes */\n onPositionChange?(position: FloatingPosition): void;\n\n /** useEffect dependencies to force update dropdown position */\n positionDependencies?: any[];\n\n /** Called when dropdown closes */\n onClose?(): void;\n\n /** Called when dropdown opens */\n onOpen?(): void;\n\n /** If set dropdown will not be unmounted from the DOM when it is hidden, display: none styles will be added instead */\n keepMounted?: boolean;\n\n /** Props added to Transition component that used to animate dropdown presence, use to configure duration and animation type, { duration: 150, transition: 'fade' } by default */\n transitionProps?: TransitionOverride;\n\n /** Dropdown width, or 'target' to make dropdown width the same as target element */\n width?: PopoverWidth;\n\n /** Floating ui middlewares to configure position handling */\n middlewares?: PopoverMiddlewares;\n\n /** Determines whether component should have an arrow */\n withArrow?: boolean;\n\n /** Arrow size */\n arrowSize?: number;\n\n /** Arrow offset */\n arrowOffset?: number;\n\n /** Arrow border-radius */\n arrowRadius?: number;\n\n /** Arrow position **/\n arrowPosition?: ArrowPosition;\n\n /** Determines whether dropdown should be rendered within Portal, defaults to false */\n withinPortal?: boolean;\n\n /** Props to pass down to the portal when withinPortal is true */\n portalProps?: Omit;\n\n /** Dropdown z-index */\n zIndex?: React.CSSProperties['zIndex'];\n\n /** Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default */\n radius?: MantineNumberSize;\n\n /** Key of theme.shadow or any other valid css box-shadow value */\n shadow?: MantineShadow;\n\n /** If set, popover dropdown will not render */\n disabled?: boolean;\n\n /** Determines whether focus should be automatically returned to control when dropdown closes, false by default */\n returnFocus?: boolean;\n}\n\nexport interface PopoverProps extends PopoverBaseProps {\n /** Popover.Target and Popover.Dropdown components */\n children: React.ReactNode;\n\n /** Initial opened state for uncontrolled component */\n defaultOpened?: boolean;\n\n /** Controls dropdown opened state */\n opened?: boolean;\n\n /** Called with current state when dropdown opens or closes */\n onChange?(opened: boolean): void;\n\n /** Determines whether dropdown should be closed on outside clicks, default to true */\n closeOnClickOutside?: boolean;\n\n /** Events that trigger outside clicks */\n clickOutsideEvents?: string[];\n\n /** Determines whether focus should be trapped within dropdown, default to false */\n trapFocus?: boolean;\n\n /** Determines whether dropdown should be closed when Escape key is pressed, defaults to true */\n closeOnEscape?: boolean;\n\n /** id base to create accessibility connections */\n id?: string;\n\n /** Determines whether dropdown and target element should have accessible roles, defaults to true */\n withRoles?: boolean;\n\n variant?: string;\n unstyled?: boolean;\n classNames?: ClassNames;\n styles?: Styles;\n __staticSelector?: string;\n}\n\nconst defaultProps: Partial = {\n position: 'bottom',\n offset: 8,\n positionDependencies: [],\n transitionProps: { transition: 'fade', duration: 150 },\n middlewares: { flip: true, shift: true, inline: false },\n arrowSize: 7,\n arrowOffset: 5,\n arrowRadius: 0,\n arrowPosition: 'side',\n closeOnClickOutside: true,\n withinPortal: false,\n closeOnEscape: true,\n trapFocus: false,\n withRoles: true,\n returnFocus: false,\n clickOutsideEvents: ['mousedown', 'touchstart'],\n zIndex: getDefaultZIndex('popover'),\n __staticSelector: 'Popover',\n width: 'max-content',\n};\n\nexport function Popover(props: PopoverProps) {\n const arrowRef = useRef(null);\n const {\n children,\n position,\n offset,\n onPositionChange,\n positionDependencies,\n opened,\n transitionProps,\n width,\n middlewares,\n withArrow,\n arrowSize,\n arrowOffset,\n arrowRadius,\n arrowPosition,\n unstyled,\n classNames,\n styles,\n closeOnClickOutside,\n withinPortal,\n portalProps,\n closeOnEscape,\n clickOutsideEvents,\n trapFocus,\n onClose,\n onOpen,\n onChange,\n zIndex,\n radius,\n shadow,\n id,\n defaultOpened,\n __staticSelector,\n withRoles,\n disabled,\n returnFocus,\n variant,\n keepMounted,\n ...others\n } = useComponentDefaultProps('Popover', defaultProps, props);\n\n const [targetNode, setTargetNode] = useState(null);\n const [dropdownNode, setDropdownNode] = useState(null);\n\n const uid = useId(id);\n const theme = useMantineTheme();\n const popover = usePopover({\n middlewares,\n width,\n position: getFloatingPosition(theme.dir, position),\n offset: typeof offset === 'number' ? offset + (withArrow ? arrowSize / 2 : 0) : offset,\n arrowRef,\n arrowOffset,\n onPositionChange,\n positionDependencies,\n opened,\n defaultOpened,\n onChange,\n onOpen,\n onClose,\n });\n\n useClickOutside(\n () => popover.opened && closeOnClickOutside && popover.onClose(),\n clickOutsideEvents,\n [targetNode, dropdownNode]\n );\n\n const reference = useCallback(\n (node: HTMLElement) => {\n setTargetNode(node);\n popover.floating.reference(node);\n },\n [popover.floating.reference]\n );\n\n const floating = useCallback(\n (node: HTMLElement) => {\n setDropdownNode(node);\n popover.floating.floating(node);\n },\n [popover.floating.floating]\n );\n\n return (\n `${uid}-target`,\n getDropdownId: () => `${uid}-dropdown`,\n withRoles,\n targetProps: others,\n __staticSelector,\n classNames,\n styles,\n unstyled,\n variant,\n keepMounted,\n }}\n >\n {children}\n \n );\n}\n\nPopover.Target = PopoverTarget;\nPopover.Dropdown = PopoverDropdown;\nPopover.displayName = '@mantine/core/Popover';\n","/* eslint-disable react/no-unused-prop-types */\nimport React, { ReactPortal, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useIsomorphicEffect } from '@mantine/hooks';\nimport { useMantineTheme, useComponentDefaultProps } from '@mantine/styles';\n\nexport interface PortalProps extends React.ComponentPropsWithoutRef<'div'> {\n /** Portal children, for example, modal or popover */\n children: React.ReactNode;\n\n /** Element where portal should be rendered, by default new div element is created and appended to document.body */\n target?: HTMLElement | string;\n\n /** Root element className */\n className?: string;\n\n /** Root element ref */\n innerRef?: React.MutableRefObject;\n}\n\nexport function Portal(props: PortalProps): ReactPortal {\n const { children, target, className, innerRef, ...others } = useComponentDefaultProps(\n 'Portal',\n {},\n props\n );\n\n const theme = useMantineTheme();\n const [mounted, setMounted] = useState(false);\n const ref = useRef();\n\n useIsomorphicEffect(() => {\n setMounted(true);\n ref.current = !target\n ? document.createElement('div')\n : typeof target === 'string'\n ? document.querySelector(target)\n : target;\n\n if (!target) {\n document.body.appendChild(ref.current);\n }\n\n return () => {\n !target && document.body.removeChild(ref.current);\n };\n }, [target]);\n\n if (!mounted) {\n return null;\n }\n\n return createPortal(\n \n {children}\n
,\n ref.current\n );\n}\n\nPortal.displayName = '@mantine/core/Portal';\n","import React from 'react';\nimport { Portal, PortalProps } from './Portal';\n\nexport interface OptionalPortalProps extends PortalProps {\n /** Determines if children should be rendered in Portal */\n withinPortal?: boolean;\n}\n\nexport function OptionalPortal({ withinPortal = true, children, ...others }: OptionalPortalProps) {\n if (withinPortal) {\n return {children};\n }\n\n return <>{children}>;\n}\n\nOptionalPortal.displayName = '@mantine/core/OptionalPortal';\n","import React, { forwardRef } from 'react';\n\nexport interface SelectItemProps extends Omit, 'value'> {\n label: React.ReactNode;\n value?: string;\n}\n\nexport const DefaultItem = forwardRef(\n ({ label, value, ...others }: SelectItemProps, ref) => (\n \n {label || value}\n
\n )\n);\n\nDefaultItem.displayName = '@mantine/core/DefaultItem';\n","import { createStyles } from '@mantine/styles';\n\nexport default createStyles(() => ({\n input: {\n '&:not(:disabled)': {\n cursor: 'pointer',\n\n '&::selection': {\n backgroundColor: 'transparent',\n },\n },\n },\n}));\n","import React, { useState, useEffect, useRef, forwardRef } from 'react';\nimport { useUncontrolled, useMergedRef, useDidUpdate, useScrollIntoView } from '@mantine/hooks';\nimport { DefaultProps, MantineSize, MantineShadow, getDefaultZIndex } from '@mantine/styles';\nimport { groupOptions } from '@mantine/utils';\nimport { SelectScrollArea } from './SelectScrollArea/SelectScrollArea';\nimport { PortalProps } from '../Portal';\nimport { Input, useInputProps } from '../Input';\nimport { TransitionOverride } from '../Transition';\nimport { DefaultItem } from './DefaultItem/DefaultItem';\nimport { getSelectRightSectionProps } from './SelectRightSection/get-select-right-section-props';\nimport { SelectItems } from './SelectItems/SelectItems';\nimport { SelectPopover } from './SelectPopover/SelectPopover';\nimport { SelectItem, BaseSelectStylesNames, BaseSelectProps } from './types';\nimport { filterData } from './filter-data/filter-data';\nimport useStyles from './Select.styles';\n\nexport interface SelectSharedProps- {\n /** Select data used to render items in dropdown */\n data: ReadonlyArray;\n\n /** Controlled input value */\n value?: Value;\n\n /** Uncontrolled input defaultValue */\n defaultValue?: Value;\n\n /** Controlled input onChange handler */\n onChange?(value: Value): void;\n\n /** Function based on which items in dropdown are filtered */\n filter?(value: string, item: Item): boolean;\n\n /** Input size */\n size?: MantineSize;\n\n /** Props added to Transition component that used to animate dropdown presence, use to configure duration and animation type, { duration: 0, transition: 'fade' } by default */\n transitionProps?: TransitionOverride;\n\n /** Dropdown shadow from theme or any value to set box-shadow */\n shadow?: MantineShadow;\n\n /** Initial dropdown opened state */\n initiallyOpened?: boolean;\n\n /** Change item renderer */\n itemComponent?: React.FC;\n\n /** Called when dropdown is opened */\n onDropdownOpen?(): void;\n\n /** Called when dropdown is closed */\n onDropdownClose?(): void;\n\n /** Whether to render the dropdown in a Portal */\n withinPortal?: boolean;\n\n /** Props to pass down to the portal when withinPortal is true */\n portalProps?: Omit;\n\n /** Limit amount of items displayed at a time for searchable select */\n limit?: number;\n\n /** Nothing found label */\n nothingFound?: React.ReactNode;\n\n /** Dropdown z-index */\n zIndex?: React.CSSProperties['zIndex'];\n\n /** Dropdown positioning behavior */\n dropdownPosition?: 'bottom' | 'top' | 'flip';\n\n /** Whether to switch item order and keyboard navigation on dropdown position flip */\n switchDirectionOnFlip?: boolean;\n\n /** useEffect dependencies to force update dropdown position */\n positionDependencies?: any[];\n}\n\nexport interface SelectProps\n extends DefaultProps,\n BaseSelectProps,\n SelectSharedProps {\n /** Maximum dropdown height */\n maxDropdownHeight?: number;\n\n /** Set to true to enable search */\n searchable?: boolean;\n\n /** Allow to clear item */\n clearable?: boolean;\n\n /** Called each time search value changes */\n onSearchChange?(query: string): void;\n\n /** Controlled search input value */\n searchValue?: string;\n\n /** Hovers the first result when search query changes */\n hoverOnSearchChange?: boolean;\n\n /** Allow creatable option */\n creatable?: boolean;\n\n /** Function to get create Label */\n getCreateLabel?(query: string): React.ReactNode;\n\n /** Function to determine if create label should be displayed */\n shouldCreate?(query: string, data: SelectItem[]): boolean;\n\n /** Called when create option is selected */\n onCreate?(query: string): SelectItem | string | null | undefined;\n\n /** Change dropdown component, can be used to add native scrollbars */\n dropdownComponent?: any;\n\n /** Select highlighted item on blur */\n selectOnBlur?: boolean;\n\n /** Allow deselecting items on click */\n allowDeselect?: boolean;\n\n /** Should data be filtered when search value exactly matches selected item */\n filterDataOnExactSearchMatch?: boolean;\n\n /** Props added to clear button */\n clearButtonProps?: React.ComponentPropsWithoutRef<'button'>;\n}\n\nexport function defaultFilter(value: string, item: SelectItem) {\n return item.label.toLowerCase().trim().includes(value.toLowerCase().trim());\n}\n\nexport function defaultShouldCreate(query: string, data: SelectItem[]) {\n return !!query && !data.some((item) => item.label.toLowerCase() === query.toLowerCase());\n}\n\nconst defaultProps: Partial = {\n required: false,\n size: 'sm',\n shadow: 'sm',\n itemComponent: DefaultItem,\n transitionProps: { transition: 'fade', duration: 0 },\n initiallyOpened: false,\n filter: defaultFilter,\n maxDropdownHeight: 220,\n searchable: false,\n clearable: false,\n limit: Infinity,\n disabled: false,\n creatable: false,\n shouldCreate: defaultShouldCreate,\n selectOnBlur: false,\n switchDirectionOnFlip: false,\n filterDataOnExactSearchMatch: false,\n zIndex: getDefaultZIndex('popover'),\n positionDependencies: [],\n dropdownPosition: 'flip',\n};\n\nexport const Select = forwardRef((props, ref) => {\n const {\n inputProps,\n wrapperProps,\n shadow,\n data,\n value,\n defaultValue,\n onChange,\n itemComponent,\n onKeyDown,\n onBlur,\n onFocus,\n transitionProps,\n initiallyOpened,\n unstyled,\n classNames,\n styles,\n filter,\n maxDropdownHeight,\n searchable,\n clearable,\n nothingFound,\n limit,\n disabled,\n onSearchChange,\n searchValue,\n rightSection,\n rightSectionWidth,\n creatable,\n getCreateLabel,\n shouldCreate,\n selectOnBlur,\n onCreate,\n dropdownComponent,\n onDropdownClose,\n onDropdownOpen,\n withinPortal,\n portalProps,\n switchDirectionOnFlip,\n zIndex,\n name,\n dropdownPosition,\n allowDeselect,\n placeholder,\n filterDataOnExactSearchMatch,\n form,\n positionDependencies,\n readOnly,\n clearButtonProps,\n hoverOnSearchChange,\n ...others\n } = useInputProps('Select', defaultProps, props);\n\n const { classes, cx, theme } = useStyles();\n const [dropdownOpened, _setDropdownOpened] = useState(initiallyOpened);\n const [hovered, setHovered] = useState(-1);\n const inputRef = useRef();\n const itemsRefs = useRef>({});\n const [direction, setDirection] = useState('column');\n const isColumn = direction === 'column';\n const { scrollIntoView, targetRef, scrollableRef } = useScrollIntoView({\n duration: 0,\n offset: 5,\n cancelable: false,\n isList: true,\n });\n\n const isDeselectable = allowDeselect === undefined ? clearable : allowDeselect;\n\n const setDropdownOpened = (opened: boolean) => {\n if (dropdownOpened !== opened) {\n _setDropdownOpened(opened);\n const handler = opened ? onDropdownOpen : onDropdownClose;\n typeof handler === 'function' && handler();\n }\n };\n\n const isCreatable = creatable && typeof getCreateLabel === 'function';\n let createLabel = null;\n\n const formattedData = data.map((item) =>\n typeof item === 'string' ? { label: item, value: item } : item\n );\n\n const sortedData = groupOptions({ data: formattedData });\n\n const [_value, handleChange, controlled] = useUncontrolled({\n value,\n defaultValue,\n finalValue: null,\n onChange,\n });\n\n const selectedValue = sortedData.find((item) => item.value === _value);\n\n const [inputValue, setInputValue] = useUncontrolled({\n value: searchValue,\n defaultValue: selectedValue?.label || '',\n finalValue: undefined,\n onChange: onSearchChange,\n });\n\n const handleSearchChange = (val: string) => {\n setInputValue(val);\n if (searchable && typeof onSearchChange === 'function') {\n onSearchChange(val);\n }\n };\n\n const handleClear = () => {\n if (!readOnly) {\n handleChange(null);\n if (!controlled) {\n handleSearchChange('');\n }\n inputRef.current?.focus();\n }\n };\n\n useEffect(() => {\n const newSelectedValue = sortedData.find((item) => item.value === _value);\n\n if (newSelectedValue) {\n handleSearchChange(newSelectedValue.label);\n } else if (!isCreatable || !_value) {\n handleSearchChange('');\n }\n }, [_value]);\n\n useEffect(() => {\n if (selectedValue && (!searchable || !dropdownOpened)) {\n handleSearchChange(selectedValue.label);\n }\n }, [selectedValue?.label]);\n\n const handleItemSelect = (item: SelectItem) => {\n if (!readOnly) {\n if (isDeselectable && selectedValue?.value === item.value) {\n handleChange(null);\n setDropdownOpened(false);\n } else {\n if (item.creatable && typeof onCreate === 'function') {\n const createdItem = onCreate(item.value);\n if (typeof createdItem !== 'undefined' && createdItem !== null) {\n if (typeof createdItem === 'string') {\n handleChange(createdItem);\n } else {\n handleChange(createdItem.value);\n }\n }\n } else {\n handleChange(item.value);\n }\n\n if (!controlled) {\n handleSearchChange(item.label);\n }\n\n setHovered(-1);\n setDropdownOpened(false);\n inputRef.current.focus();\n }\n }\n };\n\n const filteredData = filterData({\n data: sortedData,\n searchable,\n limit,\n searchValue: inputValue,\n filter,\n filterDataOnExactSearchMatch,\n value: _value,\n });\n\n if (isCreatable && shouldCreate(inputValue, filteredData)) {\n createLabel = getCreateLabel(inputValue);\n filteredData.push({ label: inputValue, value: inputValue, creatable: true });\n }\n\n const getNextIndex = (\n index: number,\n nextItem: (index: number) => number,\n compareFn: (index: number) => boolean\n ) => {\n let i = index;\n while (compareFn(i)) {\n i = nextItem(i);\n if (!filteredData[i].disabled) return i;\n }\n return index;\n };\n\n useDidUpdate(() => {\n if (hoverOnSearchChange && inputValue) {\n setHovered(0);\n } else {\n setHovered(-1);\n }\n }, [inputValue, hoverOnSearchChange]);\n\n const selectedItemIndex = _value ? filteredData.findIndex((el) => el.value === _value) : 0;\n\n const shouldShowDropdown =\n !readOnly && (filteredData.length > 0 ? dropdownOpened : dropdownOpened && !!nothingFound);\n\n const handlePrevious = () => {\n setHovered((current) => {\n const nextIndex = getNextIndex(\n current,\n (index) => index - 1,\n (index) => index > 0\n );\n\n targetRef.current = itemsRefs.current[filteredData[nextIndex]?.value];\n shouldShowDropdown && scrollIntoView({ alignment: isColumn ? 'start' : 'end' });\n return nextIndex;\n });\n };\n\n const handleNext = () => {\n setHovered((current) => {\n const nextIndex = getNextIndex(\n current,\n (index) => index + 1,\n (index) => index < filteredData.length - 1\n );\n\n targetRef.current = itemsRefs.current[filteredData[nextIndex]?.value];\n shouldShowDropdown && scrollIntoView({ alignment: isColumn ? 'end' : 'start' });\n return nextIndex;\n });\n };\n\n const scrollSelectedItemIntoView = () =>\n window.setTimeout(() => {\n targetRef.current = itemsRefs.current[filteredData[selectedItemIndex]?.value];\n scrollIntoView({ alignment: isColumn ? 'end' : 'start' });\n }, 50);\n\n useDidUpdate(() => {\n if (shouldShowDropdown) scrollSelectedItemIntoView();\n }, [shouldShowDropdown]);\n\n const handleInputKeydown = (event: React.KeyboardEvent) => {\n typeof onKeyDown === 'function' && onKeyDown(event);\n switch (event.key) {\n case 'ArrowUp': {\n event.preventDefault();\n\n if (!dropdownOpened) {\n setHovered(selectedItemIndex);\n setDropdownOpened(true);\n scrollSelectedItemIntoView();\n } else {\n isColumn ? handlePrevious() : handleNext();\n }\n\n break;\n }\n\n case 'ArrowDown': {\n event.preventDefault();\n\n if (!dropdownOpened) {\n setHovered(selectedItemIndex);\n setDropdownOpened(true);\n scrollSelectedItemIntoView();\n } else {\n isColumn ? handleNext() : handlePrevious();\n }\n\n break;\n }\n\n case 'Home': {\n if (!searchable) {\n event.preventDefault();\n\n if (!dropdownOpened) {\n setDropdownOpened(true);\n }\n\n const firstItemIndex = filteredData.findIndex((item) => !item.disabled);\n setHovered(firstItemIndex);\n shouldShowDropdown && scrollIntoView({ alignment: isColumn ? 'end' : 'start' });\n }\n break;\n }\n\n case 'End': {\n if (!searchable) {\n event.preventDefault();\n\n if (!dropdownOpened) {\n setDropdownOpened(true);\n }\n\n const lastItemIndex = filteredData.map((item) => !!item.disabled).lastIndexOf(false);\n setHovered(lastItemIndex);\n shouldShowDropdown && scrollIntoView({ alignment: isColumn ? 'end' : 'start' });\n }\n break;\n }\n\n case 'Escape': {\n event.preventDefault();\n setDropdownOpened(false);\n setHovered(-1);\n break;\n }\n\n case ' ': {\n if (!searchable) {\n event.preventDefault();\n if (filteredData[hovered] && dropdownOpened) {\n handleItemSelect(filteredData[hovered]);\n } else {\n setDropdownOpened(true);\n setHovered(selectedItemIndex);\n scrollSelectedItemIntoView();\n }\n }\n\n break;\n }\n\n case 'Enter': {\n if (!searchable) {\n event.preventDefault();\n }\n\n if (filteredData[hovered] && dropdownOpened) {\n event.preventDefault();\n handleItemSelect(filteredData[hovered]);\n }\n }\n }\n };\n\n const handleInputBlur = (event: React.FocusEvent) => {\n typeof onBlur === 'function' && onBlur(event);\n const selected = sortedData.find((item) => item.value === _value);\n if (selectOnBlur && filteredData[hovered] && dropdownOpened) {\n handleItemSelect(filteredData[hovered]);\n }\n handleSearchChange(selected?.label || '');\n setDropdownOpened(false);\n };\n\n const handleInputFocus = (event: React.FocusEvent) => {\n typeof onFocus === 'function' && onFocus(event);\n if (searchable) {\n setDropdownOpened(true);\n }\n };\n\n const handleInputChange = (event: React.ChangeEvent) => {\n if (!readOnly) {\n handleSearchChange(event.currentTarget.value);\n\n if (clearable && event.currentTarget.value === '') {\n handleChange(null);\n }\n\n setHovered(-1);\n setDropdownOpened(true);\n }\n };\n\n const handleInputClick = () => {\n if (!readOnly) {\n setDropdownOpened(!dropdownOpened);\n\n if (_value && !dropdownOpened) {\n setHovered(selectedItemIndex);\n }\n }\n };\n\n return (\n \n \n \n
setHovered(-1)}\n tabIndex={-1}\n >\n \n\n \n autoComplete=\"off\"\n type=\"search\"\n {...inputProps}\n {...others}\n ref={useMergedRef(ref, inputRef)}\n onKeyDown={handleInputKeydown}\n __staticSelector=\"Select\"\n value={inputValue}\n placeholder={placeholder}\n onChange={handleInputChange}\n aria-autocomplete=\"list\"\n aria-controls={shouldShowDropdown ? `${inputProps.id}-items` : null}\n aria-activedescendant={hovered >= 0 ? `${inputProps.id}-${hovered}` : null}\n onMouseDown={handleInputClick}\n onBlur={handleInputBlur}\n onFocus={handleInputFocus}\n readOnly={!searchable || readOnly}\n disabled={disabled}\n data-mantine-stop-propagation={shouldShowDropdown}\n name={null}\n classNames={{\n ...classNames,\n input: cx({ [classes.input]: !searchable }, (classNames as any)?.input),\n }}\n {...getSelectRightSectionProps({\n theme,\n rightSection,\n rightSectionWidth,\n styles,\n size: inputProps.size,\n shouldClear: clearable && !!selectedValue,\n onClear: handleClear,\n error: wrapperProps.error,\n clearButtonProps,\n disabled,\n readOnly,\n })}\n />\n
\n \n\n \n val === _value}\n uuid={inputProps.id}\n __staticSelector=\"Select\"\n onItemHover={setHovered}\n onItemSelect={handleItemSelect}\n itemsRefs={itemsRefs}\n itemComponent={itemComponent}\n size={inputProps.size}\n nothingFound={nothingFound}\n creatable={isCreatable && !!createLabel}\n createLabel={createLabel}\n aria-label={wrapperProps.label}\n unstyled={unstyled}\n variant={inputProps.variant}\n />\n \n \n \n );\n});\n\nSelect.displayName = '@mantine/core/Select';\n","import type { SelectItem } from '../types';\n\ninterface FilterData {\n data: SelectItem[];\n limit: number;\n searchable: boolean;\n searchValue: string;\n filterDataOnExactSearchMatch: boolean;\n value: string;\n filter(value: string, item: SelectItem): boolean;\n}\n\nexport function filterData({\n data,\n searchable,\n limit,\n searchValue,\n filter,\n value,\n filterDataOnExactSearchMatch,\n}: FilterData) {\n if (!searchable) {\n return data;\n }\n\n const selected = value != null ? data.find((item) => item.value === value) || null : null;\n\n if (selected && !filterDataOnExactSearchMatch && selected?.label === searchValue) {\n if (limit) {\n if (limit >= data.length) {\n return data;\n }\n const firstIndex = data.indexOf(selected);\n const lastIndex = firstIndex + limit;\n const firstIndexOffset = lastIndex - data.length;\n if (firstIndexOffset > 0) {\n return data.slice(firstIndex - firstIndexOffset);\n }\n return data.slice(firstIndex, lastIndex);\n }\n return data;\n }\n\n const result = [];\n\n for (let i = 0; i < data.length; i += 1) {\n if (filter(searchValue, data[i])) {\n result.push(data[i]);\n }\n\n if (result.length >= limit) {\n break;\n }\n }\n\n return result;\n}\n","import { createStyles, getSize } from '@mantine/styles';\n\nexport default createStyles((theme, _params, { size }) => ({\n item: {\n ...theme.fn.fontStyles(),\n boxSizing: 'border-box',\n wordBreak: 'break-all',\n textAlign: 'left',\n width: '100%',\n padding: `calc(${getSize({ size, sizes: theme.spacing })} / 1.5) ${getSize({\n size,\n sizes: theme.spacing,\n })}`,\n cursor: 'pointer',\n fontSize: getSize({ size, sizes: theme.fontSizes }),\n color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,\n borderRadius: theme.fn.radius(),\n\n '&[data-hovered]': {\n backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[1],\n },\n\n '&[data-selected]': {\n backgroundColor: theme.fn.variant({ variant: 'filled' }).background,\n color: theme.fn.variant({ variant: 'filled' }).color,\n ...theme.fn.hover({ backgroundColor: theme.fn.variant({ variant: 'filled' }).hover }),\n },\n\n '&[data-disabled]': {\n cursor: 'default',\n color: theme.colors.dark[2],\n },\n },\n\n nothingFound: {\n boxSizing: 'border-box',\n color: theme.colors.gray[6],\n paddingTop: `calc(${getSize({ size, sizes: theme.spacing })} / 2)`,\n paddingBottom: `calc(${getSize({ size, sizes: theme.spacing })} / 2)`,\n textAlign: 'center',\n },\n\n separator: {\n boxSizing: 'border-box',\n textAlign: 'left',\n width: '100%',\n padding: `calc(${getSize({ size, sizes: theme.spacing })} / 1.5) ${getSize({\n size,\n sizes: theme.spacing,\n })}`,\n },\n\n separatorLabel: {\n color: theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[5],\n },\n}));\n","import React from 'react';\nimport { DefaultProps, MantineSize, Selectors } from '@mantine/styles';\nimport { randomId } from '@mantine/hooks';\nimport { Text } from '../../Text/Text';\nimport { Divider } from '../../Divider/Divider';\nimport { SelectItem } from '../types';\nimport useStyles from './SelectItems.styles';\n\nexport type SelectItemsStylesNames = Selectors;\n\nexport interface SelectItemsProps extends DefaultProps {\n data: SelectItem[];\n hovered: number;\n __staticSelector: string;\n isItemSelected?(itemValue: string): boolean;\n uuid: string;\n itemsRefs?: React.MutableRefObject>;\n onItemHover(index: number): void;\n onItemSelect(item: SelectItem): void;\n size: MantineSize;\n itemComponent: React.FC;\n nothingFound?: React.ReactNode;\n creatable?: boolean;\n createLabel?: React.ReactNode;\n variant: string;\n}\n\nexport function SelectItems({\n data,\n hovered,\n classNames,\n styles,\n isItemSelected,\n uuid,\n __staticSelector,\n onItemHover,\n onItemSelect,\n itemsRefs,\n itemComponent: Item,\n size,\n nothingFound,\n creatable,\n createLabel,\n unstyled,\n variant,\n}: SelectItemsProps) {\n const { classes } = useStyles(null, {\n classNames,\n styles,\n unstyled,\n name: __staticSelector,\n variant,\n size,\n });\n\n const unGroupedItems: React.ReactElement[] = [];\n const groupedItems: React.ReactElement[] = [];\n let creatableDataIndex = null;\n\n const constructItemComponent = (item: SelectItem, index: number) => {\n const selected = typeof isItemSelected === 'function' ? isItemSelected(item.value) : false;\n return (\n - onItemHover(index)}\n id={`${uuid}-${index}`}\n role=\"option\"\n // data-ignore-outside-clicks\n tabIndex={-1}\n aria-selected={hovered === index}\n ref={(node: HTMLDivElement) => {\n if (itemsRefs && itemsRefs.current) {\n // eslint-disable-next-line no-param-reassign\n itemsRefs.current[item.value] = node;\n }\n }}\n onMouseDown={\n !item.disabled\n ? (event: React.MouseEvent) => {\n event.preventDefault();\n onItemSelect(item);\n }\n : null\n }\n disabled={item.disabled}\n variant={variant}\n {...item}\n />\n );\n };\n\n let groupName = null;\n data.forEach((item, index) => {\n if (item.creatable) {\n creatableDataIndex = index;\n } else if (!item.group) {\n unGroupedItems.push(constructItemComponent(item, index));\n } else {\n if (groupName !== item.group) {\n groupName = item.group;\n groupedItems.push(\n \n );\n }\n groupedItems.push(constructItemComponent(item, index));\n }\n });\n\n if (creatable) {\n const creatableDataItem = data[creatableDataIndex];\n unGroupedItems.push(\n // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n
onItemHover(creatableDataIndex)}\n onMouseDown={(event: React.MouseEvent) => {\n event.preventDefault();\n onItemSelect(creatableDataItem);\n }}\n tabIndex={-1}\n ref={(node: HTMLDivElement) => {\n if (itemsRefs && itemsRefs.current) {\n // eslint-disable-next-line no-param-reassign\n itemsRefs.current[creatableDataItem.value] = node;\n }\n }}\n >\n {createLabel}\n
\n );\n }\n\n if (groupedItems.length > 0 && unGroupedItems.length > 0) {\n unGroupedItems.unshift(\n \n );\n }\n\n return groupedItems.length > 0 || unGroupedItems.length > 0 ? (\n <>\n {groupedItems}\n {unGroupedItems}\n >\n ) : (\n \n {nothingFound}\n \n );\n}\n\nSelectItems.displayName = '@mantine/core/SelectItems';\n","import { createStyles, rem } from '@mantine/styles';\n\nexport default createStyles(() => ({\n dropdown: {},\n\n itemsWrapper: {\n padding: rem(4),\n display: 'flex',\n width: '100%',\n boxSizing: 'border-box',\n },\n}));\n","import React from 'react';\nimport { ClassNames, MantineShadow, Styles, Selectors, DefaultProps, rem } from '@mantine/styles';\nimport { SelectScrollArea } from '../SelectScrollArea/SelectScrollArea';\nimport { Popover } from '../../Popover';\nimport { PortalProps } from '../../Portal';\nimport { Box } from '../../Box';\nimport { TransitionOverride } from '../../Transition';\nimport useStyles from './SelectPopover.styles';\n\nexport type SelectPopoverStylesNames = Selectors;\n\ninterface SelectPopoverDropdownProps extends DefaultProps {\n children: React.ReactNode;\n id: string;\n component?: any;\n maxHeight?: number | string;\n direction?: React.CSSProperties['flexDirection'];\n innerRef?: React.MutableRefObject;\n __staticSelector?: string;\n}\n\nfunction SelectPopoverDropdown({\n children,\n component = 'div',\n maxHeight = 220,\n direction = 'column',\n id,\n innerRef,\n __staticSelector,\n styles,\n classNames,\n unstyled,\n ...others\n}: SelectPopoverDropdownProps) {\n const { classes } = useStyles(null, { name: __staticSelector, styles, classNames, unstyled });\n\n return (\n event.preventDefault()} {...others}>\n \n
\n component={(component || 'div') as any}\n id={`${id}-items`}\n aria-labelledby={`${id}-label`}\n role=\"listbox\"\n onMouseDown={(event) => event.preventDefault()}\n style={{ flex: 1, overflowY: component !== SelectScrollArea ? 'auto' : undefined }}\n data-combobox-popover\n tabIndex={-1}\n ref={innerRef}\n >\n \n {children}\n
\n \n
\n \n );\n}\n\ninterface SelectPopoverProps {\n opened: boolean;\n transitionProps: TransitionOverride;\n shadow?: MantineShadow;\n withinPortal?: boolean;\n portalProps?: Omit;\n children: React.ReactNode;\n __staticSelector?: string;\n onDirectionChange?(direction: React.CSSProperties['flexDirection']): void;\n switchDirectionOnFlip?: boolean;\n zIndex?: React.CSSProperties['zIndex'];\n dropdownPosition?: 'bottom' | 'top' | 'flip';\n positionDependencies?: any[];\n classNames?: ClassNames;\n styles?: Styles;\n unstyled?: boolean;\n readOnly?: boolean;\n variant: string;\n}\n\nexport function SelectPopover({\n opened,\n transitionProps = { transition: 'fade', duration: 0 },\n shadow,\n withinPortal,\n portalProps,\n children,\n __staticSelector,\n onDirectionChange,\n switchDirectionOnFlip,\n zIndex,\n dropdownPosition,\n positionDependencies = [],\n classNames,\n styles,\n unstyled,\n readOnly,\n variant,\n}: SelectPopoverProps) {\n return (\n \n switchDirectionOnFlip &&\n onDirectionChange?.(nextPosition === 'top' ? 'column-reverse' : 'column')\n }\n variant={variant}\n >\n {children}\n \n );\n}\n\nSelectPopover.Target = Popover.Target;\nSelectPopover.Dropdown = SelectPopoverDropdown;\n","import React from 'react';\nimport { useMantineTheme, MantineSize, getSize, rem } from '@mantine/styles';\n\ninterface ChevronIconProps extends React.ComponentPropsWithoutRef<'svg'> {\n size: MantineSize;\n error: any;\n}\n\nconst iconSizes = {\n xs: rem(14),\n sm: rem(18),\n md: rem(20),\n lg: rem(24),\n xl: rem(28),\n};\n\nexport function ChevronIcon({ size, error, style, ...others }: ChevronIconProps) {\n const theme = useMantineTheme();\n const _size = getSize({ size, sizes: iconSizes });\n\n return (\n \n );\n}\n","import React from 'react';\nimport { MantineSize } from '@mantine/styles';\nimport { CloseButton } from '../../CloseButton';\nimport { ChevronIcon } from './ChevronIcon';\n\nexport interface SelectRightSectionProps {\n shouldClear: boolean;\n clearButtonProps?: React.ComponentPropsWithoutRef<'button'>;\n onClear?: () => void;\n size: MantineSize;\n error?: any;\n // eslint-disable-next-line react/no-unused-prop-types\n disabled?: boolean;\n}\n\nexport function SelectRightSection({\n shouldClear,\n clearButtonProps,\n onClear,\n size,\n error,\n}: SelectRightSectionProps) {\n return shouldClear ? (\n event.preventDefault()}\n />\n ) : (\n \n );\n}\n\nSelectRightSection.displayName = '@mantine/core/SelectRightSection';\n","import React from 'react';\nimport { MantineTheme } from '@mantine/styles';\nimport { SelectRightSection, SelectRightSectionProps } from './SelectRightSection';\n\ninterface GetRightSectionProps extends SelectRightSectionProps {\n rightSection?: React.ReactNode;\n rightSectionWidth?: string | number;\n styles: Record;\n theme: MantineTheme;\n readOnly: boolean;\n}\n\nexport function getSelectRightSectionProps({\n styles,\n rightSection,\n rightSectionWidth,\n theme,\n ...props\n}: GetRightSectionProps) {\n if (rightSection) {\n return { rightSection, rightSectionWidth, styles };\n }\n\n const _styles = typeof styles === 'function' ? styles(theme) : styles;\n\n return {\n rightSection: !props.readOnly && !(props.disabled && props.shouldClear) && (\n \n ),\n styles: {\n ..._styles,\n rightSection: {\n ..._styles?.rightSection,\n pointerEvents: props.shouldClear ? undefined : 'none',\n },\n },\n };\n}\n","import * as React from 'react';\n\ntype PossibleRef = React.Ref | undefined;\n\n/**\n * Set a given ref to a given value\n * This utility takes care of different types of refs: callback refs and RefObject(s)\n */\nfunction setRef(ref: PossibleRef, value: T) {\n if (typeof ref === 'function') {\n ref(value);\n } else if (ref !== null && ref !== undefined) {\n (ref as React.MutableRefObject).current = value;\n }\n}\n\n/**\n * A utility to compose multiple refs together\n * Accepts callback refs and RefObject(s)\n */\nfunction composeRefs(...refs: PossibleRef[]) {\n return (node: T) => refs.forEach((ref) => setRef(ref, node));\n}\n\n/**\n * A custom hook that composes multiple refs\n * Accepts callback refs and RefObject(s)\n */\nfunction useComposedRefs(...refs: PossibleRef[]) {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n return React.useCallback(composeRefs(...refs), refs);\n}\n\nexport { composeRefs, useComposedRefs };\n","import * as React from 'react';\nimport { composeRefs } from '@radix-ui/react-compose-refs';\n\n/* -------------------------------------------------------------------------------------------------\n * Slot\n * -----------------------------------------------------------------------------------------------*/\n\ninterface SlotProps extends React.HTMLAttributes {\n children?: React.ReactNode;\n}\n\nconst Slot = React.forwardRef((props, forwardedRef) => {\n const { children, ...slotProps } = props;\n const childrenArray = React.Children.toArray(children);\n const slottable = childrenArray.find(isSlottable);\n\n if (slottable) {\n // the new element to render is the one passed as a child of `Slottable`\n const newElement = slottable.props.children as React.ReactNode;\n\n const newChildren = childrenArray.map((child) => {\n if (child === slottable) {\n // because the new element will be the one rendered, we are only interested\n // in grabbing its children (`newElement.props.children`)\n if (React.Children.count(newElement) > 1) return React.Children.only(null);\n return React.isValidElement(newElement)\n ? (newElement.props.children as React.ReactNode)\n : null;\n } else {\n return child;\n }\n });\n\n return (\n \n {React.isValidElement(newElement)\n ? React.cloneElement(newElement, undefined, newChildren)\n : null}\n \n );\n }\n\n return (\n \n {children}\n \n );\n});\n\nSlot.displayName = 'Slot';\n\n/* -------------------------------------------------------------------------------------------------\n * SlotClone\n * -----------------------------------------------------------------------------------------------*/\n\ninterface SlotCloneProps {\n children: React.ReactNode;\n}\n\nconst SlotClone = React.forwardRef((props, forwardedRef) => {\n const { children, ...slotProps } = props;\n\n if (React.isValidElement(children)) {\n return React.cloneElement(children, {\n ...mergeProps(slotProps, children.props),\n ref: composeRefs(forwardedRef, (children as any).ref),\n });\n }\n\n return React.Children.count(children) > 1 ? React.Children.only(null) : null;\n});\n\nSlotClone.displayName = 'SlotClone';\n\n/* -------------------------------------------------------------------------------------------------\n * Slottable\n * -----------------------------------------------------------------------------------------------*/\n\nconst Slottable = ({ children }: { children: React.ReactNode }) => {\n return <>{children}>;\n};\n\n/* ---------------------------------------------------------------------------------------------- */\n\ntype AnyProps = Record;\n\nfunction isSlottable(child: React.ReactNode): child is React.ReactElement {\n return React.isValidElement(child) && child.type === Slottable;\n}\n\nfunction mergeProps(slotProps: AnyProps, childProps: AnyProps) {\n // all child props should override\n const overrideProps = { ...childProps };\n\n for (const propName in childProps) {\n const slotPropValue = slotProps[propName];\n const childPropValue = childProps[propName];\n\n const isHandler = /^on[A-Z]/.test(propName);\n if (isHandler) {\n // if the handler exists on both, we compose them\n if (slotPropValue && childPropValue) {\n overrideProps[propName] = (...args: unknown[]) => {\n childPropValue(...args);\n slotPropValue(...args);\n };\n }\n // but if it exists only on the slot, we use only this one\n else if (slotPropValue) {\n overrideProps[propName] = slotPropValue;\n }\n }\n // if it's `style`, we merge them\n else if (propName === 'style') {\n overrideProps[propName] = { ...slotPropValue, ...childPropValue };\n } else if (propName === 'className') {\n overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(' ');\n }\n }\n\n return { ...slotProps, ...overrideProps };\n}\n\nconst Root = Slot;\n\nexport {\n Slot,\n Slottable,\n //\n Root,\n};\nexport type { SlotProps };\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 'h2',\n 'h3',\n 'img',\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 * 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';\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';\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';\n\nfunction createContext(\n rootComponentName: string,\n defaultContext?: ContextValueType\n) {\n const Context = React.createContext(defaultContext);\n\n function Provider(props: ContextValueType & { children: React.ReactNode }) {\n const { children, ...context } = props;\n // Only re-memoize when prop values change\n // eslint-disable-next-line react-hooks/exhaustive-deps\n const value = React.useMemo(() => context, Object.values(context)) as ContextValueType;\n return {children};\n }\n\n function useContext(consumerName: string) {\n const context = React.useContext(Context);\n if (context) return context;\n if (defaultContext !== undefined) return defaultContext;\n // if a defaultContext wasn't specified, it's a required context.\n throw new Error(`\\`${consumerName}\\` must be used within \\`${rootComponentName}\\``);\n }\n\n Provider.displayName = rootComponentName + 'Provider';\n return [Provider, useContext] as const;\n}\n\n/* -------------------------------------------------------------------------------------------------\n * createContextScope\n * -----------------------------------------------------------------------------------------------*/\n\ntype Scope = { [scopeName: string]: React.Context[] } | undefined;\ntype ScopeHook = (scope: Scope) => { [__scopeProp: string]: Scope };\ninterface CreateScope {\n scopeName: string;\n (): ScopeHook;\n}\n\nfunction createContextScope(scopeName: string, createContextScopeDeps: CreateScope[] = []) {\n let defaultContexts: any[] = [];\n\n /* -----------------------------------------------------------------------------------------------\n * createContext\n * ---------------------------------------------------------------------------------------------*/\n\n function createContext(\n rootComponentName: string,\n defaultContext?: ContextValueType\n ) {\n const BaseContext = React.createContext(defaultContext);\n const index = defaultContexts.length;\n defaultContexts = [...defaultContexts, defaultContext];\n\n function Provider(\n props: ContextValueType & { scope: Scope; children: React.ReactNode }\n ) {\n const { scope, children, ...context } = props;\n const Context = scope?.[scopeName][index] || BaseContext;\n // Only re-memoize when prop values change\n // eslint-disable-next-line react-hooks/exhaustive-deps\n const value = React.useMemo(() => context, Object.values(context)) as ContextValueType;\n return {children};\n }\n\n function useContext(consumerName: string, scope: Scope) {\n const Context = scope?.[scopeName][index] || BaseContext;\n const context = React.useContext(Context);\n if (context) return context;\n if (defaultContext !== undefined) return defaultContext;\n // if a defaultContext wasn't specified, it's a required context.\n throw new Error(`\\`${consumerName}\\` must be used within \\`${rootComponentName}\\``);\n }\n\n Provider.displayName = rootComponentName + 'Provider';\n return [Provider, useContext] as const;\n }\n\n /* -----------------------------------------------------------------------------------------------\n * createScope\n * ---------------------------------------------------------------------------------------------*/\n\n const createScope: CreateScope = () => {\n const scopeContexts = defaultContexts.map((defaultContext) => {\n return React.createContext(defaultContext);\n });\n return function useScope(scope: Scope) {\n const contexts = scope?.[scopeName] || scopeContexts;\n return React.useMemo(\n () => ({ [`__scope${scopeName}`]: { ...scope, [scopeName]: contexts } }),\n [scope, contexts]\n );\n };\n };\n\n createScope.scopeName = scopeName;\n return [createContext, composeContextScopes(createScope, ...createContextScopeDeps)] as const;\n}\n\n/* -------------------------------------------------------------------------------------------------\n * composeContextScopes\n * -----------------------------------------------------------------------------------------------*/\n\nfunction composeContextScopes(...scopes: CreateScope[]) {\n const baseScope = scopes[0];\n if (scopes.length === 1) return baseScope;\n\n const createScope: CreateScope = () => {\n const scopeHooks = scopes.map((createScope) => ({\n useScope: createScope(),\n scopeName: createScope.scopeName,\n }));\n\n return function useComposedScopes(overrideScopes) {\n const nextScopes = scopeHooks.reduce((nextScopes, { useScope, scopeName }) => {\n // We are calling a hook inside a callback which React warns against to avoid inconsistent\n // renders, however, scoping doesn't have render side effects so we ignore the rule.\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const scopeProps = useScope(overrideScopes);\n const currentScope = scopeProps[`__scope${scopeName}`];\n return { ...nextScopes, ...currentScope };\n }, {});\n\n return React.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);\n };\n };\n\n createScope.scopeName = baseScope.scopeName;\n return createScope;\n}\n\n/* -----------------------------------------------------------------------------------------------*/\n\nexport { createContext, createContextScope };\nexport type { CreateScope, Scope };\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';\n\ntype Direction = 'ltr' | 'rtl';\nconst DirectionContext = React.createContext(undefined);\n\n/* -------------------------------------------------------------------------------------------------\n * Direction\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DirectionProviderProps {\n children?: React.ReactNode;\n dir: Direction;\n}\nconst DirectionProvider: React.FC = (props) => {\n const { dir, children } = props;\n return {children};\n};\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction useDirection(localDir?: Direction) {\n const globalDir = React.useContext(DirectionContext);\n return localDir || globalDir || 'ltr';\n}\n\nconst Provider = DirectionProvider;\n\nexport {\n useDirection,\n //\n Provider,\n //\n DirectionProvider,\n};\n","function composeEventHandlers(\n originalEventHandler?: (event: E) => void,\n ourEventHandler?: (event: E) => void,\n { checkForDefaultPrevented = true } = {}\n) {\n return function handleEvent(event: E) {\n originalEventHandler?.(event);\n\n if (checkForDefaultPrevented === false || !((event as unknown) as Event).defaultPrevented) {\n return ourEventHandler?.(event);\n }\n };\n}\n\nexport { composeEventHandlers };\n","/// \n\nimport * as React from 'react';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { Presence } from '@radix-ui/react-presence';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { useCallbackRef } from '@radix-ui/react-use-callback-ref';\nimport { useDirection } from '@radix-ui/react-direction';\nimport { useLayoutEffect } from '@radix-ui/react-use-layout-effect';\nimport { clamp } from '@radix-ui/number';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { useStateMachine } from './useStateMachine';\n\nimport type * as Radix from '@radix-ui/react-primitive';\nimport type { Scope } from '@radix-ui/react-context';\n\ntype Direction = 'ltr' | 'rtl';\ntype Sizes = {\n content: number;\n viewport: number;\n scrollbar: {\n size: number;\n paddingStart: number;\n paddingEnd: number;\n };\n};\n\n/* -------------------------------------------------------------------------------------------------\n * ScrollArea\n * -----------------------------------------------------------------------------------------------*/\n\nconst SCROLL_AREA_NAME = 'ScrollArea';\n\ntype ScopedProps = P & { __scopeScrollArea?: Scope };\nconst [createScrollAreaContext, createScrollAreaScope] = createContextScope(SCROLL_AREA_NAME);\n\ntype ScrollAreaContextValue = {\n type: 'auto' | 'always' | 'scroll' | 'hover';\n dir: Direction;\n scrollHideDelay: number;\n scrollArea: ScrollAreaElement | null;\n viewport: ScrollAreaViewportElement | null;\n onViewportChange(viewport: ScrollAreaViewportElement | null): void;\n content: HTMLDivElement | null;\n onContentChange(content: HTMLDivElement): void;\n scrollbarX: ScrollAreaScrollbarElement | null;\n onScrollbarXChange(scrollbar: ScrollAreaScrollbarElement | null): void;\n scrollbarXEnabled: boolean;\n onScrollbarXEnabledChange(rendered: boolean): void;\n scrollbarY: ScrollAreaScrollbarElement | null;\n onScrollbarYChange(scrollbar: ScrollAreaScrollbarElement | null): void;\n scrollbarYEnabled: boolean;\n onScrollbarYEnabledChange(rendered: boolean): void;\n onCornerWidthChange(width: number): void;\n onCornerHeightChange(height: number): void;\n};\n\nconst [ScrollAreaProvider, useScrollAreaContext] =\n createScrollAreaContext(SCROLL_AREA_NAME);\n\ntype ScrollAreaElement = React.ElementRef;\ntype PrimitiveDivProps = Radix.ComponentPropsWithoutRef;\ninterface ScrollAreaProps extends PrimitiveDivProps {\n type?: ScrollAreaContextValue['type'];\n dir?: ScrollAreaContextValue['dir'];\n scrollHideDelay?: number;\n}\n\nconst ScrollArea = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const {\n __scopeScrollArea,\n type = 'hover',\n dir,\n scrollHideDelay = 600,\n ...scrollAreaProps\n } = props;\n const [scrollArea, setScrollArea] = React.useState(null);\n const [viewport, setViewport] = React.useState(null);\n const [content, setContent] = React.useState(null);\n const [scrollbarX, setScrollbarX] = React.useState(null);\n const [scrollbarY, setScrollbarY] = React.useState(null);\n const [cornerWidth, setCornerWidth] = React.useState(0);\n const [cornerHeight, setCornerHeight] = React.useState(0);\n const [scrollbarXEnabled, setScrollbarXEnabled] = React.useState(false);\n const [scrollbarYEnabled, setScrollbarYEnabled] = React.useState(false);\n const composedRefs = useComposedRefs(forwardedRef, (node) => setScrollArea(node));\n const direction = useDirection(dir);\n\n return (\n \n \n \n );\n }\n);\n\nScrollArea.displayName = SCROLL_AREA_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * ScrollAreaViewport\n * -----------------------------------------------------------------------------------------------*/\n\nconst VIEWPORT_NAME = 'ScrollAreaViewport';\n\ntype ScrollAreaViewportElement = React.ElementRef;\ninterface ScrollAreaViewportProps extends PrimitiveDivProps {}\n\nconst ScrollAreaViewport = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const { __scopeScrollArea, children, ...viewportProps } = props;\n const context = useScrollAreaContext(VIEWPORT_NAME, __scopeScrollArea);\n const ref = React.useRef(null);\n const composedRefs = useComposedRefs(forwardedRef, ref, context.onViewportChange);\n return (\n <>\n {/* Hide scrollbars cross-browser and enable momentum scroll for touch devices */}\n \n \n {/**\n * `display: table` ensures our content div will match the size of its children in both\n * horizontal and vertical axis so we can determine if scroll width/height changed and\n * recalculate thumb sizes. This doesn't account for children with *percentage*\n * widths that change. We'll wait to see what use-cases consumers come up with there\n * before trying to resolve it.\n */}\n \n {children}\n
\n \n >\n );\n }\n);\n\nScrollAreaViewport.displayName = VIEWPORT_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * ScrollAreaScrollbar\n * -----------------------------------------------------------------------------------------------*/\n\nconst SCROLLBAR_NAME = 'ScrollAreaScrollbar';\n\ntype ScrollAreaScrollbarElement = ScrollAreaScrollbarVisibleElement;\ninterface ScrollAreaScrollbarProps extends ScrollAreaScrollbarVisibleProps {\n forceMount?: true;\n}\n\nconst ScrollAreaScrollbar = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const { forceMount, ...scrollbarProps } = props;\n const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);\n const { onScrollbarXEnabledChange, onScrollbarYEnabledChange } = context;\n const isHorizontal = props.orientation === 'horizontal';\n\n React.useEffect(() => {\n isHorizontal ? onScrollbarXEnabledChange(true) : onScrollbarYEnabledChange(true);\n return () => {\n isHorizontal ? onScrollbarXEnabledChange(false) : onScrollbarYEnabledChange(false);\n };\n }, [isHorizontal, onScrollbarXEnabledChange, onScrollbarYEnabledChange]);\n\n return context.type === 'hover' ? (\n \n ) : context.type === 'scroll' ? (\n \n ) : context.type === 'auto' ? (\n \n ) : context.type === 'always' ? (\n \n ) : null;\n }\n);\n\nScrollAreaScrollbar.displayName = SCROLLBAR_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype ScrollAreaScrollbarHoverElement = ScrollAreaScrollbarAutoElement;\ninterface ScrollAreaScrollbarHoverProps extends ScrollAreaScrollbarAutoProps {\n forceMount?: true;\n}\n\nconst ScrollAreaScrollbarHover = React.forwardRef<\n ScrollAreaScrollbarHoverElement,\n ScrollAreaScrollbarHoverProps\n>((props: ScopedProps, forwardedRef) => {\n const { forceMount, ...scrollbarProps } = props;\n const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);\n const [visible, setVisible] = React.useState(false);\n\n React.useEffect(() => {\n const scrollArea = context.scrollArea;\n let hideTimer = 0;\n if (scrollArea) {\n const handlePointerEnter = () => {\n window.clearTimeout(hideTimer);\n setVisible(true);\n };\n const handlePointerLeave = () => {\n hideTimer = window.setTimeout(() => setVisible(false), context.scrollHideDelay);\n };\n scrollArea.addEventListener('pointerenter', handlePointerEnter);\n scrollArea.addEventListener('pointerleave', handlePointerLeave);\n return () => {\n window.clearTimeout(hideTimer);\n scrollArea.removeEventListener('pointerenter', handlePointerEnter);\n scrollArea.removeEventListener('pointerleave', handlePointerLeave);\n };\n }\n }, [context.scrollArea, context.scrollHideDelay]);\n\n return (\n \n \n \n );\n});\n\ntype ScrollAreaScrollbarScrollElement = ScrollAreaScrollbarVisibleElement;\ninterface ScrollAreaScrollbarScrollProps extends ScrollAreaScrollbarVisibleProps {\n forceMount?: true;\n}\n\nconst ScrollAreaScrollbarScroll = React.forwardRef<\n ScrollAreaScrollbarScrollElement,\n ScrollAreaScrollbarScrollProps\n>((props: ScopedProps, forwardedRef) => {\n const { forceMount, ...scrollbarProps } = props;\n const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);\n const isHorizontal = props.orientation === 'horizontal';\n const debounceScrollEnd = useDebounceCallback(() => send('SCROLL_END'), 100);\n const [state, send] = useStateMachine('hidden', {\n hidden: {\n SCROLL: 'scrolling',\n },\n scrolling: {\n SCROLL_END: 'idle',\n POINTER_ENTER: 'interacting',\n },\n interacting: {\n SCROLL: 'interacting',\n POINTER_LEAVE: 'idle',\n },\n idle: {\n HIDE: 'hidden',\n SCROLL: 'scrolling',\n POINTER_ENTER: 'interacting',\n },\n });\n\n React.useEffect(() => {\n if (state === 'idle') {\n const hideTimer = window.setTimeout(() => send('HIDE'), context.scrollHideDelay);\n return () => window.clearTimeout(hideTimer);\n }\n }, [state, context.scrollHideDelay, send]);\n\n React.useEffect(() => {\n const viewport = context.viewport;\n const scrollDirection = isHorizontal ? 'scrollLeft' : 'scrollTop';\n\n if (viewport) {\n let prevScrollPos = viewport[scrollDirection];\n const handleScroll = () => {\n const scrollPos = viewport[scrollDirection];\n const hasScrollInDirectionChanged = prevScrollPos !== scrollPos;\n if (hasScrollInDirectionChanged) {\n send('SCROLL');\n debounceScrollEnd();\n }\n prevScrollPos = scrollPos;\n };\n viewport.addEventListener('scroll', handleScroll);\n return () => viewport.removeEventListener('scroll', handleScroll);\n }\n }, [context.viewport, isHorizontal, send, debounceScrollEnd]);\n\n return (\n \n send('POINTER_ENTER'))}\n onPointerLeave={composeEventHandlers(props.onPointerLeave, () => send('POINTER_LEAVE'))}\n />\n \n );\n});\n\ntype ScrollAreaScrollbarAutoElement = ScrollAreaScrollbarVisibleElement;\ninterface ScrollAreaScrollbarAutoProps extends ScrollAreaScrollbarVisibleProps {\n forceMount?: true;\n}\n\nconst ScrollAreaScrollbarAuto = React.forwardRef<\n ScrollAreaScrollbarAutoElement,\n ScrollAreaScrollbarAutoProps\n>((props: ScopedProps, forwardedRef) => {\n const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);\n const { forceMount, ...scrollbarProps } = props;\n const [visible, setVisible] = React.useState(false);\n const isHorizontal = props.orientation === 'horizontal';\n const handleResize = useDebounceCallback(() => {\n if (context.viewport) {\n const isOverflowX = context.viewport.offsetWidth < context.viewport.scrollWidth;\n const isOverflowY = context.viewport.offsetHeight < context.viewport.scrollHeight;\n setVisible(isHorizontal ? isOverflowX : isOverflowY);\n }\n }, 10);\n\n useResizeObserver(context.viewport, handleResize);\n useResizeObserver(context.content, handleResize);\n\n return (\n \n \n \n );\n});\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype ScrollAreaScrollbarVisibleElement = ScrollAreaScrollbarAxisElement;\ninterface ScrollAreaScrollbarVisibleProps\n extends Omit {\n orientation?: 'horizontal' | 'vertical';\n}\n\nconst ScrollAreaScrollbarVisible = React.forwardRef<\n ScrollAreaScrollbarVisibleElement,\n ScrollAreaScrollbarVisibleProps\n>((props: ScopedProps, forwardedRef) => {\n const { orientation = 'vertical', ...scrollbarProps } = props;\n const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);\n const thumbRef = React.useRef(null);\n const pointerOffsetRef = React.useRef(0);\n const [sizes, setSizes] = React.useState({\n content: 0,\n viewport: 0,\n scrollbar: { size: 0, paddingStart: 0, paddingEnd: 0 },\n });\n const thumbRatio = getThumbRatio(sizes.viewport, sizes.content);\n\n type UncommonProps = 'onThumbPositionChange' | 'onDragScroll' | 'onWheelScroll';\n const commonProps: Omit = {\n ...scrollbarProps,\n sizes,\n onSizesChange: setSizes,\n hasThumb: Boolean(thumbRatio > 0 && thumbRatio < 1),\n onThumbChange: (thumb) => (thumbRef.current = thumb),\n onThumbPointerUp: () => (pointerOffsetRef.current = 0),\n onThumbPointerDown: (pointerPos) => (pointerOffsetRef.current = pointerPos),\n };\n\n function getScrollPosition(pointerPos: number, dir?: Direction) {\n return getScrollPositionFromPointer(pointerPos, pointerOffsetRef.current, sizes, dir);\n }\n\n if (orientation === 'horizontal') {\n return (\n {\n if (context.viewport && thumbRef.current) {\n const scrollPos = context.viewport.scrollLeft;\n const offset = getThumbOffsetFromScroll(scrollPos, sizes, context.dir);\n thumbRef.current.style.transform = `translate3d(${offset}px, 0, 0)`;\n }\n }}\n onWheelScroll={(scrollPos) => {\n if (context.viewport) context.viewport.scrollLeft = scrollPos;\n }}\n onDragScroll={(pointerPos) => {\n if (context.viewport) {\n context.viewport.scrollLeft = getScrollPosition(pointerPos, context.dir);\n }\n }}\n />\n );\n }\n\n if (orientation === 'vertical') {\n return (\n {\n if (context.viewport && thumbRef.current) {\n const scrollPos = context.viewport.scrollTop;\n const offset = getThumbOffsetFromScroll(scrollPos, sizes);\n thumbRef.current.style.transform = `translate3d(0, ${offset}px, 0)`;\n }\n }}\n onWheelScroll={(scrollPos) => {\n if (context.viewport) context.viewport.scrollTop = scrollPos;\n }}\n onDragScroll={(pointerPos) => {\n if (context.viewport) context.viewport.scrollTop = getScrollPosition(pointerPos);\n }}\n />\n );\n }\n\n return null;\n});\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype ScrollAreaScrollbarAxisPrivateProps = {\n hasThumb: boolean;\n sizes: Sizes;\n onSizesChange(sizes: Sizes): void;\n onThumbChange(thumb: ScrollAreaThumbElement | null): void;\n onThumbPointerDown(pointerPos: number): void;\n onThumbPointerUp(): void;\n onThumbPositionChange(): void;\n onWheelScroll(scrollPos: number): void;\n onDragScroll(pointerPos: number): void;\n};\n\ntype ScrollAreaScrollbarAxisElement = ScrollAreaScrollbarImplElement;\ninterface ScrollAreaScrollbarAxisProps\n extends Omit,\n ScrollAreaScrollbarAxisPrivateProps {}\n\nconst ScrollAreaScrollbarX = React.forwardRef<\n ScrollAreaScrollbarAxisElement,\n ScrollAreaScrollbarAxisProps\n>((props: ScopedProps, forwardedRef) => {\n const { sizes, onSizesChange, ...scrollbarProps } = props;\n const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);\n const [computedStyle, setComputedStyle] = React.useState();\n const ref = React.useRef(null);\n const composeRefs = useComposedRefs(forwardedRef, ref, context.onScrollbarXChange);\n\n React.useEffect(() => {\n if (ref.current) setComputedStyle(getComputedStyle(ref.current));\n }, [ref]);\n\n return (\n props.onThumbPointerDown(pointerPos.x)}\n onDragScroll={(pointerPos) => props.onDragScroll(pointerPos.x)}\n onWheelScroll={(event, maxScrollPos) => {\n if (context.viewport) {\n const scrollPos = context.viewport.scrollLeft + event.deltaX;\n props.onWheelScroll(scrollPos);\n // prevent window scroll when wheeling on scrollbar\n if (isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos)) {\n event.preventDefault();\n }\n }\n }}\n onResize={() => {\n if (ref.current && context.viewport && computedStyle) {\n onSizesChange({\n content: context.viewport.scrollWidth,\n viewport: context.viewport.offsetWidth,\n scrollbar: {\n size: ref.current.clientWidth,\n paddingStart: toInt(computedStyle.paddingLeft),\n paddingEnd: toInt(computedStyle.paddingRight),\n },\n });\n }\n }}\n />\n );\n});\n\nconst ScrollAreaScrollbarY = React.forwardRef<\n ScrollAreaScrollbarAxisElement,\n ScrollAreaScrollbarAxisProps\n>((props: ScopedProps, forwardedRef) => {\n const { sizes, onSizesChange, ...scrollbarProps } = props;\n const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);\n const [computedStyle, setComputedStyle] = React.useState();\n const ref = React.useRef(null);\n const composeRefs = useComposedRefs(forwardedRef, ref, context.onScrollbarYChange);\n\n React.useEffect(() => {\n if (ref.current) setComputedStyle(getComputedStyle(ref.current));\n }, [ref]);\n\n return (\n props.onThumbPointerDown(pointerPos.y)}\n onDragScroll={(pointerPos) => props.onDragScroll(pointerPos.y)}\n onWheelScroll={(event, maxScrollPos) => {\n if (context.viewport) {\n const scrollPos = context.viewport.scrollTop + event.deltaY;\n props.onWheelScroll(scrollPos);\n // prevent window scroll when wheeling on scrollbar\n if (isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos)) {\n event.preventDefault();\n }\n }\n }}\n onResize={() => {\n if (ref.current && context.viewport && computedStyle) {\n onSizesChange({\n content: context.viewport.scrollHeight,\n viewport: context.viewport.offsetHeight,\n scrollbar: {\n size: ref.current.clientHeight,\n paddingStart: toInt(computedStyle.paddingTop),\n paddingEnd: toInt(computedStyle.paddingBottom),\n },\n });\n }\n }}\n />\n );\n});\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype ScrollbarContext = {\n hasThumb: boolean;\n scrollbar: ScrollAreaScrollbarElement | null;\n onThumbChange(thumb: ScrollAreaThumbElement | null): void;\n onThumbPointerUp(): void;\n onThumbPointerDown(pointerPos: { x: number; y: number }): void;\n onThumbPositionChange(): void;\n};\n\nconst [ScrollbarProvider, useScrollbarContext] =\n createScrollAreaContext(SCROLLBAR_NAME);\n\ntype ScrollAreaScrollbarImplElement = React.ElementRef;\ntype ScrollAreaScrollbarImplPrivateProps = {\n sizes: Sizes;\n hasThumb: boolean;\n onThumbChange: ScrollbarContext['onThumbChange'];\n onThumbPointerUp: ScrollbarContext['onThumbPointerUp'];\n onThumbPointerDown: ScrollbarContext['onThumbPointerDown'];\n onThumbPositionChange: ScrollbarContext['onThumbPositionChange'];\n onWheelScroll(event: WheelEvent, maxScrollPos: number): void;\n onDragScroll(pointerPos: { x: number; y: number }): void;\n onResize(): void;\n};\ninterface ScrollAreaScrollbarImplProps\n extends PrimitiveDivProps,\n ScrollAreaScrollbarImplPrivateProps {}\n\nconst ScrollAreaScrollbarImpl = React.forwardRef<\n ScrollAreaScrollbarImplElement,\n ScrollAreaScrollbarImplProps\n>((props: ScopedProps, forwardedRef) => {\n const {\n __scopeScrollArea,\n sizes,\n hasThumb,\n onThumbChange,\n onThumbPointerUp,\n onThumbPointerDown,\n onThumbPositionChange,\n onDragScroll,\n onWheelScroll,\n onResize,\n ...scrollbarProps\n } = props;\n const context = useScrollAreaContext(SCROLLBAR_NAME, __scopeScrollArea);\n const [scrollbar, setScrollbar] = React.useState(null);\n const composeRefs = useComposedRefs(forwardedRef, (node) => setScrollbar(node));\n const rectRef = React.useRef(null);\n const prevWebkitUserSelectRef = React.useRef('');\n const viewport = context.viewport;\n const maxScrollPos = sizes.content - sizes.viewport;\n const handleWheelScroll = useCallbackRef(onWheelScroll);\n const handleThumbPositionChange = useCallbackRef(onThumbPositionChange);\n const handleResize = useDebounceCallback(onResize, 10);\n\n function handleDragScroll(event: React.PointerEvent