@superlogic/spree-pay 0.1.36 → 0.1.39

package/build/index.cjs

@@ -39,12 +39,12 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/SpreePay.tsx
-var import_react18 = require("react");
-var import_nice_modal_react8 = __toESM(require("@ebay/nice-modal-react"), 1);
+var import_react19 = require("react");
+var import_nice_modal_react9 = __toESM(require("@ebay/nice-modal-react"), 1);
 var import_swr5 = require("swr");
 
 // package.json
-var version = "0.1.36";
+var version = "0.1.39";
 
 // src/context/SpreePayActionsContext.tsx
 var import_react = require("react");
@@ -65,6 +65,7 @@ var PaymentError = class extends Error {
 var PaymentType = /* @__PURE__ */ ((PaymentType2) => {
   PaymentType2["CREDIT_CARD"] = "CREDIT_CARD";
   PaymentType2["CRYPTO"] = "CRYPTO";
+  PaymentType2["CDC"] = "CDC";
   PaymentType2["CREDIT_CARD_SPLIT"] = "SPLIT";
   PaymentType2["POINTS"] = "POINTS";
   return PaymentType2;
@@ -292,7 +293,7 @@ var Spinner = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "svg",
     {
-      className: cn(`${sizeClasses[size]} animate-spin text-gray-300`, className),
+      className: cn(`${sizeClasses[size]} animate-spin text-(--tertiary)`, className),
       viewBox: "0 0 64 64",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
@@ -317,7 +318,7 @@ var Spinner = (props) => {
             strokeWidth: "5",
             strokeLinecap: "round",
             strokeLinejoin: "round",
-            className: "text-gray-900"
+            className: "text-(--brand-primary)"
           }
         )
       ]
@@ -374,8 +375,174 @@ var getTransactionFee = (amount = 0, transactionFeePercentage) => {
   return Math.round((fee + Number.EPSILON) * 100) / 100;
 };
 
-// src/components/CheckoutButton.tsx
+// src/components/common/PointsSwitch.tsx
+var import_react3 = require("react");
+
+// src/hooks/useSlapiBalance.ts
+var import_swr2 = __toESM(require("swr"), 1);
+var useSlapiBalance = () => {
+  const { data, isLoading, mutate } = (0, import_swr2.default)(`/v1/loyalty/accounts`);
+  return { balance: data?.detail, isBalanceLoading: isLoading, mutateBalance: mutate };
+};
+
+// src/ui/label.tsx
+var LabelPrimitive = __toESM(require("@radix-ui/react-label"), 1);
 var import_jsx_runtime4 = require("react/jsx-runtime");
+function Label({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.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/ui/switch.tsx
+var SwitchPrimitive = __toESM(require("@radix-ui/react-switch"), 1);
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function Switch({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    SwitchPrimitive.Root,
+    {
+      "data-slot": "switch",
+      className: cn(
+        "peer focus-visible:border-ring focus-visible:ring-ring/50 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 data-[state=checked]:bg-(--s-brand) data-[state=unchecked]:bg-(--s-tertiary)",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        SwitchPrimitive.Thumb,
+        {
+          "data-slot": "switch-thumb",
+          className: "pointer-events-none block size-4 rounded-full bg-(--s-default) ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
+        }
+      )
+    }
+  );
+}
+
+// src/components/common/InfoBanner.tsx
+var import_xss = __toESM(require("xss"), 1);
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var InfoBanner = (props) => {
+  const { type = "info", message } = props;
+  if (!message) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "div",
+    {
+      className: cn("flex w-full gap-1.5 rounded-md p-2", {
+        "border border-(--b-secondary)": type === "info",
+        "bg-(--s-warning)/10": type === "warning"
+      }),
+      children: [
+        type === "info" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            fill: "none",
+            viewBox: "0 0 20 20",
+            className: "size-5 shrink-0 text-(--positive)",
+            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              "path",
+              {
+                fill: "currentColor",
+                d: "M10 17.92a2.2 2.2 0 0 1-1.59-.66 4 4 0 0 0-1.07-.81q-.45-.2-1.35-.2-.94 0-1.6-.65a2.2 2.2 0 0 1-.65-1.59q0-.9-.19-1.34a4 4 0 0 0-.8-1.08 2.2 2.2 0 0 1-.5-2.44q.17-.41.5-.74.6-.62.8-1.07t.2-1.35q0-.94.65-1.6.65-.65 1.59-.65.9 0 1.34-.19.46-.2 1.08-.81A2.2 2.2 0 0 1 10 2.08a2.3 2.3 0 0 1 1.59.66q.62.62 1.07.81t1.35.2q.94 0 1.6.65.65.64.65 1.59 0 .9.19 1.34.2.46.81 1.08a2.2 2.2 0 0 1 .66 1.59 2.2 2.2 0 0 1-.66 1.59q-.61.63-.81 1.07t-.2 1.35q0 .94-.65 1.6-.64.65-1.59.65-.9 0-1.34.19-.45.2-1.08.8a2.2 2.2 0 0 1-1.59.67m0-1.25q.2 0 .39-.08a1 1 0 0 0 .31-.21q.8-.8 1.5-1.09.7-.28 1.81-.28.42 0 .71-.29.3-.29.29-.7 0-1.13.28-1.82.3-.7 1.08-1.5.3-.3.3-.7t-.3-.7a5 5 0 0 1-1.08-1.5 5 5 0 0 1-.28-1.8q0-.42-.29-.71a1 1 0 0 0-.7-.29q-1.14 0-1.83-.28a5 5 0 0 1-1.5-1.08 1 1 0 0 0-.69-.3 1 1 0 0 0-.7.3q-.8.8-1.5 1.08T6 4.99q-.42 0-.71.29a1 1 0 0 0-.29.7q0 1.14-.28 1.83t-1.09 1.5q-.29.28-.29.69t.3.7q.8.8 1.08 1.5T5 14.01q0 .42.29.71.29.3.7.29 1.14 0 1.83.28t1.5 1.09a1 1 0 0 0 .7.29m2.03-3.62q.43 0 .73-.3t.3-.72a1 1 0 0 0-.3-.73 1 1 0 0 0-.73-.3 1 1 0 0 0-.73.3 1 1 0 0 0-.3.73q0 .43.3.73t.73.3m-4.53-.54q.18.18.43.18a.6.6 0 0 0 .43-.18l4.14-4.12a.6.6 0 0 0 .2-.44.6.6 0 0 0-.2-.45.6.6 0 0 0-.44-.2.6.6 0 0 0-.45.2l-4.12 4.14a.6.6 0 0 0-.18.43q0 .25.19.44M7.97 9a1 1 0 0 0 .74-.3 1 1 0 0 0 .3-.74q0-.43-.3-.73a1 1 0 0 0-.74-.3q-.43 0-.73.3t-.3.73.3.73.73.3"
+              }
+            )
+          }
+        ),
+        type === "warning" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            fill: "none",
+            viewBox: "0 0 20 20",
+            className: "size-5 shrink-0 text-(--warning)",
+            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              "path",
+              {
+                fill: "currentColor",
+                d: "M10 13.96a.6.6 0 0 0 .44-.18.6.6 0 0 0 .18-.45V9.8a.6.6 0 0 0-.18-.44.6.6 0 0 0-.44-.18.6.6 0 0 0-.45.18.6.6 0 0 0-.18.44v3.54q0 .27.18.45a.6.6 0 0 0 .45.18m0-6.22q.29 0 .48-.2.2-.18.2-.47 0-.3-.2-.48a.7.7 0 0 0-.48-.2q-.3 0-.48.2a.7.7 0 0 0-.2.48q0 .29.2.48.2.2.48.19m0 10.18q-1.64 0-3.09-.63a8 8 0 0 1-4.2-4.2 8 8 0 0 1-.63-3.1q0-1.64.63-3.09a8 8 0 0 1 4.2-4.2q1.45-.63 3.09-.63 1.65 0 3.08.63a8 8 0 0 1 4.21 4.2q.63 1.45.63 3.09t-.63 3.09a8 8 0 0 1-4.2 4.2q-1.46.63-3.09.63m0-1.25q2.8 0 4.73-1.94A6.4 6.4 0 0 0 16.67 10q0-2.8-1.94-4.73A6.4 6.4 0 0 0 10 3.33q-2.8 0-4.73 1.94A6.4 6.4 0 0 0 3.33 10q0 2.8 1.94 4.73A6.4 6.4 0 0 0 10 16.67"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "p",
+          {
+            className: "text-[14px] leading-5 text-(--primary) [&_a]:underline",
+            dangerouslySetInnerHTML: { __html: (0, import_xss.default)(message) }
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/components/common/PointsSwitch.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var PointsSwitch = (props) => {
+  const { disabled = false, value, onChange, message } = props;
+  const { spreePayConfig } = useSpreePayConfig();
+  const { appProps } = useStaticConfig();
+  const { balance } = useSlapiBalance();
+  const id = (0, import_react3.useId)();
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col gap-6", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Switch, { checked: value, onCheckedChange: onChange, disabled, id }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+          Label,
+          {
+            htmlFor: id,
+            className: "text-md flex-col items-baseline gap-0 leading-[1.3] font-medium text-(--brand-primary) sm:flex-row sm:gap-2 md:text-[22px]",
+            children: [
+              "Use Points ",
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-xs font-medium text-(--tertiary)", children: "Optional" })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-2.5", children: [
+        balance?.availablePoints ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("p", { className: "flex-1 text-right text-sm font-medium text-(--brand-primary)", children: [
+          formatPoints(balance.availablePoints, spreePayConfig?.pointsTitle),
+          !!spreePayConfig?.pointsConversionRatio && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-(--secondary)", children: ` \xB7 ${formatUSD(balance.availablePoints * spreePayConfig.pointsConversionRatio)}` })
+        ] }) : null,
+        Boolean(appProps.topUpLink) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "a",
+          {
+            className: "cursor-pointer rounded-full bg-(--primary) px-2 py-1.5 text-xs font-medium text-(--inverse)",
+            rel: "noreferrer",
+            target: "_blank",
+            href: appProps.topUpLink,
+            children: "Top Up"
+          }
+        )
+      ] })
+    ] }),
+    message && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(InfoBanner, { type: "warning", message })
+  ] });
+};
+
+// src/components/common/Legal.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var Legal = () => {
+  const { spreePayConfig } = useSpreePayConfig();
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("p", { className: "text-center text-xs leading-5 font-medium text-(--secondary)", children: [
+    "By clicking on the button below I acknowledge that I have read and accepted the",
+    " ",
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("a", { className: "underline", href: spreePayConfig?.termsConditionsUrl, target: "_blank", rel: "noreferrer", children: "Terms and Conditions" }),
+    "."
+  ] });
+};
+
+// src/components/CheckoutButton.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var CheckoutButton = ({ isLoggedIn }) => {
   const { appProps, staticConfig } = useStaticConfig();
   const { amount, onProcess, isProcessing, transactionFeePercentage } = appProps;
