@lime-bundles/react 2.3.1 → 2.4.0

package/dist/index.cjs

@@ -20,56 +20,58 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  BUNDLES_FOR_PRODUCT_QUERY: () => import_core11.BUNDLES_FOR_PRODUCT_QUERY,
-  BUNDLE_METAOBJECT_QUERY: () => import_core11.BUNDLE_METAOBJECT_QUERY,
-  BundleParseError: () => import_core10.BundleParseError,
+  BUNDLES_FOR_PRODUCT_QUERY: () => import_core13.BUNDLES_FOR_PRODUCT_QUERY,
+  BUNDLE_METAOBJECT_QUERY: () => import_core13.BUNDLE_METAOBJECT_QUERY,
+  BundleParseError: () => import_core12.BundleParseError,
   FixedBundle: () => FixedBundle,
   MixMatchBundle: () => MixMatchBundle,
-  SHOP_CUSTOM_CSS_QUERY: () => import_core11.SHOP_CUSTOM_CSS_QUERY,
-  StorefrontApiError: () => import_core10.StorefrontApiError,
+  SHOP_CUSTOM_CSS_QUERY: () => import_core13.SHOP_CUSTOM_CSS_QUERY,
+  StorefrontApiError: () => import_core12.StorefrontApiError,
+  VariantDropdown: () => VariantDropdown,
   VolumeBundle: () => VolumeBundle,
-  WIDGET_CONFIG_DEFAULTS: () => import_core11.WIDGET_CONFIG_DEFAULTS,
-  applyABVariantB: () => import_core11.applyABVariantB,
-  applyWidgetConfigVars: () => import_core11.applyWidgetConfigVars,
-  calculateDiscount: () => import_core11.calculateDiscount,
-  calculateTierSavings: () => import_core11.calculateTierSavings,
-  computeBundleSaleCents: () => import_core11.computeBundleSaleCents,
-  computeFixedPricing: () => import_core11.computeFixedPricing,
-  createStorefrontClient: () => import_core11.createStorefrontClient,
+  WIDGET_CONFIG_DEFAULTS: () => import_core13.WIDGET_CONFIG_DEFAULTS,
+  applyABVariantB: () => import_core13.applyABVariantB,
+  applyWidgetConfigVars: () => import_core13.applyWidgetConfigVars,
+  calculateDiscount: () => import_core13.calculateDiscount,
+  calculateTierSavings: () => import_core13.calculateTierSavings,
+  computeBundleSaleCents: () => import_core13.computeBundleSaleCents,
+  computeFixedPricing: () => import_core13.computeFixedPricing,
+  createStorefrontClient: () => import_core13.createStorefrontClient,
   fetchBundleData: () => fetchBundleData,
-  fetchBundlesForProduct: () => import_core11.fetchBundlesForProduct,
+  fetchBundlesForProduct: () => import_core13.fetchBundlesForProduct,
   fetchShopCustomCss: () => fetchShopCustomCss,
-  formatCents: () => import_core11.formatCents,
-  formatCountdown: () => import_core11.formatCountdown,
-  formatMoney: () => import_core11.formatMoney,
-  formatUnitPrice: () => import_core11.formatUnitPrice,
-  getABTestAssignment: () => import_core11.getABTestAssignment,
-  getActiveTier: () => import_core11.getActiveTier,
-  hasConsent: () => import_core11.hasConsent,
-  injectCustomCss: () => import_core11.injectCustomCss,
-  mergeWidgetConfig: () => import_core11.mergeWidgetConfig,
-  observeImpression: () => import_core11.observeImpression,
-  parseCents: () => import_core11.parseCents,
-  parseMetaobjectBundle: () => import_core11.parseMetaobjectBundle,
-  parseMetaobjectBundleStrict: () => import_core11.parseMetaobjectBundleStrict,
-  percentageDiscountUnit: () => import_core11.percentageDiscountUnit,
-  reportAddToCart: () => import_core11.reportAddToCart,
-  reportImpression: () => import_core11.reportImpression,
-  sanitizeCustomCss: () => import_core11.sanitizeCustomCss,
-  setConsent: () => import_core11.setConsent,
-  thumbnailRatioVars: () => import_core11.thumbnailRatioVars,
-  transformImageUrl: () => import_core11.transformImageUrl,
+  formatCents: () => import_core13.formatCents,
+  formatCountdown: () => import_core13.formatCountdown,
+  formatMoney: () => import_core13.formatMoney,
+  formatUnitPrice: () => import_core13.formatUnitPrice,
+  getABTestAssignment: () => import_core13.getABTestAssignment,
+  getActiveTier: () => import_core13.getActiveTier,
+  hasConsent: () => import_core13.hasConsent,
+  injectCustomCss: () => import_core13.injectCustomCss,
+  mergeWidgetConfig: () => import_core13.mergeWidgetConfig,
+  observeImpression: () => import_core13.observeImpression,
+  parseCents: () => import_core13.parseCents,
+  parseMetaobjectBundle: () => import_core13.parseMetaobjectBundle,
+  parseMetaobjectBundleStrict: () => import_core13.parseMetaobjectBundleStrict,
+  percentageDiscountUnit: () => import_core13.percentageDiscountUnit,
+  reportAddToCart: () => import_core13.reportAddToCart,
+  reportImpression: () => import_core13.reportImpression,
+  sanitizeCustomCss: () => import_core13.sanitizeCustomCss,
+  setConsent: () => import_core13.setConsent,
+  thumbnailRatioVars: () => import_core13.thumbnailRatioVars,
+  transformImageUrl: () => import_core13.transformImageUrl,
   useAnalytics: () => useAnalytics,
   useBundleData: () => useBundleData,
   useBundlesForProduct: () => useBundlesForProduct,
+  useVariantSelection: () => useVariantSelection,
   useWidgetConfigVars: () => useWidgetConfigVars,
