@lime-bundles/react 7.5.0 → 7.5.1

package/dist/index.cjs

@@ -34,6 +34,7 @@ __export(index_exports, {
   VolumeBundle: () => VolumeBundle,
   WIDGET_CONFIG_DEFAULTS: () => import_core17.WIDGET_CONFIG_DEFAULTS,
   applyWidgetConfigVars: () => import_core17.applyWidgetConfigVars,
+  bundleSaleCents: () => import_core17.bundleSaleCents,
   calculateDiscount: () => import_core17.calculateDiscount,
   calculateTierSavings: () => import_core17.calculateTierSavings,
   computeBundleSaleCents: () => import_core17.computeBundleSaleCents,
@@ -750,8 +751,34 @@ function BundleCountdown({
   ] });
 }
 
-// src/components/FixedBundle.tsx
+// src/components/ThumbnailPlaceholder.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
+function PlaceholderMark() {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "svg",
+    {
+      className: "lb-bundle-placeholder-icon",
+      viewBox: "0 0 48 48",
+      "data-lb-placeholder": "",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { x: "15", y: "15", width: "18", height: "18", rx: "2" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "20.5", cy: "20.5", r: "1.5" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M33 27l-5-5L17 33" })
+      ]
+    }
+  );
+}
+function placeholderBoxClass(boxClass) {
+  return `${boxClass} lb-thumb--placeholder`;
+}
+function ThumbnailPlaceholder({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: placeholderBoxClass(className), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PlaceholderMark, {}) });
+}
+
+// src/components/FixedBundle.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
 function FixedBundle(props) {
   const {
     shopDomain,
@@ -878,9 +905,9 @@ function FixedBundle(props) {
     }
   }, [bundle, onAddToCart, onError, trackAddToCart, selectedVariants]);
   if (result.status === "loading") {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "lb-skeleton lb-skeleton--title" }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "lb-skeleton lb-skeleton--products" })
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "lb-skeleton lb-skeleton--title" }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "lb-skeleton lb-skeleton--products" })
     ] });
   }
   if (result.status === "error") return null;
@@ -907,7 +934,7 @@ function FixedBundle(props) {
   const savingsPercent = comparePrice > 0 && savings > 0 ? Math.round(savings / comparePrice * 100) : 0;
   const showCompare = bundle.widgetConfig.pricing.showComparePrice && savings > 0;
   const showSavings = bundle.widgetConfig.savingsBar.visible && savings > 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "div",
     {
       ref: (el) => {
@@ -918,18 +945,18 @@ function FixedBundle(props) {
       role: "region",
       "aria-label": bundle.title,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "lb-bundle-header", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "lb-bundle-header__content", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { className: "lb-bundle-title", children: bundle.title }),
-          bundle.description && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "lb-bundle-subtitle", children: bundle.description })
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "lb-bundle-header", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "lb-bundle-header__content", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h3", { className: "lb-bundle-title", children: bundle.title }),
+          bundle.description && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "lb-bundle-subtitle", children: bundle.description })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           BundleCountdown,
           {
             endsAt: bundle.endsAt,
             widgetConfig: bundle.widgetConfig
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "lb-bundle__products lb-edge-fade", ref: productsEdgeFadeRef, children: bundle.products.map((product) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "lb-bundle__products lb-edge-fade", ref: productsEdgeFadeRef, children: bundle.products.map((product) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           FixedProductRow,
           {
             bundle,
@@ -940,29 +967,29 @@ function FixedBundle(props) {
           },
           product.id
         )) }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "lb-bundle-divider" }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "lb-bundle-summary", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "lb-bundle-summary__text", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "lb-bundle-summary__label", children: "Bundle total" }),
-            showSavings && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("p", { className: "lb-bundle-savings-line", "data-savings-bar": true, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "lb-bundle-divider" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "lb-bundle-summary", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "lb-bundle-summary__text", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "lb-bundle-summary__label", children: "Bundle total" }),
+            showSavings && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("p", { className: "lb-bundle-savings-line", "data-savings-bar": true, children: [
               "You save",
               " ",
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { "data-savings-amount": true, children: (0, import_core8.formatMoney)(savings, currency) }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { "data-savings-amount": true, children: (0, import_core8.formatMoney)(savings, currency) }),
               " ",
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { "data-savings-percent": true, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { "data-savings-percent": true, children: [
                 "(",
                 savingsPercent,
                 "%)"
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "lb-bundle-summary__prices", children: [
-            showCompare && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "lb-bundle-compare-price", "data-compare-price": true, children: (0, import_core8.formatMoney)(comparePrice, currency) }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "lb-bundle-sale-price", "data-sale-price": true, children: (0, import_core8.formatMoney)(salePrice, currency) })
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "lb-bundle-summary__prices", children: [
+            showCompare && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "lb-bundle-compare-price", "data-compare-price": true, children: (0, import_core8.formatMoney)(comparePrice, currency) }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "lb-bundle-sale-price", "data-sale-price": true, children: (0, import_core8.formatMoney)(salePrice, currency) })
           ] })
         ] }),
-        cartError && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        cartError && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "button",
           {
             className: "lb-bundle__cta",
@@ -1012,15 +1039,15 @@ function FixedProductRow({ bundle, product, currency, isOos, onVariantChange })
     bundle.widgetConfig.lowStockThreshold,
     bundle.widgetConfig.showLowStockBadge
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "div",
     {
       className: isOos ? "lb-bundle-product-row lb-bundle-product-row--oos" : "lb-bundle-product-row",
       "aria-disabled": isOos || void 0,
       part: "product",
       children: [
-        isOos && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "lb-bundle-product-row__oos", children: "Out of stock" }),
-        thumbImage && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        isOos && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "lb-bundle-product-row__oos", children: "Out of stock" }),
+        thumbImage ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "img",
           {
             src: thumbImage.url,
@@ -1030,12 +1057,12 @@ function FixedProductRow({ bundle, product, currency, isOos, onVariantChange })
             width: thumbImage.width ?? void 0,
             height: thumbImage.height ?? void 0
           }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "lb-bundle__product-info", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "lb-bundle__product-title", children: product.title }),
-          !showPicker && displayVariant && variants.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "lb-bundle-variant-badge", children: displayVariant.title }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "lb-bundle-product-prices", children: [
-            compareAt && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ThumbnailPlaceholder, { className: "lb-bundle__product-image" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "lb-bundle__product-info", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "lb-bundle__product-title", children: product.title }),
+          !showPicker && displayVariant && variants.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "lb-bundle-variant-badge", children: displayVariant.title }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "lb-bundle-product-prices", children: [
+            compareAt && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
               "span",
               {
                 className: "lb-bundle-product-compare-price",
@@ -1043,9 +1070,9 @@ function FixedProductRow({ bundle, product, currency, isOos, onVariantChange })
                 children: compareAt
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "lb-bundle__product-price", "data-product-price": true, children: priceText })
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "lb-bundle__product-price", "data-product-price": true, children: priceText })
           ] }),
-          unitPriceText && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          unitPriceText && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             "span",
             {
               className: "lb-bundle__product-unit-price",
@@ -1053,18 +1080,18 @@ function FixedProductRow({ bundle, product, currency, isOos, onVariantChange })
               children: unitPriceText
             }
           ),
-          showLowStock && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "lb-bundle-low-stock-badge", children: [
+          showLowStock && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "lb-bundle-low-stock-badge", children: [
             "Only ",
             displayVariant.quantityAvailable,
             " left"
           ] }),
-          showPicker && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "lb-bundle__product-variant-pickers", children: optionNames.map((optionName, optionIndex) => {
+          showPicker && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "lb-bundle__product-variant-pickers", children: optionNames.map((optionName, optionIndex) => {
             const dropdownOptions = optionsFor(optionIndex).map((o) => ({
               value: o.value,
               label: o.value,
               disabled: o.disabled
             }));
-            return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
               VariantDropdown,
               {
                 options: dropdownOptions,
@@ -1076,7 +1103,7 @@ function FixedProductRow({ bundle, product, currency, isOos, onVariantChange })
             );
           }) })
         ] }),
-        displayVariant && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "lb-bundle-qty-chip", "data-qty-inline": true, children: [
+        displayVariant && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "lb-bundle-qty-chip", "data-qty-inline": true, children: [
           "\xD7",
           displayQty
         ] })
