@lime-bundles/react 5.0.0 → 6.1.0

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/components/FixedBundle.tsx
-import { useCallback as useCallback4, useEffect as useEffect6, useMemo as useMemo4, useState as useState5 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect6, useMemo as useMemo4, useState as useState5 } from "react";
 import {
   formatMoney,
   formatUnitPrice,
@@ -22,6 +22,7 @@ import {
   BUNDLE_METAOBJECT_QUERY,
   withInContext,
   parseMetaobjectBundleStrict,
+  isVisibleInMarket,
   BundleParseError
 } from "@lime-bundles/core";
 async function fetchBundleData(options) {
@@ -61,7 +62,7 @@ async function fetchBundleDataWithWarnings(options) {
     data.metaobject.id,
     data.metaobject.fields
   );
-  if (bundle.marketVisibility === "specific" && (!options.marketId || !bundle.marketIds.includes(options.marketId))) {
+  if (!isVisibleInMarket(bundle, options.marketId)) {
     return {
       bundle: null,
       warnings: [
@@ -77,13 +78,19 @@ async function fetchBundleDataWithWarnings(options) {
   return { bundle, warnings: [] };
 }
 
-// src/fetchShopCustomCss.ts
+// src/fetchShopSettings.ts
 import {
   createStorefrontClient as createStorefrontClient2,
-  SHOP_CUSTOM_CSS_QUERY
+  SHOP_SETTINGS_QUERY,
+  DEFAULT_OUT_OF_STOCK_BEHAVIOR,
+  parseOutOfStockBehavior
 } from "@lime-bundles/core";
+var FALLBACK = {
+  customCss: null,
+  outOfStockBehavior: DEFAULT_OUT_OF_STOCK_BEHAVIOR
+};
 var cache = /* @__PURE__ */ new Map();
-async function fetchShopCustomCss(options) {
+async function fetchShopSettings(options) {
   const cached = cache.get(options.shopDomain);
   if (cached) return cached;
   const promise = (async () => {
@@ -93,11 +100,16 @@ async function fetchShopCustomCss(options) {
       buyerIp: options.buyerIp
     });
     const data = await client.query(
-      SHOP_CUSTOM_CSS_QUERY,
+      SHOP_SETTINGS_QUERY,
       void 0,
       { signal: options.signal }
     );
-    return data.shop?.metafield?.value ?? null;
+    return {
+      customCss: data.shop?.customCss?.value ?? null,
+      outOfStockBehavior: parseOutOfStockBehavior(
+        data.shop?.outOfStockBehavior?.value
+      )
+    };
   })();
   cache.set(options.shopDomain, promise);
   promise.catch(() => {
@@ -107,6 +119,13 @@ async function fetchShopCustomCss(options) {
   });
   return promise;
 }
+async function fetchShopSettingsOrDefault(options) {
+  try {
+    return await fetchShopSettings(options);
+  } catch {
+    return FALLBACK;
+  }
+}
 
 // src/hooks/useBundleData.ts
 var INITIAL_STATE = {
@@ -139,13 +158,13 @@ function useBundleData(options) {
         error: err instanceof Error ? err : new Error(String(err))
       });
     });
-    fetchShopCustomCss({
+    fetchShopSettings({
       shopDomain: options.shopDomain,
       storefrontAccessToken: options.storefrontAccessToken,
       signal: controller.signal
-    }).then((css) => {
+    }).then((settings) => {
       if (controller.signal.aborted) return;
-      injectCustomCss(options.shopDomain, css);
+      injectCustomCss(options.shopDomain, settings.customCss);
     }).catch(() => {
     });
     return () => {
@@ -192,8 +211,7 @@ function useAnalytics(options) {
       impressionFiredRef.current = true;
       reportImpression(config, {
         bundleGid: options.bundleGid,
-        bundleType: options.bundleType,
-        linkGroupId: options.linkGroupId
+        bundleType: options.bundleType
       });
     });
     return cleanup;
@@ -202,8 +220,7 @@ function useAnalytics(options) {
     config,
     options.enabled,
     options.bundleGid,
-    options.bundleType,
-    options.linkGroupId
+    options.bundleType
   ]);
   const trackAddToCart = useCallback(
     (event) => {
@@ -213,16 +230,14 @@ function useAnalytics(options) {
         bundleType: options.bundleType,
         productId: event.productId,
         quantity: event.quantity,
-        totalPrice: event.totalPrice,
-        linkGroupId: options.linkGroupId
+        totalPrice: event.totalPrice
       });
     },
     [
       config,
       options.enabled,
       options.bundleGid,
-      options.bundleType,
-      options.linkGroupId
+      options.bundleType
     ]
   );
   return { elementRef, trackAddToCart };
@@ -326,13 +341,58 @@ function useVariantSelection({
   };
 }
 
+// src/hooks/useEdgeFade.ts
+import { useCallback as useCallback4, useRef as useRef3 } from "react";
+function attachEdgeFade(el) {
+  function update() {
+    const scrollable = el.scrollHeight - el.clientHeight;
+    if (scrollable <= 1) {
+      el.removeAttribute("data-edge-fade");
+      return;
+    }
+    const atTop = el.scrollTop <= 1;
+    const atBottom = el.scrollTop >= scrollable - 1;
+    el.setAttribute(
+      "data-edge-fade",
+      atTop ? "bottom" : atBottom ? "top" : "both"
+    );
+  }
+  el.addEventListener("scroll", update, { passive: true });
+  let resizeObserver = null;
+  if (typeof ResizeObserver !== "undefined") {
+    resizeObserver = new ResizeObserver(update);
+    resizeObserver.observe(el);
+  }
+  let mutationObserver = null;
+  if (typeof MutationObserver !== "undefined") {
+    mutationObserver = new MutationObserver(update);
+    mutationObserver.observe(el, { childList: true, subtree: true });
+  }
+  update();
+  return () => {
+    el.removeEventListener("scroll", update);
+    resizeObserver?.disconnect();
+    mutationObserver?.disconnect();
+  };
+}
+function useEdgeFade() {
+  const cleanupRef = useRef3(null);
+  return useCallback4((el) => {
+    cleanupRef.current?.();
+    cleanupRef.current = null;
+    if (el) {
+      cleanupRef.current = attachEdgeFade(el);
+    }
+  }, []);
+}
+
 // src/components/VariantDropdown.tsx
 import {
   useEffect as useEffect5,
   useId,
   useLayoutEffect,
   useMemo as useMemo3,
-  useRef as useRef3,
+  useRef as useRef4,
   useState as useState4
 } from "react";
 import { dropdown } from "@lime-bundles/core";
@@ -363,9 +423,9 @@ function VariantDropdown({
   className
 }) {
   const idBase = useId();
-  const triggerRef = useRef3(null);
-  const listboxRef = useRef3(null);
-  const typeAheadRef = useRef3(emptyTypeAheadState());
+  const triggerRef = useRef4(null);
+  const listboxRef = useRef4(null);
+  const typeAheadRef = useRef4(emptyTypeAheadState());
   const [isOpen, setIsOpen] = useState4(false);
   const [activeIndex, setActiveIndex] = useState4(-1);
   const [position, setPosition] = useState4(null);
@@ -627,7 +687,7 @@ function FixedBundle(props) {
   const [addingToCart, setAddingToCart] = useState5(false);
   const [cartError, setCartError] = useState5(null);
   const [selectedVariants, setSelectedVariants] = useState5({});
-  const handleVariantChange = useCallback4(
+  const handleVariantChange = useCallback5(
     (productId, variant) => {
       setSelectedVariants((prev) => {
         if (prev[productId] === variant) return prev;
@@ -638,6 +698,7 @@ function FixedBundle(props) {
   );
   const bundle = result.status === "success" && result.bundle.bundleType === "fixed" ? result.bundle : null;
   const setConfigVarsRef = useWidgetConfigVars(bundle?.widgetConfig);
+  const productsEdgeFadeRef = useEdgeFade();
   useEffect6(() => {
     if (result.status === "error") {
       onError?.(result.error);
@@ -651,7 +712,17 @@ function FixedBundle(props) {
       );
     }
   }, [result, onError]);
-  const handleAddToCart = useCallback4(async () => {
+  const oosProductIds = useMemo4(() => {
+    if (!bundle) return /* @__PURE__ */ new Set();
+    return new Set(
+      bundle.products.filter(
+        (p) => !p.variants.nodes.some(
+          (v) => isVariantFulfillable(v, resolveBundleQty(bundle, p.id, v.id))
+        )
+      ).map((p) => p.id)
+    );
+  }, [bundle]);
+  const handleAddToCart = useCallback5(async () => {
     if (!bundle) return;
     const bundleLines = bundle.products.filter(
       (p) => p.variants.nodes.some(
@@ -714,6 +785,27 @@ function FixedBundle(props) {
   if (result.status === "error") return null;
   if (!bundle) return null;
   const currency = bundle.products[0]?.priceRange.minVariantPrice.currencyCode ?? "USD";
+  let comparePrice = 0;
+  let salePrice = 0;
+  for (const product of bundle.products) {
+    const variants = product.variants.nodes;
+    const variant = selectedVariants[product.id] ?? variants.find(
+      (v) => isVariantFulfillable(v, resolveBundleQty(bundle, product.id, v.id))
+    ) ?? variants[0];
+    if (!variant) continue;
+    const qty = resolveBundleQty(bundle, product.id, variant.id);
+    const unit = parseFloat(variant.price.amount);
+    comparePrice += unit * qty;
+    salePrice += calculateDiscount(
+      unit,
+      bundle.discountConfig.discountType,
+      bundle.discountConfig.discountValue
+    ) * qty;
+  }
+  const savings = Math.max(0, comparePrice - salePrice);
+  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__ */ jsxs2(
     "div",
     {
@@ -725,34 +817,58 @@ function FixedBundle(props) {
       role: "region",
       "aria-label": bundle.title,
       children: [
-        /* @__PURE__ */ jsx2("h3", { className: "lb-bundle__title", children: bundle.title }),
-        bundle.discountLabel && /* @__PURE__ */ jsx2("span", { className: "lb-bundle__discount-badge", children: bundle.discountLabel }),
-        /* @__PURE__ */ jsx2("div", { className: "lb-bundle__products", children: bundle.products.map((product) => /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsx2("div", { className: "lb-bundle-header", children: /* @__PURE__ */ jsxs2("div", { className: "lb-bundle-header__content", children: [
+          /* @__PURE__ */ jsx2("h3", { className: "lb-bundle-title", children: bundle.title }),
+          bundle.description && /* @__PURE__ */ jsx2("p", { className: "lb-bundle-subtitle", children: bundle.description })
+        ] }) }),
+        /* @__PURE__ */ jsx2("div", { className: "lb-bundle__products lb-edge-fade", ref: productsEdgeFadeRef, children: bundle.products.map((product) => /* @__PURE__ */ jsx2(
           FixedProductRow,
           {
             bundle,
             product,
             currency,
+            isOos: oosProductIds.has(product.id),
             onVariantChange: handleVariantChange
           },
           product.id
         )) }),
+        /* @__PURE__ */ jsx2("div", { className: "lb-bundle-divider" }),
+        /* @__PURE__ */ jsxs2("div", { className: "lb-bundle-summary", children: [
+          /* @__PURE__ */ jsxs2("div", { className: "lb-bundle-summary__text", children: [
+            /* @__PURE__ */ jsx2("span", { className: "lb-bundle-summary__label", children: "Bundle price" }),
+            showSavings && /* @__PURE__ */ jsxs2("p", { className: "lb-bundle-savings-line", "data-savings-bar": true, children: [
+              "You save",
+              " ",
+              /* @__PURE__ */ jsx2("span", { "data-savings-amount": true, children: formatMoney(savings, currency) }),
+              " ",
+              /* @__PURE__ */ jsxs2("span", { "data-savings-percent": true, children: [
+                "(",
+                savingsPercent,
+                "%)"
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs2("span", { className: "lb-bundle-summary__prices", children: [
+            showCompare && /* @__PURE__ */ jsx2("span", { className: "lb-bundle-compare-price", "data-compare-price": true, children: formatMoney(comparePrice, currency) }),
+            /* @__PURE__ */ jsx2("span", { className: "lb-bundle-sale-price", "data-sale-price": true, children: formatMoney(salePrice, currency) })
+          ] })
+        ] }),
         cartError && /* @__PURE__ */ jsx2("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
         /* @__PURE__ */ jsx2(
           "button",
           {
             className: "lb-bundle__cta",
             onClick: handleAddToCart,
-            disabled: addingToCart,
+            disabled: addingToCart || oosProductIds.size > 0,
             "aria-busy": addingToCart,
-            children: addingToCart ? "Adding..." : bundle.widgetConfig.cta.ctaText ?? "Add Bundle to Cart"
+            children: addingToCart ? "Adding..." : oosProductIds.size > 0 ? `${oosProductIds.size} item${oosProductIds.size === 1 ? "" : "s"} unavailable` : bundle.widgetConfig.cta.ctaText ?? "Add Bundle to Cart"
           }
         )
       ]
     }
   );
 }
-function FixedProductRow({ bundle, product, currency, onVariantChange }) {
+function FixedProductRow({ bundle, product, currency, isOos, onVariantChange }) {
   const variants = product.variants.nodes;
   const optionNames = useMemo4(() => {
     const first = variants[0];
@@ -770,11 +886,13 @@ function FixedProductRow({ bundle, product, currency, onVariantChange }) {
     (v) => isVariantFulfillable(v, resolveBundleQty(bundle, product.id, v.id))
   ) ?? variants[0];
   const priceText = displayVariant ? formatMoney(displayVariant.price.amount, currency) : formatMoney(product.priceRange.minVariantPrice.amount, currency);
+  const compareAt = displayVariant?.compareAtPrice && parseFloat(displayVariant.compareAtPrice.amount) > parseFloat(displayVariant.price.amount) ? formatMoney(displayVariant.compareAtPrice.amount, currency) : null;
   const unitPriceText = displayVariant ? formatUnitPrice(
     displayVariant.unitPrice,
     displayVariant.unitPriceMeasurement,
     currency
   ) : null;
+  const displayQty = displayVariant ? resolveBundleQty(bundle, product.id, displayVariant.id) : 1;
   const thumbImage = displayVariant?.image ?? product.featuredImage;
   const showLowStock = !!displayVariant && shouldShowLowStockBadge(
     displayVariant,
@@ -782,304 +900,15 @@ function FixedProductRow({ bundle, product, currency, onVariantChange }) {
     bundle.widgetConfig.lowStockThreshold,
     bundle.widgetConfig.showLowStockBadge
   );
-  return /* @__PURE__ */ jsxs2("div", { className: "lb-bundle__product", part: "product", children: [
-    thumbImage && /* @__PURE__ */ jsx2(
-      "img",
-      {
-        src: thumbImage.url,
-        alt: thumbImage.altText ?? product.title,
-        className: "lb-bundle__product-image",
-        loading: "lazy"
-      }
-    ),
-    /* @__PURE__ */ jsxs2("div", { className: "lb-bundle__product-info", children: [
-      /* @__PURE__ */ jsx2("p", { className: "lb-bundle__product-title", children: product.title }),
-      /* @__PURE__ */ jsx2("p", { className: "lb-bundle__product-price", children: priceText }),
-      unitPriceText && /* @__PURE__ */ jsx2("p", { className: "lb-bundle__product-unit-price", children: unitPriceText }),
-      showLowStock && /* @__PURE__ */ jsxs2("span", { className: "lb-bundle-low-stock-badge", children: [
-        "Only ",
-        displayVariant.quantityAvailable,
-        " left"
-      ] }),
-      showPicker && /* @__PURE__ */ jsx2("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__ */ jsx2(
-          VariantDropdown,
-          {
-            options: dropdownOptions,
-            value: selectedValues[optionIndex] ?? null,
-            onChange: (v) => setOptionValue(optionIndex, v),
-            ariaLabel: optionName
-          },
-          optionName
-        );
-      }) })
-    ] })
-  ] });
-}
-
-// src/components/MixMatchBundle.tsx
-import { useCallback as useCallback5, useEffect as useEffect7, useMemo as useMemo5, useState as useState6 } from "react";
-import {
-  formatMoney as formatMoney2,
-  formatUnitPrice as formatUnitPrice2,
-  isVariantFulfillable as isVariantFulfillable2,
-  shouldShowLowStockBadge as shouldShowLowStockBadge2,
-  maxAddableQuantity,
-  DEFAULT_PRODUCT_RULE
-} from "@lime-bundles/core";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-function ruleFor(bundle, productId) {
-  return bundle.productRules[productId] ?? DEFAULT_PRODUCT_RULE;
-}
-function MixMatchBundle(props) {
-  const {
-    shopDomain,
-    storefrontAccessToken,
-    bundleGid,
-    appUrl,
-    analyticsEnabled,
-    onAddToCart,
-    onError,
-    className
-  } = props;
-  const result = useBundleData({
-    shopDomain,
-    storefrontAccessToken,
-    bundleGid
-  });
-  const { elementRef, trackAddToCart } = useAnalytics({
-    shopDomain,
-    appUrl: appUrl ?? `https://${shopDomain}`,
-    bundleGid,
-    bundleType: "mix_match",
-    enabled: analyticsEnabled !== false
-  });
-  const [selections, setSelections] = useState6(
-    /* @__PURE__ */ new Map()
-  );
-  const [addingToCart, setAddingToCart] = useState6(false);
-  const [cartError, setCartError] = useState6(null);
-  const bundle = result.status === "success" && result.bundle.bundleType === "mix_match" ? result.bundle : null;
-  const setConfigVarsRef = useWidgetConfigVars(bundle?.widgetConfig);
-  useEffect7(() => {
-    if (result.status === "error") {
-      onError?.(result.error);
-      return;
-    }
-    if (result.status === "success" && result.bundle.bundleType !== "mix_match") {
-      onError?.(
-        new Error(
-          `MixMatchBundle: expected bundleType="mix_match", got "${result.bundle.bundleType}"`
-        )
-      );
-    }
-  }, [result, onError]);
-  const showStepper = bundle?.widgetConfig.mixMatchShowQuantitySelector !== false;
-  const distinctSelectedProducts = useMemo5(() => {
-    const ids = /* @__PURE__ */ new Set();
-    for (const sel of selections.values()) {
-      if (sel.quantity > 0) ids.add(sel.productId);
-    }
-    return ids;
-  }, [selections]);
-  const totalQuantity = useMemo5(
-    () => Array.from(selections.values()).reduce((sum, s) => sum + s.quantity, 0),
-    [selections]
-  );
-  const requiredPicks = bundle?.minQuantity ?? 0;
-  const meetsMinPicks = distinctSelectedProducts.size >= requiredPicks;
-  const valid = !!bundle && meetsMinPicks;
-  const remaining = Math.max(0, requiredPicks - distinctSelectedProducts.size);
-  const validationMessage = valid ? null : remaining > 0 ? `Pick ${remaining} more product${remaining === 1 ? "" : "s"}` : null;
-  const selectVariant = useCallback5(
-    (productId, variant) => {
-      if (!bundle) return;
-      const rule = ruleFor(bundle, productId);
-      const maxAddable = maxAddableQuantity(variant, rule.max, 0);
-      if (maxAddable < rule.min) return;
-      setSelections((prev) => {
-        const next = new Map(prev);
-        next.set(`${productId}:${variant.id}`, {
-          productId,
-          variantId: variant.id,
-          quantity: rule.min
-        });
-        return next;
-      });
-    },
-    [bundle]
-  );
-  const deselect = useCallback5((productId, variantId) => {
-    setSelections((prev) => {
-      if (!prev.has(`${productId}:${variantId}`)) return prev;
-      const next = new Map(prev);
-      next.delete(`${productId}:${variantId}`);
-      return next;
-    });
-  }, []);
-  const setQuantity = useCallback5(
-    (productId, variant, quantity) => {
-      if (!bundle) return;
-      const rule = ruleFor(bundle, productId);
-      const maxAddable = maxAddableQuantity(variant, rule.max, 0);
-      const key = `${productId}:${variant.id}`;
-      setSelections((prev) => {
-        const next = new Map(prev);
-        if (quantity < rule.min || maxAddable < rule.min) {
-          next.delete(key);
-          return next;
-        }
-        const clamped = Math.min(quantity, maxAddable);
-        next.set(key, {
-          productId,
-          variantId: variant.id,
-          quantity: clamped
-        });
-        return next;
-      });
-    },
-    [bundle]
-  );
-  const handleAddToCart = useCallback5(async () => {
-    if (!bundle || !valid) return;
-    const byVariant = /* @__PURE__ */ new Map();
-    for (const sel of selections.values()) {
-      if (sel.quantity <= 0) continue;
-      byVariant.set(
-        sel.variantId,
-        (byVariant.get(sel.variantId) ?? 0) + sel.quantity
-      );
-    }
-    const lines = Array.from(byVariant.entries()).map(
-      ([variantId, quantity]) => ({
-        merchandiseId: variantId,
-        quantity,
-        attributes: [
-          { key: "_lime_bundle_gid", value: bundle.id },
-          { key: "_lime_bundle_type", value: bundle.bundleType }
-        ]
-      })
-    );
-    setAddingToCart(true);
-    setCartError(null);
-    try {
-      await onAddToCart(lines);
-      const totalPrice = lines.reduce((sum, line) => {
-        const product = bundle.products.find(
-          (p) => p.variants.nodes.some((v) => v.id === line.merchandiseId)
-        );
-        const variant = product?.variants.nodes.find(
-          (v) => v.id === line.merchandiseId
-        );
-        return sum + parseFloat(variant?.price.amount ?? "0") * line.quantity;
-      }, 0);
-      trackAddToCart({
-        quantity: totalQuantity,
-        totalPrice: Math.round(totalPrice * 100) / 100
-      });
-      setSelections(/* @__PURE__ */ new Map());
-    } catch (err) {
-      const error = err instanceof Error ? err : new Error(String(err));
-      setCartError(error.message);
-      onError?.(error);
-    } finally {
-      setAddingToCart(false);
-    }
-  }, [bundle, selections, valid, onAddToCart, onError, trackAddToCart, totalQuantity]);
-  if (result.status === "loading") {
-    return /* @__PURE__ */ jsxs3("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
-      /* @__PURE__ */ jsx3("div", { className: "lb-skeleton lb-skeleton--title" }),
-      /* @__PURE__ */ jsx3("div", { className: "lb-skeleton lb-skeleton--products" })
-    ] });
-  }
-  if (result.status === "error") return null;
-  if (!bundle) return null;
-  const currency = bundle.products[0]?.priceRange.minVariantPrice.currencyCode ?? "USD";
-  return /* @__PURE__ */ jsxs3(
-    "div",
-    {
-      ref: (el) => {
-        elementRef(el);
-        setConfigVarsRef(el);
-      },
-      className: `lb-bundle lb-bundle--mix-match ${className ?? ""}`,
-      role: "region",
-      "aria-label": bundle.title,
-      children: [
-        /* @__PURE__ */ jsx3("h3", { className: "lb-bundle__title", children: bundle.title }),
-        bundle.discountLabel && /* @__PURE__ */ jsx3("span", { className: "lb-bundle__discount-badge", children: bundle.discountLabel }),
-        /* @__PURE__ */ jsx3("p", { className: "lb-bundle__instructions", children: requiredPicks > 0 ? `Pick ${requiredPicks} product${requiredPicks === 1 ? "" : "s"}` : "Pick your products" }),
-        /* @__PURE__ */ jsx3("div", { className: "lb-bundle__products lb-bundle__products--selectable", children: bundle.products.map((product) => /* @__PURE__ */ jsx3(
-          MixMatchProductRow,
-          {
-            bundle,
-            product,
-            currency,
-            showStepper,
-            selections,
-            onSelect: selectVariant,
-            onDeselect: deselect,
-            onSetQuantity: setQuantity
-          },
-          product.id
-        )) }),
-        validationMessage && /* @__PURE__ */ jsx3("p", { className: "lb-bundle__validation", role: "status", children: validationMessage }),
-        cartError && /* @__PURE__ */ jsx3("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
-        /* @__PURE__ */ jsx3(
-          "button",
-          {
-            className: "lb-bundle__cta",
-            onClick: handleAddToCart,
-            disabled: addingToCart || !valid,
-            "aria-busy": addingToCart,
-            children: addingToCart ? "Adding..." : bundle.widgetConfig.cta.ctaText ?? `Add ${totalQuantity} Items to Cart`
-          }
-        )
-      ]
-    }
-  );
-}
-function MixMatchProductRow({
-  bundle,
-  product,
-  currency,
-  showStepper,
-  selections,
-  onSelect,
-  onDeselect,
-  onSetQuantity
-}) {
-  const variants = product.variants.nodes;
-  const optionNames = useMemo5(() => {
-    const first = variants[0];
-    return first ? first.selectedOptions.map((o) => o.name) : [];
-  }, [variants]);
-  const showPicker = variants.length > 1 && optionNames.length > 0;
-  const rule = ruleFor(bundle, product.id);
-  const { selectedValues, selectedVariant, setOptionValue, optionsFor } = useVariantSelection({ variants, optionNames });
-  const displayVariant = selectedVariant ?? variants.find((v) => isVariantFulfillable2(v, rule.min)) ?? variants[0] ?? null;
-  if (!displayVariant) return null;
-  const fulfillable = isVariantFulfillable2(displayVariant, rule.min);
-  const maxAddable = maxAddableQuantity(displayVariant, rule.max, 0);
-  const key = `${product.id}:${displayVariant.id}`;
-  const selected = selections.get(key);
-  const thumbImage = displayVariant.image ?? product.featuredImage;
-  const unitPriceText = formatUnitPrice2(
-    displayVariant.unitPrice,
-    displayVariant.unitPriceMeasurement,
-    currency
-  );
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs2(
     "div",
     {
-      className: `lb-bundle__product lb-bundle__product--selectable ${selected ? "lb-bundle__product--selected" : ""}`,
+      className: isOos ? "lb-bundle-product-row lb-bundle-product-row--oos" : "lb-bundle-product-row",
+      "aria-disabled": isOos || void 0,
+      part: "product",
       children: [
-        thumbImage && /* @__PURE__ */ jsx3(
+        isOos && /* @__PURE__ */ jsx2("span", { className: "lb-bundle-product-row__oos", children: "Out of stock" }),
+        thumbImage && /* @__PURE__ */ jsx2(
           "img",
           {
             src: thumbImage.url,
@@ -1088,27 +917,40 @@ function MixMatchProductRow({
             loading: "lazy"
           }
         ),
-        /* @__PURE__ */ jsxs3("div", { className: "lb-bundle__product-info", children: [
-          /* @__PURE__ */ jsx3("p", { className: "lb-bundle__product-title", children: product.title }),
-          /* @__PURE__ */ jsx3("p", { className: "lb-bundle__product-price", children: formatMoney2(displayVariant.price.amount, currency) }),
-          unitPriceText && /* @__PURE__ */ jsx3("p", { className: "lb-bundle__product-unit-price", children: unitPriceText }),
-          shouldShowLowStockBadge2(
-            displayVariant,
-            rule.min,
-            bundle.widgetConfig.lowStockThreshold,
-            bundle.widgetConfig.showLowStockBadge
-          ) && /* @__PURE__ */ jsxs3("span", { className: "lb-bundle-low-stock-badge", children: [
+        /* @__PURE__ */ jsxs2("div", { className: "lb-bundle__product-info", children: [
+          /* @__PURE__ */ jsx2("p", { className: "lb-bundle__product-title", children: product.title }),
+          !showPicker && displayVariant && variants.length > 1 && /* @__PURE__ */ jsx2("span", { className: "lb-bundle-variant-badge", children: displayVariant.title }),
+          /* @__PURE__ */ jsxs2("span", { className: "lb-bundle-product-prices", children: [
+            compareAt && /* @__PURE__ */ jsx2(
+              "span",
+              {
+                className: "lb-bundle-product-compare-price",
+                "data-product-compare-price": true,
+                children: compareAt
+              }
+            ),
+            /* @__PURE__ */ jsx2("span", { className: "lb-bundle__product-price", "data-product-price": true, children: priceText })
+          ] }),
+          unitPriceText && /* @__PURE__ */ jsx2(
+            "span",
+            {
+              className: "lb-bundle__product-unit-price",
+              "data-product-unit-price": true,
+              children: unitPriceText
+            }
+          ),
+          showLowStock && /* @__PURE__ */ jsxs2("span", { className: "lb-bundle-low-stock-badge", children: [
             "Only ",
             displayVariant.quantityAvailable,
             " left"
           ] }),
-          showPicker && !selected && /* @__PURE__ */ jsx3("div", { className: "lb-bundle__product-variant-pickers", children: optionNames.map((optionName, optionIndex) => {
+          showPicker && /* @__PURE__ */ jsx2("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__ */ jsx3(
+            return /* @__PURE__ */ jsx2(
               VariantDropdown,
               {
                 options: dropdownOptions,
@@ -1120,171 +962,2883 @@ function MixMatchProductRow({
             );
           }) })
         ] }),
-        /* @__PURE__ */ jsx3("div", { className: "lb-bundle__product-actions", children: selected ? showStepper ? /* @__PURE__ */ jsxs3("div", { className: "lb-bundle__quantity-control", children: [
-          /* @__PURE__ */ jsx3(
-            "button",
-            {
-              "aria-label": `Decrease ${product.title}`,
-              onClick: () => onSetQuantity(
-                product.id,
-                displayVariant,
-                selected.quantity - 1
-              ),
-              disabled: selected.quantity <= rule.min,
-              children: "\u2212"
-            }
-          ),
-          /* @__PURE__ */ jsx3("span", { "aria-live": "polite", children: selected.quantity }),
-          /* @__PURE__ */ jsx3(
-            "button",
-            {
-              "aria-label": `Increase ${product.title}`,
-              onClick: () => onSetQuantity(
-                product.id,
-                displayVariant,
-                selected.quantity + 1
-              ),
-              disabled: selected.quantity >= maxAddable,
-              children: "+"
-            }
-          ),
-          /* @__PURE__ */ jsx3(
-            "button",
-            {
-              className: "lb-bundle__remove-btn",
-              "aria-label": `Remove ${product.title}`,
-              onClick: () => onDeselect(product.id, displayVariant.id),
-              children: "Remove"
-            }
-          )
-        ] }) : /* @__PURE__ */ jsx3(
-          "button",
-          {
-            className: "lb-bundle__select-btn lb-bundle__select-btn--selected",
-            "aria-label": `Remove ${product.title}`,
-            onClick: () => onDeselect(product.id, displayVariant.id),
-            children: "Selected"
-          }
-        ) : /* @__PURE__ */ jsx3(
-          "button",
-          {
-            className: "lb-bundle__select-btn",
-            onClick: () => onSelect(product.id, displayVariant),
-            disabled: !fulfillable || maxAddable <= 0,
-            children: fulfillable && maxAddable > 0 ? "Select" : "Sold out"
-          }
-        ) })
+        displayVariant && /* @__PURE__ */ jsxs2("span", { className: "lb-bundle-qty-chip", "data-qty-inline": true, children: [
+          "\xD7",
+          displayQty
+        ] })
       ]
     }
   );
 }
 
-// src/components/VolumeBundle.tsx
-import { useCallback as useCallback6, useEffect as useEffect8, useMemo as useMemo6, useState as useState7 } from "react";
+// src/components/MixMatchBundle.tsx
+import { useCallback as useCallback6, useEffect as useEffect11, useMemo as useMemo6, useState as useState8 } from "react";
 import {
   formatMoney as formatMoney3,
   formatUnitPrice as formatUnitPrice3,
-  calculateTierSavings,
-  getActiveTier,
+  calculateDiscount as calculateDiscount2,
   isVariantFulfillable as isVariantFulfillable3,
-  shouldShowLowStockBadge as shouldShowLowStockBadge3
+  DEFAULT_PRODUCT_RULE as DEFAULT_PRODUCT_RULE2
 } from "@lime-bundles/core";
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-function VolumeBundle(props) {
-  const {
-    shopDomain,
-    storefrontAccessToken,
-    bundleGid,
-    appUrl,
-    analyticsEnabled,
-    onAddToCart,
-    onError,
-    className
-  } = props;
-  const result = useBundleData({
+
+// src/hooks/useShopSettings.ts
+import { useEffect as useEffect7, useState as useState6 } from "react";
+import {
+  DEFAULT_OUT_OF_STOCK_BEHAVIOR as DEFAULT_OUT_OF_STOCK_BEHAVIOR2
+} from "@lime-bundles/core";
+function useShopSettings(options) {
+  const [outOfStockBehavior, setOutOfStockBehavior] = useState6(DEFAULT_OUT_OF_STOCK_BEHAVIOR2);
+  const { shopDomain, storefrontAccessToken } = options;
+  useEffect7(() => {
+    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 };
+}
+
+// src/components/MixMatchPicker.tsx
+import {
+  useEffect as useEffect10,
+  useMemo as useMemo5,
+  useRef as useRef6,
+  useState as useState7
+} from "react";
+import { createPortal } from "react-dom";
+import {
+  formatMoney as formatMoney2,
+  formatUnitPrice as formatUnitPrice2,
+  isVariantFulfillable as isVariantFulfillable2,
+  maxAddableQuantity,
+  DEFAULT_PRODUCT_RULE
+} from "@lime-bundles/core";
+
+// src/hooks/useScrollLock.ts
+import { useEffect as useEffect8 } from "react";
+var lockCount = 0;
+var savedY = 0;
+function lock() {
+  if (typeof document === "undefined") return;
+  lockCount += 1;
+  if (lockCount > 1) return;
+  savedY = window.pageYOffset || document.documentElement.scrollTop;
+  const body = document.body;
+  body.style.position = "fixed";
+  body.style.top = `-${savedY}px`;
+  body.style.left = "0";
+  body.style.right = "0";
+  body.style.overflow = "hidden";
+}
+function unlock() {
+  if (typeof document === "undefined") return;
+  if (lockCount <= 0) return;
+  lockCount -= 1;
+  if (lockCount > 0) return;
+  const body = document.body;
+  body.style.position = "";
+  body.style.top = "";
+  body.style.left = "";
+  body.style.right = "";
+  body.style.overflow = "";
+  window.scrollTo(0, savedY);
+}
+function useScrollLock(active) {
+  useEffect8(() => {
+    if (!active) return;
+    lock();
+    return unlock;
+  }, [active]);
+}
+
+// src/hooks/useFocusTrap.ts
+import { useEffect as useEffect9, useRef as useRef5 } from "react";
+var FOCUSABLE_SELECTOR = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])'
+].join(",");
+function getFocusable(container) {
+  const nodes = container.querySelectorAll(FOCUSABLE_SELECTOR);
+  const result = [];
+  nodes.forEach((node) => {
+    if (node.offsetParent !== null || typeof node.offsetParent === "undefined") {
+      result.push(node);
+    }
+  });
+  return result;
+}
+function useFocusTrap({
+  active,
+  containerRef,
+  onEscape,
+  returnFocusRef
+}) {
+  const previouslyFocused = useRef5(null);
+  useEffect9(() => {
+    if (!active) return;
+    const container = containerRef.current;
+    previouslyFocused.current = document.activeElement ?? null;
+    container?.focus();
+    function onKeyDown(e) {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onEscape();
+        return;
+      }
+      if (e.key !== "Tab") return;
+      const node = containerRef.current;
+      if (!node) return;
+      const focusable = getFocusable(node);
+      if (focusable.length === 0) {
+        e.preventDefault();
+        return;
+      }
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      const activeEl = document.activeElement;
+      if (e.shiftKey && activeEl === first) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && activeEl === last) {
+        e.preventDefault();
+        first.focus();
+      }
+    }
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+      const target = returnFocusRef?.current ?? previouslyFocused.current;
+      if (target && typeof target.focus === "function") {
+        target.focus();
+      }
+    };
+  }, [active]);
+}
+
+// src/components/MixMatchPicker.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function ruleFor(bundle, productId, variantId) {
+  if (variantId) {
+    const vRule = bundle.variantRules[variantId];
+    if (vRule) return vRule;
+  }
+  return bundle.productRules[productId] ?? DEFAULT_PRODUCT_RULE;
+}
+function variantRuleFor(bundle, variantId) {
+  return variantId ? bundle.variantRules[variantId] : void 0;
+}
+function sanitizeId(gid) {
+  return gid.replace(/[^a-zA-Z0-9_-]/g, "-");
+}
+function buildEligibleProducts(bundle, oosBehavior) {
+  const result = [];
+  const seen = /* @__PURE__ */ new Set();
+  for (const product of bundle.products) {
+    if (seen.has(product.id)) continue;
+    seen.add(product.id);
+    const rule = ruleFor(bundle, product.id);
+    const available = product.variants.nodes.filter(
+      (v) => isVariantFulfillable2(v, rule.min)
+    );
+    const isOos = available.length === 0;
+    if (isOos && oosBehavior === "hide") continue;
+    result.push({
+      product,
+      variants: product.variants.nodes,
+      firstAvailableVariant: available[0] ?? null,
+      isOos
+    });
+  }
+  return result;
+}
+function normalizeText(str) {
+  return str.normalize("NFD").replace(/[̀-ͯ]/g, "").toLowerCase();
+}
+var FILTERS_ALL = "__all__";
+function MixMatchPicker({
+  outOfStockBehavior,
+  bundle,
+  currency,
+  requiredQty,
+  showStepper,
+  selections,
+  onAdd,
+  onUpdateQuantity,
+  onRemoveVariant,
+  canRemoveVariant,
+  swapUnitsFor,
+  onSwap,
+  onClose,
+  styleVarsRef
+}) {
+  const wc = bundle.widgetConfig;
+  const overlayRef = useRef6(null);
+  const dialogRef = useRef6(null);
+  const mouseDownTarget = useRef6(null);
+  const [open, setOpen] = useState7(false);
+  const [query, setQuery] = useState7("");
+  const [activeType, setActiveType] = useState7(FILTERS_ALL);
+  const eligible = useMemo5(
+    () => buildEligibleProducts(bundle, outOfStockBehavior),
+    [bundle, outOfStockBehavior]
+  );
+  const productTypes = useMemo5(() => {
+    const types = [];
+    const seen = /* @__PURE__ */ new Set();
+    for (const ep of eligible) {
+      const ty = (ep.product.productType ?? "").trim();
+      if (ty && !seen.has(ty)) {
+        seen.add(ty);
+        types.push(ty);
+      }
+    }
+    return types;
+  }, [eligible]);
+  const showFilters = wc.mixMatchShowTypeFilters && productTypes.length >= 2;
+  const totalUnits = selections.reduce((sum, s) => sum + s.quantity, 0);
+  const atCapacity = totalUnits >= requiredQty;
+  const shownUnits = Math.min(totalUnits, requiredQty);
+  useEffect10(() => {
+    const id = requestAnimationFrame(() => setOpen(true));
+    return () => cancelAnimationFrame(id);
+  }, []);
+  useScrollLock(true);
+  useFocusTrap({
+    active: true,
+    containerRef: dialogRef,
+    onEscape: onClose
+  });
+  const remaining = Math.max(0, requiredQty - shownUnits);
+  const subtitle = (() => {
+    if (remaining <= 0) return "Your bundle is complete";
+    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 = useMemo5(() => {
+    const nq = normalizeText(query.trim());
+    return eligible.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]);
+  const showEmpty = filtered.length === 0 && query.trim().length > 0;
+  function onOverlayMouseDown(e) {
+    mouseDownTarget.current = e.target;
+  }
+  function onOverlayMouseUp(e) {
+    if (e.target === overlayRef.current && mouseDownTarget.current === overlayRef.current) {
+      onClose();
+    }
+    mouseDownTarget.current = null;
+  }
+  const titleId = `lb-modal-title-${sanitizeId(bundle.id)}`;
+  const modal = (
+    // The overlay is a backdrop: click-outside-to-close is a mouse convenience;
+    // keyboard users close via Escape (handled by useFocusTrap), and the dialog
+    // 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__ */ jsx3(
+      "div",
+      {
+        ref: (el) => {
+          overlayRef.current = el;
+          styleVarsRef(el);
+        },
+        className: `lb-mix-match__modal-overlay${open ? " lb-mix-match__modal-overlay--open" : ""}`,
+        "data-modal-overlay": true,
+        "data-bundle-gid": bundle.id,
+        onMouseDown: onOverlayMouseDown,
+        onMouseUp: onOverlayMouseUp,
+        children: /* @__PURE__ */ jsxs3(
+          "div",
+          {
+            ref: dialogRef,
+            className: `lb-mix-match__modal${showFilters ? "" : " lb-mix-match__modal--filters-hidden"}`,
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": titleId,
+            tabIndex: -1,
+            children: [
+              /* @__PURE__ */ jsxs3("div", { className: "lb-mix-match__modal-header", children: [
+                /* @__PURE__ */ jsxs3("div", { className: "lb-mix-match__modal-header-top", children: [
+                  /* @__PURE__ */ jsxs3("div", { className: "lb-mix-match__modal-heading", children: [
+                    /* @__PURE__ */ jsx3("h4", { className: "lb-mix-match__modal-title", id: titleId, children: "Add to your bundle" }),
+                    /* @__PURE__ */ jsx3("p", { className: "lb-mix-match__modal-subtitle", "data-modal-subtitle": true, children: subtitle })
+                  ] }),
+                  /* @__PURE__ */ jsx3(
+                    "button",
+                    {
+                      type: "button",
+                      className: "lb-mix-match__modal-close",
+                      "data-modal-close": true,
+                      "aria-label": "Close",
+                      onClick: onClose,
+                      children: /* @__PURE__ */ jsx3(CloseIcon, {})
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx3(
+                  "div",
+                  {
+                    className: "lb-mix-match__progress lb-mix-match__modal-progress",
+                    "data-progress": true,
+                    children: /* @__PURE__ */ jsx3(
+                      "div",
+                      {
+                        className: "lb-mix-match__progress-segments",
+                        role: "progressbar",
+                        "aria-valuenow": shownUnits,
+                        "aria-valuemin": 0,
+                        "aria-valuemax": requiredQty,
+                        children: Array.from({ length: requiredQty }).map((_, i) => /* @__PURE__ */ jsx3(
+                          "span",
+                          {
+                            className: `lb-mix-match__progress-segment${i < shownUnits ? " lb-mix-match__progress-segment--filled" : ""}`,
+                            "data-progress-segment": true
+                          },
+                          i
+                        ))
+                      }
+                    )
+                  }
+                )
+              ] }),
+              wc.showSearch && /* @__PURE__ */ jsxs3("div", { className: "lb-mix-match__modal-search", children: [
+                /* @__PURE__ */ jsx3(
+                  "input",
+                  {
+                    type: "text",
+                    className: "lb-mix-match__modal-search-input",
+                    "data-modal-search": true,
+                    role: "searchbox",
+                    "aria-label": "Search products",
+                    placeholder: "Search products",
+                    autoComplete: "off",
+                    value: query,
+                    onChange: (e) => setQuery(e.target.value)
+                  }
+                ),
+                query.length > 0 && /* @__PURE__ */ jsx3(
+                  "button",
+                  {
+                    type: "button",
+                    className: "lb-mix-match__modal-search-clear",
+                    "data-modal-search-clear": true,
+                    "aria-label": "Clear search",
+                    onClick: () => setQuery(""),
+                    children: /* @__PURE__ */ jsx3(SearchClearIcon, {})
+                  }
+                )
+              ] }),
+              showFilters && /* @__PURE__ */ jsx3(
+                "div",
+                {
+                  className: "lb-mix-match__filters",
+                  "data-modal-filters": true,
+                  role: "group",
+                  "aria-label": "Filter by product type",
+                  children: [FILTERS_ALL, ...productTypes].map((value) => {
+                    const isActive = value === activeType;
+                    return /* @__PURE__ */ jsx3(
+                      "button",
+                      {
+                        type: "button",
+                        className: `lb-mix-match__filter${isActive ? " lb-mix-match__filter--active" : ""}`,
+                        "data-filter": value,
+                        "aria-pressed": isActive,
+                        onClick: () => setActiveType(value),
+                        children: value === FILTERS_ALL ? "All" : value
+                      },
+                      value
+                    );
+                  })
+                }
+              ),
+              /* @__PURE__ */ jsx3("div", { className: "lb-mix-match__modal-list", "data-modal-list": true, children: filtered.map((ep) => /* @__PURE__ */ jsx3(
+                MixMatchPickerRow,
+                {
+                  bundle,
+                  eligible: ep,
+                  currency,
+                  showStepper,
+                  selections,
+                  atCapacity,
+                  remainingUnits: remaining,
+                  onAdd,
+                  onUpdateQuantity,
+                  onRemoveVariant,
+                  canRemoveVariant,
+                  swapUnitsFor,
+                  onSwap
+                },
+                ep.product.id
+              )) }),
+              showEmpty && /* @__PURE__ */ jsx3("div", { className: "lb-mix-match__modal-empty", "data-modal-empty": true, children: /* @__PURE__ */ jsx3("p", { children: "No products match your search" }) }),
+              /* @__PURE__ */ jsx3("span", { "data-modal-live": true, "aria-live": "polite", className: "lb-visually-hidden", children: `${filtered.length} products shown` }),
+              /* @__PURE__ */ jsxs3("div", { className: "lb-mix-match__modal-footer", children: [
+                /* @__PURE__ */ jsx3(
+                  "span",
+                  {
+                    className: "lb-mix-match__modal-footer-count",
+                    "data-modal-footer-count": true,
+                    "aria-live": "polite",
+                    children: `${shownUnits} of ${requiredQty} added`
+                  }
+                ),
+                /* @__PURE__ */ jsx3(
+                  "button",
+                  {
+                    type: "button",
+                    className: "lb-mix-match__modal-done",
+                    "data-modal-done": true,
+                    onClick: onClose,
+                    children: "Done"
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      }
+    )
+  );
+  if (typeof document === "undefined") return null;
+  return createPortal(modal, document.body);
+}
+function MixMatchPickerRow({
+  bundle,
+  eligible,
+  currency,
+  showStepper,
+  selections,
+  atCapacity,
+  remainingUnits,
+  onAdd,
+  onUpdateQuantity,
+  onRemoveVariant,
+  canRemoveVariant,
+  swapUnitsFor,
+  onSwap
+}) {
+  const { product, variants, isOos } = eligible;
+  const rule = ruleFor(bundle, product.id);
+  const optionNames = useMemo5(() => {
+    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) => isVariantFulfillable2(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 = useMemo5(() => {
+    if (!currentVariant) return 0;
+    let sum = 0;
+    for (const s of selections) {
+      if (s.productId === product.id && s.variantId === currentVariant.id) {
+        sum += s.quantity;
+      }
+    }
+    return sum;
+  }, [selections, product.id, currentVariant]);
+  const committedSelection = useMemo5(
+    () => currentVariant ? selections.find((s) => s.variantId === currentVariant.id) ?? null : null,
+    [selections, currentVariant]
+  );
+  const variantInBundle = committedSelection !== null;
+  const committedQty = committedSelection?.quantity ?? 0;
+  const productOtherUnits = useMemo5(() => {
+    if (!currentVariant) return 0;
+    let sum = 0;
+    for (const s of selections) {
+      if (s.productId === product.id && s.variantId !== currentVariant.id) {
+        sum += s.quantity;
+      }
+    }
+    return sum;
+  }, [selections, product.id, currentVariant]);
+  const swapUnits = currentVariant ? swapUnitsFor?.(product.id, currentVariant.id) ?? 0 : 0;
+  const inSwapState = swapUnits >= vRule.min;
+  const spotCeiling = inSwapState ? swapUnits : Math.min(
+    rule.max - productOtherUnits,
+    committedQty + remainingUnits,
+    variantMax ?? Infinity
+  );
+  const cap = currentVariant ? maxAddableQuantity(
+    currentVariant,
+    spotCeiling,
+    Math.max(0, alreadyInBundle - committedQty)
+  ) : 0;
+  const stepperMax = Math.max(vRule.min, cap);
+  const [qty, setQty] = useState7(vRule.min);
+  useEffect10(() => {
+    setQty((prev) => Math.max(vRule.min, Math.min(prev, stepperMax)));
+  }, [stepperMax, vRule.min]);
+  const currentVariantId = currentVariant?.id ?? null;
+  useEffect10(() => {
+    if (!variantInBundle) setQty(vRule.min);
+  }, [variantInBundle, currentVariantId, vRule.min]);
+  if (!currentVariant) return null;
+  const thumbImage = currentVariant.image ?? product.featuredImage ?? null;
+  const unitPriceText = formatUnitPrice2(
+    currentVariant.unitPrice,
+    currentVariant.unitPriceMeasurement,
+    currency
+  );
+  const noStock = cap < vRule.min;
+  const needsMoreSpots = !variantInBundle && !inSwapState && vRule.min > remainingUnits;
+  const addDisabled = !variantInBundle && (inSwapState ? noStock : atCapacity || noStock || needsMoreSpots);
+  const lockedRequired = variantInBundle && currentVariant != null && !(canRemoveVariant?.(currentVariant.id) ?? true);
+  const stepperDisabled = isOos || !variantInBundle && addDisabled;
+  const shownQty = variantInBundle ? committedQty : qty;
+  function handleAddOrRemove() {
+    if (variantInBundle && currentVariant) {
+      onRemoveVariant(currentVariant.id);
+      return;
+    }
+    if (!currentVariant || noStock) return;
+    const pickedQty = showStepper ? qty : vRule.min;
+    const item = {
+      productId: product.id,
+      variantId: currentVariant.id,
+      title: product.title,
+      url: `/products/${product.handle}`,
+      variantTitle: currentVariant.title,
+      featuredImage: thumbImage?.url ?? null,
+      price: parseFloat(currentVariant.price.amount),
+      compareAtPrice: currentVariant.compareAtPrice ? parseFloat(currentVariant.compareAtPrice.amount) : null,
+      unitPrice: unitPriceText,
+      quantity: pickedQty
+    };
+    if (inSwapState && onSwap) {
+      onSwap({ ...item, quantity: Math.min(pickedQty, swapUnits) });
+      return;
+    }
+    if (atCapacity || needsMoreSpots) return;
+    onAdd(item);
+  }
+  const priceCents = parseFloat(currentVariant.price.amount);
+  const compareCents = currentVariant.compareAtPrice ? parseFloat(currentVariant.compareAtPrice.amount) : null;
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: `lb-mix-match__modal-product${isOos ? " lb-mix-match__modal-product--sold-out" : ""}${variantInBundle ? " lb-mix-match__modal-product--in-bundle" : ""}`,
+      "data-product-item": true,
+      "data-title": normalizeText(product.title),
+      "data-type": product.productType ?? "",
+      "aria-disabled": isOos || void 0,
+      children: [
+        /* @__PURE__ */ jsxs3("div", { className: "lb-mix-match__modal-product-thumb", children: [
+          thumbImage && /* @__PURE__ */ jsx3(
+            "img",
+            {
+              src: thumbImage.url,
+              alt: thumbImage.altText ?? product.title,
+              loading: "lazy"
+            }
+          ),
+          variantInBundle && /* @__PURE__ */ jsx3("span", { className: "lb-mix-match__modal-added-badge", children: "Added" })
+        ] }),
+        /* @__PURE__ */ jsxs3("div", { className: "lb-mix-match__modal-product-info", children: [
+          /* @__PURE__ */ jsx3("p", { className: "lb-mix-match__modal-product-title", children: /* @__PURE__ */ jsx3(
+            "a",
+            {
+              href: `/products/${product.handle}`,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              children: product.title
+            }
+          ) }),
+          /* @__PURE__ */ jsxs3("p", { className: "lb-mix-match__modal-product-price", children: [
+            /* @__PURE__ */ jsx3("span", { "data-row-price-sale": true, children: formatMoney2(priceCents, currency) }),
+            compareCents !== null && compareCents > priceCents && /* @__PURE__ */ jsx3("s", { className: "lb-mix-match__modal-product-compare", "data-row-compare": true, children: formatMoney2(compareCents, currency) })
+          ] }),
+          unitPriceText && /* @__PURE__ */ jsx3("p", { className: "lb-mix-match__modal-product-unit-price lb-bundle-product-unit-price", children: unitPriceText }),
+          showPicker && /* @__PURE__ */ jsx3("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__ */ jsxs3(
+              "div",
+              {
+                className: "lb-bundle-variant-option-group",
+                children: [
+                  /* @__PURE__ */ jsx3("span", { className: "lb-bundle-variant-option-label", children: optionName }),
+                  /* @__PURE__ */ jsx3(
+                    VariantDropdown,
+                    {
+                      className: "lb-mix-match__variant-select-dropdown",
+                      options: dropdownOptions,
+                      value: selectedValues[optionIndex] ?? null,
+                      onChange: (v) => setOptionValue(optionIndex, v),
+                      ariaLabel: optionName
+                    }
+                  )
+                ]
+              },
+              optionName
+            );
+          }) }),
+          !showPicker && variants.length === 1 && currentVariant.title !== "Default Title" && /* @__PURE__ */ jsx3("span", { className: "lb-mix-match__filled-variant", children: currentVariant.title }),
+          !isOos && needsMoreSpots && remainingUnits > 0 && /* @__PURE__ */ jsx3("span", { className: "lb-mix-match__modal-needs-spots", children: rule.min === 1 ? "Needs 1 spot" : `Needs ${rule.min} spots` }),
+          isOos ? /* @__PURE__ */ jsx3("span", { className: "lb-mix-match__modal-sold-out-label", children: "Sold out" }) : /* @__PURE__ */ jsxs3("div", { className: "lb-mix-match__modal-product-actions", children: [
+            showStepper && /* @__PURE__ */ jsx3("div", { className: "lb-bundle-variant-option-group lb-mix-match__qty-stepper-group", children: /* @__PURE__ */ jsxs3(
+              "div",
+              {
+                className: "lb-mix-match__qty-stepper",
+                role: "group",
+                "aria-label": "Quantity",
+                children: [
+                  /* @__PURE__ */ jsx3(
+                    "button",
+                    {
+                      type: "button",
+                      className: "lb-mix-match__qty-stepper-button lb-mix-match__qty-stepper-button--minus",
+                      "aria-label": "Decrease quantity",
+                      disabled: stepperDisabled || shownQty <= rule.min,
+                      onClick: () => {
+                        if (variantInBundle && currentVariant) {
+                          onUpdateQuantity(
+                            product.id,
+                            currentVariant.id,
+                            Math.max(rule.min, committedQty - 1)
+                          );
+                        } else {
+                          setQty((q) => Math.max(rule.min, q - 1));
+                        }
+                      },
+                      children: "\u2212"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx3(
+                    "span",
+                    {
+                      className: "lb-mix-match__qty-stepper-value",
+                      "data-row-qty": true,
+                      "aria-live": "polite",
+                      children: shownQty
+                    }
+                  ),
+                  /* @__PURE__ */ jsx3(
+                    "button",
+                    {
+                      type: "button",
+                      className: "lb-mix-match__qty-stepper-button lb-mix-match__qty-stepper-button--plus",
+                      "aria-label": "Increase quantity",
+                      disabled: stepperDisabled || shownQty >= stepperMax,
+                      onClick: () => {
+                        if (variantInBundle && currentVariant) {
+                          onUpdateQuantity(
+                            product.id,
+                            currentVariant.id,
+                            Math.min(stepperMax, committedQty + 1)
+                          );
+                        } else {
+                          setQty((q) => Math.min(stepperMax, q + 1));
+                        }
+                      },
+                      children: "+"
+                    }
+                  )
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsx3(
+              "button",
+              {
+                type: "button",
+                className: `lb-mix-match__modal-add${variantInBundle ? " lb-mix-match__modal-add--added" : ""}${lockedRequired ? " lb-mix-match__modal-add--required" : ""}`,
+                "data-add-product": true,
+                "aria-label": variantInBundle ? lockedRequired ? `${product.title} is required and cannot be removed` : `Remove ${product.title}` : `${inSwapState ? "Swap" : "Add"} ${product.title}`,
+                disabled: addDisabled || lockedRequired,
+                onClick: handleAddOrRemove,
+                children: variantInBundle ? lockedRequired ? "Required" : "Remove" : inSwapState ? "Swap" : "Add"
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function CloseIcon() {
+  return /* @__PURE__ */ jsxs3(
+    "svg",
+    {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 20 20",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx3("line", { x1: "5", y1: "5", x2: "15", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
+        /* @__PURE__ */ jsx3("line", { x1: "15", y1: "5", x2: "5", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+      ]
+    }
+  );
+}
+function SearchClearIcon() {
+  return /* @__PURE__ */ jsx3(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 20 20",
+      fill: "currentColor",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx3("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
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function ruleFor2(bundle, productId, variantId) {
+  if (variantId) {
+    const vRule = bundle.variantRules[variantId];
+    if (vRule) return vRule;
+  }
+  return bundle.productRules[productId] ?? DEFAULT_PRODUCT_RULE2;
+}
+function variantRuleFor2(bundle, variantId) {
+  return variantId ? bundle.variantRules[variantId] : void 0;
+}
+function canRemoveItem(bundle, selections, item) {
+  if (variantRuleFor2(bundle, item.variantId)?.required) return false;
+  const rule = ruleFor2(bundle, item.productId);
+  if (!rule.required) return true;
+  const unitsElsewhere = selections.filter((s) => s.productId === item.productId && s !== item).reduce((sum, s) => sum + s.quantity, 0);
+  return unitsElsewhere >= rule.min;
+}
+function swapUnitsForItem(bundle, selections, productId, variantId) {
+  const rule = ruleFor2(bundle, productId);
+  if (!rule.required || rule.max !== rule.min) return 0;
+  if (selections.some((s) => s.variantId === variantId)) return 0;
+  return selections.filter((s) => s.productId === productId && s.variantId !== variantId).reduce((sum, s) => sum + s.quantity, 0);
+}
+function MixMatchBundle(props) {
+  const {
+    shopDomain,
+    storefrontAccessToken,
+    bundleGid,
+    appUrl,
+    analyticsEnabled,
+    onAddToCart,
+    onError,
+    className
+  } = props;
+  const result = useBundleData({
+    shopDomain,
+    storefrontAccessToken,
+    bundleGid
+  });
+  const { outOfStockBehavior } = useShopSettings({
+    shopDomain,
+    storefrontAccessToken
+  });
+  const { elementRef, trackAddToCart } = useAnalytics({
+    shopDomain,
+    appUrl: appUrl ?? `https://${shopDomain}`,
+    bundleGid,
+    bundleType: "mix_match",
+    enabled: analyticsEnabled !== false
+  });
+  const [selections, setSelections] = useState8([]);
+  const [seededFor, setSeededFor] = useState8(null);
+  const [pickerOpen, setPickerOpen] = useState8(false);
+  const [addingToCart, setAddingToCart] = useState8(false);
+  const [cartError, setCartError] = useState8(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();
+  useEffect11(() => {
+    if (result.status === "error") {
+      onError?.(result.error);
+      return;
+    }
+    if (result.status === "success" && result.bundle.bundleType !== "mix_match") {
+      onError?.(
+        new Error(
+          `MixMatchBundle: expected bundleType="mix_match", got "${result.bundle.bundleType}"`
+        )
+      );
+    }
+  }, [result, onError]);
+  useEffect11(() => {
+    if (!bundle || seededFor === bundle.id) return;
+    setSeededFor(bundle.id);
+    const seedCurrency = bundle.products[0]?.priceRange.minVariantPrice.currencyCode ?? "USD";
+    const seeds = [];
+    for (const [pid, rule] of Object.entries(bundle.productRules)) {
+      if (!rule.required) continue;
+      const product = bundle.products.find((p) => p.id === pid);
+      const variant = product?.variants.nodes.find(
+        (v) => isVariantFulfillable3(v, rule.min)
+      );
+      if (!product || !variant) continue;
+      seeds.push({
+        productId: product.id,
+        variantId: variant.id,
+        title: product.title,
+        url: `/products/${product.handle}`,
+        variantTitle: variant.title,
+        featuredImage: variant.image?.url ?? product.featuredImage?.url ?? null,
+        price: parseFloat(variant.price.amount),
+        compareAtPrice: variant.compareAtPrice ? parseFloat(variant.compareAtPrice.amount) : null,
+        unitPrice: formatUnitPrice3(
+          variant.unitPrice,
+          variant.unitPriceMeasurement,
+          seedCurrency
+        ),
+        quantity: rule.min
+      });
+    }
+    if (seeds.length > 0) setSelections(seeds);
+  }, [bundle, seededFor]);
+  const showStepper = bundle?.widgetConfig.mixMatchShowQuantitySelector !== false;
+  const requiredUnits = bundle?.minQuantity ?? 0;
+  const totalQuantity = useMemo6(
+    () => selections.reduce((sum, s) => sum + s.quantity, 0),
+    [selections]
+  );
+  const meetsMinUnits = totalQuantity >= requiredUnits && requiredUnits > 0;
+  const valid = !!bundle && meetsMinUnits;
+  const shownUnits = Math.min(totalQuantity, requiredUnits);
+  const remaining = Math.max(0, requiredUnits - shownUnits);
+  const summary = useMemo6(() => {
+    let comparePrice = 0;
+    let salePrice = 0;
+    for (const sel of selections) {
+      if (sel.quantity <= 0) continue;
+      comparePrice += sel.price * sel.quantity;
+      if (bundle) {
+        salePrice += calculateDiscount2(
+          sel.price,
+          bundle.discountConfig.discountType,
+          bundle.discountConfig.discountValue
+        ) * sel.quantity;
+      }
+    }
+    const savings = Math.max(0, comparePrice - salePrice);
+    const savingsPercent = comparePrice > 0 && savings > 0 ? Math.round(savings / comparePrice * 100) : 0;
+    return { comparePrice, salePrice, savings, savingsPercent };
+  }, [selections, bundle]);
+  const addSelection = useCallback6(
+    (item) => {
+      setSelections((prev) => {
+        const units = prev.reduce((sum, s) => sum + s.quantity, 0);
+        if (units + item.quantity > requiredUnits) return prev;
+        if (prev.some((s) => s.variantId === item.variantId)) return prev;
+        return [...prev, item];
+      });
+    },
+    [requiredUnits]
+  );
+  const updateQuantity = useCallback6(
+    (productId, variantId, quantity) => {
+      setSelections((prev) => {
+        const idx = prev.findIndex(
+          (s) => s.productId === productId && s.variantId === variantId
+        );
+        if (idx === -1) return prev;
+        const otherUnits = prev.reduce(
+          (sum, s, i) => i === idx ? sum : sum + s.quantity,
+          0
+        );
+        const clamped = Math.max(
+          1,
+          Math.min(quantity, requiredUnits - otherUnits)
+        );
+        if (clamped === prev[idx].quantity) return prev;
+        const next = prev.slice();
+        next[idx] = { ...next[idx], quantity: clamped };
+        return next;
+      });
+    },
+    [requiredUnits]
+  );
+  const swapSelection = useCallback6(
+    (item) => {
+      setSelections((prev) => {
+        if (!bundle) return prev;
+        const swapUnits = swapUnitsForItem(
+          bundle,
+          prev,
+          item.productId,
+          item.variantId
+        );
+        if (swapUnits <= 0) return prev;
+        const qty = Math.min(Math.max(1, item.quantity), swapUnits);
+        let freed = 0;
+        const next = [];
+        for (const s of prev) {
+          if (freed < qty && s.productId === item.productId && s.variantId !== item.variantId) {
+            const take = Math.min(s.quantity, qty - freed);
+            freed += take;
+            if (s.quantity > take) {
+              next.push({ ...s, quantity: s.quantity - take });
+            }
+          } else {
+            next.push(s);
+          }
+        }
+        if (freed === 0) return prev;
+        next.push({ ...item, quantity: freed });
+        return next;
+      });
+    },
+    [bundle]
+  );
+  const removeVariant = useCallback6(
+    (variantId) => {
+      setSelections((prev) => {
+        const idx = prev.findIndex((s) => s.variantId === variantId);
+        if (idx === -1) return prev;
+        if (bundle && !canRemoveItem(bundle, prev, prev[idx])) return prev;
+        const next = prev.slice();
+        next.splice(idx, 1);
+        return next;
+      });
+    },
+    [bundle]
+  );
+  const removeSlot = useCallback6(
+    (index) => {
+      setSelections((prev) => {
+        if (index < 0 || index >= prev.length) return prev;
+        if (bundle && !canRemoveItem(bundle, prev, prev[index])) return prev;
+        const next = prev.slice();
+        next.splice(index, 1);
+        return next;
+      });
+    },
+    [bundle]
+  );
+  const handleAddToCart = useCallback6(async () => {
+    if (!bundle || !valid) return;
+    const grouped = /* @__PURE__ */ new Map();
+    for (const sel of selections) {
+      if (sel.quantity <= 0) continue;
+      const key = `${sel.productId}::${sel.variantId}`;
+      const existing = grouped.get(key);
+      if (existing) existing.quantity += sel.quantity;
+      else grouped.set(key, { variantId: sel.variantId, quantity: sel.quantity });
+    }
+    const lines = Array.from(grouped.values()).map((line) => ({
+      merchandiseId: line.variantId,
+      quantity: line.quantity,
+      attributes: [
+        { key: "_lime_bundle_gid", value: bundle.id },
+        { key: "_lime_bundle_type", value: bundle.bundleType }
+      ]
+    }));
+    setAddingToCart(true);
+    setCartError(null);
+    try {
+      await onAddToCart(lines);
+      const totalPrice = selections.reduce(
+        (sum, sel) => sum + sel.price * sel.quantity,
+        0
+      );
+      trackAddToCart({
+        quantity: totalQuantity,
+        totalPrice: Math.round(totalPrice * 100) / 100
+      });
+      setSelections([]);
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error(String(err));
+      setCartError(error.message);
+      onError?.(error);
+    } finally {
+      setAddingToCart(false);
+    }
+  }, [bundle, selections, valid, onAddToCart, onError, trackAddToCart, totalQuantity]);
+  if (result.status === "loading") {
+    return /* @__PURE__ */ jsxs4("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
+      /* @__PURE__ */ jsx4("div", { className: "lb-skeleton lb-skeleton--title" }),
+      /* @__PURE__ */ jsx4("div", { className: "lb-skeleton lb-skeleton--products" })
+    ] });
+  }
+  if (result.status === "error") return null;
+  if (!bundle) return null;
+  const inStockCount = countInStockProducts(bundle);
+  if (requiredUnits > 0 && inStockCount < requiredUnits) return null;
+  const requiredBlocked = Object.entries(bundle.productRules).some(
+    ([pid, rule]) => {
+      if (!rule.required) return false;
+      const product = bundle.products.find((p) => p.id === pid);
+      return !product?.variants.nodes.some(
+        (v) => isVariantFulfillable3(v, rule.min)
+      );
+    }
+  );
+  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__ */ jsxs4(
+    "div",
+    {
+      ref: (el) => {
+        elementRef(el);
+        setConfigVarsRef(el);
+      },
+      className: `lb-bundle lb-bundle--mix-match lb-mix-match ${className ?? ""}`,
+      role: "region",
+      "aria-label": bundle.title,
+      "data-required-quantity": requiredUnits,
+      children: [
+        /* @__PURE__ */ jsx4("div", { className: "lb-bundle-header", children: /* @__PURE__ */ jsxs4("div", { className: "lb-bundle-header__content", children: [
+          /* @__PURE__ */ jsx4("h3", { className: "lb-bundle-title", children: bundle.title }),
+          bundle.description && /* @__PURE__ */ jsx4("p", { className: "lb-bundle-subtitle", children: bundle.description })
+        ] }) }),
+        /* @__PURE__ */ jsxs4("div", { className: "lb-mix-match__progress", "data-progress": true, children: [
+          /* @__PURE__ */ jsx4(
+            "div",
+            {
+              className: "lb-mix-match__progress-segments",
+              role: "progressbar",
+              "aria-valuenow": shownUnits,
+              "aria-valuemin": 0,
+              "aria-valuemax": requiredUnits,
+              children: Array.from({ length: requiredUnits }).map((_, i) => /* @__PURE__ */ jsx4(
+                "span",
+                {
+                  className: `lb-mix-match__progress-segment${i < shownUnits ? " lb-mix-match__progress-segment--filled" : ""}`,
+                  "data-progress-segment": true
+                },
+                i
+              ))
+            }
+          ),
+          /* @__PURE__ */ jsxs4("div", { className: "lb-mix-match__progress-labels", children: [
+            /* @__PURE__ */ jsx4(
+              "span",
+              {
+                className: "lb-mix-match__progress-count",
+                "data-progress-count": true,
+                "aria-live": "polite",
+                children: `${shownUnits} of ${requiredUnits} added`
+              }
+            ),
+            /* @__PURE__ */ jsx4(
+              "span",
+              {
+                className: "lb-mix-match__progress-remaining",
+                "data-progress-remaining": true,
+                "aria-live": "polite",
+                children: remaining > 0 ? `${remaining} more to go` : "Complete"
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx4(
+          "div",
+          {
+            className: "lb-mix-match__slots lb-edge-fade",
+            "data-selection-slots": true,
+            ref: slotsEdgeFadeRef,
+            children: selections.map((item, index) => (
+              /* Whole card reopens the picker to edit this pick. The inner 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__ */ jsxs4(
+                "div",
+                {
+                  className: "lb-mix-match__slot lb-mix-match__slot--filled",
+                  onClick: () => setPickerOpen(true),
+                  children: [
+                    item.featuredImage && /* @__PURE__ */ jsx4("div", { className: "lb-bundle-thumbnail", children: /* @__PURE__ */ jsx4("img", { src: item.featuredImage, alt: item.title, loading: "lazy" }) }),
+                    /* @__PURE__ */ jsxs4("div", { className: "lb-mix-match__filled-info", children: [
+                      /* @__PURE__ */ jsx4(
+                        "button",
+                        {
+                          type: "button",
+                          className: "lb-mix-match__filled-title",
+                          "aria-label": `Edit selection: ${item.title}`,
+                          children: item.title
+                        }
+                      ),
+                      item.variantTitle && item.variantTitle !== "Default Title" && /* @__PURE__ */ jsx4("span", { className: "lb-mix-match__filled-variant", children: item.variantTitle }),
+                      /* @__PURE__ */ jsxs4("span", { className: "lb-mix-match__filled-price", children: [
+                        item.compareAtPrice !== null && item.compareAtPrice > item.price && /* @__PURE__ */ jsx4("s", { className: "lb-mix-match__filled-compare", children: formatMoney3(item.compareAtPrice, currency) }),
+                        /* @__PURE__ */ jsx4("span", { className: "lb-bundle-product-price", children: formatMoney3(item.price, currency) }),
+                        /* @__PURE__ */ jsx4("span", { className: "lb-bundle-qty-inline", children: `\xD7${item.quantity}` })
+                      ] }),
+                      item.unitPrice && /* @__PURE__ */ jsx4("span", { className: "lb-bundle-product-unit-price", children: item.unitPrice })
+                    ] }),
+                    canRemoveItem(bundle, selections, item) ? /* @__PURE__ */ jsx4(
+                      "button",
+                      {
+                        type: "button",
+                        className: "lb-mix-match__slot-remove",
+                        "aria-label": `Remove ${item.title}`,
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          removeSlot(index);
+                        },
+                        children: /* @__PURE__ */ jsx4(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__ */ jsx4("span", { className: "lb-mix-match__slot-required", children: "Required" })
+                    )
+                  ]
+                },
+                `${item.productId}:${item.variantId}:${index}`
+              )
+            ))
+          }
+        ),
+        totalQuantity < requiredUnits && /* @__PURE__ */ jsxs4(
+          "button",
+          {
+            type: "button",
+            className: "lb-mix-match__add-product",
+            "data-add-product-trigger": true,
+            onClick: () => setPickerOpen(true),
+            children: [
+              /* @__PURE__ */ jsx4("span", { className: "lb-mix-match__add-product-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx4(PlusIcon, {}) }),
+              /* @__PURE__ */ jsx4("span", { className: "lb-mix-match__add-product-label", children: "Add a product" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx4("div", { className: "lb-bundle-divider" }),
+        selections.length > 0 && /* @__PURE__ */ jsxs4("div", { className: "lb-bundle-summary", "data-pricing-section": true, children: [
+          /* @__PURE__ */ jsxs4("div", { className: "lb-bundle-summary__text", children: [
+            /* @__PURE__ */ jsx4("span", { className: "lb-bundle-summary__label", children: "Bundle total" }),
+            bundle.widgetConfig.savingsBar.visible && summary.savings > 0 && /* @__PURE__ */ jsxs4("p", { className: "lb-bundle-savings-line", "data-savings-bar": true, children: [
+              "You save",
+              " ",
+              /* @__PURE__ */ jsx4("span", { "data-savings-amount": true, children: formatMoney3(summary.savings, currency) }),
+              " ",
+              /* @__PURE__ */ jsxs4("span", { "data-savings-percent": true, children: [
+                "(",
+                summary.savingsPercent,
+                "%)"
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs4("span", { className: "lb-bundle-summary__prices", children: [
+            bundle.widgetConfig.pricing.showComparePrice && summary.savings > 0 && /* @__PURE__ */ jsx4("span", { className: "lb-bundle-compare-price", "data-compare-price": true, children: formatMoney3(summary.comparePrice, currency) }),
+            /* @__PURE__ */ jsx4("span", { className: "lb-bundle-sale-price", "data-sale-price": true, children: formatMoney3(summary.salePrice, currency) })
+          ] })
+        ] }),
+        cartError && /* @__PURE__ */ jsx4("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
+        /* @__PURE__ */ jsx4(
+          "button",
+          {
+            className: "lb-bundle__cta",
+            onClick: handleAddToCart,
+            disabled: addingToCart || !valid,
+            "aria-busy": addingToCart,
+            children: ctaLabel
+          }
+        ),
+        pickerOpen && /* @__PURE__ */ jsx4(
+          MixMatchPicker,
+          {
+            outOfStockBehavior,
+            bundle,
+            currency,
+            requiredQty: requiredUnits,
+            showStepper,
+            selections,
+            onAdd: addSelection,
+            onUpdateQuantity: updateQuantity,
+            onRemoveVariant: removeVariant,
+            canRemoveVariant: (variantId) => {
+              const item = selections.find((s) => s.variantId === variantId);
+              return item ? canRemoveItem(bundle, selections, item) : true;
+            },
+            swapUnitsFor: (productId, variantId) => swapUnitsForItem(bundle, selections, productId, variantId),
+            onSwap: swapSelection,
+            onClose: () => setPickerOpen(false),
+            styleVarsRef: setModalConfigVarsRef
+          }
+        )
+      ]
+    }
+  );
+}
+function countInStockProducts(bundle) {
+  const seen = /* @__PURE__ */ new Set();
+  let count = 0;
+  for (const product of bundle.products) {
+    if (seen.has(product.id)) continue;
+    seen.add(product.id);
+    const rule = ruleFor2(bundle, product.id);
+    const fulfillable = product.variants.nodes.some(
+      (v) => isVariantFulfillable3(v, rule.min)
+    );
+    if (fulfillable) count += 1;
+  }
+  return count;
+}
+function PlusIcon() {
+  return /* @__PURE__ */ jsxs4(
+    "svg",
+    {
+      width: "18",
+      height: "18",
+      viewBox: "0 0 18 18",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx4("line", { x1: "9", y1: "3", x2: "9", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
+        /* @__PURE__ */ jsx4("line", { x1: "3", y1: "9", x2: "15", y2: "9", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+      ]
+    }
+  );
+}
+function CloseIcon2() {
+  return /* @__PURE__ */ jsxs4(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 20 20",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx4("line", { x1: "5", y1: "5", x2: "15", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
+        /* @__PURE__ */ jsx4("line", { x1: "15", y1: "5", x2: "5", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+      ]
+    }
+  );
+}
+
+// src/components/VolumeBundle.tsx
+import { useCallback as useCallback7, useEffect as useEffect12, useMemo as useMemo7, useState as useState9 } from "react";
+import {
+  formatMoney as formatMoney4,
+  formatUnitPrice as formatUnitPrice4,
+  calculateTierSavings,
+  getActiveTier,
+  getMinTierQuantity,
+  isVariantFulfillable as isVariantFulfillable4,
+  shouldShowLowStockBadge as shouldShowLowStockBadge2
+} from "@lime-bundles/core";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function VolumeBundle(props) {
+  const {
+    shopDomain,
+    storefrontAccessToken,
+    bundleGid,
+    appUrl,
+    analyticsEnabled,
+    onAddToCart,
+    onError,
+    className
+  } = props;
+  const result = useBundleData({
+    shopDomain,
+    storefrontAccessToken,
+    bundleGid
+  });
+  const { elementRef, trackAddToCart } = useAnalytics({
+    shopDomain,
+    appUrl: appUrl ?? `https://${shopDomain}`,
+    bundleGid,
+    bundleType: "volume",
+    enabled: analyticsEnabled !== false
+  });
+  const [quantity, setQuantity] = useState9(1);
+  const [addingToCart, setAddingToCart] = useState9(false);
+  const [cartError, setCartError] = useState9(null);
+  const bundle = result.status === "success" && result.bundle.bundleType === "volume" ? result.bundle : null;
+  const setConfigVarsRef = useWidgetConfigVars(bundle?.widgetConfig);
+  const tiersEdgeFadeRef = useEdgeFade();
+  useEffect12(() => {
+    if (result.status === "error") {
+      onError?.(result.error);
+      return;
+    }
+    if (result.status === "success" && result.bundle.bundleType !== "volume") {
+      onError?.(
+        new Error(
+          `VolumeBundle: expected bundleType="volume", got "${result.bundle.bundleType}"`
+        )
+      );
+    }
+  }, [result, onError]);
+  const product = bundle?.products[0];
+  const variants = useMemo7(() => product?.variants.nodes ?? [], [product]);
+  const optionNames = useMemo7(() => {
+    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 ? getMinTierQuantity(bundle.volumeTiers) : 1;
+  const isSoldOut = variants.length > 0 && !variants.some((v) => isVariantFulfillable4(v, minTierQty));
+  const displayVariant = selectedVariant ?? variants.find((v) => isVariantFulfillable4(v, minTierQty)) ?? variants[0];
+  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 ? formatUnitPrice4(
+    displayVariant.unitPrice,
+    displayVariant.unitPriceMeasurement,
+    currency
+  ) : null;
+  const tierSavings = useMemo7(
+    () => bundle ? calculateTierSavings(
+      bundle.volumeTiers,
+      basePrice,
+      quantity,
+      bundle.discountConfig.discountType
+    ) : [],
+    [bundle, basePrice, quantity]
+  );
+  const activeTier = bundle ? getActiveTier(bundle.volumeTiers, quantity) : null;
+  const popularTierIndex = useMemo7(() => {
+    if (!bundle?.widgetConfig.popularBadge.visible || tierSavings.length === 0) {
+      return -1;
+    }
+    const pinned = bundle.widgetConfig.popularBadge.tierIndex;
+    if (pinned !== void 0) {
+      return Math.min(Math.max(pinned, 0), tierSavings.length - 1);
+    }
+    let best = 0;
+    for (let i = 1; i < tierSavings.length; i++) {
+      if (tierSavings[i].savings > tierSavings[best].savings) best = i;
+    }
+    return best;
+  }, [bundle, tierSavings]);
+  const activeUnitPrice = tierSavings.find((ts) => ts.tier === activeTier)?.unitPrice ?? basePrice;
+  const undiscountedTotal = basePrice * quantity;
+  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 = useCallback7(async () => {
+    if (!bundle || !product) return;
+    const variant = selectedVariant ?? product.variants.nodes.find(
+      (v) => isVariantFulfillable4(v, quantity)
+    );
+    if (!variant) return;
+    const lines = [
+      {
+        merchandiseId: variant.id,
+        quantity,
+        attributes: [
+          { key: "_lime_bundle_gid", value: bundle.id },
+          { key: "_lime_bundle_type", value: bundle.bundleType }
+        ]
+      }
+    ];
+    setAddingToCart(true);
+    setCartError(null);
+    try {
+      await onAddToCart(lines);
+      const unitPrice = tierSavings.find((ts) => ts.tier === activeTier)?.unitPrice ?? basePrice;
+      trackAddToCart({
+        productId: product.id,
+        quantity,
+        totalPrice: Math.round(unitPrice * quantity * 100) / 100
+      });
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error(String(err));
+      setCartError(error.message);
+      onError?.(error);
+    } finally {
+      setAddingToCart(false);
+    }
+  }, [
+    bundle,
+    product,
+    quantity,
+    activeTier,
+    basePrice,
+    onAddToCart,
+    onError,
+    trackAddToCart,
+    selectedVariant,
+    tierSavings
+  ]);
+  if (result.status === "loading") {
+    return /* @__PURE__ */ jsxs5("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
+      /* @__PURE__ */ jsx5("div", { className: "lb-skeleton lb-skeleton--title" }),
+      /* @__PURE__ */ jsx5("div", { className: "lb-skeleton lb-skeleton--tiers" })
+    ] });
+  }
+  if (result.status === "error") return null;
+  if (!bundle) return null;
+  if (!product) return null;
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      ref: (el) => {
+        elementRef(el);
+        setConfigVarsRef(el);
+      },
+      className: `lb-bundle lb-bundle--volume ${className ?? ""}`,
+      role: "region",
+      "aria-label": bundle.title,
+      children: [
+        /* @__PURE__ */ jsx5("div", { className: "lb-bundle-header", children: /* @__PURE__ */ jsxs5("div", { className: "lb-bundle-header__content", children: [
+          /* @__PURE__ */ jsx5("h3", { className: "lb-bundle-title", children: bundle.title }),
+          bundle.description && /* @__PURE__ */ jsx5("p", { className: "lb-bundle-subtitle", children: bundle.description })
+        ] }) }),
+        /* @__PURE__ */ jsxs5("div", { className: "lb-bundle-product-row lb-bundle-product-row--volume", children: [
+          thumbImage && /* @__PURE__ */ jsx5(
+            "img",
+            {
+              src: thumbImage.url,
+              alt: thumbImage.altText ?? product.title,
+              className: "lb-bundle__product-image",
+              loading: "lazy"
+            }
+          ),
+          /* @__PURE__ */ jsxs5("div", { className: "lb-bundle__product-info", children: [
+            /* @__PURE__ */ jsx5("p", { className: "lb-bundle__product-title", children: product.title }),
+            /* @__PURE__ */ jsxs5("p", { className: "lb-bundle__product-price", children: [
+              formatMoney4(basePrice, currency),
+              " each"
+            ] }),
+            unitPriceText && /* @__PURE__ */ jsx5("p", { className: "lb-bundle__product-unit-price", children: unitPriceText }),
+            showPicker && /* @__PURE__ */ jsx5("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__ */ jsx5(
+                VariantDropdown,
+                {
+                  options: dropdownOptions,
+                  value: selectedValues[optionIndex] ?? null,
+                  onChange: (v) => setOptionValue(optionIndex, v),
+                  ariaLabel: optionName
+                },
+                optionName
+              );
+            }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx5(
+          "div",
+          {
+            className: "lb-bundle__tiers lb-edge-fade",
+            role: "table",
+            "aria-label": "Volume discounts",
+            ref: tiersEdgeFadeRef,
+            children: tierSavings.map((ts, tierIndex) => {
+              const savingsPercent = Math.round(ts.savingsPercent);
+              const showCompare = bundle.widgetConfig.pricing.showComparePrice && ts.savings > 0;
+              return /* @__PURE__ */ jsxs5(
+                "div",
+                {
+                  className: `lb-bundle__tier ${ts.isActive ? "lb-bundle__tier--active" : ""}`,
+                  role: "row",
+                  children: [
+                    /* @__PURE__ */ jsx5("span", { className: "lb-bundle__tier-radio", "aria-hidden": "true", children: /* @__PURE__ */ jsx5("span", { className: "lb-bundle__tier-radio-dot" }) }),
+                    /* @__PURE__ */ jsxs5("span", { className: "lb-bundle__tier-info", role: "cell", children: [
+                      /* @__PURE__ */ jsxs5("span", { className: "lb-bundle__tier-label", children: [
+                        "Buy ",
+                        ts.tier.minQuantity
+                      ] }),
+                      /* @__PURE__ */ jsxs5("span", { className: "lb-bundle__tier-price", children: [
+                        showCompare && /* @__PURE__ */ jsx5("span", { className: "lb-bundle__tier-compare", children: formatMoney4(basePrice, currency) }),
+                        /* @__PURE__ */ jsx5("span", { children: formatMoney4(ts.unitPrice, currency) }),
+                        /* @__PURE__ */ jsx5("span", { className: "lb-bundle__tier-unit", children: "each" })
+                      ] })
+                    ] }),
+                    (tierIndex === popularTierIndex || savingsPercent > 0) && /* @__PURE__ */ jsxs5("span", { className: "lb-bundle__tier-right", role: "cell", children: [
+                      tierIndex === popularTierIndex && /* @__PURE__ */ jsx5("span", { className: "lb-bundle__tier-badge", children: bundle.widgetConfig.popularBadge.text }),
+                      savingsPercent > 0 && /* @__PURE__ */ jsxs5("span", { className: "lb-bundle__tier-savings", children: [
+                        "Save ",
+                        savingsPercent,
+                        "%"
+                      ] })
+                    ] })
+                  ]
+                },
+                ts.tier.minQuantity
+              );
+            })
+          }
+        ),
+        /* @__PURE__ */ jsxs5("div", { className: "lb-bundle__quantity-selector", children: [
+          /* @__PURE__ */ jsx5("label", { htmlFor: `lb-qty-${bundle.id}`, children: "Quantity" }),
+          /* @__PURE__ */ jsxs5("div", { className: "lb-bundle__quantity-control", children: [
+            /* @__PURE__ */ jsx5(
+              "button",
+              {
+                "aria-label": "Decrease quantity",
+                onClick: () => setQuantity((q) => Math.max(1, q - 1)),
+                children: "\u2212"
+              }
+            ),
+            /* @__PURE__ */ jsx5(
+              "input",
+              {
+                id: `lb-qty-${bundle.id}`,
+                type: "number",
+                min: 1,
+                value: quantity,
+                onChange: (e) => {
+                  const val = parseInt(e.target.value, 10);
+                  if (!isNaN(val) && val > 0) setQuantity(val);
+                },
+                className: "lb-bundle__quantity-input"
+              }
+            ),
+            /* @__PURE__ */ jsx5(
+              "button",
+              {
+                "aria-label": "Increase quantity",
+                onClick: () => setQuantity((q) => q + 1),
+                children: "+"
+              }
+            )
+          ] })
+        ] }),
+        cartError && /* @__PURE__ */ jsx5("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
+        bundle && displayVariant && shouldShowLowStockBadge2(
+          displayVariant,
+          minTierQty,
+          bundle.widgetConfig.lowStockThreshold,
+          bundle.widgetConfig.showLowStockBadge
+        ) && /* @__PURE__ */ jsxs5("span", { className: "lb-bundle-low-stock-badge", children: [
+          "Only ",
+          displayVariant.quantityAvailable,
+          " left"
+        ] }),
+        /* @__PURE__ */ jsx5("div", { className: "lb-bundle-divider" }),
+        /* @__PURE__ */ jsxs5("div", { className: "lb-bundle-summary", children: [
+          /* @__PURE__ */ jsxs5("div", { className: "lb-bundle-summary__text", children: [
+            /* @__PURE__ */ jsxs5("span", { className: "lb-bundle-summary__label", "data-total-label": true, children: [
+              "Total",
+              bundle.widgetConfig.pricing.showItemCount && /* @__PURE__ */ jsxs5("span", { "data-item-count": true, children: [
+                " ",
+                "(",
+                quantity,
+                " item",
+                quantity === 1 ? "" : "s",
+                ")"
+              ] })
+            ] }),
+            bundle.widgetConfig.savingsBar.visible && volumeSavings > 0 && /* @__PURE__ */ jsxs5("p", { className: "lb-bundle-savings-line", "data-savings-bar": true, children: [
+              "You save",
+              " ",
+              /* @__PURE__ */ jsx5("span", { "data-savings-amount": true, children: formatMoney4(volumeSavings, currency) }),
+              " ",
+              /* @__PURE__ */ jsxs5("span", { "data-savings-percent": true, children: [
+                "(",
+                volumeSavingsPercent,
+                "%)"
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs5("span", { className: "lb-bundle-summary__prices", children: [
+            bundle.widgetConfig.pricing.showComparePrice && volumeSavings > 0 && /* @__PURE__ */ jsx5("span", { className: "lb-bundle-compare-price", "data-compare-price": true, children: formatMoney4(undiscountedTotal, currency) }),
+            /* @__PURE__ */ jsx5("span", { className: "lb-bundle-sale-price", "data-total-price": true, children: formatMoney4(volumeTotal, currency) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx5(
+          "button",
+          {
+            className: "lb-bundle__cta",
+            onClick: handleAddToCart,
+            disabled: addingToCart || isSoldOut,
+            "aria-busy": addingToCart,
+            children: addingToCart ? "Adding..." : isSoldOut ? "Sold out" : bundle.widgetConfig.cta.ctaText ?? `Add ${quantity} to Cart`
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/BogoBundle.tsx
+import { useCallback as useCallback8, useEffect as useEffect13, useMemo as useMemo8, useState as useState10 } from "react";
+import {
+  formatMoney as formatMoney5,
+  formatUnitPrice as formatUnitPrice5,
+  isVariantFulfillable as isVariantFulfillable5
+} from "@lime-bundles/core";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+function discountedUnit(price, percent) {
+  const cents = Math.round(price * 100);
+  const discounted = cents - Math.floor(cents * percent / 100);
+  return discounted / 100;
+}
+function BogoBundle(props) {
+  const {
+    shopDomain,
+    storefrontAccessToken,
+    bundleGid,
+    appUrl,
+    analyticsEnabled,
+    onAddToCart,
+    onError,
+    className
+  } = props;
+  const result = useBundleData({
+    shopDomain,
+    storefrontAccessToken,
+    bundleGid
+  });
+  const { elementRef, trackAddToCart } = useAnalytics({
+    shopDomain,
+    appUrl: appUrl ?? `https://${shopDomain}`,
+    bundleGid,
+    bundleType: "bogo",
+    enabled: analyticsEnabled !== false
+  });
+  const [addingToCart, setAddingToCart] = useState10(false);
+  const [cartError, setCartError] = useState10(null);
+  const [selectedVariants, setSelectedVariants] = useState10({ buy: null, get: null });
+  const handleVariantChange = useCallback8(
+    (role, variant) => {
+      setSelectedVariants((prev) => {
+        if (prev[role] === variant) return prev;
+        return { ...prev, [role]: variant };
+      });
+    },
+    []
+  );
+  const bundle = result.status === "success" && result.bundle.bundleType === "bogo" ? result.bundle : null;
+  const setConfigVarsRef = useWidgetConfigVars(bundle?.widgetConfig);
+  useEffect13(() => {
+    if (result.status === "error") {
+      onError?.(result.error);
+      return;
+    }
+    if (result.status === "success" && result.bundle.bundleType !== "bogo") {
+      onError?.(
+        new Error(
+          `BogoBundle: expected bundleType="bogo", got "${result.bundle.bundleType}"`
+        )
+      );
+    }
+  }, [result, onError]);
+  const buyProduct = useMemo8(
+    () => bundle?.products.find((p) => p.id === bundle.buyProductId) ?? null,
+    [bundle]
+  );
+  const getProduct = useMemo8(
+    () => 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 = useCallback8(
+    (product, selected, qty) => {
+      if (!product) return null;
+      return selected ?? product.variants.nodes.find((v) => isVariantFulfillable5(v, qty)) ?? product.variants.nodes[0] ?? null;
+    },
+    []
+  );
+  const oosSides = useMemo8(() => {
+    if (!bundle) return 0;
+    const short = (product, qty) => !!product && !product.variants.nodes.some((v) => isVariantFulfillable5(v, qty));
+    return (short(buyProduct, bundle.buyQuantity) ? 1 : 0) + (short(getProduct, bundle.getQuantity) ? 1 : 0);
+  }, [bundle, buyProduct, getProduct]);
+  const handleAddToCart = useCallback8(async () => {
+    if (!bundle || !buyProduct || !getProduct) return;
+    const buyVariant2 = resolveVariant(buyProduct, selectedVariants.buy, bundle.buyQuantity);
+    const getVariant2 = resolveVariant(getProduct, selectedVariants.get, bundle.getQuantity);
+    if (!buyVariant2 || !getVariant2) return;
+    const attributes = [
+      { key: "_lime_bundle_gid", value: bundle.id },
+      { key: "_lime_bundle_type", value: bundle.bundleType }
+    ];
+    const lines = buyVariant2.id === getVariant2.id ? [
+      {
+        merchandiseId: buyVariant2.id,
+        quantity: bundle.buyQuantity + bundle.getQuantity,
+        attributes
+      }
+    ] : [
+      {
+        merchandiseId: buyVariant2.id,
+        quantity: bundle.buyQuantity,
+        attributes
+      },
+      {
+        merchandiseId: getVariant2.id,
+        quantity: bundle.getQuantity,
+        attributes
+      }
+    ];
+    setAddingToCart(true);
+    setCartError(null);
+    try {
+      await onAddToCart(lines);
+      const buyUnit2 = parseFloat(buyVariant2.price.amount);
+      const getUnit2 = parseFloat(getVariant2.price.amount);
+      const totalPrice = buyUnit2 * bundle.buyQuantity + discountedUnit(getUnit2, percent) * bundle.getQuantity;
+      trackAddToCart({
+        quantity: bundle.buyQuantity + bundle.getQuantity,
+        totalPrice: Math.round(totalPrice * 100) / 100
+      });
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error(String(err));
+      setCartError(error.message);
+      onError?.(error);
+    } finally {
+      setAddingToCart(false);
+    }
+  }, [bundle, buyProduct, getProduct, selectedVariants, resolveVariant, onAddToCart, onError, trackAddToCart, percent]);
+  if (result.status === "loading") {
+    return /* @__PURE__ */ jsxs6("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
+      /* @__PURE__ */ jsx6("div", { className: "lb-skeleton lb-skeleton--title" }),
+      /* @__PURE__ */ jsx6("div", { className: "lb-skeleton lb-skeleton--products" })
+    ] });
+  }
+  if (result.status === "error") return null;
+  if (!bundle || !buyProduct || !getProduct) return null;
+  const currency = bundle.products[0]?.priceRange.minVariantPrice.currencyCode ?? "USD";
+  const buyVariant = resolveVariant(buyProduct, selectedVariants.buy, bundle.buyQuantity);
+  const getVariant = resolveVariant(getProduct, selectedVariants.get, bundle.getQuantity);
+  const buyUnit = buyVariant ? parseFloat(buyVariant.price.amount) : 0;
+  const getUnit = getVariant ? parseFloat(getVariant.price.amount) : 0;
+  const comparePrice = buyUnit * bundle.buyQuantity + getUnit * bundle.getQuantity;
+  const salePrice = buyUnit * bundle.buyQuantity + discountedUnit(getUnit, percent) * bundle.getQuantity;
+  const savings = Math.max(0, comparePrice - salePrice);
+  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;
+  const badge = percent === 100 ? "Free" : `${percent}% off`;
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      ref: (el) => {
+        elementRef(el);
+        setConfigVarsRef(el);
+      },
+      className: `lb-bundle lb-bundle--bogo ${className ?? ""}`,
+      role: "region",
+      "aria-label": bundle.title,
+      children: [
+        /* @__PURE__ */ jsx6("div", { className: "lb-bundle-header", children: /* @__PURE__ */ jsxs6("div", { className: "lb-bundle-header__content", children: [
+          /* @__PURE__ */ jsx6("h3", { className: "lb-bundle-title", children: bundle.title }),
+          bundle.description && /* @__PURE__ */ jsx6("p", { className: "lb-bundle-subtitle", children: bundle.description })
+        ] }) }),
+        /* @__PURE__ */ jsxs6("div", { className: "lb-bundle__products", children: [
+          /* @__PURE__ */ jsx6(
+            BogoProductRow,
+            {
+              side: "buy",
+              product: buyProduct,
+              quantity: bundle.buyQuantity,
+              percent,
+              badge: null,
+              currency,
+              onVariantChange: handleVariantChange
+            }
+          ),
+          /* @__PURE__ */ jsx6("div", { className: "lb-bogo__plus", "aria-hidden": "true", children: /* @__PURE__ */ jsxs6("svg", { width: "12", height: "12", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+            /* @__PURE__ */ jsx6("line", { x1: "9", y1: "3", x2: "9", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
+            /* @__PURE__ */ jsx6("line", { x1: "3", y1: "9", x2: "15", y2: "9", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+          ] }) }),
+          /* @__PURE__ */ jsx6(
+            BogoProductRow,
+            {
+              side: "get",
+              product: getProduct,
+              quantity: bundle.getQuantity,
+              percent,
+              badge,
+              currency,
+              onVariantChange: handleVariantChange
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx6("div", { className: "lb-bundle-divider" }),
+        /* @__PURE__ */ jsxs6("div", { className: "lb-bundle-summary", children: [
+          /* @__PURE__ */ jsxs6("div", { className: "lb-bundle-summary__text", children: [
+            /* @__PURE__ */ jsx6("span", { className: "lb-bundle-summary__label", children: "Bundle price" }),
+            showSavings && /* @__PURE__ */ jsxs6("p", { className: "lb-bundle-savings-line", "data-savings-bar": true, children: [
+              "You save",
+              " ",
+              /* @__PURE__ */ jsx6("span", { "data-savings-amount": true, children: formatMoney5(savings, currency) }),
+              " ",
+              /* @__PURE__ */ jsxs6("span", { "data-savings-percent": true, children: [
+                "(",
+                savingsPercent,
+                "%)"
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs6("span", { className: "lb-bundle-summary__prices", children: [
+            showCompare && /* @__PURE__ */ jsx6("span", { className: "lb-bundle-compare-price", "data-compare-price": true, children: formatMoney5(comparePrice, currency) }),
+            /* @__PURE__ */ jsx6("span", { className: "lb-bundle-sale-price", "data-sale-price": true, children: formatMoney5(salePrice, currency) })
+          ] })
+        ] }),
+        cartError && /* @__PURE__ */ jsx6("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
+        /* @__PURE__ */ jsx6(
+          "button",
+          {
+            className: "lb-bundle__cta",
+            onClick: handleAddToCart,
+            disabled: addingToCart || oosSides > 0,
+            "aria-busy": addingToCart,
+            children: addingToCart ? "Adding..." : oosSides > 0 ? `${oosSides} item${oosSides === 1 ? "" : "s"} unavailable` : bundle.widgetConfig.cta.ctaText ?? "Add Bundle to Cart"
+          }
+        )
+      ]
+    }
+  );
+}
+function BogoProductRow({ side, product, quantity, percent, badge, currency, onVariantChange }) {
+  const variants = product.variants.nodes;
+  const optionNames = useMemo8(() => {
+    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
+  });
+  useEffect13(() => {
+    onVariantChange(side, selectedVariant ?? null);
+  }, [selectedVariant, side, onVariantChange]);
+  const displayVariant = selectedVariant ?? variants.find((v) => isVariantFulfillable5(v, quantity)) ?? variants[0];
+  const unit = displayVariant ? parseFloat(displayVariant.price.amount) : 0;
+  const isGet = side === "get" && percent > 0;
+  const priceText = isGet ? formatMoney5(discountedUnit(unit, percent), currency) : formatMoney5(unit, currency);
+  const compareAt = isGet ? formatMoney5(unit, currency) : displayVariant?.compareAtPrice && parseFloat(displayVariant.compareAtPrice.amount) > unit ? formatMoney5(displayVariant.compareAtPrice.amount, currency) : null;
+  const unitPriceText = displayVariant ? formatUnitPrice5(
+    displayVariant.unitPrice,
+    displayVariant.unitPriceMeasurement,
+    currency
+  ) : null;
+  const thumbImage = displayVariant?.image ?? product.featuredImage;
+  return /* @__PURE__ */ jsxs6("div", { className: "lb-bundle-product-row", part: "product", "data-bogo-role": side, children: [
+    thumbImage && /* @__PURE__ */ jsx6(
+      "img",
+      {
+        src: thumbImage.url,
+        alt: thumbImage.altText ?? product.title,
+        className: "lb-bundle__product-image",
+        loading: "lazy"
+      }
+    ),
+    /* @__PURE__ */ jsxs6("div", { className: "lb-bundle__product-info", children: [
+      /* @__PURE__ */ jsx6("p", { className: "lb-bundle__product-title", children: product.title }),
+      !showPicker && displayVariant && variants.length > 1 && /* @__PURE__ */ jsx6("span", { className: "lb-bundle-variant-badge", children: displayVariant.title }),
+      /* @__PURE__ */ jsxs6("span", { className: "lb-bundle-product-prices", children: [
+        compareAt && /* @__PURE__ */ jsx6(
+          "span",
+          {
+            className: "lb-bundle-product-compare-price",
+            "data-product-compare-price": true,
+            children: compareAt
+          }
+        ),
+        /* @__PURE__ */ jsx6("span", { className: "lb-bundle__product-price", "data-product-price": true, children: priceText }),
+        /* @__PURE__ */ jsxs6("span", { className: "lb-bundle-qty-inline", "data-qty-inline": true, children: [
+          "\xD7",
+          quantity
+        ] })
+      ] }),
+      unitPriceText && /* @__PURE__ */ jsx6(
+        "span",
+        {
+          className: "lb-bundle__product-unit-price",
+          "data-product-unit-price": true,
+          children: unitPriceText
+        }
+      ),
+      showPicker && /* @__PURE__ */ jsx6("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__ */ jsx6(
+          VariantDropdown,
+          {
+            options: dropdownOptions,
+            value: selectedValues[optionIndex] ?? null,
+            onChange: (v) => setOptionValue(optionIndex, v),
+            ariaLabel: optionName
+          },
+          optionName
+        );
+      }) })
+    ] }),
+    badge && /* @__PURE__ */ jsx6("span", { className: "lb-bogo__badge", children: badge })
+  ] });
+}
+
+// src/components/MultiStepBundle.tsx
+import { useCallback as useCallback9, useEffect as useEffect15, useMemo as useMemo10, useState as useState12 } from "react";
+import {
+  formatMoney as formatMoney7,
+  formatUnitPrice as formatUnitPrice7,
+  calculateDiscount as calculateDiscount3,
+  isVariantFulfillable as isVariantFulfillable7,
+  productsForStep as productsForStep2,
+  stepHeadroom as stepHeadroom2,
+  DEFAULT_PRODUCT_RULE as DEFAULT_PRODUCT_RULE4
+} from "@lime-bundles/core";
+
+// src/components/MultiStepPicker.tsx
+import {
+  useEffect as useEffect14,
+  useMemo as useMemo9,
+  useRef as useRef7,
+  useState as useState11
+} from "react";
+import { createPortal as createPortal2 } from "react-dom";
+import {
+  formatMoney as formatMoney6,
+  formatUnitPrice as formatUnitPrice6,
+  isVariantFulfillable as isVariantFulfillable6,
+  maxAddableQuantity as maxAddableQuantity2,
+  productsForStep,
+  stepHeadroom,
+  DEFAULT_PRODUCT_RULE as DEFAULT_PRODUCT_RULE3
+} from "@lime-bundles/core";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+function ruleFor3(bundle, productId, variantId) {
+  if (variantId) {
+    const vRule = bundle.variantRules[variantId];
+    if (vRule) return vRule;
+  }
+  return bundle.productRules[productId] ?? DEFAULT_PRODUCT_RULE3;
+}
+function variantRuleFor3(bundle, variantId) {
+  return variantId ? bundle.variantRules[variantId] : void 0;
+}
+function sanitizeId2(gid) {
+  return gid.replace(/[^a-zA-Z0-9_-]/g, "-");
+}
+function buildEligibleProducts2(bundle, stepIndex, oosBehavior) {
+  const result = [];
+  for (const product of productsForStep(bundle, stepIndex)) {
+    const rule = ruleFor3(bundle, product.id);
+    const available = product.variants.nodes.filter(
+      (v) => isVariantFulfillable6(v, rule.min)
+    );
+    const isOos = available.length === 0;
+    if (isOos && oosBehavior === "hide") continue;
+    result.push({
+      product,
+      variants: product.variants.nodes,
+      firstAvailableVariant: available[0] ?? null,
+      isOos
+    });
+  }
+  return result;
+}
+function normalizeText2(str) {
+  return str.normalize("NFD").replace(/[̀-ͯ]/g, "").toLowerCase();
+}
+var FILTERS_ALL2 = "__all__";
+function MultiStepPicker({
+  outOfStockBehavior,
+  bundle,
+  currency,
+  initialStep,
+  showStepper,
+  selections,
+  onAdd,
+  onUpdateQuantity,
+  onRemoveVariant,
+  canRemoveVariant,
+  swapUnitsFor,
+  onSwap,
+  onClose,
+  styleVarsRef
+}) {
+  const wc = bundle.widgetConfig;
+  const steps = bundle.steps;
+  const overlayRef = useRef7(null);
+  const dialogRef = useRef7(null);
+  const titleRef = useRef7(null);
+  const mouseDownTarget = useRef7(null);
+  const [open, setOpen] = useState11(false);
+  const [stepIndex, setStepIndex] = useState11(
+    () => Math.max(0, Math.min(steps.length - 1, initialStep))
+  );
+  const [query, setQuery] = useState11("");
+  const [activeType, setActiveType] = useState11(FILTERS_ALL2);
+  const [announcement, setAnnouncement] = useState11("");
+  const step = steps[stepIndex];
+  const stepMin = step?.minQuantity ?? 1;
+  const stepPicks = selections[stepIndex] ?? [];
+  const unitsInStep = stepPicks.reduce((sum, s) => sum + s.quantity, 0);
+  const stepIsSatisfied = unitsInStep >= stepMin;
+  const isLastStep = stepIndex === steps.length - 1;
+  const shownUnits = Math.min(unitsInStep, stepMin);
+  const eligible = useMemo9(
+    () => buildEligibleProducts2(bundle, stepIndex, outOfStockBehavior),
+    [bundle, stepIndex, outOfStockBehavior]
+  );
+  const productTypes = useMemo9(() => {
+    const types = [];
+    const seen = /* @__PURE__ */ new Set();
+    for (const ep of eligible) {
+      const ty = (ep.product.productType ?? "").trim();
+      if (ty && !seen.has(ty)) {
+        seen.add(ty);
+        types.push(ty);
+      }
+    }
+    return types;
+  }, [eligible]);
+  const showFilters = wc.mixMatchShowTypeFilters && productTypes.length >= 2;
+  useEffect14(() => {
+    const id = requestAnimationFrame(() => setOpen(true));
+    return () => cancelAnimationFrame(id);
+  }, []);
+  useScrollLock(true);
+  useFocusTrap({
+    active: true,
+    containerRef: dialogRef,
+    onEscape: onClose
+  });
+  function goToStep(i) {
+    const clamped = Math.max(0, Math.min(steps.length - 1, i));
+    setStepIndex(clamped);
+    setQuery("");
+    setActiveType(FILTERS_ALL2);
+    const target = steps[clamped];
+    const targetPicks = selections[clamped] ?? [];
+    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`
+    );
+    titleRef.current?.focus();
+  }
+  const subtitle = `Step ${stepIndex + 1} of ${steps.length} \xB7 ${step?.name ?? ""}`;
+  const filtered = useMemo9(() => {
+    const nq = normalizeText2(query.trim());
+    return eligible.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]);
+  const showEmpty = filtered.length === 0 && query.trim().length > 0;
+  function onOverlayMouseDown(e) {
+    mouseDownTarget.current = e.target;
+  }
+  function onOverlayMouseUp(e) {
+    if (e.target === overlayRef.current && mouseDownTarget.current === overlayRef.current) {
+      onClose();
+    }
+    mouseDownTarget.current = null;
+  }
+  const titleId = `lb-modal-title-${sanitizeId2(bundle.id)}`;
+  const modal = (
+    // The overlay is a backdrop: click-outside-to-close is a mouse convenience;
+    // keyboard users close via Escape (handled by useFocusTrap), and the dialog
+    // 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__ */ jsx7(
+      "div",
+      {
+        ref: (el) => {
+          overlayRef.current = el;
+          styleVarsRef(el);
+        },
+        className: `lb-mix-match__modal-overlay${open ? " lb-mix-match__modal-overlay--open" : ""}`,
+        "data-modal-overlay": true,
+        "data-bundle-gid": bundle.id,
+        onMouseDown: onOverlayMouseDown,
+        onMouseUp: onOverlayMouseUp,
+        children: /* @__PURE__ */ jsxs7(
+          "div",
+          {
+            ref: dialogRef,
+            className: `lb-mix-match__modal${showFilters ? "" : " lb-mix-match__modal--filters-hidden"}`,
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": titleId,
+            tabIndex: -1,
+            children: [
+              /* @__PURE__ */ jsxs7("div", { className: "lb-mix-match__modal-header", children: [
+                /* @__PURE__ */ jsxs7("div", { className: "lb-mix-match__modal-header-top", children: [
+                  /* @__PURE__ */ jsxs7("div", { className: "lb-mix-match__modal-heading", children: [
+                    /* @__PURE__ */ jsx7(
+                      "h4",
+                      {
+                        className: "lb-mix-match__modal-title",
+                        id: titleId,
+                        tabIndex: -1,
+                        ref: titleRef,
+                        children: "Add to your bundle"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx7("p", { className: "lb-mix-match__modal-subtitle", "data-modal-subtitle": true, children: subtitle })
+                  ] }),
+                  /* @__PURE__ */ jsx7(
+                    "button",
+                    {
+                      type: "button",
+                      className: "lb-mix-match__modal-close",
+                      "data-modal-close": true,
+                      "aria-label": "Close",
+                      onClick: onClose,
+                      children: /* @__PURE__ */ jsx7(CloseIcon3, {})
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx7(
+                  "div",
+                  {
+                    className: "lb-mix-match__progress lb-mix-match__modal-progress",
+                    "data-progress": true,
+                    children: /* @__PURE__ */ jsx7(
+                      "div",
+                      {
+                        className: "lb-mix-match__progress-segments",
+                        "data-modal-step-segments": true,
+                        role: "progressbar",
+                        "aria-valuenow": shownUnits,
+                        "aria-valuemin": 0,
+                        "aria-valuemax": stepMin,
+                        children: Array.from({ length: stepMin }).map((_, i) => /* @__PURE__ */ jsx7(
+                          "span",
+                          {
+                            className: `lb-mix-match__progress-segment${i < shownUnits ? " lb-mix-match__progress-segment--filled" : ""}`,
+                            "data-progress-segment": true
+                          },
+                          i
+                        ))
+                      }
+                    )
+                  }
+                )
+              ] }),
+              wc.showSearch && /* @__PURE__ */ jsxs7("div", { className: "lb-mix-match__modal-search", children: [
+                /* @__PURE__ */ jsx7(
+                  "input",
+                  {
+                    type: "text",
+                    className: "lb-mix-match__modal-search-input",
+                    "data-modal-search": true,
+                    role: "searchbox",
+                    "aria-label": "Search products",
+                    placeholder: "Search products",
+                    autoComplete: "off",
+                    value: query,
+                    onChange: (e) => setQuery(e.target.value)
+                  }
+                ),
+                query.length > 0 && /* @__PURE__ */ jsx7(
+                  "button",
+                  {
+                    type: "button",
+                    className: "lb-mix-match__modal-search-clear",
+                    "data-modal-search-clear": true,
+                    "aria-label": "Clear search",
+                    onClick: () => setQuery(""),
+                    children: /* @__PURE__ */ jsx7(SearchClearIcon2, {})
+                  }
+                )
+              ] }),
+              showFilters && /* @__PURE__ */ jsx7(
+                "div",
+                {
+                  className: "lb-mix-match__filters",
+                  "data-modal-filters": true,
+                  role: "group",
+                  "aria-label": "Filter by product type",
+                  children: [FILTERS_ALL2, ...productTypes].map((value) => {
+                    const isActive = value === activeType;
+                    return /* @__PURE__ */ jsx7(
+                      "button",
+                      {
+                        type: "button",
+                        className: `lb-mix-match__filter${isActive ? " lb-mix-match__filter--active" : ""}`,
+                        "data-filter": value,
+                        "aria-pressed": isActive,
+                        onClick: () => setActiveType(value),
+                        children: value === FILTERS_ALL2 ? "All" : value
+                      },
+                      value
+                    );
+                  })
+                }
+              ),
+              /* @__PURE__ */ jsx7("div", { className: "lb-mix-match__modal-list", "data-modal-list": true, children: filtered.map((ep) => /* @__PURE__ */ jsx7(
+                MultiStepPickerRow,
+                {
+                  bundle,
+                  eligible: ep,
+                  currency,
+                  showStepper,
+                  stepIndex,
+                  selections,
+                  onAdd,
+                  swapUnitsFor,
+                  onSwap,
+                  onUpdateQuantity,
+                  onRemoveVariant,
+                  canRemoveVariant
+                },
+                `${stepIndex}:${ep.product.id}`
+              )) }),
+              showEmpty && /* @__PURE__ */ jsx7("div", { className: "lb-mix-match__modal-empty", "data-modal-empty": true, children: /* @__PURE__ */ jsx7("p", { children: "No products match your search" }) }),
+              /* @__PURE__ */ jsx7("span", { "data-modal-live": true, "aria-live": "polite", className: "lb-visually-hidden", children: announcement || (query.trim() ? `${filtered.length} products shown` : "") }),
+              /* @__PURE__ */ jsxs7("div", { className: "lb-mix-match__modal-footer lb-multi-step__modal-footer", children: [
+                stepIndex > 0 && /* @__PURE__ */ jsx7(
+                  "button",
+                  {
+                    type: "button",
+                    className: "lb-multi-step__modal-back",
+                    "data-modal-back": true,
+                    onClick: () => goToStep(stepIndex - 1),
+                    children: "Back"
+                  }
+                ),
+                /* @__PURE__ */ jsx7(
+                  "span",
+                  {
+                    className: "lb-mix-match__modal-footer-count",
+                    "data-modal-footer-count": true,
+                    "aria-live": "polite",
+                    children: `${shownUnits} of ${stepMin} added`
+                  }
+                ),
+                !isLastStep && /* @__PURE__ */ jsx7(
+                  "button",
+                  {
+                    type: "button",
+                    className: "lb-mix-match__modal-done",
+                    "data-modal-next": true,
+                    disabled: !stepIsSatisfied,
+                    onClick: () => {
+                      if (stepIsSatisfied) goToStep(stepIndex + 1);
+                    },
+                    children: "Next"
+                  }
+                ),
+                isLastStep && /* @__PURE__ */ jsx7(
+                  "button",
+                  {
+                    type: "button",
+                    className: "lb-mix-match__modal-done",
+                    "data-modal-done": true,
+                    disabled: !stepIsSatisfied,
+                    onClick: onClose,
+                    children: "Done"
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      }
+    )
+  );
+  if (typeof document === "undefined") return null;
+  return createPortal2(modal, document.body);
+}
+function MultiStepPickerRow({
+  bundle,
+  eligible,
+  currency,
+  showStepper,
+  stepIndex,
+  selections,
+  onAdd,
+  onUpdateQuantity,
+  onRemoveVariant,
+  canRemoveVariant,
+  swapUnitsFor,
+  onSwap
+}) {
+  const { product, variants, isOos } = eligible;
+  const rule = ruleFor3(bundle, product.id);
+  const step = bundle.steps[stepIndex];
+  const optionNames = useMemo9(() => {
+    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) => isVariantFulfillable6(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 = useMemo9(
+    () => selections[stepIndex] ?? [],
+    [selections, stepIndex]
+  );
+  const unitsInStep = stepPicks.reduce((sum, s) => sum + s.quantity, 0);
+  const committedSelection = useMemo9(
+    () => currentVariant ? stepPicks.find((s) => s.variantId === currentVariant.id) ?? null : null,
+    [stepPicks, currentVariant]
+  );
+  const variantInStep = committedSelection !== null;
+  const committedQty = committedSelection?.quantity ?? 0;
+  const productOtherUnits = useMemo9(() => {
+    if (!currentVariant) return 0;
+    let sum = 0;
+    for (let i = 0; i < selections.length; i++) {
+      for (const s of selections[i]) {
+        if (s.productId !== product.id) continue;
+        if (i === stepIndex && s.variantId === currentVariant.id) continue;
+        sum += s.quantity;
+      }
+    }
+    return sum;
+  }, [selections, product.id, currentVariant, stepIndex]);
+  const variantOtherUnits = useMemo9(() => {
+    if (!currentVariant) return 0;
+    let sum = 0;
+    for (const picks of selections) {
+      for (const s of picks) {
+        if (s.variantId === currentVariant.id) sum += s.quantity;
+      }
+    }
+    return Math.max(0, sum - committedQty);
+  }, [selections, currentVariant, committedQty]);
+  const swapUnits = currentVariant ? swapUnitsFor?.(stepIndex, product.id, currentVariant.id) ?? 0 : 0;
+  const inSwapState = swapUnits >= vRule.min;
+  const room = stepHeadroom(step?.maxQuantity ?? null, unitsInStep);
+  const productHeadroom = Math.min(
+    rule.max - productOtherUnits,
+    variantMax ?? Infinity
+  );
+  const spotCeiling = inSwapState ? swapUnits : Math.min(
+    productHeadroom,
+    room === Number.POSITIVE_INFINITY ? productHeadroom : committedQty + room
+  );
+  const stockRemaining = currentVariant ? maxAddableQuantity2(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] = useState11(vRule.min);
+  useEffect14(() => {
+    setQty((prev) => Math.max(vRule.min, Math.min(prev, stepperMax)));
+  }, [stepperMax, vRule.min]);
+  const currentVariantId = currentVariant?.id ?? null;
+  useEffect14(() => {
+    if (!variantInStep) setQty(vRule.min);
+  }, [variantInStep, currentVariantId, vRule.min]);
+  if (!currentVariant || !step) return null;
+  const thumbImage = currentVariant.image ?? product.featuredImage ?? null;
+  const unitPriceText = formatUnitPrice6(
+    currentVariant.unitPrice,
+    currentVariant.unitPriceMeasurement,
+    currency
+  );
+  const noStock = cap < vRule.min;
+  const needsMoreSpots = !variantInStep && !inSwapState && room !== Number.POSITIVE_INFINITY && vRule.min > room;
+  const addDisabled = !variantInStep && (inSwapState ? noStock : noStock || needsMoreSpots);
+  const lockedRequired = variantInStep && currentVariant != null && !(canRemoveVariant?.(currentVariant.id) ?? true);
+  const stepperDisabled = isOos || !variantInStep && addDisabled;
+  const shownQty = variantInStep ? committedQty : qty;
+  function handleAddOrRemove() {
+    if (variantInStep && currentVariant) {
+      onRemoveVariant(stepIndex, currentVariant.id);
+      return;
+    }
+    if (!currentVariant || noStock) return;
+    const pickedQty = showStepper ? qty : vRule.min;
+    const item = {
+      productId: product.id,
+      variantId: currentVariant.id,
+      title: product.title,
+      url: `/products/${product.handle}`,
+      variantTitle: currentVariant.title,
+      featuredImage: thumbImage?.url ?? null,
+      price: parseFloat(currentVariant.price.amount),
+      compareAtPrice: currentVariant.compareAtPrice ? parseFloat(currentVariant.compareAtPrice.amount) : null,
+      unitPrice: unitPriceText,
+      quantity: pickedQty
+    };
+    if (inSwapState && onSwap) {
+      onSwap(stepIndex, { ...item, quantity: Math.min(pickedQty, swapUnits) });
+      return;
+    }
+    if (needsMoreSpots) return;
+    onAdd(stepIndex, item);
+  }
+  const priceCents = parseFloat(currentVariant.price.amount);
+  const compareCents = currentVariant.compareAtPrice ? parseFloat(currentVariant.compareAtPrice.amount) : null;
+  return /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      className: `lb-mix-match__modal-product${isOos ? " lb-mix-match__modal-product--sold-out" : ""}${variantInStep ? " lb-mix-match__modal-product--in-bundle" : ""}`,
+      "data-product-item": true,
+      "data-title": normalizeText2(product.title),
+      "data-type": product.productType ?? "",
+      "aria-disabled": isOos || void 0,
+      children: [
+        /* @__PURE__ */ jsxs7("div", { className: "lb-mix-match__modal-product-thumb", children: [
+          thumbImage && /* @__PURE__ */ jsx7(
+            "img",
+            {
+              src: thumbImage.url,
+              alt: thumbImage.altText ?? product.title,
+              loading: "lazy"
+            }
+          ),
+          variantInStep && /* @__PURE__ */ jsx7("span", { className: "lb-mix-match__modal-added-badge", children: "Added" })
+        ] }),
+        /* @__PURE__ */ jsxs7("div", { className: "lb-mix-match__modal-product-info", children: [
+          /* @__PURE__ */ jsx7("p", { className: "lb-mix-match__modal-product-title", children: /* @__PURE__ */ jsx7(
+            "a",
+            {
+              href: `/products/${product.handle}`,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              children: product.title
+            }
+          ) }),
+          /* @__PURE__ */ jsxs7("p", { className: "lb-mix-match__modal-product-price", children: [
+            /* @__PURE__ */ jsx7("span", { "data-row-price-sale": true, children: formatMoney6(priceCents, currency) }),
+            compareCents !== null && compareCents > priceCents && /* @__PURE__ */ jsx7("s", { className: "lb-mix-match__modal-product-compare", "data-row-compare": true, children: formatMoney6(compareCents, currency) })
+          ] }),
+          unitPriceText && /* @__PURE__ */ jsx7("p", { className: "lb-mix-match__modal-product-unit-price lb-bundle-product-unit-price", children: unitPriceText }),
+          showPicker && /* @__PURE__ */ jsx7("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__ */ jsxs7(
+              "div",
+              {
+                className: "lb-bundle-variant-option-group",
+                children: [
+                  /* @__PURE__ */ jsx7("span", { className: "lb-bundle-variant-option-label", children: optionName }),
+                  /* @__PURE__ */ jsx7(
+                    VariantDropdown,
+                    {
+                      className: "lb-mix-match__variant-select-dropdown",
+                      options: dropdownOptions,
+                      value: selectedValues[optionIndex] ?? null,
+                      onChange: (v) => setOptionValue(optionIndex, v),
+                      ariaLabel: optionName
+                    }
+                  )
+                ]
+              },
+              optionName
+            );
+          }) }),
+          !showPicker && variants.length === 1 && currentVariant.title !== "Default Title" && /* @__PURE__ */ jsx7("span", { className: "lb-mix-match__filled-variant", children: currentVariant.title }),
+          !isOos && needsMoreSpots && room > 0 && /* @__PURE__ */ jsx7("span", { className: "lb-mix-match__modal-needs-spots", children: vRule.min === 1 ? "Needs 1 spot" : `Needs ${vRule.min} spots` }),
+          isOos ? /* @__PURE__ */ jsx7("span", { className: "lb-mix-match__modal-sold-out-label", children: "Sold out" }) : /* @__PURE__ */ jsxs7("div", { className: "lb-mix-match__modal-product-actions", children: [
+            showStepper && /* @__PURE__ */ jsx7("div", { className: "lb-bundle-variant-option-group lb-mix-match__qty-stepper-group", children: /* @__PURE__ */ jsxs7(
+              "div",
+              {
+                className: "lb-mix-match__qty-stepper",
+                role: "group",
+                "aria-label": "Quantity",
+                children: [
+                  /* @__PURE__ */ jsx7(
+                    "button",
+                    {
+                      type: "button",
+                      className: "lb-mix-match__qty-stepper-button lb-mix-match__qty-stepper-button--minus",
+                      "aria-label": "Decrease quantity",
+                      disabled: stepperDisabled || shownQty <= vRule.min,
+                      onClick: () => {
+                        if (variantInStep && currentVariant) {
+                          onUpdateQuantity(
+                            stepIndex,
+                            product.id,
+                            currentVariant.id,
+                            Math.max(vRule.min, committedQty - 1)
+                          );
+                        } else {
+                          setQty((q) => Math.max(vRule.min, q - 1));
+                        }
+                      },
+                      children: "\u2212"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx7(
+                    "span",
+                    {
+                      className: "lb-mix-match__qty-stepper-value",
+                      "data-row-qty": true,
+                      "aria-live": "polite",
+                      children: shownQty
+                    }
+                  ),
+                  /* @__PURE__ */ jsx7(
+                    "button",
+                    {
+                      type: "button",
+                      className: "lb-mix-match__qty-stepper-button lb-mix-match__qty-stepper-button--plus",
+                      "aria-label": "Increase quantity",
+                      disabled: stepperDisabled || shownQty >= stepperMax,
+                      onClick: () => {
+                        if (variantInStep && currentVariant) {
+                          onUpdateQuantity(
+                            stepIndex,
+                            product.id,
+                            currentVariant.id,
+                            Math.min(stepperMax, committedQty + 1)
+                          );
+                        } else {
+                          setQty((q) => Math.min(stepperMax, q + 1));
+                        }
+                      },
+                      children: "+"
+                    }
+                  )
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsx7(
+              "button",
+              {
+                type: "button",
+                className: `lb-mix-match__modal-add${variantInStep ? " lb-mix-match__modal-add--added" : ""}${lockedRequired ? " lb-mix-match__modal-add--required" : ""}`,
+                "data-add-product": true,
+                "aria-label": variantInStep ? lockedRequired ? `${product.title} is required and cannot be removed` : `Remove ${product.title}` : `${inSwapState ? "Swap" : "Add"} ${product.title}`,
+                disabled: addDisabled || lockedRequired,
+                onClick: handleAddOrRemove,
+                children: variantInStep ? lockedRequired ? "Required" : "Remove" : inSwapState ? "Swap" : "Add"
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function CloseIcon3() {
+  return /* @__PURE__ */ jsxs7(
+    "svg",
+    {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 20 20",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx7("line", { x1: "5", y1: "5", x2: "15", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
+        /* @__PURE__ */ jsx7("line", { x1: "15", y1: "5", x2: "5", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+      ]
+    }
+  );
+}
+function SearchClearIcon2() {
+  return /* @__PURE__ */ jsx7(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 20 20",
+      fill: "currentColor",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx7("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
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+function ruleFor4(bundle, productId, variantId) {
+  if (variantId) {
+    const vRule = bundle.variantRules[variantId];
+    if (vRule) return vRule;
+  }
+  return bundle.productRules[productId] ?? DEFAULT_PRODUCT_RULE4;
+}
+function variantRuleFor4(bundle, variantId) {
+  return variantId ? bundle.variantRules[variantId] : void 0;
+}
+function canRemoveItem2(bundle, selections, item) {
+  if (variantRuleFor4(bundle, item.variantId)?.required) return false;
+  const rule = ruleFor4(bundle, item.productId);
+  if (!rule.required) return true;
+  let unitsElsewhere = 0;
+  for (const stepPicks of selections) {
+    for (const s of stepPicks) {
+      if (s.productId === item.productId && s !== item) {
+        unitsElsewhere += s.quantity;
+      }
+    }
+  }
+  return unitsElsewhere >= rule.min;
+}
+function swapUnitsForItem2(bundle, selections, step, productId, variantId) {
+  const rule = ruleFor4(bundle, productId);
+  if (!rule.required || rule.max !== rule.min) return 0;
+  const stepPicks = selections[step] ?? [];
+  if (stepPicks.some((s) => s.variantId === variantId)) return 0;
+  return stepPicks.filter((s) => s.productId === productId && s.variantId !== variantId).reduce((sum, s) => sum + s.quantity, 0);
+}
+function MultiStepBundle(props) {
+  const {
+    shopDomain,
+    storefrontAccessToken,
+    bundleGid,
+    appUrl,
+    analyticsEnabled,
+    onAddToCart,
+    onError,
+    className
+  } = props;
+  const result = useBundleData({
     shopDomain,
     storefrontAccessToken,
     bundleGid
   });
+  const { outOfStockBehavior } = useShopSettings({
+    shopDomain,
+    storefrontAccessToken
+  });
   const { elementRef, trackAddToCart } = useAnalytics({
     shopDomain,
     appUrl: appUrl ?? `https://${shopDomain}`,
     bundleGid,
-    bundleType: "volume",
+    bundleType: "multi_step",
     enabled: analyticsEnabled !== false
   });
-  const [quantity, setQuantity] = useState7(1);
-  const [addingToCart, setAddingToCart] = useState7(false);
-  const [cartError, setCartError] = useState7(null);
-  const bundle = result.status === "success" && result.bundle.bundleType === "volume" ? result.bundle : null;
+  const [selections, setSelections] = useState12([]);
+  const [pickerOpenAt, setPickerOpenAt] = useState12(null);
+  const [addingToCart, setAddingToCart] = useState12(false);
+  const [cartError, setCartError] = useState12(null);
+  const bundle = result.status === "success" && result.bundle.bundleType === "multi_step" ? result.bundle : null;
   const setConfigVarsRef = useWidgetConfigVars(bundle?.widgetConfig);
-  useEffect8(() => {
+  const setModalConfigVarsRef = useWidgetConfigVars(bundle?.widgetConfig);
+  useEffect15(() => {
     if (result.status === "error") {
       onError?.(result.error);
       return;
     }
-    if (result.status === "success" && result.bundle.bundleType !== "volume") {
+    if (result.status === "success" && result.bundle.bundleType !== "multi_step") {
       onError?.(
         new Error(
-          `VolumeBundle: expected bundleType="volume", got "${result.bundle.bundleType}"`
+          `MultiStepBundle: expected bundleType="multi_step", got "${result.bundle.bundleType}"`
         )
       );
     }
   }, [result, onError]);
-  const product = bundle?.products[0];
-  const variants = useMemo6(() => product?.variants.nodes ?? [], [product]);
-  const optionNames = useMemo6(() => {
-    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?.volumeTiers[0]?.minQuantity ?? 1;
-  const displayVariant = selectedVariant ?? variants.find((v) => isVariantFulfillable3(v, minTierQty)) ?? variants[0];
-  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 ? formatUnitPrice3(
-    displayVariant.unitPrice,
-    displayVariant.unitPriceMeasurement,
-    currency
-  ) : null;
-  const tierSavings = useMemo6(
-    () => bundle ? calculateTierSavings(
-      bundle.volumeTiers,
-      basePrice,
-      quantity,
-      bundle.discountConfig.discountType
-    ) : [],
-    [bundle, basePrice, quantity]
+  const steps = useMemo10(() => bundle?.steps ?? [], [bundle]);
+  useEffect15(() => {
+    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 = productsForStep2(bundle, i).find((p) => p.id === pid);
+          const variant = product?.variants.nodes.find(
+            (v) => isVariantFulfillable7(v, rule.min)
+          );
+          if (!product || !variant) continue;
+          seeded[i].push({
+            productId: product.id,
+            variantId: variant.id,
+            title: product.title,
+            url: `/products/${product.handle}`,
+            variantTitle: variant.title,
+            featuredImage: variant.image?.url ?? product.featuredImage?.url ?? null,
+            price: parseFloat(variant.price.amount),
+            compareAtPrice: variant.compareAtPrice ? parseFloat(variant.compareAtPrice.amount) : null,
+            unitPrice: formatUnitPrice7(
+              variant.unitPrice,
+              variant.unitPriceMeasurement,
+              seedCurrency
+            ),
+            quantity: rule.min
+          });
+          break;
+        }
+      }
+    }
+    setSelections(seeded);
+  }, [bundle, steps]);
+  const showStepper = bundle?.widgetConfig.mixMatchShowQuantitySelector !== false;
+  const totalMin = useMemo10(
+    () => steps.reduce((sum, s) => sum + s.minQuantity, 0),
+    [steps]
   );
-  const activeTier = bundle ? getActiveTier(bundle.volumeTiers, quantity) : null;
-  const handleAddToCart = useCallback6(async () => {
-    if (!bundle || !product) return;
-    const variant = selectedVariant ?? product.variants.nodes.find(
-      (v) => isVariantFulfillable3(v, quantity)
-    );
-    if (!variant) return;
-    const lines = [
-      {
-        merchandiseId: variant.id,
-        quantity,
-        attributes: [
-          { key: "_lime_bundle_gid", value: bundle.id },
-          { key: "_lime_bundle_type", value: bundle.bundleType }
-        ]
+  const unitsByStep = useMemo10(
+    () => selections.map((picks) => picks.reduce((sum, s) => sum + s.quantity, 0)),
+    [selections]
+  );
+  const totalQuantity = useMemo10(
+    () => unitsByStep.reduce((sum, u) => sum + u, 0),
+    [unitsByStep]
+  );
+  const stepSatisfied = useCallback9(
+    (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 = useMemo10(() => {
+    let comparePrice = 0;
+    let salePrice = 0;
+    for (const stepPicks of selections) {
+      for (const sel of stepPicks) {
+        if (sel.quantity <= 0) continue;
+        comparePrice += sel.price * sel.quantity;
+        if (bundle) {
+          salePrice += calculateDiscount3(
+            sel.price,
+            bundle.discountConfig.discountType,
+            bundle.discountConfig.discountValue
+          ) * sel.quantity;
+        }
       }
-    ];
+    }
+    const savings = Math.max(0, comparePrice - salePrice);
+    const savingsPercent = comparePrice > 0 && savings > 0 ? Math.round(savings / comparePrice * 100) : 0;
+    return { comparePrice, salePrice, savings, savingsPercent };
+  }, [selections, bundle]);
+  const addSelection = useCallback9((step, item) => {
+    setSelections((prev) => {
+      if (step < 0 || step >= prev.length) return prev;
+      if (prev[step].some((s) => s.variantId === item.variantId)) return prev;
+      const next = prev.slice();
+      next[step] = [...next[step], item];
+      return next;
+    });
+  }, []);
+  const swapSelection = useCallback9(
+    (step, item) => {
+      setSelections((prev) => {
+        if (!bundle || step < 0 || step >= prev.length) return prev;
+        const swapUnits = swapUnitsForItem2(
+          bundle,
+          prev,
+          step,
+          item.productId,
+          item.variantId
+        );
+        if (swapUnits <= 0) return prev;
+        const qty = Math.min(Math.max(1, item.quantity), swapUnits);
+        let freed = 0;
+        const stepPicks = [];
+        for (const s of prev[step]) {
+          if (freed < qty && s.productId === item.productId && s.variantId !== item.variantId) {
+            const take = Math.min(s.quantity, qty - freed);
+            freed += take;
+            if (s.quantity > take) {
+              stepPicks.push({ ...s, quantity: s.quantity - take });
+            }
+          } else {
+            stepPicks.push(s);
+          }
+        }
+        if (freed === 0) return prev;
+        stepPicks.push({ ...item, quantity: freed });
+        const next = prev.slice();
+        next[step] = stepPicks;
+        return next;
+      });
+    },
+    [bundle]
+  );
+  const updateQuantity = useCallback9(
+    (step, productId, variantId, quantity) => {
+      setSelections((prev) => {
+        if (step < 0 || step >= prev.length) return prev;
+        const idx = prev[step].findIndex(
+          (s) => s.productId === productId && s.variantId === variantId
+        );
+        if (idx === -1) return prev;
+        const clamped = Math.max(1, quantity);
+        if (clamped === prev[step][idx].quantity) return prev;
+        const next = prev.slice();
+        const stepPicks = next[step].slice();
+        stepPicks[idx] = { ...stepPicks[idx], quantity: clamped };
+        next[step] = stepPicks;
+        return next;
+      });
+    },
+    []
+  );
+  const removeVariant = useCallback9(
+    (step, variantId) => {
+      setSelections((prev) => {
+        if (step < 0 || step >= prev.length) return prev;
+        const idx = prev[step].findIndex((s) => s.variantId === variantId);
+        if (idx === -1) return prev;
+        if (bundle && !canRemoveItem2(bundle, prev, prev[step][idx])) return prev;
+        const next = prev.slice();
+        const stepPicks = next[step].slice();
+        stepPicks.splice(idx, 1);
+        next[step] = stepPicks;
+        return next;
+      });
+    },
+    [bundle]
+  );
+  const removeSlot = useCallback9(
+    (step, index) => {
+      setSelections((prev) => {
+        if (step < 0 || step >= prev.length) return prev;
+        if (index < 0 || index >= prev[step].length) return prev;
+        if (bundle && !canRemoveItem2(bundle, prev, prev[step][index]))
+          return prev;
+        const next = prev.slice();
+        const stepPicks = next[step].slice();
+        stepPicks.splice(index, 1);
+        next[step] = stepPicks;
+        return next;
+      });
+    },
+    [bundle]
+  );
+  const handleAddToCart = useCallback9(async () => {
+    if (!bundle || !valid) return;
+    const grouped = /* @__PURE__ */ new Map();
+    for (const stepPicks of selections) {
+      for (const sel of stepPicks) {
+        if (sel.quantity <= 0) continue;
+        const existing = grouped.get(sel.variantId);
+        if (existing) existing.quantity += sel.quantity;
+        else grouped.set(sel.variantId, { variantId: sel.variantId, quantity: sel.quantity });
+      }
+    }
+    const lines = Array.from(grouped.values()).map((line) => ({
+      merchandiseId: line.variantId,
+      quantity: line.quantity,
+      attributes: [
+        { key: "_lime_bundle_gid", value: bundle.id },
+        { key: "_lime_bundle_type", value: bundle.bundleType }
+      ]
+    }));
     setAddingToCart(true);
     setCartError(null);
     try {
       await onAddToCart(lines);
-      const unitPrice = tierSavings.find((ts) => ts.tier === activeTier)?.unitPrice ?? basePrice;
+      const totalPrice = selections.reduce(
+        (sum, stepPicks) => sum + stepPicks.reduce((s, sel) => s + sel.price * sel.quantity, 0),
+        0
+      );
       trackAddToCart({
-        productId: product.id,
-        quantity,
-        totalPrice: Math.round(unitPrice * quantity * 100) / 100
+        quantity: totalQuantity,
+        totalPrice: Math.round(totalPrice * 100) / 100
       });
+      setSelections(steps.map(() => []));
     } catch (err) {
       const error = err instanceof Error ? err : new Error(String(err));
       setCartError(error.message);
@@ -1292,169 +3846,306 @@ function VolumeBundle(props) {
     } finally {
       setAddingToCart(false);
     }
-  }, [
-    bundle,
-    product,
-    quantity,
-    activeTier,
-    basePrice,
-    onAddToCart,
-    onError,
-    trackAddToCart,
-    selectedVariant,
-    tierSavings
-  ]);
+  }, [bundle, selections, valid, onAddToCart, onError, trackAddToCart, totalQuantity, steps]);
   if (result.status === "loading") {
-    return /* @__PURE__ */ jsxs4("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
-      /* @__PURE__ */ jsx4("div", { className: "lb-skeleton lb-skeleton--title" }),
-      /* @__PURE__ */ jsx4("div", { className: "lb-skeleton lb-skeleton--tiers" })
+    return /* @__PURE__ */ jsxs8("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
+      /* @__PURE__ */ jsx8("div", { className: "lb-skeleton lb-skeleton--title" }),
+      /* @__PURE__ */ jsx8("div", { className: "lb-skeleton lb-skeleton--products" })
     ] });
   }
   if (result.status === "error") return null;
-  if (!bundle) return null;
-  if (!product) return null;
-  return /* @__PURE__ */ jsxs4(
+  if (!bundle || steps.length === 0) return null;
+  for (let i = 0; i < steps.length; i++) {
+    if (!stepHasInStockProduct(bundle, i)) return null;
+  }
+  const requiredBlocked = Object.entries(bundle.productRules).some(
+    ([pid, rule]) => {
+      if (!rule.required) return false;
+      return !steps.some(
+        (_, i) => productsForStep2(bundle, i).some(
+          (p) => p.id === pid && p.variants.nodes.some((v) => isVariantFulfillable7(v, rule.min))
+        )
+      );
+    }
+  );
+  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__ */ jsxs8(
     "div",
     {
       ref: (el) => {
         elementRef(el);
         setConfigVarsRef(el);
       },
-      className: `lb-bundle lb-bundle--volume ${className ?? ""}`,
+      className: `lb-bundle lb-bundle--multi-step lb-mix-match lb-multi-step ${className ?? ""}`,
       role: "region",
       "aria-label": bundle.title,
+      "data-required-quantity": totalMin,
       children: [
-        /* @__PURE__ */ jsx4("h3", { className: "lb-bundle__title", children: bundle.title }),
-        /* @__PURE__ */ jsxs4("div", { className: "lb-bundle__product lb-bundle__product--volume", children: [
-          thumbImage && /* @__PURE__ */ jsx4(
-            "img",
+        /* @__PURE__ */ jsx8("div", { className: "lb-bundle-header", children: /* @__PURE__ */ jsxs8("div", { className: "lb-bundle-header__content", children: [
+          /* @__PURE__ */ jsx8("h3", { className: "lb-bundle-title", children: bundle.title }),
+          bundle.description && /* @__PURE__ */ jsx8("p", { className: "lb-bundle-subtitle", children: bundle.description })
+        ] }) }),
+        /* @__PURE__ */ jsxs8("div", { className: "lb-mix-match__progress", "data-progress": true, children: [
+          /* @__PURE__ */ jsx8(
+            "div",
             {
-              src: thumbImage.url,
-              alt: thumbImage.altText ?? product.title,
-              className: "lb-bundle__product-image",
-              loading: "lazy"
-            }
-          ),
-          /* @__PURE__ */ jsxs4("div", { className: "lb-bundle__product-info", children: [
-            /* @__PURE__ */ jsx4("p", { className: "lb-bundle__product-title", children: product.title }),
-            /* @__PURE__ */ jsxs4("p", { className: "lb-bundle__product-price", children: [
-              formatMoney3(basePrice, currency),
-              " each"
-            ] }),
-            unitPriceText && /* @__PURE__ */ jsx4("p", { className: "lb-bundle__product-unit-price", children: unitPriceText }),
-            showPicker && /* @__PURE__ */ jsx4("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__ */ jsx4(
-                VariantDropdown,
+              className: "lb-mix-match__progress-segments",
+              role: "progressbar",
+              "aria-valuenow": completedSteps,
+              "aria-valuemin": 0,
+              "aria-valuemax": steps.length,
+              children: Array.from({ length: steps.length }).map((_, i) => /* @__PURE__ */ jsx8(
+                "span",
                 {
-                  options: dropdownOptions,
-                  value: selectedValues[optionIndex] ?? null,
-                  onChange: (v) => setOptionValue(optionIndex, v),
-                  ariaLabel: optionName
+                  className: `lb-mix-match__progress-segment${i < completedSteps ? " lb-mix-match__progress-segment--filled" : ""}`,
+                  "data-progress-segment": true
                 },
-                optionName
-              );
-            }) })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx4(
-          "div",
-          {
-            className: "lb-bundle__tiers",
-            role: "table",
-            "aria-label": "Volume discounts",
-            children: tierSavings.map((ts) => /* @__PURE__ */ jsxs4(
-              "div",
-              {
-                className: `lb-bundle__tier ${ts.isActive ? "lb-bundle__tier--active" : ""}`,
-                role: "row",
-                children: [
-                  /* @__PURE__ */ jsxs4("span", { className: "lb-bundle__tier-quantity", role: "cell", children: [
-                    ts.tier.minQuantity,
-                    "+ items"
-                  ] }),
-                  /* @__PURE__ */ jsxs4("span", { className: "lb-bundle__tier-price", role: "cell", children: [
-                    formatMoney3(ts.unitPrice, currency),
-                    " each"
-                  ] }),
-                  /* @__PURE__ */ jsxs4("span", { className: "lb-bundle__tier-savings", role: "cell", children: [
-                    "Save ",
-                    ts.savingsPercent.toFixed(0),
-                    "%"
-                  ] })
-                ]
-              },
-              ts.tier.minQuantity
-            ))
-          }
-        ),
-        /* @__PURE__ */ jsxs4("div", { className: "lb-bundle__quantity-selector", children: [
-          /* @__PURE__ */ jsx4("label", { htmlFor: `lb-qty-${bundle.id}`, children: "Quantity" }),
-          /* @__PURE__ */ jsxs4("div", { className: "lb-bundle__quantity-control", children: [
-            /* @__PURE__ */ jsx4(
-              "button",
-              {
-                "aria-label": "Decrease quantity",
-                onClick: () => setQuantity((q) => Math.max(1, q - 1)),
-                children: "\u2212"
-              }
-            ),
-            /* @__PURE__ */ jsx4(
-              "input",
+                i
+              ))
+            }
+          ),
+          /* @__PURE__ */ jsxs8("div", { className: "lb-mix-match__progress-labels", children: [
+            /* @__PURE__ */ jsx8(
+              "span",
               {
-                id: `lb-qty-${bundle.id}`,
-                type: "number",
-                min: 1,
-                value: quantity,
-                onChange: (e) => {
-                  const val = parseInt(e.target.value, 10);
-                  if (!isNaN(val) && val > 0) setQuantity(val);
-                },
-                className: "lb-bundle__quantity-input"
+                className: "lb-mix-match__progress-count",
+                "data-progress-count": true,
+                "aria-live": "polite",
+                children: `${completedSteps} of ${steps.length} steps completed`
               }
             ),
-            /* @__PURE__ */ jsx4(
-              "button",
+            /* @__PURE__ */ jsx8(
+              "span",
               {
-                "aria-label": "Increase quantity",
-                onClick: () => setQuantity((q) => q + 1),
-                children: "+"
+                className: "lb-mix-match__progress-remaining",
+                "data-progress-remaining": true,
+                "aria-live": "polite",
+                children: completedSteps < steps.length ? `${steps.length - completedSteps} more to go` : "Complete"
               }
             )
           ] })
         ] }),
-        cartError && /* @__PURE__ */ jsx4("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
-        bundle && displayVariant && shouldShowLowStockBadge3(
-          displayVariant,
-          minTierQty,
-          bundle.widgetConfig.lowStockThreshold,
-          bundle.widgetConfig.showLowStockBadge
-        ) && /* @__PURE__ */ jsxs4("span", { className: "lb-bundle-low-stock-badge", children: [
-          "Only ",
-          displayVariant.quantityAvailable,
-          " left"
+        /* @__PURE__ */ jsx8("div", { className: "lb-multi-step__groups", "data-step-groups": true, children: steps.map((step, i) => /* @__PURE__ */ jsxs8(
+          "section",
+          {
+            className: "lb-multi-step__group",
+            "data-step-group": i,
+            children: [
+              /* @__PURE__ */ jsxs8("div", { className: "lb-multi-step__group-heading", children: [
+                /* @__PURE__ */ jsx8("span", { className: "lb-multi-step__group-name", children: step.name }),
+                /* @__PURE__ */ jsx8(
+                  "span",
+                  {
+                    className: `lb-multi-step__group-count${stepSatisfied(i) ? " lb-multi-step__group-count--met" : ""}`,
+                    "data-step-count": i,
+                    children: `${Math.min(unitsByStep[i] ?? 0, step.minQuantity)} of ${step.minQuantity} added`
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx8(
+                "div",
+                {
+                  className: "lb-mix-match__slots lb-edge-fade lb-multi-step__group-slots",
+                  "data-step-slots": i,
+                  children: (selections[i] ?? []).map((item, index) => (
+                    /* Whole card reopens the wizard AT this step. The inner
+                       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__ */ jsxs8(
+                      "div",
+                      {
+                        className: "lb-mix-match__slot lb-mix-match__slot--filled",
+                        onClick: () => setPickerOpenAt(i),
+                        children: [
+                          item.featuredImage && /* @__PURE__ */ jsx8("div", { className: "lb-bundle-thumbnail", children: /* @__PURE__ */ jsx8(
+                            "img",
+                            {
+                              src: item.featuredImage,
+                              alt: item.title,
+                              loading: "lazy"
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsxs8("div", { className: "lb-mix-match__filled-info", children: [
+                            /* @__PURE__ */ jsx8(
+                              "button",
+                              {
+                                type: "button",
+                                className: "lb-mix-match__filled-title",
+                                "aria-label": `Edit selection: ${item.title}`,
+                                children: item.title
+                              }
+                            ),
+                            item.variantTitle && item.variantTitle !== "Default Title" && /* @__PURE__ */ jsx8("span", { className: "lb-mix-match__filled-variant", children: item.variantTitle }),
+                            /* @__PURE__ */ jsxs8("span", { className: "lb-mix-match__filled-price", children: [
+                              item.compareAtPrice !== null && item.compareAtPrice > item.price && /* @__PURE__ */ jsx8("s", { className: "lb-mix-match__filled-compare", children: formatMoney7(item.compareAtPrice, currency) }),
+                              /* @__PURE__ */ jsx8("span", { className: "lb-bundle-product-price", children: formatMoney7(item.price, currency) }),
+                              /* @__PURE__ */ jsx8("span", { className: "lb-bundle-qty-inline", children: `\xD7${item.quantity}` })
+                            ] }),
+                            item.unitPrice && /* @__PURE__ */ jsx8("span", { className: "lb-bundle-product-unit-price", children: item.unitPrice })
+                          ] }),
+                          canRemoveItem2(bundle, selections, item) ? /* @__PURE__ */ jsx8(
+                            "button",
+                            {
+                              type: "button",
+                              className: "lb-mix-match__slot-remove",
+                              "aria-label": `Remove ${item.title}`,
+                              onClick: (e) => {
+                                e.stopPropagation();
+                                removeSlot(i, index);
+                              },
+                              children: /* @__PURE__ */ jsx8(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__ */ jsx8("span", { className: "lb-mix-match__slot-required", children: "Required" })
+                          )
+                        ]
+                      },
+                      `${item.productId}:${item.variantId}:${index}`
+                    )
+                  ))
+                }
+              ),
+              stepHeadroom2(step.maxQuantity, unitsByStep[i] ?? 0) !== 0 && /* @__PURE__ */ jsxs8(
+                "button",
+                {
+                  type: "button",
+                  className: "lb-mix-match__add-product lb-multi-step__step-trigger",
+                  "data-step-trigger": i,
+                  "aria-label": `${step.minQuantity === 1 && step.maxQuantity === 1 ? "Choose a product" : "Choose products"}: ${step.name}`,
+                  onClick: () => setPickerOpenAt(i),
+                  children: [
+                    /* @__PURE__ */ jsx8(
+                      "span",
+                      {
+                        className: "lb-mix-match__add-product-icon",
+                        "aria-hidden": "true",
+                        children: /* @__PURE__ */ jsx8(PlusIcon2, {})
+                      }
+                    ),
+                    /* @__PURE__ */ jsx8("span", { className: "lb-mix-match__add-product-label", children: step.minQuantity === 1 && step.maxQuantity === 1 ? "Choose a product" : "Choose products" })
+                  ]
+                }
+              )
+            ]
+          },
+          i
+        )) }),
+        /* @__PURE__ */ jsx8("div", { className: "lb-bundle-divider" }),
+        allSatisfied && /* @__PURE__ */ jsxs8("div", { className: "lb-bundle-summary", "data-pricing-section": true, children: [
+          /* @__PURE__ */ jsxs8("div", { className: "lb-bundle-summary__text", children: [
+            /* @__PURE__ */ jsx8("span", { className: "lb-bundle-summary__label", children: "Bundle total" }),
+            bundle.widgetConfig.savingsBar.visible && summary.savings > 0 && /* @__PURE__ */ jsxs8("p", { className: "lb-bundle-savings-line", "data-savings-bar": true, children: [
+              "You save",
+              " ",
+              /* @__PURE__ */ jsx8("span", { "data-savings-amount": true, children: formatMoney7(summary.savings, currency) }),
+              " ",
+              /* @__PURE__ */ jsxs8("span", { "data-savings-percent": true, children: [
+                "(",
+                summary.savingsPercent,
+                "%)"
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs8("span", { className: "lb-bundle-summary__prices", children: [
+            bundle.widgetConfig.pricing.showComparePrice && summary.savings > 0 && /* @__PURE__ */ jsx8("span", { className: "lb-bundle-compare-price", "data-compare-price": true, children: formatMoney7(summary.comparePrice, currency) }),
+            /* @__PURE__ */ jsx8("span", { className: "lb-bundle-sale-price", "data-sale-price": true, children: formatMoney7(summary.salePrice, currency) })
+          ] })
         ] }),
-        /* @__PURE__ */ jsx4(
+        cartError && /* @__PURE__ */ jsx8("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
+        /* @__PURE__ */ jsx8(
           "button",
           {
             className: "lb-bundle__cta",
             onClick: handleAddToCart,
-            disabled: addingToCart,
+            disabled: addingToCart || !valid,
             "aria-busy": addingToCart,
-            children: addingToCart ? "Adding..." : bundle.widgetConfig.cta.ctaText ?? `Add ${quantity} to Cart`
+            children: ctaLabel
+          }
+        ),
+        pickerOpenAt !== null && /* @__PURE__ */ jsx8(
+          MultiStepPicker,
+          {
+            outOfStockBehavior,
+            bundle,
+            currency,
+            initialStep: pickerOpenAt,
+            showStepper,
+            selections,
+            onAdd: addSelection,
+            onUpdateQuantity: updateQuantity,
+            onRemoveVariant: removeVariant,
+            canRemoveVariant: (variantId) => {
+              for (const stepPicks of selections) {
+                const item = stepPicks.find((p) => p.variantId === variantId);
+                if (item) return canRemoveItem2(bundle, selections, item);
+              }
+              return true;
+            },
+            swapUnitsFor: (step, productId, variantId) => swapUnitsForItem2(bundle, selections, step, productId, variantId),
+            onSwap: swapSelection,
+            onClose: () => setPickerOpenAt(null),
+            styleVarsRef: setModalConfigVarsRef
           }
         )
       ]
     }
   );
 }
+function stepHasInStockProduct(bundle, stepIndex) {
+  return productsForStep2(bundle, stepIndex).some((product) => {
+    const rule = ruleFor4(bundle, product.id);
+    return product.variants.nodes.some((v) => isVariantFulfillable7(v, rule.min));
+  });
+}
+function PlusIcon2() {
+  return /* @__PURE__ */ jsxs8(
+    "svg",
+    {
+      width: "18",
+      height: "18",
+      viewBox: "0 0 18 18",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx8("line", { x1: "9", y1: "3", x2: "9", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
+        /* @__PURE__ */ jsx8("line", { x1: "3", y1: "9", x2: "15", y2: "9", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+      ]
+    }
+  );
+}
+function CloseIcon4() {
+  return /* @__PURE__ */ jsxs8(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 20 20",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx8("line", { x1: "5", y1: "5", x2: "15", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
+        /* @__PURE__ */ jsx8("line", { x1: "15", y1: "5", x2: "5", y2: "15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+      ]
+    }
+  );
+}
+
+// src/fetchShopCustomCss.ts
+async function fetchShopCustomCss(options) {
+  const settings = await fetchShopSettings(options);
+  return settings.customCss;
+}
 
 // src/hooks/useBundlesForProduct.ts
-import { useState as useState8, useEffect as useEffect9 } from "react";
+import { useState as useState13, useEffect as useEffect16 } from "react";
 import {
   fetchBundlesForProduct,
   injectCustomCss as injectCustomCss2
@@ -1465,10 +4156,10 @@ var INITIAL_STATE2 = {
   error: null
 };
 function useBundlesForProduct(options) {
-  const [state, setState] = useState8(
+  const [state, setState] = useState13(
     INITIAL_STATE2
   );
-  useEffect9(() => {
+  useEffect16(() => {
     const controller = new AbortController();
     setState(INITIAL_STATE2);
     fetchBundlesForProduct({
@@ -1488,13 +4179,13 @@ function useBundlesForProduct(options) {
         error: err instanceof Error ? err : new Error(String(err))
       });
     });
-    fetchShopCustomCss({
+    fetchShopSettings({
       shopDomain: options.shopDomain,
       storefrontAccessToken: options.storefrontAccessToken,
       signal: controller.signal
-    }).then((css) => {
+    }).then((settings) => {
       if (controller.signal.aborted) return;
-      injectCustomCss2(options.shopDomain, css);
+      injectCustomCss2(options.shopDomain, settings.customCss);
     }).catch(() => {
     });
     return () => {
@@ -1523,20 +4214,17 @@ import {
   computeBundleSaleCents,
   calculateTierSavings as calculateTierSavings2,
   getActiveTier as getActiveTier2,
+  productsForStep as productsForStep3,
+  stepHeadroom as stepHeadroom3,
   validateQuantity,
   transformImageUrl,
   formatCountdown,
-  formatMoney as formatMoney4,
-  formatUnitPrice as formatUnitPrice4,
-  calculateDiscount as calculateDiscount2,
+  formatMoney as formatMoney8,
+  formatUnitPrice as formatUnitPrice8,
+  calculateDiscount as calculateDiscount4,
   reportImpression as reportImpression2,
   reportAddToCart as reportAddToCart2,
   observeImpression as observeImpression2,
-  getLinkGroupAssignment,
-  pickVariantFromWeights,
-  fnv1a,
-  setConsent,
-  hasConsent,
   injectCustomCss as injectCustomCss3,
   sanitizeCustomCss,
   createStorefrontClient as createStorefrontClient3,
@@ -1545,21 +4233,26 @@ import {
   parseMetaobjectBundleStrict as parseMetaobjectBundleStrict2,
   BUNDLE_METAOBJECT_QUERY as BUNDLE_METAOBJECT_QUERY2,
   BUNDLES_FOR_PRODUCT_QUERY,
-  SHOP_CUSTOM_CSS_QUERY as SHOP_CUSTOM_CSS_QUERY2
+  SHOP_SETTINGS_QUERY as SHOP_SETTINGS_QUERY2,
+  DEFAULT_OUT_OF_STOCK_BEHAVIOR as DEFAULT_OUT_OF_STOCK_BEHAVIOR3,
+  parseOutOfStockBehavior as parseOutOfStockBehavior2
 } from "@lime-bundles/core";
 export {
   BUNDLES_FOR_PRODUCT_QUERY,
   BUNDLE_METAOBJECT_QUERY2 as BUNDLE_METAOBJECT_QUERY,
+  BogoBundle,
   BundleParseError2 as BundleParseError,
+  DEFAULT_OUT_OF_STOCK_BEHAVIOR3 as DEFAULT_OUT_OF_STOCK_BEHAVIOR,
   FixedBundle,
   MixMatchBundle,
-  SHOP_CUSTOM_CSS_QUERY2 as SHOP_CUSTOM_CSS_QUERY,
+  MultiStepBundle,
+  SHOP_SETTINGS_QUERY2 as SHOP_SETTINGS_QUERY,
   StorefrontApiError,
   VariantDropdown,
   VolumeBundle,
   WIDGET_CONFIG_DEFAULTS,
   applyWidgetConfigVars2 as applyWidgetConfigVars,
-  calculateDiscount2 as calculateDiscount,
+  calculateDiscount4 as calculateDiscount,
   calculateTierSavings2 as calculateTierSavings,
   computeBundleSaleCents,
   computeFixedPricing,
@@ -1567,31 +4260,32 @@ export {
   fetchBundleData,
   fetchBundlesForProduct2 as fetchBundlesForProduct,
   fetchShopCustomCss,
-  fnv1a,
+  fetchShopSettings,
+  fetchShopSettingsOrDefault,
   formatCents,
   formatCountdown,
-  formatMoney4 as formatMoney,
-  formatUnitPrice4 as formatUnitPrice,
+  formatMoney8 as formatMoney,
+  formatUnitPrice8 as formatUnitPrice,
   getActiveTier2 as getActiveTier,
-  getLinkGroupAssignment,
-  hasConsent,
   injectCustomCss3 as injectCustomCss,
   mergeWidgetConfig,
   observeImpression2 as observeImpression,
   parseCents,
   parseMetaobjectBundle,
   parseMetaobjectBundleStrict2 as parseMetaobjectBundleStrict,
+  parseOutOfStockBehavior2 as parseOutOfStockBehavior,
   percentageDiscountUnit,
-  pickVariantFromWeights,
+  productsForStep3 as productsForStep,
   reportAddToCart2 as reportAddToCart,
   reportImpression2 as reportImpression,
   sanitizeCustomCss,
-  setConsent,
+  stepHeadroom3 as stepHeadroom,
   thumbnailRatioVars,
   transformImageUrl,
   useAnalytics,
   useBundleData,
   useBundlesForProduct,
+  useShopSettings,
   useVariantSelection,
   useWidgetConfigVars,
   validateQuantity