@vtex/faststore 0.0.1

package/dist/matter/cart-item/cart-item.js

@@ -0,0 +1,672 @@
+"use client";
+import { defineComponent } from "../../core/dist/define-component.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 { resolveSafeHref } from "../../utils/safe-href.js";
+import { NavigationLink } from "../../particles/navigation-link/navigation-link.js";
+import { formatPrice } from "../cart/cart.js";
+import { createContext, useContext, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { NumberField } from "@base-ui/react/number-field";
+//#region src/matter/cart-item/cart-item.tsx
+const fragment = graphql(`
+  fragment CartItemRootData on Query {
+    cart {
+      items {
+        __typename
+        id
+        quantity
+        price {
+          amount
+          currencyCode
+        }
+        listPrice {
+          amount
+          currencyCode
+        }
+        sellingPrice {
+          amount
+          currencyCode
+        }
+        gift
+        ownTotal {
+          ...MoneyFragment
+        }
+        total {
+          ...MoneyFragment
+        }
+        variant {
+          __typename
+          variantId
+          sku
+          name
+          image {
+            url
+            altText
+          }
+          availability
+        }
+        product {
+          __typename
+          productId
+          title
+          detailUrl
+          categories {
+            categoryId
+            name
+          }
+          brand {
+            brandId
+            name
+          }
+        }
+      }
+    }
+  }
+`);
+const cartItemQuantityFragment = graphql(`
+  fragment CartItemQuantityData on Query {
+    cart {
+      items {
+        __typename
+        id
+        variant {
+          __typename
+          unitMultiplier
+        }
+      }
+    }
+  }
+`);
+const CartItemContext = createContext(null);
+function useCartItem() {
+	const item = useContext(CartItemContext);
+	if (!item) throw new Error("Cart item components must be used inside a <CartItemRoot> subtree.");
+	return item;
+}
+const CartItemRootDefinition = defineComponent({
+	name: "CartItemRoot",
+	importPath: "@vtex/faststore/components",
+	component: CartItemRoot,
+	fragment,
+	fetchStrategy: "reactive-list-item",
+	requiresContext: "cart-item",
+	providesContext: "cart-item-data",
+	editor: {
+		label: "Cart Item Root",
+		category: "commerce"
+	},
+	schema: {},
+	guideline: "Per-line data provider for the cart line-item template: place it directly inside CartList, wrapping the CartItem* particles (CartItemImage, CartItemName, CartItemPrice, the CartItemQuantity stepper, CartItemRemove, …). It owns the core per-item fields and delivers each line its own slice, so the core particles must sit inside it. Must be inside CartList. See cart-item.md."
+});
+const CartItemImageDefinition = defineComponent({
+	name: "CartItemImage",
+	importPath: "@vtex/faststore/components",
+	component: CartItemImage,
+	requiresContext: "cart-item-data",
+	editor: {
+		label: "Cart Item Image",
+		category: "commerce"
+	},
+	schema: { objectFit: {
+		type: [
+			"contain",
+			"cover",
+			"fill",
+			"none"
+		],
+		default: "contain",
+		label: "Object Fit"
+	} },
+	guideline: "Renders the product image from the cart item. Must be inside CartItemRoot."
+});
+const CartItemProductLinkDefinition = defineComponent({
+	name: "CartItemProductLink",
+	importPath: "@vtex/faststore/components",
+	component: CartItemProductLink,
+	requiresContext: "cart-item-data",
+	editor: {
+		label: "Cart Item Product Link",
+		category: "commerce"
+	},
+	schema: {},
+	guideline: "Links the cart line image to its product page, using the product URL the line already carries: place it inside CartItemRoot wrapping CartItemImage. Whether a line links is decided by placing this element, so there is no prop to toggle it — a checkout line simply omits it. Renders its children unwrapped when the line has no image or no usable product URL, so it never leaves an empty or unsafe link. Navigation is same-tab, and the leaf adds no fields to the page query. Must be inside CartItemRoot. See cart-item.md."
+});
+const CartItemNameDefinition = defineComponent({
+	name: "CartItemName",
+	importPath: "@vtex/faststore/components",
+	component: CartItemName,
+	requiresContext: "cart-item-data",
+	editor: {
+		label: "Cart Item Name",
+		category: "commerce"
+	},
+	schema: {},
+	guideline: "Renders the product name from the cart item. Must be inside CartItemRoot."
+});
+const CartItemVariantDefinition = defineComponent({
+	name: "CartItemVariant",
+	importPath: "@vtex/faststore/components",
+	component: CartItemVariant,
+	requiresContext: "cart-item-data",
+	editor: {
+		label: "Cart Item Variant",
+		category: "commerce"
+	},
+	schema: {},
+	guideline: "Renders the selected variant name of the cart item (e.g. \"Midnight Black\"); renders null when the variant has no name. Use as a subtitle under CartItemName, typically alongside CartItemSku. Must be inside CartItemRoot."
+});
+const CartItemSkuDefinition = defineComponent({
+	name: "CartItemSku",
+	importPath: "@vtex/faststore/components",
+	component: CartItemSku,
+	requiresContext: "cart-item-data",
+	editor: {
+		label: "Cart Item SKU",
+		category: "commerce"
+	},
+	schema: {},
+	guideline: "Renders the SKU code of the cart item variant (e.g. \"WNC-400X\"); renders null when the variant has no SKU. Use as a subtitle under CartItemName, typically alongside CartItemVariant. Must be inside CartItemRoot."
+});
+const CartItemPriceDefinition = defineComponent({
+	name: "CartItemPrice",
+	importPath: "@vtex/faststore/components",
+	component: CartItemPrice,
+	requiresContext: "cart-item-data",
+	editor: {
+		label: "Cart Item Price",
+		category: "commerce"
+	},
+	schema: {},
+	guideline: "Renders the selling price of the cart item, formatted from the active storefront context. Must be inside CartItemRoot."
+});
+const CartItemListPriceDefinition = defineComponent({
+	name: "CartItemListPrice",
+	importPath: "@vtex/faststore/components",
+	component: CartItemListPrice,
+	requiresContext: "cart-item-data",
+	editor: {
+		label: "Cart Item List Price",
+		category: "commerce"
+	},
+	schema: {},
+	guideline: "Renders the original list price of the cart item (strikethrough); renders null when no discount is active. Use alongside CartItemPrice to show promotional pricing. Must be inside CartItemRoot."
+});
+const CartItemDiscountPercentageDefinition = defineComponent({
+	name: "CartItemDiscountPercentage",
+	importPath: "@vtex/faststore/components",
+	component: CartItemDiscountPercentage,
+	requiresContext: "cart-item-data",
+	editor: {
+		label: "Cart Item Discount %",
+		category: "commerce"
+	},
+	schema: { template: {
+		type: "string",
+		default: "-{percentage}%",
+		label: "Template"
+	} },
+	guideline: "Per-line discount badge showing the integer listPrice-vs-sellingPrice percentage (e.g. \"-20%\"); use the template prop to customize the format ({percentage} is the integer percent). Renders null when the line has no discount (sellingPrice >= listPrice), so it only appears on promotional lines. Place alongside CartItemPrice/CartItemListPrice. Must be inside CartItemRoot."
+});
+const CartItemLineTotalDefinition = defineComponent({
+	name: "CartItemLineTotal",
+	importPath: "@vtex/faststore/components",
+	component: CartItemLineTotal,
+	requiresContext: "cart-item-data",
+	editor: {
+		label: "Cart Item Line Total",
+		category: "commerce"
+	},
+	schema: {},
+	guideline: "Renders the per-line total (selling price × quantity) formatted from the active storefront context. Must be inside CartItemRoot."
+});
+const CartItemOwnTotalDefinition = defineComponent({
+	name: "CartItemOwnTotal",
+	importPath: "@vtex/faststore/components",
+	component: CartItemOwnTotal,
+	requiresContext: "cart-item-data",
+	editor: {
+		label: "Cart Item Own Total",
+		category: "commerce"
+	},
+	schema: {},
+	guideline: "Renders the line's own total (excludes bundle/composition children), formatted from the active storefront context. Equals CartItemAggregateTotal on lines with no compositions. Must be inside CartItemRoot. See cart-item.md."
+});
+const CartItemAggregateTotalDefinition = defineComponent({
+	name: "CartItemAggregateTotal",
+	importPath: "@vtex/faststore/components",
+	component: CartItemAggregateTotal,
+	requiresContext: "cart-item-data",
+	editor: {
+		label: "Cart Item Aggregate Total",
+		category: "commerce"
+	},
+	schema: {},
+	guideline: "Renders the line's aggregate total including all nested composition children, formatted from the active storefront context — the price the shopper actually pays for a bundled line. Equals CartItemOwnTotal on lines with no compositions. Must be inside CartItemRoot. See cart-item.md."
+});
+const CartItemQuantityDefinition = defineComponent({
+	name: "CartItemQuantity",
+	importPath: "@vtex/faststore/components",
+	component: CartItemQuantity,
+	fragment: cartItemQuantityFragment,
+	fetchStrategy: "reactive-list-item",
+	requiresContext: "cart-item-data",
+	editor: {
+		label: "Cart Item Quantity",
+		category: "commerce"
+	},
+	schema: {
+		min: {
+			type: "number",
+			default: 1,
+			label: "Min"
+		},
+		max: {
+			type: "number",
+			label: "Max"
+		},
+		step: {
+			type: "number",
+			default: 1,
+			label: "Step"
+		},
+		removeOnDecrement: {
+			type: "boolean",
+			default: false,
+			label: "Remove On Decrement"
+		},
+		validationMessage: {
+			type: "string",
+			default: "Quantity adjusted to {value}.",
+			label: "Validation Message"
+		}
+	},
+	actions: { cart: [
+		"increaseQuantity",
+		"decreaseQuantity",
+		"removeItem"
+	] },
+	guideline: "Quantity stepper for a cart item, shown in the unit the merchant sells in: the displayed amount is the line's quantity times its unit multiplier, so a SKU sold in 500 g portions reads 1.5 rather than 3. min, max, and step are configured in purchasable units and converted for display, so one template serves SKUs with different multipliers. A typed amount that is out of bounds or off the multiplier grid snaps to the nearest valid value on commit and renders validationMessage. Set removeOnDecrement=true to remove the item when quantity reaches the minimum. Renders nothing on a gift line — a gift's quantity is promotion-controlled and cannot be stepped or removed, so use CartItemQuantityValue to show a gift's fixed quantity. Must be inside CartItemRoot. See cart-item.md."
+});
+const CartItemQuantityValueDefinition = defineComponent({
+	name: "CartItemQuantityValue",
+	importPath: "@vtex/faststore/components",
+	component: CartItemQuantityValue,
+	requiresContext: "cart-item-data",
+	editor: {
+		label: "Cart Item Quantity Value",
+		category: "commerce"
+	},
+	schema: {},
+	guideline: "Renders the read-only quantity count of the cart item as text (e.g. a \"Qty\" badge). Distinct from the editable CartItemQuantity stepper. Must be inside CartItemRoot."
+});
+const CartItemRemoveDefinition = defineComponent({
+	name: "CartItemRemove",
+	importPath: "@vtex/faststore/components",
+	component: CartItemRemove,
+	requiresContext: "cart-item-data",
+	editor: {
+		label: "Cart Item Remove",
+		category: "commerce"
+	},
+	schema: {},
+	actions: { cart: ["removeItem"] },
+	guideline: "Button that removes the current line item from the cart. Must be inside CartItemRoot. Also composes inside CartItemUnavailable as a remove-on-alert control. See cart-item.md."
+});
+const CartItemAvailableDefinition = defineComponent({
+	name: "CartItemAvailable",
+	importPath: "@vtex/faststore/components",
+	component: CartItemAvailable,
+	requiresContext: "cart-item-data",
+	editor: {
+		label: "Cart Item Available",
+		category: "commerce"
+	},
+	schema: {},
+	guideline: "Renders its children only when the current cart item is in stock (availability AVAILABLE). Wrap price, quantity stepper, and line total so they hide for unavailable items. Must be inside CartItemRoot."
+});
+const CartItemUnavailableDefinition = defineComponent({
+	name: "CartItemUnavailable",
+	importPath: "@vtex/faststore/components",
+	component: CartItemUnavailable,
+	requiresContext: "cart-item-data",
+	editor: {
+		label: "Cart Item Unavailable",
+		category: "commerce"
+	},
+	schema: {},
+	guideline: "Status badge shown only when the current cart item is NOT available. Renders a built-in English label per state (OUT_OF_STOCK → \"Out of stock\", UNAVAILABLE → \"Cannot be delivered\", otherwise \"Unavailable\"); pass children to override the text — children REPLACE the label, so a remove-on-alert composition nests an explicit label plus a CartItemRemove. Emits data-fs-cart-item-unavailable-state for per-state styling. Must be inside CartItemRoot. See cart-item.md."
+});
+const CartItemGiftDefinition = defineComponent({
+	name: "CartItemGift",
+	importPath: "@vtex/faststore/components",
+	component: CartItemGift,
+	requiresContext: "cart-item-data",
+	editor: {
+		label: "Cart Item Gift",
+		category: "commerce"
+	},
+	schema: {},
+	guideline: "Free marker for a promotional gift line: renders only when the current cart item is a gift, showing a built-in \"Free\" label; pass children to override the text — children REPLACE the label. Place it beside CartItemPrice/CartItemListPrice, whose struck-through list price it complements. It is an inline marker, not a wrapper for a gift-only subtree. On a gift line CartItemRemove suppresses itself and CartItemRoot marks the row with data-fs-cart-item-gift-line, so neither needs composing differently. Must be inside CartItemRoot. See cart-item.md."
+});
+function CartItemRoot({ $data: $dataProp, className, children, ...props }) {
+	const slice = useDataOverride($dataProp) ?? null;
+	return /* @__PURE__ */ jsx(CartItemContext, {
+		value: slice,
+		children: /* @__PURE__ */ jsx("div", {
+			...props,
+			className,
+			"data-fs-cart-item-root": "",
+			...slice?.gift ? { "data-fs-cart-item-gift-line": "" } : {},
+			children
+		})
+	});
+}
+function CartItemImage({ className, objectFit = "contain", ...props }) {
+	const item = useCartItem();
+	const image = item.variant.image;
+	if (!image) return null;
+	return /* @__PURE__ */ jsx("img", {
+		...props,
+		src: image.url,
+		alt: image.altText ?? item.variant.name,
+		className,
+		style: {
+			objectFit,
+			...props.style
+		},
+		"data-fs-cart-item-image": "",
+		"data-fs-image": ""
+	});
+}
+function CartItemProductLink({ className, children, ...props }) {
+	const item = useCartItem();
+	const destination = resolveSafeHref(item.product.detailUrl);
+	if (!destination.safe) {
+		if (destination.reason !== "blank") console.warn("[CartItemProductLink] product URL rejected", { reason: destination.reason });
+		return children;
+	}
+	const image = item.variant.image;
+	if (!image || !(image.altText ?? item.variant.name ?? "").trim()) return children;
+	return /* @__PURE__ */ jsx(NavigationLink, {
+		...props,
+		href: destination.href,
+		className,
+		"data-fs-cart-item-product-link": "",
+		children
+	});
+}
+function CartItemName({ className, children, ...props }) {
+	const item = useCartItem();
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		className,
+		"data-fs-cart-item-name": "",
+		"data-fs-text": "",
+		children: children ?? item.product.title
+	});
+}
+function CartItemVariant({ className, children, ...props }) {
+	const { name } = useCartItem().variant;
+	if (!name) return null;
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		className,
+		"data-fs-cart-item-variant": "",
+		children: children ?? name
+	});
+}
+function CartItemSku({ className, children, ...props }) {
+	const { sku } = useCartItem().variant;
+	if (!sku) return null;
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		className,
+		"data-fs-cart-item-sku": "",
+		children: children ?? sku
+	});
+}
+function CartItemPrice({ className, children, ...props }) {
+	const item = useCartItem();
+	const { locale, currency } = useStorefrontContext();
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		className,
+		"data-fs-cart-item-price": "",
+		"data-fs-text": "",
+		children: children ?? formatPrice(item.sellingPrice.amount, locale, currency)
+	});
+}
+function CartItemListPrice({ className, children, ...props }) {
+	const item = useCartItem();
+	const { locale, currency } = useStorefrontContext();
+	if (item.listPrice.amount <= item.sellingPrice.amount) return null;
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		className,
+		"data-fs-cart-item-list-price": "",
+		"data-fs-text": "",
+		children: children ?? formatPrice(item.listPrice.amount, locale, currency)
+	});
+}
+function CartItemDiscountPercentage({ template = "-{percentage}%", className, children, ...props }) {
+	const item = useCartItem();
+	const listPrice = Number(item.listPrice.amount);
+	const sellingPrice = Number(item.sellingPrice.amount);
+	if (listPrice <= sellingPrice) return null;
+	const percent = Math.round((listPrice - sellingPrice) / listPrice * 100);
+	const text = template.replaceAll("{percentage}", String(percent));
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		className,
+		"data-fs-cart-item-discount-percentage": "",
+		"data-fs-text": "",
+		children: children ?? text
+	});
+}
+function CartItemLineTotal({ className, children, ...props }) {
+	const item = useCartItem();
+	const { locale, currency } = useStorefrontContext();
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		className,
+		"data-fs-cart-item-line-total": "",
+		children: children ?? formatPrice(item.sellingPrice.amount * item.quantity, locale, currency)
+	});
+}
+function CartItemOwnTotal({ className, children, ...props }) {
+	const item = useCartItem();
+	const { locale, currency } = useStorefrontContext();
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		className,
+		"data-fs-cart-item-own-total": "",
+		"data-fs-text": "",
+		children: children ?? formatPrice(Number(item.ownTotal.amount), locale, currency)
+	});
+}
+function CartItemAggregateTotal({ className, children, ...props }) {
+	const item = useCartItem();
+	const { locale, currency } = useStorefrontContext();
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		className,
+		"data-fs-cart-item-aggregate-total": "",
+		"data-fs-text": "",
+		children: children ?? formatPrice(Number(item.total.amount), locale, currency)
+	});
+}
+const MAX_DISPLAY_DECIMALS = 6;
+/**
+* A multiplier the platform cannot sell in — zero, negative, or non-finite — is treated as `1`, which
+* is also the fallback when the optional slice is absent (the stepper composed with no own provider).
+*/
+function effectiveMultiplier(slice) {
+	const multiplier = slice?.variant?.unitMultiplier ?? 1;
+	return Number.isFinite(multiplier) && multiplier > 0 ? multiplier : 1;
+}
+/**
+* Precision of the multiplier, so a displayed amount never carries binary-representation noise.
+* Derived through `toFixed` rather than `String`: `String` switches to exponential notation below
+* 1e-6, where it carries no decimal point and would report zero places, yielding a step of 0 that no
+* control can move. The normal-path precisions (0.5, 0.1, 0.333) are covered by tests; the
+* exponential branch is not, since it needs a multiplier no SKU can have.
+*/
+function decimalPlacesOf(multiplier) {
+	const [, decimals = ""] = multiplier.toFixed(MAX_DISPLAY_DECIMALS).split(".");
+	let end = decimals.length;
+	while (end > 0 && decimals[end - 1] === "0") end -= 1;
+	return end;
+}
+function roundTo(value, decimals) {
+	return Number(value.toFixed(decimals));
+}
+function resolveAdjustment(entered, snappedDisplay, multiplier, minDisplay, maxDisplay) {
+	if (maxDisplay != null && entered > maxDisplay) return {
+		reason: "max",
+		value: snappedDisplay
+	};
+	if (entered < minDisplay) return {
+		reason: "min",
+		value: snappedDisplay
+	};
+	if (Math.abs(entered - snappedDisplay) > multiplier * 1e-6) return {
+		reason: "multiple",
+		value: snappedDisplay
+	};
+	return null;
+}
+function CartItemQuantity({ className, children, min = 1, max, step, removeOnDecrement, validationMessage = "Quantity adjusted to {value}.", $data: $dataProp, $actions, ...props }) {
+	const item = useCartItem();
+	const slice = useDataOverride($dataProp);
+	const [adjustment, setAdjustment] = useState(null);
+	if (item.gift) return null;
+	const cart = $actions?.cart;
+	const multiplier = effectiveMultiplier(slice);
+	const decimals = decimalPlacesOf(multiplier);
+	const stepUnits = Math.max(1, Math.round(step ?? 1));
+	const minUnits = Math.round(min);
+	const maxUnits = max == null ? void 0 : Math.round(max);
+	const displayStep = roundTo(stepUnits * multiplier, decimals);
+	const minDisplay = roundTo(minUnits * multiplier, decimals);
+	const maxDisplay = maxUnits == null ? void 0 : roundTo(maxUnits * multiplier, decimals);
+	function handleValueCommitted(value) {
+		if (value == null) return;
+		if (removeOnDecrement && value < minDisplay) {
+			setAdjustment(null);
+			cart?.removeItem?.({ id: item.id });
+			return;
+		}
+		const snapped = Math.min(Math.max(Math.round(value / multiplier), minUnits), maxUnits ?? Number.POSITIVE_INFINITY);
+		const snappedDisplay = roundTo(snapped * multiplier, decimals);
+		setAdjustment(resolveAdjustment(value, snappedDisplay, multiplier, minDisplay, maxDisplay));
+		const delta = snapped - item.quantity;
+		if (delta > 0) cart?.increaseQuantity?.({
+			id: item.id,
+			by: delta
+		});
+		else if (delta < 0) cart?.decreaseQuantity?.({
+			id: item.id,
+			by: -delta
+		});
+	}
+	const effectiveMin = removeOnDecrement ? 0 : minDisplay;
+	const computedClassName = removeOnDecrement ? className ? `group ${className}` : "group" : className;
+	return /* @__PURE__ */ jsxs(NumberField.Root, {
+		...props,
+		value: roundTo(item.quantity * multiplier, decimals),
+		onValueCommitted: handleValueCommitted,
+		onValueChange: (_value, details) => {
+			if (details.reason === "input-change" || details.reason === "input-paste" || details.reason === "input-clear") setAdjustment(null);
+		},
+		min: effectiveMin,
+		max: maxDisplay,
+		step: displayStep,
+		smallStep: displayStep,
+		largeStep: roundTo(displayStep * 10, decimals),
+		snapOnStep: true,
+		allowOutOfRange: true,
+		className: computedClassName,
+		"data-fs-cart-item-quantity": "",
+		...multiplier === 1 ? {} : { "data-fs-cart-item-quantity-multiplier": String(multiplier) },
+		...adjustment ? {
+			"data-fs-cart-item-quantity-adjusted": "",
+			"data-fs-cart-item-quantity-adjusted-reason": adjustment.reason
+		} : {},
+		...removeOnDecrement && item.quantity <= minUnits ? { "data-fs-cart-item-at-min": "" } : {},
+		children: [children, adjustment ? /* @__PURE__ */ jsx("div", {
+			role: "alert",
+			"data-fs-cart-item-quantity-validation": "",
+			children: validationMessage.replaceAll("{value}", String(adjustment.value))
+		}) : null]
+	});
+}
+function CartItemQuantityValue({ className, children, ...props }) {
+	const item = useCartItem();
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		className,
+		"data-fs-cart-item-quantity-value": "",
+		children: children ?? String(item.quantity)
+	});
+}
+function CartItemRemove({ className, children, onClick, $actions, ...props }) {
+	const item = useCartItem();
+	if (item.gift) return null;
+	function handleClick(e) {
+		$actions?.cart?.removeItem?.({ id: item.id });
+		onClick?.(e);
+	}
+	return /* @__PURE__ */ jsx("button", {
+		...props,
+		type: "button",
+		className,
+		onClick: handleClick,
+		"data-fs-cart-item-remove": "",
+		"data-fs-button": "",
+		children
+	});
+}
+const UNAVAILABLE_LABELS = {
+	OUT_OF_STOCK: "Out of stock",
+	UNAVAILABLE: "Cannot be delivered"
+};
+function unavailableLabel(availability) {
+	return UNAVAILABLE_LABELS[availability] ?? "Unavailable";
+}
+function CartItemAvailable({ className, children, ...props }) {
+	if (useCartItem().variant.availability !== "AVAILABLE") return null;
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className,
+		"data-fs-cart-item-available": "",
+		children
+	});
+}
+function CartItemUnavailable({ className, children, ...props }) {
+	const { availability } = useCartItem().variant;
+	if (availability === "AVAILABLE") return null;
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className,
+		"data-fs-cart-item-unavailable": "",
+		"data-fs-cart-item-unavailable-state": availability.toLowerCase(),
+		children: children ?? unavailableLabel(availability)
+	});
+}
+function CartItemGift({ className, children, ...props }) {
+	if (!useCartItem().gift) return null;
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		className,
+		"data-fs-cart-item-gift": "",
+		"data-fs-text": "",
+		children: children ?? "Free"
+	});
+}
+//#endregion
+export { CartItemAggregateTotal, CartItemAggregateTotalDefinition, CartItemAvailable, CartItemAvailableDefinition, CartItemDiscountPercentage, CartItemDiscountPercentageDefinition, CartItemGift, CartItemGiftDefinition, CartItemImage, CartItemImageDefinition, CartItemLineTotal, CartItemLineTotalDefinition, CartItemListPrice, CartItemListPriceDefinition, CartItemName, CartItemNameDefinition, CartItemOwnTotal, CartItemOwnTotalDefinition, CartItemPrice, CartItemPriceDefinition, CartItemProductLink, CartItemProductLinkDefinition, CartItemQuantity, CartItemQuantityDefinition, CartItemQuantityValue, CartItemQuantityValueDefinition, CartItemRemove, CartItemRemoveDefinition, CartItemRoot, CartItemRootDefinition, CartItemSku, CartItemSkuDefinition, CartItemUnavailable, CartItemUnavailableDefinition, CartItemVariant, CartItemVariantDefinition };
+
+//# sourceMappingURL=cart-item.js.map