pixelize-design-library 2.4.2-beta.55 → 2.4.2-beta.57

package/dist/esm/Components/DatePicker/TimeOnlyPicker.js

@@ -10,6 +10,7 @@ import { useFieldIds } from "../Common/useFieldIds.js";
 import { resolvePickerAliases } from "./pickerField.js";
 import TimePicker from "./TimePicker.js";
 import { TimePickerInput } from "./TimePickerInput.js";
+import PickerPortal, { usePickerPortal } from "./PickerPortal.js";
 import { useExclusiveOverlay } from "../../Hooks/useExclusiveOverlay.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { DEFAULT_CONTROL_SIZE } from "../../Theme/tokens/primitives/controlSizes.js";
@@ -22,6 +23,7 @@ export function TimeOnlyPicker(props) {
     const theme = useCustomTheme();
     const { isOpen, onOpen, onClose } = useDisclosure();
     const requestExclusiveOpen = useExclusiveOverlay(isOpen, onClose);
+    const pickerPortal = usePickerPortal(isOpen);
     const openPicker = () => {
         requestExclusiveOpen();
         onOpen();
@@ -90,13 +92,13 @@ export function TimeOnlyPicker(props) {
         };
     }, [isOpen, onClose]);
     const resolvedTempDate = tempDate !== null && tempDate !== void 0 ? tempDate : new Date((disableToday ? tomorrow : today).getFullYear(), (disableToday ? tomorrow : today).getMonth(), (disableToday ? tomorrow : today).getDate(), 0, 0, 0, 0);
