pixelize-design-library 2.4.1-beta.9 → 2.4.2-beta.0

package/dist/Theme/chakra/Popover.styles.d.ts

@@ -18,12 +18,12 @@ export declare const Popover: {
     }) | undefined;
     sizes?: {
         [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-            keys: ("content" | "body" | "footer" | "header" | "closeButton" | "popper" | "arrow")[];
+            keys: ("body" | "footer" | "header" | "content" | "closeButton" | "popper" | "arrow")[];
         }>;
     } | undefined;
     variants?: {
         [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-            keys: ("content" | "body" | "footer" | "header" | "closeButton" | "popper" | "arrow")[];
+            keys: ("body" | "footer" | "header" | "content" | "closeButton" | "popper" | "arrow")[];
         }>;
     } | undefined;
     defaultProps?: {
@@ -31,7 +31,6 @@ export declare const Popover: {
         variant?: string | number | undefined;
         colorScheme?: string | undefined;
     } | undefined;
-    parts: ("content" | "body" | "footer" | "header" | "closeButton" | "popper" | "arrow")[];
+    parts: ("body" | "footer" | "header" | "content" | "closeButton" | "popper" | "arrow")[];
 };
 export {};
-//# sourceMappingURL=Popover.styles.d.ts.map

package/dist/Theme/chakra/Slider.styles.d.ts

@@ -12,12 +12,12 @@ export declare const Slider: {
     }) | undefined;
     sizes?: {
         [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-            keys: ("container" | "mark" | "track" | "filledTrack" | "thumb")[];
+            keys: ("mark" | "track" | "container" | "filledTrack" | "thumb")[];
         }>;
     } | undefined;
     variants?: {
         [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-            keys: ("container" | "mark" | "track" | "filledTrack" | "thumb")[];
+            keys: ("mark" | "track" | "container" | "filledTrack" | "thumb")[];
         }>;
     } | undefined;
     defaultProps?: {
@@ -25,7 +25,6 @@ export declare const Slider: {
         variant?: string | number | undefined;
         colorScheme?: string | undefined;
     } | undefined;
-    parts: ("container" | "mark" | "track" | "filledTrack" | "thumb")[];
+    parts: ("mark" | "track" | "container" | "filledTrack" | "thumb")[];
 };
 export {};
-//# sourceMappingURL=Slider.styles.d.ts.map

package/dist/Theme/chakra/Switch.styles.d.ts

@@ -12,12 +12,12 @@ export declare const Switch: {
     }) | undefined;
     sizes?: {
         [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-            keys: ("container" | "label" | "track" | "thumb")[];
+            keys: ("label" | "track" | "container" | "thumb")[];
         }>;
     } | undefined;
     variants?: {
         [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-            keys: ("container" | "label" | "track" | "thumb")[];
+            keys: ("label" | "track" | "container" | "thumb")[];
         }>;
     } | undefined;
     defaultProps?: {
@@ -25,7 +25,6 @@ export declare const Switch: {
         variant?: string | number | undefined;
         colorScheme?: string | undefined;
     } | undefined;
-    parts: ("container" | "label" | "track" | "thumb")[];
+    parts: ("label" | "track" | "container" | "thumb")[];
 };
 export {};
-//# sourceMappingURL=Switch.styles.d.ts.map

package/dist/Theme/chakra/Tabs.styles.d.ts

@@ -40,4 +40,3 @@ export declare const Tabs: {
     parts: ("tab" | "tablist" | "tabpanel" | "tabpanels" | "root" | "indicator")[];
 };
 export {};
-//# sourceMappingURL=Tabs.styles.d.ts.map

package/dist/Theme/chakra/common.web.d.ts

@@ -168,4 +168,3 @@ declare const common: {
     };
 };
 export default common;
-//# sourceMappingURL=common.web.d.ts.map

package/dist/Theme/chakra/common.web.js

@@ -15,7 +15,10 @@ const common = {
     radii: primitives_1.radii,
     zIndices: primitives_1.zIndices,
     config: {
-        cssVarPrefix: "ck",
+        // Chakra's default, and it must stay that way. A custom prefix silently breaks every
+        // `var(--chakra-colors-*)` an app writes in plain CSS: the variable simply does not
+        // exist, so the fallback (usually #fff) wins and the surface renders white in dark mode.
+        cssVarPrefix: "chakra",
     },
 };
 exports.default = common;

package/dist/Theme/chakra/componentStyles.d.ts

