@superlogic/spree-pay 0.4.2 → 0.4.6

package/build/{CryptoComTab-GNJ4XACU.js → CryptoComTab-5662XFNI.js}

@@ -1,6 +1,6 @@
 import {
   Iframe3ds
-} from "./chunk-4ELDS4N4.js";
+} from "./chunk-7I6EBCSI.js";
 import {
   InfoBanner,
   Legal,
@@ -12,7 +12,7 @@ import {
   useSpreePayRegister,
   useSpreePaymentMethod,
   useStaticConfig
-} from "./chunk-I35SE3K2.js";
+} from "./chunk-AGTOSFMT.js";
 
 // src/components/CryptoComTab/CryptoComTab.tsx
 import { useCallback, useEffect } from "react";

package/build/{CryptoTab-RY2NTNZJ.js → CryptoTab-7EG23TQW.js}

@@ -2,7 +2,7 @@ import {
   CheckoutButton,
   PointsSwitch,
   cn as cn2
-} from "./chunk-LXX5P2LL.js";
+} from "./chunk-FKAVWVFL.js";
 import {
   Dialog,
   DialogContent,
@@ -16,7 +16,7 @@ import {
   useSpreePayConfig,
   useSpreePayRegister,
   useSpreePaymentMethod
-} from "./chunk-I35SE3K2.js";
+} from "./chunk-AGTOSFMT.js";
 
 // src/components/CryptoTab/Crypto/CryptoWrapper.tsx
 import { useMemo as useMemo2 } from "react";
