@cimplify/sdk 0.44.8 → 0.44.11

package/dist/react.mjs

@@ -6443,113 +6443,161 @@ function CartLineItemRow({
   const hasComposite = item.compositeSelections && item.compositeSelections.length > 0;
   const hasBundle = item.bundleSelections && item.bundleSelections.length > 0;
   const isOptimistic = item.isOptimistic === true;
+  const lineTotal = parsePrice(unitPrice) * item.quantity;
+  const imageUrl = item.product.image_url;
+  const variantLabel = item.variant ? getVariantDisplayName(item.variant, item.product.name) : null;
   return /* @__PURE__ */ jsxs(
     "div",
     {
       "data-cimplify-cart-item": true,
       "data-optimistic": isOptimistic ? "true" : void 0,
       className: cn(
-        "flex items-start justify-between gap-4 py-4 border-b border-border last:border-b-0",
+        "group relative flex gap-3 py-4 border-b border-border last:border-b-0 transition-opacity",
+        isOptimistic && "opacity-60",
         classNames?.item
       ),
       children: [
-        /* @__PURE__ */ jsxs("div", { "data-cimplify-cart-item-info": true, className: "flex-1 min-w-0 space-y-1", children: [
-          /* @__PURE__ */ jsx(
-            "span",
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-cimplify-cart-item-image": true,
+            className: "relative w-20 h-20 shrink-0 rounded-md overflow-hidden bg-muted",
+            children: imageUrl ? /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: imageUrl,
+                alt: "",
+                className: "w-full h-full object-cover",
+                loading: "lazy"
+              }
+            ) : /* @__PURE__ */ jsx("div", { className: "w-full h-full grid place-items-center text-muted-foreground/40", children: /* @__PURE__ */ jsx("svg", { className: "w-6 h-6", fill: "none", stroke: "currentColor", strokeWidth: "1.5", viewBox: "0 0 24 24", "aria-hidden": true, children: /* @__PURE__ */ jsx("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" }) }) })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { "data-cimplify-cart-item-info": true, className: "flex-1 min-w-0 flex flex-col", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+            /* @__PURE__ */ jsx(
+              "h3",
+              {
+                "data-cimplify-cart-item-name": true,
+                className: cn("text-sm font-medium leading-tight m-0 truncate", classNames?.itemName),
+                children: item.product.name
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => onRemove(item.id),
+                "data-cimplify-cart-item-remove": true,
+                className: cn(
+                  "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",
+                  classNames?.removeButton
+                ),
+                "aria-label": `Remove ${item.product.name}`,
+                children: /* @__PURE__ */ jsx("svg", { className: "w-3.5 h-3.5", fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) })
+              }
+            )
+          ] }),
+          (variantLabel || item.addOnOptions && item.addOnOptions.length > 0 || hasComposite || hasBundle) && /* @__PURE__ */ jsxs("div", { "data-cimplify-cart-item-pills": true, className: "flex flex-wrap gap-1.5 mt-1.5", children: [
+            variantLabel && /* @__PURE__ */ jsx(
+              "span",
+              {
+                "data-cimplify-cart-item-variant": true,
+                className: "inline-flex items-center px-2 py-0.5 rounded-full bg-muted text-[11px] font-medium text-foreground",
+                children: variantLabel
+              }
+            ),
+            item.addOnOptions?.map((opt) => /* @__PURE__ */ jsxs(
+              "span",
+              {
+                "data-cimplify-cart-item-addon": true,
+                className: "inline-flex items-center px-2 py-0.5 rounded-full bg-muted text-[11px] font-medium text-muted-foreground",
+                children: [
+                  "+ ",
+                  opt.name
+                ]
+              },
+              opt.id
+            )),
+            (hasComposite || hasBundle) && /* @__PURE__ */ jsx(
+              "span",
+              {
+                "data-cimplify-cart-item-badge": true,
+                className: "inline-flex items-center px-2 py-0.5 rounded-full bg-primary/10 text-[11px] font-semibold uppercase tracking-wider text-primary",
+                children: hasComposite ? "Custom" : "Bundle"
+              }
+            )
+          ] }),
+          item.specialInstructions && /* @__PURE__ */ jsxs(
+            "p",
             {
-              "data-cimplify-cart-item-name": true,
-              className: cn("block font-medium", classNames?.itemName),
-              children: item.product.name
+              "data-cimplify-cart-item-instructions": true,
+              className: "mt-1.5 text-xs italic text-muted-foreground line-clamp-2",
+              children: [
+                "\\u201C",
+                item.specialInstructions,
+                "\\u201D"
+              ]
             }
           ),
-          item.variant && /* @__PURE__ */ jsx("span", { "data-cimplify-cart-item-variant": true, className: "block text-xs text-muted-foreground", children: getVariantDisplayName(item.variant, item.product.name) }),
-          item.addOnOptions && item.addOnOptions.length > 0 && /* @__PURE__ */ jsxs("span", { "data-cimplify-cart-item-addons": true, className: "block text-xs text-muted-foreground", children: [
-            "+ ",
-            item.addOnOptions.map((opt) => opt.name).join(", ")
-          ] }),
-          (hasComposite || hasBundle) && /* @__PURE__ */ jsx("span", { "data-cimplify-cart-item-badge": true, children: hasComposite ? "Custom" : "Bundle" }),
-          item.specialInstructions && /* @__PURE__ */ jsx("span", { "data-cimplify-cart-item-instructions": true, className: "text-xs text-muted-foreground", children: item.specialInstructions }),
-          item.customerInputs && item.customerInputs.length > 0 && /* @__PURE__ */ jsx("div", { "data-cimplify-cart-customer-inputs": true, className: classNames?.customerInputs, children: item.customerInputs.map((input) => /* @__PURE__ */ jsxs("div", { "data-cimplify-cart-input": true, children: [
-            /* @__PURE__ */ jsx("span", { "data-cimplify-cart-input-label": true, children: input.field_name }),
-            /* @__PURE__ */ jsx("span", { "data-cimplify-cart-input-value": true, children: input.field_type === INPUT_FIELD_TYPE.File || input.field_type === INPUT_FIELD_TYPE.Image ? String(input.value).split("/").pop() || "Uploaded file" : String(input.value) })
+          item.customerInputs && item.customerInputs.length > 0 && /* @__PURE__ */ jsx("dl", { "data-cimplify-cart-customer-inputs": true, className: cn("mt-1.5 text-xs space-y-0.5", classNames?.customerInputs), children: item.customerInputs.map((input) => /* @__PURE__ */ jsxs("div", { "data-cimplify-cart-input": true, className: "flex gap-1.5", children: [
+            /* @__PURE__ */ jsxs("dt", { "data-cimplify-cart-input-label": true, className: "text-muted-foreground", children: [
+              input.field_name,
+              ":"
+            ] }),
+            /* @__PURE__ */ jsx("dd", { "data-cimplify-cart-input-value": true, className: "text-foreground m-0 truncate", children: input.field_type === INPUT_FIELD_TYPE.File || input.field_type === INPUT_FIELD_TYPE.Image ? String(input.value).split("/").pop() || "Uploaded file" : String(input.value) })
           ] }, input.field_id)) }),
-          (item.lineType === "service" || item.product.type === "service") && item.scheduledStart && /* @__PURE__ */ jsxs("div", { "data-cimplify-cart-service-info": true, className: classNames?.serviceInfo, children: [
+          (item.lineType === "service" || item.product.type === "service") && item.scheduledStart && /* @__PURE__ */ jsxs("div", { "data-cimplify-cart-service-info": true, className: cn("mt-1.5 flex items-center gap-1.5 text-xs text-muted-foreground", classNames?.serviceInfo), children: [
+            /* @__PURE__ */ jsx("svg", { className: "w-3.5 h-3.5 shrink-0", fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", "aria-hidden": true, children: /* @__PURE__ */ jsx("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" }) }),
             /* @__PURE__ */ jsxs("span", { children: [
-              "\u{1F4C5}",
+              new Date(item.scheduledStart).toLocaleDateString(void 0, { month: "short", day: "numeric" }),
+              " at",
               " ",
-              new Date(item.scheduledStart).toLocaleDateString(),
-              " at ",
               new Date(item.scheduledStart).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })
             ] }),
-            item.confirmationCode && /* @__PURE__ */ jsxs("span", { children: [
-              "Confirmation: ",
-              item.confirmationCode
-            ] }),
-            item.serviceStatus && /* @__PURE__ */ jsx("span", { "data-status": item.serviceStatus, children: item.serviceStatus })
+            item.serviceStatus && /* @__PURE__ */ jsx("span", { "data-status": item.serviceStatus, className: "ml-auto px-1.5 py-0.5 rounded-full bg-muted text-[10px] uppercase tracking-wider", children: item.serviceStatus })
           ] }),
-          (item.lineType === "digital" || item.product.type === "digital") && /* @__PURE__ */ jsx("div", { "data-cimplify-cart-digital-info": true, className: classNames?.digitalInfo, children: /* @__PURE__ */ jsxs("span", { children: [
-            "\u26A1",
-            " Instant digital delivery"
-          ] }) }),
-          item.bundleResolved && /* @__PURE__ */ jsx("div", { "data-cimplify-cart-bundle-breakdown": true, className: classNames?.bundleBreakdown, children: item.bundleResolved.selections.map((sel) => /* @__PURE__ */ jsxs("div", { "data-product-type": sel.product_type, children: [
-            /* @__PURE__ */ jsxs("span", { children: [
-              sel.quantity,
-              "\xD7 ",
-              sel.product_name
-            ] }),
-            sel.product_type === "service" && sel.scheduling?.scheduled_start && /* @__PURE__ */ jsxs("span", { children: [
-              " \u2014 ",
-              new Date(sel.scheduling.scheduled_start).toLocaleDateString()
-            ] }),
-            sel.product_type === "digital" && /* @__PURE__ */ jsx("span", { children: " \u2014 Digital" })
-          ] }, sel.component_id)) }),
-          item.compositeResolved && /* @__PURE__ */ jsx("div", { "data-cimplify-cart-composite-breakdown": true, className: classNames?.compositeBreakdown, children: item.compositeResolved.selections.map((sel) => /* @__PURE__ */ jsxs("div", { "data-product-type": sel.product_type, children: [
-            /* @__PURE__ */ jsxs("span", { children: [
-              sel.quantity,
-              "\xD7 ",
-              sel.component_name
-            ] }),
-            sel.product_type === "service" && sel.scheduling?.scheduled_start && /* @__PURE__ */ jsxs("span", { children: [
-              " \u2014 ",
-              new Date(sel.scheduling.scheduled_start).toLocaleDateString()
-            ] })
-          ] }, sel.component_id)) }),
-          /* @__PURE__ */ jsx(
-            Price,
+          (item.lineType === "digital" || item.product.type === "digital") && /* @__PURE__ */ jsxs("div", { "data-cimplify-cart-digital-info": true, className: cn("mt-1.5 flex items-center gap-1 text-xs text-muted-foreground", classNames?.digitalInfo), children: [
+            /* @__PURE__ */ jsx("svg", { className: "w-3.5 h-3.5 shrink-0", fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M13 10V3L4 14h7v7l9-11h-7z" }) }),
+            /* @__PURE__ */ jsx("span", { children: "Instant digital delivery" })
+          ] }),
+          (item.bundleResolved || item.compositeResolved) && /* @__PURE__ */ jsx(
+            "ul",
             {
-              amount: unitPrice,
-              className: cn("block pt-1 text-sm font-semibold", classNames?.itemPrice)
+              "data-cimplify-cart-composite-breakdown": item.compositeResolved ? "" : void 0,
+              "data-cimplify-cart-bundle-breakdown": item.bundleResolved ? "" : void 0,
+              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),
+              children: (item.bundleResolved?.selections ?? item.compositeResolved?.selections ?? []).map((sel) => {
+                const name = sel.product_name ?? sel.component_name ?? "";
+                const compId = sel.component_id ?? `${name}-${sel.quantity}`;
+                return /* @__PURE__ */ jsxs("li", { "data-product-type": sel.product_type, className: "flex items-baseline gap-1.5 m-0", children: [
+                  /* @__PURE__ */ jsxs("span", { className: "font-medium text-foreground/80", children: [
+                    sel.quantity,
+                    "\\u00D7"
+                  ] }),
+                  /* @__PURE__ */ jsx("span", { className: "truncate", children: name })
+                ] }, compId);
+              })
             }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            "data-cimplify-cart-item-controls": true,
-            className: cn("flex flex-col items-end gap-2 shrink-0", classNames?.quantity),
-            children: [
-              /* @__PURE__ */ jsx(
-                QuantitySelector,
-                {
-                  value: item.quantity,
-                  onChange: (qty) => onQuantityChange(item.id, qty),
-                  min: 0
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => onRemove(item.id),
-                  "data-cimplify-cart-item-remove": true,
-                  className: cn("text-xs text-muted-foreground hover:text-foreground hover:underline transition-colors", classNames?.removeButton),
-                  "aria-label": `Remove ${item.product.name}`,
-                  children: "Remove"
-                }
-              )
-            ]
-          }
-        )
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "mt-3 flex items-center justify-between gap-3", children: [
+            /* @__PURE__ */ jsx(
+              Price,
+              {
+                amount: lineTotal,
+                className: cn("text-sm font-semibold tabular-nums", classNames?.itemPrice)
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { "data-cimplify-cart-item-controls": true, className: classNames?.quantity, children: /* @__PURE__ */ jsx(
+              QuantitySelector,
+              {
+                value: item.quantity,
+                onChange: (qty) => onQuantityChange(item.id, qty),
+                min: 0
+              }
+            ) })
+          ] })
+        ] })
       ]
     }
   );
@@ -6560,6 +6608,8 @@ function CartSummary({
   onItemRemove,
   onQuantityChange,
   emptyMessage = "Your cart is empty",
+  showTotals = true,
+  showCheckoutButton,
   className,
   classNames
 }) {
@@ -6610,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"
           }
         )
@@ -10684,42 +10744,65 @@ function DefaultCartLayout({
   className
 }) {
   if (cart.isEmpty) {
-    return /* @__PURE__ */ jsxs("div", { "data-cimplify-cart-layout": "default", className: cn("text-center py-20", className), children: [
-      /* @__PURE__ */ jsx("svg", { className: "w-16 h-16 mx-auto text-muted-foreground/30", fill: "none", stroke: "currentColor", strokeWidth: "1", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" }) }),
-      /* @__PURE__ */ jsx("p", { className: "text-lg font-medium mt-4", children: "Your cart is empty" }),
-      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mt-1", children: "Add some items to get started" }),
-      onContinueShopping && /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsxs("div", { "data-cimplify-cart-layout": "default", className: cn("max-w-md mx-auto text-center py-24", className), children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative w-24 h-24 mx-auto mb-6", children: [
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 rounded-full bg-muted" }),
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: "relative w-12 h-12 m-auto top-1/2 -translate-y-1/2 text-muted-foreground/60",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            viewBox: "0 0 24 24",
+            "aria-hidden": true,
+            children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M16 11V7a4 4 0 00-8 0v4M5 9h14l-1 12H6L5 9z" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold tracking-tight m-0", children: "Your cart is empty" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mt-2", children: "Browse the shop and add something you'll love." }),
+      onContinueShopping && /* @__PURE__ */ jsxs(
         "button",
         {
+          type: "button",
           onClick: onContinueShopping,
-          className: "text-sm font-medium text-primary mt-4 hover:underline",
-          children: "Continue shopping"
+          className: "mt-6 inline-flex items-center gap-1.5 h-11 px-6 rounded-full bg-foreground text-background text-sm font-semibold hover:bg-foreground/90 active:scale-[0.99] transition-all",
+          children: [
+            "Shop now",
+            /* @__PURE__ */ jsx("svg", { className: "w-3.5 h-3.5", fill: "none", stroke: "currentColor", strokeWidth: "2.5", viewBox: "0 0 24 24", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M14 5l7 7m0 0l-7 7m7-7H3" }) })
+          ]
         }
       )
     ] });
   }
-  return /* @__PURE__ */ jsxs("div", { "data-cimplify-cart-layout": "default", className: cn("space-y-6", className), children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ jsxs("h1", { className: "text-2xl font-bold tracking-tight", children: [
-        "Your Cart (",
+  return /* @__PURE__ */ jsxs("div", { "data-cimplify-cart-layout": "default", className: cn("space-y-8", className), children: [
+    /* @__PURE__ */ jsxs("header", { className: "flex items-baseline justify-between gap-4", children: [
+      /* @__PURE__ */ jsx("h1", { className: "text-3xl sm:text-4xl font-bold tracking-tight m-0", children: "Cart" }),
+      /* @__PURE__ */ jsxs("span", { className: "text-sm text-muted-foreground tabular-nums", children: [
         cart.itemCount,
         " ",
-        cart.itemCount === 1 ? "item" : "items",
-        ")"
-      ] }),
-      onContinueShopping && /* @__PURE__ */ jsx(
-        "button",
-        {
-          onClick: onContinueShopping,
-          className: "text-sm text-muted-foreground hover:text-foreground transition-colors",
-          children: "Continue shopping"
-        }
-      )
+        cart.itemCount === 1 ? "item" : "items"
+      ] })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "grid lg:grid-cols-[1fr_380px] gap-8", children: [
-      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(CartSummary, {}) }),
-      /* @__PURE__ */ jsx("div", { className: "lg:sticky lg:top-6 h-fit space-y-4", children: /* @__PURE__ */ jsxs("div", { className: "border border-border rounded-[14px] p-6 space-y-4", children: [
-        /* @__PURE__ */ jsx("h2", { className: "font-semibold", children: "Order Summary" }),
+    /* @__PURE__ */ jsxs("div", { className: "grid lg:grid-cols-[1fr_360px] gap-10", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(CartSummary, { showTotals: false, showCheckoutButton: false }),
+        onContinueShopping && /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: onContinueShopping,
+            className: "mt-6 inline-flex items-center gap-1.5 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors",
+            children: [
+              /* @__PURE__ */ jsx("svg", { className: "w-3.5 h-3.5", fill: "none", stroke: "currentColor", strokeWidth: "2.5", viewBox: "0 0 24 24", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M10 19l-7-7m0 0l7-7m-7 7h18" }) }),
+              "Continue shopping"
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("aside", { className: "lg:sticky lg:top-6 h-fit", children: /* @__PURE__ */ jsxs("div", { className: "rounded-2xl bg-muted/40 p-6 space-y-5", children: [
+        /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold uppercase tracking-[0.16em] text-muted-foreground m-0", children: "Summary" }),
         showDiscount && /* @__PURE__ */ jsx(
           DiscountInput,
           {
@@ -10728,28 +10811,34 @@ function DefaultCartLayout({
             onClear: onDiscountClear
           }
         ),
-        /* @__PURE__ */ jsxs("div", { className: "space-y-2 text-sm", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Subtotal" }),
-            /* @__PURE__ */ jsx(Price, { amount: cart.subtotal })
+        /* @__PURE__ */ jsxs("dl", { className: "space-y-2 text-sm", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between", children: [
+            /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: "Subtotal" }),
+            /* @__PURE__ */ jsx("dd", { className: "m-0 tabular-nums", children: /* @__PURE__ */ jsx(Price, { amount: cart.subtotal }) })
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Tax" }),
-            /* @__PURE__ */ jsx(Price, { amount: cart.tax })
+          /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between", children: [
+            /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: "Tax" }),
+            /* @__PURE__ */ jsx("dd", { className: "m-0 tabular-nums", children: /* @__PURE__ */ jsx(Price, { amount: cart.tax }) })
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: "flex justify-between font-semibold text-base pt-2 border-t border-border", children: [
-            /* @__PURE__ */ jsx("span", { children: "Total" }),
-            /* @__PURE__ */ jsx(Price, { amount: cart.total })
+          /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between pt-3 mt-1 border-t border-border", children: [
+            /* @__PURE__ */ jsx("dt", { className: "font-semibold", children: "Total" }),
+            /* @__PURE__ */ jsx("dd", { className: "m-0 text-lg font-bold tabular-nums", children: /* @__PURE__ */ jsx(Price, { amount: cart.total }) })
           ] })
         ] }),
+        /* @__PURE__ */ jsx("p", { className: "text-[11px] text-muted-foreground", children: "Shipping calculated at checkout." }),
         /* @__PURE__ */ jsx(
           "button",
           {
+            type: "button",
             onClick: onCheckout,
-            className: "w-full h-12 bg-foreground text-background font-medium text-sm rounded-lg hover:bg-foreground/90 transition-colors",
+            className: "w-full h-12 rounded-full bg-foreground text-background font-semibold text-sm hover:bg-foreground/90 active:scale-[0.99] transition-all",
             children: checkoutLabel
           }
-        )
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-1.5 text-[10px] text-muted-foreground/70 uppercase tracking-wider", children: [
+          /* @__PURE__ */ jsx("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" }) }),
+          /* @__PURE__ */ jsx("span", { children: "Secure checkout" })
+        ] })
       ] }) })
     ] })
   ] });
@@ -10846,28 +10935,52 @@ function useCartDrawer() {
 function CartDrawerProvider({ children, openOnAdd = true }) {
   const [isOpen, setIsOpen] = useState(false);
   const cart = useCart();
-  const [lastPending, setLastPending] = useState(0);
+  const lastPendingRef = useRef(0);
   const open = useCallback(() => setIsOpen(true), []);
   const close = useCallback(() => setIsOpen(false), []);
   const toggle = useCallback(() => setIsOpen((v) => !v), []);
   useEffect(() => {
     if (!openOnAdd) return;
-    if (cart.pendingOpCount > lastPending && cart.pendingOpCount > 0) {
+    if (cart.pendingOpCount > lastPendingRef.current && cart.pendingOpCount > 0) {
       setIsOpen(true);
     }
-    setLastPending(cart.pendingOpCount);
-  }, [cart.pendingOpCount, lastPending, openOnAdd]);
+    lastPendingRef.current = cart.pendingOpCount;
+  }, [cart.pendingOpCount, openOnAdd]);
   const value = useMemo(() => ({ isOpen, open, close, toggle }), [isOpen, open, close, toggle]);
   return /* @__PURE__ */ jsx(CartDrawerContext.Provider, { value, children });
 }
+function useAnimatedNumber(target, durationMs = 250) {
+  const [value, setValue] = useState(target);
+  const fromRef = useRef(target);
+  const startRef = useRef(null);
+  useEffect(() => {
+    fromRef.current = value;
+    startRef.current = null;
+    let raf = 0;
+    const tick = (t) => {
+      if (startRef.current == null) startRef.current = t;
+      const p = Math.min(1, (t - startRef.current) / durationMs);
+      const eased = 1 - Math.pow(1 - p, 3);
+      setValue(fromRef.current + (target - fromRef.current) * eased);
+      if (p < 1) raf = requestAnimationFrame(tick);
+    };
+    raf = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(raf);
+  }, [target, durationMs]);
+  return value;
+}
 function CartDrawer({
   onCheckout,
   onContinueShopping,
-  title = "Your cart",
+  onShop,
+  title = "Cart",
+  freeShippingThreshold = 0,
   className
 }) {
   const { isOpen, close } = useCartDrawer();
   const cart = useCart();
+  const subtotalNum = parsePrice(cart.subtotal);
+  const animatedSubtotal = useAnimatedNumber(subtotalNum);
   useEffect(() => {
     if (!isOpen) return;
     const original = document.body.style.overflow;
@@ -10886,11 +10999,17 @@ function CartDrawer({
     onCheckout?.();
   };
   const handleContinue = () => {
-    if (onContinueShopping) {
-      onContinueShopping();
-    }
+    onContinueShopping?.();
+    close();
+  };
+  const handleShop = () => {
+    onShop?.();
     close();
   };
+  const showShippingBar = freeShippingThreshold > 0 && !cart.isEmpty;
+  const remainingForShipping = Math.max(0, freeShippingThreshold - subtotalNum);
+  const shippingProgress = freeShippingThreshold > 0 ? Math.min(100, subtotalNum / freeShippingThreshold * 100) : 0;
+  const shippingUnlocked = subtotalNum >= freeShippingThreshold && freeShippingThreshold > 0;
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -10907,7 +11026,7 @@ function CartDrawer({
           {
             onClick: close,
             className: cn(
-              "absolute inset-0 bg-foreground/40 backdrop-blur-sm transition-opacity duration-200",
+              "absolute inset-0 bg-foreground/40 backdrop-blur-sm transition-opacity duration-300",
               isOpen ? "opacity-100" : "opacity-0"
             )
           }
@@ -10919,20 +11038,21 @@ function CartDrawer({
             "aria-modal": "true",
             "aria-label": title,
             className: cn(
-              "absolute top-0 right-0 h-full w-full sm:max-w-md bg-background shadow-2xl flex flex-col transition-transform duration-300 ease-out",
+              "absolute top-0 right-0 h-full w-full sm:max-w-[480px] bg-background shadow-2xl flex flex-col",
+              "transition-transform duration-300",
               isOpen ? "translate-x-0" : "translate-x-full",
+              // ease-out cubic-bezier for a "pull" feel
+              "[transition-timing-function:cubic-bezier(0.16,1,0.3,1)]",
               className
             ),
             children: [
-              /* @__PURE__ */ jsxs("header", { className: "flex items-center justify-between gap-4 px-6 py-4 border-b border-border shrink-0", children: [
-                /* @__PURE__ */ jsxs("h2", { className: "text-base font-semibold tracking-tight m-0", children: [
-                  title,
-                  cart.itemCount > 0 && /* @__PURE__ */ jsxs("span", { className: "ml-2 text-muted-foreground font-normal", children: [
-                    "(",
+              /* @__PURE__ */ jsxs("header", { className: "relative flex items-center justify-between gap-4 px-6 py-5 shrink-0", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2", children: [
+                  /* @__PURE__ */ jsx("h2", { className: "text-xl font-bold tracking-tight m-0", children: title }),
+                  cart.itemCount > 0 && /* @__PURE__ */ jsxs("span", { className: "text-sm text-muted-foreground tabular-nums", children: [
                     cart.itemCount,
                     " ",
-                    cart.itemCount === 1 ? "item" : "items",
-                    ")"
+                    cart.itemCount === 1 ? "item" : "items"
                   ] })
                 ] }),
                 /* @__PURE__ */ jsx(
@@ -10941,52 +11061,55 @@ function CartDrawer({
                     type: "button",
                     onClick: close,
                     "aria-label": "Close cart",
-                    className: "grid place-items-center w-8 h-8 rounded-full hover:bg-muted text-muted-foreground hover:text-foreground transition-colors",
-                    children: "\u2715"
+                    className: "grid place-items-center w-9 h-9 rounded-full hover:bg-muted text-muted-foreground hover:text-foreground transition-colors",
+                    children: /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) })
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto px-6 py-2", children: cart.isEmpty ? /* @__PURE__ */ jsx("div", { className: "h-full grid place-items-center text-center py-20", children: /* @__PURE__ */ jsxs("div", { children: [
+              showShippingBar && /* @__PURE__ */ jsxs("div", { "data-cimplify-cart-shipping-bar": true, className: "px-6 pb-4 shrink-0", children: [
+                /* @__PURE__ */ jsx("div", { className: "flex items-baseline justify-between gap-2 mb-1.5 text-xs", children: shippingUnlocked ? /* @__PURE__ */ jsx("span", { className: "font-medium text-primary", children: "\u2713 Free shipping unlocked" }) : /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+                  /* @__PURE__ */ jsx(Price, { amount: remainingForShipping, className: "font-semibold text-foreground" }),
+                  " away from free shipping"
+                ] }) }),
+                /* @__PURE__ */ jsx("div", { className: "h-1 rounded-full bg-muted overflow-hidden", children: /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "h-full bg-primary transition-[width] duration-500 ease-out",
+                    style: { width: `${shippingProgress}%` }
+                  }
+                ) })
+              ] }),
+              /* @__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" }),
+                  /* @__PURE__ */ jsx(Price, { amount: animatedSubtotal, className: "text-lg font-bold tabular-nums" })
+                ] }),
+                /* @__PURE__ */ jsx("p", { className: "text-[11px] text-muted-foreground", children: "Tax and shipping calculated at checkout." }),
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: handleCheckout,
+                    className: "w-full h-12 rounded-full bg-foreground text-background font-semibold text-sm hover:bg-foreground/90 active:scale-[0.99] transition-all",
+                    children: [
+                      "Checkout \u2014 ",
+                      /* @__PURE__ */ jsx(Price, { amount: cart.subtotal, className: "tabular-nums" })
+                    ]
+                  }
+                ),
                 /* @__PURE__ */ jsx(
-                  "svg",
+                  "button",
                   {
-                    className: "w-12 h-12 mx-auto text-muted-foreground/30",
-                    fill: "none",
-                    stroke: "currentColor",
-                    strokeWidth: "1",
-                    viewBox: "0 0 24 24",
-                    "aria-hidden": true,
-                    children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" })
+                    type: "button",
+                    onClick: handleContinue,
+                    className: "w-full text-xs font-medium text-muted-foreground hover:text-foreground transition-colors",
+                    children: "Continue shopping"
                   }
                 ),
-                /* @__PURE__ */ jsx("p", { className: "text-sm font-medium mt-3 mb-1", children: "Your cart is empty" }),
-                /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Add some items to get started" })
-              ] }) }) : /* @__PURE__ */ jsx(CartSummary, {}) }),
-              !cart.isEmpty && /* @__PURE__ */ jsxs("footer", { className: "border-t border-border px-6 py-4 space-y-3 shrink-0", children: [
-                /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between text-sm", children: [
-                  /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Subtotal" }),
-                  /* @__PURE__ */ jsx(Price, { amount: cart.subtotal, className: "font-semibold text-base" })
-                ] }),
-                /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Tax and delivery calculated at checkout." }),
-                /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 pt-1", children: [
-                  /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: handleCheckout,
-                      className: "w-full h-11 rounded-md bg-foreground text-background font-medium text-sm hover:bg-foreground/90 transition-colors",
-                      children: "Checkout"
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: handleContinue,
-                      className: "w-full h-10 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors",
-                      children: "Continue shopping"
-                    }
-                  )
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-1.5 text-[10px] text-muted-foreground/70 uppercase tracking-wider pt-1", children: [
+                  /* @__PURE__ */ jsx("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" }) }),
+                  /* @__PURE__ */ jsx("span", { children: "Secure checkout" })
                 ] })
               ] })
             ]
@@ -10996,6 +11119,41 @@ function CartDrawer({
     }
   );
 }
+function EmptyState({ onShop }) {
+  return /* @__PURE__ */ jsx("div", { "data-cimplify-cart-empty": true, className: "h-full grid place-items-center text-center py-16", children: /* @__PURE__ */ jsxs("div", { className: "space-y-5 max-w-[260px]", children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative w-20 h-20 mx-auto", children: [
+      /* @__PURE__ */ jsx("div", { className: "absolute inset-0 rounded-full bg-muted" }),
+      /* @__PURE__ */ jsx(
+        "svg",
+        {
+          className: "relative w-10 h-10 m-auto top-1/2 -translate-y-1/2 text-muted-foreground/60",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          viewBox: "0 0 24 24",
+          "aria-hidden": true,
+          children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M16 11V7a4 4 0 00-8 0v4M5 9h14l-1 12H6L5 9z" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("p", { className: "text-base font-semibold m-0", children: "Your cart is empty" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mt-1", children: "Discover something you'll love." })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: onShop,
+        className: "inline-flex items-center gap-1.5 h-11 px-6 rounded-full bg-foreground text-background text-sm font-semibold hover:bg-foreground/90 active:scale-[0.99] transition-all",
+        children: [
+          "Shop now",
+          /* @__PURE__ */ jsx("svg", { className: "w-3.5 h-3.5", fill: "none", stroke: "currentColor", strokeWidth: "2.5", viewBox: "0 0 24 24", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M14 5l7 7m0 0l-7 7m7-7H3" }) })
+        ]
+      }
+    )
+  ] }) });
+}
 function CheckoutPage({
   title = "Checkout",
   onComplete,