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

package/dist/Components/ProductCard/ProductTags.js

@@ -1,53 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
-const react_2 = require("@chakra-ui/react");
-const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
-const useCustomTheme_1 = require("../../Theme/useCustomTheme");
-const ProductTags = ({ tags, className, size = 'sm' }) => {
-    const getRows = (tags) => {
-        const count = tags.length;
-        if (count === 1)
-            return [tags];
-        if (count === 2)
-            return [tags];
-        if (count === 3)
-            return [[tags[0]], tags.slice(1)];
-        if (count === 4)
-            return [tags.slice(0, 2), tags.slice(2, 4)];
-        return [];
-    };
-    return ((0, jsx_runtime_1.jsx)(react_2.Flex, { direction: "column", gap: "1", className: className, w: "full", children: getRows(tags).map((row, rowIndex) => ((0, jsx_runtime_1.jsx)(react_2.Flex, { gap: "1", children: row.map((tag, tagIndex) => ((0, jsx_runtime_1.jsx)(Tag, { fullWidth: row.length === 1, size: size, children: tag }, tagIndex))) }, rowIndex))) }));
-};
-const Tag = ({ children, fullWidth = false, size = 'sm', }) => {
-    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    const tagText = colors.text[900];
-    const tagBorder = colors.boxborder[500];
-    // Size map for tags
-    const tagSizes = {
-        xs: { fontSize: '0.625rem', px: '0.5rem', py: '0.125rem' },
-        sm: { fontSize: '0.75rem', px: '0.6rem', py: '0.2rem' },
-        md: { fontSize: '0.875rem', px: '0.75rem', py: '0.3rem' },
-        lg: { fontSize: '0.938rem', px: '0.938rem', py: '0.4rem' },
-    };
-    const ref = react_1.default.useRef(null);
-    const [truncated, setTruncated] = react_1.default.useState(false);
-    react_1.default.useEffect(() => {
-        const el = ref.current;
-        if (!el)
-            return;
-        const check = () => setTruncated(el.scrollWidth > el.clientWidth);
-        check();
-        window.addEventListener('resize', check);
-        return () => {
-            window.removeEventListener('resize', check);
-        };
-    }, [children]);
-    const content = ((0, jsx_runtime_1.jsx)(react_2.Box, { ref: ref, flex: fullWidth ? '1' : '1', border: "0.063rem solid", borderColor: tagBorder, color: tagText, fontSize: tagSizes[size].fontSize, fontWeight: "semibold", borderRadius: "full", px: tagSizes[size].px, py: tagSizes[size].py, textAlign: "center", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", children: children }));
-    return truncated ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: String(children), hasArrow: true, openDelay: 300, placement: 'bottom', children: content })) : (content);
-};
-exports.default = ProductTags;

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

@@ -1,7 +0,0 @@
-import { options } from "../ProductCard/ProductCardProps";
-interface ProductDtlPriceProps {
-    price: options[];
-    onSelect?: (option: options) => void;
-}
-declare const ProductDtlPrice: ({ price, onSelect }: ProductDtlPriceProps) => import("react/jsx-runtime").JSX.Element;
-export default ProductDtlPrice;

package/dist/Components/ProductDetails/ProductDtlPrice.js

@@ -1,24 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_2 = require("@chakra-ui/react");
-const useCustomTheme_1 = require("../../Theme/useCustomTheme");
-const accentText_1 = require("../../Theme/tokens/builders/accentText");
-const tone_1 = require("../../Theme/tokens/builders/tone");
-const ProductDtlPrice = ({ price, onSelect }) => {
-    const [selectedIndex, setSelectedIndex] = (0, react_1.useState)(0);
-    const selected = price[selectedIndex];
-    const discounted = Math.round(selected.price - (selected.price * selected.offer) / 100);
-    const theme = (0, useCustomTheme_1.useCustomTheme)();
-    const saveTone = (0, tone_1.resolveSoftTone)(theme.colors, theme.colors.semantic.success);
-    (0, react_1.useEffect)(() => {
-        onSelect === null || onSelect === void 0 ? void 0 : onSelect(selected);
-    }, [selected, onSelect]);
-    return ((0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "start", spacing: 3, p: 4, borderRadius: "lg", w: "full", children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, align: "center", children: [selected.offer > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "lg", color: theme.colors.textMuted, as: "s", children: ["\u20B9", selected.price] })), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xl", color: (0, accentText_1.accentTextOnCanvas)(theme.colors.red, theme.colors.backgroundColor.main), fontWeight: "bold", children: ["\u20B9", discounted] }), selected.offer > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Badge, { bg: saveTone.bg, color: saveTone.fg, fontSize: "xs", borderRadius: "full", px: 2, py: 0.5, children: ["SAVE ", selected.offer, "%"] }))] }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: theme.colors.textMuted, children: "(Incl. of all taxes)" }), (0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", fontWeight: "bold", textTransform: "uppercase", mb: 1, children: ["Packs : ", selected.label] }), (0, jsx_runtime_1.jsx)(react_2.HStack, { spacing: 2, children: price.map((pack, idx) => ((0, jsx_runtime_1.jsx)(react_2.Button, { size: "xs", variant: "outline", borderColor: idx === selectedIndex ? theme.colors.primary[400] : theme.colors.primary[200], bg: idx === selectedIndex ? theme.colors.primary[50] : theme.colors.background[50], color: (0, accentText_1.accentTextOnCanvas)(theme.colors.primary, idx === selectedIndex ? theme.colors.primary[50] : theme.colors.background[50]), borderRadius: "lg", fontWeight: "medium", _hover: {
-                                bg: theme.colors.primary[100],
-                            }, _active: {
-                                bg: theme.colors.primary[100],
-                            }, onClick: () => setSelectedIndex(idx), children: pack.label }, pack.var_id))) })] })] }));
-};
-exports.default = ProductDtlPrice;

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

