@lime-bundles/react 6.2.0 → 7.1.0

package/dist/index.cjs

@@ -20,58 +20,55 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  BUNDLES_FOR_PRODUCT_QUERY: () => import_core18.BUNDLES_FOR_PRODUCT_QUERY,
-  BUNDLE_METAOBJECT_QUERY: () => import_core18.BUNDLE_METAOBJECT_QUERY,
+  BUNDLES_FOR_PRODUCT_QUERY: () => import_core17.BUNDLES_FOR_PRODUCT_QUERY,
+  BUNDLE_METAOBJECT_QUERY: () => import_core17.BUNDLE_METAOBJECT_QUERY,
   BogoBundle: () => BogoBundle,
   BundleCountdown: () => BundleCountdown,
-  BundleParseError: () => import_core17.BundleParseError,
-  DEFAULT_OUT_OF_STOCK_BEHAVIOR: () => import_core18.DEFAULT_OUT_OF_STOCK_BEHAVIOR,
+  BundleParseError: () => import_core16.BundleParseError,
   FixedBundle: () => FixedBundle,
   MixMatchBundle: () => MixMatchBundle,
   MultiStepBundle: () => MultiStepBundle,
-  SHOP_SETTINGS_QUERY: () => import_core18.SHOP_SETTINGS_QUERY,
-  StorefrontApiError: () => import_core17.StorefrontApiError,
+  SHOP_SETTINGS_QUERY: () => import_core17.SHOP_SETTINGS_QUERY,
+  StorefrontApiError: () => import_core16.StorefrontApiError,
   VariantDropdown: () => VariantDropdown,
   VolumeBundle: () => VolumeBundle,
-  WIDGET_CONFIG_DEFAULTS: () => import_core18.WIDGET_CONFIG_DEFAULTS,
-  applyWidgetConfigVars: () => import_core18.applyWidgetConfigVars,
-  calculateDiscount: () => import_core18.calculateDiscount,
-  calculateTierSavings: () => import_core18.calculateTierSavings,
-  computeBundleSaleCents: () => import_core18.computeBundleSaleCents,
-  computeFixedPricing: () => import_core18.computeFixedPricing,
-  createStorefrontClient: () => import_core18.createStorefrontClient,
+  WIDGET_CONFIG_DEFAULTS: () => import_core17.WIDGET_CONFIG_DEFAULTS,
+  applyWidgetConfigVars: () => import_core17.applyWidgetConfigVars,
+  calculateDiscount: () => import_core17.calculateDiscount,
+  calculateTierSavings: () => import_core17.calculateTierSavings,
+  computeBundleSaleCents: () => import_core17.computeBundleSaleCents,
+  computeFixedPricing: () => import_core17.computeFixedPricing,
+  createStorefrontClient: () => import_core17.createStorefrontClient,
   fetchBundleData: () => fetchBundleData,
-  fetchBundlesForProduct: () => import_core18.fetchBundlesForProduct,
+  fetchBundlesForProduct: () => import_core17.fetchBundlesForProduct,
   fetchShopCustomCss: () => fetchShopCustomCss,
   fetchShopSettings: () => fetchShopSettings,
   fetchShopSettingsOrDefault: () => fetchShopSettingsOrDefault,
-  formatCents: () => import_core18.formatCents,
-  formatCountdown: () => import_core18.formatCountdown,
-  formatMoney: () => import_core18.formatMoney,
-  formatUnitPrice: () => import_core18.formatUnitPrice,
-  getActiveTier: () => import_core18.getActiveTier,
-  injectCustomCss: () => import_core18.injectCustomCss,
-  mergeWidgetConfig: () => import_core18.mergeWidgetConfig,
-  observeImpression: () => import_core18.observeImpression,
-  parseCents: () => import_core18.parseCents,
-  parseMetaobjectBundle: () => import_core18.parseMetaobjectBundle,
-  parseMetaobjectBundleStrict: () => import_core18.parseMetaobjectBundleStrict,
-  parseOutOfStockBehavior: () => import_core18.parseOutOfStockBehavior,
-  percentageDiscountUnit: () => import_core18.percentageDiscountUnit,
-  productsForStep: () => import_core18.productsForStep,
-  reportAddToCart: () => import_core18.reportAddToCart,
-  reportImpression: () => import_core18.reportImpression,
-  sanitizeCustomCss: () => import_core18.sanitizeCustomCss,
-  stepHeadroom: () => import_core18.stepHeadroom,
-  thumbnailRatioVars: () => import_core18.thumbnailRatioVars,
-  transformImageUrl: () => import_core18.transformImageUrl,
+  formatCents: () => import_core17.formatCents,
+  formatCountdown: () => import_core17.formatCountdown,
+  formatMoney: () => import_core17.formatMoney,
+  formatUnitPrice: () => import_core17.formatUnitPrice,
+  getActiveTier: () => import_core17.getActiveTier,
+  injectCustomCss: () => import_core17.injectCustomCss,
+  mergeWidgetConfig: () => import_core17.mergeWidgetConfig,
+  observeImpression: () => import_core17.observeImpression,
+  parseCents: () => import_core17.parseCents,
+  parseMetaobjectBundle: () => import_core17.parseMetaobjectBundle,
+  parseMetaobjectBundleStrict: () => import_core17.parseMetaobjectBundleStrict,
+  percentageDiscountUnit: () => import_core17.percentageDiscountUnit,
+  productsForStep: () => import_core17.productsForStep,
+  reportAddToCart: () => import_core17.reportAddToCart,
+  reportImpression: () => import_core17.reportImpression,
+  sanitizeCustomCss: () => import_core17.sanitizeCustomCss,
+  stepHeadroom: () => import_core17.stepHeadroom,
+  thumbnailRatioVars: () => import_core17.thumbnailRatioVars,
+  transformImageUrl: () => import_core17.transformImageUrl,
   useAnalytics: () => useAnalytics,
   useBundleData: () => useBundleData,
   useBundlesForProduct: () => useBundlesForProduct,
-  useShopSettings: () => useShopSettings,
   useVariantSelection: () => useVariantSelection,
   useWidgetConfigVars: () => useWidgetConfigVars,
-  validateQuantity: () => import_core18.validateQuantity
+  validateQuantity: () => import_core17.validateQuantity
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -141,8 +138,7 @@ async function fetchBundleDataWithWarnings(options) {
 // src/fetchShopSettings.ts
 var import_core2 = require("@lime-bundles/core");
 var FALLBACK = {
-  customCss: null,
-  outOfStockBehavior: import_core2.DEFAULT_OUT_OF_STOCK_BEHAVIOR
+  customCss: null
 };
 var cache = /* @__PURE__ */ new Map();
 async function fetchShopSettings(options) {
@@ -160,10 +156,7 @@ async function fetchShopSettings(options) {
       { signal: options.signal }
     );
     return {
-      customCss: data.shop?.customCss?.value ?? null,
-      outOfStockBehavior: (0, import_core2.parseOutOfStockBehavior)(
-        data.shop?.outOfStockBehavior?.value
-      )
+      customCss: data.shop?.customCss?.value ?? null
     };
   })();
   cache.set(options.shopDomain, promise);
