@superlogic/spree-pay 0.1.15 → 0.1.17

package/build/index.cjs

@@ -38,8 +38,8 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/SpreePay.tsx
-var import_react10 = require("react");
-var import_nice_modal_react6 = __toESM(require("@ebay/nice-modal-react"), 1);
+var import_react16 = require("react");
+var import_nice_modal_react7 = __toESM(require("@ebay/nice-modal-react"), 1);
 var import_swr4 = require("swr");
 
 // src/context/SpreePayActionsContext.tsx
@@ -123,6 +123,84 @@ var useSpreePayRegister = () => {
   return { register: ctx.register };
 };
 
+// src/context/StaticConfigContext.tsx
+var import_react2 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var CONFIG = {
+  dev: {
+    bookit: {
+      slapiUrl: "https://slapi.dev.superlogic.com",
+      keyklockUrl: "https://auth.dev.join.bookit.com",
+      keyklockClientId: "oneof-next",
+      pointsConversionRatio: 100,
+      pointsTitle: "AIR SP"
+    },
+    moca: {
+      slapiUrl: "https://slapi.dev.air.shop",
+      keyklockUrl: "https://login.dev.air.shop",
+      keyklockClientId: "oneof-next",
+      pointsConversionRatio: 100,
+      pointsTitle: "AIR SP"
+    }
+  },
+  stg: {
+    bookit: {
+      slapiUrl: "https://slapi.stg.superlogic.com",
+      keyklockUrl: "https://auth.stg.join.bookit.com",
+      keyklockClientId: "oneof-next",
+      pointsConversionRatio: 100,
+      pointsTitle: "AIR SP"
+    },
+    moca: {
+      slapiUrl: "https://slapi.stg.air.shop",
+      keyklockUrl: "https://login.stg.air.shop",
+      keyklockClientId: "oneof-next",
+      pointsConversionRatio: 100,
+      pointsTitle: "AIR SP"
+    }
+  },
+  prod: {
+    bookit: {
+      slapiUrl: "https://slapi.superlogic.com",
+      keyklockUrl: "https://auth.join.bookit.com",
+      keyklockClientId: "oneof-next",
+      pointsConversionRatio: 100,
+      pointsTitle: "AIR SP"
+    },
+    moca: {
+      slapiUrl: "https://slapi.air.shop",
+      keyklockUrl: "https://login.air.shop",
+      keyklockClientId: "oneof-next",
+      pointsConversionRatio: 100,
+      pointsTitle: "AIR SP"
+    }
+  }
+};
+var StaticConfigContext = (0, import_react2.createContext)(null);
+var StaticConfigProvider = ({ children, props }) => {
+  const { env } = useSpreePayEnv();
+  const [appProps, setAppProps] = (0, import_react2.useState)(props);
+  (0, import_react2.useEffect)(() => {
+    setAppProps(props);
+  }, [props]);
+  const staticConfig = (0, import_react2.useMemo)(() => {
+    return CONFIG[env.environment][env.tenantId];
+  }, [env.environment, env.tenantId]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StaticConfigContext.Provider, { value: { staticConfig, appProps }, children });
+};
+var useStaticConfig = () => {
+  const ctx = (0, import_react2.useContext)(StaticConfigContext);
+  if (!ctx) throw new Error("useStaticConfig must be used within StaticConfigProvider");
+  return ctx;
+};
+
+// src/hooks/useSpreePayConfig.ts
+var import_swr = __toESM(require("swr"), 1);
+var useSpreePayConfig = () => {
+  const { data, isLoading } = (0, import_swr.default)("/v1/tenants/configs/spree-pay");
+  return { spreePayConfig: data, configIsLoading: isLoading };
+};
+
 // src/lib/utils.ts
 var import_clsx = require("clsx");
 var import_tailwind_merge = require("tailwind-merge");
