@superlogic/spree-pay 0.1.9 → 0.1.11

package/build/index.css

@@ -1,6 +1,6 @@
 /* src/index.css */
 @layer properties;
-@layer theme, base, components, utilities;
+@layer theme, base, components;
 @layer theme {
   .sl-spreepay,
   .sl-spreepay :host {
@@ -43,7 +43,7 @@
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
     --radius-xs: 0.125rem;
-    --radius-2xl: 1rem;
+    --radius-3xl: 1.5rem;
     --animate-spin: spin 1s linear infinite;
     --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
     --default-transition-duration: 150ms;
@@ -238,1115 +238,1107 @@
     display: none !important;
   }
 }
-@layer utilities {
-  .sl-spreepay .pointer-events-none {
-    pointer-events: none;
-  }
-  .sl-spreepay .sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border-width: 0;
-  }
-  .sl-spreepay .absolute {
-    position: absolute;
-  }
-  .sl-spreepay .fixed {
-    position: fixed;
-  }
-  .sl-spreepay .inset-0 {
-    inset: calc(var(--spacing) * 0);
-  }
-  .sl-spreepay .top-4 {
-    top: calc(var(--spacing) * 4);
-  }
-  .sl-spreepay .top-\[50\%\] {
-    top: 50%;
-  }
-  .sl-spreepay .right-4 {
-    right: calc(var(--spacing) * 4);
-  }
-  .sl-spreepay .left-\[50\%\] {
-    left: 50%;
-  }
-  .sl-spreepay .z-50 {
-    z-index: 50;
-  }
-  .sl-spreepay .container {
-    width: 100%;
-    @media (width >= 40rem) {
-      max-width: 40rem;
-    }
-    @media (width >= 48rem) {
-      max-width: 48rem;
-    }
-    @media (width >= 64rem) {
-      max-width: 64rem;
-    }
-    @media (width >= 80rem) {
-      max-width: 80rem;
-    }
-    @media (width >= 96rem) {
-      max-width: 96rem;
-    }
-  }
-  .sl-spreepay .my-1 {
-    margin-block: calc(var(--spacing) * 1);
-  }
-  .sl-spreepay .mt-1 {
-    margin-top: calc(var(--spacing) * 1);
-  }
-  .sl-spreepay .mt-4 {
-    margin-top: calc(var(--spacing) * 4);
-  }
-  .sl-spreepay .-mr-2 {
-    margin-right: calc(var(--spacing) * -2);
-  }
-  .sl-spreepay .mr-1 {
-    margin-right: calc(var(--spacing) * 1);
-  }
-  .sl-spreepay .mb-4 {
-    margin-bottom: calc(var(--spacing) * 4);
-  }
-  .sl-spreepay .-ml-2\.5 {
-    margin-left: calc(var(--spacing) * -2.5);
-  }
-  .sl-spreepay .block {
-    display: block;
-  }
-  .sl-spreepay .flex {
-    display: flex;
-  }
-  .sl-spreepay .grid {
-    display: grid;
-  }
-  .sl-spreepay .hidden {
-    display: none;
-  }
-  .sl-spreepay .inline {
-    display: inline;
-  }
-  .sl-spreepay .inline-flex {
-    display: inline-flex;
-  }
-  .sl-spreepay .size-3\.5 {
-    width: calc(var(--spacing) * 3.5);
-    height: calc(var(--spacing) * 3.5);
-  }
-  .sl-spreepay .size-4 {
-    width: calc(var(--spacing) * 4);
-    height: calc(var(--spacing) * 4);
-  }
-  .sl-spreepay .size-6 {
-    width: calc(var(--spacing) * 6);
-    height: calc(var(--spacing) * 6);
-  }
-  .sl-spreepay .size-8 {
-    width: calc(var(--spacing) * 8);
-    height: calc(var(--spacing) * 8);
-  }
-  .sl-spreepay .size-9 {
-    width: calc(var(--spacing) * 9);
-    height: calc(var(--spacing) * 9);
-  }
-  .sl-spreepay .size-12 {
-    width: calc(var(--spacing) * 12);
-    height: calc(var(--spacing) * 12);
-  }
-  .sl-spreepay .size-16 {
-    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);
-  }
-  .sl-spreepay .h-9 {
-    height: calc(var(--spacing) * 9);
-  }
-  .sl-spreepay .h-10 {
-    height: calc(var(--spacing) * 10);
-  }
-  .sl-spreepay .h-11 {
-    height: calc(var(--spacing) * 11);
-  }
-  .sl-spreepay .h-15 {
-    height: calc(var(--spacing) * 15);
-  }
-  .sl-spreepay .h-\[1\.15rem\] {
-    height: 1.15rem;
-  }
-  .sl-spreepay .h-\[34px\] {
-    height: 34px;
-  }
-  .sl-spreepay .h-\[60px\] {
-    height: 60px;
-  }
-  .sl-spreepay .h-\[500px\] {
-    height: 500px;
-  }
-  .sl-spreepay .max-h-\[600px\] {
-    max-height: 600px;
+.sl-spreepay .pointer-events-none {
+  pointer-events: none;
+}
+.sl-spreepay .sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+.sl-spreepay .absolute {
+  position: absolute;
+}
+.sl-spreepay .fixed {
+  position: fixed;
+}
+.sl-spreepay .inset-0 {
+  inset: calc(var(--spacing) * 0);
+}
+.sl-spreepay .top-4 {
+  top: calc(var(--spacing) * 4);
+}
+.sl-spreepay .top-\[50\%\] {
+  top: 50%;
+}
+.sl-spreepay .right-4 {
+  right: calc(var(--spacing) * 4);
+}
+.sl-spreepay .left-\[50\%\] {
+  left: 50%;
+}
+.sl-spreepay .z-50 {
+  z-index: 50;
+}
+.sl-spreepay .container {
+  width: 100%;
+  @media (width >= 40rem) {
+    max-width: 40rem;
   }
-  .sl-spreepay .w-2\.5 {
-    width: calc(var(--spacing) * 2.5);
+  @media (width >= 48rem) {
+    max-width: 48rem;
   }
-  .sl-spreepay .w-5 {
-    width: calc(var(--spacing) * 5);
+  @media (width >= 64rem) {
+    max-width: 64rem;
   }
-  .sl-spreepay .w-6 {
-    width: calc(var(--spacing) * 6);
+  @media (width >= 80rem) {
+    max-width: 80rem;
   }
-  .sl-spreepay .w-8 {
-    width: calc(var(--spacing) * 8);
+  @media (width >= 96rem) {
+    max-width: 96rem;
   }
-  .sl-spreepay .w-11 {
-    width: calc(var(--spacing) * 11);
+}
+.sl-spreepay .my-1 {
+  margin-block: calc(var(--spacing) * 1);
+}
+.sl-spreepay .mt-1 {
+  margin-top: calc(var(--spacing) * 1);
+}
+.sl-spreepay .mt-4 {
+  margin-top: calc(var(--spacing) * 4);
+}
+.sl-spreepay .-mr-2 {
+  margin-right: calc(var(--spacing) * -2);
+}
+.sl-spreepay .mr-1 {
+  margin-right: calc(var(--spacing) * 1);
+}
+.sl-spreepay .mb-4 {
+  margin-bottom: calc(var(--spacing) * 4);
+}
+.sl-spreepay .-ml-2\.5 {
+  margin-left: calc(var(--spacing) * -2.5);
+}
+.sl-spreepay .block {
+  display: block;
+}
+.sl-spreepay .flex {
+  display: flex;
+}
+.sl-spreepay .grid {
+  display: grid;
+}
+.sl-spreepay .hidden {
+  display: none;
+}
+.sl-spreepay .inline {
+  display: inline;
+}
+.sl-spreepay .inline-flex {
+  display: inline-flex;
+}
+.sl-spreepay .size-3\.5 {
+  width: calc(var(--spacing) * 3.5);
+  height: calc(var(--spacing) * 3.5);
+}
+.sl-spreepay .size-4 {
+  width: calc(var(--spacing) * 4);
+  height: calc(var(--spacing) * 4);
+}
+.sl-spreepay .size-6 {
+  width: calc(var(--spacing) * 6);
+  height: calc(var(--spacing) * 6);
+}
+.sl-spreepay .size-8 {
+  width: calc(var(--spacing) * 8);
+  height: calc(var(--spacing) * 8);
+}
+.sl-spreepay .size-9 {
+  width: calc(var(--spacing) * 9);
+  height: calc(var(--spacing) * 9);
+}
+.sl-spreepay .size-12 {
+  width: calc(var(--spacing) * 12);
+  height: calc(var(--spacing) * 12);
+}
+.sl-spreepay .size-16 {
+  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);
+}
+.sl-spreepay .h-9 {
+  height: calc(var(--spacing) * 9);
+}
+.sl-spreepay .h-10 {
+  height: calc(var(--spacing) * 10);
+}
+.sl-spreepay .h-11 {
+  height: calc(var(--spacing) * 11);
+}
+.sl-spreepay .h-15 {
+  height: calc(var(--spacing) * 15);
+}
+.sl-spreepay .h-\[1\.15rem\] {
+  height: 1.15rem;
+}
+.sl-spreepay .h-\[34px\] {
+  height: 34px;
+}
+.sl-spreepay .h-\[60px\] {
+  height: 60px;
+}
+.sl-spreepay .h-\[500px\] {
+  height: 500px;
+}
+.sl-spreepay .max-h-\[600px\] {
+  max-height: 600px;
+}
+.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);
+}
+.sl-spreepay .w-8 {
+  width: calc(var(--spacing) * 8);
+}
+.sl-spreepay .w-11 {
+  width: calc(var(--spacing) * 11);
+}
+.sl-spreepay .w-\[132px\] {
+  width: 132px;
+}
+.sl-spreepay .w-full {
+  width: 100%;
+}
+.sl-spreepay .max-w-\[680px\] {
+  max-width: 680px;
+}
+.sl-spreepay .max-w-\[calc\(100\%-2rem\)\] {
+  max-width: calc(100% - 2rem);
+}
+.sl-spreepay .flex-shrink-0 {
+  flex-shrink: 0;
+}
+.sl-spreepay .shrink-0 {
+  flex-shrink: 0;
+}
+.sl-spreepay .translate-x-\[-50\%\] {
+  --tw-translate-x: -50%;
+  translate: var(--tw-translate-x) var(--tw-translate-y);
+}
+.sl-spreepay .translate-y-\[-50\%\] {
+  --tw-translate-y: -50%;
+  translate: var(--tw-translate-x) var(--tw-translate-y);
+}
+.sl-spreepay .animate-pulse {
+  animation: var(--animate-pulse);
+}
+.sl-spreepay .animate-spin {
+  animation: var(--animate-spin);
+}
+.sl-spreepay .cursor-not-allowed {
+  cursor: not-allowed;
+}
+.sl-spreepay .cursor-pointer {
+  cursor: pointer;
+}
+.sl-spreepay .flex-col {
+  flex-direction: column;
+}
+.sl-spreepay .flex-col-reverse {
+  flex-direction: column-reverse;
+}
+.sl-spreepay .items-baseline {
+  align-items: baseline;
+}
+.sl-spreepay .items-center {
+  align-items: center;
+}
+.sl-spreepay .justify-between {
+  justify-content: space-between;
+}
+.sl-spreepay .justify-center {
+  justify-content: center;
+}
+.sl-spreepay .justify-end {
+  justify-content: flex-end;
+}
+.sl-spreepay .gap-0 {
+  gap: calc(var(--spacing) * 0);
+}
+.sl-spreepay .gap-1 {
+  gap: calc(var(--spacing) * 1);
+}
+.sl-spreepay .gap-1\.5 {
+  gap: calc(var(--spacing) * 1.5);
+}
+.sl-spreepay .gap-2 {
+  gap: calc(var(--spacing) * 2);
+}
+.sl-spreepay .gap-3 {
+  gap: calc(var(--spacing) * 3);
+}
+.sl-spreepay .gap-4 {
+  gap: calc(var(--spacing) * 4);
+}
+.sl-spreepay .gap-6 {
+  gap: calc(var(--spacing) * 6);
+}
+.sl-spreepay .overflow-hidden {
+  overflow: hidden;
+}
+.sl-spreepay .rounded-3xl {
+  border-radius: var(--radius-3xl);
+}
+.sl-spreepay .rounded-\[4px\] {
+  border-radius: 4px;
+}
+.sl-spreepay .rounded-full {
+  border-radius: calc(infinity * 1px);
+}
+.sl-spreepay .rounded-lg {
+  border-radius: var(--radius);
+}
+.sl-spreepay .rounded-md {
+  border-radius: calc(var(--radius) - 2px);
+}
+.sl-spreepay .rounded-sm {
+  border-radius: calc(var(--radius) - 4px);
+}
+.sl-spreepay .rounded-xl {
+  border-radius: calc(var(--radius) + 4px);
+}
+.sl-spreepay .rounded-xs {
+  border-radius: var(--radius-xs);
+}
+.sl-spreepay .rounded-r-md {
+  border-top-right-radius: calc(var(--radius) - 2px);
+  border-bottom-right-radius: calc(var(--radius) - 2px);
+}
+.sl-spreepay .border {
+  border-style: var(--tw-border-style);
+  border-width: 1px;
+}
+.sl-spreepay .border-0 {
+  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-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-\[\#F5F7FA\] {
+  border-color: #F5F7FA;
+}
+.sl-spreepay .border-black {
+  border-color: var(--color-black);
+}
+.sl-spreepay .border-black\/7 {
+  border-color: color-mix(in srgb, #000 7%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    border-color: color-mix(in oklab, var(--color-black) 7%, transparent);
   }
-  .sl-spreepay .w-\[132px\] {
-    width: 132px;
+}
+.sl-spreepay .border-black\/25 {
+  border-color: color-mix(in srgb, #000 25%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    border-color: color-mix(in oklab, var(--color-black) 25%, transparent);
   }
-  .sl-spreepay .w-full {
-    width: 100%;
+}
+.sl-spreepay .border-destructive {
+  border-color: var(--destructive);
+}
+.sl-spreepay .border-input {
+  border-color: var(--input);
+}
+.sl-spreepay .border-primary {
+  border-color: var(--primary);
+}
+.sl-spreepay .border-ring {
+  border-color: var(--ring);
+}
+.sl-spreepay .border-transparent {
+  border-color: transparent;
+}
+.sl-spreepay .bg-\[\#F5F7FA\] {
+  background-color: #F5F7FA;
+}
+.sl-spreepay .bg-background {
+  background-color: var(--background);
+}
+.sl-spreepay .bg-black\/4 {
+  background-color: color-mix(in srgb, #000 4%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    background-color: color-mix(in oklab, var(--color-black) 4%, transparent);
   }
-  .sl-spreepay .max-w-\[680px\] {
-    max-width: 680px;
+}
+.sl-spreepay .bg-black\/10 {
+  background-color: color-mix(in srgb, #000 10%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    background-color: color-mix(in oklab, var(--color-black) 10%, transparent);
   }
-  .sl-spreepay .max-w-\[calc\(100\%-2rem\)\] {
-    max-width: calc(100% - 2rem);
+}
+.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 .flex-shrink-0 {
-    flex-shrink: 0;
+}
+.sl-spreepay .bg-destructive {
+  background-color: var(--destructive);
+}
+.sl-spreepay .bg-gray-100 {
+  background-color: var(--color-gray-100);
+}
+.sl-spreepay .bg-gray-200 {
+  background-color: var(--color-gray-200);
+}
+.sl-spreepay .bg-primary {
+  background-color: var(--primary);
+}
+.sl-spreepay .bg-primary\/7 {
+  background-color: var(--primary);
+  @supports (color: color-mix(in lab, red, red)) {
+    background-color: color-mix(in oklab, var(--primary) 7%, transparent);
   }
-  .sl-spreepay .shrink-0 {
-    flex-shrink: 0;
+}
+.sl-spreepay .bg-primary\/8 {
+  background-color: var(--primary);
+  @supports (color: color-mix(in lab, red, red)) {
+    background-color: color-mix(in oklab, var(--primary) 8%, transparent);
   }
-  .sl-spreepay .translate-x-\[-50\%\] {
-    --tw-translate-x: -50%;
-    translate: var(--tw-translate-x) var(--tw-translate-y);
+}
+.sl-spreepay .bg-secondary {
+  background-color: var(--secondary);
+}
+.sl-spreepay .bg-white {
+  background-color: var(--color-white);
+}
+.sl-spreepay .p-0 {
+  padding: calc(var(--spacing) * 0);
+}
+.sl-spreepay .p-1 {
+  padding: calc(var(--spacing) * 1);
+}
+.sl-spreepay .p-6 {
+  padding: calc(var(--spacing) * 6);
+}
+.sl-spreepay .px-1\.5 {
+  padding-inline: calc(var(--spacing) * 1.5);
+}
+.sl-spreepay .px-2\.5 {
+  padding-inline: calc(var(--spacing) * 2.5);
+}
+.sl-spreepay .px-3 {
+  padding-inline: calc(var(--spacing) * 3);
+}
+.sl-spreepay .px-4 {
+  padding-inline: calc(var(--spacing) * 4);
+}
+.sl-spreepay .px-5 {
+  padding-inline: calc(var(--spacing) * 5);
+}
+.sl-spreepay .px-6 {
+  padding-inline: calc(var(--spacing) * 6);
+}
+.sl-spreepay .px-7 {
+  padding-inline: calc(var(--spacing) * 7);
+}
+.sl-spreepay .px-8 {
+  padding-inline: calc(var(--spacing) * 8);
+}
+.sl-spreepay .py-1\.5 {
+  padding-block: calc(var(--spacing) * 1.5);
+}
+.sl-spreepay .py-2 {
+  padding-block: calc(var(--spacing) * 2);
+}
+.sl-spreepay .py-4 {
+  padding-block: calc(var(--spacing) * 4);
+}
+.sl-spreepay .py-5 {
+  padding-block: calc(var(--spacing) * 5);
+}
+.sl-spreepay .py-6 {
+  padding-block: calc(var(--spacing) * 6);
+}
+.sl-spreepay .pt-6 {
+  padding-top: calc(var(--spacing) * 6);
+}
+.sl-spreepay .pb-2 {
+  padding-bottom: calc(var(--spacing) * 2);
+}
+.sl-spreepay .text-center {
+  text-align: center;
+}
+.sl-spreepay .text-2xl {
+  font-size: var(--text-2xl);
+  line-height: var(--tw-leading, var(--text-2xl--line-height));
+}
+.sl-spreepay .text-lg {
+  font-size: var(--text-lg);
+  line-height: var(--tw-leading, var(--text-lg--line-height));
+}
+.sl-spreepay .text-sm {
+  font-size: var(--text-sm);
+  line-height: var(--tw-leading, var(--text-sm--line-height));
+}
+.sl-spreepay .text-xl {
+  font-size: var(--text-xl);
+  line-height: var(--tw-leading, var(--text-xl--line-height));
+}
+.sl-spreepay .text-xs {
+  font-size: var(--text-xs);
+  line-height: var(--tw-leading, var(--text-xs--line-height));
+}
+.sl-spreepay .leading-\[1\.3\] {
+  --tw-leading: 1.3;
+  line-height: 1.3;
+}
+.sl-spreepay .leading-\[1\.7\] {
+  --tw-leading: 1.7;
+  line-height: 1.7;
+}
+.sl-spreepay .leading-\[34px\] {
+  --tw-leading: 34px;
+  line-height: 34px;
+}
+.sl-spreepay .leading-none {
+  --tw-leading: 1;
+  line-height: 1;
+}
+.sl-spreepay .font-medium {
+  --tw-font-weight: var(--font-weight-medium);
+  font-weight: var(--font-weight-medium);
+}
+.sl-spreepay .font-semibold {
+  --tw-font-weight: var(--font-weight-semibold);
+  font-weight: var(--font-weight-semibold);
+}
+.sl-spreepay .whitespace-nowrap {
+  white-space: nowrap;
+}
+.sl-spreepay .text-black {
+  color: var(--color-black);
+}
+.sl-spreepay .text-black\/50 {
+  color: color-mix(in srgb, #000 50%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    color: color-mix(in oklab, var(--color-black) 50%, transparent);
   }
-  .sl-spreepay .translate-y-\[-50\%\] {
-    --tw-translate-y: -50%;
-    translate: var(--tw-translate-x) var(--tw-translate-y);
+}
+.sl-spreepay .text-current {
+  color: currentcolor;
+}
+.sl-spreepay .text-destructive {
+  color: var(--destructive);
+}
+.sl-spreepay .text-gray-300 {
+  color: var(--color-gray-300);
+}
+.sl-spreepay .text-gray-900 {
+  color: var(--color-gray-900);
+}
+.sl-spreepay .text-muted-foreground {
+  color: var(--muted-foreground);
+}
+.sl-spreepay .text-primary {
+  color: var(--primary);
+}
+.sl-spreepay .text-primary-foreground {
+  color: var(--primary-foreground);
+}
+.sl-spreepay .text-red-500 {
+  color: var(--color-red-500);
+}
+.sl-spreepay .text-secondary-foreground {
+  color: var(--secondary-foreground);
+}
+.sl-spreepay .text-white {
+  color: var(--color-white);
+}
+.sl-spreepay .underline {
+  text-decoration-line: underline;
+}
+.sl-spreepay .underline-offset-4 {
+  text-underline-offset: 4px;
+}
+.sl-spreepay .opacity-50 {
+  opacity: 50%;
+}
+.sl-spreepay .opacity-70 {
+  opacity: 70%;
+}
+.sl-spreepay .shadow-lg {
+  --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px 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-xs {
+  --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
+  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 .ring-0 {
+  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+  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 .ring-2 {
+  --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),
+    var(--tw-inset-ring-shadow),
+    var(--tw-ring-offset-shadow),
+    var(--tw-ring-shadow),
+    var(--tw-shadow);
+}
+.sl-spreepay .ring-ring\/50 {
+  --tw-ring-color: var(--ring);
+  @supports (color: color-mix(in lab, red, red)) {
+    --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
   }
-  .sl-spreepay .animate-pulse {
-    animation: var(--animate-pulse);
+}
+.sl-spreepay .ring-offset-background {
+  --tw-ring-offset-color: var(--background);
+}
+.sl-spreepay .outline {
+  outline-style: var(--tw-outline-style);
+  outline-width: 1px;
+}
+.sl-spreepay .transition-all {
+  transition-property: all;
+  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+  transition-duration: var(--tw-duration, var(--default-transition-duration));
+}
+.sl-spreepay .transition-opacity {
+  transition-property: opacity;
+  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+  transition-duration: var(--tw-duration, var(--default-transition-duration));
+}
+.sl-spreepay .transition-shadow {
+  transition-property: box-shadow;
+  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+  transition-duration: var(--tw-duration, var(--default-transition-duration));
+}
+.sl-spreepay .transition-transform {
+  transition-property:
+    transform,
+    translate,
+    scale,
+    rotate;
+  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+  transition-duration: var(--tw-duration, var(--default-transition-duration));
+}
+.sl-spreepay .transition-none {
+  transition-property: none;
+}
+.sl-spreepay .duration-200 {
+  --tw-duration: 200ms;
+  transition-duration: 200ms;
+}
+.sl-spreepay .outline-none {
+  --tw-outline-style: none;
+  outline-style: none;
+}
+.sl-spreepay .select-none {
+  -webkit-user-select: none;
+  user-select: none;
+}
+.sl-spreepay .group-data-\[disabled\=true\]\:pointer-events-none {
+  .sl-spreepay &:is(:where(.group)[data-disabled=true] *) {
+    pointer-events: none;
   }
-  .sl-spreepay .animate-spin {
-    animation: var(--animate-spin);
+}
+.sl-spreepay .group-data-\[disabled\=true\]\:opacity-50 {
+  .sl-spreepay &:is(:where(.group)[data-disabled=true] *) {
+    opacity: 50%;
   }
-  .sl-spreepay .cursor-not-allowed {
+}
+.sl-spreepay .peer-disabled\:cursor-not-allowed {
+  .sl-spreepay &:is(:where(.peer):disabled ~ *) {
     cursor: not-allowed;
   }
-  .sl-spreepay .cursor-pointer {
-    cursor: pointer;
-  }
-  .sl-spreepay .flex-col {
-    flex-direction: column;
-  }
-  .sl-spreepay .flex-col-reverse {
-    flex-direction: column-reverse;
-  }
-  .sl-spreepay .items-baseline {
-    align-items: baseline;
-  }
-  .sl-spreepay .items-center {
-    align-items: center;
-  }
-  .sl-spreepay .justify-between {
-    justify-content: space-between;
-  }
-  .sl-spreepay .justify-center {
-    justify-content: center;
-  }
-  .sl-spreepay .justify-end {
-    justify-content: flex-end;
-  }
-  .sl-spreepay .gap-0 {
-    gap: calc(var(--spacing) * 0);
-  }
-  .sl-spreepay .gap-1 {
-    gap: calc(var(--spacing) * 1);
-  }
-  .sl-spreepay .gap-1\.5 {
-    gap: calc(var(--spacing) * 1.5);
-  }
-  .sl-spreepay .gap-2 {
-    gap: calc(var(--spacing) * 2);
-  }
-  .sl-spreepay .gap-3 {
-    gap: calc(var(--spacing) * 3);
-  }
-  .sl-spreepay .gap-4 {
-    gap: calc(var(--spacing) * 4);
-  }
-  .sl-spreepay .gap-6 {
-    gap: calc(var(--spacing) * 6);
-  }
-  .sl-spreepay .overflow-hidden {
-    overflow: hidden;
-  }
-  .sl-spreepay .rounded-2xl {
-    border-radius: var(--radius-2xl);
-  }
-  .sl-spreepay .rounded-\[4px\] {
-    border-radius: 4px;
-  }
-  .sl-spreepay .rounded-\[24px\] {
-    border-radius: 24px;
-  }
-  .sl-spreepay .rounded-full {
-    border-radius: calc(infinity * 1px);
-  }
-  .sl-spreepay .rounded-lg {
-    border-radius: var(--radius);
-  }
-  .sl-spreepay .rounded-md {
-    border-radius: calc(var(--radius) - 2px);
-  }
-  .sl-spreepay .rounded-sm {
-    border-radius: calc(var(--radius) - 4px);
-  }
-  .sl-spreepay .rounded-xl {
-    border-radius: calc(var(--radius) + 4px);
-  }
-  .sl-spreepay .rounded-xs {
-    border-radius: var(--radius-xs);
-  }
-  .sl-spreepay .rounded-r-md {
-    border-top-right-radius: calc(var(--radius) - 2px);
-    border-bottom-right-radius: calc(var(--radius) - 2px);
-  }
-  .sl-spreepay .border {
-    border-style: var(--tw-border-style);
-    border-width: 1px;
-  }
-  .sl-spreepay .border-0 {
-    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-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-\[\#F5F7FA\] {
-    border-color: #F5F7FA;
-  }
-  .sl-spreepay .border-black {
-    border-color: var(--color-black);
-  }
-  .sl-spreepay .border-black\/7 {
-    border-color: color-mix(in srgb, #000 7%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-black) 7%, transparent);
-    }
-  }
-  .sl-spreepay .border-black\/25 {
-    border-color: color-mix(in srgb, #000 25%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-black) 25%, transparent);
-    }
-  }
-  .sl-spreepay .border-destructive {
-    border-color: var(--destructive);
-  }
-  .sl-spreepay .border-input {
-    border-color: var(--input);
-  }
-  .sl-spreepay .border-primary {
-    border-color: var(--primary);
-  }
-  .sl-spreepay .border-ring {
-    border-color: var(--ring);
-  }
-  .sl-spreepay .border-transparent {
-    border-color: transparent;
-  }
-  .sl-spreepay .bg-\[\#F5F7FA\] {
-    background-color: #F5F7FA;
-  }
-  .sl-spreepay .bg-background {
-    background-color: var(--background);
-  }
-  .sl-spreepay .bg-black\/4 {
-    background-color: color-mix(in srgb, #000 4%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-black) 4%, transparent);
-    }
-  }
-  .sl-spreepay .bg-black\/10 {
-    background-color: color-mix(in srgb, #000 10%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-black) 10%, transparent);
-    }
-  }
-  .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-destructive {
-    background-color: var(--destructive);
-  }
-  .sl-spreepay .bg-gray-100 {
-    background-color: var(--color-gray-100);
-  }
-  .sl-spreepay .bg-gray-200 {
-    background-color: var(--color-gray-200);
-  }
-  .sl-spreepay .bg-primary {
-    background-color: var(--primary);
-  }
-  .sl-spreepay .bg-primary\/7 {
-    background-color: var(--primary);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--primary) 7%, transparent);
-    }
-  }
-  .sl-spreepay .bg-primary\/8 {
-    background-color: var(--primary);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--primary) 8%, transparent);
-    }
-  }
-  .sl-spreepay .bg-secondary {
-    background-color: var(--secondary);
-  }
-  .sl-spreepay .bg-white {
-    background-color: var(--color-white);
-  }
-  .sl-spreepay .p-0 {
-    padding: calc(var(--spacing) * 0);
-  }
-  .sl-spreepay .p-1 {
-    padding: calc(var(--spacing) * 1);
-  }
-  .sl-spreepay .p-6 {
-    padding: calc(var(--spacing) * 6);
-  }
-  .sl-spreepay .px-1\.5 {
-    padding-inline: calc(var(--spacing) * 1.5);
-  }
-  .sl-spreepay .px-2\.5 {
-    padding-inline: calc(var(--spacing) * 2.5);
-  }
-  .sl-spreepay .px-3 {
-    padding-inline: calc(var(--spacing) * 3);
-  }
-  .sl-spreepay .px-4 {
-    padding-inline: calc(var(--spacing) * 4);
-  }
-  .sl-spreepay .px-5 {
-    padding-inline: calc(var(--spacing) * 5);
-  }
-  .sl-spreepay .px-6 {
-    padding-inline: calc(var(--spacing) * 6);
-  }
-  .sl-spreepay .px-7 {
-    padding-inline: calc(var(--spacing) * 7);
-  }
-  .sl-spreepay .px-8 {
-    padding-inline: calc(var(--spacing) * 8);
-  }
-  .sl-spreepay .py-1\.5 {
-    padding-block: calc(var(--spacing) * 1.5);
-  }
-  .sl-spreepay .py-2 {
-    padding-block: calc(var(--spacing) * 2);
-  }
-  .sl-spreepay .py-4 {
-    padding-block: calc(var(--spacing) * 4);
-  }
-  .sl-spreepay .py-5 {
-    padding-block: calc(var(--spacing) * 5);
-  }
-  .sl-spreepay .py-6 {
-    padding-block: calc(var(--spacing) * 6);
-  }
-  .sl-spreepay .pt-6 {
-    padding-top: calc(var(--spacing) * 6);
-  }
-  .sl-spreepay .pb-2 {
-    padding-bottom: calc(var(--spacing) * 2);
-  }
-  .sl-spreepay .text-center {
-    text-align: center;
-  }
-  .sl-spreepay .text-2xl {
-    font-size: var(--text-2xl);
-    line-height: var(--tw-leading, var(--text-2xl--line-height));
-  }
-  .sl-spreepay .text-lg {
-    font-size: var(--text-lg);
-    line-height: var(--tw-leading, var(--text-lg--line-height));
-  }
-  .sl-spreepay .text-sm {
-    font-size: var(--text-sm);
-    line-height: var(--tw-leading, var(--text-sm--line-height));
-  }
-  .sl-spreepay .text-xl {
-    font-size: var(--text-xl);
-    line-height: var(--tw-leading, var(--text-xl--line-height));
-  }
-  .sl-spreepay .text-xs {
-    font-size: var(--text-xs);
-    line-height: var(--tw-leading, var(--text-xs--line-height));
-  }
-  .sl-spreepay .leading-\[1\.3\] {
-    --tw-leading: 1.3;
-    line-height: 1.3;
-  }
-  .sl-spreepay .leading-\[1\.7\] {
-    --tw-leading: 1.7;
-    line-height: 1.7;
-  }
-  .sl-spreepay .leading-\[34px\] {
-    --tw-leading: 34px;
-    line-height: 34px;
-  }
-  .sl-spreepay .leading-none {
-    --tw-leading: 1;
-    line-height: 1;
-  }
-  .sl-spreepay .font-medium {
-    --tw-font-weight: var(--font-weight-medium);
-    font-weight: var(--font-weight-medium);
-  }
-  .sl-spreepay .font-semibold {
-    --tw-font-weight: var(--font-weight-semibold);
-    font-weight: var(--font-weight-semibold);
-  }
-  .sl-spreepay .whitespace-nowrap {
-    white-space: nowrap;
-  }
-  .sl-spreepay .text-\[\#798B95\] {
-    color: #798B95;
-  }
-  .sl-spreepay .text-black {
-    color: var(--color-black);
-  }
-  .sl-spreepay .text-black\/50 {
-    color: color-mix(in srgb, #000 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      color: color-mix(in oklab, var(--color-black) 50%, transparent);
-    }
-  }
-  .sl-spreepay .text-current {
-    color: currentcolor;
-  }
-  .sl-spreepay .text-destructive {
-    color: var(--destructive);
-  }
-  .sl-spreepay .text-gray-300 {
-    color: var(--color-gray-300);
-  }
-  .sl-spreepay .text-gray-900 {
-    color: var(--color-gray-900);
-  }
-  .sl-spreepay .text-muted-foreground {
-    color: var(--muted-foreground);
-  }
-  .sl-spreepay .text-primary {
-    color: var(--primary);
-  }
-  .sl-spreepay .text-primary-foreground {
-    color: var(--primary-foreground);
-  }
-  .sl-spreepay .text-red-500 {
-    color: var(--color-red-500);
-  }
-  .sl-spreepay .text-secondary-foreground {
-    color: var(--secondary-foreground);
-  }
-  .sl-spreepay .text-white {
-    color: var(--color-white);
-  }
-  .sl-spreepay .underline {
-    text-decoration-line: underline;
-  }
-  .sl-spreepay .underline-offset-4 {
-    text-underline-offset: 4px;
-  }
-  .sl-spreepay .opacity-50 {
+}
+.sl-spreepay .peer-disabled\:opacity-50 {
+  .sl-spreepay &:is(:where(.peer):disabled ~ *) {
     opacity: 50%;
   }
-  .sl-spreepay .opacity-70 {
-    opacity: 70%;
-  }
-  .sl-spreepay .shadow-lg {
-    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px 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-xs {
-    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
-    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 .ring-0 {
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
-    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 .ring-2 {
-    --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),
-      var(--tw-inset-ring-shadow),
-      var(--tw-ring-offset-shadow),
-      var(--tw-ring-shadow),
-      var(--tw-shadow);
-  }
-  .sl-spreepay .ring-ring\/50 {
-    --tw-ring-color: var(--ring);
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
-    }
-  }
-  .sl-spreepay .ring-offset-background {
-    --tw-ring-offset-color: var(--background);
-  }
-  .sl-spreepay .outline {
-    outline-style: var(--tw-outline-style);
-    outline-width: 1px;
-  }
-  .sl-spreepay .transition-all {
-    transition-property: all;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-    transition-duration: var(--tw-duration, var(--default-transition-duration));
-  }
-  .sl-spreepay .transition-opacity {
-    transition-property: opacity;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-    transition-duration: var(--tw-duration, var(--default-transition-duration));
-  }
-  .sl-spreepay .transition-shadow {
-    transition-property: box-shadow;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-    transition-duration: var(--tw-duration, var(--default-transition-duration));
-  }
-  .sl-spreepay .transition-transform {
-    transition-property:
-      transform,
-      translate,
-      scale,
-      rotate;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-    transition-duration: var(--tw-duration, var(--default-transition-duration));
-  }
-  .sl-spreepay .transition-none {
-    transition-property: none;
-  }
-  .sl-spreepay .duration-200 {
-    --tw-duration: 200ms;
-    transition-duration: 200ms;
-  }
-  .sl-spreepay .outline-none {
-    --tw-outline-style: none;
-    outline-style: none;
-  }
-  .sl-spreepay .select-none {
-    -webkit-user-select: none;
-    user-select: none;
-  }
-  .sl-spreepay .group-data-\[disabled\=true\]\:pointer-events-none {
-    .sl-spreepay &: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] *) {
-      opacity: 50%;
-    }
-  }
-  .sl-spreepay .peer-disabled\:cursor-not-allowed {
-    .sl-spreepay &:is(:where(.peer):disabled ~ *) {
-      cursor: not-allowed;
-    }
-  }
-  .sl-spreepay .peer-disabled\:opacity-50 {
-    .sl-spreepay &:is(:where(.peer):disabled ~ *) {
-      opacity: 50%;
-    }
-  }
-  .sl-spreepay .placeholder\:text-muted-foreground {
-    .sl-spreepay &::placeholder {
-      color: var(--muted-foreground);
-    }
-  }
-  .sl-spreepay .hover\:bg-accent {
-    .sl-spreepay &:hover {
-      @media (hover: hover) {
-        background-color: var(--accent);
-      }
-    }
-  }
-  .sl-spreepay .hover\:bg-destructive\/90 {
-    .sl-spreepay &:hover {
-      @media (hover: hover) {
-        background-color: var(--destructive);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--destructive) 90%, transparent);
-        }
-      }
-    }
-  }
-  .sl-spreepay .hover\:bg-gray-100 {
-    .sl-spreepay &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-gray-100);
-      }
-    }
+}
+.sl-spreepay .placeholder\:text-muted-foreground {
+  .sl-spreepay &::placeholder {
+    color: var(--muted-foreground);
   }
-  .sl-spreepay .hover\:bg-primary {
-    .sl-spreepay &:hover {
-      @media (hover: hover) {
-        background-color: var(--primary);
-      }
+}
+.sl-spreepay .hover\:bg-accent {
+  .sl-spreepay &:hover {
+    @media (hover: hover) {
+      background-color: var(--accent);
     }
   }
-  .sl-spreepay .hover\:bg-primary\/90 {
-    .sl-spreepay &:hover {
-      @media (hover: hover) {
-        background-color: var(--primary);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--primary) 90%, transparent);
-        }
+}
+.sl-spreepay .hover\:bg-destructive\/90 {
+  .sl-spreepay &:hover {
+    @media (hover: hover) {
+      background-color: var(--destructive);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--destructive) 90%, transparent);
       }
     }
   }
-  .sl-spreepay .hover\:bg-secondary\/80 {
-    .sl-spreepay &:hover {
-      @media (hover: hover) {
-        background-color: var(--secondary);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--secondary) 80%, transparent);
-        }
-      }
+}
+.sl-spreepay .hover\:bg-gray-100 {
+  .sl-spreepay &:hover {
+    @media (hover: hover) {
+      background-color: var(--color-gray-100);
     }
   }
-  .sl-spreepay .hover\:text-accent-foreground {
-    .sl-spreepay &:hover {
-      @media (hover: hover) {
-        color: var(--accent-foreground);
-      }
+}
+.sl-spreepay .hover\:bg-primary {
+  .sl-spreepay &:hover {
+    @media (hover: hover) {
+      background-color: var(--primary);
     }
   }
-  .sl-spreepay .hover\:text-white {
-    .sl-spreepay &:hover {
-      @media (hover: hover) {
-        color: var(--color-white);
+}
+.sl-spreepay .hover\:bg-primary\/90 {
+  .sl-spreepay &:hover {
+    @media (hover: hover) {
+      background-color: var(--primary);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--primary) 90%, transparent);
       }
     }
   }
-  .sl-spreepay .hover\:underline {
-    .sl-spreepay &:hover {
-      @media (hover: hover) {
-        text-decoration-line: underline;
+}
+.sl-spreepay .hover\:bg-secondary\/80 {
+  .sl-spreepay &:hover {
+    @media (hover: hover) {
+      background-color: var(--secondary);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--secondary) 80%, transparent);
       }
     }
   }
-  .sl-spreepay .hover\:opacity-100 {
-    .sl-spreepay &:hover {
-      @media (hover: hover) {
-        opacity: 100%;
-      }
+}
+.sl-spreepay .hover\:text-accent-foreground {
+  .sl-spreepay &:hover {
+    @media (hover: hover) {
+      color: var(--accent-foreground);
     }
   }
-  .sl-spreepay .focus\:ring-2 {
-    .sl-spreepay &: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),
-        var(--tw-inset-ring-shadow),
-        var(--tw-ring-offset-shadow),
-        var(--tw-ring-shadow),
-        var(--tw-shadow);
+}
+.sl-spreepay .hover\:text-white {
+  .sl-spreepay &:hover {
+    @media (hover: hover) {
+      color: var(--color-white);
     }
   }
-  .sl-spreepay .focus\:ring-ring {
-    .sl-spreepay &:focus {
-      --tw-ring-color: var(--ring);
+}
+.sl-spreepay .hover\:underline {
+  .sl-spreepay &:hover {
+    @media (hover: hover) {
+      text-decoration-line: underline;
     }
   }
-  .sl-spreepay .focus\:ring-offset-2 {
-    .sl-spreepay &: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 .hover\:opacity-100 {
+  .sl-spreepay &:hover {
+    @media (hover: hover) {
+      opacity: 100%;
     }
   }
-  .sl-spreepay .focus\:outline-hidden {
-    .sl-spreepay &:focus {
-      --tw-outline-style: none;
-      outline-style: none;
-      @media (forced-colors: active) {
-        outline: 2px solid transparent;
-        outline-offset: 2px;
-      }
-    }
+}
+.sl-spreepay .focus\:ring-2 {
+  .sl-spreepay &: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),
+      var(--tw-inset-ring-shadow),
+      var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow),
+      var(--tw-shadow);
   }
-  .sl-spreepay .focus-visible\:border-ring {
-    .sl-spreepay &:focus-visible {
-      border-color: var(--ring);
-    }
+}
+.sl-spreepay .focus\:ring-ring {
+  .sl-spreepay &:focus {
+    --tw-ring-color: var(--ring);
   }
-  .sl-spreepay .focus-visible\:ring-1 {
-    .sl-spreepay &: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),
-        var(--tw-inset-ring-shadow),
-        var(--tw-ring-offset-shadow),
-        var(--tw-ring-shadow),
-        var(--tw-shadow);
-    }
+}
+.sl-spreepay .focus\:ring-offset-2 {
+  .sl-spreepay &: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-visible\:ring-\[3px\] {
-    .sl-spreepay &: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),
-        var(--tw-inset-ring-shadow),
-        var(--tw-ring-offset-shadow),
-        var(--tw-ring-shadow),
-        var(--tw-shadow);
+}
+.sl-spreepay .focus\:outline-hidden {
+  .sl-spreepay &:focus {
+    --tw-outline-style: none;
+    outline-style: none;
+    @media (forced-colors: active) {
+      outline: 2px solid transparent;
+      outline-offset: 2px;
     }
   }
-  .sl-spreepay .focus-visible\:ring-destructive {
-    .sl-spreepay &:focus-visible {
-      --tw-ring-color: var(--destructive);
-    }
+}
+.sl-spreepay .focus-visible\:border-ring {
+  .sl-spreepay &:focus-visible {
+    border-color: var(--ring);
   }
-  .sl-spreepay .focus-visible\:ring-destructive\/20 {
-    .sl-spreepay &: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);
-      }
-    }
+}
+.sl-spreepay .focus-visible\:ring-1 {
+  .sl-spreepay &: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),
+      var(--tw-inset-ring-shadow),
+      var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow),
+      var(--tw-shadow);
   }
-  .sl-spreepay .focus-visible\:ring-ring {
-    .sl-spreepay &:focus-visible {
-      --tw-ring-color: var(--ring);
-    }
+}
+.sl-spreepay .focus-visible\:ring-\[3px\] {
+  .sl-spreepay &: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),
+      var(--tw-inset-ring-shadow),
+      var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow),
+      var(--tw-shadow);
   }
-  .sl-spreepay .focus-visible\:ring-ring\/50 {
-    .sl-spreepay &: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);
-      }
-    }
+}
+.sl-spreepay .focus-visible\:ring-destructive {
+  .sl-spreepay &:focus-visible {
+    --tw-ring-color: var(--destructive);
   }
-  .sl-spreepay .focus-visible\:ring-offset-1 {
-    .sl-spreepay &: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\:ring-destructive\/20 {
+  .sl-spreepay &: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);
     }
   }
-  .sl-spreepay .focus-visible\:outline-none {
-    .sl-spreepay &:focus-visible {
-      --tw-outline-style: none;
-      outline-style: none;
-    }
+}
+.sl-spreepay .focus-visible\:ring-ring {
+  .sl-spreepay &:focus-visible {
+    --tw-ring-color: var(--ring);
   }
-  .sl-spreepay .disabled\:pointer-events-none {
-    .sl-spreepay &:disabled {
-      pointer-events: none;
+}
+.sl-spreepay .focus-visible\:ring-ring\/50 {
+  .sl-spreepay &: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);
     }
   }
-  .sl-spreepay .disabled\:cursor-not-allowed {
-    .sl-spreepay &:disabled {
-      cursor: not-allowed;
-    }
+}
+.sl-spreepay .focus-visible\:ring-offset-1 {
+  .sl-spreepay &: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 .disabled\:opacity-50 {
-    .sl-spreepay &:disabled {
-      opacity: 50%;
-    }
+}
+.sl-spreepay .focus-visible\:outline-none {
+  .sl-spreepay &:focus-visible {
+    --tw-outline-style: none;
+    outline-style: none;
   }
-  .sl-spreepay .has-\[\>svg\]\:px-2\.5 {
-    .sl-spreepay &:has(> svg) {
-      padding-inline: calc(var(--spacing) * 2.5);
-    }
+}
+.sl-spreepay .disabled\:pointer-events-none {
+  .sl-spreepay &:disabled {
+    pointer-events: none;
   }
-  .sl-spreepay .has-\[\>svg\]\:px-3 {
-    .sl-spreepay &:has(> svg) {
-      padding-inline: calc(var(--spacing) * 3);
-    }
+}
+.sl-spreepay .disabled\:cursor-not-allowed {
+  .sl-spreepay &:disabled {
+    cursor: not-allowed;
   }
-  .sl-spreepay .has-\[\>svg\]\:px-4 {
-    .sl-spreepay &:has(> svg) {
-      padding-inline: calc(var(--spacing) * 4);
-    }
+}
+.sl-spreepay .disabled\:opacity-50 {
+  .sl-spreepay &:disabled {
+    opacity: 50%;
   }
-  .sl-spreepay .has-\[\>svg\]\:px-6 {
-    .sl-spreepay &:has(> svg) {
-      padding-inline: calc(var(--spacing) * 6);
-    }
+}
+.sl-spreepay .has-\[\>svg\]\:px-2\.5 {
+  .sl-spreepay &:has(> svg) {
+    padding-inline: calc(var(--spacing) * 2.5);
   }
-  .sl-spreepay .aria-invalid\:border-destructive {
-    .sl-spreepay &[aria-invalid=true] {
-      border-color: var(--destructive);
-    }
+}
+.sl-spreepay .has-\[\>svg\]\:px-3 {
+  .sl-spreepay &:has(> svg) {
+    padding-inline: calc(var(--spacing) * 3);
   }
-  .sl-spreepay .aria-invalid\:ring-destructive\/20 {
-    .sl-spreepay &[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);
-      }
-    }
+}
+.sl-spreepay .has-\[\>svg\]\:px-4 {
+  .sl-spreepay &:has(> svg) {
+    padding-inline: calc(var(--spacing) * 4);
   }
-  .sl-spreepay .data-\[state\=checked\]\:translate-x-\[calc\(100\%-2px\)\] {
-    .sl-spreepay &[data-state=checked] {
-      --tw-translate-x: calc(100% - 2px);
-      translate: var(--tw-translate-x) var(--tw-translate-y);
-    }
+}
+.sl-spreepay .has-\[\>svg\]\:px-6 {
+  .sl-spreepay &:has(> svg) {
+    padding-inline: calc(var(--spacing) * 6);
   }
-  .sl-spreepay .data-\[state\=checked\]\:border-primary {
-    .sl-spreepay &[data-state=checked] {
-      border-color: var(--primary);
-    }
+}
+.sl-spreepay .aria-invalid\:border-destructive {
+  .sl-spreepay &[aria-invalid=true] {
+    border-color: var(--destructive);
   }
-  .sl-spreepay .data-\[state\=checked\]\:bg-primary {
-    .sl-spreepay &[data-state=checked] {
-      background-color: var(--primary);
+}
+.sl-spreepay .aria-invalid\:ring-destructive\/20 {
+  .sl-spreepay &[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);
     }
   }
-  .sl-spreepay .data-\[state\=checked\]\:text-primary-foreground {
-    .sl-spreepay &[data-state=checked] {
-      color: var(--primary-foreground);
-    }
+}
+.sl-spreepay .data-\[state\=checked\]\:translate-x-\[calc\(100\%-2px\)\] {
+  .sl-spreepay &[data-state=checked] {
+    --tw-translate-x: calc(100% - 2px);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
   }
-  .sl-spreepay .data-\[state\=closed\]\:animate-out {
-    .sl-spreepay &[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\=checked\]\:border-primary {
+  .sl-spreepay &[data-state=checked] {
+    border-color: var(--primary);
   }
-  .sl-spreepay .data-\[state\=closed\]\:fade-out-0 {
-    .sl-spreepay &[data-state=closed] {
-      --tw-exit-opacity: calc(0/100);
-      --tw-exit-opacity: 0;
-    }
+}
+.sl-spreepay .data-\[state\=checked\]\:bg-primary {
+  .sl-spreepay &[data-state=checked] {
+    background-color: var(--primary);
   }
-  .sl-spreepay .data-\[state\=closed\]\:zoom-out-95 {
-    .sl-spreepay &[data-state=closed] {
-      --tw-exit-scale: calc(95*1%);
-      --tw-exit-scale: .95;
-    }
+}
+.sl-spreepay .data-\[state\=checked\]\:text-primary-foreground {
+  .sl-spreepay &[data-state=checked] {
+    color: var(--primary-foreground);
   }
-  .sl-spreepay .data-\[state\=open\]\:animate-in {
-    .sl-spreepay &[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\=closed\]\:animate-out {
+  .sl-spreepay &[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\=open\]\:bg-accent {
-    .sl-spreepay &[data-state=open] {
-      background-color: var(--accent);
-    }
+}
+.sl-spreepay .data-\[state\=closed\]\:fade-out-0 {
+  .sl-spreepay &[data-state=closed] {
+    --tw-exit-opacity: calc(0/100);
+    --tw-exit-opacity: 0;
   }
-  .sl-spreepay .data-\[state\=open\]\:text-muted-foreground {
-    .sl-spreepay &[data-state=open] {
-      color: var(--muted-foreground);
-    }
+}
+.sl-spreepay .data-\[state\=closed\]\:zoom-out-95 {
+  .sl-spreepay &[data-state=closed] {
+    --tw-exit-scale: calc(95*1%);
+    --tw-exit-scale: .95;
   }
-  .sl-spreepay .data-\[state\=open\]\:fade-in-0 {
-    .sl-spreepay &[data-state=open] {
-      --tw-enter-opacity: calc(0/100);
-      --tw-enter-opacity: 0;
-    }
+}
+.sl-spreepay .data-\[state\=open\]\:animate-in {
+  .sl-spreepay &[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\]\:zoom-in-95 {
-    .sl-spreepay &[data-state=open] {
-      --tw-enter-scale: calc(95*1%);
-      --tw-enter-scale: .95;
-    }
+}
+.sl-spreepay .data-\[state\=open\]\:bg-accent {
+  .sl-spreepay &[data-state=open] {
+    background-color: var(--accent);
   }
-  .sl-spreepay .data-\[state\=unchecked\]\:translate-x-0 {
-    .sl-spreepay &[data-state=unchecked] {
-      --tw-translate-x: calc(var(--spacing) * 0);
-      translate: var(--tw-translate-x) var(--tw-translate-y);
-    }
+}
+.sl-spreepay .data-\[state\=open\]\:text-muted-foreground {
+  .sl-spreepay &[data-state=open] {
+    color: var(--muted-foreground);
   }
-  .sl-spreepay .data-\[state\=unchecked\]\:bg-input {
-    .sl-spreepay &[data-state=unchecked] {
-      background-color: var(--input);
-    }
+}
+.sl-spreepay .data-\[state\=open\]\:fade-in-0 {
+  .sl-spreepay &[data-state=open] {
+    --tw-enter-opacity: calc(0/100);
+    --tw-enter-opacity: 0;
   }
-  .sl-spreepay .sm\:max-w-lg {
-    @media (width >= 40rem) {
-      max-width: var(--container-lg);
-    }
+}
+.sl-spreepay .data-\[state\=open\]\:zoom-in-95 {
+  .sl-spreepay &[data-state=open] {
+    --tw-enter-scale: calc(95*1%);
+    --tw-enter-scale: .95;
   }
-  .sl-spreepay .sm\:flex-row {
-    @media (width >= 40rem) {
-      flex-direction: row;
-    }
+}
+.sl-spreepay .data-\[state\=unchecked\]\:translate-x-0 {
+  .sl-spreepay &[data-state=unchecked] {
+    --tw-translate-x: calc(var(--spacing) * 0);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
   }
-  .sl-spreepay .sm\:justify-end {
-    @media (width >= 40rem) {
-      justify-content: flex-end;
-    }
+}
+.sl-spreepay .data-\[state\=unchecked\]\:bg-input {
+  .sl-spreepay &[data-state=unchecked] {
+    background-color: var(--input);
   }
-  .sl-spreepay .sm\:text-left {
-    @media (width >= 40rem) {
-      text-align: left;
-    }
+}
+.sl-spreepay .sm\:max-w-lg {
+  @media (width >= 40rem) {
+    max-width: var(--container-lg);
   }
-  .sl-spreepay .md\:block {
-    @media (width >= 48rem) {
-      display: block;
-    }
+}
+.sl-spreepay .sm\:flex-row {
+  @media (width >= 40rem) {
+    flex-direction: row;
   }
-  .sl-spreepay .dark\:border-input {
-    .sl-spreepay &:is(.dark *) {
-      border-color: var(--input);
-    }
+}
+.sl-spreepay .sm\:justify-end {
+  @media (width >= 40rem) {
+    justify-content: flex-end;
   }
-  .sl-spreepay .dark\:bg-destructive\/60 {
-    .sl-spreepay &:is(.dark *) {
-      background-color: var(--destructive);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--destructive) 60%, transparent);
-      }
-    }
+}
+.sl-spreepay .sm\:text-left {
+  @media (width >= 40rem) {
+    text-align: left;
   }
-  .sl-spreepay .dark\:bg-input\/30 {
-    .sl-spreepay &:is(.dark *) {
-      background-color: var(--input);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--input) 30%, transparent);
-      }
-    }
+}
+.sl-spreepay .md\:block {
+  @media (width >= 48rem) {
+    display: block;
   }
-  .sl-spreepay .dark\:hover\:bg-accent\/50 {
-    .sl-spreepay &:is(.dark *) {
-      .sl-spreepay &:hover {
-        @media (hover: hover) {
-          background-color: var(--accent);
-          @supports (color: color-mix(in lab, red, red)) {
-            background-color: color-mix(in oklab, var(--accent) 50%, transparent);
-          }
-        }
-      }
+}
+.sl-spreepay .dark\:border-input {
+  .sl-spreepay &:is(.dark *) {
+    border-color: var(--input);
+  }
+}
+.sl-spreepay .dark\:bg-destructive\/60 {
+  .sl-spreepay &:is(.dark *) {
+    background-color: var(--destructive);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--destructive) 60%, transparent);
     }
   }
-  .sl-spreepay .dark\:hover\:bg-input\/50 {
-    .sl-spreepay &:is(.dark *) {
-      .sl-spreepay &:hover {
-        @media (hover: hover) {
-          background-color: var(--input);
-          @supports (color: color-mix(in lab, red, red)) {
-            background-color: color-mix(in oklab, var(--input) 50%, transparent);
-          }
-        }
-      }
+}
+.sl-spreepay .dark\:bg-input\/30 {
+  .sl-spreepay &:is(.dark *) {
+    background-color: var(--input);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--input) 30%, transparent);
     }
   }
-  .sl-spreepay .dark\:focus-visible\:ring-destructive\/40 {
-    .sl-spreepay &:is(.dark *) {
-      .sl-spreepay &:focus-visible {
-        --tw-ring-color: var(--destructive);
+}
+.sl-spreepay .dark\:hover\:bg-accent\/50 {
+  .sl-spreepay &:is(.dark *) {
+    .sl-spreepay &:hover {
+      @media (hover: hover) {
+        background-color: var(--accent);
         @supports (color: color-mix(in lab, red, red)) {
-          --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
+          background-color: color-mix(in oklab, var(--accent) 50%, transparent);
         }
       }
     }
   }
-  .sl-spreepay .dark\:aria-invalid\:ring-destructive\/40 {
-    .sl-spreepay &:is(.dark *) {
-      .sl-spreepay &[aria-invalid=true] {
-        --tw-ring-color: var(--destructive);
+}
+.sl-spreepay .dark\:hover\:bg-input\/50 {
+  .sl-spreepay &:is(.dark *) {
+    .sl-spreepay &:hover {
+      @media (hover: hover) {
+        background-color: var(--input);
         @supports (color: color-mix(in lab, red, red)) {
-          --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
+          background-color: color-mix(in oklab, var(--input) 50%, transparent);
         }
       }
     }
   }
-  .sl-spreepay .dark\:data-\[state\=checked\]\:bg-primary {
-    .sl-spreepay &:is(.dark *) {
-      .sl-spreepay &[data-state=checked] {
-        background-color: var(--primary);
+}
+.sl-spreepay .dark\:focus-visible\:ring-destructive\/40 {
+  .sl-spreepay &:is(.dark *) {
+    .sl-spreepay &: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);
       }
     }
   }
-  .sl-spreepay .dark\:data-\[state\=checked\]\:bg-primary-foreground {
-    .sl-spreepay &:is(.dark *) {
-      .sl-spreepay &[data-state=checked] {
-        background-color: var(--primary-foreground);
+}
+.sl-spreepay .dark\:aria-invalid\:ring-destructive\/40 {
+  .sl-spreepay &:is(.dark *) {
+    .sl-spreepay &[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);
       }
     }
   }
-  .sl-spreepay .dark\:data-\[state\=unchecked\]\:bg-foreground {
-    .sl-spreepay &:is(.dark *) {
-      .sl-spreepay &[data-state=unchecked] {
-        background-color: var(--foreground);
-      }
+}
+.sl-spreepay .dark\:data-\[state\=checked\]\:bg-primary {
+  .sl-spreepay &:is(.dark *) {
+    .sl-spreepay &[data-state=checked] {
+      background-color: var(--primary);
     }
   }
-  .sl-spreepay .dark\:data-\[state\=unchecked\]\:bg-input\/80 {
-    .sl-spreepay &:is(.dark *) {
-      .sl-spreepay &[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);
-        }
-      }
+}
+.sl-spreepay .dark\:data-\[state\=checked\]\:bg-primary-foreground {
+  .sl-spreepay &:is(.dark *) {
+    .sl-spreepay &[data-state=checked] {
+      background-color: var(--primary-foreground);
     }
   }
-  .sl-spreepay .\[\&_svg\]\:pointer-events-none {
-    .sl-spreepay & svg {
-      pointer-events: none;
+}
+.sl-spreepay .dark\:data-\[state\=unchecked\]\:bg-foreground {
+  .sl-spreepay &:is(.dark *) {
+    .sl-spreepay &[data-state=unchecked] {
+      background-color: var(--foreground);
     }
   }
-  .sl-spreepay .\[\&_svg\]\:shrink-0 {
-    .sl-spreepay & svg {
-      flex-shrink: 0;
+}
+.sl-spreepay .dark\:data-\[state\=unchecked\]\:bg-input\/80 {
+  .sl-spreepay &:is(.dark *) {
+    .sl-spreepay &[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);
+      }
     }
   }
-  .sl-spreepay .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 {
-    .sl-spreepay & svg:not([class*=size-]) {
-      width: calc(var(--spacing) * 4);
-      height: calc(var(--spacing) * 4);
-    }
+}
+.sl-spreepay .\[\&_svg\]\:pointer-events-none {
+  .sl-spreepay & svg {
+    pointer-events: none;
+  }
+}
+.sl-spreepay .\[\&_svg\]\:shrink-0 {
+  .sl-spreepay & svg {
+    flex-shrink: 0;
+  }
+}
+.sl-spreepay .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 {
+  .sl-spreepay & svg:not([class*=size-]) {
+    width: calc(var(--spacing) * 4);
+    height: calc(var(--spacing) * 4);
   }
 }
 @property --tw-animation-delay { syntax: "*"; inherits: false; initial-value: 0s; }
@@ -1375,7 +1367,6 @@
   --primary-foreground: oklch(0.985 0 0);
   --secondary: oklch(0.97 0 0);
   --secondary-foreground: oklch(0.205 0 0);
-  --tertiary: oklch(0.9 0 0);
   --muted: oklch(0.97 0 0);
   --muted-foreground: oklch(0.556 0 0);
   --accent: oklch(0.97 0 0);
@@ -1411,7 +1402,6 @@
   --primary-foreground: oklch(0.205 0 0);
   --secondary: oklch(0.269 0 0);
   --secondary-foreground: oklch(0.985 0 0);
-  --tertiary: var(--tertiary);
   --muted: oklch(0.269 0 0);
   --muted-foreground: oklch(0.708 0 0);
   --accent: oklch(0.269 0 0);
@@ -1451,9 +1441,6 @@
 .sl-spreepay {
   --primary: #022664;
 }
-.sl-spreepay * {
-  all: revert-layer;
-}
 .sl-spreepay .sl-spreepay__portal {
   position: relative;
 }