@superlogic/spree-pay 0.5.1 → 0.5.3

package/build/{CryptoComTab-ZAWBJUCM.js → CryptoComTab-GL5DOJ2P.js}

@@ -1,6 +1,6 @@
 import {
   Iframe3ds
-} from "./chunk-AXNTOSBU.js";
+} from "./chunk-PMTKUR3L.js";
 import {
   InfoBanner,
   Legal,
@@ -14,7 +14,7 @@ import {
   useSpreePayRegister,
   useSpreePaymentMethod,
   useStaticConfig
-} from "./chunk-PTEQVWLJ.js";
+} from "./chunk-NOTIAH6W.js";
 
 // src/components/CryptoComTab/CryptoComTab.tsx
 import { useCallback, useEffect } from "react";
@@ -150,7 +150,7 @@ var CryptoComTab = () => {
         const res = await cryptoComPayment(data);
         return settlePaymentResult(res, "Crypto payment failed");
       } catch (e) {
-        return Promise.reject(toPaymentError(e, "Crypto payment failed"));
+        throw toPaymentError(e, "Crypto payment failed");
       }
     },
     [cryptoComPayment]

package/build/{CryptoTab-632DRL2D.js → CryptoTab-ODXWUOMD.js}

@@ -2,7 +2,7 @@ import {
   CheckoutButton,
   PointsSwitch,
   cn as cn2
-} from "./chunk-4BM6VTMT.js";
+} from "./chunk-HZDR76ZV.js";
 import {
   Dialog,
   DialogContent,
@@ -18,7 +18,7 @@ import {
   useSpreePayConfig,
   useSpreePayRegister,
   useSpreePaymentMethod
-} from "./chunk-PTEQVWLJ.js";
+} from "./chunk-NOTIAH6W.js";
 
 // src/components/CryptoTab/Crypto/CryptoWrapper.tsx
 import { useMemo as useMemo2 } from "react";
@@ -766,7 +766,7 @@ var Crypto = () => {
         const res = await cryptoPayment(data);
         return settlePaymentResult(res, "Crypto payment failed");
       } catch (e) {
-        return Promise.reject(toPaymentError(e, "Crypto payment failed"));
+        throw toPaymentError(e, "Crypto payment failed");
       }
     },
     [cryptoPayment]

package/build/{chunk-4BM6VTMT.js → chunk-HZDR76ZV.js}

@@ -7,7 +7,7 @@ import {
   useSpreePayEnv,
   useSpreePaymentMethod,
   useStaticConfig
-} from "./chunk-PTEQVWLJ.js";
+} from "./chunk-NOTIAH6W.js";
 
 // src/components/common/PointsSwitch.tsx
 import { useId } from "react";