@@ -1202,7 +1229,7 @@ function useFocusTrap({
 }
 
 // src/components/MixMatchPicker.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function ruleFor(bundle, productId, variantId) {
   if (variantId) {
     const vRule = bundle.variantRules[variantId];
@@ -1336,7 +1363,7 @@ function MixMatchPicker({
     // inside carries the interactive role + focus trap. So the static-element
     // interaction lint does not apply to this backdrop.
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "div",
       {
         ref: (el) => {
@@ -1348,7 +1375,7 @@ function MixMatchPicker({
         "data-bundle-gid": bundle.id,
         onMouseDown: onOverlayMouseDown,
         onMouseUp: onOverlayMouseUp,
-        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
           "div",
           {
             ref: dialogRef,
@@ -1358,13 +1385,13 @@ function MixMatchPicker({
             "aria-labelledby": titleId,
             tabIndex: -1,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "lb-mix-match__modal-header", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "lb-mix-match__modal-header-top", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "lb-mix-match__modal-heading", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h4", { className: "lb-mix-match__modal-title", id: titleId, children: "Add to your bundle" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "lb-mix-match__modal-subtitle", "data-modal-subtitle": true, children: subtitle })
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "lb-mix-match__modal-header", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "lb-mix-match__modal-header-top", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "lb-mix-match__modal-heading", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h4", { className: "lb-mix-match__modal-title", id: titleId, children: "Add to your bundle" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "lb-mix-match__modal-subtitle", "data-modal-subtitle": true, children: subtitle })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                     "button",
                     {
                       ref: closeBtnRef,
@@ -1373,16 +1400,16 @@ function MixMatchPicker({
                       "data-modal-close": true,
                       "aria-label": "Close",
                       onClick: onClose,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CloseIcon, {})
+                      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CloseIcon, {})
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                   "div",
                   {
                     className: "lb-mix-match__progress lb-mix-match__modal-progress",
                     "data-progress": true,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                       "div",
                       {
                         className: "lb-mix-match__progress-segments",
@@ -1390,7 +1417,7 @@ function MixMatchPicker({
                         "aria-valuenow": shownUnits,
                         "aria-valuemin": 0,
                         "aria-valuemax": requiredQty,
-                        children: Array.from({ length: requiredQty }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                        children: Array.from({ length: requiredQty }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                           "span",
                           {
                             className: `lb-mix-match__progress-segment${i < shownUnits ? " lb-mix-match__progress-segment--filled" : ""}`,
@@ -1403,8 +1430,8 @@ function MixMatchPicker({
                   }
                 )
               ] }),
-              wc.showSearch && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "lb-mix-match__modal-search", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              wc.showSearch && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "lb-mix-match__modal-search", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                   "input",
                   {
                     type: "text",
@@ -1418,7 +1445,7 @@ function MixMatchPicker({
                     onChange: (e) => setQuery(e.target.value)
                   }
                 ),
-                query.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                query.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                   "button",
                   {
                     type: "button",
@@ -1426,11 +1453,11 @@ function MixMatchPicker({
                     "data-modal-search-clear": true,
                     "aria-label": "Clear search",
                     onClick: () => setQuery(""),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SearchClearIcon, {})
+                    children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SearchClearIcon, {})
                   }
                 )
               ] }),
-              showFilters && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              showFilters && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                 "div",
                 {
                   className: "lb-mix-match__filters",
@@ -1439,7 +1466,7 @@ function MixMatchPicker({
                   "aria-label": "Filter by product type",
                   children: [FILTERS_ALL, ...productTypes].map((value) => {
                     const isActive = value === activeType;
-                    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                       "button",
                       {
                         type: "button",
@@ -1454,7 +1481,7 @@ function MixMatchPicker({
                   })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "lb-mix-match__modal-list", "data-modal-list": true, children: filtered.map((ep) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "lb-mix-match__modal-list", "data-modal-list": true, children: filtered.map((ep) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                 MixMatchPickerRow,
                 {
                   bundle,
@@ -1473,10 +1500,10 @@ function MixMatchPicker({
                 },
                 ep.product.id
               )) }),
-              showEmpty && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "lb-mix-match__modal-empty", "data-modal-empty": true, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { children: "No products match your search" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { "data-modal-live": true, "aria-live": "polite", className: "lb-visually-hidden", children: `${filtered.length} products shown` }),
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "lb-mix-match__modal-footer", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              showEmpty && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "lb-mix-match__modal-empty", "data-modal-empty": true, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { children: "No products match your search" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { "data-modal-live": true, "aria-live": "polite", className: "lb-visually-hidden", children: `${filtered.length} products shown` }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "lb-mix-match__modal-footer", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                   "span",
                   {
                     className: "lb-mix-match__modal-footer-count",
@@ -1485,7 +1512,7 @@ function MixMatchPicker({
                     children: `${shownUnits} of ${requiredQty} added`
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                   "button",
                   {
                     type: "button",
@@ -1619,7 +1646,7 @@ function MixMatchPickerRow({
   }
   const priceCents = parseFloat(currentVariant.price.amount);
   const compareCents = currentVariant.compareAtPrice ? parseFloat(currentVariant.compareAtPrice.amount) : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "div",
     {
       className: `lb-mix-match__modal-product${isOos ? " lb-mix-match__modal-product--sold-out" : ""}${variantInBundle ? " lb-mix-match__modal-product--in-bundle" : ""}`,
@@ -1628,21 +1655,27 @@ function MixMatchPickerRow({
       "data-type": product.productType ?? "",
       "aria-disabled": isOos || void 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "lb-mix-match__modal-product-thumb", children: [
-          thumbImage && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-            "img",
-            {
-              src: thumbImage.url,
-              alt: thumbImage.altText ?? product.title,
-              loading: "lazy",
-              width: thumbImage.width ?? void 0,
-              height: thumbImage.height ?? void 0
-            }
-          ),
-          variantInBundle && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "lb-mix-match__modal-added-badge", children: "Added" })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "lb-mix-match__modal-product-info", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "lb-mix-match__modal-product-title", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          "div",
+          {
+            className: thumbImage ? "lb-mix-match__modal-product-thumb" : placeholderBoxClass("lb-mix-match__modal-product-thumb"),
+            children: [
+              thumbImage ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "img",
+                {
+                  src: thumbImage.url,
+                  alt: thumbImage.altText ?? product.title,
+                  loading: "lazy",
+                  width: thumbImage.width ?? void 0,
+                  height: thumbImage.height ?? void 0
+                }
+              ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PlaceholderMark, {}),
+              variantInBundle && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "lb-mix-match__modal-added-badge", children: "Added" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "lb-mix-match__modal-product-info", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "lb-mix-match__modal-product-title", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             "a",
             {
               href: `/products/${product.handle}`,
@@ -1651,24 +1684,24 @@ function MixMatchPickerRow({
               children: product.title
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("p", { className: "lb-mix-match__modal-product-price", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { "data-row-price-sale": true, children: (0, import_core9.formatMoney)(priceCents, currency) }),
-            compareCents !== null && compareCents > priceCents && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("s", { className: "lb-mix-match__modal-product-compare", "data-row-compare": true, children: (0, import_core9.formatMoney)(compareCents, currency) })
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { className: "lb-mix-match__modal-product-price", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { "data-row-price-sale": true, children: (0, import_core9.formatMoney)(priceCents, currency) }),
+            compareCents !== null && compareCents > priceCents && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("s", { className: "lb-mix-match__modal-product-compare", "data-row-compare": true, children: (0, import_core9.formatMoney)(compareCents, currency) })
           ] }),
-          unitPriceText && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "lb-mix-match__modal-product-unit-price lb-bundle-product-unit-price", children: unitPriceText }),
-          showPicker && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "lb-bundle-variant-option-groups", children: optionNames.map((optionName, optionIndex) => {
+          unitPriceText && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "lb-mix-match__modal-product-unit-price lb-bundle-product-unit-price", children: unitPriceText }),
+          showPicker && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "lb-bundle-variant-option-groups", children: optionNames.map((optionName, optionIndex) => {
             const dropdownOptions = optionsFor(optionIndex).map((o) => ({
               value: o.value,
               label: o.value,
               disabled: o.disabled
             }));
-            return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+            return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
               "div",
               {
                 className: "lb-bundle-variant-option-group",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "lb-bundle-variant-option-label", children: optionName }),
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "lb-bundle-variant-option-label", children: optionName }),
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                     VariantDropdown,
                     {
                       className: "lb-mix-match__variant-select-dropdown",
@@ -1683,17 +1716,17 @@ function MixMatchPickerRow({
               optionName
             );
           }) }),
-          !showPicker && variants.length === 1 && currentVariant.title !== "Default Title" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "lb-mix-match__filled-variant", children: currentVariant.title }),
-          !isOos && needsMoreSpots && remainingUnits > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "lb-mix-match__modal-needs-spots", children: rule.min === 1 ? "Needs 1 spot" : `Needs ${rule.min} spots` }),
-          isOos ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "lb-mix-match__modal-sold-out-label", children: "Sold out" }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "lb-mix-match__modal-product-actions", children: [
-            showStepper && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "lb-bundle-variant-option-group lb-mix-match__qty-stepper-group", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          !showPicker && variants.length === 1 && currentVariant.title !== "Default Title" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "lb-mix-match__filled-variant", children: currentVariant.title }),
+          !isOos && needsMoreSpots && remainingUnits > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "lb-mix-match__modal-needs-spots", children: rule.min === 1 ? "Needs 1 spot" : `Needs ${rule.min} spots` }),
+          isOos ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "lb-mix-match__modal-sold-out-label", children: "Sold out" }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "lb-mix-match__modal-product-actions", children: [
+            showStepper && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "lb-bundle-variant-option-group lb-mix-match__qty-stepper-group", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
               "div",
               {
                 className: "lb-mix-match__qty-stepper",
                 role: "group",
                 "aria-label": "Quantity",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                     "button",
                     {
                       type: "button",
@@ -1714,7 +1747,7 @@ function MixMatchPickerRow({
                       children: "\u2212"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                     "span",
                     {
                       className: "lb-mix-match__qty-stepper-value",
@@ -1723,7 +1756,7 @@ function MixMatchPickerRow({
                       children: shownQty
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                     "button",
                     {
                       type: "button",
@@ -1747,7 +1780,7 @@ function MixMatchPickerRow({
                 ]
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               "button",
               {
                 type: "button",
@@ -1766,7 +1799,7 @@ function MixMatchPickerRow({
   );
 }
 function CloseIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "svg",
     {
       width: "20",
@@ -1776,14 +1809,14 @@ function CloseIcon() {
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: "5", y1: "5", x2: "15", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: "15", y1: "5", x2: "5", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: "5", y1: "5", x2: "15", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: "15", y1: "5", x2: "5", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
       ]
     }
   );
 }
 function SearchClearIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "svg",
     {
       width: "16",
@@ -1792,13 +1825,13 @@ function SearchClearIcon() {
       fill: "currentColor",
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true",
-      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M14.348 5.652a.5.5 0 0 0-.707 0L10 9.293 6.36 5.652a.5.5 0 1 0-.708.707L9.293 10l-3.641 3.641a.5.5 0 0 0 .708.707L10 10.707l3.641 3.641a.5.5 0 0 0 .707-.707L10.707 10l3.641-3.641a.5.5 0 0 0 0-.707z" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M14.348 5.652a.5.5 0 0 0-.707 0L10 9.293 6.36 5.652a.5.5 0 1 0-.708.707L9.293 10l-3.641 3.641a.5.5 0 0 0 .708.707L10 10.707l3.641 3.641a.5.5 0 0 0 .707-.707L10.707 10l3.641-3.641a.5.5 0 0 0 0-.707z" })
     }
   );
 }
 
 // src/components/MixMatchBundle.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function ruleFor2(bundle, productId, variantId) {
   if (variantId) {
     const vRule = bundle.variantRules[variantId];
@@ -2095,9 +2128,9 @@ function MixMatchBundle(props) {
     }
   }, [bundle, selections, valid, onAddToCart, onError, trackAddToCart, totalQuantity]);
   if (result.status === "loading") {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "lb-skeleton lb-skeleton--title" }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "lb-skeleton lb-skeleton--products" })
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "lb-skeleton lb-skeleton--title" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "lb-skeleton lb-skeleton--products" })
     ] });
   }
   if (result.status === "error") return null;
@@ -2116,7 +2149,7 @@ function MixMatchBundle(props) {
   if (requiredBlocked) return null;
   const currency = bundle.products[0]?.priceRange.minVariantPrice.currencyCode ?? "USD";
   const ctaLabel = addingToCart ? "Adding..." : bundle.widgetConfig.cta.ctaText || "Add to cart";
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "div",
     {
       ref: (el) => {
@@ -2128,19 +2161,19 @@ function MixMatchBundle(props) {
       "aria-label": bundle.title,
       "data-required-quantity": requiredUnits,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "lb-bundle-header", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "lb-bundle-header__content", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h3", { className: "lb-bundle-title", children: bundle.title }),
-          bundle.description && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "lb-bundle-subtitle", children: bundle.description })
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "lb-bundle-header", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "lb-bundle-header__content", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h3", { className: "lb-bundle-title", children: bundle.title }),
+          bundle.description && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "lb-bundle-subtitle", children: bundle.description })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           BundleCountdown,
           {
             endsAt: bundle.endsAt,
             widgetConfig: bundle.widgetConfig
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "lb-mix-match__progress", "data-progress": true, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "lb-mix-match__progress", "data-progress": true, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             "div",
             {
               className: "lb-mix-match__progress-segments",
@@ -2148,7 +2181,7 @@ function MixMatchBundle(props) {
               "aria-valuenow": shownUnits,
               "aria-valuemin": 0,
               "aria-valuemax": requiredUnits,
-              children: Array.from({ length: requiredUnits }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              children: Array.from({ length: requiredUnits }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                 "span",
                 {
                   className: `lb-mix-match__progress-segment${i < shownUnits ? " lb-mix-match__progress-segment--filled" : ""}`,
@@ -2158,8 +2191,8 @@ function MixMatchBundle(props) {
               ))
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "lb-mix-match__progress-labels", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "lb-mix-match__progress-labels", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               "span",
               {
                 className: "lb-mix-match__progress-count",
@@ -2168,7 +2201,7 @@ function MixMatchBundle(props) {
                 children: `${shownUnits} of ${requiredUnits} added`
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               "span",
               {
                 className: "lb-mix-match__progress-remaining",
@@ -2179,7 +2212,7 @@ function MixMatchBundle(props) {
             )
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "div",
           {
             className: "lb-mix-match__slots lb-edge-fade",
@@ -2190,15 +2223,21 @@ function MixMatchBundle(props) {
                  button provides the keyboard/AT path (its activation bubbles
                  here); × stops propagation. */
               // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- keyboard path is the inner "Edit selection" title button whose activation bubbles to this handler
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
                 "div",
                 {
                   className: "lb-mix-match__slot lb-mix-match__slot--filled",
                   onClick: () => setPickerOpen(true),
                   children: [
-                    item.featuredImage && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "lb-bundle-thumbnail", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("img", { src: item.featuredImage, alt: item.title, loading: "lazy" }) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "lb-mix-match__filled-info", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                      "div",
+                      {
+                        className: item.featuredImage ? "lb-bundle-thumbnail" : placeholderBoxClass("lb-bundle-thumbnail"),
+                        children: item.featuredImage ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("img", { src: item.featuredImage, alt: item.title, loading: "lazy" }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PlaceholderMark, {})
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "lb-mix-match__filled-info", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                         "button",
                         {
                           type: "button",
@@ -2207,15 +2246,15 @@ function MixMatchBundle(props) {
                           children: item.title
                         }
                       ),
-                      item.variantTitle && item.variantTitle !== "Default Title" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "lb-mix-match__filled-variant", children: item.variantTitle }),
-                      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "lb-mix-match__filled-price", children: [
-                        item.compareAtPrice !== null && item.compareAtPrice > item.price && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("s", { className: "lb-mix-match__filled-compare", children: (0, import_core10.formatMoney)(item.compareAtPrice, currency) }),
-                        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "lb-bundle-product-price", children: (0, import_core10.formatMoney)(item.price, currency) }),
-                        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "lb-bundle-qty-inline", children: `\xD7${item.quantity}` })
+                      item.variantTitle && item.variantTitle !== "Default Title" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "lb-mix-match__filled-variant", children: item.variantTitle }),
+                      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "lb-mix-match__filled-price", children: [
+                        item.compareAtPrice !== null && item.compareAtPrice > item.price && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("s", { className: "lb-mix-match__filled-compare", children: (0, import_core10.formatMoney)(item.compareAtPrice, currency) }),
+                        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "lb-bundle-product-price", children: (0, import_core10.formatMoney)(item.price, currency) }),
+                        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "lb-bundle-qty-inline", children: `\xD7${item.quantity}` })
                       ] }),
-                      item.unitPrice && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "lb-bundle-product-unit-price", children: item.unitPrice })
+                      item.unitPrice && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "lb-bundle-product-unit-price", children: item.unitPrice })
                     ] }),
-                    canRemoveItem(bundle, selections, item) ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                    canRemoveItem(bundle, selections, item) ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                       "button",
                       {
                         type: "button",
@@ -2225,13 +2264,13 @@ function MixMatchBundle(props) {
                           e.stopPropagation();
                           removeSlot(index);
                         },
-                        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CloseIcon2, {})
+                        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CloseIcon2, {})
                       }
                     ) : (
                       /* Required pick at its floor — quiet state chip instead of
                          the ×; removal returns once another slot covers the
                          product's minimum (variant swap flow). */
-                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "lb-mix-match__slot-required", children: "Required" })
+                      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "lb-mix-match__slot-required", children: "Required" })
                     )
                   ]
                 },
