pixelize-design-library 2.4.2-beta.61 → 2.4.2-beta.63

package/dist/Components/MediaViewer/components/MediaScrubber.js

@@ -4,6 +4,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const focusRing_1 = require("../../../Theme/tokens/builders/focusRing");
+const typography_1 = require("../../../Theme/tokens/primitives/typography");
 const useViewerChrome_1 = require("../useViewerChrome");
 const STEP_SECONDS = 5;
 const BIG_STEP_SECONDS = 30;
@@ -84,6 +85,9 @@ const MediaScrubber = ({ value, max, buffered = [], onSeek, onPreview, ariaLabel
             setHovering(false);
             if (!dragging.current)
                 endPreview();
-        }, children: [previewLabel !== null ? ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", bottom: "100%", left: `${previewX}%`, transform: "translateX(-50%)", mb: 1, px: 2, py: 0.5, borderRadius: "4px", bg: chrome.raised, color: chrome.ink, fontSize: "xs", fontWeight: 600, whiteSpace: "nowrap", pointerEvents: "none", sx: { fontVariantNumeric: "tabular-nums" }, "data-testid": testId ? `${testId}-tooltip` : undefined, children: previewLabel })) : null, (0, jsx_runtime_1.jsxs)(react_2.Box, { ref: trackRef, role: "slider", tabIndex: disabled ? -1 : 0, "aria-label": ariaLabel, "aria-orientation": "horizontal", "aria-valuemin": 0, "aria-valuemax": disabled ? 0 : max, "aria-valuenow": disabled ? 0 : value, "aria-valuetext": disabled ? undefined : ariaValueText(value), "aria-disabled": disabled || undefined, position: "relative", h: trackH, borderRadius: "full", bg: chrome.track, transition: "height 0.12s ease-out", onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerUp, onKeyDown: onKeyDown, _focusVisible: { boxShadow: `0 0 0 2px ${ring}` }, "data-testid": testId, children: [buffered.map((range, i) => ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: 0, bottom: 0, left: `${disabled ? 0 : clamp(range.start / max, 0, 1) * 100}%`, width: `${disabled ? 0 : (clamp(range.end / max, 0, 1) - clamp(range.start / max, 0, 1)) * 100}%`, bg: chrome.hover, borderRadius: "full" }, i))), (0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: 0, bottom: 0, left: 0, width: `${fraction * 100}%`, bg: chrome.accent, borderRadius: "full" }), (0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: "50%", left: `${fraction * 100}%`, transform: "translate(-50%, -50%)", boxSize: hovering || dragging.current ? "14px" : "0px", borderRadius: "full", bg: chrome.ink, transition: "width 0.12s ease-out, height 0.12s ease-out", pointerEvents: "none" })] })] }));
+        }, children: [previewLabel !== null ? ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", bottom: "100%", style: { left: `${previewX}%` }, transform: "translateX(-50%)", mb: 1, px: 2, py: 0.5, borderRadius: "base", bg: chrome.raised, color: chrome.ink, fontSize: "xs", fontWeight: 600, whiteSpace: "nowrap", pointerEvents: "none", sx: typography_1.NUMERIC_TEXT, "data-testid": testId ? `${testId}-tooltip` : undefined, children: previewLabel })) : null, (0, jsx_runtime_1.jsxs)(react_2.Box, { ref: trackRef, role: "slider", tabIndex: disabled ? -1 : 0, "aria-label": ariaLabel, "aria-orientation": "horizontal", "aria-valuemin": 0, "aria-valuemax": disabled ? 0 : max, "aria-valuenow": disabled ? 0 : value, "aria-valuetext": disabled ? undefined : ariaValueText(value), "aria-disabled": disabled || undefined, position: "relative", h: trackH, borderRadius: "full", bg: chrome.track, transition: "height 0.12s ease-out", onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerUp, onKeyDown: onKeyDown, _focusVisible: { boxShadow: `0 0 0 2px ${ring}` }, "data-testid": testId, children: [buffered.map((range, i) => ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: 0, bottom: 0, style: {
+                            left: `${disabled ? 0 : clamp(range.start / max, 0, 1) * 100}%`,
+                            width: `${disabled ? 0 : (clamp(range.end / max, 0, 1) - clamp(range.start / max, 0, 1)) * 100}%`,
+                        }, bg: chrome.hover, borderRadius: "full" }, i))), (0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: 0, bottom: 0, left: 0, style: { width: `${fraction * 100}%` }, bg: chrome.accent, borderRadius: "full" }), (0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: "50%", style: { left: `${fraction * 100}%` }, transform: "translate(-50%, -50%)", boxSize: hovering || dragging.current ? "14px" : "0px", borderRadius: "full", bg: chrome.ink, transition: "width 0.12s ease-out, height 0.12s ease-out", pointerEvents: "none" })] })] }));
 };
 exports.default = MediaScrubber;

package/dist/Components/MediaViewer/components/MediaVideoPlayer.js

@@ -14,7 +14,7 @@ const mediaItems_1 = require("../mediaItems");
 const useAutoHideChrome_1 = require("../hooks/useAutoHideChrome");
 const motion_1 = require("../../../Theme/chakra/motion");
 const useViewerChrome_1 = require("../useViewerChrome");
