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

package/dist/Components/PdfViewer/PdfViewer.d.ts

@@ -1,15 +1,32 @@
 import React from "react";
+/** Visible strings; every key falls back to its English default. */
+export type PdfViewerLabels = Partial<{
+    open: string;
+    download: string;
+    unsupported: string;
+    failed: string;
+}>;
 export interface PdfViewerProps {
-    /** Rendered via a native browser <embed> — no fallback UI if the browser can't show PDFs inline. */
-    pdfUrl: string;
-    /** File name shown in the toolbar. */
+    /** URL of the PDF, rendered via a native browser <embed>; pass exactly one of `pdfUrl` / `getBlob`. */
+    pdfUrl?: string;
+    /** Source as a blob getter instead of a URL — for authed files; the viewer makes and revokes the object URL. */
+    getBlob?: () => Promise<Blob>;
+    /** File name shown in the toolbar and used as the download name. */
     fileName?: string;
     /** Height of the embed. */
     height?: string;
-    /** Show the toolbar (name + open + download). */
+    /** Show the toolbar (name + open + download); set false when the caller renders its own file actions. */
     showToolbar?: boolean;
     /** Border radius of the frame. */
     borderRadius?: string;
+    /** What shows when inline PDF is unsupported or loading failed. Default: message + Open + Download. */
+    fallback?: React.ReactNode;
+    /** Fires when the embed loads; in blob mode, when the file bytes are ready (<embed> has no reliable load event). */
+    onLoad?: () => void;
+    /** Fires when `getBlob` rejects or an on-demand Open/Download fetch fails. */
+    onError?: (error: unknown) => void;
+    labels?: PdfViewerLabels;
+    "data-testid"?: string;
 }
 /** Always-inline PDF embed panel (never a modal) — for a modal previewer of images/video/other too, use FilePreview. */
 declare const PdfViewer: React.FC<PdfViewerProps>;

package/dist/Components/PdfViewer/PdfViewer.js

@@ -4,18 +4,139 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("@chakra-ui/react");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
+const Button_1 = __importDefault(require("../Button/Button"));
+const Skeletons_1 = __importDefault(require("../Skeletons/Skeletons"));
 const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
+const DEFAULT_LABELS = {
+    open: "Open in new tab",
+    download: "Download",
+    unsupported: "This browser can't display PDFs inline. Open or download the file instead.",
+    failed: "The document could not be loaded.",
+};
+const canEmbedPdf = () => typeof navigator === "undefined" || navigator.pdfViewerEnabled !== false;
+const asPdf = (blob) => (blob.type ? blob : new Blob([blob], { type: "application/pdf" }));
 /** Always-inline PDF embed panel (never a modal) — for a modal previewer of images/video/other too, use FilePreview. */
