pixelize-design-library 2.3.25 → 2.3.26

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

@@ -1,18 +0,0 @@
-import type { PaletteProps, ResolvedColorMode } from "../tokens/types";
-export interface CreateBrandThemeOptions {
-    /** Which palette this theme represents. Defaults to `light`. */
-    colorMode?: ResolvedColorMode;
-}
-/**
- * Builds a Chakra theme from a pure brand palette.
- *
- * Replaces the seven byte-identical `<Brand>/theme.ts` files — they differed only in
- * which palette they imported.
- *
- * Dark mode works by swapping which palette the theme carries: `componentStyles` variants
- * are functions of `({ theme })` and `useCustomTheme()` reads `theme.colors`, so both follow
- * the palette automatically without any per-component `_dark` overrides.
- */
-export declare const createBrandTheme: (palette: PaletteProps, options?: CreateBrandThemeOptions) => Record<string, any>;
-export default createBrandTheme;
-//# sourceMappingURL=createBrandTheme.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"createBrandTheme.d.ts","sourceRoot":"","sources":["../../../src/Theme/chakra/createBrandTheme.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAMvE,MAAM,WAAW,uBAAuB;IACtC,gEAAgE;IAChE,SAAS,CAAC,EAAE,iBAAiB,CAAC;CAC/B;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,gBAAgB,GAC3B,SAAS,YAAY,EACrB,UAAS,uBAA4B,wBAwDtC,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/Theme/chakra/createBrandTheme.js

@@ -1,78 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.createBrandTheme = void 0;
-const react_1 = require("@chakra-ui/react");
-const common_web_1 = __importDefault(require("./common.web"));
-const fonts_web_1 = __importDefault(require("./fonts.web"));
-const componentStyles_1 = require("./componentStyles");
-/**
- * Builds a Chakra theme from a pure brand palette.
- *
- * Replaces the seven byte-identical `<Brand>/theme.ts` files — they differed only in
- * which palette they imported.
- *
- * Dark mode works by swapping which palette the theme carries: `componentStyles` variants
- * are functions of `({ theme })` and `useCustomTheme()` reads `theme.colors`, so both follow
- * the palette automatically without any per-component `_dark` overrides.
- */
-const createBrandTheme = (palette, options = {}) => {
-    var _a;
-    const colorMode = (_a = options.colorMode) !== null && _a !== void 0 ? _a : "light";
-    const brand = {
-        colors: palette,
-        ...fonts_web_1.default,
-        ...common_web_1.default,
-    };
-    return (0, react_1.extendTheme)({
-        ...brand,
-        config: {
-            ...common_web_1.default.config,
-            // Deliberately ALWAYS "light", even for the dark theme — this is not a bug.
-            //
-            // Dark works by swapping the palette, so the palette is ALREADY mode-adapted by the time
-            // Chakra sees it. Telling Chakra it is in dark mode makes it adapt a second time: its
-            // built-ins carry `_dark` blocks that reach for `gray.700`/`gray.800` assuming a scale where
-            // those rungs are dark. Our dark gray ramp runs dark -> light, so those rungs are LIGHT —
-            // producing a light Card/Skeleton/Menu on a dark canvas. Adapting twice cancels out.
-            //
-            // Keeping Chakra on its `_light` branch is what makes the swap work: those defaults are
-            // gray-RUNG references (`gray.100`, `gray.200`, `gray.600`), and our reversed ramp already
-            // maps each rung to the right value per mode. `semanticTokens` below patches the one default
-            // that hardcodes a literal color instead of a rung.
-            initialColorMode: "light",
-            useSystemColorMode: false,
-        },
-        // `chakra-body-bg` is the only stock semantic token that resolves to a LITERAL (`white`)
-        // rather than a gray rung, so it is the only one the palette swap cannot correct on its own —
-        // it is what paints a white Card/Modal/Menu on the dark canvas. `background[50]` is the
-        // canvas-following equivalent: byte-identical `#ffffff` in light, the canvas in dark.
-        // `chakra-inverse-text` is the same literal-`white` problem in text form.
-        semanticTokens: {
-            colors: {
-                "chakra-body-bg": palette.background[50],
-                "chakra-inverse-text": palette.background[50],
-            },
-        },
-        // Light themes intentionally declare no global styles — that is the pre-existing
-        // behavior, and adding any would shift every consuming app's light rendering.
-        // Dark needs a canvas, otherwise the page stays white behind the components.
-        ...(colorMode === "dark"
-            ? {
-                styles: {
-                    global: {
-                        body: {
-                            bg: palette.backgroundColor.main,
-                            color: palette.text[900],
-                        },
-                    },
-                },
-            }
-            : {}),
-        components: componentStyles_1.componentStyles,
-    });
-};
-exports.createBrandTheme = createBrandTheme;
-exports.default = exports.createBrandTheme;

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