@@ -131,7 +209,7 @@ function cn(...inputs) {
 }
 
 // src/ui/spinner.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var Spinner = (props) => {
   const { size = "md", className } = props;
   const sizeClasses = {
@@ -141,7 +219,7 @@ var Spinner = (props) => {
     lg: "size-12",
     xl: "size-16"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "svg",
     {
       className: cn(`${sizeClasses[size]} animate-spin text-gray-300`, className),
@@ -151,7 +229,7 @@ var Spinner = (props) => {
       width: "24",
       height: "24",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           "path",
           {
             d: "M32 3C35.8083 3 39.5794 3.75011 43.0978 5.20749C46.6163 6.66488 49.8132 8.80101 52.5061 11.4939C55.199 14.1868 57.3351 17.3837 58.7925 20.9022C60.2499 24.4206 61 28.1917 61 32C61 35.8083 60.2499 39.5794 58.7925 43.0978C57.3351 46.6163 55.199 49.8132 52.5061 52.5061C49.8132 55.199 46.6163 57.3351 43.0978 58.7925C39.5794 60.2499 35.8083 61 32 61C28.1917 61 24.4206 60.2499 20.9022 58.7925C17.3837 57.3351 14.1868 55.199 11.4939 52.5061C8.801 49.8132 6.66487 46.6163 5.20749 43.0978C3.7501 39.5794 3 35.8083 3 32C3 28.1917 3.75011 24.4206 5.2075 20.9022C6.66489 17.3837 8.80101 14.1868 11.4939 11.4939C14.1868 8.80099 17.3838 6.66487 20.9022 5.20749C24.4206 3.7501 28.1917 3 32 3L32 3Z",
@@ -161,7 +239,7 @@ var Spinner = (props) => {
             strokeLinejoin: "round"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           "path",
           {
             d: "M32 3C36.5778 3 41.0906 4.08374 45.1692 6.16256C49.2477 8.24138 52.7762 11.2562 55.466 14.9605C58.1558 18.6647 59.9304 22.9531 60.6448 27.4748C61.3591 31.9965 60.9928 36.6232 59.5759 40.9762",
@@ -189,8 +267,9 @@ var formatUSD = (amount, currency = "USD") => {
 };
 var formatPoints = (amount, pointsTitle = "Pts") => {
   const formattedAmount = new Intl.NumberFormat("en-US", {
+    notation: "compact",
     style: "decimal",
-    maximumFractionDigits: 5,
+    maximumFractionDigits: 1,
     minimumFractionDigits: 0
   }).format(amount);
   return `${formattedAmount} ${pointsTitle}`;
@@ -204,45 +283,85 @@ var formatCoin = (amount, currency = "USDC") => {
   return `${formattedAmount} ${currency}`;
 };
 
+// src/utils/split.ts
+var getSplitAmount = (amount, splitTokens, pointsConversionRatio) => {
+  if (!Number.isFinite(amount) || !Number.isFinite(splitTokens) || !Number.isFinite(pointsConversionRatio)) {
+    return amount;
+  }
+  if (pointsConversionRatio <= 0) return amount;
+  const usdCoveredByPoints = splitTokens / pointsConversionRatio;
+  const remaining = amount - usdCoveredByPoints;
+  return Math.max(0, parseFloat(remaining.toFixed(2)));
+};
+
+// src/utils/transactionFee.ts
+var getTransactionFee = (amount = 0, transactionFeePercentage) => {
+  if (!Number.isFinite(amount) || amount <= 0) return 0;
+  if (!Number.isFinite(transactionFeePercentage) || !transactionFeePercentage || transactionFeePercentage <= 0) {
+    return 0;
+  }
+  const fee = amount * transactionFeePercentage;
+  return Math.round((fee + Number.EPSILON) * 100) / 100;
+};
+
 // src/components/CheckoutButton.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var CheckoutButton = ({ isLoggedIn, isProcessing, amount, onCheckout }) => {
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var CheckoutButton = ({ isLoggedIn }) => {
+  const { staticConfig, appProps } = useStaticConfig();
+  const { amount, onProcess, isProcessing, transactionFeePercentage } = appProps;
+  const { spreePayConfig } = useSpreePayConfig();
+  const { pointsTitle, pointsConversionRatio } = staticConfig;
   const { selectedPaymentMethod, isInternalProcessing } = useSpreePaymentMethod();
-  const isDisabled = !amount || !selectedPaymentMethod.method || !!isProcessing || isInternalProcessing || !isLoggedIn;
-  const isUSD = selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex w-full flex-col overflow-hidden rounded-3xl border border-black/25 bg-white text-xs font-medium", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("p", { className: "text-black/50", children: [
+  const { splitAmount, type, method } = selectedPaymentMethod;
+  const isDisabled = !amount || !method || !!isProcessing || isInternalProcessing || !isLoggedIn;
+  const isCC = type === "CREDIT_CARD" /* CREDIT_CARD */;
+  const isCrypto = type === "CRYPTO" /* CRYPTO */;
+  const getCheckoutContent = () => {
+    if (!!isProcessing || isInternalProcessing) {
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Spinner, { className: "inline", size: "sm" });
+    }
+    if (isCC && amount) {
+      const usdAmount = getSplitAmount(amount, splitAmount ?? 0, pointsConversionRatio);
+      if (splitAmount && usdAmount) {
+        return `Pay ${formatUSD(usdAmount + getTransactionFee(usdAmount, transactionFeePercentage))} + ${formatPoints(splitAmount, pointsTitle)}`;
+      }
+      if (usdAmount) {
+        return `Pay ${formatUSD(usdAmount + getTransactionFee(usdAmount, transactionFeePercentage))}`;
+      }
+      if (splitAmount) {
+        return `Pay ${formatPoints(splitAmount, pointsTitle)}`;
+      }
+      return "Checkout";
+    }
+    if (isCrypto && amount) {
+      return `Pay ${formatCoin(amount)}`;
+    }
+    return "Checkout";
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex w-full flex-col overflow-hidden rounded-3xl border border-black/25 bg-white text-xs font-medium", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("p", { className: "text-black/50", children: [
       "By clicking on the button below I acknowledge that I have read and accepted the",
       " ",
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-        "a",
-        {
-          className: "underline",
-          href: "https://uat.travel.air.shop/terms?locale=en-US&currency=USD",
-          target: "_blank",
-          rel: "noreferrer",
-          children: "Terms and Conditions"
-        }
-      ),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("a", { className: "underline", href: spreePayConfig?.termsConditionsUrl, target: "_blank", rel: "noreferrer", children: "Terms and Conditions" }),
       "."
     ] }) }),
-    onCheckout && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    onProcess && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       "button",
       {
         disabled: isDisabled,
-        onClick: onCheckout,
+        onClick: onProcess,
         className: "bg-primary h-[60px] w-full cursor-pointer text-xl font-semibold text-white disabled:cursor-not-allowed disabled:opacity-50",
-        children: !!isProcessing || isInternalProcessing ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Spinner, { className: "inline", size: "sm" }) : amount ? `Pay ${isUSD ? formatUSD(amount) : formatCoin(amount)}` : "Checkout"
+        children: getCheckoutContent()
       }
     )
   ] });
 };
 
 // src/components/SpreeLegal.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var SpreeLegal = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "mt-4 flex items-center gap-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { className: "flex-shrink-0", xmlns: "http://www.w3.org/2000/svg", width: "66", height: "30", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mt-4 flex items-center gap-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { className: "flex-shrink-0", xmlns: "http://www.w3.org/2000/svg", width: "66", height: "30", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "path",
       {
         fill: "#000",
@@ -250,10 +369,10 @@ var SpreeLegal = () => {
         d: "M57.79 25.48a4.82 4.82 0 0 1-1.55-.25l.55-1.86c.34.1.65.15.92.15s.51-.1.72-.26c.21-.16.39-.43.53-.81l.2-.55-3.65-10.3h2.52l2.32 7.62h.1l2.34-7.62h2.53l-4.04 11.31c-.19.54-.44 1-.75 1.38-.31.38-.7.68-1.14.88-.45.2-.98.3-1.6.3ZM48.95 21.9a4.2 4.2 0 0 1-1.73-.35c-.5-.23-.9-.57-1.2-1.02a3 3 0 0 1-.44-1.67 2.44 2.44 0 0 1 1.18-2.3c.35-.23.76-.4 1.22-.5.46-.13.93-.21 1.42-.27l1.44-.16c.37-.05.64-.13.8-.24.18-.1.26-.27.26-.5v-.04c0-.5-.15-.88-.44-1.15-.3-.27-.72-.4-1.27-.4-.58 0-1.04.12-1.38.37-.34.26-.57.56-.69.9l-2.22-.31a3.54 3.54 0 0 1 2.35-2.47 6.29 6.29 0 0 1 3.38-.14c.48.1.92.3 1.32.56.4.26.72.6.96 1.06.25.44.37 1 .37 1.67v6.75h-2.29v-1.38h-.08a2.9 2.9 0 0 1-1.59 1.37c-.39.14-.84.22-1.37.22Zm.62-1.75c.48 0 .89-.1 1.24-.28.35-.2.62-.45.8-.77.2-.31.3-.65.3-1.03V16.9c-.08.06-.2.11-.38.17a18.34 18.34 0 0 1-1.8.32c-.36.05-.68.12-.96.23-.28.11-.5.27-.66.46-.16.2-.24.45-.24.75 0 .44.16.77.48 1 .32.22.72.33 1.22.33ZM34.43 21.7V8.23h5.05c1.03 0 1.9.2 2.6.58.7.38 1.23.91 1.6 1.59.36.67.54 1.43.54 2.28 0 .87-.18 1.63-.55 2.3a3.9 3.9 0 0 1-1.6 1.59c-.72.38-1.59.57-2.63.57H36.1v-2h3.01c.6 0 1.1-.11 1.49-.32.38-.21.67-.5.85-.87.2-.37.29-.79.29-1.27 0-.47-.1-.9-.29-1.26a1.92 1.92 0 0 0-.86-.84c-.38-.2-.88-.31-1.49-.31h-2.23v11.41h-2.44ZM14.54.46a14.54 14.54 0 1 1 0 29.08 14.54 14.54 0 0 1 0-29.08ZM5.59 18.12l-.84 3.35h.83l.84-3.35h-.83Zm1.66 0-.83 3.35h1.66l.84-3.35H7.25Zm3.35-9.58c-1.03 0-2.08.84-2.34 1.87l-1.1 4.4c-.26 1.03.37 1.87 1.4 1.87h9.64l-.34 1.44h-8.1l-.85 3.35h9.6c1.04 0 2.1-.85 2.35-1.89l1.05-4.4c.25-1.03-.38-1.85-1.4-1.85h-9.63l.36-1.44h8.13l.84-3.35H10.6Zm10.44 0-.84 3.35h1.67l.83-3.35h-1.66Zm2.5 0-.84 3.35h.83l.84-3.35h-.83Z"
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("p", { className: "text-xs text-black/50", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { className: "text-xs text-black/50", children: [
       "Spree enables seamless crypto payments for real-world goods, travel, and experiences. Enjoy secure, fast transactions and earn rewards.",
       " ",
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("a", { className: "underline", href: "https://www.spree.finance/", target: "_blank", rel: "noreferrer", children: "Learn more" }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("a", { className: "underline", href: "https://www.spree.finance/", target: "_blank", rel: "noreferrer", children: "Learn more" }),
       " ",
       "about Spree."
     ] })
@@ -261,20 +380,13 @@ var SpreeLegal = () => {
 };
 
 // src/components/CreditCardTab/CreditCardTab.tsx
-var import_react7 = require("react");
-
-// src/hooks/useSlapiBalance.ts
-var import_swr = __toESM(require("swr"), 1);
-var useSlapiBalance = () => {
-  const { data, isLoading, mutate } = (0, import_swr.default)(`/v1/loyalty/accounts`);
-  return { balance: data?.detail, isBalanceLoading: isLoading, mutateBalance: mutate };
-};
+var import_react13 = require("react");
 
-// src/services/cardPayment.ts
+// src/hooks/useCardPayment.ts
 var import_nice_modal_react2 = __toESM(require("@ebay/nice-modal-react"), 1);
 
 // src/modals/Iframe3ds.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_nice_modal_react = __toESM(require("@ebay/nice-modal-react"), 1);
 
 // src/services/eventBus.ts
@@ -296,30 +408,30 @@ var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"), 1);
 var import_lucide_react = require("lucide-react");
 
 // src/ui/portal.ts
-var import_react2 = __toESM(require("react"), 1);
-var PortalContainerContext = import_react2.default.createContext({ container: null });
+var import_react3 = __toESM(require("react"), 1);
+var PortalContainerContext = import_react3.default.createContext({ container: null });
 function PortalContainerProvider({
   container,
   children
 }) {
-  return import_react2.default.createElement(PortalContainerContext.Provider, { value: { container } }, children);
+  return import_react3.default.createElement(PortalContainerContext.Provider, { value: { container } }, children);
 }
 function usePortalContainer() {
-  return import_react2.default.useContext(PortalContainerContext).container;
+  return import_react3.default.useContext(PortalContainerContext).container;
 }
 
 // src/ui/dialog.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function Dialog({ ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
 }
 function DialogPortal({ ...props }) {
   const container = usePortalContainer();
   const safeContainer = container && document.body.contains(container) ? container : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DialogPrimitive.Portal, { container: safeContainer, "data-slot": "dialog-portal", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DialogPrimitive.Portal, { container: safeContainer, "data-slot": "dialog-portal", ...props });
 }
 function DialogOverlay({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     DialogPrimitive.Overlay,
     {
       "data-slot": "dialog-overlay",
@@ -337,9 +449,9 @@ function DialogContent({
   showCloseButton = true,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(DialogPortal, { "data-slot": "dialog-portal", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DialogOverlay, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(DialogPortal, { "data-slot": "dialog-portal", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DialogOverlay, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
       DialogPrimitive.Content,
       {
         "data-slot": "dialog-content",
@@ -350,14 +462,14 @@ function DialogContent({
         ...props,
         children: [
           children,
-          showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
             DialogPrimitive.Close,
             {
               "data-slot": "dialog-close",
               className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react.XIcon, {}),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "sr-only", children: "Close" })
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react.XIcon, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "sr-only", children: "Close" })
               ]
             }
           )
@@ -367,7 +479,7 @@ function DialogContent({
   ] });
 }
 function DialogTitle({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     DialogPrimitive.Title,
     {
       "data-slot": "dialog-title",
@@ -377,7 +489,7 @@ function DialogTitle({ className, ...props }) {
   );
 }
 function DialogDescription({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     DialogPrimitive.Description,
     {
       "data-slot": "dialog-description",
@@ -388,10 +500,10 @@ function DialogDescription({ className, ...props }) {
 }
 
 // src/modals/Iframe3ds.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var Iframe3ds = import_nice_modal_react.default.create(({ url }) => {
   const modal = (0, import_nice_modal_react.useModal)();
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     return bus.on("paymentIntent", (data) => {
       modal.resolve(data.paymentIntent);
       modal.remove();
@@ -401,9 +513,9 @@ var Iframe3ds = import_nice_modal_react.default.create(({ url }) => {
     modal.reject();
     modal.remove();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Dialog, { open: modal.visible, onOpenChange: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(DialogContent, { className: "max-h-[600px] w-full max-w-[680px] p-0", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DialogTitle, { className: "hidden", children: "3D Secure Verification" }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("iframe", { src: url, id: "3ds-iframe", title: "3D Secure Checkout", className: "h-[500px] w-full rounded-lg border-0" })
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Dialog, { open: modal.visible, onOpenChange: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(DialogContent, { className: "max-h-[600px] w-full max-w-[680px] p-0", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DialogTitle, { className: "hidden", children: "3D Secure Verification" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("iframe", { src: url, id: "3ds-iframe", title: "3D Secure Checkout", className: "h-[500px] w-full rounded-lg border-0" })
   ] }) });
 });
 Iframe3ds.displayName = "Iframe3ds";
@@ -505,32 +617,13 @@ var registerApi = (config2) => {
 
 // src/services/slapi.ts
 var SlapiPaymentService = {
-  // checkBallance: async ({ coin, amount, slippage }: CheckBallanceParams) => {
-  //   // if no ballance known, return true and check by wallet
-  //   if (!coin.balance) return true;
-  //   const isUSDC = coin.symbol === COIN.USDC;
-  //   if (isUSDC) return coin.balance > amount;
-  //   const inputDecimals = cryptoAssets[COIN.USDC].decimals; // Decimals for USDC
-  //   const outputDecimals = coin.decimals; // Decimals for the input asset (e.g., SOL, BONK)
-  //   const params = {
-  //     inputMint: env.NEXT_PUBLIC_USDC_MAINNET_MINT_ADDRESS, // should be main net
-  //     outputMint: coin.address,
-  //     amount: Math.floor(amount * Math.pow(10, inputDecimals)), // Convert amount to smallest units
-  //     slippage,
-  //   };
-  //   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  //   const { data } = await jupiterApi.get<any>(`/quote?${qs.stringify(params)}`);
-  //   // Convert back to human-readable form
-  //   const outAmountNumber = data?.outAmount ? Number(data.outAmount) / Math.pow(10, outputDecimals) : null;
-  //   // if no ballance known, return true and check by wallet
-  //   if (!outAmountNumber) return true;
-  //   return coin.balance > outAmountNumber;
-  // },
   createPayment: (params) => {
     const { type, hash, metadata, capture = false } = params;
     let reqParams;
     if (type === "CRYPTO" /* CRYPTO */) {
       reqParams = { type, hash, crypto: params.crypto };
+    } else if (type === "CREDIT_CARD" /* CREDIT_CARD */ && params.points && params.points.amount > 0) {
+      reqParams = { type: "SPLIT" /* SPLIT */, hash, card: params.card, points: params.points };
     } else {
       reqParams = { type, hash, card: params.card };
     }
@@ -539,132 +632,271 @@ var SlapiPaymentService = {
   baseVerify: ({ id, txHash }) => {
     return slapiApi.post(`/v1/base-transactions/transactions/${id}/verify`, { txHash });
   },
-  // signEncodedTransaction: async (signTransaction: SignTransaction, encodedTX: string): Promise<string> => {
-  //   const swapTransactionBuf = Buffer.from(encodedTX, 'base64');
-  //   const transaction = VersionedTransaction.deserialize(swapTransactionBuf);
-  //   // Sign and send the transaction
-  //   const signedTransaction = await signTransaction(transaction);
-  //   return Buffer.from(signedTransaction.serialize()).toString('base64');
-  // },
-  // executeSolana: (params: { txId: string; signedTx: string }) => {
-  //   const { txId, signedTx } = params;
-  //   return slapiApi.post<string>(`/solana-transactions/transactions/${txId}/execute`, { signedTx });
-  // },
-  addCard: (params) => {
-    const { source, hash } = params;
+  addCard: ({ source, hash }) => {
     return slapiApi.post("/v1/payments/cards", { hash, source }).then((data) => ({ data }));
   },
-  validate3DS: (params) => {
-    const { paymentId } = params;
-    return slapiApi.post("/v1/payments/validate", { paymentId, type: "CREDIT_CARD" }).then((data) => ({ data }));
+  validate3DS: ({ paymentId }) => {
+    return slapiApi.post("/v1/payments/validate", { paymentId, type: "CREDIT_CARD" /* CREDIT_CARD */ }).then((data) => ({ data }));
+  },
+  validatePoints: ({ paymentId, txHash }) => {
+    return slapiApi.post("/v1/payments/validate", { txHash, paymentId, type: "SPLIT" /* SPLIT */ }).then((data) => ({ data }));
+  },
+  getStatus: (paymentId) => {
+    return slapiApi.get(`/v1/payments/${paymentId}/status`);
   }
 };
 
-// src/services/cardPayment.ts
-var cardPayment = async (params) => {
-  const { card, redirect3dsURI, hash, capture, metadata, transactionFee } = params;
-  let cardId = card.id;
-  if ("token" in card) {
-    const { data: cardResData } = await SlapiPaymentService.addCard({ hash, source: card.token });
-    cardId = cardResData.id;
-  }
-  const { data: paymentResData } = await SlapiPaymentService.createPayment({
-    hash,
-    capture,
-    metadata,
-    type: "CREDIT_CARD" /* CREDIT_CARD */,
-    card: {
-      cardId,
-      transactionFee,
-      returnUrl: `${window.location.origin}${redirect3dsURI}`
+// src/hooks/useCardPayment.ts
+var useCardPayment = () => {
+  const { selectedPaymentMethod } = useSpreePaymentMethod();
+  const { env } = useSpreePayEnv();
+  const { appProps } = useStaticConfig();
+  const cardPayment = async (params) => {
+    if (selectedPaymentMethod.type !== "CREDIT_CARD" /* CREDIT_CARD */ || !selectedPaymentMethod.method) {
+      throw new Error("Unsupported payment method");
     }
-  });
-  if (paymentResData.redirectUrl) {
-    const paymentIntent = await import_nice_modal_react2.default.show(Iframe3ds, { url: paymentResData.redirectUrl });
-    if (paymentIntent) {
-      const { data: validateData } = await SlapiPaymentService.validate3DS({ paymentId: paymentResData.id });
-      return {
-        paymentType: "CREDIT_CARD" /* CREDIT_CARD */,
-        status: validateData.status,
-        paymentId: paymentResData.id,
-        txId: paymentResData.txId,
-        txHash: null
-      };
+    const { hash, capture, metadata } = params;
+    const card = selectedPaymentMethod.method;
+    let cardId;
+    if ("token" in card) {
+      const { data: cardResData } = await SlapiPaymentService.addCard({ hash, source: card.token });
+      cardId = cardResData.id;
+    } else {
+      cardId = card.id;
     }
-  }
+    const transactionFee = getTransactionFee(appProps.amount, appProps.transactionFeePercentage);
+    const { data: paymentResData } = await SlapiPaymentService.createPayment({
+      hash,
+      capture,
+      metadata,
+      type: "CREDIT_CARD" /* CREDIT_CARD */,
+      card: {
+        cardId,
+        transactionFee,
+        returnUrl: `${typeof window !== "undefined" ? window.location.origin : ""}${env.redirect3dsURI}`
+      }
+    });
+    let { status } = paymentResData;
+    if (paymentResData.redirectUrl) {
+      const paymentIntent = await import_nice_modal_react2.default.show(Iframe3ds, { url: paymentResData.redirectUrl });
+      if (paymentIntent) {
+        const { data: validateData } = await SlapiPaymentService.validate3DS({ paymentId: paymentResData.id });
+        ({ status } = validateData);
+      }
+    }
+    return {
+      status,
+      paymentType: "CREDIT_CARD" /* CREDIT_CARD */,
+      paymentId: paymentResData.id,
+      txId: paymentResData.txId,
+      txHash: null
+    };
+  };
+  return { cardPayment };
+};
+
+// src/hooks/useCards.ts
+var import_swr2 = __toESM(require("swr"), 1);
+var useCards = () => {
+  const { data, isLoading, mutate } = (0, import_swr2.default)(`/v1/payments/cards`);
   return {
-    paymentType: "CREDIT_CARD" /* CREDIT_CARD */,
-    status: paymentResData.status,
-    paymentId: paymentResData.id,
-    txId: paymentResData.txId,
-    txHash: null
+    cards: data?.data.filter((c) => c.active) || [],
+    cardsIsLoading: isLoading,
+    mutateCards: mutate
   };
 };
 
-// src/components/common/PointsSwitch.tsx
-var import_react4 = require("react");
+// src/hooks/useSplitCardPayments.ts
+var import_nice_modal_react3 = __toESM(require("@ebay/nice-modal-react"), 1);
 
-// src/ui/label.tsx
-var LabelPrimitive = __toESM(require("@radix-ui/react-label"), 1);
-var import_jsx_runtime7 = require("react/jsx-runtime");
-function Label({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    LabelPrimitive.Root,
-    {
-      "data-slot": "label",
-      className: cn(
-        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
-        className
-      ),
-      ...props
+// src/services/AirWalletService.ts
+var import_airkit = require("@mocanetwork/airkit");
+var import_viem = require("viem");
+var singletonState = null;
+var initPromise = null;
+var cachedKey = null;
+function optionsKey(opts) {
+  return `${opts.partnerId}|${opts.mocaChain?.id ?? "unknown"}`;
+}
+async function createAndInit(opts) {
+  const air = new import_airkit.AirService({ partnerId: opts.partnerId });
+  try {
+    await air.init({
+      buildEnv: opts.buildEnv ?? import_airkit.BUILD_ENV.SANDBOX,
+      enableLogging: opts.enableLogging ?? true,
+      skipRehydration: opts.skipRehydration ?? false
+    });
+    air.preloadWallet().catch(() => {
+    });
+    const loginRes = await air.login();
+    const address = loginRes?.abstractAccountAddress || null;
+    const walletClient = address ? (0, import_viem.createWalletClient)({
+      transport: (0, import_viem.custom)(air.provider),
+      chain: opts.mocaChain,
+      account: address
+    }) : null;
+    return { walletReady: true, address, walletClient, air, chain: opts.mocaChain };
+  } catch (e) {
+    const msg = e instanceof Error ? e.message : "Unknown error during AirWallet initialization";
+    return { walletReady: false, address: null, walletClient: null, air: null, chain: null, error: msg };
+  }
+}
+async function getAirWallet(options) {
+  const key = optionsKey(options);
+  if (singletonState && cachedKey === key) return singletonState;
+  if (initPromise && cachedKey === key) return initPromise;
+  cachedKey = key;
+  initPromise = createAndInit(options).then((state) => {
+    singletonState = state;
+    return state;
+  });
+  return initPromise;
+}
+function peekAirWallet() {
+  return singletonState;
+}
+async function handleSendErc20(params) {
+  const state = singletonState;
+  if (!state?.walletClient) {
+    console.error("Air wallet is not initialized");
+    throw new Error("Air wallet is not initialized");
+  }
+  if (!params?.recipient) {
+    console.error("Recipient address is not set");
+    throw new Error("Recipient address is not set");
+  }
+  if (!params?.token?.address || !params?.token?.decimals) {
+    console.error("Token address or decimals not set");
+    throw new Error("Token address or decimals not set");
+  }
+  try {
+    const { walletClient } = state;
+    const addresses = await walletClient.getAddresses();
+    const value = (0, import_viem.parseUnits)(String(params.amount), params.token.decimals);
+    const data = (0, import_viem.encodeFunctionData)({
+      abi: import_viem.erc20Abi,
+      functionName: "transfer",
+      args: [params.recipient, value]
+    });
+    const hash = await walletClient.sendTransaction({
+      account: addresses[0],
+      to: params.token.address,
+      data,
+      value: 0n,
+      chain: state.chain ?? void 0
+    });
+    return { txHash: hash };
+  } catch (error) {
+    if (typeof error === "object" && error !== null && "shortMessage" in error) {
+      console.error(error.shortMessage);
+    } else {
+      console.error("Your wallet balances are insufficient to complete this transaction.");
     }
-  );
+  }
 }
 
-// src/ui/switch.tsx
-var SwitchPrimitive = __toESM(require("@radix-ui/react-switch"), 1);
-var import_jsx_runtime8 = require("react/jsx-runtime");
-function Switch({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-    SwitchPrimitive.Root,
-    {
-      "data-slot": "switch",
-      className: cn(
-        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      ),
-      ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-        SwitchPrimitive.Thumb,
-        {
-          "data-slot": "switch-thumb",
-          className: "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
-        }
-      )
+// src/hooks/useSplitCardPayments.ts
+var REFRESH_INTERVAL = 3 * 1e3;
+var MAX_RETRIES = 10;
+async function longPollPoints(paymentId) {
+  let retries = 0;
+  while (retries < MAX_RETRIES) {
+    const { detail } = await SlapiPaymentService.getStatus(paymentId);
+    if (detail.status === "FAILED" /* FAILED */) {
+      throw new Error("Something went wrong with the payment");
     }
-  );
+    if (["AUTHORIZED" /* AUTHORIZED */, "CAPTURED" /* CAPTURED */].includes(detail.status)) {
+      return detail.status;
+    }
+    await new Promise((res) => setTimeout(res, REFRESH_INTERVAL));
+    retries++;
+  }
+  throw new Error("Points Payment polling timed out");
 }
-
-// src/components/common/PointsSwitch.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var PointsSwitch = (props) => {
-  const { pointsConversionRatio, disabled = false, value, onChange, pointsTitle } = props;
-  const { balance } = useSlapiBalance();
-  const id = (0, import_react4.useId)();
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Switch, { checked: value, onCheckedChange: onChange, disabled, id }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Label, { className: "text-md items-baseline leading-[1.3] font-semibold text-black md:text-xl", htmlFor: id, children: [
-        "Use Points ",
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-xs font-medium", children: "Optional" })
-      ] })
-    ] }),
-    balance?.availablePoints ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("p", { className: "flex-1 text-right text-sm font-medium text-black", children: [
-      formatPoints(balance.availablePoints, pointsTitle),
-      " ",
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-black/50", children: formatUSD(balance.availablePoints / pointsConversionRatio) })
-    ] }) : null
-  ] });
+async function longPollCardStatus(paymentId) {
+  let retries = 0;
+  let shown3ds = false;
+  while (retries < MAX_RETRIES) {
+    const { detail } = await SlapiPaymentService.getStatus(paymentId);
+    if (detail.status === "FAILED" /* FAILED */) {
+      throw new Error(`Something went wrong with the ${detail.validationType} payment`);
+    }
+    if (detail.validationType === "POINTS") {
+      return detail.status;
+    }
+    if (!shown3ds && detail.card?.redirectUrl) {
+      const paymentIntent = await import_nice_modal_react3.default.show(Iframe3ds, { url: detail.card?.redirectUrl });
+      shown3ds = true;
+      if (paymentIntent) {
+        await SlapiPaymentService.validate3DS({ paymentId });
+      }
+    }
+    await new Promise((res) => setTimeout(res, REFRESH_INTERVAL));
+    retries++;
+  }
+  throw new Error("Payment polling timed out");
+}
+var useSplitCardPayments = () => {
+  const { selectedPaymentMethod } = useSpreePaymentMethod();
+  const { env } = useSpreePayEnv();
+  const { appProps, staticConfig } = useStaticConfig();
+  const { spreePayConfig } = useSpreePayConfig();
+  const splitPayment = async (params) => {
+    if (selectedPaymentMethod.type !== "CREDIT_CARD" /* CREDIT_CARD */ || !selectedPaymentMethod.method || !params.points) {
+      throw new Error("Unsupported payment method");
+    }
+    const { hash, capture, metadata, points } = params;
+    const card = selectedPaymentMethod.method;
+    let cardId;
+    if ("token" in card) {
+      const { data: cardResData } = await SlapiPaymentService.addCard({ hash, source: card.token });
+      cardId = cardResData.id;
+    } else {
+      cardId = card.id;
+    }
+    const usdAmount = getSplitAmount(appProps.amount ?? 0, points, staticConfig.pointsConversionRatio);
+    const transactionFee = getTransactionFee(usdAmount, appProps.transactionFeePercentage);
+    const { data: paymentResData } = await SlapiPaymentService.createPayment({
+      hash,
+      capture,
+      metadata,
+      type: "CREDIT_CARD" /* CREDIT_CARD */,
+      card: {
+        cardId,
+        transactionFee,
+        returnUrl: `${typeof window !== "undefined" ? window.location.origin : ""}${env.redirect3dsURI}`
+      },
+      points: {
+        amount: points
+      }
+    });
+    await longPollCardStatus(paymentResData.id);
+    const wallet = peekAirWallet();
+    if (!wallet || !spreePayConfig?.pointsChain) {
+      throw new Error("AirWallet not found");
+    }
+    const transaction = await handleSendErc20({
+      amount: params.points,
+      token: spreePayConfig.pointsChain.pointsCoin,
+      recipient: spreePayConfig.pointsChain.recipientAddress
+    });
+    if (!transaction) {
+      throw new Error("Points transaction failed");
+    }
+    await SlapiPaymentService.validatePoints({
+      paymentId: paymentResData.id,
+      txHash: transaction.txHash
+    });
+    const pointsStatus = await longPollPoints(paymentResData.id);
+    return {
+      paymentType: "SPLIT" /* SPLIT */,
+      status: pointsStatus,
+      paymentId: paymentResData.id,
+      txId: paymentResData.txId,
+      txHash: transaction.txHash
+    };
+  };
+  return { splitPayment };
 };
 
 // src/components/CreditCardTab/CreditCard/CreditCard.tsx
@@ -672,26 +904,8 @@ var import_react6 = require("react");
 var import_react_stripe_js2 = require("@stripe/react-stripe-js");
 var import_stripe_js = require("@stripe/stripe-js");
 
-// src/hooks/useCards.ts
-var import_swr2 = __toESM(require("swr"), 1);
-var useCards = () => {
-  const { data, isLoading, mutate } = (0, import_swr2.default)(`/v1/payments/cards`);
-  return {
-    cards: data?.data.filter((c) => c.active) || [],
-    cardsIsLoading: isLoading,
-    mutateCards: mutate
-  };
-};
-
-// src/hooks/useConfig.ts
-var import_swr3 = __toESM(require("swr"), 1);
-var useConfig = () => {
-  const { data, isLoading } = (0, import_swr3.default)("/v1/tenants/configs/spree-pay");
-  return { config: data, configIsLoading: isLoading };
-};
-
 // src/components/CreditCardTab/CreditCard/CardsList.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var isRemoveDisabled = true;
 var CardListItem = ({ card, isSelected, onSelect }) => {
   const handleSelect = () => {
@@ -701,17 +915,17 @@ var CardListItem = ({ card, isSelected, onSelect }) => {
     e.stopPropagation();
     if (isSelected || isRemoveDisabled) return;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("button", { type: "button", onClick: handleSelect, className: "bg-primary/8 flex h-11 w-full overflow-hidden rounded-md", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("button", { type: "button", onClick: handleSelect, className: "bg-primary/8 flex h-11 w-full overflow-hidden rounded-md", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "div",
       {
         className: cn("flex h-full w-11 items-center justify-center bg-black/10", {
           "bg-primary": isSelected
         }),
-        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-white", children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "bg-primary h-2.5 w-2.5 rounded-full" }) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-white", children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "bg-primary h-2.5 w-2.5 rounded-full" }) })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
       "div",
       {
         className: cn(
@@ -721,13 +935,13 @@ var CardListItem = ({ card, isSelected, onSelect }) => {
           }
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-sm font-medium text-black", children: card.schema }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("p", { className: "text-sm font-medium text-black/50", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-sm font-medium text-black", children: card.schema }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("p", { className: "text-sm font-medium text-black/50", children: [
               "Ending in ",
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-black", children: card.lastFourNumbers })
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-black", children: card.lastFourNumbers })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
               "div",
               {
                 onClick: handleRemoveCard,
@@ -735,9 +949,9 @@ var CardListItem = ({ card, isSelected, onSelect }) => {
                   "cursor-not-allowed opacity-50": isSelected || isRemoveDisabled
                   // 'cursor-pointer': !isSelected || !isRemoveDisabled,
                 }),
-                children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", fill: "none", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("mask", { id: "mask0_188_5407", width: "20", height: "21", x: "0", y: "-1", maskUnits: "userSpaceOnUse", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { fill: "#D9D9D9", d: "M0-.5h20v20H0z" }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("g", { mask: "url(#mask0_188_5407)", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", fill: "none", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("mask", { id: "mask0_188_5407", width: "20", height: "21", x: "0", y: "-1", maskUnits: "userSpaceOnUse", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { fill: "#D9D9D9", d: "M0-.5h20v20H0z" }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("g", { mask: "url(#mask0_188_5407)", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                     "path",
                     {
                       fill: "#000",
@@ -757,13 +971,13 @@ var CardListItem = ({ card, isSelected, onSelect }) => {
 var CardsList = ({ selectedCard, setCard }) => {
   const { cards, cardsIsLoading } = useCards();
   if (cardsIsLoading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex w-full flex-col gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "bg-primary/8 h-11 animate-pulse rounded-md" }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "bg-primary/8 h-11 animate-pulse rounded-md" })
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex w-full flex-col gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "bg-primary/8 h-11 animate-pulse rounded-md" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "bg-primary/8 h-11 animate-pulse rounded-md" })
     ] });
   }
   if (cards.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex w-full flex-col gap-1", children: cards.map((card) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CardListItem, { isSelected: selectedCard?.id === card.id, onSelect: setCard, card }, card.id)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex w-full flex-col gap-1", children: cards.map((card) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CardListItem, { isSelected: selectedCard?.id === card.id, onSelect: setCard, card }, card.id)) });
 };
 
 // src/components/CreditCardTab/CreditCard/CreditCardForm.tsx
@@ -773,7 +987,7 @@ var import_react_stripe_js = require("@stripe/react-stripe-js");
 // src/ui/button.tsx
 var import_react_slot = require("@radix-ui/react-slot");
 var import_class_variance_authority = require("class-variance-authority");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var buttonVariants = (0, import_class_variance_authority.cva)(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-full text-sm transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
@@ -808,15 +1022,15 @@ function Button({
   ...props
 }) {
   const Comp = asChild ? import_react_slot.Slot : "button";
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Comp, { "data-slot": "button", className: cn(buttonVariants({ variant, size, className })), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Comp, { "data-slot": "button", className: cn(buttonVariants({ variant, size, className })), ...props });
 }
 
 // src/ui/checkbox.tsx
 var CheckboxPrimitive = __toESM(require("@radix-ui/react-checkbox"), 1);
 var import_lucide_react2 = require("lucide-react");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function Checkbox({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     CheckboxPrimitive.Root,
     {
       "data-slot": "checkbox",
@@ -825,20 +1039,37 @@ function Checkbox({ className, ...props }) {
         className
       ),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         CheckboxPrimitive.Indicator,
         {
           "data-slot": "checkbox-indicator",
           className: "flex items-center justify-center text-current transition-none",
-          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react2.CheckIcon, { className: "size-3.5 text-white" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react2.CheckIcon, { className: "size-3.5 text-white" })
         }
       )
     }
   );
 }
 
+// src/ui/label.tsx
+var LabelPrimitive = __toESM(require("@radix-ui/react-label"), 1);
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function Label({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    LabelPrimitive.Root,
+    {
+      "data-slot": "label",
+      className: cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
 // src/components/CreditCardTab/CreditCard/CreditCardForm.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var style = {
   base: {
     fontSize: "16px",
@@ -896,9 +1127,9 @@ var CreditCardForm = ({ cancel, saveCard }) => {
       setCardError("An error occurred while processing your card. Please try again.");
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex w-full flex-col gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex w-full flex-col gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         import_react_stripe_js.CardNumberElement,
         {
           options: {
@@ -908,8 +1139,8 @@ var CreditCardForm = ({ cancel, saveCard }) => {
           }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex w-full gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex w-full gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           import_react_stripe_js.CardExpiryElement,
           {
             options: {
@@ -919,7 +1150,7 @@ var CreditCardForm = ({ cancel, saveCard }) => {
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           import_react_stripe_js.CardCvcElement,
           {
             options: {
@@ -930,32 +1161,32 @@ var CreditCardForm = ({ cancel, saveCard }) => {
           }
         )
       ] }),
-      cardError && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-destructive mt-1 text-sm", children: cardError })
+      cardError && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-destructive mt-1 text-sm", children: cardError })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Checkbox, { disabled: true, checked: true, id: "saveCard" }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Label, { className: "text-sm font-medium", htmlFor: "saveCard", children: "Save card for future purchases" })
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Checkbox, { disabled: true, checked: true, id: "saveCard" }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Label, { className: "text-sm font-medium", htmlFor: "saveCard", children: "Save card for future purchases" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex w-full justify-end gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Button, { variant: "secondary", onClick: cancel, children: "Cancel" }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Button, { onClick: handleSaveCard, children: "Add Card" })
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex w-full justify-end gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Button, { variant: "secondary", onClick: cancel, children: "Cancel" }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Button, { onClick: handleSaveCard, children: "Add Card" })
     ] })
   ] });
 };
 
 // src/components/CreditCardTab/CreditCard/CreditCard.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var SripeWrapper = (props) => {
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var StripeWrapper = (props) => {
   const stripePromise = (0, import_react6.useMemo)(() => (0, import_stripe_js.loadStripe)(props.publicKey), [props.publicKey]);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_stripe_js2.Elements, { stripe: stripePromise, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CreditCardForm, { cancel: props.onCancel, saveCard: props.saveNewCard }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_stripe_js2.Elements, { stripe: stripePromise, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CreditCardForm, { cancel: props.onCancel, saveCard: props.saveNewCard }) });
 };
 var CreditCard = () => {
   const [showForm, setShowForm] = (0, import_react6.useState)(false);
   const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
   const { mutateCards } = useCards();
-  const { config: config2 } = useConfig();
+  const { spreePayConfig } = useSpreePayConfig();
   const setCard = (card) => {
-    setSelectedPaymentMethod({ type: "CREDIT_CARD" /* CREDIT_CARD */, method: card });
+    setSelectedPaymentMethod({ ...selectedPaymentMethod, type: "CREDIT_CARD" /* CREDIT_CARD */, method: card });
   };
   const saveNewCard = (newCard) => {
     mutateCards((data) => ({ ...data, data: [...data?.data ?? [], newCard] }), { revalidate: false });
@@ -965,69 +1196,1221 @@ var CreditCard = () => {
   const handleCancel = () => {
     setShowForm(false);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-col items-baseline gap-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h3", { className: "text-primary text-xl leading-[34px] font-semibold", children: "Your Credit Cards" }),
-    !showForm && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex flex-col items-baseline gap-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h3", { className: "text-primary text-xl leading-[34px] font-semibold", children: "Your Credit Cards" }),
+    !showForm && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         CardsList,
         {
           selectedCard: selectedPaymentMethod?.type === "CREDIT_CARD" /* CREDIT_CARD */ ? selectedPaymentMethod.method : null,
           setCard
         }
       ),
-      config2?.stripePublicKey && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { onClick: () => setShowForm(true), className: "text-sm font-medium text-black hover:underline", children: "Add new card" })
+      spreePayConfig?.stripePublicKey && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { onClick: () => setShowForm(true), className: "text-sm font-medium text-black hover:underline", children: "Add new card" })
     ] }),
-    config2?.stripePublicKey && showForm && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SripeWrapper, { onCancel: handleCancel, saveNewCard, publicKey: config2.stripePublicKey })
+    spreePayConfig?.stripePublicKey && showForm && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(StripeWrapper, { onCancel: handleCancel, saveNewCard, publicKey: spreePayConfig.stripePublicKey })
   ] });
 };
 
-// src/components/CreditCardTab/CreditCardTab.tsx
+// src/components/CreditCardTab/Points/Points.tsx
+var import_react12 = require("react");
+
+// src/components/common/PointsSwitch.tsx
+var import_react7 = require("react");
+
+// src/hooks/useSlapiBalance.ts
+var import_swr3 = __toESM(require("swr"), 1);
+var useSlapiBalance = () => {
+  const { data, isLoading, mutate } = (0, import_swr3.default)(`/v1/loyalty/accounts`);
+  return { balance: data?.detail, isBalanceLoading: isLoading, mutateBalance: mutate };
+};
+
+// src/ui/switch.tsx
+var SwitchPrimitive = __toESM(require("@radix-ui/react-switch"), 1);
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function Switch({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    SwitchPrimitive.Root,
+    {
+      "data-slot": "switch",
+      className: cn(
+        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        SwitchPrimitive.Thumb,
+        {
+          "data-slot": "switch-thumb",
+          className: "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
+        }
+      )
+    }
+  );
+}
+
+// src/components/common/PointsSwitch.tsx
 var import_jsx_runtime15 = require("react/jsx-runtime");
-var PointsSelector = ({ isSelected, onSelect, children }) => {
-  return (
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
-      "div",
+var PointsSwitch = (props) => {
+  const { disabled = false, value, onChange } = props;
+  const { staticConfig } = useStaticConfig();
+  const { pointsConversionRatio, pointsTitle } = staticConfig;
+  const { balance } = useSlapiBalance();
+  const id = (0, import_react7.useId)();
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Switch, { checked: value, onCheckedChange: onChange, disabled, id }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Label, { className: "text-md items-baseline leading-[1.3] font-semibold text-black md:text-xl", htmlFor: id, children: [
+        "Use Points ",
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-xs font-medium", children: "Optional" })
+      ] })
+    ] }),
+    balance?.availablePoints ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("p", { className: "flex-1 text-right text-sm font-medium text-black", children: [
+      formatPoints(balance.availablePoints, pointsTitle),
+      " ",
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-black/50", children: formatUSD(balance.availablePoints / pointsConversionRatio) })
+    ] }) : null
+  ] });
+};
+
+// src/components/CreditCardTab/Points/SplitBlock.tsx
+var import_react11 = require("react");
+
+// src/components/CreditCardTab/Points/PointsSelector.tsx
+var import_react10 = require("react");
+
+// src/ui/input.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+function Input({ className, type, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    "input",
+    {
+      type,
+      "data-slot": "input",
+      className: cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/ui/slider.tsx
+var React12 = __toESM(require("react"), 1);
+
+// ../../node_modules/@radix-ui/react-slider/dist/index.mjs
+var React11 = __toESM(require("react"), 1);
+
+// ../../node_modules/@radix-ui/number/dist/index.mjs
+function clamp(value, [min, max]) {
+  return Math.min(max, Math.max(min, value));
+}
+
+// ../../node_modules/@radix-ui/react-slider/node_modules/@radix-ui/primitive/dist/index.mjs
+var canUseDOM = !!(typeof window !== "undefined" && window.document && window.document.createElement);
+function composeEventHandlers(originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) {
+  return function handleEvent(event) {
+    originalEventHandler?.(event);
+    if (checkForDefaultPrevented === false || !event.defaultPrevented) {
+      return ourEventHandler?.(event);
+    }
+  };
+}
+
+// ../../node_modules/@radix-ui/react-compose-refs/dist/index.mjs
+var React2 = __toESM(require("react"), 1);
+function setRef(ref, value) {
+  if (typeof ref === "function") {
+    return ref(value);
+  } else if (ref !== null && ref !== void 0) {
+    ref.current = value;
+  }
+}
+function composeRefs(...refs) {
+  return (node) => {
+    let hasCleanup = false;
+    const cleanups = refs.map((ref) => {
+      const cleanup = setRef(ref, node);
+      if (!hasCleanup && typeof cleanup == "function") {
+        hasCleanup = true;
+      }
+      return cleanup;
+    });
+    if (hasCleanup) {
+      return () => {
+        for (let i = 0; i < cleanups.length; i++) {
+          const cleanup = cleanups[i];
+          if (typeof cleanup == "function") {
+            cleanup();
+          } else {
+            setRef(refs[i], null);
+          }
+        }
+      };
+    }
+  };
+}
+function useComposedRefs(...refs) {
+  return React2.useCallback(composeRefs(...refs), refs);
+}
+
+// ../../node_modules/@radix-ui/react-context/dist/index.mjs
+var React3 = __toESM(require("react"), 1);
+var import_jsx_runtime17 = require("react/jsx-runtime");
+function createContextScope(scopeName, createContextScopeDeps = []) {
+  let defaultContexts = [];
+  function createContext32(rootComponentName, defaultContext) {
+    const BaseContext = React3.createContext(defaultContext);
+    const index = defaultContexts.length;
+    defaultContexts = [...defaultContexts, defaultContext];
+    const Provider = (props) => {
+      const { scope, children, ...context } = props;
+      const Context = scope?.[scopeName]?.[index] || BaseContext;
+      const value = React3.useMemo(() => context, Object.values(context));
+      return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Context.Provider, { value, children });
+    };
+    Provider.displayName = rootComponentName + "Provider";
+    function useContext22(consumerName, scope) {
+      const Context = scope?.[scopeName]?.[index] || BaseContext;
+      const context = React3.useContext(Context);
+      if (context) return context;
+      if (defaultContext !== void 0) return defaultContext;
+      throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
+    }
+    return [Provider, useContext22];
+  }
+  const createScope = () => {
+    const scopeContexts = defaultContexts.map((defaultContext) => {
+      return React3.createContext(defaultContext);
+    });
+    return function useScope(scope) {
+      const contexts = scope?.[scopeName] || scopeContexts;
+      return React3.useMemo(
+        () => ({ [`__scope${scopeName}`]: { ...scope, [scopeName]: contexts } }),
+        [scope, contexts]
+      );
+    };
+  };
+  createScope.scopeName = scopeName;
+  return [createContext32, composeContextScopes(createScope, ...createContextScopeDeps)];
+}
+function composeContextScopes(...scopes) {
+  const baseScope = scopes[0];
+  if (scopes.length === 1) return baseScope;
+  const createScope = () => {
+    const scopeHooks = scopes.map((createScope2) => ({
+      useScope: createScope2(),
+      scopeName: createScope2.scopeName
+    }));
+    return function useComposedScopes(overrideScopes) {
+      const nextScopes = scopeHooks.reduce((nextScopes2, { useScope, scopeName }) => {
+        const scopeProps = useScope(overrideScopes);
+        const currentScope = scopeProps[`__scope${scopeName}`];
+        return { ...nextScopes2, ...currentScope };
+      }, {});
+      return React3.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
+    };
+  };
+  createScope.scopeName = baseScope.scopeName;
+  return createScope;
+}
+
+// ../../node_modules/@radix-ui/react-use-controllable-state/dist/index.mjs
+var React5 = __toESM(require("react"), 1);
+
+// ../../node_modules/@radix-ui/react-use-layout-effect/dist/index.mjs
+var React4 = __toESM(require("react"), 1);
+var useLayoutEffect2 = globalThis?.document ? React4.useLayoutEffect : () => {
+};
+
+// ../../node_modules/@radix-ui/react-use-controllable-state/dist/index.mjs
+var React22 = __toESM(require("react"), 1);
+var useInsertionEffect = React5[" useInsertionEffect ".trim().toString()] || useLayoutEffect2;
+function useControllableState({
+  prop,
+  defaultProp,
+  onChange = () => {
+  },
+  caller
+}) {
+  const [uncontrolledProp, setUncontrolledProp, onChangeRef] = useUncontrolledState({
+    defaultProp,
+    onChange
+  });
+  const isControlled = prop !== void 0;
+  const value = isControlled ? prop : uncontrolledProp;
+  if (true) {
+    const isControlledRef = React5.useRef(prop !== void 0);
+    React5.useEffect(() => {
+      const wasControlled = isControlledRef.current;
+      if (wasControlled !== isControlled) {
+        const from = wasControlled ? "controlled" : "uncontrolled";
+        const to = isControlled ? "controlled" : "uncontrolled";
+        console.warn(
+          `${caller} is changing from ${from} to ${to}. Components should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled value for the lifetime of the component.`
+        );
+      }
+      isControlledRef.current = isControlled;
+    }, [isControlled, caller]);
+  }
+  const setValue = React5.useCallback(
+    (nextValue) => {
+      if (isControlled) {
+        const value2 = isFunction(nextValue) ? nextValue(prop) : nextValue;
+        if (value2 !== prop) {
+          onChangeRef.current?.(value2);
+        }
+      } else {
+        setUncontrolledProp(nextValue);
+      }
+    },
+    [isControlled, prop, setUncontrolledProp, onChangeRef]
+  );
+  return [value, setValue];
+}
+function useUncontrolledState({
+  defaultProp,
+  onChange
+}) {
+  const [value, setValue] = React5.useState(defaultProp);
+  const prevValueRef = React5.useRef(value);
+  const onChangeRef = React5.useRef(onChange);
+  useInsertionEffect(() => {
+    onChangeRef.current = onChange;
+  }, [onChange]);
+  React5.useEffect(() => {
+    if (prevValueRef.current !== value) {
+      onChangeRef.current?.(value);
+      prevValueRef.current = value;
+    }
+  }, [value, prevValueRef]);
+  return [value, setValue, onChangeRef];
+}
+function isFunction(value) {
+  return typeof value === "function";
+}
+var SYNC_STATE = Symbol("RADIX:SYNC_STATE");
+
+// ../../node_modules/@radix-ui/react-direction/dist/index.mjs
+var React6 = __toESM(require("react"), 1);
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var DirectionContext = React6.createContext(void 0);
+function useDirection(localDir) {
+  const globalDir = React6.useContext(DirectionContext);
+  return localDir || globalDir || "ltr";
+}
+
+// ../../node_modules/@radix-ui/react-use-previous/dist/index.mjs
+var React7 = __toESM(require("react"), 1);
+function usePrevious(value) {
+  const ref = React7.useRef({ value, previous: value });
+  return React7.useMemo(() => {
+    if (ref.current.value !== value) {
+      ref.current.previous = ref.current.value;
+      ref.current.value = value;
+    }
+    return ref.current.previous;
+  }, [value]);
+}
+
+// ../../node_modules/@radix-ui/react-use-size/dist/index.mjs
+var React8 = __toESM(require("react"), 1);
+function useSize(element) {
+  const [size, setSize] = React8.useState(void 0);
+  useLayoutEffect2(() => {
+    if (element) {
+      setSize({ width: element.offsetWidth, height: element.offsetHeight });
+      const resizeObserver = new ResizeObserver((entries) => {
+        if (!Array.isArray(entries)) {
+          return;
+        }
+        if (!entries.length) {
+          return;
+        }
+        const entry = entries[0];
+        let width;
+        let height;
+        if ("borderBoxSize" in entry) {
+          const borderSizeEntry = entry["borderBoxSize"];
+          const borderSize = Array.isArray(borderSizeEntry) ? borderSizeEntry[0] : borderSizeEntry;
+          width = borderSize["inlineSize"];
+          height = borderSize["blockSize"];
+        } else {
+          width = element.offsetWidth;
+          height = element.offsetHeight;
+        }
+        setSize({ width, height });
+      });
+      resizeObserver.observe(element, { box: "border-box" });
+      return () => resizeObserver.unobserve(element);
+    } else {
+      setSize(void 0);
+    }
+  }, [element]);
+  return size;
+}
+
+// ../../node_modules/@radix-ui/react-primitive/dist/index.mjs
+var React9 = __toESM(require("react"), 1);
+var ReactDOM = __toESM(require("react-dom"), 1);
+var import_react_slot2 = require("@radix-ui/react-slot");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var NODES = [
+  "a",
+  "button",
+  "div",
+  "form",
+  "h2",
+  "h3",
+  "img",
+  "input",
+  "label",
+  "li",
+  "nav",
+  "ol",
+  "p",
+  "select",
+  "span",
+  "svg",
+  "ul"
+];
+var Primitive = NODES.reduce((primitive, node) => {
+  const Slot2 = (0, import_react_slot2.createSlot)(`Primitive.${node}`);
+  const Node2 = React9.forwardRef((props, forwardedRef) => {
+    const { asChild, ...primitiveProps } = props;
+    const Comp = asChild ? Slot2 : node;
+    if (typeof window !== "undefined") {
+      window[Symbol.for("radix-ui")] = true;
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Comp, { ...primitiveProps, ref: forwardedRef });
+  });
+  Node2.displayName = `Primitive.${node}`;
+  return { ...primitive, [node]: Node2 };
+}, {});
+
+// ../../node_modules/@radix-ui/react-collection/dist/index.mjs
+var import_react8 = __toESM(require("react"), 1);
+var import_react_slot3 = require("@radix-ui/react-slot");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_react9 = __toESM(require("react"), 1);
+var import_react_slot4 = require("@radix-ui/react-slot");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+function createCollection(name) {
+  const PROVIDER_NAME = name + "CollectionProvider";
+  const [createCollectionContext, createCollectionScope2] = createContextScope(PROVIDER_NAME);
+  const [CollectionProviderImpl, useCollectionContext] = createCollectionContext(
+    PROVIDER_NAME,
+    { collectionRef: { current: null }, itemMap: /* @__PURE__ */ new Map() }
+  );
+  const CollectionProvider = (props) => {
+    const { scope, children } = props;
+    const ref = import_react8.default.useRef(null);
+    const itemMap = import_react8.default.useRef(/* @__PURE__ */ new Map()).current;
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CollectionProviderImpl, { scope, itemMap, collectionRef: ref, children });
+  };
+  CollectionProvider.displayName = PROVIDER_NAME;
+  const COLLECTION_SLOT_NAME = name + "CollectionSlot";
+  const CollectionSlotImpl = (0, import_react_slot3.createSlot)(COLLECTION_SLOT_NAME);
+  const CollectionSlot = import_react8.default.forwardRef(
+    (props, forwardedRef) => {
+      const { scope, children } = props;
+      const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);
+      const composedRefs = useComposedRefs(forwardedRef, context.collectionRef);
+      return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CollectionSlotImpl, { ref: composedRefs, children });
+    }
+  );
+  CollectionSlot.displayName = COLLECTION_SLOT_NAME;
+  const ITEM_SLOT_NAME = name + "CollectionItemSlot";
+  const ITEM_DATA_ATTR = "data-radix-collection-item";
+  const CollectionItemSlotImpl = (0, import_react_slot3.createSlot)(ITEM_SLOT_NAME);
+  const CollectionItemSlot = import_react8.default.forwardRef(
+    (props, forwardedRef) => {
+      const { scope, children, ...itemData } = props;
+      const ref = import_react8.default.useRef(null);
+      const composedRefs = useComposedRefs(forwardedRef, ref);
+      const context = useCollectionContext(ITEM_SLOT_NAME, scope);
+      import_react8.default.useEffect(() => {
+        context.itemMap.set(ref, { ref, ...itemData });
+        return () => void context.itemMap.delete(ref);
+      });
+      return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CollectionItemSlotImpl, { ...{ [ITEM_DATA_ATTR]: "" }, ref: composedRefs, children });
+    }
+  );
+  CollectionItemSlot.displayName = ITEM_SLOT_NAME;
+  function useCollection2(scope) {
+    const context = useCollectionContext(name + "CollectionConsumer", scope);
+    const getItems = import_react8.default.useCallback(() => {
+      const collectionNode = context.collectionRef.current;
+      if (!collectionNode) return [];
+      const orderedNodes = Array.from(collectionNode.querySelectorAll(`[${ITEM_DATA_ATTR}]`));
+      const items = Array.from(context.itemMap.values());
+      const orderedItems = items.sort(
+        (a, b) => orderedNodes.indexOf(a.ref.current) - orderedNodes.indexOf(b.ref.current)
+      );
+      return orderedItems;
+    }, [context.collectionRef, context.itemMap]);
+    return getItems;
+  }
+  return [
+    { Provider: CollectionProvider, Slot: CollectionSlot, ItemSlot: CollectionItemSlot },
+    useCollection2,
+    createCollectionScope2
+  ];
+}
+
+// ../../node_modules/@radix-ui/react-slider/dist/index.mjs
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var PAGE_KEYS = ["PageUp", "PageDown"];
+var ARROW_KEYS = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"];
+var BACK_KEYS = {
+  "from-left": ["Home", "PageDown", "ArrowDown", "ArrowLeft"],
+  "from-right": ["Home", "PageDown", "ArrowDown", "ArrowRight"],
+  "from-bottom": ["Home", "PageDown", "ArrowDown", "ArrowLeft"],
+  "from-top": ["Home", "PageDown", "ArrowUp", "ArrowLeft"]
+};
+var SLIDER_NAME = "Slider";
+var [Collection, useCollection, createCollectionScope] = createCollection(SLIDER_NAME);
+var [createSliderContext, createSliderScope] = createContextScope(SLIDER_NAME, [
+  createCollectionScope
+]);
+var [SliderProvider, useSliderContext] = createSliderContext(SLIDER_NAME);
+var Slider = React11.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      name,
+      min = 0,
+      max = 100,
+      step = 1,
+      orientation = "horizontal",
+      disabled = false,
+      minStepsBetweenThumbs = 0,
+      defaultValue = [min],
+      value,
+      onValueChange = () => {
+      },
+      onValueCommit = () => {
+      },
+      inverted = false,
+      form,
+      ...sliderProps
+    } = props;
+    const thumbRefs = React11.useRef(/* @__PURE__ */ new Set());
+    const valueIndexToChangeRef = React11.useRef(0);
+    const isHorizontal = orientation === "horizontal";
+    const SliderOrientation = isHorizontal ? SliderHorizontal : SliderVertical;
+    const [values = [], setValues] = useControllableState({
+      prop: value,
+      defaultProp: defaultValue,
+      onChange: (value2) => {
+        const thumbs = [...thumbRefs.current];
+        thumbs[valueIndexToChangeRef.current]?.focus();
+        onValueChange(value2);
+      }
+    });
+    const valuesBeforeSlideStartRef = React11.useRef(values);
+    function handleSlideStart(value2) {
+      const closestIndex = getClosestValueIndex(values, value2);
+      updateValues(value2, closestIndex);
+    }
+    function handleSlideMove(value2) {
+      updateValues(value2, valueIndexToChangeRef.current);
+    }
+    function handleSlideEnd() {
+      const prevValue = valuesBeforeSlideStartRef.current[valueIndexToChangeRef.current];
+      const nextValue = values[valueIndexToChangeRef.current];
+      const hasChanged = nextValue !== prevValue;
+      if (hasChanged) onValueCommit(values);
+    }
+    function updateValues(value2, atIndex, { commit } = { commit: false }) {
+      const decimalCount = getDecimalCount(step);
+      const snapToStep = roundValue(Math.round((value2 - min) / step) * step + min, decimalCount);
+      const nextValue = clamp(snapToStep, [min, max]);
+      setValues((prevValues = []) => {
+        const nextValues = getNextSortedValues(prevValues, nextValue, atIndex);
+        if (hasMinStepsBetweenValues(nextValues, minStepsBetweenThumbs * step)) {
+          valueIndexToChangeRef.current = nextValues.indexOf(nextValue);
+          const hasChanged = String(nextValues) !== String(prevValues);
+          if (hasChanged && commit) onValueCommit(nextValues);
+          return hasChanged ? nextValues : prevValues;
+        } else {
+          return prevValues;
+        }
+      });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      SliderProvider,
+      {
+        scope: props.__scopeSlider,
+        name,
+        disabled,
+        min,
+        max,
+        valueIndexToChangeRef,
+        thumbs: thumbRefs.current,
+        values,
+        orientation,
+        form,
+        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Collection.Provider, { scope: props.__scopeSlider, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Collection.Slot, { scope: props.__scopeSlider, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          SliderOrientation,
+          {
+            "aria-disabled": disabled,
+            "data-disabled": disabled ? "" : void 0,
+            ...sliderProps,
+            ref: forwardedRef,
+            onPointerDown: composeEventHandlers(sliderProps.onPointerDown, () => {
+              if (!disabled) valuesBeforeSlideStartRef.current = values;
+            }),
+            min,
+            max,
+            inverted,
+            onSlideStart: disabled ? void 0 : handleSlideStart,
+            onSlideMove: disabled ? void 0 : handleSlideMove,
+            onSlideEnd: disabled ? void 0 : handleSlideEnd,
+            onHomeKeyDown: () => !disabled && updateValues(min, 0, { commit: true }),
+            onEndKeyDown: () => !disabled && updateValues(max, values.length - 1, { commit: true }),
+            onStepKeyDown: ({ event, direction: stepDirection }) => {
+              if (!disabled) {
+                const isPageKey = PAGE_KEYS.includes(event.key);
+                const isSkipKey = isPageKey || event.shiftKey && ARROW_KEYS.includes(event.key);
+                const multiplier = isSkipKey ? 10 : 1;
+                const atIndex = valueIndexToChangeRef.current;
+                const value2 = values[atIndex];
+                const stepInDirection = step * multiplier * stepDirection;
+                updateValues(value2 + stepInDirection, atIndex, { commit: true });
+              }
+            }
+          }
+        ) }) })
+      }
+    );
+  }
+);
+Slider.displayName = SLIDER_NAME;
+var [SliderOrientationProvider, useSliderOrientationContext] = createSliderContext(SLIDER_NAME, {
+  startEdge: "left",
+  endEdge: "right",
+  size: "width",
+  direction: 1
+});
+var SliderHorizontal = React11.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      min,
+      max,
+      dir,
+      inverted,
+      onSlideStart,
+      onSlideMove,
+      onSlideEnd,
+      onStepKeyDown,
+      ...sliderProps
+    } = props;
+    const [slider, setSlider] = React11.useState(null);
+    const composedRefs = useComposedRefs(forwardedRef, (node) => setSlider(node));
+    const rectRef = React11.useRef(void 0);
+    const direction = useDirection(dir);
+    const isDirectionLTR = direction === "ltr";
+    const isSlidingFromLeft = isDirectionLTR && !inverted || !isDirectionLTR && inverted;
+    function getValueFromPointer(pointerPosition) {
+      const rect = rectRef.current || slider.getBoundingClientRect();
+      const input = [0, rect.width];
+      const output = isSlidingFromLeft ? [min, max] : [max, min];
+      const value = linearScale(input, output);
+      rectRef.current = rect;
+      return value(pointerPosition - rect.left);
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      SliderOrientationProvider,
       {
-        onClick: onSelect,
-        className: cn("bg-primary/8 cursor-pointer overflow-hidden rounded-md border-1 border-transparent", {
-          "border-primary": isSelected
+        scope: props.__scopeSlider,
+        startEdge: isSlidingFromLeft ? "left" : "right",
+        endEdge: isSlidingFromLeft ? "right" : "left",
+        direction: isSlidingFromLeft ? 1 : -1,
+        size: "width",
+        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          SliderImpl,
+          {
+            dir: direction,
+            "data-orientation": "horizontal",
+            ...sliderProps,
+            ref: composedRefs,
+            style: {
+              ...sliderProps.style,
+              ["--radix-slider-thumb-transform"]: "translateX(-50%)"
+            },
+            onSlideStart: (event) => {
+              const value = getValueFromPointer(event.clientX);
+              onSlideStart?.(value);
+            },
+            onSlideMove: (event) => {
+              const value = getValueFromPointer(event.clientX);
+              onSlideMove?.(value);
+            },
+            onSlideEnd: () => {
+              rectRef.current = void 0;
+              onSlideEnd?.();
+            },
+            onStepKeyDown: (event) => {
+              const slideDirection = isSlidingFromLeft ? "from-left" : "from-right";
+              const isBackKey = BACK_KEYS[slideDirection].includes(event.key);
+              onStepKeyDown?.({ event, direction: isBackKey ? -1 : 1 });
+            }
+          }
+        )
+      }
+    );
+  }
+);
+var SliderVertical = React11.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      min,
+      max,
+      inverted,
+      onSlideStart,
+      onSlideMove,
+      onSlideEnd,
+      onStepKeyDown,
+      ...sliderProps
+    } = props;
+    const sliderRef = React11.useRef(null);
+    const ref = useComposedRefs(forwardedRef, sliderRef);
+    const rectRef = React11.useRef(void 0);
+    const isSlidingFromBottom = !inverted;
+    function getValueFromPointer(pointerPosition) {
+      const rect = rectRef.current || sliderRef.current.getBoundingClientRect();
+      const input = [0, rect.height];
+      const output = isSlidingFromBottom ? [max, min] : [min, max];
+      const value = linearScale(input, output);
+      rectRef.current = rect;
+      return value(pointerPosition - rect.top);
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      SliderOrientationProvider,
+      {
+        scope: props.__scopeSlider,
+        startEdge: isSlidingFromBottom ? "bottom" : "top",
+        endEdge: isSlidingFromBottom ? "top" : "bottom",
+        size: "height",
+        direction: isSlidingFromBottom ? 1 : -1,
+        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          SliderImpl,
+          {
+            "data-orientation": "vertical",
+            ...sliderProps,
+            ref,
+            style: {
+              ...sliderProps.style,
+              ["--radix-slider-thumb-transform"]: "translateY(50%)"
+            },
+            onSlideStart: (event) => {
+              const value = getValueFromPointer(event.clientY);
+              onSlideStart?.(value);
+            },
+            onSlideMove: (event) => {
+              const value = getValueFromPointer(event.clientY);
+              onSlideMove?.(value);
+            },
+            onSlideEnd: () => {
+              rectRef.current = void 0;
+              onSlideEnd?.();
+            },
+            onStepKeyDown: (event) => {
+              const slideDirection = isSlidingFromBottom ? "from-bottom" : "from-top";
+              const isBackKey = BACK_KEYS[slideDirection].includes(event.key);
+              onStepKeyDown?.({ event, direction: isBackKey ? -1 : 1 });
+            }
+          }
+        )
+      }
+    );
+  }
+);
+var SliderImpl = React11.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      __scopeSlider,
+      onSlideStart,
+      onSlideMove,
+      onSlideEnd,
+      onHomeKeyDown,
+      onEndKeyDown,
+      onStepKeyDown,
+      ...sliderProps
+    } = props;
+    const context = useSliderContext(SLIDER_NAME, __scopeSlider);
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      Primitive.span,
+      {
+        ...sliderProps,
+        ref: forwardedRef,
+        onKeyDown: composeEventHandlers(props.onKeyDown, (event) => {
+          if (event.key === "Home") {
+            onHomeKeyDown(event);
+            event.preventDefault();
+          } else if (event.key === "End") {
+            onEndKeyDown(event);
+            event.preventDefault();
+          } else if (PAGE_KEYS.concat(ARROW_KEYS).includes(event.key)) {
+            onStepKeyDown(event);
+            event.preventDefault();
+          }
         }),
+        onPointerDown: composeEventHandlers(props.onPointerDown, (event) => {
+          const target = event.target;
+          target.setPointerCapture(event.pointerId);
+          event.preventDefault();
+          if (context.thumbs.has(target)) {
+            target.focus();
+          } else {
+            onSlideStart(event);
+          }
+        }),
+        onPointerMove: composeEventHandlers(props.onPointerMove, (event) => {
+          const target = event.target;
+          if (target.hasPointerCapture(event.pointerId)) onSlideMove(event);
+        }),
+        onPointerUp: composeEventHandlers(props.onPointerUp, (event) => {
+          const target = event.target;
+          if (target.hasPointerCapture(event.pointerId)) {
+            target.releasePointerCapture(event.pointerId);
+            onSlideEnd(event);
+          }
+        })
+      }
+    );
+  }
+);
+var TRACK_NAME = "SliderTrack";
+var SliderTrack = React11.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeSlider, ...trackProps } = props;
+    const context = useSliderContext(TRACK_NAME, __scopeSlider);
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      Primitive.span,
+      {
+        "data-disabled": context.disabled ? "" : void 0,
+        "data-orientation": context.orientation,
+        ...trackProps,
+        ref: forwardedRef
+      }
+    );
+  }
+);
+SliderTrack.displayName = TRACK_NAME;
+var RANGE_NAME = "SliderRange";
+var SliderRange = React11.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeSlider, ...rangeProps } = props;
+    const context = useSliderContext(RANGE_NAME, __scopeSlider);
+    const orientation = useSliderOrientationContext(RANGE_NAME, __scopeSlider);
+    const ref = React11.useRef(null);
+    const composedRefs = useComposedRefs(forwardedRef, ref);
+    const valuesCount = context.values.length;
+    const percentages = context.values.map(
+      (value) => convertValueToPercentage(value, context.min, context.max)
+    );
+    const offsetStart = valuesCount > 1 ? Math.min(...percentages) : 0;
+    const offsetEnd = 100 - Math.max(...percentages);
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      Primitive.span,
+      {
+        "data-orientation": context.orientation,
+        "data-disabled": context.disabled ? "" : void 0,
+        ...rangeProps,
+        ref: composedRefs,
+        style: {
+          ...props.style,
+          [orientation.startEdge]: offsetStart + "%",
+          [orientation.endEdge]: offsetEnd + "%"
+        }
+      }
+    );
+  }
+);
+SliderRange.displayName = RANGE_NAME;
+var THUMB_NAME = "SliderThumb";
+var SliderThumb = React11.forwardRef(
+  (props, forwardedRef) => {
+    const getItems = useCollection(props.__scopeSlider);
+    const [thumb, setThumb] = React11.useState(null);
+    const composedRefs = useComposedRefs(forwardedRef, (node) => setThumb(node));
+    const index = React11.useMemo(
+      () => thumb ? getItems().findIndex((item) => item.ref.current === thumb) : -1,
+      [getItems, thumb]
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SliderThumbImpl, { ...props, ref: composedRefs, index });
+  }
+);
+var SliderThumbImpl = React11.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeSlider, index, name, ...thumbProps } = props;
+    const context = useSliderContext(THUMB_NAME, __scopeSlider);
+    const orientation = useSliderOrientationContext(THUMB_NAME, __scopeSlider);
+    const [thumb, setThumb] = React11.useState(null);
+    const composedRefs = useComposedRefs(forwardedRef, (node) => setThumb(node));
+    const isFormControl = thumb ? context.form || !!thumb.closest("form") : true;
+    const size = useSize(thumb);
+    const value = context.values[index];
+    const percent = value === void 0 ? 0 : convertValueToPercentage(value, context.min, context.max);
+    const label = getLabel(index, context.values.length);
+    const orientationSize = size?.[orientation.size];
+    const thumbInBoundsOffset = orientationSize ? getThumbInBoundsOffset(orientationSize, percent, orientation.direction) : 0;
+    React11.useEffect(() => {
+      if (thumb) {
+        context.thumbs.add(thumb);
+        return () => {
+          context.thumbs.delete(thumb);
+        };
+      }
+    }, [thumb, context.thumbs]);
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+      "span",
+      {
+        style: {
+          transform: "var(--radix-slider-thumb-transform)",
+          position: "absolute",
+          [orientation.startEdge]: `calc(${percent}% + ${thumbInBoundsOffset}px)`
+        },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: cn("flex h-11 w-full", { "bg-black/4": isSelected }), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-              "div",
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Collection.ItemSlot, { scope: props.__scopeSlider, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            Primitive.span,
+            {
+              role: "slider",
+              "aria-label": props["aria-label"] || label,
+              "aria-valuemin": context.min,
+              "aria-valuenow": value,
+              "aria-valuemax": context.max,
+              "aria-orientation": context.orientation,
+              "data-orientation": context.orientation,
+              "data-disabled": context.disabled ? "" : void 0,
+              tabIndex: context.disabled ? void 0 : 0,
+              ...thumbProps,
+              ref: composedRefs,
+              style: value === void 0 ? { display: "none" } : props.style,
+              onFocus: composeEventHandlers(props.onFocus, () => {
+                context.valueIndexToChangeRef.current = index;
+              })
+            }
+          ) }),
+          isFormControl && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            SliderBubbleInput,
+            {
+              name: name ?? (context.name ? context.name + (context.values.length > 1 ? "[]" : "") : void 0),
+              form: context.form,
+              value
+            },
+            index
+          )
+        ]
+      }
+    );
+  }
+);
+SliderThumb.displayName = THUMB_NAME;
+var BUBBLE_INPUT_NAME = "RadioBubbleInput";
+var SliderBubbleInput = React11.forwardRef(
+  ({ __scopeSlider, value, ...props }, forwardedRef) => {
+    const ref = React11.useRef(null);
+    const composedRefs = useComposedRefs(ref, forwardedRef);
+    const prevValue = usePrevious(value);
+    React11.useEffect(() => {
+      const input = ref.current;
+      if (!input) return;
+      const inputProto = window.HTMLInputElement.prototype;
+      const descriptor = Object.getOwnPropertyDescriptor(inputProto, "value");
+      const setValue = descriptor.set;
+      if (prevValue !== value && setValue) {
+        const event = new Event("input", { bubbles: true });
+        setValue.call(input, value);
+        input.dispatchEvent(event);
+      }
+    }, [prevValue, value]);
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      Primitive.input,
+      {
+        style: { display: "none" },
+        ...props,
+        ref: composedRefs,
+        defaultValue: value
+      }
+    );
+  }
+);
+SliderBubbleInput.displayName = BUBBLE_INPUT_NAME;
+function getNextSortedValues(prevValues = [], nextValue, atIndex) {
+  const nextValues = [...prevValues];
+  nextValues[atIndex] = nextValue;
+  return nextValues.sort((a, b) => a - b);
+}
+function convertValueToPercentage(value, min, max) {
+  const maxSteps = max - min;
+  const percentPerStep = 100 / maxSteps;
+  const percentage = percentPerStep * (value - min);
+  return clamp(percentage, [0, 100]);
+}
+function getLabel(index, totalValues) {
+  if (totalValues > 2) {
+    return `Value ${index + 1} of ${totalValues}`;
+  } else if (totalValues === 2) {
+    return ["Minimum", "Maximum"][index];
+  } else {
+    return void 0;
+  }
+}
+function getClosestValueIndex(values, nextValue) {
+  if (values.length === 1) return 0;
+  const distances = values.map((value) => Math.abs(value - nextValue));
+  const closestDistance = Math.min(...distances);
+  return distances.indexOf(closestDistance);
+}
+function getThumbInBoundsOffset(width, left, direction) {
+  const halfWidth = width / 2;
+  const halfPercent = 50;
+  const offset = linearScale([0, halfPercent], [0, halfWidth]);
+  return (halfWidth - offset(left) * direction) * direction;
+}
+function getStepsBetweenValues(values) {
+  return values.slice(0, -1).map((value, index) => values[index + 1] - value);
+}
+function hasMinStepsBetweenValues(values, minStepsBetweenValues) {
+  if (minStepsBetweenValues > 0) {
+    const stepsBetweenValues = getStepsBetweenValues(values);
+    const actualMinStepsBetweenValues = Math.min(...stepsBetweenValues);
+    return actualMinStepsBetweenValues >= minStepsBetweenValues;
+  }
+  return true;
+}
+function linearScale(input, output) {
+  return (value) => {
+    if (input[0] === input[1] || output[0] === output[1]) return output[0];
+    const ratio = (output[1] - output[0]) / (input[1] - input[0]);
+    return output[0] + ratio * (value - input[0]);
+  };
+}
+function getDecimalCount(value) {
+  return (String(value).split(".")[1] || "").length;
+}
+function roundValue(value, decimalCount) {
+  const rounder = Math.pow(10, decimalCount);
+  return Math.round(value * rounder) / rounder;
+}
+var Root5 = Slider;
+var Track = SliderTrack;
+var Range = SliderRange;
+var Thumb2 = SliderThumb;
+
+// ../ui/src/lib/utils.ts
+var import_clsx2 = require("clsx");
+var import_tailwind_merge2 = require("tailwind-merge");
+function cn2(...inputs) {
+  return (0, import_tailwind_merge2.twMerge)((0, import_clsx2.clsx)(inputs));
+}
+
+// src/ui/slider.tsx
+var import_jsx_runtime23 = require("react/jsx-runtime");
+function Slider2({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  ...props
+}) {
+  const _values = React12.useMemo(
+    () => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max],
+    [value, defaultValue, min, max]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+    Root5,
+    {
+      "data-slot": "slider",
+      defaultValue,
+      value,
+      min,
+      max,
+      className: cn2(
+        "relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          Track,
+          {
+            "data-slot": "slider-track",
+            className: cn2(
+              "bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
+            ),
+            children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              Range,
               {
-                className: cn("flex h-full w-11 items-center justify-center bg-black/10", {
-                  "bg-primary": isSelected
-                }),
-                children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-white", children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "bg-primary h-2.5 w-2.5 rounded-full" }) })
+                "data-slot": "slider-range",
+                className: cn2("bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full")
               }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex h-full w-full items-center justify-between gap-4 px-3", children })
+            )
+          }
+        ),
+        Array.from({ length: _values.length }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          Thumb2,
+          {
+            "data-slot": "slider-thumb",
+            className: "border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+          },
+          index
+        ))
+      ]
+    }
+  );
+}
+
+// src/components/CreditCardTab/Points/PointsSelector.tsx
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var PointsSelector = (props) => {
+  const { isSelected, onSelect, children } = props;
+  const { balance } = useSlapiBalance();
+  const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
+  const { appProps, staticConfig } = useStaticConfig();
+  const min = 0;
+  const max = Math.min((appProps.amount ?? 0) * staticConfig.pointsConversionRatio, balance?.availablePoints ?? 0);
+  const step = 10;
+  const [splitTokens, setSplitTokens] = (0, import_react10.useState)(0);
+  const splitAmount = getSplitAmount(appProps.amount ?? 0, splitTokens, staticConfig.pointsConversionRatio);
+  const handleCommit = (value) => {
+    setSelectedPaymentMethod({ ...selectedPaymentMethod, splitAmount: value });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+    "button",
+    {
+      onClick: onSelect,
+      className: cn("bg-primary/8 cursor-pointer overflow-hidden rounded-md border-1 border-transparent", {
+        "border-primary": isSelected
+      }),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: cn("flex h-11 w-full", { "bg-black/4": isSelected }), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            "div",
+            {
+              className: cn("flex h-full w-11 items-center justify-center bg-black/10", {
+                "bg-primary": isSelected
+              }),
+              children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-white", children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "bg-primary h-2.5 w-2.5 rounded-full" }) })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex h-full w-full items-center justify-between gap-3 px-3", children })
+        ] }),
+        isSelected && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "px-3 pt-6 pb-2 md:px-4", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex justify-between gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex max-w-[100px] flex-col gap-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Input, { readOnly: true, value: splitTokens, className: "bg-white text-center font-medium" }),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-left text-xs leading-[20px] text-black/45", children: "Points" })
           ] }),
