pixelize-design-library 3.0.1-beta.1 → 3.1.0

package/dist/Components/ProductCard/ProductTags.js

@@ -1,54 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var react_2 = require("@chakra-ui/react");
-var ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
-var ProductTags = function (_a) {
-    var tags = _a.tags, className = _a.className, _b = _a.size, size = _b === void 0 ? 'sm' : _b;
-    var getRows = function (tags) {
-        var 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 (react_1.default.createElement(react_2.Flex, { direction: "column", gap: "1", className: className, w: "full" }, getRows(tags).map(function (row, rowIndex) { return (react_1.default.createElement(react_2.Flex, { key: rowIndex, gap: "1" }, row.map(function (tag, tagIndex) { return (react_1.default.createElement(Tag, { key: tagIndex, fullWidth: row.length === 1, size: size }, tag)); }))); })));
-};
-var Tag = function (_a) {
-    var _b, _c, _d, _e;
-    var children = _a.children, _f = _a.fullWidth, fullWidth = _f === void 0 ? false : _f, _g = _a.size, size = _g === void 0 ? 'sm' : _g;
-    var theme = (0, react_2.useTheme)();
-    var tagBorder = (_d = (_c = (_b = theme.colors.semantic) === null || _b === void 0 ? void 0 : _b.error) === null || _c === void 0 ? void 0 : _c[200]) !== null && _d !== void 0 ? _d : (_e = theme.colors.red) === null || _e === void 0 ? void 0 : _e[200];
-    var tagText = theme.colors.black;
-    // Size map for tags
-    var 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' },
-    };
-    var ref = react_1.default.useRef(null);
-    var _h = react_1.default.useState(false), truncated = _h[0], setTruncated = _h[1];
-    react_1.default.useEffect(function () {
-        var el = ref.current;
-        if (!el)
-            return;
-        var check = function () { return setTruncated(el.scrollWidth > el.clientWidth); };
-        check();
-        window.addEventListener('resize', check);
-        return function () {
-            window.removeEventListener('resize', check);
-        };
-    }, [children]);
-    var content = (react_1.default.createElement(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));
-    return truncated ? (react_1.default.createElement(ToolTip_1.default, { label: String(children), hasArrow: true, openDelay: 300, placement: 'bottom' }, content)) : (content);
-};
-exports.default = ProductTags;

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

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

package/dist/Components/ProductDetails/ProductDtlPrice.js

@@ -1,71 +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 });
-var react_1 = __importStar(require("react"));
-var react_2 = require("@chakra-ui/react");
-var useCustomTheme_1 = require("../../Theme/useCustomTheme");
-var ProductDtlPrice = function (_a) {
-    var price = _a.price, onSelect = _a.onSelect;
-    var _b = (0, react_1.useState)(0), selectedIndex = _b[0], setSelectedIndex = _b[1];
-    var selected = price[selectedIndex];
-    var discounted = Math.round(selected.price - (selected.price * selected.offer) / 100);
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
-    (0, react_1.useEffect)(function () {
-        onSelect === null || onSelect === void 0 ? void 0 : onSelect(selected);
-    }, [selected, onSelect]);
-    return (react_1.default.createElement(react_2.VStack, { align: "start", spacing: 3, p: 4, borderRadius: "md", w: "full" },
-        react_1.default.createElement(react_2.HStack, { spacing: 2, align: "center" },
-            selected.offer > 0 && (react_1.default.createElement(react_2.Text, { fontSize: "lg", color: theme.colors.gray[500], as: "s" },
-                "\u20B9",
-                selected.price)),
-            react_1.default.createElement(react_2.Text, { fontSize: "xl", color: theme.colors.red[500], fontWeight: "bold" },
-                "\u20B9",
-                discounted),
-            selected.offer > 0 && (react_1.default.createElement(react_2.Badge, { colorScheme: "pink", fontSize: "xs", borderRadius: "sm", px: 2, py: 0.5 },
-                "SAVE ",
-                selected.offer,
-                "%"))),
-        react_1.default.createElement(react_2.Text, { fontSize: "sm", color: theme.colors.gray[600] }, "(Incl. of all taxes)"),
-        react_1.default.createElement(react_2.Box, null,
-            react_1.default.createElement(react_2.Text, { fontSize: "sm", fontWeight: "bold", textTransform: "uppercase", mb: 1 },
-                "Packs : ",
-                selected.label),
-            react_1.default.createElement(react_2.HStack, { spacing: 2 }, price.map(function (pack, idx) { return (react_1.default.createElement(react_2.Button, { key: pack.var_id, size: "xs", variant: "outline", borderColor: idx === selectedIndex ? "orange.400" : "orange.200", bg: idx === selectedIndex ? "orange.50" : "white", color: "orange.600", borderRadius: "md", fontWeight: "medium", _hover: {
-                    bg: "orange.100",
-                }, _active: {
-                    bg: "orange.100",
-                }, onClick: function () { return setSelectedIndex(idx); } }, pack.label)); })))));
-};
-exports.default = ProductDtlPrice;

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

