@rebuy/rebuy-hydrogen 3.0.0-beta.17 → 3.0.0-beta.19

package/dist/index.mjs

@@ -265,9 +265,26 @@ var useRebuyConfig = () => {
 import { createContext as createContext2 } from "react";
 var RebuyContext = createContext2(null);
 
+// src/hooks/useBFCacheReset.ts
+import { useEffect as useEffect2, useState as useState2 } from "react";
+var useBFCacheReset = () => {
+  const [resetKey, setResetKey] = useState2(() => Date.now());
+  useEffect2(() => {
+    const handlePageShow = (event) => {
+      if (event.persisted) {
+        console.log("[useBFCacheReset] B/F cache detected, triggering reset");
+        setResetKey(Date.now());
+      }
+    };
+    window.addEventListener("pageshow", handlePageShow);
+    return () => window.removeEventListener("pageshow", handlePageShow);
+  }, []);
+  return resetKey;
+};
+
 // src/smart-cart/context/SmartCartContext.tsx
 import { isEqual as isEqual2 } from "lodash-es";
-import { createContext as createContext3, useCallback, useContext as useContext2, useEffect as useEffect2, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
+import { createContext as createContext3, useCallback, useContext as useContext2, useEffect as useEffect3, useMemo as useMemo2, useRef as useRef2, useState as useState3 } from "react";
 import { useShallow } from "zustand/react/shallow";
 
 // src/smart-cart/store/tieredProgressBarStore.ts
@@ -2105,7 +2122,7 @@ var SmartCartProvider = ({
   storefrontAccessToken
 }) => {
   const rebuyContext = useContext2(RebuyContext);
-  const [isVisible, setIsVisible] = useState2(false);
+  const [isVisible, setIsVisible] = useState3(false);
   const showCart = useCallback(() => setIsVisible(true), []);
   const hideCart = useCallback(() => setIsVisible(false), []);
   const toggleCart = useCallback(() => setIsVisible((prev) => !prev), []);
@@ -2207,12 +2224,12 @@ var SmartCartProvider = ({
     const tpbComponentConfig = config?.components?.find((comp) => comp.type === "tiered_progress_bar");
     return tpbComponentConfig?.settings ?? null;
   }, [config]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (progressBarSettings && isCartReady && shopifyDomain && storefrontAccessToken) {
       tpbInit(progressBarSettings, shopifyDomain, storefrontAccessToken);
     }
   }, [progressBarSettings, isCartReady, shopifyDomain, storefrontAccessToken, tpbInit]);
-  useEffect2(() => {
+  useEffect3(() => {
     const currentTpbState = useTieredProgressBarStore.getState();
     const newTpbIsCartReady = isCartReady;
     if (!isEqual2(currentTpbState.cartData, mappedStorefrontCartData) || currentTpbState.isCartReady !== newTpbIsCartReady) {
@@ -2351,7 +2368,7 @@ var SmartCartProvider = ({
       );
     }
   }, [mappedStorefrontCartData]);
-  useEffect2(() => {
+  useEffect3(() => {
     const conditions = {
       activeBarConfigPresent: !!activeBarConfig,
       cartDataIsEqual: isEqual2(tpbInternalCartData, mappedStorefrontCartData),
@@ -2726,6 +2743,7 @@ var RebuyHydrogenContext = ({
   shop,
   sourceHydrogenCart
 }) => {
+  const resetKey = useBFCacheReset();
   const {
     apiKey,
     fetchError: configFetchError,
@@ -2767,7 +2785,8 @@ var RebuyHydrogenContext = ({
       shopifyDomain: shopifyDomainForSmartCart,
       storefrontAccessToken,
       children
-    }
+    },
+    `smart-cart-${resetKey}`
   ) : /* @__PURE__ */ jsxs2(Fragment, { children: [
     enableSmartCart && !hasAllSmartCartPrerequisites && !warningLogged2.current && (() => {
       console.warn(
@@ -2825,7 +2844,7 @@ var RebuyHydrogenContextProvider = ({
 // src/providers/RebuyHydrogenReactContextProvider.tsx
 import * as Utilities3 from "@rebuy/rebuy/utilities";
 import { CartProvider, ShopifyProvider, useCart } from "@shopify/hydrogen-react";
-import { useEffect as useEffect3, useMemo as useMemo4, useRef as useRef4 } from "react";
+import { useEffect as useEffect4, useMemo as useMemo4, useRef as useRef4 } from "react";
 import { useLocation as useLocation2 } from "react-router";
 
 // src/queries/cart.queries.ts
@@ -3369,6 +3388,7 @@ var RebuyHydrogenReactContext = ({
   publicPrimaryDomain,
   publicStorefrontToken
 }) => {
+  const resetKey = useBFCacheReset();
   const {
     apiKey,
     fetchError: configFetchError,
@@ -3436,7 +3456,7 @@ var RebuyHydrogenReactContext = ({
   const shopifyDomainForSmartCart = configShopDomain || rebuyConfig?.shop?.domain || "";
   const storefrontAccessToken = publicStorefrontToken || rebuyConfig?.shop?.storefront_access_token || "";
   const hasAllSmartCartPrerequisites = enableSmartCart && configLoadingStatus === "success" && !!rebuyConfig && !!(smartCartConfig && apiKey && shopifyDomainForSmartCart && storefrontAccessToken);
-  useEffect3(() => {
+  useEffect4(() => {
     if (configLoadingStatus === "loading") return;
     const smartCartDetails = enableSmartCart ? {
       hasAllSmartCartPrerequisites,
@@ -3473,7 +3493,8 @@ var RebuyHydrogenReactContext = ({
       shopifyDomain: shopifyDomainForSmartCart,
       storefrontAccessToken,
       children
-    }
+    },
+    `smart-cart-react-${resetKey}`
   ) : /* @__PURE__ */ jsxs3(Fragment2, { children: [
     enableSmartCart && !hasAllSmartCartPrerequisites && !warningLogged2.current && (() => {
       console.warn(
@@ -3612,14 +3633,14 @@ var RebuyHydrogenReactContextProvider = ({
 
 // src/smart-cart/components/SmartCartContainer/SmartCartContainer.tsx
 import clsx13 from "clsx";
-import React11, { useCallback as useCallback14, useEffect as useEffect21, useMemo as useMemo20, useRef as useRef13 } from "react";
+import React11, { useCallback as useCallback14, useEffect as useEffect22, useMemo as useMemo20, useRef as useRef13 } from "react";
 
 // src/smart-cart/components/_Layouts/AnchorSlot.tsx
 import { useMemo as useMemo19 } from "react";
 
 // src/smart-cart/components/AnnouncementBar/AnnouncementBar.tsx
 import DOMPurify from "dompurify";
-import React, { useCallback as useCallback2, useEffect as useEffect4, useMemo as useMemo5, useRef as useRef5, useState as useState3 } from "react";
+import React, { useCallback as useCallback2, useEffect as useEffect5, useMemo as useMemo5, useRef as useRef5, useState as useState4 } from "react";
 
 // src/smart-cart/components/ScreenReaderText/ScreenReaderText.tsx
 import { jsx as jsx7 } from "react/jsx-runtime";
@@ -3635,14 +3656,14 @@ var AUTOPLAY_INTERVAL = 5e3;
 var DRAG_THRESHOLD = 50;
 var AnnouncementBar = React.memo(({ componentConfig }) => {
   const { isVisible } = useSmartCart();
-  const [currentSlideIndex, setCurrentSlideIndex] = useState3(0);
-  const [isPaused, setIsPaused] = useState3(false);
-  const [isFocused, setIsFocused] = useState3(false);
+  const [currentSlideIndex, setCurrentSlideIndex] = useState4(0);
+  const [isPaused, setIsPaused] = useState4(false);
+  const [isFocused, setIsFocused] = useState4(false);
   const intervalRef = useRef5(null);
   const containerRef = useRef5(null);
-  const [isDragging, setIsDragging] = useState3(false);
-  const [startX, setStartX] = useState3(0);
-  const [dragOffset, setDragOffset] = useState3(0);
+  const [isDragging, setIsDragging] = useState4(false);
+  const [startX, setStartX] = useState4(0);
+  const [dragOffset, setDragOffset] = useState4(0);
   const sanitizedMessages = useMemo5(() => {
     const settings = componentConfig?.settings;
     const rawMessages = settings?.messages ?? [];
@@ -3674,11 +3695,11 @@ var AnnouncementBar = React.memo(({ componentConfig }) => {
     },
     [messageCount]
   );
-  useEffect4(() => {
+  useEffect5(() => {
     startTimer();
     return clearTimer;
   }, [startTimer, isPaused, isVisible, isFocused]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!isVisible) {
       setCurrentSlideIndex(0);
       setIsPaused(false);
@@ -3814,7 +3835,7 @@ AnnouncementBar.displayName = "AnnouncementBar";
 
 // src/smart-cart/components/CartItem/CartItem.tsx
 import clsx from "clsx";
-import { useCallback as useCallback4, useEffect as useEffect5, useMemo as useMemo7, useState as useState5 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect6, useMemo as useMemo7, useState as useState6 } from "react";
 import { useFetcher } from "react-router";
 
 // src/components/RebuyLink/RebuyLink.tsx
@@ -3825,7 +3846,7 @@ var RebuyLink = ({ ariaLabel, children, className, handle, onClick, role = "link
 };
 
 // src/smart-cart/hooks/useCartItemFeatures.ts
-import { useCallback as useCallback3, useMemo as useMemo6, useState as useState4 } from "react";
+import { useCallback as useCallback3, useMemo as useMemo6, useState as useState5 } from "react";
 
 // src/smart-cart/utils/imageUtils.ts
 var sizeImage = (src, size) => {
@@ -3854,7 +3875,7 @@ var mapCartAttributes = (attributes) => {
   }));
 };
 var useCartItemFeatures = ({ config, line }) => {
-  const [isBundleExpanded, setIsBundleExpanded] = useState4(false);
+  const [isBundleExpanded, setIsBundleExpanded] = useState5(false);
   const productTitle = useMemo6(() => line.merchandise.product.title, [line.merchandise.product.title]);
   const variantTitle = useMemo6(
     () => line.merchandise.title !== "Default Title" ? line.merchandise.title : null,
@@ -4247,12 +4268,12 @@ var Spinner = ({ className }) => /* @__PURE__ */ jsx10("span", { className: clsx
 var CartItem = ({ line }) => {
   const { config, isCartBusy, isHydrogenReact, removeItem, updateItem } = useSmartCart();
   const itemFetcher = useFetcher();
-  const [isIncreasing, setIsIncreasing] = useState5(false);
-  const [isDecreasing, setIsDecreasing] = useState5(false);
-  const [isRemoving, setIsRemoving] = useState5(false);
-  const [isAdjustingBMSM, setIsAdjustingBMSM] = useState5(false);
-  const [isSwitchingSubscription, setIsSwitchingSubscription] = useState5(false);
-  const [switchingDirection, setSwitchingDirection] = useState5(null);
+  const [isIncreasing, setIsIncreasing] = useState6(false);
+  const [isDecreasing, setIsDecreasing] = useState6(false);
+  const [isRemoving, setIsRemoving] = useState6(false);
+  const [isAdjustingBMSM, setIsAdjustingBMSM] = useState6(false);
+  const [isSwitchingSubscription, setIsSwitchingSubscription] = useState6(false);
+  const [switchingDirection, setSwitchingDirection] = useState6(null);
   const { toggleCart } = useSmartCart();
   const {
     actions: itemActionsLogic,
@@ -4450,7 +4471,7 @@ var CartItem = ({ line }) => {
     sts.isCurrentlySubscription,
     sts.availableFrequencies
   ]);
-  useEffect5(() => {
+  useEffect6(() => {
     const resetLocalSpinners = () => {
       setIsIncreasing(false);
       setIsDecreasing(false);
@@ -4751,7 +4772,7 @@ var CartItemList = ({ componentConfig }) => {
 
 // src/smart-cart/components/CartNoteInput/CartNoteInput.tsx
 import clsx2 from "clsx";
-import React2, { useCallback as useCallback5, useEffect as useEffect6, useMemo as useMemo8, useRef as useRef6, useState as useState6 } from "react";
+import React2, { useCallback as useCallback5, useEffect as useEffect7, useMemo as useMemo8, useRef as useRef6, useState as useState7 } from "react";
 import { useFetcher as useFetcher2 } from "react-router";
 
 // src/smart-cart/components/CartNoteInput/CartNoteInput.module.css
@@ -4776,10 +4797,10 @@ var CartNoteInput = React2.memo(({ componentConfig }) => {
   const placeholder = settings?.language?.notes_placeholder ?? "Your notes...";
   const limitChars = settings?.limit_characters ?? true;
   const maxLength = settings?.max_length ?? 200;
-  const [currentNoteValue, setCurrentNoteValue] = useState6(cartData?.note || "");
-  const [isTextareaVisible, setIsTextareaVisible] = useState6(!!cartData?.note);
-  const [isSaving, setIsSaving] = useState6(false);
-  const [saveMessage, setSaveMessage] = useState6(null);
+  const [currentNoteValue, setCurrentNoteValue] = useState7(cartData?.note || "");
+  const [isTextareaVisible, setIsTextareaVisible] = useState7(!!cartData?.note);
+  const [isSaving, setIsSaving] = useState7(false);
+  const [saveMessage, setSaveMessage] = useState7(null);
   const saveMessageTimerRef = useRef6(null);
   const currentCartNoteFromCtx = cartData?.note || "";
   const isNoteChanged = currentNoteValue.trim() !== currentCartNoteFromCtx.trim();
@@ -4789,7 +4810,7 @@ var CartNoteInput = React2.memo(({ componentConfig }) => {
     return noteFetcher.state !== "idle" || isSaving;
   }, [isHydrogenReact, isGlobalCartLoading, noteFetcher.state, isSaving]);
   const canSave = isNoteChanged && !isLoadingCombined;
-  useEffect6(() => {
+  useEffect7(() => {
     const noteFromCart = cartData?.note || "";
     if (!isTextareaFocusedRef.current && !isSaving && noteFromCart !== currentNoteValue) {
       setCurrentNoteValue(noteFromCart);
@@ -4798,7 +4819,7 @@ var CartNoteInput = React2.memo(({ componentConfig }) => {
     } else if (!noteFromCart && isTextareaVisible && !isSaving && !currentNoteValue.trim()) {
     }
   }, [cartData?.note, isSaving, currentNoteValue, isTextareaVisible]);
-  useEffect6(() => {
+  useEffect7(() => {
     return () => {
       if (saveMessageTimerRef.current) clearTimeout(saveMessageTimerRef.current);
     };
@@ -4871,7 +4892,7 @@ var CartNoteInput = React2.memo(({ componentConfig }) => {
     },
     [handleSave]
   );
-  useEffect6(() => {
+  useEffect7(() => {
     if (isHydrogenReact) {
       if (!isGlobalCartLoading && isSaving) {
         setIsSaving(false);
@@ -5008,7 +5029,7 @@ CartNoteInput.displayName = "CartNoteInput";
 
 // src/smart-cart/components/CartSubtotal/CartSubtotal.tsx
 import clsx3 from "clsx";
-import React3, { useCallback as useCallback6, useMemo as useMemo9, useState as useState7 } from "react";
+import React3, { useCallback as useCallback6, useMemo as useMemo9, useState as useState8 } from "react";
 
 // src/smart-cart/components/CartSubtotal/CartSubtotal.module.css
 var result6 = { "rebuy-cart-subtotal": "CartSubtotal_rebuy-cart-subtotal", "rebuy-cart-subtotal--simple": "CartSubtotal_rebuy-cart-subtotal--simple", "rebuy-cart-subtotal__label": "CartSubtotal_rebuy-cart-subtotal__label", "rebuy-cart-subtotal__amount-wrapper": "CartSubtotal_rebuy-cart-subtotal__amount-wrapper", "rebuy-cart-subtotal__price--compare-at": "CartSubtotal_rebuy-cart-subtotal__price--compare-at", "rebuy-cart-subtotal__price--final": "CartSubtotal_rebuy-cart-subtotal__price--final", "rebuy-cart-subtotal--with-summary": "CartSubtotal_rebuy-cart-subtotal--with-summary", "rebuy-cart-subtotal__row": "CartSubtotal_rebuy-cart-subtotal__row", "rebuy-cart-subtotal__discount-summary": "CartSubtotal_rebuy-cart-subtotal__discount-summary", "rebuy-cart-subtotal__discount-summary-header": "CartSubtotal_rebuy-cart-subtotal__discount-summary-header", "rebuy-cart-subtotal__discount-summary-icon": "CartSubtotal_rebuy-cart-subtotal__discount-summary-icon", "rebuy-cart-subtotal__discount-summary--expanded": "CartSubtotal_rebuy-cart-subtotal__discount-summary--expanded", "rebuy-cart-subtotal__discount-summary-details": "CartSubtotal_rebuy-cart-subtotal__discount-summary-details", "rebuy-cart-subtotal__discount-summary-item": "CartSubtotal_rebuy-cart-subtotal__discount-summary-item" };
@@ -5030,7 +5051,7 @@ var getDiscountAllocationTitle = (alloc) => {
 };
 var CartSubtotalComponent = ({ componentConfig }) => {
   const { cartData } = useSmartCart();
-  const [isDiscountSummaryExpanded, setIsDiscountSummaryExpanded] = useState7(false);
+  const [isDiscountSummaryExpanded, setIsDiscountSummaryExpanded] = useState8(false);
   const settings = useMemo9(
     () => componentConfig?.settings ?? {},
     [componentConfig?.settings]
@@ -5238,7 +5259,7 @@ var CartTitleBar = React4.memo(() => {
 CartTitleBar.displayName = "CartTitleBar";
 
 // src/smart-cart/components/CheckoutArea/CheckoutArea.tsx
-import React5, { useCallback as useCallback7, useEffect as useEffect7, useMemo as useMemo11, useState as useState8 } from "react";
+import React5, { useCallback as useCallback7, useEffect as useEffect8, useMemo as useMemo11, useState as useState9 } from "react";
 import { useFetcher as useFetcher3 } from "react-router";
 
 // src/smart-cart/components/CheckoutArea/CheckoutArea.module.css
@@ -5259,9 +5280,9 @@ var CheckoutArea = React5.memo(({ componentConfig }) => {
   } = useSmartCart();
   const termsFetcher = useFetcher3();
   const settings = componentConfig.settings;
-  const [termsAccepted, setTermsAccepted] = useState8(false);
-  const [processingSource, setProcessingSource] = useState8(null);
-  useEffect7(() => {
+  const [termsAccepted, setTermsAccepted] = useState9(false);
+  const [processingSource, setProcessingSource] = useState9(null);
+  useEffect8(() => {
     const termsAttr = cartData?.attributes?.find((attr) => attr.key === "Terms and Conditions");
     const acceptedInCart = termsAttr?.value === "Accepted";
     if (processingSource !== "terms" && termsAccepted !== acceptedInCart) {
@@ -5367,7 +5388,7 @@ var CheckoutArea = React5.memo(({ componentConfig }) => {
     termsFetcher,
     cartData?.attributes
   ]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (processingSource === "terms") {
       if (isHydrogenReact && !isGlobalCartLoading) {
         setProcessingSource(null);
@@ -5550,7 +5571,7 @@ CheckoutArea.displayName = "CheckoutArea";
 import { RebuyClient as RebuyClient2 } from "@rebuy/rebuy";
 import * as Utilities4 from "@rebuy/rebuy/utilities";
 import { flattenConnection as flattenConnection3 } from "@shopify/hydrogen";
-import { useContext as useContext3, useEffect as useEffect13, useMemo as useMemo13, useRef as useRef7, useState as useState15 } from "react";
+import { useContext as useContext3, useEffect as useEffect14, useMemo as useMemo13, useRef as useRef7, useState as useState16 } from "react";
 
 // src/assets/Close.tsx
 import { jsx as jsx17 } from "react/jsx-runtime";
@@ -5559,10 +5580,10 @@ var Close = () => {
 };
 
 // src/hooks/useBreakpoint.ts
-import { useEffect as useEffect8, useState as useState9 } from "react";
+import { useEffect as useEffect9, useState as useState10 } from "react";
 var useBreakpoint = (settings) => {
-  const [breakpoint, setBreakpoint] = useState9("medium");
-  useEffect8(() => {
+  const [breakpoint, setBreakpoint] = useState10("medium");
+  useEffect9(() => {
     if (!settings?.breakpoints) return;
     const handleResize = () => {
       const width = window.innerWidth;
@@ -5595,7 +5616,7 @@ var useBreakpoint = (settings) => {
 };
 
 // src/hooks/usePopupTrigger.tsx
-import { useCallback as useCallback8, useEffect as useEffect9 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect10 } from "react";
 var usePopupTrigger = (settings, popupTriggerId, widgetId, popupShownOnce, showPopup, setShowPopup, setPopupShownOnce) => {
   const delayInMs = settings?.display_type === "popup" ? (settings?.popup_delay || 0) * 1e3 : 0;
   const popupTrigger = settings?.popup_trigger;
@@ -5606,7 +5627,7 @@ var usePopupTrigger = (settings, popupTriggerId, widgetId, popupShownOnce, showP
       setPopupShownOnce(true);
     }, delayInMs);
   }, [delayInMs, setShowPopup, setPopupShownOnce, settings]);
-  useEffect9(() => {
+  useEffect10(() => {
     if (!settings || settings.display_type !== "popup" || popupTrigger !== "load" || popupShownOnce) return;
     const timer = setTimeout(() => {
       setShowPopup(true);
@@ -5614,7 +5635,7 @@ var usePopupTrigger = (settings, popupTriggerId, widgetId, popupShownOnce, showP
     }, delayInMs);
     return () => clearTimeout(timer);
   }, [popupTrigger, popupShownOnce, delayInMs, setShowPopup, setPopupShownOnce, settings]);
-  useEffect9(() => {
+  useEffect10(() => {
     if (!settings || settings.display_type !== "popup" || popupTrigger !== "add_to_cart" || !popupTriggerId) return;
     const selector = `#${popupTriggerId}`;
     const handleCartAdd = () => {
@@ -5646,7 +5667,7 @@ var usePopupTrigger = (settings, popupTriggerId, widgetId, popupShownOnce, showP
       });
     };
   }, [popupTrigger, popupTriggerId, showPopup, showPopupWithDelay, settings]);
-  useEffect9(() => {
+  useEffect10(() => {
     if (!settings || settings.display_type !== "popup" || popupTrigger !== "submit") return;
     const selector = "form";
     const handleSubmit = () => {
@@ -5662,7 +5683,7 @@ var usePopupTrigger = (settings, popupTriggerId, widgetId, popupShownOnce, showP
       });
     };
   }, [popupTrigger, showPopupWithDelay, settings]);
-  useEffect9(() => {
+  useEffect10(() => {
     if (!settings || settings.display_type !== "popup" || popupTrigger !== "exit") return;
     const handleExitIntent = (e) => {
       if (e.clientY <= 0 && !popupShownOnce) {
@@ -6063,7 +6084,7 @@ var defaultProductCardSettings = {
 
 // src/components/ProductCard/ProductCard.tsx
 import { Image } from "@shopify/hydrogen";
-import { useCallback as useCallback9, useMemo as useMemo12, useState as useState12 } from "react";
+import { useCallback as useCallback9, useMemo as useMemo12, useState as useState13 } from "react";
 
 // src/components/AddToCartBtn/HydrogenAddToCartBtn.tsx
 import { CartForm, Money } from "@shopify/hydrogen";
@@ -6251,7 +6272,7 @@ var RebuyProductPrice = ({ selectedVariant, settingsDiscount }) => {
 };
 
 // src/components/QuantityInput/QuantityInput.tsx
-import { useState as useState10 } from "react";
+import { useState as useState11 } from "react";
 
 // src/components/QuantityInput/QuantityInput.module.css
 var result11 = { "rebuy-quantity__container": "QuantityInput_rebuy-quantity__container", "rebuy-quantity__select": "QuantityInput_rebuy-quantity__select" };
@@ -6265,7 +6286,7 @@ var QuantityInput = ({
   maxValue = 10,
   minValue = 1
 }) => {
-  const [quantity, setQuantity] = useState10(defaultQuantity);
+  const [quantity, setQuantity] = useState11(defaultQuantity);
   const handleChange = (event) => {
     const newValue = parseInt(event.target.value, 10);
     setQuantity(newValue);
@@ -6289,7 +6310,7 @@ var QuantityInput = ({
 
 // src/components/VariantSelect/VariantSelect.tsx
 import clsx5 from "clsx";
-import { useEffect as useEffect10, useState as useState11 } from "react";
+import { useEffect as useEffect11, useState as useState12 } from "react";
 
 // src/components/VariantSelect/VariantSelect.module.css
 var result12 = { "rebuy-variant__container": "VariantSelect_rebuy-variant__container", "rebuy-variant__select": "VariantSelect_rebuy-variant__select", "rebuy-variant__select-option": "VariantSelect_rebuy-variant__select-option", "rebuy-variant__buttons": "VariantSelect_rebuy-variant__buttons", "rebuy-variant__button": "VariantSelect_rebuy-variant__button", "rebuy-variant__button--selected": "VariantSelect_rebuy-variant__button--selected" };
@@ -6298,8 +6319,8 @@ var VariantSelect_default = result12;
 // src/components/VariantSelect/VariantSelect.tsx
 import { jsx as jsx23 } from "react/jsx-runtime";
 var VariantSelect = ({ handleSelectedVariant, product, selectedId, style = "select" }) => {
-  const [selectedVariantId, setSelectedVariantId] = useState11(selectedId || product.variants.nodes[0]?.id);
-  useEffect10(() => {
+  const [selectedVariantId, setSelectedVariantId] = useState12(selectedId || product.variants.nodes[0]?.id);
+  useEffect11(() => {
     if (selectedId && selectedId !== selectedVariantId) {
       setSelectedVariantId(selectedId);
     }
@@ -6390,9 +6411,9 @@ var ProductCard = ({
   settings = defaultProductCardSettings,
   variantOptionsText
 }) => {
-  const [selectedVariant, setSelectedVariant] = useState12(product.variants.nodes[0]);
-  const [selectedQuantity, setSelectedQuantity] = useState12(settings?.quantityInput?.default_quantity || 1);
-  const [interactionStatus, setInteractionStatus] = useState12("ready");
+  const [selectedVariant, setSelectedVariant] = useState13(product.variants.nodes[0]);
+  const [selectedQuantity, setSelectedQuantity] = useState13(settings?.quantityInput?.default_quantity || 1);
+  const [interactionStatus, setInteractionStatus] = useState13("ready");
   const { toggleCart } = useSmartCart();
   const displayImage = selectedVariant.image || product.featuredImage;
   const handleSelectedVariant = useCallback9((product2, variant_id) => {
@@ -6454,8 +6475,8 @@ var ProductCard = ({
     if (isSelectionRequiredBeforeAddToCart) {
       setInteractionStatus("selecting");
     } else {
-      if (isInPopup && onPopupDismiss) {
-        onPopupDismiss();
+      if (isInPopup) {
+        onPopupDismiss?.();
       }
     }
   }, [isSelectionRequiredBeforeAddToCart, isInPopup, onPopupDismiss]);
@@ -6624,7 +6645,7 @@ var ProductCard = ({
               addToCartCallback,
               disableShopifyAddAction: isSelectionRequiredBeforeAddToCart,
               isHydrogenReact,
-              onClickAction: handlePrimaryAction,
+              onClickAction: isSelectionRequiredBeforeAddToCart ? handlePrimaryAction : void 0,
               quantity: selectedQuantity,
               selectedVariants: isSelectionRequiredBeforeAddToCart ? [] : [selectedVariant]
             }
@@ -6645,7 +6666,7 @@ var ProductCard = ({
 };
 
 // src/components/ProductCarousel/ProductCarousel.tsx
-import { useEffect as useEffect11, useState as useState13 } from "react";
+import { useEffect as useEffect12, useState as useState14 } from "react";
 
 // src/components/ProductCarousel/ProductCarousel.module.css
 var result15 = { "rebuy-carousel": "ProductCarousel_rebuy-carousel", "rebuy-carousel__container": "ProductCarousel_rebuy-carousel__container", "rebuy-carousel__slide": "ProductCarousel_rebuy-carousel__slide", "rebuy-carousel__controls": "ProductCarousel_rebuy-carousel__controls", "rebuy-carousel__prev": "ProductCarousel_rebuy-carousel__prev", "rebuy-carousel__next": "ProductCarousel_rebuy-carousel__next", "rebuy-carousel__pagination": "ProductCarousel_rebuy-carousel__pagination", "rebuy-carousel__dot": "ProductCarousel_rebuy-carousel__dot", "rebuy-carousel__grid": "ProductCarousel_rebuy-carousel__grid" };
@@ -6667,10 +6688,10 @@ var ProductCarousel = ({
   showPagination = true,
   variantOptionsText
 }) => {
-  const [currentSlide, setCurrentSlide] = useState13(0);
-  const [totalSlides, setTotalSlides] = useState13(0);
-  const [repeatedProducts, setRepeatedProducts] = useState13([]);
-  useEffect11(() => {
+  const [currentSlide, setCurrentSlide] = useState14(0);
+  const [totalSlides, setTotalSlides] = useState14(0);
+  const [repeatedProducts, setRepeatedProducts] = useState14([]);
+  useEffect12(() => {
     if (products.length === 0) {
       setRepeatedProducts([]);
       return;
@@ -6683,7 +6704,7 @@ var ProductCarousel = ({
     }
     setRepeatedProducts(repeated);
   }, [products, columns]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (repeatedProducts.length && columns) {
       setTotalSlides(Math.ceil(repeatedProducts.length / columns));
     }
@@ -6744,7 +6765,7 @@ var ProductCarousel = ({
 
 // src/components/Timer/Timer.tsx
 import clsx7 from "clsx";
-import { useCallback as useCallback10, useEffect as useEffect12, useState as useState14 } from "react";
+import { useCallback as useCallback10, useEffect as useEffect13, useState as useState15 } from "react";
 
 // src/components/Timer/Timer.module.css
 var result16 = { "rebuy-timer__container": "Timer_rebuy-timer__container", "rebuy-timer__text": "Timer_rebuy-timer__text", "rebuy-timer__title": "Timer_rebuy-timer__title", "rebuy-timer__display": "Timer_rebuy-timer__display", "rebuy-timer__display--urgent": "Timer_rebuy-timer__display--urgent", "rebuy-timer__minutes": "Timer_rebuy-timer__minutes", "rebuy-timer__seconds": "Timer_rebuy-timer__seconds", "rebuy-timer__separator": "Timer_rebuy-timer__separator" };
@@ -6752,10 +6773,19 @@ var Timer_default = result16;
 
 // src/components/Timer/Timer.tsx
 import { jsx as jsx27, jsxs as jsxs14 } from "react/jsx-runtime";
-var Timer = ({ action, durationMinutes, durationSeconds, isPopup = false, onDismiss, title }) => {
+var Timer = ({
+  action,
+  cartCount,
+  checkoutUrl,
+  durationMinutes,
+  durationSeconds,
+  isPopup = false,
+  onDismiss,
+  title
+}) => {
   const initialTotalSeconds = (durationMinutes || 0) * 60 + (durationSeconds || 0);
-  const [totalSeconds, setTotalSeconds] = useState14(initialTotalSeconds);
-  const [timerActive, setTimerActive] = useState14(true);
+  const [totalSeconds, setTotalSeconds] = useState15(initialTotalSeconds);
+  const [timerActive, setTimerActive] = useState15(true);
   const minutes = Math.floor(totalSeconds / 60);
   const seconds = totalSeconds % 60;
   const formattedMinutes = String(minutes).padStart(2, "0");
@@ -6769,7 +6799,14 @@ var Timer = ({ action, durationMinutes, durationSeconds, isPopup = false, onDism
         }
         break;
       case "checkout":
-        window.location.href = "/checkout";
+        if (checkoutUrl && cartCount && cartCount > 0) {
+          window.location.href = checkoutUrl;
+        } else {
+          console.warn("Timer: No checkout URL available for checkout action");
+          if (isPopup && onDismiss) {
+            onDismiss();
+          }
+        }
         break;
       case "cart":
         window.location.href = "/cart";
@@ -6778,8 +6815,8 @@ var Timer = ({ action, durationMinutes, durationSeconds, isPopup = false, onDism
       default:
         break;
     }
-  }, [action, isPopup, onDismiss]);
-  useEffect12(() => {
+  }, [action, checkoutUrl, isPopup, onDismiss]);
+  useEffect13(() => {
     if (!timerActive) return;
     const interval = setInterval(() => {
       setTotalSeconds((prevSeconds) => {
@@ -6856,6 +6893,8 @@ var RebuyWidget_default = result17;
 import { jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
 var WidgetContent = ({
   addToCartCallback,
+  cartCount,
+  checkoutUrl,
   customTitle,
   customTitleLevel,
   customTitleStyle,
@@ -6949,6 +6988,8 @@ var WidgetContent = ({
       Timer,
       {
         action: settings?.timer.action,
+        cartCount,
+        checkoutUrl,
         durationMinutes: settings?.timer.duration_minutes,
         durationSeconds: settings?.timer.duration_seconds,
         isPopup: settings?.display_type === "popup",
@@ -6986,7 +7027,6 @@ var RebuyWidget = (props) => {
     customTitleLevel = "h2",
     customTitleStyle,
     isCrossSell,
-    isHydrogenReact,
     popupTriggerId,
     product,
     productId,
@@ -6995,26 +7035,26 @@ var RebuyWidget = (props) => {
     widgetId
   } = props;
   const { apiKey: apiKeyFromConfig, loadingStatus: configLoadingStatus, rebuyConfig } = useRebuyConfig();
-  const [settings, setSettings] = useState15(null);
-  const [loadingSettings, setLoadingSettings] = useState15(true);
-  const [error, setError] = useState15(null);
-  const [showPopup, setShowPopup] = useState15(false);
-  const [popupShownOnce, setPopupShownOnce] = useState15(false);
+  const [settings, setSettings] = useState16(null);
+  const [loadingSettings, setLoadingSettings] = useState16(true);
+  const [error, setError] = useState16(null);
+  const [showPopup, setShowPopup] = useState16(false);
+  const [popupShownOnce, setPopupShownOnce] = useState16(false);
   const popupRef = useRef7(null);
-  const [clientInstance, setClientInstance] = useState15(null);
+  const [clientInstance, setClientInstance] = useState16(null);
   const rebuyGeneralContext = useContext3(RebuyContext);
   const generalContextParams = rebuyGeneralContext?.contextParameters;
   const mainCacheKey = rebuyConfig?.shop?.cache_key;
   const generalContextCacheKey = generalContextParams?.cache_key;
   const cacheKeyToUse = mainCacheKey || generalContextCacheKey || "";
-  const [initialized, setInitialized] = useState15(false);
+  const [initialized, setInitialized] = useState16(false);
   const shopifyProductId = product?.id ?? productId ?? null;
   const shopifyVariantId = variant?.id ?? variantId ?? null;
-  const [products, setProducts] = useState15([]);
+  const [products, setProducts] = useState16([]);
   const currentBreakpoint = useBreakpoint(settings);
   const shouldHideWidget = settings?.layout?.[currentBreakpoint]?.style === "none";
   usePopupTrigger(settings, popupTriggerId, widgetId, popupShownOnce, showPopup, setShowPopup, setPopupShownOnce);
-  useEffect13(() => {
+  useEffect14(() => {
     if (!clientInstance && apiKeyFromConfig && configLoadingStatus === "success") {
       const client = new RebuyClient2(apiKeyFromConfig);
       if (generalContextParams) {
@@ -7025,12 +7065,12 @@ var RebuyWidget = (props) => {
       setInitialized(true);
     }
   }, [clientInstance, apiKeyFromConfig, configLoadingStatus, generalContextParams]);
-  useEffect13(() => {
+  useEffect14(() => {
     if (!clientInstance || !generalContextParams) return;
     const filteredParams = filterContextForWidgetEndpoints(generalContextParams, settings?.endpoint);
     clientInstance.setContextParameters(filteredParams);
   }, [clientInstance, generalContextParams, settings]);
-  useEffect13(() => {
+  useEffect14(() => {
     if (configLoadingStatus === "loading") {
       return;
     }
@@ -7125,7 +7165,7 @@ var RebuyWidget = (props) => {
     }
     return req;
   }, [settings, shopifyProductId, shopifyVariantId, cartProductIds, cartVariantIds]);
-  useEffect13(() => {
+  useEffect14(() => {
     let isMounted = true;
     if (!clientInstance || !initialized || !settings || configLoadingStatus !== "success") return;
     const fetchData = async () => {
@@ -7177,7 +7217,7 @@ var RebuyWidget = (props) => {
     apiKeyFromConfig,
     cacheKeyToUse
   ]);
-  useEffect13(() => {
+  useEffect14(() => {
     if (!showPopup) return;
     const handleClickOutside = (event) => {
       if (popupRef.current && !popupRef.current.contains(event.target)) {
@@ -7227,10 +7267,12 @@ var RebuyWidget = (props) => {
             closePopup();
           }, 0);
         },
+        cartCount: generalContextParams?.cart_count || 0,
+        checkoutUrl: generalContextParams?.checkoutUrl,
         customTitle,
         customTitleLevel,
         customTitleStyle,
-        isHydrogenReact,
+        isHydrogenReact: rebuyGeneralContext?.contextParameters?.isHydrogenReact,
         isInPopup: true,
         onDismiss: closePopup,
         products,
@@ -7241,11 +7283,12 @@ var RebuyWidget = (props) => {
     WidgetContent,
     {
       addToCartCallback,
+      checkoutUrl: generalContextParams?.checkoutUrl,
       customTitle,
       customTitleLevel,
       customTitleStyle,
       isCrossSell,
-      isHydrogenReact,
+      isHydrogenReact: rebuyGeneralContext?.contextParameters?.isHydrogenReact,
       isInPopup: settings?.display_type === "popup",
       products,
       settings
@@ -7265,7 +7308,7 @@ var CrossSell = ({ componentConfig }) => {
 };
 
 // src/smart-cart/components/CustomCode/CustomCodeBlock.tsx
-import React6, { useEffect as useEffect14, useMemo as useMemo14, useRef as useRef8 } from "react";
+import React6, { useEffect as useEffect15, useMemo as useMemo14, useRef as useRef8 } from "react";
 
 // src/utils/nonceManager.ts
 var cachedNonce = void 0;
@@ -7344,7 +7387,7 @@ var CustomCodeBlock = React6.memo(({ componentConfig }) => {
   const executedCodeRef = useRef8(null);
   const componentId = componentConfig.component_id;
   const htmlCode = useMemo14(() => componentConfig.settings?.html_code ?? null, [componentConfig.settings?.html_code]);
-  useEffect14(() => {
+  useEffect15(() => {
     const container = containerRef.current;
     if (htmlCode && container && executedCodeRef.current !== htmlCode) {
       const timerId = setTimeout(() => {
@@ -7380,20 +7423,20 @@ CustomCodeBlock.displayName = "CustomCodeBlock";
 
 // src/smart-cart/components/DiscountCodeInput/DiscountCodeInput.tsx
 import clsx8 from "clsx";
-import React7, { useCallback as useCallback12, useEffect as useEffect16, useMemo as useMemo16, useRef as useRef9, useState as useState17 } from "react";
+import React7, { useCallback as useCallback12, useEffect as useEffect17, useMemo as useMemo16, useRef as useRef9, useState as useState18 } from "react";
 import { useFetcher as useFetcher4 } from "react-router";
 
 // src/smart-cart/hooks/useDiscountManager.ts
-import { useCallback as useCallback11, useEffect as useEffect15, useMemo as useMemo15, useState as useState16 } from "react";
+import { useCallback as useCallback11, useEffect as useEffect16, useMemo as useMemo15, useState as useState17 } from "react";
 var GENERIC_ERROR_CODE_MESSAGE = "{{code}} is not valid for this cart.";
 var useDiscountManager = () => {
   const { cartData, error: cartErrorFromCtx, getComponentConfigByType } = useSmartCart();
-  const [isProcessing, setIsProcessing] = useState16(false);
-  const [currentError, setCurrentError] = useState16(null);
-  const [appliedCodesState, setAppliedCodesState] = useState16([]);
+  const [isProcessing, setIsProcessing] = useState17(false);
+  const [currentError, setCurrentError] = useState17(null);
+  const [appliedCodesState, setAppliedCodesState] = useState17([]);
   const componentConfig = useMemo15(() => getComponentConfigByType("discount_code"), [getComponentConfigByType]);
   const settings = useMemo15(() => componentConfig?.settings ?? null, [componentConfig]);
-  useEffect15(() => {
+  useEffect16(() => {
     const codesFromApi = cartData?.discountCodes?.filter((dc) => dc.applicable).map((dc) => dc.code) ?? [];
     if (JSON.stringify(codesFromApi) !== JSON.stringify(appliedCodesState)) {
       setAppliedCodesState(codesFromApi);
@@ -7487,9 +7530,9 @@ var DiscountCodeInputComponent = ({ componentConfig }) => {
     setIsProcessing: setDiscountManagerIsProcessing,
     settings
   } = useDiscountManager();
-  const [inputValue, setInputValue] = useState17("");
-  const [isInputFocused, setIsInputFocused] = useState17(false);
-  const [isLocallyProcessing, setIsLocallyProcessing] = useState17(false);
+  const [inputValue, setInputValue] = useState18("");
+  const [isInputFocused, setIsInputFocused] = useState18(false);
+  const [isLocallyProcessing, setIsLocallyProcessing] = useState18(false);
   const inputRef = useRef9(null);
   const hasItems = getItemCount() > 0;
   const lang = useMemo16(
@@ -7586,7 +7629,7 @@ var DiscountCodeInputComponent = ({ componentConfig }) => {
       setDiscountManagerError
     ]
   );
-  useEffect16(() => {
+  useEffect17(() => {
     if (isHydrogenReact) {
       if (!isGlobalCartLoading && isLocallyProcessing) {
         setIsLocallyProcessing(false);
@@ -7753,10 +7796,10 @@ var LoginButton = React8.memo(() => {
 LoginButton.displayName = "LoginButton";
 
 // src/smart-cart/components/SmartCartApp/SmartCartApp.tsx
-import React9, { useEffect as useEffect18, useMemo as useMemo17, useRef as useRef10 } from "react";
+import React9, { useEffect as useEffect19, useMemo as useMemo17, useRef as useRef10 } from "react";
 
 // src/smart-cart/hooks/useSmartCartApps.ts
-import { useEffect as useEffect17, useState as useState18 } from "react";
+import { useEffect as useEffect18, useState as useState19 } from "react";
 
 // src/smart-cart/types/smart-cart-app.ts
 import { z as z2 } from "zod";
@@ -7778,11 +7821,11 @@ var smartCartAppMerchantConfigSchema = z2.object({
 // src/smart-cart/hooks/useSmartCartApps.ts
 var useSmartCartApps = () => {
   const { apiKey, cacheKey, config, shopifyDomain } = useSmartCart();
-  const [enrichedApps, setEnrichedApps] = useState18(/* @__PURE__ */ new Map());
-  const [isLoading, setIsLoading] = useState18(false);
-  const [error, setError] = useState18(null);
+  const [enrichedApps, setEnrichedApps] = useState19(/* @__PURE__ */ new Map());
+  const [isLoading, setIsLoading] = useState19(false);
+  const [error, setError] = useState19(null);
   const initialAppsConfig = config?.apps;
-  useEffect17(() => {
+  useEffect18(() => {
     let isMounted = true;
     const fetchAndEnrichApps = async () => {
       if (!initialAppsConfig || initialAppsConfig.length === 0) {
@@ -7975,7 +8018,7 @@ var SmartCartApp = React9.memo(({ componentConfig }) => {
   const appData = appId !== null ? enrichedApps.get(appId) : null;
   const enabledAppData = appData?.enabled ? appData : null;
   const scriptContent = enabledAppData?.script ?? null;
-  useEffect18(() => {
+  useEffect19(() => {
     const container = containerRef.current;
     if (container && scriptContent && executedScriptRef.current !== scriptContent) {
       const timerId = setTimeout(() => {
@@ -8030,7 +8073,7 @@ SmartCartApp.displayName = "SmartCartApp";
 
 // src/smart-cart/components/TieredProgressBar/TieredProgressBar.tsx
 import clsx10 from "clsx";
-import React10, { useCallback as useCallback13, useEffect as useEffect19, useMemo as useMemo18, useState as useState19 } from "react";
+import React10, { useCallback as useCallback13, useEffect as useEffect20, useMemo as useMemo18, useState as useState20 } from "react";
 import { useFetcher as useFetcher5 } from "react-router";
 import { useShallow as useShallow2 } from "zustand/shallow";
 
@@ -8238,7 +8281,7 @@ import { jsx as jsx36, jsxs as jsxs20 } from "react/jsx-runtime";
 var TieredProgressBar = React10.memo(() => {
   const { hydrogenReactCartActions, isCartBusy, isHydrogenReact } = useSmartCart();
   const tpbUserActionFetcher = useFetcher5();
-  const [showDebugPanel, setShowDebugPanel] = useState19(false);
+  const [showDebugPanel, setShowDebugPanel] = useState20(false);
   const {
     _lastFetchedBarId,
     activeBarConfig,
@@ -8283,7 +8326,7 @@ var TieredProgressBar = React10.memo(() => {
   const shouldDisableGiftActions = useMemo18(() => {
     return isCartBusy || productFetchStatus === "loading";
   }, [isCartBusy, productFetchStatus]);
-  useEffect19(() => {
+  useEffect20(() => {
     if (isHydrogenReact) {
       const hReactLinesAdd = hydrogenReactCartActions?.linesAdd;
       const hReactLinesRemove = hydrogenReactCartActions?.linesRemove;
@@ -8324,7 +8367,7 @@ var TieredProgressBar = React10.memo(() => {
       rebuyDebugLog.log("smart-cart-tpb" /* SC_TPB */, "Set Remix fetcher submit functions for TPB.");
     }
   }, [isHydrogenReact, hydrogenReactCartActions, tpbUserActionFetcher, setSubmitFunctions]);
-  useEffect19(() => {
+  useEffect20(() => {
     if (userActionError) {
       const timer = setTimeout(() => clearUserActionError(), 5e3);
       return () => clearTimeout(timer);
@@ -8644,10 +8687,10 @@ import clsx11 from "clsx";
 import { useRef as useRef11 } from "react";
 
 // src/smart-cart/hooks/useIsScrolled.ts
-import { useEffect as useEffect20, useState as useState20 } from "react";
+import { useEffect as useEffect21, useState as useState21 } from "react";
 var useIsScrolled = (scrollElementRef) => {
-  const [isScrolled, setIsScrolled] = useState20(false);
-  useEffect20(() => {
+  const [isScrolled, setIsScrolled] = useState21(false);
+  useEffect21(() => {
     const scrollElement = scrollElementRef.current;
     if (!scrollElement) return;
     const handleScroll = () => {
@@ -8760,7 +8803,7 @@ var SmartCartContainer = ({ containerId }) => {
       previousFocusRef.current.focus();
     }
   }, [hideCart]);
-  useEffect21(() => {
+  useEffect22(() => {
     if (isVisible) {
       previousFocusRef.current = document.activeElement;
       const closeButton = containerRef.current?.querySelector("#rebuy-cart-close");
@@ -8769,7 +8812,7 @@ var SmartCartContainer = ({ containerId }) => {
       }
     }
   }, [isVisible]);
-  useEffect21(() => {
+  useEffect22(() => {
     if (isVisible) {
       document.body.classList.add("rebuy-smart-cart-open");
     } else {
@@ -8860,19 +8903,41 @@ var RebuySmartCart = () => {
 import { RebuyClient as RebuyClient3 } from "@rebuy/rebuy";
 import * as Utilities5 from "@rebuy/rebuy/utilities";
 import { flattenConnection as flattenConnection4 } from "@shopify/hydrogen";
-import React12, { useContext as useContext4, useEffect as useEffect22, useMemo as useMemo21, useState as useState21 } from "react";
+import { useContext as useContext5, useEffect as useEffect23, useMemo as useMemo21, useState as useState22 } from "react";
+
+// src/context/RebuyWidgetContext.tsx
+import { createContext as createContext4, useContext as useContext4 } from "react";
+import { jsx as jsx43 } from "react/jsx-runtime";
+var RebuyWidgetContext = createContext4({
+  dataSource: "",
+  isHydrogenReact: false,
+  key: "",
+  limit: 0,
+  metadata: {},
+  options: {},
+  products: [],
+  variant: void 0,
+  variantId: void 0
+});
+var useRebuyWidget = () => useContext4(RebuyWidgetContext);
+var RebuyWidgetProvider = ({ children, value }) => {
+  return /* @__PURE__ */ jsx43(RebuyWidgetContext.Provider, { value, children });
+};
+
+// src/widgetContainer/RebuyWidgetContainer.tsx
+import { jsx as jsx44 } from "react/jsx-runtime";
 var RebuyWidgetContainerBase = ({ children, ...props }) => {
   const { collection, collectionId, dataSource, limit, options, product, productId, variant, variantId } = props;
   const { apiKey, loadingStatus: configLoadingStatus, rebuyConfig } = useRebuyConfig();
-  const rebuyContext = useContext4(RebuyContext);
-  const [rebuyApiClient, setRebuyApiClient] = useState21(null);
-  const [initialized, setInitialized] = useState21(false);
+  const rebuyContext = useContext5(RebuyContext);
+  const [rebuyApiClient, setRebuyApiClient] = useState22(null);
+  const [initialized, setInitialized] = useState22(false);
   const shopifyProductId = product?.id ?? productId ?? null;
   const shopifyVariantId = variant?.id ?? variantId ?? null;
   const shopifyCollectionId = collection?.id ?? collectionId ?? null;
-  const [products, setProducts] = useState21([]);
-  const [metadata, setMetadata] = useState21();
-  useEffect22(() => {
+  const [products, setProducts] = useState22([]);
+  const [metadata, setMetadata] = useState22();
+  useEffect23(() => {
     if (!rebuyApiClient && apiKey && configLoadingStatus === "success") {
       const client = new RebuyClient3(apiKey);
       const currentEndpoint = dataSource || "/api/v1/products/recommended";
@@ -8887,7 +8952,7 @@ var RebuyWidgetContainerBase = ({ children, ...props }) => {
       setInitialized(true);
     }
   }, [apiKey, rebuyApiClient, configLoadingStatus, options, rebuyContext, dataSource]);
-  useEffect22(() => {
+  useEffect23(() => {
     if (rebuyApiClient && rebuyContext?.contextParameters) {
       const currentEndpoint = dataSource || "/api/v1/products/recommended";
       const filteredParams = filterContextForWidgetEndpoints(rebuyContext.contextParameters, currentEndpoint);
@@ -8914,7 +8979,7 @@ var RebuyWidgetContainerBase = ({ children, ...props }) => {
     }
     return req;
   }, [dataSource, shopifyProductId, shopifyVariantId, shopifyCollectionId, limit]);
-  useEffect22(() => {
+  useEffect23(() => {
     let isMounted = true;
     if (!rebuyApiClient || !initialized || configLoadingStatus !== "success") return;
     const fetchData = async () => {
@@ -8947,23 +9012,30 @@ var RebuyWidgetContainerBase = ({ children, ...props }) => {
       isMounted = false;
     };
   }, [rebuyApiClient, initialized, request, configLoadingStatus]);
-  const childrenWithProps = (currentProps) => React12.Children.map(
-    children,
-    (child) => React12.isValidElement(child) ? React12.cloneElement(child, currentProps) : child
-  );
-  const childProps = {
-    ...props,
-    apiKey,
-    cacheKey: rebuyConfig?.shop?.cache_key,
-    isHydrogenReact: rebuyContext?.contextParameters?.isHydrogenReact,
-    key: product?.id,
-    metadata,
-    products
-  };
   if (configLoadingStatus !== "success" || !rebuyApiClient) {
     return null;
   }
-  return childrenWithProps(childProps);
+  return /* @__PURE__ */ jsx44(
+    RebuyWidgetProvider,
+    {
+      value: {
+        apiKey: apiKey ?? void 0,
+        cacheKey: rebuyConfig?.shop?.cache_key,
+        dataSource: dataSource || "/api/v1/products/recommended",
+        isHydrogenReact: rebuyContext?.contextParameters?.isHydrogenReact || false,
+        key: product?.id || "",
+        limit: limit || 0,
+        metadata: metadata || {},
+        options: options || {},
+        product,
+        productId,
+        products,
+        variant,
+        variantId
+      },
+      children
+    }
+  );
 };
 var RebuyWidgetContainer = RebuyWidgetContainerBase;
 
@@ -8972,37 +9044,38 @@ var result23 = { "container": "RebuyCompleteTheLook_container", "productGrid": "
 var RebuyCompleteTheLook_default = result23;
 
 // src/widgets/RebuyCompleteTheLook/RebuyCompleteTheLook.tsx
-import { jsx as jsx43, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs25 } from "react/jsx-runtime";
 var RebuyCompleteTheLook = (props) => {
   const {
     addToCartBtnText = "Add to cart",
     addToCartCallback,
-    customTitle = `These pair with ${props.product?.title}`,
+    customTitle = `These pair with {product_title}`,
     customTitleLevel = "h2",
-    customTitleStyle,
-    products = []
+    customTitleStyle
   } = props;
+  const { isHydrogenReact, product, products } = useRebuyWidget();
+  const productTitle = customTitle.replace("{product_title}", product?.title ?? "");
   if (products.length === 0) {
     rebuyDebugLog.log("widget-complete-the-look" /* WIDGET_COMPLETE_THE_LOOK */, "RebuyCompleteTheLook: No products found");
     return null;
   }
   return /* @__PURE__ */ jsxs25("section", { className: RebuyCompleteTheLook_default.container, children: [
-    /* @__PURE__ */ jsx43(Title, { level: getTitleLevel(customTitleLevel), style: customTitleStyle, text: customTitle }),
-    /* @__PURE__ */ jsx43("ul", { className: RebuyCompleteTheLook_default.productGrid, children: products.map((product) => /* @__PURE__ */ jsx43("li", { className: RebuyCompleteTheLook_default.productItem, children: /* @__PURE__ */ jsx43(
+    /* @__PURE__ */ jsx45(Title, { level: getTitleLevel(customTitleLevel), style: customTitleStyle, text: productTitle }),
+    /* @__PURE__ */ jsx45("ul", { className: RebuyCompleteTheLook_default.productGrid, children: products.map((product2) => /* @__PURE__ */ jsx45("li", { className: RebuyCompleteTheLook_default.productItem, children: /* @__PURE__ */ jsx45(
       ProductCard,
       {
         addToCartBtnText,
         addToCartCallback,
-        isHydrogenReact: props.isHydrogenReact,
-        product,
+        isHydrogenReact,
+        product: product2,
         productCardTitleLevel: getTitleLevel(customTitleLevel, true)
       }
-    ) }, product.id)) })
+    ) }, product2.id)) })
   ] });
 };
 
 // src/widgets/RebuyDynamicBundleProducts/RebuyDynamicBundleProducts.tsx
-import { useCallback as useCallback15, useEffect as useEffect23, useState as useState22 } from "react";
+import { useCallback as useCallback15, useEffect as useEffect24, useState as useState23 } from "react";
 
 // src/utils/convertToRebuyProduct.tsx
 var convertToRebuyProduct = (isHydrogenReact, product) => {
@@ -9261,12 +9334,12 @@ var result24 = { "container": "RebuyDynamicBundleProducts_container", "addCartBt
 var RebuyDynamicBundleProducts_default = result24;
 
 // src/widgets/RebuyDynamicBundleProducts/BundleImages.tsx
-import { Fragment as Fragment12, jsx as jsx44, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx46, jsxs as jsxs26 } from "react/jsx-runtime";
 var BundleImages = ({ products }) => {
   const selected = products.filter((product) => product.selected);
-  return /* @__PURE__ */ jsx44("ul", { className: RebuyDynamicBundleProducts_default.bundleImages, children: products.map((product, index) => {
+  return /* @__PURE__ */ jsx46("ul", { className: RebuyDynamicBundleProducts_default.bundleImages, children: products.map((product, index) => {
     const image = product.selectedVariant?.image;
-    const productImage = image ? /* @__PURE__ */ jsx44(
+    const productImage = image ? /* @__PURE__ */ jsx46(
       Image2,
       {
         alt: image.altText || `Picture of ${product.title}`,
@@ -9281,14 +9354,14 @@ var BundleImages = ({ products }) => {
       product.title
     );
     const showDelimiter = selected[0]?.id !== product.id;
-    return /* @__PURE__ */ jsx44(Fragment11, { children: product.selected && /* @__PURE__ */ jsxs26(Fragment12, { children: [
-      showDelimiter && /* @__PURE__ */ jsx44("li", { className: RebuyDynamicBundleProducts_default.bundleImageDelimiter, children: /* @__PURE__ */ jsx44("span", { children: "+" }) }),
-      /* @__PURE__ */ jsx44("li", { className: "flex items-center", children: product.default ? (
+    return /* @__PURE__ */ jsx46(Fragment11, { children: product.selected && /* @__PURE__ */ jsxs26(Fragment12, { children: [
+      showDelimiter && /* @__PURE__ */ jsx46("li", { className: RebuyDynamicBundleProducts_default.bundleImageDelimiter, children: /* @__PURE__ */ jsx46("span", { children: "+" }) }),
+      /* @__PURE__ */ jsx46("li", { className: "flex items-center", children: product.default ? (
         // Already on product page
         productImage
       ) : (
         // Link to product
-        /* @__PURE__ */ jsx44(
+        /* @__PURE__ */ jsx46(
           RebuyLink,
           {
             ariaLabel: `View ${product.title}`,
@@ -9303,7 +9376,7 @@ var BundleImages = ({ products }) => {
 
 // src/widgets/RebuyDynamicBundleProducts/BundlePrice.tsx
 import { Money as Money4 } from "@shopify/hydrogen";
-import { jsx as jsx45, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs27 } from "react/jsx-runtime";
 var BundlePrice = ({ products }) => {
   const isDisabled = products.filter((product) => product.selected).length < 1;
   const totalBundlePrice = () => {
@@ -9340,12 +9413,12 @@ var BundlePrice = ({ products }) => {
   const price = totalBundlePrice();
   const compareAtPrice = totalBundleCompareAtPrice();
   const CompareAtPrice = ({ data: compareAtPrice2 }) => {
-    return compareAtPrice2 && /* @__PURE__ */ jsx45(Money4, { as: "span", className: RebuyDynamicBundleProducts_default.compareAtPrice, data: compareAtPrice2, withoutTrailingZeros: true });
+    return compareAtPrice2 && /* @__PURE__ */ jsx47(Money4, { as: "span", className: RebuyDynamicBundleProducts_default.compareAtPrice, data: compareAtPrice2, withoutTrailingZeros: true });
   };
-  return products.length > 0 && /* @__PURE__ */ jsx45("div", { className: "flex items-center flex-col", children: !isDisabled && /* @__PURE__ */ jsxs27("p", { className: "flex items-center gap-2 mb-2", children: [
-    /* @__PURE__ */ jsx45("span", { children: "Total Price:" }),
-    /* @__PURE__ */ jsx45(Money4, { as: "span", data: price, withoutTrailingZeros: true }),
-    isDiscounted(price, compareAtPrice) && /* @__PURE__ */ jsx45(CompareAtPrice, { data: compareAtPrice })
+  return products.length > 0 && /* @__PURE__ */ jsx47("div", { className: "flex items-center flex-col", children: !isDisabled && /* @__PURE__ */ jsxs27("p", { className: "flex items-center gap-2 mb-2", children: [
+    /* @__PURE__ */ jsx47("span", { children: "Total Price:" }),
+    /* @__PURE__ */ jsx47(Money4, { as: "span", data: price, withoutTrailingZeros: true }),
+    isDiscounted(price, compareAtPrice) && /* @__PURE__ */ jsx47(CompareAtPrice, { data: compareAtPrice })
   ] }) });
 };
 
@@ -9353,7 +9426,7 @@ var BundlePrice = ({ products }) => {
 import clsx14 from "clsx";
 
 // src/widgets/RebuyDynamicBundleProducts/Select.tsx
-import { jsx as jsx46 } from "react/jsx-runtime";
+import { jsx as jsx48 } from "react/jsx-runtime";
 var Select = ({ onSelectVariant, product }) => {
   const getOptionsLabel = (product2) => {
     const options = product2.variants.nodes[0].selectedOptions;
@@ -9362,30 +9435,30 @@ var Select = ({ onSelectVariant, product }) => {
     const useValues = optionsFromKeys.every((key) => ["name", "value"].includes(key));
     return (useValues ? optionsFromValues : optionsFromKeys).join(" / ");
   };
-  return product && /* @__PURE__ */ jsx46(
+  return product && /* @__PURE__ */ jsx48(
     "select",
     {
       "aria-label": "select variant",
       className: RebuyDynamicBundleProducts_default.select,
       onChange: (e) => onSelectVariant(product, e.target.value),
       value: product.selectedVariant.id,
-      children: /* @__PURE__ */ jsx46("optgroup", { label: getOptionsLabel(product), children: product.variants.nodes.map(({ id, title }) => /* @__PURE__ */ jsx46("option", { value: id, children: title }, id + "-BundleVariant")) })
+      children: /* @__PURE__ */ jsx48("optgroup", { label: getOptionsLabel(product), children: product.variants.nodes.map(({ id, title }) => /* @__PURE__ */ jsx48("option", { value: id, children: title }, id + "-BundleVariant")) })
     }
   );
 };
 
 // src/widgets/RebuyDynamicBundleProducts/BundleSelection.tsx
-import { jsx as jsx47, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs28 } from "react/jsx-runtime";
 var BundleSelection = ({ onSelectVariant, onToggleBundleItem, products }) => {
-  return /* @__PURE__ */ jsx47("ul", { children: products.map((product, index) => {
+  return /* @__PURE__ */ jsx49("ul", { children: products.map((product, index) => {
     const { availableForSale } = product.selectedVariant;
     const isOutOfStock = !availableForSale;
-    return /* @__PURE__ */ jsx47(
+    return /* @__PURE__ */ jsx49(
       "li",
       {
         className: clsx14(RebuyDynamicBundleProducts_default.bundleItemRowContainer, !product.selected && RebuyDynamicBundleProducts_default.unselected),
         children: /* @__PURE__ */ jsxs28("div", { className: RebuyDynamicBundleProducts_default.bundleItemRow, children: [
-          /* @__PURE__ */ jsx47(
+          /* @__PURE__ */ jsx49(
             "input",
             {
               checked: product.selected && availableForSale,
@@ -9399,12 +9472,12 @@ var BundleSelection = ({ onSelectVariant, onToggleBundleItem, products }) => {
           ),
           /* @__PURE__ */ jsxs28("div", { className: RebuyDynamicBundleProducts_default.bundleItemInput, children: [
             /* @__PURE__ */ jsxs28("label", { className: RebuyDynamicBundleProducts_default.bundleItemLabel, htmlFor: `${product.id}-toggle`, children: [
-              isOutOfStock && /* @__PURE__ */ jsx47("b", { children: "SOLD OUT" }),
-              product.default && /* @__PURE__ */ jsx47("b", { children: "This item:" }),
+              isOutOfStock && /* @__PURE__ */ jsx49("b", { children: "SOLD OUT" }),
+              product.default && /* @__PURE__ */ jsx49("b", { children: "This item:" }),
               product.title,
-              /* @__PURE__ */ jsx47(RebuyProductPrice, { selectedVariant: product.selectedVariant })
+              /* @__PURE__ */ jsx49(RebuyProductPrice, { selectedVariant: product.selectedVariant })
             ] }),
-            product.variants.nodes.length > 1 && /* @__PURE__ */ jsx47(Select, { onSelectVariant, product })
+            product.variants.nodes.length > 1 && /* @__PURE__ */ jsx49(Select, { onSelectVariant, product })
           ] })
         ] })
       },
@@ -9414,20 +9487,19 @@ var BundleSelection = ({ onSelectVariant, onToggleBundleItem, products }) => {
 };
 
 // src/widgets/RebuyDynamicBundleProducts/RebuyDynamicBundleProducts.tsx
-import { jsx as jsx48, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs29 } from "react/jsx-runtime";
 var RebuyDynamicBundleProducts = (props) => {
   const {
     addToCartBtnText = "Add to cart",
     addToCartCallback,
-    customTitle = `These pair with ${props.product?.title}`,
+    customTitle = `These pair with {product_title}`,
     customTitleLevel = "h2",
-    customTitleStyle,
-    isHydrogenReact,
-    product,
-    products = []
+    customTitleStyle
   } = props;
-  const [bundleProducts, setBundleProducts] = useState22([]);
-  useEffect23(() => {
+  const { isHydrogenReact, product, products } = useRebuyWidget();
+  const productTitle = customTitle.replace("{product_title}", product?.title ?? "");
+  const [bundleProducts, setBundleProducts] = useState23([]);
+  useEffect24(() => {
     const mainProduct = convertToRebuyProduct(isHydrogenReact || false, product);
     const formattedProducts = products.map((product2) => {
       return {
@@ -9461,11 +9533,11 @@ var RebuyDynamicBundleProducts = (props) => {
     return null;
   }
   return /* @__PURE__ */ jsxs29("section", { className: RebuyDynamicBundleProducts_default.container, children: [
-    /* @__PURE__ */ jsx48(Title, { level: getTitleLevel(customTitleLevel), style: customTitleStyle, text: customTitle }),
+    /* @__PURE__ */ jsx50(Title, { level: getTitleLevel(customTitleLevel), style: customTitleStyle, text: productTitle }),
     /* @__PURE__ */ jsxs29("div", { className: RebuyDynamicBundleProducts_default.bundleContainer, children: [
-      /* @__PURE__ */ jsx48(BundleImages, { products: bundleProducts }),
-      /* @__PURE__ */ jsx48(BundlePrice, { products: bundleProducts }),
-      /* @__PURE__ */ jsx48("div", { className: RebuyDynamicBundleProducts_default.addCartBtnContainer, children: /* @__PURE__ */ jsx48(
+      /* @__PURE__ */ jsx50(BundleImages, { products: bundleProducts }),
+      /* @__PURE__ */ jsx50(BundlePrice, { products: bundleProducts }),
+      /* @__PURE__ */ jsx50("div", { className: RebuyDynamicBundleProducts_default.addCartBtnContainer, children: /* @__PURE__ */ jsx50(
         AddToCartBtn,
         {
           addToCartBtnText,
@@ -9477,7 +9549,7 @@ var RebuyDynamicBundleProducts = (props) => {
           })
         }
       ) }),
-      /* @__PURE__ */ jsx48(
+      /* @__PURE__ */ jsx50(
         BundleSelection,
         {
           onSelectVariant,
@@ -9491,7 +9563,7 @@ var RebuyDynamicBundleProducts = (props) => {
 
 // src/widgets/RebuyProductAddOns/RebuyProductAddOns.tsx
 import { Money as Money5 } from "@shopify/hydrogen-react";
-import { useCallback as useCallback16, useEffect as useEffect24, useState as useState23 } from "react";
+import { useCallback as useCallback16, useEffect as useEffect25, useState as useState24 } from "react";
 
 // src/widgets/RebuyProductAddOns/RebuyProductAddOnCard.tsx
 import { Image as Image3 } from "@shopify/hydrogen";
@@ -9501,7 +9573,7 @@ var result25 = { "container": "RebuyProductAddOns_container", "productAddOnsList
 var RebuyProductAddOns_default = result25;
 
 // src/widgets/RebuyProductAddOns/RebuyProductAddOnCard.tsx
-import { jsx as jsx49, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs30 } from "react/jsx-runtime";
 var RebuyProductAddOnCard = ({
   handleChange,
   learnMoreText,
@@ -9510,8 +9582,8 @@ var RebuyProductAddOnCard = ({
   titleLevel
 }) => {
   const { availableForSale, image } = product.selectedVariant || {};
-  return /* @__PURE__ */ jsx49("label", { className: RebuyProductAddOns_default.addOnCard, htmlFor: product.id, children: /* @__PURE__ */ jsxs30("div", { className: RebuyProductAddOns_default.addOnCardContent, children: [
-    /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsx51("label", { className: RebuyProductAddOns_default.addOnCard, htmlFor: product.id, children: /* @__PURE__ */ jsxs30("div", { className: RebuyProductAddOns_default.addOnCardContent, children: [
+    /* @__PURE__ */ jsx51(
       "input",
       {
         checked: Boolean(product.selected),
@@ -9524,7 +9596,7 @@ var RebuyProductAddOnCard = ({
         value: ""
       }
     ),
-    /* @__PURE__ */ jsx49("div", { className: RebuyProductAddOns_default.addOnCardContentImage, children: image && /* @__PURE__ */ jsx49(
+    /* @__PURE__ */ jsx51("div", { className: RebuyProductAddOns_default.addOnCardContentImage, children: image && /* @__PURE__ */ jsx51(
       Image3,
       {
         alt: image.altText || `Picture of ${product.title}`,
@@ -9534,10 +9606,10 @@ var RebuyProductAddOnCard = ({
       }
     ) }),
     /* @__PURE__ */ jsxs30("div", { className: RebuyProductAddOns_default.addOnCardTextContent, children: [
-      !availableForSale && /* @__PURE__ */ jsx49("p", { className: RebuyProductAddOns_default.addOnCardOutOfStock, children: outOfStockText }),
-      /* @__PURE__ */ jsx49(Title, { level: titleLevel, text: product.title }),
-      /* @__PURE__ */ jsx49(RebuyProductPrice, { selectedVariant: product.selectedVariant }),
-      /* @__PURE__ */ jsx49(
+      !availableForSale && /* @__PURE__ */ jsx51("p", { className: RebuyProductAddOns_default.addOnCardOutOfStock, children: outOfStockText }),
+      /* @__PURE__ */ jsx51(Title, { level: titleLevel, text: product.title }),
+      /* @__PURE__ */ jsx51(RebuyProductPrice, { selectedVariant: product.selectedVariant }),
+      /* @__PURE__ */ jsx51(
         RebuyLink,
         {
           ariaLabel: `View ${product.title}`,
@@ -9551,28 +9623,28 @@ var RebuyProductAddOnCard = ({
 };
 
 // src/widgets/RebuyProductAddOns/RebuyProductAddOns.tsx
-import { jsx as jsx50, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs31 } from "react/jsx-runtime";
 var RebuyProductAddOns = (props) => {
   const {
+    addToCartBtnText = "Add to cart",
     addToCartCallback,
-    customTitle = `These pair with ${props.product?.title}`,
+    customTitle = `These pair with {product_title}`,
     customTitleLevel = "h2",
     customTitleStyle,
     includeMainProduct = false,
-    isHydrogenReact,
     learnMoreText = "Learn more",
     outOfStockText = "Out of stock",
-    product,
-    products = [],
-    addToCartBtnText = "Add to cart",
     subtotalText = "Add-ons Subtotal: ",
-    withProductText = `With ${product?.title}: `
+    withProductText = `With {product_title}: `
   } = props;
-  const [addedItems, setAddedItems] = useState23(products);
-  const [subtotalWithProduct, setSubtotalWithProduct] = useState23();
-  const [subtotalWithOutProduct, setSubtotalWithOutProduct] = useState23();
+  const { isHydrogenReact, product, products } = useRebuyWidget();
+  const productTitleClean = customTitle.replace("{product_title}", product?.title ?? "");
+  const withProductTextClean = withProductText.replace("{product_title}", product?.title ?? "");
+  const [addedItems, setAddedItems] = useState24(products);
+  const [subtotalWithProduct, setSubtotalWithProduct] = useState24();
+  const [subtotalWithOutProduct, setSubtotalWithOutProduct] = useState24();
   const convertedProduct = convertToRebuyProduct(isHydrogenReact || false, product);
-  useEffect24(() => {
+  useEffect25(() => {
     let initialTotal = 0;
     let currencyCode = "USD";
     products.map((product2) => {
@@ -9621,7 +9693,7 @@ var RebuyProductAddOns = (props) => {
     },
     [products]
   );
-  useEffect24(() => {
+  useEffect25(() => {
     let total = 0;
     let currencyCode = "USD";
     addedItems.forEach((item) => {
@@ -9648,8 +9720,8 @@ var RebuyProductAddOns = (props) => {
     return null;
   }
   return /* @__PURE__ */ jsxs31("div", { className: RebuyProductAddOns_default.container, children: [
-    /* @__PURE__ */ jsx50(Title, { level: getTitleLevel(customTitleLevel), style: customTitleStyle, text: customTitle }),
-    /* @__PURE__ */ jsx50("ul", { className: RebuyProductAddOns_default.productAddOnsList, children: products.map((product2) => /* @__PURE__ */ jsx50("li", { children: /* @__PURE__ */ jsx50(
+    /* @__PURE__ */ jsx52(Title, { level: getTitleLevel(customTitleLevel), style: customTitleStyle, text: productTitleClean }),
+    /* @__PURE__ */ jsx52("ul", { className: RebuyProductAddOns_default.productAddOnsList, children: products.map((product2) => /* @__PURE__ */ jsx52("li", { children: /* @__PURE__ */ jsx52(
       RebuyProductAddOnCard,
       {
         handleChange,
@@ -9662,13 +9734,13 @@ var RebuyProductAddOns = (props) => {
     /* @__PURE__ */ jsxs31("div", { className: RebuyProductAddOns_default.productAddOnsFooter, children: [
       /* @__PURE__ */ jsxs31("div", { className: RebuyProductAddOns_default.moneyContainer, children: [
         subtotalText,
-        subtotalWithOutProduct && /* @__PURE__ */ jsx50(Money5, { data: subtotalWithOutProduct, withoutTrailingZeros: true })
+        subtotalWithOutProduct && /* @__PURE__ */ jsx52(Money5, { data: subtotalWithOutProduct, withoutTrailingZeros: true })
       ] }),
       includeMainProduct && /* @__PURE__ */ jsxs31("div", { className: RebuyProductAddOns_default.moneyContainer, children: [
-        withProductText,
-        subtotalWithProduct && /* @__PURE__ */ jsx50(Money5, { data: subtotalWithProduct, withoutTrailingZeros: true })
+        withProductTextClean,
+        subtotalWithProduct && /* @__PURE__ */ jsx52(Money5, { data: subtotalWithProduct, withoutTrailingZeros: true })
       ] }),
-      /* @__PURE__ */ jsx50("div", { className: RebuyProductAddOns_default.addCartBtnContainer, children: includeMainProduct ? /* @__PURE__ */ jsx50(
+      /* @__PURE__ */ jsx52("div", { className: RebuyProductAddOns_default.addCartBtnContainer, children: includeMainProduct ? /* @__PURE__ */ jsx52(
         AddToCartBtn,
         {
           addToCartBtnText,
@@ -9678,7 +9750,7 @@ var RebuyProductAddOns = (props) => {
           moneyData: subtotalWithProduct,
           selectedVariants: addedItems.map((item) => item.selectedVariant)
         }
-      ) : /* @__PURE__ */ jsx50(
+      ) : /* @__PURE__ */ jsx52(
         AddToCartBtn,
         {
           addToCartBtnText,
@@ -9698,39 +9770,40 @@ var result26 = { "container": "RebuyProductRecommendations_container", "productG
 var RebuyProductRecommendations_default = result26;
 
 // src/widgets/RebuyProductRecommendations/RebuyProductRecommendations.tsx
-import { jsx as jsx51, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs32 } from "react/jsx-runtime";
 var RebuyProductRecommendations = (props) => {
   const {
     addToCartBtnText = "Add to cart",
     addToCartCallback,
-    customTitle = `These pair with ${props.product?.title}`,
+    customTitle = `These pair with {product_title}`,
     customTitleLevel = "h2",
-    customTitleStyle,
-    products = []
+    customTitleStyle
   } = props;
+  const { isHydrogenReact, product, products } = useRebuyWidget();
+  const productTitle = customTitle.replace("{product_title}", product?.title ?? "");
   if (products.length === 0) {
     rebuyDebugLog.log("widget-product-recommendations" /* WIDGET_PRODUCT_RECOMMENDATIONS */, "RebuyProductRecommendations: No products found");
     return null;
   }
   return /* @__PURE__ */ jsxs32("section", { className: RebuyProductRecommendations_default.container, children: [
-    /* @__PURE__ */ jsx51(Title, { level: getTitleLevel(customTitleLevel), style: customTitleStyle, text: customTitle }),
-    /* @__PURE__ */ jsx51("ul", { className: RebuyProductRecommendations_default.productGrid, children: products.map((product) => /* @__PURE__ */ jsx51("li", { children: /* @__PURE__ */ jsx51(
+    /* @__PURE__ */ jsx53(Title, { level: getTitleLevel(customTitleLevel), style: customTitleStyle, text: productTitle }),
+    /* @__PURE__ */ jsx53("ul", { className: RebuyProductRecommendations_default.productGrid, children: products.map((product2) => /* @__PURE__ */ jsx53("li", { children: /* @__PURE__ */ jsx53(
       ProductCard,
       {
         addToCartBtnText,
         addToCartCallback,
-        isHydrogenReact: props.isHydrogenReact,
-        product,
+        isHydrogenReact,
+        product: product2,
         productCardTitleLevel: getTitleLevel(customTitleLevel, true)
       }
-    ) }, product.id)) })
+    ) }, product2.id)) })
   ] });
 };
 
 // src/widgets/RebuyProductViewed/RebuyProductViewed.tsx
 import { RebuyClient as RebuyClient4 } from "@rebuy/rebuy";
 import * as Utilities6 from "@rebuy/rebuy/utilities";
-import { useEffect as useEffect25, useMemo as useMemo22, useState as useState24 } from "react";
+import { useEffect as useEffect26, useMemo as useMemo22, useState as useState25 } from "react";
 
 // src/zustandStores/productViewed.ts
 import { create as create2 } from "zustand";
@@ -9745,10 +9818,10 @@ var useProductViewedStore = create2((set) => ({
 var RebuyProductViewed = ({ ...props }) => {
   const { apiKey: apiKeyFromContext } = useRebuyConfig();
   const { customerId, product, productHandle, productId } = props;
-  const [event, setEvent] = useState24(null);
-  const [Rebuy, setRebuy] = useState24(null);
+  const [event, setEvent] = useState25(null);
+  const [Rebuy, setRebuy] = useState25(null);
   const shopifyProductId = product?.id ?? productId ?? null;
-  const [initialized, setInitialized] = useState24(false);
+  const [initialized, setInitialized] = useState25(false);
   const { setCustomerId, setUuid } = useProductViewedStore();
   const request = useMemo22(() => {
     const request2 = {
@@ -9764,7 +9837,7 @@ var RebuyProductViewed = ({ ...props }) => {
     }
     return request2;
   }, [productHandle, shopifyProductId]);
-  useEffect25(() => {
+  useEffect26(() => {
     const recordView = async () => {
       if (!Rebuy) {
         return;
@@ -9800,14 +9873,14 @@ var RebuyProductViewed = ({ ...props }) => {
 // src/widgets/RebuyRecentlyViewedProducts/RebuyRecentlyViewedProducts.tsx
 import { RebuyClient as RebuyClient5 } from "@rebuy/rebuy";
 import { flattenConnection as flattenConnection5 } from "@shopify/hydrogen";
-import { useContext as useContext5, useEffect as useEffect26, useMemo as useMemo23, useState as useState25 } from "react";
+import { useContext as useContext6, useEffect as useEffect27, useMemo as useMemo23, useState as useState26 } from "react";
 
 // src/widgets/RebuyRecentlyViewedProducts/RebuyRecentlyViewedProducts.module.css
 var result27 = { "rebuy-recently-viewed-products-container": "RebuyRecentlyViewedProducts_rebuy-recently-viewed-products-container", "product-grid": "RebuyRecentlyViewedProducts_product-grid" };
 var RebuyRecentlyViewedProducts_default = result27;
 
 // src/widgets/RebuyRecentlyViewedProducts/RebuyRecentlyViewedProducts.tsx
-import { jsx as jsx52, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs33 } from "react/jsx-runtime";
 var RebuyRecentlyViewedProducts = (props) => {
   const {
     addToCartBtnText = "Add to cart",
@@ -9821,14 +9894,14 @@ var RebuyRecentlyViewedProducts = (props) => {
   } = props;
   const { customerId, uuid } = useProductViewedStore();
   const { apiKey, loadingStatus: configLoadingStatus, rebuyConfig } = useRebuyConfig();
-  const rebuyContext = useContext5(RebuyContext);
-  const [rebuyApiClient, setRebuyApiClient] = useState25(null);
-  const [initialized, setInitialized] = useState25(false);
-  const [products, setProducts] = useState25([]);
-  const [metadata, setMetadata] = useState25();
+  const rebuyContext = useContext6(RebuyContext);
+  const [rebuyApiClient, setRebuyApiClient] = useState26(null);
+  const [initialized, setInitialized] = useState26(false);
+  const [products, setProducts] = useState26([]);
+  const [metadata, setMetadata] = useState26();
   const rebuyConfigKey = rebuyConfig?.shop?.cache_key;
   const endpoint = customerId && customerId !== "" ? `/api/v1/products/viewed?key=${rebuyConfigKey}&customer_id=${customerId}` : `/api/v1/products/viewed?key=${rebuyConfigKey}&uuid=${uuid}`;
-  useEffect26(() => {
+  useEffect27(() => {
     if (!rebuyApiClient && apiKey && configLoadingStatus === "success") {
       const client = new RebuyClient5(apiKey);
       if (rebuyContext?.contextParameters) {
@@ -9842,7 +9915,7 @@ var RebuyRecentlyViewedProducts = (props) => {
       setInitialized(true);
     }
   }, [apiKey, rebuyApiClient, configLoadingStatus, options, rebuyContext, uuid, endpoint]);
-  useEffect26(() => {
+  useEffect27(() => {
     if (rebuyApiClient && rebuyContext?.contextParameters) {
       const filteredParams = filterContextForWidgetEndpoints(rebuyContext.contextParameters, endpoint);
       rebuyApiClient.setContextParameters(filteredParams);
@@ -9859,7 +9932,7 @@ var RebuyRecentlyViewedProducts = (props) => {
     }
     return req;
   }, [limit, uuid, endpoint]);
-  useEffect26(() => {
+  useEffect27(() => {
     let isMounted = true;
     if (!rebuyApiClient || !initialized || configLoadingStatus !== "success") return;
     const fetchData = async () => {
@@ -9897,8 +9970,8 @@ var RebuyRecentlyViewedProducts = (props) => {
     return null;
   }
   return /* @__PURE__ */ jsxs33("div", { className: RebuyRecentlyViewedProducts_default["rebuy-recently-viewed-products-container"], children: [
-    /* @__PURE__ */ jsx52(Title, { level: getTitleLevel(customTitleLevel), style: customTitleStyle, text: customTitle }),
-    /* @__PURE__ */ jsx52("ul", { className: RebuyRecentlyViewedProducts_default["product-grid"], children: products?.map((product) => /* @__PURE__ */ jsx52("li", { children: /* @__PURE__ */ jsx52(
+    /* @__PURE__ */ jsx54(Title, { level: getTitleLevel(customTitleLevel), style: customTitleStyle, text: customTitle }),
+    /* @__PURE__ */ jsx54("ul", { className: RebuyRecentlyViewedProducts_default["product-grid"], children: products?.map((product) => /* @__PURE__ */ jsx54("li", { children: /* @__PURE__ */ jsx54(
       ProductCard,
       {
         addToCartBtnText,