@snacky/ui 0.9.1 → 0.11.0

package/dist/index.cjs

@@ -45,6 +45,7 @@ __export(index_exports, {
   NotificationListItem: () => NotificationListItem,
   OrderListItem: () => OrderListItem,
   OtpField: () => OtpField,
+  PageIndicator: () => PageIndicator,
   PointBalanceBanner: () => PointBalanceBanner,
   ProductCard: () => ProductCard,
   ProductChip: () => ProductChip,
@@ -153,141 +154,6 @@ var IconButton = (0, import_react2.forwardRef)(function IconButton2({ variant =
 
 // src/components/IconButton/UploadButton.tsx
 var import_react3 = require("react");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var UploadButton = (0, import_react3.forwardRef)(function UploadButton2({ icon: icon3, ariaLabel = "Upload image", className, ...rest }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { ref, type: "button", "aria-label": ariaLabel, className: cx("snacky-upload", className), ...rest, children: icon3 });
-});
-
-// src/components/Input/TextField.tsx
-var import_react4 = require("react");
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var TextField = (0, import_react4.forwardRef)(function TextField2({
-  value,
-  onChange,
-  label,
-  leadingIcon,
-  trailingIcon,
-  trailingIconRotated = false,
-  error,
-  disabled,
-  className,
-  id,
-  ...rest
-}, ref) {
-  const autoId = (0, import_react4.useId)();
-  const fieldId = id ?? autoId;
-  const errorMessage = typeof error === "string" ? error : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className, children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("label", { className: "snacky-field-label", htmlFor: fieldId, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-      "div",
-      {
-        className: cx("snacky-field", !!error && "snacky-field--error", disabled && "snacky-field--disabled"),
-        children: [
-          leadingIcon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "snacky-field__icon", children: leadingIcon }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-            "input",
-            {
-              ref,
-              id: fieldId,
-              className: "snacky-field__input",
-              value,
-              onChange: (e) => onChange(e.target.value),
-              disabled,
-              ...rest
-            }
-          ),
-          trailingIcon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-            "span",
-            {
-              className: "snacky-field__icon",
-              style: trailingIconRotated ? { transform: "rotate(180deg)" } : void 0,
-              children: trailingIcon
-            }
-          )
-        ]
-      }
-    ),
-    errorMessage && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "snacky-field-error", children: errorMessage })
-  ] });
-});
-
-// src/components/Input/SearchField.tsx
-var import_react5 = require("react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var SearchField = (0, import_react5.forwardRef)(function SearchField2({ value, onChange, searchIcon, onClear, className, placeholder = "Search products...", ...rest }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: cx("snacky-search", className), children: [
-    searchIcon && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "snacky-search__icon", children: searchIcon }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      "input",
-      {
-        ref,
-        className: "snacky-search__input",
-        value,
-        placeholder,
-        onChange: (e) => onChange(e.target.value),
-        ...rest
-      }
-    ),
-    value && onClear && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", className: "snacky-search__clear", onClick: onClear, "aria-label": "Clear search", children: "\u2715" })
-  ] });
-});
-
-// src/components/Input/OtpField.tsx
-var import_react6 = require("react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
-function OtpField({ value, onChange, length = 6, disabled }) {
-  const cellRefs = (0, import_react6.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__ */ (0, import_jsx_runtime6.jsx)("div", { className: "snacky-otp", children: digits.map((digit, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    "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
-var import_react7 = require("react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-function CopyField({ value, onCopy, className }) {
-  const [copied, setCopied] = (0, import_react7.useState)(false);
-  async function handleCopy() {
-    try {
-      await navigator.clipboard.writeText(value);
-    } catch {
-    }
-    onCopy?.(value);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2e3);
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: cx("snacky-copy", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "snacky-copy__value", children: value }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("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 = {};
@@ -335,10 +201,10 @@ __export(outline_exports, {
   truck: () => truck,
   unsent: () => unsent
 });
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 function icon(viewBox, paths) {
   return function SnackyIcon({ width = viewBox, height = viewBox, color = "currentColor", ...rest }) {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("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__ */ (0, import_jsx_runtime8.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime3.jsx)(
       "path",
       {
         d,
@@ -512,6 +378,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
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var UploadButton = (0, import_react3.forwardRef)(function UploadButton2({ icon: icon3 = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(camera, {}), ariaLabel = "Upload image", className, ...rest }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { ref, type: "button", "aria-label": ariaLabel, className: cx("snacky-upload", className), ...rest, children: icon3 });
+});
+
+// src/components/Input/TextField.tsx
+var import_react4 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var TextField = (0, import_react4.forwardRef)(function TextField2({
+  value,
+  onChange,
+  label,
+  leadingIcon,
+  trailingIcon,
+  trailingIconRotated = false,
+  error,
+  disabled,
+  className,
+  id,
+  ...rest
+}, ref) {
+  const autoId = (0, import_react4.useId)();
+  const fieldId = id ?? autoId;
+  const errorMessage = typeof error === "string" ? error : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { className: "snacky-field-label", htmlFor: fieldId, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      "div",
+      {
+        className: cx("snacky-field", !!error && "snacky-field--error", disabled && "snacky-field--disabled"),
+        children: [
+          leadingIcon && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "snacky-field__icon", children: leadingIcon }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "input",
+            {
+              ref,
+              id: fieldId,
+              className: "snacky-field__input",
+              value,
+              onChange: (e) => onChange(e.target.value),
+              disabled,
+              ...rest
+            }
+          ),
+          trailingIcon && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "span",
+            {
+              className: "snacky-field__icon",
+              style: trailingIconRotated ? { transform: "rotate(180deg)" } : void 0,
+              children: trailingIcon
+            }
+          )
+        ]
+      }
+    ),
+    errorMessage && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "snacky-field-error", children: errorMessage })
+  ] });
+});
+
+// src/components/Input/SearchField.tsx
+var import_react5 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var SearchField = (0, import_react5.forwardRef)(function SearchField2({ value, onChange, searchIcon, onClear, className, placeholder = "Search products...", ...rest }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: cx("snacky-search", className), children: [
+    searchIcon && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "snacky-search__icon", children: searchIcon }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "input",
+      {
+        ref,
+        className: "snacky-search__input",
+        value,
+        placeholder,
+        onChange: (e) => onChange(e.target.value),
+        ...rest
+      }
+    ),
+    value && onClear && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: "snacky-search__clear", onClick: onClear, "aria-label": "Clear search", children: "\u2715" })
+  ] });
+});
+
+// src/components/Input/OtpField.tsx
+var import_react6 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function OtpField({ value, onChange, length = 6, disabled }) {
+  const cellRefs = (0, import_react6.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__ */ (0, import_jsx_runtime7.jsx)("div", { className: "snacky-otp", children: digits.map((digit, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "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
+var import_react7 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function CopyField({ value, onCopy, className }) {
+  const [copied, setCopied] = (0, import_react7.useState)(false);
+  async function handleCopy() {
+    try {
+      await navigator.clipboard.writeText(value);
+    } catch {
+    }
+    onCopy?.(value);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2e3);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: cx("snacky-copy", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "snacky-copy__value", children: value }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: cx("snacky-copy__action", copied && "snacky-copy__action--copied"), onClick: handleCopy, children: copied ? "Copied" : "Copy" })
+  ] });
+}
+
 // src/components/Input/ChatInput.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
 function ChatInput({ value, onChange, onSend, sendIcon, className, placeholder = "Write your message here", ...rest }) {
@@ -702,6 +705,7 @@ function TabRow({ tabs, selected, onSelect, className }) {
 var solid_exports = {};
 __export(solid_exports, {
   account: () => account2,
+  angleSmallRight: () => angleSmallRight,
   balance: () => balance2,
   bell: () => bell2,
   cart: () => cart2,
@@ -732,6 +736,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"]
 ]);
@@ -831,43 +838,64 @@ function AlertBanner({ message, countdown, className }) {
   ] });
 }
 