@@ -389,7 +556,7 @@ var CheckoutButton = ({ isLoggedIn }) => {
   const isCrypto = type === "CRYPTO" /* CRYPTO */;
   const getCheckoutContent = () => {
     if (!!isProcessing || isInternalProcessing) {
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Spinner, { className: "inline", size: "sm" });
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Spinner, { className: "inline", size: "sm" });
     }
     if (isCC && amount) {
       if (splitAmount && usdAmount) {
@@ -408,32 +575,20 @@ var CheckoutButton = ({ isLoggedIn }) => {
     }
     return "Checkout";
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex w-full flex-col gap-4 bg-white p-6 text-xs font-medium text-[#45505B] md:px-7", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("p", { className: "text-center", children: [
-      "By clicking on the button below I acknowledge that I have read and accepted the",
-      " ",
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("a", { className: "underline", href: spreePayConfig?.termsConditionsUrl, target: "_blank", rel: "noreferrer", children: "Terms and Conditions" }),
-      "."
-    ] }),
-    isLoggedIn ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: onProcess && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      "button",
-      {
-        disabled: isDisabled,
-        onClick: onProcess,
-        className: "bg-primary w-full cursor-pointer rounded-4xl p-4 text-xl leading-6 font-medium text-white disabled:cursor-not-allowed disabled:opacity-50",
-        children: getCheckoutContent()
-      }
-    ) }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  const checkoutClass = "text-(--inverse) h-14 w-full cursor-pointer rounded-4xl bg-(--s-brand) hover:bg-(--s-brand-hover) px-4 text-center text-xl leading-6 font-medium disabled:cursor-not-allowed disabled:bg-(--s-disabled) disabled:text-(--disabled)";
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex w-full flex-col gap-4 bg-(--s-default) p-6 text-xs leading-5 font-medium text-(--secondary) md:px-7", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Legal, {}),
+    isLoggedIn ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: onProcess && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { disabled: isDisabled, onClick: onProcess, className: checkoutClass, children: getCheckoutContent() }) }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "a",
       {
         href: `${staticConfig.keycloakUrl}/realms/${env.tenantId}/protocol/openid-connect/auth?client_id=${staticConfig.keycloakClientId}&response_type=code&redirect_uri=${window.location.href}`,
-        className: "bg-primary w-full cursor-pointer rounded-4xl p-4 text-center text-xl leading-6 font-medium text-white disabled:cursor-not-allowed disabled:opacity-50",
+        className: checkoutClass,
         children: "Log in / Sign up for an AIR account"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("a", { href: "https://www.spree.finance/", className: "flex items-center justify-center gap-2 hover:underline", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { children: "Powered by" }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { className: "shrink-0", xmlns: "http://www.w3.org/2000/svg", width: "66", height: "30", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("a", { href: "https://www.spree.finance/", className: "flex items-center justify-center gap-2 hover:underline", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { children: "Powered by" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("svg", { className: "shrink-0", xmlns: "http://www.w3.org/2000/svg", width: "66", height: "30", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         "path",
         {
           fill: "currentColor",
@@ -451,7 +606,7 @@ var import_react13 = require("react");
 var import_nice_modal_react2 = __toESM(require("@ebay/nice-modal-react"), 1);
 
 // src/modals/Iframe3ds.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_nice_modal_react = __toESM(require("@ebay/nice-modal-react"), 1);
 
 // src/services/eventBus.ts
@@ -473,30 +628,30 @@ var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"), 1);
 var import_lucide_react = require("lucide-react");
 
 // src/ui/portal.ts
-var import_react3 = __toESM(require("react"), 1);
-var PortalContainerContext = import_react3.default.createContext({ container: null });
+var import_react4 = __toESM(require("react"), 1);
+var PortalContainerContext = import_react4.default.createContext({ container: null });
 function PortalContainerProvider({
   container,
   children
 }) {
-  return import_react3.default.createElement(PortalContainerContext.Provider, { value: { container } }, children);
+  return import_react4.default.createElement(PortalContainerContext.Provider, { value: { container } }, children);
 }
 function usePortalContainer() {
-  return import_react3.default.useContext(PortalContainerContext).container;
+  return import_react4.default.useContext(PortalContainerContext).container;
 }
 
 // src/ui/dialog.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime10 = 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_runtime10.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_runtime10.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_runtime10.jsx)(
     DialogPrimitive.Overlay,
     {
       "data-slot": "dialog-overlay",
@@ -514,27 +669,27 @@ 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_runtime10.jsxs)(DialogPortal, { "data-slot": "dialog-portal", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DialogOverlay, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
       DialogPrimitive.Content,
       {
         "data-slot": "dialog-content",
         className: cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border border-(--border-component-specific-card) bg-(--surface-component-specific-card-default-card) p-6 shadow-lg duration-200 sm:max-w-lg",
           className
         ),
         ...props,
         children: [
           children,
-          showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime10.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",
+              className: "ring-offset-background focus:ring-ring 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 data-[state=open]:bg-(--accent) [&_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_runtime10.jsx)(import_lucide_react.XIcon, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "sr-only", children: "Close" })
               ]
             }
           )
@@ -544,7 +699,7 @@ function DialogContent({
   ] });
 }
 function DialogTitle({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     DialogPrimitive.Title,
     {
       "data-slot": "dialog-title",
@@ -554,7 +709,7 @@ function DialogTitle({ className, ...props }) {
   );
 }
 function DialogDescription({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     DialogPrimitive.Description,
     {
       "data-slot": "dialog-description",
@@ -565,10 +720,10 @@ function DialogDescription({ className, ...props }) {
 }
 
 // src/modals/Iframe3ds.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var Iframe3ds = import_nice_modal_react.default.create(({ url }) => {
   const modal = (0, import_nice_modal_react.useModal)();
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     return bus.on("paymentIntent", (data) => {
       modal.resolve(data.paymentIntent);
       modal.remove();
@@ -578,9 +733,17 @@ 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_runtime11.jsx)(Dialog, { open: modal.visible, onOpenChange: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(DialogContent, { className: "max-h-[600px] w-full max-w-[680px] p-0", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DialogTitle, { className: "hidden", children: "Payment Verification" }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      "iframe",
+      {
+        src: url,
+        id: "3ds-iframe",
+        title: "Payment Verificatio",
+        className: "h-[731px] w-full rounded-lg border-0"
+      }
+    )
   ] }) });
 });
 Iframe3ds.displayName = "Iframe3ds";
@@ -694,6 +857,9 @@ var SlapiPaymentService = {
   validate3DS: ({ paymentId }) => {
     return slapiApi.post("/v1/payments/validate", { paymentId, type: "CREDIT_CARD" /* CREDIT_CARD */ }).then((data) => ({ data }));
   },
+  validateCDC: ({ paymentId }) => {
+    return slapiApi.post("/v1/payments/validate", { paymentId, type: "CDC" /* CDC */ }).then((data) => ({ data }));
+  },
   validatePoints: ({ paymentId, txHash }) => {
     return slapiApi.post("/v1/payments/validate", { txHash, paymentId, type: "POINTS" /* POINTS */ }).then((data) => ({ data }));
   },
@@ -1024,9 +1190,9 @@ var useSplitCardPayments = (mode = "web2") => {
 };
 
 // src/hooks/useCards.ts
-var import_swr2 = __toESM(require("swr"), 1);
+var import_swr3 = __toESM(require("swr"), 1);
 var useCards = () => {
-  const { data, isLoading, mutate } = (0, import_swr2.default)(`/v1/payments/cards`);
+  const { data, isLoading, mutate } = (0, import_swr3.default)(`/v1/payments/cards`);
   return {
     cards: data?.data.filter((c) => c.active) || [],
     cardsIsLoading: isLoading,
@@ -1034,20 +1200,13 @@ var useCards = () => {
   };
 };
 
-// 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/components/CreditCardTab/CreditCard/CreditCard.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_react_stripe_js2 = require("@stripe/react-stripe-js");
 var import_stripe_js = require("@stripe/stripe-js");
 
 // src/components/CreditCardTab/CreditCard/CardsList.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var isRemoveDisabled = true;
 var CardListItem = ({ card, isSelected, onSelect }) => {
   const handleSelect = () => {
@@ -1057,90 +1216,93 @@ var CardListItem = ({ card, isSelected, onSelect }) => {
     e.stopPropagation();
     if (isSelected || isRemoveDisabled) return;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("button", { type: "button", onClick: handleSelect, className: "bg-primary/8 flex h-11 w-full overflow-hidden rounded-sm", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      "div",
-      {
-        className: cn("flex h-full w-11 items-center justify-center bg-black/10", {
-          "bg-primary": isSelected
-        }),
-        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex size-5 items-center justify-center rounded-full bg-white", children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "bg-primary size-2.5 rounded-full" }) })
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-      "div",
-      {
-        className: cn(
-          "flex h-full w-full items-center justify-between rounded-r-sm border border-l-0! border-transparent px-3",
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    "button",
+    {
+      type: "button",
+      onClick: handleSelect,
+      className: cn(
+        "flex h-12 w-full overflow-hidden rounded-md border-2 border-(--b-inverse) bg-(--s-primary) hover:bg-(--s-primary-hover)",
+        {
+          "border-(--b-brand)": isSelected
+        }
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "div",
           {
-            "border-primary": isSelected
+            className: cn("flex h-full w-11 shrink-0 items-center justify-center border-r border-(--b-inverse)", {
+              "border-(--b-brand)": isSelected
+            }),
+            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex size-5 items-center justify-center rounded-full border-2 border-(--brand-primary)", children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "size-2 rounded-full bg-(--brand-primary)" }) })
           }
         ),
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "text-sm font-medium text-black", children: card.schema }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("p", { className: "text-sm font-medium text-black/50", children: [
-              "Ending in ",
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-black", children: card.lastFourNumbers })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-              "div",
-              {
-                onClick: handleRemoveCard,
-                className: cn("rounded-md p-1 transition-all hover:bg-gray-300", {
-                  "cursor-not-allowed opacity-50": isSelected || isRemoveDisabled
-                  // 'cursor-pointer': !isSelected || !isRemoveDisabled,
-                }),
-                children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", fill: "none", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("mask", { id: "mask0_188_5407", width: "20", height: "21", x: "0", y: "-1", maskUnits: "userSpaceOnUse", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { fill: "#D9D9D9", d: "M0-.5h20v20H0z" }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("g", { mask: "url(#mask0_188_5407)", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                    "path",
-                    {
-                      fill: "#000",
-                      fillOpacity: ".5",
-                      d: "M6.35 16.17c-.38 0-.7-.13-.96-.4a1.3 1.3 0 0 1-.39-.95V4.5h-.83v-.83H7.5v-.64h5v.64h3.33v.83H15v10.32c0 .39-.13.7-.39.96a1.3 1.3 0 0 1-.96.39h-7.3ZM14.17 4.5H5.83v10.32c0 .15.05.28.15.37.1.1.22.15.37.15h7.3c.13 0 .25-.06.36-.16.1-.11.16-.23.16-.36V4.5Zm-6 9.17h.84v-7.5h-.84v7.5Zm2.82 0h.84v-7.5h-.84v7.5Z"
-                    }
-                  ) })
-                ] })
-              }
-            )
-          ] })
-        ]
-      }
-    )
-  ] });
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+          "div",
+          {
+            className: cn("flex h-full w-full items-center justify-between rounded-r-sm px-3", {
+              "border-(--primary)": isSelected
+            }),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-sm font-medium text-(--brand-primary)", children: card.schema }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("p", { className: "text-sm font-medium text-(--secondary)", children: [
+                  "Ending in ",
+                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-(--brand-primary)", children: card.lastFourNumbers })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                  "div",
+                  {
+                    onClick: handleRemoveCard,
+                    className: cn("rounded-md p-1 text-(--tertiary) transition-all hover:bg-(--s-secondary)", {
+                      "cursor-not-allowed opacity-50": isSelected || isRemoveDisabled
+                      // 'cursor-pointer': !isSelected || !isRemoveDisabled,
+                    }),
+                    children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                      "path",
+                      {
+                        fill: "currentColor",
+                        d: "M6.35 16.17c-.38 0-.7-.13-.96-.4a1.3 1.3 0 0 1-.39-.95V4.5h-.83v-.83H7.5v-.64h5v.64h3.33v.83H15v10.32c0 .39-.13.7-.39.96a1.3 1.3 0 0 1-.96.39h-7.3ZM14.17 4.5H5.83v10.32c0 .15.05.28.15.37.1.1.22.15.37.15h7.3c.13 0 .25-.06.36-.16.1-.11.16-.23.16-.36V4.5Zm-6 9.17h.84v-7.5h-.84v7.5Zm2.82 0h.84v-7.5h-.84v7.5Z"
+                      }
+                    ) })
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
 };
 var CardsList = ({ selectedCard, setCard }) => {
   const { cards, cardsIsLoading } = useCards();
   if (cardsIsLoading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex w-full flex-col gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "bg-primary/8 h-11 animate-pulse rounded-sm" }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "bg-primary/8 h-11 animate-pulse rounded-sm" })
-    ] });
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex w-full flex-col", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "h-11 animate-pulse rounded-sm bg-(--s-primary)" }) });
   }
   if (cards.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex w-full flex-col gap-1", children: cards.map((card) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CardListItem, { isSelected: selectedCard?.id === card.id, onSelect: setCard, card }, card.id)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex w-full flex-col gap-4", children: cards.map((card) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CardListItem, { isSelected: selectedCard?.id === card.id, onSelect: setCard, card }, card.id)) });
 };
 
 // src/components/CreditCardTab/CreditCard/CreditCardForm.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 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_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime13 = 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",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90 ",