@@ -2240,7 +2279,7 @@ function MixMatchBundle(props) {
             ))
           }
         ),
-        totalQuantity < requiredUnits && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        totalQuantity < requiredUnits && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
           "button",
           {
             type: "button",
@@ -2248,34 +2287,34 @@ function MixMatchBundle(props) {
             "data-add-product-trigger": true,
             onClick: () => setPickerOpen(true),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "lb-mix-match__add-product-icon", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PlusIcon, {}) }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "lb-mix-match__add-product-label", children: "Add a product" })
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "lb-mix-match__add-product-icon", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PlusIcon, {}) }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "lb-mix-match__add-product-label", children: "Add a product" })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "lb-bundle-divider" }),
-        selections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "lb-bundle-summary", "data-pricing-section": true, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "lb-bundle-summary__text", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "lb-bundle-summary__label", children: "Bundle total" }),
-            bundle.widgetConfig.savingsBar.visible && summary.savings > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { className: "lb-bundle-savings-line", "data-savings-bar": true, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "lb-bundle-divider" }),
+        selections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "lb-bundle-summary", "data-pricing-section": true, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "lb-bundle-summary__text", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "lb-bundle-summary__label", children: "Bundle total" }),
+            bundle.widgetConfig.savingsBar.visible && summary.savings > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("p", { className: "lb-bundle-savings-line", "data-savings-bar": true, children: [
               "You save",
               " ",
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { "data-savings-amount": true, children: (0, import_core10.formatMoney)(summary.savings, currency) }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { "data-savings-amount": true, children: (0, import_core10.formatMoney)(summary.savings, currency) }),
               " ",
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { "data-savings-percent": true, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { "data-savings-percent": true, children: [
                 "(",
                 summary.savingsPercent,
                 "%)"
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "lb-bundle-summary__prices", children: [
-            bundle.widgetConfig.pricing.showComparePrice && summary.savings > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "lb-bundle-compare-price", "data-compare-price": true, children: (0, import_core10.formatMoney)(summary.comparePrice, currency) }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "lb-bundle-sale-price", "data-sale-price": true, children: (0, import_core10.formatMoney)(summary.salePrice, currency) })
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "lb-bundle-summary__prices", children: [
+            bundle.widgetConfig.pricing.showComparePrice && summary.savings > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "lb-bundle-compare-price", "data-compare-price": true, children: (0, import_core10.formatMoney)(summary.comparePrice, currency) }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "lb-bundle-sale-price", "data-sale-price": true, children: (0, import_core10.formatMoney)(summary.salePrice, currency) })
           ] })
         ] }),
