pixelize-design-library 2.3.6 → 2.3.8

package/dist/Components/PinInputs/PinInputs.js

@@ -1,96 +1,51 @@
 "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;
-    };
-})();
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
-var react_2 = require("@chakra-ui/react");
-var Label_1 = __importDefault(require("../Common/Label"));
-var ErrorComponent_1 = __importDefault(require("../Common/ErrorComponent"));
-var PinInputs = function (_a) {
-    var _b, _c, _d, _e, _f;
-    var _g = _a.length, length = _g === void 0 ? 3 : _g, label = _a.label, error = _a.error, onChange = _a.onChange, onComplete = _a.onComplete, _h = _a.mask, mask = _h === void 0 ? false : _h, _j = _a.placeholder, placeholder = _j === void 0 ? "*" : _j;
-    var theme = (0, react_2.useTheme)();
-    var colors = theme.colors;
-    var _k = (0, react_1.useState)(Array(length).fill("")), values = _k[0], setValues = _k[1];
-    var inputsRef = (0, react_1.useRef)([]);
-    var borderColor = error
-        ? (_c = (_b = colors.semantic) === null || _b === void 0 ? void 0 : _b.error) === null || _c === void 0 ? void 0 : _c[500]
-        : (_d = colors.boxborder) === null || _d === void 0 ? void 0 : _d[500];
-    var focusRing = error ? (_e = colors.boxShadow) === null || _e === void 0 ? void 0 : _e.error : (_f = colors.boxShadow) === null || _f === void 0 ? void 0 : _f.primary;
-    var focusShadow = focusRing
-        ? "0 0 0 0.125rem ".concat(focusRing)
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const Label_1 = __importDefault(require("../Common/Label"));
+const ErrorComponent_1 = __importDefault(require("../Common/ErrorComponent"));
+const PinInputs = ({ length = 3, label, error, onChange, onComplete, mask = false, placeholder = "*", }) => {
+    var _a, _b, _c, _d, _e;
+    const theme = (0, react_2.useTheme)();
+    const { colors } = theme;
+    const [values, setValues] = (0, react_1.useState)(Array(length).fill(""));
+    const inputsRef = (0, react_1.useRef)([]);
+    const borderColor = error
+        ? (_b = (_a = colors.semantic) === null || _a === void 0 ? void 0 : _a.error) === null || _b === void 0 ? void 0 : _b[500]
+        : (_c = colors.boxborder) === null || _c === void 0 ? void 0 : _c[500];
+    const focusRing = error ? (_d = colors.boxShadow) === null || _d === void 0 ? void 0 : _d.error : (_e = colors.boxShadow) === null || _e === void 0 ? void 0 : _e.primary;
+    const focusShadow = focusRing
+        ? `0 0 0 0.125rem ${focusRing}`
         : undefined;
-    var handleChange = function (index, value) {
+    const handleChange = (index, value) => {
         var _a;
         if (!/^[0-9]?$/.test(value))
             return;
-        var newValues = __spreadArray([], values, true);
+        const newValues = [...values];
         newValues[index] = value;
         setValues(newValues);
         onChange === null || onChange === void 0 ? void 0 : onChange(newValues.join(""));
         if (value && index < length - 1) {
             (_a = inputsRef.current[index + 1]) === null || _a === void 0 ? void 0 : _a.focus();
         }
-        if (newValues.every(function (v) { return v !== ""; })) {
+        if (newValues.every((v) => v !== "")) {
             onComplete === null || onComplete === void 0 ? void 0 : onComplete(newValues.join(""));
         }
     };
-    var handleKeyDown = function (e, index) {
+    const handleKeyDown = (e, index) => {
         var _a;
         if (e.key === "Backspace" && !values[index] && index > 0) {
             (_a = inputsRef.current[index - 1]) === null || _a === void 0 ? void 0 : _a.focus();
         }
     };
-    return (react_1.default.createElement(react_2.Box, null,
-        label && react_1.default.createElement(Label_1.default, { label: label }),
-        react_1.default.createElement(react_2.HStack, { spacing: 2 }, Array.from({ length: length }).map(function (_, index) { return (react_1.default.createElement(react_2.Input, { key: index, ref: function (el) {
-                inputsRef.current[index] = el;
-            }, type: mask ? "password" : "text", inputMode: "numeric", maxLength: 1, placeholder: placeholder, value: values[index], onChange: function (e) { return handleChange(index, e.target.value); }, onKeyDown: function (e) { return handleKeyDown(e, index); }, w: 12, h: 12, textAlign: "center", fontSize: "lg", borderWidth: "1px", borderColor: borderColor, borderRadius: "md", _focus: focusShadow
-                ? { boxShadow: focusShadow, outline: "none" }
-                : { outline: "none" } })); })),
-        error && react_1.default.createElement(ErrorComponent_1.default, { error: error })));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [label && (0, jsx_runtime_1.jsx)(Label_1.default, { label: label }), (0, jsx_runtime_1.jsx)(react_2.HStack, { spacing: 2, children: Array.from({ length }).map((_, index) => ((0, jsx_runtime_1.jsx)(react_2.Input, { ref: (el) => {
+                        inputsRef.current[index] = el;
+                    }, type: mask ? "password" : "text", inputMode: "numeric", maxLength: 1, placeholder: placeholder, value: values[index], onChange: (e) => handleChange(index, e.target.value), onKeyDown: (e) => handleKeyDown(e, index), w: 12, h: 12, textAlign: "center", fontSize: "lg", borderWidth: "1px", borderColor: borderColor, borderRadius: "md", _focus: focusShadow
+                        ? { boxShadow: focusShadow, outline: "none" }
+                        : { outline: "none" } }, index))) }), error && (0, jsx_runtime_1.jsx)(ErrorComponent_1.default, { error: error })] }));
 };
 exports.default = PinInputs;

package/dist/Components/PinInputs/PinInputsProps.d.ts

@@ -7,3 +7,4 @@ export type PinInputsProps = {
     onChange?: (value: string) => void;
     onComplete?: (value: string) => void;
 };
+//# sourceMappingURL=PinInputsProps.d.ts.map

package/dist/Components/PinInputs/PinInputsProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PinInputsProps.d.ts","sourceRoot":"","sources":["../../../src/Components/PinInputs/PinInputsProps.tsx"],"names":[],"mappings":"AAAA,MAAM,MAAM,cAAc,GAAG;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC,CAAA"}

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

@@ -1,4 +1,4 @@
-import React from "react";
 import { ProductCardProps } from "./ProductCardProps";
-declare const ProductCard: ({ id, label, productImage, rating, reviews, tags, options, button, batch, onAddToCart, onNotifyMe, onClick, onOptionChange, addToCart, goToCart, OnGoToCart, size, notifyMe, isQtyEditable, displayRating, }: ProductCardProps) => React.JSX.Element;
+declare const ProductCard: ({ id, label, productImage, rating, reviews, tags, options, button, batch, onAddToCart, onNotifyMe, onClick, onOptionChange, addToCart, goToCart, OnGoToCart, size, notifyMe, isQtyEditable, displayRating, }: ProductCardProps) => import("react/jsx-runtime").JSX.Element;
 export default ProductCard;
+//# sourceMappingURL=ProductCard.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProductCard.d.ts","sourceRoot":"","sources":["../../../src/Components/ProductCard/ProductCard.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,gBAAgB,EAAqB,MAAM,oBAAoB,CAAC;AAKzE,QAAA,MAAM,WAAW,GAAI,8MAqBlB,gBAAgB,4CAsNlB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/Components/ProductCard/ProductCard.js

@@ -1,119 +1,67 @@
 "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;
-    };
-})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
-var react_2 = require("@chakra-ui/react");
-var ProductTags_1 = __importDefault(require("./ProductTags"));
-var ProductPrice_1 = __importDefault(require("./ProductPrice"));
-var Button_1 = __importDefault(require("../Button/Button"));
-var ProductLabel_1 = __importDefault(require("./ProductLabel"));
-var useCustomTheme_1 = require("../../Theme/useCustomTheme");
-var lucide_react_1 = require("lucide-react");
-var ProductReview_1 = __importDefault(require("./ProductReview"));
-var ProductCard = function (_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k;
-    var id = _a.id, label = _a.label, productImage = _a.productImage, rating = _a.rating, reviews = _a.reviews, tags = _a.tags, options = _a.options, button = _a.button, batch = _a.batch, onAddToCart = _a.onAddToCart, onNotifyMe = _a.onNotifyMe, onClick = _a.onClick, onOptionChange = _a.onOptionChange, addToCart = _a.addToCart, goToCart = _a.goToCart, OnGoToCart = _a.OnGoToCart, _l = _a.size, size = _l === void 0 ? "sm" : _l, notifyMe = _a.notifyMe, _m = _a.isQtyEditable, isQtyEditable = _m === void 0 ? false : _m, _o = _a.displayRating, displayRating = _o === void 0 ? true : _o;
-    var _p = (0, react_1.useState)(false), hover = _p[0], setHover = _p[1];
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var _q = (0, react_1.useState)(options === null || options === void 0 ? void 0 : options[0]), selectedOption = _q[0], setSelectedOption = _q[1];
-    var _r = (0, react_1.useState)(1), qty = _r[0], setQty = _r[1];
-    var handleOptionSelect = function (option) {
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const ProductTags_1 = __importDefault(require("./ProductTags"));
+const ProductPrice_1 = __importDefault(require("./ProductPrice"));
+const Button_1 = __importDefault(require("../Button/Button"));
+const ProductLabel_1 = __importDefault(require("./ProductLabel"));
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const lucide_react_1 = require("lucide-react");
+const ProductReview_1 = __importDefault(require("./ProductReview"));
+const ProductCard = ({ id, label, productImage, rating, reviews, tags, options, button, batch, onAddToCart, onNotifyMe, onClick, onOptionChange, addToCart, goToCart, OnGoToCart, size = "sm", notifyMe, isQtyEditable = false, displayRating = true, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    const [hover, setHover] = (0, react_1.useState)(false);
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const [selectedOption, setSelectedOption] = (0, react_1.useState)(options === null || options === void 0 ? void 0 : options[0]);
+    const [qty, setQty] = (0, react_1.useState)(1);
+    const handleOptionSelect = (option) => {
         setSelectedOption(option);
         onOptionChange === null || onOptionChange === void 0 ? void 0 : onOptionChange(option);
     };
-    var handleIncrement = function (e) {
+    const handleIncrement = (e) => {
         e.stopPropagation();
         if ((selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) && qty < selectedOption.stocks) {
-            setQty(function (prev) { return prev + 1; });
+            setQty((prev) => prev + 1);
         }
     };
-    var handleDecrement = function (e) {
+    const handleDecrement = (e) => {
         e.stopPropagation();
         if (qty > 1) {
-            setQty(function (prev) { return prev - 1; });
+            setQty((prev) => prev - 1);
         }
     };
-    var sizeStyles = {
+    const sizeStyles = {
         xs: { cardWidth: "16.25rem", imgHeight: "11.25rem", padding: 3 },
         sm: { cardWidth: "18rem", imgHeight: "13rem", padding: 4 },
         md: { cardWidth: "20rem", imgHeight: "15rem", padding: 5 },
         lg: { cardWidth: "22rem", imgHeight: "17rem", padding: 6 },
     };
-    var _s = sizeStyles[size], cardWidth = _s.cardWidth, imgHeight = _s.imgHeight, padding = _s.padding;
-    var imageList = (_b = productImage === null || productImage === void 0 ? void 0 : productImage.filter(function (img) { return img.isImage !== false; })) !== null && _b !== void 0 ? _b : [];
-    var allowedSizes = ["sm", "md", "lg", "xl", "xs"];
-    var safeSize = allowedSizes.includes(size) ? size : "md";
-    return (react_1.default.createElement(react_2.Box, { borderWidth: "0.063rem", borderRadius: "lg", overflow: "hidden", w: "full", maxW: cardWidth, h: "full", display: "flex", flexDirection: "column", position: "relative", bg: theme.colors.white, boxShadow: "lg" },
-        imageList.length > 0 && (react_1.default.createElement(react_2.Box, { onMouseEnter: function () { return setHover(true); }, onMouseLeave: function () { return setHover(false); }, h: imgHeight, w: "full", overflow: "hidden", onClick: onClick, cursor: "pointer" },
-            react_1.default.createElement(react_2.Image, { src: hover && ((_c = imageList === null || imageList === void 0 ? void 0 : imageList[1]) === null || _c === void 0 ? void 0 : _c.imageUrl) ? imageList[1].imageUrl : (_d = imageList === null || imageList === void 0 ? void 0 : imageList[0]) === null || _d === void 0 ? void 0 : _d.imageUrl, alt: label, w: "full", h: "full", transform: hover ? "scale(1.06)" : "scale(1)", transition: "transform 0.7s cubic-bezier(0.16, 1, 0.3, 1)" }),
-            batch && (react_1.default.createElement(react_2.Badge, { colorScheme: batch.color || "green", position: "absolute", top: 2, right: 2, fontSize: {
-                    xs: "xs",
-                    sm: "sm",
-                    md: "md",
-                    lg: "lg",
-                }[size], px: {
-                    xs: 1,
-                    sm: 2,
-                    md: 3,
-                    lg: 4,
-                }[size], py: {
-                    xs: 0.5,
-                    sm: 1,
-                    md: 1.5,
-                    lg: 2,
-                }[size] }, batch.label)))),
-        react_1.default.createElement(react_2.VStack, { spacing: 2, align: "start", p: padding, flex: "1", w: "full" },
-            react_1.default.createElement(react_2.Box, { onClick: onClick, cursor: "pointer" },
-                react_1.default.createElement(ProductLabel_1.default, { label: label, size: size })),
-            tags && react_1.default.createElement(ProductTags_1.default, { tags: tags, size: size }),
-            options && (react_1.default.createElement(ProductPrice_1.default, { options: options, size: size, onSelect: handleOptionSelect, rightSlot: (displayRating && ((rating !== undefined && rating !== null) || (reviews !== undefined && reviews !== null)))
-                    ? react_1.default.createElement(ProductReview_1.default, { rating: rating, reviewCount: reviews })
-                    : undefined })),
-            react_1.default.createElement(react_2.VStack, { w: "full", align: "stretch", spacing: 2, mt: "auto" },
-                typeof (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) === "number" && ((_e = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _e !== void 0 ? _e : 0) <= 0 && (react_1.default.createElement(Button_1.default, { colorScheme: "gray", size: safeSize, width: "100%", isDisabled: true }, "Out of Stock")),
-                addToCart && (((_f = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _f !== void 0 ? _f : 1) > 0) && isQtyEditable && (react_1.default.createElement(react_2.HStack, { w: "full", justify: "space-between" },
-                    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 >= ((_g = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _g !== void 0 ? _g : 1), isRound: true, variant: "outline", colorScheme: "red" })))),
-                (button === null || button === void 0 ? void 0 : button.onClick) && (react_1.default.createElement(Button_1.default, { colorScheme: "red", size: safeSize, width: "100%", onClick: button === null || button === void 0 ? void 0 : button.onClick }, (_h = button.label) !== null && _h !== void 0 ? _h : "Add to Cart")),
-                addToCart && (((_j = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _j !== void 0 ? _j : 1) > 0) && (react_1.default.createElement(Button_1.default, { width: "100%", size: safeSize, 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)); }, colorScheme: "red" }, "Add to Cart")),
-                addToCart && (((_k = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _k !== void 0 ? _k : 1) <= 0) && notifyMe && (react_1.default.createElement(Button_1.default, { width: "100%", size: safeSize, 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)); }, colorScheme: "red", variant: "outline" }, "Notify Me")),
-                goToCart && (react_1.default.createElement(Button_1.default, { width: "100%", size: safeSize, onClick: OnGoToCart, colorScheme: "red" }, "Go to Cart"))))));
+    const { cardWidth, imgHeight, padding } = sizeStyles[size];
+    const imageList = (_a = productImage === null || productImage === void 0 ? void 0 : productImage.filter((img) => img.isImage !== false)) !== null && _a !== void 0 ? _a : [];
+    const isSizeType = (s) => s === "xs" || s === "sm" || s === "md" || s === "lg";
+    const safeSize = isSizeType(size) ? size : "md";
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { borderWidth: "0.063rem", borderRadius: "lg", overflow: "hidden", w: "full", maxW: cardWidth, h: "full", display: "flex", flexDirection: "column", position: "relative", bg: theme.colors.white, boxShadow: "lg", children: [imageList.length > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Box, { onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), h: imgHeight, w: "full", overflow: "hidden", onClick: onClick, cursor: "pointer", children: [(0, jsx_runtime_1.jsx)(react_2.Image, { src: hover && ((_b = imageList === null || imageList === void 0 ? void 0 : imageList[1]) === null || _b === void 0 ? void 0 : _b.imageUrl) ? imageList[1].imageUrl : (_c = imageList === null || imageList === void 0 ? void 0 : imageList[0]) === null || _c === void 0 ? void 0 : _c.imageUrl, alt: label, w: "full", h: "full", transform: hover ? "scale(1.06)" : "scale(1)", transition: "transform 0.7s cubic-bezier(0.16, 1, 0.3, 1)" }), batch && ((0, jsx_runtime_1.jsx)(react_2.Badge, { colorScheme: batch.color || "green", position: "absolute", top: 2, right: 2, fontSize: {
+                            xs: "xs",
+                            sm: "sm",
+                            md: "md",
+                            lg: "lg",
+                        }[size], px: {
+                            xs: 1,
+                            sm: 2,
+                            md: 3,
+                            lg: 4,
+                        }[size], py: {
+                            xs: 0.5,
+                            sm: 1,
+                            md: 1.5,
+                            lg: 2,
+                        }[size], children: batch.label }))] })), (0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 2, align: "start", p: padding, flex: "1", w: "full", children: [(0, jsx_runtime_1.jsx)(react_2.Box, { onClick: onClick, cursor: "pointer", children: (0, jsx_runtime_1.jsx)(ProductLabel_1.default, { label: label, size: size }) }), tags && (0, jsx_runtime_1.jsx)(ProductTags_1.default, { tags: tags, size: size }), options && ((0, jsx_runtime_1.jsx)(ProductPrice_1.default, { options: options, size: size, onSelect: handleOptionSelect, rightSlot: (displayRating && ((rating !== undefined && rating !== null) || (reviews !== undefined && reviews !== null)))
+                            ? (0, jsx_runtime_1.jsx)(ProductReview_1.default, { rating: rating, reviewCount: reviews })
+                            : undefined })), (0, jsx_runtime_1.jsxs)(react_2.VStack, { w: "full", align: "stretch", spacing: 2, mt: "auto", children: [typeof (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) === "number" && ((_d = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _d !== void 0 ? _d : 0) <= 0 && ((0, jsx_runtime_1.jsx)(Button_1.default, { colorScheme: "gray", size: safeSize, width: "100%", isDisabled: true, children: "Out of Stock" })), addToCart && (((_e = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _e !== void 0 ? _e : 1) > 0) && isQtyEditable && ((0, jsx_runtime_1.jsx)(react_2.HStack, { w: "full", justify: "space-between", 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 >= ((_f = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _f !== void 0 ? _f : 1), isRound: true, variant: "outline", colorScheme: "red" })] }) })), (button === null || button === void 0 ? void 0 : button.onClick) && ((0, jsx_runtime_1.jsx)(Button_1.default, { colorScheme: "red", size: safeSize, width: "100%", onClick: button === null || button === void 0 ? void 0 : button.onClick, children: (_g = button.label) !== null && _g !== void 0 ? _g : "Add to Cart" })), addToCart && (((_h = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _h !== void 0 ? _h : 1) > 0) && ((0, jsx_runtime_1.jsx)(Button_1.default, { width: "100%", size: safeSize, 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)), colorScheme: "red", children: "Add to Cart" })), addToCart && (((_j = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _j !== void 0 ? _j : 1) <= 0) && notifyMe && ((0, jsx_runtime_1.jsx)(Button_1.default, { width: "100%", size: safeSize, onClick: () => (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.var_id) !== undefined && (onNotifyMe === null || onNotifyMe === void 0 ? void 0 : onNotifyMe(id, selectedOption.var_id)), colorScheme: "red", variant: "outline", children: "Notify Me" })), goToCart && ((0, jsx_runtime_1.jsx)(Button_1.default, { width: "100%", size: safeSize, onClick: OnGoToCart, colorScheme: "red", children: "Go to Cart" }))] })] })] }));
 };
 exports.default = ProductCard;

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