-          isSelected && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "px-4 pt-6 pb-2", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { children: "Card" }) })
-        ]
-      }
-    )
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex w-full items-center pb-6", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            Slider2,
+            {
+              value: [splitTokens],
+              onValueCommit: ([v]) => handleCommit(v),
+              onValueChange: ([v]) => setSplitTokens(v),
+              min,
+              max,
+              step
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex max-w-[100px] flex-col gap-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+              Input,
+              {
+                readOnly: true,
+                value: formatUSD(splitAmount + getTransactionFee(splitAmount, appProps.transactionFeePercentage)),
+                className: "bg-white text-center font-medium"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-left text-xs leading-[20px] text-black/45", children: "Card" })
+          ] })
+        ] }) })
+      ]
+    }
   );
 };
-var CreditCardTab = ({ pointsTitle, pointsConversionRatio }) => {
-  const [usePoints, setUsePoints] = (0, import_react7.useState)(false);
-  const [selectedPointsType, setSelectedPointsType] = (0, import_react7.useState)(null);
+
+// src/components/CreditCardTab/Points/SplitBlock.tsx
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var SplitBlock = (props) => {
+  const { isSelected, onSelect } = props;
   const { balance, isBalanceLoading } = useSlapiBalance();
-  const { selectedPaymentMethod } = useSpreePaymentMethod();
+  const { spreePayConfig } = useSpreePayConfig();
+  const [address, setAddress] = (0, import_react11.useState)(null);
+  const { staticConfig } = useStaticConfig();
+  const { pointsConversionRatio, pointsTitle } = staticConfig;
+  const initWallet = (0, import_react11.useCallback)(async (pointsChain) => {
+    if (!pointsChain) {
+      return;
+    }
+    try {
+      const res = await getAirWallet({
+        mocaChain: pointsChain.mocaChain,
+        partnerId: pointsChain.partnerId
+      });
+      setAddress(res.address ?? null);
+    } catch (e) {
+      console.error("Air Wallet init failed:", e);
+    }
+  }, []);
+  (0, import_react11.useEffect)(() => {
+    initWallet(spreePayConfig?.pointsChain);
+  }, [spreePayConfig, initWallet]);
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex flex-col gap-1", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(PointsSelector, { onSelect: () => onSelect("air"), isSelected, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex items-center gap-2", children: balance?.availablePoints ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("p", { className: "text-sm font-medium text-black", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-black/50", children: "Available" }),
+      " ",
+      formatPoints(balance.availablePoints, pointsTitle),
+      " ",
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-black/50", children: formatUSD(balance.availablePoints / pointsConversionRatio) })
+    ] }) : null }),
+    isBalanceLoading ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "h-4 w-6 animate-pulse bg-gray-200" }) : !balance?.availablePoints && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "text-sm font-medium text-black", children: "No points available" }),
+    address && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "text-sm font-medium text-black", children: address.length > 8 ? `${address.slice(0, 4)}...${address.slice(-4)}` : address })
+  ] }) });
+};
+
+// src/components/CreditCardTab/Points/Points.tsx
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var Points = () => {
+  const [usePoints, setUsePoints] = (0, import_react12.useState)(false);
+  const [selectedPointsType, setSelectedPointsType] = (0, import_react12.useState)(null);
+  const { setSelectedPaymentMethod, selectedPaymentMethod } = useSpreePaymentMethod();
+  const handleTogglePoints = (enabled) => {
+    setUsePoints(enabled);
+    if (!enabled) {
+      setSelectedPointsType(null);
+      setSelectedPaymentMethod({ ...selectedPaymentMethod, splitAmount: void 0 });
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(PointsSwitch, { value: usePoints, onChange: handleTogglePoints }),
+    usePoints && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SplitBlock, { isSelected: selectedPointsType === "air", onSelect: setSelectedPointsType })
+  ] });
+};
+
+// src/components/CreditCardTab/CreditCardTab.tsx
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var CreditCardTab = () => {
+  const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
   const { register } = useSpreePayRegister();
-  const { env } = useSpreePayEnv();
-  const handlePay = (0, import_react7.useCallback)(
+  const { mutateCards } = useCards();
+  const { cardPayment } = useCardPayment();
+  const { splitPayment } = useSplitCardPayments();
+  const handlePay = (0, import_react13.useCallback)(
     async (data) => {
       try {
         if (selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && selectedPaymentMethod.method) {
-          const res = await cardPayment({
-            ...data,
-            card: selectedPaymentMethod.method,
-            redirect3dsURI: env.redirect3dsURI
-          });
+          let res = null;
+          if (selectedPaymentMethod.splitAmount && selectedPaymentMethod.splitAmount > 0) {
+            res = await splitPayment({ ...data, points: selectedPaymentMethod.splitAmount });
+          } else {
+            res = await cardPayment(data);
+          }
           if (["AUTHORIZED" /* AUTHORIZED */, "CAPTURED" /* CAPTURED */].includes(res.status)) {
             return Promise.resolve(res);
           }
@@ -1036,55 +2419,25 @@ var CreditCardTab = ({ pointsTitle, pointsConversionRatio }) => {
         return Promise.reject(new PaymentError("Unsupported payment method", "FAILED" /* FAILED */));
       } catch (_) {
         return Promise.reject(new PaymentError("Payment failed", "FAILED" /* FAILED */));
+      } finally {
+        setSelectedPaymentMethod({ ...selectedPaymentMethod, type: "CREDIT_CARD" /* CREDIT_CARD */, method: null });
+        mutateCards();
       }
     },
-    [env.redirect3dsURI, selectedPaymentMethod]
+    [mutateCards, selectedPaymentMethod, setSelectedPaymentMethod, cardPayment, splitPayment]
   );
-  (0, import_react7.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     register(handlePay);
   }, [register, handlePay]);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "border-b-1 border-black/7 px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(CreditCard, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-col gap-6 px-5 py-5 md:px-7 md:py-6", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-        PointsSwitch,
-        {
-          disabled: true,
-          value: usePoints,
-          onChange: setUsePoints,
-          pointsTitle,
-          pointsConversionRatio
-        }
-      ),
-      usePoints && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(PointsSelector, { onSelect: () => setSelectedPointsType("slapi"), isSelected: selectedPointsType === "slapi", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-sm font-medium text-black", children: "from [Brand] Balance" }) }),
-          isBalanceLoading ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "h-4 w-6 animate-pulse bg-gray-200" }) : !balance?.availablePoints && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-sm font-medium text-black", children: "No points available" }),
-          balance?.availablePoints ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("p", { className: "text-sm font-medium text-black", children: [
-            formatPoints(balance.availablePoints, pointsTitle),
-            " ",
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-black/50", children: formatUSD(balance.availablePoints / pointsConversionRatio) })
-          ] }) : null
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
-          PointsSelector,
-          {
-            onSelect: () => setSelectedPointsType("wallet"),
-            isSelected: selectedPointsType === "wallet",
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-sm font-medium text-black", children: "from Crypto Wallet" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", { className: "hover:bg-primary -mr-2 h-[34px] rounded-sm border-1 border-black px-3 text-sm font-medium hover:text-white", children: "Connect a Wallet" })
-            ]
-          }
-        )
-      ] })
-    ] })
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "border-b-1 border-black/7 px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CreditCard, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex flex-col gap-6 px-5 pt-5 pb-5 md:px-7 md:pt-6 md:pb-7", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Points, {}) })
   ] });
 };
 
 // src/components/CryptoTab/Crypto/CryptoWrapper.tsx
 var import_react_query = require("@tanstack/react-query");