-// src/components/Badge/Badge.tsx
+// src/components/PageIndicator/PageIndicator.tsx
 var import_jsx_runtime21 = require("react/jsx-runtime");
+function PageIndicator({ count, activeIndex, ariaLabel, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    "div",
+    {
+      className: cx("snacky-page-indicator", className),
+      role: "status",
+      "aria-label": ariaLabel ?? `Page ${activeIndex + 1} of ${count}`,
+      children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: cx("snacky-page-indicator__dot", i === activeIndex && "snacky-page-indicator__dot--active")
+        },
+        i
+      ))
+    }
+  );
+}
+
+// src/components/Badge/Badge.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function NotificationBadge({ count, max = 99, children, className }) {
-  if (count <= 0) return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_jsx_runtime21.Fragment, { children });
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { className: cx("snacky-badge-wrap", className), children: [
+  if (count <= 0) return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_jsx_runtime22.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("span", { className: cx("snacky-badge-wrap", className), children: [
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "snacky-badge-notification", children: count > max ? `${max}+` : count })
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "snacky-badge-notification", children: count > max ? `${max}+` : count })
   ] });
 }
 function DiscountTag({ label, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: cx("snacky-discount-tag", className), children: label });
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: cx("snacky-discount-tag", className), children: label });
 }
 function SoldOutBadge({ className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: cx("snacky-soldout-badge", className), children: "Sold Out" });
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: cx("snacky-soldout-badge", className), children: "Sold Out" });
 }
 function InfoBadge({ label, icon: icon3, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { className: cx("snacky-info-badge", className), children: [
-    icon3 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "snacky-info-badge__icon", children: icon3 }),
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("span", { className: cx("snacky-info-badge", className), children: [
+    icon3 && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "snacky-info-badge__icon", children: icon3 }),
     label
   ] });
 }
 var VariantBadge = InfoBadge;
 
 // src/components/Callout/Callout.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function Callout({ message, timestamp, variant, statusIcon, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: cx("snacky-callout", `snacky-callout--${variant}`, className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "snacky-callout__message", children: message }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("span", { className: "snacky-callout__meta", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: cx("snacky-callout", `snacky-callout--${variant}`, className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "snacky-callout__message", children: message }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: "snacky-callout__meta", children: [
       timestamp,
