pixelize-design-library 2.3.6 → 2.3.8

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

@@ -1,8 +1,8 @@
-import React from 'react';
 type ProductReviewProps = {
     rating?: string | number;
     reviewCount?: string | number;
     mb?: number;
 };
-declare const ProductReview: ({ rating, reviewCount, mb }: ProductReviewProps) => React.JSX.Element;
+declare const ProductReview: ({ rating, reviewCount, mb }: ProductReviewProps) => import("react/jsx-runtime").JSX.Element;
 export default ProductReview;
+//# sourceMappingURL=ProductReview.d.ts.map

package/dist/Components/ProductCard/ProductReview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductReview.d.ts","sourceRoot":"","sources":["../../../src/Components/ProductCard/ProductReview.tsx"],"names":[],"mappings":"AAGA,KAAK,kBAAkB,GAAG;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAA;AAED,QAAA,MAAM,aAAa,GAAI,6BAAiC,kBAAkB,4CAiEzE,CAAC;AACF,eAAe,aAAa,CAAC"}

package/dist/Components/ProductCard/ProductReview.js

@@ -1,35 +1,17 @@
 "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 lucide_react_1 = require("lucide-react");
-var ProductReview = function (_a) {
-    var rating = _a.rating, reviewCount = _a.reviewCount, _b = _a.mb, mb = _b === void 0 ? 0 : _b;
-    var hasRating = rating !== undefined && rating !== null;
-    var hasReviewCount = reviewCount !== undefined && reviewCount !== null;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const ProductReview = ({ rating, reviewCount, mb = 0 }) => {
+    const hasRating = rating !== undefined && rating !== null;
+    const hasReviewCount = reviewCount !== undefined && reviewCount !== null;
     // Get colors from theme
-    var yellow400 = (0, react_2.useToken)('colors', ['yellow.400'])[0];
+    const [yellow400] = (0, react_1.useToken)('colors', ['yellow.400']);
     // Convert rating to number and ensure it's between 0 and 5
     // Calculate fill percentage: (rating / 5) * 100%
-    var numericRating = hasRating ? Math.min(Math.max(Number(rating), 0), 5) : 0;
-    var fillPercentage = (numericRating / 6) * 100;
-    return (react_1.default.createElement(react_2.Flex, { align: "center", gap: 2, mb: mb },
-        hasRating && (react_1.default.createElement(react_2.Flex, { align: "center", gap: 1, bg: "teal.900", color: "white", px: 2, borderRadius: "md" },
-            react_1.default.createElement(react_2.Box, { position: "relative", flexShrink: 0, display: "inline-block", width: "14px", height: "14px", lineHeight: 0 },
-                react_1.default.createElement(react_2.Box, { position: "absolute", top: 0, left: 0, width: "14px", height: "14px" },
-                    react_1.default.createElement(lucide_react_1.Star, { size: 14, color: "white", fill: "none", stroke: "white", strokeWidth: 1.5 })),
-                fillPercentage > 0 && (react_1.default.createElement(react_2.Box, { position: "absolute", top: 0, left: 0, width: "".concat(fillPercentage, "%"), height: "100%", overflow: "hidden" },
-                    react_1.default.createElement(lucide_react_1.Star, { size: 14, color: yellow400, fill: yellow400 })))),
-            react_1.default.createElement(react_2.Text, { fontSize: "sm", fontWeight: "bold", color: "white" }, numericRating))),
-        hasRating && hasReviewCount && react_1.default.createElement(react_2.Box, { h: "4", w: "0.063rem", bg: "gray.400" }),
-        hasReviewCount && (react_1.default.createElement(react_2.Flex, { align: "center", gap: "1" },
-            react_1.default.createElement(react_2.Icon, { as: lucide_react_1.BookCheck, boxSize: 3.5 }),
-            react_1.default.createElement(react_2.Text, { fontSize: "sm", color: "gray.600" },
-                "(",
-                reviewCount,
-                ")")))));
+    const numericRating = hasRating ? Math.min(Math.max(Number(rating), 0), 5) : 0;
+    const fillPercentage = (numericRating / 6) * 100;
+    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 2, mb: mb, children: [hasRating && ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 1, bg: "teal.900", color: "white", px: 2, borderRadius: "md", children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { position: "relative", flexShrink: 0, display: "inline-block", width: "14px", height: "14px", lineHeight: 0, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { position: "absolute", top: 0, left: 0, width: "14px", height: "14px", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 14, color: "white", fill: "none", stroke: "white", strokeWidth: 1.5 }) }), fillPercentage > 0 && ((0, jsx_runtime_1.jsx)(react_1.Box, { position: "absolute", top: 0, left: 0, width: `${fillPercentage}%`, height: "100%", overflow: "hidden", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 14, color: yellow400, fill: yellow400 }) }))] }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", fontWeight: "bold", color: "white", children: numericRating })] })), hasRating && hasReviewCount && (0, jsx_runtime_1.jsx)(react_1.Box, { h: "4", w: "0.063rem", bg: "gray.400" }), hasReviewCount && ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "1", children: [(0, jsx_runtime_1.jsx)(react_1.Icon, { as: lucide_react_1.BookCheck, boxSize: 3.5 }), (0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: "sm", color: "gray.600", children: ["(", reviewCount, ")"] })] }))] }));
 };
 exports.default = ProductReview;

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

