pixelize-design-library 2.4.1-beta.10 → 2.4.1-beta.12

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,5 @@ 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;
+export declare const PixelizeThemeProvider: ({ children, brand: brandProp, onBrandChange, defaultMode, onModeChange, storageKey, disablePersistence, themeOverrides, }: PixelizeThemeProviderProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=PixelizeThemeProvider.d.ts.map

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

@@ -1 +1 @@
-{"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,4CAwJ5B,CAAC"}
+{"version":3,"file":"PixelizeThemeProvider.d.ts","sourceRoot":"","sources":["../../../src/Theme/provider/PixelizeThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAQN,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,kGAAkG;IAClG,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,oFAAoF;IACpF,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IAC3C,sGAAsG;IACtG,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACzC,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,2HASnC,0BAA0B,4CAyL5B,CAAC"}

package/dist/Theme/provider/PixelizeThemeProvider.js

@@ -48,7 +48,7 @@ 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 PixelizeThemeProvider = ({ children, brand: brandProp = DEFAULT_BRAND, onBrandChange, defaultMode = DEFAULT_MODE, onModeChange, 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
@@ -70,19 +70,27 @@ 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.
+    // it applied. 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
+        setBrandState(brandProp);
     }, [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 isFirstModePropRun = (0, react_1.useRef)(true);
+    (0, react_1.useEffect)(() => {
+        if (isFirstModePropRun.current) {
+            isFirstModePropRun.current = false;
+            return;
+        }
+        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);
@@ -107,18 +115,42 @@ const PixelizeThemeProvider = ({ children, brand: brandProp = DEFAULT_BRAND, def
     (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), []);
+    // 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 —

package/dist/Theme/tokens/brands/lavender/palette.light.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"palette.light.d.ts","sourceRoot":"","sources":["../../../../../src/Theme/tokens/brands/lavender/palette.light.ts"],"names":[],"mappings":"AA4SA,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BZ,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"palette.light.d.ts","sourceRoot":"","sources":["../../../../../src/Theme/tokens/brands/lavender/palette.light.ts"],"names":[],"mappings":"AAmTA,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BZ,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/Theme/tokens/brands/lavender/palette.light.js

@@ -150,7 +150,8 @@ const backgroundColor = {
     secondary: "#f2edf8",
     tertiary: "#ebe3f4",
     quaternary: "#e2d8ef",
-    light: "#fdfcfe",
+    // A card must read as lifted off the tinted canvas; the old #fdfcfe was 2% away from it.
+    light: "#ffffff",
     medium: "#e8e0f2",
     accent: "#e0d5ed",
     subtle: "#f5f1fa",
@@ -227,25 +228,31 @@ const sidebar = {
     },
 };
 const boxborder = {
-    50: "#fefefe",
-    100: "#f5f3f9",
-    200: "#ece8f3",
-    300: "#e3deed",
-    400: "#dad4e8",
-    500: "#d1c9e2",
-    600: "#bdb5cf",
+    50: "#f5f3f9",
+    100: "#ece8f3",
+    200: "#dad4e8",
+    300: "#d1c9e2",
+    400: "#c7bcda",
+    500: "#bcb0d1",
+    600: "#a79ac3",
     700: "#918ba1",
     800: "#6d6879",
     900: "#52505b",
 };
+/**
+ * The low rungs sat two steps too pale to draw anything: `200` — the default hairline for
+ * cards, dividers and inputs — was L94 against a L98 canvas, so a card had no visible edge.
+ * It now lands at L88, contrast 1.22 against a white card, matching Chakra's gray.200 hairline.
+ * Rungs 700+ are unchanged; they were never the problem.
+ */
 const border = {
-    50: "#fefefe",
-    100: "#f6f4f9",
-    200: "#ede9f4",
-    300: "#e5dfef",
-    400: "#dcd5e9",
-    500: "#d3cbe3",
-    600: "#beb7d0",
+    50: "#f6f4f9",
+    100: "#ede9f4",
+    200: "#dcd5e9",
+    300: "#d3cbe3",
+    400: "#c9bedb",
+    500: "#beb2d2",
+    600: "#a99cc4",
     700: "#938da3",
     800: "#6f6a7c",
     900: "#54505e",

package/dist/Theme/tokens/brands/zinc/palette.dark.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"palette.dark.d.ts","sourceRoot":"","sources":["../../../../../src/Theme/tokens/brands/zinc/palette.dark.ts"],"names":[],"mappings":"AAuLA,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BZ,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"palette.dark.d.ts","sourceRoot":"","sources":["../../../../../src/Theme/tokens/brands/zinc/palette.dark.ts"],"names":[],"mappings":"AAwLA,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BZ,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/Theme/tokens/brands/zinc/palette.dark.js

@@ -93,15 +93,16 @@ const header = {
     900: "#ffffff",
 };
 // muted-foreground = gray[500] = #a1a1aa (5.81:1 on the #27272a muted surface); it also serves
-// as the focus ring on the #09090b canvas (7.76:1). gray[400] = the interactive border/icon rung:
-// #6b6b75 (matching border[500]) measured 2.95:1 on the LIGHTEST named surface, just under the 3:1
-// non-text bar it is used at, so it is one step lighter than border[500] here.
+// as the focus ring on the #09090b canvas (7.76:1). gray[400] = the interactive border/icon rung,
+// and is the one value here NOT ported verbatim: it is pinned to whatever clears the 3:1 non-text
+// bar on the LIGHTEST named surface, which is derived rather than ported. shadcn's own #71717a
+// measures 2.81 there, so this sits two steps lighter (3.19).
 const gray = {
     50: "#18181b",
     100: "#27272a",
     200: "#3f3f46",
     300: "#52525b",
-    400: "#71717a",
+    400: "#7a7a83",
     500: "#a1a1aa",
     600: "#b4b4bb",
     700: "#d4d4d8",

package/dist/Theme/tokens/builders/buildDarkPalette.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"buildDarkPalette.d.ts","sourceRoot":"","sources":["../../../../src/Theme/tokens/builders/buildDarkPalette.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAc,UAAU,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AA2CrE,uEAAuE;AACvE,eAAO,MAAM,YAAY,GAAI,OAAO,UAAU,KAAG,UAW/C,CAAC;AAEH,sFAAsF;AACtF,eAAO,MAAM,YAAY,GAAI,OAAO,UAAU,KAAG,UAW/C,CAAC;AAOH;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,oBAAoB,GAAI,WAAW,MAAM,EAAE,OAAO,MAAM,KAAG,MAWvE,CAAC;AAEF,0FAA0F;AAC1F,eAAO,MAAM,SAAS,GAAI,OAAO,UAAU,EAAE,OAAO,MAAM,KAAG,UAM5D,CAAC;AAqIF,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,YAAY,GAAG,YAAY,CAsElE;AAED,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"buildDarkPalette.d.ts","sourceRoot":"","sources":["../../../../src/Theme/tokens/builders/buildDarkPalette.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAc,UAAU,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AA2CrE,uEAAuE;AACvE,eAAO,MAAM,YAAY,GAAI,OAAO,UAAU,KAAG,UAW/C,CAAC;AAEH,sFAAsF;AACtF,eAAO,MAAM,YAAY,GAAI,OAAO,UAAU,KAAG,UAW/C,CAAC;AAOH;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,oBAAoB,GAAI,WAAW,MAAM,EAAE,OAAO,MAAM,KAAG,MAWvE,CAAC;AAEF,0FAA0F;AAC1F,eAAO,MAAM,SAAS,GAAI,OAAO,UAAU,EAAE,OAAO,MAAM,KAAG,UAM5D,CAAC;AAkJF,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,YAAY,GAAG,YAAY,CAwElE;AAED,eAAe,gBAAgB,CAAC"}

package/dist/Theme/tokens/builders/buildDarkPalette.js

@@ -169,8 +169,11 @@ const TEXT_TARGETS = {
 const PLACEHOLDER_TARGETS = {
     50: 25, 100: 30, 200: 35, 300: 42, 400: 48, 500: 54, 600: 60, 700: 66, 800: 72, 900: 80,
 };
+// Rung 200 is the default hairline. At L18 it sat 5 points off a card at L13 — below the
+// perceptible step, so dark cards read as edgeless. L22 draws the same 1.2x edge the light
+// ramp does, which is what makes a card look like a card in either mode.
 const BORDER_TARGETS = {
-    50: 12, 100: 15, 200: 18, 300: 21, 400: 24, 500: 27, 600: 33, 700: 42, 800: 52, 900: 62,
+    50: 14, 100: 18, 200: 22, 300: 24, 400: 26, 500: 27, 600: 33, 700: 42, 800: 52, 900: 62,
 };
 const DISABLED_TARGETS = {
     50: 14, 100: 18, 200: 22, 300: 26, 400: 30, 500: 34, 600: 42, 700: 52, 800: 62, 900: 72,
@@ -215,12 +218,22 @@ const NAMED_SURFACE_L = {
     accent: 17,
     muted: 18,
 };
-const SURFACE_SAT = 14;
+/**
+ * Surfaces are hue-NEUTRAL in dark: every brand shares one canvas, so switching theme recolors the
+ * accents and nothing else. Tinting them instead (this was 14) made a full-screen wash — Meadow's
+ * whole app read green — which reads as a different product per brand rather than a different
+ * accent. Light mode keeps its tinted canvas; there the tint is a hint on white, not the whole
+ * screen. Brand identity in dark lives in `primary`/semantic/text, which stay hued.
+ */
+const SURFACE_SAT = 0;
 const TEXT_SAT = 12;
 const PLACEHOLDER_SAT = 10;
 const BORDER_SAT = 12;
 const DISABLED_SAT = 8;
-const GRAY_SAT = 6;
+// Neutral for the same reason as SURFACE_SAT — gray's low rungs ARE surfaces, and a tinted ramp
+// on a neutral canvas reads as a mismatch. It also buys back the contrast the neutral canvas
+// cost: `gray[400]` on `muted` was 2.99 on lavender/zinc at sat 6, and is 3.16 at 0.
+const GRAY_SAT = 0;
 function buildDarkPalette(light) {
     const hueSource = light.primary[500];
     const { h } = (0, color_1.hexToHsl)(hueSource);
@@ -265,7 +278,9 @@ function buildDarkPalette(light) {
         placeholder: fromTargets(hueSource, PLACEHOLDER_TARGETS, PLACEHOLDER_SAT),
         border: fromTargets(hueSource, BORDER_TARGETS, BORDER_SAT),
         boxborder: fromTargets(hueSource, BORDER_TARGETS, BORDER_SAT),
-        table: { hover: fromTargets(hueSource, TABLE_HOVER_TARGETS, BORDER_SAT) },
+        // Neutral: a row hover is a surface fill, and across a full table its tint is exactly the
+        // brand wash the canvas was changed to avoid.
+        table: { hover: fromTargets(hueSource, TABLE_HOVER_TARGETS, SURFACE_SAT) },
         disabled: fromTargets(hueSource, DISABLED_TARGETS, DISABLED_SAT),
         // Derived from the LIFTED accent against the dark canvas: the lift stops at the white-label
         // floor (~4.55), which leaves primary[500] short of AA as text, so text needs its own rung.

package/dist/Utils/rafThrottle.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Coalesces bursts of calls into one per animation frame.
+ *
+ * Every use in this library is a listener that reads layout (`getBoundingClientRect`) and then
+ * writes position state. Unthrottled, a capture-phase `scroll` listener runs once per scrollable
+ * ancestor per scroll event — on a low-end device that is a forced reflow several times per frame,
+ * which is what makes menus judder while the page moves. One frame is also the fastest rate the
+ * screen can show a change, so nothing is lost by dropping the rest.
+ *
+ * The trailing call wins: the last arguments before the frame fires are the current ones.
+ */
+export declare const rafThrottle: <A extends unknown[]>(fn: (...args: A) => void) => ((...args: A) => void) & {
+    cancel: () => void;
+};
+//# sourceMappingURL=rafThrottle.d.ts.map

package/dist/Utils/rafThrottle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rafThrottle.d.ts","sourceRoot":"","sources":["../../src/Utils/rafThrottle.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,OAAO,EAAE,EAC7C,IAAI,CAAC,GAAG,IAAI,EAAE,CAAC,KAAK,IAAI,KACvB,CAAC,CAAC,GAAG,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC,GAAG;IAAE,MAAM,EAAE,MAAM,IAAI,CAAA;CAmB/C,CAAC"}

package/dist/Utils/rafThrottle.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.rafThrottle = void 0;
+/**
+ * Coalesces bursts of calls into one per animation frame.
+ *
+ * Every use in this library is a listener that reads layout (`getBoundingClientRect`) and then
+ * writes position state. Unthrottled, a capture-phase `scroll` listener runs once per scrollable
+ * ancestor per scroll event — on a low-end device that is a forced reflow several times per frame,
+ * which is what makes menus judder while the page moves. One frame is also the fastest rate the
+ * screen can show a change, so nothing is lost by dropping the rest.
+ *
+ * The trailing call wins: the last arguments before the frame fires are the current ones.
+ */
+const rafThrottle = (fn) => {
+    let frame = null;
+    let latest;
+    const throttled = (...args) => {
+        latest = args;
+        if (frame !== null)
+            return;
+        frame = requestAnimationFrame(() => {
+            frame = null;
+            fn(...latest);
+        });
+    };
+    throttled.cancel = () => {
+        if (frame !== null)
+            cancelAnimationFrame(frame);
+        frame = null;
+    };
+    return throttled;
+};
+exports.rafThrottle = rafThrottle;

package/dist/Utils/table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../src/Utils/table.ts"],"names":[],"mappings":"AAAA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAC5E,OAAO,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAC9E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAI5D;;;GAGG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAoBtG;AAED,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,UAAU,EAAE,EAClB,UAAU,EAAE;IACV,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,SAAS,EAAE,MAAM,CAAC;CACnB,EAAE,gBAWJ;AAGD,MAAM,MAAM,iBAAiB,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAOhG,0EAA0E;AAC1E,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,gBAAgB,GAAG,iBAAiB,EAAE,CAwB9E;AASD;;;;;;GAMG;AACH,wBAAgB,cAAc,CAC5B,KAAK,EAAE,MAAM,GAAG,MAAM,EACtB,OAAO,EAAE,iBAAiB,EAAE,EAC5B,QAAQ,CAAC,EAAE,MAAM,EACjB,KAAK,CAAC,EAAE,gBAAgB,GACvB,iBAAiB,CAUnB;AAED,MAAM,MAAM,UAAU,GAAG;IAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,UAAU,EAAE,CAAA;CAAE,CAAC;AAEvF;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,UAAU,EAAE,EAAE,OAAO,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,EAAE,CAapF;AAED,eAAO,MAAM,mBAAmB,GAC9B,SAAS,MAAM,EAAE,EACjB,OAAO,MAAM,KACZ,MAEF,CAAC;AA0DF;;;GAGG;AACH,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,CAAC,SAAS,CAcvE;AAED,eAAO,MAAM,iBAAiB,GAC5B,MAAM,UAAU,EAAE,EAClB,cAAc,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,iBA4BrC,CAAC;AAEF,wBAAgB,QAAQ,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,KAAK,EAAE,KAAK,IAAI,EAC3D,IAAI,EAAE,CAAC,EACP,KAAK,EAAE,MAAM,GACZ,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,IAAI,CAQlC;AAED,wBAAgB,WAAW,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,KAAK,EAAE,KAAK,IAAI,EAC9D,QAAQ,EAAE,CAAC,EACX,KAAK,EAAE,MAAM,GACZ,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,IAAI,CAsBlC;AAED,eAAO,MAAM,mBAAmB,GAAI,SAAS,MAAM,aAQlD,CAAC;AAEF,KAAK,yBAAyB,GAAG;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,MAAM,EAAE,CAAC;IACvB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,EAAE,gBAAgB,CAAC;IACzB,GAAG,EAAE,UAAU,CAAC;IAChB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,gBAAgB,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,iGAUlC,yBAAyB;;;;;;CA6B3B,CAAC;AAEF;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAClE,IAAI,EAAE,CAAC,EAAE,EACT,KAAK,EAAE,MAAM,GACZ,CAAC,EAAE,CAmBL"}
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../src/Utils/table.ts"],"names":[],"mappings":"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"}

package/dist/Utils/table.js

@@ -45,6 +45,13 @@ exports.useDebounce = useDebounce;
 exports.globalSearchFilter = globalSearchFilter;
 const react_1 = __importStar(require("react"));
 const accentText_1 = require("../Theme/tokens/builders/accentText");
+// Built once, not per comparison: sorting 10k rows runs this ~130k times, and constructing a
+// collator is orders of magnitude dearer than using one.
+const COLLATOR = new Intl.Collator(undefined, {
+    numeric: true,
+    sensitivity: "base",
+});
+const HAS_DIGIT = /\d/;
 /**
  * Type-aware, null-safe comparison. Detects numbers and dates; otherwise falls
  * back to a numeric-aware locale string compare. Empty/null values sort last.
@@ -67,11 +74,15 @@ function compareValues(aRaw, bRaw, direction) {
     const bn = Number(b);
     if (!Number.isNaN(an) && !Number.isNaN(bn))
         return (an - bn) * dir;
-    const ad = Date.parse(a);
-    const bd = Date.parse(b);
-    if (!Number.isNaN(ad) && !Number.isNaN(bd))
-        return (ad - bd) * dir;
-    return a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }) * dir;
+    // No digit means no date, so this skips two Date.parse calls per comparison on the common
+    // text columns (names, emails, statuses) without changing which strings parse as dates.
+    if (HAS_DIGIT.test(a) && HAS_DIGIT.test(b)) {
+        const ad = Date.parse(a);
+        const bd = Date.parse(b);
+        if (!Number.isNaN(ad) && !Number.isNaN(bd))
+            return (ad - bd) * dir;
+    }
+    return COLLATOR.compare(a, b) * dir;
 }
 function SortMultiColumnData(data, sortConfig) {
     const active = sortConfig.filter((s) => s.direction !== "none");

package/dist/esm/App.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Box, Flex } from "@chakra-ui/react";
+import { Calendar, Cuboid, FileText, House, Link2 } from "lucide-react";
+import Loading from "./Components/Loading/Loading";
+import Sidebar from "./Components/SideBar/SideBar";
+import NavBar from "./Components/NavigationBar/NavigationBar";
+import { useSidebarPrefs } from "./Hooks/useSidebarPrefs";
+import { ThemeSwitcher } from "./Theme/provider";
+import { useCustomTheme } from "./Theme/useCustomTheme";
+import Layout from "./Layout";
+import "./global.css";
+// --- Static demo data (module scope so it isn't re-created each render) ------
+const menu = [
+    {
+        id: 1, title: "Dashboard", icon: House, url: "", group: "Main",
+        secondaryItems: [
+            { id: 11, title: "SubMenu", url: "submenu1", icon: Cuboid, badge: { count: 10, color: "red", radius: "5px", variant: "outline" } },
+            { id: 12, title: "SubMenu2", url: "submenu2", icon: Cuboid },
+        ],
+    },
+    {
+        id: 2, title: "AlertDialog", icon: Calendar, url: "alertdialog",
+        badge: { count: 10, color: "red", radius: "5px", variant: "outline" },
+    },
+    {
+        id: 3, title: "SideMenu", icon: Cuboid, url: "sidemenu",
+        subMenu: [
+            { id: 31, title: "SubMenu1", url: "submenu1", icon: FileText },
+            { id: 32, title: "SubMenu2", url: "submenu2", icon: Link2, badge: { count: 10, color: "red", radius: "5px", variant: "subtle" } },
+        ],
+    },
+    {
+        id: 4, title: "SideMenu", icon: Cuboid, url: "sidemenu",
+        subMenu: [
+            { id: 33, title: "SubMenu1", url: "submenu1" },
+            { id: 34, title: "SubMenu2", url: "submenu2" },
+        ],
+    },
+    {
+        id: 8, title: "SideMenu", icon: Cuboid, url: "sidemenu", group: "Tools",
+        subMenu: [
+            { id: 41, title: "SubMenu1", url: "submenu1", icon: Cuboid },
+            { id: 42, title: "SubMenu2", url: "submenu2", icon: Cuboid },
+        ],
+    },
+];
+const navmenus = [
+    { title: "Account Settings", url: "myaccount", icon: _jsx(Cuboid, {}) },
+    { title: "Reset password", url: "resetpassword" },
+    { title: "Billing", url: "billing" },
+    { title: "Notifications", url: "notifications" },
+];
+function useWindowSize() {
+    const [windowSize, setWindowSize] = useState({ width: 0, height: 0 });
+    useEffect(() => {
+        const handleResize = () => setWindowSize({ width: window.innerWidth, height: window.innerHeight });
+        window.addEventListener("resize", handleResize);
+        handleResize();
+        return () => window.removeEventListener("resize", handleResize);
+    }, []);
+    return windowSize;
+}
+function App() {
+    const { height } = useWindowSize();
+    const theme = useCustomTheme();
+    // Persisted layout choices — restored to exactly the same state on reload/new
+    // session via localStorage. `collapsed` = mini-rail; `mobileNav` = navbar mode
+    // forced on a big screen; `mobileOpen` = whether the overlay drawer is open.
+    // Composed handlers (onToggleMobileNav / closeMobile) come straight from the hook,
+    // so this app does not re-implement the navbar-mode/drawer behavior.
+    const { collapsed: toggle, toggleCollapsed, mobileNav, mobileOpen, toggleMobileOpen, onToggleMobileNav, closeMobile, } = useSidebarPrefs();
+    const [activeMenu, setActiveMenu] = useState(2);
+    const [activeSecondaryItem, setActiveSecondaryItem] = useState(null);
+    const handleMenuClick = (menu) => {
+        setActiveMenu(menu === null || menu === void 0 ? void 0 : menu.id);
+        setActiveSecondaryItem(null);
+    };
+    const handleSecondaryNavClick = (item) => {
+        var _a, _b;
+        setActiveSecondaryItem((_b = (_a = item === null || item === void 0 ? void 0 : item.id) !== null && _a !== void 0 ? _a : item === null || item === void 0 ? void 0 : item.title) !== null && _b !== void 0 ? _b : null);
+    };
+    const handleNavOnClick = () => { };
+    const handleLogout = () => { };
+    return (_jsx("div", { className: "App", children: _jsxs(Box, { minH: "100vh", bg: "gray.100", overflow: "hidden", children: [_jsx(Loading, { text: "PIXELIZE CRM", isLoading: false, onlytext: true }), _jsxs(Flex, { children: [_jsx(Box, { children: _jsx(Sidebar, { menus: menu, activeMenu: activeMenu, handleMenuClick: handleMenuClick, handleSecondaryNavClick: handleSecondaryNavClick, toggle: toggle, changeToggle: toggleCollapsed, companyName: "PIXELIZE Technologies Pvt., Ltd.", selectedSecondaryItem: activeSecondaryItem, mobileOpen: mobileOpen, onMobileClose: closeMobile, mobileNav: mobileNav, onToggleMobileNav: onToggleMobileNav }) }), _jsxs(Box, { flex: "1", minW: 0, overflow: "hidden", children: [_jsx(NavBar, { userAvathar: "https://bit.ly/dan-abramo", userName: "PIXELIZE", userRole: "Admin", navMenu: navmenus, handleNavOnClick: handleNavOnClick, handleLogout: handleLogout, logoutText: "Logout", sideBarToggole: mobileOpen, onSideBarToggole: toggleMobileOpen, forceSideBarToggle: mobileNav, navigationBarText: {
+                                        text: _jsx(_Fragment, { children: "Dashboard" }),
+                                        onIconClick: () => { },
+                                    }, moreIcon: _jsx(Calendar, {}) }, "navbar"), _jsx("br", {}), _jsxs(Flex, { "data-testid": "theme-controls", px: "50px", pb: 3, gap: 4, align: "center", justify: "flex-end", children: [_jsx(ThemeSwitcher, { variant: "segmented", showBrandPicker: true }), _jsx(ThemeSwitcher, { variant: "icon" })] }), _jsx(Box, { p: "50px", pt: 0, height: height - 200, overflowY: "scroll", overflowX: "hidden", width: "100%", "data-testid": "playground-surface", bg: theme.colors.backgroundColor.main, children: _jsx(Layout, {}) })] })] })] }) }));
+}
+export default App;

package/dist/esm/Assets/defaultLogo.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const DefaultLogo = () => {
+    return (_jsxs("svg", { width: "12.09", height: "15.95", viewBox: "0 0 31 29", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M30.4999 6.26137V7.81058H15.9761H14.8787V22.8508V28.8862H12.5226C9.6824 28.8862 7.32632 26.4656 7.06812 23.3995C7.06812 23.2381 7.06812 23.0444 7.06812 22.8508V18.3323C7.06812 18.2677 7.06812 18.2032 7.06812 18.1063V15.5889V6.2291C7.06812 2.80793 9.84378 -5.72205e-06 13.2972 -5.72205e-06H24.8517C28.0147 0.355021 30.4676 3.00158 30.4676 6.2291L30.4999 6.26137Z", fill: "currentColor" }), _jsx("path", { d: "M7.10053 23.3672H7.03598C5.16402 23.2381 3.48571 22.4635 2.25926 21.3338C0.871428 20.0428 0 18.2677 0 16.3312V15.6211H7.06825V18.1386C7.06825 18.2032 7.06825 18.2677 7.06825 18.3645V22.883C7.06825 23.0767 7.06825 23.2381 7.06825 23.4317L7.10053 23.3672Z", fill: "currentColor" }), _jsx("path", { d: "M30.4678 12.0063V15.6211V17.1703C30.4678 20.6238 26.272 23.3994 21.0757 23.3994H14.8789V22.8508V15.6211H22.6572V7.81056C22.6895 7.81056 30.5001 7.81056 30.5001 7.81056V11.5868C30.5001 11.7159 30.5001 11.8772 30.5001 12.0063H30.4678Z", fill: "currentColor" })] }));
+};
+export default DefaultLogo;

package/dist/esm/Components/Accordion/Accordion.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Accordion as ChakraAccordian, AccordionItem, AccordionButton, AccordionPanel, Box, Flex, } from "@chakra-ui/react";
+import { ChevronDown } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme";
+import { isDarkCanvas } from "../../Theme/tokens/builders/accentText";
+import { getAccordionHoverColors } from "./accordionColors";
+const Accordion = ({ allowMultiple, allowToggle, index, onChange, reduceMotion, items, ...rest }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    const theme = useCustomTheme();
+    const c = (_a = theme.colors) !== null && _a !== void 0 ? _a : {};
+    const isDark = isDarkCanvas((_c = (_b = c.backgroundColor) === null || _b === void 0 ? void 0 : _b.main) !== null && _c !== void 0 ? _c : "#ffffff");
+    const border = (_e = (_d = c.boxborder) === null || _d === void 0 ? void 0 : _d[300]) !== null && _e !== void 0 ? _e : (_f = c.gray) === null || _f === void 0 ? void 0 : _f[200];
+    const headingColor = (_h = (_g = c.text) === null || _g === void 0 ? void 0 : _g[800]) !== null && _h !== void 0 ? _h : (_j = c.gray) === null || _j === void 0 ? void 0 : _j[800];
+    const bodyColor = (_l = (_k = c.text) === null || _k === void 0 ? void 0 : _k[600]) !== null && _l !== void 0 ? _l : (_m = c.gray) === null || _m === void 0 ? void 0 : _m[600];
+    const { expandedBg, softHover } = useMemo(() => { var _a; return getAccordionHoverColors((_a = theme.colors) !== null && _a !== void 0 ? _a : {}, isDark); }, [theme.colors, isDark]);
+    return (_jsx(ChakraAccordian, { allowMultiple: allowMultiple, allowToggle: allowToggle, index: index, onChange: onChange, reduceMotion: reduceMotion, ...rest, children: items.map((item, idx) => {
+            var _a, _b, _c, _d, _e, _f;
+            return (_jsx(AccordionItem, { border: `0.063rem solid ${border}`, borderRadius: "0.625rem", bg: (_b = (_a = c.background) === null || _a === void 0 ? void 0 : _a[50]) !== null && _b !== void 0 ? _b : "#fff", mb: 3, overflow: "hidden", transition: "border-color 0.15s ease, box-shadow 0.15s ease", _last: { mb: 0 }, _hover: { borderColor: (_d = (_c = c.boxborder) === null || _c === void 0 ? void 0 : _c[400]) !== null && _d !== void 0 ? _d : (_e = c.gray) === null || _e === void 0 ? void 0 : _e[300] }, ...item.itemProps, sx: (_f = item.customStyles) === null || _f === void 0 ? void 0 : _f.itemStyle, children: ({ isExpanded }) => {
+                    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+                    return (_jsxs(_Fragment, { children: [_jsx("h2", { children: _jsxs(AccordionButton, { px: 4, py: 3, gap: 3, fontSize: "0.875rem", fontWeight: 600, color: headingColor, bg: isExpanded ? expandedBg : "transparent", transition: "background 0.15s ease", _hover: { bg: isExpanded ? expandedBg : softHover }, _focusVisible: {
+                                        boxShadow: "none",
+                                        outline: `0.125rem solid ${(_b = (_a = c.primary) === null || _a === void 0 ? void 0 : _a[300]) !== null && _b !== void 0 ? _b : (_c = c.gray) === null || _c === void 0 ? void 0 : _c[300]}`,
+                                        outlineOffset: "-0.125rem",
+                                    }, ...item.buttonProps, sx: {
+                                        ...(_d = item.customStyles) === null || _d === void 0 ? void 0 : _d.buttonStyle,
+                                        "&:hover": {
+                                            ...(_e = item.customStyles) === null || _e === void 0 ? void 0 : _e.hoverbuttonStyle,
+                                        },
+                                    }, children: [_jsx(Box, { as: "span", flex: "1", textAlign: "left", children: item.header }), _jsx(Flex, { align: "center", justify: "center", boxSize: "1.5rem", flexShrink: 0, borderRadius: "0.375rem", color: isExpanded ? ((_g = (_f = c.primary) === null || _f === void 0 ? void 0 : _f[600]) !== null && _g !== void 0 ? _g : headingColor) : (_h = c.gray) === null || _h === void 0 ? void 0 : _h[500], bg: isExpanded ? ((_l = (_k = (_j = c.primary) === null || _j === void 0 ? void 0 : _j.opacity) === null || _k === void 0 ? void 0 : _k[16]) !== null && _l !== void 0 ? _l : "transparent") : "transparent", transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)", transition: "transform 0.2s ease, color 0.2s ease, background 0.2s ease", children: _jsx(ChevronDown, { size: 16 }) })] }) }), _jsx(AccordionPanel, { px: 4, pt: 1, pb: 4, fontSize: "0.875rem", lineHeight: "1.5", color: bodyColor, ...item.panelProps, sx: (_m = item.customStyles) === null || _m === void 0 ? void 0 : _m.panelStyle, children: item.content })] }));
+                } }, idx));
+        }) }));
+};
+export default Accordion;

package/dist/esm/Components/Accordion/AccordionProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/Accordion/accordionColors.js

@@ -0,0 +1,30 @@
+import { compositeOver } from "../../Theme/tokens/builders/color";
+import { liftToContrast } from "../../Theme/tokens/builders/outlineRung";
+/**
+ * Same perceptibility floor the SideBar ladder uses — a state a user cannot see is not a state.
+ * Light mode `softHover` measured 1.042-1.105 across all 9 brands (invisible) while dark sat at
+ * 1.58-1.85; `expandedBg` (`primary.opacity[8]`, an 8%-alpha tint) is the same bug class — an
+ * 8% tint composited over a near-white canvas is itself near-white. Both are resolved against
+ * the rest surface so light and dark actually agree on "you can see this".
+ */
+const MIN_HOVER_STEP = 1.15;
+export const getAccordionHoverColors = (colors, isDark) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
+    if (isDark) {
+        // primary.opacity[8] composited over the dark canvas collapses to ~1.07:1 (near-black on
+        // near-black) — gray[200] is an opaque rung that stays visibly above canvas (~1.6:1) without
+        // being as loud as the gray[300] hover fill FilterSidebar/Table already use.
+        return {
+            expandedBg: (_d = (_b = (_a = colors.gray) === null || _a === void 0 ? void 0 : _a[200]) !== null && _b !== void 0 ? _b : (_c = colors.gray) === null || _c === void 0 ? void 0 : _c[300]) !== null && _d !== void 0 ? _d : (_e = colors.gray) === null || _e === void 0 ? void 0 : _e[50],
+            softHover: (_j = (_g = (_f = colors.gray) === null || _f === void 0 ? void 0 : _f[200]) !== null && _g !== void 0 ? _g : (_h = colors.gray) === null || _h === void 0 ? void 0 : _h[300]) !== null && _j !== void 0 ? _j : (_k = colors.gray) === null || _k === void 0 ? void 0 : _k[50],
+        };
+    }
+    const rest = (_m = (_l = colors.background) === null || _l === void 0 ? void 0 : _l[50]) !== null && _m !== void 0 ? _m : "#ffffff";
+    const expandedTint = ((_p = (_o = colors.primary) === null || _o === void 0 ? void 0 : _o.opacity) === null || _p === void 0 ? void 0 : _p[8])
+        ? compositeOver(colors.primary.opacity[8], rest)
+        : ((_r = (_q = colors.gray) === null || _q === void 0 ? void 0 : _q[50]) !== null && _r !== void 0 ? _r : rest);
+    return {
+        expandedBg: liftToContrast(expandedTint, rest, "light", MIN_HOVER_STEP),
+        softHover: liftToContrast((_u = (_t = (_s = colors.table) === null || _s === void 0 ? void 0 : _s.hover) === null || _t === void 0 ? void 0 : _t[100]) !== null && _u !== void 0 ? _u : (_v = colors.gray) === null || _v === void 0 ? void 0 : _v[50], rest, "light", MIN_HOVER_STEP),
+    };
+};

package/dist/esm/Components/AlertDialog/AlertDialog.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertDialog as ChakraAlertDialog, AlertDialogBody, AlertDialogCloseButton, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, Button, } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme";
+const AlertDialog = ({ isOpen, onClose, leastDestructiveRef, content, title, confirmButtonText = "Yes", cancelButtonText = "No", isConfirmLoading, onConfirm, ContentStyle, headerStyle, bodyStyle, footerStyle, closeButtonStyle, button1Style, button2Style, isCentered, key, }) => {
+    var _a;
+    const { colors } = useCustomTheme();
+    return (_jsxs(ChakraAlertDialog, { motionPreset: "slideInBottom", leastDestructiveRef: leastDestructiveRef, onClose: onClose, isOpen: isOpen, isCentered: isCentered, children: [_jsx(AlertDialogOverlay, {}), _jsxs(AlertDialogContent, { bg: (_a = colors === null || colors === void 0 ? void 0 : colors.background) === null || _a === void 0 ? void 0 : _a[50], sx: ContentStyle, children: [_jsx(AlertDialogHeader, { sx: headerStyle, children: title }), _jsx(AlertDialogCloseButton, { sx: closeButtonStyle }), _jsx(AlertDialogBody, { sx: bodyStyle, children: content }), _jsxs(AlertDialogFooter, { sx: footerStyle, children: [_jsx(Button, { ref: leastDestructiveRef, onClick: onClose, variant: "outline", colorScheme: "red", size: "sm", sx: button1Style, children: cancelButtonText }), _jsx(Button, { colorScheme: "primary", onClick: onConfirm, isLoading: isConfirmLoading, ml: 3, size: "sm", sx: button2Style, children: confirmButtonText })] })] })] }, key));
+};
+export default AlertDialog;

package/dist/esm/Components/AlertDialog/AlertDialogProps.js

@@ -0,0 +1 @@
+export {};