pixelize-design-library 2.4.2-beta.5 → 2.4.2-beta.51

package/dist/esm/Components/ProductDetails/ProductImageSlider.js

@@ -3,7 +3,10 @@ import { Badge, Box, Flex, IconButton, Image, AspectRatio, VStack, HStack, useBr
 import React, { useState } from "react";
 import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Play, } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-export default function ProductImageSlider({ images, thumbHeight = 60, imageSize = 480, thumbnailsToShow = 6, batch, }) {
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { overlayScrim } from "../../Theme/tokens/builders/scrim.js";
+export default function ProductImageSlider({ images, thumbHeight = 60, imageSize = 480, thumbnailsToShow = 6, batch, productName = "Product", }) {
     const [activeIndex, setActiveIndex] = useState(0);
     const [thumbStartIndex, setThumbStartIndex] = useState(0);
     const [transformOrigin, setTransformOrigin] = useState("center center");
@@ -11,6 +14,8 @@ export default function ProductImageSlider({ images, thumbHeight = 60, imageSize
     const [isPlaying, setIsPlaying] = useState(false);
     const theme = useCustomTheme();
     const isMobile = useBreakpointValue({ base: true, md: false });
+    // Opaque enough that white ink clears 4.5:1/3:1 against it on any photo, not just this one.
+    const controlScrim = overlayScrim(theme.colors);
     const getYouTubeId = (url) => {
         const patterns = [
             /youtu\.be\/([A-Za-z0-9_-]{6,})/i,
@@ -69,6 +74,7 @@ export default function ProductImageSlider({ images, thumbHeight = 60, imageSize
     }, [activeIndex]);
     const totalThumbs = (images === null || images === void 0 ? void 0 : images.length) || 0;
     const hasMultiple = totalThumbs > 1;
+    const altFor = (index) => `${productName}, image ${index + 1} of ${totalThumbs}`;
     const visibleThumbnails = images === null || images === void 0 ? void 0 : images.slice(thumbStartIndex, thumbStartIndex + thumbnailsToShow);
     const canScrollUp = thumbStartIndex > 0;
     const canScrollDown = thumbStartIndex + thumbnailsToShow < totalThumbs;
@@ -100,7 +106,7 @@ export default function ProductImageSlider({ images, thumbHeight = 60, imageSize
     };
     return (_jsx(Flex, { maxW: "6xl", mx: "auto", gap: 4, direction: isMobile ? "column" : "row", children: isMobile ? (_jsxs(_Fragment, { children: [_jsxs(Box, { w: "full", 
                     // h={`${imageSize}px`}
-                    position: "relative", overflow: "hidden", borderRadius: "md", boxShadow: "md", onMouseMove: (e) => {
+                    position: "relative", overflow: "hidden", borderRadius: "lg", boxShadow: "md", onMouseMove: (e) => {
                         if (isMobile)
                             return;
                         const bounds = e.currentTarget.getBoundingClientRect();
@@ -120,38 +126,43 @@ export default function ProductImageSlider({ images, thumbHeight = 60, imageSize
                             const thumb = (item === null || item === void 0 ? void 0 : item.thumb) || getThumbForItem(url);
                             if (isVideo) {
                                 if (!isPlaying) {
-                                    return (_jsxs(Box, { position: "relative", w: "100%", h: `${imageSize}px`, children: [_jsx(Image, { src: thumb || url, w: "100%", h: "100%", objectFit: "cover" }), _jsx(Flex, { position: "absolute", inset: 0, align: "center", justify: "center", children: _jsx(Box, { bg: theme.colors.background[50], borderRadius: "full", boxShadow: "lg", p: 3, cursor: "pointer", onClick: () => setIsPlaying(true), children: _jsx(Play, { size: 24, color: theme.colors.red[500] }) }) })] }));
+                                    return (_jsxs(Box, { position: "relative", w: "100%", h: `${imageSize}px`, children: [_jsx(Image, { src: thumb || url, alt: "Video thumbnail", w: "100%", h: "100%", objectFit: "cover" }), _jsx(Flex, { position: "absolute", inset: 0, align: "center", justify: "center", children: _jsx(Box, { bg: theme.colors.background[50], borderRadius: "full", boxShadow: "lg", p: 3, cursor: "pointer", role: "button", tabIndex: 0, "aria-label": "Play video", onClick: () => setIsPlaying(true), onKeyDown: (e) => {
+                                                        if (e.key === "Enter" || e.key === " ") {
+                                                            e.preventDefault();
+                                                            setIsPlaying(true);
+                                                        }
+                                                    }, children: _jsx(Play, { size: 24, color: accentTextOnCanvas(theme.colors.primary, theme.colors.background[50]) }) }) })] }));
                                 }
                                 return yt ? (_jsx(AspectRatio, { ratio: 16 / 9, w: "100%", children: _jsx(Box, { as: "iframe", src: `https://www.youtube.com/embed/${yt}?rel=0&autoplay=1`, allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true, border: "0" }) })) : vimeo ? (_jsx(AspectRatio, { ratio: 16 / 9, w: "100%", children: _jsx(Box, { as: "iframe", src: `https://player.vimeo.com/video/${vimeo}?autoplay=1`, allow: "autoplay; fullscreen; picture-in-picture", allowFullScreen: true, border: "0" }) })) : dm ? (_jsx(AspectRatio, { ratio: 16 / 9, w: "100%", children: _jsx(Box, { as: "iframe", src: `https://www.dailymotion.com/embed/video/${dm}?autoplay=1`, allow: "autoplay; fullscreen; picture-in-picture", allowFullScreen: true, border: "0" }) })) : (_jsx(Box, { as: "video", src: url, w: "100%", h: `${imageSize}px`, controls: true, autoPlay: true, sx: { objectFit: "contain", backgroundColor: "black" } }));
                             }
-                            return (_jsx(Image, { src: url, w: "100%", h: "100%", objectFit: "cover", transformOrigin: transformOrigin, transform: !isMobile && isHovered ? "scale(1.6)" : "scale(1)", transition: "transform 0.3s ease" }));
-                        })(), hasMultiple && (_jsxs(_Fragment, { children: [_jsx(IconButton, { icon: _jsx(ChevronLeft, { size: 20, color: theme.colors.gray[500] }), "aria-label": "Previous", onClick: () => {
+                            return (_jsx(Image, { src: url, alt: altFor(activeIndex), w: "100%", h: "100%", objectFit: "cover", transformOrigin: transformOrigin, transform: !isMobile && isHovered ? "scale(1.6)" : "scale(1)", transition: "transform 0.3s ease" }));
+                        })(), hasMultiple && (_jsxs(_Fragment, { children: [_jsx(IconButton, { icon: _jsx(ChevronLeft, { size: 20, color: theme.colors.white }), "aria-label": "Previous", onClick: () => {
                                         var _a;
                                         const max = ((_a = images === null || images === void 0 ? void 0 : images.length) !== null && _a !== void 0 ? _a : 1);
                                         const newIndex = activeIndex === 0 ? max - 1 : activeIndex - 1;
                                         updateActiveIndex(newIndex);
-                                    }, position: "absolute", left: "2", top: "50%", transform: "translateY(-50%)", variant: "ghost", colorScheme: "gray" }), _jsx(IconButton, { icon: _jsx(ChevronRight, { size: 20, color: theme.colors.gray[500] }), "aria-label": "Next", onClick: () => {
+                                    }, position: "absolute", left: "2", top: "50%", transform: "translateY(-50%)", variant: "solid", isRound: true, bg: controlScrim, _hover: { transform: "translateY(-50%) scale(1.08)", bg: controlScrim }, _active: { bg: controlScrim } }), _jsx(IconButton, { icon: _jsx(ChevronRight, { size: 20, color: theme.colors.white }), "aria-label": "Next", onClick: () => {
                                         var _a;
                                         const max = ((_a = images === null || images === void 0 ? void 0 : images.length) !== null && _a !== void 0 ? _a : 1);
                                         const newIndex = activeIndex === max - 1 ? 0 : activeIndex + 1;
                                         updateActiveIndex(newIndex);
-                                    }, position: "absolute", right: "2", top: "50%", transform: "translateY(-50%)", variant: "ghost", colorScheme: "gray" })] }))] }), hasMultiple && (_jsxs(HStack, { spacing: 2, align: "center", justify: "center", children: [_jsx(IconButton, { icon: _jsx(ChevronLeft, { size: 16, color: theme.colors.gray[500] }), "aria-label": "Scroll Left", onClick: () => handleThumbScroll("up"), isDisabled: !canScrollUp, variant: "ghost", size: "sm" }), visibleThumbnails === null || visibleThumbnails === void 0 ? void 0 : visibleThumbnails.map((src, index) => {
+                                    }, position: "absolute", right: "2", top: "50%", transform: "translateY(-50%)", variant: "solid", isRound: true, bg: controlScrim, _hover: { transform: "translateY(-50%) scale(1.08)", bg: controlScrim }, _active: { bg: controlScrim } })] }))] }), hasMultiple && (_jsxs(HStack, { spacing: 2, align: "center", justify: "center", children: [_jsx(IconButton, { icon: _jsx(ChevronLeft, { size: 16, color: theme.colors.textMuted }), "aria-label": "Scroll Left", onClick: () => handleThumbScroll("up"), isDisabled: !canScrollUp, variant: "ghost", size: "sm" }), visibleThumbnails === null || visibleThumbnails === void 0 ? void 0 : visibleThumbnails.map((src, index) => {
                             const actualIndex = thumbStartIndex + index;
                             const url = src.imageUrl;
                             const isVideo = src.isImage !== undefined ? src.isImage === false : isVideoUrl(url);
                             const thumb = src.thumb || getThumbForItem(url);
-                            return (_jsx(Box, { w: `${thumbHeight}px`, h: `${thumbHeight}px`, borderRadius: "md", overflow: "hidden", cursor: "pointer", border: actualIndex === activeIndex
-                                    ? `0.125rem solid ${theme.colors.gray[500]}`
-                                    : "0.125rem solid transparent", opacity: actualIndex === activeIndex ? 1 : 0.5, onClick: () => setActiveIndex(actualIndex), _hover: { opacity: 1 }, transition: "all 0.2s", position: "relative", children: isVideo ? (thumb ? (_jsxs(_Fragment, { children: [_jsx(Image, { src: thumb, w: "100%", h: "100%", objectFit: "cover" }), _jsx(Flex, { position: "absolute", inset: 0, align: "center", justify: "center", pointerEvents: "none", children: _jsx(Box, { bg: theme.colors.background[50], borderRadius: "full", boxShadow: "md", p: 1.5, children: _jsx(Play, { size: 14, color: theme.colors.red[500] }) }) })] })) : (_jsx(Flex, { w: "100%", h: "100%", align: "center", justify: "center", bg: theme.colors.gray[100], children: _jsx(Box, { bg: theme.colors.background[50], borderRadius: "full", boxShadow: "md", p: 1.5, children: _jsx(Play, { size: 14, color: theme.colors.red[500] }) }) }))) : (_jsx(Image, { src: url, w: "100%", h: "100%", objectFit: "cover" })) }, actualIndex));
-                        }), _jsx(IconButton, { icon: _jsx(ChevronRight, { size: 16, color: theme.colors.gray[500] }), "aria-label": "Scroll Right", onClick: () => handleThumbScroll("down"), isDisabled: !canScrollDown, variant: "ghost", size: "sm" })] }))] })) : (_jsxs(_Fragment, { children: [hasMultiple && (_jsxs(Box, { w: `${thumbHeight}px`, h: `${thumbHeight * thumbnailsToShow}px`, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "space-between", borderRadius: "md", overflow: "hidden", children: [_jsx(IconButton, { icon: _jsx(ChevronUp, { size: 16, color: theme.colors.gray[500] }), "aria-label": "Scroll Up", onClick: () => handleThumbScroll("up"), isDisabled: !canScrollUp, variant: "ghost", size: "sm", m: 1 }), _jsx(VStack, { spacing: 2, flex: "1", overflow: "hidden", children: visibleThumbnails === null || visibleThumbnails === void 0 ? void 0 : visibleThumbnails.map((src, index) => {
+                            return (_jsx(Box, { w: `${thumbHeight}px`, h: `${thumbHeight}px`, borderRadius: "lg", overflow: "hidden", cursor: "pointer", border: actualIndex === activeIndex
+                                    ? `0.063rem solid ${theme.colors.primary[500]}`
+                                    : "0.125rem solid transparent", opacity: actualIndex === activeIndex ? 1 : 0.5, onClick: () => setActiveIndex(actualIndex), _hover: { opacity: 1 }, transition: transitionFor(["background-color", "transform"], "base"), position: "relative", children: isVideo ? (thumb ? (_jsxs(_Fragment, { children: [_jsx(Image, { src: thumb, alt: "Video thumbnail", w: "100%", h: "100%", objectFit: "cover" }), _jsx(Flex, { position: "absolute", inset: 0, align: "center", justify: "center", pointerEvents: "none", children: _jsx(Box, { bg: theme.colors.background[50], borderRadius: "full", boxShadow: "md", p: 1.5, children: _jsx(Play, { size: 14, color: accentTextOnCanvas(theme.colors.primary, theme.colors.background[50]) }) }) })] })) : (_jsx(Flex, { w: "100%", h: "100%", align: "center", justify: "center", bg: theme.colors.backgroundColor.subtle, children: _jsx(Box, { bg: theme.colors.background[50], borderRadius: "full", boxShadow: "md", p: 1.5, children: _jsx(Play, { size: 14, color: accentTextOnCanvas(theme.colors.primary, theme.colors.background[50]) }) }) }))) : (_jsx(Image, { src: url, alt: altFor(actualIndex), w: "100%", h: "100%", objectFit: "cover" })) }, actualIndex));
+                        }), _jsx(IconButton, { icon: _jsx(ChevronRight, { size: 16, color: theme.colors.textMuted }), "aria-label": "Scroll Right", onClick: () => handleThumbScroll("down"), isDisabled: !canScrollDown, variant: "ghost", size: "sm" })] }))] })) : (_jsxs(_Fragment, { children: [hasMultiple && (_jsxs(Box, { w: `${thumbHeight}px`, h: `${thumbHeight * thumbnailsToShow}px`, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "space-between", borderRadius: "lg", overflow: "hidden", children: [_jsx(IconButton, { icon: _jsx(ChevronUp, { size: 16, color: theme.colors.textMuted }), "aria-label": "Scroll Up", onClick: () => handleThumbScroll("up"), isDisabled: !canScrollUp, variant: "ghost", size: "sm", m: 1 }), _jsx(VStack, { spacing: 2, flex: "1", overflow: "hidden", children: visibleThumbnails === null || visibleThumbnails === void 0 ? void 0 : visibleThumbnails.map((src, index) => {
                                 const actualIndex = thumbStartIndex + index;
                                 const url = src.imageUrl;
                                 const isVideo = src.isImage !== undefined ? src.isImage === false : isVideoUrl(url);
                                 const thumb = src.thumb || getThumbForItem(url);
-                                return (_jsx(Box, { w: `${thumbHeight}px`, h: `${thumbHeight}px`, borderRadius: "md", overflow: "hidden", cursor: "pointer", border: actualIndex === activeIndex
-                                        ? `0.125rem solid ${theme.colors.gray[500]}`
-                                        : "0.125rem solid transparent", opacity: actualIndex === activeIndex ? 1 : 0.5, onClick: () => setActiveIndex(actualIndex), _hover: { opacity: 1 }, transition: "all 0.2s", position: "relative", children: isVideo ? (thumb ? (_jsxs(_Fragment, { children: [_jsx(Image, { src: thumb, w: "100%", h: "100%", objectFit: "cover", alt: `Thumb ${actualIndex}` }), _jsx(Flex, { position: "absolute", inset: 0, align: "center", justify: "center", pointerEvents: "none", children: _jsx(Box, { bg: theme.colors.background[50], borderRadius: "full", boxShadow: "md", p: 1.5, children: _jsx(Play, { size: 14, color: theme.colors.red[500] }) }) })] })) : (_jsx(Flex, { w: "100%", h: "100%", align: "center", justify: "center", bg: theme.colors.gray[100], children: _jsx(Box, { bg: theme.colors.background[50], borderRadius: "full", boxShadow: "md", p: 1.5, children: _jsx(Play, { size: 14, color: theme.colors.red[500] }) }) }))) : (_jsx(Image, { src: url, w: "100%", h: "100%", objectFit: "cover", alt: `Thumb ${actualIndex}` })) }, actualIndex));
-                            }) }), _jsx(IconButton, { icon: _jsx(ChevronDown, { size: 16, color: theme.colors.gray[500] }), "aria-label": "Scroll Down", onClick: () => handleThumbScroll("down"), isDisabled: !canScrollDown, variant: "ghost", size: "sm", m: 1 })] })), _jsxs(Box, { w: `${imageSize}px`, h: `${imageSize}px`, position: "relative", overflow: "hidden", borderRadius: "md", boxShadow: "md", onMouseMove: (e) => {
+                                return (_jsx(Box, { w: `${thumbHeight}px`, h: `${thumbHeight}px`, borderRadius: "lg", overflow: "hidden", cursor: "pointer", border: actualIndex === activeIndex
+                                        ? `0.063rem solid ${theme.colors.primary[500]}`
+                                        : "0.125rem solid transparent", opacity: actualIndex === activeIndex ? 1 : 0.5, onClick: () => setActiveIndex(actualIndex), _hover: { opacity: 1 }, transition: transitionFor(["background-color", "transform"], "base"), position: "relative", children: isVideo ? (thumb ? (_jsxs(_Fragment, { children: [_jsx(Image, { src: thumb, w: "100%", h: "100%", objectFit: "cover", alt: "Video thumbnail" }), _jsx(Flex, { position: "absolute", inset: 0, align: "center", justify: "center", pointerEvents: "none", children: _jsx(Box, { bg: theme.colors.background[50], borderRadius: "full", boxShadow: "md", p: 1.5, children: _jsx(Play, { size: 14, color: accentTextOnCanvas(theme.colors.primary, theme.colors.background[50]) }) }) })] })) : (_jsx(Flex, { w: "100%", h: "100%", align: "center", justify: "center", bg: theme.colors.backgroundColor.subtle, children: _jsx(Box, { bg: theme.colors.background[50], borderRadius: "full", boxShadow: "md", p: 1.5, children: _jsx(Play, { size: 14, color: accentTextOnCanvas(theme.colors.primary, theme.colors.background[50]) }) }) }))) : (_jsx(Image, { src: url, w: "100%", h: "100%", objectFit: "cover", alt: altFor(actualIndex) })) }, actualIndex));
+                            }) }), _jsx(IconButton, { icon: _jsx(ChevronDown, { size: 16, color: theme.colors.textMuted }), "aria-label": "Scroll Down", onClick: () => handleThumbScroll("down"), isDisabled: !canScrollDown, variant: "ghost", size: "sm", m: 1 })] })), _jsxs(Box, { w: `${imageSize}px`, h: `${imageSize}px`, position: "relative", overflow: "hidden", borderRadius: "lg", boxShadow: "md", onMouseMove: (e) => {
                         const bounds = e.currentTarget.getBoundingClientRect();
                         const x = ((e.clientX - bounds.left) / bounds.width) * 100;
                         const y = ((e.clientY - bounds.top) / bounds.height) * 100;
@@ -169,20 +180,25 @@ export default function ProductImageSlider({ images, thumbHeight = 60, imageSize
                             const thumb = (item === null || item === void 0 ? void 0 : item.thumb) || getThumbForItem(url);
                             if (isVideo) {
                                 if (!isPlaying) {
-                                    return (_jsxs(Box, { position: "relative", w: "100%", h: `${imageSize}px`, children: [_jsx(Image, { src: thumb || url, w: "100%", h: "100%", objectFit: "cover" }), _jsx(Flex, { position: "absolute", inset: 0, align: "center", justify: "center", children: _jsx(Box, { bg: theme.colors.background[50], borderRadius: "full", boxShadow: "lg", p: 3, cursor: "pointer", onClick: () => setIsPlaying(true), children: _jsx(Play, { size: 24, color: theme.colors.red[500] }) }) })] }));
+                                    return (_jsxs(Box, { position: "relative", w: "100%", h: `${imageSize}px`, children: [_jsx(Image, { src: thumb || url, alt: "Video thumbnail", w: "100%", h: "100%", objectFit: "cover" }), _jsx(Flex, { position: "absolute", inset: 0, align: "center", justify: "center", children: _jsx(Box, { bg: theme.colors.background[50], borderRadius: "full", boxShadow: "lg", p: 3, cursor: "pointer", role: "button", tabIndex: 0, "aria-label": "Play video", onClick: () => setIsPlaying(true), onKeyDown: (e) => {
+                                                        if (e.key === "Enter" || e.key === " ") {
+                                                            e.preventDefault();
+                                                            setIsPlaying(true);
+                                                        }
+                                                    }, children: _jsx(Play, { size: 24, color: accentTextOnCanvas(theme.colors.primary, theme.colors.background[50]) }) }) })] }));
                                 }
                                 return yt ? (_jsx(AspectRatio, { ratio: 16 / 9, w: "100%", children: _jsx(Box, { as: "iframe", src: `https://www.youtube.com/embed/${yt}?rel=0&autoplay=1`, allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true, border: "0" }) })) : vimeo ? (_jsx(AspectRatio, { ratio: 16 / 9, w: "100%", children: _jsx(Box, { as: "iframe", src: `https://player.vimeo.com/video/${vimeo}?autoplay=1`, allow: "autoplay; fullscreen; picture-in-picture", allowFullScreen: true, border: "0" }) })) : dm ? (_jsx(AspectRatio, { ratio: 16 / 9, w: "100%", children: _jsx(Box, { as: "iframe", src: `https://www.dailymotion.com/embed/video/${dm}?autoplay=1`, allow: "autoplay; fullscreen; picture-in-picture", allowFullScreen: true, border: "0" }) })) : (_jsx(Box, { as: "video", src: url, w: "100%", h: `${imageSize}px`, controls: true, autoPlay: true, sx: { objectFit: "contain", backgroundColor: "black" } }));
                             }
-                            return (_jsx(Image, { src: url, w: "100%", h: "100%", objectFit: "cover", transformOrigin: transformOrigin, transform: isHovered ? "scale(1.6)" : "scale(1)", transition: "transform 0.3s ease", cursor: isHovered ? "zoom-in" : "default" }));
-                        })(), hasMultiple && (_jsxs(_Fragment, { children: [_jsx(IconButton, { icon: _jsx(ChevronLeft, { size: 20, color: theme.colors.gray[500] }), "aria-label": "Previous", onClick: () => {
+                            return (_jsx(Image, { src: url, alt: altFor(activeIndex), w: "100%", h: "100%", objectFit: "cover", transformOrigin: transformOrigin, transform: isHovered ? "scale(1.6)" : "scale(1)", transition: "transform 0.3s ease", cursor: isHovered ? "zoom-in" : "default" }));
+                        })(), hasMultiple && (_jsxs(_Fragment, { children: [_jsx(IconButton, { icon: _jsx(ChevronLeft, { size: 20, color: theme.colors.white }), "aria-label": "Previous", onClick: () => {
                                         var _a;
                                         const max = ((_a = images === null || images === void 0 ? void 0 : images.length) !== null && _a !== void 0 ? _a : 1);
                                         const newIndex = activeIndex === 0 ? max - 1 : activeIndex - 1;
                                         updateActiveIndex(newIndex);
-                                    }, position: "absolute", left: "2", top: "50%", transform: "translateY(-50%)", variant: "ghost", colorScheme: "gray" }), _jsx(IconButton, { icon: _jsx(ChevronRight, { size: 20, color: theme.colors.gray[500] }), "aria-label": "Next", onClick: () => {
+                                    }, position: "absolute", left: "2", top: "50%", transform: "translateY(-50%)", variant: "solid", isRound: true, bg: controlScrim, _hover: { transform: "translateY(-50%) scale(1.08)", bg: controlScrim }, _active: { bg: controlScrim } }), _jsx(IconButton, { icon: _jsx(ChevronRight, { size: 20, color: theme.colors.white }), "aria-label": "Next", onClick: () => {
                                         var _a;
                                         const max = ((_a = images === null || images === void 0 ? void 0 : images.length) !== null && _a !== void 0 ? _a : 1);
                                         const newIndex = activeIndex === max - 1 ? 0 : activeIndex + 1;
                                         updateActiveIndex(newIndex);
-                                    }, position: "absolute", right: "2", top: "50%", transform: "translateY(-50%)", variant: "ghost", colorScheme: "gray" })] }))] })] })) }));
+                                    }, position: "absolute", right: "2", top: "50%", transform: "translateY(-50%)", variant: "solid", isRound: true, bg: controlScrim, _hover: { transform: "translateY(-50%) scale(1.08)", bg: controlScrim }, _active: { bg: controlScrim } })] }))] })] })) }));
 }

