@rebuy/rebuy-hydrogen 3.0.0-beta.10 → 3.0.0-beta.11

package/dist/index.js

@@ -31,23 +31,123 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   RebuyCompleteTheLook: () => RebuyCompleteTheLook,
+  RebuyConfigProvider: () => RebuyConfigProvider,
   RebuyDynamicBundleProducts: () => RebuyDynamicBundleProducts,
   RebuyHydrogenContextProvider: () => RebuyHydrogenContextProvider,
   RebuyHydrogenReactContextProvider: () => RebuyHydrogenReactContextProvider,
   RebuyProductAddOns: () => RebuyProductAddOns,
   RebuyProductRecommendations: () => RebuyProductRecommendations,
-  RebuyWidgetContainer: () => RebuyWidgetContainer
+  RebuyWidget: () => RebuyWidget,
+  RebuyWidgetContainer: () => RebuyWidgetContainer,
+  getRebuyThemeStylesLink: () => getRebuyThemeStylesLink,
+  updateRebuyCsp: () => updateRebuyCsp,
+  useRebuyConfig: () => useRebuyConfig,
+  useRebuyTheme: () => useRebuyTheme
 });
 module.exports = __toCommonJS(index_exports);
 
 // src/providers/RebuyHydrogenContextProvider.tsx
 var Utilities2 = __toESM(require("@rebuy/rebuy/utilities"), 1);
-var import_react2 = require("@remix-run/react");
-var import_react3 = require("react");
+var import_react3 = require("@remix-run/react");
+var import_react4 = require("react");
 
-// src/context/RebuyContext.tsx
+// src/context/RebuyConfigContext.tsx
 var import_react = require("react");
-var RebuyContext = (0, import_react.createContext)(null);
+
+// src/utils/getRebuyConfig.ts
+var import_rebuy = require("@rebuy/rebuy");
+var getRebuyConfig = async (storeDomain) => {
+  try {
+    const request = {
+      parameters: { shop: storeDomain },
+      url: `/api/v1/user/config`
+    };
+    const { data: rebuy, ...response } = await new import_rebuy.RebuyClient(void 0, void 0, storeDomain).getShieldedAsset(
+      request.url,
+      request.parameters
+    );
+    if (!rebuy?.shop) {
+      throw new Error("Rebuy configuration is not properly set up - missing shop", { cause: response });
+    }
+    return rebuy;
+  } catch (error) {
+    const err = error;
+    console.warn("Error fetching Rebuy shop config");
+    console.error(err, err.cause);
+    throw err;
+  }
+};
+
+// src/context/RebuyConfigContext.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var RebuyConfigContext = (0, import_react.createContext)(void 0);
+var RebuyConfigProvider = ({ children, initialShopDomain, overrideApiKey }) => {
+  const [rebuyConfig, setRebuyConfig] = (0, import_react.useState)(null);
+  const [apiKey, setApiKey] = (0, import_react.useState)(overrideApiKey || null);
+  const [loadingStatus, setLoadingStatus] = (0, import_react.useState)("idle");
+  const [fetchError, setFetchError] = (0, import_react.useState)(null);
+  const [currentShopDomain, setCurrentShopDomain] = (0, import_react.useState)(initialShopDomain || null);
+  const isMounted = (0, import_react.useRef)(true);
+  const fetchRebuyConfig = async (domainToFetch) => {
+    if (!domainToFetch) {
+      console.warn("[RebuyConfigProvider] No shop domain provided to fetchRebuyConfig.");
+      setLoadingStatus("error");
+      setFetchError("Shop domain is required to fetch Rebuy config.");
+      return;
+    }
+    setCurrentShopDomain(domainToFetch);
+    setLoadingStatus("loading");
+    setFetchError(null);
+    try {
+      const config = await getRebuyConfig(domainToFetch);
+      if (isMounted.current) {
+        setRebuyConfig(config);
+        setApiKey(overrideApiKey || config?.shop?.api_key || null);
+        setLoadingStatus("success");
+      }
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : String(error);
+      console.error("[RebuyConfigProvider] Error fetching Rebuy config:", errorMessage, error);
+      if (isMounted.current) {
+        setFetchError(error instanceof Error ? error : errorMessage);
+        setLoadingStatus("error");
+        setRebuyConfig(null);
+      }
+    }
+  };
+  (0, import_react.useEffect)(() => {
+    isMounted.current = true;
+    if (initialShopDomain && loadingStatus === "idle") {
+      fetchRebuyConfig(initialShopDomain);
+    }
+    return () => {
+      isMounted.current = false;
+    };
+  }, [initialShopDomain]);
+  const contextValue = (0, import_react.useMemo)(
+    () => ({
+      apiKey,
+      fetchError,
+      fetchRebuyConfig,
+      loadingStatus,
+      rebuyConfig,
+      shopDomain: currentShopDomain
+    }),
+    [rebuyConfig, apiKey, loadingStatus, fetchError, currentShopDomain]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RebuyConfigContext.Provider, { value: contextValue, children });
+};
+var useRebuyConfig = () => {
+  const context = (0, import_react.useContext)(RebuyConfigContext);
+  if (context === void 0) {
+    throw new Error("useRebuyConfig must be used within a RebuyConfigProvider");
+  }
+  return context;
+};
+
+// src/context/RebuyContext.tsx
+var import_react2 = require("react");
+var RebuyContext = (0, import_react2.createContext)(null);
 
 // src/utils/createContextParameters.ts
 var Utilities = __toESM(require("@rebuy/rebuy/utilities"), 1);
@@ -58,203 +158,253 @@ var getEncodedAttributes = (attributes) => encodeURIComponent(
 );
 
 // src/utils/createContextParameters.ts