-        cartError && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        cartError && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "button",
           {
             className: "lb-bundle__cta",
@@ -2285,7 +2324,7 @@ function MixMatchBundle(props) {
             children: ctaLabel
           }
         ),
-        pickerOpen && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        pickerOpen && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           MixMatchPicker,
           {
             bundle,
@@ -2325,7 +2364,7 @@ function countInStockProducts(bundle) {
   return count;
 }
 function PlusIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "svg",
     {
       width: "18",
@@ -2335,14 +2374,14 @@ function PlusIcon() {
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: "9", y1: "3", x2: "9", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: "3", y1: "9", x2: "15", y2: "9", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "9", y1: "3", x2: "9", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "3", y1: "9", x2: "15", y2: "9", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
       ]
     }
   );
 }
 function CloseIcon2() {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "svg",
     {
       width: "16",
@@ -2352,8 +2391,8 @@ function CloseIcon2() {
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: "5", y1: "5", x2: "15", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: "15", y1: "5", x2: "5", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "5", y1: "5", x2: "15", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "15", y1: "5", x2: "5", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
       ]
     }
   );
@@ -2362,7 +2401,7 @@ function CloseIcon2() {
 // src/components/VolumeBundle.tsx
 var import_react13 = require("react");
 var import_core11 = require("@lime-bundles/core");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function VolumeBundle(props) {
   const {
     shopDomain,
@@ -2529,15 +2568,15 @@ function VolumeBundle(props) {
     tierSavings
   ]);
   if (result.status === "loading") {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "lb-skeleton lb-skeleton--title" }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "lb-skeleton lb-skeleton--tiers" })
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "lb-skeleton lb-skeleton--title" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "lb-skeleton lb-skeleton--tiers" })
     ] });
   }
   if (result.status === "error") return null;
   if (!bundle) return null;
   if (!product) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "div",
     {
       ref: (el) => {
@@ -2548,19 +2587,19 @@ function VolumeBundle(props) {
       role: "region",
       "aria-label": bundle.title,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "lb-bundle-header", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "lb-bundle-header__content", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h3", { className: "lb-bundle-title", children: bundle.title }),
-          bundle.description && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "lb-bundle-subtitle", children: bundle.description })
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "lb-bundle-header", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "lb-bundle-header__content", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h3", { className: "lb-bundle-title", children: bundle.title }),
+          bundle.description && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "lb-bundle-subtitle", children: bundle.description })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           BundleCountdown,
           {
             endsAt: bundle.endsAt,
             widgetConfig: bundle.widgetConfig
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "lb-bundle-product-row lb-bundle-product-row--volume", children: [
-          thumbImage && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "lb-bundle-product-row lb-bundle-product-row--volume", children: [
+          thumbImage ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             "img",
             {
               src: thumbImage.url,
@@ -2570,21 +2609,21 @@ function VolumeBundle(props) {
               width: thumbImage.width ?? void 0,
               height: thumbImage.height ?? void 0
             }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "lb-bundle__product-info", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "lb-bundle__product-title", children: product.title }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("p", { className: "lb-bundle__product-price", children: [
+          ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ThumbnailPlaceholder, { className: "lb-bundle__product-image" }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "lb-bundle__product-info", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "lb-bundle__product-title", children: product.title }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("p", { className: "lb-bundle__product-price", children: [
               (0, import_core11.formatMoney)(basePrice, currency),
               " each"
             ] }),
-            unitPriceText && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "lb-bundle__product-unit-price", children: unitPriceText }),
-            showPicker && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "lb-bundle__product-variant-pickers", children: optionNames.map((optionName, optionIndex) => {
+            unitPriceText && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "lb-bundle__product-unit-price", children: unitPriceText }),
+            showPicker && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "lb-bundle__product-variant-pickers", children: optionNames.map((optionName, optionIndex) => {
               const dropdownOptions = optionsFor(optionIndex).map((o) => ({
                 value: o.value,
                 label: o.value,
                 disabled: o.disabled
               }));
-              return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 VariantDropdown,
                 {
                   options: dropdownOptions,
@@ -2597,7 +2636,7 @@ function VolumeBundle(props) {
             }) })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "div",
           {
             className: "lb-bundle__tiers lb-edge-fade",
@@ -2609,7 +2648,7 @@ function VolumeBundle(props) {
               const showCompare = bundle.widgetConfig.pricing.showComparePrice && ts.savings > 0;
               const isChecked = activeTier === ts.tier;
               const available = tierAvailable(ts.tier.minQuantity);
-              return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+              return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
                 "div",
                 {
                   className: `lb-bundle__tier ${ts.isActive ? "lb-bundle__tier--active" : ""} ${available ? "" : "lb-bundle__tier--oos"}`,
@@ -2627,21 +2666,21 @@ function VolumeBundle(props) {
                     }
                   },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "lb-bundle__tier-radio", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "lb-bundle__tier-radio-dot" }) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "lb-bundle__tier-info", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "lb-bundle__tier-label", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "lb-bundle__tier-radio", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "lb-bundle__tier-radio-dot" }) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "lb-bundle__tier-info", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "lb-bundle__tier-label", children: [
                         "Buy ",
                         ts.tier.minQuantity
                       ] }),
-                      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "lb-bundle__tier-price", children: [
-                        showCompare && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "lb-bundle__tier-compare", children: (0, import_core11.formatMoney)(basePrice, currency) }),
-                        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: (0, import_core11.formatMoney)(ts.unitPrice, currency) }),
-                        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "lb-bundle__tier-unit", children: "each" })
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "lb-bundle__tier-price", children: [
+                        showCompare && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "lb-bundle__tier-compare", children: (0, import_core11.formatMoney)(basePrice, currency) }),
+                        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: (0, import_core11.formatMoney)(ts.unitPrice, currency) }),
+                        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "lb-bundle__tier-unit", children: "each" })
                       ] })
                     ] }),