-  validateQuantity: () => import_core11.validateQuantity
+  validateQuantity: () => import_core13.validateQuantity
 });
 module.exports = __toCommonJS(index_exports);
 
 // src/components/FixedBundle.tsx
-var import_react4 = require("react");
-var import_core6 = require("@lime-bundles/core");
+var import_react6 = require("react");
+var import_core8 = require("@lime-bundles/core");
 
 // src/hooks/useBundleData.ts
 var import_react = require("react");
@@ -260,8 +262,333 @@ function useWidgetConfigVars(config) {
   );
 }
 
-// src/components/FixedBundle.tsx
+// src/hooks/useVariantSelection.ts
+var import_react4 = require("react");
+var import_core6 = require("@lime-bundles/core");
+var { findVariantByOptions, isOptionValueAvailable, toPickerVariant } = import_core6.variants;
+function defaultInitial(variants) {
+  return variants.find((v) => v.availableForSale) ?? variants[0] ?? null;
+}
+function useVariantSelection({
+  variants,
+  optionNames,
+  initialVariant,
+  optionValuesByPosition
+}) {
+  const seed = (0, import_react4.useMemo)(
+    () => initialVariant ?? defaultInitial(variants),
+    [initialVariant, variants]
+  );
+  const [selectedValues, setSelectedValues] = (0, import_react4.useState)(
+    () => seed ? seed.selectedOptions.map((o) => o.value) : optionNames.map(() => "")
+  );
+  (0, import_react4.useEffect)(() => {
+    if (!seed) return;
+    setSelectedValues(seed.selectedOptions.map((o) => o.value));
+  }, [seed?.id]);
+  const pickerVariants = (0, import_react4.useMemo)(
+    () => variants.map((v) => toPickerVariant(v)),
+    [variants]
+  );
+  const selectedVariant = (0, import_react4.useMemo)(() => {
+    if (selectedValues.length !== optionNames.length) return null;
+    const match = findVariantByOptions(pickerVariants, selectedValues);
+    if (!match) return null;
+    return variants.find((v) => v.id === match.id) ?? null;
+  }, [pickerVariants, selectedValues, variants, optionNames.length]);
+  const setOptionValue = (0, import_react4.useCallback)(
+    (optionIndex, value) => {
+      setSelectedValues((prev) => {
+        const next = prev.slice();
+        next[optionIndex] = value;
+        return next;
+      });
+    },
+    []
+  );
+  const optionsByPosition = (0, import_react4.useMemo)(() => {
+    if (optionValuesByPosition) {
+      return optionValuesByPosition.map((values) => values.slice());
+    }
+    const out = optionNames.map(() => []);
+    for (const v of variants) {
+      v.selectedOptions.forEach((o, i) => {
+        if (i < out.length && !out[i].includes(o.value)) out[i].push(o.value);
+      });
+    }
+    return out;
+  }, [variants, optionNames, optionValuesByPosition]);
+  const optionsFor = (0, import_react4.useCallback)(
+    (optionIndex) => {
+      const values = optionsByPosition[optionIndex] ?? [];
+      return values.map((value) => ({
+        value,
+        disabled: !isOptionValueAvailable(
+          pickerVariants,
+          optionIndex,
+          value,
+          selectedValues
+        )
+      }));
+    },
+    [optionsByPosition, pickerVariants, selectedValues]
+  );
+  return {
+    selectedValues,
+    selectedVariant,
+    setOptionValue,
+    optionsFor
+  };
+}
+
+// src/components/VariantDropdown.tsx
+var import_react5 = require("react");
+var import_core7 = require("@lime-bundles/core");
 var import_jsx_runtime = require("react/jsx-runtime");