-    return (_jsxs(FormControl, { id: ids.inputId, isDisabled: disabled, isInvalid: error, isRequired: isRequired, width: width, children: [label && (_jsx(TextLabel, { label: label, id: ids.inputId, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), _jsxs(Popover, { isLazy: true, isOpen: isOpen, onClose: onClose, placement: "bottom-start", closeOnBlur: false, returnFocusOnClose: false, children: [_jsx(PopoverAnchor, { children: _jsx(Box, { ref: triggerRef, as: "div", children: _jsx(Box, { ref: inputWrapperRef, children: _jsx(TimePickerInput, { value: tempDate, onChange: (date) => {
+    return (_jsxs(FormControl, { id: ids.inputId, isDisabled: disabled, isInvalid: error, isRequired: isRequired, width: width, children: [label && (_jsx(TextLabel, { label: label, id: ids.inputId, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), _jsxs(Popover, { isLazy: true, isOpen: pickerPortal.isPopoverOpen, onClose: onClose, placement: "bottom-start", closeOnBlur: false, returnFocusOnClose: false, children: [_jsx(PopoverAnchor, { children: _jsx(Box, { ref: triggerRef, as: "div", children: _jsx(Box, { ref: inputWrapperRef, children: _jsx(TimePickerInput, { value: tempDate, onChange: (date) => {
                                         handleTimeInputChange(date);
                                     }, dateFormat: dateFormat, isDisabled: disabled, placeholder: placeholder, id: ids.inputId, name: name, isRequired: isRequired, describedBy: ids.describedBy, onFocus: () => {
                                         if (!disabled && !isOpen)
                                             openPicker();
-                                    }, error: error, size: sizeKey }) }) }) }), _jsx(PopoverContent, { width: "auto", p: 4, ref: popoverRef, boxShadow: "lg", borderRadius: "xl", bg: theme.colors.surfaceRaised, children: _jsxs(PopoverBody, { children: [_jsx(TimePicker, { date: resolvedTempDate, dateFormat: dateFormat, onChange: (updatedDate) => {
-                                        handleTimePickerChange(updatedDate);
-                                    } }), _jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 4, pt: 4, borderTop: "1px solid", borderColor: theme.colors.boxborder[200], children: [_jsx(ChakraButton, { size: "sm", variant: "ghost", onClick: handleClear, children: "Clear" }), _jsx(ChakraButton, { size: "sm", colorScheme: "primary", onClick: handleOk, children: "OK" })] })] }) })] }), _jsx(FieldMessage, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
+                                    }, error: error, size: sizeKey }) }) }) }), _jsx(PickerPortal, { isMounted: pickerPortal.isMounted, children: _jsx(PopoverContent, { width: "auto", p: 4, ref: popoverRef, boxShadow: "lg", borderRadius: "xl", bg: theme.colors.surfaceRaised, children: _jsxs(PopoverBody, { children: [_jsx(TimePicker, { date: resolvedTempDate, dateFormat: dateFormat, onChange: (updatedDate) => {
+                                            handleTimePickerChange(updatedDate);
+                                        } }), _jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 4, pt: 4, borderTop: "1px solid", borderColor: theme.colors.boxborder[200], children: [_jsx(ChakraButton, { size: "sm", variant: "ghost", onClick: handleClear, children: "Clear" }), _jsx(ChakraButton, { size: "sm", colorScheme: "primary", onClick: handleOk, children: "OK" })] })] }) }) })] }), _jsx(FieldMessage, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
 }
 export default TimeOnlyPicker;

package/dist/esm/Components/DetailSections/DetailSections.js

@@ -0,0 +1,107 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex, Text } from "@chakra-ui/react";
+import { Check, Dot } from "lucide-react";
+import Accordion from "../Accordion/Accordion.js";
+import Tabs from "../Tabs/Tabs.js";
+import SpecTable from "../SpecTable/SpecTable.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+const DEFAULT_LABELS = {
+    description: "Description",
+    highlights: "Highlights",
+    specifications: "Specifications",
+    care: "Care",
+    shipping: "Shipping & returns",
+    legal: "Legal & manufacturer info",
+    netQuantity: "Net quantity",
+    manufacturer: "Manufactured / packed by",
+    originCountry: "Country of origin",
+    mrp: "MRP",
+    customerCare: "Customer care",
+    mrpIncludesTaxes: "Maximum retail price, inclusive of all taxes",
+};
+const hasContent = (node) => node !== undefined && node !== null && node !== false && node !== "";
+const legalRows = (legal, text) => {
+    const fields = [legal.netQuantity, legal.manufacturer, legal.originCountry, legal.mrpNote, legal.customerCare];
+    if (!fields.some(Boolean))
+        return [];
+    const rows = [
+        [text.netQuantity, legal.netQuantity],
+        [text.manufacturer, legal.manufacturer],
+        [text.originCountry, legal.originCountry],
+        [text.mrp, legal.mrpNote || text.mrpIncludesTaxes],
+        [text.customerCare, legal.customerCare],
+    ];
+    return rows.flatMap(([label, value]) => (value ? [{ label, value }] : []));
+};
+const BulletList = ({ items, icon }) => {
+    const { colors } = useCustomTheme();
+    return (_jsx(Flex, { as: "ul", direction: "column", gap: 2, m: 0, p: 0, listStyleType: "none", children: items.map((item, i) => (_jsxs(Flex, { as: "li", align: "flex-start", gap: 2, color: colors.text[800], children: [_jsx(Box, { as: "span", "aria-hidden": true, display: "inline-flex", flexShrink: 0, mt: "0.1875rem", color: colors.accentText, children: icon === "check" ? _jsx(Check, { size: 16, strokeWidth: 2.25 }) : _jsx(Dot, { size: 16, strokeWidth: 6 }) }), _jsx(Box, { as: "span", minW: 0, overflowWrap: "anywhere", children: item })] }, `${item}-${i}`))) }));
+};
+/** Long-form product information: description, highlights, specifications, care, shipping and returns, and legal-metrology info. */
+const DetailSections = ({ description, highlights, specs, care, shipping, legal, sections, layout = "accordion", defaultOpenIds, specCollapsedCount, labels, "data-testid": testId, }) => {
+    const { colors } = useCustomTheme();
+    const text = { ...DEFAULT_LABELS, ...labels };
+    const body = { fontSize: "sm", lineHeight: 1.7, color: colors.text[800] };
+    const careList = typeof care === "string" ? null : care;
+    const legalSpecs = legal ? legalRows(legal, text) : [];
+    const builtIn = [
+        description ? { id: "description", title: text.description, content: _jsx(Text, { ...body, children: description }) } : null,
+        (highlights === null || highlights === void 0 ? void 0 : highlights.length) ? { id: "highlights", title: text.highlights, content: _jsx(BulletList, { items: highlights, icon: "check" }) } : null,
+        (specs === null || specs === void 0 ? void 0 : specs.length)
+            ? { id: "specs", title: text.specifications, content: _jsx(SpecTable, { items: specs, collapsedCount: specCollapsedCount }) }
+            : null,
+        (care === null || care === void 0 ? void 0 : care.length)
+            ? {
+                id: "care",
+                title: text.care,
+                content: careList ? _jsx(BulletList, { items: careList, icon: "dot" }) : _jsx(Text, { ...body, children: care }),
+            }
+            : null,
+        hasContent(shipping) ? { id: "shipping", title: text.shipping, content: _jsx(Box, { ...body, children: shipping }) } : null,
+        legalSpecs.length ? { id: "legal", title: text.legal, content: _jsx(SpecTable, { items: legalSpecs }) } : null,
+    ];
+    const BUILT_IN_IDS = ["description", "highlights", "specs", "care", "shipping", "legal"];
+    const overrides = new Map((sections !== null && sections !== void 0 ? sections : []).map((s) => [s.id, s]));
+    const merged = [
+        ...builtIn.flatMap((section, i) => {
+            const replacement = overrides.get(BUILT_IN_IDS[i]);
+            const picked = replacement !== null && replacement !== void 0 ? replacement : section;
+            return picked ? [picked] : [];
+        }),
+        ...(sections !== null && sections !== void 0 ? sections : []).filter((s) => !BUILT_IN_IDS.includes(s.id)),
+    ];
+    if (merged.length === 0)
+        return null;
+    if (layout === "tabs") {
+        return (_jsx(Box, { "data-testid": testId, children: _jsx(Tabs, { variant: "line", "aria-label": "Product details", items: merged.map((s) => ({
+                    id: s.id,
+                    label: s.title,
+                    content: (_jsx(Box, { id: `detail-section-${s.id}`, "data-section-id": s.id, pt: 4, children: s.content })),
+                })) }) }));
+    }
+    const openIds = defaultOpenIds !== null && defaultOpenIds !== void 0 ? defaultOpenIds : [merged[0].id];
+    const defaultIndex = merged.flatMap((s, i) => (openIds.includes(s.id) ? [i] : []));
+    return (_jsx(Box, { "data-testid": testId, children: _jsx(Accordion, { allowMultiple: true, defaultIndex: defaultIndex, items: merged.map((s) => ({
+                header: (_jsx(Text, { as: "span", color: colors.header[900], children: s.title })),
+                content: s.content,
+                itemProps: {
+                    id: `detail-section-${s.id}`,
+                    "data-section-id": s.id,
+                    border: "none",
+                    borderRadius: "xl",
+                    bg: colors.background[100],
+                    mb: 2,
+                },
+                buttonProps: {
+                    px: 4,
+                    py: 3.5,
+                    fontSize: "md",
+                    bg: "transparent",
+                    transition: transitionFor(["background-color"]),
+                    _hover: { bg: colors.background[200] },
+                },
+                panelProps: { px: 4, pt: 1, pb: 5, color: colors.text[800] },
+            })) }) }));
+};
+export default DetailSections;

package/dist/esm/Components/DetailSections/DetailSectionsProps.js

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

package/dist/esm/Components/MediaGallery/MediaFrame.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from "react";
+import { Box, Flex, Text } from "@chakra-ui/react";
+import { ImageOff, Play, Video } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import Skeletons from "../Skeletons/Skeletons.js";
+import { GlassIconButton } from "./glass.js";
+import { frameKind, framePoster, parseEmbed } from "./mediaGalleryModel.js";
+const CENTER = { position: "absolute", inset: 0 };
+/** One frame: skeleton, then image fade-in with the ratio already reserved; broken images become a tile. */
+export const FrameImage = ({ src, alt, fit, eager, zoom, unavailableLabel, }) => {
+    const { colors } = useCustomTheme();
+    const [state, setState] = useState("loading");
+    const settle = useCallback((node) => {
+        if (node && node.complete && node.naturalWidth > 0)
+            setState("loaded");
+    }, []);
+    if (state === "failed") {
+        return (_jsxs(Flex, { ...CENTER, direction: "column", align: "center", justify: "center", gap: 2, color: colors.textMuted, role: "img", "aria-label": `${unavailableLabel}: ${alt}`, children: [_jsx(ImageOff, { size: 24, "aria-hidden": true }), _jsx(Text, { as: "span", fontSize: "xs", children: unavailableLabel })] }));
+    }
+    return (_jsxs(_Fragment, { children: [state === "loading" && (_jsx(Box, { ...CENTER, "data-testid": "media-skeleton", "aria-hidden": true, children: _jsx(Skeletons, { type: "skeleton", height: "100%", width: "100%", borderRadius: "0" }) })), _jsx(Box, { as: "img", ref: settle, src: src, alt: alt, loading: eager ? "eager" : "lazy", decoding: "async", draggable: false, onLoad: () => setState("loaded"), onError: () => setState("failed"), ...CENTER, w: "100%", h: "100%", objectFit: fit, opacity: state === "loaded" ? 1 : 0, transform: zoom ? `scale(${zoom.scale})` : undefined, transformOrigin: zoom ? `${zoom.x}% ${zoom.y}%` : undefined, transition: transitionFor(["opacity", "transform"], "base"), sx: reducedMotionSx() })] }));
+};
+/** Image, or a video that shows its poster behind a play button until asked to play. */
+const MediaFrame = ({ media, alt, fit = "cover", active = true, eager = true, autoPlay = false, zoom, surface, playLabel, unavailableLabel, }) => {
+    const { colors } = useCustomTheme();
+    const kind = frameKind(media);
+    const [playing, setPlaying] = useState(autoPlay);
+    useEffect(() => {
+        if (!active)
+            setPlaying(false);
+    }, [active]);
+    const poster = framePoster(media);
+    let content;
+    if (kind === "image") {
+        content = _jsx(FrameImage, { src: media.src, alt: alt, fit: fit, eager: eager, zoom: zoom, unavailableLabel: unavailableLabel }, media.src);
+    }
+    else if (playing) {
+        const embed = parseEmbed(media.src);
+        content = embed ? (_jsx(Box, { as: "iframe", ...CENTER, w: "100%", h: "100%", border: "0", src: embed.src, title: alt, allow: "autoplay; encrypted-media; picture-in-picture; fullscreen", allowFullScreen: true })) : (_jsx(Box, { as: "video", ...CENTER, w: "100%", h: "100%", objectFit: "contain", src: media.src, poster: media.poster, controls: true, autoPlay: true, playsInline: true, "aria-label": alt }));
+    }
+    else {
+        content = (_jsxs(_Fragment, { children: [poster ? (_jsx(FrameImage, { src: poster, alt: alt, fit: fit, eager: eager, unavailableLabel: unavailableLabel }, poster)) : (_jsx(Flex, { ...CENTER, align: "center", justify: "center", color: colors.textMuted, "aria-hidden": true, children: _jsx(Video, { size: 32 }) })), _jsx(GlassIconButton, { label: playLabel, icon: _jsx(Play, { size: 20, "aria-hidden": true, fill: "currentColor" }), onClick: () => setPlaying(true), size: 56, left: "calc(50% - 28px)", top: "calc(50% - 28px)", tabIndex: active ? 0 : -1 })] }));
+    }
+    return (_jsx(Box, { position: "relative", w: "100%", h: "100%", overflow: "hidden", bg: surface !== null && surface !== void 0 ? surface : colors.background[100], "data-frame-kind": kind, children: content }));
+};
+export default MediaFrame;

package/dist/esm/Components/MediaGallery/MediaGallery.js

@@ -0,0 +1,201 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Box, Flex, Text } from "@chakra-ui/react";
+import { ChevronLeft, ChevronRight, ZoomIn } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { scrollbarStyles } from "../../Theme/tokens/builders/scrollbar.js";
+import { reducedMotionSx, usePrefersReducedMotion } from "../../Theme/chakra/motion.js";
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+import Skeletons from "../Skeletons/Skeletons.js";
+import MediaFrame from "./MediaFrame.js";
+import MediaThumb from "./MediaThumb.js";
+import MediaLightbox from "./MediaLightbox.js";
+import { GlassIconButton, GlassPill, glassStyles } from "./glass.js";
+import { CROSSFADE_MS, fadeIn } from "./motion.js";
+import { useContainerWidth } from "../Commerce/useContainerWidth.js";
+import { useMatchMedia } from "./useMatchMedia.js";
+import { clampIndex, frameKind, frameSignature, indexForKey, keyBelongsToTarget, resolveFrames } from "./mediaGalleryModel.js";
+import { defaultMediaGalleryLabels } from "./MediaGalleryProps.js";
+const WIDE_QUERY = "(min-width: 768px)";
+const WIDE_MIN_WIDTH = 560;
+const FINE_POINTER_QUERY = "(hover: hover) and (pointer: fine)";
+const MAX_DOTS = 8;
+const INNER_ZOOM = 2;
+const SETTLE_MS = 700;
+const HIDDEN_SCROLLBAR = { scrollbarWidth: "none", "&::-webkit-scrollbar": { display: "none" } };
+const revealWithin = (container, child, axis) => {
+    const [start, size, view] = axis === "x"
+        ? [child.offsetLeft, child.offsetWidth, container.clientWidth]
+        : [child.offsetTop, child.offsetHeight, container.clientHeight];
+    const key = axis === "x" ? "scrollLeft" : "scrollTop";
+    const at = container[key];
+    if (start < at)
+        container[key] = start;
+    else if (start + size > at + view)
+        container[key] = start + size - view;
+};
+const GallerySkeleton = ({ arrangement, aspectRatio, rounded, label }) => {
+    const rail = arrangement !== "swipe";
+    const vertical = arrangement === "thumbs-left";
+    return (_jsxs(Flex, { role: "status", "aria-label": label, direction: vertical ? "row" : "column", gap: 4, w: "100%", "data-testid": "media-gallery-skeleton", children: [rail && vertical && (_jsx(Flex, { direction: "column", gap: 3, w: "72px", flexShrink: 0, children: [0, 1, 2, 3].map((n) => (_jsx(Skeletons, { type: "skeleton", height: "90px", width: "72px", borderRadius: "xl" }, n))) })), _jsx(Box, { flex: 1, minW: 0, sx: { aspectRatio }, borderRadius: rounded ? "2xl" : 0, overflow: "hidden", children: _jsx(Skeletons, { type: "skeleton", height: "100%", width: "100%", borderRadius: "0" }) }), rail && !vertical && (_jsx(Flex, { gap: 3, children: [0, 1, 2, 3].map((n) => (_jsx(Skeletons, { type: "skeleton", height: "80px", width: "64px", borderRadius: "xl" }, n))) }))] }));
+};
+/** Product media carousel: scroll-snap track, thumbnail rail or dots, lightbox, colour-linked frame sets. */
+const MediaGallery = ({ media, layout = "auto", aspectRatio = "4/5", zoom = "lightbox", index, defaultIndex = 0, onIndexChange, activeMediaIds, badges, actions, sticky = false, stickyTop = 24, rounded, isLoading = false, labels: labelOverrides, lightboxLabels, "aria-label": ariaLabel, "data-testid": testId, }) => {
+    const { colors } = useCustomTheme();
+    const reduced = usePrefersReducedMotion();
+    const rootRef = useRef(null);
+    const containerWidth = useContainerWidth(rootRef);
+    const windowWide = useMatchMedia(WIDE_QUERY, false);
+    const wide = containerWidth === undefined ? windowWide : containerWidth >= WIDE_MIN_WIDTH;
+    const finePointer = useMatchMedia(FINE_POINTER_QUERY, false);
+    const labels = { ...defaultMediaGalleryLabels, ...labelOverrides };
+    const arrangement = layout === "auto" ? (wide ? "thumbs-left" : "swipe") : layout;
+    const isSwipe = arrangement === "swipe";
+    const squared = rounded === undefined ? isSwipe : !rounded;
+    const activeKey = JSON.stringify(activeMediaIds !== null && activeMediaIds !== void 0 ? activeMediaIds : null);
+    const frames = useMemo(() => { var _a; return resolveFrames(media, (_a = JSON.parse(activeKey)) !== null && _a !== void 0 ? _a : undefined); }, [media, activeKey]);
+    const signature = frameSignature(frames);
+    const count = frames.length;
+    const isControlled = index !== undefined;
+    const [ownIndex, setOwnIndex] = useState(defaultIndex);
+    const current = clampIndex(isControlled ? index : ownIndex, count);
+    const latest = useRef(current);
+    latest.current = current;
+    const onChangeRef = useRef(onIndexChange);
+    onChangeRef.current = onIndexChange;
+    const commit = (next) => {
+        var _a;
+        const target = clampIndex(next, count);
+        if (target === latest.current)
+            return;
+        latest.current = target;
+        if (!isControlled)
+            setOwnIndex(target);
+        (_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, target);
+    };
+    const commitRef = useRef(commit);
+    commitRef.current = commit;
+    const trackRef = useRef(null);
+    const railRef = useRef(null);
+    const settling = useRef(null);
+    const settleTimer = useRef();
+    const alignedTrack = useRef(null);
+    const lightboxReturn = useRef(null);
+    const [lightboxOpen, setLightboxOpen] = useState(false);
+    const [inner, setInner] = useState({ on: false, x: 50, y: 50 });
+    const [fadeKey, setFadeKey] = useState(0);
+    const seenSignature = useRef(signature);
+    useEffect(() => {
+        if (seenSignature.current === signature)
+            return;
+        seenSignature.current = signature;
+        setFadeKey((key) => key + 1);
+        commitRef.current(0);
+    }, [signature]);
+    useEffect(() => setInner((state) => (state.on ? { ...state, on: false } : state)), [current, signature]);
+    useEffect(() => () => window.clearTimeout(settleTimer.current), []);
+    useLayoutEffect(() => {
+        var _a;
+        const track = trackRef.current;
+        const width = (_a = track === null || track === void 0 ? void 0 : track.clientWidth) !== null && _a !== void 0 ? _a : 0;
+        if (!track || !width)
+            return;
+        const firstPass = alignedTrack.current !== track;
+        alignedTrack.current = track;
+        const left = current * width;
+        if (Math.abs(track.scrollLeft - left) < 2)
+            return;
+        settling.current = current;
+        window.clearTimeout(settleTimer.current);
+        settleTimer.current = window.setTimeout(() => {
+            settling.current = null;
+        }, SETTLE_MS);
+        if (firstPass || reduced || typeof track.scrollTo !== "function")
+            track.scrollLeft = left;
+        else
+            track.scrollTo({ left, behavior: "smooth" });
+    }, [current, fadeKey, arrangement, reduced]);
+    useEffect(() => {
+        const rail = railRef.current;
+        const selected = rail === null || rail === void 0 ? void 0 : rail.querySelector('[aria-current="true"]');
+        if (rail && selected)
+            revealWithin(rail, selected, arrangement === "thumbs-left" ? "y" : "x");
+    }, [current, fadeKey, arrangement]);
+    const onScroll = () => {
+        const track = trackRef.current;
+        if (!track || !track.clientWidth)
+            return;
+        const at = clampIndex(Math.round(track.scrollLeft / track.clientWidth), count);
+        if (settling.current !== null) {
+            if (at === settling.current)
+                settling.current = null;
+            return;
+        }
+        commit(at);
+    };
+    const onKeyDown = (event) => {
+        if (event.ctrlKey || event.metaKey || event.altKey || keyBelongsToTarget(event.target))
+            return;
+        const next = indexForKey(event.key, latest.current, count);
+        if (next === undefined)
+            return;
+        event.preventDefault();
+        commit(next);
+    };
+    const openLightbox = (event) => {
+        lightboxReturn.current = event.currentTarget;
+        setLightboxOpen(true);
+    };
+    const toggleInner = (event) => {
+        const box = event.currentTarget.getBoundingClientRect();
+        const x = box.width ? ((event.clientX - box.left) / box.width) * 100 : 50;
+        const y = box.height ? ((event.clientY - box.top) / box.height) * 100 : 50;
+        setInner((state) => ({ on: !state.on, x, y }));
+    };
+    const panInner = (event) => {
+        if (!inner.on || event.pointerType !== "mouse")
+            return;
+        const box = event.currentTarget.getBoundingClientRect();
+        if (!box.width || !box.height)
+            return;
+        setInner({ on: true, x: ((event.clientX - box.left) / box.width) * 100, y: ((event.clientY - box.top) / box.height) * 100 });
+    };
+    const ratio = aspectRatio.replace("/", " / ");
+    const radius = squared ? 0 : "2xl";
+    const showArrows = count > 1 && (finePointer || !isSwipe);
+    const showRail = count > 1 && !isSwipe;
+    const arrowSize = isSwipe ? 36 : 44;
+    const arrowInset = isSwipe ? 12 : 16;
+    const currentFrame = frames[current];
+    const zoomable = zoom !== "none" && currentFrame !== undefined && frameKind(currentFrame) === "image";
+    if (isLoading)
+        return _jsx(GallerySkeleton, { arrangement: arrangement, aspectRatio: ratio, rounded: !squared, label: labels.loading });
+    const thumbRing = { gap: colors.background[50], ink: colors.header[900] };
+    const thumbs = (width, height) => frames.map((frame, position) => (_jsx(MediaThumb, { media: frame, label: labels.frame(position + 1, count, frame.alt), selected: position === current, onSelect: () => commit(position), width: width, height: height, ring: thumbRing }, frame.id)));
+    const glassDots = glassStyles(colors);
+    const focusInset = { outline: "2px solid transparent", boxShadow: `inset 0 0 0 2px ${colors.focusRing.halo}, inset 0 0 0 4px ${colors.focusRing.ring}` };
+    const well = (_jsxs(Box, { position: "relative", flex: 1, minW: 0, overflow: "hidden", isolation: "isolate", borderRadius: radius, bg: colors.background[100], sx: { aspectRatio: ratio }, "data-testid": "media-gallery-well", children: [_jsxs(Flex, { ref: trackRef, position: "absolute", inset: 0, tabIndex: 0, role: "group", "aria-label": labels.region, overflowX: "auto", overflowY: "hidden", animation: fadeKey > 0 ? fadeIn(CROSSFADE_MS) : undefined, onScroll: onScroll, onPointerDown: () => {
+                    settling.current = null;
+                }, outline: "none", _focusVisible: focusInset, sx: {
+                    scrollSnapType: "x mandatory",
+                    overscrollBehaviorX: "contain",
+                    ...HIDDEN_SCROLLBAR,
+                    ...reducedMotionSx(),
+                }, "data-testid": "media-gallery-track", children: [frames.map((frame, position) => {
+                        var _a;
+                        const isCurrent = position === current;
+                        const kind = frameKind(frame);
+                        const alt = (_a = frame.alt) !== null && _a !== void 0 ? _a : labels.image(position + 1, count);
+                        const view = (_jsx(MediaFrame, { media: frame, alt: alt, active: isCurrent, eager: Math.abs(position - current) <= 1, zoom: zoom === "inner" && isCurrent && inner.on ? { scale: INNER_ZOOM, x: inner.x, y: inner.y } : undefined, playLabel: labels.playVideo, unavailableLabel: labels.imageUnavailable }));
+                        const interactive = zoom !== "none" && kind === "image";
+                        return (_jsx(Box, { role: "group", "aria-roledescription": "slide", "aria-label": labels.slide(position + 1, count), "aria-hidden": isCurrent ? undefined : true, flex: "0 0 100%", h: "100%", position: "relative", opacity: reduced && !isCurrent ? 0 : 1, transition: reduced ? transitionFor(["opacity"], "fast") : undefined, sx: { scrollSnapAlign: "start", scrollSnapStop: "always" }, children: interactive ? (_jsx(Box, { as: "button", type: "button", w: "100%", h: "100%", p: 0, border: "0", bg: "transparent", display: "block", overflow: "hidden", cursor: "zoom-in", tabIndex: isCurrent ? 0 : -1, "aria-label": zoom === "lightbox" ? labels.openLightbox(position + 1, count) : labels.zoomImage(position + 1, count), "aria-haspopup": zoom === "lightbox" ? "dialog" : undefined, "aria-pressed": zoom === "inner" ? isCurrent && inner.on : undefined, onClick: zoom === "lightbox" ? openLightbox : toggleInner, onPointerMove: zoom === "inner" ? panInner : undefined, outline: "none", _focusVisible: focusInset, sx: { cursor: zoom === "inner" && inner.on ? "zoom-out" : "zoom-in" }, children: view })) : (view) }, frame.id));
+                    }), count === 0 && _jsx(Box, { flex: "0 0 100%", bg: colors.background[100] })] }, fadeKey), badges && (_jsx(Box, { position: "absolute", top: 3, left: 3, zIndex: 2, pointerEvents: "none", "data-testid": "media-gallery-badges", children: badges })), actions && (_jsx(Box, { position: "absolute", top: 3, right: 3, zIndex: 3, "data-testid": "media-gallery-actions", children: actions })), showArrows && (_jsxs(_Fragment, { children: [_jsx(GlassIconButton, { label: labels.previous, icon: _jsx(ChevronLeft, { size: arrowSize / 2, "aria-hidden": true }), onClick: () => commit(current - 1), isDisabled: current === 0, size: arrowSize, left: `${arrowInset}px`, top: `calc(50% - ${arrowSize / 2}px)`, zIndex: 2 }), _jsx(GlassIconButton, { label: labels.next, icon: _jsx(ChevronRight, { size: arrowSize / 2, "aria-hidden": true }), onClick: () => commit(current + 1), isDisabled: current === count - 1, size: arrowSize, right: `${arrowInset}px`, top: `calc(50% - ${arrowSize / 2}px)`, zIndex: 2 })] })), count > 1 && isSwipe && count <= MAX_DOTS && (_jsx(Flex, { role: "group", "aria-label": labels.dots, position: "absolute", left: "50%", bottom: 4, transform: "translateX(-50%)", zIndex: 2, h: "28px", px: 1.5, align: "center", borderRadius: "full", ...glassDots, "data-testid": "media-gallery-dots", children: frames.map((frame, position) => {
+                    const selected = position === current;
+                    return (_jsx(Box, { as: "button", type: "button", onClick: () => commit(position), "aria-label": labels.image(position + 1, count), "aria-current": selected ? "true" : undefined, display: "inline-flex", alignItems: "center", justifyContent: "center", h: "28px", w: selected ? "30px" : "20px", p: 0, border: "0", bg: "transparent", cursor: "pointer", transition: transitionFor(["width"]), borderRadius: "full", sx: { ...focusVisibleStyles(colors), ...reducedMotionSx() }, children: _jsx(Box, { as: "span", boxSize: "6px", borderRadius: "full", bg: "currentColor", opacity: selected ? 0.92 : 0.3, transform: selected ? "scaleX(2.4)" : "scaleX(1)", transition: transitionFor(["transform", "opacity"]) }) }, frame.id));
+                }) })), count > 1 && (_jsx(GlassPill, { ...(isSwipe ? { right: 4, bottom: "19px", height: 22 } : { left: 4, bottom: 4, height: 32 }), zIndex: 2, children: _jsx("span", { "aria-live": "polite", "data-testid": "media-gallery-counter", children: labels.counter(current + 1, count) }) })), !isSwipe && finePointer && zoomable && zoom === "lightbox" && (_jsxs(GlassPill, { right: 4, bottom: 4, height: 32, zIndex: 2, children: [_jsx(ZoomIn, { size: 14, "aria-hidden": true }), _jsx(Text, { as: "span", children: labels.zoomHint })] }))] }));
+    const rail = showRail &&
+        (arrangement === "thumbs-left" ? (_jsx(Box, { position: "relative", w: "72px", flexShrink: 0, alignSelf: "stretch", "data-testid": "media-gallery-rail", children: _jsx(Flex, { ref: railRef, role: "group", "aria-label": labels.thumbnails, position: "absolute", inset: "-4px", p: "4px", direction: "column", gap: 3, overflowY: "auto", overflowX: "hidden", animation: fadeKey > 0 ? fadeIn(CROSSFADE_MS) : undefined, sx: { ...scrollbarStyles(colors, "hover"), ...reducedMotionSx() }, children: thumbs(72, 90) }, fadeKey) })) : (_jsx(Flex, { ref: railRef, role: "group", "aria-label": labels.thumbnails, gap: 3, m: "-4px", p: "4px", overflowX: "auto", animation: fadeKey > 0 ? fadeIn(CROSSFADE_MS) : undefined, sx: { ...scrollbarStyles(colors, "hover"), ...reducedMotionSx() }, "data-testid": "media-gallery-rail", children: thumbs(64, 80) }, fadeKey)));
+    return (_jsxs(_Fragment, { children: [_jsx(Box, { ref: rootRef, role: "region", "aria-roledescription": "carousel", "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : labels.region, onKeyDown: onKeyDown, w: "100%", position: sticky ? "sticky" : "relative", top: sticky ? `${stickyTop}px` : undefined, alignSelf: sticky ? "flex-start" : undefined, "data-testid": testId, children: _jsxs(Flex, { direction: arrangement === "thumbs-left" ? "row" : "column", gap: 4, align: arrangement === "thumbs-left" ? "stretch" : undefined, children: [arrangement === "thumbs-left" && rail, well, arrangement === "thumbs-below" && rail] }) }), _jsx(MediaLightbox, { isOpen: lightboxOpen, onClose: () => setLightboxOpen(false), items: frames, index: current, onIndexChange: commit, finalFocusRef: lightboxReturn, labels: lightboxLabels })] }));
+};
+export default MediaGallery;

package/dist/esm/Components/MediaGallery/MediaGalleryProps.js

@@ -0,0 +1,17 @@
+export const defaultMediaGalleryLabels = {
+    region: "Product images",
+    slide: (position, total) => `${position} of ${total}`,
+    image: (position, total) => `Image ${position} of ${total}`,
+    frame: (position, total, alt) => `Image ${position} of ${total}${alt ? `: ${alt}` : ""}`,
+    previous: "Previous image",
+    next: "Next image",
+    dots: "Choose an image",
+    thumbnails: "Image thumbnails",
+    counter: (position, total) => `${position} / ${total}`,
+    zoomHint: "Click to zoom",
+    openLightbox: (position, total) => `View image ${position} of ${total} full screen`,
+    zoomImage: (position, total) => `Zoom image ${position} of ${total}`,
+    playVideo: "Play video",
+    imageUnavailable: "Image unavailable",
+    loading: "Loading product images",
+};

package/dist/esm/Components/MediaGallery/MediaLightbox.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { Box, Flex, Text } from "@chakra-ui/react";
+import { ChevronLeft, ChevronRight, X } from "lucide-react";
+import Modal, { ModalBody } from "../Modal/Modal.js";
+import ViewerIconButton from "../MediaViewer/components/ViewerIconButton.js";
+import { useViewerChrome } from "../MediaViewer/useViewerChrome.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { overlayScrim } from "../../Theme/tokens/builders/scrim.js";
+import { fullViewportHeight } from "../../Theme/tokens/builders/viewportHeight.js";
+import { reducedMotionSx, usePrefersReducedMotion } from "../../Theme/chakra/motion.js";
+import MediaFrame from "./MediaFrame.js";
+import MediaThumb from "./MediaThumb.js";
+import { fadeIn } from "./motion.js";
+import { clampIndex, indexForKey, keyBelongsToTarget } from "./mediaGalleryModel.js";
+import { defaultMediaLightboxLabels } from "./MediaLightboxProps.js";
+const SWIPE_MIN_PX = 50;
+/** Full-screen product media viewer: counter and close on top, arrows, thumbnail row, Esc and arrow keys. */
+const MediaLightbox = ({ isOpen, onClose, items, index, defaultIndex = 0, onIndexChange, finalFocusRef, labels: labelOverrides, }) => {
+    var _a;
+    const { colors } = useCustomTheme();
+    const chrome = useViewerChrome();
+    const reduced = usePrefersReducedMotion();
+    const labels = { ...defaultMediaLightboxLabels, ...labelOverrides };
+    const isControlled = index !== undefined;
+    const [own, setOwn] = useState(defaultIndex);
+    const total = items.length;
+    const current = clampIndex(isControlled ? index : own, total);
+    const latest = useRef(current);
+    latest.current = current;
+    const stageRef = useRef(null);
+    const stripRef = useRef(null);
+    const touchStartX = useRef(null);
+    const go = (next) => {
+        const target = clampIndex(next, total);
+        if (target === latest.current)
+            return;
+        latest.current = target;
+        if (!isControlled)
+            setOwn(target);
+        onIndexChange === null || onIndexChange === void 0 ? void 0 : onIndexChange(target);
+    };
+    useEffect(() => {
+        const strip = stripRef.current;
+        const selected = strip === null || strip === void 0 ? void 0 : strip.querySelector('[aria-current="true"]');
+        if (!strip || !selected)
+            return;
+        const left = selected.offsetLeft - strip.clientWidth / 2 + selected.offsetWidth / 2;
+        strip.scrollLeft = Math.max(0, left);
+    }, [current, isOpen]);
+    const onKeyDown = (event) => {
+        if (event.ctrlKey || event.metaKey || event.altKey || keyBelongsToTarget(event.target))
+            return;
+        const next = indexForKey(event.key, latest.current, total);
+        if (next === undefined)
+            return;
+        event.preventDefault();
+        go(next);
+    };
+    const onTouchEnd = (event) => {
+        const start = touchStartX.current;
+        touchStartX.current = null;
+        if (start === null)
+            return;
+        const dx = event.changedTouches[0].clientX - start;
+        if (Math.abs(dx) > SWIPE_MIN_PX)
+            go(latest.current + (dx < 0 ? 1 : -1));
+    };
+    const item = items[current];
+    if (!item)
+        return null;
+    const alt = (_a = item.alt) !== null && _a !== void 0 ? _a : labels.image(current + 1, total);
+    const bar = { bg: overlayScrim(colors), color: chrome.ink };
+    return (_jsx(Modal, { isOpen: isOpen, onClose: onClose, size: "full", hideCloseButton: true, motionPreset: reduced ? "none" : "scale", initialFocusRef: stageRef, finalFocusRef: finalFocusRef, overlaybg: overlayScrim(colors), contentProps: { bg: chrome.stage, m: 0, borderRadius: 0, "aria-label": labels.dialog }, children: _jsxs(ModalBody, { p: 0, display: "flex", flexDirection: "column", sx: fullViewportHeight, children: [_jsxs(Flex, { align: "center", justify: "space-between", gap: 2, px: 4, py: 2, ...bar, "data-testid": "media-lightbox-bar", children: [_jsx(Text, { as: "span", fontSize: "sm", fontWeight: 600, "aria-live": "polite", sx: { fontVariantNumeric: "tabular-nums" }, children: labels.counter(current + 1, total) }), _jsx(ViewerIconButton, { label: labels.close, icon: _jsx(X, { size: 20, "aria-hidden": true }), onClick: onClose, testId: "media-lightbox-close" })] }), _jsxs(Box, { ref: stageRef, tabIndex: -1, flex: 1, minH: 0, position: "relative", outline: "none", onKeyDown: onKeyDown, onTouchStart: (event) => {
+                        touchStartX.current = event.touches.length === 1 ? event.touches[0].clientX : null;
+                    }, onTouchEnd: onTouchEnd, "data-testid": "media-lightbox-stage", children: [_jsx(Box, { position: "absolute", inset: { base: 0, md: 6 }, animation: fadeIn(), sx: reducedMotionSx(), children: _jsx(MediaFrame, { media: item, alt: alt, fit: "contain", autoPlay: true, surface: "transparent", playLabel: labels.playVideo, unavailableLabel: labels.imageUnavailable }) }, item.id), total > 1 && (_jsxs(_Fragment, { children: [_jsx(Box, { position: "absolute", left: { base: 2, md: 4 }, top: "calc(50% - 20px)", zIndex: 2, children: _jsx(ViewerIconButton, { label: labels.previous, icon: _jsx(ChevronLeft, { size: 24, "aria-hidden": true }), onClick: () => go(current - 1), isDisabled: current === 0, round: true, testId: "media-lightbox-prev" }) }), _jsx(Box, { position: "absolute", right: { base: 2, md: 4 }, top: "calc(50% - 20px)", zIndex: 2, children: _jsx(ViewerIconButton, { label: labels.next, icon: _jsx(ChevronRight, { size: 24, "aria-hidden": true }), onClick: () => go(current + 1), isDisabled: current === total - 1, round: true, testId: "media-lightbox-next" }) })] }))] }), total > 1 && (_jsx(Flex, { as: "nav", "aria-label": labels.thumbnails, ...bar, py: 3, px: 4, justify: "center", children: _jsx(Flex, { ref: stripRef, gap: 3, p: "4px", maxW: "100%", overflowX: "auto", onKeyDown: onKeyDown, "data-testid": "media-lightbox-thumbs", children: items.map((frame, position) => (_jsx(MediaThumb, { media: frame, label: labels.frame(position + 1, total, frame.alt), selected: position === current, onSelect: () => go(position), width: 56, height: 70, ring: { gap: chrome.stage, ink: chrome.ink }, surface: chrome.raised }, frame.id))) }) }))] }) }));
+};
+export default MediaLightbox;

package/dist/esm/Components/MediaGallery/MediaLightboxProps.js

@@ -0,0 +1,12 @@
+export const defaultMediaLightboxLabels = {
+    dialog: "Product images",
+    close: "Close",
+    previous: "Previous image",
+    next: "Next image",
+    counter: (position, total) => `${position} / ${total}`,
+    thumbnails: "Image thumbnails",
+    frame: (position, total, alt) => `Image ${position} of ${total}${alt ? `: ${alt}` : ""}`,
+    image: (position, total) => `Image ${position} of ${total}`,
+    playVideo: "Play video",
+    imageUnavailable: "Image unavailable",
+};

package/dist/esm/Components/MediaGallery/MediaThumb.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+import { Box, Flex } from "@chakra-ui/react";
+import { Play, Video } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { overlayScrim } from "../../Theme/tokens/builders/scrim.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+import { frameThumb } from "./mediaGalleryModel.js";
+/** Selectable thumbnail: ring and full opacity when current, `aria-current` for assistive tech. */
+const MediaThumb = ({ media, label, selected, onSelect, width, height, ring, surface }) => {
+    const { colors } = useCustomTheme();
+    const [loaded, setLoaded] = useState(false);
+    const [failed, setFailed] = useState(false);
+    const src = frameThumb(media);
+    const settle = useCallback((node) => {
+        if (node && node.complete && node.naturalWidth > 0)
+            setLoaded(true);
+    }, []);
+    return (_jsxs(Box, { as: "button", type: "button", onClick: onSelect, "aria-label": label, "aria-current": selected ? "true" : undefined, position: "relative", flexShrink: 0, w: `${width}px`, h: `${height}px`, p: 0, border: "0", borderRadius: "xl", overflow: "hidden", cursor: "pointer", bg: surface !== null && surface !== void 0 ? surface : colors.background[100], opacity: selected ? 1 : 0.72, boxShadow: selected ? `0 0 0 2px ${ring.gap}, 0 0 0 4px ${ring.ink}` : "none", transition: transitionFor(["box-shadow", "opacity", "transform"]), _hover: { opacity: 1, transform: "translateY(-1px)" }, sx: { ...focusVisibleStyles(colors), ...reducedMotionSx({ transform: "none" }) }, children: [src && !failed ? (_jsx(Box, { as: "img", ref: settle, src: src, alt: "", loading: "lazy", decoding: "async", draggable: false, onLoad: () => setLoaded(true), onError: () => setFailed(true), position: "absolute", inset: 0, w: "100%", h: "100%", objectFit: "cover", opacity: loaded ? 1 : 0, transition: transitionFor(["opacity"], "base") })) : (_jsx(Flex, { position: "absolute", inset: 0, align: "center", justify: "center", color: colors.textMuted, "aria-hidden": true, children: _jsx(Video, { size: 20 }) })), media.type === "video" && (_jsx(Flex, { position: "absolute", inset: 0, align: "center", justify: "center", color: colors.white, "aria-hidden": true, children: _jsx(Flex, { boxSize: 6, align: "center", justify: "center", borderRadius: "full", bg: overlayScrim(colors), children: _jsx(Play, { size: 12, fill: "currentColor" }) }) }))] }));
+};
+export default MediaThumb;

package/dist/esm/Components/MediaGallery/glass.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Box, Flex } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { hexToRgb } from "../../Theme/tokens/builders/color.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+const GLASS_ALPHA = 0.72;
+const GLASS_ALPHA_HOVER = 0.9;
+const BLUR = "blur(20px) saturate(180%)";
+const NO_BLUR_SUPPORT = "@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)))";
+const tint = (colors, alpha) => {
+    const { r, g, b } = hexToRgb(colors.background[50]);
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+};
+/** Translucent surface over a photo: the page canvas at 72%, blurred, opaque where blur is unsupported. */
+export const glassStyles = (colors, hover = false) => ({
+    bg: tint(colors, hover ? GLASS_ALPHA_HOVER : GLASS_ALPHA),
+    color: colors.header[900],
+    backdropFilter: BLUR,
+    sx: { WebkitBackdropFilter: BLUR, [NO_BLUR_SUPPORT]: { backgroundColor: colors.background[50] } },
+});
+/** 36 or 44 px glass circle with a 44 px hit area; fades out instead of unmounting when disabled. */
+export const GlassIconButton = forwardRef(({ label, icon, onClick, size = 36, isDisabled = false, tabIndex, ...placement }, ref) => {
+    const { colors } = useCustomTheme();
+    const glass = glassStyles(colors);
+    const reach = Math.max(0, (44 - size) / 2);
+    return (_jsx(Box, { as: "button", ref: ref, type: "button", "aria-label": label, onClick: onClick, disabled: isDisabled, tabIndex: tabIndex, display: "inline-flex", alignItems: "center", justifyContent: "center", w: `${size}px`, h: `${size}px`, borderRadius: "full", position: "absolute", flexShrink: 0, cursor: "pointer", opacity: isDisabled ? 0 : 1, pointerEvents: isDisabled ? "none" : "auto", transition: transitionFor(["opacity", "background-color"]), _hover: { bg: tint(colors, GLASS_ALPHA_HOVER) }, ...glass, sx: {
+            ...glass.sx,
+            ...focusVisibleStyles(colors),
+            "&::after": { content: '""', position: "absolute", inset: `-${reach}px` },
+            ...reducedMotionSx(),
+        }, ...placement, children: icon }));
+});
+GlassIconButton.displayName = "GlassIconButton";
+/** Non-interactive glass capsule for the counter and zoom hint. */
+export const GlassPill = ({ children, height = 28, ...placement }) => {
+    const { colors } = useCustomTheme();
+    const glass = glassStyles(colors);
+    return (_jsx(Flex, { align: "center", gap: 1.5, h: `${height}px`, px: 3, borderRadius: "full", position: "absolute", fontSize: "xs", fontWeight: 600, pointerEvents: "none", whiteSpace: "nowrap", ...glass, sx: { ...glass.sx, fontVariantNumeric: "tabular-nums" }, ...placement, children: children }));
+};