@@ -1,42 +0,0 @@
-/** Self-hosted Inter Variable (wght 100–900); required for theme fontWeights to render correctly. */
-import "@fontsource-variable/inter/index.css";
-/**
- * Web font binding: loads the Inter font face (CSS side-effect) and re-exports the pure
- * typography tokens. The CSS import lives here rather than in `tokens/` so the token
- * layer stays portable to mobile.
- */
-declare const fonts: {
-    fonts: {
-        body: string;
-        heading: string;
-        mono: string;
-    };
-    fontSizes: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        "2xl": string;
-        "3xl": string;
-        "4xl": string;
-        "5xl": string;
-        "6xl": string;
-        "7xl": string;
-        "8xl": string;
-        "9xl": string;
-    };
-    fontWeights: {
-        hairline: number;
-        thin: number;
-        light: number;
-        normal: number;
-        medium: number;
-        semibold: number;
-        bold: number;
-        extrabold: number;
-        black: number;
-    };
-};
-export default fonts;
-//# sourceMappingURL=fonts.web.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"fonts.web.d.ts","sourceRoot":"","sources":["../../../src/Theme/chakra/fonts.web.ts"],"names":[],"mappings":"AAAA,qGAAqG;AACrG,OAAO,sCAAsC,CAAC;AAG9C;;;;GAIG;AACH,QAAA,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAa,CAAC;AAEzB,eAAe,KAAK,CAAC"}

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

@@ -1,15 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-/** Self-hosted Inter Variable (wght 100–900); required for theme fontWeights to render correctly. */
-require("@fontsource-variable/inter/index.css");
-const typography_1 = __importDefault(require("../tokens/primitives/typography"));
-/**
- * Web font binding: loads the Inter font face (CSS side-effect) and re-exports the pure
- * typography tokens. The CSS import lives here rather than in `tokens/` so the token
- * layer stays portable to mobile.
- */
-const fonts = typography_1.default;
-exports.default = fonts;

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

