pixelize-design-library 2.4.2-beta.64 → 2.4.2-beta.66

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

@@ -4,8 +4,12 @@ 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 surfaceFocusRing_1 = require("../../Common/surfaceFocusRing");
 const typography_1 = require("../../../Theme/tokens/primitives/typography");
 const useViewerChrome_1 = require("../useViewerChrome");
+const motion_1 = require("../../../Theme/tokens/primitives/motion");
+const HEIGHT_TRANSITION = (0, motion_1.transitionFor)(["height"], "fast", "out");
+const THUMB_TRANSITION = (0, motion_1.transitionFor)(["width", "height"], "fast", "out");
 const STEP_SECONDS = 5;
 const BIG_STEP_SECONDS = 30;
 const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
@@ -17,6 +21,7 @@ const MediaScrubber = ({ value, max, buffered = [], onSeek, onPreview, ariaLabel
     const [hovering, setHovering] = (0, react_1.useState)(false);
     const [previewX, setPreviewX] = (0, react_1.useState)(null);
     const ring = (0, focusRing_1.settleBetween)(chrome.accent, [chrome.stage, chrome.raised, chrome.hover]);
+    const focusShadow = (0, surfaceFocusRing_1.surfaceFocusRing)(chrome.stage, ring);
     const disabled = isDisabled || !Number.isFinite(max) || max <= 0;
     const fraction = disabled ? 0 : clamp(value / max, 0, 1);
     const fractionAt = (clientX) => {
@@ -85,9 +90,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%", 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: {
+        }, 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_TRANSITION, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerUp, onKeyDown: onKeyDown, _focusVisible: { boxShadow: focusShadow }, "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" })] })] }));
+                        }, 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: THUMB_TRANSITION, pointerEvents: "none" })] })] }));
 };
 exports.default = MediaScrubber;

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

@@ -10,6 +10,7 @@ const react_3 = require("@emotion/react");
 const lucide_react_1 = require("lucide-react");
 const useFullscreen_1 = require("../../../Hooks/useFullscreen");
 const focusRing_1 = require("../../../Theme/tokens/builders/focusRing");
+const surfaceFocusRing_1 = require("../../Common/surfaceFocusRing");
 const mediaItems_1 = require("../mediaItems");
 const useAutoHideChrome_1 = require("../hooks/useAutoHideChrome");
 const motion_1 = require("../../../Theme/chakra/motion");
@@ -53,6 +54,7 @@ const MediaVideoPlayer = ({ item, label, onTimeChange, onPrevious, onNext, label
     const iosFullscreen = !shellFullscreen && hasIosVideoFullscreen();
     const pipSupported = typeof document !== "undefined" && document.pictureInPictureEnabled === true;
     const ring = (0, focusRing_1.settleBetween)(chrome.accent, [chrome.stage, chrome.raised, chrome.hover]);
+    const focusShadow = (0, surfaceFocusRing_1.surfaceFocusRing)(chrome.stage, ring);
     const { visible: chromeVisible, handlers: chromeHandlers } = (0, useAutoHideChrome_1.useAutoHideChrome)(shellRef, playing && !unsupported);
     const video = () => videoRef.current;
     const togglePlay = () => {
@@ -243,6 +245,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)(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] })] })] })] }));
+                    }, "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: focusShadow }, 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: focusShadow } })] }) })] }), (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: focusShadow }, "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/ViewerIconButton.js

@@ -8,13 +8,15 @@ const react_1 = require("@chakra-ui/react");
 const ToolTip_1 = __importDefault(require("../../ToolTip/ToolTip"));
 const useViewerChrome_1 = require("../useViewerChrome");
 const focusRing_1 = require("../../../Theme/tokens/builders/focusRing");