-var import_nice_modal_react5 = __toESM(require("@ebay/nice-modal-react"), 1);
+var import_nice_modal_react6 = __toESM(require("@ebay/nice-modal-react"), 1);
 var import_rainbowkit2 = require("@rainbow-me/rainbowkit");
 var import_styles = require("@rainbow-me/rainbowkit/styles.css");
 var import_wallets = require("@rainbow-me/rainbowkit/wallets");
@@ -1092,7 +2445,7 @@ var import_wagmi5 = require("wagmi");
 var import_chains = require("wagmi/chains");
 
 // src/components/CryptoTab/Crypto/Crypto.tsx
-var import_react8 = require("react");
+var import_react14 = require("react");
 var import_wagmi4 = require("wagmi");
 
 // ../../node_modules/@wagmi/core/dist/esm/utils/getAction.js
@@ -1116,7 +2469,7 @@ function readContract(config2, parameters) {
 }
 
 // ../../node_modules/@wagmi/core/dist/esm/actions/waitForTransactionReceipt.js
-var import_viem = require("viem");
+var import_viem2 = require("viem");
 var import_actions2 = require("viem/actions");
 async function waitForTransactionReceipt(config2, parameters) {
   const { chainId, timeout = 0, ...rest } = parameters;
@@ -1134,7 +2487,7 @@ async function waitForTransactionReceipt(config2, parameters) {
       maxFeePerGas: txn.type === "eip1559" ? txn.maxFeePerGas : void 0,
       maxPriorityFeePerGas: txn.type === "eip1559" ? txn.maxPriorityFeePerGas : void 0
     });