+var { computePosition, emptyTypeAheadState, handleKey, pushTypeAheadChar } = import_core7.dropdown;
+var ITEM_HEIGHT_PX = 32;
+var LIST_PAD_Y = 8;
+var MAX_VISIBLE_ITEMS = 8;
+function VariantDropdown({
+  options,
+  value,
+  onChange,
+  ariaLabel,
+  className
+}) {
+  const idBase = (0, import_react5.useId)();
+  const triggerRef = (0, import_react5.useRef)(null);
+  const listboxRef = (0, import_react5.useRef)(null);
+  const typeAheadRef = (0, import_react5.useRef)(emptyTypeAheadState());
+  const [isOpen, setIsOpen] = (0, import_react5.useState)(false);
+  const [activeIndex, setActiveIndex] = (0, import_react5.useState)(-1);
+  const [position, setPosition] = (0, import_react5.useState)(null);
+  const selectedIndex = (0, import_react5.useMemo)(
+    () => options.findIndex((o) => o.value === value),
+    [options, value]
+  );
+  const optionsState = (0, import_react5.useMemo)(
+    () => options.map((o) => ({ disabled: !!o.disabled, label: o.label })),
+    [options]
+  );
+  const selectedLabel = selectedIndex >= 0 ? options[selectedIndex].label : "";
+  function open() {
+    if (isOpen) return;
+    setIsOpen(true);
+    setActiveIndex(
+      selectedIndex >= 0 && !optionsState[selectedIndex]?.disabled ? selectedIndex : optionsState.findIndex((o) => !o.disabled)
+    );
+  }
+  function close(restoreFocus) {
+    setIsOpen(false);
+    setActiveIndex(-1);
+    if (restoreFocus) triggerRef.current?.focus();
+  }
+  function commit(index) {
+    const opt = options[index];
+    if (!opt || opt.disabled) return;
+    if (opt.value !== value) onChange(opt.value);
+    close(true);
+  }
+  (0, import_react5.useLayoutEffect)(() => {
+    if (!isOpen) return;
+    const trigger = triggerRef.current;
+    if (!trigger) return;
+    const rect = trigger.getBoundingClientRect();
+    if (rect.width === 0) return;
+    const visibleCount = Math.min(options.length || 1, MAX_VISIBLE_ITEMS);
+    const desiredHeight = visibleCount * ITEM_HEIGHT_PX + LIST_PAD_Y;
+    setPosition(
+      computePosition({
+        trigger: {
+          top: rect.top,
+          bottom: rect.bottom,
+          left: rect.left,
+          width: rect.width
+        },
+        viewportHeight: window.innerHeight,
+        desiredHeight
+      })
+    );
+  }, [isOpen, options.length]);
+  (0, import_react5.useEffect)(() => {
+    if (!isOpen) return;
+    const isInsideDropdown = (event) => {
+      const path = event.composedPath();
+      const trigger = triggerRef.current;
+      const listbox = listboxRef.current;
+      return trigger != null && path.includes(trigger) || listbox != null && path.includes(listbox);
+    };
+    const onPointerdown = (event) => {
+      if (isInsideDropdown(event)) return;
+      close(false);
+    };
+    const onScroll = (event) => {
+      if (isInsideDropdown(event)) return;
+      close(false);
+    };
+    const onResize = () => close(false);
+    document.addEventListener("pointerdown", onPointerdown, true);
+    window.addEventListener("scroll", onScroll, true);
+    window.addEventListener("resize", onResize);
+    return () => {
+      document.removeEventListener("pointerdown", onPointerdown, true);
+      window.removeEventListener("scroll", onScroll, true);
+      window.removeEventListener("resize", onResize);
+    };
+  }, [isOpen]);
+  (0, import_react5.useEffect)(() => {
+    if (!isOpen || activeIndex < 0) return;
+    const listbox = listboxRef.current;
+    if (!listbox) return;
+    const li = listbox.querySelector(
+      `#${CSS.escape(`${idBase}-opt-${activeIndex}`)}`
+    );
+    if (!li) return;
+    const liTop = li.offsetTop;
+    const liBottom = liTop + li.offsetHeight;
+    const visTop = listbox.scrollTop;
+    const visBottom = visTop + listbox.clientHeight;
+    if (liTop < visTop) {
+      listbox.scrollTop = liTop;
+    } else if (liBottom > visBottom) {
+      listbox.scrollTop = liBottom - listbox.clientHeight;
+    }
+  }, [activeIndex, isOpen, idBase]);
+  function onKeyDown(event) {
+    const action = handleKey(
+      {
+        key: event.key,
+        ctrlKey: event.ctrlKey,
+        metaKey: event.metaKey,
+        altKey: event.altKey,
+        shiftKey: event.shiftKey
+      },
+      { isOpen, activeIndex, selectedIndex, options: optionsState }
+    );
+    if (action.preventDefault) event.preventDefault();
+    switch (action.type) {
+      case "open":
+        open();
+        if (action.activeIndex >= 0) setActiveIndex(action.activeIndex);
+        return;
+      case "close":
+        close(action.restoreFocus);
+        return;
+      case "move-active":
+        setActiveIndex(action.activeIndex);
+        return;
+      case "commit":
+        commit(action.index);
+        return;
+      case "type-ahead": {
+        const result = pushTypeAheadChar(
+          typeAheadRef.current,
+          action.char,
+          Date.now(),
+          optionsState
+        );
+        typeAheadRef.current = result.newState;
+        if (result.matchedIndex !== null) {
+          if (!isOpen) open();
+          setActiveIndex(result.matchedIndex);
+        }
+        return;
+      }
+      case "passthrough":
+        return;
+    }
+  }
+  function onShellBlur(event) {
+    const next = event.relatedTarget;
+    if (next && event.currentTarget.contains(next)) return;
+    setTimeout(() => {
+      if (!isOpen) return;
+      const active = document.activeElement;
+      if (!triggerRef.current?.contains(active) && !listboxRef.current?.contains(active)) {
+        close(false);
+      }
+    }, 0);
+  }
+  const listboxId = `${idBase}-listbox`;
+  const activeDescendantId = activeIndex >= 0 ? `${idBase}-opt-${activeIndex}` : void 0;
+  const panelStyle = position ? { maxHeight: position.maxHeight } : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: `lb-dropdown${className ? ` ${className}` : ""}`,
+      "data-lb-dropdown": "",
+      onBlur: onShellBlur,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "button",
+          {
+            ref: triggerRef,
+            type: "button",
+            className: "lb-dropdown-trigger",
+            role: "combobox",
+            "aria-haspopup": "listbox",
+            "aria-expanded": isOpen,
+            "aria-controls": listboxId,
+            "aria-label": ariaLabel,
+            "aria-activedescendant": activeDescendantId,
+            onClick: (e) => {
+              e.preventDefault();
+              if (isOpen) close(false);
+              else open();
+            },
+            onKeyDown,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "lb-dropdown-trigger-value", children: selectedLabel }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "lb-dropdown-chevron", "aria-hidden": "true" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "ul",
+          {
+            ref: listboxRef,
+            id: listboxId,
+            className: "lb-dropdown-listbox",
+            role: "listbox",
+            "aria-label": ariaLabel,
+            hidden: !isOpen,
+            "data-placement": position?.placement,
+            style: panelStyle,
+            onMouseDown: (e) => e.preventDefault(),
+            children: options.map((opt, i) => (
+              // Keyboard activation lives on the trigger combobox via
+              // aria-activedescendant — the WAI-ARIA combobox pattern keeps
+              // focus on the button and tracks the active option by id, so
+              // the option <li> elements deliberately have no key handlers.
+              // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "li",
+                {
+                  id: `${idBase}-opt-${i}`,
+                  className: `lb-dropdown-option${i === activeIndex ? " is-active" : ""}`,
+                  role: "option",
+                  "aria-selected": i === selectedIndex,
+                  "aria-disabled": opt.disabled || void 0,
+                  "data-value": opt.value,
+                  onClick: () => commit(i),
+                  onMouseMove: () => {
+                    if (!opt.disabled && i !== activeIndex) setActiveIndex(i);
+                  },
+                  children: opt.label
+                },
+                opt.value
+              )
+            ))
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/FixedBundle.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
 function FixedBundle(props) {
   const {
     shopDomain,
@@ -285,11 +612,21 @@ function FixedBundle(props) {
     bundleType: "fixed",
     enabled: analyticsEnabled !== false
   });
-  const [addingToCart, setAddingToCart] = (0, import_react4.useState)(false);
-  const [cartError, setCartError] = (0, import_react4.useState)(null);
+  const [addingToCart, setAddingToCart] = (0, import_react6.useState)(false);
+  const [cartError, setCartError] = (0, import_react6.useState)(null);
+  const [selectedVariants, setSelectedVariants] = (0, import_react6.useState)({});
+  const handleVariantChange = (0, import_react6.useCallback)(
+    (productId, variant) => {
+      setSelectedVariants((prev) => {
+        if (prev[productId] === variant) return prev;
+        return { ...prev, [productId]: variant };
+      });
+    },
+    []
+  );
   const bundle = result.status === "success" && result.bundle.bundleType === "fixed" ? result.bundle : null;
   const setConfigVarsRef = useWidgetConfigVars(bundle?.widgetConfig);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (result.status === "error") {
       onError?.(result.error);
       return;
@@ -302,14 +639,14 @@ function FixedBundle(props) {
       );
     }
   }, [result, onError]);