@@ -45,7 +45,7 @@ function Switch({ className, ...props }) {
     {
       "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)",
+        "peer inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:border-(--b-tertiary) focus-visible:ring-[3px] focus-visible:ring-(--b-tertiary)/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-(--s-brand) data-[state=unchecked]:bg-(--s-tertiary)",
         className
       ),
       ...props,

package/build/{chunk-PTEQVWLJ.js → chunk-NOTIAH6W.js}

@@ -86,7 +86,7 @@ var settlePaymentResult = (res, fallbackMessage, failureCode = "PAYMENT_ERROR" /
 };
 
 // package.json
-var version = "0.5.1";
+var version = "0.5.3";
 
 // src/utils/logger.ts
 var LogLevel = /* @__PURE__ */ ((LogLevel2) => {
@@ -833,7 +833,7 @@ function DialogContent({
             DialogPrimitive.Close,
             {
               "data-slot": "dialog-close",
-              className: "ring-offset-background focus:ring-ring 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) data-[state=open]:text-(--secondary) [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+              className: "absolute top-4 right-4 rounded-xs opacity-70 ring-offset-(--s-default) transition-opacity hover:opacity-100 focus:ring-2 focus:ring-(--b-tertiary) focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-(--accent) data-[state=open]:text-(--secondary) [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
               children: [
                 /* @__PURE__ */ jsx6(XIcon, {}),
                 /* @__PURE__ */ jsx6("span", { className: "sr-only", children: "Close" })

package/build/{chunk-AXNTOSBU.js → chunk-PMTKUR3L.js}

@@ -3,7 +3,7 @@ import {
   DialogContent,
   DialogDescription,
   DialogTitle
-} from "./chunk-PTEQVWLJ.js";
+} from "./chunk-NOTIAH6W.js";
 
 // src/modals/Iframe3ds.tsx
 import { useEffect } from "react";

package/build/index.cjs

@@ -133,7 +133,7 @@ var init_errors = __esm({
 var version;
 var init_package = __esm({
   "package.json"() {
-    version = "0.5.1";
+    version = "0.5.3";
   }
 });
 
@@ -590,7 +590,7 @@ function DialogContent({
             DialogPrimitive.Close,
             {
               "data-slot": "dialog-close",
-              className: "ring-offset-background focus:ring-ring 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) data-[state=open]:text-(--secondary) [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+              className: "absolute top-4 right-4 rounded-xs opacity-70 ring-offset-(--s-default) transition-opacity hover:opacity-100 focus:ring-2 focus:ring-(--b-tertiary) focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-(--accent) data-[state=open]:text-(--secondary) [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.XIcon, {}),
                 /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "sr-only", children: "Close" })
@@ -1143,7 +1143,7 @@ function Switch({ className, ...props }) {
     {
       "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)",
+        "peer inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:border-(--b-tertiary) focus-visible:ring-[3px] focus-visible:ring-(--b-tertiary)/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-(--s-brand) data-[state=unchecked]:bg-(--s-tertiary)",
         className
       ),
       ...props,
@@ -2367,7 +2367,7 @@ var init_Crypto = __esm({
             const res = await cryptoPayment(data);
             return settlePaymentResult(res, "Crypto payment failed");
           } catch (e) {
-            return Promise.reject(toPaymentError(e, "Crypto payment failed"));
+            throw toPaymentError(e, "Crypto payment failed");
           }
         },
         [cryptoPayment]
@@ -2641,7 +2641,7 @@ var init_CryptoComTab = __esm({
             const res = await cryptoComPayment(data);
             return settlePaymentResult(res, "Crypto payment failed");
           } catch (e) {
-            return Promise.reject(toPaymentError(e, "Crypto payment failed"));
+            throw toPaymentError(e, "Crypto payment failed");
           }
         },
         [cryptoComPayment]
@@ -3367,15 +3367,15 @@ var import_class_variance_authority = require("class-variance-authority");
 init_utils();
 var import_jsx_runtime14 = 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",
+  "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-(--b-tertiary) focus-visible:ring-(--b-tertiary)/50 focus-visible:ring-[3px] aria-invalid:ring-(--negative)/20 dark:aria-invalid:ring-(--negative)/40 aria-invalid:border-(--negative)",
   {
     variants: {
       variant: {
         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",
+        destructive: "bg-(--negative) text-(--inverse) shadow-xs hover:bg-(--negative)/90 focus-visible:ring-(--negative)/20 dark:focus-visible:ring-(--negative)/40 dark:bg-(--negative)/60",
+        outline: "border bg-(--s-default) shadow-xs hover:bg-(--accent) hover:text-(--brand-primary) dark:bg-(--s-primary)/30 dark:border-(--b-tertiary) dark:hover:bg-(--s-primary)/50",
+        secondary: "bg-(--secondary) text-(--inverse) shadow-xs hover:bg-(--secondary)/80",
+        ghost: "hover:bg-(--accent) hover:text-(--brand-primary) dark:hover:bg-(--accent)/50",
         link: "text-(--brand-primary) underline-offset-4 hover:underline"
       },
       size: {
@@ -3414,7 +3414,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-(--s-brand) data-[state=checked]:bg-(--s-brand) data-[state=checked]:text-(--inverse)",
+        "peer size-4 shrink-0 rounded-sm border border-(--b-tertiary) shadow-xs transition-shadow outline-none focus-visible:border-(--b-tertiary) focus-visible:ring-[3px] focus-visible:ring-(--b-tertiary)/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-(--negative) aria-invalid:ring-(--negative)/20 data-[state=checked]:border-(--s-brand) data-[state=checked]:bg-(--s-brand) data-[state=checked]:text-(--inverse) dark:bg-(--s-primary)/30 dark:aria-invalid:ring-(--negative)/40",
         className
       ),
       ...props,
@@ -3436,9 +3436,9 @@ init_logger();
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var cardFormLogger = logger.child("card-form");
 var stripeElementClasses = {
-  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"
+  base: "w-full rounded-[12px] bg-(--s-primary) px-5 py-4 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-(--b-tertiary) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50",
+  invalid: "focus-visible:ring-(--negative)",
+  focus: "border-(--b-tertiary) ring-(--b-tertiary)/50 ring-2"
 };
 var CreditCardForm = ({ cancel, saveCard }) => {
   const [cardError, setCardError] = (0, import_react9.useState)(void 0);
@@ -3540,7 +3540,7 @@ var CreditCardForm = ({ cancel, saveCard }) => {
           }
         )
       ] }),
-      cardError && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "text-destructive mt-1 text-sm", children: cardError })
+      cardError && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "mt-1 text-sm text-(--negative)", children: cardError })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Checkbox, { checked: shouldSaveCard, onCheckedChange: (v) => setShouldSaveCard(v === true), id: "saveCard" }),
@@ -3674,9 +3674,9 @@ function Input({ className, type, ...props }) {
       type,
       "data-slot": "input",
       className: cn(
-        "file:text-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-(--brand-primary) 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 placeholder:text-(--tertiary) 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",
+        "flex h-9 w-full min-w-0 rounded-md border border-(--b-tertiary) bg-transparent px-3 py-1 text-base text-(--brand-primary) 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 file:text-(--primary) placeholder:text-(--tertiary) disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-(--s-primary)/30",
+        "focus-visible:border-(--b-tertiary) focus-visible:ring-[3px] focus-visible:ring-(--b-tertiary)/50",
+        "aria-invalid:border-(--negative) aria-invalid:ring-(--negative)/20 dark:aria-invalid:ring-(--negative)/40",
         className
       ),
       ...props
@@ -4633,7 +4633,7 @@ function Slider2(props) {
           Thumb2,
           {
             "data-slot": "slider-thumb",
-            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"
+            className: "block size-5 shrink-0 rounded-full border border-(--b-inverse) bg-(--primary) shadow-(--primary)/20 shadow-sm ring-(--b-tertiary)/50 transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
           },
           index
         ))
@@ -4885,12 +4885,12 @@ var CreditCardTab = () => {
         }
         return settlePaymentResult(res, failureMessage, failureCode);
       } catch (e) {
-        return Promise.reject(toPaymentError(e, failureMessage, failureCode));
+        throw toPaymentError(e, failureMessage, failureCode);
       } finally {
-        mutateBalance();
+        mutateBalance().catch(() => void 0);
         if (selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && selectedPaymentMethod.method && isNewCard(selectedPaymentMethod.method)) {
           const knownIds = new Set(cards.map((c) => c.id));
-          const updated = await mutateCards();
+          const updated = await mutateCards().catch(() => void 0);
           const newSavedCard = (updated?.data ?? []).find((c) => c.active && !knownIds.has(c.id));
           setSelectedPaymentMethod({
             ...selectedPaymentMethod,
@@ -4899,7 +4899,7 @@ var CreditCardTab = () => {
           });
           setNewCards([]);
         } else {
-          mutateCards();
+          mutateCards().catch(() => void 0);
         }
       }
     },

package/build/index.css

@@ -243,6 +243,9 @@
 .sl-spreepay .pointer-events-none {
   pointer-events: none;
 }
+.sl-spreepay .invisible {
+  visibility: hidden;
+}
 .sl-spreepay .sr-only {
   position: absolute;
   width: 1px;
@@ -667,6 +670,9 @@
 .sl-spreepay .bg-\(--crypto-pay-bg\) {
   background-color: var(--crypto-pay-bg);
 }
+.sl-spreepay .bg-\(--negative\) {
+  background-color: var(--negative);
+}
 .sl-spreepay .bg-\(--overlay\) {
   background-color: var(--overlay);
 }
@@ -930,6 +936,15 @@
     var(--tw-ring-shadow),
     var(--tw-shadow);
 }
+.sl-spreepay .shadow {
+  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+  box-shadow:
+    var(--tw-inset-shadow),
+    var(--tw-inset-ring-shadow),
+    var(--tw-ring-offset-shadow),
+    var(--tw-ring-shadow),
+    var(--tw-shadow);
+}
 .sl-spreepay .shadow-\[0_6\.25px_25px_0_rgba\(0\,0\,0\,0\.05\)\] {
   --tw-shadow: 0 6.25px 25px 0 var(--tw-shadow-color, rgba(0,0,0,0.05));
   box-shadow:
@@ -1005,6 +1020,15 @@
 .sl-spreepay .ring-\(--b-brand\) {
   --tw-ring-color: var(--b-brand);
 }
+.sl-spreepay .ring-\(--b-tertiary\)\/50 {
+  --tw-ring-color: var(--b-tertiary);
+  @supports (color: color-mix(in lab, red, red)) {
+    --tw-ring-color: color-mix(in oklab, var(--b-tertiary) 50%, transparent);
+  }
+}
+.sl-spreepay .ring-offset-\(--s-default\) {
+  --tw-ring-offset-color: var(--s-default);
+}
 .sl-spreepay .outline {
   outline-style: var(--tw-outline-style);
   outline-width: 1px;
@@ -1122,6 +1146,11 @@
     font-weight: var(--font-weight-medium);
   }
 }
+.sl-spreepay .file\:text-\(--primary\) {
+  &::file-selector-button {
+    color: var(--primary);
+  }
+}
 .sl-spreepay .placeholder\:text-\(--tertiary\) {
   &::placeholder {
     color: var(--tertiary);
@@ -1141,6 +1170,16 @@
     }
   }
 }
+.sl-spreepay .hover\:bg-\(--negative\)\/90 {
+  &:hover {
+    @media (hover: hover) {
+      background-color: var(--negative);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--negative) 90%, transparent);
+      }
+    }
+  }
+}
 .sl-spreepay .hover\:bg-\(--primary\)\/90 {
   &:hover {
     @media (hover: hover) {
@@ -1234,6 +1273,11 @@
       var(--tw-shadow);
   }
 }
+.sl-spreepay .focus\:ring-\(--b-tertiary\) {
+  &:focus {
+    --tw-ring-color: var(--b-tertiary);
+  }
+}
 .sl-spreepay .focus\:ring-offset-2 {
   &:focus {
     --tw-ring-offset-width: 2px;
@@ -1250,6 +1294,11 @@
     }
   }
 }
