pixelize-design-library 2.4.2-beta.32 → 2.4.2-beta.33

package/dist/Theme/chakra/createBrandTheme.js

@@ -8,7 +8,7 @@ const react_1 = require("@chakra-ui/react");
 const common_web_1 = __importDefault(require("./common.web"));
 const fonts_web_1 = __importDefault(require("./fonts.web"));
 const componentStyles_1 = require("./componentStyles");
-const accentText_1 = require("../tokens/builders/accentText");
+const filledSurface_1 = require("../tokens/builders/filledSurface");
 const scrollbar_1 = require("../tokens/builders/scrollbar");
 const focusRing_styles_1 = require("./focusRing.styles");
 /**
@@ -88,14 +88,20 @@ const createBrandTheme = (palette, options = {}) => {
                         // selecting text anywhere (e.g. a table cell) shows a stray white/lavender patch on
                         // the dark canvas. Brand it instead, with WCAG-safe ink via the same `onFilled` math
                         // used for buttons/badges.
-                        "::selection": {
-                            background: palette.primary[500],
-                            color: (0, accentText_1.onFilled)(palette.primary[500], palette.white, palette.black),
-                        },
-                        "::-moz-selection": {
-                            background: palette.primary[500],
-                            color: (0, accentText_1.onFilled)(palette.primary[500], palette.white, palette.black),
-                        },
+                        "::selection": (() => {
+                            const solid = (0, filledSurface_1.resolveFilledSurface)(palette.primary, palette);
+                            return {
+                                background: solid.fill,
+                                color: solid.color,
+                            };
+                        })(),
+                        "::-moz-selection": (() => {
+                            const solid = (0, filledSurface_1.resolveFilledSurface)(palette.primary, palette);
+                            return {
+                                background: solid.fill,
+                                color: solid.color,
+                            };
+                        })(),
                         // `color-scheme: dark` gives WebKit/Blink a dark scrollbar by default, but it's the
                         // OS's generic dark gray, not brand-aware.
                         ...(0, scrollbar_1.globalScrollbarStyles)(palette),

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

@@ -0,0 +1,29 @@
+import type { ColorScale, PaletteProps } from "../types";
+/** Resolved fill + ink for a solid surface, including hover/active steps. */
+export type FilledSurface = {
+    rung: keyof ColorScale;
+    fill: string;
+    color: string;
+    hoverRung: keyof ColorScale;
+    hoverFill: string;
+    hoverColor: string;
+    activeRung: keyof ColorScale;
+    activeFill: string;
+    activeColor: string;
+};
+/**
+ * Lightest rung on `scale` that still carries `white` at WCAG AA. Prefers [500] when it already
+ * passes; otherwise walks toward darker rungs. Used for solid fills on buttons, tags, badges and
+ * table status pills so consumers never get black ink on a saturated fill when white is achievable.
+ */
+export declare const solidFillRung: (scale: ColorScale, white: string) => keyof ColorScale;
+/** Hover (step 0) or active (step 1) fill rung, one step darker than `solidFillRung`. */
+export declare const darkerFillRung: (scale: ColorScale, canvas: string, white: string, step: 0 | 1) => keyof ColorScale;
+/** Label ink for a specific fill swatch — always `onFilled`, exported for style configs. */
+export declare const labelOnFill: (fill: string, white: string, black: string) => string;
+/**
+ * Consumer-facing helper: given any `ColorScale` (primary, red, semantic.error, …), return the
+ * fill rung and matching ink for solid / hover / active states. Use this whenever you paint a
+ * `bg` from a scale — never pair `scale[500]` with `onFilled` or `colors.white` by hand.
+ */
+export declare const resolveFilledSurface: (scale: ColorScale, colors: Pick<PaletteProps, "white" | "black" | "backgroundColor">) => FilledSurface;

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

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveFilledSurface = exports.labelOnFill = exports.darkerFillRung = exports.solidFillRung = void 0;
+const color_1 = require("./color");
+const accentText_1 = require("./accentText");
+const RUNGS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
+/**
+ * The rung one/two steps DARKER than the accent — what a filled button's hover/active needs so its
+ * white label stays legible.
+ *
+ * Every dark scale runs dark -> light across 50 -> 900 (brand scales are rebuilt that way, utility
+ * hues are reversed), the mirror of light mode. So "darker than [500]" is [600]/[700] in light but
+ * [400]/[300] in dark.
+ */
+const FILL_STEP_RUNGS = { light: [600, 700], dark: [400, 300] };
+/**
+ * Lightest rung on `scale` that still carries `white` at WCAG AA. Prefers [500] when it already
+ * passes; otherwise walks toward darker rungs. Used for solid fills on buttons, tags, badges and
+ * table status pills so consumers never get black ink on a saturated fill when white is achievable.
+ */
+const solidFillRung = (scale, white) => {
+    if ((0, color_1.contrastRatio)(scale[500], white) >= accentText_1.AA_NORMAL_TEXT)
+        return 500;
+    const passing = RUNGS.filter((r) => scale[r] && (0, color_1.contrastRatio)(scale[r], white) >= accentText_1.AA_NORMAL_TEXT);
+    if (!passing.length)
+        return 500;
+    return passing.reduce((a, b) => (0, color_1.contrastRatio)(scale[a], white) <= (0, color_1.contrastRatio)(scale[b], white) ? a : b);
+};
+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));
+};
+/** Hover (step 0) or active (step 1) fill rung, one step darker than `solidFillRung`. */
+const darkerFillRung = (scale, canvas, white, step) => {
+    const base = (0, exports.solidFillRung)(scale, white);
+    if (base === 500) {
+        const mode = (0, accentText_1.isDarkCanvas)(canvas) ? "dark" : "light";
+        return FILL_STEP_RUNGS[mode][step];
+    }
+    const stepped = steppedRung(base, canvas, step === 0 ? 1 : 2);
+    return stepped;
+};
+exports.darkerFillRung = darkerFillRung;
+/** Label ink for a specific fill swatch — always `onFilled`, exported for style configs. */
+const labelOnFill = (fill, white, black) => (0, accentText_1.onFilled)(fill, white, black);
+exports.labelOnFill = labelOnFill;
+/**
+ * Consumer-facing helper: given any `ColorScale` (primary, red, semantic.error, …), return the
+ * fill rung and matching ink for solid / hover / active states. Use this whenever you paint a
+ * `bg` from a scale — never pair `scale[500]` with `onFilled` or `colors.white` by hand.
+ */
+const resolveFilledSurface = (scale, colors) => {
+    const { white, black, backgroundColor } = colors;
+    const canvas = backgroundColor.main;
+    const rung = (0, exports.solidFillRung)(scale, white);
+    const fill = scale[rung];
+    const hoverRung = (0, exports.darkerFillRung)(scale, canvas, white, 0);
+    const hoverFill = scale[hoverRung];
+    const activeRung = (0, exports.darkerFillRung)(scale, canvas, white, 1);
+    const activeFill = scale[activeRung];
+    return {
+        rung,
+        fill,
+        color: (0, exports.labelOnFill)(fill, white, black),
+        hoverRung,
+        hoverFill,
+        hoverColor: (0, exports.labelOnFill)(hoverFill, white, black),
+        activeRung,
+        activeFill,
+        activeColor: (0, exports.labelOnFill)(activeFill, white, black),
+    };
+};
+exports.resolveFilledSurface = resolveFilledSurface;

package/dist/Utils/table.js

@@ -45,6 +45,7 @@ exports.useDebounce = useDebounce;
 exports.globalSearchFilter = globalSearchFilter;
 const react_1 = __importStar(require("react"));
 const accentText_1 = require("../Theme/tokens/builders/accentText");
