@cimplify/sdk 0.44.10 → 0.44.11

package/dist/react.d.mts

@@ -1025,6 +1025,10 @@ interface CartSummaryProps {
     onItemRemove?: (itemId: string) => void;
     onQuantityChange?: (itemId: string, quantity: number) => void;
     emptyMessage?: string;
+    /** Render the totals block (subtotal/tax/total) below the items. Default true. Hosts that show their own totals (drawer, page sidebar) should pass false. */
+    showTotals?: boolean;
+    /** Render the "Proceed to Checkout" button. Defaults to true if `onCheckout` is provided. */
+    showCheckoutButton?: boolean;
     className?: string;
     classNames?: CartSummaryClassNames;
 }
@@ -1034,7 +1038,7 @@ interface CartSummaryProps {
  * NOT a drawer or modal — just the cart content. Templates wrap this in
  * their own drawer/modal shell with animations.
  */
-declare function CartSummary({ cart: serverCart, onCheckout, onItemRemove, onQuantityChange, emptyMessage, className, classNames, }: CartSummaryProps): React$1.ReactElement;
+declare function CartSummary({ cart: serverCart, onCheckout, onItemRemove, onQuantityChange, emptyMessage, showTotals, showCheckoutButton, className, classNames, }: CartSummaryProps): React$1.ReactElement;
 
 interface AvailabilityBadgeClassNames {
     root?: string;

package/dist/react.d.ts

@@ -1025,6 +1025,10 @@ interface CartSummaryProps {
     onItemRemove?: (itemId: string) => void;
     onQuantityChange?: (itemId: string, quantity: number) => void;
     emptyMessage?: string;
+    /** Render the totals block (subtotal/tax/total) below the items. Default true. Hosts that show their own totals (drawer, page sidebar) should pass false. */
+    showTotals?: boolean;
+    /** Render the "Proceed to Checkout" button. Defaults to true if `onCheckout` is provided. */
+    showCheckoutButton?: boolean;
     className?: string;
     classNames?: CartSummaryClassNames;
 }
@@ -1034,7 +1038,7 @@ interface CartSummaryProps {
  * NOT a drawer or modal — just the cart content. Templates wrap this in
  * their own drawer/modal shell with animations.
  */
-declare function CartSummary({ cart: serverCart, onCheckout, onItemRemove, onQuantityChange, emptyMessage, className, classNames, }: CartSummaryProps): React$1.ReactElement;
+declare function CartSummary({ cart: serverCart, onCheckout, onItemRemove, onQuantityChange, emptyMessage, showTotals, showCheckoutButton, className, classNames, }: CartSummaryProps): React$1.ReactElement;
 
 interface AvailabilityBadgeClassNames {
     root?: string;

package/dist/react.js

@@ -6613,6 +6613,8 @@ function CartSummary({
   onItemRemove,
   onQuantityChange,
   emptyMessage = "Your cart is empty",
+  showTotals = true,
+  showCheckoutButton,
   className,
   classNames
 }) {
@@ -6663,45 +6665,55 @@ function CartSummary({
           },
           item.id
         )) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-cart-totals": true, className: classNames?.totals, children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-cart-subtotal": true, className: classNames?.subtotal, children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-              "Subtotal (",
-              itemCount,
-              " ",
-              itemCount === 1 ? "item" : "items",
-              ")"
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: subtotal })
-          ] }),
-          totalDiscounts != null && chunkV2O5AO7I_js.parsePrice(totalDiscounts) > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-cart-discount": true, className: classNames?.discount, children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Discount" }),
-            /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: totalDiscounts, prefix: "-" })
-          ] }),
-          deliveryFee != null && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-cart-delivery-fee": true, className: classNames?.deliveryFee, children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Delivery fee" }),
-            chunkV2O5AO7I_js.parsePrice(deliveryFee) > 0 ? /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: deliveryFee }) : /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Free delivery" })
-          ] }),
-          serviceCharge != null && chunkV2O5AO7I_js.parsePrice(serviceCharge) > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-cart-service-charge": true, className: classNames?.serviceCharge, children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Service charge" }),
-            /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: serviceCharge })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-cart-tax": true, className: classNames?.tax, children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Tax" }),
-            /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: tax })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-cart-total": true, className: classNames?.total, children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Total" }),
-            /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: total })
-          ] })
-        ] }),
-        onCheckout && /* @__PURE__ */ jsxRuntime.jsx(
+        showTotals && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            "data-cimplify-cart-totals": true,
+            className: cn("mt-6 pt-4 border-t border-border space-y-2 text-sm", classNames?.totals),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-cart-subtotal": true, className: cn("flex items-baseline justify-between", classNames?.subtotal), children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-muted-foreground", children: [
+                  "Subtotal (",
+                  itemCount,
+                  " ",
+                  itemCount === 1 ? "item" : "items",
+                  ")"
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: subtotal, className: "tabular-nums" })
+              ] }),
+              totalDiscounts != null && chunkV2O5AO7I_js.parsePrice(totalDiscounts) > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-cart-discount": true, className: cn("flex items-baseline justify-between", classNames?.discount), children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Discount" }),
+                /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: totalDiscounts, prefix: "-", className: "tabular-nums text-primary" })
+              ] }),
+              deliveryFee != null && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-cart-delivery-fee": true, className: cn("flex items-baseline justify-between", classNames?.deliveryFee), children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Delivery" }),
+                chunkV2O5AO7I_js.parsePrice(deliveryFee) > 0 ? /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: deliveryFee, className: "tabular-nums" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-primary", children: "Free" })
+              ] }),
+              serviceCharge != null && chunkV2O5AO7I_js.parsePrice(serviceCharge) > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-cart-service-charge": true, className: cn("flex items-baseline justify-between", classNames?.serviceCharge), children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Service charge" }),
+                /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: serviceCharge, className: "tabular-nums" })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-cart-tax": true, className: cn("flex items-baseline justify-between", classNames?.tax), children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Tax" }),
+                /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: tax, className: "tabular-nums" })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-cart-total": true, className: cn("flex items-baseline justify-between pt-3 mt-1 border-t border-border", classNames?.total), children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold", children: "Total" }),
+                /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: total, className: "text-base font-bold tabular-nums" })
+              ] })
+            ]
+          }
+        ),
+        (showCheckoutButton ?? Boolean(onCheckout)) && onCheckout && /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
             type: "button",
             onClick: onCheckout,
             "data-cimplify-cart-checkout": true,