-      statusIcon && variant !== "received" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "snacky-callout__meta-icon", children: statusIcon })
+      statusIcon && variant !== "received" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "snacky-callout__meta-icon", children: statusIcon })
     ] })
   ] });
 }
 
 // src/components/List/List.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var STATUS_LABEL = {
   waiting: "Waiting for Payment",
   process: "Order Processing",
@@ -895,7 +923,7 @@ function OrderListItem({
 }) {
   const action = actionLabel ?? STATUS_ACTION[status];
   const isCod = status === "processCod";
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
     "div",
     {
       className: cx("snacky-order-item", className),
@@ -904,32 +932,32 @@ function OrderListItem({
       onClick,
       onKeyDown: onClick ? (e) => (e.key === "Enter" || e.key === " ") && onClick() : void 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "snacky-order-item__top", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "snacky-order-item__thumb-box", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("img", { className: "snacky-order-item__thumb", src: productImage, alt: "" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "snacky-order-item__info", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "snacky-order-item__top", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "snacky-order-item__thumb-box", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("img", { className: "snacky-order-item__thumb", src: productImage, alt: "" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "snacky-order-item__info", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
               "span",
               {
                 className: cx("snacky-order-item__status", status === "cancelled" && "snacky-order-item__status--cancelled"),
                 children: STATUS_LABEL[status]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "snacky-order-item__name", children: productName })
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "snacky-order-item__name", children: productName })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "snacky-order-item__details", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "snacky-order-item__count", children: itemsSummary }),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: cx("snacky-order-item__total", isCod && "snacky-order-item__total--cod"), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "snacky-order-item__details", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "snacky-order-item__count", children: itemsSummary }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: cx("snacky-order-item__total", isCod && "snacky-order-item__total--cod"), children: [
             "Order Total: ",
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("b", { children: total })
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("b", { children: total })
           ] }),
-          isCod && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "snacky-order-item__cod", children: "COD" })
+          isCod && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "snacky-order-item__cod", children: "COD" })
         ] }),