+.sl-spreepay .focus-visible\:border-\(--b-tertiary\) {
+  &:focus-visible {
+    border-color: var(--b-tertiary);
+  }
+}
 .sl-spreepay .focus-visible\:ring-1 {
   &:focus-visible {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -1283,6 +1332,32 @@
       var(--tw-shadow);
   }
 }
+.sl-spreepay .focus-visible\:ring-\(--b-tertiary\) {
+  &:focus-visible {
+    --tw-ring-color: var(--b-tertiary);
+  }
+}
+.sl-spreepay .focus-visible\:ring-\(--b-tertiary\)\/50 {
+  &:focus-visible {
+    --tw-ring-color: var(--b-tertiary);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--b-tertiary) 50%, transparent);
+    }
+  }
+}
+.sl-spreepay .focus-visible\:ring-\(--negative\) {
+  &:focus-visible {
+    --tw-ring-color: var(--negative);
+  }
+}
+.sl-spreepay .focus-visible\:ring-\(--negative\)\/20 {
+  &:focus-visible {
+    --tw-ring-color: var(--negative);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--negative) 20%, transparent);
+    }
+  }
+}
 .sl-spreepay .focus-visible\:ring-offset-1 {
   &:focus-visible {
     --tw-ring-offset-width: 1px;
@@ -1360,6 +1435,19 @@
     padding-inline: calc(var(--spacing) * 6);
   }
 }
