pixelize-design-library 2.4.2-beta.52 → 2.4.2-beta.54

package/CHANGELOG.md

@@ -53,6 +53,7 @@ next major.
   `SelectSearch`, `Search`, `Dropdown`, `SegmentedControl`, `Tabs`, `TableToggle` and the
   `DatePicker` family all grow together and still line up side by side. `sm` is the default size,
   so most call sites gain 6px of height without passing anything.
+- **`PhoneNumberInput` defaults to `size="sm"`, not `md`.** It was the one field still defaulting to `md`, so in a form it stood 4px taller than the `TextInput`s around it. Pass `size="md"` to keep the old height.
 - **Option rows follow the scale: 24/30/34/40px → 26/32/36/40px** in `Select`, `SelectV2`,
   `SearchSelect`, `SelectSearch`, `Dropdown`, table filter selects and Chakra `MenuItem` — always
   6px inside the trigger that opens them (4px at `lg`).
@@ -80,6 +81,41 @@ next major.
 
 ### Fixed
 
+- **`SideBar`'s nav scrollbar thumb was the brand `primary` color.** Every other scrollbar in the
+  library reads a neutral chrome token; the sidebar's hand-rolled CSS (`Constants/Sidebar.ts`) was
+  the one place still reaching for `primary[500]`/`primary[700]`. It now reads
+  `sidebar.mutedIcon`/`mutedLabel` — contrast-resolved against the rail, not brand-colored.
+- **`SideBar` follow-up UI audit — six more fixes, no behavior/prop changes.** `SecondaryBar`'s own
+  scroll panel had no scrollbar styling (fell through to the page's default) and a hardcoded,
+  collision-prone id — now matches `SideBar`'s own generated-id + `cssForScrollBar` pattern. The
+  collapsed-rail badge dot (`red[400]`) is now `sidebar.semanticText.error`, so it stays legible in
+  both modes instead of drifting. Six `whiteAlpha.100` hover/rest fills (header collapse button,
+  Add New, user footer, inline submenu row, app switcher cell, `SecondaryBar`'s collapse toggle)
+  were below the sidebar's own perceptible-step floor — bumped to `.200`, matching every other row.
+  The collapsed-flyout submenu showed Chakra's built-in "?" glyph for a sub-item with no `icon`; it
+  now draws the same dot the always-visible inline submenu already used. Hovering an *active* flyout
+  row got lighter-then-darker instead of lighter-then-lighter — fixed to the same `.300`→`.400` step
+  every other active row uses. The default (no `logo`/`avatarUrl`) header logo tile and footer
+  avatar initials painted a raw `primary` fill that measured ~1:1 against the rail — invisible — on
+  zinc, skyline and storefront; both now use the same rail-safe surface/ink pairing the active-row
+  accent already resolves against.
+- **`SideBar` audit round 2 — muted-chrome contrast, inline-submenu consistency, demo previews.**
+  `sidebar.mutedIcon`/`mutedLabel` cleared AA against the bare rail and `elevated` but not against
+  a whiteAlpha hover/active overlay on top of either — now resolved with `settleAcross` against
+  both surfaces at once, gated by new `paletteContrast.test.ts` cases across 9 brands x 2 modes.
+  The expanded rail's always-visible inline submenu (`MenuItemBox.tsx`) now matches the
+  fill+accent-bar+`activeAccent.label` pattern the top-level row and the collapsed-flyout submenu
+  already use for an active item, instead of only swapping label color. Demo-only: the playground's
+  docked-sidebar previews (`src/Pages/demo.sidebar.tsx`) rendered blank below the `lg` breakpoint
+  because `SideBar` reads the real `window` width, not the preview box's — now shows a
+  "widen the window" fallback there instead; the secondary-bar demo's panel was also widened so its
+  drill-down chevron isn't clipped.
+- **`Table` clipped its last row(s) whenever a cell wrapped to more than one line.** The container
+  height was computed as `rows × density height + header`, assuming every row is exactly one line —
+  wrapped text (long values, multi-column data) rendered taller than that, and the box clipped it
+  behind a scrollbar even with empty space left on the page. Tables at or under the row-count cap
+  (`maxVisibleRows`, default 10) now grow to fit their real content instead; larger lists keep the
+  exact capped/scrolling height and virtualize as before, so nothing changes for big record counts.
 - **Icons beside a field are centred at every size and height.** A lone right-hand icon in
   `TextInput` (an `inputRightIcon`, the clear button or the password toggle) sat flush against the
   border while the left one was inset; both now mirror at 6/9/12/15px. `SelectSearch`'s `rightIcon`

package/COMPONENT-GOTCHAS.md

@@ -330,6 +330,7 @@ not enough when the overlay sits inside a transition wrapper — the wrapper kee
 | `SettingsSection` | New optional `action` slot, right of the title/description on the header row — additive, nothing changes without it | — |
 | `Button` / `Buttons` | Icon-only buttons are square. `Buttons` (plural) is themed instead of hardcoded purple | — |
 | `ProgressBar` | Fill lifted to ≥ 3:1 on its track — green/orange/blue/cyan are visibly darker in light mode | — |
+| `PhoneNumberInput` | Default `size` `md` → `sm`, so it matches the `TextInput`s beside it | `size="md"` |
 | `PhoneNumberInput` / `PinInput` / `NoteTextArea` | `ref` now attaches; labels bound; PIN digits grouped and named | — |
 | `RangeDatePicker` | Outside click keeps a fully picked range (was discarded) | — |
 | `FilePreview` / `ContactForm` | Radius `2xl` → `xl` | — |
@@ -1410,12 +1411,45 @@ properties first, or doesn't support the pseudo-elements at all, fell back to th
 scrollbar: a plain bar with no relation to the dark sidebar theme, showing up the moment a nav list
 (enough sections/items) overflowed the viewport. Fixed by switching to the already-written
 `cssForScrollBar(theme)` (same file), which sets `scrollbarWidth`/`scrollbarColor` **and** the
-webkit pseudo-elements, themed to `sidebar.background[500]` / `primary[500]`, hidden until hover.
-`FlexCss` is removed — `cssForScrollBar` is now the only scrollbar treatment the SideBar uses.
+webkit pseudo-elements, themed to `sidebar.background[500]` / `sidebar.mutedIcon`/`mutedLabel`,
+hidden until hover. `FlexCss` is removed — `cssForScrollBar` is now the only scrollbar treatment
+the SideBar uses. (2026-09-29: the thumb was briefly brand `primary[500]`/`[700]` — since fixed to
+the neutral tokens shown above; `SecondaryBar`'s own scroll panel got the same styling and a
+duplicate-id fix in the same pass.)
 
 **Apply:** nothing to do. If a nav list is long enough to scroll, the bar now stays invisible until
 hovered, in the sidebar's own colors, on every engine — not just Chromium.
 
+### `SideBar` contrast pass — badge dot, hover fills, missing-icon fallback, default avatar/logo (2026-09-29) — fixed
+
+A themed-UI audit found six real defects, none of them behavior changes: the collapsed-rail
+notification dot (`red[400]`) is now `sidebar.semanticText.error`, which stays legible against the
+rail in both modes instead of drifting; six `whiteAlpha.100` hover/rest fills that sat below the
+sidebar's own perceptible-step floor are now `whiteAlpha.200`, matching every other row's hover;
+the collapsed-flyout submenu (`MenuPopoverContent`) no longer shows Chakra's built-in "?" glyph for
+a sub-item with no `icon` — it draws the same small dot the always-visible inline submenu already
+used; hovering an *active* flyout row no longer gets visibly lighter-then-darker (it now steps
+`.300` -> `.400`, like every other active row); and the default (no `logo`/`avatarUrl`) header logo
+tile and footer avatar initials no longer paint a raw `primary` fill, which was within ~1:1 of the
+rail — invisible — on zinc, skyline and storefront.
+
+**Apply:** nothing to do — same props, same markup, visuals only. If you rendered a `SideBar` or
+`SecondaryBar` with a screenshot baseline captured before 2026-09-29, expect the badge dot color,
+some hover states, and the default logo/avatar tile to look different.
+
+### `SideBar` contrast pass round 2 — muted icon/label under a hover fill, inline-submenu state (2026-09-29) — fixed
+
+A follow-up audit found `sidebar.mutedIcon`/`mutedLabel` could dip under WCAG AA when sitting on
+top of an active or hovered row (the whiteAlpha overlay steps), even though the same token cleared
+AA against the bare rail — the token was never resolved against that combined surface. Also, the
+expanded rail's always-visible inline submenu only swapped an active row's label to white with no
+fill or accent bar, unlike every other active row in the family (top-level rows, the
+collapsed-flyout submenu). Both fixed with no prop or markup changes.
+
+**Apply:** nothing to do — same props, visuals only. Expect a muted icon/label under a hover/active
+row to read slightly lighter than before on some brands, and an active inline-submenu item to now
+show a fill and left accent bar matching the rest of the sidebar's active-row styling.
+
 ### `KanbanBoard`'s `permissions.isViewable: false` hides everything, including header actions
 
 Not just the columns — the select/edit/create header bar disappears too, since the whole component

package/dist/Components/Input/PhoneNumberInput.js

@@ -21,7 +21,7 @@ const getFlagEmoji = (countryCode) => {
 const sizeToPt = { xs: 2, sm: -1, md: 2, lg: 4 };
 const sizeToWidth = { xs: "3.5rem", sm: "3.8rem", md: "4rem", lg: "4rem" };
 /** Country-code-aware phone field with a flag/dial-code prefix; `ref` forwards to the number `<input>`. */
-const PhoneNumberInput = (0, react_1.forwardRef)(function PhoneNumberInput({ size = "md", value, codeValueReturn = true, country, countries, placeholder = "Enter phone number", onChange, inputId, selectId, error, errorMessage, helperText, label, id, width = "100%", isInformation, informationMessage, isRequired, onBlur, onFocus, isReadOnly, height, autoComplete, showCountrySelect = true, name, minW, maxW, countrySelectAriaLabel = "Country code", ...rest }, ref) {
+const PhoneNumberInput = (0, react_1.forwardRef)(function PhoneNumberInput({ size = "sm", value, codeValueReturn = true, country, countries, placeholder = "Enter phone number", onChange, inputId, selectId, error, errorMessage, helperText, label, id, width = "100%", isInformation, informationMessage, isRequired, onBlur, onFocus, isReadOnly, height, autoComplete, showCountrySelect = true, name, minW, maxW, countrySelectAriaLabel = "Country code", ...rest }, ref) {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const ids = (0, useFieldIds_1.useFieldIds)(inputId !== null && inputId !== void 0 ? inputId : id, { error, errorMessage, helperText });
     const getCountryTelCode = (0, react_1.useCallback)((countryCode) => {

package/dist/Components/Input/PhoneNumberInputProps.d.ts

@@ -10,6 +10,7 @@ export type PhoneNumberInputProps = {
     label?: string;
     /** Falls back to an auto-generated id (shared with `inputId` when that's omitted too), so the label is always bound. */
     id?: string;
+    /** Control-scale height: "xs" | "sm" | "md" | "lg" (30 / 38 / 42 / 48px). Defaults to "sm", like TextInput, so it lines up in a form. */
     size?: string;
     value?: string;
     codeValueReturn?: boolean;

package/dist/Components/SideBar/SecondaryBar.js

@@ -14,6 +14,7 @@ const lucide_react_1 = require("lucide-react");
 const OverflowTooltipText_1 = __importDefault(require("./components/OverflowTooltipText"));
 const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
 const Sidebar_1 = require("../../Constants/Sidebar");
+const sidebarId_1 = require("./sidebarId");
 const tone_1 = require("../../Theme/tokens/builders/tone");
 const sidebarAccent_1 = require("../../Theme/tokens/builders/sidebarAccent");
 const paletteFromTheme_1 = require("../../Theme/chakra/paletteFromTheme");
@@ -47,7 +48,7 @@ const CollapsedItem = ({ item, isActive, itemFontSize, onItemClick }) => {
                         e.preventDefault();
                         if (!(0, menuDisabled_1.menuDisabled)(item))
                             onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item);
-                    }, bg: isActive ? "whiteAlpha.300" : "transparent", transition: "background 0.12s", children: (0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: item.icon, fontSize: sidebarScale_1.SIDEBAR_ROW.iconSize, color: isActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isActive ? undefined : { color: theme.colors.white }, transition: "color 0.12s" }), badgeVal != null && ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.red[400] }))] }) }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { borderRadius: "lg", bg: theme.colors.sidebar.elevated, boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", cursor: (0, menuDisabled_1.menuDisabled)(item) ? "not-allowed" : "pointer", zIndex: 1500, color: theme.colors.white, border: 'none', children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: 3, children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, justify: "space-between", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, flex: "1", minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: item.icon, fontSize: "md", flexShrink: 0 }), (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: "medium", as: "p", children: item.title })] }), badgeVal != null && ((0, jsx_runtime_1.jsx)(react_2.Badge, { ...softBadge(theme.colors, colorScheme, (0, sidebarAccent_1.sidebarRowPeak)(theme.colors.sidebar.elevated)), fontSize: "xs", variant: variant, borderRadius: radius, children: badgeVal }))] }) }) }) })] }));
+                    }, bg: isActive ? "whiteAlpha.300" : "transparent", transition: "background 0.12s", children: (0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: item.icon, fontSize: sidebarScale_1.SIDEBAR_ROW.iconSize, color: isActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isActive ? undefined : { color: theme.colors.white }, transition: "color 0.12s" }), badgeVal != null && ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.sidebar.semanticText.error }))] }) }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { borderRadius: "lg", bg: theme.colors.sidebar.elevated, boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", cursor: (0, menuDisabled_1.menuDisabled)(item) ? "not-allowed" : "pointer", zIndex: 1500, color: theme.colors.white, border: 'none', children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: 3, children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, justify: "space-between", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, flex: "1", minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: item.icon, fontSize: "md", flexShrink: 0 }), (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: "medium", as: "p", children: item.title })] }), badgeVal != null && ((0, jsx_runtime_1.jsx)(react_2.Badge, { ...softBadge(theme.colors, colorScheme, (0, sidebarAccent_1.sidebarRowPeak)(theme.colors.sidebar.elevated)), fontSize: "xs", variant: variant, borderRadius: radius, children: badgeVal }))] }) }) }) })] }));
 };
 const ExpandedItem = ({ item, isActive, itemFontSize, onItemClick }) => {
     var _a;
@@ -65,9 +66,10 @@ const ExpandedItem = ({ item, isActive, itemFontSize, onItemClick }) => {
 const SecondaryBar = ({ items = [], defaultCollapsed = true, collapsedWidth = "3.5rem", expandedWidth = "10rem", headerFontSize = sidebarScale_1.SIDEBAR_ROW.fontSize, itemFontSize = sidebarScale_1.SIDEBAR_ROW.fontSize, selected, onItemClick, title, icon, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const activeAccent = (0, sidebarAccentColors_1.getSidebarActiveAccent)(theme.colors);
+    const scrollContainerId = (0, sidebarId_1.sanitizeId)((0, react_1.useId)());
     const [collapsed, setCollapsed] = (0, react_1.useState)(defaultCollapsed);
     const width = collapsed ? collapsedWidth : expandedWidth;
-    return ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "nav", "aria-label": title ? `${title} navigation` : "Secondary navigation", transition: (0, motion_1.transitionFor)(["width"], "base"), pos: "sticky", top: 0, sx: viewportHeight_1.fullViewportHeight, w: width, bg: theme.colors.sidebar.background[500], borderLeft: "1px solid", borderColor: theme.colors.sidebar.divider, boxShadow: theme.shadows.md, zIndex: 1, children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "stretch", spacing: 0, h: "100%", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: collapsed ? "center" : "space-between", px: collapsed ? 0 : "10px", gap: "7px", h: Sidebar_1.HEADER_HEIGHT, overflow: "hidden", borderBottom: "1px solid", borderColor: theme.colors.sidebar.divider, flexShrink: 0, children: [!collapsed && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [icon && ((0, jsx_runtime_1.jsx)(react_2.Icon, { as: icon, fontSize: sidebarScale_1.SIDEBAR_ROW.iconSize, color: activeAccent.icon, flexShrink: 0 })), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", minW: 0, children: (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: headerFontSize, fontWeight: 600, color: theme.colors.white, as: "p", children: title !== null && title !== void 0 ? title : "" }) })] })), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", "aria-label": collapsed ? "Expand navigation panel" : "Collapse navigation panel", "aria-expanded": !collapsed, border: "none", bg: "transparent", w: "24px", h: "24px", borderRadius: "lg", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", flexShrink: 0, onClick: () => setCollapsed((c) => !c), _hover: { bg: "whiteAlpha.100" }, transition: "background 0.15s", children: collapsed ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: title !== null && title !== void 0 ? title : "", placement: "right", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 13, color: theme.colors.sidebar.mutedIcon }) })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { size: 13, color: theme.colors.sidebar.mutedIcon })) })] }), (0, jsx_runtime_1.jsx)(react_2.Box, { id: "secondary-scroll-container", flex: "1", minH: 0, overflowY: "auto", overflowX: "hidden", py: 2, px: "6px", children: items.map((item) => {
+    return ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "nav", "aria-label": title ? `${title} navigation` : "Secondary navigation", transition: (0, motion_1.transitionFor)(["width"], "base"), pos: "sticky", top: 0, sx: viewportHeight_1.fullViewportHeight, w: width, bg: theme.colors.sidebar.background[500], borderLeft: "1px solid", borderColor: theme.colors.sidebar.divider, boxShadow: theme.shadows.md, zIndex: 1, children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "stretch", spacing: 0, h: "100%", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: collapsed ? "center" : "space-between", px: collapsed ? 0 : "10px", gap: "7px", h: Sidebar_1.HEADER_HEIGHT, overflow: "hidden", borderBottom: "1px solid", borderColor: theme.colors.sidebar.divider, flexShrink: 0, children: [!collapsed && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [icon && ((0, jsx_runtime_1.jsx)(react_2.Icon, { as: icon, fontSize: sidebarScale_1.SIDEBAR_ROW.iconSize, color: activeAccent.icon, flexShrink: 0 })), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", minW: 0, children: (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: headerFontSize, fontWeight: 600, color: theme.colors.white, as: "p", children: title !== null && title !== void 0 ? title : "" }) })] })), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", "aria-label": collapsed ? "Expand navigation panel" : "Collapse navigation panel", "aria-expanded": !collapsed, border: "none", bg: "transparent", w: "24px", h: "24px", borderRadius: "lg", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", flexShrink: 0, onClick: () => setCollapsed((c) => !c), _hover: { bg: "whiteAlpha.200" }, transition: "background 0.15s", children: collapsed ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: title !== null && title !== void 0 ? title : "", placement: "right", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 13, color: theme.colors.sidebar.mutedIcon }) })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { size: 13, color: theme.colors.sidebar.mutedIcon })) })] }), (0, jsx_runtime_1.jsx)(react_2.Box, { id: scrollContainerId, flex: "1", minH: 0, overflowY: "auto", overflowX: "hidden", py: 2, px: "6px", sx: (0, Sidebar_1.cssForScrollBar)(theme), children: items.map((item) => {
                         var _a;
                         const isActive = String(selected) === String(item.id) ||
                             String(selected) === String(item.title);

package/dist/Components/SideBar/SideBar.js

@@ -8,7 +8,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
-const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
 const sidebarAccentColors_1 = require("./sidebarAccentColors");
 const sidebarId_1 = require("./sidebarId");
 const Sidebar_1 = require("../../Constants/Sidebar");
@@ -36,13 +35,18 @@ const sidebarScale_1 = require("./sidebarScale");
 const viewportHeight_1 = require("../../Theme/tokens/builders/viewportHeight");
 const SidebarHeader = ({ logo, companyName, companySubtitle, toggle, isLoading, onToggle, overlay, onClose, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const activeAccent = (0, sidebarAccentColors_1.getSidebarActiveAccent)(theme.colors);
     if (isLoading) {
         return ((0, jsx_runtime_1.jsx)(react_2.Box, { w: "100%", px: toggle ? 2 : 4, py: 2, h: Sidebar_1.HEADER_HEIGHT, display: "flex", alignItems: "center", flexShrink: 0, children: toggle ? ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", gap: 4, justifyContent: "center", w: "100%", children: (0, jsx_runtime_1.jsx)(react_2.Skeleton, { w: "28px", h: "28px", borderRadius: "lg", startColor: theme.colors.sidebar.background[400], endColor: theme.colors.sidebar.background[300] }) })) : ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 3, w: "100%", children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { w: "28px", h: "28px", borderRadius: "lg", startColor: theme.colors.sidebar.background[400], endColor: theme.colors.sidebar.background[300] }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { h: "1.25rem", w: "60%", borderRadius: "lg", startColor: theme.colors.sidebar.background[400], endColor: theme.colors.sidebar.background[300] })] })) }));
     }
-    const primaryFillRung = (0, filledSurface_1.solidFillRung)(theme.colors.primary, theme.colors.white);
-    const primaryFill = theme.colors.primary[primaryFillRung];
-    const logoNode = logo ? ((0, jsx_runtime_1.jsx)(react_2.Image, { borderRadius: "lg", boxSize: "1.75rem", src: logo, alt: "Company Logo", flexShrink: 0, cursor: toggle ? "pointer" : undefined, onClick: toggle ? onToggle : undefined })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { bg: primaryFill, color: (0, filledSurface_1.labelOnFill)(primaryFill, theme.colors.white, theme.colors.black), borderRadius: "lg", boxSize: "1.75rem", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: "bold", flexShrink: 0, cursor: toggle ? "pointer" : undefined, onClick: toggle ? onToggle : undefined, children: (0, jsx_runtime_1.jsx)(defaultLogo_1.default, {}) }));
-    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { h: Sidebar_1.HEADER_HEIGHT, w: "100%", alignItems: "center", justifyContent: toggle ? "center" : "flex-start", gap: 2, px: toggle ? "8px" : "10px", borderBottom: "1px solid", borderColor: theme.colors.sidebar.divider, minW: 0, overflow: "hidden", flexShrink: 0, children: [logoNode, !toggle && ((0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", minW: 0, children: [(0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "right", fontWeight: 600, fontSize: sidebarScale_1.SIDEBAR_CHROME.titleFontSize, textAlign: "left", color: theme.colors.white, lineHeight: "1.3", as: "p", width: "100%", children: companyName !== null && companyName !== void 0 ? companyName : "" }), companySubtitle && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: sidebarScale_1.SIDEBAR_CHROME.metaFontSize, color: theme.colors.sidebar.mutedLabel, lineHeight: "1.3", isTruncated: true, children: companySubtitle }))] })), !toggle && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", onClick: overlay ? onClose : onToggle, "aria-label": overlay ? "Close menu" : "Collapse sidebar", w: "22px", h: "22px", borderRadius: "lg", bg: "whiteAlpha.100", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, position: "relative", _hover: { bg: "whiteAlpha.300" }, transition: "background 0.15s", sx: {
+    const logoNode = logo ? ((0, jsx_runtime_1.jsx)(react_2.Image, { borderRadius: "lg", boxSize: "1.75rem", src: logo, alt: "Company Logo", flexShrink: 0, cursor: toggle ? "pointer" : undefined, onClick: toggle ? onToggle : undefined })) : ((0, jsx_runtime_1.jsx)(react_2.Box
+    // Rail-safe pairing, not a raw primary fill: primary[500] equals the rail itself on
+    // some brands (zinc), making the tile disappear. See THEME-CONTRACT.md sidebar rules.
+    , { 
+        // Rail-safe pairing, not a raw primary fill: primary[500] equals the rail itself on
+        // some brands (zinc), making the tile disappear. See THEME-CONTRACT.md sidebar rules.
+        bg: theme.colors.sidebar.activeBg, color: activeAccent.label, borderRadius: "lg", boxSize: "1.75rem", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: "bold", flexShrink: 0, cursor: toggle ? "pointer" : undefined, onClick: toggle ? onToggle : undefined, children: (0, jsx_runtime_1.jsx)(defaultLogo_1.default, {}) }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { h: Sidebar_1.HEADER_HEIGHT, w: "100%", alignItems: "center", justifyContent: toggle ? "center" : "flex-start", gap: 2, px: toggle ? "8px" : "10px", borderBottom: "1px solid", borderColor: theme.colors.sidebar.divider, minW: 0, overflow: "hidden", flexShrink: 0, children: [logoNode, !toggle && ((0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", minW: 0, children: [(0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "right", fontWeight: 600, fontSize: sidebarScale_1.SIDEBAR_CHROME.titleFontSize, textAlign: "left", color: theme.colors.white, lineHeight: "1.3", as: "p", width: "100%", children: companyName !== null && companyName !== void 0 ? companyName : "" }), companySubtitle && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: sidebarScale_1.SIDEBAR_CHROME.metaFontSize, color: theme.colors.sidebar.mutedLabel, lineHeight: "1.3", isTruncated: true, children: companySubtitle }))] })), !toggle && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", onClick: overlay ? onClose : onToggle, "aria-label": overlay ? "Close menu" : "Collapse sidebar", w: "22px", h: "22px", borderRadius: "lg", bg: "whiteAlpha.200", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, position: "relative", _hover: { bg: "whiteAlpha.300" }, transition: "background 0.15s", sx: {
                     "&::after": {
                         content: '""',
                         position: "absolute",
@@ -61,7 +65,7 @@ const SkeletonMenuRow = ({ toggle }) => {
 const AddNewButton = ({ toggle, onClick, overlay }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const activeAccent = (0, sidebarAccentColors_1.getSidebarActiveAccent)(theme.colors);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", type: "button", "data-group": "", "aria-label": "Add New", alignItems: "center", gap: "9px", px: "10px", py: overlay ? "11px" : "7px", borderRadius: "lg", cursor: "pointer", border: "none", bg: "transparent", w: "100%", mb: "2px", justifyContent: toggle ? "center" : "flex-start", _hover: { backgroundColor: "whiteAlpha.100" }, transition: "background 0.12s", onClick: onClick, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { w: "18px", h: "18px", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 16, color: activeAccent.icon }) }), !toggle && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: sidebarScale_1.SIDEBAR_ROW.fontSize, color: theme.colors.white, fontWeight: "medium", children: "Add New" }))] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", type: "button", "data-group": "", "aria-label": "Add New", alignItems: "center", gap: "9px", px: "10px", py: overlay ? "11px" : "7px", borderRadius: "lg", cursor: "pointer", border: "none", bg: "transparent", w: "100%", mb: "2px", justifyContent: toggle ? "center" : "flex-start", _hover: { backgroundColor: "whiteAlpha.200" }, transition: "background 0.12s", onClick: onClick, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { w: "18px", h: "18px", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 16, color: activeAccent.icon }) }), !toggle && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: sidebarScale_1.SIDEBAR_ROW.fontSize, color: theme.colors.white, fontWeight: "medium", children: "Add New" }))] }));
 };
 const deriveInitials = (user) => {
     if (user.initials)
@@ -76,8 +80,10 @@ const deriveInitials = (user) => {
 const UserFooter = ({ user, toggle, overlay }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const activeAccent = (0, sidebarAccentColors_1.getSidebarActiveAccent)(theme.colors);
-    const avatar = user.avatarUrl ? ((0, jsx_runtime_1.jsx)(react_2.Image, { src: user.avatarUrl, alt: user.name, boxSize: "26px", borderRadius: "full", objectFit: "cover", flexShrink: 0 })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { boxSize: "26px", borderRadius: "full", bg: theme.colors.primary.opacity[32], color: activeAccent.label, display: "flex", alignItems: "center", justifyContent: "center", fontSize: sidebarScale_1.SIDEBAR_CHROME.metaFontSize, fontWeight: 600, flexShrink: 0, children: deriveInitials(user) }));
-    return ((0, jsx_runtime_1.jsx)(react_2.Box, { borderTop: "1px solid", borderColor: theme.colors.sidebar.divider, py: 2, px: "6px", flexShrink: 0, children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", type: "button", onClick: user.onClick, align: "center", gap: 2, px: 2, py: overlay ? "10px" : "6px", w: "100%", borderRadius: "lg", cursor: "pointer", bg: "transparent", border: "none", justify: toggle ? "center" : "flex-start", _hover: { bg: "whiteAlpha.100" }, transition: "background 0.12s", children: [avatar, !toggle && ((0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", minW: 0, textAlign: "left", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: sidebarScale_1.SIDEBAR_CHROME.labelFontSize, fontWeight: 500, color: theme.colors.white, isTruncated: true, children: user.name }), user.role && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: sidebarScale_1.SIDEBAR_CHROME.metaFontSize, color: theme.colors.sidebar.mutedLabel, isTruncated: true, children: user.role }))] })), !toggle && (0, jsx_runtime_1.jsx)(lucide_react_1.MoreVertical, { size: 14, color: theme.colors.sidebar.mutedIcon })] }) }));
+    const avatar = user.avatarUrl ? ((0, jsx_runtime_1.jsx)(react_2.Image, { src: user.avatarUrl, alt: user.name, boxSize: "26px", borderRadius: "full", objectFit: "cover", flexShrink: 0 })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { boxSize: "26px", borderRadius: "full", 
+        // Same rail-safe pairing as the logo tile — primary.opacity[32] was invisible on zinc/skyline.
+        bg: theme.colors.sidebar.activeBg, color: activeAccent.label, display: "flex", alignItems: "center", justifyContent: "center", fontSize: sidebarScale_1.SIDEBAR_CHROME.metaFontSize, fontWeight: 600, flexShrink: 0, children: deriveInitials(user) }));
+    return ((0, jsx_runtime_1.jsx)(react_2.Box, { borderTop: "1px solid", borderColor: theme.colors.sidebar.divider, py: 2, px: "6px", flexShrink: 0, children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", type: "button", onClick: user.onClick, align: "center", gap: 2, px: 2, py: overlay ? "10px" : "6px", w: "100%", borderRadius: "lg", cursor: "pointer", bg: "transparent", border: "none", justify: toggle ? "center" : "flex-start", _hover: { bg: "whiteAlpha.200" }, transition: "background 0.12s", children: [avatar, !toggle && ((0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", minW: 0, textAlign: "left", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: sidebarScale_1.SIDEBAR_CHROME.labelFontSize, fontWeight: 500, color: theme.colors.white, isTruncated: true, children: user.name }), user.role && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: sidebarScale_1.SIDEBAR_CHROME.metaFontSize, color: theme.colors.sidebar.mutedLabel, isTruncated: true, children: user.role }))] })), !toggle && (0, jsx_runtime_1.jsx)(lucide_react_1.MoreVertical, { size: 14, color: theme.colors.sidebar.mutedIcon })] }) }));
 };
 // Footer "cell" — one segment of the Collapse | Hide/Show control.
 const ControlCell = ({ onClick, ariaLabel, label, accent, children }) => {

package/dist/Components/SideBar/components/MenuItemBox.js

@@ -91,7 +91,7 @@ const MenuItemBox = ({ menu, activeMenu, toggle, handleClick, isOpen, onToggle,
         opacity: isBlocked ? 0.6 : 1,
         transition: "background 0.12s",
     };
-    const buttonContent = ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "9px", justify: toggle ? "center" : "space-between", w: "100%", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "9px", overflow: "hidden", children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: icon, fontSize: "md", verticalAlign: "middle", color: isAnyActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isAnyActive ? undefined : { color: theme.colors.white }, transition: "color 0.12s" }), toggle && (badgeValue != null || hasSubmenuBadge) && ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.red[400] }))] }), !toggle && ((0, jsx_runtime_1.jsx)(TextTruncation_1.default
+    const buttonContent = ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "9px", justify: toggle ? "center" : "space-between", w: "100%", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "9px", overflow: "hidden", children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: icon, fontSize: "md", verticalAlign: "middle", color: isAnyActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isAnyActive ? undefined : { color: theme.colors.white }, transition: "color 0.12s" }), toggle && (badgeValue != null || hasSubmenuBadge) && ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.sidebar.semanticText.error }))] }), !toggle && ((0, jsx_runtime_1.jsx)(TextTruncation_1.default
                     // open={isOpen}
                     , { 
                         // open={isOpen}
@@ -128,15 +128,19 @@ const MenuItemBox = ({ menu, activeMenu, toggle, handleClick, isOpen, onToggle,
                         var _a, _b, _c;
                         const isSubActive = activeMenu === sub.id;
                         const isSubBlocked = (0, menuDisabled_1.menuDisabled)(sub) || sub.locked;
-                        return ((0, jsx_runtime_1.jsxs)(react_2.Box, { as: "a", href: (_a = sub.url) !== null && _a !== void 0 ? _a : "#", "data-group": "", "aria-current": isSubActive ? "page" : undefined, "aria-disabled": isSubBlocked ? true : undefined, textDecoration: "none", h: sidebarScale_1.SIDEBAR_ROW.subHeight, pl: "30px", pr: "10px", borderRadius: "lg", fontSize: sidebarScale_1.SIDEBAR_ROW.fontSize, backgroundColor: "transparent", _hover: { backgroundColor: "whiteAlpha.100" }, opacity: isSubBlocked ? 0.6 : 1, cursor: isSubBlocked ? "not-allowed" : "pointer", pointerEvents: isSubBlocked ? "none" : "auto", onClick: (e) => {
+                        return ((0, jsx_runtime_1.jsxs)(react_2.Box, { as: "a", href: (_a = sub.url) !== null && _a !== void 0 ? _a : "#", "data-group": "", "aria-current": isSubActive ? "page" : undefined, "aria-disabled": isSubBlocked ? true : undefined, textDecoration: "none", h: sidebarScale_1.SIDEBAR_ROW.subHeight, pl: "28px", pr: "10px", borderRadius: "lg", fontSize: sidebarScale_1.SIDEBAR_ROW.fontSize, borderLeft: "2px solid", borderLeftColor: isSubActive ? theme.colors.sidebar.activeIcon : "transparent", backgroundColor: isSubActive ? "whiteAlpha.300" : "transparent", _hover: {
+                                backgroundColor: isSubBlocked
+                                    ? "transparent"
+                                    : isSubActive
+                                        ? "whiteAlpha.400"
+                                        : "whiteAlpha.200",
+                            }, opacity: isSubBlocked ? 0.6 : 1, cursor: isSubBlocked ? "not-allowed" : "pointer", pointerEvents: isSubBlocked ? "none" : "auto", onClick: (e) => {
                                 if (sub.url && isBrowserNavigationGesture(e))
                                     return;
                                 e.preventDefault();
                                 if (!isSubBlocked)
                                     handleClick === null || handleClick === void 0 ? void 0 : handleClick(sub);
-                            }, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, transition: "background 0.12s", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "9px", overflow: "hidden", flex: "1", children: [sub.icon ? ((0, jsx_runtime_1.jsx)(react_2.Icon, { as: sub.icon, fontSize: sidebarScale_1.SIDEBAR_ROW.iconSize, flexShrink: 0, color: isSubActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isSubActive ? undefined : { color: theme.colors.white }, transition: "color 0.12s" })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { w: "5px", h: "5px", borderRadius: "full", flexShrink: 0, bg: isSubActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isSubActive ? undefined : { bg: theme.colors.white }, transition: "background 0.12s" })), (0, jsx_runtime_1.jsx)(TextTruncation_1.default, { fontSize: sidebarScale_1.SIDEBAR_ROW.fontSize, fontWeight: isSubActive ? 600 : 500, lineHeight: "1", 
-                                            // open={isOpen}
-                                            color: isSubActive ? theme.colors.white : theme.colors.sidebar.mutedLabel, _groupHover: isSubActive ? undefined : { color: theme.colors.white }, children: sub.title })] }), sub.locked ? ((0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "md", color: theme.colors.sidebar.mutedIcon })) : (() => {
+                            }, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, transition: "background 0.12s", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "9px", overflow: "hidden", flex: "1", children: [sub.icon ? ((0, jsx_runtime_1.jsx)(react_2.Icon, { as: sub.icon, fontSize: sidebarScale_1.SIDEBAR_ROW.iconSize, flexShrink: 0, color: isSubActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isSubActive ? undefined : { color: theme.colors.white }, transition: "color 0.12s" })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { w: "5px", h: "5px", borderRadius: "full", flexShrink: 0, bg: isSubActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isSubActive ? undefined : { bg: theme.colors.white }, transition: "background 0.12s" })), (0, jsx_runtime_1.jsx)(TextTruncation_1.default, { fontSize: sidebarScale_1.SIDEBAR_ROW.fontSize, fontWeight: isSubActive ? 600 : 500, lineHeight: "1", color: isSubActive ? activeAccent.label : theme.colors.sidebar.mutedLabel, _groupHover: isSubActive ? undefined : { color: theme.colors.white }, children: sub.title })] }), sub.locked ? ((0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "md", color: theme.colors.sidebar.mutedIcon })) : (() => {
                                     var _a, _b, _c, _d;
                                     const subCfg = typeof sub.badge === "object" && sub.badge !== null
                                         ? sub.badge

package/dist/Components/SideBar/components/MenuPopoverContent.js

@@ -22,7 +22,9 @@ const MenuPopoverContent = ({ menu, handleMenuClick, activeMenu, }) => {
     const isBlocked = (0, menuDisabled_1.menuDisabled)(menu) || locked;
     const hasSubMenu = !!(subMenu === null || subMenu === void 0 ? void 0 : subMenu.length);
     const isParentActive = activeMenu === menu.id;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { as: (hasSubMenu ? "div" : "a"), href: hasSubMenu ? undefined : (_a = menu.url) !== null && _a !== void 0 ? _a : "#", "aria-current": !hasSubMenu && isParentActive ? "page" : undefined, textDecoration: "none", align: "center", gap: 2, px: 2, h: "32px", mb: hasSubMenu ? "4px" : 0, borderBottom: hasSubMenu ? "1px solid" : undefined, borderColor: hasSubMenu ? theme.colors.sidebar.divider : undefined, borderRadius: hasSubMenu ? "none" : "lg", bg: !hasSubMenu && isParentActive ? "whiteAlpha.300" : "transparent", _hover: !hasSubMenu && !isBlocked ? { bg: "whiteAlpha.100" } : undefined, onClick: (e) => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { as: (hasSubMenu ? "div" : "a"), href: hasSubMenu ? undefined : (_a = menu.url) !== null && _a !== void 0 ? _a : "#", "aria-current": !hasSubMenu && isParentActive ? "page" : undefined, textDecoration: "none", align: "center", gap: 2, px: 2, h: "32px", mb: hasSubMenu ? "4px" : 0, borderBottom: hasSubMenu ? "1px solid" : undefined, borderColor: hasSubMenu ? theme.colors.sidebar.divider : undefined, borderRadius: hasSubMenu ? "none" : "lg", bg: !hasSubMenu && isParentActive ? "whiteAlpha.300" : "transparent", _hover: !hasSubMenu && !isBlocked
+                    ? { bg: isParentActive ? "whiteAlpha.400" : "whiteAlpha.200" }
+                    : undefined, onClick: (e) => {
                     if (!hasSubMenu) {
                         e.preventDefault();
                         if (!isBlocked)
@@ -50,9 +52,9 @@ const MenuPopoverContent = ({ menu, handleMenuClick, activeMenu, }) => {
                         if (!isSubBlocked)
                             handleMenuClick === null || handleMenuClick === void 0 ? void 0 : handleMenuClick(sub);
                     }, px: 2, h: sidebarScale_1.SIDEBAR_ROW.subHeight, mb: "2px", borderRadius: "lg", align: "center", justify: "space-between", gap: 2, borderLeft: "2px solid", borderLeftColor: isSubActive ? theme.colors.sidebar.activeIcon : "transparent", bg: isSubActive ? "whiteAlpha.300" : "transparent", _hover: {
-                        bg: !isSubBlocked ? "whiteAlpha.100" : "transparent",
+                        bg: isSubBlocked ? "transparent" : isSubActive ? "whiteAlpha.400" : "whiteAlpha.200",
                         cursor: !isSubBlocked ? "pointer" : "not-allowed",
-                    }, opacity: isSubBlocked ? 0.5 : 1, pointerEvents: isSubBlocked ? "none" : "auto", transition: "background 0.12s", children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "9px", overflow: "hidden", flex: "1", children: [(0, jsx_runtime_1.jsx)(react_1.Icon, { as: sub.icon, fontSize: sidebarScale_1.SIDEBAR_ROW.iconSize, flexShrink: 0, color: isSubActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isSubActive ? undefined : { color: theme.colors.white }, transition: "color 0.12s" }), (0, jsx_runtime_1.jsx)(TextTruncation_1.default, { fontSize: sidebarScale_1.SIDEBAR_ROW.fontSize, fontWeight: isSubActive ? 600 : 500, flex: 1, color: isSubActive ? activeAccent.label : theme.colors.white, _groupHover: isSubActive ? undefined : { color: theme.colors.white }, children: sub.title })] }), sub.locked ? ((0, jsx_runtime_1.jsx)(react_1.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "md", color: theme.colors.sidebar.mutedIcon })) : (() => {
+                    }, opacity: isSubBlocked ? 0.5 : 1, pointerEvents: isSubBlocked ? "none" : "auto", transition: "background 0.12s", children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "9px", overflow: "hidden", flex: "1", children: [sub.icon ? ((0, jsx_runtime_1.jsx)(react_1.Icon, { as: sub.icon, fontSize: sidebarScale_1.SIDEBAR_ROW.iconSize, flexShrink: 0, color: isSubActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isSubActive ? undefined : { color: theme.colors.white }, transition: "color 0.12s" })) : ((0, jsx_runtime_1.jsx)(react_1.Box, { w: "5px", h: "5px", borderRadius: "full", flexShrink: 0, bg: isSubActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isSubActive ? undefined : { bg: theme.colors.white }, transition: "background 0.12s" })), (0, jsx_runtime_1.jsx)(TextTruncation_1.default, { fontSize: sidebarScale_1.SIDEBAR_ROW.fontSize, fontWeight: isSubActive ? 600 : 500, flex: 1, color: isSubActive ? activeAccent.label : theme.colors.white, _groupHover: isSubActive ? undefined : { color: theme.colors.white }, children: sub.title })] }), sub.locked ? ((0, jsx_runtime_1.jsx)(react_1.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "md", color: theme.colors.sidebar.mutedIcon })) : (() => {
                             var _a, _b, _c, _d;
                             const cfg = typeof sub.badge === "object" && sub.badge !== null
                                 ? sub.badge

package/dist/Components/SideBar/components/OtherApps.js

@@ -12,7 +12,7 @@ const OtherApps = ({ toggle, otherApps }) => {
         return ((0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: "center", justifyContent: "center", color: theme.colors.sidebar.mutedIcon, fontSize: "15px", flexShrink: 0, children: (_a = app.icon) !== null && _a !== void 0 ? _a : ((0, jsx_runtime_1.jsx)(react_1.Box, { w: "0.5rem", h: "0.5rem", borderRadius: "full", bg: app.color, boxShadow: `0 0 5px ${app.color}`, flexShrink: 0 })) }));
     };
     // Grid cell: icon on top, truncated label below (label hidden when collapsed).
-    const appCell = (app) => ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "button", type: "button", direction: "column", align: "center", justify: "center", gap: "3px", px: "2px", py: "6px", borderRadius: "lg", cursor: "pointer", border: "none", bg: "transparent", w: "100%", _hover: { backgroundColor: "whiteAlpha.100" }, transition: "background 0.12s", onClick: app.onClick, children: [appIcon(app), !toggle && ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "9.5px", color: theme.colors.sidebar.mutedLabel, textAlign: "center", maxW: "44px", isTruncated: true, children: app.name }))] }));
+    const appCell = (app) => ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "button", type: "button", direction: "column", align: "center", justify: "center", gap: "3px", px: "2px", py: "6px", borderRadius: "lg", cursor: "pointer", border: "none", bg: "transparent", w: "100%", _hover: { backgroundColor: "whiteAlpha.200" }, transition: "background 0.12s", onClick: app.onClick, children: [appIcon(app), !toggle && ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "9.5px", color: theme.colors.sidebar.mutedLabel, textAlign: "center", maxW: "44px", isTruncated: true, children: app.name }))] }));
     const flyoutBody = (app) => {
         var _a;
         return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { alignItems: "center", gap: 2, mb: 1, onClick: app.onClick, children: [(_a = app.icon) !== null && _a !== void 0 ? _a : ((0, jsx_runtime_1.jsx)(react_1.Box, { w: "0.5rem", h: "0.5rem", borderRadius: "full", bg: app.color, boxShadow: `0 0 5px ${app.color}`, flexShrink: 0 })), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", fontWeight: 700, color: theme.colors.white, children: app.name })] }), app.description && ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "xs", color: theme.colors.sidebar.mutedLabel, children: app.description }))] }));

package/dist/Components/Table/Table.js

@@ -318,9 +318,21 @@ function Table({ data, columns, onSelection, isLoading, isCheckbox = false, free
         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, headerHeight + rowMetrics_1.EMPTY_STATE_HEIGHT);
-    const dynamicMaxH = Math.min(500, rowsHeight);
+    const dynamicMaxH = Math.min(rowMetrics_1.MAX_TABLE_HEIGHT, rowsHeight);
     const fittedMaxH = autoFitViewport ? Math.min(dynamicMaxH, viewportAvailableH) : dynamicMaxH;
-    const tableMaxH = typeof tableMaxHeight === "number" ? tableMaxHeight : (isCompactRows ? rowsHeight + 8 : fittedMaxH);
+    const formulaMaxH = typeof tableMaxHeight === "number" ? tableMaxHeight : (isCompactRows ? rowsHeight + 8 : fittedMaxH);
+    // NOTE: wrapped cell content can exceed the per-row estimate; when the row count is
+    // within the display cap (explicit maxVisibleRows, else the default 10), size naturally
+    // instead of clipping. `visibleRowsCount` isn't used here — minRows defaults to
+    // actualRows, which would make this true for any row count.
+    const rawMaxRows = typeof maxVisibleRows === "number" ? maxVisibleRows : (actualRows === 0 ? 1 : 10);
+    const showsAllRows = actualRows <= rawMaxRows;
+    const useNaturalHeight = typeof tableMaxHeight !== "number" && showsAllRows && !isTableLoading && !canInfinite &&
+        !(filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar);
+    const tableMinH = useNaturalHeight ? formulaMaxH : undefined;
+    const tableMaxH = useNaturalHeight
+        ? (autoFitViewport ? viewportAvailableH : undefined)
+        : formulaMaxH;
     const isCompactHeader = (0, react_2.useBreakpointValue)({ base: true, md: true, lg: false });
     (0, react_1.useEffect)(() => {
         if (!isCompactHeader) {
@@ -371,7 +383,7 @@ function Table({ data, columns, onSelection, isLoading, isCheckbox = false, free
           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: "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: [[
+      ` }), (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 + formulaMaxH }, 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 + formulaMaxH, 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: {
@@ -407,7 +419,7 @@ function Table({ data, columns, onSelection, isLoading, isCheckbox = false, free
                                                 .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 && ((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.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: {
+                                                                    }, 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, minH: !isTableLoading ? tableMinH : 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.

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

@@ -94,7 +94,7 @@ export type TableProps = {
     tableMaxHeight?: number;
     /** Floors the auto-computed row count used for sizing only — doesn't add rows or affect pagination. */
     minVisibleRows?: number;
-    /** Caps the auto-computed row count used for sizing (paired with minVisibleRows); ignored once tableMaxHeight is set. */
+    /** Row count above which height is capped and scrolls; at or under it the table grows to fit every row, even wrapped ones. Ignored once tableMaxHeight is set. */
     maxVisibleRows?: number;
     /** Further clamps computed height to remaining viewport space below the table, recalculated on resize; ignored once tableMaxHeight is set. */
     autoFitViewport?: boolean;

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

@@ -6,5 +6,6 @@ export declare const DENSITY_ROWS: Record<TableDensity, {
 export declare const TOOLBAR_HEIGHT = 45;
 export declare const GROUP_HEADER_HEIGHT = 42;
 export declare const EMPTY_STATE_HEIGHT = 200;
+export declare const MAX_TABLE_HEIGHT = 500;
 export declare const rowHeightFor: (density: TableDensity | undefined) => number;
 export declare const pxOf: (length: string) => number;

package/dist/Components/Table/components/rowMetrics.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.pxOf = exports.rowHeightFor = exports.EMPTY_STATE_HEIGHT = exports.GROUP_HEADER_HEIGHT = exports.TOOLBAR_HEIGHT = exports.DENSITY_ROWS = void 0;
+exports.pxOf = exports.rowHeightFor = exports.MAX_TABLE_HEIGHT = exports.EMPTY_STATE_HEIGHT = exports.GROUP_HEADER_HEIGHT = exports.TOOLBAR_HEIGHT = exports.DENSITY_ROWS = void 0;
 exports.DENSITY_ROWS = {
     compact: { height: 32, py: "0.125rem" },
     normal: { height: 40, py: "0.5rem" },
@@ -9,6 +9,7 @@ exports.DENSITY_ROWS = {
 exports.TOOLBAR_HEIGHT = 45;
 exports.GROUP_HEADER_HEIGHT = 42;
 exports.EMPTY_STATE_HEIGHT = 200;
+exports.MAX_TABLE_HEIGHT = 500;
 const rowHeightFor = (density) => exports.DENSITY_ROWS[density !== null && density !== void 0 ? density : "normal"].height;
 exports.rowHeightFor = rowHeightFor;
 const pxOf = (length) => parseFloat(length);

package/dist/Constants/Sidebar.js

@@ -15,15 +15,15 @@ const cssForScrollBar = (theme) => ({
         borderRadius: "0.5rem",
     },
     "&:hover::-webkit-scrollbar-thumb": {
-        background: theme.colors.primary[500],
+        background: theme.colors.sidebar.mutedIcon,
     },
     "&:hover::-webkit-scrollbar-thumb:hover": {
-        background: theme.colors.primary[700],
+        background: theme.colors.sidebar.mutedLabel,
     },
     scrollbarWidth: "none",
     "&:hover": {
         scrollbarWidth: "thin",
-        scrollbarColor: `${theme.colors.primary[500]} ${theme.colors.sidebar.background[500]}`,
+        scrollbarColor: `${theme.colors.sidebar.mutedIcon} ${theme.colors.sidebar.background[500]}`,
     },
 });
 exports.cssForScrollBar = cssForScrollBar;

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

@@ -25,13 +25,15 @@ exports.sidebarDivider = sidebarDivider;
 const buildSidebarTokens = (background, lightPrimary, semantic) => {
     const surface = (0, exports.sidebarActiveSurface)(background);
     const elevated = (0, outlineRung_1.resolveHoverTint)(background[500], background[500]);
+    // Muted chrome must clear contrast on the bare rail AND the lightest row-hover overlay.
+    const rowPeak = (0, exports.sidebarRowPeak)(elevated);
     return {
         background,
         elevated,
         activeIcon: (0, outlineRung_1.liftToContrast)(lightPrimary[300], surface, outlineRung_1.AA_NON_TEXT),
         activeLabel: (0, outlineRung_1.liftToContrast)(lightPrimary[100], surface, exports.AA_NORMAL_TEXT),
-        mutedIcon: (0, outlineRung_1.liftToContrast)(background[300], elevated, outlineRung_1.AA_NON_TEXT),
-        mutedLabel: (0, outlineRung_1.liftToContrast)(background[100], elevated, exports.AA_NORMAL_TEXT),
+        mutedIcon: (0, outlineRung_1.settleAcross)(background[300], [elevated, rowPeak], outlineRung_1.AA_NON_TEXT),
+        mutedLabel: (0, outlineRung_1.settleAcross)(background[100], [elevated, rowPeak], exports.AA_NORMAL_TEXT),
         semanticText: (0, semanticText_1.buildSemanticText)(semantic, elevated),
         hoverBg: (0, exports.sidebarHoverSurface)(background),
         activeBg: surface,

package/dist/esm/Components/Input/PhoneNumberInput.js

@@ -16,7 +16,7 @@ const getFlagEmoji = (countryCode) => {
 const sizeToPt = { xs: 2, sm: -1, md: 2, lg: 4 };
 const sizeToWidth = { xs: "3.5rem", sm: "3.8rem", md: "4rem", lg: "4rem" };
 /** Country-code-aware phone field with a flag/dial-code prefix; `ref` forwards to the number `<input>`. */
-const PhoneNumberInput = forwardRef(function PhoneNumberInput({ size = "md", value, codeValueReturn = true, country, countries, placeholder = "Enter phone number", onChange, inputId, selectId, error, errorMessage, helperText, label, id, width = "100%", isInformation, informationMessage, isRequired, onBlur, onFocus, isReadOnly, height, autoComplete, showCountrySelect = true, name, minW, maxW, countrySelectAriaLabel = "Country code", ...rest }, ref) {
+const PhoneNumberInput = forwardRef(function PhoneNumberInput({ size = "sm", value, codeValueReturn = true, country, countries, placeholder = "Enter phone number", onChange, inputId, selectId, error, errorMessage, helperText, label, id, width = "100%", isInformation, informationMessage, isRequired, onBlur, onFocus, isReadOnly, height, autoComplete, showCountrySelect = true, name, minW, maxW, countrySelectAriaLabel = "Country code", ...rest }, ref) {
     const theme = useCustomTheme();
     const ids = useFieldIds(inputId !== null && inputId !== void 0 ? inputId : id, { error, errorMessage, helperText });
     const getCountryTelCode = useCallback((countryCode) => {

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from "react";
+import { useId, useState } from "react";
 import { Box, Flex, Icon, VStack, Badge, Popover, PopoverTrigger, PopoverContent, PopoverBody, Portal, } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { getSidebarActiveAccent } from "./sidebarAccentColors.js";
@@ -8,7 +8,8 @@ import { menuDisabled } from "./menuDisabled.js";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import OverflowTooltipText from "./components/OverflowTooltipText.js";
 import ToolTip from "../ToolTip/ToolTip.js";
-import { HEADER_HEIGHT } from "../../Constants/Sidebar.js";
+import { cssForScrollBar, HEADER_HEIGHT } from "../../Constants/Sidebar.js";
+import { sanitizeId } from "./sidebarId.js";
 import { resolveSoftTone } from "../../Theme/tokens/builders/tone.js";
 import { sidebarRowPeak } from "../../Theme/tokens/builders/sidebarAccent.js";
 import { scaleFor } from "../../Theme/chakra/paletteFromTheme.js";
@@ -42,7 +43,7 @@ const CollapsedItem = ({ item, isActive, itemFontSize, onItemClick }) => {
                         e.preventDefault();
                         if (!menuDisabled(item))
                             onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item);
-                    }, bg: isActive ? "whiteAlpha.300" : "transparent", transition: "background 0.12s", children: _jsxs(Box, { position: "relative", display: "flex", alignItems: "center", children: [_jsx(Icon, { as: item.icon, fontSize: SIDEBAR_ROW.iconSize, color: isActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isActive ? undefined : { color: theme.colors.white }, transition: "color 0.12s" }), badgeVal != null && (_jsx(Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.red[400] }))] }) }) }), _jsx(Portal, { children: _jsx(PopoverContent, { borderRadius: "lg", bg: theme.colors.sidebar.elevated, boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", cursor: menuDisabled(item) ? "not-allowed" : "pointer", zIndex: 1500, color: theme.colors.white, border: 'none', children: _jsx(PopoverBody, { p: 3, children: _jsxs(Flex, { align: "center", gap: 2, justify: "space-between", children: [_jsxs(Flex, { align: "center", gap: 2, flex: "1", minW: 0, children: [_jsx(Icon, { as: item.icon, fontSize: "md", flexShrink: 0 }), _jsx(OverflowTooltipText, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: "medium", as: "p", children: item.title })] }), badgeVal != null && (_jsx(Badge, { ...softBadge(theme.colors, colorScheme, sidebarRowPeak(theme.colors.sidebar.elevated)), fontSize: "xs", variant: variant, borderRadius: radius, children: badgeVal }))] }) }) }) })] }));
+                    }, bg: isActive ? "whiteAlpha.300" : "transparent", transition: "background 0.12s", children: _jsxs(Box, { position: "relative", display: "flex", alignItems: "center", children: [_jsx(Icon, { as: item.icon, fontSize: SIDEBAR_ROW.iconSize, color: isActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isActive ? undefined : { color: theme.colors.white }, transition: "color 0.12s" }), badgeVal != null && (_jsx(Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.sidebar.semanticText.error }))] }) }) }), _jsx(Portal, { children: _jsx(PopoverContent, { borderRadius: "lg", bg: theme.colors.sidebar.elevated, boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", cursor: menuDisabled(item) ? "not-allowed" : "pointer", zIndex: 1500, color: theme.colors.white, border: 'none', children: _jsx(PopoverBody, { p: 3, children: _jsxs(Flex, { align: "center", gap: 2, justify: "space-between", children: [_jsxs(Flex, { align: "center", gap: 2, flex: "1", minW: 0, children: [_jsx(Icon, { as: item.icon, fontSize: "md", flexShrink: 0 }), _jsx(OverflowTooltipText, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: "medium", as: "p", children: item.title })] }), badgeVal != null && (_jsx(Badge, { ...softBadge(theme.colors, colorScheme, sidebarRowPeak(theme.colors.sidebar.elevated)), fontSize: "xs", variant: variant, borderRadius: radius, children: badgeVal }))] }) }) }) })] }));
 };
 const ExpandedItem = ({ item, isActive, itemFontSize, onItemClick }) => {
     var _a;
@@ -60,9 +61,10 @@ const ExpandedItem = ({ item, isActive, itemFontSize, onItemClick }) => {
 const SecondaryBar = ({ items = [], defaultCollapsed = true, collapsedWidth = "3.5rem", expandedWidth = "10rem", headerFontSize = SIDEBAR_ROW.fontSize, itemFontSize = SIDEBAR_ROW.fontSize, selected, onItemClick, title, icon, }) => {
     const theme = useCustomTheme();
     const activeAccent = getSidebarActiveAccent(theme.colors);
+    const scrollContainerId = sanitizeId(useId());
     const [collapsed, setCollapsed] = useState(defaultCollapsed);
     const width = collapsed ? collapsedWidth : expandedWidth;
-    return (_jsx(Box, { as: "nav", "aria-label": title ? `${title} navigation` : "Secondary navigation", transition: transitionFor(["width"], "base"), pos: "sticky", top: 0, sx: fullViewportHeight, w: width, bg: theme.colors.sidebar.background[500], borderLeft: "1px solid", borderColor: theme.colors.sidebar.divider, boxShadow: theme.shadows.md, zIndex: 1, children: _jsxs(VStack, { align: "stretch", spacing: 0, h: "100%", children: [_jsxs(Flex, { align: "center", justify: collapsed ? "center" : "space-between", px: collapsed ? 0 : "10px", gap: "7px", h: HEADER_HEIGHT, overflow: "hidden", borderBottom: "1px solid", borderColor: theme.colors.sidebar.divider, flexShrink: 0, children: [!collapsed && (_jsxs(_Fragment, { children: [icon && (_jsx(Icon, { as: icon, fontSize: SIDEBAR_ROW.iconSize, color: activeAccent.icon, flexShrink: 0 })), _jsx(Box, { flex: "1", minW: 0, children: _jsx(OverflowTooltipText, { placement: "right", maxWidth: "100%", fontSize: headerFontSize, fontWeight: 600, color: theme.colors.white, as: "p", children: title !== null && title !== void 0 ? title : "" }) })] })), _jsx(Box, { as: "button", type: "button", "aria-label": collapsed ? "Expand navigation panel" : "Collapse navigation panel", "aria-expanded": !collapsed, border: "none", bg: "transparent", w: "24px", h: "24px", borderRadius: "lg", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", flexShrink: 0, onClick: () => setCollapsed((c) => !c), _hover: { bg: "whiteAlpha.100" }, transition: "background 0.15s", children: collapsed ? (_jsx(ToolTip, { label: title !== null && title !== void 0 ? title : "", placement: "right", children: _jsx(ChevronRight, { size: 13, color: theme.colors.sidebar.mutedIcon }) })) : (_jsx(ChevronLeft, { size: 13, color: theme.colors.sidebar.mutedIcon })) })] }), _jsx(Box, { id: "secondary-scroll-container", flex: "1", minH: 0, overflowY: "auto", overflowX: "hidden", py: 2, px: "6px", children: items.map((item) => {
+    return (_jsx(Box, { as: "nav", "aria-label": title ? `${title} navigation` : "Secondary navigation", transition: transitionFor(["width"], "base"), pos: "sticky", top: 0, sx: fullViewportHeight, w: width, bg: theme.colors.sidebar.background[500], borderLeft: "1px solid", borderColor: theme.colors.sidebar.divider, boxShadow: theme.shadows.md, zIndex: 1, children: _jsxs(VStack, { align: "stretch", spacing: 0, h: "100%", children: [_jsxs(Flex, { align: "center", justify: collapsed ? "center" : "space-between", px: collapsed ? 0 : "10px", gap: "7px", h: HEADER_HEIGHT, overflow: "hidden", borderBottom: "1px solid", borderColor: theme.colors.sidebar.divider, flexShrink: 0, children: [!collapsed && (_jsxs(_Fragment, { children: [icon && (_jsx(Icon, { as: icon, fontSize: SIDEBAR_ROW.iconSize, color: activeAccent.icon, flexShrink: 0 })), _jsx(Box, { flex: "1", minW: 0, children: _jsx(OverflowTooltipText, { placement: "right", maxWidth: "100%", fontSize: headerFontSize, fontWeight: 600, color: theme.colors.white, as: "p", children: title !== null && title !== void 0 ? title : "" }) })] })), _jsx(Box, { as: "button", type: "button", "aria-label": collapsed ? "Expand navigation panel" : "Collapse navigation panel", "aria-expanded": !collapsed, border: "none", bg: "transparent", w: "24px", h: "24px", borderRadius: "lg", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", flexShrink: 0, onClick: () => setCollapsed((c) => !c), _hover: { bg: "whiteAlpha.200" }, transition: "background 0.15s", children: collapsed ? (_jsx(ToolTip, { label: title !== null && title !== void 0 ? title : "", placement: "right", children: _jsx(ChevronRight, { size: 13, color: theme.colors.sidebar.mutedIcon }) })) : (_jsx(ChevronLeft, { size: 13, color: theme.colors.sidebar.mutedIcon })) })] }), _jsx(Box, { id: scrollContainerId, flex: "1", minH: 0, overflowY: "auto", overflowX: "hidden", py: 2, px: "6px", sx: cssForScrollBar(theme), children: items.map((item) => {
                         var _a;
                         const isActive = String(selected) === String(item.id) ||
                             String(selected) === String(item.title);

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

@@ -2,7 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useEffect, useId, useRef, useState } from "react";
 import { Flex, Text, Image, Box, Skeleton, useBreakpointValue } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-import { labelOnFill, solidFillRung } from "../../Theme/tokens/builders/filledSurface.js";
 import { getSidebarActiveAccent } from "./sidebarAccentColors.js";
 import { sanitizeId } from "./sidebarId.js";
 import { cssForScrollBar, HEADER_HEIGHT } from "../../Constants/Sidebar.js";
@@ -30,13 +29,18 @@ import { SIDEBAR_CHROME, SIDEBAR_ROW } from "./sidebarScale.js";
 import { fullViewportHeight } from "../../Theme/tokens/builders/viewportHeight.js";
 const SidebarHeader = ({ logo, companyName, companySubtitle, toggle, isLoading, onToggle, overlay, onClose, }) => {
     const theme = useCustomTheme();
+    const activeAccent = getSidebarActiveAccent(theme.colors);
     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: "lg", 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: "lg", startColor: theme.colors.sidebar.background[400], endColor: theme.colors.sidebar.background[300] }), _jsx(Skeleton, { h: "1.25rem", w: "60%", borderRadius: "lg", startColor: theme.colors.sidebar.background[400], endColor: theme.colors.sidebar.background[300] })] })) }));
     }
-    const primaryFillRung = solidFillRung(theme.colors.primary, theme.colors.white);
-    const primaryFill = theme.colors.primary[primaryFillRung];
-    const logoNode = logo ? (_jsx(Image, { borderRadius: "lg", 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: "lg", 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: 2, px: toggle ? "8px" : "10px", borderBottom: "1px solid", borderColor: theme.colors.sidebar.divider, minW: 0, overflow: "hidden", flexShrink: 0, children: [logoNode, !toggle && (_jsxs(Box, { flex: "1", minW: 0, children: [_jsx(OverflowTooltipText, { placement: "right", fontWeight: 600, fontSize: SIDEBAR_CHROME.titleFontSize, textAlign: "left", color: theme.colors.white, lineHeight: "1.3", as: "p", width: "100%", children: companyName !== null && companyName !== void 0 ? companyName : "" }), companySubtitle && (_jsx(Text, { fontSize: SIDEBAR_CHROME.metaFontSize, 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: "lg", bg: "whiteAlpha.100", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, position: "relative", _hover: { bg: "whiteAlpha.300" }, transition: "background 0.15s", sx: {
+    const logoNode = logo ? (_jsx(Image, { borderRadius: "lg", boxSize: "1.75rem", src: logo, alt: "Company Logo", flexShrink: 0, cursor: toggle ? "pointer" : undefined, onClick: toggle ? onToggle : undefined })) : (_jsx(Box
+    // Rail-safe pairing, not a raw primary fill: primary[500] equals the rail itself on
+    // some brands (zinc), making the tile disappear. See THEME-CONTRACT.md sidebar rules.
+    , { 
+        // Rail-safe pairing, not a raw primary fill: primary[500] equals the rail itself on
+        // some brands (zinc), making the tile disappear. See THEME-CONTRACT.md sidebar rules.
+        bg: theme.colors.sidebar.activeBg, color: activeAccent.label, borderRadius: "lg", 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: 2, px: toggle ? "8px" : "10px", borderBottom: "1px solid", borderColor: theme.colors.sidebar.divider, minW: 0, overflow: "hidden", flexShrink: 0, children: [logoNode, !toggle && (_jsxs(Box, { flex: "1", minW: 0, children: [_jsx(OverflowTooltipText, { placement: "right", fontWeight: 600, fontSize: SIDEBAR_CHROME.titleFontSize, textAlign: "left", color: theme.colors.white, lineHeight: "1.3", as: "p", width: "100%", children: companyName !== null && companyName !== void 0 ? companyName : "" }), companySubtitle && (_jsx(Text, { fontSize: SIDEBAR_CHROME.metaFontSize, 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: "lg", bg: "whiteAlpha.200", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, position: "relative", _hover: { bg: "whiteAlpha.300" }, transition: "background 0.15s", sx: {
                     "&::after": {
                         content: '""',
                         position: "absolute",
@@ -55,7 +59,7 @@ const SkeletonMenuRow = ({ toggle }) => {
 const AddNewButton = ({ toggle, onClick, overlay }) => {
     const theme = useCustomTheme();
     const activeAccent = getSidebarActiveAccent(theme.colors);
-    return (_jsxs(Flex, { as: "button", type: "button", "data-group": "", "aria-label": "Add New", alignItems: "center", gap: "9px", px: "10px", py: overlay ? "11px" : "7px", borderRadius: "lg", cursor: "pointer", border: "none", bg: "transparent", w: "100%", mb: "2px", justifyContent: toggle ? "center" : "flex-start", _hover: { backgroundColor: "whiteAlpha.100" }, transition: "background 0.12s", onClick: onClick, children: [_jsx(Box, { w: "18px", h: "18px", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, children: _jsx(Plus, { size: 16, color: activeAccent.icon }) }), !toggle && (_jsx(Text, { fontSize: SIDEBAR_ROW.fontSize, color: theme.colors.white, fontWeight: "medium", children: "Add New" }))] }));
+    return (_jsxs(Flex, { as: "button", type: "button", "data-group": "", "aria-label": "Add New", alignItems: "center", gap: "9px", px: "10px", py: overlay ? "11px" : "7px", borderRadius: "lg", cursor: "pointer", border: "none", bg: "transparent", w: "100%", mb: "2px", justifyContent: toggle ? "center" : "flex-start", _hover: { backgroundColor: "whiteAlpha.200" }, transition: "background 0.12s", onClick: onClick, children: [_jsx(Box, { w: "18px", h: "18px", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, children: _jsx(Plus, { size: 16, color: activeAccent.icon }) }), !toggle && (_jsx(Text, { fontSize: SIDEBAR_ROW.fontSize, color: theme.colors.white, fontWeight: "medium", children: "Add New" }))] }));
 };
 const deriveInitials = (user) => {
     if (user.initials)
@@ -70,8 +74,10 @@ const deriveInitials = (user) => {
 const UserFooter = ({ user, toggle, overlay }) => {
     const theme = useCustomTheme();
     const activeAccent = getSidebarActiveAccent(theme.colors);
-    const avatar = user.avatarUrl ? (_jsx(Image, { src: user.avatarUrl, alt: user.name, boxSize: "26px", borderRadius: "full", objectFit: "cover", flexShrink: 0 })) : (_jsx(Box, { boxSize: "26px", borderRadius: "full", bg: theme.colors.primary.opacity[32], color: activeAccent.label, display: "flex", alignItems: "center", justifyContent: "center", fontSize: SIDEBAR_CHROME.metaFontSize, fontWeight: 600, flexShrink: 0, children: deriveInitials(user) }));
-    return (_jsx(Box, { borderTop: "1px solid", borderColor: theme.colors.sidebar.divider, py: 2, px: "6px", flexShrink: 0, children: _jsxs(Flex, { as: "button", type: "button", onClick: user.onClick, align: "center", gap: 2, px: 2, py: overlay ? "10px" : "6px", w: "100%", borderRadius: "lg", cursor: "pointer", bg: "transparent", border: "none", justify: toggle ? "center" : "flex-start", _hover: { bg: "whiteAlpha.100" }, transition: "background 0.12s", children: [avatar, !toggle && (_jsxs(Box, { flex: "1", minW: 0, textAlign: "left", children: [_jsx(Text, { fontSize: SIDEBAR_CHROME.labelFontSize, fontWeight: 500, color: theme.colors.white, isTruncated: true, children: user.name }), user.role && (_jsx(Text, { fontSize: SIDEBAR_CHROME.metaFontSize, color: theme.colors.sidebar.mutedLabel, isTruncated: true, children: user.role }))] })), !toggle && _jsx(MoreVertical, { size: 14, color: theme.colors.sidebar.mutedIcon })] }) }));
+    const avatar = user.avatarUrl ? (_jsx(Image, { src: user.avatarUrl, alt: user.name, boxSize: "26px", borderRadius: "full", objectFit: "cover", flexShrink: 0 })) : (_jsx(Box, { boxSize: "26px", borderRadius: "full", 
+        // Same rail-safe pairing as the logo tile — primary.opacity[32] was invisible on zinc/skyline.
+        bg: theme.colors.sidebar.activeBg, color: activeAccent.label, display: "flex", alignItems: "center", justifyContent: "center", fontSize: SIDEBAR_CHROME.metaFontSize, fontWeight: 600, flexShrink: 0, children: deriveInitials(user) }));
+    return (_jsx(Box, { borderTop: "1px solid", borderColor: theme.colors.sidebar.divider, py: 2, px: "6px", flexShrink: 0, children: _jsxs(Flex, { as: "button", type: "button", onClick: user.onClick, align: "center", gap: 2, px: 2, py: overlay ? "10px" : "6px", w: "100%", borderRadius: "lg", cursor: "pointer", bg: "transparent", border: "none", justify: toggle ? "center" : "flex-start", _hover: { bg: "whiteAlpha.200" }, transition: "background 0.12s", children: [avatar, !toggle && (_jsxs(Box, { flex: "1", minW: 0, textAlign: "left", children: [_jsx(Text, { fontSize: SIDEBAR_CHROME.labelFontSize, fontWeight: 500, color: theme.colors.white, isTruncated: true, children: user.name }), user.role && (_jsx(Text, { fontSize: SIDEBAR_CHROME.metaFontSize, color: theme.colors.sidebar.mutedLabel, isTruncated: true, children: user.role }))] })), !toggle && _jsx(MoreVertical, { size: 14, color: theme.colors.sidebar.mutedIcon })] }) }));
 };
 // Footer "cell" — one segment of the Collapse | Hide/Show control.
 const ControlCell = ({ onClick, ariaLabel, label, accent, children }) => {

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

@@ -86,7 +86,7 @@ const MenuItemBox = ({ menu, activeMenu, toggle, handleClick, isOpen, onToggle,
         opacity: isBlocked ? 0.6 : 1,
         transition: "background 0.12s",
     };
-    const buttonContent = (_jsxs(Flex, { align: "center", gap: "9px", justify: toggle ? "center" : "space-between", w: "100%", children: [_jsxs(Flex, { align: "center", gap: "9px", overflow: "hidden", children: [_jsxs(Box, { position: "relative", display: "flex", alignItems: "center", children: [_jsx(Icon, { as: icon, fontSize: "md", verticalAlign: "middle", color: isAnyActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isAnyActive ? undefined : { color: theme.colors.white }, transition: "color 0.12s" }), toggle && (badgeValue != null || hasSubmenuBadge) && (_jsx(Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.red[400] }))] }), !toggle && (_jsx(TruncatedTextWithTooltip
+    const buttonContent = (_jsxs(Flex, { align: "center", gap: "9px", justify: toggle ? "center" : "space-between", w: "100%", children: [_jsxs(Flex, { align: "center", gap: "9px", overflow: "hidden", children: [_jsxs(Box, { position: "relative", display: "flex", alignItems: "center", children: [_jsx(Icon, { as: icon, fontSize: "md", verticalAlign: "middle", color: isAnyActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isAnyActive ? undefined : { color: theme.colors.white }, transition: "color 0.12s" }), toggle && (badgeValue != null || hasSubmenuBadge) && (_jsx(Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.sidebar.semanticText.error }))] }), !toggle && (_jsx(TruncatedTextWithTooltip
                     // open={isOpen}
                     , { 
                         // open={isOpen}
@@ -123,15 +123,19 @@ const MenuItemBox = ({ menu, activeMenu, toggle, handleClick, isOpen, onToggle,
                         var _a, _b, _c;
                         const isSubActive = activeMenu === sub.id;
                         const isSubBlocked = menuDisabled(sub) || sub.locked;
-                        return (_jsxs(Box, { as: "a", href: (_a = sub.url) !== null && _a !== void 0 ? _a : "#", "data-group": "", "aria-current": isSubActive ? "page" : undefined, "aria-disabled": isSubBlocked ? true : undefined, textDecoration: "none", h: SIDEBAR_ROW.subHeight, pl: "30px", pr: "10px", borderRadius: "lg", fontSize: SIDEBAR_ROW.fontSize, backgroundColor: "transparent", _hover: { backgroundColor: "whiteAlpha.100" }, opacity: isSubBlocked ? 0.6 : 1, cursor: isSubBlocked ? "not-allowed" : "pointer", pointerEvents: isSubBlocked ? "none" : "auto", onClick: (e) => {
+                        return (_jsxs(Box, { as: "a", href: (_a = sub.url) !== null && _a !== void 0 ? _a : "#", "data-group": "", "aria-current": isSubActive ? "page" : undefined, "aria-disabled": isSubBlocked ? true : undefined, textDecoration: "none", h: SIDEBAR_ROW.subHeight, pl: "28px", pr: "10px", borderRadius: "lg", fontSize: SIDEBAR_ROW.fontSize, borderLeft: "2px solid", borderLeftColor: isSubActive ? theme.colors.sidebar.activeIcon : "transparent", backgroundColor: isSubActive ? "whiteAlpha.300" : "transparent", _hover: {
+                                backgroundColor: isSubBlocked
+                                    ? "transparent"
+                                    : isSubActive
+                                        ? "whiteAlpha.400"
+                                        : "whiteAlpha.200",
+                            }, opacity: isSubBlocked ? 0.6 : 1, cursor: isSubBlocked ? "not-allowed" : "pointer", pointerEvents: isSubBlocked ? "none" : "auto", onClick: (e) => {
                                 if (sub.url && isBrowserNavigationGesture(e))
                                     return;
                                 e.preventDefault();
                                 if (!isSubBlocked)
                                     handleClick === null || handleClick === void 0 ? void 0 : handleClick(sub);
-                            }, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, transition: "background 0.12s", children: [_jsxs(Flex, { align: "center", gap: "9px", overflow: "hidden", flex: "1", children: [sub.icon ? (_jsx(Icon, { as: sub.icon, fontSize: SIDEBAR_ROW.iconSize, flexShrink: 0, color: isSubActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isSubActive ? undefined : { color: theme.colors.white }, transition: "color 0.12s" })) : (_jsx(Box, { w: "5px", h: "5px", borderRadius: "full", flexShrink: 0, bg: isSubActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isSubActive ? undefined : { bg: theme.colors.white }, transition: "background 0.12s" })), _jsx(TruncatedTextWithTooltip, { fontSize: SIDEBAR_ROW.fontSize, fontWeight: isSubActive ? 600 : 500, lineHeight: "1", 
-                                            // open={isOpen}
-                                            color: isSubActive ? theme.colors.white : theme.colors.sidebar.mutedLabel, _groupHover: isSubActive ? undefined : { color: theme.colors.white }, children: sub.title })] }), sub.locked ? (_jsx(Icon, { as: LockKeyhole, fontSize: "md", color: theme.colors.sidebar.mutedIcon })) : (() => {
+                            }, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, transition: "background 0.12s", children: [_jsxs(Flex, { align: "center", gap: "9px", overflow: "hidden", flex: "1", children: [sub.icon ? (_jsx(Icon, { as: sub.icon, fontSize: SIDEBAR_ROW.iconSize, flexShrink: 0, color: isSubActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isSubActive ? undefined : { color: theme.colors.white }, transition: "color 0.12s" })) : (_jsx(Box, { w: "5px", h: "5px", borderRadius: "full", flexShrink: 0, bg: isSubActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isSubActive ? undefined : { bg: theme.colors.white }, transition: "background 0.12s" })), _jsx(TruncatedTextWithTooltip, { fontSize: SIDEBAR_ROW.fontSize, fontWeight: isSubActive ? 600 : 500, lineHeight: "1", color: isSubActive ? activeAccent.label : theme.colors.sidebar.mutedLabel, _groupHover: isSubActive ? undefined : { color: theme.colors.white }, children: sub.title })] }), sub.locked ? (_jsx(Icon, { as: LockKeyhole, fontSize: "md", color: theme.colors.sidebar.mutedIcon })) : (() => {
                                     var _a, _b, _c, _d;
                                     const subCfg = typeof sub.badge === "object" && sub.badge !== null
                                         ? sub.badge

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Icon, Flex, Badge } from "@chakra-ui/react";
+import { Icon, Flex, Badge, Box } from "@chakra-ui/react";
 import { LockKeyhole } from "lucide-react";
 import { menuDisabled } from "../menuDisabled.js";
 import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
@@ -17,7 +17,9 @@ const MenuPopoverContent = ({ menu, handleMenuClick, activeMenu, }) => {
     const isBlocked = menuDisabled(menu) || locked;
     const hasSubMenu = !!(subMenu === null || subMenu === void 0 ? void 0 : subMenu.length);
     const isParentActive = activeMenu === menu.id;
-    return (_jsxs(_Fragment, { children: [_jsxs(Flex, { as: (hasSubMenu ? "div" : "a"), href: hasSubMenu ? undefined : (_a = menu.url) !== null && _a !== void 0 ? _a : "#", "aria-current": !hasSubMenu && isParentActive ? "page" : undefined, textDecoration: "none", align: "center", gap: 2, px: 2, h: "32px", mb: hasSubMenu ? "4px" : 0, borderBottom: hasSubMenu ? "1px solid" : undefined, borderColor: hasSubMenu ? theme.colors.sidebar.divider : undefined, borderRadius: hasSubMenu ? "none" : "lg", bg: !hasSubMenu && isParentActive ? "whiteAlpha.300" : "transparent", _hover: !hasSubMenu && !isBlocked ? { bg: "whiteAlpha.100" } : undefined, onClick: (e) => {
+    return (_jsxs(_Fragment, { children: [_jsxs(Flex, { as: (hasSubMenu ? "div" : "a"), href: hasSubMenu ? undefined : (_a = menu.url) !== null && _a !== void 0 ? _a : "#", "aria-current": !hasSubMenu && isParentActive ? "page" : undefined, textDecoration: "none", align: "center", gap: 2, px: 2, h: "32px", mb: hasSubMenu ? "4px" : 0, borderBottom: hasSubMenu ? "1px solid" : undefined, borderColor: hasSubMenu ? theme.colors.sidebar.divider : undefined, borderRadius: hasSubMenu ? "none" : "lg", bg: !hasSubMenu && isParentActive ? "whiteAlpha.300" : "transparent", _hover: !hasSubMenu && !isBlocked
+                    ? { bg: isParentActive ? "whiteAlpha.400" : "whiteAlpha.200" }
+                    : undefined, onClick: (e) => {
                     if (!hasSubMenu) {
                         e.preventDefault();
                         if (!isBlocked)
@@ -45,9 +47,9 @@ const MenuPopoverContent = ({ menu, handleMenuClick, activeMenu, }) => {
                         if (!isSubBlocked)
                             handleMenuClick === null || handleMenuClick === void 0 ? void 0 : handleMenuClick(sub);
                     }, px: 2, h: SIDEBAR_ROW.subHeight, mb: "2px", borderRadius: "lg", align: "center", justify: "space-between", gap: 2, borderLeft: "2px solid", borderLeftColor: isSubActive ? theme.colors.sidebar.activeIcon : "transparent", bg: isSubActive ? "whiteAlpha.300" : "transparent", _hover: {
-                        bg: !isSubBlocked ? "whiteAlpha.100" : "transparent",
+                        bg: isSubBlocked ? "transparent" : isSubActive ? "whiteAlpha.400" : "whiteAlpha.200",
                         cursor: !isSubBlocked ? "pointer" : "not-allowed",
-                    }, opacity: isSubBlocked ? 0.5 : 1, pointerEvents: isSubBlocked ? "none" : "auto", transition: "background 0.12s", children: [_jsxs(Flex, { align: "center", gap: "9px", overflow: "hidden", flex: "1", children: [_jsx(Icon, { as: sub.icon, fontSize: SIDEBAR_ROW.iconSize, flexShrink: 0, color: isSubActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isSubActive ? undefined : { color: theme.colors.white }, transition: "color 0.12s" }), _jsx(TruncatedTextWithTooltip, { fontSize: SIDEBAR_ROW.fontSize, fontWeight: isSubActive ? 600 : 500, flex: 1, color: isSubActive ? activeAccent.label : theme.colors.white, _groupHover: isSubActive ? undefined : { color: theme.colors.white }, children: sub.title })] }), sub.locked ? (_jsx(Icon, { as: LockKeyhole, fontSize: "md", color: theme.colors.sidebar.mutedIcon })) : (() => {
+                    }, opacity: isSubBlocked ? 0.5 : 1, pointerEvents: isSubBlocked ? "none" : "auto", transition: "background 0.12s", children: [_jsxs(Flex, { align: "center", gap: "9px", overflow: "hidden", flex: "1", children: [sub.icon ? (_jsx(Icon, { as: sub.icon, fontSize: SIDEBAR_ROW.iconSize, flexShrink: 0, color: isSubActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isSubActive ? undefined : { color: theme.colors.white }, transition: "color 0.12s" })) : (_jsx(Box, { w: "5px", h: "5px", borderRadius: "full", flexShrink: 0, bg: isSubActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isSubActive ? undefined : { bg: theme.colors.white }, transition: "background 0.12s" })), _jsx(TruncatedTextWithTooltip, { fontSize: SIDEBAR_ROW.fontSize, fontWeight: isSubActive ? 600 : 500, flex: 1, color: isSubActive ? activeAccent.label : theme.colors.white, _groupHover: isSubActive ? undefined : { color: theme.colors.white }, children: sub.title })] }), sub.locked ? (_jsx(Icon, { as: LockKeyhole, fontSize: "md", color: theme.colors.sidebar.mutedIcon })) : (() => {
                             var _a, _b, _c, _d;
                             const cfg = typeof sub.badge === "object" && sub.badge !== null
                                 ? sub.badge

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

@@ -10,7 +10,7 @@ const OtherApps = ({ toggle, otherApps }) => {
         return (_jsx(Box, { display: "flex", alignItems: "center", justifyContent: "center", color: theme.colors.sidebar.mutedIcon, fontSize: "15px", flexShrink: 0, children: (_a = app.icon) !== null && _a !== void 0 ? _a : (_jsx(Box, { w: "0.5rem", h: "0.5rem", borderRadius: "full", bg: app.color, boxShadow: `0 0 5px ${app.color}`, flexShrink: 0 })) }));
     };
     // Grid cell: icon on top, truncated label below (label hidden when collapsed).
-    const appCell = (app) => (_jsxs(Flex, { as: "button", type: "button", direction: "column", align: "center", justify: "center", gap: "3px", px: "2px", py: "6px", borderRadius: "lg", cursor: "pointer", border: "none", bg: "transparent", w: "100%", _hover: { backgroundColor: "whiteAlpha.100" }, transition: "background 0.12s", onClick: app.onClick, children: [appIcon(app), !toggle && (_jsx(Text, { fontSize: "9.5px", color: theme.colors.sidebar.mutedLabel, textAlign: "center", maxW: "44px", isTruncated: true, children: app.name }))] }));
+    const appCell = (app) => (_jsxs(Flex, { as: "button", type: "button", direction: "column", align: "center", justify: "center", gap: "3px", px: "2px", py: "6px", borderRadius: "lg", cursor: "pointer", border: "none", bg: "transparent", w: "100%", _hover: { backgroundColor: "whiteAlpha.200" }, transition: "background 0.12s", onClick: app.onClick, children: [appIcon(app), !toggle && (_jsx(Text, { fontSize: "9.5px", color: theme.colors.sidebar.mutedLabel, textAlign: "center", maxW: "44px", isTruncated: true, children: app.name }))] }));
     const flyoutBody = (app) => {
         var _a;
         return (_jsxs(_Fragment, { children: [_jsxs(Flex, { alignItems: "center", gap: 2, mb: 1, onClick: app.onClick, children: [(_a = app.icon) !== null && _a !== void 0 ? _a : (_jsx(Box, { w: "0.5rem", h: "0.5rem", borderRadius: "full", bg: app.color, boxShadow: `0 0 5px ${app.color}`, flexShrink: 0 })), _jsx(Text, { fontSize: "sm", fontWeight: 700, color: theme.colors.white, children: app.name })] }), app.description && (_jsx(Text, { fontSize: "xs", color: theme.colors.sidebar.mutedLabel, children: app.description }))] }));

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

@@ -15,7 +15,7 @@ import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
 import { reducedMotionSx } from "../../Theme/chakra/motion.js";
 import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
-import { DENSITY_ROWS, EMPTY_STATE_HEIGHT, GROUP_HEADER_HEIGHT, TOOLBAR_HEIGHT, pxOf, rowHeightFor } from "./components/rowMetrics.js";
+import { DENSITY_ROWS, EMPTY_STATE_HEIGHT, GROUP_HEADER_HEIGHT, MAX_TABLE_HEIGHT, TOOLBAR_HEIGHT, pxOf, rowHeightFor } from "./components/rowMetrics.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";
@@ -312,9 +312,21 @@ export default function Table({ data, columns, onSelection, isLoading, isCheckbo
         rowsHeight += ((_c = renderGroups === null || renderGroups === void 0 ? void 0 : renderGroups.length) !== null && _c !== void 0 ? _c : 1) * GROUP_HEADER_HEIGHT;
     if (isEmptyState)
         rowsHeight = Math.max(rowsHeight, headerHeight + EMPTY_STATE_HEIGHT);
-    const dynamicMaxH = Math.min(500, rowsHeight);
+    const dynamicMaxH = Math.min(MAX_TABLE_HEIGHT, rowsHeight);
     const fittedMaxH = autoFitViewport ? Math.min(dynamicMaxH, viewportAvailableH) : dynamicMaxH;
-    const tableMaxH = typeof tableMaxHeight === "number" ? tableMaxHeight : (isCompactRows ? rowsHeight + 8 : fittedMaxH);
+    const formulaMaxH = typeof tableMaxHeight === "number" ? tableMaxHeight : (isCompactRows ? rowsHeight + 8 : fittedMaxH);
+    // NOTE: wrapped cell content can exceed the per-row estimate; when the row count is
+    // within the display cap (explicit maxVisibleRows, else the default 10), size naturally
+    // instead of clipping. `visibleRowsCount` isn't used here — minRows defaults to
+    // actualRows, which would make this true for any row count.
+    const rawMaxRows = typeof maxVisibleRows === "number" ? maxVisibleRows : (actualRows === 0 ? 1 : 10);
+    const showsAllRows = actualRows <= rawMaxRows;
+    const useNaturalHeight = typeof tableMaxHeight !== "number" && showsAllRows && !isTableLoading && !canInfinite &&
+        !(filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar);
+    const tableMinH = useNaturalHeight ? formulaMaxH : undefined;
+    const tableMaxH = useNaturalHeight
+        ? (autoFitViewport ? viewportAvailableH : undefined)
+        : formulaMaxH;
     const isCompactHeader = useBreakpointValue({ base: true, md: true, lg: false });
     useEffect(() => {
         if (!isCompactHeader) {
@@ -365,7 +377,7 @@ export default function Table({ data, columns, onSelection, isLoading, isCheckbo
           from { transform: rotate(0deg); }
           to { transform: rotate(360deg); }
         }
-      ` }), _jsxs(Box, { bg: theme.colors.background[50], border: `0.063rem solid ${theme.colors.boxborder[200]}`, borderRadius: "xl", overflow: "hidden", children: [filterSidebar && filterMode === "modal" && (_jsxs(Modal, { isOpen: isFilterModalOpen, onClose: onFilterModalClose, size: "4xl", scrollBehavior: "inside", children: [_jsx(ModalOverlay, {}), _jsxs(ModalContent, { bg: theme.colors.surfaceRaised, 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: (_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 }) })] })] })), _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: TOOLBAR_HEIGHT + tableMaxH }, minHeight: (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? "32rem" : "auto", children: _jsx(LeftFilterPane, { height: 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 }) })), _jsxs(Box, { flex: "1", minW: 0, children: [_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", px: 3, py: 0, height: `${TOOLBAR_HEIGHT}px`, gap: 3, flexWrap: "nowrap", bg: theme.colors.background[50], borderBottom: `0.063rem solid ${theme.colors.boxborder[200]}`, children: [[
+      ` }), _jsxs(Box, { bg: theme.colors.background[50], border: `0.063rem solid ${theme.colors.boxborder[200]}`, borderRadius: "xl", overflow: "hidden", children: [filterSidebar && filterMode === "modal" && (_jsxs(Modal, { isOpen: isFilterModalOpen, onClose: onFilterModalClose, size: "4xl", scrollBehavior: "inside", children: [_jsx(ModalOverlay, {}), _jsxs(ModalContent, { bg: theme.colors.surfaceRaised, 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: (_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 }) })] })] })), _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: TOOLBAR_HEIGHT + formulaMaxH }, minHeight: (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? "32rem" : "auto", children: _jsx(LeftFilterPane, { height: TOOLBAR_HEIGHT + formulaMaxH, 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 }) })), _jsxs(Box, { flex: "1", minW: 0, children: [_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", px: 3, py: 0, height: `${TOOLBAR_HEIGHT}px`, gap: 3, flexWrap: "nowrap", bg: theme.colors.background[50], borderBottom: `0.063rem solid ${theme.colors.boxborder[200]}`, children: [[
                                                 filterSidebar && (_jsx(ToolTip, { label: "Filter", placement: "top", children: _jsxs(Box, { position: "relative", display: "inline-block", children: [_jsx(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: {
@@ -401,7 +413,7 @@ export default function Table({ data, columns, onSelection, isLoading, isCheckbo
                                                 .filter(Boolean)
                                                 .flatMap((tool, i) => (i === 0 ? [tool] : [_jsx(VeritcalDivider, {}, `divider-${i}`), tool])), _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, { currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: pages, paginationText: tablePaginationText, handlePageSizeChange: handlePageSizeChange, dataLength: tableData.length, isServerPagination: isServerPagination, paginationSelectOptions: paginationSelectOptions }) })), (isPagination || isServerPagination) && !isGrouped && !canInfinite && isCompactHeader && (_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.surfaceRaised, boxShadow: "lg", children: _jsx(PopoverBody, { p: 0, children: _jsx(Pagination, { currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: pages, paginationText: tablePaginationText, handlePageSizeChange: handlePageSizeChange, dataLength: tableData.length, isServerPagination: isServerPagination, paginationSelectOptions: paginationSelectOptions }) }) }) })] }))] })] }), _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: {
+                                                                    }, onClick: () => setIsPaginationPopoverOpen((open) => !open) }) }), _jsx(Portal, { children: _jsx(PopoverContent, { maxW: "22rem", p: 2, zIndex: 1600, bg: theme.colors.surfaceRaised, boxShadow: "lg", children: _jsx(PopoverBody, { p: 0, children: _jsx(Pagination, { currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: pages, paginationText: tablePaginationText, handlePageSizeChange: handlePageSizeChange, dataLength: tableData.length, isServerPagination: isServerPagination, paginationSelectOptions: paginationSelectOptions }) }) }) })] }))] })] }), _jsxs(TableContainer, { ref: tableContainerRef, position: "relative", h: isTableLoading ? tableMaxH : undefined, minH: !isTableLoading ? tableMinH : 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.

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

@@ -6,5 +6,6 @@ export const DENSITY_ROWS = {
 export const TOOLBAR_HEIGHT = 45;
 export const GROUP_HEADER_HEIGHT = 42;
 export const EMPTY_STATE_HEIGHT = 200;
+export const MAX_TABLE_HEIGHT = 500;
 export const rowHeightFor = (density) => DENSITY_ROWS[density !== null && density !== void 0 ? density : "normal"].height;
 export const pxOf = (length) => parseFloat(length);

package/dist/esm/Constants/Sidebar.js

@@ -12,14 +12,14 @@ export const cssForScrollBar = (theme) => ({
         borderRadius: "0.5rem",
     },
     "&:hover::-webkit-scrollbar-thumb": {
-        background: theme.colors.primary[500],
+        background: theme.colors.sidebar.mutedIcon,
     },
     "&:hover::-webkit-scrollbar-thumb:hover": {
-        background: theme.colors.primary[700],
+        background: theme.colors.sidebar.mutedLabel,
     },
     scrollbarWidth: "none",
     "&:hover": {
         scrollbarWidth: "thin",
-        scrollbarColor: `${theme.colors.primary[500]} ${theme.colors.sidebar.background[500]}`,
+        scrollbarColor: `${theme.colors.sidebar.mutedIcon} ${theme.colors.sidebar.background[500]}`,
     },
 });

package/dist/esm/Theme/tokens/builders/sidebarAccent.js

@@ -1,5 +1,5 @@
 import { compositeOver } from "./color.js";
-import { liftToContrast, resolveHoverTint, AA_NON_TEXT } from "./outlineRung.js";
+import { liftToContrast, resolveHoverTint, settleAcross, AA_NON_TEXT } from "./outlineRung.js";
 import { buildSemanticText } from "./semanticText.js";
 /** WCAG 1.4.3 — the active label is normal-size text. */
 export const AA_NORMAL_TEXT = 4.5;
@@ -18,13 +18,15 @@ export const sidebarDivider = (background) => resolveHoverTint(compositeOver(DIV
 export const buildSidebarTokens = (background, lightPrimary, semantic) => {
     const surface = sidebarActiveSurface(background);
     const elevated = resolveHoverTint(background[500], background[500]);
+    // Muted chrome must clear contrast on the bare rail AND the lightest row-hover overlay.
+    const rowPeak = sidebarRowPeak(elevated);
     return {
         background,
         elevated,
         activeIcon: liftToContrast(lightPrimary[300], surface, AA_NON_TEXT),
         activeLabel: liftToContrast(lightPrimary[100], surface, AA_NORMAL_TEXT),
-        mutedIcon: liftToContrast(background[300], elevated, AA_NON_TEXT),
-        mutedLabel: liftToContrast(background[100], elevated, AA_NORMAL_TEXT),
+        mutedIcon: settleAcross(background[300], [elevated, rowPeak], AA_NON_TEXT),
+        mutedLabel: settleAcross(background[100], [elevated, rowPeak], AA_NORMAL_TEXT),
         semanticText: buildSemanticText(semantic, elevated),
         hoverBg: sidebarHoverSurface(background),
         activeBg: surface,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.4.2-beta.52",
+  "version": "2.4.2-beta.54",
   "description": "React component library for Pixelize apps: themeable Chakra-based components, design tokens and light/dark brand theming.",
   "keywords": [
     "react",