@@ -1,13 +0,0 @@
-import { images } from "./ProductDetailsProps";
-import { batch } from "../ProductCard/ProductCardProps";
-interface ProductImageSliderProps {
-    images?: images[];
-    thumbHeight?: number;
-    imageSize?: number;
-    thumbnailsToShow?: number;
-    batch?: batch;
-    /** Used to build each image's alt text ("<name>, image 2 of 5"); falls back to "Product". */
-    productName?: string;
-}
-export default function ProductImageSlider({ images, thumbHeight, imageSize, thumbnailsToShow, batch, productName, }: ProductImageSliderProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/Components/ProductDetails/ProductImageSlider.js

@@ -1,240 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = ProductImageSlider;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("@chakra-ui/react");
-const react_2 = __importStar(require("react"));
-const lucide_react_1 = require("lucide-react");
-const useCustomTheme_1 = require("../../Theme/useCustomTheme");
-const motion_1 = require("../../Theme/tokens/primitives/motion");
-const accentText_1 = require("../../Theme/tokens/builders/accentText");
-const scrim_1 = require("../../Theme/tokens/builders/scrim");
-function ProductImageSlider({ images, thumbHeight = 60, imageSize = 480, thumbnailsToShow = 6, batch, productName = "Product", }) {
-    const [activeIndex, setActiveIndex] = (0, react_2.useState)(0);
-    const [thumbStartIndex, setThumbStartIndex] = (0, react_2.useState)(0);
-    const [transformOrigin, setTransformOrigin] = (0, react_2.useState)("center center");
-    const [isHovered, setIsHovered] = (0, react_2.useState)(false);
-    const [isPlaying, setIsPlaying] = (0, react_2.useState)(false);
-    const theme = (0, useCustomTheme_1.useCustomTheme)();
-    const isMobile = (0, react_1.useBreakpointValue)({ base: true, md: false });
-    // Opaque enough that white ink clears 4.5:1/3:1 against it on any photo, not just this one.
-    const controlScrim = (0, scrim_1.overlayScrim)(theme.colors);
-    const getYouTubeId = (url) => {
-        const patterns = [
-            /youtu\.be\/([A-Za-z0-9_-]{6,})/i,
-            /youtube\.com\/watch\?[^#]*v=([A-Za-z0-9_-]{6,})/i,
-            /youtube\.com\/embed\/([A-Za-z0-9_-]{6,})/i,
-            /youtube\.com\/shorts\/([A-Za-z0-9_-]{6,})/i,
-            /youtube\.com\/live\/([A-Za-z0-9_-]{6,})/i,
-        ];
-        for (const re of patterns) {
-            const m = url.match(re);
-            if (m === null || m === void 0 ? void 0 : m[1])
-                return m[1];
-        }
-        return undefined;
-    };
-    const getVimeoId = (url) => {
-        const patterns = [
-            /vimeo\.com\/(\d+)/i,
-            /player\.vimeo\.com\/video\/(\d+)/i,
-        ];
-        for (const re of patterns) {
-            const m = url.match(re);
-            if (m === null || m === void 0 ? void 0 : m[1])
-                return m[1];
-        }
-        return undefined;
-    };
-    const getDailymotionId = (url) => {
-        const patterns = [
-            /dailymotion\.com\/video\/([A-Za-z0-9]+)/i,
-            /dai\.ly\/([A-Za-z0-9]+)/i,
-        ];
-        for (const re of patterns) {
-            const m = url.match(re);
-            if (m === null || m === void 0 ? void 0 : m[1])
-                return m[1];
-        }
-        return undefined;
-    };
-    const isVideoUrl = (url) => /\.(mp4|webm|ogg)(\?|#|$)/i.test(url) ||
-        !!(getYouTubeId(url) || getVimeoId(url) || getDailymotionId(url));
-    const getThumbForItem = (url) => {
-        const yt = getYouTubeId(url);
-        if (yt)
-            return `https://img.youtube.com/vi/${yt}/hqdefault.jpg`;
-        const vm = getVimeoId(url);
-        if (vm)
-            return `https://vumbnail.com/${vm}.jpg`;
-        const dm = getDailymotionId(url);
-        if (dm)
-            return `https://www.dailymotion.com/thumbnail/video/${dm}`;
-        return undefined;
-    };
-    react_2.default.useEffect(() => {
-        setIsPlaying(false);
-    }, [activeIndex]);
-    const totalThumbs = (images === null || images === void 0 ? void 0 : images.length) || 0;
-    const hasMultiple = totalThumbs > 1;
-    const altFor = (index) => `${productName}, image ${index + 1} of ${totalThumbs}`;
-    const visibleThumbnails = images === null || images === void 0 ? void 0 : images.slice(thumbStartIndex, thumbStartIndex + thumbnailsToShow);
-    const canScrollUp = thumbStartIndex > 0;
-    const canScrollDown = thumbStartIndex + thumbnailsToShow < totalThumbs;
-    const handleThumbScroll = (direction) => {
-        if (direction === "up" && canScrollUp) {
-            setThumbStartIndex((prev) => {
-                const newStart = Math.max(prev - 1, 0);
-                setActiveIndex(newStart);
-                return newStart;
-            });
-        }
-        else if (direction === "down" && canScrollDown) {
-            setThumbStartIndex((prev) => {
-                const newStart = Math.min(prev + 1, totalThumbs - thumbnailsToShow);
-                setActiveIndex(newStart);
-                return newStart;
-            });
-        }
-    };
-    const updateActiveIndex = (newIndex) => {
-        setActiveIndex(newIndex);
-        // Scroll thumbnails window if active index is outside the current visible range
-        if (newIndex < thumbStartIndex) {
-            setThumbStartIndex(newIndex);
-        }
-        else if (newIndex >= thumbStartIndex + thumbnailsToShow) {
-            setThumbStartIndex(newIndex - thumbnailsToShow + 1);
-        }
-    };
-    return ((0, jsx_runtime_1.jsx)(react_1.Flex, { maxW: "6xl", mx: "auto", gap: 4, direction: isMobile ? "column" : "row", children: isMobile ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { w: "full", 
-                    // h={`${imageSize}px`}
-                    position: "relative", overflow: "hidden", borderRadius: "lg", boxShadow: "md", onMouseMove: (e) => {
-                        if (isMobile)
-                            return;
-                        const bounds = e.currentTarget.getBoundingClientRect();
-                        const x = ((e.clientX - bounds.left) / bounds.width) * 100;
-                        const y = ((e.clientY - bounds.top) / bounds.height) * 100;
-                        setTransformOrigin(`${x}% ${y}%`);
-                    }, onMouseEnter: () => !isMobile && setIsHovered(true), onMouseLeave: () => {
-                        setIsHovered(false);
-                        setTransformOrigin("center center");
-                    }, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { position: "absolute", top: "2", left: "2", zIndex: "1", children: (0, jsx_runtime_1.jsx)(react_1.Badge, { colorScheme: batch === null || batch === void 0 ? void 0 : batch.color, variant: "solid", children: batch === null || batch === void 0 ? void 0 : batch.label }) }), (() => {
-                            const item = images === null || images === void 0 ? void 0 : images[activeIndex];
-                            const url = (item === null || item === void 0 ? void 0 : item.imageUrl) || "";
-                            const isVideo = (item === null || item === void 0 ? void 0 : item.isImage) !== undefined ? item.isImage === false : isVideoUrl(url);
-                            const yt = getYouTubeId(url);
-                            const vimeo = getVimeoId(url);
-                            const dm = getDailymotionId(url);
-                            const thumb = (item === null || item === void 0 ? void 0 : item.thumb) || getThumbForItem(url);
-                            if (isVideo) {
-                                if (!isPlaying) {
-                                    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { position: "relative", w: "100%", h: `${imageSize}px`, children: [(0, jsx_runtime_1.jsx)(react_1.Image, { src: thumb || url, alt: "Video thumbnail", w: "100%", h: "100%", objectFit: "cover" }), (0, jsx_runtime_1.jsx)(react_1.Flex, { position: "absolute", inset: 0, align: "center", justify: "center", children: (0, jsx_runtime_1.jsx)(react_1.Box, { bg: theme.colors.background[50], borderRadius: "full", boxShadow: "lg", p: 3, cursor: "pointer", role: "button", tabIndex: 0, "aria-label": "Play video", onClick: () => setIsPlaying(true), onKeyDown: (e) => {
-                                                        if (e.key === "Enter" || e.key === " ") {
-                                                            e.preventDefault();
-                                                            setIsPlaying(true);
-                                                        }
-                                                    }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Play, { size: 24, color: (0, accentText_1.accentTextOnCanvas)(theme.colors.primary, theme.colors.background[50]) }) }) })] }));
-                                }
-                                return yt ? ((0, jsx_runtime_1.jsx)(react_1.AspectRatio, { ratio: 16 / 9, w: "100%", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "iframe", src: `https://www.youtube.com/embed/${yt}?rel=0&autoplay=1`, allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true, border: "0" }) })) : vimeo ? ((0, jsx_runtime_1.jsx)(react_1.AspectRatio, { ratio: 16 / 9, w: "100%", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "iframe", src: `https://player.vimeo.com/video/${vimeo}?autoplay=1`, allow: "autoplay; fullscreen; picture-in-picture", allowFullScreen: true, border: "0" }) })) : dm ? ((0, jsx_runtime_1.jsx)(react_1.AspectRatio, { ratio: 16 / 9, w: "100%", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "iframe", src: `https://www.dailymotion.com/embed/video/${dm}?autoplay=1`, allow: "autoplay; fullscreen; picture-in-picture", allowFullScreen: true, border: "0" }) })) : ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "video", src: url, w: "100%", h: `${imageSize}px`, controls: true, autoPlay: true, sx: { objectFit: "contain", backgroundColor: "black" } }));
-                            }
-                            return ((0, jsx_runtime_1.jsx)(react_1.Image, { src: url, alt: altFor(activeIndex), w: "100%", h: "100%", objectFit: "cover", transformOrigin: transformOrigin, transform: !isMobile && isHovered ? "scale(1.6)" : "scale(1)", transition: "transform 0.3s ease" }));
-                        })(), hasMultiple && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { size: 20, color: theme.colors.white }), "aria-label": "Previous", onClick: () => {
-                                        var _a;
-                                        const max = ((_a = images === null || images === void 0 ? void 0 : images.length) !== null && _a !== void 0 ? _a : 1);
-                                        const newIndex = activeIndex === 0 ? max - 1 : activeIndex - 1;
-                                        updateActiveIndex(newIndex);
-                                    }, position: "absolute", left: "2", top: "50%", transform: "translateY(-50%)", variant: "solid", isRound: true, bg: controlScrim, _hover: { transform: "translateY(-50%) scale(1.08)", bg: controlScrim }, _active: { bg: controlScrim } }), (0, jsx_runtime_1.jsx)(react_1.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 20, color: theme.colors.white }), "aria-label": "Next", onClick: () => {
-                                        var _a;
-                                        const max = ((_a = images === null || images === void 0 ? void 0 : images.length) !== null && _a !== void 0 ? _a : 1);
-                                        const newIndex = activeIndex === max - 1 ? 0 : activeIndex + 1;
-                                        updateActiveIndex(newIndex);
-                                    }, position: "absolute", right: "2", top: "50%", transform: "translateY(-50%)", variant: "solid", isRound: true, bg: controlScrim, _hover: { transform: "translateY(-50%) scale(1.08)", bg: controlScrim }, _active: { bg: controlScrim } })] }))] }), hasMultiple && ((0, jsx_runtime_1.jsxs)(react_1.HStack, { spacing: 2, align: "center", justify: "center", children: [(0, jsx_runtime_1.jsx)(react_1.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { size: 16, color: theme.colors.textMuted }), "aria-label": "Scroll Left", onClick: () => handleThumbScroll("up"), isDisabled: !canScrollUp, variant: "ghost", size: "sm" }), visibleThumbnails === null || visibleThumbnails === void 0 ? void 0 : visibleThumbnails.map((src, index) => {
-                            const actualIndex = thumbStartIndex + index;
-                            const url = src.imageUrl;
-                            const isVideo = src.isImage !== undefined ? src.isImage === false : isVideoUrl(url);
-                            const thumb = src.thumb || getThumbForItem(url);
-                            return ((0, jsx_runtime_1.jsx)(react_1.Box, { w: `${thumbHeight}px`, h: `${thumbHeight}px`, borderRadius: "lg", overflow: "hidden", cursor: "pointer", border: actualIndex === activeIndex
-                                    ? `0.063rem solid ${theme.colors.primary[500]}`
-                                    : "0.125rem solid transparent", opacity: actualIndex === activeIndex ? 1 : 0.5, onClick: () => setActiveIndex(actualIndex), _hover: { opacity: 1 }, transition: (0, motion_1.transitionFor)(["background-color", "transform"], "base"), position: "relative", children: isVideo ? (thumb ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Image, { src: thumb, alt: "Video thumbnail", w: "100%", h: "100%", objectFit: "cover" }), (0, jsx_runtime_1.jsx)(react_1.Flex, { position: "absolute", inset: 0, align: "center", justify: "center", pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(react_1.Box, { bg: theme.colors.background[50], borderRadius: "full", boxShadow: "md", p: 1.5, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Play, { size: 14, color: (0, accentText_1.accentTextOnCanvas)(theme.colors.primary, theme.colors.background[50]) }) }) })] })) : ((0, jsx_runtime_1.jsx)(react_1.Flex, { w: "100%", h: "100%", align: "center", justify: "center", bg: theme.colors.backgroundColor.subtle, children: (0, jsx_runtime_1.jsx)(react_1.Box, { bg: theme.colors.background[50], borderRadius: "full", boxShadow: "md", p: 1.5, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Play, { size: 14, color: (0, accentText_1.accentTextOnCanvas)(theme.colors.primary, theme.colors.background[50]) }) }) }))) : ((0, jsx_runtime_1.jsx)(react_1.Image, { src: url, alt: altFor(actualIndex), w: "100%", h: "100%", objectFit: "cover" })) }, actualIndex));
-                        }), (0, jsx_runtime_1.jsx)(react_1.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 16, color: theme.colors.textMuted }), "aria-label": "Scroll Right", onClick: () => handleThumbScroll("down"), isDisabled: !canScrollDown, variant: "ghost", size: "sm" })] }))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [hasMultiple && ((0, jsx_runtime_1.jsxs)(react_1.Box, { w: `${thumbHeight}px`, h: `${thumbHeight * thumbnailsToShow}px`, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "space-between", borderRadius: "lg", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_1.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { size: 16, color: theme.colors.textMuted }), "aria-label": "Scroll Up", onClick: () => handleThumbScroll("up"), isDisabled: !canScrollUp, variant: "ghost", size: "sm", m: 1 }), (0, jsx_runtime_1.jsx)(react_1.VStack, { spacing: 2, flex: "1", overflow: "hidden", children: visibleThumbnails === null || visibleThumbnails === void 0 ? void 0 : visibleThumbnails.map((src, index) => {
-                                const actualIndex = thumbStartIndex + index;
-                                const url = src.imageUrl;
-                                const isVideo = src.isImage !== undefined ? src.isImage === false : isVideoUrl(url);
-                                const thumb = src.thumb || getThumbForItem(url);
-                                return ((0, jsx_runtime_1.jsx)(react_1.Box, { w: `${thumbHeight}px`, h: `${thumbHeight}px`, borderRadius: "lg", overflow: "hidden", cursor: "pointer", border: actualIndex === activeIndex
-                                        ? `0.063rem solid ${theme.colors.primary[500]}`
-                                        : "0.125rem solid transparent", opacity: actualIndex === activeIndex ? 1 : 0.5, onClick: () => setActiveIndex(actualIndex), _hover: { opacity: 1 }, transition: (0, motion_1.transitionFor)(["background-color", "transform"], "base"), position: "relative", children: isVideo ? (thumb ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Image, { src: thumb, w: "100%", h: "100%", objectFit: "cover", alt: "Video thumbnail" }), (0, jsx_runtime_1.jsx)(react_1.Flex, { position: "absolute", inset: 0, align: "center", justify: "center", pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(react_1.Box, { bg: theme.colors.background[50], borderRadius: "full", boxShadow: "md", p: 1.5, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Play, { size: 14, color: (0, accentText_1.accentTextOnCanvas)(theme.colors.primary, theme.colors.background[50]) }) }) })] })) : ((0, jsx_runtime_1.jsx)(react_1.Flex, { w: "100%", h: "100%", align: "center", justify: "center", bg: theme.colors.backgroundColor.subtle, children: (0, jsx_runtime_1.jsx)(react_1.Box, { bg: theme.colors.background[50], borderRadius: "full", boxShadow: "md", p: 1.5, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Play, { size: 14, color: (0, accentText_1.accentTextOnCanvas)(theme.colors.primary, theme.colors.background[50]) }) }) }))) : ((0, jsx_runtime_1.jsx)(react_1.Image, { src: url, w: "100%", h: "100%", objectFit: "cover", alt: altFor(actualIndex) })) }, actualIndex));
-                            }) }), (0, jsx_runtime_1.jsx)(react_1.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16, color: theme.colors.textMuted }), "aria-label": "Scroll Down", onClick: () => handleThumbScroll("down"), isDisabled: !canScrollDown, variant: "ghost", size: "sm", m: 1 })] })), (0, jsx_runtime_1.jsxs)(react_1.Box, { w: `${imageSize}px`, h: `${imageSize}px`, position: "relative", overflow: "hidden", borderRadius: "lg", boxShadow: "md", onMouseMove: (e) => {
-                        const bounds = e.currentTarget.getBoundingClientRect();
-                        const x = ((e.clientX - bounds.left) / bounds.width) * 100;
-                        const y = ((e.clientY - bounds.top) / bounds.height) * 100;
-                        setTransformOrigin(`${x}% ${y}%`);
-                    }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => {
-                        setIsHovered(false);
-                        setTransformOrigin("center center");
-                    }, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { position: "absolute", top: "2", left: "2", zIndex: "1", children: (0, jsx_runtime_1.jsx)(react_1.Badge, { colorScheme: batch === null || batch === void 0 ? void 0 : batch.color, variant: "solid", children: batch === null || batch === void 0 ? void 0 : batch.label }) }), (() => {
-                            const item = images === null || images === void 0 ? void 0 : images[activeIndex];
-                            const url = (item === null || item === void 0 ? void 0 : item.imageUrl) || "";
-                            const isVideo = (item === null || item === void 0 ? void 0 : item.isImage) !== undefined ? item.isImage === false : isVideoUrl(url);
-                            const yt = getYouTubeId(url);
-                            const vimeo = getVimeoId(url);
-                            const dm = getDailymotionId(url);
-                            const thumb = (item === null || item === void 0 ? void 0 : item.thumb) || getThumbForItem(url);
-                            if (isVideo) {
-                                if (!isPlaying) {
-                                    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { position: "relative", w: "100%", h: `${imageSize}px`, children: [(0, jsx_runtime_1.jsx)(react_1.Image, { src: thumb || url, alt: "Video thumbnail", w: "100%", h: "100%", objectFit: "cover" }), (0, jsx_runtime_1.jsx)(react_1.Flex, { position: "absolute", inset: 0, align: "center", justify: "center", children: (0, jsx_runtime_1.jsx)(react_1.Box, { bg: theme.colors.background[50], borderRadius: "full", boxShadow: "lg", p: 3, cursor: "pointer", role: "button", tabIndex: 0, "aria-label": "Play video", onClick: () => setIsPlaying(true), onKeyDown: (e) => {
-                                                        if (e.key === "Enter" || e.key === " ") {
-                                                            e.preventDefault();
-                                                            setIsPlaying(true);
-                                                        }
-                                                    }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Play, { size: 24, color: (0, accentText_1.accentTextOnCanvas)(theme.colors.primary, theme.colors.background[50]) }) }) })] }));
-                                }
-                                return yt ? ((0, jsx_runtime_1.jsx)(react_1.AspectRatio, { ratio: 16 / 9, w: "100%", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "iframe", src: `https://www.youtube.com/embed/${yt}?rel=0&autoplay=1`, allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true, border: "0" }) })) : vimeo ? ((0, jsx_runtime_1.jsx)(react_1.AspectRatio, { ratio: 16 / 9, w: "100%", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "iframe", src: `https://player.vimeo.com/video/${vimeo}?autoplay=1`, allow: "autoplay; fullscreen; picture-in-picture", allowFullScreen: true, border: "0" }) })) : dm ? ((0, jsx_runtime_1.jsx)(react_1.AspectRatio, { ratio: 16 / 9, w: "100%", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "iframe", src: `https://www.dailymotion.com/embed/video/${dm}?autoplay=1`, allow: "autoplay; fullscreen; picture-in-picture", allowFullScreen: true, border: "0" }) })) : ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "video", src: url, w: "100%", h: `${imageSize}px`, controls: true, autoPlay: true, sx: { objectFit: "contain", backgroundColor: "black" } }));
-                            }
-                            return ((0, jsx_runtime_1.jsx)(react_1.Image, { src: url, alt: altFor(activeIndex), w: "100%", h: "100%", objectFit: "cover", transformOrigin: transformOrigin, transform: isHovered ? "scale(1.6)" : "scale(1)", transition: "transform 0.3s ease", cursor: isHovered ? "zoom-in" : "default" }));
-                        })(), hasMultiple && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { size: 20, color: theme.colors.white }), "aria-label": "Previous", onClick: () => {
-                                        var _a;
-                                        const max = ((_a = images === null || images === void 0 ? void 0 : images.length) !== null && _a !== void 0 ? _a : 1);
-                                        const newIndex = activeIndex === 0 ? max - 1 : activeIndex - 1;
-                                        updateActiveIndex(newIndex);
-                                    }, position: "absolute", left: "2", top: "50%", transform: "translateY(-50%)", variant: "solid", isRound: true, bg: controlScrim, _hover: { transform: "translateY(-50%) scale(1.08)", bg: controlScrim }, _active: { bg: controlScrim } }), (0, jsx_runtime_1.jsx)(react_1.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 20, color: theme.colors.white }), "aria-label": "Next", onClick: () => {
-                                        var _a;
-                                        const max = ((_a = images === null || images === void 0 ? void 0 : images.length) !== null && _a !== void 0 ? _a : 1);
-                                        const newIndex = activeIndex === max - 1 ? 0 : activeIndex + 1;
-                                        updateActiveIndex(newIndex);
-                                    }, position: "absolute", right: "2", top: "50%", transform: "translateY(-50%)", variant: "solid", isRound: true, bg: controlScrim, _hover: { transform: "translateY(-50%) scale(1.08)", bg: controlScrim }, _active: { bg: controlScrim } })] }))] })] })) }));
-}

