@snacky/ui 0.10.0 → 0.12.0

package/dist/index.js

@@ -643,6 +643,7 @@ function TabRow({ tabs, selected, onSelect, className }) {
 var solid_exports = {};
 __export(solid_exports, {
   account: () => account2,
+  address: () => address2,
   angleSmallRight: () => angleSmallRight,
   balance: () => balance2,
   bell: () => bell2,
@@ -674,6 +675,9 @@ var account2 = icon2(20, [
   ["M10 10C12.7614 10 15 7.76142 15 5C15 2.23858 12.7614 0 10 0C7.23858 0 5 2.23858 5 5C5 7.76142 7.23858 10 10 10Z", "nonzero"],
   ["M10 11.6659C5.85977 11.6705 2.50461 15.0257 2.5 19.1659C2.5 19.6261 2.87309 19.9992 3.33332 19.9992H16.6666C17.1269 19.9992 17.5 19.6261 17.5 19.1659C17.4954 15.0257 14.1402 11.6705 10 11.6659Z", "nonzero"]
 ]);
+var address2 = icon2(16, [
+  ["M8.00001 0.0283203C6.23597 0.030261 4.54473 0.731837 3.2973 1.97914C2.04987 3.22644 1.34813 4.91762 1.34601 6.68165C1.34601 8.39499 2.67268 11.0763 5.28934 14.651C5.60085 15.0777 6.00871 15.4249 6.47974 15.6643C6.95077 15.9036 7.47166 16.0283 8.00001 16.0283C8.52836 16.0283 9.04924 15.9036 9.52027 15.6643C9.9913 15.4249 10.3992 15.0777 10.7107 14.651C13.3273 11.0763 14.654 8.39499 14.654 6.68165C14.6519 4.91762 13.9501 3.22644 12.7027 1.97914C11.4553 0.731837 9.76405 0.030261 8.00001 0.0283203V0.0283203ZM8.00001 9.33365C7.47259 9.33365 6.95702 9.17726 6.51849 8.88424C6.07996 8.59122 5.73816 8.17475 5.53633 7.68748C5.3345 7.20021 5.28169 6.66403 5.38458 6.14675C5.48747 5.62946 5.74145 5.15431 6.11439 4.78137C6.48733 4.40843 6.96248 4.15445 7.47977 4.05156C7.99705 3.94867 8.53323 4.00148 9.0205 4.20331C9.50777 4.40514 9.92424 4.74694 10.2173 5.18547C10.5103 5.624 10.6667 6.13957 10.6667 6.66699C10.6667 7.37423 10.3857 8.05251 9.88563 8.55261C9.38553 9.0527 8.70725 9.33365 8.00001 9.33365Z", "nonzero"]
+]);
 var angleSmallRight = icon2(24, [
   ["M15.75 9.525L11.164 4.939C10.8827 4.65774 10.5011 4.49978 10.1032 4.49988C9.70534 4.49997 9.32381 4.65811 9.04255 4.9395C8.76129 5.2209 8.60333 5.6025 8.60342 6.00036C8.60352 6.39822 8.76166 6.77974 9.04305 7.061L13.629 11.646C13.6756 11.6925 13.7125 11.7476 13.7378 11.8084C13.763 11.8691 13.7759 11.9342 13.7759 12C13.7759 12.0658 13.763 12.1309 13.7378 12.1916C13.7125 12.2524 13.6756 12.3076 13.629 12.354L9.04305 16.939C8.76166 17.2203 8.60352 17.6018 8.60342 17.9997C8.60333 18.3975 8.76129 18.7791 9.04255 19.0605C9.32381 19.3419 9.70534 19.5 10.1032 19.5001C10.5011 19.5002 10.8827 19.3423 11.164 19.061L15.75 14.475C16.4053 13.818 16.7732 12.9279 16.7732 12C16.7732 11.0721 16.4053 10.182 15.75 9.525Z", "nonzero"]
 ]);
@@ -776,43 +780,64 @@ function AlertBanner({ message, countdown, className }) {
   ] });
 }
 