@@ -1,12 +0,0 @@
-import React from "react";
-import { images } from "./ProductDetailsProps";
-import { batch } from "../ProductCard/ProductCardProps";
-interface ProductImageSliderProps {
-    images?: images[];
-    thumbHeight?: number;
-    imageSize?: number;
-    thumbnailsToShow?: number;
-    batch?: batch;
-}
-export default function ProductImageSlider({ images, thumbHeight, imageSize, thumbnailsToShow, batch, }: ProductImageSliderProps): React.JSX.Element;
-export {};

package/dist/Components/ProductDetails/ProductImageSlider.js

@@ -1,277 +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;
-var react_1 = require("@chakra-ui/react");
-var react_2 = __importStar(require("react"));
-var lucide_react_1 = require("lucide-react");
-var useCustomTheme_1 = require("../../Theme/useCustomTheme");
-function ProductImageSlider(_a) {
-    var images = _a.images, _b = _a.thumbHeight, thumbHeight = _b === void 0 ? 60 : _b, _c = _a.imageSize, imageSize = _c === void 0 ? 480 : _c, _d = _a.thumbnailsToShow, thumbnailsToShow = _d === void 0 ? 6 : _d, batch = _a.batch;
-    var _e = (0, react_2.useState)(0), activeIndex = _e[0], setActiveIndex = _e[1];
-    var _f = (0, react_2.useState)(0), thumbStartIndex = _f[0], setThumbStartIndex = _f[1];
-    var _g = (0, react_2.useState)("center center"), transformOrigin = _g[0], setTransformOrigin = _g[1];
-    var _h = (0, react_2.useState)(false), isHovered = _h[0], setIsHovered = _h[1];
-    var _j = (0, react_2.useState)(false), isPlaying = _j[0], setIsPlaying = _j[1];
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var isMobile = (0, react_1.useBreakpointValue)({ base: true, md: false });
-    var getYouTubeId = function (url) {
-        var 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 (var _i = 0, patterns_1 = patterns; _i < patterns_1.length; _i++) {
-            var re = patterns_1[_i];
-            var m = url.match(re);
-            if (m === null || m === void 0 ? void 0 : m[1])
-                return m[1];
-        }
-        return undefined;
-    };
-    var getVimeoId = function (url) {
-        var patterns = [
-            /vimeo\.com\/(\d+)/i,
-            /player\.vimeo\.com\/video\/(\d+)/i,
-        ];
-        for (var _i = 0, patterns_2 = patterns; _i < patterns_2.length; _i++) {
-            var re = patterns_2[_i];
-            var m = url.match(re);
-            if (m === null || m === void 0 ? void 0 : m[1])
-                return m[1];
-        }
-        return undefined;
-    };
-    var getDailymotionId = function (url) {
-        var patterns = [
-            /dailymotion\.com\/video\/([A-Za-z0-9]+)/i,
-            /dai\.ly\/([A-Za-z0-9]+)/i,
-        ];
-        for (var _i = 0, patterns_3 = patterns; _i < patterns_3.length; _i++) {
-            var re = patterns_3[_i];
-            var m = url.match(re);
-            if (m === null || m === void 0 ? void 0 : m[1])
-                return m[1];
-        }
-        return undefined;
-    };
-    var isVideoUrl = function (url) {
-        return /\.(mp4|webm|ogg)(\?|#|$)/i.test(url) ||
-            !!(getYouTubeId(url) || getVimeoId(url) || getDailymotionId(url));
-    };
-    var getThumbForItem = function (url) {
-        var yt = getYouTubeId(url);
-        if (yt)
-            return "https://img.youtube.com/vi/".concat(yt, "/hqdefault.jpg");
-        var vm = getVimeoId(url);
-        if (vm)
-            return "https://vumbnail.com/".concat(vm, ".jpg");
-        var dm = getDailymotionId(url);
-        if (dm)
-            return "https://www.dailymotion.com/thumbnail/video/".concat(dm);
-        return undefined;
-    };
-    react_2.default.useEffect(function () {
-        setIsPlaying(false);
-    }, [activeIndex]);
-    var totalThumbs = (images === null || images === void 0 ? void 0 : images.length) || 0;
-    var hasMultiple = totalThumbs > 1;
-    var visibleThumbnails = images === null || images === void 0 ? void 0 : images.slice(thumbStartIndex, thumbStartIndex + thumbnailsToShow);
-    var canScrollUp = thumbStartIndex > 0;
-    var canScrollDown = thumbStartIndex + thumbnailsToShow < totalThumbs;
-    var handleThumbScroll = function (direction) {
-        if (direction === "up" && canScrollUp) {
-            setThumbStartIndex(function (prev) {
-                var newStart = Math.max(prev - 1, 0);
-                setActiveIndex(newStart);
-                return newStart;
-            });
-        }
-        else if (direction === "down" && canScrollDown) {
-            setThumbStartIndex(function (prev) {
-                var newStart = Math.min(prev + 1, totalThumbs - thumbnailsToShow);
-                setActiveIndex(newStart);
-                return newStart;
-            });
-        }
-    };
-    var updateActiveIndex = function (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 (react_2.default.createElement(react_1.Flex, { maxW: "6xl", mx: "auto", gap: 4, direction: isMobile ? "column" : "row" }, isMobile ? (react_2.default.createElement(react_2.default.Fragment, null,
-        react_2.default.createElement(react_1.Box, { w: "full", 
-            // h={`${imageSize}px`}
-            position: "relative", overflow: "hidden", borderRadius: "md", boxShadow: "md", onMouseMove: function (e) {
-                if (isMobile)
-                    return;
-                var bounds = e.currentTarget.getBoundingClientRect();
-                var x = ((e.clientX - bounds.left) / bounds.width) * 100;
-                var y = ((e.clientY - bounds.top) / bounds.height) * 100;
-                setTransformOrigin("".concat(x, "% ").concat(y, "%"));
-            }, onMouseEnter: function () { return !isMobile && setIsHovered(true); }, onMouseLeave: function () {
-                setIsHovered(false);
-                setTransformOrigin("center center");
-            } },
-            react_2.default.createElement(react_1.Box, { position: "absolute", top: "2", left: "2", zIndex: "1" },
-                react_2.default.createElement(react_1.Badge, { colorScheme: batch === null || batch === void 0 ? void 0 : batch.color, variant: "solid" }, batch === null || batch === void 0 ? void 0 : batch.label)),
-            (function () {
-                var item = images === null || images === void 0 ? void 0 : images[activeIndex];
-                var url = (item === null || item === void 0 ? void 0 : item.imageUrl) || "";
-                var isVideo = (item === null || item === void 0 ? void 0 : item.isImage) !== undefined ? item.isImage === false : isVideoUrl(url);
-                var yt = getYouTubeId(url);
-                var vimeo = getVimeoId(url);
-                var dm = getDailymotionId(url);
-                var thumb = (item === null || item === void 0 ? void 0 : item.thumb) || getThumbForItem(url);
-                if (isVideo) {
-                    if (!isPlaying) {
-                        return (react_2.default.createElement(react_1.Box, { position: "relative", w: "100%", h: "".concat(imageSize, "px") },
-                            react_2.default.createElement(react_1.Image, { src: thumb || url, w: "100%", h: "100%", objectFit: "cover" }),
-                            react_2.default.createElement(react_1.Flex, { position: "absolute", inset: 0, align: "center", justify: "center" },
-                                react_2.default.createElement(react_1.Box, { bg: theme.colors.white, borderRadius: "full", boxShadow: "lg", p: 3, cursor: "pointer", onClick: function () { return setIsPlaying(true); } },
-                                    react_2.default.createElement(lucide_react_1.Play, { size: 24, color: theme.colors.red[500] })))));
-                    }
-                    return yt ? (react_2.default.createElement(react_1.AspectRatio, { ratio: 16 / 9, w: "100%" },
-                        react_2.default.createElement(react_1.Box, { as: "iframe", src: "https://www.youtube.com/embed/".concat(yt, "?rel=0&autoplay=1"), allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true, border: "0" }))) : vimeo ? (react_2.default.createElement(react_1.AspectRatio, { ratio: 16 / 9, w: "100%" },
-                        react_2.default.createElement(react_1.Box, { as: "iframe", src: "https://player.vimeo.com/video/".concat(vimeo, "?autoplay=1"), allow: "autoplay; fullscreen; picture-in-picture", allowFullScreen: true, border: "0" }))) : dm ? (react_2.default.createElement(react_1.AspectRatio, { ratio: 16 / 9, w: "100%" },
-                        react_2.default.createElement(react_1.Box, { as: "iframe", src: "https://www.dailymotion.com/embed/video/".concat(dm, "?autoplay=1"), allow: "autoplay; fullscreen; picture-in-picture", allowFullScreen: true, border: "0" }))) : (react_2.default.createElement(react_1.Box, { as: "video", src: url, w: "100%", h: "".concat(imageSize, "px"), controls: true, autoPlay: true, sx: { objectFit: "contain", backgroundColor: "black" } }));
-                }
-                return (react_2.default.createElement(react_1.Image, { src: url, w: "100%", h: "100%", objectFit: "cover", transformOrigin: transformOrigin, transform: !isMobile && isHovered ? "scale(1.6)" : "scale(1)", transition: "transform 0.3s ease" }));
-            })(),
-            hasMultiple && (react_2.default.createElement(react_2.default.Fragment, null,
-                react_2.default.createElement(react_1.IconButton, { icon: react_2.default.createElement(lucide_react_1.ChevronLeft, { size: 20, color: theme.colors.gray[500] }), "aria-label": "Previous", onClick: function () {
-                        var _a;
-                        var max = ((_a = images === null || images === void 0 ? void 0 : images.length) !== null && _a !== void 0 ? _a : 1);
-                        var newIndex = activeIndex === 0 ? max - 1 : activeIndex - 1;
-                        updateActiveIndex(newIndex);
-                    }, position: "absolute", left: "2", top: "50%", transform: "translateY(-50%)", variant: "ghost", colorScheme: "gray" }),
-                react_2.default.createElement(react_1.IconButton, { icon: react_2.default.createElement(lucide_react_1.ChevronRight, { size: 20, color: theme.colors.gray[500] }), "aria-label": "Next", onClick: function () {
-                        var _a;
-                        var max = ((_a = images === null || images === void 0 ? void 0 : images.length) !== null && _a !== void 0 ? _a : 1);
-                        var newIndex = activeIndex === max - 1 ? 0 : activeIndex + 1;
-                        updateActiveIndex(newIndex);
-                    }, position: "absolute", right: "2", top: "50%", transform: "translateY(-50%)", variant: "ghost", colorScheme: "gray" })))),
-        hasMultiple && (react_2.default.createElement(react_1.HStack, { spacing: 2, align: "center", justify: "center" },
-            react_2.default.createElement(react_1.IconButton, { icon: react_2.default.createElement(lucide_react_1.ChevronLeft, { size: 16, color: theme.colors.gray[500] }), "aria-label": "Scroll Left", onClick: function () { return handleThumbScroll("up"); }, isDisabled: !canScrollUp, variant: "ghost", size: "sm" }), visibleThumbnails === null || visibleThumbnails === void 0 ? void 0 :
-            visibleThumbnails.map(function (src, index) {
-                var actualIndex = thumbStartIndex + index;
-                var url = src.imageUrl;
-                var isVideo = src.isImage !== undefined ? src.isImage === false : isVideoUrl(url);
-                var thumb = src.thumb || getThumbForItem(url);
-                return (react_2.default.createElement(react_1.Box, { key: actualIndex, w: "".concat(thumbHeight, "px"), h: "".concat(thumbHeight, "px"), borderRadius: "md", overflow: "hidden", cursor: "pointer", border: actualIndex === activeIndex
-                        ? "0.125rem solid ".concat(theme.colors.gray[500])
-                        : "0.125rem solid transparent", opacity: actualIndex === activeIndex ? 1 : 0.5, onClick: function () { return setActiveIndex(actualIndex); }, _hover: { opacity: 1 }, transition: "all 0.2s", position: "relative" }, isVideo ? (thumb ? (react_2.default.createElement(react_2.default.Fragment, null,
-                    react_2.default.createElement(react_1.Image, { src: thumb, w: "100%", h: "100%", objectFit: "cover" }),
-                    react_2.default.createElement(react_1.Flex, { position: "absolute", inset: 0, align: "center", justify: "center", pointerEvents: "none" },
-                        react_2.default.createElement(react_1.Box, { bg: theme.colors.white, borderRadius: "full", boxShadow: "md", p: 1.5 },
-                            react_2.default.createElement(lucide_react_1.Play, { size: 14, color: theme.colors.red[500] }))))) : (react_2.default.createElement(react_1.Flex, { w: "100%", h: "100%", align: "center", justify: "center", bg: theme.colors.gray[100] },
-                    react_2.default.createElement(react_1.Box, { bg: theme.colors.white, borderRadius: "full", boxShadow: "md", p: 1.5 },
-                        react_2.default.createElement(lucide_react_1.Play, { size: 14, color: theme.colors.red[500] }))))) : (react_2.default.createElement(react_1.Image, { src: url, w: "100%", h: "100%", objectFit: "cover" }))));
-            }),
-            react_2.default.createElement(react_1.IconButton, { icon: react_2.default.createElement(lucide_react_1.ChevronRight, { size: 16, color: theme.colors.gray[500] }), "aria-label": "Scroll Right", onClick: function () { return handleThumbScroll("down"); }, isDisabled: !canScrollDown, variant: "ghost", size: "sm" }))))) : (react_2.default.createElement(react_2.default.Fragment, null,
-        hasMultiple && (react_2.default.createElement(react_1.Box, { w: "".concat(thumbHeight, "px"), h: "".concat(thumbHeight * thumbnailsToShow, "px"), display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "space-between", borderRadius: "md", overflow: "hidden" },
-            react_2.default.createElement(react_1.IconButton, { icon: react_2.default.createElement(lucide_react_1.ChevronUp, { size: 16, color: theme.colors.gray[500] }), "aria-label": "Scroll Up", onClick: function () { return handleThumbScroll("up"); }, isDisabled: !canScrollUp, variant: "ghost", size: "sm", m: 1 }),
-            react_2.default.createElement(react_1.VStack, { spacing: 2, flex: "1", overflow: "hidden" }, visibleThumbnails === null || visibleThumbnails === void 0 ? void 0 : visibleThumbnails.map(function (src, index) {
-                var actualIndex = thumbStartIndex + index;
-                var url = src.imageUrl;
-                var isVideo = src.isImage !== undefined ? src.isImage === false : isVideoUrl(url);
-                var thumb = src.thumb || getThumbForItem(url);
-                return (react_2.default.createElement(react_1.Box, { key: actualIndex, w: "".concat(thumbHeight, "px"), h: "".concat(thumbHeight, "px"), borderRadius: "md", overflow: "hidden", cursor: "pointer", border: actualIndex === activeIndex
-                        ? "0.125rem solid ".concat(theme.colors.gray[500])
-                        : "0.125rem solid transparent", opacity: actualIndex === activeIndex ? 1 : 0.5, onClick: function () { return setActiveIndex(actualIndex); }, _hover: { opacity: 1 }, transition: "all 0.2s", position: "relative" }, isVideo ? (thumb ? (react_2.default.createElement(react_2.default.Fragment, null,
-                    react_2.default.createElement(react_1.Image, { src: thumb, w: "100%", h: "100%", objectFit: "cover", alt: "Thumb ".concat(actualIndex) }),
-                    react_2.default.createElement(react_1.Flex, { position: "absolute", inset: 0, align: "center", justify: "center", pointerEvents: "none" },
-                        react_2.default.createElement(react_1.Box, { bg: theme.colors.white, borderRadius: "full", boxShadow: "md", p: 1.5 },
-                            react_2.default.createElement(lucide_react_1.Play, { size: 14, color: theme.colors.red[500] }))))) : (react_2.default.createElement(react_1.Flex, { w: "100%", h: "100%", align: "center", justify: "center", bg: theme.colors.gray[100] },
-                    react_2.default.createElement(react_1.Box, { bg: theme.colors.white, borderRadius: "full", boxShadow: "md", p: 1.5 },
-                        react_2.default.createElement(lucide_react_1.Play, { size: 14, color: theme.colors.red[500] }))))) : (react_2.default.createElement(react_1.Image, { src: url, w: "100%", h: "100%", objectFit: "cover", alt: "Thumb ".concat(actualIndex) }))));
-            })),
-            react_2.default.createElement(react_1.IconButton, { icon: react_2.default.createElement(lucide_react_1.ChevronDown, { size: 16, color: theme.colors.gray[500] }), "aria-label": "Scroll Down", onClick: function () { return handleThumbScroll("down"); }, isDisabled: !canScrollDown, variant: "ghost", size: "sm", m: 1 }))),
-        react_2.default.createElement(react_1.Box, { w: "".concat(imageSize, "px"), h: "".concat(imageSize, "px"), position: "relative", overflow: "hidden", borderRadius: "md", boxShadow: "md", onMouseMove: function (e) {
-                var bounds = e.currentTarget.getBoundingClientRect();
-                var x = ((e.clientX - bounds.left) / bounds.width) * 100;
-                var y = ((e.clientY - bounds.top) / bounds.height) * 100;
-                setTransformOrigin("".concat(x, "% ").concat(y, "%"));
-            }, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () {
-                setIsHovered(false);
-                setTransformOrigin("center center");
-            } },
-            react_2.default.createElement(react_1.Box, { position: "absolute", top: "2", left: "2", zIndex: "1" },
-                react_2.default.createElement(react_1.Badge, { colorScheme: batch === null || batch === void 0 ? void 0 : batch.color, variant: "solid" }, batch === null || batch === void 0 ? void 0 : batch.label)),
-            (function () {
-                var item = images === null || images === void 0 ? void 0 : images[activeIndex];
-                var url = (item === null || item === void 0 ? void 0 : item.imageUrl) || "";
-                var isVideo = (item === null || item === void 0 ? void 0 : item.isImage) !== undefined ? item.isImage === false : isVideoUrl(url);
-                var yt = getYouTubeId(url);
-                var vimeo = getVimeoId(url);
-                var dm = getDailymotionId(url);
-                var thumb = (item === null || item === void 0 ? void 0 : item.thumb) || getThumbForItem(url);
-                if (isVideo) {
-                    if (!isPlaying) {
-                        return (react_2.default.createElement(react_1.Box, { position: "relative", w: "100%", h: "".concat(imageSize, "px") },
-                            react_2.default.createElement(react_1.Image, { src: thumb || url, w: "100%", h: "100%", objectFit: "cover" }),
-                            react_2.default.createElement(react_1.Flex, { position: "absolute", inset: 0, align: "center", justify: "center" },
-                                react_2.default.createElement(react_1.Box, { bg: theme.colors.white, borderRadius: "full", boxShadow: "lg", p: 3, cursor: "pointer", onClick: function () { return setIsPlaying(true); } },
-                                    react_2.default.createElement(lucide_react_1.Play, { size: 24, color: theme.colors.red[500] })))));
-                    }
-                    return yt ? (react_2.default.createElement(react_1.AspectRatio, { ratio: 16 / 9, w: "100%" },
-                        react_2.default.createElement(react_1.Box, { as: "iframe", src: "https://www.youtube.com/embed/".concat(yt, "?rel=0&autoplay=1"), allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true, border: "0" }))) : vimeo ? (react_2.default.createElement(react_1.AspectRatio, { ratio: 16 / 9, w: "100%" },
-                        react_2.default.createElement(react_1.Box, { as: "iframe", src: "https://player.vimeo.com/video/".concat(vimeo, "?autoplay=1"), allow: "autoplay; fullscreen; picture-in-picture", allowFullScreen: true, border: "0" }))) : dm ? (react_2.default.createElement(react_1.AspectRatio, { ratio: 16 / 9, w: "100%" },
-                        react_2.default.createElement(react_1.Box, { as: "iframe", src: "https://www.dailymotion.com/embed/video/".concat(dm, "?autoplay=1"), allow: "autoplay; fullscreen; picture-in-picture", allowFullScreen: true, border: "0" }))) : (react_2.default.createElement(react_1.Box, { as: "video", src: url, w: "100%", h: "".concat(imageSize, "px"), controls: true, autoPlay: true, sx: { objectFit: "contain", backgroundColor: "black" } }));
-                }
-                return (react_2.default.createElement(react_1.Image, { src: url, w: "100%", h: "100%", objectFit: "cover", transformOrigin: transformOrigin, transform: isHovered ? "scale(1.6)" : "scale(1)", transition: "transform 0.3s ease", cursor: isHovered ? "zoom-in" : "default" }));
-            })(),
-            hasMultiple && (react_2.default.createElement(react_2.default.Fragment, null,
-                react_2.default.createElement(react_1.IconButton, { icon: react_2.default.createElement(lucide_react_1.ChevronLeft, { size: 20, color: theme.colors.gray[500] }), "aria-label": "Previous", onClick: function () {
-                        var _a;
-                        var max = ((_a = images === null || images === void 0 ? void 0 : images.length) !== null && _a !== void 0 ? _a : 1);
-                        var newIndex = activeIndex === 0 ? max - 1 : activeIndex - 1;
-                        updateActiveIndex(newIndex);
-                    }, position: "absolute", left: "2", top: "50%", transform: "translateY(-50%)", variant: "ghost", colorScheme: "gray" }),
-                react_2.default.createElement(react_1.IconButton, { icon: react_2.default.createElement(lucide_react_1.ChevronRight, { size: 20, color: theme.colors.gray[500] }), "aria-label": "Next", onClick: function () {
-                        var _a;
-                        var max = ((_a = images === null || images === void 0 ? void 0 : images.length) !== null && _a !== void 0 ? _a : 1);
-                        var newIndex = activeIndex === max - 1 ? 0 : activeIndex + 1;
-                        updateActiveIndex(newIndex);
-                    }, position: "absolute", right: "2", top: "50%", transform: "translateY(-50%)", variant: "ghost", colorScheme: "gray" }))))))));
-}

package/dist/Components/ProfileCard/ProfileCard.stories.js

@@ -1,6 +0,0 @@
-"use strict";
-// import React from 'react';
-// import { StoryFn, Meta } from '@storybook/react/types-6-0';
-// import ProfileCard from './ProfileCard';
-// import { ProfileCardProps } from './ProfileCardProps';
-Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/ProfilePhotoViewer/ProfilePhotoViewer.stories.js

@@ -1,6 +0,0 @@
-"use strict";
-// import React from 'react';
-// import { StoryFn, Meta } from '@storybook/react';
-// import ProfilePhotoViewer from './ProfilePhotoViewer';
-// import { ProfilePhotoViewerProps } from './ProfilePhotoViewerProps';
-Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/ProgressBar/ProgressBar.stories.js

@@ -1,7 +0,0 @@
-"use strict";
-// import React from 'react';
-// import { Meta, StoryFn } from '@storybook/react';
-// import { ChakraProvider } from '@chakra-ui/react';
-// import ProgressBar from './ProgressBar'; // Adjust the import path and component type if needed
-// import { ProgressBarProps } from "./ProgressBarProps";
-Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/RadioButton/RadioButton.stories.js

@@ -1,7 +0,0 @@
-"use strict";
-// import React, { useState } from 'react';
-// import { Meta, StoryFn } from '@storybook/react';
-// import { ChakraProvider } from '@chakra-ui/react';
-// import { RadioButton, RadioButtonGroup } from './RadioButton';
-// import { ChakraRadioProps, ChakraRadioGroupProps } from './RadioButtonProps';
-Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/SearchSelect/searchSelectSize.test.js

@@ -1,22 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var searchSelectSize_1 = require("./searchSelectSize");
-describe("getSearchSelectSizeStyles", function () {
-    it.each(["xs", "sm", "md", "lg"])("returns minH for %s", function (sz) {
-        var t = (0, searchSelectSize_1.getSearchSelectSizeStyles)(sz);
-        expect(t.minH).toMatch(/rem$/);
-        expect(t.insideSelectDefaultHeight).toMatch(/rem$/);
-    });
-    it("xs is more compact than lg", function () {
-        var xs = (0, searchSelectSize_1.getSearchSelectSizeStyles)("xs");
-        var lg = (0, searchSelectSize_1.getSearchSelectSizeStyles)("lg");
-        var parse = function (h) { return parseFloat(h); };
-        expect(parse(xs.minH)).toBeLessThan(parse(lg.minH));
-        expect(parse(xs.insideSelectDefaultHeight)).toBeLessThan(parse(lg.insideSelectDefaultHeight));
-    });
-    it("uses md as fallback for unknown size keys (runtime map lookup)", function () {
-        var t = (0, searchSelectSize_1.getSearchSelectSizeStyles)("unknown");
-        var md = (0, searchSelectSize_1.getSearchSelectSizeStyles)("md");
-        expect(t).toEqual(md);
-    });
-});

package/dist/Components/Select/Select.stories.js

@@ -1,8 +0,0 @@
-"use strict";
-// import React from "react";
-// import { Meta, StoryFn } from "@storybook/react";
-// import { ChakraProvider } from "@chakra-ui/react";
-// import { useState } from "react";
-// import Select from "./Select";
-// import { chakraSelectProps } from "./SelectProps";
-Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/SideBar/Sidebar.stories.js

@@ -1,7 +0,0 @@
-"use strict";
-// import React, { useState } from 'react';
-// import { StoryFn, Meta } from '@storybook/react/types-6-0';
-// import Sidebar from './SideBar';
-// import { SidebarProps } from './SideBarProps';
-// import { fn } from '@storybook/test';
-Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/SideBar/components/OtherApps.test.d.ts

@@ -1 +0,0 @@
-import "@testing-library/jest-dom";

package/dist/Components/SideBar/components/OtherApps.test.js

@@ -1,111 +0,0 @@
-"use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var react_2 = require("@testing-library/react");
-var user_event_1 = __importDefault(require("@testing-library/user-event"));
-require("@testing-library/jest-dom");
-var react_3 = require("@chakra-ui/react");
-var OtherApps_1 = __importDefault(require("./OtherApps"));
-jest.mock("../../../Theme/useCustomTheme", function () { return ({
-    useCustomTheme: function () { return ({
-        colors: {
-            white: "#fff",
-            gray: { 400: "#a0aec0" },
-            primary: { 500: "#3182ce", 700: "#2c5282" },
-            sidebar: {
-                background: {
-                    200: "#2d3748",
-                    500: "#1a202c",
-                },
-            },
-        },
-    }); },
-}); });
-var sampleApps = [
-    {
-        name: "Billing",
-        color: "#3182ce",
-        description: "Billing app",
-        onClick: jest.fn(),
-    },
-    {
-        name: "Tickets",
-        color: "#38a169",
-        onClick: jest.fn(),
-    },
-];
-var renderWithChakra = function (ui) { return (0, react_2.render)(react_1.default.createElement(react_3.ChakraProvider, null, ui)); };
-describe("OtherApps", function () {
-    beforeEach(function () {
-        jest.clearAllMocks();
-    });
-    it("does not render flyout copy when expanded", function () {
-        renderWithChakra(react_1.default.createElement(OtherApps_1.default, { toggle: false, otherApps: sampleApps }));
-        expect(react_2.screen.getByText("Other Apps")).toBeInTheDocument();
-        expect(react_2.screen.getByText("Billing")).toBeInTheDocument();
-        expect(react_2.screen.queryAllByRole("tooltip")).toHaveLength(0);
-    });
-    it("shows flyout with Open label on hover when collapsed", function () { return __awaiter(void 0, void 0, void 0, function () {
-        var buttons, _a;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
-                case 0:
-                    renderWithChakra(react_1.default.createElement(OtherApps_1.default, { toggle: true, otherApps: sampleApps }));
-                    buttons = react_2.screen.getAllByRole("button");
-                    expect(buttons).toHaveLength(2);
-                    return [4 /*yield*/, user_event_1.default.hover(buttons[0])];
-                case 1:
-                    _b.sent();
-                    _a = expect;
-                    return [4 /*yield*/, react_2.screen.findByText("Billing app")];
-                case 2:
-                    _a.apply(void 0, [_b.sent()]).toBeInTheDocument();
-                    return [2 /*return*/];
-            }
-        });
-    }); });
-    it("renders no app rows when otherApps is empty", function () {
-        renderWithChakra(react_1.default.createElement(OtherApps_1.default, { toggle: true, otherApps: [] }));
-        expect(react_2.screen.queryByRole("button")).not.toBeInTheDocument();
-        expect(react_2.screen.queryByText("Billing")).not.toBeInTheDocument();
-    });
-});

package/dist/Components/Skeletons/Skeleton.stories.js

@@ -1,7 +0,0 @@
-"use strict";
-// import React from 'react';
-// import { Meta, StoryFn } from '@storybook/react';
-// import Skeletons from './Skeletons'; // adjust the import path as necessary
-// import { ChakraProvider } from '@chakra-ui/react';
-// import { SkeletonProps } from './SkeletonProps'; // adjust the import path as necessary
-Object.defineProperty(exports, "__esModule", { value: true });