@apple-pie/slice 0.1.26 → 0.1.29

package/dist/cjs/hooks/useMicrophone.js

@@ -3,8 +3,25 @@
 
 var tslib_es6 = require("../chunks/tslib.es6-C8dZW5nY.js"), React = require("react");
 
-exports.useMicrophone = function(startMuted = !0, microphoneDeviceId) {
-    const micStream = React.useRef(null), micTrack = React.useRef(null), mutedRef = React.useRef(startMuted), mountedRef = React.useRef(!0), initializedRef = React.useRef(!1), [microphones, setMicrophones] = React.useState([]), [micOptions, setMicOptions] = React.useState([]), [muted, setMuted] = React.useState(startMuted), [isRequesting, setIsRequesting] = React.useState(!1), [error, setError] = React.useState(null), waitForPaint = React.useCallback(() => tslib_es6.__awaiter(this, void 0, void 0, function*() {
+exports.useMicrophone = function(startMuted = !0, microphoneDeviceId, autoRequest = !0) {
+    const micStream = React.useRef(null), processedMicStream = React.useRef(null), micTrack = React.useRef(null), audioContextRef = React.useRef(null), sourceNodeRef = React.useRef(null), gainNodeRef = React.useRef(null), destinationNodeRef = React.useRef(null), inputVolumeRef = React.useRef(1), mutedRef = React.useRef(startMuted), mountedRef = React.useRef(!0), initializedRef = React.useRef(!1), [microphones, setMicrophones] = React.useState([]), [micOptions, setMicOptions] = React.useState([]), [currentDeviceId, setCurrentDeviceId] = React.useState(null), [isActive, setIsActive] = React.useState(!1), [inputVolume, setInputVolumeState] = React.useState(1), [muted, setMuted] = React.useState(startMuted), [isRequesting, setIsRequesting] = React.useState(!1), [error, setError] = React.useState(null), normalizeInputVolume = React.useCallback(volume => Number.isFinite(volume) ? Math.min(1, Math.max(0, volume)) : 1, []), resetAudioProcessing = React.useCallback(() => {
+        var _a, _b, _c, _d;
+        null === (_a = sourceNodeRef.current) || void 0 === _a || _a.disconnect(), null === (_b = gainNodeRef.current) || void 0 === _b || _b.disconnect(), 
+        null === (_c = destinationNodeRef.current) || void 0 === _c || _c.disconnect(), 
+        null === (_d = audioContextRef.current) || void 0 === _d || _d.close().catch(() => null), 
+        sourceNodeRef.current = null, gainNodeRef.current = null, destinationNodeRef.current = null, 
+        audioContextRef.current = null, processedMicStream.current = null;
+    }, []), setupAudioProcessing = React.useCallback(stream => {
+        var _a;
+        resetAudioProcessing();
+        const AudioContextCtor = null !== (_a = globalThis.AudioContext) && void 0 !== _a ? _a : globalThis.webkitAudioContext;
+        if (!AudioContextCtor) return processedMicStream.current = stream, stream;
+        const context = new AudioContextCtor, source = context.createMediaStreamSource(stream), gain = context.createGain(), destination = context.createMediaStreamDestination();
+        return gain.gain.value = normalizeInputVolume(inputVolumeRef.current), source.connect(gain), 
+        gain.connect(destination), audioContextRef.current = context, sourceNodeRef.current = source, 
+        gainNodeRef.current = gain, destinationNodeRef.current = destination, processedMicStream.current = destination.stream, 
+        destination.stream;
+    }, [ normalizeInputVolume, resetAudioProcessing ]), waitForPaint = React.useCallback(() => tslib_es6.__awaiter(this, void 0, void 0, function*() {
         yield new Promise(resolve => {
             requestAnimationFrame(() => resolve());
         });
@@ -19,10 +36,12 @@ exports.useMicrophone = function(startMuted = !0, microphoneDeviceId) {
         }));
     }), []), stopMicStream = React.useCallback(() => {
         var _a;
+        resetAudioProcessing();
         const tracks = null === (_a = micStream.current) || void 0 === _a ? void 0 : _a.getTracks();
         for (const track of null != tracks ? tracks : []) track.stop();
-        micStream.current = null, micTrack.current = null;
-    }, []), hasMediaSupport = React.useMemo(() => {
+        micStream.current = null, micTrack.current = null, processedMicStream.current = null, 
+        setCurrentDeviceId(null), setIsActive(!1);
+    }, [ resetAudioProcessing ]), hasMediaSupport = React.useMemo(() => {
         var _a;
         return "undefined" != typeof navigator && Boolean(null === (_a = navigator.mediaDevices) || void 0 === _a ? void 0 : _a.getUserMedia);
     }, []), getMicTrack = React.useCallback(() => {
@@ -30,9 +49,13 @@ exports.useMicrophone = function(startMuted = !0, microphoneDeviceId) {
         const audioTrack = micStream.current.getAudioTracks()[0];
         if (!audioTrack) throw new Error("No audio track found");
         return audioTrack;
-    }, []), muteMic = React.useCallback(() => (getMicTrack().enabled = !1, mutedRef.current = !0, 
-    setMuted(!0), !0), [ getMicTrack ]), unmuteMic = React.useCallback(() => (getMicTrack().enabled = !0, 
-    mutedRef.current = !1, setMuted(!1), !0), [ getMicTrack ]), constraints = React.useCallback((deviceId, usePreferredDevice = !0) => {
+    }, []), hasActiveStream = React.useCallback(() => !(!micStream.current || !micTrack.current) && "live" === micTrack.current.readyState, []), muteMic = React.useCallback(() => (getMicTrack().enabled = !1, 
+    mutedRef.current = !0, setMuted(!0), !0), [ getMicTrack ]), unmuteMic = React.useCallback(() => (getMicTrack().enabled = !0, 
+    mutedRef.current = !1, setMuted(!1), !0), [ getMicTrack ]), setInputVolume = React.useCallback(volume => {
+        const nextVolume = normalizeInputVolume(volume);
+        return inputVolumeRef.current = nextVolume, setInputVolumeState(nextVolume), gainNodeRef.current && (gainNodeRef.current.gain.value = nextVolume), 
+        nextVolume;
+    }, [ normalizeInputVolume ]), constraints = React.useCallback((deviceId, usePreferredDevice = !0) => {
         var _a;
         const id = usePreferredDevice ? null !== (_a = null != deviceId ? deviceId : microphoneDeviceId) && void 0 !== _a ? _a : void 0 : deviceId;
         return {
@@ -43,36 +66,56 @@ exports.useMicrophone = function(startMuted = !0, microphoneDeviceId) {
             }
         };
     }, [ microphoneDeviceId ]), requestStream = React.useCallback((deviceId_1, ...args_1) => tslib_es6.__awaiter(this, [ deviceId_1, ...args_1 ], void 0, function*(deviceId, usePreferredDevice = !0) {
+        var _a;
         return micStream.current = yield navigator.mediaDevices.getUserMedia(constraints(deviceId, usePreferredDevice)), 
-        micTrack.current = getMicTrack(), micTrack.current.enabled = !mutedRef.current, 
-        mutedRef.current || (yield waitForTrackToBecomeActive(micTrack.current)), micStream.current;
-    }), [ constraints, getMicTrack, waitForTrackToBecomeActive ]), requestMicrophone = React.useCallback(() => tslib_es6.__awaiter(this, void 0, void 0, function*() {
+        setupAudioProcessing(micStream.current), micTrack.current = getMicTrack(), setCurrentDeviceId(null !== (_a = micTrack.current.getSettings().deviceId) && void 0 !== _a ? _a : null), 
+        micTrack.current.enabled = !mutedRef.current, mutedRef.current || (yield waitForTrackToBecomeActive(micTrack.current)), 
+        setIsActive(Boolean("live" === micTrack.current.readyState)), micStream.current;
+    }), [ constraints, getMicTrack, setupAudioProcessing, waitForTrackToBecomeActive ]), requestMicrophone = React.useCallback(() => tslib_es6.__awaiter(this, void 0, void 0, function*() {
+        if (hasActiveStream()) return setIsActive(!0), setError(null), micStream.current;
         if (setIsRequesting(!0), yield waitForPaint(), !hasMediaSupport) {
-            const nextError = new Error("Microphone access is not supported");
-            return setError(nextError), mountedRef.current && setIsRequesting(!1), null;
+            const nextError = new Error("Microphone access isn't supported");
+            return setError(nextError), setCurrentDeviceId(null), setIsActive(!1), mountedRef.current && setIsRequesting(!1), 
+            null;
         }
         setError(null), stopMicStream();
         try {
             return yield requestStream();
         } catch (error) {
             if (!(error instanceof DOMException && "OverconstrainedError" === error.name || error instanceof DOMException && "NotFoundError" === error.name)) {
-                const nextError = error instanceof Error ? error : new Error("Failed to access microphone");
-                throw setError(nextError), nextError;
+                let nextError = new Error("Failed to access microphone");
+                throw error instanceof Error && (error.message.toLowerCase().includes("denied permission") || "NotAllowedError" === error.name) && (nextError = new Error("Permission to access the microphone was denied")), 
+                setError(nextError), setCurrentDeviceId(null), setIsActive(!1), nextError;
             }
             return yield requestStream(void 0, !1);
         } finally {
             setIsRequesting(!1);
         }
-    }), [ hasMediaSupport, requestStream, stopMicStream, waitForPaint ]), refreshMicrophones = React.useCallback(() => tslib_es6.__awaiter(this, void 0, void 0, function*() {
+    }), [ hasActiveStream, hasMediaSupport, requestStream, stopMicStream, waitForPaint ]), refreshMicrophones = React.useCallback(() => tslib_es6.__awaiter(this, void 0, void 0, function*() {
+        var _a;
         if (!hasMediaSupport) return [];
         try {
-            const devices = yield navigator.mediaDevices.enumerateDevices(), mics = devices.filter(device => "audioinput" === device.kind), options = mics.map(mic => ({
+            const devices = yield navigator.mediaDevices.enumerateDevices(), currentDeviceId = null === (_a = micTrack.current) || void 0 === _a ? void 0 : _a.getSettings().deviceId, mics = function(devices, activeDeviceId) {
+                const microphones = [ ...devices ], defaultIndex = microphones.findIndex(device => "default" === device.deviceId);
+                if (defaultIndex > 0) {
+                    const [defaultDevice] = microphones.splice(defaultIndex, 1);
+                    return microphones.unshift(defaultDevice), microphones;
+                }
+                if (0 === defaultIndex) return microphones;
+                if (!activeDeviceId) return microphones;
+                const activeIndex = microphones.findIndex(device => device.deviceId === activeDeviceId);
+                if (activeIndex > 0) {
+                    const [activeDevice] = microphones.splice(activeIndex, 1);
+                    microphones.unshift(activeDevice);
+                }
+                return microphones;
+            }(devices.filter(device => "audioinput" === device.kind), currentDeviceId), options = mics.map(mic => ({
                 value: {
                     id: mic.deviceId
                 },
                 label: mic.label
             }));
-            return setMicrophones(mics), setMicOptions(options), devices.filter(device => "audioinput" === device.kind);
+            return setMicrophones(mics), setMicOptions(options), mics;
         } catch (error) {
             return console.warn("Error getting microphone devices:", error), setMicrophones([]), 
             setMicOptions([]), [];
@@ -84,7 +127,7 @@ exports.useMicrophone = function(startMuted = !0, microphoneDeviceId) {
         try {
             setError(null), stopMicStream(), yield requestStream(id, !1);
         } catch (err) {
-            setError(err instanceof Error ? err : new Error("Error switching microphone")), 
+            setCurrentDeviceId(null), setIsActive(!1), setError(err instanceof Error ? err : new Error("Error switching microphone")), 
             console.warn("Error switching microphone:", err);
         } finally {
             setIsRequesting(!1);
@@ -98,14 +141,16 @@ exports.useMicrophone = function(startMuted = !0, microphoneDeviceId) {
     }, [ muted, unmuteMic, muteMic ]);
     return React.useEffect(() => {
         if (mountedRef.current = !0, hasMediaSupport && !initializedRef.current) return initializedRef.current = !0, 
-        requestMicrophone().then(() => {
+        autoRequest ? (requestMicrophone().then(() => {
             startMuted && muteMic();
         }).catch(err => {
             console.error("Error accessing microphone:", err);
         }), () => {
             mountedRef.current = !1, stopMicStream();
-        };
-    }, [ hasMediaSupport, requestMicrophone, startMuted, muteMic, stopMicStream ]), 
+        }) : (refreshMicrophones(), () => {
+            mountedRef.current = !1, stopMicStream();
+        });
+    }, [ autoRequest, hasMediaSupport, refreshMicrophones, requestMicrophone, startMuted, muteMic, stopMicStream ]), 
     React.useEffect(() => {
         var _a;
         if (!hasMediaSupport || !(null === (_a = navigator.mediaDevices) || void 0 === _a ? void 0 : _a.addEventListener)) return;
@@ -125,7 +170,11 @@ exports.useMicrophone = function(startMuted = !0, microphoneDeviceId) {
     }, [ hasMediaSupport, microphoneDeviceId, refreshMicrophones, requestMicrophone ]), 
     {
         micStream: micStream,
+        processedMicStream: processedMicStream,
         micTrack: micTrack,
+        currentDeviceId: currentDeviceId,
+        isActive: isActive,
+        inputVolume: inputVolume,
         muted: muted,
         isSupported: hasMediaSupport,
         isRequesting: isRequesting,
@@ -137,6 +186,7 @@ exports.useMicrophone = function(startMuted = !0, microphoneDeviceId) {
         muteMic: muteMic,
         unmuteMic: unmuteMic,
         toggleMute: toggleMute,
+        setInputVolume: setInputVolume,
         refreshMicrophones: refreshMicrophones,
         setMicrophone: setMicrophone
     };

package/dist/cjs/hooks/useTheme.js

@@ -1,22 +1,30 @@
 'use client';
 "use strict";
 
-var React = require("react"), theme_themes = require("../theme/themes.js"), theme_colors = require("../theme/colors.js"), theme_type = require("../theme/type.js"), hooks_useObserveTheme = require("./useObserveTheme.js");
+var React = require("react"), providers_ThemeProvider = require("../providers/ThemeProvider.js"), theme_themes = require("../theme/themes.js"), theme_colors = require("../theme/colors.js"), theme_type = require("../theme/type.js"), hooks_useObserveTheme = require("./useObserveTheme.js");
+
+function setDocumentTheme(name, system) {
+    "undefined" != typeof document && (document.documentElement.dataset.sliceTheme = name, 
+    document.cookie = `slice-theme=${encodeURIComponent(name)}; path=/; max-age=31536000; samesite=lax`, 
+    document.cookie = `slice-system-theme=${encodeURIComponent(system)}; path=/; max-age=31536000; samesite=lax`);
+}
 
-require("../theme/corners.js"), require("../theme/elevations.js"), require("../theme/motion.js"), 
-require("../providers/ThemeProvider.js"), require("react/jsx-runtime"), require("../chunks/style-inject.es-CMuL-BfJ.js"), 
-exports.useTheme = 
 /**
  * Hook to manage Slice theming
- */
-function() {
-    const current = hooks_useObserveTheme.useObserveTheme(), set = React.useCallback(newTheme => {
-        let theme;
+ */ require("react/jsx-runtime"), require("../chunks/style-inject.es-CMuL-BfJ.js"), 
+require("../theme/corners.js"), require("../theme/elevations.js"), require("../theme/motion.js"), 
+exports.useTheme = function() {
+    const current = hooks_useObserveTheme.useObserveTheme(), {systemTheme: systemTheme, setSystemTheme: setSystemTheme} = providers_ThemeProvider.useThemeContext(), set = React.useCallback(newTheme => {
+        let theme, system = !1;
         if ("string" == typeof newTheme) if ("system" === newTheme) {
+            system = !0;
             theme = globalThis.matchMedia("(prefers-color-scheme: dark)").matches ? theme_themes.darkTheme : theme_themes.lightTheme;
         } else theme = newTheme === theme_themes.darkTheme.name ? theme_themes.darkTheme : theme_themes.lightTheme; else theme = newTheme;
-        document.documentElement.dataset.sliceTheme = theme.name;
-    }, []), isDark = React.useMemo(() => current.name === theme_themes.darkTheme.name, [ current ]);
+        setSystemTheme(system), setDocumentTheme(theme.name, system);
+    }, [ setSystemTheme ]), toggle = React.useCallback(() => {
+        const newTheme = current.name === theme_themes.lightTheme.name ? theme_themes.darkTheme : theme_themes.lightTheme;
+        setSystemTheme(!1), setDocumentTheme(newTheme.name, !1);
+    }, [ current.name, setSystemTheme ]), isDark = React.useMemo(() => current.name === theme_themes.darkTheme.name, [ current ]);
     return {
         /**
          * Slice's default dark theme
@@ -52,15 +60,16 @@ function() {
          */
         set: set,
         /**
-         * Toggle between light and dark themes
+         * Togglebetween light and dark themes
          */
-        toggle: () => {
-            const newTheme = current.name === theme_themes.lightTheme.name ? theme_themes.darkTheme : theme_themes.lightTheme;
-            document.documentElement.dataset.sliceTheme = newTheme.name;
-        },
+        toggle: toggle,
         /**
          * If the currently active theme is the Slice's default dark theme'
          */
-        isDark: isDark
+        isDark: isDark,
+        /**
+         * True when the current theme is still being derived from the OS preference
+         */
+        systemTheme: systemTheme
     };
 };

package/dist/cjs/hooks/useToolTip.js

@@ -10,16 +10,19 @@ const hiddenCoords = {
 
 exports.useToolTip = function(toolTip, tipElement) {
     const [coords, setCoords] = React.useState(hiddenCoords), adjustX = React.useCallback(x => {
+        var _a;
         if (x < 10) return 10;
-        const maxWidth = globalThis.innerWidth - 10;
-        if (x > maxWidth) {
-            return x - (x - maxWidth);
+        if (!tipElement.current) return x;
+        const maxWidth = globalThis.innerWidth - 10, tipWdithStyle = null !== (_a = globalThis.getComputedStyle(tipElement.current).width) && void 0 !== _a ? _a : 0, endX = x + Number.parseInt(tipWdithStyle.replace("px", ""));
+        if (endX > maxWidth) {
+            return x - (endX - maxWidth);
         }
         return x;
-    }, []), adjustY = React.useCallback((y, parentY) => {
-        var _a, _b;
+    }, [ tipElement ]), adjustY = React.useCallback((y, parentY) => {
+        var _a;
         if (y < 10) return 10;
-        const tipHeight = null !== (_b = null === (_a = tipElement.current) || void 0 === _a ? void 0 : _a.offsetHeight) && void 0 !== _b ? _b : 0;
+        if (!tipElement.current) return y;
+        const tipHeightStyle = null !== (_a = globalThis.getComputedStyle(tipElement.current).height) && void 0 !== _a ? _a : 0, tipHeight = Number.parseInt(tipHeightStyle.replace("px", ""));
         return y + tipHeight > globalThis.innerHeight - 10 ? parentY - tipHeight - 10 : y;
     }, [ tipElement ]);
     return React.useLayoutEffect(() => {

package/dist/cjs/hooks/useTrackRenders.js

@@ -1,7 +1,7 @@
 'use client';
 "use strict";
 
-var React = require("react"), misc = require("../chunks/misc-BTF7BCZW.js");
+var React = require("react"), misc = require("../chunks/misc-CTl4GDxI.js");
 
 require("../chunks/tslib.es6-C8dZW5nY.js"), exports.useTrackRenders = 
 /**

package/dist/cjs/hooks.js

@@ -2,10 +2,10 @@
 
 var hooks_useTheme = require("./hooks/useTheme.js"), hooks_useObserveTheme = require("./hooks/useObserveTheme.js"), hooks_useDoubleClick = require("./hooks/useDoubleClick.js"), hooks_useToolTip = require("./hooks/useToolTip.js"), hooks_useKeyboardShortcuts = require("./hooks/useKeyboardShortcuts.js"), hooks_useLastUpdated = require("./hooks/useLastUpdated.js"), hooks_useLocalStore = require("./hooks/useLocalStore.js"), hooks_useMdStreamBuffer = require("./hooks/useMdStreamBuffer.js"), hooks_useMicrophone = require("./hooks/useMicrophone.js"), hooks_useAudioRecorder = require("./hooks/useAudioRecorder.js"), hooks_useWindow = require("./hooks/useWindow.js"), hooks_useObserveResize = require("./hooks/useObserveResize.js");
 
-require("react"), require("./theme/themes.js"), require("./theme/colors.js"), require("./theme/corners.js"), 
-require("./theme/elevations.js"), require("./theme/motion.js"), require("./theme/type.js"), 
-require("./providers/ThemeProvider.js"), require("react/jsx-runtime"), require("./chunks/style-inject.es-CMuL-BfJ.js"), 
-require("./chunks/tslib.es6-C8dZW5nY.js"), require("./chunks/MdStreamBuffer-DObxjnAm.js"), 
+require("react"), require("./providers/ThemeProvider.js"), require("react/jsx-runtime"), 
+require("./chunks/style-inject.es-CMuL-BfJ.js"), require("./theme/themes.js"), require("./theme/colors.js"), 
+require("./theme/corners.js"), require("./theme/elevations.js"), require("./theme/motion.js"), 
+require("./theme/type.js"), require("./chunks/tslib.es6-C8dZW5nY.js"), require("./chunks/MdStreamBuffer-CvLO7CVi.js"), 
 exports.useTheme = hooks_useTheme.useTheme, exports.useObserveTheme = hooks_useObserveTheme.useObserveTheme, 
 exports.useDoubleClick = hooks_useDoubleClick.useDoubleClick, exports.useToolTip = hooks_useToolTip.useToolTip, 
 exports.useKeyboardShortcuts = hooks_useKeyboardShortcuts.useKeyboardShortcuts, 

package/dist/cjs/index.js

@@ -1,11 +1,11 @@
 "use strict";
 
-var sharedTypes = require("./chunks/sharedTypes-gCECyn2N.js"), theme_themes = require("./theme/themes.js"), theme_colors = require("./theme/colors.js"), theme_elevations = require("./theme/elevations.js"), theme_motion = require("./theme/motion.js"), hooks_useTheme = require("./hooks/useTheme.js"), hooks_useObserveTheme = require("./hooks/useObserveTheme.js"), hooks_useDoubleClick = require("./hooks/useDoubleClick.js"), hooks_useToolTip = require("./hooks/useToolTip.js"), hooks_useKeyboardShortcuts = require("./hooks/useKeyboardShortcuts.js"), hooks_useLastUpdated = require("./hooks/useLastUpdated.js"), hooks_useLocalStore = require("./hooks/useLocalStore.js"), hooks_useMdStreamBuffer = require("./hooks/useMdStreamBuffer.js"), hooks_useMicrophone = require("./hooks/useMicrophone.js"), hooks_useAudioRecorder = require("./hooks/useAudioRecorder.js"), hooks_useWindow = require("./hooks/useWindow.js"), hooks_useObserveResize = require("./hooks/useObserveResize.js"), AudioBubble = require("./chunks/AudioBubble-Bqb2Jexf.js"), Avatar = require("./chunks/Avatar-Dg8ZHnw6.js"), AvatarGroup = require("./chunks/AvatarGroup-F8eSiMwn.js"), Badge = require("./chunks/Badge-DjPJ_iJX.js"), IconButton = require("./chunks/IconButton-Cf2RBUKA.js"), Camera = require("./chunks/Camera-BnsGhOrt.js"), CheckBox = require("./chunks/CheckBox-CEWLxffo.js"), DivInput = require("./chunks/DivInput-DWPwVUs_.js"), Dot = require("./chunks/Dot-fKIwhjYA.js"), DrggablePanel = require("./chunks/DrggablePanel-Duv0nmOm.js"), DropDown = require("./chunks/DropDown-Bf_pm-Go.js"), ErrorSummary = require("./chunks/ErrorSummary-K_rPxGWK.js"), Grouper = require("./chunks/Grouper-D9G8PKoM.js"), Overlay = require("./chunks/Overlay-DDOvMM6L.js"), FlexDiv = require("./chunks/FlexDiv-C-3ahI-j.js"), Pager = require("./chunks/Pager-DO197OyC.js"), PromptInput = require("./chunks/PromptInput-B1WG22xz.js"), ProgressIndicator = require("./chunks/ProgressIndicator-t-jv4OhI.js"), RadioButton = require("./chunks/RadioButton-BAIMCshV.js"), RadioButtonList = require("./chunks/RadioButtonList-Bsg5oFaC.js"), Slider = require("./chunks/Slider-BAcaZUs2.js"), Spacer = require("./chunks/Spacer-CyZAUR5N.js"), Switch = require("./chunks/Switch-Crm-nHYI.js"), TabBar = require("./chunks/TabBar-BfyfjmPQ.js"), TextArea = require("./chunks/TextArea-CHNWsfWH.js"), TextField = require("./chunks/TextField-2xzSdIx3.js"), providers_ThemeProvider = require("./providers/ThemeProvider.js"), Tip = require("./chunks/Tip-DceuNR6k.js"), Toast = require("./chunks/Toast-C8Hc9ZKI.js"), Button = require("./chunks/Button-D3wZtdtj.js"), Chip = require("./chunks/Chip-BrQgOmJc.js"), FileIcon = require("./chunks/FileIcon-DgRlhqzv.js"), Icon = require("./chunks/Icon-fRM3E0N6.js"), _types = require("./chunks/_types-VoADvwjb.js"), ButtonBar = require("./chunks/ButtonBar-EH8fHFhS.js"), Label = require("./chunks/Label-Bxp2pCXf.js"), UploadArea = require("./chunks/UploadArea-UFWRQ-nW.js");
+var sharedTypes = require("./chunks/sharedTypes-gCECyn2N.js"), theme_themes = require("./theme/themes.js"), theme_colors = require("./theme/colors.js"), theme_elevations = require("./theme/elevations.js"), theme_motion = require("./theme/motion.js"), hooks_useTheme = require("./hooks/useTheme.js"), hooks_useObserveTheme = require("./hooks/useObserveTheme.js"), hooks_useDoubleClick = require("./hooks/useDoubleClick.js"), hooks_useToolTip = require("./hooks/useToolTip.js"), hooks_useKeyboardShortcuts = require("./hooks/useKeyboardShortcuts.js"), hooks_useLastUpdated = require("./hooks/useLastUpdated.js"), hooks_useLocalStore = require("./hooks/useLocalStore.js"), hooks_useMdStreamBuffer = require("./hooks/useMdStreamBuffer.js"), hooks_useMicrophone = require("./hooks/useMicrophone.js"), hooks_useAudioRecorder = require("./hooks/useAudioRecorder.js"), hooks_useWindow = require("./hooks/useWindow.js"), hooks_useObserveResize = require("./hooks/useObserveResize.js"), AudioBubble = require("./chunks/AudioBubble-DisHuKIC.js"), Avatar = require("./chunks/Avatar-vIquH-Uk.js"), AvatarGroup = require("./chunks/AvatarGroup-DYN73N5x.js"), Badge = require("./chunks/Badge-DjPJ_iJX.js"), IconButton = require("./chunks/IconButton-Cv-po19M.js"), Camera = require("./chunks/Camera-CCzynmXT.js"), CheckBox = require("./chunks/CheckBox-DNctUlTA.js"), DivInput = require("./chunks/DivInput-932r3bvF.js"), Dot = require("./chunks/Dot-fKIwhjYA.js"), DrggablePanel = require("./chunks/DrggablePanel-u8C-Y4dA.js"), DropDown = require("./chunks/DropDown-BZbrZOkx.js"), ErrorSummary = require("./chunks/ErrorSummary-K_rPxGWK.js"), Grouper = require("./chunks/Grouper-D6rSl9nK.js"), Overlay = require("./chunks/Overlay-DDOvMM6L.js"), FlexDiv = require("./chunks/FlexDiv-D4aSJC_G.js"), Pager = require("./chunks/Pager-GH2y7l5h.js"), PromptInput = require("./chunks/PromptInput-C8-V67sS.js"), ProgressIndicator = require("./chunks/ProgressIndicator-7pLk4Dvn.js"), RadioButton = require("./chunks/RadioButton-3CzhKBn6.js"), RadioButtonList = require("./chunks/RadioButtonList-DvJV6Qdg.js"), Slider = require("./chunks/Slider-D8OYGFsN.js"), Spacer = require("./chunks/Spacer-CyZAUR5N.js"), Switch = require("./chunks/Switch-Crm-nHYI.js"), ToggleButton = require("./chunks/ToggleButton-BdCsChJM.js"), TabBar = require("./chunks/TabBar-VzxuAesC.js"), TextArea = require("./chunks/TextArea-CBNHvcK3.js"), TextField = require("./chunks/TextField-BpoLF6pZ.js"), providers_ThemeProvider = require("./providers/ThemeProvider.js"), Tip = require("./chunks/Tip-CUKFhP9K.js"), Toast = require("./chunks/Toast-CKqGjsEk.js"), Button = require("./chunks/Button-B1qbfQgN.js"), Chip = require("./chunks/Chip-BN4qBz6w.js"), FileIcon = require("./chunks/FileIcon-Dxn9OL10.js"), Icon = require("./chunks/Icon-BFiN8Wzm.js"), _types = require("./chunks/_types-Bdqd2vHh.js"), ButtonBar = require("./chunks/ButtonBar-zpC3sClM.js"), Label = require("./chunks/Label-BQ6flU4-.js"), UploadArea = require("./chunks/UploadArea-M9oc-No2.js");
 
 require("./theme/corners.js"), require("./theme/type.js"), require("react"), require("./chunks/tslib.es6-C8dZW5nY.js"), 
-require("./chunks/MdStreamBuffer-DObxjnAm.js"), require("react/jsx-runtime"), require("./chunks/colors-njquvHkx.js"), 
+require("./chunks/MdStreamBuffer-CvLO7CVi.js"), require("react/jsx-runtime"), require("./chunks/colors-njquvHkx.js"), 
 require("./chunks/audioVisualizer-EIfIjWH7.js"), require("./chunks/style-inject.es-CMuL-BfJ.js"), 
-require("./chunks/misc-BTF7BCZW.js"), require("motion/react"), require("./chunks/FileList-DobAcOSH.js"), 
+require("./chunks/misc-CTl4GDxI.js"), require("motion/react"), require("./chunks/FileList-D5_igVaC.js"), 
 require("./chunks/debounce-BF4i6uIC.js"), Object.defineProperty(exports, "ToolTipType", {
     enumerable: !0,
     get: function() {
@@ -40,9 +40,9 @@ Object.defineProperty(exports, "Preset", {
 exports.DoneCheck = ProgressIndicator.DoneCheck, exports.ProgressIndicator = ProgressIndicator.ProgressIndicator, 
 exports.RadioButton = RadioButton.RadioButton, exports.RadioButtonList = RadioButtonList.RadioButtonList, 
 exports.Slider = Slider.Slider, exports.Spacer = Spacer.Spacer, exports.Switch = Switch.Switch, 
-exports.TabBar = TabBar.TabBar, exports.TextArea = TextArea.TextArea, exports.TextField = TextField.TextField, 
-exports.ThemeProvider = providers_ThemeProvider.ThemeProvider, exports.Tip = Tip.Tip, 
-exports.Toast = Toast.Toast, Object.defineProperty(exports, "ToastType", {
+exports.ToggleButton = ToggleButton.ToggleButton, exports.TabBar = TabBar.TabBar, 
+exports.TextArea = TextArea.TextArea, exports.TextField = TextField.TextField, exports.ThemeProvider = providers_ThemeProvider.ThemeProvider, 
+exports.Tip = Tip.Tip, exports.Toast = Toast.Toast, Object.defineProperty(exports, "ToastType", {
     enumerable: !0,
     get: function() {
         return Toast.ToastType;

package/dist/cjs/providers/ThemeProvider.js

@@ -6,11 +6,11 @@ var jsxRuntime = require("react/jsx-runtime"), React = require("react"), styleIn
 require("../theme/colors.js"), require("../theme/corners.js"), require("../theme/elevations.js"), 
 require("../theme/motion.js"), require("../theme/type.js");
 
-styleInject_es.styleInject('/* Core brand colors (un-themed) */\n[data-slice-theme-scope] {\n\t--brand-grey-50: #f4f7fa;\n\t--brand-grey-100: #e5ecf3;\n\t--brand-grey-200: #d5e0ea;\n\t--brand-grey-300: #98acbf;\n\t--brand-grey-400: #7f96a9;\n\t--brand-grey-500: #657d91;\n\t--brand-grey-600: #4c6273;\n\t--brand-grey-700: #405261;\n\t--brand-grey-800: #37434e;\n\t--brand-grey-900: #2d353d;\n\t--brand-grey-950: #1f262d;\n\t--brand-sea-50: #e8f1ff;\n\t--brand-sea-100: #c7defe;\n\t--brand-sea-200: #a5c9ff;\n\t--brand-sea-300: #7ab3ff;\n\t--brand-sea-400: #4084ff;\n\t--brand-sea-500: #2f45ff;\n\t--brand-sea-600: #2d2fff;\n\t--brand-sea-700: #0000ff;\n\t--brand-sea-800: #0609cd;\n\t--brand-sea-900: #001699;\n\t--brand-sea-950: #0a0b5c;\n\t--brand-sky-50: #eafffe;\n\t--brand-sky-100: #cdfffb;\n\t--brand-sky-200: #a3f8ff;\n\t--brand-sky-300: #6af5ff;\n\t--brand-sky-400: #00edff;\n\t--brand-sky-500: #00c8e0;\n\t--brand-sky-600: #00a6c0;\n\t--brand-sky-700: #03839b;\n\t--brand-sky-800: #0d697d;\n\t--brand-sky-900: #105669;\n\t--brand-sky-950: #033949;\n\t--brand-land-50: #f4ffe5;\n\t--brand-land-100: #e0ffb7;\n\t--brand-land-200: #caff95;\n\t--brand-land-300: #b7fe59;\n\t--brand-land-400: #9cf820;\n\t--brand-land-500: #71e618;\n\t--brand-land-600: #56c900;\n\t--brand-land-700: #2d8c00;\n\t--brand-land-800: #31690b;\n\t--brand-land-900: #2a580f;\n\t--brand-land-950: #123201;\n\t--brand-orange-50: #fff8ec;\n\t--brand-orange-100: #ffebd7;\n\t--brand-orange-200: #ffe3c6;\n\t--brand-orange-300: #ffc182;\n\t--brand-orange-400: #ff972e;\n\t--brand-orange-500: #ff800a;\n\t--brand-orange-600: #ff6700;\n\t--brand-orange-700: #ff3700;\n\t--brand-orange-800: #a02b0b;\n\t--brand-orange-900: #80250b;\n\t--brand-orange-950: #461604;\n\t--brand-yellow-50: #ffffea;\n\t--brand-yellow-100: #fffdca;\n\t--brand-yellow-200: #fff2a0;\n\t--brand-yellow-300: #ffeb72;\n\t--brand-yellow-400: #ffd333;\n\t--brand-yellow-500: #ffc200;\n\t--brand-yellow-600: #ffad00;\n\t--brand-yellow-700: #c68601;\n\t--brand-yellow-800: #8f6307;\n\t--brand-yellow-900: #5f430a;\n\t--brand-yellow-950: #442e00;\n\t--brand-purple-50: #faf0ff;\n\t--brand-purple-100: #f4ddff;\n\t--brand-purple-200: #e5cdff;\n\t--brand-purple-300: #ccafff;\n\t--brand-purple-400: #b891ff;\n\t--brand-purple-500: #7d48ff;\n\t--brand-purple-600: #6a14ff;\n\t--brand-purple-700: #5600f1;\n\t--brand-purple-800: #4d01d6;\n\t--brand-purple-900: #4003af;\n\t--brand-purple-950: #1e007c;\n\t--brand-magenta-50: #fef1fc;\n\t--brand-magenta-100: #ffdcef;\n\t--brand-magenta-200: #ffcae6;\n\t--brand-magenta-300: #ff90cb;\n\t--brand-magenta-400: #ff61ca;\n\t--brand-magenta-500: #ff3ac2;\n\t--brand-magenta-600: #f012aa;\n\t--brand-magenta-700: #df059b;\n\t--brand-magenta-800: #9b0069;\n\t--brand-magenta-900: #790a55;\n\t--brand-magenta-950: #58003a;\n\t--brand-white-0: #ffffff;\n\t--product-red-400: #ff474a;\n\t--product-red-500: #df0529;\n\n\t/* Non-brand semantic aliases */\n\t--core-drop-shadow-light: #0339491a;\n\t--core-drop-shadow-dark: #0000007a;\n\t--core-surface-coverup-translucent-light: #1f262d52;\n\t--core-surface-coverup-translucent-dark: #0000007a;\n\t--core-surface-overlay-translucent-light: #ffffffcc;\n\t--core-surface-overlay-translucent-dark: #1f262dcc;\n\t--scroll-bar-light: #e3e8ef;\n\t--scroll-bar-dark: rgba(255, 255, 255, 0.1);\n\t--scroll-bar-hover-light: #cdd5df;\n\t--scroll-bar-hover-dark: rgba(255, 255, 255, 0.15);\n\t--surface-shadow-soft-light: 0px 4px 24px #0339491a;\n\t--surface-shadow-soft-dark: 0px 4px 24px #0000007a;\n\t--surface-shadow-strong-light: 0px 4px 64px #0339491a;\n\t--surface-shadow-strong-dark: 0px 4px 64px #0000007a;\n}\n\n/* Root-level token needed for global viewport backgrounds */\n:root[data-slice-theme="lightMode"] {\n\t--core-surface-primary: #ffffff;\n}\n\n/* Light theme tokens */\n:root[data-slice-theme="lightMode"] [data-slice-theme-scope] {\n\t--array-land: var(--brand-land-100);\n\t--array-land-label: var(--brand-land-600);\n\t--array-magenta: var(--brand-magenta-100);\n\t--array-magenta-label: var(--brand-magenta-600);\n\t--array-orange: var(--brand-orange-100);\n\t--array-orange-label: var(--brand-orange-600);\n\t--array-purple: var(--brand-purple-100);\n\t--array-purple-label: var(--brand-purple-600);\n\t--array-sea: var(--brand-sea-100);\n\t--array-sea-label: var(--brand-sea-600);\n\t--array-sky: var(--brand-sky-100);\n\t--array-sky-label: var(--brand-sky-600);\n\t--array-yellow: var(--brand-yellow-100);\n\t--array-yellow-label: var(--brand-yellow-600);\n\t--core-badge-primary: var(--brand-sea-500);\n\t--core-badge-secondary: var(--brand-grey-100);\n\t--core-button-disabled: var(--brand-grey-50);\n\t--core-button-primary: var(--brand-sea-500);\n\t--core-drop-shadow: var(--core-drop-shadow-light);\n\t--core-gp-logo-primary: var(--brand-sea-700);\n\t--core-gp-logo-secondary: var(--brand-grey-950);\n\t--core-icon-dark: var(--brand-grey-950);\n\t--core-icon-disabled: var(--brand-grey-300);\n\t--core-icon-error: var(--product-red-500);\n\t--core-icon-light: var(--brand-white-0);\n\t--core-icon-primary: var(--brand-grey-950);\n\t--core-icon-secondary: var(--brand-grey-700);\n\t--core-icon-tertiary: var(--brand-sea-500);\n\t--core-outline-secondary: var(--brand-grey-700);\n\t--core-outline-primary: var(--brand-grey-100);\n\t--core-outline-special: var(--brand-sea-100);\n\t--core-outline-tertiary: var(--brand-sea-500);\n\t--core-surface-coverup-translucent: var(\n\t\t--core-surface-coverup-translucent-light\n\t);\n\t--core-surface-overlay-translucent: var(\n\t\t--core-surface-overlay-translucent-light\n\t);\n\t--core-surface-primary: var(--brand-white-0);\n\t--core-surface-secondary: var(--brand-grey-50);\n\t--core-surface-special: var(--brand-sea-50);\n\t--core-text-dark: var(--brand-grey-950);\n\t--core-text-disabled: var(--brand-grey-300);\n\t--core-text-error: var(--product-red-500);\n\t--core-text-light: var(--brand-white-0);\n\t--core-text-primary: var(--brand-grey-950);\n\t--core-text-secondary: var(--brand-grey-700);\n\t--core-text-tertiary: var(--brand-grey-600);\n\t--core-text-special: var(--brand-sea-500);\n\t--core-link-primary: var(--brand-sea-700);\n\t--eor-tag-employee: var(--brand-sky-700);\n\t--eor-tag-overdue: var(--product-red-500);\n\t--eor-tag-paid: var(--brand-land-700);\n\t--eor-tag-pending: var(--brand-orange-500);\n\t--eor-tag-professional: var(--brand-sea-500);\n\t--feedback-attention: var(--brand-yellow-500);\n\t--feedback-informative: var(--brand-sky-700);\n\t--feedback-positive: var(--brand-land-700);\n\t--feedback-urgency: var(--brand-orange-500);\n\t--feedback-warning: var(--product-red-500);\n\t--gia-tag-risk-high: var(--product-red-500);\n\t--gia-tag-risk-low: var(--brand-sky-700);\n\t--gia-tag-risk-moderate: var(--brand-orange-500);\n\t--gia-text-excerpt-highlight: var(--brand-orange-100);\n\t--gia-text-selection: var(--brand-sea-100);\n\t--scroll-bar: var(--scroll-bar-light);\n\t--scroll-bar-hover: var(--scroll-bar-hover-light);\n\t--surface-shadow-soft: var(--surface-shadow-soft-light);\n\t--surface-shadow-strong: var(--surface-shadow-strong-light);\n}\n\n/* Root-level token needed for global viewport backgrounds */\n:root[data-slice-theme="darkMode"] {\n\t--core-surface-primary: #1f262d;\n}\n\n/* Dark theme tokens */\n:root[data-slice-theme="darkMode"] [data-slice-theme-scope] {\n\t--array-land: var(--brand-land-100);\n\t--array-land-label: var(--brand-land-600);\n\t--array-magenta: var(--brand-magenta-100);\n\t--array-magenta-label: var(--brand-magenta-600);\n\t--array-orange: var(--brand-orange-100);\n\t--array-orange-label: var(--brand-orange-600);\n\t--array-purple: var(--brand-purple-100);\n\t--array-purple-label: var(--brand-purple-600);\n\t--array-sea: var(--brand-sea-100);\n\t--array-sea-label: var(--brand-sea-600);\n\t--array-sky: var(--brand-sky-100);\n\t--array-sky-label: var(--brand-sky-600);\n\t--array-yellow: var(--brand-yellow-100);\n\t--array-yellow-label: var(--brand-yellow-600);\n\t--core-badge-primary: var(--brand-sea-500);\n\t--core-badge-secondary: var(--brand-grey-700);\n\t--core-button-disabled: var(--brand-grey-900);\n\t--core-button-primary: var(--brand-sea-500);\n\t--core-drop-shadow: var(--core-drop-shadow-dark);\n\t--core-gp-logo-primary: var(--brand-sea-500);\n\t--core-gp-logo-secondary: var(--brand-white-0);\n\t--core-icon-dark: var(--brand-grey-950);\n\t--core-icon-disabled: var(--brand-grey-500);\n\t--core-icon-error: var(--product-red-400);\n\t--core-icon-light: var(--brand-white-0);\n\t--core-icon-primary: var(--brand-white-0);\n\t--core-icon-secondary: var(--brand-grey-200);\n\t--core-icon-tertiary: var(--brand-sky-300);\n\t--core-outline-secondary: var(--brand-grey-100);\n\t--core-outline-primary: var(--brand-grey-700);\n\t--core-outline-special: var(--brand-sky-300);\n\t--core-outline-tertiary: var(--brand-sky-300);\n\t--core-surface-coverup-translucent: var(\n\t\t--core-surface-coverup-translucent-dark\n\t);\n\t--core-surface-overlay-translucent: var(\n\t\t--core-surface-overlay-translucent-dark\n\t);\n\t--core-surface-primary: var(--brand-grey-950);\n\t--core-surface-secondary: var(--brand-grey-900);\n\t--core-surface-special: var(--brand-sky-950);\n\t--core-text-dark: var(--brand-grey-950);\n\t--core-text-disabled: var(--brand-grey-500);\n\t--core-text-error: var(--product-red-400);\n\t--core-text-light: var(--brand-white-0);\n\t--core-text-primary: var(--brand-white-0);\n\t--core-text-secondary: var(--brand-grey-200);\n\t--core-text-tertiary: var(--brand-grey-400);\n\t--core-text-special: var(--brand-sky-300);\n\t--core-link-primary: var(--brand-sky-300);\n\t--eor-tag-employee: var(--brand-sky-700);\n\t--eor-tag-overdue: var(--product-red-400);\n\t--eor-tag-paid: var(--brand-land-700);\n\t--eor-tag-pending: var(--brand-orange-500);\n\t--eor-tag-professional: var(--brand-sea-500);\n\t--feedback-attention: var(--brand-yellow-400);\n\t--feedback-informative: var(--brand-sky-600);\n\t--feedback-positive: var(--brand-land-700);\n\t--feedback-urgency: var(--brand-orange-500);\n\t--feedback-warning: var(--product-red-400);\n\t--gia-tag-risk-high: var(--product-red-400);\n\t--gia-tag-risk-low: var(--brand-sky-600);\n\t--gia-tag-risk-moderate: var(--brand-orange-500);\n\t--gia-text-excerpt-highlight: var(--brand-orange-100);\n\t--gia-text-selection: var(--brand-sea-900);\n\t--scroll-bar: var(--scroll-bar-dark);\n\t--scroll-bar-hover: var(--scroll-bar-hover-dark);\n\t--surface-shadow-soft: var(--surface-shadow-soft-dark);\n\t--surface-shadow-strong: var(--surface-shadow-strong-dark);\n}\n\n/* Theme token text-color utility classes */\n[data-slice-theme-scope] .array-land {\n\tbackground: var(--array-land);\n}\n[data-slice-theme-scope] .array-land-label {\n\tcolor: var(--array-land-label);\n}\n[data-slice-theme-scope] .array-magenta {\n\tbackground: var(--array-magenta);\n}\n[data-slice-theme-scope] .array-magenta-label {\n\tcolor: var(--array-magenta-label);\n}\n[data-slice-theme-scope] .array-orange {\n\tbackground: var(--array-orange);\n}\n[data-slice-theme-scope] .array-orange-label {\n\tcolor: var(--array-orange-label);\n}\n[data-slice-theme-scope] .array-purple {\n\tbackground: var(--array-purple);\n}\n[data-slice-theme-scope] .array-purple-label {\n\tcolor: var(--array-purple-label);\n}\n[data-slice-theme-scope] .array-sea {\n\tbackground: var(--array-sea);\n}\n[data-slice-theme-scope] .array-sea-label {\n\tcolor: var(--array-sea-label);\n}\n[data-slice-theme-scope] .array-sky {\n\tbackground: var(--array-sky);\n}\n[data-slice-theme-scope] .array-sky-label {\n\tcolor: var(--array-sky-label);\n}\n[data-slice-theme-scope] .array-yellow {\n\tbackground: var(--array-yellow);\n}\n[data-slice-theme-scope] .array-yellow-label {\n\tcolor: var(--array-yellow-label);\n}\n[data-slice-theme-scope] .core-badge-primary {\n\tbackground: var(--core-badge-primary);\n}\n[data-slice-theme-scope] .core-badge-secondary {\n\tbackground: var(--core-badge-secondary);\n}\n[data-slice-theme-scope] .core-button-disabled {\n\tbackground: var(--core-button-disabled);\n}\n[data-slice-theme-scope] .core-button-primary {\n\tbackground: var(--core-button-primary);\n}\n[data-slice-theme-scope] .core-drop-shadow {\n\tbox-shadow: var(--core-drop-shadow);\n}\n[data-slice-theme-scope] .core-gp-logo-primary {\n\tcolor: var(--core-gp-logo-primary);\n}\n[data-slice-theme-scope] .core-gp-logo-secondary {\n\tcolor: var(--core-gp-logo-secondary);\n}\n[data-slice-theme-scope] .core-icon-dark {\n\tcolor: var(--core-icon-dark);\n}\n[data-slice-theme-scope] .core-icon-disabled {\n\tcolor: var(--core-icon-disabled);\n}\n[data-slice-theme-scope] .core-icon-error {\n\tcolor: var(--core-icon-error);\n}\n[data-slice-theme-scope] .core-icon-light {\n\tcolor: var(--core-icon-light);\n}\n[data-slice-theme-scope] .core-icon-primary {\n\tcolor: var(--core-icon-primary);\n}\n[data-slice-theme-scope] .core-icon-secondary {\n\tcolor: var(--core-icon-secondary);\n}\n[data-slice-theme-scope] .core-icon-tertiary {\n\tcolor: var(--core-icon-tertiary);\n}\n[data-slice-theme-scope] .core-link-primary {\n\tcolor: var(--core-link-primary);\n}\n[data-slice-theme-scope] .core-outline-primary {\n\tborder-color: var(--core-outline-primary);\n}\n[data-slice-theme-scope] .core-outline-secondary {\n\tborder-color: var(--core-outline-secondary);\n}\n[data-slice-theme-scope] .core-outline-special {\n\tborder-color: var(--core-outline-special);\n}\n[data-slice-theme-scope] .core-outline-tertiary {\n\tborder-color: var(--core-outline-tertiary);\n}\n[data-slice-theme-scope] .core-surface-coverup-translucent {\n\tbackground: var(--core-surface-coverup-translucent);\n}\n[data-slice-theme-scope] .core-surface-overlay-translucent {\n\tbackground: var(--core-surface-overlay-translucent);\n}\n[data-slice-theme-scope] .core-surface-primary {\n\tbackground: var(--core-surface-primary);\n}\n[data-slice-theme-scope] .core-surface-secondary {\n\tbackground: var(--core-surface-secondary);\n}\n[data-slice-theme-scope] .core-surface-special {\n\tbackground: var(--core-surface-special);\n}\n[data-slice-theme-scope] .core-text-dark {\n\tcolor: var(--core-text-dark);\n}\n[data-slice-theme-scope] .core-text-disabled {\n\tcolor: var(--core-text-disabled);\n}\n[data-slice-theme-scope] .core-text-error {\n\tcolor: var(--core-text-error);\n}\n[data-slice-theme-scope] .core-text-light {\n\tcolor: var(--core-text-light);\n}\n[data-slice-theme-scope] .core-text-primary {\n\tcolor: var(--core-text-primary);\n}\n[data-slice-theme-scope] .core-text-secondary {\n\tcolor: var(--core-text-secondary);\n}\n[data-slice-theme-scope] .core-text-special {\n\tcolor: var(--core-text-special);\n}\n[data-slice-theme-scope] .core-text-tertiary {\n\tcolor: var(--core-text-tertiary);\n}\n[data-slice-theme-scope] .eor-tag-employee {\n\tcolor: var(--eor-tag-employee);\n}\n[data-slice-theme-scope] .eor-tag-overdue {\n\tcolor: var(--eor-tag-overdue);\n}\n[data-slice-theme-scope] .eor-tag-paid {\n\tcolor: var(--eor-tag-paid);\n}\n[data-slice-theme-scope] .eor-tag-pending {\n\tcolor: var(--eor-tag-pending);\n}\n[data-slice-theme-scope] .eor-tag-professional {\n\tcolor: var(--eor-tag-professional);\n}\n[data-slice-theme-scope] .feedback-attention {\n\tcolor: var(--feedback-attention);\n}\n[data-slice-theme-scope] .feedback-informative {\n\tcolor: var(--feedback-informative);\n}\n[data-slice-theme-scope] .feedback-positive {\n\tcolor: var(--feedback-positive);\n}\n[data-slice-theme-scope] .feedback-urgency {\n\tcolor: var(--feedback-urgency);\n}\n[data-slice-theme-scope] .feedback-warning {\n\tcolor: var(--feedback-warning);\n}\n[data-slice-theme-scope] .gia-tag-risk-high {\n\tcolor: var(--gia-tag-risk-high);\n}\n[data-slice-theme-scope] .gia-tag-risk-low {\n\tcolor: var(--gia-tag-risk-low);\n}\n[data-slice-theme-scope] .gia-tag-risk-moderate {\n\tcolor: var(--gia-tag-risk-moderate);\n}\n[data-slice-theme-scope] .gia-text-excerpt-highlight {\n\tcolor: var(--gia-text-excerpt-highlight);\n}\n[data-slice-theme-scope] .gia-text-selection {\n\tcolor: var(--gia-text-selection);\n}\n[data-slice-theme-scope] .scroll-bar {\n\tcolor: var(--scroll-bar);\n}\n[data-slice-theme-scope] .scroll-bar-hover {\n\tcolor: var(--scroll-bar-hover);\n}\n[data-slice-theme-scope] .surface-shadow-soft {\n\tcolor: var(--surface-shadow-soft);\n}\n[data-slice-theme-scope] .surface-shadow-strong {\n\tcolor: var(--surface-shadow-strong);\n}\n\n[data-slice-theme-scope] {\n\tbackground: var(--core-surface-primary);\n}\n\n[data-slice-theme-scope] a {\n\tcolor: var(--core-text-special);\n\ttext-decoration: underline;\n}\n\n[data-slice-theme-scope] a:visited {\n\tcolor: var(--core-text-special);\n\ttext-decoration: underline;\n}\n\n[data-slice-theme-scope] a:hover {\n\ttext-decoration: none;\n}\n\n[data-slice-theme-scope] code {\n\tborder: 1px solid var(--core-outline-primary);\n\tbackground: var(--core-surface-secondary);\n\tcolor: var(--core-text-primary);\n}\n');
+styleInject_es.styleInject('/* Core brand colors (un-themed) */\n[data-slice-theme-scope] {\n\t--brand-grey-50: #f4f7fa;\n\t--brand-grey-100: #e5ecf3;\n\t--brand-grey-200: #d5e0ea;\n\t--brand-grey-300: #98acbf;\n\t--brand-grey-400: #7f96a9;\n\t--brand-grey-500: #657d91;\n\t--brand-grey-600: #4c6273;\n\t--brand-grey-700: #405261;\n\t--brand-grey-800: #37434e;\n\t--brand-grey-900: #2d353d;\n\t--brand-grey-950: #1f262d;\n\t--brand-sea-50: #e8f1ff;\n\t--brand-sea-100: #c7defe;\n\t--brand-sea-200: #a5c9ff;\n\t--brand-sea-300: #7ab3ff;\n\t--brand-sea-400: #4084ff;\n\t--brand-sea-500: #2f45ff;\n\t--brand-sea-600: #2d2fff;\n\t--brand-sea-700: #0000ff;\n\t--brand-sea-800: #0609cd;\n\t--brand-sea-900: #001699;\n\t--brand-sea-950: #0a0b5c;\n\t--brand-sky-50: #eafffe;\n\t--brand-sky-100: #cdfffb;\n\t--brand-sky-200: #a3f8ff;\n\t--brand-sky-300: #6af5ff;\n\t--brand-sky-400: #00edff;\n\t--brand-sky-500: #00c8e0;\n\t--brand-sky-600: #00a6c0;\n\t--brand-sky-700: #03839b;\n\t--brand-sky-800: #0d697d;\n\t--brand-sky-900: #105669;\n\t--brand-sky-950: #033949;\n\t--brand-land-50: #f4ffe5;\n\t--brand-land-100: #e0ffb7;\n\t--brand-land-200: #caff95;\n\t--brand-land-300: #b7fe59;\n\t--brand-land-400: #9cf820;\n\t--brand-land-500: #71e618;\n\t--brand-land-600: #56c900;\n\t--brand-land-700: #2d8c00;\n\t--brand-land-800: #31690b;\n\t--brand-land-900: #2a580f;\n\t--brand-land-950: #123201;\n\t--brand-orange-50: #fff8ec;\n\t--brand-orange-100: #ffebd7;\n\t--brand-orange-200: #ffe3c6;\n\t--brand-orange-300: #ffc182;\n\t--brand-orange-400: #ff972e;\n\t--brand-orange-500: #ff800a;\n\t--brand-orange-600: #ff6700;\n\t--brand-orange-700: #ff3700;\n\t--brand-orange-800: #a02b0b;\n\t--brand-orange-900: #80250b;\n\t--brand-orange-950: #461604;\n\t--brand-yellow-50: #ffffea;\n\t--brand-yellow-100: #fffdca;\n\t--brand-yellow-200: #fff2a0;\n\t--brand-yellow-300: #ffeb72;\n\t--brand-yellow-400: #ffd333;\n\t--brand-yellow-500: #ffc200;\n\t--brand-yellow-600: #ffad00;\n\t--brand-yellow-700: #c68601;\n\t--brand-yellow-800: #8f6307;\n\t--brand-yellow-900: #5f430a;\n\t--brand-yellow-950: #442e00;\n\t--brand-purple-50: #faf0ff;\n\t--brand-purple-100: #f4ddff;\n\t--brand-purple-200: #e5cdff;\n\t--brand-purple-300: #ccafff;\n\t--brand-purple-400: #b891ff;\n\t--brand-purple-500: #7d48ff;\n\t--brand-purple-600: #6a14ff;\n\t--brand-purple-700: #5600f1;\n\t--brand-purple-800: #4d01d6;\n\t--brand-purple-900: #4003af;\n\t--brand-purple-950: #1e007c;\n\t--brand-magenta-50: #fef1fc;\n\t--brand-magenta-100: #ffdcef;\n\t--brand-magenta-200: #ffcae6;\n\t--brand-magenta-300: #ff90cb;\n\t--brand-magenta-400: #ff61ca;\n\t--brand-magenta-500: #ff3ac2;\n\t--brand-magenta-600: #f012aa;\n\t--brand-magenta-700: #df059b;\n\t--brand-magenta-800: #9b0069;\n\t--brand-magenta-900: #790a55;\n\t--brand-magenta-950: #58003a;\n\t--brand-white-0: #ffffff;\n\t--product-red-400: #ff474a;\n\t--product-red-500: #df0529;\n\n\t/* Non-brand semantic aliases */\n\t--core-drop-shadow-light: #0339491a;\n\t--core-drop-shadow-dark: #0000007a;\n\t--core-surface-coverup-translucent-light: #1f262d52;\n\t--core-surface-coverup-translucent-dark: #0000007a;\n\t--core-surface-overlay-translucent-light: #ffffffcc;\n\t--core-surface-overlay-translucent-dark: #1f262dcc;\n\t--scroll-bar-light: #e3e8ef;\n\t--scroll-bar-dark: rgba(255, 255, 255, 0.1);\n\t--scroll-bar-hover-light: #cdd5df;\n\t--scroll-bar-hover-dark: rgba(255, 255, 255, 0.15);\n\t--surface-primary-tint-light: #fcfcfc;\n\t--surface-primary-tint-dark: #191e24;\n\t--surface-shadow-soft-light: 0px 4px 24px #0339491a;\n\t--surface-shadow-soft-dark: 0px 4px 24px #0000007a;\n\t--surface-shadow-strong-light: 0px 4px 64px #0339491a;\n\t--surface-shadow-strong-dark: 0px 4px 64px #0000007a;\n}\n\n/* Root-level token needed for global viewport backgrounds */\n:root[data-slice-theme="lightMode"] {\n\t--core-surface-primary: #ffffff;\n}\n\n/* Light theme tokens */\n:root[data-slice-theme="lightMode"] [data-slice-theme-scope] {\n\t--array-land: var(--brand-land-100);\n\t--array-land-label: var(--brand-land-600);\n\t--array-magenta: var(--brand-magenta-100);\n\t--array-magenta-label: var(--brand-magenta-600);\n\t--array-orange: var(--brand-orange-100);\n\t--array-orange-label: var(--brand-orange-600);\n\t--array-purple: var(--brand-purple-100);\n\t--array-purple-label: var(--brand-purple-600);\n\t--array-sea: var(--brand-sea-100);\n\t--array-sea-label: var(--brand-sea-600);\n\t--array-sky: var(--brand-sky-100);\n\t--array-sky-label: var(--brand-sky-600);\n\t--array-yellow: var(--brand-yellow-100);\n\t--array-yellow-label: var(--brand-yellow-600);\n\t--core-badge-primary: var(--brand-sea-500);\n\t--core-badge-secondary: var(--brand-grey-100);\n\t--core-button-disabled: var(--brand-grey-50);\n\t--core-button-primary: var(--brand-sea-500);\n\t--core-drop-shadow: var(--core-drop-shadow-light);\n\t--core-gp-logo-primary: var(--brand-sea-700);\n\t--core-gp-logo-secondary: var(--brand-grey-950);\n\t--core-icon-dark: var(--brand-grey-950);\n\t--core-icon-disabled: var(--brand-grey-300);\n\t--core-icon-error: var(--product-red-500);\n\t--core-icon-light: var(--brand-white-0);\n\t--core-icon-primary: var(--brand-grey-950);\n\t--core-icon-secondary: var(--brand-grey-700);\n\t--core-icon-tertiary: var(--brand-sea-500);\n\t--core-outline-secondary: var(--brand-grey-100);\n\t--core-outline-primary: var(--brand-grey-100);\n\t--core-outline-special: var(--brand-sea-100);\n\t--core-outline-tertiary: var(--brand-sea-500);\n\t--core-surface-coverup-translucent: var(\n\t\t--core-surface-coverup-translucent-light\n\t);\n\t--core-surface-overlay-translucent: var(\n\t\t--core-surface-overlay-translucent-light\n\t);\n\t--core-surface-primary: var(--brand-white-0);\n\t--core-surface-primary-tint: var(--surface-primary-tint-light);\n\t--core-surface-secondary: var(--brand-grey-50);\n\t--core-surface-special: var(--brand-sea-50);\n\t--core-text-dark: var(--brand-grey-950);\n\t--core-text-disabled: var(--brand-grey-300);\n\t--core-text-error: var(--product-red-500);\n\t--core-text-light: var(--brand-white-0);\n\t--core-text-primary: var(--brand-grey-950);\n\t--core-text-secondary: var(--brand-grey-700);\n\t--core-text-tertiary: var(--brand-grey-600);\n\t--core-text-special: var(--brand-sea-500);\n\t--core-link-primary: var(--brand-sea-700);\n\t--eor-tag-employee: var(--brand-sky-700);\n\t--eor-tag-overdue: var(--product-red-500);\n\t--eor-tag-paid: var(--brand-land-700);\n\t--eor-tag-pending: var(--brand-orange-500);\n\t--eor-tag-professional: var(--brand-sea-500);\n\t--feedback-attention: var(--brand-yellow-500);\n\t--feedback-informative: var(--brand-sky-700);\n\t--feedback-positive: var(--brand-land-700);\n\t--feedback-urgency: var(--brand-orange-500);\n\t--feedback-warning: var(--product-red-500);\n\t--gia-tag-risk-high: var(--product-red-500);\n\t--gia-tag-risk-low: var(--brand-sky-700);\n\t--gia-tag-risk-moderate: var(--brand-orange-500);\n\t--gia-text-excerpt-highlight: var(--brand-orange-100);\n\t--gia-text-selection: var(--brand-sea-100);\n\t--scroll-bar: var(--scroll-bar-light);\n\t--scroll-bar-hover: var(--scroll-bar-hover-light);\n\t--surface-shadow-soft: var(--surface-shadow-soft-light);\n\t--surface-shadow-strong: var(--surface-shadow-strong-light);\n}\n\n/* Root-level token needed for global viewport backgrounds */\n:root[data-slice-theme="darkMode"] {\n\t--core-surface-primary: #1f262d;\n}\n\n/* Dark theme tokens */\n:root[data-slice-theme="darkMode"] [data-slice-theme-scope] {\n\t--array-land: var(--brand-land-100);\n\t--array-land-label: var(--brand-land-600);\n\t--array-magenta: var(--brand-magenta-100);\n\t--array-magenta-label: var(--brand-magenta-600);\n\t--array-orange: var(--brand-orange-100);\n\t--array-orange-label: var(--brand-orange-600);\n\t--array-purple: var(--brand-purple-100);\n\t--array-purple-label: var(--brand-purple-600);\n\t--array-sea: var(--brand-sea-100);\n\t--array-sea-label: var(--brand-sea-600);\n\t--array-sky: var(--brand-sky-100);\n\t--array-sky-label: var(--brand-sky-600);\n\t--array-yellow: var(--brand-yellow-100);\n\t--array-yellow-label: var(--brand-yellow-600);\n\t--core-badge-primary: var(--brand-sea-500);\n\t--core-badge-secondary: var(--brand-grey-700);\n\t--core-button-disabled: var(--brand-grey-900);\n\t--core-button-primary: var(--brand-sea-500);\n\t--core-drop-shadow: var(--core-drop-shadow-dark);\n\t--core-gp-logo-primary: var(--brand-sea-500);\n\t--core-gp-logo-secondary: var(--brand-white-0);\n\t--core-icon-dark: var(--brand-grey-950);\n\t--core-icon-disabled: var(--brand-grey-500);\n\t--core-icon-error: var(--product-red-400);\n\t--core-icon-light: var(--brand-white-0);\n\t--core-icon-primary: var(--brand-white-0);\n\t--core-icon-secondary: var(--brand-grey-200);\n\t--core-icon-tertiary: var(--brand-sky-300);\n\t--core-outline-secondary: var(--brand-grey-900);\n\t--core-outline-primary: var(--brand-grey-700);\n\t--core-outline-special: var(--brand-sky-300);\n\t--core-outline-tertiary: var(--brand-sky-300);\n\t--core-surface-coverup-translucent: var(\n\t\t--core-surface-coverup-translucent-dark\n\t);\n\t--core-surface-overlay-translucent: var(\n\t\t--core-surface-overlay-translucent-dark\n\t);\n\t--core-surface-primary: var(--brand-grey-950);\n\t--core-surface-primary-tint: var(--surface-primary-tint-dark);\n\t--core-surface-secondary: var(--brand-grey-900);\n\t--core-surface-special: var(--brand-sky-950);\n\t--core-text-dark: var(--brand-grey-950);\n\t--core-text-disabled: var(--brand-grey-500);\n\t--core-text-error: var(--product-red-400);\n\t--core-text-light: var(--brand-white-0);\n\t--core-text-primary: var(--brand-white-0);\n\t--core-text-secondary: var(--brand-grey-200);\n\t--core-text-tertiary: var(--brand-grey-400);\n\t--core-text-special: var(--brand-sky-300);\n\t--core-link-primary: var(--brand-sky-300);\n\t--eor-tag-employee: var(--brand-sky-700);\n\t--eor-tag-overdue: var(--product-red-400);\n\t--eor-tag-paid: var(--brand-land-700);\n\t--eor-tag-pending: var(--brand-orange-500);\n\t--eor-tag-professional: var(--brand-sea-500);\n\t--feedback-attention: var(--brand-yellow-400);\n\t--feedback-informative: var(--brand-sky-600);\n\t--feedback-positive: var(--brand-land-700);\n\t--feedback-urgency: var(--brand-orange-500);\n\t--feedback-warning: var(--product-red-400);\n\t--gia-tag-risk-high: var(--product-red-400);\n\t--gia-tag-risk-low: var(--brand-sky-600);\n\t--gia-tag-risk-moderate: var(--brand-orange-500);\n\t--gia-text-excerpt-highlight: var(--brand-orange-100);\n\t--gia-text-selection: var(--brand-sea-900);\n\t--scroll-bar: var(--scroll-bar-dark);\n\t--scroll-bar-hover: var(--scroll-bar-hover-dark);\n\t--surface-shadow-soft: var(--surface-shadow-soft-dark);\n\t--surface-shadow-strong: var(--surface-shadow-strong-dark);\n}\n\n/* Theme token text-color utility classes */\n[data-slice-theme-scope] .array-land {\n\tbackground: var(--array-land);\n}\n[data-slice-theme-scope] .array-land-label {\n\tcolor: var(--array-land-label);\n}\n[data-slice-theme-scope] .array-magenta {\n\tbackground: var(--array-magenta);\n}\n[data-slice-theme-scope] .array-magenta-label {\n\tcolor: var(--array-magenta-label);\n}\n[data-slice-theme-scope] .array-orange {\n\tbackground: var(--array-orange);\n}\n[data-slice-theme-scope] .array-orange-label {\n\tcolor: var(--array-orange-label);\n}\n[data-slice-theme-scope] .array-purple {\n\tbackground: var(--array-purple);\n}\n[data-slice-theme-scope] .array-purple-label {\n\tcolor: var(--array-purple-label);\n}\n[data-slice-theme-scope] .array-sea {\n\tbackground: var(--array-sea);\n}\n[data-slice-theme-scope] .array-sea-label {\n\tcolor: var(--array-sea-label);\n}\n[data-slice-theme-scope] .array-sky {\n\tbackground: var(--array-sky);\n}\n[data-slice-theme-scope] .array-sky-label {\n\tcolor: var(--array-sky-label);\n}\n[data-slice-theme-scope] .array-yellow {\n\tbackground: var(--array-yellow);\n}\n[data-slice-theme-scope] .array-yellow-label {\n\tcolor: var(--array-yellow-label);\n}\n[data-slice-theme-scope] .core-badge-primary {\n\tbackground: var(--core-badge-primary);\n}\n[data-slice-theme-scope] .core-badge-secondary {\n\tbackground: var(--core-badge-secondary);\n}\n[data-slice-theme-scope] .core-button-disabled {\n\tbackground: var(--core-button-disabled);\n}\n[data-slice-theme-scope] .core-button-primary {\n\tbackground: var(--core-button-primary);\n}\n[data-slice-theme-scope] .core-drop-shadow {\n\tbox-shadow: var(--core-drop-shadow);\n}\n[data-slice-theme-scope] .core-gp-logo-primary {\n\tcolor: var(--core-gp-logo-primary);\n}\n[data-slice-theme-scope] .core-gp-logo-secondary {\n\tcolor: var(--core-gp-logo-secondary);\n}\n[data-slice-theme-scope] .core-icon-dark {\n\tcolor: var(--core-icon-dark);\n}\n[data-slice-theme-scope] .core-icon-disabled {\n\tcolor: var(--core-icon-disabled);\n}\n[data-slice-theme-scope] .core-icon-error {\n\tcolor: var(--core-icon-error);\n}\n[data-slice-theme-scope] .core-icon-light {\n\tcolor: var(--core-icon-light);\n}\n[data-slice-theme-scope] .core-icon-primary {\n\tcolor: var(--core-icon-primary);\n}\n[data-slice-theme-scope] .core-icon-secondary {\n\tcolor: var(--core-icon-secondary);\n}\n[data-slice-theme-scope] .core-icon-tertiary {\n\tcolor: var(--core-icon-tertiary);\n}\n[data-slice-theme-scope] .core-link-primary {\n\tcolor: var(--core-link-primary);\n}\n[data-slice-theme-scope] .core-outline-primary {\n\tborder-color: var(--core-outline-primary);\n}\n[data-slice-theme-scope] .core-outline-secondary {\n\tborder-color: var(--core-outline-secondary);\n}\n[data-slice-theme-scope] .core-outline-special {\n\tborder-color: var(--core-outline-special);\n}\n[data-slice-theme-scope] .core-outline-tertiary {\n\tborder-color: var(--core-outline-tertiary);\n}\n[data-slice-theme-scope] .core-surface-coverup-translucent {\n\tbackground: var(--core-surface-coverup-translucent);\n}\n[data-slice-theme-scope] .core-surface-overlay-translucent {\n\tbackground: var(--core-surface-overlay-translucent);\n}\n[data-slice-theme-scope] .core-surface-primary {\n\tbackground: var(--core-surface-primary);\n}\n[data-slice-theme-scope] .core-surface-primary-tint {\n\tbackground: var(--core-surface-primary-tint);\n}\n[data-slice-theme-scope] .core-surface-secondary {\n\tbackground: var(--core-surface-secondary);\n}\n[data-slice-theme-scope] .core-surface-special {\n\tbackground: var(--core-surface-special);\n}\n[data-slice-theme-scope] .core-text-dark {\n\tcolor: var(--core-text-dark);\n}\n[data-slice-theme-scope] .core-text-disabled {\n\tcolor: var(--core-text-disabled);\n}\n[data-slice-theme-scope] .core-text-error {\n\tcolor: var(--core-text-error);\n}\n[data-slice-theme-scope] .core-text-light {\n\tcolor: var(--core-text-light);\n}\n[data-slice-theme-scope] .core-text-primary {\n\tcolor: var(--core-text-primary);\n}\n[data-slice-theme-scope] .core-text-secondary {\n\tcolor: var(--core-text-secondary);\n}\n[data-slice-theme-scope] .core-text-special {\n\tcolor: var(--core-text-special);\n}\n[data-slice-theme-scope] .core-text-tertiary {\n\tcolor: var(--core-text-tertiary);\n}\n[data-slice-theme-scope] .eor-tag-employee {\n\tcolor: var(--eor-tag-employee);\n}\n[data-slice-theme-scope] .eor-tag-overdue {\n\tcolor: var(--eor-tag-overdue);\n}\n[data-slice-theme-scope] .eor-tag-paid {\n\tcolor: var(--eor-tag-paid);\n}\n[data-slice-theme-scope] .eor-tag-pending {\n\tcolor: var(--eor-tag-pending);\n}\n[data-slice-theme-scope] .eor-tag-professional {\n\tcolor: var(--eor-tag-professional);\n}\n[data-slice-theme-scope] .feedback-attention {\n\tcolor: var(--feedback-attention);\n}\n[data-slice-theme-scope] .feedback-informative {\n\tcolor: var(--feedback-informative);\n}\n[data-slice-theme-scope] .feedback-positive {\n\tcolor: var(--feedback-positive);\n}\n[data-slice-theme-scope] .feedback-urgency {\n\tcolor: var(--feedback-urgency);\n}\n[data-slice-theme-scope] .feedback-warning {\n\tcolor: var(--feedback-warning);\n}\n[data-slice-theme-scope] .gia-tag-risk-high {\n\tcolor: var(--gia-tag-risk-high);\n}\n[data-slice-theme-scope] .gia-tag-risk-low {\n\tcolor: var(--gia-tag-risk-low);\n}\n[data-slice-theme-scope] .gia-tag-risk-moderate {\n\tcolor: var(--gia-tag-risk-moderate);\n}\n[data-slice-theme-scope] .gia-text-excerpt-highlight {\n\tcolor: var(--gia-text-excerpt-highlight);\n}\n[data-slice-theme-scope] .gia-text-selection {\n\tcolor: var(--gia-text-selection);\n}\n[data-slice-theme-scope] .scroll-bar {\n\tcolor: var(--scroll-bar);\n}\n[data-slice-theme-scope] .scroll-bar-hover {\n\tcolor: var(--scroll-bar-hover);\n}\n[data-slice-theme-scope] .surface-shadow-soft {\n\tcolor: var(--surface-shadow-soft);\n}\n[data-slice-theme-scope] .surface-shadow-strong {\n\tcolor: var(--surface-shadow-strong);\n}\n\n[data-slice-theme-scope] {\n\tbackground: var(--core-surface-primary);\n}\n\n[data-slice-theme-scope] a {\n\tcolor: var(--core-text-special);\n\ttext-decoration: underline;\n}\n\n[data-slice-theme-scope] a:visited {\n\tcolor: var(--core-text-special);\n\ttext-decoration: underline;\n}\n\n[data-slice-theme-scope] a:hover {\n\ttext-decoration: none;\n}\n\n[data-slice-theme-scope] code {\n\tborder: 1px solid var(--core-outline-primary);\n\tbackground: var(--core-surface-secondary);\n\tcolor: var(--core-text-primary);\n}\n');
 
 styleInject_es.styleInject("[data-slice-theme-scope] {\n\t--elevation-below-surface: -100;\n\t--elevation-surface: 0;\n\t--elevation-float: 100;\n\t--elevation-describe: 200;\n\t--elevation-status: 300;\n\t--elevation-notify: 400;\n\t--elevation-overlay: 500;\n\t--elevation-confirm: 600;\n}\n");
 
-styleInject_es.styleInject('@import url("https://fonts.googleapis.com/css2?family=Funnel+Sans:ital,wght@0,300..800;1,300..800&display=swap");\n\n[data-slice-theme-scope] {\n\t--font-family: "Funnel Sans";\n\t--font-weight-regular: 360;\n\t--font-weight-medium: 420;\n\t--font-weight-bold: 480;\n\t--font-size-xs: 12px;\n\t--font-size-s: 14px;\n\t--font-size-m: 15px;\n\t--font-size-l: 16px;\n\t--font-size-xl: 17px;\n}\n\n[data-slice-theme-scope] .body-xs-regular {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}\n\n[data-slice-theme-scope] .body-xs-medium {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}\n\n[data-slice-theme-scope] .body-xs-bold {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.25px;\n}\n\n[data-slice-theme-scope] .body-s-regular {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}\n\n[data-slice-theme-scope] .body-s-medium {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}\n\n[data-slice-theme-scope] .body-s-bold {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}\n\n[data-slice-theme-scope] .body-m-regular {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}\n\n[data-slice-theme-scope] .body-m-medium {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}\n\n[data-slice-theme-scope] .body-m-bold {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}\n\n[data-slice-theme-scope] .body-l-regular {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}\n\n[data-slice-theme-scope] .body-l-medium {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}\n\n[data-slice-theme-scope] .body-l-bold {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}\n\n[data-slice-theme-scope] .body-xl-regular {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}\n\n[data-slice-theme-scope] .body-xl-medium {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}\n\n[data-slice-theme-scope] .body-xl-bold {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}\n\n[data-slice-theme-scope] .heading-s-medium {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 20px;\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}\n\n[data-slice-theme-scope] .heading-s-bold {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 20px;\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}\n\n[data-slice-theme-scope] .heading-m-medium {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 24px;\n\tline-height: 116.67%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}\n\n[data-slice-theme-scope] .heading-m-bold {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 24px;\n\tline-height: 116.67%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}\n\n[data-slice-theme-scope] .heading-l-medium {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 30px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}\n\n[data-slice-theme-scope] .heading-l-bold {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 30px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}\n\n[data-slice-theme-scope] .heading-xl-medium {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 36px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}\n\n[data-slice-theme-scope] .heading-xl-bold {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 36px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}\n\n[data-slice-theme-scope] {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}\n\n[data-slice-theme-scope] h1 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 36px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}\n\n[data-slice-theme-scope] h2 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 30px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}\n\n[data-slice-theme-scope] h3 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 24px;\n\tline-height: 116.67%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}\n\n[data-slice-theme-scope] h4 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 20px;\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}\n\n[data-slice-theme-scope] h1,\n[data-slice-theme-scope] h2,\n[data-slice-theme-scope] h3,\n[data-slice-theme-scope] h4 {\n\tmargin: 1.5em 0 0.6em 0;\n}\n\n[data-slice-theme-scope] h1:first-child {\n\tmargin: 0 0 0.6em 0;\n}\n\n[data-slice-theme-scope] p {\n\tmargin: 0 0 1.5em 0;\n}\n\n[data-slice-theme-scope] b,\n[data-slice-theme-scope] strong {\n\tfont-weight: var(--font-weight-bold);\n}\n');
+styleInject_es.styleInject('@import url("https://fonts.googleapis.com/css2?family=Funnel+Sans:ital,wght@0,300..800;1,300..800&display=swap");\n\n[data-slice-theme-scope] {\n\t--font-family: "Funnel Sans";\n\t--font-weight-regular: 360;\n\t--font-weight-medium: 420;\n\t--font-weight-bold: 480;\n\t--font-size-xs: 12px;\n\t--font-size-s: 14px;\n\t--font-size-m: 15px;\n\t--font-size-l: 16px;\n\t--font-size-xl: 17px;\n}\n\n[data-slice-theme-scope] .body-xs-regular {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}\n\n[data-slice-theme-scope] .body-xs-medium {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}\n\n[data-slice-theme-scope] .body-xs-bold {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.25px;\n}\n\n[data-slice-theme-scope] .body-s-regular {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}\n\n[data-slice-theme-scope] .body-s-medium {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}\n\n[data-slice-theme-scope] .body-s-bold {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}\n\n[data-slice-theme-scope] .body-m-regular {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}\n\n[data-slice-theme-scope] .body-m-medium {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}\n\n[data-slice-theme-scope] .body-m-bold {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}\n\n[data-slice-theme-scope] .body-l-regular {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}\n\n[data-slice-theme-scope] .body-l-medium {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}\n\n[data-slice-theme-scope] .body-l-bold {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}\n\n[data-slice-theme-scope] .body-xl-regular {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}\n\n[data-slice-theme-scope] .body-xl-medium {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}\n\n[data-slice-theme-scope] .body-xl-bold {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}\n\n[data-slice-theme-scope] .heading-s-medium {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 20px;\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}\n\n[data-slice-theme-scope] .heading-s-bold {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 20px;\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}\n\n[data-slice-theme-scope] .heading-m-medium {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 24px;\n\tline-height: 116.67%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}\n\n[data-slice-theme-scope] .heading-m-bold {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 24px;\n\tline-height: 116.67%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}\n\n[data-slice-theme-scope] .heading-l-medium {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 30px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}\n\n[data-slice-theme-scope] .heading-l-bold {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 30px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}\n\n[data-slice-theme-scope] .heading-xl-medium {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 36px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}\n\n[data-slice-theme-scope] .heading-xl-bold {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 36px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}\n\n[data-slice-theme-scope] h1,\n[data-slice-theme-scope] h2,\n[data-slice-theme-scope] h3,\n[data-slice-theme-scope] h4 {\n\tmargin: 1.5em 0 0.6em 0;\n}\n\n[data-slice-theme-scope] h1 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 560;\n\tfont-size: 36px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n\tmargin-top: 0;\n}\n\n[data-slice-theme-scope] h2 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 30px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}\n\n[data-slice-theme-scope] h3 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 24px;\n\tline-height: 116.67%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}\n\n[data-slice-theme-scope] h4 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 20px;\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}\n\n[data-slice-theme-scope] p {\n\tmargin: 0 0 1.5em 0;\n}\n\n[data-slice-theme-scope] b,\n[data-slice-theme-scope] strong {\n\tfont-weight: var(--font-weight-bold);\n}\n');
 
 styleInject_es.styleInject("/* Keep these values in sync with src/hooks/useWindow/useWindow.ts */\n");
 
@@ -19,42 +19,59 @@ styleInject_es.styleInject("[data-slice-theme-scope] {\n\t--motion-magnet: cubic
 styleInject_es.styleInject('.slice-global-body {\n\t/* apply themed background color */\n\tbackground-color: var(--core-surface-primary);\n\t/* remove gaps */\n\tmargin: 0;\n\tpadding: 0;\n\t/* base medium body font style with pref. for theme google font */\n\tfont-family: "Funnel Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",\n\t\tRoboto, Helvetica, Arial, sans-serif;\n\tfont-weight: 360;\n\tfont-size: 15px;\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n\t-webkit-font-smoothing: antialiased;\n}\n');
 
 const ThemeContext = React.createContext({
-    initialTheme: theme_themes.lightTheme.name
+    initialTheme: theme_themes.lightTheme.name,
+    systemTheme: !0,
+    setSystemTheme: () => {}
 });
 
-function setDocumentTheme(name) {
+function resolveTheme(theme, system) {
+    if (theme) return theme.includes("dark") ? theme_themes.darkTheme : theme_themes.lightTheme;
+}
+
+function setDocumentTheme(name, system) {
     "undefined" != typeof document && (document.documentElement.dataset.sliceTheme = name, 
-    document.cookie = `slice-theme=${encodeURIComponent(name)}; path=/; max-age=31536000; samesite=lax`);
+    document.cookie = `slice-theme=${encodeURIComponent(name)}; path=/; max-age=31536000; samesite=lax`, 
+    document.cookie = `slice-system-theme=${encodeURIComponent(system)}; path=/; max-age=31536000; samesite=lax`);
 }
 
 exports.ThemeProvider = function(props) {
-    const {children: children, theme: theme, system: system, global: global, initialTheme: initialTheme} = props, contextValue = React.useMemo(() => ({
-        initialTheme: null != initialTheme ? initialTheme : theme_themes.lightTheme.name
-    }), [ initialTheme ]);
+    const {children: children, theme: theme, system: system, global: global, initialTheme: initialTheme} = props, [systemTheme, setSystemTheme] = React.useState(null == system || system);
+    React.useEffect(() => {
+        setSystemTheme(null == system || system);
+    }, [ system ]);
+    const contextValue = React.useMemo(() => ({
+        initialTheme: null != initialTheme ? initialTheme : theme_themes.lightTheme.name,
+        systemTheme: systemTheme,
+        setSystemTheme: setSystemTheme
+    }), [ initialTheme, systemTheme ]);
     return React.useEffect(() => {
-        if (theme || initialTheme) {
-            const newTheme = function(theme) {
-                if (theme) return theme.includes("dark") ? theme_themes.darkTheme : theme_themes.lightTheme;
-            }(null != theme ? theme : initialTheme);
+        if (theme) {
+            setSystemTheme(!1);
+            const newTheme = resolveTheme(theme);
+            if (!newTheme) return;
+            return void setDocumentTheme(newTheme.name, !1);
+        }
+        if (initialTheme && !systemTheme && "undefined" != typeof document && !document.documentElement.dataset.sliceTheme) {
+            const newTheme = resolveTheme(initialTheme);
             if (!newTheme) return;
-            setDocumentTheme(newTheme.name);
+            setDocumentTheme(newTheme.name, !1);
         }
-    }, [ theme, initialTheme ]), React.useEffect(() => {
-        if (!system) return;
+    }, [ theme, initialTheme, systemTheme ]), React.useEffect(() => {
+        if (!systemTheme) return;
         const darkModeMediaQuery = "undefined" == typeof globalThis || "function" != typeof globalThis.matchMedia ? null : globalThis.matchMedia("(prefers-color-scheme: dark)");
         if (!darkModeMediaQuery) return;
         const handleSystemThemeChange = e => {
-            if (system) {
-                setDocumentTheme((e.matches ? theme_themes.darkTheme : theme_themes.lightTheme).name);
+            if (systemTheme) {
+                setDocumentTheme((e.matches ? theme_themes.darkTheme : theme_themes.lightTheme).name, !0);
             }
         };
-        if (system) {
-            setDocumentTheme((darkModeMediaQuery.matches ? theme_themes.darkTheme : theme_themes.lightTheme).name);
+        if (systemTheme) {
+            setDocumentTheme((darkModeMediaQuery.matches ? theme_themes.darkTheme : theme_themes.lightTheme).name, !0);
         }
         return darkModeMediaQuery.addEventListener("change", handleSystemThemeChange), () => {
             darkModeMediaQuery.removeEventListener("change", handleSystemThemeChange);
         };
-    }, [ system ]), React.useEffect(() => {
+    }, [ systemTheme ]), React.useEffect(() => {
         if (global) {
             if ("undefined" != typeof document) return document.body.classList.add("slice-global-body"), 
             () => {

package/dist/cjs/stores/microphone.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var microphoneStore = require("../chunks/microphoneStore-D1fV_8QQ.js");
+
+require("../chunks/tslib.es6-C8dZW5nY.js"), require("react"), require("zustand"), 
+exports.getMicrophoneState = microphoneStore.getMicrophoneState, exports.microphoneActions = microphoneStore.microphoneActions, 
+exports.useCurrentMicDeviceId = microphoneStore.useCurrentMicDeviceId, exports.useMicActive = microphoneStore.useMicActive, 
+exports.useMicError = microphoneStore.useMicError, exports.useMicInputVolume = microphoneStore.useMicInputVolume, 
+exports.useMicMuted = microphoneStore.useMicMuted, exports.useMicOptions = microphoneStore.useMicOptions, 
+exports.useMicRequesting = microphoneStore.useMicRequesting, exports.useMicStream = microphoneStore.useMicStream, 
+exports.useMicSupported = microphoneStore.useMicSupported, exports.useMicTrack = microphoneStore.useMicTrack, 
+exports.useMicrophoneStore = microphoneStore.useMicrophoneStore, exports.useMicrophoneStoreActions = microphoneStore.useMicrophoneStoreActions, 
+exports.useMicrophones = microphoneStore.useMicrophones, exports.useProcessedMicStream = microphoneStore.useProcessedMicStream, 
+exports.useSyncMicrophoneStore = microphoneStore.useSyncMicrophoneStore;

package/dist/cjs/stores/volume.js

@@ -0,0 +1,10 @@
+"use strict";
+
+var volumeStore = require("../chunks/volumeStore-oYwlRVN0.js");
+
+require("../chunks/tslib.es6-C8dZW5nY.js"), require("zustand"), exports.getAttachedMedia = volumeStore.getAttachedMedia, 
+exports.getMuted = volumeStore.getMuted, exports.getStoredVolume = volumeStore.getStoredVolume, 
+exports.getVolume = volumeStore.getVolume, exports.useAttachedMedia = volumeStore.useAttachedMedia, 
+exports.useMuted = volumeStore.useMuted, exports.useStoredVolume = volumeStore.useStoredVolume, 
+exports.useVolume = volumeStore.useVolume, exports.useVolumeActions = volumeStore.useVolumeActions, 
+exports.useVolumeStore = volumeStore.useVolumeStore, exports.volumeActions = volumeStore.volumeActions;

package/dist/cjs/stores.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var windowStore = require("./chunks/windowStore-CCxCOUqa.js"), uploadsStore = require("./chunks/uploadsStore-CxWIctvI.js"), tipStore = require("./chunks/tipStore-Ck4NLvml.js"), toastStore = require("./chunks/toastStore-CSStgB9d.js"), localDBStore = require("./chunks/localDBStore-zyDhaEiP.js"), sseStore = require("./chunks/sseStore-1OeJ9TRP.js");
+var windowStore = require("./chunks/windowStore-CCxCOUqa.js"), uploadsStore = require("./chunks/uploadsStore-CxWIctvI.js"), volumeStore = require("./chunks/volumeStore-oYwlRVN0.js"), microphoneStore = require("./chunks/microphoneStore-D1fV_8QQ.js"), tipStore = require("./chunks/tipStore-Ck4NLvml.js"), toastStore = require("./chunks/toastStore-CSStgB9d.js"), localDBStore = require("./chunks/localDBStore-zyDhaEiP.js"), sseStore = require("./chunks/sseStore-1OeJ9TRP.js");
 
 require("./chunks/tslib.es6-C8dZW5nY.js"), require("zustand"), require("./chunks/uploads-worker-mD8pcsGP.js"), 
 require("react"), require("zustand/react/shallow"), require("./chunks/IndexedDB-BaVmQgkK.js"), 
@@ -26,7 +26,21 @@ exports.getUploadsWorkerStatus = uploadsStore.getUploadsWorkerStatus, exports.up
 exports.uploadsInitialized = uploadsStore.uploadsInitialized, exports.useUploads = uploadsStore.useUploads, 
 exports.useUploadsActions = uploadsStore.useUploadsActions, exports.useUploadsError = uploadsStore.useUploadsError, 
 exports.useUploadsInitialized = uploadsStore.useUploadsInitialized, exports.useUploadsStore = uploadsStore.useUploadsStore, 
-exports.useUploadsWorkerStatus = uploadsStore.useUploadsWorkerStatus, exports.getTip = tipStore.getTip, 
+exports.useUploadsWorkerStatus = uploadsStore.useUploadsWorkerStatus, exports.getAttachedMedia = volumeStore.getAttachedMedia, 
+exports.getMuted = volumeStore.getMuted, exports.getStoredVolume = volumeStore.getStoredVolume, 
+exports.getVolume = volumeStore.getVolume, exports.useAttachedMedia = volumeStore.useAttachedMedia, 
+exports.useMuted = volumeStore.useMuted, exports.useStoredVolume = volumeStore.useStoredVolume, 
+exports.useVolume = volumeStore.useVolume, exports.useVolumeActions = volumeStore.useVolumeActions, 
+exports.useVolumeStore = volumeStore.useVolumeStore, exports.volumeActions = volumeStore.volumeActions, 
+exports.getMicrophoneState = microphoneStore.getMicrophoneState, exports.microphoneActions = microphoneStore.microphoneActions, 
+exports.useCurrentMicDeviceId = microphoneStore.useCurrentMicDeviceId, exports.useMicActive = microphoneStore.useMicActive, 
+exports.useMicError = microphoneStore.useMicError, exports.useMicInputVolume = microphoneStore.useMicInputVolume, 
+exports.useMicMuted = microphoneStore.useMicMuted, exports.useMicOptions = microphoneStore.useMicOptions, 
+exports.useMicRequesting = microphoneStore.useMicRequesting, exports.useMicStream = microphoneStore.useMicStream, 
+exports.useMicSupported = microphoneStore.useMicSupported, exports.useMicTrack = microphoneStore.useMicTrack, 
+exports.useMicrophoneStore = microphoneStore.useMicrophoneStore, exports.useMicrophoneStoreActions = microphoneStore.useMicrophoneStoreActions, 
+exports.useMicrophones = microphoneStore.useMicrophones, exports.useProcessedMicStream = microphoneStore.useProcessedMicStream, 
+exports.useSyncMicrophoneStore = microphoneStore.useSyncMicrophoneStore, exports.getTip = tipStore.getTip, 
 exports.tipActions = tipStore.tipActions, exports.useTip = tipStore.useTip, exports.useTipActions = tipStore.useTipActions, 
 exports.useTipStore = tipStore.useTipStore, exports.getToast = toastStore.getToast, 
 exports.toastActions = toastStore.toastActions, exports.useToast = toastStore.useToast,