package/dist/esm/Components/ProductCard/ProductLabel.js

@@ -1,18 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Text } from '@chakra-ui/react';
-const ProductLabel = ({ label, description, size }) => {
-    const fontSizes = {
-        xs: "md",
-        sm: "lg",
-        md: "xl",
-        lg: "2xl"
-    };
-    const descriptionSizes = {
-        xs: 'xs',
-        sm: 'sm',
-        md: 'md',
-        lg: 'lg',
-    };
-    return (_jsxs(Box, { children: [_jsx(Text, { fontWeight: "bold", fontSize: fontSizes[size], children: label }), description && _jsx(Text, { fontSize: descriptionSizes[size], fontStyle: "italic", children: description })] }));
-};
-export default ProductLabel;

package/dist/esm/Components/ProductCard/ProductPrice.js

@@ -1,121 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useRef, useState, useEffect } from 'react';
-import { Box, Text, Portal, useOutsideClick, Flex, Grid, HStack, Badge, useBreakpointValue, } from '@chakra-ui/react';
-import OverflowTooltipText from '../SideBar/components/OverflowTooltipText.js';
-import { useCustomTheme } from '../../Theme/useCustomTheme.js';
-import { accentTextOnCanvas } from '../../Theme/tokens/builders/accentText.js';
-import { rafThrottle } from '../../Utils/rafThrottle.js';
-import { transitionFor } from '../../Theme/tokens/primitives/motion.js';
-const sizeConfig = {
-    xs: {
-        font: "xs",
-        label: "sm",
-        price: "sm",
-        px: 2,
-        py: 1,
-        rowHeight: "2rem",
-        iconSize: "0.75rem",
-        dotSize: "0.375rem",
-    },
-    sm: {
-        font: "sm",
-        label: "md",
-        price: "md",
-        px: 3,
-        py: 1.5,
-        rowHeight: "2.5rem",
-        iconSize: "1rem",
-        dotSize: "0.5rem",
-    },
-    md: {
-        font: "md",
-        label: "lg",
-        price: "lg",
-        px: 4,
-        py: 2,
-        rowHeight: "3rem",
-        iconSize: "1.25rem",
-        dotSize: "0.625rem",
-    },
-    lg: {
-        font: "lg",
-        label: "xl",
-        price: "xl",
-        px: 5,
-        py: 2.5,
-        rowHeight: "3.5rem",
-        iconSize: "1.5rem",
-        dotSize: "0.75rem",
-    },
-};
-const ProductPrice = ({ options, size, onSelect, rightSlot }) => {
-    const cfg = sizeConfig[size];
-    const theme = useCustomTheme();
-    const [isOpen, setIsOpen] = useState(false);
-    const [selected, setSelected] = useState(options[0]);
-    const [dropdownPosition, setDropdownPosition] = useState({ top: 0, left: 0, width: 0 });
-    const buttonRef = useRef(null);
-    const dropdownRef = useRef(null);
-    const isSingleOption = options.length === 1;
-    const isMobile = useBreakpointValue({ base: true, md: false });
-    useOutsideClick({
-        ref: dropdownRef,
-        handler: () => setIsOpen(false),
-    });
-    const getDiscountedPrice = (option) => Math.round(option.price - (option.price * option.offer) / 100);
-    useEffect(() => {
-        const updatePosition = () => {
-            if (buttonRef.current) {
-                const rect = buttonRef.current.getBoundingClientRect();
-                setDropdownPosition({
-                    top: rect.bottom + 4,
-                    left: rect.left,
-                    width: rect.width
-                });
-            }
-        };
-        if (!isOpen)
-            return;
-        updatePosition();
-        const onReposition = rafThrottle(updatePosition);
-        window.addEventListener("resize", onReposition);
-        window.addEventListener("scroll", onReposition, {
-            capture: true, // every scrollable ancestor, not just the window
-            passive: true,
-        });
-        return () => {
-            onReposition.cancel();
-            window.removeEventListener("resize", onReposition);
-            window.removeEventListener("scroll", onReposition, true);
-        };
-    }, [isOpen]);
-    useEffect(() => {
-        onSelect === null || onSelect === void 0 ? void 0 : onSelect(selected);
-    }, [selected, onSelect]);
-    return (_jsxs(_Fragment, { children: [isSingleOption ? (_jsx(Box, { border: "0.063rem solid", borderColor: theme.colors.primary[300], bg: theme.colors.primary[50], px: cfg.px, rounded: "lg", display: "inline-block", w: "100%", children: _jsx(Text, { fontSize: cfg.label, fontWeight: "medium", children: options[0].label }) })) : (_jsxs(Box, { ref: buttonRef, role: "button", tabIndex: 0, "aria-haspopup": "listbox", "aria-expanded": isOpen, onClick: () => setIsOpen(!isOpen), onKeyDown: (e) => {
-                    if (e.key === "Enter" || e.key === " ") {
-                        e.preventDefault();
-                        setIsOpen((prev) => !prev);
-                    }
-                    else if (e.key === "Escape") {
-                        setIsOpen(false);
-                    }
-                }, border: "0.063rem solid", borderColor: theme.colors.primary[300], bg: theme.colors.primary[50], px: cfg.px, rounded: "lg", cursor: "pointer", display: "flex", justifyContent: "space-between", alignItems: "center", w: "100%", children: [_jsx(Box, { flex: "1", minW: 0, children: _jsx(OverflowTooltipText, { placement: "top", maxWidth: "100%", fontSize: cfg.label, fontWeight: "medium", whiteSpace: "nowrap", children: selected.label }) }), _jsx(Text, { "aria-hidden": "true", fontSize: cfg.font, color: accentTextOnCanvas(theme.colors.primary, theme.colors.primary[50]), transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)', transition: transitionFor(["transform"]), children: "\u25BE" })] })), !isSingleOption && isOpen && (_jsx(Portal, { children: _jsx(Box, { ref: dropdownRef, role: "listbox", position: "fixed", top: `${dropdownPosition.top}px`, left: `${dropdownPosition.left}px`, width: `${dropdownPosition.width}px`, bg: theme.colors.background[50], border: "0.063rem solid", borderColor: theme.colors.primary[300], borderRadius: "xl", overflow: "hidden", maxH: "13rem", overflowY: "auto", shadow: "md", zIndex: 100000, children: options.map((option) => {
-                        const discounted = getDiscountedPrice(option);
-                        const isSelected = selected.var_id === option.var_id;
-                        return (_jsxs(Grid, { role: "option", "aria-selected": isSelected, tabIndex: 0, px: 1, py: 0.5, cursor: "pointer", bg: isSelected ? theme.colors.primary[50] : theme.colors.background[50], borderLeft: isSelected ? '0.25rem solid' : '0.25rem solid transparent', borderLeftColor: isSelected ? theme.colors.primary[300] : "transparent", _hover: { bg: theme.colors.primary[100] }, onClick: () => {
-                                setSelected(option);
-                                setIsOpen(false);
-                            }, onKeyDown: (e) => {
-                                if (e.key === "Enter" || e.key === " ") {
-                                    e.preventDefault();
-                                    setSelected(option);
-                                    setIsOpen(false);
-                                }
-                            }, templateColumns: { base: '1fr auto', md: '1fr auto' }, 
-                            // columnGap={{ base: 2, md: 3 }}
-                            // rowGap={{ base: 1.5, md: 2 }}
-                            alignItems: "center", children: [_jsx(HStack, { gridColumn: 1, gridRow: 1, spacing: 2, align: "center", minW: 0, mb: 0, children: _jsx(Box, { flex: "1", minW: 0, children: _jsx(OverflowTooltipText, { placement: "top", maxWidth: "100%", fontSize: { base: "xs", md: "sm" }, fontWeight: "medium", whiteSpace: "nowrap", children: option.label }) }) }), _jsx(Box, { gridColumn: 1, gridRow: 2, mt: 0, textAlign: "left", children: _jsxs(HStack, { spacing: 2, align: "center", children: [option.offer > 0 && (_jsx(Badge, { bg: theme.colors.green[100], color: accentTextOnCanvas(theme.colors.green, theme.colors.green[100]), borderRadius: "full", px: { base: 0, md: 0.5 }, py: { base: 0, md: 0.25 }, fontWeight: "bold", fontSize: "11px", flexShrink: 0, children: isMobile ? `${option.offer}%` : `${option.offer}% OFF` })), _jsxs(Text, { fontSize: "sm", fontWeight: "bold", color: accentTextOnCanvas(theme.colors.red, isSelected ? theme.colors.red[50] : theme.colors.background[50]), whiteSpace: "nowrap", children: ["\u20B9", discounted] }), option.offer > 0 && (_jsxs(Text, { fontSize: "xs", color: theme.colors.textMuted, textDecoration: "line-through", whiteSpace: "nowrap", children: ["\u20B9", option.price] }))] }) }), _jsx(Box, { gridColumn: 2, gridRow: 1, ml: { base: 0, md: 0 }, justifySelf: "end", w: { base: "0.625rem", md: "0.75rem" }, h: { base: "0.625rem", md: "0.75rem" }, minW: { base: "0.625rem", md: "0.75rem" }, borderRadius: "full", border: "0.063rem solid", borderColor: isSelected ? theme.colors.primary[500] : theme.colors.boxborder[500], bg: theme.colors.background[50], display: "flex", alignItems: "center", justifyContent: "center", boxShadow: "none", children: isSelected && (_jsx(Box, { w: { base: "0.25rem", md: "0.3125rem" }, h: { base: "0.25rem", md: "0.3125rem" }, bg: theme.colors.primary[500], borderRadius: "full" })) })] }, option.var_id));
-                    }) }) })), _jsxs(Flex, { mt: 2, w: "full", gap: 3, direction: { base: "column", md: "row" }, align: { base: "flex-start", md: "center" }, justify: { base: "flex-start", md: rightSlot ? "space-between" : "flex-start" }, children: [_jsxs(Box, { display: "flex", alignItems: "center", fontSize: cfg.price, gap: 2, minW: 0, children: [selected.offer > 0 && (_jsxs(Text, { color: theme.colors.textMuted, textDecoration: "line-through", children: ["\u20B9", selected.price] })), _jsxs(Text, { color: accentTextOnCanvas(theme.colors.red, theme.colors.backgroundColor.main), fontWeight: "semibold", children: ["\u20B9", getDiscountedPrice(selected)] })] }), rightSlot && (_jsx(Box, { flexShrink: 0, mt: { base: 2, md: 0 }, children: rightSlot }))] })] }));
-};
-export default ProductPrice;

