pixelize-design-library 2.4.2-beta.60 → 2.4.2-beta.62

package/dist/Components/NavLauncher/launcherParts.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useRowHover = exports.stretchedLink = exports.useRowFocus = exports.titleInset = exports.activeRowSurface = exports.activeRowStyle = exports.ROW_CONTAINER = exports.WIDE_ROW = exports.isPlainClick = exports.ITEM_SELECTOR = void 0;
+exports.useRowHover = exports.stretchedLink = exports.useRowFocus = exports.titleInset = exports.activeRowSurface = exports.activeRowStyle = exports.ROW_CONTAINER = exports.WIDE_ROW = exports.isPlainClick = exports.useTouchDensity = exports.TouchDensity = exports.ITEM_SELECTOR = void 0;
 exports.CountBadge = CountBadge;
 exports.NewTag = NewTag;
 exports.SectionHeader = SectionHeader;
@@ -33,6 +33,10 @@ const NewTabLink_1 = __importDefault(require("./NewTabLink"));
 const PinToggle_1 = __importDefault(require("./PinToggle"));
 const revealStyles_1 = require("./revealStyles");
 exports.ITEM_SELECTOR = "[data-launcher-item]";
+const TouchDensityContext = (0, react_2.createContext)(false);
+exports.TouchDensity = TouchDensityContext.Provider;
+const useTouchDensity = () => (0, react_2.useContext)(TouchDensityContext);
+exports.useTouchDensity = useTouchDensity;
 const isPlainClick = (event) => event.button === 0 &&
     !event.metaKey &&
     !event.ctrlKey &&
