bitsnap-react 1.2.1 → 1.3.0

package/dist/index.css

@@ -25,14 +25,18 @@
     --color-red-500: oklch(63.7% 0.237 25.331);
     --color-amber-400: oklch(82.8% 0.189 84.429);
     --color-amber-500: oklch(76.9% 0.188 70.08);
+    --color-yellow-500: oklch(79.5% 0.184 86.047);
+    --color-yellow-700: oklch(55.4% 0.135 66.442);
     --color-green-400: oklch(79.2% 0.209 151.711);
     --color-green-500: oklch(72.3% 0.219 149.579);
     --color-blue-500: oklch(62.3% 0.214 259.815);
     --color-blue-600: oklch(54.6% 0.245 262.881);
+    --color-neutral-50: oklch(98.5% 0 0);
     --color-neutral-100: oklch(97% 0 0);
     --color-neutral-200: oklch(92.2% 0 0);
     --color-neutral-300: oklch(87% 0 0);
     --color-neutral-400: oklch(70.8% 0 0);
+    --color-neutral-500: oklch(55.6% 0 0);
     --color-neutral-600: oklch(43.9% 0 0);
     --color-neutral-700: oklch(37.1% 0 0);
     --color-neutral-800: oklch(26.9% 0 0);
@@ -42,6 +46,7 @@
     --color-white: #fff;
     --spacing: 0.25rem;
     --container-md: 28rem;
+    --container-lg: 32rem;
     --text-xs: 0.75rem;
     --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
@@ -65,6 +70,7 @@
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
+    --radius-xs: 0.125rem;
     --radius-2xl: 1rem;
     --animate-spin: spin 1s linear infinite;
     --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
