@apple-pie/slice 0.0.6 → 0.0.7

package/dist/esm/hooks/useObserveResize.mjs

@@ -0,0 +1,38 @@
+import { useState, useCallback, useEffect } from "react";
+
+function useObserveResize(element, options) {
+    const [size, setSize] = useState({
+        width: 0,
+        height: 0
+    }), ignore = null == options ? void 0 : options.ignore, handleResize = useCallback(entries => {
+        var _a, _b;
+        if (!entries[0]) return;
+        const width = (null === (_a = null == element ? void 0 : element.current) || void 0 === _a ? void 0 : _a.offsetWidth) || 0, height = (null === (_b = null == element ? void 0 : element.current) || void 0 === _b ? void 0 : _b.offsetHeight) || 0;
+        setSize(prev => {
+            const next = {
+                width: "width" === ignore ? prev.width : width,
+                height: "height" === ignore ? prev.height : height
+            };
+            return prev.width === next.width && prev.height === next.height ? prev : next;
+        });
+    }, [ element, ignore ]);
+    return useEffect(() => {
+        if (void 0 === element) return;
+        const el = element.current;
+        if (!el) return;
+        const newWidth = el.offsetWidth || 0, newHeight = el.offsetHeight || 0;
+        setSize(prev => {
+            const next = {
+                width: "width" === ignore ? prev.width : newWidth,
+                height: "height" === ignore ? prev.height : newHeight
+            };
+            return prev.width === next.width && prev.height === next.height ? prev : next;
+        });
+        const resizeObserver = new ResizeObserver(handleResize);
+        return resizeObserver.observe(el), () => {
+            resizeObserver.unobserve(el), resizeObserver.disconnect();
+        };
+    }, [ element, handleResize, ignore ]), size;
+}
+
+export { useObserveResize };

package/dist/esm/hooks/useObserveTheme.mjs

@@ -0,0 +1,34 @@
+import { useState, useEffect } from "react";
+
+import { lightTheme, darkTheme } from "../theme/themes.mjs";
+
+import "../theme/colors.mjs";
+
+import "../theme/corners.mjs";
+
+import "../theme/elevations.mjs";
+
+import "../theme/type.mjs";
+
+function resolveTheme(themeName) {
+    return !themeName || "" === themeName || themeName.includes(lightTheme.name) ? lightTheme : darkTheme;
+}
+
+function useObserveTheme() {
+    const [theme, setTheme] = useState(() => "undefined" == typeof document ? lightTheme : resolveTheme(document.documentElement.dataset.theme));
+    return useEffect(() => {
+        setTheme(resolveTheme(document.documentElement.dataset.theme));
+        const observer = new MutationObserver(mutations => {
+            for (const mutation of mutations) if ("attributes" === mutation.type && "data-theme" === mutation.attributeName) {
+                const newTheme = document.documentElement.dataset.theme;
+                setTheme(resolveTheme(newTheme));
+            }
+        });
+        return observer.observe(document.documentElement, {
+            attributes: !0,
+            attributeFilter: [ "data-theme" ]
+        }), () => observer.disconnect();
+    }, []), theme;
+}
+
+export { useObserveTheme };

package/dist/esm/hooks/useTheme.mjs