+// src/components/PageIndicator/PageIndicator.tsx
+import { jsx as jsx21 } from "react/jsx-runtime";
+function PageIndicator({ count, activeIndex, ariaLabel, className }) {
+  return /* @__PURE__ */ jsx21(
+    "div",
+    {
+      className: cx("snacky-page-indicator", className),
+      role: "status",
+      "aria-label": ariaLabel ?? `Page ${activeIndex + 1} of ${count}`,
+      children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsx21(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: cx("snacky-page-indicator__dot", i === activeIndex && "snacky-page-indicator__dot--active")
+        },
+        i
+      ))
+    }
+  );
+}
+
 // src/components/Badge/Badge.tsx
-import { Fragment, jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
 function NotificationBadge({ count, max = 99, children, className }) {
-  if (count <= 0) return /* @__PURE__ */ jsx21(Fragment, { children });
+  if (count <= 0) return /* @__PURE__ */ jsx22(Fragment, { children });
   return /* @__PURE__ */ jsxs14("span", { className: cx("snacky-badge-wrap", className), children: [
     children,
-    /* @__PURE__ */ jsx21("span", { className: "snacky-badge-notification", children: count > max ? `${max}+` : count })
+    /* @__PURE__ */ jsx22("span", { className: "snacky-badge-notification", children: count > max ? `${max}+` : count })
   ] });
 }
 function DiscountTag({ label, className }) {
-  return /* @__PURE__ */ jsx21("span", { className: cx("snacky-discount-tag", className), children: label });
+  return /* @__PURE__ */ jsx22("span", { className: cx("snacky-discount-tag", className), children: label });
 }
 function SoldOutBadge({ className }) {
-  return /* @__PURE__ */ jsx21("span", { className: cx("snacky-soldout-badge", className), children: "Sold Out" });
+  return /* @__PURE__ */ jsx22("span", { className: cx("snacky-soldout-badge", className), children: "Sold Out" });
 }
 function InfoBadge({ label, icon: icon3, className }) {
   return /* @__PURE__ */ jsxs14("span", { className: cx("snacky-info-badge", className), children: [
-    icon3 && /* @__PURE__ */ jsx21("span", { className: "snacky-info-badge__icon", children: icon3 }),
+    icon3 && /* @__PURE__ */ jsx22("span", { className: "snacky-info-badge__icon", children: icon3 }),
     label
   ] });
 }
 var VariantBadge = InfoBadge;
 
 // src/components/Callout/Callout.tsx
-import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs15 } from "react/jsx-runtime";
 function Callout({ message, timestamp, variant, statusIcon, className }) {
   return /* @__PURE__ */ jsxs15("div", { className: cx("snacky-callout", `snacky-callout--${variant}`, className), children: [
-    /* @__PURE__ */ jsx22("p", { className: "snacky-callout__message", children: message }),
+    /* @__PURE__ */ jsx23("p", { className: "snacky-callout__message", children: message }),
     /* @__PURE__ */ jsxs15("span", { className: "snacky-callout__meta", children: [
       timestamp,
-      statusIcon && variant !== "received" && /* @__PURE__ */ jsx22("span", { className: "snacky-callout__meta-icon", children: statusIcon })
+      statusIcon && variant !== "received" && /* @__PURE__ */ jsx23("span", { className: "snacky-callout__meta-icon", children: statusIcon })
     ] })
   ] });
 }
 
 // src/components/List/List.tsx