-            className: classNames?.checkout,
+            className: cn(
+              "mt-4 w-full h-12 rounded-full bg-foreground text-background font-semibold text-sm hover:bg-foreground/90 active:scale-[0.99] transition-all",
+              classNames?.checkout
+            ),
             children: "Proceed to Checkout"
           }
         )
@@ -10780,7 +10792,7 @@ function DefaultCartLayout({
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid lg:grid-cols-[1fr_360px] gap-10", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(CartSummary, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(CartSummary, { showTotals: false, showCheckoutButton: false }),
         onContinueShopping && /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
           {
@@ -11072,7 +11084,7 @@ function CartDrawer({
                   }
                 ) })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto px-6", children: cart.isEmpty ? /* @__PURE__ */ jsxRuntime.jsx(EmptyState, { onShop: handleShop }) : /* @__PURE__ */ jsxRuntime.jsx(CartSummary, {}) }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto px-6", children: cart.isEmpty ? /* @__PURE__ */ jsxRuntime.jsx(EmptyState, { onShop: handleShop }) : /* @__PURE__ */ jsxRuntime.jsx(CartSummary, { showTotals: false, showCheckoutButton: false }) }),
               !cart.isEmpty && /* @__PURE__ */ jsxRuntime.jsxs("footer", { className: "border-t border-border px-6 py-5 shrink-0 space-y-3 bg-background", children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline justify-between", children: [
                   /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: "Subtotal" }),

package/dist/react.mjs

@@ -6608,6 +6608,8 @@ function CartSummary({
   onItemRemove,
   onQuantityChange,
   emptyMessage = "Your cart is empty",
+  showTotals = true,
+  showCheckoutButton,
   className,
   classNames
 }) {
@@ -6658,45 +6660,55 @@ function CartSummary({
           },
           item.id
         )) }),