-        destructive: "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-        secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline"
+        default: "bg-(--primary) text-(--inverse) shadow-xs hover:bg-(--primary)/90 ",
+        destructive: "bg-destructive text-(--inverse) shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "border bg-background shadow-xs hover:bg-(--accent) hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary: "bg-(--secondary) text-secondary-foreground shadow-xs hover:bg-(--secondary)/80",
+        ghost: "hover:bg-(--accent) hover:text-accent-foreground dark:hover:bg-(--accent)/50",
+        link: "text-(--brand-primary) underline-offset-4 hover:underline"
       },
       size: {
         default: "h-9 px-4 py-2 has-[>svg]:px-3",
@@ -1164,58 +1326,54 @@ function Button({
   ...props
 }) {
   const Comp = asChild ? import_react_slot.Slot : "button";
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Comp, { "data-slot": "button", className: cn(buttonVariants({ variant, size, className })), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.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_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function Checkbox({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     CheckboxPrimitive.Root,
     {
       "data-slot": "checkbox",
       className: cn(
-        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        "peer border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-sm border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-(--primary) data-[state=checked]:bg-(--primary) data-[state=checked]:text-(--inverse) dark:data-[state=checked]:bg-(--primary)",
         className
       ),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         CheckboxPrimitive.Indicator,
         {
           "data-slot": "checkbox-indicator",
           className: "flex items-center justify-center text-current transition-none",
-          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react2.CheckIcon, { className: "size-3.5 text-white" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react2.CheckIcon, { className: "size-3.5 text-(--inverse)" })
         }
       )
     }
   );
 }
 
-// src/ui/label.tsx
-var LabelPrimitive = __toESM(require("@radix-ui/react-label"), 1);
-var import_jsx_runtime10 = require("react/jsx-runtime");
-function Label({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime11 = require("react/jsx-runtime");
-var style = {
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var styleDark = {
+  base: {
+    fontSize: "16px",
+    fontWeight: "500",
+    color: "rgba(255, 255, 255, 0.70)",
+    "::placeholder": {
+      color: "rgba(255, 255, 255, 0.5)"
+    }
+  },
+  invalid: {
+    color: "rgba(255, 255, 255, 0.70)"
+  }
+};
+var styleLight = {
   base: {
     fontSize: "16px",
-    fontWeight: "400",
+    fontWeight: "500",
     color: "#000",
     "::placeholder": {
       color: "rgba(0, 0, 0, 0.5)"
@@ -1226,15 +1384,16 @@ var style = {
   }
 };
 var stripeElementClasses = {
-  base: "w-full bg-primary/7 rounded-xl border border-input px-5 py-4 placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50",
-  invalid: "border-destructive focus-visible:ring-destructive",
+  base: "w-full rounded-[12px] bg-(--s-primary) px-5 py-4 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50",
+  invalid: "focus-visible:ring-destructive",
   focus: "border-ring ring-ring/50 ring-2"
 };
 var CreditCardForm = ({ cancel, saveCard }) => {
-  const [cardError, setCardError] = (0, import_react5.useState)(void 0);
+  const [cardError, setCardError] = (0, import_react6.useState)(void 0);
+  const { env } = useSpreePayEnv();
   const elements = (0, import_react_stripe_js.useElements)();
   const stripe = (0, import_react_stripe_js.useStripe)();
-  const id = (0, import_react5.useId)();
+  const id = (0, import_react6.useId)();
   const handleSaveCard = async () => {
     if (!elements || !stripe) return;
     setCardError(void 0);
@@ -1269,61 +1428,77 @@ var CreditCardForm = ({ cancel, saveCard }) => {
       setCardError("An error occurred while processing your card. Please try again.");
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex w-full flex-col gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  const isDarkMode = env.tenantId === "cdc";
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex w-full flex-col gap-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         import_react_stripe_js.CardNumberElement,
         {
           options: {
-            style,
+            style: isDarkMode ? styleDark : styleLight,
             placeholder: "Card Number",
             classes: stripeElementClasses
           }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex w-full gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex w-full gap-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           import_react_stripe_js.CardExpiryElement,
           {
             options: {
-              style,
+              style: isDarkMode ? styleDark : styleLight,
               placeholder: "MM / YY",
               classes: stripeElementClasses
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           import_react_stripe_js.CardCvcElement,
           {
             options: {
-              style,
+              style: isDarkMode ? styleDark : styleLight,
               placeholder: "CVV",
               classes: stripeElementClasses
             }
           }
         )
       ] }),
-      cardError && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "text-destructive mt-1 text-sm", children: cardError })
+      cardError && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-destructive mt-1 text-sm", children: cardError })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Checkbox, { disabled: true, checked: true, id: "saveCard" }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Label, { className: "text-sm font-medium", htmlFor: "saveCard", children: "Save card for future purchases" })
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Checkbox, { disabled: true, checked: true, id: "saveCard" }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Label, { className: "text-sm font-medium", htmlFor: "saveCard", children: "Save card for future purchases" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex w-full justify-end gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Button, { variant: "outline", className: "hover:bg-gray-100", onClick: cancel, children: "Cancel" }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Button, { onClick: handleSaveCard, children: "Add Card" })
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex w-full justify-end gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        Button,
+        {
+          variant: "outline",
+          className: "border-(--b-brand) bg-transparent font-medium text-(--brand-primary) hover:bg-(--s-primary-hover) hover:text-(--brand-primary)",
+          onClick: cancel,
+          children: "Cancel"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        Button,
+        {
+          className: "bg-(--s-brand) font-medium text-(--inverse) hover:bg-(--s-brand-hover)",
+          onClick: handleSaveCard,
+          children: "Add Card"
+        }
+      )
     ] })
   ] });
 };
 
 // src/components/CreditCardTab/CreditCard/CreditCard.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime16 = 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_runtime12.jsx)(import_react_stripe_js2.Elements, { stripe: stripePromise, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CreditCardForm, { cancel: props.onCancel, saveCard: props.saveNewCard }) });
+  const stripePromise = (0, import_react7.useMemo)(() => (0, import_stripe_js.loadStripe)(props.publicKey), [props.publicKey]);
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_stripe_js2.Elements, { stripe: stripePromise, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CreditCardForm, { cancel: props.onCancel, saveCard: props.saveNewCard }) });
 };
 var CreditCard = () => {
-  const [showForm, setShowForm] = (0, import_react6.useState)(false);
+  const [showForm, setShowForm] = (0, import_react7.useState)(false);
   const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
   const { mutateCards } = useCards();
   const { spreePayConfig } = useSpreePayConfig();
@@ -1338,106 +1513,34 @@ var CreditCard = () => {
   const handleCancel = () => {
     setShowForm(false);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-col items-baseline gap-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h3", { className: "text-primary text-xl leading-[34px] font-semibold", children: "Your Cards" }),
-    !showForm && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex flex-col items-baseline gap-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h3", { className: "text-[22px] leading-9 font-medium text-(--brand-primary)", children: "Your Cards" }),
+    !showForm && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         CardsList,
         {
           selectedCard: selectedPaymentMethod?.type === "CREDIT_CARD" /* CREDIT_CARD */ ? selectedPaymentMethod.method : null,
           setCard
         }
       ),
-      spreePayConfig?.stripePublicKey && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { onClick: () => setShowForm(true), className: "text-sm font-medium text-black hover:underline", children: "Add new card" })
-    ] }),
-    spreePayConfig?.stripePublicKey && showForm && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(StripeWrapper, { onCancel: handleCancel, saveNewCard, publicKey: spreePayConfig.stripePublicKey })
-  ] });
-};
-
-// src/components/CreditCardTab/Points/Points.tsx
-var import_react12 = require("react");
-
-// src/components/common/PointsSwitch.tsx
-var import_react7 = require("react");
-
-// src/ui/switch.tsx
-var SwitchPrimitive = __toESM(require("@radix-ui/react-switch"), 1);
-var import_jsx_runtime13 = require("react/jsx-runtime");
-function Switch({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.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_runtime13.jsx)(
-        SwitchPrimitive.Thumb,
+      spreePayConfig?.creditCard.infoMessage && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(InfoBanner, { message: spreePayConfig.creditCard.infoMessage }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        "button",
         {
-          "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"
+          onClick: () => setShowForm(true),
+          disabled: !spreePayConfig?.stripePublicKey,
+          className: "text-md text-(--brand-primary) hover:underline",
+          children: "Add new card"
         }
       )
-    }
-  );
-}
-
-// src/components/common/PointsSwitch.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var PointsSwitch = (props) => {
-  const { disabled = false, value, onChange, message } = props;
-  const { spreePayConfig } = useSpreePayConfig();
-  const { appProps } = useStaticConfig();
-  const { balance } = useSlapiBalance();
-  const id = (0, import_react7.useId)();
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-col gap-6", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Switch, { checked: value, onCheckedChange: onChange, disabled, id }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
-          Label,
-          {
-            htmlFor: id,
-            className: "text-md flex-col items-baseline gap-0 leading-[1.3] font-semibold text-black sm:flex-row sm:gap-2 md:text-lg",
-            children: [
-              "Use Points ",
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-xs font-medium", children: "Optional" })
-            ]
-          }
-        )
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center gap-2.5", children: [
-        balance?.availablePoints ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("p", { className: "flex-1 text-right text-sm font-medium text-black", children: [
-          formatPoints(balance.availablePoints, spreePayConfig?.pointsTitle),
-          !!spreePayConfig?.pointsConversionRatio && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-black/50", children: ` ${formatUSD(balance.availablePoints * spreePayConfig.pointsConversionRatio)}` })
-        ] }) : null,
-        Boolean(appProps.topUpLink) && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-          "a",
-          {
-            className: "bg-primary cursor-pointer rounded-full px-2 py-1.5 text-xs font-medium text-white",
-            rel: "noreferrer",
-            target: "_blank",
-            href: appProps.topUpLink,
-            children: "Top Up"
-          }
-        )
-      ] })
     ] }),
-    message && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex gap-1 rounded-sm border border-[#006FD533] bg-[#006FD50D] p-1.5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("svg", { className: "size-5 shrink-0", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-        "path",
-        {
-          fill: "#000",
-          d: "M9.6 13.8h.8V9.2h-.8zM10 8q.2 0 .4-.2l.1-.3-.1-.4L10 7l-.4.1-.1.4.1.3zm0 9.5a7 7 0 0 1-5.3-2.2 8 8 0 0 1-1.6-8.2 8 8 0 0 1 4-4q1.4-.6 2.9-.6a7 7 0 0 1 5.3 2.2 8 8 0 0 1 1.6 8.2 8 8 0 0 1-4 4q-1.4.6-2.9.6m0-.8q2.8 0 4.7-2 2-1.9 2-4.7t-2-4.7a6 6 0 0 0-4.7-2q-2.8 0-4.7 2a6 6 0 0 0-2 4.7q0 2.8 2 4.7 1.9 2 4.7 2"
-        }
-      ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "text-xs font-medium text-black", children: message })
-    ] })
+    spreePayConfig?.stripePublicKey && showForm && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(StripeWrapper, { onCancel: handleCancel, saveNewCard, publicKey: spreePayConfig.stripePublicKey })
   ] });
 };
 
+// src/components/CreditCardTab/Points/Points.tsx
+var import_react12 = require("react");
+
 // src/components/CreditCardTab/Points/SplitBlock.tsx
 var import_react11 = require("react");
 var import_airkit2 = require("@mocanetwork/airkit");
@@ -1446,15 +1549,15 @@ var import_airkit2 = require("@mocanetwork/airkit");
 var import_react10 = require("react");
 
 // src/ui/input.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function Input({ className, type, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.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",