@@ -0,0 +1,73 @@
+import { useCallback, useMemo } from "react";
+
+import { darkTheme, lightTheme } from "../theme/themes.mjs";
+
+import { colorClass, colorCssVars } from "../theme/colors.mjs";
+
+import { typeStyles, typeCssClasses } from "../theme/type.mjs";
+
+import { useObserveTheme } from "./useObserveTheme.mjs";
+
+import "../theme/corners.mjs";
+
+import "../theme/elevations.mjs";
+
+/**
+ * Hook to manage Slice theming
+ */ function useTheme() {
+    const current = useObserveTheme(), set = useCallback(newTheme => {
+        let theme;
+        if ("string" == typeof newTheme) if ("system" === newTheme) {
+            theme = globalThis.matchMedia("(prefers-color-scheme: dark)").matches ? darkTheme : lightTheme;
+        } else theme = newTheme === darkTheme.name ? darkTheme : lightTheme; else theme = newTheme;
+        document.documentElement.dataset.theme = theme.name;
+    }, []), isDark = useMemo(() => current.name === darkTheme.name, [ current ]);
+    return {
+        /**
+         * Slice's default dark theme
+         */
+        darkTheme: darkTheme,
+        /**
+         * Slice's default light theme
+         */
+        lightTheme: lightTheme,
+        /**
+         * The currently active SliceTheme
+         */
+        current: current,
+        /**
+         * CSS variables for theme colors
+         */
+        colors: colorCssVars,
+        /**
+         * CSS Class names for the theme colors
+         */
+        colorsClass: colorClass,
+        /**
+         * CSS class names for theme typefaces
+         */
+        typeClass: typeCssClasses,
+        /**
+         * CSS typeface styles as inline style properties
+         */
+        typeStyle: typeStyles,
+        /**
+         * Set a new theme by name or passing in a SliceTheme object
+         * @param newTheme
+         */
+        set: set,
+        /**
+         * Toggle between light and dark themes
+         */
+        toggle: () => {
+            const newTheme = current.name === lightTheme.name ? darkTheme : lightTheme;
+            document.documentElement.dataset.theme = newTheme.name;
+        },
+        /**
+         * If the currently active theme is the Slice's default dark theme'
+         */
+        isDark: isDark
+    };
+}
+
+export { useTheme };

package/dist/esm/hooks/useToolTip.mjs

@@ -0,0 +1,23 @@
+import { useState, useLayoutEffect } from "react";
+
+const hiddenCoords = {
+    x: 0,
+    y: 0
+};
+
+function useToolTip(toolTip, tipElement) {
+    const [coords, setCoords] = useState(hiddenCoords);
+    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;
+        setCoords({
+            x: parentX + parentWidth / 2 - tipWidth / 2,
+            y: parentY + parentHeight + 10
+        });
+    }, [ toolTip, tipElement ]), coords;
+}
+
+export { useToolTip };

package/dist/esm/hooks/useTrackRenders.mjs

@@ -0,0 +1,23 @@
+import { useRef, useEffect } from "react";
+
+import { d as debug } from "../chunks/utils-BQ1v7VE4.mjs";
+
+import "../chunks/tslib.es6-c-7TIv71.mjs";
+
+/**
+ * Hook to log component renders, mounts, and unmounts
+ * Note: wrap in comments with START.DEBUG ... {hook} ... END.DEBUG to remove from build
+ */ function useTrackRenders(props, componentName = "Component") {
+    const prev = useRef({
+        props: props,
+        mount: !0,
+        unmount: !1
+    }), name = `${componentName} {${crypto.getRandomValues(new Uint8Array(5)).reduce((acc, val) => acc + String.fromCodePoint(65 + val % 26), "")}}`;
+    useEffect(() => {
+        prev.current = debug(prev, props, name);
+    }), useEffect(() => () => {
+        prev.current && (prev.current.unmount = !0, debug(prev, prev, name));
+    }, []);
+}
+
+export { useTrackRenders };

package/dist/esm/hooks/useWindow.mjs