@@ -138,6 +142,7 @@ function Highlight({ text, query }) {
 }
 function RowActions({ children }) {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const isTouch = (0, exports.useTouchDensity)();
     const revealed = REVEALED.replace(/ &/g, " > &");
     return ((0, jsx_runtime_1.jsx)(react_1.Flex, { sx: {
             [NARROW_ROW]: {
@@ -146,7 +151,7 @@ function RowActions({ children }) {
                     borderRadius: "6px",
                 },
             },
-        }, position: "absolute", top: "7px", right: "4px", h: "19px", align: "center", gap: "2px", zIndex: 1, children: children }));
+        }, position: "absolute", top: isTouch ? "12px" : "7px", right: "4px", h: "19px", align: "center", gap: "2px", zIndex: 1, children: children }));
 }
 function RowTip({ text }) {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
@@ -157,19 +162,21 @@ function ModuleRow({ module, keyScreens, isPinned, onTogglePin, pinId, labels, l
     const hover = (0, exports.useRowHover)();
     const focus = (0, exports.useRowFocus)();
     const ring = (0, focusRing_styles_1.focusVisibleStyles)(colors);
+    const isTouch = (0, exports.useTouchDensity)();
     const base = typeof module.badge === "number" || module.badge ? 24 : 0;
     const open = base + (onTogglePin ? 46 : 24);
-    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { "data-group": true, "data-nav-cell": true, position: "relative", align: "flex-start", gap: "10px", minH: "34px", pl: "8px", pr: "4px", pt: "7px", pb: "5px", borderRadius: "8px", transition: (0, motion_1.transitionFor)(["background-color"]), _hover: hover._hover, _focusWithin: hover._focusWithin, sx: { ...focus.sx, ...exports.ROW_CONTAINER }, children: [(0, jsx_runtime_1.jsx)(RowIcon, { icon: module.icon, size: 16, mt: "2px" }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", flex: 1, minW: 0, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "6px", h: "19px", minW: 0, sx: (0, exports.titleInset)(base, open), children: [(0, jsx_runtime_1.jsx)(OverflowToolTip_1.default, { label: module.label, placement: "top-start", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: link.linkAs, href: module.href, "data-launcher-item": true, ...focus.primary, "data-pin-id": onTogglePin ? pinId : undefined, onClick: link.onPlainClick, minW: 0, fontSize: "13.5px", fontWeight: 500, color: colors.text[900], noOfLines: 1, borderRadius: "sm", sx: (0, exports.stretchedLink)("8px"), children: module.label }) }), module.isNew ? (0, jsx_runtime_1.jsx)(NewTag, { label: labels.newBadge }) : null] }), keyScreens.length ? ((0, jsx_runtime_1.jsx)(OverflowToolTip_1.default, { label: keyScreens.map((screen) => screen.label).join(" · "), placement: "bottom-start", children: (0, jsx_runtime_1.jsx)(react_1.Box, { role: "group", "aria-label": `${module.label} ${labels.screens}`, position: "relative", zIndex: 1, w: "fit-content", maxW: "100%", fontSize: "11.5px", lineHeight: "15px", color: colors.textMuted, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", children: keyScreens.map((screen, i) => ((0, jsx_runtime_1.jsxs)(react_2.Fragment, { children: [i > 0 ? ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", "aria-hidden": true, mx: "5px", opacity: 0.7, children: "\u00B7" })) : null, (0, jsx_runtime_1.jsx)(react_1.Box, { as: link.linkAs, href: screen.href, "data-launcher-item": true, onClick: link.onPlainClick, color: "inherit", borderRadius: "sm", position: "relative", zIndex: 1, _hover: {
+    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { "data-group": true, "data-nav-cell": true, position: "relative", align: "flex-start", gap: "10px", minH: isTouch ? "44px" : "34px", pl: "8px", pr: "4px", pt: isTouch ? "12px" : "7px", pb: isTouch ? "8px" : "5px", borderRadius: "8px", transition: (0, motion_1.transitionFor)(["background-color"]), _hover: hover._hover, _focusWithin: hover._focusWithin, sx: { ...focus.sx, ...exports.ROW_CONTAINER }, children: [(0, jsx_runtime_1.jsx)(RowIcon, { icon: module.icon, size: 16, mt: "2px" }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", flex: 1, minW: 0, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "6px", h: "19px", minW: 0, sx: (0, exports.titleInset)(base, open), children: [(0, jsx_runtime_1.jsx)(OverflowToolTip_1.default, { label: module.label, placement: "top-start", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: link.linkAs, href: module.href, "data-launcher-item": true, ...focus.primary, "data-pin-id": onTogglePin ? pinId : undefined, onClick: link.onPlainClick, minW: 0, fontSize: "13.5px", fontWeight: 500, color: colors.text[900], noOfLines: 1, borderRadius: "sm", sx: (0, exports.stretchedLink)("8px"), children: module.label }) }), module.isNew ? (0, jsx_runtime_1.jsx)(NewTag, { label: labels.newBadge }) : null] }), keyScreens.length ? ((0, jsx_runtime_1.jsx)(OverflowToolTip_1.default, { label: keyScreens.map((screen) => screen.label).join(" · "), placement: "bottom-start", children: (0, jsx_runtime_1.jsx)(react_1.Box, { role: "group", "aria-label": `${module.label} ${labels.screens}`, position: "relative", zIndex: 1, w: "fit-content", maxW: "100%", fontSize: "11.5px", lineHeight: "15px", color: colors.textMuted, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", children: keyScreens.map((screen, i) => ((0, jsx_runtime_1.jsxs)(react_2.Fragment, { children: [i > 0 ? ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", "aria-hidden": true, mx: "5px", opacity: 0.7, children: "\u00B7" })) : null, (0, jsx_runtime_1.jsx)(react_1.Box, { as: link.linkAs, href: screen.href, "data-launcher-item": true, onClick: link.onPlainClick, color: "inherit", borderRadius: "sm", position: "relative", zIndex: 1, _hover: {
                                             textDecoration: "underline",
                                             textUnderlineOffset: "2px",
-                                        }, sx: ring, children: screen.label })] }, screen.id))) }) })) : null] }), (0, jsx_runtime_1.jsxs)(RowActions, { children: [(0, jsx_runtime_1.jsx)(CountBadge, { value: module.badge }), onTogglePin ? ((0, jsx_runtime_1.jsx)(PinToggle_1.default, { isPinned: isPinned, label: isPinned ? labels.unpin(module.label) : labels.pin(module.label), title: "", onToggle: onTogglePin })) : null, (0, jsx_runtime_1.jsx)(NewTabLink_1.default, { href: module.href, label: labels.openInNewTab(module.label), linkAs: link.linkAs })] }), onTogglePin ? ((0, jsx_runtime_1.jsx)(RowTip, { text: isPinned ? labels.unpinTip : labels.pinTip })) : null] }));
+                                        }, sx: ring, children: screen.label })] }, screen.id))) }) })) : null] }), (0, jsx_runtime_1.jsxs)(RowActions, { children: [(0, jsx_runtime_1.jsx)(CountBadge, { value: module.badge }), onTogglePin ? ((0, jsx_runtime_1.jsx)(PinToggle_1.default, { isPinned: isPinned, label: isPinned ? labels.unpin(module.label) : labels.pin(module.label), title: "", onToggle: onTogglePin })) : null, (0, jsx_runtime_1.jsx)(NewTabLink_1.default, { href: module.href, label: labels.openInNewTab(module.label), tip: labels.newTabTip, linkAs: link.linkAs })] }), onTogglePin ? ((0, jsx_runtime_1.jsx)(RowTip, { text: isPinned ? labels.unpinTip : labels.pinTip })) : null] }));
 }
 function RailRow({ screen, module, link, isStrong = false, trailing, pinId, }) {
     var _a;
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const hover = (0, exports.useRowHover)();
     const focus = (0, exports.useRowFocus)();
-    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { "data-group": true, position: "relative", align: "center", gap: "10px", h: "32px", pl: "8px", pr: "4px", borderRadius: "8px", transition: (0, motion_1.transitionFor)(["background-color"]), _hover: hover._hover, _focusWithin: hover._focusWithin, sx: focus.sx, children: [(0, jsx_runtime_1.jsx)(RowIcon, { icon: (_a = screen.icon) !== null && _a !== void 0 ? _a : module.icon, size: 15 }), (0, jsx_runtime_1.jsx)(OverflowToolTip_1.default, { label: screen.label, placement: "top-start", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: link.linkAs, href: screen.href, "data-launcher-item": true, ...focus.primary, "data-pin-id": pinId, onClick: link.onPlainClick, flex: 1, minW: 0, fontSize: "13px", fontWeight: isStrong ? 500 : 400, color: colors.text[900], noOfLines: 1, borderRadius: "sm", sx: (0, exports.stretchedLink)("8px"), children: screen.label }) }), (0, jsx_runtime_1.jsx)(react_1.Flex, { position: "relative", zIndex: 1, align: "center", gap: "2px", children: trailing })] }));
+    const isTouch = (0, exports.useTouchDensity)();
+    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { "data-group": true, position: "relative", align: "center", gap: "10px", h: isTouch ? "44px" : "32px", pl: "8px", pr: "4px", borderRadius: "8px", transition: (0, motion_1.transitionFor)(["background-color"]), _hover: hover._hover, _focusWithin: hover._focusWithin, sx: focus.sx, children: [(0, jsx_runtime_1.jsx)(RowIcon, { icon: (_a = screen.icon) !== null && _a !== void 0 ? _a : module.icon, size: 15 }), (0, jsx_runtime_1.jsx)(OverflowToolTip_1.default, { label: screen.label, placement: "top-start", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: link.linkAs, href: screen.href, "data-launcher-item": true, ...focus.primary, "data-pin-id": pinId, onClick: link.onPlainClick, flex: 1, minW: 0, fontSize: "13px", fontWeight: isStrong ? 500 : 400, color: colors.text[900], noOfLines: 1, borderRadius: "sm", sx: (0, exports.stretchedLink)("8px"), children: screen.label }) }), (0, jsx_runtime_1.jsx)(react_1.Flex, { position: "relative", zIndex: 1, align: "center", gap: "2px", children: trailing })] }));
 }
 function PinTextButton({ label, text, onToggle }) {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
@@ -184,13 +191,14 @@ function PinnedTile({ screen, module, link, labels, onTogglePin, }) {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const Icon = (_a = screen.icon) !== null && _a !== void 0 ? _a : module.icon;
     const focus = (0, exports.useRowFocus)(true);
-    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { "data-group": true, "data-nav-cell": true, position: "relative", align: "center", gap: "8px", h: "36px", pl: "9px", pr: "4px", borderRadius: "9px", borderWidth: "1px", borderColor: colors.boxborder[200], bg: colors.surfaceRaised, transition: (0, motion_1.transitionFor)(["border-color", "background-color"]), _hover: { borderColor: colors.gray[300] }, sx: focus.sx, children: [Icon ? ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", display: "inline-flex", flexShrink: 0, color: colors.accentText, children: (0, jsx_runtime_1.jsx)(Icon, { size: 15, strokeWidth: 1.8, "aria-hidden": true }) })) : null, (0, jsx_runtime_1.jsx)(OverflowToolTip_1.default, { label: screen.label, placement: "top-start", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: link.linkAs, href: screen.href, "data-launcher-item": true, ...focus.primary, "data-pin-id": onTogglePin ? screen.id : undefined, onClick: link.onPlainClick, flex: 1, minW: 0, fontSize: "13px", fontWeight: 500, color: colors.text[900], noOfLines: 1, borderRadius: "sm", sx: (0, exports.stretchedLink)("9px"), children: screen.label }) }), (0, jsx_runtime_1.jsx)(CountBadge, { value: screen.badge, size: "tile" }), onTogglePin ? ((0, jsx_runtime_1.jsx)(react_1.Box, { position: "relative", zIndex: 1, flexShrink: 0, w: "0", overflow: "hidden", transition: (0, motion_1.transitionFor)(["width"]), _groupHover: { w: "22px" }, _groupFocusWithin: { w: "22px" }, children: (0, jsx_runtime_1.jsx)(PinToggle_1.default, { isPinned: true, size: 12, label: labels.unpin(screen.label), title: labels.unpinTip, onToggle: onTogglePin }) })) : null] }));
+    const isTouch = (0, exports.useTouchDensity)();
+    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { "data-group": true, "data-nav-cell": true, position: "relative", align: "center", gap: "8px", h: isTouch ? "44px" : "36px", pl: "9px", pr: "4px", borderRadius: "9px", borderWidth: "1px", borderColor: colors.boxborder[200], bg: colors.surfaceRaised, transition: (0, motion_1.transitionFor)(["border-color", "background-color"]), _hover: { borderColor: colors.gray[300] }, sx: focus.sx, children: [Icon ? ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", display: "inline-flex", flexShrink: 0, color: colors.accentText, children: (0, jsx_runtime_1.jsx)(Icon, { size: 15, strokeWidth: 1.8, "aria-hidden": true }) })) : null, (0, jsx_runtime_1.jsx)(OverflowToolTip_1.default, { label: screen.label, placement: "top-start", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: link.linkAs, href: screen.href, "data-launcher-item": true, ...focus.primary, "data-pin-id": onTogglePin ? screen.id : undefined, onClick: link.onPlainClick, flex: 1, minW: 0, fontSize: "13px", fontWeight: 500, color: colors.text[900], noOfLines: 1, borderRadius: "sm", sx: (0, exports.stretchedLink)("9px"), children: screen.label }) }), (0, jsx_runtime_1.jsx)(CountBadge, { value: screen.badge, size: "tile" }), onTogglePin ? ((0, jsx_runtime_1.jsx)(react_1.Box, { position: "relative", zIndex: 1, flexShrink: 0, w: "0", overflow: "hidden", transition: (0, motion_1.transitionFor)(["width"]), _groupHover: { w: "22px" }, _groupFocusWithin: { w: "22px" }, children: (0, jsx_runtime_1.jsx)(PinToggle_1.default, { isPinned: true, size: 12, label: labels.unpin(screen.label), title: labels.unpinTip, onToggle: onTogglePin }) })) : null] }));
 }
-function AppsSection({ apps, hues, currentAppId, heading, onSelect, }) {
+function AppsSection({ apps, hues, currentAppId, heading, hideHeading = false, onSelect, }) {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const rows = (0, rowStates_1.listRowBackgrounds)(colors);
     const rowRing = (0, exports.activeRowSurface)(colors);
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { children: [(0, jsx_runtime_1.jsx)(SectionHeader, { label: heading, isRail: true, hasCount: false }), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "ul", listStyleType: "none", m: 0, p: 0, "aria-label": heading, children: apps.map((app, index) => {
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { children: [hideHeading ? null : (0, jsx_runtime_1.jsx)(SectionHeader, { label: heading, isRail: true, hasCount: false }), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "ul", listStyleType: "none", m: 0, p: 0, "aria-label": heading, children: apps.map((app, index) => {
                     var _a;
                     const isCurrent = app.id === currentAppId;
                     const interactive = !isCurrent && !app.locked;

package/dist/Components/NavLauncher/resultNavigation.d.ts

@@ -0,0 +1,3 @@
+export type ResultKey = "ArrowUp" | "ArrowDown" | "ArrowLeft" | "ArrowRight" | "Home" | "End" | "PageUp" | "PageDown";
+/** Next flat result index for a key, following the visual grid: rows by `columns` inside a group, reading order across columns. */
+export declare const moveResult: (sizes: readonly number[], columns: number, index: number, key: ResultKey, pageRows?: number) => number;

package/dist/Components/NavLauncher/resultNavigation.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.moveResult = void 0;
+const locate = (sizes, index) => {
+    let start = 0;
+    for (let group = 0; group < sizes.length; group += 1) {
+        if (index < start + sizes[group])
+            return { group, pos: index - start, start };
+        start += sizes[group];
+    }
+    return {
+        group: sizes.length - 1,
+        pos: 0,
+        start: start - sizes[sizes.length - 1],
+    };
+};
+const startOf = (sizes, group) => sizes.slice(0, group).reduce((sum, size) => sum + size, 0);
+const stepVertical = (sizes, columns, index, down, wrap) => {
+    const { group, pos, start } = locate(sizes, index);
+    const size = sizes[group];
+    const column = pos % columns;
+    if (down) {
+        if (pos + columns < size)
+            return index + columns;
+        if (Math.floor(pos / columns) < Math.floor((size - 1) / columns))
+            return start + size - 1;
+        const next = group + 1 < sizes.length ? group + 1 : wrap ? 0 : -1;
+        if (next < 0)
+            return index;
+        return startOf(sizes, next) + Math.min(column, sizes[next] - 1);
+    }
+    if (pos - columns >= 0)
+        return index - columns;
+    const prev = group > 0 ? group - 1 : wrap ? sizes.length - 1 : -1;
+    if (prev < 0)
+        return index;
+    const lastRow = Math.floor((sizes[prev] - 1) / columns);
+    return (startOf(sizes, prev) + Math.min(sizes[prev] - 1, lastRow * columns + column));
+};
+/** Next flat result index for a key, following the visual grid: rows by `columns` inside a group, reading order across columns. */
+const moveResult = (sizes, columns, index, key, pageRows = 1) => {
+    const total = sizes.reduce((sum, size) => sum + size, 0);
+    if (total === 0)
+        return 0;
+    switch (key) {
+        case "ArrowDown":
+        case "ArrowUp":
+            return stepVertical(sizes, columns, index, key === "ArrowDown", true);
+        case "ArrowRight":
+            return Math.min(total - 1, index + 1);
+        case "ArrowLeft":
+            return Math.max(0, index - 1);
+        case "Home":
+            return 0;
+        case "End":
+            return total - 1;
+        default: {
+            let next = index;
+            for (let i = 0; i < pageRows; i += 1)
+                next = stepVertical(sizes, columns, next, key === "PageDown", false);
+            return next;
+        }
+    }
+};
+exports.moveResult = moveResult;

package/dist/Components/NavLauncher/revealStyles.d.ts

@@ -1,4 +1,4 @@
 import type { SystemStyleObject } from "@chakra-ui/react";
 import type { PaletteProps } from "../../Theme/tokens/types";
-/** Shows a row affordance on row hover, row focus-within or its own keyboard focus, and always on touch. */
+/** Shows a row affordance on row hover, row focus-within or its own keyboard focus, and always on touch, where it also grows to a 32px hit area. */
 export declare const revealStyles: (colors: PaletteProps) => SystemStyleObject;

package/dist/Components/NavLauncher/revealStyles.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.revealStyles = void 0;
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const motion_1 = require("../../Theme/chakra/motion");
-/** Shows a row affordance on row hover, row focus-within or its own keyboard focus, and always on touch. */
+/** Shows a row affordance on row hover, row focus-within or its own keyboard focus, and always on touch, where it also grows to a 32px hit area. */
 const revealStyles = (colors) => {
     const ring = (0, focusRing_styles_1.focusVisibleStyles)(colors);
     return {
@@ -12,7 +12,7 @@ const revealStyles = (colors) => {
         _groupHover: { opacity: 1 },
         _groupFocusWithin: { opacity: 1 },
         "[data-reveal=true] &": { opacity: 1 },
-        "@media (hover: none)": { opacity: 1 },
+        "@media (hover: none)": { opacity: 1, minWidth: "32px", width: "32px", height: "32px" },
         ...(0, motion_1.reducedMotionSx)(),
     };
 };

package/dist/Components/NavigationBar/NavigationBar.js

@@ -12,6 +12,7 @@ const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
 const statusTone_1 = require("../../Theme/tokens/builders/statusTone");
+const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
 const PersonChip_1 = __importDefault(require("../PersonChip/PersonChip"));
 const lucide_react_1 = require("lucide-react");
 // Roomy enough to hover without aiming: the glyph is only 1.25rem.
@@ -44,7 +45,7 @@ function NavBar({ userAvathar, userName, userRole, navMenu, moreIcon, handleNavO
         px: "0.625rem",
         py: "0.5rem",
         fontWeight: 500,
-        fontSize: "13px",
+        fontSize: "xs-plus",
         color: theme.colors.text[900],
         gap: theme.space["2"],
         transition: "background 0.12s",
@@ -52,7 +53,7 @@ function NavBar({ userAvathar, userName, userRole, navMenu, moreIcon, handleNavO
         _focus: { bg: menuHoverBg },
         _active: { bg: rowBackgrounds.selectedActive },
     };
-    return ((0, jsx_runtime_1.jsx)(react_1.Box, { bg: theme.colors.backgroundColor.light, px: 4, borderBottom: "1px solid", borderColor: theme.colors.boxborder[200], children: (0, jsx_runtime_1.jsxs)(react_1.Flex, { h: 16, alignItems: "center", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", gap: 1.5, alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", onClick: () => onSideBarToggole === null || onSideBarToggole === void 0 ? void 0 : onSideBarToggole(), onMouseEnter: onSideBarPeek, onFocus: onSideBarPeek, "aria-label": sideBarToggole ? "Close navigation menu" : "Open navigation menu", "aria-expanded": !!sideBarToggole, ...iconButtonStyle, display: forceSideBarToggle ? "flex" : { base: "flex", lg: "none" }, w: SIDEBAR_TOGGLE_HIT, h: SIDEBAR_TOGGLE_HIT, children: sideBarToggole ? ((0, jsx_runtime_1.jsx)(lucide_react_1.PanelLeftClose, { size: "1.25rem" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.PanelRightClose, { size: "1.25rem" })) }), (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) && ((0, jsx_runtime_1.jsx)(react_1.Box, { ...iconButtonStyle, as: "button", type: "button", "aria-label": "Go back", display: "flex", onClick: () => { var _a; return (_a = navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) === null || _a === void 0 ? void 0 : _a.call(navigationBarText); }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.CircleArrowLeft, { size: "1.25rem", color: theme.colors.text[500] }) })), leading && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [leading, (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", "aria-hidden": "true", mx: 2, w: "1px", h: "1.625rem", bg: theme.colors.boxborder[200] })] })), (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text) && ((0, jsx_runtime_1.jsx)(react_1.Text, { color: (0, accentText_1.accentTextOnCanvas)(theme.colors.secondary, theme.colors.backgroundColor.light), fontSize: "1.25rem", fontWeight: 600, fontFamily: "open-sans, sans-serif", letterSpacing: "-0.013rem", children: navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text }))] }), (0, jsx_runtime_1.jsx)(react_1.Flex, { minW: 0, flexShrink: 1, children: (0, jsx_runtime_1.jsxs)(react_1.Stack, { direction: "row", alignItems: "center", spacing: 4, minW: 0, children: [moreIcon && ((0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: "center", minW: 0, children: moreIcon })), (0, jsx_runtime_1.jsxs)(react_1.Menu, { children: [(0, jsx_runtime_1.jsx)(react_1.MenuButton, { as: react_1.Button, rounded: "full", variant: "link", cursor: "pointer", minW: 0, flexShrink: 0, children: (0, jsx_runtime_1.jsx)(Avatar_1.default, { size: "sm", name: userName, src: userAvathar }) }), (0, jsx_runtime_1.jsx)(react_1.MenuList, { alignItems: "center", zIndex: 5, p: 0, py: "0.375rem", 
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { bg: theme.colors.backgroundColor.light, px: 4, borderBottom: "1px solid", borderColor: theme.colors.boxborder[200], children: (0, jsx_runtime_1.jsxs)(react_1.Flex, { h: 16, alignItems: "center", justifyContent: "space-between", gap: 2, children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", gap: 1.5, alignItems: "center", flex: "1 1 0%", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", onClick: () => onSideBarToggole === null || onSideBarToggole === void 0 ? void 0 : onSideBarToggole(), onMouseEnter: onSideBarPeek, onFocus: onSideBarPeek, "aria-label": sideBarToggole ? "Close navigation menu" : "Open navigation menu", "aria-expanded": !!sideBarToggole, ...iconButtonStyle, flexShrink: 0, display: forceSideBarToggle ? "flex" : { base: "flex", lg: "none" }, w: SIDEBAR_TOGGLE_HIT, h: SIDEBAR_TOGGLE_HIT, children: sideBarToggole ? ((0, jsx_runtime_1.jsx)(lucide_react_1.PanelLeftClose, { size: "1.25rem" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.PanelRightClose, { size: "1.25rem" })) }), (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) && ((0, jsx_runtime_1.jsx)(react_1.Box, { ...iconButtonStyle, as: "button", type: "button", "aria-label": "Go back", display: "flex", flexShrink: 0, onClick: () => { var _a; return (_a = navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) === null || _a === void 0 ? void 0 : _a.call(navigationBarText); }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.CircleArrowLeft, { size: "1.25rem", color: theme.colors.text[500] }) })), leading && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [leading, (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", "aria-hidden": "true", mx: 2, w: "1px", h: "1.625rem", flexShrink: 0, bg: theme.colors.boxborder[200] })] })), (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text) && ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: typeof navigationBarText.text === "string" ? navigationBarText.text : "", overflowOnly: true, placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_1.Text, { flex: "1 1 0%", w: 0, minW: 0, isTruncated: true, color: (0, accentText_1.accentTextOnCanvas)(theme.colors.secondary, theme.colors.backgroundColor.light), fontSize: "xl", fontWeight: 600, fontFamily: "open-sans, sans-serif", letterSpacing: "-0.013rem", children: navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text }) }))] }), (0, jsx_runtime_1.jsx)(react_1.Flex, { minW: 0, flexShrink: 1, children: (0, jsx_runtime_1.jsxs)(react_1.Stack, { direction: "row", alignItems: "center", spacing: 4, minW: 0, children: [moreIcon && ((0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: "center", minW: 0, sx: { "& > *": { minW: 0 } }, children: moreIcon })), (0, jsx_runtime_1.jsxs)(react_1.Menu, { children: [(0, jsx_runtime_1.jsx)(react_1.MenuButton, { as: react_1.Button, rounded: "full", variant: "link", cursor: "pointer", minW: 0, flexShrink: 0, children: (0, jsx_runtime_1.jsx)(Avatar_1.default, { size: "sm", name: userName, src: userAvathar }) }), (0, jsx_runtime_1.jsx)(react_1.MenuList, { alignItems: "center", zIndex: 5, p: 0, py: "0.375rem", 
                                         // Without a cap one long title stretches the whole dropdown; titles truncate instead.
                                         maxW: "18rem", bg: theme.colors.surfaceRaised, 
                                         // NOTE: Chakra's MenuItem inherits --menu-bg hardcoded to #fff via dead _dark — set it or items stay white.

package/dist/Components/NavigationBar/NavigationBarProps.d.ts

@@ -6,6 +6,7 @@ export type NavbarProps = {
     userName: string;
     userRole?: string;
     navMenu: MenuProps[];
+    /** Right-cluster slot before the avatar (org switcher, bell, launcher trigger). Its child may shrink; give icon buttons `flexShrink={0}`. */
     moreIcon?: ReactNode;
     handleNavOnClick: (url: string) => void;
     handleLogout: () => void;

package/dist/Components/NoteTextArea/NoteTextArea.js

@@ -9,6 +9,13 @@ const placeholderInk_1 = require("../../Theme/tokens/builders/placeholderInk");
 const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 const fieldStyles_1 = require("../Common/fieldStyles");
 const motion_1 = require("../../Theme/tokens/primitives/motion");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const onActivationKey = (activate) => (e) => {
+    if (e.key !== "Enter" && e.key !== " ")
+        return;
+    e.preventDefault();
+    activate();
+};
 const countWords = (text = "") => {
     const t = text.trim();
     if (!t)
@@ -19,6 +26,7 @@ const countWords = (text = "") => {
 const NoteTextArea = (0, react_1.forwardRef)(function NoteTextArea({ width = "100%", handleSubmit, handleCancel, value, title, file, isEditable = false, saveButtonLoading, maxFileSize = 1 * 1024 * 1024, maxFilesSizeError = "Some files are too large. Maximum allowed size is", maxNoteWordCount = 15, onChange, customPlaceholder = "Add a note...", cancelButtonHide = false, titleAriaLabel = "Note title", noteAriaLabel = customPlaceholder, }, ref) {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const noteAreaRef = (0, react_1.useRef)(null);
+    const fileInputRef = (0, react_1.useRef)(null);
     const mergedNoteRef = (0, react_2.useMergeRefs)(noteAreaRef, ref);
     const fileInputId = `note-text-area-file-${(0, react_1.useId)().replace(/:/g, "")}`;
     const [isActive, setIsActive] = (0, react_1.useState)(false);
@@ -83,6 +91,7 @@ const NoteTextArea = (0, react_1.forwardRef)(function NoteTextArea({ width = "10
             setFiles([]);
         }
     };
+    const openFilePicker = () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); };
     const handleCloseTextArea = () => {
         setIsActive(false);
         handleCancel === null || handleCancel === void 0 ? void 0 : handleCancel(!isActive);
@@ -124,15 +133,20 @@ const NoteTextArea = (0, react_1.forwardRef)(function NoteTextArea({ width = "10
     const isOverLimit = noteWordCount > maxNoteWordCount;
     const collapsedHoverBg = (0, outlineRung_1.resolveHoverTint)(theme.colors.gray[50], theme.colors.background[50]);
     const activeControlHoverBg = (0, outlineRung_1.resolveHoverTint)(theme.colors.gray[100], theme.colors.gray[50]);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { w: width, borderRadius: fieldStyles_1.FIELD_RADIUS, overflow: "hidden", border: "1px solid", borderColor: isActive ? theme.colors.primary[500] : theme.colors.boxborder[500], bg: isActive ? theme.colors.gray[50] : theme.colors.background[50], transition: (0, motion_1.transitionFor)(["border-color"]), children: [!isActive && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { px: 3, gap: 2, align: "center", cursor: "text", onClick: handleTextArea, bg: theme.colors.background[50], borderRadius: fieldStyles_1.FIELD_RADIUS, minH: "2.5rem", transition: (0, motion_1.transitionFor)(["background-color"]), _hover: { bg: collapsedHoverBg }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.SquarePen, { size: 16, color: theme.colors.textMuted }), (0, jsx_runtime_1.jsx)(react_2.Text, { color: theme.colors.textMuted, fontSize: "sm", children: customPlaceholder })] })), isActive && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { bg: theme.colors.background[50], children: [titleShow && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Input, { value: titleValue, onChange: (e) => {
+    // NOTE: drawn inset because the rounded shell clips overflow.
+    const placeholderFocusRing = {
+        outline: "2px solid transparent",
+        boxShadow: (0, focusRing_styles_1.insetFocusRingShadow)(theme.colors),
+    };
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { w: width, borderRadius: fieldStyles_1.FIELD_RADIUS, overflow: "hidden", border: "1px solid", borderColor: isActive ? theme.colors.primary[500] : theme.colors.boxborder[500], bg: isActive ? theme.colors.gray[50] : theme.colors.background[50], transition: (0, motion_1.transitionFor)(["border-color"]), children: [!isActive && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { px: 3, gap: 2, align: "center", cursor: "text", role: "button", tabIndex: 0, onClick: handleTextArea, onKeyDown: onActivationKey(handleTextArea), _focusVisible: placeholderFocusRing, bg: theme.colors.background[50], borderRadius: fieldStyles_1.FIELD_RADIUS, minH: "2.5rem", transition: (0, motion_1.transitionFor)(["background-color"]), _hover: { bg: collapsedHoverBg }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.SquarePen, { size: 16, color: theme.colors.textMuted }), (0, jsx_runtime_1.jsx)(react_2.Text, { color: theme.colors.textMuted, fontSize: "sm", children: customPlaceholder })] })), isActive && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { bg: theme.colors.background[50], children: [titleShow && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Input, { value: titleValue, onChange: (e) => {
                                             if (e.target.value.length === 0)
                                                 setTitleShow(false);
                                             setTitleValue(e.target.value);
-                                        }, placeholder: "Add a title...", "aria-label": titleAriaLabel, variant: "unstyled", px: 3, pt: 2.5, pb: 1.5, fontWeight: 600, fontSize: "0.875rem", color: theme.colors.text[700], _placeholder: {
+                                        }, placeholder: "Add a title...", "aria-label": titleAriaLabel, variant: "unstyled", px: 3, pt: 2.5, pb: 1.5, fontWeight: 600, fontSize: "sm", color: theme.colors.text[700], _placeholder: {
                                             color: (0, placeholderInk_1.placeholderInk)(theme.colors),
-                                        } }), (0, jsx_runtime_1.jsx)(react_2.Divider, { borderColor: theme.colors.gray[200] })] })), (0, jsx_runtime_1.jsx)(react_2.Box, { bg: theme.colors.background[50], minH: "76px", px: 3, pt: 2.5, position: "relative", children: (0, jsx_runtime_1.jsx)(react_2.Textarea, { ref: mergedNoteRef, value: noteValue, onChange: handleNoteChange, placeholder: customPlaceholder, "aria-label": noteAriaLabel, variant: "unstyled", resize: "none", minH: "76px", fontSize: "0.75rem", color: theme.colors.text[700], _placeholder: {
+                                        } }), (0, jsx_runtime_1.jsx)(react_2.Divider, { borderColor: theme.colors.gray[200] })] })), (0, jsx_runtime_1.jsx)(react_2.Box, { bg: theme.colors.background[50], minH: "76px", px: 3, pt: 2.5, position: "relative", children: (0, jsx_runtime_1.jsx)(react_2.Textarea, { ref: mergedNoteRef, value: noteValue, onChange: handleNoteChange, placeholder: customPlaceholder, "aria-label": noteAriaLabel, variant: "unstyled", resize: "none", minH: "76px", fontSize: "xs", color: theme.colors.text[700], _placeholder: {
                                         color: (0, placeholderInk_1.placeholderInk)(theme.colors),
-                                    }, style: { overflow: "hidden" }, p: 0 }) })] }), (0, jsx_runtime_1.jsx)(react_2.Divider, { borderColor: theme.colors.gray[200] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { px: 3, py: 2.5, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", w: "100%", gap: 3, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: "Attach files", hasArrow: true, placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "label", htmlFor: fileInputId, cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", w: "1.75rem", h: "1.75rem", borderRadius: "md", color: theme.colors.textMuted, transition: (0, motion_1.transitionFor)(["background-color"]), _hover: { bg: activeControlHoverBg }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Paperclip, { size: 16 }) }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { h: "1rem", w: "1px", bg: theme.colors.gray[200] }), !titleShow ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", onClick: () => setTitleShow(true), px: 2, py: 1, borderRadius: "md", color: theme.colors.textMuted, fontWeight: 500, fontSize: "sm", transition: (0, motion_1.transitionFor)(["background-color"]), _hover: { bg: activeControlHoverBg }, children: "+ Add a title" })) : ((0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: titleValue, hasArrow: true, isDisabled: !titleValue, children: (0, jsx_runtime_1.jsx)(react_2.Text, { color: theme.colors.textMuted, fontSize: "sm", fontWeight: 500, isTruncated: true, maxW: "180px", children: titleValue || "Title" }) }))] }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { gap: 2.5, align: "center", ml: "auto", flexShrink: 0, children: [(0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", fontWeight: 500, color: isOverLimit ? theme.colors.semanticText.error : theme.colors.textMuted, whiteSpace: "nowrap", children: [noteWordCount, "/", maxNoteWordCount] }), cancelButtonHide ? null : ((0, jsx_runtime_1.jsx)(react_2.Button, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: handleCloseTextArea, children: "Cancel" })), (0, jsx_runtime_1.jsxs)(react_2.Button, { size: "sm", variant: "solid", isLoading: !!saveButtonLoading, isDisabled: !noteValue || isSaveDisabled, onClick: () => handleSubmit(noteValue, titleValue, files), children: [saveButtonLoading ? ((0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "xs", thickness: "2px", mr: 2 })) : null, "Save"] })] })] }), (0, jsx_runtime_1.jsx)("input", { id: fileInputId, type: "file", style: { display: "none" }, onChange: (e) => {
+                                    }, style: { overflow: "hidden" }, p: 0 }) })] }), (0, jsx_runtime_1.jsx)(react_2.Divider, { borderColor: theme.colors.gray[200] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { px: 3, py: 2.5, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", w: "100%", gap: 3, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: "Attach files", hasArrow: true, placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", role: "button", tabIndex: 0, "aria-label": "Attach files", onClick: openFilePicker, onKeyDown: onActivationKey(openFilePicker), _focusVisible: (0, focusRing_styles_1.focusVisibleRing)(theme.colors), cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", w: "1.75rem", h: "1.75rem", borderRadius: "md", color: theme.colors.textMuted, transition: (0, motion_1.transitionFor)(["background-color"]), _hover: { bg: activeControlHoverBg }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Paperclip, { size: 16 }) }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { h: "1rem", w: "1px", bg: theme.colors.gray[200] }), !titleShow ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", onClick: () => setTitleShow(true), px: 2, py: 1, borderRadius: "md", color: theme.colors.textMuted, fontWeight: 500, fontSize: "sm", transition: (0, motion_1.transitionFor)(["background-color"]), _hover: { bg: activeControlHoverBg }, children: "+ Add a title" })) : ((0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: titleValue, hasArrow: true, isDisabled: !titleValue, children: (0, jsx_runtime_1.jsx)(react_2.Text, { color: theme.colors.textMuted, fontSize: "sm", fontWeight: 500, isTruncated: true, maxW: "180px", children: titleValue || "Title" }) }))] }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { gap: 2.5, align: "center", ml: "auto", flexShrink: 0, children: [(0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", fontWeight: 500, color: isOverLimit ? theme.colors.semanticText.error : theme.colors.textMuted, whiteSpace: "nowrap", children: [noteWordCount, "/", maxNoteWordCount] }), cancelButtonHide ? null : ((0, jsx_runtime_1.jsx)(react_2.Button, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: handleCloseTextArea, children: "Cancel" })), (0, jsx_runtime_1.jsxs)(react_2.Button, { size: "sm", variant: "solid", isLoading: !!saveButtonLoading, isDisabled: !noteValue || isSaveDisabled, onClick: () => handleSubmit(noteValue, titleValue, files), children: [saveButtonLoading ? ((0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "xs", thickness: "2px", mr: 2 })) : null, "Save"] })] })] }), (0, jsx_runtime_1.jsx)("input", { ref: fileInputRef, id: fileInputId, type: "file", style: { display: "none" }, onChange: (e) => {
                                     const newFiles = Array.from(e.target.files || []);
                                     const validFiles = newFiles.filter((f) => f.size <= maxFileSize);
                                     const invalidFiles = newFiles.filter((f) => f.size > maxFileSize);

package/dist/Components/NoteTextArea/NoteTextAreaProps.d.ts

@@ -1,19 +1,31 @@
 /** Plain Chakra Textarea + title + file attach, not a rich text editor — no formatting toolbar despite the "note" naming. Use Editor for HTML content. */
 export type NoteTextAreaProps = {
     width?: number | string;
+    /** Save click with note, title and files; `resetState` is never passed. */
     handleSubmit: (noteValue: string, titleValue: string, file: File[], resetState: void) => void;
+    /** Seeds the note only while isEditable is true; not a controlled value. */
     value?: string;
+    /** Seeds and reveals the title input only while isEditable is true. */
     title?: string;
+    /** Seeds the attachments only while isEditable is true. */
     file?: File[];
+    /** Edit mode: opens expanded, seeds value/title/file, and keeps them after saving. */
     isEditable?: boolean;
+    /** Fires on Cancel; its argument is always false. */
     handleCancel?: (isActive: boolean) => void;
     /** Any transition to false while isEditable is not true clears the note, title and files — including after a failed save, not just success. */
     saveButtonLoading?: boolean;
+    /** Per-file byte limit, default 1 MB; larger files are skipped with an error line. */
     maxFileSize?: number;
+    /** Error prefix; the formatted limit and a full stop are appended. */
     maxFilesSizeError?: string;
+    /** Disables Save past this many words (default 15); the counter shows note words only. */
     maxNoteWordCount?: number;
+    /** Note text after each edit; whitespace-only input is rejected and not reported. */
     onChange?: (value: string) => void;
+    /** Collapsed prompt and textarea placeholder; also the default noteAriaLabel. */
     customPlaceholder?: string;
+    /** Hides Cancel; the composer then collapses only after a save completes. */
     cancelButtonHide?: boolean;
     /** Accessible name for the title input. Defaults to `"Note title"`. */
     titleAriaLabel?: string;

package/dist/Components/Notification/Notification.js

@@ -12,6 +12,10 @@ const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const statusTone_1 = require("../../Theme/tokens/builders/statusTone");
 const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 const Avatar_1 = __importDefault(require("../Avatar/Avatar"));
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const motion_1 = require("../../Theme/chakra/motion");
+const CARD_TRANSITION = "box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease";
+const DISMISS_TRANSITION = "background-color 0.2s ease, color 0.2s ease, transform 0.2s ease";
 /** Date-driven countdown card ("due in 3 days" / "overdue by 2 hours"). For inbox-style rows use `NotificationItem`, which cannot render a future date. */
 const Notification = ({ notification, onClose, showStatus, onClick, isLoading = false, colors, }) => {
     var _a, _b, _c, _d, _e, _f, _g;
@@ -104,15 +108,25 @@ const Notification = ({ notification, onClose, showStatus, onClick, isLoading =
         return ((0, jsx_runtime_1.jsx)(react_2.Box, { bg: bgColor, border: "1px solid", borderColor: borderColor, borderRadius: "xl", p: 4, w: "100%", maxW: "400px", boxShadow: "sm", children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "start", spacing: 3, w: "100%", children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(react_2.SkeletonCircle, { size: "4" }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "14px", width: "60%" })] }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { align: "center", spacing: 3, w: "100%", children: [(0, jsx_runtime_1.jsx)(react_2.SkeletonCircle, { size: "8" }), (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "start", spacing: 1, flex: "1", children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "16px", width: "70%" }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "12px", width: "50%" })] })] }), (0, jsx_runtime_1.jsx)(react_2.Divider, { borderColor: borderColor }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { justify: "space-between", w: "100%", children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "12px", width: "40%" }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "12px", width: "30%" })] })] }) }));
     }
     // 🧩 Normal render
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { bg: bgColor, border: "1px solid", borderColor: borderColor, borderRadius: "xl", p: 4, w: "100%", maxW: "400px", boxShadow: "sm", _hover: { boxShadow: "md", transform: "translateY(-2px)" }, transition: "all 0.2s ease", position: "relative", children: [onClose && ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: "2", right: "2", cursor: "pointer", onClick: onClose, onKeyDown: (e) => {
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { bg: bgColor, border: "1px solid", borderColor: borderColor, borderRadius: "xl", p: 4, w: "100%", maxW: "400px", boxShadow: "sm", _hover: { boxShadow: "md", transform: "translateY(-2px)" }, transition: CARD_TRANSITION, sx: (0, motion_1.reducedMotionSx)(), position: "relative", children: [onClose && ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: "2", right: "2", cursor: "pointer", onClick: onClose, onKeyDown: (e) => {
                     if (e.key === "Enter" || e.key === " ") {
                         e.preventDefault();
                         onClose();
                     }
-                }, tabIndex: 0, p: 1, borderRadius: "md", _hover: {
+                }, role: "button", "aria-label": "Dismiss notification", tabIndex: 0, p: 1, borderRadius: "md", _hover: {
                     bg: closeTone.bg,
                     color: closeTone.fg,
                     transform: "scale(1.1)",
-                }, transition: "all 0.2s ease", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 16 }) })), (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "start", spacing: 3, w: "100%", children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: TimeIcon, color: dueLabelColor, boxSize: 4 }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: dueLabelColor, fontWeight: "semibold", children: timeLabel })] }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { align: "center", spacing: 3, w: "100%", children: [(0, jsx_runtime_1.jsx)(Avatar_1.default, { size: "sm", name: notification.host || notification.title, src: notification.avatarUrl || undefined }), (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "start", spacing: 0, flex: "1", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontWeight: "bold", fontSize: "md", color: titleColor, cursor: "pointer", _hover: { textColor: theme.colors.accentText }, onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(notification.id, notification.type), children: notification.title }), notification.description && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: textColor, children: notification.description }))] })] }), (0, jsx_runtime_1.jsx)(react_2.Divider, { borderColor: borderColor }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { justify: "space-between", w: "100%", children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.Calendar, color: metaColor, boxSize: 4 }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: metaColor, children: formattedStartDateTime })] }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.User, color: metaColor, boxSize: 4 }), notification.host && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: metaColor, children: notification.host }))] }), showStatus && ((0, jsx_runtime_1.jsx)(react_2.Box, { boxSize: "3", bg: getStatusColor(), borderRadius: "full" }))] })] })] }));
+                }, transition: DISMISS_TRANSITION, sx: (0, motion_1.reducedMotionSx)(), children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 16 }) })), (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "start", spacing: 3, w: "100%", children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: TimeIcon, color: dueLabelColor, boxSize: 4 }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: dueLabelColor, fontWeight: 600, children: timeLabel })] }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { align: "center", spacing: 3, w: "100%", children: [(0, jsx_runtime_1.jsx)(Avatar_1.default, { size: "sm", name: notification.host || notification.title, src: notification.avatarUrl || undefined }), (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "start", spacing: 0, flex: "1", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontWeight: 700, fontSize: "md", color: titleColor, cursor: "pointer", _hover: { textColor: theme.colors.accentText }, onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(notification.id, notification.type), ...(onClick && {
+                                            role: "button",
+                                            tabIndex: 0,
+                                            onKeyDown: (e) => {
+                                                if (e.key !== "Enter" && e.key !== " ")
+                                                    return;
+                                                e.preventDefault();
+                                                onClick(notification.id, notification.type);
+                                            },
+                                            _focusVisible: (0, focusRing_styles_1.focusVisibleRing)(theme.colors),
+                                        }), children: notification.title }), notification.description && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: textColor, children: notification.description }))] })] }), (0, jsx_runtime_1.jsx)(react_2.Divider, { borderColor: borderColor }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { justify: "space-between", w: "100%", children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.Calendar, color: metaColor, boxSize: 4 }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: metaColor, children: formattedStartDateTime })] }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.User, color: metaColor, boxSize: 4 }), notification.host && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: metaColor, children: notification.host }))] }), showStatus && ((0, jsx_runtime_1.jsx)(react_2.Box, { boxSize: "3", bg: getStatusColor(), borderRadius: "full" }))] })] })] }));
 };
 exports.default = Notification;