+        "file:text-foreground dark:bg-input/30 border-input placeholder:text-muted-foreground 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 selection:bg-(--primary) selection:text-(--inverse) 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
@@ -1525,7 +1628,7 @@ function useComposedRefs(...refs) {
 
 // ../../node_modules/@radix-ui/react-context/dist/index.mjs
 var React3 = __toESM(require("react"), 1);
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function createContextScope(scopeName, createContextScopeDeps = []) {
   let defaultContexts = [];
   function createContext32(rootComponentName, defaultContext) {
@@ -1536,7 +1639,7 @@ function createContextScope(scopeName, createContextScopeDeps = []) {
       const { scope, children, ...context } = props;
       const Context = scope?.[scopeName]?.[index] || BaseContext;
       const value = React3.useMemo(() => context, Object.values(context));
-      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Context.Provider, { value, children });
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Context.Provider, { value, children });
     };
     Provider.displayName = rootComponentName + "Provider";
     function useContext22(consumerName, scope) {
@@ -1661,7 +1764,7 @@ function isFunction(value) {
 
 // ../../node_modules/@radix-ui/react-direction/dist/index.mjs
 var React6 = __toESM(require("react"), 1);
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var DirectionContext = React6.createContext(void 0);
 function useDirection(localDir) {
   const globalDir = React6.useContext(DirectionContext);
@@ -1722,7 +1825,7 @@ function useSize(element) {
 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_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var NODES = [
   "a",
   "button",
@@ -1750,7 +1853,7 @@ var Primitive = NODES.reduce((primitive, node) => {
     if (typeof window !== "undefined") {
       window[/* @__PURE__ */ Symbol.for("radix-ui")] = true;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Comp, { ...primitiveProps, ref: forwardedRef });
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Comp, { ...primitiveProps, ref: forwardedRef });
   });
   Node2.displayName = `Primitive.${node}`;
   return { ...primitive, [node]: Node2 };
@@ -1759,10 +1862,10 @@ var Primitive = NODES.reduce((primitive, node) => {
 // ../../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_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var import_react9 = __toESM(require("react"), 1);
 var import_react_slot4 = require("@radix-ui/react-slot");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function createCollection(name) {
   const PROVIDER_NAME = name + "CollectionProvider";
   const [createCollectionContext, createCollectionScope2] = createContextScope(PROVIDER_NAME);
@@ -1774,7 +1877,7 @@ function createCollection(name) {
     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_runtime19.jsx)(CollectionProviderImpl, { scope, itemMap, collectionRef: ref, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CollectionProviderImpl, { scope, itemMap, collectionRef: ref, children });
   };
   CollectionProvider.displayName = PROVIDER_NAME;
   const COLLECTION_SLOT_NAME = name + "CollectionSlot";
@@ -1784,7 +1887,7 @@ function createCollection(name) {
       const { scope, children } = props;
       const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);
       const composedRefs = useComposedRefs(forwardedRef, context.collectionRef);
-      return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(CollectionSlotImpl, { ref: composedRefs, children });
+      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CollectionSlotImpl, { ref: composedRefs, children });
     }
   );
   CollectionSlot.displayName = COLLECTION_SLOT_NAME;
@@ -1801,7 +1904,7 @@ function createCollection(name) {
         context.itemMap.set(ref, { ref, ...itemData });
         return () => void context.itemMap.delete(ref);
       });
-      return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(CollectionItemSlotImpl, { ...{ [ITEM_DATA_ATTR]: "" }, ref: composedRefs, children });
+      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CollectionItemSlotImpl, { ...{ [ITEM_DATA_ATTR]: "" }, ref: composedRefs, children });
     }
   );
   CollectionItemSlot.displayName = ITEM_SLOT_NAME;
@@ -1827,7 +1930,7 @@ function createCollection(name) {
 }
 
 // ../../node_modules/@radix-ui/react-slider/dist/index.mjs
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var PAGE_KEYS = ["PageUp", "PageDown"];
 var ARROW_KEYS = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"];
 var BACK_KEYS = {
@@ -1905,7 +2008,7 @@ var Slider = React11.forwardRef(
         }
       });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       SliderProvider,
       {
         scope: props.__scopeSlider,
@@ -1918,7 +2021,7 @@ var Slider = React11.forwardRef(
         values,
         orientation,
         form,
-        children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Collection.Provider, { scope: props.__scopeSlider, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Collection.Slot, { scope: props.__scopeSlider, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Collection.Provider, { scope: props.__scopeSlider, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Collection.Slot, { scope: props.__scopeSlider, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           SliderOrientation,
           {
             "aria-disabled": disabled,
@@ -1987,7 +2090,7 @@ var SliderHorizontal = React11.forwardRef(
       rectRef.current = rect;
       return value(pointerPosition - rect.left);
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       SliderOrientationProvider,
       {
         scope: props.__scopeSlider,
@@ -1995,7 +2098,7 @@ var SliderHorizontal = React11.forwardRef(
         endEdge: isSlidingFromLeft ? "right" : "left",
         direction: isSlidingFromLeft ? 1 : -1,
         size: "width",
-        children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           SliderImpl,
           {
             dir: direction,
@@ -2053,7 +2156,7 @@ var SliderVertical = React11.forwardRef(
       rectRef.current = rect;
       return value(pointerPosition - rect.top);
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       SliderOrientationProvider,
       {
         scope: props.__scopeSlider,
@@ -2061,7 +2164,7 @@ var SliderVertical = React11.forwardRef(
         endEdge: isSlidingFromBottom ? "top" : "bottom",
         size: "height",
         direction: isSlidingFromBottom ? 1 : -1,
-        children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           SliderImpl,
           {
             "data-orientation": "vertical",
@@ -2107,7 +2210,7 @@ var SliderImpl = React11.forwardRef(
       ...sliderProps
     } = props;
     const context = useSliderContext(SLIDER_NAME, __scopeSlider);
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       Primitive.span,
       {
         ...sliderProps,
@@ -2154,7 +2257,7 @@ var SliderTrack = React11.forwardRef(
   (props, forwardedRef) => {
     const { __scopeSlider, ...trackProps } = props;
     const context = useSliderContext(TRACK_NAME, __scopeSlider);
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       Primitive.span,
       {
         "data-disabled": context.disabled ? "" : void 0,
@@ -2180,7 +2283,7 @@ var SliderRange = React11.forwardRef(
     );
     const offsetStart = valuesCount > 1 ? Math.min(...percentages) : 0;
     const offsetEnd = 100 - Math.max(...percentages);
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       Primitive.span,
       {
         "data-orientation": context.orientation,
@@ -2207,7 +2310,7 @@ var SliderThumb = React11.forwardRef(
       () => thumb ? getItems().findIndex((item) => item.ref.current === thumb) : -1,
       [getItems, thumb]
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SliderThumbImpl, { ...props, ref: composedRefs, index });
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SliderThumbImpl, { ...props, ref: composedRefs, index });
   }
 );
 var SliderThumbImpl = React11.forwardRef(
@@ -2232,7 +2335,7 @@ var SliderThumbImpl = React11.forwardRef(
         };
       }
     }, [thumb, context.thumbs]);
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
       "span",
       {
         style: {
@@ -2241,7 +2344,7 @@ var SliderThumbImpl = React11.forwardRef(
           [orientation.startEdge]: `calc(${percent}% + ${thumbInBoundsOffset}px)`
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Collection.ItemSlot, { scope: props.__scopeSlider, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Collection.ItemSlot, { scope: props.__scopeSlider, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
             Primitive.span,
             {
               role: "slider",
@@ -2261,7 +2364,7 @@ var SliderThumbImpl = React11.forwardRef(
               })
             }
           ) }),
-          isFormControl && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          isFormControl && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
             SliderBubbleInput,
             {
               name: name ?? (context.name ? context.name + (context.values.length > 1 ? "[]" : "") : void 0),
@@ -2294,7 +2397,7 @@ var SliderBubbleInput = React11.forwardRef(
         input.dispatchEvent(event);
       }
     }, [prevValue, value]);
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       Primitive.input,
       {
         style: { display: "none" },
@@ -2376,14 +2479,14 @@ function cn2(...inputs) {
 }
 
 // src/ui/slider.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function Slider2(props) {
   const { className, defaultValue, value, min = 0, max = 100, ...rest } = props;
   const _values = React12.useMemo(
     () => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max],
     [value, defaultValue, min, max]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
     Root5,
     {
       "data-slot": "slider",
@@ -2392,32 +2495,34 @@ function Slider2(props) {
       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",
+        "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
       ),
       ...rest,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           Track,
           {
             "data-slot": "slider-track",
             className: cn2(
-              "relative grow overflow-hidden rounded-full bg-black/15 data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
+              "relative grow overflow-hidden rounded-full bg-(--primary)/15 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_runtime22.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
               Range,
               {
                 "data-slot": "slider-range",
-                className: cn2("absolute bg-black data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full")
+                className: cn2(
+                  "absolute bg-(--primary) data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
+                )
               }
             )
           }
         ),
-        Array.from({ length: _values.length }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        Array.from({ length: _values.length }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           Thumb2,
           {
             "data-slot": "slider-thumb",
-            className: "ring-ring/50 block size-5 shrink-0 rounded-full border border-white bg-black shadow-sm shadow-[#00000033] transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+            className: "ring-ring/50 block size-5 shrink-0 rounded-full border border-(--b-inverse) bg-(--primary) shadow-(--primary)/20 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
         ))
@@ -2427,7 +2532,7 @@ function Slider2(props) {
 }
 
 // src/components/CreditCardTab/Points/PointsSelector.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var PointsSelector = (props) => {
   const { isDisabled, isSelected, onSelect, children } = props;
   const { balance } = useSlapiBalance();
@@ -2446,44 +2551,49 @@ var PointsSelector = (props) => {
   };
   const pointsValue = String(Math.round(splitTokens));
   const usdValue = formatUSD(usdAmount + getTransactionFee(usdAmount, appProps.transactionFeePercentage));
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
     "button",
     {
       disabled: isDisabled,
       onClick: onSelect,
-      className: cn("bg-primary/8 cursor-pointer overflow-hidden rounded-sm border border-transparent", {
-        "border-primary": isSelected,
-        "cursor-not-allowed opacity-50": isDisabled
-      }),
+      className: cn(
+        "cursor-pointer overflow-hidden rounded-md border-2 border-transparent opacity-50 disabled:cursor-not-allowed",
+        {
+          "border-(--b-brand)": isSelected
+        }
+      ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: cn("flex h-11 w-full", { "bg-black/4": isSelected }), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex h-11 w-full bg-(--s-primary) hover:bg-(--s-primary-hover)", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
             "div",
             {
-              className: cn("flex h-full w-11 items-center justify-center bg-black/10", {
-                "bg-primary": isSelected
-              }),
-              children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex size-5 items-center justify-center rounded-full bg-white", children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "bg-primary size-2.5 rounded-full" }) })
+              className: cn(
+                "flex h-full w-11 shrink-0 items-center justify-center border-r border-b border-(--b-inverse)",
+                {
+                  "border-(--b-brand)": isSelected
+                }
+              ),
+              children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex size-5 items-center justify-center rounded-full border-2 border-(--brand-primary)", children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "size-2 rounded-full bg-(--brand-primary)" }) })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex h-full w-full items-center justify-between gap-2 px-2 sm:gap-3 sm:px-3", children })
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex h-full w-full items-center justify-between gap-2 px-2 sm:gap-3 sm:px-3", children })
         ] }),
-        isSelected && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "px-2 pt-6 pb-2 sm:px-3 md:px-4", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex justify-between gap-2 sm:gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col gap-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        isSelected && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "px-2 pt-5 pb-2 sm:px-3 md:px-4", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex justify-between gap-2 sm:gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
               Input,
               {
                 readOnly: true,
                 name: "points amount",
                 value: pointsValue,
-                className: "sm:text-md min-w-[50px] bg-white px-1 text-center text-xs font-medium sm:min-w-[100px] sm:px-2",
+                className: "sm:text-md min-w-[50px] bg-(--s-default) px-1 text-center text-xs font-medium sm:min-w-[100px] sm:px-2",
                 style: { width: `${pointsValue.length}ch` },
                 onClick: (e) => e.stopPropagation()
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-left text-xs leading-[20px] text-black/45", children: "Points" })
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "text-left text-xs leading-5 text-(--tertiary)", children: "Points" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex w-full items-center pb-6", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex w-full items-center pb-6", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
             Slider2,
             {
               value: [splitTokens],
@@ -2495,19 +2605,19 @@ var PointsSelector = (props) => {
               step
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col gap-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
               Input,
               {
                 readOnly: true,
                 name: "usd amount",
                 value: usdValue,
-                className: "sm:text-md min-w-[50px] bg-white px-1 text-center text-xs font-medium sm:min-w-[100px] sm:px-2",
+                className: "sm:text-md min-w-[50px] bg-(--s-default) px-1 text-center text-xs font-medium sm:min-w-[100px] sm:px-2",
                 style: { width: `${usdValue.length}ch` },
                 onClick: (e) => e.stopPropagation()
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-left text-xs leading-[20px] text-black/45", children: "Card" })
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "text-left text-xs leading-5 text-(--tertiary)", children: "Card" })
           ] })
         ] }) })
       ]
@@ -2516,7 +2626,7 @@ var PointsSelector = (props) => {
 };
 
 // src/components/CreditCardTab/Points/SplitBlock.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var SplitBlock = (props) => {
   const { onToggle, isSelected, onSelect } = props;
   const { balance, isBalanceLoading } = useSlapiBalance();
@@ -2560,21 +2670,21 @@ var SplitBlock = (props) => {
     doInit();
   }, [spreePayConfig?.pointsChain, initWallet, env.useWeb3Points]);
   const isPointsSelectorDisabled = env.useWeb3Points ? !walletReady : false;
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex flex-col gap-1", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(PointsSelector, { isDisabled: isPointsSelectorDisabled, onSelect: () => onSelect("air"), isSelected, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex items-center gap-2", children: balance?.availablePoints ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("p", { className: "text-left text-xs font-medium text-black sm:text-sm", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-black/50", children: "Available" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "flex flex-col gap-1", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(PointsSelector, { isDisabled: isPointsSelectorDisabled, onSelect: () => onSelect("air"), isSelected, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "flex items-center gap-2", children: balance?.availablePoints ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("p", { className: "text-left text-xs font-medium text-(--brand-primary) sm:text-sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "text-(--secondary)", children: "Available" }),
       " ",
       formatPoints(balance.availablePoints, pointsTitle),
       " ",
-      pointsConversionRatio && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-black/50", children: formatUSD(balance.availablePoints * pointsConversionRatio) })
+      pointsConversionRatio && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "text-(--secondary)", children: formatUSD(balance.availablePoints * pointsConversionRatio) })
     ] }) : null }),