@@ -0,0 +1,52 @@
+import { useState, useEffect, useCallback } from "react";
+
+var _a, FormFactor;
+
+/**
+ * Form factor names
+ */ !function(FormFactor) {
+    FormFactor.Mobile = "mobile", FormFactor.Tablet = "tablet", FormFactor.Desktop = "desktop", 
+    FormFactor.DesktopL = "desktopL", FormFactor.DesktopXL = "desktopXL";
+}(FormFactor || (FormFactor = {}));
+
+/**
+ * Use bootstrap proxy breakpoints as defaults
+ */
+const bootstrapBreakPoints = {
+    [FormFactor.Mobile]: 576,
+    [FormFactor.Tablet]: 768,
+    [FormFactor.Desktop]: 992,
+    [FormFactor.DesktopL]: 1200,
+    [FormFactor.DesktopXL]: 1400
+};
+
+const isElectron = navigator.userAgent.toLowerCase().includes("electron/"), isAppleDevice = navigator.platform.startsWith("Mac") || "iPhone" === navigator.platform, dpr = null !== (_a = Math.min(Math.ceil(window.devicePixelRatio), 3)) && void 0 !== _a ? _a : 1, isTouchDevice = "ontouchstart" in globalThis || navigator.maxTouchPoints > 0, orderedBps = Object.entries(bootstrapBreakPoints).sort((a, b) => -b[1] - a[1]);
+
+function useWindow(breakpoints = bootstrapBreakPoints, top = !0) {
+    const [viewportWidth, setViewportWidth] = useState(null), [viewportHeight, setViewportHeight] = useState(null), [height, setHeight] = useState("100vh"), [formFactor, setFormFactor] = useState(FormFactor.Desktop);
+    useEffect(() => (handleResize(), window.addEventListener("resize", handleResize, !1), 
+    () => window.removeEventListener("resize", handleResize, !1)), []);
+    const getFormFactor = useCallback(width => {
+        if (!width || width <= 0) return FormFactor.Mobile;
+        for (const [formFactor, breakpoint] of orderedBps) if (width >= breakpoint) return formFactor;
+        return FormFactor.Mobile;
+    }, []);
+    function handleResize() {
+        var _a, _b, _c, _d;
+        const windowWidth = top && null !== (_b = null === (_a = window.top) || void 0 === _a ? void 0 : _a.innerWidth) && void 0 !== _b ? _b : window.innerWidth, windowHeight = top && null !== (_d = null === (_c = window.top) || void 0 === _c ? void 0 : _c.innerHeight) && void 0 !== _d ? _d : window.innerHeight;
+        setFormFactor(getFormFactor(windowWidth)), setViewportHeight(windowHeight), setViewportWidth(windowWidth), 
+        isElectron || setHeight(isTouchDevice ? `${windowHeight}px` : "100vh");
+    }
+    return {
+        viewportWidth: viewportWidth,
+        viewportHeight: viewportHeight,
+        height: height,
+        isTouchDevice: isTouchDevice,
+        isElectron: isElectron,
+        isAppleDevice: isAppleDevice,
+        formFactor: formFactor,
+        dpr: dpr
+    };
+}
+
+export { FormFactor, useWindow };

package/dist/esm/hooks.mjs

@@ -0,0 +1,29 @@
+export { useTheme } from "./hooks/useTheme.mjs";
+
+export { useObserveTheme } from "./hooks/useObserveTheme.mjs";
+
+export { useDoubleClick } from "./hooks/useDoubleClick.mjs";
+
+export { useToolTip } from "./hooks/useToolTip.mjs";
+
+export { useKeyboardShortcuts } from "./hooks/useKeyboardShortcuts.mjs";
+
+export { useLastUpdated } from "./hooks/useLastUpdated.mjs";
+
+export { useLocalStore } from "./hooks/useLocalStore.mjs";
+
+export { FormFactor, useWindow } from "./hooks/useWindow.mjs";
+
+export { useObserveResize } from "./hooks/useObserveResize.mjs";
+
+import "react";
+
+import "./theme/themes.mjs";
+
+import "./theme/colors.mjs";
+
+import "./theme/corners.mjs";
+
+import "./theme/elevations.mjs";
+
+import "./theme/type.mjs";

package/dist/esm/index.mjs

