@basic-ui/core 0.0.61 → 0.0.63

package/build/cjs/index.js

@@ -1,3938 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var react = require('react');
-var jsxRuntime = require('react/jsx-runtime');
-var core = require('@popperjs/core');
-var reactDom = require('react-dom');
-
-// AccordionGroup Component
-
-const accordionContext = /*#__PURE__*/react.createContext(null);
-const {
-  Provider: AccordionProvider
-} = accordionContext;
-const useAccordionContext = () => react.useContext(accordionContext);
-
-// Accordion Component
-
-const accordionItemContext = /*#__PURE__*/react.createContext(null);
-const {
-  Provider: AccordionItemProvider
-} = accordionItemContext;
-const useAccordionItemContext = () => react.useContext(accordionItemContext);
-
-const tabblable = ['button:enabled:not([readonly])', 'select:enabled:not([readonly])', 'textarea:enabled:not([readonly])', 'input:enabled:not([readonly])', 'a[href]', 'area[href]', 'iframe', 'object', 'embed', '[tabindex]', '[contenteditable]', '[autofocus]'].join(',');
-
-/* This is naive and will not consider tabIndex */
-const getTabblableNodes = parentNode => {
-  if (!parentNode) {
-    return [];
-  }
-  return Array.from(parentNode.querySelectorAll(tabblable));
-};
-function focusOnChildNode(parentNode, itemIndex) {
-  const elements = getTabblableNodes(parentNode);
-  if (elements.length > 0) {
-    elements[itemIndex === -1 ? elements.length - 1 : 0].focus();
-  } else {
-    const currentTabIndex = parentNode.tabIndex;
-    parentNode.tabIndex = 0;
-    parentNode.focus();
-    parentNode.tabIndex = currentTabIndex;
-  }
-}
-
-function useAutoFocus(open, elementRef) {
-  react.useEffect(() => {
-    if (open) {
-      // We will only autoFocus on the first child if the currently active element isn't already trapped inside the modal
-      if (elementRef.current && !elementRef.current.contains(document.activeElement)) {
-        focusOnChildNode(elementRef.current, 0);
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open]);
-}
-
-function assignRef(ref, value) {
-  if (ref == null) return;
-  if (typeof ref === 'function') {
-    ref(value);
-  } else {
-    try {
-      ref.current = value;
-    } catch (error) {
-      throw new Error(`Cannot assign value "${value}" to ref "${ref}"`);
-    }
-  }
-}
-function assignMultipleRefs(...refs) {
-  return node => {
-    refs.forEach(ref => {
-      assignRef(ref, node);
-    });
-  };
-}
-
-function canUseDOM() {
-  return !!(typeof window !== 'undefined' && window.document && window.document.createElement);
-}
-
-function createContext(rootName, defaultContext) {
-  const Ctx = /*#__PURE__*/react.createContext(defaultContext);
-  function Provider(props) {
-    const {
-      children,
-      ...context
-    } = props;
-    const value = react.useMemo(() => context,
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    Object.values(context));
-    return /*#__PURE__*/jsxRuntime.jsx(Ctx.Provider, {
-      value: value,
-      children: children
-    });
-  }
-  function useContext(childName) {
-    const context = react.useContext(Ctx);
-    if (context) {
-      return context;
-    }
-    if (defaultContext) {
-      return defaultContext;
-    }
-    throw Error(`${childName} must be rendered inside of a ${rootName} component.`);
-  }
-  Ctx.displayName = `${rootName}Context`;
-  Provider.displayName = `${rootName}Provider`;
-  return [Provider, useContext];
-}
-
-function getCircularIndex(index, maxLength) {
-  if (maxLength < 0) {
-    return null;
-  }
-  return (index % maxLength + maxLength) % maxLength;
-}
-
-/**
- * Detects right clicks
- *
- * @param nativeEvent
- */
-function isRightClick(nativeEvent) {
-  return 'which' in nativeEvent ? nativeEvent.which === 3 : 'button' in nativeEvent ? nativeEvent.button === 2 : false;
-}
-
-/**
- * Get an element's owner document. Useful when components are used in iframes
- * or other environments like dev tools.
- *
- * @param element
- */
-function getOwnerDocument(element) {
-  return canUseDOM() ? element ? element.ownerDocument : document : null;
-}
-
-// https://twitter.com/chpwn/status/285540192096497664
-// iOS constant = 0.55
-function rubberBand(distance, dimension, constant = 0.15) {
-  return distance * dimension * constant / (dimension + constant * distance);
-}
-function rubberBandClamp(min, max, delta, constant = 0.15) {
-  if (delta < min) {
-    return -rubberBand(min - delta, max - min, constant) + min;
-  }
-  if (delta > max) {
-    return rubberBand(delta - max, max - min, constant) + max;
-  }
-  return delta;
-}
-
-/* eslint-disable react-hooks/rules-of-hooks */
-const useEnhancedEffect$2 = typeof window !== 'undefined' ? react.useLayoutEffect : react.useEffect;
-
-/**
- * Converts a callback to a ref to avoid triggering re-renders when passed as a
- * prop and exposed as a stable function to avoid executing effects when
- * passed as a dependency.
- */
-function createStableCallbackHook(useEffectHook, callback) {
-  const callbackRef = react.useRef(callback);
-  useEffectHook(() => {
-    callbackRef.current = callback;
-  });
-  return react.useCallback((...args) => {
-    callbackRef.current && callbackRef.current(...args);
-  }, []);
-}
-
-/**
- * Converts a callback to a ref to avoid triggering re-renders when passed as a
- * prop and exposed as a stable function to avoid executing effects when passed
- * as a dependency.
- */
-function useStableCallback(callback) {
-  return createStableCallbackHook(react.useEffect, callback);
-}
-
-/**
- * Converts a callback to a ref to avoid triggering re-renders when passed as a
- * prop and exposed as a stable function to avoid executing effects when passed
- * as a dependency.
- *
- * Use this over `useStableCallback` when you want the callback to be cached in
- * `useLayoutEffect` instead of `useEffect` to deal with timing issues only when
- * needed.
- */
-function useStableLayoutCallback(callback) {
-  return createStableCallbackHook(useEnhancedEffect$2, callback);
-}
-
-function wrapEvent(theirHandler, ourHandler) {
-  return (event, ...otherArgs) => {
-    const ret = theirHandler && theirHandler(event, ...otherArgs);
-    if (!event || !event.defaultPrevented) {
-      return ourHandler(event, ...otherArgs);
-    }
-    return ret;
-  };
-}
-
-function useControlledState(valueProp, onChangeProp, defaultValue, defaultOnChange) {
-  const isControlled = valueProp !== undefined;
-  const wasControlled = react.useRef(isControlled);
-  const hasWarned = react.useRef(false);
-  const [valueState, setValueState] = react.useState(defaultValue);
-  if (isControlled) {
-    if (!wasControlled.current && !hasWarned.current && process.env.NODE_ENV !== 'production') {
-      console.warn('Trying to change from controlled to uncontrolled.');
-      hasWarned.current = true;
-    }
-    return [valueProp, wrapEvent(onChangeProp, defaultOnChange(setValueState))];
-  }
-  return [valueState, wrapEvent(onChangeProp, defaultOnChange(setValueState))];
-}
-
-function useChildrenCounterParent(itemsRef) {
-  // Reset the options ref every render so that they are always
-  // accurate and ready for keyboard navigation handlers. Using layout
-  // effect to schedule this effect before the ComboboxOptions push into
-  // the array
-  itemsRef.current = [];
-  itemsRef.current.isNewRender = true;
-  react.useEffect(() => {
-    // Rendering is finished. Meaning any children can now rerender,
-    // and they should not push any new items to our array, because
-    // it is not a new render
-    itemsRef.current.isNewRender = false;
-  });
-  react.useEffect(() => {
-    // When we are unmounting, it means there are no children anymore.
-    // Clear out our items array
-    return () => {
-      itemsRef.current = [];
-    };
-  }, [itemsRef]);
-}
-function useChildrenCounterChild(itemsRef, itemIndexRef, obj, disabled = false) {
-  if (itemsRef && itemsRef.current.isNewRender) {
-    if (disabled) {
-      itemIndexRef.current = -1;
-      return;
-    }
-
-    // push this option to the optionsRef array
-    itemIndexRef.current = itemsRef.current.length;
-    if (obj instanceof Function) {
-      itemsRef.current.push(obj(itemIndexRef.current));
-    } else {
-      itemsRef.current.push(obj);
-    }
-  }
-}
-
-function useFocusReturn(open, rootEl) {
-  const previousFocusRef = react.useRef((() => {
-    if (open && typeof document !== 'undefined' && document.activeElement instanceof HTMLElement) {
-      return document.activeElement;
-    }
-    return null;
-  })());
-  react.useEffect(() => {
-    if (open) {
-      // once opened, keep track of the element that triggered
-      // the Modal opening
-      if (!previousFocusRef.current && document.activeElement instanceof HTMLElement && !rootEl.current?.contains(document.activeElement)) {
-        previousFocusRef.current = document.activeElement;
-      }
-      const rootElement = rootEl.current;
-      const previousElement = previousFocusRef.current;
-      return () => {
-        // on unmount, return focus to that element
-        if (previousElement && !rootElement?.contains(document.activeElement)) {
-          previousElement.focus({
-            preventScroll: true
-          });
-        }
-      };
-    }
-  }, [open, rootEl]);
-}
-
-function useFocusState(props = {}) {
-  const {
-    onFocus,
-    onBlur
-  } = props;
-  const [hasFocus, setHasFocus] = react.useState(false);
-  const handleFocus = () => {
-    setHasFocus(true);
-  };
-  const handleBlur = () => {
-    setHasFocus(false);
-  };
-  return {
-    bind: {
-      onFocus: wrapEvent(onFocus, handleFocus),
-      onBlur: wrapEvent(onBlur, handleBlur)
-    },
-    hasFocus
-  };
-}
-
-function useOnClickOutside(ref, handler, active = true) {
-  const listener = react.useCallback(event => {
-    // Do nothing if clicking ref's element or descendent elements
-    if (!ref.current || ref.current.contains(event.target)) {
-      return;
-    }
-    handler && handler(event);
-  }, [ref, handler]);
-  react.useEffect(() => {
-    if (active) {
-      document.addEventListener('pointerup', listener);
-      return () => {
-        document.removeEventListener('pointerup', listener);
-      };
-    }
-    return;
-  }, [listener, active]);
-}
-
-function useOnKeyDown(ownerWindow, handler, active = true) {
-  react.useEffect(() => {
-    if (active) {
-      ownerWindow.addEventListener('keydown', handler);
-      return () => {
-        ownerWindow.removeEventListener('keydown', handler);
-      };
-    }
-    return;
-  }, [ownerWindow, active, handler]);
-}
-
-// This manages transitions between states with a built in reducer to manage
-// the data that goes with those transitions.
-function useReducerMachine(chart, reducer, initialData) {
-  const [reducerState, dispatch] = react.useReducer(reducer, initialData);
-  const {
-    state,
-    ...data
-  } = reducerState;
-  const transition = (action, payload = {}) => {
-    const currentState = chart.states[state];
-    if (!currentState) {
-      throw new Error(`Unknown currentState "${state}"`);
-    }
-    const nextState = currentState.on[action];
-    if (!nextState) {
-      throw new Error(`Unknown action "${action}" for state "${state}"`);
-    }
-    dispatch({
-      type: action,
-      nextState,
-      ...payload
-    });
-  };
-  return [state, data, transition];
-}
-
-let scrollBodyCount = 0;
-function useRemoveBodyScroll(open, elementRef) {
-  react.useEffect(() => {
-    if (open && elementRef.current) {
-      const ownerDocument = getOwnerDocument(elementRef.current);
-      const ownerWindow = ownerDocument.defaultView || window;
-      scrollBodyCount += 1;
-
-      // calculate scrollbar width if mounting the first scroll lock
-      let scrollBarWidth = 0;
-      if (scrollBodyCount === 1) {
-        scrollBarWidth = ownerWindow.innerWidth - ownerDocument.body.clientWidth;
-      }
-      ownerDocument.body.style.overflow = 'hidden';
-      if (scrollBarWidth > 0) {
-        ownerDocument.body.style.marginRight = `${scrollBarWidth}px`;
-      }
-      return () => {
-        scrollBodyCount -= 1;
-        if (scrollBodyCount === 0) {
-          ownerDocument.body.style.overflow = '';
-          ownerDocument.body.style.marginRight = '';
-        }
-      };
-    }
-  }, [elementRef, open]);
-}
-
-function useThrottle(value, limit) {
-  const [throttledValue, setThrottledValue] = react.useState(value);
-  const lastRan = react.useRef(Date.now());
-  react.useEffect(() => {
-    const handler = setTimeout(() => {
-      setThrottledValue(value);
-      lastRan.current = Date.now();
-    }, limit - (Date.now() - lastRan.current));
-    return () => {
-      clearTimeout(handler);
-    };
-  }, [value, limit]);
-  return throttledValue;
-}
-
-function useMeasure(ref) {
-  const ro = react.useRef(null);
-  const [bounds, setBounds] = react.useState({
-    left: 0,
-    top: 0,
-    width: 0,
-    height: 0
-  });
-  react.useEffect(() => {
-    if (ro.current === null) {
-      ro.current = new ResizeObserver(entries => {
-        const entry = entries[0];
-        setBounds(entry.contentRect);
-      });
-    }
-    if (ref.current) {
-      ro.current.observe(ref.current);
-    }
-    return () => {
-      if (ro.current) {
-        ro.current.disconnect();
-      }
-    };
-  }, [ref]);
-  return bounds;
-}
-
-const initialGestureHandlersState = {
-  target: null,
-  x: 0,
-  xDelta: 0,
-  xDeltaPercent: 0,
-  xInitial: 0,
-  xPrev: 0,
-  xVelocity: 0,
-  y: 0,
-  yDelta: 0,
-  yDeltaPercent: 0,
-  yInitial: 0,
-  yPrev: 0,
-  yVelocity: 0,
-  startTime: 0,
-  down: false,
-  scrollLocked: false
-};
-const FRAMERATE_CONST = 1000 / 60; // 60 fps
-const VELOCITY_DEPR_FACTOR = FRAMERATE_CONST * 2;
-function gestureHandlers(set, containerRef, options = {}) {
-  const {
-    ensureTargetIsContainer = false,
-    minTouchDelta = 0
-  } = options;
-
-  // Common handlers
-  const handleUp = () => {
-    set(state => {
-      const deltaTime = Date.now() - state.startTime;
-      const xDelta = state.x - state.xInitial;
-      const yDelta = state.y - state.yInitial;
-      const xVelocity = calcVelocity(xDelta, deltaTime, state.xVelocity);
-      const yVelocity = calcVelocity(yDelta, deltaTime, state.yVelocity);
-      const newState = {
-        ...state,
-        xVelocity,
-        yVelocity,
-        target: null,
-        down: false
-      };
-      return newState;
-    });
-  };
-  const handleDown = e => {
-    const {
-      target,
-      pageX,
-      pageY
-    } = e;
-    set(state => {
-      const newState = {
-        ...state,
-        target,
-        x: pageX,
-        xDelta: 0,
-        xDeltaPercent: 0,
-        xVelocity: 0,
-        xInitial: pageX,
-        xPrev: pageX,
-        y: pageY,
-        yDelta: 0,
-        yDeltaPercent: 0,
-        yVelocity: 0,
-        yInitial: pageY,
-        yPrev: pageY,
-        startTime: Date.now(),
-        down: true,
-        scrollLocked: false
-      };
-      return newState;
-    });
-  };
-  function calcVelocity(deltaSpace, deltaTime, prevVelocity) {
-    if (deltaTime < 1) {
-      deltaTime = 1;
-    }
-    const speed = deltaSpace / deltaTime;
-    const depr = 0.5 + Math.min(deltaTime / VELOCITY_DEPR_FACTOR, 0.5);
-    return speed * depr + prevVelocity * (1 - depr);
-  }
-  function handleMove(e) {
-    const {
-      pageX,
-      pageY
-    } = e;
-    if (e.cancelable) {
-      // prevent drag & drop behaviour from browser
-      e.preventDefault && e.preventDefault();
-    }
-    set(state => {
-      function getDeltaSum(currentPos, initialPos, prevPos) {
-        if (state.scrollLocked || Math.abs(currentPos - initialPos) >= minTouchDelta) {
-          state.scrollLocked = true;
-          return currentPos - prevPos;
-        }
-        return 0;
-      }
-      const target = containerRef && containerRef.current || e.target;
-      const deltaTime = Date.now() - state.startTime;
-      const width = target ? target.offsetWidth : NaN;
-      const xDelta = state.xDelta + getDeltaSum(pageX, state.xInitial, state.x);
-      const xDeltaPercent = xDelta * 100 / width;
-      const xVelocity = calcVelocity(xDelta, deltaTime, state.xVelocity);
-      const height = target ? target.offsetHeight : NaN;
-      const yDelta = state.yDelta + getDeltaSum(pageY, state.yInitial, state.y);
-      const yDeltaPercent = yDelta * 100 / height;
-      const yVelocity = calcVelocity(yDelta, deltaTime, state.yVelocity);
-      const newState = {
-        ...state,
-        xDelta,
-        xDeltaPercent,
-        x: pageX,
-        xPrev: state.x,
-        xVelocity,
-        yDelta,
-        yDeltaPercent,
-        y: pageY,
-        yPrev: state.y,
-        yVelocity
-      };
-      return newState;
-    });
-  }
-
-  // Touch handlers
-
-  function handleTouchMove(e) {
-    if (e.cancelable) {
-      // prevent drag & drop behaviour from browser
-      e.preventDefault();
-    }
-    handleMove(e.touches.item(0));
-  }
-  function handleTouchStart(e) {
-    // making sure we're not dragging the element when more than one finger press the screen
-    const {
-      touches
-    } = e;
-    if (touches.length > 1) {
-      return;
-    }
-    if (ensureTargetIsContainer && containerRef && e.target !== containerRef.current) {
-      return;
-    }
-    const ownerDocument = getOwnerDocument(e.currentTarget);
-    const ownerWindow = ownerDocument.defaultView || window;
-    ownerWindow.addEventListener('touchmove', handleTouchMove, {
-      passive: false
-    });
-    ownerWindow.addEventListener('touchend', handleTouchEnd);
-    ownerWindow.addEventListener('touchcancel', handleTouchEnd);
-    handleDown(e.touches.item(0));
-  }
-  function handleTouchEnd() {
-    this.removeEventListener('touchmove', handleTouchMove);
-    this.removeEventListener('touchend', handleTouchEnd);
-    this.removeEventListener('touchcancel', handleTouchEnd);
-    handleUp();
-  }
-
-  // Mouse handlers
-  function handleMouseDown(e) {
-    if (ensureTargetIsContainer && containerRef && e.target !== containerRef.current) {
-      return;
-    }
-    const ownerDocument = getOwnerDocument(e.currentTarget);
-    const ownerWindow = ownerDocument.defaultView || window;
-    if (e.button === 0) {
-      ownerWindow.addEventListener('mousemove', handleMove);
-      ownerWindow.addEventListener('mouseup', handleMouseUp);
-      handleDown(e);
-    }
-  }
-  function handleMouseUp() {
-    this.removeEventListener('mousemove', handleMove);
-    this.removeEventListener('mouseup', handleMouseUp);
-    handleUp();
-  }
-  return {
-    onMouseDown: handleMouseDown,
-    onTouchStart: handleTouchStart
-  };
-}
-const useGestureHandlers = (containerRef, onGesture, options = {}) => {
-  const state = react.useRef({
-    ...initialGestureHandlersState
-  });
-  const set = cb => {
-    state.current = cb(state.current);
-    onGesture && onGesture(state.current);
-    return state.current;
-  };
-  const handlers = gestureHandlers(set, containerRef, options);
-  return {
-    state: state.current,
-    handlers
-  };
-};
-
-function getScope(rootRef) {
-  const queryAllNodes = matcherFn => {
-    if (!rootRef.current) {
-      return [];
-    }
-    const allNodes = rootRef.current.querySelectorAll('*');
-    const filtered = [];
-    allNodes.forEach(node => {
-      const props = {};
-      const {
-        attributes
-      } = node;
-      for (let i = 0; i < attributes.length; i++) {
-        const attr = attributes[i];
-        props[attr.name] = attr.value;
-      }
-      if (matcherFn(node.tagName.toLowerCase(), props, node)) {
-        filtered.push(node);
-      }
-    });
-    return filtered;
-  };
-  return {
-    queryAllNodes
-  };
-}
-function useScope(rootRef) {
-  const scope = react.useRef(getScope(rootRef));
-  return scope;
-}
-
-const Accordion = /*#__PURE__*/react.forwardRef(function Accordion(props, forwardedRef) {
-  const {
-    as: Comp = 'div',
-    expandedIndex = -1,
-    onChange,
-    ...otherProps
-  } = props;
-  const [childrenHeaderHasFocus, setChildrenHeaderHasFocus] = react.useState(false);
-  const ref = react.useRef(null);
-  const scope = useScope(ref);
-  const contextValue = {
-    childrenHeaderHasFocus,
-    setChildrenHeaderHasFocus,
-    scope,
-    expandedIndex,
-    onChange
-  };
-  return /*#__PURE__*/jsxRuntime.jsx(AccordionProvider, {
-    value: contextValue,
-    children: /*#__PURE__*/jsxRuntime.jsx(Comp, {
-      ref: assignMultipleRefs(forwardedRef, ref),
-      ...otherProps,
-      "data-accordion-root": "",
-      "data-children-has-focus": childrenHeaderHasFocus
-    })
-  });
-});
-
-const AccordionItem = /*#__PURE__*/react.forwardRef(function AccordionItem(props, forwardedRef) {
-  const {
-    as: Comp = react.Fragment,
-    expanded = false,
-    onChange,
-    ...otherProps
-  } = props;
-  const id = react.useId();
-  const headerId = id ? `accordion-header-${id}` : undefined;
-  const bodyId = id ? `accordion-body-${id}` : undefined;
-  const contextValue = {
-    headerId,
-    bodyId,
-    expanded,
-    onChange
-  };
-  return /*#__PURE__*/jsxRuntime.jsx(AccordionItemProvider, {
-    value: contextValue,
-    children: /*#__PURE__*/jsxRuntime.jsx(Comp, {
-      ref: forwardedRef,
-      ...otherProps
-    })
-  });
-});
-
-function headerScopeQuery(type, props) {
-  return props['data-accordion-header'] === '';
-}
-function bodyScopeQuery(type, props) {
-  return props['data-accordion-body'] === '';
-}
-
-const AccordionHeader = /*#__PURE__*/react.forwardRef(function AccordionHeader(props, forwardedRef) {
-  const {
-    as: Comp = 'div',
-    onKeyDown,
-    onClick: onClickProp,
-    onFocus,
-    onBlur,
-    ...otherProps
-  } = props;
-  const accordionContext = useAccordionContext();
-  const accordionItemContext = useAccordionItemContext();
-  const ref = react.useRef(null);
-  const [index, setIndex] = react.useState();
-  if (!accordionItemContext) {
-    throw new Error('Missing parent <Accordion /> component');
-  }
-  react.useEffect(() => {
-    if (accordionContext) {
-      const allHeaders = accordionContext.scope.current.queryAllNodes(headerScopeQuery) || [];
-      const index = allHeaders.findIndex(e => e === ref.current);
-      setIndex(index);
-    }
-  }, [accordionContext]);
-  const onClick = wrapEvent(onClickProp, e => {
-    let index = 0;
-    if (accordionItemContext.expanded) {
-      index = -1;
-    } else if (accordionContext) {
-      const allHeaders = accordionContext.scope.current.queryAllNodes(headerScopeQuery) || [];
-      index = allHeaders.findIndex(e => e === ref.current);
-      if (index === accordionContext.expandedIndex) {
-        index = -1;
-      }
-      accordionContext.onChange && accordionContext.onChange(e, index);
-    }
-    accordionItemContext.onChange && accordionItemContext.onChange(e, index >= 0);
-  });
-  const handleKeyDown = e => {
-    switch (e.key) {
-      case 'Enter':
-      case ' ':
-        {
-          onClick(e);
-          e.preventDefault();
-          break;
-        }
-      case 'ArrowUp':
-      case 'ArrowDown':
-      case 'Home':
-      case 'End':
-        {
-          if (!accordionContext) {
-            return;
-          }
-          const allHeaders = accordionContext.scope.current.queryAllNodes(headerScopeQuery);
-          e.preventDefault();
-          if (allHeaders.length === 0) {
-            return;
-          }
-          let nextIndex = allHeaders.findIndex(e => e === ref.current);
-          switch (e.key) {
-            case 'ArrowUp':
-              nextIndex += -1;
-              break;
-            case 'ArrowDown':
-              nextIndex += +1;
-              break;
-            case 'Home':
-              nextIndex = 0;
-              break;
-            case 'End':
-              nextIndex = -1;
-              break;
-          }
-
-          // We're sure it will not be null, because we already checked for allHeaders.length > 0 above
-          nextIndex = getCircularIndex(nextIndex, allHeaders.length);
-          allHeaders[nextIndex] && allHeaders[nextIndex].focus();
-          break;
-        }
-      default:
-        return;
-    }
-  };
-  const handleFocus = () => {
-    if (accordionContext) {
-      if (!accordionContext.childrenHeaderHasFocus) {
-        // this is needed to avoid rerendering the parent and
-        // messing up with the internal count for children/parent count
-        accordionContext.setChildrenHeaderHasFocus(true);
-      }
-    }
-  };
-  const handleBlur = e => {
-    if (accordionContext) {
-      const allHeaders = accordionContext.scope.current.queryAllNodes(headerScopeQuery);
-      const newFocusIsHeader = allHeaders.findIndex(header => header === e.relatedTarget) >= 0;
-
-      // only remove focus flag if the focus went to some element
-      // that is not an accordion header
-      if (!newFocusIsHeader) {
-        accordionContext.setChildrenHeaderHasFocus(false);
-      }
-    }
-  };
-  const expanded = Boolean(accordionItemContext.expanded || accordionContext && accordionContext.expandedIndex === index);
-  return /*#__PURE__*/jsxRuntime.jsx(Comp, {
-    ref: assignMultipleRefs(ref, forwardedRef),
-    ...otherProps,
-    id: accordionItemContext.headerId,
-    "aria-controls": accordionItemContext.bodyId,
-    role: "button",
-    "data-accordion-header": "",
-    tabIndex: "0",
-    onKeyDown: wrapEvent(onKeyDown, handleKeyDown),
-    onFocus: wrapEvent(onFocus, handleFocus),
-    onBlur: wrapEvent(onBlur, handleBlur),
-    onClick: onClick,
-    "aria-expanded": String(expanded)
-  });
-});
-
-const AccordionBody = /*#__PURE__*/react.forwardRef(function AccordionBody(props, forwardedRef) {
-  const {
-    as: Comp = 'div',
-    ...otherProps
-  } = props;
-  const accordionItemContext = useAccordionItemContext();
-  const accordionContext = useAccordionContext();
-  const ref = react.useRef(null);
-  const [index, setIndex] = react.useState();
-  if (!accordionItemContext) {
-    throw new Error('Missing parent <Accordion /> component');
-  }
-  react.useEffect(() => {
-    if (accordionContext) {
-      const allHeaders = accordionContext.scope.current.queryAllNodes(bodyScopeQuery);
-      const index = allHeaders.findIndex(e => e === ref.current);
-      setIndex(index);
-    }
-  }, [accordionContext]);
-  const expanded = Boolean(accordionItemContext.expanded || accordionContext && accordionContext.expandedIndex === index);
-  return /*#__PURE__*/jsxRuntime.jsx(Comp, {
-    ref: assignMultipleRefs(forwardedRef, ref),
-    ...otherProps,
-    "aria-labelledby": accordionItemContext.headerId,
-    id: accordionItemContext.bodyId,
-    role: "region",
-    "data-accordion-body": "",
-    hidden: expanded ? undefined : 'hidden'
-  });
-});
-
-const CheckBox = /*#__PURE__*/react.forwardRef(function CheckBox(props, forwardedRef) {
-  const {
-    as: Comp = 'input',
-    checked: checkedProp,
-    defaultChecked = false,
-    onChange: onChangeProp,
-    ...otherProps
-  } = props;
-  const [checked, onChange] = useControlledState(checkedProp, onChangeProp, defaultChecked, setValue => e => {
-    setValue(e.target.checked);
-  });
-  return /*#__PURE__*/jsxRuntime.jsx(Comp, {
-    ref: forwardedRef,
-    type: "checkbox",
-    checked: checked,
-    "aria-checked": checked,
-    onChange: onChange,
-    ...otherProps
-  });
-});
-
-const comboboxContext = /*#__PURE__*/react.createContext(null);
-const {
-  Provider: ComboBoxProvider
-} = comboboxContext;
-const useComboBoxContext = () => react.useContext(comboboxContext);
-
-function scopeQuery$1(nodeType, props) {
-  return props['data-reach-combobox-option'] === '';
-}
-
-////////////////////////////////////////////////////////////////////////////////
-// States
-
-// Nothing going on, waiting for the user to type or use the arrow keys
-const IDLE = 'IDLE';
-
-// The component is suggesting options as the user types
-const SUGGESTING = 'SUGGESTING';
-
-// The user is using the keyboard to navigate the list, not typing
-const NAVIGATING = 'NAVIGATING';
-////////////////////////////////////////////////////////////////////////////////
-// Actions:
-
-// Used to sync the state with controlled state, right after mounting
-const INIT = 'INIT';
-
-// User cleared the value w/ backspace, but input still has focus
-const CLEAR = 'CLEAR';
-
-// User cleared the value w/ backspace, but input still has focus
-const CLEAR_SELECTION = 'CLEAR_SELECTION';
-
-// User is typing
-const CHANGE = 'CHANGE';
-
-// User is navigating w/ the keyboard
-const NAVIGATE = 'NAVIGATE';
-
-// User can be navigating with keyboard and then click instead, we want the
-// value from the click, not the current nav item
-const SELECT_WITH_KEYBOARD = 'SELECT_WITH_KEYBOARD';
-const SELECT_WITH_CLICK = 'SELECT_WITH_CLICK';
-
-// Pretty self-explanatory, user can hit escape or blur to close the popover
-const ESCAPE = 'ESCAPE';
-const BLUR = 'BLUR';
-const FOCUS = 'FOCUS';
-const OPEN_WITH_BUTTON = 'OPEN_WITH_BUTTON';
-const CLOSE_WITH_BUTTON = 'CLOSE_WITH_BUTTON';
-////////////////////////////////////////////////////////////////////////////////
-const stateChart = {
-  initial: IDLE,
-  states: {
-    [IDLE]: {
-      on: {
-        [BLUR]: IDLE,
-        [CLEAR]: IDLE,
-        [INIT]: IDLE,
-        [CLEAR_SELECTION]: IDLE,
-        [CHANGE]: SUGGESTING,
-        [FOCUS]: SUGGESTING,
-        [NAVIGATE]: NAVIGATING,
-        [OPEN_WITH_BUTTON]: SUGGESTING
-      }
-    },
-    [SUGGESTING]: {
-      on: {
-        [CHANGE]: SUGGESTING,
-        [FOCUS]: SUGGESTING,
-        [INIT]: SUGGESTING,
-        [NAVIGATE]: NAVIGATING,
-        [CLEAR]: IDLE,
-        [CLEAR_SELECTION]: SUGGESTING,
-        [ESCAPE]: IDLE,
-        [BLUR]: IDLE,
-        [SELECT_WITH_CLICK]: IDLE,
-        [CLOSE_WITH_BUTTON]: IDLE
-      }
-    },
-    [NAVIGATING]: {
-      on: {
-        [CHANGE]: SUGGESTING,
-        [FOCUS]: SUGGESTING,
-        [INIT]: NAVIGATING,
-        [CLEAR]: IDLE,
-        [CLEAR_SELECTION]: NAVIGATING,
-        [BLUR]: IDLE,
-        [ESCAPE]: IDLE,
-        [NAVIGATE]: NAVIGATING,
-        [SELECT_WITH_KEYBOARD]: IDLE,
-        [SELECT_WITH_CLICK]: IDLE,
-        [CLOSE_WITH_BUTTON]: IDLE
-      }
-    }
-  }
-};
-function comboboxReducer(data, action) {
-  const nextState = {
-    ...data,
-    state: action.nextState,
-    lastActionType: action.type
-  };
-  switch (action.type) {
-    case INIT:
-    case CHANGE:
-      return {
-        ...nextState,
-        text: action.text,
-        navigationItem: '',
-        item: ''
-      };
-    case NAVIGATE:
-    case OPEN_WITH_BUTTON:
-      if (action.persistSelection) {
-        return {
-          ...nextState,
-          navigationItem: data.item
-        };
-      }
-      return {
-        ...nextState,
-        navigationItem: action.item
-      };
-    case CLEAR_SELECTION:
-      return {
-        ...nextState,
-        navigationItem: ''
-      };
-    case CLEAR:
-      return {
-        ...nextState,
-        text: '',
-        navigationItem: '',
-        item: ''
-      };
-    case BLUR:
-      return {
-        ...nextState,
-        text: action.text,
-        navigationItem: '',
-        item: action.item
-      };
-    case CLOSE_WITH_BUTTON:
-    case ESCAPE:
-      return {
-        ...nextState,
-        navigationItem: '',
-        item: ''
-      };
-    case SELECT_WITH_CLICK:
-    case SELECT_WITH_KEYBOARD:
-      return {
-        ...nextState,
-        text: action.text,
-        item: action.item,
-        navigationItem: ''
-      };
-    case FOCUS:
-      return {
-        ...nextState,
-        navigationItem: action.item
-      };
-    default:
-      throw new Error(`Unknown action ${action.type}`);
-  }
-}
-const visibleStates = [SUGGESTING, NAVIGATING];
-const isVisible = state => visibleStates.indexOf(state) >= 0;
-
-////////////////////////////////////////////////////////////////////////////////
-// The rest is all implementation details
-
-// Move focus back to the input if we start navigating w/ the
-// keyboard after focus has moved to any focusable content in
-// the popup.
-function useFocusManagement(lastActionType, inputRef) {
-  // useEffect so that the cursor goes to the end of the input instead
-  // of awkwardly at the beginning, unclear to me why ...
-  react.useEffect(() => {
-    if (lastActionType === NAVIGATE || lastActionType === ESCAPE || lastActionType === SELECT_WITH_CLICK || lastActionType === OPEN_WITH_BUTTON) {
-      inputRef.current && inputRef.current.focus();
-    }
-  });
-}
-function getNextItem(currentItem, key, optionsItems, autocomplete) {
-  const jumpToStartOrEnd = key === 'Home' || key === 'End';
-  let incr = 1;
-  switch (key) {
-    case 'PageUp':
-      incr = -10;
-      break;
-    case 'PageDown':
-      incr = 10;
-      break;
-    case 'End':
-    case 'ArrowUp':
-      incr = -1;
-      break;
-    case 'Home':
-    case 'ArrowDown':
-      incr = 1;
-      break;
-  }
-  const index = currentItem === '' ? -1 : optionsItems.findIndex(n => String(n.id) === currentItem);
-  const optionsLen = optionsItems.length;
-
-  // Nothing selected, either go to start, or end
-  if (index < 0 || jumpToStartOrEnd) {
-    if (incr > 0) {
-      // Go to start
-      return optionsItems[0];
-    } else {
-      // Go to end
-      return optionsItems[optionsLen - 1];
-    }
-  } else if (autocomplete) {
-    const nextIndex = index + incr;
-    if (nextIndex < 0 || nextIndex >= optionsLen) {
-      // Next is outside the bounds of list, return nothing selected
-      return null;
-    }
-  }
-
-  // I'm sure it won't be null, we already check optionsLen above
-  return optionsItems[getCircularIndex(index + incr, optionsLen)];
-}
-
-// We want the same events when the input or the popup have focus (HOW COOL ARE
-// HOOKS BTW?) This is probably the hairiest piece but it's not bad.
-function useKeyDown() {
-  const {
-    data: {
-      text,
-      navigationItem
-    },
-    onSelect,
-    optionsRef,
-    inputRef,
-    state,
-    transition,
-    autocompletePropRef,
-    clearOnEscapeRef,
-    persistSelectionRef,
-    listScope
-  } = useComboBoxContext();
-  return function handleKeyDown(event) {
-    const optionNodes = listScope.current.queryAllNodes(scopeQuery$1);
-    switch (event.key) {
-      case 'Home':
-      case 'End':
-      case 'PageUp':
-      case 'PageDown':
-      case 'ArrowUp':
-      case 'ArrowDown':
-        {
-          // Don't scroll the page
-          event.preventDefault();
-          const optionsLen = optionNodes.length;
-
-          // If the developer didn't render any options, there's no point in
-          // trying to navigate--but seriously what the heck? Give us some
-          // options fam.
-          if (optionsLen === 0) {
-            return;
-          }
-          if (state === IDLE) {
-            // Opening a closed list
-            transition(NAVIGATE, {
-              persistSelection: persistSelectionRef.current
-            });
-          } else {
-            // When autocompletting, we'll not cycle through the list directly
-            const autocomplete = autocompletePropRef.current;
-
-            // Get next selected item
-            const nextItem = getNextItem(navigationItem, event.key, optionNodes, autocomplete);
-            if (nextItem !== null) {
-              nextItem.scrollIntoView({
-                behavior: 'auto',
-                block: 'nearest'
-              });
-              transition(NAVIGATE, {
-                value: optionsRef.current[nextItem.id].text,
-                item: nextItem.id
-              });
-            } else {
-              transition(NAVIGATE, {
-                value: null,
-                item: ''
-              });
-            }
-          }
-          break;
-        }
-      case 'Escape':
-        {
-          if (state !== IDLE) {
-            transition(ESCAPE);
-          } else if (state === IDLE && text !== '') {
-            if (!inputRef.current || !clearOnEscapeRef.current) {
-              break;
-            }
-
-            // emulate a inputRef change event, might not work in future versions of React
-            const lastValue = inputRef.current.value;
-            inputRef.current.value = '';
-            const tracker = inputRef.current._valueTracker;
-            if (tracker) {
-              tracker.setValue(lastValue);
-            }
-            const event = new Event('change', {
-              bubbles: true
-            });
-            inputRef.current.dispatchEvent(event);
-          }
-          break;
-        }
-      case 'Enter':
-        {
-          if (state === NAVIGATING && navigationItem !== '') {
-            const {
-              value: navigationValue,
-              text: navigationText
-            } = optionsRef.current[navigationItem];
-
-            // don't want to submit forms
-            event.preventDefault();
-            onSelect && onSelect(navigationText, navigationItem, navigationValue);
-            transition(SELECT_WITH_KEYBOARD, {
-              text: navigationText,
-              item: navigationItem
-            });
-          }
-          break;
-        }
-    }
-  };
-}
-function useBlur() {
-  const {
-    data: {
-      navigationItem,
-      text: stateText
-    },
-    transition,
-    optionsRef,
-    popoverRef,
-    inputRef,
-    buttonRef,
-    onSelect,
-    selectOnBlur // not implemented yet
-  } = useComboBoxContext();
-  return function handleBlur() {
-    requestAnimationFrame(() => {
-      // we on want to close only if focus rests outside the combobox
-      if (document.activeElement !== inputRef.current && document.activeElement !== buttonRef.current && popoverRef.current) {
-        if (popoverRef.current.contains(document.activeElement)) ; else {
-          // focus landed outside the combobox, close it.
-          if (!selectOnBlur || navigationItem === '') {
-            // we don't wanna select on blur, or navigationIndex is invalid
-            transition(BLUR, {
-              text: stateText,
-              item: ''
-            });
-          } else {
-            // select the currently selected item
-            const {
-              value: navigationValue,
-              text: navigationText
-            } = optionsRef.current[navigationItem];
-            onSelect && onSelect(navigationText, navigationItem, navigationValue);
-            transition(BLUR, {
-              text: navigationText,
-              item: navigationItem
-            });
-          }
-        }
-      }
-    });
-  };
-}
-
-const Combobox = /*#__PURE__*/react.forwardRef(function Combobox({
-  // Called whenever the user selects an item from the list
-  onSelect,
-  // opens the list when the input receives focused (but only if there are
-  // items in the list)
-  openOnFocus = false,
-  // if set to true, it will select an item after blurring
-  selectOnBlur = false,
-  children,
-  as: Comp = 'div',
-  innerAs,
-  ...rest
-}, ref) {
-  // We store the values of all the ComboboxOptions on this ref. This makes it
-  // possible to perform the keyboard navigation from the input on the list. We
-  // manipulate this array through context so that we don't have to enforce a
-  // parent/child relationship between ComboboxList and ComboboxOption.
-  const optionsRef = react.useRef({});
-  const listScope = react.useRef(getScope({
-    current: null
-  }));
-
-  // Need this to focus it
-  const inputRef = react.useRef(null);
-  const popoverRef = react.useRef(null);
-  const buttonRef = react.useRef(null);
-
-  // When <ComboboxInput autocomplete={false} /> we don't want cycle back to
-  // the user's value while navigating (because it's always the user's value),
-  // but we need to know this in useKeyDown which is far away from the prop
-  // here, so we do something sneaky and write it to this ref on context so we
-  // can use it anywhere else 😛. Another new trick for me and I'm excited
-  // about this one too!
-  const autocompletePropRef = react.useRef(false);
-  const persistSelectionRef = react.useRef(false);
-  const clearOnEscapeRef = react.useRef(false);
-  const listboxIdRef = react.useRef(undefined);
-  const labelIdRef = react.useRef(undefined);
-  const defaultData = {
-    // initial state
-    state: stateChart.initial,
-    // the value the user has typed, we derived this also when the developer is
-    // controlling the value of ComboboxInput
-    text: '',
-    // the index the user has typed, we derived this also when the developer is
-    // controlling the value of ComboboxInput
-    item: '',
-    // the hash of the currently navigated item
-    navigationItem: '',
-    // the last submitted action
-    lastActionType: INIT
-  };
-  const [state, data, transition] = useReducerMachine(stateChart, comboboxReducer, defaultData);
-  listboxIdRef.current = react.useId();
-  labelIdRef.current = react.useId();
-  const context = react.useMemo(() => ({
-    data,
-    inputRef,
-    popoverRef,
-    buttonRef,
-    onSelect,
-    optionsRef,
-    listScope,
-    state,
-    transition,
-    listboxIdRef,
-    labelIdRef,
-    autocompletePropRef,
-    persistSelectionRef,
-    clearOnEscapeRef,
-    isVisible: isVisible(state),
-    openOnFocus,
-    selectOnBlur
-  }), [data, onSelect, listScope, state, transition, openOnFocus, selectOnBlur]);
-  return /*#__PURE__*/jsxRuntime.jsx(ComboBoxProvider, {
-    value: context,
-    children: /*#__PURE__*/jsxRuntime.jsx(Comp, {
-      ...rest,
-      as: innerAs,
-      "data-reach-combobox": "",
-      ref: ref,
-      role: "combobox",
-      "aria-haspopup": "listbox",
-      "aria-owns": listboxIdRef.current,
-      "aria-expanded": context.isVisible,
-      children: children
-    })
-  });
-});
-
-const ComboboxButton = /*#__PURE__*/react.forwardRef(function ComboboxButton({
-  as: Comp = 'button',
-  innerAs,
-  onClick,
-  onKeyDown,
-  ...props
-}, ref) {
-  const {
-    transition,
-    data,
-    state,
-    buttonRef,
-    listboxIdRef,
-    isVisible
-  } = useComboBoxContext();
-  const handleKeyDown = useKeyDown();
-  const handleClick = () => {
-    const payload = {
-      item: data.navigationItem
-    };
-    if (state === IDLE) {
-      transition(OPEN_WITH_BUTTON, payload);
-    } else {
-      transition(CLOSE_WITH_BUTTON, payload);
-    }
-  };
-  return /*#__PURE__*/jsxRuntime.jsx(Comp, {
-    as: innerAs,
-    "data-reach-combobox-button": "",
-    "aria-controls": listboxIdRef.current,
-    "aria-haspopup": "listbox",
-    "aria-expanded": isVisible,
-    ref: assignMultipleRefs(ref, buttonRef),
-    onClick: wrapEvent(onClick, handleClick),
-    onKeyDown: wrapEvent(onKeyDown, handleKeyDown),
-    ...props
-  });
-});
-
-const ComboboxInput = /*#__PURE__*/react.forwardRef(function ComboboxInput({
-  as: Comp = 'input',
-  innerAs,
-  selectOnClick = false,
-  autocomplete = true,
-  clearOnEscape = false,
-  // wrapped events
-  onClick,
-  onChange,
-  onKeyDown,
-  onBlur,
-  onFocus,
-  id: preferredId,
-  defaultValue = '',
-  // might be controlled
-  value: controlledValue,
-  ...props
-}, forwardedRef) {
-  const {
-    data: {
-      navigationItem,
-      text,
-      lastActionType
-    },
-    inputRef,
-    state,
-    transition,
-    listboxIdRef,
-    autocompletePropRef,
-    clearOnEscapeRef,
-    openOnFocus,
-    optionsRef,
-    labelIdRef
-  } = useComboBoxContext();
-
-  // Keep focus on the input component
-  useFocusManagement(lastActionType, inputRef);
-
-  // Keep using the defaultValue until the user started interacting
-  const hasStartedInteracting = react.useRef(false);
-
-  // Because we close the List on blur, we need to track if the blur is
-  // caused by clicking inside the list, and if so, don't close the List.
-  const selectOnClickRef = react.useRef(false);
-  const handleBlur = useBlur();
-
-  // Update ref props
-  autocompletePropRef.current = autocomplete;
-  clearOnEscapeRef.current = clearOnEscape;
-  listboxIdRef.current = preferredId || listboxIdRef.current;
-
-  // [*]... and when controlled, we don't trigger handleValueChange as the user
-  // types, instead the developer controls it with the normal input onChange
-  // prop
-  const handleChange = e => {
-    // After the user started typing, lets forget the defaultValue
-    hasStartedInteracting.current = true;
-    const text = e.target.value;
-    if (text.trim() === '') {
-      transition(CLEAR);
-    } else {
-      transition(CHANGE, {
-        text
-      });
-    }
-  };
-  const handleKeyDown = useKeyDown();
-  const handleFocus = () => {
-    if (selectOnClick) {
-      selectOnClickRef.current = true;
-    }
-    // If we select an option with click, useFocusManagement will focus the
-    // input, in those cases we don't want to cause the menu to open back up,
-    // so we guard behind these states
-    if (openOnFocus && lastActionType !== SELECT_WITH_CLICK) {
-      transition(FOCUS, {
-        item: navigationItem
-      });
-    }
-  };
-  const handleClick = () => {
-    if (selectOnClickRef.current) {
-      selectOnClickRef.current = false;
-      inputRef.current && inputRef.current.select();
-    }
-  };
-  const navigationText = navigationItem !== '' ? optionsRef.current[navigationItem].text : undefined;
-  const fallbackValue = hasStartedInteracting.current ? '' : defaultValue;
-  const inputStrings =
-  // When idle, we don't have a navigationText on ArrowUp/Down
-  autocomplete && state === NAVIGATING ? [navigationText, controlledValue, text, fallbackValue] : [controlledValue, text, fallbackValue];
-  const inputValue = inputStrings.find(str => str !== undefined);
-
-  // If they are controlling the value we still need to do our transitions, so
-  // we have this derived state to emulate onChange of the input as we receive
-  // new `value`s ...[*]
-  react.useEffect(() => {
-    transition(INIT, {
-      text: inputValue,
-      item: ''
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  return /*#__PURE__*/jsxRuntime.jsx(Comp, {
-    ...props,
-    as: innerAs,
-    "data-reach-combobox-input": "",
-    ref: assignMultipleRefs(inputRef, forwardedRef),
-    value: inputValue,
-    onClick: wrapEvent(onClick, handleClick),
-    onBlur: wrapEvent(onBlur, handleBlur),
-    onFocus: wrapEvent(onFocus, handleFocus),
-    onChange: wrapEvent(onChange, handleChange),
-    onKeyDown: wrapEvent(onKeyDown, handleKeyDown),
-    "aria-labelledby": labelIdRef.current,
-    id: listboxIdRef.current,
-    "aria-autocomplete": "both",
-    "aria-activedescendant": navigationItem !== '' ? navigationItem : undefined,
-    autoComplete: "off"
-  });
-});
-
-const ComboboxLabel = /*#__PURE__*/react.forwardRef(function ComboboxButton({
-  as: Comp = 'label',
-  innerAs,
-  id: preferredId,
-  ...props
-}, ref) {
-  const {
-    listboxIdRef,
-    labelIdRef
-  } = useComboBoxContext();
-  labelIdRef.current = preferredId || labelIdRef.current;
-  return /*#__PURE__*/jsxRuntime.jsx(Comp, {
-    as: innerAs,
-    "data-reach-combobox-label": "",
-    htmlFor: listboxIdRef.current,
-    id: labelIdRef.current,
-    ref: ref,
-    ...props
-  });
-});
-
-const ComboboxList = /*#__PURE__*/react.forwardRef(function ComboboxList({
-  // when true, and the list opens again, the option with a matching value will be
-  // automatically highleted.
-  persistSelection = false,
-  as: Comp = 'ul',
-  innerAs,
-  ...props
-}, ref) {
-  const {
-    persistSelectionRef,
-    labelIdRef,
-    listScope
-  } = useComboBoxContext();
-  const listRef = react.useRef(null);
-  react.useEffect(() => {
-    listScope.current = getScope(listRef);
-  }, [listScope]);
-  persistSelectionRef.current = persistSelection;
-  return /*#__PURE__*/jsxRuntime.jsx(Comp, {
-    ...props,
-    as: innerAs,
-    ref: assignMultipleRefs(ref, listRef),
-    "data-reach-combobox-list": "",
-    role: "listbox",
-    "aria-labelledby": labelIdRef.current
-  });
-});
-
-// We don't want to track the active descendant with indexes because nothing is
-// more annoying in a combobox than having it change values RIGHT AS YOU HIT
-// ENTER. That only happens if you use the index as your data, rather than
-// *your data as your data*. We use this to generate a unique ID based on the
-// value of each item.  This function is short, sweet, and good enough™ (I also
-// don't know how it works, tbqh)
-// https://stackoverflow.com/questions/6122571/simple-non-secure-hash-function-for-javascript
-function makeHash(str) {
-  let hash = 0;
-  if (str.length === 0) {
-    return hash;
-  }
-  for (let i = 0; i < str.length; i++) {
-    const char = str.charCodeAt(i);
-    hash = (hash << 5) - hash + char;
-    hash = hash & hash;
-  }
-  return hash;
-}
-
-const ComboboxOption = /*#__PURE__*/react.forwardRef(function ComboboxOption({
-  children,
-  id: idProp,
-  value: valueProp,
-  text: textProp,
-  onClick,
-  as: Comp = 'li',
-  innerAs,
-  ...props
-}, ref) {
-  const {
-    onSelect,
-    data: {
-      navigationItem
-    },
-    transition,
-    optionsRef
-  } = useComboBoxContext();
-  const transitionCleanupRef = react.useRef(transition);
-  const isActiveRef = react.useRef(false);
-  const value = valueProp;
-  let text = textProp ? textProp : '';
-  if (text.length === 0) {
-    if (typeof valueProp === 'string' && valueProp.length > 0) {
-      text = valueProp;
-    } else {
-      throw new Error('Missing text for <ComboboxOption />');
-    }
-  }
-  const id = String(makeHash(idProp));
-  react.useEffect(() => {
-    const opts = optionsRef.current;
-    opts[id] = {
-      value,
-      text
-    };
-    return () => {
-      delete opts[id];
-    };
-  }, [optionsRef, id, text, value]);
-
-  // Keep updating this ref with the current
-  // function pointer for transition, so it can
-  // be used by the unmount effect below.
-  transitionCleanupRef.current = transition;
-  isActiveRef.current = navigationItem === id;
-  react.useEffect(() => {
-    return () => {
-      if (isActiveRef.current === true) {
-        // clean up selections if this option is getting
-        // unmounted and it was the currently selected item
-        transitionCleanupRef.current(CLEAR_SELECTION);
-      }
-    };
-  }, []);
-  const handleClick = () => {
-    onSelect && onSelect(text, id, value);
-    transition(SELECT_WITH_CLICK, {
-      text,
-      item: id
-    });
-  };
-  return /*#__PURE__*/jsxRuntime.jsx(Comp, {
-    ...props,
-    as: innerAs,
-    "data-reach-combobox-option": "",
-    ref: ref,
-    id: id,
-    role: "option",
-    "aria-selected": isActiveRef.current,
-    "data-highlighted": isActiveRef.current ? '' : undefined
-    // without this the menu will close from `onBlur`, but with it the
-    // element can be `document.activeElement` and then our focus checks in
-    // onBlur will work as intended
-    ,
-    tabIndex: "-1",
-    onClick: wrapEvent(onClick, handleClick),
-    children: children || text
-  });
-});
-
-const ComboboxPopover = /*#__PURE__*/react.forwardRef(function ComboboxPopover({
-  // wrapped events
-  onKeyDown,
-  onBlur,
-  as: Comp = 'div',
-  innerAs,
-  ...props
-}, forwardedRef) {
-  const {
-    popoverRef,
-    isVisible
-  } = useComboBoxContext();
-  const handleKeyDown = useKeyDown();
-  const handleBlur = useBlur();
-
-  // Instead of conditionally rendering the popover we use the `hidden` prop
-  // because we don't want to unmount on close (from escape or onSelect).  If
-  // we unmounted, then we'd lose the optionsRef and the user wouldn't be able
-  // to use the arrow keys to pop the list back open. However, the developer
-  // can conditionally render the ComboboxPopover if they do want to cause
-  // mount/unmount based on the app's own data (like results.length or
-  // whatever).
-  const hidden = !isVisible;
-  return /*#__PURE__*/jsxRuntime.jsx(Comp, {
-    ...props,
-    as: innerAs,
-    "data-reach-combobox-popover": "",
-    ref: assignMultipleRefs(popoverRef, forwardedRef),
-    onKeyDown: wrapEvent(onKeyDown, handleKeyDown),
-    onBlur: wrapEvent(onBlur, handleBlur),
-    hidden: hidden
-    // Allow the user to click empty space inside the popover without causing
-    // to close from useBlur
-    ,
-    tabIndex: "-1"
-  });
-});
-
-const focusLockStack = [];
-function useFocusLock(ref, opts) {
-  const {
-    enabled = true,
-    lockStartRef,
-    lockEndRef
-  } = opts;
-  react.useEffect(() => {
-    const rootEl = ref.current;
-    if (enabled && rootEl) {
-      focusLockStack.push(rootEl);
-      const listener = event => {
-        const isActiveFocusLock = focusLockStack[focusLockStack.length - 1] === rootEl;
-        if (!isActiveFocusLock) {
-          // Not the currently focused lock. Forget about it.
-          return;
-        }
-        if (event.target === lockEndRef.current) {
-          focusOnChildNode(rootEl, 0);
-        } else if (event.target === lockStartRef.current) {
-          focusOnChildNode(rootEl, -1);
-        } else if (document !== event.target && rootEl !== event.target && !rootEl.contains(event.target)) {
-          event.preventDefault();
-          focusOnChildNode(rootEl, 0);
-        }
-      };
-      document.addEventListener('focusin', listener);
-      return () => {
-        document.removeEventListener('focusin', listener);
-        focusLockStack.pop();
-      };
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [enabled]);
-}
-
-const FocusLock = function FocusLock(props) {
-  const {
-    as: Comp = 'div',
-    childRef,
-    enabled = false,
-    style = {},
-    children,
-    ...otherProps
-  } = props;
-  const lockStartRef = react.useRef(null);
-  const lockEndRef = react.useRef(null);
-  useFocusLock(childRef, {
-    enabled,
-    lockStartRef,
-    lockEndRef
-  });
-  const lockStyle = {
-    width: 1,
-    height: 0,
-    padding: 0,
-    overflow: 'hidden',
-    position: 'fixed',
-    top: 1,
-    left: 1,
-    ...style
-  };
-  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/jsxRuntime.jsx(Comp, {
-      ref: lockStartRef,
-      "data-focus-lock-start": "",
-      "aria-hidden": true,
-      tabIndex: 0,
-      style: lockStyle,
-      ...otherProps
-    }), children, /*#__PURE__*/jsxRuntime.jsx(Comp, {
-      ref: lockEndRef,
-      "data-focus-lock-end": "",
-      "aria-hidden": true,
-      tabIndex: 0,
-      style: lockStyle,
-      ...otherProps
-    })]
-  });
-};
-
-// MenuRoot
-
-const menuContext = /*#__PURE__*/react.createContext(null);
-const {
-  Provider: MenuProvider
-} = menuContext;
-const useMenuContext = () => react.useContext(menuContext);
-
-// MenuList
-
-const menuListContext = /*#__PURE__*/react.createContext(null);
-const MenuListProvider = menuListContext.Provider;
-const useMenuListContext = () => react.useContext(menuListContext);
-
-const Menu = /*#__PURE__*/react.forwardRef(function Menu(props, forwardedRef) {
-  const {
-    as: Comp = react.Fragment,
-    innerAs,
-    open: openProp,
-    defaultOpen = false,
-    onChange: onChangeProp,
-    ...otherProps
-  } = props;
-  const menuListIdRef = react.useRef(undefined);
-  const openWithArrowKeyRef = react.useRef(null);
-  const buttonRef = react.useRef(null);
-  const [open, onChange] = useControlledState(openProp, onChangeProp, defaultOpen, setState => (e, isOpen) => {
-    setState(isOpen);
-  });
-  const [offsetFn, setOffsetFn] = react.useState(undefined);
-  menuListIdRef.current = react.useId();
-  const isContextMenu = react.useRef(false);
-  if (!open && offsetFn) {
-    setOffsetFn(undefined);
-  }
-  const value = {
-    menuListIdRef,
-    openWithArrowKeyRef,
-    open,
-    onChange,
-    buttonRef,
-    offsetFn,
-    setOffsetFn,
-    isContextMenu
-  };
-  return /*#__PURE__*/jsxRuntime.jsx(MenuProvider, {
-    value: value,
-    children: /*#__PURE__*/jsxRuntime.jsx(Comp, {
-      ...(Comp !== react.Fragment ? {
-        as: innerAs,
-        ref: forwardedRef
-      } : {}),
-      ...otherProps
-    })
-  });
-});
-
-const MenuButton = /*#__PURE__*/react.forwardRef(function MenuButton(props, forwardedRef) {
-  const {
-    as: Comp = 'button',
-    innerAs,
-    id: preferredId,
-    onClick,
-    onKeyDown,
-    disabled,
-    ...otherProps
-  } = props;
-  const {
-    menuListIdRef,
-    openWithArrowKeyRef,
-    open,
-    buttonRef,
-    onChange
-  } = useMenuContext();
-  const buttonIdGenerated = react.useId();
-  const buttonId = preferredId || buttonIdGenerated;
-  const handleKeyDown = e => {
-    if (disabled) {
-      return;
-    }
-    buttonRef.current = e.currentTarget;
-    const isArrowKey = () => ['ArrowUp', 'ArrowDown'].includes(e.key);
-    const isEnterKey = () => [' ', 'Enter'].includes(e.key);
-    const openedWithArrow = isArrowKey();
-    if (openedWithArrow || isEnterKey()) {
-      if (openedWithArrow) {
-        // Used to make it open at the end or begining of the list
-        openWithArrowKeyRef.current = e.key;
-      }
-      onChange(e, true);
-      e.preventDefault();
-    }
-  };
-  const handleClick = e => {
-    if (disabled) {
-      return;
-    }
-    buttonRef.current = e.currentTarget;
-    onChange(e, !open);
-  };
-  return /*#__PURE__*/jsxRuntime.jsx(Comp, {
-    ref: forwardedRef,
-    as: innerAs,
-    id: buttonId,
-    role: "button",
-    type: "button",
-    "aria-haspopup": true,
-    "aria-controls": menuListIdRef.current,
-    "aria-expanded": open ? true : undefined,
-    "data-menu-button": "",
-    onClick: wrapEvent(onClick, handleClick),
-    onKeyDown: wrapEvent(onKeyDown, handleKeyDown),
-    disabled: disabled,
-    ...otherProps
-  });
-});
-
-const ContextMenuTrigger = /*#__PURE__*/react.forwardRef(function ContextMenuTrigger(props, forwardedRef) {
-  const {
-    as: Comp = 'div',
-    innerAs,
-    id: preferredId,
-    onContextMenu,
-    disabled,
-    ...otherProps
-  } = props;
-  const {
-    menuListIdRef,
-    open,
-    buttonRef,
-    onChange,
-    setOffsetFn,
-    isContextMenu
-  } = useMenuContext();
-  const idGenerated = react.useId();
-  const id = preferredId || idGenerated;
-  const handleContextMenu = e => {
-    if (disabled) {
-      return;
-    }
-    const rect = e.currentTarget.getBoundingClientRect();
-    isContextMenu.current = true;
-    buttonRef.current = e.currentTarget;
-    onChange(e, true);
-    const mouseX = e.nativeEvent.x;
-    const mouseY = e.nativeEvent.y;
-    setOffsetFn(() => ({
-      reference
-    }) => [mouseX - rect.x, mouseY - rect.y - reference.height]);
-    e.preventDefault();
-  };
-  return /*#__PURE__*/jsxRuntime.jsx(Comp, {
-    ref: forwardedRef,
-    as: innerAs,
-    id: id,
-    "aria-haspopup": true,
-    "aria-controls": menuListIdRef.current,
-    "aria-expanded": open ? true : undefined,
-    "data-menu-trigger": "",
-    onContextMenu: wrapEvent(onContextMenu, handleContextMenu),
-    disabled: disabled,
-    ...otherProps
-  });
-});
-
-const MenuItem = /*#__PURE__*/react.forwardRef(function MenuItem(props, forwardedRef) {
-  const {
-    as: Comp = 'li',
-    innerAs,
-    disabled,
-    onSelect,
-    onClick,
-    onKeyDown,
-    ...otherProps
-  } = props;
-  const {
-    onChange,
-    buttonRef
-  } = useMenuContext();
-  const {
-    navigationItem,
-    onNavigate
-  } = useMenuListContext();
-  const ref = react.useRef(null);
-  const itemId = react.useId();
-  const isActive = ref.current && ref.current === navigationItem;
-  const handleSelect = wrapEvent(onSelect, e => {
-    onChange(e, false);
-    buttonRef.current?.focus();
-    e.preventDefault();
-  });
-  const handleClick = e => {
-    if (!disabled) {
-      onNavigate && onNavigate(ref.current);
-      handleSelect(e);
-    }
-  };
-  const handleKeyDown = e => {
-    switch (e.key) {
-      case ' ':
-      case 'Enter':
-        if (!disabled) {
-          handleSelect(e);
-        }
-        break;
-    }
-  };
-  return /*#__PURE__*/jsxRuntime.jsx(Comp, {
-    ref: assignMultipleRefs(ref, forwardedRef),
-    as: innerAs,
-    id: disabled ? undefined : itemId,
-    "data-menu-item": "",
-    "data-highlighted": isActive ? '' : undefined,
-    role: "menuitem",
-    onClick: wrapEvent(onClick, handleClick),
-    tabIndex: disabled ? -1 : 0,
-    onKeyDown: wrapEvent(onKeyDown, handleKeyDown),
-    "data-disabled": disabled ? '' : undefined,
-    "aria-disabled": disabled ? '' : undefined,
-    disabled: disabled,
-    ...otherProps
-  });
-});
-
-function queryScope(type, props) {
-  return props['data-menu-item'] === '' && props['data-disabled'] !== '' && props['data-disabled'] !== true;
-}
-
-const useEnhancedEffect$1 = typeof window !== 'undefined' ? react.useLayoutEffect : react.useEffect;
-const MenuList = /*#__PURE__*/react.forwardRef(function MenuList(props, forwardedRef) {
-  const {
-    as: Comp = 'ul',
-    innerAs,
-    onKeyDown,
-    id: preferredId,
-    defaultActiveItemValue,
-    ...otherProps
-  } = props;
-  const interactedOutside = react.useRef(false);
-  const itemSearchStr = react.useRef('');
-  const itemSearchClearTimeout = react.useRef(undefined);
-  const {
-    menuListIdRef,
-    buttonRef,
-    onChange,
-    openWithArrowKeyRef,
-    open,
-    isContextMenu
-  } = useMenuContext();
-  const [navigationItem, setNavigationItem] = react.useState();
-  const [mounted, setMounted] = react.useState(false);
-  const menuListRef = react.useRef(null);
-  const scope = useScope(menuListRef);
-  const onNavigate = el => {
-    el.focus({
-      preventScroll: true
-    });
-    setNavigationItem(el);
-  };
-  menuListIdRef.current = preferredId || menuListIdRef.current;
-  useEnhancedEffect$1(() => {
-    if (!mounted) {
-      const allItems = scope.current.queryAllNodes(queryScope);
-      let index = getCircularIndex(openWithArrowKeyRef.current === 'ArrowUp' ? -1 : 0, allItems.length);
-      if (defaultActiveItemValue) {
-        if (typeof defaultActiveItemValue === 'string') {
-          for (let i = 0; i < allItems.length; i++) {
-            if (allItems[i].dataset.value === defaultActiveItemValue) {
-              index = i;
-              break;
-            }
-          }
-        } else if (Array.isArray(defaultActiveItemValue)) {
-          const set = new Set(defaultActiveItemValue);
-          for (let i = 0; i < allItems.length; i++) {
-            const val = allItems[i].dataset.value;
-            if (val && set.has(val)) {
-              index = i;
-              break;
-            }
-          }
-        }
-      }
-      if (index !== null) {
-        onNavigate && onNavigate(allItems[index]);
-      }
-    }
-    openWithArrowKeyRef.current = null;
-    setMounted(true);
-  }, [mounted, navigationItem, onNavigate, openWithArrowKeyRef, scope, defaultActiveItemValue]);
-  const handleClickOutside = react.useCallback(e => {
-    if (isContextMenu.current) {
-      if (!interactedOutside.current && e.pointerType === 'touch') {
-        // First interaction should be ignored, because
-        // this is what triggered the context menu to open
-        interactedOutside.current = true;
-        return;
-      }
-      if (e.button === 0) {
-        onChange(e, false);
-      }
-    } else {
-      if (e.target instanceof HTMLElement && e.target !== buttonRef.current && !buttonRef.current?.contains(e.target)) {
-        onChange(e, false);
-      }
-    }
-    e.preventDefault();
-  }, [buttonRef, isContextMenu, onChange]);
-  useOnClickOutside(menuListRef, handleClickOutside, open);
-  function handleKeyDown(e) {
-    switch (e.key) {
-      case 'Escape':
-      case 'Tab':
-        {
-          onChange(e, false);
-          e.preventDefault(); // prevents focusing on next element, because we will be handling it
-          itemSearchStr.current = '';
-          buttonRef.current?.focus();
-          break;
-        }
-      case 'Home':
-      case 'End':
-      case 'ArrowDown':
-      case 'ArrowUp':
-        e.preventDefault();
-        itemSearchStr.current = '';
-        const allItems = scope ? scope.current.queryAllNodes(queryScope) : [];
-        const currentIndex = allItems.findIndex(e => e === navigationItem);
-        if (allItems.length === 0) {
-          return;
-        }
-        let nextIndex = currentIndex;
-        switch (e.key) {
-          case 'ArrowUp':
-            nextIndex += -1;
-            break;
-          case 'ArrowDown':
-            nextIndex += 1;
-            break;
-          case 'Home':
-            nextIndex = 0;
-            break;
-          case 'End':
-            nextIndex = -1;
-            break;
-        }
-        // We already checked if allItems.length = 0 above
-        nextIndex = getCircularIndex(nextIndex, allItems.length);
-        onNavigate && onNavigate(allItems[nextIndex]);
-        break;
-      default:
-        {
-          if (e.key.length === 1 && !e.ctrlKey && !e.altKey) {
-            // A-Z
-            e.preventDefault();
-            if (itemSearchStr.current.length === 0 || itemSearchStr.current.slice(-1) !== e.key) {
-              itemSearchStr.current = itemSearchStr.current + e.key;
-            }
-            clearTimeout(itemSearchClearTimeout.current);
-            itemSearchClearTimeout.current = setTimeout(() => {
-              itemSearchStr.current = '';
-            }, 500);
-            const allItems = scope ? scope.current.queryAllNodes(queryScope) : [];
-            const currentIndex = allItems.findIndex(e => e === navigationItem);
-            const searchStr = itemSearchStr.current;
-            let nextIndex = -1;
-            for (let i = searchStr.length === 1 ? 1 : 0; i < allItems.length; i++) {
-              const idx = getCircularIndex(currentIndex + i, allItems.length);
-              const dom = allItems[idx];
-              const domText = dom.innerText.toLowerCase();
-              if (domText.length > 0 && domText.startsWith(searchStr)) {
-                nextIndex = idx;
-                break;
-              }
-            }
-            if (nextIndex >= 0 && nextIndex < allItems.length) {
-              onNavigate && onNavigate(allItems[nextIndex]);
-            }
-          }
-        }
-    }
-  }
-  if (!open) {
-    interactedOutside.current = false;
-    return null;
-  }
-  return /*#__PURE__*/jsxRuntime.jsx(MenuListProvider, {
-    value: {
-      navigationItem,
-      onNavigate
-    },
-    children: /*#__PURE__*/jsxRuntime.jsx(Comp, {
-      ref: assignMultipleRefs(forwardedRef, menuListRef),
-      as: innerAs,
-      id: menuListIdRef.current,
-      role: "menu",
-      "aria-labelledby": buttonRef.current?.id,
-      "data-menu-list": "",
-      tabIndex: "-1",
-      onKeyDown: wrapEvent(onKeyDown, handleKeyDown),
-      ...otherProps
-    })
-  });
-});
-
-const context = /*#__PURE__*/react.createContext(null);
-const PopperProvider = context.Provider;
-const usePopperContext = () => react.useContext(context);
-
-const PortalSelectorContext = /*#__PURE__*/react.createContext(null);
-PortalSelectorContext.displayName = 'PortalSelectorContext';
-const PortalSelectorProvider = ({
-  selector,
-  children
-}) => {
-  return /*#__PURE__*/jsxRuntime.jsx(PortalSelectorContext.Provider, {
-    value: selector,
-    children: children
-  });
-};
-
-const Portal = ({
-  children,
-  selector: selectorProp
-}) => {
-  const selectorCtx = react.useContext(PortalSelectorContext);
-  if (typeof window === 'undefined') {
-    return null;
-  }
-  const selector = selectorProp || selectorCtx || 'body';
-  const dom = typeof selector === 'string' ? document.querySelector(selector) : selector();
-  if (dom) {
-    return /*#__PURE__*/reactDom.createPortal(/*#__PURE__*/jsxRuntime.jsx("div", {
-      "data-portal": "",
-      children: children
-    }), dom);
-  }
-  return null;
-};
-
-const useEnhancedEffect = typeof window !== 'undefined' ? react.useLayoutEffect : react.useEffect;
-const emptyModifiers = [];
-const Popper = /*#__PURE__*/react.memo(/*#__PURE__*/react.forwardRef(function Popper({
-  placement = 'bottom',
-  strategy = 'absolute',
-  as: Comp = 'div',
-  innerAs,
-  anchorEl,
-  children,
-  modifiers = emptyModifiers,
-  usePortal = false,
-  style = {},
-  portalSelector,
-  distance = 0,
-  skidding = 0,
-  arrowPadding = 5,
-  offsetFn,
-  ...props
-}, forwardedRef) {
-  const arrowRef = react.useRef(null);
-  const popperRef = react.useRef(null);
-  const popperEngineInstance = react.useRef(null);
-  const defaultModifiers = react.useMemo(() => {
-    const arrowModifier = {
-      name: 'arrow',
-      options: {
-        element: '[data-popper-arrow]',
-        padding: arrowPadding
-      }
-    };
-    const offsetModifier = {
-      name: 'offset',
-      options: {
-        offset: offsetFn ?? [skidding, distance]
-      }
-    };
-    return [arrowModifier, offsetModifier];
-  }, [arrowPadding, distance, skidding, offsetFn]);
-  useEnhancedEffect(() => {
-    if (anchorEl && anchorEl.current && popperRef.current) {
-      popperEngineInstance.current = core.createPopper(anchorEl.current, popperRef.current, {
-        placement,
-        strategy,
-        modifiers: [...defaultModifiers, ...modifiers]
-      });
-    }
-    return () => {
-      popperEngineInstance.current && popperEngineInstance.current.destroy();
-      popperEngineInstance.current = null;
-    };
-  }, [anchorEl, modifiers, placement, strategy, defaultModifiers]);
-  useEnhancedEffect(() => {
-    popperEngineInstance.current?.forceUpdate();
-  }, [props.hidden || props['aria-hidden']]);
-  const contextValue = {
-    arrowRef
-  };
-  const ret = /*#__PURE__*/jsxRuntime.jsx(PopperProvider, {
-    value: contextValue,
-    children: /*#__PURE__*/jsxRuntime.jsx(Comp, {
-      ...props,
-      as: innerAs,
-      ref: assignMultipleRefs(popperRef, forwardedRef),
-      style: {
-        position: 'fixed',
-        left: -5000,
-        top: -5000,
-        ...style
-      },
-      children: children
-    })
-  });
-  if (usePortal) {
-    return /*#__PURE__*/jsxRuntime.jsx(Portal, {
-      selector: portalSelector,
-      children: ret
-    });
-  }
-  return ret;
-}));
-
-const PopperArrow = /*#__PURE__*/react.forwardRef(function PopperArrow({
-  as: Comp = 'div',
-  ...props
-}, ref) {
-  const ctx = usePopperContext();
-  if (ctx === null) {
-    return null;
-  }
-  return /*#__PURE__*/jsxRuntime.jsx(Comp, {
-    ...props,
-    ref: node => {
-      if (node && ctx.arrowRef.current && ctx.arrowRef.current !== node) {
-        throw new Error('You can only render one <PopperArrow /> per <Popper> component');
-      }
-      assignMultipleRefs(ref, ctx.arrowRef)(node);
-    },
-    "data-popper-arrow": ""
-  });
-});
-
-const MenuPopover = /*#__PURE__*/react.forwardRef(function MenuPopover(props, forwardedRef) {
-  const {
-    as = 'div',
-    innerAs,
-    ...otherProps
-  } = props;
-  const {
-    buttonRef,
-    open,
-    offsetFn,
-    isContextMenu
-  } = useMenuContext();
-  if (!open) {
-    return null;
-  }
-  return /*#__PURE__*/jsxRuntime.jsx(Popper, {
-    as: as,
-    innerAs: innerAs,
-    ref: forwardedRef,
-    anchorEl: buttonRef,
-    offsetFn: offsetFn,
-    placement: isContextMenu.current ? 'bottom-start' : undefined,
-    ...otherProps
-  });
-});
-
-const Modal = /*#__PURE__*/react.forwardRef(({
-  as: Comp = 'div',
-  children,
-  trapFocus = true,
-  style = {},
-  ...otherProps
-}, ref) => {
-  const modalRef = react.useRef(null);
-  useFocusReturn(trapFocus, modalRef);
-  useRemoveBodyScroll(trapFocus, modalRef);
-  useAutoFocus(trapFocus, modalRef);
-  return /*#__PURE__*/jsxRuntime.jsx(FocusLock, {
-    childRef: modalRef,
-    enabled: trapFocus,
-    children: /*#__PURE__*/jsxRuntime.jsx(Comp, {
-      ref: assignMultipleRefs(ref, modalRef),
-      "data-modal-container": "",
-      role: "dialog",
-      "aria-modal": "true",
-      style: style,
-      tabIndex: -1,
-      ...otherProps,
-      children: children
-    })
-  });
-});
-
-const ModalBackdrop = /*#__PURE__*/react.forwardRef(({
-  as: Comp = 'div',
-  onClose,
-  onClick,
-  onMouseDown,
-  onKeyDown,
-  disableCloseOnClick = false,
-  disableEscapeKeyDown = false,
-  ...otherProps
-}, forwardedRef) => {
-  const ref = react.useRef(null);
-  const mouseDownTargetRef = react.useRef(null);
-  const handleClick = e => {
-    // Ignore the events not coming from the "backdrop"
-    // We don't want to close the dialog when clicking the dialog content.
-    if (e.target !== e.currentTarget) {
-      return;
-    }
-
-    // Make sure the event starts and ends on the same DOM element.
-    if (e.target !== mouseDownTargetRef.current) {
-      return;
-    }
-    mouseDownTargetRef.current = null;
-    !disableCloseOnClick && onClose?.();
-    e.stopPropagation();
-  };
-  const handleMouseDown = e => {
-    mouseDownTargetRef.current = e.target;
-  };
-  const handleKeyDown = e => {
-    if (e.key === 'Escape') {
-      !disableEscapeKeyDown && onClose?.();
-      e.stopPropagation();
-    }
-  };
-  return /*#__PURE__*/jsxRuntime.jsx(Comp, {
-    ref: assignMultipleRefs(ref, forwardedRef),
-    "data-modal-root": "",
-    onClick: wrapEvent(onClick, handleClick),
-    onMouseDown: wrapEvent(onMouseDown, handleMouseDown),
-    onKeyDown: wrapEvent(onKeyDown, handleKeyDown),
-    ...otherProps
-  });
-});
-
-// RadioGroup Component
-
-const RadioGroupContext = /*#__PURE__*/react.createContext(undefined);
-const {
-  Provider: RadioGroupProvider
-} = RadioGroupContext;
-const useRadioGroupContext = () => react.useContext(RadioGroupContext);
-
-const RadioButton = /*#__PURE__*/react.forwardRef(function RadioButton(props, forwardedRef) {
-  const {
-    as: Comp = 'input',
-    value: valueProp,
-    onChange: onChangeProp,
-    checked: checkedProp,
-    name: nameProp,
-    ...otherProps
-  } = props;
-  const radioGroupContext = useRadioGroupContext();
-  const handleChange = e => {
-    radioGroupContext?.onChange?.(e, valueProp);
-  };
-  const checked = radioGroupContext ? radioGroupContext.value === valueProp : checkedProp;
-  return /*#__PURE__*/jsxRuntime.jsx(Comp, {
-    ref: forwardedRef,
-    type: "radio",
-    checked: checked,
-    "aria-checked": String(checked),
-    name: radioGroupContext ? radioGroupContext.name : nameProp,
-    onChange: wrapEvent(onChangeProp, handleChange),
-    value: valueProp,
-    ...otherProps
-  });
-});
-
-const RadioGroup = /*#__PURE__*/react.forwardRef(function RadioGroup(props, forwardedRef) {
-  const {
-    as: Comp = 'div',
-    onChange: onChangeProp,
-    value: valueProp,
-    name: nameProp,
-    defaultValue,
-    ...otherProps
-  } = props;
-  const [value, onChange] = useControlledState(valueProp, onChangeProp, defaultValue, setValue => (e, value) => {
-    setValue(value);
-  });
-  const fallbackId = react.useId();
-  return /*#__PURE__*/jsxRuntime.jsx(RadioGroupProvider, {
-    value: {
-      value,
-      onChange,
-      name: nameProp || fallbackId
-    },
-    children: /*#__PURE__*/jsxRuntime.jsx(Comp, {
-      ref: forwardedRef,
-      role: "radiogroup",
-      ...otherProps
-    })
-  });
-});
-
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-const noop = () => {
-  /* noop */
-};
-const [SliderProvider, useSliderContext] = createContext('Slider');
-
-////////////////////////////////////////////////////////////////////////////////
-
-/**
- * Slider
- *
- * @see Docs https://reach.tech/slider#slider
- */
-const Slider = /*#__PURE__*/react.forwardRef(function Slider({
-  children,
-  ...props
-}, forwardedRef) {
-  return /*#__PURE__*/jsxRuntime.jsx(SliderInput, {
-    ...props,
-    ref: forwardedRef,
-    "data-reach-slider": "",
-    children: /*#__PURE__*/jsxRuntime.jsxs(SliderTrack, {
-      children: [/*#__PURE__*/jsxRuntime.jsx(SliderRange, {}), /*#__PURE__*/jsxRuntime.jsx(SliderHandle, {}), children]
-    })
-  });
-});
-
-/**
- * @see Docs https://reach.tech/slider#slider-props
- */
-
-////////////////////////////////////////////////////////////////////////////////
-
-/**
- * SliderInput
- *
- * The parent component of the slider interface. This is a lower level component
- * if you need more control over styles or rendering the slider's inner
- * components.
- *
- * @see Docs https://reach.tech/slider#sliderinput
- */
-const SliderInput = /*#__PURE__*/react.forwardRef(function SliderInput({
-  'aria-label': ariaLabel,
-  'aria-labelledby': ariaLabelledBy,
-  'aria-valuetext': ariaValueTextProp,
-  as: Comp = 'div',
-  innerAs,
-  defaultValue,
-  disabled = false,
-  value: controlledValue,
-  getAriaLabel,
-  getAriaValueText,
-  handleAlignment = 'center',
-  max = 100,
-  min = 0,
-  name,
-  onChange: onChangeProp,
-  onKeyDown,
-  onMouseDown,
-  onMouseMove,
-  onMouseUp,
-  onPointerDown,
-  onPointerUp,
-  onTouchEnd,
-  onTouchMove,
-  onTouchStart,
-  orientation = 'horizontal',
-  step = 1,
-  children,
-  ...rest
-}, forwardedRef) {
-  const touchId = react.useRef(undefined);
-  const fallbackId = react.useId();
-  const id = rest.id || fallbackId;
-
-  // Track whether or not the pointer is down without updating the component
-  const pointerDownRef = react.useRef(false);
-  const trackRef = react.useRef(null);
-  const handleRef = react.useRef(null);
-  const sliderRef = react.useRef(null);
-  const [hasFocus, setHasFocus] = react.useState(false);
-  const {
-    ref: x,
-    ...handleDimensions
-  } = useDimensions(handleRef);
-  const [_value, onChange] = useControlledState(controlledValue, onChangeProp, defaultValue || min, setValue => (e, v) => setValue(v));
-  const value = clamp$1(_value, min, max);
-  const trackPercent = valueToPercent(value, min, max);
-  const isVertical = orientation === 'vertical';
-  const handleSize = isVertical ? handleDimensions.height : handleDimensions.width;
-
-  // TODO: Consider removing the `handleAlignment` prop
-  // We may want to use accept a `handlePosition` prop instead and let apps
-  // define their own positioning logic, similar to how we do for popovers.
-  const handlePosition = `calc(${trackPercent}% - ${handleAlignment === 'center' ? `${handleSize}px / 2` : `${handleSize}px * ${trackPercent * 0.01}`})`;
-  const handlePositionRef = react.useRef(handlePosition);
-  react.useLayoutEffect(() => {
-    handlePositionRef.current = handlePosition;
-  }, [handlePosition]);
-  const getNewValueFromEvent = react.useCallback(event => {
-    return getNewValue(getPointerPosition(event, touchId), trackRef.current, {
-      step,
-      orientation,
-      min,
-      max
-    });
-  }, [max, min, orientation, step]);
-
-  // https://www.w3.org/TR/wai-aria-practices-1.2/#slider_kbd_interaction
-  const handleKeyDown = useStableLayoutCallback(event => {
-    if (disabled) {
-      return;
-    }
-    let newValue;
-    const tenSteps = (max - min) / 10;
-    const keyStep = step || (max - min) / 100;
-    switch (event.key) {
-      // Decrease the value of the slider by one step.
-      case 'ArrowLeft':
-      case 'ArrowDown':
-        newValue = value - keyStep;
-        break;
-      // Increase the value of the slider by one step
-      case 'ArrowRight':
-      case 'ArrowUp':
-        newValue = value + keyStep;
-        break;
-      // Decrement the slider by an amount larger than the step change made by
-      // `ArrowDown`.
-      case 'PageDown':
-        newValue = value - tenSteps;
-        break;
-      // Increment the slider by an amount larger than the step change made by
-      // `ArrowUp`.
-      case 'PageUp':
-        newValue = value + tenSteps;
-        break;
-      // Set the slider to the first allowed value in its range.
-      case 'Home':
-        newValue = min;
-        break;
-      // Set the slider to the last allowed value in its range.
-      case 'End':
-        newValue = max;
-        break;
-      default:
-        return;
-    }
-    newValue = clamp$1(step ? roundValueToStep(newValue, step, min) : newValue, min, max);
-    onChange(event, newValue);
-  });
-  const ariaValueText = getAriaValueText ? getAriaValueText(value) : ariaValueTextProp;
-  const rangeStyle = {
-    [isVertical ? 'height' : 'width']: `${trackPercent}%`
-  };
-
-  // Slide events!
-  // We will try to use pointer events if they are supported to leverage
-  // setPointerCapture and releasePointerCapture. We'll fall back to separate
-  // mouse and touch events.
-  // TODO: This could be more concise
-  const removeMoveEvents = react.useRef(noop);
-  const removeStartEvents = react.useRef(noop);
-  const removeEndEvents = react.useRef(noop);
-
-  // Store our event handlers in refs so we aren't attaching/detaching events
-  // on every render if the user doesn't useCallback
-  const appEvents = react.useRef({
-    onMouseMove,
-    onMouseDown,
-    onMouseUp,
-    onTouchStart,
-    onTouchEnd,
-    onTouchMove,
-    onPointerDown,
-    onPointerUp
-  });
-  react.useLayoutEffect(() => {
-    appEvents.current.onMouseMove = onMouseMove;
-    appEvents.current.onMouseDown = onMouseDown;
-    appEvents.current.onMouseUp = onMouseUp;
-    appEvents.current.onTouchStart = onTouchStart;
-    appEvents.current.onTouchEnd = onTouchEnd;
-    appEvents.current.onTouchMove = onTouchMove;
-    appEvents.current.onPointerDown = onPointerDown;
-    appEvents.current.onPointerUp = onPointerUp;
-  }, [onMouseMove, onMouseDown, onMouseUp, onTouchStart, onTouchEnd, onTouchMove, onPointerDown, onPointerUp]);
-  const handleSlideStart = useStableLayoutCallback(event => {
-    if (isRightClick(event)) return;
-    if (disabled) {
-      pointerDownRef.current = false;
-      return;
-    }
-    const ownerDocument = getOwnerDocument(sliderRef.current);
-    const ownerWindow = ownerDocument.defaultView || window;
-    pointerDownRef.current = true;
-    if (event.changedTouches) {
-      // Prevent scrolling for touch events
-      event.preventDefault();
-      const touch = event.changedTouches?.[0];
-      if (touch != null) {
-        touchId.current = touch.identifier;
-      }
-    }
-    const newValue = getNewValueFromEvent(event);
-    if (newValue == null) {
-      return;
-    }
-    ownerWindow.requestAnimationFrame(() => handleRef.current?.focus());
-    onChange(event, newValue);
-    removeMoveEvents.current = addMoveListener();
-    removeEndEvents.current = addEndListener();
-  });
-  const setPointerCapture = useStableLayoutCallback(event => {
-    if (isRightClick(event)) return;
-    if (disabled) {
-      pointerDownRef.current = false;
-      return;
-    }
-    pointerDownRef.current = true;
-    sliderRef.current?.setPointerCapture(event.pointerId);
-  });
-  const releasePointerCapture = useStableLayoutCallback(event => {
-    if (isRightClick(event)) return;
-    sliderRef.current?.releasePointerCapture(event.pointerId);
-    pointerDownRef.current = false;
-  });
-  const handlePointerMove = useStableLayoutCallback(event => {
-    if (disabled || !pointerDownRef.current) {
-      pointerDownRef.current = false;
-      return;
-    }
-    const newValue = getNewValueFromEvent(event);
-    if (newValue == null) {
-      return;
-    }
-    onChange?.(event, newValue);
-  });
-  const handleSlideStop = useStableLayoutCallback(event => {
-    if (isRightClick(event)) return;
-    pointerDownRef.current = false;
-    const newValue = getNewValueFromEvent(event);
-    if (newValue == null) {
-      return;
-    }
-    touchId.current = undefined;
-    removeMoveEvents.current();
-    removeEndEvents.current();
-  });
-  const addMoveListener = react.useCallback(() => {
-    const ownerDocument = getOwnerDocument(sliderRef.current);
-    const touchListener = wrapEvent(appEvents.current.onTouchMove, handlePointerMove);
-    const mouseListener = wrapEvent(appEvents.current.onMouseMove, handlePointerMove);
-    ownerDocument.addEventListener('touchmove', touchListener);
-    ownerDocument.addEventListener('mousemove', mouseListener);
-    return () => {
-      ownerDocument.removeEventListener('touchmove', touchListener);
-      ownerDocument.removeEventListener('mousemove', mouseListener);
-    };
-  }, [handlePointerMove]);
-  const addEndListener = react.useCallback(() => {
-    const ownerDocument = getOwnerDocument(sliderRef.current);
-    const ownerWindow = ownerDocument.defaultView || window;
-    const pointerListener = wrapEvent(appEvents.current.onPointerUp, releasePointerCapture);
-    const touchListener = wrapEvent(appEvents.current.onTouchEnd, handleSlideStop);
-    const mouseListener = wrapEvent(appEvents.current.onMouseUp, handleSlideStop);
-    if ('PointerEvent' in ownerWindow) {
-      ownerDocument.addEventListener('pointerup', pointerListener);
-    }
-    ownerDocument.addEventListener('touchend', touchListener);
-    ownerDocument.addEventListener('mouseup', mouseListener);
-    return () => {
-      if ('PointerEvent' in ownerWindow) {
-        ownerDocument.removeEventListener('pointerup', pointerListener);
-      }
-      ownerDocument.removeEventListener('touchend', touchListener);
-      ownerDocument.removeEventListener('mouseup', mouseListener);
-    };
-  }, [handleSlideStop, releasePointerCapture]);
-  const addStartListener = react.useCallback(() => {
-    // e.preventDefault is ignored by React's synthetic touchStart event, so
-    // we attach the listener directly to the DOM node
-    // https://github.com/facebook/react/issues/9809#issuecomment-413978405
-
-    const sliderElement = sliderRef.current;
-    if (!sliderElement) {
-      return noop;
-    }
-    const ownerDocument = getOwnerDocument(sliderElement);
-    const ownerWindow = ownerDocument.defaultView || window;
-    const touchListener = wrapEvent(appEvents.current.onTouchStart, handleSlideStart);
-    const mouseListener = wrapEvent(appEvents.current.onMouseDown, handleSlideStart);
-    const pointerListener = wrapEvent(appEvents.current.onPointerDown, setPointerCapture);
-    sliderElement.addEventListener('touchstart', touchListener);
-    sliderElement.addEventListener('mousedown', mouseListener);
-    if ('PointerEvent' in ownerWindow) {
-      sliderElement.addEventListener('pointerdown', pointerListener);
-    }
-    return () => {
-      sliderElement.removeEventListener('touchstart', touchListener);
-      sliderElement.removeEventListener('mousedown', mouseListener);
-      if ('PointerEvent' in ownerWindow) {
-        sliderElement.removeEventListener('pointerdown', pointerListener);
-      }
-    };
-  }, [setPointerCapture, handleSlideStart]);
-  react.useEffect(() => {
-    removeStartEvents.current = addStartListener();
-    return () => {
-      removeStartEvents.current();
-      removeEndEvents.current();
-      removeMoveEvents.current();
-    };
-  }, [addStartListener]);
-  const inputFallbackId = react.useId();
-  const inputId = id || inputFallbackId;
-  return /*#__PURE__*/jsxRuntime.jsx(SliderProvider, {
-    ariaLabel: getAriaLabel ? getAriaLabel(value) : ariaLabel,
-    ariaLabelledBy: ariaLabelledBy,
-    ariaValueText: ariaValueText,
-    handleDimensions: handleDimensions,
-    handleKeyDown: handleKeyDown,
-    handlePosition: handlePosition,
-    handleRef: handleRef,
-    hasFocus: hasFocus,
-    onKeyDown: onKeyDown,
-    setHasFocus: setHasFocus,
-    sliderId: id,
-    sliderMax: max,
-    sliderMin: min,
-    value: value,
-    disabled: !!disabled,
-    isVertical: isVertical,
-    orientation: orientation,
-    trackPercent: trackPercent,
-    trackRef: trackRef,
-    rangeStyle: rangeStyle,
-    updateValue: onChange,
-    children: /*#__PURE__*/jsxRuntime.jsxs(Comp, {
-      ...rest,
-      // @ts-ignore
-      as: innerAs,
-      ref: assignMultipleRefs(sliderRef, forwardedRef),
-      "data-reach-slider-input": "",
-      "data-disabled": disabled ? '' : undefined,
-      "data-orientation": orientation,
-      tabIndex: -1,
-      children: [typeof children === 'function' ? children({
-        hasFocus,
-        id,
-        max,
-        min,
-        value,
-        ariaValueText
-      }) : children, name &&
-      /*#__PURE__*/
-      // If the slider is used in a form we'll need an input field to
-      // capture the value. We'll assume this when the component is given a
-      // form field name (A `name` prop doesn't really make sense in any
-      // other context).
-      jsxRuntime.jsx("input", {
-        type: "hidden",
-        value: value,
-        name: name,
-        id: inputId
-      })]
-    })
-  });
-});
-
-/**
- * @see Docs https://reach.tech/slider#sliderinput-props
- */
-
-////////////////////////////////////////////////////////////////////////////////
-
-/**
- * SliderTrack
- *
- * @see Docs https://reach.tech/slider#slidertrack
- */
-const SliderTrackImpl = /*#__PURE__*/react.forwardRef(function SliderTrack({
-  as: Comp = 'div',
-  innerAs,
-  children,
-  style = {},
-  ...props
-}, forwardedRef) {
-  const {
-    disabled,
-    orientation,
-    trackRef
-  } = useSliderContext('SliderTrack');
-  return /*#__PURE__*/jsxRuntime.jsx(Comp, {
-    ref: assignMultipleRefs(trackRef, forwardedRef)
-    // @ts-ignore
-    ,
-    as: innerAs,
-    style: {
-      ...style,
-      position: 'relative'
-    },
-    ...props,
-    "data-reach-slider-track": "",
-    "data-disabled": disabled ? '' : undefined,
-    "data-orientation": orientation,
-    children: children
-  });
-});
-const SliderTrack = /*#__PURE__*/react.memo(SliderTrackImpl);
-
-/**
- * @see Docs https://reach.tech/slider#slidertrack-props
- */
-
-////////////////////////////////////////////////////////////////////////////////
-
-/**
- * SliderRange
- *
- * The (typically) highlighted portion of the track that represents the space
- * between the slider's `min` value and its current value.
- *
- * @see Docs https://reach.tech/slider#sliderrange
- */
-const SliderRangeImpl = /*#__PURE__*/react.forwardRef(function SliderRange({
-  as: Comp = 'div',
-  innerAs,
-  children,
-  style = {},
-  ...props
-}, forwardedRef) {
-  const {
-    disabled,
-    orientation,
-    rangeStyle
-  } = useSliderContext('SliderRange');
-  return /*#__PURE__*/jsxRuntime.jsx(Comp, {
-    ref: forwardedRef
-    // @ts-ignore
-    ,
-    as: innerAs,
-    style: {
-      position: 'absolute',
-      ...rangeStyle,
-      ...style
-    },
-    ...props,
-    "data-reach-slider-range": "",
-    "data-disabled": disabled ? '' : undefined,
-    "data-orientation": orientation
-  });
-});
-const SliderRange = /*#__PURE__*/react.memo(SliderRangeImpl);
-
-/**
- * `SliderRange` accepts any props that a HTML div component accepts.
- * `SliderRange` will not accept or render any children.
- *
- * @see Docs https://reach.tech/slider#sliderrange-props
- */
-
-////////////////////////////////////////////////////////////////////////////////
-
-/**
- * SliderHandle
- *
- * The handle that the user drags along the track to set the slider value.
- *
- * @see Docs https://reach.tech/slider#sliderhandle
- */
-const SliderHandleImpl = /*#__PURE__*/react.forwardRef(function SliderHandle({
-  // min,
-  // max,
-  as: Comp = 'div',
-  innerAs,
-  onBlur,
-  onFocus,
-  style = {},
-  onKeyDown,
-  ...props
-}, forwardedRef) {
-  const {
-    ariaLabel,
-    ariaLabelledBy,
-    ariaValueText,
-    disabled,
-    handlePosition,
-    handleRef,
-    isVertical,
-    handleKeyDown,
-    orientation,
-    setHasFocus,
-    sliderMin,
-    sliderMax,
-    value
-  } = useSliderContext('SliderHandle');
-  return /*#__PURE__*/jsxRuntime.jsx(Comp
-  // @ts-ignore
-  , {
-    as: innerAs,
-    "aria-disabled": disabled || undefined
-    // If the slider has a visible label, it is referenced by
-    // `aria-labelledby` on the slider element. Otherwise, the slider
-    // element has a label provided by `aria-label`.
-    // https://www.w3.org/TR/wai-aria-practices-1.2/#slider_roles_states_props
-    ,
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabel ? undefined : ariaLabelledBy
-    // If the slider is vertically oriented, it has `aria-orientation` set
-    // to vertical. The default value of `aria-orientation` for a slider is
-    // horizontal.
-    // https://www.w3.org/TR/wai-aria-practices-1.2/#slider_roles_states_props
-    ,
-    "aria-orientation": orientation
-    // The slider element has the `aria-valuemax` property set to a decimal
-    // value representing the maximum allowed value of the slider.
-    // https://www.w3.org/TR/wai-aria-practices-1.2/#slider_roles_states_props
-    ,
-    "aria-valuemax": sliderMax
-    // The slider element has the `aria-valuemin` property set to a decimal
-    // value representing the minimum allowed value of the slider.
-    // https://www.w3.org/TR/wai-aria-practices-1.2/#slider_roles_states_props
-    ,
-    "aria-valuemin": sliderMin
-    // The slider element has the `aria-valuenow` property set to a decimal
-    // value representing the current value of the slider.
-    // https://www.w3.org/TR/wai-aria-practices-1.2/#slider_roles_states_props
-    ,
-    "aria-valuenow": value
-    // If the value of `aria-valuenow` is not user-friendly, e.g., the day
-    // of the week is represented by a number, the `aria-valuetext` property
-    // is set to a string that makes the slider value understandable, e.g.,
-    // "Monday".
-    // https://www.w3.org/TR/wai-aria-practices-1.2/#slider_roles_states_props
-    ,
-    "aria-valuetext": ariaValueText
-    // The element serving as the focusable slider control has role
-    // `slider`.
-    // https://www.w3.org/TR/wai-aria-practices-1.2/#slider_roles_states_props
-    ,
-    role: "slider",
-    tabIndex: disabled ? -1 : 0,
-    ...props,
-    "data-reach-slider-handle": "",
-    ref: assignMultipleRefs(handleRef, forwardedRef),
-    onBlur: wrapEvent(onBlur, () => {
-      setHasFocus(false);
-    }),
-    onFocus: wrapEvent(onFocus, () => {
-      setHasFocus(true);
-    }),
-    onKeyDown: wrapEvent(onKeyDown, handleKeyDown),
-    style: {
-      position: 'absolute',
-      ...(isVertical ? {
-        bottom: handlePosition
-      } : {
-        left: handlePosition
-      }),
-      ...style
-    }
-  });
-});
-const SliderHandle = /*#__PURE__*/react.memo(SliderHandleImpl);
-
-/**
- * `SliderRange` accepts any props that a HTML div component accepts.
- *
- * @see Docs https://reach.tech/slider#sliderhandle-props
- */
-
-////////////////////////////////////////////////////////////////////////////////
-
-/**
- * SliderMarker
- *
- * A fixed value marker. These can be used to illustrate a range of steps or
- * highlight important points along the slider track.
- *
- * @see Docs https://reach.tech/slider#slidermarker
- */
-const SliderMarkerImpl = /*#__PURE__*/react.forwardRef(function SliderMarker({
-  as: Comp = 'div',
-  innerAs,
-  children,
-  style = {},
-  value,
-  ...props
-}, forwardedRef) {
-  const {
-    disabled,
-    isVertical,
-    orientation,
-    sliderMin,
-    sliderMax,
-    value: sliderValue
-  } = useSliderContext('SliderMarker');
-  const inRange = value >= sliderMin && value <= sliderMax;
-  const absoluteStartPosition = `${valueToPercent(value, sliderMin, sliderMax)}%`;
-  const state = value < sliderValue ? 'under-value' : value === sliderValue ? 'at-value' : 'over-value';
-  return inRange ? /*#__PURE__*/jsxRuntime.jsx(Comp, {
-    ref: forwardedRef
-    // @ts-ignore
-    ,
-    as: innerAs,
-    style: {
-      position: 'absolute',
-      ...(isVertical ? {
-        bottom: absoluteStartPosition
-      } : {
-        left: absoluteStartPosition
-      }),
-      ...style
-    },
-    ...props,
-    "data-reach-slider-marker": "",
-    "data-disabled": disabled ? '' : undefined,
-    "data-orientation": orientation,
-    "data-state": state,
-    "data-value": value,
-    children: children
-  }) : null;
-});
-const SliderMarker = /*#__PURE__*/react.memo(SliderMarkerImpl);
-
-/**
- * @see Docs https://reach.tech/slider#slidermarker-props
- */
-
-////////////////////////////////////////////////////////////////////////////////
-
-function clamp$1(val, min, max) {
-  return val > max ? max : val < min ? min : val;
-}
-
-/**
- * This handles the case when num is very small (0.00000001), js will turn
- * this into 1e-8. When num is bigger than 1 or less than -1 it won't get
- * converted to this notation so it's fine.
- *
- * @param num
- * @see https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Slider/Slider.js#L69
- */
-function getDecimalPrecision(num) {
-  if (Math.abs(num) < 1) {
-    const parts = num.toExponential().split('e-');
-    const matissaDecimalPart = parts[0].split('.')[1];
-    return (matissaDecimalPart ? matissaDecimalPart.length : 0) + parseInt(parts[1], 10);
-  }
-  const decimalPart = num.toString().split('.')[1];
-  return decimalPart ? decimalPart.length : 0;
-}
-function percentToValue(percent, min, max) {
-  return (max - min) * percent + min;
-}
-function roundValueToStep(value, step, min) {
-  const nearest = Math.round((value - min) / step) * step + min;
-  return Number(nearest.toFixed(getDecimalPrecision(step)));
-}
-function getPointerPosition(event, touchId) {
-  if (touchId.current !== undefined && event.changedTouches) {
-    for (let i = 0; i < event.changedTouches.length; i += 1) {
-      const touch = event.changedTouches[i];
-      if (touch.identifier === touchId.current) {
-        return {
-          x: touch.clientX,
-          y: touch.clientY
-        };
-      }
-    }
-    return false;
-  }
-  return {
-    x: event.clientX,
-    y: event.clientY
-  };
-}
-function getNewValue(handlePosition, track, props) {
-  const {
-    orientation,
-    min,
-    max,
-    step
-  } = props;
-  if (!track || !handlePosition) {
-    return null;
-  }
-  const {
-    left,
-    width,
-    bottom,
-    height
-  } = track.getBoundingClientRect();
-  const isVertical = orientation === 'vertical';
-  const diff = isVertical ? bottom - handlePosition.y : handlePosition.x - left;
-  const percent = diff / (isVertical ? height : width);
-  const newValue = percentToValue(percent, min, max);
-  return clamp$1(step ? roundValueToStep(newValue, step, min) : newValue, min, max);
-}
-function useDimensions(ref) {
-  const [{
-    width,
-    height
-  }, setDimensions] = react.useState({
-    width: 0,
-    height: 0
-  });
-  // Many existing `useDimensions` type hooks will use `getBoundingClientRect`
-  // getBoundingClientRect does not work here when borders are applied.
-  // getComputedStyle is not as performant so we may want to create a utility to
-  // check for any conflicts with box sizing first and only use
-  // `getComputedStyle` if neccessary.
-  /* const { width, height } = ref.current
-    ? ref.current.getBoundingClientRect()
-    : 0; */
-
-  react.useLayoutEffect(() => {
-    const ownerDocument = getOwnerDocument(ref.current);
-    const ownerWindow = ownerDocument.defaultView || window;
-    if (ref.current) {
-      const {
-        height: _newHeight,
-        width: _newWidth
-      } = ownerWindow.getComputedStyle(ref.current);
-      const newHeight = parseFloat(_newHeight);
-      const newWidth = parseFloat(_newWidth);
-      if (newHeight !== height || newWidth !== width) {
-        setDimensions({
-          height: newHeight,
-          width: newWidth
-        });
-      }
-    }
-  }, [ref, width, height]);
-  return {
-    ref,
-    width,
-    height
-  };
-}
-function valueToPercent(value, min, max) {
-  return (value - min) * 100 / (max - min);
-}
-
-// Spinner Component
-
-const spinbuttonContext = /*#__PURE__*/react.createContext(null);
-const {
-  Provider: SpinnerProvider
-} = spinbuttonContext;
-const useSpinnerContext = () => react.useContext(spinbuttonContext);
-
-function clamp(value, min, max) {
-  return Math.min(Math.max(value, min), max);
-}
-
-const Spinner = /*#__PURE__*/react.forwardRef(function Spinner(props, forwardedRef) {
-  const {
-    as: Comp = 'div',
-    minValue = -1000,
-    maxValue = 1000,
-    stepSize = 10,
-    value = 0,
-    onChange,
-    onKeyDown,
-    onBlur,
-    onFocus,
-    ...otherProps
-  } = props;
-  const [spinnerHasFocus, setSpinnerHasFocus] = react.useState(false);
-  const ref = react.useRef(null);
-  const clamp$1 = value => clamp(value, minValue, maxValue);
-  const handleKeyDown = e => {
-    let nextValue = value;
-    switch (e.key) {
-      case 'ArrowUp':
-        nextValue += 1;
-        break;
-      case 'ArrowDown':
-        nextValue -= 1;
-        break;
-      case 'Home':
-        nextValue = minValue;
-        break;
-      case 'End':
-        nextValue = maxValue;
-        break;
-      case 'PageUp':
-        nextValue += stepSize;
-        break;
-      case 'PageDown':
-        nextValue -= stepSize;
-        break;
-      default:
-        return;
-    }
-    ref.current && ref.current.focus();
-    nextValue = clamp$1(nextValue);
-    if (nextValue !== value) {
-      e.preventDefault(); // prevent scrolling
-      onChange && onChange(e, nextValue);
-    }
-  };
-  const handleFocus = () => {
-    setSpinnerHasFocus(true);
-  };
-  const handleBlur = () => {
-    setSpinnerHasFocus(false);
-  };
-  return /*#__PURE__*/jsxRuntime.jsx(SpinnerProvider, {
-    value: {
-      minValue,
-      value,
-      maxValue,
-      stepSize,
-      onChange,
-      clamp: clamp$1,
-      spinnerHasFocus
-    },
-    children: /*#__PURE__*/jsxRuntime.jsx(Comp, {
-      ref: assignMultipleRefs(forwardedRef, ref),
-      "data-spinner-root": "",
-      role: "spinbutton",
-      "aria-valuenow": value,
-      "aria-valuemin": minValue,
-      "aria-valuemax": maxValue,
-      tabIndex: 0,
-      onKeyDown: wrapEvent(onKeyDown, handleKeyDown),
-      onFocus: wrapEvent(onFocus, handleFocus),
-      onBlur: wrapEvent(onBlur, handleBlur),
-      ...otherProps
-    })
-  });
-});
-
-const SpinnerButton = /*#__PURE__*/react.forwardRef(function SpinnerButton(props, forwardedRef) {
-  const {
-    as: Comp = 'button',
-    type,
-    onClick,
-    ...otherProps
-  } = props;
-  const spinnerContext = useSpinnerContext();
-  if (!spinnerContext) {
-    throw new Error('Missing <Spinner /> in component tree');
-  }
-  const handleClick = e => {
-    const delta = type === 'next' ? 1 : -1;
-    spinnerContext.onChange && spinnerContext.onChange(e, spinnerContext.value + delta);
-  };
-  const disabled = type === 'next' ? spinnerContext.value + 1 > spinnerContext.maxValue : spinnerContext.value - 1 < spinnerContext.minValue;
-  return /*#__PURE__*/jsxRuntime.jsx(Comp, {
-    ...otherProps,
-    type: "button",
-    ref: forwardedRef,
-    tabIndex: -1,
-    "data-spinner-button": "",
-    "data-spinner-has-focus": spinnerContext.spinnerHasFocus ? '' : undefined,
-    disabled: disabled,
-    onClick: wrapEvent(onClick, handleClick)
-  });
-});
-
-// Tabs Component
-
-const tabsContext = /*#__PURE__*/react.createContext(null);
-const {
-  Provider: TabsProvider
-} = tabsContext;
-const useTabsContext = () => react.useContext(tabsContext);
-
-// TabList Component
-
-const tablistContext = /*#__PURE__*/react.createContext(null);
-const {
-  Provider: TabListProvider
-} = tablistContext;
-const useTabListContext = () => react.useContext(tablistContext);
-
-const Tabs = /*#__PURE__*/react.forwardRef(function Tabs(props, forwardedRef) {
-  const {
-    as: Comp = react.Fragment,
-    index: indexProp,
-    onChange: onChangeProp,
-    defaultIndex = 0,
-    ...otherProps
-  } = props;
-  const [index, onChange] = useControlledState(indexProp, onChangeProp, defaultIndex, setState => (e, idx) => setState(idx));
-  const [tabListId, setTabListId] = react.useState(null);
-  return /*#__PURE__*/jsxRuntime.jsx(TabsProvider, {
-    value: {
-      currentIndex: index || 0,
-      onChange,
-      tabListId,
-      setTabListId
-    },
-    children: /*#__PURE__*/jsxRuntime.jsx(Comp, {
-      ref: forwardedRef,
-      ...otherProps
-    })
-  });
-});
-
-function scopeQuery(nodeType, props) {
-  return props['data-tab'] === '';
-}
-
-function getNextIndex(desiredIndex, delta, allTabs) {
-  for (let i = 0; i < allTabs.length; i++) {
-    const nextIndex = getCircularIndex(desiredIndex + delta * i, allTabs.length);
-    if (nextIndex !== null && !allTabs[nextIndex].disabled) {
-      return nextIndex;
-    }
-  }
-  return null;
-}
-const Tab = /*#__PURE__*/react.forwardRef(function Tab(props, forwardedRef) {
-  const {
-    as: Comp = 'button',
-    onKeyDown,
-    onClick,
-    index: tabIndex = -1,
-    ...otherProps
-  } = props;
-  const tabContext = useTabsContext();
-  const tabListContext = useTabListContext();
-  const ref = react.useRef(undefined);
-  if (!tabContext || !tabListContext) {
-    throw new Error('Missing <Tabs /> or <TabList /> in the component tree');
-  }
-  const handleKeyDown = e => {
-    const right = tabListContext.vertical ? 'ArrowDown' : 'ArrowRight';
-    const left = tabListContext.vertical ? 'ArrowUp' : 'ArrowLeft';
-    const first = 'Home';
-    const last = 'End';
-    const navigateIndex = (desiredIndex, isLast) => {
-      const delta = e.key === right || e.key === first ? 1 : -1;
-      const allTabs = tabListContext.tabsScope.current.queryAllNodes(scopeQuery);
-      const currentIndex = ref.current ? allTabs.indexOf(ref.current) : -1;
-      const nextIndex = getNextIndex(isLast ? desiredIndex : currentIndex + desiredIndex, delta, allTabs);
-      if (nextIndex !== null && nextIndex !== currentIndex && tabContext.onChange) {
-        allTabs[nextIndex].focus();
-        !tabListContext.manualActivation && tabContext.onChange(e, nextIndex);
-      }
-    };
-    switch (e.key) {
-      case right:
-      case left:
-        {
-          navigateIndex(e.key === right ? 1 : -1, false);
-          break;
-        }
-      case first: // Home / End
-      case last:
-        {
-          navigateIndex(e.key === first ? 0 : -1, true);
-          break;
-        }
-    }
-  };
-  const handleClick = e => {
-    const allTabs = tabListContext.tabsScope.current.queryAllNodes(scopeQuery);
-    const currentIndex = ref.current ? allTabs.indexOf(ref.current) : -1;
-    if (currentIndex >= 0) {
-      tabContext.onChange && tabContext.onChange(e, currentIndex);
-    }
-  };
-  const isSelected = tabIndex === tabContext.currentIndex;
-  return /*#__PURE__*/jsxRuntime.jsx(Comp, {
-    ...otherProps,
-    ref: assignMultipleRefs(ref, forwardedRef),
-    "data-tab": "",
-    id: tabContext.tabListId !== null && tabIndex >= 0 ? `tab-${tabContext.tabListId}-${tabIndex}` : undefined,
-    "aria-controls": tabContext.tabListId !== null && tabIndex >= 0 ? `tabpanel-${tabContext.tabListId}-${tabIndex}` : undefined,
-    role: "tab",
-    tabIndex: isSelected ? 0 : -1,
-    "aria-selected": isSelected,
-    selected: isSelected,
-    onKeyDown: wrapEvent(onKeyDown, handleKeyDown),
-    onClick: wrapEvent(onClick, handleClick)
-  });
-});
-
-const TabList = /*#__PURE__*/react.forwardRef(function TabList(props, forwardedRef) {
-  const {
-    as: Comp = 'div',
-    manualActivation = false,
-    vertical = false,
-    children: childrenProps,
-    ...otherProps
-  } = props;
-  const ref = react.useRef(null);
-  const tabsScope = useScope(ref);
-  const tabsContext = useTabsContext();
-  const id = react.useId();
-  if (!tabsContext) {
-    throw new Error('Missing <Tabs /> in the component tree');
-  }
-  react.useEffect(() => {
-    if (id !== undefined) {
-      tabsContext.setTabListId(id);
-      return () => {
-        tabsContext.setTabListId(null);
-      };
-    }
-    return;
-  }, [id, tabsContext, tabsContext.setTabListId]);
-  const children = react.Children.map(childrenProps, (node, index) => /*#__PURE__*/react.cloneElement(node, {
-    index
-  }));
-  return /*#__PURE__*/jsxRuntime.jsx(TabListProvider, {
-    value: {
-      tabsScope,
-      manualActivation,
-      vertical
-    },
-    children: /*#__PURE__*/jsxRuntime.jsx(Comp, {
-      ref: assignMultipleRefs(forwardedRef, ref),
-      "data-tab-list": "",
-      role: "tablist",
-      ...otherProps,
-      children: children
-    })
-  });
-});
-
-const TabPanels = /*#__PURE__*/react.forwardRef(function TabPanels(props, forwardedRef) {
-  const {
-    as: Comp = react.Fragment,
-    children: childrenProps,
-    lazy,
-    ...otherProps
-  } = props;
-  const children = react.Children.map(childrenProps, (node, index) => /*#__PURE__*/react.cloneElement(node, {
-    index,
-    lazy
-  }));
-  return /*#__PURE__*/jsxRuntime.jsx(Comp, {
-    ref: forwardedRef,
-    ...otherProps,
-    children: children
-  });
-});
-
-const TabPanel = /*#__PURE__*/react.forwardRef(function TabPanel(props, forwardedRef) {
-  const {
-    as: Comp = 'div',
-    index,
-    lazy = false,
-    children,
-    ...otherProps
-  } = props;
-  const tabsContext = useTabsContext();
-  if (!tabsContext) {
-    throw new Error('Missing <Tabs /> in the component tree.');
-  }
-  const isSelected = tabsContext.currentIndex === index;
-  return /*#__PURE__*/jsxRuntime.jsx(Comp, {
-    ref: forwardedRef,
-    "data-tab-panel": "",
-    role: "tabpanel",
-    id: tabsContext.tabListId !== null ? `tabpanel-${tabsContext.tabListId}-${index}` : undefined,
-    "aria-labelledby": tabsContext.tabListId !== null ? `tab-${tabsContext.tabListId}-${index}` : undefined,
-    hidden: isSelected ? undefined : 'hidden',
-    tabIndex: 0,
-    ...otherProps,
-    children: (isSelected || !lazy) && children
-  });
-});
-
-function createSubscription() {
-  const subscriptions = [];
-  function subscribe(fn) {
-    subscriptions.push(fn);
-    return () => {
-      subscriptions.splice(subscriptions.indexOf(fn), 1);
-    };
-  }
-  function notify() {
-    subscriptions.forEach(fn => fn());
-  }
-  return {
-    subscribe,
-    notify
-  };
-}
-
-////////////////////////////////////////////////////////////////////////////////
-// Timeouts:
-
-// Manages when the user "rests" on an element. Keeps the interface from being
-// flashing tooltips all the time as the user moves the mouse around the screen.
-let restTimeout;
-function startRestTimer() {
-  clearTimeout(restTimeout);
-  restTimeout = setTimeout(() => {
-    send(Rest, undefined);
-  }, 200);
-}
-function clearRestTimer() {
-  clearTimeout(restTimeout);
-}
-
-// Manages the delay to hide the tooltip after rest leaves.
-let leavingVisibleTimer;
-function startLeavingVisibleTimer() {
-  clearTimeout(leavingVisibleTimer);
-  leavingVisibleTimer = setTimeout(() => send(TimeComplete, undefined), 100);
-}
-function clearLeavingVisibleTimer() {
-  clearTimeout(leavingVisibleTimer);
-}
-
-////////////////////////////////////////////////////////////////////////////////
-// State machine
-
-// Nothing goin' on
-const Idle = 'IDLE';
-// We're considering showing the tooltip, but we're gonna wait a sec
-const Focused = 'FOCUSED';
-// It's on!
-const Visible = 'VISIBLE';
-// Focus has left, but we want to keep it visible for a sec
-const LeavingVisible = 'LEAVING_VISIBLE';
-// The user clicked the tool, so we want to hide the thing, we can't just use
-// IDLE because we need to ignore mousemove, etc.
-const Dismissed = 'DISMISSED';
-const Blur = 'BLUR';
-const Focus = 'FOCUS';
-const GlobalMouseMove = 'GLOBAL_MOUSE_MOVE';
-const MouseDown = 'MOUSE_DOWN';
-const MouseEnter = 'MOUSE_ENTER';
-const MouseLeave = 'MOUSE_LEAVE';
-const MouseMove = 'MOUSE_MOVE';
-const Rest = 'REST';
-const SelectWithKeyboard = 'SELECT_WITH_KEYBOARD';
-const TimeComplete = 'TIME_COMPLETE';
-const subscription = createSubscription();
-const state = {
-  current: {
-    state: Idle,
-    id: ''
-  }
-};
-function clearContextId() {
-  state.current.id = '';
-}
-const chart = {
-  initial: Idle,
-  states: {
-    [Idle]: {
-      enter: () => {
-        clearContextId();
-      },
-      on: {
-        [MouseEnter]: Focused,
-        [Focus]: Visible
-      }
-    },
-    [Focused]: {
-      enter: startRestTimer,
-      leave: clearRestTimer,
-      on: {
-        [MouseMove]: Focused,
-        [MouseLeave]: Idle,
-        [MouseDown]: Dismissed,
-        [Blur]: Idle,
-        [Rest]: Visible
-      }
-    },
-    [Visible]: {
-      on: {
-        [Focus]: Focused,
-        [MouseEnter]: Focused,
-        [MouseLeave]: LeavingVisible,
-        [Blur]: LeavingVisible,
-        [MouseDown]: Dismissed,
-        [SelectWithKeyboard]: Dismissed,
-        [GlobalMouseMove]: LeavingVisible
-      }
-    },
-    [LeavingVisible]: {
-      enter: () => {
-        startLeavingVisibleTimer();
-      },
-      leave: () => {
-        clearLeavingVisibleTimer();
-        clearContextId();
-      },
-      on: {
-        [MouseEnter]: Visible,
-        [Focus]: Visible,
-        [TimeComplete]: Idle
-      }
-    },
-    [Dismissed]: {
-      leave: () => {
-        clearContextId();
-      },
-      on: {
-        [MouseLeave]: Idle,
-        [Blur]: Idle
-      }
-    }
-  }
-};
-function transition(currentState, event, payload) {
-  const currentStateValue = currentState.state;
-  const stateDef = chart.states[currentState.state];
-  const nextState = stateDef?.on?.[event];
-
-  // Really useful for debugging
-  // console.log({
-  //   event,
-  //   state: state.current.state,
-  //   id: state.current.id,
-  //   nextState,
-  // });
-
-  if (!nextState) {
-    return currentState;
-  }
-  if (stateDef && stateDef.leave) {
-    stateDef.leave(currentStateValue, payload);
-  }
-  const nextStateValue = nextState;
-  const nextDef = chart.states[nextStateValue];
-  if (nextDef && nextDef.enter) {
-    nextDef.enter(nextStateValue, payload);
-  }
-  return {
-    ...currentState,
-    ...payload,
-    state: nextStateValue
-  };
-}
-function send(event, payload) {
-  const nextState = transition(state.current, event, payload);
-  if (state.current !== nextState) {
-    state.current = nextState;
-    subscription.notify();
-  }
-}
-
-function useTooltip(childProps, childRef, tooltipProps) {
-  const {
-    onMouseEnter,
-    onMouseLeave,
-    onMouseMove,
-    onMouseDown,
-    onKeyDown,
-    onFocus,
-    onBlur
-  } = childProps;
-  const anchorEl = react.useRef(null);
-  const [visible, setVisible] = react.useState(false);
-  const id = react.useId();
-  react.useEffect(() => {
-    subscription.subscribe(() => {
-      setVisible((state.current.state === Visible || state.current.state === LeavingVisible) && state.current.id === id);
-    });
-  }, [id]);
-  function handleMouseEnter() {
-    send(MouseEnter, {
-      id
-    });
-  }
-  function handleMouseMove() {
-    send(MouseMove, {
-      id
-    });
-  }
-  function handleMouseLeave() {
-    send(MouseLeave);
-  }
-  function handleMouseDown() {
-    // Allow quick click from one tool to another
-    if (state.current.id === id) {
-      send(MouseDown);
-    }
-  }
-  function handleFocus() {
-    send(Focus, {
-      id
-    });
-  }
-  function handleBlur() {
-    // Allow quick click from one tool to another
-    if (state.current.id === id) {
-      send(Blur, undefined);
-    }
-  }
-  function handleKeyDown(event) {
-    if (event.key === 'Enter' || event.key === ' ') {
-      send(SelectWithKeyboard);
-    }
-  }
-  const {
-    label: children,
-    onMouseEnter: tooltipOnMouseEnter,
-    onMouseLeave: tooltipOnMouseLeave,
-    onMouseMove: tooltipOnMouseMove,
-    ...otherTooltipProps
-  } = tooltipProps;
-  const tooltipId = `tooltip-${id}`;
-  return [{
-    ...childProps,
-    ref: assignMultipleRefs(childRef, anchorEl),
-    ...(visible && !childProps['aria-label'] && {
-      'aria-describedby': tooltipId
-    }),
-    onMouseEnter: wrapEvent(onMouseEnter, handleMouseEnter),
-    onMouseLeave: wrapEvent(onMouseLeave, handleMouseLeave),
-    onMouseMove: wrapEvent(onMouseMove, handleMouseMove),
-    onMouseDown: wrapEvent(onMouseDown, handleMouseDown),
-    onFocus: wrapEvent(onFocus, handleFocus),
-    onBlur: wrapEvent(onBlur, handleBlur),
-    onKeyDown: wrapEvent(onKeyDown, handleKeyDown)
-  }, {
-    id: tooltipId,
-    anchorEl,
-    visible,
-    children,
-    onMouseEnter: wrapEvent(tooltipOnMouseEnter, handleMouseEnter),
-    onMouseLeave: wrapEvent(tooltipOnMouseLeave, handleMouseLeave),
-    onMouseMove: wrapEvent(tooltipOnMouseMove, handleMouseMove),
-    role: 'tooltip',
-    ...otherTooltipProps
-  }];
-}
-
-const Tooltip = /*#__PURE__*/react.forwardRef(function Tooltip(props, forwardedRef) {
-  const {
-    as: Comp = 'div',
-    innerAs,
-    children,
-    disabled = false,
-    ...otherProps
-  } = props;
-  const child = react.Children.only(children);
-  // React 19: ref lives in props. React <=18: ref lives on element directly.
-  const childRef = child.props.ref ?? child.ref;
-  const [childProps, {
-    visible,
-    ...tooltipProps
-  }] = useTooltip(child.props, childRef, otherProps);
-  if (disabled) {
-    return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
-      children: child
-    });
-  }
-  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/react.cloneElement(child, childProps), visible && /*#__PURE__*/jsxRuntime.jsx(Comp, {
-      as: innerAs,
-      ref: forwardedRef,
-      ...tooltipProps
-    })]
-  });
-});
-
-exports.Accordion = Accordion;
-exports.AccordionBody = AccordionBody;
-exports.AccordionHeader = AccordionHeader;
-exports.AccordionItem = AccordionItem;
-exports.CheckBox = CheckBox;
-exports.ComboBoxProvider = ComboBoxProvider;
-exports.Combobox = Combobox;
-exports.ComboboxButton = ComboboxButton;
-exports.ComboboxInput = ComboboxInput;
-exports.ComboboxLabel = ComboboxLabel;
-exports.ComboboxList = ComboboxList;
-exports.ComboboxOption = ComboboxOption;
-exports.ComboboxPopover = ComboboxPopover;
-exports.ContextMenuTrigger = ContextMenuTrigger;
-exports.FocusLock = FocusLock;
-exports.Menu = Menu;
-exports.MenuButton = MenuButton;
-exports.MenuItem = MenuItem;
-exports.MenuList = MenuList;
-exports.MenuPopover = MenuPopover;
-exports.Modal = Modal;
-exports.ModalBackdrop = ModalBackdrop;
-exports.Popper = Popper;
-exports.PopperArrow = PopperArrow;
-exports.PopperProvider = PopperProvider;
-exports.Portal = Portal;
-exports.PortalSelectorProvider = PortalSelectorProvider;
-exports.RadioButton = RadioButton;
-exports.RadioGroup = RadioGroup;
-exports.Slider = Slider;
-exports.SliderHandle = SliderHandle;
-exports.SliderInput = SliderInput;
-exports.SliderMarker = SliderMarker;
-exports.SliderRange = SliderRange;
-exports.SliderTrack = SliderTrack;
-exports.Spinner = Spinner;
-exports.SpinnerButton = SpinnerButton;
-exports.Tab = Tab;
-exports.TabList = TabList;
-exports.TabPanel = TabPanel;
-exports.TabPanels = TabPanels;
-exports.Tabs = Tabs;
-exports.Tooltip = Tooltip;
-exports.assignMultipleRefs = assignMultipleRefs;
-exports.assignRef = assignRef;
-exports.canUseDOM = canUseDOM;
-exports.createContext = createContext;
-exports.gestureHandlers = gestureHandlers;
-exports.getCircularIndex = getCircularIndex;
-exports.getOwnerDocument = getOwnerDocument;
-exports.getScope = getScope;
-exports.initialGestureHandlersState = initialGestureHandlersState;
-exports.isRightClick = isRightClick;
-exports.rubberBand = rubberBand;
-exports.rubberBandClamp = rubberBandClamp;
-exports.useAutoFocus = useAutoFocus;
-exports.useChildrenCounterChild = useChildrenCounterChild;
-exports.useChildrenCounterParent = useChildrenCounterParent;
-exports.useComboBoxContext = useComboBoxContext;
-exports.useControlledState = useControlledState;
-exports.useFocusReturn = useFocusReturn;
-exports.useFocusState = useFocusState;
-exports.useGestureHandlers = useGestureHandlers;
-exports.useMeasure = useMeasure;
-exports.useOnClickOutside = useOnClickOutside;
-exports.useOnKeyDown = useOnKeyDown;
-exports.usePopperContext = usePopperContext;
-exports.useReducerMachine = useReducerMachine;
-exports.useRemoveBodyScroll = useRemoveBodyScroll;
-exports.useScope = useScope;
-exports.useStableCallback = useStableCallback;
-exports.useStableLayoutCallback = useStableLayoutCallback;
-exports.useThrottle = useThrottle;
-exports.wrapEvent = wrapEvent;
-//# sourceMappingURL=index.js.map