@cimplify/sdk 0.13.1 → 0.14.1

package/dist/react.d.mts

@@ -877,8 +877,8 @@ interface ProductCardProps {
     displayMode?: "card" | "page";
     /** Link href for page mode. Default: `/menu/${product.slug}` */
     href?: string;
-    /** Custom modal content renderer. Receives the fully-loaded product. */
-    renderModal?: (product: ProductWithDetails) => React.ReactNode;
+    /** Custom modal content renderer. Receives the fully-loaded product and a close callback. */
+    renderModal?: (product: ProductWithDetails, onClose: () => void) => React.ReactNode;
     /** Custom image renderer (e.g. Next.js Image). */
     renderImage?: (props: {
         src: string;

package/dist/react.d.ts

@@ -877,8 +877,8 @@ interface ProductCardProps {
     displayMode?: "card" | "page";
     /** Link href for page mode. Default: `/menu/${product.slug}` */
     href?: string;
-    /** Custom modal content renderer. Receives the fully-loaded product. */
-    renderModal?: (product: ProductWithDetails) => React.ReactNode;
+    /** Custom modal content renderer. Receives the fully-loaded product and a close callback. */
+    renderModal?: (product: ProductWithDetails, onClose: () => void) => React.ReactNode;
     /** Custom image renderer (e.g. Next.js Image). */
     renderImage?: (props: {
         src: string;

package/dist/react.js

@@ -7978,7 +7978,7 @@ function VariantSelector({
   if (!variants || variants.length <= 1) {
     return null;
   }
-  const basePriceNum = basePrice != null ? parsePrice(basePrice) : 0;
+  basePrice != null ? parsePrice(basePrice) : 0;
   if (variantAxes && variantAxes.length > 0) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-variant-selector": true, className: cn("space-y-5", className, classNames?.root), children: variantAxes.map((axis) => {
       const labelId = `${idPrefix}-axis-${axis.id}`;
@@ -8029,14 +8029,16 @@ function VariantSelector({
     }) });
   }
   const listLabelId = `${idPrefix}-variant-list`;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-variant-selector": true, className: cn("space-y-5", className, classNames?.root), children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "label",
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-variant-selector": true, className: cn(className, classNames?.root), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
       {
-        id: listLabelId,
-        "data-cimplify-variant-list-label": true,
-        className: cn("block text-xs font-medium uppercase tracking-wider text-muted-foreground mb-3", classNames?.listLabel),
-        children: "Options"
+        "data-cimplify-variant-list-header": true,
+        className: cn("flex items-center justify-between py-3", classNames?.listLabel),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { id: listLabelId, className: "text-base font-bold", children: "Options" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-semibold text-destructive bg-destructive/10 px-2.5 py-1 rounded", children: "Required" })
+        ]
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -8049,11 +8051,10 @@ function VariantSelector({
           onVariantChange(variant?.id, variant);
         },
         "data-cimplify-variant-list": true,
-        className: cn("space-y-2", classNames?.list),
+        className: cn("divide-y divide-border", classNames?.list),
         children: variants.map((variant) => {
           const isSelected = selectedVariantId === variant.id;
           const adjustment = parsePrice(variant.price_adjustment);
-          const effectivePrice = basePriceNum + adjustment;
           return /* @__PURE__ */ jsxRuntime.jsxs(
             radio.Radio.Root,
             {
@@ -8061,35 +8062,32 @@ function VariantSelector({
               "data-cimplify-variant-option": true,
               "data-selected": isSelected || void 0,
               className: cn(
-                "w-full flex items-center justify-between px-4 py-3 border transition-colors border-border hover:border-primary/50",
-                isSelected && "bg-primary/5 border-primary",
+                "w-full flex items-center gap-3 py-4 transition-colors cursor-pointer",
                 isSelected ? classNames?.optionSelected : classNames?.option
               ),
               children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    "data-cimplify-variant-radio": true,
+                    className: cn(
+                      "w-5 h-5 rounded-full border-2 flex items-center justify-center shrink-0 transition-colors",
+                      isSelected ? "border-primary" : "border-muted-foreground/30"
+                    ),
+                    children: isSelected && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-2.5 h-2.5 rounded-full bg-primary" })
+                  }
+                ),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "span",
                   {
                     "data-cimplify-variant-name": true,
-                    className: cn("font-medium", isSelected && "text-primary", classNames?.name),
+                    className: cn("flex-1 min-w-0 text-sm", classNames?.name),
                     children: getVariantDisplayName(variant, productName)
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-cimplify-variant-pricing": true, className: cn("text-sm flex items-center gap-2", classNames?.pricing), children: [
-                  adjustment !== 0 && /* @__PURE__ */ jsxRuntime.jsxs(
-                    "span",
-                    {
-                      "data-cimplify-variant-adjustment": true,
-                      className: cn(
-                        adjustment > 0 ? "text-muted-foreground" : "text-green-600",
-                        classNames?.adjustment
-                      ),
-                      children: [
-                        adjustment > 0 ? "+" : "",
-                        /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: variant.price_adjustment })
-                      ]
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: effectivePrice, className: "text-muted-foreground" })
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-cimplify-variant-pricing": true, className: cn("text-sm text-muted-foreground", classNames?.pricing), children: [
+                  adjustment > 0 ? "+" : adjustment < 0 ? "" : "+",
+                  /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: variant.price_adjustment })
                 ] })
               ]
             },
@@ -8148,54 +8146,46 @@ function AddOnSelector({
       (id) => addOn.options.some((o) => o.id === id)
     ).length;
     const minMet = !addOn.min_selections || currentSelections >= addOn.min_selections;
+    const isSingleSelect = addOn.is_mutually_exclusive || !addOn.is_multiple_allowed;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         "data-cimplify-addon-group": true,
-        className: cn("border border-border p-5", classNames?.group),
+        className: cn(classNames?.group),
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
               "data-cimplify-addon-header": true,
-              className: cn("flex items-center justify-between mb-4", classNames?.header),
+              className: cn("flex items-center justify-between py-3", classNames?.header),
               children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs(
+                  /* @__PURE__ */ jsxRuntime.jsx(
                     "span",
                     {
                       "data-cimplify-addon-name": true,
-                      className: cn("text-xs font-medium uppercase tracking-wider text-muted-foreground", classNames?.name),
-                      children: [
-                        addOn.name,
-                        addOn.is_required && /* @__PURE__ */ jsxRuntime.jsxs(
-                          "span",
-                          {
-                            "data-cimplify-addon-required": true,
-                            className: cn("text-destructive ml-1", classNames?.required),
-                            children: [
-                              " ",
-                              "*"
-                            ]
-                          }
-                        )
-                      ]
+                      className: cn("text-base font-bold", classNames?.name),
+                      children: addOn.name
                     }
                   ),
                   (addOn.min_selections || addOn.max_selections) && /* @__PURE__ */ jsxRuntime.jsx(
                     "span",
                     {
                       "data-cimplify-addon-constraint": true,
-                      className: cn("text-xs text-muted-foreground/70 mt-1", classNames?.constraint),
+                      className: cn("block text-xs text-muted-foreground mt-0.5", classNames?.constraint),
                       children: addOn.min_selections && addOn.max_selections ? `Choose ${addOn.min_selections}\u2013${addOn.max_selections}` : addOn.min_selections ? `Choose at least ${addOn.min_selections}` : `Choose up to ${addOn.max_selections}`
                     }
                   )
                 ] }),
-                !minMet && /* @__PURE__ */ jsxRuntime.jsx(
+                (addOn.is_required || !minMet) && /* @__PURE__ */ jsxRuntime.jsx(
                   "span",
                   {
-                    "data-cimplify-addon-validation": true,
-                    className: cn("text-xs text-destructive font-medium", classNames?.validation),
+                    "data-cimplify-addon-required": true,
+                    className: cn(
+                      "text-xs font-semibold px-2.5 py-1 rounded",
+                      !minMet ? "text-destructive bg-destructive/10" : "text-destructive bg-destructive/10",
+                      classNames?.required
+                    ),
                     children: "Required"
                   }
                 )
@@ -8206,7 +8196,7 @@ function AddOnSelector({
             "div",
             {
               "data-cimplify-addon-options": true,
-              className: cn("space-y-1", classNames?.options),
+              className: cn("divide-y divide-border", classNames?.options),
               children: addOn.options.map((option) => {
                 const isSelected = isOptionSelected(option.id);
                 return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -8218,8 +8208,7 @@ function AddOnSelector({
                     "data-cimplify-addon-option": true,
                     "data-selected": isSelected || void 0,
                     className: cn(
-                      "w-full flex items-center gap-3 px-4 py-3 border transition-colors text-left border-transparent hover:bg-muted/50",
-                      isSelected && "bg-primary/5 border-primary",
+                      "w-full flex items-center gap-3 py-4 transition-colors text-left cursor-pointer",
                       isSelected ? classNames?.optionSelected : classNames?.option
                     ),
                     children: [
@@ -8230,25 +8219,42 @@ function AddOnSelector({
                           keepMounted: false
                         }
                       ),
+                      isSingleSelect ? /* @__PURE__ */ jsxRuntime.jsx(
+                        "span",
+                        {
+                          "data-cimplify-addon-radio": true,
+                          className: cn(
+                            "w-5 h-5 rounded-full border-2 flex items-center justify-center shrink-0 transition-colors",
+                            isSelected ? "border-primary" : "border-muted-foreground/30"
+                          ),
+                          children: isSelected && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-2.5 h-2.5 rounded-full bg-primary" })
+                        }
+                      ) : /* @__PURE__ */ jsxRuntime.jsx(
+                        "span",
+                        {
+                          "data-cimplify-addon-checkbox": true,
+                          className: cn(
+                            "w-5 h-5 rounded-sm border-2 flex items-center justify-center shrink-0 transition-colors",
+                            isSelected ? "border-primary bg-primary" : "border-muted-foreground/30"
+                          ),
+                          children: isSelected && /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 12 12", className: "w-3 h-3 text-primary-foreground", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2 6l3 3 5-5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                        }
+                      ),
                       /* @__PURE__ */ jsxRuntime.jsx(
                         "span",
                         {
                           "data-cimplify-addon-option-name": true,
                           className: cn(
-                            "flex-1 min-w-0 text-sm font-medium",
-                            isSelected && "text-primary",
+                            "flex-1 min-w-0 text-sm",
                             classNames?.optionName
                           ),
                           children: option.name
                         }
                       ),
-                      option.default_price != null && parsePrice(option.default_price) !== 0 && /* @__PURE__ */ jsxRuntime.jsx(
-                        Price,
-                        {
-                          amount: option.default_price,
-                          prefix: "+"
-                        }
-                      )
+                      option.default_price != null && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-muted-foreground", children: [
+                        "+",
+                        /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: option.default_price })
+                      ] })
                     ]
                   },
                   option.id
@@ -8334,14 +8340,14 @@ function BundleSelector({
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-bundle-selector": true, className: cn("space-y-4", className, classNames?.root), children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      "span",
+      "div",
       {
         "data-cimplify-bundle-heading": true,
-        className: cn("text-xs font-medium uppercase tracking-wider text-muted-foreground", classNames?.heading),
-        children: "Included in this bundle"
+        className: cn("flex items-center justify-between py-3", classNames?.heading),
+        children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-bold", children: "Included in this bundle" })
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-bundle-components": true, className: cn("space-y-3", classNames?.components), children: components.map((comp) => /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-bundle-components": true, className: cn("divide-y divide-border", classNames?.components), children: components.map((comp) => /* @__PURE__ */ jsxRuntime.jsx(
       BundleComponentCard,
       {
         component: comp,
@@ -8404,20 +8410,20 @@ function BundleComponentCard({
     "div",
     {
       "data-cimplify-bundle-component": true,
-      className: cn("border border-border p-4", classNames?.component),
+      className: cn("py-4", classNames?.component),
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             "data-cimplify-bundle-component-header": true,
-            className: cn("flex items-start justify-between gap-3", classNames?.componentHeader),
+            className: cn("flex items-center justify-between gap-3", classNames?.componentHeader),
             children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
                 component.quantity > 1 && /* @__PURE__ */ jsxRuntime.jsxs(
                   "span",
                   {
                     "data-cimplify-bundle-component-qty": true,
-                    className: cn("text-xs font-medium text-primary bg-primary/10 px-1.5 py-0.5", classNames?.componentQty),
+                    className: cn("text-xs font-medium text-primary bg-primary/10 px-1.5 py-0.5 rounded", classNames?.componentQty),
                     children: [
                       "\xD7",
                       component.quantity
@@ -8429,12 +8435,12 @@ function BundleComponentCard({
                   {
                     id: labelId,
                     "data-cimplify-bundle-component-name": true,
-                    className: cn("font-medium text-sm", classNames?.componentName),
+                    className: cn("text-sm", classNames?.componentName),
                     children: component.product_name
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: displayPrice })
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: displayPrice }) })
             ]
           }
         ),
@@ -8447,7 +8453,7 @@ function BundleComponentCard({
               onVariantChange(value);
             },
             "data-cimplify-bundle-variant-picker": true,
-            className: cn("mt-3 flex flex-wrap gap-2", classNames?.variantPicker),
+            className: cn("mt-3 divide-y divide-border", classNames?.variantPicker),
             children: component.available_variants.map((variant) => {
               const isSelected = selectedVariantId === variant.id;
               const adjustment = parsePrice(variant.price_adjustment);
@@ -8458,17 +8464,26 @@ function BundleComponentCard({
                   "data-cimplify-bundle-variant-option": true,
                   "data-selected": isSelected || void 0,
                   className: cn(
-                    "px-3 py-1.5 border text-xs font-medium transition-colors border-border hover:border-primary/50",
-                    isSelected && "bg-primary text-primary-foreground border-primary",
+                    "w-full flex items-center gap-3 py-3 transition-colors cursor-pointer",
                     isSelected ? classNames?.variantOptionSelected : classNames?.variantOption
                   ),
                   children: [
-                    variant.display_name,
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        className: cn(
+                          "w-5 h-5 rounded-full border-2 flex items-center justify-center shrink-0 transition-colors",
+                          isSelected ? "border-primary" : "border-muted-foreground/30"
+                        ),
+                        children: isSelected && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-2.5 h-2.5 rounded-full bg-primary" })
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 text-sm", children: variant.display_name }),
                     adjustment !== 0 && /* @__PURE__ */ jsxRuntime.jsxs(
                       "span",
                       {
                         "data-cimplify-bundle-variant-adjustment": true,
-                        className: cn("ml-1 opacity-70", classNames?.variantAdjustment),
+                        className: cn("text-sm text-muted-foreground", classNames?.variantAdjustment),
                         children: [
                           adjustment > 0 ? "+" : "",
                           /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: variant.price_adjustment })
@@ -8625,41 +8640,28 @@ function CompositeSelector({
         "div",
         {
           "data-cimplify-composite-group": true,
-          className: cn("border border-border p-5", classNames?.group),
+          className: cn(classNames?.group),
           children: [
             /* @__PURE__ */ jsxRuntime.jsxs(
               "div",
               {
                 "data-cimplify-composite-group-header": true,
-                className: cn("flex items-center justify-between mb-4", classNames?.groupHeader),
+                className: cn("flex items-center justify-between py-3", classNames?.groupHeader),
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs(
+                    /* @__PURE__ */ jsxRuntime.jsx(
                       "span",
                       {
                         "data-cimplify-composite-group-name": true,
-                        className: cn("text-xs font-medium uppercase tracking-wider text-muted-foreground", classNames?.groupName),
-                        children: [
-                          group.name,
-                          group.min_selections > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
-                            "span",
-                            {
-                              "data-cimplify-composite-required": true,
-                              className: cn("text-destructive ml-1", classNames?.required),
-                              children: [
-                                " ",
-                                "*"
-                              ]
-                            }
-                          )
-                        ]
+                        className: cn("text-base font-bold", classNames?.groupName),
+                        children: group.name
                       }
                     ),
                     group.description && /* @__PURE__ */ jsxRuntime.jsx(
                       "span",
                       {
                         "data-cimplify-composite-group-description": true,
-                        className: cn("text-xs text-muted-foreground/70 mt-0.5", classNames?.groupDescription),
+                        className: cn("block text-xs text-muted-foreground mt-0.5", classNames?.groupDescription),
                         children: group.description
                       }
                     ),
@@ -8667,16 +8669,20 @@ function CompositeSelector({
                       "span",
                       {
                         "data-cimplify-composite-group-constraint": true,
-                        className: cn("text-xs text-muted-foreground/70 mt-1", classNames?.groupConstraint),
+                        className: cn("block text-xs text-muted-foreground mt-0.5", classNames?.groupConstraint),
                         children: group.min_selections > 0 && group.max_selections ? `Choose ${group.min_selections}\u2013${group.max_selections}` : group.min_selections > 0 ? `Choose at least ${group.min_selections}` : group.max_selections ? `Choose up to ${group.max_selections}` : "Choose as many as you like"
                       }
                     )
                   ] }),
-                  !minMet && /* @__PURE__ */ jsxRuntime.jsx(
+                  group.min_selections > 0 && /* @__PURE__ */ jsxRuntime.jsx(
                     "span",
                     {
-                      "data-cimplify-composite-validation": true,
-                      className: cn("text-xs text-destructive font-medium", classNames?.validation),
+                      "data-cimplify-composite-required": true,
+                      className: cn(
+                        "text-xs font-semibold px-2.5 py-1 rounded shrink-0",
+                        !minMet ? "text-destructive bg-destructive/10" : "text-destructive bg-destructive/10",
+                        classNames?.required
+                      ),
                       children: "Required"
                     }
                   )
@@ -8689,7 +8695,7 @@ function CompositeSelector({
                 "data-cimplify-composite-components": true,
                 role: isSingleSelect ? "radiogroup" : "group",
                 "aria-label": group.name,
-                className: cn("space-y-1", classNames?.components),
+                className: cn("divide-y divide-border", classNames?.components),
                 children: group.components.filter((c) => c.is_available && !c.is_archived).sort((a, b) => a.display_order - b.display_order).map((component) => {
                   const qty = groupSels[component.id] || 0;
                   const isSelected = qty > 0;
@@ -8703,8 +8709,7 @@ function CompositeSelector({
                       "data-cimplify-composite-component": true,
                       "data-selected": isSelected || void 0,
                       className: cn(
-                        "w-full flex items-center gap-3 px-4 py-3 border transition-colors text-left border-transparent hover:bg-muted/50",
-                        isSelected && "bg-primary/5 border-primary",
+                        "w-full flex items-center gap-3 py-4 transition-colors text-left cursor-pointer",
                         isSelected ? classNames?.componentSelected : classNames?.component
                       ),
                       children: [
@@ -8715,6 +8720,27 @@ function CompositeSelector({
                             keepMounted: false
                           }
                         ),
+                        isSingleSelect ? /* @__PURE__ */ jsxRuntime.jsx(
+                          "span",
+                          {
+                            "data-cimplify-composite-radio": true,
+                            className: cn(
+                              "w-5 h-5 rounded-full border-2 flex items-center justify-center shrink-0 transition-colors",
+                              isSelected ? "border-primary" : "border-muted-foreground/30"
+                            ),
+                            children: isSelected && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-2.5 h-2.5 rounded-full bg-primary" })
+                          }
+                        ) : /* @__PURE__ */ jsxRuntime.jsx(
+                          "span",
+                          {
+                            "data-cimplify-composite-checkbox": true,
+                            className: cn(
+                              "w-5 h-5 rounded-sm border-2 flex items-center justify-center shrink-0 transition-colors",
+                              isSelected ? "border-primary bg-primary" : "border-muted-foreground/30"
+                            ),
+                            children: isSelected && /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 12 12", className: "w-3 h-3 text-primary-foreground", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2 6l3 3 5-5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                          }
+                        ),
                         /* @__PURE__ */ jsxRuntime.jsxs(
                           "div",
                           {
@@ -8725,7 +8751,7 @@ function CompositeSelector({
                                 "span",
                                 {
                                   "data-cimplify-composite-component-name": true,
-                                  className: cn("text-sm font-medium", isSelected && "text-primary", classNames?.componentName),
+                                  className: cn("text-sm", classNames?.componentName),
                                   children: displayName
                                 }
                               ),
@@ -8749,7 +8775,7 @@ function CompositeSelector({
                                 "span",
                                 {
                                   "data-cimplify-composite-component-description": true,
-                                  className: cn("text-xs text-muted-foreground truncate", classNames?.componentDescription),
+                                  className: cn("block text-xs text-muted-foreground truncate", classNames?.componentDescription),
                                   children: component.display_description
                                 }
                               ),
@@ -8757,7 +8783,7 @@ function CompositeSelector({
                                 "span",
                                 {
                                   "data-cimplify-composite-component-calories": true,
-                                  className: cn("text-xs text-muted-foreground/60", classNames?.componentCalories),
+                                  className: cn("block text-xs text-muted-foreground/60", classNames?.componentCalories),
                                   children: [
                                     component.calories,
                                     " cal"
@@ -8814,7 +8840,10 @@ function CompositeSelector({
                             )
                           }
                         ),
-                        component.price != null && parsePrice(component.price) !== 0 && /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: component.price, prefix: "+" })
+                        component.price != null && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-muted-foreground shrink-0", children: [
+                          "+",
+                          /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: component.price })
+                        ] })
                       ]
                     },
                     component.id
@@ -9572,6 +9601,14 @@ function ProductCard({
   const [isOpen, setIsOpen] = React3.useState(false);
   const [shouldFetch, setShouldFetch] = React3.useState(false);
   const dialogRef = React3.useRef(null);
+  React3.useEffect(() => {
+    if (!isOpen) return;
+    const original = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = original;
+    };
+  }, [isOpen]);
   const { product: productDetails } = useProduct(
     product.slug ?? product.id,
     { enabled: shouldFetch || isOpen }
@@ -9711,7 +9748,7 @@ function ProductCard({
           "border-none rounded-2xl p-0 max-w-lg w-full max-h-[85vh] overflow-auto bg-background shadow-2xl backdrop:bg-black/50 backdrop:backdrop-blur-sm open:animate-in open:fade-in-0 open:slide-in-from-bottom-4",
           classNames?.modal
         ),
-        children: isOpen && (productDetails ? renderModal ? renderModal(productDetails) : /* @__PURE__ */ jsxRuntime.jsx(
+        children: isOpen && (productDetails ? renderModal ? renderModal(productDetails, handleClose) : /* @__PURE__ */ jsxRuntime.jsx(
           ProductSheet,
           {
             product: productDetails,