-    const reason = code?.data ? (0, import_viem.hexToString)(`0x${code.data.substring(138)}`) : "unknown reason";
+    const reason = code?.data ? (0, import_viem2.hexToString)(`0x${code.data.substring(138)}`) : "unknown reason";
     throw new Error(reason);
   }
   return {
@@ -1144,10 +2497,10 @@ async function waitForTransactionReceipt(config2, parameters) {
 }
 
 // ../../node_modules/@wagmi/core/dist/esm/exports/index.js
-var import_viem2 = require("viem");
+var import_viem3 = require("viem");
 
 // src/hooks/useCryptoPayment.ts
-var import_viem3 = require("viem");
+var import_viem4 = require("viem");
 var import_wagmi = require("wagmi");
 
 // src/config/baseTokens.ts
@@ -1210,14 +2563,14 @@ var useCryptoPayment = () => {
       }
       const allowance = await readContract(config2, {
         address: tokenAddress,
-        abi: import_viem3.erc20Abi,
+        abi: import_viem4.erc20Abi,
         functionName: "allowance",
         args: [walletClient.account.address, ONE_INCH_AGGREGATION_ROUTER_V6]
       });
       if (allowance <= 0n) {
         const result = await walletClient.writeContract({
           address: tokenAddress,
-          abi: import_viem3.erc20Abi,
+          abi: import_viem4.erc20Abi,
           functionName: "approve",
           args: [ONE_INCH_AGGREGATION_ROUTER_V6, MAX_UINT256]
         });
@@ -1261,13 +2614,13 @@ var useCryptoPayment = () => {
 
 // src/components/CryptoTab/Crypto/ConnectButton.tsx
 var import_rainbowkit = require("@rainbow-me/rainbowkit");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var ConnectButton = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_rainbowkit.ConnectButton.Custom, { children: ({ mounted, chain, account, openAccountModal, openChainModal, openConnectModal }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_rainbowkit.ConnectButton.Custom, { children: ({ mounted, chain, account, openAccountModal, openChainModal, openConnectModal }) => {
     if (!mounted) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, { children: (() => {
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_jsx_runtime28.Fragment, { children: (() => {
       if (!mounted || !account || !chain) {
-        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           "button",
           {
             className: "h-[34px] rounded-md border-1 border-black px-3 text-sm font-medium text-black",
@@ -1277,7 +2630,7 @@ var ConnectButton = () => {
         );
       }
       if (chain.unsupported) {
-        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           "button",
           {
             className: "h-[34px] rounded-md border-1 border-black px-3 text-sm font-medium text-red-500",
@@ -1286,13 +2639,13 @@ var ConnectButton = () => {
           }
         );
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
         "button",
         {
           className: "flex h-[34px] items-center gap-2 rounded-md border-1 border-black px-1.5 text-sm font-medium text-black",
           onClick: openAccountModal,
           children: [
-            chain.hasIcon && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "h-6 w-6 overflow-hidden rounded-full", style: { background: chain.iconBackground }, children: chain.iconUrl && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("img", { alt: chain.name ?? "Chain icon", src: chain.iconUrl }) }),
+            chain.hasIcon && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "h-6 w-6 overflow-hidden rounded-full", style: { background: chain.iconBackground }, children: chain.iconUrl && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("img", { alt: chain.name ?? "Chain icon", src: chain.iconUrl }) }),
             account.displayName
           ]
         }
@@ -1302,29 +2655,29 @@ var ConnectButton = () => {
 };
 
 // src/config/symbolLogos.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var MOCA_SVG = /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", fill: "none", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("circle", { cx: "14", cy: "14", r: "13.5", fill: "#C15F97" }),
-  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var MOCA_SVG = /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", fill: "none", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("circle", { cx: "14", cy: "14", r: "13.5", fill: "#C15F97" }),
+  /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     "path",
     {
       fill: "#fff",
       d: "M16.06 6.65c.3 0 .59.16.74.43l6.06 10.5a.85.85 0 1 1-1.47.84L16.06 9.2l-1.51 2.62-.02.03-3.8 6.57a.85.85 0 0 1-1.47-.84l3.57-6.18-1.27-2.2-5.32 9.22a.85.85 0 0 1-1.48-.84l6.07-10.5.06-.1a.85.85 0 0 1 1.4.1l1.52 2.62 1.52-2.62.06-.1c.16-.2.4-.33.67-.33Z"
     }
   ),
-  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("circle", { cx: "16", cy: "14", r: "1.5", fill: "#fff" })
+  /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("circle", { cx: "16", cy: "14", r: "1.5", fill: "#fff" })
 ] });
-var USDC_SVG = /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", fill: "none", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("g", { clipPath: "url(#clip0_528_9163)", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { fill: "#2775CA", d: "M14 28c7.76 0 14-6.24 14-14S21.76 0 14 0 0 6.24 0 14s6.24 14 14 14Z" }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+var USDC_SVG = /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", fill: "none", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("g", { clipPath: "url(#clip0_528_9163)", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("path", { fill: "#2775CA", d: "M14 28c7.76 0 14-6.24 14-14S21.76 0 14 0 0 6.24 0 14s6.24 14 14 14Z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       "path",
       {
         fill: "#fff",
         d: "M17.85 16.22c0-2.04-1.23-2.74-3.68-3.04-1.75-.23-2.1-.7-2.1-1.51 0-.82.59-1.34 1.75-1.34 1.05 0 1.64.35 1.93 1.22.06.18.23.3.4.3h.94a.4.4 0 0 0 .41-.42v-.05a2.91 2.91 0 0 0-2.63-2.4v-1.4c0-.23-.17-.4-.46-.46h-.88c-.23 0-.4.17-.46.46v1.35c-1.75.23-2.86 1.4-2.86 2.85 0 1.93 1.16 2.69 3.61 2.98 1.64.29 2.16.64 2.16 1.57 0 .94-.81 1.58-1.92 1.58-1.52 0-2.04-.64-2.22-1.52-.06-.23-.23-.35-.4-.35h-1a.4.4 0 0 0-.4.41v.06c.23 1.46 1.16 2.5 3.08 2.8v1.4c0 .23.18.4.47.47h.88c.23 0 .4-.18.46-.47v-1.4c1.75-.3 2.92-1.52 2.92-3.1Z"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       "path",
       {
         fill: "#fff",
@@ -1332,11 +2685,11 @@ var USDC_SVG = /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("svg", { xmlns: "h
       }
     )
   ] }),
-  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("clipPath", { id: "clip0_528_9163", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { fill: "#fff", d: "M0 0h28v28H0z" }) }) })
+  /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("clipPath", { id: "clip0_528_9163", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("path", { fill: "#fff", d: "M0 0h28v28H0z" }) }) })
 ] });
