@enadhq/enad-react-sdk 1.0.0 → 1.1.0

package/dist/client/cart/adapters/mock.mjs

@@ -0,0 +1,92 @@
+//#region src/client/cart/adapters/mock.ts
+function money(amount, currencyCode = "USD") {
+	return {
+		amount,
+		currencyCode
+	};
+}
+let nextItemId = 1;
+function createEmptyCart(currencyCode = "USD") {
+	return {
+		id: "mock-cart",
+		countryCode: "US",
+		currencyCode,
+		languageCode: "en",
+		taxIncludedInPrice: false,
+		discountCodes: [],
+		items: [],
+		totals: {
+			subtotal: money(0, currencyCode),
+			tax: money(0, currencyCode),
+			discount: money(0, currencyCode),
+			total: money(0, currencyCode)
+		}
+	};
+}
+function recalculateTotals(items, currencyCode) {
+	const subtotal = items.reduce((sum, item) => sum + item.unitPrice.amount * item.quantity, 0);
+	return {
+		subtotal: money(subtotal, currencyCode),
+		tax: money(0, currencyCode),
+		discount: money(0, currencyCode),
+		total: money(subtotal, currencyCode)
+	};
+}
+/**
+* In-memory cart adapter for testing and development.
+*
+* ```ts
+* import { createMockCartAdapter } from "@enadhq/enad-react-sdk/client/cart/mock-adapter"
+*
+* const adapter = createMockCartAdapter({ delay: 200 })
+* ```
+*/
+function createMockCartAdapter(options = {}) {
+	const { currencyCode = "USD", delay = 0 } = options;
+	const cart = createEmptyCart(currencyCode);
+	if (options.initialItems) {
+		cart.items = [...options.initialItems];
+		cart.totals = recalculateTotals(cart.items, currencyCode);
+	}
+	async function wait() {
+		if (delay > 0) await new Promise((r) => setTimeout(r, delay));
+	}
+	return {
+		async getCart() {
+			await wait();
+			return { ...cart };
+		},
+		async addItem(productVariantId, quantity) {
+			await wait();
+			const newItem = {
+				id: `mock-item-${nextItemId++}`,
+				productVariantId,
+				displayName: `Product ${productVariantId}`,
+				unitPrice: money(1e3, currencyCode),
+				quantity
+			};
+			cart.items = [...cart.items, newItem];
+			cart.totals = recalculateTotals(cart.items, currencyCode);
+			return { ...cart };
+		},
+		async updateItem(itemId, quantity) {
+			await wait();
+			cart.items = cart.items.map((item) => item.id === itemId ? {
+				...item,
+				quantity
+			} : item);
+			cart.totals = recalculateTotals(cart.items, currencyCode);
+			return { ...cart };
+		},
+		async removeItem(itemId) {
+			await wait();
+			cart.items = cart.items.filter((item) => item.id !== itemId);
+			cart.totals = recalculateTotals(cart.items, currencyCode);
+			return { ...cart };
+		}
+	};
+}
+//#endregion
+export { createMockCartAdapter };
+
+//# sourceMappingURL=mock.mjs.map