@@ -277,6 +283,10 @@
   }
 }
 @layer utilities {
+  .bitsnap-checkout .\@container\/card-header {
+    container-type: inline-size;
+    container-name: card-header;
+  }
   .bitsnap-checkout .pointer-events-none {
     pointer-events: none;
   }
@@ -321,21 +331,33 @@
   .bitsnap-checkout .top-4 {
     top: calc(var(--spacing) * 4);
   }
+  .bitsnap-checkout .top-\[50\%\] {
+    top: 50%;
+  }
   .bitsnap-checkout .right-0 {
     right: calc(var(--spacing) * 0);
   }
   .bitsnap-checkout .right-4 {
     right: calc(var(--spacing) * 4);
   }
+  .bitsnap-checkout .right-6 {
+    right: calc(var(--spacing) * 6);
+  }
   .bitsnap-checkout .bottom-0 {
     bottom: calc(var(--spacing) * 0);
   }
+  .bitsnap-checkout .bottom-6 {
+    bottom: calc(var(--spacing) * 6);
+  }
   .bitsnap-checkout .left-0 {
     left: calc(var(--spacing) * 0);
   }
   .bitsnap-checkout .left-1\/2 {
     left: calc(1/2 * 100%);
   }
+  .bitsnap-checkout .left-\[50\%\] {
+    left: 50%;
+  }
   .bitsnap-checkout .z-0 {
     z-index: 0;
   }
@@ -351,23 +373,14 @@
   .bitsnap-checkout .z-\[9999\] {
     z-index: 9999;
   }
-  .bitsnap-checkout .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;
-    }
+  .bitsnap-checkout .col-start-2 {
+    grid-column-start: 2;
+  }
+  .bitsnap-checkout .row-span-2 {
+    grid-row: span 2 / span 2;
+  }
+  .bitsnap-checkout .row-start-1 {
+    grid-row-start: 1;
   }
   .bitsnap-checkout .mx-2 {
     margin-inline: calc(var(--spacing) * 2);
@@ -375,9 +388,6 @@
   .bitsnap-checkout .mx-3 {
     margin-inline: calc(var(--spacing) * 3);
   }
-  .bitsnap-checkout .mx-auto {
-    margin-inline: auto;
-  }
   .bitsnap-checkout .my-1 {
     margin-block: calc(var(--spacing) * 1);
   }
@@ -393,6 +403,9 @@
   .bitsnap-checkout .mt-1\.5 {
     margin-top: calc(var(--spacing) * 1.5);
   }
+  .bitsnap-checkout .mt-2 {
+    margin-top: calc(var(--spacing) * 2);
+  }
   .bitsnap-checkout .mt-3 {
     margin-top: calc(var(--spacing) * 3);
   }
@@ -411,11 +424,20 @@
   .bitsnap-checkout .mr-2 {
     margin-right: calc(var(--spacing) * 2);
   }
+  .bitsnap-checkout .mb-1 {
+    margin-bottom: calc(var(--spacing) * 1);
+  }
+  .bitsnap-checkout .mb-2 {
+    margin-bottom: calc(var(--spacing) * 2);
+  }
   .bitsnap-checkout .mb-3 {
     margin-bottom: calc(var(--spacing) * 3);
   }
-  .bitsnap-checkout .mb-5 {
-    margin-bottom: calc(var(--spacing) * 5);
+  .bitsnap-checkout .mb-4 {
+    margin-bottom: calc(var(--spacing) * 4);
+  }
+  .bitsnap-checkout .ml-0 {
+    margin-left: calc(var(--spacing) * 0);
   }
   .bitsnap-checkout .ml-3 {
     margin-left: calc(var(--spacing) * 3);
@@ -493,6 +515,9 @@
   .bitsnap-checkout .h-auto {
     height: auto;
   }
+  .bitsnap-checkout .h-full {
+    height: 100%;
+  }
   .bitsnap-checkout .max-h-32 {
     max-height: calc(var(--spacing) * 32);
   }
@@ -505,8 +530,8 @@
   .bitsnap-checkout .max-h-\[70vh\] {
     max-height: 70vh;
   }
-  .bitsnap-checkout .min-h-screen {
-    min-height: 100vh;
+  .bitsnap-checkout .min-h-\[250px\] {
+    min-height: 250px;
   }
   .bitsnap-checkout .w-4 {
     width: calc(var(--spacing) * 4);
@@ -520,6 +545,12 @@
   .bitsnap-checkout .w-8 {
     width: calc(var(--spacing) * 8);
   }
+  .bitsnap-checkout .w-9 {
+    width: calc(var(--spacing) * 9);
+  }
+  .bitsnap-checkout .w-12 {
+    width: calc(var(--spacing) * 12);
+  }
   .bitsnap-checkout .w-72 {
     width: calc(var(--spacing) * 72);
   }
@@ -538,6 +569,9 @@
   .bitsnap-checkout .w-full {
     width: 100%;
   }
+  .bitsnap-checkout .w-px {
+    width: 1px;
+  }
   .bitsnap-checkout .max-w-28 {
     max-width: calc(var(--spacing) * 28);
   }
@@ -550,6 +584,9 @@
   .bitsnap-checkout .max-w-\[30\%\] {
     max-width: 30%;
   }
+  .bitsnap-checkout .max-w-\[calc\(100\%-2rem\)\] {
+    max-width: calc(100% - 2rem);
+  }
   .bitsnap-checkout .max-w-md {
     max-width: var(--container-md);
   }
@@ -581,10 +618,21 @@
     --tw-translate-x: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .bitsnap-checkout .translate-x-\[-50\%\] {
+    --tw-translate-x: -50%;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .bitsnap-checkout .-translate-y-1\/2 {
     --tw-translate-y: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .bitsnap-checkout .translate-y-\[-50\%\] {
+    --tw-translate-y: -50%;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .bitsnap-checkout .animate-caret-blink {
+    animation: caret-blink 1.25s ease-out infinite;
+  }
   .bitsnap-checkout .animate-in {
     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);
   }
@@ -615,9 +663,15 @@
   .bitsnap-checkout .list-disc {
     list-style-type: disc;
   }
+  .bitsnap-checkout .auto-rows-min {
+    grid-auto-rows: min-content;
+  }
   .bitsnap-checkout .grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
+  .bitsnap-checkout .grid-rows-\[auto_auto\] {
+    grid-template-rows: auto auto;
+  }
   .bitsnap-checkout .flex-col {
     flex-direction: column;
   }
@@ -645,6 +699,9 @@
   .bitsnap-checkout .justify-start {
     justify-content: flex-start;
   }
+  .bitsnap-checkout .gap-0 {
+    gap: calc(var(--spacing) * 0);
+  }
   .bitsnap-checkout .gap-1 {
     gap: calc(var(--spacing) * 1);
   }
@@ -663,6 +720,9 @@
   .bitsnap-checkout .gap-5 {
     gap: calc(var(--spacing) * 5);
   }
+  .bitsnap-checkout .gap-6 {
+    gap: calc(var(--spacing) * 6);
+  }
   .bitsnap-checkout .space-y-2 {
     .bitsnap-checkout :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -670,6 +730,13 @@
       margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
+  .bitsnap-checkout .space-y-6 {
+    .bitsnap-checkout :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
   .bitsnap-checkout .gap-x-1\.5 {
     -moz-column-gap: calc(var(--spacing) * 1.5);
     column-gap: calc(var(--spacing) * 1.5);
@@ -678,6 +745,12 @@
     -moz-column-gap: calc(var(--spacing) * 2);
     column-gap: calc(var(--spacing) * 2);
   }
+  .bitsnap-checkout .self-start {
+    align-self: flex-start;
+  }
+  .bitsnap-checkout .justify-self-end {
+    justify-self: flex-end;
+  }
   .bitsnap-checkout .truncate {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -698,6 +771,9 @@
   .bitsnap-checkout .rounded-full {
     border-radius: calc(infinity * 1px);
   }
+  .bitsnap-checkout .rounded-lg {
+    border-radius: var(--radius);
+  }
   .bitsnap-checkout .rounded-md {
     border-radius: calc(var(--radius) - 2px);
   }
@@ -707,6 +783,9 @@
   .bitsnap-checkout .rounded-xl {
     border-radius: calc(var(--radius) + 4px);
   }
+  .bitsnap-checkout .rounded-xs {
+    border-radius: var(--radius-xs);
+  }
   .bitsnap-checkout .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -715,15 +794,29 @@
     border-style: var(--tw-border-style);
     border-width: 2px;
   }
+  .bitsnap-checkout .border-y {
+    border-block-style: var(--tw-border-style);
+    border-block-width: 1px;
+  }
+  .bitsnap-checkout .border-r {
+    border-right-style: var(--tw-border-style);
+    border-right-width: 1px;
+  }
   .bitsnap-checkout .border-input {
     border-color: var(--input);
   }
+  .bitsnap-checkout .border-neutral-200 {
+    border-color: var(--color-neutral-200);
+  }
   .bitsnap-checkout .border-neutral-400 {
     border-color: var(--color-neutral-400);
   }
   .bitsnap-checkout .border-neutral-700 {
     border-color: var(--color-neutral-700);
   }
+  .bitsnap-checkout .border-red-400 {
+    border-color: var(--color-red-400);
+  }
   .bitsnap-checkout .border-transparent {
     border-color: transparent;
   }
@@ -751,9 +844,18 @@
       background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
     }
   }
+  .bitsnap-checkout .bg-card {
+    background-color: var(--card);
+  }
   .bitsnap-checkout .bg-destructive {
     background-color: var(--destructive);
   }
+  .bitsnap-checkout .bg-foreground {
+    background-color: var(--foreground);
+  }
+  .bitsnap-checkout .bg-neutral-50 {
+    background-color: var(--color-neutral-50);
+  }
   .bitsnap-checkout .bg-neutral-100 {
     background-color: var(--color-neutral-100);
   }
@@ -787,9 +889,6 @@
   .bitsnap-checkout .p-2 {
     padding: calc(var(--spacing) * 2);
   }
-  .bitsnap-checkout .p-3 {
-    padding: calc(var(--spacing) * 3);
-  }
   .bitsnap-checkout .p-4 {
     padding: calc(var(--spacing) * 4);
   }
@@ -817,6 +916,15 @@
   .bitsnap-checkout .py-3 {
     padding-block: calc(var(--spacing) * 3);
   }
+  .bitsnap-checkout .py-6 {
+    padding-block: calc(var(--spacing) * 6);
+  }
+  .bitsnap-checkout .py-8 {
+    padding-block: calc(var(--spacing) * 8);
+  }
+  .bitsnap-checkout .pt-2 {
+    padding-top: calc(var(--spacing) * 2);
+  }
   .bitsnap-checkout .pt-3 {
     padding-top: calc(var(--spacing) * 3);
   }
@@ -838,6 +946,9 @@
   .bitsnap-checkout .pb-3 {
     padding-bottom: calc(var(--spacing) * 3);
   }
+  .bitsnap-checkout .pl-0 {
+    padding-left: calc(var(--spacing) * 0);
+  }
   .bitsnap-checkout .pl-3 {
     padding-left: calc(var(--spacing) * 3);
   }
@@ -917,18 +1028,33 @@
   .bitsnap-checkout .text-black {
     color: var(--color-black);
   }
+  .bitsnap-checkout .text-blue-500 {
+    color: var(--color-blue-500);
+  }
   .bitsnap-checkout .text-blue-600 {
     color: var(--color-blue-600);
   }
+  .bitsnap-checkout .text-card-foreground {
+    color: var(--card-foreground);
+  }
+  .bitsnap-checkout .text-destructive {
+    color: var(--destructive);
+  }
   .bitsnap-checkout .text-green-400 {
     color: var(--color-green-400);
   }
   .bitsnap-checkout .text-green-500 {
     color: var(--color-green-500);
   }
+  .bitsnap-checkout .text-muted-foreground {
+    color: var(--muted-foreground);
+  }
   .bitsnap-checkout .text-neutral-200 {
     color: var(--color-neutral-200);
   }
+  .bitsnap-checkout .text-neutral-500 {
+    color: var(--color-neutral-500);
+  }
   .bitsnap-checkout .text-neutral-600 {
     color: var(--color-neutral-600);
   }
@@ -965,15 +1091,21 @@
   .bitsnap-checkout .text-white {
     color: var(--color-white);
   }
+  .bitsnap-checkout .text-yellow-500 {
+    color: var(--color-yellow-500);
+  }
+  .bitsnap-checkout .text-yellow-700 {
+    color: var(--color-yellow-700);
+  }
   .bitsnap-checkout .underline-offset-4 {
     text-underline-offset: 4px;
   }
+  .bitsnap-checkout .opacity-50 {
+    opacity: 50%;
+  }
   .bitsnap-checkout .opacity-70 {
     opacity: 70%;
   }
-  .bitsnap-checkout .opacity-80 {
-    opacity: 80%;
-  }
   .bitsnap-checkout .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:
@@ -1031,6 +1163,9 @@
   .bitsnap-checkout .ring-black {
     --tw-ring-color: var(--color-black);
   }
+  .bitsnap-checkout .ring-offset-background {
+    --tw-ring-offset-color: var(--background);
+  }
   .bitsnap-checkout .ring-offset-white {
     --tw-ring-offset-color: var(--color-white);
   }
@@ -1117,6 +1252,10 @@
     --tw-duration: 200ms;
     transition-duration: 200ms;
   }
+  .bitsnap-checkout .duration-1000 {
+    --tw-duration: 1000ms;
+    transition-duration: 1000ms;
+  }
   .bitsnap-checkout .fade-in-0 {
     --tw-enter-opacity: calc(0/100);
     --tw-enter-opacity: 0;
@@ -1228,6 +1367,24 @@
       color: var(--muted-foreground);
     }
   }
+  .bitsnap-checkout .first\:rounded-l-md {
+    .bitsnap-checkout &:first-child {
+      border-top-left-radius: calc(var(--radius) - 2px);
+      border-bottom-left-radius: calc(var(--radius) - 2px);
+    }
+  }
+  .bitsnap-checkout .first\:border-l {
+    .bitsnap-checkout &:first-child {
+      border-left-style: var(--tw-border-style);
+      border-left-width: 1px;
+    }
+  }
+  .bitsnap-checkout .last\:rounded-r-md {
+    .bitsnap-checkout &:last-child {
+      border-top-right-radius: calc(var(--radius) - 2px);
+      border-bottom-right-radius: calc(var(--radius) - 2px);
+    }
+  }
   .bitsnap-checkout .hover\:bg-accent {
     .bitsnap-checkout &:hover {
       @media (hover: hover) {
@@ -1245,6 +1402,13 @@
       }
     }
   }
+  .bitsnap-checkout .hover\:bg-neutral-50 {
+    .bitsnap-checkout &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-neutral-50);
+      }
+    }
+  }
   .bitsnap-checkout .hover\:bg-neutral-300 {
     .bitsnap-checkout &:hover {
       @media (hover: hover) {
@@ -1286,6 +1450,13 @@
       }
     }
   }
+  .bitsnap-checkout .hover\:bg-transparent {
+    .bitsnap-checkout &:hover {
+      @media (hover: hover) {
+        background-color: transparent;
+      }
+    }
+  }
   .bitsnap-checkout .hover\:font-medium {
     .bitsnap-checkout &:hover {
       @media (hover: hover) {
@@ -1315,6 +1486,19 @@
       }
     }
   }
+  .bitsnap-checkout .hover\:shadow-xl {
+    .bitsnap-checkout &:hover {
+      @media (hover: hover) {
+        --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px 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);
+      }
+    }
+  }
   .bitsnap-checkout .focus\:border-blue-500 {
     .bitsnap-checkout &:focus {
       border-color: var(--color-blue-500);
@@ -1352,12 +1536,27 @@
       --tw-ring-color: var(--color-neutral-950);
     }
   }
+  .bitsnap-checkout .focus\:ring-ring {
+    .bitsnap-checkout &:focus {
+      --tw-ring-color: var(--ring);
+    }
+  }
   .bitsnap-checkout .focus\:ring-offset-2 {
     .bitsnap-checkout &: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);
     }
   }
