@loczer/storefront-sdk 0.181.0 → 0.182.0

package/dist/pages/ProductPage.js

@@ -1,255 +1,337 @@
-import { jsx as t, jsxs as r } from "react/jsx-runtime";
-import { useMemo as b, useState as k, useEffect as O } from "react";
-import { useParams as _t, useSearchParams as St, useLocation as kt, useNavigate as wt, Link as tt } from "@rpcbase/router";
-import { cn as w } from "@rpcbase/ui";
-import { ArrowLeft as at, ArrowRight as R, Bike as It, CheckCircle2 as Pt } from "lucide-react";
-import { useTranslation as Vt } from "react-i18next";
-import { apiPost as At } from "../lib/apiCall.js";
-import { getAvailabilityVariant as Ct } from "../lib/utils.js";
-import { resolveBookingSearchParamsFromSessionStorage as Lt, getBookingParamsFromSearch as Bt, writeBookingSearchParamsToSessionStorage as Tt } from "../lib/booking.js";
-import { getLocalizedValue as I } from "../localization.js";
-import { Badge as et } from "../ui/badge.js";
-import { Button as v } from "../ui/button.js";
-import { Card as Ot } from "../ui/card.js";
-import { Input as Rt } from "../ui/input.js";
-import { RadioGroup as $t, RadioGroupItem as Ft } from "../ui/radio-group.js";
-import { useStorefrontCart as zt } from "../lib/cart.js";
-import { findStorefrontProductBySlug as jt, getStorefrontCheckoutProductId as P } from "../lib/products.js";
-import { getValidStorefrontAvailabilitySchedule as Mt, ROUTE as Kt, responseSchema as Et, buildStorefrontAvailabilityKey as d, getStorefrontAvailabilityStatus as it, isStorefrontAvailabilityInsufficient as rt, getStorefrontAvailabilityIssue as qt } from "../lib/storefrontAvailability.js";
-import { getProductVariantAttributeValue as Gt, getStorefrontProductVariantDisplay as Ut } from "../lib/productVariants.js";
-import { resolveProductImageContainerStyle as Wt } from "../lib/productImageStyles.js";
-import { useStorefront as Dt, useStorefrontProducts as Qt } from "../StorefrontProvider.js";
-import { ProductPriceBadge as Ht } from "../components/ProductPriceBadge/index.js";
-import { ProductWarningNotice as Jt } from "../components/ProductWarningNotice/index.js";
-const st = (a, s = () => !0) => {
-  if (!a) return null;
-  if (a.representedVariantId?.trim()) return a.representedVariantId.trim();
-  const e = a.productVariants ?? [];
-  return e.find((o) => s(o.id))?.id ?? e[0]?.id ?? null;
-}, Xt = (a, s) => {
-  if (!a) return [];
-  const e = P(a), l = /* @__PURE__ */ new Map();
-  l.set(d(e), { productId: e, quantity: s });
-  for (const x of a.productVariants ?? [])
-    l.set(d(e, x.id), {
-      productId: e,
-      productVariantId: x.id,
-      quantity: s
-    });
-  const o = a.representedVariantId?.trim();
-  return o && l.set(d(e, o), {
-    productId: e,
-    productVariantId: o,
-    quantity: s
-  }), Array.from(l.values());
-}, Yt = (a, s) => {
-  const e = P(a), l = a.representedVariantId?.trim();
-  if (l) {
-    const o = s.get(d(e, l));
-    if (o) return o;
-  }
-  return s.get(d(e));
-}, Zt = (a, s, e) => e.get(d(P(a), s)), nt = (a, s, e) => {
-  const l = qt(s);
-  return l === "quantity_unavailable" ? a("availability_quantity_unavailable") : l === "unavailable" || e === "OUT_OF_STOCK" ? a("availability_out_of_stock") : s?.remaining !== void 0 ? a("availability_remaining_count", { count: s.remaining }) : s?.fewRemaining || e === "LOW_STOCK" ? a("availability_low_stock") : a("availability_in_stock");
-}, ta = (a) => "availabilityStatus" in a ? a.availabilityStatus ?? "AVAILABLE" : "AVAILABLE";
-function ka() {
-  const { t: a, i18n: s } = Vt(), { storeSlug: e, productSlug: l } = _t(), [o] = St(), x = kt(), lt = wt(), { addItem: ot, itemCount: $ } = zt(), { storefrontConfiguration: ct } = Dt(), y = ct.workspace?.workspaceLanguage, { bikes: F, accessories: z } = Qt(), i = b(
-    () => l ? jt(l, { bikes: F, accessories: z }) : null,
-    [z, F, l]
-  ), u = b(
-    () => Lt(o, e),
-    [o, e]
-  ), p = b(() => Bt(u), [u]), j = u.toString(), M = `/${e ?? ""}/checkout${j ? `?${j}` : ""}`, K = `/${e ?? ""}`, dt = K, V = x.state, mt = typeof V?.backTo == "string" && V.backTo.startsWith(K) ? V.backTo : dt, [A, E] = k(1), [m, C] = k(() => st(i)), L = Number.isFinite(A) ? Math.max(1, Math.min(99, Math.floor(A))) : 1, B = b(
-    () => Xt(i, L),
-    [L, i]
-  ), [q, N] = k([]), [ut, _] = k(!1);
-  O(() => {
-    if (E(1), !i) {
-      C(null);
-      return;
-    }
-    C(st(i));
-  }, [l, i]), O(() => {
-    Tt(e, u);
-  }, [u, e]), O(() => {
-    if (!e || B.length === 0) {
-      N([]), _(!1);
-      return;
-    }
-    const n = Mt(p);
-    if (!n) {
-      _(!1);
-      return;
-    }
-    let c = !1;
-    return _(!0), N([]), (async () => {
-      try {
-        const f = await At(
-          Kt,
-          {
-            storeSlug: e,
-            schedule: n,
-            products: B
-          }
-        ), S = Et.parse(f);
-        if (c) return;
-        N(S.success ? S.availability ?? [] : []);
-      } catch (f) {
-        if (c) return;
-        console.error("Failed to load storefront product availability", f), N([]);
-      } finally {
-        c || _(!1);
-      }
-    })(), () => {
-      c = !0;
-    };
-  }, [
-    B,
-    p.end_date,
-    p.end_time,
-    p.start_date,
-    p.start_time,
-    e
-  ]);
-  const G = b(() => new Map(
-    q.map((n) => [
-      d(n.productId, n.productVariantId),
-      n
-    ])
-  ), [q]), U = () => {
-    lt(mt);
-  };
-  if (!i)
-    return /* @__PURE__ */ t("div", { className: "mx-auto max-w-3xl px-4 py-10 sm:px-6", children: /* @__PURE__ */ r("div", { className: "rounded-xl border border-slate-200 bg-white p-4 shadow-sm", children: [
-      /* @__PURE__ */ t("h1", { className: "text-xl font-semibold tracking-tight text-slate-950", children: /* @__PURE__ */ t("span", { children: a("product_not_found_title") }) }),
-      /* @__PURE__ */ t("p", { className: "mt-2 text-sm text-slate-600", children: /* @__PURE__ */ t("span", { children: a("product_not_found_description") }) }),
-      /* @__PURE__ */ t("div", { className: "mt-6", children: /* @__PURE__ */ r(v, { type: "button", className: "gap-2", onClick: U, children: [
-        /* @__PURE__ */ t(at, { className: "h-4 w-4", "aria-hidden": "true" }),
-        /* @__PURE__ */ t("span", { children: a("go_back") })
-      ] }) })
-    ] }) });
-  const W = I(i.name, s.language, y), pt = I(i.description, s.language, y), ht = I(i.warning, s.language, y), D = typeof i.images?.[0] == "string" ? i.images[0].trim() : "", Q = Wt(i.primaryImageStyle), h = Yt(i, G), H = ta(i), J = h ? it(h) : H, ft = Ct(J), gt = ut ? a("availability_checking") : nt(a, h, J), X = h ? rt(h) : H === "OUT_OF_STOCK", T = i.productVariants ?? [], bt = T.some((n) => !!Gt(n, "size")), vt = a(bt ? "product_size_label" : "product_variant_label"), xt = !!m, yt = () => {
-    m && ot({
-      kind: i.kind,
-      productId: P(i),
-      ...m ? { productVariantId: m } : {},
-      quantity: L
-    });
-  };
-  return /* @__PURE__ */ t("div", { className: "mx-auto max-w-7xl px-4 py-8 sm:px-6", children: /* @__PURE__ */ r("div", { className: "flex flex-col gap-6", children: [
-    /* @__PURE__ */ r("div", { className: "flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between", children: [
-      /* @__PURE__ */ r(
-        v,
-        {
-          type: "button",
-          variant: "ghost",
-          className: "h-auto justify-start gap-2 self-start px-0 text-sm font-medium text-slate-700 hover:bg-transparent hover:text-slate-950",
-          onClick: U,
-          children: [
-            /* @__PURE__ */ t(at, { className: "h-4 w-4", "aria-hidden": "true" }),
-            /* @__PURE__ */ t("span", { children: a("go_back") })
-          ]
-        }
-      ),
-      /* @__PURE__ */ t(tt, { to: M, className: w($ > 0 ? "inline-flex" : "hidden"), children: /* @__PURE__ */ r(v, { size: "sm", className: "gap-2", children: [
-        /* @__PURE__ */ t("span", { children: a("checkout_button") }),
-        /* @__PURE__ */ t(R, { className: "h-4 w-4", "aria-hidden": "true" })
-      ] }) })
-    ] }),
-    /* @__PURE__ */ r("div", { className: "grid gap-6 lg:grid-cols-12", children: [
-      /* @__PURE__ */ r("div", { className: "lg:col-span-7", children: [
-        /* @__PURE__ */ t(
-          "div",
-          {
-            className: w("relative aspect-[1618/1000] overflow-hidden rounded-2xl", Q.className),
-            style: Q.style,
-            children: D ? /* @__PURE__ */ t(
-              "img",
-              {
-                src: D,
-                alt: W,
-                className: "absolute inset-0 h-full w-full object-contain p-2",
-                loading: "lazy"
-              }
-            ) : /* @__PURE__ */ t("div", { className: "absolute inset-0 flex items-center justify-center text-slate-400", children: /* @__PURE__ */ t(It, { className: "h-12 w-12", "aria-hidden": "true" }) })
-          }
-        ),
-        /* @__PURE__ */ r("div", { className: "mt-5 flex flex-col gap-3", children: [
-          /* @__PURE__ */ r("div", { className: "flex flex-wrap items-center gap-2", children: [
-            /* @__PURE__ */ t(et, { variant: ft.variant, children: /* @__PURE__ */ t("span", { children: gt }) }),
-            /* @__PURE__ */ t(Ht, { prices: i.prices })
-          ] }),
-          /* @__PURE__ */ t("h1", { className: "text-2xl font-semibold tracking-tight text-slate-950", children: /* @__PURE__ */ t("span", { children: W }) }),
-          /* @__PURE__ */ t("p", { className: "text-sm text-slate-600", children: /* @__PURE__ */ t("span", { children: pt }) }),
-          i.features?.length ? /* @__PURE__ */ r("div", { className: "mt-2 space-y-2", children: [
-            /* @__PURE__ */ t("p", { className: "text-sm font-semibold text-slate-950", children: /* @__PURE__ */ t("span", { children: a("product_features_title") }) }),
-            /* @__PURE__ */ t("ul", { className: "grid gap-1 text-sm text-slate-700", children: i.features.map((n, c) => /* @__PURE__ */ r("li", { className: "inline-flex items-start gap-2", children: [
-              /* @__PURE__ */ t(Pt, { className: "mt-0.5 h-4 w-4 text-success", "aria-hidden": "true" }),
-              /* @__PURE__ */ t("span", { children: I(n, s.language, y) })
-            ] }, `${i.id}-${c}`)) })
-          ] }) : null,
-          /* @__PURE__ */ t(Jt, { warning: ht })
-        ] })
-      ] }),
-      /* @__PURE__ */ t("div", { className: "lg:col-span-5", children: /* @__PURE__ */ r(Ot, { className: "border-slate-200 bg-white shadow-sm", children: [
-        /* @__PURE__ */ r("div", { className: "border-b border-slate-200 px-4 py-4", children: [
-          /* @__PURE__ */ t("p", { className: "text-sm font-semibold text-slate-950", children: /* @__PURE__ */ t("span", { children: a("add_to_cart_title") }) }),
-          /* @__PURE__ */ t("p", { className: "mt-1 text-xs text-slate-600", children: /* @__PURE__ */ t("span", { children: a("add_to_cart_description") }) })
-        ] }),
-        /* @__PURE__ */ r("div", { className: "grid gap-4 px-4 py-4", children: [
-          T.length > 1 ? /* @__PURE__ */ r("div", { className: "grid gap-2", children: [
-            /* @__PURE__ */ t("p", { className: "text-xs font-medium text-slate-700", children: /* @__PURE__ */ t("span", { children: vt }) }),
-            /* @__PURE__ */ t($t, { value: m ?? "", onValueChange: C, className: "grid gap-2", children: T.map((n) => {
-              const c = `variant-${i.id}-${n.id}`.toLowerCase(), f = `storefront-product-variant-option-${i.id}-${n.id}`.toLowerCase(), { label: S, description: Y } = Ut(n), g = Zt(i, n.id, G), Nt = g ? rt(g) : X, Z = g ? nt(a, g, it(g)) : X ? a("availability_out_of_stock") : null;
-              return /* @__PURE__ */ r(
-                "label",
-                {
-                  htmlFor: c,
-                  "data-testid": f,
-                  className: w(
-                    "flex items-start gap-3 rounded-xl border p-3 transition",
-                    m === n.id ? "border-slate-900 bg-slate-50" : "border-slate-200 bg-white"
-                  ),
-                  children: [
-                    /* @__PURE__ */ t(Ft, { id: c, value: n.id, className: "mt-1" }),
-                    /* @__PURE__ */ r("span", { className: "flex flex-1 flex-col gap-0.5", children: [
-                      /* @__PURE__ */ t("span", { className: "text-sm font-medium text-slate-950", children: S }),
-                      Y ? /* @__PURE__ */ t("span", { className: "text-xs text-slate-600", children: Y }) : null,
-                      Z ? /* @__PURE__ */ t("span", { className: "pt-1", children: /* @__PURE__ */ t(et, { variant: Nt ? "destructive" : "outline", children: /* @__PURE__ */ t("span", { children: Z }) }) }) : null
-                    ] })
-                  ]
-                },
-                c
-              );
-            }) })
-          ] }) : null,
-          /* @__PURE__ */ r("div", { className: "grid gap-2", children: [
-            /* @__PURE__ */ t("p", { className: "text-xs font-medium text-slate-700", children: /* @__PURE__ */ t("span", { children: a("quantity_label") }) }),
-            /* @__PURE__ */ t(
-              Rt,
-              {
-                type: "number",
-                min: 1,
-                max: 99,
-                value: A,
-                onChange: (n) => E(Number(n.target.value))
-              }
-            )
-          ] }),
-          /* @__PURE__ */ r(v, { className: "h-11 rounded-xl text-sm font-semibold gap-2", onClick: yt, disabled: !xt, children: [
-            /* @__PURE__ */ t("span", { children: a("add_to_cart") }),
-            /* @__PURE__ */ t(R, { className: "h-4 w-4", "aria-hidden": "true" })
-          ] }),
-          /* @__PURE__ */ t(tt, { to: M, className: w($ > 0 ? "block" : "hidden"), children: /* @__PURE__ */ r(v, { variant: "outline", className: "h-11 w-full rounded-xl gap-2", children: [
-            /* @__PURE__ */ t("span", { children: a("go_to_checkout") }),
-            /* @__PURE__ */ t(R, { className: "h-4 w-4", "aria-hidden": "true" })
-          ] }) })
-        ] })
-      ] }) })
-    ] })
-  ] }) });
+import { getBookingParamsFromSearch as e, resolveBookingSearchParamsFromSessionStorage as t, writeBookingSearchParamsToSessionStorage as n } from "../lib/booking.js";
+import { useStorefrontCart as r } from "../lib/cart.js";
+import { getProductVariantAttributeValue as i, getStorefrontProductVariantDisplay as ee } from "../lib/productVariants.js";
+import { findStorefrontProductBySlug as a, getStorefrontCheckoutProductId as o } from "../lib/products.js";
+import { getAvailabilityVariant as s } from "../lib/utils.js";
+import { getLocalizedValue as c } from "../localization.js";
+import { ROUTE as te, buildStorefrontAvailabilityKey as l, getStorefrontAvailabilityIssue as u, getStorefrontAvailabilityStatus as d, getValidStorefrontAvailabilitySchedule as ne, isStorefrontAvailabilityInsufficient as f, responseSchema as re } from "../lib/storefrontAvailability.js";
+import { Badge as ie } from "../ui/badge.js";
+import { Button as p } from "../ui/button.js";
+import { Input as ae } from "../ui/input.js";
+import { useStorefront as oe, useStorefrontProducts as se } from "../StorefrontProvider.js";
+import { Card as ce } from "../ui/card.js";
+import { ProductWarningNotice as le } from "../components/ProductWarningNotice/index.js";
+import { ProductPriceBadge as ue } from "../components/ProductPriceBadge/index.js";
+import { resolveProductImageContainerStyle as de } from "../lib/productImageStyles.js";
+import { apiPost as fe } from "../lib/apiCall.js";
+import { RadioGroup as pe, RadioGroupItem as me } from "../ui/radio-group.js";
+import { useEffect as m, useMemo as h, useState as g } from "react";
+import { jsx as _, jsxs as v } from "react/jsx-runtime";
+import { cn as y } from "@rpcbase/ui";
+import { Link as he, useLocation as ge, useNavigate as _e, useParams as ve, useSearchParams as ye } from "@rpcbase/router";
+import { useTranslation as be } from "react-i18next";
+import { ArrowLeft as b, ArrowRight as x, Bike as xe, CheckCircle2 as Se } from "lucide-react";
+//#region src/pages/ProductPage.tsx
+var S = (e, t = () => !0) => {
+	if (!e) return null;
+	if (e.representedVariantId?.trim()) return e.representedVariantId.trim();
+	let n = e.productVariants ?? [];
+	return n.find((e) => t(e.id))?.id ?? n[0]?.id ?? null;
+}, Ce = (e, t) => {
+	if (!e) return [];
+	let n = o(e), r = /* @__PURE__ */ new Map();
+	r.set(l(n), {
+		productId: n,
+		quantity: t
+	});
+	for (let i of e.productVariants ?? []) r.set(l(n, i.id), {
+		productId: n,
+		productVariantId: i.id,
+		quantity: t
+	});
+	let i = e.representedVariantId?.trim();
+	return i && r.set(l(n, i), {
+		productId: n,
+		productVariantId: i,
+		quantity: t
+	}), Array.from(r.values());
+}, we = (e, t) => {
+	let n = o(e), r = e.representedVariantId?.trim();
+	if (r) {
+		let e = t.get(l(n, r));
+		if (e) return e;
+	}
+	return t.get(l(n));
+}, Te = (e, t, n) => n.get(l(o(e), t)), C = (e, t, n) => {
+	let r = u(t);
+	return r === "quantity_unavailable" ? e("availability_quantity_unavailable") : r === "unavailable" || n === "OUT_OF_STOCK" ? e("availability_out_of_stock") : t?.remaining === void 0 ? t?.fewRemaining || n === "LOW_STOCK" ? e("availability_low_stock") : e("availability_in_stock") : e("availability_remaining_count", { count: t.remaining });
+}, Ee = (e) => "availabilityStatus" in e ? e.availabilityStatus ?? "AVAILABLE" : "AVAILABLE";
+function w() {
+	let { t: u, i18n: w } = be(), { storeSlug: T, productSlug: E } = ve(), [D] = ye(), De = ge(), Oe = _e(), { addItem: ke, itemCount: O } = r(), { storefrontConfiguration: Ae } = oe(), k = Ae.workspace?.workspaceLanguage, { bikes: A, accessories: j } = se(), M = h(() => E ? a(E, {
+		bikes: A,
+		accessories: j
+	}) : null, [
+		j,
+		A,
+		E
+	]), N = h(() => t(D, T), [D, T]), P = h(() => e(N), [N]), F = N.toString(), I = `/${T ?? ""}/checkout${F ? `?${F}` : ""}`, L = `/${T ?? ""}`, je = L, R = De.state, Me = typeof R?.backTo == "string" && R.backTo.startsWith(L) ? R.backTo : je, [z, B] = g(1), [V, H] = g(() => S(M)), U = Number.isFinite(z) ? Math.max(1, Math.min(99, Math.floor(z))) : 1, W = h(() => Ce(M, U), [U, M]), [G, K] = g([]), [Ne, q] = g(!1);
+	m(() => {
+		if (B(1), !M) {
+			H(null);
+			return;
+		}
+		H(S(M));
+	}, [E, M]), m(() => {
+		n(T, N);
+	}, [N, T]), m(() => {
+		if (!T || W.length === 0) {
+			K([]), q(!1);
+			return;
+		}
+		let e = ne(P);
+		if (!e) {
+			q(!1);
+			return;
+		}
+		let t = !1;
+		return q(!0), K([]), (async () => {
+			try {
+				let n = await fe(te, {
+					storeSlug: T,
+					schedule: e,
+					products: W
+				}), r = re.parse(n);
+				if (t) return;
+				K(r.success ? r.availability ?? [] : []);
+			} catch (e) {
+				if (t) return;
+				console.error("Failed to load storefront product availability", e), K([]);
+			} finally {
+				t || q(!1);
+			}
+		})(), () => {
+			t = !0;
+		};
+	}, [
+		W,
+		P.end_date,
+		P.end_time,
+		P.start_date,
+		P.start_time,
+		T
+	]);
+	let J = h(() => new Map(G.map((e) => [l(e.productId, e.productVariantId), e])), [G]), Y = () => {
+		Oe(Me);
+	};
+	if (!M) return /* @__PURE__ */ _("div", {
+		className: "mx-auto max-w-3xl px-4 py-10 sm:px-6",
+		children: /* @__PURE__ */ v("div", {
+			className: "rounded-xl border border-slate-200 bg-white p-4 shadow-sm",
+			children: [
+				/* @__PURE__ */ _("h1", {
+					className: "text-xl font-semibold tracking-tight text-slate-950",
+					children: /* @__PURE__ */ _("span", { children: u("product_not_found_title") })
+				}),
+				/* @__PURE__ */ _("p", {
+					className: "mt-2 text-sm text-slate-600",
+					children: /* @__PURE__ */ _("span", { children: u("product_not_found_description") })
+				}),
+				/* @__PURE__ */ _("div", {
+					className: "mt-6",
+					children: /* @__PURE__ */ v(p, {
+						type: "button",
+						className: "gap-2",
+						onClick: Y,
+						children: [/* @__PURE__ */ _(b, {
+							className: "h-4 w-4",
+							"aria-hidden": "true"
+						}), /* @__PURE__ */ _("span", { children: u("go_back") })]
+					})
+				})
+			]
+		})
+	});
+	let Pe = c(M.name, w.language, k), Fe = c(M.description, w.language, k), Ie = c(M.warning, w.language, k), Le = typeof M.images?.[0] == "string" ? M.images[0].trim() : "", X = de(M.primaryImageStyle), Z = we(M, J), Re = Ee(M), ze = Z ? d(Z) : Re, Be = s(ze), Ve = Ne ? u("availability_checking") : C(u, Z, ze), Q = Z ? f(Z) : Re === "OUT_OF_STOCK", $ = M.productVariants ?? [], He = $.some((e) => !!i(e, "size")) ? u("product_size_label") : u("product_variant_label"), Ue = !!V;
+	return /* @__PURE__ */ _("div", {
+		className: "mx-auto max-w-7xl px-4 py-8 sm:px-6",
+		children: /* @__PURE__ */ v("div", {
+			className: "flex flex-col gap-6",
+			children: [/* @__PURE__ */ v("div", {
+				className: "flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between",
+				children: [/* @__PURE__ */ v(p, {
+					type: "button",
+					variant: "ghost",
+					className: "h-auto justify-start gap-2 self-start px-0 text-sm font-medium text-slate-700 hover:bg-transparent hover:text-slate-950",
+					onClick: Y,
+					children: [/* @__PURE__ */ _(b, {
+						className: "h-4 w-4",
+						"aria-hidden": "true"
+					}), /* @__PURE__ */ _("span", { children: u("go_back") })]
+				}), /* @__PURE__ */ _(he, {
+					to: I,
+					className: y(O > 0 ? "inline-flex" : "hidden"),
+					children: /* @__PURE__ */ v(p, {
+						size: "sm",
+						className: "gap-2",
+						children: [/* @__PURE__ */ _("span", { children: u("checkout_button") }), /* @__PURE__ */ _(x, {
+							className: "h-4 w-4",
+							"aria-hidden": "true"
+						})]
+					})
+				})]
+			}), /* @__PURE__ */ v("div", {
+				className: "grid gap-6 lg:grid-cols-12",
+				children: [/* @__PURE__ */ v("div", {
+					className: "lg:col-span-7",
+					children: [/* @__PURE__ */ _("div", {
+						className: y("relative aspect-[1618/1000] overflow-hidden rounded-2xl", X.className),
+						style: X.style,
+						children: Le ? /* @__PURE__ */ _("img", {
+							src: Le,
+							alt: Pe,
+							className: "absolute inset-0 h-full w-full object-contain p-2",
+							loading: "lazy"
+						}) : /* @__PURE__ */ _("div", {
+							className: "absolute inset-0 flex items-center justify-center text-slate-400",
+							children: /* @__PURE__ */ _(xe, {
+								className: "h-12 w-12",
+								"aria-hidden": "true"
+							})
+						})
+					}), /* @__PURE__ */ v("div", {
+						className: "mt-5 flex flex-col gap-3",
+						children: [
+							/* @__PURE__ */ v("div", {
+								className: "flex flex-wrap items-center gap-2",
+								children: [/* @__PURE__ */ _(ie, {
+									variant: Be.variant,
+									children: /* @__PURE__ */ _("span", { children: Ve })
+								}), /* @__PURE__ */ _(ue, { prices: M.prices })]
+							}),
+							/* @__PURE__ */ _("h1", {
+								className: "text-2xl font-semibold tracking-tight text-slate-950",
+								children: /* @__PURE__ */ _("span", { children: Pe })
+							}),
+							/* @__PURE__ */ _("p", {
+								className: "text-sm text-slate-600",
+								children: /* @__PURE__ */ _("span", { children: Fe })
+							}),
+							M.features?.length ? /* @__PURE__ */ v("div", {
+								className: "mt-2 space-y-2",
+								children: [/* @__PURE__ */ _("p", {
+									className: "text-sm font-semibold text-slate-950",
+									children: /* @__PURE__ */ _("span", { children: u("product_features_title") })
+								}), /* @__PURE__ */ _("ul", {
+									className: "grid gap-1 text-sm text-slate-700",
+									children: M.features.map((e, t) => /* @__PURE__ */ v("li", {
+										className: "inline-flex items-start gap-2",
+										children: [/* @__PURE__ */ _(Se, {
+											className: "mt-0.5 h-4 w-4 text-success",
+											"aria-hidden": "true"
+										}), /* @__PURE__ */ _("span", { children: c(e, w.language, k) })]
+									}, `${M.id}-${t}`))
+								})]
+							}) : null,
+							/* @__PURE__ */ _(le, { warning: Ie })
+						]
+					})]
+				}), /* @__PURE__ */ _("div", {
+					className: "lg:col-span-5",
+					children: /* @__PURE__ */ v(ce, {
+						className: "border-slate-200 bg-white shadow-sm",
+						children: [/* @__PURE__ */ v("div", {
+							className: "border-b border-slate-200 px-4 py-4",
+							children: [/* @__PURE__ */ _("p", {
+								className: "text-sm font-semibold text-slate-950",
+								children: /* @__PURE__ */ _("span", { children: u("add_to_cart_title") })
+							}), /* @__PURE__ */ _("p", {
+								className: "mt-1 text-xs text-slate-600",
+								children: /* @__PURE__ */ _("span", { children: u("add_to_cart_description") })
+							})]
+						}), /* @__PURE__ */ v("div", {
+							className: "grid gap-4 px-4 py-4",
+							children: [
+								$.length > 1 ? /* @__PURE__ */ v("div", {
+									className: "grid gap-2",
+									children: [/* @__PURE__ */ _("p", {
+										className: "text-xs font-medium text-slate-700",
+										children: /* @__PURE__ */ _("span", { children: He })
+									}), /* @__PURE__ */ _(pe, {
+										value: V ?? "",
+										onValueChange: H,
+										className: "grid gap-2",
+										children: $.map((e) => {
+											let t = `variant-${M.id}-${e.id}`.toLowerCase(), n = `storefront-product-variant-option-${M.id}-${e.id}`.toLowerCase(), { label: r, description: i } = ee(e), a = Te(M, e.id, J), o = a ? f(a) : Q, s = a ? C(u, a, d(a)) : Q ? u("availability_out_of_stock") : null;
+											return /* @__PURE__ */ v("label", {
+												htmlFor: t,
+												"data-testid": n,
+												className: y("flex items-start gap-3 rounded-xl border p-3 transition", V === e.id ? "border-slate-900 bg-slate-50" : "border-slate-200 bg-white"),
+												children: [/* @__PURE__ */ _(me, {
+													id: t,
+													value: e.id,
+													className: "mt-1"
+												}), /* @__PURE__ */ v("span", {
+													className: "flex flex-1 flex-col gap-0.5",
+													children: [
+														/* @__PURE__ */ _("span", {
+															className: "text-sm font-medium text-slate-950",
+															children: r
+														}),
+														i ? /* @__PURE__ */ _("span", {
+															className: "text-xs text-slate-600",
+															children: i
+														}) : null,
+														s ? /* @__PURE__ */ _("span", {
+															className: "pt-1",
+															children: /* @__PURE__ */ _(ie, {
+																variant: o ? "destructive" : "outline",
+																children: /* @__PURE__ */ _("span", { children: s })
+															})
+														}) : null
+													]
+												})]
+											}, t);
+										})
+									})]
+								}) : null,
+								/* @__PURE__ */ v("div", {
+									className: "grid gap-2",
+									children: [/* @__PURE__ */ _("p", {
+										className: "text-xs font-medium text-slate-700",
+										children: /* @__PURE__ */ _("span", { children: u("quantity_label") })
+									}), /* @__PURE__ */ _(ae, {
+										type: "number",
+										min: 1,
+										max: 99,
+										value: z,
+										onChange: (e) => B(Number(e.target.value))
+									})]
+								}),
+								/* @__PURE__ */ v(p, {
+									className: "h-11 rounded-xl text-sm font-semibold gap-2",
+									onClick: () => {
+										V && ke({
+											kind: M.kind,
+											productId: o(M),
+											...V ? { productVariantId: V } : {},
+											quantity: U
+										});
+									},
+									disabled: !Ue,
+									children: [/* @__PURE__ */ _("span", { children: u("add_to_cart") }), /* @__PURE__ */ _(x, {
+										className: "h-4 w-4",
+										"aria-hidden": "true"
+									})]
+								}),
+								/* @__PURE__ */ _(he, {
+									to: I,
+									className: y(O > 0 ? "block" : "hidden"),
+									children: /* @__PURE__ */ v(p, {
+										variant: "outline",
+										className: "h-11 w-full rounded-xl gap-2",
+										children: [/* @__PURE__ */ _("span", { children: u("go_to_checkout") }), /* @__PURE__ */ _(x, {
+											className: "h-4 w-4",
+											"aria-hidden": "true"
+										})]
+									})
+								})
+							]
+						})]
+					})
+				})]
+			})]
+		})
+	});
 }
-export {
-  ka as default
-};
+//#endregion
+export { w as default };