-    isBalanceLoading ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "h-4 w-6 animate-pulse bg-gray-200" }) : !balance?.availablePoints && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-sm font-medium text-black", children: "No points available" }),
-    address && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "text-sm font-medium text-black", children: address.length > 8 ? `${address.slice(0, 4)}...${address.slice(-4)}` : address })
+    isBalanceLoading ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "h-4 w-6 animate-pulse bg-(--s-secondary)" }) : !balance?.availablePoints && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-sm font-medium text-(--brand-primary)", children: "No points available" }),
+    address && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "text-sm font-medium text-(--brand-primary)", children: address.length > 8 ? `${address.slice(0, 4)}...${address.slice(-4)}` : address })
   ] }) });
 };
 
 // src/components/CreditCardTab/Points/Points.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var Points = () => {
   const [usePoints, setUsePoints] = (0, import_react12.useState)(false);
   const [selectedPointsType, setSelectedPointsType] = (0, import_react12.useState)(null);
@@ -2588,8 +2698,8 @@ var Points = () => {
       setSelectedPaymentMethod({ ...selectedPaymentMethod, splitAmount: void 0 });
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       PointsSwitch,
       {
         value: usePoints,
@@ -2598,7 +2708,7 @@ var Points = () => {
         disabled: !spreePayConfig?.creditCard.enabled || !spreePayConfig?.creditCard.points || appProps.disabledPoints
       }
     ),
-    usePoints && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    usePoints && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       SplitBlock,
       {
         onToggle: handleTogglePoints,
@@ -2610,7 +2720,7 @@ var Points = () => {
 };
 
 // src/components/CreditCardTab/CreditCardTab.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var CreditCardTab = () => {
   const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
   const { env } = useSpreePayEnv();
@@ -2665,23 +2775,157 @@ var CreditCardTab = () => {
   (0, import_react13.useEffect)(() => {
     register(handlePay);
   }, [register, handlePay]);
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "border-b border-black/7 px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(CreditCard, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "flex flex-col gap-6 border-b border-black/7 px-5 pt-5 pb-5 md:px-7 md:pt-6 md:pb-7", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Points, {}) })
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "border-b border-b-(--border-component-specific-card) px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(CreditCard, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex flex-col gap-4 border-b border-b-(--border-component-specific-card) px-5 pt-5 pb-5 md:px-7 md:pt-6 md:pb-7", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Points, {}) })
+  ] });
+};
+
+// src/components/CryptoComTab/CryptoComTab.tsx
+var import_react14 = require("react");
+
+// src/hooks/payments/useCryptoComPayment.ts
+var import_nice_modal_react5 = __toESM(require("@ebay/nice-modal-react"), 1);
+var useCryptoComPayment = () => {
+  const { selectedPaymentMethod } = useSpreePaymentMethod();
+  const { env } = useSpreePayEnv();
+  const cryptoComPayment = async (params) => {
+    if (selectedPaymentMethod.type !== "CDC" /* CDC */) {
+      throw new Error("Unsupported payment method");
+    }
+    const { hash, metadata } = params;
+    const { data: paymentResData } = await SlapiPaymentService.createPayment({
+      hash,
+      metadata,
+      type: "CDC" /* CDC */,
+      cdc: {
+        returnUrl: `${typeof window !== "undefined" ? window.location.origin : ""}${env.redirect3dsURI}?payment_intent=success`,
+        cancelUrl: `${typeof window !== "undefined" ? window.location.origin : ""}${env.redirect3dsURI}?payment_intent=canceled`
+      }
+    });
+    let { status } = paymentResData;
+    if (paymentResData.redirectUrl) {
+      const paymentIntent = await import_nice_modal_react5.default.show(Iframe3ds, { url: paymentResData.redirectUrl });
+      if (paymentIntent === "success") {
+        const { data: validateData } = await SlapiPaymentService.validateCDC({ paymentId: paymentResData.id });
+        ({ status } = validateData);
+      } else {
+        status = "FAILED" /* FAILED */;
+      }
+    }
+    return {
+      status,
+      paymentType: "CDC" /* CDC */,
+      paymentId: paymentResData.id,
+      txId: paymentResData.txId,
+      txHash: null
+    };
+  };
+  return { cryptoComPayment };
+};
+
+// src/components/CryptoComTab/Checkout.tsx
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var Checkout = () => {
+  const { appProps } = useStaticConfig();
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    "button",
+    {
+      onClick: appProps.onProcess,
+      disabled: appProps.isProcessing,
+      className: "flex flex-col items-center rounded-md bg-[#00307D] p-2 text-(--brand-primary) hover:bg-[#002655] disabled:cursor-not-allowed disabled:bg-[#002655] disabled:text-(--disabled)",
+      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "76", height: "28", fill: "none", viewBox: "0 0 76 28", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          "path",
+          {
+            fill: "currentColor",
+            fillRule: "evenodd",
+            d: "M47.42 9.06c0 4.02-3.25 6.09-7.1 6.09h-4.38v6.53h-2.03V3.16h6.75c4.08 0 6.76 2.22 6.76 5.9m-2.06.08c0-2.68-1.94-4.05-4.85-4.05h-4.57v8.15h4.47c2.99 0 4.95-1.64 4.95-4.1m9.28.47c-1.57 0-2.81.43-4.05 1.01L50 8.95a11 11 0 0 1 4.86-1.14c3.63 0 5.67 1.9 5.67 5.5v8.37h-1.9v-2.06a5.8 5.8 0 0 1-4.83 2.35c-2.48 0-4.98-1.43-4.98-4.28 0-2.92 2.32-4.45 5.7-4.45 1.7 0 2.92.24 4.1.58v-.47c0-2.47-1.47-3.74-3.97-3.74m.08 5.14c1.62 0 2.94.29 3.92.58v1.32c0 2.17-2.01 3.71-4.46 3.71-1.8 0-3.36-1-3.36-2.75s1.4-2.86 3.9-2.86m12.23 11.8 1.75-4.7-6.14-13.8h2.2l4.84 11.4 4.28-11.4H76l-7.32 18.5z",
+            clipRule: "evenodd"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          "path",
+          {
+            fill: "currentColor",
+            fillRule: "evenodd",
+            d: "M0 6.77V20.3l11.66 6.77 11.66-6.77V6.77L11.66 0zM1.03 19.7V7.36L11.66 1.2 22.3 7.36v12.35l-10.64 6.17z",
+            clipRule: "evenodd"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          "path",
+          {
+            fill: "currentColor",
+            fillRule: "evenodd",
+            d: "M16.23 5.84H7.07L6 10.54h11.33zM8.7 17v-3.12l-2.72-1.73-3.07 2.3 4.19 7.31h1.67l1.98-1.85v-.93z",
+            clipRule: "evenodd"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          "path",
+          {
+            fill: "currentColor",
+            fillRule: "evenodd",
+            d: "M14.64 11.25H8.7l1 2.62-.3 2.94h4.54l-.28-2.94z",
+            clipRule: "evenodd"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          "path",
+          {
+            fill: "currentColor",
+            fillRule: "evenodd",
+            d: "m17.35 12.13-2.68 1.75V17l-2.05 1.98v.93l1.98 1.83h1.65l4.16-7.3z",
+            clipRule: "evenodd"
+          }
+        )
+      ] })
+    }
+  );
+};
+
+// src/components/CryptoComTab/CryptoComTab.tsx
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var CryptoComTab = () => {
+  const { register } = useSpreePayRegister();
+  const { cryptoComPayment } = useCryptoComPayment();
+  const { spreePayConfig } = useSpreePayConfig();
+  const handlePay = (0, import_react14.useCallback)(
+    async (data) => {
+      try {
+        const res = await cryptoComPayment(data);
+        if (["AUTHORIZED" /* AUTHORIZED */, "CAPTURED" /* CAPTURED */].includes(res.status)) {
+          return Promise.resolve(res);
+        }
+        return Promise.reject(new PaymentError("Crypto payment failed", res.status));
+      } catch (_) {
+        return Promise.reject(new PaymentError("Payment failed", "FAILED" /* FAILED */));
+      }
+    },
+    [cryptoComPayment]
+  );
+  (0, import_react14.useEffect)(() => {
+    register(handlePay);
+  }, [register, handlePay]);
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex w-full flex-col gap-4 border-b border-b-(--border-component-specific-card) px-5 py-5 md:px-7 md:py-6", children: [
+    spreePayConfig?.cryptoCom.infoMessage && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(InfoBanner, { message: spreePayConfig.cryptoCom.infoMessage }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Legal, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Checkout, {})
   ] });
 };
 
 // src/components/CryptoTab/Crypto/CryptoWrapper.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 var import_react_query = require("@tanstack/react-query");
-var import_nice_modal_react7 = __toESM(require("@ebay/nice-modal-react"), 1);
+var import_nice_modal_react8 = __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_wagmi5 = require("wagmi");
 var import_chains = require("wagmi/chains");
 
 // src/components/CryptoTab/Crypto/Crypto.tsx
-var import_react15 = require("react");
+var import_react16 = require("react");
 var import_wagmi4 = require("wagmi");
 
 // ../../node_modules/@wagmi/core/dist/esm/utils/getAction.js
@@ -2856,70 +3100,50 @@ var useCryptoPayment = () => {
 
 // src/components/CryptoTab/Crypto/ConnectButton.tsx
 var import_rainbowkit = require("@rainbow-me/rainbowkit");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var ConnectButton = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_rainbowkit.ConnectButton.Custom, { children: ({ mounted, chain, account, openAccountModal, openChainModal, openConnectModal }) => {
+  const buttonCN = "h-9 rounded-full border border-(--b-brand) px-4 text-sm font-medium text-(--brand-primary)";
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_rainbowkit.ConnectButton.Custom, { children: ({ mounted, chain, account, openAccountModal, openChainModal, openConnectModal }) => {
     if (!mounted) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_jsx_runtime27.Fragment, { children: (() => {
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_jsx_runtime31.Fragment, { children: (() => {
       if (!mounted || !account || !chain) {
-        return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-          "button",
-          {
-            className: "h-[34px] rounded-md border border-black px-3 text-sm font-medium text-black",
-            onClick: openConnectModal,
-            children: "Connect a Wallet"
-          }
-        );
+        return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("button", { className: buttonCN, onClick: openConnectModal, children: "Connect wallet" });
       }
       if (chain.unsupported) {
-        return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-          "button",
-          {
-            className: "h-[34px] rounded-md border border-black px-3 text-sm font-medium text-black",
-            onClick: openChainModal,
-            children: "Select a Network"
-          }
-        );
+        return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("button", { className: buttonCN, onClick: openChainModal, children: "Select a Network" });
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
-        "button",
-        {
-          className: "flex h-[34px] items-center gap-2 rounded-md border border-black px-1.5 text-sm font-medium text-black",
-          onClick: openAccountModal,
-          children: [
-            chain.hasIcon && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "size-6 overflow-hidden rounded-full", style: { background: chain.iconBackground }, children: chain.iconUrl && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("img", { alt: chain.name ?? "Chain icon", src: chain.iconUrl }) }),
-            account.displayName
-          ]
-        }
-      );
+      return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("button", { className: cn(buttonCN, "flex items-center gap-2 pl-1.5"), onClick: openAccountModal, children: [
+        chain.hasIcon && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "size-6 overflow-hidden rounded-full", style: { background: chain.iconBackground }, children: chain.iconUrl && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("img", { alt: chain.name ?? "Chain icon", src: chain.iconUrl }) }),
+        account.displayName
+      ] });
     })() });
   } });
 };
 
 // src/config/symbolLogos.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