package/dist/esm/Components/ProfileCard/ProfileCard.js

@@ -11,24 +11,39 @@ export const ProfileCardBody = ({ children, }) => {
 export const ProfileCardFooter = ({ children, }) => {
     return _jsx(_Fragment, { children: children });
 };
-export default function ProfileCard({ maxW, align, variant, direction, justify, children, size, color, overflow, dividercolor, dividersize = "0.5px", dividervariant = "solid", CardStyle, CardHeaderStyle, CardBodyStyle, borderTopColor, borderLeftColor, }) {
+const isReactElement = (child) => child !== null && typeof child === "object" && "type" in child;
+// Matches by type one Fragment deep, so `<>{cond && <ProfileCardFooter>...</ProfileCardFooter>}</>` isn't dropped.
+const findSlot = (children, slot) => {
+    for (const child of React.Children.toArray(children)) {
+        if (!isReactElement(child))
+            continue;
+        if (child.type === slot)
+            return child;
+        if (child.type === React.Fragment) {
+            const nested = findSlot(child.props.children, slot);
+            if (nested)
+                return nested;
+        }
+    }
+    return undefined;
+};
+export default function ProfileCard({ maxW, align, variant, direction, justify, children, size, color, overflow, dividercolor, dividersize = "1px", dividervariant = "solid", CardStyle, CardHeaderStyle, CardBodyStyle, borderTopColor, borderLeftColor, }) {
+    var _a;
     const { colors } = useCustomTheme();
-    const resolvedDividerColor = dividercolor !== null && dividercolor !== void 0 ? dividercolor : colors.border[200];
+    const resolvedDividerColor = dividercolor !== null && dividercolor !== void 0 ? dividercolor : colors.boxborder[200];
     const accentBorder = `2px solid ${colors.primary[500]}`;
-    const isReactElement = (child) => {
-        return child !== null && typeof child === "object" && "type" in child;
-    };
-    const header = React.Children.toArray(children).find((child) => isReactElement(child) && child.type === ProfileCardHeader);
-    const body = React.Children.toArray(children).find((child) => isReactElement(child) && child.type === ProfileCardBody);
-    const footer = React.Children.toArray(children).find((child) => isReactElement(child) && child.type === ProfileCardFooter);
+    const header = findSlot(children, ProfileCardHeader);
+    const body = findSlot(children, ProfileCardBody);
+    const footer = findSlot(children, ProfileCardFooter);
     const StylesWithBorder = borderLeftColor
         ? { ...CardStyle, borderLeft: accentBorder }
         : borderTopColor
             ? { ...CardStyle, borderTop: accentBorder }
             : { ...CardStyle };
-    return (_jsxs(ChakraCard, { maxW: maxW, align: align, variant: variant, direction: direction, justify: justify, size: size, overflow: overflow, colorScheme: color, style: StylesWithBorder, children: [header && (_jsxs(_Fragment, { children: [_jsx(CardHeader, { sx: { ...CardHeaderStyle, fontWeight: "bold" }, py: 15, children: header }), _jsx(Divider, { style: {
+    return (_jsxs(ChakraCard, { maxW: maxW, align: align, variant: variant === "outlein" ? "outline" : variant, direction: direction, justify: justify, size: size, overflow: overflow, colorScheme: color, style: StylesWithBorder, children: [header && (_jsxs(_Fragment, { children: [_jsx(CardHeader, { sx: CardHeaderStyle, ...header.props, children: header }), _jsx(Divider, { opacity: 1, style: {
                             borderColor: resolvedDividerColor,
-                            borderWidth: dividersize,
+                            borderWidth: 0,
+                            borderBottomWidth: dividersize,
                             borderStyle: dividervariant,
-                        } })] })), _jsx(CardBody, { sx: CardBodyStyle, children: body }), footer && _jsx(CardFooter, { children: footer })] }));
+                        } })] })), _jsx(CardBody, { sx: CardBodyStyle, ...((_a = body === null || body === void 0 ? void 0 : body.props) !== null && _a !== void 0 ? _a : {}), children: body }), footer && _jsx(CardFooter, { ...footer.props, children: footer })] }));
 }

package/dist/esm/Components/ProfilePhotoViewer/ProfilePhotoViewer.js

@@ -3,7 +3,10 @@ import { useRef, useState } from "react";
 import { Box, Image, IconButton, Input, Text, Tooltip, HStack, } from "@chakra-ui/react";
 import { Eye, FileText, SquarePen, User } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-import { accentTextOnCanvas, onFilled } from "../../Theme/tokens/builders/accentText.js";
+import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { labelOnFill, solidFillRung } from "../../Theme/tokens/builders/filledSurface.js";
+import { hexToRgb } from "../../Theme/tokens/builders/color.js";
+/** Avatar display with optional edit/view actions — does not crop, resize, or upload; PDF detection breaks on a freshly-picked file. */
 export default function ProfilePhotoViewer({ photoUrl, onPhotoChange, imageWidth = "100px", imageAlt = "Profile Photo", imageObjectFit = "cover", imageBorderRadius = "full", editIconSize = "sm", editIconPositionRight = "0px", editIconPositionBottom = "0px", isRound = true, boxStyle, isEditable = false, isView = false, style, handleIsView, fallbackText, revealOnHover = true, }) {
     var _a, _b, _c, _d, _e;
     const [photo, setPhoto] = useState(photoUrl);
@@ -32,10 +35,12 @@ export default function ProfilePhotoViewer({ photoUrl, onPhotoChange, imageWidth
         (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
     };
     const isPdf = photo === null || photo === void 0 ? void 0 : photo.endsWith(".pdf");
-    // [800], not [300]: the edit IconButton's border is a control boundary — WCAG 1.4.11 needs
-    // >=3.0 against any named surface up to `muted` (lightest); [300] fails there, [800] clears
-    // all with margin.
+    // NOTE: [800] not [300] — the edit IconButton's border is a control boundary, WCAG 1.4.11 needs >=3:1.
     const border = c.boxborder[500];
+    const hoverScrim = (opacity) => {
+        const { r, g, b } = hexToRgb(c.black);
+        return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+    };
     // Shared modern frame for whichever media we render (photo / pdf / fallback).
     const mediaFrame = {
         boxSize: imageWidth,
@@ -57,14 +62,14 @@ export default function ProfilePhotoViewer({ photoUrl, onPhotoChange, imageWidth
             "&:hover .ppv-media": {
                 boxShadow: `0 0 0 0.1875rem ${c.primary.opacity[24]}`,
             },
-        }, children: [_jsx(Box, { className: "ppv-media", borderRadius: imageBorderRadius, transition: "box-shadow 0.2s ease", children: renderMedia() }), hasActions && (_jsxs(_Fragment, { children: [_jsx(Box, { className: "ppv-overlay", position: "absolute", inset: 0, borderRadius: imageBorderRadius, bg: "blackAlpha.300", opacity: 0, transition: "opacity 0.2s ease", pointerEvents: "none" }), _jsxs(HStack, { className: "ppv-actions", position: "absolute", right: editIconPositionRight, bottom: editIconPositionBottom, transform: "translate(-15%, -15%)", spacing: 1.5, opacity: revealOnHover ? 0 : 1, transition: "opacity 0.2s ease", children: [isEditable && (_jsx(Tooltip, { label: "Edit", "aria-label": "Edit", hasArrow: true, children: _jsx(IconButton, { icon: _jsx(SquarePen, { size: 14 }), isRound: isRound, size: editIconSize, onClick: handleClick, "aria-label": "Edit photo", bg: c.primary[500], color: onFilled(c.primary[500], c.white, c.black), border: `0.125rem solid ${c.background[50]}`, boxShadow: (_b = theme.shadows) === null || _b === void 0 ? void 0 : _b.md, style: style, transition: "transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease", _hover: {
+        }, children: [_jsx(Box, { className: "ppv-media", borderRadius: imageBorderRadius, transition: "box-shadow 0.2s ease", children: renderMedia() }), hasActions && (_jsxs(_Fragment, { children: [_jsx(Box, { className: "ppv-overlay", position: "absolute", inset: 0, borderRadius: imageBorderRadius, bg: hoverScrim(0.3), opacity: 0, transition: "opacity 0.2s ease", pointerEvents: "none" }), _jsxs(HStack, { className: "ppv-actions", position: "absolute", right: editIconPositionRight, bottom: editIconPositionBottom, transform: "translate(-15%, -15%)", spacing: 1.5, opacity: revealOnHover ? 0 : 1, transition: "opacity 0.2s ease", children: [isEditable && (_jsx(Tooltip, { label: "Edit", "aria-label": "Edit", hasArrow: true, children: _jsx(IconButton, { icon: _jsx(SquarePen, { size: 14 }), isRound: isRound, size: editIconSize, onClick: handleClick, "aria-label": "Edit photo", bg: c.primary[solidFillRung(c.primary, c.white)], color: labelOnFill(c.primary[solidFillRung(c.primary, c.white)], c.white, c.black), border: `0.125rem solid ${c.background[50]}`, boxShadow: (_b = theme.shadows) === null || _b === void 0 ? void 0 : _b.md, style: style, transition: "transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease", _hover: {
                                         bg: c.primary[600],
-                                        color: onFilled(c.primary[600], c.white, c.black),
+                                        color: labelOnFill(c.primary[600], c.white, c.black),
                                         transform: "scale(1.1)",
                                         boxShadow: (_c = theme.shadows) === null || _c === void 0 ? void 0 : _c.lg,
                                     }, _active: {
                                         bg: c.primary[700],
-                                        color: onFilled(c.primary[700], c.white, c.black),
+                                        color: labelOnFill(c.primary[700], c.white, c.black),
                                     } }) })), isView && (_jsx(Tooltip, { label: "View", "aria-label": "View", hasArrow: true, children: _jsx(IconButton, { icon: _jsx(Eye, { size: 14 }), isRound: isRound, size: editIconSize, onClick: handleIsView, "aria-label": "View photo", bg: c.background[50], color: c.text[700], border: `0.063rem solid ${border}`, boxShadow: (_d = theme.shadows) === null || _d === void 0 ? void 0 : _d.md, style: style, transition: "transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease", _hover: {
                                         bg: c.gray[50],
                                         color: accentTextOnCanvas(c.primary, c.gray[50]),

package/dist/esm/Components/ProgressBar/ProgressBar.js

@@ -1,6 +1,31 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Progress } from "@chakra-ui/react";
-export default function ProgressBar({ size, isIndeterminate, color = "primary", hasStripe, height, value, isAnimated, max, min, variant, ...aria }) {
-    //  const theme = useCustomTheme();
-    return (_jsx(Progress, { ...aria, size: size, isIndeterminate: isIndeterminate, colorScheme: color, hasStripe: hasStripe, height: height, value: value, isAnimated: isAnimated, max: max, min: min, variant: variant }));
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
+// whiteAlpha/blackAlpha keep Chakra's own fill; contrast math can't resolve alpha scales.
+const NAMED_SCALES = new Set([
+    "gray", "red", "orange", "yellow", "green", "teal", "blue", "cyan", "purple", "pink",
+    "primary", "secondary",
+]);
+const scaleFor = (colors, scheme) => NAMED_SCALES.has(scheme)
+    ? colors[scheme]
+    : undefined;
+/** Percentage/quantity fill bar (isAnimated needs hasStripe=true or it's a no-op) — for a named pipeline tracker use StageProgress instead. */
+export default function ProgressBar({ colorScheme, color, variant, isIndeterminate, ...rest }) {
+    var _a;
+    const { colors } = useCustomTheme();
+    const scheme = (_a = colorScheme !== null && colorScheme !== void 0 ? colorScheme : color) !== null && _a !== void 0 ? _a : "primary";
+    const scale = scaleFor(colors, scheme);
+    // Chakra pins the fill to rung [500]; light hues (green/orange/blue/cyan) measure as low as
+    // 1.67:1 against the `gray[100]` track — under 1.4.11's 3:1. Lift the fill, not the track.
+    const fill = scale ? liftToContrast(scale[500], colors.gray[100]) : undefined;
+    return (_jsx(Progress, { ...rest, variant: variant, isIndeterminate: isIndeterminate, colorScheme: scheme, sx: fill
+            ? {
+                "& > div:first-of-type": isIndeterminate
+                    ? {
+                        backgroundImage: `linear-gradient(to right, transparent 0%, ${fill} 50%, transparent 100%) !important`,
+                    }
+                    : { backgroundColor: `${fill} !important` },
+            }
+            : undefined }));
 }

package/dist/esm/Components/QueryState/ErrorState.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from "@chakra-ui/react";
+import { AlertTriangle, RotateCw } from "lucide-react";
+import EmptyState from "../EmptyState/EmptyState.js";
+import Button from "../Button/Button.js";
+/** Error panel built on EmptyState's error tone, announced to screen readers. */
+const ErrorState = ({ title = "Couldn't load this", description = "Something went wrong on our side. Nothing was lost — try again in a moment.", icon = AlertTriangle, onRetry, retryLabel = "Retry", isRetrying = false, action, size = "md", minH, }) => {
+    const actions = onRetry || action ? (_jsxs(_Fragment, { children: [onRetry && (_jsx(Button, { size: "sm", variant: "outline", colorScheme: "gray", label: retryLabel, leftIcon: _jsx(RotateCw, { size: 16 }), isLoading: isRetrying, loadingText: retryLabel, onClick: onRetry })), action] })) : undefined;
+    return (_jsx(Box, { role: "alert", w: "100%", children: _jsx(EmptyState, { colorScheme: "error", icon: icon, title: title, description: description, size: size, minH: minH, action: actions }) }));
+};
+export default ErrorState;

package/dist/esm/Components/QueryState/QueryStateBoundary.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Flex, VisuallyHidden } from "@chakra-ui/react";
+import EmptyState from "../EmptyState/EmptyState.js";
+import Skeletons from "../Skeletons/Skeletons.js";
+import ErrorState from "./ErrorState.js";
+const DefaultLoading = () => (_jsxs(Flex, { role: "status", direction: "column", gap: 4, w: "100%", py: 2, children: [_jsx(VisuallyHidden, { children: "Loading" }), _jsx(Skeletons, { type: "skeleton", height: 4, width: "40%" }), Array.from({ length: 4 }, (_, i) => (_jsxs(Flex, { direction: "column", gap: 2, children: [_jsx(Skeletons, { type: "skeleton", height: 2.5, width: "100%" }), _jsx(Skeletons, { type: "skeleton", height: 2.5, width: "70%" })] }, i)))] }));
+const hasError = (error) => error !== undefined && error !== null && error !== false;
+/** Renders one of loading / error / empty / children for a content region; agnostic of the fetching library. */
+const QueryStateBoundary = ({ isLoading = false, error, isEmpty = false, loadingFallback, emptyFallback, empty, errorTitle, errorDescription, onRetry, isRetrying, minH = "24rem", children, }) => {
+    if (isLoading)
+        return _jsx(_Fragment, { children: loadingFallback !== null && loadingFallback !== void 0 ? loadingFallback : _jsx(DefaultLoading, {}) });
+    if (hasError(error)) {
+        const description = typeof errorDescription === "function" ? errorDescription(error) : errorDescription;
+        return (_jsx(ErrorState, { title: errorTitle, description: description, onRetry: onRetry, isRetrying: isRetrying, minH: minH }));
+    }
+    if (isEmpty)
+        return _jsx(_Fragment, { children: emptyFallback !== null && emptyFallback !== void 0 ? emptyFallback : _jsx(EmptyState, { minH: minH, ...empty }) });
+    return _jsx(_Fragment, { children: typeof children === "function" ? children() : children });
+};
+export default QueryStateBoundary;

package/dist/esm/Components/QueryState/QueryStateProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/RadioButton/RadioButton.js

@@ -1,25 +1,43 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Radio as ChakraRadio, RadioGroup as ChakraRadioGroup, Stack, } from "@chakra-ui/react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Radio as ChakraRadio, RadioGroup as ChakraRadioGroup, Stack, } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { TextLabel } from "../Common/FormLabel.js";
-const RadioButton = ({ label, colorScheme, isChecked, onChange, isDisabled, size, value, defaultChecked, labelFontSize = "0.75rem", labelClampLines = 2, showLabelTooltip = (label || "").length > 18, labelTooltip = label, }) => {
-    const theme = useCustomTheme();
-    return (_jsx(ChakraRadio, { colorScheme: colorScheme, isChecked: isChecked, onChange: onChange, isDisabled: isDisabled, size: size, value: value, defaultChecked: defaultChecked, borderColor: theme.colors.gray[500], borderWidth: "1.6px", _hover: {
-            borderColor: theme.colors.primary[500],
-            backgroundColor: theme.colors.background[100],
+import FieldMessage from "../Common/FieldMessage.js";
+import { useFieldIds } from "../Common/useFieldIds.js";
+import { fieldHoverBorder } from "../Common/fieldStyles.js";
+import { resolveFilledSurface } from "../../Theme/tokens/builders/filledSurface.js";
+import { focusVisibleRing } from "../../Theme/chakra/focusRing.styles.js";
+const RadioButton = ({ label, description, content, colorScheme, isChecked, onChange, isDisabled, size, value, defaultChecked, labelFontSize = "0.875rem", labelClampLines = 2, showLabelTooltip = (label || "").length > 18, labelTooltip = label, ...rest }) => {
+    const { colors } = useCustomTheme();
+    // colorScheme is any Chakra scheme name; only some resolve to a real scale.
+    const scales = colors;
+    const palette = (colorScheme && scales[colorScheme]) || colors.primary;
+    const filled = resolveFilledSurface(palette, colors);
+    return (_jsx(ChakraRadio, { ...rest, colorScheme: colorScheme, isChecked: isChecked, onChange: onChange, isDisabled: isDisabled, size: size, value: value, defaultChecked: defaultChecked, borderColor: fieldHoverBorder(colors), borderWidth: "1px", _hover: {
+            borderColor: filled.fill,
+            backgroundColor: colors.background[100],
+        }, _focusVisible: focusVisibleRing(colors), _invalid: { borderColor: colors.semanticText.error }, _disabled: {
+            bg: colors.background[100],
+            borderColor: colors.boxborder[500],
+            opacity: 1,
+            cursor: "not-allowed",
         }, sx: {
             "&[data-checked]": {
-                backgroundColor: theme.colors.primary[500],
-                borderColor: theme.colors.primary[500]
+                backgroundColor: filled.fill,
+                borderColor: filled.fill,
             },
             "&[data-checked]:hover": {
-                backgroundColor: theme.colors.primary[500],
-                borderColor: theme.colors.primary[500],
-                boxShadow: `0 0 0 2px ${theme.colors.primary[200]}`,
+                backgroundColor: filled.hoverFill,
+                borderColor: filled.hoverFill,
             },
-        }, children: _jsx(TextLabel, { label: label, fontSize: labelFontSize, showTooltip: showLabelTooltip, tooltipLabel: labelTooltip, clampLines: labelClampLines, inline: true }) }));
+            "&[data-checked][data-disabled]": {
+                backgroundColor: colors.background[100],
+                borderColor: colors.boxborder[500],
+            },
+        }, children: _jsxs(Box, { children: [_jsx(TextLabel, { label: label, fontSize: labelFontSize, showTooltip: showLabelTooltip, tooltipLabel: labelTooltip, clampLines: labelClampLines, inline: true }), description && (_jsx(Box, { as: "span", display: "block", fontSize: "0.75rem", color: colors.textMuted, mt: "0.125rem", children: description })), content] }) }));
 };
-const RadioButtonGroup = ({ options, onChange, value, defaultValue, isDisabled, size, colorScheme, spacing, direction = "row", align = "", labelFontSize, labelClampLines, showLabelTooltip, }) => {
-    return (_jsx(ChakraRadioGroup, { onChange: onChange, value: value, defaultValue: defaultValue, children: _jsx(Stack, { direction: direction, spacing: spacing || "2", align: align, gap: direction === "row" ? "1.25rem" : "0.1rem", children: options.map((option) => (_jsx(RadioButton, { label: option.label, value: option.id, isDisabled: isDisabled, size: size, colorScheme: colorScheme, labelFontSize: labelFontSize, labelClampLines: labelClampLines, showLabelTooltip: typeof showLabelTooltip === 'function' ? showLabelTooltip(option) : showLabelTooltip }, option.id))) }) }));
+const RadioButtonGroup = ({ options, children, onChange, value, defaultValue, isDisabled, size, colorScheme, spacing, direction = "row", align = "", labelFontSize, labelClampLines, showLabelTooltip, label, "aria-label": ariaLabel, name, id, error, errorMessage, helperText, isRequired = false, }) => {
+    const ids = useFieldIds(id, { error, errorMessage, helperText });
+    return (_jsxs(Box, { children: [label && (_jsx(Box, { id: ids.labelId, children: _jsx(TextLabel, { label: label, isRequired: isRequired }) })), _jsx(ChakraRadioGroup, { onChange: onChange, value: value, defaultValue: defaultValue, name: name, id: ids.inputId, "aria-labelledby": label ? ids.labelId : undefined, "aria-label": label ? undefined : ariaLabel, "aria-describedby": ids.describedBy, "aria-invalid": error || undefined, "aria-required": isRequired || undefined, children: _jsx(Stack, { direction: direction, spacing: spacing || "2", align: align, gap: direction === "row" ? "1.25rem" : "0.1rem", children: children !== null && children !== void 0 ? children : options === null || options === void 0 ? void 0 : options.map((option) => (_jsx(RadioButton, { label: option.label, description: option.description, content: typeof option.content === "function" ? option.content(option) : option.content, value: option.id, isDisabled: isDisabled, isInvalid: error, size: size, colorScheme: colorScheme, labelFontSize: labelFontSize, labelClampLines: labelClampLines, showLabelTooltip: typeof showLabelTooltip === 'function' ? showLabelTooltip(option) : showLabelTooltip }, option.id))) }) }), _jsx(FieldMessage, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
 };
 export { RadioButton, RadioButtonGroup };

package/dist/esm/Components/RangeSlider/RangeSlider.js

@@ -0,0 +1,131 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useId, useRef, useState } from "react";
+import { Box, Flex, Text } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+import ToolTip from "../ToolTip/ToolTip.js";
+import { resolveRangeSliderColors } from "./rangeSliderColors.js";
+import { rangeSliderSize } from "./rangeSliderSize.js";
+import { assertRangeBounds, nudgeDelta, positionToValue, resolveMaxThumbValue, resolveMinThumbValue, snapToStep, stepMarks, valueToPosition, } from "./rangeSliderMath.js";
+const BIG_STEP_MULTIPLIER = 10;
+const isRangeValue = (value) => Array.isArray(value);
+function RangeSlider(rawProps) {
+    var _a;
+    const { min, max, value, defaultValue, onChange, onChangeEnd, onChangeStart, step = 1, minDistance = 0, isDisabled = false, scale = "linear", formatValue = String, size = "sm", label = "Range", minThumbLabel = "Minimum", maxThumbLabel = "Maximum", "aria-label": ariaLabel, showValueLabels = true, showTooltip = true, marks, testId, } = rawProps;
+    assertRangeBounds(min, max, scale);
+    const isRange = isRangeValue((_a = value !== null && value !== void 0 ? value : defaultValue) !== null && _a !== void 0 ? _a : [min, max]);
+    const { colors } = useCustomTheme();
+    const { track, fill, thumbBg, thumbBorder } = resolveRangeSliderColors(colors);
+    const { trackHeight, thumbSize } = rangeSliderSize(size);
+    const focusRing = focusVisibleStyles(colors);
+    const reactId = useId();
+    const trackRef = useRef(null);
+    const [internalValue, setInternalValue] = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : (isRange ? [min, max] : min));
+    const [dragging, setDragging] = useState(null);
+    const [dragValue, setDragValue] = useState(null);
+    const isControlled = value !== undefined;
+    const committedValue = isControlled ? value : internalValue;
+    const liveValue = dragValue !== null && dragValue !== void 0 ? dragValue : committedValue;
+    const [currentMin, currentMax] = isRangeValue(liveValue) ? liveValue : [min, liveValue];
+    const currentSingle = isRangeValue(liveValue) ? liveValue[0] : liveValue;
+    const commit = useCallback((next, isFinal) => {
+        if (!isControlled)
+            setInternalValue(next);
+        onChange === null || onChange === void 0 ? void 0 : onChange(next);
+        if (isFinal)
+            onChangeEnd === null || onChangeEnd === void 0 ? void 0 : onChangeEnd(next);
+    }, [isControlled, onChange, onChangeEnd]);
+    const positionFromClientX = useCallback((clientX) => {
+        const trackEl = trackRef.current;
+        if (!trackEl)
+            return 0;
+        const { left, width } = trackEl.getBoundingClientRect();
+        const ratio = width === 0 ? 0 : (clientX - left) / width;
+        return Math.min(100, Math.max(0, ratio * 100));
+    }, []);
+    const startDrag = (thumb) => (e) => {
+        if (isDisabled)
+            return;
+        e.currentTarget.setPointerCapture(e.pointerId);
+        setDragging(thumb);
+        setDragValue(isRange ? [currentMin, currentMax] : currentSingle);
+        onChangeStart === null || onChangeStart === void 0 ? void 0 : onChangeStart();
+    };
+    const handleMove = (thumb) => (e) => {
+        if (isDisabled || dragging !== thumb)
+            return;
+        const desired = positionToValue(positionFromClientX(e.clientX), min, max, scale);
+        const next = isRange
+            ? thumb === "min"
+                ? [resolveMinThumbValue(desired, min, max, step, currentMax, minDistance), currentMax]
+                : [currentMin, resolveMaxThumbValue(desired, min, max, step, currentMin, minDistance)]
+            : snapToStep(desired, min, max, step);
+        setDragValue(next);
+        commit(next, false);
+    };
+    const endDrag = () => {
+        if (!dragging)
+            return;
+        setDragging(null);
+        const final = dragValue !== null && dragValue !== void 0 ? dragValue : committedValue;
+        setDragValue(null);
+        commit(final, true);
+    };
+    const nudgeRange = (thumb, e) => {
+        if (e.key === "Home" || e.key === "End") {
+            e.preventDefault();
+            const next = thumb === "min"
+                ? e.key === "Home"
+                    ? [min, currentMax]
+                    : [resolveMinThumbValue(currentMax - minDistance, min, max, step, currentMax, minDistance), currentMax]
+                : e.key === "End"
+                    ? [currentMin, max]
+                    : [currentMin, resolveMaxThumbValue(currentMin + minDistance, min, max, step, currentMin, minDistance)];
+            commit(next, true);
+            return;
+        }
+        const delta = nudgeDelta(e.key, step, step * BIG_STEP_MULTIPLIER, e.shiftKey);
+        if (delta === null)
+            return;
+        e.preventDefault();
+        const next = thumb === "min"
+            ? [resolveMinThumbValue(currentMin + delta, min, max, step, currentMax, minDistance), currentMax]
+            : [currentMin, resolveMaxThumbValue(currentMax + delta, min, max, step, currentMin, minDistance)];
+        commit(next, true);
+    };
+    const nudgeSingle = (e) => {
+        if (e.key === "Home" || e.key === "End") {
+            e.preventDefault();
+            commit(e.key === "Home" ? min : max, true);
+            return;
+        }
+        const delta = nudgeDelta(e.key, step, step * BIG_STEP_MULTIPLIER, e.shiftKey);
+        if (delta === null)
+            return;
+        e.preventDefault();
+        commit(snapToStep(currentSingle + delta, min, max, step), true);
+    };
+    const nudge = (thumb) => (e) => {
+        if (isDisabled)
+            return;
+        if (isRange)
+            nudgeRange(thumb, e);
+        else
+            nudgeSingle(e);
+    };
+    const minPos = valueToPosition(isRange ? currentMin : min, min, max, scale);
+    const maxPos = valueToPosition(isRange ? currentMax : currentSingle, min, max, scale);
+    const cursor = isDisabled ? "not-allowed" : "grab";
+    const opacity = isDisabled ? 0.5 : 1;
+    const resolvedMarks = Array.isArray(marks)
+        ? marks
+        : marks === true
+            ? stepMarks(min, max, step).map((v) => ({ value: v }))
+            : [];
+    const singleThumbLabel = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : "Value";
+    return (_jsxs(Box, { "data-testid": testId, opacity: opacity, children: [label ? (_jsx(Text, { fontSize: "xs", fontWeight: "semibold", color: colors.textMuted, mb: 2, children: label })) : null, showValueLabels ? (_jsxs(Flex, { justify: isRange ? "space-between" : "flex-end", mb: 1, children: [isRange ? (_jsx(Text, { fontSize: "xs", fontWeight: "semibold", color: colors.accentText, children: formatValue(currentMin) })) : null, _jsx(Text, { fontSize: "xs", fontWeight: "semibold", color: colors.accentText, children: formatValue(isRange ? currentMax : currentSingle) })] })) : null, _jsx(Box, { position: "relative", pt: 5, pb: resolvedMarks.length ? 6 : 1, px: 1, children: _jsxs(Box, { ref: trackRef, position: "relative", h: trackHeight, borderRadius: "full", bg: track, children: [_jsx(Box, { position: "absolute", top: 0, h: trackHeight, borderRadius: "full", bg: fill, left: `${minPos}%`, width: `${Math.max(maxPos - minPos, 0)}%` }), resolvedMarks.map((mark) => {
+                            const markPos = valueToPosition(mark.value, min, max, scale);
+                            return (_jsx(Box, { "data-mark-value": mark.value, position: "absolute", top: "50%", left: `${markPos}%`, transform: "translate(-50%, -50%)", boxSize: "4px", borderRadius: "full", bg: colors.gray[400], children: mark.label ? (_jsx(Text, { position: "absolute", top: "12px", left: "50%", transform: "translateX(-50%)", fontSize: "0.6875rem", color: colors.textMuted, whiteSpace: "nowrap", children: mark.label })) : null }, mark.value));
+                        }), isRange ? (_jsx(ToolTip, { label: formatValue(currentMin), placement: "top", isOpen: showTooltip && dragging === "min", hasArrow: true, children: _jsx(Box, { role: "slider", tabIndex: isDisabled ? -1 : 0, "aria-disabled": isDisabled || undefined, "aria-orientation": "horizontal", "aria-label": minThumbLabel, "aria-valuemin": min, "aria-valuemax": currentMax, "aria-valuenow": currentMin, "aria-valuetext": formatValue(currentMin), position: "absolute", top: "50%", left: `${minPos}%`, transform: "translate(-50%, -50%)", boxSize: thumbSize, borderRadius: "full", borderWidth: "2px", borderColor: thumbBorder, bg: thumbBg, cursor: cursor, sx: { touchAction: "none", ...focusRing }, onPointerDown: startDrag("min"), onPointerMove: handleMove("min"), onPointerUp: endDrag, onPointerCancel: endDrag, onKeyDown: nudge("min"), "data-testid": testId ? `${testId}-thumb-min` : undefined, id: `${reactId}-min` }) })) : null, _jsx(ToolTip, { label: formatValue(isRange ? currentMax : currentSingle), placement: "top", isOpen: showTooltip && dragging === (isRange ? "max" : "min"), hasArrow: true, children: _jsx(Box, { role: "slider", tabIndex: isDisabled ? -1 : 0, "aria-disabled": isDisabled || undefined, "aria-orientation": "horizontal", "aria-label": isRange ? maxThumbLabel : singleThumbLabel, "aria-valuemin": isRange ? currentMin : min, "aria-valuemax": max, "aria-valuenow": isRange ? currentMax : currentSingle, "aria-valuetext": formatValue(isRange ? currentMax : currentSingle), position: "absolute", top: "50%", left: `${maxPos}%`, transform: "translate(-50%, -50%)", boxSize: thumbSize, borderRadius: "full", borderWidth: "2px", borderColor: thumbBorder, bg: thumbBg, cursor: cursor, sx: { touchAction: "none", ...focusRing }, onPointerDown: startDrag(isRange ? "max" : "min"), onPointerMove: handleMove(isRange ? "max" : "min"), onPointerUp: endDrag, onPointerCancel: endDrag, onKeyDown: nudge(isRange ? "max" : "min"), "data-testid": testId ? (isRange ? `${testId}-thumb-max` : `${testId}-thumb`) : undefined, id: `${reactId}-${isRange ? "max" : "single"}` }) })] }) })] }));
+}
+export default RangeSlider;

package/dist/esm/Components/RangeSlider/RangeSliderProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/RangeSlider/rangeSliderColors.js

@@ -0,0 +1,7 @@
+import { liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
+/** Fill and thumb border both lift to 3:1 against the neutral track — same recipe as ProgressBar's fill. */
+export const resolveRangeSliderColors = (colors) => {
+    const track = colors.gray[100];
+    const fill = liftToContrast(colors.primary[500], track);
+    return { track, fill, thumbBg: colors.background[50], thumbBorder: fill };
+};