+const filledSurface_1 = require("../Theme/tokens/builders/filledSurface");
 const statusTone_1 = require("../Theme/tokens/builders/statusTone");
 // Built once, not per comparison: sorting 10k rows runs this ~130k times, and constructing a
 // collator is orders of magnitude dearer than using one.
@@ -117,11 +118,13 @@ function buildTablePalette(theme) {
     ];
     return scales.map((scale) => {
         const tone = (0, statusTone_1.resolveStatusTone)(scale, mode);
+        const solidRung = (0, filledSurface_1.solidFillRung)(scale, c.white);
+        const solid = scale[solidRung];
         return {
-            solid: scale[500],
+            solid,
             soft: tone.bg,
             text: tone.fg,
-            onSolid: (0, accentText_1.onFilled)(scale[500], c.white, c.black),
+            onSolid: (0, filledSurface_1.labelOnFill)(solid, c.white, c.black),
         };
     });
 }

package/dist/esm/Components/Button/Button.styles.js

@@ -1,5 +1,5 @@
-import { accentTextOnCanvas, isDarkCanvas, onFilled } from "../../Theme/tokens/builders/accentText.js";
-import { solidRung, darkerFillRung } from "../../Theme/tokens/builders/solidFillRung.js";
+import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { darkerFillRung, labelOnFill, solidFillRung, } from "../../Theme/tokens/builders/filledSurface.js";
 import { resolveGradient, gradientCss } from "../../Theme/tokens/builders/gradientInk.js";
 import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
 /**
@@ -19,14 +19,15 @@ const onCanvasHoverBg = (theme, colorScheme, step) => {
     const scale = theme.colors[colorScheme];
     return "opacity" in scale ? scale.opacity[step] : scale[50];
 };
-const buttonSolidRung = (theme, colorScheme) => solidRung(theme.colors[colorScheme], theme.colors.white);
+const swatch = (theme, colorScheme) => theme.colors[colorScheme];
+const solidRung = (theme, colorScheme) => solidFillRung(swatch(theme, colorScheme), theme.colors.white);
 const darkerFill = (theme, colorScheme, step) => {
-    const scale = theme.colors[colorScheme];
-    const isDark = isDarkCanvas(theme.colors.backgroundColor.main);
-    return scale[darkerFillRung(scale, theme.colors.white, isDark, step)];
+    const scale = swatch(theme, colorScheme);
+    const rung = darkerFillRung(scale, theme.colors.backgroundColor.main, theme.colors.white, step);
+    return scale[rung];
 };
 /** Label for the solid variant's filled bg — derived from THAT fill, since hover/active swap it. */