-const MediaScrubber_1 = __importDefault(require("./MediaScrubber"));
+const PlaybackTimeline_1 = require("./PlaybackTimeline");
 const MediaStatusPanel_1 = __importDefault(require("./MediaStatusPanel"));
 const ViewerIconButton_1 = __importDefault(require("./ViewerIconButton"));
 const MediaVideoPlayerProps_1 = require("./MediaVideoPlayerProps");
@@ -35,7 +35,7 @@ const MediaVideoPlayer = ({ item, label, onTimeChange, onPrevious, onNext, label
     const shellRef = (0, react_1.useRef)(null);
     const videoRef = (0, react_1.useRef)(null);
     const [playing, setPlaying] = (0, react_1.useState)(false);
-    const [current, setCurrent] = (0, react_1.useState)(0);
+    const timeline = (0, PlaybackTimeline_1.usePlaybackTimeline)();
     const [duration, setDuration] = (0, react_1.useState)(0);
     const [volume, setVolume] = (0, react_1.useState)(1);
     const [muted, setMuted] = (0, react_1.useState)(false);
@@ -70,7 +70,7 @@ const MediaVideoPlayer = ({ item, label, onTimeChange, onPrevious, onNext, label
             return;
         const max = Number.isFinite(v.duration) ? v.duration : seconds;
         v.currentTime = Math.min(max, Math.max(0, seconds));
-        setCurrent(v.currentTime);
+        timeline.set(v.currentTime);
     };
     const seekBy = (delta) => { var _a, _b; return seekTo(((_b = (_a = video()) === null || _a === void 0 ? void 0 : _a.currentTime) !== null && _b !== void 0 ? _b : 0) + delta); };
     const toggleMute = () => {
@@ -179,7 +179,7 @@ const MediaVideoPlayer = ({ item, label, onTimeChange, onPrevious, onNext, label
     }, []);
     (0, react_1.useEffect)(() => {
         setPlaying(false);
-        setCurrent(0);
+        timeline.set(0);
         setDuration(0);
         setRate(1);
         setHasCaptions(false);
@@ -189,7 +189,7 @@ const MediaVideoPlayer = ({ item, label, onTimeChange, onPrevious, onNext, label
         setBuffered([]);
         if (videoRef.current)
             videoRef.current.playbackRate = 1;
-    }, [item.key]);
+    }, [item.key, timeline]);
     (0, react_1.useEffect)(() => {
         if (!ripple)
             return undefined;
@@ -235,7 +235,7 @@ const MediaVideoPlayer = ({ item, label, onTimeChange, onPrevious, onNext, label
                         const ranges = e.currentTarget.buffered;
                         setBuffered(Array.from({ length: ranges.length }, (_, i) => ({ start: ranges.start(i), end: ranges.end(i) })));
                     }, onTimeUpdate: (e) => {
-                        setCurrent(e.currentTarget.currentTime);
+                        timeline.set(e.currentTarget.currentTime);
                         onTimeChange === null || onTimeChange === void 0 ? void 0 : onTimeChange(e.currentTarget.currentTime);
                     }, onLoadedMetadata: (e) => {
                         setDuration(e.currentTarget.duration);
@@ -243,6 +243,6 @@ const MediaVideoPlayer = ({ item, label, onTimeChange, onPrevious, onNext, label
                     }, onDurationChange: (e) => setDuration(e.currentTarget.duration), onVolumeChange: (e) => {
                         setVolume(e.currentTarget.volume);
                         setMuted(e.currentTarget.muted);
-                    }, "data-testid": "media-video" })) }), buffering && !failed ? ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)", pointerEvents: "none", "data-testid": "media-video-buffering", children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.Loader2, boxSize: "40px", color: chrome.ink, sx: reducedMotion ? undefined : { animation: `${spin} 0.9s linear infinite` } }) })) : null, ripple ? ((0, jsx_runtime_1.jsx)(react_2.Flex, { position: "absolute", top: 0, bottom: 0, left: ripple.side === "left" ? 0 : undefined, right: ripple.side === "right" ? 0 : undefined, w: "40%", align: "center", justify: "center", pointerEvents: "none", opacity: reducedMotion ? 1 : undefined, sx: reducedMotion ? undefined : { animation: `${rippleFade} ${RIPPLE_LIFETIME_MS}ms ease-out` }, children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", align: "center", gap: 1, color: chrome.ink, bg: chrome.scrim(0.35), borderRadius: "full", boxSize: "72px", justify: "center", children: [ripple.side === "left" ? (0, jsx_runtime_1.jsx)(lucide_react_1.SkipBack, { size: 22, "aria-hidden": true }) : (0, jsx_runtime_1.jsx)(lucide_react_1.SkipForward, { size: 22, "aria-hidden": true }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", fontWeight: 600, children: `${SKIP_SECONDS}s` })] }) }, ripple.nonce)) : null, !playing && !failed ? ((0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": labels.play, "aria-hidden": true, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Play, { size: 36 }), onClick: togglePlay, position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)", boxSize: { base: "64px", md: "88px" }, isRound: true, variant: "ghost", bg: chrome.raised, color: chrome.accent, _hover: { bg: chrome.hover }, _focusVisible: { boxShadow: `0 0 0 2px ${ring}` }, tabIndex: -1, transition: fadeTransition, zIndex: 3, "data-testid": "media-video-big-play" })) : null, (0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: 0, left: 0, right: 0, h: "72px", bgImage: scrimTop, pointerEvents: "none", opacity: showChrome ? 1 : 0, transition: fadeTransition, "aria-hidden": true }), (0, jsx_runtime_1.jsxs)(react_2.Box, { position: "absolute", bottom: 0, left: 0, right: 0, zIndex: 3, bgImage: scrimBottom, pt: failed || duration <= 0 ? 2 : 10, px: 3, pb: 2, opacity: showChrome ? 1 : 0, visibility: showChrome ? "visible" : "hidden", transition: fadeTransition, children: [(0, jsx_runtime_1.jsx)(MediaScrubber_1.default, { value: Math.min(current, duration || current), max: duration > 0 ? duration : 0, buffered: buffered, onSeek: seekTo, ariaLabel: labels.seek, ariaValueText: (v) => labels.seekValue(clock(v), clock(duration)), formatTime: clock, isDisabled: failed || duration <= 0, testId: "media-video-seek" }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { role: "toolbar", "aria-label": labels.videoControls, align: "center", justify: "space-between", gap: 2, wrap: "wrap", mt: 1, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 1, wrap: "wrap", children: [(0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: playing ? labels.pause : labels.play, hint: "K", icon: playing ? (0, jsx_runtime_1.jsx)(lucide_react_1.Pause, { size: 18 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Play, { size: 18 }), onClick: togglePlay, testId: "media-video-toggle" }), (0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.rewind, hint: "J", icon: seekIcon((0, jsx_runtime_1.jsx)(lucide_react_1.SkipBack, { size: 16 })), onClick: () => seekBy(-mediaItems_1.SEEK_STEP_SECONDS), testId: "media-video-rewind" }), (0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.forward, hint: "L", icon: seekIcon((0, jsx_runtime_1.jsx)(lucide_react_1.SkipForward, { size: 16 })), onClick: () => seekBy(mediaItems_1.SEEK_STEP_SECONDS), testId: "media-video-forward" }), onPrevious ? ((0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.previous, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { size: 18 }), onClick: onPrevious, testId: "media-video-previous" })) : null, onNext ? ((0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.next, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 18 }), onClick: onNext, testId: "media-video-next" })) : null, (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", onMouseEnter: () => setVolumeHover(true), onMouseLeave: () => setVolumeHover(false), sx: { "&:focus-within": { "--volume-w": "88px" } }, children: [(0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: muted || volume === 0 ? labels.unmute : labels.mute, hint: "M", icon: muted || volume === 0 ? (0, jsx_runtime_1.jsx)(lucide_react_1.VolumeX, { size: 18 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Volume2, { size: 18 }), onClick: toggleMute, pressed: muted, testId: "media-video-mute" }), (0, jsx_runtime_1.jsx)(react_2.Box, { w: volumeHover ? { base: "64px", md: "88px" } : { base: "64px", md: "0px" }, overflow: "hidden", px: volumeHover ? 1 : 0, transition: fadeTransition, sx: { "&:focus-within": { width: "88px", paddingInline: "4px" } }, children: (0, jsx_runtime_1.jsxs)(react_2.Slider, { "aria-label": labels.volume, min: 0, max: 100, step: 5, value: effectiveVolume, onChange: changeVolume, focusThumbOnChange: false, getAriaValueText: (v) => `${v}%`, children: [(0, jsx_runtime_1.jsx)(react_2.SliderTrack, { bg: chrome.track, h: "4px", borderRadius: "full", children: (0, jsx_runtime_1.jsx)(react_2.SliderFilledTrack, { bg: chrome.ink }) }), (0, jsx_runtime_1.jsx)(react_2.SliderThumb, { bg: chrome.ink, boxSize: "12px", _focusVisible: { boxShadow: `0 0 0 2px ${ring}` } })] }) })] }), (0, jsx_runtime_1.jsxs)(react_2.Text, { as: "span", ml: 2, fontSize: "sm", fontWeight: 500, color: chrome.ink, sx: { fontVariantNumeric: "tabular-nums" }, "data-testid": "media-video-time", children: [clock(current), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", color: chrome.muted, children: ` / ${clock(duration)}` })] })] }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 1, children: [(0, jsx_runtime_1.jsxs)(react_2.Menu, { placement: "top-end", children: [(0, jsx_runtime_1.jsx)(react_2.MenuButton, { "aria-label": labels.speed, h: "32px", px: 3, borderRadius: "full", borderWidth: "1px", borderColor: chrome.track, bg: chrome.raised, color: chrome.ink, fontSize: "sm", fontWeight: 600, _hover: { bg: chrome.hover }, _focusVisible: { boxShadow: `0 0 0 2px ${ring}` }, "data-testid": "media-video-speed", children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "span", align: "center", gap: 1, children: [`${rate}x`, (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 14, "aria-hidden": true })] }) }), (0, jsx_runtime_1.jsx)(react_2.MenuList, { minW: "160px", bg: chrome.raised, zIndex: 1500, children: (0, jsx_runtime_1.jsx)(react_2.MenuOptionGroup, { type: "radio", title: labels.speed, value: String(rate), onChange: (value) => changeRate(Number(value)), children: mediaItems_1.PLAYBACK_SPEEDS.map((speed) => ((0, jsx_runtime_1.jsx)(react_2.MenuItemOption, { value: String(speed), bg: chrome.raised, color: chrome.ink, _hover: { bg: chrome.hover }, _focus: { bg: chrome.hover }, children: speed === 1 ? `1x - ${labels.normalSpeed}` : `${speed}x` }, speed))) }) })] }), hasCaptions ? ((0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.captions, hint: "C", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Captions, { size: 18 }), onClick: toggleCaptions, pressed: captionsOn, testId: "media-video-captions" })) : null, pipSupported ? ((0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.pip, hint: "P", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.PictureInPicture2, { size: 18 }), onClick: () => void togglePip(), testId: "media-video-pip" })) : null, (0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.download, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 18 }), href: item.src, testId: "media-video-download" }), shellFullscreen || iosFullscreen ? ((0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: isFullscreen ? labels.exitFullscreen : labels.fullscreen, hint: "F", icon: isFullscreen ? (0, jsx_runtime_1.jsx)(lucide_react_1.Minimize, { size: 18 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Maximize, { size: 18 }), onClick: () => void toggleFullscreen(), pressed: isFullscreen, testId: "media-video-fullscreen" })) : null] })] })] })] }));
+                    }, "data-testid": "media-video" })) }), buffering && !failed ? ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)", pointerEvents: "none", "data-testid": "media-video-buffering", children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.Loader2, boxSize: "40px", color: chrome.ink, sx: reducedMotion ? undefined : { animation: `${spin} 0.9s linear infinite` } }) })) : null, ripple ? ((0, jsx_runtime_1.jsx)(react_2.Flex, { position: "absolute", top: 0, bottom: 0, left: ripple.side === "left" ? 0 : undefined, right: ripple.side === "right" ? 0 : undefined, w: "40%", align: "center", justify: "center", pointerEvents: "none", opacity: reducedMotion ? 1 : undefined, sx: reducedMotion ? undefined : { animation: `${rippleFade} ${RIPPLE_LIFETIME_MS}ms ease-out` }, children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", align: "center", gap: 1, color: chrome.ink, bg: chrome.scrim(0.35), borderRadius: "full", boxSize: "72px", justify: "center", children: [ripple.side === "left" ? (0, jsx_runtime_1.jsx)(lucide_react_1.SkipBack, { size: 22, "aria-hidden": true }) : (0, jsx_runtime_1.jsx)(lucide_react_1.SkipForward, { size: 22, "aria-hidden": true }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", fontWeight: 600, children: `${SKIP_SECONDS}s` })] }) }, ripple.nonce)) : null, !playing && !failed ? ((0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": labels.play, "aria-hidden": true, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Play, { size: 36 }), onClick: togglePlay, position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)", boxSize: { base: "64px", md: "88px" }, isRound: true, variant: "ghost", bg: chrome.raised, color: chrome.accent, _hover: { bg: chrome.hover }, _focusVisible: { boxShadow: `0 0 0 2px ${ring}` }, tabIndex: -1, transition: fadeTransition, zIndex: 3, "data-testid": "media-video-big-play" })) : null, (0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: 0, left: 0, right: 0, h: "72px", bgImage: scrimTop, pointerEvents: "none", opacity: showChrome ? 1 : 0, transition: fadeTransition, "aria-hidden": true }), (0, jsx_runtime_1.jsxs)(react_2.Box, { position: "absolute", bottom: 0, left: 0, right: 0, zIndex: 3, bgImage: scrimBottom, pt: failed || duration <= 0 ? 2 : 10, px: 3, pb: 2, opacity: showChrome ? 1 : 0, visibility: showChrome ? "visible" : "hidden", transition: fadeTransition, children: [(0, jsx_runtime_1.jsx)(PlaybackTimeline_1.TimelineScrubber, { timeline: timeline, duration: duration, buffered: buffered, onSeek: seekTo, ariaLabel: labels.seek, ariaValueText: (v) => labels.seekValue(clock(v), clock(duration)), formatTime: clock, isDisabled: failed || duration <= 0, testId: "media-video-seek" }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { role: "toolbar", "aria-label": labels.videoControls, align: "center", justify: "space-between", gap: 2, wrap: "wrap", mt: 1, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 1, wrap: "wrap", children: [(0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: playing ? labels.pause : labels.play, hint: "K", icon: playing ? (0, jsx_runtime_1.jsx)(lucide_react_1.Pause, { size: 18 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Play, { size: 18 }), onClick: togglePlay, testId: "media-video-toggle" }), (0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.rewind, hint: "J", icon: seekIcon((0, jsx_runtime_1.jsx)(lucide_react_1.SkipBack, { size: 16 })), onClick: () => seekBy(-mediaItems_1.SEEK_STEP_SECONDS), testId: "media-video-rewind" }), (0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.forward, hint: "L", icon: seekIcon((0, jsx_runtime_1.jsx)(lucide_react_1.SkipForward, { size: 16 })), onClick: () => seekBy(mediaItems_1.SEEK_STEP_SECONDS), testId: "media-video-forward" }), onPrevious ? ((0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.previous, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { size: 18 }), onClick: onPrevious, testId: "media-video-previous" })) : null, onNext ? ((0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.next, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 18 }), onClick: onNext, testId: "media-video-next" })) : null, (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", onMouseEnter: () => setVolumeHover(true), onMouseLeave: () => setVolumeHover(false), sx: { "&:focus-within": { "--volume-w": "88px" } }, children: [(0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: muted || volume === 0 ? labels.unmute : labels.mute, hint: "M", icon: muted || volume === 0 ? (0, jsx_runtime_1.jsx)(lucide_react_1.VolumeX, { size: 18 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Volume2, { size: 18 }), onClick: toggleMute, pressed: muted, testId: "media-video-mute" }), (0, jsx_runtime_1.jsx)(react_2.Box, { w: volumeHover ? { base: "64px", md: "88px" } : { base: "64px", md: "0px" }, overflow: "hidden", px: volumeHover ? 1 : 0, transition: fadeTransition, sx: { "&:focus-within": { width: "88px", paddingInline: "4px" } }, children: (0, jsx_runtime_1.jsxs)(react_2.Slider, { "aria-label": labels.volume, min: 0, max: 100, step: 5, value: effectiveVolume, onChange: changeVolume, focusThumbOnChange: false, getAriaValueText: (v) => `${v}%`, children: [(0, jsx_runtime_1.jsx)(react_2.SliderTrack, { bg: chrome.track, h: "4px", borderRadius: "full", children: (0, jsx_runtime_1.jsx)(react_2.SliderFilledTrack, { bg: chrome.ink }) }), (0, jsx_runtime_1.jsx)(react_2.SliderThumb, { bg: chrome.ink, boxSize: "12px", _focusVisible: { boxShadow: `0 0 0 2px ${ring}` } })] }) })] }), (0, jsx_runtime_1.jsx)(PlaybackTimeline_1.TimelineClock, { timeline: timeline, duration: duration, testId: "media-video-time" })] }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 1, children: [(0, jsx_runtime_1.jsxs)(react_2.Menu, { placement: "top-end", children: [(0, jsx_runtime_1.jsx)(react_2.MenuButton, { "aria-label": labels.speed, h: "32px", px: 3, borderRadius: "full", borderWidth: "1px", borderColor: chrome.track, bg: chrome.raised, color: chrome.ink, fontSize: "sm", fontWeight: 600, _hover: { bg: chrome.hover }, _focusVisible: { boxShadow: `0 0 0 2px ${ring}` }, "data-testid": "media-video-speed", children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "span", align: "center", gap: 1, children: [`${rate}x`, (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 14, "aria-hidden": true })] }) }), (0, jsx_runtime_1.jsx)(react_2.MenuList, { minW: "160px", bg: chrome.raised, zIndex: "popover", children: (0, jsx_runtime_1.jsx)(react_2.MenuOptionGroup, { type: "radio", title: labels.speed, value: String(rate), onChange: (value) => changeRate(Number(value)), children: mediaItems_1.PLAYBACK_SPEEDS.map((speed) => ((0, jsx_runtime_1.jsx)(react_2.MenuItemOption, { value: String(speed), bg: chrome.raised, color: chrome.ink, _hover: { bg: chrome.hover }, _focus: { bg: chrome.hover }, children: speed === 1 ? `1x - ${labels.normalSpeed}` : `${speed}x` }, speed))) }) })] }), hasCaptions ? ((0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.captions, hint: "C", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Captions, { size: 18 }), onClick: toggleCaptions, pressed: captionsOn, testId: "media-video-captions" })) : null, pipSupported ? ((0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.pip, hint: "P", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.PictureInPicture2, { size: 18 }), onClick: () => void togglePip(), testId: "media-video-pip" })) : null, (0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.download, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 18 }), href: item.src, testId: "media-video-download" }), shellFullscreen || iosFullscreen ? ((0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: isFullscreen ? labels.exitFullscreen : labels.fullscreen, hint: "F", icon: isFullscreen ? (0, jsx_runtime_1.jsx)(lucide_react_1.Minimize, { size: 18 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Maximize, { size: 18 }), onClick: () => void toggleFullscreen(), pressed: isFullscreen, testId: "media-video-fullscreen" })) : null] })] })] })] }));
 };
 exports.default = MediaVideoPlayer;