-const PdfViewer = ({ pdfUrl, fileName = "Document.pdf", height = "480px", showToolbar = true, borderRadius = "xl", }) => {
+const PdfViewer = ({ pdfUrl, getBlob, fileName = "Document.pdf", height = "480px", showToolbar = true, borderRadius = "xl", fallback, onLoad, onError, labels, "data-testid": testId, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const text = { ...DEFAULT_LABELS, ...labels };
     const toolbarSurface = theme.colors.background[50];
     const iconHoverInk = (0, accentText_1.accentTextOnCanvas)(theme.colors.primary, toolbarSurface);
     const iconHoverBg = (0, rowStates_1.listRowBackgrounds)(theme.colors).active;
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { border: "1px solid", borderColor: theme.colors.gray[200], borderRadius: borderRadius, overflow: "hidden", bg: theme.colors.background[50], children: [showToolbar && ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", justify: "space-between", px: 4, py: 2.5, borderBottom: "1px solid", borderColor: theme.colors.gray[100], bg: theme.colors.background[50], children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 2, minW: 0, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.FileText, { size: 18, color: theme.colors.accentText }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", fontWeight: 500, color: theme.colors.gray[700], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: fileName })] }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 1, children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Open in new tab", placement: "top", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "a", href: pdfUrl, target: "_blank", rel: "noopener noreferrer", "aria-label": `Open ${fileName} in a new tab`, p: 2, borderRadius: "lg", color: theme.colors.gray[600], _hover: { bg: iconHoverBg, color: iconHoverInk }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { size: 16 }) }) }), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Download", placement: "top", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "a", href: pdfUrl, download: fileName, "aria-label": `Download ${fileName}`, p: 2, borderRadius: "lg", color: theme.colors.gray[600], _hover: { bg: iconHoverBg, color: iconHoverInk }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 16 }) }) })] })] })), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "embed", src: pdfUrl, type: "application/pdf", width: "100%", height: height, display: "block" })] }));
+    const supported = canEmbedPdf();
+    const isBlobMode = Boolean(getBlob);
+    const getBlobRef = (0, react_1.useRef)(getBlob);
+    const onLoadRef = (0, react_1.useRef)(onLoad);
+    const onErrorRef = (0, react_1.useRef)(onError);
+    getBlobRef.current = getBlob;
+    onLoadRef.current = onLoad;
+    onErrorRef.current = onError;
+    const [status, setStatus] = (0, react_1.useState)(isBlobMode && supported ? "loading" : "idle");
+    const [objectUrl, setObjectUrl] = (0, react_1.useState)(null);
+    const tempUrls = (0, react_1.useRef)([]);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (!isBlobMode || !supported)
+            return undefined;
+        let cancelled = false;
+        let created = null;
+        setStatus("loading");
+        setObjectUrl(null);
+        (_a = getBlobRef.current) === null || _a === void 0 ? void 0 : _a.call(getBlobRef).then((blob) => {
+            var _a;
+            if (cancelled)
+                return;
+            created = URL.createObjectURL(asPdf(blob));
+            setObjectUrl(created);
+            setStatus("ready");
+            (_a = onLoadRef.current) === null || _a === void 0 ? void 0 : _a.call(onLoadRef);
+        }, (error) => {
+            var _a;
+            if (cancelled)
+                return;
+            setStatus("error");
+            (_a = onErrorRef.current) === null || _a === void 0 ? void 0 : _a.call(onErrorRef, error);
+        });
+        return () => {
+            cancelled = true;
+            if (created)
+                URL.revokeObjectURL(created);
+        };
+    }, [isBlobMode, supported]);
+    (0, react_1.useEffect)(() => () => {
+        tempUrls.current.forEach((url) => URL.revokeObjectURL(url));
+        tempUrls.current = [];
+    }, []);
+    const makeTempUrl = (0, react_1.useCallback)((blob) => {
+        const url = URL.createObjectURL(asPdf(blob));
+        tempUrls.current.push(url);
+        return url;
+    }, []);
+    const openBlob = () => {
+        var _a;
+        if (objectUrl) {
+            window.open(objectUrl, "_blank", "noopener");
+            return;
+        }
+        const tab = window.open("", "_blank");
+        (_a = getBlobRef.current) === null || _a === void 0 ? void 0 : _a.call(getBlobRef).then((blob) => {
+            const url = makeTempUrl(blob);
+            if (tab)
+                tab.location.href = url;
+            else
+                window.location.assign(url);
+        }, (error) => {
+            var _a;
+            tab === null || tab === void 0 ? void 0 : tab.close();
+            (_a = onErrorRef.current) === null || _a === void 0 ? void 0 : _a.call(onErrorRef, error);
+        });
+    };
+    const downloadBlob = () => {
+        var _a;
+        (_a = getBlobRef.current) === null || _a === void 0 ? void 0 : _a.call(getBlobRef).then((blob) => {
+            const link = document.createElement("a");
+            link.href = makeTempUrl(blob);
+            link.download = fileName;
+            document.body.appendChild(link);
+            link.click();
+            link.remove();
+        }, (error) => { var _a; return (_a = onErrorRef.current) === null || _a === void 0 ? void 0 : _a.call(onErrorRef, error); });
+    };
+    const toolbarLabel = (kind) => {
+        if (labels === null || labels === void 0 ? void 0 : labels[kind])
+            return `${labels[kind]} ${fileName}`;
+        return kind === "open" ? `Open ${fileName} in a new tab` : `Download ${fileName}`;
+    };
+    const actionStyle = {
+        p: 2,
+        borderRadius: "lg",
+        color: theme.colors.gray[600],
+        _hover: { bg: iconHoverBg, color: iconHoverInk },
+    };
+    const openAction = isBlobMode ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", onClick: openBlob, "aria-label": toolbarLabel("open"), ...actionStyle, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { size: 16, "aria-hidden": "true" }) })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "a", href: pdfUrl, target: "_blank", rel: "noopener noreferrer", "aria-label": toolbarLabel("open"), ...actionStyle, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { size: 16, "aria-hidden": "true" }) }));
+    const downloadAction = isBlobMode && !objectUrl ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", onClick: downloadBlob, "aria-label": toolbarLabel("download"), ...actionStyle, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 16, "aria-hidden": "true" }) })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "a", href: objectUrl !== null && objectUrl !== void 0 ? objectUrl : pdfUrl, download: fileName, "aria-label": toolbarLabel("download"), ...actionStyle, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 16, "aria-hidden": "true" }) }));
+    const showFallback = !supported || status === "error";
+    const isLoading = isBlobMode && supported && status === "loading";
+    const renderFallback = () => {
+        if (fallback !== undefined)
+            return fallback;
+        return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", align: "flex-start", gap: 3, p: 4, "data-testid": "pdf-fallback", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { role: "status", fontSize: "sm", color: theme.colors.textMuted, children: supported ? text.failed : text.unsupported }), !showToolbar && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { gap: 2, wrap: "wrap", children: [(0, jsx_runtime_1.jsx)(Button_1.default, { variant: "outline", colorScheme: "gray", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { size: 16, "aria-hidden": "true" }), label: text.open, onClick: isBlobMode ? openBlob : () => window.open(pdfUrl, "_blank", "noopener"), "data-testid": "pdf-open" }), (0, jsx_runtime_1.jsx)(Button_1.default, { variant: "outline", colorScheme: "gray", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 16, "aria-hidden": "true" }), label: text.download, onClick: isBlobMode ? downloadBlob : directDownload(pdfUrl, fileName), "data-testid": "pdf-download" })] }))] }));
+    };
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { border: "1px solid", borderColor: theme.colors.gray[200], borderRadius: borderRadius, overflow: "hidden", bg: theme.colors.background[50], "data-testid": testId, children: [showToolbar && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", px: 4, py: 2.5, borderBottom: "1px solid", borderColor: theme.colors.gray[100], bg: theme.colors.background[50], children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, minW: 0, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.FileText, { size: 18, color: theme.colors.accentText, "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", fontWeight: 500, color: theme.colors.gray[700], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: fileName })] }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 1, children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: text.open, placement: "top", children: openAction }), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: text.download, placement: "top", children: downloadAction })] })] })), showFallback ? (renderFallback()) : isLoading ? ((0, jsx_runtime_1.jsx)(react_2.Box, { "aria-busy": "true", "data-testid": "pdf-loading", children: (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: height, width: "100%", borderRadius: "0" }) })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "embed", src: objectUrl !== null && objectUrl !== void 0 ? objectUrl : pdfUrl, type: "application/pdf", title: fileName, onLoad: isBlobMode ? undefined : () => { var _a; return (_a = onLoadRef.current) === null || _a === void 0 ? void 0 : _a.call(onLoadRef); }, width: "100%", height: height, display: "block" }))] }));
+};
+const directDownload = (url, fileName) => () => {
+    if (!url)
+        return;
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = fileName;
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
 };
 exports.default = PdfViewer;

package/dist/Components/ProductCard/ProductCard.js

@@ -18,6 +18,7 @@ const StockStatus_1 = __importDefault(require("../StockStatus/StockStatus"));
 const WishlistToggle_1 = __importDefault(require("../WishlistToggle/WishlistToggle"));
 const optionInk_1 = require("../OptionChip/optionInk");
 const cardLabels_1 = require("./cardLabels");
+const useMatchMedia_1 = require("../../Hooks/useMatchMedia");
 const cardMetrics_1 = require("./cardMetrics");
 const productCardModel_1 = require("./productCardModel");
 const ProductCardAction_1 = __importDefault(require("./ProductCardAction"));
@@ -35,6 +36,7 @@ const ProductCard = (props) => {
     const reduced = (0, motion_2.usePrefersReducedMotion)();
     const titleId = (0, react_1.useId)();
     const [sheetOpen, setSheetOpen] = (0, react_1.useState)(false);
+    const [sheetMounted, setSheetMounted] = (0, react_1.useState)(false);
     const [picked, setPicked] = (0, react_1.useState)(null);
     const [previewed, setPreviewed] = (0, react_1.useState)(null);
     const [innerQuantity, setInnerQuantity] = (0, react_1.useState)(0);
@@ -71,8 +73,10 @@ const ProductCard = (props) => {
     const press = () => {
         if (action === "notify")
             onNotify === null || onNotify === void 0 ? void 0 : onNotify();
-        else if (action === "options")
+        else if (action === "options") {
+            setSheetMounted(true);
             setSheetOpen(true);
+        }
         else
             add();
     };
@@ -89,7 +93,8 @@ const ProductCard = (props) => {
     const slotted = horizontal ? ((0, jsx_runtime_1.jsx)(react_2.Box, { "data-control": true, position: "relative", zIndex: 2, children: actions })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { "data-control": true, position: "absolute", right: m.actionInset, bottom: m.actionInset, zIndex: 2, children: actions }));
     const control = actions ? slotted : defaultControl;
     const wishlist = ((0, jsx_runtime_1.jsx)(WishlistToggle_1.default, { variant: horizontal ? "soft" : "glass", size: "md", label: copy.save(title), selected: wishlisted, onSelectedChange: onWishlistChange }));
-    const hoverFrame = previewed === null ? frames[1] : undefined;
+    const canHover = (0, useMatchMedia_1.useMatchMedia)(cardMetrics_1.FINE_POINTER_QUERY, true);
+    const hoverFrame = previewed === null && canHover ? frames[1] : undefined;
     const pressable = interactive && !reduced;
     const ink = (0, optionInk_1.optionInk)(colors).selected;
     const metaLine = meta !== null && meta !== void 0 ? meta : (left !== undefined ? (0, jsx_runtime_1.jsx)(StockStatus_1.default, { status: "low-stock", count: left, size: "sm" }) : null);
@@ -110,7 +115,7 @@ const ProductCard = (props) => {
                                 outline: "none",
                                 "&::after": { content: '""', position: "absolute", inset: 0, zIndex: 1, borderRadius: cardMetrics_1.MEDIA_RADIUS },
                                 "&:focus-visible::after": (0, focusRing_styles_1.focusVisibleRing)(colors),
-                            }, children: title })) : (title) }), selected ? (0, jsx_runtime_1.jsx)(react_2.VisuallyHidden, { children: copy.selected }) : null, rating !== undefined && rating > 0 ? ((0, jsx_runtime_1.jsx)(Rating_1.default, { value: rating, count: ratingCount, size: "xs", compactCount: true })) : horizontal ? null : ((0, jsx_runtime_1.jsx)(react_2.Box, { minH: "1rem", "aria-hidden": true })), (0, jsx_runtime_1.jsx)(PriceBlock_1.default, { size: m.price, price: price, mrp: soldOut ? undefined : mrp, priceRange: range, unitPrice: unitPrice, currency: currency, locale: locale }), soldOut ? (0, jsx_runtime_1.jsx)(StockStatus_1.default, { status: "out-of-stock", message: copy.soldOut, size: "sm" }) : null, metaLine, swatchAxis && activeId ? ((0, jsx_runtime_1.jsx)(ProductCardSwatches_1.default, { axis: swatchAxis, limit: swatchLimit, dot: m.dot, activeId: activeId, soldOutIds: soldOutValues, labels: copy, onPreview: setPreviewed, onPick: setPicked })) : null, horizontal ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { "data-control": true, position: "relative", zIndex: 2, mt: "auto", pt: 2, align: "center", justify: "space-between", gap: 1, children: [wishlist, control] })) : null] }), action === "options" ? ((0, jsx_runtime_1.jsx)(QuickAddSheet_1.default, { isOpen: sheetOpen, onClose: () => setSheetOpen(false), title: title, brand: brand, media: frames[0], axes: axes, variants: variants, defaultSelection: swatchAxis && picked ? { [swatchAxis.id]: picked } : undefined, currency: currency, locale: locale, presentation: quickAddPresentation, drawerContentProps: quickAddDrawerProps, onConfirm: (variant, count) => {
+                            }, children: title })) : (title) }), selected ? (0, jsx_runtime_1.jsx)(react_2.VisuallyHidden, { children: copy.selected }) : null, rating !== undefined && rating > 0 ? ((0, jsx_runtime_1.jsx)(Rating_1.default, { value: rating, count: ratingCount, size: "xs", compactCount: true })) : horizontal ? null : ((0, jsx_runtime_1.jsx)(react_2.Box, { minH: "1rem", "aria-hidden": true })), (0, jsx_runtime_1.jsx)(PriceBlock_1.default, { size: m.price, price: price, mrp: soldOut ? undefined : mrp, priceRange: range, unitPrice: unitPrice, currency: currency, locale: locale }), soldOut ? (0, jsx_runtime_1.jsx)(StockStatus_1.default, { status: "out-of-stock", message: copy.soldOut, size: "sm" }) : null, metaLine, swatchAxis && activeId ? ((0, jsx_runtime_1.jsx)(ProductCardSwatches_1.default, { axis: swatchAxis, limit: swatchLimit, dot: m.dot, activeId: activeId, soldOutIds: soldOutValues, labels: copy, onPreview: setPreviewed, onPick: setPicked })) : null, horizontal ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { "data-control": true, position: "relative", zIndex: 2, mt: "auto", pt: 2, align: "center", justify: "space-between", gap: 1, children: [wishlist, control] })) : null] }), action === "options" && sheetMounted ? ((0, jsx_runtime_1.jsx)(QuickAddSheet_1.default, { isOpen: sheetOpen, onClose: () => setSheetOpen(false), title: title, brand: brand, media: frames[0], axes: axes, variants: variants, defaultSelection: swatchAxis && picked ? { [swatchAxis.id]: picked } : undefined, currency: currency, locale: locale, presentation: quickAddPresentation, drawerContentProps: quickAddDrawerProps, onConfirm: (variant, count) => {
                     onAdd === null || onAdd === void 0 ? void 0 : onAdd(variant.id, count);
                     setSheetOpen(false);
                 } })) : null] }));