-        status === "waiting" && paymentDeadline && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "snacky-order-item__deadline", children: [
+        status === "waiting" && paymentDeadline && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "snacky-order-item__deadline", children: [
           "Pay before ",
           paymentDeadline
         ] }),
-        action && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "snacky-order-item__action-row", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        action && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "snacky-order-item__action-row", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           Button,
           {
             variant: "primary",
@@ -945,7 +973,7 @@ function OrderListItem({
   );
 }
 function NotificationListItem({ title, message, unread = false, onClick, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
     "div",
     {
       className: cx("snacky-notif-item", unread && "snacky-notif-item--unread", className),
@@ -954,8 +982,8 @@ function NotificationListItem({ title, message, unread = false, onClick, classNa
       onClick,
       onKeyDown: onClick ? (e) => (e.key === "Enter" || e.key === " ") && onClick() : void 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "snacky-notif-item__title", children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "snacky-notif-item__message", children: message })
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "snacky-notif-item__title", children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "snacky-notif-item__message", children: message })
       ]
     }
   );
@@ -963,12 +991,12 @@ function NotificationListItem({ title, message, unread = false, onClick, classNa
 
 // src/components/Accordion/Accordion.tsx
 var import_react10 = require("react");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function Accordion({ title, leadingIcon, children, defaultOpen = false, className }) {
   const [open, setOpen] = (0, import_react10.useState)(defaultOpen);
   const panelId = (0, import_react10.useId)();
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: cx("snacky-accordion", !!leadingIcon && "snacky-accordion--icon", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: cx("snacky-accordion", !!leadingIcon && "snacky-accordion--icon", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
       "button",
       {
         type: "button",
@@ -977,27 +1005,27 @@ function Accordion({ title, leadingIcon, children, defaultOpen = false, classNam
         "aria-controls": panelId,
         onClick: () => setOpen((v) => !v),
         children: [
-          leadingIcon && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "snacky-accordion__icon", children: leadingIcon }),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "snacky-accordion__title", children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          leadingIcon && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "snacky-accordion__icon", children: leadingIcon }),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "snacky-accordion__title", children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
             "svg",
             {
               className: cx("snacky-accordion__chevron", open && "snacky-accordion__chevron--open"),
               viewBox: "0 0 20 20",
               fill: "none",
-              children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("path", { d: "M5 7.5L10 12.5L15 7.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("path", { d: "M5 7.5L10 12.5L15 7.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
             }
           )
         ]
       }
     ),
-    open && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { id: panelId, className: "snacky-accordion__panel", children })
+    open && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { id: panelId, className: "snacky-accordion__panel", children })
   ] });
 }
 
 // src/components/Modal/BottomSheet.tsx
 var import_react11 = require("react");
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function BottomSheet({ open, onDismiss, children, showHandle = false, className }) {
   (0, import_react11.useEffect)(() => {
     if (!open) return;
@@ -1008,7 +1036,7 @@ function BottomSheet({ open, onDismiss, children, showHandle = false, className
     return () => window.removeEventListener("keydown", onKeyDown);
   }, [open, onDismiss]);
   if (!open) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "snacky-sheet-overlay", onClick: onDismiss, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "snacky-sheet-overlay", onClick: onDismiss, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
     "div",
     {
       className: cx("snacky-sheet", className),
@@ -1016,7 +1044,7 @@ function BottomSheet({ open, onDismiss, children, showHandle = false, className
       "aria-modal": "true",
       onClick: (e) => e.stopPropagation(),
       children: [
-        showHandle && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "snacky-sheet__handle" }),
+        showHandle && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "snacky-sheet__handle" }),
         children
       ]
     }
@@ -1024,29 +1052,29 @@ function BottomSheet({ open, onDismiss, children, showHandle = false, className
 }
 
 // src/components/Section/Section.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function Section({ title, onAction, children, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("section", { className: cx("snacky-section", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "snacky-section__header", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("h3", { className: "snacky-section__title", children: title }),
-      onAction && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("button", { type: "button", className: "snacky-section__action", onClick: onAction, "aria-label": `See more: ${title}`, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("svg", { viewBox: "0 0 16 16", fill: "none", width: "16", height: "16", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("path", { d: "M6 3.5L10.5 8L6 12.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("section", { className: cx("snacky-section", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "snacky-section__header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("h3", { className: "snacky-section__title", children: title }),
+      onAction && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(IconButton, { size: "small", icon: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(angleSmallRight, {}), onClick: onAction, ariaLabel: `See more: ${title}` })
     ] }),
     children
   ] });
 }
 
 // src/components/Stepper/Stepper.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function Stepper({ steps, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("ol", { className: cx("snacky-stepper", className), children: steps.map((step, i) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("ol", { className: cx("snacky-stepper", className), children: steps.map((step, i) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
     "li",
     {
       className: cx("snacky-stepper__step", i === steps.length - 1 && "snacky-stepper__step--last"),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: cx("snacky-stepper__dot", `snacky-stepper__dot--${step.state}`), children: step.state === "cancelled" && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(close, { width: 12, height: 12 }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { className: "snacky-stepper__body", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: cx("snacky-stepper__label", `snacky-stepper__label--${step.state}`), children: step.label }),
-          step.timestamp && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "snacky-stepper__time", children: step.timestamp })
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: cx("snacky-stepper__dot", `snacky-stepper__dot--${step.state}`), children: step.state === "cancelled" && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(close, { width: 12, height: 12 }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { className: "snacky-stepper__body", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: cx("snacky-stepper__label", `snacky-stepper__label--${step.state}`), children: step.label }),
+          step.timestamp && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "snacky-stepper__time", children: step.timestamp })
         ] })
       ]
     },