@@ -20,12 +20,12 @@ export declare const componentStyles: {
         }) | undefined;
         sizes?: {
             [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-                keys: ("overlay" | "body" | "dialog" | "footer" | "header" | "closeButton" | "dialogContainer")[];
+                keys: ("body" | "dialog" | "footer" | "header" | "overlay" | "closeButton" | "dialogContainer")[];
             }>;
         } | undefined;
         variants?: {
             [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-                keys: ("overlay" | "body" | "dialog" | "footer" | "header" | "closeButton" | "dialogContainer")[];
+                keys: ("body" | "dialog" | "footer" | "header" | "overlay" | "closeButton" | "dialogContainer")[];
             }>;
         } | undefined;
         defaultProps?: {
@@ -33,7 +33,7 @@ export declare const componentStyles: {
             variant?: string | number | undefined;
             colorScheme?: string | undefined;
         } | undefined;
-        parts: ("overlay" | "body" | "dialog" | "footer" | "header" | "closeButton" | "dialogContainer")[];
+        parts: ("body" | "dialog" | "footer" | "header" | "overlay" | "closeButton" | "dialogContainer")[];
     };
     Menu: {
         baseStyle?: (({ theme }: StyleFunctionProps) => {
@@ -64,12 +64,12 @@ export declare const componentStyles: {
         }) | undefined;
         sizes?: {
             [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-                keys: ("button" | "list" | "icon" | "item" | "groupTitle" | "command" | "divider")[];
+                keys: ("button" | "list" | "icon" | "divider" | "command" | "item" | "groupTitle")[];
             }>;
         } | undefined;
         variants?: {
             [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-                keys: ("button" | "list" | "icon" | "item" | "groupTitle" | "command" | "divider")[];
+                keys: ("button" | "list" | "icon" | "divider" | "command" | "item" | "groupTitle")[];
             }>;
         } | undefined;
         defaultProps?: {
@@ -77,7 +77,7 @@ export declare const componentStyles: {
             variant?: string | number | undefined;
             colorScheme?: string | undefined;
         } | undefined;
-        parts: ("button" | "list" | "icon" | "item" | "groupTitle" | "command" | "divider")[];
+        parts: ("button" | "list" | "icon" | "divider" | "command" | "item" | "groupTitle")[];
     };
     Modal: {
         baseStyle?: (({ theme }: StyleFunctionProps) => {
@@ -89,12 +89,12 @@ export declare const componentStyles: {
         }) | undefined;
         sizes?: {
             [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-                keys: ("overlay" | "body" | "dialog" | "footer" | "header" | "closeButton" | "dialogContainer")[];
+                keys: ("body" | "dialog" | "footer" | "header" | "overlay" | "closeButton" | "dialogContainer")[];
             }>;
         } | undefined;
         variants?: {
             [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-                keys: ("overlay" | "body" | "dialog" | "footer" | "header" | "closeButton" | "dialogContainer")[];
+                keys: ("body" | "dialog" | "footer" | "header" | "overlay" | "closeButton" | "dialogContainer")[];
             }>;
         } | undefined;
         defaultProps?: {
@@ -102,7 +102,7 @@ export declare const componentStyles: {
             variant?: string | number | undefined;
             colorScheme?: string | undefined;
         } | undefined;
-        parts: ("overlay" | "body" | "dialog" | "footer" | "header" | "closeButton" | "dialogContainer")[];
+        parts: ("body" | "dialog" | "footer" | "header" | "overlay" | "closeButton" | "dialogContainer")[];
     };
     Popover: {
         baseStyle?: (({ theme }: StyleFunctionProps) => {
@@ -114,12 +114,12 @@ export declare const componentStyles: {
         }) | undefined;
         sizes?: {
             [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-                keys: ("content" | "body" | "footer" | "header" | "closeButton" | "popper" | "arrow")[];
+                keys: ("body" | "footer" | "header" | "content" | "closeButton" | "popper" | "arrow")[];
             }>;
         } | undefined;
         variants?: {
             [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-                keys: ("content" | "body" | "footer" | "header" | "closeButton" | "popper" | "arrow")[];
+                keys: ("body" | "footer" | "header" | "content" | "closeButton" | "popper" | "arrow")[];
             }>;
         } | undefined;
         defaultProps?: {
@@ -127,7 +127,7 @@ export declare const componentStyles: {
             variant?: string | number | undefined;
             colorScheme?: string | undefined;
         } | undefined;
-        parts: ("content" | "body" | "footer" | "header" | "closeButton" | "popper" | "arrow")[];
+        parts: ("body" | "footer" | "header" | "content" | "closeButton" | "popper" | "arrow")[];
     };
     Slider: {
         baseStyle?: (({ theme }: StyleFunctionProps) => {
@@ -138,12 +138,12 @@ export declare const componentStyles: {
         }) | undefined;
         sizes?: {
             [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-                keys: ("container" | "mark" | "track" | "filledTrack" | "thumb")[];
+                keys: ("mark" | "track" | "container" | "filledTrack" | "thumb")[];
             }>;
         } | undefined;
         variants?: {
             [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-                keys: ("container" | "mark" | "track" | "filledTrack" | "thumb")[];
+                keys: ("mark" | "track" | "container" | "filledTrack" | "thumb")[];
             }>;
         } | undefined;
         defaultProps?: {
@@ -151,7 +151,7 @@ export declare const componentStyles: {
             variant?: string | number | undefined;
             colorScheme?: string | undefined;
         } | undefined;
-        parts: ("container" | "mark" | "track" | "filledTrack" | "thumb")[];
+        parts: ("mark" | "track" | "container" | "filledTrack" | "thumb")[];
     };
     Switch: {
         baseStyle?: (({ theme }: StyleFunctionProps) => {
@@ -162,12 +162,12 @@ export declare const componentStyles: {
         }) | undefined;
         sizes?: {
             [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-                keys: ("container" | "label" | "track" | "thumb")[];
+                keys: ("label" | "track" | "container" | "thumb")[];
             }>;
         } | undefined;
         variants?: {
             [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-                keys: ("container" | "label" | "track" | "thumb")[];
+                keys: ("label" | "track" | "container" | "thumb")[];
             }>;
         } | undefined;
         defaultProps?: {
@@ -175,7 +175,7 @@ export declare const componentStyles: {
             variant?: string | number | undefined;
             colorScheme?: string | undefined;
         } | undefined;
-        parts: ("container" | "label" | "track" | "thumb")[];
+        parts: ("label" | "track" | "container" | "thumb")[];
     };
     Tabs: {
         baseStyle?: import("@chakra-ui/react").PartsStyleInterpolation<{
@@ -220,12 +220,12 @@ export declare const componentStyles: {
         }) | undefined;
         sizes?: {
             [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-                keys: ("container" | "label" | "group" | "badge" | "excessLabel")[];
+                keys: ("label" | "container" | "group" | "badge" | "excessLabel")[];
             }>;
         } | undefined;
         variants?: {
             [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-                keys: ("container" | "label" | "group" | "badge" | "excessLabel")[];
+                keys: ("label" | "container" | "group" | "badge" | "excessLabel")[];
             }>;
         } | undefined;
         defaultProps?: {
@@ -233,10 +233,9 @@ export declare const componentStyles: {
             variant?: string | number | undefined;
             colorScheme?: string | undefined;
         } | undefined;
-        parts: ("container" | "label" | "group" | "badge" | "excessLabel")[];
+        parts: ("label" | "container" | "group" | "badge" | "excessLabel")[];
     };
     Skeleton: import("@chakra-ui/react").ComponentSingleStyleConfig;
     Tooltip: import("@chakra-ui/react").ComponentSingleStyleConfig;
     CloseButton: import("@chakra-ui/react").ComponentSingleStyleConfig;
 };
-//# sourceMappingURL=componentStyles.d.ts.map

package/dist/Theme/chakra/createBrandTheme.d.ts

@@ -15,4 +15,3 @@ export interface CreateBrandThemeOptions {
  */
 export declare const createBrandTheme: (palette: PaletteProps, options?: CreateBrandThemeOptions) => Record<string, any>;
 export default createBrandTheme;
-//# sourceMappingURL=createBrandTheme.d.ts.map

package/dist/Theme/chakra/fonts.web.d.ts

@@ -39,4 +39,3 @@ declare const fonts: {
     };
 };
 export default fonts;
-//# sourceMappingURL=fonts.web.d.ts.map

package/dist/Theme/index.d.ts

@@ -36,4 +36,3 @@ export declare const ThemesList: {
 export type BrandThemes = Record<ThemeName, Record<ResolvedColorMode, ReturnType<typeof createBrandTheme>>>;
 /** Light + dark theme per brand. `PixelizeThemeProvider` swaps between these. */
 export declare const brandThemes: BrandThemes;
-//# sourceMappingURL=index.d.ts.map

package/dist/Theme/index.js

@@ -47,15 +47,31 @@ exports.ThemesList = {
     storefront: storefront,
     zinc: zinc,
 };
+/**
+ * `dark` is built on first read, not at import. Nine `createBrandTheme` calls measure ~15ms on a
+ * dev machine, and a light-only app (tickets, and every app before it opts in) never reads one.
+ * A getter — rather than a lazy map — keeps `Object.keys(brandThemes)` and its order intact,
+ * which `ThemeSwitcher` iterates to render the brand picker.
+ */
+const withLazyDark = (brand, light) => {
+    let dark;
+    return {
+        light,
+        get dark() {
+            dark !== null && dark !== void 0 ? dark : (dark = (0, createBrandTheme_1.default)(brands_1.darkPalettes[brand], { colorMode: "dark" }));
+            return dark;
+        },
+    };
+};
 /** Light + dark theme per brand. `PixelizeThemeProvider` swaps between these. */
 exports.brandThemes = {
-    lavender: { light: lavender, dark: (0, createBrandTheme_1.default)(brands_1.darkPalettes.lavender, { colorMode: "dark" }) },
-    meadow: { light: meadow, dark: (0, createBrandTheme_1.default)(brands_1.darkPalettes.meadow, { colorMode: "dark" }) },
-    radiant: { light: radiant, dark: (0, createBrandTheme_1.default)(brands_1.darkPalettes.radiant, { colorMode: "dark" }) },
-    skyline: { light: skyline, dark: (0, createBrandTheme_1.default)(brands_1.darkPalettes.skyline, { colorMode: "dark" }) },
-    slate: { light: slate, dark: (0, createBrandTheme_1.default)(brands_1.darkPalettes.slate, { colorMode: "dark" }) },
-    emerald: { light: emerald, dark: (0, createBrandTheme_1.default)(brands_1.darkPalettes.emerald, { colorMode: "dark" }) },
-    rosewood: { light: rosewood, dark: (0, createBrandTheme_1.default)(brands_1.darkPalettes.rosewood, { colorMode: "dark" }) },
-    storefront: { light: storefront, dark: (0, createBrandTheme_1.default)(brands_1.darkPalettes.storefront, { colorMode: "dark" }) },
-    zinc: { light: zinc, dark: (0, createBrandTheme_1.default)(brands_1.darkPalettes.zinc, { colorMode: "dark" }) },
+    lavender: withLazyDark("lavender", lavender),
+    meadow: withLazyDark("meadow", meadow),
+    radiant: withLazyDark("radiant", radiant),
+    skyline: withLazyDark("skyline", skyline),
+    slate: withLazyDark("slate", slate),
+    emerald: withLazyDark("emerald", emerald),
+    rosewood: withLazyDark("rosewood", rosewood),
+    storefront: withLazyDark("storefront", storefront),
+    zinc: withLazyDark("zinc", zinc),
 };

package/dist/Theme/provider/PixelizeThemeProvider.d.ts

@@ -10,10 +10,19 @@ export type ThemeModeContextValue = {
 };
 export type PixelizeThemeProviderProps = {
     children: React.ReactNode;
-    /** Initial brand. A persisted brand wins over this. */
+    /** Initial brand. A persisted brand wins over this. Re-synced if the prop changes after mount. */
     brand?: ThemeName;
-    /** Initial color mode. A persisted mode wins over this. */
+    /** Brand counterpart of `onModeChange`, with the same user-intent-only contract. */
+    onBrandChange?: (brand: ThemeName) => void;
+    /** Initial color mode. A persisted mode wins over this. Re-synced if the prop changes after mount. */
     defaultMode?: ColorMode;
+    /**
+     * Fired only when the mode changes through `setMode`/`toggle` — i.e. user intent. It is NOT
+     * fired when a changed `defaultMode` prop is synced in, which is what makes it safe to persist
+     * from: an app that instead mirrors `mode` in an effect re-persists its own echo, and if that
+     * store feeds `defaultMode` back the two ends flip each other forever.
+     */
+    onModeChange?: (mode: ColorMode) => void;
     storageKey?: string;
     disablePersistence?: boolean;
     /**
@@ -42,5 +51,4 @@ export declare const ThemeModeContext: React.Context<ThemeModeContextValue | und
  * whatever the active palette says. Read the mode from `useThemeMode()` instead. Existing apps are
  * unaffected: they are light-only, where that argument was always the one returned anyway.
  */
-export declare const PixelizeThemeProvider: ({ children, brand: brandProp, defaultMode, storageKey, disablePersistence, themeOverrides, }: PixelizeThemeProviderProps) => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=PixelizeThemeProvider.d.ts.map
+export declare const PixelizeThemeProvider: ({ children, brand: brandProp, onBrandChange, defaultMode, onModeChange, storageKey, disablePersistence, themeOverrides, }: PixelizeThemeProviderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Theme/provider/PixelizeThemeProvider.js

@@ -48,12 +48,14 @@ exports.ThemeModeContext = (0, react_1.createContext)(undefined);
  * whatever the active palette says. Read the mode from `useThemeMode()` instead. Existing apps are
  * unaffected: they are light-only, where that argument was always the one returned anyway.
  */
-const PixelizeThemeProvider = ({ children, brand: brandProp = DEFAULT_BRAND, defaultMode = DEFAULT_MODE, storageKey = DEFAULT_STORAGE_KEY, disablePersistence = false, themeOverrides, }) => {
-    const [mode, setModeState] = (0, react_1.useState)(defaultMode);
-    const [brand, setBrandState] = (0, react_1.useState)(brandProp);
-    // Deterministic on the server and on the first client render — the real OS value lands in
-    // the effect below, so hydration always matches.
-    const [systemMode, setSystemMode] = (0, react_1.useState)("light");
+const PixelizeThemeProvider = ({ children, brand: brandProp = DEFAULT_BRAND, onBrandChange, defaultMode = DEFAULT_MODE, onModeChange, storageKey = DEFAULT_STORAGE_KEY, disablePersistence = false, themeOverrides, }) => {
+    // Seed from storage during the first render: StrictMode re-runs the persist effect, and a
+    // ref guard cannot stop that second pass writing defaults over the stored value.
+    const [mode, setModeState] = (0, react_1.useState)(() => { var _a; return (_a = (disablePersistence ? undefined : (0, colorModeStorage_1.readStoredTheme)(storageKey).mode)) !== null && _a !== void 0 ? _a : defaultMode; });
+    const [brand, setBrandState] = (0, react_1.useState)(() => { var _a; return (_a = (disablePersistence ? undefined : (0, colorModeStorage_1.readStoredTheme)(storageKey).brand)) !== null && _a !== void 0 ? _a : brandProp; });
+    // Read synchronously: seeding "light" made every `system` user on a dark OS paint a light
+    // frame before the effect corrected it. SSR-safe — returns "light" with no window.
+    const [systemMode, setSystemMode] = (0, react_1.useState)(colorModeStorage_1.getSystemColorMode);
     (0, react_1.useEffect)(() => {
         setSystemMode((0, colorModeStorage_1.getSystemColorMode)());
         return (0, colorModeStorage_1.subscribeToSystemColorMode)(setSystemMode);
@@ -70,19 +72,25 @@ const PixelizeThemeProvider = ({ children, brand: brandProp = DEFAULT_BRAND, def
     // `brandProp` only seeds initial state above, so a consumer that re-renders with a new
     // `brand` prop after mount (e.g. persisting the pick through its own store, like tickets'
     // Settings page dispatching Redux instead of calling `setBrand`) would otherwise never see
-    // it applied — the same gap `colorMode` has, which callers work around with an effect
-    // mirroring `mode`. Sync it here instead so every consumer gets it for free.
-    const isFirstBrandPropRun = (0, react_1.useRef)(true);
+    // it applied. Sync it here instead so every consumer gets it for free.
+    // Compare the previous prop, never a "first run" flag: StrictMode double-invokes effects while
+    // refs survive, so a flag guard lets pass 2 reset state to the prop and clobber stored values.
+    const prevBrandProp = (0, react_1.useRef)(brandProp);
     (0, react_1.useEffect)(() => {
-        if (isFirstBrandPropRun.current) {
-            isFirstBrandPropRun.current = false;
+        if (prevBrandProp.current === brandProp)
             return;
-        }
+        prevBrandProp.current = brandProp;
         setBrandState(brandProp);
-        // Only re-sync when the prop itself changes — not on every local `setBrand` call (that
-        // would fight the user's own in-session brand picking, e.g. via ThemeSwitcher).
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [brandProp]);
+    // Same prop-sync for the mode, so an app owning it in its own store no longer needs the
+    // `mode` -> store mirror effect that deadlocks against this one.
+    const prevModeProp = (0, react_1.useRef)(defaultMode);
+    (0, react_1.useEffect)(() => {
+        if (prevModeProp.current === defaultMode)
+            return;
+        prevModeProp.current = defaultMode;
+        setModeState(defaultMode);
+    }, [defaultMode]);
     // Skipping the mount run keeps the defaults from being written over a stored value before
     // the rehydrate effect above has applied it.
     const isFirstPersistRun = (0, react_1.useRef)(true);
@@ -104,21 +112,100 @@ const PixelizeThemeProvider = ({ children, brand: brandProp = DEFAULT_BRAND, def
      * page. Scoped to this provider (not a global stylesheet) so `withTheme` consumers — deliberately
      * light-only, see the module doc's "Key rules" — are untouched.
      */
-    (0, react_1.useEffect)(() => {
+    (0, react_1.useLayoutEffect)(() => {
         document.documentElement.style.colorScheme = resolvedMode;
     }, [resolvedMode]);
-    const setMode = (0, react_1.useCallback)((next) => setModeState(next), []);
-    const setBrand = (0, react_1.useCallback)((next) => setBrandState(next), []);
+    // Held in refs so a caller's inline arrow never re-creates `setMode`/`setBrand`, which would
+    // invalidate the context value on every render of the consuming app. Written in a layout
+    // effect, not during render — a render-phase write is unsafe under StrictMode's double
+    // invocation, and this still lands before any click handler can fire.
+    const onModeChangeRef = (0, react_1.useRef)(onModeChange);
+    const onBrandChangeRef = (0, react_1.useRef)(onBrandChange);
+    (0, react_1.useLayoutEffect)(() => {
+        onModeChangeRef.current = onModeChange;
+        onBrandChangeRef.current = onBrandChange;
+    }, [onModeChange, onBrandChange]);
+    const setMode = (0, react_1.useCallback)((next) => {
+        var _a;
+        setModeState(next);
+        (_a = onModeChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onModeChangeRef, next);
+    }, []);
+    const setBrand = (0, react_1.useCallback)((next) => {
+        var _a;
+        setBrandState(next);
+        (_a = onBrandChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onBrandChangeRef, next);
+    }, []);
     // From "system", flip to the opposite of what the OS currently gives, so a click always
     // visibly changes the UI.
-    const toggle = (0, react_1.useCallback)(() => setModeState(resolvedMode === "dark" ? "light" : "dark"), [resolvedMode]);
+    const toggle = (0, react_1.useCallback)(() => setMode(resolvedMode === "dark" ? "light" : "dark"), [resolvedMode, setMode]);
     const value = (0, react_1.useMemo)(() => ({ mode, resolvedMode, setMode, toggle, brand, setBrand }), [mode, resolvedMode, setMode, toggle, brand, setBrand]);
+    // `themeOverrides` is caller-supplied, and the idiomatic way to pass it is an inline object
+    // literal — a new identity every render. Keying the memo on identity would re-run `extendTheme`
+    // and hand `ChakraProvider` a new theme on every render of the consuming app, invalidating
+    // emotion's style resolution for everything beneath it. Compare by value instead.
+    const overridesKey = themeOverrides ? JSON.stringify(themeOverrides) : "";
     const resolvedTheme = (0, react_1.useMemo)(() => {
         const base = index_1.brandThemes[brand][resolvedMode];
-        return themeOverrides
-            ? (0, react_2.extendTheme)(base, themeOverrides)
-            : base;
-    }, [brand, resolvedMode, themeOverrides]);
+        return themeOverrides ? (0, react_2.extendTheme)(base, themeOverrides) : base;
+        // Keyed on the serialized overrides, not their identity. `brand`/`resolvedMode` must stay:
+        // overrides re-layer onto the CURRENT palette (see the prop's doc comment above).
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [brand, resolvedMode, overridesKey]);
+    /**
+     * The library ships its `var(--color-*)` tokens light-only on `:root` (global.css), so any
+     * consumer that styles with those CSS vars rather than Chakra tokens stays light in dark mode —
+     * invisible text on the dark canvas, white panels. In dark, re-point every used var at the
+     * already-dark-correct resolved palette; in light, clear them so the static `:root` values apply
+     * unchanged (so a light-only app is byte-identical to before). Also mirror the mode to
+     * `data-mode` for consumers that want to hook their own dark CSS.
+     */
+    (0, react_1.useLayoutEffect)(() => {
+        var _a, _b, _c, _d, _e, _f, _g;
+        const root = document.documentElement;
+        root.dataset.mode = resolvedMode;
+        const colors = resolvedTheme.colors;
+        const sem = (_a = colors.semantic) !== null && _a !== void 0 ? _a : {};
+        const gray = colors.gray;
+        const HUE_SCALES = [
+            "primary", "gray", "red", "orange", "yellow",
+            "green", "teal", "blue", "cyan", "purple", "pink",
+        ];
+        const SEMANTIC_SCALES = ["success", "error", "warning", "info"]; // nested under colors.semantic
+        const RUNGS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
+        // Single-value semantic vars → palette scale+rung. The dark gray ramp runs dark(50) → light(900),
+        // so low rungs read as surfaces and high rungs as text — correct in dark, cleared in light.
+        const SEMANTIC_VARS = {
+            "text-heading": gray === null || gray === void 0 ? void 0 : gray[900], "text-body": gray === null || gray === void 0 ? void 0 : gray[700],
+            "text-subtle": gray === null || gray === void 0 ? void 0 : gray[500], "text-input": gray === null || gray === void 0 ? void 0 : gray[500],
+            "bg-main": gray === null || gray === void 0 ? void 0 : gray[50], "bg-secondary": gray === null || gray === void 0 ? void 0 : gray[100], "bg-tertiary": gray === null || gray === void 0 ? void 0 : gray[100],
+            "bg-quaternary": gray === null || gray === void 0 ? void 0 : gray[200], "bg-light": gray === null || gray === void 0 ? void 0 : gray[50], "bg-medium": gray === null || gray === void 0 ? void 0 : gray[100],
+            "bg-accent": gray === null || gray === void 0 ? void 0 : gray[200], "bg-subtle": gray === null || gray === void 0 ? void 0 : gray[100], "bg-muted": gray === null || gray === void 0 ? void 0 : gray[200],
+            "bg-neutral": gray === null || gray === void 0 ? void 0 : gray[100], "bg-base": gray === null || gray === void 0 ? void 0 : gray[50], "bg-table-header": gray === null || gray === void 0 ? void 0 : gray[100],
+            "border-default": gray === null || gray === void 0 ? void 0 : gray[200], "border-light": gray === null || gray === void 0 ? void 0 : gray[100],
+            "border-dark": gray === null || gray === void 0 ? void 0 : gray[300], "border-input": gray === null || gray === void 0 ? void 0 : gray[300],
+            "border-error": (_b = sem.error) === null || _b === void 0 ? void 0 : _b[500], "border-success": (_c = sem.success) === null || _c === void 0 ? void 0 : _c[500],
+            "border-warning": (_d = sem.warning) === null || _d === void 0 ? void 0 : _d[500], "border-info": (_e = sem.info) === null || _e === void 0 ? void 0 : _e[500],
+        };
+        const set = (name, val) => val && root.style.setProperty(`--color-${name}`, val);
+        const clear = (name) => root.style.removeProperty(`--color-${name}`);
+        const allRampNames = [...HUE_SCALES, ...SEMANTIC_SCALES].flatMap((s) => RUNGS.map((r) => `${s}-${r}`));
+        if (resolvedMode === "dark") {
+            for (const s of HUE_SCALES)
+                for (const r of RUNGS)
+                    set(`${s}-${r}`, (_f = colors[s]) === null || _f === void 0 ? void 0 : _f[r]);
+            for (const s of SEMANTIC_SCALES)
+                for (const r of RUNGS)
+                    set(`${s}-${r}`, (_g = sem[s]) === null || _g === void 0 ? void 0 : _g[r]);
+            for (const [name, val] of Object.entries(SEMANTIC_VARS))
+                set(name, val);
+        }
+        else {
+            for (const name of allRampNames)
+                clear(name);
+            for (const name of Object.keys(SEMANTIC_VARS))
+                clear(name);
+        }
+    }, [resolvedMode, resolvedTheme]);
     return ((0, jsx_runtime_1.jsx)(exports.ThemeModeContext.Provider, { value: value, children: (0, jsx_runtime_1.jsx)(react_2.ChakraProvider, { theme: resolvedTheme, colorModeManager: forcedLightColorModeManager, children: (0, jsx_runtime_1.jsx)(Toaster_1.default, { children: children }) }) }));
 };
 exports.PixelizeThemeProvider = PixelizeThemeProvider;

package/dist/Theme/provider/ThemeSwitcher.d.ts

@@ -5,4 +5,3 @@ export type ThemeSwitcherProps = {
     "aria-label"?: string;
 };
 export declare const ThemeSwitcher: ({ variant, showBrandPicker, size, "aria-label": ariaLabel, }: ThemeSwitcherProps) => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=ThemeSwitcher.d.ts.map

package/dist/Theme/provider/colorModeStorage.d.ts

@@ -7,4 +7,3 @@ export declare const readStoredTheme: (storageKey: string) => StoredTheme;
 export declare const writeStoredTheme: (storageKey: string, value: StoredTheme) => void;
 export declare const getSystemColorMode: () => ResolvedColorMode;
 export declare const subscribeToSystemColorMode: (callback: (mode: ResolvedColorMode) => void) => (() => void);
-//# sourceMappingURL=colorModeStorage.d.ts.map

package/dist/Theme/provider/fontSize.d.ts

@@ -0,0 +1,9 @@
+export type FontSizeOption = {
+    id: string;
+    label: string;
+};
+export declare const DEFAULT_FONT_SIZE = "100%";
+export declare const FONT_SIZE_OPTIONS: FontSizeOption[];
+export declare const isFontSize: (value: string | null | undefined) => value is string;
+export declare const resolveFontSize: (value: string | null | undefined) => string;
+export declare const useFontSizeSync: (fontSize: string | null | undefined) => void;

package/dist/Theme/provider/fontSize.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFontSizeSync = exports.resolveFontSize = exports.isFontSize = exports.FONT_SIZE_OPTIONS = exports.DEFAULT_FONT_SIZE = void 0;
+const react_1 = require("react");
+exports.DEFAULT_FONT_SIZE = "100%";
+exports.FONT_SIZE_OPTIONS = [
+    { id: "80%", label: "Small" },
+    { id: "90%", label: "Medium Small" },
+    { id: exports.DEFAULT_FONT_SIZE, label: "Default" },
+    { id: "110%", label: "Medium Large" },
+    { id: "120%", label: "Large" },
+    { id: "130%", label: "Extra Large" },
+];
+// The value lands on html { font-size }, so a junk stored value must not reach it.
+const isFontSize = (value) => !!value && exports.FONT_SIZE_OPTIONS.some((option) => option.id === value);
+exports.isFontSize = isFontSize;
+const resolveFontSize = (value) => (0, exports.isFontSize)(value) ? value : exports.DEFAULT_FONT_SIZE;
+exports.resolveFontSize = resolveFontSize;
+const useFontSizeSync = (fontSize) => {
+    (0, react_1.useEffect)(() => {
+        document.documentElement.style.fontSize = (0, exports.resolveFontSize)(fontSize);
+    }, [fontSize]);
+};
+exports.useFontSizeSync = useFontSizeSync;

package/dist/Theme/provider/index.d.ts

@@ -3,4 +3,5 @@ export type { PixelizeThemeProviderProps, ThemeModeContextValue, } from "./Pixel
 export { useThemeMode } from "./useThemeMode";
 export { ThemeSwitcher } from "./ThemeSwitcher";
 export type { ThemeSwitcherProps } from "./ThemeSwitcher";
-//# sourceMappingURL=index.d.ts.map
+export { DEFAULT_FONT_SIZE, FONT_SIZE_OPTIONS, isFontSize, resolveFontSize, useFontSizeSync, } from "./fontSize";
+export type { FontSizeOption } from "./fontSize";

package/dist/Theme/provider/index.js

@@ -1,9 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ThemeSwitcher = exports.useThemeMode = exports.PixelizeThemeProvider = void 0;
+exports.useFontSizeSync = exports.resolveFontSize = exports.isFontSize = exports.FONT_SIZE_OPTIONS = exports.DEFAULT_FONT_SIZE = exports.ThemeSwitcher = exports.useThemeMode = exports.PixelizeThemeProvider = void 0;
 var PixelizeThemeProvider_1 = require("./PixelizeThemeProvider");
 Object.defineProperty(exports, "PixelizeThemeProvider", { enumerable: true, get: function () { return PixelizeThemeProvider_1.PixelizeThemeProvider; } });
 var useThemeMode_1 = require("./useThemeMode");
 Object.defineProperty(exports, "useThemeMode", { enumerable: true, get: function () { return useThemeMode_1.useThemeMode; } });
 var ThemeSwitcher_1 = require("./ThemeSwitcher");
 Object.defineProperty(exports, "ThemeSwitcher", { enumerable: true, get: function () { return ThemeSwitcher_1.ThemeSwitcher; } });
+var fontSize_1 = require("./fontSize");
+Object.defineProperty(exports, "DEFAULT_FONT_SIZE", { enumerable: true, get: function () { return fontSize_1.DEFAULT_FONT_SIZE; } });
+Object.defineProperty(exports, "FONT_SIZE_OPTIONS", { enumerable: true, get: function () { return fontSize_1.FONT_SIZE_OPTIONS; } });
+Object.defineProperty(exports, "isFontSize", { enumerable: true, get: function () { return fontSize_1.isFontSize; } });
+Object.defineProperty(exports, "resolveFontSize", { enumerable: true, get: function () { return fontSize_1.resolveFontSize; } });
+Object.defineProperty(exports, "useFontSizeSync", { enumerable: true, get: function () { return fontSize_1.useFontSizeSync; } });

package/dist/Theme/provider/useThemeMode.d.ts

@@ -1,3 +1,2 @@
 import { ThemeModeContextValue } from "./PixelizeThemeProvider";
 export declare const useThemeMode: () => ThemeModeContextValue;
-//# sourceMappingURL=useThemeMode.d.ts.map

package/dist/Theme/themeProps.d.ts

@@ -116,4 +116,3 @@ export type CustomThemeProps = {
     };
 };
 export type { PaletteProps, ColorScale, BrandScale, OpacityScale, SemanticColors, NamedSurfaces, BoxShadowTokens, ThemeName, ColorMode, ResolvedColorMode, } from "./tokens/types";
-//# sourceMappingURL=themeProps.d.ts.map

package/dist/Theme/tokens/brands/emerald/palette.dark.d.ts

@@ -4,4 +4,3 @@
  */
 declare const palette: import("../..").PaletteProps;
 export default palette;
-//# sourceMappingURL=palette.dark.d.ts.map