@basic-ui/core 0.0.39 → 0.0.42

package/build/cjs/index.js

@@ -2,19 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _extends = require('@babel/runtime/helpers/extends');
-var _objectWithoutPropertiesLoose = require('@babel/runtime/helpers/objectWithoutPropertiesLoose');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@popperjs/core');
 var reactDom = require('react-dom');
-var ResizeObserver = require('resize-observer-polyfill');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
-var _objectWithoutPropertiesLoose__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutPropertiesLoose);
-var ResizeObserver__default = /*#__PURE__*/_interopDefaultLegacy(ResizeObserver);
 
 const accordionContext = /*#__PURE__*/react.createContext(null);
 const {
@@ -84,16 +75,43 @@ function assignMultipleRefs(...refs) {
   };
 }
 
-function wrapEvent(theirHandler, ourHandler) {
-  return (event, ...otherArgs) => {
-    const ret = theirHandler && theirHandler(event, ...otherArgs);
+function canUseDOM() {
+  return !!(typeof window !== 'undefined' && window.document && window.document.createElement);
+}
 
-    if (!event.defaultPrevented) {
-      return ourHandler(event, ...otherArgs);
+function createContext(rootName, defaultContext) {
+  const Ctx = /*#__PURE__*/react.createContext(defaultContext);
+
+  function Provider(props) {
+    const {
+      children,
+      ...context
+    } = props;
+    const value = react.useMemo(() => context, // eslint-disable-next-line react-hooks/exhaustive-deps
+    Object.values(context));
+    return /*#__PURE__*/jsxRuntime.jsx(Ctx.Provider, {
+      value: value,
+      children: children
+    });
+  }
+
+  function useContext(childName) {
+    const context = react.useContext(Ctx);
+
+    if (context) {
+      return context;
     }
 
-    return ret;
-  };
+    if (defaultContext) {
+      return defaultContext;
+    }
+
+    throw Error(`${childName} must be rendered inside of a ${rootName} component.`);
+  }
+
+  Ctx.displayName = `${rootName}Context`;
+  Provider.displayName = `${rootName}Provider`;
+  return [Provider, useContext];
 }
 
 function getCircularIndex(index, maxLength) {
@@ -104,6 +122,26 @@ function getCircularIndex(index, maxLength) {
   return (index % maxLength + maxLength) % maxLength;
 }
 
+/**
+ * Detects right clicks
+ *
+ * @param nativeEvent
+ */
+function isRightClick(nativeEvent) {
+  return 'which' in nativeEvent ? nativeEvent.which === 3 : 'button' in nativeEvent ? nativeEvent.button === 2 : false;
+}
+
+/**
+ * Get an element's owner document. Useful when components are used in iframes
+ * or other environments like dev tools.
+ *
+ * @param element
+ */
+
+function getOwnerDocument(element) {
+  return canUseDOM() ? element ? element.ownerDocument : document : null;
+}
+
 // https://twitter.com/chpwn/status/285540192096497664
 // iOS constant = 0.55
 function rubberBand(distance, dimension, constant = 0.15) {
@@ -121,21 +159,76 @@ function rubberBandClamp(min, max, delta, constant = 0.15) {
   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
+ * as a dependency.
+ *
+ * Use this over `useStableCallback` when you want the callback to be cached in
+ * `useLayoutEffect` instead of `useEffect` to deal with timing issues only when
+ * needed.
+ */
+
+function useStableLayoutCallback(callback) {
+  return createStableCallbackHook(useEnhancedEffect$2, callback);
+}
+
+function wrapEvent(theirHandler, ourHandler) {
+  return (event, ...otherArgs) => {
+    const ret = theirHandler && theirHandler(event, ...otherArgs);
+
+    if (!event.defaultPrevented) {
+      return ourHandler(event, ...otherArgs);
+    }
+
+    return ret;
+  };
+}
+
 function useControlledState(valueProp, onChangeProp, defaultValue, defaultOnChange) {
-  const isControlled = react.useRef(valueProp !== undefined);
+  const isControlled = valueProp !== undefined;
+  const wasControlled = react.useRef(isControlled);
   const [valueState, setValueState] = react.useState(defaultValue);
 
-  if (isControlled.current) {
-    if (valueProp === undefined) {
+  if (isControlled) {
+    if (wasControlled.current && process.env.NODE_ENV !== 'production') {
       console.warn('Trying to change from controlled to uncontrolled.');
-    } // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-
+    }
 
-    return [valueProp, onChangeProp, setValueState];
+    return [// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    valueProp, wrapEvent(onChangeProp, defaultOnChange(setValueState))];
   }
 
   return [// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  valueState, wrapEvent(onChangeProp, defaultOnChange(setValueState)), setValueState];
+  valueState, wrapEvent(onChangeProp, defaultOnChange(setValueState))];
 }
 
 function useChildrenCounterParent(itemsRef) {
@@ -187,11 +280,9 @@ function useFocusReturn(open, rootEl) {
   })());
   react.useEffect(() => {
     if (open) {
-      var _rootEl$current;
-
       // once opened, keep track of the element that triggered
       // the Modal opening
-      if (!previousFocusRef.current && document.activeElement instanceof HTMLElement && !((_rootEl$current = rootEl.current) != null && _rootEl$current.contains(document.activeElement))) {
+      if (!previousFocusRef.current && document.activeElement instanceof HTMLElement && !rootEl.current?.contains(document.activeElement)) {
         previousFocusRef.current = document.activeElement;
       }
 
@@ -199,7 +290,7 @@ function useFocusReturn(open, rootEl) {
       const previousElement = previousFocusRef.current;
       return () => {
         // on unmount, return focus to that element
-        if (previousElement && !(rootElement != null && rootElement.contains(document.activeElement))) {
+        if (previousElement && !rootElement?.contains(document.activeElement)) {
           previousElement.focus({
             preventScroll: true
           });
@@ -254,28 +345,27 @@ function useOnClickOutside(ref, handler, active = true) {
   }, [listener, active]);
 }
 
-function useOnKeyDown(handler, active = true) {
+function useOnKeyDown(ownerWindow, handler, active = true) {
   react.useEffect(() => {
     if (active) {
-      window.addEventListener('keydown', handler);
+      ownerWindow.addEventListener('keydown', handler);
       return () => {
-        window.removeEventListener('keydown', handler);
+        ownerWindow.removeEventListener('keydown', handler);
       };
     }
 
     return;
-  }, [active, handler]);
+  }, [ownerWindow, active, handler]);
 }
 
 // This manages transitions between states with a built in reducer to manage
 // the data that goes with those transitions.
 function useReducerMachine(chart, reducer, initialData) {
   const [reducerState, dispatch] = react.useReducer(reducer, initialData);
-
   const {
-    state
-  } = reducerState,
-        data = _objectWithoutPropertiesLoose__default['default'](reducerState, ["state"]);
+    state,
+    ...data
+  } = reducerState;
 
   const transition = (action, payload = {}) => {
     const currentState = chart.states[state];
@@ -290,43 +380,47 @@ function useReducerMachine(chart, reducer, initialData) {
       throw new Error(`Unknown action "${action}" for state "${state}"`);
     }
 
-    dispatch(_extends__default['default']({
+    dispatch({
       type: action,
-      nextState
-    }, payload));
+      nextState,
+      ...payload
+    });
   };
 
   return [state, data, transition];
 }
 
 let scrollBodyCount = 0;
-function useRemoveBodyScroll(open) {
+function useRemoveBodyScroll(open, elementRef) {
   react.useEffect(() => {
-    if (open) {
+    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
 
       let scrollBarWidth = 0;
 
       if (scrollBodyCount === 1) {
-        scrollBarWidth = window.innerWidth - document.body.clientWidth;
+        scrollBarWidth = ownerWindow.innerWidth - ownerDocument.body.clientWidth;
       }
 
-      document.body.style.overflow = 'hidden';
+      ownerDocument.body.style.overflow = 'hidden';
 
       if (scrollBarWidth > 0) {
-        document.body.style.marginRight = `${scrollBarWidth}px`;
+        ownerDocument.body.style.marginRight = `${scrollBarWidth}px`;
       }
 
       return () => {
         scrollBodyCount -= 1;
 
         if (scrollBodyCount === 0) {
-          document.body.style.overflow = '';
-          document.body.style.marginRight = '';
+          ownerDocument.body.style.overflow = '';
+          ownerDocument.body.style.marginRight = '';
         }
       };
     }
-  }, [open]);
+  }, [elementRef, open]);
 }
 
 function useThrottle(value, limit) {
@@ -354,7 +448,7 @@ function useMeasure(ref) {
   });
   react.useEffect(() => {
     if (ro.current === null) {
-      ro.current = new ResizeObserver__default['default'](entries => {
+      ro.current = new ResizeObserver(entries => {
         const entry = entries[0];
         setBounds(entry.contentRect);
       });
@@ -407,14 +501,12 @@ 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 = _extends__default['default']({}, state, {
+      const newState = { ...state,
         xVelocity,
         yVelocity,
         target: null,
         down: false
-      });
-
+      };
       return newState;
     });
   };
@@ -426,7 +518,7 @@ function gestureHandlers(set, containerRef, options = {}) {
       pageY
     } = e;
     set(state => {
-      const newState = _extends__default['default']({}, state, {
+      const newState = { ...state,
         target,
         x: pageX,
         xDelta: 0,
@@ -443,8 +535,7 @@ function gestureHandlers(set, containerRef, options = {}) {
         startTime: Date.now(),
         down: true,
         scrollLocked: false
-      });
-
+      };
       return newState;
     });
   };
@@ -490,8 +581,7 @@ 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 = _extends__default['default']({}, state, {
+      const newState = { ...state,
         xDelta,
         xDeltaPercent,
         x: pageX,
@@ -502,8 +592,7 @@ function gestureHandlers(set, containerRef, options = {}) {
         y: pageY,
         yPrev: state.y,
         yVelocity
-      });
-
+      };
       return newState;
     });
   } // Touch handlers
@@ -532,20 +621,23 @@ function gestureHandlers(set, containerRef, options = {}) {
 
     if (ensureTargetIsContainer && containerRef && e.target !== containerRef.current) {
       return;
-    }
+    } // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 
-    window.addEventListener('touchmove', handleTouchMove, {
+
+    const ownerDocument = getOwnerDocument(e.currentTarget);
+    const ownerWindow = ownerDocument.defaultView || window;
+    ownerWindow.addEventListener('touchmove', handleTouchMove, {
       passive: false
     });
-    window.addEventListener('touchend', handleTouchEnd);
-    window.addEventListener('touchcancel', handleTouchEnd);
+    ownerWindow.addEventListener('touchend', handleTouchEnd);
+    ownerWindow.addEventListener('touchcancel', handleTouchEnd);
     handleDown(e.touches.item(0));
   }
 
   function handleTouchEnd() {
-    window.removeEventListener('touchmove', handleTouchMove);
-    window.removeEventListener('touchend', handleTouchEnd);
-    window.removeEventListener('touchcancel', handleTouchEnd);
+    this.removeEventListener('touchmove', handleTouchMove);
+    this.removeEventListener('touchend', handleTouchEnd);
+    this.removeEventListener('touchcancel', handleTouchEnd);
     handleUp();
   } // Mouse handlers
 
@@ -553,18 +645,22 @@ function gestureHandlers(set, containerRef, options = {}) {
   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) {
-      window.addEventListener('mousemove', handleMove);
-      window.addEventListener('mouseup', handleMouseUp);
+      ownerWindow.addEventListener('mousemove', handleMove);
+      ownerWindow.addEventListener('mouseup', handleMouseUp);
       handleDown(e);
     }
   }
 
   function handleMouseUp() {
-    window.removeEventListener('mousemove', handleMove);
-    window.removeEventListener('mouseup', handleMouseUp);
+    this.removeEventListener('mousemove', handleMove);
+    this.removeEventListener('mouseup', handleMouseUp);
     handleUp();
   }
   /* eslint-enable @typescript-eslint/no-use-before-define */
@@ -576,7 +672,8 @@ function gestureHandlers(set, containerRef, options = {}) {
   };
 }
 const useGestureHandlers = (containerRef, onGesture, options = {}) => {
-  const state = react.useRef(_extends__default['default']({}, initialGestureHandlersState));
+  const state = react.useRef({ ...initialGestureHandlersState
+  });
 
   const set = cb => {
     state.current = cb(state.current);
@@ -630,10 +727,9 @@ const Accordion = /*#__PURE__*/react.forwardRef(function Accordion(props, forwar
   const {
     as: Comp = 'div',
     expandedIndex = -1,
-    onChange
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["as", "expandedIndex", "onChange"]);
-
+    onChange,
+    ...otherProps
+  } = props;
   const [childrenHeaderHasFocus, setChildrenHeaderHasFocus] = react.useState(false);
   const ref = react.useRef();
   const scope = useScope(ref);
@@ -646,12 +742,12 @@ const Accordion = /*#__PURE__*/react.forwardRef(function Accordion(props, forwar
   };
   return /*#__PURE__*/jsxRuntime.jsx(AccordionProvider, {
     value: contextValue,
-    children: /*#__PURE__*/jsxRuntime.jsx(Comp, _extends__default['default']({
-      ref: assignMultipleRefs(forwardedRef, ref)
-    }, otherProps, {
+    children: /*#__PURE__*/jsxRuntime.jsx(Comp, {
+      ref: assignMultipleRefs(forwardedRef, ref),
+      ...otherProps,
       "data-accordion-root": "",
       "data-children-has-focus": childrenHeaderHasFocus
-    }))
+    })
   });
 });
 
@@ -659,10 +755,9 @@ const AccordionItem = /*#__PURE__*/react.forwardRef(function AccordionItem(props
   const {
     as: Comp = react.Fragment,
     expanded = false,
-    onChange
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["as", "expanded", "onChange"]);
-
+    onChange,
+    ...otherProps
+  } = props;
   const id = react.useId();
   const headerId = id ? `accordion-header-${id}` : undefined;
   const bodyId = id ? `accordion-body-${id}` : undefined;
@@ -674,9 +769,10 @@ const AccordionItem = /*#__PURE__*/react.forwardRef(function AccordionItem(props
   };
   return /*#__PURE__*/jsxRuntime.jsx(AccordionItemProvider, {
     value: contextValue,
-    children: /*#__PURE__*/jsxRuntime.jsx(Comp, _extends__default['default']({
-      ref: forwardedRef
-    }, otherProps))
+    children: /*#__PURE__*/jsxRuntime.jsx(Comp, {
+      ref: forwardedRef,
+      ...otherProps
+    })
   });
 });
 
@@ -693,10 +789,9 @@ const AccordionHeader = /*#__PURE__*/react.forwardRef(function AccordionHeader(p
     onKeyDown,
     onClick: onClickProp,
     onFocus,
-    onBlur
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["as", "onKeyDown", "onClick", "onFocus", "onBlur"]);
-
+    onBlur,
+    ...otherProps
+  } = props;
   const accordionContext = useAccordionContext();
   const accordionItemContext = useAccordionItemContext();
   const ref = react.useRef();
@@ -813,9 +908,9 @@ const AccordionHeader = /*#__PURE__*/react.forwardRef(function AccordionHeader(p
   };
 
   const expanded = Boolean(accordionItemContext.expanded || accordionContext && accordionContext.expandedIndex === index);
-  return /*#__PURE__*/jsxRuntime.jsx(Comp, _extends__default['default']({
-    ref: assignMultipleRefs(ref, forwardedRef)
-  }, otherProps, {
+  return /*#__PURE__*/jsxRuntime.jsx(Comp, {
+    ref: assignMultipleRefs(ref, forwardedRef),
+    ...otherProps,
     id: accordionItemContext.headerId,
     "aria-controls": accordionItemContext.bodyId,
     role: "button",
@@ -826,15 +921,14 @@ const AccordionHeader = /*#__PURE__*/react.forwardRef(function AccordionHeader(p
     onBlur: wrapEvent(onBlur, handleBlur),
     onClick: onClick,
     "aria-expanded": String(expanded)
-  }));
+  });
 });
 
 const AccordionBody = /*#__PURE__*/react.forwardRef(function AccordionBody(props, forwardedRef) {
   const {
-    as: Comp = 'div'
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["as"]);
-
+    as: Comp = 'div',
+    ...otherProps
+  } = props;
   const accordionItemContext = useAccordionItemContext();
   const accordionContext = useAccordionContext();
   const ref = react.useRef();
@@ -852,15 +946,15 @@ const AccordionBody = /*#__PURE__*/react.forwardRef(function AccordionBody(props
     }
   }, [accordionContext]);
   const expanded = Boolean(accordionItemContext.expanded || accordionContext && accordionContext.expandedIndex === index);
-  return /*#__PURE__*/jsxRuntime.jsx(Comp, _extends__default['default']({
-    ref: assignMultipleRefs(forwardedRef, ref)
-  }, otherProps, {
+  return /*#__PURE__*/jsxRuntime.jsx(Comp, {
+    ref: assignMultipleRefs(forwardedRef, ref),
+    ...otherProps,
     "aria-labelledby": accordionItemContext.headerId,
     id: accordionItemContext.bodyId,
     role: "region",
     "data-accordion-body": "",
     hidden: expanded ? undefined : 'hidden'
-  }));
+  });
 });
 
 const CheckBox = /*#__PURE__*/react.forwardRef(function CheckBox(props, forwardedRef) {
@@ -868,20 +962,20 @@ const CheckBox = /*#__PURE__*/react.forwardRef(function CheckBox(props, forwarde
     as: Comp = 'input',
     checked: checkedProp,
     defaultChecked = false,
-    onChange: onChangeProp
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["as", "checked", "defaultChecked", "onChange"]);
-
+    onChange: onChangeProp,
+    ...otherProps
+  } = props;
   const [checked, onChange] = useControlledState(checkedProp, onChangeProp, defaultChecked, setValue => e => {
     setValue(e.target.checked);
   });
-  return /*#__PURE__*/jsxRuntime.jsx(Comp, _extends__default['default']({
+  return /*#__PURE__*/jsxRuntime.jsx(Comp, {
     ref: forwardedRef,
     type: "checkbox",
     checked: checked,
     "aria-checked": checked,
-    onChange: onChange
-  }, otherProps));
+    onChange: onChange,
+    ...otherProps
+  });
 });
 
 const comboboxContext = /*#__PURE__*/react.createContext(null);
@@ -894,6 +988,7 @@ 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
 
@@ -972,70 +1067,70 @@ const stateChart = {
   }
 };
 function comboboxReducer(data, action) {
-  const nextState = _extends__default['default']({}, data, {
+  const nextState = { ...data,
     state: action.nextState,
     lastActionType: action.type
-  });
+  };
 
   switch (action.type) {
     case INIT:
     case CHANGE:
-      return _extends__default['default']({}, nextState, {
+      return { ...nextState,
         text: action.text,
         navigationItem: '',
         item: ''
-      });
+      };
 
     case NAVIGATE:
     case OPEN_WITH_BUTTON:
       if (action.persistSelection) {
-        return _extends__default['default']({}, nextState, {
+        return { ...nextState,
           navigationItem: data.item
-        });
+        };
       }
 
-      return _extends__default['default']({}, nextState, {
+      return { ...nextState,
         navigationItem: action.item
-      });
+      };
 
     case CLEAR_SELECTION:
-      return _extends__default['default']({}, nextState, {
+      return { ...nextState,
         navigationItem: ''
-      });
+      };
 
     case CLEAR:
-      return _extends__default['default']({}, nextState, {
+      return { ...nextState,
         text: '',
         navigationItem: '',
         item: ''
-      });
+      };
 
     case BLUR:
-      return _extends__default['default']({}, nextState, {
+      return { ...nextState,
         text: action.text,
         navigationItem: '',
         item: action.item
-      });
+      };
 
     case CLOSE_WITH_BUTTON:
     case ESCAPE:
-      return _extends__default['default']({}, nextState, {
+      return { ...nextState,
         navigationItem: '',
         item: ''
-      });
+      };
 
     case SELECT_WITH_CLICK:
     case SELECT_WITH_KEYBOARD:
-      return _extends__default['default']({}, nextState, {
+      return { ...nextState,
         text: action.text,
         item: action.item,
         navigationItem: ''
-      });
+      };
 
     case FOCUS:
-      return _extends__default['default']({}, nextState, {
+      return { ...nextState,
         navigationItem: action.item
-      });
+      };
 
     default:
       throw new Error(`Unknown action ${action.type}`);
@@ -1234,21 +1329,19 @@ function useBlur() {
   };
 }
 
-const Combobox = /*#__PURE__*/react.forwardRef(function Combobox(_ref, ref) {
-  let {
-    // Called whenever the user selects an item from the list
-    onSelect,
-    // opens the list when the input receives focused (but only if there are
-    // items in the list)
-    openOnFocus = false,
-    // if set to true, it will select an item after blurring
-    selectOnBlur = false,
-    children,
-    as: Comp = 'div',
-    innerAs
-  } = _ref,
-      rest = _objectWithoutPropertiesLoose__default['default'](_ref, ["onSelect", "openOnFocus", "selectOnBlur", "children", "as", "innerAs"]);
-
+const Combobox = /*#__PURE__*/react.forwardRef(function Combobox({
+  // Called whenever the user selects an item from the list
+  onSelect,
+  // opens the list when the input receives focused (but only if there are
+  // items in the list)
+  openOnFocus = false,
+  // if set to true, it will select an item after blurring
+  selectOnBlur = false,
+  children,
+  as: Comp = 'div',
+  innerAs,
+  ...rest
+}, ref) {
   // We store the values of all the ComboboxOptions on this ref. This makes it
   // possible to perform the keyboard navigation from the input on the list. We
   // manipulate this array through context so that we don't have to enforce a
@@ -1310,7 +1403,7 @@ const Combobox = /*#__PURE__*/react.forwardRef(function Combobox(_ref, ref) {
   }), [data, onSelect, listScope, state, transition, openOnFocus, selectOnBlur]);
   return /*#__PURE__*/jsxRuntime.jsx(ComboBoxProvider, {
     value: context,
-    children: /*#__PURE__*/jsxRuntime.jsx(Comp, _extends__default['default']({}, rest, {
+    children: /*#__PURE__*/jsxRuntime.jsx(Comp, { ...rest,
       as: innerAs,
       "data-reach-combobox": "",
       ref: ref,
@@ -1319,19 +1412,17 @@ const Combobox = /*#__PURE__*/react.forwardRef(function Combobox(_ref, ref) {
       "aria-owns": listboxIdRef.current,
       "aria-expanded": context.isVisible,
       children: children
-    }))
+    })
   });
 });
 
-const ComboboxButton = /*#__PURE__*/react.forwardRef(function ComboboxButton(_ref, ref) {
-  let {
-    as: Comp = 'button',
-    innerAs,
-    onClick,
-    onKeyDown
-  } = _ref,
-      props = _objectWithoutPropertiesLoose__default['default'](_ref, ["as", "innerAs", "onClick", "onKeyDown"]);
-
+const ComboboxButton = /*#__PURE__*/react.forwardRef(function ComboboxButton({
+  as: Comp = 'button',
+  innerAs,
+  onClick,
+  onKeyDown,
+  ...props
+}, ref) {
   const {
     transition,
     data,
@@ -1354,7 +1445,7 @@ const ComboboxButton = /*#__PURE__*/react.forwardRef(function ComboboxButton(_re
     }
   };
 
-  return /*#__PURE__*/jsxRuntime.jsx(Comp, _extends__default['default']({
+  return /*#__PURE__*/jsxRuntime.jsx(Comp, {
     as: innerAs,
     "data-reach-combobox-button": "",
     "aria-controls": listboxIdRef.current,
@@ -1362,30 +1453,29 @@ const ComboboxButton = /*#__PURE__*/react.forwardRef(function ComboboxButton(_re
     "aria-expanded": isVisible,
     ref: assignMultipleRefs(ref, buttonRef),
     onClick: wrapEvent(onClick, handleClick),
-    onKeyDown: wrapEvent(onKeyDown, handleKeyDown)
-  }, props));
+    onKeyDown: wrapEvent(onKeyDown, handleKeyDown),
+    ...props
+  });
 });
 
-const ComboboxInput = /*#__PURE__*/react.forwardRef(function ComboboxInput(_ref, forwardedRef) {
-  let {
-    as: Comp = 'input',
-    innerAs,
-    selectOnClick = false,
-    autocomplete = true,
-    clearOnEscape = false,
-    // wrapped events
-    onClick,
-    onChange,
-    onKeyDown,
-    onBlur,
-    onFocus,
-    id: preferredId,
-    defaultValue = '',
-    // might be controlled
-    value: controlledValue
-  } = _ref,
-      props = _objectWithoutPropertiesLoose__default['default'](_ref, ["as", "innerAs", "selectOnClick", "autocomplete", "clearOnEscape", "onClick", "onChange", "onKeyDown", "onBlur", "onFocus", "id", "defaultValue", "value"]);
-
+const ComboboxInput = /*#__PURE__*/react.forwardRef(function ComboboxInput({
+  as: Comp = 'input',
+  innerAs,
+  selectOnClick = false,
+  autocomplete = true,
+  clearOnEscape = false,
+  // wrapped events
+  onClick,
+  onChange,
+  onKeyDown,
+  onBlur,
+  onFocus,
+  id: preferredId,
+  defaultValue = '',
+  // might be controlled
+  value: controlledValue,
+  ...props
+}, forwardedRef) {
   const {
     data: {
       navigationItem,
@@ -1469,7 +1559,7 @@ const ComboboxInput = /*#__PURE__*/react.forwardRef(function ComboboxInput(_ref,
       item: ''
     }); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  return /*#__PURE__*/jsxRuntime.jsx(Comp, _extends__default['default']({}, props, {
+  return /*#__PURE__*/jsxRuntime.jsx(Comp, { ...props,
     as: innerAs,
     "data-reach-combobox-input": "",
     ref: assignMultipleRefs(inputRef, forwardedRef),
@@ -1484,41 +1574,38 @@ const ComboboxInput = /*#__PURE__*/react.forwardRef(function ComboboxInput(_ref,
     "aria-autocomplete": "both",
     "aria-activedescendant": navigationItem !== '' ? navigationItem : undefined,
     autoComplete: "off"
-  }));
+  });
 });
 
-const ComboboxLabel = /*#__PURE__*/react.forwardRef(function ComboboxButton(_ref, ref) {
-  let {
-    as: Comp = 'label',
-    innerAs,
-    id: preferredId
-  } = _ref,
-      props = _objectWithoutPropertiesLoose__default['default'](_ref, ["as", "innerAs", "id"]);
-
+const ComboboxLabel = /*#__PURE__*/react.forwardRef(function ComboboxButton({
+  as: Comp = 'label',
+  innerAs,
+  id: preferredId,
+  ...props
+}, ref) {
   const {
     listboxIdRef,
     labelIdRef
   } = useComboBoxContext();
   labelIdRef.current = preferredId || labelIdRef.current;
-  return /*#__PURE__*/jsxRuntime.jsx(Comp, _extends__default['default']({
+  return /*#__PURE__*/jsxRuntime.jsx(Comp, {
     as: innerAs,
     "data-reach-combobox-label": "",
     htmlFor: listboxIdRef.current,
     id: labelIdRef.current,
-    ref: ref
-  }, props));
+    ref: ref,
+    ...props
+  });
 });
 
-const ComboboxList = /*#__PURE__*/react.forwardRef(function ComboboxList(_ref, ref) {
-  let {
-    // when true, and the list opens again, the option with a matching value will be
-    // automatically highleted.
-    persistSelection = false,
-    as: Comp = 'ul',
-    innerAs
-  } = _ref,
-      props = _objectWithoutPropertiesLoose__default['default'](_ref, ["persistSelection", "as", "innerAs"]);
-
+const ComboboxList = /*#__PURE__*/react.forwardRef(function ComboboxList({
+  // when true, and the list opens again, the option with a matching value will be
+  // automatically highleted.
+  persistSelection = false,
+  as: Comp = 'ul',
+  innerAs,
+  ...props
+}, ref) {
   const {
     persistSelectionRef,
     labelIdRef,
@@ -1529,13 +1616,13 @@ const ComboboxList = /*#__PURE__*/react.forwardRef(function ComboboxList(_ref, r
     listScope.current = getScope(listRef);
   }, [listScope]);
   persistSelectionRef.current = persistSelection;
-  return /*#__PURE__*/jsxRuntime.jsx(Comp, _extends__default['default']({}, props, {
+  return /*#__PURE__*/jsxRuntime.jsx(Comp, { ...props,
     as: innerAs,
     ref: assignMultipleRefs(ref, listRef),
     "data-reach-combobox-list": "",
     role: "listbox",
     "aria-labelledby": labelIdRef.current
-  }));
+  });
 });
 
 // We don't want to track the active descendant with indexes because nothing is
@@ -1561,18 +1648,17 @@ function makeHash(str) {
   return hash;
 }
 
-const ComboboxOption = /*#__PURE__*/react.forwardRef(function ComboboxOption(_ref, ref) {
-  let {
-    children,
-    id: idProp,
-    value: valueProp,
-    text: textProp,
-    onClick,
-    as: Comp = 'li',
-    innerAs
-  } = _ref,
-      props = _objectWithoutPropertiesLoose__default['default'](_ref, ["children", "id", "value", "text", "onClick", "as", "innerAs"]);
-
+/* eslint-disable @typescript-eslint/no-use-before-define */
+const ComboboxOption = /*#__PURE__*/react.forwardRef(function ComboboxOption({
+  children,
+  id: idProp,
+  value: valueProp,
+  text: textProp,
+  onClick,
+  as: Comp = 'li',
+  innerAs,
+  ...props
+}, ref) {
   const {
     onSelect,
     data: {
@@ -1628,7 +1714,7 @@ const ComboboxOption = /*#__PURE__*/react.forwardRef(function ComboboxOption(_re
     });
   };
 
-  return /*#__PURE__*/jsxRuntime.jsx(Comp, _extends__default['default']({}, props, {
+  return /*#__PURE__*/jsxRuntime.jsx(Comp, { ...props,
     as: innerAs,
     "data-reach-combobox-option": "",
     ref: ref,
@@ -1642,19 +1728,17 @@ const ComboboxOption = /*#__PURE__*/react.forwardRef(function ComboboxOption(_re
     tabIndex: "-1",
     onClick: wrapEvent(onClick, handleClick),
     children: children || text
-  }));
+  });
 });
 
-const ComboboxPopover = /*#__PURE__*/react.forwardRef(function ComboboxPopover(_ref, forwardedRef) {
-  let {
-    // wrapped events
-    onKeyDown,
-    onBlur,
-    as: Comp = 'div',
-    innerAs
-  } = _ref,
-      props = _objectWithoutPropertiesLoose__default['default'](_ref, ["onKeyDown", "onBlur", "as", "innerAs"]);
-
+const ComboboxPopover = /*#__PURE__*/react.forwardRef(function ComboboxPopover({
+  // wrapped events
+  onKeyDown,
+  onBlur,
+  as: Comp = 'div',
+  innerAs,
+  ...props
+}, forwardedRef) {
   const {
     popoverRef,
     isVisible
@@ -1669,7 +1753,7 @@ const ComboboxPopover = /*#__PURE__*/react.forwardRef(function ComboboxPopover(_
   // whatever).
 
   const hidden = !isVisible;
-  return /*#__PURE__*/jsxRuntime.jsx(Comp, _extends__default['default']({}, props, {
+  return /*#__PURE__*/jsxRuntime.jsx(Comp, { ...props,
     as: innerAs,
     "data-reach-combobox-popover": "",
     ref: assignMultipleRefs(popoverRef, forwardedRef),
@@ -1679,7 +1763,7 @@ const ComboboxPopover = /*#__PURE__*/react.forwardRef(function ComboboxPopover(_
     // to close from useBlur
     ,
     tabIndex: "-1"
-  }));
+  });
 });
 
 const focusLockStack = [];
@@ -1730,10 +1814,9 @@ const FocusLock = function FocusLock(props) {
     childRef,
     enabled = false,
     style = {},
-    children
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["as", "childRef", "enabled", "style", "children"]);
-
+    children,
+    ...otherProps
+  } = props;
   const lockStartRef = react.useRef(null);
   const lockEndRef = react.useRef(null);
   useFocusLock(childRef, {
@@ -1741,31 +1824,32 @@ const FocusLock = function FocusLock(props) {
     lockStartRef,
     lockEndRef
   });
-
-  const lockStyle = _extends__default['default']({
+  const lockStyle = {
     width: 1,
     height: 0,
     padding: 0,
     overflow: 'hidden',
     position: 'fixed',
     top: 1,
-    left: 1
-  }, style);
-
+    left: 1,
+    ...style
+  };
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/jsxRuntime.jsx(Comp, _extends__default['default']({
+    children: [/*#__PURE__*/jsxRuntime.jsx(Comp, {
       ref: lockStartRef,
       "data-focus-lock-start": "",
       "aria-hidden": true,
       tabIndex: 0,
-      style: lockStyle
-    }, otherProps)), children, /*#__PURE__*/jsxRuntime.jsx(Comp, _extends__default['default']({
+      style: lockStyle,
+      ...otherProps
+    }), children, /*#__PURE__*/jsxRuntime.jsx(Comp, {
       ref: lockEndRef,
       "data-focus-lock-end": "",
       "aria-hidden": true,
       tabIndex: 0,
-      style: lockStyle
-    }, otherProps))]
+      style: lockStyle,
+      ...otherProps
+    })]
   });
 };
 
@@ -1784,10 +1868,9 @@ const Menu = /*#__PURE__*/react.forwardRef(function Menu(props, forwardedRef) {
     as: Comp = react.Fragment,
     open: openProp,
     defaultOpen = false,
-    onChange: onChangeProp
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["as", "open", "defaultOpen", "onChange"]);
-
+    onChange: onChangeProp,
+    ...otherProps
+  } = props;
   const menuListIdRef = react.useRef();
   const openWithArrowKeyRef = react.useRef(null);
   const buttonRef = react.useRef(null);
@@ -1804,9 +1887,10 @@ const Menu = /*#__PURE__*/react.forwardRef(function Menu(props, forwardedRef) {
   };
   return /*#__PURE__*/jsxRuntime.jsx(MenuProvider, {
     value: value,
-    children: /*#__PURE__*/jsxRuntime.jsx(Comp, _extends__default['default']({
-      ref: forwardedRef
-    }, otherProps))
+    children: /*#__PURE__*/jsxRuntime.jsx(Comp, {
+      ref: forwardedRef,
+      ...otherProps
+    })
   });
 });
 
@@ -1816,10 +1900,9 @@ const MenuButton = /*#__PURE__*/react.forwardRef(function MenuButton(props, forw
     id: preferredId,
     onClick,
     onKeyDown,
-    disabled
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["as", "id", "onClick", "onKeyDown", "disabled"]);
-
+    disabled,
+    ...otherProps
+  } = props;
   const {
     menuListIdRef,
     openWithArrowKeyRef,
@@ -1863,7 +1946,7 @@ const MenuButton = /*#__PURE__*/react.forwardRef(function MenuButton(props, forw
     onChange && onChange(e, !open);
   };
 
-  return /*#__PURE__*/jsxRuntime.jsx(Comp, _extends__default['default']({
+  return /*#__PURE__*/jsxRuntime.jsx(Comp, {
     ref: forwardedRef,
     id: buttonId,
     role: "button",
@@ -1874,8 +1957,9 @@ const MenuButton = /*#__PURE__*/react.forwardRef(function MenuButton(props, forw
     "data-menu-button": "",
     onClick: wrapEvent(onClick, handleClick),
     onKeyDown: wrapEvent(onKeyDown, handleKeyDown),
-    disabled: disabled
-  }, otherProps));
+    disabled: disabled,
+    ...otherProps
+  });
 });
 
 const MenuItem = /*#__PURE__*/react.forwardRef(function MenuItem(props, forwardedRef) {
@@ -1884,10 +1968,9 @@ const MenuItem = /*#__PURE__*/react.forwardRef(function MenuItem(props, forwarde
     disabled,
     onSelect,
     onClick,
-    onKeyDown
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["as", "disabled", "onSelect", "onClick", "onKeyDown"]);
-
+    onKeyDown,
+    ...otherProps
+  } = props;
   const {
     onChange,
     buttonRef
@@ -1900,10 +1983,8 @@ const MenuItem = /*#__PURE__*/react.forwardRef(function MenuItem(props, forwarde
   const itemId = react.useId();
   const isActive = ref.current && ref.current === navigationItem;
   const handleSelect = wrapEvent(onSelect, e => {
-    var _buttonRef$current;
-
     onChange && onChange(e, false);
-    (_buttonRef$current = buttonRef.current) == null ? void 0 : _buttonRef$current.focus();
+    buttonRef.current?.focus();
     e.preventDefault();
   });
 
@@ -1927,7 +2008,7 @@ const MenuItem = /*#__PURE__*/react.forwardRef(function MenuItem(props, forwarde
     }
   };
 
-  return /*#__PURE__*/jsxRuntime.jsx(Comp, _extends__default['default']({
+  return /*#__PURE__*/jsxRuntime.jsx(Comp, {
     ref: assignMultipleRefs(ref, forwardedRef),
     id: disabled ? undefined : itemId,
     "data-menu-item": "",
@@ -1938,8 +2019,9 @@ const MenuItem = /*#__PURE__*/react.forwardRef(function MenuItem(props, forwarde
     onKeyDown: wrapEvent(onKeyDown, handleKeyDown),
     "data-disabled": disabled ? '' : undefined,
     "aria-disabled": disabled ? '' : undefined,
-    disabled: disabled
-  }, otherProps));
+    disabled: disabled,
+    ...otherProps
+  });
 });
 
 function queryScope(type, props) {
@@ -1948,16 +2030,13 @@ function queryScope(type, props) {
 
 const useEnhancedEffect$1 = typeof window !== 'undefined' ? react.useLayoutEffect : react.useEffect;
 const MenuList = /*#__PURE__*/react.forwardRef(function MenuList(props, forwardedRef) {
-  var _buttonRef$current3;
-
   const {
     as: Comp = 'ul',
     onKeyDown,
     id: preferredId,
-    defaultActiveItemValue
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["as", "onKeyDown", "id", "defaultActiveItemValue"]);
-
+    defaultActiveItemValue,
+    ...otherProps
+  } = props;
   const {
     menuListIdRef,
     buttonRef,
@@ -1999,9 +2078,7 @@ const MenuList = /*#__PURE__*/react.forwardRef(function MenuList(props, forwarde
     setMounted(true);
   }, [mounted, navigationItem, onNavigate, openWithArrowKeyRef, scope, defaultActiveItemValue]);
   useOnClickOutside(menuListRef, e => {
-    var _buttonRef$current;
-
-    if (e.target instanceof HTMLElement && e.target !== buttonRef.current && !((_buttonRef$current = buttonRef.current) != null && _buttonRef$current.contains(e.target))) {
+    if (e.target instanceof HTMLElement && e.target !== buttonRef.current && !buttonRef.current?.contains(e.target)) {
       onChange && onChange(e, false);
     }
 
@@ -2013,12 +2090,10 @@ const MenuList = /*#__PURE__*/react.forwardRef(function MenuList(props, forwarde
       case 'Escape':
       case 'Tab':
         {
-          var _buttonRef$current2;
-
           onChange && onChange(e, false);
           e.preventDefault(); // prevents focusing on next element, because we will be handling it
 
-          (_buttonRef$current2 = buttonRef.current) == null ? void 0 : _buttonRef$current2.focus();
+          buttonRef.current?.focus();
           break;
         }
 
@@ -2099,15 +2174,16 @@ const MenuList = /*#__PURE__*/react.forwardRef(function MenuList(props, forwarde
       navigationItem,
       onNavigate
     },
-    children: /*#__PURE__*/jsxRuntime.jsx(Comp, _extends__default['default']({
+    children: /*#__PURE__*/jsxRuntime.jsx(Comp, {
       ref: assignMultipleRefs(forwardedRef, menuListRef),
       id: menuListIdRef.current,
       role: "menu",
-      "aria-labelledby": (_buttonRef$current3 = buttonRef.current) == null ? void 0 : _buttonRef$current3.id,
+      "aria-labelledby": buttonRef.current?.id,
       "data-menu-list": "",
       tabIndex: "-1",
-      onKeyDown: wrapEvent(onKeyDown, handleKeyDown)
-    }, otherProps))
+      onKeyDown: wrapEvent(onKeyDown, handleKeyDown),
+      ...otherProps
+    })
   });
 });
 
@@ -2137,25 +2213,23 @@ const Portal = ({
 
 const useEnhancedEffect = typeof window !== 'undefined' ? react.useLayoutEffect : react.useEffect;
 const emptyModifiers = [];
-const Popper = /*#__PURE__*/react.memo( /*#__PURE__*/react.forwardRef(function Popper(_ref, forwardedRef) {
-  let {
-    placement = 'bottom',
-    strategy = 'absolute',
-    as: Comp = 'div',
-    innerAs,
-    anchorEl,
-    children,
-    modifiers = emptyModifiers,
-    usePortal = false,
-    style = {},
-    portalSelector = 'body',
-    distance = 0,
-    skidding = 0,
-    arrowPadding = 5,
-    offsetFn
-  } = _ref,
-      props = _objectWithoutPropertiesLoose__default['default'](_ref, ["placement", "strategy", "as", "innerAs", "anchorEl", "children", "modifiers", "usePortal", "style", "portalSelector", "distance", "skidding", "arrowPadding", "offsetFn"]);
-
+const Popper = /*#__PURE__*/react.memo( /*#__PURE__*/react.forwardRef(function Popper({
+  placement = 'bottom',
+  strategy = 'absolute',
+  as: Comp = 'div',
+  innerAs,
+  anchorEl,
+  children,
+  modifiers = emptyModifiers,
+  usePortal = false,
+  style = {},
+  portalSelector = 'body',
+  distance = 0,
+  skidding = 0,
+  arrowPadding = 5,
+  offsetFn,
+  ...props
+}, forwardedRef) {
   const arrowRef = react.useRef(null);
   const popperRef = react.useRef(null);
   const popperEngineInstance = react.useRef(null);
@@ -2170,7 +2244,7 @@ const Popper = /*#__PURE__*/react.memo( /*#__PURE__*/react.forwardRef(function P
     const offsetModifier = {
       name: 'offset',
       options: {
-        offset: offsetFn != null ? offsetFn : [skidding, distance]
+        offset: offsetFn ?? [skidding, distance]
       }
     };
     return [arrowModifier, offsetModifier];
@@ -2190,9 +2264,7 @@ const Popper = /*#__PURE__*/react.memo( /*#__PURE__*/react.forwardRef(function P
     };
   }, [anchorEl, modifiers, placement, strategy, defaultModifiers]);
   useEnhancedEffect(() => {
-    var _popperEngineInstance;
-
-    (_popperEngineInstance = popperEngineInstance.current) == null ? void 0 : _popperEngineInstance.forceUpdate();
+    popperEngineInstance.current?.forceUpdate();
   }, [props.hidden || props['aria-hidden']]);
   const contextValue = {
     arrowRef
@@ -2200,16 +2272,17 @@ const Popper = /*#__PURE__*/react.memo( /*#__PURE__*/react.forwardRef(function P
 
   const ret = /*#__PURE__*/jsxRuntime.jsx(PopperProvider, {
     value: contextValue,
-    children: /*#__PURE__*/jsxRuntime.jsx(Comp, _extends__default['default']({}, props, {
+    children: /*#__PURE__*/jsxRuntime.jsx(Comp, { ...props,
       as: innerAs,
       ref: assignMultipleRefs(popperRef, forwardedRef),
-      style: _extends__default['default']({
+      style: {
         position: 'fixed',
         left: -5000,
-        top: -5000
-      }, style),
+        top: -5000,
+        ...style
+      },
       children: children
-    }))
+    })
   });
 
   if (usePortal) {
@@ -2222,37 +2295,33 @@ const Popper = /*#__PURE__*/react.memo( /*#__PURE__*/react.forwardRef(function P
   return ret;
 }));
 
-const PopperArrow = /*#__PURE__*/react.forwardRef(function PopperArrow(_ref, ref) {
-  let {
-    as: Comp = 'div'
-  } = _ref,
-      props = _objectWithoutPropertiesLoose__default['default'](_ref, ["as"]);
-
+const PopperArrow = /*#__PURE__*/react.forwardRef(function PopperArrow({
+  as: Comp = 'div',
+  ...props
+}, ref) {
   const ctx = usePopperContext();
 
   if (ctx === null) {
     return null;
   }
 
-  return /*#__PURE__*/jsxRuntime.jsx(Comp, _extends__default['default']({}, 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');
       }
 
-      assignRef(ref, node);
-      assignRef(ctx.arrowRef, node);
+      assignMultipleRefs(ref, ctx.arrowRef)(node);
     },
     "data-popper-arrow": ""
-  }));
+  });
 });
 
 const MenuPopover = /*#__PURE__*/react.forwardRef(function MenuPopover(props, forwardedRef) {
   const {
-    as = 'div'
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["as"]);
-
+    as = 'div',
+    ...otherProps
+  } = props;
   const {
     buttonRef,
     open
@@ -2262,54 +2331,51 @@ const MenuPopover = /*#__PURE__*/react.forwardRef(function MenuPopover(props, fo
     return null;
   }
 
-  return /*#__PURE__*/jsxRuntime.jsx(Popper, _extends__default['default']({
+  return /*#__PURE__*/jsxRuntime.jsx(Popper, {
     as: as,
     ref: forwardedRef,
-    anchorEl: buttonRef
-  }, otherProps));
+    anchorEl: buttonRef,
+    ...otherProps
+  });
 });
 
-const Modal = /*#__PURE__*/react.forwardRef((_ref, ref) => {
-  let {
-    as: Comp = 'div',
-    children,
-    trapFocus = true,
-    style = {}
-  } = _ref,
-      otherProps = _objectWithoutPropertiesLoose__default['default'](_ref, ["as", "children", "trapFocus", "style"]);
-
+const Modal = /*#__PURE__*/react.forwardRef(({
+  as: Comp = 'div',
+  children,
+  trapFocus = true,
+  style = {},
+  ...otherProps
+}, ref) => {
   const modalRef = react.useRef(null);
   useFocusReturn(trapFocus, modalRef);
-  useRemoveBodyScroll(trapFocus);
+  useRemoveBodyScroll(trapFocus, modalRef);
   useAutoFocus(trapFocus, modalRef);
   return /*#__PURE__*/jsxRuntime.jsx(FocusLock, {
     childRef: modalRef,
     enabled: trapFocus,
-    children: /*#__PURE__*/jsxRuntime.jsx(Comp, _extends__default['default']({
+    children: /*#__PURE__*/jsxRuntime.jsx(Comp, {
       ref: assignMultipleRefs(ref, modalRef),
       "data-modal-container": "",
       role: "dialog",
       "aria-modal": "true",
       style: style,
-      tabIndex: -1
-    }, otherProps, {
+      tabIndex: -1,
+      ...otherProps,
       children: children
-    }))
+    })
   });
 });
 
-const ModalBackdrop = /*#__PURE__*/react.forwardRef((_ref, forwardedRef) => {
-  let {
-    as: Comp = 'div',
-    onClose,
-    onClick,
-    onMouseDown,
-    onKeyDown,
-    disableCloseOnClick = false,
-    disableEscapeKeyDown = false
-  } = _ref,
-      otherProps = _objectWithoutPropertiesLoose__default['default'](_ref, ["as", "onClose", "onClick", "onMouseDown", "onKeyDown", "disableCloseOnClick", "disableEscapeKeyDown"]);
-
+const ModalBackdrop = /*#__PURE__*/react.forwardRef(({
+  as: Comp = 'div',
+  onClose,
+  onClick,
+  onMouseDown,
+  onKeyDown,
+  disableCloseOnClick = false,
+  disableEscapeKeyDown = false,
+  ...otherProps
+}, forwardedRef) => {
   const ref = react.useRef();
   const mouseDownTargetRef = react.useRef(null);
 
@@ -2326,7 +2392,7 @@ const ModalBackdrop = /*#__PURE__*/react.forwardRef((_ref, forwardedRef) => {
     }
 
     mouseDownTargetRef.current = null;
-    !disableCloseOnClick && (onClose == null ? void 0 : onClose());
+    !disableCloseOnClick && onClose?.();
     e.stopPropagation();
   };
 
@@ -2336,18 +2402,19 @@ const ModalBackdrop = /*#__PURE__*/react.forwardRef((_ref, forwardedRef) => {
 
   const handleKeyDown = e => {
     if (e.key === 'Escape') {
-      !disableEscapeKeyDown && (onClose == null ? void 0 : onClose());
+      !disableEscapeKeyDown && onClose?.();
       e.stopPropagation();
     }
   };
 
-  return /*#__PURE__*/jsxRuntime.jsx(Comp, _extends__default['default']({
+  return /*#__PURE__*/jsxRuntime.jsx(Comp, {
     ref: assignMultipleRefs(ref, forwardedRef),
     "data-modal-root": "",
     onClick: wrapEvent(onClick, handleClick),
     onMouseDown: wrapEvent(onMouseDown, handleMouseDown),
-    onKeyDown: wrapEvent(onKeyDown, handleKeyDown)
-  }, otherProps));
+    onKeyDown: wrapEvent(onKeyDown, handleKeyDown),
+    ...otherProps
+  });
 });
 
 const RadioGroupContext = /*#__PURE__*/react.createContext(undefined);
@@ -2362,26 +2429,26 @@ const RadioButton = /*#__PURE__*/react.forwardRef(function RadioButton(props, fo
     value: valueProp,
     onChange: onChangeProp,
     checked: checkedProp,
-    name: nameProp
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["as", "value", "onChange", "checked", "name"]);
-
+    name: nameProp,
+    ...otherProps
+  } = props;
   const radioGroupContext = useRadioGroupContext();
 
   const handleChange = e => {
-    radioGroupContext == null ? void 0 : radioGroupContext.onChange == null ? void 0 : radioGroupContext.onChange(e, valueProp);
+    radioGroupContext?.onChange?.(e, valueProp);
   };
 
   const checked = radioGroupContext ? radioGroupContext.value === valueProp : checkedProp;
-  return /*#__PURE__*/jsxRuntime.jsx(Comp, _extends__default['default']({
+  return /*#__PURE__*/jsxRuntime.jsx(Comp, {
     ref: forwardedRef,
     type: "radio",
     checked: checked,
     "aria-checked": String(checked),
     name: radioGroupContext ? radioGroupContext.name : nameProp,
     onChange: wrapEvent(onChangeProp, handleChange),
-    value: valueProp
-  }, otherProps));
+    value: valueProp,
+    ...otherProps
+  });
 });
 
 const RadioGroup = /*#__PURE__*/react.forwardRef(function RadioGroup(props, forwardedRef) {
@@ -2390,10 +2457,9 @@ const RadioGroup = /*#__PURE__*/react.forwardRef(function RadioGroup(props, forw
     onChange: onChangeProp,
     value: valueProp,
     name: nameProp,
-    defaultValue
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["as", "onChange", "value", "name", "defaultValue"]);
-
+    defaultValue,
+    ...otherProps
+  } = props;
   const [value, onChange] = useControlledState(valueProp, onChangeProp, defaultValue, setValue => (e, value) => {
     setValue(value);
   });
@@ -2404,12 +2470,792 @@ const RadioGroup = /*#__PURE__*/react.forwardRef(function RadioGroup(props, forw
       onChange,
       name: nameProp || fallbackId
     },
-    children: /*#__PURE__*/jsxRuntime.jsx(Comp, _extends__default['default']({
+    children: /*#__PURE__*/jsxRuntime.jsx(Comp, {
       ref: forwardedRef,
-      role: "radiogroup"
-    }, otherProps))
+      role: "radiogroup",
+      ...otherProps
+    })
+  });
+});
+
+/**
+ * Welcome to @reach/slider!
+ *
+ * A UI input component where the user selects a value from within a given
+ * range. A Slider has a handle that can be moved along a track to change its
+ * value. When the user's mouse or focus is on the Slider's handle, the value
+ * can be incremented with keyboard controls.
+ *
+ * Random thoughts/notes:
+ *  - Currently testing this against the behavior of the native input range
+ *    element to get our slider on par. We'll explore animated and multi-handle
+ *    sliders next.
+ *  - We may want to research some use cases for reversed sliders in RTL
+ *    languages if that's a thing
+ *
+ * @see Docs     https://reach.tech/slider
+ * @see Source   https://github.com/reach/reach-ui/tree/main/packages/slider
+ * @see WAI-ARIA https://www.w3.org/TR/wai-aria-practices-1.2/#slider
+ * @see Example  https://github.com/Stanko/aria-progress-range-slider
+ * @see Example  http://www.oaa-accessibility.org/examplep/slider1/
+ */
+
+const noop = () => {
+  /* noop */
+};
+
+const [SliderProvider, useSliderContext] = createContext('Slider'); ////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * Slider
+ *
+ * @see Docs https://reach.tech/slider#slider
+ */
+
+const Slider = /*#__PURE__*/react.forwardRef(function Slider({
+  children,
+  ...props
+}, forwardedRef) {
+  return /*#__PURE__*/jsxRuntime.jsx(SliderInput, { ...props,
+    ref: forwardedRef,
+    "data-reach-slider": "",
+    children: /*#__PURE__*/jsxRuntime.jsxs(SliderTrack, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(SliderRange, {}), /*#__PURE__*/jsxRuntime.jsx(SliderHandle, {}), children]
+    })
+  });
+});
+/**
+ * @see Docs https://reach.tech/slider#slider-props
+ */
+
+////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * SliderInput
+ *
+ * The parent component of the slider interface. This is a lower level component
+ * if you need more control over styles or rendering the slider's inner
+ * components.
+ *
+ * @see Docs https://reach.tech/slider#sliderinput
+ */
+const SliderInput = /*#__PURE__*/react.forwardRef(function SliderInput({
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
+  'aria-valuetext': ariaValueTextProp,
+  as: Comp = 'div',
+  defaultValue,
+  disabled = false,
+  value: controlledValue,
+  getAriaLabel,
+  getAriaValueText,
+  handleAlignment = 'center',
+  max = 100,
+  min = 0,
+  name,
+  onChange: onChangeProp,
+  onKeyDown,
+  onMouseDown,
+  onMouseMove,
+  onMouseUp,
+  onPointerDown,
+  onPointerUp,
+  onTouchEnd,
+  onTouchMove,
+  onTouchStart,
+  orientation = 'horizontal',
+  step = 1,
+  children,
+  ...rest
+}, forwardedRef) {
+  const touchId = react.useRef();
+  const fallbackId = react.useId();
+  const id = rest.id || fallbackId; // Track whether or not the pointer is down without updating the component
+
+  const pointerDownRef = react.useRef(false);
+  const trackRef = react.useRef(null);
+  const handleRef = react.useRef(null);
+  const sliderRef = react.useRef(null);
+  const [hasFocus, setHasFocus] = react.useState(false);
+  const {
+    ref: x,
+    ...handleDimensions
+  } = useDimensions(handleRef);
+  const [_value, onChange] = useControlledState(controlledValue, onChangeProp, defaultValue || min, setValue => (e, v) => setValue(v));
+  const value = clamp$1(_value, min, max);
+  const trackPercent = valueToPercent(value, min, max);
+  const isVertical = orientation === 'vertical';
+  const handleSize = isVertical ? handleDimensions.height : handleDimensions.width; // TODO: Consider removing the `handleAlignment` prop
+  // We may want to use accept a `handlePosition` prop instead and let apps
+  // define their own positioning logic, similar to how we do for popovers.
+
+  const handlePosition = `calc(${trackPercent}% - ${handleAlignment === 'center' ? `${handleSize}px / 2` : `${handleSize}px * ${trackPercent * 0.01}`})`;
+  const handlePositionRef = react.useRef(handlePosition);
+  react.useLayoutEffect(() => {
+    handlePositionRef.current = handlePosition;
+  }, [handlePosition]);
+  const getNewValueFromEvent = react.useCallback(event => {
+    return getNewValue(getPointerPosition(event, touchId), trackRef.current, {
+      step,
+      orientation,
+      min,
+      max
+    });
+  }, [max, min, orientation, step]); // https://www.w3.org/TR/wai-aria-practices-1.2/#slider_kbd_interaction
+
+  const handleKeyDown = useStableLayoutCallback(event => {
+    if (disabled) {
+      return;
+    }
+
+    let newValue;
+    const tenSteps = (max - min) / 10;
+    const keyStep = step || (max - min) / 100;
+
+    switch (event.key) {
+      // Decrease the value of the slider by one step.
+      case 'ArrowLeft':
+      case 'ArrowDown':
+        newValue = value - keyStep;
+        break;
+      // Increase the value of the slider by one step
+
+      case 'ArrowRight':
+      case 'ArrowUp':
+        newValue = value + keyStep;
+        break;
+      // Decrement the slider by an amount larger than the step change made by
+      // `ArrowDown`.
+
+      case 'PageDown':
+        newValue = value - tenSteps;
+        break;
+      // Increment the slider by an amount larger than the step change made by
+      // `ArrowUp`.
+
+      case 'PageUp':
+        newValue = value + tenSteps;
+        break;
+      // Set the slider to the first allowed value in its range.
+
+      case 'Home':
+        newValue = min;
+        break;
+      // Set the slider to the last allowed value in its range.
+
+      case 'End':
+        newValue = max;
+        break;
+
+      default:
+        return;
+    }
+
+    newValue = clamp$1(step ? roundValueToStep(newValue, step, min) : newValue, min, max);
+    onChange(event, newValue);
+  });
+  const ariaValueText = getAriaValueText ? getAriaValueText(value) : ariaValueTextProp;
+  const rangeStyle = {
+    [isVertical ? 'height' : 'width']: `${trackPercent}%`
+  }; // Slide events!
+  // We will try to use pointer events if they are supported to leverage
+  // setPointerCapture and releasePointerCapture. We'll fall back to separate
+  // mouse and touch events.
+  // TODO: This could be more concise
+
+  const removeMoveEvents = react.useRef(noop);
+  const removeStartEvents = react.useRef(noop);
+  const removeEndEvents = react.useRef(noop); // Store our event handlers in refs so we aren't attaching/detaching events
+  // on every render if the user doesn't useCallback
+
+  const appEvents = react.useRef({
+    onMouseMove,
+    onMouseDown,
+    onMouseUp,
+    onTouchStart,
+    onTouchEnd,
+    onTouchMove,
+    onPointerDown,
+    onPointerUp
+  });
+  react.useLayoutEffect(() => {
+    appEvents.current.onMouseMove = onMouseMove;
+    appEvents.current.onMouseDown = onMouseDown;
+    appEvents.current.onMouseUp = onMouseUp;
+    appEvents.current.onTouchStart = onTouchStart;
+    appEvents.current.onTouchEnd = onTouchEnd;
+    appEvents.current.onTouchMove = onTouchMove;
+    appEvents.current.onPointerDown = onPointerDown;
+    appEvents.current.onPointerUp = onPointerUp;
+  }, [onMouseMove, onMouseDown, onMouseUp, onTouchStart, onTouchEnd, onTouchMove, onPointerDown, onPointerUp]);
+  const handleSlideStart = useStableLayoutCallback(event => {
+    if (isRightClick(event)) return;
+
+    if (disabled) {
+      pointerDownRef.current = false;
+      return;
+    } // 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();
+    removeEndEvents.current = addEndListener();
+  });
+  const setPointerCapture = useStableLayoutCallback(event => {
+    if (isRightClick(event)) return;
+
+    if (disabled) {
+      pointerDownRef.current = false;
+      return;
+    }
+
+    pointerDownRef.current = true;
+    sliderRef.current?.setPointerCapture(event.pointerId);
+  });
+  const releasePointerCapture = useStableLayoutCallback(event => {
+    if (isRightClick(event)) return;
+    sliderRef.current?.releasePointerCapture(event.pointerId);
+    pointerDownRef.current = false;
+  });
+  const handlePointerMove = useStableLayoutCallback(event => {
+    if (disabled || !pointerDownRef.current) {
+      pointerDownRef.current = false;
+      return;
+    }
+
+    const newValue = getNewValueFromEvent(event);
+
+    if (newValue == null) {
+      return;
+    }
+
+    onChange?.(event, newValue);
+  });
+  const handleSlideStop = useStableLayoutCallback(event => {
+    if (isRightClick(event)) return;
+    pointerDownRef.current = false;
+    const newValue = getNewValueFromEvent(event);
+
+    if (newValue == null) {
+      return;
+    }
+
+    touchId.current = undefined;
+    removeMoveEvents.current();
+    removeEndEvents.current();
+  });
+  const addMoveListener = react.useCallback(() => {
+    // 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);
+    ownerDocument.addEventListener('touchmove', touchListener);
+    ownerDocument.addEventListener('mousemove', mouseListener);
+    return () => {
+      ownerDocument.removeEventListener('touchmove', touchListener);
+      ownerDocument.removeEventListener('mousemove', mouseListener);
+    };
+  }, [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);
+    };
+  }, [handleSlideStop, releasePointerCapture]);
+  const addStartListener = react.useCallback(() => {
+    // e.preventDefault is ignored by React's synthetic touchStart event, so
+    // we attach the listener directly to the DOM node
+    // https://github.com/facebook/react/issues/9809#issuecomment-413978405
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    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);
+    const mouseListener = wrapEvent(appEvents.current.onMouseDown, handleSlideStart);
+    const pointerListener = wrapEvent(appEvents.current.onPointerDown, setPointerCapture);
+    sliderElement.addEventListener('touchstart', touchListener);
+    sliderElement.addEventListener('mousedown', mouseListener);
+
+    if ('PointerEvent' in ownerWindow) {
+      sliderElement.addEventListener('pointerdown', pointerListener);
+    }
+
+    return () => {
+      sliderElement.removeEventListener('touchstart', touchListener);
+      sliderElement.removeEventListener('mousedown', mouseListener);
+
+      if ('PointerEvent' in ownerWindow) {
+        sliderElement.removeEventListener('pointerdown', pointerListener);
+      }
+    };
+  }, [setPointerCapture, handleSlideStart]);
+  react.useEffect(() => {
+    removeStartEvents.current = addStartListener();
+    return () => {
+      removeStartEvents.current();
+      removeEndEvents.current();
+      removeMoveEvents.current();
+    };
+  }, [addStartListener]);
+  const inputFallbackId = react.useId();
+  const inputId = id || inputFallbackId;
+  return /*#__PURE__*/jsxRuntime.jsx(SliderProvider, {
+    ariaLabel: getAriaLabel ? getAriaLabel(value) : ariaLabel,
+    ariaLabelledBy: ariaLabelledBy,
+    ariaValueText: ariaValueText,
+    handleDimensions: handleDimensions,
+    handleKeyDown: handleKeyDown,
+    handlePosition: handlePosition,
+    handleRef: handleRef,
+    hasFocus: hasFocus,
+    onKeyDown: onKeyDown,
+    setHasFocus: setHasFocus,
+    sliderId: id,
+    sliderMax: max,
+    sliderMin: min,
+    value: value,
+    disabled: !!disabled,
+    isVertical: isVertical,
+    orientation: orientation,
+    trackPercent: trackPercent,
+    trackRef: trackRef,
+    rangeStyle: rangeStyle,
+    updateValue: onChange,
+    children: /*#__PURE__*/jsxRuntime.jsxs(Comp, { ...rest,
+      ref: assignMultipleRefs(sliderRef, forwardedRef),
+      "data-reach-slider-input": "",
+      "data-disabled": disabled ? '' : undefined,
+      "data-orientation": orientation,
+      tabIndex: -1,
+      children: [typeof children === 'function' ? children({
+        hasFocus,
+        id,
+        max,
+        min,
+        value,
+        ariaValueText
+      }) : children, name &&
+      /*#__PURE__*/
+      // If the slider is used in a form we'll need an input field to
+      // capture the value. We'll assume this when the component is given a
+      // form field name (A `name` prop doesn't really make sense in any
+      // other context).
+      jsxRuntime.jsx("input", {
+        type: "hidden",
+        value: value,
+        name: name,
+        id: inputId
+      })]
+    })
+  });
+});
+/**
+ * @see Docs https://reach.tech/slider#sliderinput-props
+ */
+
+////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * SliderTrack
+ *
+ * @see Docs https://reach.tech/slider#slidertrack
+ */
+const SliderTrackImpl = /*#__PURE__*/react.forwardRef(function SliderTrack({
+  as: Comp = 'div',
+  children,
+  style = {},
+  ...props
+}, forwardedRef) {
+  const {
+    disabled,
+    orientation,
+    trackRef
+  } = useSliderContext('SliderTrack');
+  return /*#__PURE__*/jsxRuntime.jsx(Comp, {
+    ref: assignMultipleRefs(trackRef, forwardedRef),
+    style: { ...style,
+      position: 'relative'
+    },
+    ...props,
+    "data-reach-slider-track": "",
+    "data-disabled": disabled ? '' : undefined,
+    "data-orientation": orientation,
+    children: children
+  });
+});
+const SliderTrack = /*#__PURE__*/react.memo(SliderTrackImpl);
+/**
+ * @see Docs https://reach.tech/slider#slidertrack-props
+ */
+
+////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * SliderRange
+ *
+ * The (typically) highlighted portion of the track that represents the space
+ * between the slider's `min` value and its current value.
+ *
+ * @see Docs https://reach.tech/slider#sliderrange
+ */
+const SliderRangeImpl = /*#__PURE__*/react.forwardRef(function SliderRange({
+  as: Comp = 'div',
+  children,
+  style = {},
+  ...props
+}, forwardedRef) {
+  const {
+    disabled,
+    orientation,
+    rangeStyle
+  } = useSliderContext('SliderRange');
+  return /*#__PURE__*/jsxRuntime.jsx(Comp, {
+    ref: forwardedRef,
+    style: {
+      position: 'absolute',
+      ...rangeStyle,
+      ...style
+    },
+    ...props,
+    "data-reach-slider-range": "",
+    "data-disabled": disabled ? '' : undefined,
+    "data-orientation": orientation
   });
 });
+const SliderRange = /*#__PURE__*/react.memo(SliderRangeImpl);
+/**
+ * `SliderRange` accepts any props that a HTML div component accepts.
+ * `SliderRange` will not accept or render any children.
+ *
+ * @see Docs https://reach.tech/slider#sliderrange-props
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+
+////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * SliderHandle
+ *
+ * The handle that the user drags along the track to set the slider value.
+ *
+ * @see Docs https://reach.tech/slider#sliderhandle
+ */
+const SliderHandleImpl = /*#__PURE__*/react.forwardRef(function SliderHandle({
+  // min,
+  // max,
+  as: Comp = 'div',
+  onBlur,
+  onFocus,
+  style = {},
+  onKeyDown,
+  ...props
+}, forwardedRef) {
+  const {
+    ariaLabel,
+    ariaLabelledBy,
+    ariaValueText,
+    disabled,
+    handlePosition,
+    handleRef,
+    isVertical,
+    handleKeyDown,
+    orientation,
+    setHasFocus,
+    sliderMin,
+    sliderMax,
+    value
+  } = useSliderContext('SliderHandle');
+  return /*#__PURE__*/jsxRuntime.jsx(Comp, {
+    "aria-disabled": disabled || undefined // If the slider has a visible label, it is referenced by
+    // `aria-labelledby` on the slider element. Otherwise, the slider
+    // element has a label provided by `aria-label`.
+    // https://www.w3.org/TR/wai-aria-practices-1.2/#slider_roles_states_props
+    ,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabel ? undefined : ariaLabelledBy // If the slider is vertically oriented, it has `aria-orientation` set
+    // to vertical. The default value of `aria-orientation` for a slider is
+    // horizontal.
+    // https://www.w3.org/TR/wai-aria-practices-1.2/#slider_roles_states_props
+    ,
+    "aria-orientation": orientation // The slider element has the `aria-valuemax` property set to a decimal
+    // value representing the maximum allowed value of the slider.
+    // https://www.w3.org/TR/wai-aria-practices-1.2/#slider_roles_states_props
+    ,
+    "aria-valuemax": sliderMax // The slider element has the `aria-valuemin` property set to a decimal
+    // value representing the minimum allowed value of the slider.
+    // https://www.w3.org/TR/wai-aria-practices-1.2/#slider_roles_states_props
+    ,
+    "aria-valuemin": sliderMin // The slider element has the `aria-valuenow` property set to a decimal
+    // value representing the current value of the slider.
+    // https://www.w3.org/TR/wai-aria-practices-1.2/#slider_roles_states_props
+    ,
+    "aria-valuenow": value // If the value of `aria-valuenow` is not user-friendly, e.g., the day
+    // of the week is represented by a number, the `aria-valuetext` property
+    // is set to a string that makes the slider value understandable, e.g.,
+    // "Monday".
+    // https://www.w3.org/TR/wai-aria-practices-1.2/#slider_roles_states_props
+    ,
+    "aria-valuetext": ariaValueText // The element serving as the focusable slider control has role
+    // `slider`.
+    // https://www.w3.org/TR/wai-aria-practices-1.2/#slider_roles_states_props
+    ,
+    role: "slider",
+    tabIndex: disabled ? -1 : 0,
+    ...props,
+    "data-reach-slider-handle": "",
+    ref: assignMultipleRefs(handleRef, forwardedRef),
+    onBlur: wrapEvent(onBlur, () => {
+      setHasFocus(false);
+    }),
+    onFocus: wrapEvent(onFocus, () => {
+      setHasFocus(true);
+    }),
+    onKeyDown: wrapEvent(onKeyDown, handleKeyDown),
+    style: {
+      position: 'absolute',
+      ...(isVertical ? {
+        bottom: handlePosition
+      } : {
+        left: handlePosition
+      }),
+      ...style
+    }
+  });
+});
+const SliderHandle = /*#__PURE__*/react.memo(SliderHandleImpl);
+/**
+ * `SliderRange` accepts any props that a HTML div component accepts.
+ *
+ * @see Docs https://reach.tech/slider#sliderhandle-props
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+
+////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * SliderMarker
+ *
+ * A fixed value marker. These can be used to illustrate a range of steps or
+ * highlight important points along the slider track.
+ *
+ * @see Docs https://reach.tech/slider#slidermarker
+ */
+const SliderMarkerImpl = /*#__PURE__*/react.forwardRef(function SliderMarker({
+  as: Comp = 'div',
+  children,
+  style = {},
+  value,
+  ...props
+}, forwardedRef) {
+  const {
+    disabled,
+    isVertical,
+    orientation,
+    sliderMin,
+    sliderMax,
+    value: sliderValue
+  } = useSliderContext('SliderMarker');
+  const inRange = !(value < sliderMin || value > sliderMax);
+  const absoluteStartPosition = `${valueToPercent(value, sliderMin, sliderMax)}%`;
+  const state = value < sliderValue ? 'under-value' : value === sliderValue ? 'at-value' : 'over-value';
+  return inRange ? /*#__PURE__*/jsxRuntime.jsx(Comp, {
+    ref: forwardedRef,
+    style: {
+      position: 'absolute',
+      ...(isVertical ? {
+        bottom: absoluteStartPosition
+      } : {
+        left: absoluteStartPosition
+      }),
+      ...style
+    },
+    ...props,
+    "data-reach-slider-marker": "",
+    "data-disabled": disabled ? '' : undefined,
+    "data-orientation": orientation,
+    "data-state": state,
+    "data-value": value,
+    children: children
+  }) : null;
+});
+const SliderMarker = /*#__PURE__*/react.memo(SliderMarkerImpl);
+/**
+ * @see Docs https://reach.tech/slider#slidermarker-props
+ */
+
+////////////////////////////////////////////////////////////////////////////////
+function clamp$1(val, min, max) {
+  return val > max ? max : val < min ? min : val;
+}
+/**
+ * This handles the case when num is very small (0.00000001), js will turn
+ * this into 1e-8. When num is bigger than 1 or less than -1 it won't get
+ * converted to this notation so it's fine.
+ *
+ * @param num
+ * @see https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Slider/Slider.js#L69
+ */
+
+
+function getDecimalPrecision(num) {
+  if (Math.abs(num) < 1) {
+    const parts = num.toExponential().split('e-');
+    const matissaDecimalPart = parts[0].split('.')[1];
+    return (matissaDecimalPart ? matissaDecimalPart.length : 0) + parseInt(parts[1], 10);
+  }
+
+  const decimalPart = num.toString().split('.')[1];
+  return decimalPart ? decimalPart.length : 0;
+}
+
+function percentToValue(percent, min, max) {
+  return (max - min) * percent + min;
+}
+
+function roundValueToStep(value, step, min) {
+  const nearest = Math.round((value - min) / step) * step + min;
+  return Number(nearest.toFixed(getDecimalPrecision(step)));
+}
+
+function getPointerPosition(event, touchId) {
+  if (touchId.current !== undefined && event.changedTouches) {
+    for (let i = 0; i < event.changedTouches.length; i += 1) {
+      const touch = event.changedTouches[i];
+
+      if (touch.identifier === touchId.current) {
+        return {
+          x: touch.clientX,
+          y: touch.clientY
+        };
+      }
+    }
+
+    return false;
+  }
+
+  return {
+    x: event.clientX,
+    y: event.clientY
+  };
+}
+
+function getNewValue(handlePosition, track, props) {
+  const {
+    orientation,
+    min,
+    max,
+    step
+  } = props;
+
+  if (!track || !handlePosition) {
+    return null;
+  }
+
+  const {
+    left,
+    width,
+    bottom,
+    height
+  } = track.getBoundingClientRect();
+  const isVertical = orientation === 'vertical';
+  const diff = isVertical ? bottom - handlePosition.y : handlePosition.x - left;
+  const percent = diff / (isVertical ? height : width);
+  const newValue = percentToValue(percent, min, max);
+  return clamp$1(step ? roundValueToStep(newValue, step, min) : newValue, min, max);
+}
+
+function useDimensions(ref) {
+  const [{
+    width,
+    height
+  }, setDimensions] = react.useState({
+    width: 0,
+    height: 0
+  }); // Many existing `useDimensions` type hooks will use `getBoundingClientRect`
+  // getBoundingClientRect does not work here when borders are applied.
+  // getComputedStyle is not as performant so we may want to create a utility to
+  // check for any conflicts with box sizing first and only use
+  // `getComputedStyle` if neccessary.
+
+  /* const { width, height } = ref.current
+    ? ref.current.getBoundingClientRect()
+    : 0; */
+
+  react.useLayoutEffect(() => {
+    // 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,
+        width: _newWidth
+      } = ownerWindow.getComputedStyle(ref.current);
+      const newHeight = parseFloat(_newHeight);
+      const newWidth = parseFloat(_newWidth);
+
+      if (newHeight !== height || newWidth !== width) {
+        setDimensions({
+          height: newHeight,
+          width: newWidth
+        });
+      }
+    }
+  }, [ref, width, height]);
+  return {
+    ref,
+    width,
+    height
+  };
+}
+
+function valueToPercent(value, min, max) {
+  return (value - min) * 100 / (max - min);
+} ////////////////////////////////////////////////////////////////////////////////
 
 const spinbuttonContext = /*#__PURE__*/react.createContext(null);
 const {
@@ -2431,10 +3277,9 @@ const Spinner = /*#__PURE__*/react.forwardRef(function Spinner(props, forwardedR
     onChange,
     onKeyDown,
     onBlur,
-    onFocus
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["as", "minValue", "maxValue", "stepSize", "value", "onChange", "onKeyDown", "onBlur", "onFocus"]);
-
+    onFocus,
+    ...otherProps
+  } = props;
   const [spinnerHasFocus, setSpinnerHasFocus] = react.useState(false);
   const ref = react.useRef();
 
@@ -2500,7 +3345,7 @@ const Spinner = /*#__PURE__*/react.forwardRef(function Spinner(props, forwardedR
       clamp: clamp$1,
       spinnerHasFocus
     },
-    children: /*#__PURE__*/jsxRuntime.jsx(Comp, _extends__default['default']({
+    children: /*#__PURE__*/jsxRuntime.jsx(Comp, {
       ref: assignMultipleRefs(forwardedRef, ref),
       "data-spinner-root": "",
       role: "spinbutton",
@@ -2510,8 +3355,9 @@ const Spinner = /*#__PURE__*/react.forwardRef(function Spinner(props, forwardedR
       tabIndex: 0,
       onKeyDown: wrapEvent(onKeyDown, handleKeyDown),
       onFocus: wrapEvent(onFocus, handleFocus),
-      onBlur: wrapEvent(onBlur, handleBlur)
-    }, otherProps))
+      onBlur: wrapEvent(onBlur, handleBlur),
+      ...otherProps
+    })
   });
 });
 
@@ -2519,10 +3365,9 @@ const SpinnerButton = /*#__PURE__*/react.forwardRef(function SpinnerButton(props
   const {
     as: Comp = 'button',
     type,
-    onClick
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["as", "type", "onClick"]);
-
+    onClick,
+    ...otherProps
+  } = props;
   const spinnerContext = useSpinnerContext();
 
   if (!spinnerContext) {
@@ -2535,7 +3380,7 @@ const SpinnerButton = /*#__PURE__*/react.forwardRef(function SpinnerButton(props
   };
 
   const disabled = type === 'next' ? spinnerContext.value + 1 > spinnerContext.maxValue : spinnerContext.value - 1 < spinnerContext.minValue;
-  return /*#__PURE__*/jsxRuntime.jsx(Comp, _extends__default['default']({}, otherProps, {
+  return /*#__PURE__*/jsxRuntime.jsx(Comp, { ...otherProps,
     type: "button",
     ref: forwardedRef,
     tabIndex: -1,
@@ -2543,7 +3388,7 @@ const SpinnerButton = /*#__PURE__*/react.forwardRef(function SpinnerButton(props
     "data-spinner-has-focus": spinnerContext.spinnerHasFocus ? '' : undefined,
     disabled: disabled,
     onClick: wrapEvent(onClick, handleClick)
-  }));
+  });
 });
 
 const tabsContext = /*#__PURE__*/react.createContext(null);
@@ -2563,10 +3408,9 @@ const Tabs = /*#__PURE__*/react.forwardRef(function Tabs(props, forwardedRef) {
     as: Comp = react.Fragment,
     index: indexProp,
     onChange: onChangeProp,
-    defaultIndex = 0
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["as", "index", "onChange", "defaultIndex"]);
-
+    defaultIndex = 0,
+    ...otherProps
+  } = props;
   const [index, onChange] = useControlledState(indexProp, onChangeProp, defaultIndex, setState => (e, idx) => setState(idx));
   const [tabListId, setTabListId] = react.useState(null);
   return /*#__PURE__*/jsxRuntime.jsx(TabsProvider, {
@@ -2576,9 +3420,10 @@ const Tabs = /*#__PURE__*/react.forwardRef(function Tabs(props, forwardedRef) {
       tabListId,
       setTabListId
     },
-    children: /*#__PURE__*/jsxRuntime.jsx(Comp, _extends__default['default']({
-      ref: forwardedRef
-    }, otherProps))
+    children: /*#__PURE__*/jsxRuntime.jsx(Comp, {
+      ref: forwardedRef,
+      ...otherProps
+    })
   });
 });
 
@@ -2599,15 +3444,13 @@ function getNextIndex(desiredIndex, delta, allTabs) {
 }
 
 const Tab = /*#__PURE__*/react.forwardRef(function Tab(props, forwardedRef) {
-  const _ref = props,
-        {
+  const {
     as: Comp = 'button',
     onKeyDown,
     onClick,
-    index: tabIndex = -1
-  } = _ref,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](_ref, ["as", "onKeyDown", "onClick", "index"]);
-
+    index: tabIndex = -1,
+    ...otherProps
+  } = props;
   const tabContext = useTabsContext();
   const tabListContext = useTabListContext();
   const ref = react.useRef(undefined);
@@ -2662,7 +3505,7 @@ const Tab = /*#__PURE__*/react.forwardRef(function Tab(props, forwardedRef) {
   };
 
   const isSelected = tabIndex === tabContext.currentIndex;
-  return /*#__PURE__*/jsxRuntime.jsx(Comp, _extends__default['default']({}, otherProps, {
+  return /*#__PURE__*/jsxRuntime.jsx(Comp, { ...otherProps,
     ref: assignMultipleRefs(ref, forwardedRef),
     "data-tab": "",
     id: tabContext.tabListId !== null && tabIndex >= 0 ? `tab-${tabContext.tabListId}-${tabIndex}` : undefined,
@@ -2673,7 +3516,7 @@ const Tab = /*#__PURE__*/react.forwardRef(function Tab(props, forwardedRef) {
     selected: isSelected,
     onKeyDown: wrapEvent(onKeyDown, handleKeyDown),
     onClick: wrapEvent(onClick, handleClick)
-  }));
+  });
 });
 
 const TabList = /*#__PURE__*/react.forwardRef(function TabList(props, forwardedRef) {
@@ -2681,10 +3524,9 @@ const TabList = /*#__PURE__*/react.forwardRef(function TabList(props, forwardedR
     as: Comp = 'div',
     manualActivation = false,
     vertical = false,
-    children: childrenProps
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["as", "manualActivation", "vertical", "children"]);
-
+    children: childrenProps,
+    ...otherProps
+  } = props;
   const ref = react.useRef();
   const tabsScope = useScope(ref);
   const tabsContext = useTabsContext();
@@ -2713,13 +3555,13 @@ const TabList = /*#__PURE__*/react.forwardRef(function TabList(props, forwardedR
       manualActivation,
       vertical
     },
-    children: /*#__PURE__*/jsxRuntime.jsx(Comp, _extends__default['default']({
+    children: /*#__PURE__*/jsxRuntime.jsx(Comp, {
       ref: assignMultipleRefs(forwardedRef, ref),
       "data-tab-list": "",
-      role: "tablist"
-    }, otherProps, {
+      role: "tablist",
+      ...otherProps,
       children: children
-    }))
+    })
   });
 });
 
@@ -2727,31 +3569,28 @@ const TabPanels = /*#__PURE__*/react.forwardRef(function TabPanels(props, forwar
   const {
     as: Comp = react.Fragment,
     children: childrenProps,
-    lazy
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["as", "children", "lazy"]);
-
+    lazy,
+    ...otherProps
+  } = props;
   const children = react.Children.map(childrenProps, (node, index) => /*#__PURE__*/react.cloneElement(node, {
     index,
     lazy
   }));
-  return /*#__PURE__*/jsxRuntime.jsx(Comp, _extends__default['default']({
-    ref: forwardedRef
-  }, otherProps, {
+  return /*#__PURE__*/jsxRuntime.jsx(Comp, {
+    ref: forwardedRef,
+    ...otherProps,
     children: children
-  }));
+  });
 });
 
 const TabPanel = /*#__PURE__*/react.forwardRef(function TabPanel(props, forwardedRef) {
-  const _ref = props,
-        {
+  const {
     as: Comp = 'div',
     index,
     lazy = false,
-    children
-  } = _ref,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](_ref, ["as", "index", "lazy", "children"]);
-
+    children,
+    ...otherProps
+  } = props;
   const tabsContext = useTabsContext();
 
   if (!tabsContext) {
@@ -2759,17 +3598,17 @@ const TabPanel = /*#__PURE__*/react.forwardRef(function TabPanel(props, forwarde
   }
 
   const isSelected = tabsContext.currentIndex === index;
-  return /*#__PURE__*/jsxRuntime.jsx(Comp, _extends__default['default']({
+  return /*#__PURE__*/jsxRuntime.jsx(Comp, {
     ref: forwardedRef,
     "data-tab-panel": "",
     role: "tabpanel",
     id: tabsContext.tabListId !== null ? `tabpanel-${tabsContext.tabListId}-${index}` : undefined,
     "aria-labelledby": tabsContext.tabListId !== null ? `tab-${tabsContext.tabListId}-${index}` : undefined,
     hidden: isSelected ? undefined : 'hidden',
-    tabIndex: 0
-  }, otherProps, {
+    tabIndex: 0,
+    ...otherProps,
     children: (isSelected || !lazy) && children
-  }));
+  });
 });
 
 function createSubscription() {
@@ -2799,26 +3638,26 @@ function createSubscription() {
 let restTimeout;
 
 function startRestTimer() {
-  window.clearTimeout(restTimeout);
-  restTimeout = window.setTimeout(() => {
+  clearTimeout(restTimeout);
+  restTimeout = setTimeout(() => {
     send(Rest, undefined);
   }, 200);
 }
 
 function clearRestTimer() {
-  window.clearTimeout(restTimeout);
+  clearTimeout(restTimeout);
 } // Manages the delay to hide the tooltip after rest leaves.
 
 
 let leavingVisibleTimer;
 
 function startLeavingVisibleTimer() {
-  window.clearTimeout(leavingVisibleTimer);
-  leavingVisibleTimer = window.setTimeout(() => send(TimeComplete, undefined), 100);
+  clearTimeout(leavingVisibleTimer);
+  leavingVisibleTimer = setTimeout(() => send(TimeComplete, undefined), 100);
 }
 
 function clearLeavingVisibleTimer() {
-  window.clearTimeout(leavingVisibleTimer);
+  clearTimeout(leavingVisibleTimer);
 } ////////////////////////////////////////////////////////////////////////////////
 // State machine
 
@@ -2917,11 +3756,9 @@ const chart = {
 };
 
 function transition(currentState, event, payload) {
-  var _stateDef$on;
-
   const currentStateValue = currentState.state;
   const stateDef = chart.states[currentState.state];
-  const nextState = stateDef == null ? void 0 : (_stateDef$on = stateDef.on) == null ? void 0 : _stateDef$on[event]; // Really useful for debugging
+  const nextState = stateDef?.on?.[event]; // Really useful for debugging
   // console.log({
   //   event,
   //   state: state.current.state,
@@ -2944,9 +3781,10 @@ function transition(currentState, event, payload) {
     nextDef.enter(nextStateValue, payload);
   }
 
-  return _extends__default['default']({}, currentState, payload, {
+  return { ...currentState,
+    ...payload,
     state: nextStateValue
-  });
+  };
 }
 
 function send(event, payload) {
@@ -3023,16 +3861,15 @@ function useTooltip(childProps, childRef, tooltipProps) {
     label: children,
     onMouseEnter: tooltipOnMouseEnter,
     onMouseLeave: tooltipOnMouseLeave,
-    onMouseMove: tooltipOnMouseMove
-  } = tooltipProps,
-        otherTooltipProps = _objectWithoutPropertiesLoose__default['default'](tooltipProps, ["label", "onMouseEnter", "onMouseLeave", "onMouseMove"]);
-
+    onMouseMove: tooltipOnMouseMove,
+    ...otherTooltipProps
+  } = tooltipProps;
   const tooltipId = `tooltip-${id}`;
-  return [_extends__default['default']({}, childProps, {
-    ref: assignMultipleRefs(childRef, anchorEl)
-  }, visible && {
-    'aria-describedby': tooltipId
-  }, {
+  return [{ ...childProps,
+    ref: assignMultipleRefs(childRef, anchorEl),
+    ...(visible && !childProps['aria-label'] && {
+      'aria-describedby': tooltipId
+    }),
     onMouseEnter: wrapEvent(onMouseEnter, handleMouseEnter),
     onMouseLeave: wrapEvent(onMouseLeave, handleMouseLeave),
     onMouseMove: wrapEvent(onMouseMove, handleMouseMove),
@@ -3040,7 +3877,7 @@ function useTooltip(childProps, childRef, tooltipProps) {
     onFocus: wrapEvent(onFocus, handleFocus),
     onBlur: wrapEvent(onBlur, handleBlur),
     onKeyDown: wrapEvent(onKeyDown, handleKeyDown)
-  }), _extends__default['default']({
+  }, {
     id: tooltipId,
     anchorEl,
     visible,
@@ -3048,8 +3885,9 @@ function useTooltip(childProps, childRef, tooltipProps) {
     onMouseEnter: wrapEvent(tooltipOnMouseEnter, handleMouseEnter),
     onMouseLeave: wrapEvent(tooltipOnMouseLeave, handleMouseLeave),
     onMouseMove: wrapEvent(tooltipOnMouseMove, handleMouseMove),
-    role: 'tooltip'
-  }, otherTooltipProps)];
+    role: 'tooltip',
+    ...otherTooltipProps
+  }];
 }
 
 const Tooltip = /*#__PURE__*/react.forwardRef(function Tooltip(props, forwardedRef) {
@@ -3057,17 +3895,14 @@ const Tooltip = /*#__PURE__*/react.forwardRef(function Tooltip(props, forwardedR
     as: Comp = 'div',
     innerAs,
     children,
-    disabled = false
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["as", "innerAs", "children", "disabled"]);
-
+    disabled = false,
+    ...otherProps
+  } = props;
   const child = react.Children.only(children);
-  const [childProps, _ref] = useTooltip(child.props, child.ref, otherProps);
-
-  const {
-    visible
-  } = _ref,
-        tooltipProps = _objectWithoutPropertiesLoose__default['default'](_ref, ["visible"]);
+  const [childProps, {
+    visible,
+    ...tooltipProps
+  }] = useTooltip(child.props, child.ref, otherProps);
 
   if (disabled) {
     return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
@@ -3076,10 +3911,11 @@ const Tooltip = /*#__PURE__*/react.forwardRef(function Tooltip(props, forwardedR
   }
 
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/react.cloneElement(child, childProps), visible && /*#__PURE__*/jsxRuntime.jsx(Comp, _extends__default['default']({
+    children: [/*#__PURE__*/react.cloneElement(child, childProps), visible && /*#__PURE__*/jsxRuntime.jsx(Comp, {
       as: innerAs,
-      ref: forwardedRef
-    }, tooltipProps))]
+      ref: forwardedRef,
+      ...tooltipProps
+    })]
   });
 });
 
@@ -3110,6 +3946,12 @@ exports.PopperProvider = PopperProvider;
 exports.Portal = Portal;
 exports.RadioButton = RadioButton;
 exports.RadioGroup = RadioGroup;
+exports.Slider = Slider;
+exports.SliderHandle = SliderHandle;
+exports.SliderInput = SliderInput;
+exports.SliderMarker = SliderMarker;
+exports.SliderRange = SliderRange;
+exports.SliderTrack = SliderTrack;
 exports.Spinner = Spinner;
 exports.SpinnerButton = SpinnerButton;
 exports.Tab = Tab;
@@ -3120,10 +3962,14 @@ exports.Tabs = Tabs;
 exports.Tooltip = Tooltip;
 exports.assignMultipleRefs = assignMultipleRefs;
 exports.assignRef = assignRef;
+exports.canUseDOM = canUseDOM;
+exports.createContext = createContext;
 exports.gestureHandlers = gestureHandlers;
 exports.getCircularIndex = getCircularIndex;
+exports.getOwnerDocument = getOwnerDocument;
 exports.getScope = getScope;
 exports.initialGestureHandlersState = initialGestureHandlersState;
+exports.isRightClick = isRightClick;
 exports.rubberBand = rubberBand;
 exports.rubberBandClamp = rubberBandClamp;
 exports.useAutoFocus = useAutoFocus;
@@ -3141,6 +3987,8 @@ exports.usePopperContext = usePopperContext;
 exports.useReducerMachine = useReducerMachine;
 exports.useRemoveBodyScroll = useRemoveBodyScroll;
 exports.useScope = useScope;
+exports.useStableCallback = useStableCallback;
+exports.useStableLayoutCallback = useStableLayoutCallback;
 exports.useThrottle = useThrottle;
 exports.wrapEvent = wrapEvent;
 //# sourceMappingURL=index.js.map