pixelize-design-library 2.4.2-beta.43 → 2.4.2-beta.45

package/dist/Components/StageProgress/StageItem.js

@@ -8,6 +8,7 @@ const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
 const StageProgressProps_1 = require("./StageProgressProps");
 const sizeMap = {
@@ -27,8 +28,9 @@ const clipFor = (index, total, a) => {
     return `polygon(0 0, calc(100% - ${a}px) 0, 100% 50%, calc(100% - ${a}px) 100%, 0 100%, ${a}px 50%)`;
 };
 /** Renders one chevron/bar/pill stage — for variant="stepper", StageProgress renders StepperStage internally instead. */
-const StageItem = ({ label, index, total, state, variant = "chevron", size = "md", colorScheme = "primary", onClick, isReadOnly = false, disabled = false, showCheck = false, minWidth, scrollIntoViewWhenActive = true, tooltipThreshold = 20, }) => {
+const StageItem = ({ label, index, total, state, variant = "chevron", size = "md", colorScheme = "primary", onClick, isReadOnly = false, isDisabled, disabled: legacyDisabled = false, showCheck = false, minWidth, scrollIntoViewWhenActive = true, tooltipThreshold = 20, }) => {
     var _a;
+    const disabled = isDisabled !== null && isDisabled !== void 0 ? isDisabled : legacyDisabled;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const palette = (0, StageProgressProps_1.resolveStagePalette)(theme, colorScheme);
     const ref = (0, react_1.useRef)(null);
@@ -77,13 +79,19 @@ const StageItem = ({ label, index, total, state, variant = "chevron", size = "md
             : "none";
     // Upcoming pills read as outlined; other states stay filled.
     const isOutlinePill = variant === "pills" && state === "upcoming";
-    const hoverStyles = interactive
+    const fillHoverStyles = interactive
         ? state === "active"
             ? { bg: palette.hover }
-            : { bg: palette.strong, color: palette.onStrong, borderColor: palette.strong }
+            : { bg: palette.strong, borderColor: palette.strong }
         : undefined;
     const showTooltip = ((_a = label === null || label === void 0 ? void 0 : label.length) !== null && _a !== void 0 ? _a : 0) > tooltipThreshold;
-    const content = ((0, jsx_runtime_1.jsx)(react_2.Box, { ref: ref, as: (interactive ? "button" : "div"), type: interactive ? "button" : undefined, "aria-current": state === "active" ? "step" : undefined, onClick: interactive ? onClick : undefined, flexShrink: 0, minWidth: minWidth || s.minW, height: s.h, ml: `${overlap}px`, pl: `${leftPad}px`, pr: `${rightPad}px`, bg: isOutlinePill ? "transparent" : bg, color: isOutlinePill ? palette.mutedText : color, border: isOutlinePill ? "1px solid" : "none", borderColor: isOutlinePill ? palette.muted : undefined, borderRadius: borderRadius, fontSize: s.font, fontWeight: state === "active" ? 600 : 500, display: "flex", alignItems: "center", justifyContent: isChevron ? "flex-start" : "center", cursor: interactive ? "pointer" : "default", opacity: disabled ? 0.55 : 1, transition: "background 0.18s ease, color 0.18s ease, filter 0.18s ease, border-color 0.18s ease", sx: { clipPath }, _hover: interactive ? { ...hoverStyles, filter: "brightness(0.97)" } : undefined, children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: isChevron ? "flex-start" : "center", gap: "6px", width: "100%", minW: 0, children: [showCheck && state === "completed" && ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: s.icon, style: { flexShrink: 0 } })), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", textAlign: "center", flex: "1", children: label })] }) }));
+    // clip-path clips box-shadow too, so the focus ring stays on this unclipped outer button.
+    const content = ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: ref, as: (interactive ? "button" : "div"), type: interactive ? "button" : undefined, "aria-current": state === "active" ? "step" : undefined, "aria-disabled": disabled ? true : undefined, onClick: interactive ? onClick : undefined, "data-group": "", position: "relative", flexShrink: 0, minWidth: minWidth || s.minW, height: s.h, ml: `${overlap}px`, p: 0, border: "none", bg: "transparent", color: isOutlinePill ? palette.mutedText : color, fontSize: s.font, fontWeight: state === "active" ? 600 : 500, display: "flex", alignItems: "center", justifyContent: isChevron ? "flex-start" : "center", cursor: interactive ? "pointer" : "default", opacity: disabled ? 0.55 : 1, transition: "color 0.18s ease, filter 0.18s ease", sx: interactive ? (0, focusRing_styles_1.focusVisibleStyles)(theme.colors) : undefined, _hover: interactive
+            ? {
+                color: state === "active" ? undefined : palette.onStrong,
+                filter: "brightness(0.97)",
+            }
+            : undefined, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", inset: 0, bg: isOutlinePill ? "transparent" : bg, border: isOutlinePill ? "1px solid" : "none", borderColor: isOutlinePill ? palette.muted : undefined, borderRadius: borderRadius, transition: "background 0.18s ease, border-color 0.18s ease", sx: { clipPath }, _groupHover: fillHoverStyles }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { position: "relative", align: "center", justify: isChevron ? "flex-start" : "center", gap: "6px", width: "100%", minW: 0, pl: `${leftPad}px`, pr: `${rightPad}px`, children: [showCheck && state === "completed" && ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: s.icon, style: { flexShrink: 0 } })), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", textAlign: "center", flex: "1", children: label })] })] }));
     if (showTooltip) {
         return ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: label, placement: "top", openDelay: 300, children: content }));
     }

package/dist/Components/StageProgress/StageProgress.js