-                    (tierIndex === popularTierIndex || savingsPercent > 0) && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "lb-bundle__tier-right", children: [
-                      tierIndex === popularTierIndex && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "lb-bundle__tier-badge", children: bundle.widgetConfig.popularBadge.text }),
-                      savingsPercent > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "lb-bundle__tier-savings", children: [
+                    (tierIndex === popularTierIndex || savingsPercent > 0) && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "lb-bundle__tier-right", children: [
+                      tierIndex === popularTierIndex && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "lb-bundle__tier-badge", children: bundle.widgetConfig.popularBadge.text }),
+                      savingsPercent > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "lb-bundle__tier-savings", children: [
                         "Save ",
                         savingsPercent,
                         "%"
@@ -2654,10 +2693,10 @@ function VolumeBundle(props) {
             })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "lb-bundle__quantity-selector", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("label", { htmlFor: `lb-qty-${bundle.id}`, children: "Quantity" }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "lb-bundle__quantity-control", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "lb-bundle__quantity-selector", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("label", { htmlFor: `lb-qty-${bundle.id}`, children: "Quantity" }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "lb-bundle__quantity-control", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               "button",
               {
                 "aria-label": "Decrease quantity",
@@ -2665,7 +2704,7 @@ function VolumeBundle(props) {
                 children: "\u2212"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               "input",
               {
                 id: `lb-qty-${bundle.id}`,
@@ -2679,7 +2718,7 @@ function VolumeBundle(props) {
                 className: "lb-bundle__quantity-input"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               "button",
               {
                 "aria-label": "Increase quantity",
@@ -2689,23 +2728,23 @@ function VolumeBundle(props) {
             )
           ] })
         ] }),
-        cartError && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
+        cartError && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
         bundle && displayVariant && (0, import_core11.shouldShowLowStockBadge)(
           displayVariant,
           minTierQty,
           bundle.widgetConfig.lowStockThreshold,
           bundle.widgetConfig.showLowStockBadge
-        ) && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "lb-bundle-low-stock-badge", children: [
+        ) && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "lb-bundle-low-stock-badge", children: [
           "Only ",
           displayVariant.quantityAvailable,
           " left"
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "lb-bundle-divider" }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "lb-bundle-summary", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "lb-bundle-summary__text", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "lb-bundle-summary__label", "data-total-label": true, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "lb-bundle-divider" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "lb-bundle-summary", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "lb-bundle-summary__text", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "lb-bundle-summary__label", "data-total-label": true, children: [
               "Total",
-              bundle.widgetConfig.pricing.showItemCount && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { "data-item-count": true, children: [
+              bundle.widgetConfig.pricing.showItemCount && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { "data-item-count": true, children: [
                 " ",
                 "(",
                 quantity,
@@ -2714,24 +2753,24 @@ function VolumeBundle(props) {
                 ")"
               ] })
             ] }),
-            bundle.widgetConfig.savingsBar.visible && volumeSavings > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("p", { className: "lb-bundle-savings-line", "data-savings-bar": true, children: [
+            bundle.widgetConfig.savingsBar.visible && volumeSavings > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("p", { className: "lb-bundle-savings-line", "data-savings-bar": true, children: [
               "You save",
               " ",
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { "data-savings-amount": true, children: (0, import_core11.formatMoney)(volumeSavings, currency) }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { "data-savings-amount": true, children: (0, import_core11.formatMoney)(volumeSavings, currency) }),
               " ",
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { "data-savings-percent": true, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { "data-savings-percent": true, children: [
                 "(",
                 volumeSavingsPercent,
                 "%)"
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "lb-bundle-summary__prices", children: [
-            bundle.widgetConfig.pricing.showComparePrice && volumeSavings > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "lb-bundle-compare-price", "data-compare-price": true, children: (0, import_core11.formatMoney)(undiscountedTotal, currency) }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "lb-bundle-sale-price", "data-total-price": true, children: (0, import_core11.formatMoney)(volumeTotal, currency) })
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "lb-bundle-summary__prices", children: [
+            bundle.widgetConfig.pricing.showComparePrice && volumeSavings > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "lb-bundle-compare-price", "data-compare-price": true, children: (0, import_core11.formatMoney)(undiscountedTotal, currency) }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "lb-bundle-sale-price", "data-total-price": true, children: (0, import_core11.formatMoney)(volumeTotal, currency) })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "button",
           {
             className: "lb-bundle__cta",
@@ -2749,7 +2788,7 @@ function VolumeBundle(props) {
 // src/components/BogoBundle.tsx
 var import_react14 = require("react");
 var import_core12 = require("@lime-bundles/core");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function discountedUnit(price, percent) {
   const cents = Math.round(price * 100);
   const discounted = cents - Math.floor(cents * percent / 100);
@@ -2883,9 +2922,9 @@ function BogoBundle(props) {
     }
   }, [bundle, buyProduct, getProduct, selectedVariants, resolveVariant, onAddToCart, onError, trackAddToCart, percent]);
   if (result.status === "loading") {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "lb-skeleton lb-skeleton--title" }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "lb-skeleton lb-skeleton--products" })
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "lb-skeleton lb-skeleton--title" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "lb-skeleton lb-skeleton--products" })
     ] });
   }
   if (result.status === "error") return null;
@@ -2902,7 +2941,7 @@ function BogoBundle(props) {
   const showCompare = bundle.widgetConfig.pricing.showComparePrice && savings > 0;
   const showSavings = bundle.widgetConfig.savingsBar.visible && savings > 0;
   const badge = percent === 100 ? "Free" : `${percent}% off`;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "div",
     {
       ref: (el) => {
@@ -2913,19 +2952,19 @@ function BogoBundle(props) {
       role: "region",
       "aria-label": bundle.title,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "lb-bundle-header", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "lb-bundle-header__content", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h3", { className: "lb-bundle-title", children: bundle.title }),
-          bundle.description && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "lb-bundle-subtitle", children: bundle.description })
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "lb-bundle-header", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "lb-bundle-header__content", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h3", { className: "lb-bundle-title", children: bundle.title }),
+          bundle.description && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "lb-bundle-subtitle", children: bundle.description })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           BundleCountdown,
           {
             endsAt: bundle.endsAt,
             widgetConfig: bundle.widgetConfig
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "lb-bundle__products", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "lb-bundle__products", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             BogoProductRow,
             {
               side: "buy",
@@ -2937,11 +2976,11 @@ function BogoBundle(props) {
               onVariantChange: handleVariantChange
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "lb-bogo__plus", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { width: "12", height: "12", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "9", y1: "3", x2: "9", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "3", y1: "9", x2: "15", y2: "9", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "lb-bogo__plus", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("svg", { width: "12", height: "12", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("line", { x1: "9", y1: "3", x2: "9", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("line", { x1: "3", y1: "9", x2: "15", y2: "9", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
           ] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             BogoProductRow,
             {
               side: "get",
@@ -2954,29 +2993,29 @@ function BogoBundle(props) {
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "lb-bundle-divider" }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "lb-bundle-summary", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "lb-bundle-summary__text", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "lb-bundle-summary__label", children: "Bundle total" }),
-            showSavings && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("p", { className: "lb-bundle-savings-line", "data-savings-bar": true, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "lb-bundle-divider" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "lb-bundle-summary", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "lb-bundle-summary__text", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "lb-bundle-summary__label", children: "Bundle total" }),
+            showSavings && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("p", { className: "lb-bundle-savings-line", "data-savings-bar": true, children: [
               "You save",
               " ",
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { "data-savings-amount": true, children: (0, import_core12.formatMoney)(savings, currency) }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { "data-savings-amount": true, children: (0, import_core12.formatMoney)(savings, currency) }),
               " ",
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { "data-savings-percent": true, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { "data-savings-percent": true, children: [
                 "(",
                 savingsPercent,
                 "%)"
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "lb-bundle-summary__prices", children: [
-            showCompare && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "lb-bundle-compare-price", "data-compare-price": true, children: (0, import_core12.formatMoney)(comparePrice, currency) }),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "lb-bundle-sale-price", "data-sale-price": true, children: (0, import_core12.formatMoney)(salePrice, currency) })
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "lb-bundle-summary__prices", children: [
+            showCompare && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "lb-bundle-compare-price", "data-compare-price": true, children: (0, import_core12.formatMoney)(comparePrice, currency) }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "lb-bundle-sale-price", "data-sale-price": true, children: (0, import_core12.formatMoney)(salePrice, currency) })
           ] })
         ] }),
-        cartError && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        cartError && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "button",
           {
             className: "lb-bundle__cta",
@@ -3015,8 +3054,8 @@ function BogoProductRow({ side, product, quantity, percent, badge, currency, onV
     currency
   ) : null;
   const thumbImage = displayVariant?.image ?? product.featuredImage;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "lb-bundle-product-row", part: "product", "data-bogo-role": side, children: [
-    thumbImage && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "lb-bundle-product-row", part: "product", "data-bogo-role": side, children: [
+    thumbImage ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "img",
       {
         src: thumbImage.url,
@@ -3026,12 +3065,12 @@ function BogoProductRow({ side, product, quantity, percent, badge, currency, onV
         width: thumbImage.width ?? void 0,
         height: thumbImage.height ?? void 0
       }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "lb-bundle__product-info", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "lb-bundle__product-title", children: product.title }),
-      !showPicker && displayVariant && variants.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "lb-bundle-variant-badge", children: displayVariant.title }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "lb-bundle-product-prices", children: [
-        compareAt && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    ) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ThumbnailPlaceholder, { className: "lb-bundle__product-image" }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "lb-bundle__product-info", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "lb-bundle__product-title", children: product.title }),
+      !showPicker && displayVariant && variants.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "lb-bundle-variant-badge", children: displayVariant.title }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "lb-bundle-product-prices", children: [
+        compareAt && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "span",
           {
             className: "lb-bundle-product-compare-price",
@@ -3039,13 +3078,13 @@ function BogoProductRow({ side, product, quantity, percent, badge, currency, onV
             children: compareAt
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "lb-bundle__product-price", "data-product-price": true, children: priceText }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "lb-bundle-qty-inline", "data-qty-inline": true, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "lb-bundle__product-price", "data-product-price": true, children: priceText }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "lb-bundle-qty-inline", "data-qty-inline": true, children: [
           "\xD7",
           quantity
         ] })
       ] }),
