@snacky/ui 0.1.0

package/dist/index.cjs

@@ -0,0 +1,1082 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key2 of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key2) && key2 !== except)
+        __defProp(to, key2, { get: () => from[key2], enumerable: !(desc = __getOwnPropDesc(from, key2)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Accordion: () => Accordion,
+  AddressResult: () => AddressResult,
+  AlertBanner: () => AlertBanner,
+  Avatar: () => Avatar,
+  BottomSheet: () => BottomSheet,
+  Button: () => Button,
+  Callout: () => Callout,
+  ChatInput: () => ChatInput,
+  Checkbox: () => Checkbox,
+  CopyField: () => CopyField,
+  DiscountTag: () => DiscountTag,
+  FilterChip: () => FilterChip,
+  FullWidthBanner: () => FullWidthBanner,
+  Header: () => Header,
+  HeroBanner: () => HeroBanner,
+  IconButton: () => IconButton,
+  Illustration: () => Illustration,
+  NavBar: () => NavBar,
+  NotificationBadge: () => NotificationBadge,
+  NotificationListItem: () => NotificationListItem,
+  OrderListItem: () => OrderListItem,
+  OtpField: () => OtpField,
+  PointBalanceBanner: () => PointBalanceBanner,
+  ProductCard: () => ProductCard,
+  ProductChip: () => ProductChip,
+  ProductImage: () => ProductImage,
+  RadioOption: () => RadioOption,
+  SearchField: () => SearchField,
+  Section: () => Section,
+  SnackyIcons: () => SnackyIcons,
+  SoldOutBadge: () => SoldOutBadge,
+  SquareBanner: () => SquareBanner,
+  TabRow: () => TabRow,
+  TextField: () => TextField,
+  Toggle: () => Toggle,
+  UploadButton: () => UploadButton,
+  VariantBadge: () => VariantBadge,
+  typography: () => typography
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/theme/tokens.ts
+var typography = {
+  h1: {
+    bold: { fontFamily: "Poppins, sans-serif", fontSize: "32px", fontWeight: 700, lineHeight: "36px", letterSpacing: "0.01em" }
+  },
+  h2: {
+    bold: { fontFamily: "Poppins, sans-serif", fontSize: "20px", fontWeight: 700, lineHeight: "36px", letterSpacing: "0.01em" }
+  },
+  h3: {
+    bold: { fontFamily: "Poppins, sans-serif", fontSize: "16px", fontWeight: 700, lineHeight: "36px", letterSpacing: "0.01em" },
+    regular: { fontFamily: "Poppins, sans-serif", fontSize: "16px", fontWeight: 400, lineHeight: "36px", letterSpacing: "normal" }
+  },
+  body: {
+    semibold: { fontFamily: "Poppins, sans-serif", fontSize: "14px", fontWeight: 600, lineHeight: "24px", letterSpacing: "normal" },
+    regular: { fontFamily: "Poppins, sans-serif", fontSize: "14px", fontWeight: 400, lineHeight: "24px", letterSpacing: "normal" }
+  },
+  small: {
+    semibold: { fontFamily: "Poppins, sans-serif", fontSize: "12px", fontWeight: 600, lineHeight: "24px", letterSpacing: "normal" },
+    bold: { fontFamily: "Poppins, sans-serif", fontSize: "12px", fontWeight: 700, lineHeight: "24px", letterSpacing: "0.01em" },
+    regular: { fontFamily: "Poppins, sans-serif", fontSize: "12px", fontWeight: 400, lineHeight: "24px", letterSpacing: "normal" }
+  },
+  caption: {
+    semibold: { fontFamily: "Poppins, sans-serif", fontSize: "10px", fontWeight: 600, lineHeight: "23px", letterSpacing: "0.01em" },
+    regular: { fontFamily: "Poppins, sans-serif", fontSize: "10px", fontWeight: 400, lineHeight: "16px", letterSpacing: "0.01em" }
+  }
+};
+
+// src/components/Button/Button.tsx
+var import_react = require("react");
+
+// src/utils/cx.ts
+function cx(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+
+// src/components/Button/Button.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Button = (0, import_react.forwardRef)(function Button2({ variant = "primary", danger = false, size = "default", icon, children, className, disabled, ...rest }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "button",
+    {
+      ref,
+      type: "button",
+      disabled,
+      className: cx(
+        "snacky-btn",
+        `snacky-btn--${variant}`,
+        size === "small" && "snacky-btn--small",
+        danger && "snacky-btn--danger",
+        className
+      ),
+      ...rest,
+      children: [
+        icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "snacky-btn__icon", children: icon }),
+        children
+      ]
+    }
+  );
+});
+
+// src/components/IconButton/IconButton.tsx
+var import_react2 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var IconButton = (0, import_react2.forwardRef)(function IconButton2({ variant = "primary", size = "default", icon, selected = false, ariaLabel, className, disabled, ...rest }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "button",
+    {
+      ref,
+      type: "button",
+      disabled,
+      "aria-label": ariaLabel,
+      "aria-pressed": selected,
+      className: cx(
+        "snacky-iconbtn",
+        `snacky-iconbtn--${variant}`,
+        size === "small" && "snacky-iconbtn--small",
+        selected && "snacky-iconbtn--selected",
+        className
+      ),
+      ...rest,
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "snacky-iconbtn__icon", children: icon })
+    }
+  );
+});
+
+// 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, 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: icon });
+});
+
+// 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/components/Input/ChatInput.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function ChatInput({ value, onChange, onSend, sendIcon, className, placeholder = "Write your message here", ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: cx("snacky-chatfield", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "input",
+      {
+        className: "snacky-chatfield__input",
+        value,
+        placeholder,
+        onChange: (e) => onChange(e.target.value),
+        onKeyDown: (e) => e.key === "Enter" && value && onSend(),
+        ...rest
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "button",
+      {
+        type: "button",
+        className: cx("snacky-chatfield__send", value && "snacky-chatfield__send--active"),
+        onClick: onSend,
+        disabled: !value,
+        "aria-label": "Send",
+        children: sendIcon ?? "\u27A4"
+      }
+    )
+  ] });
+}
+
+// src/components/Input/AddressResult.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function AddressResult({ icon, title, subtitle, onClick, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("button", { type: "button", className: cx("snacky-address-result", className), onClick, children: [
+    icon && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "snacky-address-result__icon", children: icon }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "snacky-address-result__title", children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "snacky-address-result__subtitle", children: subtitle })
+    ] })
+  ] });
+}
+
+// src/components/Chips/ProductChip.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function ProductChip({ label, selected, thumbnail, onClick, className, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    "button",
+    {
+      type: "button",
+      className: cx("snacky-chip", selected && "snacky-chip--selected", className),
+      "aria-pressed": selected,
+      onClick,
+      ...rest,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "snacky-chip__thumb", children: thumbnail }),
+        label
+      ]
+    }
+  );
+}
+
+// src/components/Chips/FilterChip.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function FilterChip({ label, selected, onClick, className, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    "button",
+    {
+      type: "button",
+      className: cx("snacky-chip", selected && "snacky-chip--selected", className),
+      "aria-pressed": selected,
+      onClick,
+      ...rest,
+      children: label
+    }
+  );
+}
+
+// src/components/RadioButton/RadioButton.tsx
+var import_react8 = require("react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function RadioOption({ label, selected, onClick, disabled, name, className }) {
+  const id = (0, import_react8.useId)();
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    "label",
+    {
+      htmlFor: id,
+      className: cx("snacky-radio-option", disabled && "snacky-radio-option--disabled", className),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "input",
+          {
+            id,
+            type: "radio",
+            className: "snacky-radio",
+            name,
+            checked: selected,
+            disabled,
+            onChange: onClick
+          }
+        ),
+        label
+      ]
+    }
+  );
+}
+
+// src/components/Checkbox/Checkbox.tsx
+var import_react9 = require("react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function Checkbox({ label, checked, onChange, disabled, className }) {
+  const id = (0, import_react9.useId)();
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", { htmlFor: id, className: cx("snacky-checkbox-option", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      "input",
+      {
+        id,
+        type: "checkbox",
+        className: "snacky-checkbox",
+        checked,
+        disabled,
+        onChange: (e) => onChange(e.target.checked)
+      }
+    ),
+    label
+  ] });
+}
+
+// src/components/Toggle/Toggle.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function Toggle({ checked, onChange, disabled, ariaLabel = "Toggle", className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    "button",
+    {
+      type: "button",
+      role: "switch",
+      "aria-checked": checked,
+      "aria-label": ariaLabel,
+      disabled,
+      className: cx("snacky-toggle", checked && "snacky-toggle--on", className),
+      onClick: () => onChange(!checked),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "snacky-toggle__track" }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "snacky-toggle__thumb" })
+      ]
+    }
+  );
+}
+
+// src/components/Navbar/Navbar.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function NavBar({ items, selected, onSelect, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("nav", { className: cx("snacky-navbar", className), children: items.map((item, i) => {
+    const active = i === selected;
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+      "button",
+      {
+        type: "button",
+        className: cx("snacky-navbar__item", active && "snacky-navbar__item--active"),
+        "aria-current": active ? "page" : void 0,
+        onClick: () => onSelect(i),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "snacky-navbar__icon", children: active && item.activeIcon ? item.activeIcon : item.icon }),
+          item.label
+        ]
+      },
+      item.label
+    );
+  }) });
+}
+
+// src/components/Tab/Tab.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+function TabRow({ tabs, selected, onSelect, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: cx("snacky-tabrow", className), role: "tablist", children: tabs.map((tab, i) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    "button",
+    {
+      type: "button",
+      role: "tab",
+      "aria-selected": i === selected,
+      className: cx("snacky-tab", i === selected && "snacky-tab--active"),
+      onClick: () => onSelect(i),
+      children: tab
+    },
+    tab
+  )) });
+}
+
+// src/icons/outline.tsx
+var outline_exports = {};
+__export(outline_exports, {
+  account: () => account,
+  back: () => back,
+  bell: () => bell,
+  calendar: () => calendar,
+  camera: () => camera,
+  cart: () => cart,
+  cartAdd: () => cartAdd,
+  cash: () => cash,
+  category: () => category,
+  chat: () => chat,
+  check: () => check,
+  chevronDown: () => chevronDown,
+  chevronRight: () => chevronRight,
+  chevronUp: () => chevronUp,
+  clock: () => clock,
+  close: () => close,
+  closeCircle: () => closeCircle,
+  creditCard: () => creditCard,
+  document: () => document,
+  edit: () => edit,
+  eye: () => eye,
+  eyeOff: () => eyeOff,
+  heart: () => heart,
+  help: () => help,
+  history: () => history,
+  home: () => home,
+  key: () => key,
+  location: () => location,
+  lock: () => lock,
+  logout: () => logout,
+  messageSquare: () => messageSquare,
+  minus: () => minus,
+  phone: () => phone,
+  pin: () => pin,
+  plus: () => plus,
+  receipt: () => receipt,
+  search: () => search,
+  send: () => send,
+  share: () => share,
+  smartphone: () => smartphone,
+  trash: () => trash,
+  truck: () => truck
+});
+var import_jsx_runtime17 = require("react/jsx-runtime");
+function base(path) {
+  return function OutlineIcon({ width = 24, height = 24, color = "currentColor", ...rest }) {
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("svg", { width, height, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", ...rest, children: path });
+  };
+}
+var home = base(/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M4 10.5 12 4l8 6.5V19a1 1 0 0 1-1 1h-4v-6H9v6H5a1 1 0 0 1-1-1v-8.5Z" }));
+var category = base(/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("rect", { x: "4", y: "4", width: "7", height: "7", rx: "1" }),
+  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("rect", { x: "13", y: "4", width: "7", height: "7", rx: "1" }),
+  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("rect", { x: "4", y: "13", width: "7", height: "7", rx: "1" }),
+  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("rect", { x: "13", y: "13", width: "7", height: "7", rx: "1" })
+] }));
+var cart = base(/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("circle", { cx: "9", cy: "20", r: "1" }),
+  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("circle", { cx: "17", cy: "20", r: "1" }),
+  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M3 4h2l2.4 11.6a1.5 1.5 0 0 0 1.47 1.2h8.06a1.5 1.5 0 0 0 1.47-1.2L20 7H6" })
+] }));
+var cartAdd = base(/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("circle", { cx: "9", cy: "20", r: "1" }),
+  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("circle", { cx: "17", cy: "20", r: "1" }),
+  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M3 4h2l2.4 11.6a1.5 1.5 0 0 0 1.47 1.2h8.06a1.5 1.5 0 0 0 1.47-1.2L20 7H6" }),
+  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M18 2v5M15.5 4.5h5" })
+] }));
+var history = base(/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M3 12a9 9 0 1 0 3-6.7" }),
+  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M3 4v4h4" }),
+  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M12 8v4l3 2" })
+] }));
+var account = base(/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("circle", { cx: "12", cy: "8", r: "3.5" }),
+  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M5 20c0-3.3 3.1-6 7-6s7 2.7 7 6" })
+] }));
+var eye = base(/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M2 12s3.5-6.5 10-6.5S22 12 22 12s-3.5 6.5-10 6.5S2 12 2 12Z" }),
+  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("circle", { cx: "12", cy: "12", r: "2.5" })
+] }));
+var eyeOff = base(/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M3 3l18 18" }),
+  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M10.6 5.6A9.9 9.9 0 0 1 12 5.5c6.5 0 10 6.5 10 6.5a15.9 15.9 0 0 1-3.4 4.2M6.5 6.8A16.4 16.4 0 0 0 2 12s3.5 6.5 10 6.5a10 10 0 0 0 4-.8" }),
+  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M9.9 9.9a2.5 2.5 0 0 0 3.5 3.5" })
+] }));
+var chevronDown = base(/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M6 9l6 6 6-6" }));
+var chevronUp = base(/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M6 15l6-6 6 6" }));
+var chevronRight = base(/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M9 6l6 6-6 6" }));
+var back = base(/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M15 6l-6 6 6 6" }));
+var close = base(/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M6 6l12 12M18 6L6 18" }));
+var closeCircle = base(/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("circle", { cx: "12", cy: "12", r: "9" }),
+  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M9 9l6 6M15 9l-6 6" })
+] }));
+var calendar = base(/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("rect", { x: "3", y: "5", width: "18", height: "16", rx: "2" }),
+  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M3 9h18M8 3v4M16 3v4" })
+] }));
+var search = base(/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("circle", { cx: "11", cy: "11", r: "7" }),
+  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M21 21l-4.3-4.3" })
+] }));
+var location = base(/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M12 21s7-7.2 7-12a7 7 0 0 0-14 0c0 4.8 7 12 7 12Z" }),
+  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("circle", { cx: "12", cy: "9", r: "2.5" })
+] }));
+var pin = location;
+var send = base(/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M22 2 11 13M22 2l-7 20-4-9-9-4 20-7Z" }));
+var chat = base(/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M21 12a8 8 0 1 1-3.3-6.5L21 4l-1 4.7A7.9 7.9 0 0 1 21 12Z" }));
+var messageSquare = base(/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M4 4h16v12H8l-4 4V4Z" }));
+var heart = base(/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M12 20s-7-4.4-9.3-9A5 5 0 0 1 12 6a5 5 0 0 1 9.3 5c-2.3 4.6-9.3 9-9.3 9Z" }));
+var bell = base(/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M6 9a6 6 0 0 1 12 0c0 5 2 6 2 6H4s2-1 2-6Z" }),
+  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M10 19a2 2 0 0 0 4 0" })
+] }));
+var check = base(/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M5 13l4 4 10-10" }));
+var plus = base(/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M12 5v14M5 12h14" }));
+var minus = base(/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M5 12h14" }));
+var trash = base(/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_jsx_runtime17.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M4 7h16M9 7V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2M6 7l1 13a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1l1-13" }) }));
+var edit = base(/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_jsx_runtime17.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M4 20h4L18.5 9.5a2.1 2.1 0 0 0-3-3L5 17v3Z" }) }));
+var share = base(/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("circle", { cx: "6", cy: "12", r: "2.5" }),
+  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("circle", { cx: "18", cy: "6", r: "2.5" }),
+  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("circle", { cx: "18", cy: "18", r: "2.5" }),
+  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M8.3 10.7l7.4-4.4M8.3 13.3l7.4 4.4" })
+] }));
+var camera = base(/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M4 8h3l2-2h6l2 2h3v11H4V8Z" }),
+  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("circle", { cx: "12", cy: "13.5", r: "3.5" })
+] }));
+var phone = base(/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M6 3h3l2 5-2.5 1.5a12 12 0 0 0 6 6L16 13l5 2v3a2 2 0 0 1-2 2A16 16 0 0 1 4 5a2 2 0 0 1 2-2Z" }));
+var lock = base(/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("rect", { x: "5", y: "11", width: "14", height: "9", rx: "1.5" }),
+  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M8 11V8a4 4 0 0 1 8 0v3" })
+] }));
+var document = base(/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M7 3h7l4 4v14H7V3Z" }),
+  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M14 3v4h4" })
+] }));
+var creditCard = base(/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("rect", { x: "3", y: "6", width: "18", height: "12", rx: "2" }),
+  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M3 10h18" })
+] }));
+var receipt = base(/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M6 3h12v18l-2-1.5-2 1.5-2-1.5-2 1.5-2-1.5-2 1.5V3Z" }),
+  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M9 8h6M9 12h6" })
+] }));
+var smartphone = base(/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("rect", { x: "7", y: "2", width: "10", height: "20", rx: "2" }),
+  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M11 19h2" })
+] }));
+var key = base(/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("circle", { cx: "8", cy: "15", r: "4" }),
+  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M11 12l9-9M17 6l3 3M14 9l2 2" })
+] }));
+var help = base(/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("circle", { cx: "12", cy: "12", r: "9" }),
+  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M9.5 9.5a2.5 2.5 0 1 1 3.5 2.3c-.9.4-1 1-1 1.7" }),
+  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M12 17h.01" })
+] }));
+var logout = base(/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" }),
+  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M16 17l5-5-5-5M21 12H9" })
+] }));
+var truck = base(/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M2 7h11v10H2V7Z" }),
+  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M13 10h4l4 3v4h-8v-7Z" }),
+  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("circle", { cx: "7", cy: "19", r: "1.5" }),
+  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("circle", { cx: "17", cy: "19", r: "1.5" })
+] }));
+var cash = base(/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("rect", { x: "2", y: "6", width: "20", height: "12", rx: "2" }),
+  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("circle", { cx: "12", cy: "12", r: "3" })
+] }));
+var clock = base(/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("circle", { cx: "12", cy: "12", r: "9" }),
+  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M12 7v5l3.5 2" })
+] }));
+
+// src/icons/solid.tsx
+var solid_exports = {};
+__export(solid_exports, {
+  cart: () => cart2,
+  category: () => category2,
+  heart: () => heart2,
+  home: () => home2
+});
+var import_jsx_runtime18 = require("react/jsx-runtime");
+function base2(path) {
+  return function SolidIcon({ width = 24, height = 24, color = "currentColor", ...rest }) {
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("svg", { width, height, viewBox: "0 0 24 24", fill: color, ...rest, children: path });
+  };
+}
+var home2 = base2(/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: "M4 10.5 12 4l8 6.5V19a1 1 0 0 1-1 1h-4v-6H9v6H5a1 1 0 0 1-1-1v-8.5Z" }));
+var category2 = base2(/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("rect", { x: "4", y: "4", width: "7", height: "7", rx: "1" }),
+  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("rect", { x: "13", y: "4", width: "7", height: "7", rx: "1" }),
+  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("rect", { x: "4", y: "13", width: "7", height: "7", rx: "1" }),
+  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("rect", { x: "13", y: "13", width: "7", height: "7", rx: "1" })
+] }));
+var cart2 = base2(/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: "M3 4h2l2.4 11.6a1.5 1.5 0 0 0 1.47 1.2h8.06a1.5 1.5 0 0 0 1.47-1.2L20 7H6l-.4-2H3v-1Zm6 16a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm8 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" }));
+var heart2 = base2(/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: "M12 20s-7-4.4-9.3-9A5 5 0 0 1 12 6a5 5 0 0 1 9.3 5c-2.3 4.6-9.3 9-9.3 9Z" }));
+
+// src/icons/index.ts
+var SnackyIcons = { outline: outline_exports, solid: solid_exports };
+
+// src/components/Header/Header.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+function Header({ title, leadingIcon, onLeadingClick, trailingIcon, onTrailingClick, className }) {
+  const LeadingIconEl = leadingIcon === "back" ? SnackyIcons.outline.back : SnackyIcons.outline.close;
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("header", { className: cx("snacky-header", className), children: [
+    leadingIcon && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      "button",
+      {
+        type: "button",
+        className: "snacky-header__icon-btn",
+        onClick: onLeadingClick,
+        "aria-label": leadingIcon === "back" ? "Back" : "Close",
+        children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(LeadingIconEl, { width: 24, height: 24 })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: cx("snacky-header__title-row", leadingIcon && !trailingIcon && "snacky-header__title-row--balance"), children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "snacky-header__title", children: title }) }),
+    trailingIcon && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("button", { type: "button", className: "snacky-header__icon-btn", onClick: onTrailingClick, "aria-label": "Action", children: trailingIcon })
+  ] });
+}
+
+// src/components/Banner/Banner.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
+function HeroBanner({ imageUrl, alt, onClick, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("img", { src: imageUrl, alt, onClick, className: cx("snacky-banner-hero", className) });
+}
+function SquareBanner({ imageUrl, alt, onClick, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("img", { src: imageUrl, alt, onClick, className: cx("snacky-banner-square", className) });
+}
+function FullWidthBanner({ imageUrl, alt, onClick, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("img", { src: imageUrl, alt, onClick, className: cx("snacky-banner-full", className) });
+}
+function PointBalanceBanner({ pointsIcon, points, balanceIcon, balance, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: cx("snacky-banner-point-balance", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "snacky-banner-point-balance__item", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "snacky-banner-point-balance__icon", children: pointsIcon }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "snacky-banner-point-balance__label", children: "Points" }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "snacky-banner-point-balance__value", children: points })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "snacky-banner-point-balance__divider" }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "snacky-banner-point-balance__item", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "snacky-banner-point-balance__icon", children: balanceIcon }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "snacky-banner-point-balance__label", children: "Balance" }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "snacky-banner-point-balance__value", children: balance })
+      ] })
+    ] })
+  ] });
+}
+function AlertBanner({ message, countdown, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: cx("snacky-banner-alert", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "snacky-banner-alert__message", children: message }),
+    countdown && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "snacky-banner-alert__countdown", children: countdown })
+  ] });
+}
+
+// src/components/Badge/Badge.tsx
+var import_jsx_runtime21 = 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: [
+    children,
+    /* @__PURE__ */ (0, import_jsx_runtime21.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 });
+}
+function SoldOutBadge({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: cx("snacky-soldout-badge", className), children: "Sold Out" });
+}
+function VariantBadge({ label, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: cx("snacky-variant-badge", className), children: label });
+}
+
+// src/components/Callout/Callout.tsx
+var import_jsx_runtime22 = 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: [
+      timestamp,
+      statusIcon && variant !== "received" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "snacky-callout__meta-icon", children: statusIcon })
+    ] })
+  ] });
+}
+
+// src/components/List/List.tsx
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var STATUS_LABEL = {
+  waiting: "Waiting for Payment",
+  process: "Order Processing",
+  processCod: "Order Processing",
+  shipped: "Order Shipped",
+  received: "Order Received",
+  cancelled: "Order Cancelled"
+};
+var STATUS_ACTION = {
+  shipped: "Track Shipment",
+  received: "Buy Again",
+  cancelled: "Buy Again"
+};
+function OrderListItem({
+  productImage,
+  productName,
+  status,
+  itemsSummary,
+  total,
+  paymentDeadline,
+  actionLabel,
+  onAction,
+  onClick,
+  className
+}) {
+  const action = actionLabel ?? STATUS_ACTION[status];
+  const isCod = status === "processCod";
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+    "div",
+    {
+      className: cx("snacky-order-item", className),
+      role: onClick ? "button" : void 0,
+      tabIndex: onClick ? 0 : void 0,
+      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)(
+              "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_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: [
+            "Order Total: ",
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("b", { children: total })
+          ] }),
+          isCod && /* @__PURE__ */ (0, import_jsx_runtime23.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: [
+          "Pay before ",
+          paymentDeadline
+        ] }),
+        action && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "snacky-order-item__action-row", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          Button,
+          {
+            variant: "primary",
+            onClick: (e) => {
+              e.stopPropagation();
+              onAction?.();
+            },
+            children: action
+          }
+        ) })
+      ]
+    }
+  );
+}
+function NotificationListItem({ title, message, unread = false, onClick, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+    "div",
+    {
+      className: cx("snacky-notif-item", unread && "snacky-notif-item--unread", className),
+      role: onClick ? "button" : void 0,
+      tabIndex: onClick ? 0 : void 0,
+      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 })
+      ]
+    }
+  );
+}
+
+// src/components/Accordion/Accordion.tsx
+var import_react10 = require("react");
+var import_jsx_runtime24 = 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--bordered", !!leadingIcon && "snacky-accordion--icon", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+      "button",
+      {
+        type: "button",
+        className: "snacky-accordion__header",
+        "aria-expanded": open,
+        "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)(
+            "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" })
+            }
+          )
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ (0, import_jsx_runtime24.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");
+function BottomSheet({ open, onDismiss, children, hideHandle = false, className }) {
+  (0, import_react11.useEffect)(() => {
+    if (!open) return;
+    function onKeyDown(e) {
+      if (e.key === "Escape") onDismiss();
+    }
+    window.addEventListener("keydown", onKeyDown);
+    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)(
+    "div",
+    {
+      className: cx("snacky-sheet", className),
+      role: "dialog",
+      "aria-modal": "true",
+      onClick: (e) => e.stopPropagation(),
+      children: [
+        !hideHandle && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "snacky-sheet__handle" }),
+        children
+      ]
+    }
+  ) });
+}
+
+// src/components/Section/Section.tsx
+var import_jsx_runtime26 = 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" }) }) })
+    ] }),
+    children
+  ] });
+}
+
+// src/components/Avatar/Avatar.tsx
+var import_jsx_runtime27 = require("react/jsx-runtime");
+function Avatar({ src, alt, size = "md", className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("img", { src, alt, className: cx("snacky-avatar", `snacky-avatar--${size}`, className) });
+}
+
+// src/components/Illustration/Illustration.tsx
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var SIZE = {
+  empty: { width: 268, height: 200 },
+  createAccount: { width: 360, height: 240 },
+  welcome: { width: 200, height: 200 },
+  success: { width: 200, height: 200 },
+  discountReferral: { width: 268, height: 200 }
+};
+function Illustration({ variant, src, alt, className }) {
+  const { width, height } = SIZE[variant];
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("img", { src, alt, width, height, className: cx("snacky-illustration", className) });
+}
+
+// src/components/ProductImage/ProductImage.tsx
+var import_jsx_runtime29 = require("react/jsx-runtime");
+function ProductImage({ src, alt, usage, sold = false, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("span", { className: cx("snacky-product-image-wrap", `snacky-product-image-wrap--${usage}`, className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("img", { src, alt, className: cx("snacky-product-image", `snacky-product-image--${usage}`) }),
+    sold && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "snacky-product-image-sold-overlay", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "snacky-product-image-sold-label", children: "Sold Out" }) })
+  ] });
+}
+
+// src/components/ProductCard/ProductCard.tsx
+var import_jsx_runtime30 = 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_runtime30.jsxs)("div", { className: cx("snacky-product-card", "snacky-product-card--details", className2), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "snacky-product-card__image-wrap", onClick: onClick2, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("img", { className: "snacky-product-card__image", src: imageUrl2, alt: productName2 }),
+        sold && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "snacky-product-card__discount", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SoldOutBadge, {}) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "snacky-product-card__name", children: productName2 }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "snacky-product-card__price-row", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "snacky-product-card__price", children: price2 }),
+        originalPrice2 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "snacky-product-card__original-price", children: originalPrice2 }),
+        discountLabel2 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(DiscountTag, { label: discountLabel2 })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "snacky-product-card__footer-row", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { className: "snacky-product-card__rating", children: [
+          ratingIcon2 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "snacky-product-card__rating-icon", children: ratingIcon2 }),
+          rating2,
+          " (",
+          ratingCount,
+          ")"
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "snacky-product-card__actions snacky-product-card__actions--details", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(IconButton, { variant: "secondary", icon: favoriteIcon ?? "\u2665", selected: favorited, onClick: onFavoriteClick, ariaLabel: "Favorite" }),
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(IconButton, { variant: "secondary", icon: shareIcon ?? "\u2934", onClick: onShareClick, ariaLabel: "Share" }),
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(IconButton, { variant: "secondary", icon: chatIcon ?? "\u{1F4AC}", onClick: onChatClick, ariaLabel: "Chat with seller" })
+        ] })
+      ] })
+    ] });
+  }
+  const { productName, imageUrl, price, rating, originalPrice, discountLabel, onAddToCart, cartIcon, ratingIcon, onClick, className } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+    "div",
+    {
+      className: cx("snacky-product-card", "snacky-product-card--list", className),
+      role: "button",
+      tabIndex: 0,
+      onClick,
+      onKeyDown: (e) => (e.key === "Enter" || e.key === " ") && onClick?.(),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "snacky-product-card__image-wrap", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("img", { className: "snacky-product-card__image", src: imageUrl, alt: productName }),
+          discountLabel && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "snacky-product-card__discount", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(DiscountTag, { label: discountLabel }) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "snacky-product-card__name", children: productName }),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "snacky-product-card__price-row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "snacky-product-card__price", children: price }),
+          originalPrice && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "snacky-product-card__original-price", children: originalPrice })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "snacky-product-card__footer-row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { className: "snacky-product-card__rating", children: [
+            ratingIcon && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "snacky-product-card__rating-icon", children: ratingIcon }),
+            rating
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+            IconButton,
+            {
+              variant: "primary",
+              icon: cartIcon ?? "+",
+              onClick: (e) => {
+                e.stopPropagation();
+                onAddToCart();
+              },
+              ariaLabel: "Add to cart"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Accordion,
+  AddressResult,
+  AlertBanner,
+  Avatar,
+  BottomSheet,
+  Button,
+  Callout,
+  ChatInput,
+  Checkbox,
+  CopyField,
+  DiscountTag,
+  FilterChip,
+  FullWidthBanner,
+  Header,
+  HeroBanner,
+  IconButton,
+  Illustration,
+  NavBar,
+  NotificationBadge,
+  NotificationListItem,
+  OrderListItem,
+  OtpField,
+  PointBalanceBanner,
+  ProductCard,
+  ProductChip,
+  ProductImage,
+  RadioOption,
+  SearchField,
+  Section,
+  SnackyIcons,
+  SoldOutBadge,
+  SquareBanner,
+  TabRow,
+  TextField,
+  Toggle,
+  UploadButton,
+  VariantBadge,
+  typography
+});
+//# sourceMappingURL=index.cjs.map