@@ -1055,7 +1083,7 @@ function Stepper({ steps, className }) {
 }
 
 // src/components/Calendar/Calendar.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var WEEKDAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
 var MONTHS = [
   "January",
@@ -1102,39 +1130,39 @@ function Calendar({
   const [lo, hi] = range ? [range[0], range[1]].sort((a, b) => a.getTime() - b.getTime()) : [null, null];
   const isEnd = (d) => single && sameDay(d, single) || lo && hi && (sameDay(d, lo) || sameDay(d, hi));
   const isInRange = (d) => lo && hi && d > lo && d < hi;
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: cx("snacky-calendar", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "snacky-calendar__header", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: cx("snacky-calendar", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "snacky-calendar__header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
         "button",
         {
           type: "button",
           className: "snacky-calendar__nav",
           onClick: onPrevMonth,
           "aria-label": "Previous month",
-          children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(back, { width: 24, height: 24 })
+          children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(back, { width: 24, height: 24 })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { className: "snacky-calendar__label", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("span", { className: "snacky-calendar__label", children: [
         MONTHS[month.getMonth()],
         " ",
         month.getFullYear()
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
         "button",
         {
           type: "button",
           className: "snacky-calendar__nav snacky-calendar__nav--next",
           onClick: onNextMonth,
           "aria-label": "Next month",
-          children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(back, { width: 24, height: 24 })
+          children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(back, { width: 24, height: 24 })
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "snacky-calendar__grid", children: [
-      WEEKDAYS.map((d) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "snacky-calendar__weekday", children: d }, d)),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "snacky-calendar__grid", children: [
+      WEEKDAYS.map((d) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "snacky-calendar__weekday", children: d }, d)),
       days.map((d, i) => {
         const outside = d.getMonth() !== month.getMonth();
-        return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
           "button",
           {
             type: "button",
@@ -1148,26 +1176,26 @@ function Calendar({
             disabled: outside,
             "aria-current": isEnd(d) ? "date" : void 0,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "snacky-calendar__day-number", children: d.getDate() }),
-              marked.some((m) => sameDay(m, d)) && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "snacky-calendar__marker" })
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "snacky-calendar__day-number", children: d.getDate() }),
+              marked.some((m) => sameDay(m, d)) && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "snacky-calendar__marker" })
             ]
           },
           i
         );
       })
     ] }),