package/dist/Components/Notification/NotificationProps.d.ts

@@ -1,32 +1,48 @@
 /** The event/task/call record a Notification card renders; startDate/dueDate/endDate drive its countdown text. */
 export type NotificationData = {
+    /** Echoed back to onClick together with `type`. */
     id: number;
+    /** Card heading; also the avatar's initials when `host` is empty. */
     title: string;
+    /** Avatar image; initials from `host` or `title` show without it. */
     avatarUrl?: string;
+    /** Date-parsable string shown in en-US; meetings add the time, others the year. */
     startDate: string;
+    /** Countdown target, preferred over endDate; the label only recomputes when the dates change. */
     dueDate?: string;
+    /** Countdown target used only when dueDate is absent. */
     endDate?: string;
+    /** Shown in the footer and used for the avatar's initials. */
     host?: string;
     description?: string;
-    /** Accepted but never read by Notification — the status dot's color comes from date math (dueDate/endDate), not this field. */
+    /** @deprecated Never read; the status dot colour comes from dueDate/endDate date math. */
     status?: string;
+    /** Prefixes the countdown label ("Task due in 3 days") and is echoed to onClick. */
     type: "task" | "meeting" | "call";
 };
 /** Props for the `Notification` countdown card. */
 export type NotificationProps = {
     notification: NotificationData;
+    /** Shows a dismiss control (also Enter/Space); the card never hides itself. */
     onClose?: () => void;
+    /** Adds a dot coloured by urgency: overdue, under an hour, under a day, later. */
     showStatus?: boolean;
     /** Fires only when the title text is clicked — the avatar, description and card body are not clickable. */
     onClick?: (id: number, type: "task" | "meeting" | "call") => void;
+    /** Renders a skeleton card in place of the notification. */
     isLoading?: boolean;
+    /** Per-card colour overrides; raw values here do not follow dark mode. */
     colors?: NotificationColor;
 };
 /** Optional per-card palette override for Notification; any field left unset falls back to theme tokens. */
 export type NotificationColor = {
+    /** Card surface; the default title, due-label and meta inks are contrast-lifted against it. */
     bgColor?: string;
+    /** Card border and both dividers. */
     borderColor?: string;
+    /** Description text only. */
     textColor?: string;
+    /** Replaces the contrast-lifted title ink, so check AA contrast yourself. */
     titleColor?: string;
     /** warningColor/errorColor/successColor only paint the status dot, and only when showStatus is true — otherwise inert. */
     warningColor?: string;

package/dist/Components/NotificationBell/NotificationBell.js

@@ -1,9 +1,13 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const lucide_react_1 = require("lucide-react");
 const Primitives_1 = require("../Primitives/Primitives");
+const IconButton_1 = __importDefault(require("../IconButton/IconButton"));
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
 const tone_1 = require("../../Theme/tokens/builders/tone");
@@ -30,6 +34,6 @@ const NotificationBell = (0, react_1.forwardRef)(function NotificationBell({ cou
     const badgeOffset = BADGE_OFFSET[size];
     const countSurface = showCount ? (0, filledSurface_1.resolveFilledSurface)((0, tone_1.toneScale)(colors, tone), colors) : null;
     const dotFill = showFallbackDot ? (0, tone_1.toneInk)(colors, dotTone) : undefined;
-    return ((0, jsx_runtime_1.jsxs)(Primitives_1.Box, { position: "relative", display: "inline-flex", children: [(0, jsx_runtime_1.jsx)(Primitives_1.IconButton, { ref: ref, "aria-label": ariaLabel, "aria-expanded": isOpen, "aria-haspopup": "dialog", icon: (0, jsx_runtime_1.jsx)(Primitives_1.Icon, { as: icon, boxSize: `${ICON_BOX[size]}px` }), variant: "ghost", size: size, onClick: onClick }), showCount && countSurface ? ((0, jsx_runtime_1.jsx)(Primitives_1.Box, { as: "span", "data-testid": "notification-bell-count", position: "absolute", top: badgeOffset, right: badgeOffset, minW: "1.1rem", h: "1.1rem", px: "0.25rem", borderRadius: "full", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "0.625rem", fontWeight: 700, lineHeight: 1, bg: countSurface.fill, color: countSurface.color, boxShadow: `0 0 0 2px ${ring}`, children: (0, notificationHelpers_1.formatCount)(count, max) })) : null, showFallbackDot ? ((0, jsx_runtime_1.jsx)(Primitives_1.Box, { as: "span", "data-testid": "notification-bell-dot", position: "absolute", top: badgeOffset, right: badgeOffset, boxSize: "0.5rem", borderRadius: "full", bg: dotFill, boxShadow: `0 0 0 2px ${ring}` })) : null] }));
+    return ((0, jsx_runtime_1.jsxs)(Primitives_1.Box, { position: "relative", display: "inline-flex", children: [(0, jsx_runtime_1.jsx)(IconButton_1.default, { ref: ref, "aria-label": ariaLabel, "aria-expanded": isOpen, "aria-haspopup": "dialog", icon: (0, jsx_runtime_1.jsx)(Primitives_1.Icon, { as: icon, boxSize: `${ICON_BOX[size]}px` }), variant: "ghost", size: size, onClick: onClick }), showCount && countSurface ? ((0, jsx_runtime_1.jsx)(Primitives_1.Box, { as: "span", "data-testid": "notification-bell-count", position: "absolute", top: badgeOffset, right: badgeOffset, minW: "1.1rem", h: "1.1rem", px: "0.25rem", borderRadius: "full", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "0.625rem", fontWeight: 700, lineHeight: 1, bg: countSurface.fill, color: countSurface.color, boxShadow: `0 0 0 2px ${ring}`, children: (0, notificationHelpers_1.formatCount)(count, max) })) : null, showFallbackDot ? ((0, jsx_runtime_1.jsx)(Primitives_1.Box, { as: "span", "data-testid": "notification-bell-dot", position: "absolute", top: badgeOffset, right: badgeOffset, boxSize: "0.5rem", borderRadius: "full", bg: dotFill, boxShadow: `0 0 0 2px ${ring}` })) : null] }));
 });
 exports.default = NotificationBell;

package/dist/Components/NotificationBell/NotificationItem.js

@@ -28,7 +28,7 @@ const NotificationItem = ({ item, onClick, actions, actionsAlwaysVisible = false
     const rowShadow = unreadIndicator === "bar" && unread ? `inset 2px 0 0 ${ink}` : undefined;
     const hasTile = Boolean(item.icon) || Boolean(item.actor);
     // Never nested inside the row's own clickable button — a real <button> can't contain another.
-    const tileAndText = ((0, jsx_runtime_1.jsxs)(Primitives_1.Flex, { align: "flex-start", gap: 3, flex: "1", minW: 0, textAlign: "left", children: [hasTile ? ((0, jsx_runtime_1.jsxs)(Primitives_1.Box, { position: "relative", flexShrink: 0, boxSize: TILE_SIZE, children: [(0, jsx_runtime_1.jsx)(Primitives_1.Flex, { boxSize: TILE_SIZE, align: "center", justify: "center", borderRadius: "lg", bg: tile.bg, border: "1px solid", borderColor: tile.border, children: item.icon ? (0, jsx_runtime_1.jsx)(Primitives_1.Icon, { as: item.icon, boxSize: "0.875rem", color: tile.fg, "aria-hidden": true }) : null }), item.actor ? ((0, jsx_runtime_1.jsx)(Primitives_1.Box, { position: "absolute", bottom: "-2px", right: "-2px", borderRadius: "full", border: "2px solid", borderColor: colors.background[50], children: (0, jsx_runtime_1.jsx)(Avatar_1.default, { name: (_b = item.actor.name) !== null && _b !== void 0 ? _b : "?", src: (_c = item.actor.avatarUrl) !== null && _c !== void 0 ? _c : undefined, size: "2xs" }) })) : null] })) : null, (0, jsx_runtime_1.jsxs)(Primitives_1.Box, { flex: "1", minW: 0, children: [item.eyebrow ? ((0, jsx_runtime_1.jsx)(Primitives_1.Text, { fontSize: "0.6875rem", fontWeight: 600, color: colors.text[500], textTransform: "uppercase", children: item.eyebrow })) : null, (0, jsx_runtime_1.jsxs)(Primitives_1.Flex, { align: "center", gap: 1.5, children: [unreadIndicator === "dot" && unread ? (0, jsx_runtime_1.jsx)(Primitives_1.Box, { boxSize: "0.375rem", borderRadius: "full", bg: ink, flexShrink: 0 }) : null, (0, jsx_runtime_1.jsx)(Primitives_1.Text, { fontSize: "0.875rem", fontWeight: unread ? 700 : 500, color: colors.header[900], noOfLines: 2, children: item.title })] }), item.body ? ((0, jsx_runtime_1.jsx)(Primitives_1.Text, { mt: 0.5, fontSize: "0.8125rem", color: colors.text[600], noOfLines: 2, children: item.body })) : null, preview, (0, jsx_runtime_1.jsx)(Primitives_1.Text, { mt: 1, fontSize: "0.75rem", color: colors.text[500], children: (0, notificationHelpers_1.formatRelativeTime)(item.timestamp) })] })] }));
+    const tileAndText = ((0, jsx_runtime_1.jsxs)(Primitives_1.Flex, { align: "flex-start", gap: 3, flex: "1", minW: 0, textAlign: "left", children: [hasTile ? ((0, jsx_runtime_1.jsxs)(Primitives_1.Box, { position: "relative", flexShrink: 0, boxSize: TILE_SIZE, children: [(0, jsx_runtime_1.jsx)(Primitives_1.Flex, { boxSize: TILE_SIZE, align: "center", justify: "center", borderRadius: "lg", bg: tile.bg, border: "1px solid", borderColor: tile.border, children: item.icon ? (0, jsx_runtime_1.jsx)(Primitives_1.Icon, { as: item.icon, boxSize: "0.875rem", color: tile.fg, "aria-hidden": true }) : null }), item.actor ? ((0, jsx_runtime_1.jsx)(Primitives_1.Box, { position: "absolute", bottom: "-2px", right: "-2px", borderRadius: "full", border: "2px solid", borderColor: colors.background[50], children: (0, jsx_runtime_1.jsx)(Avatar_1.default, { name: (_b = item.actor.name) !== null && _b !== void 0 ? _b : "?", src: (_c = item.actor.avatarUrl) !== null && _c !== void 0 ? _c : undefined, size: "2xs" }) })) : null] })) : null, (0, jsx_runtime_1.jsxs)(Primitives_1.Box, { flex: "1", minW: 0, children: [item.eyebrow ? ((0, jsx_runtime_1.jsx)(Primitives_1.Text, { fontSize: "xs-minus", fontWeight: 600, color: colors.text[500], textTransform: "uppercase", children: item.eyebrow })) : null, (0, jsx_runtime_1.jsxs)(Primitives_1.Flex, { align: "center", gap: 1.5, children: [unreadIndicator === "dot" && unread ? (0, jsx_runtime_1.jsx)(Primitives_1.Box, { boxSize: "0.375rem", borderRadius: "full", bg: ink, flexShrink: 0 }) : null, (0, jsx_runtime_1.jsx)(Primitives_1.Text, { fontSize: "sm", fontWeight: unread ? 700 : 500, color: colors.header[900], noOfLines: 2, children: item.title })] }), item.body ? ((0, jsx_runtime_1.jsx)(Primitives_1.Text, { mt: 0.5, fontSize: "xs-plus", color: colors.text[600], noOfLines: 2, children: item.body })) : null, preview, (0, jsx_runtime_1.jsx)(Primitives_1.Text, { mt: 1, fontSize: "xs", color: colors.text[500], children: (0, notificationHelpers_1.formatRelativeTime)(item.timestamp) })] })] }));
     return ((0, jsx_runtime_1.jsxs)(Primitives_1.Flex, { role: "group", position: "relative", align: "flex-start", gap: 2, px: 3, py: 2.5, bg: rowTint, boxShadow: rowShadow, _hover: { bg: rowTint !== null && rowTint !== void 0 ? rowTint : colors.backgroundColor.secondary }, children: [(0, jsx_runtime_1.jsxs)(Primitives_1.Box, { flex: "1", minW: 0, children: [onClick ? ((0, jsx_runtime_1.jsx)(Primitives_1.Box, { as: "button", type: "button", onClick: onClick, display: "flex", w: "100%", textAlign: "left", borderRadius: "md", sx: (0, focusRing_styles_1.focusVisibleStyles)(colors), children: tileAndText })) : (tileAndText), groupCount && groupCount > 1 ? ((0, jsx_runtime_1.jsx)(Button_1.default, { label: `Show ${groupCount} updates`, variant: "link", size: "xs", colorScheme: "primary", mt: 1, pl: hasTile ? `calc(${TILE_SIZE} + 0.75rem)` : 0, onClick: onExpandGroup })) : null] }), trailing, actions ? ((0, jsx_runtime_1.jsx)(Primitives_1.Box, { opacity: actionsAlwaysVisible ? 1 : 0, _groupHover: { opacity: 1 }, _groupFocusWithin: { opacity: 1 }, flexShrink: 0, children: actions })) : null] }));
 };
 exports.default = NotificationItem;

package/dist/Components/NotificationBell/NotificationList.js

@@ -20,7 +20,7 @@ function NotificationList({ items, toItem, groupBy = "day", collapseGroups = fal
     const sections = groupBy === "day" ? (0, notificationHelpers_1.sectionizeByDay)(items, (row) => toItem(row).timestamp, dayLabels) : [{ label: "", rows: items }];
     return ((0, jsx_runtime_1.jsx)(Primitives_1.Box, { "aria-label": ariaLabel, role: ariaLabel ? "region" : undefined, children: sections.map((section, sectionIndex) => {
             const groups = (0, notificationHelpers_1.groupConsecutive)(section.rows, (row) => (collapseGroups ? toItem(row).groupKey : undefined));
-            return ((0, jsx_runtime_1.jsxs)(Primitives_1.Box, { children: [section.label ? (renderSectionHeader ? (renderSectionHeader(section.label)) : ((0, jsx_runtime_1.jsx)(Primitives_1.Text, { position: "sticky", top: 0, zIndex: 1, px: 3, py: 1.5, fontSize: "0.6875rem", fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.04em", color: colors.text[500], bg: colors.backgroundColor.main, children: section.label }))) : null, groups.map((group, groupIndex) => {
+            return ((0, jsx_runtime_1.jsxs)(Primitives_1.Box, { children: [section.label ? (renderSectionHeader ? (renderSectionHeader(section.label)) : ((0, jsx_runtime_1.jsx)(Primitives_1.Text, { position: "sticky", top: 0, zIndex: 1, px: 3, py: 1.5, fontSize: "xs-minus", fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.04em", color: colors.text[500], bg: colors.backgroundColor.main, children: section.label }))) : null, groups.map((group, groupIndex) => {
                         var _a;
                         const groupId = `${section.label}-${(_a = group.key) !== null && _a !== void 0 ? _a : `__row${groupIndex}`}`;
                         const isCollapsedRun = collapseGroups && group.rows.length > 1 && !expandedGroups.has(groupId);

package/dist/Components/OffersList/OffersList.js

@@ -6,6 +6,7 @@ const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const motion_1 = require("../../Theme/tokens/primitives/motion");
+const typography_1 = require("../../Theme/tokens/primitives/typography");
 const motion_2 = require("../../Theme/chakra/motion");
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const COPIED_MS = 1600;
@@ -77,7 +78,7 @@ const OffersList = ({ offers, bestOfferId, isOpen, defaultOpen = false, onOpenCh
                                     height: "1px",
                                     background: colors.background[200],
                                 },
-                            }, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", fontWeight: 600, color: colors.header[900], children: offer.title }), (0, jsx_runtime_1.jsx)(react_2.Text, { mt: 0.5, fontSize: "sm", lineHeight: 1.45, color: colors.textMuted, children: offer.detail })] }), code ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 1, flexShrink: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", px: 2.5, py: 1, borderRadius: "md", bg: colors.background[200], color: colors.header[900], fontSize: "xs", fontWeight: 700, letterSpacing: "0.06em", sx: { fontVariantNumeric: "tabular-nums" }, children: code }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", type: "button", align: "center", gap: 1.5, minH: "2.75rem", px: 3, borderRadius: "lg", fontSize: "sm", fontWeight: 600, color: colors.accentText, "aria-label": copied ? undefined : copy.copyCode(code), onClick: () => copyCode(offer, code), transition: (0, motion_1.transitionFor)(["background-color"]), _hover: { bg: colors.background[200] }, sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors), ...(0, motion_2.reducedMotionSx)() }, children: [copied ? (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 16, "aria-hidden": true }) : null, (0, jsx_runtime_1.jsx)("span", { children: copied ? copy.copied : copy.copy })] })] })) : null] }, offer.id));
+                            }, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", fontWeight: 600, color: colors.header[900], children: offer.title }), (0, jsx_runtime_1.jsx)(react_2.Text, { mt: 0.5, fontSize: "sm", lineHeight: 1.45, color: colors.textMuted, children: offer.detail })] }), code ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 1, flexShrink: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", px: 2.5, py: 1, borderRadius: "md", bg: colors.background[200], color: colors.header[900], fontSize: "xs", fontWeight: 700, letterSpacing: "0.06em", sx: typography_1.NUMERIC_TEXT, children: code }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", type: "button", align: "center", gap: 1.5, minH: "2.75rem", px: 3, borderRadius: "lg", fontSize: "sm", fontWeight: 600, color: colors.accentText, "aria-label": copied ? undefined : copy.copyCode(code), onClick: () => copyCode(offer, code), transition: (0, motion_1.transitionFor)(["background-color"]), _hover: { bg: colors.background[200] }, sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors), ...(0, motion_2.reducedMotionSx)() }, children: [copied ? (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 16, "aria-hidden": true }) : null, (0, jsx_runtime_1.jsx)("span", { children: copied ? copy.copied : copy.copy })] })] })) : null] }, offer.id));
                     }) }) }), (0, jsx_runtime_1.jsx)(react_2.VisuallyHidden, { "aria-live": "polite", children: message })] }));
 };
 exports.default = OffersList;

package/dist/Components/OptionChip/OptionChip.js

@@ -6,6 +6,7 @@ const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const motion_1 = require("../../Theme/tokens/primitives/motion");
+const typography_1 = require("../../Theme/tokens/primitives/typography");
 const motion_2 = require("../../Theme/chakra/motion");
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const optionInk_1 = require("./optionInk");
@@ -87,11 +88,11 @@ const OptionChip = (0, react_1.forwardRef)(function OptionChip({ label, selected
         whiteSpace: "nowrap",
         boxShadow: invalid && !selected ? errorRing(colors) : "none",
     };
-    const content = ((0, jsx_runtime_1.jsxs)(react_2.Box, { as: "span", display: "inline-flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(CheckGrow, { selected: selected }), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", sx: { fontVariantNumeric: "tabular-nums" }, children: label })] }));
+    const content = ((0, jsx_runtime_1.jsxs)(react_2.Box, { as: "span", display: "inline-flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(CheckGrow, { selected: selected }), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", sx: typography_1.NUMERIC_TEXT, children: label })] }));
     return ((0, jsx_runtime_1.jsxs)(react_2.Box, { ...base, ...surface, sx: {
             ...motion,
             "&:hover:not(:disabled):not([aria-checked=true])": unavailable ? undefined : { backgroundColor: tone.hoverFill },
             ...(unavailable ? { "&::after": { content: '""', ...strikeLayer(band("currentColor", "0.5px")) } } : {}),
-        }, children: [content, isPack && hint ? ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", mt: "0.125rem", fontSize: "0.6875rem", fontWeight: 500, color: tone.hint, sx: { fontVariantNumeric: "tabular-nums" }, children: hint })) : null, !isPack && hint ? ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", position: "absolute", top: "-0.375rem", right: "-0.25rem", px: "0.375rem", py: "0.0625rem", borderRadius: "full", bg: colors.surfaceRaised, color: colors.text[800], fontSize: "0.625rem", fontWeight: 600, lineHeight: "1rem", boxShadow: `0 0 0 1px ${colors.boxborder[200]}`, pointerEvents: "none", children: hint })) : null] }));
+        }, children: [content, isPack && hint ? ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", mt: "0.125rem", fontSize: "xs-minus", fontWeight: 500, color: tone.hint, sx: typography_1.NUMERIC_TEXT, children: hint })) : null, !isPack && hint ? ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", position: "absolute", top: "-0.375rem", right: "-0.25rem", px: "0.375rem", py: "px", borderRadius: "full", bg: colors.surfaceRaised, color: colors.text[800], fontSize: "0.625rem", fontWeight: 600, lineHeight: "1rem", boxShadow: `0 0 0 1px ${colors.boxborder[200]}`, pointerEvents: "none", children: hint })) : null] }));
 });
 exports.default = OptionChip;

