react-component-kit-ui 0.0.0-stage → 0.1.0

package/dist/chunks/CartToast-UIJFD2CK.js

@@ -0,0 +1,570 @@
+"use client";
+import { jsx as e, Fragment as z, jsxs as a } from "react/jsx-runtime";
+import { useRef as R, useEffect as U } from "react";
+import { c as J, f as I, p as K, A as Q, N as Z } from "./cart-store-u-ScUvte.js";
+import { A as T, M as X } from "./AnimatedInput-Dt37HZSs.js";
+import { C as ee } from "./CustomRadioGroup-DAwliU9n.js";
+import { A as te } from "./AnimatedCheckmark-CJEmTxC6.js";
+function H(...r) {
+  const o = [], i = (t) => {
+    if (t) {
+      if (typeof t == "string" || typeof t == "number") o.push(String(t));
+      else if (Array.isArray(t)) t.forEach(i);
+      else if (typeof t == "object")
+        for (const [l, y] of Object.entries(t)) y && o.push(l);
+    }
+  };
+  return r.forEach(i), o.join(" ");
+}
+function ae(r) {
+  const o = {};
+  for (const i of String(r ?? "").split(";")) {
+    const t = i.indexOf(":");
+    if (t < 0) continue;
+    const l = i.slice(0, t).trim();
+    l && (o[l.startsWith("--") ? l : l.replace(/-([a-z])/g, (y, x) => x.toUpperCase())] = i.slice(t + 1).trim());
+  }
+  return o;
+}
+function pe({
+  label: r = "Colour",
+  name: o = "variant",
+  type: i = "swatch",
+  options: t = [
+    { label: "Graphite", hex: "#2b2b2f" },
+    { label: "Sand", hex: "#d8c3a5" },
+    { label: "Ocean", hex: "#3d6f9e" },
+    { label: "Clay", hex: "#b5654a", disabled: !0 }
+  ],
+  selected: l = 0,
+  target: y,
+  size: x = "md",
+  className: L = ""
+}) {
+  var S;
+  const E = `vp-${o}`, C = R(!1);
+  return U(() => {
+    C.current || (C.current = !0, document.querySelectorAll("[data-variant-picker]:not([data-bound])").forEach((u) => {
+      u.dataset.bound = "";
+      const m = u.querySelector("[data-variant-value]"), s = () => {
+        const d = u.querySelector("input:checked");
+        if (!d) return;
+        m && (m.textContent = d.dataset.label || d.value);
+        const k = u.dataset.target ? document.getElementById(u.dataset.target) : null;
+        if (k) {
+          const v = Array.from(document.querySelectorAll(`[data-variant-picker][data-target="${u.dataset.target}"]`)).map((b) => {
+            var f;
+            return (f = b.querySelector("input:checked")) == null ? void 0 : f.dataset.label;
+          }).filter(Boolean);
+          k.dataset.variant = v.join(" / ");
+        }
+      };
+      u.addEventListener("change", s), s();
+    }));
+  }, []), /* @__PURE__ */ e(z, { children: /* @__PURE__ */ a("fieldset", { className: H(["v-picker", `v-picker--${i}`, `v-picker--${x}`, L]), "data-variant-picker": !0, "data-target": y, "data-rk-799908": "", children: [
+    /* @__PURE__ */ a("legend", { className: "v-picker__legend", "data-rk-799908": "", children: [
+      r,
+      ": ",
+      /* @__PURE__ */ e("span", { className: "v-picker__value", "data-variant-value": !0, "data-rk-799908": "", children: (S = t[l]) == null ? void 0 : S.label })
+    ] }),
+    /* @__PURE__ */ e("div", { className: "v-picker__options", "data-rk-799908": "", children: t.map((u, m) => /* @__PURE__ */ a("label", { className: H(["v-picker__opt", { "is-disabled": u.disabled }]), style: ae(u.hex ? `--sw: ${u.hex}` : ""), title: u.label, "data-rk-799908": "", children: [
+      /* @__PURE__ */ e("input", { type: "radio", name: `${E}`, defaultValue: u.value ?? u.label, "data-label": u.label, defaultChecked: m === l, disabled: u.disabled, "data-rk-799908": "" }),
+      i === "swatch" ? /* @__PURE__ */ e("span", { className: "v-picker__dot", "aria-hidden": "true", "data-rk-799908": "" }) : /* @__PURE__ */ e("span", { className: "v-picker__pill", "data-rk-799908": "", children: u.label }),
+      i === "swatch" && /* @__PURE__ */ a("span", { className: "sr-only", "data-rk-799908": "", children: [
+        u.label,
+        u.disabled ? " (sold out)" : ""
+      ] }),
+      i === "pill" && u.disabled && /* @__PURE__ */ e("span", { className: "sr-only", "data-rk-799908": "", children: " (sold out)" })
+    ] }, m)) })
+  ] }) });
+}
+function re(...r) {
+  const o = [], i = (t) => {
+    if (t) {
+      if (typeof t == "string" || typeof t == "number") o.push(String(t));
+      else if (Array.isArray(t)) t.forEach(i);
+      else if (typeof t == "object")
+        for (const [l, y] of Object.entries(t)) y && o.push(l);
+    }
+  };
+  return r.forEach(i), o.join(" ");
+}
+function ne(r) {
+  const o = {};
+  for (const i of String(r ?? "").split(";")) {
+    const t = i.indexOf(":");
+    if (t < 0) continue;
+    const l = i.slice(0, t).trim();
+    l && (o[l.startsWith("--") ? l : l.replace(/-([a-z])/g, (y, x) => x.toUpperCase())] = i.slice(t + 1).trim());
+  }
+  return o;
+}
+function ke({
+  stock: r = 3,
+  threshold: o = 5,
+  capacity: i = 20,
+  viewers: t = 14,
+  live: l = !0,
+  variant: y = "card",
+  size: x = "md",
+  className: L = ""
+}) {
+  const E = r > 0 && r <= o, C = r <= 0 ? "out" : E ? "low" : "ok", S = Math.max(4, Math.min(100, r / i * 100)), u = C === "out" ? "Sold out — join the waitlist" : E ? `Only ${r} left — order soon` : "In stock and ready to ship", m = R(!1);
+  return U(() => {
+    m.current || (m.current = !0, document.querySelectorAll("[data-stock-indicator][data-live]:not([data-bound])").forEach((s) => {
+      s.dataset.bound = "";
+      const d = s.querySelector("[data-viewers-count]");
+      if (!d || window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+      const k = Number(s.dataset.viewers) || 0;
+      let v = k;
+      window.setInterval(() => {
+        if (document.hidden) return;
+        const b = Math.random() < 0.5 ? -1 : 1;
+        v = Math.max(Math.max(1, k - 4), Math.min(k + 6, v + b)), d.textContent = String(v), d.classList.remove("is-bump"), d.offsetWidth, d.classList.add("is-bump");
+      }, 6500);
+    }));
+  }, []), /* @__PURE__ */ e(z, { children: /* @__PURE__ */ a("div", { className: re(["stock", `stock--${C}`, `stock--${y}`, `stock--${x}`, L]), "data-stock-indicator": !0, "data-viewers": t, "data-live": l ? "" : void 0, "data-rk-83468c": "", children: [
+    /* @__PURE__ */ a("p", { className: "stock__msg", "data-rk-83468c": "", children: [
+      /* @__PURE__ */ e("span", { className: "stock__icon", "aria-hidden": "true", "data-rk-83468c": "", children: C === "ok" ? /* @__PURE__ */ e("svg", { viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", stroke: "currentColor", strokeWidth: "2.6", strokeLinecap: "round", strokeLinejoin: "round", "data-rk-83468c": "", children: /* @__PURE__ */ e("path", { d: "M20 6 9 17l-5-5", "data-rk-83468c": "" }) }) : /* @__PURE__ */ e("svg", { viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", stroke: "currentColor", strokeWidth: "2.4", strokeLinecap: "round", strokeLinejoin: "round", "data-rk-83468c": "", children: /* @__PURE__ */ e("path", { d: "M13 2 3 14h9l-1 8 10-12h-9z", "data-rk-83468c": "" }) }) }),
+      /* @__PURE__ */ e("strong", { "data-rk-83468c": "", children: u })
+    ] }),
+    C !== "out" && /* @__PURE__ */ e("div", { className: "stock__bar", "aria-hidden": "true", "data-rk-83468c": "", children: /* @__PURE__ */ e("span", { style: ne(`width: ${S}%`), "data-rk-83468c": "" }) }),
+    t > 0 && /* @__PURE__ */ a("p", { className: "stock__viewers", "aria-live": "off", "data-rk-83468c": "", children: [
+      /* @__PURE__ */ e("span", { className: "stock__eye", "aria-hidden": "true", "data-rk-83468c": "", children: /* @__PURE__ */ a("svg", { viewBox: "0 0 24 24", width: "14", height: "14", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", "data-rk-83468c": "", children: [
+        /* @__PURE__ */ e("path", { d: "M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z", "data-rk-83468c": "" }),
+        /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "3", "data-rk-83468c": "" })
+      ] }) }),
+      /* @__PURE__ */ a("span", { "data-rk-83468c": "", children: [
+        /* @__PURE__ */ e("strong", { "data-viewers-count": !0, "data-rk-83468c": "", children: t }),
+        " people are viewing this right now"
+      ] })
+    ] })
+  ] }) });
+}
+function de(...r) {
+  const o = [], i = (t) => {
+    if (t) {
+      if (typeof t == "string" || typeof t == "number") o.push(String(t));
+      else if (Array.isArray(t)) t.forEach(i);
+      else if (typeof t == "object")
+        for (const [l, y] of Object.entries(t)) y && o.push(l);
+    }
+  };
+  return r.forEach(i), o.join(" ");
+}
+function fe({
+  title: r = "Order summary",
+  cartKey: o = "ack-cart",
+  shippingRates: i = [
+    { id: "standard", label: "Standard", eta: "3–5 business days", price: 6 },
+    { id: "express", label: "Express", eta: "1–2 business days", price: 14 }
+  ],
+  freeShippingThreshold: t = 75,
+  taxRate: l = 0.08,
+  promoCodes: y = { REACT10: 10 },
+  editHref: x,
+  currency: L = "USD",
+  locale: E = "en-US",
+  sticky: C = !0,
+  variant: S = "glass",
+  className: u = ""
+}) {
+  const m = JSON.stringify({ shippingRates: i, freeShippingThreshold: t, taxRate: l, promoCodes: y, currency: L, locale: E }), s = R(!1);
+  return U(() => {
+    s.current || (s.current = !0, document.querySelectorAll("[data-order-summary]:not([data-bound])").forEach((d) => {
+      var p;
+      d.dataset.bound = "";
+      const k = JSON.parse(d.dataset.config || "{}"), v = { currency: k.currency, locale: k.locale }, b = J(d.dataset.key), f = d.querySelector("[data-lines]"), h = d.querySelector("[data-empty]"), M = d.querySelector("[data-promo]"), N = d.querySelector("[data-promo-msg]"), $ = d.querySelector("[data-discount-row]"), j = d.querySelector("[data-code]"), q = (c) => d.querySelector(`[data-t="${c}"]`);
+      let A = "", D = (p = k.shippingRates[0]) == null ? void 0 : p.id;
+      const F = (c) => {
+        const n = document.createElement("li");
+        n.className = "o-line";
+        const _ = document.createElement("span");
+        _.className = "o-line__media", _.style.setProperty("--h", String(c.hue ?? 40)), _.innerHTML = c.image ? `<img src="${encodeURI(c.image)}" alt="">` : `<svg viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${K(c.icon)}</svg>`;
+        const w = document.createElement("span");
+        w.className = "o-line__qty", w.textContent = String(c.qty), w.setAttribute("aria-hidden", "true"), _.append(w);
+        const P = document.createElement("span");
+        P.className = "o-line__info";
+        const B = document.createElement("span");
+        B.className = "o-line__name", B.textContent = c.name;
+        const O = document.createElement("span");
+        O.className = "o-line__meta", O.textContent = [c.variant, `Qty ${c.qty}`].filter(Boolean).join(" · "), P.append(B, O);
+        const V = document.createElement("span");
+        return V.className = "o-line__price", V.textContent = I(c.price * c.qty, v), n.append(_, P, V), n;
+      };
+      function g() {
+        const c = b.items();
+        f.replaceChildren(...c.map(F)), h.hidden = c.length > 0;
+        const n = c.reduce((Y, G) => Y + G.price * G.qty, 0), _ = A ? k.promoCodes[A] ?? 0 : 0, w = Math.round(n * _) / 100, P = k.shippingRates.find((Y) => Y.id === D) ?? k.shippingRates[0], B = k.freeShippingThreshold > 0 && n - w >= k.freeShippingThreshold && P === k.shippingRates[0], O = c.length === 0 || !P || B ? 0 : P.price, V = Math.round((n - w) * k.taxRate * 100) / 100, W = Math.max(0, n - w + O + V);
+        q("subtotal").textContent = I(n, v), q("discount").textContent = `−${I(w, v)}`, $.hidden = w === 0, j.textContent = A ? `(${A})` : "", q("shipping").textContent = O === 0 && c.length ? "Free" : I(O, v), q("tax").textContent = I(V, v), q("total").textContent = I(W, v), document.dispatchEvent(new CustomEvent("ack:totals", {
+          detail: { subtotal: n, discount: w, shipping: O, tax: V, total: W, formatted: I(W, v), freeStandard: B, count: c.length }
+        }));
+      }
+      M.addEventListener("submit", (c) => {
+        c.preventDefault();
+        const _ = M.elements.namedItem("code").value.trim().toUpperCase();
+        if (!_) {
+          N.textContent = "Enter a code first.", N.dataset.state = "error";
+          return;
+        }
+        k.promoCodes[_] !== void 0 ? (A = _, N.textContent = `${_} applied — ${k.promoCodes[_]}% off.`, N.dataset.state = "ok") : (N.textContent = `"${_}" is not a valid code.`, N.dataset.state = "error"), g();
+      }), document.addEventListener("change", (c) => {
+        const n = c.target;
+        (n == null ? void 0 : n.name) === "shipping" && n.checked && (D = n.value, g());
+      }), document.addEventListener("ack:totals-request", g), g(), b.subscribe(g);
+    }));
+  }, []), /* @__PURE__ */ e(z, { children: /* @__PURE__ */ a("aside", { className: de(["o-summary", `o-summary--${S}`, { "o-summary--sticky": C }, u]), "aria-labelledby": "o-summary-title", "data-order-summary": !0, "data-key": o, "data-config": m, "data-rk-abd13c": "", children: [
+    /* @__PURE__ */ a("div", { className: "o-summary__head", "data-rk-abd13c": "", children: [
+      /* @__PURE__ */ e("h2", { className: "o-summary__title", id: "o-summary-title", "data-rk-abd13c": "", children: r }),
+      x && /* @__PURE__ */ e("a", { className: "o-summary__edit", href: x, "data-rk-abd13c": "", children: "Edit cart" })
+    ] }),
+    /* @__PURE__ */ e("ul", { className: "o-summary__lines", "data-lines": !0, "aria-label": "Items in your order", "data-rk-abd13c": "" }),
+    /* @__PURE__ */ e("p", { className: "o-summary__empty", "data-empty": !0, hidden: !0, "data-rk-abd13c": "", children: "Your cart is empty." }),
+    /* @__PURE__ */ a("form", { className: "o-summary__promo", "data-promo": !0, noValidate: !0, "data-rk-abd13c": "", children: [
+      /* @__PURE__ */ e("label", { className: "sr-only", htmlFor: "o-summary-code", "data-rk-abd13c": "", children: "Discount code" }),
+      /* @__PURE__ */ e("input", { id: "o-summary-code", name: "code", type: "text", placeholder: "Discount code", autoComplete: "off", autoCapitalize: "characters", spellCheck: "false", "data-rk-abd13c": "" }),
+      /* @__PURE__ */ e("button", { type: "submit", "data-rk-abd13c": "", children: "Apply" })
+    ] }),
+    /* @__PURE__ */ e("p", { className: "o-summary__promo-msg", role: "status", "data-promo-msg": !0, "data-rk-abd13c": "" }),
+    /* @__PURE__ */ a("dl", { className: "o-summary__totals", "aria-live": "polite", "data-rk-abd13c": "", children: [
+      /* @__PURE__ */ a("div", { "data-rk-abd13c": "", children: [
+        /* @__PURE__ */ e("dt", { "data-rk-abd13c": "", children: "Subtotal" }),
+        /* @__PURE__ */ e("dd", { "data-t": "subtotal", "data-rk-abd13c": "", children: "—" })
+      ] }),
+      /* @__PURE__ */ a("div", { "data-discount-row": !0, hidden: !0, "data-rk-abd13c": "", children: [
+        /* @__PURE__ */ a("dt", { "data-rk-abd13c": "", children: [
+          "Discount ",
+          /* @__PURE__ */ e("span", { "data-code": !0, "data-rk-abd13c": "" })
+        ] }),
+        /* @__PURE__ */ e("dd", { "data-t": "discount", "data-rk-abd13c": "", children: "—" })
+      ] }),
+      /* @__PURE__ */ a("div", { "data-rk-abd13c": "", children: [
+        /* @__PURE__ */ e("dt", { "data-rk-abd13c": "", children: "Shipping" }),
+        /* @__PURE__ */ e("dd", { "data-t": "shipping", "data-rk-abd13c": "", children: "—" })
+      ] }),
+      /* @__PURE__ */ a("div", { "data-rk-abd13c": "", children: [
+        /* @__PURE__ */ e("dt", { "data-rk-abd13c": "", children: "Estimated tax" }),
+        /* @__PURE__ */ e("dd", { "data-t": "tax", "data-rk-abd13c": "", children: "—" })
+      ] }),
+      /* @__PURE__ */ a("div", { className: "o-summary__total", "data-rk-abd13c": "", children: [
+        /* @__PURE__ */ e("dt", { "data-rk-abd13c": "", children: "Total" }),
+        /* @__PURE__ */ e("dd", { "data-t": "total", "data-rk-abd13c": "", children: "—" })
+      ] })
+    ] })
+  ] }) });
+}
+function ce(...r) {
+  const o = [], i = (t) => {
+    if (t) {
+      if (typeof t == "string" || typeof t == "number") o.push(String(t));
+      else if (Array.isArray(t)) t.forEach(i);
+      else if (typeof t == "object")
+        for (const [l, y] of Object.entries(t)) y && o.push(l);
+    }
+  };
+  return r.forEach(i), o.join(" ");
+}
+function ye({
+  id: r = "checkout",
+  shippingRates: o = [
+    { id: "standard", label: "Standard", eta: "3–5 business days", price: 6 },
+    { id: "express", label: "Express", eta: "1–2 business days", price: 14 }
+  ],
+  freeShippingThreshold: i = 75,
+  countries: t = [
+    { label: "United States", value: "US" },
+    { label: "Canada", value: "CA" },
+    { label: "United Kingdom", value: "GB" },
+    { label: "Spain", value: "ES" },
+    { label: "Germany", value: "DE" },
+    { label: "France", value: "FR" }
+  ],
+  cartKey: l = "ack-cart",
+  currency: y = "USD",
+  locale: x = "en-US",
+  continueHref: L = "#",
+  demo: E = !0,
+  variant: C = "cards",
+  className: S = ""
+}) {
+  const u = { currency: y, locale: x }, m = R(!1);
+  return U(() => {
+    m.current || (m.current = !0, document.querySelectorAll("[data-checkout]:not([data-bound])").forEach((s) => {
+      var D, F;
+      s.dataset.bound = "";
+      const d = s.querySelector("[data-checkout-form]"), k = s.querySelector("[data-done]"), v = s.querySelector("[data-pay]"), b = s.querySelector("[data-pay-label]"), f = s.querySelector("[data-error]"), h = s.querySelector("[data-card-fields]"), M = s.querySelector("[data-alt-pay]"), N = s.querySelector("[data-first] ~ [data-rate-price]"), $ = J(s.dataset.key);
+      let j = { formatted: "", total: 0 };
+      const q = (N == null ? void 0 : N.textContent) || "";
+      document.addEventListener("ack:totals", (g) => {
+        const p = g.detail;
+        j = p, b.textContent = p.count ? `Pay ${p.formatted}` : "Pay now", N && (N.textContent = p.freeStandard || p.subtotal - p.discount >= Number(s.dataset.free || 0) && Number(s.dataset.free) > 0 ? "Free" : q);
+      }), document.dispatchEvent(new CustomEvent("ack:totals-request"));
+      const A = () => {
+        var c;
+        const p = (((c = d.elements.namedItem("payment")) == null ? void 0 : c.value) || "card") === "card";
+        h.hidden = !p, M.hidden = p, h.querySelectorAll("input").forEach((n) => {
+          n.required = p;
+        });
+      };
+      d.addEventListener("change", (g) => {
+        g.target.name === "payment" && A();
+      }), A(), (D = d.querySelector("[data-cc]")) == null || D.addEventListener("input", (g) => {
+        const p = g.target;
+        p.value = p.value.replace(/\D/g, "").slice(0, 19).replace(/(\d{4})(?=\d)/g, "$1 ");
+      }), (F = d.querySelector("[data-exp]")) == null || F.addEventListener("input", (g) => {
+        const p = g.target, c = p.value.replace(/\D/g, "").slice(0, 4);
+        p.value = c.length > 2 ? `${c.slice(0, 2)}/${c.slice(2)}` : c;
+      }), d.addEventListener("submit", (g) => {
+        var c;
+        if (g.preventDefault(), f.hidden = !0, d.querySelectorAll("[aria-invalid]").forEach((n) => n.removeAttribute("aria-invalid")), !$.items().length) {
+          f.textContent = "Your cart is empty — add a product before checking out.", f.hidden = !1;
+          return;
+        }
+        if (!d.checkValidity()) {
+          const n = Array.from(d.querySelectorAll("input, select")).filter((_) => !_.checkValidity());
+          n.forEach((_) => _.setAttribute("aria-invalid", "true")), f.textContent = `Please check ${n.length === 1 ? "1 field" : `${n.length} fields`} highlighted in red.`, f.hidden = !1, (c = n[0]) == null || c.focus();
+          return;
+        }
+        v.disabled = !0, v.classList.add("is-loading"), b.textContent = "Processing…";
+        const p = () => {
+          var w;
+          const n = `#${Math.floor(1e5 + Math.random() * 9e5)}`, _ = d.elements.namedItem("email").value;
+          s.querySelector("[data-order-id]").textContent = n, s.querySelector("[data-order-email]").textContent = _, s.querySelector("[data-order-total]").textContent = j.formatted, d.hidden = !0, k.hidden = !1, $.clear(), (w = k.querySelector("h2")) == null || w.focus(), document.dispatchEvent(new CustomEvent("ack:order-placed", { detail: { orderId: n, total: j.total } })), window.scrollTo({ top: 0, behavior: "smooth" });
+        };
+        window.setTimeout(p, s.hasAttribute("data-demo") ? 1100 : 0);
+      });
+    }));
+  }, []), /* @__PURE__ */ e(z, { children: /* @__PURE__ */ a("div", { className: ce(["checkout", `checkout--${C}`, S]), "data-checkout": !0, "data-key": l, "data-demo": E ? "" : void 0, "data-free": i, "data-rk-e0a849": "", children: [
+    /* @__PURE__ */ a("form", { className: "checkout__form", id: r, noValidate: !0, "data-checkout-form": !0, "data-rk-e0a849": "", children: [
+      /* @__PURE__ */ a("fieldset", { className: "checkout__section", "data-rk-e0a849": "", children: [
+        /* @__PURE__ */ a("legend", { "data-rk-e0a849": "", children: [
+          /* @__PURE__ */ e("span", { className: "checkout__num", "aria-hidden": "true", "data-rk-e0a849": "", children: "1" }),
+          " Contact"
+        ] }),
+        /* @__PURE__ */ e(T, { label: "Email", id: `${r}-email`, name: "email", type: "email", required: !0, autocomplete: "email" }),
+        /* @__PURE__ */ a("label", { className: "checkout__check", "data-rk-e0a849": "", children: [
+          /* @__PURE__ */ e("input", { type: "checkbox", name: "newsletter", defaultChecked: !0, "data-rk-e0a849": "" }),
+          /* @__PURE__ */ e("span", { className: "checkout__box", "aria-hidden": "true", "data-rk-e0a849": "" }),
+          "Email me with news and offers"
+        ] })
+      ] }),
+      /* @__PURE__ */ a("fieldset", { className: "checkout__section", "data-rk-e0a849": "", children: [
+        /* @__PURE__ */ a("legend", { "data-rk-e0a849": "", children: [
+          /* @__PURE__ */ e("span", { className: "checkout__num", "aria-hidden": "true", "data-rk-e0a849": "", children: "2" }),
+          " Delivery"
+        ] }),
+        /* @__PURE__ */ e(X, { label: "Country / region", id: `${r}-country`, name: "country", options: t, required: !0 }),
+        /* @__PURE__ */ a("div", { className: "checkout__row", "data-rk-e0a849": "", children: [
+          /* @__PURE__ */ e(T, { label: "First name", id: `${r}-first`, name: "firstName", required: !0, autocomplete: "given-name" }),
+          /* @__PURE__ */ e(T, { label: "Last name", id: `${r}-last`, name: "lastName", required: !0, autocomplete: "family-name" })
+        ] }),
+        /* @__PURE__ */ e(T, { label: "Address", id: `${r}-address`, name: "address", required: !0, autocomplete: "address-line1" }),
+        /* @__PURE__ */ e(T, { label: "Apartment, suite (optional)", id: `${r}-address2`, name: "address2", autocomplete: "address-line2" }),
+        /* @__PURE__ */ a("div", { className: "checkout__row checkout__row--3", "data-rk-e0a849": "", children: [
+          /* @__PURE__ */ e(T, { label: "City", id: `${r}-city`, name: "city", required: !0, autocomplete: "address-level2" }),
+          /* @__PURE__ */ e(T, { label: "State", id: `${r}-state`, name: "state", autocomplete: "address-level1" }),
+          /* @__PURE__ */ e(T, { label: "ZIP / Postal", id: `${r}-zip`, name: "zip", required: !0, autocomplete: "postal-code" })
+        ] }),
+        /* @__PURE__ */ e(T, { label: "Phone (for delivery updates)", id: `${r}-phone`, name: "phone", type: "tel", autocomplete: "tel" })
+      ] }),
+      /* @__PURE__ */ a("fieldset", { className: "checkout__section", "data-rk-e0a849": "", children: [
+        /* @__PURE__ */ a("legend", { "data-rk-e0a849": "", children: [
+          /* @__PURE__ */ e("span", { className: "checkout__num", "aria-hidden": "true", "data-rk-e0a849": "", children: "3" }),
+          " Shipping method"
+        ] }),
+        /* @__PURE__ */ e("div", { className: "checkout__rates", "data-rk-e0a849": "", children: o.map((s, d) => /* @__PURE__ */ a("label", { className: "checkout__rate", "data-rk-e0a849": "", children: [
+          /* @__PURE__ */ e("input", { type: "radio", name: "shipping", defaultValue: s.id, defaultChecked: d === 0, "data-price": s.price, "data-first": d === 0 ? "" : void 0, "data-rk-e0a849": "" }),
+          /* @__PURE__ */ e("span", { className: "checkout__rate-dot", "aria-hidden": "true", "data-rk-e0a849": "" }),
+          /* @__PURE__ */ a("span", { className: "checkout__rate-text", "data-rk-e0a849": "", children: [
+            /* @__PURE__ */ e("strong", { "data-rk-e0a849": "", children: s.label }),
+            /* @__PURE__ */ e("span", { "data-rk-e0a849": "", children: s.eta })
+          ] }),
+          /* @__PURE__ */ e("span", { className: "checkout__rate-price", "data-rate-price": !0, "data-rk-e0a849": "", children: s.price === 0 ? "Free" : I(s.price, u) })
+        ] }, d)) })
+      ] }),
+      /* @__PURE__ */ a("fieldset", { className: "checkout__section", "data-rk-e0a849": "", children: [
+        /* @__PURE__ */ a("legend", { "data-rk-e0a849": "", children: [
+          /* @__PURE__ */ e("span", { className: "checkout__num", "aria-hidden": "true", "data-rk-e0a849": "", children: "4" }),
+          " Payment"
+        ] }),
+        /* @__PURE__ */ a("p", { className: "checkout__secure", "data-rk-e0a849": "", children: [
+          /* @__PURE__ */ a("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.4", strokeLinecap: "round", "aria-hidden": "true", "data-rk-e0a849": "", children: [
+            /* @__PURE__ */ e("rect", { x: "4", y: "11", width: "16", height: "10", rx: "2", "data-rk-e0a849": "" }),
+            /* @__PURE__ */ e("path", { d: "M8 11V7a4 4 0 0 1 8 0v4", "data-rk-e0a849": "" })
+          ] }),
+          "All transactions are secure and encrypted."
+        ] }),
+        /* @__PURE__ */ e(ee, { name: "payment", horizontal: !0, options: [
+          { label: "Card", value: "card", checked: !0 },
+          { label: "PayPal", value: "paypal" },
+          { label: "Apple Pay", value: "applepay" }
+        ] }),
+        /* @__PURE__ */ a("div", { className: "checkout__card", "data-card-fields": !0, "data-rk-e0a849": "", children: [
+          /* @__PURE__ */ a("div", { className: "checkout__field", "data-rk-e0a849": "", children: [
+            /* @__PURE__ */ e("label", { htmlFor: `${r}-cc`, "data-rk-e0a849": "", children: "Card number" }),
+            /* @__PURE__ */ e("input", { id: `${r}-cc`, name: "cc", inputMode: "numeric", autoComplete: "cc-number", placeholder: "1234 1234 1234 1234", required: !0, pattern: "[0-9 ]{15,23}", maxLength: 23, "data-cc": !0, "data-rk-e0a849": "" })
+          ] }),
+          /* @__PURE__ */ a("div", { className: "checkout__row", "data-rk-e0a849": "", children: [
+            /* @__PURE__ */ a("div", { className: "checkout__field", "data-rk-e0a849": "", children: [
+              /* @__PURE__ */ e("label", { htmlFor: `${r}-exp`, "data-rk-e0a849": "", children: "Expiry (MM/YY)" }),
+              /* @__PURE__ */ e("input", { id: `${r}-exp`, name: "exp", inputMode: "numeric", autoComplete: "cc-exp", placeholder: "MM/YY", required: !0, pattern: "(0[1-9]|1[0-2])\\\\/[0-9]{2}", maxLength: 5, "data-exp": !0, "data-rk-e0a849": "" })
+            ] }),
+            /* @__PURE__ */ a("div", { className: "checkout__field", "data-rk-e0a849": "", children: [
+              /* @__PURE__ */ e("label", { htmlFor: `${r}-cvc`, "data-rk-e0a849": "", children: "Security code" }),
+              /* @__PURE__ */ e("input", { id: `${r}-cvc`, name: "cvc", inputMode: "numeric", autoComplete: "cc-csc", placeholder: "CVC", required: !0, pattern: "[0-9]{3,4}", maxLength: 4, "data-rk-e0a849": "" })
+            ] })
+          ] }),
+          /* @__PURE__ */ a("div", { className: "checkout__field", "data-rk-e0a849": "", children: [
+            /* @__PURE__ */ e("label", { htmlFor: `${r}-ccname`, "data-rk-e0a849": "", children: "Name on card" }),
+            /* @__PURE__ */ e("input", { id: `${r}-ccname`, name: "ccName", autoComplete: "cc-name", required: !0, "data-rk-e0a849": "" })
+          ] })
+        ] }),
+        /* @__PURE__ */ e("p", { className: "checkout__alt", "data-alt-pay": !0, hidden: !0, "data-rk-e0a849": "", children: "You will be redirected to complete the payment securely." })
+      ] }),
+      /* @__PURE__ */ e("p", { className: "checkout__error", role: "alert", "data-error": !0, hidden: !0, "data-rk-e0a849": "" }),
+      /* @__PURE__ */ a("button", { className: "checkout__pay", type: "submit", "data-pay": !0, "data-rk-e0a849": "", children: [
+        /* @__PURE__ */ e("span", { className: "checkout__spinner", "aria-hidden": "true", "data-rk-e0a849": "" }),
+        /* @__PURE__ */ e("span", { "data-pay-label": !0, "data-rk-e0a849": "", children: "Pay now" })
+      ] }),
+      E && /* @__PURE__ */ a("p", { className: "checkout__demo", "data-rk-e0a849": "", children: [
+        "Demo checkout — no data leaves your browser. Try code ",
+        /* @__PURE__ */ e("strong", { "data-rk-e0a849": "", children: "REACT10" }),
+        "."
+      ] })
+    ] }),
+    /* @__PURE__ */ a("section", { className: "checkout__done", "data-done": !0, hidden: !0, "aria-labelledby": `${r}-done-title`, "data-rk-e0a849": "", children: [
+      /* @__PURE__ */ e(te, { size: 72, color: "var(--c-success, #34d399)" }),
+      /* @__PURE__ */ e("h2", { id: `${r}-done-title`, tabIndex: -1, "data-rk-e0a849": "", children: "Thank you for your order!" }),
+      /* @__PURE__ */ a("p", { "data-rk-e0a849": "", children: [
+        "Order ",
+        /* @__PURE__ */ e("strong", { "data-order-id": !0, "data-rk-e0a849": "", children: "#—" }),
+        " is confirmed. A receipt is on its way to ",
+        /* @__PURE__ */ e("strong", { "data-order-email": !0, "data-rk-e0a849": "", children: "your inbox" }),
+        "."
+      ] }),
+      /* @__PURE__ */ a("p", { className: "checkout__done-total", "data-rk-e0a849": "", children: [
+        "Total paid: ",
+        /* @__PURE__ */ e("strong", { "data-order-total": !0, "data-rk-e0a849": "", children: "—" })
+      ] }),
+      /* @__PURE__ */ e("a", { className: "checkout__pay checkout__pay--link", href: L, "data-rk-e0a849": "", children: "Continue shopping" })
+    ] })
+  ] }) });
+}
+function se(...r) {
+  const o = [], i = (t) => {
+    if (t) {
+      if (typeof t == "string" || typeof t == "number") o.push(String(t));
+      else if (Array.isArray(t)) t.forEach(i);
+      else if (typeof t == "object")
+        for (const [l, y] of Object.entries(t)) y && o.push(l);
+    }
+  };
+  return r.forEach(i), o.join(" ");
+}
+function be({
+  cartKey: r = "ack-cart",
+  position: o = "bottom-right",
+  duration: i = 4500,
+  max: t = 3,
+  addedTitle: l = "Added to cart",
+  actionLabel: y = "View cart",
+  always: x = !1,
+  demo: L = !1,
+  variant: E = "glass",
+  className: C = ""
+}) {
+  const S = R(!1);
+  return U(() => {
+    if (S.current) return;
+    S.current = !0;
+    const u = {
+      success: '<path d="M20 6 9 17l-5-5"/>',
+      info: '<circle cx="12" cy="12" r="9"/><path d="M12 16v-4M12 8h.01"/>',
+      warning: '<path d="M12 9v4M12 17h.01"/><path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z"/>',
+      danger: '<circle cx="12" cy="12" r="9"/><path d="m15 9-6 6M9 9l6 6"/>'
+    };
+    document.querySelectorAll("[data-cart-toasts]:not([data-bound])").forEach((m) => {
+      if (m.dataset.bound = "", m.classList.contains("cart-toasts--demo")) return;
+      const s = Number(m.dataset.duration) || 4500, d = Number(m.dataset.max) || 3, k = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+      function v(b) {
+        var c;
+        const f = u[b.tone || ""] ? b.tone : "info", h = document.createElement("div");
+        h.className = `cart-toast cart-toast--${f}`, h.style.setProperty("--toast-ms", `${s}ms`), h.innerHTML = `<span class="cart-toast__icon" aria-hidden="true"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">${u[f]}</svg></span>`;
+        const M = document.createElement("div");
+        M.className = "cart-toast__body";
+        const N = document.createElement("p");
+        if (N.className = "cart-toast__title", N.textContent = b.title, M.append(N), b.text) {
+          const n = document.createElement("p");
+          n.className = "cart-toast__text", n.textContent = b.text, M.append(n);
+        }
+        if (h.append(M), b.action) {
+          const n = document.createElement("button");
+          n.type = "button", n.className = "cart-toast__action", n.textContent = b.action.label, n.addEventListener("click", () => {
+            b.action.run(), p();
+          }), h.append(n);
+        }
+        const $ = document.createElement("button");
+        $.type = "button", $.className = "cart-toast__close", $.setAttribute("aria-label", "Dismiss notification"), $.textContent = "×", $.addEventListener("click", () => p());
+        const j = document.createElement("span");
+        j.className = "cart-toast__timer", j.setAttribute("aria-hidden", "true"), h.append($, j);
+        let q = s, A = Date.now(), D = window.setTimeout(() => p(), q);
+        const F = () => {
+          window.clearTimeout(D), q -= Date.now() - A, h.classList.add("is-paused");
+        }, g = () => {
+          A = Date.now(), D = window.setTimeout(() => p(), Math.max(800, q)), h.classList.remove("is-paused");
+        };
+        h.addEventListener("mouseenter", F), h.addEventListener("mouseleave", g), h.addEventListener("focusin", F), h.addEventListener("focusout", g);
+        function p() {
+          window.clearTimeout(D), h.isConnected && (h.classList.add("is-leaving"), window.setTimeout(() => h.remove(), k ? 0 : 220));
+        }
+        for (m.append(h); m.children.length > d; ) (c = m.firstElementChild) == null || c.remove();
+      }
+      document.addEventListener(Q, (b) => {
+        const f = b.detail || {};
+        if (f.key && f.key !== m.dataset.key || f.openCart && !m.hasAttribute("data-always")) return;
+        const h = f.item || {};
+        v({
+          title: m.dataset.title || "Added to cart",
+          text: [h.name, h.variant].filter(Boolean).join(" · ") + (h.qty > 1 ? ` × ${h.qty}` : ""),
+          tone: "success",
+          action: {
+            label: m.dataset.action || "View cart",
+            run: () => document.dispatchEvent(new CustomEvent("ack:cart-open", { detail: { key: m.dataset.key } }))
+          }
+        });
+      }), document.addEventListener(Z, (b) => {
+        const f = b.detail || {};
+        f.title && v({ title: f.title, text: f.text, tone: f.tone });
+      });
+    });
+  }, []), /* @__PURE__ */ e(z, { children: /* @__PURE__ */ e("div", { className: se(["cart-toasts", `cart-toasts--${o}`, `cart-toasts--${E}`, { "cart-toasts--demo": L }, C]), role: "status", "aria-live": "polite", "data-cart-toasts": !0, "data-key": r, "data-duration": i, "data-max": t, "data-title": l, "data-action": y, "data-always": x ? "" : void 0, "data-rk-da674f": "", children: L && /* @__PURE__ */ a(z, { children: [
+    /* @__PURE__ */ a("div", { className: "cart-toast cart-toast--success", "data-rk-da674f": "", children: [
+      /* @__PURE__ */ e("span", { className: "cart-toast__icon", "aria-hidden": "true", "data-rk-da674f": "", children: /* @__PURE__ */ e("svg", { viewBox: "0 0 24 24", width: "18", height: "18", fill: "none", stroke: "currentColor", strokeWidth: "2.4", strokeLinecap: "round", strokeLinejoin: "round", "data-rk-da674f": "", children: /* @__PURE__ */ e("path", { d: "M20 6 9 17l-5-5", "data-rk-da674f": "" }) }) }),
+      /* @__PURE__ */ a("div", { className: "cart-toast__body", "data-rk-da674f": "", children: [
+        /* @__PURE__ */ e("p", { className: "cart-toast__title", "data-rk-da674f": "", children: l }),
+        /* @__PURE__ */ e("p", { className: "cart-toast__text", "data-rk-da674f": "", children: "Aurora Wireless Headphones · Graphite" })
+      ] }),
+      /* @__PURE__ */ e("button", { className: "cart-toast__action", type: "button", "data-rk-da674f": "", children: y }),
+      /* @__PURE__ */ e("button", { className: "cart-toast__close", type: "button", "aria-label": "Dismiss", "data-rk-da674f": "", children: "×" }),
+      /* @__PURE__ */ e("span", { className: "cart-toast__timer", "aria-hidden": "true", "data-rk-da674f": "" })
+    ] }),
+    /* @__PURE__ */ a("div", { className: "cart-toast cart-toast--warning", "data-rk-da674f": "", children: [
+      /* @__PURE__ */ e("span", { className: "cart-toast__icon", "aria-hidden": "true", "data-rk-da674f": "", children: /* @__PURE__ */ a("svg", { viewBox: "0 0 24 24", width: "18", height: "18", fill: "none", stroke: "currentColor", strokeWidth: "2.4", strokeLinecap: "round", strokeLinejoin: "round", "data-rk-da674f": "", children: [
+        /* @__PURE__ */ e("path", { d: "M12 9v4M12 17h.01", "data-rk-da674f": "" }),
+        /* @__PURE__ */ e("path", { d: "M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z", "data-rk-da674f": "" })
+      ] }) }),
+      /* @__PURE__ */ a("div", { className: "cart-toast__body", "data-rk-da674f": "", children: [
+        /* @__PURE__ */ e("p", { className: "cart-toast__title", "data-rk-da674f": "", children: "Only 2 left in stock" }),
+        /* @__PURE__ */ e("p", { className: "cart-toast__text", "data-rk-da674f": "", children: "Drift Everyday Sneakers · size 42" })
+      ] }),
+      /* @__PURE__ */ e("button", { className: "cart-toast__close", type: "button", "aria-label": "Dismiss", "data-rk-da674f": "", children: "×" })
+    ] })
+  ] }) }) });
+}
+export {
+  be as C,
+  fe as O,
+  ke as S,
+  pe as V,
+  ye as a
+};