-  const handleAddToCart = (0, import_react4.useCallback)(async () => {
+  const handleAddToCart = (0, import_react6.useCallback)(async () => {
     if (!bundle) return;
     const bundleLines = bundle.products.filter((p) => p.variants.nodes.some((v) => v.availableForSale)).map((p) => {
-      const variant = p.variants.nodes.find((v) => v.availableForSale);
+      const variant = selectedVariants[p.id] ?? p.variants.nodes.find((v) => v.availableForSale);
       return {
         productId: p.id,
         variant,
-        quantity: (0, import_core6.resolveBundleQty)(bundle, p.id, variant.id)
+        quantity: (0, import_core8.resolveBundleQty)(bundle, p.id, variant.id)
       };
     }).filter((line) => line.quantity > 0);
     if (bundleLines.length === 0) return;
@@ -327,7 +664,7 @@ function FixedBundle(props) {
       await onAddToCart(lines);
       const totalPrice = bundleLines.reduce((sum, line) => {
         const price = parseFloat(line.variant.price.amount);
-        const discounted = (0, import_core6.calculateDiscount)(
+        const discounted = (0, import_core8.calculateDiscount)(
           price,
           bundle.discountConfig.discountType,
           bundle.discountConfig.discountValue
@@ -349,17 +686,17 @@ function FixedBundle(props) {
     } finally {
       setAddingToCart(false);
     }
-  }, [bundle, onAddToCart, onError, trackAddToCart]);
+  }, [bundle, onAddToCart, onError, trackAddToCart, selectedVariants]);
   if (result.status === "loading") {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "lb-skeleton lb-skeleton--title" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "lb-skeleton lb-skeleton--products" })
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "lb-skeleton lb-skeleton--title" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("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__ */ (0, import_jsx_runtime.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     "div",
     {
       ref: (el) => {
@@ -370,38 +707,19 @@ function FixedBundle(props) {
       role: "region",
       "aria-label": bundle.title,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "lb-bundle__title", children: bundle.title }),
-        bundle.discountLabel && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "lb-bundle__discount-badge", children: bundle.discountLabel }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "lb-bundle__products", children: bundle.products.map((product) => {
-          const variant = product.variants.nodes.find((v) => v.availableForSale) ?? product.variants.nodes[0];
-          const priceText = variant ? (0, import_core6.formatMoney)(variant.price.amount, currency) : (0, import_core6.formatMoney)(
-            product.priceRange.minVariantPrice.amount,
-            currency
-          );
-          const unitPriceText = variant ? (0, import_core6.formatUnitPrice)(
-            variant.unitPrice,
-            variant.unitPriceMeasurement,
-            currency
-          ) : null;
-          return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "lb-bundle__product", part: "product", children: [
-            product.featuredImage && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "img",
-              {
-                src: product.featuredImage.url,
-                alt: product.featuredImage.altText ?? product.title,
-                className: "lb-bundle__product-image",
-                loading: "lazy"
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "lb-bundle__product-info", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "lb-bundle__product-title", children: product.title }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "lb-bundle__product-price", children: priceText }),
-              unitPriceText && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "lb-bundle__product-unit-price", children: unitPriceText })
-            ] })
-          ] }, product.id);
-        }) }),
-        cartError && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h3", { className: "lb-bundle__title", children: bundle.title }),
+        bundle.discountLabel && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "lb-bundle__discount-badge", children: bundle.discountLabel }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "lb-bundle__products", children: bundle.products.map((product) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          FixedProductRow,
+          {
+            product,
+            currency,
+            onVariantChange: handleVariantChange
+          },
+          product.id
+        )) }),
+        cartError && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "button",
           {
             className: "lb-bundle__cta",
@@ -415,11 +733,67 @@ function FixedBundle(props) {
     }
   );
 }