+  .bitsnap-checkout .focus\:outline-hidden {
+    .bitsnap-checkout &:focus {
+      --tw-outline-style: none;
+      outline-style: none;
+      @media (forced-colors: active) {
+        outline: 2px solid transparent;
+        outline-offset: 2px;
+      }
+    }
+  }
   .bitsnap-checkout .focus\:outline-none {
     .bitsnap-checkout &:focus {
       --tw-outline-style: none;
@@ -1416,6 +1615,16 @@
       opacity: 50%;
     }
   }
+  .bitsnap-checkout .has-disabled\:opacity-50 {
+    .bitsnap-checkout &:has(*:disabled) {
+      opacity: 50%;
+    }
+  }
+  .bitsnap-checkout .has-data-\[slot\=card-action\]\:grid-cols-\[1fr_auto\] {
+    .bitsnap-checkout &:has(*[data-slot=card-action]) {
+      grid-template-columns: 1fr auto;
+    }
+  }
   .bitsnap-checkout .has-\[\>svg\]\:px-2\.5 {
     .bitsnap-checkout &:has(> svg) {
       padding-inline: calc(var(--spacing) * 2.5);
@@ -1444,6 +1653,52 @@
       }
     }
   }
+  .bitsnap-checkout .data-\[active\=true\]\:z-10 {
+    .bitsnap-checkout &[data-active=true] {
+      z-index: 10;
+    }
+  }
+  .bitsnap-checkout .data-\[active\=true\]\:border-ring {
+    .bitsnap-checkout &[data-active=true] {
+      border-color: var(--ring);
+    }
+  }
+  .bitsnap-checkout .data-\[active\=true\]\:ring-\[3px\] {
+    .bitsnap-checkout &[data-active=true] {
+      --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);
+    }
+  }
+  .bitsnap-checkout .data-\[active\=true\]\:ring-ring\/50 {
+    .bitsnap-checkout &[data-active=true] {
+      --tw-ring-color: var(--ring);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
+      }
+    }
+  }
+  .bitsnap-checkout .data-\[active\=true\]\:aria-invalid\:border-destructive {
+    .bitsnap-checkout &[data-active=true] {
+      .bitsnap-checkout &[aria-invalid=true] {
+        border-color: var(--destructive);
+      }
+    }
+  }
+  .bitsnap-checkout .data-\[active\=true\]\:aria-invalid\:ring-destructive\/20 {
+    .bitsnap-checkout &[data-active=true] {
+      .bitsnap-checkout &[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);
+        }
+      }
+    }
+  }
   .bitsnap-checkout .data-\[side\=bottom\]\:slide-in-from-top-2 {
     .bitsnap-checkout &[data-side=bottom] {
       --tw-enter-translate-y: calc(2*var(--spacing)*-1);
@@ -1502,6 +1757,16 @@
       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);
     }
   }