package/dist/Components/ProductCard/ProductCardMedia.js

@@ -9,7 +9,7 @@ const motion_1 = require("../../Theme/tokens/primitives/motion");
 const motion_2 = require("../../Theme/chakra/motion");
 const cardMetrics_1 = require("./cardMetrics");
 const DIMMED_OPACITY = 0.6;
-const Frame = ({ src, alt, fallbackText, quiet = false }) => {
+const Frame = ({ src, srcSet, sizes, alt, fallbackText, quiet = false }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const ref = (0, react_1.useRef)(null);
     const [loaded, setLoaded] = (0, react_1.useState)(false);
@@ -24,12 +24,12 @@ const Frame = ({ src, alt, fallbackText, quiet = false }) => {
             return null;
         return ((0, jsx_runtime_1.jsxs)(react_2.Box, { role: "img", "aria-label": alt, position: "absolute", inset: 0, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 1.5, color: colors.textMuted, bg: colors.background[100], children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ImageOff, { size: 24, "aria-hidden": true }), fallbackText ? ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", fontSize: "xs", fontWeight: 500, children: fallbackText })) : null] }));
     }
-    return ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "img", ref: ref, src: src, alt: alt, loading: "lazy", decoding: "async", draggable: false, onLoad: () => setLoaded(true), onError: () => setFailed(true), position: "absolute", inset: 0, w: "100%", h: "100%", objectFit: "cover", display: "block", opacity: loaded ? 1 : 0, transition: (0, motion_1.transitionFor)(["opacity"]), sx: (0, motion_2.reducedMotionSx)() }));
+    return ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "img", ref: ref, src: src, srcSet: srcSet, sizes: sizes, alt: alt, loading: "lazy", decoding: "async", draggable: false, onLoad: () => setLoaded(true), onError: () => setFailed(true), position: "absolute", inset: 0, w: "100%", h: "100%", objectFit: "cover", display: "block", opacity: loaded ? 1 : 0, transition: (0, motion_1.transitionFor)(["opacity"]), sx: (0, motion_2.reducedMotionSx)() }));
 };
 /** Tonal media well: cover-fitted primary frame, optional hover frame, broken-image tile; overlays are children. */
 const ProductCardMedia = ({ primary, hover, title, alt, aspectRatio, dimmed, selected, fallbackText, width, children, }) => {
     var _a, _b;
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { "data-media": true, "data-ratio": aspectRatio, position: "relative", flexShrink: 0, w: width !== null && width !== void 0 ? width : "100%", sx: { aspectRatio: cardMetrics_1.CSS_RATIO[aspectRatio] }, borderRadius: cardMetrics_1.MEDIA_RADIUS, overflow: "hidden", bg: colors.background[100], boxShadow: selected ? `0 0 0 2px ${colors.header[900]}` : "none", transition: (0, motion_1.transitionFor)(["box-shadow"]), children: [(0, jsx_runtime_1.jsx)(react_2.Box, { "data-primary": true, position: "absolute", inset: 0, opacity: dimmed ? DIMMED_OPACITY : 1, transition: (0, motion_1.transitionFor)(["transform", "opacity"], "base"), sx: (0, motion_2.reducedMotionSx)(), children: primary ? ((0, jsx_runtime_1.jsx)(Frame, { src: primary.src, alt: (_b = (_a = primary.alt) !== null && _a !== void 0 ? _a : alt) !== null && _b !== void 0 ? _b : title, fallbackText: fallbackText }, primary.src)) : ((0, jsx_runtime_1.jsx)(Frame, { src: "", alt: alt !== null && alt !== void 0 ? alt : title, fallbackText: fallbackText }, "none")) }), hover ? ((0, jsx_runtime_1.jsx)(react_2.Box, { "data-hover-frame": true, "aria-hidden": true, position: "absolute", inset: 0, opacity: 0, pointerEvents: "none", transition: (0, motion_1.transitionFor)(["opacity"], "base"), sx: (0, motion_2.reducedMotionSx)(), children: (0, jsx_runtime_1.jsx)(Frame, { src: hover.src, alt: "", quiet: true }, hover.src) })) : null, children] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { "data-media": true, "data-ratio": aspectRatio, position: "relative", flexShrink: 0, w: width !== null && width !== void 0 ? width : "100%", sx: { aspectRatio: cardMetrics_1.CSS_RATIO[aspectRatio] }, borderRadius: cardMetrics_1.MEDIA_RADIUS, overflow: "hidden", bg: colors.background[100], boxShadow: selected ? `0 0 0 2px ${colors.header[900]}` : "none", transition: (0, motion_1.transitionFor)(["box-shadow"]), children: [(0, jsx_runtime_1.jsx)(react_2.Box, { "data-primary": true, position: "absolute", inset: 0, opacity: dimmed ? DIMMED_OPACITY : 1, transition: (0, motion_1.transitionFor)(["transform", "opacity"], "base"), sx: (0, motion_2.reducedMotionSx)(), children: primary ? ((0, jsx_runtime_1.jsx)(Frame, { src: primary.src, srcSet: primary.srcSet, sizes: primary.sizes, alt: (_b = (_a = primary.alt) !== null && _a !== void 0 ? _a : alt) !== null && _b !== void 0 ? _b : title, fallbackText: fallbackText }, primary.src)) : ((0, jsx_runtime_1.jsx)(Frame, { src: "", alt: alt !== null && alt !== void 0 ? alt : title, fallbackText: fallbackText }, "none")) }), hover ? ((0, jsx_runtime_1.jsx)(react_2.Box, { "data-hover-frame": true, "aria-hidden": true, position: "absolute", inset: 0, opacity: 0, pointerEvents: "none", transition: (0, motion_1.transitionFor)(["opacity"], "base"), sx: (0, motion_2.reducedMotionSx)(), children: (0, jsx_runtime_1.jsx)(Frame, { src: hover.src, srcSet: hover.srcSet, sizes: hover.sizes, alt: "", quiet: true }, hover.src) })) : null, children] }));
 };
 exports.default = ProductCardMedia;

