@basic-ui/core 0.0.53 → 0.0.56

package/build/cjs/index.js

@@ -7,11 +7,15 @@ 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 useAccordionContext = () => react.useContext(accordionContext);
+
+// Accordion Component
 
 const accordionItemContext = /*#__PURE__*/react.createContext(null);
 const {
@@ -20,18 +24,16 @@ const {
 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 */
 
+/* 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 {
@@ -49,14 +51,13 @@ function useAutoFocus(open, elementRef) {
       if (elementRef.current && !elementRef.current.contains(document.activeElement)) {
         focusOnChildNode(elementRef.current, 0);
       }
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open]);
 }
 
 function assignRef(ref, value) {
   if (ref == null) return;
-
   if (typeof ref === 'function') {
     ref(value);
   } else {
@@ -81,34 +82,29 @@ function canUseDOM() {
 
 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
+    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];
@@ -118,7 +114,6 @@ function getCircularIndex(index, maxLength) {
   if (maxLength < 0) {
     return null;
   }
-
   return (index % maxLength + maxLength) % maxLength;
 }
 
@@ -137,7 +132,6 @@ function isRightClick(nativeEvent) {
  *
  * @param element
  */
-
 function getOwnerDocument(element) {
   return canUseDOM() ? element ? element.ownerDocument : document : null;
 }
@@ -151,42 +145,39 @@ 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;
-  }); // eslint-disable-next-line react-hooks/exhaustive-deps
-
+  });
   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
@@ -196,7 +187,6 @@ function useStableCallback(callback) {
  * `useLayoutEffect` instead of `useEffect` to deal with timing issues only when
  * needed.
  */
-
 function useStableLayoutCallback(callback) {
   return createStableCallbackHook(useEnhancedEffect$2, callback);
 }
@@ -204,11 +194,9 @@ function useStableLayoutCallback(callback) {
 function wrapEvent(theirHandler, ourHandler) {
   return (event, ...otherArgs) => {
     const ret = theirHandler && theirHandler(event, ...otherArgs);
-
     if (!event || !event.defaultPrevented) {
       return ourHandler(event, ...otherArgs);
     }
-
     return ret;
   };
 }
@@ -218,19 +206,14 @@ function useControlledState(valueProp, onChangeProp, defaultValue, defaultOnChan
   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 [// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    valueProp, wrapEvent(onChangeProp, defaultOnChange(setValueState))];
+    return [valueProp, wrapEvent(onChangeProp, defaultOnChange(setValueState))];
   }
-
-  return [// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  valueState, wrapEvent(onChangeProp, defaultOnChange(setValueState))];
+  return [valueState, wrapEvent(onChangeProp, defaultOnChange(setValueState))];
 }
 
 function useChildrenCounterParent(itemsRef) {
@@ -259,11 +242,10 @@ function useChildrenCounterChild(itemsRef, itemIndexRef, obj, disabled = false)
     if (disabled) {
       itemIndexRef.current = -1;
       return;
-    } // push this option to the optionsRef array
-
+    }
 
+    // push this option to the optionsRef array
     itemIndexRef.current = itemsRef.current.length;
-
     if (obj instanceof Function) {
       itemsRef.current.push(obj(itemIndexRef.current));
     } else {
@@ -277,7 +259,6 @@ function useFocusReturn(open, rootEl) {
     if (open && typeof document !== 'undefined' && document.activeElement instanceof HTMLElement) {
       return document.activeElement;
     }
-
     return null;
   })());
   react.useEffect(() => {
@@ -287,7 +268,6 @@ function useFocusReturn(open, rootEl) {
       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 () => {
@@ -308,15 +288,12 @@ function useFocusState(props = {}) {
     onBlur
   } = props;
   const [hasFocus, setHasFocus] = react.useState(false);
-
   const handleFocus = () => {
     setHasFocus(true);
   };
-
   const handleBlur = () => {
     setHasFocus(false);
   };
-
   return {
     bind: {
       onFocus: wrapEvent(onFocus, handleFocus),
@@ -332,7 +309,6 @@ function useOnClickOutside(ref, handler, active = true) {
     if (!ref.current || ref.current.contains(event.target)) {
       return;
     }
-
     handler && handler(event);
   }, [ref, handler]);
   react.useEffect(() => {
@@ -342,7 +318,6 @@ function useOnClickOutside(ref, handler, active = true) {
         document.removeEventListener('pointerup', listener);
       };
     }
-
     return;
   }, [listener, active]);
 }
@@ -355,7 +330,6 @@ function useOnKeyDown(ownerWindow, handler, active = true) {
         ownerWindow.removeEventListener('keydown', handler);
       };
     }
-
     return;
   }, [ownerWindow, active, handler]);
 }
@@ -368,27 +342,21 @@ function useReducerMachine(chart, reducer, initialData) {
     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];
 }
 