+.sl-spreepay .aria-invalid\:border-\(--negative\) {
+  &[aria-invalid=true] {
+    border-color: var(--negative);
+  }
+}
+.sl-spreepay .aria-invalid\:ring-\(--negative\)\/20 {
+  &[aria-invalid=true] {
+    --tw-ring-color: var(--negative);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--negative) 20%, transparent);
+    }
+  }
+}
 .sl-spreepay .data-disabled\:opacity-50 {
   &[data-disabled] {
     opacity: 50%;
@@ -1583,6 +1671,27 @@
     font-size: 22px;
   }
 }
+.sl-spreepay .dark\:border-\(--b-tertiary\) {
+  &:is(.dark *) {
+    border-color: var(--b-tertiary);
+  }
+}
+.sl-spreepay .dark\:bg-\(--negative\)\/60 {
+  &:is(.dark *) {
+    background-color: var(--negative);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--negative) 60%, transparent);
+    }
+  }
+}
+.sl-spreepay .dark\:bg-\(--s-primary\)\/30 {
+  &:is(.dark *) {
+    background-color: var(--s-primary);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--s-primary) 30%, transparent);
+    }
+  }
+}
 .sl-spreepay .dark\:hover\:bg-\(--accent\)\/50 {
   &:is(.dark *) {
     &:hover {
@@ -1595,6 +1704,38 @@
     }
   }
 }
