sunpeak 0.5.9 → 0.5.12

package/dist/style.css

@@ -50,11 +50,6 @@
       --tw-drop-shadow-alpha: 100%;
       --tw-drop-shadow-size: initial;
       --tw-duration: initial;
-      --tw-ease: initial;
-      --tw-content: "";
-      --tw-scale-x: 1;
-      --tw-scale-y: 1;
-      --tw-scale-z: 1;
     }
   }
 }
@@ -3068,6 +3063,14 @@
     pointer-events: none;
   }
 
+  .collapse {
+    visibility: collapse;
+  }
+
+  .visible {
+    visibility: visible;
+  }
+
   .sr-only {
     clip-path: inset(50%);
     white-space: nowrap;
@@ -3092,6 +3095,10 @@
     position: relative;
   }
 
+  .sticky {
+    position: sticky;
+  }
+
   .inset-0 {
     inset: calc(var(--spacing) * 0);
   }
@@ -3196,10 +3203,6 @@
     margin-block: auto;
   }
 
-  .mt-1 {
-    margin-top: calc(var(--spacing) * 1);
-  }
-
   .mt-auto {
     margin-top: auto;
   }
@@ -3216,10 +3219,6 @@
     margin-bottom: calc(var(--spacing) * 3);
   }
 
-  .mb-4 {
-    margin-bottom: calc(var(--spacing) * 4);
-  }
-
   .line-clamp-2 {
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
@@ -3239,6 +3238,10 @@
     display: flex;
   }
 
+  .grid {
+    display: grid;
+  }
+
   .hidden {
     display: none;
   }
@@ -3247,10 +3250,6 @@
     display: inline;
   }
 
-  .inline-flex {
-    display: inline-flex;
-  }
-
   .aspect-\[4\/3\] {
     aspect-ratio: 4 / 3;
   }
@@ -3272,6 +3271,10 @@
     height: calc(var(--spacing) * 4);
   }
 
+  .h-7 {
+    height: calc(var(--spacing) * 7);
+  }
+
   .h-8 {
     height: calc(var(--spacing) * 8);
   }
@@ -3280,10 +3283,6 @@
     height: calc(var(--spacing) * 12);
   }
 
-  .h-\[var\(--control-size-sm\)\] {
-    height: var(--control-size-sm);
-  }
-
   .h-auto {
     height: auto;
   }
@@ -3292,8 +3291,8 @@
     height: 100%;
   }
 
-  .max-h-\[min\(400px\,calc\(100vh-200px\)\)\] {
-    max-height: min(400px, 100vh - 200px);
+  .h-screen {
+    height: 100vh;
   }
 
   .max-h-full {
@@ -3304,14 +3303,14 @@
     min-height: calc(var(--spacing) * 8);
   }
 
-  .min-h-screen {
-    min-height: 100vh;
-  }
-
   .w-4 {
     width: calc(var(--spacing) * 4);
   }
 
+  .w-7 {
+    width: calc(var(--spacing) * 7);
+  }
+
   .w-8 {
     width: calc(var(--spacing) * 8);
   }
@@ -3324,8 +3323,8 @@
     width: calc(var(--spacing) * 40);
   }
 
-  .w-64 {
-    width: calc(var(--spacing) * 64);
+  .w-56 {
+    width: calc(var(--spacing) * 56);
   }
 
   .w-80 {
@@ -3360,10 +3359,6 @@
     min-width: calc(var(--spacing) * 8);
   }
 
-  .min-w-\[200px\] {
-    min-width: 200px;
-  }
-
   .flex-1 {
     flex: 1;
   }
@@ -3380,10 +3375,6 @@
     flex-grow: 1;
   }
 
-  .origin-top {
-    transform-origin: top;
-  }
-
   .-translate-y-1\/2 {
     --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -3398,8 +3389,12 @@
     touch-action: var(--tw-pan-x, ) var(--tw-pan-y, ) var(--tw-pinch-zoom, );
   }
 
-  .scroll-m-\[15px\] {
-    scroll-margin: 15px;
+  .grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .grid-cols-\[1fr_auto_1fr\] {
+    grid-template-columns: 1fr auto 1fr;
   }
 
   .flex-col {
@@ -3434,6 +3429,14 @@
     justify-content: center;
   }
 
+  .justify-end {
+    justify-content: flex-end;
+  }
+
+  .justify-start {
+    justify-content: flex-start;
+  }
+
   .gap-1 {
     gap: calc(var(--spacing) * 1);
   }
@@ -3442,8 +3445,20 @@
     gap: calc(var(--spacing) * 2);
   }
 
-  .gap-\[var\(--spacing\)\] {
-    gap: var(--spacing);
+  .gap-3 {
+    gap: calc(var(--spacing) * 3);
+  }
+
+  :where(.space-y-0\.5 > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(calc(var(--spacing) * .5) * var(--tw-space-y-reverse));
+    margin-block-end: calc(calc(var(--spacing) * .5) * calc(1 - var(--tw-space-y-reverse)));
+  }
+
+  :where(.space-y-1 > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
+    margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
   }
 
   :where(.space-y-2 > :not(:last-child)) {
@@ -3452,6 +3467,12 @@
     margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
   }
 
+  :where(.space-y-3 > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
+    margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
+  }
+
   :where(.space-y-4 > :not(:last-child)) {
     --tw-space-y-reverse: 0;
     margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
@@ -3506,14 +3527,6 @@
     border-radius: 18px;
   }
 
-  .rounded-\[var\(--control-radius-sm\)\] {
-    border-radius: var(--control-radius-sm);
-  }
-
-  .rounded-\[var\(--menu-radius\)\] {
-    border-radius: var(--menu-radius);
-  }
-
   .rounded-full {
     border-radius: var(--radius-full);
   }
@@ -3522,6 +3535,10 @@
     border-radius: var(--radius-lg);
   }
 
+  .rounded-md {
+    border-radius: var(--radius-md);
+  }
+
   .rounded-xl {
     border-radius: var(--radius-xl);
   }
@@ -3570,10 +3587,6 @@
     background-color: var(--color-background-primary-soft);
   }
 
-  .bg-\[var\(--color-surface-elevated\)\] {
-    background-color: var(--color-surface-elevated);
-  }
-
   .bg-surface {
     background-color: var(--color-surface);
   }
@@ -3613,6 +3626,10 @@
     padding: calc(var(--spacing) * 2);
   }
 
+  .p-3 {
+    padding: calc(var(--spacing) * 3);
+  }
+
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
@@ -3629,14 +3646,14 @@
     padding: 1px;
   }
 
-  .p-\[var\(--menu-gutter\)\] {
-    padding: var(--menu-gutter);
-  }
-
   .px-1\.5 {
     padding-inline: calc(var(--spacing) * 1.5);
   }
 
+  .px-2 {
+    padding-inline: calc(var(--spacing) * 2);
+  }
+
   .px-4 {
     padding-inline: calc(var(--spacing) * 4);
   }
@@ -3649,18 +3666,14 @@
     padding-inline: calc(var(--spacing) * 40);
   }
 
-  .px-\[var\(--control-gutter-sm\)\] {
-    padding-inline: var(--control-gutter-sm);
-  }
-
-  .px-\[var\(--menu-item-padding-x\,12px\)\] {
-    padding-inline: var(--menu-item-padding-x, 12px);
-  }
-
   .py-0\.5 {
     padding-block: calc(var(--spacing) * .5);
   }
 
+  .py-1 {
+    padding-block: calc(var(--spacing) * 1);
+  }
+
   .py-3 {
     padding-block: calc(var(--spacing) * 3);
   }
@@ -3673,10 +3686,6 @@
     padding-block: calc(var(--spacing) * 10);
   }
 
-  .py-\[var\(--menu-item-padding-y\,8px\)\] {
-    padding-block: var(--menu-item-padding-y, 8px);
-  }
-
   .pt-12 {
     padding-top: calc(var(--spacing) * 12);
   }
@@ -3689,6 +3698,10 @@
     padding-bottom: calc(var(--spacing) * 10);
   }
 
+  .pl-4 {
+    padding-left: calc(var(--spacing) * 4);
+  }
+
   .text-center {
     text-align: center;
   }
@@ -3701,6 +3714,10 @@
     text-align: start;
   }
 
+  .font-mono {
+    font-family: var(--font-mono);
+  }
+
   .text-3xl {
     font-size: var(--text-3xl);
     line-height: var(--tw-leading, var(--text-3xl--line-height));
@@ -3743,14 +3760,16 @@
     font-weight: var(--tw-font-weight, var(--text-xs--font-weight));
   }
 