-        /* @__PURE__ */ jsxs("div", { "data-cimplify-cart-totals": true, className: classNames?.totals, children: [
-          /* @__PURE__ */ jsxs("div", { "data-cimplify-cart-subtotal": true, className: classNames?.subtotal, children: [
-            /* @__PURE__ */ jsxs("span", { children: [
-              "Subtotal (",
-              itemCount,
-              " ",
-              itemCount === 1 ? "item" : "items",
-              ")"
-            ] }),
-            /* @__PURE__ */ jsx(Price, { amount: subtotal })
-          ] }),
-          totalDiscounts != null && parsePrice(totalDiscounts) > 0 && /* @__PURE__ */ jsxs("div", { "data-cimplify-cart-discount": true, className: classNames?.discount, children: [
-            /* @__PURE__ */ jsx("span", { children: "Discount" }),
-            /* @__PURE__ */ jsx(Price, { amount: totalDiscounts, prefix: "-" })
-          ] }),
-          deliveryFee != null && /* @__PURE__ */ jsxs("div", { "data-cimplify-cart-delivery-fee": true, className: classNames?.deliveryFee, children: [
-            /* @__PURE__ */ jsx("span", { children: "Delivery fee" }),
-            parsePrice(deliveryFee) > 0 ? /* @__PURE__ */ jsx(Price, { amount: deliveryFee }) : /* @__PURE__ */ jsx("span", { children: "Free delivery" })
-          ] }),
-          serviceCharge != null && parsePrice(serviceCharge) > 0 && /* @__PURE__ */ jsxs("div", { "data-cimplify-cart-service-charge": true, className: classNames?.serviceCharge, children: [
-            /* @__PURE__ */ jsx("span", { children: "Service charge" }),
-            /* @__PURE__ */ jsx(Price, { amount: serviceCharge })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { "data-cimplify-cart-tax": true, className: classNames?.tax, children: [
-            /* @__PURE__ */ jsx("span", { children: "Tax" }),
-            /* @__PURE__ */ jsx(Price, { amount: tax })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { "data-cimplify-cart-total": true, className: classNames?.total, children: [
-            /* @__PURE__ */ jsx("span", { children: "Total" }),
-            /* @__PURE__ */ jsx(Price, { amount: total })
-          ] })
-        ] }),
-        onCheckout && /* @__PURE__ */ jsx(
+        showTotals && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-cimplify-cart-totals": true,
+            className: cn("mt-6 pt-4 border-t border-border space-y-2 text-sm", classNames?.totals),
+            children: [
+              /* @__PURE__ */ jsxs("div", { "data-cimplify-cart-subtotal": true, className: cn("flex items-baseline justify-between", classNames?.subtotal), children: [
+                /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+                  "Subtotal (",
+                  itemCount,
+                  " ",
+                  itemCount === 1 ? "item" : "items",
+                  ")"
+                ] }),
+                /* @__PURE__ */ jsx(Price, { amount: subtotal, className: "tabular-nums" })
+              ] }),
+              totalDiscounts != null && parsePrice(totalDiscounts) > 0 && /* @__PURE__ */ jsxs("div", { "data-cimplify-cart-discount": true, className: cn("flex items-baseline justify-between", classNames?.discount), children: [
+                /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Discount" }),
+                /* @__PURE__ */ jsx(Price, { amount: totalDiscounts, prefix: "-", className: "tabular-nums text-primary" })
+              ] }),
+              deliveryFee != null && /* @__PURE__ */ jsxs("div", { "data-cimplify-cart-delivery-fee": true, className: cn("flex items-baseline justify-between", classNames?.deliveryFee), children: [
+                /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Delivery" }),
+                parsePrice(deliveryFee) > 0 ? /* @__PURE__ */ jsx(Price, { amount: deliveryFee, className: "tabular-nums" }) : /* @__PURE__ */ jsx("span", { className: "font-medium text-primary", children: "Free" })
+              ] }),
+              serviceCharge != null && parsePrice(serviceCharge) > 0 && /* @__PURE__ */ jsxs("div", { "data-cimplify-cart-service-charge": true, className: cn("flex items-baseline justify-between", classNames?.serviceCharge), children: [
+                /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Service charge" }),
+                /* @__PURE__ */ jsx(Price, { amount: serviceCharge, className: "tabular-nums" })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { "data-cimplify-cart-tax": true, className: cn("flex items-baseline justify-between", classNames?.tax), children: [
+                /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Tax" }),
+                /* @__PURE__ */ jsx(Price, { amount: tax, className: "tabular-nums" })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { "data-cimplify-cart-total": true, className: cn("flex items-baseline justify-between pt-3 mt-1 border-t border-border", classNames?.total), children: [
+                /* @__PURE__ */ jsx("span", { className: "font-semibold", children: "Total" }),
+                /* @__PURE__ */ jsx(Price, { amount: total, className: "text-base font-bold tabular-nums" })
+              ] })
+            ]
+          }
+        ),
+        (showCheckoutButton ?? Boolean(onCheckout)) && onCheckout && /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",
             onClick: onCheckout,
             "data-cimplify-cart-checkout": true,
-            className: classNames?.checkout,
+            className: cn(
+              "mt-4 w-full h-12 rounded-full bg-foreground text-background font-semibold text-sm hover:bg-foreground/90 active:scale-[0.99] transition-all",
+              classNames?.checkout
+            ),
             children: "Proceed to Checkout"
           }
         )
@@ -10775,7 +10787,7 @@ function DefaultCartLayout({
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "grid lg:grid-cols-[1fr_360px] gap-10", children: [
       /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx(CartSummary, {}),
+        /* @__PURE__ */ jsx(CartSummary, { showTotals: false, showCheckoutButton: false }),
         onContinueShopping && /* @__PURE__ */ jsxs(
           "button",
           {
@@ -11067,7 +11079,7 @@ function CartDrawer({
                   }
                 ) })
               ] }),
-              /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto px-6", children: cart.isEmpty ? /* @__PURE__ */ jsx(EmptyState, { onShop: handleShop }) : /* @__PURE__ */ jsx(CartSummary, {}) }),
+              /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto px-6", children: cart.isEmpty ? /* @__PURE__ */ jsx(EmptyState, { onShop: handleShop }) : /* @__PURE__ */ jsx(CartSummary, { showTotals: false, showCheckoutButton: false }) }),
               !cart.isEmpty && /* @__PURE__ */ jsxs("footer", { className: "border-t border-border px-6 py-5 shrink-0 space-y-3 bg-background", children: [
                 /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between", children: [
                   /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "Subtotal" }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cimplify/sdk",
-  "version": "0.44.10",
+  "version": "0.44.11",
   "description": "Cimplify Commerce SDK for storefronts",
   "keywords": [
     "cimplify",

package/registry/cart-summary.json

@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "cart-summary.tsx",
-      "content": "\"use client\";\n\nimport React from \"react\";\nimport type { UseCartItem } from \"@cimplify/sdk/react\";\nimport type { DisplayCart } from \"@cimplify/sdk\";\nimport { useCart } from \"@cimplify/sdk/react\";\nimport { getVariantDisplayName } from \"@cimplify/sdk\";\nimport { INPUT_FIELD_TYPE } from \"@cimplify/sdk\";\nimport { parsePrice } from \"@cimplify/sdk\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { QuantitySelector } from \"@cimplify/sdk/react\";\nimport { useProductPrice } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface CartSummaryClassNames {\n  root?: string;\n  item?: string;\n  itemName?: string;\n  itemPrice?: string;\n  quantity?: string;\n  removeButton?: string;\n  totals?: string;\n  subtotal?: string;\n  tax?: string;\n  deliveryFee?: string;\n  serviceCharge?: string;\n  discount?: string;\n  total?: string;\n  checkout?: string;\n  empty?: string;\n  serviceInfo?: string;\n  digitalInfo?: string;\n  bundleBreakdown?: string;\n  compositeBreakdown?: string;\n  customerInputs?: string;\n}\n\nexport interface CartSummaryProps {\n  /** Optional server cart for extended pricing details (delivery fee, service charge, discounts). */\n  cart?: DisplayCart;\n  onCheckout?: () => void;\n  onItemRemove?: (itemId: string) => void;\n  onQuantityChange?: (itemId: string, quantity: number) => void;\n  emptyMessage?: string;\n  className?: string;\n  classNames?: CartSummaryClassNames;\n}\n\nfunction CartLineItemRow({\n  item,\n  onRemove,\n  onQuantityChange,\n  classNames,\n}: {\n  item: UseCartItem;\n  onRemove: (itemId: string) => void;\n  onQuantityChange: (itemId: string, qty: number) => void;\n  classNames?: CartSummaryClassNames;\n}): React.ReactElement {\n  const { unitPrice } = useProductPrice({\n    product: item.product,\n    variant: item.variant,\n    addOnOptions: item.addOnOptions,\n  });\n  const hasComposite = item.compositeSelections && item.compositeSelections.length > 0;\n  const hasBundle = item.bundleSelections && item.bundleSelections.length > 0;\n\n  const isOptimistic = (item as { isOptimistic?: boolean }).isOptimistic === true;\n\n  const lineTotal = parsePrice(unitPrice) * item.quantity;\n  const imageUrl = item.product.image_url;\n  const variantLabel = item.variant ? getVariantDisplayName(item.variant, item.product.name) : null;\n\n  return (\n    <div\n      data-cimplify-cart-item\n      data-optimistic={isOptimistic ? \"true\" : undefined}\n      className={cn(\n        \"group relative flex gap-3 py-4 border-b border-border last:border-b-0 transition-opacity\",\n        isOptimistic && \"opacity-60\",\n        classNames?.item,\n      )}\n    >\n      {/* Thumbnail */}\n      <div\n        data-cimplify-cart-item-image\n        className=\"relative w-20 h-20 shrink-0 rounded-md overflow-hidden bg-muted\"\n      >\n        {imageUrl ? (\n          <img\n            src={imageUrl}\n            alt=\"\"\n            className=\"w-full h-full object-cover\"\n            loading=\"lazy\"\n          />\n        ) : (\n          <div className=\"w-full h-full grid place-items-center text-muted-foreground/40\">\n            <svg className=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" viewBox=\"0 0 24 24\" aria-hidden>\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z\" />\n            </svg>\n          </div>\n        )}\n      </div>\n\n      {/* Info column */}\n      <div data-cimplify-cart-item-info className=\"flex-1 min-w-0 flex flex-col\">\n        <div className=\"flex items-start justify-between gap-3\">\n          <h3\n            data-cimplify-cart-item-name\n            className={cn(\"text-sm font-medium leading-tight m-0 truncate\", classNames?.itemName)}\n          >\n            {item.product.name}\n          </h3>\n          <button\n            type=\"button\"\n            onClick={() => onRemove(item.id)}\n            data-cimplify-cart-item-remove\n            className={cn(\n              \"shrink-0 -mr-1 -mt-1 grid place-items-center w-7 h-7 rounded-full text-muted-foreground/60 hover:text-foreground hover:bg-muted transition-colors\",\n              classNames?.removeButton,\n            )}\n            aria-label={`Remove ${item.product.name}`}\n          >\n            <svg className=\"w-3.5 h-3.5\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" viewBox=\"0 0 24 24\" aria-hidden>\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n            </svg>\n          </button>\n        </div>\n\n        {/* Pills row: variant, add-ons, badges */}\n        {(variantLabel || (item.addOnOptions && item.addOnOptions.length > 0) || hasComposite || hasBundle) && (\n          <div data-cimplify-cart-item-pills className=\"flex flex-wrap gap-1.5 mt-1.5\">\n            {variantLabel && (\n              <span\n                data-cimplify-cart-item-variant\n                className=\"inline-flex items-center px-2 py-0.5 rounded-full bg-muted text-[11px] font-medium text-foreground\"\n              >\n                {variantLabel}\n              </span>\n            )}\n            {item.addOnOptions?.map((opt) => (\n              <span\n                key={opt.id}\n                data-cimplify-cart-item-addon\n                className=\"inline-flex items-center px-2 py-0.5 rounded-full bg-muted text-[11px] font-medium text-muted-foreground\"\n              >\n                + {opt.name}\n              </span>\n            ))}\n            {(hasComposite || hasBundle) && (\n              <span\n                data-cimplify-cart-item-badge\n                className=\"inline-flex items-center px-2 py-0.5 rounded-full bg-primary/10 text-[11px] font-semibold uppercase tracking-wider text-primary\"\n              >\n                {hasComposite ? \"Custom\" : \"Bundle\"}\n              </span>\n            )}\n          </div>\n        )}\n\n        {/* Special instructions */}\n        {item.specialInstructions && (\n          <p\n            data-cimplify-cart-item-instructions\n            className=\"mt-1.5 text-xs italic text-muted-foreground line-clamp-2\"\n          >\n            \\u201C{item.specialInstructions}\\u201D\n          </p>\n        )}\n\n        {/* Customer input values */}\n        {item.customerInputs && item.customerInputs.length > 0 && (\n          <dl data-cimplify-cart-customer-inputs className={cn(\"mt-1.5 text-xs space-y-0.5\", classNames?.customerInputs)}>\n            {item.customerInputs.map((input) => (\n              <div key={input.field_id} data-cimplify-cart-input className=\"flex gap-1.5\">\n                <dt data-cimplify-cart-input-label className=\"text-muted-foreground\">{input.field_name}:</dt>\n                <dd data-cimplify-cart-input-value className=\"text-foreground m-0 truncate\">\n                  {input.field_type === INPUT_FIELD_TYPE.File || input.field_type === INPUT_FIELD_TYPE.Image\n                    ? String(input.value).split(\"/\").pop() || \"Uploaded file\"\n                    : String(input.value)}\n                </dd>\n              </div>\n            ))}\n          </dl>\n        )}\n\n        {/* Service: scheduled details */}\n        {(item.lineType === \"service\" || item.product.type === \"service\") && item.scheduledStart && (\n          <div data-cimplify-cart-service-info className={cn(\"mt-1.5 flex items-center gap-1.5 text-xs text-muted-foreground\", classNames?.serviceInfo)}>\n            <svg className=\"w-3.5 h-3.5 shrink-0\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" viewBox=\"0 0 24 24\" aria-hidden>\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z\" />\n            </svg>\n            <span>\n              {new Date(item.scheduledStart).toLocaleDateString(undefined, { month: \"short\", day: \"numeric\" })} at{\" \"}\n              {new Date(item.scheduledStart).toLocaleTimeString([], { hour: \"2-digit\", minute: \"2-digit\" })}\n            </span>\n            {item.serviceStatus && (\n              <span data-status={item.serviceStatus} className=\"ml-auto px-1.5 py-0.5 rounded-full bg-muted text-[10px] uppercase tracking-wider\">\n                {item.serviceStatus}\n              </span>\n            )}\n          </div>\n        )}\n\n        {/* Digital: instant-delivery badge */}\n        {(item.lineType === \"digital\" || item.product.type === \"digital\") && (\n          <div data-cimplify-cart-digital-info className={cn(\"mt-1.5 flex items-center gap-1 text-xs text-muted-foreground\", classNames?.digitalInfo)}>\n            <svg className=\"w-3.5 h-3.5 shrink-0\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" viewBox=\"0 0 24 24\" aria-hidden>\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M13 10V3L4 14h7v7l9-11h-7z\" />\n            </svg>\n            <span>Instant digital delivery</span>\n          </div>\n        )}\n\n        {/* Bundle / composite component breakdown */}\n        {(item.bundleResolved || item.compositeResolved) && (\n          <ul\n            data-cimplify-cart-composite-breakdown={item.compositeResolved ? \"\" : undefined}\n            data-cimplify-cart-bundle-breakdown={item.bundleResolved ? \"\" : undefined}\n            className={cn(\"mt-1.5 pl-3 border-l border-border space-y-0.5 text-xs text-muted-foreground\", item.compositeResolved ? classNames?.compositeBreakdown : classNames?.bundleBreakdown)}\n          >\n            {((item.bundleResolved?.selections ?? item.compositeResolved?.selections ?? []) as Array<{\n              component_id?: string;\n              product_name?: string;\n              component_name?: string;\n              quantity: number;\n              product_type?: string;\n            }>).map((sel) => {\n              const name = sel.product_name ?? sel.component_name ?? \"\";\n              const compId = sel.component_id ?? `${name}-${sel.quantity}`;\n              return (\n                <li key={compId} data-product-type={sel.product_type} className=\"flex items-baseline gap-1.5 m-0\">\n                  <span className=\"font-medium text-foreground/80\">{sel.quantity}\\u00D7</span>\n                  <span className=\"truncate\">{name}</span>\n                </li>\n              );\n            })}\n          </ul>\n        )}\n\n        {/* Bottom row: line price + qty stepper */}\n        <div className=\"mt-3 flex items-center justify-between gap-3\">\n          <Price\n            amount={lineTotal}\n            className={cn(\"text-sm font-semibold tabular-nums\", classNames?.itemPrice)}\n          />\n          <div data-cimplify-cart-item-controls className={classNames?.quantity}>\n            <QuantitySelector\n              value={item.quantity}\n              onChange={(qty) => onQuantityChange(item.id, qty)}\n              min={0}\n            />\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n\n/**\n * CartSummary — renders cart line items + totals.\n *\n * NOT a drawer or modal — just the cart content. Templates wrap this in\n * their own drawer/modal shell with animations.\n */\nexport function CartSummary({\n  cart: serverCart,\n  onCheckout,\n  onItemRemove,\n  onQuantityChange,\n  emptyMessage = \"Your cart is empty\",\n  className,\n  classNames,\n}: CartSummaryProps): React.ReactElement {\n  const {\n    items,\n    itemCount,\n    subtotal,\n    tax,\n    total,\n    isEmpty,\n    isOptimistic,\n    pendingOpCount,\n    removeItem,\n    updateQuantity,\n  } = useCart();\n\n  const deliveryFee = serverCart?.delivery_fee;\n  const serviceCharge = serverCart?.service_charge;\n  const totalDiscounts = serverCart?.total_discounts;\n\n  const handleRemove = (itemId: string) => {\n    if (onItemRemove) {\n      onItemRemove(itemId);\n    } else {\n      void removeItem(itemId);\n    }\n  };\n\n  const handleQuantityChange = (itemId: string, qty: number) => {\n    if (onQuantityChange) {\n      onQuantityChange(itemId, qty);\n    } else {\n      void updateQuantity(itemId, qty);\n    }\n  };\n\n  return (\n    <div\n      data-cimplify-cart-summary\n      data-optimistic={isOptimistic ? \"true\" : undefined}\n      data-pending-ops={pendingOpCount > 0 ? pendingOpCount : undefined}\n      className={cn(className, classNames?.root)}\n    >\n      {isEmpty ? (\n        <div data-cimplify-cart-empty className={classNames?.empty}>\n          <p>{emptyMessage}</p>\n        </div>\n      ) : (\n        <>\n          {/* Line items */}\n          <div data-cimplify-cart-items>\n            {items.map((item) => (\n              <CartLineItemRow\n                key={item.id}\n                item={item}\n                onRemove={handleRemove}\n                onQuantityChange={handleQuantityChange}\n                classNames={classNames}\n              />\n            ))}\n          </div>\n\n          {/* Totals */}\n          <div data-cimplify-cart-totals className={classNames?.totals}>\n            <div data-cimplify-cart-subtotal className={classNames?.subtotal}>\n              <span>Subtotal ({itemCount} {itemCount === 1 ? \"item\" : \"items\"})</span>\n              <Price amount={subtotal} />\n            </div>\n\n            {totalDiscounts != null && parsePrice(totalDiscounts) > 0 && (\n              <div data-cimplify-cart-discount className={classNames?.discount}>\n                <span>Discount</span>\n                <Price amount={totalDiscounts} prefix=\"-\" />\n              </div>\n            )}\n\n            {deliveryFee != null && (\n              <div data-cimplify-cart-delivery-fee className={classNames?.deliveryFee}>\n                <span>Delivery fee</span>\n                {parsePrice(deliveryFee) > 0 ? (\n                  <Price amount={deliveryFee} />\n                ) : (\n                  <span>Free delivery</span>\n                )}\n              </div>\n            )}\n\n            {serviceCharge != null && parsePrice(serviceCharge) > 0 && (\n              <div data-cimplify-cart-service-charge className={classNames?.serviceCharge}>\n                <span>Service charge</span>\n                <Price amount={serviceCharge} />\n              </div>\n            )}\n\n            <div data-cimplify-cart-tax className={classNames?.tax}>\n              <span>Tax</span>\n              <Price amount={tax} />\n            </div>\n            <div data-cimplify-cart-total className={classNames?.total}>\n              <span>Total</span>\n              <Price amount={total} />\n            </div>\n          </div>\n\n          {onCheckout && (\n            <button\n              type=\"button\"\n              onClick={onCheckout}\n              data-cimplify-cart-checkout\n              className={classNames?.checkout}\n            >\n              Proceed to Checkout\n            </button>\n          )}\n        </>\n      )}\n    </div>\n  );\n}\n"
+      "content": "\"use client\";\n\nimport React from \"react\";\nimport type { UseCartItem } from \"@cimplify/sdk/react\";\nimport type { DisplayCart } from \"@cimplify/sdk\";\nimport { useCart } from \"@cimplify/sdk/react\";\nimport { getVariantDisplayName } from \"@cimplify/sdk\";\nimport { INPUT_FIELD_TYPE } from \"@cimplify/sdk\";\nimport { parsePrice } from \"@cimplify/sdk\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { QuantitySelector } from \"@cimplify/sdk/react\";\nimport { useProductPrice } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface CartSummaryClassNames {\n  root?: string;\n  item?: string;\n  itemName?: string;\n  itemPrice?: string;\n  quantity?: string;\n  removeButton?: string;\n  totals?: string;\n  subtotal?: string;\n  tax?: string;\n  deliveryFee?: string;\n  serviceCharge?: string;\n  discount?: string;\n  total?: string;\n  checkout?: string;\n  empty?: string;\n  serviceInfo?: string;\n  digitalInfo?: string;\n  bundleBreakdown?: string;\n  compositeBreakdown?: string;\n  customerInputs?: string;\n}\n\nexport interface CartSummaryProps {\n  /** Optional server cart for extended pricing details (delivery fee, service charge, discounts). */\n  cart?: DisplayCart;\n  onCheckout?: () => void;\n  onItemRemove?: (itemId: string) => void;\n  onQuantityChange?: (itemId: string, quantity: number) => void;\n  emptyMessage?: string;\n  /** Render the totals block (subtotal/tax/total) below the items. Default true. Hosts that show their own totals (drawer, page sidebar) should pass false. */\n  showTotals?: boolean;\n  /** Render the \"Proceed to Checkout\" button. Defaults to true if `onCheckout` is provided. */\n  showCheckoutButton?: boolean;\n  className?: string;\n  classNames?: CartSummaryClassNames;\n}\n\nfunction CartLineItemRow({\n  item,\n  onRemove,\n  onQuantityChange,\n  classNames,\n}: {\n  item: UseCartItem;\n  onRemove: (itemId: string) => void;\n  onQuantityChange: (itemId: string, qty: number) => void;\n  classNames?: CartSummaryClassNames;\n}): React.ReactElement {\n  const { unitPrice } = useProductPrice({\n    product: item.product,\n    variant: item.variant,\n    addOnOptions: item.addOnOptions,\n  });\n  const hasComposite = item.compositeSelections && item.compositeSelections.length > 0;\n  const hasBundle = item.bundleSelections && item.bundleSelections.length > 0;\n\n  const isOptimistic = (item as { isOptimistic?: boolean }).isOptimistic === true;\n\n  const lineTotal = parsePrice(unitPrice) * item.quantity;\n  const imageUrl = item.product.image_url;\n  const variantLabel = item.variant ? getVariantDisplayName(item.variant, item.product.name) : null;\n\n  return (\n    <div\n      data-cimplify-cart-item\n      data-optimistic={isOptimistic ? \"true\" : undefined}\n      className={cn(\n        \"group relative flex gap-3 py-4 border-b border-border last:border-b-0 transition-opacity\",\n        isOptimistic && \"opacity-60\",\n        classNames?.item,\n      )}\n    >\n      {/* Thumbnail */}\n      <div\n        data-cimplify-cart-item-image\n        className=\"relative w-20 h-20 shrink-0 rounded-md overflow-hidden bg-muted\"\n      >\n        {imageUrl ? (\n          <img\n            src={imageUrl}\n            alt=\"\"\n            className=\"w-full h-full object-cover\"\n            loading=\"lazy\"\n          />\n        ) : (\n          <div className=\"w-full h-full grid place-items-center text-muted-foreground/40\">\n            <svg className=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" viewBox=\"0 0 24 24\" aria-hidden>\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z\" />\n            </svg>\n          </div>\n        )}\n      </div>\n\n      {/* Info column */}\n      <div data-cimplify-cart-item-info className=\"flex-1 min-w-0 flex flex-col\">\n        <div className=\"flex items-start justify-between gap-3\">\n          <h3\n            data-cimplify-cart-item-name\n            className={cn(\"text-sm font-medium leading-tight m-0 truncate\", classNames?.itemName)}\n          >\n            {item.product.name}\n          </h3>\n          <button\n            type=\"button\"\n            onClick={() => onRemove(item.id)}\n            data-cimplify-cart-item-remove\n            className={cn(\n              \"shrink-0 -mr-1 -mt-1 grid place-items-center w-7 h-7 rounded-full text-muted-foreground/60 hover:text-foreground hover:bg-muted transition-colors\",\n              classNames?.removeButton,\n            )}\n            aria-label={`Remove ${item.product.name}`}\n          >\n            <svg className=\"w-3.5 h-3.5\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" viewBox=\"0 0 24 24\" aria-hidden>\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n            </svg>\n          </button>\n        </div>\n\n        {/* Pills row: variant, add-ons, badges */}\n        {(variantLabel || (item.addOnOptions && item.addOnOptions.length > 0) || hasComposite || hasBundle) && (\n          <div data-cimplify-cart-item-pills className=\"flex flex-wrap gap-1.5 mt-1.5\">\n            {variantLabel && (\n              <span\n                data-cimplify-cart-item-variant\n                className=\"inline-flex items-center px-2 py-0.5 rounded-full bg-muted text-[11px] font-medium text-foreground\"\n              >\n                {variantLabel}\n              </span>\n            )}\n            {item.addOnOptions?.map((opt) => (\n              <span\n                key={opt.id}\n                data-cimplify-cart-item-addon\n                className=\"inline-flex items-center px-2 py-0.5 rounded-full bg-muted text-[11px] font-medium text-muted-foreground\"\n              >\n                + {opt.name}\n              </span>\n            ))}\n            {(hasComposite || hasBundle) && (\n              <span\n                data-cimplify-cart-item-badge\n                className=\"inline-flex items-center px-2 py-0.5 rounded-full bg-primary/10 text-[11px] font-semibold uppercase tracking-wider text-primary\"\n              >\n                {hasComposite ? \"Custom\" : \"Bundle\"}\n              </span>\n            )}\n          </div>\n        )}\n\n        {/* Special instructions */}\n        {item.specialInstructions && (\n          <p\n            data-cimplify-cart-item-instructions\n            className=\"mt-1.5 text-xs italic text-muted-foreground line-clamp-2\"\n          >\n            \\u201C{item.specialInstructions}\\u201D\n          </p>\n        )}\n\n        {/* Customer input values */}\n        {item.customerInputs && item.customerInputs.length > 0 && (\n          <dl data-cimplify-cart-customer-inputs className={cn(\"mt-1.5 text-xs space-y-0.5\", classNames?.customerInputs)}>\n            {item.customerInputs.map((input) => (\n              <div key={input.field_id} data-cimplify-cart-input className=\"flex gap-1.5\">\n                <dt data-cimplify-cart-input-label className=\"text-muted-foreground\">{input.field_name}:</dt>\n                <dd data-cimplify-cart-input-value className=\"text-foreground m-0 truncate\">\n                  {input.field_type === INPUT_FIELD_TYPE.File || input.field_type === INPUT_FIELD_TYPE.Image\n                    ? String(input.value).split(\"/\").pop() || \"Uploaded file\"\n                    : String(input.value)}\n                </dd>\n              </div>\n            ))}\n          </dl>\n        )}\n\n        {/* Service: scheduled details */}\n        {(item.lineType === \"service\" || item.product.type === \"service\") && item.scheduledStart && (\n          <div data-cimplify-cart-service-info className={cn(\"mt-1.5 flex items-center gap-1.5 text-xs text-muted-foreground\", classNames?.serviceInfo)}>\n            <svg className=\"w-3.5 h-3.5 shrink-0\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" viewBox=\"0 0 24 24\" aria-hidden>\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z\" />\n            </svg>\n            <span>\n              {new Date(item.scheduledStart).toLocaleDateString(undefined, { month: \"short\", day: \"numeric\" })} at{\" \"}\n              {new Date(item.scheduledStart).toLocaleTimeString([], { hour: \"2-digit\", minute: \"2-digit\" })}\n            </span>\n            {item.serviceStatus && (\n              <span data-status={item.serviceStatus} className=\"ml-auto px-1.5 py-0.5 rounded-full bg-muted text-[10px] uppercase tracking-wider\">\n                {item.serviceStatus}\n              </span>\n            )}\n          </div>\n        )}\n\n        {/* Digital: instant-delivery badge */}\n        {(item.lineType === \"digital\" || item.product.type === \"digital\") && (\n          <div data-cimplify-cart-digital-info className={cn(\"mt-1.5 flex items-center gap-1 text-xs text-muted-foreground\", classNames?.digitalInfo)}>\n            <svg className=\"w-3.5 h-3.5 shrink-0\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" viewBox=\"0 0 24 24\" aria-hidden>\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M13 10V3L4 14h7v7l9-11h-7z\" />\n            </svg>\n            <span>Instant digital delivery</span>\n          </div>\n        )}\n\n        {/* Bundle / composite component breakdown */}\n        {(item.bundleResolved || item.compositeResolved) && (\n          <ul\n            data-cimplify-cart-composite-breakdown={item.compositeResolved ? \"\" : undefined}\n            data-cimplify-cart-bundle-breakdown={item.bundleResolved ? \"\" : undefined}\n            className={cn(\"mt-1.5 pl-3 border-l border-border space-y-0.5 text-xs text-muted-foreground\", item.compositeResolved ? classNames?.compositeBreakdown : classNames?.bundleBreakdown)}\n          >\n            {((item.bundleResolved?.selections ?? item.compositeResolved?.selections ?? []) as Array<{\n              component_id?: string;\n              product_name?: string;\n              component_name?: string;\n              quantity: number;\n              product_type?: string;\n            }>).map((sel) => {\n              const name = sel.product_name ?? sel.component_name ?? \"\";\n              const compId = sel.component_id ?? `${name}-${sel.quantity}`;\n              return (\n                <li key={compId} data-product-type={sel.product_type} className=\"flex items-baseline gap-1.5 m-0\">\n                  <span className=\"font-medium text-foreground/80\">{sel.quantity}\\u00D7</span>\n                  <span className=\"truncate\">{name}</span>\n                </li>\n              );\n            })}\n          </ul>\n        )}\n\n        {/* Bottom row: line price + qty stepper */}\n        <div className=\"mt-3 flex items-center justify-between gap-3\">\n          <Price\n            amount={lineTotal}\n            className={cn(\"text-sm font-semibold tabular-nums\", classNames?.itemPrice)}\n          />\n          <div data-cimplify-cart-item-controls className={classNames?.quantity}>\n            <QuantitySelector\n              value={item.quantity}\n              onChange={(qty) => onQuantityChange(item.id, qty)}\n              min={0}\n            />\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n\n/**\n * CartSummary — renders cart line items + totals.\n *\n * NOT a drawer or modal — just the cart content. Templates wrap this in\n * their own drawer/modal shell with animations.\n */\nexport function CartSummary({\n  cart: serverCart,\n  onCheckout,\n  onItemRemove,\n  onQuantityChange,\n  emptyMessage = \"Your cart is empty\",\n  showTotals = true,\n  showCheckoutButton,\n  className,\n  classNames,\n}: CartSummaryProps): React.ReactElement {\n  const {\n    items,\n    itemCount,\n    subtotal,\n    tax,\n    total,\n    isEmpty,\n    isOptimistic,\n    pendingOpCount,\n    removeItem,\n    updateQuantity,\n  } = useCart();\n\n  const deliveryFee = serverCart?.delivery_fee;\n  const serviceCharge = serverCart?.service_charge;\n  const totalDiscounts = serverCart?.total_discounts;\n\n  const handleRemove = (itemId: string) => {\n    if (onItemRemove) {\n      onItemRemove(itemId);\n    } else {\n      void removeItem(itemId);\n    }\n  };\n\n  const handleQuantityChange = (itemId: string, qty: number) => {\n    if (onQuantityChange) {\n      onQuantityChange(itemId, qty);\n    } else {\n      void updateQuantity(itemId, qty);\n    }\n  };\n\n  return (\n    <div\n      data-cimplify-cart-summary\n      data-optimistic={isOptimistic ? \"true\" : undefined}\n      data-pending-ops={pendingOpCount > 0 ? pendingOpCount : undefined}\n      className={cn(className, classNames?.root)}\n    >\n      {isEmpty ? (\n        <div data-cimplify-cart-empty className={classNames?.empty}>\n          <p>{emptyMessage}</p>\n        </div>\n      ) : (\n        <>\n          {/* Line items */}\n          <div data-cimplify-cart-items>\n            {items.map((item) => (\n              <CartLineItemRow\n                key={item.id}\n                item={item}\n                onRemove={handleRemove}\n                onQuantityChange={handleQuantityChange}\n                classNames={classNames}\n              />\n            ))}\n          </div>\n\n          {/* Totals */}\n          {showTotals && (\n            <div\n              data-cimplify-cart-totals\n              className={cn(\"mt-6 pt-4 border-t border-border space-y-2 text-sm\", classNames?.totals)}\n            >\n              <div data-cimplify-cart-subtotal className={cn(\"flex items-baseline justify-between\", classNames?.subtotal)}>\n                <span className=\"text-muted-foreground\">\n                  Subtotal ({itemCount} {itemCount === 1 ? \"item\" : \"items\"})\n                </span>\n                <Price amount={subtotal} className=\"tabular-nums\" />\n              </div>\n\n              {totalDiscounts != null && parsePrice(totalDiscounts) > 0 && (\n                <div data-cimplify-cart-discount className={cn(\"flex items-baseline justify-between\", classNames?.discount)}>\n                  <span className=\"text-muted-foreground\">Discount</span>\n                  <Price amount={totalDiscounts} prefix=\"-\" className=\"tabular-nums text-primary\" />\n                </div>\n              )}\n\n              {deliveryFee != null && (\n                <div data-cimplify-cart-delivery-fee className={cn(\"flex items-baseline justify-between\", classNames?.deliveryFee)}>\n                  <span className=\"text-muted-foreground\">Delivery</span>\n                  {parsePrice(deliveryFee) > 0 ? (\n                    <Price amount={deliveryFee} className=\"tabular-nums\" />\n                  ) : (\n                    <span className=\"font-medium text-primary\">Free</span>\n                  )}\n                </div>\n              )}\n\n              {serviceCharge != null && parsePrice(serviceCharge) > 0 && (\n                <div data-cimplify-cart-service-charge className={cn(\"flex items-baseline justify-between\", classNames?.serviceCharge)}>\n                  <span className=\"text-muted-foreground\">Service charge</span>\n                  <Price amount={serviceCharge} className=\"tabular-nums\" />\n                </div>\n              )}\n\n              <div data-cimplify-cart-tax className={cn(\"flex items-baseline justify-between\", classNames?.tax)}>\n                <span className=\"text-muted-foreground\">Tax</span>\n                <Price amount={tax} className=\"tabular-nums\" />\n              </div>\n\n              <div data-cimplify-cart-total className={cn(\"flex items-baseline justify-between pt-3 mt-1 border-t border-border\", classNames?.total)}>\n                <span className=\"font-semibold\">Total</span>\n                <Price amount={total} className=\"text-base font-bold tabular-nums\" />\n              </div>\n            </div>\n          )}\n\n          {(showCheckoutButton ?? Boolean(onCheckout)) && onCheckout && (\n            <button\n              type=\"button\"\n              onClick={onCheckout}\n              data-cimplify-cart-checkout\n              className={cn(\n                \"mt-4 w-full h-12 rounded-full bg-foreground text-background font-semibold text-sm hover:bg-foreground/90 active:scale-[0.99] transition-all\",\n                classNames?.checkout,\n              )}\n            >\n              Proceed to Checkout\n            </button>\n          )}\n        </>\n      )}\n    </div>\n  );\n}\n"
     }
   ]
 }