pixelize-design-library 2.3.6 → 2.3.8

package/dist/Components/ProductDetails/ProductImageSlider.js

@@ -34,102 +34,97 @@ var __importStar = (this && this.__importStar) || (function () {
 })();
 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 = [
+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");
+function ProductImageSlider({ images, thumbHeight = 60, imageSize = 480, thumbnailsToShow = 6, batch, }) {
+    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 });
+    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 (var _i = 0, patterns_1 = patterns; _i < patterns_1.length; _i++) {
-            var re = patterns_1[_i];
-            var m = url.match(re);
+        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;
     };
-    var getVimeoId = function (url) {
-        var patterns = [
+    const getVimeoId = (url) => {
+        const 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);
+        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;
     };
-    var getDailymotionId = function (url) {
-        var patterns = [
+    const getDailymotionId = (url) => {
+        const 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);
+        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;
     };
-    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);
+    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/".concat(yt, "/hqdefault.jpg");
-        var vm = getVimeoId(url);
+            return `https://img.youtube.com/vi/${yt}/hqdefault.jpg`;
+        const vm = getVimeoId(url);
         if (vm)
-            return "https://vumbnail.com/".concat(vm, ".jpg");
-        var dm = getDailymotionId(url);
+            return `https://vumbnail.com/${vm}.jpg`;
+        const dm = getDailymotionId(url);
         if (dm)
-            return "https://www.dailymotion.com/thumbnail/video/".concat(dm);
+            return `https://www.dailymotion.com/thumbnail/video/${dm}`;
         return undefined;
     };