@@ -0,0 +1,117 @@
+export { T as ToolTipType } from "./chunks/sharedTypes-tn9-uJvb.mjs";
+
+export { darkTheme, lightTheme } from "./theme/themes.mjs";
+
+export { dark, light } from "./theme/colors.mjs";
+
+export { elevations as Elevation, elevations } from "./theme/elevations.mjs";
+
+export { useTheme } from "./hooks/useTheme.mjs";
+
+export { useObserveTheme } from "./hooks/useObserveTheme.mjs";
+
+export { useDoubleClick } from "./hooks/useDoubleClick.mjs";
+
+export { useToolTip } from "./hooks/useToolTip.mjs";
+
+export { useKeyboardShortcuts } from "./hooks/useKeyboardShortcuts.mjs";
+
+export { useLastUpdated } from "./hooks/useLastUpdated.mjs";
+
+export { useLocalStore } from "./hooks/useLocalStore.mjs";
+
+export { useWindow } from "./hooks/useWindow.mjs";
+
+export { useObserveResize } from "./hooks/useObserveResize.mjs";
+
+export { A as Avatar } from "./chunks/Avatar-D_W5zErj.mjs";
+
+export { A as AvatarGroup } from "./chunks/AvatarGroup-Dbfmz0Yz.mjs";
+
+export { B as Badge } from "./chunks/Badge-BISGWj5-.mjs";
+
+export { I as IconButton } from "./chunks/IconButton-BBiZrXlS.mjs";
+
+export { C as CheckBox } from "./chunks/CheckBox-CYggPKaT.mjs";
+
+export { D as DivInput } from "./chunks/DivInput-_VL6PAqT.mjs";
+
+export { D as DocIcons } from "./chunks/DocIcons-BxtcXsWI.mjs";
+
+export { D as Dot } from "./chunks/Dot-C-Xu24wF.mjs";
+
+export { D as DraggablePanel } from "./chunks/DrggablePanel-Bg3UKK1k.mjs";
+
+export { D as DropDown } from "./chunks/DropDown-D7KyGLkM.mjs";
+
+export { E as ErrorSummary } from "./chunks/ErrorSummary-CZw06dSh.mjs";
+
+export { G as Grouper } from "./chunks/Grouper-CRldBHSw.mjs";
+
+export { L as Logos } from "./chunks/Logos-CpcaarOG.mjs";
+
+export { O as Overlay } from "./chunks/Overlay-Bh0enFIe.mjs";
+
+export { F as FlexDiv } from "./chunks/FlexDiv-BLYDgWu2.mjs";
+
+export { P as Pager } from "./chunks/Pager-B-1ZRUzU.mjs";
+
+export { P as PromptInput } from "./chunks/PromptInput-DdsIgZ3T.mjs";
+
+export { D as DoneCheck, P as ProgressIndicator } from "./chunks/ProgressIndicator-CNOBQ_Fv.mjs";
+
+export { R as RadioButton } from "./chunks/RadioButton-D-TdQu3a.mjs";
+
+export { R as RadioButtonList } from "./chunks/RadioButtonList-CEScWkbT.mjs";
+
+export { S as Slider } from "./chunks/Slider-C3A8GCfH.mjs";
+
+export { S as Spacer } from "./chunks/Spacer-BlgEdKEM.mjs";
+
+export { S as Switch } from "./chunks/Switch-obpmvCGd.mjs";
+
+export { T as TabBar } from "./chunks/TabBar-DFj021UP.mjs";
+
+export { T as TextArea } from "./chunks/TextArea-D_hq6VF3.mjs";
+
+export { T as TextField } from "./chunks/TextField-Co0u-xdd.mjs";
+
+export { ThemeProvider } from "./providers/ThemeProvider.mjs";
+
+export { T as Tip } from "./chunks/Tip-CHQh-Yq0.mjs";
+
+export { T as Toast, a as ToastType } from "./chunks/Toast-BiXzVFtM.mjs";
+
+export { B as Button } from "./chunks/Button-B_aIY6wE.mjs";
+
+export { C as Chip } from "./chunks/Chip-B3wb9g1U.mjs";
+
+export { F as FileIcon, a as FileIconNames } from "./chunks/FileIcon-BcIJzIwA.mjs";
+
+export { I as Icon, a as IconNames } from "./chunks/_types-KZDzhaiK.mjs";
+
+export { B as ButtonBar } from "./chunks/ButtonBar-Cr6TFvvD.mjs";
+
+export { C as Card } from "./chunks/Card-BzKBF0ny.mjs";
+
+export { L as Label } from "./chunks/Label-DPIAVkn1.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-B9685Z06.mjs";
+
+import "./theme/corners.mjs";
+
+import "./theme/type.mjs";
+
+import "react";
+
+import "./chunks/tslib.es6-c-7TIv71.mjs";
+
+import "react/jsx-runtime";
+
+import "./chunks/style-inject.es-D0BjEaN8.mjs";
+
+import "motion/react";
+
+import "./chunks/utils-BQ1v7VE4.mjs";
+
+import "./chunks/FileList-DUzgHfE-.mjs";