@@ -45,3 +45,4 @@ export type productImage = {
     order: number;
     isImage?: boolean;
 };
+//# sourceMappingURL=ProductCardProps.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProductCardProps.d.ts","sourceRoot":"","sources":["../../../src/Components/ProductCard/ProductCardProps.tsx"],"names":[],"mappings":"AAAA,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEjD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,YAAY,EAAE,CAAC;IAC7B,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,EAAE,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,IAAI,CAAC;KACrB,CAAC;IACF,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,EAAC,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAC,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAC,OAAO,CAAC;IAClB,UAAU,CAAC,EAAC,MAAI,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,OAAO,GAAG;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAC,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AACF,MAAM,MAAM,KAAK,GAAG;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AACF,MAAM,MAAM,YAAY,GAAG;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC"}

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

@@ -1,8 +1,8 @@
-import React from 'react';
 import { SizeType } from './ProductCardProps';
 declare const ProductLabel: ({ label, description, size }: {
     label: string;
     description?: string;
     size: SizeType;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default ProductLabel;
+//# sourceMappingURL=ProductLabel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProductLabel.d.ts","sourceRoot":"","sources":["../../../src/Components/ProductCard/ProductLabel.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAG9C,QAAA,MAAM,YAAY,GAAI,8BAA8B;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,QAAQ,CAAA;CAAE,4CAmB1G,CAAA;AAED,eAAe,YAAY,CAAA"}

package/dist/Components/ProductCard/ProductLabel.js

@@ -1,26 +1,20 @@
 "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 = require("@chakra-ui/react");
-var react_2 = __importDefault(require("react"));
-var ProductLabel = function (_a) {
-    var label = _a.label, description = _a.description, size = _a.size;
-    var fontSizes = {
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const ProductLabel = ({ label, description, size }) => {
+    const fontSizes = {
         xs: "md",
         sm: "lg",
         md: "xl",
         lg: "2xl"
     };
-    var descriptionSizes = {
+    const descriptionSizes = {
         xs: 'xs',
         sm: 'sm',
         md: 'md',
         lg: 'lg',
     };
-    return (react_2.default.createElement(react_1.Box, null,
-        react_2.default.createElement(react_1.Text, { fontWeight: "bold", fontSize: fontSizes[size] }, label),
-        description && react_2.default.createElement(react_1.Text, { fontSize: descriptionSizes[size], fontStyle: "italic" }, description)));
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontWeight: "bold", fontSize: fontSizes[size], children: label }), description && (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: descriptionSizes[size], fontStyle: "italic", children: description })] }));
 };
 exports.default = ProductLabel;

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