package/dist/client/cart/adapters/mock.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"mock.mjs","names":[],"sources":["../../../../src/client/cart/adapters/mock.ts"],"sourcesContent":["import type { CartAdapter, Cart, CartItem, Money } from \"../types/adapter\";\n\nfunction money(amount: number, currencyCode = \"USD\"): Money {\n  return { amount, currencyCode };\n}\n\nlet nextItemId = 1;\n\nfunction createEmptyCart(currencyCode = \"USD\"): Cart {\n  return {\n    id: \"mock-cart\",\n    countryCode: \"US\",\n    currencyCode,\n    languageCode: \"en\",\n    taxIncludedInPrice: false,\n    discountCodes: [],\n    items: [],\n    totals: {\n      subtotal: money(0, currencyCode),\n      tax: money(0, currencyCode),\n      discount: money(0, currencyCode),\n      total: money(0, currencyCode),\n    },\n  };\n}\n\nfunction recalculateTotals(items: CartItem[], currencyCode: string): Cart[\"totals\"] {\n  const subtotal = items.reduce((sum, item) => sum + item.unitPrice.amount * item.quantity, 0);\n  return {\n    subtotal: money(subtotal, currencyCode),\n    tax: money(0, currencyCode),\n    discount: money(0, currencyCode),\n    total: money(subtotal, currencyCode),\n  };\n}\n\nexport interface MockCartAdapterOptions {\n  /** Initial items to populate the cart with. */\n  initialItems?: CartItem[];\n  /** Currency code. Defaults to \"USD\". */\n  currencyCode?: string;\n  /** Simulated network delay in ms. Defaults to 0. */\n  delay?: number;\n}\n\n/**\n * In-memory cart adapter for testing and development.\n *\n * ```ts\n * import { createMockCartAdapter } from \"@enadhq/enad-react-sdk/client/cart/mock-adapter\"\n *\n * const adapter = createMockCartAdapter({ delay: 200 })\n * ```\n */\nexport function createMockCartAdapter(options: MockCartAdapterOptions = {}): CartAdapter {\n  const { currencyCode = \"USD\", delay = 0 } = options;\n  const cart = createEmptyCart(currencyCode);\n\n  if (options.initialItems) {\n    cart.items = [...options.initialItems];\n    cart.totals = recalculateTotals(cart.items, currencyCode);\n  }\n\n  async function wait() {\n    if (delay > 0) await new Promise((r) => setTimeout(r, delay));\n  }\n\n  return {\n    async getCart(): Promise<Cart> {\n      await wait();\n      return { ...cart };\n    },\n\n    async addItem(productVariantId: string, quantity: number): Promise<Cart> {\n      await wait();\n      const newItem: CartItem = {\n        id: `mock-item-${nextItemId++}`,\n        productVariantId,\n        displayName: `Product ${productVariantId}`,\n        unitPrice: money(1000, currencyCode),\n        quantity,\n      };\n      cart.items = [...cart.items, newItem];\n      cart.totals = recalculateTotals(cart.items, currencyCode);\n      return { ...cart };\n    },\n\n    async updateItem(itemId: string, quantity: number): Promise<Cart> {\n      await wait();\n      cart.items = cart.items.map((item) => (item.id === itemId ? { ...item, quantity } : item));\n      cart.totals = recalculateTotals(cart.items, currencyCode);\n      return { ...cart };\n    },\n\n    async removeItem(itemId: string): Promise<Cart> {\n      await wait();\n      cart.items = cart.items.filter((item) => item.id !== itemId);\n      cart.totals = recalculateTotals(cart.items, currencyCode);\n      return { ...cart };\n    },\n  };\n}\n"],"mappings":";AAEA,SAAS,MAAM,QAAgB,eAAe,OAAc;AAC1D,QAAO;EAAE;EAAQ;EAAc;;AAGjC,IAAI,aAAa;AAEjB,SAAS,gBAAgB,eAAe,OAAa;AACnD,QAAO;EACL,IAAI;EACJ,aAAa;EACb;EACA,cAAc;EACd,oBAAoB;EACpB,eAAe,EAAE;EACjB,OAAO,EAAE;EACT,QAAQ;GACN,UAAU,MAAM,GAAG,aAAa;GAChC,KAAK,MAAM,GAAG,aAAa;GAC3B,UAAU,MAAM,GAAG,aAAa;GAChC,OAAO,MAAM,GAAG,aAAa;GAC9B;EACF;;AAGH,SAAS,kBAAkB,OAAmB,cAAsC;CAClF,MAAM,WAAW,MAAM,QAAQ,KAAK,SAAS,MAAM,KAAK,UAAU,SAAS,KAAK,UAAU,EAAE;AAC5F,QAAO;EACL,UAAU,MAAM,UAAU,aAAa;EACvC,KAAK,MAAM,GAAG,aAAa;EAC3B,UAAU,MAAM,GAAG,aAAa;EAChC,OAAO,MAAM,UAAU,aAAa;EACrC;;;;;;;;;;;AAqBH,SAAgB,sBAAsB,UAAkC,EAAE,EAAe;CACvF,MAAM,EAAE,eAAe,OAAO,QAAQ,MAAM;CAC5C,MAAM,OAAO,gBAAgB,aAAa;AAE1C,KAAI,QAAQ,cAAc;AACxB,OAAK,QAAQ,CAAC,GAAG,QAAQ,aAAa;AACtC,OAAK,SAAS,kBAAkB,KAAK,OAAO,aAAa;;CAG3D,eAAe,OAAO;AACpB,MAAI,QAAQ,EAAG,OAAM,IAAI,SAAS,MAAM,WAAW,GAAG,MAAM,CAAC;;AAG/D,QAAO;EACL,MAAM,UAAyB;AAC7B,SAAM,MAAM;AACZ,UAAO,EAAE,GAAG,MAAM;;EAGpB,MAAM,QAAQ,kBAA0B,UAAiC;AACvE,SAAM,MAAM;GACZ,MAAM,UAAoB;IACxB,IAAI,aAAa;IACjB;IACA,aAAa,WAAW;IACxB,WAAW,MAAM,KAAM,aAAa;IACpC;IACD;AACD,QAAK,QAAQ,CAAC,GAAG,KAAK,OAAO,QAAQ;AACrC,QAAK,SAAS,kBAAkB,KAAK,OAAO,aAAa;AACzD,UAAO,EAAE,GAAG,MAAM;;EAGpB,MAAM,WAAW,QAAgB,UAAiC;AAChE,SAAM,MAAM;AACZ,QAAK,QAAQ,KAAK,MAAM,KAAK,SAAU,KAAK,OAAO,SAAS;IAAE,GAAG;IAAM;IAAU,GAAG,KAAM;AAC1F,QAAK,SAAS,kBAAkB,KAAK,OAAO,aAAa;AACzD,UAAO,EAAE,GAAG,MAAM;;EAGpB,MAAM,WAAW,QAA+B;AAC9C,SAAM,MAAM;AACZ,QAAK,QAAQ,KAAK,MAAM,QAAQ,SAAS,KAAK,OAAO,OAAO;AAC5D,QAAK,SAAS,kBAAkB,KAAK,OAAO,aAAa;AACzD,UAAO,EAAE,GAAG,MAAM;;EAErB"}

package/dist/client/cart/components/cart-drawer.d.ts

