@superlogic/spree-pay 0.1.42 → 0.2.0

package/build/index.cjs

@@ -72,7 +72,7 @@ var PaymentType = /* @__PURE__ */ ((PaymentType2) => {
 })(PaymentType || {});
 
 // package.json
-var version = "0.1.41";
+var version = "0.2.0";
 
 // src/utils/logger.ts
 var LogLevel = /* @__PURE__ */ ((LogLevel2) => {
@@ -540,7 +540,7 @@ function Label({ className, ...props }) {
     {
       "data-slot": "label",
       className: cn(
-        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        "flex items-center gap-2 text-sm leading-none font-medium text-(--primary) select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
         className
       ),
       ...props
@@ -662,7 +662,7 @@ var PointsSwitch = (props) => {
         Boolean(appProps.topUpLink) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "a",
           {
-            className: "cursor-pointer rounded-full bg-(--primary) px-2 py-1.5 text-xs font-medium text-(--inverse)",
+            className: "cursor-pointer rounded-full bg-(--s-brand) px-2 py-1.5 text-xs font-medium text-(--inverse) hover:bg-(--s-brand-hover)",
             rel: "noreferrer",
             target: "_blank",
             href: appProps.topUpLink,
@@ -802,7 +802,7 @@ function DialogOverlay({ className, ...props }) {
     {
       "data-slot": "dialog-overlay",
       className: cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-(--overlay)",
         className
       ),
       ...props
@@ -832,7 +832,7 @@ function DialogContent({
             DialogPrimitive.Close,
             {
               "data-slot": "dialog-close",
-              className: "ring-offset-background focus:ring-ring data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-(--accent) [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+              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",
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react.XIcon, {}),
                 /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "sr-only", children: "Close" })
@@ -859,7 +859,7 @@ function DialogDescription({ className, ...props }) {
     DialogPrimitive.Description,
     {
       "data-slot": "dialog-description",
-      className: cn("text-muted-foreground text-sm", className),
+      className: cn("text-sm text-(--secondary)", className),
       ...props
     }
   );
@@ -1774,32 +1774,6 @@ function Checkbox({ className, ...props }) {
 // src/components/CreditCardTab/CreditCard/CreditCardForm.tsx
 var import_jsx_runtime15 = require("react/jsx-runtime");
 var cardFormLogger = logger.child("card-form");
-var styleDark = {
-  base: {
-    fontSize: "16px",
-    fontWeight: "500",
-    color: "rgba(255, 255, 255, 0.70)",
-    "::placeholder": {
-      color: "rgba(255, 255, 255, 0.5)"
-    }
-  },
-  invalid: {
-    color: "rgba(255, 255, 255, 0.70)"
-  }
-};
-var styleLight = {
-  base: {
-    fontSize: "16px",
-    fontWeight: "500",
-    color: "#000",
-    "::placeholder": {
-      color: "rgba(0, 0, 0, 0.5)"
-    }
-  },
-  invalid: {
-    color: "#000"
-  }
-};
 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",
@@ -1807,10 +1781,35 @@ var stripeElementClasses = {
 };
 var CreditCardForm = ({ cancel, saveCard }) => {
   const [cardError, setCardError] = (0, import_react6.useState)(void 0);
-  const { env } = useSpreePayEnv();
+  const [stripeStyles, setStripeStyles] = (0, import_react6.useState)({});
+  const formRef = (0, import_react6.useRef)(null);
   const elements = (0, import_react_stripe_js.useElements)();
   const stripe = (0, import_react_stripe_js.useStripe)();
   const id = (0, import_react6.useId)();
+  const computeStripeStyles = (0, import_react6.useCallback)(() => {
+    const formRefCurrent = formRef.current;
+    if (typeof window === "undefined" || !formRefCurrent) return {};
+    const container = formRefCurrent.closest(".sl-spreepay");
+    if (!container) return {};
+    const primary = getComputedStyle(container).getPropertyValue("--primary").trim() || "rgba(255, 255, 255, 0.70)";
+    const secondary = getComputedStyle(container).getPropertyValue("--secondary").trim() || "rgba(255, 255, 255, 0.5)";
+    return {
+      base: {
+        fontSize: "16px",
+        fontWeight: "500",
+        color: primary,
+        "::placeholder": {
+          color: secondary
+        }
+      },
+      invalid: {
+        color: primary
+      }
+    };
+  }, []);
+  (0, import_react6.useEffect)(() => {
+    setStripeStyles(computeStripeStyles());
+  }, [computeStripeStyles]);
   const handleSaveCard = async () => {
     if (!elements || !stripe) return;
     setCardError(void 0);
@@ -1845,14 +1844,13 @@ var CreditCardForm = ({ cancel, saveCard }) => {
       setCardError("An error occurred while processing your card. Please try again.");
     }
   };
-  const isDarkMode = env.tenantId === "cdc";
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex w-full flex-col gap-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { ref: formRef, className: "flex w-full flex-col gap-4", children: [
       /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         import_react_stripe_js.CardNumberElement,
         {
           options: {
-            style: isDarkMode ? styleDark : styleLight,
+            style: stripeStyles,
             placeholder: "Card Number",
             classes: stripeElementClasses
           }
@@ -1863,7 +1861,7 @@ var CreditCardForm = ({ cancel, saveCard }) => {
           import_react_stripe_js.CardExpiryElement,
           {
             options: {
-              style: isDarkMode ? styleDark : styleLight,
+              style: stripeStyles,
               placeholder: "MM / YY",
               classes: stripeElementClasses
             }
@@ -1873,7 +1871,7 @@ var CreditCardForm = ({ cancel, saveCard }) => {
           import_react_stripe_js.CardCvcElement,
           {
             options: {
-              style: isDarkMode ? styleDark : styleLight,
+              style: stripeStyles,
               placeholder: "CVV",
               classes: stripeElementClasses
             }
@@ -1974,7 +1972,7 @@ function Input({ className, type, ...props }) {
       type,
       "data-slot": "input",
       className: cn(
-        "file:text-foreground dark:bg-input/30 border-input placeholder:text-muted-foreground flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-(--primary) selection:text-(--inverse) file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "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",
         className
@@ -2974,7 +2972,7 @@ var PointsSelector = (props) => {
       disabled: isDisabled,
       onClick: onSelect,
       className: cn(
-        "cursor-pointer overflow-hidden rounded-md border-2 border-transparent opacity-50 disabled:cursor-not-allowed",
+        "cursor-pointer overflow-hidden rounded-md border-2 border-transparent disabled:cursor-not-allowed disabled:opacity-50",
         {
           "border-(--b-brand)": isSelected
         }
@@ -3271,7 +3269,7 @@ var Checkout = () => {
     {
       onClick: appProps.onProcess,
       disabled: appProps.isProcessing,
-      className: "flex flex-col items-center rounded-md bg-[#00307D] p-2 text-(--brand-primary) hover:bg-[#002655] disabled:cursor-not-allowed disabled:bg-[#002655] disabled:text-(--disabled)",
+      className: "flex flex-col items-center rounded-md bg-(--crypto-pay-bg) p-2 text-(--brand-primary) hover:bg-(--crypto-pay-bg-hover) disabled:cursor-not-allowed disabled:bg-(--crypto-pay-bg-hover) disabled:text-(--disabled)",
       children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-7 w-[76px]", fill: "none", viewBox: "0 0 76 28", children: [
         /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           "path",

package/build/index.css

@@ -21,7 +21,6 @@
       "Liberation Mono",
       "Courier New",
       monospace;
-    --color-black: #000;
     --spacing: 0.25rem;
     --container-lg: 32rem;
     --text-xs: 0.75rem;
@@ -644,6 +643,12 @@
 .sl-spreepay .bg-\(--brand-primary\) {
   background-color: var(--brand-primary);
 }
+.sl-spreepay .bg-\(--crypto-pay-bg\) {
+  background-color: var(--crypto-pay-bg);
+}
+.sl-spreepay .bg-\(--overlay\) {
+  background-color: var(--overlay);
+}
 .sl-spreepay .bg-\(--primary\) {
   background-color: var(--primary);
 }
@@ -680,15 +685,6 @@
 .sl-spreepay .bg-\(--surface-component-specific-card-default-card\) {
   background-color: var(--surface-component-specific-card-default-card);
 }
-.sl-spreepay .bg-\[\#00307D\] {
-  background-color: #00307D;
-}
-.sl-spreepay .bg-black\/50 {
-  background-color: color-mix(in srgb, #000 50%, transparent);
-  @supports (color: color-mix(in lab, red, red)) {
-    background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
-  }
-}
 .sl-spreepay .bg-transparent {
   background-color: transparent;
 }
@@ -1083,6 +1079,11 @@
     font-weight: var(--font-weight-medium);
   }
 }
+.sl-spreepay .placeholder\:text-\(--tertiary\) {
+  &::placeholder {
+    color: var(--tertiary);
+  }
+}
 .sl-spreepay .hover\:bg-\(--accent\) {
   &:hover {
     @media (hover: hover) {
@@ -1090,6 +1091,13 @@
     }
   }
 }
+.sl-spreepay .hover\:bg-\(--crypto-pay-bg-hover\) {
+  &:hover {
+    @media (hover: hover) {
+      background-color: var(--crypto-pay-bg-hover);
+    }
+  }
+}
 .sl-spreepay .hover\:bg-\(--primary\)\/90 {
   &:hover {
     @media (hover: hover) {
@@ -1138,13 +1146,6 @@
     }
   }
 }
-.sl-spreepay .hover\:bg-\[\#002655\] {
-  &:hover {
-    @media (hover: hover) {
-      background-color: #002655;
-    }
-  }
-}
 .sl-spreepay .hover\:text-\(--brand-primary\) {
   &:hover {
     @media (hover: hover) {
@@ -1271,14 +1272,14 @@
     cursor: not-allowed;
   }
 }
-.sl-spreepay .disabled\:bg-\(--s-disabled\) {
+.sl-spreepay .disabled\:bg-\(--crypto-pay-bg-hover\) {
   &:disabled {
-    background-color: var(--s-disabled);
+    background-color: var(--crypto-pay-bg-hover);
   }
 }
-.sl-spreepay .disabled\:bg-\[\#002655\] {
+.sl-spreepay .disabled\:bg-\(--s-disabled\) {
   &:disabled {
-    background-color: #002655;
+    background-color: var(--s-disabled);
   }
 }
 .sl-spreepay .disabled\:text-\(--disabled\) {
@@ -1414,6 +1415,11 @@
     background-color: var(--accent);
   }
 }
+.sl-spreepay .data-\[state\=open\]\:text-\(--secondary\) {
+  &[data-state=open] {
+    color: var(--secondary);
+  }
+}
 .sl-spreepay .data-\[state\=open\]\:fade-in-0 {
   &[data-state=open] {
     --tw-enter-opacity: calc(0/100);
@@ -1641,6 +1647,9 @@
   --border-component-specific-card: #d0d4d7;
   --surface-component-specific-card-default-card: #fff;
   --shadow-component-specific-card: rgba(0, 0, 0, 0.05);
+  --overlay: rgba(0, 0, 0, 0.4);
+  --crypto-pay-bg: #00307d;
+  --crypto-pay-bg-hover: #002655;
 }
 .sl-spreepay .sl-spreepay__portal {
   position: relative;

package/build/index.js

@@ -1,5 +1,5 @@
 // src/SpreePay.tsx
-import { useCallback as useCallback9, useEffect as useEffect12, useMemo as useMemo10, useState as useState14 } from "react";
+import { useCallback as useCallback10, useEffect as useEffect13, useMemo as useMemo10, useState as useState14 } from "react";
 import NiceModal9 from "@ebay/nice-modal-react";
 import { SWRConfig } from "swr";
 
@@ -29,7 +29,7 @@ var PaymentType = /* @__PURE__ */ ((PaymentType2) => {
 })(PaymentType || {});
 
 // package.json
-var version = "0.1.41";
+var version = "0.2.0";
 
 // src/utils/logger.ts
 var LogLevel = /* @__PURE__ */ ((LogLevel2) => {
@@ -497,7 +497,7 @@ function Label({ className, ...props }) {
     {
       "data-slot": "label",
       className: cn(
-        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        "flex items-center gap-2 text-sm leading-none font-medium text-(--primary) select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
         className
       ),
       ...props
@@ -619,7 +619,7 @@ var PointsSwitch = (props) => {
         Boolean(appProps.topUpLink) && /* @__PURE__ */ jsx7(
           "a",
           {
-            className: "cursor-pointer rounded-full bg-(--primary) px-2 py-1.5 text-xs font-medium text-(--inverse)",
+            className: "cursor-pointer rounded-full bg-(--s-brand) px-2 py-1.5 text-xs font-medium text-(--inverse) hover:bg-(--s-brand-hover)",
             rel: "noreferrer",
             target: "_blank",
             href: appProps.topUpLink,
@@ -703,7 +703,7 @@ var CheckoutButton = ({ isLoggedIn }) => {
 };
 
 // src/components/CreditCardTab/CreditCardTab.tsx
-import { useCallback as useCallback5, useEffect as useEffect7 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect8 } from "react";
 
 // src/hooks/payments/useCardPayment.ts
 import NiceModal2 from "@ebay/nice-modal-react";
@@ -759,7 +759,7 @@ function DialogOverlay({ className, ...props }) {
     {
       "data-slot": "dialog-overlay",
       className: cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-(--overlay)",
         className
       ),
       ...props
@@ -789,7 +789,7 @@ function DialogContent({
             DialogPrimitive.Close,
             {
               "data-slot": "dialog-close",
-              className: "ring-offset-background focus:ring-ring data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-(--accent) [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+              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",
               children: [
                 /* @__PURE__ */ jsx10(XIcon, {}),
                 /* @__PURE__ */ jsx10("span", { className: "sr-only", children: "Close" })
@@ -816,7 +816,7 @@ function DialogDescription({ className, ...props }) {
     DialogPrimitive.Description,
     {
       "data-slot": "dialog-description",
-      className: cn("text-muted-foreground text-sm", className),
+      className: cn("text-sm text-(--secondary)", className),
       ...props
     }
   );
@@ -1658,7 +1658,7 @@ var CardsList = ({ selectedCard, setCard }) => {
 };
 
 // src/components/CreditCardTab/CreditCard/CreditCardForm.tsx
-import { useId as useId2, useState as useState3 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect3, useId as useId2, useRef as useRef2, useState as useState3 } from "react";
 import { CardCvcElement, CardExpiryElement, CardNumberElement, useElements, useStripe } from "@stripe/react-stripe-js";
 
 // src/ui/button.tsx
@@ -1731,32 +1731,6 @@ function Checkbox({ className, ...props }) {
 // src/components/CreditCardTab/CreditCard/CreditCardForm.tsx
 import { Fragment as Fragment2, jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
 var cardFormLogger = logger.child("card-form");
-var styleDark = {
-  base: {
-    fontSize: "16px",
-    fontWeight: "500",
-    color: "rgba(255, 255, 255, 0.70)",
-    "::placeholder": {
-      color: "rgba(255, 255, 255, 0.5)"
-    }
-  },
-  invalid: {
-    color: "rgba(255, 255, 255, 0.70)"
-  }
-};
-var styleLight = {
-  base: {
-    fontSize: "16px",
-    fontWeight: "500",
-    color: "#000",
-    "::placeholder": {
-      color: "rgba(0, 0, 0, 0.5)"
-    }
-  },
-  invalid: {
-    color: "#000"
-  }
-};
 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",
@@ -1764,10 +1738,35 @@ var stripeElementClasses = {
 };
 var CreditCardForm = ({ cancel, saveCard }) => {
   const [cardError, setCardError] = useState3(void 0);
-  const { env } = useSpreePayEnv();
+  const [stripeStyles, setStripeStyles] = useState3({});
+  const formRef = useRef2(null);
   const elements = useElements();
   const stripe = useStripe();
   const id = useId2();
+  const computeStripeStyles = useCallback2(() => {
+    const formRefCurrent = formRef.current;
+    if (typeof window === "undefined" || !formRefCurrent) return {};
+    const container = formRefCurrent.closest(".sl-spreepay");
+    if (!container) return {};
+    const primary = getComputedStyle(container).getPropertyValue("--primary").trim() || "rgba(255, 255, 255, 0.70)";
+    const secondary = getComputedStyle(container).getPropertyValue("--secondary").trim() || "rgba(255, 255, 255, 0.5)";
+    return {
+      base: {
+        fontSize: "16px",
+        fontWeight: "500",
+        color: primary,
+        "::placeholder": {
+          color: secondary
+        }
+      },
+      invalid: {
+        color: primary
+      }
+    };
+  }, []);
+  useEffect3(() => {
+    setStripeStyles(computeStripeStyles());
+  }, [computeStripeStyles]);
   const handleSaveCard = async () => {
     if (!elements || !stripe) return;
     setCardError(void 0);
@@ -1802,14 +1801,13 @@ var CreditCardForm = ({ cancel, saveCard }) => {
       setCardError("An error occurred while processing your card. Please try again.");
     }
   };
-  const isDarkMode = env.tenantId === "cdc";
   return /* @__PURE__ */ jsxs9(Fragment2, { children: [
-    /* @__PURE__ */ jsxs9("div", { className: "flex w-full flex-col gap-4", children: [
+    /* @__PURE__ */ jsxs9("div", { ref: formRef, className: "flex w-full flex-col gap-4", children: [
       /* @__PURE__ */ jsx15(
         CardNumberElement,
         {
           options: {
-            style: isDarkMode ? styleDark : styleLight,
+            style: stripeStyles,
             placeholder: "Card Number",
             classes: stripeElementClasses
           }
@@ -1820,7 +1818,7 @@ var CreditCardForm = ({ cancel, saveCard }) => {
           CardExpiryElement,
           {
             options: {
-              style: isDarkMode ? styleDark : styleLight,
+              style: stripeStyles,
               placeholder: "MM / YY",
               classes: stripeElementClasses
             }
@@ -1830,7 +1828,7 @@ var CreditCardForm = ({ cancel, saveCard }) => {
           CardCvcElement,
           {
             options: {
-              style: isDarkMode ? styleDark : styleLight,
+              style: stripeStyles,
               placeholder: "CVV",
               classes: stripeElementClasses
             }
@@ -1916,7 +1914,7 @@ var CreditCard = () => {
 import { useState as useState10 } from "react";
 
 // src/components/CreditCardTab/Points/SplitBlock.tsx
-import { useCallback as useCallback4, useEffect as useEffect6, useRef as useRef6, useState as useState9 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect7, useRef as useRef7, useState as useState9 } from "react";
 import { BUILD_ENV as BUILD_ENV2 } from "@mocanetwork/airkit";
 
 // src/components/CreditCardTab/Points/PointsSelector.tsx
@@ -1931,7 +1929,7 @@ function Input({ className, type, ...props }) {
       type,
       "data-slot": "input",
       className: cn(
-        "file:text-foreground dark:bg-input/30 border-input placeholder:text-muted-foreground flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-(--primary) selection:text-(--inverse) file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "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",
         className
@@ -2931,7 +2929,7 @@ var PointsSelector = (props) => {
       disabled: isDisabled,
       onClick: onSelect,
       className: cn(
-        "cursor-pointer overflow-hidden rounded-md border-2 border-transparent opacity-50 disabled:cursor-not-allowed",
+        "cursor-pointer overflow-hidden rounded-md border-2 border-transparent disabled:cursor-not-allowed disabled:opacity-50",
         {
           "border-(--b-brand)": isSelected
         }
@@ -3010,8 +3008,8 @@ var SplitBlock = (props) => {
   const [walletReady, setWalletReady] = useState9(false);
   const { pointsConversionRatio, pointsTitle } = spreePayConfig || {};
   const { env } = useSpreePayEnv();
-  const prevPointsChainRef = useRef6(spreePayConfig?.pointsChain);
-  const initWallet = useCallback4(
+  const prevPointsChainRef = useRef7(spreePayConfig?.pointsChain);
+  const initWallet = useCallback5(
     async (pointsChain) => {
       if (!pointsChain) return;
       try {
@@ -3034,7 +3032,7 @@ var SplitBlock = (props) => {
     },
     [onToggle, env.environment]
   );
-  useEffect6(() => {
+  useEffect7(() => {
     if (!env.useWeb3Points) return;
     const pointsChainChanged = prevPointsChainRef.current !== spreePayConfig?.pointsChain;
     prevPointsChainRef.current = spreePayConfig?.pointsChain;
@@ -3111,7 +3109,7 @@ var CreditCardTab = () => {
   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;
@@ -3150,7 +3148,7 @@ var CreditCardTab = () => {
       mutateBalance
     ]
   );
-  useEffect7(() => {
+  useEffect8(() => {
     register(handlePay);
   }, [register, handlePay]);
   return /* @__PURE__ */ jsxs16("div", { children: [
@@ -3160,7 +3158,7 @@ var CreditCardTab = () => {
 };
 
 // src/components/CryptoComTab/CryptoComTab.tsx
-import { useCallback as useCallback6, useEffect as useEffect8 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect9 } from "react";
 
 // src/hooks/payments/useCryptoComPayment.ts
 import NiceModal5 from "@ebay/nice-modal-react";
@@ -3228,7 +3226,7 @@ var Checkout = () => {
     {
       onClick: appProps.onProcess,
       disabled: appProps.isProcessing,
-      className: "flex flex-col items-center rounded-md bg-[#00307D] p-2 text-(--brand-primary) hover:bg-[#002655] disabled:cursor-not-allowed disabled:bg-[#002655] disabled:text-(--disabled)",
+      className: "flex flex-col items-center rounded-md bg-(--crypto-pay-bg) p-2 text-(--brand-primary) hover:bg-(--crypto-pay-bg-hover) disabled:cursor-not-allowed disabled:bg-(--crypto-pay-bg-hover) disabled:text-(--disabled)",
       children: /* @__PURE__ */ jsxs17("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-7 w-[76px]", fill: "none", viewBox: "0 0 76 28", children: [
         /* @__PURE__ */ jsx29(
           "path",
@@ -3286,7 +3284,7 @@ var CryptoComTab = () => {
   const { register } = useSpreePayRegister();
   const { cryptoComPayment } = useCryptoComPayment();
   const { spreePayConfig } = useSpreePayConfig();
-  const handlePay = useCallback6(
+  const handlePay = useCallback7(
     async (data) => {
       try {
         const res = await cryptoComPayment(data);
@@ -3300,7 +3298,7 @@ var CryptoComTab = () => {
     },
     [cryptoComPayment]
   );
-  useEffect8(() => {
+  useEffect9(() => {
     register(handlePay);
   }, [register, handlePay]);
   return /* @__PURE__ */ jsxs18("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: [
@@ -3320,7 +3318,7 @@ import { WagmiProvider } from "wagmi";
 import { base } from "wagmi/chains";
 
 // src/components/CryptoTab/Crypto/Crypto.tsx
-import { useCallback as useCallback7, useEffect as useEffect10 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect11 } from "react";
 import { useAccount as useAccount3 } from "wagmi";
 
 // ../../node_modules/@wagmi/core/dist/esm/utils/getAction.js
@@ -4053,7 +4051,7 @@ var Crypto = () => {
   const { spreePayConfig } = useSpreePayConfig();
   const isWalletConnected = Boolean(address);
   const { register } = useSpreePayRegister();
-  const handlePay = useCallback7(
+  const handlePay = useCallback8(
     async (data) => {
       try {
         const res = await cryptoPayment(data);
@@ -4067,7 +4065,7 @@ var Crypto = () => {
     },
     [cryptoPayment]
   );
-  useEffect10(() => {
+  useEffect11(() => {
     register(handlePay);
   }, [register, handlePay]);
   return /* @__PURE__ */ jsxs25("div", { className: "flex flex-col items-baseline gap-4", children: [
@@ -4265,21 +4263,21 @@ var ErrorBoundary = class extends Component {
 };
 
 // src/hooks/useKeycloakSSO.ts
-import { useCallback as useCallback8, useEffect as useEffect11, useRef as useRef7, useState as useState13 } from "react";
+import { useCallback as useCallback9, useEffect as useEffect12, useRef as useRef8, useState as useState13 } from "react";
 import Keycloak from "keycloak-js";
 var refreshAheadSeconds = 60;
 var keycloakLogger = logger.child("keycloak");
 function useKeycloakSSO(config2) {
   const { url, realm, clientId, ssoPageURI, enabled } = config2;
-  const initRef = useRef7(false);
-  const kcRef = useRef7(null);
-  const refreshTimerRef = useRef7(null);
-  const scheduleRefreshRef = useRef7(() => {
+  const initRef = useRef8(false);
+  const kcRef = useRef8(null);
+  const refreshTimerRef = useRef8(null);
+  const scheduleRefreshRef = useRef8(() => {
   });
   const [error, setError] = useState13(null);
   const [isChecking, setIsChecking] = useState13(enabled);
   const [accessToken, setAccessToken] = useState13(null);
-  const scheduleRefresh = useCallback8(() => {
+  const scheduleRefresh = useCallback9(() => {
     const kc = kcRef.current;
     if (!kc || !kc.tokenParsed || !kc.tokenParsed.exp) {
       return;
@@ -4303,10 +4301,10 @@ function useKeycloakSSO(config2) {
       });
     }, delayMs);
   }, []);
-  useEffect11(() => {
+  useEffect12(() => {
     scheduleRefreshRef.current = scheduleRefresh;
   }, [scheduleRefresh]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (initRef.current || !enabled) return;
     initRef.current = true;
     const kc = new Keycloak({ url, realm, clientId });
@@ -4343,13 +4341,13 @@ function useKeycloakSSO(config2) {
 import { jsx as jsx47, jsxs as jsxs30 } from "react/jsx-runtime";
 var SpreePayInner = () => {
   const [portalEl, setPortalEl] = useState14(null);
-  const rootRef = useCallback9((node) => {
+  const rootRef = useCallback10((node) => {
     if (!node) return;
     const el = node.querySelector(":scope > .sl-spreepay__portal");
     setPortalEl(el ?? null);
   }, []);
   const { env } = useSpreePayEnv();
-  useEffect12(() => {
+  useEffect13(() => {
     configureLogger({ environment: env.environment });
     logger.logVersion();
   }, [env.environment]);
@@ -4363,7 +4361,7 @@ var SpreePayInner = () => {
     enabled: !env?.accessToken
   });
   const _accessToken = env.accessToken ?? accessToken;
-  const unauthenticatedFetcher = useCallback9(() => Promise.resolve(null), []);
+  const unauthenticatedFetcher = useCallback10(() => Promise.resolve(null), []);
   const slapiFetcher = useMemo10(() => {
     if (_accessToken) {
       return registerApi({
@@ -4404,9 +4402,9 @@ var SpreePay = (props) => {
 };
 
 // src/hooks/useCapture3DS.ts
-import { useEffect as useEffect13 } from "react";
+import { useEffect as useEffect14 } from "react";
 var useCapture3DS = (searchParams) => {
-  useEffect13(() => {
+  useEffect14(() => {
     if (typeof window !== "undefined" && window.parent && searchParams?.paymentIntent) {
       window.parent.SP_EVENT_BUS?.emit("paymentIntent", { paymentIntent: searchParams.paymentIntent });
     }

package/package.json

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