-var MOCA_SVG = /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", fill: "none", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("circle", { cx: "14", cy: "14", r: "13.5", fill: "#C15F97" }),
-  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var MOCA_SVG = /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", fill: "none", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("circle", { cx: "14", cy: "14", r: "13.5", fill: "#C15F97" }),
+  /* @__PURE__ */ (0, import_jsx_runtime32.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_runtime28.jsx)("circle", { cx: "16", cy: "14", r: "1.5", fill: "#fff" })
+  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("circle", { cx: "16", cy: "14", r: "1.5", fill: "#fff" })
 ] });
-var USDC_SVG = /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", fill: "none", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("g", { clipPath: "url(#clip0_528_9163)", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.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_runtime28.jsx)(
+var USDC_SVG = /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", fill: "none", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("g", { clipPath: "url(#clip0_528_9163)", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.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_runtime32.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_runtime28.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       "path",
       {
         fill: "#fff",
@@ -2927,11 +3151,11 @@ var USDC_SVG = /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("svg", { xmlns: "h
       }
     )
   ] }),
-  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("clipPath", { id: "clip0_528_9163", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { fill: "#fff", d: "M0 0h28v28H0z" }) }) })
+  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("clipPath", { id: "clip0_528_9163", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { fill: "#fff", d: "M0 0h28v28H0z" }) }) })
 ] });
-var USDT_SVG = /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", fill: "none", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { fill: "#26A17B", d: "M14 28a14 14 0 1 0 0-28 14 14 0 0 0 0 28Z" }),
-  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+var USDT_SVG = /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", fill: "none", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { fill: "#26A17B", d: "M14 28a14 14 0 1 0 0-28 14 14 0 0 0 0 28Z" }),
+  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     "path",
     {
       fill: "#fff",
@@ -2939,23 +3163,23 @@ var USDT_SVG = /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("svg", { xmlns: "h
     }
   )
 ] });
-var WETH_SVG = /* @__PURE__ */ (0, import_jsx_runtime28.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_runtime28.jsxs)("g", { clipPath: "url(#clip0_528_9173)", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+var WETH_SVG = /* @__PURE__ */ (0, import_jsx_runtime32.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_runtime32.jsxs)("g", { clipPath: "url(#clip0_528_9173)", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.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_runtime28.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime32.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_runtime28.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       "path",
       {
         fill: "#000",
@@ -2964,8 +3188,8 @@ var WETH_SVG = /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("svg", { xmlns: "h
         clipRule: "evenodd"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime28.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_runtime28.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime32.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_runtime32.jsx)(
       "path",
       {
         fill: "#000",
@@ -2974,8 +3198,8 @@ var WETH_SVG = /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("svg", { xmlns: "h
         clipRule: "evenodd"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime28.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_runtime28.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime32.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_runtime32.jsx)(
       "path",
       {
         fill: "#000",
@@ -2983,7 +3207,7 @@ var WETH_SVG = /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("svg", { xmlns: "h
       }
     )
   ] }),
-  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("clipPath", { id: "clip0_528_9173", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { fill: "#fff", d: "M0 0h24v24H0z" }) }) })
+  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("clipPath", { id: "clip0_528_9173", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { fill: "#fff", d: "M0 0h24v24H0z" }) }) })
 ] });
 var symbolLogos = {
   MOCA: MOCA_SVG,
@@ -2996,27 +3220,27 @@ function getSymbolLogo(symbol) {
 }
 
 // src/components/CryptoTab/Crypto/Logos.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var Logos = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "rounded-full border border-[#F5F7FA]", children: getSymbolLogo("MOCA") }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "-ml-2.5 rounded-full border border-[#F5F7FA]", children: getSymbolLogo("USDC") }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "-ml-2.5 rounded-full border border-[#F5F7FA]", children: getSymbolLogo("USDT") }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "-ml-2.5 rounded-full border border-[#F5F7FA] bg-[#F5F7FA]", children: getSymbolLogo("WETH") })
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "rounded-full border border-(--b-primary)", children: getSymbolLogo("MOCA") }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "-ml-2.5 rounded-full border border-(--b-primary)", children: getSymbolLogo("USDC") }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "-ml-2.5 rounded-full border border-(--b-primary)", children: getSymbolLogo("USDT") }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "-ml-2.5 rounded-full border border-(--b-primary) bg-(--s-primary)", children: getSymbolLogo("WETH") })
   ] });
 };
 
 // src/components/CryptoTab/Crypto/SelectCoinButton.tsx
-var import_nice_modal_react6 = __toESM(require("@ebay/nice-modal-react"), 1);
+var import_nice_modal_react7 = __toESM(require("@ebay/nice-modal-react"), 1);
 
 // src/modals/CryptoSelectModal.tsx
-var import_react14 = require("react");
-var import_nice_modal_react5 = __toESM(require("@ebay/nice-modal-react"), 1);
+var import_react15 = require("react");
+var import_nice_modal_react6 = __toESM(require("@ebay/nice-modal-react"), 1);
 
 // ../ui/src/components/input.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function Input2({ className, type, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     "input",
     {
       type,
@@ -3039,7 +3263,7 @@ var React14 = __toESM(require("react"), 1);
 var React13 = __toESM(require("react"), 1);
 var ReactDOM2 = __toESM(require("react-dom"), 1);
 var import_react_slot5 = require("@radix-ui/react-slot");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var NODES2 = [
   "a",
   "button",
@@ -3067,14 +3291,14 @@ var Primitive2 = NODES2.reduce((primitive, node) => {
     if (typeof window !== "undefined") {
       window[/* @__PURE__ */ Symbol.for("radix-ui")] = true;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Comp, { ...primitiveProps, ref: forwardedRef });
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Comp, { ...primitiveProps, ref: forwardedRef });
   });
   Node2.displayName = `Primitive.${node}`;
   return { ...primitive, [node]: Node2 };
 }, {});
 
 // ../../node_modules/@radix-ui/react-separator/dist/index.mjs
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var NAME = "Separator";
 var DEFAULT_ORIENTATION = "horizontal";
 var ORIENTATIONS = ["horizontal", "vertical"];
@@ -3083,7 +3307,7 @@ var Separator = React14.forwardRef((props, forwardedRef) => {
   const orientation = isValidOrientation(orientationProp) ? orientationProp : DEFAULT_ORIENTATION;
   const ariaOrientation = orientation === "vertical" ? orientation : void 0;
   const semanticProps = decorative ? { role: "none" } : { "aria-orientation": ariaOrientation, role: "separator" };
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     Primitive2.div,
     {
       "data-orientation": orientation,
@@ -3100,14 +3324,14 @@ function isValidOrientation(orientation) {
 var Root6 = Separator;
 
 // ../ui/src/components/separator.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 function Separator2({
   className,
   orientation = "horizontal",
   decorative = true,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     Root6,
     {
       "data-slot": "separator",
@@ -3214,14 +3438,14 @@ var useBaseTokens = () => {
 };
 
 // src/modals/CryptoSelectModal.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
-var CryptoSelectModal = import_nice_modal_react5.default.create(() => {
-  const modal = (0, import_nice_modal_react5.useModal)();
+var import_jsx_runtime38 = require("react/jsx-runtime");
+var CryptoSelectModal = import_nice_modal_react6.default.create(() => {
+  const modal = (0, import_nice_modal_react6.useModal)();
   const { isLoading, error, erc20Balances } = useBaseERC20Token();
   const { isLoadingNative, nativeError, nativeBalance } = useBaseNativeToken();
   const { tokens, tokensIsLoading } = useBaseTokens();
-  const [search, setSearch] = (0, import_react14.useState)("");
-  const filteredCoins = (0, import_react14.useMemo)(() => {
+  const [search, setSearch] = (0, import_react15.useState)("");
+  const filteredCoins = (0, import_react15.useMemo)(() => {
     return tokens.filter(
       (coin) => coin.name.toLowerCase().includes(search.toLowerCase()) || coin.symbol.toLowerCase().includes(search.toLowerCase())
     );
@@ -3232,86 +3456,86 @@ var CryptoSelectModal = import_nice_modal_react5.default.create(() => {
     setSelectedPaymentMethod({ type: "CRYPTO" /* CRYPTO */, method: coin });
   };
   const userCoins = [nativeBalance, ...erc20Balances].filter(Boolean);
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Dialog, { open: modal.visible, onOpenChange: modal.remove, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DialogDescription, { className: "hidden", children: "Crypto Select Modal" }),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(DialogContent, { showCloseButton: false, className: "max-h-[90vh] gap-0 p-0", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex flex-col gap-4 px-5 py-5 md:px-7", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("button", { className: "rounded-md hover:bg-gray-100", onClick: modal.remove, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "25", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("path", { stroke: "#000", d: "m15 6.5-6 6 6 6" }) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DialogTitle, { className: "text-primary text-2xl font-semibold", children: "Select a token" }),
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("button", { className: "rounded-md p-1 hover:bg-gray-100", onClick: modal.remove, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "17", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Dialog, { open: modal.visible, onOpenChange: modal.remove, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(DialogDescription, { className: "hidden", children: "Crypto Select Modal" }),
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(DialogContent, { showCloseButton: false, className: "max-h-[90vh] gap-0 p-0", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex flex-col gap-4 px-5 py-5 md:px-7", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("button", { className: "rounded-md hover:bg-(--s-primary-hover)", onClick: modal.remove, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "25", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("path", { stroke: "currentColor", d: "m15 6.5-6 6 6 6" }) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(DialogTitle, { className: "text-2xl font-medium text-(--brand-primary)", children: "Select a token" }),
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("button", { className: "rounded-md p-1 hover:bg-(--s-primary-hover)", onClick: modal.remove, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "17", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
             "path",
             {
-              fill: "#000",
+              fill: "currentColor",
               d: "M12.6 3.9c.2.2.2.52 0 .71L8.7 8.5l3.9 3.89a.5.5 0 1 1-.71.7L8 9.22 4.11 13.1a.5.5 0 1 1-.7-.71L7.28 8.5 3.4 4.61a.5.5 0 1 1 .71-.7L8 7.78l3.89-3.89c.2-.2.51-.2.7 0Z"
             }
           ) }) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Input2, { onChange: (e) => setSearch(e.target.value), placeholder: "Search by token name", value: search })
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Input2, { onChange: (e) => setSearch(e.target.value), placeholder: "Search by token name", value: search })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Separator2, { className: "hidden md:block" }),
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex flex-col gap-4 px-5 py-5 md:px-7", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("h3", { className: "text-primary text-xl font-semibold", children: "Tokens with wallet balance" }),
-        (error || nativeError) && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-center text-sm text-red-500", children: "Something wrong" }),
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex w-full flex-col gap-1", children: [
-          isLoadingNative && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
-          nativeBalance && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Separator2, { className: "hidden md:block" }),
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex flex-col gap-4 px-5 py-5 md:px-7", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("h3", { className: "text-md font-medium text-(--brand-primary)", children: "Tokens with wallet balance" }),
+        (error || nativeError) && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "text-center text-sm text-(--negative)", children: "Something wrong" }),
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex w-full flex-col gap-1", children: [
+          isLoadingNative && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-(--s-primary)" }),
+          nativeBalance && /* @__PURE__ */ (0, import_jsx_runtime38.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",
+              className: "flex h-11 w-full items-center justify-between gap-4 rounded-sm px-1.5 text-(--brand-primary) hover:bg-(--s-primary-hover)",
               onClick: () => handleSelect(nativeBalance),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center gap-2", children: [
-                  nativeBalance.logoURI && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("img", { className: "size-8 shrink-0", src: nativeBalance.logoURI, alt: `${nativeBalance.symbol} logo` }),
-                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-sm font-medium", children: nativeBalance.symbol })
+                /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex items-center gap-2", children: [
+                  nativeBalance.logoURI && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("img", { className: "size-8 shrink-0", src: nativeBalance.logoURI, alt: `${nativeBalance.symbol} logo` }),
+                  /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "text-sm font-medium", children: nativeBalance.symbol })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-sm font-medium", children: nativeBalance.formatted })
+                /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "text-sm font-medium", children: nativeBalance.formatted })
               ]
             },
             nativeBalance.symbol
           ),
-          isLoading && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" })
+          isLoading && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-(--s-primary)" }),
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-(--s-primary)" }),
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-(--s-primary)" })
           ] }),
           erc20Balances.map((coin) => {
             const Icon = getSymbolLogo(coin.symbol);
-            return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+            return /* @__PURE__ */ (0, import_jsx_runtime38.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",
+                className: "flex h-11 w-full items-center justify-between gap-4 rounded-sm px-1.5 text-(--brand-primary) hover:bg-(--s-primary-hover) disabled:cursor-not-allowed disabled:opacity-50",
                 onClick: () => handleSelect(coin),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex items-center gap-2", children: [
                     Boolean(Icon) && Icon,
-                    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-sm font-medium", children: coin.symbol })
+                    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "text-sm font-medium", children: coin.symbol })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-sm font-medium", children: coin.formatted })
+                  /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "text-sm font-medium", children: coin.formatted })
                 ]
               },
               coin.symbol
             );
           })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("h3", { className: "text-primary text-xl font-semibold", children: "All Tokens" }),
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex max-h-[40vh] w-full flex-col gap-1 overflow-y-auto", children: [
-          tokensIsLoading && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" })
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("h3", { className: "text-md font-medium text-(--brand-primary)", children: "All Tokens" }),
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex max-h-[40vh] w-full flex-col gap-1 overflow-y-auto", children: [
+          tokensIsLoading && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-(--s-primary)" }),
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-(--s-primary)" }),
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-(--s-primary)" })
           ] }),
           filteredCoins.map((token) => {
             const userCoin = userCoins.find((c) => c.symbol === token.symbol);
-            return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
               "button",
               {
                 disabled: !userCoin,
                 onClick: () => userCoin && handleSelect(userCoin),
-                className: "flex min-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",
-                children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center gap-2", children: [
-                  token.logoURI ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("img", { className: "size-8 shrink-0", src: token.logoURI, alt: `${token.name} logo` }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "size-8 shrink-0 rounded-full bg-gray-400" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-sm font-medium", children: token.symbol })
+                className: "flex min-h-11 w-full items-center justify-between gap-4 rounded-sm px-1.5 text-(--brand-primary) hover:bg-(--s-primary-hover) disabled:cursor-not-allowed disabled:opacity-50",
+                children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex items-center gap-2", children: [
+                  token.logoURI ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("img", { className: "size-8 shrink-0", src: token.logoURI, alt: `${token.name} logo` }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "size-8 shrink-0 rounded-full bg-(--s-tertiary)" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "text-sm font-medium", children: token.symbol })
                 ] })
               },
               token.symbol