-    onAction && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Button, { onClick: onAction, style: { width: "100%" }, children: actionLabel })
+    onAction && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Button, { onClick: onAction, style: { width: "100%" }, children: actionLabel })
   ] });
 }
 
 // src/components/Avatar/Avatar.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function Avatar({ src, alt, size = "md", className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("img", { src, alt, className: cx("snacky-avatar", `snacky-avatar--${size}`, className) });
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("img", { src, alt, className: cx("snacky-avatar", `snacky-avatar--${size}`, className) });
 }
 
 // src/components/Illustration/Illustration.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var SIZE = {
   empty: { width: 268, height: 200 },
   createAccount: { width: 360, height: 240 },
@@ -1177,54 +1205,54 @@ var SIZE = {
 };
 function Illustration({ variant, src, alt, className }) {
   const { width, height } = SIZE[variant];
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("img", { src, alt, width, height, className: cx("snacky-illustration", className) });
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("img", { src, alt, width, height, className: cx("snacky-illustration", className) });
 }
 
 // src/components/ProductImage/ProductImage.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 function ProductImage({ src, alt, usage, sold = false, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("span", { className: cx("snacky-product-image-wrap", `snacky-product-image-wrap--${usage}`, className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("img", { src, alt, className: cx("snacky-product-image", `snacky-product-image--${usage}`) }),
-    sold && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "snacky-product-image-sold-overlay", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "snacky-product-image-sold-label", children: "Sold Out" }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { className: cx("snacky-product-image-wrap", `snacky-product-image-wrap--${usage}`, className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("img", { src, alt, className: cx("snacky-product-image", `snacky-product-image--${usage}`) }),
+    sold && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "snacky-product-image-sold-overlay", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "snacky-product-image-sold-label", children: "Sold Out" }) })
   ] });
 }
 
 // src/components/ProductCard/ProductCard.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("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__ */ (0, import_jsx_runtime32.jsxs)("div", { className: cx("snacky-product-card", "snacky-product-card--details", className2), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "snacky-product-card__image-block", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "snacky-product-card__image-wrap", onClick: onClick2, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("img", { className: "snacky-product-card__image", src: imageUrl2, alt: productName2 }),
