@apple-pie/slice 0.1.25 → 0.1.28

package/dist/esm/hooks/useMicrophone.mjs

@@ -3,8 +3,8 @@ import { _ as __awaiter } from "../chunks/tslib.es6-C-olHjXV.mjs";
 
 import { useRef, useState, useCallback, useMemo, useEffect } from "react";
 
-function useMicrophone(startMuted = !0, microphoneDeviceId) {
-    const micStream = useRef(null), micTrack = useRef(null), mutedRef = useRef(startMuted), mountedRef = useRef(!0), initializedRef = useRef(!1), [microphones, setMicrophones] = useState([]), [micOptions, setMicOptions] = useState([]), [muted, setMuted] = useState(startMuted), [isRequesting, setIsRequesting] = useState(!1), [error, setError] = useState(null), waitForPaint = useCallback(() => __awaiter(this, void 0, void 0, function*() {
+function useMicrophone(startMuted = !0, microphoneDeviceId, autoRequest = !0) {
+    const micStream = useRef(null), micTrack = useRef(null), mutedRef = useRef(startMuted), mountedRef = useRef(!0), initializedRef = useRef(!1), [microphones, setMicrophones] = useState([]), [micOptions, setMicOptions] = useState([]), [isActive, setIsActive] = useState(!1), [muted, setMuted] = useState(startMuted), [isRequesting, setIsRequesting] = useState(!1), [error, setError] = useState(null), waitForPaint = useCallback(() => __awaiter(this, void 0, void 0, function*() {
         yield new Promise(resolve => {
             requestAnimationFrame(() => resolve());
         });
@@ -21,7 +21,7 @@ function useMicrophone(startMuted = !0, microphoneDeviceId) {
         var _a;
         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;
+        micStream.current = null, micTrack.current = null, setIsActive(!1);
     }, []), hasMediaSupport = useMemo(() => {
         var _a;
         return "undefined" != typeof navigator && Boolean(null === (_a = navigator.mediaDevices) || void 0 === _a ? void 0 : _a.getUserMedia);
@@ -30,8 +30,8 @@ function useMicrophone(startMuted = !0, microphoneDeviceId) {
         const audioTrack = micStream.current.getAudioTracks()[0];
         if (!audioTrack) throw new Error("No audio track found");
         return audioTrack;
-    }, []), muteMic = useCallback(() => (getMicTrack().enabled = !1, mutedRef.current = !0, 
-    setMuted(!0), !0), [ getMicTrack ]), unmuteMic = useCallback(() => (getMicTrack().enabled = !0, 
+    }, []), hasActiveStream = useCallback(() => !(!micStream.current || !micTrack.current) && "live" === micTrack.current.readyState, []), muteMic = useCallback(() => (getMicTrack().enabled = !1, 
+    mutedRef.current = !0, setMuted(!0), !0), [ getMicTrack ]), unmuteMic = useCallback(() => (getMicTrack().enabled = !0, 
     mutedRef.current = !1, setMuted(!1), !0), [ getMicTrack ]), constraints = useCallback((deviceId, usePreferredDevice = !0) => {
         var _a;
         const id = usePreferredDevice ? null !== (_a = null != deviceId ? deviceId : microphoneDeviceId) && void 0 !== _a ? _a : void 0 : deviceId;
@@ -45,11 +45,14 @@ function useMicrophone(startMuted = !0, microphoneDeviceId) {
     }, [ microphoneDeviceId ]), requestStream = useCallback((deviceId_1, ...args_1) => __awaiter(this, [ deviceId_1, ...args_1 ], void 0, function*(deviceId, usePreferredDevice = !0) {
         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;
+        mutedRef.current || (yield waitForTrackToBecomeActive(micTrack.current)), setIsActive(Boolean("live" === micTrack.current.readyState)), 
+        micStream.current;
     }), [ constraints, getMicTrack, waitForTrackToBecomeActive ]), requestMicrophone = useCallback(() => __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;
+            return setError(nextError), setIsActive(!1), mountedRef.current && setIsRequesting(!1), 
+            null;
         }
         setError(null), stopMicStream();
         try {
@@ -57,13 +60,13 @@ function useMicrophone(startMuted = !0, microphoneDeviceId) {
         } 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;
+                throw setError(nextError), setIsActive(!1), nextError;
             }
             return yield requestStream(void 0, !1);
         } finally {
             setIsRequesting(!1);
         }
-    }), [ hasMediaSupport, requestStream, stopMicStream, waitForPaint ]), refreshMicrophones = useCallback(() => __awaiter(this, void 0, void 0, function*() {
+    }), [ hasActiveStream, hasMediaSupport, requestStream, stopMicStream, waitForPaint ]), refreshMicrophones = useCallback(() => __awaiter(this, void 0, void 0, function*() {
         if (!hasMediaSupport) return [];
         try {
             const devices = yield navigator.mediaDevices.enumerateDevices(), mics = devices.filter(device => "audioinput" === device.kind), options = mics.map(mic => ({
@@ -84,7 +87,7 @@ function useMicrophone(startMuted = !0, microphoneDeviceId) {
         try {
             setError(null), stopMicStream(), yield requestStream(id, !1);
         } catch (err) {
-            setError(err instanceof Error ? err : new Error("Error switching microphone")), 
+            setIsActive(!1), setError(err instanceof Error ? err : new Error("Error switching microphone")), 
             console.warn("Error switching microphone:", err);
         } finally {
             setIsRequesting(!1);
@@ -98,14 +101,16 @@ function useMicrophone(startMuted = !0, microphoneDeviceId) {
     }, [ muted, unmuteMic, muteMic ]);
     return 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 ]), 
     useEffect(() => {
         var _a;
         if (!hasMediaSupport || !(null === (_a = navigator.mediaDevices) || void 0 === _a ? void 0 : _a.addEventListener)) return;
@@ -126,6 +131,7 @@ function useMicrophone(startMuted = !0, microphoneDeviceId) {
     {
         micStream: micStream,
         micTrack: micTrack,
+        isActive: isActive,
         muted: muted,
         isSupported: hasMediaSupport,
         isRequesting: isRequesting,

package/dist/esm/hooks/useObserveTheme.mjs

@@ -1,10 +1,16 @@
 'use client';
 import { useState, useEffect } from "react";
 
+import { useThemeContext } from "../providers/ThemeProvider.mjs";
+
 import { lightTheme, darkTheme } from "../theme/themes.mjs";
 
 import "../theme/colors.mjs";
 
+import "react/jsx-runtime";
+
+import "../chunks/style-inject.es-D0BjEaN8.mjs";
+
 import "../theme/corners.mjs";
 
 import "../theme/elevations.mjs";
@@ -18,20 +24,20 @@ function resolveTheme(themeName) {
 }
 
 function useObserveTheme() {
-    const [theme, setTheme] = useState(() => "undefined" == typeof document ? lightTheme : resolveTheme(document.documentElement.dataset.sliceTheme));
+    const {initialTheme: initialTheme} = useThemeContext(), [theme, setTheme] = useState(() => "undefined" == typeof document ? resolveTheme(initialTheme) : resolveTheme(document.documentElement.dataset.sliceTheme || initialTheme));
     return useEffect(() => {
-        setTheme(resolveTheme(document.documentElement.dataset.sliceTheme));
+        setTheme(resolveTheme(document.documentElement.dataset.sliceTheme || initialTheme));
         const observer = new MutationObserver(mutations => {
             for (const mutation of mutations) if ("attributes" === mutation.type && "data-slice-theme" === mutation.attributeName) {
                 const newTheme = document.documentElement.dataset.sliceTheme;
-                setTheme(resolveTheme(newTheme));
+                setTheme(resolveTheme(newTheme || initialTheme));
             }
         });
         return observer.observe(document.documentElement, {
             attributes: !0,
             attributeFilter: [ "data-slice-theme" ]
         }), () => observer.disconnect();
-    }, []), theme;
+    }, [ initialTheme ]), theme;
 }
 
 export { useObserveTheme };

package/dist/esm/hooks/useTheme.mjs

@@ -1,6 +1,8 @@
 'use client';
 import { useCallback, useMemo } from "react";
 
+import { useThemeContext } from "../providers/ThemeProvider.mjs";
+
 import { darkTheme, lightTheme } from "../theme/themes.mjs";
 
 import { colorClass, colorCssVars } from "../theme/colors.mjs";
@@ -9,22 +11,36 @@ import { typeStyles, typeCssClasses } from "../theme/type.mjs";
 
 import { useObserveTheme } from "./useObserveTheme.mjs";
 
+import "react/jsx-runtime";
+
+import "../chunks/style-inject.es-D0BjEaN8.mjs";
+
 import "../theme/corners.mjs";
 
 import "../theme/elevations.mjs";
 
 import "../theme/motion.mjs";
 
+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`);
+}
+
 /**
  * Hook to manage Slice theming
  */ function useTheme() {
-    const current = useObserveTheme(), set = useCallback(newTheme => {
-        let theme;
+    const current = useObserveTheme(), {systemTheme: systemTheme, setSystemTheme: setSystemTheme} = useThemeContext(), set = useCallback(newTheme => {
+        let theme, system = !1;
         if ("string" == typeof newTheme) if ("system" === newTheme) {
+            system = !0;
             theme = globalThis.matchMedia("(prefers-color-scheme: dark)").matches ? darkTheme : lightTheme;
         } else theme = newTheme === darkTheme.name ? darkTheme : lightTheme; else theme = newTheme;
-        document.documentElement.dataset.sliceTheme = theme.name;
-    }, []), isDark = useMemo(() => current.name === darkTheme.name, [ current ]);
+        setSystemTheme(system), setDocumentTheme(theme.name, system);
+    }, [ setSystemTheme ]), toggle = useCallback(() => {
+        const newTheme = current.name === lightTheme.name ? darkTheme : lightTheme;
+        setSystemTheme(!1), setDocumentTheme(newTheme.name, !1);
+    }, [ current.name, setSystemTheme ]), isDark = useMemo(() => current.name === darkTheme.name, [ current ]);
     return {
         /**
          * Slice's default dark theme
@@ -60,16 +76,17 @@ import "../theme/motion.mjs";
          */
         set: set,
         /**
-         * Toggle between light and dark themes
+         * Togglebetween light and dark themes
          */
-        toggle: () => {
-            const newTheme = current.name === lightTheme.name ? darkTheme : 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/esm/hooks/useToolTip.mjs

@@ -1,5 +1,5 @@
 'use client';
-import { useState, useLayoutEffect } from "react";
+import { useState, useCallback, useLayoutEffect } from "react";
 
 const hiddenCoords = {
     x: 0,
@@ -7,18 +7,33 @@ const hiddenCoords = {
 };
 
 function useToolTip(toolTip, tipElement) {
-    const [coords, setCoords] = useState(hiddenCoords);
+    const [coords, setCoords] = useState(hiddenCoords), adjustX = useCallback(x => {
+        var _a;
+        if (x < 10) return 10;
+        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;
+    }, [ tipElement ]), adjustY = useCallback((y, parentY) => {
+        var _a;
+        if (y < 10) return 10;
+        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 useLayoutEffect(() => {
         var _a;
         if (!toolTip || !(null == tipElement ? void 0 : tipElement.current)) return void setCoords(hiddenCoords);
         const target = null === (_a = toolTip.ref) || void 0 === _a ? void 0 : _a.current;
         if (!target) return void setCoords(hiddenCoords);
-        const parentRect = target.getBoundingClientRect(), tipRect = tipElement.current.getBoundingClientRect(), {x: parentX, y: parentY, width: parentWidth, height: parentHeight} = parentRect, {width: tipWidth} = tipRect;
+        const parentRect = target.getBoundingClientRect(), tipRect = tipElement.current.getBoundingClientRect(), {x: parentX, y: parentY, width: parentWidth, height: parentHeight} = parentRect, {width: tipWidth} = tipRect, y = parentY + parentHeight + 10;
         setCoords({
-            x: parentX + parentWidth / 2 - tipWidth / 2,
-            y: parentY + parentHeight + 10
+            x: adjustX(parentX + parentWidth / 2 - tipWidth / 2),
+            y: adjustY(y, parentY)
         });
-    }, [ toolTip, tipElement ]), coords;
+    }, [ toolTip, tipElement, adjustX, adjustY ]), coords;
 }
 
 export { useToolTip };

package/dist/esm/hooks.mjs

@@ -24,6 +24,12 @@ export { useObserveResize } from "./hooks/useObserveResize.mjs";
 
 import "react";
 
+import "./providers/ThemeProvider.mjs";
+
+import "react/jsx-runtime";
+
+import "./chunks/style-inject.es-D0BjEaN8.mjs";
+
 import "./theme/themes.mjs";
 
 import "./theme/colors.mjs";

package/dist/esm/index.mjs

@@ -32,7 +32,7 @@ export { useWindow } from "./hooks/useWindow.mjs";
 
 export { useObserveResize } from "./hooks/useObserveResize.mjs";
 
-export { A as AudioBubble } from "./chunks/AudioBubble-DZfzkdlq.mjs";
+export { A as AudioBubble } from "./chunks/AudioBubble-D052QyPH.mjs";
 
 export { A as Avatar } from "./chunks/Avatar-m5-zleDk.mjs";
 
@@ -40,37 +40,37 @@ export { A as AvatarGroup } from "./chunks/AvatarGroup-DlgP4lTS.mjs";
 
 export { B as Badge } from "./chunks/Badge-CC0zSLMf.mjs";
 
-export { I as IconButton } from "./chunks/IconButton-Dciw5CLn.mjs";
+export { I as IconButton } from "./chunks/IconButton-b1v9Me0P.mjs";
 
-export { C as Camera } from "./chunks/Camera-BJJpDuuA.mjs";
+export { C as Camera } from "./chunks/Camera-BQBo2g52.mjs";
 
-export { C as CheckBox } from "./chunks/CheckBox-Cf2l3-D9.mjs";
+export { C as CheckBox } from "./chunks/CheckBox-DDwE1wkX.mjs";
 
 export { D as DivInput } from "./chunks/DivInput-WJltaCra.mjs";
 
 export { D as Dot } from "./chunks/Dot-DZE134mJ.mjs";
 
-export { D as DraggablePanel } from "./chunks/DrggablePanel-DA7pYWg6.mjs";
+export { D as DraggablePanel } from "./chunks/DrggablePanel-Dc6lqqfO.mjs";
 
-export { D as DropDown } from "./chunks/DropDown-BQ2tNN3_.mjs";
+export { D as DropDown } from "./chunks/DropDown-CdkEVTRk.mjs";
 
 export { E as ErrorSummary } from "./chunks/ErrorSummary-EzCqVifm.mjs";
 
-export { G as Grouper } from "./chunks/Grouper-CvPYEsF_.mjs";
+export { G as Grouper } from "./chunks/Grouper-C4A3qYot.mjs";
 
 export { O as Overlay } from "./chunks/Overlay-DiSvgIQP.mjs";
 
-export { F as FlexDiv, P as Preset, S as Size } from "./chunks/FlexDiv-BFrVoFhC.mjs";
+export { F as FlexDiv, P as Preset, S as Size } from "./chunks/FlexDiv-BWZ7f8mA.mjs";
 
 export { P as Pager } from "./chunks/Pager-BoDLaKFh.mjs";
 
-export { P as PromptInput } from "./chunks/PromptInput-plgRiAb7.mjs";
+export { P as PromptInput } from "./chunks/PromptInput-Dmx4sQZ3.mjs";
 
-export { D as DoneCheck, P as ProgressIndicator } from "./chunks/ProgressIndicator-CB_oazMD.mjs";
+export { D as DoneCheck, P as ProgressIndicator } from "./chunks/ProgressIndicator-D5e7406q.mjs";
 
-export { R as RadioButton } from "./chunks/RadioButton-B6ImCUYY.mjs";
+export { R as RadioButton } from "./chunks/RadioButton-D2T-SsVw.mjs";
 
-export { R as RadioButtonList } from "./chunks/RadioButtonList-Cf6gk8yp.mjs";
+export { R as RadioButtonList } from "./chunks/RadioButtonList-BSPuAYoh.mjs";
 
 export { S as Slider } from "./chunks/Slider-Cav86rU6.mjs";
 
@@ -78,33 +78,35 @@ export { S as Spacer } from "./chunks/Spacer-C5651N0N.mjs";
 
 export { S as Switch } from "./chunks/Switch-RfA431T4.mjs";
 
-export { T as TabBar } from "./chunks/TabBar-0zpJ9GtN.mjs";
+export { T as ToggleButton } from "./chunks/ToggleButton-B5oobnXJ.mjs";
 
-export { T as TextArea } from "./chunks/TextArea-B64bIPHm.mjs";
+export { T as TabBar } from "./chunks/TabBar-DBoZ8aoV.mjs";
 
-export { T as TextField } from "./chunks/TextField-BZeoN_ye.mjs";
+export { T as TextArea } from "./chunks/TextArea-CSUDfcYd.mjs";
+
+export { T as TextField } from "./chunks/TextField-Z1O858hB.mjs";
 
 export { ThemeProvider } from "./providers/ThemeProvider.mjs";
 
-export { T as Tip } from "./chunks/Tip-C5LB54J9.mjs";
+export { T as Tip } from "./chunks/Tip-B8YrmJEt.mjs";
 
-export { T as Toast, a as ToastType } from "./chunks/Toast-Bl4s4tRo.mjs";
+export { T as Toast, a as ToastType } from "./chunks/Toast-QQ6GMr5F.mjs";
 
-export { B as Button } from "./chunks/Button-YER9dCLE.mjs";
+export { B as Button } from "./chunks/Button-BIbAGVV8.mjs";
 
-export { C as Chip } from "./chunks/Chip-DWp7p2BF.mjs";
+export { C as Chip } from "./chunks/Chip-BuHc883v.mjs";
 
 export { F as FileIcon, a as FileIconNames } from "./chunks/FileIcon-Cufsp1gn.mjs";
 
-export { I as Icon } from "./chunks/Icon-DI32kOA1.mjs";
+export { I as Icon } from "./chunks/Icon-DRzjkybv.mjs";
 
-export { S as SliceIcons } from "./chunks/_types-DeEhv4Y5.mjs";
+export { S as SliceIcons } from "./chunks/_types-fSW-DudT.mjs";
 
-export { B as ButtonBar } from "./chunks/ButtonBar-BH4pcEpN.mjs";
+export { B as ButtonBar } from "./chunks/ButtonBar-B-1YFX9u.mjs";
 
 export { L as Label, a as LabelBackground } from "./chunks/Label-CvCDAg1y.mjs";
 
-export { U as UploadArea, a as allTypes, b as audioTypes, d as documentTypes, i as imageTypes, t as textTypes, v as videoTypes } from "./chunks/UploadArea-D3g2g1LK.mjs";
+export { U as UploadArea, a as allTypes, b as audioTypes, d as documentTypes, i as imageTypes, t as textTypes, v as videoTypes } from "./chunks/UploadArea-CJAQmqOS.mjs";
 
 import "./theme/corners.mjs";
 
@@ -128,6 +130,6 @@ import "./chunks/misc-BeEWwOaJ.mjs";
 
 import "motion/react";
 
-import "./chunks/FileList-BQ9X5YnB.mjs";
+import "./chunks/FileList-DN4Ubroe.mjs";
 
 import "./chunks/debounce-Bst1jxMS.mjs";

package/dist/esm/providers/ThemeProvider.mjs

@@ -1,11 +1,11 @@
 'use client';
 import { jsx } from "react/jsx-runtime";
 
-import { useEffect } from "react";
+import { createContext, useContext, useState, useEffect, useMemo } from "react";
 
 import { s as styleInject } from "../chunks/style-inject.es-D0BjEaN8.mjs";
 
-import { darkTheme, lightTheme } from "../theme/themes.mjs";
+import { lightTheme, darkTheme } from "../theme/themes.mjs";
 
 import "../theme/colors.mjs";
 
@@ -17,7 +17,7 @@ import "../theme/motion.mjs";
 
 import "../theme/type.mjs";
 
-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('/* 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-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-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-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("[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");
 
@@ -27,45 +27,82 @@ styleInject("/* Keep these values in sync with src/hooks/useWindow/useWindow.ts
 
 styleInject("[data-slice-theme-scope] {\n\t--motion-magnet: cubic-bezier(0.352, 0.003, 0.993, -0.052);\n\t--motion-water: cubic-bezier(0.36, 0, 0.64, 1);\n\t--motion-spring: linear(\n\t\t0,\n\t\t0.002 0.2%,\n\t\t0.011 0.5%,\n\t\t0.041 1%,\n\t\t0.1 1.6%,\n\t\t0.18 2.2%,\n\t\t0.365 3.3%,\n\t\t0.925 6.2%,\n\t\t1.058 7%,\n\t\t1.17 7.8%,\n\t\t1.26 8.6%,\n\t\t1.318 9.3%,\n\t\t1.342 9.7%,\n\t\t1.36 10.1%,\n\t\t1.372 10.5%,\n\t\t1.378 10.9%,\n\t\t1.378 11.4%,\n\t\t1.374 11.7%,\n\t\t1.368 12%,\n\t\t1.348 12.6%,\n\t\t1.314 13.3%,\n\t\t1.237 14.5%,\n\t\t1.026 17.4%,\n\t\t0.975 18.2%,\n\t\t0.933 19%,\n\t\t0.9 19.8%,\n\t\t0.878 20.5%,\n\t\t0.864 21.2%,\n\t\t0.859 21.6%,\n\t\t0.857 22%,\n\t\t0.856 22.5%,\n\t\t0.86 23.1%,\n\t\t0.867 23.7%,\n\t\t0.88 24.4%,\n\t\t0.909 25.6%,\n\t\t0.991 28.6%,\n\t\t1.01 29.4%,\n\t\t1.026 30.2%,\n\t\t1.037 30.9%,\n\t\t1.046 31.6%,\n\t\t1.051 32.3%,\n\t\t1.054 33.1%,\n\t\t1.053 34.2%,\n\t\t1.046 35.5%,\n\t\t1.035 36.7%,\n\t\t1.003 39.8%,\n\t\t0.99 41.4%,\n\t\t0.983 42.8%,\n\t\t0.979 44.2%,\n\t\t0.982 46.3%,\n\t\t1.002 52%,\n\t\t1.006 53.6%,\n\t\t1.008 55.2%,\n\t\t1.007 57.5%,\n\t\t0.999 63.1%,\n\t\t0.997 66.3%,\n\t\t1.001 77.2%,\n\t\t1 88.2%,\n\t\t1\n\t);\n\t--motion-magnet-duration: 0.5s;\n\t--motion-water-duration: 0.25s;\n\t--motion-spring-duration: 1s;\n}\n");
 
+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 = createContext({
+    initialTheme: lightTheme.name,
+    systemTheme: !0,
+    setSystemTheme: () => {}
+});
+
+function useThemeContext() {
+    return useContext(ThemeContext);
+}
+
+function resolveTheme(theme, system) {
+    if (theme) return theme.includes("dark") ? darkTheme : 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-system-theme=${encodeURIComponent(system)}; path=/; max-age=31536000; samesite=lax`);
+}
+
 function ThemeProvider(props) {
-    const {children: children, theme: theme, system: system, global: global, initialTheme: initialTheme} = props;
+    const {children: children, theme: theme, system: system, global: global, initialTheme: initialTheme} = props, [systemTheme, setSystemTheme] = useState(null == system || system);
+    useEffect(() => {
+        setSystemTheme(null == system || system);
+    }, [ system ]);
+    const contextValue = useMemo(() => ({
+        initialTheme: null != initialTheme ? initialTheme : lightTheme.name,
+        systemTheme: systemTheme,
+        setSystemTheme: setSystemTheme
+    }), [ initialTheme, systemTheme ]);
     return useEffect(() => {
-        if (theme || initialTheme) {
-            const newTheme = function(theme) {
-                if (theme) return theme.includes("dark") ? darkTheme : 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;
-            name = newTheme.name, "undefined" != typeof document && (document.documentElement.dataset.sliceTheme = name);
+            setDocumentTheme(newTheme.name, !1);
         }
-        var name;
-    }, [ theme, initialTheme ]), useEffect(() => {
-        if (!system) return;
+    }, [ theme, initialTheme, systemTheme ]), 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) {
-                const autoTheme = e.matches ? darkTheme : lightTheme;
-                document.documentElement.dataset.sliceTheme = autoTheme.name;
+            if (systemTheme) {
+                setDocumentTheme((e.matches ? darkTheme : lightTheme).name, !0);
             }
         };
-        if (system) {
-            const autoTheme = darkModeMediaQuery.matches ? darkTheme : lightTheme;
-            document.documentElement.dataset.sliceTheme = autoTheme.name;
+        if (systemTheme) {
+            setDocumentTheme((darkModeMediaQuery.matches ? darkTheme : lightTheme).name, !0);
         }
         return darkModeMediaQuery.addEventListener("change", handleSystemThemeChange), () => {
             darkModeMediaQuery.removeEventListener("change", handleSystemThemeChange);
         };
-    }, [ system ]), useEffect(() => {
-        if (global) return document.body.classList.add("slice-global-body"), () => {
+    }, [ systemTheme ]), useEffect(() => {
+        if (global) {
+            if ("undefined" != typeof document) return document.body.classList.add("slice-global-body"), 
+            () => {
+                document.body.classList.remove("slice-global-body");
+            };
+        } else {
+            if ("undefined" == typeof document) return;
             document.body.classList.remove("slice-global-body");
-        };
-        document.body.classList.remove("slice-global-body");
-    }, [ global ]), jsx("div", {
-        "data-slice-theme-scope": !0,
-        children: children
+        }
+    }, [ global ]), jsx(ThemeContext.Provider, {
+        value: contextValue,
+        children: jsx("div", {
+            "data-slice-theme-scope": !0,
+            children: children
+        })
     });
 }
 
-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');
-
-export { ThemeProvider };
+export { ThemeProvider, useThemeContext };

package/dist/esm/stores/microphone.mjs

@@ -0,0 +1,7 @@
+export { g as getMicrophoneState, m as microphoneActions, u as useMicActive, a as useMicError, b as useMicMuted, c as useMicOptions, d as useMicRequesting, e as useMicStream, f as useMicSupported, h as useMicTrack, i as useMicrophoneStore, j as useMicrophoneStoreActions, k as useMicrophones, l as useSyncMicrophoneStore } from "../chunks/microphoneStore-t16oxjGB.mjs";
+
+import "../chunks/tslib.es6-C-olHjXV.mjs";
+
+import "react";
+
+import "zustand";

package/dist/esm/stores.mjs

@@ -2,6 +2,8 @@ export { F as FormFactor, d as dpr, f as formFactor, g as gettingLocation, i as
 
 export { c as createUploadsWorker, g as getUploads, a as getUploadsError, b as getUploadsWorkerStatus, u as uploadsActions, d as uploadsInitialized, e as useUploads, f as useUploadsActions, h as useUploadsError, i as useUploadsInitialized, j as useUploadsStore, k as useUploadsWorkerStatus } from "./chunks/uploadsStore-B7VECR5Q.mjs";
 
+export { g as getMicrophoneState, m as microphoneActions, u as useMicActive, a as useMicError, b as useMicMuted, c as useMicOptions, d as useMicRequesting, e as useMicStream, f as useMicSupported, h as useMicTrack, i as useMicrophoneStore, j as useMicrophoneStoreActions, k as useMicrophones, l as useSyncMicrophoneStore } from "./chunks/microphoneStore-t16oxjGB.mjs";
+
 export { g as getTip, t as tipActions, u as useTip, a as useTipActions, b as useTipStore } from "./chunks/tipStore-CL5a95Bl.mjs";
 
 export { g as getToast, t as toastActions, u as useToast, a as useToastActions, b as useToastStore } from "./chunks/toastStore-D2PEIqCo.mjs";

package/dist/esm/theme/colors.mjs

@@ -133,7 +133,7 @@ const coreColors = {
     "core-icon-primary": coreColors["brand-grey-950"],
     "core-icon-secondary": coreColors["brand-grey-700"],
     "core-icon-tertiary": coreColors["brand-sea-500"],
-    "core-outline-secondary": coreColors["brand-grey-700"],
+    "core-outline-secondary": coreColors["brand-grey-100"],
     "core-outline-primary": coreColors["brand-grey-100"],
     "core-outline-special": coreColors["brand-sea-100"],
     "core-outline-tertiary": coreColors["brand-sea-500"],
@@ -199,7 +199,7 @@ const coreColors = {
     "core-icon-primary": coreColors["brand-white-0"],
     "core-icon-secondary": coreColors["brand-grey-200"],
     "core-icon-tertiary": coreColors["brand-sky-300"],
-    "core-outline-secondary": coreColors["brand-grey-100"],
+    "core-outline-secondary": coreColors["brand-grey-900"],
     "core-outline-primary": coreColors["brand-grey-700"],
     "core-outline-special": coreColors["brand-sky-900"],
     "core-outline-tertiary": coreColors["brand-sky-300"],