@develemit/storefront 0.7.0 → 0.9.0

package/dist/index.js

@@ -2,9 +2,9 @@
 import { n as e, t } from "./sort-for-display-Cj6GMeCY.js";
 import { createContext as n, useCallback as r, useContext as i, useEffect as a, useMemo as o, useReducer as s, useRef as c, useState as l } from "react";
 import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
-import { cartLineSchema as p } from "@develemit/commerce-contracts";
+import { cartLineSchema as p, formatOrderRef as m } from "@develemit/commerce-contracts";
 // src/lib/theme.ts
-var m = {
+var h = {
 	colorBg: "--sf-color-bg",
 	colorSurface: "--sf-color-surface",
 	colorFg: "--sf-color-fg",
@@ -18,16 +18,16 @@ var m = {
 	fontBody: "--sf-font-body",
 	spaceUnit: "--sf-space-unit"
 };
-function h(e) {
+function g(e) {
 	let t = {};
-	for (let n of Object.keys(m)) {
+	for (let n of Object.keys(h)) {
 		let r = e[n];
-		r !== void 0 && (t[m[n]] = r);
+		r !== void 0 && (t[h[n]] = r);
 	}
 	return t;
 }
 // src/lib/provider.tsx
-var g = {
+var _ = {
 	renderLink: ({ href: e, children: t, className: n }) => /* @__PURE__ */ d("a", {
 		href: e,
 		className: n,
@@ -47,27 +47,27 @@ var g = {
 		product: (e) => `/shop/${e}`,
 		category: (e) => `/shop?category=${e}`
 	}
-}, _ = n(g);
-function v({ children: e, hrefs: t, ...n }) {
+}, v = n(_);
+function y({ children: e, hrefs: t, ...n }) {
 	let r = {
-		...g,
+		..._,
 		...n,
 		hrefs: {
-			...g.hrefs,
+			..._.hrefs,
 			...t
 		}
 	};
-	return /* @__PURE__ */ d(_.Provider, {
+	return /* @__PURE__ */ d(v.Provider, {
 		value: r,
 		children: e
 	});
 }
-function y() {
-	return i(_);
+function b() {
+	return i(v);
 }
 // src/components/price-tag/price-tag.tsx
-function b({ priceCents: t, currency: n, sold: r = !1, className: i }) {
-	let { locale: a } = y(), o = [
+function x({ priceCents: t, currency: n, sold: r = !1, className: i }) {
+	let { locale: a } = b(), o = [
 		"sf-price",
 		r && "sf-price--sold",
 		i
@@ -78,15 +78,15 @@ function b({ priceCents: t, currency: n, sold: r = !1, className: i }) {
 	});
 }
 // src/components/availability-badge/availability-badge.tsx
-var x = {
+var S = {
 	oneOfAKind: "One of a kind",
 	sold: "Sold",
 	reserved: "On hold",
 	available: "Available"
 };
-function S({ availability: e, quantity: t, labels: n, className: r }) {
+function C({ availability: e, quantity: t, labels: n, className: r }) {
 	let i = {
-		...x,
+		...S,
 		...n
 	}, a, o;
 	e === "sold" ? (a = "sold", o = i.sold) : e === "reserved" ? (a = "reserved", o = i.reserved) : t === 1 ? (a = "unique", o = i.oneOfAKind) : (a = "available", o = i.available);
@@ -102,8 +102,8 @@ function S({ availability: e, quantity: t, labels: n, className: r }) {
 	});
 }
 // src/components/product-card/product-card.tsx
-function C({ product: e, labels: t, sizes: n, priority: r }) {
-	let { renderLink: i, renderImage: a, hrefs: o } = y(), s = e.availability === "sold", c = e.images[0], l = ["sf-card", s && "sf-card--sold"].filter(Boolean).join(" ");
+function w({ product: e, labels: t, sizes: n, priority: r }) {
+	let { renderLink: i, renderImage: a, hrefs: o } = b(), s = e.availability === "sold", c = e.images[0], l = ["sf-card", s && "sf-card--sold"].filter(Boolean).join(" ");
 	return /* @__PURE__ */ d("article", {
 		className: l,
 		children: i({
@@ -128,12 +128,12 @@ function C({ product: e, labels: t, sizes: n, priority: r }) {
 						className: "sf-card__title",
 						children: e.name
 					}),
-					/* @__PURE__ */ d(b, {
+					/* @__PURE__ */ d(x, {
 						priceCents: e.priceCents,
 						currency: e.currency,
 						sold: s
 					}),
-					/* @__PURE__ */ d(S, {
+					/* @__PURE__ */ d(C, {
 						availability: e.availability,
 						quantity: e.quantity,
 						labels: t
@@ -144,7 +144,7 @@ function C({ product: e, labels: t, sizes: n, priority: r }) {
 	});
 }
 // src/components/product-grid/product-grid.tsx
-function w({ products: e, emptyState: t, labels: n, priorityCount: r = 0 }) {
+function T({ products: e, emptyState: t, labels: n, priorityCount: r = 0 }) {
 	return e.length === 0 ? /* @__PURE__ */ d("div", {
 		className: "sf-grid-empty",
 		children: t ?? "No products found."
@@ -152,7 +152,7 @@ function w({ products: e, emptyState: t, labels: n, priorityCount: r = 0 }) {
 		className: "sf-grid",
 		children: e.map((e, t) => /* @__PURE__ */ d("li", {
 			className: "sf-grid__item",
-			children: /* @__PURE__ */ d(C, {
+			children: /* @__PURE__ */ d(w, {
 				product: e,
 				labels: n,
 				priority: t < r
@@ -161,8 +161,8 @@ function w({ products: e, emptyState: t, labels: n, priorityCount: r = 0 }) {
 	});
 }
 // src/components/category-filter/category-filter.tsx
-function T({ categories: e, selected: t, onSelect: n, allLabel: r = "All", label: i = "Categories", formatLabel: a, sortCategories: o }) {
-	let { renderLink: s, hrefs: c } = y(), l = o ? [...e].sort(o) : e, u = n !== void 0, p = (e, r, i) => {
+function E({ categories: e, selected: t, onSelect: n, allLabel: r = "All", label: i = "Categories", formatLabel: a, sortCategories: o }) {
+	let { renderLink: s, hrefs: c } = b(), l = o ? [...e].sort(o) : e, u = n !== void 0, p = (e, r, i) => {
 		let a = t === e, o = `sf-filter__item${a ? " sf-filter__item--active" : ""}`;
 		return /* @__PURE__ */ d("li", { children: u ? /* @__PURE__ */ d("button", {
 			type: "button",
@@ -186,8 +186,8 @@ function T({ categories: e, selected: t, onSelect: n, allLabel: r = "All", label
 	});
 }
 // src/components/product-gallery/product-gallery.tsx
-function E({ images: e, sizes: t }) {
-	let { renderImage: n } = y(), [r, i] = l(0);
+function D({ images: e, sizes: t }) {
+	let { renderImage: n } = b(), [r, i] = l(0);
 	return e.length === 0 ? null : /* @__PURE__ */ f("div", {
 		className: "sf-gallery",
 		role: "group",
@@ -233,21 +233,21 @@ function E({ images: e, sizes: t }) {
 	});
 }
 // src/views/shop-view.tsx
-function D({ products: e, categories: n, activeCategory: r, slots: i = {}, labels: a, allLabel: o, formatCategoryLabel: s, sortCategories: c, nextHref: l, loadMoreLabel: u = "Load more" }) {
-	let { renderLink: p } = y();
+function O({ products: e, categories: n, activeCategory: r, slots: i = {}, labels: a, allLabel: o, formatCategoryLabel: s, sortCategories: c, nextHref: l, loadMoreLabel: u = "Load more" }) {
+	let { renderLink: p } = b();
 	return /* @__PURE__ */ f("div", {
 		className: "sf-shop",
 		children: [
 			i.header,
 			i.intro,
-			/* @__PURE__ */ d(T, {
+			/* @__PURE__ */ d(E, {
 				categories: n,
 				selected: r,
 				allLabel: o,
 				formatLabel: s,
 				sortCategories: c
 			}),
-			/* @__PURE__ */ d(w, {
+			/* @__PURE__ */ d(T, {
 				products: t(e),
 				emptyState: i.emptyState,
 				labels: a,
@@ -265,50 +265,59 @@ function D({ products: e, categories: n, activeCategory: r, slots: i = {}, label
 	});
 }
 // src/views/product-detail-view.tsx
-function O({ product: e, slots: t = {}, labels: n }) {
+function k({ product: e, slots: t = {}, labels: n, backHref: r, backLabel: i = "Back to the shop" }) {
+	let { renderLink: a } = b(), o = e.availability === "sold";
 	return /* @__PURE__ */ f("article", {
-		className: "sf-detail",
-		children: [/* @__PURE__ */ d(E, { images: e.images }), /* @__PURE__ */ f("div", {
-			className: "sf-detail__body",
-			children: [
-				/* @__PURE__ */ d("h1", {
-					className: "sf-detail__title",
-					children: e.name
-				}),
-				/* @__PURE__ */ d(b, {
-					priceCents: e.priceCents,
-					currency: e.currency
-				}),
-				/* @__PURE__ */ d(S, {
-					availability: e.availability,
-					quantity: e.quantity,
-					labels: n
-				}),
-				/* @__PURE__ */ d("p", {
-					className: "sf-detail__description",
-					children: e.description
-				}),
-				(e.materials || e.dimensions) && /* @__PURE__ */ f("dl", {
-					className: "sf-detail__specs",
-					children: [e.materials && /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d("dt", { children: "Materials" }), /* @__PURE__ */ d("dd", { children: e.materials })] }), e.dimensions && /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d("dt", { children: "Dimensions" }), /* @__PURE__ */ d("dd", { children: e.dimensions })] })]
-				}),
-				t.actions && /* @__PURE__ */ d("div", {
-					className: "sf-detail__actions",
-					children: t.actions
-				}),
-				t.afterDetails
-			]
-		})]
+		className: o ? "sf-detail sf-detail--sold" : "sf-detail",
+		children: [
+			r && a({
+				href: r,
+				className: "sf-detail__back",
+				children: i
+			}),
+			/* @__PURE__ */ d(D, { images: e.images }),
+			/* @__PURE__ */ f("div", {
+				className: "sf-detail__body",
+				children: [
+					/* @__PURE__ */ d("h1", {
+						className: "sf-detail__title",
+						children: e.name
+					}),
+					/* @__PURE__ */ d(x, {
+						priceCents: e.priceCents,
+						currency: e.currency
+					}),
+					/* @__PURE__ */ d(C, {
+						availability: e.availability,
+						quantity: e.quantity,
+						labels: n
+					}),
+					/* @__PURE__ */ d("p", {
+						className: "sf-detail__description",
+						children: e.description
+					}),
+					(e.materials || e.dimensions) && /* @__PURE__ */ f("dl", {
+						className: "sf-detail__specs",
+						children: [e.materials && /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d("dt", { children: "Materials" }), /* @__PURE__ */ d("dd", { children: e.materials })] }), e.dimensions && /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d("dt", { children: "Dimensions" }), /* @__PURE__ */ d("dd", { children: e.dimensions })] })]
+					}),
+					t.actions && /* @__PURE__ */ d("div", {
+						className: "sf-detail__actions",
+						children: t.actions
+					}),
+					t.afterDetails
+				]
+			})
+		]
 	});
 }
 // src/views/featured-products.tsx
-function k({ products: e, heading: t = "Featured", labels: n }) {
+function A({ products: e, heading: t = "Featured", labels: n }) {
 	return e.length === 0 ? null : /* @__PURE__ */ f("section", {
 		className: "sf-featured",
 		children: [/* @__PURE__ */ d("h2", {
 			className: "sf-featured__heading",
 			children: t
-		}), /* @__PURE__ */ d(w, {
+		}), /* @__PURE__ */ d(T, {
 			products: e,
 			labels: n,
 			priorityCount: 6
@@ -316,8 +325,8 @@ function k({ products: e, heading: t = "Featured", labels: n }) {
 	});
 }
 // src/cart/cart-reducer.ts
-var A = { lines: [] };
-function j(e, t) {
+var j = { lines: [] };
+function M(e, t) {
 	let n = e.lines[0];
 	if (n && n.currency !== t.currency) return {
 		state: e,
@@ -352,42 +361,42 @@ function j(e, t) {
 		capped: r.quantity + t.quantity > r.maxQuantity
 	};
 }
-function M(e, t) {
+function N(e, t) {
 	switch (t.type) {
-		case "add": return j(e, t.line).state;
+		case "add": return M(e, t.line).state;
 		case "remove": return { lines: e.lines.filter((e) => e.productId !== t.productId) };
-		case "setQuantity": return t.quantity <= 0 ? M(e, {
+		case "setQuantity": return t.quantity <= 0 ? N(e, {
 			type: "remove",
 			productId: t.productId
 		}) : { lines: e.lines.map((e) => e.productId === t.productId ? {
 			...e,
 			quantity: Math.min(t.quantity, e.maxQuantity)
 		} : e) };
-		case "clear": return A;
+		case "clear": return j;
 		case "hydrate": return t.state;
 	}
 }
-function N(e) {
+function P(e) {
 	return e.lines.reduce((e, t) => e + t.priceCents * t.quantity, 0);
 }
-function P(e) {
+function F(e) {
 	return e.lines.reduce((e, t) => e + t.quantity, 0);
 }
 // src/cart/cart-storage.ts
-function F(e = "sf-cart") {
+function I(e = "sf-cart") {
 	return {
 		load() {
-			if (typeof window > "u") return A;
+			if (typeof window > "u") return j;
 			try {
 				let t = window.localStorage.getItem(e);
-				if (!t) return A;
+				if (!t) return j;
 				let n = JSON.parse(t);
 				return { lines: (Array.isArray(n?.lines) ? n.lines : []).flatMap((e) => {
 					let t = p.safeParse(e);
 					return t.success ? [t.data] : [];
 				}) };
 			} catch {
-				return A;
+				return j;
 			}
 		},
 		save(t) {
@@ -398,9 +407,9 @@ function F(e = "sf-cart") {
 	};
 }
 // src/cart/cart-provider.tsx
-var I = n(null), L = F();
-function ee({ storage: e = L, children: t }) {
-	let [n, i] = s(M, A), [u, f] = l(!1), [p, m] = l(!1), h = c(n);
+var L = n(null), R = I();
+function z({ storage: e = R, children: t }) {
+	let [n, i] = s(N, j), [u, f] = l(!1), [p, m] = l(!1), h = c(n);
 	a(() => {
 		h.current = n;
 	}, [n]), a(() => {
@@ -421,15 +430,15 @@ function ee({ storage: e = L, children: t }) {
 		e
 	]);
 	let g = r((e) => {
-		let t = j(h.current, e);
+		let t = M(h.current, e);
 		return t.added && (h.current = t.state, i({
 			type: "add",
 			line: e
 		})), t;
 	}, []), _ = o(() => ({
 		lines: n.lines,
-		itemCount: P(n),
-		subtotalCents: N(n),
+		itemCount: F(n),
+		subtotalCents: P(n),
 		currency: n.lines[0]?.currency ?? null,
 		hydrated: u,
 		isOpen: p,
@@ -452,18 +461,18 @@ function ee({ storage: e = L, children: t }) {
 		p,
 		g
 	]);
-	return /* @__PURE__ */ d(I.Provider, {
+	return /* @__PURE__ */ d(L.Provider, {
 		value: _,
 		children: t
 	});
 }
-function R() {
-	let e = i(I);
+function B() {
+	let e = i(L);
 	if (!e) throw Error("useCart must be used inside <CartProvider>");
 	return e;
 }
 // src/components/cart-summary/discount-types.ts
-var z = {
+var V = {
 	toggle: "Have a code?",
 	field: "Discount code",
 	apply: "Apply",
@@ -480,17 +489,17 @@ var z = {
 		currency: "That code does not apply to this cart."
 	}
 };
-function B(e, t) {
-	return t?.[e] ?? z.reasons[e];
+function H(e, t) {
+	return t?.[e] ?? V.reasons[e];
 }
 // src/cart/use-checkout.ts
-var V = {
+var U = {
 	outOfStock: "Some items just sold or are on hold, so we removed them from your cart.",
 	unavailable: "Checkout is unavailable right now. Please try again."
-}, te = (e) => window.location.assign(e);
-function ne({ startCheckout: e, onRedirect: t = te, onDiscountInvalid: n, labels: i }) {
-	let a = R(), [o, s] = l(!1), [c, u] = l(null), { lines: d, remove: f } = a, p = {
-		...V,
+}, W = (e) => window.location.assign(e);
+function G({ startCheckout: e, onRedirect: t = W, onDiscountInvalid: n, labels: i }) {
+	let a = B(), [o, s] = l(!1), [c, u] = l(null), { lines: d, remove: f } = a, p = {
+		...U,
 		...i
 	};
 	return {
@@ -505,7 +514,7 @@ function ne({ startCheckout: e, onRedirect: t = te, onDiscountInvalid: n, labels
 					t(i.url);
 					return;
 				}
-				i.error === "discount_invalid" ? (u(B(i.reason, p.discountReasons)), n?.(i.reason)) : (i.productIds.forEach(f), u(p.outOfStock));
+				i.error === "discount_invalid" ? (u(H(i.reason, p.discountReasons)), n?.(i.reason)) : (i.productIds.forEach(f), u(p.outOfStock));
 			} catch {
 				u(p.unavailable);
 			}
@@ -524,17 +533,18 @@ function ne({ startCheckout: e, onRedirect: t = te, onDiscountInvalid: n, labels
 	};
 }
 // src/components/add-to-cart-button/add-to-cart-button.tsx
-var H = {
+var K = {
 	add: "Add to cart",
 	inCart: "In your cart",
-	unavailable: "Unavailable"
+	unavailable: "Unavailable",
+	sold: "Sold"
 };
-function U({ product: e, labels: t, openOnAdd: n = !0, className: r }) {
-	let i = R(), a = {
-		...H,
+function q({ product: e, labels: t, openOnAdd: n = !0, className: r }) {
+	let i = B(), a = {
+		...K,
 		...t
-	}, o = i.lines.find((t) => t.productId === e.id)?.quantity ?? 0, s = e.availability !== "available", c = o >= e.quantity, l = !i.hydrated || s || c, u = s ? a.unavailable : c ? a.inCart : a.add;
-	function f() {
+	}, o = i.lines.find((t) => t.productId === e.id)?.quantity ?? 0, s = e.availability === "sold", c = e.availability !== "available", l = o >= e.quantity, u = !i.hydrated || c || l, f = c ? a.unavailable : l ? a.inCart : a.add;
+	function p() {
 		i.add({
 			productId: e.id,
 			slug: e.slug,
@@ -546,22 +556,25 @@ function U({ product: e, labels: t, openOnAdd: n = !0, className: r }) {
 			maxQuantity: e.quantity
 		}).added && n && i.open();
 	}
-	return /* @__PURE__ */ d("button", {
+	return s ? /* @__PURE__ */ d("span", {
+		className: ["sf-sold-note", r].filter(Boolean).join(" "),
+		children: a.sold
+	}) : /* @__PURE__ */ d("button", {
 		type: "button",
 		className: ["sf-button", r].filter(Boolean).join(" "),
-		disabled: l,
-		onClick: f,
-		children: u
+		disabled: u,
+		onClick: p,
+		children: f
 	});
 }
 // src/components/cart-line-item/cart-line-item.tsx
-var W = {
+var J = {
 	remove: "Remove",
 	quantity: "Quantity"
 };
-function G({ line: t, labels: n }) {
-	let { remove: r, setQuantity: i } = R(), { locale: a, renderLink: o, renderImage: s, hrefs: c } = y(), l = {
-		...W,
+function Y({ line: t, labels: n }) {
+	let { remove: r, setQuantity: i } = B(), { locale: a, renderLink: o, renderImage: s, hrefs: c } = b(), l = {
+		...J,
 		...n
 	}, u = t.maxQuantity > 1;
 	return /* @__PURE__ */ f("li", {
@@ -605,17 +618,17 @@ function G({ line: t, labels: n }) {
 	});
 }
 // src/lib/parse-duration.ts
-function K(e) {
+function ee(e) {
 	let t = /^\s*(-?\d*\.?\d+)\s*(ms|s)\s*$/.exec(e);
 	if (!t) return 0;
 	let n = Number(t[1]);
 	return Math.max(0, t[2] === "s" ? n * 1e3 : n);
 }
 // src/components/cart-drawer/use-drawer-presence.ts
-function q(e, t) {
+function te(e, t) {
 	let [n, r] = l(0), [i, o] = l(e), [s, c] = l(!1);
 	return i !== e && (o(e), c(!e && n > 0)), a(() => {
-		e && t.current && r(K(getComputedStyle(t.current).getPropertyValue("--sf-motion-duration")));
+		e && t.current && r(ee(getComputedStyle(t.current).getPropertyValue("--sf-motion-duration")));
 	}, [e, t]), a(() => {
 		if (!s) return;
 		let e = setTimeout(() => c(!1), n);
@@ -626,7 +639,7 @@ function q(e, t) {
 	};
 }
 // src/components/cart-summary/discount-field.tsx
-function J({ labels: t, applied: n, error: r, pending: i, currency: a, locale: o, onApply: s, onRemove: c }) {
+function ne({ labels: t, applied: n, error: r, pending: i, currency: a, locale: o, onApply: s, onRemove: c }) {
 	let [u, p] = l(!1), [m, h] = l("");
 	function g(e) {
 		e.preventDefault();
@@ -684,8 +697,8 @@ function J({ labels: t, applied: n, error: r, pending: i, currency: a, locale: o
 	});
 }
 // src/components/cart-summary/use-discount.ts
-function Y(e) {
-	let { lines: t } = R(), n = t.map((e) => ({
+function re(e) {
+	let { lines: t } = B(), n = t.map((e) => ({
 		productId: e.productId,
 		quantity: e.quantity
 	})), i = n.map((e) => `${e.productId}:${e.quantity}`).join(","), [o, s] = l(null), [u, d] = l(null), [f, p] = l(!1), m = c({
@@ -744,12 +757,12 @@ function Y(e) {
 	};
 }
 // src/components/cart-summary/cart-summary.tsx
-function X({ onCheckout: t, checkoutLabel: n = "Checkout", checkoutDisabled: r = !1, labels: i, discount: a }) {
-	let o = R(), { locale: s } = y(), c = i?.subtotal ?? "Subtotal", l = Y(a), u = {
-		...z,
+function X({ onCheckout: t, checkoutLabel: n = "Checkout", checkoutDisabled: r = !1, labels: i, discount: a, showTaxNote: o = !1 }) {
+	let s = B(), { locale: c } = b(), l = i?.subtotal ?? "Subtotal", u = i?.taxNote ?? "Tax calculated at checkout", p = re(a), m = {
+		...V,
 		...i?.discount,
 		reasons: {
-			...z.reasons,
+			...V.reasons,
 			...i?.discount?.reasons
 		}
 	};
@@ -758,25 +771,29 @@ function X({ onCheckout: t, checkoutLabel: n = "Checkout", checkoutDisabled: r =
 		children: [
 			/* @__PURE__ */ f("p", {
 				className: "sf-cart-summary__row",
-				children: [/* @__PURE__ */ d("span", { children: c }), /* @__PURE__ */ d("span", {
+				children: [/* @__PURE__ */ d("span", { children: l }), /* @__PURE__ */ d("span", {
 					className: "sf-price",
-					children: e(o.subtotalCents, o.currency ?? "USD", s)
+					children: e(s.subtotalCents, s.currency ?? "USD", c)
 				})]
 			}),
-			a && o.lines.length > 0 && /* @__PURE__ */ d(J, {
-				labels: u,
-				currency: o.currency ?? "USD",
-				locale: s,
-				onApply: (e) => void l.apply(e),
-				onRemove: l.remove,
-				applied: l.applied,
-				error: l.error,
-				pending: l.pending
+			o && s.lines.length > 0 && /* @__PURE__ */ d("p", {
+				className: "sf-cart-summary__tax-note",
+				children: u
+			}),
+			a && s.lines.length > 0 && /* @__PURE__ */ d(ne, {
+				labels: m,
+				currency: s.currency ?? "USD",
+				locale: c,
+				onApply: (e) => void p.apply(e),
+				onRemove: p.remove,
+				applied: p.applied,
+				error: p.error,
+				pending: p.pending
 			}),
 			/* @__PURE__ */ d("button", {
 				type: "button",
 				className: "sf-button",
-				disabled: r || !t || o.lines.length === 0,
+				disabled: r || !t || s.lines.length === 0,
 				onClick: t,
 				children: n
 			})
@@ -789,11 +806,11 @@ var Z = {
 	close: "Close",
 	empty: "Your cart is empty."
 }, Q = "a[href], button:not([disabled]), input:not([disabled]), [tabindex]:not([tabindex=\"-1\"])";
-function re({ labels: e, summary: t, slots: n }) {
-	let r = R(), i = {
+function ie({ labels: e, summary: t, slots: n }) {
+	let r = B(), i = {
 		...Z,
 		...e
-	}, o = c(null), s = c(null), { isOpen: l } = r, p = q(l, s);
+	}, o = c(null), s = c(null), { isOpen: l } = r, p = te(l, s);
 	if (a(() => {
 		if (!l) return;
 		let e = document.activeElement;
@@ -846,7 +863,7 @@ function re({ labels: e, summary: t, slots: n }) {
 			}) : /* @__PURE__ */ f(u, { children: [
 				/* @__PURE__ */ d("ul", {
 					className: "sf-drawer__lines",
-					children: r.lines.map((e) => /* @__PURE__ */ d(G, { line: e }, e.productId))
+					children: r.lines.map((e) => /* @__PURE__ */ d(Y, { line: e }, e.productId))
 				}),
 				/* @__PURE__ */ d(X, { ...t }),
 				n?.summaryNote && /* @__PURE__ */ d("div", {
@@ -858,8 +875,8 @@ function re({ labels: e, summary: t, slots: n }) {
 	});
 }
 // src/components/cart-button/cart-button.tsx
-function ie({ label: e = "Cart", className: t, icon: n, labelHidden: r = !1, hideZeroCount: i = !1 }) {
-	let a = R(), o = a.hydrated ? a.itemCount : 0, s = !(i && o === 0), c = s ? r ? `${e}, ${a.itemCount} items` : void 0 : `${e}, empty`;
+function ae({ label: e = "Cart", className: t, icon: n, labelHidden: r = !1, hideZeroCount: i = !1 }) {
+	let a = B(), o = a.hydrated ? a.itemCount : 0, s = !(i && o === 0), c = s ? r ? `${e}, ${a.itemCount} items` : void 0 : `${e}, empty`;
 	return /* @__PURE__ */ f("button", {
 		type: "button",
 		className: ["sf-cart-button", t].filter(Boolean).join(" "),
@@ -889,6 +906,7 @@ var $ = {
 	subtotal: "Subtotal",
 	discount: "Discount",
 	shipping: "Shipping",
+	tax: "Tax",
 	total: "Total",
 	shipTo: "Ship to",
 	tracking: "Track",
@@ -903,7 +921,7 @@ var $ = {
 	}
 };
 // src/components/checkout-success/checkout-success-view.tsx
-function ae(e) {
+function oe(e) {
 	let t = [
 		e.city,
 		e.state,
@@ -917,7 +935,7 @@ function ae(e) {
 		e.country
 	].filter((e) => !!e);
 }
-function oe({ order: t, locale: n, labels: r, className: i, slots: a, showReference: o, showSummaryHeading: s, continueHref: c, renderLink: l }) {
+function se({ order: t, locale: n, labels: r, className: i, slots: a, showReference: o, showSummaryHeading: s, continueHref: c, renderLink: l }) {
 	let u = {
 		...$,
 		...r,
@@ -925,11 +943,11 @@ function oe({ order: t, locale: n, labels: r, className: i, slots: a, showRefere
 			...$.status,
 			...r?.status
 		}
-	}, p = (r) => e(r, t.currency, n), m = t.shippingAddress ? ae(t.shippingAddress) : [], { fulfillment: h } = t, g = {
+	}, p = (r) => e(r, t.currency, n), h = t.shippingAddress ? oe(t.shippingAddress) : [], { fulfillment: g } = t, _ = {
 		href: c ?? "",
 		className: "sf-checkout-success__continue",
 		children: u.continue
-	}, _ = c ? l ? l(g) : /* @__PURE__ */ d("a", { ...g }) : null, v = a?.actions ?? _;
+	}, v = c ? l ? l(_) : /* @__PURE__ */ d("a", { ..._ }) : null, y = a?.actions ?? v;
 	return /* @__PURE__ */ f("section", {
 		className: ["sf-checkout-success", i].filter(Boolean).join(" "),
 		"data-status": t.status,
@@ -940,7 +958,7 @@ function oe({ order: t, locale: n, labels: r, className: i, slots: a, showRefere
 			}),
 			o && /* @__PURE__ */ d("p", {
 				className: "sf-checkout-success__reference",
-				children: u.reference.replace("{id}", t.id)
+				children: u.reference.replace("{id}", m(t.id))
 			}),
 			a?.header,
 			/* @__PURE__ */ d("p", {
@@ -984,6 +1002,11 @@ function oe({ order: t, locale: n, labels: r, className: i, slots: a, showRefere
 							")"
 						] }), /* @__PURE__ */ d("dd", { children: p(t.shippingCents) })]
 					}),
+					t.taxCents > 0 && /* @__PURE__ */ f("div", {
+						className: "sf-checkout-success__row",
+						"data-tax": !0,
+						children: [/* @__PURE__ */ d("dt", { children: u.tax }), /* @__PURE__ */ d("dd", { children: p(t.taxCents) })]
+					}),
 					/* @__PURE__ */ f("div", {
 						className: "sf-checkout-success__row sf-checkout-success__row--total",
 						children: [/* @__PURE__ */ d("dt", { children: u.total }), /* @__PURE__ */ d("dd", { children: p(t.totalCents) })]
@@ -991,35 +1014,35 @@ function oe({ order: t, locale: n, labels: r, className: i, slots: a, showRefere
 				]
 			}),
 			a?.afterTotals,
-			m.length > 0 && /* @__PURE__ */ f("address", {
+			h.length > 0 && /* @__PURE__ */ f("address", {
 				className: "sf-checkout-success__address",
-				children: [/* @__PURE__ */ d("strong", { children: u.shipTo }), m.map((e) => /* @__PURE__ */ d("span", { children: e }, e))]
+				children: [/* @__PURE__ */ d("strong", { children: u.shipTo }), h.map((e) => /* @__PURE__ */ d("span", { children: e }, e))]
 			}),
-			h?.trackingNumber && /* @__PURE__ */ f("p", {
+			g?.trackingNumber && /* @__PURE__ */ f("p", {
 				className: "sf-checkout-success__tracking",
-				children: [h.carrier && `${h.carrier} · `, h.trackingUrl ? /* @__PURE__ */ f("a", {
-					href: h.trackingUrl,
+				children: [g.carrier && `${g.carrier} · `, g.trackingUrl ? /* @__PURE__ */ f("a", {
+					href: g.trackingUrl,
 					children: [
 						u.tracking,
 						" ",
-						h.trackingNumber
+						g.trackingNumber
 					]
-				}) : h.trackingNumber]
+				}) : g.trackingNumber]
 			}),
-			v && /* @__PURE__ */ d("div", {
+			y && /* @__PURE__ */ d("div", {
 				className: "sf-checkout-success__actions",
-				children: v
+				children: y
 			})
 		]
 	});
 }
 // src/cart/clear-cart-on-mount.tsx
-function se() {
-	let { hydrated: e, clear: t } = R(), n = c(!1);
+function ce() {
+	let { hydrated: e, clear: t } = B(), n = c(!1);
 	return a(() => {
 		e && !n.current && (n.current = !0, t());
 	}, [e, t]), null;
 }
-export { U as AddToCartButton, S as AvailabilityBadge, ie as CartButton, re as CartDrawer, G as CartLineItem, ee as CartProvider, X as CartSummary, T as CategoryFilter, oe as CheckoutSuccessView, se as ClearCartOnMount, k as FeaturedProducts, b as PriceTag, C as ProductCard, O as ProductDetailView, E as ProductGallery, w as ProductGrid, D as ShopView, v as StorefrontProvider, j as addLine, M as cartReducer, H as defaultAddToCartLabels, x as defaultAvailabilityLabels, Z as defaultCartDrawerLabels, W as defaultCartLineItemLabels, V as defaultCheckoutLabels, $ as defaultCheckoutSuccessLabels, B as discountReasonMessage, A as emptyCart, e as formatPrice, P as itemCount, F as localStorageCartStorage, t as sortForDisplay, N as subtotalCents, h as themeToCssVars, R as useCart, ne as useCheckout, y as useStorefront };
+export { q as AddToCartButton, C as AvailabilityBadge, ae as CartButton, ie as CartDrawer, Y as CartLineItem, z as CartProvider, X as CartSummary, E as CategoryFilter, se as CheckoutSuccessView, ce as ClearCartOnMount, A as FeaturedProducts, x as PriceTag, w as ProductCard, k as ProductDetailView, D as ProductGallery, T as ProductGrid, O as ShopView, y as StorefrontProvider, M as addLine, N as cartReducer, K as defaultAddToCartLabels, S as defaultAvailabilityLabels, Z as defaultCartDrawerLabels, J as defaultCartLineItemLabels, U as defaultCheckoutLabels, $ as defaultCheckoutSuccessLabels, H as discountReasonMessage, j as emptyCart, e as formatPrice, F as itemCount, I as localStorageCartStorage, t as sortForDisplay, P as subtotalCents, g as themeToCssVars, B as useCart, G as useCheckout, b as useStorefront };
 
 //# sourceMappingURL=index.js.map