+function FixedProductRow({ product, currency, onVariantChange }) {
+  const variants = product.variants.nodes;
+  const optionNames = (0, import_react6.useMemo)(() => {
+    const first = variants[0];
+    return first ? first.selectedOptions.map((o) => o.name) : [];
+  }, [variants]);
+  const showPicker = variants.length > 1 && optionNames.length > 0;
+  const { selectedValues, selectedVariant, setOptionValue, optionsFor } = useVariantSelection({
+    variants,
+    optionNames
+  });
+  (0, import_react6.useEffect)(() => {
+    onVariantChange(product.id, selectedVariant ?? null);
+  }, [selectedVariant, product.id, onVariantChange]);
+  const displayVariant = selectedVariant ?? variants.find((v) => v.availableForSale) ?? variants[0];
+  const priceText = displayVariant ? (0, import_core8.formatMoney)(displayVariant.price.amount, currency) : (0, import_core8.formatMoney)(product.priceRange.minVariantPrice.amount, currency);
+  const unitPriceText = displayVariant ? (0, import_core8.formatUnitPrice)(
+    displayVariant.unitPrice,
+    displayVariant.unitPriceMeasurement,
+    currency
+  ) : null;
+  const thumbImage = displayVariant?.image ?? product.featuredImage;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "lb-bundle__product", part: "product", children: [
+    thumbImage && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "img",
+      {
+        src: thumbImage.url,
+        alt: thumbImage.altText ?? product.title,
+        className: "lb-bundle__product-image",
+        loading: "lazy"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "lb-bundle__product-info", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "lb-bundle__product-title", children: product.title }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "lb-bundle__product-price", children: priceText }),
+      unitPriceText && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "lb-bundle__product-unit-price", children: unitPriceText }),
+      showPicker && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "lb-bundle__product-variant-pickers", children: optionNames.map((optionName, optionIndex) => {
+        const dropdownOptions = optionsFor(optionIndex).map((o) => ({
+          value: o.value,
+          label: o.value,
+          disabled: o.disabled
+        }));
+        return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          VariantDropdown,
+          {
+            options: dropdownOptions,
+            value: selectedValues[optionIndex] ?? null,
+            onChange: (v) => setOptionValue(optionIndex, v),
+            ariaLabel: optionName
+          },
+          optionName
+        );
+      }) })
+    ] })
+  ] });
+}
 
 // src/components/MixMatchBundle.tsx
-var import_react5 = require("react");
-var import_core7 = require("@lime-bundles/core");
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_react7 = require("react");
+var import_core9 = require("@lime-bundles/core");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 function MixMatchBundle(props) {
   const {
     shopDomain,
@@ -443,14 +817,14 @@ function MixMatchBundle(props) {
     bundleType: "mix_match",
     enabled: analyticsEnabled !== false
   });
-  const [selections, setSelections] = (0, import_react5.useState)(
+  const [selections, setSelections] = (0, import_react7.useState)(
     /* @__PURE__ */ new Map()
   );
-  const [addingToCart, setAddingToCart] = (0, import_react5.useState)(false);
-  const [cartError, setCartError] = (0, import_react5.useState)(null);
+  const [addingToCart, setAddingToCart] = (0, import_react7.useState)(false);
+  const [cartError, setCartError] = (0, import_react7.useState)(null);
   const bundle = result.status === "success" && result.bundle.bundleType === "mix_match" ? result.bundle : null;
   const setConfigVarsRef = useWidgetConfigVars(bundle?.widgetConfig);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (result.status === "error") {
       onError?.(result.error);
       return;
@@ -467,8 +841,8 @@ function MixMatchBundle(props) {
     (sum, s) => sum + s.quantity,
     0
   );
-  const validation = bundle ? (0, import_core7.validateQuantity)(totalQuantity, bundle.minQuantity, bundle.maxQuantity) : { valid: false, totalQuantity: 0, message: null };
-  const toggleProduct = (0, import_react5.useCallback)(
+  const validation = bundle ? (0, import_core9.validateQuantity)(totalQuantity, bundle.minQuantity, bundle.maxQuantity) : { valid: false, totalQuantity: 0, message: null };
+  const toggleProduct = (0, import_react7.useCallback)(
     (productId, variant) => {
       setSelections((prev) => {
         const next = new Map(prev);
@@ -476,7 +850,7 @@ function MixMatchBundle(props) {
         if (next.has(key)) {
           next.delete(key);
         } else {
-          const configuredQty = bundle ? (0, import_core7.resolveBundleQty)(bundle, productId, variant.id) : 1;
+          const configuredQty = bundle ? (0, import_core9.resolveBundleQty)(bundle, productId, variant.id) : 1;
           next.set(key, {
             productId,
             variantId: variant.id,
@@ -488,7 +862,7 @@ function MixMatchBundle(props) {
     },
     [bundle]
   );
-  const updateQuantity = (0, import_react5.useCallback)(
+  const updateQuantity = (0, import_react7.useCallback)(
     (productId, variantId, quantity) => {
       setSelections((prev) => {
         const next = new Map(prev);
@@ -503,7 +877,7 @@ function MixMatchBundle(props) {
     },
     []
   );
-  const handleAddToCart = (0, import_react5.useCallback)(async () => {
+  const handleAddToCart = (0, import_react7.useCallback)(async () => {
     if (!bundle || !validation.valid) return;
     const lines = Array.from(selections.values()).map((s) => ({
       merchandiseId: s.variantId,
@@ -548,15 +922,15 @@ function MixMatchBundle(props) {
     totalQuantity
   ]);
   if (result.status === "loading") {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "lb-skeleton lb-skeleton--title" }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "lb-skeleton lb-skeleton--products" })
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "lb-skeleton lb-skeleton--title" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "lb-skeleton lb-skeleton--products" })
     ] });
   }
   if (result.status === "error") return null;
   if (!bundle) return null;
   const currency = bundle.products[0]?.priceRange.minVariantPrice.currencyCode ?? "USD";
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "div",
     {
       ref: (el) => {
@@ -567,83 +941,23 @@ function MixMatchBundle(props) {
       role: "region",
       "aria-label": bundle.title,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h3", { className: "lb-bundle__title", children: bundle.title }),
-        bundle.discountLabel && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "lb-bundle__discount-badge", children: bundle.discountLabel }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "lb-bundle__instructions", children: bundle.minQuantity && bundle.maxQuantity ? `Select ${bundle.minQuantity}\u2013${bundle.maxQuantity} items` : bundle.minQuantity ? `Select at least ${bundle.minQuantity} items` : bundle.maxQuantity ? `Select up to ${bundle.maxQuantity} items` : "Select your items" }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "lb-bundle__products lb-bundle__products--selectable", children: bundle.products.map((product) => {
-          const defaultVariant = product.variants.nodes.find((v) => v.availableForSale) ?? product.variants.nodes[0];
-          if (!defaultVariant) return null;
-          const key = `${product.id}:${defaultVariant.id}`;
-          const selected = selections.get(key);
-          return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-            "div",
-            {
-              className: `lb-bundle__product lb-bundle__product--selectable ${selected ? "lb-bundle__product--selected" : ""}`,
-              children: [
-                product.featuredImage && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                  "img",
-                  {
-                    src: product.featuredImage.url,
-                    alt: product.featuredImage.altText ?? product.title,
-                    className: "lb-bundle__product-image",
-                    loading: "lazy"
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "lb-bundle__product-info", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "lb-bundle__product-title", children: product.title }),
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "lb-bundle__product-price", children: (0, import_core7.formatMoney)(defaultVariant.price.amount, currency) }),
-                  (() => {
-                    const unitPriceText = (0, import_core7.formatUnitPrice)(
-                      defaultVariant.unitPrice,
-                      defaultVariant.unitPriceMeasurement,
-                      currency
-                    );
-                    return unitPriceText ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "lb-bundle__product-unit-price", children: unitPriceText }) : null;
-                  })()
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "lb-bundle__product-actions", children: selected ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "lb-bundle__quantity-control", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                    "button",
-                    {
-                      "aria-label": `Decrease ${product.title}`,
-                      onClick: () => updateQuantity(
-                        product.id,
-                        defaultVariant.id,
-                        selected.quantity - 1
-                      ),
-                      children: "\u2212"
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: selected.quantity }),
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                    "button",
-                    {
-                      "aria-label": `Increase ${product.title}`,
-                      onClick: () => updateQuantity(
-                        product.id,
-                        defaultVariant.id,
-                        selected.quantity + 1
-                      ),
-                      children: "+"
-                    }
-                  )
-                ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                  "button",
-                  {
-                    className: "lb-bundle__select-btn",
-                    onClick: () => toggleProduct(product.id, defaultVariant),
-                    disabled: !defaultVariant.availableForSale,
-                    children: defaultVariant.availableForSale ? "Select" : "Sold out"
-                  }
-                ) })
-              ]
-            },
-            product.id
-          );
-        }) }),
-        validation.message && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "lb-bundle__validation", role: "status", children: validation.message }),
-        cartError && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { className: "lb-bundle__title", children: bundle.title }),
+        bundle.discountLabel && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "lb-bundle__discount-badge", children: bundle.discountLabel }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "lb-bundle__instructions", children: bundle.minQuantity && bundle.maxQuantity ? `Select ${bundle.minQuantity}\u2013${bundle.maxQuantity} items` : bundle.minQuantity ? `Select at least ${bundle.minQuantity} items` : bundle.maxQuantity ? `Select up to ${bundle.maxQuantity} items` : "Select your items" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "lb-bundle__products lb-bundle__products--selectable", children: bundle.products.map((product) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          MixMatchProductRow,
+          {
+            product,
+            currency,
+            selections,
+            onToggle: toggleProduct,
+            onUpdateQuantity: updateQuantity
+          },
+          product.id
+        )) }),
+        validation.message && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "lb-bundle__validation", role: "status", children: validation.message }),
+        cartError && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           "button",
           {
             className: "lb-bundle__cta",
@@ -657,11 +971,110 @@ function MixMatchBundle(props) {
     }
   );
 }