@@ -21,7 +21,7 @@ const StageProgress = ({ stages, variant = "chevron", value, onChange, size = "m
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     if (isLoading) {
         const skeletonH = size === "sm" ? "28px" : size === "lg" ? "44px" : "36px";
-        return ((0, jsx_runtime_1.jsx)(react_1.Flex, { gap: "6px", width: "100%", overflowX: "hidden", p: "0.1rem", children: Array.from({ length: 6 }).map((_, i) => ((0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: skeletonH, minWidth: minStageWidth || "160px", borderRadius: "md", flexShrink: 0 }, i))) }));
+        return ((0, jsx_runtime_1.jsx)(react_1.Flex, { gap: "6px", width: "100%", overflowX: "hidden", p: "0.1rem", children: Array.from({ length: 6 }).map((_, i) => ((0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: skeletonH, minWidth: minStageWidth || "160px", borderRadius: "lg", flexShrink: 0 }, i))) }));
     }
     const activeIndex = stages.findIndex((st) => st.id === value);
     const stateFor = (index) => {
@@ -32,15 +32,14 @@ const StageProgress = ({ stages, variant = "chevron", value, onChange, size = "m
         return "upcoming";
     };
     const total = stages.length;
-    return ((0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: variant === "stepper" ? "flex-start" : "stretch", gap: gapFor[variant], overflowX: "hidden", p: "0.1rem", sx: {
-            "&:hover": { overflowX: "auto" },
-            ...(0, scrollbar_1.scrollbarStyles)(theme.colors, "overlay"),
-        }, children: stages.map((stage, index) => {
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: variant === "stepper" ? "flex-start" : "stretch", gap: gapFor[variant], overflowX: "auto", p: "0.1rem", sx: (0, scrollbar_1.scrollbarStyles)(theme.colors, "overlay"), children: stages.map((stage, index) => {
+            var _a;
             const state = stateFor(index);
+            const stageDisabled = (_a = stage.isDisabled) !== null && _a !== void 0 ? _a : stage.disabled;
             if (variant === "stepper") {
-                return ((0, jsx_runtime_1.jsx)(StepperStage_1.default, { label: stage.label, number: index + 1, state: state, size: size, colorScheme: colorScheme, isReadOnly: isReadOnly, disabled: stage.disabled, showCheck: showCheck, isFirst: index === 0, isLast: index === total - 1, leftDone: activeIndex > -1 && index <= activeIndex, rightDone: activeIndex > -1 && index < activeIndex, scrollIntoViewWhenActive: scrollActiveIntoView, onClick: () => onChange === null || onChange === void 0 ? void 0 : onChange(stage.id, stage, index) }, stage.id));
+                return ((0, jsx_runtime_1.jsx)(StepperStage_1.default, { label: stage.label, number: index + 1, state: state, size: size, colorScheme: colorScheme, isReadOnly: isReadOnly, isDisabled: stageDisabled, showCheck: showCheck, isFirst: index === 0, isLast: index === total - 1, leftDone: activeIndex > -1 && index <= activeIndex, rightDone: activeIndex > -1 && index < activeIndex, scrollIntoViewWhenActive: scrollActiveIntoView, onClick: () => onChange === null || onChange === void 0 ? void 0 : onChange(stage.id, stage, index) }, stage.id));
             }
-            return ((0, jsx_runtime_1.jsx)(StageItem_1.default, { label: stage.label, index: index, total: total, state: state, variant: variant, size: size, colorScheme: colorScheme, isReadOnly: isReadOnly, disabled: stage.disabled, showCheck: showCheck, minWidth: minStageWidth, scrollIntoViewWhenActive: scrollActiveIntoView, tooltipThreshold: tooltipThreshold, onClick: () => onChange === null || onChange === void 0 ? void 0 : onChange(stage.id, stage, index) }, stage.id));
+            return ((0, jsx_runtime_1.jsx)(StageItem_1.default, { label: stage.label, index: index, total: total, state: state, variant: variant, size: size, colorScheme: colorScheme, isReadOnly: isReadOnly, isDisabled: stageDisabled, showCheck: showCheck, minWidth: minStageWidth, scrollIntoViewWhenActive: scrollActiveIntoView, tooltipThreshold: tooltipThreshold, onClick: () => onChange === null || onChange === void 0 ? void 0 : onChange(stage.id, stage, index) }, stage.id));
         }) }));
 };
 exports.default = StageProgress;

package/dist/Components/StageProgress/StageProgressProps.d.ts

@@ -13,7 +13,9 @@ export interface Stage {
     id: string | number;
     /** Truncates with an ellipsis (or a tooltip) under chevron/bar/pills; wraps to 2 lines under stepper. */
     label: string;
-    /** Disable selecting this stage individually. */
+    /** Disable selecting this stage individually; wins over `disabled` when both are set. */
+    isDisabled?: boolean;
+    /** @deprecated Use `isDisabled` — renamed to match every other field. */
     disabled?: boolean;
 }
 /** Top-level props for StageProgress; per-item rendering is delegated to StageItemProps/StepperStageProps. */
@@ -64,7 +66,9 @@ export interface StageItemProps {
     onClick?: () => void;
     /** Disables all interactivity without dimming opacity (unlike disabled). */
     isReadOnly?: boolean;
-    /** Disables just this stage and dims it to 0.55 opacity. */
+    /** Disables just this stage and dims it to 0.55 opacity; wins over `disabled` when both are set. */
+    isDisabled?: boolean;
+    /** @deprecated Use `isDisabled` — renamed to match every other field. */
     disabled?: boolean;
     /** Adds a check icon before the label only when this stage is completed. */
     showCheck?: boolean;
@@ -90,7 +94,9 @@ export interface StepperStageProps {
     onClick?: () => void;
     /** Disables interactivity without dimming opacity (unlike disabled). */
     isReadOnly?: boolean;
-    /** Disables this node and dims it to 0.55 opacity. */
+    /** Disables this node and dims it to 0.55 opacity; wins over `disabled` when both are set. */
+    isDisabled?: boolean;
+    /** @deprecated Use `isDisabled` — renamed to match every other field. */
     disabled?: boolean;
     /** Defaults true here (unlike StageItem's false); StageProgress always overrides it explicitly. */
     showCheck?: boolean;

package/dist/Components/StageProgress/StageProgressProps.js

@@ -18,14 +18,18 @@ const resolveStagePalette = (theme, colorScheme = "primary") => {
     // 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.
     const softText = (0, accentText_1.accentTextOnCanvas)(scale, soft);
+    const muted = gray[100];
+    // A fixed gray[500] clears AA against the canvas but not against `muted` itself (gray[100]) on
+    // several brands — walk gray's own rungs against the actual upcoming-state fill instead.
+    const mutedText = (0, accentText_1.accentTextOnCanvas)(gray, muted);
     return {
         soft,
         softText,
         strong,
         onStrong,
         hover: solid.hoverFill,
-        muted: gray[100],
-        mutedText: gray[500],
+        muted,
+        mutedText,
     };
 };
 exports.resolveStagePalette = resolveStagePalette;

package/dist/Components/StageProgress/StepperStage.js

@@ -5,13 +5,16 @@ const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const primitives_1 = require("../../Theme/tokens/primitives");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const StageProgressProps_1 = require("./StageProgressProps");
 const sizeMap = {
     sm: { circle: "24px", font: "0.7rem", label: "0.7rem", icon: 12, minW: "84px" },
     md: { circle: "30px", font: "0.8rem", label: "0.8rem", icon: 14, minW: "104px" },
     lg: { circle: "38px", font: "0.95rem", label: "0.9rem", icon: 16, minW: "124px" },
 };
-const StepperStage = ({ label, number, state, size = "md", colorScheme = "primary", onClick, isReadOnly = false, disabled = false, showCheck = true, isFirst, isLast, leftDone, rightDone, scrollIntoViewWhenActive = true, }) => {
+const StepperStage = ({ label, number, state, size = "md", colorScheme = "primary", onClick, isReadOnly = false, isDisabled, disabled: legacyDisabled = false, showCheck = true, isFirst, isLast, leftDone, rightDone, scrollIntoViewWhenActive = true, }) => {
+    const disabled = isDisabled !== null && isDisabled !== void 0 ? isDisabled : legacyDisabled;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const palette = (0, StageProgressProps_1.resolveStagePalette)(theme, colorScheme);
     const ref = (0, react_1.useRef)(null);
@@ -31,7 +34,7 @@ const StepperStage = ({ label, number, state, size = "md", colorScheme = "primar
     const circleColor = filled ? palette.onStrong : palette.mutedText;
     const circleBorder = filled ? palette.strong : palette.muted;
     const line = (done, hidden) => ((0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", height: "2px", bg: done ? palette.strong : palette.muted, visibility: hidden ? "hidden" : "visible", transition: "background 0.18s ease" }));
-    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { ref: ref, direction: "column", align: "center", flex: "1", minWidth: s.minW, flexShrink: 0, as: (interactive ? "button" : "div"), type: interactive ? "button" : undefined, "data-group": "", border: "none", bg: "transparent", cursor: interactive ? "pointer" : "default", opacity: disabled ? 0.55 : 1, onClick: interactive ? onClick : undefined, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", width: "100%", children: [line(leftDone, isFirst), (0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: s.circle, borderRadius: "full", flexShrink: 0, bg: circleBg, color: circleColor, border: "2px solid", borderColor: circleBorder, fontSize: s.font, fontWeight: 600, transition: "all 0.18s ease", "aria-current": state === "active" ? "step" : undefined, sx: state === "active"
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { ref: ref, direction: "column", align: "center", flex: "1", minWidth: s.minW, flexShrink: 0, as: (interactive ? "button" : "div"), type: interactive ? "button" : undefined, "data-group": "", "aria-disabled": disabled ? true : undefined, border: "none", bg: "transparent", cursor: interactive ? "pointer" : "default", opacity: disabled ? 0.55 : 1, onClick: interactive ? onClick : undefined, borderRadius: "lg", sx: interactive ? (0, focusRing_styles_1.focusVisibleStyles)(theme.colors) : undefined, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", width: "100%", children: [line(leftDone, isFirst), (0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: s.circle, borderRadius: "full", flexShrink: 0, bg: circleBg, color: circleColor, border: "2px solid", borderColor: circleBorder, fontSize: s.font, fontWeight: 600, transition: (0, primitives_1.transitionFor)(["background-color", "border-color", "color", "box-shadow"]), "aria-current": state === "active" ? "step" : undefined, sx: state === "active"
                             ? { boxShadow: `0 0 0 4px ${palette.soft}` }
                             : undefined, _groupHover: interactive
                             ? { borderColor: palette.strong, bg: palette.strong, color: palette.onStrong }

package/dist/Components/StatCard/StatCard.d.ts

@@ -0,0 +1,4 @@
+import type { StatCardProps } from "./StatCardProps";
+/** KPI tile: tinted icon chip, label, 2xl tabular value, delta coloured by whether the change is good. */
+declare const StatCard: ({ label, value, delta, trend, goodDirection, hint, icon: Icon, isLoading, onClick, "aria-label": ariaLabel, "data-testid": testId, }: StatCardProps) => import("react/jsx-runtime").JSX.Element;
+export default StatCard;

package/dist/Components/StatCard/StatCard.js

@@ -0,0 +1,42 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const motion_2 = require("../../Theme/chakra/motion");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const Skeletons_1 = __importDefault(require("../Skeletons/Skeletons"));
+const StatCardSkeleton = ({ hasIcon }) => ((0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", gap: 3, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 2, children: [hasIcon && (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: 8, width: 8 }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: 3, width: "40%" })] }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: 7, width: "55%" }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: 3, width: "45%" })] }));
+/** KPI tile: tinted icon chip, label, 2xl tabular value, delta coloured by whether the change is good. */
+const StatCard = ({ label, value, delta, trend, goodDirection = "up", hint, icon: Icon, isLoading = false, onClick, "aria-label": ariaLabel, "data-testid": testId, }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const isInteractive = !!onClick && !isLoading;
+    const deltaColor = trend
+        ? trend === goodDirection
+            ? colors.semanticText.success
+            : colors.semanticText.error
+        : colors.textMuted;
+    const DeltaIcon = trend === "down" ? lucide_react_1.ArrowDownRight : lucide_react_1.ArrowUpRight;
+    const surface = {
+        display: "block",
+        w: "100%",
+        textAlign: "left",
+        bg: colors.background[50],
+        borderWidth: "1px",
+        borderColor: colors.boxborder[200],
+        borderRadius: "xl",
+        px: 5,
+        py: 4,
+    };
+    const content = isLoading ? ((0, jsx_runtime_1.jsx)(StatCardSkeleton, { hasIcon: !!Icon })) : ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", direction: "column", gap: 3, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", align: "center", gap: 2, children: [Icon && ((0, jsx_runtime_1.jsx)(react_1.Flex, { as: "span", boxSize: 8, flexShrink: 0, align: "center", justify: "center", borderRadius: "lg", bg: colors.primary.opacity[8], color: colors.accentText, children: (0, jsx_runtime_1.jsx)(Icon, { size: 16, "aria-hidden": true }) })), (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "xs", fontWeight: 500, color: colors.textMuted, children: label })] }), (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", display: "block", fontSize: "2xl", fontWeight: 700, letterSpacing: "-0.02em", lineHeight: "short", color: colors.header[900], sx: { fontVariantNumeric: "tabular-nums" }, children: value }), (delta !== undefined || hint) && ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", align: "center", gap: 1.5, wrap: "wrap", children: [delta !== undefined && ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", align: "center", gap: 0.5, color: deltaColor, "data-testid": "stat-delta", children: [trend && (0, jsx_runtime_1.jsx)(DeltaIcon, { size: 14, "aria-hidden": true }), trend && (0, jsx_runtime_1.jsx)(react_1.VisuallyHidden, { children: trend === "up" ? "Up" : "Down" }), (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "xs", fontWeight: 600, sx: { fontVariantNumeric: "tabular-nums" }, children: delta })] })), hint && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "xs", color: colors.textMuted, children: hint }))] }))] }));
+    if (!isInteractive) {
+        return ((0, jsx_runtime_1.jsx)(react_1.Box, { ...surface, "aria-busy": isLoading || undefined, "data-testid": testId, children: content }));
+    }
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", onClick: onClick, "aria-label": ariaLabel, "data-testid": testId, ...surface, cursor: "pointer", transition: (0, motion_1.transitionFor)(["box-shadow", "border-color"]), _hover: { boxShadow: "sm", borderColor: colors.boxborder[300] }, sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors), ...(0, motion_2.reducedMotionSx)() }, children: content }));
+};
+exports.default = StatCard;

package/dist/Components/StatCard/StatCardProps.d.ts

@@ -0,0 +1,26 @@
+import type { ElementType, MouseEventHandler, ReactNode } from "react";
+type StatTrend = "up" | "down";
+/** KPI tile; delta is green when `trend` matches `goodDirection` (default "up"), else red. */
+export interface StatCardProps {
+    label: ReactNode;
+    /** Large tabular-number figure; pre-format it (currency, units) yourself. */
+    value: ReactNode;
+    /** Change text, e.g. "+12%"; muted unless `trend` is set. */
+    delta?: ReactNode;
+    /** Adds an arrow and SR "Up"/"Down" to the delta; no effect without `delta`. */
+    trend?: StatTrend;
+    /** Which trend counts as good (green); defaults to "up" — use "down" for costs or churn. */
+    goodDirection?: StatTrend;
+    /** Muted text beside the delta, e.g. "vs last month". */
+    hint?: ReactNode;
+    /** Icon component (not an element) shown in a tinted chip before the label. */
+    icon?: ElementType;
+    /** Shows a skeleton and disables the click target. */
+    isLoading?: boolean;
+    /** Turns the tile into a full-size button with hover and focus styles. */
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    /** Applied only when `onClick` makes the tile a button. */
+    "aria-label"?: string;
+    "data-testid"?: string;
+}
+export {};

package/dist/Components/StatCard/StatCardProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/Switch/Switch.d.ts

@@ -1,3 +1,3 @@
 import { SwitchProps } from "./SwitchProps";
-/** Renders as clickable <li> items with no role or keyboard handling — mouse-only; not an accessible substitute for ToggleSwitch or SegmentedControl. */
-export default function Switch({ leftText, rightText, leftIcon, rightIcon, onSwitchToggle, switchActive, }: SwitchProps): import("react/jsx-runtime").JSX.Element;
+/** @deprecated Use `SegmentedControl` — Switch renders it at 12.5rem, growing when the labels need it. */
+export default function Switch({ leftText, rightText, leftIcon, rightIcon, onSwitchToggle, switchActive, surface, "aria-label": ariaLabel, }: SwitchProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/Switch/Switch.js

@@ -1,15 +1,17 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = Switch;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
-const useCustomTheme_1 = require("../../Theme/useCustomTheme");
-/** Renders as clickable <li> items with no role or keyboard handling — mouse-only; not an accessible substitute for ToggleSwitch or SegmentedControl. */
-function Switch({ leftText, rightText, leftIcon, rightIcon, onSwitchToggle, switchActive, }) {
-    const theme = (0, useCustomTheme_1.useCustomTheme)();
-    // Read the palette directly: it is already swapped for the active mode, so pairing the rungs
-    // through useColorModeValue would adapt twice and pick a LIGHT rung on the dark canvas.
-    const highlightBg = theme.colors.primary[50];
-    const borderColor = theme.colors.gray[100];
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { bg: theme.colors.background[50], border: "0.063rem solid", borderColor: borderColor, borderRadius: "1.25rem", p: "0.063rem", w: "12.5rem", position: "relative", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { position: "absolute", top: 0, bottom: 0, w: "50%", bg: highlightBg, border: `0.063rem solid ${theme.colors.primary[500]}`, borderRadius: "1rem", transition: "transform 0.3s ease", transform: switchActive === "left" ? "translateX(0%)" : "translateX(100%)" }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "ul", listStyleType: "none", m: 0, p: "0.063rem", zIndex: 1, position: "relative", children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "li", w: "6.875rem", h: "100%", align: "center", justify: "center", cursor: "pointer", px: 2, fontSize: "0.875rem", fontWeight: switchActive === "left" ? 600 : 400, color: theme.colors.text[900], zIndex: 1, onClick: () => onSwitchToggle("left"), children: [leftIcon, (0, jsx_runtime_1.jsx)(react_1.Text, { ml: leftIcon ? 1 : 0, children: leftText })] }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "li", w: "6.875rem", h: "100%", align: "center", justify: "center", cursor: "pointer", px: 2, fontSize: "0.875rem", fontWeight: switchActive === "right" ? 600 : 400, color: theme.colors.text[900], zIndex: 1, onClick: () => onSwitchToggle("right"), children: [rightIcon, (0, jsx_runtime_1.jsx)(react_1.Text, { ml: rightIcon ? 1 : 0, children: rightText })] })] })] }));
+const SegmentedControl_1 = __importDefault(require("../SegmentedControl/SegmentedControl"));
+/** @deprecated Use `SegmentedControl` — Switch renders it at 12.5rem, growing when the labels need it. */
+function Switch({ leftText, rightText, leftIcon, rightIcon, onSwitchToggle, switchActive, surface, "aria-label": ariaLabel, }) {
+    const options = [
+        { value: "left", label: leftText, icon: leftIcon },
+        { value: "right", label: rightText, icon: rightIcon },
+    ];
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { w: "fit-content", minW: "12.5rem", children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.default, { options: options, value: switchActive, onChange: onSwitchToggle, variant: "brandSlide", surface: surface, isFullWidth: true, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : `${leftText} or ${rightText}` }) }));
 }

package/dist/Components/Switch/SwitchProps.d.ts

@@ -1,9 +1,15 @@
-/** Two-label segmented control (leftText/rightText via switchActive), NOT a binary toggle — for on/off use ToggleSwitch. */
+/** @deprecated Use `SegmentedControl` — this two-option pill is kept only for existing call sites. */
 export type SwitchProps = {
     leftText: string;
     rightText: string;
     leftIcon?: JSX.Element;
     rightIcon?: JSX.Element;
+    /** Fires on click and on arrow/Home/End keys with the newly selected side. */
     onSwitchToggle: (value: "left" | "right") => void;
+    /** Controlled selected side; the pill only moves when this changes. */
     switchActive: "left" | "right";
+    /** Background this sits on. Pass it off the page canvas — on a brand-filled bar the track sinks into the bar and the inactive label is unreadable without it. */
+    surface?: string;
+    /** Names the radiogroup; pass it, as there is no visible group label. */
+    "aria-label"?: string;
 };

package/dist/Components/Table/Table.d.ts

@@ -1,3 +1,3 @@
 import { TableProps } from "./TableProps";
 /** Data table: virtualized-height rows, pagination, filters, selection, and an optional Monday-style grouped board. */
-export default function Table({ data, columns, onSelection, isLoading, isCheckbox, headerBgColor, freezedBgColor, freezedTextColor, tableBorderColor, noBorders, isPagination, onRowClick, selections, isActionFreeze, preferences, paginationMode, infiniteScroll, hasMore, isLoadingMore, groupLoadMore, loadMoreText, loadMorePosition, loadMoreChunkSize, noOfRowsPerPage, totalRecords, onPagination, isTableSettings, headerActions, onGlobalSearch, onNoOfRowsPerPageChange, paginationSelectOptions, tableMaxHeight, minVisibleRows, maxVisibleRows, autoFitViewport, tableSettings, filterSidebar, loadingSkeletonRows, defaultVisibleColumns, density, variant, stripe, groupColors, onAddItem, emptyState, onRefresh, }: TableProps): import("react/jsx-runtime").JSX.Element;
+export default function Table({ data, columns, onSelection, isLoading, isCheckbox, freezedBgColor, freezedTextColor, noBorders, isPagination, onRowClick, selections, isActionFreeze, preferences, paginationMode, infiniteScroll, hasMore, isLoadingMore, groupLoadMore, loadMoreText, loadMorePosition, loadMoreChunkSize, noOfRowsPerPage, totalRecords, onPagination, isTableSettings, headerActions, onGlobalSearch, onNoOfRowsPerPageChange, paginationSelectOptions, tableMaxHeight, minVisibleRows, maxVisibleRows, autoFitViewport, tableSettings, filterSidebar, loadingSkeletonRows, defaultVisibleColumns, density, variant, stripe, groupColors, onAddItem, emptyState, onRefresh, isGlobalSearch, }: TableProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/Table/Table.js

@@ -18,6 +18,10 @@ const Pagination_1 = __importDefault(require("./components/Pagination"));
 const TableHeader_1 = __importDefault(require("./components/TableHeader"));
 const TableBody_1 = __importDefault(require("./components/TableBody"));
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const motion_2 = require("../../Theme/chakra/motion");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const rowMetrics_1 = require("./components/rowMetrics");
 const scrollbar_1 = require("../../Theme/tokens/builders/scrollbar");
 const scrollShadow_1 = require("../../Theme/tokens/builders/scrollShadow");
 const useTable_1 = __importDefault(require("./hooks/useTable"));
@@ -33,23 +37,24 @@ const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
 const lucide_react_1 = require("lucide-react");
 const MotionBox = (0, framer_motion_1.motion)(react_2.Box);
 /** Data table: virtualized-height rows, pagination, filters, selection, and an optional Monday-style grouped board. */
-function Table({ data, columns, onSelection, isLoading, isCheckbox = false, headerBgColor, freezedBgColor, freezedTextColor, tableBorderColor, noBorders = false, isPagination = true, onRowClick, selections, isActionFreeze = true, preferences = {
+function Table({ data, columns, onSelection, isLoading, isCheckbox = false, freezedBgColor, freezedTextColor, noBorders = false, isPagination = true, onRowClick, selections, isActionFreeze = true, preferences = {
     url: "",
     token: "",
     key: "",
     name: "",
     page: "",
     orgId: "",
-}, paginationMode = "client", infiniteScroll = false, hasMore, isLoadingMore = false, groupLoadMore = false, loadMoreText = "Load more", loadMorePosition = "top", loadMoreChunkSize, noOfRowsPerPage = 50, totalRecords = 0, onPagination, isTableSettings = false, headerActions, onGlobalSearch, onNoOfRowsPerPageChange, paginationSelectOptions, tableMaxHeight, minVisibleRows, maxVisibleRows, autoFitViewport, tableSettings, filterSidebar, loadingSkeletonRows, defaultVisibleColumns, density = "normal", variant = "classic", stripe, groupColors, onAddItem, emptyState, onRefresh,
-// onColumnFilter
- }) {
-    var _a, _b, _c, _d;
+}, paginationMode = "client", infiniteScroll = false, hasMore, isLoadingMore = false, groupLoadMore = false, loadMoreText = "Load more", loadMorePosition = "top", loadMoreChunkSize, noOfRowsPerPage = 50, totalRecords = 0, onPagination, isTableSettings = false, headerActions, onGlobalSearch, onNoOfRowsPerPageChange, paginationSelectOptions, tableMaxHeight, minVisibleRows, maxVisibleRows, autoFitViewport, tableSettings, filterSidebar, loadingSkeletonRows, defaultVisibleColumns, density = "normal", variant = "classic", stripe = false, groupColors, onAddItem, emptyState, onRefresh, isGlobalSearch = true, }) {
+    var _a, _b, _c, _d, _e;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const clearFiltersTone = (0, react_1.useMemo)(() => (0, filledSurface_1.resolveFilledSurface)(theme.colors.semantic.error, theme.colors), [theme.colors]);
     const variantTokens = (0, react_1.useMemo)(() => variants_1.TABLE_VARIANTS[variant](theme.colors, (0, accentText_1.isDarkCanvas)(theme.colors.backgroundColor.main)), [variant, theme.colors]);
     const [columnsSearch, setColumnsSearch] = (0, react_1.useState)({});
     const tableContainerRef = (0, react_1.useRef)(null);
     const { isOpen: isFilterModalOpen, onOpen: onFilterModalOpen, onClose: onFilterModalClose } = (0, react_2.useDisclosure)();
-    const filterMode = (_a = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.filterMode) !== null && _a !== void 0 ? _a : "sidebar";
+    // Below `md` the sidebar has no room — default to the modal, unless the consumer picked a mode.
+    const isBelowMdFilter = (_a = (0, react_2.useBreakpointValue)({ base: true, md: false }, { ssr: false })) !== null && _a !== void 0 ? _a : false;
+    const filterMode = (_b = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.filterMode) !== null && _b !== void 0 ? _b : (isBelowMdFilter ? "modal" : "sidebar");
     const [viewportAvailableH, setViewportAvailableH] = (0, react_1.useState)(500);
     const isServerPagination = paginationMode === "server";
     const { preferences: tablePreferencesData, loading } = (0, usePreferences_1.useGetPreferences)({
@@ -78,8 +83,7 @@ function Table({ data, columns, onSelection, isLoading, isCheckbox = false, head
         }
         return {};
     }, [tablePreferencesData]);
-    const { tableData, isContent, isLink, headerRefs, columnWidths, handleSort, handleCheckbox, filteredData, startRow, endRow, selection, columnsSort, currentPage, pages, rowsPerPage, handlePageSizeChange, setCurrentPage, columnsList, handleColumnPreferences, isSelecting, selectAllRowsRef, } = (0, useTable_1.default)({
-        tableBorderColor,
+    const { tableData, isContent, isLink, headerRefs, columnWidths, handleSort, handleCheckbox, filteredData, startRow, selection, columnsSort, currentPage, pages, rowsPerPage, handlePageSizeChange, setCurrentPage, columnsList, handleColumnPreferences, isSelecting, selectAllRowsRef, } = (0, useTable_1.default)({
         data,
         isPagination,
         selections,
@@ -152,8 +156,9 @@ function Table({ data, columns, onSelection, isLoading, isCheckbox = false, head
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [rowsPerPage]);
     (0, react_1.useEffect)(() => {
-        if (tablePreferences === null || tablePreferences === void 0 ? void 0 : tablePreferences.density) {
-            setDensityState(tablePreferences.density);
+        const saved = tablePreferences === null || tablePreferences === void 0 ? void 0 : tablePreferences.density;
+        if (typeof saved === "string" && saved in rowMetrics_1.DENSITY_ROWS) {
+            setDensityState(saved);
         }
     }, [tablePreferences === null || tablePreferences === void 0 ? void 0 : tablePreferences.density]);
     (0, react_1.useEffect)(() => {
@@ -278,13 +283,11 @@ function Table({ data, columns, onSelection, isLoading, isCheckbox = false, head
                 ? `Showing ${loadMoreBase.length} of ${totalRecords}`
                 : `Showing ${loadMoreBase.length}`
             : "Showing all records";
-    const tablePaginationText = (0, react_1.useMemo)(() => isServerPagination
+    const tablePaginationText = isServerPagination
         ? `${startRow + 1} - ${Math.min(startRow + rowsPerPage, totalRecords)} of ${totalRecords}`
-        : `${startRow + 1} - ${endRow > tableData.length ? tableData.length : endRow} of ${tableData.length}`, [startRow, rowsPerPage, totalRecords, endRow, tableData.length]); // eslint-disable-line react-hooks/exhaustive-deps
-    const controlsHeight = 45;
-    const estimatedRowHeight = 45;
-    // In grouped mode the rendered rows come from the full grouped source, not the
-    // paged slice — base the height on that so a 1-result search isn't clipped.
+        : `${startRow + 1} - ${Math.min(startRow + rowsPerPage, tableData.length)} of ${tableData.length}`;
+    const rowHeight = (0, rowMetrics_1.rowHeightFor)(densityState);
+    const headerHeight = (0, rowMetrics_1.pxOf)(variantTokens.header.height);
     const actualRows = isGrouped ? groupedSource.length : _filteredData.length;
     const isEmptyState = !isTableLoading && actualRows === 0;
     const loadingRowsCount = typeof loadingSkeletonRows === "number" ? Math.max(1, loadingSkeletonRows) : 4;
@@ -311,11 +314,11 @@ function Table({ data, columns, onSelection, isLoading, isCheckbox = false, head
     }, [autoFitViewport]);
     const heightRowsCount = isTableLoading ? loadingRowsCount : visibleRowsCount;
     const isCompactRows = heightRowsCount <= 1 && !(filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) && !isGrouped && !isEmptyState;
-    let rowsHeight = heightRowsCount * estimatedRowHeight + estimatedRowHeight;
+    let rowsHeight = heightRowsCount * rowHeight + headerHeight;
     if (isGrouped)
-        rowsHeight += ((_b = renderGroups === null || renderGroups === void 0 ? void 0 : renderGroups.length) !== null && _b !== void 0 ? _b : 1) * 42; // group header rows
+        rowsHeight += ((_c = renderGroups === null || renderGroups === void 0 ? void 0 : renderGroups.length) !== null && _c !== void 0 ? _c : 1) * rowMetrics_1.GROUP_HEADER_HEIGHT;
     if (isEmptyState)
-        rowsHeight = Math.max(rowsHeight, 200); // room for the empty state
+        rowsHeight = Math.max(rowsHeight, headerHeight + rowMetrics_1.EMPTY_STATE_HEIGHT);
     const dynamicMaxH = Math.min(500, rowsHeight);
     const fittedMaxH = autoFitViewport ? Math.min(dynamicMaxH, viewportAvailableH) : dynamicMaxH;
     const tableMaxH = typeof tableMaxHeight === "number" ? tableMaxHeight : (isCompactRows ? rowsHeight + 8 : fittedMaxH);
@@ -369,39 +372,43 @@ function Table({ data, columns, onSelection, isLoading, isCheckbox = false, head
           from { transform: rotate(0deg); }
           to { transform: rotate(360deg); }
         }
-      ` }), (0, jsx_runtime_1.jsxs)(react_2.Box, { bg: theme.colors.background[50], border: `0.063rem solid ${theme.colors.boxborder[200]}`, borderRadius: "base", 
-                // Square children poked past the rounded border, leaving a gap at each corner.
-                overflow: "hidden", children: [filterSidebar && filterMode === "modal" && ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isFilterModalOpen, onClose: onFilterModalClose, size: "4xl", scrollBehavior: "inside", children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, {}), (0, jsx_runtime_1.jsxs)(react_2.ModalContent, { bg: theme.colors.background[50], my: 0, top: "10%", position: "fixed", left: "auto", right: "auto", children: [(0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, { size: "sm" }), (0, jsx_runtime_1.jsx)(react_2.ModalBody, { p: 0, children: (0, jsx_runtime_1.jsx)(LeftFilterPane_1.default, { 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 }) })] })] })), (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "start", children: [filterMode === "sidebar" && ((0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(LeftFilterPane_1.default, { 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 }) })), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", minW: 0, children: [(0, jsx_runtime_1.jsxs)(react_2.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 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Filter", placement: "top", children: (0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", display: "inline-block", children: [(0, jsx_runtime_1.jsx)(react_3.Icon, { as: lucide_react_1.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 && ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: "-6px", right: "-10px", bg: theme.colors.primary[(0, filledSurface_1.solidFillRung)(theme.colors.primary, theme.colors.white)], color: (0, filledSurface_1.labelOnFill)(theme.colors.primary[(0, filledSurface_1.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) {
-                                                                            filterSidebar.onClearAllHandler();
-                                                                        }
-                                                                        else {
-                                                                            (_a = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onApply) === null || _a === void 0 ? void 0 : _a.call(filterSidebar, {});
-                                                                        }
-                                                                    }, _hover: { bg: theme.colors.red[600] }, display: "flex", alignItems: "center", justifyContent: "center", zIndex: 2, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 10, strokeWidth: 3 }) }))] }) }), (0, jsx_runtime_1.jsx)(Divider_1.default, {})] })), (0, jsx_runtime_1.jsx)(TableSearch_1.default, { onSearch: onGlobalSearch }), isTableSettings && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Divider_1.default, {}), (0, jsx_runtime_1.jsx)(TableSettings_1.default, { columns: columnsList, onSave: (cols, group) => handleSettingsSave(cols, group), tableSettings: tableSettings, density: densityState, onDensityChange: handleDensityChange, groupBy: groupByState })] })), onRefresh && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Divider_1.default, {}), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Refresh", placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.Box, { display: "flex", justifyContent: "flex-end", cursor: "pointer", transition: "all 0.2s ease", color: theme.colors.text[500], _hover: {
-                                                                color: theme.colors.accentText,
-                                                                transform: "scale(1.1)"
-                                                            }, onClick: async () => {
-                                                                if (!isRefreshing) {
-                                                                    setIsRefreshing(true);
-                                                                    try {
-                                                                        await onRefresh();
+      ` }), (0, jsx_runtime_1.jsxs)(react_2.Box, { bg: theme.colors.background[50], border: `0.063rem solid ${theme.colors.boxborder[200]}`, borderRadius: "xl", overflow: "hidden", children: [filterSidebar && filterMode === "modal" && ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isFilterModalOpen, onClose: onFilterModalClose, size: "4xl", scrollBehavior: "inside", children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, {}), (0, jsx_runtime_1.jsxs)(react_2.ModalContent, { bg: theme.colors.surfaceRaised, my: 0, top: "10%", position: "fixed", left: "auto", right: "auto", children: [(0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, { size: "sm" }), (0, jsx_runtime_1.jsx)(react_2.ModalBody, { p: 0, children: (0, jsx_runtime_1.jsx)(LeftFilterPane_1.default, { 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: (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 }) })] })] })), (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "start", children: [filterMode === "sidebar" && ((0, jsx_runtime_1.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: rowMetrics_1.TOOLBAR_HEIGHT + tableMaxH }, minHeight: (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? "32rem" : "auto", children: (0, jsx_runtime_1.jsx)(LeftFilterPane_1.default, { height: rowMetrics_1.TOOLBAR_HEIGHT + tableMaxH, theme: theme, sections: (_e = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.sidebarOptions) !== null && _e !== void 0 ? _e : [], 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 }) })), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", minW: 0, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", px: 3, py: 0, height: `${rowMetrics_1.TOOLBAR_HEIGHT}px`, gap: 3, flexWrap: "nowrap", bg: theme.colors.background[50], borderBottom: `0.063rem solid ${theme.colors.boxborder[200]}`, children: [[
+                                                filterSidebar && ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Filter", placement: "top", children: (0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", display: "inline-block", children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", "aria-label": "Filter", "aria-haspopup": filterMode === "modal" ? "dialog" : undefined, "aria-expanded": filterMode === "modal"
+                                                                    ? isFilterModalOpen
+                                                                    : !!(filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar), display: "inline-flex", alignItems: "center", justifyContent: "center", p: 0, bg: "transparent", border: "none", borderRadius: "md", cursor: "pointer", onClick: filterMode === "modal" ? onFilterModalOpen : filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.filterSidebarToggle, _hover: {
+                                                                    color: theme.colors.accentText,
+                                                                }, sx: (0, focusRing_styles_1.focusVisibleStyles)(theme.colors), children: (0, jsx_runtime_1.jsx)(react_3.Icon, { as: lucide_react_1.Filter, transform: "scaleX(-1)", boxSize: 4, color: sidebarActiveCount > 0 ? theme.colors.accentText : theme.colors.text[500] }) }), sidebarActiveCount > 0 && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", "aria-label": "Clear filters", position: "absolute", top: "-6px", right: "-10px", bg: theme.colors.primary[(0, filledSurface_1.solidFillRung)(theme.colors.primary, theme.colors.white)], color: (0, filledSurface_1.labelOnFill)(theme.colors.primary[(0, filledSurface_1.solidFillRung)(theme.colors.primary, theme.colors.white)], theme.colors.white, theme.colors.black), border: "none", borderRadius: "full", p: "1px", cursor: "pointer", onClick: (e) => {
+                                                                    var _a;
+                                                                    e.stopPropagation();
+                                                                    if (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onClearAllHandler) {
+                                                                        filterSidebar.onClearAllHandler();
                                                                     }
-                                                                    finally {
-                                                                        setIsRefreshing(false);
+                                                                    else {
+                                                                        (_a = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onApply) === null || _a === void 0 ? void 0 : _a.call(filterSidebar, {});
                                                                     }
+                                                                }, _hover: { bg: clearFiltersTone.hoverFill, color: clearFiltersTone.hoverColor }, display: "flex", alignItems: "center", justifyContent: "center", zIndex: 2, sx: (0, focusRing_styles_1.focusVisibleStyles)(theme.colors), children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 10, strokeWidth: 3 }) }))] }) }, "filter")),
+                                                isGlobalSearch && (0, jsx_runtime_1.jsx)(TableSearch_1.default, { onSearch: onGlobalSearch }, "search"),
+                                                isTableSettings && ((0, jsx_runtime_1.jsx)(TableSettings_1.default, { columns: columnsList, onSave: (cols, group) => handleSettingsSave(cols, group), tableSettings: tableSettings, density: densityState, onDensityChange: handleDensityChange, groupBy: groupByState }, "settings")),
+                                                onRefresh && ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Refresh", placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", "aria-label": "Refresh", "aria-busy": isRefreshing, display: "flex", justifyContent: "flex-end", cursor: "pointer", bg: "transparent", border: "none", p: 0, transition: (0, motion_1.transitionFor)(["color", "transform"], "base"), color: theme.colors.text[500], _hover: {
+                                                            color: theme.colors.accentText,
+                                                            transform: "scale(1.1)",
+                                                        }, onClick: async () => {
+                                                            if (!isRefreshing) {
+                                                                setIsRefreshing(true);
+                                                                try {
+                                                                    await onRefresh();
+                                                                }
+                                                                finally {
+                                                                    setIsRefreshing(false);
                                                                 }
-                                                            }, style: {
-                                                                animation: isRefreshing
-                                                                    ? "pixelize-table-spin 1s linear infinite"
-                                                                    : "none"
-                                                            }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.RefreshCw, { size: 16 }) }) })] })), headerActions && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Divider_1.default, {}), (0, jsx_runtime_1.jsx)(HeaderActions_1.default, { actions: headerActions, selections: selection })] })), (0, jsx_runtime_1.jsx)(ActiveFilters_1.default, { columns: columnsList, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch }), (0, jsx_runtime_1.jsxs)(react_2.Box, { ml: "auto", display: "flex", alignItems: "center", gap: 2, children: [groupLoadMoreActive && loadMorePosition === "top" && (groupLoadMoreCaption || canGroupLoadMore) && ((0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", gap: 2, flex: "0 0 auto", children: [groupLoadMoreCaption && ((0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "0.75rem", color: theme.colors.text[500], whiteSpace: "nowrap", children: groupLoadMoreCaption })), canGroupLoadMore && ((0, jsx_runtime_1.jsx)(Button_1.default, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText }))] })), (isPagination || isServerPagination) && !isGrouped && !canInfinite && !isCompactHeader && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Pagination_1.default, { 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 && ((0, jsx_runtime_1.jsxs)(react_2.Popover, { isOpen: isPaginationPopoverOpen, onClose: () => setIsPaginationPopoverOpen(false), placement: "bottom-end", children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Pagination", size: "sm", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.EllipsisVertical, { size: 18 }), color: theme.colors.text[500], _hover: {
+                                                            }
+                                                        }, animation: isRefreshing ? "pixelize-table-spin 1s linear infinite" : undefined, sx: (0, motion_2.reducedMotionSx)(), children: (0, jsx_runtime_1.jsx)(lucide_react_1.RefreshCw, { size: 16 }) }) }, "refresh")),
+                                                headerActions && ((0, jsx_runtime_1.jsx)(HeaderActions_1.default, { actions: headerActions, selections: selection }, "actions")),
+                                            ]
+                                                .filter(Boolean)
+                                                .flatMap((tool, i) => (i === 0 ? [tool] : [(0, jsx_runtime_1.jsx)(Divider_1.default, {}, `divider-${i}`), tool])), (0, jsx_runtime_1.jsx)(ActiveFilters_1.default, { columns: columnsList, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch }), (0, jsx_runtime_1.jsxs)(react_2.Box, { ml: "auto", display: "flex", alignItems: "center", gap: 2, children: [groupLoadMoreActive && loadMorePosition === "top" && (groupLoadMoreCaption || canGroupLoadMore) && ((0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", gap: 2, flex: "0 0 auto", children: [groupLoadMoreCaption && ((0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "0.75rem", color: theme.colors.text[500], whiteSpace: "nowrap", children: groupLoadMoreCaption })), canGroupLoadMore && ((0, jsx_runtime_1.jsx)(Button_1.default, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText }))] })), (isPagination || isServerPagination) && !isGrouped && !canInfinite && !isCompactHeader && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Pagination_1.default, { currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: pages, paginationText: tablePaginationText, handlePageSizeChange: handlePageSizeChange, dataLength: tableData.length, isServerPagination: isServerPagination, paginationSelectOptions: paginationSelectOptions }) })), (isPagination || isServerPagination) && !isGrouped && !canInfinite && isCompactHeader && tableData.length > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Popover, { isOpen: isPaginationPopoverOpen, onClose: () => setIsPaginationPopoverOpen(false), placement: "bottom-end", children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Pagination", size: "sm", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.EllipsisVertical, { size: 18 }), color: theme.colors.text[500], _hover: {
                                                                         color: theme.colors.accentText,
-                                                                    }, onClick: () => setIsPaginationPopoverOpen((open) => !open) }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { maxW: "22rem", p: 2, zIndex: 1600, bg: theme.colors.background[50], boxShadow: "lg", children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: 0, children: (0, jsx_runtime_1.jsx)(Pagination_1.default, { columns: columns, currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: pages, paginationText: tablePaginationText, handlePageSizeChange: handlePageSizeChange, dataLength: tableData.length, isServerPagination: isServerPagination, paginationSelectOptions: paginationSelectOptions, isVisiblity: true }) }) }) })] }))] })] }), (0, jsx_runtime_1.jsxs)(react_2.TableContainer, { ref: tableContainerRef, position: "relative", h: isTableLoading ? tableMaxH : undefined, maxH: !isTableLoading ? tableMaxH : undefined, pb: isTableLoading ? 0 : compactScrollbarPadding, overflowY: isCompactRows ? "hidden" : "auto", overflowX: "auto", sx: {
+                                                                    }, onClick: () => setIsPaginationPopoverOpen((open) => !open) }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { maxW: "22rem", p: 2, zIndex: 1600, bg: theme.colors.surfaceRaised, boxShadow: "lg", children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: 0, children: (0, jsx_runtime_1.jsx)(Pagination_1.default, { currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: pages, paginationText: tablePaginationText, handlePageSizeChange: handlePageSizeChange, dataLength: tableData.length, isServerPagination: isServerPagination, paginationSelectOptions: paginationSelectOptions }) }) }) })] }))] })] }), (0, jsx_runtime_1.jsxs)(react_2.TableContainer, { ref: tableContainerRef, position: "relative", h: isTableLoading ? tableMaxH : undefined, maxH: !isTableLoading ? tableMaxH : undefined, pb: isTableLoading ? 0 : compactScrollbarPadding, overflowY: isCompactRows ? "hidden" : "auto", overflowX: "auto", sx: {
                                             ...(0, scrollShadow_1.scrollShadowStyles)(theme.colors.background[50]),
                                             ...(0, scrollbar_1.scrollbarStyles)(theme.colors),
                                             // Compact rows hide the horizontal bar until hover to keep the row height.
@@ -429,5 +436,5 @@ function Table({ data, columns, onSelection, isLoading, isCheckbox = false, head
                                                         backgroundColor: "transparent",
                                                         zIndex: 999,
                                                     },
-                                                }, children: [(0, jsx_runtime_1.jsx)(react_3.Thead, { position: "sticky", top: 0, zIndex: 4, bg: variantTokens.header.bg, children: (0, jsx_runtime_1.jsx)(TableHeader_1.default, { columns: columnsList, isCheckbox: isCheckbox, headerBgColor: headerBgColor !== null && headerBgColor !== void 0 ? headerBgColor : theme.colors.backgroundColor.muted, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : theme.colors.text[500], handleSort: handleSort, headerRefs: headerRefs, columnWidths: columnWidths, columnsSort: columnsSort, noBorders: noBorders, handleCheckbox: handleCheckbox, isLoading: isTableLoading, checked: headerChecked, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze, setColumnsSearch: setColumnsSearch, columnsSearch: columnsSearch, isSelecting: isSelecting }) }), (0, jsx_runtime_1.jsx)(react_3.Tbody, { children: (0, jsx_runtime_1.jsx)(TableBody_1.default, { data: isGrouped ? groupedSource : _filteredData, groups: renderGroups, onAddItem: onAddItem, columns: columnsList, startRow: isGrouped ? 0 : startRow, endRow: endRow, scrollContainerRef: tableContainerRef, isCheckbox: isCheckbox, columnWidths: columnWidths, noBorders: noBorders, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : theme.colors.text[500], handleCheckbox: handleCheckbox, selections: selection, isLoading: isTableLoading, loadingSkeletonRows: loadingSkeletonRows, onRowClick: onRowClick, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze, density: densityState, stripe: stripe, emptyState: emptyState }) })] }), canInfinite && isLoadingMore && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "center", align: "center", py: 3, gap: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "sm", color: theme.colors.accentText }), (0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "0.75rem", color: theme.colors.text[500], children: "Loading more\u2026" })] }))] }), groupLoadMoreActive && loadMorePosition === "bottom" && (groupLoadMoreCaption || canGroupLoadMore) && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "center", align: "center", gap: 3, py: 3, borderTop: `0.063rem solid ${theme.colors.boxborder[200]}`, children: [groupLoadMoreCaption && ((0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "0.75rem", color: theme.colors.text[500], children: groupLoadMoreCaption })), canGroupLoadMore && ((0, jsx_runtime_1.jsx)(Button_1.default, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText }))] }))] })] })] })] }));
+                                                }, children: [(0, jsx_runtime_1.jsx)(react_3.Thead, { position: "sticky", top: 0, zIndex: 4, bg: variantTokens.header.bg, children: (0, jsx_runtime_1.jsx)(TableHeader_1.default, { columns: columnsList, isCheckbox: isCheckbox, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : theme.colors.text[500], handleSort: handleSort, headerRefs: headerRefs, columnWidths: columnWidths, columnsSort: columnsSort, noBorders: noBorders, handleCheckbox: handleCheckbox, isLoading: isTableLoading, checked: headerChecked, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze, setColumnsSearch: setColumnsSearch, columnsSearch: columnsSearch, isSelecting: isSelecting }) }), (0, jsx_runtime_1.jsx)(react_3.Tbody, { children: (0, jsx_runtime_1.jsx)(TableBody_1.default, { data: isGrouped ? groupedSource : _filteredData, groups: renderGroups, onAddItem: onAddItem, columns: columnsList, startRow: isGrouped ? 0 : startRow, scrollContainerRef: tableContainerRef, isCheckbox: isCheckbox, columnWidths: columnWidths, noBorders: noBorders, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : theme.colors.text[500], handleCheckbox: handleCheckbox, selections: selection, isLoading: isTableLoading, loadingSkeletonRows: loadingSkeletonRows, onRowClick: onRowClick, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze, density: densityState, stripe: stripe, emptyState: emptyState }) })] }), canInfinite && isLoadingMore && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "center", align: "center", py: 3, gap: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "sm", color: theme.colors.accentText }), (0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "0.75rem", color: theme.colors.text[500], children: "Loading more\u2026" })] }))] }), groupLoadMoreActive && loadMorePosition === "bottom" && (groupLoadMoreCaption || canGroupLoadMore) && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "center", align: "center", gap: 3, py: 3, borderTop: `0.063rem solid ${theme.colors.boxborder[200]}`, children: [groupLoadMoreCaption && ((0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "0.75rem", color: theme.colors.text[500], children: groupLoadMoreCaption })), canGroupLoadMore && ((0, jsx_runtime_1.jsx)(Button_1.default, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText }))] }))] })] })] })] }));
 }