@superlogic/spree-pay 0.1.35 → 0.1.36

package/build/index.css

@@ -47,6 +47,7 @@
     --font-weight-semibold: 600;
     --radius-xs: 0.125rem;
     --radius-3xl: 1.5rem;
+    --radius-4xl: 2rem;
     --animate-spin: spin 1s linear infinite;
     --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
     --default-transition-duration: 150ms;
@@ -309,9 +310,6 @@
 .sl-spreepay .mt-1 {
   margin-top: calc(var(--spacing) * 1);
 }
-.sl-spreepay .mt-4 {
-  margin-top: calc(var(--spacing) * 4);
-}
 .sl-spreepay .mr-1 {
   margin-right: calc(var(--spacing) * 1);
 }
@@ -339,6 +337,10 @@
 .sl-spreepay .inline-flex {
   display: inline-flex;
 }
+.sl-spreepay .size-2\.5 {
+  width: calc(var(--spacing) * 2.5);
+  height: calc(var(--spacing) * 2.5);
+}
 .sl-spreepay .size-3\.5 {
   width: calc(var(--spacing) * 3.5);
   height: calc(var(--spacing) * 3.5);
@@ -371,18 +373,9 @@
   width: calc(var(--spacing) * 16);
   height: calc(var(--spacing) * 16);
 }
-.sl-spreepay .h-2\.5 {
-  height: calc(var(--spacing) * 2.5);
-}
 .sl-spreepay .h-4 {
   height: calc(var(--spacing) * 4);
 }
-.sl-spreepay .h-5 {
-  height: calc(var(--spacing) * 5);
-}
-.sl-spreepay .h-6 {
-  height: calc(var(--spacing) * 6);
-}
 .sl-spreepay .h-8 {
   height: calc(var(--spacing) * 8);
 }
@@ -407,9 +400,6 @@
 .sl-spreepay .h-\[58px\] {
   height: 58px;
 }
-.sl-spreepay .h-\[60px\] {
-  height: 60px;
-}
 .sl-spreepay .h-\[135px\] {
   height: 135px;
 }
@@ -434,12 +424,6 @@
 .sl-spreepay .min-h-11 {
   min-height: calc(var(--spacing) * 11);
 }
-.sl-spreepay .w-2\.5 {
-  width: calc(var(--spacing) * 2.5);
-}
-.sl-spreepay .w-5 {
-  width: calc(var(--spacing) * 5);
-}
 .sl-spreepay .w-6 {
   width: calc(var(--spacing) * 6);
 }
@@ -473,9 +457,6 @@
 .sl-spreepay .flex-1 {
   flex: 1;
 }
-.sl-spreepay .flex-shrink-0 {
-  flex-shrink: 0;
-}
 .sl-spreepay .shrink-0 {
   flex-shrink: 0;
 }
@@ -559,6 +540,9 @@
 .sl-spreepay .rounded-3xl {
   border-radius: var(--radius-3xl);
 }
+.sl-spreepay .rounded-4xl {
+  border-radius: var(--radius-4xl);
+}
 .sl-spreepay .rounded-\[4px\] {
   border-radius: 4px;
 }
@@ -596,22 +580,10 @@
   border-style: var(--tw-border-style);
   border-width: 0px;
 }
-.sl-spreepay .border-1 {
-  border-style: var(--tw-border-style);
-  border-width: 1px;
-}
 .sl-spreepay .border-b {
   border-bottom-style: var(--tw-border-style);
   border-bottom-width: 1px;
 }
-.sl-spreepay .border-b-1 {
-  border-bottom-style: var(--tw-border-style);
-  border-bottom-width: 1px;
-}
-.sl-spreepay .\!border-l-0 {
-  border-left-style: var(--tw-border-style) !important;
-  border-left-width: 0px !important;
-}
 .sl-spreepay .border-l-0\! {
   border-left-style: var(--tw-border-style) !important;
   border-left-width: 0px !important;
@@ -742,6 +714,9 @@
 .sl-spreepay .p-1\.5 {
   padding: calc(var(--spacing) * 1.5);
 }
+.sl-spreepay .p-4 {
+  padding: calc(var(--spacing) * 4);
+}
 .sl-spreepay .p-6 {
   padding: calc(var(--spacing) * 6);
 }
@@ -835,6 +810,10 @@
   font-size: var(--text-xs);
   line-height: var(--tw-leading, var(--text-xs--line-height));
 }