+  .bitsnap-checkout .data-\[state\=open\]\:bg-accent {
+    .bitsnap-checkout &[data-state=open] {
+      background-color: var(--accent);
+    }
+  }
+  .bitsnap-checkout .data-\[state\=open\]\:text-muted-foreground {
+    .bitsnap-checkout &[data-state=open] {
+      color: var(--muted-foreground);
+    }
+  }
   .bitsnap-checkout .data-\[state\=open\]\:fade-in-0 {
     .bitsnap-checkout &[data-state=open] {
       --tw-enter-opacity: calc(0/100);
@@ -1525,6 +1790,16 @@
       background-color: var(--input);
     }
   }
+  .bitsnap-checkout .sm\:max-w-\[425px\] {
+    @media (width >= 40rem) {
+      max-width: 425px;
+    }
+  }
+  .bitsnap-checkout .sm\:max-w-lg {
+    @media (width >= 40rem) {
+      max-width: var(--container-lg);
+    }
+  }
   .bitsnap-checkout .sm\:max-w-none {
     @media (width >= 40rem) {
       max-width: none;
@@ -1545,15 +1820,25 @@
       justify-content: flex-end;
     }
   }
+  .bitsnap-checkout .sm\:text-left {
+    @media (width >= 40rem) {
+      text-align: left;
+    }
+  }
   .bitsnap-checkout .sm\:text-sm {
     @media (width >= 40rem) {
       font-size: var(--text-sm);
       line-height: var(--tw-leading, var(--text-sm--line-height));
     }
   }