package/dist/Components/MediaViewer/components/PlaybackTimeline.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import type { MediaScrubberProps } from "./MediaScrubberProps";
+export interface PlaybackTimeline {
+    get: () => number;
+    set: (seconds: number) => void;
+    subscribe: (listener: () => void) => () => void;
+}
+/** Playback position held outside React state, so a time tick re-renders only its subscribers. */
+export declare const usePlaybackTimeline: () => PlaybackTimeline;
+type TimelineScrubberProps = Omit<MediaScrubberProps, "value" | "max"> & {
+    timeline: PlaybackTimeline;
+    duration: number;
+};
+export declare const TimelineScrubber: React.FC<TimelineScrubberProps>;
+export declare const TimelineClock: React.FC<{
+    timeline: PlaybackTimeline;
+    duration: number;
+    testId: string;
+}>;
+export {};

package/dist/Components/MediaViewer/components/PlaybackTimeline.js

@@ -0,0 +1,47 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineClock = exports.TimelineScrubber = exports.usePlaybackTimeline = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const mediaItems_1 = require("../mediaItems");
+const typography_1 = require("../../../Theme/tokens/primitives/typography");
+const useViewerChrome_1 = require("../useViewerChrome");
+const MediaScrubber_1 = __importDefault(require("./MediaScrubber"));
+const createPlaybackTimeline = () => {
+    let seconds = 0;
+    const listeners = new Set();
+    return {
+        get: () => seconds,
+        set: (next) => {
+            if (next === seconds)
+                return;
+            seconds = next;
+            listeners.forEach((listener) => listener());
+        },
+        subscribe: (listener) => {
+            listeners.add(listener);
+            return () => {
+                listeners.delete(listener);
+            };
+        },
+    };
+};
+/** Playback position held outside React state, so a time tick re-renders only its subscribers. */
+const usePlaybackTimeline = () => (0, react_1.useState)(createPlaybackTimeline)[0];
+exports.usePlaybackTimeline = usePlaybackTimeline;
+const TimelineScrubber = ({ timeline, duration, ...scrubberProps }) => {
+    const current = (0, react_1.useSyncExternalStore)(timeline.subscribe, timeline.get, timeline.get);
+    return (0, jsx_runtime_1.jsx)(MediaScrubber_1.default, { value: Math.min(current, duration || current), max: duration > 0 ? duration : 0, ...scrubberProps });
+};
+exports.TimelineScrubber = TimelineScrubber;
+const TimelineClock = ({ timeline, duration, testId, }) => {
+    const chrome = (0, useViewerChrome_1.useViewerChrome)();
+    const readClock = () => (0, mediaItems_1.formatClock)(timeline.get());
+    const clock = (0, react_1.useSyncExternalStore)(timeline.subscribe, readClock, readClock);
+    return ((0, jsx_runtime_1.jsxs)(react_2.Text, { as: "span", ml: 2, fontSize: "sm", fontWeight: 500, color: chrome.ink, sx: typography_1.NUMERIC_TEXT, "data-testid": testId, children: [clock, (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", color: chrome.muted, children: ` / ${(0, mediaItems_1.formatClock)(duration)}` })] }));
+};
+exports.TimelineClock = TimelineClock;

package/dist/Components/MediaViewer/components/TileChip.js

@@ -7,6 +7,6 @@ const useViewerChrome_1 = require("../useViewerChrome");
 const TileChip = ({ children, place }) => {
     const chrome = (0, useViewerChrome_1.useViewerChrome)();
     const corner = place === "tl" ? { left: "6px", top: "6px" } : { right: "6px", bottom: "6px" };
-    return ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", position: "absolute", ...corner, h: "18px", px: "6px", borderRadius: "4px", bg: chrome.stage, color: chrome.ink, fontSize: "11px", fontWeight: 600, display: "inline-flex", alignItems: "center", "aria-hidden": true, children: children }));
+    return ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", position: "absolute", ...corner, h: "18px", px: "6px", borderRadius: "base", bg: chrome.stage, color: chrome.ink, fontSize: "xs-minus", fontWeight: 600, display: "inline-flex", alignItems: "center", "aria-hidden": true, children: children }));
 };
 exports.default = TileChip;

package/dist/Components/Modal/Modal.js

@@ -46,5 +46,5 @@ function Modal({ size, isOpen = false, onClose, overlaybg, overlaybackdropFilter
     const footerSlot = findSlot(children, exports.ModalFooter);
     (0, warnDroppedSlotChildren_1.warnDroppedSlotChildren)("Modal", children, [exports.ModalHeader, exports.ModalBody, exports.ModalFooter]);
     const headerContent = headerSlot !== null && headerSlot !== void 0 ? headerSlot : title;
-    return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isOpen, onClose: onClose, size: size, isCentered: isCentered, finalFocusRef: finalFocusRef, blockScrollOnMount: blockScrollOnMount, initialFocusRef: initialFocusRef, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, trapFocus: trapFocus, motionPreset: motionPreset, scrollBehavior: scrollBehavior, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, { bg: overlaybg, backdropFilter: overlaybackdropFilter, backdropInvert: overlaybackdropInvert, backdropBlur: overlaybackdropBlur }), (0, jsx_runtime_1.jsxs)(react_2.ModalContent, { "aria-busy": isLoading || undefined, ...contentProps, children: [(headerContent || subtitle) && ((0, jsx_runtime_1.jsxs)(react_2.ModalHeader, { ...((_a = headerSlot === null || headerSlot === void 0 ? void 0 : headerSlot.props) !== null && _a !== void 0 ? _a : {}), children: [headerContent, subtitle && ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "div", mt: 0.5, fontSize: "0.875rem", fontWeight: 400, color: colors.textMuted, children: subtitle }))] })), !hideCloseButton && (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, {}), isLoading ? ((0, jsx_runtime_1.jsx)(react_2.Flex, { role: "status", "aria-label": "Loading", justify: "center", align: "center", py: 16, children: (0, jsx_runtime_1.jsx)(react_2.Spinner, { thickness: "4px", speed: "0.65s", emptyColor: colors.boxborder[200], color: colors.accentText, size: "xl" }) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.ModalBody, { ...((_b = bodySlot === null || bodySlot === void 0 ? void 0 : bodySlot.props) !== null && _b !== void 0 ? _b : {}), children: bodySlot }), footerSlot && ((0, jsx_runtime_1.jsx)(react_2.ModalFooter, { ...footerSlot.props, children: footerSlot }))] })), portalChildren] })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isOpen, onClose: onClose, size: size, isCentered: isCentered, finalFocusRef: finalFocusRef, blockScrollOnMount: blockScrollOnMount, initialFocusRef: initialFocusRef, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, trapFocus: trapFocus, motionPreset: motionPreset, scrollBehavior: scrollBehavior, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, { bg: overlaybg, backdropFilter: overlaybackdropFilter, backdropInvert: overlaybackdropInvert, backdropBlur: overlaybackdropBlur }), (0, jsx_runtime_1.jsxs)(react_2.ModalContent, { "aria-busy": isLoading || undefined, ...contentProps, children: [(headerContent || subtitle) && ((0, jsx_runtime_1.jsxs)(react_2.ModalHeader, { ...((_a = headerSlot === null || headerSlot === void 0 ? void 0 : headerSlot.props) !== null && _a !== void 0 ? _a : {}), children: [headerContent, subtitle && ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "div", mt: 0.5, fontSize: "sm", fontWeight: 400, color: colors.textMuted, children: subtitle }))] })), !hideCloseButton && (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, {}), isLoading ? ((0, jsx_runtime_1.jsx)(react_2.Flex, { role: "status", "aria-label": "Loading", justify: "center", align: "center", py: 16, children: (0, jsx_runtime_1.jsx)(react_2.Spinner, { thickness: "4px", speed: "0.65s", emptyColor: colors.boxborder[200], color: colors.accentText, size: "xl" }) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.ModalBody, { ...((_b = bodySlot === null || bodySlot === void 0 ? void 0 : bodySlot.props) !== null && _b !== void 0 ? _b : {}), children: bodySlot }), footerSlot && ((0, jsx_runtime_1.jsx)(react_2.ModalFooter, { ...footerSlot.props, children: footerSlot }))] })), portalChildren] })] }));
 }

