@ory/elements-react 1.0.0-next.17 → 1.0.0-next.18

package/dist/theme/default/index.css

@@ -365,9 +365,6 @@ video {
 .inset-0 {
   inset: 0px;
 }
-.z-10 {
-  z-index: 10;
-}
 .z-50 {
   z-index: 50;
 }
@@ -377,13 +374,8 @@ video {
 .-m-3 {
   margin: -0.75rem;
 }
-.mx-auto {
-  margin-left: auto;
-  margin-right: auto;
-}
-.my-auto {
-  margin-top: auto;
-  margin-bottom: auto;
+.m-auto {
+  margin: auto;
 }
 .mr-auto {
   margin-right: auto;
@@ -394,8 +386,8 @@ video {
 .mt-16 {
   margin-top: 4rem;
 }
-.mt-\[2px\] {
-  margin-top: 2px;
+.inline-block {
+  display: inline-block;
 }
 .flex {
   display: flex;
@@ -416,6 +408,14 @@ video {
   width: 2.5rem;
   height: 2.5rem;
 }
+.size-4 {
+  width: 1rem;
+  height: 1rem;
+}
+.size-5 {
+  width: 1.25rem;
+  height: 1.25rem;
+}
 .size-8 {
   width: 2rem;
   height: 2rem;
@@ -436,35 +436,17 @@ video {
 .h-5 {
   height: 1.25rem;
 }
-.h-8 {
-  height: 2rem;
-}
-.h-full {
-  height: 100%;
-}
 .max-h-10 {
   max-height: 2.5rem;
 }
+.min-h-5 {
+  min-height: 1.25rem;
+}
 .min-h-\[72px\] {
   min-height: 72px;
 }
-.w-10 {
-  width: 2.5rem;
-}
-.w-11 {
-  width: 2.75rem;
-}
-.w-4 {
-  width: 1rem;
-}
-.w-5 {
-  width: 1.25rem;
-}
-.w-8 {
-  width: 2rem;
-}
-.w-80 {
-  width: 20rem;
+.min-h-screen {
+  min-height: 100vh;
 }
 .w-full {
   width: 100%;
@@ -487,19 +469,16 @@ video {
 .max-w-full {
   max-width: 100%;
 }
-.max-w-sm {
-  max-width: 24rem;
+.max-w-screen-sm {
+  max-width: 640px;
 }
 .flex-1 {
   flex: 1 1 0%;
 }
-.flex-none {
-  flex: none;
-}
 .shrink-0 {
   flex-shrink: 0;
 }
-.flex-grow {
+.grow {
   flex-grow: 1;
 }
 .transform {
@@ -546,8 +525,8 @@ video {
 .grid-cols-4 {
   grid-template-columns: repeat(4, minmax(0, 1fr));
 }
-.grid-cols-6 {
-  grid-template-columns: repeat(6, minmax(0, 1fr));
+.grid-cols-5 {
+  grid-template-columns: repeat(5, minmax(0, 1fr));
 }
 .flex-col {
   flex-direction: column;
@@ -573,6 +552,9 @@ video {
 .justify-between {
   justify-content: space-between;
 }
+.justify-stretch {
+  justify-content: stretch;
+}
 .gap-1 {
   gap: 0.25rem;
 }
@@ -594,11 +576,6 @@ video {
 .gap-8 {
   gap: 2rem;
 }
-.space-x-2 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-x-reverse: 0;
-  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
-  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
-}
 .self-start {
   align-self: flex-start;
 }
@@ -620,20 +597,17 @@ video {
 .rounded {
   border-radius: 0.25rem;
 }
-.rounded-border-radius-buttons {
-  border-radius: var(--border-radius-buttons, 0.25rem);
-}
-.rounded-border-radius-cards {
-  border-radius: var(--border-radius-cards, 0.75rem);
+.rounded-cards {
+  border-radius: 0.75rem;
 }
-.rounded-border-radius-forms {
-  border-radius: var(--border-radius-forms, 0.25rem);
+.rounded-forms {
+  border-radius: 0.25rem;
 }
 .rounded-full {
   border-radius: 9999px;
 }
-.rounded-xl {
-  border-radius: 0.75rem;
+.rounded-general {
+  border-radius: 0.25rem;
 }
 .rounded-b-xl {
   border-bottom-right-radius: 0.75rem;
@@ -646,92 +620,108 @@ video {
 .border {
   border-width: 1px;
 }
-.border-y {
-  border-top-width: 1px;
+.border-b {
   border-bottom-width: 1px;
 }
 .border-b-0 {
   border-bottom-width: 0px;
 }
-.border-r {
-  border-right-width: 1px;
-}
 .border-t {
   border-top-width: 1px;
 }
 .border-solid {
   border-style: solid;
 }
-.border-button-identifier-border-default {
-  border-color: var(--button-identifier-border-default, #e2e8f0);
+.border-button-identifier-border-border-default {
+  border-color: var(--button-identifier-border-border-default, var(--interface-border-brand-brand, #3b82f6));
 }
 .border-button-secondary-border-default {
-  border-color: var(--button-secondary-border-default, #e2e8f0);
+  border-color: var(--button-secondary-border-default, var(--interface-border-default-primary, #cbd5e1));
+}
+.border-button-social-border-default {
+  border-color: var(--button-social-border-default, var(--interface-border-default-primary, #cbd5e1));
+}
+.border-checkbox-border-checkbox-border-default {
+  border-color: var(--checkbox-border-checkbox-border-default, var(--interface-border-default-primary, #cbd5e1));
+}
+.border-form-border-default {
+  border-color: var(--form-border-default, var(--interface-border-default-primary, #cbd5e1));
 }
-.border-dialog-border-default {
-  border-color: var(--dialog-border-default, #e2e8f0);
+.border-input-border-default {
+  border-color: var(--input-border-default, var(--interface-border-default-primary, #cbd5e1));
 }
-.border-forms-border-default {
-  border-color: var(--forms-border-default, #e2e8f0);
+.border-input-border-focus {
+  border-color: var(--input-border-focus, var(--interface-border-brand-brand, #3b82f6));
+}
+.border-interface-border-default-primary {
+  border-color: var(--interface-border-default-primary, var(--ui-300, #cbd5e1));
+}
+.border-interface-border-validation-danger {
+  border-color: var(--interface-border-validation-danger, var(--ui-danger, #ef4444));
+}
+.border-ory-border-default {
+  border-color: var(--ory-border-default, var(--interface-border-default-primary, #cbd5e1));
 }
 .bg-\[white\] {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
-.bg-bg-default {
-  background-color: var(--bg-default, #f8fafc);
+.bg-button-identifier-background-default {
+  background-color: var(--button-identifier-background-default, var(--interface-background-brand-secondary, #eff6ff));
 }
-.bg-branding-bg-default {
-  --tw-bg-opacity: 1;
-  background-color: rgb(79 70 229 / var(--tw-bg-opacity));
+.bg-button-primary-background-default {
+  background-color: var(--button-primary-background-default, var(--interface-background-brand-primary, #3b82f6));
 }
-.bg-button-identifier-bg-default {
-  background-color: var(--button-identifier-bg-default, #ffffff);
+.bg-button-secondary-background-default {
+  background-color: var(--button-secondary-background-default, var(--interface-background-default-primary, #ffffff));
 }
-.bg-button-primary-bg-default {
-  background-color: var(--button-primary-bg-default, #1e293b);
+.bg-button-social-background-default {
+  background-color: var(--button-social-background-default, var(--interface-background-default-primary, #ffffff));
 }
-.bg-button-secondary-bg-default {
-  background-color: var(--button-secondary-bg-default, #ffffff);
+.bg-checkbox-background-default {
+  background-color: var(--checkbox-background-default, var(--interface-background-default-secondary, #f8fafc));
 }
-.bg-dialog-bg-default {
-  background-color: var(--dialog-bg-default, #ffffff);
+.bg-form-background-default {
+  background-color: var(--form-background-default, var(--interface-background-default-primary, #ffffff));
 }
-.bg-dialog-bg-subtle {
-  background-color: var(--dialog-bg-subtle, #f8fafc);
+.bg-input-background-default {
+  background-color: var(--input-background-default, var(--interface-background-default-primary, #ffffff));
 }
-.bg-forms-bg-default {
-  background-color: var(--forms-bg-default, #ffffff);
+.bg-interface-background-brand-primary {
+  background-color: var(--interface-background-brand-primary, var(--brand-500, #3b82f6));
+}
+.bg-interface-background-default-primary {
+  background-color: var(--interface-background-default-primary, var(--ui-white, #ffffff));
+}
+.bg-interface-background-default-secondary {
+  background-color: var(--interface-background-default-secondary, var(--ui-50, #f8fafc));
+}
+.bg-ory-background-default {
+  background-color: var(--ory-background-default, var(--interface-background-default-primary, #ffffff));
+}
+.fill-checkbox-foreground-checked {
+  fill: var(--checkbox-foreground-checked, var(--interface-foreground-default-inverted, #ffffff));
 }
 .object-contain {
   -o-object-fit: contain;
   object-fit: contain;
 }
-.object-fill {
-  -o-object-fit: fill;
-  object-fit: fill;
-}
 .p-2 {
   padding: 0.5rem;
 }
+.p-4 {
+  padding: 1rem;
+}
 .p-6 {
   padding: 1.5rem;
 }
 .p-8 {
   padding: 2rem;
 }
-.px-1\.5 {
-  padding-left: 0.375rem;
-  padding-right: 0.375rem;
-}
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
 }
-.px-3 {
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
-}
 .px-4 {
   padding-left: 1rem;
   padding-right: 1rem;
@@ -748,6 +738,10 @@ video {
   padding-left: 2rem;
   padding-right: 2rem;
 }
+.px-\[11px\] {
+  padding-left: 11px;
+  padding-right: 11px;
+}
 .py-1 {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
@@ -764,10 +758,6 @@ video {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
-.py-2\.5 {
-  padding-top: 0.625rem;
-  padding-bottom: 0.625rem;
-}
 .py-3 {
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
@@ -784,10 +774,21 @@ video {
   padding-top: 2rem;
   padding-bottom: 2rem;
 }
+.py-\[13px\] {
+  padding-top: 13px;
+  padding-bottom: 13px;
+}
+.py-\[15px\] {
+  padding-top: 15px;
+  padding-bottom: 15px;
+}
 .py-\[5px\] {
   padding-top: 5px;
   padding-bottom: 5px;
 }
+.pb-8 {
+  padding-bottom: 2rem;
+}
 .pl-8 {
   padding-left: 2rem;
 }
@@ -840,44 +841,47 @@ video {
 .leading-tight {
   line-height: 1.25;
 }
-.text-button-identifier-fg-default {
-  color: var(--button-identifier-fg-default, #0f172a);
+.text-button-identifier-foreground-default {
+  color: var(--button-identifier-foreground-default, var(--interface-foreground-brand-on-secondary, #172554));
 }
-.text-button-identifier-fg-subtle {
-  color: var(--button-identifier-fg-subtle, #334155);
+.text-button-link-brand-brand {
+  color: var(--button-link-brand-brand, var(--interface-foreground-brand-primary, #3b82f6));
 }
-.text-button-primary-fg-default {
-  color: var(--button-primary-fg-default, #ffffff);
+.text-button-link-default-secondary {
+  color: var(--button-link-default-secondary, var(--interface-foreground-default-secondary, #334155));
 }
-.text-button-secondary-fg-default {
-  color: var(--button-secondary-fg-default, #0f172a);
+.text-button-primary-foreground-default {
+  color: var(--button-primary-foreground-default, var(--interface-foreground-brand-on-primary, #ffffff));
 }
-.text-dialog-fg-default {
-  color: var(--dialog-fg-default, #0f172a);
+.text-button-secondary-foreground-default {
+  color: var(--button-secondary-foreground-default, var(--interface-foreground-default-primary, #0f172a));
 }
-.text-dialog-fg-mute {
-  color: var(--dialog-fg-mute, #64748b);
+.text-button-social-foreground-default {
+  color: var(--button-social-foreground-default, var(--interface-foreground-default-primary, #0f172a));
 }
-.text-dialog-fg-subtle {
-  color: var(--dialog-fg-subtle, #334155);
+.text-input-foreground-primary {
+  color: var(--input-foreground-primary, var(--interface-foreground-default-primary, #0f172a));
 }
-.text-forms-fg-default {
-  color: var(--forms-fg-default, #0f172a);
+.text-interface-foreground-brand-primary {
+  color: var(--interface-foreground-brand-primary, var(--brand-500, #3b82f6));
 }
-.text-forms-fg-error {
-  color: var(--forms-fg-error, #ef4444);
+.text-interface-foreground-default-primary {
+  color: var(--interface-foreground-default-primary, var(--ui-900, #0f172a));
 }
-.text-forms-fg-mute {
-  color: var(--forms-fg-mute, #64748b);
+.text-interface-foreground-default-secondary {
+  color: var(--interface-foreground-default-secondary, var(--ui-700, #334155));
 }
-.text-forms-fg-success {
-  color: var(--forms-fg-success, #22c55e);
+.text-interface-foreground-default-tertiary {
+  color: var(--interface-foreground-default-tertiary, var(--ui-500, #64748b));
 }
-.text-links-link-default {
-  color: var(--links-link-default, #4f46e5);
+.text-interface-foreground-validation-danger {
+  color: var(--interface-foreground-validation-danger, var(--ui-danger, #ef4444));
 }
-.text-links-link-mute-default {
-  color: var(--links-link-mute-default, #64748b);
+.text-interface-foreground-validation-success {
+  color: var(--interface-foreground-validation-success, var(--ui-success, #22c55e));
+}
+.underline {
+  text-decoration-line: underline;
 }
 .antialiased {
   -webkit-font-smoothing: antialiased;
@@ -898,28 +902,14 @@ video {
     var(--tw-ring-shadow),
     var(--tw-shadow, 0 0 #0000);
 }
-.ring-2 {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow:
-    var(--tw-ring-offset-shadow),
-    var(--tw-ring-shadow),
-    var(--tw-shadow, 0 0 #0000);
-}
 .ring-inset {
   --tw-ring-inset: inset;
 }
 .ring-button-primary-border-default {
-  --tw-ring-color: var(--button-primary-border-default, #ffffff00);
+  --tw-ring-color: var(--button-primary-border-default, var(--interface-border-default-none, #ffffff00));
 }
 .ring-button-secondary-border-default {
-  --tw-ring-color: var(--button-secondary-border-default, #e2e8f0);
-}
-.ring-dialog-border-default {
-  --tw-ring-color: var(--dialog-border-default, #e2e8f0);
-}
-.ring-forms-border-default {
-  --tw-ring-color: var(--forms-border-default, #e2e8f0);
+  --tw-ring-color: var(--button-secondary-border-default, var(--interface-border-default-primary, #cbd5e1));
 }
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@@ -984,83 +974,164 @@ video {
 .duration-100 {
   transition-duration: 100ms;
 }
+.duration-700 {
+  transition-duration: 700ms;
+}
 .ease-linear {
   transition-timing-function: linear;
 }
+@keyframes enter {
+  from {
+    opacity: var(--tw-enter-opacity, 1);
+    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
+  }
+}
+@keyframes exit {
+  to {
+    opacity: var(--tw-exit-opacity, 1);
+    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
+  }
+}
+.duration-100 {
+  animation-duration: 100ms;
+}
+.duration-700 {
+  animation-duration: 700ms;
+}
+.ease-linear {
+  animation-timing-function: linear;
+}
+.running {
+  animation-play-state: running;
+}
+.placeholder\:h-\[20px\]::-moz-placeholder {
+  height: 20px;
+}
+.placeholder\:h-\[20px\]::placeholder {
+  height: 20px;
+}
+.placeholder\:text-input-foreground-tertiary::-moz-placeholder {
+  color: var(--input-foreground-tertiary, var(--interface-foreground-default-tertiary, #64748b));
+}
+.placeholder\:text-input-foreground-tertiary::placeholder {
+  color: var(--input-foreground-tertiary, var(--interface-foreground-default-tertiary, #64748b));
+}
 .first\:border-0:first-child {
   border-width: 0px;
 }
-.hover\:border-button-identifier-border-hover:hover {
-  border-color: var(--button-identifier-border-hover, #e2e8f0);
+.checked\:border-checkbox-border-checkbox-border-checked:checked {
+  border-color: var(--checkbox-border-checkbox-border-checked, var(--interface-border-brand-brand, #3b82f6));
+}
+.checked\:bg-checkbox-background-checked:checked {
+  background-color: var(--checkbox-background-checked, var(--interface-background-brand-primary, #3b82f6));
+}
+.hover\:border-button-identifier-border-border-hover:hover {
+  border-color: var(--button-identifier-border-border-hover, var(--interface-border-brand-brand, #3b82f6));
 }
 .hover\:border-button-social-border-hover:hover {
-  border-color: var(--button-social-border-hover, #e2e8f0);
+  border-color: var(--button-social-border-hover, var(--interface-border-default-primary, #cbd5e1));
 }
-.hover\:border-forms-border-hover:hover {
-  border-color: var(--forms-border-hover, #e2e8f0);
+.hover\:border-input-border-hover:hover {
+  border-color: var(--input-border-hover, var(--interface-border-default-primary, #cbd5e1));
 }
-.hover\:bg-button-identifier-bg-hover:hover {
-  background-color: var(--button-identifier-bg-hover, #f8fafc);
+.hover\:bg-button-identifier-background-hover:hover {
+  background-color: var(--button-identifier-background-hover, var(--interface-background-brand-secondary-hover, #dbeafe));
 }
-.hover\:bg-button-primary-bg-hover:hover {
-  background-color: var(--button-primary-bg-hover, #0f172a);
+.hover\:bg-button-primary-background-hover:hover {
+  background-color: var(--button-primary-background-hover, var(--interface-background-default-inverted, #0f172a));
 }
-.hover\:bg-button-secondary-bg-hover:hover {
-  background-color: var(--button-secondary-bg-hover, #f8fafc);
+.hover\:bg-button-secondary-background-hover:hover {
+  background-color: var(--button-secondary-background-hover, var(--interface-background-default-primary-hover, #f8fafc));
 }
-.hover\:bg-forms-bg-hover:hover {
-  background-color: var(--forms-bg-hover, #f8fafc);
+.hover\:bg-button-social-background-hover:hover {
+  background-color: var(--button-social-background-hover, var(--interface-background-default-primary-hover, #f8fafc));
 }
-.hover\:text-button-primary-fg-hover:hover {
-  color: var(--button-primary-fg-hover, #ffffff);
+.hover\:bg-input-background-hover:hover {
+  background-color: var(--input-background-hover, var(--interface-background-default-primary-hover, #f8fafc));
 }
-.hover\:text-button-secondary-fg-hover:hover {
-  color: var(--button-secondary-fg-hover, #334155);
+.hover\:bg-interface-background-default-primary-hover:hover {
+  background-color: var(--interface-background-default-primary-hover, var(--ui-50, #f8fafc));
 }
-.hover\:text-links-link-hover:hover {
-  color: var(--links-link-hover, #0f172a);
+.hover\:text-button-link-brand-brand-hover:hover {
+  color: var(--button-link-brand-brand-hover, var(--interface-foreground-default-primary, #0f172a));
 }
-.hover\:text-links-link-mute-hover:hover {
-  color: var(--links-link-mute-hover, #0f172a);
+.hover\:text-button-link-default-secondary-hover:hover {
+  color: var(--button-link-default-secondary-hover, var(--interface-foreground-default-tertiary, #64748b));
 }
-.hover\:underline:hover {
-  text-decoration-line: underline;
+.hover\:text-button-primary-foreground-hover:hover {
+  color: var(--button-primary-foreground-hover, var(--interface-foreground-default-inverted, #ffffff));
+}
+.hover\:text-button-secondary-foreground-hover:hover {
+  color: var(--button-secondary-foreground-hover, var(--interface-foreground-default-secondary, #334155));
+}
+.hover\:text-button-social-foreground-disabled:hover {
+  color: var(--button-social-foreground-disabled, var(--interface-foreground-disabled-on-disabled, #94a3b8));
 }
 .hover\:ring-button-primary-border-hover:hover {
-  --tw-ring-color: var(--button-primary-border-hover, #ffffff00);
+  --tw-ring-color: var(--button-primary-border-hover, var(--interface-border-default-none, #ffffff00));
 }
 .hover\:ring-button-secondary-border-hover:hover {
-  --tw-ring-color: var(--button-secondary-border-hover, #e2e8f0);
+  --tw-ring-color: var(--button-secondary-border-hover, var(--interface-border-default-primary, #cbd5e1));
+}
+.focus\:border-input-border-focus:focus {
+  border-color: var(--input-border-focus, var(--interface-border-brand-brand, #3b82f6));
+}
+.focus\:ring-0:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow:
+    var(--tw-ring-offset-shadow),
+    var(--tw-ring-shadow),
+    var(--tw-shadow, 0 0 #0000);
+}
+.focus-visible\:border-input-border-focus:focus-visible {
+  border-color: var(--input-border-focus, var(--interface-border-brand-brand, #3b82f6));
+}
+.focus-visible\:outline-none:focus-visible {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
 }
 .disabled\:cursor-not-allowed:disabled {
   cursor: not-allowed;
 }
-.disabled\:bg-button-primary-bg-disabled:disabled {
-  background-color: var(--button-primary-bg-disabled, #64748b);
+.disabled\:border-button-social-border-disabled:disabled {
+  border-color: var(--button-social-border-disabled, var(--interface-border-disabled-disabled, #cbd5e1));
 }
-.disabled\:bg-button-secondary-bg-disabled:disabled {
-  background-color: var(--button-secondary-bg-disabled, #f8fafc);
+.disabled\:border-input-border-disabled:disabled {
+  border-color: var(--input-border-disabled, var(--interface-border-disabled-disabled, #cbd5e1));
 }
-.disabled\:bg-forms-bg-disabled:disabled {
-  background-color: var(--forms-bg-disabled, #f8fafc);
+.disabled\:bg-button-primary-background-disabled:disabled {
+  background-color: var(--button-primary-background-disabled, var(--interface-background-disabled-disabled, #e2e8f0));
 }
-.disabled\:text-button-primary-fg-disabled:disabled {
-  color: var(--button-primary-fg-disabled, #94a3b8);
+.disabled\:bg-button-secondary-background-disabled:disabled {
+  background-color: var(--button-secondary-background-disabled, var(--interface-background-disabled-disabled, #e2e8f0));
 }
-.disabled\:text-button-secondary-fg-disabled:disabled {
-  color: var(--button-secondary-fg-disabled, #94a3b8);
+.disabled\:bg-button-social-background-disabled:disabled {
+  background-color: var(--button-social-background-disabled, var(--interface-background-disabled-disabled, #e2e8f0));
 }
-.disabled\:text-forms-fg-disabled:disabled {
-  color: var(--forms-fg-disabled, #94a3b8);
+.disabled\:bg-input-background-disabled:disabled {
+  background-color: var(--input-background-disabled, var(--interface-background-disabled-disabled, #e2e8f0));
+}
+.disabled\:text-button-primary-foreground-disabled:disabled {
+  color: var(--button-primary-foreground-disabled, var(--interface-foreground-disabled-on-disabled, #94a3b8));
+}
+.disabled\:text-button-secondary-foreground-disabled:disabled {
+  color: var(--button-secondary-foreground-disabled, var(--interface-foreground-disabled-on-disabled, #94a3b8));
+}
+.disabled\:text-button-social-foreground-disabled:disabled {
+  color: var(--button-social-foreground-disabled, var(--interface-foreground-disabled-on-disabled, #94a3b8));
+}
+.disabled\:text-input-foreground-disabled:disabled {
+  color: var(--input-foreground-disabled, var(--interface-foreground-disabled-on-disabled, #94a3b8));
 }
 .disabled\:ring-button-primary-border-disabled:disabled {
-  --tw-ring-color: var(--button-primary-border-disabled, #ffffff00);
+  --tw-ring-color: var(--button-primary-border-disabled, var(--interface-border-disabled-disabled, #cbd5e1));
 }
 .disabled\:ring-button-secondary-border-disabled:disabled {
-  --tw-ring-color: var(--button-secondary-border-disabled, #e2e8f0);
+  --tw-ring-color: var(--button-secondary-border-disabled, var(--interface-border-disabled-disabled, #cbd5e1));
 }
-.disabled\:hover\:bg-button-primary-bg-default:hover:disabled {
-  background-color: var(--button-primary-bg-default, #1e293b);
+.group:hover .group-hover\:text-button-identifier-foreground-hover {
+  color: var(--button-identifier-foreground-hover, var(--interface-foreground-brand-on-secondary, #172554));
 }
 .peer:checked ~ .peer-checked\:block {
   display: block;
@@ -1071,35 +1142,74 @@ video {
 .data-\[disabled\]\:pointer-events-none[data-disabled] {
   pointer-events: none;
 }
-.data-\[disabled\]\:border-button-secondary-border-disabled[data-disabled] {
-  border-color: var(--button-secondary-border-disabled, #e2e8f0);
+.data-\[disabled\]\:bg-button-secondary-background-disabled[data-disabled] {
+  background-color: var(--button-secondary-background-disabled, var(--interface-background-disabled-disabled, #e2e8f0));
+}
+.data-\[disabled\]\:text-button-secondary-foreground-disabled[data-disabled] {
+  color: var(--button-secondary-foreground-disabled, var(--interface-foreground-disabled-on-disabled, #94a3b8));
+}
+.data-\[state\=open\]\:animate-in[data-state=open] {
+  animation-name: enter;
+  animation-duration: 150ms;
+  --tw-enter-opacity: initial;
+  --tw-enter-scale: initial;
+  --tw-enter-rotate: initial;
+  --tw-enter-translate-x: initial;
+  --tw-enter-translate-y: initial;
+}
+.data-\[state\=closed\]\:animate-out[data-state=closed] {
+  animation-name: exit;
+  animation-duration: 150ms;
+  --tw-exit-opacity: initial;
+  --tw-exit-scale: initial;
+  --tw-exit-rotate: initial;
+  --tw-exit-translate-x: initial;
+  --tw-exit-translate-y: initial;
+}
+.data-\[state\=closed\]\:fade-out-0[data-state=closed] {
+  --tw-exit-opacity: 0;
 }
-.data-\[disabled\]\:bg-button-secondary-bg-disabled[data-disabled] {
-  background-color: var(--button-secondary-bg-disabled, #f8fafc);
+.data-\[state\=open\]\:fade-in-0[data-state=open] {
+  --tw-enter-opacity: 0;
 }
-.data-\[disabled\]\:text-button-secondary-fg-disabled[data-disabled] {
-  color: var(--button-secondary-fg-disabled, #94a3b8);
+.data-\[state\=closed\]\:zoom-out-95[data-state=closed] {
+  --tw-exit-scale: .95;
+}
+.data-\[state\=open\]\:zoom-in-95[data-state=open] {
+  --tw-enter-scale: .95;
+}
+.data-\[side\=bottom\]\:slide-in-from-top-2[data-side=bottom] {
+  --tw-enter-translate-y: -0.5rem;
+}
+.data-\[side\=left\]\:slide-in-from-right-2[data-side=left] {
+  --tw-enter-translate-x: 0.5rem;
+}
+.data-\[side\=right\]\:slide-in-from-left-2[data-side=right] {
+  --tw-enter-translate-x: -0.5rem;
+}
+.data-\[side\=top\]\:slide-in-from-bottom-2[data-side=top] {
+  --tw-enter-translate-y: 0.5rem;
 }
 .loading\:cursor-wait[data-loading=true] {
   cursor: wait;
 }
-.loading\:bg-button-primary-bg-default[data-loading=true] {
-  background-color: var(--button-primary-bg-default, #1e293b);
+.loading\:bg-button-primary-background-default[data-loading=true] {
+  background-color: var(--button-primary-background-default, var(--interface-background-brand-primary, #3b82f6));
 }
-.loading\:bg-button-secondary-bg-default[data-loading=true] {
-  background-color: var(--button-secondary-bg-default, #ffffff);
+.loading\:bg-button-secondary-background-default[data-loading=true] {
+  background-color: var(--button-secondary-background-default, var(--interface-background-default-primary, #ffffff));
 }
-.loading\:text-button-primary-fg-default[data-loading=true] {
-  color: var(--button-primary-fg-default, #ffffff);
+.loading\:text-button-primary-foreground-default[data-loading=true] {
+  color: var(--button-primary-foreground-default, var(--interface-foreground-brand-on-primary, #ffffff));
 }
-.loading\:text-button-secondary-fg-default[data-loading=true] {
-  color: var(--button-secondary-fg-default, #0f172a);
+.loading\:text-button-secondary-foreground-default[data-loading=true] {
+  color: var(--button-secondary-foreground-default, var(--interface-foreground-default-primary, #0f172a));
 }
 .loading\:ring-button-primary-border-default[data-loading=true] {
-  --tw-ring-color: var(--button-primary-border-default, #ffffff00);
+  --tw-ring-color: var(--button-primary-border-default, var(--interface-border-default-none, #ffffff00));
 }
 .loading\:ring-button-secondary-border-default[data-loading=true] {
-  --tw-ring-color: var(--button-secondary-border-default, #e2e8f0);
+  --tw-ring-color: var(--button-secondary-border-default, var(--interface-border-default-primary, #cbd5e1));
 }
 .loading\:before\:pointer-events-none[data-loading=true]::before {
   content: var(--tw-content);
@@ -1113,13 +1223,13 @@ video {
   content: var(--tw-content);
   inset: 0px;
 }
-.loading\:before\:bg-button-primary-bg-default[data-loading=true]::before {
+.loading\:before\:bg-button-primary-background-default[data-loading=true]::before {
   content: var(--tw-content);
-  background-color: var(--button-primary-bg-default, #1e293b);
+  background-color: var(--button-primary-background-default, var(--interface-background-brand-primary, #3b82f6));
 }
-.loading\:before\:bg-button-secondary-bg-default[data-loading=true]::before {
+.loading\:before\:bg-button-secondary-background-default[data-loading=true]::before {
   content: var(--tw-content);
-  background-color: var(--button-secondary-bg-default, #ffffff);
+  background-color: var(--button-secondary-background-default, var(--interface-background-default-primary, #ffffff));
 }
 .loading\:before\:opacity-80[data-loading=true]::before {
   content: var(--tw-content);
@@ -1129,85 +1239,85 @@ video {
   --tw-content: "";
   content: var(--tw-content);
 }
-@media not all and (min-width: 768px) {
-  .max-md\:bottom-0 {
+@media not all and (min-width: 640px) {
+  .max-sm\:bottom-0 {
     bottom: 0px;
   }
-  .max-md\:left-8 {
+  .max-sm\:left-8 {
     left: 2rem;
   }
-  .max-md\:hidden {
+  .max-sm\:hidden {
     display: none;
   }
-  .max-md\:translate-y-full {
+  .max-sm\:translate-y-full {
     --tw-translate-y: 100%;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
-  .max-md\:rounded-b-md {
+  .max-sm\:rounded-b-md {
     border-bottom-right-radius: 0.375rem;
     border-bottom-left-radius: 0.375rem;
   }
-  .max-md\:py-3 {
-    padding-top: 0.75rem;
-    padding-bottom: 0.75rem;
+  .max-sm\:py-\[7px\] {
+    padding-top: 7px;
+    padding-bottom: 7px;
   }
 }
-@media (min-width: 768px) {
-  .md\:right-0 {
+@media (min-width: 640px) {
+  .sm\:right-0 {
     right: 0px;
   }
-  .md\:top-8 {
+  .sm\:top-8 {
     top: 2rem;
   }
-  .md\:hidden {
+  .sm\:hidden {
     display: none;
   }
-  .md\:h-12 {
-    height: 3rem;
-  }
-  .md\:w-14 {
-    width: 3.5rem;
-  }
-  .md\:w-\[480px\] {
+  .sm\:w-\[480px\] {
     width: 480px;
   }
-  .md\:w-\[712px\] {
-    width: 712px;
-  }
-  .md\:max-w-\[480px\] {
+  .sm\:max-w-\[480px\] {
     max-width: 480px;
   }
-  .md\:translate-x-full {
+  .sm\:translate-x-full {
     --tw-translate-x: 100%;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
-  .md\:grid-cols-2 {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+  .sm\:items-center {
+    align-items: center;
   }
-  .md\:rounded-r-md {
-    border-top-right-radius: 0.375rem;
-    border-bottom-right-radius: 0.375rem;
+  .sm\:rounded-cards {
+    border-radius: 0.75rem;
+  }
+  .sm\:rounded-r-lg {
+    border-top-right-radius: 0.5rem;
+    border-bottom-right-radius: 0.5rem;
   }
-  .md\:px-12 {
+  .sm\:border {
+    border-width: 1px;
+  }
+  .sm\:px-12 {
     padding-left: 3rem;
     padding-right: 3rem;
   }
-  .md\:px-4 {
-    padding-left: 1rem;
-    padding-right: 1rem;
-  }
-  .md\:py-14 {
+  .sm\:py-14 {
     padding-top: 3.5rem;
     padding-bottom: 3.5rem;
   }
-  .md\:py-4 {
-    padding-top: 1rem;
-    padding-bottom: 1rem;
+  .sm\:pl-\[7px\] {
+    padding-left: 7px;
+  }
+}
+@media (min-width: 768px) {
+  .md\:max-w-\[712px\] {
+    max-width: 712px;
+  }
+  .md\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
 @media (min-width: 1024px) {
-  .lg\:w-\[802px\] {
-    width: 802px;
+  .lg\:max-w-\[802px\] {
+    max-width: 802px;
   }
   .lg\:py-4\.5 {
     padding-top: 1.125rem;
@@ -1215,14 +1325,11 @@ video {
   }
 }
 @media (min-width: 1280px) {
-  .xl\:w-\[896px\] {
-    width: 896px;
+  .xl\:max-w-\[896px\] {
+    max-width: 896px;
   }
 }
 .\[\&\>button\]\:w-\[79px\] > button {
   width: 79px;
 }
-.\[\&\>span\]\:mr-auto > span {
-  margin-right: auto;
-}
 /*# sourceMappingURL=index.css.map */