@@ -3325,51 +3549,56 @@ var CryptoSelectModal = import_nice_modal_react5.default.create(() => {
 CryptoSelectModal.displayName = "CryptoSelectModal";
 
 // src/components/CryptoTab/Crypto/SelectCoinButton.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var SelectCoinButton = () => {
   const openModal = () => {
-    import_nice_modal_react6.default.show(CryptoSelectModal);
+    import_nice_modal_react7.default.show(CryptoSelectModal);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("button", { onClick: openModal, type: "button", className: "bg-primary/8 flex h-11 w-full overflow-hidden rounded-md", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "bg-primary flex h-full w-11 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex size-5 items-center justify-center rounded-full bg-white" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex h-full w-full items-center justify-between px-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "font-medium text-black/50", children: "Select a token" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("path", { stroke: "#000", strokeLinecap: "round", d: "m6 12.43 4-4-4-4" }) })
-    ] })
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    "button",
+    {
+      onClick: openModal,
+      className: "flex h-11 w-full overflow-hidden rounded-md bg-(--s-primary) hover:bg-(--s-primary-hover)",
+      children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex h-full w-full items-center justify-between px-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { className: "font-medium text-(--secondary)", children: "Select a token" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("path", { stroke: "currentColor", strokeLinecap: "round", d: "m6 12.43 4-4-4-4" }) })
+      ] })
+    }
+  );
 };
 
 // src/components/CryptoTab/Crypto/SelectedCoin.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 var SelectedCoin = (props) => {
   const { coin, balance, logoURI } = props;
   const Icon = getSymbolLogo(coin);
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "bg-primary/8 flex h-11 w-full overflow-hidden rounded-md", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "bg-primary flex h-full w-11 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "flex size-5 items-center justify-center rounded-full bg-white", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "bg-primary size-2.5 rounded-full" }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "border-primary flex h-full w-full items-center justify-between rounded-r-md border border-l-0! px-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-center gap-1", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex h-12 w-full overflow-hidden rounded-md border-2 border-(--b-brand) bg-(--s-primary)", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "flex h-full w-11 shrink-0 items-center justify-center border-r border-(--b-brand) bg-(--s-primary)", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "flex size-5 items-center justify-center rounded-full border-2 border-(--brand-primary)", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "size-2 rounded-full bg-(--brand-primary)" }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex h-full w-full items-center justify-between rounded-r-md px-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex items-center gap-1", children: [
         Icon,
-        !Icon && logoURI && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("img", { className: "mr-1 size-8 shrink-0", src: logoURI, alt: `${coin} logo` }),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "font-semibold text-black", children: coin }),
-        /* @__PURE__ */ (0, import_jsx_runtime36.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_runtime36.jsx)("path", { d: "M6 12.4341L10 8.43408L6 4.43408", stroke: "black", strokeLinecap: "round" }) })
+        !Icon && logoURI && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("img", { className: "mr-1 size-8 shrink-0", src: logoURI, alt: `${coin} logo` }),
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "font-semibold text-(--brand-primary)", children: coin }),
+        /* @__PURE__ */ (0, import_jsx_runtime40.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_runtime40.jsx)("path", { d: "M6 12.4341L10 8.43408L6 4.43408", stroke: "currentColor", strokeLinecap: "round" }) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("p", { className: "text-xs font-medium text-black/50", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("p", { className: "text-xs font-medium text-(--secondary)", children: [
         "Wallet balance ",
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "text-black", children: balance })
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "text-(--brand-primary)", children: balance })
       ] })
     ] })
   ] });
 };
 
 // src/components/CryptoTab/Crypto/Crypto.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 var Crypto = () => {
   const { address } = (0, import_wagmi4.useAccount)();
   const { selectedPaymentMethod } = useSpreePaymentMethod();
   const { cryptoPayment } = useCryptoPayment();
+  const { spreePayConfig } = useSpreePayConfig();
   const isWalletConnected = Boolean(address);
   const { register } = useSpreePayRegister();
-  const handlePay = (0, import_react15.useCallback)(
+  const handlePay = (0, import_react16.useCallback)(
     async (data) => {
       try {
         const res = await cryptoPayment(data);
@@ -3383,17 +3612,17 @@ var Crypto = () => {
     },
     [cryptoPayment]
   );
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     register(handlePay);
   }, [register, handlePay]);
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex flex-col items-baseline gap-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex w-full items-center justify-between gap-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("h3", { className: "text-primary text-xl leading-[1.7] font-semibold", children: "Pay with Crypto" }),
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ConnectButton, {})
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex flex-col items-baseline gap-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex w-full items-center justify-between gap-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("h3", { className: "text-[22px] leading-7 font-medium text-(--brand-primary)", children: "Pay with Crypto" }),
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ConnectButton, {})
     ] }),
-    !isWalletConnected && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Logos, {}),
-    isWalletConnected && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex w-full flex-col gap-1", children: [
-      selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && selectedPaymentMethod.method && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    !isWalletConnected && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Logos, {}),
+    isWalletConnected && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex w-full flex-col gap-4", children: [
+      selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && selectedPaymentMethod.method && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
         SelectedCoin,
         {
           coin: selectedPaymentMethod.method.symbol,
@@ -3401,13 +3630,14 @@ var Crypto = () => {
           logoURI: selectedPaymentMethod.method.logoURI
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(SelectCoinButton, {})
-    ] })
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(SelectCoinButton, {})
+    ] }),
+    spreePayConfig?.crypto.infoMessage && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(InfoBanner, { message: spreePayConfig.crypto.infoMessage })
   ] });
 };
 
 // src/components/CryptoTab/Crypto/CryptoWrapper.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 var queryClient = new import_react_query.QueryClient();
 var CHAINS = [import_chains.base];
 var wagmiConfigCache = /* @__PURE__ */ new Map();
@@ -3422,37 +3652,37 @@ function getCachedWagmiConfig(projectId, appName) {
 }
 var CryptoWrapper = () => {
   const { spreePayConfig, configIsLoading } = useSpreePayConfig();
-  const wagmiConfig = (0, import_react16.useMemo)(() => {
+  const wagmiConfig = (0, import_react17.useMemo)(() => {
     if (!spreePayConfig) return null;
     return getCachedWagmiConfig(spreePayConfig.rainbowProjectId, spreePayConfig.rainbowAppName);
   }, [spreePayConfig]);
   if (configIsLoading || !wagmiConfig) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_wagmi5.WagmiProvider, { config: wagmiConfig, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react_query.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_rainbowkit2.RainbowKitProvider, { theme: (0, import_rainbowkit2.lightTheme)({ borderRadius: "large" }), children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_nice_modal_react7.default.Provider, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Crypto, {}) }) }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_wagmi5.WagmiProvider, { config: wagmiConfig, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react_query.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_rainbowkit2.RainbowKitProvider, { theme: (0, import_rainbowkit2.lightTheme)({ borderRadius: "large" }), children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_nice_modal_react8.default.Provider, { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Crypto, {}) }) }) }) });
 };
 
 // src/components/CryptoTab/CryptoTab.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 var CryptoTab = () => {
   const { spreePayConfig } = useSpreePayConfig();
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "border-b border-black/7 px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(CryptoWrapper, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(PointsSwitch, { disabled: true, message: spreePayConfig?.crypto.pointsInfoMessage }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "border-b border-(--border-component-specific-card) px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(CryptoWrapper, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "border-b border-(--border-component-specific-card) px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PointsSwitch, { disabled: true, message: spreePayConfig?.crypto.pointsInfoMessage }) })
   ] });
 };
 
 // src/components/TabButtons.tsx
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 var TabButton = ({ isDisabled = false, isActive, children, onClick }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
     "button",
     {
       disabled: isDisabled,
       onClick,
       className: cn(
-        "flex w-[132px] flex-col items-baseline rounded-sm border border-black/50 px-2.5 py-1.5 text-sm text-black",
-        { "opacity-50": !isActive || isDisabled },
-        { "cursor-not-allowed": isDisabled },
-        { "bg-primary/7 border-primary text-primary": isActive }
+        "flex w-[180px] flex-col items-baseline justify-between gap-0.5 rounded-md border border-(--b-tertiary) px-3 py-1.5 text-(--tertiary) shadow-[0_6.25px_25px_0_rgba(0,0,0,0.05)] hover:bg-(--s-primary) disabled:cursor-not-allowed",
+        {
+          "border-(--b-brand) bg-(--s-primary) text-(--brand-primary) ring ring-(--b-brand)": isActive
+        }
       ),
       children
     }
@@ -3466,74 +3696,96 @@ var TabButtons = (props) => {
       onChange({ type, method: null });
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex gap-2", children: [
-    configIsLoading && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "bg-primary/7 h-[58px] w-[132px] animate-pulse rounded-sm" }),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "bg-primary/7 h-[58px] w-[132px] animate-pulse rounded-sm" })
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex gap-4", children: [
+    configIsLoading && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "h-[74px] w-[180px] animate-pulse rounded-md bg-(--s-primary)" }),
+    spreePayConfig?.creditCard.enabled && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(TabButton, { onClick: handleChange("CREDIT_CARD" /* CREDIT_CARD */), isActive: value === "CREDIT_CARD" /* CREDIT_CARD */, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", fill: "none", viewBox: "0 0 32 32", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("mask", { id: "a", width: "32", height: "32", x: "0", y: "0", maskUnits: "userSpaceOnUse", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("path", { fill: "#d9d9d9", d: "M0 0h32v32H0z" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("g", { mask: "url(#a)", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+          "path",
+          {
+            fill: "currentColor",
+            d: "M28 8.82v14.36q0 .92-.62 1.54-.6.6-1.53.61H6.15q-.91 0-1.53-.61A2 2 0 0 1 4 23.18V8.82q0-.92.62-1.54.6-.6 1.53-.61h19.7q.91 0 1.53.61.62.62.62 1.54M5.33 11.74h21.34V8.82q0-.31-.26-.56a.8.8 0 0 0-.56-.26H6.15q-.3 0-.56.26a.8.8 0 0 0-.26.56zm0 3.18v8.26q0 .31.26.56t.56.26h19.7q.3 0 .56-.26a.8.8 0 0 0 .26-.56v-8.26z"
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("p", { className: "text-md font-medium", children: "Card" })
     ] }),