-      unitPriceText && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      unitPriceText && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         "span",
         {
           className: "lb-bundle__product-unit-price",
@@ -3053,13 +3092,13 @@ function BogoProductRow({ side, product, quantity, percent, badge, currency, onV
           children: unitPriceText
         }
       ),
-      showPicker && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "lb-bundle__product-variant-pickers", children: optionNames.map((optionName, optionIndex) => {
+      showPicker && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "lb-bundle__product-variant-pickers", children: optionNames.map((optionName, optionIndex) => {
         const dropdownOptions = optionsFor(optionIndex).map((o) => ({
           value: o.value,
           label: o.value,
           disabled: o.disabled
         }));
-        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           VariantDropdown,
           {
             options: dropdownOptions,
@@ -3071,7 +3110,7 @@ function BogoProductRow({ side, product, quantity, percent, badge, currency, onV
         );
       }) })
     ] }),
-    badge && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "lb-bogo__badge", children: badge })
+    badge && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "lb-bogo__badge", children: badge })
   ] });
 }
 
@@ -3083,7 +3122,7 @@ var import_core14 = require("@lime-bundles/core");
 var import_react15 = require("react");
 var import_react_dom2 = require("react-dom");
 var import_core13 = require("@lime-bundles/core");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function ruleFor3(bundle, productId, variantId) {
   if (variantId) {
     const vRule = bundle.variantRules[variantId];
@@ -3284,7 +3323,7 @@ function MultiStepPicker({
     // inside carries the interactive role + focus trap. So the static-element
     // interaction lint does not apply to this backdrop.
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "div",
       {
         ref: (el) => {
@@ -3296,7 +3335,7 @@ function MultiStepPicker({
         "data-bundle-gid": bundle.id,
         onMouseDown: onOverlayMouseDown,
         onMouseUp: onOverlayMouseUp,
-        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
           "div",
           {
             ref: dialogRef,
@@ -3306,10 +3345,10 @@ function MultiStepPicker({
             "aria-labelledby": titleId,
             tabIndex: -1,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "lb-mix-match__modal-header", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "lb-mix-match__modal-header-top", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "lb-mix-match__modal-heading", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "lb-mix-match__modal-header", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "lb-mix-match__modal-header-top", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "lb-mix-match__modal-heading", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                       "h4",
                       {
                         className: "lb-mix-match__modal-title",
@@ -3319,9 +3358,9 @@ function MultiStepPicker({
                         children: "Add to your bundle"
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "lb-mix-match__modal-subtitle", "data-modal-subtitle": true, children: subtitle })
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "lb-mix-match__modal-subtitle", "data-modal-subtitle": true, children: subtitle })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                     "button",
                     {
                       ref: closeBtnRef,
@@ -3330,16 +3369,16 @@ function MultiStepPicker({
                       "data-modal-close": true,
                       "aria-label": "Close",
                       onClick: onClose,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CloseIcon3, {})
+                      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CloseIcon3, {})
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                   "div",
                   {
                     className: "lb-mix-match__progress lb-mix-match__modal-progress",
                     "data-progress": true,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                       "div",
                       {
                         className: "lb-mix-match__progress-segments",
@@ -3348,7 +3387,7 @@ function MultiStepPicker({
                         "aria-valuenow": shownUnits,
                         "aria-valuemin": 0,
                         "aria-valuemax": stepMin,
-                        children: Array.from({ length: stepMin }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                        children: Array.from({ length: stepMin }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                           "span",
                           {
                             className: `lb-mix-match__progress-segment${i < shownUnits ? " lb-mix-match__progress-segment--filled" : ""}`,
@@ -3361,8 +3400,8 @@ function MultiStepPicker({
                   }
                 )
               ] }),
-              wc.showSearch && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "lb-mix-match__modal-search", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              wc.showSearch && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "lb-mix-match__modal-search", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                   "input",
                   {
                     type: "text",
@@ -3376,7 +3415,7 @@ function MultiStepPicker({
                     onChange: (e) => setQuery(e.target.value)
                   }
                 ),
-                query.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                query.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                   "button",
                   {
                     type: "button",
@@ -3384,11 +3423,11 @@ function MultiStepPicker({
                     "data-modal-search-clear": true,
                     "aria-label": "Clear search",
                     onClick: () => setQuery(""),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SearchClearIcon2, {})
+                    children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SearchClearIcon2, {})
                   }
                 )
               ] }),
-              showFilters && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              showFilters && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                 "div",
                 {
                   className: "lb-mix-match__filters",
@@ -3397,7 +3436,7 @@ function MultiStepPicker({
                   "aria-label": "Filter by product type",
                   children: [FILTERS_ALL2, ...productTypes].map((value) => {
                     const isActive = value === activeType;
-                    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                       "button",
                       {
                         type: "button",
@@ -3412,7 +3451,7 @@ function MultiStepPicker({
                   })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "lb-mix-match__modal-list", "data-modal-list": true, ref: listRef, children: filtered.map((ep) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "lb-mix-match__modal-list", "data-modal-list": true, ref: listRef, children: filtered.map((ep) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                 MultiStepPickerRow,
                 {
                   bundle,
@@ -3430,10 +3469,10 @@ function MultiStepPicker({
                 },
                 `${stepIndex}:${ep.product.id}`
               )) }),
-              showEmpty && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "lb-mix-match__modal-empty", "data-modal-empty": true, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { children: "No products match your search" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { "data-modal-live": true, "aria-live": "polite", className: "lb-visually-hidden", children: announcement || (query.trim() ? `${filtered.length} products shown` : "") }),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "lb-mix-match__modal-footer lb-multi-step__modal-footer", children: [
-                stepIndex > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              showEmpty && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "lb-mix-match__modal-empty", "data-modal-empty": true, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { children: "No products match your search" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { "data-modal-live": true, "aria-live": "polite", className: "lb-visually-hidden", children: announcement || (query.trim() ? `${filtered.length} products shown` : "") }),
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "lb-mix-match__modal-footer lb-multi-step__modal-footer", children: [
+                stepIndex > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                   "button",
                   {
                     type: "button",
@@ -3443,7 +3482,7 @@ function MultiStepPicker({
                     children: "Back"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                   "span",
                   {
                     className: "lb-mix-match__modal-footer-count",
@@ -3452,7 +3491,7 @@ function MultiStepPicker({
                     children: `${shownUnits} of ${stepMin} added`
                   }
                 ),
-                !isLastStep && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                !isLastStep && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                   "button",
                   {
                     type: "button",
@@ -3465,7 +3504,7 @@ function MultiStepPicker({
                     children: "Next"
                   }
                 ),
-                isLastStep && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                isLastStep && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                   "button",
                   {
                     type: "button",
@@ -3608,7 +3647,7 @@ function MultiStepPickerRow({
   }
   const priceCents = parseFloat(currentVariant.price.amount);
   const compareCents = currentVariant.compareAtPrice ? parseFloat(currentVariant.compareAtPrice.amount) : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "div",
     {
       className: `lb-mix-match__modal-product${isOos ? " lb-mix-match__modal-product--sold-out" : ""}${variantInStep ? " lb-mix-match__modal-product--in-bundle" : ""}`,
@@ -3617,21 +3656,27 @@ function MultiStepPickerRow({
       "data-type": product.productType ?? "",
       "aria-disabled": isOos || void 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "lb-mix-match__modal-product-thumb", children: [
-          thumbImage && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-            "img",
-            {
-              src: thumbImage.url,
-              alt: thumbImage.altText ?? product.title,
-              loading: "lazy",
-              width: thumbImage.width ?? void 0,
-              height: thumbImage.height ?? void 0
-            }
-          ),
-          variantInStep && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "lb-mix-match__modal-added-badge", children: "Added" })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "lb-mix-match__modal-product-info", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "lb-mix-match__modal-product-title", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+          "div",
+          {
+            className: thumbImage ? "lb-mix-match__modal-product-thumb" : placeholderBoxClass("lb-mix-match__modal-product-thumb"),
+            children: [
+              thumbImage ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                "img",
+                {
+                  src: thumbImage.url,
+                  alt: thumbImage.altText ?? product.title,
+                  loading: "lazy",
+                  width: thumbImage.width ?? void 0,
+                  height: thumbImage.height ?? void 0
+                }
+              ) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(PlaceholderMark, {}),
+              variantInStep && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "lb-mix-match__modal-added-badge", children: "Added" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "lb-mix-match__modal-product-info", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "lb-mix-match__modal-product-title", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
             "a",
             {
               href: `/products/${product.handle}`,
@@ -3640,24 +3685,24 @@ function MultiStepPickerRow({
               children: product.title
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("p", { className: "lb-mix-match__modal-product-price", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { "data-row-price-sale": true, children: (0, import_core13.formatMoney)(priceCents, currency) }),
-            compareCents !== null && compareCents > priceCents && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("s", { className: "lb-mix-match__modal-product-compare", "data-row-compare": true, children: (0, import_core13.formatMoney)(compareCents, currency) })
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("p", { className: "lb-mix-match__modal-product-price", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { "data-row-price-sale": true, children: (0, import_core13.formatMoney)(priceCents, currency) }),
+            compareCents !== null && compareCents > priceCents && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("s", { className: "lb-mix-match__modal-product-compare", "data-row-compare": true, children: (0, import_core13.formatMoney)(compareCents, currency) })
           ] }),
-          unitPriceText && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "lb-mix-match__modal-product-unit-price lb-bundle-product-unit-price", children: unitPriceText }),
-          showPicker && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "lb-bundle-variant-option-groups", children: optionNames.map((optionName, optionIndex) => {
+          unitPriceText && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "lb-mix-match__modal-product-unit-price lb-bundle-product-unit-price", children: unitPriceText }),
+          showPicker && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "lb-bundle-variant-option-groups", children: optionNames.map((optionName, optionIndex) => {
             const dropdownOptions = optionsFor(optionIndex).map((o) => ({
               value: o.value,
               label: o.value,
               disabled: o.disabled
             }));
-            return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+            return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
               "div",
               {
                 className: "lb-bundle-variant-option-group",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "lb-bundle-variant-option-label", children: optionName }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "lb-bundle-variant-option-label", children: optionName }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                     VariantDropdown,
                     {
                       className: "lb-mix-match__variant-select-dropdown",
@@ -3672,17 +3717,17 @@ function MultiStepPickerRow({
               optionName
             );
           }) }),
-          !showPicker && variants.length === 1 && currentVariant.title !== "Default Title" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "lb-mix-match__filled-variant", children: currentVariant.title }),
-          !isOos && needsMoreSpots && room > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "lb-mix-match__modal-needs-spots", children: vRule.min === 1 ? "Needs 1 spot" : `Needs ${vRule.min} spots` }),
-          isOos ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "lb-mix-match__modal-sold-out-label", children: "Sold out" }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "lb-mix-match__modal-product-actions", children: [
-            showStepper && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "lb-bundle-variant-option-group lb-mix-match__qty-stepper-group", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+          !showPicker && variants.length === 1 && currentVariant.title !== "Default Title" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "lb-mix-match__filled-variant", children: currentVariant.title }),
+          !isOos && needsMoreSpots && room > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "lb-mix-match__modal-needs-spots", children: vRule.min === 1 ? "Needs 1 spot" : `Needs ${vRule.min} spots` }),
+          isOos ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "lb-mix-match__modal-sold-out-label", children: "Sold out" }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "lb-mix-match__modal-product-actions", children: [
+            showStepper && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "lb-bundle-variant-option-group lb-mix-match__qty-stepper-group", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
               "div",
               {
                 className: "lb-mix-match__qty-stepper",
                 role: "group",
                 "aria-label": "Quantity",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                     "button",
                     {
                       type: "button",
@@ -3704,7 +3749,7 @@ function MultiStepPickerRow({
                       children: "\u2212"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                     "span",
                     {
                       className: "lb-mix-match__qty-stepper-value",
@@ -3713,7 +3758,7 @@ function MultiStepPickerRow({
                       children: shownQty
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                     "button",
                     {
                       type: "button",
@@ -3738,7 +3783,7 @@ function MultiStepPickerRow({
                 ]
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
               "button",
               {
                 type: "button",
@@ -3757,7 +3802,7 @@ function MultiStepPickerRow({
   );
 }
 function CloseIcon3() {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "svg",
     {
       width: "20",
@@ -3767,14 +3812,14 @@ function CloseIcon3() {
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("line", { x1: "5", y1: "5", x2: "15", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("line", { x1: "15", y1: "5", x2: "5", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: "5", y1: "5", x2: "15", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: "15", y1: "5", x2: "5", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
       ]
     }
   );
 }
 function SearchClearIcon2() {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     "svg",
     {
       width: "16",
@@ -3783,13 +3828,13 @@ function SearchClearIcon2() {
       fill: "currentColor",
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true",
-      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M14.348 5.652a.5.5 0 0 0-.707 0L10 9.293 6.36 5.652a.5.5 0 1 0-.708.707L9.293 10l-3.641 3.641a.5.5 0 0 0 .708.707L10 10.707l3.641 3.641a.5.5 0 0 0 .707-.707L10.707 10l3.641-3.641a.5.5 0 0 0 0-.707z" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M14.348 5.652a.5.5 0 0 0-.707 0L10 9.293 6.36 5.652a.5.5 0 1 0-.708.707L9.293 10l-3.641 3.641a.5.5 0 0 0 .708.707L10 10.707l3.641 3.641a.5.5 0 0 0 .707-.707L10.707 10l3.641-3.641a.5.5 0 0 0 0-.707z" })
     }
   );
 }
 
 // src/components/MultiStepBundle.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function ruleFor4(bundle, productId, variantId) {
   if (variantId) {
     const vRule = bundle.variantRules[variantId];
@@ -4088,9 +4133,9 @@ function MultiStepBundle(props) {
     }
   }, [bundle, selections, valid, onAddToCart, onError, trackAddToCart, totalQuantity, steps]);
   if (result.status === "loading") {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "lb-skeleton lb-skeleton--title" }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "lb-skeleton lb-skeleton--products" })
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "lb-skeleton lb-skeleton--title" }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "lb-skeleton lb-skeleton--products" })
     ] });
   }
   if (result.status === "error") return null;
@@ -4111,7 +4156,7 @@ function MultiStepBundle(props) {
   if (requiredBlocked) return null;
   const currency = bundle.products[0]?.priceRange.minVariantPrice.currencyCode ?? "USD";
   const ctaLabel = addingToCart ? "Adding..." : bundle.widgetConfig.cta.ctaText || "Add to cart";
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     "div",
     {
       ref: (el) => {
@@ -4123,19 +4168,19 @@ function MultiStepBundle(props) {
       "aria-label": bundle.title,
       "data-required-quantity": totalMin,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "lb-bundle-header", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "lb-bundle-header__content", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h3", { className: "lb-bundle-title", children: bundle.title }),
-          bundle.description && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "lb-bundle-subtitle", children: bundle.description })
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "lb-bundle-header", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "lb-bundle-header__content", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h3", { className: "lb-bundle-title", children: bundle.title }),
+          bundle.description && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "lb-bundle-subtitle", children: bundle.description })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           BundleCountdown,
           {
             endsAt: bundle.endsAt,
             widgetConfig: bundle.widgetConfig
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "lb-mix-match__progress", "data-progress": true, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "lb-mix-match__progress", "data-progress": true, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             "div",
             {
               className: "lb-mix-match__progress-segments",
@@ -4143,7 +4188,7 @@ function MultiStepBundle(props) {
               "aria-valuenow": completedSteps,
               "aria-valuemin": 0,
               "aria-valuemax": steps.length,
-              children: Array.from({ length: steps.length }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              children: Array.from({ length: steps.length }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                 "span",
                 {
                   className: `lb-mix-match__progress-segment${i < completedSteps ? " lb-mix-match__progress-segment--filled" : ""}`,
@@ -4153,8 +4198,8 @@ function MultiStepBundle(props) {
               ))
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "lb-mix-match__progress-labels", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "lb-mix-match__progress-labels", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
               "span",
               {
                 className: "lb-mix-match__progress-count",
@@ -4163,7 +4208,7 @@ function MultiStepBundle(props) {
                 children: `${completedSteps} of ${steps.length} steps completed`
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
               "span",
               {
                 className: "lb-mix-match__progress-remaining",
@@ -4174,8 +4219,8 @@ function MultiStepBundle(props) {
             )
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "lb-multi-step__groups", "data-step-groups": true, children: steps.map((step, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react16.Fragment, { children: [
-          i === firstUnsatisfied && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "lb-multi-step__groups", "data-step-groups": true, children: steps.map((step, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react16.Fragment, { children: [
+          i === firstUnsatisfied && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
             "button",
             {
               type: "button",
@@ -4184,28 +4229,28 @@ function MultiStepBundle(props) {
               "aria-label": `${anyPicks ? "Continue building" : "Choose your products"}: ${step.name}`,
               onClick: () => setPickerOpenAt(firstUnsatisfied),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                   "span",
                   {
                     className: "lb-mix-match__add-product-icon",
                     "aria-hidden": "true",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(PlusIcon2, {})
+                    children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PlusIcon2, {})
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "lb-multi-step__door-copy", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "lb-mix-match__add-product-label", children: anyPicks ? "Continue building" : "Choose your products" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "lb-multi-step__door-sub", children: anyPicks ? `${remainingSteps} ${remainingSteps === 1 ? "step" : "steps"} to go` : `${steps.length} quick ${steps.length === 1 ? "step" : "steps"}` })
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "lb-multi-step__door-copy", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "lb-mix-match__add-product-label", children: anyPicks ? "Continue building" : "Choose your products" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "lb-multi-step__door-sub", children: anyPicks ? `${remainingSteps} ${remainingSteps === 1 ? "step" : "steps"} to go` : `${steps.length} quick ${steps.length === 1 ? "step" : "steps"}` })
                 ] })
               ]
             }
           ),
-          (selections[i] ?? []).length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          (selections[i] ?? []).length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             "section",
             {
               className: "lb-multi-step__group",
               "data-step-group": i,
               "data-step-mode": "row",
-              children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                 "button",
                 {
                   type: "button",
@@ -4214,7 +4259,7 @@ function MultiStepBundle(props) {
                   "aria-label": `${step.minQuantity === 1 && step.maxQuantity === 1 ? "Choose a product" : "Choose products"}: ${step.name}`,
                   onClick: () => setPickerOpenAt(i),
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                       "span",
                       {
                         className: "lb-multi-step__step-ix",
@@ -4222,8 +4267,8 @@ function MultiStepBundle(props) {
                         children: i + 1
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "lb-multi-step__group-name", children: step.name }),
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "lb-multi-step__group-name", children: step.name }),
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                       "span",
                       {
                         className: `lb-multi-step__group-count${stepSatisfied(i) ? " lb-multi-step__group-count--met" : ""}`,
@@ -4235,16 +4280,16 @@ function MultiStepBundle(props) {
                 }
               )
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
             "section",
             {
               className: "lb-multi-step__group",
               "data-step-group": i,
               "data-step-mode": "open",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "lb-multi-step__group-heading", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "lb-multi-step__group-name", children: step.name }),
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "lb-multi-step__group-heading", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "lb-multi-step__group-name", children: step.name }),
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                     "span",
                     {
                       className: `lb-multi-step__group-count${stepSatisfied(i) ? " lb-multi-step__group-count--met" : ""}`,
@@ -4253,7 +4298,7 @@ function MultiStepBundle(props) {
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                   "div",
                   {
                     className: "lb-mix-match__slots lb-edge-fade lb-multi-step__group-slots",
@@ -4263,22 +4308,28 @@ function MultiStepBundle(props) {
                          title button provides the keyboard/AT path (its
                          activation bubbles here); × stops propagation. */
                       // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- keyboard path is the inner "Edit selection" title button whose activation bubbles to this handler
-                      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                         "div",
                         {
                           className: "lb-mix-match__slot lb-mix-match__slot--filled",
                           onClick: () => setPickerOpenAt(i),
                           children: [
-                            item.featuredImage && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "lb-bundle-thumbnail", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                              "img",
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                              "div",
                               {
-                                src: item.featuredImage,
-                                alt: item.title,
-                                loading: "lazy"
+                                className: item.featuredImage ? "lb-bundle-thumbnail" : placeholderBoxClass("lb-bundle-thumbnail"),
+                                children: item.featuredImage ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                                  "img",
+                                  {
+                                    src: item.featuredImage,
+                                    alt: item.title,
+                                    loading: "lazy"
+                                  }
+                                ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PlaceholderMark, {})
                               }
-                            ) }),
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "lb-mix-match__filled-info", children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                            ),
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "lb-mix-match__filled-info", children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                                 "button",
                                 {
                                   type: "button",
@@ -4287,15 +4338,15 @@ function MultiStepBundle(props) {
                                   children: item.title
                                 }
                               ),
-                              item.variantTitle && item.variantTitle !== "Default Title" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "lb-mix-match__filled-variant", children: item.variantTitle }),
-                              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "lb-mix-match__filled-price", children: [
-                                item.compareAtPrice !== null && item.compareAtPrice > item.price && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("s", { className: "lb-mix-match__filled-compare", children: (0, import_core14.formatMoney)(item.compareAtPrice, currency) }),
-                                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "lb-bundle-product-price", children: (0, import_core14.formatMoney)(item.price, currency) }),
-                                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "lb-bundle-qty-inline", children: `\xD7${item.quantity}` })
+                              item.variantTitle && item.variantTitle !== "Default Title" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "lb-mix-match__filled-variant", children: item.variantTitle }),
+                              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "lb-mix-match__filled-price", children: [
+                                item.compareAtPrice !== null && item.compareAtPrice > item.price && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("s", { className: "lb-mix-match__filled-compare", children: (0, import_core14.formatMoney)(item.compareAtPrice, currency) }),
+                                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "lb-bundle-product-price", children: (0, import_core14.formatMoney)(item.price, currency) }),
+                                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "lb-bundle-qty-inline", children: `\xD7${item.quantity}` })
                               ] }),
-                              item.unitPrice && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "lb-bundle-product-unit-price", children: item.unitPrice })
+                              item.unitPrice && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "lb-bundle-product-unit-price", children: item.unitPrice })
                             ] }),
-                            canRemoveItem2(bundle, selections, item) ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                            canRemoveItem2(bundle, selections, item) ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                               "button",
                               {
                                 type: "button",
@@ -4305,13 +4356,13 @@ function MultiStepBundle(props) {
                                   e.stopPropagation();
                                   removeSlot(i, index);
                                 },
-                                children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CloseIcon4, {})
+                                children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CloseIcon4, {})
                               }
                             ) : (
                               /* Required pick at its floor — quiet state chip instead
                                  of the ×; removal returns once another slot covers
                                  the product's minimum (variant swap flow). */
-                              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "lb-mix-match__slot-required", children: "Required" })
+                              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "lb-mix-match__slot-required", children: "Required" })
                             )
                           ]
                         },