+.sl-spreepay .dark\:hover\:bg-\(--s-primary\)\/50 {
+  &:is(.dark *) {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--s-primary);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--s-primary) 50%, transparent);
+        }
+      }
+    }
+  }
+}
+.sl-spreepay .dark\:focus-visible\:ring-\(--negative\)\/40 {
+  &:is(.dark *) {
+    &:focus-visible {
+      --tw-ring-color: var(--negative);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--negative) 40%, transparent);
+      }
+    }
+  }
+}
+.sl-spreepay .dark\:aria-invalid\:ring-\(--negative\)\/40 {
+  &:is(.dark *) {
+    &[aria-invalid=true] {
+      --tw-ring-color: var(--negative);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--negative) 40%, transparent);
+      }
+    }
+  }
+}
 .sl-spreepay .\[\&_a\]\:underline {
   & a {
     text-decoration-line: underline;

package/build/index.js

@@ -8,10 +8,10 @@ import {
   getSplitAmount,
   getTransactionFee,
   useSlapiBalance
-} from "./chunk-4BM6VTMT.js";
+} from "./chunk-HZDR76ZV.js";
 import {
   Iframe3ds
-} from "./chunk-AXNTOSBU.js";
+} from "./chunk-PMTKUR3L.js";
 import {
   InfoBanner,
   LogLevel,
@@ -42,7 +42,7 @@ import {
   useSpreePayRegister,
   useSpreePaymentMethod,
   useStaticConfig
-} from "./chunk-PTEQVWLJ.js";
+} from "./chunk-NOTIAH6W.js";
 
 // src/SpreePay.tsx
 import { useCallback as useCallback8, useEffect as useEffect8, useMemo as useMemo9, useState as useState12 } from "react";
@@ -677,15 +677,15 @@ import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
 import { jsx as jsx2 } from "react/jsx-runtime";
 var buttonVariants = 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",
+  "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-(--b-tertiary) focus-visible:ring-(--b-tertiary)/50 focus-visible:ring-[3px] aria-invalid:ring-(--negative)/20 dark:aria-invalid:ring-(--negative)/40 aria-invalid:border-(--negative)",
   {
     variants: {
       variant: {
         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",
+        destructive: "bg-(--negative) text-(--inverse) shadow-xs hover:bg-(--negative)/90 focus-visible:ring-(--negative)/20 dark:focus-visible:ring-(--negative)/40 dark:bg-(--negative)/60",
+        outline: "border bg-(--s-default) shadow-xs hover:bg-(--accent) hover:text-(--brand-primary) dark:bg-(--s-primary)/30 dark:border-(--b-tertiary) dark:hover:bg-(--s-primary)/50",
+        secondary: "bg-(--secondary) text-(--inverse) shadow-xs hover:bg-(--secondary)/80",
+        ghost: "hover:bg-(--accent) hover:text-(--brand-primary) dark:hover:bg-(--accent)/50",
         link: "text-(--brand-primary) underline-offset-4 hover:underline"
       },
       size: {
@@ -723,7 +723,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-(--s-brand) data-[state=checked]:bg-(--s-brand) data-[state=checked]:text-(--inverse)",
+        "peer size-4 shrink-0 rounded-sm border border-(--b-tertiary) shadow-xs transition-shadow outline-none focus-visible:border-(--b-tertiary) focus-visible:ring-[3px] focus-visible:ring-(--b-tertiary)/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-(--negative) aria-invalid:ring-(--negative)/20 data-[state=checked]:border-(--s-brand) data-[state=checked]:bg-(--s-brand) data-[state=checked]:text-(--inverse) dark:bg-(--s-primary)/30 dark:aria-invalid:ring-(--negative)/40",
         className
       ),
       ...props,
@@ -743,9 +743,9 @@ function Checkbox({ className, ...props }) {
 import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var cardFormLogger = logger.child("card-form");
 var stripeElementClasses = {
-  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"
+  base: "w-full rounded-[12px] bg-(--s-primary) px-5 py-4 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-(--b-tertiary) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50",
+  invalid: "focus-visible:ring-(--negative)",
+  focus: "border-(--b-tertiary) ring-(--b-tertiary)/50 ring-2"
 };
 var CreditCardForm = ({ cancel, saveCard }) => {
   const [cardError, setCardError] = useState2(void 0);
@@ -847,7 +847,7 @@ var CreditCardForm = ({ cancel, saveCard }) => {
           }
         )
       ] }),