-  .bitsnap-checkout .md\:inline {
+  .bitsnap-checkout .md\:right-8 {
     @media (width >= 48rem) {
-      display: inline;
+      right: calc(var(--spacing) * 8);
+    }
+  }
+  .bitsnap-checkout .md\:bottom-8 {
+    @media (width >= 48rem) {
+      bottom: calc(var(--spacing) * 8);
     }
   }
   .bitsnap-checkout .md\:w-\[25\%\] {
@@ -1571,11 +1856,6 @@
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
   }
-  .bitsnap-checkout .md\:p-5 {
-    @media (width >= 48rem) {
-      padding: calc(var(--spacing) * 5);
-    }
-  }
   .bitsnap-checkout .md\:px-5 {
     @media (width >= 48rem) {
       padding-inline: calc(var(--spacing) * 5);
@@ -1660,12 +1940,6 @@
       line-height: var(--tw-leading, var(--text-5xl--line-height));
     }
   }
-  .bitsnap-checkout .xl\:text-sm {
-    @media (width >= 80rem) {
-      font-size: var(--text-sm);
-      line-height: var(--tw-leading, var(--text-sm--line-height));
-    }
-  }
   .bitsnap-checkout .dark\:hidden {
     .bitsnap-checkout &:is(.dark *) {
       display: none;
@@ -1691,6 +1965,11 @@
       border-color: var(--color-neutral-700);
     }
   }
+  .bitsnap-checkout .dark\:border-neutral-800 {
+    .bitsnap-checkout &:is(.dark *) {
+      border-color: var(--color-neutral-800);
+    }
+  }
   .bitsnap-checkout .dark\:bg-destructive\/60 {
     .bitsnap-checkout &:is(.dark *) {
       background-color: var(--destructive);
@@ -1742,6 +2021,11 @@
       color: var(--color-neutral-400);
     }
   }
+  .bitsnap-checkout .dark\:text-neutral-500 {
+    .bitsnap-checkout &:is(.dark *) {
+      color: var(--color-neutral-500);
+    }
+  }
   .bitsnap-checkout .dark\:text-neutral-800 {
     .bitsnap-checkout &:is(.dark *) {
       color: var(--color-neutral-800);
@@ -1752,6 +2036,15 @@
       --tw-ring-offset-color: var(--color-neutral-950);
     }
   }
+  .bitsnap-checkout .dark\:hover\:border-neutral-800 {
+    .bitsnap-checkout &:is(.dark *) {
+      .bitsnap-checkout &:hover {
+        @media (hover: hover) {
+          border-color: var(--color-neutral-800);
+        }
+      }
+    }
+  }
   .bitsnap-checkout .dark\:hover\:bg-accent\/50 {
     .bitsnap-checkout &:is(.dark *) {
       .bitsnap-checkout &:hover {
@@ -1828,6 +2121,18 @@
       }
     }
   }
+  .bitsnap-checkout .dark\:data-\[active\=true\]\:aria-invalid\:ring-destructive\/40 {
+    .bitsnap-checkout &:is(.dark *) {
+      .bitsnap-checkout &[data-active=true] {
+        .bitsnap-checkout &[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);
+          }
+        }
+      }
+    }
+  }
   .bitsnap-checkout .dark\:data-\[state\=checked\]\:bg-primary-foreground {
     .bitsnap-checkout &:is(.dark *) {
       .bitsnap-checkout &[data-state=checked] {
@@ -1882,6 +2187,16 @@
       height: calc(var(--spacing) * 4);
     }
   }
+  .bitsnap-checkout .\[\.border-b\]\:pb-6 {
+    .bitsnap-checkout &:is(.border-b) {
+      padding-bottom: calc(var(--spacing) * 6);
+    }
+  }
+  .bitsnap-checkout .\[\.border-t\]\:pt-6 {
+    .bitsnap-checkout &:is(.border-t) {
+      padding-top: calc(var(--spacing) * 6);
+    }
+  }
 }
 @property --tw-animation-delay { syntax: "*"; inherits: false; initial-value: 0s; }
 @property --tw-animation-direction { syntax: "*"; inherits: false; initial-value: normal; }
@@ -2029,6 +2344,14 @@
     filter: blur(var(--tw-exit-blur,0));
   }
 }
+@keyframes caret-blink {
+  0%, 70%, 100% {
+    opacity: 1;
+  }
+  20%, 50% {
+    opacity: 0;
+  }
+}
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     .bitsnap-checkout *,