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

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

@@ -372,4 +372,3 @@ declare const palette: {
     };
 };
 export default palette;
-//# sourceMappingURL=palette.light.d.ts.map

package/dist/Theme/tokens/brands/index.d.ts

@@ -25,4 +25,3 @@ export declare const lightPalettes: Record<ThemeName, PaletteProps>;
 export declare const darkPalettes: Record<ThemeName, PaletteProps>;
 export declare const palettes: Record<ThemeName, Record<ResolvedColorMode, PaletteProps>>;
 export declare const themeNames: ThemeName[];
-//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -372,4 +372,3 @@ declare const palette: {
     };
 };
 export default palette;
-//# sourceMappingURL=palette.light.d.ts.map

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/meadow/palette.dark.d.ts

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

package/dist/Theme/tokens/brands/meadow/palette.light.d.ts

@@ -372,4 +372,3 @@ declare const palette: {
     };
 };
 export default palette;
-//# sourceMappingURL=palette.light.d.ts.map

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

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

package/dist/Theme/tokens/brands/radiant/palette.light.d.ts

@@ -372,4 +372,3 @@ declare const palette: {
     };
 };
 export default palette;
-//# sourceMappingURL=palette.light.d.ts.map

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

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

package/dist/Theme/tokens/brands/rosewood/palette.light.d.ts

@@ -372,4 +372,3 @@ declare const palette: {
     };
 };
 export default palette;
-//# sourceMappingURL=palette.light.d.ts.map

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

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

package/dist/Theme/tokens/brands/skyline/palette.light.d.ts

@@ -372,4 +372,3 @@ declare const palette: {
     };
 };
 export default palette;
-//# sourceMappingURL=palette.light.d.ts.map

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

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

package/dist/Theme/tokens/brands/slate/palette.light.d.ts

@@ -372,4 +372,3 @@ declare const palette: {
     };
 };
 export default palette;
-//# sourceMappingURL=palette.light.d.ts.map

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

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

package/dist/Theme/tokens/brands/storefront/palette.light.d.ts

@@ -372,4 +372,3 @@ declare const palette: {
     };
 };
 export default palette;
-//# sourceMappingURL=palette.light.d.ts.map

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

@@ -201,4 +201,3 @@ declare const palette: {
     };
 };
 export default palette;
-//# sourceMappingURL=palette.dark.d.ts.map

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/brands/zinc/palette.light.d.ts

@@ -372,4 +372,3 @@ declare const palette: {
     };
 };
 export default palette;
-//# sourceMappingURL=palette.light.d.ts.map

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

@@ -19,6 +19,11 @@ declare const AA_NORMAL_TEXT = 4.5;
  * keep walking rather than crashing `contrastRatio` on `undefined`.
  */
 export declare const pickAccentText: (primary: ColorScale | undefined, canvas: string, mode: "light" | "dark") => string;
+/** Canvas assumed when no Pixelize theme is mounted. Never painted; only fed to contrast math. */
+export declare const DEFAULT_CANVAS = "#ffffff";
+/** Mode-stable ink absolutes, used when no theme supplies `colors.white` / `colors.black`. */
+export declare const DEFAULT_WHITE = "#ffffff";
+export declare const DEFAULT_BLACK = "#000000";
 /** Below this relative luminance a canvas is treated as dark. Well clear of both real canvases. */
 declare const DARK_CANVAS_LUMINANCE = 0.2;
 /** True when `canvas` is a dark surface. Lets style configs branch without threading color mode. */
@@ -53,4 +58,3 @@ export declare const onFilled: (fill: string, white: string, black: string) => s
  */
 export declare const onGradient: (from: string, to: string, white: string, black: string) => string;
 export { AA_NORMAL_TEXT, DARK_CANVAS_LUMINANCE };
-//# sourceMappingURL=accentText.d.ts.map

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DARK_CANVAS_LUMINANCE = exports.AA_NORMAL_TEXT = exports.onGradient = exports.onFilled = exports.accentTextOnCanvas = exports.isDarkCanvas = exports.pickAccentText = void 0;
+exports.DARK_CANVAS_LUMINANCE = exports.AA_NORMAL_TEXT = exports.onGradient = exports.onFilled = exports.accentTextOnCanvas = exports.isDarkCanvas = exports.DEFAULT_BLACK = exports.DEFAULT_WHITE = exports.DEFAULT_CANVAS = exports.pickAccentText = void 0;
 const color_1 = require("./color");
 /** WCAG AA for normal-size text. Accent-as-text must clear this against the canvas. */
 const AA_NORMAL_TEXT = 4.5;