+function MixMatchProductRow({
+  product,
+  currency,
+  selections,
+  onToggle,
+  onUpdateQuantity
+}) {
+  const variants = product.variants.nodes;
+  const optionNames = (0, import_react7.useMemo)(() => {
+    const first = variants[0];
+    return first ? first.selectedOptions.map((o) => o.name) : [];
+  }, [variants]);
+  const showPicker = variants.length > 1 && optionNames.length > 0;
+  const { selectedValues, selectedVariant, setOptionValue, optionsFor } = useVariantSelection({ variants, optionNames });
+  const displayVariant = selectedVariant ?? variants.find((v) => v.availableForSale) ?? variants[0] ?? null;
+  if (!displayVariant) return null;
+  const key = `${product.id}:${displayVariant.id}`;
+  const selected = selections.get(key);
+  const thumbImage = displayVariant.image ?? product.featuredImage;
+  const unitPriceText = (0, import_core9.formatUnitPrice)(
+    displayVariant.unitPrice,
+    displayVariant.unitPriceMeasurement,
+    currency
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      className: `lb-bundle__product lb-bundle__product--selectable ${selected ? "lb-bundle__product--selected" : ""}`,
+      children: [
+        thumbImage && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "img",
+          {
+            src: thumbImage.url,
+            alt: thumbImage.altText ?? product.title,
+            className: "lb-bundle__product-image",
+            loading: "lazy"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "lb-bundle__product-info", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "lb-bundle__product-title", children: product.title }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "lb-bundle__product-price", children: (0, import_core9.formatMoney)(displayVariant.price.amount, currency) }),
+          unitPriceText && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "lb-bundle__product-unit-price", children: unitPriceText }),
+          showPicker && !selected && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "lb-bundle__product-variant-pickers", children: optionNames.map((optionName, optionIndex) => {
+            const dropdownOptions = optionsFor(optionIndex).map((o) => ({
+              value: o.value,
+              label: o.value,
+              disabled: o.disabled
+            }));
+            return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              VariantDropdown,
+              {
+                options: dropdownOptions,
+                value: selectedValues[optionIndex] ?? null,
+                onChange: (v) => setOptionValue(optionIndex, v),
+                ariaLabel: optionName
+              },
+              optionName
+            );
+          }) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "lb-bundle__product-actions", children: selected ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "lb-bundle__quantity-control", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "button",
+            {
+              "aria-label": `Decrease ${product.title}`,
+              onClick: () => onUpdateQuantity(
+                product.id,
+                displayVariant.id,
+                selected.quantity - 1
+              ),
+              children: "\u2212"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: selected.quantity }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "button",
+            {
+              "aria-label": `Increase ${product.title}`,
+              onClick: () => onUpdateQuantity(
+                product.id,
+                displayVariant.id,
+                selected.quantity + 1
+              ),
+              children: "+"
+            }
+          )
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "button",
+          {
+            className: "lb-bundle__select-btn",
+            onClick: () => onToggle(product.id, displayVariant),
+            disabled: !displayVariant.availableForSale,
+            children: displayVariant.availableForSale ? "Select" : "Sold out"
+          }
+        ) })
+      ]
+    }
+  );
+}
 
 // src/components/VolumeBundle.tsx
