@superlogic/spree-pay 0.1.42 → 0.2.1

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;
@@ -458,6 +457,9 @@
 .sl-spreepay .w-full {
   width: 100%;
 }
+.sl-spreepay .max-w-\[180px\] {
+  max-width: 180px;
+}
 .sl-spreepay .max-w-\[540px\] {
   max-width: 540px;
 }
@@ -473,6 +475,9 @@
 .sl-spreepay .min-w-\[50px\] {
   min-width: 50px;
 }
+.sl-spreepay .min-w-\[120px\] {
+  min-width: 120px;
+}
 .sl-spreepay .flex-1 {
   flex: 1;
 }
@@ -556,6 +561,9 @@
 .sl-spreepay .overflow-hidden {
   overflow: hidden;
 }
+.sl-spreepay .overflow-x-scroll {
+  overflow-x: scroll;
+}
 .sl-spreepay .overflow-y-auto {
   overflow-y: auto;
 }
@@ -603,6 +611,10 @@
   border-style: var(--tw-border-style);
   border-width: 2px;
 }
+.sl-spreepay .border-4 {
+  border-style: var(--tw-border-style);
+  border-width: 4px;
+}
 .sl-spreepay .border-r {
   border-right-style: var(--tw-border-style);
   border-right-width: 1px;
@@ -638,12 +650,21 @@
 .sl-spreepay .border-transparent {
   border-color: transparent;
 }
+.sl-spreepay .border-t-\(--brand-primary\) {
+  border-top-color: var(--brand-primary);
+}
 .sl-spreepay .border-b-\(--border-component-specific-card\) {
   border-bottom-color: var(--border-component-specific-card);
 }
 .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 +701,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;
 }
@@ -746,12 +758,18 @@
 .sl-spreepay .py-5 {
   padding-block: calc(var(--spacing) * 5);
 }
+.sl-spreepay .py-8 {
+  padding-block: calc(var(--spacing) * 8);
+}
 .sl-spreepay .pt-5 {
   padding-top: calc(var(--spacing) * 5);
 }
 .sl-spreepay .pb-2 {
   padding-bottom: calc(var(--spacing) * 2);
 }
+.sl-spreepay .pb-3 {
+  padding-bottom: calc(var(--spacing) * 3);
+}
 .sl-spreepay .pb-5 {
   padding-bottom: calc(var(--spacing) * 5);
 }
@@ -863,6 +881,9 @@
 .sl-spreepay .text-\(--tertiary\) {
   color: var(--tertiary);
 }
+.sl-spreepay .text-\(--text-tertiary\) {
+  color: var(--text-tertiary);
+}
 .sl-spreepay .text-\(--warning\) {
   color: var(--warning);
 }
@@ -1083,6 +1104,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 +1116,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 +1171,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 +1297,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 +1440,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);
@@ -1513,6 +1544,11 @@
     padding-top: calc(var(--spacing) * 6);
   }
 }
+.sl-spreepay .md\:pb-5 {
+  @media (width >= 48rem) {
+    padding-bottom: calc(var(--spacing) * 5);
+  }
+}
 .sl-spreepay .md\:pb-7 {
   @media (width >= 48rem) {
     padding-bottom: calc(var(--spacing) * 7);
@@ -1641,6 +1677,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;