-    spreePayConfig?.creditCard.enabled && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(TabButton, { onClick: handleChange("CREDIT_CARD" /* CREDIT_CARD */), isActive: value === "CREDIT_CARD" /* CREDIT_CARD */, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    spreePayConfig?.crypto.enabled && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(TabButton, { onClick: handleChange("CRYPTO" /* CRYPTO */), isActive: value === "CRYPTO" /* CRYPTO */, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", fill: "none", viewBox: "0 0 32 32", children: /* @__PURE__ */ (0, import_jsx_runtime44.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"
+          fillRule: "evenodd",
+          d: "M21 9.86a8 8 0 0 1 3 5.43l-2.85-.71a5.4 5.4 0 0 0-3.86-3.67 5.3 5.3 0 0 0-6.46 3.8 5.3 5.3 0 0 0 3.91 6.4 5.4 5.4 0 0 0 5.14-1.43l2.85.7a8 8 0 0 1-5.2 3.39L16.72 27l-2.6-.65.64-2.57a8 8 0 0 1-1.3-.32l-.64 2.57-2.6-.65.82-3.24a7.9 7.9 0 0 1-2.8-8.08 7.9 7.9 0 0 1 6.27-5.82L15.32 5l2.6.64-.65 2.58q.67.1 1.3.32l.65-2.57 2.6.64z",
+          clipRule: "evenodd"
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-sm font-medium", children: "Card" })
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("p", { className: "text-md font-medium", children: "Crypto" })
     ] }),
-    spreePayConfig?.crypto.enabled && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(TabButton, { onClick: handleChange("CRYPTO" /* CRYPTO */), isActive: value === "CRYPTO" /* CRYPTO */, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("svg", { className: "my-1", xmlns: "http://www.w3.org/2000/svg", width: "30", height: "16", fill: "none", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    spreePayConfig?.cryptoCom.enabled && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(TabButton, { onClick: handleChange("CDC" /* CDC */), isActive: value === "CDC" /* CDC */, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "44", height: "32", fill: "none", viewBox: "0 0 44 32", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime44.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"
+            fillRule: "evenodd",
+            d: "M17.6 11v10l-8.8 5L0 21V11l8.8-5zM2.2 16.69l3.15 5.42h1.26l1.5-1.37v-.7L6.56 18.6v-2.32L4.51 15zm8.87-.42v2.32l-1.55 1.46v.69l1.5 1.35h1.24l3.15-5.4-2.32-1.72zm-4.5-1.95.75 1.95-.23 2.17H8.8l1.72-.01-.21-2.17.74-1.94zm-1.25-4-.8 3.48h8.56l-.83-3.47z",
+            clipRule: "evenodd"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("path", { fill: "#009fff", d: "m39.84 18.25 1.94-4.64h1.42l-4.05 9.17H37.7l1.4-3.1-2.64-6.07h1.5z" }),
+        /* @__PURE__ */ (0, import_jsx_runtime44.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"
+            fill: "#009fff",
+            fillRule: "evenodd",
+            d: "M32.91 13.46q.92 0 1.52.34.62.34.91.94t.31 1.37v1.94q0 .37.15.55.15.17.54.2v1.16q-.51 0-.9-.11-.37-.12-.61-.35a2 2 0 0 1-.38-.61 2.6 2.6 0 0 1-2.24 1.22q-.62 0-1.13-.21a2 2 0 0 1-.82-.67q-.3-.44-.3-1.05 0-.73.35-1.16.38-.45.99-.66.63-.21 1.37-.21h1.61q0-.56-.18-.89a1 1 0 0 0-.49-.5q-.3-.15-.71-.16-.54 0-.95.25a1.1 1.1 0 0 0-.5.78h-1.37q.06-.69.46-1.17.41-.5 1.04-.75t1.33-.25m-.14 3.63q-.37 0-.7.1-.33.07-.53.3a.8.8 0 0 0-.2.58q0 .48.35.71t.84.22a1.7 1.7 0 0 0 1.53-.95q.22-.44.22-.93v-.03zM26.34 11q.94 0 1.63.3.69.29 1.08.88.4.57.4 1.43t-.4 1.45-1.1.88q-.7.28-1.61.28h-1.78v3.74H23.2V11zm-1.78 4.07h1.75q.97 0 1.36-.38.4-.4.4-1.08 0-.7-.4-1.07-.4-.4-1.36-.4h-1.75z",
+            clipRule: "evenodd"
           }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("circle", { cx: "8", cy: "8", r: "7", stroke: "currentColor", strokeWidth: "2" })
+        )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-sm font-medium", children: "Crypto" })
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("p", { className: "text-md font-medium", children: "Crypto.com Pay" })
     ] })
   ] });
 };
 
 // src/SpreePayContent.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 var SpreePayContent = ({ isLoggedIn }) => {
   const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "w-full overflow-hidden rounded-3xl border border-black/25 bg-white", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex w-full flex-col gap-4 border-b border-black/7 px-5 py-5 md:px-7 md:py-6", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("h2", { className: "text-primary text-2xl font-semibold", children: "Choose a Payment Method" }),
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TabButtons, { value: selectedPaymentMethod.type, onChange: setSelectedPaymentMethod })
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "w-full overflow-hidden rounded-3xl border border-(--border-component-specific-card) bg-(--surface-component-specific-card-default-card) shadow-[0_6.25px_25px_0_var(--shadow-component-specific-card)]", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex w-full flex-col gap-4 border-b border-b-(--border-component-specific-card) px-5 py-5 md:px-7 md:py-6", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("h2", { className: "text-[28px] leading-8 font-medium text-(--brand-primary)", children: "Choose a Payment Method" }),
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(TabButtons, { value: selectedPaymentMethod.type, onChange: setSelectedPaymentMethod })
+    ] }),
+    selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(CreditCardTab, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(CheckoutButton, { isLoggedIn })
     ] }),
-    selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(CreditCardTab, {}),
-    selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(CryptoTab, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(CheckoutButton, { isLoggedIn })
+    selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(CryptoTab, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(CheckoutButton, { isLoggedIn })
+    ] }),
+    selectedPaymentMethod.type === "CDC" /* CDC */ && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(CryptoComTab, {})
   ] });
 };
 
 // src/hooks/useKeycloakSSO.ts
-var import_react17 = require("react");
+var import_react18 = 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_react17.useRef)(false);
-  const kcRef = (0, import_react17.useRef)(null);
-  const refreshTimerRef = (0, import_react17.useRef)(null);
-  const scheduleRefreshRef = (0, import_react17.useRef)(() => {
+  const initRef = (0, import_react18.useRef)(false);
+  const kcRef = (0, import_react18.useRef)(null);
+  const refreshTimerRef = (0, import_react18.useRef)(null);
+  const scheduleRefreshRef = (0, import_react18.useRef)(() => {
   });
-  const [error, setError] = (0, import_react17.useState)(null);
-  const [isChecking, setIsChecking] = (0, import_react17.useState)(enabled);
-  const [accessToken, setAccessToken] = (0, import_react17.useState)(null);
-  const scheduleRefresh = (0, import_react17.useCallback)(() => {
+  const [error, setError] = (0, import_react18.useState)(null);
+  const [isChecking, setIsChecking] = (0, import_react18.useState)(enabled);
+  const [accessToken, setAccessToken] = (0, import_react18.useState)(null);
+  const scheduleRefresh = (0, import_react18.useCallback)(() => {
     const kc = kcRef.current;
     if (!kc || !kc.tokenParsed || !kc.tokenParsed.exp) {
       return;
@@ -3554,10 +3806,10 @@ function useKeycloakSSO(config2) {
       });
     }, delayMs);
   }, []);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     scheduleRefreshRef.current = scheduleRefresh;
   }, [scheduleRefresh]);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (initRef.current || !enabled) return;
     initRef.current = true;
     const kc = new import_keycloak_js.default({ url, realm, clientId });
@@ -3591,15 +3843,15 @@ function useKeycloakSSO(config2) {
 }
 
 // src/SpreePay.tsx
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 var SpreePayInner = () => {
-  const [portalEl, setPortalEl] = (0, import_react18.useState)(null);
-  const rootRef = (0, import_react18.useCallback)((node) => {
+  const [portalEl, setPortalEl] = (0, import_react19.useState)(null);
+  const rootRef = (0, import_react19.useCallback)((node) => {
     if (!node) return;
     const el = node.querySelector(":scope > .sl-spreepay__portal");
     setPortalEl(el ?? null);
   }, []);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     console.log(`[spree-pay] v${version}`);
   }, []);
   const { env } = useSpreePayEnv();
@@ -3613,8 +3865,8 @@ var SpreePayInner = () => {
     enabled: !env?.accessToken
   });
   const _accessToken = env.accessToken ?? accessToken;
-  const unauthenticatedFetcher = (0, import_react18.useCallback)(() => Promise.resolve(null), []);
-  const slapiFetcher = (0, import_react18.useMemo)(() => {
+  const unauthenticatedFetcher = (0, import_react19.useCallback)(() => Promise.resolve(null), []);
+  const slapiFetcher = (0, import_react19.useMemo)(() => {
     if (_accessToken) {
       return registerApi({
         accessToken: _accessToken,
@@ -3626,12 +3878,12 @@ var SpreePayInner = () => {
   }, [_accessToken, staticConfig, tenantId, unauthenticatedFetcher]);
   const getContent = () => {
     if (isChecking) {
-      return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex w-full flex-col", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "bg-primary/8 mb-4 h-[315px] animate-pulse rounded-3xl" }),
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "bg-primary/8 h-[135px] animate-pulse rounded-3xl" })
+      return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex w-full flex-col", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "mb-4 h-[315px] animate-pulse rounded-3xl bg-(--s-primary)" }),
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "h-[135px] animate-pulse rounded-3xl bg-(--s-primary)" })
       ] });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
       import_swr5.SWRConfig,
       {
         value: {
@@ -3640,23 +3892,23 @@ var SpreePayInner = () => {
           revalidateOnFocus: false,
           revalidateIfStale: false
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(PortalContainerProvider, { container: portalEl, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_nice_modal_react8.default.Provider, { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(SpreePayContent, { isLoggedIn: Boolean(_accessToken) }) }) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(PortalContainerProvider, { container: portalEl, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_nice_modal_react9.default.Provider, { children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(SpreePayContent, { isLoggedIn: Boolean(_accessToken) }) }) })
       }
     );
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { ref: rootRef, className: cn("sl-spreepay", appProps.className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "sl-spreepay__portal" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { ref: rootRef, className: cn("sl-spreepay", appProps.className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "sl-spreepay__portal" }),
     getContent()
   ] });
 };
 var SpreePay = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(StaticConfigProvider, { props, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(SpreePayInner, {}) });
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(StaticConfigProvider, { props, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(SpreePayInner, {}) });
 };
 
 // src/hooks/useCapture3DS.ts
-var import_react19 = require("react");
+var import_react20 = require("react");
 var useCapture3DS = (searchParams) => {
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (typeof window !== "undefined" && window.parent && searchParams?.paymentIntent) {
       window.parent.SP_EVENT_BUS?.emit("paymentIntent", { paymentIntent: searchParams.paymentIntent });
     }