-var import_react6 = require("react");
-var import_core8 = require("@lime-bundles/core");
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_react8 = require("react");
+var import_core10 = require("@lime-bundles/core");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 function VolumeBundle(props) {
   const {
     shopDomain,
@@ -685,12 +1098,12 @@ function VolumeBundle(props) {
     bundleType: "volume",
     enabled: analyticsEnabled !== false
   });
-  const [quantity, setQuantity] = (0, import_react6.useState)(1);
-  const [addingToCart, setAddingToCart] = (0, import_react6.useState)(false);
-  const [cartError, setCartError] = (0, import_react6.useState)(null);
+  const [quantity, setQuantity] = (0, import_react8.useState)(1);
+  const [addingToCart, setAddingToCart] = (0, import_react8.useState)(false);
+  const [cartError, setCartError] = (0, import_react8.useState)(null);
   const bundle = result.status === "success" && result.bundle.bundleType === "volume" ? result.bundle : null;
   const setConfigVarsRef = useWidgetConfigVars(bundle?.widgetConfig);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (result.status === "error") {
       onError?.(result.error);
       return;
@@ -704,18 +1117,35 @@ function VolumeBundle(props) {
     }
   }, [result, onError]);
   const product = bundle?.products[0];
-  const basePrice = product ? parseFloat(product.priceRange.minVariantPrice.amount) : 0;
+  const variants = (0, import_react8.useMemo)(() => product?.variants.nodes ?? [], [product]);
+  const optionNames = (0, import_react8.useMemo)(() => {
+    const first = variants[0];
+    return first ? first.selectedOptions.map((o) => o.name) : [];
+  }, [variants]);
+  const showPicker = variants.length > 1 && optionNames.length > 0;
+  const { selectedValues, selectedVariant, setOptionValue, optionsFor } = useVariantSelection({ variants, optionNames });
+  const displayVariant = selectedVariant ?? variants.find((v) => v.availableForSale) ?? variants[0];
+  const basePrice = displayVariant ? parseFloat(displayVariant.price.amount) : product ? parseFloat(product.priceRange.minVariantPrice.amount) : 0;
   const currency = product?.priceRange.minVariantPrice.currencyCode ?? "USD";