+const surfaceFocusRing_1 = require("../../Common/surfaceFocusRing");
 /** Toolbar/nav button for the media lightbox — always painted against the fixed dark viewer chrome. */
 const ViewerIconButton = ({ label, hint, icon, onClick, href, size = "md", round = false, pressed = false, isDisabled = false, testId, }) => {
     const chrome = (0, useViewerChrome_1.useViewerChrome)();
     const tooltipLabel = hint ? `${label} (${hint})` : label;
     // The stage is a fixed dark chrome regardless of app mode, so the ring is settled against it directly.
     const ring = (0, focusRing_1.settleBetween)(chrome.accent, [chrome.stage, chrome.raised, chrome.hover]);
+    const focusShadow = (0, surfaceFocusRing_1.surfaceFocusRing)(chrome.stage, ring);
     const linkProps = href ? { as: "a", href, download: true, rel: "noopener" } : {};
-    return ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: tooltipLabel, children: (0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": label, "aria-pressed": href ? undefined : pressed, icon: icon, onClick: onClick, isDisabled: isDisabled, size: size, isRound: round, variant: "ghost", color: chrome.ink, bg: round || pressed ? chrome.raised : "transparent", _hover: { bg: chrome.hover }, _active: { bg: chrome.hover }, outline: "2px solid transparent", outlineOffset: "2px", _focusVisible: { boxShadow: `0 0 0 2px ${ring}` }, "data-testid": testId, ...linkProps }) }));
+    return ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: tooltipLabel, children: (0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": label, "aria-pressed": href ? undefined : pressed, icon: icon, onClick: onClick, isDisabled: isDisabled, size: size, isRound: round, variant: "ghost", color: chrome.ink, bg: round || pressed ? chrome.raised : "transparent", _hover: { bg: chrome.hover }, _active: { bg: chrome.hover }, outline: "2px solid transparent", outlineOffset: "2px", _focusVisible: { boxShadow: focusShadow }, "data-testid": testId, ...linkProps }) }));
 };
 exports.default = ViewerIconButton;

package/dist/Components/MediaViewer/hooks/useFileViewer.d.ts

@@ -1,6 +1,7 @@
 import { type ReactNode } from "react";
 import type { MediaViewerProps } from "../MediaViewerProps";
 import { type MediaItem, type ResolveUrl, type ViewerFile } from "../mediaItems";
+/** MediaViewer props passed through; items, index and title come from `open`. */
 export type UseFileViewerOptions = Omit<MediaViewerProps, "isOpen" | "onClose" | "items" | "index" | "onIndexChange" | "title">;
 export interface FileViewerApi {
     /** Opens `files` (app-stored paths) resolved through `resolveUrl`, at `index`. */

package/dist/Components/MediaViewer/mediaItems.d.ts

@@ -59,6 +59,7 @@ export declare const clampZoom: (zoom: number) => number;
 export declare function formatClock(totalSeconds: number): string;
 export declare function mediaLink(item: MediaItem, atSeconds?: number): string;
 export declare function formatFileSize(bytes: number): string;
+export declare function formatUploadedDate(value: string): string;
 export declare function fileTypeLabel(src: string): string | null;
 /** True while the event target is a text field or slider, so keyboard shortcuts stay out of its way. */
 export declare function isTypingTarget(target: EventTarget | null): boolean;

package/dist/Components/MediaViewer/mediaItems.js

@@ -8,6 +8,7 @@ exports.planPreview = planPreview;
 exports.formatClock = formatClock;
 exports.mediaLink = mediaLink;
 exports.formatFileSize = formatFileSize;
+exports.formatUploadedDate = formatUploadedDate;
 exports.fileTypeLabel = fileTypeLabel;
 exports.isTypingTarget = isTypingTarget;
 exports.MIN_ZOOM = 25;
@@ -180,6 +181,10 @@ function formatFileSize(bytes) {
         return `${(bytes / 1024).toFixed(1)} KB`;
     return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
 }
+const UPLOADED_DATE = new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", year: "numeric" });
+function formatUploadedDate(value) {
+    return UPLOADED_DATE.format(new Date(value));
+}
 function fileTypeLabel(src) {
     const match = /\.([a-z0-9]{2,5})(?:[?#].*)?$/i.exec(src);
     return match ? match[1].toUpperCase() : null;

package/dist/Components/Modal/Modal.d.ts

@@ -3,4 +3,5 @@ import { ChakraModelProps, ModalHeaderSlotProps, ModalBodySlotProps, ModalFooter
 export declare const ModalHeader: React.FC<ModalHeaderSlotProps>;
 export declare const ModalBody: React.FC<ModalBodySlotProps>;
 export declare const ModalFooter: React.FC<ModalFooterSlotProps>;
+/** Dialog built from ModalHeader, ModalBody and ModalFooter slots; other children are dropped. */
 export default function Modal({ size, isOpen, onClose, overlaybg, overlaybackdropFilter, overlaybackdropInvert, overlaybackdropBlur, isCentered, finalFocusRef, blockScrollOnMount, initialFocusRef, closeOnOverlayClick, closeOnEsc, trapFocus, motionPreset, scrollBehavior, children, isLoading, title, subtitle, hideCloseButton, contentProps, portalChildren, }: ChakraModelProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/Modal/Modal.js

@@ -1,15 +1,12 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ModalFooter = exports.ModalBody = exports.ModalHeader = void 0;
 exports.default = Modal;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
-const react_2 = require("@chakra-ui/react");
+const react_1 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const warnDroppedSlotChildren_1 = require("./warnDroppedSlotChildren");
+const findSlot_1 = require("../Common/findSlot");
 const ModalHeader = ({ children }) => {
     return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
 };
@@ -22,29 +19,14 @@ const ModalFooter = ({ children }) => {
     return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
 };
 exports.ModalFooter = ModalFooter;
-const isReactElement = (child) => child !== null && typeof child === "object" && "type" in child;
-// Matches by type one Fragment deep, so `<>{cond && <ModalFooter>...</ModalFooter>}</>` isn't dropped.
-const findSlot = (children, slot) => {
-    for (const child of react_1.default.Children.toArray(children)) {
-        if (!isReactElement(child))
-            continue;
-        if (child.type === slot)
-            return child;
-        if (child.type === react_1.default.Fragment) {
-            const nested = findSlot(child.props.children, slot);
-            if (nested)
-                return nested;
-        }
-    }
-    return undefined;
-};
+/** Dialog built from ModalHeader, ModalBody and ModalFooter slots; other children are dropped. */
 function Modal({ size, isOpen = false, onClose, overlaybg, overlaybackdropFilter, overlaybackdropInvert, overlaybackdropBlur, isCentered, finalFocusRef, blockScrollOnMount = true, initialFocusRef, closeOnOverlayClick = true, closeOnEsc = true, trapFocus = true, motionPreset = "scale", scrollBehavior = "outside", children, isLoading, title, subtitle, hideCloseButton, contentProps, portalChildren, }) {
     var _a, _b;
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    const headerSlot = findSlot(children, exports.ModalHeader);
-    const bodySlot = findSlot(children, exports.ModalBody);
-    const footerSlot = findSlot(children, exports.ModalFooter);
+    const headerSlot = (0, findSlot_1.findSlot)(children, exports.ModalHeader);
+    const bodySlot = (0, findSlot_1.findSlot)(children, exports.ModalBody);
+    const footerSlot = (0, findSlot_1.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: "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] })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.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_1.ModalOverlay, { bg: overlaybg, backdropFilter: overlaybackdropFilter, backdropInvert: overlaybackdropInvert, backdropBlur: overlaybackdropBlur }), (0, jsx_runtime_1.jsxs)(react_1.ModalContent, { "aria-busy": isLoading || undefined, ...contentProps, children: [(headerContent || subtitle) && ((0, jsx_runtime_1.jsxs)(react_1.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_1.Text, { as: "div", mt: 0.5, fontSize: "sm", fontWeight: 400, color: colors.textMuted, children: subtitle }))] })), !hideCloseButton && (0, jsx_runtime_1.jsx)(react_1.ModalCloseButton, {}), isLoading ? ((0, jsx_runtime_1.jsx)(react_1.Flex, { role: "status", "aria-label": "Loading", justify: "center", align: "center", py: 16, children: (0, jsx_runtime_1.jsx)(react_1.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_1.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_1.ModalFooter, { ...footerSlot.props, children: footerSlot }))] })), portalChildren] })] }));
 }

package/dist/Components/Modal/dialogNaming.d.ts

@@ -0,0 +1,8 @@
+import { type ReactNode } from "react";
+type DialogNamingProps = {
+    label?: string;
+    labelledBy?: string;
+    children: ReactNode;
+};
+export declare function DialogNaming({ label, labelledBy, children }: DialogNamingProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Components/Modal/dialogNaming.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DialogNaming = DialogNaming;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+// Chakra's getDialogProps always points aria-labelledby at the header, so override it at the source.
+function DialogNaming({ label, labelledBy, children }) {
+    const modal = (0, react_2.useModalContext)();
+    const value = (0, react_1.useMemo)(() => label || labelledBy
+        ? {
+            ...modal,
+            getDialogProps: ((...args) => ({
+                ...modal.getDialogProps(...args),
+                ...(label ? { "aria-label": label } : {}),
+                "aria-labelledby": labelledBy,
+            })),
+        }
+        : modal, [modal, label, labelledBy]);
+    return (0, jsx_runtime_1.jsx)(react_2.ModalContextProvider, { value: value, children: children });
+}

package/dist/Components/Modal/warnDroppedSlotChildren.d.ts

@@ -1,2 +1,2 @@
 import React from "react";
-export declare const warnDroppedSlotChildren: (owner: "Drawer" | "Modal", children: React.ReactNode, slots: unknown[]) => void;
+export declare const warnDroppedSlotChildren: (owner: string, children: React.ReactNode, slots: unknown[], advice?: string) => void;

package/dist/Components/Modal/warnDroppedSlotChildren.js

@@ -5,7 +5,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.warnDroppedSlotChildren = void 0;
 const react_1 = __importDefault(require("react"));
-const warned = new Set();
+const warnedByOwner = new Map();
+const PORTAL_ADVICE = "Pass nested dialogs and live regions through the portalChildren prop.";
 const nameOf = (type) => {
     if (typeof type === "string")
         return type;
@@ -30,16 +31,19 @@ const collect = (children, slots, dropped) => {
         dropped.set(child.type, nameOf(child.type));
     }
 };
-const warnDroppedSlotChildren = (owner, children, slots) => {
+const warnDroppedSlotChildren = (owner, children, slots, advice = PORTAL_ADVICE) => {
+    var _a;
     if (process.env.NODE_ENV === "production")
         return;
+    const warned = (_a = warnedByOwner.get(owner)) !== null && _a !== void 0 ? _a : new Set();
+    warnedByOwner.set(owner, warned);
     const dropped = new Map();
     collect(children, slots, dropped);
     dropped.forEach((name, type) => {
         if (warned.has(type))
             return;
         warned.add(type);
-        console.warn(`[pixelize-design-library] ${owner}: <${name}> is not a ${owner}Header/${owner}Body/${owner}Footer slot and was dropped. Pass nested dialogs and live regions through the portalChildren prop.`);
+        console.warn(`[pixelize-design-library] ${owner}: <${name}> is not a ${owner}Header/${owner}Body/${owner}Footer slot and was dropped. ${advice}`);
     });
 };
 exports.warnDroppedSlotChildren = warnDroppedSlotChildren;

package/dist/Components/NavLauncher/LauncherTabs.js

@@ -6,6 +6,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const react_2 = require("react");
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const surfaceRaised_1 = require("../../Theme/tokens/builders/surfaceRaised");
 const motion_1 = require("../../Theme/tokens/primitives/motion");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const tabId = (base, id) => `${base}-tab-${id}`;
@@ -41,14 +42,14 @@ function LauncherTabs({ tabs, selected, onSelect, idBase, label, onLeaveUp, onLe
         event.stopPropagation();
         handle();
     };
-    return ((0, jsx_runtime_1.jsx)(react_1.Flex, { role: "tablist", "aria-label": label, "aria-orientation": "horizontal", flexShrink: 0, px: { base: "10px", md: "16px" }, gap: { base: 0, md: "4px" }, borderBottomWidth: "1px", borderColor: colors.boxborder[200], bg: colors.surfaceRaised, onKeyDown: onKeyDown, children: tabs.map((tab) => {
+    return ((0, jsx_runtime_1.jsx)(react_1.Flex, { role: "tablist", "aria-label": label, "aria-orientation": "horizontal", flexShrink: 0, px: { base: "10px", md: "16px" }, gap: { base: 0, md: "4px" }, borderBottomWidth: "1px", borderColor: (0, surfaceRaised_1.raisedRule)(colors), bg: colors.surfaceRaised, onKeyDown: onKeyDown, children: tabs.map((tab) => {
             const isSelected = tab.id === selected;
             return ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", role: "tab", id: (0, exports.tabId)(idBase, tab.id), ref: (node) => {
                     if (node)
                         refs.current.set(tab.id, node);
                     else
                         refs.current.delete(tab.id);
-                }, "aria-selected": isSelected, "aria-controls": isSelected ? (0, exports.panelId)(idBase) : undefined, tabIndex: isSelected ? 0 : -1, onClick: () => onSelect(tab.id), position: "relative", flex: { base: 1, md: "none" }, minW: { md: "112px" }, h: "46px", px: { base: "6px", md: "14px" }, whiteSpace: "nowrap", fontSize: "14px", fontWeight: isSelected ? 600 : 500, color: isSelected ? colors.accentText : colors.textMuted, transition: (0, motion_1.transitionFor)(["color"]), _hover: {
+                }, "aria-selected": isSelected, "aria-controls": isSelected ? (0, exports.panelId)(idBase) : undefined, tabIndex: isSelected ? 0 : -1, onClick: () => onSelect(tab.id), position: "relative", flex: { base: 1, md: "none" }, minW: { md: "112px" }, h: "46px", px: { base: "6px", md: "14px" }, whiteSpace: "nowrap", fontSize: "sm", fontWeight: isSelected ? 600 : 500, color: isSelected ? colors.accentText : colors.textMuted, transition: (0, motion_1.transitionFor)(["color"]), _hover: {
                     color: isSelected ? colors.accentText : colors.text[900],
                 }, _after: {
                     content: '""',
@@ -59,6 +60,6 @@ function LauncherTabs({ tabs, selected, onSelect, idBase, label, onLeaveUp, onLe
                     h: "2px",
                     borderRadius: "2px 2px 0 0",
                     bg: isSelected ? colors.primary[500] : "transparent",
-                }, sx: { ...ring, borderRadius: "8px" }, children: tab.label }, tab.id));
+                }, sx: { ...ring, borderRadius: "lg" }, children: tab.label }, tab.id));
         }) }));
 }

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

@@ -1,3 +1,3 @@
 import type { NavLauncherProps } from "./NavLauncherProps";
 /** Left-drawer navigation launcher: browse every module, pins, Frequent, Recent, search and (compact) the suite's apps. */
-export default function NavLauncher({ isOpen, onClose, sections: rawSections, pinnedIds, frequentIds, recentIds, onTogglePin, onNavigate, linkAs, actions, extraResults, query: controlledQuery, onQueryChange, isSearching, isLoading, keyScreenLimit, frequentLimit, suggestions, searchHint, modKeyLabel, headerActions, maxWidth, labels: labelOverrides, apps, currentAppId, onAppSelect, appsVisibility, "data-testid": testId, }: NavLauncherProps): import("react/jsx-runtime").JSX.Element;
+export default function NavLauncher({ isOpen, onClose, sections: rawSections, pinnedIds, frequentIds, recentIds, onTogglePin, onNavigate, linkAs, actions, extraResults, query: controlledQuery, onQueryChange, isSearching, isLoading, keyScreenLimit, frequentLimit, suggestions, searchHint, modKeyLabel, headerActions, maxWidth, labels: labelOverrides, apps, currentAppId, onAppSelect, appsVisibility, searchMode, synonyms, scopes, activeScope, onScopeChange, quickActions, answers, groupLimit, "data-testid": testId, }: NavLauncherProps): import("react/jsx-runtime").JSX.Element;