@@ -1,9 +1,9 @@
-import React from 'react';
 import { SizeType } from './ProductCardProps';
 type ProductTagsProps = {
     tags: string[];
     className?: string;
     size: SizeType;
 };
-declare const ProductTags: ({ tags, className, size }: ProductTagsProps) => React.JSX.Element;
+declare const ProductTags: ({ tags, className, size }: ProductTagsProps) => import("react/jsx-runtime").JSX.Element;
 export default ProductTags;
+//# sourceMappingURL=ProductTags.d.ts.map

package/dist/Components/ProductCard/ProductTags.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductTags.d.ts","sourceRoot":"","sources":["../../../src/Components/ProductCard/ProductTags.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAI9C,KAAK,gBAAgB,GAAG;IACtB,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,QAAQ,CAAA;CACf,CAAC;AAEF,QAAA,MAAM,WAAW,GAAI,2BAAkC,gBAAgB,4CAuBtE,CAAC;AAkEF,eAAe,WAAW,CAAC"}

package/dist/Components/ProductCard/ProductTags.js

@@ -3,13 +3,13 @@ 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;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@chakra-ui/react");
+const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
+const ProductTags = ({ tags, className, size = 'sm' }) => {
+    const getRows = (tags) => {
+        const count = tags.length;
         if (count === 1)
             return [tags];
         if (count === 2)
@@ -20,35 +20,34 @@ var ProductTags = function (_a) {
             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)); }))); })));
+    return ((0, jsx_runtime_1.jsx)(react_2.Flex, { direction: "column", gap: "1", className: className, w: "full", children: getRows(tags).map((row, rowIndex) => ((0, jsx_runtime_1.jsx)(react_2.Flex, { gap: "1", children: row.map((tag, tagIndex) => ((0, jsx_runtime_1.jsx)(Tag, { fullWidth: row.length === 1, size: size, children: tag }, tagIndex))) }, rowIndex))) }));
 };
