pixelize-design-library 2.4.2-beta.64 → 2.4.2-beta.66

package/dist/Hooks/useOutsideMouseDown.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOutsideMouseDown = void 0;
+const react_1 = require("react");
+/** Calls `onOutside` for a document `mousedown` outside every ref; a null ref contains nothing. Unlike Chakra's `useOutsideClick` it never waits for `mouseup`. */
+const useOutsideMouseDown = (refs, onOutside, { enabled = true, capture = false, includeClick = false } = {}) => {
+    const latest = (0, react_1.useRef)({ refs, onOutside });
+    (0, react_1.useEffect)(() => {
+        latest.current = { refs, onOutside };
+    });
+    (0, react_1.useEffect)(() => {
+        if (!enabled)
+            return;
+        const handle = (event) => {
+            const target = event.target;
+            if (latest.current.refs.some((ref) => { var _a; return (_a = ref.current) === null || _a === void 0 ? void 0 : _a.contains(target); }))
+                return;
+            latest.current.onOutside(event);
+        };
+        document.addEventListener("mousedown", handle, capture);
+        if (includeClick)
+            document.addEventListener("click", handle, capture);
+        return () => {
+            document.removeEventListener("mousedown", handle, capture);
+            if (includeClick)
+                document.removeEventListener("click", handle, capture);
+        };
+    }, [enabled, capture, includeClick]);
+};
+exports.useOutsideMouseDown = useOutsideMouseDown;

package/dist/Hooks/usePreferences.js

@@ -19,28 +19,45 @@ const constructUrl = ({ baseUrl, key, page, name, orgId }) => {
     const queryString = params.toString();
     return `${baseUrl}${queryString ? `?${queryString}` : ""}`;
 };