-const labelFor = (theme, fill) => onFilled(fill, theme.colors.white, theme.colors.black);
+const labelFor = (theme, fill) => labelOnFill(fill, theme.colors.white, theme.colors.black);
 /**
  * The two-tone `:focus-visible` ring, from the palette's derived `focusRing` pair.
  *
@@ -52,7 +53,7 @@ export const Button = {
     }),
     variants: {
         solid: ({ theme, colorScheme = "primary" }) => {
-            const fill = theme.colors[colorScheme][buttonSolidRung(theme, colorScheme)];
+            const fill = theme.colors[colorScheme][solidRung(theme, colorScheme)];
             const hoverFill = darkerFill(theme, colorScheme, 0);
             const activeFill = darkerFill(theme, colorScheme, 1);
             const hoverLabel = labelFor(theme, hoverFill);
@@ -86,7 +87,7 @@ export const Button = {
         },
         outline: ({ theme, colorScheme = "primary" }) => {
             // Same rung as `solid`'s fill, not raw [500] — keeps hover bg AA-safe for white text.
-            const hoverFill = theme.colors[colorScheme][buttonSolidRung(theme, colorScheme)];
+            const hoverFill = theme.colors[colorScheme][solidRung(theme, colorScheme)];
             const activeFill = darkerFill(theme, colorScheme, 0);
             const ink = onCanvasText(theme, colorScheme);
             return {

package/dist/esm/Components/Card/PaymentCard/PaymentCard.js

@@ -2,18 +2,24 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { Box, Badge, Flex, GridItem, Heading, Icon, Text, VStack, Skeleton, SkeletonText, } from "@chakra-ui/react";
 import { Check } from "lucide-react";
 import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
-import { onFilled } from "../../../Theme/tokens/builders/accentText.js";
+import { resolveFilledSurface } from "../../../Theme/tokens/builders/filledSurface.js";
 import Button from "../../Button/Button.js";
 const getCardStyles = (isActive, isNextUpgrade, popular, theme) => {
-    const withOnButtonColor = (styles) => ({
-        ...styles,
-        onButtonColor: onFilled(styles.buttonColor, theme.colors.white, theme.colors.black),
-    });
+    const withOnButtonColor = (styles) => {
+        const scale = theme.colors[styles.buttonScale];
+        const solid = resolveFilledSurface(scale, theme.colors);
+        return {
+            ...styles,
+            buttonColor: solid.fill,
+            onButtonColor: solid.color,
+        };
+    };
     if (isActive) {
         return withOnButtonColor({
             badgeText: "Active Plan",
             badgeColor: `0.125rem solid ${theme.colors.green[500]}`,
             buttonColor: theme.colors.green[500],
+            buttonScale: "green",
             buttonColor50: theme.colors.green[50],
             colorScheme: "green",
         });
@@ -23,6 +29,7 @@ const getCardStyles = (isActive, isNextUpgrade, popular, theme) => {
             badgeText: "Upgrade Your Plan",
             badgeColor: `0.125rem solid ${theme.colors.primary[500]}`,
             buttonColor: theme.colors.primary[500],
+            buttonScale: "primary",
             buttonColor50: theme.colors.primary[50],
             colorScheme: "primary",
         });
@@ -32,6 +39,7 @@ const getCardStyles = (isActive, isNextUpgrade, popular, theme) => {
             badgeText: "Most Popular",
             badgeColor: `0.125rem solid ${theme.colors.primary[500]}`,
             buttonColor: theme.colors.primary[500],
+            buttonScale: "primary",
             buttonColor50: theme.colors.primary[50],
             colorScheme: "primary",
         });
@@ -40,6 +48,7 @@ const getCardStyles = (isActive, isNextUpgrade, popular, theme) => {
         badgeText: "",
         badgeColor: "",
         buttonColor: theme.colors.primary[500],
+        buttonScale: "primary",
         buttonColor50: theme.colors.primary[50],
         colorScheme: "primary",
     });

package/dist/esm/Components/Common/ErrorComponent.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { HStack, Text } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-import { onFilled } from "../../Theme/tokens/builders/accentText.js";
+import { resolveFilledSurface } from "../../Theme/tokens/builders/filledSurface.js";
 const ErrorComponent = ({ error, errorClassName, }) => {
     const { colors } = useCustomTheme();
-    const errorFill = colors.semanticText.error;
-    // errorFill is ink, not a fill tuned to carry a mark — pick the mark's ink structurally.
-    const markInk = onFilled(errorFill, colors.white, colors.black);
-    return (_jsxs(HStack, { as: "p", align: "flex-start", spacing: 1, mt: 1, fontSize: "sm", color: errorFill, className: errorClassName, children: [_jsxs("svg", { width: "12", height: "12", viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true, children: [_jsx("circle", { cx: "50", cy: "50", r: "50", fill: errorFill }), _jsx("rect", { x: "46", y: "40", width: "8", height: "30", rx: "2", fill: markInk }), _jsx("circle", { cx: "50", cy: "28", r: "4", fill: markInk })] }), _jsx(Text, { as: "span", children: error })] }));
+    const errorText = colors.semanticText.error;
+    const errorSolid = resolveFilledSurface(colors.semantic.error, colors);
+    const errorFill = errorSolid.fill;
+    const markInk = errorSolid.color;
+    return (_jsxs(HStack, { as: "p", align: "flex-start", spacing: 1, mt: 1, fontSize: "sm", color: errorText, className: errorClassName, children: [_jsxs("svg", { width: "12", height: "12", viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true, children: [_jsx("circle", { cx: "50", cy: "50", r: "50", fill: errorFill }), _jsx("rect", { x: "46", y: "40", width: "8", height: "30", rx: "2", fill: markInk }), _jsx("circle", { cx: "50", cy: "28", r: "4", fill: markInk })] }), _jsx(Text, { as: "span", children: error })] }));
 };
 export default ErrorComponent;

package/dist/esm/Components/DatePicker/CalendarPanel.js

@@ -4,7 +4,7 @@ import { format, startOfMonth, endOfMonth, startOfWeek, endOfWeek, addDays } fro
 import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 import Button from "../Button/Button.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-import { onFilled } from "../../Theme/tokens/builders/accentText.js";
+import { resolveFilledSurface } from "../../Theme/tokens/builders/filledSurface.js";
 import { DAY_CLASS, dayAccessibleName, dayStateClassName, resolveDayStateVisual, } from "./dayStates.js";
 export const CalendarPanel = ({ currentMonth, setCurrentMonth, today, isRange, tempDate, tempRangeStart, tempRangeEnd, isSameDay, isBefore, isAfter, minDate, maxDate, disablePastDates, disableFutureDates, disableToday, onDaySelect, hoveredDate, onDayHover, renderWeekdays, dayStates, renderDayContent, }) => {
     const theme = useCustomTheme();
@@ -95,16 +95,15 @@ export const CalendarPanel = ({ currentMonth, setCurrentMonth, today, isRange, t
                 // Solid fill (selected/range-endpoint) needs the ink checked against that
                 // specific fill — `primary[500]` doesn't reliably clear AA for white text on
                 // every brand/mode (same gap the solid Button variant already accounts for).
-                const solidFill = theme.colors.primary[500];
-                const solidHoverFill = theme.colors.primary[600];
+                const primarySolid = resolveFilledSurface(theme.colors.primary, theme.colors);
+                const solidFill = primarySolid.fill;
+                const solidHoverFill = primarySolid.hoverFill;
                 const circleColor = circleSolid
-                    ? onFilled(solidFill, theme.colors.white, theme.colors.black)
+                    ? primarySolid.color
                     : isInCurrentMonth
                         ? theme.colors.text[700]
                         : theme.colors.gray[400];
-                const circleHoverColor = circleSolid
-                    ? onFilled(solidHoverFill, theme.colors.white, theme.colors.black)
-                    : circleColor;
+                const circleHoverColor = circleSolid ? primarySolid.hoverColor : circleColor;
                 const circleBorder = circleSolid
                     ? "1px solid transparent"
                     : isTentativeEnd

package/dist/esm/Components/FilePreview/FilePreview.js

@@ -4,6 +4,7 @@ import { Box, Flex, IconButton, Image, Modal, ModalBody, ModalCloseButton, Modal
 import { motion } from "framer-motion";
 import { Download, Eye, FileQuestion, Minus, Plus, RotateCw, } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { labelOnFill, solidFillRung } from "../../Theme/tokens/builders/filledSurface.js";
 import ToolTip from "../ToolTip/ToolTip.js";
 const MotionContent = motion(ModalContent);
 const inferKind = (url, fileName) => {
@@ -56,7 +57,7 @@ export const FilePreview = ({ isOpen, onClose, fileUrl, fileName, fileType, hide
         if (kind === "video") {
             return (_jsx(Box, { as: "video", src: fileUrl, controls: true, width: "100%", borderRadius: "lg" }));
         }
-        return (_jsxs(Flex, { direction: "column", align: "center", justify: "center", py: 12, gap: 3, children: [_jsx(FileQuestion, { size: 48, color: theme.colors.textMuted }), _jsx(Text, { color: theme.colors.textMuted, fontSize: "sm", children: "Preview isn't available for this file type." }), !hideDownload && (_jsxs(Flex, { as: "button", align: "center", gap: 2, px: 4, py: 2, borderRadius: "lg", bg: theme.colors.primary[500], color: theme.colors.onPrimary, fontSize: "sm", fontWeight: 500, onClick: () => downloadFile(fileUrl, fileName), children: [_jsx(Download, { size: 16 }), " Download file"] }))] }));
+        return (_jsxs(Flex, { direction: "column", align: "center", justify: "center", py: 12, gap: 3, children: [_jsx(FileQuestion, { size: 48, color: theme.colors.textMuted }), _jsx(Text, { color: theme.colors.textMuted, fontSize: "sm", children: "Preview isn't available for this file type." }), !hideDownload && (_jsxs(Flex, { as: "button", align: "center", gap: 2, px: 4, py: 2, borderRadius: "lg", bg: theme.colors.primary[solidFillRung(theme.colors.primary, theme.colors.white)], color: labelOnFill(theme.colors.primary[solidFillRung(theme.colors.primary, theme.colors.white)], theme.colors.white, theme.colors.black), fontSize: "sm", fontWeight: 500, onClick: () => downloadFile(fileUrl, fileName), children: [_jsx(Download, { size: 16 }), " Download file"] }))] }));
     };
     return (_jsxs(Modal, { isOpen: isOpen, onClose: handleClose, size: size, isCentered: true, children: [_jsx(ModalOverlay, { bg: "blackAlpha.600", backdropFilter: "blur(4px)" }), _jsxs(MotionContent
             // Chakra's default Modal drives its bg off `--modal-bg`, which flips to

package/dist/esm/Components/KanbanBoard/KanbanActions/KanbanActions.js

@@ -4,10 +4,9 @@ import Select from "../../Select/Select.js";
 import { CirclePlus, SquarePen } from "lucide-react";
 import VeritcalDivider from "../../Divider/Divider.js";
 import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
-import { onFilled } from "../../../Theme/tokens/builders/accentText.js";
 import Button from "../../Button/Button.js";
 const KanbanActions = ({ options, onSelectChange, onEdit, onCreate, }) => {
     const { colors } = useCustomTheme();
-    return (_jsxs(Box, { display: "flex", alignItems: "center", gap: "0.625rem", children: [_jsx(Select, { options: options, placeholder: "Filter by Status", width: "12.5rem", onChange: (option) => onSelectChange && onSelectChange(option) }), _jsxs(Box, { display: "flex", alignItems: "center", gap: "0.5rem", children: [_jsx(Button, { size: "sm", variant: "ghost", leftIcon: _jsx(SquarePen, { size: 20, color: colors.text[500] }), onClick: () => onEdit === null || onEdit === void 0 ? void 0 : onEdit(), children: "Edit Layout" }), _jsx(VeritcalDivider, {}), _jsx(Button, { size: "sm", variant: "solid", leftIcon: _jsx(CirclePlus, { size: 20, color: onFilled(colors.primary[500], colors.white, colors.black) }), onClick: () => onCreate === null || onCreate === void 0 ? void 0 : onCreate(), children: "Create New" })] })] }));
+    return (_jsxs(Box, { display: "flex", alignItems: "center", gap: "0.625rem", children: [_jsx(Select, { options: options, placeholder: "Filter by Status", width: "12.5rem", onChange: (option) => onSelectChange && onSelectChange(option) }), _jsxs(Box, { display: "flex", alignItems: "center", gap: "0.5rem", children: [_jsx(Button, { size: "sm", variant: "ghost", leftIcon: _jsx(SquarePen, { size: 20, color: colors.text[500] }), onClick: () => onEdit === null || onEdit === void 0 ? void 0 : onEdit(), children: "Edit Layout" }), _jsx(VeritcalDivider, {}), _jsx(Button, { size: "sm", variant: "solid", leftIcon: _jsx(CirclePlus, { size: 20 }), onClick: () => onCreate === null || onCreate === void 0 ? void 0 : onCreate(), children: "Create New" })] })] }));
 };
 export default KanbanActions;

package/dist/esm/Components/OrganizationDetails/OrganizationDetails.js

@@ -3,7 +3,8 @@ import { useMemo, useState } from "react";
 import { Avatar, Badge, Box, Flex, Heading, HStack, IconButton, Input, Skeleton, SkeletonText, Spinner, Text, Tooltip, VStack, } from "@chakra-ui/react";
 import { ArrowLeft, Building2, Check, CheckCircle2, Crown, Globe, Mail, Pencil, Plus, Trash2, Users, X, } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-import { accentTextOnCanvas, isDarkCanvas, onFilled } from "../../Theme/tokens/builders/accentText.js";
+import { accentTextOnCanvas, isDarkCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { resolveFilledSurface } from "../../Theme/tokens/builders/filledSurface.js";
 import { resolveStatusTone } from "../../Theme/tokens/builders/statusTone.js";
 import Button from "../Button/Button.js";
 import EmptyState from "../EmptyState/EmptyState.js";
@@ -67,7 +68,7 @@ const OrganizationDetails = ({ activeOrganizations, invitedOrganizations, isLoad
     const pageBg = colors.backgroundColor.main;
     const primary50 = colors.primary[50];
     const primary100 = colors.primary[100];
-    const primary500 = colors.primary[500];
+    const primarySolid = resolveFilledSurface(colors.primary, colors);
     const onPrimary50 = accentTextOnCanvas(colors.primary, colors.primary[50]);
     const cardSx = {
         backgroundColor: surface,
@@ -153,7 +154,7 @@ const OrganizationDetails = ({ activeOrganizations, invitedOrganizations, isLoad
         width: "100%",
     };
     const hasOrganizations = activeOrganizations.length > 0 || invitedOrganizations.length > 0;
-    return (_jsxs(Box, { backgroundColor: pageBg, minHeight: "100%", p: { base: 2, md: 3 }, children: [_jsxs(Flex, { ...cardSx, px: 3, py: 2.5, mb: 3, alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 3, bgGradient: `linear(135deg, ${primary50} 0%, ${primary100} 100%)`, children: [_jsxs(Flex, { alignItems: "center", gap: 3, children: [onBack && (_jsx(IconButton, { "aria-label": "Go back", icon: _jsx(ArrowLeft, { size: 18 }), variant: "ghost", size: "sm", color: subtle, onClick: onBack })), _jsx(Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: primary500, color: onFilled(primary500, colors.white, colors.black), children: _jsx(Building2, { size: 18 }) }), _jsxs(Box, { children: [_jsxs(HStack, { spacing: 2, children: [_jsx(Heading, { size: "sm", color: heading, fontWeight: 700, children: userName
+    return (_jsxs(Box, { backgroundColor: pageBg, minHeight: "100%", p: { base: 2, md: 3 }, children: [_jsxs(Flex, { ...cardSx, px: 3, py: 2.5, mb: 3, alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 3, bgGradient: `linear(135deg, ${primary50} 0%, ${primary100} 100%)`, children: [_jsxs(Flex, { alignItems: "center", gap: 3, children: [onBack && (_jsx(IconButton, { "aria-label": "Go back", icon: _jsx(ArrowLeft, { size: 18 }), variant: "ghost", size: "sm", color: subtle, onClick: onBack })), _jsx(Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: primarySolid.fill, color: primarySolid.color, children: _jsx(Building2, { size: 18 }) }), _jsxs(Box, { children: [_jsxs(HStack, { spacing: 2, children: [_jsx(Heading, { size: "sm", color: heading, fontWeight: 700, children: userName
                                                     ? `${labels.greeting.replace(/User!?/, "")}${userName}!`.trim()
                                                     : labels.greeting }), _jsx(Avatar, { size: "xs", name: userName, src: userAvatarUrl })] }), _jsx(Text, { fontSize: "xs", color: subtle, mt: 0.5, children: labels.manageSubtitle })] })] }), _jsx(Button, { label: labels.createNewOrganization, onClick: () => setCreateOpen(true), leftIcon: _jsx(Plus, { size: 16 }), colorScheme: "primary", size: "sm" })] }), isLoading ? (_jsx(Box, { ...gridSx, children: Array.from({ length: 6 }).map((_, idx) => (_jsxs(Box, { ...cardSx, p: 3, children: [_jsx(Skeleton, { boxSize: "36px", borderRadius: "lg", mb: 2 }), _jsx(SkeletonText, { noOfLines: 2, spacing: 2 })] }, idx))) })) : !hasOrganizations ? (_jsx(EmptyState, { icon: Building2, title: labels.noOrganizationsTitle, description: labels.noOrganizationsDescription, minH: "40vh", action: _jsx(Button, { label: labels.createOrganization, onClick: () => setCreateOpen(true), leftIcon: _jsx(Plus, { size: 16 }), colorScheme: "primary", size: "sm" }) })) : (_jsxs(VStack, { align: "stretch", spacing: 4, children: [activeOrganizations.length > 0 && (_jsxs(Box, { children: [_jsxs(Flex, { align: "center", gap: 2, mb: 2, children: [_jsx(Users, { size: 16, color: colors.accentText }), _jsx(Heading, { size: "sm", color: heading, fontWeight: 600, children: labels.activeOrganizations }), sectionBadge(activeOrganizations.length, "blue")] }), _jsx(Box, { ...gridSx, children: activeOrganizations.map(renderActiveCard) })] })), invitedOrganizations.length > 0 && (_jsxs(Box, { children: [_jsxs(Flex, { align: "center", gap: 2, mb: 2, children: [_jsx(Mail, { size: 16, color: colors.semanticText.warning }), _jsx(Heading, { size: "sm", color: heading, fontWeight: 600, children: labels.invitedOrganizations }), sectionBadge(invitedOrganizations.length, "yellow")] }), _jsx(Box, { ...gridSx, children: invitedOrganizations.map(renderInvitedCard) })] }))] })), footerSlot, _jsx(CreateOrgModal, { isOpen: isCreateOpen, onClose: () => setCreateOpen(false), isLoading: isCreating, onSubmit: async (values) => {
                     await (onCreateOrganization === null || onCreateOrganization === void 0 ? void 0 : onCreateOrganization(values));

package/dist/esm/Components/ProfilePhotoViewer/ProfilePhotoViewer.js

@@ -3,7 +3,8 @@ import { useRef, useState } from "react";
 import { Box, Image, IconButton, Input, Text, Tooltip, HStack, } from "@chakra-ui/react";
 import { Eye, FileText, SquarePen, User } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-import { accentTextOnCanvas, onFilled } from "../../Theme/tokens/builders/accentText.js";
+import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { labelOnFill, solidFillRung } from "../../Theme/tokens/builders/filledSurface.js";
 export default function ProfilePhotoViewer({ photoUrl, onPhotoChange, imageWidth = "100px", imageAlt = "Profile Photo", imageObjectFit = "cover", imageBorderRadius = "full", editIconSize = "sm", editIconPositionRight = "0px", editIconPositionBottom = "0px", isRound = true, boxStyle, isEditable = false, isView = false, style, handleIsView, fallbackText, revealOnHover = true, }) {
     var _a, _b, _c, _d, _e;
     const [photo, setPhoto] = useState(photoUrl);
@@ -57,14 +58,14 @@ export default function ProfilePhotoViewer({ photoUrl, onPhotoChange, imageWidth
             "&:hover .ppv-media": {
                 boxShadow: `0 0 0 0.1875rem ${c.primary.opacity[24]}`,
             },
-        }, children: [_jsx(Box, { className: "ppv-media", borderRadius: imageBorderRadius, transition: "box-shadow 0.2s ease", children: renderMedia() }), hasActions && (_jsxs(_Fragment, { children: [_jsx(Box, { className: "ppv-overlay", position: "absolute", inset: 0, borderRadius: imageBorderRadius, bg: "blackAlpha.300", opacity: 0, transition: "opacity 0.2s ease", pointerEvents: "none" }), _jsxs(HStack, { className: "ppv-actions", position: "absolute", right: editIconPositionRight, bottom: editIconPositionBottom, transform: "translate(-15%, -15%)", spacing: 1.5, opacity: revealOnHover ? 0 : 1, transition: "opacity 0.2s ease", children: [isEditable && (_jsx(Tooltip, { label: "Edit", "aria-label": "Edit", hasArrow: true, children: _jsx(IconButton, { icon: _jsx(SquarePen, { size: 14 }), isRound: isRound, size: editIconSize, onClick: handleClick, "aria-label": "Edit photo", bg: c.primary[500], color: onFilled(c.primary[500], c.white, c.black), border: `0.125rem solid ${c.background[50]}`, boxShadow: (_b = theme.shadows) === null || _b === void 0 ? void 0 : _b.md, style: style, transition: "transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease", _hover: {
+        }, children: [_jsx(Box, { className: "ppv-media", borderRadius: imageBorderRadius, transition: "box-shadow 0.2s ease", children: renderMedia() }), hasActions && (_jsxs(_Fragment, { children: [_jsx(Box, { className: "ppv-overlay", position: "absolute", inset: 0, borderRadius: imageBorderRadius, bg: "blackAlpha.300", opacity: 0, transition: "opacity 0.2s ease", pointerEvents: "none" }), _jsxs(HStack, { className: "ppv-actions", position: "absolute", right: editIconPositionRight, bottom: editIconPositionBottom, transform: "translate(-15%, -15%)", spacing: 1.5, opacity: revealOnHover ? 0 : 1, transition: "opacity 0.2s ease", children: [isEditable && (_jsx(Tooltip, { label: "Edit", "aria-label": "Edit", hasArrow: true, children: _jsx(IconButton, { icon: _jsx(SquarePen, { size: 14 }), isRound: isRound, size: editIconSize, onClick: handleClick, "aria-label": "Edit photo", bg: c.primary[solidFillRung(c.primary, c.white)], color: labelOnFill(c.primary[solidFillRung(c.primary, c.white)], c.white, c.black), border: `0.125rem solid ${c.background[50]}`, boxShadow: (_b = theme.shadows) === null || _b === void 0 ? void 0 : _b.md, style: style, transition: "transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease", _hover: {
                                         bg: c.primary[600],
-                                        color: onFilled(c.primary[600], c.white, c.black),
+                                        color: labelOnFill(c.primary[600], c.white, c.black),
                                         transform: "scale(1.1)",
                                         boxShadow: (_c = theme.shadows) === null || _c === void 0 ? void 0 : _c.lg,
                                     }, _active: {
                                         bg: c.primary[700],
-                                        color: onFilled(c.primary[700], c.white, c.black),
+                                        color: labelOnFill(c.primary[700], c.white, c.black),
                                     } }) })), isView && (_jsx(Tooltip, { label: "View", "aria-label": "View", hasArrow: true, children: _jsx(IconButton, { icon: _jsx(Eye, { size: 14 }), isRound: isRound, size: editIconSize, onClick: handleIsView, "aria-label": "View photo", bg: c.background[50], color: c.text[700], border: `0.063rem solid ${border}`, boxShadow: (_d = theme.shadows) === null || _d === void 0 ? void 0 : _d.md, style: style, transition: "transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease", _hover: {
                                         bg: c.gray[50],
                                         color: accentTextOnCanvas(c.primary, c.gray[50]),

package/dist/esm/Components/ScrollToTop/ScrollToTop.js

@@ -5,7 +5,7 @@ import { ChevronUp } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import ToolTip from "../ToolTip/ToolTip.js";
 import { rafThrottle } from "../../Utils/rafThrottle.js";
-import { onFilled } from "../../Theme/tokens/builders/accentText.js";
+import { labelOnFill, solidFillRung } from "../../Theme/tokens/builders/filledSurface.js";
 const ScrollToTop = ({ children, tooltipLabel = "Scroll to top", threshold = 300, duration = 600, useWindow = false, bottom = "2rem", right = "2rem", }) => {
     const [visible, setVisible] = useState(false);
     const anchorRef = useRef(null);
@@ -58,9 +58,9 @@ const ScrollToTop = ({ children, tooltipLabel = "Scroll to top", threshold = 300
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [useWindow, threshold]);
-    return (_jsxs(Box, { ref: anchorRef, position: "relative", children: [children, _jsx(ToolTip, { label: tooltipLabel, placement: "left", children: _jsx(Box, { as: "button", type: "button", onClick: scrollToTop, "aria-label": tooltipLabel, border: "none", position: "fixed", bottom: bottom, right: right, zIndex: 1000, display: "flex", alignItems: "center", justifyContent: "center", boxSize: "44px", borderRadius: "full", cursor: "pointer", bg: theme.colors.primary[500], color: theme.colors.onPrimary, boxShadow: "md", opacity: visible ? 1 : 0, transform: visible ? "translateY(0) scale(1)" : "translateY(16px) scale(0.85)", pointerEvents: visible ? "auto" : "none", transition: "all 0.25s cubic-bezier(0.16, 1, 0.3, 1)", _hover: {
+    return (_jsxs(Box, { ref: anchorRef, position: "relative", children: [children, _jsx(ToolTip, { label: tooltipLabel, placement: "left", children: _jsx(Box, { as: "button", type: "button", onClick: scrollToTop, "aria-label": tooltipLabel, border: "none", position: "fixed", bottom: bottom, right: right, zIndex: 1000, display: "flex", alignItems: "center", justifyContent: "center", boxSize: "44px", borderRadius: "full", cursor: "pointer", bg: theme.colors.primary[solidFillRung(theme.colors.primary, theme.colors.white)], color: labelOnFill(theme.colors.primary[solidFillRung(theme.colors.primary, theme.colors.white)], theme.colors.white, theme.colors.black), boxShadow: "md", opacity: visible ? 1 : 0, transform: visible ? "translateY(0) scale(1)" : "translateY(16px) scale(0.85)", pointerEvents: visible ? "auto" : "none", transition: "all 0.25s cubic-bezier(0.16, 1, 0.3, 1)", _hover: {
                         bg: theme.colors.primary[600],
-                        color: onFilled(theme.colors.primary[600], theme.colors.white, theme.colors.black),
+                        color: labelOnFill(theme.colors.primary[600], theme.colors.white, theme.colors.black),
                         transform: "translateY(-2px) scale(1.05)",
                         boxShadow: "lg",
                     }, _active: { transform: "scale(0.95)" }, children: _jsx(ChevronUp, { size: 24, strokeWidth: 2.5 }) }) })] }));

package/dist/esm/Components/SelectSearch/SelectSearch.js

@@ -243,7 +243,7 @@ BottomIcon = false, BottomText, handleBottomClick, BottomTextColor, isColorOptio
             document.removeEventListener("mousedown", handleClickOutside);
         };
     }, [isOpen]);
-    return (_jsx(_Fragment, { children: _jsx(FormControl, { isInvalid: error, children: _jsxs(Box, { display: "flex", flexDirection: "column", position: "relative", sx: boxStyle, children: [label && (_jsx(TextLabel, { label: label, id: id, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), isMultipleSelect && selectedOptions.length > 0 && (_jsx(HStack, { spacing: 2, mb: 2, children: selectedOptions.map((option) => (_jsxs(Tag, { size: "md", borderRadius: "full", variant: "solid", sx: { backgroundColor: theme.colors.primary[500] }, children: [_jsx(TagLabel, { width: "50px", children: option.label }), _jsx(TagCloseButton, { onClick: () => handleRemoveOption(option) })] }, option.id))) })), _jsxs(InputGroup, { children: [_jsx(Input, { ref: inputRef, variant: "outline", borderRadius: FIELD_RADIUS, value: inputValue ? inputValue : "", onClick: () => setIsOpen(true), onFocus: () => {
+    return (_jsx(_Fragment, { children: _jsx(FormControl, { isInvalid: error, children: _jsxs(Box, { display: "flex", flexDirection: "column", position: "relative", sx: boxStyle, children: [label && (_jsx(TextLabel, { label: label, id: id, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), isMultipleSelect && selectedOptions.length > 0 && (_jsx(HStack, { spacing: 2, mb: 2, children: selectedOptions.map((option) => (_jsxs(Tag, { size: "md", borderRadius: "full", variant: "solid", colorScheme: "primary", children: [_jsx(TagLabel, { width: "50px", children: option.label }), _jsx(TagCloseButton, { onClick: () => handleRemoveOption(option) })] }, option.id))) })), _jsxs(InputGroup, { children: [_jsx(Input, { ref: inputRef, variant: "outline", borderRadius: FIELD_RADIUS, value: inputValue ? inputValue : "", onClick: () => setIsOpen(true), onFocus: () => {
                                     if (skipNextInputFocusOpen.current) {
                                         skipNextInputFocusOpen.current = false;
                                         return;

package/dist/esm/Components/SideBar/SideBar.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useEffect, useRef, useState } from "react";
 import { Flex, Text, Image, Box, Skeleton, useBreakpointValue } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-import { onFilled } from "../../Theme/tokens/builders/accentText.js";
+import { labelOnFill, solidFillRung } from "../../Theme/tokens/builders/filledSurface.js";
 import { getSidebarActiveAccent } from "./sidebarAccentColors.js";
 import { FlexCss, HEADER_HEIGHT } from "../../Constants/Sidebar.js";
 import { ArrowLeftToLine, ArrowRightToLine, ChevronLeft, Maximize2, MoreVertical, PanelLeft, Plus, X } from "lucide-react";
@@ -27,7 +27,9 @@ const SidebarHeader = ({ logo, companyName, companySubtitle, toggle, isLoading,
     if (isLoading) {
         return (_jsx(Box, { w: "100%", px: toggle ? 2 : 4, py: 2, h: HEADER_HEIGHT, display: "flex", alignItems: "center", flexShrink: 0, children: toggle ? (_jsx(Flex, { align: "center", gap: 4, justifyContent: "center", w: "100%", children: _jsx(Skeleton, { w: "28px", h: "28px", borderRadius: "md", startColor: theme.colors.sidebar.background[400], endColor: theme.colors.sidebar.background[300] }) })) : (_jsxs(Flex, { align: "center", gap: 3, w: "100%", children: [_jsx(Skeleton, { w: "28px", h: "28px", borderRadius: "md", startColor: theme.colors.sidebar.background[400], endColor: theme.colors.sidebar.background[300] }), _jsx(Skeleton, { h: "1.25rem", w: "60%", borderRadius: "md", startColor: theme.colors.sidebar.background[400], endColor: theme.colors.sidebar.background[300] })] })) }));
     }
-    const logoNode = logo ? (_jsx(Image, { borderRadius: "md", boxSize: "1.75rem", src: logo, alt: "Company Logo", flexShrink: 0, cursor: toggle ? "pointer" : undefined, onClick: toggle ? onToggle : undefined })) : (_jsx(Box, { bg: theme.colors.primary[500], color: onFilled(theme.colors.primary[500], theme.colors.white, theme.colors.black), borderRadius: "md", boxSize: "1.75rem", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: "bold", flexShrink: 0, cursor: toggle ? "pointer" : undefined, onClick: toggle ? onToggle : undefined, children: _jsx(DefaultLogo, {}) }));
+    const primaryFillRung = solidFillRung(theme.colors.primary, theme.colors.white);
+    const primaryFill = theme.colors.primary[primaryFillRung];
+    const logoNode = logo ? (_jsx(Image, { borderRadius: "md", boxSize: "1.75rem", src: logo, alt: "Company Logo", flexShrink: 0, cursor: toggle ? "pointer" : undefined, onClick: toggle ? onToggle : undefined })) : (_jsx(Box, { bg: primaryFill, color: labelOnFill(primaryFill, theme.colors.white, theme.colors.black), borderRadius: "md", boxSize: "1.75rem", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: "bold", flexShrink: 0, cursor: toggle ? "pointer" : undefined, onClick: toggle ? onToggle : undefined, children: _jsx(DefaultLogo, {}) }));
     return (_jsxs(Flex, { h: HEADER_HEIGHT, w: "100%", alignItems: "center", justifyContent: toggle ? "center" : "flex-start", gap: "8px", px: toggle ? "8px" : "10px", borderBottom: "1px solid", borderColor: "whiteAlpha.100", minW: 0, overflow: "hidden", flexShrink: 0, children: [logoNode, !toggle && (_jsxs(Box, { flex: "1", minW: 0, children: [_jsx(OverflowTooltipText, { placement: "right", fontWeight: 600, fontSize: "12.5px", textAlign: "left", color: theme.colors.white, lineHeight: "1.3", as: "p", width: "100%", children: companyName !== null && companyName !== void 0 ? companyName : "" }), companySubtitle && (_jsx(Text, { fontSize: "10px", color: theme.colors.sidebar.mutedLabel, lineHeight: "1.3", isTruncated: true, children: companySubtitle }))] })), !toggle && (_jsx(Box, { as: "button", type: "button", onClick: overlay ? onClose : onToggle, "aria-label": overlay ? "Close menu" : "Collapse sidebar", w: "22px", h: "22px", borderRadius: "base", bg: "whiteAlpha.100", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, _hover: { bg: "whiteAlpha.300" }, transition: "background 0.15s", children: overlay ? (_jsx(X, { size: 15, color: theme.colors.sidebar.mutedIcon })) : (_jsx(ChevronLeft, { size: 14, color: theme.colors.sidebar.mutedIcon })) }))] }));
 };
 const SkeletonMenuRow = ({ toggle }) => {

package/dist/esm/Components/StageProgress/StageProgressProps.js

@@ -1,14 +1,16 @@
-import { accentTextOnCanvas, onFilled } from "../../Theme/tokens/builders/accentText.js";
+import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { resolveFilledSurface } from "../../Theme/tokens/builders/filledSurface.js";
 /** Exhaustive by construction: a new scheme that maps nowhere is a compile error. */
 const scaleFor = (colors, scheme) => scheme === "primary" || scheme === "secondary" || scheme === "tertiary"
     ? colors[scheme]
     : colors.semantic[scheme];
 /** Resolve a chevron palette for a given color scheme from the theme. */
 export const resolveStagePalette = (theme, colorScheme = "primary") => {
-    const { gray, white, black } = theme.colors;
+    const { gray } = theme.colors;
     const scale = scaleFor(theme.colors, colorScheme);
-    const strong = scale[500];
-    const onStrong = onFilled(strong, white, black);
+    const solid = resolveFilledSurface(scale, theme.colors);
+    const strong = solid.fill;
+    const onStrong = solid.color;
     const soft = scale[100];
     // A fixed [700] fails AA against [100] for some hues (orange 3.30, borderline green 3.58) —
     // walk the scale's own rungs against this specific tint instead.
@@ -18,7 +20,7 @@ export const resolveStagePalette = (theme, colorScheme = "primary") => {
         softText,
         strong,
         onStrong,
-        hover: scale[600],
+        hover: solid.hoverFill,
         muted: gray[100],
         mutedText: gray[500],
     };

package/dist/esm/Components/Table/Table.js

@@ -7,12 +7,12 @@ import LeftFilterPane from "./filters/LeftFilterPane.js";
 import { TABLE_VARIANTS } from "./variants/index.js";
 import { TableVariantProvider } from "./variants/TableVariantContext.js";
 import { isDarkCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { labelOnFill, solidFillRung } from "../../Theme/tokens/builders/filledSurface.js";
 import Pagination from "./components/Pagination.js";
 import TableHeader from "./components/TableHeader.js";
 import TableBody from "./components/TableBody.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { scrollbarStyles, SCROLLBAR_WIDTH } from "../../Theme/tokens/builders/scrollbar.js";
-import { scrollShadowStyles } from "../../Theme/tokens/builders/scrollShadow.js";
 import useTable from "./hooks/useTable.js";
 import { searchAndSortData, SortMultiColumnData, groupRows, buildTablePalette, pickTableColor } from "../../Utils/table.js";
 import { useGetPreferences, useSavePreferences, } from "../../Hooks/usePreferences.js";
@@ -365,7 +365,7 @@ export default function Table({ data, columns, onSelection, isLoading, isCheckbo
                 // Square children poked past the rounded border, leaving a gap at each corner.
                 overflow: "hidden", children: [filterSidebar && filterMode === "modal" && (_jsxs(Modal, { isOpen: isFilterModalOpen, onClose: onFilterModalClose, size: "4xl", scrollBehavior: "inside", children: [_jsx(ModalOverlay, {}), _jsxs(ModalContent, { bg: theme.colors.background[50], my: 0, top: "10%", position: "fixed", left: "auto", right: "auto", children: [_jsx(ModalCloseButton, { size: "sm" }), _jsx(ModalBody, { p: 0, children: _jsx(LeftFilterPane, { theme: theme, sections: (_c = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.sidebarOptions) !== null && _c !== void 0 ? _c : [], selected: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.selected, onApply: (sel) => { var _a; (_a = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onApply) === null || _a === void 0 ? void 0 : _a.call(filterSidebar, sel); onFilterModalClose(); }, onClear: () => { var _a; (_a = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onClearAllHandler) === null || _a === void 0 ? void 0 : _a.call(filterSidebar); }, isApplyLoading: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isApplyLoading, filterMode: filterMode }) })] })] })), _jsxs(Flex, { align: "start", children: [filterMode === "sidebar" && (_jsx(MotionBox, { "data-testid": "filter-sidebar-pane", initial: { width: 0 }, animate: { width: (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? 180 : 0 }, transition: { type: "tween", duration: 0.5 }, overflow: "hidden", flexShrink: 0, borderRight: (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? "1px solid" : "none", borderColor: theme.colors.boxborder[200], style: { height: controlsHeight + tableMaxH }, minHeight: (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? "32rem" : "auto", children: _jsx(LeftFilterPane, { height: controlsHeight + tableMaxH, theme: theme, sections: (_d = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.sidebarOptions) !== null && _d !== void 0 ? _d : [], selected: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.selected, onApply: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onApply, onClear: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onClearAllHandler, isApplyLoading: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isApplyLoading, filterMode: filterMode }) })), _jsxs(Box, { flex: "1", minW: 0, children: [_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", px: 3, py: 0, height: controlsHeight, gap: 3, flexWrap: "nowrap", bg: theme.colors.background[50], borderBottom: `0.063rem solid ${theme.colors.boxborder[200]}`, children: [filterSidebar && (_jsxs(_Fragment, { children: [_jsx(ToolTip, { label: "Filter", placement: "top", children: _jsxs(Box, { position: "relative", display: "inline-block", children: [_jsx(Icon, { as: Filter, transform: "scaleX(-1)", cursor: "pointer", boxSize: 4, color: sidebarActiveCount > 0 ? theme.colors.accentText : theme.colors.text[500], onClick: filterMode === "modal" ? onFilterModalOpen : filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.filterSidebarToggle, _hover: {
                                                                         color: theme.colors.accentText,
-                                                                    } }), sidebarActiveCount > 0 && (_jsx(Box, { position: "absolute", top: "-6px", right: "-10px", bg: theme.colors.primary[500], color: theme.colors.onPrimary, borderRadius: "full", p: "1px", cursor: "pointer", onClick: (e) => {
+                                                                    } }), sidebarActiveCount > 0 && (_jsx(Box, { position: "absolute", top: "-6px", right: "-10px", bg: theme.colors.primary[solidFillRung(theme.colors.primary, theme.colors.white)], color: labelOnFill(theme.colors.primary[solidFillRung(theme.colors.primary, theme.colors.white)], theme.colors.white, theme.colors.black), borderRadius: "full", p: "1px", cursor: "pointer", onClick: (e) => {
                                                                         var _a;
                                                                         e.stopPropagation();
                                                                         if (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onClearAllHandler) {
@@ -394,7 +394,6 @@ export default function Table({ data, columns, onSelection, isLoading, isCheckbo
                                                             }, children: _jsx(RefreshCw, { size: 16 }) }) })] })), headerActions && (_jsxs(_Fragment, { children: [_jsx(VeritcalDivider, {}), _jsx(HeaderActions, { actions: headerActions, selections: selection })] })), _jsx(ActiveFilters, { columns: columnsList, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch }), _jsxs(Box, { ml: "auto", display: "flex", alignItems: "center", gap: 2, children: [groupLoadMoreActive && loadMorePosition === "top" && (groupLoadMoreCaption || canGroupLoadMore) && (_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, flex: "0 0 auto", children: [groupLoadMoreCaption && (_jsx(Box, { fontSize: "0.75rem", color: theme.colors.text[500], whiteSpace: "nowrap", children: groupLoadMoreCaption })), canGroupLoadMore && (_jsx(Button, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText }))] })), (isPagination || isServerPagination) && !isGrouped && !canInfinite && !isCompactHeader && (_jsx("div", { children: _jsx(Pagination, { columns: columns, currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: pages, paginationText: tablePaginationText, handlePageSizeChange: handlePageSizeChange, dataLength: tableData.length, isServerPagination: isServerPagination, paginationSelectOptions: paginationSelectOptions, isVisiblity: true }) })), (isPagination || isServerPagination) && !isGrouped && !canInfinite && isCompactHeader && tableData.length > 0 && (_jsxs(Popover, { isOpen: isPaginationPopoverOpen, onClose: () => setIsPaginationPopoverOpen(false), placement: "bottom-end", children: [_jsx(PopoverTrigger, { children: _jsx(IconButton, { "aria-label": "Pagination", size: "sm", variant: "ghost", icon: _jsx(EllipsisVertical, { size: 18 }), color: theme.colors.text[500], _hover: {
                                                                         color: theme.colors.accentText,
                                                                     }, onClick: () => setIsPaginationPopoverOpen((open) => !open) }) }), _jsx(Portal, { children: _jsx(PopoverContent, { maxW: "22rem", p: 2, zIndex: 1600, bg: theme.colors.background[50], boxShadow: "lg", children: _jsx(PopoverBody, { p: 0, children: _jsx(Pagination, { columns: columns, currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: pages, paginationText: tablePaginationText, handlePageSizeChange: handlePageSizeChange, dataLength: tableData.length, isServerPagination: isServerPagination, paginationSelectOptions: paginationSelectOptions, isVisiblity: true }) }) }) })] }))] })] }), _jsxs(TableContainer, { ref: tableContainerRef, position: "relative", h: isTableLoading ? tableMaxH : undefined, maxH: !isTableLoading ? tableMaxH : undefined, pb: isTableLoading ? 0 : compactScrollbarPadding, overflowY: isCompactRows ? "hidden" : "auto", overflowX: "auto", sx: {
-                                            ...scrollShadowStyles(theme.colors.background[50]),
                                             ...scrollbarStyles(theme.colors),
                                             // Compact rows hide the horizontal bar until hover to keep the row height.
                                             '&::-webkit-scrollbar': {

package/dist/esm/Components/Table/filters/LeftFilterPane.js

@@ -168,6 +168,6 @@ const LeftFilterPane = ({ title = "Filter", height = 300, sections, selected: se
         }
         return filteredSections.map((sec) => (_jsxs(Box, { children: [_jsx(Box, { px: 3, py: 2, borderBottom: "1px solid", borderColor: theme.colors.boxborder[200], children: _jsx(SectionLabel, { label: sec.label, theme: theme }) }), _jsx(Box, { px: 3, pt: 2, pb: 1, children: _jsx(SectionContent, { sec: sec, ...sectionContentProps }) })] }, sec.id)));
     };
-    return (_jsxs(Box, { width: filterMode === "modal" ? "100%" : "180px", height: filterMode === "modal" ? "100%" : height, minHeight: "32rem", bg: theme.colors.background[50], borderRight: "1px solid", borderColor: theme.colors.boxborder[200], borderRadius: "md", overflow: "hidden", display: "flex", flexDirection: "column", marginBottom: filterMode === "modal" && hasActiveFilters ? '3.5rem' : 0, children: [_jsx(Box, { p: 3, borderBottom: "1px solid", borderColor: theme.colors.boxborder[200], children: !isSearching ? (_jsxs(Flex, { align: "center", justify: "space-between", children: [_jsx(Text, { fontWeight: "semibold", fontSize: "sm", children: title }), _jsx(IconButton, { "aria-label": "Search filters", icon: _jsx(Icon, { as: Search, transform: "scaleX(-1)", boxSize: 4 }), variant: "unstyled", minW: "auto", h: "auto", display: "flex", cursor: "pointer", color: theme.colors.text[500], onClick: () => setIsSearching(true), mr: filterMode === "modal" ? 8 : 2, mt: filterMode === "modal" ? -1 : 0 })] })) : (_jsx(motion.div, { ref: searchRef, initial: { opacity: 0, x: 40 }, animate: { opacity: 1, x: 0 }, transition: { type: "tween", duration: 0.2 }, children: _jsxs(InputGroup, { size: "sm", children: [_jsx(InputLeftElement, { pointerEvents: "none", children: _jsx(Search, { size: 16, color: theme.colors.text[500] }) }), _jsx(Input, { placeholder: "Search", value: search, onChange: (e) => setSearch(e.target.value), autoFocus: true }), search.length > 0 && (_jsx(InputRightElement, { children: _jsx(IconButton, { "aria-label": "Clear", size: "xs", variant: "ghost", icon: _jsx(X, { size: 14 }), onClick: () => { setSearch(""); setIsSearching(false); } }) }))] }) })) }), _jsx(Box, { flex: "1", overflowY: "auto", children: renderSections() }), hasActiveFilters && (_jsxs(HStack, { px: 2, py: 1, borderTop: "1px solid", borderColor: theme.colors.boxborder[200], spacing: 2, position: filterMode === "modal" ? "absolute" : "relative", bottom: 0, left: 0, right: 0, bg: theme.colors.background[50], children: [_jsx(Button, { flex: 1, variant: "outline", size: "sm", onClick: handleClear, fontSize: "xs", colorScheme: "red", children: "Clear All" }), _jsx(Button, { flex: 1, colorScheme: "primary", color: theme.colors.onPrimary, size: "sm", onClick: handleApply, fontSize: "xs", isLoading: isApplyLoading, children: "Apply" })] }))] }));
+    return (_jsxs(Box, { width: filterMode === "modal" ? "100%" : "180px", height: filterMode === "modal" ? "100%" : height, minHeight: "32rem", bg: theme.colors.background[50], borderRight: "1px solid", borderColor: theme.colors.boxborder[200], borderRadius: "md", overflow: "hidden", display: "flex", flexDirection: "column", marginBottom: filterMode === "modal" && hasActiveFilters ? '3.5rem' : 0, children: [_jsx(Box, { p: 3, borderBottom: "1px solid", borderColor: theme.colors.boxborder[200], children: !isSearching ? (_jsxs(Flex, { align: "center", justify: "space-between", children: [_jsx(Text, { fontWeight: "semibold", fontSize: "sm", children: title }), _jsx(IconButton, { "aria-label": "Search filters", icon: _jsx(Icon, { as: Search, transform: "scaleX(-1)", boxSize: 4 }), variant: "unstyled", minW: "auto", h: "auto", display: "flex", cursor: "pointer", color: theme.colors.text[500], onClick: () => setIsSearching(true), mr: filterMode === "modal" ? 8 : 2, mt: filterMode === "modal" ? -1 : 0 })] })) : (_jsx(motion.div, { ref: searchRef, initial: { opacity: 0, x: 40 }, animate: { opacity: 1, x: 0 }, transition: { type: "tween", duration: 0.2 }, children: _jsxs(InputGroup, { size: "sm", children: [_jsx(InputLeftElement, { pointerEvents: "none", children: _jsx(Search, { size: 16, color: theme.colors.text[500] }) }), _jsx(Input, { placeholder: "Search", value: search, onChange: (e) => setSearch(e.target.value), autoFocus: true }), search.length > 0 && (_jsx(InputRightElement, { children: _jsx(IconButton, { "aria-label": "Clear", size: "xs", variant: "ghost", icon: _jsx(X, { size: 14 }), onClick: () => { setSearch(""); setIsSearching(false); } }) }))] }) })) }), _jsx(Box, { flex: "1", overflowY: "auto", children: renderSections() }), hasActiveFilters && (_jsxs(HStack, { px: 2, py: 1, borderTop: "1px solid", borderColor: theme.colors.boxborder[200], spacing: 2, position: filterMode === "modal" ? "absolute" : "relative", bottom: 0, left: 0, right: 0, bg: theme.colors.background[50], children: [_jsx(Button, { flex: 1, variant: "outline", size: "sm", onClick: handleClear, fontSize: "xs", colorScheme: "red", children: "Clear All" }), _jsx(Button, { flex: 1, colorScheme: "primary", size: "sm", onClick: handleApply, fontSize: "xs", isLoading: isApplyLoading, children: "Apply" })] }))] }));
 };
 export default LeftFilterPane;