@snacky/ui 0.9.1 → 0.11.0

package/dist/index.js

@@ -92,141 +92,6 @@ var IconButton = forwardRef2(function IconButton2({ variant = "primary", size =
 
 // src/components/IconButton/UploadButton.tsx
 import { forwardRef as forwardRef3 } from "react";
-import { jsx as jsx3 } from "react/jsx-runtime";
-var UploadButton = forwardRef3(function UploadButton2({ icon: icon3, ariaLabel = "Upload image", className, ...rest }, ref) {
-  return /* @__PURE__ */ jsx3("button", { ref, type: "button", "aria-label": ariaLabel, className: cx("snacky-upload", className), ...rest, children: icon3 });
-});
-
-// src/components/Input/TextField.tsx
-import { forwardRef as forwardRef4, useId } from "react";
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
-var TextField = forwardRef4(function TextField2({
-  value,
-  onChange,
-  label,
-  leadingIcon,
-  trailingIcon,
-  trailingIconRotated = false,
-  error,
-  disabled,
-  className,
-  id,
-  ...rest
-}, ref) {
-  const autoId = useId();
-  const fieldId = id ?? autoId;
-  const errorMessage = typeof error === "string" ? error : void 0;
-  return /* @__PURE__ */ jsxs2("div", { className, children: [
-    label && /* @__PURE__ */ jsx4("label", { className: "snacky-field-label", htmlFor: fieldId, children: label }),
-    /* @__PURE__ */ jsxs2(
-      "div",
-      {
-        className: cx("snacky-field", !!error && "snacky-field--error", disabled && "snacky-field--disabled"),
-        children: [
-          leadingIcon && /* @__PURE__ */ jsx4("span", { className: "snacky-field__icon", children: leadingIcon }),
-          /* @__PURE__ */ jsx4(
-            "input",
-            {
-              ref,
-              id: fieldId,
-              className: "snacky-field__input",
-              value,
-              onChange: (e) => onChange(e.target.value),
-              disabled,
-              ...rest
-            }
-          ),
-          trailingIcon && /* @__PURE__ */ jsx4(
-            "span",
-            {
-              className: "snacky-field__icon",
-              style: trailingIconRotated ? { transform: "rotate(180deg)" } : void 0,
-              children: trailingIcon
-            }
-          )
-        ]
-      }
-    ),
-    errorMessage && /* @__PURE__ */ jsx4("span", { className: "snacky-field-error", children: errorMessage })
-  ] });
-});
-
-// src/components/Input/SearchField.tsx
-import { forwardRef as forwardRef5 } from "react";
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
-var SearchField = forwardRef5(function SearchField2({ value, onChange, searchIcon, onClear, className, placeholder = "Search products...", ...rest }, ref) {
-  return /* @__PURE__ */ jsxs3("div", { className: cx("snacky-search", className), children: [
-    searchIcon && /* @__PURE__ */ jsx5("span", { className: "snacky-search__icon", children: searchIcon }),
-    /* @__PURE__ */ jsx5(
-      "input",
-      {
-        ref,
-        className: "snacky-search__input",
-        value,
-        placeholder,
-        onChange: (e) => onChange(e.target.value),
-        ...rest
-      }
-    ),
-    value && onClear && /* @__PURE__ */ jsx5("button", { type: "button", className: "snacky-search__clear", onClick: onClear, "aria-label": "Clear search", children: "\u2715" })
-  ] });
-});
-
-// src/components/Input/OtpField.tsx
-import { useRef } from "react";
-import { jsx as jsx6 } from "react/jsx-runtime";
-function OtpField({ value, onChange, length = 6, disabled }) {
-  const cellRefs = useRef([]);
-  const digits = Array.from({ length }, (_, i) => value[i] ?? "");
-  function setDigit(index, digit) {
-    const next = digits.slice();
-    next[index] = digit;
-    onChange(next.join(""));
-    if (digit && index < length - 1) cellRefs.current[index + 1]?.focus();
-  }
-  function handleKeyDown(index, e) {
-    if (e.key === "Backspace" && !digits[index] && index > 0) {
-      cellRefs.current[index - 1]?.focus();
-    }
-  }
-  return /* @__PURE__ */ jsx6("div", { className: "snacky-otp", children: digits.map((digit, i) => /* @__PURE__ */ jsx6(
-    "input",
-    {
-      ref: (el) => {
-        cellRefs.current[i] = el;
-      },
-      className: "snacky-otp__cell",
-      inputMode: "numeric",
-      maxLength: 1,
-      value: digit,
-      disabled,
-      onChange: (e) => setDigit(i, e.target.value.replace(/\D/g, "").slice(-1)),
-      onKeyDown: (e) => handleKeyDown(i, e),
-      "aria-label": `Digit ${i + 1}`
-    },
-    i
-  )) });
-}
-
-// src/components/Input/CopyField.tsx
-import { useState } from "react";
-import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
-function CopyField({ value, onCopy, className }) {
-  const [copied, setCopied] = useState(false);
-  async function handleCopy() {
-    try {
-      await navigator.clipboard.writeText(value);
-    } catch {
-    }
-    onCopy?.(value);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2e3);
-  }
-  return /* @__PURE__ */ jsxs4("div", { className: cx("snacky-copy", className), children: [
-    /* @__PURE__ */ jsx7("span", { className: "snacky-copy__value", children: value }),
-    /* @__PURE__ */ jsx7("button", { type: "button", className: cx("snacky-copy__action", copied && "snacky-copy__action--copied"), onClick: handleCopy, children: copied ? "Copied" : "Copy" })
-  ] });
-}
 
 // src/icons/outline.tsx
 var outline_exports = {};
@@ -274,10 +139,10 @@ __export(outline_exports, {
   truck: () => truck,
   unsent: () => unsent
 });
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 function icon(viewBox, paths) {
   return function SnackyIcon({ width = viewBox, height = viewBox, color = "currentColor", ...rest }) {
-    return /* @__PURE__ */ jsx8("svg", { width, height, viewBox: `0 0 ${viewBox} ${viewBox}`, fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest, children: paths.map(([d, fillRule], i) => /* @__PURE__ */ jsx8(
+    return /* @__PURE__ */ jsx3("svg", { width, height, viewBox: `0 0 ${viewBox} ${viewBox}`, fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest, children: paths.map(([d, fillRule], i) => /* @__PURE__ */ jsx3(
       "path",
       {
         d,
@@ -451,6 +316,143 @@ var unsent = icon(24, [
   ["M11.9999 7C11.7788 7 11.5669 7.0878 11.4106 7.24408C11.2543 7.40036 11.1665 7.61232 11.1665 7.83333V11.4375L8.35735 13.1975C8.16949 13.3148 8.03594 13.502 7.98609 13.7179C7.93624 13.9337 7.97416 14.1605 8.09152 14.3483C8.20888 14.5362 8.39606 14.6697 8.61188 14.7196C8.8277 14.7694 9.05449 14.7315 9.24235 14.6142L12.4424 12.6142C12.5633 12.5384 12.6627 12.4329 12.7311 12.3077C12.7996 12.1825 12.8347 12.0418 12.8332 11.8992V7.83333C12.8332 7.61232 12.7454 7.40036 12.5891 7.24408C12.4328 7.0878 12.2209 7 11.9999 7Z", "nonzero"]
 ]);
 
+// src/components/IconButton/UploadButton.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var UploadButton = forwardRef3(function UploadButton2({ icon: icon3 = /* @__PURE__ */ jsx4(camera, {}), ariaLabel = "Upload image", className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx4("button", { ref, type: "button", "aria-label": ariaLabel, className: cx("snacky-upload", className), ...rest, children: icon3 });
+});
+
+// src/components/Input/TextField.tsx
+import { forwardRef as forwardRef4, useId } from "react";
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+var TextField = forwardRef4(function TextField2({
+  value,
+  onChange,
+  label,
+  leadingIcon,
+  trailingIcon,
+  trailingIconRotated = false,
+  error,
+  disabled,
+  className,
+  id,
+  ...rest
+}, ref) {
+  const autoId = useId();
+  const fieldId = id ?? autoId;
+  const errorMessage = typeof error === "string" ? error : void 0;
+  return /* @__PURE__ */ jsxs2("div", { className, children: [
+    label && /* @__PURE__ */ jsx5("label", { className: "snacky-field-label", htmlFor: fieldId, children: label }),
+    /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        className: cx("snacky-field", !!error && "snacky-field--error", disabled && "snacky-field--disabled"),
+        children: [
+          leadingIcon && /* @__PURE__ */ jsx5("span", { className: "snacky-field__icon", children: leadingIcon }),
+          /* @__PURE__ */ jsx5(
+            "input",
+            {
+              ref,
+              id: fieldId,
+              className: "snacky-field__input",
+              value,
+              onChange: (e) => onChange(e.target.value),
+              disabled,
+              ...rest
+            }
+          ),
+          trailingIcon && /* @__PURE__ */ jsx5(
+            "span",
+            {
+              className: "snacky-field__icon",
+              style: trailingIconRotated ? { transform: "rotate(180deg)" } : void 0,
+              children: trailingIcon
+            }
+          )
+        ]
+      }
+    ),
+    errorMessage && /* @__PURE__ */ jsx5("span", { className: "snacky-field-error", children: errorMessage })
+  ] });
+});
+
+// src/components/Input/SearchField.tsx
+import { forwardRef as forwardRef5 } from "react";
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+var SearchField = forwardRef5(function SearchField2({ value, onChange, searchIcon, onClear, className, placeholder = "Search products...", ...rest }, ref) {
+  return /* @__PURE__ */ jsxs3("div", { className: cx("snacky-search", className), children: [
+    searchIcon && /* @__PURE__ */ jsx6("span", { className: "snacky-search__icon", children: searchIcon }),
+    /* @__PURE__ */ jsx6(
+      "input",
+      {
+        ref,
+        className: "snacky-search__input",
+        value,
+        placeholder,
+        onChange: (e) => onChange(e.target.value),
+        ...rest
+      }
+    ),
+    value && onClear && /* @__PURE__ */ jsx6("button", { type: "button", className: "snacky-search__clear", onClick: onClear, "aria-label": "Clear search", children: "\u2715" })
+  ] });
+});
+
+// src/components/Input/OtpField.tsx
+import { useRef } from "react";
+import { jsx as jsx7 } from "react/jsx-runtime";
+function OtpField({ value, onChange, length = 6, disabled }) {
+  const cellRefs = useRef([]);
+  const digits = Array.from({ length }, (_, i) => value[i] ?? "");
+  function setDigit(index, digit) {
+    const next = digits.slice();
+    next[index] = digit;
+    onChange(next.join(""));
+    if (digit && index < length - 1) cellRefs.current[index + 1]?.focus();
+  }
+  function handleKeyDown(index, e) {
+    if (e.key === "Backspace" && !digits[index] && index > 0) {
+      cellRefs.current[index - 1]?.focus();
+    }
+  }
+  return /* @__PURE__ */ jsx7("div", { className: "snacky-otp", children: digits.map((digit, i) => /* @__PURE__ */ jsx7(
+    "input",
+    {
+      ref: (el) => {
+        cellRefs.current[i] = el;
+      },
+      className: "snacky-otp__cell",
+      inputMode: "numeric",
+      maxLength: 1,
+      value: digit,
+      disabled,
+      onChange: (e) => setDigit(i, e.target.value.replace(/\D/g, "").slice(-1)),
+      onKeyDown: (e) => handleKeyDown(i, e),
+      "aria-label": `Digit ${i + 1}`
+    },
+    i
+  )) });
+}
+
+// src/components/Input/CopyField.tsx
+import { useState } from "react";
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+function CopyField({ value, onCopy, className }) {
+  const [copied, setCopied] = useState(false);
+  async function handleCopy() {
+    try {
+      await navigator.clipboard.writeText(value);
+    } catch {
+    }
+    onCopy?.(value);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2e3);
+  }
+  return /* @__PURE__ */ jsxs4("div", { className: cx("snacky-copy", className), children: [
+    /* @__PURE__ */ jsx8("span", { className: "snacky-copy__value", children: value }),
+    /* @__PURE__ */ jsx8("button", { type: "button", className: cx("snacky-copy__action", copied && "snacky-copy__action--copied"), onClick: handleCopy, children: copied ? "Copied" : "Copy" })
+  ] });
+}
+
 // src/components/Input/ChatInput.tsx
 import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 function ChatInput({ value, onChange, onSend, sendIcon, className, placeholder = "Write your message here", ...rest }) {
@@ -641,6 +643,7 @@ function TabRow({ tabs, selected, onSelect, className }) {
 var solid_exports = {};
 __export(solid_exports, {
   account: () => account2,
+  angleSmallRight: () => angleSmallRight,
   balance: () => balance2,
   bell: () => bell2,
   cart: () => cart2,
@@ -671,6 +674,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 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"]
+]);
 var balance2 = icon2(24, [
   ["M19 4.00031H5C3.67441 4.00189 2.40356 4.52919 1.46622 5.46653C0.528882 6.40386 0.00158786 7.67471 0 9.00031L0 15.0003C0.00158786 16.3259 0.528882 17.5967 1.46622 18.5341C2.40356 19.4714 3.67441 19.9987 5 20.0003H19C20.3256 19.9987 21.5964 19.4714 22.5338 18.5341C23.4711 17.5967 23.9984 16.3259 24 15.0003V9.00031C23.9984 7.67471 23.4711 6.40386 22.5338 5.46653C21.5964 4.52919 20.3256 4.00189 19 4.00031ZM4 17.0003C3.80222 17.0003 3.60888 16.9417 3.44443 16.8318C3.27998 16.7219 3.15181 16.5657 3.07612 16.383C3.00043 16.2003 2.98063 15.9992 3.01921 15.8052C3.0578 15.6112 3.15304 15.4331 3.29289 15.2932C3.43275 15.1533 3.61093 15.0581 3.80491 15.0195C3.99889 14.9809 4.19996 15.0007 4.38268 15.0764C4.56541 15.1521 4.72159 15.2803 4.83147 15.4447C4.94135 15.6092 5 15.8025 5 16.0003C5 16.2655 4.89464 16.5199 4.70711 16.7074C4.51957 16.8949 4.26522 17.0003 4 17.0003ZM4 9.00031C3.80222 9.00031 3.60888 8.94166 3.44443 8.83177C3.27998 8.72189 3.15181 8.56571 3.07612 8.38299C3.00043 8.20026 2.98063 7.9992 3.01921 7.80521C3.0578 7.61123 3.15304 7.43305 3.29289 7.2932C3.43275 7.15335 3.61093 7.0581 3.80491 7.01952C3.99889 6.98093 4.19996 7.00074 4.38268 7.07643C4.56541 7.15211 4.72159 7.28029 4.83147 7.44474C4.94135 7.60918 5 7.80252 5 8.00031C5 8.26552 4.89464 8.51988 4.70711 8.70741C4.51957 8.89495 4.26522 9.00031 4 9.00031ZM12 16.0003C11.2089 16.0003 10.4355 15.7657 9.77772 15.3262C9.11992 14.8867 8.60723 14.2619 8.30448 13.531C8.00173 12.8001 7.92252 11.9959 8.07686 11.2199C8.2312 10.444 8.61216 9.73129 9.17157 9.17188C9.73098 8.61247 10.4437 8.2315 11.2196 8.07716C11.9956 7.92282 12.7998 8.00204 13.5307 8.30479C14.2616 8.60754 14.8864 9.12023 15.3259 9.77802C15.7654 10.4358 16 11.2092 16 12.0003C16 13.0612 15.5786 14.0786 14.8284 14.8287C14.0783 15.5789 13.0609 16.0003 12 16.0003ZM20 17.0003C19.8022 17.0003 19.6089 16.9417 19.4444 16.8318C19.28 16.7219 19.1518 16.5657 19.0761 16.383C19.0004 16.2003 18.9806 15.9992 19.0192 15.8052C19.0578 15.6112 19.153 15.4331 19.2929 15.2932C19.4327 15.1533 19.6109 15.0581 19.8049 15.0195C19.9989 14.9809 20.2 15.0007 20.3827 15.0764C20.5654 15.1521 20.7216 15.2803 20.8315 15.4447C20.9414 15.6092 21 15.8025 21 16.0003C21 16.2655 20.8946 16.5199 20.7071 16.7074C20.5196 16.8949 20.2652 17.0003 20 17.0003ZM20 9.00031C19.8022 9.00031 19.6089 8.94166 19.4444 8.83177C19.28 8.72189 19.1518 8.56571 19.0761 8.38299C19.0004 8.20026 18.9806 7.9992 19.0192 7.80521C19.0578 7.61123 19.153 7.43305 19.2929 7.2932C19.4327 7.15335 19.6109 7.0581 19.8049 7.01952C19.9989 6.98093 20.2 7.00074 20.3827 7.07643C20.5654 7.15211 20.7216 7.28029 20.8315 7.44474C20.9414 7.60918 21 7.80252 21 8.00031C21 8.26552 20.8946 8.51988 20.7071 8.70741C20.5196 8.89495 20.2652 9.00031 20 9.00031ZM14 12.0003C14 12.3959 13.8827 12.7825 13.6629 13.1114C13.4432 13.4403 13.1308 13.6967 12.7654 13.8481C12.3999 13.9994 11.9978 14.039 11.6098 13.9619C11.2219 13.8847 10.8655 13.6942 10.5858 13.4145C10.3061 13.1348 10.1156 12.7784 10.0384 12.3905C9.96126 12.0025 10.0009 11.6004 10.1522 11.2349C10.3036 10.8695 10.56 10.5571 10.8889 10.3374C11.2178 10.1176 11.6044 10.0003 12 10.0003C12.5304 10.0003 13.0391 10.211 13.4142 10.5861C13.7893 10.9612 14 11.4699 14 12.0003Z", "nonzero"]
 ]);
@@ -770,43 +776,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",
@@ -844,31 +871,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",
@@ -893,8 +920,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 })
       ]
     }
   );
@@ -902,7 +929,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();
@@ -916,27 +943,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;
@@ -947,7 +974,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),
@@ -955,7 +982,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
       ]
     }
@@ -963,29 +990,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("button", { type: "button", className: "snacky-section__action", onClick: onAction, "aria-label": `See more: ${title}`, children: /* @__PURE__ */ jsx26("svg", { viewBox: "0 0 16 16", fill: "none", width: "16", height: "16", children: /* @__PURE__ */ jsx26("path", { d: "M6 3.5L10.5 8L6 12.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) })
+      /* @__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 })
         ] })
       ]
     },
@@ -994,7 +1021,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",
@@ -1043,14 +1070,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: [
@@ -1058,19 +1085,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(
@@ -1087,26 +1114,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 },
@@ -1116,47 +1143,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" })
           ] })
         ] })
       ] })
@@ -1173,24 +1200,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();
@@ -1205,10 +1232,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),
@@ -1227,9 +1254,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" })
           ]
         }
       )
@@ -1262,6 +1289,7 @@ export {
   NotificationListItem,
   OrderListItem,
   OtpField,
+  PageIndicator,
   PointBalanceBanner,
   ProductCard,
   ProductChip,