-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;
+const Tag = ({ children, fullWidth = false, size = 'sm', }) => {
+    var _a, _b, _c, _d;
+    const theme = (0, react_2.useTheme)();
+    const tagBorder = (_c = (_b = (_a = theme.colors.semantic) === null || _a === void 0 ? void 0 : _a.error) === null || _b === void 0 ? void 0 : _b[200]) !== null && _c !== void 0 ? _c : (_d = theme.colors.red) === null || _d === void 0 ? void 0 : _d[200];
+    const tagText = theme.colors.black;
     // Size map for tags
-    var tagSizes = {
+    const tagSizes = {
         xs: { fontSize: '0.625rem', px: '0.5rem', py: '0.125rem' },
         sm: { fontSize: '0.75rem', px: '0.6rem', py: '0.2rem' },
         md: { fontSize: '0.875rem', px: '0.75rem', py: '0.3rem' },
         lg: { fontSize: '0.938rem', px: '0.938rem', py: '0.4rem' },
     };
-    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;
+    const ref = react_1.default.useRef(null);
+    const [truncated, setTruncated] = react_1.default.useState(false);
+    react_1.default.useEffect(() => {
+        const el = ref.current;
         if (!el)
             return;
-        var check = function () { return setTruncated(el.scrollWidth > el.clientWidth); };
+        const check = () => setTruncated(el.scrollWidth > el.clientWidth);
         check();
         window.addEventListener('resize', check);
-        return function () {
+        return () => {
             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);
+    const content = ((0, jsx_runtime_1.jsx)(react_2.Box, { ref: ref, flex: fullWidth ? '1' : '1', border: "0.063rem solid", borderColor: tagBorder, color: tagText, fontSize: tagSizes[size].fontSize, fontWeight: "semibold", borderRadius: "full", px: tagSizes[size].px, py: tagSizes[size].py, textAlign: "center", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", children: children }));
+    return truncated ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: String(children), hasArrow: true, openDelay: 300, placement: 'bottom', children: content })) : (content);
 };
 exports.default = ProductTags;

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

@@ -1,4 +1,4 @@
-import React from "react";
 import { ProductDetailsProps } from "./ProductDetailsProps";
-declare const ProductDetails: ({ id, price, label, shortdesc, tags, images, batch, category, onAddToCart, onNotifyMe, onOptionChange, addToCart, goToCart, OnGoToCart, rating, reviews, notifyMe, isQtyEditable, displayRating, }: ProductDetailsProps) => React.JSX.Element;
+declare const ProductDetails: ({ id, price, label, shortdesc, tags, images, batch, onAddToCart, onNotifyMe, onOptionChange, addToCart, goToCart, OnGoToCart, rating, reviews, notifyMe, isQtyEditable, displayRating, }: ProductDetailsProps) => import("react/jsx-runtime").JSX.Element;
 export default ProductDetails;
+//# sourceMappingURL=ProductDetails.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProductDetails.d.ts","sourceRoot":"","sources":["../../../src/Components/ProductDetails/ProductDetails.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAM5D,QAAA,MAAM,cAAc,GAAI,0LAmBrB,mBAAmB,4CA6IrB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/Components/ProductDetails/ProductDetails.js

@@ -3,62 +3,43 @@ 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 ProductImageSlider_1 = __importDefault(require("./ProductImageSlider"));
-var ProductLabel_1 = __importDefault(require("../ProductCard/ProductLabel"));
-var ProductTags_1 = __importDefault(require("../ProductCard/ProductTags"));
-var ProductDtlPrice_1 = __importDefault(require("./ProductDtlPrice"));
-var Button_1 = __importDefault(require("../Button/Button"));
-var lucide_react_1 = require("lucide-react");
-var ProductReview_1 = __importDefault(require("../ProductCard/ProductReview"));
-var FormattedDescription_1 = __importDefault(require("../Common/FormattedDescription"));
-var ProductDetails = function (_a) {
-    var _b, _c, _d, _e, _f;
-    var id = _a.id, price = _a.price, label = _a.label, shortdesc = _a.shortdesc, tags = _a.tags, images = _a.images, batch = _a.batch, category = _a.category, onAddToCart = _a.onAddToCart, onNotifyMe = _a.onNotifyMe, onOptionChange = _a.onOptionChange, addToCart = _a.addToCart, goToCart = _a.goToCart, OnGoToCart = _a.OnGoToCart, rating = _a.rating, reviews = _a.reviews, notifyMe = _a.notifyMe, _g = _a.isQtyEditable, isQtyEditable = _g === void 0 ? false : _g, _h = _a.displayRating, displayRating = _h === void 0 ? true : _h;
-    var isMobile = (0, react_2.useBreakpointValue)({ base: true, md: false });
-    var _j = react_1.default.useState(price === null || price === void 0 ? void 0 : price[0]), selectedOption = _j[0], setSelectedOption = _j[1];
-    var _k = react_1.default.useState(1), qty = _k[0], setQty = _k[1];
-    react_1.default.useEffect(function () {
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@chakra-ui/react");
+const ProductImageSlider_1 = __importDefault(require("./ProductImageSlider"));
+const ProductLabel_1 = __importDefault(require("../ProductCard/ProductLabel"));
+const ProductTags_1 = __importDefault(require("../ProductCard/ProductTags"));
+const ProductDtlPrice_1 = __importDefault(require("./ProductDtlPrice"));
+const Button_1 = __importDefault(require("../Button/Button"));
+const lucide_react_1 = require("lucide-react");
+const ProductReview_1 = __importDefault(require("../ProductCard/ProductReview"));
+const FormattedDescription_1 = __importDefault(require("../Common/FormattedDescription"));
+const ProductDetails = ({ id, price, label, shortdesc, tags, images, batch, onAddToCart, onNotifyMe, onOptionChange, addToCart, goToCart, OnGoToCart, rating, reviews, notifyMe, isQtyEditable = false, displayRating = true, }) => {
+    var _a, _b, _c, _d, _e;
+    const isMobile = (0, react_2.useBreakpointValue)({ base: true, md: false });
+    const [selectedOption, setSelectedOption] = react_1.default.useState(price === null || price === void 0 ? void 0 : price[0]);
+    const [qty, setQty] = react_1.default.useState(1);
+    react_1.default.useEffect(() => {
         setQty(1);
     }, [selectedOption]);
-    var handleIncrement = function () {
-        setQty(function (prev) {
+    const handleIncrement = () => {
+        setQty((prev) => {
             var _a;
-            var stock = (_a = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _a !== void 0 ? _a : Infinity;
+            const stock = (_a = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _a !== void 0 ? _a : Infinity;
             if (prev >= stock)
                 return prev;
             return prev + 1;
         });
     };
-    var handleDecrement = function () {
-        setQty(function (prev) { return (prev > 1 ? prev - 1 : 1); });
+    const handleDecrement = () => {
+        setQty((prev) => (prev > 1 ? prev - 1 : 1));
     };
-    return (react_1.default.createElement(react_2.Flex, { direction: ["column", "row"], maxW: "6xl", mx: "auto", align: "start", gap: 5 },
-        react_1.default.createElement(react_2.Box, { position: "relative", color: "white", borderRadius: "md", flex: "1", minH: isMobile ? undefined : "31.25rem" },
-            react_1.default.createElement(ProductImageSlider_1.default, { images: images, thumbHeight: isMobile ? 48 : 80, imageSize: isMobile ? 360 : 480, thumbnailsToShow: isMobile ? 4 : 6, batch: batch })),
-        react_1.default.createElement(react_2.Box, { flex: "1" },
-            label && react_1.default.createElement(ProductLabel_1.default, { label: label, size: "sm" }),
-            shortdesc && react_1.default.createElement(react_2.Box, { my: 3 },
-                react_1.default.createElement(FormattedDescription_1.default, { content: shortdesc })),
-            ((rating !== undefined && rating !== null) || (reviews !== undefined && reviews !== null)) && displayRating && (react_1.default.createElement(ProductReview_1.default, { rating: rating, reviewCount: reviews, mb: 3 })),
-            tags && react_1.default.createElement(ProductTags_1.default, { tags: tags, size: "sm" }),
-            price && (react_1.default.createElement(ProductDtlPrice_1.default, { price: price, onSelect: function (option) {
-                    setSelectedOption(option);
-                    onOptionChange === null || onOptionChange === void 0 ? void 0 : onOptionChange(option);
-                } })),
-            typeof (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) === "number" && ((_b = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _b !== void 0 ? _b : 0) <= 0 && (react_1.default.createElement(react_2.Box, { sx: { ml: "1.1rem", mt: "0.5rem", mb: "0.5rem" } },
-                react_1.default.createElement(Button_1.default, { colorScheme: "gray", size: "sm", 
-                    // width="50%"
-                    // onClick={button?.onClick}
-                    isDisabled: true }, "Out of Stock"))),
-            goToCart && (react_1.default.createElement(Button_1.default, { size: "sm", colorScheme: "red", leftIcon: react_1.default.createElement(lucide_react_1.ShoppingCartIcon, null), sx: { ml: "1.1rem" }, onClick: OnGoToCart }, "Go to cart")),
-            addToCart && (((_c = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _c !== void 0 ? _c : 1) > 0) && isQtyEditable && (react_1.default.createElement(react_2.HStack, { sx: { ml: "1.1rem", mb: 4 }, spacing: 4 },
-                react_1.default.createElement(react_2.HStack, null,
-                    react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.Minus, { size: 16 }), "aria-label": "Decrease quantity", size: "xs", onClick: handleDecrement, isDisabled: qty <= 1, isRound: true, variant: "outline", colorScheme: "red" }),
-                    react_1.default.createElement(react_2.Text, { fontWeight: "bold", w: 8, textAlign: "center" }, qty),
-                    react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.Plus, { size: 16 }), "aria-label": "Increase quantity", size: "xs", onClick: handleIncrement, isDisabled: qty >= ((_d = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _d !== void 0 ? _d : Infinity), isRound: true, variant: "outline", colorScheme: "red" })))),
-            addToCart && (((_e = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _e !== void 0 ? _e : 1) > 0) && (react_1.default.createElement(Button_1.default, { size: "sm", colorScheme: "red", leftIcon: react_1.default.createElement(lucide_react_1.ShoppingCartIcon, null), sx: { ml: "1.1rem" }, onClick: function () { return (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.var_id) !== undefined && (onAddToCart === null || onAddToCart === void 0 ? void 0 : onAddToCart(id, selectedOption.var_id, qty)); } }, "Add to cart")),
-            addToCart && (((_f = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _f !== void 0 ? _f : 1) <= 0) && notifyMe && (react_1.default.createElement(Button_1.default, { size: "sm", colorScheme: "red", variant: "outline", sx: { ml: "1.1rem" }, onClick: function () { return (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.var_id) !== undefined && (onNotifyMe === null || onNotifyMe === void 0 ? void 0 : onNotifyMe(id, selectedOption.var_id)); } }, "Notify Me")))));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: ["column", "row"], maxW: "6xl", mx: "auto", align: "start", gap: 5, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { position: "relative", color: "white", borderRadius: "md", flex: "1", minH: isMobile ? undefined : "31.25rem", children: (0, jsx_runtime_1.jsx)(ProductImageSlider_1.default, { images: images, thumbHeight: isMobile ? 48 : 80, imageSize: isMobile ? 360 : 480, thumbnailsToShow: isMobile ? 4 : 6, batch: batch }) }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", children: [label && (0, jsx_runtime_1.jsx)(ProductLabel_1.default, { label: label, size: "sm" }), shortdesc && (0, jsx_runtime_1.jsx)(react_2.Box, { my: 3, children: (0, jsx_runtime_1.jsx)(FormattedDescription_1.default, { content: shortdesc }) }), ((rating !== undefined && rating !== null) || (reviews !== undefined && reviews !== null)) && displayRating && ((0, jsx_runtime_1.jsx)(ProductReview_1.default, { rating: rating, reviewCount: reviews, mb: 3 })), tags && (0, jsx_runtime_1.jsx)(ProductTags_1.default, { tags: tags, size: "sm" }), price && ((0, jsx_runtime_1.jsx)(ProductDtlPrice_1.default, { price: price, onSelect: (option) => {
+                            setSelectedOption(option);
+                            onOptionChange === null || onOptionChange === void 0 ? void 0 : onOptionChange(option);
+                        } })), typeof (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) === "number" && ((_a = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _a !== void 0 ? _a : 0) <= 0 && ((0, jsx_runtime_1.jsx)(react_2.Box, { sx: { ml: "1.1rem", mt: "0.5rem", mb: "0.5rem" }, children: (0, jsx_runtime_1.jsx)(Button_1.default, { colorScheme: "gray", size: "sm", 
+                            // width="50%"
+                            // onClick={button?.onClick}
+                            isDisabled: true, children: "Out of Stock" }) })), goToCart && ((0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", colorScheme: "red", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.ShoppingCartIcon, {}), sx: { ml: "1.1rem" }, onClick: OnGoToCart, children: "Go to cart" })), addToCart && (((_b = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _b !== void 0 ? _b : 1) > 0) && isQtyEditable && ((0, jsx_runtime_1.jsx)(react_2.HStack, { sx: { ml: "1.1rem", mb: 4 }, spacing: 4, children: (0, jsx_runtime_1.jsxs)(react_2.HStack, { children: [(0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Minus, { size: 16 }), "aria-label": "Decrease quantity", size: "xs", onClick: handleDecrement, isDisabled: qty <= 1, isRound: true, variant: "outline", colorScheme: "red" }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontWeight: "bold", w: 8, textAlign: "center", children: qty }), (0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 16 }), "aria-label": "Increase quantity", size: "xs", onClick: handleIncrement, isDisabled: qty >= ((_c = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _c !== void 0 ? _c : Infinity), isRound: true, variant: "outline", colorScheme: "red" })] }) })), addToCart && (((_d = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _d !== void 0 ? _d : 1) > 0) && ((0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", colorScheme: "red", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.ShoppingCartIcon, {}), sx: { ml: "1.1rem" }, onClick: () => (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.var_id) !== undefined && (onAddToCart === null || onAddToCart === void 0 ? void 0 : onAddToCart(id, selectedOption.var_id, qty)), children: "Add to cart" })), addToCart && (((_e = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _e !== void 0 ? _e : 1) <= 0) && notifyMe && ((0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", colorScheme: "red", variant: "outline", sx: { ml: "1.1rem" }, onClick: () => (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.var_id) !== undefined && (onNotifyMe === null || onNotifyMe === void 0 ? void 0 : onNotifyMe(id, selectedOption.var_id)), children: "Notify Me" }))] })] }));
 };
 exports.default = ProductDetails;

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

@@ -7,7 +7,6 @@ export type ProductDetailsProps = {
     tags?: string[];
     images?: images[];
     batch?: batch;
-    category?: string;
     rating?: string | number;
     reviews?: string | number;
     onAddToCart?: (id: string | number, var_id: number, qty?: number) => void;
@@ -33,3 +32,4 @@ export type videos = {
     order?: number;
     thumb?: string;
 };
+//# sourceMappingURL=ProductDetailsProps.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProductDetailsProps.d.ts","sourceRoot":"","sources":["../../../src/Components/ProductDetails/ProductDetailsProps.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,iCAAiC,CAAC;AAEjE,MAAM,MAAM,mBAAmB,GAAG;IAC9B,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1E,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3D,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAA;AAED,MAAM,MAAM,MAAM,GAAG;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB,CAAA;AAED,MAAM,MAAM,MAAM,GAAG;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB,CAAA"}

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

@@ -1,8 +1,8 @@
-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;
+declare const ProductDtlPrice: ({ price, onSelect }: ProductDtlPriceProps) => import("react/jsx-runtime").JSX.Element;
 export default ProductDtlPrice;
+//# sourceMappingURL=ProductDtlPrice.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProductDtlPrice.d.ts","sourceRoot":"","sources":["../../../src/Components/ProductDetails/ProductDtlPrice.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,OAAO,EAAE,MAAM,iCAAiC,CAAC;AAG1D,UAAU,oBAAoB;IAC1B,KAAK,EAAE,OAAO,EAAE,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;AAGD,QAAA,MAAM,eAAe,GAAI,qBAAqB,oBAAoB,4CAmFjE,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/Components/ProductDetails/ProductDtlPrice.js

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

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

@@ -1,4 +1,3 @@
-import React from "react";
 import { images } from "./ProductDetailsProps";
 import { batch } from "../ProductCard/ProductCardProps";
 interface ProductImageSliderProps {
@@ -8,5 +7,6 @@ interface ProductImageSliderProps {
     thumbnailsToShow?: number;
     batch?: batch;
 }
-export default function ProductImageSlider({ images, thumbHeight, imageSize, thumbnailsToShow, batch, }: ProductImageSliderProps): React.JSX.Element;
+export default function ProductImageSlider({ images, thumbHeight, imageSize, thumbnailsToShow, batch, }: ProductImageSliderProps): import("react/jsx-runtime").JSX.Element;
 export {};
+//# sourceMappingURL=ProductImageSlider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProductImageSlider.d.ts","sourceRoot":"","sources":["../../../src/Components/ProductDetails/ProductImageSlider.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,iCAAiC,CAAC;AAGxD,UAAU,uBAAuB;IAC7B,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC;CACjB;AAED,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACvC,MAAM,EACN,WAAgB,EAChB,SAAe,EACf,gBAAoB,EACpB,KAAK,GACR,EAAE,uBAAuB,2CAsiBzB"}