package/dist/esm/Components/ProductCard/ProductReview.js

@@ -1,28 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Flex, Text, Icon } from '@chakra-ui/react';
-import { BookCheck, Star } from 'lucide-react';
-import { useCustomTheme } from '../../Theme/useCustomTheme.js';
-import { accentTextOnCanvas } from '../../Theme/tokens/builders/accentText.js';
-import { contrastRatio } from '../../Theme/tokens/builders/color.js';
-import { AA_NON_TEXT } from '../../Theme/tokens/builders/outlineRung.js';
-import { neutralTokens } from '../../Theme/tokens/brands/neutrals.js';
-// The theme's `yellow` scale reverses index roles in dark mode (like every utility hue), so
-// pulling it through the theme would silently flip this decorative "filled star" from gold to
-// pale. A rating star is a universal, brand-independent gold — not something that should follow
-// canvas/mode — so it's pinned here instead. Needs a design-token addition (a mode-stable
-// "rating gold") to pixelize-design-library if this pattern is needed elsewhere.
-const RATING_STAR_FILL = neutralTokens.yellow[500];
-const ProductReview = ({ rating, reviewCount, mb = 0 }) => {
-    const { colors } = useCustomTheme();
-    const hasRating = rating !== undefined && rating !== null;
-    const hasReviewCount = reviewCount !== undefined && reviewCount !== null;
-    // Convert rating to number and ensure it's between 0 and 5
-    // Calculate fill percentage: (rating / 5) * 100%
-    const numericRating = hasRating ? Math.min(Math.max(Number(rating), 0), 5) : 0;
-    const fillPercentage = (numericRating / 6) * 100;
-    const chipBg = colors.teal[50];
-    const chipInk = accentTextOnCanvas(colors.teal, chipBg);
-    const starFill = contrastRatio(RATING_STAR_FILL, chipBg) >= AA_NON_TEXT ? RATING_STAR_FILL : chipInk;
-    return (_jsxs(Flex, { align: "center", gap: 2, mb: mb, children: [hasRating && (_jsxs(Flex, { align: "center", gap: 1, bg: chipBg, color: chipInk, px: 2, borderRadius: "full", children: [_jsxs(Box, { position: "relative", flexShrink: 0, display: "inline-block", width: "14px", height: "14px", lineHeight: 0, children: [_jsx(Box, { position: "absolute", top: 0, left: 0, width: "14px", height: "14px", children: _jsx(Star, { size: 14, fill: "none", strokeWidth: 1.5 }) }), fillPercentage > 0 && (_jsx(Box, { position: "absolute", top: 0, left: 0, width: `${fillPercentage}%`, height: "100%", overflow: "hidden", children: _jsx(Star, { size: 14, color: starFill, fill: starFill }) }))] }), _jsx(Text, { fontSize: "sm", fontWeight: "bold", children: numericRating })] })), hasRating && hasReviewCount && _jsx(Box, { h: "4", w: "0.063rem", bg: colors.boxborder[500] }), hasReviewCount && (_jsxs(Flex, { align: "center", gap: "1", children: [_jsx(Icon, { as: BookCheck, boxSize: 3.5 }), _jsxs(Text, { fontSize: "sm", color: colors.textMuted, children: ["(", reviewCount, ")"] })] }))] }));
-};
-export default ProductReview;

