@vtex/faststore 0.0.1

package/dist/matter/cart/cart.js

@@ -0,0 +1,1034 @@
+"use client";
+import { defineComponent } from "../../core/dist/define-component.js";
+import { defineContentType } from "../../core/dist/define-content-type.js";
+import "../../core/dist/index.js";
+import { useStorefrontContext } from "../../sdk/context/storefront-context.js";
+import { graphql } from "../../sdk/generated/gql.js";
+import { useDataOverride } from "../../sdk/data/data-override-context.js";
+import { Icon } from "../../particles/icon/icon.js";
+import { NavigationLink } from "../../particles/navigation-link/navigation-link.js";
+import { DrawerClose } from "../../particles/drawer/drawer.js";
+import { Image } from "../../particles/image/image.js";
+import { cartCouponErrorsVar, cartLastAddVar, cartUserErrorsVar, miniCartOpenVar, orderFormIdVar } from "../../sdk/state/cart.js";
+import { awaitCartWrites } from "../../sdk/cart/write-gate.js";
+import { readCartFromCache } from "../../sdk/cart/use-cart-actions.js";
+import { useCartValidateOnOpen } from "../../sdk/cart/use-cart-validate-on-open.js";
+import { ListItemRefContext } from "../../sdk/data/list-item-ref-context.js";
+import { ReactiveRootContext } from "../../sdk/data/page-reactive-data-root.js";
+import { useApolloClient, useReactiveVar } from "@apollo/client/react";
+import { cloneElement, createContext, isValidElement, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRouter } from "next/navigation";
+import { useLinkStatus } from "next/link";
+//#region src/matter/cart/cart.tsx
+const CartDisclaimerContent = defineContentType({
+	id: "cart-disclaimer",
+	title: "Cart Disclaimer",
+	description: "Conditions, limits, or legal wording shown in the cart before checkout.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		required: ["text"],
+		properties: { text: {
+			type: "string",
+			minLength: 1,
+			title: "Disclaimer text"
+		} }
+	}
+});
+const CartCheckoutLabelContent = defineContentType({
+	id: "cart-checkout-label",
+	title: "Cart Checkout Label",
+	description: "Editorial label for the checkout call to action.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		required: ["label"],
+		properties: { label: {
+			type: "string",
+			minLength: 1,
+			title: "Checkout label"
+		} }
+	}
+});
+const fragment = graphql(`
+  fragment CartData on Query {
+    cart {
+      __typename
+      id
+      items {
+        __typename
+        id
+        quantity
+        gift
+        variant {
+          __typename
+          availability
+        }
+      }
+      totalizers {
+        __typename
+        id
+        name
+        value {
+          ...MoneyFragment
+        }
+      }
+      total {
+        ...MoneyFragment
+      }
+      messages {
+        __typename
+        code
+        text
+        status
+      }
+      appliedCoupons {
+        code
+        isUnmatchedCondition
+      }
+    }
+  }
+`);
+function formatPrice(value, locale, currency) {
+	return new Intl.NumberFormat(locale, {
+		style: "currency",
+		currency
+	}).format(value);
+}
+const CartTotalValueContext = createContext(null);
+const CART_DATA_UNSET = Symbol("CartDataContextUnset");
+const CartDataContextInternal = createContext(CART_DATA_UNSET);
+const CartDataContext = CartDataContextInternal;
+/**
+* Read the current cart entity and query error from the nearest `CartRoot`. Throws when called
+* outside a `CartRoot` subtree.
+*
+* Cart *writes* no longer flow through this context — they are dispatched via the compiler-injected
+* `$actions.cart.*` prop (the `cart` action namespace), which reads/writes the cache directly and
+* needs no `CartRoot` ancestor (specs/actions.md, ADR-0010). This hook is reads only.
+*/
+function useCart() {
+	const ctx = useContext(CartDataContextInternal);
+	if (ctx === CART_DATA_UNSET) throw new Error("useCart() must be used inside a <CartRoot> subtree.");
+	return ctx;
+}
+const CartCouponContext = createContext(null);
+const CartRootDefinition = defineComponent({
+	name: "CartRoot",
+	importPath: "@vtex/faststore/components",
+	component: CartRoot,
+	fragment,
+	fetchStrategy: "reactive",
+	editor: {
+		label: "Cart Root",
+		category: "commerce"
+	},
+	schema: {},
+	guideline: "Cart data provider hosted by the layout (shared shell), wrapping the slot so every page consumes its context; exactly one per tree — do not place it as a page root. To build a mini-cart, wrap this CartRoot subtree in a modal DrawerRoot: the header carries a DrawerTrigger with a CartCount badge, the DrawerPopup body is a CartList line-item template, and its footer is CartTotal plus CartGoCheckout. The mini-cart is this layout composition, not a dedicated component. See cart.md."
+});
+const CartListDefinition = defineComponent({
+	name: "CartList",
+	importPath: "@vtex/faststore/components",
+	component: CartList,
+	editor: {
+		label: "Cart List",
+		category: "commerce"
+	},
+	schema: { skeletonCount: {
+		type: "number",
+		default: 3,
+		label: "Skeleton Count"
+	} },
+	providesContext: "cart-item",
+	guideline: "Renders its children once per cart item; wrap the line-item template in a CartItemRoot and place CartItem* components inside it to define the template (e.g. CartItemImage, CartItemName, CartItemPrice, a CartItemQuantity stepper, CartItemRemove). While the cart is loading it renders skeletonCount CartItemSkeleton placeholders instead. In a mini-cart it is the scrollable body of the DrawerPopup. Must be inside CartRoot."
+});
+const CartTotalDefinition = defineComponent({
+	name: "CartTotal",
+	importPath: "@vtex/faststore/components",
+	component: CartTotal,
+	editor: {
+		label: "Cart Total",
+		category: "commerce"
+	},
+	schema: { label: {
+		type: "string",
+		label: "Label"
+	} },
+	guideline: "The single root-agnostic grand-total component: renders the cart grand total, formatted from the active storefront context, reading the value from the nearest CartRoot or CartTotalizerRoot. Set the optional label prop to render a label alongside the value (e.g. \"Total\"); omit it to render the value alone. In a mini-cart it sits in the DrawerPopup footer alongside CartGoCheckout, inside a CartCheckoutGuard, so the total is visible at the checkout button."
+});
+const CartCountDefinition = defineComponent({
+	name: "CartCount",
+	importPath: "@vtex/faststore/components",
+	component: CartCount,
+	editor: {
+		label: "Cart Count",
+		category: "commerce"
+	},
+	schema: { template: {
+		type: "string",
+		default: "{count}",
+		label: "Template"
+	} },
+	guideline: "Renders the total item count in the cart; use the template prop to customize the format (e.g. '{count} produtos'). Gift lines are excluded from the count — a promotional gift is not something the shopper added — so a cart holding only gifts shows 0. In a mini-cart, place it as the badge on the header DrawerTrigger and again in the DrawerPopup header. Must be inside CartRoot."
+});
+const CartErrorDefinition = defineComponent({
+	name: "CartError",
+	importPath: "@vtex/faststore/components",
+	component: CartError,
+	editor: {
+		label: "Cart Error",
+		category: "commerce"
+	},
+	schema: {},
+	guideline: "Inline error banner that surfaces cart mutation errors. Must be inside CartRoot."
+});
+const CartGoCheckoutDefinition = defineComponent({
+	name: "CartGoCheckout",
+	importPath: "@vtex/faststore/components",
+	component: CartGoCheckout,
+	content: CartCheckoutLabelContent,
+	editor: {
+		label: "Cart Go Checkout",
+		category: "commerce"
+	},
+	schema: {
+		href: {
+			type: "string",
+			default: "/checkout",
+			label: "Checkout URL"
+		},
+		label: {
+			type: "string",
+			default: "Checkout",
+			label: "Checkout label"
+		}
+	},
+	actions: { cart: ["validate"] },
+	guideline: "Navigation link to the checkout page (default href /checkout); use as the checkout CTA inside the cart summary. In a mini-cart it is the DrawerPopup footer CTA, next to CartTotal. The button wording is merchant-editable content: a CMS entry wins, then the label prop (default \"Checkout\"), then children — so a store that labels the button through children keeps working and a CMS save overrides it without a deploy. The destination is not content-editable: href stays an authored prop, because re-pointing checkout is not a copy decision. Before routing it runs a stock validation and only navigates when the re-checked cart has no unavailable line; a validation that cannot run falls open and navigates anyway. During a client-side route transition to checkout it surfaces a loading state on its content wrapper as aria-busy plus data-fs-cart-go-checkout-pending, and while the pre-checkout validation runs it exposes data-fs-cart-go-checkout-validating — there is no built-in spinner, so opt into one by styling those attributes (e.g. composing a Spinner). For an external or hard checkout navigation there is no client-side transition, so the loading state simply does not show (a graceful no-op). The enriched footer checkout CTA is CartCheckoutGuard wrapping CartTotal and this CartGoCheckout: the guard makes the CTA inert (data-fs-cart-checkout-blocked) while any item is unavailable, and CartTotal shows the grand total at the button. Must be inside CartRoot."
+});
+const CartCouponFormDefinition = defineComponent({
+	name: "CartCouponForm",
+	importPath: "@vtex/faststore/components",
+	component: CartCouponForm,
+	editor: {
+		label: "Cart Coupon Form",
+		category: "commerce"
+	},
+	schema: {
+		placeholder: {
+			type: "string",
+			label: "Placeholder"
+		},
+		applyLabel: {
+			type: "string",
+			label: "Apply Label"
+		}
+	},
+	actions: { cart: ["applyCoupon"] },
+	guideline: "Coupon code input plus an apply button; root-agnostic (dispatches $actions.cart.applyCoupon). While an apply is in flight it disables the input and button and exposes data-fs-cart-coupon-pending. In a mini-cart it sits in the DrawerPopup footer above the totals; pair it with CartAppliedCoupons (the applied list) and CartCouponError (the error banner). Must be inside CartRoot."
+});
+const CartAppliedCouponsDefinition = defineComponent({
+	name: "CartAppliedCoupons",
+	importPath: "@vtex/faststore/components",
+	component: CartAppliedCoupons,
+	editor: {
+		label: "Cart Applied Coupons",
+		category: "commerce"
+	},
+	schema: {},
+	actions: { cart: ["removeCoupon"] },
+	guideline: "Renders one chip per applied coupon (cart.appliedCoupons), each showing its code and a CartCouponRemove control; renders nothing when no coupons are applied. A coupon whose conditions did not match is marked with data-fs-cart-coupon-unmatched. Place it next to CartCouponForm in the mini-cart footer. Must be inside CartRoot."
+});
+const CartCouponRemoveDefinition = defineComponent({
+	name: "CartCouponRemove",
+	importPath: "@vtex/faststore/components",
+	component: CartCouponRemove,
+	editor: {
+		label: "Cart Coupon Remove",
+		category: "commerce"
+	},
+	schema: { code: {
+		type: "string",
+		label: "Coupon Code"
+	} },
+	actions: { cart: ["removeCoupon"] },
+	guideline: "The per-chip remove control (the X); dispatches $actions.cart.removeCoupon for that chip's code. Use inside a CartAppliedCoupons chip, which supplies the code via context. If used standalone (no CartAppliedCoupons ancestor), pass the code prop explicitly — without a code the remove action has no target and the button is a no-op."
+});
+const CartCouponErrorDefinition = defineComponent({
+	name: "CartCouponError",
+	importPath: "@vtex/faststore/components",
+	component: CartCouponError,
+	editor: {
+		label: "Cart Coupon Error",
+		category: "commerce"
+	},
+	schema: {},
+	guideline: "Inline error banner that surfaces coupon apply/remove errors next to the CartCouponForm; renders nothing when there are none. Reads a dedicated coupon error channel, separate from CartError. Must be inside CartRoot."
+});
+function CartRoot({ $data: $dataProp, className, children, ...props }) {
+	const cart = useDataOverride($dataProp) ?? null;
+	const { error: rootError } = useContext(ReactiveRootContext);
+	const cartEntityId = cart?.id ?? null;
+	useEffect(() => {
+		if (cartEntityId) orderFormIdVar(cartEntityId);
+	}, [cartEntityId]);
+	const dataValue = useMemo(() => ({
+		cart,
+		error: rootError ?? null
+	}), [cart, rootError]);
+	return /* @__PURE__ */ jsx(CartTotalValueContext, {
+		value: cart?.total ?? null,
+		children: /* @__PURE__ */ jsx(CartDataContextInternal, {
+			value: dataValue,
+			children: /* @__PURE__ */ jsx("div", {
+				...props,
+				className,
+				"data-fs-cart-root": "",
+				children
+			})
+		})
+	});
+}
+function CartList({ className, children, skeletonCount = 3, ...props }) {
+	const { cart } = useCart();
+	const { loading } = useContext(ReactiveRootContext);
+	const items = cart?.items ?? [];
+	if (loading && cart == null) return /* @__PURE__ */ jsx("div", {
+		...props,
+		className,
+		"data-fs-cart-list": "",
+		children: Array.from({ length: skeletonCount }, (_, i) => /* @__PURE__ */ jsx(CartItemSkeleton, {}, i))
+	});
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className,
+		"data-fs-cart-list": "",
+		children: items.map((item) => /* @__PURE__ */ jsx(ListItemRefContext, {
+			value: {
+				__typename: "CartItem",
+				id: item.id,
+				fallbackData: item
+			},
+			children
+		}, item.id))
+	});
+}
+function CartTotal({ label, className, children, ...props }) {
+	const total = useContext(CartTotalValueContext);
+	const { locale, currency } = useStorefrontContext();
+	const value = children ?? formatPrice(total?.amount ?? 0, locale, currency);
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		className,
+		"data-fs-cart-total": "",
+		"data-fs-text": "",
+		children: label == null ? value : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", { children: label }), /* @__PURE__ */ jsx("span", { children: value })] })
+	});
+}
+function CartCount({ className, children, template = "{count}", ...props }) {
+	const { cart } = useCart();
+	const count = cart?.items.reduce((sum, item) => item.gift ? sum : sum + item.quantity, 0) ?? 0;
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		className,
+		"data-fs-cart-count": "",
+		"data-fs-text": "",
+		children: children ?? template.replace("{count}", String(count))
+	});
+}
+function CartError({ className, children, ...props }) {
+	const [firstError] = useReactiveVar(cartUserErrorsVar);
+	if (!firstError) return null;
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		role: "alert",
+		className,
+		"data-fs-cart-error": "",
+		"data-fs-text": "",
+		children: children ?? firstError.message
+	});
+}
+function CartGoCheckoutPending({ children }) {
+	const { pending } = useLinkStatus();
+	return /* @__PURE__ */ jsx("span", {
+		"data-fs-cart-go-checkout-content": "",
+		"aria-busy": pending || void 0,
+		...pending ? { "data-fs-cart-go-checkout-pending": "" } : {},
+		children
+	});
+}
+function configuredLabel(value) {
+	return value?.trim() ? value : void 0;
+}
+function navigateToCheckout(href, push) {
+	if (/^https?:\/\//i.test(href)) globalThis.location.assign(href);
+	else push(href);
+}
+function CartGoCheckout({ href = "/checkout", label, className, children, onClick, $content, $actions, ...props }) {
+	const client = useApolloClient();
+	const router = useRouter();
+	const [validating, setValidating] = useState(false);
+	const inFlight = useRef(false);
+	const resolvedChildren = typeof children === "string" ? configuredLabel(children) : children;
+	const resolvedLabel = configuredLabel($content?.label) ?? configuredLabel(label) ?? resolvedChildren ?? "Checkout";
+	async function handleClick(e) {
+		onClick?.(e);
+		const validate = $actions?.cart?.validate;
+		if (!validate) return;
+		if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+		e.preventDefault();
+		if (inFlight.current) return;
+		inFlight.current = true;
+		setValidating(true);
+		try {
+			await awaitCartWrites();
+			if ((await validate()).length > 0) {
+				navigateToCheckout(href, router.push);
+				return;
+			}
+			if (!(readCartFromCache(client)?.items ?? []).some((item) => item.variant.availability !== "AVAILABLE")) navigateToCheckout(href, router.push);
+		} finally {
+			inFlight.current = false;
+			setValidating(false);
+		}
+	}
+	return /* @__PURE__ */ jsx(NavigationLink, {
+		...props,
+		href,
+		onClick: handleClick,
+		className,
+		"data-fs-cart-go-checkout": "",
+		...validating ? { "data-fs-cart-go-checkout-validating": "" } : {},
+		children: /* @__PURE__ */ jsx(CartGoCheckoutPending, { children: resolvedLabel })
+	});
+}
+function CartCouponForm({ placeholder = "Coupon code", applyLabel = "Apply", className, children, onSubmit, $actions, ...props }) {
+	const [code, setCode] = useState("");
+	const [pending, setPending] = useState(false);
+	async function handleSubmit(e) {
+		e.preventDefault();
+		onSubmit?.(e);
+		const trimmed = code.trim();
+		if (!trimmed || pending) return;
+		setPending(true);
+		try {
+			const errors = await $actions?.cart?.applyCoupon?.({ code: trimmed });
+			if (!errors || errors.length === 0) setCode("");
+		} finally {
+			setPending(false);
+		}
+	}
+	return /* @__PURE__ */ jsx("form", {
+		...props,
+		className,
+		onSubmit: handleSubmit,
+		"data-fs-cart-coupon-form": "",
+		...pending ? { "data-fs-cart-coupon-pending": "" } : {},
+		children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("input", {
+			type: "text",
+			value: code,
+			placeholder,
+			"aria-label": placeholder,
+			disabled: pending,
+			onChange: (e) => setCode(e.target.value),
+			"data-fs-cart-coupon-input": ""
+		}), /* @__PURE__ */ jsx("button", {
+			type: "submit",
+			disabled: pending,
+			"data-fs-cart-coupon-apply": "",
+			"data-fs-button": "",
+			children: applyLabel
+		})] })
+	});
+}
+function CartAppliedCoupons({ className, children, $actions, ...props }) {
+	const { cart } = useCart();
+	const coupons = cart?.appliedCoupons ?? [];
+	if (coupons.length === 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className,
+		"data-fs-cart-applied-coupons": "",
+		children: coupons.map((coupon) => /* @__PURE__ */ jsx(CartCouponContext, {
+			value: coupon,
+			children: /* @__PURE__ */ jsx(CartCouponChip, {
+				$actions,
+				children
+			})
+		}, coupon.code))
+	});
+}
+function CartCouponChip({ children, $actions }) {
+	const coupon = useContext(CartCouponContext);
+	if (!coupon) return null;
+	return /* @__PURE__ */ jsxs("span", {
+		"data-fs-cart-coupon": "",
+		...coupon.isUnmatchedCondition ? { "data-fs-cart-coupon-unmatched": "" } : {},
+		children: [/* @__PURE__ */ jsx("span", {
+			"data-fs-cart-coupon-code": "",
+			"data-fs-text": "",
+			children: coupon.code
+		}), children ?? /* @__PURE__ */ jsx(CartCouponRemove, {
+			$actions,
+			"aria-label": `Remove coupon ${coupon.code}`,
+			children: "×"
+		})]
+	});
+}
+function CartCouponRemove({ code, className, children, onClick, $actions, ...props }) {
+	const coupon = useContext(CartCouponContext);
+	const targetCode = code ?? coupon?.code;
+	function handleClick(e) {
+		if (targetCode) $actions?.cart?.removeCoupon?.({ code: targetCode });
+		onClick?.(e);
+	}
+	return /* @__PURE__ */ jsx("button", {
+		...props,
+		type: "button",
+		className,
+		onClick: handleClick,
+		"data-fs-cart-coupon-remove": "",
+		"data-fs-button": "",
+		children
+	});
+}
+function CartCouponError({ className, children, ...props }) {
+	const [firstError] = useReactiveVar(cartCouponErrorsVar);
+	if (!firstError) return null;
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		role: "alert",
+		className,
+		"data-fs-cart-coupon-error": "",
+		"data-fs-text": "",
+		children: children ?? firstError.message
+	});
+}
+const CartCheckoutGuardDefinition = defineComponent({
+	name: "CartCheckoutGuard",
+	importPath: "@vtex/faststore/components",
+	component: CartCheckoutGuard,
+	editor: {
+		label: "Cart Checkout Guard",
+		category: "commerce"
+	},
+	schema: {},
+	guideline: "Wraps the checkout CTA and blocks progression while any cart item is unavailable: the subtree is made non-interactive (inert) and data-fs-cart-checkout-blocked is exposed for styling the disabled state. In the mini-cart DrawerPopup footer it is the enriched checkout CTA wrapper: place CartTotal and CartGoCheckout inside it so the grand total sits at the button and the whole CTA goes inert when an item cannot be delivered. Must be inside CartRoot."
+});
+const CartLoadingDefinition = defineComponent({
+	name: "CartLoading",
+	importPath: "@vtex/faststore/components",
+	component: CartLoading,
+	editor: {
+		label: "Cart Loading",
+		category: "commerce"
+	},
+	schema: {},
+	guideline: "The loading branch of the three-state mini-cart (loading / empty / filled): renders its children only while the cart is still loading. Supply a skeleton placeholder as its child. Pair with CartEmpty and CartFilled. Must be inside CartRoot. See cart.md."
+});
+const CartEmptyDefinition = defineComponent({
+	name: "CartEmpty",
+	importPath: "@vtex/faststore/components",
+	component: CartEmpty,
+	editor: {
+		label: "Cart Empty",
+		category: "commerce"
+	},
+	schema: {},
+	guideline: "The empty branch of the three-state mini-cart (loading / empty / filled): renders its children only when the cart has resolved with zero items. It carries no copy of its own — compose CartEmptyMessage for the message and CartContinueShopping for the continue-shopping control, in whatever order and grouping the panel needs. Pair with CartLoading and CartFilled. Must be inside CartRoot. See cart.md."
+});
+const CartFilledDefinition = defineComponent({
+	name: "CartFilled",
+	importPath: "@vtex/faststore/components",
+	component: CartFilled,
+	editor: {
+		label: "Cart Filled",
+		category: "commerce"
+	},
+	schema: {},
+	guideline: "The filled branch of the three-state mini-cart (loading / empty / filled): renders its children only when the cart has one or more items. Wrap the CartList, the order summary, and the checkout CTA in it so they hide when the cart is empty. Pair with CartLoading and CartEmpty. Must be inside CartRoot. See cart.md."
+});
+const CartUnavailableCountDefinition = defineComponent({
+	name: "CartUnavailableCount",
+	importPath: "@vtex/faststore/components",
+	component: CartUnavailableCount,
+	editor: {
+		label: "Cart Unavailable Count",
+		category: "commerce"
+	},
+	schema: { template: {
+		type: "string",
+		default: "{count} items unavailable",
+		label: "Template"
+	} },
+	guideline: "Cart-level summary of how many lines are unavailable; self-hides when none. See cart.md."
+});
+const CartRemoveUnavailableDefinition = defineComponent({
+	name: "CartRemoveUnavailable",
+	importPath: "@vtex/faststore/components",
+	component: CartRemoveUnavailable,
+	editor: {
+		label: "Cart Remove Unavailable",
+		category: "commerce"
+	},
+	schema: {},
+	actions: { cart: ["removeItems"] },
+	guideline: "Button that removes every unavailable line in one batch call; self-hides when none. See cart.md."
+});
+function isUnavailable(item) {
+	return item.variant.availability !== "AVAILABLE";
+}
+function CartCheckoutGuard({ className, children, ...props }) {
+	const { cart } = useCart();
+	const blocked = (cart?.items ?? []).some(isUnavailable);
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className,
+		inert: blocked,
+		"aria-disabled": blocked || void 0,
+		"data-fs-cart-checkout-guard": "",
+		"data-fs-cart-checkout-blocked": blocked ? "" : void 0,
+		children
+	});
+}
+function CartUnavailableCount({ className, children, template = "{count} items unavailable", ...props }) {
+	const { cart } = useCart();
+	const count = (cart?.items ?? []).filter(isUnavailable).length;
+	if (count === 0) return null;
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		className,
+		"data-fs-cart-unavailable-count": "",
+		"data-fs-text": "",
+		children: children ?? template.replace("{count}", String(count))
+	});
+}
+function CartRemoveUnavailable({ className, children, onClick, $actions, ...props }) {
+	const { cart } = useCart();
+	const unavailableIds = (cart?.items ?? []).filter(isUnavailable).map((item) => item.id);
+	if (unavailableIds.length === 0) return null;
+	function handleClick(e) {
+		$actions?.cart?.removeItems?.({ ids: unavailableIds });
+		onClick?.(e);
+	}
+	return /* @__PURE__ */ jsx("button", {
+		...props,
+		type: "button",
+		className,
+		onClick: handleClick,
+		"data-fs-cart-remove-unavailable": "",
+		"data-fs-button": "",
+		children: children ?? "Remove unavailable items"
+	});
+}
+const CartOpenOnAddDefinition = defineComponent({
+	name: "CartOpenOnAdd",
+	importPath: "@vtex/faststore/components",
+	component: CartOpenOnAdd,
+	editor: {
+		label: "Cart Open On Add",
+		category: "commerce"
+	},
+	schema: {},
+	actions: { cart: ["validate"] },
+	guideline: "Mini-cart post-add behavior: wraps the mini-cart DrawerRoot subtree and opens the drawer automatically on each successful add to cart. Compose it as the parent of the DrawerRoot (its single child) — the header DrawerTrigger, the popup, and the cart leaves stay inside that DrawerRoot. It makes the drawer controlled internally, so do not set raw open/onOpenChange on DrawerRoot; the header trigger and manual close (Escape / backdrop / close button) keep working. It also runs a stock validation when the overlay opens, behind a short staleness window and skipped while a cart write is in flight, so opening a cart that went stale corrects it before the shopper acts. Use only in a store that has a mini-cart drawer. Mutually exclusive with CartRedirectOnAdd — compose exactly one. See cart.md."
+});
+const CartRedirectOnAddDefinition = defineComponent({
+	name: "CartRedirectOnAdd",
+	importPath: "@vtex/faststore/components",
+	component: CartRedirectOnAdd,
+	editor: {
+		label: "Cart Redirect On Add",
+		category: "commerce"
+	},
+	schema: { href: {
+		type: "string",
+		default: "/checkout",
+		label: "Checkout URL"
+	} },
+	guideline: "No-mini-cart post-add behavior: navigates the shopper to checkout (href, default /checkout) after each successful add to cart. Compose it once in the layout for a store that has no mini-cart drawer; it renders no UI of its own. Use this instead of a mini-cart when adding a product should go straight to checkout. Mutually exclusive with CartOpenOnAdd — compose exactly one, and omit the drawer when using this. See cart.md."
+});
+/**
+* Makes the wrapped mini-cart `DrawerRoot` controlled by `miniCartOpenVar` and opens it on each
+* add-success pulse. `miniCartOpenVar` is the single source of truth: the pulse-driven open, the
+* header trigger (`onOpenChange(true)`), and manual close (`onOpenChange(false)`) all route through
+* it, so the trigger and manual dismissal keep working under controlled mode. Context-free — it
+* reads reactive vars and needs no `CartRoot` ancestor (ADR-0010). Expects a single `DrawerRoot`
+* child; the wiring is encapsulated here, never exposed as authorable drawer props.
+*/
+function CartOpenOnAdd({ children, $actions }) {
+	const open = useReactiveVar(miniCartOpenVar);
+	const pulse = useReactiveVar(cartLastAddVar);
+	useEffect(() => {
+		if (pulse > 0) miniCartOpenVar(true);
+	}, [pulse]);
+	useCartValidateOnOpen($actions?.cart?.validate);
+	if (!isValidElement(children)) return children;
+	return cloneElement(children, {
+		open,
+		onOpenChange: (next) => miniCartOpenVar(next)
+	});
+}
+/**
+* Navigates a no-mini-cart store to checkout after a successful add. Keys a `useEffect` on the
+* add-success pulse, which `addItem` increments only on the clean branch after the `await`, so the
+* redirect is post-resolve and success-gated. The initial `0` is ignored, so a fresh mount never
+* navigates. Context-free — no `CartRoot` ancestor (ADR-0010). Renders its passthrough children (or
+* nothing); it carries no drawer.
+*/
+function CartRedirectOnAdd({ href = "/checkout", children }) {
+	const router = useRouter();
+	const pulse = useReactiveVar(cartLastAddVar);
+	useEffect(() => {
+		if (pulse > 0) router.push(href);
+	}, [
+		pulse,
+		href,
+		router
+	]);
+	return children;
+}
+function CartLoading({ className, children, ...props }) {
+	const { cart } = useCart();
+	if (cart != null) return null;
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className,
+		"data-fs-cart-loading": "",
+		children
+	});
+}
+function CartEmpty({ className, children, ...props }) {
+	const { cart } = useCart();
+	if (cart == null || cart.items.length > 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className,
+		"data-fs-cart-empty": "",
+		children
+	});
+}
+function CartFilled({ className, children, ...props }) {
+	const { cart } = useCart();
+	if ((cart?.items ?? []).length === 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className,
+		"data-fs-cart-filled": "",
+		children
+	});
+}
+const CartDisclaimerDefinition = defineComponent({
+	name: "CartDisclaimer",
+	importPath: "@vtex/faststore/components",
+	component: CartDisclaimer,
+	content: CartDisclaimerContent,
+	editor: {
+		label: "Cart Disclaimer",
+		category: "commerce"
+	},
+	schema: { text: {
+		type: "string",
+		label: "Disclaimer text"
+	} },
+	guideline: "Plain-text merchant notice — conditions, purchase limits, or legal wording — shown in the cart before the shopper commits. CMS content wins over the text prop, and nothing renders when neither supplies a notice. It renders only when the cart has items, so it stays out of the empty state and out of the window before the cart resolves on its own. Place it inside CartFilled, below the order summary or immediately above the checkout CTA (CartCheckoutGuard): placement is composition order, and there is no position prop. Plain text only — no rich text and no inline links. Must be inside CartRoot. See cart.md."
+});
+function CartDisclaimer({ text, $content, className, children, ...props }) {
+	const { cart } = useCart();
+	if (cart == null || cart.items.length === 0) return null;
+	const notice = $content?.text ?? text;
+	const resolvedChildren = typeof children === "string" ? configuredLabel(children) : children;
+	if (resolvedChildren == null && !notice?.trim()) return null;
+	return /* @__PURE__ */ jsx("p", {
+		...props,
+		className,
+		"data-fs-cart-disclaimer": "",
+		"data-fs-text": "",
+		children: resolvedChildren ?? notice
+	});
+}
+function CartItemSkeleton({ className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		className,
+		"data-fs-cart-item-skeleton": "",
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ jsx("span", {
+			"data-fs-cart-item-skeleton-line": "",
+			className: "block h-4 w-full animate-pulse rounded bg-gray-200"
+		}), /* @__PURE__ */ jsx("span", {
+			"data-fs-cart-item-skeleton-line": "",
+			className: "mt-2 block h-4 w-2/3 animate-pulse rounded bg-gray-200"
+		})]
+	});
+}
+const CartAlertContent = defineContentType({
+	id: "cart-alert",
+	title: "Cart Alert",
+	description: "Merchant notice shown at the top of the mini-cart overlay.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: {
+			text: {
+				type: "string",
+				minLength: 1,
+				title: "Message"
+			},
+			icon: {
+				type: "string",
+				enum: [
+					"bell",
+					"bell-ringing",
+					"tag",
+					"shopping-cart",
+					"map-pin",
+					"star"
+				],
+				title: "Icon"
+			},
+			iconUrl: {
+				type: "string",
+				format: "uri",
+				title: "Custom icon",
+				widget: { "ui:widget": "media-gallery" }
+			},
+			iconAlt: {
+				type: "string",
+				title: "Custom icon alt text"
+			}
+		}
+	}
+});
+/**
+* The sprite names the CMS channel admits. Exported because a store whose merchants pick the icon
+* has to list them under `icons.include` for the glyph to reach the route sprite — one import there
+* instead of six retyped strings. Read off the model so the two cannot drift apart.
+*/
+const CART_ALERT_ICON_NAMES = CartAlertContent.schema.properties.icon.enum;
+const CART_ALERT_CONTEXT_UNSET = Symbol("CartAlertContextUnset");
+const CartAlertContext = createContext(CART_ALERT_CONTEXT_UNSET);
+function useCartAlert() {
+	const ctx = useContext(CartAlertContext);
+	if (ctx === CART_ALERT_CONTEXT_UNSET) throw new Error("CartAlert parts must be used inside CartAlertRoot.");
+	return ctx;
+}
+/**
+* A content-channel icon name is admitted only when the model's `enum` still lists it. An entry is
+* external data whose `icon` is typed as the enum but not guaranteed to be one at runtime (a stale
+* value, or a read-time gate that does not enforce `enum`), and an unadmitted name would reach the
+* sprite lookup and render an empty `<svg>` with no build error and nothing in the console.
+*/
+function admitContentIcon(name) {
+	return name && CART_ALERT_ICON_NAMES.includes(name) ? name : void 0;
+}
+/**
+* Resolves one glyph from a single source channel, the upload before the sprite name. Kept per-source
+* rather than per-field so the two channels never mix across sources: a merchant who configures a
+* sprite name in the CMS is not silently overridden by an uploaded-glyph *prop* the developer left as
+* a default. The prop `name` is unfiltered — the compiler resolves it or fails the build; only a
+* content name passes through `admitContentIcon`.
+*/
+function resolveGlyph(url, alt, name) {
+	if (url?.trim()) return {
+		src: url,
+		alt: alt ?? ""
+	};
+	if (name) return { name };
+	return null;
+}
+const CartAlertRootDefinition = defineComponent({
+	name: "CartAlertRoot",
+	importPath: "@vtex/faststore/components",
+	component: CartAlertRoot,
+	content: CartAlertContent,
+	editor: {
+		label: "Cart Alert",
+		category: "commerce"
+	},
+	schema: {
+		text: {
+			type: "string",
+			label: "Message"
+		},
+		icon: {
+			type: "icon",
+			label: "Icon"
+		},
+		iconUrl: {
+			type: "string",
+			label: "Custom icon URL"
+		},
+		iconAlt: {
+			type: "string",
+			label: "Custom icon alt text"
+		}
+	},
+	providesContext: "cart-alert",
+	guideline: "Merchant-authored notice near the top of the mini-cart overlay (a minimum order, a running promotion): wraps CartAlertIcon and CartAlertText in any subset, any order — the arrangement is the composition, not a prop — and renders the glyph then the copy when composed with no children. Its copy and glyph are CMS-editable through the cart-alert content model, with the text, icon, iconUrl and iconAlt props as the non-CMS fallback; it renders nothing when no message is configured, so an unconfigured banner leaves no empty box. Reads no cart data, so it needs no CartRoot ancestor and no cart-state gate — place it inside CartFilled to hide it on an empty cart. A store whose merchants choose the icon must list CART_ALERT_ICON_NAMES under icons.include in global.json, or a chosen glyph renders empty. Distinct from CartError (cart mutation errors) and CartUnavailableCount (data-driven). See cart.md."
+});
+const CartAlertIconDefinition = defineComponent({
+	name: "CartAlertIcon",
+	importPath: "@vtex/faststore/components",
+	component: CartAlertIcon,
+	editor: {
+		label: "Cart Alert Icon",
+		category: "commerce"
+	},
+	schema: {},
+	requiresContext: "cart-alert",
+	guideline: "The alert glyph, inside a CartAlertRoot (or any ancestor providing `cart-alert` context). Prefers the merchant-uploaded icon and falls back to the predefined sprite name, and renders nothing when neither is configured. Decorative — the message carries the meaning. Place it before or after CartAlertText to set the order."
+});
+const CartAlertTextDefinition = defineComponent({
+	name: "CartAlertText",
+	importPath: "@vtex/faststore/components",
+	component: CartAlertText,
+	editor: {
+		label: "Cart Alert Message",
+		category: "commerce"
+	},
+	schema: {},
+	requiresContext: "cart-alert",
+	guideline: "The alert message, inside a CartAlertRoot (or any ancestor providing `cart-alert` context). The copy comes from the root (its CMS entry or its text prop), so children are a display override rather than an authoring channel. Place it before or after CartAlertIcon to set the order."
+});
+function CartAlertRoot({ text, icon, iconUrl, iconAlt, className, children, $content, ...props }) {
+	const message = $content?.text ?? text;
+	const value = useMemo(() => ({
+		message: message ?? "",
+		glyph: resolveGlyph($content?.iconUrl, $content?.iconAlt, admitContentIcon($content?.icon)) ?? resolveGlyph(iconUrl, iconAlt, icon)
+	}), [
+		message,
+		$content?.iconUrl,
+		$content?.iconAlt,
+		$content?.icon,
+		iconUrl,
+		iconAlt,
+		icon
+	]);
+	if (!message?.trim()) return null;
+	return /* @__PURE__ */ jsx(CartAlertContext, {
+		value,
+		children: /* @__PURE__ */ jsx("div", {
+			...props,
+			className,
+			"data-fs-cart-alert": "",
+			children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(CartAlertIcon, {}), /* @__PURE__ */ jsx(CartAlertText, {})] })
+		})
+	});
+}
+function CartAlertIcon({ className }) {
+	const { glyph } = useCartAlert();
+	if (!glyph) return null;
+	if ("src" in glyph) return /* @__PURE__ */ jsx(Image, {
+		src: glyph.src,
+		alt: glyph.alt,
+		className,
+		"data-fs-cart-alert-icon": ""
+	});
+	return /* @__PURE__ */ jsx(Icon, {
+		name: glyph.name,
+		className,
+		"data-fs-cart-alert-icon": ""
+	});
+}
+function CartAlertText({ className, children, ...props }) {
+	const { message } = useCartAlert();
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		className,
+		"data-fs-cart-alert-text": "",
+		"data-fs-text": "",
+		children: children ?? message
+	});
+}
+const CartEmptyMessageContent = defineContentType({
+	id: "cart-empty-message",
+	title: "Cart Empty Message",
+	description: "Message shown in the cart overlay when the cart has no items.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		required: ["text"],
+		properties: { text: {
+			type: "string",
+			minLength: 1,
+			title: "Empty cart message",
+			default: "Your cart is empty"
+		} }
+	}
+});
+const CartContinueShoppingContent = defineContentType({
+	id: "cart-continue-shopping",
+	title: "Cart Continue Shopping",
+	description: "Label for the control that dismisses the cart overlay and returns the shopper to browsing.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		required: ["label"],
+		properties: { label: {
+			type: "string",
+			minLength: 1,
+			title: "Continue shopping label",
+			default: "Continue shopping"
+		} }
+	}
+});
+const CartEmptyMessageDefinition = defineComponent({
+	name: "CartEmptyMessage",
+	importPath: "@vtex/faststore/components",
+	component: CartEmptyMessage,
+	content: CartEmptyMessageContent,
+	editor: {
+		label: "Cart Empty Message",
+		category: "commerce"
+	},
+	schema: { text: {
+		type: "string",
+		default: "Your cart is empty",
+		label: "Empty cart message"
+	} },
+	guideline: "The empty-cart message, rendered as plain text inside CartEmpty. CMS content wins over the text prop, which defaults to \"Your cart is empty\"; blank resolved copy renders nothing. It carries no layout — group and space it with Container, and pair it with CartContinueShopping for the way back to browsing. See cart.md."
+});
+const CartContinueShoppingDefinition = defineComponent({
+	name: "CartContinueShopping",
+	importPath: "@vtex/faststore/components",
+	component: CartContinueShopping,
+	content: CartContinueShoppingContent,
+	editor: {
+		label: "Cart Continue Shopping",
+		category: "action"
+	},
+	schema: { label: {
+		type: "string",
+		default: "Continue shopping",
+		label: "Continue shopping label"
+	} },
+	guideline: "Dismisses the cart overlay so the shopper can keep browsing; dispatches no cart write. Place it in the empty panel inside CartEmpty, commonly in a footer Container. It closes the drawer, so it requires a DrawerRoot ancestor — on a cart page with no drawer, compose a NavigationLink back to browsing instead of this control. CMS content wins over the label prop, and composed children win over both (compose an icon that way). See cart.md."
+});
+function CartEmptyMessage({ text = "Your cart is empty", $content, className, ...props }) {
+	const message = $content?.text ?? text;
+	if (!message.trim()) return null;
+	return /* @__PURE__ */ jsx("p", {
+		...props,
+		className,
+		"data-fs-cart-empty-message": "",
+		"data-fs-text": "",
+		children: message
+	});
+}
+function CartContinueShopping({ label = "Continue shopping", $content, className, children, ...props }) {
+	const content = $content?.label ?? label;
+	if (children == null && !content.trim()) return null;
+	return /* @__PURE__ */ jsx(DrawerClose, {
+		...props,
+		className,
+		"data-fs-cart-continue-shopping": "",
+		"data-fs-button": "",
+		children: children ?? content
+	});
+}
+//#endregion
+export { CART_ALERT_ICON_NAMES, CartAlertContent, CartAlertIcon, CartAlertIconDefinition, CartAlertRoot, CartAlertRootDefinition, CartAlertText, CartAlertTextDefinition, CartAppliedCoupons, CartAppliedCouponsDefinition, CartCheckoutGuard, CartCheckoutGuardDefinition, CartCheckoutLabelContent, CartContinueShopping, CartContinueShoppingContent, CartContinueShoppingDefinition, CartCount, CartCountDefinition, CartCouponError, CartCouponErrorDefinition, CartCouponForm, CartCouponFormDefinition, CartCouponRemove, CartCouponRemoveDefinition, CartDataContext, CartDisclaimer, CartDisclaimerContent, CartDisclaimerDefinition, CartEmpty, CartEmptyDefinition, CartEmptyMessage, CartEmptyMessageContent, CartEmptyMessageDefinition, CartError, CartErrorDefinition, CartFilled, CartFilledDefinition, CartGoCheckout, CartGoCheckoutDefinition, CartItemSkeleton, CartList, CartListDefinition, CartLoading, CartLoadingDefinition, CartOpenOnAdd, CartOpenOnAddDefinition, CartRedirectOnAdd, CartRedirectOnAddDefinition, CartRemoveUnavailable, CartRemoveUnavailableDefinition, CartRoot, CartRootDefinition, CartTotal, CartTotalDefinition, CartTotalValueContext, CartUnavailableCount, CartUnavailableCountDefinition, formatPrice, useCart };
+
+//# sourceMappingURL=cart.js.map