package/dist/Components/OrderStatusTimeline/OrderStatusTimeline.js

@@ -5,6 +5,7 @@ const react_1 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const motion_1 = require("../../Theme/tokens/primitives/motion");
+const typography_1 = require("../../Theme/tokens/primitives/typography");
 const motion_2 = require("../../Theme/chakra/motion");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const DEFAULT_LABELS = { done: "Completed", current: "In progress", upcoming: "Upcoming" };
@@ -34,7 +35,7 @@ const Marker = ({ state, colors }) => {
 };
 const StepText = ({ step, copy, align, colors, }) => {
     const active = step.state !== "upcoming";
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { textAlign: align, minW: 0, children: [(0, jsx_runtime_1.jsxs)(react_1.Text, { as: "span", display: "block", fontSize: "sm", fontWeight: active ? 700 : 500, lineHeight: 1.4, color: active ? colors.header[900] : colors.textMuted, children: [(0, jsx_runtime_1.jsxs)(react_1.VisuallyHidden, { children: [copy[step.state], ": "] }), step.label] }), step.date && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", display: "block", fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, sx: { fontVariantNumeric: "tabular-nums" }, children: step.date })), step.detail && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", display: "block", fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, children: step.detail }))] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { textAlign: align, minW: 0, children: [(0, jsx_runtime_1.jsxs)(react_1.Text, { as: "span", display: "block", fontSize: "sm", fontWeight: active ? 700 : 500, lineHeight: 1.4, color: active ? colors.header[900] : colors.textMuted, children: [(0, jsx_runtime_1.jsxs)(react_1.VisuallyHidden, { children: [copy[step.state], ": "] }), step.label] }), step.date && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", display: "block", fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, sx: typography_1.NUMERIC_TEXT, children: step.date })), step.detail && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", display: "block", fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, children: step.detail }))] }));
 };
 /** Order tracking steps: filled check, ringed dot and hollow ring markers, each backed by spoken state text. */
 const OrderStatusTimeline = ({ steps, orientation = "vertical", labels, "aria-label": ariaLabel = "Order status", "data-testid": testId, }) => {