@@ -396,26 +364,21 @@ let scrollBodyCount = 0;
 function useRemoveBodyScroll(open, elementRef) {
   react.useEffect(() => {
     if (open && elementRef.current) {
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       const ownerDocument = getOwnerDocument(elementRef.current);
       const ownerWindow = ownerDocument.defaultView || window;
-      scrollBodyCount += 1; // calculate scrollbar width if mounting the first scroll lock
+      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 = '';
@@ -455,11 +418,9 @@ function useMeasure(ref) {
         setBounds(entry.contentRect);
       });
     }
-
     if (ref.current) {
       ro.current.observe(ref.current);
     }
-
     return () => {
       if (ro.current) {
         ro.current.disconnect();
@@ -488,14 +449,14 @@ const initialGestureHandlersState = {
   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
+  } = options;
 
+  // Common handlers
   const handleUp = () => {
     set(state => {
       const deltaTime = Date.now() - state.startTime;
@@ -503,7 +464,8 @@ function gestureHandlers(set, containerRef, options = {}) {
       const yDelta = state.y - state.yInitial;
       const xVelocity = calcVelocity(xDelta, deltaTime, state.xVelocity);
       const yVelocity = calcVelocity(yDelta, deltaTime, state.yVelocity);
-      const newState = { ...state,
+      const newState = {
+        ...state,
         xVelocity,
         yVelocity,
         target: null,
@@ -512,7 +474,6 @@ function gestureHandlers(set, containerRef, options = {}) {
       return newState;
     });
   };
-
   const handleDown = e => {
     const {
       target,
@@ -520,7 +481,8 @@ function gestureHandlers(set, containerRef, options = {}) {
       pageY
     } = e;
     set(state => {
-      const newState = { ...state,
+      const newState = {
+        ...state,
         target,
         x: pageX,
         xDelta: 0,
@@ -541,38 +503,31 @@ function gestureHandlers(set, containerRef, options = {}) {
       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;
@@ -583,7 +538,8 @@ function gestureHandlers(set, containerRef, options = {}) {
       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,
+      const newState = {
+        ...state,
         xDelta,
         xDeltaPercent,
         x: pageX,
@@ -597,35 +553,28 @@ function gestureHandlers(set, containerRef, options = {}) {
       };
       return newState;
     });
-  } // Touch handlers
-
-  /* eslint-disable @typescript-eslint/no-use-before-define */
+  }
 
+  // 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;
-    } // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-
-
+    }
     const ownerDocument = getOwnerDocument(e.currentTarget);
     const ownerWindow = ownerDocument.defaultView || window;
     ownerWindow.addEventListener('touchmove', handleTouchMove, {
@@ -635,54 +584,45 @@ function gestureHandlers(set, containerRef, options = {}) {
     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
-
+  }
 
+  // Mouse handlers
   function handleMouseDown(e) {
     if (ensureTargetIsContainer && containerRef && e.target !== containerRef.current) {
       return;
-    } // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-
-
+    }
     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();
   }
-  /* eslint-enable @typescript-eslint/no-use-before-define */
-
-
   return {
     onMouseDown: handleMouseDown,
     onTouchStart: handleTouchStart
   };
 }
 const useGestureHandlers = (containerRef, onGesture, options = {}) => {
-  const state = react.useRef({ ...initialGestureHandlersState
+  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,
@@ -695,7 +635,6 @@ function getScope(rootRef) {
     if (!rootRef.current) {
       return [];
     }
-
     const allNodes = rootRef.current.querySelectorAll('*');
     const filtered = [];
     allNodes.forEach(node => {
@@ -703,19 +642,16 @@ function getScope(rootRef) {
       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
   };
@@ -733,7 +669,7 @@ const Accordion = /*#__PURE__*/react.forwardRef(function Accordion(props, forwar
     ...otherProps
   } = props;
   const [childrenHeaderHasFocus, setChildrenHeaderHasFocus] = react.useState(false);
-  const ref = react.useRef();
+  const ref = react.useRef(null);
   const scope = useScope(ref);
   const contextValue = {
     childrenHeaderHasFocus,
@@ -796,13 +732,11 @@ const AccordionHeader = /*#__PURE__*/react.forwardRef(function AccordionHeader(p
   } = props;
   const accordionContext = useAccordionContext();
   const accordionItemContext = useAccordionItemContext();
-  const ref = react.useRef();
+  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) || [];
@@ -812,23 +746,18 @@ const AccordionHeader = /*#__PURE__*/react.forwardRef(function AccordionHeader(p
   }, [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':
@@ -838,7 +767,6 @@ const AccordionHeader = /*#__PURE__*/react.forwardRef(function AccordionHeader(p
           e.preventDefault();
           break;
         }
-
       case 'ArrowUp':
       case 'ArrowDown':
       case 'Home':
@@ -847,46 +775,36 @@ const AccordionHeader = /*#__PURE__*/react.forwardRef(function AccordionHeader(p
           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
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-
+          }
 
+          // 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) {
@@ -896,19 +814,18 @@ const AccordionHeader = /*#__PURE__*/react.forwardRef(function AccordionHeader(p
       }
     }
   };
-
   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
+      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),
@@ -933,13 +850,11 @@ const AccordionBody = /*#__PURE__*/react.forwardRef(function AccordionBody(props
   } = props;
   const accordionItemContext = useAccordionItemContext();
   const accordionContext = useAccordionContext();
-  const ref = react.useRef();
+  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);
@@ -990,32 +905,41 @@ function scopeQuery$1(nodeType, props) {
   return props['data-reach-combobox-option'] === '';
 }
 
-/* eslint-disable @typescript-eslint/no-use-before-define */
+////////////////////////////////////////////////////////////////////////////////
 // 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
+// Nothing going on, waiting for the user to type or use the arrow keys
+const IDLE = 'IDLE';
 
-const SUGGESTING = 'SUGGESTING'; // The user is using the keyboard to navigate the list, not typing
+// 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 INIT = 'INIT';
 
-const CLEAR = 'CLEAR'; // User cleared the value w/ backspace, but input still has focus
+// User cleared the value w/ backspace, but input still has focus
+const CLEAR = 'CLEAR';
 
-const CLEAR_SELECTION = 'CLEAR_SELECTION'; // User is typing
+// User cleared the value w/ backspace, but input still has focus
+const CLEAR_SELECTION = 'CLEAR_SELECTION';
 
-const CHANGE = 'CHANGE'; // User is navigating w/ the keyboard
+// User is typing
+const CHANGE = 'CHANGE';
 
-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
+// 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 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';
@@ -1069,82 +993,84 @@ const stateChart = {
   }
 };
 function comboboxReducer(data, action) {
-  const nextState = { ...data,
+  const nextState = {
+    ...data,
     state: action.nextState,
     lastActionType: action.type
   };
-
   switch (action.type) {
     case INIT:
     case CHANGE:
-      return { ...nextState,
+      return {
+        ...nextState,
         text: action.text,
         navigationItem: '',
         item: ''
       };
-
     case NAVIGATE:
     case OPEN_WITH_BUTTON:
       if (action.persistSelection) {
-        return { ...nextState,
+        return {
+          ...nextState,
           navigationItem: data.item
         };
       }
-
-      return { ...nextState,
+      return {
+        ...nextState,
         navigationItem: action.item
       };
-
     case CLEAR_SELECTION:
-      return { ...nextState,
+      return {
+        ...nextState,
         navigationItem: ''
       };
-
     case CLEAR:
-      return { ...nextState,
+      return {
+        ...nextState,
         text: '',
         navigationItem: '',
         item: ''
       };
-
     case BLUR:
-      return { ...nextState,
+      return {
+        ...nextState,
         text: action.text,
         navigationItem: '',
         item: action.item
       };
-
     case CLOSE_WITH_BUTTON:
     case ESCAPE:
-      return { ...nextState,
+      return {
+        ...nextState,
         navigationItem: '',
         item: ''
       };
-
     case SELECT_WITH_CLICK:
     case SELECT_WITH_KEYBOARD:
-      return { ...nextState,
+      return {
+        ...nextState,
         text: action.text,
         item: action.item,
         navigationItem: ''
       };
-
     case FOCUS:
-      return { ...nextState,
+      return {
+        ...nextState,
         navigationItem: action.item
       };
-
     default:
       throw new Error(`Unknown action ${action.type}`);
   }
 }
 const visibleStates = [SUGGESTING, NAVIGATING];
-const isVisible = state => visibleStates.indexOf(state) >= 0; ////////////////////////////////////////////////////////////////////////////////
+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 ...
@@ -1154,34 +1080,29 @@ function useFocusManagement(lastActionType, inputRef) {
     }
   });
 }
-
 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
+  const optionsLen = optionsItems.length;
 
+  // Nothing selected, either go to start, or end
   if (index < 0 || jumpToStartOrEnd) {
     if (incr > 0) {
       // Go to start
@@ -1192,20 +1113,18 @@ function getNextItem(currentItem, key, optionsItems, autocomplete) {
     }
   } 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
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-
+  }
 
+  // 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.
-
+}
 
+// 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: {
@@ -1224,7 +1143,6 @@ function useKeyDown() {
   } = useComboBoxContext();
   return function handleKeyDown(event) {
     const optionNodes = listScope.current.queryAllNodes(scopeQuery$1);
-
     switch (event.key) {
       case 'Home':
       case 'End':
@@ -1235,14 +1153,14 @@ function useKeyDown() {
         {
           // Don't scroll the page
           event.preventDefault();
-          const optionsLen = optionNodes.length; // If the developer didn't render any options, there's no point in
+          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, {
@@ -1250,10 +1168,10 @@ function useKeyDown() {
             });
           } else {
             // When autocompletting, we'll not cycle through the list directly
-            const autocomplete = autocompletePropRef.current; // Get next selected item
+            const autocomplete = autocompletePropRef.current;
 
+            // Get next selected item
             const nextItem = getNextItem(navigationItem, event.key, optionNodes, autocomplete);
-
             if (nextItem !== null) {
               nextItem.scrollIntoView({
                 behavior: 'auto',
@@ -1270,10 +1188,8 @@ function useKeyDown() {
               });
             }
           }
-
           break;
         }
-
       case 'Escape':
         {
           if (state !== IDLE) {
@@ -1281,34 +1197,31 @@ function useKeyDown() {
           } else if (state === IDLE && text !== '') {
             if (!inputRef.current || !clearOnEscapeRef.current) {
               break;
-            } // emulate a inputRef change event, might not work in future versions of React
-
+            }
 
+            // 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
+            } = optionsRef.current[navigationItem];
 
+            // don't want to submit forms
             event.preventDefault();
             onSelect && onSelect(navigationText, navigationItem, navigationValue);
             transition(SELECT_WITH_KEYBOARD, {
@@ -1316,7 +1229,6 @@ function useKeyDown() {
               item: navigationItem
             });
           }
-
           break;
         }
     }
@@ -1335,7 +1247,6 @@ function useBlur() {
     buttonRef,
     onSelect,
     selectOnBlur // not implemented yet
-
   } = useComboBoxContext();
   return function handleBlur() {
     requestAnimationFrame(() => {
@@ -1387,22 +1298,24 @@ const Combobox = /*#__PURE__*/react.forwardRef(function Combobox({
   const optionsRef = react.useRef({});
   const listScope = react.useRef(getScope({
     current: null
-  })); // Need this to focus it
+  }));
 
+  // 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
+  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();
-  const labelIdRef = react.useRef();
+  const listboxIdRef = react.useRef(undefined);
+  const labelIdRef = react.useRef(undefined);
   const defaultData = {
     // initial state
     state: stateChart.initial,
@@ -1441,7 +1354,8 @@ const Combobox = /*#__PURE__*/react.forwardRef(function Combobox({
   }), [data, onSelect, listScope, state, transition, openOnFocus, selectOnBlur]);
   return /*#__PURE__*/jsxRuntime.jsx(ComboBoxProvider, {
     value: context,
-    children: /*#__PURE__*/jsxRuntime.jsx(Comp, { ...rest,
+    children: /*#__PURE__*/jsxRuntime.jsx(Comp, {
+      ...rest,
       as: innerAs,
       "data-reach-combobox": "",
       ref: ref,
@@ -1470,19 +1384,16 @@ const ComboboxButton = /*#__PURE__*/react.forwardRef(function ComboboxButton({
     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": "",
@@ -1529,27 +1440,31 @@ const ComboboxInput = /*#__PURE__*/react.forwardRef(function ComboboxInput({
     openOnFocus,
     optionsRef,
     labelIdRef
-  } = useComboBoxContext(); // Keep focus on the input component
+  } = useComboBoxContext();
 
-  useFocusManagement(lastActionType, inputRef); // Keep using the defaultValue until the user started interacting
+  // Keep focus on the input component
+  useFocusManagement(lastActionType, inputRef);
 
-  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.
+  // 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
+  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
+  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 {
@@ -1558,46 +1473,45 @@ const ComboboxInput = /*#__PURE__*/react.forwardRef(function ComboboxInput({
       });
     }
   };
-
   const handleKeyDown = useKeyDown();
-
   const handleFocus = () => {
     if (selectOnClick) {
       selectOnClickRef.current = true;
-    } // If we select an option with click, useFocusManagement will focus the
+    }
+    // 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
+  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
+  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
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  return /*#__PURE__*/jsxRuntime.jsx(Comp, { ...props,
+  return /*#__PURE__*/jsxRuntime.jsx(Comp, {
+    ...props,
     as: innerAs,
     "data-reach-combobox-input": "",
     ref: assignMultipleRefs(inputRef, forwardedRef),
@@ -1649,12 +1563,13 @@ const ComboboxList = /*#__PURE__*/react.forwardRef(function ComboboxList({
     labelIdRef,
     listScope
   } = useComboBoxContext();
-  const listRef = react.useRef();
+  const listRef = react.useRef(null);
   react.useEffect(() => {
     listScope.current = getScope(listRef);
   }, [listScope]);
   persistSelectionRef.current = persistSelection;
-  return /*#__PURE__*/jsxRuntime.jsx(Comp, { ...props,
+  return /*#__PURE__*/jsxRuntime.jsx(Comp, {
+    ...props,
     as: innerAs,
     ref: assignMultipleRefs(ref, listRef),
     "data-reach-combobox-list": "",
@@ -1672,21 +1587,17 @@ const ComboboxList = /*#__PURE__*/react.forwardRef(function ComboboxList({
 // 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;
 }
 
-/* eslint-disable @typescript-eslint/no-use-before-define */
 const ComboboxOption = /*#__PURE__*/react.forwardRef(function ComboboxOption({
   children,
   id: idProp,
@@ -1709,7 +1620,6 @@ const ComboboxOption = /*#__PURE__*/react.forwardRef(function ComboboxOption({
   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;
@@ -1717,7 +1627,6 @@ const ComboboxOption = /*#__PURE__*/react.forwardRef(function ComboboxOption({
       throw new Error('Missing text for <ComboboxOption />');
     }
   }
-
   const id = String(makeHash(idProp));
   react.useEffect(() => {
     const opts = optionsRef.current;
@@ -1728,10 +1637,11 @@ const ComboboxOption = /*#__PURE__*/react.forwardRef(function ComboboxOption({
     return () => {
       delete opts[id];
     };
-  }, [optionsRef, id, text, value]); // Keep updating this ref with the current
+  }, [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(() => {
@@ -1743,7 +1653,6 @@ const ComboboxOption = /*#__PURE__*/react.forwardRef(function ComboboxOption({
       }
     };
   }, []);
-
   const handleClick = () => {
     onSelect && onSelect(text, id, value);
     transition(SELECT_WITH_CLICK, {
@@ -1751,15 +1660,16 @@ const ComboboxOption = /*#__PURE__*/react.forwardRef(function ComboboxOption({
       item: id
     });
   };
-
-  return /*#__PURE__*/jsxRuntime.jsx(Comp, { ...props,
+  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
+    "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
     ,
@@ -1782,22 +1692,25 @@ const ComboboxPopover = /*#__PURE__*/react.forwardRef(function ComboboxPopover({
     isVisible
   } = useComboBoxContext();
   const handleKeyDown = useKeyDown();
-  const handleBlur = useBlur(); // Instead of conditionally rendering the popover we use the `hidden` prop
+  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,
+  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
+    hidden: hidden
+    // Allow the user to click empty space inside the popover without causing
     // to close from useBlur
     ,
     tabIndex: "-1"
@@ -1813,18 +1726,14 @@ function useFocusLock(ref, opts) {
   } = 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) {
@@ -1834,15 +1743,13 @@ function useFocusLock(ref, opts) {
           focusOnChildNode(rootEl, 0);
         }
       };
-
       document.addEventListener('focusin', listener);
       return () => {
-        document.removeEventListener('focusin', listener); // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-
+        document.removeEventListener('focusin', listener);
         focusLockStack.pop();
       };
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [enabled]);
 }
 
@@ -1891,11 +1798,15 @@ const FocusLock = function FocusLock(props) {
   });
 };
 
+// MenuRoot
+
 const menuContext = /*#__PURE__*/react.createContext(null);
 const {
   Provider: MenuProvider
 } = menuContext;
-const useMenuContext = () => react.useContext(menuContext); // MenuList
+const useMenuContext = () => react.useContext(menuContext);
+
+// MenuList
 
 const menuListContext = /*#__PURE__*/react.createContext(null);
 const MenuListProvider = menuListContext.Provider;
@@ -1910,7 +1821,7 @@ const Menu = /*#__PURE__*/react.forwardRef(function Menu(props, forwardedRef) {
     onChange: onChangeProp,
     ...otherProps
   } = props;
-  const menuListIdRef = react.useRef();
+  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) => {
@@ -1919,11 +1830,9 @@ const Menu = /*#__PURE__*/react.forwardRef(function Menu(props, forwardedRef) {
   const [offsetFn, setOffsetFn] = react.useState(undefined);
   menuListIdRef.current = react.useId();
   const isContextMenu = react.useRef(false);
-
   if (!open && offsetFn) {
     setOffsetFn(undefined);
   }
-
   const value = {
     menuListIdRef,
     openWithArrowKeyRef,
@@ -1936,10 +1845,11 @@ const Menu = /*#__PURE__*/react.forwardRef(function Menu(props, forwardedRef) {
   };
   return /*#__PURE__*/jsxRuntime.jsx(MenuProvider, {
     value: value,
-    children: /*#__PURE__*/jsxRuntime.jsx(Comp, { ...(Comp !== react.Fragment ? {
-        as: innerAs
+    children: /*#__PURE__*/jsxRuntime.jsx(Comp, {
+      ...(Comp !== react.Fragment ? {
+        as: innerAs,
+        ref: forwardedRef
       } : {}),
-      ref: forwardedRef,
       ...otherProps
     })
   });
@@ -1964,40 +1874,30 @@ const MenuButton = /*#__PURE__*/react.forwardRef(function MenuButton(props, forw
   } = 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,
@@ -2034,12 +1934,10 @@ const ContextMenuTrigger = /*#__PURE__*/react.forwardRef(function ContextMenuTri
   } = 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;
@@ -2051,7 +1949,6 @@ const ContextMenuTrigger = /*#__PURE__*/react.forwardRef(function ContextMenuTri
     }) => [mouseX - rect.x, mouseY - rect.y - reference.height]);
     e.preventDefault();
   };
-
   return /*#__PURE__*/jsxRuntime.jsx(Comp, {
     ref: forwardedRef,
     as: innerAs,
@@ -2084,7 +1981,7 @@ const MenuItem = /*#__PURE__*/react.forwardRef(function MenuItem(props, forwarde
     navigationItem,
     onNavigate
   } = useMenuListContext();
-  const ref = react.useRef();
+  const ref = react.useRef(null);
   const itemId = react.useId();
   const isActive = ref.current && ref.current === navigationItem;
   const handleSelect = wrapEvent(onSelect, e => {
@@ -2092,15 +1989,12 @@ const MenuItem = /*#__PURE__*/react.forwardRef(function MenuItem(props, forwarde
     buttonRef.current?.focus();
     e.preventDefault();
   });
-
   const handleClick = e => {
     if (!disabled) {
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       onNavigate && onNavigate(ref.current);
       handleSelect(e);
     }
   };
-
   const handleKeyDown = e => {
     switch (e.key) {
       case ' ':
@@ -2108,11 +2002,9 @@ const MenuItem = /*#__PURE__*/react.forwardRef(function MenuItem(props, forwarde
         if (!disabled) {
           handleSelect(e);
         }
-
         break;
     }
   };
-
   return /*#__PURE__*/jsxRuntime.jsx(Comp, {
     ref: assignMultipleRefs(ref, forwardedRef),
     as: innerAs,
@@ -2146,7 +2038,7 @@ const MenuList = /*#__PURE__*/react.forwardRef(function MenuList(props, forwarde
   } = props;
   const interactedOutside = react.useRef(false);
   const itemSearchStr = react.useRef('');
-  const itemSearchClearTimeout = react.useRef();
+  const itemSearchClearTimeout = react.useRef(undefined);
   const {
     menuListIdRef,
     buttonRef,
@@ -2157,20 +2049,17 @@ const MenuList = /*#__PURE__*/react.forwardRef(function MenuList(props, forwarde
   } = useMenuContext();
   const [navigationItem, setNavigationItem] = react.useState();
   const [mounted, setMounted] = react.useState(false);
-  const menuListRef = react.useRef();
+  const menuListRef = react.useRef(null);
   const scope = useScope(menuListRef);
-
   const onNavigate = el => {
     el.focus();
     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++) {
@@ -2181,10 +2070,8 @@ const MenuList = /*#__PURE__*/react.forwardRef(function MenuList(props, forwarde
           }
         } 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;
@@ -2192,12 +2079,10 @@ const MenuList = /*#__PURE__*/react.forwardRef(function MenuList(props, forwarde
           }
         }
       }
-
       if (index !== null) {
         onNavigate && onNavigate(allItems[index]);
       }
     }
-
     openWithArrowKeyRef.current = null;
     setMounted(true);
   }, [mounted, navigationItem, onNavigate, openWithArrowKeyRef, scope, defaultActiveItemValue]);
@@ -2209,7 +2094,6 @@ const MenuList = /*#__PURE__*/react.forwardRef(function MenuList(props, forwarde
         interactedOutside.current = true;
         return;
       }
-
       if (e.button === 0) {
         onChange(e, false);
       }
@@ -2218,11 +2102,9 @@ const MenuList = /*#__PURE__*/react.forwardRef(function MenuList(props, forwarde
         onChange(e, false);
       }
     }
-
     e.preventDefault();
   }, [buttonRef, isContextMenu, onChange]);
   useOnClickOutside(menuListRef, handleClickOutside, open);
-
   function handleKeyDown(e) {
     switch (e.key) {
       case 'Escape':
@@ -2230,12 +2112,10 @@ const MenuList = /*#__PURE__*/react.forwardRef(function MenuList(props, forwarde
         {
           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':
@@ -2244,47 +2124,36 @@ const MenuList = /*#__PURE__*/react.forwardRef(function MenuList(props, forwarde
         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
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-
-
+        }
+        // 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 = '';
@@ -2293,19 +2162,15 @@ const MenuList = /*#__PURE__*/react.forwardRef(function MenuList(props, forwarde
             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++) {
-              // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
               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]);
             }
@@ -2313,12 +2178,10 @@ const MenuList = /*#__PURE__*/react.forwardRef(function MenuList(props, forwarde
         }
     }
   }
-
   if (!open) {
     interactedOutside.current = false;
     return null;
   }
-
   return /*#__PURE__*/jsxRuntime.jsx(MenuListProvider, {
     value: {
       navigationItem,
@@ -2359,27 +2222,23 @@ const Portal = ({
   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", {
+    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({
+const Popper = /*#__PURE__*/react.memo(/*#__PURE__*/react.forwardRef(function Popper({
   placement = 'bottom',
   strategy = 'absolute',
   as: Comp = 'div',
@@ -2389,7 +2248,7 @@ const Popper = /*#__PURE__*/react.memo( /*#__PURE__*/react.forwardRef(function P
   modifiers = emptyModifiers,
   usePortal = false,
   style = {},
-  portalSelector = 'body',
+  portalSelector,
   distance = 0,
   skidding = 0,
   arrowPadding = 5,
@@ -2423,7 +2282,6 @@ const Popper = /*#__PURE__*/react.memo( /*#__PURE__*/react.forwardRef(function P
         modifiers: [...defaultModifiers, ...modifiers]
       });
     }
-
     return () => {
       popperEngineInstance.current && popperEngineInstance.current.destroy();
       popperEngineInstance.current = null;
@@ -2435,10 +2293,10 @@ const Popper = /*#__PURE__*/react.memo( /*#__PURE__*/react.forwardRef(function P
   const contextValue = {
     arrowRef
   };
-
   const ret = /*#__PURE__*/jsxRuntime.jsx(PopperProvider, {
     value: contextValue,
-    children: /*#__PURE__*/jsxRuntime.jsx(Comp, { ...props,
+    children: /*#__PURE__*/jsxRuntime.jsx(Comp, {
+      ...props,
       as: innerAs,
       ref: assignMultipleRefs(popperRef, forwardedRef),
       style: {
@@ -2450,14 +2308,12 @@ const Popper = /*#__PURE__*/react.memo( /*#__PURE__*/react.forwardRef(function P
       children: children
     })
   });
-
   if (usePortal) {
     return /*#__PURE__*/jsxRuntime.jsx(Portal, {
       selector: portalSelector,
       children: ret
     });
   }
-
   return ret;
 }));
 
@@ -2466,17 +2322,15 @@ const PopperArrow = /*#__PURE__*/react.forwardRef(function PopperArrow({
   ...props
 }, ref) {
   const ctx = usePopperContext();
-
   if (ctx === null) {
     return null;
   }
-
-  return /*#__PURE__*/jsxRuntime.jsx(Comp, { ...props,
+  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": ""
@@ -2495,11 +2349,9 @@ const MenuPopover = /*#__PURE__*/react.forwardRef(function MenuPopover(props, fo
     offsetFn,
     isContextMenu
   } = useMenuContext();
-
   if (!open) {
     return null;
   }
-
   return /*#__PURE__*/jsxRuntime.jsx(Popper, {
     as: as,
     innerAs: innerAs,
@@ -2548,37 +2400,32 @@ const ModalBackdrop = /*#__PURE__*/react.forwardRef(({
   disableEscapeKeyDown = false,
   ...otherProps
 }, forwardedRef) => {
-  const ref = react.useRef();
+  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.
-
+    }
 
+    // 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": "",
@@ -2589,6 +2436,8 @@ const ModalBackdrop = /*#__PURE__*/react.forwardRef(({
   });
 });
 
+// RadioGroup Component
+
 const RadioGroupContext = /*#__PURE__*/react.createContext(undefined);
 const {
   Provider: RadioGroupProvider
@@ -2605,11 +2454,9 @@ const RadioButton = /*#__PURE__*/react.forwardRef(function RadioButton(props, fo
     ...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,
@@ -2651,24 +2498,24 @@ const RadioGroup = /*#__PURE__*/react.forwardRef(function RadioGroup(props, forw
 });
 
 /* eslint-disable @typescript-eslint/ban-ts-comment */
-
 const noop = () => {
   /* noop */
 };
+const [SliderProvider, useSliderContext] = createContext('Slider');
 
-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,
+  return /*#__PURE__*/jsxRuntime.jsx(SliderInput, {
+    ...props,
     ref: forwardedRef,
     "data-reach-slider": "",
     children: /*#__PURE__*/jsxRuntime.jsxs(SliderTrack, {
@@ -2676,6 +2523,7 @@ const Slider = /*#__PURE__*/react.forwardRef(function Slider({
     })
   });
 });
+
 /**
  * @see Docs https://reach.tech/slider#slider-props
  */
@@ -2721,10 +2569,11 @@ const SliderInput = /*#__PURE__*/react.forwardRef(function SliderInput({
   children,
   ...rest
 }, forwardedRef) {
-  const touchId = react.useRef();
+  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 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);
@@ -2738,10 +2587,11 @@ const SliderInput = /*#__PURE__*/react.forwardRef(function SliderInput({
   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
+  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(() => {
@@ -2754,17 +2604,16 @@ const SliderInput = /*#__PURE__*/react.forwardRef(function SliderInput({
       min,
       max
     });
-  }, [max, min, orientation, step]); // https://www.w3.org/TR/wai-aria-practices-1.2/#slider_kbd_interaction
+  }, [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':
@@ -2772,55 +2621,50 @@ const SliderInput = /*#__PURE__*/react.forwardRef(function SliderInput({
         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!
+  };
+
+  // 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 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,
@@ -2843,33 +2687,25 @@ const SliderInput = /*#__PURE__*/react.forwardRef(function SliderInput({
   }, [onMouseMove, onMouseDown, onMouseUp, onTouchStart, onTouchEnd, onTouchMove, onPointerDown, onPointerUp]);
   const handleSlideStart = useStableLayoutCallback(event => {
     if (isRightClick(event)) return;
-
     if (disabled) {
       pointerDownRef.current = false;
       return;
-    } // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-
-
+    }
     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();
@@ -2877,12 +2713,10 @@ const SliderInput = /*#__PURE__*/react.forwardRef(function SliderInput({
   });
   const setPointerCapture = useStableLayoutCallback(event => {
     if (isRightClick(event)) return;
-
     if (disabled) {
       pointerDownRef.current = false;
       return;
     }
-
     pointerDownRef.current = true;
     sliderRef.current?.setPointerCapture(event.pointerId);
   });
@@ -2896,30 +2730,24 @@ const SliderInput = /*#__PURE__*/react.forwardRef(function SliderInput({
       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(() => {
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     const ownerDocument = getOwnerDocument(sliderRef.current);
     const touchListener = wrapEvent(appEvents.current.onTouchMove, handlePointerMove);
     const mouseListener = wrapEvent(appEvents.current.onMouseMove, handlePointerMove);
@@ -2931,24 +2759,20 @@ const SliderInput = /*#__PURE__*/react.forwardRef(function SliderInput({
     };
   }, [handlePointerMove]);
   const addEndListener = react.useCallback(() => {
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     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);
     };
@@ -2957,14 +2781,11 @@ const SliderInput = /*#__PURE__*/react.forwardRef(function SliderInput({
     // 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
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const sliderElement = sliderRef.current;
 
+    const sliderElement = sliderRef.current;
     if (!sliderElement) {
       return noop;
-    } // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-
-
+    }
     const ownerDocument = getOwnerDocument(sliderElement);
     const ownerWindow = ownerDocument.defaultView || window;
     const touchListener = wrapEvent(appEvents.current.onTouchStart, handleSlideStart);
@@ -2972,15 +2793,12 @@ const SliderInput = /*#__PURE__*/react.forwardRef(function SliderInput({
     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);
       }
@@ -3018,7 +2836,8 @@ const SliderInput = /*#__PURE__*/react.forwardRef(function SliderInput({
     trackRef: trackRef,
     rangeStyle: rangeStyle,
     updateValue: onChange,
-    children: /*#__PURE__*/jsxRuntime.jsxs(Comp, { ...rest,
+    children: /*#__PURE__*/jsxRuntime.jsxs(Comp, {
+      ...rest,
       // @ts-ignore
       as: innerAs,
       ref: assignMultipleRefs(sliderRef, forwardedRef),
@@ -3048,6 +2867,7 @@ const SliderInput = /*#__PURE__*/react.forwardRef(function SliderInput({
     })
   });
 });
+
 /**
  * @see Docs https://reach.tech/slider#sliderinput-props
  */
@@ -3072,10 +2892,12 @@ const SliderTrackImpl = /*#__PURE__*/react.forwardRef(function SliderTrack({
     trackRef
   } = useSliderContext('SliderTrack');
   return /*#__PURE__*/jsxRuntime.jsx(Comp, {
-    ref: assignMultipleRefs(trackRef, forwardedRef) // @ts-ignore
+    ref: assignMultipleRefs(trackRef, forwardedRef)
+    // @ts-ignore
     ,
     as: innerAs,
-    style: { ...style,
+    style: {
+      ...style,
       position: 'relative'
     },
     ...props,
@@ -3086,6 +2908,7 @@ const SliderTrackImpl = /*#__PURE__*/react.forwardRef(function SliderTrack({
   });
 });
 const SliderTrack = /*#__PURE__*/react.memo(SliderTrackImpl);
+
 /**
  * @see Docs https://reach.tech/slider#slidertrack-props
  */
@@ -3113,7 +2936,8 @@ const SliderRangeImpl = /*#__PURE__*/react.forwardRef(function SliderRange({
     rangeStyle
   } = useSliderContext('SliderRange');
   return /*#__PURE__*/jsxRuntime.jsx(Comp, {
-    ref: forwardedRef // @ts-ignore
+    ref: forwardedRef
+    // @ts-ignore
     ,
     as: innerAs,
     style: {
@@ -3128,13 +2952,13 @@ const SliderRangeImpl = /*#__PURE__*/react.forwardRef(function SliderRange({
   });
 });
 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
  */
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
 
 ////////////////////////////////////////////////////////////////////////////////
 
@@ -3171,39 +2995,47 @@ const SliderHandleImpl = /*#__PURE__*/react.forwardRef(function SliderHandle({
     sliderMax,
     value
   } = useSliderContext('SliderHandle');
-  return /*#__PURE__*/jsxRuntime.jsx(Comp // @ts-ignore
+  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-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
+    "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
+    "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
+    "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
+    "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
+    "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
+    "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
     ,
@@ -3231,12 +3063,12 @@ const SliderHandleImpl = /*#__PURE__*/react.forwardRef(function SliderHandle({
   });
 });
 const SliderHandle = /*#__PURE__*/react.memo(SliderHandleImpl);
+
 /**
  * `SliderRange` accepts any props that a HTML div component accepts.
  *
  * @see Docs https://reach.tech/slider#sliderhandle-props
  */
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
 
 ////////////////////////////////////////////////////////////////////////////////
 
@@ -3268,7 +3100,8 @@ const SliderMarkerImpl = /*#__PURE__*/react.forwardRef(function SliderMarker({
   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
+    ref: forwardedRef
+    // @ts-ignore
     ,
     as: innerAs,
     style: {
@@ -3290,14 +3123,17 @@ const SliderMarkerImpl = /*#__PURE__*/react.forwardRef(function SliderMarker({
   }) : 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
@@ -3306,33 +3142,26 @@ function clamp$1(val, min, max) {
  * @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,
@@ -3340,16 +3169,13 @@ function getPointerPosition(event, touchId) {
         };
       }
     }
-
     return false;
   }
-
   return {
     x: event.clientX,
     y: event.clientY
   };
 }
-
 function getNewValue(handlePosition, track, props) {
   const {
     orientation,
@@ -3357,11 +3183,9 @@ function getNewValue(handlePosition, track, props) {
     max,
     step
   } = props;
-
   if (!track || !handlePosition) {
     return null;
   }
-
   const {
     left,
     width,
@@ -3374,7 +3198,6 @@ function getNewValue(handlePosition, track, props) {
   const newValue = percentToValue(percent, min, max);
   return clamp$1(step ? roundValueToStep(newValue, step, min) : newValue, min, max);
 }
-
 function useDimensions(ref) {
   const [{
     width,
@@ -3382,21 +3205,19 @@ function useDimensions(ref) {
   }, setDimensions] = react.useState({
     width: 0,
     height: 0
-  }); // Many existing `useDimensions` type hooks will use `getBoundingClientRect`
+  });
+  // 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(() => {
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     const ownerDocument = getOwnerDocument(ref.current);
     const ownerWindow = ownerDocument.defaultView || window;
-
     if (ref.current) {
       const {
         height: _newHeight,
@@ -3404,7 +3225,6 @@ function useDimensions(ref) {
       } = ownerWindow.getComputedStyle(ref.current);
       const newHeight = parseFloat(_newHeight);
       const newWidth = parseFloat(_newWidth);
-
       if (newHeight !== height || newWidth !== width) {
         setDimensions({
           height: newHeight,
@@ -3419,10 +3239,11 @@ function useDimensions(ref) {
     height
   };
 }
-
 function valueToPercent(value, min, max) {
   return (value - min) * 100 / (max - min);
-} ////////////////////////////////////////////////////////////////////////////////
+}
+
+// Spinner Component
 
 const spinbuttonContext = /*#__PURE__*/react.createContext(null);
 const {
@@ -3448,60 +3269,45 @@ const Spinner = /*#__PURE__*/react.forwardRef(function Spinner(props, forwardedR
     ...otherProps
   } = props;
   const [spinnerHasFocus, setSpinnerHasFocus] = react.useState(false);
-  const ref = react.useRef();
-
+  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,
@@ -3536,18 +3342,16 @@ const SpinnerButton = /*#__PURE__*/react.forwardRef(function SpinnerButton(props
     ...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,
+  return /*#__PURE__*/jsxRuntime.jsx(Comp, {
+    ...otherProps,
     type: "button",
     ref: forwardedRef,
     tabIndex: -1,
@@ -3558,11 +3362,15 @@ const SpinnerButton = /*#__PURE__*/react.forwardRef(function SpinnerButton(props
   });
 });
 
+// Tabs Component
+
 const tabsContext = /*#__PURE__*/react.createContext(null);
 const {
   Provider: TabsProvider
 } = tabsContext;
-const useTabsContext = () => react.useContext(tabsContext); // TabList Component
+const useTabsContext = () => react.useContext(tabsContext);
+
+// TabList Component
 
 const tablistContext = /*#__PURE__*/react.createContext(null);
 const {
@@ -3601,15 +3409,12 @@ function scopeQuery(nodeType, props) {
 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',
@@ -3621,29 +3426,24 @@ const Tab = /*#__PURE__*/react.forwardRef(function Tab(props, forwardedRef) {
   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:
@@ -3651,9 +3451,7 @@ const Tab = /*#__PURE__*/react.forwardRef(function Tab(props, forwardedRef) {
           navigateIndex(e.key === right ? 1 : -1, false);
           break;
         }
-
       case first: // Home / End
-
       case last:
         {
           navigateIndex(e.key === first ? 0 : -1, true);
@@ -3661,18 +3459,16 @@ const Tab = /*#__PURE__*/react.forwardRef(function Tab(props, forwardedRef) {
         }
     }
   };
-
   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,
+  return /*#__PURE__*/jsxRuntime.jsx(Comp, {
+    ...otherProps,
     ref: assignMultipleRefs(ref, forwardedRef),
     "data-tab": "",
     id: tabContext.tabListId !== null && tabIndex >= 0 ? `tab-${tabContext.tabListId}-${tabIndex}` : undefined,
@@ -3694,15 +3490,13 @@ const TabList = /*#__PURE__*/react.forwardRef(function TabList(props, forwardedR
     children: childrenProps,
     ...otherProps
   } = props;
-  const ref = react.useRef();
+  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);
@@ -3710,7 +3504,6 @@ const TabList = /*#__PURE__*/react.forwardRef(function TabList(props, forwardedR
         tabsContext.setTabListId(null);
       };
     }
-
     return;
   }, [id, tabsContext, tabsContext.setTabListId]);
   const children = react.Children.map(childrenProps, (node, index) => /*#__PURE__*/react.cloneElement(node, {
@@ -3759,11 +3552,9 @@ const TabPanel = /*#__PURE__*/react.forwardRef(function TabPanel(props, forwarde
     ...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,
@@ -3780,18 +3571,15 @@ const TabPanel = /*#__PURE__*/react.forwardRef(function TabPanel(props, forwarde
 
 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
@@ -3800,45 +3588,43 @@ function createSubscription() {
 
 ////////////////////////////////////////////////////////////////////////////////
 // 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.
-
+}
 
+// 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
+}
 
+////////////////////////////////////////////////////////////////////////////////
+// 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
+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';
@@ -3857,11 +3643,9 @@ const state = {
     id: ''
   }
 };
-
 function clearContextId() {
   state.current.id = '';
 }
-
 const chart = {
   initial: Idle,
   states: {
@@ -3921,11 +3705,12 @@ const chart = {
     }
   }
 };
-
 function transition(currentState, event, payload) {
   const currentStateValue = currentState.state;
   const stateDef = chart.states[currentState.state];
-  const nextState = stateDef?.on?.[event]; // Really useful for debugging
+  const nextState = stateDef?.on?.[event];
+
+  // Really useful for debugging
   // console.log({
   //   event,
   //   state: state.current.state,
@@ -3936,27 +3721,22 @@ function transition(currentState, event, payload) {
   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,
+  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();
@@ -3981,49 +3761,41 @@ function useTooltip(childProps, childRef, tooltipProps) {
       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,
@@ -4032,7 +3804,8 @@ function useTooltip(childProps, childRef, tooltipProps) {
     ...otherTooltipProps
   } = tooltipProps;
   const tooltipId = `tooltip-${id}`;
-  return [{ ...childProps,
+  return [{
+    ...childProps,
     ref: assignMultipleRefs(childRef, anchorEl),
     ...(visible && !childProps['aria-label'] && {
       'aria-describedby': tooltipId
@@ -4066,17 +3839,17 @@ const Tooltip = /*#__PURE__*/react.forwardRef(function Tooltip(props, forwardedR
     ...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, child.ref, otherProps);
-
+  }] = 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,