@@ -4324,29 +4375,29 @@ function MultiStepBundle(props) {
             }
           )
         ] }, i)) }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "lb-bundle-divider" }),
-        allSatisfied && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "lb-bundle-summary", "data-pricing-section": true, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "lb-bundle-summary__text", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "lb-bundle-summary__label", children: "Bundle total" }),
-            bundle.widgetConfig.savingsBar.visible && summary.savings > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("p", { className: "lb-bundle-savings-line", "data-savings-bar": true, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "lb-bundle-divider" }),
+        allSatisfied && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "lb-bundle-summary", "data-pricing-section": true, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "lb-bundle-summary__text", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "lb-bundle-summary__label", children: "Bundle total" }),
+            bundle.widgetConfig.savingsBar.visible && summary.savings > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("p", { className: "lb-bundle-savings-line", "data-savings-bar": true, children: [
               "You save",
               " ",
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { "data-savings-amount": true, children: (0, import_core14.formatMoney)(summary.savings, currency) }),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { "data-savings-amount": true, children: (0, import_core14.formatMoney)(summary.savings, currency) }),
               " ",
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { "data-savings-percent": true, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { "data-savings-percent": true, children: [
                 "(",
                 summary.savingsPercent,
                 "%)"
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "lb-bundle-summary__prices", children: [
-            bundle.widgetConfig.pricing.showComparePrice && summary.savings > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "lb-bundle-compare-price", "data-compare-price": true, children: (0, import_core14.formatMoney)(summary.comparePrice, currency) }),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "lb-bundle-sale-price", "data-sale-price": true, children: (0, import_core14.formatMoney)(summary.salePrice, currency) })
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "lb-bundle-summary__prices", children: [
+            bundle.widgetConfig.pricing.showComparePrice && summary.savings > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "lb-bundle-compare-price", "data-compare-price": true, children: (0, import_core14.formatMoney)(summary.comparePrice, currency) }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "lb-bundle-sale-price", "data-sale-price": true, children: (0, import_core14.formatMoney)(summary.salePrice, currency) })
           ] })
         ] }),