@@ -1,46 +0,0 @@
-import React from "react";
-import type { ColorMode, ResolvedColorMode, ThemeName } from "../tokens/types";
-export type ThemeModeContextValue = {
-    mode: ColorMode;
-    resolvedMode: ResolvedColorMode;
-    setMode: (mode: ColorMode) => void;
-    toggle: () => void;
-    brand: ThemeName;
-    setBrand: (brand: ThemeName) => void;
-};
-export type PixelizeThemeProviderProps = {
-    children: React.ReactNode;
-    /** Initial brand. A persisted brand wins over this. */
-    brand?: ThemeName;
-    /** Initial color mode. A persisted mode wins over this. */
-    defaultMode?: ColorMode;
-    storageKey?: string;
-    disablePersistence?: boolean;
-    /**
-     * App-specific theme overrides (fonts, sizes, component defaultProps, zIndices, ...) merged
-     * onto the resolved `brandThemes[brand][resolvedMode]` via `extendTheme`. Re-evaluated whenever
-     * `brand`/`resolvedMode` change, so overrides always layer onto the CURRENT palette rather than
-     * a stale one. Safe to merge post-resolution: `createBrandTheme` already fixes
-     * `config.initialColorMode` to `"light"` on every palette, and `extendTheme` is a pure additive
-     * merge — it does not re-derive `_dark:` blocks or re-run color-mode resolution, so this cannot
-     * reintroduce the double-adaptation bug `forcedLightColorModeManager` avoids (see above).
-     */
-    themeOverrides?: Record<string, unknown>;
-};
-export declare const ThemeModeContext: React.Context<ThemeModeContextValue | undefined>;
-/**
- * Chakra's own color mode is deliberately NOT synced to `resolvedMode`, and must not be.
- *
- * This provider adapts for dark by swapping the palette, so `theme.colors` is already correct for
- * the active mode. Putting Chakra into dark mode on top of that adapts a second time: its built-in
- * `_dark` blocks reach for `gray.700`/`gray.800` expecting those rungs to be dark, but our dark
- * ramp runs dark -> light, so they resolve LIGHT — a white Card/Skeleton/Menu on a dark canvas.
- * A previous revision synced it to keep `useColorModeValue()` working and shipped exactly that.
- *
- * Consequence for consumers: `useColorModeValue(light, dark)` always returns its LIGHT argument.
- * That is correct here — the palette has already resolved the mode, so the "light" argument is
- * 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

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

@@ -1 +0,0 @@
-{"version":3,"file":"PixelizeThemeProvider.d.ts","sourceRoot":"","sources":["../../../src/Theme/provider/PixelizeThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,SAAS,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAU/E,MAAM,MAAM,qBAAqB,GAAG;IAClC,IAAI,EAAE,SAAS,CAAC;IAChB,YAAY,EAAE,iBAAiB,CAAC;IAChC,OAAO,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACnC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CACtC,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACvC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,uDAAuD;IACvD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,2DAA2D;IAC3D,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;;;;;;;OAQG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC1C,CAAC;AA2BF,eAAO,MAAM,gBAAgB,kDAE5B,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,qBAAqB,GAAI,8FAOnC,0BAA0B,4CA8F5B,CAAC"}

package/dist/Theme/provider/PixelizeThemeProvider.js

@@ -1,124 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PixelizeThemeProvider = exports.ThemeModeContext = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_2 = require("@chakra-ui/react");
-const index_1 = require("../index");
-const Toaster_1 = __importDefault(require("../../Components/Toaster/Toaster"));
-const colorModeStorage_1 = require("./colorModeStorage");
-const DEFAULT_BRAND = "lavender";
-const DEFAULT_MODE = "system";
-const DEFAULT_STORAGE_KEY = "pixelize-theme";
-/**
- * Chakra's default `colorModeManager` reads/writes its OWN `localStorage["chakra-ui-color-mode"]`
- * key — entirely separate from this app's `storageKey` above — and that stored value wins over
- * `theme.config.initialColorMode` on every load. `createBrandTheme` sets `initialColorMode: "light"`
- * on every theme object specifically so Chakra's native dark mode (and every un-migrated built-in
- * `_dark:` block — Card's "elevated" variant reaches for `gray.700`, which our reversed dark ramp
- * makes LIGHT) never fires. But a stale `"dark"` value in that key — from Chakra's own toggle ever
- * having been used on this origin, by this app or a prior version of it — silently overrides that
- * default and reintroduces exactly the bug `initialColorMode: "light"` was meant to prevent: a
- * washed-out light Card on an otherwise-correct dark canvas, while everything reading the palette
- * directly (i.e. everything else) stays right. Forcing this manager to always report `"light"` and
- * never persist removes Chakra's native color mode from the equation entirely, so no stray
- * `_dark:` block anywhere (present or future) can ever fire, regardless of what's in storage.
- */
-const forcedLightColorModeManager = {
-    type: "localStorage",
-    ssr: false,
-    get: () => "light",
-    set: () => { },
-};
-exports.ThemeModeContext = (0, react_1.createContext)(undefined);
-/**
- * Chakra's own color mode is deliberately NOT synced to `resolvedMode`, and must not be.
- *
- * This provider adapts for dark by swapping the palette, so `theme.colors` is already correct for
- * the active mode. Putting Chakra into dark mode on top of that adapts a second time: its built-in
- * `_dark` blocks reach for `gray.700`/`gray.800` expecting those rungs to be dark, but our dark
- * ramp runs dark -> light, so they resolve LIGHT — a white Card/Skeleton/Menu on a dark canvas.
- * A previous revision synced it to keep `useColorModeValue()` working and shipped exactly that.
- *
- * Consequence for consumers: `useColorModeValue(light, dark)` always returns its LIGHT argument.
- * That is correct here — the palette has already resolved the mode, so the "light" argument is
- * 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");
-    (0, react_1.useEffect)(() => {
-        setSystemMode((0, colorModeStorage_1.getSystemColorMode)());
-        return (0, colorModeStorage_1.subscribeToSystemColorMode)(setSystemMode);
-    }, []);
-    (0, react_1.useEffect)(() => {
-        if (disablePersistence)
-            return;
-        const stored = (0, colorModeStorage_1.readStoredTheme)(storageKey);
-        if (stored.mode)
-            setModeState(stored.mode);
-        if (stored.brand)
-            setBrandState(stored.brand);
-    }, [disablePersistence, storageKey]);
-    // `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);
-    (0, react_1.useEffect)(() => {
-        if (isFirstBrandPropRun.current) {
-            isFirstBrandPropRun.current = false;
-            return;
-        }
-        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]);
-    // 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);
-    (0, react_1.useEffect)(() => {
-        if (isFirstPersistRun.current) {
-            isFirstPersistRun.current = false;
-            return;
-        }
-        if (disablePersistence)
-            return;
-        (0, colorModeStorage_1.writeStoredTheme)(storageKey, { mode, brand });
-    }, [mode, brand, disablePersistence, storageKey]);
-    const resolvedMode = mode === "system" ? systemMode : mode;
-    /**
-     * Native browser UI (the `<select>` dropdown popup chrome, the `<input type="date">` calendar
-     * picker) is painted by the browser's own UA stylesheet keyed off the CSS `color-scheme`
-     * property, entirely separate from Chakra/React theming — no component style or palette swap
-     * above can reach it. Without this, that chrome always renders light, even on an otherwise dark
-     * 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)(() => {
-        document.documentElement.style.colorScheme = resolvedMode;
-    }, [resolvedMode]);
-    const setMode = (0, react_1.useCallback)((next) => setModeState(next), []);
-    const setBrand = (0, react_1.useCallback)((next) => setBrandState(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 value = (0, react_1.useMemo)(() => ({ mode, resolvedMode, setMode, toggle, brand, setBrand }), [mode, resolvedMode, setMode, toggle, brand, setBrand]);
-    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 ((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

@@ -1,8 +0,0 @@
-export type ThemeSwitcherProps = {
-    variant?: "icon" | "segmented" | "menu";
-    showBrandPicker?: boolean;
-    size?: "sm" | "md" | "lg";
-    "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/ThemeSwitcher.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ThemeSwitcher.d.ts","sourceRoot":"","sources":["../../../src/Theme/provider/ThemeSwitcher.tsx"],"names":[],"mappings":"AAqBA,MAAM,MAAM,kBAAkB,GAAG;IAC/B,OAAO,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,MAAM,CAAC;IACxC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAkSF,eAAO,MAAM,aAAa,GAAI,8DAK3B,kBAAkB,4CAuBpB,CAAC"}

package/dist/Theme/provider/ThemeSwitcher.js

@@ -1,111 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ThemeSwitcher = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_2 = require("@chakra-ui/react");
-const lucide_react_1 = require("lucide-react");
-const index_1 = require("../index");
-const useCustomTheme_1 = require("../useCustomTheme");
-const useThemeMode_1 = require("./useThemeMode");
-const MODE_OPTIONS = [
-    { value: "light", label: "Light", Icon: lucide_react_1.Sun },
-    { value: "system", label: "System", Icon: lucide_react_1.Monitor },
-    { value: "dark", label: "Dark", Icon: lucide_react_1.Moon },
-];
-const SIZES = {
-    sm: { control: "sm", icon: 14 },
-    md: { control: "md", icon: 16 },
-    lg: { control: "lg", icon: 18 },
-};
-const toBrandLabel = (brand) => brand.charAt(0).toUpperCase() + brand.slice(1);
-/**
- * Same swatch each brand's own theme carries at `colors.primary[500]` (the
- * anchor a filled button reads) — resolved per brand from its OWN palette so
- * the dot always matches what selecting that brand actually looks like,
- * regardless of which brand/mode is currently active.
- */
-const brandSwatchColor = (brand) => {
-    var _a, _b, _c, _d, _e;
-    return (_e = (_d = (_c = (_b = (_a = index_1.brandThemes[brand]) === null || _a === void 0 ? void 0 : _a.light) === null || _b === void 0 ? void 0 : _b.colors) === null || _c === void 0 ? void 0 : _c.primary) === null || _d === void 0 ? void 0 : _d[500]) !== null && _e !== void 0 ? _e : "gray.400";
-};
-const BrandSwatch = ({ brand }) => ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-block", w: "0.625rem", h: "0.625rem", borderRadius: "full", bg: brandSwatchColor(brand), border: "1px solid", borderColor: "whiteAlpha.300", flexShrink: 0 }));
-/**
- * Palette values already differ per color mode (`brandThemes[brand].light|dark`), so tokens
- * are read straight from the active theme — no `useColorModeValue` pairing needed here.
- * Fallbacks are Chakra token names, never literal colors, for themes without a brand palette.
- */
-const useSwitcherColors = () => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
-    const colors = (0, useCustomTheme_1.useCustomTheme)().colors;
-    return {
-        trackBg: (_d = (_b = (_a = colors === null || colors === void 0 ? void 0 : colors.backgroundColor) === null || _a === void 0 ? void 0 : _a.secondary) !== null && _b !== void 0 ? _b : (_c = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _c === void 0 ? void 0 : _c[100]) !== null && _d !== void 0 ? _d : "gray.100",
-        activeBg: (_g = (_f = (_e = colors === null || colors === void 0 ? void 0 : colors.backgroundColor) === null || _e === void 0 ? void 0 : _e.main) !== null && _f !== void 0 ? _f : colors === null || colors === void 0 ? void 0 : colors.white) !== null && _g !== void 0 ? _g : "white",
-        activeColor: (_l = (_j = (_h = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _h === void 0 ? void 0 : _h[500]) !== null && _j !== void 0 ? _j : (_k = colors === null || colors === void 0 ? void 0 : colors.text) === null || _k === void 0 ? void 0 : _k[900]) !== null && _l !== void 0 ? _l : "inherit",
-        mutedColor: (_q = (_o = (_m = colors === null || colors === void 0 ? void 0 : colors.text) === null || _m === void 0 ? void 0 : _m[600]) !== null && _o !== void 0 ? _o : (_p = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _p === void 0 ? void 0 : _p[600]) !== null && _q !== void 0 ? _q : "gray.600",
-        hoverBg: (_s = (_r = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _r === void 0 ? void 0 : _r[100]) !== null && _s !== void 0 ? _s : "gray.100",
-        borderColor: (_w = (_u = (_t = colors === null || colors === void 0 ? void 0 : colors.border) === null || _t === void 0 ? void 0 : _t[200]) !== null && _u !== void 0 ? _u : (_v = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _v === void 0 ? void 0 : _v[200]) !== null && _w !== void 0 ? _w : "gray.200",
-        // `--menu-bg` (and its hover/focus/active states) is now fixed centrally in the theme's
-        // Menu component style (Theme/chakra/Menu.styles.ts) — every MenuList gets it from there.
-        // Re-deriving it here too and pushing it back via `sx` on every render caused a redundant
-        // Emotion style recompute per render, which showed up as flicker while hovering/scrolling
-        // this list. Keep menuColor (Menu.styles.ts doesn't set list `color` per this component's
-        // needs) but stop duplicating menuBg.
-        menuColor: (_0 = (_y = (_x = colors === null || colors === void 0 ? void 0 : colors.text) === null || _x === void 0 ? void 0 : _x[900]) !== null && _y !== void 0 ? _y : (_z = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _z === void 0 ? void 0 : _z[900]) !== null && _0 !== void 0 ? _0 : "gray.900",
-    };
-};
-const BrandMenu = ({ size }) => {
-    const { brand, setBrand } = (0, useThemeMode_1.useThemeMode)();
-    const { mutedColor, menuColor } = useSwitcherColors();
-    const brands = Object.keys(index_1.brandThemes);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Menu, { children: [(0, jsx_runtime_1.jsx)(react_2.MenuButton, { as: react_2.Button, size: SIZES[size].control, variant: "ghost", color: mutedColor, borderRadius: "full", fontWeight: 500, "aria-label": `Brand theme, current ${toBrandLabel(brand)}`, _focusVisible: { boxShadow: "outline" }, children: (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(BrandSwatch, { brand: brand }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", children: toBrandLabel(brand) })] }) }), (0, jsx_runtime_1.jsx)(react_2.MenuList, { minW: "9rem", color: menuColor, children: (0, jsx_runtime_1.jsx)(react_2.MenuOptionGroup, { title: "Brand", type: "radio", value: brand, onChange: (value) => setBrand(value), children: brands.map((option) => ((0, jsx_runtime_1.jsx)(react_2.MenuItemOption, { value: option, children: (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(BrandSwatch, { brand: option }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", children: toBrandLabel(option) })] }) }, option))) }) })] }));
-};
-const IconVariant = ({ size, label, }) => {
-    const { resolvedMode, toggle } = (0, useThemeMode_1.useThemeMode)();
-    const { mutedColor, hoverBg } = useSwitcherColors();
-    const isDark = resolvedMode === "dark";
-    const Icon = isDark ? lucide_react_1.Moon : lucide_react_1.Sun;
-    const accessibleLabel = label !== null && label !== void 0 ? label : `Switch to ${isDark ? "light" : "dark"} mode`;
-    return ((0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: accessibleLabel, openDelay: 400, children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": accessibleLabel, "aria-pressed": isDark, icon: (0, jsx_runtime_1.jsx)(Icon, { size: SIZES[size].icon, "aria-hidden": true }), onClick: toggle, size: SIZES[size].control, variant: "ghost", color: mutedColor, borderRadius: "full", _hover: { bg: hoverBg }, _focusVisible: { boxShadow: "outline" } }) }));
-};
-const SegmentedVariant = ({ size, label, showBrandPicker, }) => {
-    const { mode, setMode } = (0, useThemeMode_1.useThemeMode)();
-    const { trackBg, activeBg, activeColor, mutedColor, borderColor } = useSwitcherColors();
-    const optionRefs = (0, react_1.useRef)([]);
-    // APG radiogroup behavior: arrows move focus and selection together.
-    const handleKeyDown = (event, index) => {
-        var _a;
-        const forward = event.key === "ArrowRight" || event.key === "ArrowDown";
-        const backward = event.key === "ArrowLeft" || event.key === "ArrowUp";
-        if (!forward && !backward)
-            return;
-        event.preventDefault();
-        const next = (index + (forward ? 1 : -1) + MODE_OPTIONS.length) % MODE_OPTIONS.length;
-        setMode(MODE_OPTIONS[next].value);
-        (_a = optionRefs.current[next]) === null || _a === void 0 ? void 0 : _a.focus();
-    };
-    return ((0, jsx_runtime_1.jsxs)(react_2.HStack, { role: "radiogroup", "aria-label": label !== null && label !== void 0 ? label : "Color mode", display: "inline-flex", spacing: 1, p: "0.25rem", bg: trackBg, border: "0.063rem solid", borderColor: borderColor, borderRadius: "full", children: [MODE_OPTIONS.map(({ value, label: optionLabel, Icon }, index) => {
-                const isSelected = mode === value;
-                return ((0, jsx_runtime_1.jsx)(react_2.Button, { ref: (node) => {
-                        optionRefs.current[index] = node;
-                    }, role: "radio", "aria-checked": isSelected, "aria-label": optionLabel, onClick: () => setMode(value), onKeyDown: (event) => handleKeyDown(event, index), size: SIZES[size].control, variant: "ghost", borderRadius: "full", bg: isSelected ? activeBg : "transparent", color: isSelected ? activeColor : mutedColor, boxShadow: isSelected ? "sm" : "none", _hover: { color: activeColor }, _focusVisible: { boxShadow: "outline" }, children: (0, jsx_runtime_1.jsx)(Icon, { size: SIZES[size].icon, "aria-hidden": true }) }, value));
-            }), showBrandPicker && (0, jsx_runtime_1.jsx)(BrandMenu, { size: size })] }));
-};
-const MenuVariant = ({ size, label, showBrandPicker, }) => {
-    var _a;
-    const { mode, brand, setMode, setBrand } = (0, useThemeMode_1.useThemeMode)();
-    const { mutedColor, hoverBg, menuColor } = useSwitcherColors();
-    const active = (_a = MODE_OPTIONS.find((option) => option.value === mode)) !== null && _a !== void 0 ? _a : MODE_OPTIONS[0];
-    const brands = Object.keys(index_1.brandThemes);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Menu, { children: [(0, jsx_runtime_1.jsx)(react_2.MenuButton, { as: react_2.IconButton, "aria-label": label !== null && label !== void 0 ? label : `Color mode, current ${active.label}`, icon: (0, jsx_runtime_1.jsx)(active.Icon, { size: SIZES[size].icon, "aria-hidden": true }), size: SIZES[size].control, variant: "ghost", color: mutedColor, borderRadius: "full", _hover: { bg: hoverBg }, _focusVisible: { boxShadow: "outline" } }), (0, jsx_runtime_1.jsxs)(react_2.MenuList, { minW: "10rem", color: menuColor, children: [(0, jsx_runtime_1.jsx)(react_2.MenuOptionGroup, { title: "Appearance", type: "radio", value: mode, onChange: (value) => setMode(value), children: MODE_OPTIONS.map(({ value, label: optionLabel, Icon }) => ((0, jsx_runtime_1.jsx)(react_2.MenuItemOption, { value: value, children: (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(Icon, { size: SIZES[size].icon, "aria-hidden": true }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", children: optionLabel })] }) }, value))) }), showBrandPicker && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.MenuDivider, {}), (0, jsx_runtime_1.jsx)(react_2.MenuOptionGroup, { title: "Brand", type: "radio", value: brand, onChange: (value) => setBrand(value), children: brands.map((option) => ((0, jsx_runtime_1.jsx)(react_2.MenuItemOption, { value: option, children: (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(BrandSwatch, { brand: option }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", children: toBrandLabel(option) })] }) }, option))) })] }))] })] }));
-};
-const ThemeSwitcher = ({ variant = "icon", showBrandPicker = false, size = "md", "aria-label": ariaLabel, }) => {
-    if (variant === "segmented") {
-        return ((0, jsx_runtime_1.jsx)(SegmentedVariant, { size: size, label: ariaLabel, showBrandPicker: showBrandPicker }));
-    }
-    if (variant === "menu") {
-        return ((0, jsx_runtime_1.jsx)(MenuVariant, { size: size, label: ariaLabel, showBrandPicker: showBrandPicker }));
-    }
-    return ((0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 1, display: "inline-flex", children: [(0, jsx_runtime_1.jsx)(IconVariant, { size: size, label: ariaLabel }), showBrandPicker && (0, jsx_runtime_1.jsx)(BrandMenu, { size: size })] }));
-};
-exports.ThemeSwitcher = ThemeSwitcher;

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