@@ -52,6 +52,11 @@ const pickAccentText = (primary, canvas, mode) => {
     return safeInk();
 };
 exports.pickAccentText = pickAccentText;
+/** Canvas assumed when no Pixelize theme is mounted. Never painted; only fed to contrast math. */
+exports.DEFAULT_CANVAS = "#ffffff";
+/** Mode-stable ink absolutes, used when no theme supplies `colors.white` / `colors.black`. */
+exports.DEFAULT_WHITE = "#ffffff";
+exports.DEFAULT_BLACK = "#000000";
 /** Below this relative luminance a canvas is treated as dark. Well clear of both real canvases. */
 const DARK_CANVAS_LUMINANCE = 0.2;
 exports.DARK_CANVAS_LUMINANCE = DARK_CANVAS_LUMINANCE;

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

@@ -13,4 +13,3 @@ export declare function buildPrimaryOpacity(primary500: string): {
 };
 /** Tint used for focus rings / primary-tinted shadows (matches ~28% alpha pattern). */
 export declare function buildPrimaryShadowTint(primary500: string): string;
-//# sourceMappingURL=buildBrandTokens.d.ts.map

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

@@ -20,4 +20,3 @@ export declare const accentLightnessDelta: (accent500: string, white: string) =>
 export declare const liftScale: (scale: ColorScale, delta: number) => ColorScale;
 export declare function buildDarkPalette(light: PaletteProps): PaletteProps;
 export default buildDarkPalette;
-//# sourceMappingURL=buildDarkPalette.d.ts.map

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/Theme/tokens/builders/chartColorsFromTheme.d.ts

@@ -1,7 +1,29 @@
 import type { PaletteProps } from "../types";
 export type ThemeColorPalette = PaletteProps;
-/** Default multi-series palette for Apex charts (strings required by ApexCharts). */
+export type ChartMode = "light" | "dark";
+/**
+ * Categorical series palette. Generated in OKLCH on one fixed hue sequence per mode, so a
+ * theme switch never repaints a series. Verified with the six-check validator: lightness
+ * band, chroma floor, CVD separation, normal-vision floor and contrast all pass on both
+ * surfaces. Worst adjacent protan/deutan separation is 10.9 (light) / 11.6 (dark) OKLab
+ * dE, against a target of 8 — the previous four-color default scored 4.8 and was
+ * unreadable for red-green color blindness. Re-run the validator before editing a value.
+ */
+export declare const CATEGORICAL_SERIES: Record<ChartMode, readonly string[]>;
+export declare const chartMode: (colors: ThemeColorPalette) => ChartMode;
+export declare function getCategoricalSeriesColors(colors: ThemeColorPalette): string[];
 export declare function getDefaultSeriesColors(colors: ThemeColorPalette): string[];