package/dist/Components/MoreItems/MoreItems.js

@@ -13,13 +13,13 @@ const MoreItems = ({ items, moreCount, triggerText, colorResolver, hideDots = fa
     const count = moreCount !== null && moreCount !== void 0 ? moreCount : items.length;
     if (count <= 0)
         return triggerText ? (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: triggerText }) : null;
-    return ((0, jsx_runtime_1.jsxs)(react_1.Popover, { trigger: trigger, placement: placement, isLazy: true, children: [(0, jsx_runtime_1.jsx)(react_1.PopoverTrigger, { children: (0, jsx_runtime_1.jsxs)(react_1.Box, { display: "inline-flex", alignItems: "center", maxW: triggerMaxWidth, cursor: "pointer", tabIndex: 0, role: "button", borderRadius: "lg", sx: (0, focusRing_styles_1.focusVisibleStyles)(theme.colors), children: [triggerText !== undefined && ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: triggerText })), (0, jsx_runtime_1.jsxs)(react_1.Box, { as: "span", ml: "6px", px: "8px", py: "1px", fontSize: "12px", fontWeight: 600, lineHeight: "1.4", borderRadius: "full", color: theme.colors.accentText, bg: countBadgeBg, transition: (0, primitives_1.transitionFor)(["background-color"]), _hover: { bg: (0, rowStates_1.listRowBackgrounds)(theme.colors).selectedActive }, children: ["+", count, " more"] })] }) }), (0, jsx_runtime_1.jsxs)(react_1.PopoverContent, { width: "auto", minWidth: minWidth, maxH: "280px", overflowY: "auto", borderRadius: "xl", 
+    return ((0, jsx_runtime_1.jsxs)(react_1.Popover, { trigger: trigger, placement: placement, isLazy: true, children: [(0, jsx_runtime_1.jsx)(react_1.PopoverTrigger, { children: (0, jsx_runtime_1.jsxs)(react_1.Box, { display: "inline-flex", alignItems: "center", maxW: triggerMaxWidth, cursor: "pointer", tabIndex: 0, role: "button", borderRadius: "lg", sx: (0, focusRing_styles_1.focusVisibleStyles)(theme.colors), children: [triggerText !== undefined && ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: triggerText })), (0, jsx_runtime_1.jsxs)(react_1.Box, { as: "span", ml: "6px", px: "8px", py: "1px", fontSize: "xs", fontWeight: 600, lineHeight: "1.4", borderRadius: "full", color: theme.colors.accentText, bg: countBadgeBg, transition: (0, primitives_1.transitionFor)(["background-color"]), _hover: { bg: (0, rowStates_1.listRowBackgrounds)(theme.colors).selectedActive }, children: ["+", count, " more"] })] }) }), (0, jsx_runtime_1.jsxs)(react_1.PopoverContent, { width: "auto", minWidth: minWidth, maxH: "280px", overflowY: "auto", borderRadius: "xl", 
                 // Chakra defaults this surface to `colors.gray.700` in dark, which against the
                 // swapped (dark-inverted) palette is a *light* grey — wrong for a popover bg. Pin it.
                 bg: theme.colors.surfaceRaised, boxShadow: "lg", _focus: { outline: "none", boxShadow: "lg" }, children: [(0, jsx_runtime_1.jsx)(react_1.PopoverArrow, { bg: theme.colors.surfaceRaised }), (0, jsx_runtime_1.jsx)(react_1.PopoverBody, { p: 3, children: (0, jsx_runtime_1.jsx)(react_1.SimpleGrid, { columns: columns, spacingX: 4, spacingY: 2, children: items === null || items === void 0 ? void 0 : items.map((item, index) => {
                                 var _a, _b, _c;
                                 const color = (_b = (_a = item.color) !== null && _a !== void 0 ? _a : colorResolver === null || colorResolver === void 0 ? void 0 : colorResolver(item)) !== null && _b !== void 0 ? _b : theme.colors.textMuted;
-                                return ((0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", alignItems: "center", gap: "8px", minW: 0, children: [!hideDots && ((0, jsx_runtime_1.jsx)(react_1.Box, { flexShrink: 0, width: "8px", height: "8px", borderRadius: "full", bg: color })), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "13px", color: theme.colors.textMuted, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: item.label })] }, (_c = item.id) !== null && _c !== void 0 ? _c : index));
+                                return ((0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", alignItems: "center", gap: "8px", minW: 0, children: [!hideDots && ((0, jsx_runtime_1.jsx)(react_1.Box, { flexShrink: 0, width: "8px", height: "8px", borderRadius: "full", bg: color })), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "xs-plus", color: theme.colors.textMuted, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: item.label })] }, (_c = item.id) !== null && _c !== void 0 ? _c : index));
                             }) }) })] })] }));
 };
 exports.default = MoreItems;

package/dist/Components/NavigationBar/NavigationBar.js

@@ -8,6 +8,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const Avatar_1 = __importDefault(require("../Avatar/Avatar"));
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const surfaceRaised_1 = require("../../Theme/tokens/builders/surfaceRaised");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
@@ -45,7 +46,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",
@@ -53,14 +54,14 @@ 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", 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: "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, 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", 
+    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.
-                                        sx: { "--menu-bg": theme.colors.backgroundColor.light }, borderRadius: "xl", boxShadow: "lg", color: theme.colors.text[900], overflow: "hidden", children: (0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", flexDirection: "column", maxH: "90vh", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { pt: 4, pb: 2, px: 4, children: (0, jsx_runtime_1.jsx)(PersonChip_1.default, { name: userName, imageUrl: userAvathar, secondary: userRole, orientation: "vertical", size: "xl", maxW: "100%" }) }), (0, jsx_runtime_1.jsx)(react_1.MenuDivider, { borderColor: theme.colors.boxborder[200] }), (0, jsx_runtime_1.jsx)(react_1.Box, { flex: 1, overflowY: "auto", overflowX: "hidden", children: navMenu === null || navMenu === void 0 ? void 0 : navMenu.map((menu, idx) => {
+                                        sx: { "--menu-bg": theme.colors.backgroundColor.light }, borderRadius: "xl", boxShadow: "lg", color: theme.colors.text[900], overflow: "hidden", children: (0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", flexDirection: "column", maxH: "90vh", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { pt: 4, pb: 2, px: 4, children: (0, jsx_runtime_1.jsx)(PersonChip_1.default, { name: userName, imageUrl: userAvathar, secondary: userRole, orientation: "vertical", size: "xl", maxW: "100%" }) }), (0, jsx_runtime_1.jsx)(react_1.MenuDivider, { borderColor: (0, surfaceRaised_1.raisedRule)(theme.colors) }), (0, jsx_runtime_1.jsx)(react_1.Box, { flex: 1, overflowY: "auto", overflowX: "hidden", children: navMenu === null || navMenu === void 0 ? void 0 : navMenu.map((menu, idx) => {
                                                         var _a, _b, _c, _d;
                                                         return ((0, jsx_runtime_1.jsxs)(react_1.MenuItem, { onClick: () => handleNavOnClick(menu.url), sx: menuItemStyle, children: [menu.icon && ((0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: "center", flexShrink: 0, sx: { "& svg": { width: "16px", height: "16px" } }, children: menu === null || menu === void 0 ? void 0 : menu.icon })), (0, jsx_runtime_1.jsx)(react_1.Box, { minW: 0, isTruncated: true, title: String((_a = menu.title) !== null && _a !== void 0 ? _a : ""), children: menu.title })] }, `${String((_d = (_c = (_b = menu.id) !== null && _b !== void 0 ? _b : menu.url) !== null && _c !== void 0 ? _c : menu.title) !== null && _d !== void 0 ? _d : idx)}-${idx}`));
-                                                    }) }), (0, jsx_runtime_1.jsx)(react_1.MenuDivider, { borderColor: theme.colors.boxborder[200] }), (0, jsx_runtime_1.jsxs)(react_1.MenuItem, { onClick: handleLogout, sx: {
+                                                    }) }), (0, jsx_runtime_1.jsx)(react_1.MenuDivider, { borderColor: (0, surfaceRaised_1.raisedRule)(theme.colors) }), (0, jsx_runtime_1.jsxs)(react_1.MenuItem, { onClick: handleLogout, sx: {
                                                         ...menuItemStyle,
                                                         color: theme.colors.semanticText.error,
                                                         _hover: { bg: dangerTone.bg, color: dangerTone.fg },

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,11 @@ 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 motion_2 = require("../../Theme/tokens/primitives/motion");
+const CARD_TRANSITION = (0, motion_2.transitionFor)(["box-shadow", "background-color", "border-color"], "base");
+const DISMISS_TRANSITION = (0, motion_2.transitionFor)(["background-color", "color", "transform"], "base");
 /** 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 +109,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" }, 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);