-  .leading-\[var\(--font-text-md-line-height\)\] {
-    --tw-leading: var(--font-text-md-line-height);
-    line-height: var(--font-text-md-line-height);
+  .text-\[8px\] {
+    font-size: 8px;
   }
 
-  .leading-\[var\(--menu-line-height\)\] {
-    --tw-leading: var(--menu-line-height);
-    line-height: var(--menu-line-height);
+  .text-\[9px\] {
+    font-size: 9px;
+  }
+
+  .text-\[10px\] {
+    font-size: 10px;
   }
 
   .leading-normal {
@@ -3803,16 +3822,8 @@
     white-space: pre-wrap;
   }
 
-  .text-\[var\(--control-font-size-md\)\] {
-    color: var(--control-font-size-md);
-  }
-
-  .text-\[var\(--input-placeholder-text-color\)\] {
-    color: var(--input-placeholder-text-color);
-  }
-
-  .text-\[var\(--menu-font-size\)\] {
-    color: var(--menu-font-size);
+  .text-\[var\(--color-error\)\] {
+    color: var(--color-error);
   }
 
   .text-primary {
@@ -3827,19 +3838,6 @@
     opacity: .6;
   }
 
-  .opacity-75 {
-    opacity: .75;
-  }
-
-  .opacity-100 {
-    opacity: 1;
-  }
-
-  .shadow-\[var\(--shadow\)\] {
-    --tw-shadow: var(--shadow);
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
-
   .shadow-lg {
     --tw-shadow: var(--shadow-300);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -3860,23 +3858,18 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
-  .\[box-shadow\:var\(--shadow\)\,var\(--shadow-hairline\)\] {
-    box-shadow: var(--shadow), var(--shadow-hairline);
-  }
-
   .outline {
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
   }
 
-  .filter {
+  .blur {
+    --tw-blur: blur(8px);
     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, );
   }
 
-  .transition-\[color\] {
-    transition-property: color;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  .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, );
   }
 
   .transition-all {
@@ -3885,8 +3878,8 @@
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
 
-  .transition-opacity {
-    transition-property: opacity;
+  .transition-colors {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
@@ -3896,167 +3889,11 @@
     transition-duration: .2s;
   }
 
-  .duration-\[var\(--transition-duration-basic\)\] {
-    --tw-duration: var(--transition-duration-basic);
-    transition-duration: var(--transition-duration-basic);
-  }
-
-  .ease-\[var\(--transition-ease-basic\)\] {
-    --tw-ease: var(--transition-ease-basic);
-    transition-timing-function: var(--transition-ease-basic);
-  }
-
   .select-none {
     -webkit-user-select: none;
     user-select: none;
   }
 
-  .before\:absolute:before {
-    content: var(--tw-content);
-    position: absolute;
-  }
-
-  .before\:inset-0:before {
-    content: var(--tw-content);
-    inset: calc(var(--spacing) * 0);
-  }
-
-  .before\:block:before {
-    content: var(--tw-content);
-    display: block;
-  }
-
-  .before\:scale-100:before {
-    content: var(--tw-content);
-    --tw-scale-x: 100%;
-    --tw-scale-y: 100%;
-    --tw-scale-z: 100%;
-    scale: var(--tw-scale-x) var(--tw-scale-y);
-  }
-
-  .before\:scale-\[0\.98\]:before {
-    content: var(--tw-content);
-    scale: .98;
-  }
-
-  .before\:rounded-\[calc\(var\(--menu-radius\)-var\(--menu-gutter\)\)\]:before {
-    content: var(--tw-content);
-    border-radius: calc(var(--menu-radius)  - var(--menu-gutter));
-  }
-
-  .before\:rounded-\[inherit\]:before {
-    content: var(--tw-content);
-    border-radius: inherit;
-  }
-
-  .before\:bg-\[var\(--menu-item-background-color\)\]:before {
-    content: var(--tw-content);
-    background-color: var(--menu-item-background-color);
-  }
-
-  .before\:bg-transparent:before {
-    content: var(--tw-content);
-    background-color: #0000;
-  }
-
-  .before\:opacity-0:before {
-    content: var(--tw-content);
-    opacity: 0;
-  }
-
-  .before\:opacity-100:before {
-    content: var(--tw-content);
-    opacity: 1;
-  }
-
-  .before\:shadow-\[0_0_0_1px_var\(--input-outline-border-color\)_inset\]:before {
-    content: var(--tw-content);
-    --tw-shadow: 0 0 0 1px var(--tw-shadow-color, var(--input-outline-border-color)) inset;
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
-
-  .before\:shadow-\[0_0_0_1px_var\(--input-outline-border-color-hover\)_inset\]:before {
-    content: var(--tw-content);
-    --tw-shadow: 0 0 0 1px var(--tw-shadow-color, var(--input-outline-border-color-hover)) inset;
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
-
-  .before\:transition-\[opacity\,background-color\,transform\,box-shadow\,border-color\]:before {
-    content: var(--tw-content);
-    transition-property: opacity, background-color, transform, box-shadow, border-color;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-    transition-duration: var(--tw-duration, var(--default-transition-duration));
-  }
-
-  .before\:transition-\[opacity\,background-color\,transform\]:before {
-    content: var(--tw-content);
-    transition-property: opacity, background-color, transform;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-    transition-duration: var(--tw-duration, var(--default-transition-duration));
-  }
-
-  .before\:duration-\[var\(--transition-duration-basic\)\]:before {
-    content: var(--tw-content);
-    --tw-duration: var(--transition-duration-basic);
-    transition-duration: var(--transition-duration-basic);
-  }
-
-  .before\:ease-\[var\(--cubic-enter\)\]:before {
-    content: var(--tw-content);
-    --tw-ease: var(--cubic-enter);
-    transition-timing-function: var(--cubic-enter);
-  }
-
-  .before\:ease-\[var\(--transition-ease-basic\)\]:before {
-    content: var(--tw-content);
-    --tw-ease: var(--transition-ease-basic);
-    transition-timing-function: var(--transition-ease-basic);
-  }
-
-  .after\:pointer-events-none:after {
-    content: var(--tw-content);
-    pointer-events: none;
-  }
-
-  .after\:absolute:after {
-    content: var(--tw-content);
-    position: absolute;
-  }
-
-  .after\:inset-0:after {
-    content: var(--tw-content);
-    inset: calc(var(--spacing) * 0);
-  }
-
-  .after\:block:after {
-    content: var(--tw-content);
-    display: block;
-  }
-
-  .after\:rounded-\[inherit\]:after {
-    content: var(--tw-content);
-    border-radius: inherit;
-  }
-
-  .after\:transition-\[transform\]:after {
-    content: var(--tw-content);
-    transition-property: transform;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-    transition-duration: var(--tw-duration, var(--default-transition-duration));
-  }
-
-  .after\:duration-\[var\(--transition-duration-basic\)\]:after {
-    content: var(--tw-content);
-    --tw-duration: var(--transition-duration-basic);
-    transition-duration: var(--transition-duration-basic);
-  }
-
-  .after\:ease-\[var\(--transition-ease-basic\)\]:after {
-    content: var(--tw-content);
-    --tw-ease: var(--transition-ease-basic);
-    transition-timing-function: var(--transition-ease-basic);
-  }
-
   .empty\:hidden:empty {
     display: none;
   }
@@ -4066,14 +3903,12 @@
       background-color: #0000;
     }
 
-    .hover\:opacity-100:hover {
-      opacity: 1;
+    .hover\:text-primary:hover {
+      color: var(--color-text-primary);
     }
 
-    .hover\:before\:shadow-\[0_0_0_1px_var\(--input-outline-border-color-hover\)_inset\]:hover:before {
-      content: var(--tw-content);
-      --tw-shadow: 0 0 0 1px var(--tw-shadow-color, var(--input-outline-border-color-hover)) inset;
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    .hover\:opacity-100:hover {
+      opacity: 1;
     }
   }
 
@@ -4082,28 +3917,6 @@
     outline-style: none;
   }
 
-  .focus-visible\:after\:outline:focus-visible:after {
-    content: var(--tw-content);
-    outline-style: var(--tw-outline-style);
-    outline-width: 1px;
-  }
-
-  .focus-visible\:after\:outline-2:focus-visible:after {
-    content: var(--tw-content);
-    outline-style: var(--tw-outline-style);
-    outline-width: 2px;
-  }
-
-  .focus-visible\:after\:outline-offset-\[-1px\]:focus-visible:after {
-    content: var(--tw-content);
-    outline-offset: -1px;
-  }
-
-  .focus-visible\:after\:outline-\[var\(--color-ring\)\]:focus-visible:after {
-    content: var(--tw-content);
-    outline-color: var(--color-ring);
-  }
-
   @media (min-width: 768px) {
     .md\:block {
       display: block;
@@ -4389,32 +4202,2802 @@
   syntax: "*";
   inherits: false
 }
-
-@property --tw-ease {
-  syntax: "*";
-  inherits: false
+@layer components {._Container_1a6nz_1 {
+  display: flex;
+  align-items: center;
+  gap: var(--input-gap);
+  width: 100%;
+  border-radius: var(--input-radius);
+  color: var(--input-text-color);
+  cursor: text;
+  /* NOTE: Whenever this is not 16px on mobile, zooming occurs. */
+  font-size: var(--input-font-size);
+  font-weight: var(--font-weight-normal);
+  transition-duration: var(--transition-duration-basic);
+  transition-property: color, box-shadow, background-color;
+  transition-timing-function: var(--transition-ease-basic);
 }
 
-@property --tw-content {
-  syntax: "*";
-  inherits: false;
-  initial-value: "";
-}
+  ._Container_1a6nz_1:where([data-optically-align="start"]) {
+    margin-inline-start: calc(var(--input-gutter) * -1);
+  }
 
-@property --tw-scale-x {
-  syntax: "*";
-  inherits: false;
-  initial-value: 1;
-}
+  ._Container_1a6nz_1:where([data-optically-align="end"]) {
+    margin-inline-end: calc(var(--input-gutter) * -1);
+  }
 
-@property --tw-scale-y {
-  syntax: "*";
-  inherits: false;
-  initial-value: 1;
+  /* =============================================
+    Outline variant
+  ============================================= */
+  ._Container_1a6nz_1:where([data-variant="outline"]) {
+    /* NOTE: Don't add box-model size here, as the <input> defines all height sizing */
+    box-shadow: 0 0 0 1px var(--input-outline-border-color) inset;
+  }
+      @media (hover: hover) and (pointer: fine) {._Container_1a6nz_1:where([data-variant="outline"]):not([data-disabled]):hover {
+        box-shadow: 0 0 0 1px var(--input-outline-border-color-hover) inset;
+}
 }
 
-@property --tw-scale-z {
-  syntax: "*";
-  inherits: false;
-  initial-value: 1;
+      ._Container_1a6nz_1:where([data-variant="outline"]):not([data-disabled])[data-focused="true"] {
+        box-shadow: 0 0 0 1px var(--input-outline-border-color-focus) inset;
+      }
+
+      ._Container_1a6nz_1:where([data-variant="outline"]):not([data-disabled])[data-invalid] {
+        box-shadow: 0 0 0 1px var(--input-border-color-invalid) inset;
+      }
+
+  /* =============================================
+    Soft variant
+  ============================================= */
+  ._Container_1a6nz_1:where([data-variant="soft"]) {
+    background-color: var(--input-soft-background-color);
+  }
+      ._Container_1a6nz_1:where([data-variant="soft"]):not([data-disabled])[data-focused="true"] {
+        box-shadow: 0 0 0 1px var(--input-soft-border-color-focus) inset;
+      }
+
+      ._Container_1a6nz_1:where([data-variant="soft"]):not([data-disabled])[data-invalid] {
+        box-shadow: 0 0 0 1px var(--input-border-color-invalid) inset;
+      }
+
+  /* =============================================
+    Invalid
+  ============================================= */
+    ._Container_1a6nz_1[data-invalid] ::-moz-selection {
+      background-color: var(--red-a50);
+    }
+    ._Container_1a6nz_1[data-invalid] ::selection {
+      background-color: var(--red-a50);
+    }
+
+  /* =============================================
+    Sizes
+  ============================================= */
+  ._Container_1a6nz_1:where([data-size="3xs"]) {
+    --input-size: var(--control-size-3xs);
+    --input-font-size: var(--control-font-size-sm);
+    --input-radius: var(--control-radius-sm);
+    --input-gutter: var(--control-gutter-xs);
+    --input-gap: var(--input-gap-xs);
+    --input-adornment-offset: -1px;
+  }
+
+  ._Container_1a6nz_1:where([data-size="2xs"]) {
+    --input-size: var(--control-size-2xs);
+    --input-font-size: var(--control-font-size-sm);
+    --input-radius: var(--control-radius-sm);
+    --input-gutter: var(--control-gutter-xs);
+    --input-gap: var(--input-gap-xs);
+    --input-adornment-offset: -1px;
+  }
+
+  ._Container_1a6nz_1:where([data-size="xs"]) {
+    --input-size: var(--control-size-xs);
+    --input-font-size: var(--control-font-size-md);
+    --input-radius: var(--control-radius-sm);
+    --input-gutter: var(--control-gutter-xs);
+    --input-gap: var(--input-gap-sm);
+    --input-adornment-offset: -1px;
+  }
+
+  ._Container_1a6nz_1:where([data-size="sm"]) {
+    --input-size: var(--control-size-sm);
+    --input-font-size: var(--control-font-size-md);
+    --input-radius: var(--control-radius-md);
+    --input-gutter: var(--control-gutter-sm);
+    --input-gap: var(--input-gap-md);
+    --input-adornment-offset: -1px;
+  }
+
+  ._Container_1a6nz_1:where([data-size="md"]) {
+    --input-size: var(--control-size-md);
+    --input-font-size: var(--control-font-size-md);
+    --input-radius: var(--control-radius-md);
+    --input-gutter: var(--control-gutter-md);
+    --input-gap: var(--input-gap-md);
+  }
+
+  ._Container_1a6nz_1:where([data-size="lg"]) {
+    --input-size: var(--control-size-lg);
+    --input-font-size: var(--control-font-size-md);
+    --input-radius: var(--control-radius-md);
+    --input-gutter: var(--control-gutter-md);
+    --input-gap: var(--input-gap-md);
+  }
+
+  ._Container_1a6nz_1:where([data-size="xl"]) {
+    --input-size: var(--control-size-xl);
+    --input-font-size: var(--control-font-size-lg);
+    --input-radius: var(--control-radius-lg);
+    --input-gutter: var(--control-gutter-lg);
+    --input-gap: var(--input-gap-lg);
+  }
+
+  ._Container_1a6nz_1:where([data-size="2xl"]) {
+    --input-size: var(--control-size-2xl);
+    --input-font-size: var(--control-font-size-lg);
+    --input-radius: var(--control-radius-xl);
+    --input-gutter: var(--control-gutter-xl);
+    --input-gap: var(--input-gap-lg);
+    --input-adornment-offset: -4px;
+  }
+
+  ._Container_1a6nz_1:where([data-size="3xl"]) {
+    --input-size: var(--control-size-3xl);
+    --input-font-size: var(--control-font-size-lg);
+    --input-radius: var(--control-radius-xl);
+    --input-gutter: var(--control-gutter-xl);
+    --input-gap: var(--input-gap-lg);
+    --input-adornment-offset: -4px;
+  }
+
+  /* =============================================
+    Gutter sizes
+  ============================================= */
+  ._Container_1a6nz_1:where([data-gutter-size="2xs"]) {
+    --input-gutter: var(--control-gutter-2xs);
+    --input-adornment-offset: -1px;
+  }
+
+  ._Container_1a6nz_1:where([data-gutter-size="xs"]) {
+    --input-gutter: var(--control-gutter-xs);
+    --input-adornment-offset: -1px;
+  }
+
+  ._Container_1a6nz_1:where([data-gutter-size="sm"]) {
+    --input-gutter: var(--control-gutter-sm);
+    --input-adornment-offset: -2px;
+  }
+
+  ._Container_1a6nz_1:where([data-gutter-size="md"]) {
+    --input-gutter: var(--control-gutter-md);
+    --input-adornment-offset: -2px;
+  }
+
+  ._Container_1a6nz_1:where([data-gutter-size="lg"]) {
+    --input-gutter: var(--control-gutter-lg);
+    --input-adornment-offset: -2px;
+  }
+
+  ._Container_1a6nz_1:where([data-gutter-size="xl"]) {
+    --input-gutter: var(--control-gutter-xl);
+    --input-adornment-offset: -4px;
+  }
+
+  /* =============================================
+    Pill
+  ============================================= */
+  ._Container_1a6nz_1:where([data-pill]) {
+    --input-radius: var(--radius-full);
+  }
+
+  /* =============================================
+    Disabled
+  ============================================= */
+  ._Container_1a6nz_1[data-disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+  /*
+   * When adornments are present, gutter is applied to the container instead of the input.
+   */
+  ._Container_1a6nz_1:where([data-has-start-adornment]) {
+    padding-left: var(--input-gutter);
+  }
+
+  /* =============================================
+    Gutter
+  ============================================= */
+
+  ._Container_1a6nz_1:where([data-has-start-adornment][data-pill]) {
+    padding-left: calc(var(--input-gutter) * var(--control-gutter-pill-scaling));
+  }
+
+  ._Container_1a6nz_1:where([data-has-end-adornment]) {
+    padding-right: var(--input-gutter);
+  }
+
+  ._Container_1a6nz_1:where([data-has-end-adornment][data-pill]) {
+    padding-right: calc(var(--input-gutter) * var(--control-gutter-pill-scaling));
+  }
+
+  /* =============================================
+    Adornments
+  ============================================= */
+  ._Container_1a6nz_1 > :first-child:not(input) {
+    margin-left: var(--input-adornment-offset, -2px);
+  }
+
+  ._Container_1a6nz_1 > :last-child:not(input) {
+    margin-right: var(--input-adornment-offset, -2px);
+  }._Input_1a6nz_229 {
+  display: block;
+  width: 100%;
+  height: var(--input-size);
+  /* `padding` is intrinsic to `.Input` when no adornments are present, for a few reasons. Autofill extensions are one such reason. */
+  padding: 0 var(--input-gutter);
+  border: 0;
+  border-radius: 0;
+  background: none;
+  box-shadow: none;
+  color: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+}
+
+  ._Input_1a6nz_229:focus {
+    outline: 0;
+  }
+
+  ._Input_1a6nz_229:disabled {
+    cursor: not-allowed;
+  }
+
+  ._Input_1a6nz_229::-moz-placeholder {
+    color: var(--input-placeholder-text-color);
+  }
+
+  ._Input_1a6nz_229::placeholder {
+    color: var(--input-placeholder-text-color);
+  }
+
+  /* Applying an animation on autofill allows us to listen for the event in JS */
+  ._Input_1a6nz_229:-webkit-autofill {
+    animation: _native-autofill-in_1a6nz_1 1ms;
+  }
+
+  ._Input_1a6nz_229:-webkit-autofill, ._Input_1a6nz_229:-webkit-autofill:focus, ._Input_1a6nz_229:-webkit-autofill:hover {
+    color: var(--color-text) !important;
+    -webkit-text-fill-color: var(--color-text) !important;
+    /*
+     * Prevent all color changes by delaying their effect for a very long time
+     * We cannot beat the specificity of user-agent stylesheet declarations, so we must delay them.
+     */
+    -webkit-transition:
+      background-color 0s 50000s,
+      box-shadow 0s 50000s,
+      filter 0s 50000s !important;
+    transition:
+      background-color 0s 50000s,
+      box-shadow 0s 50000s,
+      filter 0s 50000s !important;
+}
+
+  ._Input_1a6nz_229:-webkit-autofill-and-obscured, ._Input_1a6nz_229:-webkit-autofill-strong-password, ._Input_1a6nz_229:-webkit-autofill-strong-password-viewable {
+    color: var(--color-text) !important;
+    -webkit-text-fill-color: var(--color-text) !important;
+    /*
+     * Prevent all color changes by delaying their effect for a very long time
+     * We cannot beat the specificity of user-agent stylesheet declarations, so we must delay them.
+     */
+    -webkit-transition:
+      background-color 0s 50000s,
+      box-shadow 0s 50000s,
+      filter 0s 50000s !important;
+    transition:
+      background-color 0s 50000s,
+      box-shadow 0s 50000s,
+      filter 0s 50000s !important;
+}
+
+  /* Prevent strange autofill size adjustments */
+  ._Input_1a6nz_229:-webkit-autofill::first-line {
+    font-size: inherit !important;
+    -webkit-transition: font-size 0s 50000s !important;
+    transition: font-size 0s 50000s !important;
+  }
+
+  /* Hide up/down arrows */
+  ._Input_1a6nz_229[type="number"] {
+    /* Firefox */
+    -webkit-appearance: textfield;
+       -moz-appearance: textfield;
+            appearance: textfield;
+
+    /* Chrome, Safari, Edge, Opera */
+  }
+    ._Input_1a6nz_229[type="number"]::-webkit-outer-spin-button,
+    ._Input_1a6nz_229[type="number"]::-webkit-inner-spin-button {
+      margin: 0;
+      -webkit-appearance: none;
+              appearance: none;
+    }
+
+  /* Dynamic pill spacing */
+  :where(._Container_1a6nz_1[data-pill]) ._Input_1a6nz_229 {
+    padding: 0 calc(var(--input-gutter) * var(--control-gutter-pill-scaling));
+  }
+
+  :where(._Container_1a6nz_1[data-has-start-adornment]) ._Input_1a6nz_229 {
+    padding-left: 0;
+  }
+
+  :where(._Container_1a6nz_1[data-has-end-adornment]) ._Input_1a6nz_229 {
+    padding-right: 0;
+  }@keyframes _native-autofill-in_1a6nz_1 {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+}
+@layer components {._LoadingIndicator_7yl6f_1 {
+  position: relative;
+  width: var(--indicator-size, 1em);
+  height: var(--indicator-size, 1em);
+  animation: _rotate_7yl6f_1 var(--indicator-rotate-duration, 0.8s) linear infinite;
+  transition: opacity 0.15s ease;
+}
+
+  ._LoadingIndicator_7yl6f_1::before {
+    position: absolute;
+    inset: 0;
+    display: block;
+    border: var(--indicator-stroke, 2px) solid var(--indicator-color, currentcolor);
+    border-radius: 50%;
+    content: "";
+    -webkit-mask-image: conic-gradient(rgb(0 0 0 / 0%), rgb(0 0 0));
+            mask-image: conic-gradient(rgb(0 0 0 / 0%), rgb(0 0 0));
+  }
+
+  ._LoadingIndicator_7yl6f_1::after {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    display: block;
+    width: var(--indicator-stroke, 2px);
+    height: var(--indicator-stroke, 2px);
+    border-radius: 100%;
+    margin-left: calc(var(--indicator-stroke, 2px) * -1 / 2);
+    background-color: var(--indicator-color, currentcolor);
+    content: "";
+  }@keyframes _rotate_7yl6f_1 {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(1turn);
+  }
+}
+}
+@layer components {._TransitionGroupChild_1hv1z_1 {
+  display: block;
+}
+}
+@layer components {._Button_1864l_1 {
+  position: relative;
+  display: inline-block;
+  gap: var(--button-gap); /* Propagates down to .ButtonInner */
+  flex-shrink: 0;
+  height: var(--button-size);
+  padding: 0 var(--button-gutter);
+  border-radius: var(--button-radius);
+  cursor: pointer;
+  font-size: var(--button-font-size);
+  font-weight: var(--button-font-weight);
+  line-height: 1;
+  transition-duration: var(--transition-duration-basic);
+  transition-property: opacity, color;
+  transition-timing-function: var(--transition-ease-basic);
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  white-space: nowrap;
+
+  /* =============================================
+    Disabled
+  ============================================= */
+}
+
+  /* Background / shape of the button */
+  ._Button_1864l_1::before {
+    position: absolute;
+    inset: 0;
+    display: block;
+    border-radius: inherit;
+    content: "";
+    transition-duration: var(--transition-duration-basic);
+    transition-property: opacity, background-color, transform, box-shadow, border-color;
+    transition-timing-function: var(--transition-ease-basic);
+    /* Composite layer seems required in some cases to avoid visual artifacts. */
+    will-change: transform;
+  }
+
+  /* Focus ring */
+  ._Button_1864l_1::after {
+    position: absolute;
+    inset: 0;
+    display: block;
+    border-radius: inherit;
+    content: "";
+    pointer-events: none;
+    transition-duration: var(--transition-duration-basic);
+    transition-property: transform;
+    transition-timing-function: var(--transition-ease-basic);
+    /* Composite layer seems required in some cases to avoid visual artifacts. */
+    will-change: transform;
+  }
+
+  ._Button_1864l_1:focus {
+    outline: none;
+  }
+    ._Button_1864l_1:focus-visible::after {
+      outline: 2px solid var(--button-ring-color, var(--color-ring));
+      outline-offset: var(--button-ring-offset, 2px);
+    }
+
+  ._Button_1864l_1 svg:where(:not([data-no-autosize])) {
+    width: var(--button-icon-size);
+    height: var(--button-icon-size);
+  }
+
+    :where(._Button_1864l_1 svg:where(:not([data-no-autosize])):first-child:not(:only-child)) {
+      margin-left: var(--button-icon-offset, -1px);
+    }
+
+    :where(._Button_1864l_1 svg:where(:not([data-no-autosize])):last-child:not(:only-child)) {
+      margin-right: var(--button-icon-offset, -1px);
+    }
+
+  /* =============================================
+    Optical alignment
+  ============================================= */
+  ._Button_1864l_1:where([data-optically-align="start"]) {
+    margin-inline-start: calc(var(--button-gutter) * -1);
+  }
+
+  ._Button_1864l_1:where([data-optically-align="end"]) {
+    margin-inline-end: calc(var(--button-gutter) * -1);
+  }
+
+  /* Uniform buttons zero-out button-gutter, requiring custom calcs */
+  ._Button_1864l_1:where([data-optically-align="start"][data-uniform]) {
+    margin-inline-start: calc(((var(--button-size) - var(--button-icon-size)) / 2) * -1);
+  }
+
+  ._Button_1864l_1:where([data-optically-align="end"][data-uniform]) {
+    margin-inline-end: calc(((var(--button-size) - var(--button-icon-size)) / 2) * -1);
+  }
+
+  /* =============================================
+    Sizes
+  ============================================= */
+  ._Button_1864l_1:where([data-size="3xs"]) {
+    --button-size: var(--control-size-3xs);
+    --button-gutter: var(--control-gutter-2xs);
+    --button-font-size: var(--control-font-size-sm);
+    --button-icon-size: var(--control-icon-size-xs);
+    --button-gap: var(--button-gap-sm);
+    --button-radius: var(--control-radius-sm);
+    --button-icon-offset: -1px;
+    --indicator-size: 11px;
+    --circular-progress-size: 11px;
+  }
+
+  ._Button_1864l_1:where([data-size="2xs"]) {
+    --button-size: var(--control-size-2xs);
+    --button-gutter: var(--control-gutter-xs);
+    --button-font-size: var(--control-font-size-sm);
+    --button-icon-size: var(--control-icon-size-sm);
+    --button-gap: var(--button-gap-md);
+    --button-radius: var(--control-radius-sm);
+    --button-icon-offset: -1px;
+    --indicator-size: 12px;
+    --circular-progress-size: 12px;
+  }
+
+  ._Button_1864l_1:where([data-size="xs"]) {
+    --button-size: var(--control-size-xs);
+    --button-gutter: var(--control-gutter-xs);
+    --button-font-size: var(--control-font-size-md);
+    --button-icon-size: var(--control-icon-size-sm);
+    --button-gap: var(--button-gap-md);
+    --button-radius: var(--control-radius-sm);
+    --button-icon-offset: -1px;
+    --indicator-size: 13px;
+    --circular-progress-size: 14px;
+  }
+
+  ._Button_1864l_1:where([data-size="sm"]) {
+    --button-size: var(--control-size-sm);
+    --button-gutter: var(--control-gutter-sm);
+    --button-font-size: var(--control-font-size-md);
+    --button-icon-size: var(--control-icon-size-md);
+    --button-gap: var(--button-gap-md);
+    --button-radius: var(--control-radius-sm);
+    --button-icon-offset: -1px;
+    --indicator-size: 15px;
+    --circular-progress-size: 15px;
+  }
+
+  ._Button_1864l_1:where([data-size="md"]) {
+    --button-size: var(--control-size-md);
+    --button-gutter: var(--control-gutter-md);
+    --button-font-size: var(--control-font-size-md);
+    --button-icon-size: var(--control-icon-size-md);
+    --button-gap: var(--button-gap-lg);
+    --button-radius: var(--control-radius-md);
+    --button-icon-offset: -1px;
+    --indicator-size: 16px;
+    --circular-progress-size: 16px;
+  }
+
+  ._Button_1864l_1:where([data-size="lg"]) {
+    --button-size: var(--control-size-lg);
+    --button-gutter: var(--control-gutter-md);
+    --button-font-size: var(--control-font-size-md);
+    --button-icon-size: var(--control-icon-size-md);
+    --button-gap: var(--button-gap-lg);
+    --button-radius: var(--control-radius-md);
+    --button-icon-offset: -1px;
+    --indicator-size: 16px;
+    --circular-progress-size: 16px;
+  }
+
+  ._Button_1864l_1:where([data-size="xl"]) {
+    --button-size: var(--control-size-xl);
+    --button-gutter: var(--control-gutter-lg);
+    --button-font-size: var(--control-font-size-md);
+    --button-icon-size: var(--control-icon-size-md);
+    --button-gap: var(--button-gap-lg);
+    --button-radius: var(--control-radius-lg);
+    --button-icon-offset: -1px;
+    --indicator-size: 18px;
+    --circular-progress-size: 18px;
+  }
+
+  ._Button_1864l_1:where([data-size="2xl"]) {
+    --button-size: var(--control-size-2xl);
+    --button-gutter: var(--control-gutter-lg);
+    --button-font-size: var(--control-font-size-lg);
+    --button-icon-size: var(--control-icon-size-lg);
+    --button-gap: var(--button-gap-lg);
+    --button-radius: var(--control-radius-xl);
+    --button-icon-offset: -2px;
+    --indicator-size: 18px;
+    --circular-progress-size: 18px;
+  }
+
+  ._Button_1864l_1:where([data-size="3xl"]) {
+    --button-size: var(--control-size-3xl);
+    --button-gutter: var(--control-gutter-xl);
+    --button-font-size: var(--control-font-size-lg);
+    --button-icon-size: var(--control-icon-size-lg);
+    --button-gap: var(--button-gap-lg);
+    --button-radius: var(--control-radius-xl);
+    --button-icon-offset: -2px;
+    --indicator-size: 20px;
+    --circular-progress-size: 20px;
+  }
+
+  /* =============================================
+    Gutter sizes
+  ============================================= */
+  ._Button_1864l_1:where([data-gutter-size="2xs"]) {
+    --button-gutter: var(--control-gutter-2xs);
+  }
+
+  ._Button_1864l_1:where([data-gutter-size="xs"]) {
+    --button-gutter: var(--control-gutter-xs);
+  }
+
+  ._Button_1864l_1:where([data-gutter-size="sm"]) {
+    --button-gutter: var(--control-gutter-sm);
+  }
+
+  ._Button_1864l_1:where([data-gutter-size="md"]) {
+    --button-gutter: var(--control-gutter-md);
+  }
+
+  ._Button_1864l_1:where([data-gutter-size="lg"]) {
+    --button-gutter: var(--control-gutter-lg);
+  }
+
+  ._Button_1864l_1:where([data-gutter-size="xl"]) {
+    --button-gutter: var(--control-gutter-xl);
+  }
+
+  /* =============================================
+    Icon sizes
+  ============================================= */
+  ._Button_1864l_1:where([data-icon-size="sm"]) {
+    --button-icon-size: var(--control-icon-size-sm);
+  }
+
+  ._Button_1864l_1:where([data-icon-size="md"]) {
+    --button-icon-size: var(--control-icon-size-md);
+  }
+
+  ._Button_1864l_1:where([data-icon-size="lg"]) {
+    --button-icon-size: var(--control-icon-size-lg);
+  }
+
+  ._Button_1864l_1:where([data-icon-size="xl"]) {
+    --button-icon-size: var(--control-icon-size-xl);
+  }
+
+  ._Button_1864l_1:where([data-icon-size="2xl"]) {
+    --button-icon-size: var(--control-icon-size-2xl);
+  }
+
+  /* =============================================
+    Pill
+  ============================================= */
+  ._Button_1864l_1:where([data-pill]) {
+    --button-radius: var(--radius-full);
+
+    padding: 0 calc(var(--button-gutter) * var(--control-gutter-pill-scaling));
+  }
+
+  /* =============================================
+    Block
+  ============================================= */
+  ._Button_1864l_1:where([data-block]) {
+    width: 100%;
+  }
+
+  /* =============================================
+    Uniform
+  ============================================= */
+  ._Button_1864l_1[data-uniform] {
+    --button-gutter: 0;
+
+    width: var(--button-size);
+  }
+
+  /* =============================================
+    Ghost variant
+  ============================================= */
+  ._Button_1864l_1[data-variant="ghost"] {
+    --button-ring-offset: -1px;
+
+    color: var(--button-text-color);
+  }
+
+    ._Button_1864l_1[data-variant="ghost"]::before {
+      background-color: var(--button-background-color);
+      opacity: 0;
+      transform: scale(var(--scale));
+    }
+
+    ._Button_1864l_1[data-variant="ghost"][aria-expanded="true"],
+    ._Button_1864l_1[data-variant="ghost"][data-state="open"] {
+      color: var(--button-text-color-hover);
+    }
+
+      ._Button_1864l_1[data-variant="ghost"][aria-expanded="true"]::before, ._Button_1864l_1[data-variant="ghost"][data-state="open"]::before {
+        /* Slightly deemphasize */
+        opacity: 0.6;
+        transform: scale(1);
+      }
+
+    ._Button_1864l_1[data-variant="ghost"][data-selected] {
+      color: var(--button-text-color-hover);
+    }
+
+      ._Button_1864l_1[data-variant="ghost"][data-selected]::before {
+        opacity: 1;
+        transform: scale(1);
+      }
+      @media (hover: hover) and (pointer: fine) {._Button_1864l_1[data-variant="ghost"]:where(:not([data-disabled])):hover {
+        color: var(--button-text-color-hover);
+}
+
+        ._Button_1864l_1[data-variant="ghost"]:where(:not([data-disabled])):hover::before {
+          opacity: 1;
+          transform: scale(1);
+        }
+}
+        ._Button_1864l_1[data-variant="ghost"]:where(:not([data-disabled])):active::before {
+          background-color: var(--button-background-color-active);
+          opacity: 1;
+          transform: scale(var(--scale));
+        }
+
+        ._Button_1864l_1[data-variant="ghost"]:where(:not([data-disabled])):active::after {
+          transform: scale(var(--scale));
+        }
+
+    ._Button_1864l_1[data-variant="ghost"]:where([data-color="primary"]) {
+      --button-background-color: var(--color-background-primary-ghost-hover);
+      --button-background-color-active: var(--color-background-primary-ghost-active);
+      --button-text-color: var(--color-text-primary-ghost);
+      --button-text-color-hover: var(--color-text-primary-ghost-hover);
+      --button-ring-color: var(--color-ring-primary-ghost);
+    }
+
+    ._Button_1864l_1[data-variant="ghost"]:where([data-color="secondary"]) {
+      --button-background-color: var(--color-background-secondary-ghost-hover);
+      --button-background-color-active: var(--color-background-secondary-ghost-active);
+      --button-text-color: var(--color-text-secondary-ghost);
+      --button-text-color-hover: var(--color-text-secondary-ghost-hover);
+      --button-ring-color: var(--color-ring-secondary-ghost);
+    }
+
+    ._Button_1864l_1[data-variant="ghost"]:where([data-color="danger"]) {
+      --button-background-color: var(--color-background-danger-ghost-hover);
+      --button-background-color-active: var(--color-background-danger-ghost-active);
+      --button-text-color: var(--color-text-danger-ghost);
+      --button-text-color-hover: var(--color-text-danger-ghost-hover);
+      --button-ring-color: var(--color-ring-danger-ghost);
+    }
+
+    ._Button_1864l_1[data-variant="ghost"]:where([data-color="success"]) {
+      --button-background-color: var(--color-background-success-ghost-hover);
+      --button-background-color-active: var(--color-background-success-ghost-active);
+      --button-text-color: var(--color-text-success-ghost);
+      --button-text-color-hover: var(--color-text-success-ghost-hover);
+      --button-ring-color: var(--color-ring-success-ghost);
+    }
+
+    ._Button_1864l_1[data-variant="ghost"]:where([data-color="warning"]) {
+      --button-background-color: var(--color-background-warning-ghost-hover);
+      --button-background-color-active: var(--color-background-warning-ghost-active);
+      --button-text-color: var(--color-text-warning-ghost);
+      --button-text-color-hover: var(--color-text-warning-ghost-hover);
+      --button-ring-color: var(--color-ring-warning-ghost);
+    }
+
+    ._Button_1864l_1[data-variant="ghost"]:where([data-color="caution"]) {
+      --button-background-color: var(--color-background-caution-ghost-hover);
+      --button-background-color-active: var(--color-background-caution-ghost-active);
+      --button-text-color: var(--color-text-caution-ghost);
+      --button-text-color-hover: var(--color-text-caution-ghost-hover);
+      --button-ring-color: var(--color-ring-caution-ghost);
+    }
+
+    ._Button_1864l_1[data-variant="ghost"]:where([data-color="info"]) {
+      --button-background-color: var(--color-background-info-ghost-hover);
+      --button-background-color-active: var(--color-background-info-ghost-active);
+      --button-text-color: var(--color-text-info-ghost);
+      --button-text-color-hover: var(--color-text-info-ghost-hover);
+      --button-ring-color: var(--color-ring-info-ghost);
+    }
+
+    ._Button_1864l_1[data-variant="ghost"]:where([data-color="discovery"]) {
+      --button-background-color: var(--color-background-discovery-ghost-hover);
+      --button-background-color-active: var(--color-background-discovery-ghost-active);
+      --button-text-color: var(--color-text-discovery-ghost);
+      --button-text-color-hover: var(--color-text-discovery-ghost-hover);
+      --button-ring-color: var(--color-ring-discovery-ghost);
+    }
+
+  /* =============================================
+    Solid variant
+  ============================================= */
+  ._Button_1864l_1[data-variant="solid"] {
+    color: var(--button-text-color);
+  }
+
+    ._Button_1864l_1[data-variant="solid"]::before {
+      background-color: var(--button-background-color);
+    }
+      ._Button_1864l_1[data-variant="solid"][aria-expanded="true"]::before, ._Button_1864l_1[data-variant="solid"][data-state="open"]::before, ._Button_1864l_1[data-variant="solid"][data-selected]::before {
+        background-color: var(--button-background-color-hover);
+      }
+      @media (hover: hover) and (pointer: fine) {
+        ._Button_1864l_1[data-variant="solid"]:where(:not([data-disabled])):hover::before {
+          background-color: var(--button-background-color-hover);
+        }
+}
+        ._Button_1864l_1[data-variant="solid"]:where(:not([data-disabled])):active::before {
+          background-color: var(--button-background-color-active);
+        }
+
+        ._Button_1864l_1[data-variant="solid"]:where(:not([data-disabled])):active::before,
+        ._Button_1864l_1[data-variant="solid"]:where(:not([data-disabled])):active::after {
+          transform: scale(var(--scale));
+        }
+
+    ._Button_1864l_1[data-variant="solid"]:where([data-color="primary"]) {
+      --button-background-color: var(--color-background-primary-solid);
+      --button-background-color-hover: var(--color-background-primary-solid-hover);
+      --button-background-color-active: var(--color-background-primary-solid-active);
+      --button-text-color: var(--color-text-primary-solid);
+      --button-ring-color: var(--color-ring-primary-solid);
+    }
+
+    ._Button_1864l_1[data-variant="solid"]:where([data-color="secondary"]) {
+      --button-background-color: var(--color-background-secondary-solid);
+      --button-background-color-hover: var(--color-background-secondary-solid-hover);
+      --button-background-color-active: var(--color-background-secondary-solid-active);
+      --button-text-color: var(--color-text-secondary-solid);
+      --button-ring-color: var(--color-ring-secondary-solid);
+    }
+
+    ._Button_1864l_1[data-variant="solid"]:where([data-color="success"]) {
+      --button-background-color: var(--color-background-success-solid);
+      --button-background-color-hover: var(--color-background-success-solid-hover);
+      --button-background-color-active: var(--color-background-success-solid-active);
+      --button-text-color: var(--color-text-success-solid);
+      --button-ring-color: var(--color-ring-success-solid);
+    }
+
+    ._Button_1864l_1[data-variant="solid"]:where([data-color="danger"]) {
+      --button-background-color: var(--color-background-danger-solid);
+      --button-background-color-hover: var(--color-background-danger-solid-hover);
+      --button-background-color-active: var(--color-background-danger-solid-active);
+      --button-text-color: var(--color-text-danger-solid);
+      --button-ring-color: var(--color-ring-danger-solid);
+    }
+
+    ._Button_1864l_1[data-variant="solid"]:where([data-color="warning"]) {
+      --button-background-color: var(--color-background-warning-solid);
+      --button-background-color-hover: var(--color-background-warning-solid-hover);
+      --button-background-color-active: var(--color-background-warning-solid-active);
+      --button-text-color: var(--color-text-warning-solid);
+      --button-ring-color: var(--color-ring-warning-solid);
+    }
+
+    ._Button_1864l_1[data-variant="solid"]:where([data-color="caution"]) {
+      --button-background-color: var(--color-background-caution-solid);
+      --button-background-color-hover: var(--color-background-caution-solid-hover);
+      --button-background-color-active: var(--color-background-caution-solid-active);
+      --button-text-color: var(--color-text-caution-solid);
+      --button-ring-color: var(--color-ring-caution-solid);
+    }
+
+    ._Button_1864l_1[data-variant="solid"]:where([data-color="info"]) {
+      --button-background-color: var(--color-background-info-solid);
+      --button-background-color-hover: var(--color-background-info-solid-hover);
+      --button-background-color-active: var(--color-background-info-solid-active);
+      --button-text-color: var(--color-text-info-solid);
+      --button-ring-color: var(--color-ring-info-solid);
+    }
+
+    ._Button_1864l_1[data-variant="solid"]:where([data-color="discovery"]) {
+      --button-background-color: var(--color-background-discovery-solid);
+      --button-background-color-hover: var(--color-background-discovery-solid-hover);
+      --button-background-color-active: var(--color-background-discovery-solid-active);
+      --button-text-color: var(--color-text-discovery-solid);
+      --button-ring-color: var(--color-ring-discovery-solid);
+    }
+
+  /* =============================================
+    Soft variant
+  ============================================= */
+  ._Button_1864l_1[data-variant="soft"] {
+    color: var(--button-text-color);
+  }
+
+    ._Button_1864l_1[data-variant="soft"]::before {
+      background-color: var(--button-background-color);
+    }
+      ._Button_1864l_1[data-variant="soft"][aria-expanded="true"]::before, ._Button_1864l_1[data-variant="soft"][data-state="open"]::before, ._Button_1864l_1[data-variant="soft"][data-selected]::before {
+        background-color: var(--button-background-color-hover);
+      }
+      @media (hover: hover) and (pointer: fine) {
+        ._Button_1864l_1[data-variant="soft"]:where(:not([data-disabled])):hover::before {
+          background-color: var(--button-background-color-hover);
+        }
+}
+        ._Button_1864l_1[data-variant="soft"]:where(:not([data-disabled])):active::before {
+          background-color: var(--button-background-color-active);
+        }
+
+        ._Button_1864l_1[data-variant="soft"]:where(:not([data-disabled])):active::before,
+        ._Button_1864l_1[data-variant="soft"]:where(:not([data-disabled])):active::after {
+          transform: scale(var(--scale));
+        }
+
+    ._Button_1864l_1[data-variant="soft"]:where([data-color="primary"]) {
+      --button-background-color: var(--color-background-primary-soft-alpha);
+      --button-background-color-hover: var(--color-background-primary-soft-alpha-hover);
+      --button-background-color-active: var(--color-background-primary-soft-alpha-active);
+      --button-text-color: var(--color-text-primary-soft);
+      --button-ring-color: var(--color-ring-primary-soft);
+    }
+
+    ._Button_1864l_1[data-variant="soft"]:where([data-color="secondary"]) {
+      --button-background-color: var(--color-background-secondary-soft-alpha);
+      --button-background-color-hover: var(--color-background-secondary-soft-alpha-hover);
+      --button-background-color-active: var(--color-background-secondary-soft-alpha-active);
+      --button-text-color: var(--color-text-secondary-soft);
+      --button-ring-color: var(--color-ring-secondary-soft);
+    }
+
+    ._Button_1864l_1[data-variant="soft"]:where([data-color="success"]) {
+      --button-background-color: var(--color-background-success-soft-alpha);
+      --button-background-color-hover: var(--color-background-success-soft-alpha-hover);
+      --button-background-color-active: var(--color-background-success-soft-alpha-active);
+      --button-text-color: var(--color-text-success-soft);
+      --button-ring-color: var(--color-ring-success-soft);
+    }
+
+    ._Button_1864l_1[data-variant="soft"]:where([data-color="danger"]) {
+      --button-background-color: var(--color-background-danger-soft-alpha);
+      --button-background-color-hover: var(--color-background-danger-soft-alpha-hover);
+      --button-background-color-active: var(--color-background-danger-soft-alpha-active);
+      --button-text-color: var(--color-text-danger-soft);
+      --button-ring-color: var(--color-ring-danger-soft);
+    }
+
+    ._Button_1864l_1[data-variant="soft"]:where([data-color="warning"]) {
+      --button-background-color: var(--color-background-warning-soft-alpha);
+      --button-background-color-hover: var(--color-background-warning-soft-alpha-hover);
+      --button-background-color-active: var(--color-background-warning-soft-alpha-active);
+      --button-text-color: var(--color-text-warning-soft);
+      --button-ring-color: var(--color-ring-warning-soft);
+    }
+
+    ._Button_1864l_1[data-variant="soft"]:where([data-color="caution"]) {
+      --button-background-color: var(--color-background-caution-soft-alpha);
+      --button-background-color-hover: var(--color-background-caution-soft-alpha-hover);
+      --button-background-color-active: var(--color-background-caution-soft-alpha-active);
+      --button-text-color: var(--color-text-caution-soft);
+      --button-ring-color: var(--color-ring-caution-soft);
+    }
+
+    ._Button_1864l_1[data-variant="soft"]:where([data-color="info"]) {
+      --button-background-color: var(--color-background-info-soft-alpha);
+      --button-background-color-hover: var(--color-background-info-soft-alpha-hover);
+      --button-background-color-active: var(--color-background-info-soft-alpha-active);
+      --button-text-color: var(--color-text-info-soft);
+      --button-ring-color: var(--color-ring-info-soft);
+    }
+
+    ._Button_1864l_1[data-variant="soft"]:where([data-color="discovery"]) {
+      --button-background-color: var(--color-background-discovery-soft-alpha);
+      --button-background-color-hover: var(--color-background-discovery-soft-alpha-hover);
+      --button-background-color-active: var(--color-background-discovery-soft-alpha-active);
+      --button-text-color: var(--color-text-discovery-soft);
+      --button-ring-color: var(--color-ring-discovery-soft);
+    }
+
+  /* =============================================
+    Outline variant
+  ============================================= */
+  ._Button_1864l_1[data-variant="outline"] {
+    --button-ring-offset: -1px;
+
+    color: var(--button-text-color);
+  }
+
+    ._Button_1864l_1[data-variant="outline"]::before {
+      background-color: transparent;
+      box-shadow:
+        0 0 0 1px var(--button-border-color) inset,
+        var(--button-shadow-custom, 0 0 #00000000);
+    }
+
+    ._Button_1864l_1[data-variant="outline"][aria-expanded="true"],
+    ._Button_1864l_1[data-variant="outline"][data-state="open"],
+    ._Button_1864l_1[data-variant="outline"][data-selected] {
+      color: var(--button-text-color-hover);
+    }
+
+      ._Button_1864l_1[data-variant="outline"][aria-expanded="true"]::before, ._Button_1864l_1[data-variant="outline"][data-state="open"]::before, ._Button_1864l_1[data-variant="outline"][data-selected]::before {
+        background-color: var(--button-background-color-hover);
+        box-shadow:
+          0 0 0 1px var(--button-border-color-hover) inset,
+          var(--button-shadow-custom, 0 0 #00000000);
+      }
+      @media (hover: hover) and (pointer: fine) {._Button_1864l_1[data-variant="outline"]:where(:not([data-disabled])):hover {
+        color: var(--button-text-color-hover);
+}
+
+        ._Button_1864l_1[data-variant="outline"]:where(:not([data-disabled])):hover::before {
+          background-color: var(--button-background-color-hover);
+          box-shadow:
+            0 0 0 1px var(--button-border-color-hover) inset,
+            var(--button-shadow-custom, 0 0 #00000000);
+        }
+}
+        ._Button_1864l_1[data-variant="outline"]:where(:not([data-disabled])):active::before {
+          background-color: var(--button-background-color-active);
+          transform: scale(var(--scale));
+        }
+
+        ._Button_1864l_1[data-variant="outline"]:where(:not([data-disabled])):active::after {
+          transform: scale(var(--scale));
+        }
+
+    ._Button_1864l_1[data-variant="outline"]:where([data-color="primary"]) {
+      --button-background-color-hover: var(--color-background-primary-outline-hover);
+      --button-background-color-active: var(--color-background-primary-outline-active);
+      --button-border-color: var(--color-border-primary-outline);
+      --button-border-color-hover: var(--color-border-primary-outline-hover);
+      --button-text-color: var(--color-text-primary-outline);
+      --button-text-color-hover: var(--color-text-primary-outline-hover);
+      --button-ring-color: var(--color-ring-primary-outline);
+    }
+
+    ._Button_1864l_1[data-variant="outline"]:where([data-color="secondary"]) {
+      --button-background-color-hover: var(--color-background-secondary-outline-hover);
+      --button-background-color-active: var(--color-background-secondary-outline-active);
+      --button-border-color: var(--color-border-secondary-outline);
+      --button-border-color-hover: var(--color-border-secondary-outline-hover);
+      --button-text-color: var(--color-text-secondary-outline);
+      --button-text-color-hover: var(--color-text-secondary-outline-hover);
+      --button-ring-color: var(--color-ring-secondary-outline);
+    }
+
+    ._Button_1864l_1[data-variant="outline"]:where([data-color="danger"]) {
+      --button-background-color-hover: var(--color-background-danger-outline-hover);
+      --button-background-color-active: var(--color-background-danger-outline-active);
+      --button-border-color: var(--color-border-danger-outline);
+      --button-border-color-hover: var(--color-border-danger-outline-hover);
+      --button-text-color: var(--color-text-danger-outline);
+      --button-text-color-hover: var(--color-text-danger-outline-hover);
+      --button-ring-color: var(--color-ring-danger-outline);
+    }
+
+    ._Button_1864l_1[data-variant="outline"]:where([data-color="success"]) {
+      --button-background-color-hover: var(--color-background-success-outline-hover);
+      --button-background-color-active: var(--color-background-success-outline-active);
+      --button-border-color: var(--color-border-success-outline);
+      --button-border-color-hover: var(--color-border-success-outline-hover);
+      --button-text-color: var(--color-text-success-outline);
+      --button-text-color-hover: var(--color-text-success-outline-hover);
+      --button-ring-color: var(--color-ring-success-outline);
+    }
+
+    ._Button_1864l_1[data-variant="outline"]:where([data-color="warning"]) {
+      --button-background-color-hover: var(--color-background-warning-outline-hover);
+      --button-background-color-active: var(--color-background-warning-outline-active);
+      --button-border-color: var(--color-border-warning-outline);
+      --button-border-color-hover: var(--color-border-warning-outline-hover);
+      --button-text-color: var(--color-text-warning-outline);
+      --button-text-color-hover: var(--color-text-warning-outline-hover);
+      --button-ring-color: var(--color-ring-warning-outline);
+    }
+
+    ._Button_1864l_1[data-variant="outline"]:where([data-color="caution"]) {
+      --button-background-color-hover: var(--color-background-caution-outline-hover);
+      --button-background-color-active: var(--color-background-caution-outline-active);
+      --button-border-color: var(--color-border-caution-outline);
+      --button-border-color-hover: var(--color-border-caution-outline-hover);
+      --button-text-color: var(--color-text-caution-outline);
+      --button-text-color-hover: var(--color-text-caution-outline-hover);
+      --button-ring-color: var(--color-ring-caution-outline);
+    }
+
+    ._Button_1864l_1[data-variant="outline"]:where([data-color="info"]) {
+      --button-background-color-hover: var(--color-background-info-outline-hover);
+      --button-background-color-active: var(--color-background-info-outline-active);
+      --button-border-color: var(--color-border-info-outline);
+      --button-border-color-hover: var(--color-border-info-outline-hover);
+      --button-text-color: var(--color-text-info-outline);
+      --button-text-color-hover: var(--color-text-info-outline-hover);
+      --button-ring-color: var(--color-ring-info-outline);
+    }
+
+    ._Button_1864l_1[data-variant="outline"]:where([data-color="discovery"]) {
+      --button-background-color-hover: var(--color-background-discovery-outline-hover);
+      --button-background-color-active: var(--color-background-discovery-outline-active);
+      --button-border-color: var(--color-border-discovery-outline);
+      --button-border-color-hover: var(--color-border-discovery-outline-hover);
+      --button-text-color: var(--color-text-discovery-outline);
+      --button-text-color-hover: var(--color-text-discovery-outline-hover);
+      --button-ring-color: var(--color-ring-discovery-outline);
+    }
+  /* Non-visual disablement, akin to `inert` */
+  ._Button_1864l_1[disabled] {
+    pointer-events: none;
+  }
+
+  /* Visual disablement */
+  ._Button_1864l_1[data-disabled][data-variant] {
+    --button-background-color: var(--color-background-disabled);
+    --button-border-color: var(--color-border-disabled);
+    --button-text-color: var(--color-text-disabled);
+
+    cursor: not-allowed;
+    pointer-events: auto;
+  }
+
+    /* Don't press while disabled */
+    ._Button_1864l_1[data-disabled][data-variant]:active::before {
+      transform: scale(1);
+    }
+
+    /* Relaxed disabled tone: keep disabled visuals, soften cursor */
+    ._Button_1864l_1[data-disabled][data-variant][data-disabled-tone="relaxed"] {
+      cursor: default;
+    }._ButtonInner_1864l_4 {
+  position: relative;
+  display: flex;
+  /* Allows overrides through className on .Button */
+  flex-direction: inherit;
+  align-items: center;
+  justify-content: center;
+  /* Allows overrides through className on .Button */
+  gap: inherit;
+  width: 100%;
+  /* Prevent padding-bottom from creating excess height (flexbox) */
+  height: 100%;
+  transition: opacity 0.15s ease 0.1s;
+}
+
+  [data-loading] ._ButtonInner_1864l_4 {
+    opacity: 0;
+    transition: opacity 0.3s ease;
+  }._ButtonLoader_1864l_749 {
+  position: absolute;
+  inset: 0;
+  z-index: 3;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+
+  ._ButtonLoader_1864l_749[data-entering] {
+    opacity: 0;
+  }
+
+  ._ButtonLoader_1864l_749[data-exiting] {
+    opacity: 1;
+  }
+
+  ._ButtonLoader_1864l_749[data-entering-active],
+  ._ButtonLoader_1864l_749[data-entering][data-interrupted] {
+    opacity: 1;
+    transition: opacity 0.15s ease 0.1s;
+  }
+
+  ._ButtonLoader_1864l_749[data-exiting-active],
+  ._ButtonLoader_1864l_749[data-exiting][data-interrupted] {
+    opacity: 0;
+    transition: opacity 0.15s ease;
+  }/* .Kbd {
+  display: none;
+
+  @mixin breakpoint md {
+    display: block;
+    padding: 1px 3px;
+    border: 1px solid var(--kbd-border-color, transparent);
+    border-radius: 4px;
+    margin: 0 -2px 0 4px;
+    background: var(--kbd-bg, var(--alpha-10));
+    color: var(--kbd-color, inherit);
+    font-family:
+      system-ui,
+      -apple-system,
+      BlinkMacSystemFont,
+      "Segoe UI",
+      Roboto,
+      Oxygen,
+      Ubuntu,
+      Cantarell,
+      "Open Sans",
+      "Helvetica Neue",
+      sans-serif;
+    font-size: 13px;
+    font-style: normal;
+    font-weight: 600;
+    letter-spacing: var(--tracking-wide);
+    transition:
+      border-color 0.15s ease,
+      background-color 0.15s ease,
+      color 0.15s ease;
+
+    [data-size="2xs"] & {
+      margin-right: 0;
+      margin-left: 3px;
+      font-size: 12px;
+    }
+
+    [data-size="xs"] & {
+      font-size: 12px;
+    }
+
+    [data-size="sm"] & {
+      margin-right: -1px;
+    }
+
+    [data-size="xl"] & {
+      padding: 2px 3px;
+      font-size: 14px;
+    }
+
+    [data-pill] & {
+      border-radius: 8px;
+      margin-right: -5px;
+    }
+
+    [data-size="2xs"][data-pill] & {
+      margin-right: -4px;
+    }
+  }
+} */
+}
+@layer components {._SelectControl_1tyi7_1 {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--select-control-gap);
+  flex-shrink: 0;
+  height: var(--select-control-size);
+  padding: 0 var(--select-control-gutter);
+  border-radius: var(--select-control-radius);
+  cursor: pointer;
+  font-size: var(--select-control-font-size);
+  font-weight: var(--select-control-font-weight);
+  line-height: var(--font-text-md-line-height);
+  text-align: left;
+  transition-duration: var(--transition-duration-basic);
+  transition-property: color;
+  transition-timing-function: var(--transition-ease-basic);
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  white-space: nowrap;
+}
+
+  ._SelectControl_1tyi7_1:where([data-optically-align="start"]) {
+    margin-inline-start: calc(var(--select-control-gutter) * -1);
+  }
+
+  ._SelectControl_1tyi7_1:where([data-optically-align="end"]) {
+    margin-inline-end: calc(var(--select-control-gutter) * -1);
+  }
+
+  /* Background / shape of the button */
+  ._SelectControl_1tyi7_1::before {
+    position: absolute;
+    inset: 0;
+    display: block;
+    border-radius: inherit;
+    content: "";
+    transition-duration: var(--transition-duration-basic);
+    transition-property: opacity, background-color, transform, box-shadow, border-color;
+    transition-timing-function: var(--transition-ease-basic);
+    /* Composite layer seems required in some cases to avoid visual artifacts. */
+    will-change: transform;
+  }
+
+  /* Focus ring */
+  ._SelectControl_1tyi7_1::after {
+    position: absolute;
+    inset: 0;
+    display: block;
+    border-radius: inherit;
+    content: "";
+    pointer-events: none;
+    transition-duration: var(--transition-duration-basic);
+    transition-property: transform;
+    transition-timing-function: var(--transition-ease-basic);
+    /* Composite layer seems required in some cases to avoid visual artifacts. */
+    will-change: transform;
+  }
+
+  ._SelectControl_1tyi7_1:focus {
+    outline: none;
+  }
+    ._SelectControl_1tyi7_1:focus-visible::after {
+      outline: 2px solid var(--button-ring-color, var(--color-ring));
+      outline-offset: var(--select-control-ring-offset, 2px);
+    }
+
+  /* =============================================
+    Sizes
+  ============================================= */
+  ._SelectControl_1tyi7_1:where([data-size="3xs"]) {
+    --select-control-size: var(--control-size-3xs);
+    --select-control-gutter: var(--control-gutter-2xs);
+    --select-control-font-size: var(--control-font-size-sm);
+    --select-control-gap: 4px;
+    --select-control-radius: var(--control-radius-sm);
+    --start-icon-size: var(--control-icon-size-xs);
+    --start-icon-offset: 0;
+    --start-icon-pill-offset: 0;
+    --clear-size: 14px;
+    --clear-icon-size: 13px;
+    --clear-iso-size: 12px;
+    --clear-iso-icon-size: 10px;
+    --clear-iso-offset: -1px;
+    --clear-iso-pill-offset: -2px;
+    --dropdown-icon-offset: 0;
+    --dropdown-icon-pill-offset: 0;
+    --dropdown-icon-width: 6px;
+    --dropdown-icon-height: 9px;
+    --dropdown-chevron-icon-width: 8px;
+    --dropdown-chevron-icon-height: 5px;
+    --indicator-wrapper-gap: calc(var(--spacing) * 1);
+    --indicator-wrapper-gutter: 0;
+  }
+
+  ._SelectControl_1tyi7_1:where([data-size="2xs"]) {
+    --select-control-size: var(--control-size-2xs);
+    --select-control-gutter: var(--control-gutter-xs);
+    --select-control-font-size: var(--control-font-size-sm);
+    --select-control-gap: 6px;
+    --select-control-radius: var(--control-radius-sm);
+    --start-icon-size: var(--control-icon-size-sm);
+    --start-icon-offset: 0;
+    --start-icon-pill-offset: -1px;
+    --clear-size: 16px;
+    --clear-icon-size: 13px;
+    --clear-iso-size: 14px;
+    --clear-iso-icon-size: 12px;
+    --clear-iso-offset: -2px;
+    --clear-iso-pill-offset: -4px;
+    --dropdown-icon-offset: 0;
+    --dropdown-icon-pill-offset: 0;
+    --dropdown-icon-width: 6px;
+    --dropdown-icon-height: 9px;
+    --dropdown-chevron-icon-width: 8px;
+    --dropdown-chevron-icon-height: 5px;
+    --indicator-wrapper-gap: calc(var(--spacing) * 1);
+    --indicator-wrapper-gutter: 0;
+  }
+
+  ._SelectControl_1tyi7_1:where([data-size="xs"]) {
+    --select-control-size: var(--control-size-xs);
+    --select-control-gutter: var(--control-gutter-xs);
+    --select-control-font-size: var(--control-font-size-md);
+    --select-control-gap: 6px;
+    --select-control-radius: var(--control-radius-sm);
+    --start-icon-size: var(--control-icon-size-sm);
+    --start-icon-offset: -1px;
+    --start-icon-pill-offset: -1px;
+    --clear-size: 18px;
+    --clear-icon-size: 14px;
+    --clear-iso-size: 16px;
+    --clear-iso-icon-size: 12px;
+    --clear-iso-offset: -2px;
+    --clear-iso-pill-offset: -4px;
+    --dropdown-icon-offset: 0;
+    --dropdown-icon-pill-offset: 0;
+    --dropdown-icon-width: 7px;
+    --dropdown-icon-height: 11px;
+    --dropdown-chevron-icon-width: 9px;
+    --dropdown-chevron-icon-height: 5px;
+    --indicator-wrapper-gap: calc(var(--spacing) * 1);
+    --indicator-wrapper-gutter: 0;
+  }
+
+  ._SelectControl_1tyi7_1:where([data-size="sm"]) {
+    --select-control-size: var(--control-size-sm);
+    --select-control-gutter: var(--control-gutter-sm);
+    --select-control-font-size: var(--control-font-size-md);
+    --select-control-gap: 8px;
+    --select-control-radius: var(--control-radius-sm);
+    --start-icon-size: var(--control-icon-size-sm);
+    --start-icon-offset: -1px;
+    --start-icon-pill-offset: -2px;
+    --clear-size: 18px;
+    --clear-icon-size: 14px;
+    --clear-iso-size: 16px;
+    --clear-iso-icon-size: 12px;
+    --clear-iso-offset: -3px;
+    --clear-iso-pill-offset: -6px;
+    --dropdown-icon-offset: 0;
+    --dropdown-icon-pill-offset: -2px;
+    --dropdown-icon-width: 7px;
+    --dropdown-icon-height: 11px;
+    --dropdown-chevron-icon-width: 9px;
+    --dropdown-chevron-icon-height: 5px;
+    --indicator-wrapper-gap: calc(var(--spacing) * 1);
+    --indicator-wrapper-gutter: 0;
+  }
+
+  ._SelectControl_1tyi7_1:where([data-size="md"]) {
+    --select-control-size: var(--control-size-md);
+    --select-control-gutter: var(--control-gutter-md);
+    --select-control-font-size: var(--control-font-size-md);
+    --select-control-gap: 8px;
+    --select-control-radius: var(--control-radius-md);
+    --start-icon-size: var(--control-icon-size-md);
+    --start-icon-offset: -1px;
+    --start-icon-pill-offset: -4px;
+    --clear-size: 22px;
+    --clear-icon-size: 15px;
+    --clear-iso-size: 18px;
+    --clear-iso-icon-size: 14px;
+    --clear-iso-offset: -4px;
+    --clear-iso-pill-offset: -7px;
+    --dropdown-icon-offset: 0;
+    --dropdown-icon-pill-offset: -2px;
+    --dropdown-icon-width: 8px;
+    --dropdown-icon-height: 12px;
+    --dropdown-chevron-icon-width: 11px;
+    --dropdown-chevron-icon-height: 6px;
+    --indicator-wrapper-gap: calc(var(--spacing) * 1);
+    --indicator-wrapper-gutter: calc(var(--spacing) * 0);
+  }
+
+  ._SelectControl_1tyi7_1:where([data-size="lg"]) {
+    --select-control-size: var(--control-size-lg);
+    --select-control-gutter: var(--control-gutter-md);
+    --select-control-font-size: var(--control-font-size-md);
+    --select-control-gap: 8px;
+    --select-control-radius: var(--control-radius-md);
+    --start-icon-size: var(--control-icon-size-md);
+    --start-icon-offset: -2px;
+    --start-icon-pill-offset: -4px;
+    --clear-size: 22px;
+    --clear-icon-size: 15px;
+    --clear-iso-size: 18px;
+    --clear-iso-icon-size: 14px;
+    --clear-iso-offset: -2px;
+    --clear-iso-pill-offset: -6px;
+    --dropdown-icon-offset: 0;
+    --dropdown-icon-pill-offset: -2px;
+    --dropdown-icon-width: 8px;
+    --dropdown-icon-height: 12px;
+    --dropdown-chevron-icon-width: 11px;
+    --dropdown-chevron-icon-height: 6px;
+    --indicator-wrapper-gap: calc(var(--spacing) * 1.5);
+    --indicator-wrapper-gutter: calc(var(--spacing) * 0);
+  }
+
+  ._SelectControl_1tyi7_1:where([data-size="xl"]) {
+    --select-control-size: var(--control-size-xl);
+    --select-control-gutter: var(--control-gutter-lg);
+    --select-control-font-size: var(--control-font-size-md);
+    --select-control-gap: 8px;
+    --select-control-radius: var(--control-radius-lg);
+    --start-icon-size: var(--control-icon-size-md);
+    --start-icon-offset: -2px;
+    --start-icon-pill-offset: -4px;
+    --clear-size: 24px;
+    --clear-icon-size: 16px;
+    --clear-iso-size: 18px;
+    --clear-iso-icon-size: 14px;
+    --clear-iso-offset: -2px;
+    --clear-iso-pill-offset: -7px;
+    --dropdown-icon-offset: 0;
+    --dropdown-icon-pill-offset: -2px;
+    --dropdown-icon-width: 8px;
+    --dropdown-icon-height: 12px;
+    --dropdown-chevron-icon-width: 11px;
+    --dropdown-chevron-icon-height: 6px;
+    --indicator-wrapper-gap: calc(var(--spacing) * 1);
+    --indicator-wrapper-gutter: calc(var(--spacing) * 0.5);
+  }
+
+  ._SelectControl_1tyi7_1:where([data-size="2xl"]) {
+    --select-control-size: var(--control-size-2xl);
+    --select-control-gutter: var(--control-gutter-lg);
+    --select-control-font-size: var(--control-font-size-lg);
+    --select-control-gap: 10px;
+    --select-control-radius: var(--control-radius-xl);
+    --start-icon-size: var(--control-icon-size-lg);
+    --start-icon-offset: -2px;
+    --start-icon-pill-offset: -4px;
+    --clear-size: 24px;
+    --clear-icon-size: 16px;
+    --clear-iso-size: 20px;
+    --clear-iso-icon-size: 15px;
+    --clear-iso-offset: -2px;
+    --clear-iso-pill-offset: -7px;
+    --dropdown-icon-offset: 0;
+    --dropdown-icon-pill-offset: -2px;
+    --dropdown-icon-width: 8px;
+    --dropdown-icon-height: 12px;
+    --dropdown-chevron-icon-width: 11px;
+    --dropdown-chevron-icon-height: 6px;
+    --indicator-wrapper-gap: calc(var(--spacing) * 1.5);
+    --indicator-wrapper-gutter: calc(var(--spacing) * 1);
+  }
+
+  ._SelectControl_1tyi7_1:where([data-size="3xl"]) {
+    --select-control-size: var(--control-size-3xl);
+    --select-control-gutter: var(--control-gutter-xl);
+    --select-control-font-size: var(--control-font-size-lg);
+    --select-control-gap: 10px;
+    --select-control-radius: var(--control-radius-xl);
+    --start-icon-size: var(--control-icon-size-lg);
+    --start-icon-offset: -2px;
+    --start-icon-pill-offset: -4px;
+    --clear-size: 24px;
+    --clear-icon-size: 16px;
+    --clear-iso-size: 20px;
+    --clear-iso-icon-size: 15px;
+    --clear-iso-offset: -2px;
+    --clear-iso-pill-offset: -7px;
+    --dropdown-icon-offset: 0;
+    --dropdown-icon-pill-offset: -3px;
+    --dropdown-icon-width: 9px;
+    --dropdown-icon-height: 13px;
+    --dropdown-chevron-icon-width: 12px;
+    --dropdown-chevron-icon-height: 7px;
+    --indicator-wrapper-gap: calc(var(--spacing) * 1.5);
+    --indicator-wrapper-gutter: calc(var(--spacing) * 1);
+  }
+
+  /* =============================================
+    Pill
+  ============================================= */
+  ._SelectControl_1tyi7_1:where([data-pill]) {
+    --select-control-radius: var(--radius-full);
+
+    padding: 0 calc(var(--select-control-gutter) * var(--control-gutter-pill-scaling));
+  }
+
+  /* =============================================
+    Block
+  ============================================= */
+  ._SelectControl_1tyi7_1:where([data-block]) {
+    width: 100%;
+  }
+
+  /* =============================================
+    Ghost variant
+  ============================================= */
+  ._SelectControl_1tyi7_1[data-variant="ghost"] {
+    --select-control-background-color: var(--color-background-primary-ghost-hover);
+    --select-control-ring-offset: -1px;
+  }
+
+    ._SelectControl_1tyi7_1[data-variant="ghost"]::before {
+      background-color: var(--select-control-background-color);
+      opacity: 0;
+      transform: scale(var(--scale));
+    }
+      ._SelectControl_1tyi7_1[data-variant="ghost"][aria-expanded="true"]::before, ._SelectControl_1tyi7_1[data-variant="ghost"][data-state="open"]::before {
+        opacity: 0.6;
+        transform: scale(1);
+      }
+      @media (hover: hover) and (pointer: fine) {
+        ._SelectControl_1tyi7_1[data-variant="ghost"]:where(:not([data-disabled])):hover::before {
+          opacity: 1;
+          transform: scale(1);
+        }
+}
+          ._SelectControl_1tyi7_1[data-variant="ghost"]:where(:not([data-disabled])):not(:has(button:active)):active::before {
+            --select-control-background-color: var(--color-background-primary-ghost-active);
+
+            opacity: 1;
+            transform: scale(var(--scale));
+          }
+
+          ._SelectControl_1tyi7_1[data-variant="ghost"]:where(:not([data-disabled])):not(:has(button:active)):active::after {
+            transform: scale(var(--scale));
+          }
+        ._SelectControl_1tyi7_1[data-variant="ghost"]:where(:not([data-disabled]))[data-invalid]::before {
+          --select-control-background-color: transparent;
+
+          box-shadow: 0 0 0 1px var(--input-border-color-invalid) inset;
+          opacity: 1;
+          transform: scale(1);
+        }
+
+        @media (hover: hover) and (pointer: fine) {
+          ._SelectControl_1tyi7_1[data-variant="ghost"]:where(:not([data-disabled]))[data-invalid]:hover::before {
+            --select-control-background-color: var(--color-background-primary-ghost-hover);
+          }
+}
+
+  /* =============================================
+    Soft variant
+  ============================================= */
+  ._SelectControl_1tyi7_1[data-variant="soft"] {
+    --select-control-background-color: var(--color-background-primary-soft-alpha);
+  }
+
+    ._SelectControl_1tyi7_1[data-variant="soft"]::before {
+      background-color: var(--select-control-background-color);
+    }
+      ._SelectControl_1tyi7_1[data-variant="soft"][aria-expanded="true"]::before, ._SelectControl_1tyi7_1[data-variant="soft"][data-state="open"]::before {
+        --select-control-background-color: var(--color-background-primary-soft-alpha-hover);
+      }
+      @media (hover: hover) and (pointer: fine) {
+        ._SelectControl_1tyi7_1[data-variant="soft"]:where(:not([data-disabled])):hover::before {
+          --select-control-background-color: var(--color-background-primary-soft-alpha-hover);
+        }
+}
+          ._SelectControl_1tyi7_1[data-variant="soft"]:where(:not([data-disabled])):not(:has(button:active)):active::before {
+            --select-control-background-color: var(--color-background-primary-soft-alpha-active);
+          }
+
+          ._SelectControl_1tyi7_1[data-variant="soft"]:where(:not([data-disabled])):not(:has(button:active)):active::before,
+          ._SelectControl_1tyi7_1[data-variant="soft"]:where(:not([data-disabled])):not(:has(button:active)):active::after {
+            transform: scale(var(--scale));
+          }
+
+      ._SelectControl_1tyi7_1[data-variant="soft"]:where(:not([data-disabled]))[data-invalid]::before {
+        box-shadow: 0 0 0 1px var(--input-border-color-invalid) inset;
+      }
+
+  /* =============================================
+    Outline variant
+  ============================================= */
+  ._SelectControl_1tyi7_1[data-variant="outline"] {
+    --select-control-border-color: var(--input-outline-border-color);
+    --select-control-ring-offset: -1px;
+  }
+
+    ._SelectControl_1tyi7_1[data-variant="outline"]::before {
+      background-color: transparent;
+      box-shadow: 0 0 0 1px var(--select-control-border-color) inset;
+    }
+
+    ._SelectControl_1tyi7_1[data-variant="outline"][aria-expanded="true"],
+    ._SelectControl_1tyi7_1[data-variant="outline"][data-state="open"] {
+      --select-control-border-color: var(--input-outline-border-color-hover);
+    }
+      @media (hover: hover) and (pointer: fine) {._SelectControl_1tyi7_1[data-variant="outline"]:where(:not([data-disabled])):hover {
+        --select-control-border-color: var(--input-outline-border-color-hover);
+}
+}
+          ._SelectControl_1tyi7_1[data-variant="outline"]:where(:not([data-disabled])):not(:has(button:active)):active::before {
+            transform: scale(var(--scale));
+          }
+
+          ._SelectControl_1tyi7_1[data-variant="outline"]:where(:not([data-disabled])):not(:has(button:active)):active::after {
+            transform: scale(var(--scale));
+          }
+
+      ._SelectControl_1tyi7_1[data-variant="outline"]:where(:not([data-disabled]))[data-invalid]::before {
+        --select-control-border-color: var(--input-border-color-invalid);
+      }
+
+  /* =============================================
+    Invalid
+  ============================================= */
+  ._SelectControl_1tyi7_1:where([data-invalid]) {
+    --button-ring-color: var(--color-ring-danger);
+  }
+
+  /* =============================================
+    Hover
+  ============================================= */
+    @media (hover: hover) and (pointer: fine) {
+      ._SelectControl_1tyi7_1:not([data-disabled]):hover ._Clear_1tyi7_436,
+      ._SelectControl_1tyi7_1:not([data-disabled]):hover ._DropdownIcon_1tyi7_437 {
+        opacity: 1;
+      }
+}
+
+  /* =============================================
+    Placeholder (e.g., "not `selected`")
+  ============================================= */
+  ._SelectControl_1tyi7_1[data-selected="false"] {
+    color: var(--input-placeholder-text-color);
+  }
+
+  /* =============================================
+    Disabled
+  ============================================= */
+  ._SelectControl_1tyi7_1[data-disabled][data-variant] {
+    /* Matches disabled styling of Buttons, which is nice. */
+    --select-control-background-color: var(--color-background-disabled);
+    --select-control-border-color: var(--color-border-disabled);
+
+    color: var(--color-text-disabled);
+    cursor: not-allowed;
+  }
+
+    ._SelectControl_1tyi7_1[data-disabled][data-variant] ._DropdownIcon_1tyi7_437 {
+      color: var(--color-text-disabled);
+    }
+
+    /* Don't press while disabled */
+    ._SelectControl_1tyi7_1[data-disabled][data-variant]:active::before {
+      transform: scale(1);
+    }._TriggerText_1tyi7_468 {
+  position: relative;
+  overflow: hidden;
+  flex: 1;
+  max-width: 100%;
+  color: inherit;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}._IndicatorWrapper_1tyi7_476 {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--indicator-wrapper-gap);
+  padding-left: var(--indicator-wrapper-gutter);
+}._StartIcon_1tyi7_482 {
+  position: relative;
+  width: var(--start-icon-size);
+  height: var(--start-icon-size);
+  margin-left: var(--start-icon-offset);
+}
+
+  :where(._SelectControl_1tyi7_1[data-pill]) ._StartIcon_1tyi7_482 {
+    margin-left: var(--start-icon-pill-offset);
+  }._Clear_1tyi7_436 {
+  --button-size: var(--clear-size);
+  --button-icon-size: var(--clear-icon-size);
+
+  position: relative;
+  opacity: 0.75;
+}
+
+  ._Clear_1tyi7_436[data-variant="solid"] {
+    --button-size: var(--clear-iso-size);
+    --button-icon-size: var(--clear-iso-icon-size);
+  }
+
+  [data-state="open"] ._Clear_1tyi7_436,
+  ._Clear_1tyi7_436:focus-visible {
+    opacity: 1;
+  }
+
+  ._Clear_1tyi7_436[data-only-child] {
+    margin-right: var(--clear-iso-offset);
+  }
+
+    :where(._SelectControl_1tyi7_1[data-pill]) ._Clear_1tyi7_436[data-only-child] {
+      margin-right: var(--clear-iso-pill-offset);
+    }._DropdownIcon_1tyi7_437 {
+  position: relative;
+  width: var(--dropdown-icon-width, 8px);
+  height: var(--dropdown-icon-height, 12px);
+  margin-right: var(--dropdown-icon-offset);
+  color: var(--color-text-secondary);
+  opacity: 0.75;
+  transition-duration: var(--transition-duration-basic);
+  transition-property: opacity;
+  transition-timing-function: var(--transition-ease-basic);
+  will-change: opacity;
+}
+
+  :where(._SelectControl_1tyi7_1[data-pill]) ._DropdownIcon_1tyi7_437 {
+    margin-right: var(--dropdown-icon-pill-offset);
+  }
+
+  [data-state="open"] ._DropdownIcon_1tyi7_437 {
+    opacity: 1;
+  }._DropdownIconChevron_1tyi7_534 {
+  width: var(--dropdown-chevron-icon-width, 11px);
+  height: var(--dropdown-chevron-icon-height, 6px);
+}/* Shares margin offset with dropdown indicator */._LoadingIndicator_1tyi7_537 {
+  margin-right: var(--dropdown-icon-offset);
+}
+
+  :where(._SelectControl_1tyi7_1[data-pill]) ._LoadingIndicator_1tyi7_537 {
+    margin-right: var(--dropdown-icon-pill-offset);
+  }
+}
+@layer components {._Tooltip_16g2y_1 {
+  max-width: 300px;
+  border-radius: var(--radius-md);
+  /* animation-duration: 0.3s; */
+  /* animation-name: scale-in; */
+  /* animation-timing-function: var(--cubic-enter); */
+  background: var(--color-surface-elevated);
+  box-shadow: var(--shadow), var(--shadow-hairline);
+  font-size: 14px;
+  line-height: 1.45;
+  /* transform-origin: var(--radix-tooltip-content-transform-origin); */
+  /* transition: background-color 0.15s ease; */
+
+  /* &[data-state="closed"] {
+    animation: scale-out 0.2s var(--cubic-exit);
+  } */
+}
+
+  /*
+   * Default cursor is slightly more pleasing than text cursor,
+   * if a tooltip transitions between clickable -> non-clickable (e.g., CopyTooltip)
+   */
+  ._Tooltip_16g2y_1[data-clickable="false"] {
+    cursor: default;
+  }
+
+  ._Tooltip_16g2y_1[data-clickable="true"] {
+    cursor: pointer;
+  }
+    @media (hover: hover) and (pointer: fine) {._Tooltip_16g2y_1[data-compact="true"][data-clickable="true"]:hover {
+      background: var(--gray-600);
+      color: var(--gray-0);
+}
+}
+
+  ._Tooltip_16g2y_1[data-gutter-size="sm"] {
+    padding: 8px 12px;
+  }
+
+  ._Tooltip_16g2y_1[data-gutter-size="md"] {
+    padding: 12px 16px;
+  }
+
+  ._Tooltip_16g2y_1[data-gutter-size="lg"] {
+    padding: 14px 18px;
+  }
+
+  ._Tooltip_16g2y_1[data-compact="true"] {
+    padding: 2px 8px;
+    background: var(--gray-700);
+    color: var(--gray-0);
+    font-size: 14px;
+  }@keyframes _scale-in_16g2y_1 {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}@keyframes _scale-out_16g2y_1 {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  to {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+}._TriggerDecorator_16g2y_73 {
+  display: inline-flex;
+  cursor: pointer;
+  -webkit-text-decoration: underline dotted;
+          text-decoration: underline dotted;
+  text-decoration-color: transparent;
+  /* transition: text-decoration 0.2s var(--cubic-exit); */
+}
+
+  ._TriggerDecorator_16g2y_73:focus {
+    outline: 0;
+  }
+
+  ._TriggerDecorator_16g2y_73[data-state*="open"] {
+    text-decoration-color: var(--color-text-tertiary);
+    transition-timing-function: var(--cubic-enter);
+  }
+}
+@layer components {/* =============================================
+  Custom Select
+============================================= */._Menu_n4tw6_3 {
+  /* Top-level selector needs to exist */
+}._MenuList_n4tw6_5 {
+  /* Default to the width of the trigger */
+  width: var(--select-list-width, var(--radix-popover-trigger-width));
+  min-width: var(--select-list-min-width, 300px);
+  max-width: var(--select-list-max-width, none);
+  border-radius: var(--menu-radius);
+  background: var(--color-surface-elevated);
+  box-shadow: var(--shadow), var(--shadow-hairline);
+  font-size: var(--menu-font-size);
+  line-height: var(--menu-line-height);
+  /* The transform-origin computed from the content and arrow positions/offsets */
+  transform-origin: var(--radix-popover-content-transform-origin);
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  will-change: opacity, transform;
+}
+
+  /* Animation states applied to a wrapping parent */
+  ._Menu_n4tw6_3[data-entering] ._MenuList_n4tw6_5 {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+
+  ._Menu_n4tw6_3[data-entering-active] ._MenuList_n4tw6_5,
+  ._Menu_n4tw6_3[data-entering][data-interrupted] ._MenuList_n4tw6_5 {
+    opacity: 1;
+    transform: scale(1);
+    transition-duration: 0.35s;
+    transition-property: opacity, transform;
+    transition-timing-function: var(--cubic-enter);
+  }
+
+  ._Menu_n4tw6_3[data-exiting] ._MenuList_n4tw6_5 {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  ._Menu_n4tw6_3[data-exiting-active] ._MenuList_n4tw6_5,
+  ._Menu_n4tw6_3[data-exiting][data-interrupted] ._MenuList_n4tw6_5 {
+    opacity: 0;
+    transform: scale(0.95);
+    transition-duration: 0.2s;
+    transition-property: opacity, transform;
+    transition-timing-function: var(--cubic-exit);
+  }._MenuInner_n4tw6_50 {
+  display: flex;
+  flex-direction: column;
+  /* The remaining height between the trigger and the boundary edge */
+  max-height: min(
+    var(--select-list-max-height, 400px),
+    var(--radix-popover-content-available-height)
+  );
+}
+
+  ._MenuInner_n4tw6_50:focus {
+    outline: 0;
+  }/* =============================================
+  Options
+============================================= */._OptionsList_n4tw6_64 {
+  overflow: auto;
+  flex: 1;
+  padding: var(--menu-gutter);
+}._Option_n4tw6_64 {
+  position: relative;
+  padding: var(--menu-item-padding);
+  cursor: pointer;
+  overflow-wrap: anywhere;
+  /* When keyboard navigation snaps item into scrollable view, ensure 20px of spacing to show additional items below */
+  scroll-margin: 15px 0;
+}
+
+  ._Option_n4tw6_64::before {
+    position: absolute;
+    inset: 0;
+    display: block;
+    border-radius: calc(var(--menu-radius) - var(--menu-gutter));
+    background: var(--menu-item-background-color);
+    content: "";
+    opacity: 0;
+    transform: scale(var(--scale, 0.98));
+    transition-duration: var(--transition-duration-basic);
+    transition-property: opacity, background-color, transform;
+    transition-timing-function: var(--cubic-enter);
+    will-change: opacity, transform;
+  }
+
+  ._Option_n4tw6_64[data-selected] {
+    font-weight: var(--font-weight-semibold);
+  }
+    ._Option_n4tw6_64[data-highlight]::before {
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    ._Option_n4tw6_64[data-highlight]:active::before {
+      transform: scale(var(--scale, 0.98));
+    }
+
+  ._Option_n4tw6_64[data-disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+    ._Option_n4tw6_64[data-disabled]::before {
+      display: none;
+    }._PressableInner_n4tw6_111 {
+  position: relative;
+}._OptionInner_n4tw6_113 {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: calc(var(--spacing) * 1);
+}._OptionCheck_n4tw6_118 {
+  display: block;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+}._OptionIndicatorSlot_n4tw6_123 {
+  flex-grow: 0;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+}._OptionGroupHeading_n4tw6_128 {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: calc(var(--spacing) * 1);
+  padding: var(--menu-item-padding);
+  margin-top: calc(var(--spacing) * 1.5);
+  color: var(--color-text-secondary);
+}
+
+  ._OptionGroupHeading_n4tw6_128:first-child {
+    margin-top: 0;
+  }._OptionHardLimitHeading_n4tw6_140 {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: calc(var(--spacing) * 1);
+  padding: var(--menu-item-padding);
+  color: var(--color-text-secondary);
+}._OptionsLimit_n4tw6_147 {
+  color: var(--link-primary-text-color);
+  font-weight: var(--font-weight-medium);
+}/* =============================================
+  Action
+============================================= */._Action_n4tw6_152 {
+  position: relative;
+  padding: var(--menu-item-padding);
+  border-radius: calc(var(--menu-radius) - var(--menu-gutter));
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+}
+
+  /* Background shape */
+  ._Action_n4tw6_152::before {
+    position: absolute;
+    inset: 0;
+    display: block;
+    border-radius: calc(var(--menu-radius) - var(--menu-gutter));
+    content: "";
+    opacity: 0;
+    transform: scale(var(--scale, 0.98));
+    transition-duration: 0.15s;
+    transition-property: opacity, background-color, transform;
+    transition-timing-function: var(--cubic-enter);
+    will-change: opacity, transform;
+  }
+  ._Action_n4tw6_152::before, :where([data-theme="light"]) ._Action_n4tw6_152::before {
+background: var(--gray-100);
+}
+  :where([data-theme="dark"]) ._Action_n4tw6_152::before {
+background: var(--gray-25);
+}
+
+  /* Focus ring */
+  ._Action_n4tw6_152::after {
+    position: absolute;
+    inset: 0;
+    display: block;
+    border-radius: calc(var(--menu-radius) - var(--menu-gutter));
+    content: "";
+    pointer-events: none;
+    transition-duration: 0.15s;
+    transition-property: box-shadow, transform;
+    transition-timing-function: var(--cubic-enter);
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    ._Action_n4tw6_152:hover::before {
+      opacity: 1;
+      transform: scale(1);
+    }
+}
+
+  ._Action_n4tw6_152:focus {
+    outline: none;
+  }
+
+  ._Action_n4tw6_152:focus-visible::after {
+    box-shadow: 0 0 0 2px var(--color-ring);
+  }
+
+  ._Action_n4tw6_152:active::before,
+  ._Action_n4tw6_152:active::after {
+    transform: scale(var(--scale, 0.98));
+  }
+
+  ._Action_n4tw6_152 svg {
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+  }._ActionInner_n4tw6_218 {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--menu-item-gap);
+}._ActionsContainer_n4tw6_224 {
+  position: relative;
+  padding: var(--menu-gutter);
+  border-top: 1px solid var(--menu-separator-background-color);
+}
+
+  ._ActionsContainer_n4tw6_224::before {
+    position: absolute;
+    bottom: 100%;
+    left: 0;
+    width: 100%;
+    height: 9px;
+    margin-bottom: 1px;
+    background: var(--color-surface-elevated);
+    content: "";
+    -webkit-mask-image: linear-gradient(180deg, rgb(0 0 0 / 0%), rgb(0 0 0 / 100%));
+            mask-image: linear-gradient(180deg, rgb(0 0 0 / 0%), rgb(0 0 0 / 100%));
+    pointer-events: none;
+  }/* =============================================
+  Search
+============================================= */._Search_n4tw6_244 {
+  position: relative;
+  padding: var(--menu-gutter) var(--menu-gutter) 0;
+}._SearchEmpty_n4tw6_247 {
+  padding: var(--menu-gutter);
+  margin: calc(var(--spacing) * 4) 0;
+}
+
+  ._SearchEmpty_n4tw6_247[data-text-only] {
+    color: var(--color-text-secondary);
+    text-align: center;
+  }
+}
+@layer components {._Container_1tuad_1 {
+  position: relative;
+  display: flex;
+}
+
+  ._Container_1tuad_1[data-has-label] {
+    align-items: flex-start;
+  }
+
+  ._Container_1tuad_1[data-orientation="right"] {
+    flex-direction: row-reverse;
+  }
+
+  /* Radix pushes the inputs off screen in a weird way that
+    messes with error overlays */
+  ._Container_1tuad_1 > input {
+    right: 0;
+    bottom: 0;
+    left: 0;
+    height: 1px !important;
+    transform: none !important;
+  }._Checkbox_1tuad_22 {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 18px;
+  max-width: 18px;
+  height: 18px;
+  padding: 0;
+  border-radius: var(--radius-xs);
+  background-color: transparent;
+  cursor: pointer;
+  transition:
+    border-color 150ms ease,
+    background-color 150ms ease;
+}._Checkbox_1tuad_22, :where([data-theme="light"]) ._Checkbox_1tuad_22 {
+border: 1px solid var(--gray-200);
+}:where([data-theme="dark"]) ._Checkbox_1tuad_22 {
+border: 1px solid var(--gray-500);
+}
+
+  [data-has-label] ._Checkbox_1tuad_22 {
+    /* Adjust downward for label line-height - not using center to account for long labels than can wrap. */
+    top: 1px;
+  }
+    @media (hover: hover) and (pointer: fine) {._Checkbox_1tuad_22:where(:not([data-disabled], [data-state="checked"])):hover, :where([data-theme="light"]) ._Checkbox_1tuad_22:where(:not([data-disabled], [data-state="checked"])):hover {
+border-color: var(--gray-300);
+}:where([data-theme="dark"]) ._Checkbox_1tuad_22:where(:not([data-disabled], [data-state="checked"])):hover {
+border-color: var(--gray-600);
+}
+}
+
+  ._Checkbox_1tuad_22[data-state="indeterminate"],
+  ._Checkbox_1tuad_22[data-state="checked"] {
+    border-color: var(--gray-900);
+    background-color: var(--gray-900);
+  }
+
+  ._Checkbox_1tuad_22:focus {
+    outline: none;
+  }
+
+  ._Checkbox_1tuad_22:focus-visible {
+    outline: 2px solid var(--color-ring);
+    outline-offset: 2px;
+  }
+
+  ._Checkbox_1tuad_22[data-disabled] {
+    cursor: not-allowed;
+  }
+
+  ._Checkbox_1tuad_22[data-disabled], :where([data-theme="light"]) ._Checkbox_1tuad_22[data-disabled] {
+border-color: var(--gray-150);
+background: var(--gray-25);
+}
+
+  :where([data-theme="dark"]) ._Checkbox_1tuad_22[data-disabled] {
+border-color: var(--gray-300);
+background: var(--gray-200);
+}
+
+    ._Checkbox_1tuad_22[data-disabled][data-state="checked"], :where([data-theme="light"]) ._Checkbox_1tuad_22[data-disabled][data-state="checked"] {
+border-color: var(--gray-300);
+background-color: var(--gray-300);
+}
+
+    :where([data-theme="dark"]) ._Checkbox_1tuad_22[data-disabled][data-state="checked"] {
+border-color: var(--gray-200);
+background-color: var(--gray-200);
+}._CheckMark_1tuad_92 {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 64%;
+  height: 32%;
+  transform: rotate(-45deg) translate(-10%, 100%);
+  transform-origin: center;
+  transition:
+    opacity 150ms ease,
+    transform 150ms ease;
+}
+
+  @starting-style {._CheckMark_1tuad_92 {
+    opacity: 0
+}
+  }
+
+  [data-state="indeterminate"] ._CheckMark_1tuad_92 {
+    transform: translate(30%, 80%);
+  }
+
+    [data-state="indeterminate"] ._CheckMark_1tuad_92::before {
+      opacity: 0;
+    }
+
+  /* CheckMark arms */
+  ._CheckMark_1tuad_92::before,
+  ._CheckMark_1tuad_92::after {
+    position: absolute;
+    display: block;
+    background: var(--gray-0);
+    content: "";
+    will-change: transform;
+  }
+
+    @starting-style {
+  ._CheckMark_1tuad_92::before,
+  ._CheckMark_1tuad_92::after {
+      transform: scale(0)
+  }
+    }
+    /* pure black checkbox is not low enough contrast to look disabled */
+      :where([data-theme="dark"]) ._CheckMark_1tuad_92[data-disabled]::before,
+      :where([data-theme="dark"]) ._CheckMark_1tuad_92[data-disabled]::after {
+        background: var(--gray-100);
+      }
+
+  ._CheckMark_1tuad_92::before {
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 2px;
+    transform-origin: 0 0;
+    transition:
+      transform 100ms ease 80ms,
+      opacity 200ms ease;
+  }
+
+  ._CheckMark_1tuad_92 [data-state="indeterminate"]::before {
+    opacity: 0;
+  }
+
+  ._CheckMark_1tuad_92::after {
+    right: 0;
+    bottom: 0;
+    left: 0;
+    height: 2px;
+    transform-origin: 0 100%;
+    transition: transform 100ms ease 160ms;
+  }._Label_1tuad_162 {
+  display: flex;
+  align-items: center;
+  min-height: 20px;
+  cursor: pointer;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+  [data-disabled] ._Label_1tuad_162 {
+    cursor: not-allowed;
+  }
+
+  [data-orientation="left"] ._Label_1tuad_162 {
+    padding-left: 8px;
+  }
+
+  [data-orientation="right"] ._Label_1tuad_162 {
+    padding-right: 8px;
+  }
+}
+@layer components {._Container_13560_1 {
+  --textarea-line-height: 20px;
+  --textarea-font-weight: var(--font-weight-normal);
+  --textarea-color: var(--color-text);
+  --textarea-gutter-y: calc(0.5 * calc(var(--textarea-base-height) - var(--textarea-line-height)));
+  --textarea-min-height: calc(
+    (var(--textarea-gutter-y) * 2) + (var(--textarea-line-height) * var(--textarea-min-rows))
+  );
+  --textarea-max-height: calc(
+    (var(--textarea-gutter-y) * 2) + (var(--textarea-line-height) * var(--textarea-max-rows))
+  );
+}
+  /* ============================================ */
+  ._Container_13560_1:where([data-size="3xs"]) {
+    --textarea-base-height: var(--control-size-3xs);
+    --textarea-font-size: var(--control-font-size-sm);
+    --textarea-radius: var(--control-radius-sm);
+    --textarea-gutter-x: var(--control-gutter-xs);
+  }
+  /* Sizes */
+
+  ._Container_13560_1:where([data-size="2xs"]) {
+    --textarea-base-height: var(--control-size-2xs);
+    --textarea-font-size: var(--control-font-size-sm);
+    --textarea-radius: var(--control-radius-sm);
+    --textarea-gutter-x: var(--control-gutter-xs);
+  }
+
+  /* ============================================ */
+
+  ._Container_13560_1:where([data-size="xs"]) {
+    --textarea-base-height: var(--control-size-xs);
+    --textarea-font-size: var(--control-font-size-md);
+    --textarea-radius: var(--control-radius-sm);
+    --textarea-gutter-x: var(--control-gutter-xs);
+  }
+
+  ._Container_13560_1:where([data-size="sm"]) {
+    --textarea-base-height: var(--control-size-sm);
+    --textarea-font-size: var(--control-font-size-md);
+    --textarea-radius: var(--control-radius-md);
+    --textarea-gutter-x: var(--control-gutter-sm);
+  }
+
+  /* ("md" is applied by default, set above) */
+  ._Container_13560_1:where([data-size="md"]) {
+    --textarea-base-height: var(--control-size-md);
+    --textarea-font-size: var(--control-font-size-md);
+    --textarea-radius: var(--control-radius-md);
+    --textarea-gutter-x: var(--control-gutter-md);
+  }
+
+  ._Container_13560_1:where([data-size="lg"]) {
+    --textarea-base-height: var(--control-size-lg);
+    --textarea-font-size: var(--control-font-size-md);
+    --textarea-radius: var(--control-radius-md);
+    --textarea-gutter-x: var(--control-gutter-md);
+  }
+
+  ._Container_13560_1:where([data-size="xl"]) {
+    --textarea-base-height: var(--control-size-xl);
+    --textarea-font-size: var(--control-font-size-lg);
+    --textarea-radius: var(--control-radius-lg);
+    --textarea-gutter-x: var(--control-gutter-lg);
+  }
+
+  ._Container_13560_1:where([data-size="2xl"]) {
+    --textarea-base-height: var(--control-size-2xl);
+    --textarea-font-size: var(--control-font-size-lg);
+    --textarea-radius: var(--control-radius-xl);
+    --textarea-gutter-x: var(--control-gutter-xl);
+  }
+
+  ._Container_13560_1:where([data-size="3xl"]) {
+    --textarea-base-height: var(--control-size-3xl);
+    --textarea-font-size: var(--control-font-size-lg);
+    --textarea-radius: var(--control-radius-xl);
+    --textarea-gutter-x: var(--control-gutter-xl);
+  }
+  /* ============================================ */
+  ._Container_13560_1:where([data-gutter-size="2xs"]) {
+    --textarea-gutter-x: var(--control-gutter-2xs);
+  }
+  /* Gutter sizes */
+
+  ._Container_13560_1:where([data-gutter-size="xs"]) {
+    --textarea-gutter-x: var(--control-gutter-xs);
+  }
+
+  /* ============================================ */
+
+  ._Container_13560_1:where([data-gutter-size="sm"]) {
+    --textarea-gutter-x: var(--control-gutter-sm);
+  }
+
+  ._Container_13560_1:where([data-gutter-size="md"]) {
+    --textarea-gutter-x: var(--control-gutter-md);
+  }
+
+  ._Container_13560_1:where([data-gutter-size="lg"]) {
+    --textarea-gutter-x: var(--control-gutter-lg);
+  }
+
+  ._Container_13560_1:where([data-gutter-size="xl"]) {
+    --textarea-gutter-x: var(--control-gutter-xl);
+  }
+
+  ._Container_13560_1 {
+
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  width: 100%;
+  border-radius: var(--textarea-radius);
+  color: var(--textarea-color);
+  cursor: text;
+  font-size: var(--textarea-font-size);
+  font-weight: var(--textarea-font-weight);
+  transition-duration: var(--transition-duration-basic);
+  transition-property: color, box-shadow, background-color;
+  transition-timing-function: var(--transition-ease-basic);
+}
+
+  /* =============================================
+    Outline variant
+  ============================================= */
+  ._Container_13560_1:where([data-variant="outline"]) {
+    /* NOTE: Don't add box-model size here, as the <textarea> defines all height sizing */
+    box-shadow: 0 0 0 1px var(--input-outline-border-color) inset;
+  }
+      @media (hover: hover) and (pointer: fine) {._Container_13560_1:where([data-variant="outline"]):not([data-disabled]):hover {
+        box-shadow: 0 0 0 1px var(--input-outline-border-color-hover) inset;
+}
+}
+
+      ._Container_13560_1:where([data-variant="outline"]):not([data-disabled])[data-focused="true"] {
+        box-shadow: 0 0 0 1px var(--input-outline-border-color-focus) inset;
+      }
+
+      ._Container_13560_1:where([data-variant="outline"]):not([data-disabled])[data-invalid] {
+        box-shadow: 0 0 0 1px var(--input-border-color-invalid) inset;
+      }
+
+  /* =============================================
+    Soft variant
+  ============================================= */
+  ._Container_13560_1:where([data-variant="soft"]) {
+    background-color: var(--input-soft-background-color);
+  }
+      ._Container_13560_1:where([data-variant="soft"]):not([data-disabled])[data-focused="true"] {
+        box-shadow: 0 0 0 1px var(--input-soft-border-color-focus) inset;
+      }
+
+      ._Container_13560_1:where([data-variant="soft"]):not([data-disabled])[data-invalid] {
+        box-shadow: 0 0 0 1px var(--input-border-color-invalid) inset;
+      }
+
+  /* =============================================
+    Invalid
+  ============================================= */
+    ._Container_13560_1[data-invalid] ::-moz-selection {
+      background-color: var(--red-a50);
+    }
+    ._Container_13560_1[data-invalid] ::selection {
+      background-color: var(--red-a50);
+    }
+
+  /* =============================================
+    Disabled
+  ============================================= */
+  ._Container_13560_1[data-disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }._Textarea_13560_174 {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  min-height: var(--textarea-min-height);
+  max-height: var(--textarea-max-height);
+  padding: var(--textarea-gutter-y) var(--textarea-gutter-x);
+  border: 0;
+  border-radius: 0;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background: none;
+  box-shadow: none;
+  color: inherit;
+  /* Prevent Firefox autofill coloring (preview and confirmed modes) */
+  filter: none;
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: var(--textarea-line-height);
+  resize: none;
+}
+
+  ._Textarea_13560_174:focus {
+    outline: 0;
+  }
+
+  ._Textarea_13560_174:disabled {
+    cursor: not-allowed;
+  }
+
+  ._Textarea_13560_174::-moz-placeholder {
+    color: var(--input-placeholder-text-color);
+    /* Normalize placeholder coloring across browsers. Firefox specifically uses `opacity` instead of a different `color`. */
+    opacity: 1;
+  }
+
+  ._Textarea_13560_174::placeholder {
+    color: var(--input-placeholder-text-color);
+    /* Normalize placeholder coloring across browsers. Firefox specifically uses `opacity` instead of a different `color`. */
+    opacity: 1;
+  }
+
+  /* Applying an animation on autofill allows us to listen for the event in JS */
+  ._Textarea_13560_174:-webkit-autofill {
+    animation: _native-autofill-in_13560_1 1ms;
+  }
+
+  /* Prevent auto-fill coloring */
+  ._Textarea_13560_174:-webkit-autofill,
+  ._Textarea_13560_174:-webkit-autofill:focus,
+  ._Textarea_13560_174:-webkit-autofill:hover {
+    color: var(--color-text) !important;
+    -webkit-text-fill-color: var(--color-text) !important;
+    /* Prevent all color changes by delaying their effect for a very long time */
+    /* We cannot beat the specificity of user-agent stylesheet declarations, so we must delay them. */
+    -webkit-transition:
+      background-color 0s 50000s,
+      box-shadow 0s 50000s,
+      filter 0s 50000s !important;
+    transition:
+      background-color 0s 50000s,
+      box-shadow 0s 50000s,
+      filter 0s 50000s !important;
+  }
+  /* Identical to block above, but must keep separate for browsers to recognize their own selector */
+  ._Textarea_13560_174:-webkit-autofill-and-obscured,
+  ._Textarea_13560_174:-webkit-autofill-strong-password,
+  ._Textarea_13560_174:-webkit-autofill-strong-password-viewable {
+    color: var(--color-text) !important;
+    -webkit-text-fill-color: var(--color-text) !important;
+    -webkit-transition:
+      background-color 0s 50000s,
+      box-shadow 0s 50000s,
+      filter 0s 50000s !important;
+    transition:
+      background-color 0s 50000s,
+      box-shadow 0s 50000s,
+      filter 0s 50000s !important;
+  }
+  /* Prevent strange autofill size adjustments */
+  ._Textarea_13560_174:-webkit-autofill::first-line {
+    font-size: 16px !important;
+    -webkit-transition: font-size 0s 50000s !important;
+    transition: font-size 0s 50000s !important;
+  }
+
+  ._Textarea_13560_174::-webkit-resizer {
+    visibility: hidden;
+  }@keyframes _native-autofill-in_13560_1 {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+}
+@layer components {._SegmentedControl_1sl7d_1 {
+  --segmented-control-option-radius: calc(
+    var(--segmented-control-radius) - var(--segmented-control-gutter)
+  );
+
+  position: relative;
+  overflow: auto;
+  display: inline-flex;
+  flex-wrap: nowrap;
+  gap: var(--segmented-control-gap);
+  height: var(--segmented-control-size);
+  padding: var(--segmented-control-gutter);
+  border-radius: var(--segmented-control-radius);
+  background: var(--segmented-control-background);
+  font-size: var(--segmented-control-font-size);
+  font-weight: var(--segmented-control-font-weight);
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  /* Remove inline-flex baseline gap */
+  vertical-align: middle;
+  white-space: nowrap;
+}
+
+  ._SegmentedControl_1sl7d_1::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+
+  ._SegmentedControl_1sl7d_1::-webkit-scrollbar-track,
+  ._SegmentedControl_1sl7d_1::-webkit-scrollbar-thumb {
+    background: transparent;
+  }
+
+  ._SegmentedControl_1sl7d_1:where([data-block]) {
+    overflow: hidden;
+    display: flex;
+    width: 100%;
+    white-space: wrap;
+  }
+
+  /* =============================================
+    Sizes
+  ============================================= */
+  ._SegmentedControl_1sl7d_1:where([data-size="3xs"]) {
+    --segmented-control-size: var(--control-size-3xs);
+    --segmented-control-font-size: var(--control-font-size-sm);
+    --segmented-control-radius: var(--control-radius-sm);
+    --segmented-control-option-gutter: var(--control-gutter-xs);
+  }
+
+  ._SegmentedControl_1sl7d_1:where([data-size="2xs"]) {
+    --segmented-control-size: var(--control-size-2xs);
+    --segmented-control-font-size: var(--control-font-size-sm);
+    --segmented-control-radius: var(--control-radius-sm);
+    --segmented-control-option-gutter: var(--control-gutter-xs);
+  }
+
+  ._SegmentedControl_1sl7d_1:where([data-size="xs"]) {
+    --segmented-control-size: var(--control-size-xs);
+    --segmented-control-font-size: var(--control-font-size-md);
+    --segmented-control-radius: var(--control-radius-sm);
+    --segmented-control-option-gutter: var(--control-gutter-xs);
+  }
+
+  ._SegmentedControl_1sl7d_1:where([data-size="sm"]) {
+    --segmented-control-size: var(--control-size-sm);
+    --segmented-control-font-size: var(--control-font-size-md);
+    --segmented-control-radius: var(--control-radius-md);
+    --segmented-control-option-gutter: var(--control-gutter-sm);
+  }
+
+  ._SegmentedControl_1sl7d_1:where([data-size="md"]) {
+    --segmented-control-size: var(--control-size-md);
+    --segmented-control-font-size: var(--control-font-size-md);
+    --segmented-control-radius: var(--control-radius-md);
+    --segmented-control-option-gutter: var(--control-gutter-md);
+  }
+
+  ._SegmentedControl_1sl7d_1:where([data-size="lg"]) {
+    --segmented-control-size: var(--control-size-lg);
+    --segmented-control-font-size: var(--control-font-size-md);
+    --segmented-control-radius: var(--control-radius-md);
+    --segmented-control-option-gutter: var(--control-gutter-md);
+  }
+
+  ._SegmentedControl_1sl7d_1:where([data-size="xl"]) {
+    --segmented-control-size: var(--control-size-xl);
+    --segmented-control-font-size: var(--control-font-size-md);
+    --segmented-control-radius: var(--control-radius-lg);
+    --segmented-control-option-gutter: var(--control-gutter-lg);
+  }
+
+  ._SegmentedControl_1sl7d_1:where([data-size="2xl"]) {
+    --segmented-control-size: var(--control-size-2xl);
+    --segmented-control-font-size: var(--control-font-size-lg);
+    --segmented-control-radius: var(--control-radius-xl);
+    --segmented-control-option-gutter: var(--control-gutter-xl);
+  }
+
+  ._SegmentedControl_1sl7d_1:where([data-size="3xl"]) {
+    --segmented-control-size: var(--control-size-3xl);
+    --segmented-control-font-size: var(--control-font-size-lg);
+    --segmented-control-radius: var(--control-radius-xl);
+    --segmented-control-option-gutter: var(--control-gutter-xl);
+  }
+
+  /* =============================================
+    Gutter sizes
+  ============================================= */
+  ._SegmentedControl_1sl7d_1:where([data-gutter-size="2xs"]) {
+    --segmented-control-option-gutter: var(--control-gutter-2xs);
+  }
+
+  ._SegmentedControl_1sl7d_1:where([data-gutter-size="xs"]) {
+    --segmented-control-option-gutter: var(--control-gutter-xs);
+  }
+
+  ._SegmentedControl_1sl7d_1:where([data-gutter-size="sm"]) {
+    --segmented-control-option-gutter: var(--control-gutter-sm);
+  }
+
+  ._SegmentedControl_1sl7d_1:where([data-gutter-size="md"]) {
+    --segmented-control-option-gutter: var(--control-gutter-md);
+  }
+
+  ._SegmentedControl_1sl7d_1:where([data-gutter-size="lg"]) {
+    --segmented-control-option-gutter: var(--control-gutter-lg);
+  }
+
+  ._SegmentedControl_1sl7d_1:where([data-gutter-size="xl"]) {
+    --segmented-control-option-gutter: var(--control-gutter-xl);
+  }
+
+  /* =============================================
+    Pill
+  ============================================= */
+  ._SegmentedControl_1sl7d_1:where([data-pill]) {
+    --segmented-control-radius: var(--radius-full);
+    --segmented-control-option-radius: var(--radius-full);
+  }._SegmentedControlOption_1sl7d_140 {
+  position: relative;
+  padding: 0 var(--segmented-control-option-gutter);
+  border-radius: var(--segmented-control-option-radius);
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  line-height: 1;
+  transition-duration: var(--transition-duration-basic);
+  transition-property: opacity, background-color, color;
+  transition-timing-function: var(--transition-ease-basic);
+}
+
+  ._SegmentedControlOption_1sl7d_140:focus {
+    outline: 0;
+  }
+
+  :where(._SegmentedControl_1sl7d_1[data-block]) ._SegmentedControlOption_1sl7d_140 {
+    flex: 1;
+  }
+
+  :where(._SegmentedControl_1sl7d_1[data-pill]) ._SegmentedControlOption_1sl7d_140 {
+    padding: 0 calc(var(--segmented-control-option-gutter) * var(--control-gutter-pill-scaling));
+  }
+
+  ._SegmentedControlOption_1sl7d_140[data-state="on"]:focus-visible {
+    outline: 2px solid var(--color-ring);
+  }
+
+  ._SegmentedControlOption_1sl7d_140::before {
+    position: absolute;
+    inset: var(--segmented-control-option-highlight-gutter);
+    border-radius: var(--segmented-control-option-radius);
+    background: var(--segmented-control-option-highlight-background-color);
+    content: "";
+    opacity: 0;
+    pointer-events: none;
+    transform: scale(1);
+    transition-duration: var(--transition-duration-basic);
+    transition-property: opacity, transform;
+    transition-timing-function: var(--transition-ease-basic);
+    will-change: transform;
+  }
+
+  ._SegmentedControlOption_1sl7d_140:active::before {
+    transform: scale(var(--scale), 0.97);
+  }
+
+  ._SegmentedControlOption_1sl7d_140 svg {
+    display: block;
+  }
+    @media (hover: hover) and (pointer: fine) {._SegmentedControlOption_1sl7d_140[data-state="off"]:where(:not([disabled])):hover {
+      color: var(--color-text);
+}
+
+      ._SegmentedControlOption_1sl7d_140[data-state="off"]:where(:not([disabled])):hover::before {
+        opacity: 0.5;
+      }
+}
+
+    ._SegmentedControlOption_1sl7d_140[data-state="off"]:where(:not([disabled])):focus-visible {
+      color: var(--color-text);
+      outline: 2px solid var(--color-ring);
+    }
+
+    ._SegmentedControlOption_1sl7d_140[data-state="off"]:where(:not([disabled])):active::before {
+      opacity: 0.75;
+    }
+
+  ._SegmentedControlOption_1sl7d_140[data-state="on"] {
+    color: var(--color-text);
+  }
+
+  ._SegmentedControlOption_1sl7d_140[data-disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+    ._SegmentedControlOption_1sl7d_140[data-disabled]::before {
+      opacity: 0 !important;
+    }._SegmentedControlThumb_1sl7d_219 {
+  position: absolute;
+  top: var(--segmented-control-gutter);
+  bottom: var(--segmented-control-gutter);
+  left: 0;
+  border-radius: var(--segmented-control-option-radius);
+  background: var(--segmented-control-thumb-background);
+  box-shadow: var(--segmented-control-thumb-shadow);
+  pointer-events: none;
+  will-change: transform;
+}
 }