+/** Ink, grid and surface tokens every chart type shares. */
+export declare function chartInk(colors: ThemeColorPalette): {
+    surface: string;
+    text: string;
+    muted: string;
+    grid: string;
+    axis: string;
+    tooltipBg: string;
+};
+/** Ink for a label drawn on top of a filled mark. Always clears AA. */
+export declare const labelOnSeries: (fill: string, colors: ThemeColorPalette) => string;
 export declare function mergeChartTitleStyle(colors: ThemeColorPalette, titleStyle?: {
     color?: string;
     fontSize?: string;
@@ -14,4 +36,3 @@ export declare function mergeChartTitleStyle(colors: ThemeColorPalette, titleSty
     fontFamily: string;
 };
 export declare function chartAxisLabelColor(colors: ThemeColorPalette): string;
-//# sourceMappingURL=chartColorsFromTheme.d.ts.map

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

@@ -1,26 +1,56 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.labelOnSeries = exports.chartMode = exports.CATEGORICAL_SERIES = void 0;
+exports.getCategoricalSeriesColors = getCategoricalSeriesColors;
 exports.getDefaultSeriesColors = getDefaultSeriesColors;
+exports.chartInk = chartInk;
 exports.mergeChartTitleStyle = mergeChartTitleStyle;
 exports.chartAxisLabelColor = chartAxisLabelColor;
-/** Default multi-series palette for Apex charts (strings required by ApexCharts). */
+const accentText_1 = require("./accentText");
+/**
+ * Categorical series palette. Generated in OKLCH on one fixed hue sequence per mode, so a
+ * theme switch never repaints a series. Verified with the six-check validator: lightness
+ * band, chroma floor, CVD separation, normal-vision floor and contrast all pass on both
+ * surfaces. Worst adjacent protan/deutan separation is 10.9 (light) / 11.6 (dark) OKLab
+ * dE, against a target of 8 — the previous four-color default scored 4.8 and was
+ * unreadable for red-green color blindness. Re-run the validator before editing a value.
+ */
+exports.CATEGORICAL_SERIES = {
+    light: ["#009068", "#3177dc", "#5a8b00", "#8b5dce", "#9b7300", "#af4da9", "#cb4a2a", "#009d82"],
+    dark: ["#00976d", "#377ee3", "#5f9200", "#9163d5", "#a27900", "#b654b0", "#d25030", "#00aa8e"],
+};
+const chartMode = (colors) => (0, accentText_1.isDarkCanvas)(colors.backgroundColor.main) ? "dark" : "light";
+exports.chartMode = chartMode;
+function getCategoricalSeriesColors(colors) {
+    return [...exports.CATEGORICAL_SERIES[(0, exports.chartMode)(colors)]];
+}
 function getDefaultSeriesColors(colors) {
-    return [
-        colors.primary[500],
-        colors.semantic.error[500],
-        colors.semantic.success[500],
-        colors.orange[500],
-    ];
+    return getCategoricalSeriesColors(colors);
+}
+/** Ink, grid and surface tokens every chart type shares. */
+function chartInk(colors) {
+    const surface = colors.backgroundColor.main;
+    return {
+        surface,
+        text: colors.text[900],
+        muted: colors.text[500],
+        grid: colors.border[500],
+        axis: colors.text[500],
+        tooltipBg: colors.backgroundColor.secondary,
+    };
 }
+/** Ink for a label drawn on top of a filled mark. Always clears AA. */
+const labelOnSeries = (fill, colors) => (0, accentText_1.onFilled)(fill, colors.white, colors.black);
+exports.labelOnSeries = labelOnSeries;
 function mergeChartTitleStyle(colors, titleStyle) {
     return {
-        fontSize: "16px",
+        fontSize: "14px",
         fontWeight: 600,
-        fontFamily: "Arial",
-        color: colors.primary[500],
+        fontFamily: "inherit",
+        color: colors.text[900],
         ...titleStyle,
     };
 }
 function chartAxisLabelColor(colors) {
-    return colors.gray[700];
+    return colors.text[500];
 }

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

@@ -47,4 +47,3 @@ export declare function mix(a: string, b: string, weight: number): string;
 export declare function relativeLuminance(hex: string): number;
 /** WCAG 2.1 contrast ratio, 1–21. AA body text needs >= 4.5. */
 export declare function contrastRatio(a: string, b: string): number;
-//# sourceMappingURL=color.d.ts.map

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

@@ -3,4 +3,3 @@ export * from "./buildBrandTokens";
 export * from "./buildDarkPalette";
 export * from "./chartColorsFromTheme";
 export * from "./color";
-//# sourceMappingURL=index.d.ts.map

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

@@ -32,4 +32,3 @@ export declare function withOutlineRung(palette: PaletteProps, mode: ResolvedCol
  * its OWN list background, not necessarily the page canvas.
  */
 export declare function resolveHoverTint(seed: string, restSurface: string): string;
-//# sourceMappingURL=outlineRung.d.ts.map

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

@@ -32,4 +32,3 @@ export declare const AVATAR_SEEDS: readonly ["#ef4444", "#f97316", "#eab308", "#
 export declare function avatarFillFor(seedText: string): string;
 /** True when `fg` clears the body-text bar on `bg` — exported for consumer assertions. */
 export declare const meetsBodyText: (fg: string, bg: string) => boolean;
-//# sourceMappingURL=statusTone.d.ts.map

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

@@ -12,4 +12,3 @@ export * from "./types";
 export * from "./primitives";
 export * from "./brands";
 export * from "./builders";
-//# sourceMappingURL=index.d.ts.map

package/dist/Theme/tokens/primitives/breakpoints.d.ts

@@ -6,4 +6,3 @@ declare const breakpoints: {
     "2xl": string;
 };
 export default breakpoints;
-//# sourceMappingURL=breakpoints.d.ts.map

package/dist/Theme/tokens/primitives/index.d.ts

@@ -7,4 +7,3 @@ export { default as breakpoints } from "./breakpoints";
 export { default as lineHeights } from "./lineHeights";
 export { default as letterSpacings } from "./letterSpacings";
 export { default as typography, fonts, fontSizes, fontWeights } from "./typography";
-//# sourceMappingURL=index.d.ts.map

package/dist/Theme/tokens/primitives/letterSpacings.d.ts

@@ -7,4 +7,3 @@ declare const letterSpacings: {
     widest: string;
 };
 export default letterSpacings;
-//# sourceMappingURL=letterSpacings.d.ts.map

package/dist/Theme/tokens/primitives/lineHeights.d.ts

@@ -16,4 +16,3 @@ declare const lineHeights: {
     "10": string;
 };
 export default lineHeights;
-//# sourceMappingURL=lineHeights.d.ts.map

package/dist/Theme/tokens/primitives/radii.d.ts

@@ -10,4 +10,3 @@ declare const radii: {
     full: string;
 };
 export default radii;
-//# sourceMappingURL=radii.d.ts.map

package/dist/Theme/tokens/primitives/shadows.d.ts

@@ -13,4 +13,3 @@ declare const shadows: {
     darkLg: string;
 };
 export default shadows;
-//# sourceMappingURL=shadows.d.ts.map

package/dist/Theme/tokens/primitives/sizes.d.ts

@@ -60,4 +60,3 @@ declare const sizes: {
     96: string;
 };
 export default sizes;
-//# sourceMappingURL=sizes.d.ts.map

package/dist/Theme/tokens/primitives/space.d.ts

@@ -31,4 +31,3 @@ declare const space: {
     96: string;
 };
 export default space;
-//# sourceMappingURL=space.d.ts.map

package/dist/Theme/tokens/primitives/typography.d.ts

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

package/dist/Theme/tokens/primitives/zIndices.d.ts

@@ -14,4 +14,3 @@ declare const zIndices: {
     tooltip: number;
 };
 export default zIndices;
-//# sourceMappingURL=zIndices.d.ts.map

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

@@ -113,4 +113,3 @@ export type ThemeName = "lavender" | "meadow" | "radiant" | "skyline" | "slate"
 export type ColorMode = "light" | "dark" | "system";
 /** Color mode after `system` has been resolved against the OS. */
 export type ResolvedColorMode = "light" | "dark";
-//# sourceMappingURL=types.d.ts.map

package/dist/Theme/useCustomTheme.d.ts

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

package/dist/Utils/accountHandoff.d.ts

@@ -51,4 +51,3 @@ export type AccountHandoff = {
     navigateToOrganizationPage: (options?: AccountHandoffLinkOptions) => void;
 };
 export declare function createAccountHandoff(config: AccountHandoffConfig): AccountHandoff;
-//# sourceMappingURL=accountHandoff.d.ts.map

package/dist/Utils/functions.d.ts

@@ -1,2 +1 @@
 export declare function toWords(str: string): string;
-//# sourceMappingURL=functions.d.ts.map

package/dist/Utils/mergeRefs.d.ts

@@ -8,4 +8,3 @@ export declare function setRef<T>(ref: React.Ref<T> | undefined, value: T | null
  */
 export declare function mergeRefs<T>(...refs: Array<React.Ref<T> | undefined>): (value: T | null) => void;
 export default mergeRefs;
-//# sourceMappingURL=mergeRefs.d.ts.map

package/dist/Utils/planBadge.d.ts

@@ -36,4 +36,3 @@ export type PlanBadgeResult = {
  * the same org.
  */
 export declare function resolvePlanBadge(input: PlanBadgeInput): PlanBadgeResult;
-//# sourceMappingURL=planBadge.d.ts.map

package/dist/Utils/planExpiry.d.ts

@@ -32,4 +32,3 @@ export declare function formatPlanRemaining(expiryDate: PlanExpiryInput, now?: D
  * lapse is rather than a bare "expired".
  */
 export declare function formatPlanElapsed(expiryDate: PlanExpiryInput, now?: Date): string;
-//# sourceMappingURL=planExpiry.d.ts.map

package/dist/Utils/rafThrottle.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 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;
+};

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

@@ -75,4 +75,3 @@ export declare const TableCellCalculation: ({ isFrozen, columnWidths, headerInde
  */
 export declare function globalSearchFilter<T extends Record<string, unknown>>(data: T[], query: string): T[];
 export {};
-//# sourceMappingURL=table.d.ts.map

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");