-  const tierSavings = bundle ? (0, import_core8.calculateTierSavings)(
-    bundle.volumeTiers,
-    basePrice,
-    quantity,
-    bundle.discountConfig.discountType
-  ) : [];
-  const activeTier = bundle ? (0, import_core8.getActiveTier)(bundle.volumeTiers, quantity) : null;
-  const handleAddToCart = (0, import_react6.useCallback)(async () => {
+  const thumbImage = displayVariant?.image ?? product?.featuredImage ?? null;
+  const unitPriceText = displayVariant ? (0, import_core10.formatUnitPrice)(
+    displayVariant.unitPrice,
+    displayVariant.unitPriceMeasurement,
+    currency
+  ) : null;
+  const tierSavings = (0, import_react8.useMemo)(
+    () => bundle ? (0, import_core10.calculateTierSavings)(
+      bundle.volumeTiers,
+      basePrice,
+      quantity,
+      bundle.discountConfig.discountType
+    ) : [],
+    [bundle, basePrice, quantity]
+  );
+  const activeTier = bundle ? (0, import_core10.getActiveTier)(bundle.volumeTiers, quantity) : null;
+  const handleAddToCart = (0, import_react8.useCallback)(async () => {
     if (!bundle || !product) return;
-    const variant = product.variants.nodes.find((v) => v.availableForSale);
+    const variant = selectedVariant ?? product.variants.nodes.find((v) => v.availableForSale);
     if (!variant) return;
     const lines = [
       {
@@ -752,18 +1182,20 @@ function VolumeBundle(props) {
     basePrice,
     onAddToCart,
     onError,
-    trackAddToCart
+    trackAddToCart,
+    selectedVariant,
+    tierSavings
   ]);
   if (result.status === "loading") {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "lb-skeleton lb-skeleton--title" }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "lb-skeleton lb-skeleton--tiers" })
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "lb-skeleton lb-skeleton--title" }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "lb-skeleton lb-skeleton--tiers" })
     ] });
   }
   if (result.status === "error") return null;
   if (!bundle) return null;
   if (!product) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "div",
     {
       ref: (el) => {
@@ -774,55 +1206,64 @@ function VolumeBundle(props) {
       role: "region",
       "aria-label": bundle.title,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { className: "lb-bundle__title", children: bundle.title }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "lb-bundle__product lb-bundle__product--volume", children: [
-          product.featuredImage && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h3", { className: "lb-bundle__title", children: bundle.title }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "lb-bundle__product lb-bundle__product--volume", children: [
+          thumbImage && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             "img",
             {
-              src: product.featuredImage.url,
-              alt: product.featuredImage.altText ?? product.title,
+              src: thumbImage.url,
+              alt: thumbImage.altText ?? product.title,
               className: "lb-bundle__product-image",
               loading: "lazy"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "lb-bundle__product-info", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "lb-bundle__product-title", children: product.title }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("p", { className: "lb-bundle__product-price", children: [
-              (0, import_core8.formatMoney)(basePrice, currency),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "lb-bundle__product-info", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "lb-bundle__product-title", children: product.title }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("p", { className: "lb-bundle__product-price", children: [
+              (0, import_core10.formatMoney)(basePrice, currency),
               " each"
             ] }),
-            (() => {
-              const variant = product.variants.nodes.find((v) => v.availableForSale) ?? product.variants.nodes[0];
-              const unitPriceText = variant ? (0, import_core8.formatUnitPrice)(
-                variant.unitPrice,
-                variant.unitPriceMeasurement,
-                currency
-              ) : null;
-              return unitPriceText ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "lb-bundle__product-unit-price", children: unitPriceText }) : null;
-            })()
+            unitPriceText && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "lb-bundle__product-unit-price", children: unitPriceText }),
+            showPicker && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "lb-bundle__product-variant-pickers", children: optionNames.map((optionName, optionIndex) => {
+              const dropdownOptions = optionsFor(optionIndex).map((o) => ({
+                value: o.value,
+                label: o.value,
+                disabled: o.disabled
+              }));
+              return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                VariantDropdown,
+                {
+                  options: dropdownOptions,
+                  value: selectedValues[optionIndex] ?? null,
+                  onChange: (v) => setOptionValue(optionIndex, v),
+                  ariaLabel: optionName
+                },
+                optionName
+              );
+            }) })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "div",
           {
             className: "lb-bundle__tiers",
             role: "table",
             "aria-label": "Volume discounts",
-            children: tierSavings.map((ts) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            children: tierSavings.map((ts) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
               "div",
               {
                 className: `lb-bundle__tier ${ts.isActive ? "lb-bundle__tier--active" : ""}`,
                 role: "row",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "lb-bundle__tier-quantity", role: "cell", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "lb-bundle__tier-quantity", role: "cell", children: [
                     ts.tier.minQuantity,
                     "+ items"
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "lb-bundle__tier-price", role: "cell", children: [
-                    (0, import_core8.formatMoney)(ts.unitPrice, currency),
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "lb-bundle__tier-price", role: "cell", children: [
+                    (0, import_core10.formatMoney)(ts.unitPrice, currency),
                     " each"
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "lb-bundle__tier-savings", role: "cell", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "lb-bundle__tier-savings", role: "cell", children: [
                     "Save ",
                     ts.savingsPercent.toFixed(0),
                     "%"
@@ -833,10 +1274,10 @@ function VolumeBundle(props) {
             ))
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "lb-bundle__quantity-selector", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { htmlFor: `lb-qty-${bundle.id}`, children: "Quantity" }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "lb-bundle__quantity-control", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "lb-bundle__quantity-selector", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("label", { htmlFor: `lb-qty-${bundle.id}`, children: "Quantity" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "lb-bundle__quantity-control", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
               "button",
               {
                 "aria-label": "Decrease quantity",
@@ -844,7 +1285,7 @@ function VolumeBundle(props) {
                 children: "\u2212"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
               "input",
               {
                 id: `lb-qty-${bundle.id}`,
@@ -858,7 +1299,7 @@ function VolumeBundle(props) {
                 className: "lb-bundle__quantity-input"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
               "button",
               {
                 "aria-label": "Increase quantity",
@@ -868,8 +1309,8 @@ function VolumeBundle(props) {
             )
           ] })
         ] }),
-        cartError && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        cartError && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "button",
           {
             className: "lb-bundle__cta",
@@ -885,21 +1326,21 @@ function VolumeBundle(props) {
 }
 
 // src/hooks/useBundlesForProduct.ts
-var import_react7 = require("react");
-var import_core9 = require("@lime-bundles/core");
+var import_react9 = require("react");
+var import_core11 = require("@lime-bundles/core");
 var INITIAL_STATE2 = {
   status: "loading",
   bundles: null,
   error: null
 };
 function useBundlesForProduct(options) {
-  const [state, setState] = (0, import_react7.useState)(
+  const [state, setState] = (0, import_react9.useState)(
     INITIAL_STATE2
   );
-  (0, import_react7.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     const controller = new AbortController();
     setState(INITIAL_STATE2);
-    (0, import_core9.fetchBundlesForProduct)({
+    (0, import_core11.fetchBundlesForProduct)({
       shopDomain: options.shopDomain,
       storefrontAccessToken: options.storefrontAccessToken,
       productHandle: options.productHandle,
@@ -922,7 +1363,7 @@ function useBundlesForProduct(options) {
       signal: controller.signal
     }).then((css) => {
       if (controller.signal.aborted) return;
-      (0, import_core9.injectCustomCss)(options.shopDomain, css);
+      (0, import_core11.injectCustomCss)(options.shopDomain, css);
     }).catch(() => {
     });
     return () => {
@@ -938,8 +1379,8 @@ function useBundlesForProduct(options) {
 }
 
 // src/index.ts
-var import_core10 = require("@lime-bundles/core");
-var import_core11 = require("@lime-bundles/core");
+var import_core12 = require("@lime-bundles/core");
+var import_core13 = require("@lime-bundles/core");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   BUNDLES_FOR_PRODUCT_QUERY,
@@ -949,6 +1390,7 @@ var import_core11 = require("@lime-bundles/core");
   MixMatchBundle,
   SHOP_CUSTOM_CSS_QUERY,
   StorefrontApiError,
+  VariantDropdown,
   VolumeBundle,
   WIDGET_CONFIG_DEFAULTS,
   applyABVariantB,
@@ -984,6 +1426,7 @@ var import_core11 = require("@lime-bundles/core");
   useAnalytics,
   useBundleData,
   useBundlesForProduct,
+  useVariantSelection,
   useWidgetConfigVars,
   validateQuantity
 });