@lime-bundles/react 0.1.0

package/dist/index.cjs

@@ -0,0 +1,689 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  FixedBundle: () => FixedBundle,
+  MixMatchBundle: () => MixMatchBundle,
+  VolumeBundle: () => VolumeBundle,
+  useAnalytics: () => useAnalytics,
+  useBundleData: () => useBundleData,
+  useCart: () => useCart
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/components/FixedBundle.tsx
+var import_react4 = require("react");
+var import_core4 = require("@lime-bundles/core");
+
+// src/hooks/useBundleData.ts
+var import_react = require("react");
+var import_core = require("@lime-bundles/core");
+function useBundleData(options) {
+  const [bundle, setBundle] = (0, import_react.useState)(null);
+  const [loading, setLoading] = (0, import_react.useState)(true);
+  const [error, setError] = (0, import_react.useState)(null);
+  const abortRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    abortRef.current?.abort();
+    const controller = new AbortController();
+    abortRef.current = controller;
+    setLoading(true);
+    setError(null);
+    const client = (0, import_core.createStorefrontClient)({
+      shopDomain: options.shopDomain,
+      accessToken: options.storefrontAccessToken
+    });
+    client.query(import_core.BUNDLE_METAOBJECT_QUERY, {
+      id: options.bundleGid
+    }).then((data) => {
+      if (controller.signal.aborted) return;
+      if (!data.metaobject) {
+        setError("Bundle not found");
+        setBundle(null);
+      } else {
+        const parsed = (0, import_core.parseMetaobjectBundle)(
+          data.metaobject.id,
+          data.metaobject.fields
+        );
+        if (parsed) {
+          setBundle(parsed);
+        } else {
+          setError("Bundle is not active or has expired");
+          setBundle(null);
+        }
+      }
+      setLoading(false);
+    }).catch((err) => {
+      if (controller.signal.aborted) return;
+      setError(err instanceof Error ? err.message : "Failed to load bundle");
+      setLoading(false);
+    });
+    return () => {
+      controller.abort();
+    };
+  }, [options.shopDomain, options.storefrontAccessToken, options.bundleGid]);
+  return { bundle, loading, error };
+}
+
+// src/hooks/useCart.ts
+var import_react2 = require("react");
+var import_core2 = require("@lime-bundles/core");
+function useCart(options) {
+  const [loading, setLoading] = (0, import_react2.useState)(false);
+  const [error, setError] = (0, import_react2.useState)(null);
+  const [lastResult, setLastResult] = (0, import_react2.useState)(null);
+  const cart = (0, import_react2.useMemo)(() => {
+    const apiType = options.cartApi ?? (0, import_core2.detectCartApi)();
+    if (apiType === "ajax") {
+      return (0, import_core2.createAjaxCartApi)(options.bundleGid, options.bundleType);
+    }
+    const client = (0, import_core2.createStorefrontClient)({
+      shopDomain: options.shopDomain,
+      accessToken: options.storefrontAccessToken
+    });
+    return (0, import_core2.createStorefrontCartApi)(
+      client,
+      options.bundleGid,
+      options.bundleType,
+      options.cartId
+    );
+  }, [
+    options.shopDomain,
+    options.storefrontAccessToken,
+    options.bundleGid,
+    options.bundleType,
+    options.cartId,
+    options.cartApi
+  ]);
+  const addToCart = (0, import_react2.useCallback)(
+    async (items) => {
+      setLoading(true);
+      setError(null);
+      try {
+        const result = await cart.addLines(items);
+        setLastResult(result);
+        if (!result.success) {
+          setError(result.error ?? "Failed to add to cart");
+        }
+        return result;
+      } catch (err) {
+        const message = err instanceof Error ? err.message : "Failed to add to cart";
+        setError(message);
+        const result = { success: false, error: message };
+        setLastResult(result);
+        return result;
+      } finally {
+        setLoading(false);
+      }
+    },
+    [cart]
+  );
+  return { addToCart, loading, error, lastResult };
+}
+
+// src/hooks/useAnalytics.ts
+var import_react3 = require("react");
+var import_core3 = require("@lime-bundles/core");
+function useAnalytics(options) {
+  const impressionFiredRef = (0, import_react3.useRef)(false);
+  const [element, setElement] = (0, import_react3.useState)(null);
+  const elementRef = (0, import_react3.useCallback)((el) => {
+    setElement(el);
+  }, []);
+  const config = (0, import_react3.useMemo)(
+    () => ({ shopDomain: options.shopDomain, appUrl: options.appUrl }),
+    [options.shopDomain, options.appUrl]
+  );
+  (0, import_react3.useEffect)(() => {
+    impressionFiredRef.current = false;
+  }, [options.bundleGid, options.abVariant]);
+  (0, import_react3.useEffect)(() => {
+    if (options.enabled === false) return;
+    if (impressionFiredRef.current) return;
+    if (!element) return;
+    const cleanup = (0, import_core3.observeImpression)(element, () => {
+      if (impressionFiredRef.current) return;
+      impressionFiredRef.current = true;
+      (0, import_core3.reportImpression)(config, {
+        bundleGid: options.bundleGid,
+        bundleType: options.bundleType,
+        abTestId: options.abTestId,
+        abVariant: options.abVariant
+      });
+    });
+    return cleanup;
+  }, [
+    element,
+    config,
+    options.enabled,
+    options.bundleGid,
+    options.bundleType,
+    options.abTestId,
+    options.abVariant
+  ]);
+  const trackAddToCart = (0, import_react3.useCallback)(
+    (event) => {
+      if (options.enabled === false) return;
+      (0, import_core3.reportAddToCart)(config, {
+        bundleGid: options.bundleGid,
+        bundleType: options.bundleType,
+        productId: event.productId,
+        quantity: event.quantity,
+        totalPrice: event.totalPrice,
+        abTestId: options.abTestId,
+        abVariant: options.abVariant
+      });
+    },
+    [
+      config,
+      options.enabled,
+      options.bundleGid,
+      options.bundleType,
+      options.abTestId,
+      options.abVariant
+    ]
+  );
+  return { elementRef, trackAddToCart };
+}
+
+// src/components/FixedBundle.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function FixedBundle(props) {
+  const {
+    shopDomain,
+    storefrontAccessToken,
+    bundleGid,
+    cartId,
+    cartApi,
+    appUrl,
+    analyticsEnabled,
+    onAddToCart,
+    onError,
+    className
+  } = props;
+  const { bundle, loading, error: loadError } = useBundleData({
+    shopDomain,
+    storefrontAccessToken,
+    bundleGid
+  });
+  const { addToCart, loading: cartLoading, error: cartError } = useCart({
+    shopDomain,
+    storefrontAccessToken,
+    bundleGid,
+    bundleType: "fixed",
+    cartId,
+    cartApi
+  });
+  const { elementRef, trackAddToCart } = useAnalytics({
+    shopDomain,
+    appUrl: appUrl ?? `https://${shopDomain}`,
+    bundleGid,
+    bundleType: "fixed",
+    enabled: analyticsEnabled !== false
+  });
+  const handleAddToCart = (0, import_react4.useCallback)(async () => {
+    if (!bundle) return;
+    const items = bundle.products.filter((p) => p.variants.nodes.some((v) => v.availableForSale)).map((p) => {
+      const variant = p.variants.nodes.find((v) => v.availableForSale);
+      return { variantId: variant.id, quantity: 1 };
+    });
+    if (items.length === 0) return;
+    const result = await addToCart(items);
+    if (result.success) {
+      const totalPrice = bundle.products.reduce((sum, p) => {
+        const price = parseFloat(p.priceRange.minVariantPrice.amount);
+        return sum + (0, import_core4.calculateDiscount)(price, bundle.discountConfig.discountType, bundle.discountConfig.discountValue);
+      }, 0);
+      trackAddToCart({
+        productId: bundle.products[0]?.id ?? "",
+        quantity: 1,
+        totalPrice: Math.round(totalPrice * 100) / 100
+      });
+      onAddToCart?.(items);
+    }
+  }, [bundle, addToCart, trackAddToCart, onAddToCart]);
+  if (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" })
+    ] });
+  }
+  if (loadError || !bundle) {
+    if (onError) onError(loadError ?? "Bundle not found");
+    return null;
+  }
+  const currency = bundle.products[0]?.priceRange.minVariantPrice.currencyCode ?? "USD";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      ref: elementRef,
+      className: `lb-bundle lb-bundle--fixed ${className ?? ""}`,
+      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) => /* @__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: (0, import_core4.formatMoney)(product.priceRange.minVariantPrice.amount, currency) })
+          ] })
+        ] }, product.id)) }),
+        cartError && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            className: "lb-bundle__cta",
+            onClick: handleAddToCart,
+            disabled: cartLoading,
+            "aria-busy": cartLoading,
+            children: cartLoading ? "Adding..." : bundle.widgetConfig.ctaText ?? "Add Bundle to Cart"
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/MixMatchBundle.tsx
+var import_react5 = require("react");
+var import_core5 = require("@lime-bundles/core");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function MixMatchBundle(props) {
+  const {
+    shopDomain,
+    storefrontAccessToken,
+    bundleGid,
+    cartId,
+    cartApi,
+    appUrl,
+    analyticsEnabled,
+    onAddToCart,
+    onError,
+    className
+  } = props;
+  const { bundle, loading, error: loadError } = useBundleData({
+    shopDomain,
+    storefrontAccessToken,
+    bundleGid
+  });
+  const { addToCart, loading: cartLoading, error: cartError } = useCart({
+    shopDomain,
+    storefrontAccessToken,
+    bundleGid,
+    bundleType: "mix_match",
+    cartId,
+    cartApi
+  });
+  const { elementRef, trackAddToCart } = useAnalytics({
+    shopDomain,
+    appUrl: appUrl ?? `https://${shopDomain}`,
+    bundleGid,
+    bundleType: "mix_match",
+    enabled: analyticsEnabled !== false
+  });
+  const [selections, setSelections] = (0, import_react5.useState)(/* @__PURE__ */ new Map());
+  const totalQuantity = Array.from(selections.values()).reduce(
+    (sum, s) => sum + s.quantity,
+    0
+  );
+  const validation = bundle ? (0, import_core5.validateQuantity)(totalQuantity, bundle.minQuantity, bundle.maxQuantity) : { valid: false, totalQuantity: 0, message: null };
+  const toggleProduct = (0, import_react5.useCallback)(
+    (productId, variant) => {
+      setSelections((prev) => {
+        const next = new Map(prev);
+        const key = `${productId}:${variant.id}`;
+        if (next.has(key)) {
+          next.delete(key);
+        } else {
+          next.set(key, { productId, variantId: variant.id, quantity: 1 });
+        }
+        return next;
+      });
+    },
+    []
+  );
+  const updateQuantity = (0, import_react5.useCallback)(
+    (productId, variantId, quantity) => {
+      setSelections((prev) => {
+        const next = new Map(prev);
+        const key = `${productId}:${variantId}`;
+        if (quantity <= 0) {
+          next.delete(key);
+        } else {
+          next.set(key, { productId, variantId, quantity });
+        }
+        return next;
+      });
+    },
+    []
+  );
+  const handleAddToCart = (0, import_react5.useCallback)(async () => {
+    if (!bundle || !validation.valid) return;
+    const items = Array.from(selections.values()).map((s) => ({
+      variantId: s.variantId,
+      quantity: s.quantity
+    }));
+    const result = await addToCart(items);
+    if (result.success) {
+      const totalPrice = items.reduce((sum, item) => {
+        const product = bundle.products.find(
+          (p) => p.variants.nodes.some((v) => v.id === item.variantId)
+        );
+        const variant = product?.variants.nodes.find(
+          (v) => v.id === item.variantId
+        );
+        return sum + parseFloat(variant?.price.amount ?? "0") * item.quantity;
+      }, 0);
+      trackAddToCart({
+        productId: bundle.products[0]?.id ?? "",
+        quantity: totalQuantity,
+        totalPrice: Math.round(totalPrice * 100) / 100
+      });
+      onAddToCart?.(items);
+      setSelections(/* @__PURE__ */ new Map());
+    }
+  }, [bundle, selections, validation.valid, addToCart, trackAddToCart, totalQuantity, onAddToCart]);
+  if (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" })
+    ] });
+  }
+  if (loadError || !bundle) {
+    if (onError) onError(loadError ?? "Bundle not found");
+    return null;
+  }
+  const currency = bundle.products[0]?.priceRange.minVariantPrice.currencyCode ?? "USD";
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
+    {
+      ref: elementRef,
+      className: `lb-bundle lb-bundle--mix-match ${className ?? ""}`,
+      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_core5.formatMoney)(defaultVariant.price.amount, currency) })
+                ] }),
+                /* @__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)(
+          "button",
+          {
+            className: "lb-bundle__cta",
+            onClick: handleAddToCart,
+            disabled: cartLoading || !validation.valid,
+            "aria-busy": cartLoading,
+            children: cartLoading ? "Adding..." : bundle.widgetConfig.ctaText ?? `Add ${totalQuantity} Items to Cart`
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/VolumeBundle.tsx
+var import_react6 = require("react");
+var import_core6 = require("@lime-bundles/core");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function VolumeBundle(props) {
+  const {
+    shopDomain,
+    storefrontAccessToken,
+    bundleGid,
+    cartId,
+    cartApi,
+    appUrl,
+    analyticsEnabled,
+    onAddToCart,
+    onError,
+    className
+  } = props;
+  const { bundle, loading, error: loadError } = useBundleData({
+    shopDomain,
+    storefrontAccessToken,
+    bundleGid
+  });
+  const { addToCart, loading: cartLoading, error: cartError } = useCart({
+    shopDomain,
+    storefrontAccessToken,
+    bundleGid,
+    bundleType: "volume",
+    cartId,
+    cartApi
+  });
+  const { elementRef, trackAddToCart } = useAnalytics({
+    shopDomain,
+    appUrl: appUrl ?? `https://${shopDomain}`,
+    bundleGid,
+    bundleType: "volume",
+    enabled: analyticsEnabled !== false
+  });
+  const [quantity, setQuantity] = (0, import_react6.useState)(1);
+  const product = bundle?.products[0];
+  const basePrice = product ? parseFloat(product.priceRange.minVariantPrice.amount) : 0;
+  const currency = product?.priceRange.minVariantPrice.currencyCode ?? "USD";
+  const tierSavings = bundle ? (0, import_core6.calculateTierSavings)(bundle.volumeTiers, basePrice, quantity) : [];
+  const activeTier = bundle ? (0, import_core6.getActiveTier)(bundle.volumeTiers, quantity) : null;
+  const handleAddToCart = (0, import_react6.useCallback)(async () => {
+    if (!bundle || !product) return;
+    const variant = product.variants.nodes.find((v) => v.availableForSale);
+    if (!variant) return;
+    const items = [
+      { variantId: variant.id, quantity }
+    ];
+    const result = await addToCart(items);
+    if (result.success) {
+      const unitPrice = activeTier ? basePrice * (1 - activeTier.discountValue / 100) : basePrice;
+      trackAddToCart({
+        productId: product.id,
+        quantity,
+        totalPrice: Math.round(unitPrice * quantity * 100) / 100
+      });
+      onAddToCart?.(items);
+    }
+  }, [bundle, product, quantity, activeTier, basePrice, addToCart, trackAddToCart, onAddToCart]);
+  if (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" })
+    ] });
+  }
+  if (loadError || !bundle || !product) {
+    if (onError) onError(loadError ?? "Bundle not found");
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      ref: elementRef,
+      className: `lb-bundle lb-bundle--volume ${className ?? ""}`,
+      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)(
+            "img",
+            {
+              src: product.featuredImage.url,
+              alt: product.featuredImage.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_core6.formatMoney)(basePrice, currency),
+              " each"
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "lb-bundle__tiers", role: "table", "aria-label": "Volume discounts", children: tierSavings.map((ts) => /* @__PURE__ */ (0, import_jsx_runtime3.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: [
+                ts.tier.minQuantity,
+                "+ items"
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "lb-bundle__tier-price", role: "cell", children: [
+                (0, import_core6.formatMoney)(ts.unitPrice, currency),
+                " each"
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "lb-bundle__tier-savings", role: "cell", children: [
+                "Save ",
+                ts.savingsPercent.toFixed(0),
+                "%"
+              ] }),
+              ts.tier.label && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "lb-bundle__tier-label", role: "cell", children: ts.tier.label })
+            ]
+          },
+          ts.tier.minQuantity
+        )) }),
+        /* @__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)(
+              "button",
+              {
+                "aria-label": "Decrease quantity",
+                onClick: () => setQuantity((q) => Math.max(1, q - 1)),
+                children: "\u2212"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "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__ */ (0, import_jsx_runtime3.jsx)(
+              "button",
+              {
+                "aria-label": "Increase quantity",
+                onClick: () => setQuantity((q) => q + 1),
+                children: "+"
+              }
+            )
+          ] })
+        ] }),
+        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",
+            onClick: handleAddToCart,
+            disabled: cartLoading,
+            "aria-busy": cartLoading,
+            children: cartLoading ? "Adding..." : bundle.widgetConfig.ctaText ?? `Add ${quantity} to Cart`
+          }
+        )
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FixedBundle,
+  MixMatchBundle,
+  VolumeBundle,
+  useAnalytics,
+  useBundleData,
+  useCart
+});
+//# sourceMappingURL=index.cjs.map