-var USDT_SVG = /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", fill: "none", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { fill: "#26A17B", d: "M14 28a14 14 0 1 0 0-28 14 14 0 0 0 0 28Z" }),
-  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+var USDT_SVG = /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", fill: "none", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("path", { fill: "#26A17B", d: "M14 28a14 14 0 1 0 0-28 14 14 0 0 0 0 28Z" }),
+  /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     "path",
     {
       fill: "#fff",
@@ -1344,23 +2697,23 @@ var USDT_SVG = /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("svg", { xmlns: "h
     }
   )
 ] });
-var WETH_SVG = /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", width: "28", height: "28", viewBox: "0 0 24 24", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("g", { clipPath: "url(#clip0_528_9173)", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+var WETH_SVG = /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", width: "28", height: "28", viewBox: "0 0 24 24", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("g", { clipPath: "url(#clip0_528_9173)", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       "path",
       {
         fill: "#000",
         d: "M17.14 20.57c0 .95-1.31 2.01-3.39 2.4h-2.59c-4.65 0-8.42-1.07-8.42-2.4 0-1.32 3.77-2.4 8.42-2.4s5.98 1.08 5.98 2.4Z"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       "path",
       {
         fill: "#F61F7D",
         d: "M23.31 11c0 5.86-5.18 11.63-11.07 11.63-5.9 0-11.9-6.17-11.9-12.03C.34 4.75 5.12 0 11.01 0s12.3 5.15 12.3 11Z"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       "path",
       {
         fill: "#000",
@@ -1369,8 +2722,8 @@ var WETH_SVG = /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("svg", { xmlns: "h
         clipRule: "evenodd"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { fill: "#fff", d: "M24 12.17a10.8 10.8 0 1 1-21.6 0 10.8 10.8 0 0 1 21.6 0Z" }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("path", { fill: "#fff", d: "M24 12.17a10.8 10.8 0 1 1-21.6 0 10.8 10.8 0 0 1 21.6 0Z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       "path",
       {
         fill: "#000",
@@ -1379,8 +2732,8 @@ var WETH_SVG = /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("svg", { xmlns: "h
         clipRule: "evenodd"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { fill: "#000", fillRule: "evenodd", d: "M3.02 10.63.7 8.75l.74-.86 2.34 1.87-.75.87Z", clipRule: "evenodd" }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("path", { fill: "#000", fillRule: "evenodd", d: "M3.02 10.63.7 8.75l.74-.86 2.34 1.87-.75.87Z", clipRule: "evenodd" }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       "path",
       {
         fill: "#000",
@@ -1388,7 +2741,7 @@ var WETH_SVG = /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("svg", { xmlns: "h
       }
     )
   ] }),
-  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("clipPath", { id: "clip0_528_9173", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { fill: "#fff", d: "M0 0h24v24H0z" }) }) })
+  /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("clipPath", { id: "clip0_528_9173", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("path", { fill: "#fff", d: "M0 0h24v24H0z" }) }) })
 ] });
 var symbolLogos = {
   MOCA: MOCA_SVG,
@@ -1401,34 +2754,34 @@ function getSymbolLogo(symbol) {
 }
 
 // src/components/CryptoTab/Crypto/Logos.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var Logos = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "rounded-full border border-[#F5F7FA]", children: getSymbolLogo("MOCA") }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "-ml-2.5 rounded-full border border-[#F5F7FA]", children: getSymbolLogo("USDC") }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "-ml-2.5 rounded-full border border-[#F5F7FA]", children: getSymbolLogo("USDT") }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "-ml-2.5 rounded-full border border-[#F5F7FA] bg-[#F5F7FA]", children: getSymbolLogo("WETH") })
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "rounded-full border border-[#F5F7FA]", children: getSymbolLogo("MOCA") }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "-ml-2.5 rounded-full border border-[#F5F7FA]", children: getSymbolLogo("USDC") }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "-ml-2.5 rounded-full border border-[#F5F7FA]", children: getSymbolLogo("USDT") }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "-ml-2.5 rounded-full border border-[#F5F7FA] bg-[#F5F7FA]", children: getSymbolLogo("WETH") })
   ] });
 };
 
 // src/components/CryptoTab/Crypto/SelectCoinButton.tsx