-        sold && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "snacky-product-card__sold-overlay", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SoldOutBadge, {}) })
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: cx("snacky-product-card", "snacky-product-card--details", className2), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "snacky-product-card__image-block", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "snacky-product-card__image-wrap", onClick: onClick2, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("img", { className: "snacky-product-card__image", src: imageUrl2, alt: productName2 }),
+        sold && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "snacky-product-card__sold-overlay", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SoldOutBadge, {}) })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "snacky-product-card__details-body", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "snacky-product-card__name", children: productName2 }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "snacky-product-card__price-row", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "snacky-product-card__price", children: price2 }),
-          originalPrice2 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "snacky-product-card__original-price", children: originalPrice2 }),
-          discountLabel2 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DiscountTag, { label: discountLabel2 })
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "snacky-product-card__details-body", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "snacky-product-card__name", children: productName2 }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "snacky-product-card__price-row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "snacky-product-card__price", children: price2 }),
+          originalPrice2 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "snacky-product-card__original-price", children: originalPrice2 }),
+          discountLabel2 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(DiscountTag, { label: discountLabel2 })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "snacky-product-card__footer-row", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { className: "snacky-product-card__rating", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "snacky-product-card__rating-icon", children: ratingIcon2 ?? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(star, { width: 16, height: 16 }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "snacky-product-card__footer-row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { className: "snacky-product-card__rating", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "snacky-product-card__rating-icon", children: ratingIcon2 ?? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(star, { width: 16, height: 16 }) }),
             rating2,
             " (",
             ratingCount,
             ")"
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "snacky-product-card__actions snacky-product-card__actions--details", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(IconButton, { variant: "secondary", icon: favoriteIcon ?? (favorited ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(heart2, { width: 20, height: 20 }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(heart, { width: 20, height: 20 })), selected: favorited, onClick: onFavoriteClick, ariaLabel: "Favorite" }),
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(IconButton, { variant: "secondary", icon: shareIcon ?? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(share, { width: 20, height: 20 }), onClick: onShareClick, ariaLabel: "Share" }),
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(IconButton, { variant: "secondary", icon: chatIcon ?? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(chat, { width: 20, height: 20 }), onClick: onChatClick, ariaLabel: "Chat with seller" })
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "snacky-product-card__actions snacky-product-card__actions--details", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(IconButton, { variant: "secondary", icon: favoriteIcon ?? (favorited ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(heart2, { width: 20, height: 20 }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(heart, { width: 20, height: 20 })), selected: favorited, onClick: onFavoriteClick, ariaLabel: "Favorite" }),
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(IconButton, { variant: "secondary", icon: shareIcon ?? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(share, { width: 20, height: 20 }), onClick: onShareClick, ariaLabel: "Share" }),
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(IconButton, { variant: "secondary", icon: chatIcon ?? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(chat, { width: 20, height: 20 }), onClick: onChatClick, ariaLabel: "Chat with seller" })
           ] })
         ] })
       ] })
     ] });
   }
   const { productName, imageUrl, price, rating, originalPrice, discountLabel, onAddToCart, cartIcon, ratingIcon, onClick, className } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
     "div",
     {
       className: cx("snacky-product-card", "snacky-product-card--list", className),
@@ -1233,25 +1261,25 @@ function ProductCard(props) {
       onClick,
       onKeyDown: (e) => (e.key === "Enter" || e.key === " ") && onClick?.(),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "snacky-product-card__image-wrap", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("img", { className: "snacky-product-card__image", src: imageUrl, alt: productName }),
-          discountLabel && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "snacky-product-card__discount", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DiscountTag, { label: discountLabel }) })
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "snacky-product-card__image-wrap", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("img", { className: "snacky-product-card__image", src: imageUrl, alt: productName }),
+          discountLabel && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "snacky-product-card__discount", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(DiscountTag, { label: discountLabel }) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "snacky-product-card__name", children: productName }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "snacky-product-card__price-row", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "snacky-product-card__price", children: price }),
-          originalPrice && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "snacky-product-card__original-price", children: originalPrice })
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "snacky-product-card__name", children: productName }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "snacky-product-card__price-row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "snacky-product-card__price", children: price }),
+          originalPrice && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "snacky-product-card__original-price", children: originalPrice })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "snacky-product-card__footer-row", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { className: "snacky-product-card__rating", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "snacky-product-card__rating-icon", children: ratingIcon ?? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(star, { width: 16, height: 16 }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "snacky-product-card__footer-row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { className: "snacky-product-card__rating", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "snacky-product-card__rating-icon", children: ratingIcon ?? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(star, { width: 16, height: 16 }) }),
             rating
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
             IconButton,
             {
               variant: "primary",
-              icon: cartIcon ?? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(cartAdd, { width: 16, height: 16 }),
+              icon: cartIcon ?? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(cartAdd, { width: 16, height: 16 }),
               onClick: (e) => {
                 e.stopPropagation();
                 onAddToCart();
@@ -1266,17 +1294,17 @@ function ProductCard(props) {
 }
 
 // src/components/ImagePlaceholder/ImagePlaceholder.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function ImagePlaceholder({ width, height, className }) {
   const iconSize = Math.round(Math.min(width, height) * 0.32);
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     "div",
     {
       className: cx("snacky-image-placeholder", className),
       style: { width, height },
       role: "img",
       "aria-label": "No image",
-      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
         "svg",
         {
           width: iconSize,
@@ -1288,9 +1316,9 @@ function ImagePlaceholder({ width, height, className }) {
           strokeLinecap: "round",
           strokeLinejoin: "round",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("circle", { cx: "8.5", cy: "8.5", r: "1.5", fill: "currentColor", stroke: "none" }),
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("polyline", { points: "21 15 16 10 5 21" })
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("circle", { cx: "8.5", cy: "8.5", r: "1.5", fill: "currentColor", stroke: "none" }),
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("polyline", { points: "21 15 16 10 5 21" })
           ]
         }
       )
@@ -1324,6 +1352,7 @@ function ImagePlaceholder({ width, height, className }) {
   NotificationListItem,
   OrderListItem,
   OtpField,
+  PageIndicator,
   PointBalanceBanner,
   ProductCard,
   ProductChip,