package/dist/esm/Components/ProductCard/ProductTags.js

@@ -1,48 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import { Box, Flex } from '@chakra-ui/react';
-import ToolTip from '../ToolTip/ToolTip.js';
-import { useCustomTheme } from '../../Theme/useCustomTheme.js';
-const ProductTags = ({ tags, className, size = 'sm' }) => {
-    const getRows = (tags) => {
-        const count = tags.length;
-        if (count === 1)
-            return [tags];
-        if (count === 2)
-            return [tags];
-        if (count === 3)
-            return [[tags[0]], tags.slice(1)];
-        if (count === 4)
-            return [tags.slice(0, 2), tags.slice(2, 4)];
-        return [];
-    };
-    return (_jsx(Flex, { direction: "column", gap: "1", className: className, w: "full", children: getRows(tags).map((row, rowIndex) => (_jsx(Flex, { gap: "1", children: row.map((tag, tagIndex) => (_jsx(Tag, { fullWidth: row.length === 1, size: size, children: tag }, tagIndex))) }, rowIndex))) }));
-};
-const Tag = ({ children, fullWidth = false, size = 'sm', }) => {
-    const { colors } = useCustomTheme();
-    const tagText = colors.text[900];
-    const tagBorder = colors.boxborder[500];
-    // Size map for tags
-    const tagSizes = {
-        xs: { fontSize: '0.625rem', px: '0.5rem', py: '0.125rem' },
-        sm: { fontSize: '0.75rem', px: '0.6rem', py: '0.2rem' },
-        md: { fontSize: '0.875rem', px: '0.75rem', py: '0.3rem' },
-        lg: { fontSize: '0.938rem', px: '0.938rem', py: '0.4rem' },
-    };
-    const ref = React.useRef(null);
-    const [truncated, setTruncated] = React.useState(false);
-    React.useEffect(() => {
-        const el = ref.current;
-        if (!el)
-            return;
-        const check = () => setTruncated(el.scrollWidth > el.clientWidth);
-        check();
-        window.addEventListener('resize', check);
-        return () => {
-            window.removeEventListener('resize', check);
-        };
-    }, [children]);
-    const content = (_jsx(Box, { ref: ref, flex: fullWidth ? '1' : '1', border: "0.063rem solid", borderColor: tagBorder, color: tagText, fontSize: tagSizes[size].fontSize, fontWeight: "semibold", borderRadius: "full", px: tagSizes[size].px, py: tagSizes[size].py, textAlign: "center", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", children: children }));
-    return truncated ? (_jsx(ToolTip, { label: String(children), hasArrow: true, openDelay: 300, placement: 'bottom', children: content })) : (content);
-};
-export default ProductTags;

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

@@ -1,22 +0,0 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { useState, useEffect } from "react";
-import { Box, Text, HStack, Badge, Button, VStack, } from "@chakra-ui/react";
-import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
-import { resolveSoftTone } from "../../Theme/tokens/builders/tone.js";
-const ProductDtlPrice = ({ price, onSelect }) => {
-    const [selectedIndex, setSelectedIndex] = useState(0);
-    const selected = price[selectedIndex];
-    const discounted = Math.round(selected.price - (selected.price * selected.offer) / 100);
-    const theme = useCustomTheme();
-    const saveTone = resolveSoftTone(theme.colors, theme.colors.semantic.success);
-    useEffect(() => {
-        onSelect === null || onSelect === void 0 ? void 0 : onSelect(selected);
-    }, [selected, onSelect]);
-    return (_jsxs(VStack, { align: "start", spacing: 3, p: 4, borderRadius: "lg", w: "full", children: [_jsxs(HStack, { spacing: 2, align: "center", children: [selected.offer > 0 && (_jsxs(Text, { fontSize: "lg", color: theme.colors.textMuted, as: "s", children: ["\u20B9", selected.price] })), _jsxs(Text, { fontSize: "xl", color: accentTextOnCanvas(theme.colors.red, theme.colors.backgroundColor.main), fontWeight: "bold", children: ["\u20B9", discounted] }), selected.offer > 0 && (_jsxs(Badge, { bg: saveTone.bg, color: saveTone.fg, fontSize: "xs", borderRadius: "full", px: 2, py: 0.5, children: ["SAVE ", selected.offer, "%"] }))] }), _jsx(Text, { fontSize: "sm", color: theme.colors.textMuted, children: "(Incl. of all taxes)" }), _jsxs(Box, { children: [_jsxs(Text, { fontSize: "sm", fontWeight: "bold", textTransform: "uppercase", mb: 1, children: ["Packs : ", selected.label] }), _jsx(HStack, { spacing: 2, children: price.map((pack, idx) => (_jsx(Button, { size: "xs", variant: "outline", borderColor: idx === selectedIndex ? theme.colors.primary[400] : theme.colors.primary[200], bg: idx === selectedIndex ? theme.colors.primary[50] : theme.colors.background[50], color: accentTextOnCanvas(theme.colors.primary, idx === selectedIndex ? theme.colors.primary[50] : theme.colors.background[50]), borderRadius: "lg", fontWeight: "medium", _hover: {
-                                bg: theme.colors.primary[100],
-                            }, _active: {
-                                bg: theme.colors.primary[100],
-                            }, onClick: () => setSelectedIndex(idx), children: pack.label }, pack.var_id))) })] })] }));
-};
-export default ProductDtlPrice;