@godaddy/gd-commerce-storefront 0.1.0

package/dist/index.js

@@ -0,0 +1,1184 @@
+import * as Dialog from "@radix-ui/react-dialog";
+import { createContext, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
+import { Link, useParams, useSearchParams } from "react-router";
+import { useQuery } from "@tanstack/react-query";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/api.ts
+var CartIdStorage = class {
+	currentId = null;
+	pendingWrite = false;
+	constructor(key) {
+		this.key = key;
+	}
+	read() {
+		if (this.pendingWrite) return this.currentId;
+		return localStorage.getItem(this.key);
+	}
+	write(id) {
+		this.currentId = id;
+		this.pendingWrite = true;
+		if (id) localStorage.setItem(this.key, id);
+		else localStorage.removeItem(this.key);
+		this.pendingWrite = false;
+	}
+};
+var ApiError = class extends Error {
+	constructor(message$1, status, options) {
+		super(message$1, options);
+		this.status = status;
+	}
+};
+const checkedFetch = async (input, init) => {
+	const response = await fetch(input, init);
+	if (!response.ok) {
+		const data = await response.text();
+		const parsed = (() => {
+			try {
+				return JSON.parse(data);
+			} catch (cause) {
+				throw new ApiError(`Commerce request failed (${response.status}). Please retry.`, response.status, { cause });
+			}
+		})();
+		throw new ApiError(typeof parsed === "object" && parsed !== null && "error" in parsed && typeof parsed.error === "string" ? parsed.error : "Commerce request failed. Please retry.", response.status);
+	}
+	return response;
+};
+async function request(path, init) {
+	const headers = new Headers(init?.headers);
+	if (init?.body && !headers.has("Content-Type")) headers.set("Content-Type", "application/json");
+	const timeout = !init?.method || init.method.toUpperCase() === "GET" ? AbortSignal.timeout(15e3) : void 0;
+	const signal = timeout ? AbortSignal.any([timeout, ...init?.signal ? [init.signal] : []]) : init?.signal;
+	try {
+		return await (await checkedFetch(`/api/commerce${path}`, {
+			...init,
+			signal,
+			headers,
+			cache: "no-store"
+		})).json();
+	} catch (cause) {
+		if (timeout?.aborted && !init?.signal?.aborted) throw new ApiError("Commerce information took too long to load. Please retry.", 408, { cause });
+		throw cause;
+	}
+}
+function money(value, currency) {
+	const formatter = new Intl.NumberFormat("en-US", {
+		style: "currency",
+		currency
+	});
+	const digits = formatter.resolvedOptions().maximumFractionDigits ?? 2;
+	return formatter.format(value / 10 ** digits);
+}
+function message(error) {
+	return error instanceof Error ? error.message : "Something went wrong. Please retry.";
+}
+
+//#endregion
+//#region src/cart-model.ts
+async function addToCart(cartId, item, fetchFn = globalThis.fetch) {
+	const url = cartId ? `/api/commerce/cart/${encodeURIComponent(cartId)}/items` : "/api/commerce/cart";
+	const body = cartId ? item : { lineItems: [item] };
+	return (await fetchFn(url, {
+		method: "POST",
+		headers: { "Content-Type": "application/json" },
+		body: JSON.stringify(body)
+	})).json();
+}
+function getCartSummaryTotals(order) {
+	const lineItems = order?.lineItems ?? [];
+	const currencyCode = order?.totals?.total?.currencyCode || "USD";
+	return {
+		itemCount: lineItems.reduce((sum, item) => sum + (item.quantity || 0), 0),
+		currencyCode,
+		subtotal: order?.totals?.subTotal?.value || 0,
+		shipping: order?.totals?.shippingTotal?.value || 0,
+		taxes: order?.totals?.taxTotal?.value || 0,
+		discount: order?.totals?.discountTotal?.value || 0,
+		total: order?.totals?.total?.value || 0
+	};
+}
+
+//#endregion
+//#region src/catalog-model.ts
+function getSingleMatchedSku(skuGroup) {
+	const connection = skuGroup?.skus;
+	if (connection?.pageInfo?.hasNextPage || (connection?.totalCount ?? 0) > 1) return null;
+	const edges = connection?.edges ?? [];
+	const sku = edges.length === 1 ? edges[0]?.node : null;
+	return sku?.id ? sku : null;
+}
+function getLabeledSkuOptions(skuGroup) {
+	if (getProductAttributes(skuGroup).length > 0) return [];
+	const connection = skuGroup?.skus;
+	const edges = connection?.edges ?? [];
+	if (edges.length < 2 || connection?.pageInfo?.hasNextPage || (connection?.totalCount ?? edges.length) !== edges.length) return [];
+	const skus = edges.flatMap((edge) => edge?.node?.id && (edge.node.label?.trim() || edge.node.name?.trim()) ? [edge.node] : []);
+	const labels = new Set(skus.map((sku) => (sku.label?.trim() || sku.name?.trim() || "").toLowerCase()));
+	const ids = new Set(skus.map((sku) => sku.id));
+	return skus.length === edges.length && labels.size === skus.length && ids.size === skus.length ? skus : [];
+}
+function getAvailableInventoryQuantity(item) {
+	const edges = item?.inventoryCounts?.edges;
+	if (!edges || edges.length === 0) return null;
+	return edges.find((edge) => edge?.node?.type === "AVAILABLE")?.node?.quantity ?? 0;
+}
+function getImageUrls(item) {
+	return item?.mediaObjects?.edges?.filter((edge) => edge?.node?.type === "IMAGE" && edge.node.url).map((edge) => edge?.node?.url).filter((url) => Boolean(url)) ?? [];
+}
+function getPrimaryImageUrl(item) {
+	return getImageUrls(item)[0] ?? null;
+}
+function getProductAttributes(skuGroup) {
+	return skuGroup?.attributes?.edges?.map((edge) => {
+		const attributeNode = edge?.node;
+		const values = attributeNode?.values?.edges?.map((valueEdge) => {
+			const valueNode = valueEdge?.node;
+			return {
+				id: valueNode?.id || "",
+				name: valueNode?.name || "",
+				label: valueNode?.label || valueNode?.name || ""
+			};
+		}) ?? [];
+		return {
+			id: attributeNode?.id || "",
+			name: attributeNode?.name || "",
+			label: attributeNode?.label || attributeNode?.name || "",
+			values
+		};
+	}) ?? [];
+}
+
+//#endregion
+//#region src/commerce-provider.tsx
+const CommerceContext = createContext(null);
+function useCommerce() {
+	const context = useContext(CommerceContext);
+	if (!context) throw new Error("Mount CommerceProvider once around the header and page outlet, inside the router.");
+	return context;
+}
+async function loadConfig(signal) {
+	const config = await request("/config", { signal });
+	if (!config || typeof config.cartScope !== "string" || !config.cartScope.trim() || typeof config.currencyCode !== "string" || !/^[A-Z]{3}$/.test(config.currencyCode)) throw new Error("The store returned invalid configuration.");
+	return config;
+}
+function CommerceProvider({ children, catalogPath = "/shop", productPath = "/products", checkoutSuccessPath, theme = {} }) {
+	const config = useQuery({
+		retry: false,
+		queryKey: ["commerce", "configuration"],
+		queryFn: ({ signal }) => loadConfig(signal),
+		staleTime: 3e4,
+		refetchOnWindowFocus: true
+	});
+	return /* @__PURE__ */ jsx(BoundCommerceProvider, {
+		config: {
+			cartScope: "",
+			currencyCode: "USD",
+			...config.data,
+			catalogPath,
+			productPath,
+			checkoutSuccessPath
+		},
+		connection: config.isError ? "error" : config.data ? "ready" : "loading",
+		connectionError: config.isError ? message(config.error) : null,
+		retryConnection: () => {
+			config.refetch();
+		},
+		theme,
+		children
+	});
+}
+function BoundCommerceProvider({ config, children, connection, connectionError, retryConnection, theme }) {
+	const storageKey = `godaddy:commerce-storefront:cart:${config.cartScope}`;
+	const cartIdStorage = useMemo(() => new CartIdStorage(storageKey), [storageKey]);
+	const ready = connection === "ready";
+	const session = useMemo(() => ({
+		cartIdStorage,
+		ready
+	}), [cartIdStorage, ready]);
+	const currentSession = useRef(session);
+	currentSession.current = session;
+	const readyRef = useRef(ready);
+	readyRef.current = ready;
+	const [cart, setCart] = useState(null);
+	const [open, setOpen] = useState(false);
+	const [pending, setPending] = useState(false);
+	const [hydrating, setHydrating] = useState(true);
+	const [error, setError] = useState(null);
+	const [storageWarning, setStorageWarning] = useState(null);
+	const [announcement, setAnnouncement] = useState("");
+	const id = useRef(null);
+	const currentCart = useRef(null);
+	const queue = useRef(Promise.resolve(true));
+	const alive = useRef(true);
+	const opener = useRef(null);
+	function rememberOpener() {
+		opener.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+	}
+	function isActive() {
+		return alive.current && currentSession.current === session && readyRef.current;
+	}
+	function boundRequest(path, init) {
+		const headers = new Headers(init?.headers);
+		headers.set("X-Commerce-Scope", config.cartScope);
+		return request(path, {
+			...init,
+			headers
+		});
+	}
+	function readId() {
+		try {
+			return cartIdStorage.read();
+		} catch {
+			setStorageWarning("Your browser cannot save the cart. Keep this page open while shopping.");
+			return id.current;
+		}
+	}
+	function commit(next) {
+		if (!isActive()) return;
+		id.current = next?.id ?? null;
+		currentCart.current = next;
+		setCart(next);
+		try {
+			cartIdStorage.write(id.current);
+			setStorageWarning(null);
+		} catch {
+			setStorageWarning("Your browser cannot save the cart. Keep this page open while shopping.");
+		}
+	}
+	async function hydrate() {
+		const storedId = readId();
+		id.current = storedId;
+		if (!storedId) {
+			commit(null);
+			return;
+		}
+		try {
+			commit((await boundRequest(`/cart/${encodeURIComponent(storedId)}`)).cart);
+		} catch (cause) {
+			if (cause instanceof ApiError && (cause.status === 404 || cause.status === 410)) {
+				commit(null);
+				return;
+			}
+			throw cause;
+		}
+	}
+	function run(operation, loading = false) {
+		const task = queue.current.then(async () => {
+			if (!isActive()) return false;
+			setPending(true);
+			if (loading) setHydrating(true);
+			setError(null);
+			try {
+				if (navigator.locks) await navigator.locks.request(storageKey, async () => {
+					if (isActive()) await operation();
+				});
+				else await operation();
+				return isActive();
+			} catch (cause) {
+				if (isActive()) setError(message(cause));
+				return false;
+			} finally {
+				if (isActive()) {
+					setPending(false);
+					setHydrating(false);
+				}
+			}
+		});
+		queue.current = task;
+		return task;
+	}
+	function refresh() {
+		return run(hydrate, true);
+	}
+	useEffect(() => {
+		alive.current = true;
+		id.current = null;
+		currentCart.current = null;
+		queue.current = Promise.resolve(true);
+		setCart(null);
+		setOpen(false);
+		setError(null);
+		setStorageWarning(null);
+		setPending(false);
+		setHydrating(ready);
+		if (ready) refresh();
+		const onStorage = (event) => {
+			if (event.key === storageKey || event.key === null) refresh();
+		};
+		const onFocus = () => {
+			refresh();
+		};
+		window.addEventListener("storage", onStorage);
+		window.addEventListener("focus", onFocus);
+		return () => {
+			alive.current = false;
+			window.removeEventListener("storage", onStorage);
+			window.removeEventListener("focus", onFocus);
+		};
+	}, [cartIdStorage, ready]);
+	function addItem(item) {
+		rememberOpener();
+		return run(async () => {
+			if (!item.skuId || !item.name || !Number.isInteger(item.quantity) || item.quantity < 1) throw new Error("Select a product variant and a positive quantity.");
+			await hydrate();
+			if (!isActive()) return;
+			const fetchCart = (input, init) => {
+				const headers = new Headers(init?.headers);
+				headers.set("X-Commerce-Scope", config.cartScope);
+				return checkedFetch(input, {
+					...init,
+					headers
+				});
+			};
+			const result = await addToCart(id.current, {
+				skuId: item.skuId,
+				name: item.name,
+				quantity: item.quantity
+			}, fetchCart);
+			if (!result.cart?.id || !result.cart.lineItems?.length) throw new Error("Commerce did not return a cart with items. Refresh before retrying.");
+			if (!isActive()) return;
+			commit(result.cart);
+			setAnnouncement(`${item.name} added to your cart.`);
+			setOpen(true);
+		});
+	}
+	function mutateItem(itemId, method, quantity) {
+		return run(async () => {
+			await hydrate();
+			if (!isActive()) return;
+			if (!id.current || !currentCart.current?.lineItems?.some((item) => item.id === itemId)) throw new Error("This item is no longer in the cart.");
+			if (quantity !== void 0 && (!Number.isInteger(quantity) || quantity < 1)) throw new Error("Quantity must be a positive whole number.");
+			const result = await boundRequest(`/cart/${encodeURIComponent(id.current)}/items/${encodeURIComponent(itemId)}`, {
+				method,
+				...quantity !== void 0 ? { body: JSON.stringify({ quantity }) } : {}
+			});
+			if (!result.cart?.id) throw new Error("Commerce did not return the updated cart. Refresh before retrying.");
+			if (!isActive()) return;
+			commit(result.cart);
+			setAnnouncement(method === "DELETE" ? "Item removed from cart." : "Cart quantity updated.");
+		});
+	}
+	function applyDiscount(code) {
+		return run(async () => {
+			await hydrate();
+			if (!isActive()) return;
+			if (!id.current || !code.trim()) throw new Error("Add an item and enter a promotion code.");
+			const codes = [...new Set([...currentCart.current?.discounts?.flatMap((discount) => discount.code ? [discount.code] : []) ?? [], code.trim()])];
+			const result = await boundRequest(`/cart/${encodeURIComponent(id.current)}/discounts`, {
+				method: "POST",
+				body: JSON.stringify({ discountCodes: codes })
+			});
+			if (!result.cart?.id) throw new Error("Commerce did not return the updated cart.");
+			if (!isActive()) return;
+			commit(result.cart);
+			setAnnouncement("Promotion codes updated.");
+		});
+	}
+	function checkout() {
+		return run(async () => {
+			if (!config.checkoutSuccessPath) throw new Error("Checkout has not been enabled for this store.");
+			await hydrate();
+			if (!isActive()) return;
+			if (!id.current || !currentCart.current?.lineItems?.length) throw new Error("Add an item before checking out.");
+			const origin = window.location.origin;
+			const successUrl = new URL(config.checkoutSuccessPath, origin);
+			successUrl.searchParams.set("orderId", id.current);
+			const session$1 = await boundRequest("/checkout", {
+				method: "POST",
+				body: JSON.stringify({
+					draftOrderId: id.current,
+					returnUrl: new URL(config.catalogPath, origin).href,
+					successUrl: successUrl.href
+				})
+			});
+			if (!isActive()) return;
+			if (typeof session$1.url !== "string" || !session$1.url.trim()) throw new Error("Commerce did not return a checkout URL.");
+			const url = new URL(session$1.url, origin);
+			if (url.protocol !== "https:") throw new Error("Commerce returned an invalid checkout URL.");
+			window.location.assign(url.href);
+		});
+	}
+	return /* @__PURE__ */ jsxs(CommerceContext.Provider, {
+		value: {
+			config,
+			connection,
+			connectionError,
+			retryConnection,
+			theme,
+			cart,
+			open,
+			setOpen: (next) => {
+				if (next) rememberOpener();
+				setOpen(next);
+			},
+			restoreFocus: () => {
+				opener.current?.focus();
+			},
+			pending,
+			hydrating,
+			error,
+			storageWarning,
+			announcement,
+			addItem,
+			changeQuantity: (itemId, quantity) => mutateItem(itemId, "PATCH", quantity),
+			removeItem: (itemId) => mutateItem(itemId, "DELETE"),
+			applyDiscount,
+			refresh,
+			checkout
+		},
+		children: [children, /* @__PURE__ */ jsx("span", {
+			className: "commerce-sr-only",
+			role: "status",
+			"aria-live": "polite",
+			children: announcement
+		})]
+	});
+}
+
+//#endregion
+//#region src/storefront-surface.tsx
+function StorefrontSurface({ children, className = "" }) {
+	const { theme } = useCommerce();
+	return /* @__PURE__ */ jsx("div", {
+		className: `commerce-storefront ${className}`,
+		style: theme,
+		children
+	});
+}
+function CommerceStatus() {
+	const { connection, connectionError, retryConnection } = useCommerce();
+	if (connection === "ready") return null;
+	return /* @__PURE__ */ jsx(StorefrontSurface, { children: connection === "loading" ? /* @__PURE__ */ jsx("p", {
+		role: "status",
+		children: "Connecting to the store…"
+	}) : /* @__PURE__ */ jsxs("div", {
+		role: "alert",
+		children: [/* @__PURE__ */ jsx("p", { children: connectionError }), /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: "min-h-11 underline",
+			onClick: retryConnection,
+			children: "Retry connection"
+		})]
+	}) });
+}
+
+//#endregion
+//#region src/cart.tsx
+const buttonClass = "inline-flex min-h-11 items-center justify-center gap-2 rounded-lg bg-commerce-accent px-5 py-2 text-sm font-semibold text-commerce-on-accent hover:bg-commerce-accent-hover focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 disabled:cursor-not-allowed disabled:bg-neutral-200 disabled:text-neutral-700 disabled:hover:bg-neutral-200";
+const inputClass = "min-h-11 rounded-lg border border-neutral-400 bg-white px-3 py-2 text-neutral-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900";
+function CartButton() {
+	const { cart, setOpen, open, connection } = useCommerce();
+	const count = cart?.lineItems?.reduce((total, item) => total + (item.quantity ?? 0), 0) ?? 0;
+	return /* @__PURE__ */ jsx(StorefrontSurface, {
+		className: "commerce-inline",
+		children: /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			className: buttonClass,
+			disabled: connection !== "ready",
+			"aria-haspopup": "dialog",
+			"aria-expanded": open,
+			onClick: () => setOpen(true),
+			children: ["Cart ", /* @__PURE__ */ jsx("span", {
+				className: "rounded-full bg-white px-2 py-0.5 text-xs text-neutral-900",
+				children: count
+			})]
+		})
+	});
+}
+function AddToCartButton({ sku, name, quantity = 1 }) {
+	const { addItem, pending, hydrating, error, open, connection } = useCommerce();
+	const [adding, setAdding] = useState(false);
+	const available = getAvailableInventoryQuantity(sku);
+	const disabled = connection !== "ready" || !sku.id || adding || hydrating || available === 0 || !Number.isInteger(quantity) || quantity < 1 || available !== null && quantity > available;
+	async function handleAdd() {
+		if (disabled || pending || !sku.id) return;
+		setAdding(true);
+		try {
+			await addItem({
+				skuId: sku.id,
+				name,
+				quantity
+			});
+		} finally {
+			setAdding(false);
+		}
+	}
+	return /* @__PURE__ */ jsxs(StorefrontSurface, {
+		className: "commerce-inline",
+		children: [/* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: `${buttonClass} w-full`,
+			disabled,
+			"aria-disabled": disabled || pending,
+			"aria-busy": adding,
+			onClick: () => void handleAdd(),
+			children: available === 0 ? "Out of stock" : adding ? "Adding…" : "Add to cart"
+		}), error && !open && /* @__PURE__ */ jsx("p", {
+			role: "alert",
+			className: "mt-3 bg-white text-sm text-red-700",
+			children: error
+		})]
+	});
+}
+function CartDrawer() {
+	const { config, cart, open, setOpen, restoreFocus, pending, hydrating, error, storageWarning, changeQuantity, removeItem, refresh, checkout } = useCommerce();
+	const [drawerAction, setDrawerAction] = useState(null);
+	const checkingOut = drawerAction === "checkout";
+	const locked = pending || hydrating || drawerAction !== null;
+	const items = cart?.lineItems ?? [];
+	const summary = getCartSummaryTotals(cart);
+	const currency = cart?.totals?.total?.currencyCode ?? config.currencyCode;
+	async function handleAction(action, operation) {
+		if (locked) return;
+		setDrawerAction(action);
+		try {
+			await operation();
+		} finally {
+			setDrawerAction(null);
+		}
+	}
+	return /* @__PURE__ */ jsx(Dialog.Root, {
+		open,
+		onOpenChange: setOpen,
+		children: /* @__PURE__ */ jsx(Dialog.Portal, { children: /* @__PURE__ */ jsxs(StorefrontSurface, { children: [/* @__PURE__ */ jsx(Dialog.Overlay, { className: "fixed inset-0 z-40 bg-neutral-950/40" }), /* @__PURE__ */ jsxs(Dialog.Content, {
+			className: "fixed inset-y-0 right-0 z-50 flex w-full max-w-lg flex-col bg-white text-neutral-900 shadow-xl",
+			onCloseAutoFocus: (event) => {
+				event.preventDefault();
+				restoreFocus();
+			},
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-start justify-between border-b border-neutral-200 p-6",
+					children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Dialog.Title, {
+						className: "text-2xl font-semibold",
+						children: "Your cart"
+					}), /* @__PURE__ */ jsx(Dialog.Description, {
+						className: "mt-1 text-sm text-neutral-600",
+						children: "Review your items before checkout."
+					})] }), /* @__PURE__ */ jsx(Dialog.Close, {
+						className: "min-h-11 min-w-11 rounded-lg border border-neutral-400 bg-white px-3 text-neutral-900 focus-visible:outline focus-visible:outline-2",
+						"aria-label": "Close cart",
+						children: "✕"
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex-1 overflow-y-auto p-6",
+					children: [
+						storageWarning && /* @__PURE__ */ jsx("p", {
+							role: "status",
+							className: "mb-4 text-sm text-amber-800",
+							children: storageWarning
+						}),
+						error && /* @__PURE__ */ jsxs("div", {
+							role: "alert",
+							className: "mb-4 rounded-lg bg-red-50 p-4 text-red-800",
+							children: [/* @__PURE__ */ jsx("p", { children: error }), /* @__PURE__ */ jsx("button", {
+								type: "button",
+								className: "mt-2 min-h-11 bg-red-50 text-red-800 underline disabled:cursor-not-allowed",
+								disabled: drawerAction === "refresh",
+								"aria-disabled": locked,
+								"aria-busy": drawerAction === "refresh",
+								onClick: () => void handleAction("refresh", refresh),
+								children: "Refresh cart"
+							})]
+						}),
+						hydrating && /* @__PURE__ */ jsx("p", {
+							role: "status",
+							children: "Loading your cart…"
+						}),
+						!hydrating && !items.length && /* @__PURE__ */ jsxs("div", {
+							className: "py-16 text-center",
+							children: [
+								/* @__PURE__ */ jsx("p", {
+									className: "text-xl font-medium",
+									children: "Your cart is empty"
+								}),
+								/* @__PURE__ */ jsx("p", {
+									className: "mt-2 text-neutral-600",
+									children: "Find something you love in the shop."
+								}),
+								/* @__PURE__ */ jsx(Link, {
+									className: `${buttonClass} mt-6`,
+									to: config.catalogPath,
+									onClick: () => setOpen(false),
+									children: "Browse products"
+								})
+							]
+						}),
+						/* @__PURE__ */ jsx("ul", {
+							className: "divide-y divide-neutral-200",
+							children: items.map((item) => /* @__PURE__ */ jsxs("li", {
+								className: "py-5 first:pt-0",
+								"data-testid": "cart-item",
+								children: [/* @__PURE__ */ jsxs("div", {
+									className: "flex gap-4",
+									children: [item.details?.productAssetUrl && /* @__PURE__ */ jsx("img", {
+										src: item.details.productAssetUrl,
+										alt: "",
+										className: "h-20 w-20 rounded-lg bg-neutral-100 object-cover"
+									}), /* @__PURE__ */ jsxs("div", {
+										className: "min-w-0 flex-1",
+										children: [
+											/* @__PURE__ */ jsx("h3", {
+												className: "font-semibold",
+												children: item.name
+											}),
+											item.details?.selectedOptions?.map((option) => /* @__PURE__ */ jsxs("p", {
+												className: "text-sm text-neutral-600",
+												children: [
+													option.attribute,
+													": ",
+													option.values?.join(", ")
+												]
+											}, `${option.attribute}:${option.values?.join(",")}`)),
+											/* @__PURE__ */ jsx("p", {
+												className: "mt-1 text-sm",
+												children: typeof item.totals?.subTotal?.value === "number" ? money(item.totals.subTotal.value, item.totals.subTotal.currencyCode ?? currency) : "Price unavailable"
+											})
+										]
+									})]
+								}), /* @__PURE__ */ jsxs("div", {
+									className: "mt-4 flex items-center justify-between gap-2",
+									children: [/* @__PURE__ */ jsxs("div", {
+										className: "flex items-center rounded-lg border border-neutral-300",
+										children: [
+											/* @__PURE__ */ jsx("button", {
+												type: "button",
+												className: "min-h-11 min-w-11 rounded-lg bg-white text-neutral-900 focus-visible:outline focus-visible:outline-2 disabled:cursor-not-allowed disabled:bg-neutral-100 disabled:text-neutral-600",
+												"aria-label": `Decrease quantity of ${item.name}`,
+												disabled: drawerAction === `decrease:${item.id}` || !item.id || (item.quantity ?? 0) <= 1,
+												"aria-disabled": locked || !item.id || (item.quantity ?? 0) <= 1,
+												"aria-busy": drawerAction === `decrease:${item.id}`,
+												onClick: () => void handleAction(`decrease:${item.id}`, () => changeQuantity(item.id ?? "", (item.quantity ?? 1) - 1)),
+												children: "−"
+											}),
+											/* @__PURE__ */ jsxs("span", {
+												className: "min-w-8 text-center",
+												children: [/* @__PURE__ */ jsx("span", {
+													className: "sr-only",
+													children: "Quantity: "
+												}), item.quantity]
+											}),
+											/* @__PURE__ */ jsx("button", {
+												type: "button",
+												className: "min-h-11 min-w-11 rounded-lg bg-white text-neutral-900 focus-visible:outline focus-visible:outline-2 disabled:cursor-not-allowed disabled:bg-neutral-100 disabled:text-neutral-600",
+												"aria-label": `Increase quantity of ${item.name}`,
+												disabled: drawerAction === `increase:${item.id}` || !item.id,
+												"aria-disabled": locked || !item.id,
+												"aria-busy": drawerAction === `increase:${item.id}`,
+												onClick: () => void handleAction(`increase:${item.id}`, () => changeQuantity(item.id ?? "", (item.quantity ?? 1) + 1)),
+												children: "+"
+											})
+										]
+									}), /* @__PURE__ */ jsx("button", {
+										type: "button",
+										className: "min-h-11 bg-white px-2 text-sm text-neutral-900 underline focus-visible:outline focus-visible:outline-2 disabled:cursor-not-allowed disabled:text-neutral-600",
+										"aria-label": `Remove ${item.name}`,
+										disabled: drawerAction === `remove:${item.id}` || !item.id,
+										"aria-disabled": locked || !item.id,
+										"aria-busy": drawerAction === `remove:${item.id}`,
+										onClick: () => void handleAction(`remove:${item.id}`, () => removeItem(item.id ?? "")),
+										children: "Remove"
+									})]
+								})]
+							}, item.id))
+						})
+					]
+				}),
+				items.length > 0 && /* @__PURE__ */ jsxs("div", {
+					className: "border-t border-neutral-200 p-6",
+					children: [
+						/* @__PURE__ */ jsx("dl", {
+							className: "space-y-2 text-sm",
+							children: typeof cart?.totals?.subTotal?.value === "number" && /* @__PURE__ */ jsxs("div", {
+								className: "flex justify-between",
+								children: [/* @__PURE__ */ jsx("dt", { children: "Subtotal" }), /* @__PURE__ */ jsx("dd", { children: money(summary.subtotal, cart.totals.subTotal.currencyCode ?? currency) })]
+							})
+						}),
+						/* @__PURE__ */ jsx("p", {
+							className: "commerce-cart-checkout-adjustments-note mt-3 text-sm text-neutral-600",
+							children: "Shipping, taxes, and discounts are calculated at checkout."
+						}),
+						config.checkoutSuccessPath ? /* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: `${buttonClass} w-full`,
+							disabled: checkingOut || hydrating || cart?.totals?.total?.value == null,
+							"aria-disabled": locked || cart?.totals?.total?.value == null,
+							"aria-busy": checkingOut,
+							onClick: () => void handleAction("checkout", checkout),
+							children: checkingOut ? "Opening checkout…" : "Proceed to Checkout"
+						}) : /* @__PURE__ */ jsx("p", {
+							className: "text-sm text-neutral-600",
+							children: "Checkout is not available yet."
+						})
+					]
+				})
+			]
+		})] }) })
+	});
+}
+
+//#endregion
+//#region src/catalog.tsx
+function ProductImage({ url, name, className = "" }) {
+	const [failed, setFailed] = useState(false);
+	return url && !failed ? /* @__PURE__ */ jsx("img", {
+		src: url,
+		alt: name,
+		loading: "lazy",
+		className: `h-full w-full object-cover ${className}`,
+		onError: () => setFailed(true)
+	}) : /* @__PURE__ */ jsx("div", {
+		className: `flex h-full min-h-44 items-center justify-center p-6 text-center ${className}`,
+		role: "img",
+		"aria-label": `${name}: image unavailable`,
+		children: "No image available"
+	});
+}
+function ProductCard({ product }) {
+	return /* @__PURE__ */ jsx(StorefrontSurface, { children: /* @__PURE__ */ jsx(ProductCardContent, { product }) });
+}
+function ProductCardContent({ product }) {
+	const { config } = useCommerce();
+	const name = product.label ?? product.name ?? "Product";
+	const href = `${config.productPath}/${encodeURIComponent(product.id ?? "")}`;
+	const selectedSku = getSingleMatchedSku(product);
+	selectedSku?.id;
+	const hasVariants = getProductAttributes(product).length > 0;
+	const min = product.priceRange?.min;
+	const max = product.priceRange?.max;
+	return /* @__PURE__ */ jsxs("article", {
+		className: "group flex min-w-0 flex-col overflow-hidden rounded-lg border border-neutral-200",
+		children: [/* @__PURE__ */ jsx(Link, {
+			to: href,
+			tabIndex: -1,
+			"aria-hidden": "true",
+			className: "block aspect-square overflow-hidden",
+			children: /* @__PURE__ */ jsx(ProductImage, {
+				url: getPrimaryImageUrl(product),
+				name,
+				className: "motion-safe:transition-transform motion-safe:duration-200 motion-safe:group-hover:scale-105"
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-1 flex-col p-6",
+			children: [
+				/* @__PURE__ */ jsx("h2", {
+					className: "break-words text-2xl font-semibold leading-tight",
+					children: /* @__PURE__ */ jsx(Link, {
+						className: "rounded text-inherit hover:underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2",
+						to: href,
+						children: name
+					})
+				}),
+				product.description && /* @__PURE__ */ jsx("p", {
+					className: "mt-3 line-clamp-3 text-sm leading-6",
+					children: product.description
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "mt-auto pt-6",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "flex flex-wrap items-end justify-between gap-4 border-t border-neutral-200 pt-5",
+						children: [/* @__PURE__ */ jsx("p", {
+							className: "min-w-0 flex-1 text-lg font-semibold leading-7",
+							children: typeof min === "number" ? `${money(min, config.currencyCode)}${typeof max === "number" && max !== min ? ` – ${money(max, config.currencyCode)}` : ""}` : "Price unavailable"
+						}), /* @__PURE__ */ jsx("div", {
+							className: "max-w-full",
+							children: !hasVariants && selectedSku ? /* @__PURE__ */ jsx(AddToCartButton, {
+								sku: selectedSku,
+								name
+							}) : /* @__PURE__ */ jsx(Link, {
+								className: buttonClass,
+								to: href,
+								children: hasVariants ? "Choose options" : "View product"
+							})
+						})]
+					})
+				})
+			]
+		})]
+	});
+}
+function Catalog(props) {
+	const { connection } = useCommerce();
+	return /* @__PURE__ */ jsx(StorefrontSurface, { children: connection === "ready" ? /* @__PURE__ */ jsx(CatalogContent, { ...props }) : /* @__PURE__ */ jsx(CommerceStatus, {}) });
+}
+function CatalogContent({ title = "Shop all products", description = "Explore the collection and find your favorites.", showHeader = true }) {
+	const { config } = useCommerce();
+	const [params, setParams] = useSearchParams();
+	const after = params.get("after") ?? "";
+	const urlParams = new URLSearchParams({ first: "6" });
+	if (after) urlParams.set("after", after);
+	const products = useQuery({
+		retry: false,
+		queryKey: [
+			"commerce",
+			config.cartScope,
+			"products",
+			after
+		],
+		queryFn: ({ signal }) => request(`/products?${urlParams}`, {
+			signal,
+			headers: { "X-Commerce-Scope": config.cartScope }
+		})
+	});
+	function goToPage(cursor) {
+		const next = new URLSearchParams(params);
+		if (cursor) next.set("after", cursor);
+		else next.delete("after");
+		setParams(next);
+	}
+	const nodes = products.data?.skuGroups?.edges?.flatMap((edge) => edge?.node?.id ? [edge.node] : []) ?? [];
+	const pageInfo = products.data?.skuGroups?.pageInfo;
+	return /* @__PURE__ */ jsxs("section", { children: [
+		showHeader && /* @__PURE__ */ jsxs("header", {
+			className: "border-b border-neutral-200 pb-10 pt-4 sm:pb-14 sm:pt-8",
+			children: [/* @__PURE__ */ jsx("h1", {
+				className: "max-w-3xl text-4xl font-semibold leading-tight sm:text-5xl lg:text-6xl",
+				children: title
+			}), /* @__PURE__ */ jsx("p", {
+				className: "mt-5 max-w-xl text-base leading-7 sm:text-lg",
+				children: description
+			})]
+		}),
+		/* @__PURE__ */ jsx("div", {
+			className: "border-b border-neutral-200 py-6 sm:py-8",
+			children: /* @__PURE__ */ jsx("p", {
+				className: "text-sm",
+				role: "status",
+				children: products.isPending ? "Loading products…" : products.isError ? "Products unavailable" : `Showing ${nodes.length} product${nodes.length === 1 ? "" : "s"}`
+			})
+		}),
+		products.isPending && /* @__PURE__ */ jsx("div", {
+			"aria-hidden": "true",
+			className: "grid grid-cols-1 gap-6 py-8 sm:grid-cols-2 lg:grid-cols-3",
+			children: [
+				0,
+				1,
+				2
+			].map((item) => /* @__PURE__ */ jsxs("div", {
+				className: "overflow-hidden rounded-lg border border-neutral-200 motion-safe:animate-pulse",
+				children: [/* @__PURE__ */ jsx("div", { className: "aspect-square bg-neutral-100" }), /* @__PURE__ */ jsxs("div", {
+					className: "space-y-4 p-6",
+					children: [
+						/* @__PURE__ */ jsx("div", { className: "h-6 w-2/3 rounded bg-neutral-100" }),
+						/* @__PURE__ */ jsx("div", { className: "h-4 rounded bg-neutral-100" }),
+						/* @__PURE__ */ jsx("div", { className: "h-11 rounded bg-neutral-100" })
+					]
+				})]
+			}, item))
+		}),
+		products.isError && /* @__PURE__ */ jsxs("div", {
+			role: "alert",
+			className: "rounded-lg bg-red-50 p-5 text-red-800",
+			children: [/* @__PURE__ */ jsx("p", { children: message(products.error) }), /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "min-h-11 bg-red-50 text-red-800 underline",
+				onClick: () => void products.refetch(),
+				children: "Retry products"
+			})]
+		}),
+		products.isSuccess && !nodes.length && /* @__PURE__ */ jsx("p", {
+			className: "py-16 text-center",
+			children: "No products available."
+		}),
+		/* @__PURE__ */ jsx("div", {
+			className: "grid grid-cols-1 gap-6 py-8 sm:grid-cols-2 lg:grid-cols-3 lg:gap-8 lg:py-10",
+			children: nodes.map((product) => /* @__PURE__ */ jsx(ProductCard, { product }, product.id))
+		}),
+		/* @__PURE__ */ jsxs("nav", {
+			"aria-label": "Product pages",
+			className: "flex justify-between border-t border-neutral-200 pt-6",
+			children: [after ? /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: buttonClass,
+				onClick: () => goToPage(),
+				children: "First page"
+			}) : /* @__PURE__ */ jsx("span", {}), pageInfo?.hasNextPage && pageInfo.endCursor && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: buttonClass,
+				onClick: () => goToPage(pageInfo.endCursor ?? void 0),
+				children: "Next page"
+			})]
+		})
+	] });
+}
+
+//#endregion
+//#region src/commerce-storefront.tsx
+/** Mount once inside the application's Router and QueryClientProvider. */
+function CommerceStorefront({ children,...props }) {
+	return /* @__PURE__ */ jsxs(CommerceProvider, {
+		...props,
+		children: [children, /* @__PURE__ */ jsx(CartDrawer, {})]
+	});
+}
+
+//#endregion
+//#region src/product-details.tsx
+function ProductDetails() {
+	const { productId = "" } = useParams();
+	const { connection } = useCommerce();
+	return /* @__PURE__ */ jsx(StorefrontSurface, { children: connection === "ready" ? /* @__PURE__ */ jsx(ProductDetailsContent, { productId }, productId) : /* @__PURE__ */ jsx(CommerceStatus, {}) });
+}
+function ProductDetailsContent({ productId }) {
+	const { config } = useCommerce();
+	const fieldId = useId();
+	const [params, setParams] = useSearchParams();
+	const [quantity, setQuantity] = useState(1);
+	const [imageIndex, setImageIndex] = useState(0);
+	const product = useQuery({
+		retry: false,
+		queryKey: [
+			"commerce",
+			config.cartScope,
+			"product",
+			productId
+		],
+		queryFn: ({ signal }) => request(`/products/${encodeURIComponent(productId)}`, {
+			signal,
+			headers: { "X-Commerce-Scope": config.cartScope }
+		})
+	});
+	const group = product.data?.skuGroup;
+	const productUnavailable = group?.status != null && group.status !== "ACTIVE";
+	const attributes = getProductAttributes(group);
+	const skuOptions = getLabeledSkuOptions(group);
+	const explicitSku = skuOptions.find((sku) => sku.id === params.get("sku"));
+	const selections = attributes.map((attribute) => params.get(`option.${attribute.name}`) ?? "");
+	const complete = skuOptions.length > 0 ? !!explicitSku : attributes.every((attribute, index) => attribute.values.some((value) => value.name === selections[index]));
+	const selectionParams = new URLSearchParams();
+	selections.filter(Boolean).forEach((value) => {
+		selectionParams.append("attributeValues", value);
+	});
+	const matched = useQuery({
+		retry: false,
+		queryKey: [
+			"commerce",
+			config.cartScope,
+			"product-variants",
+			productId,
+			selections
+		],
+		queryFn: ({ signal }) => request(`/products/${encodeURIComponent(productId)}?${selectionParams}`, {
+			signal,
+			headers: { "X-Commerce-Scope": config.cartScope }
+		}),
+		enabled: !!group && attributes.length > 0 && complete
+	});
+	const selectionVerified = complete && product.isSuccess && !product.isFetching && (attributes.length === 0 || matched.isSuccess && !matched.isFetching);
+	const selectedSku = selectionVerified ? explicitSku ?? getSingleMatchedSku(attributes.length ? matched.data?.skuGroup : group) : null;
+	const skuId = selectedSku?.id ?? null;
+	const skuPrice = selectedSku?.prices?.edges?.find((edge) => edge?.node?.value)?.node;
+	const selectedImages = getImageUrls(selectedSku);
+	const images = [...new Set(selectedImages.length ? selectedImages : getImageUrls(group))];
+	const available = getAvailableInventoryQuantity(selectedSku);
+	const name = group?.label ?? group?.name ?? "Product";
+	const selectOption = (attribute, value) => {
+		const next = new URLSearchParams(params);
+		if (value) next.set(`option.${attribute}`, value);
+		else next.delete(`option.${attribute}`);
+		setParams(next);
+		setQuantity(1);
+		setImageIndex(0);
+	};
+	if (product.isPending) return /* @__PURE__ */ jsx("p", {
+		role: "status",
+		children: "Loading product…"
+	});
+	if (product.isError) return /* @__PURE__ */ jsxs("div", {
+		role: "alert",
+		children: [
+			/* @__PURE__ */ jsx("h1", {
+				className: "text-2xl font-semibold",
+				children: "Product unavailable"
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "my-4 text-red-700",
+				children: message(product.error)
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: buttonClass,
+				onClick: () => void product.refetch(),
+				children: "Retry product"
+			})
+		]
+	});
+	if (!group) return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h1", {
+		className: "text-2xl font-semibold",
+		children: "Product not found"
+	}), /* @__PURE__ */ jsx(Link, {
+		className: `${buttonClass} mt-4`,
+		to: config.catalogPath,
+		children: "Back to shop"
+	})] });
+	return /* @__PURE__ */ jsxs("article", { children: [/* @__PURE__ */ jsx(Link, {
+		className: "mb-8 inline-flex min-h-11 items-center text-sm text-inherit underline underline-offset-4 focus-visible:outline focus-visible:outline-2 sm:mb-10",
+		to: config.catalogPath,
+		children: "← Back to shop"
+	}), /* @__PURE__ */ jsxs("div", {
+		className: "grid items-start gap-8 lg:grid-cols-12 lg:gap-12",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "min-w-0 lg:col-span-7",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "aspect-square overflow-hidden rounded-lg",
+				children: /* @__PURE__ */ jsx(ProductImage, {
+					url: images[imageIndex] ?? images[0],
+					name
+				}, images[imageIndex] ?? images[0])
+			}), images.length > 1 && /* @__PURE__ */ jsx("div", {
+				className: "mt-4 flex gap-3 overflow-x-auto",
+				children: images.map((url, index) => /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: `h-20 w-20 shrink-0 overflow-hidden rounded-lg border-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 ${imageIndex === index ? "border-neutral-900" : "border-transparent"}`,
+					"aria-label": `View image ${index + 1}`,
+					"aria-pressed": imageIndex === index,
+					onClick: () => setImageIndex(index),
+					children: /* @__PURE__ */ jsx(ProductImage, {
+						url,
+						name: ""
+					})
+				}, url))
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "min-w-0 lg:col-span-5 lg:py-4",
+			children: [
+				/* @__PURE__ */ jsx("h1", {
+					className: "break-words text-4xl font-semibold leading-tight sm:text-5xl",
+					children: name
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					"aria-live": "polite",
+					className: "mt-6 flex flex-wrap items-baseline gap-x-3 gap-y-1 text-2xl font-medium",
+					"data-testid": "product-price",
+					children: [skuPrice?.value?.value != null ? money(skuPrice.value.value, skuPrice.value.currencyCode ?? config.currencyCode) : group.priceRange?.min != null ? `From ${money(group.priceRange.min, config.currencyCode)}` : "Price unavailable", skuPrice?.compareAtValue?.value != null && skuPrice.value?.value != null && skuPrice.compareAtValue.value > skuPrice.value.value && /* @__PURE__ */ jsx("del", {
+						className: "text-lg font-normal",
+						children: money(skuPrice.compareAtValue.value, skuPrice.compareAtValue.currencyCode ?? config.currencyCode)
+					})]
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: "my-8 whitespace-pre-line text-base leading-7",
+					children: selectedSku?.description ?? group.description
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "space-y-6 border-t border-neutral-200 pt-8",
+					children: [
+						attributes.map((attribute, index) => /* @__PURE__ */ jsxs("fieldset", { children: [/* @__PURE__ */ jsx("legend", {
+							className: "mb-2 font-medium",
+							children: attribute.label
+						}), /* @__PURE__ */ jsxs("select", {
+							className: `${inputClass} w-full`,
+							"aria-label": attribute.label,
+							value: selections[index],
+							onChange: (event) => selectOption(attribute.name, event.target.value),
+							children: [/* @__PURE__ */ jsxs("option", {
+								value: "",
+								children: ["Select ", attribute.label.toLowerCase()]
+							}), attribute.values.map((value) => /* @__PURE__ */ jsx("option", {
+								value: value.name,
+								children: value.label
+							}, value.id || value.name))]
+						})] }, attribute.id || attribute.name)),
+						skuOptions.length > 0 && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
+							htmlFor: `${fieldId}-sku-option`,
+							className: "mb-2 block font-medium",
+							children: "Option"
+						}), /* @__PURE__ */ jsxs("select", {
+							id: `${fieldId}-sku-option`,
+							className: `${inputClass} w-full`,
+							value: explicitSku?.id ?? "",
+							onChange: (event) => {
+								const next = new URLSearchParams(params);
+								if (event.target.value) next.set("sku", event.target.value);
+								else next.delete("sku");
+								setParams(next);
+								setQuantity(1);
+								setImageIndex(0);
+							},
+							children: [/* @__PURE__ */ jsx("option", {
+								value: "",
+								children: "Select an option"
+							}), skuOptions.map((sku) => /* @__PURE__ */ jsx("option", {
+								value: sku.id ?? "",
+								children: sku.label?.trim() || sku.name?.trim()
+							}, sku.id))]
+						})] }),
+						matched.isError ? /* @__PURE__ */ jsxs("div", {
+							role: "alert",
+							className: "text-red-700",
+							children: [/* @__PURE__ */ jsx("p", { children: message(matched.error) }), /* @__PURE__ */ jsx("button", {
+								type: "button",
+								className: "min-h-11 bg-white text-red-700 underline",
+								onClick: () => {
+									if (matched.isError) matched.refetch();
+								},
+								children: "Retry availability"
+							})]
+						}) : null,
+						!complete && /* @__PURE__ */ jsx("p", {
+							id: `${fieldId}-variant-guidance`,
+							role: "status",
+							className: "text-sm",
+							children: "Select all options to add this item to your cart."
+						}),
+						selectionVerified && attributes.length > 0 && !skuId && /* @__PURE__ */ jsx("p", {
+							role: "status",
+							className: "text-sm text-red-700",
+							children: "This combination is unavailable. Choose different options."
+						}),
+						selectionVerified && attributes.length === 0 && !skuId && /* @__PURE__ */ jsx("p", {
+							className: "text-sm",
+							children: "This product is not currently available to purchase."
+						}),
+						complete && (product.isFetching || matched.isFetching) && /* @__PURE__ */ jsx("p", {
+							role: "status",
+							children: "Checking this variant…"
+						}),
+						selectedSku && /* @__PURE__ */ jsxs(Fragment, { children: [
+							/* @__PURE__ */ jsx("p", {
+								className: "text-sm",
+								"aria-live": "polite",
+								children: available === null ? "Available to order" : available === 0 ? "This variant is out of stock" : `${available} available`
+							}),
+							/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
+								htmlFor: `${fieldId}-quantity`,
+								className: "mb-2 block font-medium",
+								children: "Quantity"
+							}), /* @__PURE__ */ jsx("input", {
+								id: `${fieldId}-quantity`,
+								type: "number",
+								min: 1,
+								max: available ?? void 0,
+								step: 1,
+								className: `${inputClass} w-28`,
+								value: Number.isNaN(quantity) ? "" : quantity,
+								onChange: (event) => setQuantity(event.target.valueAsNumber)
+							})] }),
+							productUnavailable ? /* @__PURE__ */ jsx("p", {
+								className: "text-sm",
+								children: "This product is no longer available."
+							}) : /* @__PURE__ */ jsx(AddToCartButton, {
+								sku: selectedSku,
+								name,
+								quantity
+							})
+						] }),
+						!selectedSku && (productUnavailable ? /* @__PURE__ */ jsx("p", {
+							className: "text-sm",
+							children: "This product is no longer available."
+						}) : /* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: `${buttonClass} w-full`,
+							disabled: true,
+							"aria-describedby": !complete ? `${fieldId}-variant-guidance` : void 0,
+							children: "Add to cart"
+						}))
+					]
+				})
+			]
+		})]
+	})] });
+}
+
+//#endregion
+export { AddToCartButton, ApiError, CartButton, CartDrawer, Catalog, CommerceProvider, CommerceStatus, CommerceStorefront, ProductCard, ProductDetails, getAvailableInventoryQuantity, getCartSummaryTotals, getImageUrls, getLabeledSkuOptions, getPrimaryImageUrl, getProductAttributes, getSingleMatchedSku, money, useCommerce };