@@ -0,0 +1,27 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/client/cart/components/cart-drawer.d.ts
+interface CartDrawerProps {
+  isOpen: boolean;
+  onClose: () => void;
+  className?: string;
+  labels?: {
+    title?: string;
+    emptyCartMessage?: string;
+    continueShopping?: string;
+    subtotal?: string;
+    discount?: string;
+    tax?: string;
+    total?: string;
+    proceedToCheckout?: string;
+  };
+}
+declare function CartDrawer({
+  isOpen,
+  onClose,
+  className,
+  labels
+}: CartDrawerProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { CartDrawer, CartDrawerProps };
+//# sourceMappingURL=cart-drawer.d.ts.map

package/dist/client/cart/components/cart-drawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cart-drawer.d.ts","names":[],"sources":["../../../../src/client/cart/components/cart-drawer.tsx"],"mappings":";;;UAUiB,eAAA;EACf,MAAA;EACA,OAAA;EACA,SAAA;EACA,MAAA;IACE,KAAA;IACA,gBAAA;IACA,gBAAA;IACA,QAAA;IACA,QAAA;IACA,GAAA;IACA,KAAA;IACA,iBAAA;EAAA;AAAA;AAAA,iBA2QY,UAAA,CAAA;EAAa,MAAA;EAAQ,OAAA;EAAS,SAAA;EAAW;AAAA,GAAe,eAAA,GAAe,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/client/cart/components/cart-drawer.mjs

@@ -0,0 +1,277 @@
+"use client";
+import { useCart } from "../hooks/useCart.mjs";
+import { useIcon } from "../../icons/icon-context.mjs";
+import { Button } from "../../ui/button.mjs";
+import { Price } from "../../storefront/components/price.mjs";
+import { QuantityPicker } from "../../storefront/product/quantity-picker.mjs";
+import { useCallback, useEffect, useRef } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/client/cart/components/cart-drawer.tsx
+function CartLoadingSkeleton() {
+	return /* @__PURE__ */ jsx("div", {
+		className: "space-y-6",
+		"aria-busy": "true",
+		"aria-label": "Loading cart items",
+		children: [
+			1,
+			2,
+			3
+		].map((i) => /* @__PURE__ */ jsxs("div", {
+			className: "flex gap-4 animate-pulse",
+			children: [/* @__PURE__ */ jsx("div", { className: "w-24 h-24 flex-shrink-0 bg-(--enad-border-color) rounded-(--enad-border-radius)" }), /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-1 flex-col gap-2",
+				children: [
+					/* @__PURE__ */ jsx("div", { className: "h-4 w-3/4 bg-(--enad-border-color) rounded-(--enad-border-radius)" }),
+					/* @__PURE__ */ jsx("div", { className: "h-4 w-1/3 bg-(--enad-border-color) rounded-(--enad-border-radius)" }),
+					/* @__PURE__ */ jsx("div", { className: "h-4 w-1/4 bg-(--enad-border-color) rounded-(--enad-border-radius)" })
+				]
+			})]
+		}, i))
+	});
+}
+function CartEmptyState({ message, onClose, buttonLabel }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col items-center justify-center h-full text-center",
+		children: [/* @__PURE__ */ jsx("p", {
+			className: "text-(--enad-text-muted-color) mb-4",
+			children: message
+		}), /* @__PURE__ */ jsx(Button, {
+			onClick: onClose,
+			variant: "outline",
+			children: buttonLabel
+		})]
+	});
+}
+function CartItemImage({ imageUrl, alt }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "relative w-24 h-24 flex-shrink-0 bg-(--enad-border-color) rounded-(--enad-border-radius) overflow-hidden",
+		children: imageUrl ? /* @__PURE__ */ jsx("img", {
+			src: imageUrl,
+			alt,
+			className: "object-cover"
+		}) : /* @__PURE__ */ jsx("div", { className: "w-full h-full bg-(--enad-border-color)" })
+	});
+}
+function CartItemDetails({ item, currencyCode, onClose, onUpdateQuantity, onRemove }) {
+	const TrashIcon = useIcon("trash");
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-1 min-w-0 justify-between flex-col",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex justify-between gap-2 mb-2",
+			children: [/* @__PURE__ */ jsx("a", {
+				href: `/products/${item.productSlug || item.productVariantId}`,
+				className: "font-medium text-sm text-(--enad-link-color) hover:text-(--enad-link-hover-color) transition-colors",
+				onClick: onClose,
+				children: item.displayName
+			}), /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "icon",
+				className: "h-5 w-5 flex-shrink-0",
+				onClick: () => onRemove(item.id),
+				"aria-label": `Remove ${item.displayName}`,
+				children: /* @__PURE__ */ jsx(TrashIcon, { className: "h-4 w-4" })
+			})]
+		}), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Price, {
+			amount: item.unitPrice.amount / 100,
+			currency: currencyCode,
+			className: "text-sm text-(--enad-text-muted-color) mb-1"
+		}), /* @__PURE__ */ jsx(QuantityPicker, {
+			value: item.quantity,
+			onChange: (qty) => onUpdateQuantity(item.id, qty),
+			size: "sm"
+		})] })]
+	});
+}
+function CartItemRow({ item, currencyCode, onClose, onUpdateQuantity, onRemove }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex gap-4",
+		role: "listitem",
+		children: [/* @__PURE__ */ jsx(CartItemImage, {
+			imageUrl: item.imageUrl,
+			alt: item.displayName
+		}), /* @__PURE__ */ jsx(CartItemDetails, {
+			item,
+			currencyCode,
+			onClose,
+			onUpdateQuantity,
+			onRemove
+		})]
+	});
+}
+function CartTotals({ totals, currencyCode, labels }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "p-6 space-y-4",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex justify-between text-sm",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-(--enad-text-muted-color)",
+					children: labels.subtotal
+				}), /* @__PURE__ */ jsx(Price, {
+					amount: totals.subtotal.amount / 100,
+					currency: currencyCode
+				})]
+			}),
+			totals.discount.amount > 0 && /* @__PURE__ */ jsxs("div", {
+				className: "flex justify-between text-sm",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-(--enad-text-muted-color)",
+					children: labels.discount
+				}), /* @__PURE__ */ jsxs("span", {
+					className: "text-(--enad-success-color)",
+					children: ["-", /* @__PURE__ */ jsx(Price, {
+						amount: totals.discount.amount / 100,
+						currency: currencyCode
+					})]
+				})]
+			}),
+			totals.tax.amount > 0 && /* @__PURE__ */ jsxs("div", {
+				className: "flex justify-between text-sm",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-(--enad-text-muted-color)",
+					children: labels.tax
+				}), /* @__PURE__ */ jsx(Price, {
+					amount: totals.tax.amount / 100,
+					currency: currencyCode
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex justify-between text-lg font-bold pt-4 border-t border-(--enad-border-color)",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-(--enad-text-primary-color)",
+					children: labels.total
+				}), /* @__PURE__ */ jsx(Price, {
+					amount: totals.total.amount / 100,
+					currency: currencyCode
+				})]
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				className: "w-full py-6 text-sm font-medium uppercase tracking-wider",
+				size: "lg",
+				children: labels.proceedToCheckout
+			})
+		]
+	});
+}
+function useCartDrawer(isOpen, onClose) {
+	const drawerRef = useRef(null);
+	const closeButtonRef = useRef(null);
+	const { cart, isLoading, removeItem, updateItem } = useCart();
+	useEffect(() => {
+		if (isOpen) {
+			const timer = setTimeout(() => closeButtonRef.current?.focus(), 100);
+			return () => clearTimeout(timer);
+		}
+	}, [isOpen]);
+	const handleKeyDown = useCallback((e) => {
+		if (e.key === "Escape") {
+			e.stopPropagation();
+			onClose();
+		}
+	}, [onClose]);
+	const handleUpdateQuantity = (itemId, newQuantity) => {
+		updateItem({
+			itemId,
+			quantity: newQuantity
+		});
+	};
+	const handleRemoveItem = (itemId) => {
+		removeItem({ itemId });
+	};
+	return {
+		drawerRef,
+		closeButtonRef,
+		cart,
+		isLoading,
+		items: cart?.items || [],
+		totals: cart?.totals,
+		currencyCode: cart?.currencyCode || "SEK",
+		handleKeyDown,
+		handleUpdateQuantity,
+		handleRemoveItem
+	};
+}
+function CartContent({ isLoading, items, currencyCode, emptyCartMessage, continueShopping, onClose, onUpdateQuantity, onRemove }) {
+	if (isLoading) return /* @__PURE__ */ jsx(CartLoadingSkeleton, {});
+	if (items.length === 0) return /* @__PURE__ */ jsx(CartEmptyState, {
+		message: emptyCartMessage,
+		onClose,
+		buttonLabel: continueShopping
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: "space-y-6",
+		role: "list",
+		"aria-label": "Cart items",
+		children: items.map((item) => /* @__PURE__ */ jsx(CartItemRow, {
+			item,
+			currencyCode,
+			onClose,
+			onUpdateQuantity,
+			onRemove
+		}, item.id))
+	});
+}
+function CartDrawer({ isOpen, onClose, className, labels = {} }) {
+	const CloseIcon = useIcon("close");
+	const { title = "Shopping Cart", emptyCartMessage = "Your cart is empty", continueShopping = "Continue Shopping", subtotal = "Subtotal", discount = "Discount", tax = "Tax", total = "Total", proceedToCheckout = "Proceed to Checkout" } = labels;
+	const { drawerRef, closeButtonRef, isLoading, items, totals, currencyCode, handleKeyDown, handleUpdateQuantity, handleRemoveItem } = useCartDrawer(isOpen, onClose);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+		className: `fixed font-enad inset-0 bg-black/60 backdrop-blur-sm z-50 transition-opacity duration-300 motion-reduce:transition-none ${isOpen ? "opacity-100" : "opacity-0 pointer-events-none"}`,
+		onClick: onClose,
+		"aria-hidden": "true"
+	}), /* @__PURE__ */ jsx("div", {
+		ref: drawerRef,
+		role: "dialog",
+		"aria-modal": "true",
+		"aria-label": title,
+		onKeyDown: handleKeyDown,
+		className: `fixed top-0 right-0 h-full w-full md:w-[480px] bg-(--enad-surface) z-50 transform transition-transform duration-300 ease-in-out motion-reduce:transition-none ${isOpen ? "translate-x-0" : "translate-x-full"} ${className ?? ""}`,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col h-full",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center justify-between p-6",
+					children: [/* @__PURE__ */ jsx("h2", {
+						className: "text-xl font-heading font-bold tracking-wider uppercase text-(--enad-text-primary-color)",
+						children: title
+					}), /* @__PURE__ */ jsx(Button, {
+						ref: closeButtonRef,
+						variant: "ghost",
+						size: "icon",
+						onClick: onClose,
+						"aria-label": "Close cart",
+						children: /* @__PURE__ */ jsx(CloseIcon, { className: "h-5 w-5" })
+					})]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "flex-1 overflow-y-auto p-6",
+					children: /* @__PURE__ */ jsx(CartContent, {
+						isLoading,
+						items,
+						currencyCode,
+						emptyCartMessage,
+						continueShopping,
+						onClose,
+						onUpdateQuantity: handleUpdateQuantity,
+						onRemove: handleRemoveItem
+					})
+				}),
+				items.length > 0 && totals && /* @__PURE__ */ jsx(CartTotals, {
+					totals,
+					currencyCode,
+					labels: {
+						subtotal,
+						discount,
+						tax,
+						total,
+						proceedToCheckout
+					}
+				})
+			]
+		})
+	})] });
+}
+//#endregion
+export { CartDrawer };
+
+//# sourceMappingURL=cart-drawer.mjs.map