+.sl-spreepay .leading-6 {
+  --tw-leading: calc(var(--spacing) * 6);
+  line-height: calc(var(--spacing) * 6);
+}
 .sl-spreepay .leading-\[1\.3\] {
   --tw-leading: 1.3;
   line-height: 1.3;
@@ -851,10 +830,6 @@
   --tw-leading: 34px;
   line-height: 34px;
 }
-.sl-spreepay .leading-\[60px\] {
-  --tw-leading: 60px;
-  line-height: 60px;
-}
 .sl-spreepay .leading-none {
   --tw-leading: 1;
   line-height: 1;
@@ -870,6 +845,9 @@
 .sl-spreepay .whitespace-nowrap {
   white-space: nowrap;
 }
+.sl-spreepay .text-\[\#45505B\] {
+  color: #45505B;
+}
 .sl-spreepay .text-black {
   color: var(--color-black);
 }
@@ -1036,93 +1014,93 @@
   user-select: none;
 }
 .sl-spreepay .group-data-\[disabled\=true\]\:pointer-events-none {
-  .sl-spreepay &:is(:where(.group)[data-disabled=true] *) {
+  &:is(:where(.group)[data-disabled=true] *) {
     pointer-events: none;
   }
 }
 .sl-spreepay .group-data-\[disabled\=true\]\:opacity-50 {
-  .sl-spreepay &:is(:where(.group)[data-disabled=true] *) {
+  &:is(:where(.group)[data-disabled=true] *) {
     opacity: 50%;
   }
 }
 .sl-spreepay .peer-disabled\:cursor-not-allowed {
-  .sl-spreepay &:is(:where(.peer):disabled ~ *) {
+  &:is(:where(.peer):disabled ~ *) {
     cursor: not-allowed;
   }
 }
 .sl-spreepay .peer-disabled\:opacity-50 {
-  .sl-spreepay &:is(:where(.peer):disabled ~ *) {
+  &:is(:where(.peer):disabled ~ *) {
     opacity: 50%;
   }
 }
 .sl-spreepay .selection\:bg-primary {
-  .sl-spreepay & *::selection {
+  & *::selection {
     background-color: var(--primary);
   }
-  .sl-spreepay &::selection {
+  &::selection {
     background-color: var(--primary);
   }
 }
 .sl-spreepay .selection\:text-primary-foreground {
-  .sl-spreepay & *::selection {
+  & *::selection {
     color: var(--primary-foreground);
   }
-  .sl-spreepay &::selection {
+  &::selection {
     color: var(--primary-foreground);
   }
 }
 .sl-spreepay .file\:inline-flex {
-  .sl-spreepay &::file-selector-button {
+  &::file-selector-button {
     display: inline-flex;
   }
 }
 .sl-spreepay .file\:h-7 {
-  .sl-spreepay &::file-selector-button {
+  &::file-selector-button {
     height: calc(var(--spacing) * 7);
   }
 }
 .sl-spreepay .file\:border-0 {
-  .sl-spreepay &::file-selector-button {
+  &::file-selector-button {
     border-style: var(--tw-border-style);
     border-width: 0px;
   }
 }
 .sl-spreepay .file\:bg-transparent {
-  .sl-spreepay &::file-selector-button {
+  &::file-selector-button {
     background-color: transparent;
   }
 }
 .sl-spreepay .file\:text-sm {
-  .sl-spreepay &::file-selector-button {
+  &::file-selector-button {
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
   }
 }
 .sl-spreepay .file\:font-medium {
-  .sl-spreepay &::file-selector-button {
+  &::file-selector-button {
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
   }
 }
 .sl-spreepay .file\:text-foreground {
-  .sl-spreepay &::file-selector-button {
+  &::file-selector-button {
     color: var(--foreground);
   }
 }
 .sl-spreepay .placeholder\:text-muted-foreground {
-  .sl-spreepay &::placeholder {
+  &::placeholder {
     color: var(--muted-foreground);
   }
 }
 .sl-spreepay .hover\:bg-accent {
-  .sl-spreepay &:hover {
+  &:hover {
     @media (hover: hover) {
       background-color: var(--accent);
     }
   }
 }
 .sl-spreepay .hover\:bg-destructive\/90 {
-  .sl-spreepay &:hover {
+  &:hover {
     @media (hover: hover) {
       background-color: var(--destructive);
       @supports (color: color-mix(in lab, red, red)) {
@@ -1132,21 +1110,21 @@
   }
 }
 .sl-spreepay .hover\:bg-gray-100 {
-  .sl-spreepay &:hover {
+  &:hover {
     @media (hover: hover) {
       background-color: var(--color-gray-100);
     }
   }
 }
 .sl-spreepay .hover\:bg-gray-300 {
-  .sl-spreepay &:hover {
+  &:hover {
     @media (hover: hover) {
       background-color: var(--color-gray-300);
     }
   }
 }
 .sl-spreepay .hover\:bg-primary\/90 {
-  .sl-spreepay &:hover {
+  &:hover {
     @media (hover: hover) {
       background-color: var(--primary);
       @supports (color: color-mix(in lab, red, red)) {
@@ -1156,7 +1134,7 @@
   }
 }
 .sl-spreepay .hover\:bg-secondary\/80 {
-  .sl-spreepay &:hover {
+  &:hover {
     @media (hover: hover) {
       background-color: var(--secondary);
       @supports (color: color-mix(in lab, red, red)) {
@@ -1166,28 +1144,28 @@
   }
 }
 .sl-spreepay .hover\:text-accent-foreground {
-  .sl-spreepay &:hover {
+  &:hover {
     @media (hover: hover) {
       color: var(--accent-foreground);
     }
   }
 }
 .sl-spreepay .hover\:underline {
-  .sl-spreepay &:hover {
+  &:hover {
     @media (hover: hover) {
       text-decoration-line: underline;
     }
   }
 }
 .sl-spreepay .hover\:opacity-100 {
-  .sl-spreepay &:hover {
+  &:hover {
     @media (hover: hover) {
       opacity: 100%;
     }
   }
 }
 .sl-spreepay .hover\:ring-4 {
-  .sl-spreepay &:hover {
+  &:hover {
     @media (hover: hover) {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
       box-shadow:
@@ -1200,7 +1178,7 @@
   }
 }
 .sl-spreepay .focus\:ring-2 {
-  .sl-spreepay &:focus {
+  &:focus {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow:
       var(--tw-inset-shadow),
@@ -1211,18 +1189,18 @@
   }
 }
 .sl-spreepay .focus\:ring-ring {
-  .sl-spreepay &:focus {
+  &:focus {
     --tw-ring-color: var(--ring);
   }
 }
 .sl-spreepay .focus\:ring-offset-2 {
-  .sl-spreepay &:focus {
+  &:focus {
     --tw-ring-offset-width: 2px;
     --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   }
 }
 .sl-spreepay .focus\:outline-hidden {
-  .sl-spreepay &:focus {
+  &:focus {
     --tw-outline-style: none;
     outline-style: none;
     @media (forced-colors: active) {
@@ -1232,12 +1210,12 @@
   }
 }
 .sl-spreepay .focus-visible\:border-ring {
-  .sl-spreepay &:focus-visible {
+  &:focus-visible {
     border-color: var(--ring);
   }
 }
 .sl-spreepay .focus-visible\:ring-1 {
-  .sl-spreepay &:focus-visible {
+  &:focus-visible {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow:
       var(--tw-inset-shadow),
@@ -1248,7 +1226,7 @@
   }
 }
 .sl-spreepay .focus-visible\:ring-4 {
-  .sl-spreepay &:focus-visible {
+  &:focus-visible {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow:
       var(--tw-inset-shadow),
@@ -1259,7 +1237,7 @@
   }
 }
 .sl-spreepay .focus-visible\:ring-\[3px\] {
-  .sl-spreepay &:focus-visible {
+  &:focus-visible {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow:
       var(--tw-inset-shadow),
@@ -1270,12 +1248,12 @@
   }
 }
 .sl-spreepay .focus-visible\:ring-destructive {
-  .sl-spreepay &:focus-visible {
+  &:focus-visible {
     --tw-ring-color: var(--destructive);
   }
 }
 .sl-spreepay .focus-visible\:ring-destructive\/20 {
-  .sl-spreepay &:focus-visible {
+  &:focus-visible {
     --tw-ring-color: var(--destructive);
     @supports (color: color-mix(in lab, red, red)) {
       --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
@@ -1283,12 +1261,12 @@
   }
 }
 .sl-spreepay .focus-visible\:ring-ring {
-  .sl-spreepay &:focus-visible {
+  &:focus-visible {
     --tw-ring-color: var(--ring);
   }
 }
 .sl-spreepay .focus-visible\:ring-ring\/50 {
-  .sl-spreepay &:focus-visible {
+  &:focus-visible {
     --tw-ring-color: var(--ring);
     @supports (color: color-mix(in lab, red, red)) {
       --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
@@ -1296,13 +1274,13 @@
   }
 }
 .sl-spreepay .focus-visible\:ring-offset-1 {
-  .sl-spreepay &:focus-visible {
+  &:focus-visible {
     --tw-ring-offset-width: 1px;
     --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   }
 }
 .sl-spreepay .focus-visible\:outline-hidden {
-  .sl-spreepay &:focus-visible {
+  &:focus-visible {
     --tw-outline-style: none;
     outline-style: none;
     @media (forced-colors: active) {
@@ -1312,53 +1290,53 @@
   }
 }
 .sl-spreepay .focus-visible\:outline-none {
-  .sl-spreepay &:focus-visible {
+  &:focus-visible {
     --tw-outline-style: none;
     outline-style: none;
   }
 }
 .sl-spreepay .disabled\:pointer-events-none {
-  .sl-spreepay &:disabled {
+  &:disabled {
     pointer-events: none;
   }
 }
 .sl-spreepay .disabled\:cursor-not-allowed {
-  .sl-spreepay &:disabled {
+  &:disabled {
     cursor: not-allowed;
   }
 }
 .sl-spreepay .disabled\:opacity-50 {
-  .sl-spreepay &:disabled {
+  &:disabled {
     opacity: 50%;
   }
 }
 .sl-spreepay .has-\[\>svg\]\:px-2\.5 {
-  .sl-spreepay &:has(> svg) {
+  &:has(> svg) {
     padding-inline: calc(var(--spacing) * 2.5);
   }
 }
 .sl-spreepay .has-\[\>svg\]\:px-3 {
-  .sl-spreepay &:has(> svg) {
+  &:has(> svg) {
     padding-inline: calc(var(--spacing) * 3);
   }
 }
 .sl-spreepay .has-\[\>svg\]\:px-4 {
-  .sl-spreepay &:has(> svg) {
+  &:has(> svg) {
     padding-inline: calc(var(--spacing) * 4);
   }
 }
 .sl-spreepay .has-\[\>svg\]\:px-6 {
-  .sl-spreepay &:has(> svg) {
+  &:has(> svg) {
     padding-inline: calc(var(--spacing) * 6);
   }
 }
 .sl-spreepay .aria-invalid\:border-destructive {
-  .sl-spreepay &[aria-invalid=true] {
+  &[aria-invalid=true] {
     border-color: var(--destructive);
   }
 }
 .sl-spreepay .aria-invalid\:ring-destructive\/20 {
-  .sl-spreepay &[aria-invalid=true] {
+  &[aria-invalid=true] {
     --tw-ring-color: var(--destructive);
     @supports (color: color-mix(in lab, red, red)) {
       --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
@@ -1366,128 +1344,128 @@
   }
 }
 .sl-spreepay .data-\[disabled\]\:opacity-50 {
-  .sl-spreepay &[data-disabled] {
+  &[data-disabled] {
     opacity: 50%;
   }
 }
 .sl-spreepay .data-\[orientation\=horizontal\]\:h-1\.5 {
-  .sl-spreepay &[data-orientation=horizontal] {
+  &[data-orientation=horizontal] {
     height: calc(var(--spacing) * 1.5);
   }
 }
 .sl-spreepay .data-\[orientation\=horizontal\]\:h-full {
-  .sl-spreepay &[data-orientation=horizontal] {
+  &[data-orientation=horizontal] {
     height: 100%;
   }
 }
 .sl-spreepay .data-\[orientation\=horizontal\]\:w-full {
-  .sl-spreepay &[data-orientation=horizontal] {
+  &[data-orientation=horizontal] {
     width: 100%;
   }
 }
 .sl-spreepay .data-\[orientation\=vertical\]\:h-full {
-  .sl-spreepay &[data-orientation=vertical] {
+  &[data-orientation=vertical] {
     height: 100%;
   }
 }
 .sl-spreepay .data-\[orientation\=vertical\]\:min-h-44 {
-  .sl-spreepay &[data-orientation=vertical] {
+  &[data-orientation=vertical] {
     min-height: calc(var(--spacing) * 44);
   }
 }
 .sl-spreepay .data-\[orientation\=vertical\]\:w-1\.5 {
-  .sl-spreepay &[data-orientation=vertical] {
+  &[data-orientation=vertical] {
     width: calc(var(--spacing) * 1.5);
   }
 }
 .sl-spreepay .data-\[orientation\=vertical\]\:w-auto {
-  .sl-spreepay &[data-orientation=vertical] {
+  &[data-orientation=vertical] {
     width: auto;
   }
 }
 .sl-spreepay .data-\[orientation\=vertical\]\:w-full {
-  .sl-spreepay &[data-orientation=vertical] {
+  &[data-orientation=vertical] {
     width: 100%;
   }
 }
 .sl-spreepay .data-\[orientation\=vertical\]\:flex-col {
-  .sl-spreepay &[data-orientation=vertical] {
+  &[data-orientation=vertical] {
     flex-direction: column;
   }
 }
 .sl-spreepay .data-\[state\=checked\]\:translate-x-\[calc\(100\%-2px\)\] {
-  .sl-spreepay &[data-state=checked] {
+  &[data-state=checked] {
     --tw-translate-x: calc(100% - 2px);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
 }
 .sl-spreepay .data-\[state\=checked\]\:border-primary {
-  .sl-spreepay &[data-state=checked] {
+  &[data-state=checked] {
     border-color: var(--primary);
   }
 }
 .sl-spreepay .data-\[state\=checked\]\:bg-primary {
-  .sl-spreepay &[data-state=checked] {
+  &[data-state=checked] {
     background-color: var(--primary);
   }
 }
 .sl-spreepay .data-\[state\=checked\]\:text-primary-foreground {
-  .sl-spreepay &[data-state=checked] {
+  &[data-state=checked] {
     color: var(--primary-foreground);
   }
 }
 .sl-spreepay .data-\[state\=closed\]\:animate-out {
-  .sl-spreepay &[data-state=closed] {
+  &[data-state=closed] {
     animation: exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
   }
 }
 .sl-spreepay .data-\[state\=closed\]\:fade-out-0 {
-  .sl-spreepay &[data-state=closed] {
+  &[data-state=closed] {
     --tw-exit-opacity: calc(0/100);
     --tw-exit-opacity: 0;
   }
 }
 .sl-spreepay .data-\[state\=closed\]\:zoom-out-95 {
-  .sl-spreepay &[data-state=closed] {
+  &[data-state=closed] {
     --tw-exit-scale: calc(95*1%);
     --tw-exit-scale: .95;
   }
 }
 .sl-spreepay .data-\[state\=open\]\:animate-in {
-  .sl-spreepay &[data-state=open] {
+  &[data-state=open] {
     animation: enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
   }
 }
 .sl-spreepay .data-\[state\=open\]\:bg-accent {
-  .sl-spreepay &[data-state=open] {
+  &[data-state=open] {
     background-color: var(--accent);
   }
 }
 .sl-spreepay .data-\[state\=open\]\:text-muted-foreground {
-  .sl-spreepay &[data-state=open] {
+  &[data-state=open] {
     color: var(--muted-foreground);
   }
 }
 .sl-spreepay .data-\[state\=open\]\:fade-in-0 {
-  .sl-spreepay &[data-state=open] {
+  &[data-state=open] {
     --tw-enter-opacity: calc(0/100);
     --tw-enter-opacity: 0;
   }
 }
 .sl-spreepay .data-\[state\=open\]\:zoom-in-95 {
-  .sl-spreepay &[data-state=open] {
+  &[data-state=open] {
     --tw-enter-scale: calc(95*1%);
     --tw-enter-scale: .95;
   }
 }
 .sl-spreepay .data-\[state\=unchecked\]\:translate-x-0 {
-  .sl-spreepay &[data-state=unchecked] {
+  &[data-state=unchecked] {
     --tw-translate-x: calc(var(--spacing) * 0);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
 }
 .sl-spreepay .data-\[state\=unchecked\]\:bg-input {
-  .sl-spreepay &[data-state=unchecked] {
+  &[data-state=unchecked] {
     background-color: var(--input);
   }
 }
@@ -1585,12 +1563,12 @@
   }
 }
 .sl-spreepay .dark\:border-input {
-  .sl-spreepay &:is(.dark *) {
+  &:is(.dark *) {
     border-color: var(--input);
   }
 }
 .sl-spreepay .dark\:bg-destructive\/60 {
-  .sl-spreepay &:is(.dark *) {
+  &:is(.dark *) {
     background-color: var(--destructive);
     @supports (color: color-mix(in lab, red, red)) {
       background-color: color-mix(in oklab, var(--destructive) 60%, transparent);
@@ -1598,7 +1576,7 @@
   }
 }
 .sl-spreepay .dark\:bg-input\/30 {
-  .sl-spreepay &:is(.dark *) {
+  &:is(.dark *) {
     background-color: var(--input);
     @supports (color: color-mix(in lab, red, red)) {
       background-color: color-mix(in oklab, var(--input) 30%, transparent);
@@ -1606,8 +1584,8 @@
   }
 }
 .sl-spreepay .dark\:hover\:bg-accent\/50 {
-  .sl-spreepay &:is(.dark *) {
-    .sl-spreepay &:hover {
+  &:is(.dark *) {
+    &:hover {
       @media (hover: hover) {
         background-color: var(--accent);
         @supports (color: color-mix(in lab, red, red)) {
@@ -1618,8 +1596,8 @@
   }
 }
 .sl-spreepay .dark\:hover\:bg-input\/50 {
-  .sl-spreepay &:is(.dark *) {
-    .sl-spreepay &:hover {
+  &:is(.dark *) {
+    &:hover {
       @media (hover: hover) {
         background-color: var(--input);
         @supports (color: color-mix(in lab, red, red)) {
@@ -1630,8 +1608,8 @@
   }
 }
 .sl-spreepay .dark\:focus-visible\:ring-destructive\/40 {
-  .sl-spreepay &:is(.dark *) {
-    .sl-spreepay &:focus-visible {
+  &:is(.dark *) {
+    &:focus-visible {
       --tw-ring-color: var(--destructive);
       @supports (color: color-mix(in lab, red, red)) {
         --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
@@ -1640,8 +1618,8 @@
   }
 }
 .sl-spreepay .dark\:aria-invalid\:ring-destructive\/40 {
-  .sl-spreepay &:is(.dark *) {
-    .sl-spreepay &[aria-invalid=true] {
+  &:is(.dark *) {
+    &[aria-invalid=true] {
       --tw-ring-color: var(--destructive);
       @supports (color: color-mix(in lab, red, red)) {
         --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
@@ -1650,29 +1628,29 @@
   }
 }
 .sl-spreepay .dark\:data-\[state\=checked\]\:bg-primary {
-  .sl-spreepay &:is(.dark *) {
-    .sl-spreepay &[data-state=checked] {
+  &:is(.dark *) {
+    &[data-state=checked] {
       background-color: var(--primary);
     }
   }
 }
 .sl-spreepay .dark\:data-\[state\=checked\]\:bg-primary-foreground {
-  .sl-spreepay &:is(.dark *) {
-    .sl-spreepay &[data-state=checked] {
+  &:is(.dark *) {
+    &[data-state=checked] {
       background-color: var(--primary-foreground);
     }
   }
 }
 .sl-spreepay .dark\:data-\[state\=unchecked\]\:bg-foreground {
-  .sl-spreepay &:is(.dark *) {
-    .sl-spreepay &[data-state=unchecked] {
+  &:is(.dark *) {
+    &[data-state=unchecked] {
       background-color: var(--foreground);
     }
   }
 }
 .sl-spreepay .dark\:data-\[state\=unchecked\]\:bg-input\/80 {
-  .sl-spreepay &:is(.dark *) {
-    .sl-spreepay &[data-state=unchecked] {
+  &:is(.dark *) {
+    &[data-state=unchecked] {
       background-color: var(--input);
       @supports (color: color-mix(in lab, red, red)) {
         background-color: color-mix(in oklab, var(--input) 80%, transparent);
@@ -1681,17 +1659,17 @@
   }
 }
 .sl-spreepay .\[\&_svg\]\:pointer-events-none {
-  .sl-spreepay & svg {
+  & svg {
     pointer-events: none;
   }
 }
 .sl-spreepay .\[\&_svg\]\:shrink-0 {
-  .sl-spreepay & svg {
+  & svg {
     flex-shrink: 0;
   }
 }
 .sl-spreepay .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 {
-  .sl-spreepay & svg:not([class*=size-]) {
+  & svg:not([class*=size-]) {
     width: calc(var(--spacing) * 4);
     height: calc(var(--spacing) * 4);
   }