pixelize-design-library 2.2.89 → 2.2.91

package/dist/Components/Header/components/mobileMenu.js

@@ -27,7 +27,7 @@ var MobileMenu = function (_a) {
                             react_2.default.createElement(react_1.HStack, { w: "full", justify: "space-between", align: "center" },
                                 react_2.default.createElement(react_1.VStack, { spacing: 0, align: "start" },
                                     item.badge && (react_2.default.createElement(react_1.Badge, { colorScheme: (_b = (_a = item === null || item === void 0 ? void 0 : item.badge) === null || _a === void 0 ? void 0 : _a.colorScheme) !== null && _b !== void 0 ? _b : "blue", fontSize: "0.6em" }, item.badge.label)),
-                                    react_2.default.createElement(react_1.Text, { fontWeight: "medium" }, item.label)))),
+                                    react_2.default.createElement(react_1.Text, { fontWeight: "bold" }, item.label)))),
                         react_2.default.createElement(react_1.Collapse, { in: openMenuLabel === item.label, animateOpacity: true },
                             react_2.default.createElement(react_1.Stack, { pl: 4, mt: 1, spacing: 1 }, item.children.map(function (subItem) {
                                 var _a, _b, _c;
@@ -38,7 +38,9 @@ var MobileMenu = function (_a) {
                                     }, variant: "ghost", w: "full", justifyContent: "flex-start", color: color, bg: isActive(subItem.href) ? activeBg : "transparent", _hover: { bg: hoverBg } },
                                     react_2.default.createElement(react_1.VStack, { spacing: 0, align: "start" },
                                         subItem.badge && (react_2.default.createElement(react_1.Badge, { colorScheme: (_b = (_a = subItem === null || subItem === void 0 ? void 0 : subItem.badge) === null || _a === void 0 ? void 0 : _a.colorScheme) !== null && _b !== void 0 ? _b : "blue", fontSize: "0.6em" }, (_c = subItem.badge) === null || _c === void 0 ? void 0 : _c.label)),
-                                        react_2.default.createElement(react_1.Text, null, subItem.label))));
+                                        react_2.default.createElement(react_1.HStack, { spacing: 2, align: "center" },
+                                            react_2.default.createElement(react_1.Box, { boxSize: "0.4rem", borderRadius: "full", bg: "currentColor" }),
+                                            react_2.default.createElement(react_1.Text, { fontSize: "xs" }, subItem.label)))));
                             }))))) : (react_2.default.createElement(react_1.Button, { key: item.label, onClick: function () { var _a; (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item); onClose === null || onClose === void 0 ? void 0 : onClose(); }, variant: "ghost", w: "full", justifyContent: "flex-start", color: color, bg: isActive(item.href) ? activeBg : "transparent", _hover: { bg: hoverBg } },
                         react_2.default.createElement(react_1.VStack, { spacing: 0, align: "start" },
                             item.badge && (react_2.default.createElement(react_1.Badge, { colorScheme: (_d = (_c = item === null || item === void 0 ? void 0 : item.badge) === null || _c === void 0 ? void 0 : _c.colorScheme) !== null && _d !== void 0 ? _d : "blue", fontSize: "0.6em" }, (_e = item.badge) === null || _e === void 0 ? void 0 : _e.label)),

package/dist/Components/ProductCard/ProductCard.js

@@ -70,7 +70,7 @@ var ProductCard = function (_a) {
     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, position: "relative", bg: theme.colors.white, boxShadow: "lg" },
         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 && ((_b = productImage === null || productImage === void 0 ? void 0 : productImage[1]) === null || _b === void 0 ? void 0 : _b.imageUrl) ? productImage[1].imageUrl : (_c = productImage === null || productImage === void 0 ? void 0 : productImage[0]) === null || _c === void 0 ? void 0 : _c.imageUrl, alt: label, w: "full", h: "full" }),
+            react_1.default.createElement(react_2.Image, { src: hover && ((_b = productImage === null || productImage === void 0 ? void 0 : productImage[1]) === null || _b === void 0 ? void 0 : _b.imageUrl) ? productImage[1].imageUrl : (_c = productImage === null || productImage === void 0 ? void 0 : productImage[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 && (react_1.default.createElement(react_2.Badge, { colorScheme: batch.color || "green", position: "absolute", top: 2, right: 2, fontSize: {
                     xs: "xs",
                     sm: "sm",
@@ -91,8 +91,10 @@ var ProductCard = function (_a) {
             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: rating && reviews ? react_1.default.createElement(ProductReview_1.default, { rating: rating, reviewCount: reviews }) : undefined })),
-            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 && (react_1.default.createElement(react_2.Badge, { colorScheme: "red", fontSize: "xs", px: 2, py: 1, variant: "subtle", rounded: "md", fontWeight: "semibold", textTransform: "uppercase" }, "OUT OF STOCK")),
+            options && (react_1.default.createElement(ProductPrice_1.default, { options: options, size: size, onSelect: handleOptionSelect, rightSlot: rating || reviews ? react_1.default.createElement(ProductReview_1.default, { rating: rating, reviewCount: reviews }) : undefined })),
+            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 && (react_1.default.createElement(Button_1.default, { colorScheme: "gray", size: safeSize, width: "100%", 
+                // onClick={button?.onClick}
+                isDisabled: true }, "Out of Stock")),
             addToCart && (((_e = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _e !== void 0 ? _e : 1) > 0) && isQtyEditable && (react_1.default.createElement(react_2.HStack, { w: "full", justify: "space-between", mb: 2 },
                 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" }),

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

@@ -1,7 +1,8 @@
 import React from 'react';
 type ProductReviewProps = {
-    rating: string | number;
-    reviewCount: string | number;
+    rating?: string | number;
+    reviewCount?: string | number;
+    mb?: number;
 };
-declare const ProductReview: ({ rating, reviewCount }: ProductReviewProps) => React.JSX.Element;
+declare const ProductReview: ({ rating, reviewCount, mb }: ProductReviewProps) => React.JSX.Element;
 export default ProductReview;

package/dist/Components/ProductCard/ProductReview.js

@@ -7,8 +7,8 @@ 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;
-    return (react_1.default.createElement(react_2.Flex, { align: "center", gap: 2 },
+    var rating = _a.rating, reviewCount = _a.reviewCount, _b = _a.mb, mb = _b === void 0 ? 0 : _b;
+    return (react_1.default.createElement(react_2.Flex, { align: "center", gap: 2, mb: mb },
         react_1.default.createElement(react_2.Flex, { align: "center", gap: "1", bg: "teal.900", color: "white", px: 2, borderRadius: "md", fontSize: "sm", fontWeight: "bold" },
             react_1.default.createElement(react_2.Icon, { as: lucide_react_1.Star, boxSize: 3.5 }),
             react_1.default.createElement(react_2.Text, null, rating)),

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, notifyMe, isQtyEditable, }: ProductDetailsProps) => React.JSX.Element;
+declare const ProductDetails: ({ id, price, label, shortdesc, tags, images, batch, category, onAddToCart, onNotifyMe, onOptionChange, addToCart, goToCart, OnGoToCart, rating, reviews, notifyMe, isQtyEditable, }: ProductDetailsProps) => React.JSX.Element;
 export default ProductDetails;

package/dist/Components/ProductDetails/ProductDetails.js

@@ -12,9 +12,10 @@ var ProductDtlPrice_1 = __importDefault(require("./ProductDtlPrice"));
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 var Button_1 = __importDefault(require("../Button/Button"));
 var lucide_react_1 = require("lucide-react");
+var ProductReview_1 = __importDefault(require("../ProductCard/ProductReview"));
 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, notifyMe = _a.notifyMe, _g = _a.isQtyEditable, isQtyEditable = _g === void 0 ? false : _g;
+    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;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     var isMobile = (0, react_2.useBreakpointValue)({ base: true, md: false });
     var _h = react_1.default.useState(price === null || price === void 0 ? void 0 : price[0]), selectedOption = _h[0], setSelectedOption = _h[1];
@@ -40,13 +41,17 @@ var ProductDetails = function (_a) {
         react_1.default.createElement(react_2.Box, { flex: "1" },
             label && react_1.default.createElement(ProductLabel_1.default, { label: label, size: "sm" }),
             react_1.default.createElement(react_2.Text, { fontSize: "md", color: theme.colors.gray[700], my: 3 }, shortdesc),
+            rating || reviews && 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(react_2.Badge, { colorScheme: "red", fontSize: "xs", px: 2, py: 1, variant: "subtle", rounded: "md", fontWeight: "semibold", textTransform: "uppercase" }, "OUT OF STOCK"))),
+                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,

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

@@ -8,6 +8,8 @@ export type ProductDetailsProps = {
     images?: images[];
     batch?: batch;
     category?: string;
+    rating?: string | number;
+    reviews?: string | number;
     onAddToCart?: (id: string | number, var_id: number, qty?: number) => void;
     onNotifyMe?: (id: string | number, var_id: number) => void;
     onOptionChange?: (option: options) => void;

package/dist/Components/ProductDetails/ProductDtlPrice.js

@@ -52,6 +52,10 @@ var ProductDtlPrice = function (_a) {
             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: "sm", variant: idx === selectedIndex ? "solid" : "outline", colorScheme: idx === selectedIndex ? "blackAlpha" : undefined, onClick: function () { return setSelectedIndex(idx); } }, pack.label)); })))));
+            react_1.default.createElement(react_2.HStack, { spacing: 2 }, price.map(function (pack, idx) { return (react_1.default.createElement(react_2.Button, { key: pack.var_id, size: "xs", variant: "outline", borderColor: idx === selectedIndex ? "orange.400" : "orange.200", bg: idx === selectedIndex ? "orange.50" : "white", color: "orange.600", borderRadius: "md", fontWeight: "medium", _hover: {
+                    bg: "orange.100",
+                }, _active: {
+                    bg: "orange.100",
+                }, onClick: function () { return setSelectedIndex(idx); } }, pack.label)); })))));
 };
 exports.default = ProductDtlPrice;

package/dist/index.d.ts

@@ -59,6 +59,5 @@ import PaymentCard from "./Components/Card/PaymentCard/PaymentCard";
 import ApexLineChart from "./Components/Apexcharts/ApexLineChart/ApexLineChart";
 import Notification from "./Components/Notification/Notification";
 import DatePicker from "./Components/DatePicker/ThemeDatePicker";
-import ShopMap from "./Components/Map/ShopMap";
-export { Accordian, AlertDialog, ApexBarChart, ApexPieChart, ApexPolarChart, ApexLineChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, ContactForm, DatePicker, Drawer, DrawerHeader, DrawerBody, DrawerFooter, Dropdown, Editor, FileUpload, FileUploader, FormWrapper, Header, HeaderActions, InputTextArea, InputSwitch, KanbanBoard, Loading, Modal, ModalHeader, ModalBody, ModalFooter, NavigationBar, Notification, NoteTextArea, MultiSelect, NumberInput, PaymentCard, PhoneNumberInput, PinInput, ProductCard, ProductDetails, ProfileCard, ProfileCardHeader, ProfileCardBody, ProfileCardFooter, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Reorder, Search, Select, SearchSelect, SelectSearch, SideBar, Slider, Skeletons, ShopMap, Switch, Table, TableToggle, Tag, TextInput, Timeline, Toaster, ToolTip, useToaster, VerifyEmailOtp, useCustomTheme, ThemesList, debounce, };
+export { Accordian, AlertDialog, ApexBarChart, ApexPieChart, ApexPolarChart, ApexLineChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, ContactForm, DatePicker, Drawer, DrawerHeader, DrawerBody, DrawerFooter, Dropdown, Editor, FileUpload, FileUploader, FormWrapper, Header, HeaderActions, InputTextArea, InputSwitch, KanbanBoard, Loading, Modal, ModalHeader, ModalBody, ModalFooter, NavigationBar, Notification, NoteTextArea, MultiSelect, NumberInput, PaymentCard, PhoneNumberInput, PinInput, ProductCard, ProductDetails, ProfileCard, ProfileCardHeader, ProfileCardBody, ProfileCardFooter, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Reorder, Search, Select, SearchSelect, SelectSearch, SideBar, Slider, Skeletons, Switch, Table, TableToggle, Tag, TextInput, Timeline, Toaster, ToolTip, useToaster, VerifyEmailOtp, useCustomTheme, ThemesList, debounce, };
 export default withTheme;

package/dist/index.js

@@ -28,7 +28,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCardFooter = exports.ProfileCardBody = exports.ProfileCardHeader = exports.ProfileCard = exports.ProductDetails = exports.ProductCard = exports.PinInput = exports.PhoneNumberInput = exports.PaymentCard = exports.NumberInput = exports.MultiSelect = exports.NoteTextArea = exports.Notification = exports.NavigationBar = exports.ModalFooter = exports.ModalBody = exports.ModalHeader = exports.Modal = exports.Loading = exports.KanbanBoard = exports.InputSwitch = exports.InputTextArea = exports.HeaderActions = exports.Header = exports.FormWrapper = exports.FileUploader = exports.FileUpload = exports.Editor = exports.Dropdown = exports.DrawerFooter = exports.DrawerBody = exports.DrawerHeader = exports.Drawer = exports.DatePicker = exports.ContactForm = exports.Checkbox = exports.Card = exports.ButtonGroupIcon = exports.Button = exports.Breadcrumbs = exports.ApexLineChart = exports.ApexPolarChart = exports.ApexPieChart = exports.ApexBarChart = exports.AlertDialog = exports.Accordian = void 0;
-exports.debounce = exports.ThemesList = exports.useCustomTheme = exports.VerifyEmailOtp = exports.useToaster = exports.ToolTip = exports.Toaster = exports.Timeline = exports.TextInput = exports.Tag = exports.TableToggle = exports.Table = exports.Switch = exports.ShopMap = exports.Skeletons = exports.Slider = exports.SideBar = exports.SelectSearch = exports.SearchSelect = exports.Select = exports.Search = exports.Reorder = void 0;
+exports.debounce = exports.ThemesList = exports.useCustomTheme = exports.VerifyEmailOtp = exports.useToaster = exports.ToolTip = exports.Toaster = exports.Timeline = exports.TextInput = exports.Tag = exports.TableToggle = exports.Table = exports.Switch = exports.Skeletons = exports.Slider = exports.SideBar = exports.SelectSearch = exports.SearchSelect = exports.Select = exports.Search = exports.Reorder = void 0;
 var Accordion_1 = __importDefault(require("./Components/Accordion/Accordion"));
 exports.Accordian = Accordion_1.default;
 var AlertDialog_1 = __importDefault(require("./Components/AlertDialog/AlertDialog"));
@@ -162,6 +162,4 @@ var Notification_1 = __importDefault(require("./Components/Notification/Notifica
 exports.Notification = Notification_1.default;
 var ThemeDatePicker_1 = __importDefault(require("./Components/DatePicker/ThemeDatePicker"));
 exports.DatePicker = ThemeDatePicker_1.default;
-var ShopMap_1 = __importDefault(require("./Components/Map/ShopMap"));
-exports.ShopMap = ShopMap_1.default;
 exports.default = withTheme_1.default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.2.89",
+  "version": "2.2.91",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -10,8 +10,6 @@
     "@hello-pangea/dnd": "^18.0.1",
     "framer-motion": "^11.2.2",
     "jodit-react": "^5.2.38",
-    "leaflet": "^1.9.4",
-    "leaflet-routing-machine": "^3.2.12",
     "lucide-react": "^0.487.0",
     "react": "^18.3.1",
     "react-apexcharts": "^1.4.1",

package/dist/Components/Map/ShopMap.d.ts

@@ -1,22 +0,0 @@
-import React from "react";
-import "leaflet-routing-machine";
-export type ShopLocation = {
-    id: string | number;
-    name: string;
-    lat: number;
-    lng: number;
-    address?: string;
-};
-export type ShopMapProps = {
-    shops: ShopLocation[];
-    selectedShopId?: string | number;
-    userLocation?: {
-        lat: number;
-        lng: number;
-    };
-    height?: string | number;
-    onSelectShop?: (shop: ShopLocation) => void;
-    navigateToShopId?: string | number;
-};
-declare const ShopMap: React.FC<ShopMapProps>;
-export default ShopMap;

package/dist/Components/Map/ShopMap.js

@@ -1,205 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __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 leaflet_1 = __importDefault(require("leaflet"));
-require("leaflet-routing-machine");
-var tileUrl = "https://tile.openstreetmap.org/{z}/{x}/{y}.png";
-function directionsUrl(dest, origin) {
-    var base = "https://www.google.com/maps/dir/?api=1";
-    var destination = "destination=".concat(dest.lat, ",").concat(dest.lng);
-    var o = origin ? "&origin=".concat(origin.lat, ",").concat(origin.lng) : "";
-    return "".concat(base, "&").concat(destination).concat(o);
-}
-var ShopMap = function (_a) {
-    var shops = _a.shops, selectedShopId = _a.selectedShopId, userLocation = _a.userLocation, _b = _a.height, height = _b === void 0 ? 360 : _b, onSelectShop = _a.onSelectShop, navigateToShopId = _a.navigateToShopId;
-    var mapElRef = (0, react_1.useRef)(null);
-    var mapRef = (0, react_1.useRef)(null);
-    var markersRef = (0, react_1.useRef)(new Map());
-    var routeLayerRef = (0, react_1.useRef)(null);
-    var routingControlRef = (0, react_1.useRef)(null);
-    var internalOriginRef = (0, react_1.useRef)(null);
-    var bounds = (0, react_1.useMemo)(function () {
-        var b = leaflet_1.default.latLngBounds([]);
-        shops.forEach(function (s) { return b.extend([s.lat, s.lng]); });
-        return b;
-    }, [shops]);
-    (0, react_1.useEffect)(function () {
-        if (!mapElRef.current)
-            return;
-        if (!mapRef.current) {
-            mapRef.current = leaflet_1.default.map(mapElRef.current);
-            leaflet_1.default.tileLayer(tileUrl, {
-                attribution: "© OpenStreetMap contributors",
-            }).addTo(mapRef.current);
-        }
-        markersRef.current.forEach(function (layer) {
-            if (mapRef.current && mapRef.current.hasLayer(layer))
-                mapRef.current.removeLayer(layer);
-        });
-        markersRef.current.clear();
-        shops.forEach(function (shop) {
-            var marker = leaflet_1.default.circleMarker([shop.lat, shop.lng], {
-                radius: 7,
-                color: "#2563eb",
-                weight: 2,
-                fillColor: "#60a5fa",
-                fillOpacity: 0.8,
-            });
-            var html = "<div style=\"min-width:220px;line-height:1.4\">".concat(shop.name).concat(shop.address ? "<br/><small>".concat(shop.address, "</small>") : "", "<br/><div style=\"display:flex;gap:8px;margin-top:6px\"><button data-id=\"").concat(shop.id, "\" data-action=\"navigate\" style=\"padding:6px 10px;border-radius:6px;background:#7c3aed;color:#fff;border:none;cursor:pointer\">Navigate</button><button data-id=\"").concat(shop.id, "\" data-action=\"gmaps\" style=\"padding:6px 10px;border-radius:6px;background:#9333ea;color:#fff;border:none;cursor:pointer\">Google Maps</button></div></div>");
-            marker.bindPopup(html, { autoPan: false });
-            marker.on("click", function () { return onSelectShop && onSelectShop(shop); });
-            marker.on("popupopen", function () {
-                var _a;
-                var el = (_a = marker.getPopup()) === null || _a === void 0 ? void 0 : _a.getElement();
-                if (!el)
-                    return;
-                var navBtn = el.querySelector("button[data-id='".concat(shop.id, "'][data-action='navigate']"));
-                var gmapsBtn = el.querySelector("button[data-id='".concat(shop.id, "'][data-action='gmaps']"));
-                if (navBtn) {
-                    navBtn.addEventListener("click", function () {
-                        if (!mapRef.current)
-                            return;
-                        var proceed = function (origin) {
-                            if (routingControlRef.current) {
-                                mapRef.current.removeControl(routingControlRef.current);
-                                routingControlRef.current = null;
-                            }
-                            var dest = leaflet_1.default.latLng(shop.lat, shop.lng);
-                            var plan = leaflet_1.default.Routing.plan([origin, dest], {
-                                draggableWaypoints: false,
-                                addWaypoints: false,
-                                createMarker: function (_i, wp) { return leaflet_1.default.marker(wp.latLng, { opacity: 0, interactive: false }); },
-                            });
-                            routingControlRef.current = leaflet_1.default.Routing.control({
-                                plan: plan,
-                                router: leaflet_1.default.Routing.osrmv1({ serviceUrl: "https://router.project-osrm.org/route/v1" }),
-                                fitSelectedRoutes: true,
-                                routeWhileDragging: false,
-                                showAlternatives: false,
-                            });
-                            routingControlRef.current.addTo(mapRef.current);
-                        };
-                        var originSource = userLocation || internalOriginRef.current;
-                        if (originSource) {
-                            proceed(leaflet_1.default.latLng(originSource.lat, originSource.lng));
-                        }
-                        else if (navigator.geolocation) {
-                            navigator.geolocation.getCurrentPosition(function (pos) {
-                                internalOriginRef.current = { lat: pos.coords.latitude, lng: pos.coords.longitude };
-                                proceed(leaflet_1.default.latLng(pos.coords.latitude, pos.coords.longitude));
-                            });
-                        }
-                    });
-                }
-                if (gmapsBtn) {
-                    gmapsBtn.addEventListener("click", function () {
-                        var originSource = userLocation || internalOriginRef.current || undefined;
-                        var link = directionsUrl({ lat: shop.lat, lng: shop.lng }, originSource ? { lat: originSource.lat, lng: originSource.lng } : undefined);
-                        window.open(link, "_blank", "noopener");
-                    });
-                }
-            });
-            marker.addTo(mapRef.current);
-            markersRef.current.set(shop.id, marker);
-        });
-        if (shops.length) {
-            mapRef.current.fitBounds(bounds.pad(0.2));
-        }
-        return function () {
-            if (routingControlRef.current && mapRef.current) {
-                mapRef.current.removeControl(routingControlRef.current);
-            }
-            routingControlRef.current = null;
-            if (routeLayerRef.current && mapRef.current && mapRef.current.hasLayer(routeLayerRef.current)) {
-                mapRef.current.removeLayer(routeLayerRef.current);
-            }
-            routeLayerRef.current = null;
-            markersRef.current.clear();
-            if (mapRef.current) {
-                mapRef.current.off();
-                mapRef.current.remove();
-                mapRef.current = null;
-            }
-        };
-    }, [shops, bounds, userLocation]);
-    (0, react_1.useEffect)(function () {
-        var _a, _b;
-        if (!selectedShopId || !mapRef.current)
-            return;
-        var layer = markersRef.current.get(selectedShopId);
-        if (!layer)
-            return;
-        (_b = (_a = layer).openPopup) === null || _b === void 0 ? void 0 : _b.call(_a);
-    }, [selectedShopId]);
-    (0, react_1.useEffect)(function () {
-        var _a, _b, _c, _d;
-        if (!navigateToShopId || !mapRef.current)
-            return;
-        var layer = markersRef.current.get(navigateToShopId);
-        if (!layer)
-            return;
-        var center = (_b = (_a = layer).getLatLng) === null || _b === void 0 ? void 0 : _b.call(_a);
-        if (!center)
-            return;
-        var build = function (origin) {
-            if (routingControlRef.current) {
-                mapRef.current.removeControl(routingControlRef.current);
-                routingControlRef.current = null;
-            }
-            var plan = leaflet_1.default.Routing.plan([origin, center], {
-                draggableWaypoints: false,
-                addWaypoints: false,
-                createMarker: function (_i, wp) { return leaflet_1.default.marker(wp.latLng, { opacity: 0, interactive: false }); },
-            });
-            routingControlRef.current = leaflet_1.default.Routing.control({
-                plan: plan,
-                router: leaflet_1.default.Routing.osrmv1({ serviceUrl: "https://router.project-osrm.org/route/v1" }),
-                fitSelectedRoutes: true,
-                routeWhileDragging: false,
-                showAlternatives: false,
-            });
-            routingControlRef.current.addTo(mapRef.current);
-        };
-        var originSrc = userLocation || internalOriginRef.current;
-        if (originSrc) {
-            build(leaflet_1.default.latLng(originSrc.lat, originSrc.lng));
-        }
-        else if (navigator.geolocation) {
-            navigator.geolocation.getCurrentPosition(function (pos) {
-                internalOriginRef.current = { lat: pos.coords.latitude, lng: pos.coords.longitude };
-                build(leaflet_1.default.latLng(pos.coords.latitude, pos.coords.longitude));
-            });
-        }
-        (_d = (_c = layer).openPopup) === null || _d === void 0 ? void 0 : _d.call(_c);
-    }, [navigateToShopId, userLocation]);
-    return react_1.default.createElement(react_2.Box, { w: "100%", h: height },
-        react_1.default.createElement("div", { ref: mapElRef, style: { width: "100%", height: "100%" } }));
-};
-exports.default = ShopMap;