@@ -409,7 +409,7 @@ function Input({ className, type, ...props }) {
       type,
       "data-slot": "input",
       className: cn2(
-        "file:text-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 text-(--primary) 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 placeholder:text-(--tertiary) disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "file:text-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input px-universal-2xs py-universal-6xs rounded-radius-universal-xs text-body-m file:text-label-s file:font-label-primary flex h-9 w-full min-w-0 border bg-transparent text-(--color-text-icons-primary-default) shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent placeholder:text-(--color-text-icons-tertiary-default) disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
         "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
@@ -501,7 +501,7 @@ function Separator2({
       decorative,
       orientation,
       className: cn2(
-        "shrink-0 bg-(--b-secondary) data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        "shrink-0 bg-(--color-border-default) data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
         className
       ),
       ...props

package/build/{chunk-4ELDS4N4.js → chunk-7I6EBCSI.js}

@@ -2,7 +2,7 @@ import {
   Dialog,
   DialogContent,
   DialogTitle
-} from "./chunk-I35SE3K2.js";
+} from "./chunk-AGTOSFMT.js";
 
 // src/modals/Iframe3ds.tsx
 import { useEffect } from "react";

package/build/{chunk-I35SE3K2.js → chunk-AGTOSFMT.js}

@@ -1,4 +1,5 @@
 // src/types/payments.ts
+var isNewCard = (card) => !("cardId" in card);
 var PaymentType = /* @__PURE__ */ ((PaymentType2) => {
   PaymentType2["CREDIT_CARD"] = "CREDIT_CARD";
   PaymentType2["CRYPTO"] = "CRYPTO";
@@ -9,7 +10,7 @@ var PaymentType = /* @__PURE__ */ ((PaymentType2) => {
 })(PaymentType || {});
 
 // package.json
-var version = "0.4.2";
+var version = "0.4.6";
 
 // src/utils/logger.ts
 var LogLevel = /* @__PURE__ */ ((LogLevel2) => {
@@ -775,6 +776,7 @@ function DialogDescription({ className, ...props }) {
 
 export {
   PaymentError,
+  isNewCard,
   PaymentType,
   LogLevel,
   logger,

package/build/{chunk-LXX5P2LL.js → chunk-FKAVWVFL.js}

@@ -6,7 +6,7 @@ import {
   useSpreePayEnv,
   useSpreePaymentMethod,
   useStaticConfig
-} from "./chunk-I35SE3K2.js";
+} from "./chunk-AGTOSFMT.js";
 
 // src/components/common/PointsSwitch.tsx
 import { useId } from "react";
@@ -283,7 +283,56 @@ var CheckoutButton = ({ isLoggedIn }) => {
 
 // ../ui/src/lib/utils.ts
 import { clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
+import { extendTailwindMerge } from "tailwind-merge";
+var isUniversalSpacing = (value) => value.startsWith("universal-");
+var isLayoutToken = (value) => value.startsWith("universal-") || value.startsWith("layout-");
+var isUniversalRadius = (value) => value.startsWith("radius-universal-");
+var isTypography = (value) => value.startsWith("heading-") || value.startsWith("body-") || value.startsWith("label-") || value.startsWith("menu-");
+var twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      "font-size": [{ text: [isTypography] }],
+      leading: [{ leading: [isTypography] }],
+      "font-weight": [{ font: [isTypography] }],
+      p: [{ p: [isUniversalSpacing] }],
+      px: [{ px: [isUniversalSpacing] }],
+      py: [{ py: [isUniversalSpacing] }],
+      pt: [{ pt: [isUniversalSpacing] }],
+      pb: [{ pb: [isUniversalSpacing] }],
+      pl: [{ pl: [isUniversalSpacing] }],
+      pr: [{ pr: [isUniversalSpacing] }],
+      m: [{ m: [isUniversalSpacing] }],
+      mx: [{ mx: [isUniversalSpacing] }],
+      my: [{ my: [isUniversalSpacing] }],
+      mt: [{ mt: [isUniversalSpacing] }],
+      mb: [{ mb: [isUniversalSpacing] }],
+      ml: [{ ml: [isUniversalSpacing] }],
+      mr: [{ mr: [isUniversalSpacing] }],
+      gap: [{ gap: [isUniversalSpacing] }],
+      "gap-x": [{ "gap-x": [isUniversalSpacing] }],
+      "gap-y": [{ "gap-y": [isUniversalSpacing] }],
+      "space-x": [{ "space-x": [isUniversalSpacing] }],
+      "space-y": [{ "space-y": [isUniversalSpacing] }],
+      w: [{ w: [isLayoutToken] }],
+      "min-w": [{ "min-w": [isLayoutToken] }],
+      "max-w": [{ "max-w": [isLayoutToken] }],
+      h: [{ h: [isLayoutToken] }],
+      "min-h": [{ "min-h": [isLayoutToken] }],
+      "max-h": [{ "max-h": [isLayoutToken] }],
+      rounded: [{ rounded: [isUniversalRadius] }],
+      "rounded-s": [{ "rounded-s": [isUniversalRadius] }],
+      "rounded-e": [{ "rounded-e": [isUniversalRadius] }],
+      "rounded-t": [{ "rounded-t": [isUniversalRadius] }],
+      "rounded-r": [{ "rounded-r": [isUniversalRadius] }],
+      "rounded-b": [{ "rounded-b": [isUniversalRadius] }],
+      "rounded-l": [{ "rounded-l": [isUniversalRadius] }],
+      "rounded-tl": [{ "rounded-tl": [isUniversalRadius] }],
+      "rounded-tr": [{ "rounded-tr": [isUniversalRadius] }],
+      "rounded-br": [{ "rounded-br": [isUniversalRadius] }],
+      "rounded-bl": [{ "rounded-bl": [isUniversalRadius] }]
+    }
+  }
+});
 function cn2(...inputs) {
   return twMerge(clsx(inputs));
 }

package/build/index.cjs

@@ -49,10 +49,11 @@ var init_errors = __esm({
 });
 
 // src/types/payments.ts
-var PaymentType;
+var isNewCard, PaymentType;
 var init_payments = __esm({
   "src/types/payments.ts"() {
     "use strict";
+    isNewCard = (card) => !("cardId" in card);
     PaymentType = /* @__PURE__ */ ((PaymentType2) => {
       PaymentType2["CREDIT_CARD"] = "CREDIT_CARD";
       PaymentType2["CRYPTO"] = "CRYPTO";
@@ -68,7 +69,7 @@ var init_payments = __esm({
 var version;
 var init_package = __esm({
   "package.json"() {
-    version = "0.4.2";
+    version = "0.4.6";
   }
 });
 
@@ -1128,11 +1129,11 @@ var init_InfoBanner = __esm({
 });
 
 // src/components/common/PointsSwitch.tsx
-var import_react5, import_jsx_runtime9, PointsSwitch;
+var import_react6, import_jsx_runtime9, PointsSwitch;
 var init_PointsSwitch = __esm({
   "src/components/common/PointsSwitch.tsx"() {
     "use strict";
-    import_react5 = require("react");
+    import_react6 = require("react");
     init_StaticConfigContext();
     init_useSlapiBalance();
     init_useSpreePayConfig();
@@ -1149,7 +1150,7 @@ var init_PointsSwitch = __esm({
       const { balance } = useSlapiBalance();
       const hasForeignCurrency = !!(currencyCode && exchangeRate && foreignCurrencyAmount);
       const formatPointsValue = (usd) => hasForeignCurrency ? formatCurrency(usd / exchangeRate, currencyCode) : formatCurrency(usd);
-      const id = (0, import_react5.useId)();
+      const id = (0, import_react6.useId)();
       return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex flex-col gap-6", children: [
         /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
           /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-3", children: [
@@ -1321,14 +1322,63 @@ var init_CheckoutButton = __esm({
 
 // ../ui/src/lib/utils.ts
 function cn2(...inputs) {
-  return (0, import_tailwind_merge2.twMerge)((0, import_clsx2.clsx)(inputs));
+  return twMerge2((0, import_clsx2.clsx)(inputs));
 }
-var import_clsx2, import_tailwind_merge2;
+var import_clsx2, import_tailwind_merge2, isUniversalSpacing, isLayoutToken, isUniversalRadius, isTypography, twMerge2;
 var init_utils2 = __esm({
   "../ui/src/lib/utils.ts"() {
     "use strict";
     import_clsx2 = require("clsx");
     import_tailwind_merge2 = require("tailwind-merge");
+    isUniversalSpacing = (value) => value.startsWith("universal-");
+    isLayoutToken = (value) => value.startsWith("universal-") || value.startsWith("layout-");
+    isUniversalRadius = (value) => value.startsWith("radius-universal-");
+    isTypography = (value) => value.startsWith("heading-") || value.startsWith("body-") || value.startsWith("label-") || value.startsWith("menu-");
+    twMerge2 = (0, import_tailwind_merge2.extendTailwindMerge)({
+      extend: {
+        classGroups: {
+          "font-size": [{ text: [isTypography] }],
+          leading: [{ leading: [isTypography] }],
+          "font-weight": [{ font: [isTypography] }],
+          p: [{ p: [isUniversalSpacing] }],
+          px: [{ px: [isUniversalSpacing] }],
+          py: [{ py: [isUniversalSpacing] }],
+          pt: [{ pt: [isUniversalSpacing] }],
+          pb: [{ pb: [isUniversalSpacing] }],
+          pl: [{ pl: [isUniversalSpacing] }],
+          pr: [{ pr: [isUniversalSpacing] }],
+          m: [{ m: [isUniversalSpacing] }],
+          mx: [{ mx: [isUniversalSpacing] }],
+          my: [{ my: [isUniversalSpacing] }],
+          mt: [{ mt: [isUniversalSpacing] }],
+          mb: [{ mb: [isUniversalSpacing] }],
+          ml: [{ ml: [isUniversalSpacing] }],
+          mr: [{ mr: [isUniversalSpacing] }],
+          gap: [{ gap: [isUniversalSpacing] }],
+          "gap-x": [{ "gap-x": [isUniversalSpacing] }],
+          "gap-y": [{ "gap-y": [isUniversalSpacing] }],
+          "space-x": [{ "space-x": [isUniversalSpacing] }],
+          "space-y": [{ "space-y": [isUniversalSpacing] }],
+          w: [{ w: [isLayoutToken] }],
+          "min-w": [{ "min-w": [isLayoutToken] }],
+          "max-w": [{ "max-w": [isLayoutToken] }],
+          h: [{ h: [isLayoutToken] }],
+          "min-h": [{ "min-h": [isLayoutToken] }],
+          "max-h": [{ "max-h": [isLayoutToken] }],
+          rounded: [{ rounded: [isUniversalRadius] }],
+          "rounded-s": [{ "rounded-s": [isUniversalRadius] }],
+          "rounded-e": [{ "rounded-e": [isUniversalRadius] }],
+          "rounded-t": [{ "rounded-t": [isUniversalRadius] }],
+          "rounded-r": [{ "rounded-r": [isUniversalRadius] }],
+          "rounded-b": [{ "rounded-b": [isUniversalRadius] }],
+          "rounded-l": [{ "rounded-l": [isUniversalRadius] }],
+          "rounded-tl": [{ "rounded-tl": [isUniversalRadius] }],
+          "rounded-tr": [{ "rounded-tr": [isUniversalRadius] }],
+          "rounded-br": [{ "rounded-br": [isUniversalRadius] }],
+          "rounded-bl": [{ "rounded-bl": [isUniversalRadius] }]
+        }
+      }
+    });
   }
 });
 
@@ -1764,7 +1814,7 @@ function Input2({ className, type, ...props }) {
       type,
       "data-slot": "input",
       className: cn2(
-        "file:text-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 text-(--primary) 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 placeholder:text-(--tertiary) disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "file:text-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input px-universal-2xs py-universal-6xs rounded-radius-universal-xs text-body-m file:text-label-s file:font-label-primary flex h-9 w-full min-w-0 border bg-transparent text-(--color-text-icons-primary-default) shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent placeholder:text-(--color-text-icons-tertiary-default) disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
         "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
@@ -1874,7 +1924,7 @@ function Separator2({
       decorative,
       orientation,
       className: cn2(
-        "shrink-0 bg-(--b-secondary) data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        "shrink-0 bg-(--color-border-default) data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
         className
       ),
       ...props
@@ -2004,11 +2054,11 @@ var init_useBaseTokens = __esm({
 });
 
 // src/modals/CryptoSelectModal.tsx
-var import_react15, import_nice_modal_react5, import_jsx_runtime37, CryptoSelectModal;
+var import_react16, import_nice_modal_react5, import_jsx_runtime37, CryptoSelectModal;
 var init_CryptoSelectModal = __esm({
   "src/modals/CryptoSelectModal.tsx"() {
     "use strict";
-    import_react15 = require("react");
+    import_react16 = require("react");
     import_nice_modal_react5 = __toESM(require("@ebay/nice-modal-react"), 1);
     init_input();
     init_separator();
@@ -2024,8 +2074,8 @@ var init_CryptoSelectModal = __esm({
       const { isLoading, error, erc20Balances } = useBaseERC20Token();
       const { isLoadingNative, nativeError, nativeBalance } = useBaseNativeToken();
       const { tokens, tokensIsLoading } = useBaseTokens();
-      const [search, setSearch] = (0, import_react15.useState)("");
-      const filteredCoins = (0, import_react15.useMemo)(() => {
+      const [search, setSearch] = (0, import_react16.useState)("");
+      const filteredCoins = (0, import_react16.useMemo)(() => {
         return tokens.filter(
           (coin) => coin.name.toLowerCase().includes(search.toLowerCase()) || coin.symbol.toLowerCase().includes(search.toLowerCase())
         );
@@ -2187,11 +2237,11 @@ var init_SelectedCoin = __esm({
 });
 
 // src/components/CryptoTab/Crypto/Crypto.tsx
-var import_react16, import_wagmi4, import_jsx_runtime40, Crypto;
+var import_react17, import_wagmi4, import_jsx_runtime40, Crypto;
 var init_Crypto = __esm({
   "src/components/CryptoTab/Crypto/Crypto.tsx"() {
     "use strict";
-    import_react16 = require("react");
+    import_react17 = require("react");
     import_wagmi4 = require("wagmi");
     init_SpreePayActionsContext();
     init_useCryptoPayment();
@@ -2210,7 +2260,7 @@ var init_Crypto = __esm({
       const { spreePayConfig } = useSpreePayConfig();
       const isWalletConnected = Boolean(address);
       const { register } = useSpreePayRegister();
-      const handlePay = (0, import_react16.useCallback)(
+      const handlePay = (0, import_react17.useCallback)(
         async (data) => {
           try {
             const res = await cryptoPayment(data);
@@ -2224,7 +2274,7 @@ var init_Crypto = __esm({
         },
         [cryptoPayment]
       );
-      (0, import_react16.useEffect)(() => {
+      (0, import_react17.useEffect)(() => {
         register(handlePay);
       }, [register, handlePay]);
       return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex flex-col items-baseline gap-4", children: [
@@ -2260,11 +2310,11 @@ function getCachedWagmiConfig(projectId, appName) {
   }
   return cfg2;
 }
-var import_react17, import_react_query, import_nice_modal_react7, import_rainbowkit2, import_styles, import_wagmi5, import_chains, import_jsx_runtime41, queryClient, CHAINS, wagmiConfigCache, CryptoWrapper;
+var import_react18, import_react_query, import_nice_modal_react7, import_rainbowkit2, import_styles, import_wagmi5, import_chains, import_jsx_runtime41, queryClient, CHAINS, wagmiConfigCache, CryptoWrapper;
 var init_CryptoWrapper = __esm({
   "src/components/CryptoTab/Crypto/CryptoWrapper.tsx"() {
     "use strict";
-    import_react17 = require("react");
+    import_react18 = require("react");
     import_react_query = require("@tanstack/react-query");
     import_nice_modal_react7 = __toESM(require("@ebay/nice-modal-react"), 1);
     import_rainbowkit2 = require("@rainbow-me/rainbowkit");
@@ -2279,7 +2329,7 @@ var init_CryptoWrapper = __esm({
     wagmiConfigCache = /* @__PURE__ */ new Map();
     CryptoWrapper = () => {
       const { spreePayConfig, configIsLoading } = useSpreePayConfig();
-      const wagmiConfig = (0, import_react17.useMemo)(() => {
+      const wagmiConfig = (0, import_react18.useMemo)(() => {
         if (!spreePayConfig) return null;
         return getCachedWagmiConfig(spreePayConfig.rainbowProjectId, spreePayConfig.rainbowAppName);
       }, [spreePayConfig]);
@@ -2466,11 +2516,11 @@ var init_Checkout = __esm({
 });
 
 // src/components/CryptoComTab/CryptoComTab.tsx
-var import_react18, import_jsx_runtime44, CryptoComTab;
+var import_react19, import_jsx_runtime44, CryptoComTab;
 var init_CryptoComTab = __esm({
   "src/components/CryptoComTab/CryptoComTab.tsx"() {
     "use strict";
-    import_react18 = require("react");
+    import_react19 = require("react");
     init_SpreePayActionsContext();
     init_useCryptoComPayment();
     init_useSpreePayConfig();
@@ -2482,7 +2532,7 @@ var init_CryptoComTab = __esm({
       const { register } = useSpreePayRegister();
       const { cryptoComPayment } = useCryptoComPayment();
       const { spreePayConfig } = useSpreePayConfig();
-      const handlePay = (0, import_react18.useCallback)(
+      const handlePay = (0, import_react19.useCallback)(
         async (data) => {
           try {
             const res = await cryptoComPayment(data);
@@ -2496,7 +2546,7 @@ var init_CryptoComTab = __esm({
         },
         [cryptoComPayment]
       );
-      (0, import_react18.useEffect)(() => {
+      (0, import_react19.useEffect)(() => {
         register(handlePay);
       }, [register, handlePay]);
       return /* @__PURE__ */ (0, import_jsx_runtime44.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: [
@@ -2535,15 +2585,15 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/SpreePay.tsx
-var import_react22 = require("react");
+var import_react23 = require("react");
 var import_nice_modal_react9 = __toESM(require("@ebay/nice-modal-react"), 1);
 var import_swr5 = require("swr");
 
 // src/SpreePayContent.tsx
-var import_react19 = require("react");
+var import_react20 = require("react");
 
 // src/components/CreditCardTab/CreditCardTab.tsx
-var import_react14 = require("react");
+var import_react15 = require("react");
 init_SpreePayActionsContext();
 init_StaticConfigContext();
 
@@ -3068,14 +3118,16 @@ var useSplitCardPayments = (mode = "web2") => {
 };
 
 // src/hooks/useCards.ts
+var import_react5 = require("react");
 var import_swr2 = __toESM(require("swr"), 1);
 init_SpreePayActionsContext();
 var URL2 = "/v1/payments/cards";
 var useCards = () => {
   const { origin } = useSpreePayEnv();
   const { data, isLoading, mutate } = (0, import_swr2.default)(origin ? `${URL2}?origin=${origin}` : URL2);
+  const cards = (0, import_react5.useMemo)(() => data?.data.filter((c) => c.active) ?? [], [data]);
   return {
-    cards: data?.data.filter((c) => c.active) || [],
+    cards,
     cardsIsLoading: isLoading,
     mutateCards: mutate
   };
@@ -3089,7 +3141,7 @@ init_split();
 init_CheckoutButton();
 
 // src/components/CreditCardTab/CreditCard/CreditCard.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_react_stripe_js2 = require("@stripe/react-stripe-js");
 var import_stripe_js = require("@stripe/stripe-js");
 init_SpreePayActionsContext();
@@ -3097,12 +3149,13 @@ init_useSpreePayConfig();
 init_InfoBanner();
 
 // src/components/CreditCardTab/CreditCard/CardsList.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 init_utils();
 init_slapi();
+init_payments();
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var CardListItem = ({ card, isSelected, onSelect, onRemove }) => {
-  const [isRemoving, setIsRemoving] = (0, import_react6.useState)(false);
+  const [isRemoving, setIsRemoving] = (0, import_react7.useState)(false);
   const removeDisabled = isSelected || isRemoving;
   const handleRemove = async (e) => {
     e.stopPropagation();
@@ -3165,19 +3218,22 @@ var CardListItem = ({ card, isSelected, onSelect, onRemove }) => {
     }
   );
 };
-var CardsList = ({ selectedCard, setCard }) => {
+var CardsList = ({ selectedCard, setCard, newCards, onRemoveNewCard }) => {
   const { cards, cardsIsLoading, mutateCards } = useCards();
+  const allCards = (0, import_react7.useMemo)(() => [...cards, ...newCards], [cards, newCards]);
   const handleRemove = async (card) => {
-    if ("cardId" in card) {
+    if (isNewCard(card)) {
+      onRemoveNewCard(card);
+    } else {
       await SlapiPaymentService.removeCard({ cardId: card.id });
+      mutateCards((data) => ({ ...data, data: (data?.data ?? []).filter((c) => c.id !== card.id) }));
     }
-    mutateCards((data) => ({ ...data, data: (data?.data ?? []).filter((c) => c.id !== card.id) }));
   };
   if (cardsIsLoading) {
     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_runtime12.jsx)("div", { className: "flex w-full flex-col gap-4", children: cards.map((card) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  if (allCards.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex w-full flex-col gap-4", children: allCards.map((card) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     CardListItem,
     {
       isSelected: selectedCard?.id === card.id,
@@ -3190,7 +3246,7 @@ var CardsList = ({ selectedCard, setCard }) => {
 };
 
 // src/components/CreditCardTab/CreditCard/CreditCardForm.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_react_stripe_js = require("@stripe/react-stripe-js");
 
 // src/ui/button.tsx
@@ -3246,7 +3302,7 @@ function Checkbox({ className, ...props }) {
     {
       "data-slot": "checkbox",
       className: cn(
-        "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)",
+        "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-(--s-brand) data-[state=checked]:bg-(--s-brand) data-[state=checked]:text-(--inverse)",
         className
       ),
       ...props,
@@ -3273,14 +3329,14 @@ var stripeElementClasses = {
   focus: "border-ring ring-ring/50 ring-2"
 };
 var CreditCardForm = ({ cancel, saveCard }) => {
-  const [cardError, setCardError] = (0, import_react7.useState)(void 0);
-  const [stripeStyles, setStripeStyles] = (0, import_react7.useState)({});
-  const [shouldSaveCard, setShouldSaveCard] = (0, import_react7.useState)(true);
-  const formRef = (0, import_react7.useRef)(null);
+  const [cardError, setCardError] = (0, import_react8.useState)(void 0);
+  const [stripeStyles, setStripeStyles] = (0, import_react8.useState)({});
+  const [shouldSaveCard, setShouldSaveCard] = (0, import_react8.useState)(true);
+  const formRef = (0, import_react8.useRef)(null);
   const elements = (0, import_react_stripe_js.useElements)();
   const stripe = (0, import_react_stripe_js.useStripe)();
-  const id = (0, import_react7.useId)();
-  const computeStripeStyles = (0, import_react7.useCallback)(() => {
+  const [id] = (0, import_react8.useState)(() => crypto.randomUUID());
+  const computeStripeStyles = (0, import_react8.useCallback)(() => {
     const formRefCurrent = formRef.current;
     if (typeof window === "undefined" || !formRefCurrent) return {};
     const container = formRefCurrent.closest(".sl-spreepay");
@@ -3301,7 +3357,7 @@ var CreditCardForm = ({ cancel, saveCard }) => {
       }
     };
   }, []);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     setStripeStyles(computeStripeStyles());
   }, [computeStripeStyles]);
   const handleSaveCard = async () => {
@@ -3404,13 +3460,13 @@ var CreditCardForm = ({ cancel, saveCard }) => {
 // src/components/CreditCardTab/CreditCard/CreditCard.tsx
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var StripeWrapper = ({ onCancel, saveNewCard, publicKey }) => {
-  const stripePromise = (0, import_react8.useMemo)(() => (0, import_stripe_js.loadStripe)(publicKey), [publicKey]);
+  const stripePromise = (0, import_react9.useMemo)(() => (0, import_stripe_js.loadStripe)(publicKey), [publicKey]);
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_stripe_js2.Elements, { stripe: stripePromise, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CreditCardForm, { cancel: onCancel, saveCard: saveNewCard }) });
 };
 var CreditCard = () => {
-  const [showForm, setShowForm] = (0, import_react8.useState)(false);
+  const [showForm, setShowForm] = (0, import_react9.useState)(false);
+  const [newCards, setNewCards] = (0, import_react9.useState)([]);
   const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
-  const { mutateCards } = useCards();
   const { spreePayConfig } = useSpreePayConfig();
   const setCard = (card) => {
     const isAlreadySelected = selectedPaymentMethod?.type === "CREDIT_CARD" /* CREDIT_CARD */ && selectedPaymentMethod.method?.id === card.id;
@@ -3421,10 +3477,13 @@ var CreditCard = () => {
     });
   };
   const saveNewCard = (newCard) => {
-    mutateCards((data) => ({ ...data, data: [...data?.data ?? [], newCard] }), { revalidate: false });
+    setNewCards((prev) => [...prev, newCard]);
     setCard(newCard);
     setShowForm(false);
   };
+  const removeNewCard = (0, import_react9.useCallback)((card) => {
+    setNewCards((prev) => prev.filter((c) => c.id !== card.id));
+  }, []);
   const handleCancel = () => {
     setShowForm(false);
   };
@@ -3435,7 +3494,9 @@ var CreditCard = () => {
         CardsList,
         {
           selectedCard: selectedPaymentMethod?.type === "CREDIT_CARD" /* CREDIT_CARD */ ? selectedPaymentMethod.method : null,
-          setCard
+          setCard,
+          newCards,
+          onRemoveNewCard: removeNewCard
         }
       ),
       spreePayConfig?.creditCard.infoMessage && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(InfoBanner, { message: spreePayConfig.creditCard.infoMessage }),
@@ -3454,14 +3515,14 @@ var CreditCard = () => {
 };
 
 // src/components/CreditCardTab/Points/Points.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 init_SpreePayActionsContext();
 init_StaticConfigContext();
 init_useSpreePayConfig();
 init_common();
 
 // src/components/CreditCardTab/Points/SplitBlock.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_airkit2 = require("@mocanetwork/airkit");
 init_SpreePayActionsContext();
 init_StaticConfigContext();
@@ -3471,7 +3532,7 @@ init_format();
 init_logger();
 
 // src/components/CreditCardTab/Points/PointsSelector.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 init_SpreePayActionsContext();
 init_StaticConfigContext();
 init_useSlapiBalance();
@@ -3791,10 +3852,10 @@ var Primitive = NODES.reduce((primitive, node) => {
 }, {});
 
 // ../../node_modules/@radix-ui/react-collection/dist/index.mjs
-var import_react9 = __toESM(require("react"), 1);
+var import_react10 = __toESM(require("react"), 1);
 var import_react_slot3 = require("@radix-ui/react-slot");
 var import_jsx_runtime21 = require("react/jsx-runtime");
-var import_react10 = __toESM(require("react"), 1);
+var import_react11 = __toESM(require("react"), 1);
 var import_react_slot4 = require("@radix-ui/react-slot");
 var import_jsx_runtime22 = require("react/jsx-runtime");
 function createCollection(name) {
@@ -3806,14 +3867,14 @@ function createCollection(name) {
   );
   const CollectionProvider = (props) => {
     const { scope, children } = props;
-    const ref = import_react9.default.useRef(null);
-    const itemMap = import_react9.default.useRef(/* @__PURE__ */ new Map()).current;
+    const ref = import_react10.default.useRef(null);
+    const itemMap = import_react10.default.useRef(/* @__PURE__ */ new Map()).current;
     return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CollectionProviderImpl, { scope, itemMap, collectionRef: ref, children });
   };
   CollectionProvider.displayName = PROVIDER_NAME;
   const COLLECTION_SLOT_NAME = name + "CollectionSlot";
   const CollectionSlotImpl = (0, import_react_slot3.createSlot)(COLLECTION_SLOT_NAME);
-  const CollectionSlot = import_react9.default.forwardRef(
+  const CollectionSlot = import_react10.default.forwardRef(
     (props, forwardedRef) => {
       const { scope, children } = props;
       const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);
@@ -3825,13 +3886,13 @@ function createCollection(name) {
   const ITEM_SLOT_NAME = name + "CollectionItemSlot";
   const ITEM_DATA_ATTR = "data-radix-collection-item";
   const CollectionItemSlotImpl = (0, import_react_slot3.createSlot)(ITEM_SLOT_NAME);
-  const CollectionItemSlot = import_react9.default.forwardRef(
+  const CollectionItemSlot = import_react10.default.forwardRef(
     (props, forwardedRef) => {
       const { scope, children, ...itemData } = props;
-      const ref = import_react9.default.useRef(null);
+      const ref = import_react10.default.useRef(null);
       const composedRefs = useComposedRefs(forwardedRef, ref);
       const context = useCollectionContext(ITEM_SLOT_NAME, scope);
-      import_react9.default.useEffect(() => {
+      import_react10.default.useEffect(() => {
         context.itemMap.set(ref, { ref, ...itemData });
         return () => void context.itemMap.delete(ref);
       });
@@ -3841,7 +3902,7 @@ function createCollection(name) {
   CollectionItemSlot.displayName = ITEM_SLOT_NAME;
   function useCollection2(scope) {
     const context = useCollectionContext(name + "CollectionConsumer", scope);
-    const getItems = import_react9.default.useCallback(() => {
+    const getItems = import_react10.default.useCallback(() => {
       const collectionNode = context.collectionRef.current;
       if (!collectionNode) return [];
       const orderedNodes = Array.from(collectionNode.querySelectorAll(`[${ITEM_DATA_ATTR}]`));
@@ -4474,7 +4535,7 @@ var PointsSelector = (props) => {
   const maxByAmount = pointsConversionRatio && pointsConversionRatio > 0 ? (amount ?? 0) / pointsConversionRatio : 0;
   const max = Math.min(maxByAmount, balance?.availablePoints ?? 0);
   const step = 10;
-  const [splitTokens, setSplitTokens] = (0, import_react11.useState)(0);
+  const [splitTokens, setSplitTokens] = (0, import_react12.useState)(0);
   const usdAmount = getSplitAmount(amount ?? 0, splitTokens, pointsConversionRatio);
   const pointsValue = String(Math.round(splitTokens));
   const usdWithFee = usdAmount + getTransactionFee(usdAmount, transactionFeePercentage);
@@ -4572,14 +4633,14 @@ var SplitBlock = (props) => {
   const { spreePayConfig } = useSpreePayConfig();
   const { appProps } = useStaticConfig();
   const { currencyCode, exchangeRate, foreignCurrencyAmount } = appProps;
-  const [address, setAddress] = (0, import_react12.useState)(null);
-  const [walletReady, setWalletReady] = (0, import_react12.useState)(false);
+  const [address, setAddress] = (0, import_react13.useState)(null);
+  const [walletReady, setWalletReady] = (0, import_react13.useState)(false);
   const { pointsConversionRatio, pointsTitle } = spreePayConfig || {};
   const { useWeb3Points, environment } = useSpreePayEnv();
   const hasForeignCurrency = !!(currencyCode && exchangeRate && foreignCurrencyAmount);
   const formatPointsValue = (usd) => hasForeignCurrency ? formatCurrency(usd / exchangeRate, currencyCode) : formatCurrency(usd);
-  const prevPointsChainRef = (0, import_react12.useRef)(spreePayConfig?.pointsChain);
-  const initWallet = (0, import_react12.useCallback)(
+  const prevPointsChainRef = (0, import_react13.useRef)(spreePayConfig?.pointsChain);
+  const initWallet = (0, import_react13.useCallback)(
     async (pointsChain) => {
       if (!pointsChain) return;
       try {
@@ -4602,7 +4663,7 @@ var SplitBlock = (props) => {
     },
     [onToggle, environment]
   );
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (!useWeb3Points) return;
     const pointsChainChanged = prevPointsChainRef.current !== spreePayConfig?.pointsChain;
     prevPointsChainRef.current = spreePayConfig?.pointsChain;
@@ -4632,8 +4693,8 @@ var SplitBlock = (props) => {
 // src/components/CreditCardTab/Points/Points.tsx
 var import_jsx_runtime27 = require("react/jsx-runtime");
 var Points = () => {
-  const [usePoints, setUsePoints] = (0, import_react13.useState)(false);
-  const [selectedPointsType, setSelectedPointsType] = (0, import_react13.useState)(null);
+  const [usePoints, setUsePoints] = (0, import_react14.useState)(false);
+  const [selectedPointsType, setSelectedPointsType] = (0, import_react14.useState)(null);
   const { setSelectedPaymentMethod, selectedPaymentMethod } = useSpreePaymentMethod();
   const { spreePayConfig } = useSpreePayConfig();
   const { appProps } = useStaticConfig();
@@ -4679,7 +4740,7 @@ var CreditCardTab = ({ isLoggedIn }) => {
   const { cardPayment } = useCardPayment();
   const { splitPayment } = useSplitCardPayments(isWeb3Enabled ? "web3" : "web2");
   const { pointsPayment } = usePointsPayment(isWeb3Enabled ? "web3" : "web2");
-  const handlePay = (0, import_react14.useCallback)(
+  const handlePay = (0, import_react15.useCallback)(
     async (data) => {
       try {
         let res = null;
@@ -4718,7 +4779,7 @@ var CreditCardTab = ({ isLoggedIn }) => {
       mutateBalance
     ]
   );
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     register(handlePay);
   }, [register, handlePay]);
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { children: [
@@ -4803,8 +4864,8 @@ var TabButtons = (props) => {
 // src/SpreePayContent.tsx
 init_SpreePayActionsContext();
 var import_jsx_runtime45 = require("react/jsx-runtime");
-var CryptoTab2 = (0, import_react19.lazy)(() => Promise.resolve().then(() => (init_CryptoTab2(), CryptoTab_exports)).then((module2) => ({ default: module2.CryptoTab })));
-var CryptoComTab2 = (0, import_react19.lazy)(
+var CryptoTab2 = (0, import_react20.lazy)(() => Promise.resolve().then(() => (init_CryptoTab2(), CryptoTab_exports)).then((module2) => ({ default: module2.CryptoTab })));
+var CryptoComTab2 = (0, import_react20.lazy)(
   () => Promise.resolve().then(() => (init_CryptoComTab2(), CryptoComTab_exports)).then((module2) => ({ default: module2.CryptoComTab }))
 );
 var TabLoadingFallback = () => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "flex items-center justify-center px-5 py-8 md:px-7", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex flex-col items-center gap-3", children: [
@@ -4819,7 +4880,7 @@ var SpreePayContent = ({ isLoggedIn }) => {
       /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(TabButtons, { value: selectedPaymentMethod.type, onChange: setSelectedPaymentMethod })
     ] }),
     selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(CreditCardTab, { isLoggedIn }),
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_react19.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(TabLoadingFallback, {}), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_react20.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(TabLoadingFallback, {}), children: [
       selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(CryptoTab2, { isLoggedIn }),
       selectedPaymentMethod.type === "CDC" /* CDC */ && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(CryptoComTab2, {})
     ] })
@@ -4827,10 +4888,11 @@ var SpreePayContent = ({ isLoggedIn }) => {
 };
 
 // src/components/ErrorBoundary.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
+init_utils();
 init_logger();
 var import_jsx_runtime46 = require("react/jsx-runtime");
-var ErrorBoundary = class extends import_react20.Component {
+var ErrorBoundary = class extends import_react21.Component {
   constructor(props) {
     super(props);
     this.state = { hasError: false, error: null };
@@ -4848,8 +4910,8 @@ var ErrorBoundary = class extends import_react20.Component {
       if (this.props.fallback) {
         return this.props.fallback;
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex w-full flex-col items-center justify-center rounded-3xl border border-(--b-inverse) bg-(--s-primary) p-8", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "mb-4 flex size-12 items-center justify-center rounded-full bg-(--s-secondary)", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: cn("sl-spreepay", this.props.className), children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex w-full flex-col items-center justify-center rounded-3xl border border-(--border-component-specific-card) bg-(--surface-component-specific-card-default-card) p-8 shadow-[0_6.25px_25px_0_var(--shadow-component-specific-card)]", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "mb-4 flex size-12 items-center justify-center rounded-full bg-(--s-warning-subtle)", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
           "svg",
           {
             xmlns: "http://www.w3.org/2000/svg",
@@ -4867,9 +4929,9 @@ var ErrorBoundary = class extends import_react20.Component {
             ]
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("h3", { className: "mb-2 text-lg font-semibold text-(--primary)", children: "Payment Widget Error" }),
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("p", { className: "text-center text-sm text-(--secondary)", children: "Something went wrong loading the payment widget. Please refresh the page and try again." })
-      ] });
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("h3", { className: "mb-2 text-lg font-semibold text-(--brand-primary)", children: "Payment Widget Error" }),
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("p", { className: "text-center text-sm text-(--text-tertiary)", children: "Something went wrong loading the payment widget. Please refresh the page and try again." })
+      ] }) });
     }
     return this.props.children;
   }
@@ -4881,22 +4943,22 @@ init_StaticConfigContext();
 init_client();
 
 // src/hooks/useKeycloakSSO.ts
-var import_react21 = require("react");
+var import_react22 = require("react");
 var import_keycloak_js = __toESM(require("keycloak-js"), 1);
 init_logger();
 var refreshAheadSeconds = 60;
 var keycloakLogger = logger.child("keycloak");
 function useKeycloakSSO(config2) {
   const { url, realm, clientId, ssoPageURI, enabled } = config2;
-  const initRef = (0, import_react21.useRef)(false);
-  const kcRef = (0, import_react21.useRef)(null);
-  const refreshTimerRef = (0, import_react21.useRef)(null);
-  const scheduleRefreshRef = (0, import_react21.useRef)(() => {
+  const initRef = (0, import_react22.useRef)(false);
+  const kcRef = (0, import_react22.useRef)(null);
+  const refreshTimerRef = (0, import_react22.useRef)(null);
+  const scheduleRefreshRef = (0, import_react22.useRef)(() => {
   });
-  const [error, setError] = (0, import_react21.useState)(null);
-  const [isChecking, setIsChecking] = (0, import_react21.useState)(enabled);
-  const [accessToken, setAccessToken] = (0, import_react21.useState)(null);
-  const scheduleRefresh = (0, import_react21.useCallback)(() => {
+  const [error, setError] = (0, import_react22.useState)(null);
+  const [isChecking, setIsChecking] = (0, import_react22.useState)(enabled);
+  const [accessToken, setAccessToken] = (0, import_react22.useState)(null);
+  const scheduleRefresh = (0, import_react22.useCallback)(() => {
     const kc = kcRef.current;
     if (!kc || !kc.tokenParsed || !kc.tokenParsed.exp) {
       return;
@@ -4920,10 +4982,10 @@ function useKeycloakSSO(config2) {
       });
     }, delayMs);
   }, []);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     scheduleRefreshRef.current = scheduleRefresh;
   }, [scheduleRefresh]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (initRef.current || !enabled) return;
     initRef.current = true;
     const kc = new import_keycloak_js.default({ url, realm, clientId });
@@ -4960,30 +5022,44 @@ function useKeycloakSSO(config2) {
 init_utils();
 init_portal();
 init_logger();
+
+// src/utils/token.ts
+var import_jwt_decode = require("jwt-decode");
+var isTokenExpired = (token) => {
+  try {
+    const { exp } = (0, import_jwt_decode.jwtDecode)(token);
+    return typeof exp === "number" && exp < Math.floor(Date.now() / 1e3);
+  } catch {
+    return true;
+  }
+};
+
+// src/SpreePay.tsx
 var import_jsx_runtime47 = require("react/jsx-runtime");
 var SpreePayInner = () => {
-  const [portalEl, setPortalEl] = (0, import_react22.useState)(null);
-  const rootRef = (0, import_react22.useCallback)((node) => {
+  const [portalEl, setPortalEl] = (0, import_react23.useState)(null);
+  const rootRef = (0, import_react23.useCallback)((node) => {
     if (!node) return;
     const el = node.querySelector(":scope > .sl-spreepay__portal");
     setPortalEl(el ?? null);
   }, []);
   const { environment, tenantId, keycloakClientId, accessToken: envAccessToken, ssoPageURI } = useSpreePayEnv();
-  (0, import_react22.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     configureLogger({ environment });
     logger.logVersion();
   }, [environment]);
   const { staticConfig, appProps } = useStaticConfig();
+  const envTokenValid = Boolean(envAccessToken && !isTokenExpired(envAccessToken));
   const { isChecking, accessToken } = useKeycloakSSO({
     realm: tenantId,
     url: staticConfig.keycloakUrl,
     clientId: keycloakClientId ?? "oneof-next",
     ssoPageURI,
-    enabled: !envAccessToken
+    enabled: !envTokenValid
   });
-  const _accessToken = envAccessToken ?? accessToken;
-  const unauthenticatedFetcher = (0, import_react22.useCallback)(() => Promise.resolve(null), []);
-  const slapiFetcher = (0, import_react22.useMemo)(() => {
+  const _accessToken = envTokenValid ? envAccessToken : accessToken;
+  const unauthenticatedFetcher = (0, import_react23.useCallback)(() => Promise.resolve(null), []);
+  const slapiFetcher = (0, import_react23.useMemo)(() => {
     if (_accessToken) {
       return registerApi({
         accessToken: _accessToken,
@@ -5019,13 +5095,13 @@ var SpreePayInner = () => {
   ] });
 };
 var SpreePay = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ErrorBoundary, { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(StaticConfigProvider, { props, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(SpreePayInner, {}) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ErrorBoundary, { className: props.className, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(StaticConfigProvider, { props, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(SpreePayInner, {}) }) });
 };
 
 // src/hooks/useCapture3DS.ts
-var import_react23 = require("react");
+var import_react24 = require("react");
 var useCapture3DS = (searchParams) => {
-  (0, import_react23.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (typeof window !== "undefined" && window.parent && searchParams?.paymentIntent) {
       window.parent.SP_EVENT_BUS?.emit("paymentIntent", { paymentIntent: searchParams.paymentIntent });
     }

package/build/index.css

@@ -695,6 +695,9 @@
     background-color: color-mix(in oklab, var(--s-warning) 10%, transparent);
   }
 }
+.sl-spreepay .bg-\(--s-warning-subtle\) {
+  background-color: var(--s-warning-subtle);
+}
 .sl-spreepay .bg-\(--secondary\) {
   background-color: var(--secondary);
 }
@@ -1408,14 +1411,9 @@
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
 }
-.sl-spreepay .data-\[state\=checked\]\:border-\(--primary\) {
+.sl-spreepay .data-\[state\=checked\]\:border-\(--s-brand\) {
   &[data-state=checked] {
-    border-color: var(--primary);
-  }
-}
-.sl-spreepay .data-\[state\=checked\]\:bg-\(--primary\) {
-  &[data-state=checked] {
-    background-color: var(--primary);
+    border-color: var(--s-brand);
   }
 }
 .sl-spreepay .data-\[state\=checked\]\:bg-\(--s-brand\) {
@@ -1592,13 +1590,6 @@
     }
   }
 }
-.sl-spreepay .dark\:data-\[state\=checked\]\:bg-\(--primary\) {
-  &:is(.dark *) {
-    &[data-state=checked] {
-      background-color: var(--primary);
-    }
-  }
-}
 .sl-spreepay .\[\&_a\]\:underline {
   & a {
     text-decoration-line: underline;

package/build/index.js

@@ -8,10 +8,10 @@ import {
   getSplitAmount,
   getTransactionFee,
   useSlapiBalance
-} from "./chunk-LXX5P2LL.js";
+} from "./chunk-FKAVWVFL.js";
 import {
   Iframe3ds
-} from "./chunk-4ELDS4N4.js";
+} from "./chunk-7I6EBCSI.js";
 import {
   InfoBanner,
   LogLevel,
@@ -23,6 +23,7 @@ import {
   StaticConfigProvider,
   cn,
   configureLogger,
+  isNewCard,
   logger,
   registerApi,
   useSpreePay,
@@ -31,10 +32,10 @@ import {
   useSpreePayRegister,
   useSpreePaymentMethod,
   useStaticConfig
-} from "./chunk-I35SE3K2.js";
+} from "./chunk-AGTOSFMT.js";
 
 // src/SpreePay.tsx
-import { useCallback as useCallback7, useEffect as useEffect8, useMemo as useMemo7, useState as useState11 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect8, useMemo as useMemo9, useState as useState11 } from "react";
 import NiceModal4 from "@ebay/nice-modal-react";
 import { SWRConfig } from "swr";
 
@@ -42,7 +43,7 @@ import { SWRConfig } from "swr";
 import { Suspense, lazy } from "react";
 
 // src/components/CreditCardTab/CreditCardTab.tsx
-import { useCallback as useCallback5, useEffect as useEffect6 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect6 } from "react";
 
 // src/hooks/payments/useCardPayment.ts
 import NiceModal from "@ebay/nice-modal-react";
@@ -540,25 +541,27 @@ var useSplitCardPayments = (mode = "web2") => {
 };
 
 // src/hooks/useCards.ts
+import { useMemo } from "react";
 import useSWR from "swr";
 var URL = "/v1/payments/cards";
 var useCards = () => {
   const { origin } = useSpreePayEnv();
   const { data, isLoading, mutate } = useSWR(origin ? `${URL}?origin=${origin}` : URL);
+  const cards = useMemo(() => data?.data.filter((c) => c.active) ?? [], [data]);
   return {
-    cards: data?.data.filter((c) => c.active) || [],
+    cards,
     cardsIsLoading: isLoading,
     mutateCards: mutate
   };
 };
 
 // src/components/CreditCardTab/CreditCard/CreditCard.tsx
-import { useMemo, useState as useState3 } from "react";
+import { useCallback as useCallback2, useMemo as useMemo3, useState as useState3 } from "react";
 import { Elements } from "@stripe/react-stripe-js";
 import { loadStripe } from "@stripe/stripe-js";
 
 // src/components/CreditCardTab/CreditCard/CardsList.tsx
-import { useState } from "react";
+import { useMemo as useMemo2, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var CardListItem = ({ card, isSelected, onSelect, onRemove }) => {
   const [isRemoving, setIsRemoving] = useState(false);
@@ -624,19 +627,22 @@ var CardListItem = ({ card, isSelected, onSelect, onRemove }) => {
     }
   );
 };
-var CardsList = ({ selectedCard, setCard }) => {
+var CardsList = ({ selectedCard, setCard, newCards, onRemoveNewCard }) => {
   const { cards, cardsIsLoading, mutateCards } = useCards();
+  const allCards = useMemo2(() => [...cards, ...newCards], [cards, newCards]);
   const handleRemove = async (card) => {
-    if ("cardId" in card) {
+    if (isNewCard(card)) {
+      onRemoveNewCard(card);
+    } else {
       await SlapiPaymentService.removeCard({ cardId: card.id });
+      mutateCards((data) => ({ ...data, data: (data?.data ?? []).filter((c) => c.id !== card.id) }));
     }
-    mutateCards((data) => ({ ...data, data: (data?.data ?? []).filter((c) => c.id !== card.id) }));
   };
   if (cardsIsLoading) {
     return /* @__PURE__ */ jsx("div", { className: "flex w-full flex-col", children: /* @__PURE__ */ jsx("div", { className: "h-11 animate-pulse rounded-sm bg-(--s-primary)" }) });
   }
-  if (cards.length === 0) return null;
-  return /* @__PURE__ */ jsx("div", { className: "flex w-full flex-col gap-4", children: cards.map((card) => /* @__PURE__ */ jsx(
+  if (allCards.length === 0) return null;
+  return /* @__PURE__ */ jsx("div", { className: "flex w-full flex-col gap-4", children: allCards.map((card) => /* @__PURE__ */ jsx(
     CardListItem,
     {
       isSelected: selectedCard?.id === card.id,
@@ -649,7 +655,7 @@ var CardsList = ({ selectedCard, setCard }) => {
 };
 
 // src/components/CreditCardTab/CreditCard/CreditCardForm.tsx
-import { useCallback, useEffect, useId, useRef, useState as useState2 } from "react";
+import { useCallback, useEffect, useRef, useState as useState2 } from "react";
 import { CardCvcElement, CardExpiryElement, CardNumberElement, useElements, useStripe } from "@stripe/react-stripe-js";
 
 // src/ui/button.tsx
@@ -703,7 +709,7 @@ function Checkbox({ className, ...props }) {
     {
       "data-slot": "checkbox",
       className: cn(
-        "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)",
+        "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-(--s-brand) data-[state=checked]:bg-(--s-brand) data-[state=checked]:text-(--inverse)",
         className
       ),
       ...props,
@@ -734,7 +740,7 @@ var CreditCardForm = ({ cancel, saveCard }) => {
   const formRef = useRef(null);
   const elements = useElements();
   const stripe = useStripe();
-  const id = useId();
+  const [id] = useState2(() => crypto.randomUUID());
   const computeStripeStyles = useCallback(() => {
     const formRefCurrent = formRef.current;
     if (typeof window === "undefined" || !formRefCurrent) return {};
@@ -859,13 +865,13 @@ var CreditCardForm = ({ cancel, saveCard }) => {
 // src/components/CreditCardTab/CreditCard/CreditCard.tsx
 import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var StripeWrapper = ({ onCancel, saveNewCard, publicKey }) => {
-  const stripePromise = useMemo(() => loadStripe(publicKey), [publicKey]);
+  const stripePromise = useMemo3(() => loadStripe(publicKey), [publicKey]);
   return /* @__PURE__ */ jsx5(Elements, { stripe: stripePromise, children: /* @__PURE__ */ jsx5(CreditCardForm, { cancel: onCancel, saveCard: saveNewCard }) });
 };
 var CreditCard = () => {
   const [showForm, setShowForm] = useState3(false);
+  const [newCards, setNewCards] = useState3([]);
   const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
-  const { mutateCards } = useCards();
   const { spreePayConfig } = useSpreePayConfig();
   const setCard = (card) => {
     const isAlreadySelected = selectedPaymentMethod?.type === "CREDIT_CARD" /* CREDIT_CARD */ && selectedPaymentMethod.method?.id === card.id;
@@ -876,10 +882,13 @@ var CreditCard = () => {
     });
   };
   const saveNewCard = (newCard) => {
-    mutateCards((data) => ({ ...data, data: [...data?.data ?? [], newCard] }), { revalidate: false });
+    setNewCards((prev) => [...prev, newCard]);
     setCard(newCard);
     setShowForm(false);
   };
+  const removeNewCard = useCallback2((card) => {
+    setNewCards((prev) => prev.filter((c) => c.id !== card.id));
+  }, []);
   const handleCancel = () => {
     setShowForm(false);
   };
@@ -890,7 +899,9 @@ var CreditCard = () => {
         CardsList,
         {
           selectedCard: selectedPaymentMethod?.type === "CREDIT_CARD" /* CREDIT_CARD */ ? selectedPaymentMethod.method : null,
-          setCard
+          setCard,
+          newCards,
+          onRemoveNewCard: removeNewCard
         }
       ),
       spreePayConfig?.creditCard.infoMessage && /* @__PURE__ */ jsx5(InfoBanner, { message: spreePayConfig.creditCard.infoMessage }),
@@ -912,7 +923,7 @@ var CreditCard = () => {
 import { useState as useState9 } from "react";
 
 // src/components/CreditCardTab/Points/SplitBlock.tsx
-import { useCallback as useCallback4, useEffect as useEffect5, useRef as useRef6, useState as useState8 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect5, useRef as useRef6, useState as useState8 } from "react";
 import { BUILD_ENV as BUILD_ENV2 } from "@mocanetwork/airkit";
 
 // src/components/CreditCardTab/Points/PointsSelector.tsx
@@ -2014,7 +2025,7 @@ var SplitBlock = (props) => {
   const hasForeignCurrency = !!(currencyCode && exchangeRate && foreignCurrencyAmount);
   const formatPointsValue = (usd) => hasForeignCurrency ? formatCurrency(usd / exchangeRate, currencyCode) : formatCurrency(usd);
   const prevPointsChainRef = useRef6(spreePayConfig?.pointsChain);
-  const initWallet = useCallback4(
+  const initWallet = useCallback5(
     async (pointsChain) => {
       if (!pointsChain) return;
       try {
@@ -2114,7 +2125,7 @@ var CreditCardTab = ({ isLoggedIn }) => {
   const { cardPayment } = useCardPayment();
   const { splitPayment } = useSplitCardPayments(isWeb3Enabled ? "web3" : "web2");
   const { pointsPayment } = usePointsPayment(isWeb3Enabled ? "web3" : "web2");
-  const handlePay = useCallback5(
+  const handlePay = useCallback6(
     async (data) => {
       try {
         let res = null;
@@ -2235,9 +2246,9 @@ var TabButtons = (props) => {
 
 // src/SpreePayContent.tsx
 import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
-var CryptoTab = lazy(() => import("./CryptoTab-RY2NTNZJ.js").then((module) => ({ default: module.CryptoTab })));
+var CryptoTab = lazy(() => import("./CryptoTab-7EG23TQW.js").then((module) => ({ default: module.CryptoTab })));
 var CryptoComTab = lazy(
-  () => import("./CryptoComTab-GNJ4XACU.js").then((module) => ({ default: module.CryptoComTab }))
+  () => import("./CryptoComTab-5662XFNI.js").then((module) => ({ default: module.CryptoComTab }))
 );
 var TabLoadingFallback = () => /* @__PURE__ */ jsx18("div", { className: "flex items-center justify-center px-5 py-8 md:px-7", children: /* @__PURE__ */ jsxs11("div", { className: "flex flex-col items-center gap-3", children: [
   /* @__PURE__ */ jsx18("div", { className: "h-8 w-8 animate-spin rounded-full border-4 border-(--border-component-specific-card) border-t-(--brand-primary)" }),
@@ -2279,8 +2290,8 @@ var ErrorBoundary = class extends Component {
       if (this.props.fallback) {
         return this.props.fallback;
       }
-      return /* @__PURE__ */ jsxs12("div", { className: "flex w-full flex-col items-center justify-center rounded-3xl border border-(--b-inverse) bg-(--s-primary) p-8", children: [
-        /* @__PURE__ */ jsx19("div", { className: "mb-4 flex size-12 items-center justify-center rounded-full bg-(--s-secondary)", children: /* @__PURE__ */ jsxs12(
+      return /* @__PURE__ */ jsx19("div", { className: cn("sl-spreepay", this.props.className), children: /* @__PURE__ */ jsxs12("div", { className: "flex w-full flex-col items-center justify-center rounded-3xl border border-(--border-component-specific-card) bg-(--surface-component-specific-card-default-card) p-8 shadow-[0_6.25px_25px_0_var(--shadow-component-specific-card)]", children: [
+        /* @__PURE__ */ jsx19("div", { className: "mb-4 flex size-12 items-center justify-center rounded-full bg-(--s-warning-subtle)", children: /* @__PURE__ */ jsxs12(
           "svg",
           {
             xmlns: "http://www.w3.org/2000/svg",
@@ -2298,16 +2309,16 @@ var ErrorBoundary = class extends Component {
             ]
           }
         ) }),
-        /* @__PURE__ */ jsx19("h3", { className: "mb-2 text-lg font-semibold text-(--primary)", children: "Payment Widget Error" }),
-        /* @__PURE__ */ jsx19("p", { className: "text-center text-sm text-(--secondary)", children: "Something went wrong loading the payment widget. Please refresh the page and try again." })
-      ] });
+        /* @__PURE__ */ jsx19("h3", { className: "mb-2 text-lg font-semibold text-(--brand-primary)", children: "Payment Widget Error" }),
+        /* @__PURE__ */ jsx19("p", { className: "text-center text-sm text-(--text-tertiary)", children: "Something went wrong loading the payment widget. Please refresh the page and try again." })
+      ] }) });
     }
     return this.props.children;
   }
 };
 
 // src/hooks/useKeycloakSSO.ts
-import { useCallback as useCallback6, useEffect as useEffect7, useRef as useRef7, useState as useState10 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect7, useRef as useRef7, useState as useState10 } from "react";
 import Keycloak from "keycloak-js";
 var refreshAheadSeconds = 60;
 var keycloakLogger = logger.child("keycloak");
@@ -2321,7 +2332,7 @@ function useKeycloakSSO(config) {
   const [error, setError] = useState10(null);
   const [isChecking, setIsChecking] = useState10(enabled);
   const [accessToken, setAccessToken] = useState10(null);
-  const scheduleRefresh = useCallback6(() => {
+  const scheduleRefresh = useCallback7(() => {
     const kc = kcRef.current;
     if (!kc || !kc.tokenParsed || !kc.tokenParsed.exp) {
       return;
@@ -2381,11 +2392,22 @@ function useKeycloakSSO(config) {
   return { isChecking, accessToken, error };
 }
 
+// src/utils/token.ts
+import { jwtDecode } from "jwt-decode";
+var isTokenExpired = (token) => {
+  try {
+    const { exp } = jwtDecode(token);
+    return typeof exp === "number" && exp < Math.floor(Date.now() / 1e3);
+  } catch {
+    return true;
+  }
+};
+
 // src/SpreePay.tsx
 import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
 var SpreePayInner = () => {
   const [portalEl, setPortalEl] = useState11(null);
-  const rootRef = useCallback7((node) => {
+  const rootRef = useCallback8((node) => {
     if (!node) return;
     const el = node.querySelector(":scope > .sl-spreepay__portal");
     setPortalEl(el ?? null);
@@ -2396,16 +2418,17 @@ var SpreePayInner = () => {
     logger.logVersion();
   }, [environment]);
   const { staticConfig, appProps } = useStaticConfig();
+  const envTokenValid = Boolean(envAccessToken && !isTokenExpired(envAccessToken));
   const { isChecking, accessToken } = useKeycloakSSO({
     realm: tenantId,
     url: staticConfig.keycloakUrl,
     clientId: keycloakClientId ?? "oneof-next",
     ssoPageURI,
-    enabled: !envAccessToken
+    enabled: !envTokenValid
   });
-  const _accessToken = envAccessToken ?? accessToken;
-  const unauthenticatedFetcher = useCallback7(() => Promise.resolve(null), []);
-  const slapiFetcher = useMemo7(() => {
+  const _accessToken = envTokenValid ? envAccessToken : accessToken;
+  const unauthenticatedFetcher = useCallback8(() => Promise.resolve(null), []);
+  const slapiFetcher = useMemo9(() => {
     if (_accessToken) {
       return registerApi({
         accessToken: _accessToken,
@@ -2441,7 +2464,7 @@ var SpreePayInner = () => {
   ] });
 };
 var SpreePay = (props) => {
-  return /* @__PURE__ */ jsx20(ErrorBoundary, { children: /* @__PURE__ */ jsx20(StaticConfigProvider, { props, children: /* @__PURE__ */ jsx20(SpreePayInner, {}) }) });
+  return /* @__PURE__ */ jsx20(ErrorBoundary, { className: props.className, children: /* @__PURE__ */ jsx20(StaticConfigProvider, { props, children: /* @__PURE__ */ jsx20(SpreePayInner, {}) }) });
 };
 
 // src/hooks/useCapture3DS.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@superlogic/spree-pay",
-  "version": "0.4.2",
+  "version": "0.4.6",
   "description": "Spree-pay React component and utilities",
   "private": false,
   "type": "module",
@@ -18,7 +18,8 @@
       "require": "./build/index.cjs",
       "default": "./build/index.js"
     },
-    "./styles.css": "./build/index.css"
+    "./styles.css": "./build/index.css",
+    "./bridge.css": "./src/styles/bridge.css"
   },
   "files": [
     "build",
@@ -52,6 +53,7 @@
     "@tanstack/react-query": "^5.97.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "jwt-decode": "^4.0.0",
     "keycloak-js": "^26.2.3",
     "lucide-react": "^1.8.0",
     "swr": "^2.4.1",

package/src/styles/bridge.css

@@ -0,0 +1,53 @@
+/**
+ * Spree-pay CSS variable bridge — live-tickets context only.
+ *
+ * Exposes legacy short-name CSS variables that spree-pay TSX components
+ * still reference, mapped to the current Figma token names. This file is
+ * imported by apps/live-tickets/src/theme/globals.css so the host app's
+ * tenant *.figma.css tokens are available under the old names.
+ *
+ * NOT used in standalone mode — the standalone build gets default values
+ * from packages/spree-pay/src/styles/globals.css instead.
+ */
+:root {
+  /* text / icons */
+  --primary: var(--color-text-icons-primary-default);
+  --secondary: var(--color-text-icons-secondary-default);
+  --tertiary: var(--color-text-icons-tertiary-default);
+  --text-tertiary: var(--color-text-icons-tertiary-default); /* pre-existing alias bug */
+  --brand-primary: var(--color-text-icons-brand-default);
+  --accent: var(--color-text-icons-accent-default);
+  --inverse: var(--color-text-icons-inverse-default);
+  --disabled: var(--color-text-icons-primary-disabled);
+  --positive: var(--color-feedback-success);
+  --warning: var(--color-feedback-attention);
+  --negative: var(--color-feedback-error);
+
+  /* surface */
+  --s-default: var(--color-surface-layer-page);
+  --s-primary: var(--color-surface-container-subtle);
+  --s-primary-hover: var(--color-component-list-row-subtle-hover);
+  --s-secondary: var(--color-component-table-header);
+  --s-tertiary: var(--color-control-tertiary-bg-default);
+  --s-brand: var(--color-surface-container-brand);
+  --s-brand-hover: var(--color-control-primary-bg-hover);
+  --s-disabled: var(--color-component-bg-disabled);
+  --s-warning: var(--color-feedback-attention);
+
+  /* border */
+  --b-primary: var(--color-border-subtle);
+  --b-secondary: var(--color-border-default);
+  --b-tertiary: var(--color-component-divider-default);
+  --b-brand: var(--color-control-primary-border-default);
+  --b-inverse: var(--color-border-inverse);
+
+  /* overlay / component-specific */
+  --overlay: var(--color-surface-layer-backdrop);
+  --border-component-specific-card: var(--color-component-divider-subtle);
+  --surface-component-specific-card-default-card: var(--color-surface-layer-card);
+  --shadow-component-specific-card: var(--color-effect-shadow-card);
+
+  /* Crypto.com brand colors — same across all tenants */
+  --crypto-pay-bg: #00307d;
+  --crypto-pay-bg-hover: #002655;
+}