`, 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(props, ref) {\n const {\n lockScroll = false,\n ...rest\n } = props;\n const lockId = useId();\n index(() => {\n if (!lockScroll) return;\n activeLocks.add(lockId);\n const isIOS = /iP(hone|ad|od)|iOS/.test(getPlatform());\n const bodyStyle = document.body.style;\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 const scrollX = bodyStyle.left ? parseFloat(bodyStyle.left) : window.pageXOffset;\n const scrollY = bodyStyle.top ? parseFloat(bodyStyle.top) : window.pageYOffset;\n bodyStyle.overflow = 'hidden';\n if (scrollbarWidth) {\n bodyStyle[paddingProp] = scrollbarWidth + \"px\";\n }\n\n // Only iOS doesn't respect `overflow: hidden` on document.body, and this\n // technique has fewer side effects.\n if (isIOS) {\n var _window$visualViewpor, _window$visualViewpor2;\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 Object.assign(bodyStyle, {\n position: 'fixed',\n top: -(scrollY - Math.floor(offsetTop)) + \"px\",\n left: -(scrollX - Math.floor(offsetLeft)) + \"px\",\n right: '0'\n });\n }\n return () => {\n activeLocks.delete(lockId);\n if (activeLocks.size === 0) {\n Object.assign(bodyStyle, {\n overflow: '',\n [paddingProp]: ''\n });\n if (isIOS) {\n Object.assign(bodyStyle, {\n position: '',\n top: '',\n left: '',\n right: ''\n });\n window.scrollTo(scrollX, scrollY);\n }\n }\n };\n }, [lockId, 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 */\nfunction useClick(context, props) {\n if (props === void 0) {\n props = {};\n }\n const {\n open,\n onOpenChange,\n dataRef,\n elements: {\n domReference\n }\n } = context;\n const {\n enabled = true,\n event: eventOption = 'click',\n toggle = true,\n ignoreMouse = false,\n keyboardHandlers = true\n } = props;\n const pointerTypeRef = React.useRef();\n const didKeyDownRef = React.useRef(false);\n return React.useMemo(() => {\n if (!enabled) return {};\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 && toggle && (dataRef.current.openEvent ? dataRef.current.openEvent.type === 'mousedown' : true)) {\n onOpenChange(false, event.nativeEvent, 'click');\n } else {\n // Prevent stealing focus from the floating element\n event.preventDefault();\n onOpenChange(true, event.nativeEvent, 'click');\n }\n },\n onClick(event) {\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 && toggle && (dataRef.current.openEvent ? dataRef.current.openEvent.type === 'click' : true)) {\n onOpenChange(false, event.nativeEvent, 'click');\n } else {\n onOpenChange(true, event.nativeEvent, 'click');\n }\n },\n onKeyDown(event) {\n pointerTypeRef.current = undefined;\n if (event.defaultPrevented || !keyboardHandlers || isButtonTarget(event)) {\n return;\n }\n if (event.key === ' ' && !isSpaceIgnored(domReference)) {\n // Prevent scrolling\n event.preventDefault();\n didKeyDownRef.current = true;\n }\n if (event.key === 'Enter') {\n if (open && toggle) {\n onOpenChange(false, event.nativeEvent, 'click');\n } else {\n onOpenChange(true, event.nativeEvent, 'click');\n }\n }\n },\n onKeyUp(event) {\n if (event.defaultPrevented || !keyboardHandlers || isButtonTarget(event) || isSpaceIgnored(domReference)) {\n return;\n }\n if (event.key === ' ' && didKeyDownRef.current) {\n didKeyDownRef.current = false;\n if (open && toggle) {\n onOpenChange(false, event.nativeEvent, 'click');\n } else {\n onOpenChange(true, event.nativeEvent, 'click');\n }\n }\n }\n }\n };\n }, [enabled, dataRef, eventOption, ignoreMouse, keyboardHandlers, domReference, toggle, open, onOpenChange]);\n}\n\nfunction createVirtualElement(domRef, data) {\n let offsetX = null;\n let offsetY = null;\n let isAutoUpdateEvent = false;\n return {\n contextElement: domRef.current || undefined,\n getBoundingClientRect() {\n var _domRef$current, _data$dataRef$current;\n const domRect = ((_domRef$current = domRef.current) == null ? void 0 : _domRef$current.getBoundingClientRect()) || {\n width: 0,\n height: 0,\n x: 0,\n y: 0\n };\n const isXAxis = data.axis === 'x' || data.axis === 'both';\n const isYAxis = data.axis === 'y' || data.axis === 'both';\n const canTrackCursorOnAutoUpdate = ['mouseenter', 'mousemove'].includes(((_data$dataRef$current = data.dataRef.current.openEvent) == null ? void 0 : _data$dataRef$current.type) || '') && data.pointerType !== 'touch';\n let width = domRect.width;\n let height = domRect.height;\n let x = domRect.x;\n let y = domRect.y;\n if (offsetX == null && data.x && isXAxis) {\n offsetX = domRect.x - data.x;\n }\n if (offsetY == null && data.y && isYAxis) {\n offsetY = domRect.y - data.y;\n }\n x -= offsetX || 0;\n y -= offsetY || 0;\n width = 0;\n height = 0;\n if (!isAutoUpdateEvent || canTrackCursorOnAutoUpdate) {\n width = data.axis === 'y' ? domRect.width : 0;\n height = data.axis === 'x' ? domRect.height : 0;\n x = isXAxis && data.x != null ? data.x : x;\n y = isYAxis && data.y != null ? data.y : y;\n } else if (isAutoUpdateEvent && !canTrackCursorOnAutoUpdate) {\n height = data.axis === 'x' ? domRect.height : height;\n width = data.axis === 'y' ? domRect.width : width;\n }\n isAutoUpdateEvent = true;\n return {\n width,\n height,\n x,\n y,\n top: y,\n right: x + width,\n bottom: y + height,\n left: x\n };\n }\n };\n}\nfunction isMouseBasedEvent(event) {\n return event != null && event.clientX != null;\n}\n/**\n * Positions the floating element relative to a client point (in the viewport),\n * such as the mouse position. By default, it follows the mouse cursor.\n * @see https://floating-ui.com/docs/useClientPoint\n */\nfunction useClientPoint(context, props) {\n if (props === void 0) {\n props = {};\n }\n const {\n open,\n refs,\n dataRef,\n elements: {\n floating\n }\n } = context;\n const {\n enabled = true,\n axis = 'both',\n x = null,\n y = null\n } = props;\n const initialRef = React.useRef(false);\n const cleanupListenerRef = React.useRef(null);\n const [pointerType, setPointerType] = React.useState();\n const [reactive, setReactive] = React.useState([]);\n const setReference = useEffectEvent((x, y) => {\n if (initialRef.current) return;\n\n // Prevent setting if the open event was not a mouse-like one\n // (e.g. focus to open, then hover over the reference element).\n // Only apply if the event exists.\n if (dataRef.current.openEvent && !isMouseBasedEvent(dataRef.current.openEvent)) {\n return;\n }\n refs.setPositionReference(createVirtualElement(refs.domReference, {\n x,\n y,\n axis,\n dataRef,\n pointerType\n }));\n });\n const handleReferenceEnterOrMove = useEffectEvent(event => {\n if (x != null || y != null) return;\n if (!open) {\n setReference(event.clientX, event.clientY);\n } else if (!cleanupListenerRef.current) {\n // If there's no cleanup, there's no listener, but we want to ensure\n // we add the listener if the cursor landed on the floating element and\n // then back on the reference (i.e. it's interactive).\n setReactive([]);\n }\n });\n\n // If the pointer is a mouse-like pointer, we want to continue following the\n // mouse even if the floating element is transitioning out. On touch\n // devices, this is undesirable because the floating element will move to\n // the dismissal touch point.\n const openCheck = isMouseLikePointerType(pointerType) ? floating : open;\n const addListener = React.useCallback(() => {\n // Explicitly specified `x`/`y` coordinates shouldn't add a listener.\n if (!openCheck || !enabled || x != null || y != null) return;\n const win = getWindow(refs.floating.current);\n function handleMouseMove(event) {\n const target = getTarget(event);\n if (!contains(refs.floating.current, target)) {\n setReference(event.clientX, event.clientY);\n } else {\n win.removeEventListener('mousemove', handleMouseMove);\n cleanupListenerRef.current = null;\n }\n }\n if (!dataRef.current.openEvent || isMouseBasedEvent(dataRef.current.openEvent)) {\n win.addEventListener('mousemove', handleMouseMove);\n const cleanup = () => {\n win.removeEventListener('mousemove', handleMouseMove);\n cleanupListenerRef.current = null;\n };\n cleanupListenerRef.current = cleanup;\n return cleanup;\n }\n refs.setPositionReference(refs.domReference.current);\n }, [dataRef, enabled, openCheck, refs, setReference, x, y]);\n React.useEffect(() => {\n return addListener();\n }, [addListener, reactive]);\n React.useEffect(() => {\n if (enabled && !floating) {\n initialRef.current = false;\n }\n }, [enabled, floating]);\n React.useEffect(() => {\n if (!enabled && open) {\n initialRef.current = true;\n }\n }, [enabled, open]);\n index(() => {\n if (enabled && (x != null || y != null)) {\n initialRef.current = false;\n setReference(x, y);\n }\n }, [enabled, x, y, setReference]);\n return React.useMemo(() => {\n if (!enabled) return {};\n function setPointerTypeRef(_ref) {\n let {\n pointerType\n } = _ref;\n setPointerType(pointerType);\n }\n return {\n reference: {\n onPointerDown: setPointerTypeRef,\n onPointerEnter: setPointerTypeRef,\n onMouseMove: handleReferenceEnterOrMove,\n onMouseEnter: handleReferenceEnterOrMove\n }\n };\n }, [enabled, handleReferenceEnterOrMove]);\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 normalizeProp = normalizable => {\n var _normalizable$escapeK, _normalizable$outside;\n return {\n escapeKey: typeof normalizable === 'boolean' ? normalizable : (_normalizable$escapeK = normalizable == null ? void 0 : normalizable.escapeKey) != null ? _normalizable$escapeK : false,\n outsidePress: typeof normalizable === 'boolean' ? normalizable : (_normalizable$outside = normalizable == null ? void 0 : normalizable.outsidePress) != null ? _normalizable$outside : 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 */\nfunction useDismiss(context, props) {\n if (props === void 0) {\n props = {};\n }\n const {\n open,\n onOpenChange,\n nodeId,\n elements: {\n reference,\n domReference,\n floating\n },\n dataRef\n } = context;\n const {\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,\n capture\n } = props;\n const tree = useFloatingTree();\n const outsidePressFn = useEffectEvent(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 endedOrStartedInsideRef = React.useRef(false);\n const {\n escapeKey: escapeKeyBubbles,\n outsidePress: outsidePressBubbles\n } = normalizeProp(bubbles);\n const {\n escapeKey: escapeKeyCapture,\n outsidePress: outsidePressCapture\n } = normalizeProp(capture);\n const closeOnEscapeKeyDown = useEffectEvent(event => {\n if (!open || !enabled || !escapeKey || event.key !== 'Escape') {\n return;\n }\n const children = tree ? getChildren(tree.nodesRef.current, nodeId) : [];\n if (!escapeKeyBubbles) {\n event.stopPropagation();\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 }\n onOpenChange(false, isReactEvent(event) ? event.nativeEvent : event, 'escape-key');\n });\n const closeOnEscapeKeyDownCapture = useEffectEvent(event => {\n var _getTarget2;\n const callback = () => {\n var _getTarget;\n closeOnEscapeKeyDown(event);\n (_getTarget = getTarget(event)) == null || _getTarget.removeEventListener('keydown', callback);\n };\n (_getTarget2 = getTarget(event)) == null || _getTarget2.addEventListener('keydown', callback);\n });\n const closeOnPressOutside = useEffectEvent(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\n // When click outside is lazy (`click` event), handle dragging.\n // Don't close if:\n // - The click started inside the floating element.\n // - The click ended inside the floating element.\n const endedOrStartedInside = endedOrStartedInsideRef.current;\n endedOrStartedInsideRef.current = false;\n if (outsidePressEvent === 'click' && endedOrStartedInside) {\n return;\n }\n if (insideReactTree) {\n return;\n }\n if (typeof outsidePress === 'function' && !outsidePress(event)) {\n return;\n }\n const target = getTarget(event);\n const inertSelector = \"[\" + createAttribute('inert') + \"]\";\n const markers = getDocument(floating).querySelectorAll(inertSelector);\n let targetRootAncestor = isElement(target) ? target : null;\n while (targetRootAncestor && !isLastTraversableNode(targetRootAncestor)) {\n const nextParent = getParentNode(targetRootAncestor);\n if (isLastTraversableNode(nextParent) || !isElement(nextParent)) {\n break;\n }\n targetRootAncestor = nextParent;\n }\n\n // Check if the click occurred on a third-party element injected after the\n // floating element rendered.\n if (markers.length && isElement(target) && !isRootElement(target) &&\n // Clicked on a direct ancestor (e.g. FloatingOverlay).\n !contains(target, floating) &&\n // If the target root element contains none of the markers, then the\n // element was injected after the floating element rendered.\n Array.from(markers).every(marker => !contains(targetRootAncestor, marker))) {\n return;\n }\n\n // Check if the click occurred on the scrollbar\n if (isHTMLElement(target) && floating) {\n // In Firefox, `target.scrollWidth > target.clientWidth` for inline\n // elements.\n const canScrollX = target.clientWidth > 0 && target.scrollWidth > target.clientWidth;\n const canScrollY = target.clientHeight > 0 && 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 = 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 onOpenChange(false, event, 'outside-press');\n });\n const closeOnPressOutsideCapture = useEffectEvent(event => {\n var _getTarget4;\n const callback = () => {\n var _getTarget3;\n closeOnPressOutside(event);\n (_getTarget3 = getTarget(event)) == null || _getTarget3.removeEventListener(outsidePressEvent, callback);\n };\n (_getTarget4 = getTarget(event)) == null || _getTarget4.addEventListener(outsidePressEvent, callback);\n });\n React.useEffect(() => {\n if (!open || !enabled) {\n return;\n }\n dataRef.current.__escapeKeyBubbles = escapeKeyBubbles;\n dataRef.current.__outsidePressBubbles = outsidePressBubbles;\n function onScroll(event) {\n onOpenChange(false, event, 'ancestor-scroll');\n }\n const doc = getDocument(floating);\n escapeKey && doc.addEventListener('keydown', escapeKeyCapture ? closeOnEscapeKeyDownCapture : closeOnEscapeKeyDown, escapeKeyCapture);\n outsidePress && doc.addEventListener(outsidePressEvent, outsidePressCapture ? closeOnPressOutsideCapture : closeOnPressOutside, outsidePressCapture);\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', escapeKeyCapture ? closeOnEscapeKeyDownCapture : closeOnEscapeKeyDown, escapeKeyCapture);\n outsidePress && doc.removeEventListener(outsidePressEvent, outsidePressCapture ? closeOnPressOutsideCapture : closeOnPressOutside, outsidePressCapture);\n ancestors.forEach(ancestor => {\n ancestor.removeEventListener('scroll', onScroll);\n });\n };\n }, [dataRef, floating, domReference, reference, escapeKey, outsidePress, outsidePressEvent, open, onOpenChange, ancestorScroll, enabled, escapeKeyBubbles, outsidePressBubbles, closeOnEscapeKeyDown, escapeKeyCapture, closeOnEscapeKeyDownCapture, closeOnPressOutside, outsidePressCapture, closeOnPressOutsideCapture]);\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 onKeyDown: closeOnEscapeKeyDown,\n [bubbleHandlerKeys[referencePressEvent]]: event => {\n if (referencePress) {\n onOpenChange(false, event.nativeEvent, 'reference-press');\n }\n }\n },\n floating: {\n onKeyDown: closeOnEscapeKeyDown,\n onMouseDown() {\n endedOrStartedInsideRef.current = true;\n },\n onMouseUp() {\n endedOrStartedInsideRef.current = true;\n },\n [captureHandlerKeys[outsidePressEvent]]: () => {\n insideReactTreeRef.current = true;\n }\n }\n };\n }, [enabled, referencePress, outsidePressEvent, referencePressEvent, onOpenChange, closeOnEscapeKeyDown]);\n}\n\n/**\n * Provides data to position a floating element and context to add interactions.\n * @see https://floating-ui.com/docs/useFloating\n */\nfunction useFloating(options) {\n var _options$elements;\n if (options === void 0) {\n options = {};\n }\n const {\n open = false,\n onOpenChange: unstable_onOpenChange,\n nodeId\n } = options;\n const [_domReference, setDomReference] = React.useState(null);\n const [positionReference, _setPositionReference] = React.useState(null);\n const optionDomReference = (_options$elements = options.elements) == null ? void 0 : _options$elements.reference;\n const domReference = optionDomReference || _domReference;\n if (process.env.NODE_ENV !== \"production\") {\n if (optionDomReference && !isElement(optionDomReference)) {\n error('Cannot pass a virtual element to the `elements.reference` option,', 'as it must be a real DOM element. Use `refs.setPositionReference()`', 'instead.');\n }\n }\n index(() => {\n if (domReference) {\n domReferenceRef.current = domReference;\n }\n }, [domReference]);\n const position = useFloating$1({\n ...options,\n elements: {\n ...options.elements,\n ...(positionReference && {\n reference: positionReference\n })\n }\n });\n const tree = useFloatingTree();\n const nested = useFloatingParentNodeId() != null;\n const onOpenChange = useEffectEvent((open, event, reason) => {\n dataRef.current.openEvent = open ? event : undefined;\n events.emit('openchange', {\n open,\n event,\n reason,\n nested\n });\n unstable_onOpenChange == null || unstable_onOpenChange(open, event, reason);\n });\n const domReferenceRef = React.useRef(null);\n const dataRef = React.useRef({});\n const events = React.useState(() => createPubSub())[0];\n const floatingId = useId();\n const setPositionReference = React.useCallback(node => {\n const computedPositionReference = isElement(node) ? {\n getBoundingClientRect: () => node.getBoundingClientRect(),\n contextElement: node\n } : node;\n // Store the positionReference in state if the DOM reference is specified externally via the\n // `elements.reference` option. This ensures that it won't be overridden on future renders.\n _setPositionReference(computedPositionReference);\n position.refs.setReference(computedPositionReference);\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 context = React.useMemo(() => ({\n ...position,\n refs,\n elements,\n dataRef,\n nodeId,\n floatingId,\n events,\n open,\n onOpenChange\n }), [position, nodeId, floatingId, 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 elements\n }), [position, refs, elements, context]);\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 */\nfunction useFocus(context, props) {\n if (props === void 0) {\n props = {};\n }\n const {\n open,\n onOpenChange,\n events,\n refs,\n elements: {\n domReference\n }\n } = context;\n const {\n enabled = true,\n visibleOnly = true\n } = props;\n const blockFocusRef = React.useRef(false);\n const timeoutRef = React.useRef();\n const keyboardModalityRef = React.useRef(true);\n React.useEffect(() => {\n if (!enabled) {\n return;\n }\n const win = getWindow(domReference);\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(getDocument(domReference))) {\n blockFocusRef.current = true;\n }\n }\n function onKeyDown() {\n keyboardModalityRef.current = true;\n }\n win.addEventListener('blur', onBlur);\n win.addEventListener('keydown', onKeyDown, true);\n return () => {\n win.removeEventListener('blur', onBlur);\n win.removeEventListener('keydown', onKeyDown, true);\n };\n }, [domReference, open, enabled]);\n React.useEffect(() => {\n if (!enabled) {\n return;\n }\n function onOpenChange(_ref) {\n let {\n reason\n } = _ref;\n if (reason === 'reference-press' || reason === 'escape-key') {\n blockFocusRef.current = true;\n }\n }\n events.on('openchange', onOpenChange);\n return () => {\n events.off('openchange', onOpenChange);\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(event) {\n if (isVirtualPointerEvent(event.nativeEvent)) return;\n keyboardModalityRef.current = false;\n },\n onMouseLeave() {\n blockFocusRef.current = false;\n },\n onFocus(event) {\n if (blockFocusRef.current) return;\n const target = getTarget(event.nativeEvent);\n if (visibleOnly && isElement(target)) {\n try {\n // Mac Safari unreliably matches `:focus-visible` on the reference\n // if focus was outside the page initially - use the fallback\n // instead.\n if (isSafari() && isMac()) throw Error();\n if (!target.matches(':focus-visible')) return;\n } catch (e) {\n // Old browsers will throw an error when using `:focus-visible`.\n if (!keyboardModalityRef.current && !isTypeableElement(target)) {\n return;\n }\n }\n }\n onOpenChange(true, event.nativeEvent, 'focus');\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(createAttribute('focus-guard')) && relatedTarget.getAttribute('data-type') === 'outside';\n\n // Wait for the window blur listener to fire.\n timeoutRef.current = window.setTimeout(() => {\n const activeEl = activeElement(domReference ? domReference.ownerDocument : document);\n\n // Focus left the page, keep it open.\n if (!relatedTarget && activeEl === domReference) return;\n\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 // We can not rely on relatedTarget to point to the correct element\n // as it will only point to the shadow host of the newly focused element\n // and not the element that actually has received focus if it is located\n // inside a shadow root.\n if (contains(refs.floating.current, activeEl) || contains(domReference, activeEl) || movedToFocusGuard) {\n return;\n }\n onOpenChange(false, event.nativeEvent, 'focus');\n });\n }\n }\n };\n }, [enabled, visibleOnly, domReference, refs, onOpenChange]);\n}\n\nconst ACTIVE_KEY = 'active';\nconst SELECTED_KEY = 'selected';\nfunction mergeProps(userProps, propsList, elementKey) {\n const map = new Map();\n const isItem = elementKey === 'item';\n let domUserProps = userProps;\n if (isItem && userProps) {\n const {\n [ACTIVE_KEY]: _,\n [SELECTED_KEY]: __,\n ...validProps\n } = userProps;\n domUserProps = validProps;\n }\n return {\n ...(elementKey === 'floating' && {\n tabIndex: -1\n }),\n ...domUserProps,\n ...propsList.map(value => {\n const propsOrGetProps = value ? value[elementKey] : null;\n if (typeof propsOrGetProps === 'function') {\n return userProps ? propsOrGetProps(userProps) : null;\n }\n return propsOrGetProps;\n }).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 (isItem && [ACTIVE_KEY, SELECTED_KEY].includes(key)) {\n return;\n }\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 || _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 return (_map$get2 = map.get(key)) == null ? void 0 : _map$get2.map(fn => fn(...args)).find(val => val !== undefined);\n };\n }\n } else {\n acc[key] = value;\n }\n });\n return acc;\n }, {})\n };\n}\n\n/**\n * Merges an array of interaction hooks' props into prop getters, allowing\n * event handler functions to be composed together without overwriting one\n * another.\n * @see https://floating-ui.com/docs/useInteractions\n */\nfunction useInteractions(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\nlet isPreventScrollSupported = false;\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}\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 */\nfunction useListNavigation(context, props) {\n const {\n open,\n onOpenChange,\n refs,\n elements: {\n domReference,\n floating\n }\n } = context;\n const {\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 virtualItemRef,\n itemSizes,\n dense = false\n } = props;\n if (process.env.NODE_ENV !== \"production\") {\n if (allowEscape) {\n if (!loop) {\n warn('`useListNavigation` looping must be enabled to allow escaping.');\n }\n if (!virtual) {\n warn('`useListNavigation` must be virtual to allow escaping.');\n }\n }\n if (orientation === 'vertical' && cols > 1) {\n warn('In grid list navigation mode (`cols` > 1), the `orientation` should', 'be either \"horizontal\" or \"both\".');\n }\n }\n const parentId = useFloatingParentNodeId();\n const tree = useFloatingTree();\n const onNavigate = useEffectEvent(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 previousMountedRef = React.useRef(!!floating);\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 [virtualId, setVirtualId] = React.useState();\n const focusItem = useEffectEvent(function (listRef, indexRef, forceScrollIntoView) {\n if (forceScrollIntoView === void 0) {\n forceScrollIntoView = false;\n }\n const item = listRef.current[indexRef.current];\n if (!item) return;\n if (virtual) {\n setActiveId(item.id);\n tree == null || tree.events.emit('virtualfocus', item);\n if (virtualItemRef) {\n virtualItemRef.current = item;\n }\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 || item.scrollIntoView(typeof scrollIntoViewOptions === 'boolean' ? {\n block: 'nearest',\n inline: 'nearest'\n } : scrollIntoViewOptions);\n }\n });\n });\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 && floating) {\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 indexRef.current = selectedIndex;\n onNavigate(selectedIndex);\n }\n } else if (previousMountedRef.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, floating, 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 && floating) {\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 (previousMountedRef.current) {\n indexRef.current = -1;\n focusItem(listRef, indexRef);\n }\n\n // Initial sync.\n if (!previousMountedRef.current && focusItemOnOpenRef.current && (keyRef.current != null || focusItemOnOpenRef.current === true && keyRef.current == null)) {\n let runs = 0;\n const waitForListPopulated = () => {\n if (listRef.current[0] == null) {\n // Avoid letting the browser paint if possible on the first try,\n // otherwise use rAF. Don't try more than twice, since something\n // is wrong otherwise.\n if (runs < 2) {\n const scheduler = runs ? requestAnimationFrame : queueMicrotask;\n scheduler(waitForListPopulated);\n }\n runs++;\n } else {\n indexRef.current = keyRef.current == null || isMainOrientationToEndKey(keyRef.current, orientation, rtl) || nested ? getMinIndex(listRef, disabledIndicesRef.current) : getMaxIndex(listRef, disabledIndicesRef.current);\n keyRef.current = null;\n onNavigate(indexRef.current);\n }\n };\n waitForListPopulated();\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, floating, 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 var _nodes$find;\n if (!enabled || floating || !tree || virtual || !previousMountedRef.current) {\n return;\n }\n const nodes = tree.nodesRef.current;\n const parent = (_nodes$find = nodes.find(node => node.id === parentId)) == null || (_nodes$find = _nodes$find.context) == null ? void 0 : _nodes$find.elements.floating;\n const activeEl = activeElement(getDocument(floating));\n const treeContainsActiveEl = nodes.some(node => node.context && contains(node.context.elements.floating, activeEl));\n if (parent && !treeContainsActiveEl && isPointerModalityRef.current) {\n parent.focus({\n preventScroll: true\n });\n }\n }, [enabled, floating, tree, parentId, virtual]);\n index(() => {\n if (!enabled || !tree || !virtual || parentId) return;\n function handleVirtualFocus(item) {\n setVirtualId(item.id);\n if (virtualItemRef) {\n virtualItemRef.current = item;\n }\n }\n tree.events.on('virtualfocus', handleVirtualFocus);\n return () => {\n tree.events.off('virtualfocus', handleVirtualFocus);\n };\n }, [enabled, tree, virtual, parentId, virtualItemRef]);\n index(() => {\n previousOnNavigateRef.current = onNavigate;\n previousMountedRef.current = !!floating;\n });\n index(() => {\n if (!open) {\n keyRef.current = null;\n }\n }, [open]);\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(_ref) {\n let {\n currentTarget\n } = _ref;\n syncCurrentTarget(currentTarget);\n },\n onClick: _ref2 => {\n let {\n currentTarget\n } = _ref2;\n return currentTarget.focus({\n preventScroll: true\n });\n },\n // Safari\n ...(focusItemOnHover && {\n onMouseMove(_ref3) {\n let {\n currentTarget\n } = _ref3;\n syncCurrentTarget(currentTarget);\n },\n onPointerLeave(_ref4) {\n let {\n pointerType\n } = _ref4;\n if (!isPointerModalityRef.current || pointerType === 'touch') {\n return;\n }\n indexRef.current = -1;\n focusItem(listRef, indexRef);\n onNavigate(null);\n if (!virtual) {\n enqueueFocus(refs.floating.current, {\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, event.nativeEvent, 'list-navigation');\n if (isHTMLElement(domReference) && !virtual) {\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 stopEvent(event);\n indexRef.current = minIndex;\n onNavigate(indexRef.current);\n }\n if (event.key === 'End') {\n stopEvent(event);\n indexRef.current = maxIndex;\n onNavigate(indexRef.current);\n }\n\n // Grid navigation.\n if (cols > 1) {\n const sizes = itemSizes || Array.from({\n length: listRef.current.length\n }, () => ({\n width: 1,\n height: 1\n }));\n // To calculate movements on the grid, we use hypothetical cell indices\n // as if every item was 1x1, then convert back to real indices.\n const cellMap = buildCellMap(sizes, cols, dense);\n const minGridIndex = cellMap.findIndex(index => index != null && !(disabledIndices != null && disabledIndices.includes(index)));\n // last enabled index\n const maxGridIndex = cellMap.reduce((foundIndex, index, cellIndex) => index != null && !(disabledIndices != null && disabledIndices.includes(index)) ? cellIndex : foundIndex, -1);\n indexRef.current = cellMap[getGridNavigatedIndex({\n current: cellMap.map(itemIndex => itemIndex != null ? listRef.current[itemIndex] : null)\n }, {\n event,\n orientation,\n loop,\n cols,\n // treat undefined (empty grid spaces) as disabled indices so we\n // don't end up in them\n disabledIndices: getCellIndices([...(disabledIndices || []), undefined], cellMap),\n minIndex: minGridIndex,\n maxIndex: maxGridIndex,\n prevIndex: getCellIndexOfCorner(indexRef.current, sizes, cellMap, cols,\n // use a corner matching the edge closest to the direction\n // we're moving in so we don't end up in the same item. Prefer\n // top/left over bottom/right.\n event.key === ARROW_DOWN ? 'bl' : event.key === ARROW_RIGHT ? 'tr' : 'tl'),\n stopEvent: true\n })]; // navigated cell will never be nullish\n\n onNavigate(indexRef.current);\n if (orientation === 'both') {\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(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': virtualId || activeId\n };\n const activeItem = listRef.current.find(item => (item == null ? void 0 : item.id) === activeId);\n return {\n reference: {\n ...ariaActiveDescendantProp,\n onKeyDown(event) {\n isPointerModalityRef.current = false;\n const isArrowKey = event.key.indexOf('Arrow') === 0;\n const isCrossOpenKey = isCrossOrientationOpenKey(event.key, orientation, rtl);\n const isCrossCloseKey = isCrossOrientationCloseKey(event.key, orientation, rtl);\n const isMainKey = isMainOrientationKey(event.key, orientation);\n const isNavigationKey = (nested ? isCrossOpenKey : isMainKey) || event.key === 'Enter' || event.key.trim() === '';\n if (virtual && open) {\n const rootNode = tree == null ? void 0 : tree.nodesRef.current.find(node => node.parentId == null);\n const deepestNode = tree && rootNode ? getDeepestNode(tree.nodesRef.current, rootNode.id) : null;\n if (isArrowKey && deepestNode && virtualItemRef) {\n const eventObject = new KeyboardEvent('keydown', {\n key: event.key,\n bubbles: true\n });\n if (isCrossOpenKey || isCrossCloseKey) {\n var _deepestNode$context, _deepestNode$context2;\n const isCurrentTarget = ((_deepestNode$context = deepestNode.context) == null ? void 0 : _deepestNode$context.elements.domReference) === event.currentTarget;\n const dispatchItem = isCrossCloseKey && !isCurrentTarget ? (_deepestNode$context2 = deepestNode.context) == null ? void 0 : _deepestNode$context2.elements.domReference : isCrossOpenKey ? activeItem : null;\n if (dispatchItem) {\n stopEvent(event);\n dispatchItem.dispatchEvent(eventObject);\n setVirtualId(undefined);\n }\n }\n if (isMainKey && deepestNode.context) {\n if (deepestNode.context.open && deepestNode.parentId && event.currentTarget !== deepestNode.context.elements.domReference) {\n var _deepestNode$context$;\n stopEvent(event);\n (_deepestNode$context$ = deepestNode.context.elements.domReference) == null || _deepestNode$context$.dispatchEvent(eventObject);\n return;\n }\n }\n }\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 if (isNavigationKey) {\n keyRef.current = nested && isMainKey ? null : event.key;\n }\n if (nested) {\n if (isCrossOpenKey) {\n stopEvent(event);\n if (open) {\n indexRef.current = getMinIndex(listRef, disabledIndices);\n onNavigate(indexRef.current);\n } else {\n onOpenChange(true, event.nativeEvent, 'list-navigation');\n }\n }\n return;\n }\n if (isMainKey) {\n if (selectedIndex != null) {\n indexRef.current = selectedIndex;\n }\n stopEvent(event);\n if (!open && openOnArrowKeyDown) {\n onOpenChange(true, event.nativeEvent, 'list-navigation');\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 ...(!isTypeableCombobox(domReference) && ariaActiveDescendantProp),\n onKeyDown,\n onPointerMove() {\n isPointerModalityRef.current = true;\n }\n },\n item\n };\n }, [domReference, refs, activeId, virtualId, disabledIndicesRef, latestOpenRef, listRef, enabled, orientation, rtl, virtual, open, hasActiveIndex, nested, selectedIndex, openOnArrowKeyDown, allowEscape, cols, loop, focusItemOnOpen, onNavigate, onOpenChange, item, tree, virtualItemRef, itemSizes, dense]);\n}\n\nconst componentRoleToAriaRoleMap = /*#__PURE__*/new Map([['select', 'listbox'], ['combobox', 'listbox'], ['label', false]]);\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 */\nfunction useRole(context, props) {\n var _componentRoleToAriaR;\n if (props === void 0) {\n props = {};\n }\n const {\n open,\n floatingId\n } = context;\n const {\n enabled = true,\n role = 'dialog'\n } = props;\n const ariaRole = (_componentRoleToAriaR = componentRoleToAriaRoleMap.get(role)) != null ? _componentRoleToAriaR : role;\n const referenceId = useId();\n const parentId = useFloatingParentNodeId();\n const isNested = parentId != null;\n return React.useMemo(() => {\n if (!enabled) return {};\n const floatingProps = {\n id: floatingId,\n ...(ariaRole && {\n role: ariaRole\n })\n };\n if (ariaRole === 'tooltip' || role === 'label') {\n return {\n reference: {\n [\"aria-\" + (role === 'label' ? 'labelledby' : 'describedby')]: open ? floatingId : undefined\n },\n floating: floatingProps\n };\n }\n return {\n reference: {\n 'aria-expanded': open ? 'true' : 'false',\n 'aria-haspopup': ariaRole === 'alertdialog' ? 'dialog' : ariaRole,\n 'aria-controls': open ? floatingId : undefined,\n ...(ariaRole === 'listbox' && {\n role: 'combobox'\n }),\n ...(ariaRole === 'menu' && {\n id: referenceId\n }),\n ...(ariaRole === 'menu' && isNested && {\n role: 'menuitem'\n }),\n ...(role === 'select' && {\n 'aria-autocomplete': 'none'\n }),\n ...(role === 'combobox' && {\n 'aria-autocomplete': 'list'\n })\n },\n floating: {\n ...floatingProps,\n ...(ariaRole === 'menu' && {\n 'aria-labelledby': referenceId\n })\n },\n item(_ref) {\n let {\n active,\n selected\n } = _ref;\n const commonProps = {\n role: 'option',\n ...(active && {\n id: floatingId + \"-option\"\n })\n };\n\n // For `menu`, we are unable to tell if the item is a `menuitemradio`\n // or `menuitemcheckbox`. For backwards-compatibility reasons, also\n // avoid defaulting to `menuitem` as it may overwrite custom role props.\n switch (role) {\n case 'select':\n return {\n ...commonProps,\n 'aria-selected': active && selected\n };\n case 'combobox':\n {\n return {\n ...commonProps,\n ...(active && {\n 'aria-selected': true\n })\n };\n }\n }\n return {};\n }\n };\n }, [enabled, role, ariaRole, open, floatingId, referenceId, isNested]);\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 execWithArgsOrReturn(valueOrFn, args) {\n return typeof valueOrFn === 'function' ? valueOrFn(args) : valueOrFn;\n}\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(context, props) {\n if (props === void 0) {\n props = {};\n }\n const {\n open,\n elements: {\n floating\n }\n } = context;\n const {\n duration = 250\n } = props;\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 }\n setInitiated(true);\n setStatus('close');\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, props) {\n if (props === void 0) {\n props = {};\n }\n const {\n initial: unstable_initial = {\n opacity: 0\n },\n open: unstable_open,\n close: unstable_close,\n common: unstable_common,\n duration = 250\n } = props;\n const placement = context.placement;\n const side = placement.split('-')[0];\n const fnArgs = React.useMemo(() => ({\n side,\n placement\n }), [side, placement]);\n const isNumberDuration = typeof duration === 'number';\n const openDuration = (isNumberDuration ? duration : duration.open) || 0;\n const closeDuration = (isNumberDuration ? duration : duration.close) || 0;\n const [styles, setStyles] = React.useState(() => ({\n ...execWithArgsOrReturn(unstable_common, fnArgs),\n ...execWithArgsOrReturn(unstable_initial, fnArgs)\n }));\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 index(() => {\n const initialStyles = execWithArgsOrReturn(initialRef.current, fnArgs);\n const closeStyles = execWithArgsOrReturn(closeRef.current, fnArgs);\n const commonStyles = execWithArgsOrReturn(commonRef.current, fnArgs);\n const openStyles = execWithArgsOrReturn(openRef.current, fnArgs) || Object.keys(initialStyles).reduce((acc, key) => {\n acc[key] = '';\n return acc;\n }, {});\n if (status === 'initial') {\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 }, [closeDuration, closeRef, initialRef, openRef, commonRef, openDuration, status, fnArgs]);\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 */\nfunction useTypeahead(context, props) {\n var _ref;\n const {\n open,\n dataRef\n } = context;\n const {\n listRef,\n activeIndex,\n onMatch: unstable_onMatch,\n onTypingChange: unstable_onTypingChange,\n enabled = true,\n findMatch = null,\n resetMs = 750,\n ignoreKeys = [],\n selectedIndex = null\n } = props;\n const timeoutIdRef = React.useRef();\n const stringRef = React.useRef('');\n const prevIndexRef = React.useRef((_ref = selectedIndex != null ? selectedIndex : activeIndex) != null ? _ref : -1);\n const matchIndexRef = React.useRef(null);\n const onMatch = useEffectEvent(unstable_onMatch);\n const onTypingChange = useEffectEvent(unstable_onTypingChange);\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 _ref2;\n prevIndexRef.current = (_ref2 = selectedIndex != null ? selectedIndex : activeIndex) != null ? _ref2 : -1;\n }\n }, [open, selectedIndex, activeIndex]);\n return React.useMemo(() => {\n if (!enabled) {\n return {};\n }\n function setTypingChange(value) {\n if (value) {\n if (!dataRef.current.typing) {\n dataRef.current.typing = value;\n onTypingChange(value);\n }\n } else {\n if (dataRef.current.typing) {\n dataRef.current.typing = value;\n onTypingChange(value);\n }\n }\n }\n function getMatchingIndex(list, orderedList, string) {\n const str = findMatchRef.current ? findMatchRef.current(orderedList, string) : orderedList.find(text => (text == null ? void 0 : text.toLocaleLowerCase().indexOf(string.toLocaleLowerCase())) === 0);\n return str ? list.indexOf(str) : -1;\n }\n function onKeyDown(event) {\n const listContent = listRef.current;\n if (stringRef.current.length > 0 && stringRef.current[0] !== ' ') {\n if (getMatchingIndex(listContent, listContent, stringRef.current) === -1) {\n setTypingChange(false);\n } else if (event.key === ' ') {\n stopEvent(event);\n }\n }\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 if (open && event.key !== ' ') {\n stopEvent(event);\n setTypingChange(true);\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 setTypingChange(false);\n }, resetMs);\n const prevIndex = prevIndexRef.current;\n const index = getMatchingIndex(listContent, [...listContent.slice((prevIndex || 0) + 1), ...listContent.slice(0, (prevIndex || 0) + 1)], stringRef.current);\n if (index !== -1) {\n onMatch(index);\n matchIndexRef.current = index;\n } else if (event.key !== ' ') {\n stringRef.current = '';\n setTypingChange(false);\n }\n }\n return {\n reference: {\n onKeyDown\n },\n floating: {\n onKeyDown,\n onKeyUp(event) {\n if (event.key === ' ') {\n setTypingChange(false);\n }\n }\n }\n };\n }, [enabled, open, dataRef, listRef, resetMs, ignoreKeysRef, findMatchRef, onMatch, onTypingChange]);\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 warn('`placement` side must be \"bottom\" when using the `inner`', 'middleware.');\n }\n }\n if (!item) {\n return {};\n }\n const nextArgs = {\n ...state,\n ...(await offset(-item.offsetTop - floating.clientTop - 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 */\nfunction useInnerOffset(context, props) {\n const {\n open,\n elements\n } = context;\n const {\n enabled = true,\n overflowRef,\n scrollRef,\n onChange: unstable_onChange\n } = props;\n const onChange = useEffectEvent(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}\n/**\n * Generates a safe polygon area that the user can traverse without closing the\n * floating element once leaving the reference element.\n * @see https://floating-ui.com/docs/useHover#safepolygon\n */\nfunction safePolygon(options) {\n if (options === void 0) {\n options = {};\n }\n const {\n buffer = 0.5,\n blockPointerEvents = false,\n requireIntent = true\n } = options;\n let timeoutId;\n let hasLanded = false;\n let lastX = null;\n let lastY = null;\n let lastCursorTime = performance.now();\n function getCursorSpeed(x, y) {\n const currentTime = performance.now();\n const elapsedTime = currentTime - lastCursorTime;\n if (lastX === null || lastY === null || elapsedTime === 0) {\n lastX = x;\n lastY = y;\n lastCursorTime = currentTime;\n return null;\n }\n const deltaX = x - lastX;\n const deltaY = y - lastY;\n const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);\n const speed = distance / elapsedTime; // px / ms\n\n lastX = x;\n lastY = y;\n lastCursorTime = currentTime;\n return speed;\n }\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 const isFloatingWider = rect.width > refRect.width;\n const isFloatingTaller = rect.height > refRect.height;\n const left = (isFloatingWider ? refRect : rect).left;\n const right = (isFloatingWider ? refRect : rect).right;\n const top = (isFloatingTaller ? refRect : rect).top;\n const bottom = (isFloatingTaller ? refRect : rect).bottom;\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 = [[left, refRect.top + 1], [left, rect.bottom - 1], [right, rect.bottom - 1], [right, refRect.top + 1]];\n break;\n case 'bottom':\n rectPoly = [[left, rect.top + 1], [left, refRect.bottom - 1], [right, refRect.bottom - 1], [right, rect.top + 1]];\n break;\n case 'left':\n rectPoly = [[rect.right - 1, bottom], [rect.right - 1, top], [refRect.left + 1, top], [refRect.left + 1, bottom]];\n break;\n case 'right':\n rectPoly = [[refRect.right - 1, bottom], [refRect.right - 1, top], [rect.left + 1, top], [rect.left + 1, bottom]];\n break;\n }\n function getPolygon(_ref3) {\n let [x, y] = _ref3;\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 if (isPointInPolygon([clientX, clientY], rectPoly)) {\n return;\n }\n if (hasLanded && !isOverReferenceRect) {\n return close();\n }\n if (!isLeave && requireIntent) {\n const cursorSpeed = getCursorSpeed(event.clientX, event.clientY);\n const cursorSpeedThreshold = 0.1;\n if (cursorSpeed !== null && cursorSpeed < cursorSpeedThreshold) {\n return close();\n }\n }\n if (!isPointInPolygon([clientX, clientY], getPolygon([x, y]))) {\n close();\n } else if (!hasLanded && requireIntent) {\n timeoutId = window.setTimeout(close, 40);\n }\n };\n };\n fn.__options = {\n blockPointerEvents\n };\n return fn;\n}\n\nexport { Composite, CompositeItem, FloatingArrow, FloatingDelayGroup, FloatingFocusManager, FloatingList, FloatingNode, FloatingOverlay, FloatingPortal, FloatingTree, inner, safePolygon, useClick, useClientPoint, useDelayGroup, useDelayGroupContext, useDismiss, useFloating, useFloatingNodeId, useFloatingParentNodeId, useFloatingPortalNode, useFloatingTree, useFocus, useHover, useId, useInnerOffset, useInteractions, useListItem, useListNavigation, useMergeRefs, useRole, useTransitionStatus, useTransitionStyles, useTypeahead };\n","import memoize from '@emotion/memoize';\n\nvar reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|abbr|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|disableRemotePlayback|download|draggable|encType|enterKeyHint|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|translate|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|incremental|fallback|inert|itemProp|itemScope|itemType|itemID|itemRef|on|option|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/; // https://esbench.com/bench/5bfee68a4cd7e6009ef61d23\n\nvar isPropValid = /* #__PURE__ */memoize(function (prop) {\n return reactPropsRegex.test(prop) || prop.charCodeAt(0) === 111\n /* o */\n && prop.charCodeAt(1) === 110\n /* n */\n && prop.charCodeAt(2) < 91;\n}\n/* Z+1 */\n);\n\nexport { isPropValid as default };\n","import _extends from '@babel/runtime/helpers/esm/extends';\nimport * as React from 'react';\nimport isPropValid from '@emotion/is-prop-valid';\nimport { withEmotionCache, ThemeContext } from '@emotion/react';\nimport { getRegisteredStyles, registerStyles, insertStyles } from '@emotion/utils';\nimport { serializeStyles } from '@emotion/serialize';\nimport { useInsertionEffectAlwaysWithSyncFallback } from '@emotion/use-insertion-effect-with-fallbacks';\n\nvar testOmitPropsOnStringTag = isPropValid;\n\nvar testOmitPropsOnComponent = function testOmitPropsOnComponent(key) {\n return key !== 'theme';\n};\n\nvar getDefaultShouldForwardProp = function getDefaultShouldForwardProp(tag) {\n return typeof tag === 'string' && // 96 is one less than the char code\n // for \"a\" so this is checking that\n // it's a lowercase character\n tag.charCodeAt(0) > 96 ? testOmitPropsOnStringTag : testOmitPropsOnComponent;\n};\nvar composeShouldForwardProps = function composeShouldForwardProps(tag, options, isReal) {\n var shouldForwardProp;\n\n if (options) {\n var optionsShouldForwardProp = options.shouldForwardProp;\n shouldForwardProp = tag.__emotion_forwardProp && optionsShouldForwardProp ? function (propName) {\n return tag.__emotion_forwardProp(propName) && optionsShouldForwardProp(propName);\n } : optionsShouldForwardProp;\n }\n\n if (typeof shouldForwardProp !== 'function' && isReal) {\n shouldForwardProp = tag.__emotion_forwardProp;\n }\n\n return shouldForwardProp;\n};\n\nvar ILLEGAL_ESCAPE_SEQUENCE_ERROR = \"You have illegal escape sequence in your template literal, most likely inside content's property value.\\nBecause you write your CSS inside a JavaScript string you actually have to do double escaping, so for example \\\"content: '\\\\00d7';\\\" should become \\\"content: '\\\\\\\\00d7';\\\".\\nYou can read more about this here:\\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences\";\n\nvar Insertion = function Insertion(_ref) {\n var cache = _ref.cache,\n serialized = _ref.serialized,\n isStringTag = _ref.isStringTag;\n registerStyles(cache, serialized, isStringTag);\n useInsertionEffectAlwaysWithSyncFallback(function () {\n return insertStyles(cache, serialized, isStringTag);\n });\n\n return null;\n};\n\nvar createStyled = function createStyled(tag, options) {\n if (process.env.NODE_ENV !== 'production') {\n if (tag === undefined) {\n throw new Error('You are trying to create a styled element with an undefined component.\\nYou may have forgotten to import it.');\n }\n }\n\n var isReal = tag.__emotion_real === tag;\n var baseTag = isReal && tag.__emotion_base || tag;\n var identifierName;\n var targetClassName;\n\n if (options !== undefined) {\n identifierName = options.label;\n targetClassName = options.target;\n }\n\n var shouldForwardProp = composeShouldForwardProps(tag, options, isReal);\n var defaultShouldForwardProp = shouldForwardProp || getDefaultShouldForwardProp(baseTag);\n var shouldUseAs = !defaultShouldForwardProp('as');\n return function () {\n var args = arguments;\n var styles = isReal && tag.__emotion_styles !== undefined ? tag.__emotion_styles.slice(0) : [];\n\n if (identifierName !== undefined) {\n styles.push(\"label:\" + identifierName + \";\");\n }\n\n if (args[0] == null || args[0].raw === undefined) {\n styles.push.apply(styles, args);\n } else {\n if (process.env.NODE_ENV !== 'production' && args[0][0] === undefined) {\n console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR);\n }\n\n styles.push(args[0][0]);\n var len = args.length;\n var i = 1;\n\n for (; i < len; i++) {\n if (process.env.NODE_ENV !== 'production' && args[0][i] === undefined) {\n console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR);\n }\n\n styles.push(args[i], args[0][i]);\n }\n } // $FlowFixMe: we need to cast StatelessFunctionalComponent to our PrivateStyledComponent class\n\n\n var Styled = withEmotionCache(function (props, cache, ref) {\n var FinalTag = shouldUseAs && props.as || baseTag;\n var className = '';\n var classInterpolations = [];\n var mergedProps = props;\n\n if (props.theme == null) {\n mergedProps = {};\n\n for (var key in props) {\n mergedProps[key] = props[key];\n }\n\n mergedProps.theme = React.useContext(ThemeContext);\n }\n\n if (typeof props.className === 'string') {\n className = getRegisteredStyles(cache.registered, classInterpolations, props.className);\n } else if (props.className != null) {\n className = props.className + \" \";\n }\n\n var serialized = serializeStyles(styles.concat(classInterpolations), cache.registered, mergedProps);\n className += cache.key + \"-\" + serialized.name;\n\n if (targetClassName !== undefined) {\n className += \" \" + targetClassName;\n }\n\n var finalShouldForwardProp = shouldUseAs && shouldForwardProp === undefined ? getDefaultShouldForwardProp(FinalTag) : defaultShouldForwardProp;\n var newProps = {};\n\n for (var _key in props) {\n if (shouldUseAs && _key === 'as') continue;\n\n if ( // $FlowFixMe\n finalShouldForwardProp(_key)) {\n newProps[_key] = props[_key];\n }\n }\n\n newProps.className = className;\n newProps.ref = ref;\n return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Insertion, {\n cache: cache,\n serialized: serialized,\n isStringTag: typeof FinalTag === 'string'\n }), /*#__PURE__*/React.createElement(FinalTag, newProps));\n });\n Styled.displayName = identifierName !== undefined ? identifierName : \"Styled(\" + (typeof baseTag === 'string' ? baseTag : baseTag.displayName || baseTag.name || 'Component') + \")\";\n Styled.defaultProps = tag.defaultProps;\n Styled.__emotion_real = Styled;\n Styled.__emotion_base = baseTag;\n Styled.__emotion_styles = styles;\n Styled.__emotion_forwardProp = shouldForwardProp;\n Object.defineProperty(Styled, 'toString', {\n value: function value() {\n if (targetClassName === undefined && process.env.NODE_ENV !== 'production') {\n return 'NO_COMPONENT_SELECTOR';\n } // $FlowFixMe: coerce undefined to string\n\n\n return \".\" + targetClassName;\n }\n });\n\n Styled.withComponent = function (nextTag, nextOptions) {\n return createStyled(nextTag, _extends({}, options, nextOptions, {\n shouldForwardProp: composeShouldForwardProps(Styled, nextOptions, true)\n })).apply(void 0, styles);\n };\n\n return Styled;\n };\n};\n\nexport { createStyled as default };\n","import createStyled from '../base/dist/emotion-styled-base.browser.esm.js';\nimport '@babel/runtime/helpers/extends';\nimport 'react';\nimport '@emotion/is-prop-valid';\nimport '@emotion/react';\nimport '@emotion/utils';\nimport '@emotion/serialize';\nimport '@emotion/use-insertion-effect-with-fallbacks';\n\nvar tags = ['a', 'abbr', 'address', 'area', 'article', 'aside', 'audio', 'b', 'base', 'bdi', 'bdo', 'big', 'blockquote', 'body', 'br', 'button', 'canvas', 'caption', 'cite', 'code', 'col', 'colgroup', 'data', 'datalist', 'dd', 'del', 'details', 'dfn', 'dialog', 'div', 'dl', 'dt', 'em', 'embed', 'fieldset', 'figcaption', 'figure', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr', 'html', 'i', 'iframe', 'img', 'input', 'ins', 'kbd', 'keygen', 'label', 'legend', 'li', 'link', 'main', 'map', 'mark', 'marquee', 'menu', 'menuitem', 'meta', 'meter', 'nav', 'noscript', 'object', 'ol', 'optgroup', 'option', 'output', 'p', 'param', 'picture', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'script', 'section', 'select', 'small', 'source', 'span', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'textarea', 'tfoot', 'th', 'thead', 'time', 'title', 'tr', 'track', 'u', 'ul', 'var', 'video', 'wbr', // SVG\n'circle', 'clipPath', 'defs', 'ellipse', 'foreignObject', 'g', 'image', 'line', 'linearGradient', 'mask', 'path', 'pattern', 'polygon', 'polyline', 'radialGradient', 'rect', 'stop', 'svg', 'text', 'tspan'];\n\nvar newStyled = createStyled.bind();\ntags.forEach(function (tagName) {\n // $FlowFixMe: we can ignore this because its exposed type is defined by the CreateStyled type\n newStyled[tagName] = newStyled(tagName);\n});\n\nexport { newStyled as default };\n","'use client';\n\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport { CacheProvider } from '@emotion/react';\nimport createCache from '@emotion/cache';\n\n// prepend: true moves MUI styles to the top of the so they're loaded first.\n// It allows developers to easily override MUI styles with other styling solutions, like CSS modules.\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nlet cache;\nif (typeof document === 'object') {\n cache = createCache({\n key: 'css',\n prepend: true\n });\n}\nexport default function StyledEngineProvider(props) {\n const {\n injectFirst,\n children\n } = props;\n return injectFirst && cache ? /*#__PURE__*/_jsx(CacheProvider, {\n value: cache,\n children: children\n }) : children;\n}\nprocess.env.NODE_ENV !== \"production\" ? StyledEngineProvider.propTypes = {\n /**\n * Your component tree.\n */\n children: PropTypes.node,\n /**\n * By default, the styles are injected last in the element of the page.\n * As a result, they gain more specificity than any other style sheet.\n * If you want to override MUI's styles, set this prop.\n */\n injectFirst: PropTypes.bool\n} : void 0;","'use client';\n\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport { Global } from '@emotion/react';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction isEmpty(obj) {\n return obj === undefined || obj === null || Object.keys(obj).length === 0;\n}\nexport default function GlobalStyles(props) {\n const {\n styles,\n defaultTheme = {}\n } = props;\n const globalStyles = typeof styles === 'function' ? themeInput => styles(isEmpty(themeInput) ? defaultTheme : themeInput) : styles;\n return /*#__PURE__*/_jsx(Global, {\n styles: globalStyles\n });\n}\nprocess.env.NODE_ENV !== \"production\" ? GlobalStyles.propTypes = {\n defaultTheme: PropTypes.object,\n styles: PropTypes.oneOfType([PropTypes.array, PropTypes.string, PropTypes.object, PropTypes.func])\n} : void 0;","/**\n * @mui/styled-engine v5.15.14\n *\n * @license MIT\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n'use client';\n\n/* eslint-disable no-underscore-dangle */\nimport emStyled from '@emotion/styled';\nexport default function styled(tag, options) {\n const stylesFactory = emStyled(tag, options);\n if (process.env.NODE_ENV !== 'production') {\n return (...styles) => {\n const component = typeof tag === 'string' ? `\"${tag}\"` : 'component';\n if (styles.length === 0) {\n console.error([`MUI: Seems like you called \\`styled(${component})()\\` without a \\`style\\` argument.`, 'You must provide a `styles` argument: `styled(\"div\")(styleYouForgotToPass)`.'].join('\\n'));\n } else if (styles.some(style => style === undefined)) {\n console.error(`MUI: the styled(${component})(...args) API requires all its args to be defined.`);\n }\n return stylesFactory(...styles);\n };\n }\n return stylesFactory;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport const internal_processStyles = (tag, processor) => {\n // Emotion attaches all the styles as `__emotion_styles`.\n // Ref: https://github.com/emotion-js/emotion/blob/16d971d0da229596d6bcc39d282ba9753c9ee7cf/packages/styled/src/base.js#L186\n if (Array.isArray(tag.__emotion_styles)) {\n tag.__emotion_styles = processor(tag.__emotion_styles);\n }\n};\nexport { ThemeContext, keyframes, css } from '@emotion/react';\nexport { default as StyledEngineProvider } from './StyledEngineProvider';\nexport { default as GlobalStyles } from './GlobalStyles';","\"use strict\";\n\nvar _interopRequireDefault = require(\"@babel/runtime/helpers/interopRequireDefault\");\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.alpha = alpha;\nexports.blend = blend;\nexports.colorChannel = void 0;\nexports.darken = darken;\nexports.decomposeColor = decomposeColor;\nexports.emphasize = emphasize;\nexports.getContrastRatio = getContrastRatio;\nexports.getLuminance = getLuminance;\nexports.hexToRgb = hexToRgb;\nexports.hslToRgb = hslToRgb;\nexports.lighten = lighten;\nexports.private_safeAlpha = private_safeAlpha;\nexports.private_safeColorChannel = void 0;\nexports.private_safeDarken = private_safeDarken;\nexports.private_safeEmphasize = private_safeEmphasize;\nexports.private_safeLighten = private_safeLighten;\nexports.recomposeColor = recomposeColor;\nexports.rgbToHex = rgbToHex;\nvar _formatMuiErrorMessage2 = _interopRequireDefault(require(\"@mui/utils/formatMuiErrorMessage\"));\nvar _clamp = _interopRequireDefault(require(\"@mui/utils/clamp\"));\n/* eslint-disable @typescript-eslint/naming-convention */\n\n/**\n * Returns a number whose value is limited to the given range.\n * @param {number} value The value to be clamped\n * @param {number} min The lower boundary of the output range\n * @param {number} max The upper boundary of the output range\n * @returns {number} A number in the range [min, max]\n */\nfunction clampWrapper(value, min = 0, max = 1) {\n if (process.env.NODE_ENV !== 'production') {\n if (value < min || value > max) {\n console.error(`MUI: The value provided ${value} is out of range [${min}, ${max}].`);\n }\n }\n return (0, _clamp.default)(value, min, max);\n}\n\n/**\n * Converts a color from CSS hex format to CSS rgb format.\n * @param {string} color - Hex color, i.e. #nnn or #nnnnnn\n * @returns {string} A CSS rgb color string\n */\nfunction hexToRgb(color) {\n color = color.slice(1);\n const re = new RegExp(`.{1,${color.length >= 6 ? 2 : 1}}`, 'g');\n let colors = color.match(re);\n if (colors && colors[0].length === 1) {\n colors = colors.map(n => n + n);\n }\n return colors ? `rgb${colors.length === 4 ? 'a' : ''}(${colors.map((n, index) => {\n return index < 3 ? parseInt(n, 16) : Math.round(parseInt(n, 16) / 255 * 1000) / 1000;\n }).join(', ')})` : '';\n}\nfunction intToHex(int) {\n const hex = int.toString(16);\n return hex.length === 1 ? `0${hex}` : hex;\n}\n\n/**\n * Returns an object with the type and values of a color.\n *\n * Note: Does not support rgb % values.\n * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()\n * @returns {object} - A MUI color object: {type: string, values: number[]}\n */\nfunction decomposeColor(color) {\n // Idempotent\n if (color.type) {\n return color;\n }\n if (color.charAt(0) === '#') {\n return decomposeColor(hexToRgb(color));\n }\n const marker = color.indexOf('(');\n const type = color.substring(0, marker);\n if (['rgb', 'rgba', 'hsl', 'hsla', 'color'].indexOf(type) === -1) {\n throw new Error(process.env.NODE_ENV !== \"production\" ? `MUI: Unsupported \\`${color}\\` color.\nThe following formats are supported: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().` : (0, _formatMuiErrorMessage2.default)(9, color));\n }\n let values = color.substring(marker + 1, color.length - 1);\n let colorSpace;\n if (type === 'color') {\n values = values.split(' ');\n colorSpace = values.shift();\n if (values.length === 4 && values[3].charAt(0) === '/') {\n values[3] = values[3].slice(1);\n }\n if (['srgb', 'display-p3', 'a98-rgb', 'prophoto-rgb', 'rec-2020'].indexOf(colorSpace) === -1) {\n throw new Error(process.env.NODE_ENV !== \"production\" ? `MUI: unsupported \\`${colorSpace}\\` color space.\nThe following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rgb, rec-2020.` : (0, _formatMuiErrorMessage2.default)(10, colorSpace));\n }\n } else {\n values = values.split(',');\n }\n values = values.map(value => parseFloat(value));\n return {\n type,\n values,\n colorSpace\n };\n}\n\n/**\n * Returns a channel created from the input color.\n *\n * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()\n * @returns {string} - The channel for the color, that can be used in rgba or hsla colors\n */\nconst colorChannel = color => {\n const decomposedColor = decomposeColor(color);\n return decomposedColor.values.slice(0, 3).map((val, idx) => decomposedColor.type.indexOf('hsl') !== -1 && idx !== 0 ? `${val}%` : val).join(' ');\n};\nexports.colorChannel = colorChannel;\nconst private_safeColorChannel = (color, warning) => {\n try {\n return colorChannel(color);\n } catch (error) {\n if (warning && process.env.NODE_ENV !== 'production') {\n console.warn(warning);\n }\n return color;\n }\n};\n\n/**\n * Converts a color object with type and values to a string.\n * @param {object} color - Decomposed color\n * @param {string} color.type - One of: 'rgb', 'rgba', 'hsl', 'hsla', 'color'\n * @param {array} color.values - [n,n,n] or [n,n,n,n]\n * @returns {string} A CSS color string\n */\nexports.private_safeColorChannel = private_safeColorChannel;\nfunction recomposeColor(color) {\n const {\n type,\n colorSpace\n } = color;\n let {\n values\n } = color;\n if (type.indexOf('rgb') !== -1) {\n // Only convert the first 3 values to int (i.e. not alpha)\n values = values.map((n, i) => i < 3 ? parseInt(n, 10) : n);\n } else if (type.indexOf('hsl') !== -1) {\n values[1] = `${values[1]}%`;\n values[2] = `${values[2]}%`;\n }\n if (type.indexOf('color') !== -1) {\n values = `${colorSpace} ${values.join(' ')}`;\n } else {\n values = `${values.join(', ')}`;\n }\n return `${type}(${values})`;\n}\n\n/**\n * Converts a color from CSS rgb format to CSS hex format.\n * @param {string} color - RGB color, i.e. rgb(n, n, n)\n * @returns {string} A CSS rgb color string, i.e. #nnnnnn\n */\nfunction rgbToHex(color) {\n // Idempotent\n if (color.indexOf('#') === 0) {\n return color;\n }\n const {\n values\n } = decomposeColor(color);\n return `#${values.map((n, i) => intToHex(i === 3 ? Math.round(255 * n) : n)).join('')}`;\n}\n\n/**\n * Converts a color from hsl format to rgb format.\n * @param {string} color - HSL color values\n * @returns {string} rgb color values\n */\nfunction hslToRgb(color) {\n color = decomposeColor(color);\n const {\n values\n } = color;\n const h = values[0];\n const s = values[1] / 100;\n const l = values[2] / 100;\n const a = s * Math.min(l, 1 - l);\n const f = (n, k = (n + h / 30) % 12) => l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n let type = 'rgb';\n const rgb = [Math.round(f(0) * 255), Math.round(f(8) * 255), Math.round(f(4) * 255)];\n if (color.type === 'hsla') {\n type += 'a';\n rgb.push(values[3]);\n }\n return recomposeColor({\n type,\n values: rgb\n });\n}\n/**\n * The relative brightness of any point in a color space,\n * normalized to 0 for darkest black and 1 for lightest white.\n *\n * Formula: https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()\n * @returns {number} The relative brightness of the color in the range 0 - 1\n */\nfunction getLuminance(color) {\n color = decomposeColor(color);\n let rgb = color.type === 'hsl' || color.type === 'hsla' ? decomposeColor(hslToRgb(color)).values : color.values;\n rgb = rgb.map(val => {\n if (color.type !== 'color') {\n val /= 255; // normalized\n }\n return val <= 0.03928 ? val / 12.92 : ((val + 0.055) / 1.055) ** 2.4;\n });\n\n // Truncate at 3 digits\n return Number((0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2]).toFixed(3));\n}\n\n/**\n * Calculates the contrast ratio between two colors.\n *\n * Formula: https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n * @param {string} foreground - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()\n * @param {string} background - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()\n * @returns {number} A contrast ratio value in the range 0 - 21.\n */\nfunction getContrastRatio(foreground, background) {\n const lumA = getLuminance(foreground);\n const lumB = getLuminance(background);\n return (Math.max(lumA, lumB) + 0.05) / (Math.min(lumA, lumB) + 0.05);\n}\n\n/**\n * Sets the absolute transparency of a color.\n * Any existing alpha values are overwritten.\n * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()\n * @param {number} value - value to set the alpha channel to in the range 0 - 1\n * @returns {string} A CSS color string. Hex input values are returned as rgb\n */\nfunction alpha(color, value) {\n color = decomposeColor(color);\n value = clampWrapper(value);\n if (color.type === 'rgb' || color.type === 'hsl') {\n color.type += 'a';\n }\n if (color.type === 'color') {\n color.values[3] = `/${value}`;\n } else {\n color.values[3] = value;\n }\n return recomposeColor(color);\n}\nfunction private_safeAlpha(color, value, warning) {\n try {\n return alpha(color, value);\n } catch (error) {\n if (warning && process.env.NODE_ENV !== 'production') {\n console.warn(warning);\n }\n return color;\n }\n}\n\n/**\n * Darkens a color.\n * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()\n * @param {number} coefficient - multiplier in the range 0 - 1\n * @returns {string} A CSS color string. Hex input values are returned as rgb\n */\nfunction darken(color, coefficient) {\n color = decomposeColor(color);\n coefficient = clampWrapper(coefficient);\n if (color.type.indexOf('hsl') !== -1) {\n color.values[2] *= 1 - coefficient;\n } else if (color.type.indexOf('rgb') !== -1 || color.type.indexOf('color') !== -1) {\n for (let i = 0; i < 3; i += 1) {\n color.values[i] *= 1 - coefficient;\n }\n }\n return recomposeColor(color);\n}\nfunction private_safeDarken(color, coefficient, warning) {\n try {\n return darken(color, coefficient);\n } catch (error) {\n if (warning && process.env.NODE_ENV !== 'production') {\n console.warn(warning);\n }\n return color;\n }\n}\n\n/**\n * Lightens a color.\n * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()\n * @param {number} coefficient - multiplier in the range 0 - 1\n * @returns {string} A CSS color string. Hex input values are returned as rgb\n */\nfunction lighten(color, coefficient) {\n color = decomposeColor(color);\n coefficient = clampWrapper(coefficient);\n if (color.type.indexOf('hsl') !== -1) {\n color.values[2] += (100 - color.values[2]) * coefficient;\n } else if (color.type.indexOf('rgb') !== -1) {\n for (let i = 0; i < 3; i += 1) {\n color.values[i] += (255 - color.values[i]) * coefficient;\n }\n } else if (color.type.indexOf('color') !== -1) {\n for (let i = 0; i < 3; i += 1) {\n color.values[i] += (1 - color.values[i]) * coefficient;\n }\n }\n return recomposeColor(color);\n}\nfunction private_safeLighten(color, coefficient, warning) {\n try {\n return lighten(color, coefficient);\n } catch (error) {\n if (warning && process.env.NODE_ENV !== 'production') {\n console.warn(warning);\n }\n return color;\n }\n}\n\n/**\n * Darken or lighten a color, depending on its luminance.\n * Light colors are darkened, dark colors are lightened.\n * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()\n * @param {number} coefficient=0.15 - multiplier in the range 0 - 1\n * @returns {string} A CSS color string. Hex input values are returned as rgb\n */\nfunction emphasize(color, coefficient = 0.15) {\n return getLuminance(color) > 0.5 ? darken(color, coefficient) : lighten(color, coefficient);\n}\nfunction private_safeEmphasize(color, coefficient, warning) {\n try {\n return emphasize(color, coefficient);\n } catch (error) {\n if (warning && process.env.NODE_ENV !== 'production') {\n console.warn(warning);\n }\n return color;\n }\n}\n\n/**\n * Blend a transparent overlay color with a background color, resulting in a single\n * RGB color.\n * @param {string} background - CSS color\n * @param {string} overlay - CSS color\n * @param {number} opacity - Opacity multiplier in the range 0 - 1\n * @param {number} [gamma=1.0] - Gamma correction factor. For gamma-correct blending, 2.2 is usual.\n */\nfunction blend(background, overlay, opacity, gamma = 1.0) {\n const blendChannel = (b, o) => Math.round((b ** (1 / gamma) * (1 - opacity) + o ** (1 / gamma) * opacity) ** gamma);\n const backgroundColor = decomposeColor(background);\n const overlayColor = decomposeColor(overlay);\n const rgb = [blendChannel(backgroundColor.values[0], overlayColor.values[0]), blendChannel(backgroundColor.values[1], overlayColor.values[1]), blendChannel(backgroundColor.values[2], overlayColor.values[2])];\n return recomposeColor({\n type: 'rgb',\n values: rgb\n });\n}","\"use strict\";\n\nvar _interopRequireDefault = require(\"@babel/runtime/helpers/interopRequireDefault\");\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = createStyled;\nexports.shouldForwardProp = shouldForwardProp;\nexports.systemDefaultTheme = void 0;\nvar _extends2 = _interopRequireDefault(require(\"@babel/runtime/helpers/extends\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(require(\"@babel/runtime/helpers/objectWithoutPropertiesLoose\"));\nvar _styledEngine = _interopRequireWildcard(require(\"@mui/styled-engine\"));\nvar _deepmerge = require(\"@mui/utils/deepmerge\");\nvar _capitalize = _interopRequireDefault(require(\"@mui/utils/capitalize\"));\nvar _getDisplayName = _interopRequireDefault(require(\"@mui/utils/getDisplayName\"));\nvar _createTheme = _interopRequireDefault(require(\"./createTheme\"));\nvar _styleFunctionSx = _interopRequireDefault(require(\"./styleFunctionSx\"));\nconst _excluded = [\"ownerState\"],\n _excluded2 = [\"variants\"],\n _excluded3 = [\"name\", \"slot\", \"skipVariantsResolver\", \"skipSx\", \"overridesResolver\"];\n/* eslint-disable no-underscore-dangle */\nfunction _getRequireWildcardCache(e) { if (\"function\" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }\nfunction _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if (\"default\" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }\nfunction isEmpty(obj) {\n return Object.keys(obj).length === 0;\n}\n\n// https://github.com/emotion-js/emotion/blob/26ded6109fcd8ca9875cc2ce4564fee678a3f3c5/packages/styled/src/utils.js#L40\nfunction isStringTag(tag) {\n return typeof tag === 'string' &&\n // 96 is one less than the char code\n // for \"a\" so this is checking that\n // it's a lowercase character\n tag.charCodeAt(0) > 96;\n}\n\n// Update /system/styled/#api in case if this changes\nfunction shouldForwardProp(prop) {\n return prop !== 'ownerState' && prop !== 'theme' && prop !== 'sx' && prop !== 'as';\n}\nconst systemDefaultTheme = exports.systemDefaultTheme = (0, _createTheme.default)();\nconst lowercaseFirstLetter = string => {\n if (!string) {\n return string;\n }\n return string.charAt(0).toLowerCase() + string.slice(1);\n};\nfunction resolveTheme({\n defaultTheme,\n theme,\n themeId\n}) {\n return isEmpty(theme) ? defaultTheme : theme[themeId] || theme;\n}\nfunction defaultOverridesResolver(slot) {\n if (!slot) {\n return null;\n }\n return (props, styles) => styles[slot];\n}\nfunction processStyleArg(callableStyle, _ref) {\n let {\n ownerState\n } = _ref,\n props = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);\n const resolvedStylesArg = typeof callableStyle === 'function' ? callableStyle((0, _extends2.default)({\n ownerState\n }, props)) : callableStyle;\n if (Array.isArray(resolvedStylesArg)) {\n return resolvedStylesArg.flatMap(resolvedStyle => processStyleArg(resolvedStyle, (0, _extends2.default)({\n ownerState\n }, props)));\n }\n if (!!resolvedStylesArg && typeof resolvedStylesArg === 'object' && Array.isArray(resolvedStylesArg.variants)) {\n const {\n variants = []\n } = resolvedStylesArg,\n otherStyles = (0, _objectWithoutPropertiesLoose2.default)(resolvedStylesArg, _excluded2);\n let result = otherStyles;\n variants.forEach(variant => {\n let isMatch = true;\n if (typeof variant.props === 'function') {\n isMatch = variant.props((0, _extends2.default)({\n ownerState\n }, props, ownerState));\n } else {\n Object.keys(variant.props).forEach(key => {\n if ((ownerState == null ? void 0 : ownerState[key]) !== variant.props[key] && props[key] !== variant.props[key]) {\n isMatch = false;\n }\n });\n }\n if (isMatch) {\n if (!Array.isArray(result)) {\n result = [result];\n }\n result.push(typeof variant.style === 'function' ? variant.style((0, _extends2.default)({\n ownerState\n }, props, ownerState)) : variant.style);\n }\n });\n return result;\n }\n return resolvedStylesArg;\n}\nfunction createStyled(input = {}) {\n const {\n themeId,\n defaultTheme = systemDefaultTheme,\n rootShouldForwardProp = shouldForwardProp,\n slotShouldForwardProp = shouldForwardProp\n } = input;\n const systemSx = props => {\n return (0, _styleFunctionSx.default)((0, _extends2.default)({}, props, {\n theme: resolveTheme((0, _extends2.default)({}, props, {\n defaultTheme,\n themeId\n }))\n }));\n };\n systemSx.__mui_systemSx = true;\n return (tag, inputOptions = {}) => {\n // Filter out the `sx` style function from the previous styled component to prevent unnecessary styles generated by the composite components.\n (0, _styledEngine.internal_processStyles)(tag, styles => styles.filter(style => !(style != null && style.__mui_systemSx)));\n const {\n name: componentName,\n slot: componentSlot,\n skipVariantsResolver: inputSkipVariantsResolver,\n skipSx: inputSkipSx,\n // TODO v6: remove `lowercaseFirstLetter()` in the next major release\n // For more details: https://github.com/mui/material-ui/pull/37908\n overridesResolver = defaultOverridesResolver(lowercaseFirstLetter(componentSlot))\n } = inputOptions,\n options = (0, _objectWithoutPropertiesLoose2.default)(inputOptions, _excluded3);\n\n // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.\n const skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver :\n // TODO v6: remove `Root` in the next major release\n // For more details: https://github.com/mui/material-ui/pull/37908\n componentSlot && componentSlot !== 'Root' && componentSlot !== 'root' || false;\n const skipSx = inputSkipSx || false;\n let label;\n if (process.env.NODE_ENV !== 'production') {\n if (componentName) {\n // TODO v6: remove `lowercaseFirstLetter()` in the next major release\n // For more details: https://github.com/mui/material-ui/pull/37908\n label = `${componentName}-${lowercaseFirstLetter(componentSlot || 'Root')}`;\n }\n }\n let shouldForwardPropOption = shouldForwardProp;\n\n // TODO v6: remove `Root` in the next major release\n // For more details: https://github.com/mui/material-ui/pull/37908\n if (componentSlot === 'Root' || componentSlot === 'root') {\n shouldForwardPropOption = rootShouldForwardProp;\n } else if (componentSlot) {\n // any other slot specified\n shouldForwardPropOption = slotShouldForwardProp;\n } else if (isStringTag(tag)) {\n // for string (html) tag, preserve the behavior in emotion & styled-components.\n shouldForwardPropOption = undefined;\n }\n const defaultStyledResolver = (0, _styledEngine.default)(tag, (0, _extends2.default)({\n shouldForwardProp: shouldForwardPropOption,\n label\n }, options));\n const transformStyleArg = stylesArg => {\n // On the server Emotion doesn't use React.forwardRef for creating components, so the created\n // component stays as a function. This condition makes sure that we do not interpolate functions\n // which are basically components used as a selectors.\n if (typeof stylesArg === 'function' && stylesArg.__emotion_real !== stylesArg || (0, _deepmerge.isPlainObject)(stylesArg)) {\n return props => processStyleArg(stylesArg, (0, _extends2.default)({}, props, {\n theme: resolveTheme({\n theme: props.theme,\n defaultTheme,\n themeId\n })\n }));\n }\n return stylesArg;\n };\n const muiStyledResolver = (styleArg, ...expressions) => {\n let transformedStyleArg = transformStyleArg(styleArg);\n const expressionsWithDefaultTheme = expressions ? expressions.map(transformStyleArg) : [];\n if (componentName && overridesResolver) {\n expressionsWithDefaultTheme.push(props => {\n const theme = resolveTheme((0, _extends2.default)({}, props, {\n defaultTheme,\n themeId\n }));\n if (!theme.components || !theme.components[componentName] || !theme.components[componentName].styleOverrides) {\n return null;\n }\n const styleOverrides = theme.components[componentName].styleOverrides;\n const resolvedStyleOverrides = {};\n // TODO: v7 remove iteration and use `resolveStyleArg(styleOverrides[slot])` directly\n Object.entries(styleOverrides).forEach(([slotKey, slotStyle]) => {\n resolvedStyleOverrides[slotKey] = processStyleArg(slotStyle, (0, _extends2.default)({}, props, {\n theme\n }));\n });\n return overridesResolver(props, resolvedStyleOverrides);\n });\n }\n if (componentName && !skipVariantsResolver) {\n expressionsWithDefaultTheme.push(props => {\n var _theme$components;\n const theme = resolveTheme((0, _extends2.default)({}, props, {\n defaultTheme,\n themeId\n }));\n const themeVariants = theme == null || (_theme$components = theme.components) == null || (_theme$components = _theme$components[componentName]) == null ? void 0 : _theme$components.variants;\n return processStyleArg({\n variants: themeVariants\n }, (0, _extends2.default)({}, props, {\n theme\n }));\n });\n }\n if (!skipSx) {\n expressionsWithDefaultTheme.push(systemSx);\n }\n const numOfCustomFnsApplied = expressionsWithDefaultTheme.length - expressions.length;\n if (Array.isArray(styleArg) && numOfCustomFnsApplied > 0) {\n const placeholders = new Array(numOfCustomFnsApplied).fill('');\n // If the type is array, than we need to add placeholders in the template for the overrides, variants and the sx styles.\n transformedStyleArg = [...styleArg, ...placeholders];\n transformedStyleArg.raw = [...styleArg.raw, ...placeholders];\n }\n const Component = defaultStyledResolver(transformedStyleArg, ...expressionsWithDefaultTheme);\n if (process.env.NODE_ENV !== 'production') {\n let displayName;\n if (componentName) {\n displayName = `${componentName}${(0, _capitalize.default)(componentSlot || '')}`;\n }\n if (displayName === undefined) {\n displayName = `Styled(${(0, _getDisplayName.default)(tag)})`;\n }\n Component.displayName = displayName;\n }\n if (tag.muiName) {\n Component.muiName = tag.muiName;\n }\n return Component;\n };\n if (defaultStyledResolver.withConfig) {\n muiStyledResolver.withConfig = defaultStyledResolver.withConfig;\n }\n return muiStyledResolver;\n };\n}","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport PropTypes from 'prop-types';\nimport deepmerge from '@mui/utils/deepmerge';\nimport merge from './merge';\n\n// The breakpoint **start** at this value.\n// For instance with the first breakpoint xs: [xs, sm[.\nexport const values = {\n xs: 0,\n // phone\n sm: 600,\n // tablet\n md: 900,\n // small laptop\n lg: 1200,\n // desktop\n xl: 1536 // large screen\n};\nconst defaultBreakpoints = {\n // Sorted ASC by size. That's important.\n // It can't be configured as it's used statically for propTypes.\n keys: ['xs', 'sm', 'md', 'lg', 'xl'],\n up: key => `@media (min-width:${values[key]}px)`\n};\nexport function handleBreakpoints(props, propValue, styleFromPropValue) {\n const theme = props.theme || {};\n if (Array.isArray(propValue)) {\n const themeBreakpoints = theme.breakpoints || defaultBreakpoints;\n return propValue.reduce((acc, item, index) => {\n acc[themeBreakpoints.up(themeBreakpoints.keys[index])] = styleFromPropValue(propValue[index]);\n return acc;\n }, {});\n }\n if (typeof propValue === 'object') {\n const themeBreakpoints = theme.breakpoints || defaultBreakpoints;\n return Object.keys(propValue).reduce((acc, breakpoint) => {\n // key is breakpoint\n if (Object.keys(themeBreakpoints.values || values).indexOf(breakpoint) !== -1) {\n const mediaKey = themeBreakpoints.up(breakpoint);\n acc[mediaKey] = styleFromPropValue(propValue[breakpoint], breakpoint);\n } else {\n const cssKey = breakpoint;\n acc[cssKey] = propValue[cssKey];\n }\n return acc;\n }, {});\n }\n const output = styleFromPropValue(propValue);\n return output;\n}\nfunction breakpoints(styleFunction) {\n // false positive\n // eslint-disable-next-line react/function-component-definition\n const newStyleFunction = props => {\n const theme = props.theme || {};\n const base = styleFunction(props);\n const themeBreakpoints = theme.breakpoints || defaultBreakpoints;\n const extended = themeBreakpoints.keys.reduce((acc, key) => {\n if (props[key]) {\n acc = acc || {};\n acc[themeBreakpoints.up(key)] = styleFunction(_extends({\n theme\n }, props[key]));\n }\n return acc;\n }, null);\n return merge(base, extended);\n };\n newStyleFunction.propTypes = process.env.NODE_ENV !== 'production' ? _extends({}, styleFunction.propTypes, {\n xs: PropTypes.object,\n sm: PropTypes.object,\n md: PropTypes.object,\n lg: PropTypes.object,\n xl: PropTypes.object\n }) : {};\n newStyleFunction.filterProps = ['xs', 'sm', 'md', 'lg', 'xl', ...styleFunction.filterProps];\n return newStyleFunction;\n}\nexport function createEmptyBreakpointObject(breakpointsInput = {}) {\n var _breakpointsInput$key;\n const breakpointsInOrder = (_breakpointsInput$key = breakpointsInput.keys) == null ? void 0 : _breakpointsInput$key.reduce((acc, key) => {\n const breakpointStyleKey = breakpointsInput.up(key);\n acc[breakpointStyleKey] = {};\n return acc;\n }, {});\n return breakpointsInOrder || {};\n}\nexport function removeUnusedBreakpoints(breakpointKeys, style) {\n return breakpointKeys.reduce((acc, key) => {\n const breakpointOutput = acc[key];\n const isBreakpointUnused = !breakpointOutput || Object.keys(breakpointOutput).length === 0;\n if (isBreakpointUnused) {\n delete acc[key];\n }\n return acc;\n }, style);\n}\nexport function mergeBreakpointsInOrder(breakpointsInput, ...styles) {\n const emptyBreakpoints = createEmptyBreakpointObject(breakpointsInput);\n const mergedOutput = [emptyBreakpoints, ...styles].reduce((prev, next) => deepmerge(prev, next), {});\n return removeUnusedBreakpoints(Object.keys(emptyBreakpoints), mergedOutput);\n}\n\n// compute base for responsive values; e.g.,\n// [1,2,3] => {xs: true, sm: true, md: true}\n// {xs: 1, sm: 2, md: 3} => {xs: true, sm: true, md: true}\nexport function computeBreakpointsBase(breakpointValues, themeBreakpoints) {\n // fixed value\n if (typeof breakpointValues !== 'object') {\n return {};\n }\n const base = {};\n const breakpointsKeys = Object.keys(themeBreakpoints);\n if (Array.isArray(breakpointValues)) {\n breakpointsKeys.forEach((breakpoint, i) => {\n if (i < breakpointValues.length) {\n base[breakpoint] = true;\n }\n });\n } else {\n breakpointsKeys.forEach(breakpoint => {\n if (breakpointValues[breakpoint] != null) {\n base[breakpoint] = true;\n }\n });\n }\n return base;\n}\nexport function resolveBreakpointValues({\n values: breakpointValues,\n breakpoints: themeBreakpoints,\n base: customBase\n}) {\n const base = customBase || computeBreakpointsBase(breakpointValues, themeBreakpoints);\n const keys = Object.keys(base);\n if (keys.length === 0) {\n return breakpointValues;\n }\n let previous;\n return keys.reduce((acc, breakpoint, i) => {\n if (Array.isArray(breakpointValues)) {\n acc[breakpoint] = breakpointValues[i] != null ? breakpointValues[i] : breakpointValues[previous];\n previous = i;\n } else if (typeof breakpointValues === 'object') {\n acc[breakpoint] = breakpointValues[breakpoint] != null ? breakpointValues[breakpoint] : breakpointValues[previous];\n previous = breakpoint;\n } else {\n acc[breakpoint] = breakpointValues;\n }\n return acc;\n }, {});\n}\nexport default breakpoints;","/**\n * A universal utility to style components with multiple color modes. Always use it from the theme object.\n * It works with:\n * - [Basic theme](https://mui.com/material-ui/customization/dark-mode/)\n * - [CSS theme variables](https://mui.com/material-ui/experimental-api/css-theme-variables/overview/)\n * - Zero-runtime engine\n *\n * Tips: Use an array over object spread and place `theme.applyStyles()` last.\n *\n * ✅ [{ background: '#e5e5e5' }, theme.applyStyles('dark', { background: '#1c1c1c' })]\n *\n * 🚫 { background: '#e5e5e5', ...theme.applyStyles('dark', { background: '#1c1c1c' })}\n *\n * @example\n * 1. using with `styled`:\n * ```jsx\n * const Component = styled('div')(({ theme }) => [\n * { background: '#e5e5e5' },\n * theme.applyStyles('dark', {\n * background: '#1c1c1c',\n * color: '#fff',\n * }),\n * ]);\n * ```\n *\n * @example\n * 2. using with `sx` prop:\n * ```jsx\n *
[\n * { background: '#e5e5e5' },\n * theme.applyStyles('dark', {\n * background: '#1c1c1c',\n * color: '#fff',\n * }),\n * ]}\n * />\n * ```\n *\n * @example\n * 3. theming a component:\n * ```jsx\n * extendTheme({\n * components: {\n * MuiButton: {\n * styleOverrides: {\n * root: ({ theme }) => [\n * { background: '#e5e5e5' },\n * theme.applyStyles('dark', {\n * background: '#1c1c1c',\n * color: '#fff',\n * }),\n * ],\n * },\n * }\n * }\n * })\n *```\n */\nexport default function applyStyles(key, styles) {\n // @ts-expect-error this is 'any' type\n const theme = this;\n if (theme.vars && typeof theme.getColorSchemeSelector === 'function') {\n // If CssVarsProvider is used as a provider,\n // returns '* :where([data-mui-color-scheme=\"light|dark\"]) &'\n const selector = theme.getColorSchemeSelector(key).replace(/(\\[[^\\]]+\\])/, '*:where($1)');\n return {\n [selector]: styles\n };\n }\n if (theme.palette.mode === key) {\n return styles;\n }\n return {};\n}","import _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nconst _excluded = [\"values\", \"unit\", \"step\"];\n// Sorted ASC by size. That's important.\n// It can't be configured as it's used statically for propTypes.\nexport const breakpointKeys = ['xs', 'sm', 'md', 'lg', 'xl'];\nconst sortBreakpointsValues = values => {\n const breakpointsAsArray = Object.keys(values).map(key => ({\n key,\n val: values[key]\n })) || [];\n // Sort in ascending order\n breakpointsAsArray.sort((breakpoint1, breakpoint2) => breakpoint1.val - breakpoint2.val);\n return breakpointsAsArray.reduce((acc, obj) => {\n return _extends({}, acc, {\n [obj.key]: obj.val\n });\n }, {});\n};\n\n// Keep in mind that @media is inclusive by the CSS specification.\nexport default function createBreakpoints(breakpoints) {\n const {\n // The breakpoint **start** at this value.\n // For instance with the first breakpoint xs: [xs, sm).\n values = {\n xs: 0,\n // phone\n sm: 600,\n // tablet\n md: 900,\n // small laptop\n lg: 1200,\n // desktop\n xl: 1536 // large screen\n },\n unit = 'px',\n step = 5\n } = breakpoints,\n other = _objectWithoutPropertiesLoose(breakpoints, _excluded);\n const sortedValues = sortBreakpointsValues(values);\n const keys = Object.keys(sortedValues);\n function up(key) {\n const value = typeof values[key] === 'number' ? values[key] : key;\n return `@media (min-width:${value}${unit})`;\n }\n function down(key) {\n const value = typeof values[key] === 'number' ? values[key] : key;\n return `@media (max-width:${value - step / 100}${unit})`;\n }\n function between(start, end) {\n const endIndex = keys.indexOf(end);\n return `@media (min-width:${typeof values[start] === 'number' ? values[start] : start}${unit}) and ` + `(max-width:${(endIndex !== -1 && typeof values[keys[endIndex]] === 'number' ? values[keys[endIndex]] : end) - step / 100}${unit})`;\n }\n function only(key) {\n if (keys.indexOf(key) + 1 < keys.length) {\n return between(key, keys[keys.indexOf(key) + 1]);\n }\n return up(key);\n }\n function not(key) {\n // handle first and last key separately, for better readability\n const keyIndex = keys.indexOf(key);\n if (keyIndex === 0) {\n return up(keys[1]);\n }\n if (keyIndex === keys.length - 1) {\n return down(keys[keyIndex]);\n }\n return between(key, keys[keys.indexOf(key) + 1]).replace('@media', '@media not all and');\n }\n return _extends({\n keys,\n values: sortedValues,\n up,\n down,\n between,\n only,\n not,\n unit\n }, other);\n}","const shape = {\n borderRadius: 4\n};\nexport default shape;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nconst _excluded = [\"breakpoints\", \"palette\", \"spacing\", \"shape\"];\nimport deepmerge from '@mui/utils/deepmerge';\nimport createBreakpoints from './createBreakpoints';\nimport shape from './shape';\nimport createSpacing from './createSpacing';\nimport styleFunctionSx from '../styleFunctionSx/styleFunctionSx';\nimport defaultSxConfig from '../styleFunctionSx/defaultSxConfig';\nimport applyStyles from './applyStyles';\nfunction createTheme(options = {}, ...args) {\n const {\n breakpoints: breakpointsInput = {},\n palette: paletteInput = {},\n spacing: spacingInput,\n shape: shapeInput = {}\n } = options,\n other = _objectWithoutPropertiesLoose(options, _excluded);\n const breakpoints = createBreakpoints(breakpointsInput);\n const spacing = createSpacing(spacingInput);\n let muiTheme = deepmerge({\n breakpoints,\n direction: 'ltr',\n components: {},\n // Inject component definitions.\n palette: _extends({\n mode: 'light'\n }, paletteInput),\n spacing,\n shape: _extends({}, shape, shapeInput)\n }, other);\n muiTheme.applyStyles = applyStyles;\n muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);\n muiTheme.unstable_sxConfig = _extends({}, defaultSxConfig, other == null ? void 0 : other.unstable_sxConfig);\n muiTheme.unstable_sx = function sx(props) {\n return styleFunctionSx({\n sx: props,\n theme: this\n });\n };\n return muiTheme;\n}\nexport default createTheme;","import { createUnarySpacing } from '../spacing';\n\n// The different signatures imply different meaning for their arguments that can't be expressed structurally.\n// We express the difference with variable names.\n\nexport default function createSpacing(spacingInput = 8) {\n // Already transformed.\n if (spacingInput.mui) {\n return spacingInput;\n }\n\n // Material Design layouts are visually balanced. Most measurements align to an 8dp grid, which aligns both spacing and the overall layout.\n // Smaller components, such as icons, can align to a 4dp grid.\n // https://m2.material.io/design/layout/understanding-layout.html\n const transform = createUnarySpacing({\n spacing: spacingInput\n });\n const spacing = (...argsInput) => {\n if (process.env.NODE_ENV !== 'production') {\n if (!(argsInput.length <= 4)) {\n console.error(`MUI: Too many arguments provided, expected between 0 and 4, got ${argsInput.length}`);\n }\n }\n const args = argsInput.length === 0 ? [1] : argsInput;\n return args.map(argument => {\n const output = transform(argument);\n return typeof output === 'number' ? `${output}px` : output;\n }).join(' ');\n };\n spacing.mui = true;\n return spacing;\n}","import deepmerge from '@mui/utils/deepmerge';\nfunction merge(acc, item) {\n if (!item) {\n return acc;\n }\n return deepmerge(acc, item, {\n clone: false // No need to clone deep, it's way faster.\n });\n}\nexport default merge;","import responsivePropType from './responsivePropType';\nimport { handleBreakpoints } from './breakpoints';\nimport { getPath } from './style';\nimport merge from './merge';\nimport memoize from './memoize';\nconst properties = {\n m: 'margin',\n p: 'padding'\n};\nconst directions = {\n t: 'Top',\n r: 'Right',\n b: 'Bottom',\n l: 'Left',\n x: ['Left', 'Right'],\n y: ['Top', 'Bottom']\n};\nconst aliases = {\n marginX: 'mx',\n marginY: 'my',\n paddingX: 'px',\n paddingY: 'py'\n};\n\n// memoize() impact:\n// From 300,000 ops/sec\n// To 350,000 ops/sec\nconst getCssProperties = memoize(prop => {\n // It's not a shorthand notation.\n if (prop.length > 2) {\n if (aliases[prop]) {\n prop = aliases[prop];\n } else {\n return [prop];\n }\n }\n const [a, b] = prop.split('');\n const property = properties[a];\n const direction = directions[b] || '';\n return Array.isArray(direction) ? direction.map(dir => property + dir) : [property + direction];\n});\nexport const marginKeys = ['m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my', 'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'marginInline', 'marginInlineStart', 'marginInlineEnd', 'marginBlock', 'marginBlockStart', 'marginBlockEnd'];\nexport const paddingKeys = ['p', 'pt', 'pr', 'pb', 'pl', 'px', 'py', 'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'paddingX', 'paddingY', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd'];\nconst spacingKeys = [...marginKeys, ...paddingKeys];\nexport function createUnaryUnit(theme, themeKey, defaultValue, propName) {\n var _getPath;\n const themeSpacing = (_getPath = getPath(theme, themeKey, false)) != null ? _getPath : defaultValue;\n if (typeof themeSpacing === 'number') {\n return abs => {\n if (typeof abs === 'string') {\n return abs;\n }\n if (process.env.NODE_ENV !== 'production') {\n if (typeof abs !== 'number') {\n console.error(`MUI: Expected ${propName} argument to be a number or a string, got ${abs}.`);\n }\n }\n return themeSpacing * abs;\n };\n }\n if (Array.isArray(themeSpacing)) {\n return abs => {\n if (typeof abs === 'string') {\n return abs;\n }\n if (process.env.NODE_ENV !== 'production') {\n if (!Number.isInteger(abs)) {\n console.error([`MUI: The \\`theme.${themeKey}\\` array type cannot be combined with non integer values.` + `You should either use an integer value that can be used as index, or define the \\`theme.${themeKey}\\` as a number.`].join('\\n'));\n } else if (abs > themeSpacing.length - 1) {\n console.error([`MUI: The value provided (${abs}) overflows.`, `The supported values are: ${JSON.stringify(themeSpacing)}.`, `${abs} > ${themeSpacing.length - 1}, you need to add the missing values.`].join('\\n'));\n }\n }\n return themeSpacing[abs];\n };\n }\n if (typeof themeSpacing === 'function') {\n return themeSpacing;\n }\n if (process.env.NODE_ENV !== 'production') {\n console.error([`MUI: The \\`theme.${themeKey}\\` value (${themeSpacing}) is invalid.`, 'It should be a number, an array or a function.'].join('\\n'));\n }\n return () => undefined;\n}\nexport function createUnarySpacing(theme) {\n return createUnaryUnit(theme, 'spacing', 8, 'spacing');\n}\nexport function getValue(transformer, propValue) {\n if (typeof propValue === 'string' || propValue == null) {\n return propValue;\n }\n const abs = Math.abs(propValue);\n const transformed = transformer(abs);\n if (propValue >= 0) {\n return transformed;\n }\n if (typeof transformed === 'number') {\n return -transformed;\n }\n return `-${transformed}`;\n}\nexport function getStyleFromPropValue(cssProperties, transformer) {\n return propValue => cssProperties.reduce((acc, cssProperty) => {\n acc[cssProperty] = getValue(transformer, propValue);\n return acc;\n }, {});\n}\nfunction resolveCssProperty(props, keys, prop, transformer) {\n // Using a hash computation over an array iteration could be faster, but with only 28 items,\n // it's doesn't worth the bundle size.\n if (keys.indexOf(prop) === -1) {\n return null;\n }\n const cssProperties = getCssProperties(prop);\n const styleFromPropValue = getStyleFromPropValue(cssProperties, transformer);\n const propValue = props[prop];\n return handleBreakpoints(props, propValue, styleFromPropValue);\n}\nfunction style(props, keys) {\n const transformer = createUnarySpacing(props.theme);\n return Object.keys(props).map(prop => resolveCssProperty(props, keys, prop, transformer)).reduce(merge, {});\n}\nexport function margin(props) {\n return style(props, marginKeys);\n}\nmargin.propTypes = process.env.NODE_ENV !== 'production' ? marginKeys.reduce((obj, key) => {\n obj[key] = responsivePropType;\n return obj;\n}, {}) : {};\nmargin.filterProps = marginKeys;\nexport function padding(props) {\n return style(props, paddingKeys);\n}\npadding.propTypes = process.env.NODE_ENV !== 'production' ? paddingKeys.reduce((obj, key) => {\n obj[key] = responsivePropType;\n return obj;\n}, {}) : {};\npadding.filterProps = paddingKeys;\nfunction spacing(props) {\n return style(props, spacingKeys);\n}\nspacing.propTypes = process.env.NODE_ENV !== 'production' ? spacingKeys.reduce((obj, key) => {\n obj[key] = responsivePropType;\n return obj;\n}, {}) : {};\nspacing.filterProps = spacingKeys;\nexport default spacing;","export default function memoize(fn) {\n const cache = {};\n return arg => {\n if (cache[arg] === undefined) {\n cache[arg] = fn(arg);\n }\n return cache[arg];\n };\n}","import capitalize from '@mui/utils/capitalize';\nimport responsivePropType from './responsivePropType';\nimport { handleBreakpoints } from './breakpoints';\nexport function getPath(obj, path, checkVars = true) {\n if (!path || typeof path !== 'string') {\n return null;\n }\n\n // Check if CSS variables are used\n if (obj && obj.vars && checkVars) {\n const val = `vars.${path}`.split('.').reduce((acc, item) => acc && acc[item] ? acc[item] : null, obj);\n if (val != null) {\n return val;\n }\n }\n return path.split('.').reduce((acc, item) => {\n if (acc && acc[item] != null) {\n return acc[item];\n }\n return null;\n }, obj);\n}\nexport function getStyleValue(themeMapping, transform, propValueFinal, userValue = propValueFinal) {\n let value;\n if (typeof themeMapping === 'function') {\n value = themeMapping(propValueFinal);\n } else if (Array.isArray(themeMapping)) {\n value = themeMapping[propValueFinal] || userValue;\n } else {\n value = getPath(themeMapping, propValueFinal) || userValue;\n }\n if (transform) {\n value = transform(value, userValue, themeMapping);\n }\n return value;\n}\nfunction style(options) {\n const {\n prop,\n cssProperty = options.prop,\n themeKey,\n transform\n } = options;\n\n // false positive\n // eslint-disable-next-line react/function-component-definition\n const fn = props => {\n if (props[prop] == null) {\n return null;\n }\n const propValue = props[prop];\n const theme = props.theme;\n const themeMapping = getPath(theme, themeKey) || {};\n const styleFromPropValue = propValueFinal => {\n let value = getStyleValue(themeMapping, transform, propValueFinal);\n if (propValueFinal === value && typeof propValueFinal === 'string') {\n // Haven't found value\n value = getStyleValue(themeMapping, transform, `${prop}${propValueFinal === 'default' ? '' : capitalize(propValueFinal)}`, propValueFinal);\n }\n if (cssProperty === false) {\n return value;\n }\n return {\n [cssProperty]: value\n };\n };\n return handleBreakpoints(props, propValue, styleFromPropValue);\n };\n fn.propTypes = process.env.NODE_ENV !== 'production' ? {\n [prop]: responsivePropType\n } : {};\n fn.filterProps = [prop];\n return fn;\n}\nexport default style;","import merge from './merge';\nfunction compose(...styles) {\n const handlers = styles.reduce((acc, style) => {\n style.filterProps.forEach(prop => {\n acc[prop] = style;\n });\n return acc;\n }, {});\n\n // false positive\n // eslint-disable-next-line react/function-component-definition\n const fn = props => {\n return Object.keys(props).reduce((acc, prop) => {\n if (handlers[prop]) {\n return merge(acc, handlers[prop](props));\n }\n return acc;\n }, {});\n };\n fn.propTypes = process.env.NODE_ENV !== 'production' ? styles.reduce((acc, style) => Object.assign(acc, style.propTypes), {}) : {};\n fn.filterProps = styles.reduce((acc, style) => acc.concat(style.filterProps), []);\n return fn;\n}\nexport default compose;","import responsivePropType from './responsivePropType';\nimport style from './style';\nimport compose from './compose';\nimport { createUnaryUnit, getValue } from './spacing';\nimport { handleBreakpoints } from './breakpoints';\nexport function borderTransform(value) {\n if (typeof value !== 'number') {\n return value;\n }\n return `${value}px solid`;\n}\nfunction createBorderStyle(prop, transform) {\n return style({\n prop,\n themeKey: 'borders',\n transform\n });\n}\nexport const border = createBorderStyle('border', borderTransform);\nexport const borderTop = createBorderStyle('borderTop', borderTransform);\nexport const borderRight = createBorderStyle('borderRight', borderTransform);\nexport const borderBottom = createBorderStyle('borderBottom', borderTransform);\nexport const borderLeft = createBorderStyle('borderLeft', borderTransform);\nexport const borderColor = createBorderStyle('borderColor');\nexport const borderTopColor = createBorderStyle('borderTopColor');\nexport const borderRightColor = createBorderStyle('borderRightColor');\nexport const borderBottomColor = createBorderStyle('borderBottomColor');\nexport const borderLeftColor = createBorderStyle('borderLeftColor');\nexport const outline = createBorderStyle('outline', borderTransform);\nexport const outlineColor = createBorderStyle('outlineColor');\n\n// false positive\n// eslint-disable-next-line react/function-component-definition\nexport const borderRadius = props => {\n if (props.borderRadius !== undefined && props.borderRadius !== null) {\n const transformer = createUnaryUnit(props.theme, 'shape.borderRadius', 4, 'borderRadius');\n const styleFromPropValue = propValue => ({\n borderRadius: getValue(transformer, propValue)\n });\n return handleBreakpoints(props, props.borderRadius, styleFromPropValue);\n }\n return null;\n};\nborderRadius.propTypes = process.env.NODE_ENV !== 'production' ? {\n borderRadius: responsivePropType\n} : {};\nborderRadius.filterProps = ['borderRadius'];\nconst borders = compose(border, borderTop, borderRight, borderBottom, borderLeft, borderColor, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor, borderRadius, outline, outlineColor);\nexport default borders;","import style from './style';\nimport compose from './compose';\nimport { createUnaryUnit, getValue } from './spacing';\nimport { handleBreakpoints } from './breakpoints';\nimport responsivePropType from './responsivePropType';\n\n// false positive\n// eslint-disable-next-line react/function-component-definition\nexport const gap = props => {\n if (props.gap !== undefined && props.gap !== null) {\n const transformer = createUnaryUnit(props.theme, 'spacing', 8, 'gap');\n const styleFromPropValue = propValue => ({\n gap: getValue(transformer, propValue)\n });\n return handleBreakpoints(props, props.gap, styleFromPropValue);\n }\n return null;\n};\ngap.propTypes = process.env.NODE_ENV !== 'production' ? {\n gap: responsivePropType\n} : {};\ngap.filterProps = ['gap'];\n\n// false positive\n// eslint-disable-next-line react/function-component-definition\nexport const columnGap = props => {\n if (props.columnGap !== undefined && props.columnGap !== null) {\n const transformer = createUnaryUnit(props.theme, 'spacing', 8, 'columnGap');\n const styleFromPropValue = propValue => ({\n columnGap: getValue(transformer, propValue)\n });\n return handleBreakpoints(props, props.columnGap, styleFromPropValue);\n }\n return null;\n};\ncolumnGap.propTypes = process.env.NODE_ENV !== 'production' ? {\n columnGap: responsivePropType\n} : {};\ncolumnGap.filterProps = ['columnGap'];\n\n// false positive\n// eslint-disable-next-line react/function-component-definition\nexport const rowGap = props => {\n if (props.rowGap !== undefined && props.rowGap !== null) {\n const transformer = createUnaryUnit(props.theme, 'spacing', 8, 'rowGap');\n const styleFromPropValue = propValue => ({\n rowGap: getValue(transformer, propValue)\n });\n return handleBreakpoints(props, props.rowGap, styleFromPropValue);\n }\n return null;\n};\nrowGap.propTypes = process.env.NODE_ENV !== 'production' ? {\n rowGap: responsivePropType\n} : {};\nrowGap.filterProps = ['rowGap'];\nexport const gridColumn = style({\n prop: 'gridColumn'\n});\nexport const gridRow = style({\n prop: 'gridRow'\n});\nexport const gridAutoFlow = style({\n prop: 'gridAutoFlow'\n});\nexport const gridAutoColumns = style({\n prop: 'gridAutoColumns'\n});\nexport const gridAutoRows = style({\n prop: 'gridAutoRows'\n});\nexport const gridTemplateColumns = style({\n prop: 'gridTemplateColumns'\n});\nexport const gridTemplateRows = style({\n prop: 'gridTemplateRows'\n});\nexport const gridTemplateAreas = style({\n prop: 'gridTemplateAreas'\n});\nexport const gridArea = style({\n prop: 'gridArea'\n});\nconst grid = compose(gap, columnGap, rowGap, gridColumn, gridRow, gridAutoFlow, gridAutoColumns, gridAutoRows, gridTemplateColumns, gridTemplateRows, gridTemplateAreas, gridArea);\nexport default grid;","import style from './style';\nimport compose from './compose';\nexport function paletteTransform(value, userValue) {\n if (userValue === 'grey') {\n return userValue;\n }\n return value;\n}\nexport const color = style({\n prop: 'color',\n themeKey: 'palette',\n transform: paletteTransform\n});\nexport const bgcolor = style({\n prop: 'bgcolor',\n cssProperty: 'backgroundColor',\n themeKey: 'palette',\n transform: paletteTransform\n});\nexport const backgroundColor = style({\n prop: 'backgroundColor',\n themeKey: 'palette',\n transform: paletteTransform\n});\nconst palette = compose(color, bgcolor, backgroundColor);\nexport default palette;","import style from './style';\nimport compose from './compose';\nimport { handleBreakpoints, values as breakpointsValues } from './breakpoints';\nexport function sizingTransform(value) {\n return value <= 1 && value !== 0 ? `${value * 100}%` : value;\n}\nexport const width = style({\n prop: 'width',\n transform: sizingTransform\n});\nexport const maxWidth = props => {\n if (props.maxWidth !== undefined && props.maxWidth !== null) {\n const styleFromPropValue = propValue => {\n var _props$theme, _props$theme2;\n const breakpoint = ((_props$theme = props.theme) == null || (_props$theme = _props$theme.breakpoints) == null || (_props$theme = _props$theme.values) == null ? void 0 : _props$theme[propValue]) || breakpointsValues[propValue];\n if (!breakpoint) {\n return {\n maxWidth: sizingTransform(propValue)\n };\n }\n if (((_props$theme2 = props.theme) == null || (_props$theme2 = _props$theme2.breakpoints) == null ? void 0 : _props$theme2.unit) !== 'px') {\n return {\n maxWidth: `${breakpoint}${props.theme.breakpoints.unit}`\n };\n }\n return {\n maxWidth: breakpoint\n };\n };\n return handleBreakpoints(props, props.maxWidth, styleFromPropValue);\n }\n return null;\n};\nmaxWidth.filterProps = ['maxWidth'];\nexport const minWidth = style({\n prop: 'minWidth',\n transform: sizingTransform\n});\nexport const height = style({\n prop: 'height',\n transform: sizingTransform\n});\nexport const maxHeight = style({\n prop: 'maxHeight',\n transform: sizingTransform\n});\nexport const minHeight = style({\n prop: 'minHeight',\n transform: sizingTransform\n});\nexport const sizeWidth = style({\n prop: 'size',\n cssProperty: 'width',\n transform: sizingTransform\n});\nexport const sizeHeight = style({\n prop: 'size',\n cssProperty: 'height',\n transform: sizingTransform\n});\nexport const boxSizing = style({\n prop: 'boxSizing'\n});\nconst sizing = compose(width, maxWidth, minWidth, height, maxHeight, minHeight, boxSizing);\nexport default sizing;","import { padding, margin } from '../spacing';\nimport { borderRadius, borderTransform } from '../borders';\nimport { gap, rowGap, columnGap } from '../cssGrid';\nimport { paletteTransform } from '../palette';\nimport { maxWidth, sizingTransform } from '../sizing';\nconst defaultSxConfig = {\n // borders\n border: {\n themeKey: 'borders',\n transform: borderTransform\n },\n borderTop: {\n themeKey: 'borders',\n transform: borderTransform\n },\n borderRight: {\n themeKey: 'borders',\n transform: borderTransform\n },\n borderBottom: {\n themeKey: 'borders',\n transform: borderTransform\n },\n borderLeft: {\n themeKey: 'borders',\n transform: borderTransform\n },\n borderColor: {\n themeKey: 'palette'\n },\n borderTopColor: {\n themeKey: 'palette'\n },\n borderRightColor: {\n themeKey: 'palette'\n },\n borderBottomColor: {\n themeKey: 'palette'\n },\n borderLeftColor: {\n themeKey: 'palette'\n },\n outline: {\n themeKey: 'borders',\n transform: borderTransform\n },\n outlineColor: {\n themeKey: 'palette'\n },\n borderRadius: {\n themeKey: 'shape.borderRadius',\n style: borderRadius\n },\n // palette\n color: {\n themeKey: 'palette',\n transform: paletteTransform\n },\n bgcolor: {\n themeKey: 'palette',\n cssProperty: 'backgroundColor',\n transform: paletteTransform\n },\n backgroundColor: {\n themeKey: 'palette',\n transform: paletteTransform\n },\n // spacing\n p: {\n style: padding\n },\n pt: {\n style: padding\n },\n pr: {\n style: padding\n },\n pb: {\n style: padding\n },\n pl: {\n style: padding\n },\n px: {\n style: padding\n },\n py: {\n style: padding\n },\n padding: {\n style: padding\n },\n paddingTop: {\n style: padding\n },\n paddingRight: {\n style: padding\n },\n paddingBottom: {\n style: padding\n },\n paddingLeft: {\n style: padding\n },\n paddingX: {\n style: padding\n },\n paddingY: {\n style: padding\n },\n paddingInline: {\n style: padding\n },\n paddingInlineStart: {\n style: padding\n },\n paddingInlineEnd: {\n style: padding\n },\n paddingBlock: {\n style: padding\n },\n paddingBlockStart: {\n style: padding\n },\n paddingBlockEnd: {\n style: padding\n },\n m: {\n style: margin\n },\n mt: {\n style: margin\n },\n mr: {\n style: margin\n },\n mb: {\n style: margin\n },\n ml: {\n style: margin\n },\n mx: {\n style: margin\n },\n my: {\n style: margin\n },\n margin: {\n style: margin\n },\n marginTop: {\n style: margin\n },\n marginRight: {\n style: margin\n },\n marginBottom: {\n style: margin\n },\n marginLeft: {\n style: margin\n },\n marginX: {\n style: margin\n },\n marginY: {\n style: margin\n },\n marginInline: {\n style: margin\n },\n marginInlineStart: {\n style: margin\n },\n marginInlineEnd: {\n style: margin\n },\n marginBlock: {\n style: margin\n },\n marginBlockStart: {\n style: margin\n },\n marginBlockEnd: {\n style: margin\n },\n // display\n displayPrint: {\n cssProperty: false,\n transform: value => ({\n '@media print': {\n display: value\n }\n })\n },\n display: {},\n overflow: {},\n textOverflow: {},\n visibility: {},\n whiteSpace: {},\n // flexbox\n flexBasis: {},\n flexDirection: {},\n flexWrap: {},\n justifyContent: {},\n alignItems: {},\n alignContent: {},\n order: {},\n flex: {},\n flexGrow: {},\n flexShrink: {},\n alignSelf: {},\n justifyItems: {},\n justifySelf: {},\n // grid\n gap: {\n style: gap\n },\n rowGap: {\n style: rowGap\n },\n columnGap: {\n style: columnGap\n },\n gridColumn: {},\n gridRow: {},\n gridAutoFlow: {},\n gridAutoColumns: {},\n gridAutoRows: {},\n gridTemplateColumns: {},\n gridTemplateRows: {},\n gridTemplateAreas: {},\n gridArea: {},\n // positions\n position: {},\n zIndex: {\n themeKey: 'zIndex'\n },\n top: {},\n right: {},\n bottom: {},\n left: {},\n // shadows\n boxShadow: {\n themeKey: 'shadows'\n },\n // sizing\n width: {\n transform: sizingTransform\n },\n maxWidth: {\n style: maxWidth\n },\n minWidth: {\n transform: sizingTransform\n },\n height: {\n transform: sizingTransform\n },\n maxHeight: {\n transform: sizingTransform\n },\n minHeight: {\n transform: sizingTransform\n },\n boxSizing: {},\n // typography\n fontFamily: {\n themeKey: 'typography'\n },\n fontSize: {\n themeKey: 'typography'\n },\n fontStyle: {\n themeKey: 'typography'\n },\n fontWeight: {\n themeKey: 'typography'\n },\n letterSpacing: {},\n textTransform: {},\n lineHeight: {},\n textAlign: {},\n typography: {\n cssProperty: false,\n themeKey: 'typography'\n }\n};\nexport default defaultSxConfig;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nconst _excluded = [\"sx\"];\nimport { isPlainObject } from '@mui/utils/deepmerge';\nimport defaultSxConfig from './defaultSxConfig';\nconst splitProps = props => {\n var _props$theme$unstable, _props$theme;\n const result = {\n systemProps: {},\n otherProps: {}\n };\n const config = (_props$theme$unstable = props == null || (_props$theme = props.theme) == null ? void 0 : _props$theme.unstable_sxConfig) != null ? _props$theme$unstable : defaultSxConfig;\n Object.keys(props).forEach(prop => {\n if (config[prop]) {\n result.systemProps[prop] = props[prop];\n } else {\n result.otherProps[prop] = props[prop];\n }\n });\n return result;\n};\nexport default function extendSxProp(props) {\n const {\n sx: inSx\n } = props,\n other = _objectWithoutPropertiesLoose(props, _excluded);\n const {\n systemProps,\n otherProps\n } = splitProps(other);\n let finalSx;\n if (Array.isArray(inSx)) {\n finalSx = [systemProps, ...inSx];\n } else if (typeof inSx === 'function') {\n finalSx = (...args) => {\n const result = inSx(...args);\n if (!isPlainObject(result)) {\n return systemProps;\n }\n return _extends({}, systemProps, result);\n };\n } else {\n finalSx = _extends({}, systemProps, inSx);\n }\n return _extends({}, otherProps, {\n sx: finalSx\n });\n}","import capitalize from '@mui/utils/capitalize';\nimport merge from '../merge';\nimport { getPath, getStyleValue as getValue } from '../style';\nimport { handleBreakpoints, createEmptyBreakpointObject, removeUnusedBreakpoints } from '../breakpoints';\nimport defaultSxConfig from './defaultSxConfig';\nfunction objectsHaveSameKeys(...objects) {\n const allKeys = objects.reduce((keys, object) => keys.concat(Object.keys(object)), []);\n const union = new Set(allKeys);\n return objects.every(object => union.size === Object.keys(object).length);\n}\nfunction callIfFn(maybeFn, arg) {\n return typeof maybeFn === 'function' ? maybeFn(arg) : maybeFn;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function unstable_createStyleFunctionSx() {\n function getThemeValue(prop, val, theme, config) {\n const props = {\n [prop]: val,\n theme\n };\n const options = config[prop];\n if (!options) {\n return {\n [prop]: val\n };\n }\n const {\n cssProperty = prop,\n themeKey,\n transform,\n style\n } = options;\n if (val == null) {\n return null;\n }\n\n // TODO v6: remove, see https://github.com/mui/material-ui/pull/38123\n if (themeKey === 'typography' && val === 'inherit') {\n return {\n [prop]: val\n };\n }\n const themeMapping = getPath(theme, themeKey) || {};\n if (style) {\n return style(props);\n }\n const styleFromPropValue = propValueFinal => {\n let value = getValue(themeMapping, transform, propValueFinal);\n if (propValueFinal === value && typeof propValueFinal === 'string') {\n // Haven't found value\n value = getValue(themeMapping, transform, `${prop}${propValueFinal === 'default' ? '' : capitalize(propValueFinal)}`, propValueFinal);\n }\n if (cssProperty === false) {\n return value;\n }\n return {\n [cssProperty]: value\n };\n };\n return handleBreakpoints(props, val, styleFromPropValue);\n }\n function styleFunctionSx(props) {\n var _theme$unstable_sxCon;\n const {\n sx,\n theme = {}\n } = props || {};\n if (!sx) {\n return null; // Emotion & styled-components will neglect null\n }\n const config = (_theme$unstable_sxCon = theme.unstable_sxConfig) != null ? _theme$unstable_sxCon : defaultSxConfig;\n\n /*\n * Receive `sxInput` as object or callback\n * and then recursively check keys & values to create media query object styles.\n * (the result will be used in `styled`)\n */\n function traverse(sxInput) {\n let sxObject = sxInput;\n if (typeof sxInput === 'function') {\n sxObject = sxInput(theme);\n } else if (typeof sxInput !== 'object') {\n // value\n return sxInput;\n }\n if (!sxObject) {\n return null;\n }\n const emptyBreakpoints = createEmptyBreakpointObject(theme.breakpoints);\n const breakpointsKeys = Object.keys(emptyBreakpoints);\n let css = emptyBreakpoints;\n Object.keys(sxObject).forEach(styleKey => {\n const value = callIfFn(sxObject[styleKey], theme);\n if (value !== null && value !== undefined) {\n if (typeof value === 'object') {\n if (config[styleKey]) {\n css = merge(css, getThemeValue(styleKey, value, theme, config));\n } else {\n const breakpointsValues = handleBreakpoints({\n theme\n }, value, x => ({\n [styleKey]: x\n }));\n if (objectsHaveSameKeys(breakpointsValues, value)) {\n css[styleKey] = styleFunctionSx({\n sx: value,\n theme\n });\n } else {\n css = merge(css, breakpointsValues);\n }\n }\n } else {\n css = merge(css, getThemeValue(styleKey, value, theme, config));\n }\n }\n });\n return removeUnusedBreakpoints(breakpointsKeys, css);\n }\n return Array.isArray(sx) ? sx.map(traverse) : traverse(sx);\n }\n return styleFunctionSx;\n}\nconst styleFunctionSx = unstable_createStyleFunctionSx();\nstyleFunctionSx.filterProps = ['sx'];\nexport default styleFunctionSx;","import _formatMuiErrorMessage from \"@mui/utils/formatMuiErrorMessage\";\n// It should to be noted that this function isn't equivalent to `text-transform: capitalize`.\n//\n// A strict capitalization should uppercase the first letter of each word in the sentence.\n// We only handle the first word.\nexport default function capitalize(string) {\n if (typeof string !== 'string') {\n throw new Error(process.env.NODE_ENV !== \"production\" ? `MUI: \\`capitalize(string)\\` expects a string argument.` : _formatMuiErrorMessage(7));\n }\n return string.charAt(0).toUpperCase() + string.slice(1);\n}","function clamp(val, min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER) {\n return Math.max(min, Math.min(val, max));\n}\nexport default clamp;","import _extends from \"@babel/runtime/helpers/esm/extends\";\n// https://github.com/sindresorhus/is-plain-obj/blob/main/index.js\nexport function isPlainObject(item) {\n if (typeof item !== 'object' || item === null) {\n return false;\n }\n const prototype = Object.getPrototypeOf(item);\n return (prototype === null || prototype === Object.prototype || Object.getPrototypeOf(prototype) === null) && !(Symbol.toStringTag in item) && !(Symbol.iterator in item);\n}\nfunction deepClone(source) {\n if (!isPlainObject(source)) {\n return source;\n }\n const output = {};\n Object.keys(source).forEach(key => {\n output[key] = deepClone(source[key]);\n });\n return output;\n}\nexport default function deepmerge(target, source, options = {\n clone: true\n}) {\n const output = options.clone ? _extends({}, target) : target;\n if (isPlainObject(target) && isPlainObject(source)) {\n Object.keys(source).forEach(key => {\n // Avoid prototype pollution\n if (key === '__proto__') {\n return;\n }\n if (isPlainObject(source[key]) && key in target && isPlainObject(target[key])) {\n // Since `output` is a clone of `target` and we have narrowed `target` in this block we can cast to the same type.\n output[key] = deepmerge(target[key], source[key], options);\n } else if (options.clone) {\n output[key] = isPlainObject(source[key]) ? deepClone(source[key]) : source[key];\n } else {\n output[key] = source[key];\n }\n });\n }\n return output;\n}","/**\n * WARNING: Don't import this directly.\n * Use `MuiError` from `@mui/internal-babel-macros/MuiError.macro` instead.\n * @param {number} code\n */\nexport default function formatMuiErrorMessage(code) {\n // Apply babel-plugin-transform-template-literals in loose mode\n // loose mode is safe if we're concatenating primitives\n // see https://babeljs.io/docs/en/babel-plugin-transform-template-literals#loose\n /* eslint-disable prefer-template */\n let url = 'https://mui.com/production-error/?code=' + code;\n for (let i = 1; i < arguments.length; i += 1) {\n // rest params over-transpile for this case\n // eslint-disable-next-line prefer-rest-params\n url += '&args[]=' + encodeURIComponent(arguments[i]);\n }\n return 'Minified MUI error #' + code + '; visit ' + url + ' for the full message.';\n /* eslint-enable prefer-template */\n}","import { ForwardRef, Memo } from 'react-is';\n\n// Simplified polyfill for IE11 support\n// https://github.com/JamesMGreene/Function.name/blob/58b314d4a983110c3682f1228f845d39ccca1817/Function.name.js#L3\nconst fnNameMatchRegex = /^\\s*function(?:\\s|\\s*\\/\\*.*\\*\\/\\s*)+([^(\\s/]*)\\s*/;\nexport function getFunctionName(fn) {\n const match = `${fn}`.match(fnNameMatchRegex);\n const name = match && match[1];\n return name || '';\n}\nfunction getFunctionComponentName(Component, fallback = '') {\n return Component.displayName || Component.name || getFunctionName(Component) || fallback;\n}\nfunction getWrappedName(outerType, innerType, wrapperName) {\n const functionName = getFunctionComponentName(innerType);\n return outerType.displayName || (functionName !== '' ? `${wrapperName}(${functionName})` : wrapperName);\n}\n\n/**\n * cherry-pick from\n * https://github.com/facebook/react/blob/769b1f270e1251d9dbdce0fcbd9e92e502d059b8/packages/shared/getComponentName.js\n * originally forked from recompose/getDisplayName with added IE11 support\n */\nexport default function getDisplayName(Component) {\n if (Component == null) {\n return undefined;\n }\n if (typeof Component === 'string') {\n return Component;\n }\n if (typeof Component === 'function') {\n return getFunctionComponentName(Component, 'Component');\n }\n\n // TypeScript can't have components as objects but they exist in the form of `memo` or `Suspense`\n if (typeof Component === 'object') {\n switch (Component.$$typeof) {\n case ForwardRef:\n return getWrappedName(Component, Component.render, 'ForwardRef');\n case Memo:\n return getWrappedName(Component, Component.type, 'memo');\n default:\n return undefined;\n }\n }\n return undefined;\n}","import * as React from \"react\";\n\nexport type ProgressBarProps = {\n completed: string | number;\n bgColor?: string;\n baseBgColor?: string;\n height?: string;\n width?: string;\n borderRadius?: string;\n margin?: string;\n padding?: string;\n labelAlignment?: \"left\" | \"center\" | \"right\" | \"outside\";\n labelColor?: string;\n labelSize?: string;\n customLabelStyles?: React.CSSProperties;\n isLabelVisible?: boolean;\n transitionDuration?: string;\n transitionTimingFunction?:\n | \"ease\"\n | \"linear\"\n | \"ease-in\"\n | \"ease-out\"\n | \"ease-in-out\";\n className?: string;\n dir?: \"ltr\" | \"rtl\" | \"auto\";\n ariaValuemin?: number;\n ariaValuemax?: number;\n ariaValuetext?: number | null;\n maxCompleted?: number;\n customLabel?: string;\n animateOnRender?: boolean;\n barContainerClassName?: string;\n completedClassName?: string;\n labelClassName?: string;\n initCompletedOnAnimation?: string | number;\n};\n\nconst ProgressBar: React.FC = ({\n bgColor = \"#6a1b9a\",\n height = \"20px\",\n width = \"100%\",\n borderRadius = \"50px\",\n labelAlignment = \"right\",\n baseBgColor = \"#e0e0de\",\n labelColor = \"#fff\",\n labelSize = \"15px\",\n isLabelVisible = true,\n dir = \"ltr\",\n ariaValuemin = 0,\n ariaValuemax = 100,\n ariaValuetext = null,\n maxCompleted = 100,\n animateOnRender = false,\n initCompletedOnAnimation = 0,\n completed,\n margin,\n padding,\n customLabelStyles,\n transitionDuration,\n transitionTimingFunction,\n className,\n customLabel,\n barContainerClassName,\n completedClassName,\n labelClassName,\n}) => {\n const getAlignment = (\n alignmentOption: ProgressBarProps[\"labelAlignment\"]\n ) => {\n if (alignmentOption === \"left\") {\n return \"flex-start\";\n } else if (alignmentOption === \"center\") {\n return \"center\";\n } else if (alignmentOption === \"right\") {\n return \"flex-end\";\n } else {\n return null;\n }\n };\n\n const alignment = getAlignment(labelAlignment);\n\n const initCompletedOnAnimationStr =\n typeof initCompletedOnAnimation === \"number\"\n ? `${initCompletedOnAnimation}%`\n : initCompletedOnAnimation;\n\n const getFillerWidth = (\n maxCompletedValue: ProgressBarProps[\"maxCompleted\"],\n completedValue: ProgressBarProps[\"completed\"]\n ) => {\n if (maxCompletedValue) {\n const ratio = Number(completedValue) / maxCompletedValue;\n return ratio > 1 ? \"100%\" : `${ratio * 100}%`;\n }\n return initCompletedOnAnimationStr;\n };\n\n const fillerWidth = getFillerWidth(maxCompleted, completed);\n\n const [initWidth, setInitWidth] = React.useState(\n initCompletedOnAnimationStr\n );\n\n const containerStyles: React.CSSProperties = {\n height: height,\n background: baseBgColor,\n borderRadius: borderRadius,\n padding: padding,\n width: width,\n margin: margin,\n overflow: \"hidden\",\n };\n\n const fillerStyles: React.CSSProperties = {\n height: height,\n width: animateOnRender ? initWidth : fillerWidth,\n background: bgColor,\n transition: `width ${transitionDuration || \"1s\"} ${\n transitionTimingFunction || \"ease-in-out\"\n }`,\n borderRadius: \"inherit\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent:\n labelAlignment !== \"outside\" && alignment ? alignment : \"normal\",\n };\n\n const labelStyles: React.CSSProperties = {\n padding: labelAlignment === \"outside\" ? \"0 0 0 5px\" : \"5px\",\n color: labelColor,\n fontWeight: \"bold\",\n fontSize: labelSize,\n display: !isLabelVisible ? \"none\" : \"initial\",\n ...customLabelStyles,\n };\n\n const outsideStyles = {\n display: labelAlignment === \"outside\" ? \"flex\" : \"initial\",\n alignItems: labelAlignment === \"outside\" ? \"center\" : \"initial\",\n };\n\n const completedStr =\n typeof completed === \"number\" ? `${completed}%` : `${completed}`;\n\n const labelStr = customLabel ? customLabel : completedStr;\n\n React.useEffect(() => {\n if (animateOnRender) {\n requestAnimationFrame(() => setInitWidth(fillerWidth));\n }\n }, [fillerWidth, animateOnRender]);\n\n return (\n \n \n \n {labelAlignment !== \"outside\" && (\n \n {labelStr}\n \n )}\n