-    react_2.default.useEffect(function () {
+    react_2.default.useEffect(() => {
         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) {
+    const totalThumbs = (images === null || images === void 0 ? void 0 : images.length) || 0;
+    const hasMultiple = totalThumbs > 1;
+    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(function (prev) {
-                var newStart = Math.max(prev - 1, 0);
+            setThumbStartIndex((prev) => {
+                const 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);
+            setThumbStartIndex((prev) => {
+                const newStart = Math.min(prev + 1, totalThumbs - thumbnailsToShow);
                 setActiveIndex(newStart);
                 return newStart;
             });
         }
     };
-    var updateActiveIndex = function (newIndex) {
+    const updateActiveIndex = (newIndex) => {
         setActiveIndex(newIndex);
         // Scroll thumbnails window if active index is outside the current visible range
         if (newIndex < thumbStartIndex) {
@@ -139,139 +134,91 @@ function ProductImageSlider(_a) {
             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" }))))))));
+    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: "md", 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, 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.white, borderRadius: "full", boxShadow: "lg", p: 3, cursor: "pointer", onClick: () => setIsPlaying(true), children: (0, jsx_runtime_1.jsx)(lucide_react_1.Play, { size: 24, color: theme.colors.red[500] }) }) })] }));
+                                }
+                                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, 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.gray[500] }), "aria-label": "Previous", onClick: () => {
+                                        var _a;
+                                        const max = ((_a = images === null || images === void 0 ? void 0 : images.length) !== null && _a !== void 0 ? _a : 1);
+                                        const newIndex = activeIndex === 0 ? max - 1 : activeIndex - 1;
+                                        updateActiveIndex(newIndex);
+                                    }, position: "absolute", left: "2", top: "50%", transform: "translateY(-50%)", variant: "ghost", colorScheme: "gray" }), (0, jsx_runtime_1.jsx)(react_1.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 20, color: theme.colors.gray[500] }), "aria-label": "Next", onClick: () => {
+                                        var _a;
+                                        const max = ((_a = images === null || images === void 0 ? void 0 : images.length) !== null && _a !== void 0 ? _a : 1);
+                                        const newIndex = activeIndex === max - 1 ? 0 : activeIndex + 1;
+                                        updateActiveIndex(newIndex);
+                                    }, position: "absolute", right: "2", top: "50%", transform: "translateY(-50%)", variant: "ghost", colorScheme: "gray" })] }))] }), hasMultiple && ((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.gray[500] }), "aria-label": "Scroll Left", onClick: () => handleThumbScroll("up"), isDisabled: !canScrollUp, variant: "ghost", size: "sm" }), visibleThumbnails === null || visibleThumbnails === void 0 ? void 0 : visibleThumbnails.map((src, index) => {
+                            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: "md", overflow: "hidden", cursor: "pointer", border: actualIndex === activeIndex
+                                    ? `0.125rem solid ${theme.colors.gray[500]}`
+                                    : "0.125rem solid transparent", opacity: actualIndex === activeIndex ? 1 : 0.5, onClick: () => setActiveIndex(actualIndex), _hover: { opacity: 1 }, transition: "all 0.2s", position: "relative", children: isVideo ? (thumb ? ((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" }), (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.white, borderRadius: "full", boxShadow: "md", p: 1.5, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Play, { size: 14, color: theme.colors.red[500] }) }) })] })) : ((0, jsx_runtime_1.jsx)(react_1.Flex, { w: "100%", h: "100%", align: "center", justify: "center", bg: theme.colors.gray[100], children: (0, jsx_runtime_1.jsx)(react_1.Box, { bg: theme.colors.white, borderRadius: "full", boxShadow: "md", p: 1.5, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Play, { size: 14, color: theme.colors.red[500] }) }) }))) : ((0, jsx_runtime_1.jsx)(react_1.Image, { src: url, 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.gray[500] }), "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: "md", 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.gray[500] }), "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: "md", overflow: "hidden", cursor: "pointer", border: actualIndex === activeIndex
+                                        ? `0.125rem solid ${theme.colors.gray[500]}`
+                                        : "0.125rem solid transparent", opacity: actualIndex === activeIndex ? 1 : 0.5, onClick: () => setActiveIndex(actualIndex), _hover: { opacity: 1 }, transition: "all 0.2s", position: "relative", children: isVideo ? (thumb ? ((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: `Thumb ${actualIndex}` }), (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.white, borderRadius: "full", boxShadow: "md", p: 1.5, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Play, { size: 14, color: theme.colors.red[500] }) }) })] })) : ((0, jsx_runtime_1.jsx)(react_1.Flex, { w: "100%", h: "100%", align: "center", justify: "center", bg: theme.colors.gray[100], children: (0, jsx_runtime_1.jsx)(react_1.Box, { bg: theme.colors.white, borderRadius: "full", boxShadow: "md", p: 1.5, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Play, { size: 14, color: theme.colors.red[500] }) }) }))) : ((0, jsx_runtime_1.jsx)(react_1.Image, { src: url, w: "100%", h: "100%", objectFit: "cover", alt: `Thumb ${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.gray[500] }), "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: "md", 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, 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.white, borderRadius: "full", boxShadow: "lg", p: 3, cursor: "pointer", onClick: () => setIsPlaying(true), children: (0, jsx_runtime_1.jsx)(lucide_react_1.Play, { size: 24, color: theme.colors.red[500] }) }) })] }));
+                                }
+                                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, 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.gray[500] }), "aria-label": "Previous", onClick: () => {
+                                        var _a;
+                                        const max = ((_a = images === null || images === void 0 ? void 0 : images.length) !== null && _a !== void 0 ? _a : 1);
+                                        const newIndex = activeIndex === 0 ? max - 1 : activeIndex - 1;
+                                        updateActiveIndex(newIndex);
+                                    }, position: "absolute", left: "2", top: "50%", transform: "translateY(-50%)", variant: "ghost", colorScheme: "gray" }), (0, jsx_runtime_1.jsx)(react_1.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 20, color: theme.colors.gray[500] }), "aria-label": "Next", onClick: () => {
+                                        var _a;
+                                        const max = ((_a = images === null || images === void 0 ? void 0 : images.length) !== null && _a !== void 0 ? _a : 1);
+                                        const newIndex = activeIndex === max - 1 ? 0 : activeIndex + 1;
+                                        updateActiveIndex(newIndex);
+                                    }, position: "absolute", right: "2", top: "50%", transform: "translateY(-50%)", variant: "ghost", colorScheme: "gray" })] }))] })] })) }));
 }

package/dist/Components/ProfileCard/ProfileCard.d.ts

@@ -9,4 +9,5 @@ export declare const ProfileCardBody: React.FC<{
 export declare const ProfileCardFooter: React.FC<{
     children: React.ReactNode;
 }>;
-export default function ProfileCard({ maxW, align, variant, direction, justify, children, size, color, overflow, dividercolor, dividersize, dividervariant, CardStyle, CardHeaderStyle, CardBodyStyle, borderTopColor, borderLeftColor, }: ProfileCardProps): React.JSX.Element;
+export default function ProfileCard({ maxW, align, variant, direction, justify, children, size, color, overflow, dividercolor, dividersize, dividervariant, CardStyle, CardHeaderStyle, CardBodyStyle, borderTopColor, borderLeftColor, }: ProfileCardProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ProfileCard.d.ts.map

package/dist/Components/ProfileCard/ProfileCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProfileCard.d.ts","sourceRoot":"","sources":["../../../src/Components/ProfileCard/ProfileCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuB,MAAM,OAAO,CAAC;AAS5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAIrE,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAInE,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAIrE,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,IAAI,EACJ,KAAK,EACL,OAAO,EACP,SAAS,EACT,OAAO,EACP,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,WAAqB,EACrB,cAAwB,EACxB,SAAS,EACT,eAAe,EACf,aAAa,EACb,cAAc,EACd,eAAe,GAChB,EAAE,gBAAgB,2CAuDlB"}

package/dist/Components/ProfileCard/ProfileCard.js

@@ -1,61 +1,44 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ProfileCardFooter = exports.ProfileCardBody = exports.ProfileCardHeader = void 0;
 exports.default = ProfileCard;
-var react_1 = __importDefault(require("react"));
-var react_2 = require("@chakra-ui/react");
-var ProfileCardHeader = function (_a) {
-    var children = _a.children;
-    return react_1.default.createElement(react_1.default.Fragment, null, children);
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@chakra-ui/react");
+const ProfileCardHeader = ({ children, }) => {
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
 };
 exports.ProfileCardHeader = ProfileCardHeader;
-var ProfileCardBody = function (_a) {
-    var children = _a.children;
-    return react_1.default.createElement(react_1.default.Fragment, null, children);
+const ProfileCardBody = ({ children, }) => {
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
 };
 exports.ProfileCardBody = ProfileCardBody;
-var ProfileCardFooter = function (_a) {
-    var children = _a.children;
-    return react_1.default.createElement(react_1.default.Fragment, null, children);
+const ProfileCardFooter = ({ children, }) => {
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
 };
 exports.ProfileCardFooter = ProfileCardFooter;
-function ProfileCard(_a) {
-    var _b, _c, _d, _e;
-    var maxW = _a.maxW, align = _a.align, variant = _a.variant, direction = _a.direction, justify = _a.justify, children = _a.children, size = _a.size, color = _a.color, overflow = _a.overflow, dividercolor = _a.dividercolor, _f = _a.dividersize, dividersize = _f === void 0 ? "0.5px" : _f, _g = _a.dividervariant, dividervariant = _g === void 0 ? "solid" : _g, CardStyle = _a.CardStyle, CardHeaderStyle = _a.CardHeaderStyle, CardBodyStyle = _a.CardBodyStyle, borderTopColor = _a.borderTopColor, borderLeftColor = _a.borderLeftColor;
-    var theme = (0, react_2.useTheme)();
-    var resolvedDividerColor = (_c = dividercolor !== null && dividercolor !== void 0 ? dividercolor : (_b = theme.colors.border) === null || _b === void 0 ? void 0 : _b[400]) !== null && _c !== void 0 ? _c : (_d = theme.colors.gray) === null || _d === void 0 ? void 0 : _d[300];
-    var accentBorder = "2px solid ".concat((_e = theme.colors.primary) === null || _e === void 0 ? void 0 : _e[500]);
-    var isReactElement = function (child) {
+function ProfileCard({ maxW, align, variant, direction, justify, children, size, color, overflow, dividercolor, dividersize = "0.5px", dividervariant = "solid", CardStyle, CardHeaderStyle, CardBodyStyle, borderTopColor, borderLeftColor, }) {
+    var _a, _b, _c, _d;
+    const theme = (0, react_2.useTheme)();
+    const resolvedDividerColor = (_b = dividercolor !== null && dividercolor !== void 0 ? dividercolor : (_a = theme.colors.border) === null || _a === void 0 ? void 0 : _a[400]) !== null && _b !== void 0 ? _b : (_c = theme.colors.gray) === null || _c === void 0 ? void 0 : _c[300];
+    const accentBorder = `2px solid ${(_d = theme.colors.primary) === null || _d === void 0 ? void 0 : _d[500]}`;
+    const isReactElement = (child) => {
         return child !== null && typeof child === "object" && "type" in child;
     };
-    var header = react_1.default.Children.toArray(children).find(function (child) { return isReactElement(child) && child.type === exports.ProfileCardHeader; });
-    var body = react_1.default.Children.toArray(children).find(function (child) { return isReactElement(child) && child.type === exports.ProfileCardBody; });
-    var footer = react_1.default.Children.toArray(children).find(function (child) { return isReactElement(child) && child.type === exports.ProfileCardFooter; });
-    var StylesWithBorder = borderLeftColor
-        ? __assign(__assign({}, CardStyle), { borderLeft: accentBorder }) : borderTopColor
-        ? __assign(__assign({}, CardStyle), { borderTop: accentBorder }) : __assign({}, CardStyle);
-    return (react_1.default.createElement(react_2.Card, { maxW: maxW, align: align, variant: variant, direction: direction, justify: justify, size: size, overflow: overflow, colorScheme: color, style: StylesWithBorder },
-        header && (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(react_2.CardHeader, { sx: __assign(__assign({}, CardHeaderStyle), { fontWeight: "bold" }), py: 15 }, header),
-            react_1.default.createElement(react_2.Divider, { style: {
-                    borderColor: resolvedDividerColor,
-                    borderWidth: dividersize,
-                    borderStyle: dividervariant,
-                } }))),
-        react_1.default.createElement(react_2.CardBody, { sx: CardBodyStyle }, body),
-        footer && react_1.default.createElement(react_2.CardFooter, null, footer)));
+    const header = react_1.default.Children.toArray(children).find((child) => isReactElement(child) && child.type === exports.ProfileCardHeader);
+    const body = react_1.default.Children.toArray(children).find((child) => isReactElement(child) && child.type === exports.ProfileCardBody);
+    const footer = react_1.default.Children.toArray(children).find((child) => isReactElement(child) && child.type === exports.ProfileCardFooter);
+    const StylesWithBorder = borderLeftColor
+        ? { ...CardStyle, borderLeft: accentBorder }
+        : borderTopColor
+            ? { ...CardStyle, borderTop: accentBorder }
+            : { ...CardStyle };
+    return ((0, jsx_runtime_1.jsxs)(react_2.Card, { maxW: maxW, align: align, variant: variant, direction: direction, justify: justify, size: size, overflow: overflow, colorScheme: color, style: StylesWithBorder, children: [header && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.CardHeader, { sx: { ...CardHeaderStyle, fontWeight: "bold" }, py: 15, children: header }), (0, jsx_runtime_1.jsx)(react_2.Divider, { style: {
+                            borderColor: resolvedDividerColor,
+                            borderWidth: dividersize,
+                            borderStyle: dividervariant,
+                        } })] })), (0, jsx_runtime_1.jsx)(react_2.CardBody, { sx: CardBodyStyle, children: body }), footer && (0, jsx_runtime_1.jsx)(react_2.CardFooter, { children: footer })] }));
 }

package/dist/Components/ProfileCard/ProfileCard.stories.d.ts

@@ -1 +1,2 @@
 export {};
+//# sourceMappingURL=ProfileCard.stories.d.ts.map

package/dist/Components/ProfileCard/ProfileCard.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProfileCard.stories.d.ts","sourceRoot":"","sources":["../../../src/Components/ProfileCard/ProfileCard.stories.tsx"],"names":[],"mappings":"AA8BA,OAAO,EAAE,CAAC"}

package/dist/Components/ProfileCard/ProfileCardProps.d.ts

@@ -13,3 +13,4 @@ export type ProfileCardProps = Pick<CardProps, "direction" | "maxW" | "align" |
     borderTopColor?: boolean;
     borderLeftColor?: boolean;
 };
+//# sourceMappingURL=ProfileCardProps.d.ts.map

package/dist/Components/ProfileCard/ProfileCardProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProfileCardProps.d.ts","sourceRoot":"","sources":["../../../src/Components/ProfileCard/ProfileCardProps.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAE7C,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,SAAS,EACT,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,UAAU,CACxD,GAAG;IACF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,UAAU,GAAG,SAAS,GAAG,QAAQ,GAAG,UAAU,CAAC;IACzD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,KAAK,CAAC,EACF,YAAY,GACZ,YAAY,GACZ,MAAM,GACN,KAAK,GACL,QAAQ,GACR,QAAQ,GACR,OAAO,GACP,MAAM,GACN,MAAM,GACN,MAAM,GACN,QAAQ,GACR,MAAM,CAAC;IACX,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EACX,OAAO,GACP,QAAQ,GACR,QAAQ,GACR,QAAQ,GACR,QAAQ,GACR,OAAO,GACP,OAAO,GACP,QAAQ,CAAC;IACb,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAChC,eAAe,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACtC,aAAa,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACpC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC"}

package/dist/Components/ProfilePhotoViewer/ProfilePhotoViewer.d.ts

@@ -1,3 +1,3 @@
-import React from "react";
 import { ProfilePhotoViewerProps } from "./ProfilePhotoViewerProps";
-export default function ProfilePhotoViewer({ photoUrl, onPhotoChange, imageWidth, imageAlt, imageObjectFit, imageBorderRadius, editIconSize, editIconPositionRight, editIconPositionBottom, isRound, boxStyle, isEditable, isView, style, handleIsView, fallbackText, revealOnHover, }: ProfilePhotoViewerProps): React.JSX.Element;
+export default function ProfilePhotoViewer({ photoUrl, onPhotoChange, imageWidth, imageAlt, imageObjectFit, imageBorderRadius, editIconSize, editIconPositionRight, editIconPositionBottom, isRound, boxStyle, isEditable, isView, style, handleIsView, fallbackText, revealOnHover, }: ProfilePhotoViewerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ProfilePhotoViewer.d.ts.map

package/dist/Components/ProfilePhotoViewer/ProfilePhotoViewer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProfilePhotoViewer.d.ts","sourceRoot":"","sources":["../../../src/Components/ProfilePhotoViewer/ProfilePhotoViewer.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAKpE,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,QAAQ,EACR,aAAa,EACb,UAAoB,EACpB,QAA0B,EAC1B,cAAwB,EACxB,iBAA0B,EAC1B,YAAmB,EACnB,qBAA6B,EAC7B,sBAA8B,EAC9B,OAAc,EACd,QAAQ,EACR,UAAkB,EAClB,MAAc,EACd,KAAK,EACL,YAAY,EACZ,YAAY,EACZ,aAAoB,GACrB,EAAE,uBAAuB,2CA2LzB"}