-      cardError && /* @__PURE__ */ jsx4("p", { className: "text-destructive mt-1 text-sm", children: cardError })
+      cardError && /* @__PURE__ */ jsx4("p", { className: "mt-1 text-sm text-(--negative)", children: cardError })
     ] }),
     /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ jsx4(Checkbox, { checked: shouldSaveCard, onCheckedChange: (v) => setShouldSaveCard(v === true), id: "saveCard" }),
@@ -964,9 +964,9 @@ function Input({ className, type, ...props }) {
       type,
       "data-slot": "input",
       className: cn(
-        "file:text-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-(--brand-primary) 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 placeholder:text-(--tertiary) 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",
+        "flex h-9 w-full min-w-0 rounded-md border border-(--b-tertiary) bg-transparent px-3 py-1 text-base text-(--brand-primary) 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 file:text-(--primary) placeholder:text-(--tertiary) disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-(--s-primary)/30",
+        "focus-visible:border-(--b-tertiary) focus-visible:ring-[3px] focus-visible:ring-(--b-tertiary)/50",
+        "aria-invalid:border-(--negative) aria-invalid:ring-(--negative)/20 dark:aria-invalid:ring-(--negative)/40",
         className
       ),
       ...props
@@ -1922,7 +1922,7 @@ function Slider2(props) {
           Thumb,
           {
             "data-slot": "slider-thumb",
-            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"
+            className: "block size-5 shrink-0 rounded-full border border-(--b-inverse) bg-(--primary) shadow-(--primary)/20 shadow-sm ring-(--b-tertiary)/50 transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
           },
           index
         ))
@@ -2171,12 +2171,12 @@ var CreditCardTab = () => {
         }
         return settlePaymentResult(res, failureMessage, failureCode);
       } catch (e) {
-        return Promise.reject(toPaymentError(e, failureMessage, failureCode));
+        throw toPaymentError(e, failureMessage, failureCode);
       } finally {
-        mutateBalance();
+        mutateBalance().catch(() => void 0);
         if (selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && selectedPaymentMethod.method && isNewCard(selectedPaymentMethod.method)) {
           const knownIds = new Set(cards.map((c) => c.id));
-          const updated = await mutateCards();
+          const updated = await mutateCards().catch(() => void 0);
           const newSavedCard = (updated?.data ?? []).find((c) => c.active && !knownIds.has(c.id));
           setSelectedPaymentMethod({
             ...selectedPaymentMethod,
@@ -2185,7 +2185,7 @@ var CreditCardTab = () => {
           });
           setNewCards([]);
         } else {
-          mutateCards();
+          mutateCards().catch(() => void 0);
         }
       }
     },
@@ -2284,9 +2284,9 @@ var TabButtons = (props) => {
 
 // src/SpreePayContent.tsx
 import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
-var CryptoTab = lazy(() => import("./CryptoTab-632DRL2D.js").then((module) => ({ default: module.CryptoTab })));
+var CryptoTab = lazy(() => import("./CryptoTab-ODXWUOMD.js").then((module) => ({ default: module.CryptoTab })));
 var CryptoComTab = lazy(
-  () => import("./CryptoComTab-ZAWBJUCM.js").then((module) => ({ default: module.CryptoComTab }))
+  () => import("./CryptoComTab-GL5DOJ2P.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)" }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@superlogic/spree-pay",
-  "version": "0.5.1",
+  "version": "0.5.3",
   "description": "Spree-pay React component and utilities",
   "private": false,
   "type": "module",