-import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs16 } from "react/jsx-runtime";
 var STATUS_LABEL = {
   waiting: "Waiting for Payment",
   process: "Order Processing",
@@ -850,31 +875,31 @@ function OrderListItem({
       onKeyDown: onClick ? (e) => (e.key === "Enter" || e.key === " ") && onClick() : void 0,
       children: [
         /* @__PURE__ */ jsxs16("div", { className: "snacky-order-item__top", children: [
-          /* @__PURE__ */ jsx23("div", { className: "snacky-order-item__thumb-box", children: /* @__PURE__ */ jsx23("img", { className: "snacky-order-item__thumb", src: productImage, alt: "" }) }),
+          /* @__PURE__ */ jsx24("div", { className: "snacky-order-item__thumb-box", children: /* @__PURE__ */ jsx24("img", { className: "snacky-order-item__thumb", src: productImage, alt: "" }) }),
           /* @__PURE__ */ jsxs16("div", { className: "snacky-order-item__info", children: [
-            /* @__PURE__ */ jsx23(
+            /* @__PURE__ */ jsx24(
               "span",
               {
                 className: cx("snacky-order-item__status", status === "cancelled" && "snacky-order-item__status--cancelled"),
                 children: STATUS_LABEL[status]
               }
             ),
-            /* @__PURE__ */ jsx23("span", { className: "snacky-order-item__name", children: productName })
+            /* @__PURE__ */ jsx24("span", { className: "snacky-order-item__name", children: productName })
           ] })
         ] }),
         /* @__PURE__ */ jsxs16("div", { className: "snacky-order-item__details", children: [
-          /* @__PURE__ */ jsx23("span", { className: "snacky-order-item__count", children: itemsSummary }),
+          /* @__PURE__ */ jsx24("span", { className: "snacky-order-item__count", children: itemsSummary }),
           /* @__PURE__ */ jsxs16("span", { className: cx("snacky-order-item__total", isCod && "snacky-order-item__total--cod"), children: [
             "Order Total: ",
-            /* @__PURE__ */ jsx23("b", { children: total })
+            /* @__PURE__ */ jsx24("b", { children: total })
           ] }),
-          isCod && /* @__PURE__ */ jsx23("span", { className: "snacky-order-item__cod", children: "COD" })
+          isCod && /* @__PURE__ */ jsx24("span", { className: "snacky-order-item__cod", children: "COD" })
         ] }),
         status === "waiting" && paymentDeadline && /* @__PURE__ */ jsxs16("div", { className: "snacky-order-item__deadline", children: [
           "Pay before ",
           paymentDeadline
         ] }),
-        action && /* @__PURE__ */ jsx23("div", { className: "snacky-order-item__action-row", children: /* @__PURE__ */ jsx23(
+        action && /* @__PURE__ */ jsx24("div", { className: "snacky-order-item__action-row", children: /* @__PURE__ */ jsx24(
           Button,
           {
             variant: "primary",
@@ -899,8 +924,8 @@ function NotificationListItem({ title, message, unread = false, onClick, classNa
       onClick,
       onKeyDown: onClick ? (e) => (e.key === "Enter" || e.key === " ") && onClick() : void 0,
       children: [
-        /* @__PURE__ */ jsx23("span", { className: "snacky-notif-item__title", children: title }),
-        /* @__PURE__ */ jsx23("span", { className: "snacky-notif-item__message", children: message })
+        /* @__PURE__ */ jsx24("span", { className: "snacky-notif-item__title", children: title }),
+        /* @__PURE__ */ jsx24("span", { className: "snacky-notif-item__message", children: message })
       ]
     }
   );
@@ -908,7 +933,7 @@ function NotificationListItem({ title, message, unread = false, onClick, classNa
 
 // src/components/Accordion/Accordion.tsx
 import { useId as useId4, useState as useState2 } from "react";
-import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs17 } from "react/jsx-runtime";
 function Accordion({ title, leadingIcon, children, defaultOpen = false, className }) {
   const [open, setOpen] = useState2(defaultOpen);
   const panelId = useId4();
@@ -922,27 +947,27 @@ function Accordion({ title, leadingIcon, children, defaultOpen = false, classNam
         "aria-controls": panelId,
         onClick: () => setOpen((v) => !v),
         children: [
-          leadingIcon && /* @__PURE__ */ jsx24("span", { className: "snacky-accordion__icon", children: leadingIcon }),
-          /* @__PURE__ */ jsx24("span", { className: "snacky-accordion__title", children: title }),
-          /* @__PURE__ */ jsx24(
+          leadingIcon && /* @__PURE__ */ jsx25("span", { className: "snacky-accordion__icon", children: leadingIcon }),
+          /* @__PURE__ */ jsx25("span", { className: "snacky-accordion__title", children: title }),
+          /* @__PURE__ */ jsx25(
             "svg",
             {
               className: cx("snacky-accordion__chevron", open && "snacky-accordion__chevron--open"),
               viewBox: "0 0 20 20",
               fill: "none",
-              children: /* @__PURE__ */ jsx24("path", { d: "M5 7.5L10 12.5L15 7.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+              children: /* @__PURE__ */ jsx25("path", { d: "M5 7.5L10 12.5L15 7.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
             }
           )
         ]
       }
     ),
-    open && /* @__PURE__ */ jsx24("div", { id: panelId, className: "snacky-accordion__panel", children })
+    open && /* @__PURE__ */ jsx25("div", { id: panelId, className: "snacky-accordion__panel", children })
   ] });
 }
 
 // src/components/Modal/BottomSheet.tsx
 import { useEffect } from "react";
-import { jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs18 } from "react/jsx-runtime";
 function BottomSheet({ open, onDismiss, children, showHandle = false, className }) {
   useEffect(() => {
     if (!open) return;
@@ -953,7 +978,7 @@ function BottomSheet({ open, onDismiss, children, showHandle = false, className
     return () => window.removeEventListener("keydown", onKeyDown);
   }, [open, onDismiss]);
   if (!open) return null;
-  return /* @__PURE__ */ jsx25("div", { className: "snacky-sheet-overlay", onClick: onDismiss, children: /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsx26("div", { className: "snacky-sheet-overlay", onClick: onDismiss, children: /* @__PURE__ */ jsxs18(
     "div",
     {
       className: cx("snacky-sheet", className),
@@ -961,7 +986,7 @@ function BottomSheet({ open, onDismiss, children, showHandle = false, className
       "aria-modal": "true",
       onClick: (e) => e.stopPropagation(),
       children: [
-        showHandle && /* @__PURE__ */ jsx25("div", { className: "snacky-sheet__handle" }),
+        showHandle && /* @__PURE__ */ jsx26("div", { className: "snacky-sheet__handle" }),
         children
       ]
     }
@@ -969,29 +994,29 @@ function BottomSheet({ open, onDismiss, children, showHandle = false, className
 }
 
 // src/components/Section/Section.tsx
-import { jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs19 } from "react/jsx-runtime";
 function Section({ title, onAction, children, className }) {
   return /* @__PURE__ */ jsxs19("section", { className: cx("snacky-section", className), children: [
     /* @__PURE__ */ jsxs19("div", { className: "snacky-section__header", children: [
-      /* @__PURE__ */ jsx26("h3", { className: "snacky-section__title", children: title }),
-      onAction && /* @__PURE__ */ jsx26(IconButton, { size: "small", icon: /* @__PURE__ */ jsx26(angleSmallRight, {}), onClick: onAction, ariaLabel: `See more: ${title}` })
+      /* @__PURE__ */ jsx27("h3", { className: "snacky-section__title", children: title }),
+      onAction && /* @__PURE__ */ jsx27(IconButton, { size: "small", icon: /* @__PURE__ */ jsx27(angleSmallRight, {}), onClick: onAction, ariaLabel: `See more: ${title}` })
     ] }),
     children
   ] });
 }
 
 // src/components/Stepper/Stepper.tsx
-import { jsx as jsx27, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs20 } from "react/jsx-runtime";
 function Stepper({ steps, className }) {
-  return /* @__PURE__ */ jsx27("ol", { className: cx("snacky-stepper", className), children: steps.map((step, i) => /* @__PURE__ */ jsxs20(
+  return /* @__PURE__ */ jsx28("ol", { className: cx("snacky-stepper", className), children: steps.map((step, i) => /* @__PURE__ */ jsxs20(
     "li",
     {
       className: cx("snacky-stepper__step", i === steps.length - 1 && "snacky-stepper__step--last"),
       children: [
-        /* @__PURE__ */ jsx27("span", { className: cx("snacky-stepper__dot", `snacky-stepper__dot--${step.state}`), children: step.state === "cancelled" && /* @__PURE__ */ jsx27(close, { width: 12, height: 12 }) }),
+        /* @__PURE__ */ jsx28("span", { className: cx("snacky-stepper__dot", `snacky-stepper__dot--${step.state}`), children: step.state === "cancelled" && /* @__PURE__ */ jsx28(close, { width: 12, height: 12 }) }),
         /* @__PURE__ */ jsxs20("span", { className: "snacky-stepper__body", children: [
-          /* @__PURE__ */ jsx27("span", { className: cx("snacky-stepper__label", `snacky-stepper__label--${step.state}`), children: step.label }),
-          step.timestamp && /* @__PURE__ */ jsx27("span", { className: "snacky-stepper__time", children: step.timestamp })
+          /* @__PURE__ */ jsx28("span", { className: cx("snacky-stepper__label", `snacky-stepper__label--${step.state}`), children: step.label }),
+          step.timestamp && /* @__PURE__ */ jsx28("span", { className: "snacky-stepper__time", children: step.timestamp })
         ] })
       ]
     },
@@ -1000,7 +1025,7 @@ function Stepper({ steps, className }) {
 }
 
 // src/components/Calendar/Calendar.tsx
-import { jsx as jsx28, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs21 } from "react/jsx-runtime";
 var WEEKDAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
 var MONTHS = [
   "January",
@@ -1049,14 +1074,14 @@ function Calendar({
   const isInRange = (d) => lo && hi && d > lo && d < hi;
   return /* @__PURE__ */ jsxs21("div", { className: cx("snacky-calendar", className), children: [
     /* @__PURE__ */ jsxs21("div", { className: "snacky-calendar__header", children: [
-      /* @__PURE__ */ jsx28(
+      /* @__PURE__ */ jsx29(
         "button",
         {
           type: "button",
           className: "snacky-calendar__nav",
           onClick: onPrevMonth,
           "aria-label": "Previous month",
-          children: /* @__PURE__ */ jsx28(back, { width: 24, height: 24 })
+          children: /* @__PURE__ */ jsx29(back, { width: 24, height: 24 })
         }
       ),
       /* @__PURE__ */ jsxs21("span", { className: "snacky-calendar__label", children: [
@@ -1064,19 +1089,19 @@ function Calendar({
         " ",
         month.getFullYear()
       ] }),
-      /* @__PURE__ */ jsx28(
+      /* @__PURE__ */ jsx29(
         "button",
         {
           type: "button",
           className: "snacky-calendar__nav snacky-calendar__nav--next",
           onClick: onNextMonth,
           "aria-label": "Next month",
-          children: /* @__PURE__ */ jsx28(back, { width: 24, height: 24 })
+          children: /* @__PURE__ */ jsx29(back, { width: 24, height: 24 })
         }
       )
     ] }),
     /* @__PURE__ */ jsxs21("div", { className: "snacky-calendar__grid", children: [
-      WEEKDAYS.map((d) => /* @__PURE__ */ jsx28("span", { className: "snacky-calendar__weekday", children: d }, d)),
+      WEEKDAYS.map((d) => /* @__PURE__ */ jsx29("span", { className: "snacky-calendar__weekday", children: d }, d)),
       days.map((d, i) => {
         const outside = d.getMonth() !== month.getMonth();
         return /* @__PURE__ */ jsxs21(
@@ -1093,26 +1118,26 @@ function Calendar({
             disabled: outside,
             "aria-current": isEnd(d) ? "date" : void 0,
             children: [
-              /* @__PURE__ */ jsx28("span", { className: "snacky-calendar__day-number", children: d.getDate() }),
-              marked.some((m) => sameDay(m, d)) && /* @__PURE__ */ jsx28("span", { className: "snacky-calendar__marker" })
+              /* @__PURE__ */ jsx29("span", { className: "snacky-calendar__day-number", children: d.getDate() }),
+              marked.some((m) => sameDay(m, d)) && /* @__PURE__ */ jsx29("span", { className: "snacky-calendar__marker" })
             ]
           },
           i
         );
       })
     ] }),
-    onAction && /* @__PURE__ */ jsx28(Button, { onClick: onAction, style: { width: "100%" }, children: actionLabel })
+    onAction && /* @__PURE__ */ jsx29(Button, { onClick: onAction, style: { width: "100%" }, children: actionLabel })
   ] });
 }
 
 // src/components/Avatar/Avatar.tsx
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 function Avatar({ src, alt, size = "md", className }) {
-  return /* @__PURE__ */ jsx29("img", { src, alt, className: cx("snacky-avatar", `snacky-avatar--${size}`, className) });
+  return /* @__PURE__ */ jsx30("img", { src, alt, className: cx("snacky-avatar", `snacky-avatar--${size}`, className) });
 }
 
 // src/components/Illustration/Illustration.tsx
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var SIZE = {
   empty: { width: 268, height: 200 },
   createAccount: { width: 360, height: 240 },
@@ -1122,47 +1147,47 @@ var SIZE = {
 };
 function Illustration({ variant, src, alt, className }) {
   const { width, height } = SIZE[variant];
-  return /* @__PURE__ */ jsx30("img", { src, alt, width, height, className: cx("snacky-illustration", className) });
+  return /* @__PURE__ */ jsx31("img", { src, alt, width, height, className: cx("snacky-illustration", className) });
 }
 
 // src/components/ProductImage/ProductImage.tsx
-import { jsx as jsx31, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs22 } from "react/jsx-runtime";
 function ProductImage({ src, alt, usage, sold = false, className }) {
   return /* @__PURE__ */ jsxs22("span", { className: cx("snacky-product-image-wrap", `snacky-product-image-wrap--${usage}`, className), children: [
-    /* @__PURE__ */ jsx31("img", { src, alt, className: cx("snacky-product-image", `snacky-product-image--${usage}`) }),
-    sold && /* @__PURE__ */ jsx31("span", { className: "snacky-product-image-sold-overlay", children: /* @__PURE__ */ jsx31("span", { className: "snacky-product-image-sold-label", children: "Sold Out" }) })
+    /* @__PURE__ */ jsx32("img", { src, alt, className: cx("snacky-product-image", `snacky-product-image--${usage}`) }),
+    sold && /* @__PURE__ */ jsx32("span", { className: "snacky-product-image-sold-overlay", children: /* @__PURE__ */ jsx32("span", { className: "snacky-product-image-sold-label", children: "Sold Out" }) })
   ] });
 }
 
 // src/components/ProductCard/ProductCard.tsx
-import { jsx as jsx32, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs23 } from "react/jsx-runtime";
 function ProductCard(props) {
   if (props.variant === "details") {
     const { productName: productName2, imageUrl: imageUrl2, price: price2, rating: rating2, originalPrice: originalPrice2, discountLabel: discountLabel2, ratingCount, favorited, onFavoriteClick, onShareClick, onChatClick, sold, ratingIcon: ratingIcon2, favoriteIcon, shareIcon, chatIcon, onClick: onClick2, className: className2 } = props;
     return /* @__PURE__ */ jsxs23("div", { className: cx("snacky-product-card", "snacky-product-card--details", className2), children: [
-      /* @__PURE__ */ jsx32("div", { className: "snacky-product-card__image-block", children: /* @__PURE__ */ jsxs23("div", { className: "snacky-product-card__image-wrap", onClick: onClick2, children: [
-        /* @__PURE__ */ jsx32("img", { className: "snacky-product-card__image", src: imageUrl2, alt: productName2 }),
-        sold && /* @__PURE__ */ jsx32("span", { className: "snacky-product-card__sold-overlay", children: /* @__PURE__ */ jsx32(SoldOutBadge, {}) })
+      /* @__PURE__ */ jsx33("div", { className: "snacky-product-card__image-block", children: /* @__PURE__ */ jsxs23("div", { className: "snacky-product-card__image-wrap", onClick: onClick2, children: [
+        /* @__PURE__ */ jsx33("img", { className: "snacky-product-card__image", src: imageUrl2, alt: productName2 }),
+        sold && /* @__PURE__ */ jsx33("span", { className: "snacky-product-card__sold-overlay", children: /* @__PURE__ */ jsx33(SoldOutBadge, {}) })
       ] }) }),
       /* @__PURE__ */ jsxs23("div", { className: "snacky-product-card__details-body", children: [
-        /* @__PURE__ */ jsx32("p", { className: "snacky-product-card__name", children: productName2 }),
+        /* @__PURE__ */ jsx33("p", { className: "snacky-product-card__name", children: productName2 }),
         /* @__PURE__ */ jsxs23("div", { className: "snacky-product-card__price-row", children: [
-          /* @__PURE__ */ jsx32("span", { className: "snacky-product-card__price", children: price2 }),
-          originalPrice2 && /* @__PURE__ */ jsx32("span", { className: "snacky-product-card__original-price", children: originalPrice2 }),
-          discountLabel2 && /* @__PURE__ */ jsx32(DiscountTag, { label: discountLabel2 })
+          /* @__PURE__ */ jsx33("span", { className: "snacky-product-card__price", children: price2 }),
+          originalPrice2 && /* @__PURE__ */ jsx33("span", { className: "snacky-product-card__original-price", children: originalPrice2 }),
+          discountLabel2 && /* @__PURE__ */ jsx33(DiscountTag, { label: discountLabel2 })
         ] }),
         /* @__PURE__ */ jsxs23("div", { className: "snacky-product-card__footer-row", children: [
           /* @__PURE__ */ jsxs23("span", { className: "snacky-product-card__rating", children: [
-            /* @__PURE__ */ jsx32("span", { className: "snacky-product-card__rating-icon", children: ratingIcon2 ?? /* @__PURE__ */ jsx32(star, { width: 16, height: 16 }) }),
+            /* @__PURE__ */ jsx33("span", { className: "snacky-product-card__rating-icon", children: ratingIcon2 ?? /* @__PURE__ */ jsx33(star, { width: 16, height: 16 }) }),
             rating2,
             " (",
             ratingCount,
             ")"
           ] }),
           /* @__PURE__ */ jsxs23("div", { className: "snacky-product-card__actions snacky-product-card__actions--details", children: [
-            /* @__PURE__ */ jsx32(IconButton, { variant: "secondary", icon: favoriteIcon ?? (favorited ? /* @__PURE__ */ jsx32(heart2, { width: 20, height: 20 }) : /* @__PURE__ */ jsx32(heart, { width: 20, height: 20 })), selected: favorited, onClick: onFavoriteClick, ariaLabel: "Favorite" }),
-            /* @__PURE__ */ jsx32(IconButton, { variant: "secondary", icon: shareIcon ?? /* @__PURE__ */ jsx32(share, { width: 20, height: 20 }), onClick: onShareClick, ariaLabel: "Share" }),
-            /* @__PURE__ */ jsx32(IconButton, { variant: "secondary", icon: chatIcon ?? /* @__PURE__ */ jsx32(chat, { width: 20, height: 20 }), onClick: onChatClick, ariaLabel: "Chat with seller" })
+            /* @__PURE__ */ jsx33(IconButton, { variant: "secondary", icon: favoriteIcon ?? (favorited ? /* @__PURE__ */ jsx33(heart2, { width: 20, height: 20 }) : /* @__PURE__ */ jsx33(heart, { width: 20, height: 20 })), selected: favorited, onClick: onFavoriteClick, ariaLabel: "Favorite" }),
+            /* @__PURE__ */ jsx33(IconButton, { variant: "secondary", icon: shareIcon ?? /* @__PURE__ */ jsx33(share, { width: 20, height: 20 }), onClick: onShareClick, ariaLabel: "Share" }),
+            /* @__PURE__ */ jsx33(IconButton, { variant: "secondary", icon: chatIcon ?? /* @__PURE__ */ jsx33(chat, { width: 20, height: 20 }), onClick: onChatClick, ariaLabel: "Chat with seller" })
           ] })
         ] })
       ] })
@@ -1179,24 +1204,24 @@ function ProductCard(props) {
       onKeyDown: (e) => (e.key === "Enter" || e.key === " ") && onClick?.(),
       children: [
         /* @__PURE__ */ jsxs23("div", { className: "snacky-product-card__image-wrap", children: [
-          /* @__PURE__ */ jsx32("img", { className: "snacky-product-card__image", src: imageUrl, alt: productName }),
-          discountLabel && /* @__PURE__ */ jsx32("span", { className: "snacky-product-card__discount", children: /* @__PURE__ */ jsx32(DiscountTag, { label: discountLabel }) })
+          /* @__PURE__ */ jsx33("img", { className: "snacky-product-card__image", src: imageUrl, alt: productName }),
+          discountLabel && /* @__PURE__ */ jsx33("span", { className: "snacky-product-card__discount", children: /* @__PURE__ */ jsx33(DiscountTag, { label: discountLabel }) })
         ] }),
-        /* @__PURE__ */ jsx32("p", { className: "snacky-product-card__name", children: productName }),
+        /* @__PURE__ */ jsx33("p", { className: "snacky-product-card__name", children: productName }),
         /* @__PURE__ */ jsxs23("div", { className: "snacky-product-card__price-row", children: [
-          /* @__PURE__ */ jsx32("span", { className: "snacky-product-card__price", children: price }),
-          originalPrice && /* @__PURE__ */ jsx32("span", { className: "snacky-product-card__original-price", children: originalPrice })
+          /* @__PURE__ */ jsx33("span", { className: "snacky-product-card__price", children: price }),
+          originalPrice && /* @__PURE__ */ jsx33("span", { className: "snacky-product-card__original-price", children: originalPrice })
         ] }),
         /* @__PURE__ */ jsxs23("div", { className: "snacky-product-card__footer-row", children: [
           /* @__PURE__ */ jsxs23("span", { className: "snacky-product-card__rating", children: [
-            /* @__PURE__ */ jsx32("span", { className: "snacky-product-card__rating-icon", children: ratingIcon ?? /* @__PURE__ */ jsx32(star, { width: 16, height: 16 }) }),
+            /* @__PURE__ */ jsx33("span", { className: "snacky-product-card__rating-icon", children: ratingIcon ?? /* @__PURE__ */ jsx33(star, { width: 16, height: 16 }) }),
             rating
           ] }),
-          /* @__PURE__ */ jsx32(
+          /* @__PURE__ */ jsx33(
             IconButton,
             {
               variant: "primary",
-              icon: cartIcon ?? /* @__PURE__ */ jsx32(cartAdd, { width: 16, height: 16 }),
+              icon: cartIcon ?? /* @__PURE__ */ jsx33(cartAdd, { width: 16, height: 16 }),
               onClick: (e) => {
                 e.stopPropagation();
                 onAddToCart();
@@ -1211,10 +1236,10 @@ function ProductCard(props) {
 }
 
 // src/components/ImagePlaceholder/ImagePlaceholder.tsx
-import { jsx as jsx33, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs24 } from "react/jsx-runtime";
 function ImagePlaceholder({ width, height, className }) {
   const iconSize = Math.round(Math.min(width, height) * 0.32);
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx34(
     "div",
     {
       className: cx("snacky-image-placeholder", className),
@@ -1233,9 +1258,9 @@ function ImagePlaceholder({ width, height, className }) {
           strokeLinecap: "round",
           strokeLinejoin: "round",
           children: [
-            /* @__PURE__ */ jsx33("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
-            /* @__PURE__ */ jsx33("circle", { cx: "8.5", cy: "8.5", r: "1.5", fill: "currentColor", stroke: "none" }),
-            /* @__PURE__ */ jsx33("polyline", { points: "21 15 16 10 5 21" })
+            /* @__PURE__ */ jsx34("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
+            /* @__PURE__ */ jsx34("circle", { cx: "8.5", cy: "8.5", r: "1.5", fill: "currentColor", stroke: "none" }),
+            /* @__PURE__ */ jsx34("polyline", { points: "21 15 16 10 5 21" })
           ]
         }
       )
@@ -1268,6 +1293,7 @@ export {
   NotificationListItem,
   OrderListItem,
   OtpField,
+  PageIndicator,
   PointBalanceBanner,
   ProductCard,
   ProductChip,