package/dist/Components/ProductCard/QuickAddSheet.js

@@ -49,7 +49,7 @@ const QuantityStepper_1 = __importDefault(require("../QuantityStepper/QuantitySt
 const VariantSelector_1 = __importDefault(require("../VariantSelector/VariantSelector"));
 const commerceVariants_1 = require("../Commerce/commerceVariants");
 const productCardModel_1 = require("./productCardModel");
-const useMinWidth_1 = require("./useMinWidth");
+const useMatchMedia_1 = require("../../Hooks/useMatchMedia");
 const DEFAULT_LABELS = {
     heading: "Choose options",
     quantity: "Quantity",
@@ -62,7 +62,7 @@ const DESKTOP_QUERY = "(min-width: 48em)";
 const QuickAddSheet = ({ isOpen, onClose, title, brand, media, axes, variants, defaultSelection, onConfirm, presentation = "auto", drawerContentProps, labels, currency, locale, "data-testid": testId, }) => {
     var _a, _b, _c;
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    const desktop = (0, useMinWidth_1.useMinWidth)(DESKTOP_QUERY);
+    const desktop = (0, useMatchMedia_1.useMatchMedia)(DESKTOP_QUERY);
     const copy = { ...DEFAULT_LABELS, ...labels };
     const [selection, setSelection] = (0, react_1.useState)(defaultSelection !== null && defaultSelection !== void 0 ? defaultSelection : {});
     const [quantity, setQuantity] = (0, react_1.useState)(1);

package/dist/Components/ProductCard/cardMetrics.d.ts

@@ -24,4 +24,5 @@ export declare const DENSITY: Record<ProductCardDensity, DensityMetrics>;
 export declare const CSS_RATIO: Record<ProductCardAspectRatio, string>;
 export declare const MEDIA_RADIUS = "1rem";
 export declare const TITLE_LINES = 2;
+export declare const FINE_POINTER_QUERY = "(hover: hover) and (pointer: fine)";
 export declare const FINE_POINTER = "@media (hover: hover) and (pointer: fine)";

package/dist/Components/ProductCard/cardMetrics.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FINE_POINTER = exports.TITLE_LINES = exports.MEDIA_RADIUS = exports.CSS_RATIO = exports.DENSITY = void 0;
+exports.FINE_POINTER = exports.FINE_POINTER_QUERY = exports.TITLE_LINES = exports.MEDIA_RADIUS = exports.CSS_RATIO = exports.DENSITY = void 0;
 exports.DENSITY = {
     compact: {
         badgeInset: "0.5rem",
@@ -52,4 +52,5 @@ exports.CSS_RATIO = {
 };
 exports.MEDIA_RADIUS = "1rem";
 exports.TITLE_LINES = 2;
-exports.FINE_POINTER = "@media (hover: hover) and (pointer: fine)";
+exports.FINE_POINTER_QUERY = "(hover: hover) and (pointer: fine)";
+exports.FINE_POINTER = `@media ${exports.FINE_POINTER_QUERY}`;

package/dist/Components/ProductDetails/ProductDetails.d.ts

@@ -1,4 +1,4 @@
 import type { ProductDetailsProps } from "./ProductDetailsProps";
 /** Product page that wires one selection to price, stock, gallery frames and the primary action; every region has a slot. */
-declare const ProductDetails: ({ product, selection: selectionProp, defaultSelection, onSelectionChange, quantity: quantityProp, defaultQuantity, onQuantityChange, maxQuantity, onAddToBag, onBuyNow, onNotify, onGoToBag, addedDuration, wishlisted, defaultWishlisted, onWishlistChange, onShare, offers, offersProps, trustItems, pincode, sizeGuide, onGuideClick, reviews, ratingBreakdown, reviewsProps, onWriteReview, detailSectionsProps, care, breadcrumbs, layout, mediaSlot, metaSlot, infoSlot, belowFold, relatedSlot, isLoading, labels: labelOverrides, currency, locale, "data-testid": testId, }: ProductDetailsProps) => import("react/jsx-runtime").JSX.Element;
+declare const ProductDetails: ({ product, selection: selectionProp, defaultSelection, onSelectionChange, quantity: quantityProp, defaultQuantity, onQuantityChange, maxQuantity, onAddToBag, onBuyNow, onNotify, onGoToBag, addedDuration, wishlisted, defaultWishlisted, onWishlistChange, onShare, offers, offersProps, trustItems, pincode, sizeGuide, onGuideClick, reviews, ratingBreakdown, reviewsProps, onWriteReview, detailSectionsProps, care, breadcrumbs, layout, size, mediaSlot, metaSlot, infoSlot, belowFold, relatedSlot, isLoading, labels: labelOverrides, currency, locale, "data-testid": testId, }: ProductDetailsProps) => import("react/jsx-runtime").JSX.Element;
 export default ProductDetails;

package/dist/Components/ProductDetails/ProductDetails.js

@@ -16,7 +16,7 @@ const Button_1 = __importDefault(require("../Button/Button"));
 const Skeletons_1 = __importDefault(require("../Skeletons/Skeletons"));
 const MediaGallery_1 = __importDefault(require("../MediaGallery/MediaGallery"));
 const useContainerWidth_1 = require("../Commerce/useContainerWidth");
-const useMatchMedia_1 = require("../MediaGallery/useMatchMedia");
+const useMatchMedia_1 = require("../../Hooks/useMatchMedia");
 const ProductBadges_1 = __importDefault(require("../ProductBadges/ProductBadges"));
 const Rating_1 = __importDefault(require("../Rating/Rating"));
 const PriceBlock_1 = __importDefault(require("../PriceBlock/PriceBlock"));
@@ -64,7 +64,7 @@ const scrollToNode = (node, reduced) => {
     }
 };
 /** Product page that wires one selection to price, stock, gallery frames and the primary action; every region has a slot. */
-const ProductDetails = ({ product, selection: selectionProp, defaultSelection, onSelectionChange, quantity: quantityProp, defaultQuantity = 1, onQuantityChange, maxQuantity = productDetailsModel_1.DEFAULT_MAX_QUANTITY, onAddToBag, onBuyNow, onNotify, onGoToBag, addedDuration = DEFAULT_ADDED_MS, wishlisted, defaultWishlisted, onWishlistChange, onShare, offers, offersProps, trustItems, pincode, sizeGuide, onGuideClick, reviews, ratingBreakdown, reviewsProps, onWriteReview, detailSectionsProps, care, breadcrumbs, layout = "auto", mediaSlot, metaSlot, infoSlot, belowFold, relatedSlot, isLoading = false, labels: labelOverrides, currency, locale, "data-testid": testId, }) => {
+const ProductDetails = ({ product, selection: selectionProp, defaultSelection, onSelectionChange, quantity: quantityProp, defaultQuantity = 1, onQuantityChange, maxQuantity = productDetailsModel_1.DEFAULT_MAX_QUANTITY, onAddToBag, onBuyNow, onNotify, onGoToBag, addedDuration = DEFAULT_ADDED_MS, wishlisted, defaultWishlisted, onWishlistChange, onShare, offers, offersProps, trustItems, pincode, sizeGuide, onGuideClick, reviews, ratingBreakdown, reviewsProps, onWriteReview, detailSectionsProps, care, breadcrumbs, layout = "auto", size, mediaSlot, metaSlot, infoSlot, belowFold, relatedSlot, isLoading = false, labels: labelOverrides, currency, locale, "data-testid": testId, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const reduced = (0, motion_2.usePrefersReducedMotion)();
@@ -75,6 +75,7 @@ const ProductDetails = ({ product, selection: selectionProp, defaultSelection, o
     const containerWidth = (0, useContainerWidth_1.useContainerWidth)(rootRef);
     const wide = (0, useMatchMedia_1.useMatchMedia)(DESKTOP_QUERY, false);
     const desktop = layout === "auto" ? (containerWidth === undefined ? wide : containerWidth >= DESKTOP_MIN_WIDTH) : layout === "desktop";
+    const controlSize = size !== null && size !== void 0 ? size : (desktop ? "md" : "lg");
     const variants = (0, react_1.useMemo)(() => (0, productDetailsModel_1.resolveVariants)(product), [product]);
     const axes = (0, react_1.useMemo)(() => withGuide(product.axes, sizeGuide), [product.axes, sizeGuide]);
     const [innerSelection, setInnerSelection] = (0, react_1.useState)(defaultSelection !== null && defaultSelection !== void 0 ? defaultSelection : {});
@@ -206,11 +207,11 @@ const ProductDetails = ({ product, selection: selectionProp, defaultSelection, o
     const showReviews = reviews !== undefined || product.ratingCount !== undefined;
     const sectionGap = desktop ? 18 : 10;
     const gutter = desktop ? 6 : 4;
-    const wishlist = ((0, jsx_runtime_1.jsx)(WishlistToggle_1.default, { selected: wishlisted, defaultSelected: defaultWishlisted, onSelectedChange: onWishlistChange, size: desktop ? "lg" : "md", variant: desktop ? "soft" : "glass", label: labels.wishlistSave }));
+    const wishlist = ((0, jsx_runtime_1.jsx)(WishlistToggle_1.default, { selected: wishlisted, defaultSelected: defaultWishlisted, onSelectedChange: onWishlistChange, size: desktop ? controlSize : "md", variant: desktop ? "soft" : "glass", label: labels.wishlistSave }));
     const badgeSlot = product.badges && product.badges.length > 0 ? (0, jsx_runtime_1.jsx)(ProductBadges_1.default, { badges: product.badges, max: 2, variant: "glass", size: "md" }) : undefined;
     const gallery = mediaSlot !== null && mediaSlot !== void 0 ? mediaSlot : ((0, jsx_runtime_1.jsx)(MediaGallery_1.default, { media: product.media, layout: desktop ? "thumbs-left" : "swipe", aspectRatio: "4/5", activeMediaIds: activeIds, sticky: desktop, stickyTop: 24, badges: badgeSlot, actions: desktop ? undefined : wishlist, isLoading: isLoading, "aria-label": product.title }));
-    const primaryButton = ((0, jsx_runtime_1.jsx)(Button_1.default, { size: desktop ? "md" : "lg", width: "100%", variant: notifyMode ? "outline" : "solid", label: primaryLabel, leftIcon: bag === "added" ? (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 18, "aria-hidden": true }) : notifyMode ? (0, jsx_runtime_1.jsx)(lucide_react_1.BellRing, { size: 18, "aria-hidden": true }) : undefined, isLoading: bag === "adding", onClick: notifyMode ? handleNotify : handleAdd, fontWeight: 600 }));
-    const buyPanel = isLoading ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 4, "aria-busy": "true", children: [(0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "1rem", width: "30%" }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "2rem", width: "90%" }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "2.5rem", width: "45%" }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "3rem", width: "100%" }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "3rem", width: "100%" })] })) : ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 6, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 2, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", gap: 3, minH: product.brand || onShare ? "2.75rem" : undefined, children: [product.brand ? ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", fontSize: "sm", fontWeight: 600, color: colors.textMuted, children: product.brand })) : ((0, jsx_runtime_1.jsx)("span", {})), onShare ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", "aria-label": labels.share, onClick: onShare, display: "inline-flex", alignItems: "center", justifyContent: "center", boxSize: "2.75rem", mr: "-0.625rem", borderRadius: "full", color: colors.header[900], transition: (0, motion_1.transitionFor)(["background-color"]), _hover: { bg: colors.background[100] }, sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors), ...(0, motion_2.reducedMotionSx)() }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Share2, { size: 20, "aria-hidden": true }) })) : null] }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "h1", fontSize: desktop ? "1.75rem" : "1.375rem", lineHeight: 1.25, fontWeight: 700, letterSpacing: "-0.02em", color: colors.header[900], children: product.title }), product.rating !== undefined && showReviews ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", onClick: jumpToReviews, "aria-label": labels.jumpToReviews(ratingText), alignSelf: "flex-start", display: "inline-flex", alignItems: "center", minH: "2.75rem", borderRadius: "md", sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors) }, children: (0, jsx_runtime_1.jsx)(Rating_1.default, { value: product.rating, count: product.ratingCount, size: "sm", "aria-label": ratingText, locale: locale }) })) : product.rating !== undefined ? ((0, jsx_runtime_1.jsx)(Rating_1.default, { value: product.rating, count: product.ratingCount, size: "sm", locale: locale })) : null] }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 2, children: [(0, jsx_runtime_1.jsx)(PriceBlock_1.default, { size: "lg", price: price, mrp: mrp, priceRange: showRange ? range : undefined, showSavings: true, taxNote: labels.taxNote, unitPrice: (0, productDetailsModel_1.packUnitPrice)(product, selection, price), ...fmt }), state ? (0, jsx_runtime_1.jsx)(StockStatus_1.default, { status: state, count: variant === null || variant === void 0 ? void 0 : variant.stock }) : null, metaSlot] }), offers && offers.length > 0 ? (0, jsx_runtime_1.jsx)(OffersList_1.default, { offers: offers, ...offersProps }) : null, axes.length > 0 ? ((0, jsx_runtime_1.jsx)(react_2.Box, { ref: selectorRef, children: (0, jsx_runtime_1.jsx)(VariantSelector_1.default, { axes: axes, variants: variants, value: selection, onValueChange: handleSelection, error: showSelectError && !complete ? selectPrompt : undefined, showSelectedLabel: true, showLowStock: true, onGuideClick: onGuideClick }) })) : null, (0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 3, ref: ctaRef, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 3, children: [showStepper ? ((0, jsx_runtime_1.jsx)(QuantityStepper_1.default, { size: desktop ? "md" : "lg", value: quantity, onValueChange: handleQuantity, min: 1, max: ceiling, itemLabel: product.title })) : null, (0, jsx_runtime_1.jsx)(react_2.Box, { flex: 1, minW: 0, children: primaryButton }), desktop ? wishlist : null] }), showBuyNow ? (0, jsx_runtime_1.jsx)(Button_1.default, { size: desktop ? "md" : "lg", width: "100%", variant: "outline", label: labels.buyNow, onClick: handleBuyNow }) : null, addFailed ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { role: "alert", align: "center", gap: 1.5, color: colors.semanticText.error, fontSize: "sm", fontWeight: 600, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CircleAlert, { size: 14, "aria-hidden": true }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", children: labels.addFailed })] })) : null] }), pincode ? (0, jsx_runtime_1.jsx)(PincodeChecker_1.default, { ...pincode }) : null, trustItems && trustItems.length > 0 ? (0, jsx_runtime_1.jsx)(TrustBadges_1.default, { items: trustItems, layout: desktop ? "grid" : "row" }) : null, infoSlot] }));
+    const primaryButton = ((0, jsx_runtime_1.jsx)(Button_1.default, { size: controlSize, width: "100%", variant: notifyMode ? "outline" : "solid", label: primaryLabel, leftIcon: bag === "added" ? (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 18, "aria-hidden": true }) : notifyMode ? (0, jsx_runtime_1.jsx)(lucide_react_1.BellRing, { size: 18, "aria-hidden": true }) : undefined, isLoading: bag === "adding", onClick: notifyMode ? handleNotify : handleAdd, fontWeight: 600 }));
+    const buyPanel = isLoading ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 4, "aria-busy": "true", children: [(0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "1rem", width: "30%" }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "2rem", width: "90%" }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "2.5rem", width: "45%" }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "3rem", width: "100%" }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "3rem", width: "100%" })] })) : ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 6, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 2, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", gap: 3, minH: product.brand || onShare ? "2.75rem" : undefined, children: [product.brand ? ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", fontSize: "sm", fontWeight: 600, color: colors.textMuted, children: product.brand })) : ((0, jsx_runtime_1.jsx)("span", {})), onShare ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", "aria-label": labels.share, onClick: onShare, display: "inline-flex", alignItems: "center", justifyContent: "center", boxSize: "2.75rem", mr: "-0.625rem", borderRadius: "full", color: colors.header[900], transition: (0, motion_1.transitionFor)(["background-color"]), _hover: { bg: colors.background[100] }, sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors), ...(0, motion_2.reducedMotionSx)() }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Share2, { size: 20, "aria-hidden": true }) })) : null] }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "h1", fontSize: desktop ? "1.75rem" : "1.375rem", lineHeight: 1.25, fontWeight: 700, letterSpacing: "-0.02em", color: colors.header[900], children: product.title }), product.rating !== undefined && showReviews ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", onClick: jumpToReviews, "aria-label": labels.jumpToReviews(ratingText), alignSelf: "flex-start", display: "inline-flex", alignItems: "center", minH: "2.75rem", borderRadius: "md", sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors) }, children: (0, jsx_runtime_1.jsx)(Rating_1.default, { value: product.rating, count: product.ratingCount, size: "sm", "aria-label": ratingText, locale: locale }) })) : product.rating !== undefined ? ((0, jsx_runtime_1.jsx)(Rating_1.default, { value: product.rating, count: product.ratingCount, size: "sm", locale: locale })) : null] }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 2, children: [(0, jsx_runtime_1.jsx)(PriceBlock_1.default, { size: "lg", price: price, mrp: mrp, priceRange: showRange ? range : undefined, showSavings: true, taxNote: labels.taxNote, unitPrice: (0, productDetailsModel_1.packUnitPrice)(product, selection, price), ...fmt }), state ? (0, jsx_runtime_1.jsx)(StockStatus_1.default, { status: state, count: variant === null || variant === void 0 ? void 0 : variant.stock }) : null, metaSlot] }), offers && offers.length > 0 ? (0, jsx_runtime_1.jsx)(OffersList_1.default, { offers: offers, ...offersProps }) : null, axes.length > 0 ? ((0, jsx_runtime_1.jsx)(react_2.Box, { ref: selectorRef, children: (0, jsx_runtime_1.jsx)(VariantSelector_1.default, { axes: axes, variants: variants, value: selection, onValueChange: handleSelection, error: showSelectError && !complete ? selectPrompt : undefined, showSelectedLabel: true, showLowStock: true, onGuideClick: onGuideClick }) })) : null, (0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 3, ref: ctaRef, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 3, children: [showStepper ? ((0, jsx_runtime_1.jsx)(QuantityStepper_1.default, { size: controlSize, value: quantity, onValueChange: handleQuantity, min: 1, max: ceiling, itemLabel: product.title })) : null, (0, jsx_runtime_1.jsx)(react_2.Box, { flex: 1, minW: 0, children: primaryButton }), desktop ? wishlist : null] }), showBuyNow ? (0, jsx_runtime_1.jsx)(Button_1.default, { size: controlSize, width: "100%", variant: "outline", label: labels.buyNow, onClick: handleBuyNow }) : null, addFailed ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { role: "alert", align: "center", gap: 1.5, color: colors.semanticText.error, fontSize: "sm", fontWeight: 600, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CircleAlert, { size: 14, "aria-hidden": true }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", children: labels.addFailed })] })) : null] }), pincode ? (0, jsx_runtime_1.jsx)(PincodeChecker_1.default, { ...pincode }) : null, trustItems && trustItems.length > 0 ? (0, jsx_runtime_1.jsx)(TrustBadges_1.default, { items: trustItems, layout: desktop ? "grid" : "row" }) : null, infoSlot] }));
     return ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: rootRef, "data-testid": testId, "data-layout": desktop ? "desktop" : "mobile", w: "100%", maxW: "82rem", mx: "auto", px: desktop ? 6 : 0, children: [(0, jsx_runtime_1.jsx)(react_2.VisuallyHidden, { role: "status", "aria-live": "polite", "aria-atomic": "true", children: announcement }), breadcrumbs ? (0, jsx_runtime_1.jsx)(react_2.Box, { px: desktop ? 0 : gutter, py: 3, children: breadcrumbs }) : null, (0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: desktop ? "row" : "column", align: desktop ? "flex-start" : "stretch", gap: desktop ? 12 : 5, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { flex: desktop ? "1.63 1 0" : undefined, minW: 0, w: desktop ? undefined : "100%", children: gallery }), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: desktop ? "1 1 0" : undefined, minW: 0, px: desktop ? 0 : gutter, children: buyPanel })] }), !isLoading ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: sectionGap, mt: sectionGap, px: desktop ? 0 : gutter, children: [(0, jsx_runtime_1.jsx)(DetailSections_1.default, { description: product.description, highlights: product.highlights, specs: product.specs, care: care, shipping: product.returnsNote, legal: hasLegal
                             ? {
                                 netQuantity: product.netQuantity,

package/dist/Components/ProductDetails/ProductDetailsProps.d.ts

@@ -126,6 +126,8 @@ export interface ProductDetailsProps extends PriceFormat {
     breadcrumbs?: ReactNode;
     /** `auto` splits into gallery and buy panel from 960px of the component's own width, not the window. */
     layout?: ProductDetailsLayout;
+    /** Height of the add-to-bag, buy-now and quantity controls; defaults to `md` (40px) on the split layout, `lg` (48px) on the phone page. */
+    size?: "md" | "lg";
     /** Replaces the gallery; its frames, badges and wishlist toggle go with it. */
     mediaSlot?: ReactNode;
     /** Extra content in the buy panel under the price, e.g. an EMI line. */

package/dist/Components/Search/Search.js

@@ -7,6 +7,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
+const Kbd_1 = __importDefault(require("../Kbd/Kbd"));
 const FormLabel_1 = require("../Common/FormLabel");
 const FieldMessage_1 = __importDefault(require("../Common/FieldMessage"));
 const useFieldIds_1 = require("../Common/useFieldIds");
@@ -49,6 +50,6 @@ const Search = (0, react_1.forwardRef)(function Search({ placeholder = "Search..
                             ps: spec.height,
                             pe: rightPadding,
                             ...(0, motion_1.reducedMotionSx)(),
-                        } }), (showClear || showHint) && ((0, jsx_runtime_1.jsxs)(react_2.InputRightElement, { h: spec.height, w: "auto", pe: spec.paddingX, gap: 1, children: [showClear && ((0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Clear search", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: spec.iconSize }), variant: "ghost", size: "xs", h: clearSize, minW: clearSize, color: theme.colors.textMuted, onClick: handleClear, sx: (0, focusRing_styles_1.focusVisibleStyles)(theme.colors) })), showHint && ((0, jsx_runtime_1.jsx)(react_2.Kbd, { "aria-hidden": true, fontSize: "0.6875rem", fontWeight: 500, color: theme.colors.textMuted, bg: theme.colors.backgroundColor.subtle, borderColor: theme.colors.boxborder[200], whiteSpace: "nowrap", children: shortcut }))] }))] }), (0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
+                        } }), (showClear || showHint) && ((0, jsx_runtime_1.jsxs)(react_2.InputRightElement, { h: spec.height, w: "auto", pe: spec.paddingX, gap: 1, children: [showClear && ((0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Clear search", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: spec.iconSize }), variant: "ghost", size: "xs", h: clearSize, minW: clearSize, color: theme.colors.textMuted, onClick: handleClear, sx: (0, focusRing_styles_1.focusVisibleStyles)(theme.colors) })), showHint && ((0, jsx_runtime_1.jsx)("span", { "aria-hidden": true, children: (0, jsx_runtime_1.jsx)(Kbd_1.default, { size: "xs", children: shortcut }) }))] }))] }), (0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
 });
 exports.default = Search;

package/dist/Components/SideBar/SecondaryBar.js

@@ -9,6 +9,7 @@ const react_2 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const sidebarAccentColors_1 = require("./sidebarAccentColors");
 const motion_1 = require("../../Theme/tokens/primitives/motion");
+const sidebarFocus_1 = require("./sidebarFocus");
 const menuDisabled_1 = require("./menuDisabled");
 const lucide_react_1 = require("lucide-react");
 const OverflowTooltipText_1 = __importDefault(require("./components/OverflowTooltipText"));
@@ -51,7 +52,7 @@ const CollapsedItem = ({ item, isActive, itemFontSize, onItemClick }) => {
                         e.preventDefault();
                         if (!blocked)
                             onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item);
-                    }, bg: isActive ? "whiteAlpha.300" : "transparent", transition: "background 0.12s", children: (0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: item.icon, fontSize: sidebarScale_1.SIDEBAR_ROW.iconSize, color: isActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isActive ? undefined : { color: theme.colors.white }, transition: "color 0.12s" }), badgeVal != null && ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.sidebar.semanticText.error }))] }) }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { borderRadius: "lg", bg: theme.colors.sidebar.elevated, boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", cursor: blocked ? "not-allowed" : "pointer", zIndex: 1500, color: theme.colors.white, border: 'none', children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: 3, children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, justify: "space-between", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, flex: "1", minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: item.icon, fontSize: "md", flexShrink: 0 }), (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: "medium", as: "p", children: item.title })] }), item.locked ? (item.lockedReason ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: item.lockedReason, placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "sm", flexShrink: 0, color: theme.colors.sidebar.mutedIcon }) })) : ((0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "sm", flexShrink: 0, color: theme.colors.sidebar.mutedIcon }))) : (badgeVal != null && ((0, jsx_runtime_1.jsx)(react_2.Badge, { ...softBadge(theme.colors, colorScheme, (0, sidebarAccent_1.sidebarRowPeak)(theme.colors.sidebar.elevated)), fontSize: "xs", variant: variant, borderRadius: radius, children: badgeVal })))] }) }) }) })] }));
+                    }, bg: isActive ? "whiteAlpha.300" : "transparent", transition: "background 0.12s", sx: (0, sidebarFocus_1.sidebarFocusStyles)(theme.colors), children: (0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: item.icon, fontSize: sidebarScale_1.SIDEBAR_ROW.iconSize, color: isActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isActive ? undefined : { color: theme.colors.white }, transition: "color 0.12s" }), badgeVal != null && ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.sidebar.semanticText.error }))] }) }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { borderRadius: "lg", bg: theme.colors.sidebar.elevated, boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", cursor: blocked ? "not-allowed" : "pointer", zIndex: 1500, color: theme.colors.white, border: 'none', children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: 3, children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, justify: "space-between", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, flex: "1", minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: item.icon, fontSize: "md", flexShrink: 0 }), (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: "medium", as: "p", children: item.title })] }), item.locked ? (item.lockedReason ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: item.lockedReason, placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "sm", flexShrink: 0, color: theme.colors.sidebar.mutedIcon }) })) : ((0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "sm", flexShrink: 0, color: theme.colors.sidebar.mutedIcon }))) : (badgeVal != null && ((0, jsx_runtime_1.jsx)(react_2.Badge, { ...softBadge(theme.colors, colorScheme, (0, sidebarAccent_1.sidebarRowPeak)(theme.colors.sidebar.elevated)), fontSize: "xs", variant: variant, borderRadius: radius, children: badgeVal })))] }) }) }) })] }));
 };
 const ExpandedItem = ({ item, isActive, itemFontSize, onItemClick }) => {
     var _a;
@@ -65,7 +66,7 @@ const ExpandedItem = ({ item, isActive, itemFontSize, onItemClick }) => {
             e.preventDefault();
             if (!blocked)
                 onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item);
-        }, borderLeft: "2px solid", borderLeftColor: isActive ? theme.colors.sidebar.activeIcon : "transparent", transition: "background 0.12s", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, flex: "1", minW: 0, overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: item.icon, fontSize: sidebarScale_1.SIDEBAR_ROW.iconSize, flexShrink: 0, color: isActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isActive ? undefined : { color: theme.colors.white }, transition: "color 0.12s" }), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", minW: 0, children: (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: isActive ? 600 : 500, color: isActive ? activeAccent.label : theme.colors.white, _groupHover: isActive ? undefined : { color: theme.colors.white }, as: "p", children: item.title }) })] }), item.locked ? ((0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "sm", flexShrink: 0, color: theme.colors.sidebar.mutedIcon })) : (badgeVal != null && ((0, jsx_runtime_1.jsx)(react_2.Badge, { ...softBadge(theme.colors, colorScheme, (0, sidebarAccent_1.sidebarRowPeak)(theme.colors.sidebar.background[500])), fontSize: "xs", variant: variant, borderRadius: radius, children: badgeVal })))] }));
+        }, borderLeft: "2px solid", borderLeftColor: isActive ? theme.colors.sidebar.activeIcon : "transparent", transition: "background 0.12s", sx: (0, sidebarFocus_1.sidebarFocusStyles)(theme.colors), children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, flex: "1", minW: 0, overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: item.icon, fontSize: sidebarScale_1.SIDEBAR_ROW.iconSize, flexShrink: 0, color: isActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isActive ? undefined : { color: theme.colors.white }, transition: "color 0.12s" }), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", minW: 0, children: (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: isActive ? 600 : 500, color: isActive ? activeAccent.label : theme.colors.white, _groupHover: isActive ? undefined : { color: theme.colors.white }, as: "p", children: item.title }) })] }), item.locked ? ((0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "sm", flexShrink: 0, color: theme.colors.sidebar.mutedIcon })) : (badgeVal != null && ((0, jsx_runtime_1.jsx)(react_2.Badge, { ...softBadge(theme.colors, colorScheme, (0, sidebarAccent_1.sidebarRowPeak)(theme.colors.sidebar.background[500])), fontSize: "xs", variant: variant, borderRadius: radius, children: badgeVal })))] }));
     return item.locked && item.lockedReason ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: item.lockedReason, placement: "top", children: row })) : (row);
 };
 const SecondaryBar = ({ items = [], defaultCollapsed = true, collapsedWidth = "3.5rem", expandedWidth = "10rem", headerFontSize = sidebarScale_1.SIDEBAR_ROW.fontSize, itemFontSize = sidebarScale_1.SIDEBAR_ROW.fontSize, selected, onItemClick, title, icon, }) => {
@@ -74,7 +75,7 @@ const SecondaryBar = ({ items = [], defaultCollapsed = true, collapsedWidth = "3
     const scrollContainerId = (0, sidebarId_1.sanitizeId)((0, react_1.useId)());
     const [collapsed, setCollapsed] = (0, react_1.useState)(defaultCollapsed);
     const width = collapsed ? collapsedWidth : expandedWidth;
-    return ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "nav", "aria-label": title ? `${title} navigation` : "Secondary navigation", transition: (0, motion_1.transitionFor)(["width"], "base"), pos: "sticky", top: 0, sx: viewportHeight_1.fullViewportHeight, w: width, bg: theme.colors.sidebar.background[500], borderLeft: "1px solid", borderColor: theme.colors.sidebar.divider, boxShadow: theme.shadows.md, zIndex: 1, children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "stretch", spacing: 0, h: "100%", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: collapsed ? "center" : "space-between", px: collapsed ? 0 : "10px", gap: "7px", h: Sidebar_1.HEADER_HEIGHT, overflow: "hidden", borderBottom: "1px solid", borderColor: theme.colors.sidebar.divider, flexShrink: 0, children: [!collapsed && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [icon && ((0, jsx_runtime_1.jsx)(react_2.Icon, { as: icon, fontSize: sidebarScale_1.SIDEBAR_ROW.iconSize, color: activeAccent.icon, flexShrink: 0 })), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", minW: 0, children: (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: headerFontSize, fontWeight: 600, color: theme.colors.white, as: "p", children: title !== null && title !== void 0 ? title : "" }) })] })), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", "aria-label": collapsed ? "Expand navigation panel" : "Collapse navigation panel", "aria-expanded": !collapsed, border: "none", bg: "transparent", w: "24px", h: "24px", borderRadius: "lg", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", flexShrink: 0, onClick: () => setCollapsed((c) => !c), _hover: { bg: "whiteAlpha.200" }, transition: "background 0.15s", children: collapsed ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: title !== null && title !== void 0 ? title : "", placement: "right", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 13, color: theme.colors.sidebar.mutedIcon }) })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { size: 13, color: theme.colors.sidebar.mutedIcon })) })] }), (0, jsx_runtime_1.jsx)(react_2.Box, { id: scrollContainerId, flex: "1", minH: 0, overflowY: "auto", overflowX: "hidden", py: 2, px: "6px", sx: (0, Sidebar_1.cssForScrollBar)(theme), children: items.map((item) => {
+    return ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "nav", "aria-label": title ? `${title} navigation` : "Secondary navigation", transition: (0, motion_1.transitionFor)(["width"], "base"), pos: "sticky", top: 0, sx: viewportHeight_1.fullViewportHeight, w: width, bg: theme.colors.sidebar.background[500], borderLeft: "1px solid", borderColor: theme.colors.sidebar.divider, boxShadow: theme.shadows.md, zIndex: 1, children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "stretch", spacing: 0, h: "100%", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: collapsed ? "center" : "space-between", px: collapsed ? 0 : "10px", gap: "7px", h: Sidebar_1.HEADER_HEIGHT, overflow: "hidden", borderBottom: "1px solid", borderColor: theme.colors.sidebar.divider, flexShrink: 0, children: [!collapsed && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [icon && ((0, jsx_runtime_1.jsx)(react_2.Icon, { as: icon, fontSize: sidebarScale_1.SIDEBAR_ROW.iconSize, color: activeAccent.icon, flexShrink: 0 })), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", minW: 0, children: (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: headerFontSize, fontWeight: 600, color: theme.colors.white, as: "p", children: title !== null && title !== void 0 ? title : "" }) })] })), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", "aria-label": collapsed ? "Expand navigation panel" : "Collapse navigation panel", "aria-expanded": !collapsed, border: "none", bg: "transparent", w: "24px", h: "24px", borderRadius: "lg", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", flexShrink: 0, onClick: () => setCollapsed((c) => !c), _hover: { bg: "whiteAlpha.200" }, transition: "background 0.15s", sx: (0, sidebarFocus_1.sidebarFocusStyles)(theme.colors), children: collapsed ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: title !== null && title !== void 0 ? title : "", placement: "right", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 13, color: theme.colors.sidebar.mutedIcon }) })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { size: 13, color: theme.colors.sidebar.mutedIcon })) })] }), (0, jsx_runtime_1.jsx)(react_2.Box, { id: scrollContainerId, flex: "1", minH: 0, overflowY: "auto", overflowX: "hidden", py: 2, px: "6px", sx: (0, Sidebar_1.cssForScrollBar)(theme), children: items.map((item) => {
                         var _a;
                         const isActive = String(selected) === String(item.id) ||
                             String(selected) === String(item.title);

package/dist/Components/SideBar/SideBar.d.ts

@@ -1,2 +1,2 @@
 import { SidebarProps } from "./SideBarProps";
-export default function Sidebar({ menus, activeMenu, handleMenuClick, handleSecondaryNavClick, toggle, changeToggle, logo, companyName, companySubtitle, user, isDisableAddNew, onAddNewClick, selectedSubMenu, selectedSecondaryItem, isLoading, loadingLines, open, otherApps, mobileOpen, onMobileClose, mobileNav, onToggleMobileNav, peekOpen, onPeekEnd, }: SidebarProps): import("react/jsx-runtime").JSX.Element;
+export default function Sidebar({ menus, activeMenu, handleMenuClick, handleSecondaryNavClick, toggle, changeToggle, logo, companyName, companySubtitle, user, isDisableAddNew, onAddNewClick, selectedSubMenu, selectedSecondaryItem, isLoading, loadingLines, open, otherApps, mobileOpen, onMobileClose, mobileNav, onToggleMobileNav, peekOpen, onPeekEnd, pinnedItems, pinnedLabel, onUnpin, activePinnedId, pinnedLimit, pinnedLabels, collapseTransition, autoCollapse, }: SidebarProps): import("react/jsx-runtime").JSX.Element;