-var import_nice_modal_react4 = __toESM(require("@ebay/nice-modal-react"), 1);
+var import_nice_modal_react5 = __toESM(require("@ebay/nice-modal-react"), 1);
 
 // src/modals/CryptoSelectModal.tsx
-var import_nice_modal_react3 = __toESM(require("@ebay/nice-modal-react"), 1);
+var import_nice_modal_react4 = __toESM(require("@ebay/nice-modal-react"), 1);
 
 // src/hooks/useBaseERC20Token.ts
-var React2 = __toESM(require("react"), 1);
-var import_viem4 = require("viem");
+var React13 = __toESM(require("react"), 1);
+var import_viem5 = require("viem");
 var import_wagmi2 = require("wagmi");
 function useBaseERC20Token() {
   const { address } = (0, import_wagmi2.useAccount)();
   const baseClient = (0, import_wagmi2.usePublicClient)({ chainId: BASE_CHAIN_ID });
   const defaultClient = (0, import_wagmi2.usePublicClient)();
-  const [rows, setRows] = React2.useState([]);
-  const [isLoading, setLoading] = React2.useState(false);
-  const [error, setError] = React2.useState(null);
-  React2.useEffect(() => {
+  const [rows, setRows] = React13.useState([]);
+  const [isLoading, setLoading] = React13.useState(false);
+  const [error, setError] = React13.useState(null);
+  React13.useEffect(() => {
     let cancelled = false;
     async function run() {
       const client = baseClient ?? defaultClient;
@@ -1441,7 +2794,7 @@ function useBaseERC20Token() {
         const normalizedTokens = [];
         for (const t of BASE_TOKENS) {
           try {
-            const addr = (0, import_viem4.getAddress)(t.address);
+            const addr = (0, import_viem5.getAddress)(t.address);
             normalizedTokens.push({ ...t, address: addr });
           } catch {
           }
@@ -1450,7 +2803,7 @@ function useBaseERC20Token() {
           allowFailure: true,
           contracts: normalizedTokens.map((t) => ({
             address: t.address,
-            abi: import_viem4.erc20Abi,
+            abi: import_viem5.erc20Abi,
             functionName: "balanceOf",
             args: [address]
           }))
@@ -1461,7 +2814,7 @@ function useBaseERC20Token() {
           const t = normalizedTokens[idx];
           if (r.status === "success") {
             const raw = r.result;
-            if (raw > 0n) acc.push({ ...t, raw, formatted: (0, import_viem4.formatUnits)(raw, t.decimals) });
+            if (raw > 0n) acc.push({ ...t, raw, formatted: (0, import_viem5.formatUnits)(raw, t.decimals) });
           }
         }
         if (!cancelled) setRows(acc);
@@ -1502,9 +2855,9 @@ function useBaseNativeToken() {
 }
 
 // src/modals/CryptoSelectModal.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
-var CryptoSelectModal = import_nice_modal_react3.default.create(() => {
-  const modal = (0, import_nice_modal_react3.useModal)();
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var CryptoSelectModal = import_nice_modal_react4.default.create(() => {
+  const modal = (0, import_nice_modal_react4.useModal)();
   const { isLoading, error, erc20Balances } = useBaseERC20Token();
   const { isLoadingNative, nativeError, nativeBalance } = useBaseNativeToken();
   const { setSelectedPaymentMethod } = useSpreePaymentMethod();
@@ -1512,13 +2865,13 @@ var CryptoSelectModal = import_nice_modal_react3.default.create(() => {
     modal.remove();
     setSelectedPaymentMethod({ type: "CRYPTO" /* CRYPTO */, method: coin });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Dialog, { open: modal.visible, onOpenChange: modal.remove, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(DialogDescription, { className: "hidden", children: "Crypto Select Modal" }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(DialogContent, { showCloseButton: false, className: "gap-0 p-0", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "flex flex-col gap-6 px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("button", { className: "rounded-md hover:bg-gray-100", onClick: modal.remove, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "25", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { stroke: "#000", d: "m15 6.5-6 6 6 6" }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(DialogTitle, { className: "text-primary text-2xl font-semibold", children: "Select a token" }),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("button", { className: "rounded-md p-1 hover:bg-gray-100", onClick: modal.remove, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "17", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Dialog, { open: modal.visible, onOpenChange: modal.remove, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(DialogDescription, { className: "hidden", children: "Crypto Select Modal" }),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(DialogContent, { showCloseButton: false, className: "gap-0 p-0", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex flex-col gap-6 px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("button", { className: "rounded-md hover:bg-gray-100", onClick: modal.remove, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "25", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("path", { stroke: "#000", d: "m15 6.5-6 6 6 6" }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(DialogTitle, { className: "text-primary text-2xl font-semibold", children: "Select a token" }),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("button", { className: "rounded-md p-1 hover:bg-gray-100", onClick: modal.remove, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "17", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
           "path",
           {
             fill: "#000",
@@ -1526,19 +2879,19 @@ var CryptoSelectModal = import_nice_modal_react3.default.create(() => {
           }
         ) }) })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex flex-col gap-4 px-5 py-5 md:px-7 md:py-6", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h3", { className: "text-primary text-xl font-semibold", children: "Tokens with wallet balance" }),
-        (error || nativeError) && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-center text-sm text-red-500", children: "Something wrong" }),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex w-full flex-col gap-1", children: [
-          isLoadingNative && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
-          nativeBalance && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex flex-col gap-4 px-5 py-5 md:px-7 md:py-6", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("h3", { className: "text-primary text-xl font-semibold", children: "Tokens with wallet balance" }),
+        (error || nativeError) && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-center text-sm text-red-500", children: "Something wrong" }),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex w-full flex-col gap-1", children: [
+          isLoadingNative && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
+          nativeBalance && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
             "button",
             {
               className: "flex h-11 w-full items-center justify-between gap-4 rounded-sm px-1.5 text-black hover:bg-gray-100",
               onClick: () => handleSelect(nativeBalance),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-2", children: [
-                  nativeBalance.logoURI && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex items-center gap-2", children: [
+                  nativeBalance.logoURI && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                     "img",
                     {
                       className: "h-8 w-8 shrink-0",
@@ -1546,31 +2899,31 @@ var CryptoSelectModal = import_nice_modal_react3.default.create(() => {
                       alt: `${nativeBalance.symbol} logo`
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-sm font-medium", children: nativeBalance.symbol })
+                  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-sm font-medium", children: nativeBalance.symbol })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-sm font-medium", children: nativeBalance.formatted })
+                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-sm font-medium", children: nativeBalance.formatted })
               ]
             },
             nativeBalance.symbol
           ),
-          isLoading && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" })
+          isLoading && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" })
           ] }),
           erc20Balances.map((coin) => {
             const Icon = getSymbolLogo(coin.symbol);
-            return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+            return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
               "button",
               {
                 className: "flex h-11 w-full items-center justify-between gap-4 rounded-sm px-1.5 text-black hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50",
                 onClick: () => handleSelect(coin),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex items-center gap-2", children: [
                     Boolean(Icon) && Icon,
-                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-sm font-medium", children: coin.symbol })
+                    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-sm font-medium", children: coin.symbol })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-sm font-medium", children: coin.formatted })
+                  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-sm font-medium", children: coin.formatted })
                 ]
               },
               coin.symbol
@@ -1584,51 +2937,51 @@ var CryptoSelectModal = import_nice_modal_react3.default.create(() => {
 CryptoSelectModal.displayName = "CryptoSelectModal";
 
 // src/components/CryptoTab/Crypto/SelectCoinButton.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var SelectCoinButton = () => {
   const openModal = () => {
-    import_nice_modal_react4.default.show(CryptoSelectModal);
+    import_nice_modal_react5.default.show(CryptoSelectModal);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("button", { onClick: openModal, type: "button", className: "bg-primary/8 flex h-11 w-full overflow-hidden rounded-md", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "bg-primary flex h-full w-11 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-white" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex h-full w-full items-center justify-between px-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "font-medium text-black/50", children: "Select a token" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("path", { stroke: "#000", strokeLinecap: "round", d: "m6 12.43 4-4-4-4" }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("button", { onClick: openModal, type: "button", className: "bg-primary/8 flex h-11 w-full overflow-hidden rounded-md", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "bg-primary flex h-full w-11 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-white" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex h-full w-full items-center justify-between px-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "font-medium text-black/50", children: "Select a token" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { stroke: "#000", strokeLinecap: "round", d: "m6 12.43 4-4-4-4" }) })
     ] })
   ] });
 };
 
 // src/components/CryptoTab/Crypto/SelectedCoin.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var SelectedCoin = (props) => {
   const { coin, balance, logoURI } = props;
   const Icon = getSymbolLogo(coin);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "bg-primary/8 flex h-11 w-full overflow-hidden rounded-md", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "bg-primary flex h-full w-11 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-white", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "bg-primary h-2.5 w-2.5 rounded-full" }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "border-primary flex h-full w-full items-center justify-between rounded-r-md border-1 !border-l-0 px-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center gap-1", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "bg-primary/8 flex h-11 w-full overflow-hidden rounded-md", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "bg-primary flex h-full w-11 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-white", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "bg-primary h-2.5 w-2.5 rounded-full" }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "border-primary flex h-full w-full items-center justify-between rounded-r-md border-1 !border-l-0 px-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-center gap-1", children: [
         Icon,
-        !Icon && logoURI && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("img", { className: "mr-1 h-8 w-8 shrink-0", src: logoURI, alt: `${coin} logo` }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "font-semibold text-black", children: coin }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { d: "M6 12.4341L10 8.43408L6 4.43408", stroke: "black", strokeLinecap: "round" }) })
+        !Icon && logoURI && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("img", { className: "mr-1 h-8 w-8 shrink-0", src: logoURI, alt: `${coin} logo` }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "font-semibold text-black", children: coin }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("path", { d: "M6 12.4341L10 8.43408L6 4.43408", stroke: "black", strokeLinecap: "round" }) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("p", { className: "text-xs font-medium text-black/50", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("p", { className: "text-xs font-medium text-black/50", children: [
         "Wallet balance ",
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-black", children: balance })
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-black", children: balance })
       ] })
     ] })
   ] });
 };
 
 // src/components/CryptoTab/Crypto/Crypto.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var Crypto = () => {
   const { address } = (0, import_wagmi4.useAccount)();
   const { selectedPaymentMethod } = useSpreePaymentMethod();
   const { cryptoPayment } = useCryptoPayment();
   const isWalletConnected = Boolean(address);
   const { register } = useSpreePayRegister();
-  const handlePay = (0, import_react8.useCallback)(
+  const handlePay = (0, import_react14.useCallback)(
     async (data) => {
       try {
         const res = await cryptoPayment(data);
@@ -1642,17 +2995,17 @@ var Crypto = () => {
     },
     [cryptoPayment]
   );
-  (0, import_react8.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     register(handlePay);
   }, [register, handlePay]);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-col items-baseline gap-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex w-full items-center justify-between gap-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("h3", { className: "text-primary text-xl leading-[1.7] font-semibold", children: "Pay with Crypto" }),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ConnectButton, {})
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex flex-col items-baseline gap-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex w-full items-center justify-between gap-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("h3", { className: "text-primary text-xl leading-[1.7] font-semibold", children: "Pay with Crypto" }),
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ConnectButton, {})
     ] }),