@@ -1,10 +0,0 @@
-import type { ColorMode, ResolvedColorMode, ThemeName } from "../tokens/types";
-export type StoredTheme = {
-    mode?: ColorMode;
-    brand?: ThemeName;
-};
-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/colorModeStorage.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"colorModeStorage.d.ts","sourceRoot":"","sources":["../../../src/Theme/provider/colorModeStorage.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE/E,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,CAAC;AAiCF,eAAO,MAAM,eAAe,GAAI,YAAY,MAAM,KAAG,WAmBpD,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,YAAY,MAAM,EAAE,OAAO,WAAW,KAAG,IASzE,CAAC;AAEF,eAAO,MAAM,kBAAkB,QAAO,iBASrC,CAAC;AAEF,eAAO,MAAM,0BAA0B,GACrC,UAAU,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,KAC1C,CAAC,MAAM,IAAI,CA0Bb,CAAC"}

package/dist/Theme/provider/colorModeStorage.js

@@ -1,106 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.subscribeToSystemColorMode = exports.getSystemColorMode = exports.writeStoredTheme = exports.readStoredTheme = void 0;
-const DARK_QUERY = "(prefers-color-scheme: dark)";
-/**
- * Stored values are untrusted input — a stale or hand-edited entry must never reach
- * `brandThemes[brand]` and hand Chakra an `undefined` theme.
- */
-const VALID_MODES = ["light", "dark", "system"];
-const VALID_BRANDS = [
-    "lavender",
-    "meadow",
-    "radiant",
-    "skyline",
-    "slate",
-    "emerald",
-    "rosewood",
-    "storefront",
-    "zinc",
-];
-const noop = () => { };
-/** Safari private mode throws on `localStorage` access rather than returning null. */
-const getStorage = () => {
-    var _a;
-    try {
-        if (typeof window === "undefined")
-            return null;
-        return (_a = window.localStorage) !== null && _a !== void 0 ? _a : null;
-    }
-    catch {
-        return null;
-    }
-};
-const readStoredTheme = (storageKey) => {
-    const storage = getStorage();
-    if (!storage)
-        return {};
-    try {
-        const raw = storage.getItem(storageKey);
-        if (!raw)
-            return {};
-        const parsed = JSON.parse(raw);
-        if (!parsed || typeof parsed !== "object")
-            return {};
-        const { mode, brand } = parsed;
-        const stored = {};
-        if (mode && VALID_MODES.includes(mode))
-            stored.mode = mode;
-        if (brand && VALID_BRANDS.includes(brand))
-            stored.brand = brand;
-        return stored;
-    }
-    catch {
-        return {};
-    }
-};
-exports.readStoredTheme = readStoredTheme;
-const writeStoredTheme = (storageKey, value) => {
-    const storage = getStorage();
-    if (!storage)
-        return;
-    try {
-        storage.setItem(storageKey, JSON.stringify(value));
-    }
-    catch {
-        // Quota / private mode. Persistence is best-effort — never break the app over it.
-    }
-};
-exports.writeStoredTheme = writeStoredTheme;
-const getSystemColorMode = () => {
-    try {
-        if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
-            return "light";
-        }
-        return window.matchMedia(DARK_QUERY).matches ? "dark" : "light";
-    }
-    catch {
-        return "light";
-    }
-};
-exports.getSystemColorMode = getSystemColorMode;
-const subscribeToSystemColorMode = (callback) => {
-    try {
-        if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
-            return noop;
-        }
-        const query = window.matchMedia(DARK_QUERY);
-        const handler = (event) => {
-            callback(event.matches ? "dark" : "light");
-        };
-        if (typeof query.addEventListener === "function") {
-            query.addEventListener("change", handler);
-            return () => query.removeEventListener("change", handler);
-        }
-        // Safari < 14 only has the deprecated listener API.
-        if (typeof query.addListener === "function") {
-            query.addListener(handler);
-            return () => query.removeListener(handler);
-        }
-        return noop;
-    }
-    catch {
-        return noop;
-    }
-};
-exports.subscribeToSystemColorMode = subscribeToSystemColorMode;

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