@@ -317,19 +310,25 @@ function useWidgetConfigVars(config) {
 var import_react4 = require("react");
 var import_core6 = require("@lime-bundles/core");
 var { findVariantByOptions, isOptionValueAvailable, toPickerVariant } = import_core6.variants;
-function defaultInitial(variants) {
-  return variants.find((v) => v.availableForSale) ?? variants[0] ?? null;
-}
 function useVariantSelection({
   variants,
   optionNames,
   initialVariant,
-  optionValuesByPosition
+  optionValuesByPosition,
+  requiredQtyFor
 }) {
-  const seed = (0, import_react4.useMemo)(
-    () => initialVariant ?? defaultInitial(variants),
-    [initialVariant, variants]
+  const pickerVariants = (0, import_react4.useMemo)(
+    () => variants.map((v) => toPickerVariant(v, requiredQtyFor?.(v.id))),
+    [variants, requiredQtyFor]
   );
+  const seed = (0, import_react4.useMemo)(() => {
+    if (initialVariant) return initialVariant;
+    const covered = pickerVariants.find((p) => p.available);
+    if (covered) {
+      return variants.find((v) => v.id === covered.id) ?? null;
+    }
+    return variants.find((v) => v.availableForSale) ?? variants[0] ?? null;
+  }, [initialVariant, variants, pickerVariants]);
   const [selectedValues, setSelectedValues] = (0, import_react4.useState)(
     () => seed ? seed.selectedOptions.map((o) => o.value) : optionNames.map(() => "")
   );
@@ -337,10 +336,6 @@ function useVariantSelection({
     if (!seed) return;
     setSelectedValues(seed.selectedOptions.map((o) => o.value));
   }, [seed?.id]);
-  const pickerVariants = (0, import_react4.useMemo)(
-    () => variants.map((v) => toPickerVariant(v)),
-    [variants]
-  );
   const selectedVariant = (0, import_react4.useMemo)(() => {
     if (selectedValues.length !== optionNames.length) return null;
     const match = findVariantByOptions(pickerVariants, selectedValues);
@@ -968,7 +963,11 @@ function FixedProductRow({ bundle, product, currency, isOos, onVariantChange })
   const showPicker = variants.length > 1 && optionNames.length > 0;
   const { selectedValues, selectedVariant, setOptionValue, optionsFor } = useVariantSelection({
     variants,
-    optionNames
+    optionNames,
+    // Quantity-aware dropdown: a variant that can't cover this row's
+    // bundle quantity greys out instead of walking the shopper into a
+    // cart Shopify caps at add time.
+    requiredQtyFor: (variantId) => (0, import_core8.resolveBundleQty)(bundle, product.id, variantId)
   });
   (0, import_react8.useEffect)(() => {
     onVariantChange(product.id, selectedVariant ?? null);
@@ -1063,41 +1062,16 @@ function FixedProductRow({ bundle, product, currency, isOos, onVariantChange })
 }
 
 // src/components/MixMatchBundle.tsx
-var import_react13 = require("react");
-var import_core11 = require("@lime-bundles/core");
-
-// src/hooks/useShopSettings.ts
-var import_react9 = require("react");
-var import_core9 = require("@lime-bundles/core");
-function useShopSettings(options) {
-  const [outOfStockBehavior, setOutOfStockBehavior] = (0, import_react9.useState)(import_core9.DEFAULT_OUT_OF_STOCK_BEHAVIOR);
-  const { shopDomain, storefrontAccessToken } = options;
-  (0, import_react9.useEffect)(() => {
-    const controller = new AbortController();
-    let active = true;
-    fetchShopSettingsOrDefault({
-      shopDomain,
-      storefrontAccessToken,
-      signal: controller.signal
-    }).then((settings) => {
-      if (!active || controller.signal.aborted) return;
-      setOutOfStockBehavior(settings.outOfStockBehavior);
-    });
-    return () => {
-      active = false;
-      controller.abort();
-    };
-  }, [shopDomain, storefrontAccessToken]);
-  return { outOfStockBehavior };
-}
+var import_react12 = require("react");
+var import_core10 = require("@lime-bundles/core");
 
 // src/components/MixMatchPicker.tsx
-var import_react12 = require("react");
+var import_react11 = require("react");
 var import_react_dom = require("react-dom");
-var import_core10 = require("@lime-bundles/core");
+var import_core9 = require("@lime-bundles/core");
 
 // src/hooks/useScrollLock.ts
-var import_react10 = require("react");
+var import_react9 = require("react");
 var lockCount = 0;
 var savedY = 0;
 function lock() {
@@ -1126,7 +1100,7 @@ function unlock() {
   window.scrollTo(0, savedY);
 }
 function useScrollLock(active) {
-  (0, import_react10.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (!active) return;
     lock();
     return unlock;
@@ -1134,7 +1108,7 @@ function useScrollLock(active) {
 }
 
 // src/hooks/useFocusTrap.ts
-var import_react11 = require("react");
+var import_react10 = require("react");
 var FOCUSABLE_SELECTOR = [
   "a[href]",
   "button:not([disabled])",
@@ -1157,14 +1131,16 @@ function useFocusTrap({
   active,
   containerRef,
   onEscape,
+  initialFocusRef,
   returnFocusRef
 }) {
-  const previouslyFocused = (0, import_react11.useRef)(null);
-  (0, import_react11.useEffect)(() => {
+  const previouslyFocused = (0, import_react10.useRef)(null);
+  (0, import_react10.useEffect)(() => {
     if (!active) return;
     const container = containerRef.current;
     previouslyFocused.current = document.activeElement ?? null;
-    container?.focus();
+    const initial = initialFocusRef?.current ?? container;
+    initial?.focus();
     function onKeyDown(e) {
       if (e.key === "Escape") {
         e.preventDefault();
@@ -1208,7 +1184,7 @@ function ruleFor(bundle, productId, variantId) {
     const vRule = bundle.variantRules[variantId];
     if (vRule) return vRule;
   }
-  return bundle.productRules[productId] ?? import_core10.DEFAULT_PRODUCT_RULE;
+  return bundle.productRules[productId] ?? import_core9.DEFAULT_PRODUCT_RULE;
 }
 function variantRuleFor(bundle, variantId) {
   return variantId ? bundle.variantRules[variantId] : void 0;
@@ -1216,7 +1192,7 @@ function variantRuleFor(bundle, variantId) {
 function sanitizeId(gid) {
   return gid.replace(/[^a-zA-Z0-9_-]/g, "-");
 }
-function buildEligibleProducts(bundle, oosBehavior) {
+function buildEligibleProducts(bundle) {
   const result = [];
   const seen = /* @__PURE__ */ new Set();
   for (const product of bundle.products) {
@@ -1224,10 +1200,9 @@ function buildEligibleProducts(bundle, oosBehavior) {
     seen.add(product.id);
     const rule = ruleFor(bundle, product.id);
     const available = product.variants.nodes.filter(
-      (v) => (0, import_core10.isVariantFulfillable)(v, rule.min)
+      (v) => (0, import_core9.isVariantFulfillable)(v, rule.min)
     );
     const isOos = available.length === 0;
-    if (isOos && oosBehavior === "hide") continue;
     result.push({
       product,
       variants: product.variants.nodes,
@@ -1242,7 +1217,6 @@ function normalizeText(str) {
 }
 var FILTERS_ALL = "__all__";
 function MixMatchPicker({
-  outOfStockBehavior,
   bundle,
   currency,
   requiredQty,
@@ -1258,17 +1232,18 @@ function MixMatchPicker({
   styleVarsRef
 }) {
   const wc = bundle.widgetConfig;
-  const overlayRef = (0, import_react12.useRef)(null);
-  const dialogRef = (0, import_react12.useRef)(null);
-  const mouseDownTarget = (0, import_react12.useRef)(null);
-  const [open, setOpen] = (0, import_react12.useState)(false);
-  const [query, setQuery] = (0, import_react12.useState)("");
-  const [activeType, setActiveType] = (0, import_react12.useState)(FILTERS_ALL);
-  const eligible = (0, import_react12.useMemo)(
-    () => buildEligibleProducts(bundle, outOfStockBehavior),
-    [bundle, outOfStockBehavior]
+  const overlayRef = (0, import_react11.useRef)(null);
+  const dialogRef = (0, import_react11.useRef)(null);
+  const closeBtnRef = (0, import_react11.useRef)(null);
+  const mouseDownTarget = (0, import_react11.useRef)(null);
+  const [open, setOpen] = (0, import_react11.useState)(false);
+  const [query, setQuery] = (0, import_react11.useState)("");
+  const [activeType, setActiveType] = (0, import_react11.useState)(FILTERS_ALL);
+  const eligible = (0, import_react11.useMemo)(
+    () => buildEligibleProducts(bundle),
+    [bundle]
   );
-  const productTypes = (0, import_react12.useMemo)(() => {
+  const productTypes = (0, import_react11.useMemo)(() => {
     const types = [];
     const seen = /* @__PURE__ */ new Set();
     for (const ep of eligible) {
@@ -1284,7 +1259,7 @@ function MixMatchPicker({
   const totalUnits = selections.reduce((sum, s) => sum + s.quantity, 0);
   const atCapacity = totalUnits >= requiredQty;
   const shownUnits = Math.min(totalUnits, requiredQty);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     const id = requestAnimationFrame(() => setOpen(true));
     return () => cancelAnimationFrame(id);
   }, []);
@@ -1292,6 +1267,7 @@ function MixMatchPicker({
   useFocusTrap({
     active: true,
     containerRef: dialogRef,
+    initialFocusRef: closeBtnRef,
     onEscape: onClose
   });
   const remaining = Math.max(0, requiredQty - shownUnits);
@@ -1300,14 +1276,25 @@ function MixMatchPicker({
     const pct = bundle.discountConfig.discountType === "percentage" && bundle.discountConfig.discountValue ? Math.round(bundle.discountConfig.discountValue) : 0;
     return pct > 0 ? `Choose ${remaining} more to unlock ${pct}% off` : `Choose ${remaining} more to complete your bundle`;
   })();
-  const filtered = (0, import_react12.useMemo)(() => {
+  const [selectedAtOpen] = (0, import_react11.useState)(
+    () => new Set(selections.map((s) => s.productId))
+  );
+  const ordered = (0, import_react11.useMemo)(() => {
+    const front = [];
+    const back = [];
+    for (const ep of eligible) {
+      (selectedAtOpen.has(ep.product.id) ? back : front).push(ep);
+    }
+    return front.concat(back);
+  }, [eligible, selectedAtOpen]);
+  const filtered = (0, import_react11.useMemo)(() => {
     const nq = normalizeText(query.trim());
-    return eligible.filter((ep) => {
+    return ordered.filter((ep) => {
       const matchesQuery = !nq || normalizeText(ep.product.title).includes(nq);
       const matchesType = activeType === FILTERS_ALL || (ep.product.productType ?? "") === activeType;
       return matchesQuery && matchesType;
     });
-  }, [eligible, query, activeType]);
+  }, [ordered, query, activeType]);
   const showEmpty = filtered.length === 0 && query.trim().length > 0;
   function onOverlayMouseDown(e) {
     mouseDownTarget.current = e.target;
@@ -1356,6 +1343,7 @@ function MixMatchPicker({
                   /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                     "button",
                     {
+                      ref: closeBtnRef,
                       type: "button",
                       className: "lb-mix-match__modal-close",
                       "data-modal-close": true,
@@ -1510,16 +1498,16 @@ function MixMatchPickerRow({
 }) {
   const { product, variants, isOos } = eligible;
   const rule = ruleFor(bundle, product.id);
-  const optionNames = (0, import_react12.useMemo)(() => {
+  const optionNames = (0, import_react11.useMemo)(() => {
     const first = variants[0];
     return first ? first.selectedOptions.map((o) => o.name) : [];
   }, [variants]);
   const showPicker = variants.length > 1 && optionNames.length > 0;
   const { selectedValues, selectedVariant, setOptionValue, optionsFor } = useVariantSelection({ variants, optionNames });
-  const currentVariant = selectedVariant ?? variants.find((v) => (0, import_core10.isVariantFulfillable)(v, rule.min)) ?? eligible.firstAvailableVariant ?? variants[0] ?? null;
+  const currentVariant = selectedVariant ?? variants.find((v) => (0, import_core9.isVariantFulfillable)(v, rule.min)) ?? eligible.firstAvailableVariant ?? variants[0] ?? null;
   const vRule = ruleFor(bundle, product.id, currentVariant?.id);
   const variantMax = variantRuleFor(bundle, currentVariant?.id)?.max;
-  const alreadyInBundle = (0, import_react12.useMemo)(() => {
+  const alreadyInBundle = (0, import_react11.useMemo)(() => {
     if (!currentVariant) return 0;
     let sum = 0;
     for (const s of selections) {
@@ -1529,13 +1517,13 @@ function MixMatchPickerRow({
     }
     return sum;
   }, [selections, product.id, currentVariant]);
-  const committedSelection = (0, import_react12.useMemo)(
+  const committedSelection = (0, import_react11.useMemo)(
     () => currentVariant ? selections.find((s) => s.variantId === currentVariant.id) ?? null : null,
     [selections, currentVariant]
   );
   const variantInBundle = committedSelection !== null;
   const committedQty = committedSelection?.quantity ?? 0;
-  const productOtherUnits = (0, import_react12.useMemo)(() => {
+  const productOtherUnits = (0, import_react11.useMemo)(() => {
     if (!currentVariant) return 0;
     let sum = 0;
     for (const s of selections) {
@@ -1552,23 +1540,23 @@ function MixMatchPickerRow({
     committedQty + remainingUnits,
     variantMax ?? Infinity
   );
-  const cap = currentVariant ? (0, import_core10.maxAddableQuantity)(
+  const cap = currentVariant ? (0, import_core9.maxAddableQuantity)(
     currentVariant,
     spotCeiling,
     Math.max(0, alreadyInBundle - committedQty)
   ) : 0;
   const stepperMax = Math.max(vRule.min, cap);
-  const [qty, setQty] = (0, import_react12.useState)(vRule.min);
-  (0, import_react12.useEffect)(() => {
+  const [qty, setQty] = (0, import_react11.useState)(vRule.min);
+  (0, import_react11.useEffect)(() => {
     setQty((prev) => Math.max(vRule.min, Math.min(prev, stepperMax)));
   }, [stepperMax, vRule.min]);
   const currentVariantId = currentVariant?.id ?? null;
-  (0, import_react12.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (!variantInBundle) setQty(vRule.min);
   }, [variantInBundle, currentVariantId, vRule.min]);
   if (!currentVariant) return null;
   const thumbImage = currentVariant.image ?? product.featuredImage ?? null;
-  const unitPriceText = (0, import_core10.formatUnitPrice)(
+  const unitPriceText = (0, import_core9.formatUnitPrice)(
     currentVariant.unitPrice,
     currentVariant.unitPriceMeasurement,
     currency
@@ -1638,8 +1626,8 @@ function MixMatchPickerRow({
             }
           ) }),
           /* @__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_core10.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_core10.formatMoney)(compareCents, currency) })
+            /* @__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) })
           ] }),
           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) => {
@@ -1790,7 +1778,7 @@ function ruleFor2(bundle, productId, variantId) {
     const vRule = bundle.variantRules[variantId];
     if (vRule) return vRule;
   }
-  return bundle.productRules[productId] ?? import_core11.DEFAULT_PRODUCT_RULE;
+  return bundle.productRules[productId] ?? import_core10.DEFAULT_PRODUCT_RULE;
 }
 function variantRuleFor2(bundle, variantId) {
   return variantId ? bundle.variantRules[variantId] : void 0;
@@ -1825,10 +1813,6 @@ function MixMatchBundle(props) {
     storefrontAccessToken,
     bundleGid
   });
-  const { outOfStockBehavior } = useShopSettings({
-    shopDomain,
-    storefrontAccessToken
-  });
   const { elementRef, trackAddToCart } = useAnalytics({
     shopDomain,
     appUrl: appUrl ?? `https://${shopDomain}`,
@@ -1836,16 +1820,16 @@ function MixMatchBundle(props) {
     bundleType: "mix_match",
     enabled: analyticsEnabled !== false
   });
-  const [selections, setSelections] = (0, import_react13.useState)([]);
-  const [seededFor, setSeededFor] = (0, import_react13.useState)(null);
-  const [pickerOpen, setPickerOpen] = (0, import_react13.useState)(false);
-  const [addingToCart, setAddingToCart] = (0, import_react13.useState)(false);
-  const [cartError, setCartError] = (0, import_react13.useState)(null);
+  const [selections, setSelections] = (0, import_react12.useState)([]);
+  const [seededFor, setSeededFor] = (0, import_react12.useState)(null);
+  const [pickerOpen, setPickerOpen] = (0, import_react12.useState)(false);
+  const [addingToCart, setAddingToCart] = (0, import_react12.useState)(false);
+  const [cartError, setCartError] = (0, import_react12.useState)(null);
   const bundle = result.status === "success" && result.bundle.bundleType === "mix_match" ? result.bundle : null;
   const setConfigVarsRef = useWidgetConfigVars(bundle?.widgetConfig);
   const setModalConfigVarsRef = useWidgetConfigVars(bundle?.widgetConfig);
   const slotsEdgeFadeRef = useEdgeFade();
-  (0, import_react13.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (result.status === "error") {
       onError?.(result.error);
       return;
@@ -1858,7 +1842,7 @@ function MixMatchBundle(props) {
       );
     }
   }, [result, onError]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (!bundle || seededFor === bundle.id) return;
     setSeededFor(bundle.id);
     const seedCurrency = bundle.products[0]?.priceRange.minVariantPrice.currencyCode ?? "USD";
@@ -1871,7 +1855,7 @@ function MixMatchBundle(props) {
       featuredImage: variant.image?.url ?? product.featuredImage?.url ?? null,
       price: parseFloat(variant.price.amount),
       compareAtPrice: variant.compareAtPrice ? parseFloat(variant.compareAtPrice.amount) : null,
-      unitPrice: (0, import_core11.formatUnitPrice)(
+      unitPrice: (0, import_core10.formatUnitPrice)(
         variant.unitPrice,
         variant.unitPriceMeasurement,
         seedCurrency
@@ -1884,7 +1868,7 @@ function MixMatchBundle(props) {
       for (const variant2 of product.variants.nodes) {
         const vRule = bundle.variantRules[variant2.id];
         if (!vRule?.required) continue;
-        if (!(0, import_core11.isVariantFulfillable)(variant2, Math.max(1, vRule.min))) continue;
+        if (!(0, import_core10.isVariantFulfillable)(variant2, Math.max(1, vRule.min))) continue;
         seeds.push(pick(product, variant2, Math.max(1, vRule.min)));
         seededVariant = true;
       }
@@ -1892,7 +1876,7 @@ function MixMatchBundle(props) {
       const rule = bundle.productRules[product.id];
       if (!rule?.required) continue;
       const variant = product.variants.nodes.find(
-        (v) => (0, import_core11.isVariantFulfillable)(v, rule.min)
+        (v) => (0, import_core10.isVariantFulfillable)(v, rule.min)
       );
       if (!variant) continue;
       seeds.push(pick(product, variant, rule.min));
@@ -1901,7 +1885,7 @@ function MixMatchBundle(props) {
       const requiredUnits2 = bundle.minQuantity ?? 0;
       const qualifies = (p) => {
         const min = bundle.productRules[p.id]?.min ?? 1;
-        return min <= requiredUnits2 && p.variants.nodes.some((v) => (0, import_core11.isVariantFulfillable)(v, min));
+        return min <= requiredUnits2 && p.variants.nodes.some((v) => (0, import_core10.isVariantFulfillable)(v, min));
       };
       const seed = bundle.products.find(
         (p) => p.handle === productHandle && qualifies(p)
@@ -1909,7 +1893,7 @@ function MixMatchBundle(props) {
       if (seed) {
         const min = bundle.productRules[seed.id]?.min ?? 1;
         const variant = seed.variants.nodes.find(
-          (v) => (0, import_core11.isVariantFulfillable)(v, min)
+          (v) => (0, import_core10.isVariantFulfillable)(v, min)
         );
         if (variant) seeds.push(pick(seed, variant, min));
       }
@@ -1918,7 +1902,7 @@ function MixMatchBundle(props) {
   }, [bundle, seededFor, productHandle]);
   const showStepper = bundle?.widgetConfig.mixMatchShowQuantitySelector !== false;
   const requiredUnits = bundle?.minQuantity ?? 0;
-  const totalQuantity = (0, import_react13.useMemo)(
+  const totalQuantity = (0, import_react12.useMemo)(
     () => selections.reduce((sum, s) => sum + s.quantity, 0),
     [selections]
   );
@@ -1926,14 +1910,14 @@ function MixMatchBundle(props) {
   const valid = !!bundle && meetsMinUnits;
   const shownUnits = Math.min(totalQuantity, requiredUnits);
   const remaining = Math.max(0, requiredUnits - shownUnits);
-  const summary = (0, import_react13.useMemo)(() => {
+  const summary = (0, import_react12.useMemo)(() => {
     let comparePrice = 0;
     let salePrice = 0;
     for (const sel of selections) {
       if (sel.quantity <= 0) continue;
       comparePrice += sel.price * sel.quantity;
       if (bundle) {
-        salePrice += (0, import_core11.calculateDiscount)(
+        salePrice += (0, import_core10.calculateDiscount)(
           sel.price,
           bundle.discountConfig.discountType,
           bundle.discountConfig.discountValue
@@ -1944,7 +1928,7 @@ function MixMatchBundle(props) {
     const savingsPercent = comparePrice > 0 && savings > 0 ? Math.round(savings / comparePrice * 100) : 0;
     return { comparePrice, salePrice, savings, savingsPercent };
   }, [selections, bundle]);
-  const addSelection = (0, import_react13.useCallback)(
+  const addSelection = (0, import_react12.useCallback)(
     (item) => {
       setSelections((prev) => {
         const units = prev.reduce((sum, s) => sum + s.quantity, 0);
@@ -1955,7 +1939,7 @@ function MixMatchBundle(props) {
     },
     [requiredUnits]
   );
-  const updateQuantity = (0, import_react13.useCallback)(
+  const updateQuantity = (0, import_react12.useCallback)(
     (productId, variantId, quantity) => {
       setSelections((prev) => {
         const idx = prev.findIndex(
@@ -1978,7 +1962,7 @@ function MixMatchBundle(props) {
     },
     [requiredUnits]
   );
-  const swapSelection = (0, import_react13.useCallback)(
+  const swapSelection = (0, import_react12.useCallback)(
     (item) => {
       setSelections((prev) => {
         if (!bundle) return prev;
@@ -2010,7 +1994,7 @@ function MixMatchBundle(props) {
     },
     [bundle]
   );
-  const removeVariant = (0, import_react13.useCallback)(
+  const removeVariant = (0, import_react12.useCallback)(
     (variantId) => {
       setSelections((prev) => {
         const idx = prev.findIndex((s) => s.variantId === variantId);
@@ -2023,7 +2007,7 @@ function MixMatchBundle(props) {
     },
     [bundle]
   );
-  const removeSlot = (0, import_react13.useCallback)(
+  const removeSlot = (0, import_react12.useCallback)(
     (index) => {
       setSelections((prev) => {
         if (index < 0 || index >= prev.length) return prev;
@@ -2035,7 +2019,7 @@ function MixMatchBundle(props) {
     },
     [bundle]
   );
-  const handleAddToCart = (0, import_react13.useCallback)(async () => {
+  const handleAddToCart = (0, import_react12.useCallback)(async () => {
     if (!bundle || !valid) return;
     const grouped = /* @__PURE__ */ new Map();
     for (const sel of selections) {
@@ -2089,7 +2073,7 @@ function MixMatchBundle(props) {
       if (!rule.required) return false;
       const product = bundle.products.find((p) => p.id === pid);
       return !product?.variants.nodes.some(
-        (v) => (0, import_core11.isVariantFulfillable)(v, rule.min)
+        (v) => (0, import_core10.isVariantFulfillable)(v, rule.min)
       );
     }
   );
@@ -2189,8 +2173,8 @@ function MixMatchBundle(props) {
                       ),
                       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_core11.formatMoney)(item.compareAtPrice, currency) }),
-                        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "lb-bundle-product-price", children: (0, import_core11.formatMoney)(item.price, currency) }),
+                        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.unitPrice && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "lb-bundle-product-unit-price", children: item.unitPrice })
@@ -2240,7 +2224,7 @@ function MixMatchBundle(props) {
             bundle.widgetConfig.savingsBar.visible && summary.savings > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.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_core11.formatMoney)(summary.savings, currency) }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.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: [
                 "(",
@@ -2250,8 +2234,8 @@ function MixMatchBundle(props) {
             ] })
           ] }),
           /* @__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_core11.formatMoney)(summary.comparePrice, currency) }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "lb-bundle-sale-price", "data-sale-price": true, children: (0, import_core11.formatMoney)(summary.salePrice, currency) })
+            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) })
           ] })
         ] }),
         cartError && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
@@ -2268,7 +2252,6 @@ function MixMatchBundle(props) {
         pickerOpen && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           MixMatchPicker,
           {
-            outOfStockBehavior,
             bundle,
             currency,
             requiredQty: requiredUnits,
@@ -2299,7 +2282,7 @@ function countInStockProducts(bundle) {
     seen.add(product.id);
     const rule = ruleFor2(bundle, product.id);
     const fulfillable = product.variants.nodes.some(
-      (v) => (0, import_core11.isVariantFulfillable)(v, rule.min)
+      (v) => (0, import_core10.isVariantFulfillable)(v, rule.min)
     );
     if (fulfillable) count += 1;
   }
@@ -2341,8 +2324,8 @@ function CloseIcon2() {
 }
 
 // src/components/VolumeBundle.tsx
-var import_react14 = require("react");
-var import_core12 = require("@lime-bundles/core");
+var import_react13 = require("react");
+var import_core11 = require("@lime-bundles/core");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 function VolumeBundle(props) {
   const {
@@ -2353,7 +2336,8 @@ function VolumeBundle(props) {
     analyticsEnabled,
     onAddToCart,
     onError,
-    className
+    className,
+    productId
   } = props;
   const result = useBundleData({
     shopDomain,
@@ -2367,21 +2351,21 @@ function VolumeBundle(props) {
     bundleType: "volume",
     enabled: analyticsEnabled !== false
   });
-  const [quantity, setQuantity] = (0, import_react14.useState)(1);
-  const [addingToCart, setAddingToCart] = (0, import_react14.useState)(false);
-  const [cartError, setCartError] = (0, import_react14.useState)(null);
-  const [seededFor, setSeededFor] = (0, import_react14.useState)(null);
+  const [quantity, setQuantity] = (0, import_react13.useState)(1);
+  const [addingToCart, setAddingToCart] = (0, import_react13.useState)(false);
+  const [cartError, setCartError] = (0, import_react13.useState)(null);
+  const [seededFor, setSeededFor] = (0, import_react13.useState)(null);
   const bundle = result.status === "success" && result.bundle.bundleType === "volume" ? result.bundle : null;
-  (0, import_react14.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (!bundle || seededFor === bundle.id) return;
     setSeededFor(bundle.id);
     const tiers = bundle.volumeTiers;
     if (tiers.length === 0) return;
-    const best = (0, import_core12.bestValueTierIndex)(
+    const best = (0, import_core11.bestValueTierIndex)(
       tiers,
       bundle.discountConfig.discountType
     );
-    const idx = (0, import_core12.resolveDefaultTierIndex)(
+    const idx = (0, import_core11.resolveDefaultTierIndex)(
       bundle.widgetConfig.defaultTier,
       tiers.length,
       best
@@ -2390,7 +2374,7 @@ function VolumeBundle(props) {
   }, [bundle, seededFor]);
   const setConfigVarsRef = useWidgetConfigVars(bundle?.widgetConfig);
   const tiersEdgeFadeRef = useEdgeFade();
-  (0, import_react14.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (result.status === "error") {
       onError?.(result.error);
       return;
@@ -2403,27 +2387,32 @@ function VolumeBundle(props) {
       );
     }
   }, [result, onError]);
-  const product = bundle?.products[0];
-  const variants = (0, import_react14.useMemo)(() => product?.variants.nodes ?? [], [product]);
-  const optionNames = (0, import_react14.useMemo)(() => {
+  const product = bundle ? (0, import_core11.resolveContextProduct)(bundle.products, { productId }) : void 0;
+  const variants = (0, import_react13.useMemo)(() => product?.variants.nodes ?? [], [product]);
+  const optionNames = (0, import_react13.useMemo)(() => {
     const first = variants[0];
     return first ? first.selectedOptions.map((o) => o.name) : [];
   }, [variants]);
   const showPicker = variants.length > 1 && optionNames.length > 0;
   const { selectedValues, selectedVariant, setOptionValue, optionsFor } = useVariantSelection({ variants, optionNames });
-  const minTierQty = bundle ? (0, import_core12.getMinTierQuantity)(bundle.volumeTiers) : 1;
-  const isSoldOut = variants.length > 0 && !variants.some((v) => (0, import_core12.isVariantFulfillable)(v, minTierQty));
-  const displayVariant = selectedVariant ?? variants.find((v) => (0, import_core12.isVariantFulfillable)(v, minTierQty)) ?? variants[0];
+  const minTierQty = bundle ? (0, import_core11.getMinTierQuantity)(bundle.volumeTiers) : 1;
+  const isSoldOut = variants.length > 0 && !variants.some((v) => (0, import_core11.isVariantFulfillable)(v, minTierQty));
+  const displayVariant = selectedVariant ?? variants.find((v) => (0, import_core11.isVariantFulfillable)(v, minTierQty)) ?? variants[0];
+  const tierAvailable = (0, import_react13.useCallback)(
+    (tierQty) => Boolean(displayVariant && (0, import_core11.isVariantFulfillable)(displayVariant, tierQty)),
+    [displayVariant]
+  );
+  const selectedTierUnavailable = !isSoldOut && !tierAvailable(quantity);
   const basePrice = displayVariant ? parseFloat(displayVariant.price.amount) : product ? parseFloat(product.priceRange.minVariantPrice.amount) : 0;
   const currency = product?.priceRange.minVariantPrice.currencyCode ?? "USD";
   const thumbImage = displayVariant?.image ?? product?.featuredImage ?? null;
-  const unitPriceText = displayVariant ? (0, import_core12.formatUnitPrice)(
+  const unitPriceText = displayVariant ? (0, import_core11.formatUnitPrice)(
     displayVariant.unitPrice,
     displayVariant.unitPriceMeasurement,
     currency
   ) : null;
-  const tierSavings = (0, import_react14.useMemo)(
-    () => bundle ? (0, import_core12.calculateTierSavings)(
+  const tierSavings = (0, import_react13.useMemo)(
+    () => bundle ? (0, import_core11.calculateTierSavings)(
       bundle.volumeTiers,
       basePrice,
       quantity,
@@ -2431,13 +2420,13 @@ function VolumeBundle(props) {
     ) : [],
     [bundle, basePrice, quantity]
   );
-  const activeTier = bundle ? (0, import_core12.getActiveTier)(bundle.volumeTiers, quantity) : null;
-  const popularTierIndex = (0, import_react14.useMemo)(() => {
+  const activeTier = bundle ? (0, import_core11.getActiveTier)(bundle.volumeTiers, quantity) : null;
+  const popularTierIndex = (0, import_react13.useMemo)(() => {
     if (!bundle || bundle.volumeTiers.length === 0) return -1;
-    return (0, import_core12.resolvePopularTierIndex)(
+    return (0, import_core11.resolvePopularTierIndex)(
       bundle.widgetConfig.popularBadge.tierIndex,
       bundle.widgetConfig.popularBadge.visible !== false,
-      (0, import_core12.bestValueTierIndex)(
+      (0, import_core11.bestValueTierIndex)(
         bundle.volumeTiers,
         bundle.discountConfig.discountType
       )
@@ -2448,10 +2437,10 @@ function VolumeBundle(props) {
   const volumeTotal = activeUnitPrice * quantity;
   const volumeSavings = Math.max(0, undiscountedTotal - volumeTotal);
   const volumeSavingsPercent = undiscountedTotal > 0 && volumeSavings > 0 ? Math.round(volumeSavings / undiscountedTotal * 100) : 0;
-  const handleAddToCart = (0, import_react14.useCallback)(async () => {
+  const handleAddToCart = (0, import_react13.useCallback)(async () => {
     if (!bundle || !product) return;
     const variant = selectedVariant ?? product.variants.nodes.find(
-      (v) => (0, import_core12.isVariantFulfillable)(v, quantity)
+      (v) => (0, import_core11.isVariantFulfillable)(v, quantity)
     );
     if (!variant) return;
     const lines = [
@@ -2537,7 +2526,7 @@ function VolumeBundle(props) {
           /* @__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: [
-              (0, import_core12.formatMoney)(basePrice, currency),
+              (0, import_core11.formatMoney)(basePrice, currency),
               " each"
             ] }),
             unitPriceText && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "lb-bundle__product-unit-price", children: unitPriceText }),
@@ -2571,16 +2560,20 @@ function VolumeBundle(props) {
               const savingsPercent = Math.round(ts.savingsPercent);
               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)(
                 "div",
                 {
-                  className: `lb-bundle__tier ${ts.isActive ? "lb-bundle__tier--active" : ""}`,
+                  className: `lb-bundle__tier ${ts.isActive ? "lb-bundle__tier--active" : ""} ${available ? "" : "lb-bundle__tier--oos"}`,
                   role: "radio",
                   "aria-checked": isChecked,
+                  "aria-disabled": available ? void 0 : true,
                   tabIndex: isChecked ? 0 : -1,
-                  onClick: () => setQuantity(ts.tier.minQuantity),
+                  onClick: () => {
+                    if (available) setQuantity(ts.tier.minQuantity);
+                  },
                   onKeyDown: (e) => {
-                    if (e.key === "Enter" || e.key === " ") {
+                    if ((e.key === "Enter" || e.key === " ") && available) {
                       e.preventDefault();
                       setQuantity(ts.tier.minQuantity);
                     }
@@ -2593,8 +2586,8 @@ function VolumeBundle(props) {
                         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_core12.formatMoney)(basePrice, currency) }),
-                        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: (0, import_core12.formatMoney)(ts.unitPrice, currency) }),
+                        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" })
                       ] })
                     ] }),
@@ -2649,7 +2642,7 @@ function VolumeBundle(props) {
           ] })
         ] }),
         cartError && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
-        bundle && displayVariant && (0, import_core12.shouldShowLowStockBadge)(
+        bundle && displayVariant && (0, import_core11.shouldShowLowStockBadge)(
           displayVariant,
           minTierQty,
           bundle.widgetConfig.lowStockThreshold,
@@ -2676,7 +2669,7 @@ 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: [
               "You save",
               " ",
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { "data-savings-amount": true, children: (0, import_core12.formatMoney)(volumeSavings, currency) }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.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: [
                 "(",
@@ -2686,8 +2679,8 @@ function VolumeBundle(props) {
             ] })
           ] }),
           /* @__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_core12.formatMoney)(undiscountedTotal, currency) }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "lb-bundle-sale-price", "data-total-price": true, children: (0, import_core12.formatMoney)(volumeTotal, currency) })
+            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_runtime6.jsx)(
@@ -2695,9 +2688,9 @@ function VolumeBundle(props) {
           {
             className: "lb-bundle__cta",
             onClick: handleAddToCart,
-            disabled: addingToCart || isSoldOut,
+            disabled: addingToCart || isSoldOut || selectedTierUnavailable,
             "aria-busy": addingToCart,
-            children: addingToCart ? "Adding..." : isSoldOut ? "Sold out" : bundle.widgetConfig.cta.ctaText ?? `Add ${quantity} to Cart`
+            children: addingToCart ? "Adding..." : isSoldOut || selectedTierUnavailable ? "Sold out" : bundle.widgetConfig.cta.ctaText ?? `Add ${quantity} to Cart`
           }
         )
       ]
@@ -2706,8 +2699,8 @@ function VolumeBundle(props) {
 }
 
 // src/components/BogoBundle.tsx
-var import_react15 = require("react");
-var import_core13 = require("@lime-bundles/core");
+var import_react14 = require("react");
+var import_core12 = require("@lime-bundles/core");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 function discountedUnit(price, percent) {
   const cents = Math.round(price * 100);
@@ -2737,10 +2730,10 @@ function BogoBundle(props) {
     bundleType: "bogo",
     enabled: analyticsEnabled !== false
   });
-  const [addingToCart, setAddingToCart] = (0, import_react15.useState)(false);
-  const [cartError, setCartError] = (0, import_react15.useState)(null);
-  const [selectedVariants, setSelectedVariants] = (0, import_react15.useState)({ buy: null, get: null });
-  const handleVariantChange = (0, import_react15.useCallback)(
+  const [addingToCart, setAddingToCart] = (0, import_react14.useState)(false);
+  const [cartError, setCartError] = (0, import_react14.useState)(null);
+  const [selectedVariants, setSelectedVariants] = (0, import_react14.useState)({ buy: null, get: null });
+  const handleVariantChange = (0, import_react14.useCallback)(
     (role, variant) => {
       setSelectedVariants((prev) => {
         if (prev[role] === variant) return prev;
@@ -2751,7 +2744,7 @@ function BogoBundle(props) {
   );
   const bundle = result.status === "success" && result.bundle.bundleType === "bogo" ? result.bundle : null;
   const setConfigVarsRef = useWidgetConfigVars(bundle?.widgetConfig);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (result.status === "error") {
       onError?.(result.error);
       return;
@@ -2764,28 +2757,28 @@ function BogoBundle(props) {
       );
     }
   }, [result, onError]);
-  const buyProduct = (0, import_react15.useMemo)(
+  const buyProduct = (0, import_react14.useMemo)(
     () => bundle?.products.find((p) => p.id === bundle.buyProductId) ?? null,
     [bundle]
   );
-  const getProduct = (0, import_react15.useMemo)(
+  const getProduct = (0, import_react14.useMemo)(
     () => bundle?.products.find((p) => p.id === bundle.getProductId) ?? null,
     [bundle]
   );
   const percent = bundle ? Math.min(100, Math.max(0, bundle.discountConfig.discountValue)) : 0;
-  const resolveVariant = (0, import_react15.useCallback)(
+  const resolveVariant = (0, import_react14.useCallback)(
     (product, selected, qty) => {
       if (!product) return null;
-      return selected ?? product.variants.nodes.find((v) => (0, import_core13.isVariantFulfillable)(v, qty)) ?? product.variants.nodes[0] ?? null;
+      return selected ?? product.variants.nodes.find((v) => (0, import_core12.isVariantFulfillable)(v, qty)) ?? product.variants.nodes[0] ?? null;
     },
     []
   );
-  const oosSides = (0, import_react15.useMemo)(() => {
+  const oosSides = (0, import_react14.useMemo)(() => {
     if (!bundle) return 0;
-    const short = (product, qty) => !!product && !product.variants.nodes.some((v) => (0, import_core13.isVariantFulfillable)(v, qty));
+    const short = (product, qty) => !!product && !product.variants.nodes.some((v) => (0, import_core12.isVariantFulfillable)(v, qty));
     return (short(buyProduct, bundle.buyQuantity) ? 1 : 0) + (short(getProduct, bundle.getQuantity) ? 1 : 0);
   }, [bundle, buyProduct, getProduct]);
-  const handleAddToCart = (0, import_react15.useCallback)(async () => {
+  const handleAddToCart = (0, import_react14.useCallback)(async () => {
     if (!bundle || !buyProduct || !getProduct) return;
     const buyVariant2 = resolveVariant(buyProduct, selectedVariants.buy, bundle.buyQuantity);
     const getVariant2 = resolveVariant(getProduct, selectedVariants.get, bundle.getQuantity);
@@ -2910,7 +2903,7 @@ function BogoBundle(props) {
             showSavings && /* @__PURE__ */ (0, import_jsx_runtime7.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_core13.formatMoney)(savings, currency) }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.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: [
                 "(",
@@ -2920,8 +2913,8 @@ function BogoBundle(props) {
             ] })
           ] }),
           /* @__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_core13.formatMoney)(comparePrice, currency) }),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "lb-bundle-sale-price", "data-sale-price": true, children: (0, import_core13.formatMoney)(salePrice, currency) })
+            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) })
           ] })
         ] }),
         cartError && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
@@ -2941,7 +2934,7 @@ function BogoBundle(props) {
 }
 function BogoProductRow({ side, product, quantity, percent, badge, currency, onVariantChange }) {
   const variants = product.variants.nodes;
-  const optionNames = (0, import_react15.useMemo)(() => {
+  const optionNames = (0, import_react14.useMemo)(() => {
     const first = variants[0];
     return first ? first.selectedOptions.map((o) => o.name) : [];
   }, [variants]);
@@ -2950,15 +2943,15 @@ function BogoProductRow({ side, product, quantity, percent, badge, currency, onV
     variants,
     optionNames
   });
-  (0, import_react15.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     onVariantChange(side, selectedVariant ?? null);
   }, [selectedVariant, side, onVariantChange]);
-  const displayVariant = selectedVariant ?? variants.find((v) => (0, import_core13.isVariantFulfillable)(v, quantity)) ?? variants[0];
+  const displayVariant = selectedVariant ?? variants.find((v) => (0, import_core12.isVariantFulfillable)(v, quantity)) ?? variants[0];
   const unit = displayVariant ? parseFloat(displayVariant.price.amount) : 0;
   const isGet = side === "get" && percent > 0;
-  const priceText = isGet ? (0, import_core13.formatMoney)(discountedUnit(unit, percent), currency) : (0, import_core13.formatMoney)(unit, currency);
-  const compareAt = isGet ? (0, import_core13.formatMoney)(unit, currency) : displayVariant?.compareAtPrice && parseFloat(displayVariant.compareAtPrice.amount) > unit ? (0, import_core13.formatMoney)(displayVariant.compareAtPrice.amount, currency) : null;
-  const unitPriceText = displayVariant ? (0, import_core13.formatUnitPrice)(
+  const priceText = isGet ? (0, import_core12.formatMoney)(discountedUnit(unit, percent), currency) : (0, import_core12.formatMoney)(unit, currency);
+  const compareAt = isGet ? (0, import_core12.formatMoney)(unit, currency) : displayVariant?.compareAtPrice && parseFloat(displayVariant.compareAtPrice.amount) > unit ? (0, import_core12.formatMoney)(displayVariant.compareAtPrice.amount, currency) : null;
+  const unitPriceText = displayVariant ? (0, import_core12.formatUnitPrice)(
     displayVariant.unitPrice,
     displayVariant.unitPriceMeasurement,
     currency
@@ -3023,20 +3016,20 @@ function BogoProductRow({ side, product, quantity, percent, badge, currency, onV
 }
 
 // src/components/MultiStepBundle.tsx
-var import_react17 = require("react");
-var import_core15 = require("@lime-bundles/core");
+var import_react16 = require("react");
+var import_core14 = require("@lime-bundles/core");
 
 // src/components/MultiStepPicker.tsx
-var import_react16 = require("react");
+var import_react15 = require("react");
 var import_react_dom2 = require("react-dom");
-var import_core14 = require("@lime-bundles/core");
+var import_core13 = require("@lime-bundles/core");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 function ruleFor3(bundle, productId, variantId) {
   if (variantId) {
     const vRule = bundle.variantRules[variantId];
     if (vRule) return vRule;
   }
-  return bundle.productRules[productId] ?? import_core14.DEFAULT_PRODUCT_RULE;
+  return bundle.productRules[productId] ?? import_core13.DEFAULT_PRODUCT_RULE;
 }
 function variantRuleFor3(bundle, variantId) {
   return variantId ? bundle.variantRules[variantId] : void 0;
@@ -3044,15 +3037,14 @@ function variantRuleFor3(bundle, variantId) {
 function sanitizeId2(gid) {
   return gid.replace(/[^a-zA-Z0-9_-]/g, "-");
 }
-function buildEligibleProducts2(bundle, stepIndex, oosBehavior) {
+function buildEligibleProducts2(bundle, stepIndex) {
   const result = [];
-  for (const product of (0, import_core14.productsForStep)(bundle, stepIndex)) {
+  for (const product of (0, import_core13.productsForStep)(bundle, stepIndex)) {
     const rule = ruleFor3(bundle, product.id);
     const available = product.variants.nodes.filter(
-      (v) => (0, import_core14.isVariantFulfillable)(v, rule.min)
+      (v) => (0, import_core13.isVariantFulfillable)(v, rule.min)
     );
     const isOos = available.length === 0;
-    if (isOos && oosBehavior === "hide") continue;
     result.push({
       product,
       variants: product.variants.nodes,
@@ -3067,7 +3059,6 @@ function normalizeText2(str) {
 }
 var FILTERS_ALL2 = "__all__";
 function MultiStepPicker({
-  outOfStockBehavior,
   bundle,
   currency,
   initialStep,
@@ -3084,17 +3075,19 @@ function MultiStepPicker({
 }) {
   const wc = bundle.widgetConfig;
   const steps = bundle.steps;
-  const overlayRef = (0, import_react16.useRef)(null);
-  const dialogRef = (0, import_react16.useRef)(null);
-  const titleRef = (0, import_react16.useRef)(null);
-  const mouseDownTarget = (0, import_react16.useRef)(null);
-  const [open, setOpen] = (0, import_react16.useState)(false);
-  const [stepIndex, setStepIndex] = (0, import_react16.useState)(
+  const overlayRef = (0, import_react15.useRef)(null);
+  const dialogRef = (0, import_react15.useRef)(null);
+  const titleRef = (0, import_react15.useRef)(null);
+  const closeBtnRef = (0, import_react15.useRef)(null);
+  const listRef = (0, import_react15.useRef)(null);
+  const mouseDownTarget = (0, import_react15.useRef)(null);
+  const [open, setOpen] = (0, import_react15.useState)(false);
+  const [stepIndex, setStepIndex] = (0, import_react15.useState)(
     () => Math.max(0, Math.min(steps.length - 1, initialStep))
   );
-  const [query, setQuery] = (0, import_react16.useState)("");
-  const [activeType, setActiveType] = (0, import_react16.useState)(FILTERS_ALL2);
-  const [announcement, setAnnouncement] = (0, import_react16.useState)("");
+  const [query, setQuery] = (0, import_react15.useState)("");
+  const [activeType, setActiveType] = (0, import_react15.useState)(FILTERS_ALL2);
+  const [announcement, setAnnouncement] = (0, import_react15.useState)("");
   const step = steps[stepIndex];
   const stepMin = step?.minQuantity ?? 1;
   const stepPicks = selections[stepIndex] ?? [];
@@ -3102,11 +3095,11 @@ function MultiStepPicker({
   const stepIsSatisfied = unitsInStep >= stepMin;
   const isLastStep = stepIndex === steps.length - 1;
   const shownUnits = Math.min(unitsInStep, stepMin);
-  const eligible = (0, import_react16.useMemo)(
-    () => buildEligibleProducts2(bundle, stepIndex, outOfStockBehavior),
-    [bundle, stepIndex, outOfStockBehavior]
+  const eligible = (0, import_react15.useMemo)(
+    () => buildEligibleProducts2(bundle, stepIndex),
+    [bundle, stepIndex]
   );
-  const productTypes = (0, import_react16.useMemo)(() => {
+  const productTypes = (0, import_react15.useMemo)(() => {
     const types = [];
     const seen = /* @__PURE__ */ new Set();
     for (const ep of eligible) {
@@ -3119,7 +3112,7 @@ function MultiStepPicker({
     return types;
   }, [eligible]);
   const showFilters = wc.mixMatchShowTypeFilters && productTypes.length >= 2;
-  (0, import_react16.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     const id = requestAnimationFrame(() => setOpen(true));
     return () => cancelAnimationFrame(id);
   }, []);
@@ -3127,8 +3120,23 @@ function MultiStepPicker({
   useFocusTrap({
     active: true,
     containerRef: dialogRef,
+    initialFocusRef: closeBtnRef,
     onEscape: onClose
   });
+  (0, import_react15.useEffect)(() => {
+    if (listRef.current) listRef.current.scrollTop = 0;
+  }, [stepIndex]);
+  const [selectedAtLoad, setSelectedAtLoad] = (0, import_react15.useState)(
+    () => new Set((selections[stepIndex] ?? []).map((s) => s.productId))
+  );
+  const ordered = (0, import_react15.useMemo)(() => {
+    const front = [];
+    const back = [];
+    for (const ep of eligible) {
+      (selectedAtLoad.has(ep.product.id) ? back : front).push(ep);
+    }
+    return front.concat(back);
+  }, [eligible, selectedAtLoad]);
   function goToStep(i) {
     const clamped = Math.max(0, Math.min(steps.length - 1, i));
     setStepIndex(clamped);
@@ -3136,6 +3144,7 @@ function MultiStepPicker({
     setActiveType(FILTERS_ALL2);
     const target = steps[clamped];
     const targetPicks = selections[clamped] ?? [];
+    setSelectedAtLoad(new Set(targetPicks.map((s) => s.productId)));
     const targetUnits = targetPicks.reduce((sum, s) => sum + s.quantity, 0);
     setAnnouncement(
       `Step ${clamped + 1} of ${steps.length}. ${target.name}. ${Math.min(targetUnits, target.minQuantity)} of ${target.minQuantity} added`
@@ -3143,14 +3152,14 @@ function MultiStepPicker({
     titleRef.current?.focus();
   }
   const subtitle = `Step ${stepIndex + 1} of ${steps.length} \xB7 ${step?.name ?? ""}`;
-  const filtered = (0, import_react16.useMemo)(() => {
+  const filtered = (0, import_react15.useMemo)(() => {
     const nq = normalizeText2(query.trim());
-    return eligible.filter((ep) => {
+    return ordered.filter((ep) => {
       const matchesQuery = !nq || normalizeText2(ep.product.title).includes(nq);
       const matchesType = activeType === FILTERS_ALL2 || (ep.product.productType ?? "") === activeType;
       return matchesQuery && matchesType;
     });
-  }, [eligible, query, activeType]);
+  }, [ordered, query, activeType]);
   const showEmpty = filtered.length === 0 && query.trim().length > 0;
   function onOverlayMouseDown(e) {
     mouseDownTarget.current = e.target;
@@ -3208,6 +3217,7 @@ function MultiStepPicker({
                   /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                     "button",
                     {
+                      ref: closeBtnRef,
                       type: "button",
                       className: "lb-mix-match__modal-close",
                       "data-modal-close": true,
@@ -3295,7 +3305,7 @@ function MultiStepPicker({
                   })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "lb-mix-match__modal-list", "data-modal-list": true, children: filtered.map((ep) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              /* @__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)(
                 MultiStepPickerRow,
                 {
                   bundle,
@@ -3386,27 +3396,27 @@ function MultiStepPickerRow({
   const { product, variants, isOos } = eligible;
   const rule = ruleFor3(bundle, product.id);
   const step = bundle.steps[stepIndex];
-  const optionNames = (0, import_react16.useMemo)(() => {
+  const optionNames = (0, import_react15.useMemo)(() => {
     const first = variants[0];
     return first ? first.selectedOptions.map((o) => o.name) : [];
   }, [variants]);
   const showPicker = variants.length > 1 && optionNames.length > 0;
   const { selectedValues, selectedVariant, setOptionValue, optionsFor } = useVariantSelection({ variants, optionNames });
-  const currentVariant = selectedVariant ?? variants.find((v) => (0, import_core14.isVariantFulfillable)(v, rule.min)) ?? eligible.firstAvailableVariant ?? variants[0] ?? null;
+  const currentVariant = selectedVariant ?? variants.find((v) => (0, import_core13.isVariantFulfillable)(v, rule.min)) ?? eligible.firstAvailableVariant ?? variants[0] ?? null;
   const vRule = ruleFor3(bundle, product.id, currentVariant?.id);
   const variantMax = variantRuleFor3(bundle, currentVariant?.id)?.max;
-  const stepPicks = (0, import_react16.useMemo)(
+  const stepPicks = (0, import_react15.useMemo)(
     () => selections[stepIndex] ?? [],
     [selections, stepIndex]
   );
   const unitsInStep = stepPicks.reduce((sum, s) => sum + s.quantity, 0);
-  const committedSelection = (0, import_react16.useMemo)(
+  const committedSelection = (0, import_react15.useMemo)(
     () => currentVariant ? stepPicks.find((s) => s.variantId === currentVariant.id) ?? null : null,
     [stepPicks, currentVariant]
   );
   const variantInStep = committedSelection !== null;
   const committedQty = committedSelection?.quantity ?? 0;
-  const productOtherUnits = (0, import_react16.useMemo)(() => {
+  const productOtherUnits = (0, import_react15.useMemo)(() => {
     if (!currentVariant) return 0;
     let sum = 0;
     for (let i = 0; i < selections.length; i++) {
@@ -3418,7 +3428,7 @@ function MultiStepPickerRow({
     }
     return sum;
   }, [selections, product.id, currentVariant, stepIndex]);
-  const variantOtherUnits = (0, import_react16.useMemo)(() => {
+  const variantOtherUnits = (0, import_react15.useMemo)(() => {
     if (!currentVariant) return 0;
     let sum = 0;
     for (const picks of selections) {
@@ -3430,7 +3440,7 @@ function MultiStepPickerRow({
   }, [selections, currentVariant, committedQty]);
   const swapUnits = currentVariant ? swapUnitsFor?.(stepIndex, product.id, currentVariant.id) ?? 0 : 0;
   const inSwapState = swapUnits >= vRule.min;
-  const room = (0, import_core14.stepHeadroom)(step?.maxQuantity ?? null, unitsInStep);
+  const room = (0, import_core13.stepHeadroom)(step?.maxQuantity ?? null, unitsInStep);
   const productHeadroom = Math.min(
     rule.max - productOtherUnits,
     variantMax ?? Infinity
@@ -3439,20 +3449,20 @@ function MultiStepPickerRow({
     productHeadroom,
     room === Number.POSITIVE_INFINITY ? productHeadroom : committedQty + room
   );
-  const stockRemaining = currentVariant ? (0, import_core14.maxAddableQuantity)(currentVariant, Number.MAX_SAFE_INTEGER, variantOtherUnits) : 0;
+  const stockRemaining = currentVariant ? (0, import_core13.maxAddableQuantity)(currentVariant, Number.MAX_SAFE_INTEGER, variantOtherUnits) : 0;
   const cap = Math.max(0, Math.min(spotCeiling, stockRemaining));
   const stepperMax = Math.max(vRule.min, cap);
-  const [qty, setQty] = (0, import_react16.useState)(vRule.min);
-  (0, import_react16.useEffect)(() => {
+  const [qty, setQty] = (0, import_react15.useState)(vRule.min);
+  (0, import_react15.useEffect)(() => {
     setQty((prev) => Math.max(vRule.min, Math.min(prev, stepperMax)));
   }, [stepperMax, vRule.min]);
   const currentVariantId = currentVariant?.id ?? null;
-  (0, import_react16.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (!variantInStep) setQty(vRule.min);
   }, [variantInStep, currentVariantId, vRule.min]);
   if (!currentVariant || !step) return null;
   const thumbImage = currentVariant.image ?? product.featuredImage ?? null;
-  const unitPriceText = (0, import_core14.formatUnitPrice)(
+  const unitPriceText = (0, import_core13.formatUnitPrice)(
     currentVariant.unitPrice,
     currentVariant.unitPriceMeasurement,
     currency
@@ -3522,8 +3532,8 @@ function MultiStepPickerRow({
             }
           ) }),
           /* @__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_core14.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_core14.formatMoney)(compareCents, currency) })
+            /* @__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) })
           ] }),
           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) => {
@@ -3676,7 +3686,7 @@ function ruleFor4(bundle, productId, variantId) {
     const vRule = bundle.variantRules[variantId];
     if (vRule) return vRule;
   }
-  return bundle.productRules[productId] ?? import_core15.DEFAULT_PRODUCT_RULE;
+  return bundle.productRules[productId] ?? import_core14.DEFAULT_PRODUCT_RULE;
 }
 function variantRuleFor4(bundle, variantId) {
   return variantId ? bundle.variantRules[variantId] : void 0;
@@ -3718,10 +3728,6 @@ function MultiStepBundle(props) {
     storefrontAccessToken,
     bundleGid
   });
-  const { outOfStockBehavior } = useShopSettings({
-    shopDomain,
-    storefrontAccessToken
-  });
   const { elementRef, trackAddToCart } = useAnalytics({
     shopDomain,
     appUrl: appUrl ?? `https://${shopDomain}`,
@@ -3729,14 +3735,14 @@ function MultiStepBundle(props) {
     bundleType: "multi_step",
     enabled: analyticsEnabled !== false
   });
-  const [selections, setSelections] = (0, import_react17.useState)([]);
-  const [pickerOpenAt, setPickerOpenAt] = (0, import_react17.useState)(null);
-  const [addingToCart, setAddingToCart] = (0, import_react17.useState)(false);
-  const [cartError, setCartError] = (0, import_react17.useState)(null);
+  const [selections, setSelections] = (0, import_react16.useState)([]);
+  const [pickerOpenAt, setPickerOpenAt] = (0, import_react16.useState)(null);
+  const [addingToCart, setAddingToCart] = (0, import_react16.useState)(false);
+  const [cartError, setCartError] = (0, import_react16.useState)(null);
   const bundle = result.status === "success" && result.bundle.bundleType === "multi_step" ? result.bundle : null;
   const setConfigVarsRef = useWidgetConfigVars(bundle?.widgetConfig);
   const setModalConfigVarsRef = useWidgetConfigVars(bundle?.widgetConfig);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (result.status === "error") {
       onError?.(result.error);
       return;
@@ -3749,17 +3755,17 @@ function MultiStepBundle(props) {
       );
     }
   }, [result, onError]);
-  const steps = (0, import_react17.useMemo)(() => bundle?.steps ?? [], [bundle]);
-  (0, import_react17.useEffect)(() => {
+  const steps = (0, import_react16.useMemo)(() => bundle?.steps ?? [], [bundle]);
+  (0, import_react16.useEffect)(() => {
     const seeded = steps.map(() => []);
     if (bundle) {
       const seedCurrency = bundle.products[0]?.priceRange.minVariantPrice.currencyCode ?? "USD";
       for (const [pid, rule] of Object.entries(bundle.productRules)) {
         if (!rule.required) continue;
         for (let i = 0; i < steps.length; i++) {
-          const product = (0, import_core15.productsForStep)(bundle, i).find((p) => p.id === pid);
+          const product = (0, import_core14.productsForStep)(bundle, i).find((p) => p.id === pid);
           const variant = product?.variants.nodes.find(
-            (v) => (0, import_core15.isVariantFulfillable)(v, rule.min)
+            (v) => (0, import_core14.isVariantFulfillable)(v, rule.min)
           );
           if (!product || !variant) continue;
           seeded[i].push({
@@ -3771,7 +3777,7 @@ function MultiStepBundle(props) {
             featuredImage: variant.image?.url ?? product.featuredImage?.url ?? null,
             price: parseFloat(variant.price.amount),
             compareAtPrice: variant.compareAtPrice ? parseFloat(variant.compareAtPrice.amount) : null,
-            unitPrice: (0, import_core15.formatUnitPrice)(
+            unitPrice: (0, import_core14.formatUnitPrice)(
               variant.unitPrice,
               variant.unitPriceMeasurement,
               seedCurrency
@@ -3785,26 +3791,26 @@ function MultiStepBundle(props) {
     setSelections(seeded);
   }, [bundle, steps]);
   const showStepper = bundle?.widgetConfig.mixMatchShowQuantitySelector !== false;
-  const totalMin = (0, import_react17.useMemo)(
+  const totalMin = (0, import_react16.useMemo)(
     () => steps.reduce((sum, s) => sum + s.minQuantity, 0),
     [steps]
   );
-  const unitsByStep = (0, import_react17.useMemo)(
+  const unitsByStep = (0, import_react16.useMemo)(
     () => selections.map((picks) => picks.reduce((sum, s) => sum + s.quantity, 0)),
     [selections]
   );
-  const totalQuantity = (0, import_react17.useMemo)(
+  const totalQuantity = (0, import_react16.useMemo)(
     () => unitsByStep.reduce((sum, u) => sum + u, 0),
     [unitsByStep]
   );
-  const stepSatisfied = (0, import_react17.useCallback)(
+  const stepSatisfied = (0, import_react16.useCallback)(
     (i) => (unitsByStep[i] ?? 0) >= (steps[i]?.minQuantity ?? 1),
     [unitsByStep, steps]
   );
   const allSatisfied = steps.length > 0 && steps.every((_, i) => stepSatisfied(i));
   const valid = !!bundle && allSatisfied;
   const completedSteps = steps.filter((_, i) => stepSatisfied(i)).length;
-  const summary = (0, import_react17.useMemo)(() => {
+  const summary = (0, import_react16.useMemo)(() => {
     let comparePrice = 0;
     let salePrice = 0;
     for (const stepPicks of selections) {
@@ -3812,7 +3818,7 @@ function MultiStepBundle(props) {
         if (sel.quantity <= 0) continue;
         comparePrice += sel.price * sel.quantity;
         if (bundle) {
-          salePrice += (0, import_core15.calculateDiscount)(
+          salePrice += (0, import_core14.calculateDiscount)(
             sel.price,
             bundle.discountConfig.discountType,
             bundle.discountConfig.discountValue
@@ -3824,7 +3830,7 @@ function MultiStepBundle(props) {
     const savingsPercent = comparePrice > 0 && savings > 0 ? Math.round(savings / comparePrice * 100) : 0;
     return { comparePrice, salePrice, savings, savingsPercent };
   }, [selections, bundle]);
-  const addSelection = (0, import_react17.useCallback)((step, item) => {
+  const addSelection = (0, import_react16.useCallback)((step, item) => {
     setSelections((prev) => {
       if (step < 0 || step >= prev.length) return prev;
       if (prev[step].some((s) => s.variantId === item.variantId)) return prev;
@@ -3833,7 +3839,7 @@ function MultiStepBundle(props) {
       return next;
     });
   }, []);
-  const swapSelection = (0, import_react17.useCallback)(
+  const swapSelection = (0, import_react16.useCallback)(
     (step, item) => {
       setSelections((prev) => {
         if (!bundle || step < 0 || step >= prev.length) return prev;
@@ -3868,7 +3874,7 @@ function MultiStepBundle(props) {
     },
     [bundle]
   );
-  const updateQuantity = (0, import_react17.useCallback)(
+  const updateQuantity = (0, import_react16.useCallback)(
     (step, productId, variantId, quantity) => {
       setSelections((prev) => {
         if (step < 0 || step >= prev.length) return prev;
@@ -3887,7 +3893,7 @@ function MultiStepBundle(props) {
     },
     []
   );
-  const removeVariant = (0, import_react17.useCallback)(
+  const removeVariant = (0, import_react16.useCallback)(
     (step, variantId) => {
       setSelections((prev) => {
         if (step < 0 || step >= prev.length) return prev;
@@ -3903,7 +3909,7 @@ function MultiStepBundle(props) {
     },
     [bundle]
   );
-  const removeSlot = (0, import_react17.useCallback)(
+  const removeSlot = (0, import_react16.useCallback)(
     (step, index) => {
       setSelections((prev) => {
         if (step < 0 || step >= prev.length) return prev;
@@ -3919,7 +3925,7 @@ function MultiStepBundle(props) {
     },
     [bundle]
   );
-  const handleAddToCart = (0, import_react17.useCallback)(async () => {
+  const handleAddToCart = (0, import_react16.useCallback)(async () => {
     if (!bundle || !valid) return;
     const grouped = /* @__PURE__ */ new Map();
     for (const stepPicks of selections) {
@@ -3974,8 +3980,8 @@ function MultiStepBundle(props) {
     ([pid, rule]) => {
       if (!rule.required) return false;
       return !steps.some(
-        (_, i) => (0, import_core15.productsForStep)(bundle, i).some(
-          (p) => p.id === pid && p.variants.nodes.some((v) => (0, import_core15.isVariantFulfillable)(v, rule.min))
+        (_, i) => (0, import_core14.productsForStep)(bundle, i).some(
+          (p) => p.id === pid && p.variants.nodes.some((v) => (0, import_core14.isVariantFulfillable)(v, rule.min))
         )
       );
     }
@@ -4099,8 +4105,8 @@ function MultiStepBundle(props) {
                             ),
                             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_core15.formatMoney)(item.compareAtPrice, currency) }),
-                              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "lb-bundle-product-price", children: (0, import_core15.formatMoney)(item.price, currency) }),
+                              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.unitPrice && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "lb-bundle-product-unit-price", children: item.unitPrice })
@@ -4130,7 +4136,7 @@ function MultiStepBundle(props) {
                   ))
                 }
               ),
-              (0, import_core15.stepHeadroom)(step.maxQuantity, unitsByStep[i] ?? 0) !== 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+              (0, import_core14.stepHeadroom)(step.maxQuantity, unitsByStep[i] ?? 0) !== 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
                 "button",
                 {
                   type: "button",
@@ -4162,7 +4168,7 @@ function MultiStepBundle(props) {
             bundle.widgetConfig.savingsBar.visible && summary.savings > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.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_core15.formatMoney)(summary.savings, currency) }),
+              /* @__PURE__ */ (0, import_jsx_runtime9.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: [
                 "(",
@@ -4172,8 +4178,8 @@ function MultiStepBundle(props) {
             ] })
           ] }),
           /* @__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_core15.formatMoney)(summary.comparePrice, currency) }),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "lb-bundle-sale-price", "data-sale-price": true, children: (0, import_core15.formatMoney)(summary.salePrice, currency) })
+            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) })
           ] })
         ] }),
         cartError && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
@@ -4190,7 +4196,6 @@ function MultiStepBundle(props) {
         pickerOpenAt !== null && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           MultiStepPicker,
           {
-            outOfStockBehavior,
             bundle,
             currency,
             initialStep: pickerOpenAt,
@@ -4217,9 +4222,9 @@ function MultiStepBundle(props) {
   );
 }
 function stepHasInStockProduct(bundle, stepIndex) {
-  return (0, import_core15.productsForStep)(bundle, stepIndex).some((product) => {
+  return (0, import_core14.productsForStep)(bundle, stepIndex).some((product) => {
     const rule = ruleFor4(bundle, product.id);
-    return product.variants.nodes.some((v) => (0, import_core15.isVariantFulfillable)(v, rule.min));
+    return product.variants.nodes.some((v) => (0, import_core14.isVariantFulfillable)(v, rule.min));
   });
 }
 function PlusIcon2() {
@@ -4264,21 +4269,21 @@ async function fetchShopCustomCss(options) {
 }
 
 // src/hooks/useBundlesForProduct.ts
-var import_react18 = require("react");
-var import_core16 = require("@lime-bundles/core");
+var import_react17 = require("react");
+var import_core15 = require("@lime-bundles/core");
 var INITIAL_STATE2 = {
   status: "loading",
   bundles: null,
   error: null
 };
 function useBundlesForProduct(options) {
-  const [state, setState] = (0, import_react18.useState)(
+  const [state, setState] = (0, import_react17.useState)(
     INITIAL_STATE2
   );
-  (0, import_react18.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     const controller = new AbortController();
     setState(INITIAL_STATE2);
-    (0, import_core16.fetchBundlesForProduct)({
+    (0, import_core15.fetchBundlesForProduct)({
       shopDomain: options.shopDomain,
       storefrontAccessToken: options.storefrontAccessToken,
       productHandle: options.productHandle,
@@ -4301,7 +4306,7 @@ function useBundlesForProduct(options) {
       signal: controller.signal
     }).then((settings) => {
       if (controller.signal.aborted) return;
-      (0, import_core16.injectCustomCss)(options.shopDomain, settings.customCss);
+      (0, import_core15.injectCustomCss)(options.shopDomain, settings.customCss);
     }).catch(() => {
     });
     return () => {
@@ -4317,8 +4322,8 @@ function useBundlesForProduct(options) {
 }
 
 // src/index.ts
+var import_core16 = require("@lime-bundles/core");
 var import_core17 = require("@lime-bundles/core");
-var import_core18 = require("@lime-bundles/core");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   BUNDLES_FOR_PRODUCT_QUERY,
@@ -4326,7 +4331,6 @@ var import_core18 = require("@lime-bundles/core");
   BogoBundle,
   BundleCountdown,
   BundleParseError,
-  DEFAULT_OUT_OF_STOCK_BEHAVIOR,
   FixedBundle,
   MixMatchBundle,
   MultiStepBundle,
@@ -4357,7 +4361,6 @@ var import_core18 = require("@lime-bundles/core");
   parseCents,
   parseMetaobjectBundle,
   parseMetaobjectBundleStrict,
-  parseOutOfStockBehavior,
   percentageDiscountUnit,
   productsForStep,
   reportAddToCart,
@@ -4369,7 +4372,6 @@ var import_core18 = require("@lime-bundles/core");
   useAnalytics,
   useBundleData,
   useBundlesForProduct,
-  useShopSettings,
   useVariantSelection,
   useWidgetConfigVars,
   validateQuantity