-        cartError && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        cartError && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           "button",
           {
             className: "lb-bundle__cta",
@@ -4356,7 +4407,7 @@ function MultiStepBundle(props) {
             children: ctaLabel
           }
         ),
-        pickerOpenAt !== null && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        pickerOpenAt !== null && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           MultiStepPicker,
           {
             bundle,
@@ -4391,7 +4442,7 @@ function stepHasInStockProduct(bundle, stepIndex) {
   });
 }
 function PlusIcon2() {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     "svg",
     {
       width: "18",
@@ -4401,14 +4452,14 @@ function PlusIcon2() {
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: "9", y1: "3", x2: "9", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: "3", y1: "9", x2: "15", y2: "9", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("line", { x1: "9", y1: "3", x2: "9", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("line", { x1: "3", y1: "9", x2: "15", y2: "9", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
       ]
     }
   );
 }
 function CloseIcon4() {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     "svg",
     {
       width: "16",
@@ -4418,8 +4469,8 @@ function CloseIcon4() {
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: "5", y1: "5", x2: "15", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: "15", y1: "5", x2: "5", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("line", { x1: "5", y1: "5", x2: "15", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("line", { x1: "15", y1: "5", x2: "5", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
       ]
     }
   );
@@ -4505,6 +4556,7 @@ var import_core17 = require("@lime-bundles/core");
   VolumeBundle,
   WIDGET_CONFIG_DEFAULTS,
   applyWidgetConfigVars,
+  bundleSaleCents,
   calculateDiscount,
   calculateTierSavings,
   computeBundleSaleCents,