package/dist/client/cart/components/cart-drawer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"cart-drawer.mjs","names":[],"sources":["../../../../src/client/cart/components/cart-drawer.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef, useCallback } from \"react\";\nimport { useCart } from \"../../cart/hooks/useCart\";\nimport type { CartItem, CartTotals as CartTotalsType } from \"../../cart/types/adapter\";\nimport { useIcon } from \"../../icons/icon-context\";\nimport { Button } from \"../../ui/button\";\nimport { Price } from \"../../storefront/components/price\";\nimport { QuantityPicker } from \"../../storefront/product/quantity-picker\";\n\nexport interface CartDrawerProps {\n  isOpen: boolean;\n  onClose: () => void;\n  className?: string;\n  labels?: {\n    title?: string;\n    emptyCartMessage?: string;\n    continueShopping?: string;\n    subtotal?: string;\n    discount?: string;\n    tax?: string;\n    total?: string;\n    proceedToCheckout?: string;\n  };\n}\n\nfunction CartLoadingSkeleton() {\n  return (\n    <div className=\"space-y-6\" aria-busy=\"true\" aria-label=\"Loading cart items\">\n      {[1, 2, 3].map((i) => (\n        <div key={i} className=\"flex gap-4 animate-pulse\">\n          <div className=\"w-24 h-24 flex-shrink-0 bg-(--enad-border-color) rounded-(--enad-border-radius)\" />\n          <div className=\"flex flex-1 flex-col gap-2\">\n            <div className=\"h-4 w-3/4 bg-(--enad-border-color) rounded-(--enad-border-radius)\" />\n            <div className=\"h-4 w-1/3 bg-(--enad-border-color) rounded-(--enad-border-radius)\" />\n            <div className=\"h-4 w-1/4 bg-(--enad-border-color) rounded-(--enad-border-radius)\" />\n          </div>\n        </div>\n      ))}\n    </div>\n  );\n}\n\nfunction CartEmptyState({\n  message,\n  onClose,\n  buttonLabel,\n}: {\n  message: string;\n  onClose: () => void;\n  buttonLabel: string;\n}) {\n  return (\n    <div className=\"flex flex-col items-center justify-center h-full text-center\">\n      <p className=\"text-(--enad-text-muted-color) mb-4\">{message}</p>\n      <Button onClick={onClose} variant=\"outline\">\n        {buttonLabel}\n      </Button>\n    </div>\n  );\n}\n\nfunction CartItemImage({ imageUrl, alt }: { imageUrl?: string; alt: string }) {\n  return (\n    <div className=\"relative w-24 h-24 flex-shrink-0 bg-(--enad-border-color) rounded-(--enad-border-radius) overflow-hidden\">\n      {imageUrl ? (\n        <img src={imageUrl} alt={alt} className=\"object-cover\" />\n      ) : (\n        <div className=\"w-full h-full bg-(--enad-border-color)\" />\n      )}\n    </div>\n  );\n}\n\nfunction CartItemDetails({\n  item,\n  currencyCode,\n  onClose,\n  onUpdateQuantity,\n  onRemove,\n}: {\n  item: CartItem;\n  currencyCode: string;\n  onClose: () => void;\n  onUpdateQuantity: (itemId: string, quantity: number) => void;\n  onRemove: (itemId: string) => void;\n}) {\n  const TrashIcon = useIcon(\"trash\");\n\n  return (\n    <div className=\"flex flex-1 min-w-0 justify-between flex-col\">\n      <div className=\"flex justify-between gap-2 mb-2\">\n        <a\n          href={`/products/${item.productSlug || item.productVariantId}`}\n          className=\"font-medium text-sm text-(--enad-link-color) hover:text-(--enad-link-hover-color) transition-colors\"\n          onClick={onClose}\n        >\n          {item.displayName}\n        </a>\n        <Button\n          variant=\"ghost\"\n          size=\"icon\"\n          className=\"h-5 w-5 flex-shrink-0\"\n          onClick={() => onRemove(item.id)}\n          aria-label={`Remove ${item.displayName}`}\n        >\n          <TrashIcon className=\"h-4 w-4\" />\n        </Button>\n      </div>\n\n      <div>\n        <Price\n          amount={item.unitPrice.amount / 100}\n          currency={currencyCode}\n          className=\"text-sm text-(--enad-text-muted-color) mb-1\"\n        />\n\n        <QuantityPicker\n          value={item.quantity}\n          onChange={(qty) => onUpdateQuantity(item.id, qty)}\n          size=\"sm\"\n        />\n      </div>\n    </div>\n  );\n}\n\nfunction CartItemRow({\n  item,\n  currencyCode,\n  onClose,\n  onUpdateQuantity,\n  onRemove,\n}: {\n  item: CartItem;\n  currencyCode: string;\n  onClose: () => void;\n  onUpdateQuantity: (itemId: string, quantity: number) => void;\n  onRemove: (itemId: string) => void;\n}) {\n  return (\n    <div className=\"flex gap-4\" role=\"listitem\">\n      <CartItemImage imageUrl={item.imageUrl} alt={item.displayName} />\n      <CartItemDetails\n        item={item}\n        currencyCode={currencyCode}\n        onClose={onClose}\n        onUpdateQuantity={onUpdateQuantity}\n        onRemove={onRemove}\n      />\n    </div>\n  );\n}\n\nfunction CartTotals({\n  totals,\n  currencyCode,\n  labels,\n}: {\n  totals: CartTotalsType;\n  currencyCode: string;\n  labels: {\n    subtotal: string;\n    discount: string;\n    tax: string;\n    total: string;\n    proceedToCheckout: string;\n  };\n}) {\n  return (\n    <div className=\"p-6 space-y-4\">\n      <div className=\"flex justify-between text-sm\">\n        <span className=\"text-(--enad-text-muted-color)\">{labels.subtotal}</span>\n        <Price amount={totals.subtotal.amount / 100} currency={currencyCode} />\n      </div>\n\n      {totals.discount.amount > 0 && (\n        <div className=\"flex justify-between text-sm\">\n          <span className=\"text-(--enad-text-muted-color)\">{labels.discount}</span>\n          <span className=\"text-(--enad-success-color)\">\n            -<Price amount={totals.discount.amount / 100} currency={currencyCode} />\n          </span>\n        </div>\n      )}\n\n      {totals.tax.amount > 0 && (\n        <div className=\"flex justify-between text-sm\">\n          <span className=\"text-(--enad-text-muted-color)\">{labels.tax}</span>\n          <Price amount={totals.tax.amount / 100} currency={currencyCode} />\n        </div>\n      )}\n\n      <div className=\"flex justify-between text-lg font-bold pt-4 border-t border-(--enad-border-color)\">\n        <span className=\"text-(--enad-text-primary-color)\">{labels.total}</span>\n        <Price amount={totals.total.amount / 100} currency={currencyCode} />\n      </div>\n\n      <Button className=\"w-full py-6 text-sm font-medium uppercase tracking-wider\" size=\"lg\">\n        {labels.proceedToCheckout}\n      </Button>\n    </div>\n  );\n}\n\nfunction useCartDrawer(isOpen: boolean, onClose: () => void) {\n  const drawerRef = useRef<HTMLDivElement>(null);\n  const closeButtonRef = useRef<HTMLButtonElement>(null);\n  const { cart, isLoading, removeItem, updateItem } = useCart();\n\n  useEffect(() => {\n    if (isOpen) {\n      const timer = setTimeout(() => closeButtonRef.current?.focus(), 100);\n      return () => clearTimeout(timer);\n    }\n  }, [isOpen]);\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === \"Escape\") {\n        e.stopPropagation();\n        onClose();\n      }\n    },\n    [onClose],\n  );\n\n  const handleUpdateQuantity = (itemId: string, newQuantity: number) => {\n    updateItem({ itemId, quantity: newQuantity });\n  };\n\n  const handleRemoveItem = (itemId: string) => {\n    removeItem({ itemId });\n  };\n\n  return {\n    drawerRef,\n    closeButtonRef,\n    cart,\n    isLoading,\n    items: cart?.items || [],\n    totals: cart?.totals,\n    currencyCode: cart?.currencyCode || \"SEK\",\n    handleKeyDown,\n    handleUpdateQuantity,\n    handleRemoveItem,\n  };\n}\n\nfunction CartContent({\n  isLoading,\n  items,\n  currencyCode,\n  emptyCartMessage,\n  continueShopping,\n  onClose,\n  onUpdateQuantity,\n  onRemove,\n}: {\n  isLoading: boolean;\n  items: CartItem[];\n  currencyCode: string;\n  emptyCartMessage: string;\n  continueShopping: string;\n  onClose: () => void;\n  onUpdateQuantity: (itemId: string, quantity: number) => void;\n  onRemove: (itemId: string) => void;\n}) {\n  if (isLoading) return <CartLoadingSkeleton />;\n  if (items.length === 0) {\n    return (\n      <CartEmptyState message={emptyCartMessage} onClose={onClose} buttonLabel={continueShopping} />\n    );\n  }\n  return (\n    <div className=\"space-y-6\" role=\"list\" aria-label=\"Cart items\">\n      {items.map((item) => (\n        <CartItemRow\n          key={item.id}\n          item={item}\n          currencyCode={currencyCode}\n          onClose={onClose}\n          onUpdateQuantity={onUpdateQuantity}\n          onRemove={onRemove}\n        />\n      ))}\n    </div>\n  );\n}\n\nexport function CartDrawer({ isOpen, onClose, className, labels = {} }: CartDrawerProps) {\n  const CloseIcon = useIcon(\"close\");\n\n  const {\n    title = \"Shopping Cart\",\n    emptyCartMessage = \"Your cart is empty\",\n    continueShopping = \"Continue Shopping\",\n    subtotal = \"Subtotal\",\n    discount = \"Discount\",\n    tax = \"Tax\",\n    total = \"Total\",\n    proceedToCheckout = \"Proceed to Checkout\",\n  } = labels;\n\n  const {\n    drawerRef,\n    closeButtonRef,\n    isLoading,\n    items,\n    totals,\n    currencyCode,\n    handleKeyDown,\n    handleUpdateQuantity,\n    handleRemoveItem,\n  } = useCartDrawer(isOpen, onClose);\n\n  return (\n    <>\n      <div\n        className={`fixed font-enad inset-0 bg-black/60 backdrop-blur-sm z-50 transition-opacity duration-300 motion-reduce:transition-none ${\n          isOpen ? \"opacity-100\" : \"opacity-0 pointer-events-none\"\n        }`}\n        onClick={onClose}\n        aria-hidden=\"true\"\n      />\n\n      <div\n        ref={drawerRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-label={title}\n        onKeyDown={handleKeyDown}\n        className={`fixed top-0 right-0 h-full w-full md:w-[480px] bg-(--enad-surface) z-50 transform transition-transform duration-300 ease-in-out motion-reduce:transition-none ${\n          isOpen ? \"translate-x-0\" : \"translate-x-full\"\n        } ${className ?? \"\"}`}\n      >\n        <div className=\"flex flex-col h-full\">\n          <div className=\"flex items-center justify-between p-6\">\n            <h2 className=\"text-xl font-heading font-bold tracking-wider uppercase text-(--enad-text-primary-color)\">\n              {title}\n            </h2>\n            <Button\n              ref={closeButtonRef}\n              variant=\"ghost\"\n              size=\"icon\"\n              onClick={onClose}\n              aria-label=\"Close cart\"\n            >\n              <CloseIcon className=\"h-5 w-5\" />\n            </Button>\n          </div>\n\n          <div className=\"flex-1 overflow-y-auto p-6\">\n            <CartContent\n              isLoading={isLoading}\n              items={items}\n              currencyCode={currencyCode}\n              emptyCartMessage={emptyCartMessage}\n              continueShopping={continueShopping}\n              onClose={onClose}\n              onUpdateQuantity={handleUpdateQuantity}\n              onRemove={handleRemoveItem}\n            />\n          </div>\n\n          {items.length > 0 && totals && (\n            <CartTotals\n              totals={totals}\n              currencyCode={currencyCode}\n              labels={{ subtotal, discount, tax, total, proceedToCheckout }}\n            />\n          )}\n        </div>\n      </div>\n    </>\n  );\n}\n"],"mappings":"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"}