+var defaultMoney = (currencyCode = "USD") => ({
+  __typename: "MoneyV2",
+  amount: "0.0",
+  currencyCode
+});
+var defaultPageInfo = () => ({
+  __typename: "PageInfo",
+  endCursor: null,
+  hasNextPage: false,
+  hasPreviousPage: false,
+  startCursor: null
+});
+var defaultBuyerIdentity = () => ({
+  __typename: "CartBuyerIdentity",
+  countryCode: null,
+  customer: null,
+  deliveryAddressPreferences: [],
+  email: null,
+  phone: null
+  // preferences and purchasingCompany are not on the official type
+});
 var createContextParameters = ({
   cacheKey,
-  cartAttributes,
-  cartId,
-  cartLines,
-  cartLinesLength,
-  cartNote,
-  cartSubtotal,
-  cartTotalQuantity,
+  /* Legacy props */
+  cartAttributes: legacyCartAttributes,
+  cartCost: legacyCartCost,
+  cartId: legacyCartId,
+  cartLines: legacyCartLines,
+  cartLinesLength: legacyCartLinesLength,
+  cartNote: legacyCartNote,
+  cartSubtotal: legacyCartSubtotal,
+  cartTotalQuantity: legacyCartTotalQuantity,
+  checkoutUrl: legacyCheckoutUrl,
+  discountCodes: legacyDiscountCodes,
+  /* Modern props */
+  hydrogenReactCartActions,
+  hydrogenReactCartError,
+  hydrogenReactCartStatus,
   isHydrogenReact,
+  /* H-React specific */
   queryObject,
+  sourceHydrogenCart,
   windowUrl
 }) => {
-  const contextParameters = {
-    cache_key: cacheKey,
-    cart_count: 0,
-    cart_item_count: 0,
-    cart_line_count: 0,
-    cart_subtotal: 0,
+  let solidifiedHydrogenCart = null;
+  const sourceCartCurrency = sourceHydrogenCart?.cost?.totalAmount?.currencyCode ?? "USD";
+  if (sourceHydrogenCart && sourceHydrogenCart.id) {
+    const builtCart = {
+      __typename: "Cart",
+      appliedGiftCards: sourceHydrogenCart.appliedGiftCards ?? [],
+      attributes: sourceHydrogenCart.attributes ?? [],
+      buyerIdentity: sourceHydrogenCart.buyerIdentity ?? defaultBuyerIdentity(),
+      checkoutUrl: sourceHydrogenCart.checkoutUrl ?? "",
+      cost: sourceHydrogenCart.cost ?? {
+        __typename: "CartCost",
+        checkoutChargeAmount: defaultMoney(sourceCartCurrency),
+        subtotalAmount: defaultMoney(sourceCartCurrency),
+        subtotalAmountEstimated: false,
+        totalAmount: defaultMoney(sourceCartCurrency),
+        totalAmountEstimated: false,
+        totalDutyAmount: null,
+        totalDutyAmountEstimated: false,
+        totalTaxAmount: null,
+        totalTaxAmountEstimated: false
+      },
+      createdAt: sourceHydrogenCart.createdAt ?? (/* @__PURE__ */ new Date()).toISOString(),
+      deliveryGroups: sourceHydrogenCart.deliveryGroups ?? {
+        __typename: "CartDeliveryGroupConnection",
+        edges: [],
+        nodes: [],
+        pageInfo: defaultPageInfo()
+      },
+      discountAllocations: sourceHydrogenCart.discountAllocations ?? [],
+      discountCodes: sourceHydrogenCart.discountCodes ?? [],
+      id: sourceHydrogenCart.id,
+      lines: sourceHydrogenCart.lines ?? {
+        __typename: "BaseCartLineConnection",
+        edges: [],
+        nodes: [],
+        pageInfo: defaultPageInfo()
+      },
+      metafields: sourceHydrogenCart.metafields ?? [],
+      note: sourceHydrogenCart.note ?? null,
+      totalQuantity: sourceHydrogenCart.totalQuantity ?? 0,
+      updatedAt: sourceHydrogenCart.updatedAt ?? (/* @__PURE__ */ new Date()).toISOString()
+    };
+    solidifiedHydrogenCart = builtCart;
+  }
+  let numericCartToken;
+  let cartSubtotalInCents = 0;
+  let linesForCounts = [];
+  let totalQuantity = 0;
+  let lineCount = 0;
+  let legacyNote = null;
+  let legacyAttributes = [];
+  let legacyCheckoutUrlValue;
+  let legacyDiscountCodesValue = [];
+  let legacyCartCostValue;
+  let legacyCartIdValue;
+  if (solidifiedHydrogenCart) {
+    numericCartToken = Utilities.getIdFromGraphUrl(solidifiedHydrogenCart.id, "Cart");
+    cartSubtotalInCents = solidifiedHydrogenCart.cost?.subtotalAmount?.amount ? Utilities.amountToCents(parseFloat(solidifiedHydrogenCart.cost.subtotalAmount.amount)) : 0;
+    linesForCounts = (solidifiedHydrogenCart.lines.nodes?.length ?? 0) > 0 ? solidifiedHydrogenCart.lines.nodes : solidifiedHydrogenCart.lines.edges?.map((e) => e.node) ?? [];
+    totalQuantity = solidifiedHydrogenCart.totalQuantity;
+    lineCount = linesForCounts.length;
+    legacyNote = solidifiedHydrogenCart.note ?? null;
+    legacyAttributes = [...solidifiedHydrogenCart.attributes];
+    legacyCheckoutUrlValue = solidifiedHydrogenCart.checkoutUrl;
+    legacyDiscountCodesValue = [...solidifiedHydrogenCart.discountCodes];
+    legacyCartCostValue = solidifiedHydrogenCart.cost;
+    legacyCartIdValue = solidifiedHydrogenCart.id;
+  } else {
+    numericCartToken = legacyCartId ? Utilities.getIdFromGraphUrl(legacyCartId, "Cart") : void 0;
+    const subtotalString = legacyCartCost?.subtotalAmount?.amount ?? legacyCartSubtotal;
+    cartSubtotalInCents = subtotalString ? Utilities.amountToCents(parseFloat(subtotalString)) : 0;
+    linesForCounts = Array.isArray(legacyCartLines) ? [...legacyCartLines] : [];
+    totalQuantity = legacyCartTotalQuantity ?? linesForCounts.reduce((sum, line) => sum + (line?.quantity ?? 0), 0);
+    lineCount = legacyCartLinesLength ?? linesForCounts.length;
+    legacyNote = legacyCartNote ?? null;
+    legacyAttributes = legacyCartAttributes ? [...legacyCartAttributes] : [];
+    legacyCheckoutUrlValue = legacyCheckoutUrl;
+    legacyDiscountCodesValue = legacyDiscountCodes ? [...legacyDiscountCodes] : [];
+    legacyCartCostValue = legacyCartCost;
+    legacyCartIdValue = legacyCartId;
+  }
+  const contextParametersOutput = {
+    cacheKey,
+    cart: void 0,
+    cartAttributes: legacyAttributes,
+    cartCost: legacyCartCostValue,
+    cartCount: totalQuantity,
+    cartId: legacyCartIdValue,
+    cartItemCount: totalQuantity,
+    cartLineCount: lineCount,
+    cartLines: linesForCounts,
+    cartNote: legacyNote,
+    cartSubtotal: cartSubtotalInCents,
+    cartToken: numericCartToken,
+    checkoutUrl: legacyCheckoutUrlValue,
+    discountCodes: legacyDiscountCodesValue,
+    hydrogenCart: solidifiedHydrogenCart,
+    hydrogenReactCartActions,
+    hydrogenReactCartError,
+    hydrogenReactCartStatus,
     isHydrogenReact,
-    time: "",
+    time: queryObject.time ?? "",
     url: windowUrl
   };
   const cartContext = {
     attributes: "",
-    item_count: 0,
+    item_count: totalQuantity,
     items: [],
-    line_count: 0,
-    note: "",
-    subtotal: 0,
-    token: ""
+    line_count: lineCount,
+    note: legacyNote ?? "",
+    subtotal: cartSubtotalInCents,
+    token: numericCartToken ?? ""
   };
-  if (Object.prototype.hasOwnProperty.call(queryObject, "time")) {
-    contextParameters.time = queryObject.time;
-  }
-  if (cartId) {
-    cartContext.token = Utilities.getIdFromGraphUrl(cartId, "Cart");
-    contextParameters.cart_token = Utilities.getIdFromGraphUrl(cartId, "Cart");
-  }
-  if (cartSubtotal) {
-    cartContext.subtotal = Utilities.amountToCents(parseFloat(cartSubtotal));
-    contextParameters.cart_subtotal = Utilities.amountToCents(parseFloat(cartSubtotal));
-  }
-  if (cartLinesLength) {
-    const totalLines = cartLinesLength;
-    cartContext.line_count = totalLines;
-    contextParameters.cart_count = totalLines;
-    contextParameters.cart_line_count = totalLines;
-  }
-  if (cartTotalQuantity) {
-    cartContext.item_count = cartTotalQuantity;
-    contextParameters.cart_item_count = cartTotalQuantity;
+  if (legacyAttributes.length > 0) {
+    const validAttributes = legacyAttributes.filter(
+      (attr) => typeof attr.key === "string" && typeof attr.value === "string"
+    );
+    cartContext.attributes = getEncodedAttributes(validAttributes);
   }
-  if (cartLines) {
-    cartContext.items = [];
-    for (const cartItem of cartLines) {
+  if (linesForCounts.length > 0) {
+    cartContext.items = linesForCounts.map((line) => {
       const item = {
-        attributes: [],
-        product_id: "",
+        attributes: line.attributes ? [...line.attributes] : [],
+        product_id: line.merchandise?.product?.id ? Utilities.getIdFromGraphUrl(line.merchandise.product.id, "Product") : "",
         properties: "",
-        quantity: cartItem?.quantity,
-        variant_id: ""
+        quantity: line.quantity,
+        variant_id: line.merchandise?.id ? Utilities.getIdFromGraphUrl(line.merchandise.id, "ProductVariant") : ""
       };
-      if (cartItem?.merchandise?.product?.id) {
-        item.product_id = Utilities.getIdFromGraphUrl(cartItem.merchandise.product.id, "Product");
-      }
-      if (cartItem?.merchandise?.id) {
-        item.variant_id = Utilities.getIdFromGraphUrl(cartItem.merchandise.id, "ProductVariant");
-      }
-      if (cartItem?.attributes?.length) {
-        const validAttributes = cartItem.attributes.filter(
-          (attr) => attr !== void 0 && typeof attr.key === "string" && typeof attr.value === "string"
+      if (line.attributes?.length) {
+        const validLineAttributes = line.attributes.filter(
+          (attr) => typeof attr.key === "string" && typeof attr.value === "string"
         );
-        item.properties = getEncodedAttributes(validAttributes);
+        item.properties = getEncodedAttributes(validLineAttributes);
       }
-      cartContext.items.push(item);
-    }
-  }
-  if (cartAttributes) {
-    const validAttributes = cartAttributes.filter(
-      (attr) => attr !== void 0 && typeof attr.key === "string" && typeof attr.value === "string"
-    );
-    cartContext.attributes = getEncodedAttributes(validAttributes);
-  }
-  if (cartNote) {
-    cartContext.note = cartNote;
-  }
-  contextParameters.cart = cartContext;
-  return contextParameters;
-};
-
-// src/utils/getRebuyConfig.ts
-var import_rebuy = require("@rebuy/rebuy");
-var getRebuyConfig = async (storeDomain) => {
-  try {
-    const request = {
-      parameters: { shop: storeDomain },
-      url: `/api/v1/user/config`
-    };
-    const { data: rebuy, ...response } = await new import_rebuy.RebuyClient(void 0, void 0, storeDomain).getShieldedAsset(
-      request.url,
-      request.parameters
-    );
-    if (!rebuy?.shop) {
-      throw new Error("Rebuy configuration is not properly set up - missing shop", { cause: response });
-    }
-    return rebuy;
-  } catch (error) {
-    const err = error;
-    console.warn("Error fetching Rebuy shop config");
-    console.error(err, err.cause);
-    throw err;
+      return item;
+    });
   }
+  return {
+    ...contextParametersOutput,
+    cart: cartContext
+  };
 };
 
 // src/providers/RebuyHydrogenContextProvider.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-var RebuyHydrogenContext = ({
-  apiKey,
-  cartAttributes,
-  cartCost,
-  cartId,
-  cartLines,
-  cartNote,
-  cartQuantity,
-  children,
-  publicStoreDomain,
-  shop
-}) => {
-  const [rebuyConfig, setRebuyConfig] = (0, import_react3.useState)(null);
-  const location = (0, import_react2.useLocation)();
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var RebuyHydrogenContext = ({ children, shop, sourceHydrogenCart }) => {
+  const {
+    fetchError: configFetchError,
+    loadingStatus: configLoadingStatus,
+    rebuyConfig,
+    shopDomain: configShopDomain
+  } = useRebuyConfig();
+  const location = (0, import_react3.useLocation)();
   const queryObject = Utilities2.queryStringToObject(location.search);
   const windowUrl = `${shop}${location.pathname}${location.search}`;
-  (0, import_react3.useEffect)(() => {
-    const initConfig = async () => {
-      const config = await getRebuyConfig(publicStoreDomain);
-      setRebuyConfig(config);
-    };
-    if (!rebuyConfig?.shop) {
-      initConfig();
-    }
-  }, [rebuyConfig]);
-  const contextParameters = (0, import_react3.useMemo)(
+  const contextParameters = (0, import_react4.useMemo)(
     () => createContextParameters({
       cacheKey: rebuyConfig?.shop?.cache_key,
-      cartAttributes,
-      cartId,
-      cartLines,
-      cartLinesLength: cartLines?.length,
-      cartNote,
-      cartSubtotal: cartCost,
-      cartTotalQuantity: cartQuantity,
       isHydrogenReact: false,
       queryObject,
+      sourceHydrogenCart,
       windowUrl
     }),
-    [rebuyConfig, windowUrl, queryObject, cartAttributes, cartCost, cartId, cartLines, cartQuantity, cartNote]
+    [rebuyConfig?.shop?.cache_key, windowUrl, queryObject, sourceHydrogenCart]
   );
-  const contextParametersJSON = JSON.stringify(contextParameters);
-  const contextValue = (0, import_react3.useMemo)(
-    () => ({ contextParameters: JSON.parse(contextParametersJSON) }),
-    [contextParametersJSON]
+  const defaultContextValue = (0, import_react4.useMemo)(() => null, []);
+  const contextValue = (0, import_react4.useMemo)(
+    () => configLoadingStatus === "success" && rebuyConfig ? { contextParameters } : defaultContextValue,
+    [configLoadingStatus, rebuyConfig, contextParameters, defaultContextValue]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RebuyContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RebuyContext.Provider, { value: contextValue, children: configLoadingStatus === "success" && rebuyConfig ? children : configLoadingStatus === "error" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    (() => {
+      console.error(
+        `[Rebuy Provider] Failed to load Rebuy configuration for ${configShopDomain}. Rebuy features unavailable. Error:`,
+        configFetchError instanceof Error ? configFetchError.message : configFetchError
+      );
+      return null;
+    })(),
+    children
+  ] }) : null });
 };
 var RebuyHydrogenContextProvider = ({
-  apiKey,
   cart,
   children,
+  overrideApiKey,
   publicStoreDomain,
   shop
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.Await, { resolve: cart, children: (resolvedCart) => {
-    const cart2 = resolvedCart;
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      RebuyHydrogenContext,
-      {
-        apiKey,
-        cartAttributes: cart2?.attributes,
-        cartCost: cart2?.cost?.subtotalAmount?.amount,
-        cartId: cart2?.id,
-        cartLines: cart2?.lines?.nodes,
-        cartNote: cart2?.note,
-        cartQuantity: cart2?.totalQuantity,
-        publicStoreDomain,
-        shop,
-        children
-      }
-    );
+  if (!publicStoreDomain || !shop) {
+    console.warn('[Rebuy Provider Wrapper] Waiting for "publicStoreDomain" and "shop" props.');
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react3.Await, { resolve: cart, children: (resolvedCart) => {
+    const hydrogenCartFromRemix = resolvedCart;
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RebuyConfigProvider, { initialShopDomain: publicStoreDomain, overrideApiKey, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RebuyHydrogenContext, { shop, sourceHydrogenCart: hydrogenCartFromRemix, children }) });
   } });
 };
 
 // src/providers/RebuyHydrogenReactContextProvider.tsx
 var Utilities3 = __toESM(require("@rebuy/rebuy/utilities"), 1);
-var import_react4 = require("@remix-run/react");
+var import_react5 = require("@remix-run/react");
 var import_hydrogen_react = require("@shopify/hydrogen-react");
-var import_react5 = require("react");
+var import_react6 = require("react");
 
 // src/queries/cart.queries.ts
 var OPTION_FRAGMENT = `#graphql
@@ -718,50 +868,69 @@ var CART_FRAGMENT = `#graphql
 `;
 
 // src/providers/RebuyHydrogenReactContextProvider.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var PUBLIC_PRIMARY_DOMAIN = process.env.PUBLIC_PRIMARY_DOMAIN;
-var PUBLIC_STORE_DOMAIN = process.env.PUBLIC_STORE_DOMAIN;
-var PUBLIC_STOREFRONT_ID = process.env.PUBLIC_STOREFRONT_ID;
-var PUBLIC_STOREFRONT_API_TOKEN = process.env.PUBLIC_STOREFRONT_API_TOKEN || "";
-var RebuyHydrogenReactContext = ({ children }) => {
-  const [rebuyConfig, setRebuyConfig] = (0, import_react5.useState)(null);
-  const location = (0, import_react4.useLocation)();
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var RebuyHydrogenReactContext = ({ children, publicPrimaryDomian }) => {
+  const { loadingStatus: configLoadingStatus, rebuyConfig } = useRebuyConfig();
+  const location = (0, import_react5.useLocation)();
   const queryObject = Utilities3.queryStringToObject(location.search);
-  const windowUrl = `${PUBLIC_PRIMARY_DOMAIN}${location.pathname}${location.search}`;
-  const cart = (0, import_hydrogen_react.useCart)();
-  (0, import_react5.useEffect)(() => {
-    const initConfig = async () => {
-      const config = await getRebuyConfig(PUBLIC_STORE_DOMAIN);
-      setRebuyConfig(config);
-    };
-    if (!rebuyConfig?.shop) {
-      initConfig();
-    }
-  }, [rebuyConfig, PUBLIC_STORE_DOMAIN]);
-  const contextParameters = (0, import_react5.useMemo)(
-    () => createContextParameters({
+  const windowUrl = publicPrimaryDomian ? `${publicPrimaryDomian}${location.pathname}${location.search}` : "";
+  const {
+    cartAttributesUpdate,
+    cartCreate,
+    discountCodesUpdate,
+    error: hydrogenReactCartError,
+    linesAdd,
+    linesRemove,
+    linesUpdate,
+    noteUpdate,
+    status: hydrogenReactCartStatus,
+    ...hydrogenReactCartData
+  } = (0, import_hydrogen_react.useCart)();
+  const hydrogenReactCartActions = (0, import_react6.useMemo)(
+    () => ({
+      cartAttributesUpdate,
+      cartCreate,
+      discountCodesUpdate,
+      linesAdd,
+      linesRemove,
+      linesUpdate,
+      noteUpdate
+    }),
+    [cartAttributesUpdate, cartCreate, discountCodesUpdate, linesAdd, linesRemove, linesUpdate, noteUpdate]
+  );
+  const contextParameters = (0, import_react6.useMemo)(() => {
+    const propsForParamCreation = {
       cacheKey: rebuyConfig?.shop?.cache_key,
-      cartAttributes: cart?.attributes,
-      cartId: cart?.id,
-      cartLines: cart?.lines,
-      cartLinesLength: cart?.lines?.length,
-      cartSubtotal: cart?.cost?.subtotalAmount?.amount,
-      cartTotalQuantity: cart?.totalQuantity,
+      hydrogenReactCartActions,
+      hydrogenReactCartError,
+      hydrogenReactCartStatus,
       isHydrogenReact: true,
       queryObject,
+      sourceHydrogenCart: hydrogenReactCartData,
+      // eslint-disable-line @typescript-eslint/no-explicit-any
       windowUrl
-    }),
-    [rebuyConfig, windowUrl, queryObject, cart]
-  );
-  const contextParametersJSON = JSON.stringify(contextParameters);
-  const contextValue = (0, import_react5.useMemo)(
-    () => ({ contextParameters: JSON.parse(contextParametersJSON) }),
-    [contextParametersJSON]
+    };
+    return createContextParameters(propsForParamCreation);
+  }, [
+    rebuyConfig?.shop?.cache_key,
+    windowUrl,
+    queryObject,
+    hydrogenReactCartData,
+    hydrogenReactCartActions,
+    hydrogenReactCartStatus,
+    hydrogenReactCartError
+  ]);
+  const defaultContextValue = (0, import_react6.useMemo)(() => ({ contextParameters: {} }), []);
+  const rebuyContextValue = (0, import_react6.useMemo)(
+    () => configLoadingStatus === "success" && rebuyConfig ? { contextParameters } : defaultContextValue,
+    [configLoadingStatus, rebuyConfig, contextParameters, defaultContextValue]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RebuyContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RebuyContext.Provider, { value: rebuyContextValue, children: configLoadingStatus === "success" && rebuyConfig ? children : configLoadingStatus === "error" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children }) : null });
 };
 var RebuyHydrogenReactContextProvider = ({
+  // --- Rebuy Specific Props ---
   cartFragment = CART_FRAGMENT,
+  // --- ShopifyProvider Props ---
   children,
   countryIsoCode = "US",
   customerAccessToken = "",
@@ -769,10 +938,12 @@ var RebuyHydrogenReactContextProvider = ({
   languageIsoCode = "EN",
   numCartLines,
   onAttributesUpdate,
+  // --- CartProvider Props ---
   onAttributesUpdateComplete,
   onBuyerIdentityUpdate,
   onBuyerIdentityUpdateComplete,
   onCreate,
+  // --- CartProvider Callbacks (adapted) ---
   onCreateComplete,
   onDiscountCodesUpdate,
   onDiscountCodesUpdateComplete,
@@ -784,36 +955,67 @@ var RebuyHydrogenReactContextProvider = ({
   onLineUpdateComplete,
   onNoteUpdate,
   onNoteUpdateComplete,
-  storefrontApiVersion = "2025-01"
+  overrideApiKey,
+  publicPrimaryDomian = "",
+  publicStoreDomain = "",
+  publicStorefrontApiToken = "",
+  publicStorefrontId = "",
+  storefrontApiVersion = "2024-07"
 }) => {
-  const adapted = {
-    onAttributesUpdate: onAttributesUpdate ? () => onAttributesUpdate() : void 0,
-    onAttributesUpdateComplete: onAttributesUpdateComplete ? () => onAttributesUpdateComplete() : void 0,
-    onBuyerIdentityUpdate: onBuyerIdentityUpdate ? () => onBuyerIdentityUpdate() : void 0,
-    onBuyerIdentityUpdateComplete: onBuyerIdentityUpdateComplete ? () => onBuyerIdentityUpdateComplete() : void 0,
-    onCreate: onCreate ? () => onCreate() : void 0,
-    onCreateComplete: onCreateComplete ? () => onCreateComplete() : void 0,
-    onDiscountCodesUpdate: onDiscountCodesUpdate ? () => onDiscountCodesUpdate() : void 0,
-    onDiscountCodesUpdateComplete: onDiscountCodesUpdateComplete ? () => onDiscountCodesUpdateComplete() : void 0,
-    onLineAdd: onLineAdd ? () => onLineAdd() : void 0,
-    onLineAddComplete: onLineAddComplete ? () => onLineAddComplete() : void 0,
-    onLineRemove: onLineRemove ? () => onLineRemove() : void 0,
-    onLineRemoveComplete: onLineRemoveComplete ? () => onLineRemoveComplete() : void 0,
-    onLineUpdate: onLineUpdate ? () => onLineUpdate() : void 0,
-    onLineUpdateComplete: onLineUpdateComplete ? () => onLineUpdateComplete() : void 0,
-    onNoteUpdate: onNoteUpdate ? () => onNoteUpdate() : void 0,
-    onNoteUpdateComplete: onNoteUpdateComplete ? () => onNoteUpdateComplete() : void 0
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  const adaptedCallbacks = (0, import_react6.useMemo)(
+    () => ({
+      onAttributesUpdate: onAttributesUpdate ? () => onAttributesUpdate() : void 0,
+      onAttributesUpdateComplete: onAttributesUpdateComplete ? () => onAttributesUpdateComplete() : void 0,
+      onBuyerIdentityUpdate: onBuyerIdentityUpdate ? () => onBuyerIdentityUpdate() : void 0,
+      onBuyerIdentityUpdateComplete: onBuyerIdentityUpdateComplete ? () => onBuyerIdentityUpdateComplete() : void 0,
+      onCreate: onCreate ? () => onCreate() : void 0,
+      onCreateComplete: onCreateComplete ? () => onCreateComplete() : void 0,
+      onDiscountCodesUpdate: onDiscountCodesUpdate ? () => onDiscountCodesUpdate() : void 0,
+      onDiscountCodesUpdateComplete: onDiscountCodesUpdateComplete ? () => onDiscountCodesUpdateComplete() : void 0,
+      onLineAdd: onLineAdd ? () => onLineAdd() : void 0,
+      onLineAddComplete: onLineAddComplete ? () => onLineAddComplete() : void 0,
+      onLineRemove: onLineRemove ? () => onLineRemove() : void 0,
+      onLineRemoveComplete: onLineRemoveComplete ? () => onLineRemoveComplete() : void 0,
+      onLineUpdate: onLineUpdate ? () => onLineUpdate() : void 0,
+      onLineUpdateComplete: onLineUpdateComplete ? () => onLineUpdateComplete() : void 0,
+      onNoteUpdate: onNoteUpdate ? () => onNoteUpdate() : void 0,
+      onNoteUpdateComplete: onNoteUpdateComplete ? () => onNoteUpdateComplete() : void 0
+    }),
+    [
+      onAttributesUpdate,
+      onAttributesUpdateComplete,
+      onBuyerIdentityUpdate,
+      onBuyerIdentityUpdateComplete,
+      onCreate,
+      onCreateComplete,
+      onDiscountCodesUpdate,
+      onDiscountCodesUpdateComplete,
+      onLineAdd,
+      onLineAddComplete,
+      onLineRemove,
+      onLineRemoveComplete,
+      onLineUpdate,
+      onLineUpdateComplete,
+      onNoteUpdate,
+      onNoteUpdateComplete
+    ]
+  );
+  if (!publicStoreDomain || !publicStorefrontApiToken) {
+    console.error(
+      "[Rebuy React Provider] Critical environment variables publicStoreDomain or publicStorefrontApiToken are missing. ShopifyProvider and CartProvider may not function correctly."
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     import_hydrogen_react.ShopifyProvider,
     {
       countryIsoCode,
       languageIsoCode,
-      storeDomain: PUBLIC_STORE_DOMAIN,
+      storeDomain: publicStoreDomain,
       storefrontApiVersion,
-      storefrontId: PUBLIC_STOREFRONT_ID,
-      storefrontToken: PUBLIC_STOREFRONT_API_TOKEN,
-      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      storefrontId: publicStorefrontId,
+      storefrontToken: publicStorefrontApiToken,
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         import_hydrogen_react.CartProvider,
         {
           cartFragment,
@@ -822,23 +1024,8 @@ var RebuyHydrogenReactContextProvider = ({
           data,
           languageCode: languageIsoCode,
           numCartLines,
-          onAttributesUpdate: adapted.onAttributesUpdate,
-          onAttributesUpdateComplete: adapted.onAttributesUpdateComplete,
-          onBuyerIdentityUpdate: adapted.onBuyerIdentityUpdate,
-          onBuyerIdentityUpdateComplete: adapted.onBuyerIdentityUpdateComplete,
-          onCreate: adapted.onCreate,
-          onCreateComplete: adapted.onCreateComplete,
-          onDiscountCodesUpdate: adapted.onDiscountCodesUpdate,
-          onDiscountCodesUpdateComplete: adapted.onDiscountCodesUpdateComplete,
-          onLineAdd: adapted.onLineAdd,
-          onLineAddComplete: adapted.onLineAddComplete,
-          onLineRemove: adapted.onLineRemove,
-          onLineRemoveComplete: adapted.onLineRemoveComplete,
-          onLineUpdate: adapted.onLineUpdate,
-          onLineUpdateComplete: adapted.onLineUpdateComplete,
-          onNoteUpdate: adapted.onNoteUpdate,
-          onNoteUpdateComplete: adapted.onNoteUpdateComplete,
-          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RebuyHydrogenReactContext, { children })
+          ...adaptedCallbacks,
+          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RebuyConfigProvider, { initialShopDomain: publicStoreDomain, overrideApiKey, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RebuyHydrogenReactContext, { publicPrimaryDomian, children }) })
         }
       )
     }
@@ -849,66 +1036,52 @@ var RebuyHydrogenReactContextProvider = ({
 var import_rebuy2 = require("@rebuy/rebuy");
 var Utilities4 = __toESM(require("@rebuy/rebuy/utilities"), 1);
 var import_hydrogen = require("@shopify/hydrogen");
-var import_react6 = __toESM(require("react"), 1);
+var import_react7 = __toESM(require("react"), 1);
 var RebuyWidgetContainerBase = ({ children, ...props }) => {
   const { apiKey, collection, collectionId, dataSource, limit, options, product, productId, variant, variantId } = props;
-  const contextParameters = (0, import_react6.useContext)(RebuyContext);
-  const [Rebuy, setRebuy] = (0, import_react6.useState)(null);
-  const [initialized, setInitialized] = (0, import_react6.useState)(false);
+  const { apiKey: apiKeyFromContext, loadingStatus: configLoadingStatus, rebuyConfig } = useRebuyConfig();
+  const [rebuyApiClient, setRebuyApiClient] = (0, import_react7.useState)(null);
+  const [initialized, setInitialized] = (0, import_react7.useState)(false);
   const shopifyProductId = product?.id ?? productId ?? null;
   const shopifyVariantId = variant?.id ?? variantId ?? null;
   const shopifyCollectionId = collection?.id ?? collectionId ?? null;
-  const [products, setProducts] = (0, import_react6.useState)([]);
-  const [metadata, setMetadata] = (0, import_react6.useState)();
-  (0, import_react6.useEffect)(() => {
-    if (!Rebuy) {
-      const client = new import_rebuy2.RebuyClient(apiKey);
-      client.setContextParameters(
-        contextParameters
-        // TODO: fix this type when @rebuy/rebuy is moved to typescript
-      );
+  const [products, setProducts] = (0, import_react7.useState)([]);
+  const [metadata, setMetadata] = (0, import_react7.useState)();
+  (0, import_react7.useEffect)(() => {
+    if (!rebuyApiClient && apiKeyFromContext && configLoadingStatus === "success") {
+      const client = new import_rebuy2.RebuyClient(apiKeyFromContext);
       if (options) {
         client.setDefaultParameters(options);
       }
-      setRebuy(client);
+      setRebuyApiClient(client);
       setInitialized(true);
     }
-  }, [apiKey, Rebuy, contextParameters, options]);
-  (0, import_react6.useEffect)(() => {
-    if (!Rebuy) return;
-    Rebuy.setContextParameters(
-      contextParameters
-      // TODO: fix this type when @rebuy/rebuy is moved to typescript
-    );
-  }, [Rebuy, contextParameters]);
-  const request = (0, import_react6.useMemo)(() => {
-    const request2 = {
+  }, [apiKeyFromContext, rebuyApiClient, configLoadingStatus, options]);
+  const request = (0, import_react7.useMemo)(() => {
+    const req = {
       endpoint: dataSource || "/api/v1/products/recommended",
       params: {}
       // Keeping this object generic to allow for custom endpoints
     };
     if (shopifyProductId) {
-      request2.params.shopify_product_ids = Utilities4.getIdFromGraphUrl(shopifyProductId, "Product");
-    }
-    if (shopifyProductId) {
-      request2.params.shopify_product_ids = Utilities4.getIdFromGraphUrl(shopifyProductId, "Product");
+      req.params.shopify_product_ids = Utilities4.getIdFromGraphUrl(shopifyProductId, "Product") ?? "";
     }
     if (shopifyVariantId) {
-      request2.params.shopify_variant_ids = Utilities4.getIdFromGraphUrl(shopifyVariantId, "ProductVariant");
+      req.params.shopify_variant_ids = Utilities4.getIdFromGraphUrl(shopifyVariantId, "ProductVariant") ?? "";
     }
     if (shopifyCollectionId) {
-      request2.params.shopify_collection_ids = Utilities4.getIdFromGraphUrl(shopifyCollectionId, "Collection");
+      req.params.shopify_collection_ids = Utilities4.getIdFromGraphUrl(shopifyCollectionId, "Collection") ?? "";
     }
     if (limit) {
-      request2.params.limit = limit;
+      req.params.limit = limit;
     }
-    return request2;
+    return req;
   }, [dataSource, shopifyProductId, shopifyVariantId, shopifyCollectionId, limit]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     let isMounted = true;
-    if (!Rebuy || !initialized) return;
+    if (!rebuyApiClient || !initialized || configLoadingStatus !== "success") return;
     const fetchData = async () => {
-      const { data, metadata: metadata2 } = await Rebuy.getStorefrontData(request.endpoint, request.params);
+      const { data, metadata: metadata2 } = await rebuyApiClient.getStorefrontData(request.endpoint, request.params);
       if (isMounted) {
         setProducts(
           Array.isArray(data) ? data.map((product2) => ({
@@ -925,37 +1098,82 @@ var RebuyWidgetContainerBase = ({ children, ...props }) => {
     return () => {
       isMounted = false;
     };
-  }, [Rebuy, initialized, request]);
-  const childrenWithProps = (props2) => import_react6.default.Children.map(
+  }, [rebuyApiClient, initialized, request, configLoadingStatus]);
+  const childrenWithProps = (currentProps) => import_react7.default.Children.map(
     children,
-    (child) => import_react6.default.isValidElement(child) ? import_react6.default.cloneElement(child, props2) : child
+    (child) => import_react7.default.isValidElement(child) ? import_react7.default.cloneElement(child, currentProps) : child
   );
   const childProps = {
     ...props,
-    isHydrogenReact: contextParameters?.contextParameters?.isHydrogenReact,
+    cacheKey: rebuyConfig?.shop?.cache_key,
     key: product?.id,
     metadata,
     products
   };
+  if (configLoadingStatus !== "success" || !rebuyApiClient) {
+    return null;
+  }
   return childrenWithProps(childProps);
 };
 var RebuyWidgetContainer = RebuyWidgetContainerBase;
 
+// src/components/ProductCard/defaultSettings.ts
+var defaultProductCardSettings = {
+  layoutStyle: "grid",
+  productOptions: {
+    hide_out_of_stock_variants: false,
+    match_variant: false,
+    match_variant_out_of_stock: false,
+    show_product_description: "hide",
+    show_subscription_options: "always",
+    show_variant_options: "always",
+    show_variant_title: "show",
+    show_variants_as_products: false,
+    variant_display_limit: "product_limit"
+  },
+  quantityInput: {
+    default_quantity: 1,
+    enabled: true,
+    max_value: 11,
+    min_value: 1
+  },
+  settingsDiscount: {
+    amount: 0,
+    bundle_protection: {
+      allowed_removals: 0,
+      disable_atc_on_incomplete: false,
+      enabled: false
+    },
+    discount_protection: {
+      enabled: false,
+      minimum_items_to_get_discount: 2
+    },
+    discounted_by: "other",
+    discounted_from: "original_price",
+    message: "",
+    quantity: 1,
+    show_saving_amount: false,
+    type: "none"
+  },
+  variantSelector: "select"
+};
+
 // src/components/ProductCard/ProductCard.tsx
-var import_react7 = require("@remix-run/react");
+var import_react10 = require("@remix-run/react");
 var import_hydrogen4 = require("@shopify/hydrogen");
-var import_react8 = require("react");
+var import_react11 = require("react");
 
 // src/components/AddToCartBtn/HydrogenAddToCartBtn.tsx
 var import_hydrogen2 = require("@shopify/hydrogen");
 
 // src/components/AddToCartBtn/AddToCartBtn.module.css
 var AddToCartBtn_default = {
-  button: "AddToCartBtn_button"
+  "rebuy-cart-button": "AddToCartBtn_rebuy-cart-button",
+  "rebuy-cart-button__container": "AddToCartBtn_rebuy-cart-button__container"
 };
 
 // src/components/AddToCartBtn/HydrogenAddToCartBtn.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var HydrogenAddToCartBtn = ({
   addToCartBtnText,
   addToCartCallback,
@@ -963,7 +1181,7 @@ var HydrogenAddToCartBtn = ({
   linesToAdd,
   moneyData
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: AddToCartBtn_default["rebuy-cart-button__container"], children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     import_hydrogen2.CartForm,
     {
       action: import_hydrogen2.CartForm.ACTIONS.LinesAdd,
@@ -971,29 +1189,29 @@ var HydrogenAddToCartBtn = ({
         lines: linesToAdd
       },
       route: "/cart",
-      children: (fetcher) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      children: (fetcher) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
         "button",
         {
-          className: AddToCartBtn_default.button,
+          className: AddToCartBtn_default["rebuy-cart-button"],
           disabled: disabled || fetcher.state !== "idle",
           onClick: addToCartCallback,
           type: "submit",
           children: [
             addToCartBtnText,
-            moneyData && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: " | " }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_hydrogen2.Money, { data: moneyData, withoutTrailingZeros: true })
+            moneyData && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: " | " }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_hydrogen2.Money, { data: moneyData, withoutTrailingZeros: true })
             ] })
           ]
         }
       ) })
     }
-  );
+  ) });
 };
 
 // src/components/AddToCartBtn/HydrogenReactAddToCartBtn.tsx
 var import_hydrogen_react2 = require("@shopify/hydrogen-react");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var HydrogenReactAddToCartBtn = ({
   addToCartBtnText,
   addToCartCallback,
@@ -1006,23 +1224,24 @@ var HydrogenReactAddToCartBtn = ({
     linesAdd(linesToAdd);
     addToCartCallback?.();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("button", { className: AddToCartBtn_default.button, disabled, onClick: handleAddToCart, type: "button", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("button", { className: AddToCartBtn_default["rebuy-cart-button"], disabled, onClick: handleAddToCart, type: "button", children: [
     addToCartBtnText,
-    moneyData && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: " | " }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_hydrogen_react2.Money, { data: moneyData, withoutTrailingZeros: true })
+    moneyData && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: " | " }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_hydrogen_react2.Money, { data: moneyData, withoutTrailingZeros: true })
     ] })
   ] });
 };
 
 // src/components/AddToCartBtn/AddToCartBtn.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var AddToCartBtn = ({
   addToCartBtnText,
   addToCartCallback,
   disabled,
   isHydrogenReact,
   moneyData,
+  quantity,
   selectedVariants
 }) => {
   const linesToAdd = selectedVariants.map((variant) => ({
@@ -1031,11 +1250,11 @@ var AddToCartBtn = ({
       { key: "_attribution", value: "Rebuy Product Recommendations" }
     ],
     merchandiseId: variant.id,
-    quantity: 1,
+    quantity: quantity || 1,
     selectedVariant: variant
   }));
   if (isHydrogenReact) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       HydrogenReactAddToCartBtn,
       {
         addToCartBtnText,
@@ -1046,7 +1265,7 @@ var AddToCartBtn = ({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     HydrogenAddToCartBtn,
     {
       addToCartBtnText,
@@ -1063,119 +1282,392 @@ var import_hydrogen3 = require("@shopify/hydrogen");
 
 // src/components/ProductPrice/ProductPrice.module.css
 var ProductPrice_default = {
-  priceContainer: "ProductPrice_priceContainer",
-  compareAtPrice: "ProductPrice_compareAtPrice"
+  "rebuy-product-price": "ProductPrice_rebuy-product-price",
+  "rebuy-product-price__current": "ProductPrice_rebuy-product-price__current",
+  "rebuy-product-price__current--sale": "ProductPrice_rebuy-product-price__current--sale",
+  "rebuy-product-price__compare-at": "ProductPrice_rebuy-product-price__compare-at"
 };
 
 // src/components/ProductPrice/ProductPrice.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var RebuyProductPrice = ({ selectedVariant }) => {
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var RebuyProductPrice = ({ selectedVariant, settingsDiscount }) => {
   if (!selectedVariant) return null;
   const { compareAtPriceV2: compareAtPrice, priceV2: price } = selectedVariant;
   const isDiscounted = (price2, compareAtPrice2) => Number(compareAtPrice2?.amount) > Number(price2?.amount);
-  const CompareAtPrice = ({ data: compareAtPrice2 }) => {
-    return compareAtPrice2 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_hydrogen3.Money, { as: "span", className: ProductPrice_default.compareAtPrice, data: compareAtPrice2, withoutTrailingZeros: true });
+  const currentPriceIsOnSale = compareAtPrice && isDiscounted(price, compareAtPrice);
+  const CompareAtPrice = ({ data: compareAtPriceData }) => {
+    return compareAtPriceData && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_hydrogen3.Money,
+      {
+        as: "span",
+        className: ProductPrice_default["rebuy-product-price__compare-at"],
+        data: compareAtPriceData,
+        withoutTrailingZeros: true
+      }
+    );
   };
-  return price && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: ProductPrice_default.priceContainer, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_hydrogen3.Money, { data: price, withoutTrailingZeros: true }),
-    compareAtPrice && isDiscounted(price, compareAtPrice) && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CompareAtPrice, { data: compareAtPrice })
+  return price && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: ProductPrice_default["rebuy-product-price"], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_hydrogen3.Money,
+      {
+        as: "span",
+        className: `${ProductPrice_default["rebuy-product-price__current"]} ${currentPriceIsOnSale ? ProductPrice_default["rebuy-product-price__current--sale"] : ""}`,
+        data: price,
+        withoutTrailingZeros: true
+      }
+    ),
+    currentPriceIsOnSale && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CompareAtPrice, { data: compareAtPrice })
   ] });
 };
 
+// src/components/QuantityInput/QuantityInput.tsx
+var import_react8 = require("react");
+
+// src/components/QuantityInput/QuantityInput.module.css
+var QuantityInput_default = {
+  "rebuy-quantity__container": "QuantityInput_rebuy-quantity__container",
+  "rebuy-quantity__select": "QuantityInput_rebuy-quantity__select"
+};
+
+// src/components/QuantityInput/QuantityInput.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var QuantityInput = ({
+  defaultQuantity = 1,
+  handleSelectedQuantity,
+  maxValue = 10,
+  minValue = 1
+}) => {
+  const [quantity, setQuantity] = (0, import_react8.useState)(defaultQuantity);
+  const handleChange = (event) => {
+    const newValue = parseInt(event.target.value, 10);
+    setQuantity(newValue);
+    if (handleSelectedQuantity) {
+      handleSelectedQuantity(newValue);
+    }
+  };
+  const quantityOptions = Array.from({ length: maxValue - minValue + 1 }, (_, i) => minValue + i);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: QuantityInput_default["rebuy-quantity__container"], children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    "select",
+    {
+      "aria-label": "Product quantity",
+      className: QuantityInput_default["rebuy-quantity__select"],
+      onChange: handleChange,
+      value: quantity,
+      children: quantityOptions.map((value) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value, children: value }, `quantity-${value}`))
+    }
+  ) });
+};
+
 // src/components/Title/Title.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var Title = ({ level, style, text }) => {
+var import_clsx = __toESM(require("clsx"), 1);
+
+// src/components/Title/Title.module.css
+var Title_default = {
+  "rebuy-title": "Title_rebuy-title"
+};
+
+// src/components/Title/Title.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var Title = ({ className, level, style, text }) => {
+  const combinedClassName = (0, import_clsx.default)(Title_default["rebuy-title"], className);
   switch (level) {
     case "h1":
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h1", { style, children: text });
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h1", { className: combinedClassName, style, children: text });
     default:
     case "h2":
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h2", { style, children: text });
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h2", { className: combinedClassName, style, children: text });
     case "h3":
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h3", { style, children: text });
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h3", { className: combinedClassName, style, children: text });
     case "h4":
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h4", { style, children: text });
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h4", { className: combinedClassName, style, children: text });
     case "h5":
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h5", { style, children: text });
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h5", { className: combinedClassName, style, children: text });
     case "h6":
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h6", { style, children: text });
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h6", { className: combinedClassName, style, children: text });
   }
 };
 
+// src/components/VariantSelect/VariantSelect.tsx
+var import_clsx2 = __toESM(require("clsx"), 1);
+var import_react9 = require("react");
+
 // src/components/VariantSelect/VariantSelect.module.css
 var VariantSelect_default = {
-  select: "VariantSelect_select"
+  "rebuy-variant__container": "VariantSelect_rebuy-variant__container",
+  "rebuy-variant__select": "VariantSelect_rebuy-variant__select",
+  "rebuy-variant__select-optgroup-label": "VariantSelect_rebuy-variant__select-optgroup-label",
+  "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"
 };
 
 // src/components/VariantSelect/VariantSelect.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var VariantSelect = ({ handleSelectedVariant, product }) => {
-  const getOptionsLabel = (product2) => {
-    const options = product2.variants.nodes[0].selectedOptions;
-    const optionsFromKeys = options ? Object.keys(options[0]) : [];
-    const optionsFromValues = options ? options.map((option) => option.name) : [];
-    const useValues = optionsFromKeys.every((key) => ["name", "value"].includes(key));
-    return (useValues ? optionsFromValues : optionsFromKeys).join(" / ");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var VariantSelect = ({ handleSelectedVariant, product, selectedId, style = "select" }) => {
+  const [selectedVariantId, setSelectedVariantId] = (0, import_react9.useState)(selectedId || product.variants.nodes[0]?.id);
+  (0, import_react9.useEffect)(() => {
+    if (selectedId && selectedId !== selectedVariantId) {
+      setSelectedVariantId(selectedId);
+    }
+  }, [selectedId, selectedVariantId]);
+  const getOptionsLabel = (currentProduct) => {
+    const firstVariantOptions = currentProduct.variants.nodes[0]?.selectedOptions;
+    if (!firstVariantOptions || firstVariantOptions.length === 0) {
+      return "Options";
+    }
+    return firstVariantOptions.map((option) => option.name).join(" / ");
   };
-  return product?.variants.nodes.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  const handleLocalVariantChange = (variantId) => {
+    setSelectedVariantId(variantId);
+    handleSelectedVariant(product, variantId);
+  };
+  if (!product?.variants?.nodes || product.variants.nodes.length <= 1) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: VariantSelect_default["rebuy-variant__container"], children: style === "select" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     "select",
     {
-      "aria-label": "select variant",
-      className: VariantSelect_default.select,
-      onChange: (e) => handleSelectedVariant(product, e.target.value),
-      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("optgroup", { label: getOptionsLabel(product), children: product.variants.nodes.map(({ id, title }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: id, children: title }, id + "-variant")) })
+      "aria-label": "Select variant",
+      className: VariantSelect_default["rebuy-variant__select"],
+      onChange: (e) => handleLocalVariantChange(e.target.value),
+      value: selectedVariantId,
+      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        "optgroup",
+        {
+          className: VariantSelect_default["rebuy-variant__select-optgroup-label"],
+          label: getOptionsLabel(product),
+          children: product.variants.nodes.map(({ id, title }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            "option",
+            {
+              className: VariantSelect_default["rebuy-variant__select-option"],
+              value: id,
+              children: title
+            },
+            `${id}-variant-option`
+          ))
+        }
+      )
     }
-  ) });
+  ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: VariantSelect_default["rebuy-variant__buttons"], children: product.variants.nodes.map(({ id, title }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    "button",
+    {
+      "aria-pressed": id === selectedVariantId,
+      className: (0, import_clsx2.default)(
+        VariantSelect_default["rebuy-variant__button"],
+        id === selectedVariantId && VariantSelect_default["rebuy-variant__button--selected"]
+      ),
+      onClick: () => handleLocalVariantChange(id),
+      type: "button",
+      children: title
+    },
+    `${id}-variant-button`
+  )) }) });
 };
 
 // src/components/ProductCard/ProductCard.module.css
 var ProductCard_default = {
-  container: "ProductCard_container",
-  productInfo: "ProductCard_productInfo"
+  "rebuy-product-card__container": "ProductCard_rebuy-product-card__container",
+  "rebuy-product-card": "ProductCard_rebuy-product-card",
+  "rebuy-product-card__content": "ProductCard_rebuy-product-card__content",
+  "rebuy-product-card__header": "ProductCard_rebuy-product-card__header",
+  "rebuy-product-card__info": "ProductCard_rebuy-product-card__info",
+  "rebuy-product-card__actions": "ProductCard_rebuy-product-card__actions",
+  "rebuy-product-card__media-link": "ProductCard_rebuy-product-card__media-link",
+  "rebuy-product-card__image": "ProductCard_rebuy-product-card__image",
+  "rebuy-product-card__title": "ProductCard_rebuy-product-card__title",
+  "rebuy-product-card__title-link": "ProductCard_rebuy-product-card__title-link",
+  "rebuy-product-card__actions-variant-select": "ProductCard_rebuy-product-card__actions-variant-select",
+  "rebuy-product-card__variant-select": "ProductCard_rebuy-product-card__variant-select",
+  "rebuy-product-card__actions-quantity": "ProductCard_rebuy-product-card__actions-quantity",
+  "rebuy-product-card__actions-button": "ProductCard_rebuy-product-card__actions-button",
+  "rebuy-product-card__vendor": "ProductCard_rebuy-product-card__vendor",
+  "rebuy-product-card__variant-title": "ProductCard_rebuy-product-card__variant-title",
+  "rebuy-product-card__review": "ProductCard_rebuy-product-card__review",
+  "rebuy-product-card__star-rating": "ProductCard_rebuy-product-card__star-rating",
+  "rebuy-product-card__star-rating-value": "ProductCard_rebuy-product-card__star-rating-value",
+  "rebuy-product-card__star-rating-background": "ProductCard_rebuy-product-card__star-rating-background",
+  "rebuy-product-card__star-rating-foreground": "ProductCard_rebuy-product-card__star-rating-foreground",
+  "rebuy-product-card__review-count": "ProductCard_rebuy-product-card__review-count",
+  "rebuy-product-card__review-count-parenthesis": "ProductCard_rebuy-product-card__review-count-parenthesis",
+  "rebuy-product-card__review-count-number": "ProductCard_rebuy-product-card__review-count-number",
+  "rebuy-product-card__review-count-label": "ProductCard_rebuy-product-card__review-count-label",
+  "rebuy-product-card__description": "ProductCard_rebuy-product-card__description"
 };
 
 // src/components/ProductCard/ProductCard.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var ProductCard = ({
   addToCartBtnText,
   addToCartCallback,
   isHydrogenReact,
+  isInPopup,
+  onPopupDismiss,
   product,
-  productCardTitleLevel
+  productCardTitleLevel,
+  settings = defaultProductCardSettings
 }) => {
-  const [selectedVariant, setSelectedVariant] = (0, import_react8.useState)(product.variants.nodes[0]);
-  const { image } = selectedVariant;
+  const [selectedVariant, setSelectedVariant] = (0, import_react11.useState)(product.variants.nodes[0]);
+  const [selectedQuantity, setSelectedQuantity] = (0, import_react11.useState)(settings?.quantityInput?.default_quantity || 1);
+  const displayImage = selectedVariant.image || product.featuredImage;
   const handleSelectedVariant = (product2, variant_id) => {
     const updatedVariant = product2.variants.nodes.find((variant) => variant.id === variant_id);
     if (updatedVariant) {
       setSelectedVariant(updatedVariant);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: ProductCard_default.container, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react7.Link, { to: `/products/${product.handle}`, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-        import_hydrogen4.Image,
+  const handleSelectedQuantity = (quantity) => {
+    setSelectedQuantity(quantity);
+  };
+  const handleLinkClick = () => {
+    if (isInPopup && onPopupDismiss) {
+      onPopupDismiss();
+    }
+  };
+  const showVariantTitle = settings?.productOptions?.show_variant_title && selectedVariant.title.toLowerCase() !== "default title";
+  const showReviews = product.reviews && product?.reviews?.review_count && product?.reviews?.review_count > 0;
+  const productReviewsRating = product.reviews?.star_rating;
+  const showProductDescription = settings?.productOptions?.show_product_description === "show" && product.description !== "" && product.description !== null;
+  const showVariantSelect = product?.variants.nodes.length > 1 && (settings?.productOptions?.show_variant_options === "default" || settings?.productOptions?.show_variant_options === "always");
+  const showQuantityInput = settings?.quantityInput?.enabled && settings?.quantityInput?.max_value !== null && settings?.quantityInput?.min_value !== null;
+  const cardLayout = settings?.layoutStyle || "grid";
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: ProductCard_default["rebuy-product-card__container"], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: ProductCard_default["rebuy-product-card"], "data-layout": cardLayout, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        import_react10.Link,
         {
-          alt: image?.altText ?? `Picture of ${product.title}`,
-          data: image,
-          sizes: "(max-width: 320px) 280px, (max-width: 768px) 720px, 1440px"
+          "aria-label": `View ${product.title}`,
+          className: ProductCard_default["rebuy-product-card__media-link"],
+          onClick: handleLinkClick,
+          rel: "nofollow",
+          to: `/products/${product.handle}`,
+          children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            import_hydrogen4.Image,
+            {
+              alt: displayImage?.altText ?? `Picture of ${product.title}`,
+              className: ProductCard_default["rebuy-product-card__image"],
+              data: displayImage,
+              sizes: "(max-width: 320px) 280px, (max-width: 768px) 720px, 1440px"
+            }
+          )
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: ProductCard_default.productInfo, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react7.Link, { to: `/products/${product.handle}`, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Title, { level: productCardTitleLevel, text: product.title }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(RebuyProductPrice, { selectedVariant }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(VariantSelect, { handleSelectedVariant, product })
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: ProductCard_default["rebuy-product-card__info"], children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: ProductCard_default["rebuy-product-card__content"], children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: ProductCard_default["rebuy-product-card__header"], children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: ProductCard_default["rebuy-product-card__vendor"], children: product.vendor }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              import_react10.Link,
+              {
+                "aria-label": `View ${product.title}`,
+                className: ProductCard_default["rebuy-product-card__title-link"],
+                onClick: handleLinkClick,
+                rel: "nofollow",
+                to: `/products/${product.handle}`,
+                children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  Title,
+                  {
+                    className: ProductCard_default["rebuy-product-card__title"],
+                    level: productCardTitleLevel,
+                    text: product.title
+                  }
+                )
+              }
+            ),
+            showVariantTitle && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: ProductCard_default["rebuy-product-card__variant-title"], children: selectedVariant.title })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            RebuyProductPrice,
+            {
+              selectedVariant,
+              settingsDiscount: settings?.settingsDiscount
+            }
+          ),
+          showReviews && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { "aria-label": "product star rating", className: ProductCard_default["rebuy-product-card__review"], children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: ProductCard_default["rebuy-product-card__star-rating"], children: [
+              productReviewsRating && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: ProductCard_default["rebuy-product-card__star-rating-value"], children: [
+                productReviewsRating,
+                " stars out of 5 stars"
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: ProductCard_default["rebuy-product-card__star-rating-background"] }),
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                "span",
+                {
+                  className: ProductCard_default["rebuy-product-card__star-rating-foreground"],
+                  style: productReviewsRating ? { width: productReviewsRating / 5 * 100 + "%" } : {},
+                  children: product.reviews && productReviewsRating && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                      "span",
+                      {
+                        className: ProductCard_default["rebuy-product-card__review-count-parenthesis"],
+                        children: "("
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: ProductCard_default["rebuy-product-card__review-count-number"], children: productReviewsRating.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") }),
+                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: ProductCard_default["rebuy-product-card__review-count-label"], children: "Reviews" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                      "span",
+                      {
+                        className: ProductCard_default["rebuy-product-card__review-count-parenthesis"],
+                        children: ")"
+                      }
+                    )
+                  ] })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: ProductCard_default["rebuy-product-card__review-count"], children: productReviewsRating })
+          ] }),
+          showProductDescription && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: ProductCard_default["rebuy-product-card__description"], children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { children: product.description }) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: ProductCard_default["rebuy-product-card__actions"], children: [
+          showVariantSelect && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            "div",
+            {
+              className: ProductCard_default["rebuy-product-card__actions-variant-select"],
+              "data-layout": cardLayout,
+              children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                VariantSelect,
+                {
+                  handleSelectedVariant,
+                  product,
+                  selectedId: selectedVariant.id,
+                  style: settings?.variantSelector
+                }
+              )
+            }
+          ),
+          showQuantityInput && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: ProductCard_default["rebuy-product-card__actions-quantity"], children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            QuantityInput,
+            {
+              defaultQuantity: settings?.quantityInput?.default_quantity,
+              handleSelectedQuantity,
+              maxValue: settings?.quantityInput?.max_value,
+              minValue: settings?.quantityInput?.min_value
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: ProductCard_default["rebuy-product-card__actions-button"], children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            AddToCartBtn,
+            {
+              addToCartBtnText,
+              addToCartCallback,
+              isHydrogenReact,
+              quantity: selectedQuantity,
+              selectedVariants: [selectedVariant]
+            }
+          ) })
+        ] })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-      AddToCartBtn,
+    showVariantSelect && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: ProductCard_default["rebuy-product-card__variant-select"], "data-layout": cardLayout, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      VariantSelect,
       {
-        addToCartBtnText,
-        addToCartCallback,
-        isHydrogenReact,
-        selectedVariants: [selectedVariant]
+        handleSelectedVariant,
+        product,
+        selectedId: selectedVariant.id,
+        style: settings?.variantSelector
       }
-    )
+    ) })
   ] });
 };
 
@@ -1225,7 +1717,7 @@ var RebuyCompleteTheLook_default = {
 };
 
 // src/widgets/RebuyCompleteTheLook/RebuyCompleteTheLook.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var RebuyCompleteTheLook = (props) => {
   const {
     addToCartBtnText = "Add to cart",
@@ -1239,9 +1731,9 @@ var RebuyCompleteTheLook = (props) => {
     console.log("RebuyCompleteTheLook: No products found");
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("section", { className: RebuyCompleteTheLook_default.container, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Title, { level: getTitleLevel(customTitleLevel), style: customTitleStyle, text: customTitle }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("ul", { className: RebuyCompleteTheLook_default.productGrid, children: products.map((product) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("li", { className: RebuyCompleteTheLook_default.productItem, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("section", { className: RebuyCompleteTheLook_default.container, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Title, { level: getTitleLevel(customTitleLevel), style: customTitleStyle, text: customTitle }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("ul", { className: RebuyCompleteTheLook_default.productGrid, children: products.map((product) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { className: RebuyCompleteTheLook_default.productItem, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       ProductCard,
       {
         addToCartBtnText,
@@ -1255,7 +1747,7 @@ var RebuyCompleteTheLook = (props) => {
 };
 
 // src/widgets/RebuyDynamicBundleProducts/RebuyDynamicBundleProducts.tsx
-var import_react11 = require("react");
+var import_react14 = require("react");
 
 // src/utils/convertToRebuyProduct.tsx
 var convertToRebuyProduct = (isHydrogenReact, product) => {
@@ -1481,9 +1973,9 @@ var convertToRebuyProduct = (isHydrogenReact, product) => {
 };
 
 // src/widgets/RebuyDynamicBundleProducts/BundleImages.tsx
-var import_react9 = require("@remix-run/react");
+var import_react12 = require("@remix-run/react");
 var import_hydrogen5 = require("@shopify/hydrogen");
-var import_react10 = require("react");
+var import_react13 = require("react");
 
 // src/widgets/RebuyDynamicBundleProducts/RebuyDynamicBundleProducts.module.css
 var RebuyDynamicBundleProducts_default = {
@@ -1504,12 +1996,12 @@ var RebuyDynamicBundleProducts_default = {
 };
 
 // src/widgets/RebuyDynamicBundleProducts/BundleImages.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var BundleImages = ({ products }) => {
   const selected = products.filter((product) => product.selected);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("ul", { className: RebuyDynamicBundleProducts_default.bundleImages, children: products.map((product, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("ul", { className: RebuyDynamicBundleProducts_default.bundleImages, children: products.map((product, index) => {
     const image = product.selectedVariant?.image;
-    const productImage = image ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    const productImage = image ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       import_hydrogen5.Image,
       {
         alt: image.altText || `Picture of ${product.title}`,
@@ -1524,21 +2016,21 @@ var BundleImages = ({ products }) => {
       product.title
     );
     const showDelimiter = selected[0]?.id !== product.id;
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react10.Fragment, { children: product.selected && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-      showDelimiter && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("li", { className: RebuyDynamicBundleProducts_default.bundleImageDelimiter, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: "+" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("li", { className: "flex items-center", children: product.default ? (
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react13.Fragment, { children: product.selected && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+      showDelimiter && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("li", { className: RebuyDynamicBundleProducts_default.bundleImageDelimiter, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: "+" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("li", { className: "flex items-center", children: product.default ? (
         // Already on product page
         productImage
       ) : (
         // Link to product
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react9.Link, { title: product.title, to: `/products/${product.handle}`, children: productImage })
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react12.Link, { title: product.title, to: `/products/${product.handle}`, children: productImage })
       ) })
     ] }) }, product.id + "-BundleImages-" + index);
   }) });
 };
 
 // src/widgets/RebuyDynamicBundleProducts/Select.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var Select = ({ onSelectVariant, product }) => {
   const getOptionsLabel = (product2) => {
     const options = product2.variants.nodes[0].selectedOptions;
@@ -1547,30 +2039,30 @@ var Select = ({ onSelectVariant, product }) => {
     const useValues = optionsFromKeys.every((key) => ["name", "value"].includes(key));
     return (useValues ? optionsFromValues : optionsFromKeys).join(" / ");
   };
-  return product && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return product && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     "select",
     {
       "aria-label": "select variant",
       className: RebuyDynamicBundleProducts_default.select,
       onChange: (e) => onSelectVariant(product, e.target.value),
       value: product.selectedVariant.id,
-      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("optgroup", { label: getOptionsLabel(product), children: product.variants.nodes.map(({ id, title }) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("option", { value: id, children: title }, id + "-BundleVariant")) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("optgroup", { label: getOptionsLabel(product), children: product.variants.nodes.map(({ id, title }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("option", { value: id, children: title }, id + "-BundleVariant")) })
     }
   );
 };
 
 // src/widgets/RebuyDynamicBundleProducts/BundleSelection.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var BundleSelection = ({ onSelectVariant, onToggleBundleItem, products }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("ul", { children: products.map((product, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("ul", { children: products.map((product, index) => {
     const { availableForSale } = product.selectedVariant;
     const isOutOfStock = !availableForSale;
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       "li",
       {
         className: `${RebuyDynamicBundleProducts_default.bundleItemRowContainer} ${!product.selected && RebuyDynamicBundleProducts_default.unselected}`,
-        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: RebuyDynamicBundleProducts_default.bundleItemRow, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: RebuyDynamicBundleProducts_default.bundleItemRow, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             "input",
             {
               checked: product.selected && availableForSale,
@@ -1582,14 +2074,14 @@ var BundleSelection = ({ onSelectVariant, onToggleBundleItem, products }) => {
               value: product.id
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: RebuyDynamicBundleProducts_default.bundleItemInput, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", { className: RebuyDynamicBundleProducts_default.bundleItemLabel, htmlFor: `${product.id}-toggle`, children: [
-              isOutOfStock && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("b", { children: "SOLD OUT" }),
-              product.default && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("b", { children: "This item:" }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: RebuyDynamicBundleProducts_default.bundleItemInput, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("label", { className: RebuyDynamicBundleProducts_default.bundleItemLabel, htmlFor: `${product.id}-toggle`, children: [
+              isOutOfStock && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("b", { children: "SOLD OUT" }),
+              product.default && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("b", { children: "This item:" }),
               product.title,
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(RebuyProductPrice, { selectedVariant: product.selectedVariant })
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(RebuyProductPrice, { selectedVariant: product.selectedVariant })
             ] }),
-            product.variants.nodes.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Select, { onSelectVariant, product })
+            product.variants.nodes.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Select, { onSelectVariant, product })
           ] })
         ] })
       },
@@ -1600,7 +2092,7 @@ var BundleSelection = ({ onSelectVariant, onToggleBundleItem, products }) => {
 
 // src/widgets/RebuyDynamicBundleProducts/BundlePrice.tsx
 var import_hydrogen6 = require("@shopify/hydrogen");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var BundlePrice = ({ products }) => {
   const isDisabled = products.filter((product) => product.selected).length < 1;
   const totalBundlePrice = () => {
@@ -1637,17 +2129,17 @@ var BundlePrice = ({ products }) => {
   const price = totalBundlePrice();
   const compareAtPrice = totalBundleCompareAtPrice();
   const CompareAtPrice = ({ data: compareAtPrice2 }) => {
-    return compareAtPrice2 && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_hydrogen6.Money, { as: "span", className: RebuyDynamicBundleProducts_default.compareAtPrice, data: compareAtPrice2, withoutTrailingZeros: true });
+    return compareAtPrice2 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_hydrogen6.Money, { as: "span", className: RebuyDynamicBundleProducts_default.compareAtPrice, data: compareAtPrice2, withoutTrailingZeros: true });
   };
-  return products.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "flex items-center flex-col", children: !isDisabled && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("p", { className: "flex items-center gap-2 mb-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: "Total Price:" }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_hydrogen6.Money, { as: "span", data: price, withoutTrailingZeros: true }),
-    isDiscounted(price, compareAtPrice) && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CompareAtPrice, { data: compareAtPrice })
+  return products.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "flex items-center flex-col", children: !isDisabled && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("p", { className: "flex items-center gap-2 mb-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: "Total Price:" }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_hydrogen6.Money, { as: "span", data: price, withoutTrailingZeros: true }),
+    isDiscounted(price, compareAtPrice) && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CompareAtPrice, { data: compareAtPrice })
   ] }) });
 };
 
 // src/widgets/RebuyDynamicBundleProducts/RebuyDynamicBundleProducts.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var RebuyDynamicBundleProducts = (props) => {
   const {
     addToCartBtnText = "Add to cart",
@@ -1659,8 +2151,8 @@ var RebuyDynamicBundleProducts = (props) => {
     product,
     products = []
   } = props;
-  const [bundleProducts, setBundleProducts] = (0, import_react11.useState)([]);
-  (0, import_react11.useEffect)(() => {
+  const [bundleProducts, setBundleProducts] = (0, import_react14.useState)([]);
+  (0, import_react14.useEffect)(() => {
     const mainProduct = convertToRebuyProduct(isHydrogenReact || false, product);
     const formattedProducts = products.map((product2) => {
       return {
@@ -1671,14 +2163,14 @@ var RebuyDynamicBundleProducts = (props) => {
     });
     setBundleProducts([mainProduct, ...formattedProducts]);
   }, [product, products, isHydrogenReact]);
-  const onToggleBundleItem = (0, import_react11.useCallback)(
+  const onToggleBundleItem = (0, import_react14.useCallback)(
     (product2) => {
       product2.selected = !product2.selected;
       setBundleProducts([...bundleProducts]);
     },
     [bundleProducts]
   );
-  const onSelectVariant = (0, import_react11.useCallback)(
+  const onSelectVariant = (0, import_react14.useCallback)(
     (product2, variant_id) => {
       const variant = product2.variants.nodes.find(({ id }) => id === variant_id);
       if (variant) {
@@ -1693,12 +2185,12 @@ var RebuyDynamicBundleProducts = (props) => {
     console.log("RebuyDynamicBundleProducts: No products found");
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("section", { className: RebuyDynamicBundleProducts_default.container, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Title, { level: getTitleLevel(customTitleLevel), style: customTitleStyle, text: customTitle }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: RebuyDynamicBundleProducts_default.bundleContainer, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BundleImages, { products: bundleProducts }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BundlePrice, { products: bundleProducts }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: RebuyDynamicBundleProducts_default.addCartBtnContainer, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("section", { className: RebuyDynamicBundleProducts_default.container, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Title, { level: getTitleLevel(customTitleLevel), style: customTitleStyle, text: customTitle }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: RebuyDynamicBundleProducts_default.bundleContainer, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(BundleImages, { products: bundleProducts }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(BundlePrice, { products: bundleProducts }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: RebuyDynamicBundleProducts_default.addCartBtnContainer, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         AddToCartBtn,
         {
           addToCartBtnText,
@@ -1710,7 +2202,7 @@ var RebuyDynamicBundleProducts = (props) => {
           })
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         BundleSelection,
         {
           onSelectVariant,
@@ -1724,10 +2216,10 @@ var RebuyDynamicBundleProducts = (props) => {
 
 // src/widgets/RebuyProductAddOns/RebuyProductAddOns.tsx
 var import_hydrogen_react3 = require("@shopify/hydrogen-react");
-var import_react13 = require("react");
+var import_react16 = require("react");
 
 // src/widgets/RebuyProductAddOns/RebuyProductAddOnCard.tsx
-var import_react12 = require("@remix-run/react");
+var import_react15 = require("@remix-run/react");
 var import_hydrogen7 = require("@shopify/hydrogen");
 
 // src/widgets/RebuyProductAddOns/RebuyProductAddOns.module.css
@@ -1746,7 +2238,7 @@ var RebuyProductAddOns_default = {
 };
 
 // src/widgets/RebuyProductAddOns/RebuyProductAddOnCard.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var RebuyProductAddOnCard = ({
   handleChange,
   learnMoreText,
@@ -1755,8 +2247,8 @@ var RebuyProductAddOnCard = ({
   titleLevel
 }) => {
   const { availableForSale, image } = product.selectedVariant || {};
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("label", { className: RebuyProductAddOns_default.addOnCard, htmlFor: product.id, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: RebuyProductAddOns_default.addOnCardContent, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("label", { className: RebuyProductAddOns_default.addOnCard, htmlFor: product.id, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: RebuyProductAddOns_default.addOnCardContent, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       "input",
       {
         checked: Boolean(product.selected),
@@ -1769,7 +2261,7 @@ var RebuyProductAddOnCard = ({
         value: ""
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: RebuyProductAddOns_default.addOnCardContentImage, children: image && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: RebuyProductAddOns_default.addOnCardContentImage, children: image && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       import_hydrogen7.Image,
       {
         alt: image.altText || `Picture of ${product.title}`,
@@ -1778,17 +2270,17 @@ var RebuyProductAddOnCard = ({
         width: 300
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: RebuyProductAddOns_default.addOnCardTextContent, children: [
-      !availableForSale && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: RebuyProductAddOns_default.addOnCardOutOfStock, children: outOfStockText }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Title, { level: titleLevel, text: product.title }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(RebuyProductPrice, { selectedVariant: product.selectedVariant }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react12.Link, { className: RebuyProductAddOns_default.addOnCardLearnMore, to: `/products/${product.handle}`, children: learnMoreText })
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: RebuyProductAddOns_default.addOnCardTextContent, children: [
+      !availableForSale && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: RebuyProductAddOns_default.addOnCardOutOfStock, children: outOfStockText }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Title, { level: titleLevel, text: product.title }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(RebuyProductPrice, { selectedVariant: product.selectedVariant }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react15.Link, { className: RebuyProductAddOns_default.addOnCardLearnMore, to: `/products/${product.handle}`, children: learnMoreText })
     ] })
   ] }) });
 };
 
 // src/widgets/RebuyProductAddOns/RebuyProductAddOns.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var RebuyProductAddOns = (props) => {
   const {
     addToCartCallback,
@@ -1805,10 +2297,10 @@ var RebuyProductAddOns = (props) => {
     subtotalText = "Add-ons Subtotal: ",
     withProductText = `With ${product?.title}: `
   } = props;
-  const [addedItems, setAddedItems] = (0, import_react13.useState)(products);
-  const [subtotalWithProduct, setSubtotalWithProduct] = (0, import_react13.useState)();
-  const [subtotalWithOutProduct, setSubtotalWithOutProduct] = (0, import_react13.useState)();
-  (0, import_react13.useEffect)(() => {
+  const [addedItems, setAddedItems] = (0, import_react16.useState)(products);
+  const [subtotalWithProduct, setSubtotalWithProduct] = (0, import_react16.useState)();
+  const [subtotalWithOutProduct, setSubtotalWithOutProduct] = (0, import_react16.useState)();
+  (0, import_react16.useEffect)(() => {
     let initialTotal = 0;
     let currencyCode = "USD";
     products.map((product2) => {
@@ -1838,7 +2330,7 @@ var RebuyProductAddOns = (props) => {
       setAddedItems(products);
     }
   }, [products, product, isHydrogenReact, includeMainProduct]);
-  const handleChange = (0, import_react13.useCallback)(
+  const handleChange = (0, import_react16.useCallback)(
     (event, product2) => {
       const newProducts = [...products];
       const productIndex = newProducts.findIndex((p) => p.id === product2.id);
@@ -1857,7 +2349,7 @@ var RebuyProductAddOns = (props) => {
     },
     [products]
   );
-  (0, import_react13.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     let total = 0;
     let currencyCode = "USD";
     addedItems.forEach((item) => {
@@ -1883,9 +2375,9 @@ var RebuyProductAddOns = (props) => {
     console.log("RebuyProductAddOns: No products found");
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: RebuyProductAddOns_default.container, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Title, { level: getTitleLevel(customTitleLevel), style: customTitleStyle, text: customTitle }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("ul", { className: RebuyProductAddOns_default.productAddOnsList, children: products.map((product2) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: RebuyProductAddOns_default.container, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Title, { level: getTitleLevel(customTitleLevel), style: customTitleStyle, text: customTitle }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("ul", { className: RebuyProductAddOns_default.productAddOnsList, children: products.map((product2) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       RebuyProductAddOnCard,
       {
         handleChange,
@@ -1895,16 +2387,16 @@ var RebuyProductAddOns = (props) => {
         titleLevel: getTitleLevel(customTitleLevel, true)
       }
     ) }, product2.id)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: RebuyProductAddOns_default.productAddOnsFooter, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: RebuyProductAddOns_default.moneyContainer, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: RebuyProductAddOns_default.productAddOnsFooter, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: RebuyProductAddOns_default.moneyContainer, children: [
         subtotalText,
-        subtotalWithOutProduct && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_hydrogen_react3.Money, { data: subtotalWithOutProduct, withoutTrailingZeros: true })
+        subtotalWithOutProduct && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_hydrogen_react3.Money, { data: subtotalWithOutProduct, withoutTrailingZeros: true })
       ] }),
-      includeMainProduct && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: RebuyProductAddOns_default.moneyContainer, children: [
+      includeMainProduct && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: RebuyProductAddOns_default.moneyContainer, children: [
         withProductText,
-        subtotalWithProduct && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_hydrogen_react3.Money, { data: subtotalWithProduct, withoutTrailingZeros: true })
+        subtotalWithProduct && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_hydrogen_react3.Money, { data: subtotalWithProduct, withoutTrailingZeros: true })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: RebuyProductAddOns_default.addCartBtnContainer, children: includeMainProduct ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: RebuyProductAddOns_default.addCartBtnContainer, children: includeMainProduct ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         AddToCartBtn,
         {
           addToCartBtnText,
@@ -1914,7 +2406,7 @@ var RebuyProductAddOns = (props) => {
           moneyData: subtotalWithProduct,
           selectedVariants: addedItems.map((item) => item.selectedVariant)
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         AddToCartBtn,
         {
           addToCartBtnText,
@@ -1936,7 +2428,7 @@ var RebuyProductRecommendations_default = {
 };
 
 // src/widgets/RebuyProductRecommendations/RebuyProductRecommendations.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var RebuyProductRecommendations = (props) => {
   const {
     addToCartBtnText = "Add to cart",
@@ -1950,9 +2442,9 @@ var RebuyProductRecommendations = (props) => {
     console.log("RebuyProductRecommendations: No products found");
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("section", { className: RebuyProductRecommendations_default.container, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Title, { level: getTitleLevel(customTitleLevel), style: customTitleStyle, text: customTitle }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("ul", { className: RebuyProductRecommendations_default.productGrid, children: products.map((product) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("li", { className: RebuyProductRecommendations_default.productItem, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("section", { className: RebuyProductRecommendations_default.container, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Title, { level: getTitleLevel(customTitleLevel), style: customTitleStyle, text: customTitle }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("ul", { className: RebuyProductRecommendations_default.productGrid, children: products.map((product) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("li", { className: RebuyProductRecommendations_default.productItem, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       ProductCard,
       {
         addToCartBtnText,
@@ -1964,4 +2456,756 @@ var RebuyProductRecommendations = (props) => {
     ) }, product.id)) })
   ] });
 };
+
+// src/widgets/RebuyWidget/RebuyWidget.tsx
+var import_rebuy3 = require("@rebuy/rebuy");
+var Utilities5 = __toESM(require("@rebuy/rebuy/utilities"), 1);
+var import_hydrogen8 = require("@shopify/hydrogen");
+var import_react21 = require("react");
+
+// src/assets/Close.tsx
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var Close = () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("svg", { height: "1em", viewBox: "0 0 352 512", width: "1em", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { d: "M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.19 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.19 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z" }) });
+};
+
+// src/hooks/useBreakpoint.ts
+var import_react17 = require("react");
+var useBreakpoint = (settings) => {
+  const [breakpoint, setBreakpoint] = (0, import_react17.useState)("medium");
+  (0, import_react17.useEffect)(() => {
+    if (!settings?.breakpoints) return;
+    const handleResize = () => {
+      const width = window.innerWidth;
+      if (width <= settings.breakpoints.medium.max) {
+        if (width >= settings.breakpoints.medium.min) {
+          setBreakpoint("medium");
+        } else {
+          setBreakpoint("small");
+        }
+      } else {
+        setBreakpoint("large");
+      }
+    };
+    handleResize();
+    const debounceDelay = 150;
+    let timeoutId;
+    const debouncedHandleResize = () => {
+      clearTimeout(timeoutId);
+      timeoutId = setTimeout(handleResize, debounceDelay);
+    };
+    window.addEventListener("resize", debouncedHandleResize);
+    return () => {
+      window.removeEventListener("resize", debouncedHandleResize);
+      clearTimeout(timeoutId);
+    };
+  }, [settings]);
+  return breakpoint;
+};
+
+// src/hooks/usePopupTrigger.tsx
+var import_react18 = require("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;
+  const showPopupWithDelay = (0, import_react18.useCallback)(() => {
+    if (!settings || settings.display_type !== "popup") return;
+    setTimeout(() => {
+      setShowPopup(true);
+      setPopupShownOnce(true);
+    }, delayInMs);
+  }, [delayInMs, setShowPopup, setPopupShownOnce, settings]);
+  (0, import_react18.useEffect)(() => {
+    if (!settings || settings.display_type !== "popup" || popupTrigger !== "load" || popupShownOnce) return;
+    const timer = setTimeout(() => {
+      setShowPopup(true);
+      setPopupShownOnce(true);
+    }, delayInMs);
+    return () => clearTimeout(timer);
+  }, [popupTrigger, popupShownOnce, delayInMs, setShowPopup, setPopupShownOnce, settings]);
+  (0, import_react18.useEffect)(() => {
+    if (!settings || settings.display_type !== "popup" || popupTrigger !== "add_to_cart" || !popupTriggerId) return;
+    const selector = `#${popupTriggerId}`;
+    const handleCartAdd = () => {
+      if (!showPopup) {
+        showPopupWithDelay();
+      }
+    };
+    const observer = new MutationObserver(() => {
+      const elements2 = document.querySelectorAll(selector);
+      if (elements2.length) {
+        elements2.forEach((el) => {
+          el.addEventListener("click", handleCartAdd);
+        });
+        observer.disconnect();
+      }
+    });
+    const elements = document.querySelectorAll(selector);
+    if (elements.length) {
+      elements.forEach((el) => {
+        el.addEventListener("click", handleCartAdd);
+      });
+    } else {
+      observer.observe(document.body, { childList: true, subtree: true });
+    }
+    return () => {
+      observer.disconnect();
+      document.querySelectorAll(selector).forEach((el) => {
+        el.removeEventListener("click", handleCartAdd);
+      });
+    };
+  }, [popupTrigger, popupTriggerId, showPopup, showPopupWithDelay, settings]);
+  (0, import_react18.useEffect)(() => {
+    if (!settings || settings.display_type !== "popup" || popupTrigger !== "submit") return;
+    const selector = "form";
+    const handleSubmit = () => {
+      showPopupWithDelay();
+    };
+    const forms = document.querySelectorAll(selector);
+    forms.forEach((form) => {
+      form.addEventListener("submit", handleSubmit);
+    });
+    return () => {
+      forms.forEach((form) => {
+        form.removeEventListener("submit", handleSubmit);
+      });
+    };
+  }, [popupTrigger, showPopupWithDelay, settings]);
+  (0, import_react18.useEffect)(() => {
+    if (!settings || settings.display_type !== "popup" || popupTrigger !== "exit") return;
+    const handleExitIntent = (e) => {
+      if (e.clientY <= 0 && !popupShownOnce) {
+        showPopupWithDelay();
+      }
+    };
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === "hidden" && !popupShownOnce) {
+        const shouldShowOnFocus = true;
+        localStorage.setItem(`rebuy-popup-pending-${widgetId}`, shouldShowOnFocus.toString());
+      } else if (document.visibilityState === "visible") {
+        const pendingPopup = localStorage.getItem(`rebuy-popup-pending-${widgetId}`);
+        if (pendingPopup === "true" && !popupShownOnce) {
+          showPopupWithDelay();
+          localStorage.removeItem(`rebuy-popup-pending-${widgetId}`);
+        }
+      }
+    };
+    document.addEventListener("mouseleave", handleExitIntent);
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+    if (document.visibilityState === "visible") {
+      const pendingPopup = localStorage.getItem(`rebuy-popup-pending-${widgetId}`);
+      if (pendingPopup === "true" && !popupShownOnce) {
+        showPopupWithDelay();
+        localStorage.removeItem(`rebuy-popup-pending-${widgetId}`);
+      }
+    }
+    return () => {
+      document.removeEventListener("mouseleave", handleExitIntent);
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+    };
+  }, [popupTrigger, popupShownOnce, showPopupWithDelay, widgetId, settings]);
+};
+
+// src/components/ProductCarousel/ProductCarousel.tsx
+var import_react19 = require("react");
+
+// src/components/ProductCarousel/ProductCarousel.module.css
+var ProductCarousel_default = {
+  "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"
+};
+
+// src/components/ProductCarousel/ProductCarousel.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var ProductCarousel = ({
+  addToCartBtnText,
+  addToCartCallback,
+  columns,
+  isHydrogenReact,
+  productCardTitleLevel,
+  products,
+  settings,
+  showPagination = true
+}) => {
+  const [currentSlide, setCurrentSlide] = (0, import_react19.useState)(0);
+  const [totalSlides, setTotalSlides] = (0, import_react19.useState)(0);
+  const [repeatedProducts, setRepeatedProducts] = (0, import_react19.useState)([]);
+  (0, import_react19.useEffect)(() => {
+    if (products.length === 0) {
+      setRepeatedProducts([]);
+      return;
+    }
+    const productsNeeded = Math.ceil(products.length / columns) * columns;
+    let repeated = [...products];
+    while (repeated.length < productsNeeded) {
+      const remaining = productsNeeded - repeated.length;
+      repeated = [...repeated, ...products.slice(0, remaining)];
+    }
+    setRepeatedProducts(repeated);
+  }, [products, columns]);
+  (0, import_react19.useEffect)(() => {
+    if (repeatedProducts.length && columns) {
+      setTotalSlides(Math.ceil(repeatedProducts.length / columns));
+    }
+  }, [repeatedProducts.length, columns]);
+  const nextSlide = () => {
+    setCurrentSlide((prev) => (prev + 1) % totalSlides);
+  };
+  const prevSlide = () => {
+    setCurrentSlide((prev) => (prev - 1 + totalSlides) % totalSlides);
+  };
+  const goToSlide = (slideIndex) => {
+    setCurrentSlide(slideIndex);
+  };
+  const slides = [];
+  for (let i = 0; i < repeatedProducts.length; i += columns) {
+    slides.push(repeatedProducts.slice(i, i + columns));
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: ProductCarousel_default["rebuy-carousel"], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      "div",
+      {
+        className: ProductCarousel_default["rebuy-carousel__container"],
+        style: { transform: `translateX(-${currentSlide * 100}%)` },
+        children: slides.map((slideProducts, index) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: ProductCarousel_default["rebuy-carousel__slide"], children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: ProductCarousel_default["rebuy-carousel__grid"], "data-columns": columns, children: slideProducts.map((product, productIndex) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          ProductCard,
+          {
+            addToCartBtnText,
+            addToCartCallback,
+            isHydrogenReact,
+            product,
+            productCardTitleLevel,
+            settings
+          },
+          `${product.id}-${index}-${productIndex}`
+        )) }) }, index))
+      }
+    ),
+    totalSlides > 1 && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: ProductCarousel_default["rebuy-carousel__controls"], children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { className: ProductCarousel_default["rebuy-carousel__prev"], onClick: prevSlide, type: "button", children: "\u2190" }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { className: ProductCarousel_default["rebuy-carousel__next"], onClick: nextSlide, type: "button", children: "\u2192" })
+    ] }),
+    showPagination && totalSlides > 1 && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: ProductCarousel_default["rebuy-carousel__pagination"], children: Array.from({ length: totalSlides }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      "button",
+      {
+        className: ProductCarousel_default["rebuy-carousel__dot"],
+        "data-active": index === currentSlide ? "true" : "false",
+        onClick: () => goToSlide(index),
+        type: "button"
+      },
+      index
+    )) })
+  ] });
+};
+
+// src/components/Timer/Timer.tsx
+var import_react20 = require("react");
+
+// src/components/Timer/Timer.module.css
+var Timer_default = {
+  "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",
+  pulse: "Timer_pulse",
+  "rebuy-timer__minutes": "Timer_rebuy-timer__minutes",
+  "rebuy-timer__seconds": "Timer_rebuy-timer__seconds",
+  "rebuy-timer__separator": "Timer_rebuy-timer__separator"
+};
+
+// src/components/Timer/Timer.tsx
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var Timer = ({ action, durationMinutes, durationSeconds, isPopup = false, onDismiss, title }) => {
+  const initialTotalSeconds = (durationMinutes || 0) * 60 + (durationSeconds || 0);
+  const [totalSeconds, setTotalSeconds] = (0, import_react20.useState)(initialTotalSeconds);
+  const [timerActive, setTimerActive] = (0, import_react20.useState)(true);
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  const formattedMinutes = String(minutes).padStart(2, "0");
+  const formattedSeconds = String(seconds).padStart(2, "0");
+  const handleTimerEnd = (0, import_react20.useCallback)(() => {
+    setTimerActive(false);
+    switch (action) {
+      case "dismiss":
+        if (isPopup && onDismiss) {
+          onDismiss();
+        }
+        break;
+      case "checkout":
+        window.location.href = "/checkout";
+        break;
+      case "cart":
+        window.location.href = "/cart";
+        break;
+      case "stop":
+      default:
+        break;
+    }
+  }, [action, isPopup, onDismiss]);
+  (0, import_react20.useEffect)(() => {
+    if (!timerActive) return;
+    const interval = setInterval(() => {
+      setTotalSeconds((prevSeconds) => {
+        if (prevSeconds <= 0) {
+          clearInterval(interval);
+          handleTimerEnd();
+          return 0;
+        }
+        return prevSeconds - 1;
+      });
+    }, 1e3);
+    return () => clearInterval(interval);
+  }, [timerActive, handleTimerEnd]);
+  const isUrgent = totalSeconds < 10;
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: Timer_default["rebuy-timer__container"], children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("p", { className: Timer_default["rebuy-timer__text"], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: Timer_default["rebuy-timer__title"], children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+      "span",
+      {
+        className: `${Timer_default["rebuy-timer__display"]} ${isUrgent ? Timer_default["rebuy-timer__display--urgent"] : ""}`,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: Timer_default["rebuy-timer__minutes"], children: formattedMinutes }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: Timer_default["rebuy-timer__separator"], children: ":" }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: Timer_default["rebuy-timer__seconds"], children: formattedSeconds })
+        ]
+      }
+    )
+  ] }) });
+};
+
+// src/widgets/RebuyWidget/RebuyWidget.module.css
+var RebuyWidget_default = {
+  "rebuy-widget__container": "RebuyWidget_rebuy-widget__container",
+  "rebuy-widget__popup-overlay": "RebuyWidget_rebuy-widget__popup-overlay",
+  "rebuy-widget__popup-content": "RebuyWidget_rebuy-widget__popup-content",
+  "rebuy-widget__content": "RebuyWidget_rebuy-widget__content",
+  "rebuy-widget__inner-content": "RebuyWidget_rebuy-widget__inner-content",
+  "rebuy-widget__description": "RebuyWidget_rebuy-widget__description",
+  "rebuy-widget__modal-close": "RebuyWidget_rebuy-widget__modal-close",
+  "rebuy-widget__product-grid": "RebuyWidget_rebuy-widget__product-grid"
+};
+
+// src/widgets/RebuyWidget/WidgetContent.tsx
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var WidgetContent = ({
+  addToCartCallback,
+  customTitleLevel,
+  isHydrogenReact,
+  isInPopup,
+  onDismiss,
+  products,
+  settings
+}) => {
+  const currentBreakpoint = useBreakpoint(settings);
+  const hasTimer = settings && settings.timer.enabled && settings.language.timer_title !== "" && (settings.timer.duration_minutes !== null || settings.timer.duration_seconds !== null);
+  const hasSuperTitle = settings?.language.super_title !== "";
+  const hasPrimaryTitle = settings?.language.title !== "";
+  const hasDescription = settings?.language.description !== "";
+  const layoutSettings = settings?.layout?.[currentBreakpoint];
+  const isCarousel = layoutSettings?.carousel || false;
+  const columns = layoutSettings?.columns || 1;
+  const showPagination = layoutSettings?.show_paginations || false;
+  const productCardSettings = {
+    layoutStyle: layoutSettings?.style,
+    productOptions: settings?.product_options,
+    quantityInput: settings?.quantity_inputs,
+    settingsDiscount: settings?.discount,
+    variantSelector: settings?.view_options.variant_selector
+  };
+  const productCardTitleLevel = hasSuperTitle ? getTitleLevel(getTitleLevel(customTitleLevel, true), true) : getTitleLevel(customTitleLevel, true);
+  const renderProducts = () => {
+    if (!products || products.length === 0) {
+      return null;
+    }
+    if (isCarousel) {
+      return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        ProductCarousel,
+        {
+          addToCartBtnText: settings?.language.add_to_cart,
+          addToCartCallback,
+          columns,
+          isHydrogenReact,
+          productCardTitleLevel,
+          products,
+          settings: productCardSettings,
+          showPagination
+        }
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: RebuyWidget_default["rebuy-widget__product-grid"], "data-columns": columns, role: "list", tabIndex: 0, children: products.map((product) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      ProductCard,
+      {
+        addToCartBtnText: settings?.language.add_to_cart,
+        addToCartCallback,
+        isHydrogenReact,
+        isInPopup,
+        onPopupDismiss: onDismiss,
+        product,
+        productCardTitleLevel,
+        settings: productCardSettings
+      }
+    ) }, product.id)) });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: RebuyWidget_default["rebuy-widget__inner-content"], children: [
+    hasTimer && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      Timer,
+      {
+        action: settings?.timer.action,
+        durationMinutes: settings?.timer.duration_minutes,
+        durationSeconds: settings?.timer.duration_seconds,
+        isPopup: settings?.display_type === "popup",
+        onDismiss,
+        title: settings?.language.timer_title
+      }
+    ),
+    hasSuperTitle && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      Title,
+      {
+        level: getTitleLevel(customTitleLevel),
+        style: { marginBottom: "0", textAlign: "center" },
+        text: settings.language.super_title
+      }
+    ),
+    hasPrimaryTitle && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      Title,
+      {
+        level: getTitleLevel(customTitleLevel, hasSuperTitle ? true : false),
+        style: { textAlign: "center" },
+        text: settings.language.title
+      }
+    ),
+    hasDescription && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: RebuyWidget_default["rebuy-widget__description"], children: settings.language.description }),
+    renderProducts()
+  ] });
+};
+
+// src/widgets/RebuyWidget/RebuyWidget.tsx
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var RebuyWidget = (props) => {
+  const {
+    addToCartCallback,
+    customTitleLevel = "h2",
+    isHydrogenReact,
+    popupTriggerId,
+    product,
+    productId,
+    variant,
+    variantId,
+    widgetId
+  } = props;
+  const { apiKey: apiKeyFromConfig, loadingStatus: configLoadingStatus, rebuyConfig } = useRebuyConfig();
+  const [settings, setSettings] = (0, import_react21.useState)(null);
+  const [loadingSettings, setLoadingSettings] = (0, import_react21.useState)(true);
+  const [error, setError] = (0, import_react21.useState)(null);
+  const [showPopup, setShowPopup] = (0, import_react21.useState)(false);
+  const [popupShownOnce, setPopupShownOnce] = (0, import_react21.useState)(false);
+  const popupRef = (0, import_react21.useRef)(null);
+  const [Rebuy, setRebuy] = (0, import_react21.useState)(null);
+  const rebuyGeneralContext = (0, import_react21.useContext)(RebuyContext);
+  const generalContextParams = rebuyGeneralContext?.contextParameters;
+  const mainCacheKey = rebuyConfig?.shop?.cache_key;
+  const generalContextCacheKey = generalContextParams?.cacheKey;
+  const cacheKeyToUse = mainCacheKey || generalContextCacheKey || "";
+  const [initialized, setInitialized] = (0, import_react21.useState)(false);
+  const shopifyProductId = product?.id ?? productId ?? null;
+  const shopifyVariantId = variant?.id ?? variantId ?? null;
+  const [products, setProducts] = (0, import_react21.useState)([]);
+  const currentBreakpoint = useBreakpoint(settings);
+  const shouldHideWidget = settings?.layout?.[currentBreakpoint]?.style === "none";
+  usePopupTrigger(settings, popupTriggerId, widgetId, popupShownOnce, showPopup, setShowPopup, setPopupShownOnce);
+  (0, import_react21.useEffect)(() => {
+    if (!Rebuy && apiKeyFromConfig && configLoadingStatus === "success") {
+      const client = new import_rebuy3.RebuyClient(apiKeyFromConfig);
+      if (generalContextParams) {
+        client.setContextParameters(generalContextParams);
+      }
+      setRebuy(client);
+      setInitialized(true);
+    }
+  }, [Rebuy, apiKeyFromConfig, configLoadingStatus, generalContextParams]);
+  (0, import_react21.useEffect)(() => {
+    if (!Rebuy || !generalContextParams) return;
+    Rebuy.setContextParameters(generalContextParams);
+  }, [Rebuy, generalContextParams]);
+  (0, import_react21.useEffect)(() => {
+    if (configLoadingStatus === "loading") {
+      return;
+    }
+    if (!widgetId || !Rebuy || configLoadingStatus !== "success") {
+      if (!widgetId && !loadingSettings && configLoadingStatus === "idle") {
+        setError("Widget ID is missing.");
+      } else if (!loadingSettings && configLoadingStatus === "error") {
+        setError("Rebuy configuration failed to load.");
+      } else if (!loadingSettings && apiKeyFromConfig && !Rebuy) {
+        setError("Rebuy client not initialized.");
+      } else if (!apiKeyFromConfig && !loadingSettings && configLoadingStatus === "success") {
+        setError("Rebuy API Key is missing.");
+      }
+      if (!loadingSettings) setLoadingSettings(false);
+      return;
+    }
+    const fetchSettings = async () => {
+      setLoadingSettings(true);
+      setError(null);
+      try {
+        const settingsParams = { id: widgetId };
+        if (cacheKeyToUse) {
+          settingsParams.cache_key = cacheKeyToUse;
+        }
+        const settingsResponse = await Rebuy.getShieldedAsset("/api/v1/widgets/settings", settingsParams);
+        const fetchedWidgetSettings = settingsResponse?.data;
+        if (!fetchedWidgetSettings || typeof fetchedWidgetSettings.endpoint !== "string" || fetchedWidgetSettings.endpoint.trim() === "") {
+          throw new Error("Received invalid settings data: endpoint is missing or invalid.");
+        }
+        setSettings({
+          ...fetchedWidgetSettings,
+          hide_quantity_selector: fetchedWidgetSettings.hide_quantity_selector ?? false
+        });
+      } catch (e) {
+        console.error(`[RebuyCrossSell] Error fetching widget settings for ID ${widgetId}:`, e);
+        setError(e instanceof Error ? e.message : "Failed to load widget configuration.");
+        setSettings(null);
+      } finally {
+        setLoadingSettings(false);
+      }
+    };
+    fetchSettings();
+  }, [widgetId, Rebuy, configLoadingStatus, apiKeyFromConfig, cacheKeyToUse]);
+  const request = (0, import_react21.useMemo)(() => {
+    const request2 = {
+      endpoint: settings?.endpoint || "/api/v1/products/recommended",
+      params: {}
+      // Keeping this object generic to allow for custom endpoints
+    };
+    if (shopifyProductId) {
+      request2.params.shopify_product_ids = Utilities5.getIdFromGraphUrl(shopifyProductId, "Product");
+    }
+    if (shopifyVariantId) {
+      request2.params.shopify_variant_ids = Utilities5.getIdFromGraphUrl(shopifyVariantId, "ProductVariant");
+    }
+    if (settings?.limit) {
+      request2.params.limit = settings.limit;
+    }
+    return request2;
+  }, [settings, shopifyProductId, shopifyVariantId]);
+  (0, import_react21.useEffect)(() => {
+    let isMounted = true;
+    if (!Rebuy || !initialized || !settings || configLoadingStatus !== "success") return;
+    const fetchData = async () => {
+      try {
+        const params = { ...request.params };
+        if (cacheKeyToUse) {
+          params.cache_key = cacheKeyToUse;
+        }
+        params.uuid = crypto.randomUUID?.() || Math.random().toString(36).substring(2);
+        if (apiKeyFromConfig) {
+          params.key = apiKeyFromConfig;
+        }
+        let endpointToUse = request.endpoint;
+        if (endpointToUse && endpointToUse.startsWith("/") && !endpointToUse.startsWith("/api/v1/")) {
+          if (endpointToUse.startsWith("/custom") || endpointToUse.startsWith("/rules")) {
+            endpointToUse = `/api/v1${endpointToUse}`;
+          }
+        }
+        const { data } = await Rebuy.getStorefrontData(endpointToUse, params);
+        if (isMounted) {
+          setProducts(
+            Array.isArray(data) ? data.map((product2) => ({
+              ...product2,
+              variants: {
+                nodes: product2.variants ? (0, import_hydrogen8.flattenConnection)(product2.variants) : []
+              }
+            })) : []
+          );
+        }
+      } catch (e) {
+        console.error(`Error fetching products for widget ID ${widgetId}:`, e);
+        if (isMounted) {
+          setProducts([]);
+          setError(e instanceof Error ? e.message : "Failed to load products.");
+        }
+      }
+    };
+    fetchData();
+    return () => {
+      isMounted = false;
+    };
+  }, [
+    Rebuy,
+    initialized,
+    request,
+    generalContextParams,
+    widgetId,
+    settings,
+    configLoadingStatus,
+    apiKeyFromConfig,
+    cacheKeyToUse
+  ]);
+  (0, import_react21.useEffect)(() => {
+    if (!showPopup) return;
+    const handleClickOutside = (event) => {
+      if (popupRef.current && !popupRef.current.contains(event.target)) {
+        setShowPopup(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [showPopup]);
+  const closePopup = () => {
+    setShowPopup(false);
+  };
+  if (configLoadingStatus === "loading") {
+    return null;
+  }
+  if (configLoadingStatus === "error") {
+    console.error("Rebuy configuration failed to load");
+    return null;
+  }
+  if (products?.length === 0 && settings && !loadingSettings) {
+    console.log("No products to render for widgetId:", widgetId);
+    return null;
+  }
+  if (error) {
+    console.error("Error:", error);
+    return null;
+  }
+  if (settings && !loadingSettings && shouldHideWidget) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_jsx_runtime25.Fragment, { children: products && settings && !loadingSettings && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: `${RebuyWidget_default["rebuy-widget__container"]}`, id: `rebuy-widget-${widgetId}`, children: settings?.display_type === "popup" && (settings.popup_trigger !== "add_to_cart" || settings.popup_trigger === "add_to_cart" && popupTriggerId) ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { children: showPopup && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: RebuyWidget_default["rebuy-widget__popup-overlay"], children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: RebuyWidget_default["rebuy-widget__popup-content"], ref: popupRef, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: RebuyWidget_default["rebuy-widget__content"], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      "button",
+      {
+        "aria-label": "close modal",
+        className: RebuyWidget_default["rebuy-widget__modal-close"],
+        onClick: closePopup,
+        children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Close, {})
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      WidgetContent,
+      {
+        addToCartCallback: () => {
+          addToCartCallback?.();
+          setTimeout(() => {
+            closePopup();
+          }, 0);
+        },
+        customTitleLevel,
+        isHydrogenReact,
+        isInPopup: settings?.display_type === "popup",
+        onDismiss: closePopup,
+        products,
+        settings
+      }
+    )
+  ] }) }) }) }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: RebuyWidget_default["rebuy-widget__content"], children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    WidgetContent,
+    {
+      addToCartCallback,
+      customTitleLevel,
+      isHydrogenReact,
+      isInPopup: settings?.display_type === "popup",
+      products,
+      settings
+    }
+  ) }) }) });
+};
+
+// src/hooks/useRebuyTheme.ts
+var import_react22 = require("react");
+
+// src/constants/api.ts
+var REBUY_THEME_STYLES_BASE_URL = "https://rebuyengine.com/api/v1/theme-styles";
+
+// src/hooks/useRebuyTheme.ts
+var useRebuyTheme = (options = {}) => {
+  const { apiKey: contextApiKey, loadingStatus: configLoadingStatus, rebuyConfig } = useRebuyConfig();
+  const linkObject = (0, import_react22.useMemo)(() => {
+    if (configLoadingStatus === "loading" && !options.overrideApiKey) {
+      return [];
+    }
+    if (configLoadingStatus === "error" && !options.overrideApiKey && !contextApiKey) {
+      console.warn(
+        "[useRebuyTheme] Rebuy config failed to load and no overrideApiKey provided. Cannot generate theme styles link."
+      );
+      return [];
+    }
+    const effectiveApiKey = options.overrideApiKey || contextApiKey;
+    if (!effectiveApiKey) {
+      if (configLoadingStatus === "success" || options.overrideApiKey) {
+        console.warn(
+          "[useRebuyTheme] API key is missing. Provide it via RebuyConfigProvider or options.overrideApiKey. Stylesheet will not be loaded."
+        );
+      }
+      return [];
+    }
+    const stylesheetUrl = `${REBUY_THEME_STYLES_BASE_URL}?key=${effectiveApiKey}`;
+    return [{ href: stylesheetUrl, rel: "stylesheet" }];
+  }, [rebuyConfig, contextApiKey, configLoadingStatus, options.overrideApiKey]);
+  return linkObject;
+};
+
+// src/utils/csp.ts
+var REBUY_STYLE_SRC_DOMAIN = "https://rebuyengine.com";
+var updateRebuyCsp = (existing, options = {}) => {
+  const {
+    styleSrc = true
+    /* , connectSrc = false */
+  } = options;
+  let currentCspString;
+  const isHeadersObject = existing instanceof Headers;
+  if (isHeadersObject) {
+    currentCspString = existing.get("Content-Security-Policy") || "";
+  } else {
+    currentCspString = existing;
+  }
+  const cspParts = currentCspString.split(";").map((part) => part.trim()).filter((part) => part);
+  const updateDirective = (directiveName, domainToAdd) => {
+    const directiveIndex = cspParts.findIndex((part) => part.toLowerCase().startsWith(directiveName.toLowerCase()));
+    if (directiveIndex !== -1) {
+      const currentDirective = cspParts[directiveIndex];
+      const values = currentDirective.substring(directiveName.length).trim().split(" ");
+      if (!values.includes(domainToAdd)) {
+        values.push(domainToAdd);
+      }
+      cspParts[directiveIndex] = `${directiveName} ${values.join(" ")}`;
+    } else {
+      cspParts.push(`${directiveName} ${domainToAdd}`);
+    }
+  };
+  if (styleSrc) {
+    updateDirective("style-src", REBUY_STYLE_SRC_DOMAIN);
+    if (cspParts.some((part) => part.toLowerCase().startsWith("style-src-elem"))) {
+      updateDirective("style-src-elem", REBUY_STYLE_SRC_DOMAIN);
+    }
+  }
+  const newCspString = cspParts.join("; ");
+  if (isHeadersObject) {
+    existing.set("Content-Security-Policy", newCspString);
+    return existing;
+  }
+  return newCspString;
+};
+
+// src/utils/theme.ts
+var getRebuyThemeStylesLink = (options) => {
+  const { apiKey } = options;
+  if (!apiKey) {
+    console.warn("[getRebuyThemeStylesLink] API key is missing. Stylesheet link will not be generated.");
+    return [];
+  }
+  const stylesheetUrl = `${REBUY_THEME_STYLES_BASE_URL}?key=${apiKey}`;
+  return [{ href: stylesheetUrl, rel: "stylesheet" }];
+};
 //# sourceMappingURL=index.js.map