@@ -6,5 +6,6 @@ type ProductPriceProps = {
     onSelect?: (option: options) => void;
     rightSlot?: React.ReactNode;
 };
-declare const ProductPrice: ({ options, size, onSelect, rightSlot }: ProductPriceProps) => React.JSX.Element;
+declare const ProductPrice: ({ options, size, onSelect, rightSlot }: ProductPriceProps) => import("react/jsx-runtime").JSX.Element;
 export default ProductPrice;
+//# sourceMappingURL=ProductPrice.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProductPrice.d.ts","sourceRoot":"","sources":["../../../src/Components/ProductCard/ProductPrice.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAY3D,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAGvD,KAAK,iBAAiB,GAAG;IACvB,OAAO,EAAE,OAAO,EAAE,CAAC;IACnB,IAAI,EAAE,QAAQ,CAAA;IACd,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B,CAAC;AA6CF,QAAA,MAAM,YAAY,GAAI,wCAAwC,iBAAiB,4CAmP9E,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/Components/ProductCard/ProductPrice.js

@@ -1,45 +1,13 @@
 "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;
-    };
-})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
-var react_2 = require("@chakra-ui/react");
-var OverflowTooltipText_1 = __importDefault(require("../SideBar/components/OverflowTooltipText"));
-var sizeConfig = {
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const OverflowTooltipText_1 = __importDefault(require("../SideBar/components/OverflowTooltipText"));
+const sizeConfig = {
     xs: {
         font: "xs",
         label: "sm",
@@ -81,27 +49,24 @@ var sizeConfig = {
         dotSize: "0.75rem",
     },
 };
-var ProductPrice = function (_a) {
-    var options = _a.options, size = _a.size, onSelect = _a.onSelect, rightSlot = _a.rightSlot;
-    var cfg = sizeConfig[size];
-    var _b = (0, react_1.useState)(false), isOpen = _b[0], setIsOpen = _b[1];
-    var _c = (0, react_1.useState)(options[0]), selected = _c[0], setSelected = _c[1];
-    var _d = (0, react_1.useState)({ top: 0, left: 0, width: 0 }), dropdownPosition = _d[0], setDropdownPosition = _d[1];
-    var buttonRef = (0, react_1.useRef)(null);
-    var dropdownRef = (0, react_1.useRef)(null);
-    var isSingleOption = options.length === 1;
-    var isMobile = (0, react_2.useBreakpointValue)({ base: true, md: false });
+const ProductPrice = ({ options, size, onSelect, rightSlot }) => {
+    const cfg = sizeConfig[size];
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const [selected, setSelected] = (0, react_1.useState)(options[0]);
+    const [dropdownPosition, setDropdownPosition] = (0, react_1.useState)({ top: 0, left: 0, width: 0 });
+    const buttonRef = (0, react_1.useRef)(null);
+    const dropdownRef = (0, react_1.useRef)(null);
+    const isSingleOption = options.length === 1;
+    const isMobile = (0, react_2.useBreakpointValue)({ base: true, md: false });
     (0, react_2.useOutsideClick)({
         ref: dropdownRef,
-        handler: function () { return setIsOpen(false); },
+        handler: () => setIsOpen(false),
     });
-    var getDiscountedPrice = function (option) {
-        return Math.round(option.price - (option.price * option.offer) / 100);
-    };
-    (0, react_1.useEffect)(function () {
-        var updatePosition = function () {
+    const getDiscountedPrice = (option) => Math.round(option.price - (option.price * option.offer) / 100);
+    (0, react_1.useEffect)(() => {
+        const updatePosition = () => {
             if (buttonRef.current) {
-                var rect = buttonRef.current.getBoundingClientRect();
+                const rect = buttonRef.current.getBoundingClientRect();
                 setDropdownPosition({
                     top: rect.bottom + 4,
                     left: rect.left,
@@ -112,59 +77,30 @@ var ProductPrice = function (_a) {
         if (isOpen) {
             updatePosition();
             window.addEventListener("resize", updatePosition);
-            window.addEventListener("scroll", updatePosition, true); // listen to scroll of any container
+            window.addEventListener("scroll", updatePosition, true); // listen to scroll on every scrollable ancestor
         }
-        return function () {
+        return () => {
             window.removeEventListener("resize", updatePosition);
             window.removeEventListener("scroll", updatePosition, true);
         };
     }, [isOpen]);
-    (0, react_1.useEffect)(function () {
+    (0, react_1.useEffect)(() => {
         onSelect === null || onSelect === void 0 ? void 0 : onSelect(selected);
     }, [selected, onSelect]);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        isSingleOption ? (react_1.default.createElement(react_2.Box, { border: "0.063rem solid", borderColor: "red.300", bg: "red.50", px: cfg.px, 
-            // py={cfg.py}
-            rounded: "md", display: "inline-block", w: "100%" },
-            react_1.default.createElement(react_2.Text, { fontSize: cfg.label, fontWeight: "medium" }, options[0].label))) : (react_1.default.createElement(react_2.Box, { ref: buttonRef, onClick: function () { return setIsOpen(!isOpen); }, border: "0.063rem solid", borderColor: "red.300", bg: "red.50", px: cfg.px, 
-            // py={cfg.py}
-            rounded: "md", cursor: "pointer", display: "flex", justifyContent: "space-between", alignItems: "center", w: "100%" },
-            react_1.default.createElement(react_2.Box, { flex: "1", minW: 0 },
-                react_1.default.createElement(OverflowTooltipText_1.default, { placement: "top", maxWidth: "100%", fontSize: cfg.label, fontWeight: "medium", whiteSpace: "nowrap" }, selected.label)),
-            react_1.default.createElement(react_2.Text, { fontSize: cfg.font, color: "red.400", transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)', transition: "transform 0.2s" }, "\u25BE"))),
-        !isSingleOption && isOpen && (react_1.default.createElement(react_2.Portal, null,
-            react_1.default.createElement(react_2.Box, { ref: dropdownRef, position: "fixed", top: "".concat(dropdownPosition.top, "px"), left: "".concat(dropdownPosition.left, "px"), width: "".concat(dropdownPosition.width, "px"), bg: "white", border: "0.063rem solid", borderColor: "red.300", borderRadius: "md", overflow: "hidden", maxH: "13rem", overflowY: "auto", shadow: "md", zIndex: 100000 }, options.map(function (option) {
-                var discounted = getDiscountedPrice(option);
-                var isSelected = selected.var_id === option.var_id;
-                return (react_1.default.createElement(react_2.Grid, { key: option.var_id, px: 1, py: 0.5, cursor: "pointer", bg: isSelected ? 'red.50' : 'white', borderLeft: isSelected ? '0.25rem solid' : '0.25rem solid transparent', borderLeftColor: isSelected ? 'red.300' : 'transparent', _hover: { bg: 'red.100' }, onClick: function () {
-                        setSelected(option);
-                        setIsOpen(false);
-                    }, templateColumns: { base: '1fr auto', md: '1fr auto' }, 
-                    // columnGap={{ base: 2, md: 3 }}
-                    // rowGap={{ base: 1.5, md: 2 }}
-                    alignItems: "center" },
-                    react_1.default.createElement(react_2.HStack, { gridColumn: 1, gridRow: 1, spacing: 2, align: "center", minW: 0, mb: 0 },
-                        react_1.default.createElement(react_2.Box, { flex: "1", minW: 0 },
-                            react_1.default.createElement(OverflowTooltipText_1.default, { placement: "top", maxWidth: "100%", fontSize: { base: "xs", md: "sm" }, fontWeight: "medium", whiteSpace: "nowrap" }, option.label))),
-                    react_1.default.createElement(react_2.Box, { gridColumn: 1, gridRow: 2, mt: 0, textAlign: "left" },
-                        react_1.default.createElement(react_2.HStack, { spacing: 2, align: "center" },
-                            option.offer > 0 && (react_1.default.createElement(react_2.Badge, { bg: "green.100", color: "green.700", borderRadius: "md", px: { base: 0, md: 0.5 }, py: { base: 0, md: 0.25 }, fontWeight: "bold", fontSize: "10px", flexShrink: 0 }, isMobile ? "".concat(option.offer, "%") : "".concat(option.offer, "% OFF"))),
-                            react_1.default.createElement(react_2.Text, { fontSize: "sm", fontWeight: "bold", color: "red.500", whiteSpace: "nowrap" },
-                                "\u20B9",
-                                discounted),
-                            option.offer > 0 && (react_1.default.createElement(react_2.Text, { fontSize: "xs", color: "gray.500", textDecoration: "line-through", whiteSpace: "nowrap" },
-                                "\u20B9",
-                                option.price)))),
-                    react_1.default.createElement(react_2.Box, { gridColumn: 2, gridRow: 1, ml: { base: 0, md: 0 }, justifySelf: "end", w: { base: "0.625rem", md: "0.75rem" }, h: { base: "0.625rem", md: "0.75rem" }, minW: { base: "0.625rem", md: "0.75rem" }, borderRadius: "full", border: "0.125rem solid", borderColor: isSelected ? 'red.500' : 'gray.600', bg: "white", display: "flex", alignItems: "center", justifyContent: "center", boxShadow: "none" }, isSelected && (react_1.default.createElement(react_2.Box, { w: { base: "0.25rem", md: "0.3125rem" }, h: { base: "0.25rem", md: "0.3125rem" }, bg: "red.500", borderRadius: "full" })))));
-            })))),
-        react_1.default.createElement(react_2.Flex, { mt: 2, w: "full", gap: 3, direction: { base: "column", md: "row" }, align: { base: "flex-start", md: "center" }, justify: { base: "flex-start", md: rightSlot ? "space-between" : "flex-start" } },
-            react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", fontSize: cfg.price, gap: 2, minW: 0 },
-                selected.offer > 0 && (react_1.default.createElement(react_2.Text, { color: "gray.400", textDecoration: "line-through" },
-                    "\u20B9",
-                    selected.price)),
-                react_1.default.createElement(react_2.Text, { color: "red.500", fontWeight: "semibold" },
-                    "\u20B9",
-                    getDiscountedPrice(selected))),
-            rightSlot && (react_1.default.createElement(react_2.Box, { flexShrink: 0, mt: { base: 2, md: 0 } }, rightSlot)))));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isSingleOption ? ((0, jsx_runtime_1.jsx)(react_2.Box, { border: "0.063rem solid", borderColor: "red.300", bg: "red.50", px: cfg.px, 
+                // py={cfg.py}
+                rounded: "md", display: "inline-block", w: "100%", children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: cfg.label, fontWeight: "medium", children: options[0].label }) })) : ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: buttonRef, onClick: () => setIsOpen(!isOpen), border: "0.063rem solid", borderColor: "red.300", bg: "red.50", px: cfg.px, 
+                // py={cfg.py}
+                rounded: "md", cursor: "pointer", display: "flex", justifyContent: "space-between", alignItems: "center", w: "100%", children: [(0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", minW: 0, children: (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "top", maxWidth: "100%", fontSize: cfg.label, fontWeight: "medium", whiteSpace: "nowrap", children: selected.label }) }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: cfg.font, color: "red.400", transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)', transition: "transform 0.2s", children: "\u25BE" })] })), !isSingleOption && isOpen && ((0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.Box, { ref: dropdownRef, position: "fixed", top: `${dropdownPosition.top}px`, left: `${dropdownPosition.left}px`, width: `${dropdownPosition.width}px`, bg: "white", border: "0.063rem solid", borderColor: "red.300", borderRadius: "md", overflow: "hidden", maxH: "13rem", overflowY: "auto", shadow: "md", zIndex: 100000, children: options.map((option) => {
+                        const discounted = getDiscountedPrice(option);
+                        const isSelected = selected.var_id === option.var_id;
+                        return ((0, jsx_runtime_1.jsxs)(react_2.Grid, { px: 1, py: 0.5, cursor: "pointer", bg: isSelected ? 'red.50' : 'white', borderLeft: isSelected ? '0.25rem solid' : '0.25rem solid transparent', borderLeftColor: isSelected ? 'red.300' : 'transparent', _hover: { bg: 'red.100' }, onClick: () => {
+                                setSelected(option);
+                                setIsOpen(false);
+                            }, templateColumns: { base: '1fr auto', md: '1fr auto' }, 
+                            // columnGap={{ base: 2, md: 3 }}
+                            // rowGap={{ base: 1.5, md: 2 }}
+                            alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_2.HStack, { gridColumn: 1, gridRow: 1, spacing: 2, align: "center", minW: 0, mb: 0, children: (0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", minW: 0, children: (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "top", maxWidth: "100%", fontSize: { base: "xs", md: "sm" }, fontWeight: "medium", whiteSpace: "nowrap", children: option.label }) }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { gridColumn: 1, gridRow: 2, mt: 0, textAlign: "left", children: (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, align: "center", children: [option.offer > 0 && ((0, jsx_runtime_1.jsx)(react_2.Badge, { bg: "green.100", color: "green.700", borderRadius: "md", px: { base: 0, md: 0.5 }, py: { base: 0, md: 0.25 }, fontWeight: "bold", fontSize: "10px", flexShrink: 0, children: isMobile ? `${option.offer}%` : `${option.offer}% OFF` })), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", fontWeight: "bold", color: "red.500", whiteSpace: "nowrap", children: ["\u20B9", discounted] }), option.offer > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", color: "gray.500", textDecoration: "line-through", whiteSpace: "nowrap", children: ["\u20B9", option.price] }))] }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { gridColumn: 2, gridRow: 1, ml: { base: 0, md: 0 }, justifySelf: "end", w: { base: "0.625rem", md: "0.75rem" }, h: { base: "0.625rem", md: "0.75rem" }, minW: { base: "0.625rem", md: "0.75rem" }, borderRadius: "full", border: "0.125rem solid", borderColor: isSelected ? 'red.500' : 'gray.600', bg: "white", display: "flex", alignItems: "center", justifyContent: "center", boxShadow: "none", children: isSelected && ((0, jsx_runtime_1.jsx)(react_2.Box, { w: { base: "0.25rem", md: "0.3125rem" }, h: { base: "0.25rem", md: "0.3125rem" }, bg: "red.500", borderRadius: "full" })) })] }, option.var_id));
+                    }) }) })), (0, jsx_runtime_1.jsxs)(react_2.Flex, { mt: 2, w: "full", gap: 3, direction: { base: "column", md: "row" }, align: { base: "flex-start", md: "center" }, justify: { base: "flex-start", md: rightSlot ? "space-between" : "flex-start" }, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", fontSize: cfg.price, gap: 2, minW: 0, children: [selected.offer > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Text, { color: "gray.400", textDecoration: "line-through", children: ["\u20B9", selected.price] })), (0, jsx_runtime_1.jsxs)(react_2.Text, { color: "red.500", fontWeight: "semibold", children: ["\u20B9", getDiscountedPrice(selected)] })] }), rightSlot && ((0, jsx_runtime_1.jsx)(react_2.Box, { flexShrink: 0, mt: { base: 2, md: 0 }, children: rightSlot }))] })] }));
 };
 exports.default = ProductPrice;