package/dist/client/cart/components/cart-trigger.d.ts

@@ -0,0 +1,20 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/client/cart/components/cart-trigger.d.ts
+interface CartTriggerProps {
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+  labels?: {
+    cartLabel?: string;
+  };
+  className?: string;
+}
+declare function CartTrigger({
+  isOpen,
+  onOpenChange,
+  labels,
+  className
+}: CartTriggerProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { CartTrigger, CartTriggerProps };
+//# sourceMappingURL=cart-trigger.d.ts.map

package/dist/client/cart/components/cart-trigger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cart-trigger.d.ts","names":[],"sources":["../../../../src/client/cart/components/cart-trigger.tsx"],"mappings":";;;UAMiB,gBAAA;EACf,MAAA;EACA,YAAA,GAAe,IAAA;EACf,MAAA;IACE,SAAA;EAAA;EAEF,SAAA;AAAA;AAAA,iBAGc,WAAA,CAAA;EACd,MAAA;EACA,YAAA;EACA,MAAA;EACA;AAAA,GACC,gBAAA,GAAgB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/client/cart/components/cart-trigger.mjs

@@ -0,0 +1,27 @@
+"use client";
+import { useCart } from "../hooks/useCart.mjs";
+import { useIcon } from "../../icons/icon-context.mjs";
+import { Button } from "../../ui/button.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/client/cart/components/cart-trigger.tsx
+function CartTrigger({ isOpen, onOpenChange, labels = {}, className = "" }) {
+	const CartIcon = useIcon("cart");
+	const { cartLabel = "Cart" } = labels;
+	const { cart } = useCart();
+	const itemCount = cart?.items?.reduce((total, item) => total + item.quantity, 0) ?? 0;
+	const ariaLabel = itemCount > 0 ? `${cartLabel} (${itemCount} ${itemCount === 1 ? "item" : "items"})` : cartLabel;
+	return /* @__PURE__ */ jsxs(Button, {
+		variant: "ghost",
+		className: `relative size-10 ${className}`,
+		onClick: () => onOpenChange(!isOpen),
+		"aria-label": ariaLabel,
+		children: [/* @__PURE__ */ jsx(CartIcon, { className: "size-5" }), itemCount > 0 && /* @__PURE__ */ jsx("span", {
+			className: "absolute -top-1 -right-1 flex size-5 items-center justify-center rounded-full bg-primary text-primary-foreground text-xs font-bold",
+			children: itemCount
+		})]
+	});
+}
+//#endregion
+export { CartTrigger };
+
+//# sourceMappingURL=cart-trigger.mjs.map

package/dist/client/cart/components/cart-trigger.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"cart-trigger.mjs","names":[],"sources":["../../../../src/client/cart/components/cart-trigger.tsx"],"sourcesContent":["\"use client\"\n\nimport { Button } from \"../../ui/button\"\nimport { useIcon } from \"../../icons/icon-context\"\nimport { useCart } from \"../hooks/useCart\"\n\nexport interface CartTriggerProps {\n  isOpen: boolean\n  onOpenChange: (open: boolean) => void\n  labels?: {\n    cartLabel?: string\n  }\n  className?: string\n}\n\nexport function CartTrigger({\n  isOpen,\n  onOpenChange,\n  labels = {},\n  className = \"\",\n}: CartTriggerProps) {\n  const CartIcon = useIcon(\"cart\")\n  const { cartLabel = \"Cart\" } = labels\n  const { cart } = useCart()\n\n  const itemCount =\n    cart?.items?.reduce((total, item) => total + item.quantity, 0) ?? 0\n\n  const ariaLabel =\n    itemCount > 0\n      ? `${cartLabel} (${itemCount} ${itemCount === 1 ? \"item\" : \"items\"})`\n      : cartLabel\n\n  return (\n    <Button\n      variant=\"ghost\"\n      className={`relative size-10 ${className}`}\n      onClick={() => onOpenChange(!isOpen)}\n      aria-label={ariaLabel}\n    >\n      <CartIcon className=\"size-5\" />\n      {itemCount > 0 && (\n        <span className=\"absolute -top-1 -right-1 flex size-5 items-center justify-center rounded-full bg-primary text-primary-foreground text-xs font-bold\">\n          {itemCount}\n        </span>\n      )}\n    </Button>\n  )\n}\n"],"mappings":";;;;;;AAeA,SAAgB,YAAY,EAC1B,QACA,cACA,SAAS,EAAE,EACX,YAAY,MACO;CACnB,MAAM,WAAW,QAAQ,OAAO;CAChC,MAAM,EAAE,YAAY,WAAW;CAC/B,MAAM,EAAE,SAAS,SAAS;CAE1B,MAAM,YACJ,MAAM,OAAO,QAAQ,OAAO,SAAS,QAAQ,KAAK,UAAU,EAAE,IAAI;CAEpE,MAAM,YACJ,YAAY,IACR,GAAG,UAAU,IAAI,UAAU,GAAG,cAAc,IAAI,SAAS,QAAQ,KACjE;AAEN,QACE,qBAAC,QAAD;EACE,SAAQ;EACR,WAAW,oBAAoB;EAC/B,eAAe,aAAa,CAAC,OAAO;EACpC,cAAY;YAJd,CAME,oBAAC,UAAD,EAAU,WAAU,UAAW,CAAA,EAC9B,YAAY,KACX,oBAAC,QAAD;GAAM,WAAU;aACb;GACI,CAAA,CAEF"}

