pixelize-design-library 3.0.0 → 3.1.0

package/dist/esm/Components/NotificationCenter/row/rowStyles.js

@@ -0,0 +1,19 @@
+import { BUTTON_SIZES } from "../../../Theme/tokens/primitives/controlSizes.js";
+export const ROW_BUTTON_SIZE = {
+    panel: "xs",
+    inbox: "sm",
+    phone: "md",
+};
+export const iconSizeFor = (size) => BUTTON_SIZES[size].iconSize;
+export const WAITING_AFTER_DAYS = 3;
+export const TOUCH_TARGET_SX = {
+    "&::before": { content: '""', position: "absolute", inset: "-0.125rem" },
+};
+export const CHECKBOX_TOUCH_TARGET_SX = {
+    "@media (pointer: coarse)": {
+        "& label": { position: "relative" },
+        "& label::before": { content: '""', position: "absolute", inset: "-0.875rem" },
+    },
+};
+export const touchTargetFor = (size) => size === "md" ? TOUCH_TARGET_SX : undefined;
+export const testIdFor = (entry, suffix) => entry.testId ? `${entry.testId}-${suffix}` : undefined;

package/dist/esm/Components/SegmentedControl/segmentedInk.js

@@ -1,5 +1,18 @@
 import { AA_NON_TEXT, liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
-import { AA_NORMAL_TEXT } from "../../Theme/tokens/builders/accentText.js";
+import { AA_NORMAL_TEXT, isDarkCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { relativeLuminance } from "../../Theme/tokens/builders/color.js";
+const TRACK_STEPS = [600, 500, 400, 300, 200, 100];
+// NOTE: light tracks never outweigh the outline; Zinc's full ramp makes [600] mid-grey.
+export const segmentedTrackStep = (colors) => {
+    if (isDarkCanvas(colors.backgroundColor.main))
+        return 600;
+    const outline = relativeLuminance(colors.boxborder[500]);
+    for (const step of TRACK_STEPS) {
+        if (relativeLuminance(colors.background[step]) >= outline)
+            return step;
+    }
+    return 50;
+};
 /** The surface a segment's label really sits on. */
 export const segmentedTrackSurface = (variant, colors, surface) => {
     if (variant === "underlineSlide")
@@ -8,7 +21,7 @@ export const segmentedTrackSurface = (variant, colors, surface) => {
     // parent, so its ink was derived from a canvas the control was not actually on.
     if (variant === "brandSlide")
         return colors.surfaceRaised;
-    return colors.background[600];
+    return colors.background[segmentedTrackStep(colors)];
 };
 /** The surface the selected label sits on: the default variant lifts it onto its own plate. */
 export const segmentedSelectedSurface = (variant, colors, trackSurface) => (variant === "default" ? colors.backgroundColor.light : trackSurface);

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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";
@@ -68,13 +68,13 @@ const ExpandedItem = ({ item, isActive, itemFontSize, onItemClick }) => {
     return item.locked && item.lockedReason ? (_jsx(ToolTip, { label: item.lockedReason, placement: "top", children: row })) : (row);
 };
 /** Secondary flyout panel beside the main rail, listing the active menu's `secondaryItems`; collapses to icons. */
-const SecondaryBar = ({ items = [], defaultCollapsed = true, collapsedWidth = "3.5rem", expandedWidth = "10rem", headerFontSize = SIDEBAR_ROW.fontSize, itemFontSize = SIDEBAR_ROW.fontSize, selected, onItemClick, title, icon, }) => {
+const SecondaryBar = ({ items = [], defaultCollapsed = true, collapsedWidth = "3.5rem", expandedWidth = "10rem", shrinkable = false, 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.200" }, transition: SIDEBAR_BG_TRANSITION, sx: sidebarFocusStyles(theme.colors), 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) => {
+    return (_jsx(Box, { as: "nav", "aria-label": title ? `${title} navigation` : "Secondary navigation", transition: transitionFor(["width"], "base"), pos: "sticky", top: 0, sx: fullViewportHeight, w: width, minW: shrinkable ? collapsedWidth : undefined, 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(Flex, { align: "center", gap: "7px", flex: "1", minW: 0, overflow: "hidden", 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: SIDEBAR_BG_TRANSITION, sx: sidebarFocusStyles(theme.colors), 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

@@ -33,6 +33,13 @@ const inlineTransitions = (collapse) => {
     };
 };
 const OVERLAY_WIDTH = "14.7rem";
+const OVERLAY_MAX_WIDTH = "88vw";
+const PANEL_BORDER = "1px";
+const SECONDARY_STRIP_WIDTH = "3.5rem";
+const SECONDARY_OPEN_WIDTH = "10rem";
+const PRIMARY_MAX_WITH_SECONDARY = `calc(${OVERLAY_MAX_WIDTH} - ${PANEL_BORDER} - ${SECONDARY_STRIP_WIDTH})`;
+// NOTE: below this the primary (12.5rem) and secondary (8rem) label floors overflow 88vw.
+const NARROW_DRAWER_QUERY = "(max-width: 23.3em)";
 const SCRIM_TRANSITION = transitionFor(["opacity", "visibility"], "base");
 const OVERLAY_SLIDE = transitionFor(["transform"], "enter", "out");
 const OVERLAY_WIDTH_TRANSITION = transitionFor(["width"], "enter", "out");
@@ -46,6 +53,7 @@ import PinnedSection from "./components/PinnedSection.js";
 import { SIDEBAR_CHROME, SIDEBAR_ROW } from "./sidebarScale.js";
 import { fullViewportHeight } from "../../Theme/tokens/builders/viewportHeight.js";
 import { suspendResizeWithin } from "../../Hooks/sharedResizeObserver.js";
+import { useMatchMedia } from "../../Hooks/useMatchMedia.js";
 const SidebarHeader = ({ logo, companyName, companySubtitle, toggle, isLoading, onToggle, overlay, onClose, }) => {
     const theme = useCustomTheme();
     const activeAccent = getSidebarActiveAccent(theme.colors);
@@ -76,10 +84,10 @@ const SkeletonMenuRow = ({ toggle }) => {
     const theme = useCustomTheme();
     return (_jsx(Box, { w: "100%", px: toggle ? 1 : 2, py: 2, children: toggle ? (_jsx(Flex, { align: "center", gap: 4, justifyContent: "center", children: _jsx(Skeleton, { w: "24px", h: "24px", borderRadius: "lg", startColor: theme.colors.sidebar.background[400], endColor: theme.colors.sidebar.background[300] }) })) : (_jsxs(Flex, { align: "center", gap: 3, children: [_jsx(Skeleton, { w: "18px", h: "18px", borderRadius: "lg", startColor: theme.colors.sidebar.background[400], endColor: theme.colors.sidebar.background[300] }), _jsx(Skeleton, { h: "0.875rem", w: "80%", borderRadius: "lg", startColor: theme.colors.sidebar.background[400], endColor: theme.colors.sidebar.background[300] })] })) }));
 };
-const AddNewButton = ({ toggle, onClick, overlay }) => {
+const AddNewButton = ({ toggle, onClick }) => {
     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.200" }, transition: SIDEBAR_BG_TRANSITION, sx: sidebarFocusStyles(theme.colors), 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: 500, children: "Add New" }))] }));
+    return (_jsxs(Flex, { as: "button", type: "button", "data-group": "", "aria-label": "Add New", alignItems: "center", gap: "9px", px: "10px", py: "7px", borderRadius: "lg", cursor: "pointer", border: "none", bg: "transparent", w: "100%", mb: "2px", justifyContent: toggle ? "center" : "flex-start", _hover: { backgroundColor: "whiteAlpha.200" }, transition: SIDEBAR_BG_TRANSITION, sx: sidebarFocusStyles(theme.colors), 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: 500, children: "Add New" }))] }));
 };
 const deriveInitials = (user) => {
     if (user.initials)
@@ -91,13 +99,13 @@ const deriveInitials = (user) => {
         return parts[0].slice(0, 2).toUpperCase();
     return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
 };
-const UserFooter = ({ user, toggle, overlay }) => {
+const UserFooter = ({ user, toggle }) => {
     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", 
         // 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: SIDEBAR_BG_TRANSITION, sx: sidebarFocusStyles(theme.colors), 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 })] }) }));
+    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: "6px", w: "100%", borderRadius: "lg", cursor: "pointer", bg: "transparent", border: "none", justify: toggle ? "center" : "flex-start", _hover: { bg: "whiteAlpha.200" }, transition: SIDEBAR_BG_TRANSITION, sx: sidebarFocusStyles(theme.colors), 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 }) => {
@@ -136,6 +144,7 @@ export default function Sidebar({ menus, activeMenu, handleMenuClick, handleSeco
     // In overlay mode the panel is always fully expanded — the mini-rail/collapse
     // is a desktop-only space affordance — so children render as if `toggle=false`.
     const effToggle = overlay ? false : toggle;
+    const narrowViewport = useMatchMedia(NARROW_DRAWER_QUERY);
     // A peeked overlay was never pinned, so leaving the panel must close it; a clicked-open
     // one must not, or the drawer would vanish the moment the pointer moved away.
     const overlayPeeking = overlay && peekOpen && !mobileOpen;
@@ -168,6 +177,7 @@ export default function Sidebar({ menus, activeMenu, handleMenuClick, handleSeco
     const activeTop = menus.find((m) => String(m.title) === String(activeMenu)) ||
         menus.find((m) => String(m.id) === String(activeMenu));
     const secondaryItems = (_b = activeTop === null || activeTop === void 0 ? void 0 : activeTop.secondaryItems) !== null && _b !== void 0 ? _b : [];
+    const hasSecondary = secondaryItems.length > 0;
     const inline = inlineTransitions(collapseTransition);
     const pinnedActive = activePinnedId != null && !!(pinnedItems === null || pinnedItems === void 0 ? void 0 : pinnedItems.some((p) => String(p.id) === String(activePinnedId)));
     // Sync toggle with external `open` prop.
@@ -333,7 +343,7 @@ export default function Sidebar({ menus, activeMenu, handleMenuClick, handleSeco
             onMobileClose === null || onMobileClose === void 0 ? void 0 : onMobileClose();
     };
     const baseTransform = isOverlayOpen ? "translateX(0)" : "translateX(-100%)";
-    return (_jsxs(_Fragment, { children: [_jsx(Box, { display: mobileNav ? "block" : { base: "block", lg: "none" }, position: "fixed", inset: 0, ...overlayScrimStyles(theme.colors), zIndex: Z_SCRIM, opacity: isOverlayOpen ? 1 : 0, visibility: isOverlayOpen ? "visible" : "hidden", transition: SCRIM_TRANSITION, sx: { [REDUCED_MOTION_QUERY]: { transition: "none" } }, onClick: closeOverlay, "aria-hidden": "true" }), _jsxs(Box, { ref: panelRef, onKeyDown: trapTab, tabIndex: overlay ? -1 : undefined, outline: "none", position: mobileNav ? "fixed" : { base: "fixed", lg: "sticky" }, top: 0, left: mobileNav ? 0 : { base: 0, lg: "auto" }, bottom: mobileNav ? 0 : { base: 0, lg: "auto" }, zIndex: mobileNav ? Z_PANEL : { base: Z_PANEL, lg: "auto" }, maxW: mobileNav ? "88vw" : { base: "88vw", lg: "none" }, transform: mobileNav ? baseTransform : { base: baseTransform, lg: "none" }, transition: mobileNav
+    return (_jsxs(_Fragment, { children: [_jsx(Box, { display: mobileNav ? "block" : { base: "block", lg: "none" }, position: "fixed", inset: 0, ...overlayScrimStyles(theme.colors), zIndex: Z_SCRIM, opacity: isOverlayOpen ? 1 : 0, visibility: isOverlayOpen ? "visible" : "hidden", transition: SCRIM_TRANSITION, sx: { [REDUCED_MOTION_QUERY]: { transition: "none" } }, onClick: closeOverlay, "aria-hidden": "true" }), _jsxs(Box, { ref: panelRef, onKeyDown: trapTab, tabIndex: overlay ? -1 : undefined, outline: "none", position: mobileNav ? "fixed" : { base: "fixed", lg: "sticky" }, top: 0, left: mobileNav ? 0 : { base: 0, lg: "auto" }, bottom: mobileNav ? 0 : { base: 0, lg: "auto" }, zIndex: mobileNav ? Z_PANEL : { base: Z_PANEL, lg: "auto" }, maxW: mobileNav ? OVERLAY_MAX_WIDTH : { base: OVERLAY_MAX_WIDTH, lg: "none" }, transform: mobileNav ? baseTransform : { base: baseTransform, lg: "none" }, transition: mobileNav
                     ? dragging
                         ? "none"
                         : OVERLAY_SLIDE
@@ -342,13 +352,13 @@ export default function Sidebar({ menus, activeMenu, handleMenuClick, handleSeco
                             ? "none"
                             : OVERLAY_SLIDE,
                         lg: inline.shadow,
-                    }, borderRadius: "none", boxShadow: mobileNav ? theme.shadows["2xl"] : { base: theme.shadows["2xl"], lg: theme.shadows.lg }, display: "flex", background: theme.colors.sidebar.background[500], borderRight: "1px solid", borderColor: theme.colors.sidebar.divider, role: overlay ? "dialog" : undefined, "aria-modal": overlay ? true : undefined, "aria-label": overlay ? "Main navigation" : undefined, ...(overlay && !isOverlayOpen ? { inert: "" } : {}), sx: {
+                    }, borderRadius: "none", boxShadow: mobileNav ? theme.shadows["2xl"] : { base: theme.shadows["2xl"], lg: theme.shadows.lg }, display: "flex", background: theme.colors.sidebar.background[500], borderRight: `${PANEL_BORDER} solid`, borderColor: theme.colors.sidebar.divider, role: overlay ? "dialog" : undefined, "aria-modal": overlay ? true : undefined, "aria-label": overlay ? "Main navigation" : undefined, ...(overlay && !isOverlayOpen ? { inert: "" } : {}), sx: {
                     ...fullViewportHeight,
                     touchAction: overlay ? "pan-y" : "auto",
                     [REDUCED_MOTION_QUERY]: { "&, & *": { transition: "none", animation: "none" } },
                 }, onMouseLeave: overlayPeeking ? onPeekEnd : undefined, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerUp, children: [_jsx(Box, { width: mobileNav
                             ? OVERLAY_WIDTH
-                            : { base: OVERLAY_WIDTH, lg: effToggle ? RAIL_WIDTH : EXPANDED_WIDTH }, transition: mobileNav
+                            : { base: OVERLAY_WIDTH, lg: effToggle ? RAIL_WIDTH : EXPANDED_WIDTH }, maxW: overlay && hasSecondary ? PRIMARY_MAX_WITH_SECONDARY : undefined, transition: mobileNav
                             ? OVERLAY_WIDTH_TRANSITION
-                            : { base: OVERLAY_WIDTH_TRANSITION, lg: inline.width }, display: "flex", flexDirection: "column", justifyContent: "space-between", sx: { "@media (prefers-reduced-motion: reduce)": { transition: "none" } }, children: _jsxs(Flex, { flexDir: "column", w: "100%", as: "nav", "aria-label": "Main navigation", h: "100%", children: [_jsx(SidebarHeader, { logo: logo, companyName: companyName, companySubtitle: companySubtitle, toggle: effToggle, isLoading: isLoading, onToggle: changeToggle, overlay: overlay, onClose: onMobileClose }), _jsx(Box, { id: scrollContainerId, flex: "1", minH: 0, w: "100%", overflowY: "auto", overflowX: "hidden", py: 2, px: "6px", sx: cssForScrollBar(theme), children: isLoading ? (Array.from({ length: loadingLines !== null && loadingLines !== void 0 ? loadingLines : 15 }).map((_, i) => (_jsx(SkeletonMenuRow, { toggle: effToggle }, i)))) : (_jsxs(_Fragment, { children: [pinnedItems && pinnedItems.length > 0 && (_jsx(PinnedSection, { items: pinnedItems, label: pinnedLabel, limit: pinnedLimit, toggle: effToggle, overlay: overlay, activeId: activePinnedId, labels: pinnedLabels, onItemClick: handleMenuClickInternal, onUnpin: onUnpin })), _jsx(MenuItems, { activeMenu: pinnedActive ? NO_ACTIVE_MENU : activeMenu, menus: menus, handleMenuClick: handleMenuClickInternal, toggle: effToggle, selectedSubMenu: selectedSubMenu, overlay: overlay, containerId: scrollContainerId })] })) }), _jsxs(Box, { flexShrink: 0, children: [!isDisableAddNew && (_jsx(Box, { borderTop: "1px solid", borderColor: theme.colors.sidebar.divider, py: 2, px: "6px", children: _jsx(AddNewButton, { toggle: effToggle, onClick: onAddNewClick, overlay: overlay }) })), _jsx(OtherApps, { toggle: effToggle, otherApps: otherApps !== null && otherApps !== void 0 ? otherApps : [] }), user && _jsx(UserFooter, { user: user, toggle: effToggle, overlay: overlay }), _jsx(FooterControls, { toggle: effToggle, overlay: overlay, mobileNav: mobileNav, onToggleCollapse: changeToggle, onToggleMobileNav: onToggleMobileNav })] })] }) }), secondaryItems.length > 0 && (_jsx(SecondaryBar, { items: secondaryItems, defaultCollapsed: effToggle, collapsedWidth: "3.5rem", expandedWidth: "10rem", selected: selectedSecondaryItem, onItemClick: handleSecondaryNavClick, title: activeTop === null || activeTop === void 0 ? void 0 : activeTop.title, icon: activeTop === null || activeTop === void 0 ? void 0 : activeTop.icon })), overlay && (_jsx(Box, { display: mobileOpen ? "block" : "none", position: "absolute", top: "50%", right: "6px", transform: "translateY(-50%)", w: "4px", h: "42px", borderRadius: "full", bg: theme.colors.sidebar.mutedIcon, "aria-hidden": "true" }))] })] }));
+                            : { base: OVERLAY_WIDTH_TRANSITION, lg: inline.width }, display: "flex", flexDirection: "column", justifyContent: "space-between", sx: { "@media (prefers-reduced-motion: reduce)": { transition: "none" } }, children: _jsxs(Flex, { flexDir: "column", w: "100%", as: "nav", "aria-label": "Main navigation", h: "100%", children: [_jsx(SidebarHeader, { logo: logo, companyName: companyName, companySubtitle: companySubtitle, toggle: effToggle, isLoading: isLoading, onToggle: changeToggle, overlay: overlay, onClose: onMobileClose }), _jsx(Box, { id: scrollContainerId, flex: "1", minH: 0, w: "100%", overflowY: "auto", overflowX: "hidden", py: 2, px: "6px", sx: cssForScrollBar(theme), children: isLoading ? (Array.from({ length: loadingLines !== null && loadingLines !== void 0 ? loadingLines : 15 }).map((_, i) => (_jsx(SkeletonMenuRow, { toggle: effToggle }, i)))) : (_jsxs(_Fragment, { children: [pinnedItems && pinnedItems.length > 0 && (_jsx(PinnedSection, { items: pinnedItems, label: pinnedLabel, limit: pinnedLimit, toggle: effToggle, overlay: overlay, activeId: activePinnedId, labels: pinnedLabels, onItemClick: handleMenuClickInternal, onUnpin: onUnpin })), _jsx(MenuItems, { activeMenu: pinnedActive ? NO_ACTIVE_MENU : activeMenu, menus: menus, handleMenuClick: handleMenuClickInternal, toggle: effToggle, selectedSubMenu: selectedSubMenu, containerId: scrollContainerId })] })) }), _jsxs(Box, { flexShrink: 0, children: [!isDisableAddNew && (_jsx(Box, { borderTop: "1px solid", borderColor: theme.colors.sidebar.divider, py: 2, px: "6px", children: _jsx(AddNewButton, { toggle: effToggle, onClick: onAddNewClick }) })), _jsx(OtherApps, { toggle: effToggle, otherApps: otherApps !== null && otherApps !== void 0 ? otherApps : [] }), user && _jsx(UserFooter, { user: user, toggle: effToggle }), _jsx(FooterControls, { toggle: effToggle, overlay: overlay, mobileNav: mobileNav, onToggleCollapse: changeToggle, onToggleMobileNav: onToggleMobileNav })] })] }) }), hasSecondary && (_jsx(SecondaryBar, { items: secondaryItems, defaultCollapsed: effToggle || narrowViewport, collapsedWidth: SECONDARY_STRIP_WIDTH, expandedWidth: SECONDARY_OPEN_WIDTH, shrinkable: overlay, selected: selectedSecondaryItem, onItemClick: handleSecondaryNavClick, title: activeTop === null || activeTop === void 0 ? void 0 : activeTop.title, icon: activeTop === null || activeTop === void 0 ? void 0 : activeTop.icon })), overlay && (_jsx(Box, { display: mobileOpen ? "block" : "none", position: "absolute", top: "50%", right: "6px", transform: "translateY(-50%)", w: "4px", h: "42px", borderRadius: "full", bg: theme.colors.sidebar.mutedIcon, "aria-hidden": "true" }))] })] }));
 }

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

@@ -25,7 +25,7 @@ const SUBMENU_REVEAL_TRANSITION = transitionFor(["opacity", "transform"], "base"
  * routed through the in-app handler.
  */
 export const isBrowserNavigationGesture = (e) => e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button !== 0;
-const MenuItemBox = ({ menu, activeMenu, toggle, handleClick, isOpen, onToggle, overlay = false, }) => {
+const MenuItemBox = ({ menu, activeMenu, toggle, handleClick, isOpen, onToggle, }) => {
     var _a, _b, _c, _d, _e;
     const theme = useCustomTheme();
     const activeAccent = getSidebarActiveAccent(theme.colors);
@@ -37,7 +37,6 @@ const MenuItemBox = ({ menu, activeMenu, toggle, handleClick, isOpen, onToggle,
     const isBlocked = menuDisabled(menu) || locked;
     const hasSubMenu = !!(subMenu === null || subMenu === void 0 ? void 0 : subMenu.length);
     const submenuPanelId = `submenu-${reactId}`;
-    const rowHeight = overlay ? SIDEBAR_ROW.overlayHeight : SIDEBAR_ROW.height;
     // A submenu parent only expands, so it is a button; every other row navigates.
     // Cast: Chakra narrows `as` unions to their *shared* props, which drops `href`.
     const rowAs = (hasSubMenu ? "button" : "a");
@@ -75,7 +74,7 @@ const MenuItemBox = ({ menu, activeMenu, toggle, handleClick, isOpen, onToggle,
         textAlign: "left",
         textDecoration: "none",
         w: "100%",
-        h: rowHeight,
+        h: SIDEBAR_ROW.height,
         borderRadius: "lg",
         px: "10px",
         fontWeight: 500,

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

@@ -3,7 +3,7 @@ import React, { memo, useCallback, useEffect, useState } from "react";
 import { Box } from "@chakra-ui/react";
 import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
 import MenuItemBox from "./MenuItemBox.js";
-const MenuItems = ({ menus, activeMenu, handleMenuClick, toggle, selectedSubMenu, overlay, containerId, }) => {
+const MenuItems = ({ menus, activeMenu, handleMenuClick, toggle, selectedSubMenu, containerId, }) => {
     const theme = useCustomTheme();
     const [openMenuId, setOpenMenuId] = useState(null);
     const [lastClickY, setLastClickY] = useState(null);
@@ -110,7 +110,7 @@ const MenuItems = ({ menus, activeMenu, handleMenuClick, toggle, selectedSubMenu
                 lastGroup = menu.group;
                 groupCount += 1;
             }
-            return (_jsxs(React.Fragment, { children: [showGroup && !isFirstGroup && (_jsx(Box, { h: "1px", bg: theme.colors.sidebar.divider, mx: 2, my: overlay ? "3px" : "5px" })), showGroup && !toggle && (_jsx(Box, { "aria-hidden": "true", px: "10px", pt: overlay ? "6px" : "10px", pb: "3px", fontSize: "xs-minus", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.1em", color: theme.colors.sidebar.mutedLabel, whiteSpace: "nowrap", overflow: "hidden", children: menu.group })), _jsx(MenuItemBox, { menu: menu, activeMenu: activeMenu, toggle: toggle, handleClick: handleMenuClick, selectedSubMenu: selectedSubMenu, isOpen: openMenuId === menu.id, onToggle: handleToggle, overlay: overlay })] }, `${String((_c = (_b = (_a = menu.id) !== null && _a !== void 0 ? _a : menu.url) !== null && _b !== void 0 ? _b : menu.title) !== null && _c !== void 0 ? _c : idx)}-${idx}`));
+            return (_jsxs(React.Fragment, { children: [showGroup && !isFirstGroup && (_jsx(Box, { h: "1px", bg: theme.colors.sidebar.divider, mx: 2, my: "5px" })), showGroup && !toggle && (_jsx(Box, { "aria-hidden": "true", px: "10px", pt: "10px", pb: "3px", fontSize: "xs-minus", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.1em", color: theme.colors.sidebar.mutedLabel, whiteSpace: "nowrap", overflow: "hidden", children: menu.group })), _jsx(MenuItemBox, { menu: menu, activeMenu: activeMenu, toggle: toggle, handleClick: handleMenuClick, selectedSubMenu: selectedSubMenu, isOpen: openMenuId === menu.id, onToggle: handleToggle })] }, `${String((_c = (_b = (_a = menu.id) !== null && _a !== void 0 ? _a : menu.url) !== null && _b !== void 0 ? _b : menu.title) !== null && _c !== void 0 ? _c : idx)}-${idx}`));
         }) }));
 };
 export default memo(MenuItems);

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

@@ -47,7 +47,6 @@ const PinnedSection = ({ items, label = DEFAULT_PINNED_LABEL, limit = DEFAULT_PI
     const text = { ...DEFAULT_LABELS, ...labels };
     const headingId = `pinned-${sanitizeId(useId())}`;
     const cap = Math.max(1, limit);
-    const rowHeight = overlay ? SIDEBAR_ROW.overlayHeight : SIDEBAR_ROW.height;
     const activeIndex = activeId == null ? -1 : items.findIndex((i) => String(i.id) === String(activeId));
     const [showAll, setShowAll] = useState(activeIndex >= cap);
     useEffect(() => {
@@ -72,7 +71,7 @@ const PinnedSection = ({ items, label = DEFAULT_PINNED_LABEL, limit = DEFAULT_PI
     };
     const renderRow = (item) => {
         const isActive = activeIndex >= 0 && String(item.id) === String(activeId);
-        const anchor = (_jsx(Box, { as: "a", href: item.url, "data-group": "", "data-pinned-id": String(item.id), "aria-label": toggle ? item.title : undefined, "aria-current": isActive ? "page" : undefined, display: "flex", alignItems: "center", textAlign: "left", textDecoration: "none", w: "100%", h: rowHeight, borderRadius: "lg", pl: "10px", pr: !toggle && onUnpin ? `calc(10px + ${UNPIN_SIZE})` : "10px", fontWeight: 500, borderLeft: "2px solid", borderLeftColor: isActive ? theme.colors.sidebar.activeIcon : "transparent", backgroundColor: isActive ? LADDER.active : "transparent", color: theme.colors.sidebar.mutedIcon, _hover: { backgroundColor: isActive ? LADDER.activeHover : LADDER.hover }, cursor: "pointer", transition: SIDEBAR_BG_TRANSITION, sx: sidebarFocusStyles(theme.colors), onClick: (e) => {
+        const anchor = (_jsx(Box, { as: "a", href: item.url, "data-group": "", "data-pinned-id": String(item.id), "aria-label": toggle ? item.title : undefined, "aria-current": isActive ? "page" : undefined, display: "flex", alignItems: "center", textAlign: "left", textDecoration: "none", w: "100%", h: SIDEBAR_ROW.height, borderRadius: "lg", pl: "10px", pr: !toggle && onUnpin ? `calc(10px + ${UNPIN_SIZE})` : "10px", fontWeight: 500, borderLeft: "2px solid", borderLeftColor: isActive ? theme.colors.sidebar.activeIcon : "transparent", backgroundColor: isActive ? LADDER.active : "transparent", color: theme.colors.sidebar.mutedIcon, _hover: { backgroundColor: isActive ? LADDER.activeHover : LADDER.hover }, cursor: "pointer", transition: SIDEBAR_BG_TRANSITION, sx: sidebarFocusStyles(theme.colors), onClick: (e) => {
                 if (item.url && isBrowserNavigationGesture(e))
                     return;
                 e.preventDefault();
@@ -86,10 +85,10 @@ const PinnedSection = ({ items, label = DEFAULT_PINNED_LABEL, limit = DEFAULT_PI
     const disclosureLabel = showAll
         ? text.showLess
         : text.showMore.replace("{count}", String(hiddenCount));
-    const disclosureButton = (_jsxs(Box, { as: "button", type: "button", "aria-expanded": showAll, "aria-label": toggle ? disclosureLabel : undefined, onClick: () => setShowAll((v) => !v), display: "flex", alignItems: "center", justifyContent: toggle ? "center" : "flex-start", gap: "9px", w: "100%", h: rowHeight, px: "10px", borderRadius: "lg", border: "none", borderLeft: "2px solid transparent", bg: "transparent", cursor: "pointer", color: theme.colors.sidebar.mutedLabel, fontSize: SIDEBAR_ROW.fontSize, fontWeight: 500, _hover: {
+    const disclosureButton = (_jsxs(Box, { as: "button", type: "button", "aria-expanded": showAll, "aria-label": toggle ? disclosureLabel : undefined, onClick: () => setShowAll((v) => !v), display: "flex", alignItems: "center", justifyContent: toggle ? "center" : "flex-start", gap: "9px", w: "100%", h: SIDEBAR_ROW.height, px: "10px", borderRadius: "lg", border: "none", borderLeft: "2px solid transparent", bg: "transparent", cursor: "pointer", color: theme.colors.sidebar.mutedLabel, fontSize: SIDEBAR_ROW.fontSize, fontWeight: 500, _hover: {
             backgroundColor: LADDER.hover,
             color: theme.colors.white,
         }, transition: SIDEBAR_BG_TRANSITION, sx: sidebarFocusStyles(theme.colors), children: [_jsx(Icon, { as: showAll ? ChevronUp : ChevronDown, fontSize: "md", flexShrink: 0 }), !toggle && _jsx("span", { children: disclosureLabel })] }));
-    return (_jsxs(Box, { mb: toggle ? "5px" : "3px", "data-testid": "sidebar-pinned", children: [_jsx(Box, { id: headingId, as: "h2", px: "10px", pt: overlay ? "6px" : "10px", pb: "3px", fontSize: "xs-minus", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.1em", color: theme.colors.sidebar.mutedLabel, whiteSpace: "nowrap", overflow: "hidden", sx: toggle ? VISUALLY_HIDDEN : undefined, children: label }), _jsxs(Box, { as: "ul", "aria-labelledby": headingId, display: "flex", flexDirection: "column", gap: "2px", m: 0, p: 0, children: [visible.map(renderRow), hiddenCount > 0 && (_jsx(Box, { as: "li", listStyleType: "none", children: toggle ? (_jsx(ToolTip, { label: disclosureLabel, placement: "right", children: disclosureButton })) : (disclosureButton) }))] }), _jsx(Box, { h: "1px", bg: theme.colors.sidebar.divider, mx: 2, mt: overlay ? "6px" : "8px", mb: overlay ? "3px" : "5px" })] }));
+    return (_jsxs(Box, { mb: toggle ? "5px" : "3px", "data-testid": "sidebar-pinned", children: [_jsx(Box, { id: headingId, as: "h2", px: "10px", pt: "10px", pb: "3px", fontSize: "xs-minus", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.1em", color: theme.colors.sidebar.mutedLabel, whiteSpace: "nowrap", overflow: "hidden", sx: toggle ? VISUALLY_HIDDEN : undefined, children: label }), _jsxs(Box, { as: "ul", "aria-labelledby": headingId, display: "flex", flexDirection: "column", gap: "2px", m: 0, p: 0, children: [visible.map(renderRow), hiddenCount > 0 && (_jsx(Box, { as: "li", listStyleType: "none", children: toggle ? (_jsx(ToolTip, { label: disclosureLabel, placement: "right", children: disclosureButton })) : (disclosureButton) }))] }), _jsx(Box, { h: "1px", bg: theme.colors.sidebar.divider, mx: 2, mt: "8px", mb: "5px" })] }));
 };
 export default PinnedSection;

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

@@ -2,8 +2,6 @@ import { fontSizes } from "../../Theme/tokens/primitives/typography.js";
 /** One type and row scale for the whole sidebar — rail, submenu, flyout, secondary bar and chrome. */
 export const SIDEBAR_ROW = {
     height: "32px",
-    /** Rail row in the mobile overlay — the WCAG 2.5.5 touch target. */
-    overlayHeight: "44px",
     subHeight: "28px",
     fontSize: fontSizes["xs-plus"],
     iconSize: "1rem",

package/dist/esm/Components/Switch/Switch.js

@@ -2,12 +2,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from "@chakra-ui/react";
 import SegmentedControl from "../SegmentedControl/SegmentedControl.js";
 /** @deprecated Two labelled choices; for a single on/off field use `ToggleSwitch`. Renders `SegmentedControl` at 12.5rem when labelled. */
-export default function Switch({ leftText, rightText, leftIcon, rightIcon, onSwitchToggle, switchActive, surface, "aria-label": ariaLabel, }) {
+export default function Switch({ leftText, rightText, leftIcon, rightIcon, onSwitchToggle, switchActive, size = "sm", surface, "aria-label": ariaLabel, }) {
     const options = [
         { value: "left", label: leftText, icon: leftIcon },
         { value: "right", label: rightText, icon: rightIcon },
     ];
     // Unlabelled segments have nothing to size to, so the 12.5rem floor only overflowed its cell.
     const hasLabels = Boolean(leftText || rightText);
-    return (_jsx(Box, { w: "fit-content", maxW: "100%", minW: hasLabels ? "12.5rem" : undefined, children: _jsx(SegmentedControl, { options: options, value: switchActive, onChange: onSwitchToggle, variant: "brandSlide", surface: surface, isFullWidth: true, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : `${leftText} or ${rightText}` }) }));
+    return (_jsx(Box, { w: "fit-content", maxW: "100%", minW: hasLabels ? "12.5rem" : undefined, children: _jsx(SegmentedControl, { options: options, value: switchActive, onChange: onSwitchToggle, size: size, variant: "brandSlide", surface: surface, isFullWidth: true, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : `${leftText} or ${rightText}` }) }));
 }

package/dist/esm/Components/Toggle/TableToggle.js

@@ -2,13 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, IconButton } from "@chakra-ui/react";
 import { Columns3, Table2 } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-import { AA_NON_TEXT, liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
 import { resolveFilledSurface } from "../../Theme/tokens/builders/filledSurface.js";
 import ToolTip from "../ToolTip/ToolTip.js";
 import { useSlidingPill } from "../SegmentedControl/useSlidingPill.js";
 import { BUTTON_SIZES } from "../../Theme/tokens/primitives/controlSizes.js";
 import { BORDER_WIDTHS } from "../../Theme/tokens/primitives/borderWidths.js";
 import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { tableToggleInk } from "./tableToggleInk.js";
 const MODES = ["grid", "list"];
 const TRACK_HEIGHT = BUTTON_SIZES.sm.height;
 const SEGMENT_HEIGHT = `calc(${TRACK_HEIGHT} - 0.25rem)`;
@@ -22,15 +22,14 @@ const TableToggle = ({ value, onChange, variant = "default" }) => {
     const isUnderlineSlide = variant === "underlineSlide";
     const hasIndicator = isBrandSlide || isUnderlineSlide;
     const brandFill = resolveFilledSurface(colors.primary, colors);
-    const restInk = liftToContrast(colors.background[800], colors.background[600], AA_NON_TEXT);
-    const hoverInk = liftToContrast(colors.background[900], colors.background[400], AA_NON_TEXT);
+    const { track, hover, restInk, hoverInk } = tableToggleInk(colors);
     const selectedIndex = MODES.indexOf(value);
     const { trackRef, itemRefs: refs, pill } = useSlidingPill(hasIndicator, selectedIndex, []);
     const styles = {
         container: {
             display: "flex",
             alignItems: "center",
-            bg: isBrandSlide ? colors.primary.opacity[8] : isUnderlineSlide ? "transparent" : colors.background[600],
+            bg: isBrandSlide ? colors.primary.opacity[8] : isUnderlineSlide ? "transparent" : track,
             p: isUnderlineSlide ? "0" : "0.125rem",
             borderRadius: isUnderlineSlide ? "none" : "lg",
             borderBottom: isUnderlineSlide ? `${BORDER_WIDTHS.hairline} solid ${colors.boxborder[200]}` : undefined,
@@ -65,7 +64,7 @@ const TableToggle = ({ value, onChange, variant = "default" }) => {
                     ? "transparent"
                     : value === mode
                         ? colors.backgroundColor.light
-                        : colors.background[400],
+                        : hover,
                 color: isBrandSlide
                     ? value === mode
                         ? brandFill.color

package/dist/esm/Components/Toggle/tableToggleInk.js

@@ -0,0 +1,24 @@
+import { AA_NON_TEXT, liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
+import { segmentedTrackStep } from "../SegmentedControl/segmentedInk.js";
+// NOTE: each rung keeps its offset from the track, so Zinc's [400] track matches the others' [600].
+const RUNGS = {
+    600: { hover: 400, rest: 800, hoverInk: 900 },
+    500: { hover: 300, rest: 700, hoverInk: 800 },
+    400: { hover: 200, rest: 600, hoverInk: 700 },
+    300: { hover: 100, rest: 500, hoverInk: 600 },
+    200: { hover: 50, rest: 400, hoverInk: 500 },
+    100: { hover: 50, rest: 300, hoverInk: 400 },
+    50: { hover: 50, rest: 200, hoverInk: 300 },
+};
+export const tableToggleInk = (colors) => {
+    const step = segmentedTrackStep(colors);
+    const rungs = RUNGS[step];
+    const track = colors.background[step];
+    const hover = colors.background[rungs.hover];
+    return {
+        track,
+        hover,
+        restInk: liftToContrast(colors.background[rungs.rest], track, AA_NON_TEXT),
+        hoverInk: liftToContrast(colors.background[rungs.hoverInk], hover, AA_NON_TEXT),
+    };
+};

package/dist/esm/index.js

@@ -210,6 +210,7 @@ export { default as NotificationPanel } from "./Components/NotificationBell/Noti
 export { default as NotificationList } from "./Components/NotificationBell/NotificationList.js";
 export { default as NotificationItem } from "./Components/NotificationBell/NotificationItem.js";
 export { sectionizeByDay, groupConsecutive, formatCount, formatRelativeTime, useAnchoredPanelHeight, } from "./Components/NotificationBell/notificationHelpers.js";
+export { NotificationCenterProvider, useNotificationCenter, isNotificationActionError, notificationActionError, toNotificationActionError, DEFAULT_NOTIFICATION_LOCALE, defaultNotificationLabels, NotificationRow, NotificationDetail, NotificationCenter, NotificationInbox, NotificationPreferences, } from "./Components/NotificationCenter/index.js";
 export { lazyWithRetry, installPreloadErrorReload, isChunkLoadError, clearChunkReloadGuard, } from "./Utils/lazyWithRetry.js";
 export { humanize, createEnumLabelResolver } from "./Utils/humanize.js";
 export { EMAIL_REGEX, validateEmail, validatePassword, validateRequired, validatePositiveNumber, validateFileType, validateFileSize, validateFile, validateVideoFileType, validateVideoFile, validateYoutubeUrl, defaultValidationMessages, } from "./Utils/validation.js";

package/dist/index.d.ts

@@ -285,6 +285,14 @@ export { default as NotificationList } from "./Components/NotificationBell/Notif
 export { default as NotificationItem } from "./Components/NotificationBell/NotificationItem";
 export { sectionizeByDay, groupConsecutive, formatCount, formatRelativeTime, useAnchoredPanelHeight, } from "./Components/NotificationBell/notificationHelpers";
 export type { RelativeTimeLabels, RelativeTimeOptions } from "./Components/NotificationBell/notificationHelpers";
+export { NotificationCenterProvider, useNotificationCenter, isNotificationActionError, notificationActionError, toNotificationActionError, DEFAULT_NOTIFICATION_LOCALE, defaultNotificationLabels, NotificationRow, NotificationDetail, NotificationCenter, NotificationInbox, NotificationPreferences, } from "./Components/NotificationCenter";
+export type { NotificationTitlePart, NotificationActor, NotificationActionIntent, NotificationAction, NotificationEntry, NotificationNeedsYouRule, NotificationCategory, NotificationCategories, NotificationCounts, NotificationActionErrorKind, NotificationActionError, NotificationZoneKey, NotificationMarkAllScope, NotificationExtraAction, NotificationLoadStatus, NotificationLabels, NotificationOpenEvent, NotificationSourceProps, NotificationCenterProviderProps, NotificationSourceOmitted, NotificationSourceBinding, } from "./Components/NotificationCenter/core/NotificationSourceProps";
+export type { NotificationRowStatus, NotificationDecision, NotificationReasonRequest, NotificationLiveState, LiveNotificationEntry, NotificationZoneLists, NotificationFeatures, NotificationThread, NotificationGroup, NotificationDayBucket, NotificationFormatter, NotificationCenterActions, NotificationCenterValue, } from "./Components/NotificationCenter/core/NotificationEngineProps";
+export type { NotificationRowVariant, NotificationRowOpenEvent, NotificationRowProps, } from "./Components/NotificationCenter/row/NotificationRowProps";
+export type { NotificationDetailVariant, NotificationDetailProps, } from "./Components/NotificationCenter/row/NotificationDetailProps";
+export type { NotificationCenterLabels, NotificationCenterVariant, NotificationCenterTab, NotificationCenterProps, } from "./Components/NotificationCenter/center/NotificationCenterProps";
+export type { NotificationInboxLabels, NotificationInboxTab, NotificationInboxVariant, NotificationInboxProps, } from "./Components/NotificationCenter/inbox/NotificationInboxProps";
+export type { NotificationPreferenceChannel, NotificationPreferenceRow, NotificationPreferenceGroup, NotificationPreferenceValues, NotificationEmailSummary, NotificationPreferencesStatus, NotificationPreferencesLabels, NotificationPreferencesProps, } from "./Components/NotificationCenter/preferences/NotificationPreferencesProps";
 export { lazyWithRetry, installPreloadErrorReload, isChunkLoadError, clearChunkReloadGuard, } from "./Utils/lazyWithRetry";
 export { humanize, createEnumLabelResolver } from "./Utils/humanize";
 export type { EnumLabelResolver } from "./Utils/humanize";

package/dist/index.js

@@ -46,9 +46,9 @@ exports.setRef = exports.mergeRefs = exports.resolveStatusTone = exports.resolve
 exports.isDayStateKey = exports.CALENDAR_DAY_CLASS = exports.DAY_STATE_KEYS = exports.contrastRatio = exports.relativeLuminance = exports.mix = exports.withLightness = exports.hslToHex = exports.hexToHsl = exports.hslToRgb = exports.rgbToHsl = exports.rgbToHex = exports.compositeOver = exports.hexToRgba = exports.hexToRgb = exports.optionRowCursorSx = exports.optionRowFill = exports.optionRowDescriptionInk = exports.optionRowWeight = exports.optionRowInk = exports.resolveFilledSurface = exports.labelOnFill = exports.darkerFillRung = exports.solidFillRung = exports.DARK_CANVAS_LUMINANCE = exports.AA_NORMAL_TEXT = exports.pickAccentText = exports.accentTextOnPlanes = exports.accentTextOnCanvas = exports.onGradient = exports.onFilled = exports.isDarkCanvas = exports.STATUS_INK = exports.ACCENT_GRADIENT = exports.chipBorder = exports.chipFill = exports.inkSafeGradient = exports.statusGradient = exports.useChartTheme = exports.labelOnSeries = exports.getDefaultSeriesColors = exports.getCategoricalSeriesColors = exports.chartMode = exports.chartInk = exports.chartAxisLabelColor = exports.CATEGORICAL_SERIES = exports.useDebouncedValue = exports.useDebouncedCallback = exports.toWords = exports.rafThrottle = void 0;
 exports.raisedRule = exports.buildSurfaceRaised = exports.tooltipSurface = exports.SCRIM_OPACITY = exports.overlayScrim = exports.resolveSoftTone = exports.toneInk = exports.toneScale = exports.toneToSemantic = exports.toneToColorScheme = exports.isTone = exports.TONES = exports.shadowsFor = exports.TEXT_STYLES = exports.NUMERIC_TEXT = exports.DISABLED_OPACITY = exports.BORDER_WIDTHS = exports.RADIUS_ROLE = exports.motionTransition = exports.transitionFor = exports.MOTION_PRESS_SCALE = exports.MOTION_LOOP_MS = exports.MOTION_BEZIER = exports.MOTION_EASE_IN = exports.MOTION_EASE_OUT = exports.MOTION_EASE = exports.MOTION_MS = exports.isControlSize = exports.DEFAULT_CONTROL_SIZE = exports.CONTROL_SIZE_NAMES = exports.CONTROL_SIZES = exports.inkSafeGradientToken = exports.gradientCss = exports.resolveGradient = exports.fieldSurfaces = exports.placeholderInkOn = exports.placeholderInk = exports.SCROLLBAR_WIDTH = exports.globalScrollbarStyles = exports.scrollbarStyles = exports.useAppSwitcherShortcut = exports.resolveSuiteApps = exports.PIXELIZE_SUITE = exports.buildSuiteApps = exports.formatShortcut = exports.matchesShortcut = exports.filterApps = exports.appInitials = exports.describeDayStates = exports.resolveDayStateVisual = void 0;
 exports.FilteredEmptyState = exports.ConfirmDialog = exports.TabPanel = exports.TabPanels = exports.Tab = exports.TabList = exports.Tabs = exports.Accordian = exports.AudioRecorder = exports.CalendarGrid = exports.SectionRail = exports.BulkSelectionBar = exports.SaveBar = exports.FeedbackForm = exports.PersonChip = exports.initialsFor = exports.avatarScaleKeyFor = exports.resolveAvatarColorway = exports.AvatarGroup = exports.Avatar = exports.SettingsSection = exports.SettingRow = exports.FilterBar = exports.DescriptionList = exports.Spinner = exports.Backdrop = exports.QueryStateBoundary = exports.ErrorState = exports.FormDrawer = exports.CircularProgress = exports.StatusTag = exports.StatCard = exports.PageHeader = exports.fieldMessageStyles = exports.fieldLabelStyles = exports.controlSizeStyles = exports.fieldControlStyles = exports.FieldMessage = exports.useFieldIds = exports.MOTION_KEEP_CLASS = exports.REDUCED_MOTION_QUERY = exports.reducedMotionSx = exports.usePrefersReducedMotion = exports.OVERLAY_BLUR = exports.overlayScrimStyles = exports.ruleOn = exports.cardRule = exports.recessOn = exports.bandOn = exports.RAISED_OVERLAY = void 0;
-exports.MIN_ZOOM = exports.resolveMediaUrl = exports.fileKind = exports.countMedia = exports.planPreview = exports.buildFileItems = exports.buildMediaItems = exports.MediaStatusPanel = exports.MediaScrubber = exports.defaultMediaAudioPlayerLabels = exports.MediaAudioPlayer = exports.defaultMediaViewerLabels = exports.defaultMediaDocumentStageLabels = exports.MediaDocumentStage = exports.defaultMediaVideoPlayerLabels = exports.MediaVideoPlayer = exports.defaultMediaImageViewerLabels = exports.MediaImageViewer = exports.useFileViewer = exports.MediaViewer = exports.RangeSlider = exports.getApiErrorStatus = exports.getApiErrorMessage = exports.defaultValidationMessages = exports.validateYoutubeUrl = exports.validateVideoFile = exports.validateVideoFileType = exports.validateFile = exports.validateFileSize = exports.validateFileType = exports.validatePositiveNumber = exports.validateRequired = exports.validatePassword = exports.validateEmail = exports.EMAIL_REGEX = exports.createEnumLabelResolver = exports.humanize = exports.clearChunkReloadGuard = exports.isChunkLoadError = exports.installPreloadErrorReload = exports.lazyWithRetry = exports.useAnchoredPanelHeight = exports.formatRelativeTime = exports.formatCount = exports.groupConsecutive = exports.sectionizeByDay = exports.NotificationItem = exports.NotificationList = exports.NotificationPanel = exports.NotificationBell = void 0;
-exports.KbdShortcut = exports.Kbd = exports.QuickAddSheet = exports.ProductCardSkeleton = exports.ProductCardGrid = exports.unitPrice = exports.discountAmount = exports.discountPercent = exports.formatPrice = exports.firstAvailableSelection = exports.priceRange = exports.remainingStock = exports.isOptionAvailable = exports.findVariant = exports.selectionComplete = exports.stockState = exports.LOW_STOCK_THRESHOLD = exports.defaultMediaLightboxLabels = exports.defaultMediaGalleryLabels = exports.MediaLightbox = exports.MediaGallery = exports.PaymentOptionGroup = exports.PaymentOption = exports.AddressCardGroup = exports.AddressCard = exports.DetailSections = exports.ReviewList = exports.ReviewSummary = exports.SpecTable = exports.OffersList = exports.TrustBadges = exports.PincodeChecker = exports.StickyBuyBar = exports.BagBar = exports.OrderStatusTimeline = exports.CouponField = exports.OrderSummary = exports.CartItem = exports.QuantityStepper = exports.VariantSelector = exports.OptionChip = exports.WishlistToggle = exports.ProductBadges = exports.StockStatus = exports.PriceBlock = exports.Rating = exports.SEEK_STEP_SECONDS = exports.PLAYBACK_SPEEDS = exports.ZOOM_STEP = exports.MAX_ZOOM = void 0;
-exports.TagInput = exports.TimePicker = exports.DEFAULT_DATE_FALLBACK = exports.formatDateRange = exports.formatDateTime = exports.formatDate = exports.SkipLink = exports.VisuallyHidden = exports.FormField = exports.IconButton = exports.ChoiceCardGroup = exports.ChoiceCard = exports.defaultPaginationLabels = exports.Pagination = exports.toCsv = exports.safeFileName = exports.downloadBlob = exports.unknownTokens = exports.serializeChips = exports.fieldToken = exports.extractTokens = exports.chipify = exports.chipHtml = exports.firstInvalidStep = exports.wizardTransition = exports.Wizard = exports.WizardDialog = exports.LauncherSearchEngine = exports.highlightSegments = exports.flattenScreens = exports.searchLauncherSections = exports.searchLauncher = exports.NewTabLink = exports.PinToggle = exports.NavLauncher = exports.LauncherTrigger = void 0;
+exports.defaultMediaDocumentStageLabels = exports.MediaDocumentStage = exports.defaultMediaVideoPlayerLabels = exports.MediaVideoPlayer = exports.defaultMediaImageViewerLabels = exports.MediaImageViewer = exports.useFileViewer = exports.MediaViewer = exports.RangeSlider = exports.getApiErrorStatus = exports.getApiErrorMessage = exports.defaultValidationMessages = exports.validateYoutubeUrl = exports.validateVideoFile = exports.validateVideoFileType = exports.validateFile = exports.validateFileSize = exports.validateFileType = exports.validatePositiveNumber = exports.validateRequired = exports.validatePassword = exports.validateEmail = exports.EMAIL_REGEX = exports.createEnumLabelResolver = exports.humanize = exports.clearChunkReloadGuard = exports.isChunkLoadError = exports.installPreloadErrorReload = exports.lazyWithRetry = exports.NotificationPreferences = exports.NotificationInbox = exports.NotificationCenter = exports.NotificationDetail = exports.NotificationRow = exports.defaultNotificationLabels = exports.DEFAULT_NOTIFICATION_LOCALE = exports.toNotificationActionError = exports.notificationActionError = exports.isNotificationActionError = exports.useNotificationCenter = exports.NotificationCenterProvider = exports.useAnchoredPanelHeight = exports.formatRelativeTime = exports.formatCount = exports.groupConsecutive = exports.sectionizeByDay = exports.NotificationItem = exports.NotificationList = exports.NotificationPanel = exports.NotificationBell = void 0;
+exports.isOptionAvailable = exports.findVariant = exports.selectionComplete = exports.stockState = exports.LOW_STOCK_THRESHOLD = exports.defaultMediaLightboxLabels = exports.defaultMediaGalleryLabels = exports.MediaLightbox = exports.MediaGallery = exports.PaymentOptionGroup = exports.PaymentOption = exports.AddressCardGroup = exports.AddressCard = exports.DetailSections = exports.ReviewList = exports.ReviewSummary = exports.SpecTable = exports.OffersList = exports.TrustBadges = exports.PincodeChecker = exports.StickyBuyBar = exports.BagBar = exports.OrderStatusTimeline = exports.CouponField = exports.OrderSummary = exports.CartItem = exports.QuantityStepper = exports.VariantSelector = exports.OptionChip = exports.WishlistToggle = exports.ProductBadges = exports.StockStatus = exports.PriceBlock = exports.Rating = exports.SEEK_STEP_SECONDS = exports.PLAYBACK_SPEEDS = exports.ZOOM_STEP = exports.MAX_ZOOM = exports.MIN_ZOOM = exports.resolveMediaUrl = exports.fileKind = exports.countMedia = exports.planPreview = exports.buildFileItems = exports.buildMediaItems = exports.MediaStatusPanel = exports.MediaScrubber = exports.defaultMediaAudioPlayerLabels = exports.MediaAudioPlayer = exports.defaultMediaViewerLabels = void 0;
+exports.TagInput = exports.TimePicker = exports.DEFAULT_DATE_FALLBACK = exports.formatDateRange = exports.formatDateTime = exports.formatDate = exports.SkipLink = exports.VisuallyHidden = exports.FormField = exports.IconButton = exports.ChoiceCardGroup = exports.ChoiceCard = exports.defaultPaginationLabels = exports.Pagination = exports.toCsv = exports.safeFileName = exports.downloadBlob = exports.unknownTokens = exports.serializeChips = exports.fieldToken = exports.extractTokens = exports.chipify = exports.chipHtml = exports.firstInvalidStep = exports.wizardTransition = exports.Wizard = exports.WizardDialog = exports.LauncherSearchEngine = exports.highlightSegments = exports.flattenScreens = exports.searchLauncherSections = exports.searchLauncher = exports.NewTabLink = exports.PinToggle = exports.NavLauncher = exports.LauncherTrigger = exports.KbdShortcut = exports.Kbd = exports.QuickAddSheet = exports.ProductCardSkeleton = exports.ProductCardGrid = exports.unitPrice = exports.discountAmount = exports.discountPercent = exports.formatPrice = exports.firstAvailableSelection = exports.priceRange = exports.remainingStock = void 0;
 const Accordion_1 = __importDefault(require("./Components/Accordion/Accordion"));
 exports.Accordion = Accordion_1.default;
 const AlertDialog_1 = __importDefault(require("./Components/AlertDialog/AlertDialog"));
@@ -558,6 +558,19 @@ Object.defineProperty(exports, "groupConsecutive", { enumerable: true, get: func
 Object.defineProperty(exports, "formatCount", { enumerable: true, get: function () { return notificationHelpers_1.formatCount; } });
 Object.defineProperty(exports, "formatRelativeTime", { enumerable: true, get: function () { return notificationHelpers_1.formatRelativeTime; } });
 Object.defineProperty(exports, "useAnchoredPanelHeight", { enumerable: true, get: function () { return notificationHelpers_1.useAnchoredPanelHeight; } });
+var NotificationCenter_1 = require("./Components/NotificationCenter");
+Object.defineProperty(exports, "NotificationCenterProvider", { enumerable: true, get: function () { return NotificationCenter_1.NotificationCenterProvider; } });
+Object.defineProperty(exports, "useNotificationCenter", { enumerable: true, get: function () { return NotificationCenter_1.useNotificationCenter; } });
+Object.defineProperty(exports, "isNotificationActionError", { enumerable: true, get: function () { return NotificationCenter_1.isNotificationActionError; } });
+Object.defineProperty(exports, "notificationActionError", { enumerable: true, get: function () { return NotificationCenter_1.notificationActionError; } });
+Object.defineProperty(exports, "toNotificationActionError", { enumerable: true, get: function () { return NotificationCenter_1.toNotificationActionError; } });
+Object.defineProperty(exports, "DEFAULT_NOTIFICATION_LOCALE", { enumerable: true, get: function () { return NotificationCenter_1.DEFAULT_NOTIFICATION_LOCALE; } });
+Object.defineProperty(exports, "defaultNotificationLabels", { enumerable: true, get: function () { return NotificationCenter_1.defaultNotificationLabels; } });
+Object.defineProperty(exports, "NotificationRow", { enumerable: true, get: function () { return NotificationCenter_1.NotificationRow; } });
+Object.defineProperty(exports, "NotificationDetail", { enumerable: true, get: function () { return NotificationCenter_1.NotificationDetail; } });
+Object.defineProperty(exports, "NotificationCenter", { enumerable: true, get: function () { return NotificationCenter_1.NotificationCenter; } });
+Object.defineProperty(exports, "NotificationInbox", { enumerable: true, get: function () { return NotificationCenter_1.NotificationInbox; } });
+Object.defineProperty(exports, "NotificationPreferences", { enumerable: true, get: function () { return NotificationCenter_1.NotificationPreferences; } });
 var lazyWithRetry_1 = require("./Utils/lazyWithRetry");
 Object.defineProperty(exports, "lazyWithRetry", { enumerable: true, get: function () { return lazyWithRetry_1.lazyWithRetry; } });
 Object.defineProperty(exports, "installPreloadErrorReload", { enumerable: true, get: function () { return lazyWithRetry_1.installPreloadErrorReload; } });

package/package.json

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