package/dist/esm/providers/ThemeProvider.mjs

@@ -0,0 +1,49 @@
+import { useEffect } from "react";
+
+import { s as styleInject } from "../chunks/style-inject.es-D0BjEaN8.mjs";
+
+import { darkTheme, lightTheme } from "../theme/themes.mjs";
+
+import "../theme/colors.mjs";
+
+import "../theme/corners.mjs";
+
+import "../theme/elevations.mjs";
+
+import "../theme/type.mjs";
+
+styleInject('/* Core brand colors (un-themed) */\n:root {\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/* Light theme tokens */\n[data-theme="lightMode"] {\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/* Dark theme tokens */\n[data-theme="darkMode"] {\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.array-land {\n\tbackground: var(--array-land);\n}\n.array-land-label {\n\tcolor: var(--array-land-label);\n}\n.array-magenta {\n\tbackground: var(--array-magenta);\n}\n.array-magenta-label {\n\tcolor: var(--array-magenta-label);\n}\n.array-orange {\n\tbackground: var(--array-orange);\n}\n.array-orange-label {\n\tcolor: var(--array-orange-label);\n}\n.array-purple {\n\tbackground: var(--array-purple);\n}\n.array-purple-label {\n\tcolor: var(--array-purple-label);\n}\n.array-sea {\n\tbackground: var(--array-sea);\n}\n.array-sea-label {\n\tcolor: var(--array-sea-label);\n}\n.array-sky {\n\tbackground: var(--array-sky);\n}\n.array-sky-label {\n\tcolor: var(--array-sky-label);\n}\n.array-yellow {\n\tbackground: var(--array-yellow);\n}\n.array-yellow-label {\n\tcolor: var(--array-yellow-label);\n}\n.core-badge-primary {\n\tbackground: var(--core-badge-primary);\n}\n.core-badge-secondary {\n\tbackground: var(--core-badge-secondary);\n}\n.core-button-disabled {\n\tbackground: var(--core-button-disabled);\n}\n.core-button-primary {\n\tbackground: var(--core-button-primary);\n}\n.core-drop-shadow {\n\tbox-shadow: var(--core-drop-shadow);\n}\n.core-gp-logo-primary {\n\tcolor: var(--core-gp-logo-primary);\n}\n.core-gp-logo-secondary {\n\tcolor: var(--core-gp-logo-secondary);\n}\n.core-icon-dark {\n\tcolor: var(--core-icon-dark);\n}\n.core-icon-disabled {\n\tcolor: var(--core-icon-disabled);\n}\n.core-icon-error {\n\tcolor: var(--core-icon-error);\n}\n.core-icon-light {\n\tcolor: var(--core-icon-light);\n}\n.core-icon-primary {\n\tcolor: var(--core-icon-primary);\n}\n.core-icon-secondary {\n\tcolor: var(--core-icon-secondary);\n}\n.core-icon-tertiary {\n\tcolor: var(--core-icon-tertiary);\n}\n.core-link-primary {\n\tcolor: var(--core-link-primary);\n}\n.core-outline-primary {\n\tborder-color: var(--core-outline-primary);\n}\n.core-outline-secondary {\n\tborder-color: var(--core-outline-secondary);\n}\n.core-outline-special {\n\tborder-color: var(--core-outline-special);\n}\n.core-outline-tertiary {\n\tborder-color: var(--core-outline-tertiary);\n}\n.core-surface-coverup-translucent {\n\tbackground: var(--core-surface-coverup-translucent);\n}\n.core-surface-overlay-translucent {\n\tbackground: var(--core-surface-overlay-translucent);\n}\n.core-surface-primary {\n\tbackground: var(--core-surface-primary);\n}\n.core-surface-secondary {\n\tbackground: var(--core-surface-secondary);\n}\n.core-surface-special {\n\tbackground: var(--core-surface-special);\n}\n.core-text-dark {\n\tcolor: var(--core-text-dark);\n}\n.core-text-disabled {\n\tcolor: var(--core-text-disabled);\n}\n.core-text-error {\n\tcolor: var(--core-text-error);\n}\n.core-text-light {\n\tcolor: var(--core-text-light);\n}\n.core-text-primary {\n\tcolor: var(--core-text-primary);\n}\n.core-text-secondary {\n\tcolor: var(--core-text-secondary);\n}\n.core-text-special {\n\tcolor: var(--core-text-special);\n}\n.core-text-tertiary {\n\tcolor: var(--core-text-tertiary);\n}\n.eor-tag-employee {\n\tcolor: var(--eor-tag-employee);\n}\n.eor-tag-overdue {\n\tcolor: var(--eor-tag-overdue);\n}\n.eor-tag-paid {\n\tcolor: var(--eor-tag-paid);\n}\n.eor-tag-pending {\n\tcolor: var(--eor-tag-pending);\n}\n.eor-tag-professional {\n\tcolor: var(--eor-tag-professional);\n}\n.feedback-attention {\n\tcolor: var(--feedback-attention);\n}\n.feedback-informative {\n\tcolor: var(--feedback-informative);\n}\n.feedback-positive {\n\tcolor: var(--feedback-positive);\n}\n.feedback-urgency {\n\tcolor: var(--feedback-urgency);\n}\n.feedback-warning {\n\tcolor: var(--feedback-warning);\n}\n.gia-tag-risk-high {\n\tcolor: var(--gia-tag-risk-high);\n}\n.gia-tag-risk-low {\n\tcolor: var(--gia-tag-risk-low);\n}\n.gia-tag-risk-moderate {\n\tcolor: var(--gia-tag-risk-moderate);\n}\n.gia-text-excerpt-highlight {\n\tcolor: var(--gia-text-excerpt-highlight);\n}\n.gia-text-selection {\n\tcolor: var(--gia-text-selection);\n}\n.scroll-bar {\n\tcolor: var(--scroll-bar);\n}\n.scroll-bar-hover {\n\tcolor: var(--scroll-bar-hover);\n}\n.surface-shadow-soft {\n\tcolor: var(--surface-shadow-soft);\n}\n.surface-shadow-strong {\n\tcolor: var(--surface-shadow-strong);\n}\n\nbody {\n\tbackground: var(--core-surface-primary);\n}\n\na {\n\tcolor: var(--core-text-special);\n\ttext-decoration: underline;\n}\n\na:visited {\n\tcolor: var(--core-text-special);\n\ttext-decoration: underline;\n}\n\na:hover {\n\ttext-decoration: none;\n}\n\ncode {\n\tborder: 1px solid var(--core-outline-primary);\n\tbackground: var(--core-surface-secondary);\n\tcolor: var(--core-text-primary);\n}\n');
+
+styleInject(":root {\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('@import url("https://fonts.googleapis.com/css2?family=Funnel+Sans:ital,wght@0,300..800;1,300..800&display=swap");\n\n:root {\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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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\nbody {\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\nh1 {\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\nh2 {\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\nh3 {\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\nh4 {\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\nh1,\nh2,\nh3,\nh4 {\n\tmargin: 1.5em 0 0.6em 0;\n}\n\nh1:first-child {\n\tmargin: 0 0 0.6em 0;\n}\n\np {\n\tmargin: 0 0 1.5em 0;\n}\n\nb,\nstrong {\n\tfont-weight: var(--font-weight-bold);\n}\n');
+
+styleInject("/* Keep these values in sync with src/hooks/useWindow/useWindow.ts */\n");
+
+const darkModeMediaQuery = globalThis.matchMedia("(prefers-color-scheme: dark)");
+
+function ThemeProvider(props) {
+    const {children: children, theme: theme, system: system} = props;
+    return useEffect(() => {
+        if (theme) {
+            const newTheme = theme.includes("dark") ? darkTheme : lightTheme;
+            document.documentElement.dataset.theme = newTheme.name;
+        }
+    }, [ theme ]), useEffect(() => {
+        const handleSystemThemeChange = e => {
+            if (system) {
+                const autoTheme = e.matches ? darkTheme : lightTheme;
+                document.documentElement.dataset.theme = autoTheme.name;
+            }
+        };
+        if (system) {
+            const autoTheme = darkModeMediaQuery.matches ? darkTheme : lightTheme;
+            document.documentElement.dataset.theme = autoTheme.name;
+        }
+        return darkModeMediaQuery.addEventListener("change", handleSystemThemeChange), () => {
+            darkModeMediaQuery.removeEventListener("change", handleSystemThemeChange);
+        };
+    }, [ system ]), children;
+}
+
+export { ThemeProvider };

package/dist/esm/providers.mjs

@@ -0,0 +1,15 @@
+export { ThemeProvider } from "./providers/ThemeProvider.mjs";
+
+import "react";
+
+import "./chunks/style-inject.es-D0BjEaN8.mjs";
+
+import "./theme/themes.mjs";
+
+import "./theme/colors.mjs";
+
+import "./theme/corners.mjs";
+
+import "./theme/elevations.mjs";
+
+import "./theme/type.mjs";

package/dist/esm/stores/tip.mjs

@@ -0,0 +1,3 @@
+export { g as getTip, t as tipActions, u as useTip, a as useTipActions, b as useTipStore } from "../chunks/tipStore-CL5a95Bl.mjs";
+
+import "zustand";

package/dist/esm/stores/toast.mjs

@@ -0,0 +1,3 @@
+export { g as getToast, t as toastActions, u as useToast, a as useToastActions, b as useToastStore } from "../chunks/toastStore-D2PEIqCo.mjs";
+
+import "zustand";

package/dist/esm/stores/uploads.mjs

@@ -0,0 +1,7 @@
+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-D69fEXMY.mjs";
+
+import "zustand";
+
+import "../chunks/uploads-worker-Dv-4zGnC.mjs";
+
+import "../chunks/tslib.es6-c-7TIv71.mjs";

package/dist/esm/stores/window.mjs

@@ -0,0 +1,3 @@
+export { F as FormFactor, u as useWindowStore } from "../chunks/windowStore-CwW0i_le.mjs";
+
+import "zustand";

package/dist/esm/stores.mjs

@@ -0,0 +1,13 @@
+export { F as FormFactor, u as useWindowStore } from "./chunks/windowStore-CwW0i_le.mjs";
+
+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-D69fEXMY.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";
+
+import "zustand";
+
+import "./chunks/uploads-worker-Dv-4zGnC.mjs";
+
+import "./chunks/tslib.es6-c-7TIv71.mjs";