package/dist/client/cart/components/promo-code-input.d.ts

@@ -0,0 +1,29 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/client/cart/components/promo-code-input.d.ts
+interface PromoCodeInputProps {
+  onApply: (code: string) => void;
+  onRemove?: (code: string) => void;
+  appliedCodes?: string[];
+  isApplying?: boolean;
+  error?: string;
+  labels?: {
+    placeholder?: string;
+    applyButton?: string;
+    removeLabel?: string;
+    title?: string;
+  };
+  className?: string;
+}
+declare function PromoCodeInput({
+  onApply,
+  onRemove,
+  appliedCodes,
+  isApplying,
+  error,
+  labels,
+  className
+}: PromoCodeInputProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { PromoCodeInput, PromoCodeInputProps };
+//# sourceMappingURL=promo-code-input.d.ts.map

package/dist/client/cart/components/promo-code-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"promo-code-input.d.ts","names":[],"sources":["../../../../src/client/cart/components/promo-code-input.tsx"],"mappings":";;;UAOiB,mBAAA;EACf,OAAA,GAAU,IAAA;EACV,QAAA,IAAY,IAAA;EACZ,YAAA;EACA,UAAA;EACA,KAAA;EACA,MAAA;IACE,WAAA;IACA,WAAA;IACA,WAAA;IACA,KAAA;EAAA;EAEF,SAAA;AAAA;AAAA,iBAGc,cAAA,CAAA;EACd,OAAA;EACA,QAAA;EACA,YAAA;EACA,UAAA;EACA,KAAA;EACA,MAAA;EACA;AAAA,GACC,mBAAA,GAAmB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/client/cart/components/promo-code-input.mjs

@@ -0,0 +1,81 @@
+"use client";
+import { useIcon } from "../../icons/icon-context.mjs";
+import { Input } from "../../ui/input.mjs";
+import { StorefrontButton } from "../../storefront/primitives/button.mjs";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/client/cart/components/promo-code-input.tsx
+function PromoCodeInput({ onApply, onRemove, appliedCodes = [], isApplying = false, error, labels = {}, className = "" }) {
+	const CloseIcon = useIcon("close");
+	const LoaderIcon = useIcon("loader");
+	const TagIcon = useIcon("tag");
+	const { placeholder = "Enter promo code", applyButton = "Apply", removeLabel = "Remove", title = "Promo Code" } = labels;
+	const [code, setCode] = useState("");
+	const errorId = "promo-code-error";
+	const handleApply = () => {
+		const trimmed = code.trim();
+		if (!trimmed) return;
+		onApply(trimmed);
+		setCode("");
+	};
+	const handleKeyDown = (e) => {
+		if (e.key === "Enter") {
+			e.preventDefault();
+			handleApply();
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: `font-enad space-y-3 ${className}`,
+		children: [
+			title && /* @__PURE__ */ jsx("label", {
+				className: "block text-sm font-medium text-(--enad-text-primary-color)",
+				children: title
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex gap-2",
+				children: [/* @__PURE__ */ jsx(Input, {
+					type: "text",
+					value: code,
+					onChange: (e) => setCode(e.target.value),
+					onKeyDown: handleKeyDown,
+					placeholder,
+					disabled: isApplying,
+					"aria-describedby": error ? errorId : void 0,
+					className: "flex-1"
+				}), /* @__PURE__ */ jsx(StorefrontButton, {
+					type: "button",
+					onClick: handleApply,
+					disabled: isApplying || !code.trim(),
+					children: isApplying ? /* @__PURE__ */ jsx(LoaderIcon, { className: "h-4 w-4 animate-spin" }) : applyButton
+				})]
+			}),
+			error && /* @__PURE__ */ jsx("p", {
+				id: errorId,
+				className: "text-sm text-(--enad-error-color)",
+				role: "alert",
+				children: error
+			}),
+			appliedCodes.length > 0 && /* @__PURE__ */ jsx("div", {
+				className: "flex flex-wrap gap-2",
+				children: appliedCodes.map((appliedCode) => /* @__PURE__ */ jsxs("span", {
+					className: "inline-flex items-center gap-1.5 px-3 py-1.5 text-sm bg-(--enad-border-color) text-(--enad-text-primary-color) rounded-(--enad-border-radius)",
+					children: [
+						/* @__PURE__ */ jsx(TagIcon, { className: "h-3.5 w-3.5" }),
+						appliedCode,
+						onRemove && /* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: () => onRemove(appliedCode),
+							"aria-label": `${removeLabel} ${appliedCode}`,
+							className: "ml-0.5 p-0.5 rounded-full hover:bg-(--enad-surface) transition",
+							children: /* @__PURE__ */ jsx(CloseIcon, { className: "h-3 w-3" })
+						})
+					]
+				}, appliedCode))
+			})
+		]
+	});
+}
+//#endregion
+export { PromoCodeInput };
+
+//# sourceMappingURL=promo-code-input.mjs.map

