@raystack/apsara 0.10.5 → 0.10.6

package/dist/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { createContext as createContext$1, useMemo, createElement, useContext, useRef, useEffect as useEffect$1, useLayoutEffect, useCallback, forwardRef, Children, isValidElement, cloneElement, Fragment, useState as useState$1, useReducer } from 'react';
+import React__default, { createContext, useMemo, createElement, useContext, useRef, useEffect, useLayoutEffect, useCallback, forwardRef, Children, isValidElement, cloneElement, Fragment, useState, useReducer, memo as memo$1 } from 'react';
 import * as $7SXl2$reactdom from 'react-dom';
 import $7SXl2$reactdom__default, { flushSync, createPortal } from 'react-dom';
 
@@ -1383,7 +1383,7 @@ function _extends() {
     /* -----------------------------------------------------------------------------------------------
    * createContext
    * ---------------------------------------------------------------------------------------------*/ function $c512c27ab02ef895$export$fd42f52fd3ae1109(rootComponentName, defaultContext) {
-        const BaseContext = /*#__PURE__*/ createContext$1(defaultContext);
+        const BaseContext = /*#__PURE__*/ createContext(defaultContext);
         const index = defaultContexts.length;
         defaultContexts = [
             ...defaultContexts,
@@ -1416,7 +1416,7 @@ function _extends() {
    * createScope
    * ---------------------------------------------------------------------------------------------*/ const createScope = ()=>{
         const scopeContexts = defaultContexts.map((defaultContext)=>{
-            return /*#__PURE__*/ createContext$1(defaultContext);
+            return /*#__PURE__*/ createContext(defaultContext);
         });
         return function useScope(scope) {
             const contexts = (scope === null || scope === void 0 ? void 0 : scope[scopeName]) || scopeContexts;
@@ -1478,7 +1478,7 @@ function _extends() {
  * prop or avoid re-executing effects when passed as a dependency
  */ function $b1b2314f5f9a1d84$export$25bec8c6f54ee79a$1(callback) {
     const callbackRef = useRef(callback);
-    useEffect$1(()=>{
+    useEffect(()=>{
         callbackRef.current = callback;
     }); // https://github.com/facebook/react/issues/19240
     return useMemo(()=>(...args)=>{
@@ -1621,7 +1621,7 @@ const $8927f6f2acc4f386$var$NODES$1 = [
     const Node = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
         const { asChild: asChild , ...primitiveProps } = props;
         const Comp = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360$1 : node;
-        useEffect$1(()=>{
+        useEffect(()=>{
             window[Symbol.for('radix-ui')] = true;
         }, []);
         return /*#__PURE__*/ createElement(Comp, _extends({}, primitiveProps, {
@@ -1683,7 +1683,7 @@ const [$cddcb0b647441e34$var$createAvatarContext, $cddcb0b647441e34$export$90370
 const [$cddcb0b647441e34$var$AvatarProvider, $cddcb0b647441e34$var$useAvatarContext] = $cddcb0b647441e34$var$createAvatarContext($cddcb0b647441e34$var$AVATAR_NAME);
 const $cddcb0b647441e34$export$e2255cf6045e8d47 = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
     const { __scopeAvatar: __scopeAvatar , ...avatarProps } = props;
-    const [imageLoadingStatus, setImageLoadingStatus] = useState$1('idle');
+    const [imageLoadingStatus, setImageLoadingStatus] = useState('idle');
     return /*#__PURE__*/ createElement($cddcb0b647441e34$var$AvatarProvider, {
         scope: __scopeAvatar,
         imageLoadingStatus: imageLoadingStatus,
@@ -1720,8 +1720,8 @@ const $cddcb0b647441e34$export$2cd8ae1985206fe8 = /*#__PURE__*/ forwardRef((prop
 const $cddcb0b647441e34$export$69fffb6a9571fbfe = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
     const { __scopeAvatar: __scopeAvatar , delayMs: delayMs , ...fallbackProps } = props;
     const context = $cddcb0b647441e34$var$useAvatarContext($cddcb0b647441e34$var$FALLBACK_NAME, __scopeAvatar);
-    const [canRender, setCanRender] = useState$1(delayMs === undefined);
-    useEffect$1(()=>{
+    const [canRender, setCanRender] = useState(delayMs === undefined);
+    useEffect(()=>{
         if (delayMs !== undefined) {
             const timerId = window.setTimeout(()=>setCanRender(true)
             , delayMs);
@@ -1736,8 +1736,8 @@ const $cddcb0b647441e34$export$69fffb6a9571fbfe = /*#__PURE__*/ forwardRef((prop
     })) : null;
 });
 /* -----------------------------------------------------------------------------------------------*/ function $cddcb0b647441e34$var$useImageLoadingStatus(src) {
-    const [loadingStatus, setLoadingStatus] = useState$1('idle');
-    useEffect$1(()=>{
+    const [loadingStatus, setLoadingStatus] = useState('idle');
+    useEffect(()=>{
         if (!src) {
             setLoadingStatus('error');
             return;
@@ -1953,11 +1953,11 @@ function $71cd76cc60e0454e$export$6f32135080cb4c3$1({ prop: prop , defaultProp:
     ];
 }
 function $71cd76cc60e0454e$var$useUncontrolledState$1({ defaultProp: defaultProp , onChange: onChange  }) {
-    const uncontrolledState = useState$1(defaultProp);
+    const uncontrolledState = useState(defaultProp);
     const [value] = uncontrolledState;
     const prevValueRef = useRef(value);
     const handleChange = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a$1(onChange);
-    useEffect$1(()=>{
+    useEffect(()=>{
         if (prevValueRef.current !== value) {
             handleChange(value);
             prevValueRef.current = value;
@@ -1989,7 +1989,7 @@ function $010c2913dbd2fe3d$export$5cae361ad82dce8b(value) {
 }
 
 function $db6c3485150b8e66$export$1ab7ae714698c4b8(element) {
-    const [size, setSize] = useState$1(undefined);
+    const [size, setSize] = useState(undefined);
     $9f79659886946c16$export$e5c5a5f917a5871c$1(()=>{
         if (element) {
             // provide size as early as possible
@@ -2059,7 +2059,7 @@ $921a889cee6df7e8$export$99c2b779aa4e8b8b$1.displayName = 'Presence';
 /* -------------------------------------------------------------------------------------------------
  * usePresence
  * -----------------------------------------------------------------------------------------------*/ function $921a889cee6df7e8$var$usePresence$1(present) {
-    const [node1, setNode] = useState$1();
+    const [node1, setNode] = useState();
     const stylesRef = useRef({});
     const prevPresentRef = useRef(present);
     const prevAnimationNameRef = useRef('none');
@@ -2077,7 +2077,7 @@ $921a889cee6df7e8$export$99c2b779aa4e8b8b$1.displayName = 'Presence';
             MOUNT: 'mounted'
         }
     });
-    useEffect$1(()=>{
+    useEffect(()=>{
         const currentAnimationName = $921a889cee6df7e8$var$getAnimationName$1(stylesRef.current);
         prevAnimationNameRef.current = state === 'mounted' ? currentAnimationName : 'none';
     }, [
@@ -2166,7 +2166,7 @@ const [$e698a72e93240346$var$createCheckboxContext, $e698a72e93240346$export$b56
 const [$e698a72e93240346$var$CheckboxProvider, $e698a72e93240346$var$useCheckboxContext] = $e698a72e93240346$var$createCheckboxContext($e698a72e93240346$var$CHECKBOX_NAME);
 const $e698a72e93240346$export$48513f6b9f8ce62d = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
     const { __scopeCheckbox: __scopeCheckbox , name: name , checked: checkedProp , defaultChecked: defaultChecked , required: required , disabled: disabled , value: value = 'on' , onCheckedChange: onCheckedChange , ...checkboxProps } = props;
-    const [button, setButton] = useState$1(null);
+    const [button, setButton] = useState(null);
     const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05$1(forwardedRef, (node)=>setButton(node)
     );
     const hasConsumerStoppedPropagationRef = useRef(false); // We set this to true by default so that events bubble to forms without JS (SSR)
@@ -2177,7 +2177,7 @@ const $e698a72e93240346$export$48513f6b9f8ce62d = /*#__PURE__*/ forwardRef((prop
         onChange: onCheckedChange
     });
     const initialCheckedStateRef = useRef(checked);
-    useEffect$1(()=>{
+    useEffect(()=>{
         const form = button === null || button === void 0 ? void 0 : button.form;
         if (form) {
             const reset = ()=>setChecked(initialCheckedStateRef.current)
@@ -2257,7 +2257,7 @@ const $e698a72e93240346$export$59aad738f51d1c05 = /*#__PURE__*/ forwardRef((prop
     const ref = useRef(null);
     const prevChecked = $010c2913dbd2fe3d$export$5cae361ad82dce8b(checked);
     const controlSize = $db6c3485150b8e66$export$1ab7ae714698c4b8(control); // Bubble checked change to parents (e.g form change event)
-    useEffect$1(()=>{
+    useEffect(()=>{
         const input = ref.current;
         const inputProto = window.HTMLInputElement.prototype;
         const descriptor = Object.getOwnPropertyDescriptor(inputProto, 'checked');
@@ -2678,7 +2678,7 @@ function $e42e1063c40fb3ef$export$b9ecd428b558ff10(originalEventHandler, ourEven
     /* -----------------------------------------------------------------------------------------------
    * createContext
    * ---------------------------------------------------------------------------------------------*/ function $c512c27ab02ef895$export$fd42f52fd3ae1109(rootComponentName, defaultContext) {
-        const BaseContext = /*#__PURE__*/ createContext$1(defaultContext);
+        const BaseContext = /*#__PURE__*/ createContext(defaultContext);
         const index = defaultContexts.length;
         defaultContexts = [
             ...defaultContexts,
@@ -2711,7 +2711,7 @@ function $e42e1063c40fb3ef$export$b9ecd428b558ff10(originalEventHandler, ourEven
    * createScope
    * ---------------------------------------------------------------------------------------------*/ const createScope = ()=>{
         const scopeContexts = defaultContexts.map((defaultContext)=>{
-            return /*#__PURE__*/ createContext$1(defaultContext);
+            return /*#__PURE__*/ createContext(defaultContext);
         });
         return function useScope(scope) {
             const contexts = (scope === null || scope === void 0 ? void 0 : scope[scopeName]) || scopeContexts;
@@ -2795,7 +2795,7 @@ function $1746a345f3d73bb7$export$f680877a34711e37$1(deterministicId) {
  * prop or avoid re-executing effects when passed as a dependency
  */ function $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(callback) {
     const callbackRef = useRef(callback);
-    useEffect$1(()=>{
+    useEffect(()=>{
         callbackRef.current = callback;
     }); // https://github.com/facebook/react/issues/19240
     return useMemo(()=>(...args)=>{
@@ -2831,11 +2831,11 @@ function $71cd76cc60e0454e$export$6f32135080cb4c3({ prop: prop , defaultProp: de
     ];
 }
 function $71cd76cc60e0454e$var$useUncontrolledState({ defaultProp: defaultProp , onChange: onChange  }) {
-    const uncontrolledState = useState$1(defaultProp);
+    const uncontrolledState = useState(defaultProp);
     const [value] = uncontrolledState;
     const prevValueRef = useRef(value);
     const handleChange = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onChange);
-    useEffect$1(()=>{
+    useEffect(()=>{
         if (prevValueRef.current !== value) {
             handleChange(value);
             prevValueRef.current = value;
@@ -2944,7 +2944,7 @@ const $8927f6f2acc4f386$var$NODES = [
     const Node = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
         const { asChild: asChild , ...primitiveProps } = props;
         const Comp = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : node;
-        useEffect$1(()=>{
+        useEffect(()=>{
             window[Symbol.for('radix-ui')] = true;
         }, []);
         return /*#__PURE__*/ createElement(Comp, _extends({}, primitiveProps, {
@@ -3003,7 +3003,7 @@ const $8927f6f2acc4f386$var$NODES = [
  * Listens for when the escape key is down
  */ function $addc16e1bbe58fd0$export$3a72a57244d6e765$1(onEscapeKeyDownProp) {
     const onEscapeKeyDown = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onEscapeKeyDownProp);
-    useEffect$1(()=>{
+    useEffect(()=>{
         const handleKeyDown = (event)=>{
             if (event.key === 'Escape') onEscapeKeyDown(event);
         };
@@ -3019,7 +3019,7 @@ const $5cb92bef7577960e$var$CONTEXT_UPDATE$1 = 'dismissableLayer.update';
 const $5cb92bef7577960e$var$POINTER_DOWN_OUTSIDE$1 = 'dismissableLayer.pointerDownOutside';
 const $5cb92bef7577960e$var$FOCUS_OUTSIDE$1 = 'dismissableLayer.focusOutside';
 let $5cb92bef7577960e$var$originalBodyPointerEvents$1;
-const $5cb92bef7577960e$var$DismissableLayerContext$1 = /*#__PURE__*/ createContext$1({
+const $5cb92bef7577960e$var$DismissableLayerContext$1 = /*#__PURE__*/ createContext({
     layers: new Set(),
     layersWithOutsidePointerEventsDisabled: new Set(),
     branches: new Set()
@@ -3027,8 +3027,8 @@ const $5cb92bef7577960e$var$DismissableLayerContext$1 = /*#__PURE__*/ createCont
 const $5cb92bef7577960e$export$177fb62ff3ec1f22$1 = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
     const { disableOutsidePointerEvents: disableOutsidePointerEvents = false , onEscapeKeyDown: onEscapeKeyDown , onPointerDownOutside: onPointerDownOutside , onFocusOutside: onFocusOutside , onInteractOutside: onInteractOutside , onDismiss: onDismiss , ...layerProps } = props;
     const context = useContext($5cb92bef7577960e$var$DismissableLayerContext$1);
-    const [node1, setNode] = useState$1(null);
-    const [, force] = useState$1({});
+    const [node1, setNode] = useState(null);
+    const [, force] = useState({});
     const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, (node)=>setNode(node)
     );
     const layers = Array.from(context.layers);
@@ -3070,7 +3070,7 @@ const $5cb92bef7577960e$export$177fb62ff3ec1f22$1 = /*#__PURE__*/ forwardRef((pr
             onDismiss();
         }
     });
-    useEffect$1(()=>{
+    useEffect(()=>{
         if (!node1) return;
         if (disableOutsidePointerEvents) {
             if (context.layersWithOutsidePointerEventsDisabled.size === 0) {
@@ -3094,7 +3094,7 @@ const $5cb92bef7577960e$export$177fb62ff3ec1f22$1 = /*#__PURE__*/ forwardRef((pr
    * because a change to `disableOutsidePointerEvents` would remove this layer from the stack
    * and add it to the end again so the layering order wouldn't be _creation order_.
    * We only want them to be removed from context stacks when unmounted.
-   */ useEffect$1(()=>{
+   */ useEffect(()=>{
         return ()=>{
             if (!node1) return;
             context.layers.delete(node1);
@@ -3105,7 +3105,7 @@ const $5cb92bef7577960e$export$177fb62ff3ec1f22$1 = /*#__PURE__*/ forwardRef((pr
         node1,
         context
     ]);
-    useEffect$1(()=>{
+    useEffect(()=>{
         const handleUpdate = ()=>force({})
         ;
         document.addEventListener($5cb92bef7577960e$var$CONTEXT_UPDATE$1, handleUpdate);
@@ -3131,7 +3131,7 @@ const $5cb92bef7577960e$export$177fb62ff3ec1f22$1 = /*#__PURE__*/ forwardRef((pr
     const handlePointerDownOutside = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onPointerDownOutside);
     const isPointerInsideReactTreeRef = useRef(false);
     const handleClickRef = useRef(()=>{});
-    useEffect$1(()=>{
+    useEffect(()=>{
         const handlePointerDown = (event)=>{
             if (event.target && !isPointerInsideReactTreeRef.current) {
                 const eventDetail = {
@@ -3197,7 +3197,7 @@ const $5cb92bef7577960e$export$177fb62ff3ec1f22$1 = /*#__PURE__*/ forwardRef((pr
  */ function $5cb92bef7577960e$var$useFocusOutside$1(onFocusOutside) {
     const handleFocusOutside = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onFocusOutside);
     const isFocusInsideReactTreeRef = useRef(false);
-    useEffect$1(()=>{
+    useEffect(()=>{
         const handleFocus = (event)=>{
             if (event.target && !isFocusInsideReactTreeRef.current) {
                 const eventDetail = {
@@ -3246,7 +3246,7 @@ const $d3863c46a17e8a28$var$EVENT_OPTIONS$1 = {
 };
 const $d3863c46a17e8a28$export$20e40289641fbbb6$1 = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
     const { loop: loop = false , trapped: trapped = false , onMountAutoFocus: onMountAutoFocusProp , onUnmountAutoFocus: onUnmountAutoFocusProp , ...scopeProps } = props;
-    const [container1, setContainer] = useState$1(null);
+    const [container1, setContainer] = useState(null);
     const onMountAutoFocus = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onMountAutoFocusProp);
     const onUnmountAutoFocus = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onUnmountAutoFocusProp);
     const lastFocusedElementRef = useRef(null);
@@ -3261,7 +3261,7 @@ const $d3863c46a17e8a28$export$20e40289641fbbb6$1 = /*#__PURE__*/ forwardRef((pr
             this.paused = false;
         }
     }).current; // Takes care of trapping focus if focus is moved outside programmatically for example
-    useEffect$1(()=>{
+    useEffect(()=>{
         if (trapped) {
             function handleFocusIn(event) {
                 if (focusScope.paused || !container1) return;
@@ -3289,7 +3289,7 @@ const $d3863c46a17e8a28$export$20e40289641fbbb6$1 = /*#__PURE__*/ forwardRef((pr
         container1,
         focusScope.paused
     ]);
-    useEffect$1(()=>{
+    useEffect(()=>{
         if (container1) {
             $d3863c46a17e8a28$var$focusScopesStack$1.add(focusScope);
             const previouslyFocusedElement = document.activeElement;
@@ -3514,7 +3514,7 @@ $921a889cee6df7e8$export$99c2b779aa4e8b8b.displayName = 'Presence';
 /* -------------------------------------------------------------------------------------------------
  * usePresence
  * -----------------------------------------------------------------------------------------------*/ function $921a889cee6df7e8$var$usePresence(present) {
-    const [node1, setNode] = useState$1();
+    const [node1, setNode] = useState();
     const stylesRef = useRef({});
     const prevPresentRef = useRef(present);
     const prevAnimationNameRef = useRef('none');
@@ -3532,7 +3532,7 @@ $921a889cee6df7e8$export$99c2b779aa4e8b8b.displayName = 'Presence';
             MOUNT: 'mounted'
         }
     });
-    useEffect$1(()=>{
+    useEffect(()=>{
         const currentAnimationName = $921a889cee6df7e8$var$getAnimationName(stylesRef.current);
         prevAnimationNameRef.current = state === 'mounted' ? currentAnimationName : 'none';
     }, [
@@ -3619,7 +3619,7 @@ $921a889cee6df7e8$export$99c2b779aa4e8b8b.displayName = 'Presence';
  * Injects a pair of focus guards at the edges of the whole DOM tree
  * to ensure `focusin` & `focusout` events can be caught consistently.
  */ function $3db38b7d1fb3fe6a$export$b7ece24a22aeda8c$1() {
-    useEffect$1(()=>{
+    useEffect(()=>{
         var _edgeGuards$, _edgeGuards$2;
         const edgeGuards = document.querySelectorAll('[data-radix-focus-guard]');
         document.body.insertAdjacentElement('afterbegin', (_edgeGuards$ = edgeGuards[0]) !== null && _edgeGuards$ !== void 0 ? _edgeGuards$ : $3db38b7d1fb3fe6a$var$createFocusGuard$1());
@@ -3737,7 +3737,7 @@ function assignRef(ref, value) {
  * @returns {MutableRefObject}
  */
 function useCallbackRef(initialValue, callback) {
-    var ref = useState$1(function () { return ({
+    var ref = useState(function () { return ({
         // value
         value: initialValue,
         // last callback
@@ -4552,7 +4552,7 @@ const $5d3850c4d0b4e6c7$export$b6d9565de1e068cf$1 = /*#__PURE__*/ forwardRef((pr
     const context = $5d3850c4d0b4e6c7$var$useDialogContext$1($5d3850c4d0b4e6c7$var$CONTENT_NAME$1, props.__scopeDialog);
     const contentRef = useRef(null);
     const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, context.contentRef, contentRef); // aria-hide everything except the content (better supported equivalent to setting aria-modal)
-    useEffect$1(()=>{
+    useEffect(()=>{
         const content = contentRef.current;
         if (content) return hideOthers(content);
     }, []);
@@ -4802,7 +4802,7 @@ function $1746a345f3d73bb7$export$f680877a34711e37(deterministicId) {
  * Listens for when the escape key is down
  */ function $addc16e1bbe58fd0$export$3a72a57244d6e765(onEscapeKeyDownProp, ownerDocument = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) {
     const onEscapeKeyDown = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a$1(onEscapeKeyDownProp);
-    useEffect$1(()=>{
+    useEffect(()=>{
         const handleKeyDown = (event)=>{
             if (event.key === 'Escape') onEscapeKeyDown(event);
         };
@@ -4819,7 +4819,7 @@ const $5cb92bef7577960e$var$CONTEXT_UPDATE = 'dismissableLayer.update';
 const $5cb92bef7577960e$var$POINTER_DOWN_OUTSIDE = 'dismissableLayer.pointerDownOutside';
 const $5cb92bef7577960e$var$FOCUS_OUTSIDE = 'dismissableLayer.focusOutside';
 let $5cb92bef7577960e$var$originalBodyPointerEvents;
-const $5cb92bef7577960e$var$DismissableLayerContext = /*#__PURE__*/ createContext$1({
+const $5cb92bef7577960e$var$DismissableLayerContext = /*#__PURE__*/ createContext({
     layers: new Set(),
     layersWithOutsidePointerEventsDisabled: new Set(),
     branches: new Set()
@@ -4828,9 +4828,9 @@ const $5cb92bef7577960e$export$177fb62ff3ec1f22 = /*#__PURE__*/ forwardRef((prop
     var _node$ownerDocument;
     const { disableOutsidePointerEvents: disableOutsidePointerEvents = false , onEscapeKeyDown: onEscapeKeyDown , onPointerDownOutside: onPointerDownOutside , onFocusOutside: onFocusOutside , onInteractOutside: onInteractOutside , onDismiss: onDismiss , ...layerProps } = props;
     const context = useContext($5cb92bef7577960e$var$DismissableLayerContext);
-    const [node1, setNode] = useState$1(null);
+    const [node1, setNode] = useState(null);
     const ownerDocument = (_node$ownerDocument = node1 === null || node1 === void 0 ? void 0 : node1.ownerDocument) !== null && _node$ownerDocument !== void 0 ? _node$ownerDocument : globalThis === null || globalThis === void 0 ? void 0 : globalThis.document;
-    const [, force] = useState$1({});
+    const [, force] = useState({});
     const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05$1(forwardedRef, (node)=>setNode(node)
     );
     const layers = Array.from(context.layers);
@@ -4872,7 +4872,7 @@ const $5cb92bef7577960e$export$177fb62ff3ec1f22 = /*#__PURE__*/ forwardRef((prop
             onDismiss();
         }
     }, ownerDocument);
-    useEffect$1(()=>{
+    useEffect(()=>{
         if (!node1) return;
         if (disableOutsidePointerEvents) {
             if (context.layersWithOutsidePointerEventsDisabled.size === 0) {
@@ -4897,7 +4897,7 @@ const $5cb92bef7577960e$export$177fb62ff3ec1f22 = /*#__PURE__*/ forwardRef((prop
    * because a change to `disableOutsidePointerEvents` would remove this layer from the stack
    * and add it to the end again so the layering order wouldn't be _creation order_.
    * We only want them to be removed from context stacks when unmounted.
-   */ useEffect$1(()=>{
+   */ useEffect(()=>{
         return ()=>{
             if (!node1) return;
             context.layers.delete(node1);
@@ -4908,7 +4908,7 @@ const $5cb92bef7577960e$export$177fb62ff3ec1f22 = /*#__PURE__*/ forwardRef((prop
         node1,
         context
     ]);
-    useEffect$1(()=>{
+    useEffect(()=>{
         const handleUpdate = ()=>force({})
         ;
         document.addEventListener($5cb92bef7577960e$var$CONTEXT_UPDATE, handleUpdate);
@@ -4934,7 +4934,7 @@ const $5cb92bef7577960e$export$177fb62ff3ec1f22 = /*#__PURE__*/ forwardRef((prop
     const handlePointerDownOutside = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a$1(onPointerDownOutside);
     const isPointerInsideReactTreeRef = useRef(false);
     const handleClickRef = useRef(()=>{});
-    useEffect$1(()=>{
+    useEffect(()=>{
         const handlePointerDown = (event)=>{
             if (event.target && !isPointerInsideReactTreeRef.current) {
                 const eventDetail = {
@@ -5001,7 +5001,7 @@ const $5cb92bef7577960e$export$177fb62ff3ec1f22 = /*#__PURE__*/ forwardRef((prop
  */ function $5cb92bef7577960e$var$useFocusOutside(onFocusOutside, ownerDocument = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) {
     const handleFocusOutside = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a$1(onFocusOutside);
     const isFocusInsideReactTreeRef = useRef(false);
-    useEffect$1(()=>{
+    useEffect(()=>{
         const handleFocus = (event)=>{
             if (event.target && !isFocusInsideReactTreeRef.current) {
                 const eventDetail = {
@@ -5051,7 +5051,7 @@ const $d3863c46a17e8a28$var$EVENT_OPTIONS = {
 };
 const $d3863c46a17e8a28$export$20e40289641fbbb6 = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
     const { loop: loop = false , trapped: trapped = false , onMountAutoFocus: onMountAutoFocusProp , onUnmountAutoFocus: onUnmountAutoFocusProp , ...scopeProps } = props;
-    const [container1, setContainer] = useState$1(null);
+    const [container1, setContainer] = useState(null);
     const onMountAutoFocus = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a$1(onMountAutoFocusProp);
     const onUnmountAutoFocus = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a$1(onUnmountAutoFocusProp);
     const lastFocusedElementRef = useRef(null);
@@ -5066,7 +5066,7 @@ const $d3863c46a17e8a28$export$20e40289641fbbb6 = /*#__PURE__*/ forwardRef((prop
             this.paused = false;
         }
     }).current; // Takes care of trapping focus if focus is moved outside programmatically for example
-    useEffect$1(()=>{
+    useEffect(()=>{
         if (trapped) {
             function handleFocusIn(event) {
                 if (focusScope.paused || !container1) return;
@@ -5122,7 +5122,7 @@ const $d3863c46a17e8a28$export$20e40289641fbbb6 = /*#__PURE__*/ forwardRef((prop
         container1,
         focusScope.paused
     ]);
-    useEffect$1(()=>{
+    useEffect(()=>{
         if (container1) {
             $d3863c46a17e8a28$var$focusScopesStack.add(focusScope);
             const previouslyFocusedElement = document.activeElement;
@@ -5328,7 +5328,7 @@ const $f1701beae083dbae$export$602eac185826482c = /*#__PURE__*/ forwardRef((prop
  * Injects a pair of focus guards at the edges of the whole DOM tree
  * to ensure `focusin` & `focusout` events can be caught consistently.
  */ function $3db38b7d1fb3fe6a$export$b7ece24a22aeda8c() {
-    useEffect$1(()=>{
+    useEffect(()=>{
         var _edgeGuards$, _edgeGuards$2;
         const edgeGuards = document.querySelectorAll('[data-radix-focus-guard]');
         document.body.insertAdjacentElement('afterbegin', (_edgeGuards$ = edgeGuards[0]) !== null && _edgeGuards$ !== void 0 ? _edgeGuards$ : $3db38b7d1fb3fe6a$var$createFocusGuard());
@@ -5769,7 +5769,7 @@ const $5d3850c4d0b4e6c7$export$b6d9565de1e068cf = /*#__PURE__*/ forwardRef((prop
     const context = $5d3850c4d0b4e6c7$var$useDialogContext($5d3850c4d0b4e6c7$var$CONTENT_NAME, props.__scopeDialog);
     const contentRef = useRef(null);
     const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05$1(forwardedRef, context.contentRef, contentRef); // aria-hide everything except the content (better supported equivalent to setting aria-modal)
-    useEffect$1(()=>{
+    useEffect(()=>{
         const content = contentRef.current;
         if (content) return hideOthers(content);
     }, []);
@@ -6092,7 +6092,7 @@ function $e02a7d9cb1dc128c$export$c74125a8e3af6bb2(name) {
     ];
 }
 
-const $f631663db3294ace$var$DirectionContext = /*#__PURE__*/ createContext$1(undefined);
+const $f631663db3294ace$var$DirectionContext = /*#__PURE__*/ createContext(undefined);
 /* -----------------------------------------------------------------------------------------------*/ function $f631663db3294ace$export$b39126d51d94e6f3(localDir) {
     const globalDir = useContext($f631663db3294ace$var$DirectionContext);
     return localDir || globalDir || 'ltr';
@@ -7676,7 +7676,7 @@ const arrow = options => {
   };
 };
 
-var index = typeof document !== 'undefined' ? useLayoutEffect : useEffect$1;
+var index = typeof document !== 'undefined' ? useLayoutEffect : useEffect;
 
 // Fork of `fast-deep-equal` that only does the comparisons we need and compares
 // functions
@@ -7905,7 +7905,7 @@ const [$cf1ac5d9fe0e8206$var$createPopperContext, $cf1ac5d9fe0e8206$export$722aa
 const [$cf1ac5d9fe0e8206$var$PopperProvider, $cf1ac5d9fe0e8206$var$usePopperContext] = $cf1ac5d9fe0e8206$var$createPopperContext($cf1ac5d9fe0e8206$var$POPPER_NAME);
 const $cf1ac5d9fe0e8206$export$badac9ada3a0bdf9 = (props)=>{
     const { __scopePopper: __scopePopper , children: children  } = props;
-    const [anchor, setAnchor] = useState$1(null);
+    const [anchor, setAnchor] = useState(null);
     return /*#__PURE__*/ createElement($cf1ac5d9fe0e8206$var$PopperProvider, {
         scope: __scopePopper,
         anchor: anchor,
@@ -7920,7 +7920,7 @@ const $cf1ac5d9fe0e8206$export$ecd4e1ccab6ed6d = /*#__PURE__*/ forwardRef((props
     const context = $cf1ac5d9fe0e8206$var$usePopperContext($cf1ac5d9fe0e8206$var$ANCHOR_NAME, __scopePopper);
     const ref = useRef(null);
     const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05$1(forwardedRef, ref);
-    useEffect$1(()=>{
+    useEffect(()=>{
         // Consumer can anchor the popper to something that isn't
         // a DOM node e.g. pointer position, so we override the
         // `anchorRef` with their virtual ref in this case.
@@ -7938,10 +7938,10 @@ const $cf1ac5d9fe0e8206$export$bc4ae5855d3c4fc = /*#__PURE__*/ forwardRef((props
     var _arrowSize$width, _arrowSize$height, _middlewareData$arrow, _middlewareData$arrow2, _middlewareData$arrow3, _middlewareData$trans, _middlewareData$trans2, _middlewareData$hide;
     const { __scopePopper: __scopePopper , side: side = 'bottom' , sideOffset: sideOffset = 0 , align: align = 'center' , alignOffset: alignOffset = 0 , arrowPadding: arrowPadding = 0 , collisionBoundary: collisionBoundary = [] , collisionPadding: collisionPaddingProp = 0 , sticky: sticky = 'partial' , hideWhenDetached: hideWhenDetached = false , avoidCollisions: avoidCollisions = true , onPlaced: onPlaced , ...contentProps } = props;
     const context = $cf1ac5d9fe0e8206$var$usePopperContext($cf1ac5d9fe0e8206$var$CONTENT_NAME, __scopePopper);
-    const [content, setContent] = useState$1(null);
+    const [content, setContent] = useState(null);
     const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05$1(forwardedRef, (node)=>setContent(node)
     );
-    const [arrow$1, setArrow] = useState$1(null);
+    const [arrow$1, setArrow] = useState(null);
     const arrowSize = $db6c3485150b8e66$export$1ab7ae714698c4b8(arrow$1);
     const arrowWidth = (_arrowSize$width = arrowSize === null || arrowSize === void 0 ? void 0 : arrowSize.width) !== null && _arrowSize$width !== void 0 ? _arrowSize$width : 0;
     const arrowHeight = (_arrowSize$height = arrowSize === null || arrowSize === void 0 ? void 0 : arrowSize.height) !== null && _arrowSize$height !== void 0 ? _arrowSize$height : 0;
@@ -8020,7 +8020,7 @@ const $cf1ac5d9fe0e8206$export$bc4ae5855d3c4fc = /*#__PURE__*/ forwardRef((props
     const arrowX = (_middlewareData$arrow = middlewareData.arrow) === null || _middlewareData$arrow === void 0 ? void 0 : _middlewareData$arrow.x;
     const arrowY = (_middlewareData$arrow2 = middlewareData.arrow) === null || _middlewareData$arrow2 === void 0 ? void 0 : _middlewareData$arrow2.y;
     const cannotCenterArrow = ((_middlewareData$arrow3 = middlewareData.arrow) === null || _middlewareData$arrow3 === void 0 ? void 0 : _middlewareData$arrow3.centerOffset) !== 0;
-    const [contentZIndex, setContentZIndex] = useState$1();
+    const [contentZIndex, setContentZIndex] = useState();
     $9f79659886946c16$export$e5c5a5f917a5871c$1(()=>{
         if (content) setContentZIndex(window.getComputedStyle(content).zIndex);
     }, [
@@ -8152,12 +8152,12 @@ const $d7bdfb9eb0fdf311$export$8699f7c8af148338 = /*#__PURE__*/ forwardRef((prop
         defaultProp: defaultCurrentTabStopId,
         onChange: onCurrentTabStopIdChange
     });
-    const [isTabbingBackOut, setIsTabbingBackOut] = useState$1(false);
+    const [isTabbingBackOut, setIsTabbingBackOut] = useState(false);
     const handleEntryFocus = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a$1(onEntryFocus);
     const getItems = $d7bdfb9eb0fdf311$var$useCollection(__scopeRovingFocusGroup);
     const isClickFocusRef = useRef(false);
-    const [focusableItemsCount, setFocusableItemsCount] = useState$1(0);
-    useEffect$1(()=>{
+    const [focusableItemsCount, setFocusableItemsCount] = useState(0);
+    useEffect(()=>{
         const node = ref.current;
         if (node) {
             node.addEventListener($d7bdfb9eb0fdf311$var$ENTRY_FOCUS, handleEntryFocus);
@@ -8240,7 +8240,7 @@ const $d7bdfb9eb0fdf311$export$ab9df7c53fe8454 = /*#__PURE__*/ forwardRef((props
     const isCurrentTabStop = context.currentTabStopId === id;
     const getItems = $d7bdfb9eb0fdf311$var$useCollection(__scopeRovingFocusGroup);
     const { onFocusableItemAdd: onFocusableItemAdd , onFocusableItemRemove: onFocusableItemRemove  } = context;
-    useEffect$1(()=>{
+    useEffect(()=>{
         if (focusable) {
             onFocusableItemAdd();
             return ()=>onFocusableItemRemove()
@@ -8377,11 +8377,11 @@ const [$6cc32821e9371a1c$var$MenuRootProvider, $6cc32821e9371a1c$var$useMenuRoot
 const $6cc32821e9371a1c$export$d9b273488cd8ce6f = (props)=>{
     const { __scopeMenu: __scopeMenu , open: open = false , children: children , dir: dir , onOpenChange: onOpenChange , modal: modal = true  } = props;
     const popperScope = $6cc32821e9371a1c$var$usePopperScope(__scopeMenu);
-    const [content, setContent] = useState$1(null);
+    const [content, setContent] = useState(null);
     const isUsingKeyboardRef = useRef(false);
     const handleOpenChange = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a$1(onOpenChange);
     const direction = $f631663db3294ace$export$b39126d51d94e6f3(dir);
-    useEffect$1(()=>{
+    useEffect(()=>{
         // Capture phase ensures we set the boolean before any side effects execute
         // in response to the key or pointer event as they might depend on this value.
         const handleKeyDown = ()=>{
@@ -8480,7 +8480,7 @@ const $6cc32821e9371a1c$export$479f0f2f71193efe = /*#__PURE__*/ forwardRef((prop
     const context = $6cc32821e9371a1c$var$useMenuContext($6cc32821e9371a1c$var$CONTENT_NAME, props.__scopeMenu);
     const ref = useRef(null);
     const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05$1(forwardedRef, ref); // Hide everything from ARIA except the `MenuContent`
-    useEffect$1(()=>{
+    useEffect(()=>{
         const content = ref.current;
         if (content) return hideOthers(content);
     }, []);
@@ -8516,7 +8516,7 @@ const $6cc32821e9371a1c$var$MenuRootContentNonModal = /*#__PURE__*/ forwardRef((
     const popperScope = $6cc32821e9371a1c$var$usePopperScope(__scopeMenu);
     const rovingFocusGroupScope = $6cc32821e9371a1c$var$useRovingFocusGroupScope(__scopeMenu);
     const getItems = $6cc32821e9371a1c$var$useCollection(__scopeMenu);
-    const [currentItemId, setCurrentItemId] = useState$1(null);
+    const [currentItemId, setCurrentItemId] = useState(null);
     const contentRef = useRef(null);
     const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05$1(forwardedRef, contentRef, context.onContentChange);
     const timerRef = useRef(0);
@@ -8555,7 +8555,7 @@ const $6cc32821e9371a1c$var$MenuRootContentNonModal = /*#__PURE__*/ forwardRef((
        */ setTimeout(()=>newItem.focus()
         );
     };
-    useEffect$1(()=>{
+    useEffect(()=>{
         return ()=>window.clearTimeout(timerRef.current)
         ;
     }, []); // Make sure the whole tree has focus guards as our `MenuContent` may be
@@ -8753,9 +8753,9 @@ const $6cc32821e9371a1c$export$2ce376c2cc3355c8 = /*#__PURE__*/ forwardRef((prop
     const rovingFocusGroupScope = $6cc32821e9371a1c$var$useRovingFocusGroupScope(__scopeMenu);
     const ref = useRef(null);
     const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05$1(forwardedRef, ref);
-    const [isFocused, setIsFocused] = useState$1(false); // get the item's `.textContent` as default strategy for typeahead `textValue`
-    const [textContent, setTextContent] = useState$1('');
-    useEffect$1(()=>{
+    const [isFocused, setIsFocused] = useState(false); // get the item's `.textContent` as default strategy for typeahead `textValue`
+    const [textContent, setTextContent] = useState('');
+    useEffect(()=>{
         const menuItem = ref.current;
         if (menuItem) {
             var _menuItem$textContent;
@@ -9225,7 +9225,7 @@ const $cb5cc270b50c6fcd$export$5b6b19405a83ff9d = (props)=>{
     const { __scopePopover: __scopePopover , children: children , open: openProp , defaultOpen: defaultOpen , onOpenChange: onOpenChange , modal: modal = false  } = props;
     const popperScope = $cb5cc270b50c6fcd$var$usePopperScope(__scopePopover);
     const triggerRef = useRef(null);
-    const [hasCustomAnchor, setHasCustomAnchor] = useState$1(false);
+    const [hasCustomAnchor, setHasCustomAnchor] = useState(false);
     const [open = false, setOpen] = $71cd76cc60e0454e$export$6f32135080cb4c3$1({
         prop: openProp,
         defaultProp: defaultOpen,
@@ -9311,7 +9311,7 @@ const $cb5cc270b50c6fcd$export$d7e1f420b25549ff = /*#__PURE__*/ forwardRef((prop
     const contentRef = useRef(null);
     const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05$1(forwardedRef, contentRef);
     const isRightClickOutsideRef = useRef(false); // aria-hide everything except the content (better supported equivalent to setting aria-modal)
-    useEffect$1(()=>{
+    useEffect(()=>{
         const content = contentRef.current;
         if (content) return hideOthers(content);
     }, []);
@@ -9441,7 +9441,7 @@ const [$ce77a8961b41be9e$var$createRadioContext, $ce77a8961b41be9e$export$67d229
 const [$ce77a8961b41be9e$var$RadioProvider, $ce77a8961b41be9e$var$useRadioContext] = $ce77a8961b41be9e$var$createRadioContext($ce77a8961b41be9e$var$RADIO_NAME);
 const $ce77a8961b41be9e$export$d7b12c4107be0d61 = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
     const { __scopeRadio: __scopeRadio , name: name , checked: checked = false , required: required , disabled: disabled , value: value = 'on' , onCheck: onCheck , ...radioProps } = props;
-    const [button, setButton] = useState$1(null);
+    const [button, setButton] = useState(null);
     const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05$1(forwardedRef, (node)=>setButton(node)
     );
     const hasConsumerStoppedPropagationRef = useRef(false); // We set this to true by default so that events bubble to forms without JS (SSR)
@@ -9504,7 +9504,7 @@ const $ce77a8961b41be9e$export$d35a9ffa9a04f9e7 = /*#__PURE__*/ forwardRef((prop
     const ref = useRef(null);
     const prevChecked = $010c2913dbd2fe3d$export$5cae361ad82dce8b(checked);
     const controlSize = $db6c3485150b8e66$export$1ab7ae714698c4b8(control); // Bubble checked change to parents (e.g form change event)
-    useEffect$1(()=>{
+    useEffect(()=>{
         const input = ref.current;
         const inputProto = window.HTMLInputElement.prototype;
         const descriptor = Object.getOwnPropertyDescriptor(inputProto, 'checked');
@@ -9604,7 +9604,7 @@ const $f99a8c78507165f7$export$9f866c100ef519e4 = /*#__PURE__*/ forwardRef((prop
     const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05$1(forwardedRef, ref);
     const checked = context.value === itemProps.value;
     const isArrowKeyPressedRef = useRef(false);
-    useEffect$1(()=>{
+    useEffect(()=>{
         const handleKeyDown = (event)=>{
             if ($f99a8c78507165f7$var$ARROW_KEYS.includes(event.key)) isArrowKeyPressedRef.current = true;
         };
@@ -9698,15 +9698,15 @@ const [$57acba87d6e25586$var$createScrollAreaContext, $57acba87d6e25586$export$4
 const [$57acba87d6e25586$var$ScrollAreaProvider, $57acba87d6e25586$var$useScrollAreaContext] = $57acba87d6e25586$var$createScrollAreaContext($57acba87d6e25586$var$SCROLL_AREA_NAME);
 const $57acba87d6e25586$export$ccf8d8d7bbf3c2cc = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
     const { __scopeScrollArea: __scopeScrollArea , type: type = 'hover' , dir: dir , scrollHideDelay: scrollHideDelay = 600 , ...scrollAreaProps } = props;
-    const [scrollArea, setScrollArea] = useState$1(null);
-    const [viewport, setViewport] = useState$1(null);
-    const [content, setContent] = useState$1(null);
-    const [scrollbarX, setScrollbarX] = useState$1(null);
-    const [scrollbarY, setScrollbarY] = useState$1(null);
-    const [cornerWidth, setCornerWidth] = useState$1(0);
-    const [cornerHeight, setCornerHeight] = useState$1(0);
-    const [scrollbarXEnabled, setScrollbarXEnabled] = useState$1(false);
-    const [scrollbarYEnabled, setScrollbarYEnabled] = useState$1(false);
+    const [scrollArea, setScrollArea] = useState(null);
+    const [viewport, setViewport] = useState(null);
+    const [content, setContent] = useState(null);
+    const [scrollbarX, setScrollbarX] = useState(null);
+    const [scrollbarY, setScrollbarY] = useState(null);
+    const [cornerWidth, setCornerWidth] = useState(0);
+    const [cornerHeight, setCornerHeight] = useState(0);
+    const [scrollbarXEnabled, setScrollbarXEnabled] = useState(false);
+    const [scrollbarYEnabled, setScrollbarYEnabled] = useState(false);
     const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05$1(forwardedRef, (node)=>setScrollArea(node)
     );
     const direction = $f631663db3294ace$export$b39126d51d94e6f3(dir);
@@ -9790,7 +9790,7 @@ const $57acba87d6e25586$export$2fabd85d0eba3c57 = /*#__PURE__*/ forwardRef((prop
     const context = $57acba87d6e25586$var$useScrollAreaContext($57acba87d6e25586$var$SCROLLBAR_NAME, props.__scopeScrollArea);
     const { onScrollbarXEnabledChange: onScrollbarXEnabledChange , onScrollbarYEnabledChange: onScrollbarYEnabledChange  } = context;
     const isHorizontal = props.orientation === 'horizontal';
-    useEffect$1(()=>{
+    useEffect(()=>{
         isHorizontal ? onScrollbarXEnabledChange(true) : onScrollbarYEnabledChange(true);
         return ()=>{
             isHorizontal ? onScrollbarXEnabledChange(false) : onScrollbarYEnabledChange(false);
@@ -9816,8 +9816,8 @@ const $57acba87d6e25586$export$2fabd85d0eba3c57 = /*#__PURE__*/ forwardRef((prop
 /* -----------------------------------------------------------------------------------------------*/ const $57acba87d6e25586$var$ScrollAreaScrollbarHover = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
     const { forceMount: forceMount , ...scrollbarProps } = props;
     const context = $57acba87d6e25586$var$useScrollAreaContext($57acba87d6e25586$var$SCROLLBAR_NAME, props.__scopeScrollArea);
-    const [visible, setVisible] = useState$1(false);
-    useEffect$1(()=>{
+    const [visible, setVisible] = useState(false);
+    useEffect(()=>{
         const scrollArea = context.scrollArea;
         let hideTimer = 0;
         if (scrollArea) {
@@ -9873,7 +9873,7 @@ const $57acba87d6e25586$var$ScrollAreaScrollbarScroll = /*#__PURE__*/ forwardRef
             POINTER_ENTER: 'interacting'
         }
     });
-    useEffect$1(()=>{
+    useEffect(()=>{
         if (state === 'idle') {
             const hideTimer = window.setTimeout(()=>send('HIDE')
             , context.scrollHideDelay);
@@ -9885,7 +9885,7 @@ const $57acba87d6e25586$var$ScrollAreaScrollbarScroll = /*#__PURE__*/ forwardRef
         context.scrollHideDelay,
         send
     ]);
-    useEffect$1(()=>{
+    useEffect(()=>{
         const viewport = context.viewport;
         const scrollDirection = isHorizontal ? 'scrollLeft' : 'scrollTop';
         if (viewport) {
@@ -9924,7 +9924,7 @@ const $57acba87d6e25586$var$ScrollAreaScrollbarScroll = /*#__PURE__*/ forwardRef
 const $57acba87d6e25586$var$ScrollAreaScrollbarAuto = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
     const context = $57acba87d6e25586$var$useScrollAreaContext($57acba87d6e25586$var$SCROLLBAR_NAME, props.__scopeScrollArea);
     const { forceMount: forceMount , ...scrollbarProps } = props;
-    const [visible, setVisible] = useState$1(false);
+    const [visible, setVisible] = useState(false);
     const isHorizontal = props.orientation === 'horizontal';
     const handleResize = $57acba87d6e25586$var$useDebounceCallback(()=>{
         if (context.viewport) {
@@ -9948,7 +9948,7 @@ const $57acba87d6e25586$var$ScrollAreaScrollbarAuto = /*#__PURE__*/ forwardRef((
     const context = $57acba87d6e25586$var$useScrollAreaContext($57acba87d6e25586$var$SCROLLBAR_NAME, props.__scopeScrollArea);
     const thumbRef = useRef(null);
     const pointerOffsetRef = useRef(0);
-    const [sizes, setSizes] = useState$1({
+    const [sizes, setSizes] = useState({
         content: 0,
         viewport: 0,
         scrollbar: {
@@ -10009,10 +10009,10 @@ const $57acba87d6e25586$var$ScrollAreaScrollbarAuto = /*#__PURE__*/ forwardRef((
 /* -----------------------------------------------------------------------------------------------*/ const $57acba87d6e25586$var$ScrollAreaScrollbarX = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
     const { sizes: sizes , onSizesChange: onSizesChange , ...scrollbarProps } = props;
     const context = $57acba87d6e25586$var$useScrollAreaContext($57acba87d6e25586$var$SCROLLBAR_NAME, props.__scopeScrollArea);
-    const [computedStyle, setComputedStyle] = useState$1();
+    const [computedStyle, setComputedStyle] = useState();
     const ref = useRef(null);
     const composeRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05$1(forwardedRef, ref, context.onScrollbarXChange);
-    useEffect$1(()=>{
+    useEffect(()=>{
         if (ref.current) setComputedStyle(getComputedStyle(ref.current));
     }, [
         ref
@@ -10056,10 +10056,10 @@ const $57acba87d6e25586$var$ScrollAreaScrollbarAuto = /*#__PURE__*/ forwardRef((
 const $57acba87d6e25586$var$ScrollAreaScrollbarY = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
     const { sizes: sizes , onSizesChange: onSizesChange , ...scrollbarProps } = props;
     const context = $57acba87d6e25586$var$useScrollAreaContext($57acba87d6e25586$var$SCROLLBAR_NAME, props.__scopeScrollArea);
-    const [computedStyle, setComputedStyle] = useState$1();
+    const [computedStyle, setComputedStyle] = useState();
     const ref = useRef(null);
     const composeRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05$1(forwardedRef, ref, context.onScrollbarYChange);
-    useEffect$1(()=>{
+    useEffect(()=>{
         if (ref.current) setComputedStyle(getComputedStyle(ref.current));
     }, [
         ref
@@ -10105,7 +10105,7 @@ const $57acba87d6e25586$var$ScrollAreaScrollbarY = /*#__PURE__*/ forwardRef((pro
 const $57acba87d6e25586$var$ScrollAreaScrollbarImpl = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
     const { __scopeScrollArea: __scopeScrollArea , sizes: sizes , hasThumb: hasThumb , onThumbChange: onThumbChange , onThumbPointerUp: onThumbPointerUp , onThumbPointerDown: onThumbPointerDown , onThumbPositionChange: onThumbPositionChange , onDragScroll: onDragScroll , onWheelScroll: onWheelScroll , onResize: onResize , ...scrollbarProps } = props;
     const context = $57acba87d6e25586$var$useScrollAreaContext($57acba87d6e25586$var$SCROLLBAR_NAME, __scopeScrollArea);
-    const [scrollbar, setScrollbar] = useState$1(null);
+    const [scrollbar, setScrollbar] = useState(null);
     const composeRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05$1(forwardedRef, (node)=>setScrollbar(node)
     );
     const rectRef = useRef(null);
@@ -10128,7 +10128,7 @@ const $57acba87d6e25586$var$ScrollAreaScrollbarImpl = /*#__PURE__*/ forwardRef((
     /**
    * We bind wheel event imperatively so we can switch off passive
    * mode for document wheel event to allow it to be prevented
-   */ useEffect$1(()=>{
+   */ useEffect(()=>{
         const handleWheel = (event)=>{
             const element = event.target;
             const isScrollbarWheel = scrollbar === null || scrollbar === void 0 ? void 0 : scrollbar.contains(element);
@@ -10149,7 +10149,7 @@ const $57acba87d6e25586$var$ScrollAreaScrollbarImpl = /*#__PURE__*/ forwardRef((
     ]);
     /**
    * Update thumb position on sizes change
-   */ useEffect$1(handleThumbPositionChange, [
+   */ useEffect(handleThumbPositionChange, [
         sizes,
         handleThumbPositionChange
     ]);
@@ -10216,7 +10216,7 @@ const $57acba87d6e25586$var$ScrollAreaThumbImpl = /*#__PURE__*/ forwardRef((prop
             removeUnlinkedScrollListenerRef.current = undefined;
         }
     }, 100);
-    useEffect$1(()=>{
+    useEffect(()=>{
         const viewport = scrollAreaContext.viewport;
         if (viewport) {
             /**
@@ -10279,8 +10279,8 @@ const $57acba87d6e25586$export$56969d565df7cc4b = /*#__PURE__*/ forwardRef((prop
 /* -----------------------------------------------------------------------------------------------*/ const $57acba87d6e25586$var$ScrollAreaCornerImpl = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
     const { __scopeScrollArea: __scopeScrollArea , ...cornerProps } = props;
     const context = $57acba87d6e25586$var$useScrollAreaContext($57acba87d6e25586$var$CORNER_NAME, __scopeScrollArea);
-    const [width1, setWidth] = useState$1(0);
-    const [height1, setHeight] = useState$1(0);
+    const [width1, setWidth] = useState(0);
+    const [height1, setHeight] = useState(0);
     const hasSize = Boolean(width1 && height1);
     $57acba87d6e25586$var$useResizeObserver(context.scrollbarX, ()=>{
         var _context$scrollbarX;
@@ -10398,7 +10398,7 @@ const $57acba87d6e25586$var$addUnlinkedScrollListener = (node, handler = ()=>{})
 function $57acba87d6e25586$var$useDebounceCallback(callback, delay) {
     const handleCallback = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a$1(callback);
     const debounceTimerRef = useRef(0);
-    useEffect$1(()=>()=>window.clearTimeout(debounceTimerRef.current)
+    useEffect(()=>()=>window.clearTimeout(debounceTimerRef.current)
     , []);
     return useCallback(()=>{
         window.clearTimeout(debounceTimerRef.current);
@@ -10491,9 +10491,9 @@ const [$cc7e05a45900e73f$var$SelectNativeOptionsProvider, $cc7e05a45900e73f$var$
 const $cc7e05a45900e73f$export$ef9b1a59e592288f = (props)=>{
     const { __scopeSelect: __scopeSelect , children: children , open: openProp , defaultOpen: defaultOpen , onOpenChange: onOpenChange , value: valueProp , defaultValue: defaultValue , onValueChange: onValueChange , dir: dir , name: name , autoComplete: autoComplete , disabled: disabled , required: required  } = props;
     const popperScope = $cc7e05a45900e73f$var$usePopperScope(__scopeSelect);
-    const [trigger, setTrigger] = useState$1(null);
-    const [valueNode, setValueNode] = useState$1(null);
-    const [valueNodeHasChildren, setValueNodeHasChildren] = useState$1(false);
+    const [trigger, setTrigger] = useState(null);
+    const [valueNode, setValueNode] = useState(null);
+    const [valueNodeHasChildren, setValueNodeHasChildren] = useState(false);
     const direction = $f631663db3294ace$export$b39126d51d94e6f3(dir);
     const [open = false, setOpen] = $71cd76cc60e0454e$export$6f32135080cb4c3$1({
         prop: openProp,
@@ -10507,7 +10507,7 @@ const $cc7e05a45900e73f$export$ef9b1a59e592288f = (props)=>{
     });
     const triggerPointerDownPosRef = useRef(null); // We set this to true by default so that events bubble to forms without JS (SSR)
     const isFormControl = trigger ? Boolean(trigger.closest('form')) : true;
-    const [nativeOptionsSet, setNativeOptionsSet] = useState$1(new Set()); // The native `select` only associates the correct default value if the corresponding
+    const [nativeOptionsSet, setNativeOptionsSet] = useState(new Set()); // The native `select` only associates the correct default value if the corresponding
     // `option` is rendered as a child **at the same time** as itself.
     // Because it might take a few renders for our items to gather the information to build
     // the native `option`(s), we generate a key on the `select` to make sure React re-builds it
@@ -10681,7 +10681,7 @@ const $cc7e05a45900e73f$export$b2af6c9944296213 = (props)=>{
  * -----------------------------------------------------------------------------------------------*/ const $cc7e05a45900e73f$var$CONTENT_NAME = 'SelectContent';
 const $cc7e05a45900e73f$export$c973a4b3cb86a03d = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
     const context = $cc7e05a45900e73f$var$useSelectContext($cc7e05a45900e73f$var$CONTENT_NAME, props.__scopeSelect);
-    const [fragment, setFragment] = useState$1(); // setting the fragment in `useLayoutEffect` as `DocumentFragment` doesn't exist on the server
+    const [fragment, setFragment] = useState(); // setting the fragment in `useLayoutEffect` as `DocumentFragment` doesn't exist on the server
     $9f79659886946c16$export$e5c5a5f917a5871c$1(()=>{
         setFragment(new DocumentFragment());
     }, []);
@@ -10707,16 +10707,16 @@ const $cc7e05a45900e73f$var$SelectContentImpl = /*#__PURE__*/ forwardRef((props,
     side , sideOffset: sideOffset , align: align , alignOffset: alignOffset , arrowPadding: arrowPadding , collisionBoundary: collisionBoundary , collisionPadding: collisionPadding , sticky: sticky , hideWhenDetached: hideWhenDetached , avoidCollisions: avoidCollisions , //
     ...contentProps } = props;
     const context = $cc7e05a45900e73f$var$useSelectContext($cc7e05a45900e73f$var$CONTENT_NAME, __scopeSelect);
-    const [content, setContent] = useState$1(null);
-    const [viewport, setViewport] = useState$1(null);
+    const [content, setContent] = useState(null);
+    const [viewport, setViewport] = useState(null);
     const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05$1(forwardedRef, (node)=>setContent(node)
     );
-    const [selectedItem, setSelectedItem] = useState$1(null);
-    const [selectedItemText, setSelectedItemText] = useState$1(null);
+    const [selectedItem, setSelectedItem] = useState(null);
+    const [selectedItemText, setSelectedItemText] = useState(null);
     const getItems = $cc7e05a45900e73f$var$useCollection(__scopeSelect);
-    const [isPositioned, setIsPositioned] = useState$1(false);
+    const [isPositioned, setIsPositioned] = useState(false);
     const firstValidItemFoundRef = useRef(false); // aria-hide everything except the content (better supported equivalent to setting aria-modal)
-    useEffect$1(()=>{
+    useEffect(()=>{
         if (content) return hideOthers(content);
     }, [
         content
@@ -10753,7 +10753,7 @@ const $cc7e05a45900e73f$var$SelectContentImpl = /*#__PURE__*/ forwardRef((props,
         content
     ]); // Since this is not dependent on layout, we want to ensure this runs at the same time as
     // other effects across components. Hence why we don't call `focusSelectedItem` inside `position`.
-    useEffect$1(()=>{
+    useEffect(()=>{
         if (isPositioned) focusSelectedItem();
     }, [
         isPositioned,
@@ -10761,7 +10761,7 @@ const $cc7e05a45900e73f$var$SelectContentImpl = /*#__PURE__*/ forwardRef((props,
     ]); // prevent selecting items on `pointerup` in some cases after opening from `pointerdown`
     // and close on `pointerup` outside.
     const { onOpenChange: onOpenChange , triggerPointerDownPosRef: triggerPointerDownPosRef  } = context;
-    useEffect$1(()=>{
+    useEffect(()=>{
         if (content) {
             let pointerMoveDelta = {
                 x: 0,
@@ -10801,7 +10801,7 @@ const $cc7e05a45900e73f$var$SelectContentImpl = /*#__PURE__*/ forwardRef((props,
         onOpenChange,
         triggerPointerDownPosRef
     ]);
-    useEffect$1(()=>{
+    useEffect(()=>{
         const close = ()=>onOpenChange(false)
         ;
         window.addEventListener('blur', close);
@@ -10958,8 +10958,8 @@ const $cc7e05a45900e73f$var$SelectItemAlignedPosition = /*#__PURE__*/ forwardRef
     const { __scopeSelect: __scopeSelect , onPlaced: onPlaced , ...popperProps } = props;
     const context = $cc7e05a45900e73f$var$useSelectContext($cc7e05a45900e73f$var$CONTENT_NAME, __scopeSelect);
     const contentContext = $cc7e05a45900e73f$var$useSelectContentContext($cc7e05a45900e73f$var$CONTENT_NAME, __scopeSelect);
-    const [contentWrapper, setContentWrapper] = useState$1(null);
-    const [content, setContent] = useState$1(null);
+    const [contentWrapper, setContentWrapper] = useState(null);
+    const [content, setContent] = useState(null);
     const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05$1(forwardedRef, (node)=>setContent(node)
     );
     const getItems = $cc7e05a45900e73f$var$useCollection(__scopeSelect);
@@ -11062,7 +11062,7 @@ const $cc7e05a45900e73f$var$SelectItemAlignedPosition = /*#__PURE__*/ forwardRef
     , [
         position
     ]); // copy z-index from content to wrapper
-    const [contentZIndex, setContentZIndex] = useState$1();
+    const [contentZIndex, setContentZIndex] = useState();
     $9f79659886946c16$export$e5c5a5f917a5871c$1(()=>{
         if (content) setContentZIndex(window.getComputedStyle(content).zIndex);
     }, [
@@ -11166,8 +11166,8 @@ const $cc7e05a45900e73f$export$13ef48a934230896 = /*#__PURE__*/ forwardRef((prop
     const context = $cc7e05a45900e73f$var$useSelectContext($cc7e05a45900e73f$var$ITEM_NAME, __scopeSelect);
     const contentContext = $cc7e05a45900e73f$var$useSelectContentContext($cc7e05a45900e73f$var$ITEM_NAME, __scopeSelect);
     const isSelected = context.value === value;
-    const [textValue, setTextValue] = useState$1(textValueProp !== null && textValueProp !== void 0 ? textValueProp : '');
-    const [isFocused, setIsFocused] = useState$1(false);
+    const [textValue, setTextValue] = useState(textValueProp !== null && textValueProp !== void 0 ? textValueProp : '');
+    const [isFocused, setIsFocused] = useState(false);
     const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05$1(forwardedRef, (node)=>{
         var _contentContext$itemR;
         return (_contentContext$itemR = contentContext.itemRefCallback) === null || _contentContext$itemR === void 0 ? void 0 : _contentContext$itemR.call(contentContext, node, value, disabled);
@@ -11248,7 +11248,7 @@ const $cc7e05a45900e73f$export$3572fb0fb821ff49 = /*#__PURE__*/ forwardRef((prop
     const contentContext = $cc7e05a45900e73f$var$useSelectContentContext($cc7e05a45900e73f$var$ITEM_TEXT_NAME, __scopeSelect);
     const itemContext = $cc7e05a45900e73f$var$useSelectItemContext($cc7e05a45900e73f$var$ITEM_TEXT_NAME, __scopeSelect);
     const nativeOptionsContext = $cc7e05a45900e73f$var$useSelectNativeOptionsContext($cc7e05a45900e73f$var$ITEM_TEXT_NAME, __scopeSelect);
-    const [itemTextNode, setItemTextNode] = useState$1(null);
+    const [itemTextNode, setItemTextNode] = useState(null);
     const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05$1(forwardedRef, (node)=>setItemTextNode(node)
     , itemContext.onItemTextChange, (node)=>{
         var _contentContext$itemT;
@@ -11306,7 +11306,7 @@ const $cc7e05a45900e73f$export$eba4b1df07cb1d3 = /*#__PURE__*/ forwardRef((props
     const ref = useRef(null);
     const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05$1(forwardedRef, ref);
     const prevValue = $010c2913dbd2fe3d$export$5cae361ad82dce8b(value); // Bubble value change to parents (e.g form change event)
-    useEffect$1(()=>{
+    useEffect(()=>{
         const select = ref.current;
         const selectProto = window.HTMLSelectElement.prototype;
         const descriptor = Object.getOwnPropertyDescriptor(selectProto, 'value');
@@ -11361,7 +11361,7 @@ function $cc7e05a45900e73f$var$useTypeaheadSearch(onSearchChange) {
         searchRef.current = '';
         window.clearTimeout(timerRef.current);
     }, []);
-    useEffect$1(()=>{
+    useEffect(()=>{
         return ()=>window.clearTimeout(timerRef.current)
         ;
     }, []);
@@ -11610,7 +11610,7 @@ const [$6be4966fd9bbc698$var$createSwitchContext, $6be4966fd9bbc698$export$cf7f5
 const [$6be4966fd9bbc698$var$SwitchProvider, $6be4966fd9bbc698$var$useSwitchContext] = $6be4966fd9bbc698$var$createSwitchContext($6be4966fd9bbc698$var$SWITCH_NAME);
 const $6be4966fd9bbc698$export$b5d5cf8927ab7262 = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
     const { __scopeSwitch: __scopeSwitch , name: name , checked: checkedProp , defaultChecked: defaultChecked , required: required , disabled: disabled , value: value = 'on' , onCheckedChange: onCheckedChange , ...switchProps } = props;
-    const [button, setButton] = useState$1(null);
+    const [button, setButton] = useState(null);
     const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05$1(forwardedRef, (node)=>setButton(node)
     );
     const hasConsumerStoppedPropagationRef = useRef(false); // We set this to true by default so that events bubble to forms without JS (SSR)
@@ -11677,7 +11677,7 @@ const $6be4966fd9bbc698$export$4d07bf653ea69106 = /*#__PURE__*/ forwardRef((prop
     const ref = useRef(null);
     const prevChecked = $010c2913dbd2fe3d$export$5cae361ad82dce8b(checked);
     const controlSize = $db6c3485150b8e66$export$1ab7ae714698c4b8(control); // Bubble checked change to parents (e.g form change event)
-    useEffect$1(()=>{
+    useEffect(()=>{
         const input = ref.current;
         const inputProto = window.HTMLInputElement.prototype;
         const descriptor = Object.getOwnPropertyDescriptor(inputProto, 'checked');
@@ -15174,7 +15174,7 @@ function useReactTable(options) {
   return tableRef.current;
 }
 
-const TableContext = createContext$1(null);
+const TableContext = createContext(null);
 
 const useTable = () => {
     const ctx = useContext(TableContext);
@@ -15307,7 +15307,7 @@ const TableDetailContainer = ({ children, ...props }) => {
 };
 
 const useTableColumn = () => {
-    const [columns, setColumns] = useState$1([]);
+    const [columns, setColumns] = useState([]);
     const addFilterColumn = useCallback((column) => {
         const uniqeColumns = new Set([...columns, column]);
         setColumns(Array.from(uniqeColumns));
@@ -15365,7 +15365,7 @@ const Table = Object.assign(TableRoot, {
     Caption: TableCaption,
 });
 
-function DataTableRoot({ columns, data, emptyState, children, ...props }) {
+function DataTableRoot({ columns, data, emptyState, children, parentStyle, ...props }) {
     const convertedChildren = Children.toArray(children);
     const header = convertedChildren.find((child) => child.type === DataTableToolbar) || jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {});
     const footer = convertedChildren.find((child) => child.type === DataTableFooter) || jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {});
@@ -15409,7 +15409,7 @@ function DataTableRoot({ columns, data, emptyState, children, ...props }) {
                 resetColumns,
                 onGlobalFilterChange: setGlobalFilter,
                 onChange: () => ({}),
-            }, children: [jsxRuntimeExports.jsxs(Flex, { direction: "column", className: styles$4.datatable, children: [header, jsxRuntimeExports.jsxs(Flex, { children: [jsxRuntimeExports.jsxs(Table, { ...props, children: [jsxRuntimeExports.jsx(Table.Header, { children: table.getHeaderGroups().map((headerGroup) => (jsxRuntimeExports.jsx(Table.Row, { children: headerGroup.headers.map((header) => {
+            }, children: [jsxRuntimeExports.jsxs(Flex, { direction: "column", className: styles$4.datatable, children: [header, jsxRuntimeExports.jsxs(Flex, { style: parentStyle, children: [jsxRuntimeExports.jsxs(Table, { ...props, children: [jsxRuntimeExports.jsx(Table.Header, { children: table.getHeaderGroups().map((headerGroup) => (jsxRuntimeExports.jsx(Table.Row, { children: headerGroup.headers.map((header) => {
                                                     return (jsxRuntimeExports.jsx(Table.Head, { children: jsxRuntimeExports.jsxs(Text, { className: styles$4.head, children: [header.isPlaceholder
                                                                     ? null
                                                                     : flexRender(header.column.columnDef.header, header.getContext()), {
@@ -15537,7 +15537,7 @@ const $69cb30bb0017df05$export$bd905d70e8fd2ebb = /*#__PURE__*/ forwardRef((prop
     const contentId = $69cb30bb0017df05$var$makeContentId(context.baseId, value);
     const isSelected = value === context.value;
     const isMountAnimationPreventedRef = useRef(isSelected);
-    useEffect$1(()=>{
+    useEffect(()=>{
         const rAF = requestAnimationFrame(()=>isMountAnimationPreventedRef.current = false
         );
         return ()=>cancelAnimationFrame(rAF)
@@ -15602,136 +15602,228 @@ const Tabs = Object.assign(TabsRoot, {
     List: TabsList,
 });
 
-const isBrowser = () => typeof window !== "undefined";
-const getMediaTheme = () => {
-    if (!isBrowser())
-        return null;
-    // If they haven't been explicitly set, let's check the media query
-    const mqlDark = window.matchMedia("(prefers-color-scheme: dark)");
-    const hasMediaQueryPreference = typeof mqlDark.matches === "boolean";
-    if (hasMediaQueryPreference)
-        return mqlDark.matches ? "dark" : "light";
-    return null;
-};
-const listenForOSPreferenceChanges = (preferenceChanged) => {
-    if (!isBrowser())
-        return null;
-    // Listen out for if a user changes operating system mode,
-    // but don't save the change in local storage.
-    // The only two options here are dark or light.
-    window
-        .matchMedia("(prefers-color-scheme: dark)")
-        .addEventListener("change", (e) => {
-        preferenceChanged(e.matches ? "dark" : "light");
-    });
-    window
-        .matchMedia("(prefers-color-scheme: light)")
-        .addEventListener("change", (e) => {
-        preferenceChanged(e.matches ? "light" : "dark");
-    });
-};
-
-const themeLocalStorageKey = "theme";
-function isValidThemePreference(theme) {
-    return theme == "auto" || theme == "dark" || theme == "light";
-}
-const saveThemePreference = (newTheme) => {
-    try {
-        if (typeof newTheme === "string")
-            window.localStorage.setItem(themeLocalStorageKey, newTheme);
-    }
-    catch (e) {
-        console.warn(e);
-    }
-};
-const getSavedThemePreference = () => {
-    try {
-        const savedMode = window.localStorage.getItem(themeLocalStorageKey);
-        // If the user has explicitly chosen a colour mode,
-        // let's use it. Otherwise, this value will be null.
-        return isValidThemePreference(savedMode) ? savedMode : null;
-    }
-    catch (e) {
-        // When Chrome in incognito, localStorage cannot be accessed
-        console.warn(e);
-        return null;
-    }
-};
-
-const { createContext, useState, useEffect } = React__default;
-const defaultThemeName = "dark";
-const initialValues = {
-    themeName: defaultThemeName,
-    themePreference: defaultThemeName,
-    setTheme: () => { },
-};
-const ApsaraThemeContext = createContext(initialValues);
-ApsaraThemeContext.displayName = "ApsaraThemeContext ";
-const useTheme = () => {
-    const [themePreference, setThemePreference] = useState(defaultThemeName);
-    const [themeName, setThemeName] = useState(defaultThemeName);
-    const [osTheme, setOsTheme] = useState(getMediaTheme());
-    // in the future this should prefer auto if no saved
-    useEffect(() => {
-        const initialTheme = getSavedThemePreference();
-        if (isValidThemePreference(initialTheme)) {
-            setThemePreference(initialTheme);
+const colorSchemes = ["light", "dark"];
+const MEDIA = "(prefers-color-scheme: dark)";
+const isServer = typeof window === "undefined";
+const ThemeContext = createContext(undefined);
+const defaultContext = { setTheme: (_) => { }, themes: [] };
+const useTheme = () => useContext(ThemeContext) ?? defaultContext;
+const ThemeProvider = (props) => {
+    const context = useContext(ThemeContext);
+    // Ignore nested context providers, just passthrough children
+    if (context)
+        return jsxRuntimeExports.jsx(Fragment, { children: props.children });
+    return jsxRuntimeExports.jsx(Theme$1, { ...props });
+};
+const defaultThemes = ["light", "dark"];
+const Theme$1 = ({ forcedTheme, disableTransitionOnChange = false, enableSystem = true, enableColorScheme = true, storageKey = "theme", themes = defaultThemes, defaultTheme = enableSystem ? "system" : "light", attribute = "data-theme", value, children, nonce, }) => {
+    const [theme, setThemeState] = useState(() => getTheme(storageKey, defaultTheme));
+    const [resolvedTheme, setResolvedTheme] = useState(() => getTheme(storageKey));
+    const attrs = !value ? themes : Object.values(value);
+    const applyTheme = useCallback((theme) => {
+        let resolved = theme;
+        if (!resolved)
+            return;
+        // If theme is system, resolve it before setting theme
+        if (theme === "system" && enableSystem) {
+            resolved = getSystemTheme();
+        }
+        const name = value ? value[resolved] : resolved;
+        const enable = disableTransitionOnChange ? disableAnimation() : null;
+        const d = document.documentElement;
+        if (attribute === "class") {
+            d.classList.remove(...attrs);
+            if (name)
+                d.classList.add(name);
         }
         else {
-            setThemePreference(defaultThemeName);
+            if (name) {
+                d.setAttribute(attribute, name);
+            }
+            else {
+                d.removeAttribute(attribute);
+            }
+        }
+        if (enableColorScheme) {
+            const fallback = colorSchemes.includes(defaultTheme)
+                ? defaultTheme
+                : null;
+            const colorScheme = colorSchemes.includes(resolved) ? resolved : fallback;
+            // @ts-ignore
+            d.style.colorScheme = colorScheme;
         }
+        enable?.();
     }, []);
+    const setTheme = useCallback((theme) => {
+        setThemeState(theme);
+        // Save to storage
+        try {
+            localStorage.setItem(storageKey, theme);
+        }
+        catch (e) {
+            // Unsupported
+        }
+    }, [forcedTheme]);
+    const handleMediaQuery = useCallback((e) => {
+        const resolved = getSystemTheme(e);
+        setResolvedTheme(resolved);
+        if (theme === "system" && enableSystem && !forcedTheme) {
+            applyTheme("system");
+        }
+    }, [theme, forcedTheme]);
+    // Always listen to System preference
+    useEffect(() => {
+        const media = window.matchMedia(MEDIA);
+        // Intentionally use deprecated listener methods to support iOS & old browsers
+        media.addListener(handleMediaQuery);
+        handleMediaQuery(media);
+        return () => media.removeListener(handleMediaQuery);
+    }, [handleMediaQuery]);
+    // localStorage event handling
+    useEffect(() => {
+        const handleStorage = (e) => {
+            if (e.key !== storageKey) {
+                return;
+            }
+            // If default theme set, use it if localstorage === null (happens on local storage manual deletion)
+            const theme = e.newValue || defaultTheme;
+            setTheme(theme);
+        };
+        window.addEventListener("storage", handleStorage);
+        return () => window.removeEventListener("storage", handleStorage);
+    }, [setTheme]);
+    // Whenever theme or forcedTheme changes, apply it
     useEffect(() => {
-        if (themePreference == "auto") {
-            setThemeName(osTheme ?? defaultThemeName);
+        // @ts-ignore
+        applyTheme(forcedTheme ?? theme);
+    }, [forcedTheme, theme]);
+    const providerValue = useMemo(() => ({
+        theme,
+        setTheme,
+        forcedTheme,
+        resolvedTheme: theme === "system" ? resolvedTheme : theme,
+        themes: enableSystem ? [...themes, "system"] : themes,
+        systemTheme: (enableSystem ? resolvedTheme : undefined),
+    }), [theme, setTheme, forcedTheme, resolvedTheme, enableSystem, themes]);
+    return (jsxRuntimeExports.jsxs(ThemeContext.Provider, { value: providerValue, children: [jsxRuntimeExports.jsx(ThemeScript, { ...{
+                    forcedTheme,
+                    disableTransitionOnChange,
+                    enableSystem,
+                    enableColorScheme,
+                    storageKey,
+                    themes,
+                    defaultTheme,
+                    attribute,
+                    value,
+                    children,
+                    attrs,
+                    nonce,
+                } }), children] }));
+};
+const ThemeScript = memo$1(({ forcedTheme, storageKey, attribute, enableSystem, enableColorScheme, defaultTheme, value, attrs, nonce, }) => {
+    const defaultSystem = defaultTheme === "system";
+    // Code-golfing the amount of characters in the script
+    const optimization = (() => {
+        if (attribute === "class") {
+            const removeClasses = `c.remove(${attrs
+                .map((t) => `'${t}'`)
+                .join(",")})`;
+            return `var d=document.documentElement,c=d.classList;${removeClasses};`;
         }
         else {
-            setThemeName(themePreference);
+            return `var d=document.documentElement,n='${attribute}',s='setAttribute';`;
         }
-    }, [themePreference]);
-    useEffect(() => {
-        // if os theme changes and we are in auto mode, change up
-        if (themePreference == "auto") {
-            setThemeName(osTheme ?? defaultThemeName);
+    })();
+    const fallbackColorScheme = (() => {
+        if (!enableColorScheme) {
+            return "";
         }
-    }, [osTheme]);
-    useEffect(() => {
-        const html = document.documentElement;
-        for (const k of ["dark", "light"]) {
-            html.classList.remove(k);
-        }
-        html.classList.add(themeName);
-    }, [themeName]);
-    listenForOSPreferenceChanges((osPref) => {
-        if (osPref === osTheme)
-            return;
-        setOsTheme(osPref);
-    });
-    return {
-        themeName,
-        themePreference: themePreference,
-        setTheme: (newTheme) => {
-            setThemePreference(newTheme);
-            saveThemePreference(newTheme);
-        },
+        const fallback = colorSchemes.includes(defaultTheme)
+            ? defaultTheme
+            : null;
+        if (fallback) {
+            return `if(e==='light'||e==='dark'||!e)d.style.colorScheme=e||'${defaultTheme}'`;
+        }
+        else {
+            return `if(e==='light'||e==='dark')d.style.colorScheme=e`;
+        }
+    })();
+    const updateDOM = (name, literal = false, setColorScheme = true) => {
+        const resolvedName = value ? value[name] : name;
+        const val = literal ? name + `|| ''` : `'${resolvedName}'`;
+        let text = "";
+        // MUCH faster to set colorScheme alongside HTML attribute/class
+        // as it only incurs 1 style recalculation rather than 2
+        // This can save over 250ms of work for pages with big DOM
+        if (enableColorScheme &&
+            setColorScheme &&
+            !literal &&
+            colorSchemes.includes(name)) {
+            text += `d.style.colorScheme = '${name}';`;
+        }
+        if (attribute === "class") {
+            if (literal || resolvedName) {
+                text += `c.add(${val})`;
+            }
+            else {
+                text += `null`;
+            }
+        }
+        else {
+            if (resolvedName) {
+                text += `d[s](n,${val})`;
+            }
+        }
+        return text;
     };
-};
-const ApsaraThemeProvider = ({ children }) => {
-    const { themePreference, setTheme, themeName } = useTheme();
-    return (jsxRuntimeExports.jsx(ApsaraThemeContext.Provider, { value: {
-            themeName,
-            themePreference,
-            setTheme,
-        }, children: children }));
-};
-function useApsaraTheme() {
-    const context = useContext(ApsaraThemeContext);
-    if (!context) {
-        throw new Error("[Apsara UI 2.0]: useApsaraTheme must be used within a ApsaraThemeProvider");
+    const scriptSrc = (() => {
+        if (forcedTheme) {
+            return `!function(){${optimization}${updateDOM(forcedTheme)}}()`;
+        }
+        if (enableSystem) {
+            return `!function(){try{${optimization}var e=localStorage.getItem('${storageKey}');if('system'===e||(!e&&${defaultSystem})){var t='${MEDIA}',m=window.matchMedia(t);if(m.media!==t||m.matches){${updateDOM("dark")}}else{${updateDOM("light")}}}else if(e){${value ? `var x=${JSON.stringify(value)};` : ""}${updateDOM(value ? `x[e]` : "e", true)}}${!defaultSystem
+                ? `else{` + updateDOM(defaultTheme, false, false) + "}"
+                : ""}${fallbackColorScheme}}catch(e){}}()`;
+        }
+        return `!function(){try{${optimization}var e=localStorage.getItem('${storageKey}');if(e){${value ? `var x=${JSON.stringify(value)};` : ""}${updateDOM(value ? `x[e]` : "e", true)}}else{${updateDOM(defaultTheme, false, false)};}${fallbackColorScheme}}catch(t){}}();`;
+    })();
+    return (jsxRuntimeExports.jsx("script", { nonce: nonce, dangerouslySetInnerHTML: { __html: scriptSrc } }));
+}, 
+// Never re-render this component
+() => true);
+// Helpers
+const getTheme = (key, fallback) => {
+    if (isServer)
+        return undefined;
+    let theme;
+    try {
+        theme = localStorage.getItem(key) || undefined;
     }
-    const { themePreference, setTheme, themeName } = context;
-    return { themePreference, setTheme, themeName };
-}
+    catch (e) {
+        // Unsupported
+    }
+    return theme || fallback;
+};
+const disableAnimation = () => {
+    const css = document.createElement("style");
+    css.appendChild(document.createTextNode(`*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`));
+    document.head.appendChild(css);
+    return () => {
+        // Force restyle
+        (() => window.getComputedStyle(document.body))();
+        // Wait for next tick before removing
+        setTimeout(() => {
+            document.head.removeChild(css);
+        }, 1);
+    };
+};
+const getSystemTheme = (e) => {
+    if (!e)
+        e = window.matchMedia(MEDIA);
+    const isDark = e.matches;
+    const systemTheme = isDark ? "dark" : "light";
+    return systemTheme;
+};
 
 var Theme;
 (function (Theme) {
@@ -15739,11 +15831,11 @@ var Theme;
     Theme["LIGHT"] = "light";
 })(Theme || (Theme = {}));
 function ThemeSwitcher({ size = 30, ...props }) {
-    const { themeName, setTheme } = useApsaraTheme();
+    const { theme, setTheme } = useTheme();
     const onClickHandler = () => {
-        setTheme(themeName === Theme.DARK ? Theme.LIGHT : Theme.DARK);
+        setTheme(theme === Theme.DARK ? Theme.LIGHT : Theme.DARK);
     };
-    return (jsxRuntimeExports.jsx(Box, { ...props, children: themeName === Theme.DARK ? (jsxRuntimeExports.jsx(SunIcon, { width: size, height: size, onClick: onClickHandler })) : (jsxRuntimeExports.jsx(MoonIcon, { width: size, height: size, onClick: onClickHandler })) }));
+    return (jsxRuntimeExports.jsx(Box, { ...props, children: theme === Theme.DARK ? (jsxRuntimeExports.jsx(SunIcon, { width: size, height: size, onClick: onClickHandler })) : (jsxRuntimeExports.jsx(MoonIcon, { width: size, height: size, onClick: onClickHandler })) }));
 }
 
 var styles = {"title":"title-module_title__r78X4","title-small":"title-module_title-small__aS4B3","title-medium":"title-module_title-medium__e8yQc","title-large":"title-module_title-large__TVRRL"};
@@ -15764,5 +15856,5 @@ function Title({ children, className, size, ...props }) {
     return (jsxRuntimeExports.jsx("span", { className: title({ size, className }), ...props, children: children }));
 }
 
-export { ApsaraThemeProvider, Avatar, badge$1 as Badge, Body, Box, Button, Checkbox, Command, Container, DataTable, Dialog, Display, DropdownMenu, EmptyState, Flex, Grid, Headline, Image, InputField, Label, Link, Popover, Radio, ScrollArea, Select, Separator, Sheet, Sidebar, Switch, Table, Tabs, Text, TextField, ThemeSwitcher, Title, useApsaraTheme, useTable };
+export { Avatar, badge$1 as Badge, Body, Box, Button, Checkbox, Command, Container, DataTable, Dialog, Display, DropdownMenu, EmptyState, Flex, Grid, Headline, Image, InputField, Label, Link, Popover, Radio, ScrollArea, Select, Separator, Sheet, Sidebar, Switch, Table, Tabs, Text, TextField, ThemeProvider, ThemeSwitcher, Title, useTable, useTheme };
 //# sourceMappingURL=index.js.map