-    !isWalletConnected && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Logos, {}),
-    isWalletConnected && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex w-full flex-col gap-1", children: [
-      selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && selectedPaymentMethod.method && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    !isWalletConnected && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Logos, {}),
+    isWalletConnected && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex w-full flex-col gap-1", children: [
+      selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && selectedPaymentMethod.method && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
         SelectedCoin,
         {
           coin: selectedPaymentMethod.method.symbol,
@@ -1660,13 +3013,13 @@ var Crypto = () => {
           logoURI: selectedPaymentMethod.method.logoURI
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SelectCoinButton, {})
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SelectCoinButton, {})
     ] })
   ] });
 };
 
 // src/components/CryptoTab/Crypto/CryptoWrapper.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var queryClient = new import_react_query.QueryClient();
 var connectors = (0, import_rainbowkit2.connectorsForWallets)(
   [
@@ -1684,29 +3037,30 @@ var config = (0, import_wagmi5.createConfig)({
   ssr: true
 });
 var CryptoWrapper = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_wagmi5.WagmiProvider, { config, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_query.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_rainbowkit2.RainbowKitProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_nice_modal_react5.default.Provider, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Crypto, {}) }) }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_wagmi5.WagmiProvider, { config, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react_query.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_rainbowkit2.RainbowKitProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_nice_modal_react6.default.Provider, { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Crypto, {}) }) }) }) });
 };
 
 // src/components/CryptoTab/CryptoTab.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
-var CryptoTab = (props) => {
-  const { pointsTitle, pointsConversionRatio } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "border-b-1 border-black/7 px-5 py-5 md:px-7 md:py-5", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CryptoWrapper, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(PointsSwitch, { disabled: true, pointsTitle, pointsConversionRatio }) })
+var import_jsx_runtime36 = require("react/jsx-runtime");
+var CryptoTab = () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "border-b-1 border-black/7 px-5 py-5 md:px-7 md:py-5", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(CryptoWrapper, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(PointsSwitch, { disabled: true }) })
   ] });
 };
 
 // src/components/TabButtons.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
-var TabButton = ({ isActive, children, onClick }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var TabButton = ({ isDisabled = true, isActive, children, onClick }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     "button",
     {
+      disabled: isDisabled,
       onClick,
       className: cn(
         "flex w-[132px] flex-col items-baseline rounded-sm border-1 border-black/50 px-2.5 py-1.5 text-sm text-black",
-        { "opacity-50": !isActive },
+        { "opacity-50": !isActive || isDisabled },
+        { "cursor-not-allowed": isDisabled },
         { "bg-primary/7 border-primary text-primary": isActive }
       ),
       children
@@ -1715,84 +3069,99 @@ var TabButton = ({ isActive, children, onClick }) => {
 };
 var TabButtons = (props) => {
   const { value, onChange } = props;
+  const { spreePayConfig } = useSpreePayConfig();
   const handleChange = (type) => () => {
     if (value !== type) {
       onChange({ type, method: null });
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex gap-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(TabButton, { onClick: handleChange("CREDIT_CARD" /* CREDIT_CARD */), isActive: value === "CREDIT_CARD" /* CREDIT_CARD */, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-        "path",
-        {
-          fill: "currentColor",
-          d: "M22 6v12c0 .55-.2 1.02-.59 1.41-.39.4-.86.59-1.41.59H4c-.55 0-1.02-.2-1.41-.59-.4-.39-.59-.86-.59-1.41V6c0-.55.2-1.02.59-1.41C2.98 4.19 3.45 4 4 4h16c.55 0 1.02.2 1.41.59.4.39.59.86.59 1.41ZM4 8h16V6H4v2Zm0 4v6h16v-6H4Z"
-        }
-      ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "text-sm font-medium", children: "Card" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(TabButton, { onClick: handleChange("CRYPTO" /* CRYPTO */), isActive: value === "CRYPTO" /* CRYPTO */, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("svg", { className: "my-1", xmlns: "http://www.w3.org/2000/svg", width: "30", height: "16", fill: "none", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-          "path",
-          {
-            fill: "currentColor",
-            d: "M14.5 0C19.2 0 23 3.58 23 8s-3.8 8-8.5 8a8.93 8.93 0 0 1-3.35-.65 8 8 0 0 0 2.24-1.44c.36.06.73.09 1.11.09 3.7 0 6.5-2.8 6.5-6s-2.8-6-6.5-6c-.38 0-.75.03-1.11.09A8 8 0 0 0 11.15.65 8.93 8.93 0 0 1 14.5 0Z"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-          "path",
-          {
-            fill: "currentColor",
-            d: "M21.15 0c4.7 0 8.5 3.58 8.5 8s-3.8 8-8.5 8a8.93 8.93 0 0 1-3.35-.65 8 8 0 0 0 2.24-1.44c.36.06.73.09 1.1.09 3.71 0 6.5-2.8 6.5-6s-2.79-6-6.5-6c-.37 0-.74.03-1.1.09A8 8 0 0 0 17.8.65 8.93 8.93 0 0 1 21.15 0Z"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("circle", { cx: "8", cy: "8", r: "7", stroke: "currentColor", strokeWidth: "2" })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "text-sm font-medium", children: "Crypto" })
-    ] })
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+      TabButton,
+      {
+        isDisabled: !spreePayConfig?.creditCard.enabled,
+        onClick: handleChange("CREDIT_CARD" /* CREDIT_CARD */),
+        isActive: value === "CREDIT_CARD" /* CREDIT_CARD */,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+            "path",
+            {
+              fill: "currentColor",
+              d: "M22 6v12c0 .55-.2 1.02-.59 1.41-.39.4-.86.59-1.41.59H4c-.55 0-1.02-.2-1.41-.59-.4-.39-.59-.86-.59-1.41V6c0-.55.2-1.02.59-1.41C2.98 4.19 3.45 4 4 4h16c.55 0 1.02.2 1.41.59.4.39.59.86.59 1.41ZM4 8h16V6H4v2Zm0 4v6h16v-6H4Z"
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "text-sm font-medium", children: "Card" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+      TabButton,
+      {
+        isDisabled: !spreePayConfig?.creditCard.enabled,
+        onClick: handleChange("CRYPTO" /* CRYPTO */),
+        isActive: value === "CRYPTO" /* CRYPTO */,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("svg", { className: "my-1", xmlns: "http://www.w3.org/2000/svg", width: "30", height: "16", fill: "none", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+              "path",
+              {
+                fill: "currentColor",
+                d: "M14.5 0C19.2 0 23 3.58 23 8s-3.8 8-8.5 8a8.93 8.93 0 0 1-3.35-.65 8 8 0 0 0 2.24-1.44c.36.06.73.09 1.11.09 3.7 0 6.5-2.8 6.5-6s-2.8-6-6.5-6c-.38 0-.75.03-1.11.09A8 8 0 0 0 11.15.65 8.93 8.93 0 0 1 14.5 0Z"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+              "path",
+              {
+                fill: "currentColor",
+                d: "M21.15 0c4.7 0 8.5 3.58 8.5 8s-3.8 8-8.5 8a8.93 8.93 0 0 1-3.35-.65 8 8 0 0 0 2.24-1.44c.36.06.73.09 1.1.09 3.71 0 6.5-2.8 6.5-6s-2.79-6-6.5-6c-.37 0-.74.03-1.1.09A8 8 0 0 0 17.8.65 8.93 8.93 0 0 1 21.15 0Z"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("circle", { cx: "8", cy: "8", r: "7", stroke: "currentColor", strokeWidth: "2" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "text-sm font-medium", children: "Crypto" })
+        ]
+      }
+    )
   ] });
 };
 
 // src/components/Tabs.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
-var Tabs = ({ config: config2 }) => {
+var import_jsx_runtime38 = require("react/jsx-runtime");
+var Tabs = () => {
   const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
-  const { pointsConversionRatio, pointsTitle } = config2;
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "mb-4 rounded-3xl border border-black/25 bg-white", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex w-full flex-col gap-4 border-b-1 border-black/7 px-5 py-5 md:px-7 md:py-6", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("h2", { className: "text-primary text-2xl font-semibold", children: "Choose a Payment Method" }),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TabButtons, { value: selectedPaymentMethod.type, onChange: setSelectedPaymentMethod })
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "mb-4 rounded-3xl border border-black/25 bg-white", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex w-full flex-col gap-4 border-b-1 border-black/7 px-5 py-5 md:px-7 md:py-6", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("h2", { className: "text-primary text-2xl font-semibold", children: "Choose a Payment Method" }),
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TabButtons, { value: selectedPaymentMethod.type, onChange: setSelectedPaymentMethod })
     ] }),
-    selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(CreditCardTab, { pointsTitle, pointsConversionRatio }),
-    selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(CryptoTab, { pointsTitle, pointsConversionRatio })
+    selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CreditCardTab, {}),
+    selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CryptoTab, {})
   ] });
 };
 
 // src/SpreePayContent.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
-var SpreePayContent = (props) => {
-  const { isLoggedIn, config: config2, amount, onProcess, isProcessing } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "w-full", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Tabs, { config: config2 }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CheckoutButton, { isLoggedIn, isProcessing, onCheckout: onProcess, amount }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SpreeLegal, {})
+var import_jsx_runtime39 = require("react/jsx-runtime");
+var SpreePayContent = ({ isLoggedIn }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "w-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Tabs, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(CheckoutButton, { isLoggedIn }),
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(SpreeLegal, {})
   ] });
 };
 
 // src/hooks/useKeycloakSSO.ts
-var import_react9 = require("react");
+var import_react15 = require("react");
 var import_keycloak_js = __toESM(require("keycloak-js"), 1);
 var refreshAheadSeconds = 60;
 function useKeycloakSSO(config2) {
   const { url, realm, clientId, ssoPageURI, enabled } = config2;
-  const initRef = (0, import_react9.useRef)(false);
-  const kcRef = (0, import_react9.useRef)(null);
-  const refreshTimerRef = (0, import_react9.useRef)(null);
-  const [error, setError] = (0, import_react9.useState)(null);
-  const [isChecking, setIsChecking] = (0, import_react9.useState)(enabled);
-  const [accessToken, setAccessToken] = (0, import_react9.useState)(null);
-  const scheduleRefresh = (0, import_react9.useCallback)(() => {
+  const initRef = (0, import_react15.useRef)(false);
+  const kcRef = (0, import_react15.useRef)(null);
+  const refreshTimerRef = (0, import_react15.useRef)(null);
+  const [error, setError] = (0, import_react15.useState)(null);
+  const [isChecking, setIsChecking] = (0, import_react15.useState)(enabled);
+  const [accessToken, setAccessToken] = (0, import_react15.useState)(null);
+  const scheduleRefresh = (0, import_react15.useCallback)(() => {
     const kc = kcRef.current;
     if (!kc || !kc.tokenParsed || !kc.tokenParsed.exp) {
       return;
@@ -1813,7 +3182,7 @@ function useKeycloakSSO(config2) {
       });
     }, delayMs);
   }, []);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (initRef.current || !enabled) return;
     initRef.current = true;
     setIsChecking(true);
@@ -1848,94 +3217,43 @@ function useKeycloakSSO(config2) {
 }
 
 // src/SpreePay.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
-var CONFIG = {
-  dev: {
-    bookit: {
-      slapiUrl: "https://slapi.dev.superlogic.com",
-      keyklockUrl: "https://auth.dev.join.bookit.com",
-      keyklockClientId: "oneof-next",
-      pointsConversionRatio: 100,
-      pointsTitle: "AIR SP"
-    },
-    moca: {
-      slapiUrl: "https://slapi.dev.air.shop",
-      keyklockUrl: "https://login.dev.air.shop",
-      keyklockClientId: "oneof-next",
-      pointsConversionRatio: 100,
-      pointsTitle: "AIR SP"
-    }
-  },
-  stg: {
-    bookit: {
-      slapiUrl: "https://slapi.stg.superlogic.com",
-      keyklockUrl: "https://auth.stg.join.bookit.com",
-      keyklockClientId: "oneof-next",
-      pointsConversionRatio: 100,
-      pointsTitle: "AIR SP"
-    },
-    moca: {
-      slapiUrl: "https://slapi.stg.air.shop",
-      keyklockUrl: "https://login.stg.air.shop",
-      keyklockClientId: "oneof-next",
-      pointsConversionRatio: 100,
-      pointsTitle: "AIR SP"
-    }
-  },
-  prod: {
-    bookit: {
-      slapiUrl: "https://slapi.superlogic.com",
-      keyklockUrl: "https://auth.join.bookit.com",
-      keyklockClientId: "oneof-next",
-      pointsConversionRatio: 100,
-      pointsTitle: "AIR SP"
-    },
-    moca: {
-      slapiUrl: "https://slapi.air.shop",
-      keyklockUrl: "https://login.air.shop",
-      keyklockClientId: "oneof-next",
-      pointsConversionRatio: 100,
-      pointsTitle: "AIR SP"
-    }
-  }
-};
-var SpreePay = ({ className, ...rest }) => {
-  const rootRef = (0, import_react10.useRef)(null);
-  const [portalEl, setPortalEl] = (0, import_react10.useState)(null);
-  (0, import_react10.useLayoutEffect)(() => {
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var SpreePayInner = () => {
+  const rootRef = (0, import_react16.useRef)(null);
+  const [portalEl, setPortalEl] = (0, import_react16.useState)(null);
+  (0, import_react16.useLayoutEffect)(() => {
     if (!rootRef.current) return;
     const el = rootRef.current.querySelector(":scope > .sl-spreepay__portal");
     setPortalEl(el ?? null);
   }, []);
   const { env } = useSpreePayEnv();
-  const environment = env?.environment || "dev";
+  const { staticConfig, appProps } = useStaticConfig();
   const tenantId = env?.tenantId || "bookit";
-  const config2 = CONFIG[environment]?.[tenantId];
   const { isChecking, accessToken } = useKeycloakSSO({
     realm: tenantId,
-    url: config2.keyklockUrl,
-    clientId: config2.keyklockClientId,
+    url: staticConfig.keyklockUrl,
+    clientId: staticConfig.keyklockClientId,
     ssoPageURI: env?.ssoPageURI,
     enabled: !env?.accessToken
   });
-  const slapiFetcher = (0, import_react10.useMemo)(() => {
+  const slapiFetcher = (0, import_react16.useMemo)(() => {
     if (accessToken || env.accessToken) {
       return registerApi({
         accessToken: env.accessToken || accessToken,
         tenantId,
-        baseUrl: config2.slapiUrl
+        baseUrl: staticConfig.slapiUrl
       });
     }
-  }, [env.accessToken, config2, tenantId, accessToken]);
+  }, [env.accessToken, staticConfig, tenantId, accessToken]);
   const getContent = () => {
     if (isChecking) {
-      return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex w-full flex-col", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "bg-primary/8 mb-4 h-[315px] animate-pulse rounded-3xl" }),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "bg-primary/8 h-[135px] animate-pulse rounded-3xl" }),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SpreeLegal, {})
+      return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex w-full flex-col", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "bg-primary/8 mb-4 h-[315px] animate-pulse rounded-3xl" }),
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "bg-primary/8 h-[135px] animate-pulse rounded-3xl" }),
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(SpreeLegal, {})
       ] });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
       import_swr4.SWRConfig,
       {
         value: {
@@ -1944,20 +3262,23 @@ var SpreePay = ({ className, ...rest }) => {
           revalidateOnFocus: false,
           revalidateIfStale: false
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(PortalContainerProvider, { container: portalEl, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_nice_modal_react6.default.Provider, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SpreePayContent, { isLoggedIn: Boolean(accessToken || env.accessToken), config: config2, ...rest }) }) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(PortalContainerProvider, { container: portalEl, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_nice_modal_react7.default.Provider, { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(SpreePayContent, { isLoggedIn: Boolean(accessToken || env.accessToken) }) }) })
       }
     );
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { ref: rootRef, className: cn("sl-spreepay", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "sl-spreepay__portal" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { ref: rootRef, className: cn("sl-spreepay", appProps.className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "sl-spreepay__portal" }),
     getContent()
   ] });
 };
+var SpreePay = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(StaticConfigProvider, { props, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(SpreePayInner, {}) });
+};
 
 // src/hooks/useCapture3DS.ts
-var import_react11 = require("react");
+var import_react17 = require("react");
 var useCapture3DS = (searchParams) => {
-  (0, import_react11.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (window?.parent && searchParams?.paymentIntent) {
       window.parent.SP_EVENT_BUS?.emit("paymentIntent", { paymentIntent: searchParams.paymentIntent });
     }