@@ -1,6 +0,0 @@
-export { PixelizeThemeProvider } from "./PixelizeThemeProvider";
-export type { PixelizeThemeProviderProps, ThemeModeContextValue, } from "./PixelizeThemeProvider";
-export { useThemeMode } from "./useThemeMode";
-export { ThemeSwitcher } from "./ThemeSwitcher";
-export type { ThemeSwitcherProps } from "./ThemeSwitcher";
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Theme/provider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,YAAY,EACV,0BAA0B,EAC1B,qBAAqB,GACtB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/Theme/provider/index.js

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-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; } });

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"useThemeMode.d.ts","sourceRoot":"","sources":["../../../src/Theme/provider/useThemeMode.ts"],"names":[],"mappings":"AACA,OAAO,EAAoB,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAElF,eAAO,MAAM,YAAY,QAAO,qBAU/B,CAAC"}

package/dist/Theme/provider/useThemeMode.js

@@ -1,13 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useThemeMode = void 0;
-const react_1 = require("react");
-const PixelizeThemeProvider_1 = require("./PixelizeThemeProvider");
-const useThemeMode = () => {
-    const context = (0, react_1.useContext)(PixelizeThemeProvider_1.ThemeModeContext);
-    if (!context) {
-        throw new Error("useThemeMode must be used inside <PixelizeThemeProvider>. Wrap your app (or at least the subtree that calls useThemeMode) in <PixelizeThemeProvider> from pixelize-design-library.");
-    }
-    return context;
-};
-exports.useThemeMode = useThemeMode;