+const NO_PREFERENCES = [];
 const useGetPreferences = ({ baseUrl = "", key = "", page = "", name = "", authToken = "", orgId = "", }) => {
-    const [preferences, setPreferences] = (0, react_1.useState)([]);
-    // NOTE: must start true — KanbanBoard's hydration effect reads this before this hook's mount effect runs.
-    const [loading, setLoading] = (0, react_1.useState)(() => Boolean(baseUrl));
+    const url = baseUrl ? constructUrl({ baseUrl, key, page, name, orgId }) : "";
+    const requestKey = url ? JSON.stringify([url, authToken]) : "";
+    const [settled, setSettled] = (0, react_1.useState)({
+        requestKey: "",
+        preferences: NO_PREFERENCES,
+    });
     (0, react_1.useEffect)(() => {
-        if (!baseUrl) {
+        if (!url) {
             return;
         }
-        setLoading(true);
-        const url = constructUrl({ baseUrl, key, page, name, orgId });
+        let cancelled = false;
         fetch(url, {
             headers: {
                 Authorization: authToken,
             },
         })
             .then((response) => response.json())
-            .then((data) => setPreferences(data))
-            .catch((error) => console.error(error))
-            .finally(() => setLoading(false));
-        /* eslint-disable */
-    }, [baseUrl]);
-    return { preferences, loading };
+            .then((data) => {
+            if (!cancelled)
+                setSettled({ requestKey, preferences: data });
+        })
+            .catch((error) => {
+            if (cancelled)
+                return;
+            console.error(error);
+            setSettled({ requestKey, preferences: NO_PREFERENCES });
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [url, authToken, requestKey]);
+    const isSettled = settled.requestKey === requestKey;
+    return {
+        preferences: isSettled ? settled.preferences : NO_PREFERENCES,
+        // NOTE: derived so KanbanBoard never reads a stale loading=false, on mount or re-key.
+        loading: Boolean(baseUrl) && !isSettled,
+    };
 };
 exports.useGetPreferences = useGetPreferences;
 const useSavePreferences = ({ baseUrl = "", key = "", page = "", name = "", authToken = "", orgId = "", }) => {
@@ -59,6 +76,7 @@ const useSavePreferences = ({ baseUrl = "", key = "", page = "", name = "", auth
             body: JSON.stringify({ key, page, name, json: data }),
         })
             .then((r) => r.json())
+            .then(() => setError(null))
             .catch((e) => setError(e))
             .finally(() => setLoading(false));
     }, [baseUrl, orgId, authToken, key, page, name]);

package/dist/Hooks/useScrollableRegion.d.ts

@@ -0,0 +1,17 @@
+/** `label` or `labelledBy` names the scroller; `keepRole` stops it taking role=region. */
+export type ScrollableRegionOptions = {
+    label?: string;
+    labelledBy?: string;
+    keepRole?: boolean;
+};
+/** Attributes to spread on a scroller; empty unless it overflows with nothing focusable inside. */
+export type ScrollableRegionProps = {
+    tabIndex?: 0;
+    role?: "region";
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+};
+export declare function useScrollableRegion<T extends HTMLElement = HTMLElement>({ label, labelledBy, keepRole, }?: ScrollableRegionOptions): {
+    ref: (node: T | null) => void;
+    props: ScrollableRegionProps;
+};

package/dist/Hooks/useScrollableRegion.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useScrollableRegion = useScrollableRegion;
+const react_1 = require("react");
+const sharedResizeObserver_1 = require("./sharedResizeObserver");
+const FOCUSABLE_CONTENT = 'a[href], area[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), summary, iframe, [contenteditable]:not([contenteditable="false"]), [tabindex]:not([tabindex="-1"])';
+const USER_SCROLLABLE = /auto|scroll/;
+const SLACK_PX = 1;
+const needsFocusStop = (el) => {
+    const { overflowX, overflowY } = getComputedStyle(el);
+    const scrollsX = USER_SCROLLABLE.test(overflowX) && el.scrollWidth > el.clientWidth + SLACK_PX;
+    const scrollsY = USER_SCROLLABLE.test(overflowY) && el.scrollHeight > el.clientHeight + SLACK_PX;
+    return (scrollsX || scrollsY) && !el.querySelector(FOCUSABLE_CONTENT);
+};
+function useScrollableRegion({ label, labelledBy, keepRole = false, } = {}) {
+    const [element, setElement] = (0, react_1.useState)(null);
+    const [isStop, setIsStop] = (0, react_1.useState)(false);
+    const measure = (0, react_1.useCallback)(() => setIsStop(element !== null && needsFocusStop(element)), [element]);
+    (0, react_1.useEffect)(() => {
+        if (!element)
+            return undefined;
+        return (0, sharedResizeObserver_1.observeResize)(element, measure);
+    }, [element, measure]);
+    // NOTE: also runs after every commit; an equal state bails out, so no loop.
+    (0, react_1.useEffect)(measure);
+    const named = Boolean(label || labelledBy);
+    const props = isStop
+        ? {
+            tabIndex: 0,
+            role: named && !keepRole ? "region" : undefined,
+            "aria-label": label,
+            "aria-labelledby": labelledBy,
+        }
+        : {};
+    return { ref: setElement, props };
+}

package/dist/Hooks/useSidebarPrefs.d.ts

@@ -3,6 +3,7 @@ export type SidebarPrefs = {
     collapsed: boolean;
     mobileOpen: boolean;
 };
+/** Persistence key and first-visit defaults for sidebar preferences. */
 export type UseSidebarPrefsOptions = {
     /** localStorage key. Versioned so a future shape change can bump it. */
     storageKey?: string;

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

@@ -14,6 +14,10 @@ export declare const Menu: {
             borderStyle: string;
             borderColor: string;
         };
+        divider: {
+            opacity?: number | undefined;
+            borderColor: string;
+        };
         item: {
             color: string;
             minH: string;

package/dist/Theme/chakra/Menu.styles.js

@@ -8,6 +8,8 @@ const optionRowInk_1 = require("../../Components/Select/optionRowInk");
 const optionRowSizes_1 = require("../tokens/primitives/optionRowSizes");
 const paletteFromTheme_1 = require("./paletteFromTheme");
 const overlay_styles_1 = require("./overlay.styles");
+const accentText_1 = require("../tokens/builders/accentText");
+const surfaceRaised_1 = require("../tokens/builders/surfaceRaised");
 const itemRowSpec = optionRowSizes_1.OPTION_ROW_SIZES.sm;
 const { defineMultiStyleConfig, definePartsStyle } = (0, react_1.createMultiStyleConfigHelpers)(anatomy_1.menuAnatomy.keys);
 const $bg = (0, react_1.cssVar)("menu-bg");
@@ -28,6 +30,10 @@ const baseStyle = definePartsStyle(({ theme }) => {
             borderColor: colors.boxborder[200],
             ...overlay_styles_1.POPUP_SURFACE,
         },
+        divider: {
+            borderColor: (0, surfaceRaised_1.raisedRule)(colors),
+            ...((0, accentText_1.isDarkCanvas)(colors.surfaceRaised) && { opacity: 1 }),
+        },
         item: {
             color: (0, optionRowInk_1.optionRowInk)(colors, false),
             minH: itemRowSpec.minH,

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

@@ -181,6 +181,10 @@ export declare const componentStyles: {
                 borderStyle: string;
                 borderColor: string;
             };
+            divider: {
+                opacity?: number | undefined;
+                borderColor: string;
+            };
             item: {
                 color: string;
                 minH: string;

package/dist/Theme/chakra/componentStyles.js

@@ -77,7 +77,7 @@ const Badge = {
         size: "sm",
     },
 };
-// NOTE: fixes Chakra's FormErrorMessage/Icon hardcoding red.500 — same AA gap as our ErrorComponent.
+// NOTE: fixes Chakra's FormErrorMessage/Icon hardcoding red.500, which misses AA on the canvas.
 const FormError = {
     baseStyle: ({ theme }) => {
         const palette = (0, paletteFromTheme_1.paletteOf)(theme);

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

@@ -1,5 +1,6 @@
 import type { PaletteProps, ResolvedColorMode } from "../tokens/types";
 import { type ReducedMotionScope } from "./motion";
+/** Colour mode and reduced-motion scope for a built brand theme. */
 export interface CreateBrandThemeOptions {
     /** Which palette this theme represents. Defaults to `light`. */
     colorMode?: ResolvedColorMode;

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

@@ -10,7 +10,7 @@ type WithBrandGlow = {
     primary: BrandScale;
 };
 export declare const focusRingShadow: (colors: WithFocusRing) => string;
-/** For controls whose rounded shell clips overflow: the same halo and ring, drawn inside the border box. */
+/** For controls whose shell clips overflow: ring on the edge, halo inside, so an opaque child leaves the ring. */
 export declare const insetFocusRingShadow: (colors: WithFocusRing) => string;
 export declare const FOCUS_VISIBLE_OVER_STATE = "&:hover:focus-visible, &:active:focus-visible, &[data-active]:focus-visible";
 export declare const focusVisibleRing: (colors: WithFocusRing) => {

package/dist/Theme/chakra/focusRing.styles.js

@@ -10,9 +10,9 @@ exports.FOCUS_RING_WIDTH = 4;
 const focusRingShadow = (colors) => `0 0 0 ${exports.FOCUS_HALO_WIDTH}px ${colors.focusRing.halo}, ` +
     `0 0 0 ${exports.FOCUS_RING_WIDTH}px ${colors.focusRing.ring}`;
 exports.focusRingShadow = focusRingShadow;
-/** For controls whose rounded shell clips overflow: the same halo and ring, drawn inside the border box. */
-const insetFocusRingShadow = (colors) => `inset 0 0 0 ${exports.FOCUS_HALO_WIDTH}px ${colors.focusRing.halo}, ` +
-    `inset 0 0 0 ${exports.FOCUS_RING_WIDTH}px ${colors.focusRing.ring}`;
+/** For controls whose shell clips overflow: ring on the edge, halo inside, so an opaque child leaves the ring. */
+const insetFocusRingShadow = (colors) => `inset 0 0 0 ${exports.FOCUS_RING_WIDTH - exports.FOCUS_HALO_WIDTH}px ${colors.focusRing.ring}, ` +
+    `inset 0 0 0 ${exports.FOCUS_RING_WIDTH}px ${colors.focusRing.halo}`;
 exports.insetFocusRingShadow = insetFocusRingShadow;
 // NOTE: stacked pseudo-classes raise specificity above Chakra's _hover, so a hovered+focused button keeps its ring.
 exports.FOCUS_VISIBLE_OVER_STATE = "&:hover:focus-visible, &:active:focus-visible, &[data-active]:focus-visible";

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

@@ -3,4 +3,5 @@ import type { ColorScale, PaletteProps } from "../tokens/types";
 export declare const paletteOf: (theme: {
     colors?: unknown;
 }) => PaletteProps;
-export declare const scaleFor: (palette: PaletteProps, colorScheme: string) => ColorScale;
+export declare const warnUnknownColorScheme: (colorScheme: string) => void;
+export declare const scaleFor: (palette: PaletteProps, colorScheme: string, fallback?: ColorScale) => ColorScale;

package/dist/Theme/chakra/paletteFromTheme.js

@@ -1,11 +1,25 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.scaleFor = exports.paletteOf = void 0;
+exports.scaleFor = exports.warnUnknownColorScheme = exports.paletteOf = void 0;
 const assertPalette_1 = require("../assertPalette");
+const paletteScale_1 = require("../tokens/builders/paletteScale");
 /** Chakra hands style functions an untyped theme; this is the boundary that makes it typed. */
 const paletteOf = (theme) => (0, assertPalette_1.assertPixelizePalette)(theme);
 exports.paletteOf = paletteOf;
-const asScale = (value) => typeof value === "object" && value !== null ? value : undefined;
-// NOTE: colorScheme is consumer-supplied and can name a built-in we never themed — unknowns resolve to gray.
-const scaleFor = (palette, colorScheme) => { var _a; return (_a = asScale(palette[colorScheme])) !== null && _a !== void 0 ? _a : palette.gray; };
+const warned = new Set();
+const warnUnknownColorScheme = (colorScheme) => {
+    if (process.env.NODE_ENV === "production" || warned.has(colorScheme))
+        return;
+    warned.add(colorScheme);
+    console.warn(`[pixelize-design-library] colorScheme "${colorScheme}" is not a themed colour scale; using the fallback scale.`);
+};
+exports.warnUnknownColorScheme = warnUnknownColorScheme;
+// NOTE: colorScheme is consumer-supplied and can name a built-in we never themed — unknowns use the fallback.
+const scaleFor = (palette, colorScheme, fallback = palette.gray) => {
+    const scale = (0, paletteScale_1.scaleNamed)(palette, colorScheme);
+    if (scale)
+        return scale;
+    (0, exports.warnUnknownColorScheme)(colorScheme);
+    return fallback;
+};
 exports.scaleFor = scaleFor;

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

@@ -0,0 +1,3 @@
+import { type BorderWidthRole } from "../tokens/primitives/borderWidths";
+/** A stroke drawn inside the border box as a box-shadow, so it never costs layout. */
+export declare const insetRingShadow: (color: string, width?: BorderWidthRole) => string;

package/dist/Theme/chakra/ringShadow.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.insetRingShadow = void 0;
+const borderWidths_1 = require("../tokens/primitives/borderWidths");
+/** A stroke drawn inside the border box as a box-shadow, so it never costs layout. */
+const insetRingShadow = (color, width = "hairline") => `inset 0 0 0 ${borderWidths_1.BORDER_WIDTHS[width]} ${color}`;
+exports.insetRingShadow = insetRingShadow;

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

@@ -9,6 +9,7 @@ export type ThemeModeContextValue = {
     brand: ThemeName;
     setBrand: (brand: ThemeName) => void;
 };
+/** Brand and mode state, persisted to localStorage unless `disablePersistence` is set. */
 export type PixelizeThemeProviderProps = {
     children: React.ReactNode;
     brand?: ThemeName;

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

@@ -1,3 +1,4 @@
+/** Control for switching light, dark or system mode, and optionally the brand. */
 export type ThemeSwitcherProps = {
     variant?: "icon" | "segmented" | "menu";
     showBrandPicker?: boolean;

package/dist/Theme/provider/ThemeSwitcher.js

@@ -81,7 +81,7 @@ const SegmentedVariant = ({ size, label, showBrandPicker, }) => {
                 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: { outline: "2px solid transparent", outlineOffset: "2px" }, children: (0, jsx_runtime_1.jsx)(Icon, { size: SIZES[size].icon, "aria-hidden": true }) }, value));
+                    }, role: "radio", "aria-checked": isSelected, "aria-label": optionLabel, tabIndex: isSelected ? 0 : -1, 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: { outline: "2px solid transparent", outlineOffset: "2px" }, 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, }) => {

package/dist/Theme/testing/testPalette.d.ts

@@ -4,6 +4,7 @@ export type DeepPartial<T> = T extends string ? T : {
     [K in keyof T]?: DeepPartial<T[K]>;
 };
 export type PaletteOverrides = DeepPartial<PaletteProps>;
+/** Brand, mode and group overrides for a test palette. */
 export type TestPaletteOptions = {
     brand?: ThemeName;
     mode?: ResolvedColorMode;

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

@@ -6,8 +6,9 @@ export declare const shiftLighter: (scale: ColorScale) => ColorScale;
 export declare const accentLightnessDelta: (accent500: string, white: string) => number;
 /** Raises every rung by the same lightness delta, preserving the ramp's shape and hue. */
 export declare const liftScale: (scale: ColorScale, delta: number) => ColorScale;
-/** `lifted`: brand-tinted canvas, card a CARD_LIFT step above it. `flat`: the hue-neutral canvas the card shares. */
+/** `lifted`: the card sits a CARD_LIFT step above the canvas. `flat`: the card is the canvas. */
 export type DarkPlanes = "lifted" | "flat";
+/** Card plane choice; defaults to `lifted`. */
 export interface DarkPaletteOptions {
     planes?: DarkPlanes;
 }

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

@@ -151,7 +151,8 @@ const NAMED_SURFACE_L = {
     accent: 17,
     muted: 18,
 };
-const SURFACE_SAT = { lifted: 14, flat: 0 };
+// NOTE: surfaces are hue-neutral on every brand; brand hue stays on accents, ink and rules.
+const SURFACE_SAT = 0;
 const TEXT_SAT = 12;
 const PLACEHOLDER_SAT = 10;
 const BORDER_SAT = 12;
@@ -182,16 +183,15 @@ const cardPlane = (canvas, white, planes) => {
 function buildDarkPalette(light, { planes = "lifted" } = {}) {
     const hueSource = light.primary[500];
     const { h } = (0, color_1.hexToHsl)(hueSource);
-    const surfaceSat = SURFACE_SAT[planes];
     const namedSurfaces = Object.fromEntries(Object.entries(NAMED_SURFACE_L).map(([key, l]) => [
         key,
-        (0, color_1.hslToHex)({ h, s: surfaceSat, l }),
+        (0, color_1.hslToHex)({ h, s: SURFACE_SAT, l }),
     ]));
     const white = light.white;
     const { card, rise, tableHover } = cardPlane(namedSurfaces.main, white, planes);
     const primary = liftBrand(light.primary, white);
     const background = {
-        ...fromTargets(hueSource, raise(SURFACE_TARGETS, BACKGROUND_FILLS, rise), surfaceSat),
+        ...fromTargets(hueSource, raise(SURFACE_TARGETS, BACKGROUND_FILLS, rise), SURFACE_SAT),
         50: card,
     };
     const semantic = {
@@ -231,7 +231,7 @@ function buildDarkPalette(light, { planes = "lifted" } = {}) {
         border: dividerRamp,
         boxborder: dividerRamp,
         table: {
-            hover: fromTargets(hueSource, tableHover, surfaceSat),
+            hover: fromTargets(hueSource, tableHover, SURFACE_SAT),
         },
         disabled: fromTargets(hueSource, DISABLED_TARGETS, DISABLED_SAT),
         accentText: (0, accentText_1.pickAccentText)(primary, namedSurfaces.main),

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

@@ -41,8 +41,9 @@ const solidFillRung = (scale, white, canvas) => {
 };
 exports.solidFillRung = solidFillRung;
 const steppedRung = (base, canvas, step) => {
-    const dir = (0, accentText_1.isDarkCanvas)(canvas) ? -100 : 100;
-    return Math.min(900, Math.max(50, base + dir * step));
+    const dir = (0, accentText_1.isDarkCanvas)(canvas) ? -1 : 1;
+    const index = RUNGS.indexOf(base) + dir * step;
+    return RUNGS[Math.min(RUNGS.length - 1, Math.max(0, index))];
 };
 const steppedTowardBase = (from, base) => RUNGS[RUNGS.indexOf(from) + (from > base ? -1 : 1)];
 /**

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

@@ -4,6 +4,7 @@ exports.withFocusRing = exports.buildFocusRing = exports.focusRingBackdrops = vo
 exports.settleBetween = settleBetween;
 const color_1 = require("./color");
 const outlineRung_1 = require("./outlineRung");
+const planeStep_1 = require("./planeStep");
 /** Same lightness granularity `buildDarkPalette` walks its accents at. */
 const LIGHTNESS_STEP = 0.5;
 // NOTE: not settleAcross — a ring squeezed between a light canvas and a dark fill needs the closest color that clears both, not a per-surface lift.
@@ -25,10 +26,12 @@ function settleBetween(hex, backdrops, target = outlineRung_1.AA_NON_TEXT) {
     const worst = (candidate) => Math.min(...backdrops.map((backdrop) => (0, color_1.contrastRatio)(candidate, backdrop)));
     return worst(ends[0]) >= worst(ends[1]) ? ends[0] : ends[1];
 }
-// NOTE: only canvas + card surface — including the fill or every named surface leaves no solvable hue.
+// NOTE: canvas, card and the table header band — including the fill or every named surface leaves no solvable hue.
 const focusRingBackdrops = (source) => [
     source.backgroundColor.main,
     source.background[50],
+    source.backgroundColor.tableHeader,
+    (0, planeStep_1.bandOn)(source.backgroundColor.tableHeader, source.background[50]),
 ];
 exports.focusRingBackdrops = focusRingBackdrops;
 // NOTE: replaces Chakra's stock ring (a fixed blue that measured under 2:1 on every brand).

package/dist/Theme/tokens/builders/paletteScale.d.ts

@@ -0,0 +1,2 @@
+import type { ColorScale, PaletteProps } from "../types";
+export declare const scaleNamed: (colors: PaletteProps, name: string) => ColorScale | undefined;

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.scaleNamed = void 0;
+const isColorScale = (value) => typeof value === "object" && value !== null && "500" in value;
+const scaleNamed = (colors, name) => {
+    const entries = colors;
+    const value = entries[name];
+    return isColorScale(value) ? value : undefined;
+};
+exports.scaleNamed = scaleNamed;

package/dist/Theme/tokens/types.d.ts

@@ -74,6 +74,7 @@ export type BoxShadowTokens = {
     error: string;
     default: string;
 };
+/** Full per-brand colour palette, one per brand per colour mode. */
 export type PaletteProps = {
     gradient: {
         from: string;

package/dist/Utils/accountHandoff.d.ts

@@ -1,4 +1,5 @@
 export declare function isAllowedReturnUrl(url: string): boolean;
+/** Fallback origin used when the return URL param is missing or disallowed. */
 export type ResolveReturnUrlOptions = {
     /** App-specific fallback (e.g. its own origin) used when the param is missing/disallowed. */
     defaultReturnUrl?: string;
@@ -17,12 +18,14 @@ export type AccountHandoffConfig = {
     /** Where Account returns the user to. Defaults to this app's own origin. */
     buildReturnUrl?: (orgId?: number | string | null) => string;
 };
+/** Query values carried to Account: source app, return URL, org and token. */
 export type AccountHandoffLinkOptions = {
     sourceApp?: string;
     returnUrl?: string;
     orgId?: number | string | null;
     token?: string | null;
 };
+/** Link options plus the user to open on the Account users page. */
 export type AccountHandoffUsersOptions = AccountHandoffLinkOptions & {
     userId?: number | string | null;
 };

package/dist/Utils/price.d.ts

@@ -1,3 +1,4 @@
+/** Currency and locale override the INR and en-IN defaults. */
 export type PriceFormatOptions = {
     currency?: string;
     locale?: string;

package/dist/Utils/tabular.d.ts

@@ -0,0 +1,30 @@
+/** One spreadsheet cell; `null` and `undefined` write an empty cell. */
+export type TabularCell = string | number | boolean | null | undefined;
+interface TabularColumnBase<Row, K extends keyof Row> {
+    /** Row field the cell reads, the same `key` a table column uses. */
+    readonly key: K;
+    /** Text of the header line. */
+    readonly header: string;
+    /** Turns the field into a cell; required when the field is not a scalar. */
+    readonly format?: (value: Row[K], row: Row) => TabularCell;
+    /** Default true: formula-like text gets a leading `'` so it is shown, not run. */
+    readonly escapeFormulas?: boolean;
+}
+/** One exported column; `format` is required when the field is not a scalar. */
+export type TabularColumn<Row> = {
+    [K in keyof Row & string]: Row[K] extends TabularCell ? TabularColumnBase<Row, K> : TabularColumnBase<Row, K> & {
+        readonly format: (value: Row[K], row: Row) => TabularCell;
+    };
+}[keyof Row & string];
+/** Options for `toCsv`. */
+export interface ToCsvOptions {
+    /** Prepends a UTF-8 byte-order mark so Excel reads non-ASCII. Default false. */
+    readonly bom?: boolean;
+}
+/** RFC 4180 CSV: header line, then one CRLF-separated line per row. */
+export declare function toCsv<Row extends object>(rows: readonly Row[], columns: readonly TabularColumn<Row>[], { bom }?: ToCsvOptions): string;
+/** Replaces path and reserved characters with `-`; caps at 80 characters, keeping the extension. */
+export declare function safeFileName(fileName: string): string;
+/** Saves `blob` as `safeFileName(fileName)`, then revokes its object URL. */
+export declare function downloadBlob(blob: Blob, fileName: string): void;
+export {};

package/dist/Utils/tabular.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toCsv = toCsv;
+exports.safeFileName = safeFileName;
+exports.downloadBlob = downloadBlob;
+const NEEDS_QUOTES = /[",\r\n]/;
+const FORMULA_TRIGGER = /^[=+\-@\t\r]/;
+const PLAIN_NUMBER = /^[+-]?(?:\d[\d,]*(?:\.\d*)?|\.\d+)%?$/;
+const BOM = "";
+const RESERVED_FILE_CHARS = /[\\/:*?"<>|\p{Cc}]/gu;
+const MAX_FILE_NAME = 80;
+const REVOKE_DELAY_MS = 1000;
+const quote = (text) => (NEEDS_QUOTES.test(text) ? `"${text.replace(/"/g, '""')}"` : text);
+const looksLikeFormula = (text) => FORMULA_TRIGGER.test(text) && !PLAIN_NUMBER.test(text);
+function cellText(value, escapeFormulas) {
+    if (value === null || value === undefined)
+        return "";
+    if (typeof value === "number")
+        return Number.isFinite(value) ? String(value) : "";
+    const text = String(value);
+    if (typeof value !== "string" || !escapeFormulas)
+        return text;
+    return looksLikeFormula(text) ? `'${text}` : text;
+}
+function readCell(row, column) {
+    const field = row[column.key];
+    const format = column.format;
+    return format === undefined ? field : format(field, row);
+}
+/** RFC 4180 CSV: header line, then one CRLF-separated line per row. */
+function toCsv(rows, columns, { bom = false } = {}) {
+    if (columns.length === 0)
+        return "";
+    const lines = [columns.map((column) => quote(column.header)).join(",")];
+    for (const row of rows) {
+        lines.push(columns.map((column) => quote(cellText(readCell(row, column), column.escapeFormulas !== false))).join(","));
+    }
+    return (bom ? BOM : "") + lines.join("\r\n");
+}
+/** Replaces path and reserved characters with `-`; caps at 80 characters, keeping the extension. */
+function safeFileName(fileName) {
+    const cleaned = fileName.replace(RESERVED_FILE_CHARS, "-").trim().replace(/^[.\s]+/, "");
+    if (cleaned === "")
+        return "export";
+    if (cleaned.length <= MAX_FILE_NAME)
+        return cleaned;
+    const dot = cleaned.lastIndexOf(".");
+    const extension = dot > 0 && cleaned.length - dot <= 8 ? cleaned.slice(dot) : "";
+    return cleaned.slice(0, MAX_FILE_NAME - extension.length).replace(/[\uD800-\uDBFF]$/, "") + extension;
+}
+/** Saves `blob` as `safeFileName(fileName)`, then revokes its object URL. */
+function downloadBlob(blob, fileName) {
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = safeFileName(fileName);
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+    setTimeout(() => URL.revokeObjectURL(url), REVOKE_DELAY_MS);
+}

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

@@ -7,6 +7,7 @@ import { isDarkCanvas } from "../../Theme/tokens/builders/accentText.js";
 import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
 import { reducedMotionSx } from "../../Theme/chakra/motion.js";
 import { accordionFocusRing, getAccordionHoverColors } from "./accordionColors.js";
+const HEADER_ACTION_RIGHT = "3.25rem";
 /** Chakra Accordion wrapper for header/content pairs; FilterSidebar composes this directly for its collapsible filter sections. */
 const Accordion = ({ allowMultiple, allowToggle, index, onChange, reduceMotion, items, ...rest }) => {
     const { colors } = useCustomTheme();
@@ -19,14 +20,16 @@ const Accordion = ({ allowMultiple, allowToggle, index, onChange, reduceMotion,
     return (_jsx(ChakraAccordian, { allowMultiple: allowMultiple, allowToggle: allowToggle, index: index, onChange: onChange, reduceMotion: reduceMotion, ...rest, children: items.map((item, idx) => {
             var _a;
             return (_jsx(AccordionItem, { border: "1px solid", borderColor: border, borderRadius: "xl", bg: colors.background[50], boxShadow: "none", mb: 3, overflow: "hidden", _last: { mb: 0 }, ...item.itemProps, sx: (_a = item.customStyles) === null || _a === void 0 ? void 0 : _a.itemStyle, children: ({ isExpanded }) => {
-                    var _a, _b, _c;
-                    return (_jsxs(_Fragment, { children: [_jsx("h2", { children: _jsxs(AccordionButton, { px: 4, py: 3, gap: 3, fontSize: "sm", fontWeight: 600, color: headingColor, bg: isExpanded ? expandedBg : "transparent", transition: transitionFor(["background-color"]), _hover: { bg: isExpanded ? expandedBg : softHover }, _focusVisible: focusRing, ...item.buttonProps, sx: {
-                                        ...reducedMotionSx(),
-                                        ...(_a = item.customStyles) === null || _a === void 0 ? void 0 : _a.buttonStyle,
-                                        "&:hover": {
-                                            ...(_b = item.customStyles) === null || _b === void 0 ? void 0 : _b.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: "lg", color: isExpanded ? colors.accentText : colors.textMuted, bg: isExpanded ? colors.primary.opacity[16] : "transparent", transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)", transition: transitionFor(["transform", "color", "background-color"], "base"), sx: reducedMotionSx(), children: _jsx(ChevronDown, { size: 16 }) })] }) }), _jsx(AccordionPanel, { px: 4, pt: 1, pb: 4, fontSize: "sm", lineHeight: "1.5", color: bodyColor, ...item.panelProps, sx: (_c = item.customStyles) === null || _c === void 0 ? void 0 : _c.panelStyle, children: item.content })] }));
+                    var _a, _b, _c, _d, _e;
+                    return (_jsxs(_Fragment, { children: [_jsxs(Box, { as: "h2", position: item.headerAction ? "relative" : undefined, sx: item.headerAction
+                                    ? { "&:hover > button": { background: isExpanded ? expandedBg : softHover, ...(_a = item.customStyles) === null || _a === void 0 ? void 0 : _a.hoverbuttonStyle } }
+                                    : undefined, children: [_jsxs(AccordionButton, { px: 4, py: 3, gap: 3, fontSize: "sm", fontWeight: 600, color: headingColor, bg: isExpanded ? expandedBg : "transparent", transition: transitionFor(["background-color"]), _hover: { bg: isExpanded ? expandedBg : softHover }, _focusVisible: focusRing, ...item.buttonProps, sx: {
+                                            ...reducedMotionSx(),
+                                            ...(_b = item.customStyles) === null || _b === void 0 ? void 0 : _b.buttonStyle,
+                                            "&:hover": {
+                                                ...(_c = item.customStyles) === null || _c === void 0 ? void 0 : _c.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: "lg", color: isExpanded ? colors.accentText : colors.textMuted, bg: isExpanded ? colors.primary.opacity[16] : "transparent", transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)", transition: transitionFor(["transform", "color", "background-color"], "base"), sx: reducedMotionSx(), children: _jsx(ChevronDown, { size: 16 }) })] }), item.headerAction && (_jsx(Flex, { position: "absolute", top: "50%", right: HEADER_ACTION_RIGHT, transform: "translateY(-50%)", align: "center", sx: (_d = item.customStyles) === null || _d === void 0 ? void 0 : _d.headerActionStyle, children: item.headerAction }))] }), _jsx(AccordionPanel, { px: 4, pt: 1, pb: 4, fontSize: "sm", lineHeight: "1.5", color: bodyColor, ...item.panelProps, sx: (_e = item.customStyles) === null || _e === void 0 ? void 0 : _e.panelStyle, children: item.content })] }));
                 } }, idx));
         }) }));
 };