package/dist/client/cart/components/promo-code-input.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"promo-code-input.mjs","names":[],"sources":["../../../../src/client/cart/components/promo-code-input.tsx"],"sourcesContent":["\"use client\"\n\nimport { useState } from \"react\"\nimport { useIcon } from \"../../icons/icon-context\"\nimport { Input } from \"../../ui/input\"\nimport { StorefrontButton } from \"../../storefront/primitives/button\"\n\nexport interface PromoCodeInputProps {\n  onApply: (code: string) => void\n  onRemove?: (code: string) => void\n  appliedCodes?: string[]\n  isApplying?: boolean\n  error?: string\n  labels?: {\n    placeholder?: string\n    applyButton?: string\n    removeLabel?: string\n    title?: string\n  }\n  className?: string\n}\n\nexport function PromoCodeInput({\n  onApply,\n  onRemove,\n  appliedCodes = [],\n  isApplying = false,\n  error,\n  labels = {},\n  className = \"\",\n}: PromoCodeInputProps) {\n  const CloseIcon = useIcon(\"close\")\n  const LoaderIcon = useIcon(\"loader\")\n  const TagIcon = useIcon(\"tag\")\n  const {\n    placeholder = \"Enter promo code\",\n    applyButton = \"Apply\",\n    removeLabel = \"Remove\",\n    title = \"Promo Code\",\n  } = labels\n\n  const [code, setCode] = useState(\"\")\n  const errorId = \"promo-code-error\"\n\n  const handleApply = () => {\n    const trimmed = code.trim()\n    if (!trimmed) return\n    onApply(trimmed)\n    setCode(\"\")\n  }\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === \"Enter\") {\n      e.preventDefault()\n      handleApply()\n    }\n  }\n\n  return (\n    <div className={`font-enad space-y-3 ${className}`}>\n      {title && (\n        <label className=\"block text-sm font-medium text-(--enad-text-primary-color)\">\n          {title}\n        </label>\n      )}\n\n      {/* Input + Apply button */}\n      <div className=\"flex gap-2\">\n        <Input\n          type=\"text\"\n          value={code}\n          onChange={(e) => setCode(e.target.value)}\n          onKeyDown={handleKeyDown}\n          placeholder={placeholder}\n          disabled={isApplying}\n          aria-describedby={error ? errorId : undefined}\n          className=\"flex-1\"\n        />\n        <StorefrontButton\n          type=\"button\"\n          onClick={handleApply}\n          disabled={isApplying || !code.trim()}\n        >\n          {isApplying ? (\n            <LoaderIcon className=\"h-4 w-4 animate-spin\" />\n          ) : (\n            applyButton\n          )}\n        </StorefrontButton>\n      </div>\n\n      {/* Error message */}\n      {error && (\n        <p id={errorId} className=\"text-sm text-(--enad-error-color)\" role=\"alert\">\n          {error}\n        </p>\n      )}\n\n      {/* Applied codes */}\n      {appliedCodes.length > 0 && (\n        <div className=\"flex flex-wrap gap-2\">\n          {appliedCodes.map((appliedCode) => (\n            <span\n              key={appliedCode}\n              className=\"inline-flex items-center gap-1.5 px-3 py-1.5 text-sm bg-(--enad-border-color) text-(--enad-text-primary-color) rounded-(--enad-border-radius)\"\n            >\n              <TagIcon className=\"h-3.5 w-3.5\" />\n              {appliedCode}\n              {onRemove && (\n                <button\n                  type=\"button\"\n                  onClick={() => onRemove(appliedCode)}\n                  aria-label={`${removeLabel} ${appliedCode}`}\n                  className=\"ml-0.5 p-0.5 rounded-full hover:bg-(--enad-surface) transition\"\n                >\n                  <CloseIcon className=\"h-3 w-3\" />\n                </button>\n              )}\n            </span>\n          ))}\n        </div>\n      )}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;AAsBA,SAAgB,eAAe,EAC7B,SACA,UACA,eAAe,EAAE,EACjB,aAAa,OACb,OACA,SAAS,EAAE,EACX,YAAY,MACU;CACtB,MAAM,YAAY,QAAQ,QAAQ;CAClC,MAAM,aAAa,QAAQ,SAAS;CACpC,MAAM,UAAU,QAAQ,MAAM;CAC9B,MAAM,EACJ,cAAc,oBACd,cAAc,SACd,cAAc,UACd,QAAQ,iBACN;CAEJ,MAAM,CAAC,MAAM,WAAW,SAAS,GAAG;CACpC,MAAM,UAAU;CAEhB,MAAM,oBAAoB;EACxB,MAAM,UAAU,KAAK,MAAM;AAC3B,MAAI,CAAC,QAAS;AACd,UAAQ,QAAQ;AAChB,UAAQ,GAAG;;CAGb,MAAM,iBAAiB,MAA6C;AAClE,MAAI,EAAE,QAAQ,SAAS;AACrB,KAAE,gBAAgB;AAClB,gBAAa;;;AAIjB,QACE,qBAAC,OAAD;EAAK,WAAW,uBAAuB;YAAvC;GACG,SACC,oBAAC,SAAD;IAAO,WAAU;cACd;IACK,CAAA;GAIV,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,OAAD;KACE,MAAK;KACL,OAAO;KACP,WAAW,MAAM,QAAQ,EAAE,OAAO,MAAM;KACxC,WAAW;KACE;KACb,UAAU;KACV,oBAAkB,QAAQ,UAAU,KAAA;KACpC,WAAU;KACV,CAAA,EACF,oBAAC,kBAAD;KACE,MAAK;KACL,SAAS;KACT,UAAU,cAAc,CAAC,KAAK,MAAM;eAEnC,aACC,oBAAC,YAAD,EAAY,WAAU,wBAAyB,CAAA,GAE/C;KAEe,CAAA,CACf;;GAGL,SACC,oBAAC,KAAD;IAAG,IAAI;IAAS,WAAU;IAAoC,MAAK;cAChE;IACC,CAAA;GAIL,aAAa,SAAS,KACrB,oBAAC,OAAD;IAAK,WAAU;cACZ,aAAa,KAAK,gBACjB,qBAAC,QAAD;KAEE,WAAU;eAFZ;MAIE,oBAAC,SAAD,EAAS,WAAU,eAAgB,CAAA;MAClC;MACA,YACC,oBAAC,UAAD;OACE,MAAK;OACL,eAAe,SAAS,YAAY;OACpC,cAAY,GAAG,YAAY,GAAG;OAC9B,WAAU;iBAEV,oBAAC,WAAD,EAAW,WAAU,WAAY,CAAA;OAC1B,CAAA;MAEN;OAfA,YAeA,CACP;IACE,CAAA;GAEJ"}

package/dist/client/cart/constants/session.d.ts

@@ -0,0 +1,5 @@
+//#region src/client/cart/constants/session.d.ts
+declare const CART_SESSION_KEY = "brink_cart_session";
+//#endregion
+export { CART_SESSION_KEY };
+//# sourceMappingURL=session.d.ts.map

package/dist/client/cart/constants/session.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"session.d.ts","names":[],"sources":["../../../../src/client/cart/constants/session.ts"],"mappings":";cAAa,gBAAA"}

package/dist/client/cart/constants/session.mjs

@@ -0,0 +1,6 @@
+//#region src/client/cart/constants/session.ts
+const CART_SESSION_KEY = "brink_cart_session";
+//#endregion
+export { CART_SESSION_KEY };
+
+//# sourceMappingURL=session.mjs.map